@charset "UTF-8";
/* CSS Document */

body{
	width: 100%;
	height: 100%;
	text-align: center;
}

header{
	width: 100%;
	height: 100px;
	
	
}

footer{
	margin-top: 30px;
	text-align: center;
}

h1{
	font-size: 1em;
	text-align: left;
	padding-left: 50px;
	color: white;
}

h2{
	font-family: arial;
	font-size: 3em;
	font-weight: bold;
	display: inline-block;
}

h3{
	color: white;
	font-weight: bold;
}

h4{
	color: black;
	font-weight: bold;
	font-size: 24px;
}

h5{
	font-weight: bold;
}

.logo{
	width: 100%;
	max-width: 300px;
	height: auto;
	padding-top: 50px;
	display: inline-block;
}

.perfil{
	display: inline-block;
	float: right;
	margin-right: 50px;
	margin-top: -35px;
	width: 70px;
}

.comentarios{
	margin: 50px;
}

.margenperfil{
	margin-top: 20px;
	text-align: left;
}

#wrap{
	width: 100%;
	height:100%;

}

#wrap2{
	width: 70%;
	margin: 50px;
}

.template{
	padding-left: 35px;
	padding-bottom: 10px;
}

button{
	margin-top: 20px;
	
}


.fondoheader{
	background-color: #ee3a43;
	text-align: center;
	padding-top: 5px;
	height: 70px;
	margin-bottom: 30px;
}

.semaforo-rojo{
    background:#FF0000;
    border-radius: 20px;
	width:17px;
	height:17px;
}

.semaforo-verde{
    background:#00FF00;
    border-radius: 20px;
	width:17px;
	height:17px;
}

.semaforo-amarillo{
    background:#FFFF00;
    border-radius: 20px;
	width:17px;
	height:17px;
}

.semaforo-gris{
    background:#D5D1D1;
    border-radius: 20px;
	width:17px;
	height:17px;
}

@media all and (max-width: 800px) {
 h2{
	font-family: arial;
	font-size: 3em;
	margin: 30px;
	font-weight: bold;
}

.logo{
	width: 30%;
	height: auto;
	margin: 30px;
}
}
    @media all and (max-width: 520px) {

	}

   h2{
	font-family: arial;
	font-size: 1.5em;
	text-align: center;
	padding-top: 80px;
	font-weight: bold;
}

.logo{
	width: 40%;
	height: auto;
	margin: auto;
}
}