@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{box-sizing: border-box}
body{ background-image: url("../IMG/fondopagina1.jpeg");
    
  background-color: #f3eed9;
    
        font-family: 'Roboto', sans-serif;
}
a{text-decoration: none}

header{ border-style: dashed; padding: 0px ;position: fixed;top: auto; padding-left: 2;z-index: 2; background:black;width: 100%;}
header .container img{width: 100px; padding-left: 10px;}
header .container{display: flex; ; align-items: center}
header .container a{ font-size: 25px; margin: 40px ; color:rgb(255, 255, 255)}

.logoutsem{ width: 80px; height: 70px; position: absolute; margin-left: 20px;

}
* {
	
	padding:0px;
}

#header {
	margin:auto;
	width:500px;
	font-family:Arial, Helvetica, sans-serif;
}
.nav{
	height: 35px; width: 780px; margin-left: 100px;
}

ul, ol {
	list-style:none;
}

.nav > li {
	float:left;
}

.nav li a {
	
	background-color:rgb(0, 0, 0);
	color:#fff;
	text-align: center;
	text-decoration:none;
	padding:10px 30px;
	display:block;
}

.nav li a:hover {
	background-color:#385e08;
}

.nav li ul {
	display:none;
	position:absolute;
	min-width:160px;
}

.nav li:hover > ul {
	display:block;
}

.nav li ul li {
	position:center;
}

.nav li ul li ul {
	right:-140px;
	top:0px;
}
.container{width: auto; margin: auto; padding-left: auto ; position:center; border-block-end-style: solid;border-bottom: 100%}



#inicio{background-color: #ffffff;
    position: center; font-size: 50px;}
#inicio img{width: calc(100% - 10px);
	padding: 100px;
	margin: 10px;
	margin-top: auto;
	font-size: 10px}
#inicio .bloque-inicio{position: absolute; top:10%; text-align: center; left: 10%; width: 10px; margin-left: -250px}
#inicio .bloque-inicio-h1{color: rgb(7, 7, 7); text-align: center;letter-spacing: 5px; border-bottom: 1px solid rgb(0, 0, 0); font-size: 80px; margin-bottom: 0px;}
#inicio .bloque-inicio p{color: rgb(255, 255, 255); font-size: 20px}
.boton{color:white;font-weight: bold; padding: 20px 20px}
.boton.boton-rojo{background: #85aa55 ;padding: 25px; border-radius: 10px;}
/*seccion nosotros*/
.seccion{padding: 150px 0}
#titulonosotros{font-size: 60px; text-align: center; font-family: sans-serif;}
#nosotros{background-color:#faefbf(192, 221, 247)}
#nosotros p{color: rgb(255, 0, 0);font-size: 30px; text-align: center; padding-top: 50px;padding-bottom: 50px}
h1{font: white;}
/*servicios*/

#servicios{background-color: rgb(0, 0, 0)}
.containerser{ object-position: 100px}
.row{display: flex; flex-wrap: wrap; margin: 15px 1px; }
#tituloservicios{text-align: center; letter-spacing: 2px; font-size: 25px;}
#titulodep{ font-size: 50px;font-family: arial;letter-spacing: 3px;text-align: center;}
.columna{padding: 0 20px}
.columna-33{width: 33.33%}
.bloque-contenido-servicio{ color: rgb(255, 255, 255); font-size: 27px; font-family:monospace; text-align:center}
#servicios .bloque-servicio .bloque-servicio-img img{width: 100%}
.boton-blanco{background:rgb(5, 5, 5); color: rgb(0, 0, 0); text-align: center}
.cuadrado-perfecto{width: 100%; padding-bottom: 100%; position: relative}
.cuadrado-perfecto img{width: 100%; height: 100%;object-fit: cover; object-position: center; position: absolute;top:0;left: 0}
#servicios .cuadrado-perfecto{padding-bottom: 55.55%}
.boton{background: 	#012001;border-radius: 15px;border: 1px solid rgb(255, 255, 255);padding: 10px;text-align: center}
/*

/*seccion galeria*/
#titulogaleria{text-align: center; letter-spacing: 5px}
#textogaleria{text-align: center; font-size: 18px;background-color: black;color:white; height: 60px;margin:0px}
.container-fluit{width: 100%; padding-right: -15px; padding-left: -15px}
#galeria h4{position: absolute; top: 40%; color: rgb(255, 255, 255); text-align: center; width: 100%; font-size: 20px; text-transform: uppercase; letter-spacing: 5px; }
#galeria img{filter: grayscale(1);}
#galeria .cuadrado-perfecto:hover img{filter: grayscale(0);}
#galeria .cuadrado-perfecto:hover h4{display: none;}
.video{margin-bottom: 30px; margin-top: 30px}

/*seccion contacto*/
#titulocontacto{padding-left: 150px; letter-spacing: 5px;}
#contacto{position: relative;}
iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
.columna-50{width: 50%}
.empujar-50{margin-left: 800px;}
#contacto form{background-color:rgb(27, 190, 255);padding: 30px;}
#contacto form .form-block{width: 100%;margin-bottom: 10px;}
#contacto form .form-block .form-control{width: 100%;padding: 5px}
#contacto .boton-negro{width: 100%;background-color: black; font-weight: bold;}
#contacto .boton-negro:hover{background-color: white;color: black}

/*seccion footer*/
.row{
	text-align: center;
}
footer{background-color: rgb(10, 10, 10); color:white;text-align: center; padding-top: 30px}
footer a{text-decoration: none;color: white}
footer ul{list-style: none}
footer ul li{margin-bottom: 10px; margin-left: 5px}
.columna-25{width: 25%}
footer img{width: 100%}
footer .barra-footer{background-color: rgb(0, 0, 0);color:white;padding: 25px}