/***************** FONTS ********************/

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
html {font-size: 62.5%; font-family: 'Open Sans', sans-serif;}
body {font-size: 1.6rem; min-height: 100vh;}
h1 {font-size: 3rem; margin-bottom: 1rem;}
h2 {font-size: 1.6rem;}
header {position: relative;}
main {padding: 2rem;}

/************** NAVIGATION ***************/

 
nav input,
nav label {
	display: none;
	width: 36px; 
	height: 36px; 
	background: #555; 
	color: #fff; 
	text-align: center; 
	line-height: 36px;
	font-size: 1.6rem;
	border-radius: 2px;
} 
nav label {
   position: absolute; 
   top: 8px; 
   right: 8px; 
   transition: .4s;
}
nav label:hover {cursor:pointer;}
nav label:before {
	font-family: FontAwesome;
	font-size: 24px;
	content: "\f0c9";
	text-align: center;
}

ul.subitem {
   display:none;
    position:absolute;
}
li.menuitem {
    position:relative;
    display:inline-block;

}
.menuitem:hover > ul.subitem {
    display:block;
}
/************* MEDIA QUERIES **************/

@media only screen and (max-width: 1000px){
   nav {
      position: fixed;
	  width:100%
	  
   }
	nav ul {
	  transform: translateY(0);
      transition: all .5s;
      position: fixed;
      width: 100%;
	  left: 0px;
	  background:#999;
	  height:450px;
	  position:fixed;
	}
	
	nav li.menuitem { 
		width:100%;
		right:0px;
		left:-7px;
	} 
	nav li.menuitem a { 
		width:100%;
		
		
	} 
	
	nav input[type="checkbox"]:checked + ul  {
		transform: translateY(-800px);
		width: 100%;
		background: #999;   
        transition: all .0s;
	}
	nav label{
      display: block;
   }  
	nav input[type="checkbox"]:checked + ul li:nth-child(1){
		background: #777; 
		color: #fff;
	}
ul#navigation li:hover > ul, ul#navigation1 li.menuitem:hover > ul
{
display:none;
}
ul#navigation li.menuitem, ul#navigation1 li.menuitem {
	text-decoration:none;
	display:inline-block;
	color:white;
	border: none;
	border-bottom:solid;
	display:block;
	z-index:75;
}
ul#navigation li.menuitem:hover, ul#navigation1 li.menuitem:hover {
	border-bottom-color:white;
}
}
@media only screen and (max-width: 1250px){
.image_bar{
	
	display:none
	}
}