:root {
--color-blue-dark: #003da5;
--color-yellow: #ffd700; 
--color-bg-yellow-50: rgba(255, 215, 0, 0.5);
--color-bg-yellow-50: rgba(255, 215, 0, 0.8);
--color-bg-blue-dark-80: rgba(0, 61, 165, 1);
}
.solid-bg .sidebar-content {
background: var(--color-bg-yellow-50) none repeat center center;
}
.bg-under-widget .sidebar-content .widget,
.solid-bg.sidebar-content .widget {
background: var(--color-bg-yellow-50) none repeat center center;
} div#flags_wrapper{
background: #fff;
}
div#flags_reference_container {
color: #0040a2;
font-size: 13px;
line-height: 120%;
padding-bottom: 5px;
text-align: center;
}
div#flags_flexcontainer {
margin: 0px auto;
position: absolute;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
align-content: space-between;
width: 100%;
}
div#flags_flexcontainer div {
padding: 0 4px;
}
div#flags_flexcontainer > div > a > img {
border: 1px solid #ffcc00;
width: 36px;
height: 36px;
margin: 2px;
-webkit-transition: margin 0.4s, width 0.4s, height 0.4s; transition: margin 0.4s, width 0.4s, height 0.4s;
}
div#flags_flexcontainer > div > a > img:hover {
margin: 0px;
width: 40px;
height: 40px;
}  @media only screen and (min-width: 240px) and (max-width: 319px) {
div#flags_wrapper { padding-bottom: 270px }
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
div#flags_wrapper { padding-bottom: 180px }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
div#flags_wrapper { padding-bottom: 120px }
}
@media only screen and (min-width: 768px ) and (max-width: 1135px ){
div#flags_wrapper { padding-bottom: 60px }
}
@media only screen and (min-width: 1136px ) {
div#flags_wrapper { padding-bottom: 0 }
}