@media only screen and (max-width: 767px) {
    /* body:fullscreen {
        width: 100%;
        height: 100%;
    } */
    
    /* prefix for Chrome & Safari */
    /* body:-webkit-full-screen {
        width: 100%;
        height: 100%;
    } */

    .DotsPagination .DotsPagination-list {
        height: 42px;
        box-shadow: 5px 10px 25px 0 rgba(0,0,0,0.35);
    }

    .DotsPagination .DotsPagination-list .DotsPagination-item.active {
        height: 17px;
        width: 17px;
    }

    .MainTile {
        width: calc(100vw - 40px);
        min-width: unset;
    }

    .MainTile .Tile-middle {
        /* padding: 25px 30px 55px; */
        padding: 20px 30px 40px;
    }

    .MainTile .PlantSpecificInfo .PlantSpecificInfo-sc-name {
        margin-bottom: 5px;
    }

    .MainTile .PlantSpecificInfo .PlantSpecificInfo-comm-name {
        margin-bottom: 12px;
        line-height: 24px;
    }

    .MainTile .TextContainer-text p {
        margin-bottom: 10px;
    }

    .TileList > * {
        align-self: center!important;
    }

    #Header {
        padding: 20px 20px 0 20px;
        top: 0;
        left: 0;
        width: 100%;
    }

    #Header .Header-wrapper {
        justify-content: space-between;
        width: 100%;
    }

    #Header .Header-btns .navi-link {
        margin-right: 0;
    }

    #Header .Header-btns .BackToPlant {
        margin-left: 20px;
    } 

    #Home .Home-header {
        justify-content: space-between;
        margin-bottom: 20px;
    }

    #Home .Home-wrapper-inner {
        padding: 0 20px;
    }

    #Home .Home-body {
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    #Home .Home-body .Home-body-left {
        margin-bottom: 45px;
        padding-top: 0;
        padding-left: 0;
    }

    #Home .Home-body .Home-body-left .Home-info {
        display: none;
    }

    #Home .Home-contextual-info {
        width: 100%;
    }

    #Home .Home-footer {
        margin-bottom: 15px;
    }

    #Home .Home-footer-left .Home-info {
        display: block;
    }

    #Home .Home-footer .Home-footer-right {
        margin-left: 70px;
    }

    #Home .VideoContainerWoIcon video {
        display: none;
    }


    #Locations .Locations-list {
        flex-direction: column;
        height: 100%;
    } 

    #Locations .Locations-item {
        width: 100%;
        height: 30.4%;
    }

    #Locations .Locations-item:first-child {
        height: 39.2%;
    }

    #Locations .Locations-item:first-child,
    #Locations .Locations-item:nth-child(2) {
        border-right: none;
        border-bottom: 2px solid white;
    }

    #Locations .Locations-item .Locations-wrapper {
        align-self: flex-start;
        margin-top: 130px;
    }

    #Locations .Locations-item:nth-child(1) .Link {
        background-image: url(../images/Locations_Day.jpg);    
    }
    
    #Locations .Locations-item:nth-child(2) .Link {
        background-image: url(../images/Locations_Afternoon.jpg);
    }
    
    #Locations .Locations-item:nth-child(3) .Link {
        background-image: url(../images/Locations_Night.jpg);
    }
    
    #Locations .Locations-item .Link:hover {
        text-decoration: none;
    }

    .TileWithImage .Tile-top .Tile-link .BgOverlayWithIcon {
        display: none;
    }

    .TileWithImage .Tile-top .Tile-link .TouchIcon {
        display: initial;
        position: absolute;
        top: -33px;
        left: 50%;
        transform: translateX(-50%);
    }

    .MainTile .SwipeIcon {
        display: initial;
        position: absolute;
        bottom: -33px;
        left: 50%;
        transform: translateX(-50%);
    }

    .Plant-tile-layer-list .TileList-item {
        margin-right: 100px;
    }

    .PlantSpecificInfo .PlantSpecificInfo-sc-name {
        margin-bottom: 8px;
    }

    .PlantSpecificInfo .PlantSpecificInfo-indi-name {
        margin-bottom: 0;
        font-size: 30px;
        line-height: 38px;
    }

    .PlantSpecificInfo .PlantSpecificInfo-comm-name {
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 28px;
    }

    .Plant-pagination {
        display: none;
    }

    .Plant-pagination .Plant-pagination-next {
        margin-left: 15px;
    }

    .Plant-pagination .Plant-pagination-prev {
        margin-right: 15px;
    }

    .modal {
        padding: 0;
    }

    .modal .modal-dialog {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .modal .modal-content {
        padding: 0 20px; 
        /* width: 100%; */
        height: auto;
        /* max-height: 500px; */
        width: auto;
        max-width: 100%;
        max-height: 80%;
    }

    .modal .modal-content .modal-header .close {
        top: -48px;
        right: 20px;        
    }

    .modal .modal-content .modal-header .zoom-btns {
        display: none;
    }

    .modal .modal-content .modal-header .pinch-btn {
        display: initial;
        position: absolute;
        top: -60px;
        left: 20px;
    }

    .modal .modal-content .modal-body .ImgContainer {
        /* width: 100%; */
        /* height: auto; */

        /* max-width: 100%;
        max-height: 100%; */
    }

    .modal .modal-content .modal-body .ImgContainer img {
        /* width: 100%; */
        height: auto;   
        max-width: 100%;
        max-height: 100%;
    }

    .modal .modal-content .modal-body .VideoContainer {
        width: 100%;
        max-width: unset;
        max-height: unset;
    }

    .modal .modal-content .modal-body .VideoContainer video {
        width: 100%;
        height: auto;
    }

    .screen-trans-loading .ImgContainer {
        width: 150px;
    }

    #credits-modal.show {
        display: block!important;
    }

    #credits-modal.modal .modal-content {
        margin-top: 60px;
        margin-bottom: 20px;
    }

    #credits-modal.modal .modal-content .modal-header .close {
        top: -48px;
        right: 20px;
    }

    .Popup .Popup-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    .Popup .Popup-left {
        margin-right: 0;
        margin-bottom: 40px;
        width: 100%;
    }

    .Popup .Popup-right {
        width: 100%;
    }

    .Plant-tile-layer-list.active {
        padding-bottom: 20px;
    }

    .TileWithImage .Tile-top .ImgContainer img {
        max-height: 250px;
    }

    .Tile-link {
        outline: 0;
    }

    .TileWithVideo .Tile-top .VideoContainer video,
    .TileWithVideoWoPreload .Tile-top .VideoContainer video {
        max-height: 200px;
    }

    .TileWithAudio .Tile-top .ImgContainer img,
    .TileWithAudioWoPreload .Tile-top .ImgContainer img {
        width: 100%;
    }

    .TileWithAudio .Tile-media .AudioContainer,
    .TileWithAudioWoPreload .Tile-media .AudioContainer {
        /* width: 80%; */
        max-height: 290px;
    }

    .TileWithAudio .Tile-media .AudioContainer video,
    .TileWithAudioWoPreload .Tile-media .AudioContainer video {
        width: 100%;
    }

    .NmaLogo {
        display: none;
    }
}

@media only screen and (max-height: 414px) {
    .modal .modal-content .modal-header .close {
        top: 0;
        right: -28px;        
    }

    .modal .modal-content .modal-header .pinch-btn {
        top: unset;
        left: unset;
        bottom: 0;
        right: -45px;
    }

    .modal[id^="Video"] .modal-content {
        width: 80%;
    }
}