/* Fonts */
/* Fonts */
@font-face {
    font-family:'fontregular';
    src:url("../fonts/fontregular.woff2") format("woff2"),
    url("../fonts/fontregular.woff") format("woff"),
    url("../fonts/fontregular.ttf") format("truetype");
    font-weight:normal;
}

@font-face {
    font-family:'fontbold';
    src:url("../fonts/fontbold.woff2") format("woff2"),
    url("../fonts/fontbold.woff") format("woff"),
    url("../fonts/fontbold.ttf") format("truetype");
    font-weight:normal;
}

html {
	-ms-touch-action: none;
    overflow: hidden;
    width: 100%;
}

/* Colors */
:root
{
    --main-color:#11283f;
    
   --second-color:#FC451C;


    /* For Scrollbar Thumbnail Styling */
    --sidebar:#c4cad0;

    /* For all white Elements */
    --white:white;
}


div#fullscreen-button {
    display: none!important;
}

/* Colorizing SVGs to defined Colors */
/*
.colorize-blue {
    filter: brightness(0) saturate(100%) invert(13%) sepia(11%) saturate(3255%) hue-rotate(171deg) brightness(98%) contrast(94%);
}

.colorize-second-color {
    filter: brightness(0) saturate(100%) invert(29%) sepia(90%) saturate(1678%) hue-rotate(350deg) brightness(102%) contrast(97%);
}
*/


.colorize-white
{
    filter: brightness(0) saturate(100%) invert(100%) sepia(59%) saturate(0%) hue-rotate(323deg) brightness(110%) contrast(101%);
}

.colorize-grey
{
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(191deg) brightness(90%) contrast(83%);
}



/* Layout */
body
{
    width:100vw;
    height:100vh;
    position:relative;
    background-color:var(--white);
    font-family:'fontregular';
    line-height:120%;
    font-size:12px;
    color:var(--main-color);
    overflow-y: scroll;
    overflow-x:hidden; 
    -webkit-overflow-scrolling: touch;
}

#content
{
    width:100%;
    position:relative;
    box-sizing:border-box;
    padding:2%;
    min-height:100vh;
}

#top-left {
    position: absolute; /* Anil */
    width:50%;
	z-index:2;			/* Anil */
    pointer-events:none;
}

#top-right {
    position: absolute;	/* Anil */
	float:right;
    width:93%;
	z-index:2;			/* Anil */
  padding: 2% 0% 2% 2%;
}

#bottom
{
    position:absolute;
    bottom:0px;
    left:-2px;
    z-index:2;
    width:auto;
}


.poweredby a
{
    color:var(--main-color);
}


.sbl 
{
    transform-origin:bottom left;
}

/*
.image-container
{
    width:100%;
    float:left;
    margin-top:80px;
}
*/
.bottom-container
{
    width:33.33%;
    float:left;
    position:relative;
}


#control-height {
    height: 100vh;
    width: 0;
    position: absolute;
}



#button_select
{
    width:100px;
    height:20px;
    position:fixed;
    background-color:var(--main-color);
    color:white;
    text-align:center;
    top:10px;
    right:10px;
    z-index:5;
}



/* Elements */
h1
{
    font-family:'fontbold';
    font-size:2.2vw;
}

h2
{
    font-family:'fontbold';
    font-size:1.8vw;
    margin-top:10px;
}

p
{
    font-family:'fontregular';
    font-size:1vw;
    margin-top:1em;
    line-height:140%;
}

b, strong
{
    font-family:'fontbold';
}


.custom-select
{
    position:relative;
    background:white;
    margin-top: 30px;
    display: inline-block;
    padding-right:0px;
    pointer-events:all;
    cursor:pointer;
    visibility:hidden!important;
}


.select_box{
    width:auto;
    position: relative;
    cursor:pointer;
  }

  #dropdown_value
  {
      visibility:hidden!important;
  }



   .hidearrow
   {
        width:15%;
        height:100%;
        position:absolute;
        background-color:var(--white);
        z-index:99;
        right:0px;
        top:0px;
        pointer-events:none;
   }


  .select_box select{
    width:100%;
    border: 0;
    position: relative;
    z-index: 99;
    background: none;
    cursor: pointer;
  }


select {
    background: white;
    border:none;
    padding: 0.6em 0.5em 0.5em 0.5em;
    padding-right:3em;
    width:100%;
    font-family:'fontregular',sans-serif;
    font-size:1vw;
    position:relative;
    color:var(--main-color);
    box-sizing:border-box;
    cursor:pointer;
    -webkit-appearance:none!important;
    -moz-appearance: none;
	appearance: none;
}


option
{
    width:100%!important;
    -webkit-appearance:none!important;
    cursor:pointer;
}





.image-desktop {
    width:40%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
}


.image-mobile {
    height:40%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    display:none;
}


.toggle-button {
    float:left;
    /* margin-right:10px;
    margin-top:0.75vw;
    position:relative;*/
}


.button-inner
{
    height:1.1vw;
    width: 1.1vw;
    background-color:white;
    position:absolute;
    border-radius:1.1vw;
    left:0.2vw;
    top:51%;
    transform:translateY(-50%);
}


.icon-button
{
    width:2.6vw;
    color:var(--toggle-grey);
}


.toggle-button.active .icon-button
{
    color:var(--main-color);
}

.toggle-button.active .button-inner
{
    left:1.3vw;
    background-color: white;
}


.button-red
{
    background-color:var(--second-color);
    color:white;
    font-family:'fontbold';
    font-size:1vw;
    padding:10px;
    padding-top:0.75vw;
    padding-bottom:0.75vw;
    padding-left:0.5vw;
    padding-right:0.5vw;
    text-decoration:none;
    float:left;
    margin-top:20px;
    text-align:center;
}

#sidebar p, #sidebar a
{
    margin-top:5px;
}



#sidebar .button-red
{
    width:100%;
    box-sizing:border-box;
    margin-top:0px;
    cursor:pointer;
}

#sidebar a:not(.button-red)
{
    font-family: 'fontregular';
    font-size: 1vw;
    line-height: 130%;
    color:var(--second-color);
    text-decoration:none;
    cursor:pointer;
}



.ansprechpartner
{
    width:100%;
    float:left;
    height:auto; 
    position:relative; 
    margin-bottom:50px; 
}

#leave_whg_mobile
{
    display:none; 
}

.fancybox-button
{
    background-color:var(--main-color);
}

.fancybox-inner 
{
    width:100vw;
    height:100vh; 
    overflow:hidden; 
}

.fancybox-inner .image-slider
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    max-width: 1024px;
}


.fancybox-bg
{
   background-color:var(--main-color);
   opacity:0.7;
}


.sidebar-content
{
    width:100%;
    float:left;
    display:block;
    min-height:100px;
    position:relative;
    margin:1em 0;
}

.sidebar-content-bg
{
    background-color:var(--main-color);
    opacity:0.1;
    width:100%;
    height:98%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:0;
    pointer-events:none;
}


#lightbox-content .slider-prev
{
    display:none;
}

#lightbox-content .slider-next
{
    display:none;
}




.fr
{
    float:right;
}

.fl
{
    float:left;
}


*:focus {
    outline: none;
}


#gradient
{
    position:fixed;
    bottom:0px;
    width:100%;
    height:20vh;
    z-index:1;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    pointer-events:none;
}


.icon {
    color:var(--main-color);
    height:2vw;
    width:auto;
    cursor: auto !important;
}

.center
{
    width:6.5vw;
    position:absolute;
    left:50%;
    bottom:0px;
    transform:translateX(-50%);
}


.icon-towhg
{
    display:none;
}


.center .icon
{
    width:1.5vw;
    height:auto;
    margin-right:1vw;
}

.center .icon:last-of-type
{
    margin-right:0px;
}

.icon-text:hover, .icon:hover
{
    cursor:pointer;
}

.icon-text
{
    margin-right:2%;
}

.icon-text .icon
{
    margin-right:10px;
}


.icon-extend
{
    margin-top: 0.4vw;
    height:1.9vw;
    display: none;
}


.icon-text p
{
    margin-top:0px;
    height:100%;
    line-height:250%;
}

.icon-startposition
{
  margin-top: 0.4vw;
}





.logo
{
    width:5.5vw;
    position:absolute;
    right:0px;
    bottom: -0.25vw;
    opacity:0.5;
    color: var(--main-color) !important;
}

.checkboxstatus{
    float: left;
    cursor: pointer;
    width: 1.5vw;
    height: 1.5vw;
    margin-right: 0.6vw;
    margin-top: 0.6vw;
}



#wrapper {
	position: absolute;
	z-index:10;
	top: 50px;
	bottom: 50px;
	left: 50px;
	right: 50px;
	background:none;
	overflow: hidden;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

#scroller ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}

#scroller li {
    padding: 0;
    height: 0;
    line-height: 40px;
    border-bottom: none;
    border-top: none;
    background-color: #fafafa;
    font-size: 14px;
}


#lightbox-content .lightbox-trigger
{
    display:none; 
}


#lightboxbg 
{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    left: 0px;
    top: 0px;
    opacity:0.7; 
}


#customlightbox 
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9;
    display:none; 
}


/* Icons */
.icon
{
    background-image:url('../images/icons.svg');
    background-repeat:no-repeat;
}

.icon-mouse
{
    /* Image Ratio: 0,537 */
    width: 13vw;
    height: calc(13vw * 0.537);
    margin: 0 auto;
    display: table;
    background-position: left 10% top 7%;
    background-size: 320% auto;
}


.icon-arrow-down
{
    /* Image Ratio: 0,561 */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 1.5vw;
    height: calc(1.5vw * 0.561);
    background-position: left 60% top 53%;
    background-size: 1000% auto;
}



.icon-arrow-right
{
    /* Image Ratio: 0,561 */
    position: absolute;
    right: 1vw;
    top: 1.65vw;
    z-index: 2;
    width: 3vw;
    height: calc(3vw * 0.561);
    background-position: left 30% top 53%;
    background-size: 850% auto;
    cursor: pointer!important;
}



.icon-holder-blue
{
    width:3vw;
    height:3vw;
    float:left;
    background-color:var(--main-color);
    position:relative;
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}


.icon-holder-red
{
    width:3.5vw;
    height:3vw;
    float:left;
    background-color:var(--second-color);
    position:relative;
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}


.icon-arrow-left
{
    /* Image Ratio: 0,561 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 0.561);
    background-position: left 8% top 34%;
    background-size: 1100% auto;
    cursor: pointer!important;

}



.icon-rundflug
{
    /* Image Ratio:1 */
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 1);
    background-position: left 78% top 33%;
    background-size: 1000% auto;
    cursor: pointer!important;
}




.icon-daynight
{
    /* Image Ratio:1 */
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 1);
    background-position: left 95% top 33%;
    background-size: 1000% auto;
    cursor: pointer!important;
}



.icon-screenshot
{
    /* Image Ratio: 0,841 */
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 0.841);
    background-position: left 24% top 34%;
    background-size: 1000% auto;
    cursor: pointer!important;

}




.icon-position
{
    /* Image Ratio: 1 */
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 1);
    background-position: left 42% top 33.5%;
    background-size: 1000% auto;
    cursor: pointer!important;

}


.icon-fullscreen
{
    /* Image Ratio: 1 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 1);
    background-position: left 60% top 33.5%;
    background-size: 1000% auto;
    cursor: pointer!important;
}



.icon-prev
{
        /* Image Ratio: 0,561 */
    position: absolute;
    right: 50%;
    top: 52%;
    z-index: 2;
    width: 2vw;
    height: calc(2vw * 0.561);
    background-position: left 9% top 53%;
    background-size: 1300% auto;
    cursor: pointer!important;
    transform: translateX(50%) translateY(-50%);
}


.icon-next
{
        /* Image Ratio: 0,561 */
        position: absolute;
        right: 50%;
        top: 51.5%;
        z-index: 2;
        width: 2vw;
        height: calc(2vw * 0.561);
        background-position: left 9% top 52.7%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%) rotate(180deg);
}


.icon-zoom
{
        /* Image Ratio: 1 */
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 2vw;
        height: calc(2vw * 0.561);
        background-position: left 21.1% top 53%;
        background-size: 1400% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%);
}


.icon-arrow-toggle-sidebar
{
    width: 3vw;
    height: 3vw;
    background-color: var(--main-color);
    position: absolute;
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
    left: 0px;
    bottom: 1.5vw;
    z-index: 4;
}




#tooltip
{
    color: var(--main-color);
    position: absolute;
    left: 4vw;
    bottom:5vw;
    z-index: 2;
    display:none;
    width:100vw;
}



.mobile-flip-container
{
    width:60px;
    height:60px;
    position: absolute;
    right:9px;
    top:0px;
    z-index:10; 
}


.flip {
    transform: rotate(-180deg);
}


.sl-overlay
{
    background:var(--main-color); 
}



  .lds-spinner {
    color: var(--second-color);
    display: block;
    position: absolute;
    width: 80px;
    height: 80px;
    transform: translateX(-50%) translateY(-50%) scale(0.5);
    left: 50%;
    top: 50%;
}


  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: var(--second-color);
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }


div#opener {
    background-color: var(--white);
    width:100vw;
    height:100vh;
    box-sizing: border-box;
    position:fixed;
    z-index:2000;
    left:0px;
    top:0px;
}



.fancybox-inner .slider-next, .fancybox-inner .slider-prev, .fancybox-inner .lightbox-trigger
{
    display:none;
}


.fancybox-toolbar
{
    opacity:1!important;
    visibility:visible!important;
}

.fancybox-button--zoom, .fancybox-button--close
{
    color:white!important;
    cursor:pointer;
}


#opener-content
{
    width: 50vw;
    border: 0.3vw solid var(--main-color);
    height: auto;
    float: left;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: border-box;
    padding-top: 6vw;
    padding-bottom: 2vw;
    padding-left: 5vw;
    padding-right: 5vw;
}


#opener-bg
{
    position:absolute;
    left:0px;
    top:0px;
    background-color:var(--main-color);
    opacity:0.15;
    z-index:0;
    width:100%;
    height:100%;
    pointer-events:none;
}


#opener-content p, #opener-content h1, #opener-content h2
{
    float:left;
    width:100%;
}

#opener-content h2
{
    margin-bottom:1vw;
}




.tcenter
{
    text-align:center;
}


#button_start
{
    cursor: pointer;
    width: 100%;
    /* float: left; */
    box-sizing: border-box;
    padding-top: 1vw;
    padding-bottom: 1vw;
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    float: unset;
    margin-top: 0px;
    height: 100%;
    z-index: 3;
    line-height:90%; 
}


#button_start p 
{
    cursor:pointer;
    width:100%;
    position:absolute;
    left:0px;
    top:50%;
    z-index:3;
    font-family:'fontbold';
    margin-top:0px;
    margin-bottom:0px; 
    transform:translateY(-50%); 
    line-height:120%; 
}



.wrapper
{
    display:flex;
    align-items:stretch;
    width:100vw;
    height:100vh;
    box-sizing:border-box;
    padding:1.5vw;
    flex:1;
    position:relative;
    border:2px solid green; 
}


.wrapper-inner
{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1.5vw;
    flex: 0 0 100%;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    position:relative;
}



#sidebar
{
    width:22vw;
    height:calc(100% - 3vw);
    position:absolute;
    /*right:-23.5vw;*/
    right:1.5vw;
    z-index:2;
    background-color:var(--white)!important;
    top:1.5vw;
    box-sizing:border-box;
    padding:1.5vw;
    overflow-y:scroll;
}


.sidebar-height 
{
    background-color:var(--white)!important; 
    width:100%;
    height:auto; 
}


#swipe-trigger
{
    width: 70%;
    float: left;
    position: relative;
    margin-right: 0px;
    padding: 0px;
}


.image-slider
{
    width: 100%;
    position: relative;
    float: left;
    overflow: hidden!important;
    margin-top:10px; 
}


#lightbox-content
{
    display:none; 
}

.custom-arrow
{
    position: absolute;
    top: 40%;
    right: 5px;
    content: "";
    z-index: 100!important;
    pointer-events: none;
    background-image: url('../images/icons.svg');
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    top: 60%;
    z-index: 2;
    width: 3vw;
    height: calc(3vw * 0.561);
    background-position: left 30% top 53%;
    background-size: 650% auto;
    cursor: pointer!important;
    transform: rotate(90deg) translateX(-50%) translateY(-15%);
    cursor:pointer;
}



/* Lightbox UI */ 

.sl-wrapper .sl-close
{
    color:var(--white); 
    background-color:var(--main-color); 
}

.sl-wrapper button:hover 
{
    opacity:1;
}


.sl-wrapper .sl-navigation button.sl-next 
{
    font-size: 30px;
    background-color: var(--main-color);
    color: white;
    height: 40px;
    margin-top: -20px;
    line-height: 40px;
}

.sl-wrapper .sl-navigation button.sl-prev 
{
    font-size: 30px;
    background-color: var(--main-color);
    color: white;
    height: 40px;
    margin-top: -20px;
    line-height: 40px;
}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: var(--main-color) var(--sidebar);
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: var(--sidebar);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 0px;
    border: 5px solid var(--sidebar);
  }




#annotation
{
    position: absolute;
    background-color:var(--white);
    margin: 3.5%;
    top:0px;
    left:0px;
    transform:translate(50px, 613.419px);
    box-sizing:border-box;
    padding:0.4vw 0.5vw 0.4vw 0.5vw;
    cursor:pointer;
    z-index:2;
    pointer-events:none;
    visibility:hidden;
}


.annotation-border-top
{
    width: 97%;
    position: absolute;
    height: 0.3vw;
    background-color: var(--main-color);
    left: 0px;
    top: 0px;
    transform: translateY(-0.3vw);
}

.annotation-border-left
{
    width:0.3vw;
    position: absolute;
    height: 97%;
    background-color: var(--main-color);
    left: 0px;
    top: 0px;
    transform: translateX(-0.3vw) translateY(-0.3vw);
}


#annotation p
{
    font-size:0.9vw;
    margin-top:0px;
}


.sidebar-title
{
    font-family:'fontbold';
    font-size:2.2vw;
    width:100%;
    float:left;
}



.smalltext
{
    font-size:0.8vw;
    color:var(--main-color);
    float:left;
    font-family:'fontregular';
    margin-top:2px;
    opacity:0.4;
}


.line
{
    width:100%;
    float:left;
    height:2px;
    background-color:var(--main-color);
    margin-top:0.5vw;
    margin-bottom:0.5vw;
    opacity:0.25;
}


.third
{
    width:34%;
    float:left;
    margin-right:3%;
    box-sizing:border-box;
    position:relative;
}

.third-last
{
    width:25%;
    margin-right:0px;
    border-right:0px;
}


.w30
{
    width:30%;
}

.w38
{
    width:38%;
}

.w26
{
    width:26%;
}


h4
{
    font-family: 'fontbold';
    font-size: 1.3vw;
    color:var(--main-color);
}

#SIDEBAR_h4_KOSTENART
{
    margin-left:5px;
    margin-top:0.4vw;
}


.slick-slider
{
    width:100%;
    float:left;
    position:relative;
}


.slick-prev, .slick-next
{
    display:none!important;
}


.w48
{
    width:48%;
    float:left;
    position:relative;
}

.w4
{
    width:4%;
    float:left;
    position:relative;
}

.w25
{
    width:25%;
    float:left;
    position:relative;
}

.w75
{
    width:75%;
    float:left;
    position:relative;
}

.w100
{
    width:100%;
    float:left;
    position:relative;
}


.slick-slide img
{
    width:100%;
    height:auto;
}


.slider-prev
{
    width: 1.75vw;
    height: 1.5vw;
    background-color: var(--main-color);
    position: absolute;
    top:5px;
    z-index: 2;
    left: 5%;
}

.slider-next
{
    width: 1.75vw;
    height: 1.5vw;
    background-color: var(--main-color);
    position: absolute;
    top:5px;
    z-index: 2;
    left:calc(5% + 1.75vw);
}


#customlightbox .slider-prev-fancybox
{
    z-index: 9999999;
    top: 50%;
    left: 0px;
    width: 3vw;
    height: 3vw;
    transform: translateY(-50%);
    position: absolute;
    background-color: var(--main-color);

}

#customlightbox .slider-next-fancybox
{
    z-index: 9999999;
    top: 50%;
    right: 0px;
    left: unset;
    width: 3vw;
    height: 3vw;
    transform: translateY(-50%);
    position: absolute;
    background-color: var(--main-color);

}


#customlightbox .slider-next-fancybox .icon-next
{
    position: absolute;
    right: 50%;
    top: 51.5%;
    z-index: 2;
    width: 3vw;
    height: calc(3vw * 0.561);
    background-position: left 9% top 52.7%;
    background-size: 1300% auto;
    cursor: pointer!important;
    transform: translateX(50%) translateY(-50%) rotate(180deg);
}


#customlightbox .slider-prev-fancybox .icon-prev
{
    position: absolute;
    right: 50%;
    top: 52%;
    z-index: 2;
    width: 3vw;
    height: calc(3vw * 0.561);
    background-position: left 9% top 53%;
    background-size: 1300% auto;
    cursor: pointer!important;
    transform: translateX(50%) translateY(-50%);
}



.fancybox-button--close
{
    color: white!important;
    cursor: pointer;
    position: absolute;
    right: 0px;
    z-index: 11;
}



.lightbox-trigger
{
    width: 1.5vw;
    height: 1.5vw;
    background-color: var(--main-color);
    position: absolute;
    top: 5px;
    z-index: 2;
    right: 5%;
}


.checkbox-container
{
    background-color: rgba(255,255,255,0.35);
    width: auto;
    height: 3vw;
    position: relative;
    padding: 0.2vw 0.5vw 0.5vw 0.5vw;
    padding-left:1.2vw;
    padding-right:1vw;
    box-sizing: border-box;
}

.pr0
{
    padding-right:0px;
}

.pl0
{
    padding-left:0px;
}


.checkbox
{
    width: 1.1vw;
    height: 1.1vw;
    margin-top:0px;
    opacity:1;
    border:2px solid var(--main-color);
    cursor:pointer;
    background-color:var(--white);
    position:relative;
}

.checked
{
    background-color:var(--main-color);
}



.icon-checked
{
        /* Image Ratio: 0,925 */
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 2;
        width: 1.25vw;
        height: calc(1.25vw * 0.925);
        background-position: left 72% top 53.2%;
        background-size: 1900% auto;
        cursor: pointer!important;
        display: none;
        transform: translateX(-50%) translateY(-50%);
}




.checked .icon-checked
{
    display:block;
}


.checkbox-container p
{
    margin-top:0px;
    color:var(--main-color);
    opacity:1;
    margin-left:0.5vw;
    margin-top:0vw;
    font-size:1vw;
}





.hcenter
{
    width:auto;
    display:table;
    margin:0 auto;
    transform:translateY(50%);
}


.icon-mouse
{
    /* Image Ratio: 0,537 */
    width: 10vw;
    height: calc(13vw * 0.537);
    margin: 0 auto;
    display: table;
    background-position: left 10% top 5%;
    background-size: 320% auto;
}


@media (min-width: 1170px){
.icon-logo
{
   right: 1.5vw!important;
   bottom: 1.5vw;
}}

.icon-logo
{
   /* Image Ratio:  0,492 */
   position: absolute;
   z-index: 2;
   width: 8vw;
   height: calc(8vw * 0.492);
   background-position: left 12% top 92%;
   background-size: 370% auto;
   cursor: pointer!important;
   opacity:0.5;
}

.icon-logo:hover
{
   /* Image Ratio:  0,492 */
   opacity:1;
}



.wrapper .icon-mouse
{
    /* Image Ratio: 0,537 */
    position: absolute;
    right: 12vw;
    bottom: 1.5vw;
    z-index: 2;
    width: 8vw;
    height: calc(8vw * 0.537);
    margin: 0 auto;
    display: table;
    background-position: left 10% top 7%;
    background-size: 320% auto;
    opacity:0.5;
    pointer-events:none;
}



.logo-opener
{
    /* Image Container Ratio: 0,66 */
    width: 20vw;
    height: calc(20vw * 0.66);
    max-width: 240px;
    max-height: 160px;
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%) translateY(-60%);
    background-position: left 69% top 94.5%;
    background-size: 275% auto;
    z-index: 2;
}



.sidebar-flipper
{
    width: 3vw;
    height: 3vw;
    float: left;
    position: relative;
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}




/* Loader */
#loading_container
{
    width:100%;
    padding:1.5vw;
    background-color:var(--white);
    float:left;
    position:relative;
    box-sizing:border-box;
}


#loading_bar
{
   position:absolute;
   left:0px;
   top:0px;
   height:100%;
   width:0%;
   background-color:var(--main-color);
}


#loading_progress
{
    color:var(--white);
    position:absolute;
    z-index:2;
    left:3%;
    top:45%;
    transform:translateY(-50%);
    font-family:'fontbold';
    margin-top:0px;
    line-height:0px;
}



.powesecond-colorby
{
    width:100%;
    float:left;
    margin-top:2vw;
    color:var(--main-color);
    opacity:0.5;
    font-family:'fontregular';
    font-size:1vw;
}

.powesecond-colorby a
{
    color:var(--main-color);
    text-decoration: none;
}

.powesecond-colorby a:hover
{
    color:var(--main-color);
        opacity:1.0 !important;
}




.label-mobile, .mobile-info
{
    display:none;
}

.label-mobile
{
    cursor:pointer;
}


#toolbar
{
    width:55vw;
    left:3vw;
    position:absolute;
    z-index:2;
    bottom:1.5vw;
}


.annotation-line
{
    position: absolute;
    width: 4.5vw;
    height: 0.3vw;
    background: linear-gradient(-90deg, var(--main-color) 30%, rgba(255,255,255,0) 100%) !important;
    left: -3.9vw;
    top: -1.8vw;
    transform: rotate(45deg);
    z-index: 0;
}


.hiddenimportant
{
    visibility:hidden!important;
}


.vline
{
    width:2px;
    background-color:var(--main-color);
    opacity:0.25;
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
}


#sidebar .ansprechpartner p, #sidebar .ansprechpartner a
{
    margin-top:0px;
}



.close-sidebar-mobile
{
    position: absolute;
    right: 15vw;
    display:none;
}


.mobile-flip-bottom
{
    width: 60px;
    height: 60px;
    position: absolute;
    right: 40px;
    top: 8px;
    transform: rotate(180deg) translateY(17px);
}








.fullscreen-flipper-flipped
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(180deg);
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}


#h4_ETAGE {
display:none;
}


#button_select
{
    visibility:hidden;
}



.md-select
{
    position: absolute;
    top:8em;
    left:3vw;
    display: block;
    margin: 10px 0 8px 0;
    padding-bottom: 2px;
    /* position: relative; */
    min-width: 300px;
    z-index:9;
    font-size:1vw;
    font-family:'fontregular',sans-serif;
    color:var(--main-color);
}


 .md-select [type=button] {
    background: var(--white);
    color: var(--main-color);
    cursor: default;
    display: block;
    line-height: 28px;
    padding: 0.3em 0.8em 0.3em 0.8em;
    position: relative;
    text-align: left;
    text-shadow: none;
    width: 100%;
    z-index: 1;
    outline: none;
    overflow: hidden;
    border: none;
    font-size: 1vw;
    font-family: 'fontregular',sans-serif;
    color: var(--main-color);
 }


      .md-select [type=button]:after {
        content: '\25be';
        float: right;
        padding-right: 16px;
        display:none;
      }

    .md-select ul[role=listbox] {
      background-color: var(--white);
      cursor: default;
      list-style: none;
      line-height: 28px;
      overflow: hidden;
      margin: 0;
      max-height: 0;
      position: absolute;
      padding: 0;
      transition: none;
      width:auto;
      display:inline-block;
      top:0px; 
    }

      .md-select li {
        height: 28px;
        margin: 0;
        padding: 3px 10px 4px 10px;
        outline: none;
        overflow: hidden;
        white-space: nowrap;
        width: auto;
        box-sizing: content-box;
      }

        .md-select li:focus, .md-select li:hover, .md-select li.active {
          background:var(--main-color);
          color:var(--white);
        }

    .md-select.active ul {
      max-height: 40vh;
      overflow: auto;
      padding:0px;
      z-index: 2;
      transition: none;
      top: 0px;
    }


    .md-select.active .custom-arrow
    {
        display:none; 
    }


.sonnenstand-button-container
{
    border:2px solid var(--main-color);
    width:auto;
    float:left;
    transform:translateY(-3px); 
}


.sonnenstand-button 
{
    width:1.1vw;
    height:1.1vw;
    margin-top:0px;
    opacity:1;
    cursor:pointer;
    background-color:var(--white);
    position:relative;
    float:left;
    padding:2px; 
    padding-left:4px;
    padding-right:4px;
}


.sonnenstand-button.active 
{
    background-color:var(--main-color);
    color:var(--white);
}

.sonnenstand-button.active p 
{
    color:var(--white);
}

.sonnenstand-button p 
{
    margin-left:0px;
    width:100%;
    float:left;
    font-size:0.9vw; 
    line-height:120%;
}


.sonnenstand-8 
{
  padding-left:2px;
}


.sonnenstand-20 
{
   padding-right:2px; 
}




.mt01 
{
    margin-top:0px!important; 
}



.ml02 
{
    margin-left:0.2vw!important; 
}




#preloader-wrapper 
{
    width:75%;
    padding-right:15%; 
    box-sizing:border-box;
    position: fixed;
    z-index: 10;
    left: 0px;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
}


.preloader-div {
    position: absolute!important;
    left: 25%!important;
    top: 50%!important;
    right: auto!important;
    bottom: auto!important;
    width: 50%!important;
    height: auto;
    padding: 1.5vw!important;
    transform: translateY(-50%)!important;
}



#preloader-container {
    width: 100%!important;
    background-color: var(--white)!important;
    float: left!important;
    position: relative!important;
    box-sizing: border-box!important;
    margin-left:0px!important; 
    height:100%!important; 
}


.preloader-bar
{
    position: absolute!important;
    left: 0px!important;
    top: 0px!important;
    height: 100%!important;
    border-radius:0px!important;
    background-color: var(--main-color)!important;
}


.preloader-container {
    position: absolute;
    left: 0%;
    top: auto;
    right: 0%;
    bottom: 0%;
    width: 100%!important;
    height: 100%!important;
    margin-right: auto;
    margin-left: auto;
    border-radius:0px!important;
    background-color:var(--white)!important;
}


.preloader-desc 
{
    position: absolute;
    transform: translateY(-5vw);
    left: 0px;
    font-size:1vw;
}

#preloader_progress {
    color: var(--white)!important;
    position: absolute!important;
    z-index: 1000!important;
    font-family:'fontbold';
    left: 3%!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    margin-top: 0px!important;
    line-height: 100%!important;
    font-size:1vw; 
}



.hideDesktop
{
    display:none;
}


#leave_whg 
{
    display:none; 
}



#STARTANSICHT_APPARTEMENT, #MAINSCENE, #APPARTEMENT_AO, #APPARTEMENT_COLOR 
{
    display:none;
}



#switch2 
{
    padding-left:0.1vw; 
}




#bottom > div.btn-group
{
    display:none; 
}



#fullscreen-button
{
    display:none!important; 
}

/* Mobile Layout */
@media all and (max-width:1170px) 
{


    .sidebar-height 
    {
        background-color:var(--white)!important; 
        width:100%;
        height:auto; 
        position:relative;
        float:left; 
    }


    #preloader-wrapper {
        width: calc(100% - 40px);
        padding-right: 15%;
        box-sizing: border-box;
        position: fixed;
        z-index: 10;
        left: 20px;
        top: 30%;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .preloader-div
    {
        left:0px!important; 
        width:100%!important;
        padding:0px!important; 
        height:30px;
    }


    .preloader-desc 
    {
        position: absolute;
        transform:translateY(-65px);
        left: 0px;
        font-size:15px;
    }


    #preloader_progress
    {
        font-size:15px; 
    }
    

    .hideDesktop
    {
        display:block;
    }

    .sonnenstand-button
    {
        width:18px;
        height:18px; 
    }

    .sonnenstand-button p
    {
        line-height:130%; 
    }

    .container-sonnenstand {
        margin-right: 0px;
        position: absolute;
        right:0px;
    }

    #switch2 
    {
        position: absolute;
        left: 50%;
        transform: translateX(-75%);
        float: unset;
    }

    .mt01
    {
        margin-top:2px!important; 
    }

    .ml02
    {
        margin-left:3px!important; 
    }

    .lds-spinner {
        color: var(--second-color);
        display: block;
        position: absolute;
        width: 80px;
        height: 80px;
        transform: translateX(-50%) translateY(-50%) scale(0.5);
        left: 50%;
        top: 50%;
      }



    #SIDEBAR_h4_KOSTEN
    {
        margin-top:1px;
    }

    .close-sidebar-mobile
    {
        display:block;
    }


    .third
    {
        padding-top:0px;
    }

    .mobilepadbox
    {
        width: 100%;
        float: left;
        margin-top:0px;
        padding-bottom:0px;
    }

    #switch
    {
        padding-left:0px;
    }


    #content
    {
        padding:15px;
    }

    .image-desktop
    {
        display:none;
    }

    .icon-extend
    {
        display:none;
    }

    .center-container
    {
        display:none;
    }

    .bottom-container
    {
        width:50%;
    }


    #top-left, #top-right
    {
        width:100%;
        float:left;
    }


    .icon-text
    {
        width:50%;
        float:right;
        margin-right:0px;
        position:relative;
    }

    .icon-text p
    {
        margin-top:10px;
        line-height:100%;
    }

    .icon-text:last-of-type
    {
        margin-right:5%;
    }

    .icon-text:first-of-type
    {
        width:45%;
    }

    .image-mobile
    {
        display:block;
    }


    .custom-select
    {
        width:100%;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 40px;
        position: absolute;
        z-index: 4;
    }

    select
    {
        font-size:16px;
        padding:5px 5px 0px 10px;
        height:40px;
    }


    .select-down-icon
    {
        width:17px;
    }


    h1
    {
        font-size:26px;
    }

    h2
    {
        font-size:20px;
    }


    .wrapper h1
    {
        font-size:18px;
    }

    .wrapper h2
    {
        display:none;
    }

    .wrapper-inner h1, .wrapper-inner h2
    {
        color:var(--main-color);
    }

    p
    {
        font-size:15px;
        margin-top: 15px;
    }


    .wrapper .icon-mouse
    {
        display:none;

    }


    .icon-button
    {
        width:50px;
        height:auto;
    }



    .button-inner
    {
        left:2px;
        background-color: white;
        width:20px;
        height:20px;
        border-radius:45px;
    }


    .button-second-color
    {
        font-size:15px;
            margin-top: 10px;
    }


    .logo
    {
        width:85px;
    }


    #bottom
    {
        top: 100px;
        width: calc(100% - 40px);
        left: 20px;
        height: 40px;
    }


    .checkboxstatus
    {
        float: left;
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: 6px;
    }



    #switch_input2, .sonnenstand-button-container, .status
    {
        margin-right:10px!important;  
    }


    .label-status, .label-stadtplan, .label-uhr
    {
        margin-left:0px!important; 
    }


    /* Opener */
    #opener-content
    {
        width:90vw;
        padding-top:70px;
        padding-bottom:25px;
    }

    .powesecond-colorby
    {
        font-size:12px;
    }


    .logo-opener
    {
        width:240px;
        height:160px;
        zoom: 0.8;
    }


    #loading_container
    {
        height:30px;
    }


    .icon-mouse
    {
        width:160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .icon-arrow-down
    {
        width:25px;
        height:calc(25px * 0.561);
    }



    .wrapper-inner
    {
        padding:0px;
    }


    .icon-logo
    {
        width:80px;
        height:calc(100px * 0.492);
        bottom:20px;
        right: 20px;
    }


    #annotation
    {
        display:none;
    }


    .icon-arrow-toggle-sidebar, .rundflug, .screenshot, .fullscreen, .container-quickfacts
    {
        display:none;
    }

    #tooltip
    {
        display:none!important;
    }

    .position
    {
        background-color: transparent;
        position: fixed;
        bottom: 6vh;
        width: 50px;
        height: 50px;
        left: 6%;
        transform: translateY(-320%);
    }

    .checkbox-container
    {
        background-color:unset;
        width:auto;
    }

    .checkbox
    {
        width:18px;
        height:18px;
    }

    .icon-checked
    {
        width:17px;
        height:calc(17px * 0.925);
    }

    .hcenter
    {
        transform:translateY(5px);
    }

    .checkbox-container p
    {
        font-size:14px;
    }

    .icon-holder-second-color
    {
        background-color:unset;
        width:auto;
        height:28px;
    }

    .icon-position
    {
        width:50px;
        height:50px;
        float: left;
        position: relative;
        left: unset;
        transform: translateX(-3px) translateY(-8px);
    }


    .label-mobile
    {
        display: block;
        margin-left: 2px;
        margin-top: 7px;
        font-size: 14px;
    }



    .container-status
    {
        margin-right:30px;
    }



    .wrapper
    {
        padding:20px;
        padding-bottom:10px;
    }



    .container-status p
    {
        margin-top:3px;
    }


    .mobile-info
    {
        display:block;
        position: absolute;
        bottom: 20px;
        left: 20px;
        color:var(--main-color);
        z-index:2;
    }


    #toolbar
    {
        width:calc(100vw - 40px);
        left:0px!important;
        position:relative;
    }


    #sidebar
    {
        width: 100vw;
        height: 100%;
        position: absolute;
        right: 0px!important;
        z-index:1000;
        background-color:var(--white)!important;
        box-sizing: border-box;
        padding: 20px;
        padding-top:12px; 
        overflow-y:scroll!important;
        overflow-x:hidden;
        top: unset;
        bottom:-100%;
    }


    .sidebar-title
    {
        font-size:28px;
        width:auto;
    }

    .smalltext
    {
        font-size:14px;
        margin-top:0px!important;
    }

    h4
    {
        font-size:20px;
    }


    #button_start
    {
        padding-top:7px;
        font-size:15px;
    }


    #sidebar .button-red
    {
        font-size:15px;
    }


    .line
    {
        margin-top:5px;
        margin-bottom:5px;
    }


    /*
    #enter_whg_mobile {
        font-size: 20px!important;
        font-family: 'fontbold';
        padding-top: 7px;
        padding-bottom: 10px;
    }
    */



    ::-webkit-scrollbar {
        width: 0;  /* Remove scrollbar space */
        background: transparent;  /* Optional: just make scrollbar invisible */
    }


    .icon-arrow-right
    {
        position: absolute;
        right:10px;
        top: 0px;
        z-index: 2;
        width: 60px;
        height: calc(60px * 0.561);
        background-position: left 30% top 52.7%;
        background-size:780% auto;
        cursor: pointer!important;
        transform: rotate(270deg) translateX(-20px) translateY(9px);
    }



    .close-mobile-sidebar
    {
        position: absolute;
        right: 5px;
        top: 0px;
        z-index: 2;
        width: 60px;
        height: calc(60px * 0.561);
        background-position: left 30% top 52.7%;
        background-size: 800% auto;
        cursor: pointer!important;
        transform: rotate(270deg) translateX(-28px) translateY(9px);
    }

    .icon-zoom
    {
       width:30px; 
       height:calc(30px * 0.561);
    }


    #sidebar a:not(.button-red)
    {
        font-size:15px;
    }


    .slider-prev
    {
        width: 35px;
        height: 35px;
        background-color: var(--main-color);
        position: absolute;
        top:5px;
        z-index: 2;
        left: 20px;
    }


    .slider-next
    {
        width: 35px;
        height: 35px;
        background-color: var(--main-color);
        position: absolute;
        top:5px;
        z-index: 2;
        left: 55px;
    }


    #customlightbox .slider-prev-fancybox, #customlightbox .slider-next-fancybox
    {
        width: 35px;
        height: 35px;
    }


    #customlightbox .slider-prev-fancybox .icon-prev
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 53%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%);
    }


    #customlightbox .slider-next-fancybox .icon-next
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 52.7%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%) rotate(180deg);
    }


    .icon-next
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 52.7%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%) rotate(180deg);
    }


    .icon-prev
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 53%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%);
    }



    .icon-towhg
    {
        position: relative;
        float: left;
        z-index: 2;
        width: 28px;
        height: 28px;
        background-position: left 83% top 52.3%;
        background-size: 1850% auto;
        cursor: pointer!important;
        margin-left:2px;
        display: block;
    }


    .icon-leavewhg
    {
        position: relative;
        float: left;
        z-index: 2;
        width: 28px;
        height: 28px;
        background-position: left 92.3% top 53.3%;
        background-size: 1850% auto;
        cursor: pointer!important;
        margin-left:2px;
        display:none;
    }


    .lightbox-trigger
    {
        width:35px;
        height:35px; 
    }


    #sidebar .w48:first-of-type
    {
        display:none;
    }


    .hideMobile
    {
        display:none;
    }


    #sidebar .w48
    {
        width:100%;
    }



    #dropdown
    {
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index:0;
    }


    .hide-arrow
    {
        height: 40px;
        background-color: white;
        position: absolute;
        right: 0px;
        width: 100px;
        z-index: 2;
    }


    #dropdown_value
    {
        visibility:hidden!important;
    }


    .daynight
    {
        display:none;
    }



    .custom-arrow
    {
        position: absolute;
        top: 40%;
        right: 5px;
        content: "";
        z-index: 100!important;
        pointer-events: none;
        background-image: url('../images/icons.svg');
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        top: 65%;
        z-index: 2;
        width: 50px;
        height: calc(50px * 0.561);
        background-position: left 30% top 53%;
        background-size: 650% auto;
        cursor: pointer!important;
        transform: rotate(90deg) translateX(-50%) translateY(-15%);
    }



    .select_box
    {
        width:100%;
    }


    #SIDEBAR_h4_KOSTENART
    {
        margin-top:5px!important;
    }



    .margin3
    {
        margin-top:8px;
        margin-bottom:8px;
    }



    .md-select
    {
       left:20px;
       width:calc(100% - 40px);
       font-size:16px;
       line-height:40px;
       top:35px;
       z-index:3;
    }


    .md-select li
    {
        font-size:16px;
    }




    .md-select [type=button]
    {
        font-size:16px;
padding: 5px 10px 3px 10px;
    line-height: 30px;
    }


    #wrapper
    {
        position: absolute;
        z-index: 10;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        background: none;
        overflow: hidden;
        height:100%; 
    }

}




#LIST_DROPDOWN_ID
{
    display:none;
}

/*
.slick-slider .slick-track, .slick-slider .slick-list { height: auto!important; }
*/ 

.slick-slide { height:auto!important; }




.ovisible 
{
    overflow:visible!important;
}


 



@media only screen and (device-width:810px) and (device-height:1080px)  
{

    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .wrapper .icon-mouse 
    {
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }
    
    
    
}



@media only screen and (device-width:810px) and (device-height:1080px) and (orientation:portrait) {


    body
    {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: var(--lightgrey);
        font-family: 'fontregular';
        line-height: 120%;
        font-size: 12px;
        color: var(--main-color);
    }


    #rotate 
    {
        transform:rotate(90deg) translateY(-100%) translateX(0);
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
    }


    #content_1 {
        padding: 0px;
        width: 100vh!important;
        height: 100vw!important;
        transition: all 0.3s;
        position: absolute;
        left: 0px;
        top: 0px;
    }


    div#opener {
        background-color: var(--white);
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 2000;
        left: 0px;
        top: 0px;
    }


    .wrapper {
        display: flex;
        align-items: stretch;
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 1;
        position: relative;
        border: 2px solid green;
    }



    .wrapper-inner {
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        position: relative;
    }






}









@media only screen and (device-width:820px) and (device-height:1180px)  {
   
    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .wrapper .icon-mouse 
    {
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }
    
    

}





@media only screen and (device-width:820px) and (device-height:1180px) and (orientation:portrait) {


    body
    {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: var(--lightgrey);
        font-family: 'fontregular';
        line-height: 120%;
        font-size: 12px;
        color: var(--main-color);
    }


    #rotate 
    {
        transform:rotate(90deg) translateY(-100%) translateX(0);
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
    }


    #content_1 {
        padding: 0px;
        width: 100vh!important;
        height: 100vw!important;
        transition: all 0.3s;
        position: absolute;
        left: 0px;
        top: 0px;
    }


    div#opener {
        background-color: var(--white);
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 2000;
        left: 0px;
        top: 0px;
    }


    .wrapper {
        display: flex;
        align-items: stretch;
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 1;
        position: relative;
        border: 2px solid green;
    }



    .wrapper-inner {
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        position: relative;
    }




}






@media only screen and (device-width:768px) and (device-height:1024px) {
    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .wrapper .icon-mouse 
    {
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }
    
    

}





@media only screen and (device-width:768px) and (device-height:1024px) and (orientation:portrait) {


    body
    {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: var(--lightgrey);
        font-family: 'fontregular';
        line-height: 120%;
        font-size: 12px;
        color: var(--main-color);
    }


    #rotate 
    {
        transform:rotate(90deg) translateY(-100%) translateX(0);
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
    }


    #content_1 {
        padding: 0px;
        width: 100vh!important;
        height: 100vw!important;
        transition: all 0.3s;
        position: absolute;
        left: 0px;
        top: 0px;
    }


    div#opener {
        background-color: var(--white);
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 2000;
        left: 0px;
        top: 0px;
    }


    .wrapper {
        display: flex;
        align-items: stretch;
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 1;
        position: relative;
        border: 2px solid green;
    }



    .wrapper-inner {
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        position: relative;
    }







}








@media only screen and (device-width:834px) and (device-height:1194px)
{


    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .wrapper .icon-mouse 
    {
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }
    
    
    
    

}



@media only screen and (device-width:834px) and (device-height:1194px) and (orientation:portrait) {


    body
    {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: var(--lightgrey);
        font-family: 'fontregular';
        line-height: 120%;
        font-size: 12px;
        color: var(--main-color);
    }


    #rotate 
    {
        transform:rotate(90deg) translateY(-100%) translateX(0);
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
    }


    #content_1 {
        padding: 0px;
        width: 100vh!important;
        height: 100vw!important;
        transition: all 0.3s;
        position: absolute;
        left: 0px;
        top: 0px;
    }


    div#opener {
        background-color: var(--white);
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 2000;
        left: 0px;
        top: 0px;
    }


    .wrapper {
        display: flex;
        align-items: stretch;
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 1;
        position: relative;
        border: 2px solid green;
    }



    .wrapper-inner {
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        position: relative;
    }







}







@media only screen and (device-width:1024px) and (device-height:1366px) 
{


    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .wrapper .icon-mouse 
    {
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }
    
    
    

}




@media only screen and (device-width:1024px) and (device-height:1366px) and (orientation:portrait) {


    body
    {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: var(--lightgrey);
        font-family: 'fontregular';
        line-height: 120%;
        font-size: 12px;
        color: var(--main-color);
    }


    #rotate 
    {
        transform:rotate(90deg) translateY(-100%) translateX(0);
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
    }


    #content_1 {
        padding: 0px;
        width: 100vh!important;
        height: 100vw!important;
        transition: all 0.3s;
        position: absolute;
        left: 0px;
        top: 0px;
    }


    div#opener {
        background-color: var(--white);
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 2000;
        left: 0px;
        top: 0px;
    }


    .wrapper {
        display: flex;
        align-items: stretch;
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 1;
        position: relative;
        border: 2px solid green;
    }



    .wrapper-inner {
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        position: relative;
    }



    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }



}


@media only screen and (device-width:744px) and (device-height:1133px) 
{

    .icon-mouse {
        width: 160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .wrapper .icon-mouse 
    {
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }
    
    
    

}





@media only screen and (device-width:744px) and (device-height:1133px) and (orientation:portrait) {


    body
    {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: relative;
        background-color: var(--lightgrey);
        font-family: 'fontregular';
        line-height: 120%;
        font-size: 12px;
        color: var(--main-color);
    }


    #rotate 
    {
        transform:rotate(90deg) translateY(-100%) translateX(0);
        width: 100vh;
        height: 100vw;
        transform-origin: top left;
    }


    #content_1 {
        padding: 0px;
        width: 100vh!important;
        height: 100vw!important;
        transition: all 0.3s;
        position: absolute;
        left: 0px;
        top: 0px;
    }


    div#opener {
        background-color: var(--white);
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 2000;
        left: 0px;
        top: 0px;
    }


    .wrapper {
        display: flex;
        align-items: stretch;
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 1;
        position: relative;
        border: 2px solid green;
    }



    .wrapper-inner {
        width: 100vh;
        height: 100vw;
        box-sizing: border-box;
        padding: 1.5vw;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
        position: relative;
    }




}







@media only screen and (device-width:412px) and (device-height:892px) and (orientation:portrait) {


    .sidebar-height 
    {
        background-color:var(--white)!important; 
        width:100%;
        height:auto; 
        position:relative;
        float:left; 
    }


    #preloader-wrapper {
        width: calc(100% - 40px);
        padding-right: 15%;
        box-sizing: border-box;
        position: fixed;
        z-index: 10;
        left: 20px;
        top: 30%;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .preloader-div
    {
        left:0px!important; 
        width:100%!important;
        padding:0px!important; 
        height:30px;
    }


    .preloader-desc 
    {
        position: absolute;
        transform:translateY(-65px);
        left: 0px;
        font-size:15px;
    }


    #preloader_progress
    {
        font-size:15px; 
    }
    

    .hideDesktop
    {
        display:block;
    }

    .sonnenstand-button
    {
        width:18px;
        height:18px; 
    }

    .sonnenstand-button p
    {
        line-height:130%; 
    }

    .container-sonnenstand {
        margin-right: 0px;
        position: absolute;
        right:0px;
    }

    #switch2 
    {
        position: absolute;
        left: 50%;
        transform: translateX(-75%);
        float: unset;
    }

    .mt01
    {
        margin-top:2px!important; 
    }

    .ml02
    {
        margin-left:3px!important; 
    }

    .lds-spinner {
        color: var(--second-color);
        display: block;
        position: absolute;
        width: 80px;
        height: 80px;
        transform: translateX(-50%) translateY(-50%) scale(0.5);
        left: 50%;
        top: 50%;
      }



    #SIDEBAR_h4_KOSTEN
    {
        margin-top:1px;
    }

    .close-sidebar-mobile
    {
        display:block;
    }


    .third
    {
        padding-top:0px;
    }

    .mobilepadbox
    {
        width: 100%;
        float: left;
        margin-top:0px;
        padding-bottom:0px;
    }

    #switch
    {
        padding-left:0px;
    }


    #content
    {
        padding:15px;
    }

    .image-desktop
    {
        display:none;
    }

    .icon-extend
    {
        display:none;
    }

    .center-container
    {
        display:none;
    }

    .bottom-container
    {
        width:50%;
    }


    #top-left, #top-right
    {
        width:100%;
        float:left;
    }


    .icon-text
    {
        width:50%;
        float:right;
        margin-right:0px;
        position:relative;
    }

    .icon-text p
    {
        margin-top:10px;
        line-height:100%;
    }

    .icon-text:last-of-type
    {
        margin-right:5%;
    }

    .icon-text:first-of-type
    {
        width:45%;
    }

    .image-mobile
    {
        display:block;
    }


    .custom-select
    {
        width:100%;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 40px;
        position: absolute;
        z-index: 4;
    }

    select
    {
        font-size:16px;
        padding:5px 5px 0px 10px;
        height:40px;
    }


    .select-down-icon
    {
        width:17px;
    }


    h1
    {
        font-size:26px;
    }

    h2
    {
        font-size:20px;
    }


    .wrapper h1
    {
        font-size:18px;
    }

    .wrapper h2
    {
        display:none;
    }

    .wrapper-inner h1, .wrapper-inner h2
    {
        color:var(--main-color);
    }

    p
    {
        font-size:15px;
        margin-top: 15px;
    }


    .wrapper .icon-mouse
    {
        display:none;

    }


    .icon-button
    {
        width:50px;
        height:auto;
    }



    .button-inner
    {
        left:2px;
        background-color: white;
        width:20px;
        height:20px;
        border-radius:45px;
    }


    .button-second-color
    {
        font-size:15px;
            margin-top: 10px;
    }


    .logo
    {
        width:85px;
    }


    #bottom
    {
        top: 100px;
        width: calc(100% - 40px);
        left: 20px;
        height: 40px;
    }


    .checkboxstatus
    {
        float: left;
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: 6px;
    }



    #switch_input2, .sonnenstand-button-container, .status
    {
        margin-right:10px!important;  
    }


    .label-status, .label-stadtplan, .label-uhr
    {
        margin-left:0px!important; 
    }


    /* Opener */
    #opener-content
    {
        width:90vw;
        padding-top:70px;
        padding-bottom:25px;
    }

    .powesecond-colorby
    {
        font-size:12px;
    }


    .logo-opener
    {
        width:240px;
        height:160px;
        zoom: 0.8;
    }


    #loading_container
    {
        height:30px;
    }


    .icon-mouse
    {
        width:160px;
        height: calc(150px * 0.537);
        background-position: left 87% top 7%;
        background-size: 240% auto;
    }


    .icon-arrow-down
    {
        width:25px;
        height:calc(25px * 0.561);
    }



    .wrapper-inner
    {
        padding:0px;
    }


    .icon-logo
    {
        width:80px;
        height:calc(100px * 0.492);
        bottom:20px;
        right: 20px;
    }


    #annotation
    {
        display:none;
    }


    .icon-arrow-toggle-sidebar, .rundflug, .screenshot, .fullscreen, .container-quickfacts
    {
        display:none;
    }

    #tooltip
    {
        display:none!important;
    }

    .position
    {
        background-color: transparent;
        position: fixed;
        bottom: 6vh;
        width: 50px;
        height: 50px;
        left: 6%;
        transform: translateY(-320%);
    }

    .checkbox-container
    {
        background-color:unset;
        width:auto;
    }

    .checkbox
    {
        width:18px;
        height:18px;
    }

    .icon-checked
    {
        width:17px;
        height:calc(17px * 0.925);
    }

    .hcenter
    {
        transform:translateY(5px);
    }

    .checkbox-container p
    {
        font-size:14px;
    }

    .icon-holder-second-color
    {
        background-color:unset;
        width:auto;
        height:28px;
    }

    .icon-position
    {
        width:50px;
        height:50px;
        float: left;
        position: relative;
        left: unset;
        transform: translateX(-3px) translateY(-8px);
    }


    .label-mobile
    {
        display: block;
        margin-left: 2px;
        margin-top: 7px;
        font-size: 14px;
    }



    .container-status
    {
        margin-right:30px;
    }



    .wrapper
    {
        padding:20px;
        padding-bottom:10px;
    }



    .container-status p
    {
        margin-top:3px;
    }


    .mobile-info
    {
        display:block;
        position: absolute;
        bottom: 20px;
        left: 20px;
        color:var(--main-color);
        z-index:2;
    }


    #toolbar
    {
        width:calc(100vw - 40px);
        left:0px!important;
        position:relative;
    }


    #sidebar
    {
        width: 100vw;
        height: 100%;
        position: absolute;
        right: 0px!important;
        z-index:1000;
        background-color:var(--white)!important;
        box-sizing: border-box;
        padding: 20px;
        padding-top:12px; 
        overflow-y:scroll!important;
        overflow-x:hidden;
        top: unset;
        bottom:-100%;
    }


    .sidebar-title
    {
        font-size:28px;
        width:auto;
    }

    .smalltext
    {
        font-size:14px;
        margin-top:0px!important;
    }

    h4
    {
        font-size:20px;
    }


    #button_start
    {
        padding-top:7px;
        font-size:15px;
    }


    #sidebar .button-red
    {
        font-size:15px;
    }


    .line
    {
        margin-top:5px;
        margin-bottom:5px;
    }


    /*
    #enter_whg_mobile {
        font-size: 20px!important;
        font-family: 'fontbold';
        padding-top: 7px;
        padding-bottom: 10px;
    }
    */



    ::-webkit-scrollbar {
        width: 0;  /* Remove scrollbar space */
        background: transparent;  /* Optional: just make scrollbar invisible */
    }


    .icon-arrow-right
    {
        position: absolute;
        right:10px;
        top: 0px;
        z-index: 2;
        width: 60px;
        height: calc(60px * 0.561);
        background-position: left 30% top 52.7%;
        background-size:780% auto;
        cursor: pointer!important;
        transform: rotate(270deg) translateX(-20px) translateY(9px);
    }



    .close-mobile-sidebar
    {
        position: absolute;
        right: 5px;
        top: 0px;
        z-index: 2;
        width: 60px;
        height: calc(60px * 0.561);
        background-position: left 30% top 52.7%;
        background-size: 800% auto;
        cursor: pointer!important;
        transform: rotate(270deg) translateX(-28px) translateY(9px);
    }

    .icon-zoom
    {
       width:30px; 
       height:calc(30px * 0.561);
    }


    #sidebar a:not(.button-red)
    {
        font-size:15px;
    }


    .slider-prev
    {
        width: 35px;
        height: 35px;
        background-color: var(--main-color);
        position: absolute;
        top:5px;
        z-index: 2;
        left: 20px;
    }


    .slider-next
    {
        width: 35px;
        height: 35px;
        background-color: var(--main-color);
        position: absolute;
        top:5px;
        z-index: 2;
        left: 55px;
    }


    #customlightbox .slider-prev-fancybox, #customlightbox .slider-next-fancybox
    {
        width: 35px;
        height: 35px;
    }


    #customlightbox .slider-prev-fancybox .icon-prev
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 53%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%);
    }


    #customlightbox .slider-next-fancybox .icon-next
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 52.7%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%) rotate(180deg);
    }


    .icon-next
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 52.7%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%) rotate(180deg);
    }


    .icon-prev
    {
        position: absolute;
        right: 50%;
        top: 50%;
        z-index: 2;
        width: 40px;
        height: calc(40px * 0.561);
        background-position: left 9% top 53%;
        background-size: 1300% auto;
        cursor: pointer!important;
        transform: translateX(50%) translateY(-50%);
    }



    .icon-towhg
    {
        position: relative;
        float: left;
        z-index: 2;
        width: 28px;
        height: 28px;
        background-position: left 83% top 52.3%;
        background-size: 1850% auto;
        cursor: pointer!important;
        margin-left:2px;
        display: block;
    }


    .icon-leavewhg
    {
        position: relative;
        float: left;
        z-index: 2;
        width: 28px;
        height: 28px;
        background-position: left 92.3% top 53.3%;
        background-size: 1850% auto;
        cursor: pointer!important;
        margin-left:2px;
        display:none;
    }


    .lightbox-trigger
    {
        width:35px;
        height:35px; 
    }


    #sidebar .w48:first-of-type
    {
        display:none;
    }


    .hideMobile
    {
        display:none;
    }


    #sidebar .w48
    {
        width:100%;
    }



    #dropdown
    {
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index:0;
    }


    .hide-arrow
    {
        height: 40px;
        background-color: white;
        position: absolute;
        right: 0px;
        width: 100px;
        z-index: 2;
    }


    #dropdown_value
    {
        visibility:hidden!important;
    }


    .daynight
    {
        display:none;
    }



    .custom-arrow
    {
        position: absolute;
        top: 40%;
        right: 5px;
        content: "";
        z-index: 100!important;
        pointer-events: none;
        background-image: url('../images/icons.svg');
        background-repeat: no-repeat;
        position: absolute;
        right: 0px;
        top: 65%;
        z-index: 2;
        width: 50px;
        height: calc(50px * 0.561);
        background-position: left 30% top 53%;
        background-size: 650% auto;
        cursor: pointer!important;
        transform: rotate(90deg) translateX(-50%) translateY(-15%);
    }



    .select_box
    {
        width:100%;
    }


    #SIDEBAR_h4_KOSTENART
    {
        margin-top:5px!important;
    }



    .margin3
    {
        margin-top:8px;
        margin-bottom:8px;
    }



    .md-select
    {
       left:20px;
       width:calc(100% - 40px);
       font-size:16px;
       line-height:40px;
       top:35px;
       z-index:3;
    }


    .md-select li
    {
        font-size:16px;
    }




    .md-select [type=button]
    {
        font-size:16px;
padding: 5px 10px 3px 10px;
    line-height: 30px;
    }


    #wrapper
    {
        position: absolute;
        z-index: 10;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        background: none;
        overflow: hidden;
        height:100%; 
    }

}