/* Style The Dropdown Button */
.dropbtn {
    background-color: inherit;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    position: absolute;
    opacity:0;
    background-color: #1E1E1E;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    transition: 0.6s;
}

/* Links inside the dropdown */
.dropdown-content a {
    color : #CE9178;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #252526;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    color: #4EC8AF;
    border: 100px;
    border-bottom: #4EC8AF;
}

/*
* MENU DROPDOWN
 */
#menudropdown{
    width: 50%;
}
#menudropdown .dropbtn {
    display: inline-block;
    cursor: pointer;
}



#menudropdown .dropdown-content {
    left: 0;
    width: 0;
}
#menudropdown:hover .dropdown-content {
    width: 20vw;
    opacity: 1;
}

#menudropdown .dropdown-content a{
    padding: 5%;
    line-height: 2;
}
#menudropdown .dropdown-content a:hover{
    color: #4EC8AF;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #CE9178;
    margin: 6px 0;
    transition: 0.4s;
}
/* Rotate first bar */
#menudropdown:hover .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
#menudropdown:hover .bar2 {
    opacity: 0;
}
/* Rotate last bar */
#menudropdown:hover .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
/*
* FLAG DROPDOWN
 */

#langdropdown:hover .dropbtn {
    animation-name: flag;
    animation-duration: 0.3s;
}
#langdropdown .dropdown-content{
    right: 0;
    width: 0;
    min-height: 10%;
}
#langdropdown:hover .dropdown-content {
    width: 100%;
    opacity: 1;
}

#langdropdown .dropdown-content a{
    width: 100%;
    text-align: center;
}

@media (min-width: 801px) {
    #langdropdown .dropbtn img{
        width: 4em;
    }
    #langdropdown .dropdown-content a img {
        width: 40%;
        padding: 10% 30%;
    }
}
@media (max-width: 800px) {
    #langdropdown .dropbtn img{
        width: 3em;
    }
    #langdropdown .dropdown-content a img {
        width: 30%;
        padding: 10% 35%;
    }
}

/* The animation code */
@keyframes flag {
    0% {
        -webkit-transform: rotate(360deg) scale(0.9);
        transform: rotate(360deg) scale(0.9);
    }
    25%{
        -webkit-transform: rotate(720deg) scale(0.7);
        transform: rotate(720deg) scale(0.7);
    }
    50%{
        -webkit-transform: rotate(1080deg) scale(0.7);
        transform: rotate(1080deg) scale(0.7);
    }
    100%{
        -webkit-transform: rotate(1440deg) scale(0.9);
        transform: rotate(1440deg) scale(0.9);
    }
}