.desktop-only {
    display: none;
}

/* mobile style for common site elements */
/* TODO: definire media query */
@media screen and (max-width: 500px){


    html, body { overflow: auto !important; }

    .mobile-only { display: block; }

    .btn:hover { color: white; }
    #big-video-wrap { opacity: 0.6; } /* was 0.3 */

    a#brand { zoom: 0.55; }
    a:hover { color: #aaa; text-decoration: none; }

    .logo { top: 8%; left: 50%; margin-left: -150px; }
    .logo img { width: 300px; }

    span.section-title {
        color: white;
        display: block;
        font-size: 17px;
        line-height: 40px;
        margin: 0 auto;
        text-align: center;
        width: 190px;
        padding-left: 0;
    }

    /* menu */
    #menu-toggle {
        background: none;
        display: block;
        font-size: 25px;
        padding: 5px 15px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 15;
    }
    #menu-toggle:hover { color: white; }

    a.email.on-menu-top {
        display: block;
        position: fixed;
        right: 43px;
        z-index: 15;
        top: 0;
        font-size: 24px;
        padding: 5px 15px;
    }

    /* footer */
    .footer-menu {
        display: block;
        background: none;
        background: rgba(0, 0, 0, 0.85);
        bottom: 0;
        border: none;
        border-radius: 0;
        left: -1px;
        font-size: 14px;
        z-index: 1000;
    }
    .row.footer-menu.panel {
        margin: 0;
    }

    .footer-menu .social, .footer-menu .guestbook { display:none; }
    .footer-menu .organization-footer {width: 100%;height: 45px;}
    .footer-menu .organization-footer p {margin: 0;}

    .top-menu {
        display: block !important;
        background: none;
        background-color: rgba(0,0,0,0.85);
        border-radius: 0;
        text-align: right;
        padding: 3px;
        z-index: 200;
        border: none;
        box-shadow: none;
    }
    /*.top-menu.mobile-close #top-menu-navigation-wrapper {display: none;}*/

    body.read-more-open .top-menu { transition: all 0.3s; background: rgba(0, 0, 0, 0.85); }
    body.read-more-open .footer-menu { transition: all 0.3s; background: rgba(0, 0, 0, 0.85); }

    body.mobile-menu-open .logo,
    body.mobile-menu-open .buttons-wrap,
    body.mobile-menu-open #down-btn {
        opacity: 0;
        transition: all 0.2s linear;
    }

    body.mobile-menu-closed .logo,
    body.mobile-menu-closed .buttons-wrap,
    body.mobile-menu-closed #down-btn {opacity: 1;transition: all 0.2s linear;}

    body.mobile-menu-open a#brand {display: block;
        /* logo centrato
        float: none;
        left: 50%;
        position: absolute;
        margin-left: -82px;*/
    }

    body.mobile-menu-open a#brand img {
        display: inline-block;
    }

    div.top-menu.panel.mobile-open {
        background-color: rgba(0,0,0,0.85);
    }

    div.top-menu #top-menu-navigation-wrapper {
        background: none;
        z-index: 13;
        height: 100%;
        position: relative;
    }

    div.top-menu #top-menu-navigation-wrapper ul {display: none;list-style: none;}

    div.top-menu.mobile-open #top-menu-navigation-wrapper ul {
        max-width: 100%;
        width: 100%;
        top: 60px;
        text-align: center;
        margin-top: 0;
        left: 0;
        right: inherit;
        position: absolute;
        height: 100%;
        display: block;
    }

    /*div.top-menu  { background: none; box-shadow: none; z-index: 200;}*/
    div.top-menu.mobile-close{ height: 46px; transition: 500ms; }
    div.top-menu.mobile-open { height: 100%; transition: 500ms; }

    #top-menu-navigation-wrapper { height: 100%; position: relative; }

    #top-menu-navigation-wrapper > ul > li { height: auto; clear: both; }
    #top-menu-navigation-wrapper > ul > li > a { border-bottom: 1px solid white; }
    #top-menu-navigation-wrapper ul li {
        float: left;
        margin: 0;
        padding: 0;
    }
    #top-menu-navigation-wrapper ul li ul.submenu li { margin: 0; padding: 0; }
    #top-menu-navigation-wrapper ul li ul.submenu li a { margin: 0; padding: 3px 0 0; }

    div.top-menu.mobile-open #top-menu-navigation-wrapper ul.submenu {

        position: relative;
        background: none;
        width: 100%;
        padding: 0;
        margin: 0;
        display: inline-block !important;
        height: auto;
        top: inherit;
    }
    #top-menu-navigation-wrapper > ul > li {
        text-align: center;
        width: 100%;
        display: inline-block;
        float: none;
        margin-top: 0;
    }


    #top-menu-navigation-wrapper ul li ul.submenu li {width: 100%;}
    #top-menu-navigation-wrapper ul li ul.submenu li:last-child {margin-bottom: 10px;}

    #top-menu-navigation-wrapper ul li ul.submenu li a {
        text-align: center;
        width: 100%;
        color: lightgrey;
    }

    #top-menu-navigation-wrapper > ul > li > a {
        text-align: center;
        width: 100%;
        border-bottom: none;
        font-size: 19px;
        padding-bottom: 0px;
    }


    /* common for pages */
    section .panel {
        background: none;
        padding: 0;
        border: 0;
        box-shadow: none;
        max-height: inherit !important;
        margin-top: 50px;
    }


    .btn-read-more {
        margin-left: -100px;
        position: absolute;
        bottom: -21px;
        right: 22px;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        padding: 7px 0 7px;
        width: 120px;
        text-align: center;
        line-height: 12px;
    }

}

/* MOBILE OVERRIDES */
/*html .button-play-video { display:none; }*/

html.touch .button-play-video { display:inline-block; }
html.touch .slider-wrapper { display:none; }
html.touch .nav-icon { display:none; }
html.touch .nav-icon#down-btn { display:block; }

/* Tablet layer (rotate device to landscape) */
#rotate-device-layer-1 { pointer-events: none; display:none; background-color: rgba(0,0,0,0.5);text-align: center; position: absolute; width: 100%; height: 100%; z-index: 101010; color: white; }
#rotate-device-layer-1 > div { margin-top: 50%;  }
#rotate-device-layer-1 > div > img { width: 70%; }
#rotate-device-layer-1 > .logo { margin: 0; }
html.landscape #rotate-device-layer-1 { display:none !important; }

/* Mobile layer (rotate device to portrait) */
#rotate-device-layer-2 { pointer-events: none; display:none; background-color: rgba(0,0,0,0.5); text-align: center; position: absolute; width: 100%; height: 100%; z-index: 101010; color: white; }
#rotate-device-layer-2 > div { margin-top: 20%;  }
#rotate-device-layer-2 > div > img { width: 40%; }
html.portrait #rotate-device-layer-2 { display:none !important; }

html.hide-content section { display:none; }
html.hide-content #footer { display:none !important; }
html.hide-content #top-menu { display:none !important; }
html.hide-content .top-menu { display:none !important; }
html.hide-content .footer-menu { display:none !important; }
html.hide-content .buttons-wrap { display:none; }
html.hide-content .nav-icon#down-btn { display:none; }
html.hide-content  header > .logo { display:none;}
html.hide-content .logo { z-index: 101011; margin-left: 0; text-align: center; left: 0; width: 100%; }