html {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
line-height: 1;
margin: 0; padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ol,ul,li {
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
}
.langDrop {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #484c55;
border: 1px solid white;
border-radius: 4px;
color: white;
display: inline-block;
font-size: 14px;
line-height: 160%;
margin-left: 10px;
padding: 5px 15px;
position: fixed;
top: 10px; right: 10px;
vertical-align: middle;
z-index: 2;
min-width:150px;
text-align: center;
}
.langDrop span:before {
content: 'Language:';
position: absolute;
top: 5px; left: -80%;
}
.langDrop span:after {
content: ' ▾';
}
.langDrop ul {
border: 1px solid transparent;
border-top: 0 none;
list-style: none;
max-height: 0;
opacity: 0;
overflow: auto;
position: absolute;
top: 100%;
left: -1px;
text-align: left;
-webkit-transition: all 0.3s;
transition: all 0.3s;
min-width: 100%;
min-width: -webkit-calc(100% + 2px);
min-width: calc(100% + 2px);
}
.langDrop ul li {
padding: 5px 0 5px 5px;
cursor: pointer;
}
.langDrop.notap:hover, .langDrop.hover {
background: #484c55;
border-radius: 4px 4px 0 0;
}
.langDrop.notap:hover ul, .langDrop.hover ul {
background: #484c55;
border-bottom: 0 none;
border-color: white;
max-height: 400px;
opacity: 1;
}
.langDrop.notap:hover li, .langDrop.hover li {
border-bottom: 1px solid white;
}
.langDrop.notap:hover li:hover, .langDrop.hover li:hover {
background: #484c55;
}