.button1 {margin-right:0px !important;}
.active{border:3px solid #fff;}
.span_mobile_none {display: block;}
.span_mobile {display: none;}

/*--------------------[ MAIN ]------------------*/
.main{height:700px; background:#e1e9ef; position: relative;}
.main h2{width:700px; padding-top:130px; position: absolute; left:50%; transform: translate(-50%); text-align: center;}
#carousel {position: relative; width:100%; height:500px; top: 200px;  overflow: hidden; padding-top:30px; max-width: 1200px; margin:0 auto;}
p {line-height:unset;}

.carousel_box {position: absolute;transition: transform 1s, left 1s, opacity 1s, z-index 0s;opacity: 1;width:350px; padding:0 10px;height:400px; text-align: center; cursor: pointer;box-shadow: 0 5px 30px 0 rgba(0,0,0,0.2); 
  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(45deg, #fff , #efefef);
  background: -o-linear-gradient(45deg, #fff , #efefef); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, #fff , #efefef); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to 45deg, #fff , #efefef); /* Standard syntax */
}

.carousel_box p {margin:20px;}
.carousel_box .button1 {color:#fff; margin-top:-5px;} 
#carousel div.prev {z-index: 2; left: 19%; transform: translateY(10px) translateX(-50%); opacity: 0.5;}
#carousel div.prevLeftSecond {z-index: 1; left: 63%; top:7%; opacity: 0.5;}
#carousel div.selected {z-index: 10; left: 50%; transform:translateX(-50%); padding:10px 20px;}
#carousel .sub_txt{padding-top:15px;}
#carousel div.next {z-index: 2; left: 81%; transform: translateY(10px) translateX(-50%); opacity: 0.5;}
#carousel div.nextRightSecond {z-index: 1; left:3%; top:7%; opacity: 0.5;}
    
/*--------------------[ SECTION_1 ]------------------*/
section .section1_box {}
.section1_box h3 {text-align: center; color:#fff; padding: 50px 0 30px 0;}
.section1_box .toggle_box {position: absolute; left:50%; transform: translate(-50%);}

.accessibility {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.toggle-button-wrapper * {display: inline-block; vertical-align: middle; color:#fff; font-size: 1.3em;}
[role="switch"] {color: #fff; cursor: pointer; display: inline-block; height: 35px; margin: 0 5px; overflow: visible; padding: 5px; position: relative; width: 70px;
background: #c1e7f1; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#fff,#c1e7f1); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fff,#c1e7f1); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fff,#c1e7f1); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fff,#c1e7f1); /* Standard syntax */}
.toggle-button-switch {background: #234f85; border-radius: 50%; display: inline-block; height: 25px; right: 5px; line-height: 25px; position: absolute; top: 5px; width: 25px;
box-shadow: 5px 8px 10px rgba(4, 29, 64, 0.3);}
[role="switch"][aria-checked="true"] .toggle-button-switch {left: 5px;}


.range-holder{margin: 3em auto; padding-top: 210px; width: 850px;}
.dragdealer {position: relative; height: 15px; border-radius: 5px; background:#10446c;}
.dragdealer .handle {position: absolute; top: 0; left: 0;}
.stripe{height: 15px; border-radius: 8px;
  background: #c1e7f1; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#c1e7f1, #fff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#c1e7f1, #dfff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#c1e7f1, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#c1e7f1, #fff); /* Standard syntax */
}
.square{position: absolute; top: 0; left: 0; margin-top: -13px; margin-left: -10px; cursor: pointer; width: 35px; height: 35px; background: #234f85; border-radius: 50%; color: #FFF; box-shadow: 5px 8px 10px rgba(4, 29, 64, 0.3);}
.menu-line{width: 15px; height:15px; border-radius: 50%; margin: 10px auto; background: #FFF; display: block;}
.infobox{position: absolute; top: 0; left: 0; margin-top: -190px; margin-left: -115px; width: 240px; height: 150px; padding: 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    background: #c1e7f1; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #82abcf); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, #82abcf); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #82abcf); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #82abcf); /* Standard syntax */
    box-shadow: 5px 8px 20px rgba(4, 29, 64, 0.3);
    cursor: pointer;
}
.infobox:after {content: ''; position: absolute; border-style: solid; border-width: 20px 23px 0; border-color: #82abcf transparent; display: block; width: 0; z-index: 1; bottom: -20px; left: 100px;}
#plan-holder{font-weight: bold;}	
.innerbox{padding: 1em; width:160px; height:64px; background: #234f85; border-radius: 8px; position: absolute; left:50%; top:30px; transform: translateX(-50%); cursor: pointer;}
.info-price{color: #fff; font-size: 2.2em; letter-spacing: 2px; line-height: 30px; text-align: center;}
.innerbox span {color:#082638; font-size: 1em; font-weight: 700; text-align: center; margin-top:30px;}

.result { text-align: center; font-size: 6.5em; font-weight: bold; letter-spacing: 0.5px; color: #fff; padding-top: 40px; height:104px; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#fff, #c2ddf4);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative;}

.button_box {position: absolute; left:50%; transform: translate(-50%); margin-top:40px;}
.button_box button {margin:20px;}
/*--------------------[ SECTION_2 ]------------------*/
.section2_box {width:100%; height:100%; padding-bottom: 50px; background: #f4f4f4; position: relative;}
.txt_box {text-align: center; padding-top:50px;}
.txt_box h3{padding-bottom: 10px;}

/*--------------------[ MEDIA QUERY ]------------------*/

@media only screen and (max-device-width : 667px) {
.span_mobile_none {display: none;}
.span_mobile {display: block;}

/*[ MAIN ]*/
.button1 {margin-right:0px !important;}
.main {display: none;}
    
/* [ PRICE TALBE_M ]*/
h2 {text-align: center; padding-top:120px;}
.price_table {width:100%; display:block; margin-top: 50px;}
.price_box {width:100%; text-align: center; padding:15px 0; position: relative; box-shadow: 0 5px 30px 0 rgba(0,0,0,0.2); margin-bottom: 30px; 
background: #fff; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(60deg, #fff , #f7f7f7);
background: -o-linear-gradient(60deg, #fff , #f7f7f7); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(60deg, #fff , #f7f7f7); /* For Firefox 3.6 to 15 */
background: linear-gradient(to 60deg, #fff , #f7f7f7); /* Standard syntax */}

/*[ SECTION_1 ]*/
.section1_box {height:350px; background-position: -200px bottom, 220px bottom!important;}
.section1_box h3 {padding-top:65px;}
.section1_box .toggle_box {width:100%; text-align: center;}
[role="switch"] {width: 100px;}
.range-holder{width: 280px; padding-top:150px;}
.infobox{margin-top: -130px; margin-left: -30px; width: 80px; height: 100px;}
.infobox:after {border-width: 10px 13px 0; bottom: -10px; left: 25px;}
.innerbox{border-radius:8px 8px 0 0; width:50px;  top:0px; transform: translateX(-50%);}
.info-price{font-size: 1.5em;}
.innerbox span {color:#082638; font-size: 1em; font-weight: 700; text-align: center; margin-top:25px; margin-left:-5px;}
.button_box {margin-top:30px;}
.button_box button {margin:10px;}
    
/*[ SECTION_2 ]*/
.section2_box {height:340px; padding:30px 0;}
.txt_box {padding-top:15px;} 
}