body{
	margin:0;
	opacity:0;
	transition:opacity .2s ease-in-out;
	font-family:'Roboto',sans-serif;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
button, a, label{
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#totalCont{
	display:block;
	position:relative;
	width:100%;
	margin:0 auto;
	min-height:100vh;
	background-image:url('../resources/web/ciberComercioBG_light.jpg');
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}
	#twoPannelsCont{
		display:flex;
		width:100%;
		height:100vh;
		min-height:700px;
	}
		.homePannel{
			width:50%;
			height:100%;
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
		}
		.homePannel.left{
			background-image:url('../resources/web/homeTextBG.jpg');
			background-position:center center;
			background-repeat:no-repeat;
			background-size:cover;
			background-color:rgba(74,165,224,1);
		}
			.textHomeCont{
				width:calc(100% - 40px);
				max-width:540px;
				text-align:center;
				color:#ffffff;
			}
				.textHomeCont > img{
					margin-bottom:20px;
				}
				.textHomeCont > h1{
					font-size:50px;
					font-weight:800;
					margin:10px 0 0 0;
					font-family:'Orbitron',sans-serif;
				}
				.textHomeCont > h4{
					font-size:30px;
					font-weight:400;
					margin:0;
					font-family:'Orbitron',sans-serif;
				}
				.textHomeCont > p{
					font-size:18px;
					line-height:24px;
				}
		.homePannel.right{
			
		}
			#loginCont{
				position:relative;
				display:block;
				display:flex;
				flex-direction:column;
				align-items:center;
				width:100%;
				max-width:500px;
				border:solid #3d8eb8 2px;
				border-radius:7px;
				background-color:#ffffff;
				padding:20px;
				box-sizing:border-box;
				background-color:#ffffff;
				box-shadow:0 0 4px rgba(0,0,0,0.1);
			}
				#loginCont #otherInputs{
					overflow:hidden;
					height:auto;
					max-height:0;
					transition:max-height .5s ease-in-out;
				}
				#loginCont > img{
					width:50px;
					height:auto;
				}
				#loginCont > h2{
					margin:10px 0 20px 0;
					color:#4aa5e0;
					font-size:28px;
					font-family:'Orbitron',sans-serif;
				}
				#loginCont input{
					width:100%;
					height:auto;
					background-color:#ffffff;
					border:solid #4aa5e0 2px;
					border-radius:7px;
					margin-bottom:10px;
					font-size:22px;
					font-weight:400;
					box-sizing:border-box;
					padding:20px;
					transition:border .2s ease-in-out;
				}
				
				#loginCont .loginButton{
					width:100%;
					height:auto;
					background-color:#4aa5e0;
					color:#ffffff;
					border:none;
					border-radius:7px;
					margin-bottom:10px;
					font-size:20px;
					font-weight:400;
					box-sizing:border-box;
					padding:20px;
					cursor:pointer;
					transition:opacity .2s ease-in-out;
				}
				#loginCont button:hover{
					opacity:.8;
				}
				#userLogin,#userReload{
					background-color:#3d8eb8 !important;
					display:none;
				}
			.homePannel.right > img{
				width:calc(100% - 40px);
				max-width:660px;
				height:auto;
				margin-top:50px;
			}
	#questionNumberCont{
		position:relative;
		width:100%;
		height:auto;
		display:flex;
		justify-content:space-between;
	}
		.aditionalInfo{
			display:flex;
			width:auto;
			height:70px;
			background-color:#3d8eb8;
			font-size:20px;
			font-weight:600;
			color:#ffffff;
			padding:20px;
			align-items:center;
			box-sizing:border-box;
		}
	#questionsAndImageCont{
		display:flex;
		position:relative;
		width:100%;
		max-width:1750px;
		height:auto;
		margin:80px auto 30px auto;
		padding:20px;
		box-sizing:border-box;
	}
		#imageCont{
			width:500px;
			height:auto;
			flex-shrink:0;
			flex-grow:0;
			display:flex;
			align-items:center;
		}
			#imageCont > img{
				width:100%;
				height:auto;
			}
		#questionsCont{
			width:100%;
			height:auto;
			padding-left:100px;
			box-sizing:border-box;
			display:flex;
			flex-direction:column;
			justify-content:center;
		}
			#questionsCont > p{
				font-size:25px;
				color:#4aa5e0;
				font-weight:700;
			}
			#quetionTitle{
				font-size:40px;
				color:#222;
				font-weight:900;
			}
			#answersCont{
				display:flex;
				flex-direction:row;
				flex-wrap:wrap;
				align-items:center;
				justify-content:center;
				padding:40px;
				box-sizing:border-box;
			}
				.answerRow{
					position:relative;
					width:100%;
					height:auto;
					margin-bottom:10px;
				}
				.answerRow.smallColumn{
					width:calc(100% / 7);
					margin-right:10px;
				}
					#answersCont input{
						-webkit-appearance:none;
						position:absolute;
						left:0;
						top:0;
						width:100%;
						height:100%;
						border:solid #e2e2e2 1px;
						background-color:transparent;
						transition:border .2s ease-in-out;
						cursor:pointer;
						margin:0;
						border-radius:7px;
					}
					#answersCont label{
						display:block;
						width:100%;
						height:auto;
						padding:20px;
						box-sizing:border-box;
						font-size:22px;
						font-weight:600;
						border-radius:7px;
						background-color:#ffffff;
						color:#444;
						text-align:center;
						transition:color .2s ease-in-out;
						box-sizing:border-box;
						cursor:pointer;
						z-index:10;
						box-shadow:0 0 4px rgba(0,0,0,0.1);
					}
					#answersCont input:checked{
						border-color:#3d8eb8;
						border-width:4px;
						
					}
					#answersCont input:checked + label{
						color:#3d8eb8;
					}
			#buttonsCont{
				display:flex;
				justify-content:space-between;
				padding:0 40px;
				box-sizing:border-box;
			}
				.quizButtons{
					width:calc(50% - 20px);
					font-size:20px;
					font-weight:600;
					padding:20px;
					box-sizing:border-box;
					border:none;
					border-radius:7px;
					cursor:pointer;
					box-shadow:0 0 4px rgba(0,0,0,0.1);
					transition:opacity .2s ease-in-out;
				}
				.quizButtons:hover{
					opacity:.8;
				}
				.quizButtons.prev{
					background-color:#dbdbdb;
					color:#7c7878;
					visibility:hidden;
				}
				.quizButtons.next{
					background-color:#4aa5e0;
					color:#ffffff;
				}

#formBG{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.8);
	overflow:auto;
	display:none;
	opacity:0;
	transition:opacity .2s ease-in-out;
}
	#formCont{
		position:relative;
		margin:70px auto;
		width:100%;
		max-width:560px;
		height:auto;
		padding:20px;
		background-color:#fff;
		border:solid #4aa5e0 2px;
		box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
		border-radius:10px;
		text-align:center;
		font-size:16px;
		font-weight:normal;
		color:#aa0000;
		box-sizing:border-box;
	}
		.formClass{
			display:none;
			color:#4aa5e0;
			font-size:18px;
		}
		.okButton{
			width:200px;
			background-color:#4aa5e0;
			color:#ffffff;
			font-size:16px;
			font-weight:600;
			padding:10px;
			cursor:pointer;
			margin:20px auto 0 auto;
			border-radius:7px;
		}

#ajaxLoaderCont{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.8);
	display:none;
	opacity:0;
	z-index:2;
	transition:opacity .2s ease-in-out;
}
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
	#ajaxLoaderSpinner{
		position:absolute;
		left:50%;
		top:40%;
		width:150px;
		height:150px;
		margin-left:-75px;
		margin-top:-75px;
		background-image:url(../resources/web/loaderSpinnerBlue.png);
		background-repeat:no-repeat;
		background-size:100%;
		font-family:helvetica,arial,sans-serif;
		font-size:40px;
		font-weight:normal;
		padding-top:0px;
		text-align:center;
		-webkit-animation:spin 4s linear infinite;
		-moz-animation:spin 4s linear infinite;
		animation:spin 4s linear infinite;
	}

@media (max-width:1200px){
	#imageCont{
		width:200px;
	}
	#quetionTitle{
		font-size:32px;
	}
	#questionsCont{
		padding-left:20px;
	}
}
@media (max-width:1040px){
	#twoPannelsCont{
		flex-direction:column;
	}
	.homePannel{
		width:100%;
	}
	.textHomeCont > img{
		margin-top:40px;
		width:150px;
		height:150px;
	}
	.homePannel.left{
		padding-bottom:50px;
	}
	#loginCont{
		margin-top:70px;
		margin-bottom:50px;
	}
}
@media (max-width:850px){
	#imageCont{
		display:none;
	}
	#quetionTitle{
		font-size:28px;
	}
	#questionsCont{
		padding-left:0;
	}
}
@media (max-width:650px){
	#questionsAndImageCont{
		margin: 20px auto 30px auto;
	}
	#quetionTitle{
		font-size:22px;
	}
	#questionNumberCont{
		flex-direction:column;
	}
	#blockInfo{
		justify-content:center;
	}
	#questionInfo{
		background-color:#4aa5e0;
		justify-content:center;
	}
	#answersCont{
		padding:40px 10px 10px 10px;
	}
	.selectableAnswer{
		font-size:16px !important;
	}
	.quizButtons{
		width:calc(50% - 10px);
		font-size:14px;
	}
	#buttonsCont{
		padding:0 10px;
	}
	#loginCont{
		max-width:350px;
	}
	#loginCont > h2 {
		font-size:19px;
	}
	#loginCont input {
		font-size:18px;
	}
	#loginCont .loginButton {
		font-size:16px;
	}
	#formCont{
		max-width:350px;
	}
	#questionsCont > p{
		font-size:18px;
		font-weight:600;
	}
	#questionsCont > img{
		width:150px;
		height:auto;
	}
	.textHomeCont > h4{
		font-size:24px;
	}
	.textHomeCont > h1{
		font-size:40px;
	}
	.textHomeCont > p{
		font-size:14px;
		line-height:22px;
	}
	.answerRow.smallColumn {
		margin-right:5px;
	}
	#answersCont label{
	    padding: 10px;
	}
}