@font-face {font-family: 'Gotham';font-style: normal;font-weight: 700;src: url('../fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),url('../fonts/Gotham-Bold.otf')  format('opentype'),url('../fonts/Gotham-Bold.woff') format('woff'),url('../fonts/Gotham-Bold.ttf')  format('truetype'),url('../fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');}
@font-face {font-family: 'Gotham';font-style: normal;font-weight: 400;src:url('../fonts/GothamHTF-Book.eot?#iefix') format('embedded-opentype'),url('../fonts/GothamHTF-Book.woff') format('woff'),url('../fonts/GothamHTF-Book.ttf')  format('truetype'),url('../fonts/GothamHTF-Book.svg#GothamHTF-Book') format('svg');}
html{height:100%;min-height:100%;}
body.home-page,
body.calculator-page {display: flex;flex-direction: column;min-height: 100%;}
body{font-family: 'Gotham';font-weight: 400;background: #434343;color: #ffffff;}
/* Index page animation */
a.home-button{width: auto;max-width: initial;margin-top: 20px;}
#animation_container{background-color:rgba(51, 51, 51, 0.00);width:100% !important;height:auto !important;overflow: hidden !important;/* min-height: 100vh; */position: relative;padding-top: 44%;}
#canvas{display: block;background-color:rgba(51, 51, 51, 0.00);margin: 0 auto;max-width:900px;width:100% !important;height:auto !important;transform: none;z-index: 1;position: absolute;bottom: -17%;left: 50%;transform: translateX(-50%);}
#dom_overlay_container{pointer-events: none; overflow: hidden; width: 1200px; height: 873px; position: absolute; left: 109px; top: 0px; display: none;}
/* Main navigation */
.nav{padding: 10px 0;background: #ffffff;margin-bottom: 20px;}
.nav .logo{max-width: 200px;}
.nav .logo a,
.nav .logo img{display: block;width: 100%;}
.nav .links a{color: #000000;font-size: 14px;text-transform: uppercase;font-weight: 700;padding: 0 20px;line-height: 1;text-decoration: none;}
.nav .links a + a{border-left:2px solid #000000;padding-right: 0;}

/* Main title */
.section-1{text-align: center;}
.section-1 h2{font-size: 18px;text-transform: uppercase;}
.main-title{font-size: 36px;font-weight: 400;}
.main-title span{font-size: 72px;font-weight: 700;display: block;}
.calculator-page .main-title {font-size: 22px;}
.calculator-page .main-title span{font-size: 44px;}

/* Storage option box */
.control-section {/* min-height: 100vh; */padding-bottom: 100px;}
.storage-option-box{flex-grow: 1;text-align: center;position: relative;display: flex;flex-direction: column;width: 50%;}
.control-section .or{width: 50px;display: flex;align-items: center;flex-shrink: 0;text-align: center;justify-content: center;}
.sob-box {display: flex;border: 2px solid #5f5f5f;margin:15px 0;flex-grow: 0;flex-direction: column-reverse;height: 541px;}
.sob-box img{display: block;width: 100%;}

.sob-title {flex-grow: 0;flex-shrink: 0;font-size: 24px;text-transform: uppercase;line-height: 77px;}
.sob-device-title {flex-grow: 0;flex-shrink: 0;font-size: 36px;}


/* Storage slider design */
.contact-title,
.slider-title {height: 90px;flex-shrink: 0;text-align: center;text-transform: uppercase;font-size: 24px;}
.section-slider {display: flex;flex-direction: column;flex-grow: 1;/* min-height: 70vh; */}
.slider-data{height: 100%;display: flex;flex-direction: column;flex-grow: 1;}
.slider-container {flex-grow: 0;display: flex;align-items: stretch;justify-content: space-between;height: 541px;}
.slider-capacity,
.slider-bandwidth {flex-grow: 1;display: flex;position: relative;padding-top: 40px;padding-bottom: 70px;flex-shrink: 0;width: calc(50% - 100px);}
.storage-switch {flex-shrink: 0;width: 100px;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.storage-switch .txt-1 {font-size: 12px;}
.storage-switch .txt-2 {font-size: 18px;}
.storage-switch .storage-toggler span{height: 97px;width: 49px;display: block;margin: 0 auto;background-image: url('../images/storage-switch-off.png');cursor: pointer;background-size: contain;background-repeat: no-repeat;background-position: center;}
.storage-switch .storage-toggler {position: relative;margin: 10px 0;}
.storage-switch .storage-toggler input{display: block;height: 0;width: 0;overflow: hidden;visibility: hidden;opacity: 0;z-index: -9999999;text-indent: -999;}
.storage-switch .storage-toggler input:checked + span{background-image: url('../images/storage-switch-on.png');}
.slider-value {flex-direction: column-reverse;display: flex;justify-content: space-between;width: 100%;}
.slider-value .option{position: relative;user-select: none;cursor: pointer;font-weight: 700;text-transform: uppercase;font-size: 18px;transition: all .5s;white-space:nowrap;}
.slider-value .option span{display: block;position: absolute;width: 190px;top:50%;background: #fff;height: 3px;transition: all .5s;}

.slider-value .option.active:nth-child(1){color:#0091ff}
.slider-value .option.active:nth-child(2){color:#2b80fe}
.slider-value .option.active:nth-child(3){color:#556efe}
.slider-value .option.active:nth-child(4){color:#805dfd}
.slider-value .option.active:nth-child(5){color:#aa4cfc}
.slider-value .option.active:nth-child(6){color:#d53afc}
.slider-value .option.active:nth-child(7){color:#ff29fb}

.slider-value .option.active:nth-child(1) span{background-color:#0091ff}
.slider-value .option.active:nth-child(2) span{background-color:#2b80fe}
.slider-value .option.active:nth-child(3) span{background-color:#556efe}
.slider-value .option.active:nth-child(4) span{background-color:#805dfd}
.slider-value .option.active:nth-child(5) span{background-color:#aa4cfc}
.slider-value .option.active:nth-child(6) span{background-color:#d53afc}
.slider-value .option.active:nth-child(7) span{background-color:#ff29fb}

.slider-capacity .slider-value{text-align: right;}
.slider-capacity .slider-value .option{padding-right: 200px;}
.slider-capacity .slider-value .option span{right: 0;}
.slider-capacity .slide-box{right: 20px;}

.slider-bandwidth .slider-value{text-align: left;}
.slider-bandwidth .slider-value .option{padding-left: 200px;}
.slider-bandwidth .slider-value .option span{left: 0;}
.slider-bandwidth .slide-box{left: 20px;}
.slider-bandwidth .custom-label{padding-left: 200px;}
.custom-label{position: absolute;left: 0;top:0;user-select: none;font-weight: 700;text-transform: uppercase;font-size: 18px;right: 0;}

.slide-box{width: 155px;position: absolute;z-index: 5;top: 0;bottom: 0;}
.box-inner,
.cst-slider{height: 100%;}
.box-outer-outer{height: 100%;padding: 0 20px 0 18px;background: #434343;width: 90px;margin: 0 auto;}
.box-outer{height: 100%;padding: 56px 0 78px 0;width:100%;position: relative;margin: 0 auto;}
.box-outer:before{content:'';position:absolute;border-radius: 80px;top: 0;left: 0;right: 0;bottom: 0;border: 4px solid #231f20;box-shadow: 4px 0px 0px 0px #6d6d6d;z-index: 2;}
.box-outer:after{content:'';position:absolute;border-radius: 35px;top: 3px;left: 3px;right: 3px;bottom: 3px;box-shadow: inset 10px 0px 30px 0px rgba(0,0,0,0.75);background: #6b6969;z-index: 1;}
.box-inner{padding: 0;}
.box-inner:before{content:'';position:absolute;top: 11px;left: 11px;right: 11px;bottom: 11px;border: none;border-radius: 80px;z-index: 3;background: #000;}
.sliderBg {position: absolute;z-index: 3;left: 13px;top: 70px;bottom: 70px;right: 13px;display: flex;border: 1px solid #000;border-radius: 100px;align-items: flex-end;}
.sliderBg .sliderBg-mid{width: 100%;position: relative;transition: all 0.3s;transform: translateY(57px);display: block;}
.sliderBg .sliderBg-mid .sliderBg-inner{position: absolute;bottom: 0;left: 0;right: 0;top: 0;border-radius: 100px;box-shadow: inset 1px 0px 8px 0px rgba(13,14,15,1);background: rgba(124,20,122,1);background: -moz-linear-gradient(top, rgba(124,20,122,1) 0%, rgba(0,92,162,1) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(124,20,122,1)), color-stop(100%, rgba(0,92,162,1)));background: -webkit-linear-gradient(top, rgba(124,20,122,1) 0%, rgba(0,92,162,1) 100%);background: -o-linear-gradient(top, rgba(124,20,122,1) 0%, rgba(0,92,162,1) 100%);background: -ms-linear-gradient(top, rgba(124,20,122,1) 0%, rgba(0,92,162,1) 100%);background: linear-gradient(to bottom, rgba(124,20,122,1) 0%, rgba(0,92,162,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c147a', endColorstr='#005ca2', GradientType=0 );}
.noUi-vertical{width: 60px;border-radius: 80px;background: none;border: none;box-shadow: none;position:relative;background-color: transparent;z-index: 5;padding:0;margin: 0;height: 100%;}
.noUi-base {position: static;background: transparent;border-radius: 80px;padding: 2px;}
.noUi-connects {z-index: 4;border-radius: 80px;}
.noUi-vertical .noUi-handle {width: 155px;height: 48px;border-radius: 10px;box-shadow: 0px 0px 8px 0px rgba(13,14,15,0.63);top: -24px;left: -52px;}
.noUi-vertical .noUi-origin {z-index: 9 !important;transition: all 0.3s;}
.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {display: none;}
.noUi-connect{background: none;}
.noUi-vertical .noUi-handle,
.noUi-vertical .noUi-handle > div{background: none;border: none;outline: none;}

.noUi-vertical .noUi-handle{background-position: center;background-repeat: no-repeat;background-size: contain;}
#capacity-slider.noUi-vertical .noUi-handle{background-image: url(../images/capacity.png);}
#bandwidth-slider.noUi-vertical .noUi-handle{background-image: url(../images/bandwidth.png);}

.contact-button{padding-top: 20px;}
.btn-2{font-size: 24px;text-transform: uppercase;color: #ffffff;border:3px solid #0060a9;background: #0060a9;max-width: 344px;display: inline-block;line-height: 1.1;text-decoration: none;padding: 10px;text-align: center;}
.btn-2:hover{border:3px solid #0060a9;text-decoration: none;background: none;color: #ffffff;}
.btn-1{font-size: 24px;text-transform: uppercase;color: #ffffff;border:3px solid #0060a9;display: inline-block;line-height: 1.1;text-decoration: none;padding: 10px;display: flex;align-items: center;}
.btn-1:hover{border:3px solid #0060a9;text-decoration: none;background: #0060a9;color: #ffffff;}
.btn-1 + .btn-2{margin-left: 10px;}
.form-group label {font-size: 18px;}
input.form-control {height: 46px;border-radius: 0;border: 2px solid #fff;background: none;color:#fff;}
input.form-control:focus {background: none;box-shadow:none;outline:none;border-color: #fff;color:#fff;}
.custom-control-input:checked~.custom-control-label::before {background: none;border: 2px solid #fff;}
.custom-control-label::before {background: none;border: 2px solid #fff;}
.contact-form{display: none;}

.btn-controller{display: flex;align-items: stretch;justify-content: center;flex-direction: row;}

label.error{color: #ffa900;}
footer {display: block;text-align: center;padding: 15px;background: #000;font-size: 14px;margin-top: auto;}
@media (min-width:768px){
  .sob-box,
  .slider-container {height: calc(100vh - 384px);max-height: 485px;}
}
@media (min-width:1200px){
  #animation_container{padding-top: 380px;}
}
@media (min-width:1420px){
  .container-fluid{
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (max-width:1420px){
  .slider-capacity .slider-value .option{padding-right: 180px;}
  .slider-capacity .slide-box{right: 10px;}
  .slider-bandwidth .custom-label,
  .slider-bandwidth .slider-value .option{padding-left: 180px;}
  .slider-bandwidth .slide-box{left: 10px;}

  .slider-value .option{font-size: 15px;}
  .slider-value .option span{width: 170px;}
  .box-outer-outer{width: 82px;}
}

@media (max-width:1366px){
  .home-page .main-title span{font-size: 48px;}
  .home-page .main-title {font-size: 32px;}
  #canvas{max-width: 750px;}
}
@media (max-width:1300px){
  .noUi-vertical .noUi-handle{width: 125px;height: 40px;left: -40px;}
  .noUi-vertical{width: 46px;}
  .slide-box{width: 127px;}
  .slider-value .option span{width: 130px;}
  .box-outer-outer {width: 70px;padding: 0 10px;}
  .custom-label{font-size: 16px;line-height: 1;}
  .slider-capacity .custom-label,
  .slider-capacity .slider-value .option{padding-right: 150px;}
  .slider-capacity .slide-box{right: 0;}
  .slider-bandwidth .custom-label,
  .slider-bandwidth .slider-value .option{padding-left: 150px;}
  .slider-bandwidth .slide-box{left: 0;}
}

@media (max-width:1199px){
  .sob-device-title{font-size: 22px;}
  .sob-title,.slider-title{font-size: 18px;line-height: 1.2;}
}

@media(max-width:1024px){
  .main-title span{font-size: 50px;}
}
@media(max-width:767px){
  .home-page .section-1{margin-top: 50px;}
  .main-title{margin-bottom: 20px;}
  .section-1 p{margin-bottom: 20px;}
  .control-section{padding-top: 30px;border-top:1px solid #fff;}
  .main-title span{font-size: 50px;}
  .slider-title,
  .contact-title,
  .section-slider{height: auto;}
  .contact-title,
  .slider-title{font-size: 16px;padding-top: 20px;border-top: 1px solid #fff;margin-top: 30px;margin-bottom: 30px;}
  .slider-container{flex-wrap: wrap;align-items: center;height: auto;}
  .storage-switch{order:1;width: 100%;flex-direction: row;align-self: self-start;}
  .storage-switch{order:1;width: 100%;flex-direction: row;align-self: self-start;}
  .slider-capacity, .slider-bandwidth{flex-grow: 1;min-height: 60vh;width: auto;flex-basis: 0;}
  .slider-capacity{order: 2;margin-right: 10px;}
  .slider-bandwidth{order: 3;margin-left: 10px;}
  .txt-1 {padding: 0 10px;}
  .txt-2 {padding: 0 10px;}
  img.ss-img-top {transform: rotate(-90deg);}
  img.ss-img-bottom {transform: rotate(-90deg);}
  .storage-switch .storage-toggler {transform: rotate(90deg);width: 97px;}
}

@media (max-width:570px){
  .main-title{font-size: 16px;}
  .main-title span{font-size: 18px;}
  .storage-switch .storage-toggler span {height: 57px;width: 39px;}
  .txt-1{padding: 0;}
  .txt-2{padding: 0 5px;}
  img.ss-img-top {width: 16px;margin-left: 4px;}
  img.ss-img-bottom {width: 16px;margin-right: 4px;}
  .storage-switch .txt-2{font-size: 16px;font-weight: 700;}
  .section-1 p{font-size: 16px;line-height: 1.2;}
  .contact-title,.sob-device-title,.sob-title, .slider-title{font-size: 14px;}

  .btn-controller{flex-direction: column;}
  .btn-controller .btn-1,
  .btn-controller .btn-2{width: 100%;margin-bottom: 10px;max-width: inherit;margin-left: 0;text-align: center;justify-content: center;}
  .nav{margin-bottom: 0;}
  .nav > div{flex-direction: column;}
  .nav .links{padding-top: 15px;}
}
@media (max-width:520px){
  #capacity-slider.noUi-vertical .noUi-handle,
  #bandwidth-slider.noUi-vertical .noUi-handle{background-image: url(../images/blankhandle.png);background-size: 150px;width: 58px;left: -10px;height: 30px;top: -17px;}
  .box-outer-outer {width: 35px;padding: 0;}
  .slide-box {width: 50px;}
  .mobile-title{position: absolute;top: 0px;text-align: center;padding-right: 80px;width: 100%;}
  .slider-value .option span{display: none;}
  .slider-capacity .custom-label,
  .slider-capacity .slider-value .option{padding-right: 65px;}
  .slider-bandwidth .custom-label,
  .slider-bandwidth .slider-value .option{padding-left: 71px;}
  .custom-label{font-size: 12px;line-height: 1.2;text-transform: none;}
  .slider-value .option {font-size: 14px;}
}