/* ------------------------- */
/* Estilos Generales */
/* ------------------------- */
*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Open Sans', sans-serif;
body {
     background-image: linear-gradient(135deg, #fbfbfd 0%, #e2d1c3 100%);
}

.titulo {
     font-size: 55px;
     text-transform: uppercase;
     letter-spacing: 7px;
}

.galeria img {
     box-shadow: 0 8px 10px -4px rgba(0,0,0,.6);
     border-radius: 15px;
}

.materialbox-caption {
     bottom: 30px;
     right: 0;
     width: 40%;
     height: auto;
     padding: 10px;
     margin: auto;
     background: #000;
     box-shadow: 5px 5px #fff;
     font-size: 20px;
     color: rgba(0, 102, 255, 0.473);
     line-height: 28px;
}

.galeria .col {
     margin-bottom: 20px;
}

@media screen and (max-width: 600px){
     .materialbox-caption {
          width: 90%;
     }
}

@media screen and (max-width: 992px){
     .materialbox-caption {
          width: 70%;
     }
}

/*CONTACTO*/
section.formulario {
     position: relative;
     width: 100%;
     height: 100vh;
     display: grid;
     place-items: center;
     background: #0314b3;
     
     
}
section.formulario .contactForm {
     position: relative;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
     gap: 20px;
     padding: 40px;
     width: 50%;
     height: 50%;
     background: #9cdafa;
     box-shadow: 1px 9px 20px -5px rgba(0, 0, 0, 1.8);
     border-radius: 50px;
}
section.formulario .contactForm .form{
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 85%;
     margin-left: 30px;
}
section.formulario .contactForm .form form {
     width: 100%;
}
section.formulario .contactForm .form .texto h2 {
     color: #1766a3;
     font-size: 2em;
     margin-bottom: 10px;
}
section.formulario .contactForm .form .texto p {
     color: #0b426c;
     line-height: 1.5;
     margin-bottom: 20px;
}
section.formulario .contactForm .form .inputBox {
     display: flex;
     flex-direction: column;
     margin-bottom: 15px;
}
section.formulario .contactForm .form .inputBox label {
     color: #1766a3;
     font-size: 700;
}
section.formulario .contactForm .form form .inputBox input[type="text"],
section.formulario .contactForm .form form .inputBox input[type="email"],
section.formulario .contactForm .form form .inputBox textarea{
     border: none;
     background: #cbebfb;
     padding: 10px;
     border-radius: 15px;
     color: #1766a3;
     resize: none;
}
section.formulario .contactForm .form form .inputBox input[type="text"]:focus,
section.formulario .contactForm .form form .inputBox input[type="email"]:focus,
section.formulario .contactForm .form form .inputBox textarea:focus{
     outline: 2px solid #1766a3;
}
section.formulario .contactForm .form form input[type="submit"]{
     background: #1766a3;
     display: inline-block;
     text-align: center;
     width: 250px;
     padding: 10px;
     border-radius: 15px;
     color: #fff;
     letter-spacing: 1px;
     border:none;
     cursor: pointer;
     box-shadow: 1px 9px 20px -5px rgba(0, 0, 0, 0.59);
     transition: 0.3s;

}
section.formulario .contactForm .form form input[type="submit"]:hover{
     background: #0b426c;  
}
section.formulario .contactForm .info{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}
section.formulario .contactForm .info .imgBox{
     position: relative;
     width: 350px;
     height: 350px;
}
section.formulario .contactForm .info .imgBox img{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;         
}
section.formulario .contactForm .info .textBox{
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
}
section.formulario .contactForm .info .textBox .infoContact{
     display: flex;
     justify-content: center;
     align-items: flex-start;
     margin-bottom: 10px;         
}
section.formulario .contactForm .info .textBox .infoContact ion-icon{
     font-size: 2em;
     margin-right: 10px;
     color: #0b426c;         
}
section.formulario .contactForm .info .textBox .infoContact p{
     color: #0b426c;         
}
section.formulario .contactForm .info .rrss a{
     padding: 20px;
     font-size: 2em;
     color: #1766a3;
     transition: 0.3s;        
}
section.formulario .contactForm .info .rrss a:hover{
     color: #0b426c;
}
/*pantalla larga*/
@media only screen and (max-width: 1200px){
     section.formulario .contactForm{
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
}
/*laptos y tabletas*/
@media only screen and (max-width: 768px){
     section.formulario .contactForm .info{
          height: 400px;
          padding: 20px;
     }
     section.formulario .contactForm .info .imgBox{
         display: none;
     }
}
/*celulares*/
@media only screen and (max-width: 600px){
     section.formulario .contactForm .form{
          margin-left: 0px;
          width: 100%;
     }
     section.formulario .contactForm .info{
          margin-bottom: 30px;
     }
}