﻿.header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 0;
    background: var(--color-header);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 3px 6px #00000029;
}
.header__logo {
    margin: 0 10% 0 0;
    padding: 20px 0 10px;
    width: 200px;
}
.header__button {
    background: #005CB9;
    color:white;
    padding: 10px;
    display: flex;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    border: none;
}
.header__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/******/
.nav__menu {
    position: fixed;
    background: #F7F7F7;
    left: 0;
    top: 90px;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 10;
    padding: 10px;
    box-shadow: 0 3px 6px #00000029;
}
.nav__box {
    position: relative;
    cursor: pointer;
}
.nav__title {
    font-family: 'helvetica medium';
    color: var(--color-blue-strong);
    font-size: 15px;
    padding: 20px 20px 20px;
}
.nav__list {
    background: var(--color-header);
    font-family: 'helvetica regular';
    left: 0;
    z-index: 100;
    width: 100%;    
    display: none;
}
.nav__item {
    display: block;
    padding: 15px 20px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    color: #FDB44F;
}
.nav__only {
    text-decoration: none;
    color: var(--color-bue__strong);
}
.nav__redes {
    display: none;
}

.nav__box:hover > .nav__list {
    display: block;
}

.nav__languaje {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    text-decoration: none;    
}

.nav__languaje > img {
    width: 20px;
}

.nav__languaje > span {
    margin-top: 2px;
    color: var(--color-blue-strong);
}

.nav__shopcart {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    text-decoration: none;
    margin: 0 0 0 1rem;
}
.nav__shopcart .fa-layers {
    position: absolute;
}

.nav__shopcart span.fa-layers-counter {
    position: relative;
    top: -20px;
    right: -15px;
}

@media (max-width: 1044px) {
    .nav__show {
        transition: max-height 0.8s linear;
        max-height: 500px;
        overflow: hidden;
    }
    .nav__hidden {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        transition: max-height 0.8s linear;
    }
}

@media (min-width: 1044px) {
    .header {
        justify-content: center;
    }

    .header__button {
        display: none;
    }

    .header__logo {
        padding: 20px 0 0px;
    }

    .header__box {
        padding: 20px 0 0;
        justify-content: space-between;
    }

    .nav__menu {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: flex-start;
        box-shadow: none;
        padding: 0px;
    }

    .nav__item {
        color: var(--color-primary);
    }

    .nav__list {
        background: white;
        position: absolute;
        color: var(--color-primary);
        left: 0;        
        z-index: 100;
        border-top: 1px solid var(--color-gray);        
    }

    .nav__redes {
        display: flex;
        justify-content: flex-end;
        font-family: 'helvetica medium';
        font-size: 12px;
        color: var(--color-blue-strong) !important;
        padding: 0 20px 0 0;        
    }

}
