@import url('default.css');

.header{
    width: 100%;
    height: auto;
    position: relative;
}



.contentnav-head{
    width: 100%;
    height: auto;
    padding-top: 20px;
}

.contentnav-head img{
    width: 60%;
    margin: auto;
    display: block;
}

.contentnav-head div{
    border-top: 1px solid rgba(128, 128, 128, 0.123);
    margin-top: 20px;
}
/* --------------- */
.nav{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px;
    font-family: var(--fuenteTitle);
  }
.contNav1{
   width: 30%;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.contNav-social{
    width: 20px;
    height: 20px;
    margin-left: 13px;
    filter: invert(18%) sepia(13%) saturate(145%) hue-rotate(319deg) brightness(95%) contrast(99%);
    transition: all .5 ease-in-out;
    cursor: pointer;
}

.contNav-social:hover{
    filter: invert(100%) sepia(18%) saturate(7361%) hue-rotate(304deg) brightness(88%) contrast(63%);
    transition: all .5 ease-in-out;
}

.contNav2{
    width: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
 }

 .iconMenu{
    width: 30px;
    height: 30px;
    margin-right: 13px;
    cursor: pointer;
    transition: all .5s ease-in;
 }

 .iconMenu:hover{
    transform: scale(1.1);
 }

 .contNav3{
    width: 100%;
    height: 100vh;
    background-color: white;
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
 }

 .contNav3-item1{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
    background-color: var(--colorPrincipal);
 }

 .LogoClose{
    width: 30%;
 }
  
  .iconClose{
    width: 40px;
    height: 40px;
    filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(331deg) brightness(103%) contrast(101%)
  }

 .contNav3-item2{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
 }

 .link{
    text-transform: uppercase;
    padding: 10px;
    text-decoration: none;
    color: var(--colorText);
    /* background-color: gray; */
    font-size: 1.4rem;
    font-weight: 500;
    transition: all .4s ease-in-out;
 }

 .link:hover{
    color: var(--colorPrincipal);
    transition: all .4s ease-in-out;
 }

 .contNav3-item3{
    width: 100%;
 }

 .iconLogin{
    width: 32%;
    padding: 0px 10px;
 }
 

 .active-link{
    color: var(--colorPrincipal);
 }
 .active-menu{
   display: flex;
 }

/* Media Querie phone Landscape */
@media screen and (min-width:576px){

}


/* Media Querie Tablet */
@media screen and (min-width:768px){
    .contentnav-head img{
        width: 25%;
    }

    .iconLogin{
        width: 20%;
        padding: 0px 10px;
     }
    
}

/* Media Querie Tablet-desktop */
@media screen and (min-width:992px){
    .contNav1{
        width: 15%;
        /* background-color: bisque; */
    }
    .contNav2{
        display: none;
     }

    .contNav3{
        width: 85%;
        height: auto;
        display: flex;
        flex-direction: row;
        position: relative;
    }
    .contNav3-item1{display: none;}
    .contNav3-item2{
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding: 0;
    }
    .link{
        font-size: 19px;
    }


    .iconLogin{
        width: 50%;
    }
}

/* Media Querie desktop */
@media screen and (min-width:1200px){
    .contentnav-head img{
        width: 20%;
    }
    .nav{
        width: 95%;
        margin: auto;
    }
    .iconLogin{
        width: 30%;
    }
    
}

/* Media Querie desktop large*/
@media screen and (min-width:1366px){
   
}