.ourspan .slider-wrapper {
  /* width: 390px; */
  
  max-width: 390px;
  margin: 2em auto 0;
}

/*.ourspan .rotatescroll img {
  vertical-align: middle;
  border: 9px solid #26d9a0;
}

.ourspan .rotatescroll img,
.ourspan .rotatescroll .overview li {
  border-radius: 50%;
}*/
/* Tiny Circleslider */

.ourspan .rotatescroll {
  position: relative;
  height: 390px;
  width: 390px;
  padding: 50px;
  overflow: hidden;
  background: #FFF;
    border-radius: 50%;
    border: 2px solid #eef0f1;
}

.ourspan .rotatescroll .viewport {
  /* width: 390px; */
  
  height: 290px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  border-radius: 50%;

}

.ourspan .rotatescroll .overview {
  /* position: absolute; */ 
  position: relative;
  width: 798px;
  list-style: none;
  left: 0;
  top: 0;
  margin: -20px 0 0 -20px;
  padding: 0;
  z-index: 0;
}

.ourspan .rotatescroll .overview li {
  height: 324px;
  width: 328px;
  float: left;
  position: relative;
  padding: 60px;
  margin: 4px 0 0 4px;
  text-align:center;
}

.ourspan .rotatescroll .overlay {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 390px;
  width: 390px;
  /* standalone SVG: https://gist.github.com/atelierbram/2f7e675dc7d65acab65d#file-bg-scroll-active_390x390-svg */ 
  background: url("../img/svg/rotate-cover.svg") 0 0 no-repeat; 
}

.ourspan .rotatescroll .overlay-interaction {
   z-index: 0;
}

.ourspan .rotatescroll [class*="-hovered"] {
  z-index: 1;
}

/*  https://mathiasbynens.be/notes/css-escapes  */
.ourspan .rotatescroll .slideno\(1\),
.ourspan .is-slide2-hovered {
  transform: rotate(45deg);
}
.ourspan .rotatescroll .slideno\(2\),
.ourspan .is-slide3-hovered {
  transform: rotate(90deg);
}
.ourspan .rotatescroll .slideno\(3\),
.ourspan .is-slide4-hovered {
  transform: rotate(135deg);
}
.ourspan .rotatescroll .slideno\(4\),
.ourspan .is-slide5-hovered {
  transform: rotate(135deg);
  transform: rotate(180deg);
}
.ourspan .rotatescroll .slideno\(5\),
.ourspan .is-slide6-hovered {
  transform: rotate(225deg);
}
.ourspan .rotatescroll .slideno\(6\),
.ourspan .is-slide7-hovered {
  transform: rotate(270deg);
}
.ourspan .rotatescroll .slideno\(7\),
.ourspan .is-slide8-hovered {
  transform: rotate(315deg);
}

.ourspan .rotatescroll .thumb {
  touch-action: none;
  -ms-touch-action: none;
  position: absolute;
  top: -3px;
  cursor: pointer;
  /* left: 137px; */ 
  left: 200px;
  width: 10px;
  height: 10px;
  z-index: 4;
  background: #ea5a59;
  border: 2px solid #fff;
  border-radius: 50%;
}

.ourspan .rotatescroll .dot {
  left: inherit !important;
  top: 0 !important;
  z-index: 4;
  text-align: center;
  overflow: hidden;
  position: absolute;
  /* top: 0; */
  
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}

.ourspan .rotatescroll .dot span {
  /* display: none; */
}

.ourspan .rotatescroll .dot:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  /*border-left: 1px solid #ea5a59;*/
  height: 42px;
  /* display: table-cell; */
}

.ourspan .rotatescroll .text {
  padding-top: 20px;
}
.ourspan .rotatescroll .text2nd, .ourspan .rotatescroll .text3rd {
  padding-top: 15px;
}

.ourspan .rotatescroll .flip.text {
  padding-top: 27px;
}

.ourspan .rotatescroll .flip.text span {
  top: 5px;
}

.ourspan .rotatescroll .active .flip.text span {
  top: 18px !important;
}

.ourspan .rotatescroll .active h1 div.text {
  /* background-color: #26d9a0; */ 
  color: #ea5a59;
  padding: 20px;
  height: 8px !important;
}

.ourspan .rotatescroll h1 div.text2nd, .ourspan .rotatescroll h1 div.text3rd {
  height: 8px !important;
}

.ourspan .rotatescroll h1 div.text2nd{
  padding-top:10px;
}

.ourspan .rotatescroll .active h1 div.text:hover {
  color: #ea5a59;
  text-shadow: none;
} 
.ourspan .rotatescroll .active h1 div.text2nd, .ourspan .rotatescroll .active h1 div.text3rd {
  /* background-color: #26d9a0; */ 
  color: #ea5a59;
  height: 8px !important;
}
.ourspan .rotatescroll .dot:hover h1 div{
  color: #ea5a59;
}

.ourspan .rotatescroll .active h1:hover div {
  color: #ea5a59;
  text-shadow: none;
} 
.ourspan .rotatescroll h1 span {
  line-height: 0.65;
  white-space: pre;
  overflow: visible;
  padding: 0px;
}

.ourspan .rotatescroll .flip {
  transform: rotate(180deg)
}

.ourspan .rotatescroll .active {}

.ourspan .rotatescroll .dot h1 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  transform: skewY(45deg) rotate(22.5deg);
  margin: 0;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  line-height: 0;
  font-weight: bold;
  color: #303634; 
}

.ourspan .rotatescroll .dot-1 {
  transform: rotate(337deg) skewY(-45deg);
}

.ourspan .rotatescroll .dot-2 {
  transform: rotate(40deg) skewY(-45deg);
}

.ourspan .rotatescroll .dot-3 {
  transform: rotate(100deg) skewY(-45deg);
}

.ourspan .rotatescroll .dot-4 {
  transform: rotate(155deg) skewY(-45deg);
}

.ourspan .rotatescroll .dot-5 {
  transform: rotate(218deg) skewY(-45deg);
}

.ourspan .rotatescroll .dot-6 {
  transform: rotate(278deg) skewY(-45deg);
}


.ourspan .viewport .overview img{width:100px; margin-bottom:10px;}
.ourspan .viewport .overview p{font-size:15px;}
.ourspan .rotatescroll .dot.dot-3 h1 .text2nd, 
 .ourspan .rotatescroll .dot.dot-4 h1 .text2nd, 
 .ourspan .rotatescroll .dot.dot-5 h1 .text2nd{padding-bottom:5px; margin-top:10px;}
.mobile-ourspan img{margin:0 auto; max-width:100px;}
.mobile-ourspan p{font-size:16px; word-wrap: break-word; font-family: 'Gilroy-SemiBold';}
.dot-tabs>.tab-pane{    padding: 30px; padding-top: 10%;}
.mobile-ourspan a img{width:48px;}
.mobile-ourspan a {padding-right:2px!important; padding-left:3px!important;}
.mobile-ourspan .nav-tabs{width:350px; margin:0 auto;}


 @media (max-width: 450px){
  .mobile-ourspan img{margin:0 auto; max-width:80px;}
  .ourspan .rotatescroll{height:320px; width:320px;}
  .ourspan .rotatescroll .overlay{height:320px; width:320px;}
  .ourspan .rotatescroll .dot h1{font-size: 11px;}
  .ourspan .rotatescroll .overview li{height:280px; width:280px; padding:40px;}
  .ourspan .viewport .overview img{width:75px;}
  .ourspan .viewport .overview p{ font-size: 12px; line-height: 13px;}
  .slider-wrapper{margin-bottom:35px;}
  .ourspan .rotatescroll .thumb{display: none;}
 }