/*dark grey #323232*/

@font-face {
    font-family: RobotoRegular;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: RobotoLight;
    src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
    font-family: RobotoBold;
    src: url(../fonts/Roboto-Bold.ttf);
}

* {
	font-family: RobotoLight, Verdana, Sans-Serif;
	color: #4d4d51;
	margin: 0;
	padding: 0;
	border: 0;
}

#headerLogo_img {
	margin-top: 14px;
	width: 24px;
	height: 24px;
	display: block;
	background-image: url("../images/logo_32x32.png");
	background-size: 24px 24px;
	float: left;
}

select {
	font-size: 100%;
	border: 1px solid black;
}

#login-section input {
	border-bottom: 2px solid black;
	width: 100%;
	/*margin: 4% 4% 4% 4%;*/
	padding: 1% 2% 1% 2%;
}

input {
	border-radius: 0;
}

body {
	background: white;
	color: black;
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 18px;
}

h1 {
	font-family: RobotoBold;
	font-size: 180%;
	color: #212121;
}

h2 {
	font-size: 110%;
}

h3 {
	font-size: 100%;
}

.margin-auto {
	margin: 0 auto;
}

.margins {
	margin: 2% 8% 2% 8%;
}

.grey-bar {
	width: 100%;
	background-color: #323232;
	padding: 3% 2% 3% 2%;
	color: white;
	text-align: center;
}

#scrollWrapper {
	height: 100%;
	/*overflow: auto;*/
}

#menu-icon {

	background-image: url("../images/bars.png");
	width: 60px;
	height: 50px;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40% 50%;
}

@keyframes menuIN {
	from {top: -200px;}
	to {top: 40px;}
}

#hidden_menu {
	display: none;
	position: absolute;
	height: auto;
	background-color: white;
	padding: 20px;
	top: 40px;
	left: -12px;
	box-shadow: 8px 8px 3px -6px #d8d8d8;
	animation-name: menuIN;
	animation-duration: 0.2s;
	z-index: 20;
	/*border-bottom: 1px solid gray;
	border-right: 1px solid gray;*/
}

#hidden_menu ul li {
	margin: 4px;
}

header {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: white;
	margin-bottom: 4px;
	box-shadow: 0 6px 16px -6px #d8d8d8;
}

main {
	position: relative;
	width: 600px;
	margin: 0 auto;
	height: auto;
	background-color: white;
	/*overflow: hidden;*/
}

@media only screen and (max-width: 600px)
{
	main {
		width: 100%;
	}
	/*
	#menu-icon {
		width: 60px;
		height: 50px;
	}
	*/
	/*header {
		height: 50px;
	}*/

}

#leftMenu_div {
	float: left;
}
#leftMenu_button {
	background-image: url("../images/bars.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20%;
}

#headerTitle_div {
	float: left;
	margin-left: 5px;
	font-size: 95%;
	line-height: 55px;
}

#cuestionario-section {
	text-align: center;
}

#resultadoImagen {
	width: 40%;
	height: 40%;
	display: block;
	margin: 0 auto;
}

#cuestionario-section input, #libro-partes-externas-dinamica input {
	transform: scale(1.4);
	margin-right: 4%;
}

#cuestionario-section p {
	margin-bottom: 4%;
}

#cuestionario-section section {
	text-align: left;
}

#login-section {
	text-align:center;
	margin-left: 14%;
	margin-right: 14%;
}

.section-group section, #pagina-8 div {
	display: none;
}

.label {
	margin-right: 4%;
	margin-left: 4%;
	position: absolute;
	top: 30%;
	line-height: 50pt;
}

footer {
	position: relative;
	width: 120px;
	height: 8%;
	margin: 0 auto;
	margin-bottom: 0;
}

#fin-juego {
	position: absolute;
	color: white;
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(255,255,255,0.4);
	text-align: center;
	top: 0px;
}

#libroPartesExternasDinamicaInputs {
	margin: 0 auto;
	width: 260px;
}

/* BUTTONS */

#wrapper_div {
	position: absolute;
	width: 100%;
	height: 100%;
}

#mainLeft_button {
	float: left;
	width: 36px;
	height: 100%;
	background-image: url("../images/arrow_left_grey.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90%;
	visibility: hidden;
}

#mainLeft_button:active {
	background-image: url("../images/arrow_left.png");
}

#mainRight_button {
	float: right;
	width: 36px;
	height: 100%;
	background-image: url("../images/arrow_grey.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90%;
	visibility: hidden;
}

#mainRight_button:active {
	background-image: url("../images/arrow.png");
}

#userPic_menuLateral {
	display: flex;
	align-items:center;
	margin: 0 auto;
	width:120px;
	height: 120px;
	background-color: grey;
	border-radius: 50%;
	border: 1px solid black;
}

#userPic_menuLateral img {
	margin: 0 auto;
	width:120px;
	height: 120px;
	background-color: grey;
	border-radius: 50%;
	border: 1px solid black;
}

.button {
	width: 50%;
	margin: 20px auto;
	text-align: center;
	color: white;
	font-size: 0.8em;
	display: inline-block;
	padding: 4%;
	background-color: grey;
	border-radius: 10px;
	cursor: pointer;
	display: block;
}

.button:active, .button:hover {
	background-color:#323232;
}

.radioButton {
	transform: scale(3);
	margin: 0% 4% 6% 4%;
}