/* flags
------------------------------------------------------------ */

#flags ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

#flags li {
    display: inline-block;
    width: 6.5em;
    margin: 0 1em 1em 0;
    text-align: center;
    vertical-align: top;
}

#flags li a,
#flags li img {
    display: block;
    border-bottom: 0;
    text-align: center;
    text-decoration: none;
}

#flags li img {
    margin: 0 auto;
}

#flags li a:hover img,
#flags li a:focus img {
    opacity: 0.7;
}

#flags li a:hover,
#flags li a:focus {
    text-decoration: underline;
}

/* flags are usually 1:2 or 2:3 ratio. 12:7 ratio is roughly inbetween.
 * see http://en.wikipedia.org/wiki/User: SiBr4/List_of_national_flags_by_aspect_ratio
 ------------------------------------------------------------ */

.flag_tiny {
    width: 2em;
    height: 1.3em;
    margin-right: 0.5em;
    vertical-align: text-bottom;
}

.flag_small {
    width: 5em;
    height: 3.125em;
    margin: 0 0 1em;
    border: 1px solid #ccc;
}

.flag_medium {
    display: none;
}

/* for when there is no flag for country */

.flag_placeholder {
    display: block;
    width: 5em;
    height: 3.125em;
    margin: 0 auto 0.3em;
    border: 1px solid #ccc;
}

.flag_tiny_placeholder {
    display: inline-block;
    width: 2em;
    height: 1.3em;
    margin-right: 0.5em;
}

.active_faq .feature_more {
    padding-bottom: 1em;
}

.reveal:focus {
    position: relative;
    overflow: visible;
    width: auto;
    height: auto;
    clip-path: none;
    clip: auto;
    white-space: normal;
    margin: 0 0 1em 0;
    float: left;
}

/* responsive
------------------------------------------------------------ */

@media screen and (min-width: 940px) {
    .flag_medium {
        display: inline;
        border: 1px solid #ccc;
        margin-bottom: 1em;
        width: 100%;
    }
}