body {background-color: #f3f9f5;}
.span_mobile_none {display: block;}
.span_mobile {display: none;}

/*--------------------[ MAIN ]------------------*/
.main_top h2{margin:100px 0 50px; 0;}
.bg{width:100%; height:700px;background-image: url(/images/earlylms/pricing/mountain.png);background-size:700px;background-repeat: repeat-x;background-color: #5db2ca;margin-top:60px;}
.main_top h3 {margin-top:-30px;}
.container {display: flex; align-items:flex-start; margin:0 auto; width:900px; position: relative;}
.container .boat {background:url(/images/earlylms/pricing/boat.svg) no-repeat left bottom; width:720px; height:680px; margin-right:50px; position: absolute; left:-50%;}
.container .sample_wrap {width:520px; height:510px; background: rgba(255, 255, 255, 0.8); text-align: center; border :3px solid #227818; border-radius: 10px; position: absolute; right:10px;}
.sample_wrap h3 {margin:15px 0; color:#227818; font-weight: 700;}
.sample_wrap .sample_box {display: flex; flex-flow: wrap; width:100%; margin:0 auto; justify-content: center; margin-bottom: 10px;}
.sample_wrap .sample_box .sample {width:230px; height:193px; background: rgba(255, 255, 255, 0.8); text-align: center; border :3px solid #227818; border-radius: 10px; margin:5px;}
.sample_box .sample  div {width:100%; height:60px; background: #227818}
.sample_wrap .sample h3 {font-weight: 300; margin:10px 0;}
.sample_wrap .sample h3 strong {color:#227818;}
.sample_box .sample div p {color:#fff;}
.sample_box .sample div p:nth-child(1) {font-size: 2em; font-weight: 500; line-height:  48px;}
.sample_box .sample div p:nth-child(2) {font-size: 0.8em; font-weight: 300; margin-top:-10px;}
.sample_box .sample span {display: block; color:#227818; margin-top:10px; line-height: 110%; font-size: 0.9em;}
.sample_box .sample span:nth-of-type(2) {font-size: 0.8em; font-weight: 300; margin-top:5px;}
.sample_box .sample .button {padding:10px 20px; background: #29829b; box-shadow:0 5px 10px 0 rgba(20, 94, 114, 0.55); margin-top:2px; border:3px solid #fff; color:#fff; font-weight: 300;}

/*--------------------[ SECTION1 ]------------------*/

.section1 {background: #46a3bd; width:100%; height:700px;}
.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 */
  box-shadow: 0 5px 10px 0 #29829b;
}
.toggle-button-switch {background: #29829b; 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: #29829b; 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: -200px; 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, #c8e6f1); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, #c8e6f1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #c8e6f1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #c8e6f1); /* 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: #c8e6f1 transparent; display: block; width: 0; z-index: 1; bottom: -20px; left: 100px;}
#plan-holder{font-weight: bold;}	
.innerbox{padding: 1em; width:90px; height:20px; background: #29829b; border-radius: 8px; position: absolute; left:50%; top:25px; transform: translateX(-50%); cursor: pointer;}
.info-price{color: #fff; font-size: 1.5em; letter-spacing: 2px; line-height: 7px; text-align: center;}
.innerbox p {color:#082638; font-size: 0.9em; font-weight: 700; text-align: center; margin-top:35px; line-height: 110%;}

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

.button_box {position: absolute; left:50%; transform: translate(-50%); margin-top:20px;}
.button_box button {margin:10px; width:430px; height:70px; box-shadow: 0 5px 10px 0 rgba(7, 10, 47, 0.51);}
button:hover, .info_btn:hover{box-shadow: 0 30px 30px -20px rgba(0, 0, 0, 0.5)!important; transition: all 0.2s;}

/*--------------------[ SECTION2 ]------------------*/
.section2 {background:#59b2cc; width:100%; height:300px;}
.section2 h3 {padding-top:50px; color:#fff;}
.section2 button {background:#1e6377; color:#fff; height:70px; width:450px; position: absolute; left:50%; transform: translateX(-50%); margin-top:30px; box-shadow: 0 5px 10px 0 #29829b;}


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

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 
.main_top h2{margin:100px 0 50px 0;}
.span_mobile_none {display: none;}
.span_mobile {display: block;}

.bg{background-size:80%; margin-top:0px; height:1340px;}
.container {display:flex; flex-flow: column; align-items:center; margin:0 auto; width:365px; position: relative;}
.container .boat {width:450px; left:-70%; top:-350px;}
.container .sample_wrap {width:365px; height:0px; border :none; position: absolute; right:50%; transform: translateX(50%); top:150px;}
.sample_wrap .sample_title {display: none;}
.sample_wrap .sample_box {display: block; flex-flow: wrap; width:100%; margin:0 auto; justify-content: center; margin-bottom: 40px; margin-top:80px;}
.sample_wrap .sample_box .sample {width:350px; height:250px; margin:10px auto; background: rgba(255, 255, 255, 1);}

    
.section1 {height:650px;}
.section1_box .toggle_box {width:300px; margin-left: 10px}

.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: #29829b; 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: 100px; width: 300px;}
.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: #29829b; 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{width:60px; height:60px; margin-top:-100px; margin-left:-20px;}
.infobox:after {content: ''; position: absolute; border-style: solid; border-width: 10px 13px 0; border-color: #c8e6f1 transparent; display: block; width: 0; z-index: 1; bottom: -8px; left: 16px;}
#plan-holder{font-weight: bold;}	
.innerbox{padding:1em; width:25px; height:0px; border-radius: 0; position: absolute; left:50%; top:0; transform: translateX(-50%); cursor: pointer;}
.info-price{color: #fff; font-size: 1.3em; letter-spacing: -1px; line-height: 10px; text-align: center; display: block; width:100%; height:100%;}
.innerbox p {color:#082638; font-size: 0.7em; font-weight: 700; text-align: center; margin-top:25px; white-space: nowrap; margin-left:-5px;}

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

.button_box button {width:360px;}
    
.section2 {height:320px;}
.section2 button {width:360px; margin-top:30px;}
}

@media only screen and (min-device-width : 667px) and (max-device-height : 414px) { 
.section2 {height:260px;}
.range-holder{width: 600px;}
.container .boat {top:-300px;}
    
}