@charset "utf-8";
 
/*
* CSS-Design
* Grossleibnerhof neuer Versuch responsive
* Bio Hof
*/

/* Reset für responsive Design * * * * * * * * */
html{        
        font-size: 100%; /* Browserstandard: 16px */
        overflow-x: hidden;
}
 
img{
        max-width: 100%;
}




/* Reset * * * * * * * * */

* {
margin:0px;
padding:0px;
box-sizing:border-box; 
 }
 
 
 
nav {
display:flex;
justify-content: space-around;
align-items: right;
min-height: 8vh;
background-color:green;
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.25rem; /*20px*/ 
justify-content: right;
border:dashed;
background-color:yellow;

 } 
  
.logo{
color:white;
text-transform:uppercase;
letter-spacing: 5px;
font-size:20px;} 
  
.nav-links  {
display:flex;
justify-content:space-around;
width:30%;
}

.nav-links li  {
list-style:none;
} 
  
 .nav-links a  {
color: #f7f9ef;
text-decoration:none;
letter-spacing:0px;
font-weight:800; 
font-size:16px;
font-family: 'Roboto Condensed', sans-serif;


}
 
 
.burger div  {
width:25px;
height:3px;
background-color:white;
margin:5px;
transition: all 0.3s ease;
} 

.burger{
display:none;
} 

@media only screen and (min-width: 901px) and (max-width: 1279px) {  /* voller Bildschirm*/
.nav-links  {
width:60%
}
}

/*
@media only screen and (min-width: 891px) and (max-width: 900px) {   /*Tablet*/
/*.nav-links  {
width:100%  /*damit die Links nebeneinderstehen - nur zur Veranschaulichung*/
/*}
}*/


@media only screen and (max-width: 900px) {

body  {
overflow-x:hidden !important;}/*mit body overflow hidden kann man das scrollen verhindern mit x verhinderst du das seitwärts scrollen*/


.nav-links  {
position:absolute;
right:0px;
height:10vh; /* vh ist Grössenangabe auf den viewport bezogen ähnlich wie % das heisst 100 sollte die höchste angabe sein*/
top:8vh;
background-color:transparent;
display:flex;
flex-direction: column;
align-items: center;
width: 50%; /* Breite des einfahrenden Balkens*/
transform: translateX(100%); /* eine hidden funktion*/
transition: transform 0.5s ease-in; /*Geschwindigkeit*/
z-index: 9999; /*damit die Navigation über dem Hintergrund Bild vom Teaser funktioniert*/

}

.nav-links li{
opacity:0;
} 

.burger{
display:block;
cursor:pointer;



} 

}


.nav-active{
transform:translateX(0%);

} 


@keyframes navLinkFade {
from       {
           opacity:0;
           transform: translateX(50px);
           }

to         {
           opacity:1;
           transform: translateX(0px);
           }

}

.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);

} 

.toggle .line2{
opacity:0;

} 


.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);

}