@font-face{
	font-family: "Gotham-Bold";
	src: url('../fuentes/gotham/GothamBold.ttf');	
	src: url('../fuentes/gotham/Gotham-Bold.otf');	
}

body,html{
	margin: 0px;
	padding: 0px;
}

body{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 14pt;
	font-family: Gotham-Bold;
	background-image: url('../../multimedia/background.png');
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

#zonaInformacion{
	width: 100%;
	height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#contenedorLogo{
	height: 40%;
	width: 80%;
	display: flex;
	justify-content: center;
}

#logo{
	/* height: 90%; */
}

#contenedorBoton{
	height: 60%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
}

#botonConocenos{
	width: 150px;
	height: 45px;
	border: 2px solid #545973;
	color: #16254C;
	background: white;
	text-decoration: none;
	text-align: center;
	display: inherit;
	justify-content: center;
	align-items: center;
}

#botonConocenos:hover{
	color: white;
	background: #16254C;
}

#zonaFormulario{
	width: 100%;
	height: 450px;
	display: flex;
	justify-content: center;
	align-items: space-around;
}

#contenedorFormulario{
	width: 80%;
	height: 400px;
        border: 2px solid #16254C;
}

#tituloFormulario{
	width: 100%;
	height: 15%;
	color: white;
	background: #16254C;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
}

#inicioSesion{
	height: 85%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	background: white;
}

input{
	width: 60%;
	height: 35px;
	border: 1px solid #16254C;
	text-align: center;
	font-family: Gotham-Bold;
	font-size: 1em;
}

#botonEnviar{
	height: 50px;
	background: #16254C;
	color: white;
	font-size: 1.2em;
	cursor: pointer;
}

@media screen and (min-width: 480px){
	#contenedorLogo{
		height: 70%;
	}
}

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

@media screen and (min-width: 767px){
    input{
        border: 2px solid #545973;
        height: 40px;
    }
}

@media screen and (min-width: 950px){
	
	body{
		flex-direction: row;
		height: 730px;
	}

	#zonaInformacion{
		width: 50%;
		height: 580px;
	}

	#zonaFormulario{
		width: 50%;
		height: 580px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#contenedorLogo{
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		height: 50%;
	}

	#logo{
		height: 45%;
	}

 	#contenedorBoton{
 		height: 50%;
 		justify-content: flex-end;
 		align-items: flex-start;
 	}

 	#botonConocenos{
 		width: 180px;
 		height: 35px;
 		margin-right: 20px; 
 	}

 	#contenedorFormulario{
 		width: 50%;
 	}
}