/* Main-Wrapper */
nav {
  
  position: fixed;
  width: 198px;
  left: -198px;
  top: 0;
  bottom: 0;
  background-color: rgb(125, 184, 252);
  padding: 15px 0;
  transition: left 1s ease-in .5s;
  z-index: 2;
  
  &:after {
    
    content: "Menü";            /*"\f0c9";*/
    /*font-family: "FontAwesome";*/
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    color: black;
    position: absolute;
    left: 100%;
    top: 0;
    padding: 15px;
    background-color: rgb(125, 184, 252);
    border-bottom-right-radius: 5px;
    cursor: pointer;
    
  }
  
  &:hover {
    
    left: 0;
    transition: left 1s ease-in 0s;
    
    &:after {
      
      content: "Menü"; /*"\f00d";*/
      
    }
    
  }
  
}
/* Main-Wrapper - End */


/* Global Styles */
nav {
  
  ul {
    
    list-style-type: none;
    padding: 0;
    margin: 0;
    
    li {
      
      position: relative;
      
      a {
        
        padding: 10px 5px;
        padding-left: 10px;
        
      }
      
      &:hover {
        
        /*background-color: rgba( 0, 150, 255, 1 );*/
        background-color: whitesmoke;
        font-weight: bold;
        & > ul {
          font-weight: normal;
          top: 0%;
          
        }
        
      }
      
      & > ul {
        
        position: absolute;
        background-color: rgb(125, 184, 252);
        width: 100%;
        top: 1999px;
        left: 100%;
        transition: top .5s;
        
        li {
          
          min-width: 120px;
          
        }
        
        &:hover {
        
          top: 0%;
          
        }
        
      }
      
    }
    
    a {
      
      color: black;
      text-decoration: none;
      /*padding-left: 25px;*/
      display: block;
      
      &:after {
        
        /*content: "\f054";*/
        font-family: "FontAwesome";
        display: block;
        position: absolute;
        left: 5px;
        top: 13px;
        font-size: 12px;
        
      }

    }
    
    
  }
  
  /* First-Level Navigation */
  & > ul {
    
    margin-top: 32px;
    
  }
  
}
/* Global Styles - End */


/* Sidebar */

  /* Multi-Level Navigation */
  
  
  /* Alternative Style */
  /* Looks cool, but a bit unhandy. Just de-coment the next-lines */
  /*
    nav {
    
    ul {
      
      li {
        
        background-color: rgba( 0, 0, 0, .4 );
        
        & > ul {
          
          position: unset;
          background-color: transparent;
          margin-left: 10px;
          max-height: 0;
          transition: max-height .5s;
          overflow: hidden;
          
        }
      
        &:hover {
          
          background-color: rgba( 0, 150, 255, .4 );
          
          & > ul {
            
            max-height: 999px;
            overflow: visible;
            
          }
          
        }
      
      }
      
    }
    
  }
  /**/

/* Some CSS to prettyfy the screen */

  a {
    color: #0078cc;
    text-decoration: none;
  }
  
  #main-wrapper {
    
    padding: 40px 0;
    
  }
  
  .contrast-bg {
    
    padding: 15px;
    background-color: rgba( 255, 255, 255, .6 );
    
    &:first-child {
      
      margin-bottom: 60px;
      
    }
    &:last-child {
      
      margin-top: 60px;
      
    }
    
    p {
      
      margin-top: 0;
      
    }
    
  }