/* 
    top bar 
    appears after selecting a different language 
    allows user to revert site to original language
*/
.skiptranslate iframe {
    /*display: none !important;*/
}

/* 
    NOTE the below came from this comment: https://processwire.com/talk/topic/27266-module-markupgoogletranslate/?do=findComment&comment=224913 
    
    I did what I could to make it not completely break the navigation
    
    however after selecting a language, the top bar that appears covers the navigation once you scroll down the page
    and making it 'display: none' pushes down nav items when fully expanded

    the above .skiptranslate iframe section is a starting point for targeting that top bar
*/

#google_translate_element .skiptranslate {
    visibility: collapse;
    text-align: center;
    /*position:absolute;*/
    width: 100%;
    width: calc(100% - 4rem);
    top: 0;
}

    #google_translate_element .skiptranslate * {
        margin: 0 auto;
        display: block;
    }

    #google_translate_element .skiptranslate [id*=targetLanguage] {
        visibility: visible;
    }

        #google_translate_element .skiptranslate [id*=targetLanguage] select {
            border: 1px solid rgba(0,0,0,.2);
            background-color: #F4F6F7;
            color: rgba(0,0,0,.7);
        }

            #google_translate_element .skiptranslate [id*=targetLanguage] select option {
                background-color: transparent;
            }

#google_translate_element [id*=targetLanguage]::after {
    content: 'Powered by Google Translate';
    display: block;
    text-align: center;
    line-height: 1;
    color: rgba(0,0,0,.6);
}

@media(max-width:575px) {
    #google_translate_element .skiptranslate {
        width: calc(100% - 2rem);
    }
}