/* handheld - narrow screen ver. */

/* Small devices (portrait tablets and large phones, 500px and up) */
@media only screen and (min-width: 500px) {
    #page-containter {
        width: 100%;
    }


    #model-section {
        display: flex;
        flex-direction: column-reverse;
    }


    /*
    #model-section #model-display {
        height: 70%;
        width: 100%;
    }

    #model-section #model-control {
        height: 30%;
        width: 100%;
    }

*/

    #header-landscape {
        display: none;
    }

    #header-portrait {
        display: flex;
    }

    #header-portrait #logo {
        width: 100%;
    }

    #header-portrait #logo img {
        width: 100%;
        flex-grow: 1;
    }

    #header-portrait #logo {
        display: flex;
        flex-direction: row;
    }

    #header-portrait #logo .settings-space-group {
        flex-grow: unset;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 15vw;
        display: flex;
    }

    #header-portrait #logo .settings-space-group div {
        text-align: center;
    }

    #header-portrait #logo a {
        flex-grow: 1;
        width: 70vw;
        align-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    #header-portrait .lang-button-group {
        text-align: center;
        align-items: center;
        align-content: center;
        width: 15vw;
        font-weight: 600;
    }

    .lang-control span {
        display: flex;
        flex-direction: column;
        text-align: center;
    }


    #location-section {
        display: flex;
        flex-direction: column;
    }

    #areal-map-control iframe {
        transform: scale(3);
        transform-origin: center center;
    }

    #areal-map-control #map-portrait {
        display: inline-block;
    }

    #areal-map-control #map-landscape {
        display: none;
    }


    #page-container .main-page-section .subsection {
        /*margin-top: 2em;*/
    }

    #areal-map-control {
        width: 100%;
        height: 30vh;
        max-height: 30vh;
    }

    #worktime-control {
        margin-bottom: 2em;
        padding: 1em;
    }

    #contact-control {
        margin-bottom: 2em;
        padding: 1em;
    }

    #areal-map-control {
        margin-bottom: 2em;
        padding: 1em;
    }

    .main-page-section .title-subsection {
        margin: 3em 0 1em 0;
    }


    #info-section .text-subsection .title {
        font-size: 2.5em;
    }


    #info-section .text-subsection .body {
        font-size: 2em;
    }


    #info-section {
        min-height: 110vh;
    }

    .led-container {
        font-size: 0.9em;
    }


    #model-display {
        height: 50vh;
        /* or whatever */
    }

    #image-view {
        min-height: 0;
    }

    #image-view {
        /* height: 102% !important;*/
        height: 102% !important;
    }

    #canvas-wrapper {
        min-height: 100%;
        height: 102%;
    }

    #c {
        max-height: 100% !important;
        max-width: 100% !important;
    }

    #model-section {
        padding-right: 0;
        padding-left: 0;
        max-height: 80vh;
    }

    #model-section #model-control {
        padding-right: clamp(2vh + 0.25rem, 2vw + 2rem, 8vh);
        flex-grow: 1;
        max-height: 100%;
        margin-bottom: 2em;
        overflow: hidden;

    }


    #models-list {
        display: flex;
        flex-direction: row;
    }


    #model-section #model-control #models-list .li-i {
        flex-direction: column;
    }

    #model-section #model-control #models-list .li-i .li-icon {
        text-align: center;
    }

    #model-section .fa-circle-chevron-left {
        display: none;
    }

    #model-control {

        margin: 0 !important;
        height: 100%;
    }

    .dark-mode-enabled #model-control {
        background-color: var(--poknet-bg-dark);
    }

    #model-control {
        background-color: var(--poknet-bg-light);
    }

    #image-view {
        display: flex;
        flex-direction: column;
    }

    #image-view-controls {
        display: none;
    }

    #image-view {
        overflow-y: auto;
    }

    #models-list {
        min-height: 20vh;
    }

    .li-icon {
        font-size: 1.25em;
    }

    #model-section #model-display {
        position: relative;
    }



    #model-section #model-display #image-view #image-container {
        padding: 2em;
    }

    #model-section #model-display #image-view #image-container img {
        margin-bottom: 1em;
    }

    .dark-mode-enabled #model-section #model-display #image-view #image-container img {
        border: solid 0.2em var(--poknet-bg-light);
    }

    #model-section #model-display #image-view #image-container img {
        border: solid 0.2em var(--poknet-bg-dark);
    }

    #cookie-request {
        flex-direction: column;
    }

    .x {
        flex-grow: 1;
        text-align: right;
    }

    
    .single-image-wrapper {
        display: block!important;
    }
        




}