html,body{
	height:100%;
	margin:0;
	padding:0;
}

body {
	background-color:#0187FF;
	font-family: Arial,Helvetica,sans-serif;
	font-size:14px;
	min-width:none;
	overflow-y:scroll;
}

@-moz-document url-prefix() { 
	body {
		background-color:#0c8bf5;
	}
}

.centerContainer {
	position:relative;
	max-width:480px;
	margin:80px auto;
}

.mainContainer {
	position:relative;
	float:left;
	max-width:480px;
	background-color:#ffffff;
    border-radius: 6px;
}

.mainContainer .leftSide,
.mainContainer .rightSide {
	position: absolute;
	top: 0px;
	bottom: 0px;
}

.mainContainer .leftSide {
	left: -210px;
	width: 168px;
}

.mainContainer .leftSide video {
	width: 100%;
	padding-top:110px;
}

.mainContainer .rightSide {
	right: -280px;
	width: 230px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top:70px;
}

.rightSide .testDesc {
	font-family: Roboto;
	font-size: 16px;
	font-weight: 300;
	color: #98D0FF;
	font-style: italic;
	margin-bottom: 20px;
}

.rightSide .testName {
	font-family: Lato;
	font-size: 12px;
	font-weight: 700;
	color: #98D0FF;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.mainContainer .signupHeader,
.mainContainer .loginHeader {
	background:none;
	width:100%;
	height:120px;
}

.mainContainer h1 {
	float:left;
	margin:50px 0px 0px 0px;
	width:100%;
	text-align:center;
	font-family:"MallannaRegular";
	font-size:37px;
	color:#1E120D;
}

.mainContainer .loginSocial {
	position:relative;
	clear:both;
	padding:20px;
	border-bottom:1px solid #dfe3e7;
}

.loginSocial .loginFacebook, .loginSocial .loginTwitter, .loginSocial .loginGoogle, .loginSocial .loginLinkedIn {
	display:table-cell;
	height:60px;
	width:150px;
	background:#265590 url('../images/campayn/new_2014/signup/social.png') 70px 15px no-repeat;
}

.loginSocial .loginTwitter {
	background-color:#0091c8;
	background-position:-75px 15px;
}

.loginSocial .loginGoogle {
	background-color:#e5483f;
	background-position:-220px 15px;
}

.loginSocial .loginLinkedIn {
	background-color:#0082b0;
	background-position:-367px 15px;
}

.loginSocialLinks {
	clear:both;
	text-align:center;
	padding:20px 0px;
	color:#7EC4FF;
	font-family:"Roboto";
	font-weight:normal;
	font-size:12px;
}

.loginSocialLinks a {
	color:#7EC4FF;
	font-family:"Roboto";
	font-weight:normal;
	font-size:12px;
	padding:0px 5px;
	text-decoration:none;
}

.mainLogoFooter {
    display: block;
    width: 130px;
    margin: 0px auto;
    margin-top: 70px;
}

.mainContainer #signupBox,
.mainContainer #loginBox {
	padding:0px;
	max-width:480px;
	position:relative;
}

.sendResetPass,
#signupBox input[type=text],
#loginBox input[type=text],
#loginBox #password {
	border: none;
    border: 1px solid #D8E3E9;
    width: 360px;
    padding: 15px 20px;
    height: auto;
    margin: 0px auto 20px auto;
    display: block;
    background-color: #ECF5FD;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #000000;
}

.firstAndLast #firstName {
    position: static;
    top: auto;
    left: auto;
    /* border-right: none !important; */
    width: 360px !important;
}

.firstAndLast #lastName {
    position: static;
    top: auto;
    left: auto;
    width: 360px !important;
}

#signupBox input[type=text],
#signupBox input[type=email],
#signupBox #password {
    box-shadow: none;
    border: 1px solid #D8E3E9;
    width: 360px;
    padding: 15px 20px;
    margin: 0px auto 20px auto;
    height: auto;
    display: block;
    background-color: #ECF5FD;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #000000;
}

.firstAndLast,
.signupUrl,
.newsletterInput {
    position: relative;
    width: inherit;
    height: inherit;
    border-top: none;
    margin: 0px;
    padding: 0px;
}

.newsletterInput,
.signupUrl {
    position: relative;
    width: inherit;
    height: inherit;
    border-top: none;
    margin: 0px;
    padding: 0px;
}

.newsletterInput {
    margin: 0px 36px;
}

.newsletterInput input {
    position: static;
    top: auto;
    left: auto;
}

.newsletterInput label {
    position: static;
    top: auto;
    left: auto;
    color: #6E7E89;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    cursor: pointer;
}

#siteAddress {
    padding-left: 20px !important;
    width: 360px !important;
}

#signupBox .domain, .placeholderUrl {
    font-size: 14px;
    color: #bfbfbf;
    position: absolute;
    top: 16px;
    left: 340px;
    font-family: Lato;
}

.signupSubmit {
    margin: 35px 0px 50px 0px;
}

.campInputs::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000000;
}
.campInputs::-moz-placeholder { /* Firefox 19+ */
  color: #000000;
}
.campInputs:-ms-input-placeholder { /* IE 10+ */
  color: #000000;
}
.campInputs:-moz-placeholder { /* Firefox 18- */
  color: #000000;
}

.signupSubmit,
.loginSubmit {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 20px 0px 40px 0px;
}

#signupBox #submit,
.signupSubmit #submit,
.loginSubmit #submit {
    background-color: #0089FF;
    border: none;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    width: 120px;
    height: 50px;
    position: absolute;
    top: 0px;
    right: 40px;
    border-radius: 4px;
    padding: 0px;
}

.loginSubmit.hostPathway #submit {
	background-color:#232323;
}

#signupBox #submit:hover,
.signupSubmit #submit:hover,
.loginSubmit #submit:hover {
	background-color:#0089FF;
}

.loginSubmit.hostPathway #submit:hover {
	background-color:#4B949A;
}

.passwordInput {
	position:relative;
}

.loginCaptcha {
	text-align: center;
	margin:auto;
	margin-top:10px;
	width:310px;
}

.forgotPass {
	position:absolute;
	top:16px;
	right:50px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
	color:#0089FF;
	text-decoration:none;
}

.forgotPass:hover {
	text-decoration:underline;
}

#signupBox .errorText {
    position: absolute;
    color: #C0262C;
    display: block;
    z-index: 10;
    width: 100%;
}
#signupBox .subdomainErrorText{
	display: none;
	position: absolute;
	color: #C0262C;
	z-index: 10;
	top: 37%;
	right: 43px;
}

#signupBox input[type=text].error,
#signupBox input[type=email].error,
#signupBox #password.error {
	border-color:#C0262C;
	background:#ECF5FD;
}

.noteBottom {
    clear: both;
    float: none;
    width: 580px;
    height: 30px;
    text-align: center;
    color: #7EC4FF;
    font-size: 11px;
    padding: 20px 0px 35px 0px;
    line-height: 15px;
    margin-left: -50px;
}

.noteBottom a {
    color: #7EC4FF;
}

.noteBottom a:hover {
    text-decoration: underline;
}

.mobileErrorText {
	display: none;
	padding: 0px 0px 20px 10px;
	color: #C0262C;
}

.loginSocialLinks {
	width: 540px;
	margin-left: -30px;
}

@media all and (max-width: 556px) {
	.loginSocialLinks {
		width: 100%;
		margin-left: auto;
	}
}

@media all and (max-width: 645px) {
	.sendResetPass,
	#signupBox input[type="text"],
	#loginBox input[type="text"],
	#loginBox #password,
	.twitterSignupEmail,
	.signUpTwForm input[type="text"] {
		width: calc(100% - 60px) !important;
		padding: 15px 20px !important;
		height: auto !important;
	}

	.mainContainer #signupBox,
	.mainContainer #loginBox,
	.mainContainer,
	.mainContainer .loginHeader,
	.mainContainer .signupHeader,
	.signInContainer .signupHeader,
	.mainContainer .afterTwHeader,
	.mainContainer .afterHeader {
		display:inline;
		width: 100%;
		height: auto;
	}

	.mainContainer {
		min-width: 100%;
	}

	.mainContainer h1 {
		margin-bottom: 40px;
	}

	.forgotPass {
	    background-color: #ECF5FD;
	}

	#signupBox input[type="text"],
	#signupBox #email {
	    width: calc(100% - 60px) !important;
	    padding: 15px 20px !important;
	    height: auto !important;
	}

	#signupBox #password {
		width: calc(100% - 60px) !important;
	}

	.signupUrl,
	.fbSiteAddress,
	.newsletterInput {
	    border-bottom: none;
	}

	#signupBox .domain, form.twitterSignUpForm .domain, .fbSiteAddress .domain, .signUpTwForm .domain {
	    left: auto;
	    right: 20px;
	}
}

@media all and (max-width: 660px) {
	.noteBottom {
		display: block;
		width: 100%;
		margin-left: auto;
	}
}

@media all and (max-width: 1060px) {
	.mainContainer .leftSide,
	.mainContainer .rightSide {
		display: none;
	}
}