@media only screen and (max-width: 768px) {
    body {
        screen-orientation: portrait !important;
    }
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: 'Titillium Web';
    }
    .invisibleMob{
        visibility: hidden!important;
    }
    /** Lighbox **/
    .modal {
        padding-bottom: 2rem !important;
    }
    .modal-dialog {
        max-width: calc(100% - 2rem) !important;
        max-height: calc(100% - 2rem) !important;
        margin: 1rem auto !important;
        padding-top: 3rem;
    }
    /* diverses */
    *:focus {
        outline: none;
        border: none;
    }
    .divider-sidebar {
        display: flex !important;
        justify-content: center;
        align-items: center;
        opacity: 85%;
        padding: 0rem 0rem 0rem 0rem;
        width: 100%;
    }
    .divider-sidebar > div {
        width: 20%;
        height: 2px;
        background-color: white;
        border-radius: 10px;
        opacity: 50%;
    }
    .divider-sidebar > i {
        opacity: 50%;
        font-size: 30px;
        padding: 3px 5px 0px 5px;
    }
    .mhide, .m-hide {
        display: none !important;
    }
    .dhide {
        display: flex !important;
    }
    .show {
        display: block !important;
        transform: translateY(0) ;
    }
    /* lauftexte sprache */
    marquee {
        color: white;
        background-color: #353d3f95;
    }
    .share{
        width: 10px;
    }
    /* video nav logo */
    .main-section {
        background-color: #353d3fcb;
        padding: 15px;
        border-radius: 15px;
        max-height: 60vh;
    }
    .main-section.show {
        bottom: 73px;
    }
    #fer_videoB{
        aspect-ratio: 9 / 16;
    }
    #fer_video {
        height: 100%;
        object-fit: cover;
    }
    #video-progress {
        width: 100%;
        height: 5px;
        background-color: #cdcdcd90;
        position: fixed;
        bottom: 60px;
    }
    #video-progress::-webkit-progress-bar {
        background-color: #cdcdcd90;
    }
    #video-progress::-webkit-progress-value {
        background-color: #0069b490;
    }
    #video_logo{
        top: 30px;
        right: 10px;
        width: 140px;
        max-width: calc(100% - 20px);
    }
    #volume {
        transform: rotate(270deg);
        transform-origin: 50% 50%;
    }
    /* nav side */
    #iconNav{
        display: flex;
        color: white;
        font-size: 25px;
        position: absolute;
        bottom: 80px;
        right: 20px;
        align-items: center;
    }
    /* social share */
    #SocialShare{
        bottom: 73px;
        border-radius: 20px 20px 0px 0px;
        z-index: 10000;
        overflow-y: hidden;
        top: unset;
        width: 100%;
        padding: 0rem;
    }
    #SocialShare.sidebar {
        bottom: 73px;
    }
    .socialDiv{
        max-height: 65vh;
        overflow-y: auto;
        margin: 0rem 0rem 1rem 0rem;
        padding: 0rem 1rem 0rem 1rem;
    }
    .share-btn{
        background: none;
        border: none;
    }
    /* weitere kameras */
    #video_cams {
        display: none;
    }
    /* archiv */
    .archivesettings {
        bottom: 125px !important;
    }
    .left, .center, .right {
        flex-basis: 33.33%;
    }
    #dreiMenu{
        display: none !important;
    }
    #prev_time_mob,
    #next_time_mob{
        width: 90px;
    }
    #prev_time_mob{
        text-align: right;
    }
    .archDivider > div{
        width: 1px;
        height: 75%;
        background-color: white;
        opacity: 50%;
        margin-left: 0px;
    }
    /* menue */
    #menu {
        bottom: 73px;
        border-radius: 20px 20px 0px 0px !important;
        width: 100%;
        min-width: 277px;
        padding-top: 0;
        z-index: 1000000000;
    }
    nav {
        display: flex;
        justify-content: space-between;
        background-color: #353d3f95;
        padding: 7px 0px;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 100;
    }
    .nav-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: white;
        padding: 12px 16px;
        border-radius: 50px;
        background-color: rgba(255, 255, 255, 0);
    }
    .nav-item span {
        width: 0;
        overflow: hidden;
    }
    .nav-item:focus {
        text-decoration: none;
        color: white;
        background-color: rgba(255, 255, 255, 0.2);
        transition: .2s;
    }
    .nav-item:focus span {
        width: 100%;
        margin-left: 8px;
        transition: .2s;
    }
    #map{
        /**/
        height: calc(100% - 3rem);
        width: 100%;
    }
    #mapMobile{
        position: absolute;
        bottom: 73px;
        height: 65vh;
        border-radius: 20px 20px 0px 0px;
        z-index: 10000;
        padding: 0rem 1rem 0rem 1rem;
    }
    .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    }
    .standort-info {
        z-index: 100;
        position: absolute;
        bottom: 93px;
        padding-left: 30px;
        align-items: center;
    }
    .name {
        color: white;
        padding: 0px;
        margin: 0px;
        font-size: 20px;
    }
    .standort {
        color: white;
        padding: 0px;
        margin: 0px;
        font-weight: 200;
        font-size: 15px;
    }
    .standort-info i {
        color: white;
        font-size: 20px;
    }
    .sidebar {
        position: fixed;
        bottom: -1000px;
        left: 0px;
        z-index: 200;
        color: white;
        background-color: #353d3fcb;
        /*padding-top: 1rem;*/
        border-radius: 20px 20px 0px 0px;
        width: 100%;
        font-size: 20px;
        transition: bottom 1s; /* Animationsdauer */
        z-index: 1000;
    }
    .sidebar.show {
        bottom: 73px; /* Endposition */
    }
    .standortnav {
        display:flex;
        position: absolute;
        bottom: 80px;
        left: 10px;
        width: calc(100% - 65px);
        text-shadow: 0px 0px 4px grey;
        z-index: 1;
    }
    .content-sidebar {
        padding: 15px;
    }
    .content-sidebar-map {
        padding-top: 15px;
    }
    .sidebar-menu-item {
        display: flex;
        gap: 20px;
        padding-top: 10px;
        align-items: center;
        cursor: pointer;
    }
    /* top hotels */
    .topHotel{
        overflow: hidden;
        max-height: 65vh;
    }
    .hotelsfc {
        display: block;
        gap: 0.5rem;
        margin: 0rem 0rem 1rem 0rem;
        padding: 1rem 1rem 0rem 1rem;
        max-height: calc(65vh - (3rem + 3px));
    }
    .hotel {
        flex: 0 1 100%;
    }
    .thimage{
        width: 110px;
        height: 70px;
        aspect-ratio: auto;
    }
    #th-stars{
        line-height: 25px;
        height: 25px;
        max-height: 25px;
        font-size: 14px;
    }
    #th-stars i{
        font-size: 14px;
    }
    .thtitle{
        font-size: 18px;
        line-height: 18px;
        padding: 0px;
        margin-bottom: 3px;
    }
    .subthtitle{
        font-size: 15px;
        line-height: 15px;
    }
    .map {
        display: none;
    }
    #camsmobile{
        overflow-y: hidden;
    }
    .camsmobile{
        max-height: calc(65vh - (3rem + 3px));
        margin: 0rem 0rem 1rem 0rem;
        padding: 0rem 1rem 0rem 1rem;
        overflow-y: scroll !important;
        z-index: 10000;
    }
    /* kamerainfo */
    .infoBody{
        flex-direction: column;
        max-height: calc(65vh - (2rem + 3px));
        margin: 0rem 0rem 1rem 0rem;
        padding: 1rem 1rem 0rem 1rem;
    }
    .caminfo {
        font-size: 15px;
    }
    /* snaps */
    .snapsDetailDiv{
        max-height: calc(65vh - (2rem + 3px));
    }
    .snaps-kacheln{
        gap: 0.5rem;
        margin: 0;
    }
    .snaps-kacheln div {
        flex-basis: 100%;
    }
    .snaps-title{
        font-size: 15px;
        line-height: 15px;
    }
    .snaps-subtitle {
        font-size: 15px;
    }
    /* wetter */
    .weather-grad {
        font-size: 40px;
        padding: 0px;
        margin: 0px;
    }
    .weather-w-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wetterTemp {
        font-weight: 400;
        font-size: 82px;
        line-height: 95px;
    }
    .wind_big {
        line-height: 15px;
        font-size: 15px;
        font-weight: 400;
        text-shadow: 0px 0px 4px grey;
    }
    .wind_big i{
        font-size: 20px;
    }
    .wetter_quelle{
        position: relative;
        bottom: 0px;
        font-size: 12px;
        padding-left: 30px;
        flex-direction: column;
        gap: 0px;
    }
    .daySubline {
        font-weight: 200;
        font-size: 15px;
        line-height: 18px;
        padding-top: 0px;
    }
    .wetterWidget {
        position: absolute;
        bottom: 83px;
        right: 13px;
        border-radius: 24px;
        color: white;
    }
    .wetterWidget {
        background-repeat: no-repeat;
        background-position: right -11px top -5px;
        background-size: auto 49px;
        padding-right: 46px;
        backdrop-filter: blur(1px);
        max-width: 429px;
    }
    .wetterHeuteWert{
        font-size: 20px;
        font-weight: 400;
        line-height: 41px;
    }
    /* tipps */
    .tippsBody{
        flex-direction: column;
        max-height: calc(65vh - (3rem + 3px));
        margin: 0rem 0rem 1rem 0rem;
        padding: 1rem 1rem 0rem 1rem;
    }
    .tippItem{
        flex: 0 1 calc(100%);
    }
    /* suche */
    .sucheTop{
        height: 68px;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    .sucheSelect {
        width: 95px;
    }
    .searchdiv {
        width: 300px;
    }
    #suchebutton{
        width: 40px;
    }
    /* lifte/pisten */
    .layerLP{
        margin: 0rem 0rem 1rem 0rem;
    }
    .lpKachelTxt,
    .lpLink{
        font-size: 15px;
    }
    .lpDetailUebersicht {
        flex-wrap: wrap !important;
        justify-content: center;
        padding: 0rem 1rem 1.5rem 1rem;
    }
    .lpDate{
        position: relative;
        width: 100%;
        right: 0px;
    }
    .lpItem{
        flex: 0 1 calc(100%);
        font-size: 15px;
    }
    .lpLegende{
        flex: 0 1 calc(100%);
    }
    .lpLegendeItemblock{
        display: flex;
        flex-direction: row!important;
        flex-wrap: wrap;
    }
    .lpLegendeItem{
        flex: 0 1 calc(100%);
        padding-top: 5px;
        font-size: 15px;
    }
    .lpLegendeDetail {
        gap: 30px;
    }
    .lpLegendeMob{
        display: inline-block;
    }
    /* 360° Panorama */
    .compass-container {
        top: 30px;
    }
    .compass-directions{
        font-size: 15px!important;
    }
    #PanohotspotMenue{
        bottom: 140px;
        left: 0px;
        border-radius: 0px 20px 20px 0px;
        padding: 4px 8px 4px 4px;
        font-size: 13px;
        opacity: 0.8;
    }
    .SINGLEHOTSPOT{
        /*display: none;*/
    }
    .hotspot-title{
        display: none;
    }
    .hotspotPopup{
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        top: 0px !important;
        left: 0px !important;
        margin-top: 0px !important;
    }
    .hotspot-info {
        z-index: 10;
        position: absolute;
        background: #353d3f !important;
        width: calc(100% - 40px);
        margin: 80px 20px 0px 20px;
    }
    .hotspot-div {
        background: red;
    }
    .hotspot-closebtn{
        display: block;
        position: absolute;
        font-size: 25px;
        font-weight: 100;
        width: 100%;
        height: 100vh;
        padding: 40px 20px 20px 20px;
        z-index: 1;
        text-align: right;
    }
    .hotspot-headline{
        display: flex !important;
        font-size: 16px;
    }
    .hotspot-headline > i {
        margin-right: 8px;
    }
}

@media only screen and (max-width: 350px) {
    /* Archiv */
    #mobile-selectedImage {
        width: 150px;
    }
    .fixed-overlay {
        font-size: 16px;
    }
    /* kamerinfo */
    .caminfo {
        font-size: 13px;
    }
    /* poi */
    .snaps-subtitle {
        font-size: 13px;
        line-height: 13px;
    }
    /* wetter */
    .wetterTemp {
        font-size: 60px;
    }
    .wind_big {
        padding-top: 0px!important;
    }
}