body{
    font-family: HelveticaNeue;
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.preloader .preloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;

  height: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.preloader .preloader-inner img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
}
.loader {
height: 150px;
width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #a0a0a0;
position: relative;
}

.loader span {
font-size: 12px;
position: absolute;
bottom: 16px;
}

/* =============
   Notification
============= */
.notifyjs-metro-base {
  position: relative;
  min-height: 52px;
  min-width: 250px;
  color: #444;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
  -webkit-animation: dropdownOpen 0.3s ease-out;
  -o-animation: dropdownOpen 0.3s ease-out;
  animation: dropdownOpen 0.3s ease-out;
}
.notifyjs-metro-base .image {
  display: table;
  position: absolute;
  height: auto;
  width: auto;
  left: 25px;
  top: 50%;
  font-size: 24px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.notifyjs-metro-base .text-wrapper {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin: 10px 10px 10px 52px;
  clear: both;
}
.notifyjs-metro-base .title {
  font-size: 15px;
  line-height: 20px;
  margin-bottom: 5px;
  font-weight: bold;
}
.notifyjs-metro-base .text {
  font-size: 12px;
  font-weight: normal;
  max-width: 360px;
  vertical-align: middle;
}
.notifyjs-metro-cool {
  color: #fafafa !important;
  background-color: #4A525F;
  border: 1px solid #4A525F;
}
/* =============
   Notification End
============= */
/* COMMON ANIMATIONS */
@keyframes spinBasic {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@keyframes spinBasicReverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

@keyframes rotateWithBoost {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(180deg);
}
90%,
100% {
transform: rotate(360deg);
}
}

/*LOADER 4,7,8,16*/
.loader4 svg,
.loader7 svg,
.loader8 svg,
.loader16 svg {
animation: 1s linear spinBasic infinite;
}

/* CSS Document */
.container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}
ul:before, ul:after{ content:''; display:table;}
ul:after{ clear:both;}
.full-img img{ width:100%; height:auto;}
img.img-crop { display: block; max-width: none }
.table-cell {display: table-cell; vertical-align: middle; padding:0;}
.table-div{ display:table; height:100%; width:100%; }

.banner{ background:#ffde00 url(../img/experience/wave.png) repeat-x center bottom; padding-bottom:60px; padding-top:30px;}
.banner .content{ padding:0 50px}
.banner .content .content-block{ padding:20px; border-radius:0 0 10px 10px; background: #f74303;
background: -moz-linear-gradient(top,  #f74303 0%, #ea2409 100%);
background: -webkit-linear-gradient(top,  #f74303 0%,#ea2409 100%);
background: linear-gradient(to bottom,  #f74303 0%,#ea2409 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f74303', endColorstr='#ea2409',GradientType=0 );
}
.top-img{ position:relative;}
.top-img .inner-content{ position:absolute; bottom:0; left:0; right:0; padding:0 22% 4%; z-index:100; text-align:center}
.top-img .inner-content img{ height:auto; width:100%;}
.page-banner.newclass,.introduce.newclass{ display:none;}
.banner-form,.login_form{ display:none;}
.login_form{ padding: 0 10%; }
.login_form #loginBtn img {width: 60%;}
.banner-form.newclass,.login_form.newclass{ display:block;}
.banner-form #sendSmsBtn{position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: 100%; height: 100%; border: none; border-left: 1px solid #f4f4f4; color: #707070; background: #fff; font-size: 0.7rem; padding: 0;}
.top-img .form-content{ position:absolute; top:85%; -webkit-transform:translateY(-85%); -ms-transform:translateY(-85%); transform:translateY(-85%); left:0; right:0; padding:0 20% 0; z-index:100}
.top-img .form-content p{ text-align:center; color:#fff; font-weight:700; padding-top:10%;}
.top-img .form-content p a{ color:#ffc600;}
.top-img .form-content label{ color:#fff;}
.top-img .form-group{ padding-bottom:3%;}
.top-img .form-field{ border:1px solid #ffde00; background:#fff; overflow:hidden; border-radius:8px;}
.top-img .form-field .form-control, .banner .form-field .form-control:focus{ box-shadow:none; border:none; background:#fff;  height:65px;}
.top-img .form-field a{ display:block; border-left:1px solid #eee; color:#333; text-align:center; line-height:65px;}
.form-control{ font-size:1rem;}
.banner-btn{ padding:5px 10% 0; text-align:center;}
.banner-btn button{ padding:0; border:none; background:none; cursor:pointer;}
.wrapper{ padding:30px 0;}
.img-round img{ border-radius:10px;}
.box-content{ padding:100px 15px 10px 15px; background:#dddddd; position:relative;}
.box-content .tag{ position:absolute; left:-10px; top:10px; padding:10px; font-weight: bold;}
.box-content .tag:after{ content:''; position:absolute; top:0; left:100%; margin-left:-1px; width:0; height:0; border-top: 37px solid transparent; border-left:18px solid transparent; border-bottom:37px solid transparent;}
.box-content .tag.green{ background:#00803a; color:#fff; }
.box-content .tag.green:after{ border-left-color:#00803a}
.box-content .tag.orange{ background:#ffa700; color:#fff;}
.box-content .tag.orange:after{ border-left-color:#ffa700}
.box-content .tag.blue{ background:#28a1d4; color:#fff;}
.box-content .tag.blue:after{ border-left-color:#28a1d4}
.box-content .table{ margin:0;}
.box-content .table > tbody > tr > td{ padding:0 5px 5px 0; width:50%; border:none;}
.box-content p { padding-left:15px; position:relative; margin-bottom:5px;}
.box-content p:before{ background:#333; height:6px; width:6px; float:left; border-radius:20px; content:''; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);  left:0;}

.wrapper .post-content:last-child .row [class*=col-]{ margin-bottom:0;}
.wrapper .post-content .row{ margin-left:-10px; margin-right:-10px;}
.wrapper .post-content .row [class*=col-]{ padding-left:10px; padding-right:10px; text-align:center; margin-bottom:24px;}
.wrapper .post-content .row .full-img img{ border-radius:10px; border:3px solid #ff8400;}
.wrapper .post-content .midfont{font-weight: 600;}
.wrapper h3{font-weight: bold;}
.footer{ text-align:center; padding:20px 0; text-align:center; font-size:16px; border-top:1px solid #eee;}

.experience_complete_container{
  width: 100%; 
  height: 100vh;
  background-image: url(../img/experience/top_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.experience_complete_container .complete_wrap{ 
  padding: 2rem 1rem 1rem 1rem;
}
.experience_complete_container .complete_wrap .back{
  width: 0.7rem;
}
.experience_complete_container .complete_wrap h3{
  color: white;
  font-size: 1.5rem !important;
}
.experience_complete_container .complete_wrap h3 span{
  color: #ffe38d;
}
.experience_complete_container .complete_wrap .content{
  background-color: white;
  padding: 1.5rem 1rem 2rem 1rem;
}
.experience_complete_container .complete_wrap .content h4 {
  font-size: 1rem;
  margin-bottom: 0 !important;
  line-height: 1.8;
}
.experience_complete_container .complete_wrap .content h4 img{
  height: 1rem;
  padding-right: 0.5rem;
}
.experience_complete_container .complete_wrap .content h4:nth-of-type(1){
  color: #999999;
}
.experience_complete_container .complete_wrap .content h4:nth-of-type(3){
  color: #f94b59;
}
.experience_complete_container .complete_wrap .content .qrcode{
  text-align: center;
  padding-top: 2rem;
}
.experience_complete_container .complete_wrap .content .qrcode img{
  width: 50%;
}
.experience_complete_container .downloadbtn{
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
.experience_complete_container .downloadbtn img{
  width: 100%;
  height: 90px;
}

.banner-inner{ background:url(../img/experience/banner-bg.png) no-repeat center #ffd200; background-size:cover; min-height: 100vh; text-align:center; position: relative;}
.banner-inner:after{ content:''; position:absolute; bottom:0; left:0; right:0; background:url(../img/experience/wave.png) repeat-x center; height:96px;}
.banner-inner .banner-content{ padding:0 6%;}
.banner-inner .d-block img{ max-width:350px;}
.banner-inner p { margin:90px 0 20px; font-size: 0.95rem; font-weight: 550; line-height: 1.8rem;}
.banner-inner p a img{height: 50px; margin-top: 15px;}
.inner-body{ background:#ffde00;}

.box-content h6 {font-weight: bold;}
.henry{ position:absolute; right:5%; bottom:10%;}

.inner-body{ background:#ffde00 url(../img/experience/wave.png) repeat-x center bottom}

.header {
  background: url(../img/before_buylevels/header_bg.png) no-repeat center;
  background-size: 100% 100%;
  position: relative;
  padding: 3rem 1.5rem;
}
.header .logo{
  position: absolute;
  left: 1rem;
  top: 1rem; 
}

.login_form .form-field{ border:1px solid #159f39; border-radius:8px; background:#fff; overflow:hidden; }
.login_form .form-field input{font-size: 0.8rem; border: none;}
.login_form #sendSmsBtn{position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: 100%; height: 100%; border: none; border-left: 1px solid #cccccc; color: #333333; background: #fff; padding: 0;}
.form-field input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #cccccc;
}
.form-field input::-moz-placeholder { /* Firefox 19+ */
  color: #cccccc; 
}
.form-field input:-ms-input-placeholder { /* IE 10+ */
  color: #cccccc;
}
.form-field input:-moz-placeholder { /* Firefox 18- */
  color: #cccccc;
}
.float-bar{position:fixed; bottom:-150px; right:0; left:0; z-index:100; color:#6b4602; font-size:0.8125rem -moz-transition:all 0.5s ease;  -webkit-transition:all 0.5s ease;  -o-transition:all 0.5s ease;  transition:all 0.5s ease;}
.float-bar .container .row{ padding: 0.5rem 2rem;}
#before_buylevels .footer{margin-bottom: 40px;}
.float-bar.darkHeader{ bottom:0;}
/* New Experience Event Styles Start*/
#camp21days{
  background: #feb94c;
}
#camp21days .w1{
  background-size: cover;
  background-image: url(../../ads/img/07_03/w1_bg.png);
  background-position: center; 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 1rem;
}
#camp21days .w1 .w1_header{
  position: relative;
}
#camp21days .w1 .w1_header .logo{
  width: 100px;
  height: auto;
}
#camp21days .w1 .w1_header .title{
  text-align: center;
  position: relative;
}
#camp21days .w1 .w1_header .title img:nth-of-type(1){
  width: 90%;
}
#camp21days .w1 .w1_header .title img:nth-of-type(2){
  width: 60px;
  position: absolute;
  right: 0px;
  top: 10px;
}
#camp21days .w1 .w1_header .sub_title1 {
  text-align: center;
}
#camp21days .w1 .w1_header .sub_title1 img{
  width: 80%;
}
#camp21days .w1 .w1_header .sub_title2 {
  text-align: center;
  position: relative;
}
#camp21days .w1 .w1_header .sub_title2 img:nth-of-type(1){
  width: 70%;
}
#camp21days .w1 .w1_header .sub_title2 img:nth-of-type(2){
  width: 45px;
  position: absolute;
  left: 0px;
  top: 10px;
}
#camp21days .w1 .w1_header .w1_info, #camp21days .w1 .w1_header .w1_reg {
  border-radius: 1rem;
  background: #f5d547;
  padding: 0.7rem;
}
#camp21days .w1 .w1_header .w1_info .content{
  border-radius: 1rem;
  background: white;
  padding: 1rem 0.5rem 1rem 0.5rem;
}
#camp21days .w1 .w1_header .w1_reg .content {
  border-radius: 1rem;
  background: white;
  padding: 1rem;  
}
#camp21days .w1 .w1_header .w1_info .content img{
  width: 100%;
}
#camp21days .w1 .w1_header .reg_form label{
  color: red;
}
#camp21days .w1 .w1_header .reg_form input{
  font-size: 0.8rem;
}
#camp21days .w1 .w1_header .reg_form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #cccccc;
}
#camp21days .w1 .w1_header .reg_form input::-moz-placeholder { /* Firefox 19+ */
  color: #cccccc; 
}
#camp21days .w1 .w1_header .reg_form input:-ms-input-placeholder { /* IE 10+ */
  color: #cccccc;
}
#camp21days .w1 .w1_header .reg_form input:-moz-placeholder { /* Firefox 18- */
  color: #cccccc;
}
#camp21days .w1 .w1_header .reg_form .sendSmsBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
    border-left: 1px solid #cccccc;
    color: #666666;
    background: #fff;
    padding: 0;
    font-size: 0.8rem;
}
#camp21days .w1 .w1_header .reg_form input[name="code"] {
    border: none !important;
}
#camp21days .w1 .w1_header .reg_form .row{
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#camp21days .w1 .w1_header .reg_form .privacy{
  font-size: 0.7rem;
  text-align: center;
}
#camp21days .w1 .w1_header .reg_form .privacy a{
  color: red;
}
#camp21days .w2 img{
  width: 100%;
}
#camp21days .w3{
  padding: 2rem 1rem 0 1rem;
}
#camp21days .w3 .info{
  margin-bottom: 2rem;
}
#camp21days .w3 .info .header{
  text-align: center;
  padding: 1rem;
  color: white;
  font-size: 1.3rem;
  font-weight: 600;
  border-radius: 1rem 1rem 0px 0px;
}
#camp21days .w3 .info:nth-of-type(1) .header{
  background: #09891b;
}
#camp21days .w3 .info:nth-of-type(2) .header{
  background: #ffa600;
}
#camp21days .w3 .info:nth-of-type(3) .header{
  background: #28a2d5;
}
#camp21days .w3 .info .content{
  background: #ffe3df;
  padding: 0 0.7rem 0.7rem 0.7rem;  
  border-radius: 0px 0px 1rem 1rem;
}
#camp21days .w3 .info .content ul{
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  margin: 0 !important;
  background: white;
  border-radius: 0px 0px 1rem 1rem; 
  color: #333333;
}
#camp21days .w4{
  font-size: 0.9rem;
  background: #fea84c;
  color: white;
  text-align: center;
  padding: 0.5rem 1rem 95px 1rem;
}
#camp21days .stepbtn, #download .downloadbtn{
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
#camp21days .stepbtn img, #download .downloadbtn img{
  width: 100%;
  height: 90px;
}

/* New Experience Event Styles End*/
@media (min-width: 768px) and (max-width: 991px) {
.banner-inner .d-block img{ max-width:300px;}
.banner-inner p{ margin-top:160px; font-size: 1.5rem;}
.banner-inner p a img{height: 100px; margin-top: 30px;}
.login_form #loginBtn img {width: 40%;}
#before_buylevels .footer{margin-bottom: 80px;}
}

@media (min-width: 1024px) and (max-width: 1366px) {
body, .form-control{ font-size:1.9rem;}	
.box-content .tag:after{ border-top: 58px solid transparent; border-left:26px solid transparent; border-bottom:58px solid transparent;}
.box-content{ padding:150px 15px 10px 15px;}
.box-content h6{ font-size:24px;}
.banner-inner p{ margin-top:260px; font-size: 2rem;}
.banner-inner p a img{height: 100px; margin-top: 30px;}
.top-img .form-content p, .top-img .form-content label, .top-img .form-field .form-control, .banner .form-field .form-control:focus, .top-img .form-field a{ font-size:1.5rem}
.login_form #loginBtn img {width: 40%;}
#before_buylevels .footer{margin-bottom: 80px;}
}

@media (min-width: 576px) and (max-width: 767px) {
.wrapper{ padding:20px;}
body, .form-control{ font-size:1rem;}
.box-content{ padding:95px 15px 15px 15px; background:#dddddd; position:relative;}
.top-img .form-field .form-control, .banner .form-field .form-control:focus{ height:45px;}
.box-content .tag:after{ border-top: 34px solid transparent; border-left:16px solid transparent; border-bottom:34px solid transparent;}
.top-img .form-field a{line-height:45px;}
.top-img .form-content p{ padding:3%;}
#before_buylevels .footer{margin-bottom: 80px;}
}

@media (min-width: 320px) and (max-width: 575px) {
.wrapper{ padding:20px;}
body, .footer{ font-size:0.8125rem;}
.box-content{ padding:80px 15px 15px 15px;}
.box-content .tag:after{ border-top: 30px solid transparent; border-left:16px solid transparent; border-bottom:30px solid transparent;}
.box-content h6{ font-size:0.8125rem;}
.top-img .form-field .form-control, .banner .form-field .form-control:focus{ height:30px;}
.top-img .form-field .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 10px;
  line-height: 100%;
}
.top-img .form-field .form-control::-moz-placeholder { /* Firefox 19+ */
  font-size: 10px;
  line-height: 100%;
}
.top-img .form-field .form-control:-ms-input-placeholder { /* IE 10+ */
  font-size: 10px;
  line-height: 100%;
}
.top-img .form-field .form-control:-moz-placeholder { /* Firefox 18- */
  font-size: 10px;
  line-height: 100%;
}
.top-img .form-field a{line-height:30px; font-size:10px;}
.top-img .form-content p{ padding:3%; font-size:10px;}
.top-img .form-group{ padding-bottom:0; margin-bottom:12px;}
/*.top-img .form-content{ padding:0 20% 6%;}*/
.banner-inner .banner-content{ padding:0 40px;}
.banner-inner{ padding:40px 0 0 0;}
.henry img{ width:90px;}
.banner-inner p { margin: 60px 0; }
.banner-inner .d-block img{ width:220px;}
.wrapper h3{ font-size:20px;}
.header .logo img{width: 60%;}
}
@media (min-width: 320px) and (max-width: 370px) {
body, .footer{ font-size:0.7125rem;}
.top-img .form-content{ top:90%; -webkit-transform:translateY(-90%); -ms-transform:translateY(-90%); transform:translateY(-90%);}
.box-content p{ font-size:10px; padding-left:1p0x;}
.box-content p:before{ height:5px; width:5px;}
.box-content .tag:after{ border-top: 27px solid transparent; border-left:13px solid transparent; border-bottom:27px solid transparent;}
.banner-inner .d-block img{ width:160px;}
.henry img{ width:90px;}
.header .logo img{width: 60%;}
#before_buylevels .footer{margin-bottom: 25px;}
}