/* #1 MEDIA QUERIES */

/**** Arreglo para selector kpis ****/
@media only screen and (max-width: 1550px) {
	form#kpis ul {
		width: 80%;
	}

	section#envoltorio #contenido ul.calendario li .navegacion {
		background-size: 70%;
	}
}

@media only screen and (max-width: 1260px) {
	form#kpis ul {
		font-size: 0.85em;
		width: 90%;
	}

	form#kpis #descripcion i svg {
		height: 4em;
		width: auto;
	}

	form#kpis #descripcion h4 {
		font-size: 1.5em;
		text-transform: uppercase;
		color: #17b3ff;
		margin-top: 1em;
		margin-bottom: 0.5em;
	}

	form#kpis #descripcion p {
		font-size: 1.2em;
		color: #151638;
		margin-top: 1em;
	}

	header nav#menu ul {
		/*margin-right: 175px;*/
	}

	section#envoltorio #contenido h1,
	section#envoltorio #contenido h2 {
		margin-right: 0;
	}
}

/*panel para uso solo en horizontal*/
@media only screen and (max-width : 1024px) and (orientation : portrait) {

	#verticalAlert {
		display: block;
	}
}

/*tablet horizontal*/
@media only screen and (max-width: 1024px) {

	#inicio #banner .contenido #inscribirme p {
		font-size: 1.6em;
		bottom: .5em;
	}

	#inicio #banner .contenido h2 {
		font-size: 1.6em;
	}

	#inicio #banner .contenido h1 {
		font-size: 3.5em;
	}

	#pasos header nav {
		display: none;
	}

	form#datos_personales aside {
		height: auto;
		padding: 2em;
	}

	form#datos_personales #globo {
		display: none;
	}

	#mapa {
		height: auto;
	}

	form#localizacion {
		height: auto;
	}


	form#localizacion aside {
		height: auto;
	}

	form#localizacion .seleccion {
		background-image: url("../images/flechas.png");
	}

	form#kpis ul {
		width: 100%;
		margin: 0 auto;
	}

	form#kpis ul li {
		width: 30%;
		margin-left: 3%;
	}

	form#kpis ul li:nth-child(even) {
		margin-left: 3%;
	}

	form#kpis #selector #acciones {
		width: auto;
	}

	form#kpis #selector svg#selector-svg {
		width: 50%;
		height: 100%;
		top: 0;
		left: inherit;
		position: relative;
		clear: both;
	}

	/*menú de circuitos*/
	section#envoltorio #contenido ul.calendario {
		margin: 0;
	}

	section#envoltorio #contenido ul.calendario li {
		width: 29%;
		margin: 1em 2%;
	}

	/*menú superior*/
	header {
		height: 120px;
	}

	section#envoltorio {
		top: 120px;
	}

	header img.logo {
		height: 100px;
		right: 25px;
		top: 10px;
	}

	header nav#menu ul {
		/*margin-right: 110px;*/
		height: 100%;
	}

	header nav#menu ul li {
		padding: 5px;
		height: 100%;
		display: table;
		width: 16%;
	}

	header nav#menu ul li img {
		width: 80%;
	}

	header nav#menu ul li a {
		font-size: 1.1em;
		display: table-cell;
		vertical-align: middle;
	}

	header #area-usuario .datos {
		padding: .5em 0 .5em .5em;
		line-height: 120%;
		font-size: 1.2em;
	}

	header #area-usuario img.coche {
		width: 120px;
		top: 30px;
		left: 110px;
	}

	header #area-usuario img.equipo {
		width: 100px;
		left: 40px;
		top: 10px;
	}

	/*actividad social*/
	section#envoltorio #actividad-social .contenedor #mensajes {
		top: 150px;
	}

	section#envoltorio #actividad-social .contenedor #mensajes .mensaje {
		padding-left: 0;
	}

	section#envoltorio #actividad-social .contenedor #mensajes .mensaje .avatar {
		width: 30px;
		height: 30px;
		top: -2px;
	}

	section#envoltorio #actividad-social .contenedor #mensajes .mensaje p.cuando {
		padding-left: 40px;
		padding-top: 5px;
	}

	section#envoltorio #actividad-social .contenedor #mensajes .mensaje p.cuando span {
		display: block;
	}

	section#envoltorio #actividad-social .contenedor #comunicados {
		height: 105px;
		color: #fff;
		padding: 1em 1em 1em 3em;
	}

	section#envoltorio #actividad-social .contenedor #comunicados p {
		line-height: 100%;
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 991px) {

	#empleados {
		height: 100%;
		padding-bottom: 80px;
	}

	#empleados header {
		height: 70px;

	}

	#empleados header #user-profile {
		border: none;
	}

	#empleados header #logout {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80px;
	}


	#empleados #subpage {
		flex: unset;
		margin-left: calc(-25% - 100px);

	}

	#empleados #subpage .header {
		padding-left: 40%;
	}

	#empleados #subpage #solicitudes {
		overflow: visible;
	}

}


/*corrección de unos margenes que se lian con boostrap*/
@media only screen and (max-width: 968px) {

	#inicio #banner .contenido #inscribirme {
		height: auto;
		top: 1em;
		margin-top: 0;
	}

	form#formacion .izquierda .onoffswitch {
		margin: 1em auto 2em;
	}

	form#formacion select {
		margin: 1em auto 2em;
		max-width: 280px;
	}

	.modal-body {
		text-align: center;
		overflow: scroll;
		height: 354px;
	}

}

/*tablet vertical o móvil horizontal*/
@media only screen and (max-width: 768px) {

	#inicio #banner .contenido h1 {
		font-size: 2em;
	}

	#inicio #banner .contenido #inscribirme {
		right: 1em;
	}

	#inicio #banner .contenido #inscribirme .stars {
		margin: 0 auto;
	}

	#pasos header img.logo-facebook {
		display: none;
	}

	#genero .opcion .avatar {
		border: .5em solid #fbb232;
	}

	#genero {
		width: 80%;
	}

	#genero .opcion p a {
		font-size: 2.8em;
	}

	ul#hashtags li {
		width: 36%;
		margin: 0.5em 7%;
	}

	form#kpis #selector svg#selector-svg {
		display: none;
	}

	form#kpis #selector #acciones {
		position: inherit;
		bottom: inherit;
		left: inherit;
		clear: both;
	}

	form#kpis ul li {
		width: 47%;
		margin-left: 3%;
		font-size: 1.2em;
	}

	form#kpis ul li:nth-child(even) {
		margin-left: 3%;
	}

	form#kpis #descripcion {
		width: 60%;
		left: 20%;
	}

	form#kpis #descripcion p {
		font-size: 1em;
	}

	form#formacion aside {
		padding-top: 5em;
	}

	#intro #mar {
		display: none;
	}

	section#envoltorio {
		top: 55px;
	}

	section#envoltorio .principal {
		width: 100%;
		padding-bottom: 0;
	}

	section#envoltorio #contenido h1,
	section#envoltorio #contenido h2 {
		margin-top: 0;
	}

	section#envoltorio #contenido h1 span,
	section#envoltorio #contenido h2 span,
	section#envoltorio #contenido h2 {
		padding: 0.2em 1em !important;
	}

	header nav#menu,
	header>#area-usuario {
		display: none;
	}

	header img.logo {
		height: 50px;
		right: 0;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		top: 2px;
		display: block;
	}

	header #menuMobileOpener,
	header #socialOpener {
		display: inline-block;
	}

	header {
		height: 50px;
		/* background-color: rgba(255,255,255,.9); */
		z-index: 10;
	}

	header #area-usuario .datos {
		margin-left: 5px;
	}

	section#envoltorio #actividad-social {
		display: none;
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		width: 250px;
		z-index: 101;
		padding: 0;
	}

	section#envoltorio #actividad-social .contenedor h1 {
		display: none;
	}

	section#envoltorio #actividad-social .contenedor::after {
		border-radius: 0;
	}

	section#envoltorio #actividad-social .contenedor #mensajes {
		top: 100px;
	}

	#premios.welcome .contenido.welcomeText .imagen {
		display: none;
	}

	#premios.welcome .apartado .contenido .texto p {
		padding-bottom: 10px;
	}

	#premios.welcome .apartado .contenido .texto h4 {
		padding-bottom: 20px;
	}

	section#envoltorio #contenido ul.garage li {
		width: 45%;
		margin: 10px 2%;
	}

	#boxes header .logoHome {
		font-size: 1.5em;
		border-right: 2px solid #00893d;
		height: 100%;
		padding: 0;
		width: 13%;
	}

	#boxes header .textoDerecha {
		position: absolute;
	}

	#boxes header .textoDerecha .row .col-md-5 {
		width: 46%;
	}

	#boxes header .configuracion {
		position: relative;
		width: 54px;
	}

	.modal-body {
		text-align: center;
		overflow: scroll;
		height: 354px;
	}

}
@media only screen and (max-width: 600px) {
#empleados #subpage .header {
    align-items: self-end;
    align-items: flex-end;
    flex: 1 0 120px;
    padding-left: 0;
}

#empleados #subpage .header h1{
     margin-bottom: 15px;
}

	.modal-body {
		text-align: center;
		overflow: scroll;
		height: 400px;
	}

}


/*móvil vertical*/
@media only screen and (max-width: 480px) {

	#inicio header img.logo {
		width: 120px;
		margin: 0em 1em 1em 1em;
		background: rgba(255, 255, 255, 0.90);
		padding: 1.5em 1em 1em 1em;
	}

	#inicio header img.logo-facebook {
		width: 120px;
		height: auto;
		float: right;
		margin: 1em;
	}

	#inicio #banner .contenido h1 {
		font-size: 1.7em;
	}

	#inicio #banner .contenido h2 {
		font-size: 1.3em;
	}

	#inicio #banner .contenido #inscribirme {
		height: 60%;
		bottom: -10%;
	}

	#inicio #banner .contenido #inscribirme p {
		font-size: 1.1em;
		bottom: .5em;
	}

	#inicio #banner #reproducir {
		top: 30%;
		font-size: 6em !important;
	}

	#inicio footer p {
		padding: 2em;
	}

	#genero {
		width: 100%;
	}

	#paso #genero h1 {
		font-size: 2em;
	}

	#genero .opcion {
		padding-top: 8em;
	}

	#pasos header {
		height: 60px;
	}

	#pasos header img.logo {
		height: 50px;
		margin: 5px 1em 0;
	}

	#pasos header #seccion {
		float: right;
		padding-right: .8em;
		max-width: 180px;
		overflow: hidden;
	}

	#pasos header #seccion h1 {
		font-size: 1em;
	}

	#pasos header #seccion h2 {
		font-size: .8em;
		white-space: nowrap;
	}

	#pasos header #seccion::after {
		display: none;
	}

	form#datos_personales label {
		line-height: 120%;
		font-size: 1.6em;
	}

	form#datos_personales .form-group {
		padding: 1em 0;
	}

	form#datos_personales input[type="text"],
	form#datos_personales input[type="email"] {
		font-size: 1.1em;
	}

	form#datos_personales input[name="nombre"] {
		margin-bottom: .5em;
	}

	form#localizacion input[type="number"] {
		font-size: 1.1em;
	}

	form#datos_personales .izquierda,
	form#experiencia .izquierda,
	form#origen .izquierda,
	form#kpis .izquierda {
		padding-top: 2em;
	}

	#mapa #todas {
		bottom: 1em;
		right: 1em;
	}

	#mapa #todas img {
		width: 35px;
		height: 35px;
	}

	#pasos header a#siguiente {
		bottom: 1em;
		right: 1em;
	}

	form#localizacion label {
		line-height: 120%;
	}

	#mapa #mark {
		display: none !important;
	}

	form#kpis ul li {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}

	form#kpis ul li:nth-child(even) {
		margin-left: 0;
	}

	form#kpis #descripcion {
		width: 90%;
		left: 5%;
	}

	ul#hashtags li {
		width: 44%;
		margin: 0.5em 3%;
	}

	form#experiencia aside,
	form#origen aside {
		padding-top: 2em;
	}

	form#experiencia aside svg {
		width: 100%;
		margin-top: -1em;
	}

	form#formacion .form-group .control-label {
		line-height: 120%;
	}

	form#origen aside .cumple {
		background-position: center 15%;
	}

	form#origen ul li {
		width: 48%;
	}

	form#origen ul li:nth-child(2n) {
		margin-left: 4%;
	}

	form#kpis h3 {
		margin-bottom: 1em;
	}

	form#kpis ul li span {
		font-size: 1.5em;
	}

	form#kpis ul li span.glyphicon {
		font-size: 1em;
		top: 0;
	}

	/*Correccion para sweet alert*/
	body#pasos {
		min-height: 100%;
		height: auto;
	}

	#paso {
		height: auto;
		min-height: 85vh;
	}

	/*pamel de volteo*/
	#verticalAlert img {
		width: 250px;
	}

	#verticalAlert .texto {
		font-size: 28px;
		padding: 0 20px;
	}

	section#envoltorio #contenido ul.garage li {
		width: 100%;
		margin: 10px 0;
	}
}

/*m�vil superpeque�o vertical*/
@media only screen and (max-width: 320px) {}