/*
This file is meant as a template. 
Remove it (setup: page.includeCSS.basequeries > ) and use your own in case you want other breakpoints
*/

/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */
/* ############################# TABLET AND MOBILE ( <= 1024)  ########################################################################################################### */
/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */


@media only screen and (max-width: 1024px) {
       
/*###############################################################################
#################################### MENU #######################################*/

    #mainmenu .menuLevel1{
        display:none;
    }
    #isMobile {
        display:block;
    }
    
/*    #mobilemenu {
        display:block;
        width:1.5rem;
        height: 1.5rem;
        padding:0.5rem;
        position: absolute;
        right: 0;
        background-size: 1.5rem;
        background-repeat: no-repeat;        
        background-image: url('../Icons/mobileMenuIcon.svg');
        background-position: 0.5rem 0.5rem;
        transition-property: top, border-color, background-color;
        transition-duration: 0.9s;        
        border: 1px solid transparent;
    }*/

    .mobileMenuIcon {
        display:block;
    }
           
    #mobilemenu.open {
        background-image: url('../Icons/mobileMenuClose.svg');
    }
    
    /* 
    * 
    */
    #mainmenu ul.menuLevel2 {
        position:relative;
    }
    #mainmenu ul {
        display:block;
    }
    
    #mobilemenuContent {
        display:block;
        background:white;
        position: fixed;
        z-index:99;
        box-shadow:  0 0px 30px rgb(0 0 0 / 20%);
        max-height: calc(100vH); 
        /* or - in case it is not touching top - adjust max height:
        top: 1rem;
        max-height: calc(100vH - 1rem); 
        */
        overflow-y:auto;
    }
    
    #mobilemenuContent ul {
        border-bottom:1px solid #ccc;        
    }
    #mobilemenuContent ul li {
        list-style-type: none;
        border-top:1px solid #b9b9b9;        
    }
    #mobilemenuContent ul li ul li {
        border-top:1px solid #d8dde2;        
    }
    #mobilemenuContent ul li ul li:first-of-type {
        border-top:1px solid #b9b9b9;        
    } 
    
    #mobilemenuContent ul li.hasSub {
        background-image:url('../Icons/icon-arrow-down.svg');
        background-repeat: no-repeat;
        background-position: right 1rem top 1rem;
    }
    #mobilemenuContent ul li.hasSub.open {
        background-image:url('../Icons/icon-arrow-up.svg');
    }
        
    #mobilemenuContent ul li .innerLiWrapper {
        padding: 0 1rem 1rem 2rem;       
    }
    #mobilemenuContent ul.menuLevel2 li .innerLiWrapper {
        padding-left: 3rem;
    }    
    #mobilemenuContent ul li ul {
  /*      padding-top:0.65rem;
        padding-bottom:2.5rem;*/
        border-bottom:none;
    }
    #mobilemenuContent ul li ul li .innerLiWrapper {
        padding-left:1rem;
    }
    
    .frame-type-basep-4cols-container {
        display:block;
        width:100%;
    }    
    
    .frame-type-basep-2cols-container {
        display:block;
    }
    .frame-type-basep-2cols-container .percent50 {
        width:100%;
    }    

    .basep-4cols-container .colWrap {
         width:100%;
        margin-bottom:4%;
    }    

    .basep-4cols-container .colWrap .column3 {
       order:2;
    }   
    .basep-4cols-container .colWrap .column4 {
       order:1;
    } 
}

/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */
/* ############################# TABLET (1024)  ########################################################################################################### */
/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */


@media only screen and (max-width: 1024px) and (min-width: 441px) {
    
/*###############################################################################
#################################### MENU #######################################*/

    #isTablet {
        display: block;
    }

    #mobilemenuContent {
        right:0;
       /* adjust as menu must not touch top (Button to close) */
        top: 7rem;
        max-height: calc(100vH - 7rem);
        width:50vW;
    }
    #mobilemenu {
        width:1.6rem;
        height: 1.6rem;
        background-size: 1.6rem;
        right: 3em;
        top: 2rem;        
    }      
    
}

/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */
/* ############################# TABLET hoch overwrite (768)  ########################################################################################################### */
/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */


@media only screen and (max-width: 768px) and (min-width: 441px) {

}


/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */
/* ############################# MOBILE (360)  ############################################################################################################ */
/* ######################################################################################################################################################## */
/* ######################################################################################################################################################## */


@media only screen and (max-width: 440px) {
    
    #isMobile {
        display: block;
    }    
    
    #mobilemenuContent {
        top: 4rem;
        max-height: calc(100vH - 4rem);
        width:100vW;
    }
}