*{margin: 0; padding: 0; box-sizing: border-box;}

body {margin:0; padding: 0; background-position: center center; background-attachment: fixed;}

header {height: 40px; }
.header-content {overflow: hidden;}    
.contacto-header {display: flex; margin-right: 10px; align-items: center; float: right;}
.email,.telefono {margin-right: 10px; color: black; text-decoration: none;}
.contacto-header i { display: inline-block; margin-right: 5px;}
.banderas {margin-left: 20px; display: flex;float: left;}
.banderas img {margin-right: 10px; border-radius: 5px}

@media only screen and (max-width: 640px) {
    .banderas img {display: none; } 
    .contacto-header {justify-content: center;align-items: center;float: none;font-size: 2vw;}} 
@media (max-width: 460px){.contacto-header{font-size: small;}}
@media (max-width: 392px) {
    .navbar-brand img {max-width:170px;}
    header{height: 45px;}
    .contacto-header {display: flex; flex-direction: column ;}}
    

    nav {background-color:#cd010c;height: 120px; top: 0; width: 100%; box-shadow: 0.5px 0.5px 2px black;  z-index: 1000;} 
    .navbar-brand {position:relative;margin-left: 20px; margin-right: 120px;}
    .navbar-brand img {height: 100px; width: 230px;}
    .navbar-nav {justify-content: center;}
    .navbar-nav li  {position:relative; margin-right: 90px; text-shadow: 1px 1px 2px black; font-size: 1.25rem;}   
    .nav-link {color:aliceblue; margin-left: -30px; font-style: italic; }
    .nav-link:hover{color: #0081d8}
    .navbar-nav a:active, .navbar-nav a:focus{color: #0081d8}

    .navbar-toggler {margin-right: 2rem; border: 1px solid; }
    .navbar-collapse ul {background-color: #cd010c; justify-content: center; align-items: center; text-align: center; }
   
@media(max-width: 762px) {.navbar-collapse ul {padding-left: 5rem;}}

@media(max-width: 1200px){
    .navbar-brand {margin-right: 4rem;}
    .navbar-nav li {margin-right: 4rem;}}

@media (max-width: 1050px){
    .navbar-brand {margin-right: 2.5rem;}
    .navbar-nav li {margin-right: 2.5rem; font-size: 1rem;}
    .nosotros {margin-top: -60px;}
    .servicios {margin: -50px;}

}

@media (max-width: 800px){
    .navbar-nav li {font-size: 0.85rem;}
}

@media (min-width: 1400px){
    .navbar-nav li {font-size: 1.6rem;}}


.title {color:#ffffff;background-color: #cd010c;font-style: italic; text-align: center; text-shadow: 1px 1px 2px black; cursor: pointer; margin-top: 30px;}
.grid-wrapper .img{position: relative;height: 100%; width: 100%; overflow: hidden; align-self: center;}
.grid-wrapper .img img {height: 100%; width: 100%;object-fit: cover;}
.grid-wrapper .img:first-child{grid-column-start: span 2; grid-row-start: span 2}
.grid-wrapper .img:nth-child(2n+3){grid-row-start: span 2;}
.grid-wrapper .img:nth-child(4n+5){grid-column-start: span 2;grid-row-start: span 2;}
.grid-wrapper .img:nth-child(6n+7){grid-row-start: span 1;}
.grid-wrapper .img:nth-child(8n+9){grid-row-start: span 1;grid-column-start: span 1}
.grid-wrapper > div {display: flex; justify-content: center; align-items: center;}
.grid-wrapper > div > img {width: 100%; height: 100%; object-fit: cover; border-radius: 5px;}
.grid-wrapper {position: relative;height: 100%;width: 90%;margin: auto;padding: 45px 0;display: grid; grid-gap: 2vh; grid-template-columns: auto auto auto auto; grid-auto-rows: 200px; grid-auto-flow:dense;}

@media only screen and (max-width: 768px) { 
    .grid-wrapper {display: grid; grid-template-columns: auto auto auto;}
}

@media only screen and (max-width: 560px) {
    .grid-wrapper {display:block}
    .grid-wrapper .img {display: block; width: 100%; height: 100%; margin-bottom: 10px;}
}

footer {padding: 0.3rem 1rem 0.5rem 1rem; display: flex;  align-items: center;} 
.copyright {margin-right: 1rem; font-style: normal; display: flex; gap: 1rem; align-items: center;}
.copyright p {margin: 0;}
.ig-wrap {display: flex;align-items: center; gap: 1rem; font-style: italic; margin-left: auto;}
.ig-wrap p {margin: 0;}
footer .bi-instagram {font-size: 1.5rem;}

@media(max-width:440px) {
    .contacto {margin-top: 20px;}
    .input-wrap {grid-column: span 2;}
    .contact-buttons {grid-template-columns: 1f r; row-gap: 0.5rem; }
    .contact-heading h1 {font-size: 1.9rem; line-height: 1;}}
    .contacto .flex-container {height: 100%}
@media(max-width:356px) {
    .contact-heading a{font-size: small;}
    .contact-heading a i {display: none;}
}