@charset "UTF-8";
/* CSS Document */


/*-------Sliding Nav------*/
        
        .close-nav{
            border:0;
            padding:0;
            background:0;
            font-weight:300;
            font-size:2rem;
            cursor: pointer;
            padding:.5em;
            margin-left:auto;
            outline: none;
           
        }
        
       
        
        .open-nav{
            margin:0;
            border:0;
            cursor:pointer;
            background: 0;
            padding:0;
            left:80%;
            top:0%;
            position:fixed;
            z-index:50;
             outline: none;
        }
        
      .open-nav_button{
            max-width:100px;
        }

        
      .close-nav_button{
            max-width:100px;
          
          
        }
        
        
        
        
        
        
        .nav {
    position: fixed;
            width:30%;
            padding-top: 2em;
      background:#c4d7b7;
			 background:#a9cd91;
            opacity:90%;
            z-index:100;
            list-style: none;
    top: 0;
    right:0;
    bottom:0;
   left:100%;
    transform:translateX(0%);
    transition:transform 250ms;
            
}
        
        
   input[type=checkbox]:checked ~ label > img {
    box-shadow: 14px 21px 46px 24px rgba(82,22,9,0.78); 
  transform: scale(2);
  cursor: zoom-out;
}     
        
        
        
        
  /*=======slidein Nav---------*/      
 .navigation-open {
    transform: translateX(-100%);
       
     
}

        
        ul{
           list-style-type: none;  
        } 
        
        ul li{
          padding-bottom:2rem;
          transform:rotate(20deg);
			 
        }
        
        
        
       .nav-list {
    display: flex;
    margin: 0;
            
     
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
             
             
}
         .nav-list >*>*:hover{
            
        }
        

a.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 900;
    padding:2rem;
    transition: 1s
    
   
}

a.nav-link:hover{
    color:#000;
}







a.nav-link_green:hover,
a.nav-link_green:focus {
    background-color: #25b504;
    
}
        
a.nav-link_red:hover,
a.nav-link_red:focus {
   background-color: #8F0404;
    
}
        
        a.nav-link_yellow:hover,
a.nav-link_yellow:focus {
   background-color: yellow;
    color:black;
   
}
        
a.nav-link_blue:hover,
a.nav-link_blue:focus {
    background-color: blue;
    
}