@charset "utf-8";

body, html {
	height: 100%;
}

#MainHeader {
	margin: 5px auto 0;
}

#Logo {
	width: 100%;
}

#LogoMedium {
	width: 100%;
}

#PageContainer {
	overflow: auto;
	width: 98%;
	max-width: 1150px;
}

#MainContent {
	overflow: hidden;
	margin: 1px 0 10px 0;
	width: 100%;
	background-color: #1E1E1E;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

#MediaContainer {
	margin: 20px auto 10px auto;
	width: 98%;
}

#MagazineContainer {
	float: left;
	width: 55%;
	margin-right: 1%;
}

#Magazine {
	width: 100%;
}

#MagazinePortait {
	display: block;
	margin: 0 auto;
	width: 50%;
}

#RelatedContent {
	float: left;
	width: 44%;
}

#Thumbs {
	margin: 0 auto 10px;
	width: 100%;
}

#Thumbs img {
	float: left;
	margin-right: 0.5%;
	width: 24.5%;
}

#ThumbGroup {
	width: 100%;
}

#VideoContainer {
	margin-top: 1%;
	width: 100%;
}

#VideoSample {
	float: left;
	width: 77.3613445%;
}

#VideoSampler {
	float: left;
	margin-left: 1%;
	width: 21.6386555%;
}

#VideoRelated {
	position: relative;
	margin: 10px auto;
	width: 98%;
}

#ModelDescription {
	float: left;
	overflow: auto;
	margin-right: 1%;
	width: 64.8148148%;
	height: 410px; /*Remove*/
	background-color: black;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#BioContainer {
	margin: 1% auto;
	width: 96%;
	height: 96%;
}

#BioHeader {
	overflow: auto;
	width: 100%;
}

#BioHeader h1 {
	float: left;
	margin: 0;
	font-size: 24px;
	color: #ADA2FF;
}

#BioHeader h2 {
  float: left;
  margin: 6px 5px;
  color: white;
  font-size: 14px;
  font-weight: normal;
}

.separator {
  color: gray;
}

#Bio {
	overflow: auto;
	width: 100%;
	outline: none;
}

.OneHeader {
	height: 90%;
}

.TwoHeaders {
	height: 82%;
}

.ThreeHeaders {
	height: 73%;
}

.FourHeaders {
	height: 67%;
}

#Bio p {
	color: white;
	font-size: 14px;
	text-align: justify;
	margin: 1% 1% 1% 0;
}

#Form {
	float: left;
	width: 34%;
	height: 410px; /*Remove*/
	background-color: #1e3745;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#FormHeader {
	overflow: auto;
	width: 100%;
}

#GetAccess {
	display: block;
	margin: auto;
	width: 100%;
}

#RadioButtons {
	float: left;
	margin-left: 1%;
	width: 49%;
}

#SignUp {
	display: block;
	margin: 5px auto;
}

#FieldsContainer {
	position: relative;
	margin: 0 auto;
	width: 90%;
	color: white;
	font-size: 18px;
}

.row {
	overflow: visible;
	position: relative;
	width: 100%;
	margin-bottom: 10px;
}

.row > label,
.row span {
	float: left;
	width: 28%;
	text-align: right;
	padding: 3px 0px 3px 0px;
}

.row >  input {
	margin-left: 3%;
	width: 60%;
}

.row >  select {
	margin-left: 3%;
	width: 60%;
}

#RadioButton {
	float: left;
	margin-left: 3%;
	width: 65%;
}

#SignMeUp {
	display: block;
	cursor: pointer;
	margin: 10px auto;
	border: 0;
	padding: 0;
	width: 284px;
	height: 53px;
	background-image: url(/images/jButton.jpg);
	background-repeat: no-repeat;
	background-color: transparent;
}

footer {
	margin-bottom: 10px;
}

#JoinNow {
	display: block;
	margin: 0 auto;
}

#JoinNowSmall {
	display: none;
	margin: 0 auto 10px auto;
}

#JoinNowSmall2 {
	display: none;
	margin: 0 auto;
}

#userErrorMessage,
#passwordErrorMessage,
#emailErrorMessage {
	display: none;
	position: absolute;
	z-index: 2;
	bottom: -20px;
	right: 7%;
	background-color: #c9302c;
	border: 3px solid #c9302c;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#userErrorMessage p,
#passwordErrorMessage p,
#emailErrorMessage p {
	width: 100%;
	font-size: 13px;
	color: white !important;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}

.triangle {
	position: absolute;
	top: -9px;
	right: 10px;
}

#userResult,
#passwordResult,
#emailResult {
	display: none;
}

/*Media Queries*/

@media screen and (max-width: 1150px) {
	#FieldsContainer {
		font-size: 16px;
	}
}

@media screen and (max-width: 1115px) {
	#userErrorMessage p,
	#passwordErrorMessage p,
	#emailErrorMessage p {
		font-size: 10px;	
	}
}

/*Tablets*/
@media screen and (max-width: 1024px) {
	#Logo {
		display: none;
	}
	
	#LogoMedium {
		display: block;
	}

	#LogoSmall {
		display: block;
	}

	#JoinNow {
		display: none;
	}

	#JoinNowSmall {
		display: block;
	}

	#JoinNowSmall2 {
		display: block;
	}

	#BioHeader h1 {
		float: none;
		width: 100%;
		text-align: center;
	}

	#BioHeader h2 {
		float: none;
		width: 96%;
		text-align: center;
	}

	.OneHeader {
		height: 87%;
	}
	
	.TwoHeaders {
		height: 72%;
	}
	
	.ThreeHeaders {
		height: 65%;
	}
	
	.FourHeaders {
		height: 56%;
	}

	#Form {
		height: 550px;
	}

	#ModelDescription {
		height: 550px;
	}
	
	.row {
		margin-bottom: 0;
	}
	
	.row > label,
	.row span {
		float: none;
		display: block;
		margin: 3px auto;
		width: 98%;
		text-align: center;
	}

	.row > input {
		width: 99%;
		margin-left: 0;
	}

	.row > select {
		width: 100%;
		margin-left: 0;
	}

	#RadioButton {
		float: none;
		margin: 8px auto;
		width: 80%;
		padding-left: 20%;
	}
	
	#userResult,
	#passwordResult,
	#emailResult {
		margin: 10px 0 0 47%
	}
	
	#userErrorMessage ,
	#passwordErrorMessage ,
	#emailErrorMessage {
		bottom: 0;
		right: 0;
	}	
}

@media screen and (max-width: 1000px) {
	#SignMeUp {
		width: 260px;
		height: 50px;
		background-image: url(/images/joinNowExtraSmall.png);
	}
}

@media screen and (max-width: 900px) {
	#ModelDescription {
		width: 60%;
	}
	#Form {
		width: 38%;
	}
}

/*Smartphones landscape mode*/
@media screen and (max-width: 768px) {
	#MagazineContainer {
		float: none;
		margin: 0 auto 10px;
		width: 100%;
	}

	#RelatedContent {
		float: none;
		margin: 0 auto;
		width: 100%;
	}

	#ModelDescription {
		float: none;
		margin: 0 auto;
		width: 100%;
	}

	#Form {
		float: none;
		margin: 10px auto;
		width: 100%;
		height: auto;
	}

	.tittle {
		width: 25%;
	}

	.row > label,
	.row span {
		float: left;
		width: 28%;
		text-align: right;
	}

	.row >  input {
		margin-left: 3%;
		width: 60%;
	}

	.row >  select {
		margin-left: 3%;
		width: 60%;
	}

	#RadioButton {
		float: left;
		margin-left: 3%;
		width: 65%;
		padding-left: 0;
	}

	#SignMeUp {
		width: 284px;
		height: 53px;
		background-image: url(/images/jButton.jpg);
	}

	#userResult,
	#passwordResult,
	#emailResult {
		margin: 0 0 0 5px;
	}
	
	#userErrorMessage p,
	#passwordErrorMessage p,
	#emailErrorMessage p {
		font-size: 13px;	
	}
	
	#userErrorMessage ,
	#passwordErrorMessage ,
	#emailErrorMessage {
		bottom: -20px;
		right: 7%;
	}

}

/*Smartphones portrait mode*/
@media screen and (max-width: 450px) {
	#LogoMedium {
		display: none;
	}

	.row > label,
	.row span {
		float: none;
		display: block;
		margin: 3px auto;
		width: 98%;
		text-align: center;
	}

	.row > input {
		width: 98%;
		margin-left: 0;
	}

	.row > select {
		width: 99%;
		margin-left: 0;
	}

	#RadioButton {
		float: none;
		margin: 8px auto;
		width: 80%;
		padding-left: 20%;
	}

	#Form {
		height: auto;	
	}
	
	.jackbox-close,
	.jackbox-fs {
		position: static !important;
	}
	
	#userResult,
	#passwordResult,
	#emailResult {
		/*display: block;*/
		margin: 10px 0 0 47%;
	}
	
	#userErrorMessage ,
	#passwordErrorMessage ,
	#emailErrorMessage {
		bottom: 0;
		right: 0;
	}
	
	#userErrorMessage p,
	#passwordErrorMessage p,
	#emailErrorMessage p {
		font-size: 13px;
	}
}

@media screen and (max-width: 380px) {
	#userErrorMessage p,
	#passwordErrorMessage p,
	#emailErrorMessage p {
		font-size: 10px;
	}
	#SignMeUp {
		width: 260px;
		height: 50px;
		background-image: url(/images/joinNowExtraSmall.png);
	}
	.ThreeHeaders {
		height: 58%;
	}
	.FourHeaders {
		height: 45%;
	}
}