.ferris-container {
    padding:120px 0 !important;
}
.ferris-wrapper {
    position:relative;
    display:block;
    width:300px;
    height:300px;
    margin:0 auto;
}
.ferris-wrapper .ferris_wheel:before {
  content: "";
  height: 150px;
  width: 150px;
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 75px);
  top: calc(50% - 75px);
  z-index: 5;
  /*background:url('https://covid-frontline.init1-dev.com/wp-content/uploads/2021/03/covid-icon.png') no-repeat center center;*/
  background:url('https://covid-frontline.init1-dev.com/wp-content/uploads/2021/03/IG-profile-pic.png') no-repeat center center;
  background-size:contain;
    border-radius:100%;
}
.ferris-wrapper:after {
    z-index:3;
    height:150px;
    width:150px;
    margin-left:-75px;
    margin-top:-75px;
    background-image:none;
    background-color:#ffffff;
}

.ferris_wheel ,.wheel {
  border: 4px solid rgba(255,255,255,0.3);
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

.ferris_wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(1.4, 1.4);
  border: 0;
}

.wheel_wrap {
  position: absolute;
  animation: wheel_rotate 90s infinite linear;
	z-index:4;
}
.second .wheel_wrap {
  animation: wheel_rotate 75s infinite linear;
}
.seventh .wheel_wrap {
  animation: wheel_rotate 105s infinite linear;
}
.eighth .wheel_wrap {
    animation: wheel_rotate 120s infinite linear;
}


.wheel span:nth-child(1):before {
  content: "";
  border-bottom: 4px solid rgba(255,255,255,0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  top: 50%;
  left: 6px;
}

.wheel span:nth-child(1):after {
  content: "";
  border-right: 4px solid rgba(255,255,255,0.3);
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  left: 50%;
  transform: rotate(-30deg);
}

.wheel span:nth-child(2):before {
  content: "";
  border-right: 4px solid rgba(255,255,255,0.3);
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  left: 50%;
  transform: rotate(30deg);
}

/* .wheel span:nth-child(2):after {
  content: "";
  border-right: 3px solid #17386c7a;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  left: 50%;
  transform: rotate(55deg);
}

.wheel span:nth-child(3):before {
  content: "";
  border-right: 3px solid #17386c7a;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  left: 50%;
  transform: rotate(-18deg);
} */


/*2nd Wheel*/
.second .wheel span:before,
.second .wheel span:after{
    display:none;
    border-right:0;
}
.second .wheel span:nth-child(1):before { transform: rotate(-35deg); }
.second .wheel span:nth-child(2):before { transform: rotate(-110deg); }
.second .wheel span:nth-child(3):before { transform: rotate(-180deg); }
.second .wheel span:nth-child(4):before { transform: rotate(-250deg); }
.second .wheel span:nth-child(5):before { transform: rotate(-324deg); }
.second .wheel span:nth-child(6):before { transform: rotate(-220deg); }
.second .wheel span:nth-child(7):before { transform: rotate(-260deg); }
.second .wheel span:nth-child(8):before { transform: rotate(-300deg); }
.second .wheel span:nth-child(9):before { transform: rotate(-340deg); }

.second .wheel span:nth-child(1):before,
.second .wheel span:nth-child(2):before,
.second .wheel span:nth-child(3):before,
.second .wheel span:nth-child(4):before,
.second .wheel span:nth-child(5):before,
.second .wheel span:nth-child(6):before,
.second .wheel span:nth-child(7):before,
.second .wheel span:nth-child(8):before,
.second .wheel span:nth-child(9):before { content: ""; border-bottom: 0; height:4px; position: absolute; width: 300px; top: 50%; left: 0; display:block; background: rgb(23,56,108);   background:linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%); }



/*7th Wheel*/
.seventh .wheel span:before,
.seventh .wheel span:after{
    display:none;
    border-right:0;
}
.seventh .wheel span:nth-child(1):before { transform: rotate(-25deg); }
.seventh .wheel span:nth-child(2):before { transform: rotate(-76deg); }
.seventh .wheel span:nth-child(3):before { transform: rotate(-129deg); }
.seventh .wheel span:nth-child(4):before { transform: rotate(-181deg); }
.seventh .wheel span:nth-child(5):before { transform: rotate(-233deg); }
.seventh .wheel span:nth-child(6):before { transform: rotate(-283deg); }
.seventh .wheel span:nth-child(7):before { transform: rotate(-334deg); }

.seventh .wheel span:nth-child(1):before,
.seventh .wheel span:nth-child(2):before,
.seventh .wheel span:nth-child(3):before,
.seventh .wheel span:nth-child(4):before,
.seventh .wheel span:nth-child(5):before,
.seventh .wheel span:nth-child(6):before,
.seventh .wheel span:nth-child(7):before { content: ""; border-bottom: 0; height:4px; position: absolute; width: 300px; top: 50%; left: 0; display:block; background: rgb(23,56,108);   background:linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%); }



/*8th Wheel*/
.eighth .wheel span:before,
.eighth .wheel span:after{
    display:none;
    border-right:0;
}
.eighth .wheel span:nth-child(1):before { transform: rotate(0deg); }
.eighth .wheel span:nth-child(2):before { transform: rotate(-45deg); }
.eighth .wheel span:nth-child(3):before { transform: rotate(-90deg); }
.eighth .wheel span:nth-child(4):before { transform: rotate(-135deg); }
.eighth .wheel span:nth-child(5):before { transform: rotate(-180deg); }
.eighth .wheel span:nth-child(6):before { transform: rotate(-225deg); }
.eighth .wheel span:nth-child(7):before { transform: rotate(-270deg); }
.eighth .wheel span:nth-child(8):before { transform: rotate(-315deg); }

.eighth .wheel span:nth-child(1):before,
.eighth .wheel span:nth-child(2):before,
.eighth .wheel span:nth-child(3):before,
.eighth .wheel span:nth-child(4):before,
.eighth .wheel span:nth-child(5):before,
.eighth .wheel span:nth-child(6):before,
.eighth .wheel span:nth-child(7):before,
.eighth .wheel span:nth-child(8):before { content: ""; border-bottom: 0; height:4px; position: absolute; width: 300px; top: 50%; left: 0; display:block; background: rgb(23,56,108);   background:linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%); }



@keyframes wheel_rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}



.buckets > div {
  position: absolute;
  width:110px;
  animation: bucket_rotate 90s infinite linear;
  top: 50%;
  left: 50%;
  margin-left:-55px;
    margin-top:-55px;
}
.buckets > div.cabin {  
    text-align:center;
    border: 0;
    border-radius:50%;
    color:#ffffff;
	z-index:20;
}
.buckets > div.cabin:hover {
	z-index:30;
}

.buckets > div.cabin .img-holder { position:relative; }
.buckets > div.cabin .img-holder .slide-description { visibility:hidden; opacity:0; filter:alpha(opacity=0); position: absolute; z-index:100; bottom: 100%; left: calc(50% - 130px); width: 260px; background: rgba(0,0,0,0.7); padding: 10px; font-size: 11px; line-height: 1.4; border-radius: 10px; border: 2px solid #D62829; color: #fff; font-weight: 600; -webkit-transition: all 0.34s ease; transition : all 0.34s ease; }
.buckets > div.cabin .img-holder .slide-description:before, .buckets > div.cabin .img-holder .slide-description:after { content: ""; display: block; position: absolute; left: calc(50% - 5px); top: 100%; border-top: 10px solid rgba(0,0,0,0.8); width: 0; height: 0; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; z-index:2; margin-top:-1px; }
.buckets > div.cabin .img-holder .slide-description:after { border-width:13px !important; border-top-color:#D62829; left: calc(50% - 8px); z-index:1; margin-top:0; }
.buckets > div.cabin .img-holder img.png { position:absolute; left:0; top:0; z-index:10; width:100%; }
.buckets div img { max-width:100%; opacity:1; filter:alpha(opacity=100); border-radius:50%; background:rgba(255,255,255,0); position:relative; z-index:1; -webkit-transition: all 0.34s ease; transition : all 0.34s ease; opacity:1; filter:alpha(opacity=100); }
.buckets div.cabin:hover img { border: 0; }
.buckets div.cabin:hover img.png { opacity:0; filter:alpha(opacity=0); }
.buckets div h3 { font-size:1.1em; display:none; line-height:1.1; font-weight:600; font-family:"Roboto"; color:#ffffff; min-height:2.2em; }
.buckets > div.cabin:hover .img-holder .slide-description { visibility:visible; opacity:1; filter:alpha(opacity=100); bottom: calc(100% + 20px); }

.buckets span {
  display: inline-block;
  height: 0;
  width: auto;
  position: relative;
}



@keyframes bucket_rotate {
  0% { 
    transform: rotate(0) translateX(150px) rotate(0); 
  }
  100% { 
    transform: rotate(360deg) translateX(150px) rotate(-360deg); 
  }
}

.buckets div:nth-child(2) {
  animation-delay: -14.9s;
}

.buckets div:nth-child(3) {
  animation-delay: -30s;
}

.buckets div:nth-child(4) {
  animation-delay: -45s;
}

.buckets div:nth-child(5) {
  animation-delay: -60s;
}

.buckets div:nth-child(6) {
  animation-delay: -75s;
}

.buckets div:nth-child(7) {
  animation-delay: -90s;
}

.buckets div:nth-child(8) {
  animation-delay: -105s;
}

.buckets div:nth-child(9) {
  animation-delay: -120s;
}

.buckets div:nth-child(10) {
  animation-delay: -135s;
}

.buckets div:nth-child(11) {
  animation-delay: -150s;
}

.ferris_wheel:hover .wheel_wrap,
.ferris_wheel:hover .buckets div,
.ferris_wheel:hover .buckets > div:before {
     animation-play-state: paused !important; 
}



/*2nd Commercial Ferris Wheel*/
.second .buckets div:nth-child(2) {
  animation-delay: -14.9s;
}

.second .buckets div:nth-child(3) {
  animation-delay: -30s;
}

.second .buckets div:nth-child(4) {
  animation-delay: -45s;
}

.second .buckets div:nth-child(5) {
  animation-delay: -60s;
}

.second .buckets div:nth-child(6) {
  animation-delay: -75s;
}

.second .buckets div:nth-child(7) {
  animation-delay: -90s;
}

.second .buckets div:nth-child(8) {
  animation-delay: -105s;
}

.second .buckets div:nth-child(9) {
  animation-delay: -120s;
}


.second .buckets > div {
  animation: bucket_rotate 75s infinite linear;
}


/*7th Ferris Wheel*/
.seventh .buckets div:nth-child(2) {
  animation-delay: -14.9s;
}

.seventh .buckets div:nth-child(3) {
  animation-delay: -30s;
}

.seventh .buckets div:nth-child(4) {
  animation-delay: -45s;
}

.seventh .buckets div:nth-child(5) {
  animation-delay: -60s;
}

.seventh .buckets div:nth-child(6) {
  animation-delay: -75s;
}

.seventh .buckets div:nth-child(7) {
  animation-delay: -90s;
}


.seventh .buckets > div {
  animation: bucket_rotate 105s infinite linear;
}


/*8th Ferris Wheel*/
.eighth .buckets div:nth-child(2) {
animation-delay: -14.9s;
}

.eighth .buckets div:nth-child(3) {
animation-delay: -30s;
}

.eighth .buckets div:nth-child(4) {
animation-delay: -45s;
}

.eighth .buckets div:nth-child(5) {
animation-delay: -60s;
}

.eighth .buckets div:nth-child(6) {
animation-delay: -75s;
}

.eighth .buckets div:nth-child(7) {
animation-delay: -90s;
}

.eighth .buckets div:nth-child(8) {
animation-delay: -105s;
}

.eighth .buckets div:nth-child(9) {
    animation-delay: -120s;
    }


.eighth .buckets > div {
animation: bucket_rotate 120s infinite linear;
}




#commercial_slick .slick-list { padding:10px 0 !important; }
#commercial_slick .slick-ferris { padding-top:150px; padding-bottom:150px; }
#commercial_slick .btn-prev,
#commercial_slick .btn-next { position:absolute; top:50%; margin-top:-10px; z-index:10; background:transparent; font-size:40px; }
#commercial_slick .btn-prev:hover,
#commercial_slick .btn-next:hover { background:rgba(0,0,0,0.3);}
#commercial_slick .btn-prev { left:0; }
#commercial_slick .btn-next { right:0; }
#commercial_slick button.slick-disabled,
#commercial_slick button.slick-disabled:hover { background:transparent; cursor:default; opacity:0.2; filter:alpha(opacity=20);}


@media only screen and (min-width:1367px) {
	.ferris-container {
		padding:160px 0 !important;
	}
	.buckets > div {
      position: absolute;
      width:130px;
      margin-left:-65px;
        margin-top:-65px;
    }
    .ferris-wrapper {
        width:400px;
        height:400px;
    }
    .ferris_wheel, .wheel {
        width: 400px;
        height: 400px;
    }
    .ferris-wrapper .ferris_wheel:before {
      height: 200px;
      width: 200px;
      left: calc(50% - 100px);
      top: calc(50% - 100px);
      background-size:150px 150px;
    }
    .wheel span:nth-child(1):before,
    .wheel span:nth-child(1):after,
    .wheel span:nth-child(2):before,
    .wheel span:nth-child(2):after,
    .wheel span:nth-child(3):before {
      height: 400px;
    }
    .wheel span:nth-child(1)::before {
        width:400px;
        height:0;
    }

    .second .wheel span:nth-child(1):before,
    .second .wheel span:nth-child(2):before,
    .second .wheel span:nth-child(3):before,
    .second .wheel span:nth-child(4):before,
    .second .wheel span:nth-child(5):before,
    .second .wheel span:nth-child(6):before,
    .second .wheel span:nth-child(7):before,
    .second .wheel span:nth-child(8):before,
    .second .wheel span:nth-child(9):before { width: 400px; }
	
	
	.seventh .wheel span:nth-child(1):before,
    .seventh .wheel span:nth-child(2):before,
    .seventh .wheel span:nth-child(3):before,
    .seventh .wheel span:nth-child(4):before,
    .seventh .wheel span:nth-child(5):before,
    .seventh .wheel span:nth-child(6):before,
    .seventh .wheel span:nth-child(7):before,
    .seventh .wheel span:nth-child(8):before,
    .seventh .wheel span:nth-child(9):before { width: 400px; }


    .eighth .wheel span:nth-child(1):before,
    .eighth .wheel span:nth-child(2):before,
    .eighth .wheel span:nth-child(3):before,
    .eighth .wheel span:nth-child(4):before,
    .eighth .wheel span:nth-child(5):before,
    .eighth .wheel span:nth-child(6):before,
    .eighth .wheel span:nth-child(7):before,
    .eighth .wheel span:nth-child(8):before,
    .eighth .wheel span:nth-child(9):before { width: 400px; }
    
    @keyframes bucket_rotate {
      0% { 
        transform: rotate(0) translateX(200px) rotate(0); 
      }
      100% { 
        transform: rotate(360deg) translateX(200px) rotate(-360deg); 
      }
    }
    
    #commercial_slick .btn-prev, #commercial_slick .btn-next {
        top:auto;
        bottom:0;
        font-size:30px;
    }
    #commercial_slick .slick-ferris {
        padding-top:140px;
        padding-bottom:140px;
    }
}


@media only screen and (max-width:767px) {
	.ferris-container {
		padding:80px 0 !important;
	}
    .buckets > div {
      position: absolute;
      width:65px;
      margin-left:-32.5px;
        margin-top:-32.5px;
    }
    .ferris-wrapper {
        width:200px;
        height:200px;
    }
    .ferris_wheel, .wheel {
        width: 200px;
        height: 200px;
    }
    .ferris-wrapper .ferris_wheel:before {
      height: 150px;
      width: 150px;
      left: calc(50% - 75px);
      top: calc(50% - 75px);
      background-size:75px 75px;
    }
    .wheel span:nth-child(1):before,
    .wheel span:nth-child(1):after,
    .wheel span:nth-child(2):before,
    .wheel span:nth-child(2):after,
    .wheel span:nth-child(3):before {
      height: 200px;
    }
    .wheel span:nth-child(1)::before {
        width:200px;
        height:0;
    }

    .second .wheel span:nth-child(1):before,
    .second .wheel span:nth-child(2):before,
    .second .wheel span:nth-child(3):before,
    .second .wheel span:nth-child(4):before,
    .second .wheel span:nth-child(5):before,
    .second .wheel span:nth-child(6):before,
    .second .wheel span:nth-child(7):before,
    .second .wheel span:nth-child(8):before,
    .second .wheel span:nth-child(9):before { width: 200px; }
	
	
	.seventh .wheel span:nth-child(1):before,
    .seventh .wheel span:nth-child(2):before,
    .seventh .wheel span:nth-child(3):before,
    .seventh .wheel span:nth-child(4):before,
    .seventh .wheel span:nth-child(5):before,
    .seventh .wheel span:nth-child(6):before,
    .seventh .wheel span:nth-child(7):before,
    .seventh .wheel span:nth-child(8):before,
    .seventh .wheel span:nth-child(9):before { width: 200px; }


    .eighth .wheel span:nth-child(1):before,
    .eighth .wheel span:nth-child(2):before,
    .eighth .wheel span:nth-child(3):before,
    .eighth .wheel span:nth-child(4):before,
    .eighth .wheel span:nth-child(5):before,
    .eighth .wheel span:nth-child(6):before,
    .eighth .wheel span:nth-child(7):before,
    .eighth .wheel span:nth-child(8):before,
    .eighth .wheel span:nth-child(9):before { width: 200px; }
	
	.buckets > div.cabin .img-holder .slide-description {  display:none; }
    
    @keyframes bucket_rotate {
      0% { 
        transform: rotate(0) translateX(100px) rotate(0); 
      }
      100% { 
        transform: rotate(360deg) translateX(100px) rotate(-360deg); 
      }
    }
    
    #commercial_slick .btn-prev, #commercial_slick .btn-next {
        top:auto;
        bottom:0;
        font-size:30px;
    }
    #commercial_slick .slick-ferris {
        padding-top:110px;
        padding-bottom:120px;
    }
    
}