/* Estos estilos pueden sobreescribir los pasados por parámetro, ya que para algunas pantallas no son los adecuados, los de los parámetros asegurarse de meterlos en las pantallas adecuadas*/

/* NOTA: hay  un bug en chrome con el scroll https://support.google.com/chrome/thread/3101009?hl=en */

/* Estílos por defecto, desde la pantalla más pequeña hasta la rimera pantalla de @media */

/* Reseteo de estilos */
body#bd
{
	/* El template.css carga despues de este y nos lo machaca sino */
	background: #FFF !important;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	overflow: visible;
	max-height: 100vh;
	max-width: 100vw;
}

/* Generales */
.flex-container
{
	line-height: 0;	
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	max-height: 100vh;
	max-width: 100vw;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
}

.flex-container > div
{
	height: 100vh;
	max-height: 100vh;
	width: 100vw;
	max-width: 100vw;
	flex: 1;
}

.flex-container form > input.visibles
{
	display: block;
	margin: 3% auto;
	border: 1px solid #CCCCCC;
	border-radius: 15px;
	font-size: 20px;
	padding: 5px;
	height: 46px;
	width: 60%;
	/* Con los paddings aplicados con este máx width conseguimos que no tenga mas de 480 px que es lo que se pidió */
	max-width: 468px;
	box-shadow: -7px 7px 10px #eae8e8;
	text-indent: 20px;
}

/* Contenedor izquierdo */

.flex-container > div.flex-left form input.button
{
	width: 61%;
	/* Con los paddings aplicados con es te máx width conseguimos que no tenga mas de 480 px que es lo que se pidió */
	max-width: 479px;
	background: #28ADCE;
	height: 60px;
	margin-bottom: 10px;
	color: #FFF;
	font-size: 28px;
	font-weight: 500;
	cursor: pointer;
}

.flex-container > div.flex-left form input.button:hover
{
	opacity: 0.5;
}

.flex-container > div.flex-left form input.button:active 
{
	opacity: 0.2;
}

.innguma-logo
{
	display: block;
	width: 50%;
	margin: 0 auto 80px;
}

.flex-container div.form-msgs
{
	width: 60%;
	/* Con los paddings aplicados con es te máx width conseguimos que no tenga mas de 480 px que es lo que se pidió */
	max-width: 468px;
	margin: auto;
}

.flex-container div.form-msgs *
{
	display: block;
}

.from-pass-remember
{
	margin: 20px auto 0;
	padding: 5px 0;
	width: 508px;
	color: #b4b4b4;
	font-size: 20px;
	text-decoration: none;
	line-height: 20px;
}

.cookies-msg
{
	margin: 18vh auto auto;
	color: #b4b4b4;
	font-size: 15px;
	line-height: 20px;
}

.flex-container > div.flex-left form p
{
	line-height: 20px;
}

.register-msg, .register-link
{
	text-align: center;
	line-height: 20px;
	font-size: 20px;
}

.register-msg
{
	color: #b4b4b4;
}

.register-link
{
	margin-top: 10px;
	text-decoration: none;
}

/* Contenedor derecho */

div.flex-right > *
{
	margin: 0px 50px 50px 16vh;
}

.flex-container > div.flex-right > h1
{
	font-weight: bolder;
}

.flex-container > div.flex-right > h2
{
	font-weight: 600;
	margin-bottom: 85px;
}

.logo-border-top
{
	display: block;
	height: 1px;
	width: 80%;
	border-top: 2px solid white;
	margin-bottom: 50px;
}

.flex-container > div.flex-right > div.corporate-logo
{
	opacity: 0.7;
	padding-top: 2vh;
}


/* Responsive no tiene sentido, nuestra plataforma es imposible visualizarla corrétamente en móviles, uso las medidas de Bootstrap */

@media screen and (max-height: 704px) 
{

	@media screen and (max-width: 992px)
	{ 
		.flex-container
		{
			display: block;
		}

		.flex-container > div
		{
			width: 100%;
		}

		.flex-container > div.flex-right > h1
		{
			font-size: 5vw;
			line-height: 11vh;
			margin-top: 4.5vh;
		}

		.flex-container > div.flex-right > h2
		{
			font-size: 2.7vw;
			line-height: 6vh;
		}

		div.flex-right > * 
		{
		    margin: 0px 50px 50px 33vh;
		}

		div.flex-right
		{
			padding-top: 5px;
			margin-top: 150px;
		}
	}
}

@media screen and (min-width: 992px) 
{
	/* Según las pruebas realizadas a partri de esta altura ya no debemos mostrar scroll */
	@media screen and (min-height: 630px)
	{
		body#bd
		{
			overflow: hidden;
		}
	}

	.cookies-msg
	{
	    margin: 5vh auto auto;
	}

	@media screen and (min-height: 630px)
	{
		.cookies-msg 
		{
		    margin: 7vh auto auto;
		}
	}

	/* NOTA: Parece que a Danel con su mini pc, con una resolución de 1920, el navegador dice en cambio que la pantalla es de 1280x720, pero finalmente parece que aplica esta media de 992. ¿? Ni idea */
	.flex-container > div.flex-left .innguma-logo-container 
	{
	    margin-top: 15vh;
	}
		
	.flex-container > div.flex-right > h1
	{
		font-size: 5.2vw;
		line-height: 10vh;
		margin-top: 14vh;
	}

	.flex-container > div.flex-right > h2
	{
		font-size: 3vw;
		line-height: 6vh;
	}

	.innguma-logo 
	{
	    margin: 0 auto 40px;
	}

	div.flex-right > * 
	{
	    margin: 0px 50px 30px 16vh;
	}



}


@media screen and (min-width: 1280px)
{

	@media screen and (min-height: 720px)
	{
		body#bd
		{
			overflow: visible;
		}

		.flex-container > div.flex-left .innguma-logo-container 
		{
		    margin-top: 7vh;
		}
			
		.flex-container > div.flex-right > h1
		{
			font-size: 5vw;
			line-height: 11vh;
			margin-top: 6vh;
		}

		.flex-container > div.flex-right > h2
		{
			font-size: 2vw;
			line-height: 6vh;
		}

		.register-msg 
		{
		    margin: 4vh auto auto;
		}

		.innguma-logo 
		{
		    margin: 0 auto 59px;
		}
	}

	@media screen and (min-height: 768px)
	{
		body#bd
		{
			overflow: visible;
		}

		.flex-container > div.flex-left .innguma-logo-container 
		{
		    margin-top: 7vh;
		}
			
		.flex-container > div.flex-right > h1
		{
			font-size: 5vw;
			line-height: 11vh;
			margin-top: 6vh;
		}

		.flex-container > div.flex-right > h2
		{
			font-size: 2vw;
			line-height: 6vh;
		}

		.cookies-msg 
		{
		    margin: 4vh auto auto;
		}
	}

	@media screen and (min-height: 800px)
	{
		body#bd
		{
			overflow: visible;
		}

		.flex-container > div.flex-left .innguma-logo-container 
		{
		    margin-top: 15vh;
		}
			
		.flex-container > div.flex-right > h1
		{
			font-size: 5vw;
			line-height: 9vh;
			margin-top: 14vh;
		}

		.flex-container > div.flex-right > h2
		{
			font-size: 3vw;
			line-height: 6vh;
			margin-bottom: 14vh;
		}

		.cookies-msg
		{
		    margin: 11vh auto auto;
		}
	}

	@media screen and (min-height: 920px)
	{
		body#bd
		{
			overflow: hidden;
		}

		.flex-container > div.flex-left .innguma-logo-container 
		{
		    margin-top: 14vh;
		}
			
		.flex-container > div.flex-right > h1
		{
			font-size: 5.5vw;
			line-height: 11vh;
			margin-top: 11.5vh;
		}

		.flex-container > div.flex-right > h2
		{
			font-size: 4vw;
			line-height: 7vh;
		}

		.cookies-msg
		{
		    margin: 21vh auto auto;
		}

		div.flex-right > * 
		{
		    margin: 0px 50px 50px 12vh;
		}
	}

	/* A partir de este tamaño  ya no hace falta el scroll*/
	@media screen and (min-height: 1084px)
	{
		body#bd
		{
			overflow: hidden;
		}

		.flex-container > div.flex-left .innguma-logo-container 
		{
		    margin-top: 14vh;
		}
			
		.flex-container > div.flex-right > h1
		{
			font-size: 6vw;
			line-height: 12vh;
			margin-top: 10vh;
		}

		.flex-container > div.flex-right > h2
		{
			font-size: 4vw;
			line-height: 7vh;
		}

		.cookies-msg 
		{
		    margin: 10vh auto auto;
		}

		div.flex-right > * 
		{
		    margin: 0px 50px 50px 12vh;
		}
	}

}



@media screen and (min-width: 1440px) 
{
	body#bd
	{
		overflow: hidden;
	}

	.flex-container > div.flex-left .innguma-logo-container 
	{
	    margin-top: 14vh;
	}
		
	.flex-container > div.flex-right > h1
	{
		font-size: 5vw;
		line-height: 11vh;
		margin-top: 12.5vh;
	}

	.flex-container > div.flex-right > h2
	{
		font-size: 2.7vw;
		line-height: 6vh;
	}

	.cookies-msg
	{
	    margin: 10vh auto auto;
	}

	/* En pantallas poco altas que se muetre el scroll */
	/* @media screen and (max-height: 1080px)
	{
		body#bd
		{
			overflow: visible;
		}
	} */
}

@media screen and (min-width: 1680px) 
{

	body#bd
	{
		overflow: hidden;
	}

	.flex-container > div.flex-left .innguma-logo-container 
	{
	    margin-top: 14vh;
	}
		
	.flex-container > div.flex-right > h1
	{
		font-size: 5vw;
		line-height: 11vh;
		margin-top: 12.5vh;
	}

	.flex-container > div.flex-right > h2
	{
		font-size: 2.7vw;
		line-height: 6vh;
	}

	.cookies-msg
	{
	    margin: 19vh auto auto;
	}	

	div.flex-right > * 
	{
	    margin: 0px 50px 50px 19vh;
	}
}

/* @media screen and (min-width: 1900px) 
{

} */