@import url('https://fonts.googleapis.com/css?family=Anton');


/* 
Color Palette 
------------------------------

Primary: #4a7542
Secondary: #0d3d05
Aux: #e7f7b5
Aux2: #d8f564
Gradient Light Clr: #187b05
Gradient Strong Clr: #0d3d05

*/

/* Reset */
* { box-sizing: border-box; }
body { padding: 0; margin: 0; font-family: sans-serif; font-size: 16px; background: #f0eeee; }
img { width: 100%; height: auto; }
button { cursor: pointer; }

/* Layout */
.page, .site-header, .site-content, 
.site-footer, .row, .pageTitle span { width: 100%; }
.row { padding: .5rem 0; }
.full-screen { height: 100vh;}
.wrapper { max-width: 1280px; padding: 0 2rem; margin: 0 auto; }
.inner-page { padding-bottom: 4rem; }
.logo { max-width: 400px; margin: 0 auto; }
.login-box, .signup-box { max-width: 800px; margin: 0 auto; }
.login-box { padding: 10% 3% 0; }
.signup-box { background: #ffffff; color: #666; background: -moz-linear-gradient(top, #ffffff 45%, #f4f3f3 99%); background: -webkit-linear-gradient(top, #ffffff 45%,#f4f3f3 99%); background: linear-gradient(to bottom, #ffffff 45%,#f4f3f3 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f3f3',GradientType=0 );
box-shadow: 2px -10px 20px #c1c1c1; padding: 2%; border-radius: 10px; overflow:hidden; }
.pageTitle { font-size: 1.5rem; color: #666; text-align: center; max-width: 600px; margin: 0 auto; position: relative; top: -7rem;  }
.pageTitle span, #Form1 label, .forgot, .formCol .alert-box, .errorEmail, .emptyEmail { display: block; }
.twoCols .col { max-width: 46%; flex: 0 0 46%; }

/* Flexbox */
.flex, .formCol ul li, .twoCols { display: flex; justify-content: space-between; flex-wrap: wrap; }

/* Form */
input[type=text], input[type=password], input[type=email], input[type=tel] { padding: 15px 10px; border-radius: 5px; border: solid 1px #ccc; font-size: 1rem; width: 100%; height: 30px; margin: .5rem; }
input[type=submit], input[type=button], .btnCta { display: table; margin: 0 auto; padding: 10px; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; border-radius: 30px; cursor: pointer; }
input[type=submit]:hover, input[type=submit]:focus, .btnCta:hover { background-color: #FFF; color: #0d3d05; }
.simple-account input[type=submit] { background-color: #47a1df; border: 3px solid #47a1df; color: #fff; }
.platinum-account input[type=submit] { background-color: #979797; border: 3px solid #979797; color: #fff; }
.simple-account input[type=submit]:hover, .simple-account input[type=submit]:focus { background-color: #fff; border: 3px solid #47a1df; color: #47a1df; }
.platinum-account input[type=submit]:hover, .platinum-account input[type=submit]:focus { background-color: #fff; border: 3px solid #979797; color: #979797; }
form .remember, .forgot { font-size: .8rem; }
form .remember { text-align: center; font-size: .8rem; }
form .remember { color: #fff; }
.formCol ul { padding: 0; }
.formCol ul li { margin-bottom: .8rem; }
.formCol ul li strong { max-width: 33%; flex: 0 0 33%; text-align: right; font-size: .9rem; line-height: 30px; }
.formCol input[type=text], .formCol input[type=password], .formCol input[type=email], .formCol input[type=tel] { padding: 5px 10px; border-radius: 5px; background-color: #f4f3f3; border:1px solid #666; font-size: 1rem; max-width: 55%; flex: 0 55%; }
.formCol .sgValidOk, .formCol .sgValidNok { max-width: 4%; flex: 0 0 4%; background: url(/images/valNok.png) no-repeat; background-position: center; }
.formCol .sgValidOk { background: url(/images/valOk.png) center no-repeat;}
.formCol .sgValidNok { background: url(/images/valNok.png) center no-repeat;}
.formCol .alert-box, .errorEmail, .emptyEmail { max-width: 84%; flex: 0 0 84%; padding: .5rem; color: #555; border-radius: 5px; font-size: 11px; background: #ffecec 10px 50px; border: 1px solid #f5aca6; text-align: center; margin: .3rem auto; font-weight: bold; }
.forgot { color: #4a7542; }
.forgot:hober, .forgot:focus { text-decoration: none; }
#Form1 { text-align: center; }
#Form1 fieldset { border: 0; } 
#Form1 .formRow, #Form1 .formEnd, #Form1 label { padding: .5rem 0;}

/* Skin */
.home { background: url(/images/home.png) no-repeat #FFF center top; background-size: cover; position: relative;}
.site-content { position: absolute; bottom: 30px; }
.inner-page { background: url(/images/bg.png) no-repeat center top; } 
.home hgroup { color: #fff; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); }
.signup-btn { position: absolute; top: 50px; right: 0; padding: 1rem 2rem; background: #fff; text-decoration: none; }
.signup-btn span { display: block; text-align: center; }
.signup-btn .cta-txt { font-size: 2rem; font-weight: bold; color: #187b05; }
.cta-txt +  span { font-size: .8rem; color: #8f929b; }
.pageTitle { text-transform: uppercase; }
.pageTitle .ctaTxt { color: #4a7542; font-size: 4rem; line-height: 4rem; }
.btnCta.gradyellow { border: 1px solid .1rem; font-size: 3rem; color: #fff; font-weight: bold;  padding: .8rem 1rem; border-radius: 2.5rem; letter-spacing: -.1rem; margin: 0 auto; background: #4a7542; background: -moz-linear-gradient(top, #4a7542 0%, #0d3d05 100%); background: -webkit-linear-gradient(top, #4a7542 0%,#0d3d05 100%); background: linear-gradient(to bottom, #4a7542 0%,#0d3d05 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a7542', endColorstr='#0d3d05',GradientType=0 );}
.firstStep { color: #666; }
.joinBtn { margin: 0 auto; display: table; }
.joinBtn a { font-size: 1.5rem !important; text-decoration: none; }
#ctl00__main_LbErrorPage { color: red; font-weight: bold; font-size: .8rem; }
#continueAccount, #continueEmail { font-size: 1rem; margin: 2rem; letter-spacing: .1rem;  }
.loadingImg { margin-left: .7rem; }
label { font-size: 1rem; }
a.forgot { text-align: center; color: #187b05; font-weight: bold; color: #d8f564; }
.simple-account span, .platinum-account span { font-size: 1.5rem; font-weight: bold; }
.simple-account span { color: #47a1df; }
.platinum-account span { color: #979797; }

/* Typography */
h1, .pageTitle { font-family: 'Anton', sans-serif; }
h1 { font-size: 3rem;}
.home h1 { margin: 1rem 0; letter-spacing: .4rem; }
.home h2 { font-size: 1.2rem; font-weight: normal; }

/* SignUp Form */
#divSignupManager .formCol ul { list-style: none; }

/* Chat */
#chatOverlay { position: fixed; bottom: 36px; right: 14px; width: 50px; height: 50px; }
#chatOverlay img { width: 60px; height: 60px; top: -15px !important; left: -6px !important; }

/* forgot account or password */
#hideable-box1, #hideable-box2, #hideable-box3 { float:left; width:100%; position:relative; }
#accordionForgot input#Account, #accordionForgot input#Email { height:28px; color:#1B3459; font-weight: bold; font-size:1.2em; }
#accordionForgot p.onRow { margin-bottom: .2em!important; }
#accordionForgot div.onRow { float:left; width:100%; position:relative; height:auto; margin-bottom: 1em!important; }
.km-KH #accordionForgot div.onRow strong{font-family: Hanuman, Code2000, sans-serif; font-size: 100%;}
#accordionForgot div.onRow label { float:inherit; width:90%; text-align:left;}
#accordionForgot div.onRow input {margin: 1em 0!important;}
#accordionForgot h2 { float:left; width:100%; }
#accordionForgot .errors { float:left; width:100%; margin:6px 0 25px 0; }
.errors .errorAccount, .errors .emptyAccount, .errors .errorEmail, .errors .emptyEmail { display:none; font-weight: bold; color:red; }
#accordionForgot .uInfo { margin:0 auto; }
.secondStep, .completeMsgStep, .errorMsgStep { display:none; }
#accordionForgot #loadingAccount, #accordionForgot #loadingEmail { width:20px; height:20px; margin:3px; }
#accordionForgot .loadingImg { display:none; width:16px; height:16px; margin:0 0 0 5px; }
#accordionForgot .blockL { float:left; width:39%; height:80px; }
#accordionForgot .blockL label { float:right; }
#accordionForgot .blockR { float:right; width:57%; height:80px; text-align: left; }
#accordionForgot .blockR .txt { float:left; width:100%; color:#666; text-align: left; margin-bottom: 10px; font-size: .9em; }
#accordionForgot .blockR input { float:left; width:90px; height:28px; text-transform: uppercase; color:#1B3459; text-align: center; font-weight: bolder; font-size:1.5em; }
#accordionForgot .blockR .errorCaptcha { display:none; font-weight: bold; color:red; font-size:.9em; margin:1em!important; }
#accordionForgot .blockButtons { float:left; width:90%; margin-top:20px; margin:0 5%; }
#accordionForgot .blockButtons .back-button { float:left;border-radius: 5px; border: 1px solid #08a000; padding: .5em .75em !important; color: #05b100; font-weight: bold; vertical-align: middle; font-size: 1em;}
#accordionForgot .blockButtons .btnCta { float:right; }

/*	404 error page - Fixed by Marcela */
.notFoundP .panelBox p { text-align:center!important; font-size:1em; color: #ababab; margin-bottom: 2em;}
.notFoundP .panelBox h1 {font-size:3.5em; color: #d5d5d5; text-transform:uppercase; font-weight:bold; width:53%; margin:0 auto;}

@media only screen and ( max-width: 1024px ) {
    .home { background: url(/images/tablet.png) no-repeat center top; background-size: 130%; opacity: 0.9;}
	.signup-box { max-width: 90%; padding: 5% 3% 0; }
	.signup-btn { position: initial; display: block; width: 200px; margin: 1rem auto; padding: .7rem; border-radius: 40px; }
	input[type=text], input[type=password] { max-width: 100%; flex: 0 0 100%; }
	.pageTitle { position: initial; margin-bottom: 2rem; }
	.formCol ul li strong, .formCol input[type=text], .formCol input[type=password], .formCol input[type=email], .formCol input[type=tel], .formCol .alert-box, .errorEmail, .emptyEmail { max-width: 90%; flex: 0 0 90%; margin: .3rem 0; }
	.formCol ul li strong { text-align: left; }
	.formCol ul li { justify-content: flex-start; }
	.formCol .sgValidOk, .formCol .sgValidNok { margin-left: 1rem; }
	.joinBtn { margin: 2rem auto; }
    .twoCols { width: 80%; margin: 0 auto; }
    .twoCols .col { max-width: 100%; flex: 0 0 100%; }
    .simple-account { margin-bottom: 3rem; }
    .platinum-account img { display: block; width: 60%; max-width: 60%; margin: 0 auto; text-align: center; }
    .site-content { position: initial; }
    .login-box { padding: 3%; }
    .simple-account span { display: block; text-align: center; }
}
@media only screen and ( min-width: 481px ) and ( max-width: 1024px ) {

    .full-screen { height: 768px; }
    .logo { max-width: 200px; }
    .twoCols .col { max-width: 100%; flex: 0 0 100%; }
    .twoCols {width:50%; margin: 0 auto; }
    .simple-account { margin-bottom: 3rem; }
    .site-content { margin-top: 230px; }
} 

@media only screen and ( max-width: 480px ) { 
    .home { background-size: 180%; }
    .logo { max-width: 200px; }
    .login-box { padding: 0% 3%; }
    .home h1 { font-size: 2.5rem; }
    .signup-btn { margin: 2rem auto; background-color: #187b05; border: 3px solid #e7f7b5; }
    .cta-txt, .cta-txt + span { color: #fff!Important; }
    .simple-account { text-align: center; }
    .site-content { margin-top: 110px; }
    .simple-account { margin-bottom: 1rem; }
}