body input ~ nav {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:80px;
  z-index: 3;
  transition: .5s;
  transition-delay: .5s;
overflow: hidden;
}
body input ~ nav > ul {
  text-align:center;
  position: absolute;
  top:30px;
left:215px;
  width: 80%;
line-height:130%;

}
body input ~ nav > ul > li {
  opacity: 1;
  transition: .5s;
  transition-delay: 0s;
float:left;
margin:1px 5px 1px 0;

}
body input ~ nav > ul > li > a {
  text-decoration: none !important;
  font-weight:bold;
  color: #FFF;
  font-size:90%;
display: inline-block;
padding:1px 4px;
}

.aface{
  position: relative;
  
  text-decoration: none;
  color: #1F2C5C;
  background: #ECECEC;
  border-radius: 0 7px 7px 0;
  transition: .4s;
}

body input ~ nav > ul > li > a:hover {
	color: #e05418;
	background: #FFF;
}

body input ~ nav > ul > li > a.aface:hover {
background:#e05418;
color: #fff;
}



@media screen and (max-width:800px) {

body input ~ nav {
height:0px;


}
body input ~ nav > ul {
  text-align:center;
  position: absolute;
  top: 15%;
  width: 100%;
left:0;
}
body input ~ nav > ul > li {
  opacity: 0;
  transition: .5s;
  transition-delay: 0s;
float:none;
margin:0;
}
body input ~ nav > ul > li > a {
  text-decoration: none;
  font-weight:bold;
  color: #FFF;
  font-size:130%;
  display: block;
  padding:12px;

}

.aface{
  position: relative;
  color: #FFF;
  background:none;
  border-radius:0;
  transition:0;

}

body input ~ nav > ul > li > a:hover {
	color: #e05418;
	background: #FFF;
}
body input ~ nav > ul > li > a.aface:hover {
	color: #e05418;
	background: #FFF;
}



body input:checked ~ nav {
  height: 100%;
  transition-delay: 0s;
  background: rgba(31,44,92,255);
}
body input:checked ~ nav > ul > li {
  opacity: 1;
  transition-delay: .5s;
}



body input + label {
  position: fixed;
  top: 24px;
  right: 40px;
  height: 30px;
  width: 30px;
  z-index: 99996;
}
body input + label span {
  position: absolute;
  width: 100%;
  height:2px;
  top: 50%;
  margin-top: 0px;
  left:10px;
  display: block;
  background: #FFF;
  transition: .5s;
}
body input + label span:first-child {
  top: 4px;
}
body input + label span:last-child {
  top: 26px;
}
body label:hover {
  cursor: pointer;
}
body input:checked + label span {
  opacity: 0;
  top: 50%;
}
body input:checked + label span:first-child {
  opacity: 1;
  transform: rotate(405deg);
}
body input:checked + label span:last-child {
  opacity: 1;
  transform: rotate(-405deg);
}
}