@import "Base";


#desktopHeader {
    position: fixed;
    top: 0;
    .frn();
    .cn();
    height: 60px;
    width: 100%;
    background-color: rgba(0,0,0, 0.5);
    //border-bottom: 2px solid black;
    transition: all 300ms ease;
    z-index: 30;

    .headerGradientBorder {
        position: absolute;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: rgb(255,195,0);
        background: linear-gradient(90deg, rgba(255,195,0,0) 0%, rgba(255,195,0,0.70) 50%, rgba(255,195,0,0) 100%);
    }


    #desktopLogo {
        .c();
        height: 55px;
        width: 150px;
        //background-color: blue;

        a {
            .c();
            height: 100%;

            img {
                height: auto;
                width: auto;
            }
        }
    }

    #desktopNavbar {
        .fr();
        justify-content: space-evenly;
        height: 60px;
        min-width: 600px;
        //background-color: red;
        margin-left: 5vw;

        a {
            .c();
            padding-left: 15px;
            padding-right: 15px;
            height: 100%;
            width: auto;
            cursor: pointer;
            //padding: 15px;
            padding-top: 3px;
            color: #FFFFFF;
            font-family: 'Raleway', sans-serif;
            font-size: 16px;
            letter-spacing: 0.7px;
            font-weight: 300;
            text-decoration: none;
            //border: 1px solid red;
        }
    }

    #desktopIdioma {
        .c();
        height: 55px;
        width: 150px;
        margin-left: 5vw;
        //background-color: blue;

        a {
            .c();
            height: auto;
            margin: 10px;

            img {
                height: auto;
                width: auto;
            }
        }
    }

}




#mobileHeader {
    position: fixed;
    top: 0;
    .fr();
    align-items: center;
    height: 60px;
    width: 100%;
    background-color: rgba(0,0,0, 0.5);
    //border-bottom: 2px solid black;
    transition: all 300ms ease;
    z-index: 30;

    #mobileLogo {
        .c();
        height: 55px;
        width: auto;
        //border: 1px solid yellow;
        margin-left: 10px;
        padding-top: 3px;
        //background-color: blue;

        a {
            .c();
            height: 100%;

            img {
                height: auto;
                width: auto;
            }
        }
    }


    #burgerMenu {
        .c();
        height: 47px;
        width: 90px;
        color: white;
        cursor: pointer;
        margin-left: auto;
        //border: 1px solid yellow;
    }


    .headerGradientBorder {
        position: absolute;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: rgb(255,195,0);
        background: linear-gradient(90deg, rgba(255,195,0,0) 0%, rgba(255,195,0,0.70) 50%, rgba(255,195,0,0) 100%);
    }


}

@keyframes showMobileLeftMenu {
    from { right: -100vw; }
    to { right: 0; }
}

@keyframes hideMobileLeftMenu {
    from { right: 0; }
    to { right: -100vw; }
}

@keyframes appearBubbleMenu {
    0% { top: -70%; right: -70%; }
    25% { top: -50%; right: -50%; }
    50% { top: -30%; right: -30%; }
    75% { top: -10%; right: -10%; }
    100% { top: 0; right: 0; }
}

@keyframes hideBubbleMenu {
    0% { top: 0; right: 0; }
    25% { top: -10%; right: -10%; }
    50% { top: -30%; right: -30%; }
    75% { top: -50%; right: -50%; }
    100% { top: -70%; right: -70%; }
}

#bubble{
    position: fixed;
    top: -130%;
    right: -70%;
    border-radius: 0;
    transition: all 0.7s;
    width: 110%;
    height: 110%;
    //background: #edbb1c;
    z-index: 9999999;
    background-color: rgba(0,0,0, 0.9);
}

#mobileNavMenu {
    position: fixed;
    top: 0;
    right: 0;
    visibility: hidden;
    .fc();
    min-height: 100vh;
    width: 100%;
    z-index: 9999999;
    transition: none !important;
    box-sizing: border-box;
    //background-color: rgba(0,0,0, 0.5);

    #barraFechar {
        .fr();
        justify-content: flex-end;
        height: 60px;
        width: 100%;

        #btnFecharNavMenu {
            .c();
            height: 100%;
            width: 90px;
            font-size: 26px;
            font-weight: 800;
            color: whitesmoke;
            font-family: 'Raleway', sans-serif;
            //border: 1px solid white;
        }
    }

}


@keyframes scrollAppearHeader {
    from { top: -63px; }
    to { top: 0; }
}

@keyframes scrollHideHeader {
    from { top: 0px; }
    to { top: -63px; }
}




@media screen and (min-width: 1024px) {
    
    #desktopHeader {
        .fr();
    }

    #mobileHeader {
        .frn();
    }


}