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

.nav {
  /*border-bottom: 1px solid #00b3b3;*/
  width:98%;
  text-align: right;
  /*line-height: 5em;*/
}
.menu {
  margin: 0px 10px 0 0;
  padding-top:35px;	
}

.menu a {
  width: 15%; /* 100% / 5 tabs = 20% */
  padding: 10px 0px 10px 7px;	
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: 'Didact Gothic', sans-serif;
  font-size:95%;	
  text-transform: uppercase;
  letter-spacing: 2px;
 /* border-right: #fff 1px solid;*/
}
.menu a:after{
   content: '  ';
   font-family: 'Didact Gothic', sans-serif;
   font-size:1.5em;
   margin: 0 0px 0 7px;	
}
.menu a:last-child:after{
   content:' ';
}

.menu a:hover {
  background: #4b8072;
  color:#fff;
	}
.menu a:hover:after{
	content:' ';}
	 

label {
  margin: 0 10px 0 0;
  font-size: 26px;
  line-height: 3em;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

/*.main_content {
  clear: both;
  max-width: 80%;
  margin: auto;
  padding: 30px;
}*/
/*---------------------------------------------MEDIA QUERY-----------------------------------------*/

@media only screen and (max-width: 980px) {
  
  .logo h1 {
    font-size: 25px;
  }
  
/*when the scren width is smaller than 980px, the label will show and the cursor will trasform into a pointer*/
  
  label {
    display: block;
    cursor: pointer;
  }
  
  /*the menu containing the links will have the text aligned in the center, it will take the full width of the page and it will be hidden if the label is not pressed*/
  
	.nav{
		line-height:3em;
	}  
.menu {
    text-align: center;
    width: 100%;
    display: none;
    clear: both;
	padding-top:0px;
  }
  
  /*the links inside the menu will be block-displayed so they'll take the full width of the page and they'll have a bottom margin*/
  
  .menu a {
    width:100%;
	clear: right;
    display: block;
    border-bottom: 1px solid #00b3b3;
    margin: 0;
  }
  
.menu a:after{
   content:'';

}	
  #toggle:checked + .menu {
    display: block;
  }
  
  
}