@charset "utf-8";
/* CSS Document */

.subPageHeader{ width:100%; clear:both; overflow:hidden; padding: 10px 0; margin: 0 0 35px }
.logo{ float:left;}
.subPageHeader h2 {border-left: 1px solid #ccc;float: left;color: #969696;font-size: 22px;margin: 22px 0 0 25px;padding: 0 0 6px 25px;line-height: 40px;}
.subPageHeader h2 span{ font-size:34px; display:block; clear:both; font-weight:800; letter-spacing:-1px;}
.subPageHeader h2 span a{ color:#3ea0eb}

.subPagecontent{ width:100%; clear:both; overflow:hidden; padding:35px 0;}
.box-acc{ width:96%;}
.form-control, .custom-control{ margin-bottom:20px;}
.form-group center{ font-size:12px; color:#000;}

.box-acc h3{ font-size:26px; font-weight:700; border-bottom:2px solid #3c3c3c; color:#3c3c3c; text-transform:uppercase; margin:0 0 20px;}
.box-acc.float-left h3{ background: url(../../assets/images/useravator.png) no-repeat 0 50%; padding:0 0 0 25px;}
.box-acc h4{  color:#3c3c3c; margin:0 0 20px;}
.box-acc h4 a{color: #3ea0eb}


.box-acc.float-right h3{ background: url(../../assets/images/cart.png) no-repeat 0 50%; padding:0 0 0 30px;}
.switchcol {font-size: 14px;text-transform: uppercase;font-weight: 700;display: inline-block;margin: 0 0 0 15px;position:relative;}
.switchcol .monthly{ color:#2196F3; display:inline-block} 
.switchcol .annual{ color:#ccc; display:inline-block;}
.toggle_switch {width: 70px;height: 30px;position: relative;display: inline-block;margin: 0 10px -10px;}
.toggle_switch input {display:none;}
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #2196F3;-webkit-transition: .4s;transition: .4s;}
.slider:before { position: absolute;content: "";height: 26px;width: 26px;left: 2PX; top: 2px;background-color: white;-webkit-transition: .4s;transition: .4s; border:2px solid gray; }
input:checked + .slider { background-color: #CCC; } 
input:focus + .slider { box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px);border:2px solid #CCC;}
.slider { border-radius: 50px; }
.slider:before { border-radius: 100%; }
.monthlyprice {font-size: 13px;color: #3c3c3c;font-weight: 700;width: 216px;text-align: center;float: right;margin: -10px 0 0;}
.monthlyprice span{ text-decoration:line-through; color:#ccc;}

.pricingtableforrank{ width:100%; clear:both; overflow:hidden; padding:35px 0;}
.pricingtableforrank table{ width:94%; border:none;}
.pricingtableforrank table tr td{ font-size:18px; text-transform:uppercase; color:#3c3c3c; padding:10px 20px;} 
.pricingtableforrank table tr td span{ font-weight:800;}
.pricingtableforrank table tr td span.color-1{ color:#8b8b8b}
.pricingtableforrank table tr td span.color-2{color:#42c7ae}
.pricingtableforrank table tr td span.color-3{color:#278ddc}

.cuponrow{ width:100%; clear:both; overflow:hidden;}
.cuponcol{ position:relative; width:100%; clear:both; overflow:hidden; border-radius:4px; border:1px solid #8b8b8b; padding:0 120px 0 0}
.cuponcol input{ width:100%; height:46px; line-height:46px; padding:0 12px; color:#3c3c3c; border:none;}
.cuponcol input.btnapply{ display:block; position:absolute; top:0; right:0; height:46px; text-align:center; width:120px; background:#42c7ae; color:#fff; font-size:16px; font-weight:700; border:none; z-index:9999;}
.cuponcol input.btnapply:hover{ cursor:pointer; background:#31b199;} 

.custom-control a{ color:#3ea0eb}

.cuponrow p{ text-transform:uppercase; text-align:center; margin:5px 0; padding:0;}
.subscribeBtnarea{ width:100%; clear:both; overflow:hidden; padding:55px 0 0;}
.subscribeBtnarea a{ display:block; margin:0 auto; width:200px;  border-radius:4px; overflow:hidden;height:60px; text-align:center; background:#278ddc; font-size:18px; text-transform:uppercase; font-weight:700; line-height:60px; color:#fff;}
.subscribeBtnarea a:hover{ background:#27a9e3;}
.paymentcard{ width:100%; padding:35px 0;}

#main-login{   width:100%; height:100vh; position:relative; padding:0 700px 0 0;  }
.leftsiderSlider{ float:left; width:100%; height:100%; display:flex; vertical-align: middle;align-items: center;text-align:center;background: #0ed6ef;  background: -moz-linear-gradient(top,  #0ed6ef 0%, #6989b8 100%);  background: -webkit-linear-gradient(top,  #0ed6ef 0%,#6989b8 100%);  background: linear-gradient(to bottom,  #0ed6ef 0%,#6989b8 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ed6ef', endColorstr='#6989b8',GradientType=0 ); }

.sliderarea{ width:100%; clear:both; overflow:hidden;}
.rightsidecontent{ float:left; width:700px; position:absolute; top:0; right:0; height:100%;}
.rightsidecontent .logo img{ width:150px;}
.rightsidecontent  .subPageHeader h2{ font-size:14px; font-weight:600; line-height:26px; margin: 11px 0 0 5px; padding: 0 0 4px  5px;} 
.subPageHeader h2 span {font-size: 22px;}

.carousel-item img{ display:block; margin:0 auto; width:80%;}
.carousel-item h5{ font-size:24px; color:#fff; margin:0 0 20px;} 
.carousel-item p{ font-size:16px; color:#fff; margin:0 0 20px;} 
.carousel-indicators{ bottom:-200px !important; padding: 0 0 180px;}



.loginformarea{ width:70%; clear:both; overflow:hidden; padding: 0 20px; margin-top:200px;}
.loginfooter {padding: 15px 15px;position: absolute;bottom: 0;left: 0;}
.loginbtnarea a{ color:#737373; font-size:15px; font-weight:600; text-decoration:none; padding:0 ; line-height:18px;}
.loginbtnarea input.signinbtn {display: block;margin: 10px 0 0 ;width: 110px;border-radius: 4px;overflow: hidden;height: 32px;text-align: center;background: #19d2fe;font-size: 18px;font-weight: 700;line-height: 32px;color: #fff;border:none;}
.loginbtnarea input.signinbtn:hover{ background:#03add5; cursor:pointer;} 
.loginfooter ul{ margin:0; padding:0; width:100%; clear:both; display:block; }
.loginfooter ul li{ display:block; list-style:none; float:left;}
.loginfooter ul li:first-child{ border-right:1px solid #ccc; line-height:18px; }
.loginfooter ul li a{ color:#23cff5; font-size:16px; font-weight:600; text-decoration:none; padding:0 15px; line-height:18px;}
.loginfooter ul li:first-child a{ padding-left:0;}
.loginfooter p  { color:#737373; font-size:16px; font-weight:600; text-decoration:none; padding:0 ; line-height:18px; margin:0;}
.loginfooter p a{ color:#23cff5; font-size:16px; font-weight:600; text-decoration:none; padding:0 ; line-height:18px;}

.loginformarea h3  { color:#23cff5; font-size:16px; font-weight:600; text-decoration:none; padding:0 ; line-height:18px; margin:200px 0 0;}
.loginformarea h3 a{ color:#23cff5; font-size:16px; font-weight:600; text-decoration:none; padding:0 ; line-height:18px;}
.supporticon{ display:block; width:50px; height:50px; position:absolute; bottom:15px; right:15px;}
.hideindesktop{ display:none;}



.btn-toggle {width: 60px;border-radius: 60px;height: 28px;background: #2196F3;display: block;padding: 2px;float: right;margin: -28px 73px 0 0;}
.btn-toggle .btn {background: none;border: none;height:24px;width:20px;border-radius:100% !important;}
.btn-toggle .ltbtn.active{ width:20px; height:24px; border-radius:100% !important; display:block; background:#fff !important }

.btn-toggle .rtbtn.active{ width:20px; height:24px; border-radius:100%!important; display:block; background:#fff !important }
.btn-toggle .rtbtn.active, .btn-toggle .rtbtn{ float:right;}

.btn-toggle .ltbtn.active{ float:left;}
.btn-toggle .ltbtn span {font-size: 14px;text-transform: uppercase;font-weight: 700;color: #ccc;position: absolute;left: -87px;top: 4px;z-index: 9999999;}
.btn-toggle .ltbtn.active span, .btn-toggle .rtbtn.active span { color:#2196F3;}
.btn-toggle .rtbtn span {font-size: 14px;text-transform: uppercase;font-weight: 700;color: #ccc;position: absolute;right: -75px;top: 4px;z-index: 9999999;}

@media (min-width:1200px) and (max-width:1439px) {
#main-login {width: 100%;height: 100vh;position: relative;padding: 0 500px 0 0;}	
.rightsidecontent {float: left;width: 500px;}
.rightsidecontent .logo {float: left;width: 100%;text-align: center;}
.rightsidecontent .subPageHeader h2 {font-size: 14px;font-weight: 600;line-height: 26px;margin: 11px 0 0 0;padding: 0 0 4px 0;text-align: center;border: none;display:block;width: 100%;}
.subPageHeader h2 span {font-size: 19px;}
.loginformarea {width: 80%;margin-top: 80px;}
.loginformarea h3 {margin: 80px 0 0;}
.carousel-item p{ padding:0 20px;}
.carousel-item p br{ display:none;}
}

@media (min-width:992px) and (max-width:1199px) {
.box-acc h4{ font-size:15px;}
.box-acc {width: 100%;}
.subPageHeader h2{ font-size:18px;}
.subPageHeader h2 span {font-size: 26px;}


#main-login {width: 100%;height: auto;position: relative;padding: 0 0 0 0;}	
.leftsiderSlider{ padding-bottom:35px; padding-top:35px}
.rightsidecontent {float: left;width: 100%; padding-bottom:35px; position:relative;}
.rightsidecontent .logo {float: left;width: 100%;text-align: center;}
.rightsidecontent .subPageHeader h2 {font-size: 14px;font-weight: 600;line-height: 26px;margin: 11px 0 0 0;padding: 0 0 4px 0;text-align: center;border: none;display:block;width: 100%;}
.subPageHeader h2 span {font-size: 19px;}
.loginformarea {width: 80%;margin: 50px 0;}
.loginformarea h3 {margin: 35px 0 0;}
.carousel-item p{ padding:0 20px;}
.carousel-item p br{ display:none;}
.loginfooter {padding: 15px 10px;position: relative;bottom: 0;left: 0;}
.loginfooter .container {max-width: 100%;}

.hideindesktop{ display:block; margin:0 0 5px}
#main-login  .logo{ text-align:center; display:block; width:100%;}
#main-login  .logo img{ width:150px;}
#main-login .subPageHeader h2{ display:block; width:100%;}
#main-login .subPageHeader h2 {border-left: none;float: left;color: #969696;font-size: 14px;margin: 22px 0 0 0;padding: 0 0 6px 0;line-height: 30px;width: 100%;text-align: center;}

}

@media (min-width:768px) and (max-width:991px) {
.logo {float: none;text-align: center;width: 100%;display: block;}
.subPageHeader h2 {border-left: none;float: left;color: #969696;font-size: 22px;margin: 22px 0 0 0;padding: 0;line-height: 40px;text-align: center; display:block; width:100%;}
.box-acc.float-left{ margin-bottom:55px;}

#main-login {width: 100%;height: auto;position: relative;padding: 0 0 0 0;}	
.leftsiderSlider{ padding-bottom:35px; padding-top:35px}
.rightsidecontent {float: left;width: 100%; padding-bottom:35px; position:relative;}
.rightsidecontent .logo {float: left;width: 100%;text-align: center;}
#main-login .subPageHeader h2 {display: block;width: 100%;font-size: 14px;line-height: 26px;}
.rightsidecontent .subPageHeader h2 {font-size: 14px;font-weight: 600;line-height: 26px;margin: 11px 0 0 0;padding: 0 0 4px 0;text-align: center;border: none;display:block;width: 100%;}
.subPageHeader h2 span {font-size: 19px;}
.loginformarea {width: 80%;margin: 50px 0;}
.loginformarea h3 {margin: 35px 0 0;}
.carousel-item p{ padding:0 20px;}
.carousel-item p br{ display:none;}
.loginfooter {padding: 15px 10px;position: relative;bottom: 0;left: 0;}
.loginfooter .container {max-width: 100%;}

.rightsidecontent .subPageHeader{ display:none;}

.hideindesktop{ display:block; margin:0 0 5px}
#main-login  .logo img{ width:150px;}
#main-login .subPageHeader h2{ display:block; width:100%;}

}

@media (min-width:481px) and (max-width:767px) {
.logo {float: none;text-align: center;width: 100%;display: block;}
.subPageHeader h2 {border-left: none;float: left;color: #969696;font-size:18px;margin: 22px 0 0 0;padding: 0;line-height: 30px;text-align: center;     display: block;
width: 100%;
}
.subPageHeader h2 span{ font-size:26px;}
.box-acc.float-left{ margin-bottom:55px;}
.switchcol {font-size: 14px;text-transform: uppercase;font-weight: 700;display: block;margin: 27px auto 0;position: relative;width: 235px;}
.box-acc h4 {color: #3c3c3c;margin: 0 0 20px;text-align: center;}
.box-acc {width: 100%;}
#main-login {width: 100%;height: auto;position: relative;padding: 0 0 0 0;}	
.leftsiderSlider{ padding-bottom:35px; padding-top:35px}
.rightsidecontent {float: left;width: 100%; padding-bottom:35px; position:relative;}
.rightsidecontent .logo {float: left;width: 100%;text-align: center;}
.rightsidecontent .subPageHeader h2 {font-size: 14px;font-weight: 600;line-height: 26px;margin: 11px 0 0 0;padding: 0 0 4px 0;text-align: center;border: none;display:block;width: 100%;}
.subPageHeader h2 span {font-size: 19px;}
.loginformarea {width: 80%;margin: 50px 0;}
.loginformarea h3 {margin: 35px 0 0;}
.carousel-item p{ padding:0 20px;}
.carousel-item p br{ display:none;}
.loginfooter {padding: 15px 10px;position: relative;bottom: 0;left: 0;}
.loginfooter .container {max-width: 100%;}

.rightsidecontent .subPageHeader{ display:none;}
.hideindesktop{ display:block;}


.hideindesktop{ display:block; margin:0 0 5px}
#main-login  .logo img{ width:150px;}
#main-login .subPageHeader h2{ display:block; width:100%;}
.btn-toggle {width: 60px;border-radius: 60px;height: 28px;background: #2196F3;display: block;padding: 2px;float: none;margin: 0 auto 0;}
.monthlyprice {font-size: 13px;color: #3c3c3c;font-weight: 700;width: 100%;text-align: center;float: right;margin: 14px 0 0;}
}

@media (min-width:290px) and (max-width:480px) {
.btn-toggle {width: 60px;border-radius: 60px;height: 28px;background: #2196F3;display: block;padding: 2px;float: none;margin: 0 auto 0;}
.monthlyprice {font-size: 13px;color: #3c3c3c;font-weight: 700;width: 100%;text-align: center;float: right;margin: 14px 0 0;}
.logo {float: none;text-align: center;width: 100%;display: block;}
.subPageHeader h2 {border-left: none;float: left;color: #969696;font-size:13px;margin: 22px 0 0 0;padding: 0;line-height: 20px;text-align: center;}
.subPageHeader h2 span{ font-size:20px;}
.box-acc.float-left{ margin-bottom:55px;}
.switchcol {font-size: 14px;text-transform: uppercase;font-weight: 700;display: block;margin: 27px auto 0;position: relative;width: 235px;}
.box-acc h4 {color: #3c3c3c;margin: 0 0 20px;text-align: center;}
.box-acc h3{ font-size:22px;}
.pricingtableforrank table tr td {font-size: 14px;}
.cuponrow p{ font-size:12px;}
.paymentcard  img{ width:220px; margin:0 auto; display:block; height:auto;}
.box-acc {width: 100%;}
#main-login {width: 100%;height: auto;position: relative;padding: 0 0 0 0;}	
.leftsiderSlider{ padding-bottom:35px; padding-top:35px}
.rightsidecontent {float: left;width: 100%; padding-bottom:0; position:relative;}
.rightsidecontent .logo {float: left;width: 100%;text-align: center;}
.rightsidecontent .subPageHeader h2 {font-size: 14px;font-weight: 600;line-height: 26px;margin: 11px 0 0 0;padding: 0 0 4px 0;text-align: center;border: none;display:block;width: 100%;}
.subPageHeader h2 span {font-size: 19px;}
.loginformarea {width: 90%;margin: 50px 0;}
.loginformarea h3 {margin: 35px 0 0;}
.carousel-item p{ padding:0 20px;}
.carousel-item p br{ display:none;}
.loginfooter {padding: 15px 10px;position: relative;bottom: 0;left: 0;}
.loginfooter .container {max-width: 100%;}
.rightsidecontent .subPageHeader{ display:none;}
.loginfooter ul li a {font-size: 13px;padding: 0 8px;}
.loginfooter p{ font-size:12px;}

.hideindesktop{ display:block; margin:0 0 5px}
#main-login  .logo img{ width:150px;}
#main-login .subPageHeader h2{ display:block; width:100%;}
}