/* flags */
#masthead nav#flag .sub-menu,
#flagsmenu {
    display: none;
    width: 100%;
    height: 36px;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    background: #3a801e;
    z-index: 1;
    text-align: center;
    margin: 0;
}
#flagsmenu li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
#flagsmenu a {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
    text-align: center;
}
#flagsmenu a:before {
    font-family: 'FontAwesome';
    font-size: 20px;
    letter-spacing: normal;
    color: #fff;
    width: 40px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
}
#masthead nav#flag li.flag-parent a:before,
#flagsmenu a:before {
    content: '';
    background: url('#') no-repeat center center;
    position: relative;
    background-size: 32px 22px;
    width: 32px;
    height: 22px;
    top: 7px;
}
#masthead nav#flag li.flag-parent .sub-menu > li,
#flagsmenu > li {
    margin: auto 10px;
}
#masthead nav#flag li.flag-parent > a:before {
    top: 2px;
    background-size: 28px 18px;
    width: 28px;
    height: 18px;
}
#masthead nav#flag li.us > a:before,
#masthead nav#flag li.us a.flag-parent:before,
#flagsmenu li.us a:before {
    background-image: url('../images/popup-flags/flag-us.svg');
}
#masthead nav#flag li.ca > a:before,
#masthead nav#flag li.ca a.flag-parent:before,
#flagsmenu li.ca a:before {
    background-image: url('../images/popup-flags/flag-ca.svg');
}
#masthead nav#flag li.ch > a:before,
#masthead nav#flag li.ch a.flag-parent:before,
#flagsmenu li.ch a:before {
    background-image: url('../images/popup-flags/flag-ch.svg');
}
#masthead nav#flag li.uk > a:before,
#masthead nav#flag li.uk a.flag-parent:before,
#flagsmenu li.uk a:before {
    background-image: url('../images/popup-flags/flag-uk.svg');
}
#masthead nav#flag li.fr > a:before,
#masthead nav#flag li.fr a.flag-parent:before,
#flagsmenu li.fr a:before {
    background-image: url('../images/popup-flags/flag-fr.svg');
}
#masthead nav#flag li.ge > a:before,
#masthead nav#flag li.ge a.flag-parent:before,
#flagsmenu li.ge a:before {
    background-image: url('../images/popup-flags/flag-ge.svg');
}
#masthead nav#flag li.it > a:before,
#masthead nav#flag li.it a.flag-parent:before,
#flagsmenu li.it a:before {
    background-image: url('../images/popup-flags/flag-it.svg');
}
@media (min-width: 350px) {
    #masthead nav#tray-icon {
        display: none;
    }
    #masthead nav#social {
        left: auto;
        top: 6px;
    }
    #masthead #tray-container {
        text-align: center;
    }
    #masthead #tray-container nav:not(#social) {
        text-align: left;
    }
    #masthead #tray-container:before {
        top: 0;
    }
    #masthead nav#flag li.flag-parent > a:before {
        right: 6px;
    }
}
@media (min-width: 769px) {
    #masthead #tray-container,
    #masthead nav#social,
    #masthead nav#flag {
        position: initial;
        display: inline-block;
        width: auto;
        text-align: right;
        height: 90px;
        line-height: 90px;
    }
    #masthead #tray-container {
        position: absolute;
        right: 10px;
    }
    #masthead nav#flag,
    #masthead nav#icon .icon-search {
        position: absolute;
        right: 10px;
        top: 0;
    }
    #masthead nav#icon .icon-search {
        right: 50px;
    }
    #masthead nav#flag ul li:last-of-type a,
    #masthead nav#tray-icon,
    #masthead nav#tray-site,
    #masthead nav#tray,
    #masthead #tray-container:before,
    #masthead nav#social {
        display: none;
    }
    #masthead nav#flag li.flag-parent > a:before {
        right: -2px;
    }
    #masthead nav#flag li.flag-parent .sub-menu,
    #flagsmenu {
        top: 90px;
    }
    #masthead nav#flag li.flag-parent .sub-menu > li,
    #flagsmenu > li {
        line-height: 34px;
    }
    #flagsmenu {
        position: absolute;
        left: initial;
        z-index: 9;
        right: 10px;
        width: auto;
        background: #fff;
        box-shadow: 0 0 4px rgba(0,0,0,.2);
        top: 70px;
        border-radius: 2px;
        height: auto;
        padding: 0px 20px;
    }
    #flagsmenu:after {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        content: '';
        position: absolute;
        top: -8px;
        right: 14px;
    }
    #flagsmenu > li {
        line-height: 54px;
        margin: auto 14px;
    }
    #flagsmenu a:before {
        top: 12px;
        width: 42px;
        height: 32px;
        background-size: 42px 32px;
    }
}
@media (min-width: 900px) {
    #flagsmenu {
        right: 180px;
    }
    #masthead nav#social {
        display: inline-block;
        position: relative;
        top: -1px;
    }
    #masthead nav#flag {
        right: 190px;
    }
    #masthead nav#icon .icon-search {
        right: 230px;
    }
    #masthead nav#flag li.flag-parent > a:before {
        right: -6px;
    }
}
@media (min-width: 1024px) {
    #flagsmenu {
        padding: 0px 10px;
    }
    #flagsmenu > li {
        line-height: 34px;
        margin: auto 10px;
    }
    #flagsmenu a:before {
        top: 8px;
        width: 32px;
        height: 22px;
        background-size: 32px 22px;
    }
}