/* Style The Dropdown Button */

.dropbtn {

  background-color: #4CAF50;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

  cursor: pointer;

}



.vertical-center-lang {

  transform: translateY(30%);

  }



.countryFlag-it{

    background-image: url("../index3_files/flags/it.svg");

    width: 10px;

    height: 10px;

    border-radius: 100%;

    /*background-size: cover;*/

}



.countryFlag-us{

    background-image: url("../index3_files/flags/us.svg");

    width: 10px;

    height: 10px;

    border-radius: 100%;

    background-size: cover;

}



.countryFlag-es{

    background-image: url("../index3_files/flags/es.svg");

    width: 10px;

    height: 10px;

    border-radius: 100%;

    background-size: cover;

}



/* The container <div> - needed to position the dropdown content */

.dropdown {

  position: relative;

  display: inline-block;

}



/* Dropdown Content (Hidden by Default) */

.dropdown-content {

  display: none;

  top:0px;

  position: absolute;

  background-color: #f9f9f9;

  border-radius:20%;

  overflow:hidden;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 99;

}



/* Links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}



/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #dcdcdc}



/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {

  display: block;

  animation:popLeng 0.2s ease-in;

}



.clickedDropdown {

  display: block;

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  background-color: #dcdcdc;

  animation:popLeng 0.2s ease-in;

}





@keyframes popLeng {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }



/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {

  background-color: #3e8e41;

}