/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  float:right;
  /* non-critical appearance styles */
  list-style: none;
  background-color:#656565;
  border-left:1px solid #959595;
}

.navigation.mob {display:block;}
.navigation.pc {display:none;}
@media only screen and (min-width : 970px) {
	.navigation.mob {display:none;}
	.navigation.pc {display:block; position:absolute; top:70px; background-color:transparent; border:none;}
}
@media only screen and (min-width : 1250px) {
	.navigation.pc {top:90px; }
}

/* Navigation Menu - List items */
.navigation li {
  /* non-critical appearance styles */
  width: 100%;
  float:none;
  display:block;
  background:transparent;
  transition: background 0.5s ease-in-out;
}

.navigation li a {
  /* non-critical appearance styles */
  display: block;
  padding: 10px 20px;
  color: #fff;
  font-size:18px;
  text-decoration: none;
  letter-spacing:1px;
  border-bottom:#999 1px solid;
}
.navigation li label[for="nav-trigger"] {
  /* non-critical appearance styles */
  display: block;
  padding: 10px 20px;
  color: #fff;
  font-size:18px;
  text-decoration: none;
  transition: background 0.5s ease-in-out;
  letter-spacing:1px;
  border-bottom:#feaf34 1px solid;
  position:relative;
  width:100%;
  height:auto;
  top:0;
  right:0;
  text-indent:0;
  background-image:none;
}
.navigation li label[for="nav-trigger"] {
	background-color:rgba(0, 136, 204, 0.8);
}

.navigation li:hover,.navigation li:focus, .navigation li:active, .navigation li.current-menu-item {
  background: rgba(0, 136, 204, 0.8);
  transition: background 0.5s ease-in-out;
}


@media only screen and (min-width : 970px) {
	.navigation {position:relative; width:auto; height:60px;}
	.navigation li {display:inline-block; padding:0; width:auto; float:left; position:relative;}
	.navigation li a {padding:10px 15px; border:none;}
	
	.navigation li ul {position:absolute;width:180px; background-color:rgba(0,0,0,0.8);transition: all 1s ease 0s; opacity:0; top:105%; display:none;}
		.navigation li:hover ul {transition: all 1s ease 0.5s; opacity:1; top:100%; display:block;}
	.navigation li li {display:block; float:none; border:1px solid rgba(0,0,0,0.7);  margin:0 0 -1px;}
	.navigation li li a {font-size:16px;}
}
@media only screen and (min-width : 1250px) {
	
}
/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;  
  background-color: #fff ; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  right: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 0;

}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}



label[for="nav-trigger"] {
  /* critical positioning styles */
  position: absolute;
  right: 20px; top: 50px;
  z-index: 200;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 35px;
  cursor: pointer;
  background-image:url(../images/hamburger.png);
  background-size:25px 20px;
  background-color:#333;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
  text-indent:-500px;
  
}
@media only screen and (min-width : 970px) {
	label[for="nav-trigger"] { display:none;}
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: right 0.2s;
}

.nav-trigger:checked + label {
  right: 220px;
}

.nav-trigger:checked ~ .site-wrap {
  right: 200px;
}