/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (orientation:portrait){
    nav {top:66px; left:0;}
    label.nav-label:after {top:66px; left:0;}
    input#nav[type="checkbox"]:checked ~ nav {border-top: dashed 1px;}
    .icon-size{background-position: right;}
    #echo-light, #echo-dark {background-position: left; -webkit-transform: scaleX(-1); transform: scaleX(-1);}
}   

/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (orientation:landscape){
    .centerbox{display: flex; justify-content:left; align-items:center;}
    nav {top:0px; left:66px;}  
    label.nav-label:after {top:0px; left:66px;}
    input#nav[type="checkbox"]:checked ~ nav {padding-left:10%; border-left: dashed 1px;}
    .icon-size{background-position: left;}

}  




/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-height:320px) and (orientation:portrait){
    nav {top:50px;}
    label.nav-label:after {top:50px; left:0px;}
    label.nav-label span {border-top-width:24px; border-bottom-width:24px;}       
} 


@media only screen and (max-width:320px) and (orientation:landscape){
    nav {left:50px;}
    label.nav-label:after {top:0px; left:50px;}
    label.nav-label span {border-left-width:13px; border-right-width:13px;} 
    input#nav[type="checkbox"]:checked ~ nav {padding-left:10px;}
    .centerbox{display: block;} 
} 




/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-height:666px) and (orientation:portrait){
    nav {overflow:auto;}
    input#nav[type="checkbox"]:checked ~ nav {padding-top:5%;}
    .icon-size{height: 35px;}
    
    
}

@media only screen and (max-width:666px) and (orientation:landscape){
    nav {overflow:auto;}
    input#nav[type="checkbox"]:checked ~ nav {padding-left:5%;}
    .icon-size{height: 35px;}
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:667px) and (orientation:portrait){
input#nav[type="checkbox"]:checked ~ nav {padding-top:5%;}
.icon-size{height: 35px;} 
}

@media only screen and (min-width:667px) and (orientation:landscape){
.icon-size{height: 35px;} 
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:768px) and (orientation:portrait){
    input#nav[type="checkbox"]:checked ~ nav {padding-top:8%;}
    .icon-size{height: 40px;} 
}

@media only screen and (min-width:768px) and (orientation:landscape){
    .icon-size{height: 40px;} 
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:980px) and (orientation:portrait){
 
}

@media only screen and (min-width:980px) and (orientation:landscape){

}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:1024px) and (orientation:portrait){
    .icon-size{height: 45px;} 
    background: linear-gradient(to bottom, rgba(253,253,253,0) 0%, rgb(253,253,253,0.7) 20%)
}

@media only screen and (min-width:1024px) and (orientation:landscape){
    .icon-size{height: 45px;} 
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:1200px) and (orientation:portrait){
    .icon-size{height: 50px;}
}

@media only screen and (min-width:1200px) and (orientation:landscape){
    .icon-size{height: 50px;}
}

/*--------------header Umbruch*/
@media only screen and (min-width:1440px) and (orientation:landscape){
    nav {top:66px; left:0px;}
    input#nav[type="checkbox"]:checked ~ nav {padding-left:0px; padding-top:5%; border-left: 0px; border-top: dashed 1px;}
    label.nav-label:after {top:66px; left:0;}
    .centerbox{justify-content:right; align-items:baseline;}
    .icon-size {background-position: right;}
    #echo-light, #echo-dark {background-position: left; -webkit-transform: scaleX(-1); transform: scaleX(-1);}

}  


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:1920px) and (orientation:portrait){
    nav {top:90px;}
    label.nav-label span, label.nav-label span:before, label.nav-label span:after {width: 30px; height: 2px;}
    .icon-size{height: 55px;} 
}

@media only screen and (min-width:1920px) and (orientation:landscape){
    nav {top:90px;}
    label.nav-label span, label.nav-label span:before, label.nav-label span:after {width: 30px;height: 3px;}
    .icon-size{height: 60px;}
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-height:3500px) and (orientation:portrait){
   .icon-size{height: 100px;} 
    
    nav {top:166px;}
    input#nav[type="checkbox"]:checked ~ nav {padding-top: 250px;}
    input#nav[type="checkbox"]:checked ~ nav {border-top: dashed 4px;}
	input#nav[type=checkbox]:checked ~ label.nav-label span:before,
	input#nav[type=checkbox]:checked ~ label.nav-label span:after {width: 50px;}
    label.nav-label span, label.nav-label span:before, label.nav-label span:after {width: 50px;height: 5px;}
    label.nav-label span::before {top: -18px;}
    label.nav-label span::after {bottom: -18px;}
    
}


@media only screen and (min-width:3500px) and (orientation:landscape){
   .icon-size{height: 100px;} 
    
    nav {top:166px;}
    input#nav[type="checkbox"]:checked ~ nav {padding-top: 250px;}
    input#nav[type="checkbox"]:checked ~ nav {border-top: dashed 4px;}
	input#nav[type=checkbox]:checked ~ label.nav-label span:before,
	input#nav[type=checkbox]:checked ~ label.nav-label span:after {width: 50px;}
    label.nav-label span, label.nav-label span:before, label.nav-label span:after {width: 50px;height: 5px;}
    label.nav-label span::before {top: -18px;}
    label.nav-label span::after {bottom: -18px;}
    
}