/* Big tablets to 1200px (widths smaller than the 1140px media row) */
@media only screen and (max-width: 1200px) {

}

/* Small tablets to big tablets: from 769 - 1024px */
@media only screen and (max-width: 1024px) {

    body {
        font-size: 18px;
    }


}

/* Break point to stack the play interface */
@media only screen and (max-width: 920px) {


    .game_grid_container {
        grid-template-columns: 100%;
        grid-template-rows: 600px 300px 600px;
        column-gap: 5px;
        grid-gap: 5px;
    }

    #game_grid_container_author {
        grid-template-columns: 100%;
        grid-template-rows: 400px 400px;
        column-gap: 5px;
        grid-gap: 5px;
    }

    #game_grid_timeline {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 3;
        grid-row-end: 3;
        width: 100%;
        height: 600px;
    }

    #game_grid_timeline_author {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 2;
        grid-row-end: 2;
        width: 100%;
        height: 400px;
    }

    #game_grid_play {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        width: 100%;
        height: 600px;
    }

    #game_grid_activity {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        width: 100%;
        height: 600px;
        padding: 0;
        margin: 0;
    }

    #game_grid_chat {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 2;
        grid-row-end: 2;
        width: 100%;
        height: 300px;
    }

    .game_dashboard_chat_text {
        width: 100%;
    }

    .game_dashboard_chat_message_text {
        width: 100%;
        height: 220px;
    }

    .game_message_speech_bubble {
        width: 80%;
    }

    .game_timeline_element_container {
        width: 100%;
        display: inline-block;
        overflow-y: scroll;
        height: 440px;
    }

    .game_dashboard_element_container {
        height: 430px;
    }

    #game_grid_activity_activity_screen {
        width: 100%;
        height: 460px;
        padding: 0;
        margin: 0;
    }

    #game_play_text {
        width: 90%;
        height: 440px;
    }

    #game_play_mchoice {
        width: 90%;
        height: 440px;
    }


}


/* Small phones to small tablets: from 481 - 768px */
@media only screen and (max-width: 768px) {

    .menu_bar {
        padding: 0 0 0 5px;
        float: left;
        display: inline-block;
        text-align: center;
    }


    .logo {
        width: 200px;
        height: 80px;
        padding: 5px;
        background-image: url('../img/kinuva2_logo_200x80px.png');
        text-align: center;
    }

    .logo_medium {
        width: 100px;
        height: 40px;
        padding: 5px;
        background-image: url('../img/kinuva2_logo_100x40px.png');
        text-align: left;
        float: left;
    }


    /* Mobile navigation */
    .menu_nav {
        display: none;
    }

    .menu_nav_mobile {
        list-style: none;
        padding: 0;
        width: 100%;
/*        height: 100%;*/
        float: left;
        display: none;
    }

    .menu_nav_mobile li {
        display: block;
        padding: 5px;
    }

    .menu_nav_mobile li a:link,
    .menu_nav_mobile li a:visited {
        display: block;
        color: #ff681f;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 90%;
        border-bottom: 2px solid transparent;
        transition: border-bottom 0.2s;
    }

    .menu_nav_mobile li a:hover,
    .menu_nav_mobile li a:active {
        display: block;
    }

    .horizontal {
        list-style: none;
        padding-left: 0;
        display: flex;
    }

    .horizontal li {
        margin-right: 10px;
    }

    .mobile-nav-icon {
        display: inline-block;
        font-size: 200%;
        position: fixed;
        top: 5px;
        right: 0;
        padding: 0 15px;
        color: #fff;
    }

    .main-nav {
        display: none;
        float: left;
    }

    .main-nav li {
        display: block;
        padding: 5px 0;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
    }


    .iframebox {
        width: 320px;
        height: 180px;
    }

    .panorama {
        width: 300px;
        height: 200px;
    }

    .header_image {
        width: 320px;
        height: 180px;
        padding: 0;
        background-image: url('../img/london-bridge-320x180.jpg');
        text-align: center;
        display: inline-block;
    }

    .section_separator {
        background-color: #ff681f;
        height: 2px;
        width: 100%;
        margin-bottom: 10px;
        display: inline-block;
        text-align: center;
    }


    .long-copy {
        color: #fff;
        width: 90%;
        line-height: 145%;
        margin: 10px;
        text-align: justify;
        display: inline-block;
    }

    #game_play_image {
        width: 320px;
        height: 180px;
    }


}

/* Small phones: from 0 - 480px */
@media only screen and (max-width: 480px) {

    .logo {
        width: 100px;
        height: 40px;
        padding: 5px;
        background-image: url('../img/kinuva2_logo_100x40px.png');
        text-align: center;
    }

    .header_image {
        width: 320px;
        height: 180px;
        padding: 0;
        background-image: url('../img/london-bridge-320x180.jpg');
        text-align: center;
        display: inline-block;
    }

    .section_separator {
        background-color: #ff681f;
        height: 2px;
        width: 100%;
        margin-bottom: 10px;
        display: inline-block;
        text-align: center;
    }


    .long-copy {
        color: #fff;
        width: 90%;
        line-height: 145%;
        margin: 10px;
        text-align: justify;
        display: inline-block;
    }

    .iframebox {
        width: 320px;
        height: 180px;
    }

    .panorama {
        width: 300px;
        height: 200px;
    }


}