body{
  font-family: 'Roboto', sans-serif;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.titulo{
  margin-top: 5%;
  font-size: clamp(1.5rem, 2.5vw, 6rem) ;
  font-family: 'Lulo Clean One Bold';
  color: rgb(6, 55, 109);
}



.contacto {
  background:  url("../img/imagen-contacto.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width:55%;
  margin: 0px auto;
  padding-bottom: 30%;
}


.grid-container>* {
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template:
      "header" auto
      "navbar" auto
      "section16" auto
      "section17" auto
      "section18" auto
      "footer";

  .header {
      grid-area: header;
      background-color: rgba(255, 255, 255, 0.74);
  }

  .navbar {
      grid-area: navbar;
      background-color: rgba(255, 255, 255, 0.74);
  }


 .section16 {
  grid-area: section16;
  background-color: rgb(255, 255, 255);
}

.section17 {
    grid-area: section17;
    
 }

.section18 {
      grid-area: section18;
      background-color: rgb(6, 55, 109);
      padding-top: 2%;
}

.footer {
  grid-area: footer;
  background-color: rgb(255, 255, 255);
}

@media (min-width:576px) {
  grid-template:
      "header header header" auto
      "navbar navbar navbar" auto
      "section16 section16 section16" auto
      "section17 section17 section17" auto
      "section18 section18 section18" auto
      "footer footer footer" 
}


@media (min-width:768px) {
  grid-template:
  "header header header" auto
  "navbar navbar navbar" auto
  "section16 section16 section16" auto
  "section17 section17 section17" auto
  "section18 section18 section18" auto
  "footer footer footer"  
}


@media (min-width:1024px) {
  grid-template:
  "header header header" auto
  "navbar navbar navbar" auto
  "section16 section16 section16" auto
  "section17 section17 section17" auto
  "section18 section18 section18" auto
  "footer footer footer" 
}


@media (min-width:1200px) {
  grid-template:
  "header header header" auto
  "navbar navbar navbar" auto
  "section16 section16 section16" auto
  "section17 section17 section17" auto
  "section18 section18 section18" auto
  "footer footer footer"  
}

}





.contact_form{	
	width: 100%; 
  height: auto;
  margin: 5% auto;
	border-radius: 10px;  
	padding-bottom: 10%;  
  background-color: #738cd11e; 
  padding-left: 2%; 
  padding-right: 2%;
  padding-top: 5%;
}


input{
	background-color: #fbfbfb; 
	width: 100%; 
	height: 40px; 
	border-radius: 5px;  
	border-style: solid; 
	border-width: 1px; 
	border-color: rgb(6, 55, 109);
	margin-top: 10px;  
	padding-left: 10px;
  margin-bottom: 20px; 
}


textarea{
  background-color: #fbfbfb; 
	width: 100%; 
	height: 100px; 
	border-radius: 5px;  
	border-style: solid; 
	border-width: 1px; 
	border-color: rgb(6, 55, 109); 
	margin-top: 10px;  
	padding-left: 10px;
  margin-bottom: 10px; 
  padding-top: 15px; 
}


label{
  display: block; 
	float: center;
  color: rgb(6, 55, 109);
}


.button{
	height: 100%; 
	padding-left: 5px;
	padding-right: 5px; 	
	margin-bottom: 20px; 
	margin-top: 10px; 	
	text-transform: uppercase;
	background-color: rgb(6, 55, 109); 
	border-color: #9e9bbd; 
	border-style: solid; 
	border-radius: 10px;	
	width: 20%;   
  cursor: pointer;
  color: white;
  font-family: 'Roboto', sans-serif;
}



.aviso{
	font-size: 13px;  
	color: #0e0e0e;  
}



::-webkit-input-placeholder {
 color: #a8a8a8;
}


::-webkit-textarea-placeholder {
 color: #a8a8a8;
}


.formulario input:focus{
	outline:0;
	border: 1px solid #97d848;
}


.formulario textarea:focus{
	outline:0;
	border: 1px solid #97d848;
}


@media (min-width: 576px) {
  body{background: rgb(255, 255, 255);}
  
  .identifica{
    background: rgb(0, 255, 0);
  }
  
  }


@media (min-width: 768px) {
  body{background: rgb(255, 255, 255);}
  
  .identifica{
    background: rgb(38, 0, 255);
  }
  
  }


@media (min-width: 1024px) {
  body{background: rgb(255, 255, 255);}
  
  .identifica{
    background: rgb(255, 0, 0);
  }

  }

  @media (min-width: 1200px) {
    body{background: rgb(255, 255, 255);}
    
    .identifica{
      background: rgb(255, 0, 0);
    }
    
    .img4{
      width:38%; 
      margin: 0px auto;
    }


    }