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

/* reseteo de propiedades*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}


html {font-size: 62.5%; overflow-x: hidden; font-family: 'Roboto', sans-serif;}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;}

/**/
#head-lopd{width: 100%; height: 400px;}
#cabecera-lopd{
	display: flex;
	width: 100%;
	height: 400px;
	justify-content: center; /* alinea en la horizontal*/
	align-items: center; /* alinea en la vertical*/
	position: relative;
	background: linear-gradient(#00b2bb,#1a428a);
	z-index: 0; /* Podemos colocar un fondo de color, ya sea sólido o degradado sobre el video de fondo, eliminanzo la propiedad z-index y colocando canal alfa al background*/

}
#video-bg-lopd{position: absolute; width: 100%; height: 400px; object-fit: cover; /* cubre todo el espacio para que no queden margenes ni recortes al escalar*/ top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -10;}
#cabecera-lopd #contenido-lopd{max-width: 1000px; height: auto; margin: auto; position: relative;}
#cabecera-lopd #contenido-lopd #logo-lopd{width: 40%; text-align: center; margin-top: 10px; margin-left: auto; margin-right: auto;}
#logo-lopd img{width: 100%;}


#seccion1-contenido-lopd{max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 50px; padding-left: 30px; padding-right: 30px; background-color: #2A2F34;}
#seccion1-caja-lopd{width: 100%; height: auto; display:block; visibility: visible;}
#seccion1-contenido-lopd .caja1-lopd{width: 100%; padding-top: 80px; padding-bottom: 80px;}
.caja1-lopd .contenedor-lopd-titulo-imagen{width: 50%; padding-top: 20px;}
.caja1-lopd .titulo-imagen-lopd{width: 13%; display: inline-block; vertical-align: middle;}
	.caja1-lopd .titulo-imagen-lopd img{width: 100%;}
.caja1-lopd .titulo-texto-lopd{width: 76%; display: inline-block; vertical-align: middle;}
	.caja1-lopd h1{font-weight: 700; font-style: italic; font-size: 2.2rem; color: #fff; text-align: left; line-height: 3rem; letter-spacing: 0.05rem; margin-top: 40px; margin-bottom: 30px;}
	.caja1-lopd .titulo-texto-lopd h2{font-weight: 700; font-style: italic; font-size: 2rem; color: #ffea9f; text-align: left; line-height: 2rem; padding-left: 15px; letter-spacing: 0.05rem;}
.caja1-lopd .parrafo-lopd{width: 100%;}
	.parrafo-lopd p{font-weight: 300; font-size: 1.2rem; color: #ffea9f; text-align: justify; line-height: 2rem; padding-top: 15px; padding-bottom: 10px;}
.caja1-lopd .pie-lopd{width: 50%;}
	.pie-lopd img{width: 100%;}


@media only screen and (max-width:800px){
#cabecera-lopd #contenido-lopd #logo-lopd{width: 50%;}
}
@media only screen and (max-width:580px){
#cabecera-lopd #contenido-lopd #logo-lopd{width: 70%;}
.caja1-lopd .contenedor-lopd-titulo-imagen{width: 100%;}
.caja1-lopd .pie-lopd{width: 100%;}
}
/**/