@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: 'Soligant';
    src: url('../font/Soligant.ttf') format('truetype'),
         url('../font/Soligant.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.containerHeader { 
    margin: auto;
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    z-index: 20;
background-color: rgba(129, 126, 125, 0.38);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
        backdrop-filter: blur(5.2px);
    -webkit-backdrop-filter: blur(5.2px);
}


.logoHeader {
    margin: auto;
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;    
}



.logoHeader h3 {
    width:9rem;
    font-family: "Host Grotesk", serif;
    font-style: normal;
    font-size: 1.5em;
    margin: auto;
    margin-left:1rem;
    color:rgb(255, 255, 255);
}

.h3Other {
font-family: 'Soligant', serif;
    font-style: normal;
      font-weight: normal;
  color:rgb(255, 255, 255);
}

.logoHeader h3 a{
     text-decoration: none;
     color:rgb(255, 255, 255);  
}
.logoHeader h3 a:hover{ 
    cursor: pointer;
}

nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 120px;
    left: 100%;
    animation: 2s;
    z-index: 6;
    color:rgb(255, 255, 255);
    background-color: rgba(129, 126, 125, 0.38);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
        backdrop-filter: blur(5.2px);
    -webkit-backdrop-filter: blur(5.2px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transform: translateZ(0);
}


.logoHeader nav ul {
    list-style: none;
    color:rgb(255, 255, 255);
    height: 40%;
}

.logoHeader nav ul li {
    font-size: 1.5em;
    font-weight: 600;
    padding: 1rem;
    color:rgb(255, 255, 255);
    
   

}

.logoHeader nav ul li:hover {
   font-family: 'Soligant', serif;
    font-style: normal;
    font-size: 1.6em;
      font-weight: normal;
}

.logoHeader nav ul a {
    text-decoration: none;
    color: #111;
    color:rgb(255, 255, 255);
}



.itemMenu {
    font-size: 3em;
    font-family: "Host Grotesk", serif;
}

.nav-number {
    font-size: 0.5em;
    line-height: 1.5rem;
    padding-right: 0.6rem;
    padding-bottom: 1.8rem;
    vertical-align: text-top;
    font-family: "Host Grotesk", serif;
    font-weight: 200;

}

.hambMenu {
    color:rgb(255, 255, 255);
    font-size: 24px;
    margin-top: -0.5rem;
    margin-right: 24px;
    cursor: pointer;
    animation: 2s;
    transition: all .5s ease-out;
    visibility: visible;
   transform-origin: 50% 50%;
    width:2.2rem;
    height:1.7rem;
    z-index:25;
}
 
.hambMenu.active {
    transform: rotate(360deg); 
}


.contactHeader {
    width: 100%;
    margin: auto;
    margin-top: 8em;
    position: relative;
    left: 3%;
    color: #111111; 
}
  
.contactHeader h5 a{
    margin-top:30%;
    left: 0;
    font-size: 1em;
    font-family: "Host Grotesk", serif;
    font-weight: 200;
    color:rgb(255, 255, 255);
    text-decoration: none;
    position:absolute;
}

h6 {
    width: 5rem;
    margin-right: 32px;
    font-size: 0.8em;
    font-family: "Host Grotesk", serif;
    font-weight: 100;
    color:rgb(255, 255, 255);
    padding-top:0.5rem;
}

.socialHeader{
    margin: auto;
    margin-left:1.5%;
}
.socialHeader a {
    text-decoration: none;
}

.socialHeader a:hover  h6 {
    font-weight: 600;
     text-decoration: none;
     font-size:1em;
     font-family: 'Soligant', serif;   
}

.muestre {
    left: 0%;
    height:100vh;
    background-color:rgb(31, 31, 31);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
    transform: translateZ(0);
}

@media (min-width: 1270px) {
  
    .nav-number {
        display: none;
        visibility: hidden;
    }

    .hambMenu {
        display: none;
        visibility: hidden;
    }

    .contactHeader {
        display: none;
        visibility: hidden;
    }

    .containerHeader {
        width: calc(100% - 40rem);
        margin: 0;
        max-width: 758px;
        height: 80px; 
        left: 50%;
        transform: translateX(-50%);
        top: 2rem;
       position: absolute;
        background-color: rgba(134, 134, 134, 0.38);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4rem;
        backdrop-filter: blur(5.2px);
    -webkit-backdrop-filter: blur(5.2px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
    border: 2px solid rgba(230, 230, 230, 0.33);   
 }

    .logoHeader {
        width: 100%;
        height: 80px;
        margin: 0;
        padding: 2rem ;
        position:absolute;
        color:rgb(255, 255, 255);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;
        z-index: 2; 
    }
    

    .logoHeader h3 {
        font-size: 1.8em;
        letter-spacing: 0.1em;
        margin: 0;
        padding-left:1.6rem;
        width:100%;
        white-space: nowrap;
        color:rgb(255, 255, 255);
    }

    .logoHeader h3:hover{
        cursor: pointer;
        color: rgba(134, 134, 134, 0.38);
    }
    body {
        background-color: transparent;
    }

.h3Other {
    color:rgb(255, 255, 255);
}

.logoHeader h3 a{
    color:rgb(255, 255, 255);
}
    .logoHeader h3 a:hover {
        cursor: pointer;
     
    }

    nav {
        height: 120px;
        display: flex;
        width:100%;
        position:static;
        justify-content: space-between;
        align-items: center;
        margin-left: auto;
        transition: all 0.5s ease;
        flex-grow: 0;
        color:rgb(255, 255, 255);   
        background-color: transparent;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0);
        backdrop-filter: none;
    -webkit-backdrop-filter: none;
     border: 1px solid rgba(255, 255, 255, 0);
  
    }
    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 0.7em;
        font-weight: 400;
        margin: auto;
        margin-right: 40px;
        margin-left: auto;
        color:rgb(255, 255, 255);
        list-style: none;
        gap: 1.2rem;
  
    }

    nav ul li {
        margin: 0;
        display: inline-block;
        color:rgb(255, 255, 255);
        width: 4rem;
        display: flex;
        justify-content: center;
    }
   
    nav ul li:hover {
       
        font-family: 'Soligant', serif;
        font-size: 0.9em;
        width: 4rem;
        display: inline-block;
        display: flex;
        justify-content: center;
        color:rgb(129, 129, 129);    
    }
    
  
 .muestre{
    background-color:rgba(122, 122, 122, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: 0 0 0 0 rgba(31, 38, 135, 0);
     transform: translateZ(0);
     z-index:1;
   }
    
}