/* screenwidth less than 1140px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1140px) {

}

/* screenwidth less than 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

}

/* screenwidth less than 800px
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 830px) {
    #intro #mainmenu {
        opacity: 0;
        height: 64px;
        width: 604px; 
        margin-left: auto ;
        margin-right: auto ;
        position: relative;
        top: calc(50% - 152px/2);
    }

    #intro #mainmenu #GK-logo {
        position: absolute;
        left: calc(50% - 261px/2);
    }

    #mainmenu #mainmenu-buttons {
        width: 100%;
        height: 64px;
    }

    #mainmenu #mainmenu-buttons .button.rect {
        width: 175px;
        height: 41px;
        margin: 10px;
        line-height: 41px;
        font-size: 0.8em;
        letter-spacing: 3px;
    }

    #mainmenu #mainmenu-buttons .button.rect > .button-slider {
        display: block;
        width: 175px;
        height: 41px;
    }

    #mainmenu #mainmenu-buttons .button.rect > .button-slider.slide-up {
        margin-top: -31px;
    }

    #mainmenu #mainmenu-buttons .button.rect > .button-wrap.slide-away {
        margin-top: -10px;
    }
}

/* mobile 
---------------------------------------------------------------------- */
@media only screen and (max-width: 890px) {

    #intro #presented {
        font-size: 1em;
    }

    #menu, #gedichten-content {
        width: 100%;
    }

    #menu.visible {
        left: 0%;
        z-index: 1;
    }

    #menu.hidden {
        left: -100%;
    }

    #gedichten-content.visible {
        right: -100%;
    }

    #gedichten-content.hidden {
        right: -100%;
    }

    #gedichten-content.roll-in {
        z-index: 2;
        left: 0%;
    }

    #gedichten .poemlink p {
        text-align: center;
        margin-right:0;
    }

    #back {
        display: none;
    }

    #back-toggle {
        display: block;
    }

    #responsive-menu-toggler {
        display: block;
    }

    #play {
        left: auto;
        right: 1em;
        bottom: 1em;
        border: 1px solid #4A76A8;
        width: 80px;
        height: 80px;
    }

    #play.pause > i {
        color: white;
    }

    #play > i {
        color: #4A76A8;
        height: 80px;
        width: 80px;
        line-height: 80px;
    }

    #poems-main-title {
        margin-top: 2em;
    }
    .poem .poet {
        
        position: relative;
        display: block;
    }
    .poet .image {
        width: 80px;
        height: 80px;
    }
    .poet .image img {
        width: 80px;
    }

    .poet .contact {
        height: 80px;
        margin-left: 0;
        font-size: 1em;
    }

    .poet .contact .website {
        margin-top: 0;
        font-style: italic;
    }

    .poet .contact .socialmedia a {
        margin-top: 3px;
    }

    #buffered-play {
        position: relative;
        top: -185px;
        left: calc(50% - 40px);
        z-index: 2;
    }

    #played-play {
        position:relative;
        top: -91px;
        left: calc(50% - 50px);
    }

    .poem .content {
        font-size: 0.85em;
    }

    #video-container #video {
        left: -65%;
    }
    
    #gedichten-content {
        overflow: auto;
    }
    
    
}

@media only screen and (max-width: 830px) and (orientation: landscape) { 
    #gedichten-content {
        overflow: auto;
    }
    
    .poem .poet {
        position: relative;
        display: block;
    }
    
    #video-container #video {
        left: 0%;
    }
    
    #intro #mainmenu #GK-logo {
        width: 150px;
        left: calc(50% - 150px/2);
        top: 2em;
    }
    
    #intro #mainmenu {
        /*top:0;*/
    }
    
    #mainmenu #mainmenu-buttons {
        position: relative;
        top:150px;
    }
}

/* screenwidth less than 460px
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 560px) {
    #intro #mainmenu {
        height: 192px;
        width: 197px; 
        margin-left: auto ;
        margin-right: auto ;
        position: relative;
        top: calc(50% - 192px/2);
    }

    #intro #mainmenu #GK-logo {
        width: 200px;
        height: 116.5px;
        left: calc(50% - 200px/2);
    }

    #mainmenu #mainmenu-buttons {
        top: 175px;
    }
}

/* screenwidth less than 400px
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 400px) {

}