/* Extra small devices (phones, 1024px and down) */
@media only screen and (max-width: 1024px) {

    .wrapper{width: 80%;margin: 0 auto;position: relative;}
    #loginCard .wrapper{width:80%;}
    
    .leftWrapper{padding:0 10%!important;width:80%;}
    .rightWrapper{padding:0 10%!important;width:80%;text-align:left;}
    .devider.right{margin:0 auto 0 -50%;}
    .boldHeadline{line-height:1.25em;}
    .mobileHide{display:none;}
    .button {width:100%;padding-left:0!important;padding-right:0!important;text-align: center;}
    #responseMessage{width:80%;margin:0 auto;left:0;right:0;bottom:2.5em;top:auto;}

    /* Row */   .row{}  
    /* 1 */     .row.one{width:100%;}
    /* 1/2 */   .row.oneHalf{width:100%;}
    /* 1/3 */   .row.oneThird{width:100%;}
    /* 2/3 */    .row.twoThird{width:100%;}
    /* 1/4 */    .row.oneFourth{width:100%;}
    /* 3/4 */    .row.threeFourth{width:100%;}
    /* 1/5 */    .row.oneFifth{width:100%;}
    /* 2/5 */     .row.twoFifth{width:100%;}
    /* 3/5 */     .row.threeFifth{width:100%;}
    /* 4/5 */     .row.fourFifth{width:100%;}
    /* 1/6 */    .row.oneSixth{width:100%;}
    /* 5/6 */    .row.fiveSixth{width:100%;}


    /* Grid exceptions*/
    .topBar{min-height:10vh;height:auto;}
    .topBar .row.oneThird{width:60%;}
    .topBar .row.twoThird{width:40%;}
    .topBar .row.oneThird .leftWrapper{padding:0 17%!important;}
    .topBar .row.twoThird .leftWrapper{padding:0 17%!important;}


    a.logo{width:130px;height:auto;}

    nav#mainNav{background-image: linear-gradient(to left, #03379f , #175ace);}
    nav#mainNav .row.oneThird{width:60%;}
    nav#mainNav .row.twoThird{width:40%;}

    nav#mainNav ul.mobileButtons{display:inline-block!important;width:100%;float:right;position: relative;visibility: visible;opacity:1;box-shadow: 0 -5px 10px #0338a0;}
    nav#mainNav ul.mobileButtons li{width:100%;text-align:center;}
    nav#mainNav ul.mobileButtons li a{display:block;cursor:pointer;}
    nav#mainNav ul.mobileButtons li a i{font-size: 36pt;margin-top:1.5vh;color: #fff;}
    nav#mainNav ul li a#menuTrigger{border:none;}
    nav#mainNav ul li a#menuTrigger i{transition:all .5s ease;}
    nav#mainNav ul li a#menuTrigger:hover i{color:#FEFE00;}
    nav#mainNav ul{display:block;height:0;visibility: hidden;opacity:0;}
    nav#mainNav ul li:last-child{margin:0 2vw;}

    nav#mainNav ul#mainNavigation.open{display:block;width:250%;height:90vh!important;padding:0;margin:10vh 0 0 0;transition:all 1s ease;visibility: visible;opacity:1;border:none;}
    nav#mainNav ul#mainNavigation.open li{display:block;text-align:center;}
    nav#mainNav ul#mainNavigation.open li a{font-size:1.25em;margin:1.5em 0;}
    nav#mainNav ul#mainNavigation.open li a.aktiv{color: #FEFE00;border-bottom: 3px solid;}
    

    #intro{}
        .introContentWrapper{}
        .introContent{padding:10vh 0 5vh 0;height:auto;min-height:20em;}
        ul.slick-dots{left:0;right:0;margin:auto;width:50%;bottom:18.5vh;z-index:5;}
        ul.slick-dots li button{width:1em;}
        button.slick-prev{left:10%;right:auto;bottom:18vh;}
        button.slick-next{right:10%;left:auto;bottom:18vh;}

    #infoCard{padding-bottom:5em;}
    #infoContent{margin-top:57.5em;}
        img.imageShadowBox{margin:5vh 0;}
    
    .card{margin:1em 0;}
    .pagination{border-top-right-radius:1em;width:98%;padding:0 1%;}
    .calender{border-radius:1em;}

    .pagihead{width:55%;}
    .day{width: 13.5%;}
    th{font-size:.8em;}
    .popUpLayer{background-image:none;}
    .popUpLayer .popUpWrapper{width:95%!important;top:12vh!important;max-height: 75vh!important;}
    .popUpLayer .popUpWrapper .popUp .popUpInnerWrapper{padding:.5em 1.5em!important;}


    footer{text-align: center;}
}
    
/* Small devices (portrait tablets and large phones, 1024px and up) */
@media only screen and (min-width: 1024px) {
    .desktopHide{display:none!important;}
    ul.slick-dots li button{display:none;}
    .day{width:13.79%}
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
} 

/* Extra large devices (large laptops and desktops, 1650px and down) */
@media only screen and (max-width: 1650px) {
    .desktopHide{display:none!important;}
    .popUpLayer .popUpWrapper{width:80%;top:10vh;max-height: 85vh;}
    .row.twoFifth .rightWrapper{padding:0 15%;}
    .row.threeFifth .rightWrapper{padding:0 15%;}

}
@media only screen and (min-width: 1650px) {
    #intro .devider{width:60%;margin-left:-60%;}
    .wrapper{width:70%;}

    .fullWidth{width:98%!important;padding:0!important;}
    .leftWrapper{text-align: left;}
    .leftWrapper img.highlight{width:auto;height:35em;}
    
    .row.twoFifth .leftWrapper{padding:0 0 0 37%;}
    .row.threeFifth .leftWrapper{padding:0 0 0 25%;}
    .row.oneThird .leftWrapper{padding:0 0 0 45%;}
    .row.twoThird .leftWrapper{padding:0 0 0 15%;}
    
    .rightWrapper{text-align:right;}
    .rightWrapper img.highlight{}
    
    .row.oneThird .rightWrapper{padding:0 30%;}
    .row.twoThird .rightWrapper{padding:0 25% 0 10%;}
    .row.twoFifth .rightWrapper{padding:0;}
    .row.threeFifth .rightWrapper{padding:0;}


    .introSlider img{width:100%;height:auto;}
    .desktopHide{display:none!important;}
    .thinHeadline{font-size:1.5em;}
    .boldHeadline{font-size:2em;}
    .subline{font-size:1.6em;}
    .pagihead{width:78%;}
    .day{width:13.89%}
    .popUpLayer .popUpWrapper{width: 60%;top: 10vh;max-height: 80vh;}


}