/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
}

button,
input {
  outline: none;
  border: none;
}

input[type=radio] {
  position: absolute;
  top: -5000px;
  left: -5000px;
  opacity: 0;
  z-index: -1000;
}
/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/
.slider {
  position: relative;
  height: 100%;
}
.slider-control {
  z-index: 50;
  position: absolute;
  top: calc(50% - 2rem);
  width: 7rem;
  height: 7rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.slider-control.left {
  left: 4rem;
}
.slider-control.right {
  right: 4rem;
}
.slider-icon-right {
  font-size: 50px;
  margin-left: 11px;
}
.slider-icon-left {
  font-size: 50px;
  margin-left: 7px;
}
.slider-control label {
  z-index: 2000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform: scale(0);
  transition: transform 0s 0s;
}
.slider-main {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 2.8s, z-index 0.1s;
  overflow: hidden;
}
.slider-main.animation-5 .part {
  position: absolute;
  top: 0;
  width: 20.1%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.slider-main.animation-5 .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  background-position: center;
  top: 0;
  width: 500%;
  height: 100%;
  background-image: url("./assets/img/slide/first_slider_01.jpg");
}
.slider-main.animation-5 .part.part-1 {
  transition: transform 1.1s 0.3s;
  left: 0%;
}
.slider-main.animation-5 .part.part-1:before {
  left: 0%;
}
.slider-main.animation-5 .part.part-2 {
  transition: transform 1.1s 0.5s;
  left: 20%;
}
.slider-main.animation-5 .part.part-2:before {
  left: -100%;
}
.slider-main.animation-5 .part.part-3 {
  transition: transform 1.1s 0.7s;
  left: 40%;
}
.slider-main.animation-5 .part.part-3:before {
  left: -200%;
}
.slider-main.animation-5 .part.part-4 {
  transition: transform 1.1s 0.5s;
  left: 60%;
}
.slider-main.animation-5 .part.part-4:before {
  left: -300%;
}
.slider-main.animation-5 .part.part-5 {
  transition: transform 1.1s 0.3s;
  left: 80%;
}
.slider-main.animation-5 .part.part-5:before {
  left: -400%;
}
.slider-main.animation-5 .part {
  transform: translateY(100%);
}
.slider-main.animation-9 .slider-background {
  perspective: 2000;
}
.slider-main.animation-9 .part {
  position: absolute;
  width: 33.5%;
  height: 33.5%;
  overflow: hidden;
  will-change: transform;
  transform-origin: 0% 100%;
}
.slider-main.animation-9 .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 300%;
  height: 300%;
  background-image: url("assets/img/slide/second_slider_02.jpg");
}
.slider-main.animation-9 .part.left-top {
  top: 0%;
  left: 0%;
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
}
.slider-main.animation-9 .part.left-top:before {
  top: 0%;
  left: 0%;
}
.slider-main.animation-9 .part.mid-top {
  top: 0%;
  left: 33.33333%;
  transition: transform 0.9s 0.4s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.8s;
}
.slider-main.animation-9 .part.mid-top:before {
  top: 0%;
  left: -100%;
}
.slider-main.animation-9 .part.right-top {
  top: 0%;
  left: 66.66667%;
  transition: transform 0.9s 0.5s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.9s;
}
.slider-main.animation-9 .part.right-top:before {
  top: 0%;
  left: -200%;
}
.slider-main.animation-9 .part.left-mid {
  top: 33.33333%;
  left: 0%;
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
}
.slider-main.animation-9 .part.left-mid:before {
  top: -100%;
  left: 0%;
}
.slider-main.animation-9 .part.mid-mid {
  top: 33.33333%;
  left: 33.33333%;
  transition: transform 0.9s 0.3s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 0.7s;
}
.slider-main.animation-9 .part.mid-mid:before {
  top: -100%;
  left: -100%;
}
.slider-main.animation-9 .part.right-mid {
  top: 33.33333%;
  left: 66.66667%;
  transition: transform 0.9s 0.6s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1s;
}
.slider-main.animation-9 .part.right-mid:before {
  top: -100%;
  left: -200%;
}
.slider-main.animation-9 .part.left-bot {
  top: 66.66667%;
  left: 0%;
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
}
.slider-main.animation-9 .part.left-bot:before {
  top: -200%;
  left: 0%;
}
.slider-main.animation-9 .part.mid-bot {
  top: 66.66667%;
  left: 33.33333%;
  transition: transform 0.9s 0.8s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.2s;
}
.slider-main.animation-9 .part.mid-bot:before {
  top: -200%;
  left: -100%;
}
.slider-main.animation-9 .part.right-bot {
  top: 66.66667%;
  left: 66.66667%;
  transition: transform 0.9s 0.7s cubic-bezier(0.58, -0.7, 0.59, 0.95), opacity 0.6s 1.1s;
}
.slider-main.animation-9 .part.right-bot:before {
  top: -200%;
  left: -200%;
}
.slider-main.animation-9 .part {
  transform: rotateX(90deg);
  opacity: 0;
}
.slider-main.animation-3 .part {
  position: absolute;
  top: 0;
  width: 33.5%;
  height: 100%;
  overflow: hidden;
  transition: transform 1.5s 0.3s;
  will-change: transform;
}
.slider-main.animation-3 .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 300%;
  height: 100%;
  background-image: url("assets/img/slide/third_slider_03.jpg");
}
.slider-main.animation-3 .part.left {
  left: 0;
}
.slider-main.animation-3 .part.left:before {
  left: 0;
}
.slider-main.animation-3 .part.mid {
  left: 33.33333%;
}
.slider-main.animation-3 .part.mid:before {
  left: -100%;
}
.slider-main.animation-3 .part.right {
  left: 66.66667%;
}
.slider-main.animation-3 .part.right:before {
  left: -200%;
}
.slider-main.animation-3 .left {
  transform: translate3D(-100%, -33.333%, 0);
}
.slider-main.animation-3 .mid {
  transform: translate3D(0, 100%, 0);
}
.slider-main.animation-3 .right {
  transform: translate3D(100%, -33.333%, 0);
}
.slider-main.animation-4 .part {
  position: absolute;
  width: 50.2%;
  height: 50.2%;
  overflow: hidden;
  will-change: transform;
}
.slider-main.animation-4 .part:before {
  content: "";
  display: block;
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 200%;
  height: 200%;
  background-image: url("assets/img/slide/fourth_slider_04.jpg");
}
.slider-main.animation-4 .part.top {
  top: 0;
  transition: transform 1.3s 0.3s;
}
.slider-main.animation-4 .part.top:before {
  top: 0;
}
.slider-main.animation-4 .part.bot {
  top: 50%;
  transition: transform 1.3s 0.5s;
}
.slider-main.animation-4 .part.bot:before {
  top: -100%;
}
.slider-main.animation-4 .part.left {
  left: 0;
}
.slider-main.animation-4 .part.left:before {
  left: 0;
}
.slider-main.animation-4 .part.right {
  left: 50%;
}
.slider-main.animation-4 .part.right:before {
  left: -100%;
}
.slider-main.animation-4 .left {
  transform: translateX(-100%);
}
.slider-main.animation-4 .right {
  transform: translateX(100%);
}
.slider-background {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  transition: transform 1s 1.5s;
  will-change: transform;
}
.slider-background .part:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
}
/* Start Navigation with numbers */
/* Start Up to 6 slides */
.slider-navigation-manual {
  position: absolute;
  margin-top: 25px;
  height: 50px;
  right: 40px;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.slider-manual-btn {
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}
.slider-manual-btn:not(:last-child) {
  margin-right: 50px;
}
.slider-manual-btn:hover {
  background: #ffffff;
}
.slider-navigation-auto {
  position: absolute;
  margin-top: 25px;
  height: 50px;
  right: 40px;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.slider-navigation-auto div{
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}
.slider-navigation-auto div:not(:last-child) {
  margin-right: 50px;
}
#page1:checked ~ .slider-navigation-auto .slider-auto-btn1 {
  background: #ffffff;
}
#page2:checked ~ .slider-navigation-auto .slider-auto-btn2 {
  background: #ffffff;
}
#page3:checked ~ .slider-navigation-auto .slider-auto-btn3 {
  background: #ffffff;
}
#page4:checked ~ .slider-navigation-auto .slider-auto-btn4 {
  background: #ffffff;
}
.h1-right-num {
  text-align: right;
  width: 20px;
  font-size: 32px!important;
  font-weight: 400;
  border-radius: 30px;
  position: absolute;
  bottom: 0;
}
/* End Up to then 6 slides */
/* Start More then 6 slides */
.slider-navigation-more-manual {
  position: absolute;
  margin-top: 25px;
  right: 40px;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.slider-more-manual-btn {
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}
.slider-more-manual-btn:not(:last-child) {
  margin-right: 10px;
}
.slider-more-manual-btn:hover {
  background: #ffffff;
}
.slider-navigation-more {
  position: absolute;
  margin-top: 25px;
  right: 40px;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.slider-navigation-more div{
  border: 2px solid #ffffff;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}
.slider-navigation-more div:not(:last-child) {
  margin-right: 10px;
}
#page1:checked ~ .slider-navigation-more .slider-more-btn1 {
  background: #ffffff;
}
#page2:checked ~ .slider-navigation-more .slider-more-btn2 {
  background: #ffffff;
}
#page3:checked ~ .slider-navigation-more .slider-more-btn3 {
  background: #ffffff;
}
#page4:checked ~ .slider-navigation-more .slider-more-btn4 {
  background: #ffffff;
}
/* End More then 6 slides */
/* End Navigation with numbers */
.slider-cont {
  position: relative;
  top: 120px;
  left: 5%;
  width: 100%;
  height: 100%;
  padding: 0rem;
  transition: opacity 0.3s;
  opacity: 0;
}
@media (min-width: 310px) {
  .slider-cont {
    top: 150px;
  }
} 
@media (min-width: 425px) {
  .slider-cont {
    top: 170px;
  }
} 
@media (min-width: 768px) {
  .slider-cont {
    top: 130px;
  }
} 
@media (min-width: 1024px) {
  .slider-cont {
    top: 123px;
  }
} 
.slider-heading-text {
  font-size: 4rem;
  font-family: 'Quicksand', sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
}
@media (min-width: 310px) {
  .slider-heading-text {
    font-size: 5rem;
  }
}
@media (min-width: 310px) {
  .discount-30 {
    font-size: 6.5rem;
  }
}
@media (min-width: 768px) {
  .slider-heading-text {
    font-size: 6.2rem;
  }
} 
@media (min-width: 1024px) {
  .slider-heading-text {
    font-size: 8rem;
  }
}
/*--------------------------------------------------------------
# Spin text
--------------------------------------------------------------*/
#spin {
  color:#fff;
}
#spin:after {
  content:"";
  animation: spin 20s linear infinite;
}
@keyframes spin {
  0% { 
    content: "beautiful";
  }
  20% { 
    content: "modern";
  }
  30% { 
    content: "websites";
  }
  50% { 
    content: "with";
  }
  60% { 
    content: "Best Websites";
  }
  80% { 
    content: "was created";
  }
  100% { 
    content: "with love";
  }
}
/*--------------------------------------------------------------
# Control
--------------------------------------------------------------*/
#page1:checked ~ .slider-1-design {
  z-index: 10;
}
#page1:checked ~ .slider-1-design .slider-background {
  transform: scale(0.834);
}
#page1:checked ~ .slider-1-design .slider-cont {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page1:checked ~ .slider-1-design .part {
  transform: translateZ(0);
  opacity: 1;
}

#page2:checked ~ .slider-2-design {
  z-index: 10;
}
#page2:checked ~ .slider-2-design .slider-background {
  transform: scale(0.834);
}
#page2:checked ~ .slider-2-design .slider-cont {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page2:checked ~ .slider-2-design .part {
  transform: translateZ(0);
  opacity: 1;
}

#page3:checked ~ .slider-3-design {
  z-index: 10;
}
#page3:checked ~ .slider-3-design .slider-background {
  transform: scale(0.834);
}
#page3:checked ~ .slider-3-design .slider-cont {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page3:checked ~ .slider-3-design .part {
  transform: translateZ(0);
  opacity: 1;
}

#page4:checked ~ .slider-4-design {
  z-index: 10;
}
#page4:checked ~ .slider-4-design .slider-background {
  transform: scale(0.834);
}
#page4:checked ~ .slider-4-design .slider-cont {
  opacity: 1;
  transition: opacity 0.3s 1.8s;
}
#page4:checked ~ .slider-4-design .part {
  transform: translateZ(0);
  opacity: 1;
}

#page1:checked ~ .slider-control.left .page4-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page1:checked ~ .slider-control.right .page2-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}

#page2:checked ~ .slider-control.left .page1-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page2:checked ~ .slider-control.right .page3-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}

#page3:checked ~ .slider-control.left .page2-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page3:checked ~ .slider-control.right .page4-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}

#page4:checked ~ .slider-control.left .page3-left {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
#page4:checked ~ .slider-control.right .page1-right {
  z-index: 5000;
  transform: scale(1);
  transition: transform 0s 2.1s;
}
/*--------------------------------------------------------------
# Text color
--------------------------------------------------------------*/
.text-gradient-01{
  color:#fd584c;
}
.text-gradient-02{
  color:#5d5386;
}
.text-gradient-03{
  color:#6859ea;
}
.text-gradient-04{
  color:#00b7ff;
}
.text-gradient-05{
  color:#662d8c;
}
.text-dark{
  color:#2c304d!important
}
.text-dark-black{
  color:#141619!important
}
.text-primary{
  color:#5d5386!important
}
.text-secondary{
  color:#e76c90!important
}
.text-red{
  color:#fe195e!important
}
.text-yellow{
  color:#eef157!important
}
.text-green{
  color:#60c400!important
}
.text-orange{
  color:#f7b733!important
}
.text-violet{
  color:#796aee!important
}
.text-blue{
  color:#08a6c3!important
}
.text-grey-light{
  color:#e6e8e9!important
}
.text-grey-dark{
  color:#50525b!important
}
.text-facebook{
  color:#3b5998!important
}
.text-twitter{
  color:#1da1f2!important
}
.text-linkedin{
  color:#007bb7!important
}
.text-youtube{
  color:#cd201f!important
}
.text-white {
  color: #fff;
  font-size: 2.7em;
  font-family: 'Quicksand', sans-serif;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: #fff;
  z-index: 99999;
  height: 100%;
  width: 100%;
  overflow: hidden; }

#status {
  position: absolute;
  left: 47%;
  top: 55%;
  margin: auto;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background: #35b7ff;
  animation: 1.15s infinite ease-in-out;
  -webkit-animation: 1.15s infinite ease-in-out;
  -moz-animation: 1.15s infinite ease-in-out;
  animation-name: loader;
  -webkit-animation-name: loader;
  -moz-animation-name: loader;
  z-index: 100000; }
  #status:before, #status:after {
    animation: 1.15s infinite ease-in-out;
    -webkit-animation: 1.15s infinite ease-in-out;
    -moz-animation: 1.15s infinite ease-in-out; }
  #status:before, #status:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0; }

@keyframes loader {
  from {
    transform: scale(0);
    opacity: 1; }
  to {
    transform: scale(1);
    opacity: 0.5; } }
@-ms-keyframes loader {
  from {
    -ms-transform: scale(0);
    opacity: 1; }
  to {
    -ms-transform: scale(1);
    opacity: 0.5; } }
@-webkit-keyframes loader {
  from {
    -webkit-transform: scale(0);
    opacity: 1; }
  to {
    -webkit-transform: scale(1);
    opacity: 0.5; } }
@-moz-keyframes loader {
  from {
    -moz-transform: scale(0);
    opacity: 1; }
  to {
    -moz-transform: scale(1);
    opacity: 0.5; } }
/*--------------------------------------------------------------
# Right numbers
--------------------------------------------------------------*/
.w-right {
  position: absolute;
  right: 0px;
  width: 120px;
  top: 0px!important;
  left: auto!important; }

.right-num {
  text-align: right;
  /* If you want a full black background on slide number delete width: 20px */
  width: 20px;
  font-size: 100px;
  font-weight: 400;
  background: #000;
  border-radius: 30px;
  position: absolute;
  bottom: 0; }