*{
    box-sizing: border-box;
}
body{
	background: #185269;

	font-family: Open Sans;
	color: white;

    display: flex;
    flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
section.img-triangulo{
	display: none;
}
section.espacio_login{
	width: 88%;
	margin: 5%;	
}
section figure img{
	width: 100%;
	display: flex;
	justify-content: center;
}
.intro{
	width: 80%;
	margin: 9%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}
section.espacio_login div.intro span{
	font-size: 20px;
	line-height: 28px;
	flex-direction: center;
}
.span_strong{
	font-weight: bolder;
}

form span{
	font-weight: 200;
	margin-bottom: 10px;
	margin-top: 20px;
}
form input{
	height: 30px;
	border: none;
	border-radius: 10px;
	margin: 5px 0px;
	width: 50%;
}
form input#email{
	width: 100%;
}
form div.login{
	display: flex;
	flex-direction: row;
}
input.submit_buttom{
	width: 50%;
	background: #9BC13C;
	color: white;
	font-weight: bolder;
	margin-left: 5px;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	cursor: pointer;
}
input.submit_buttom:hover{
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);	
}


div.registro{
	font-weight: 200;
}
div.registro a{
	padding: 12px;
	background: #00BFF2;
	color: white;
	text-decoration: none;
	font-weight: bolder;
	border-radius: 12px;
	margin-top: 5px;
}

div.recuperar_datos span{
	font-size: smaller;
	font-weight: 200;
}
div.recuperar_datos a{
	padding: 12px;
	color: #9BC13C;
	text-decoration: none;
	font-weight: bolder;
	font-size: large;
	margin-top: 5px;
}


@media screen and (min-width: 767px){
	body{
		display: flex;
		flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
	}
	section.img-triangulo{
		display: inline;
		width: 50%;
		height: 100%;
		opacity: 0.6;
		position: absolute;
		left: 0px;
		z-index: 8;
	}
	section.img-triangulo figure{
		margin-left: 0px;
		width: 450px;
	}
	section.espacio_login{
		width: 50%;
		
		position: absolute;
		right: 0px;
		z-index: 999;
	}
}


@media screen and (min-width: 950px){
	body{
		display: flex;
		flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
	}
	section.img-triangulo{
		display: inline-block;
		width: 50%;
		opacity: 1;
	}
	section.img-triangulo figure{
		margin-left: 0px;
	}
	section.espacio_login{
		width: 50%;
	}
}