body {
	background: url('jumbo.jpg') no-repeat;
	background-size: cover;
	font-family:Arial;
	color:white;
	
	}
img{
	
	max-width:7%;
	max-height:11%;
	
	}
	
	h3{
		color:black;
		text-decoration:underline;
		
	}
	
		
	}
	h4{
		color:#ffffff;
		text-decoration:underline;
	}
ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul li {
	float:right;
	width: 220px;
	height: 40px;
	background-color: black;
	opacity: .8;
	line-height: 40px;
	text-align:center;
	font-size: 12px;
	margin-right: -2px;
}
ul li a {
	text-decoration: none;
	color:white;
	display:block;
}
ul li a:hover {
	background-color:green;
}
ul li ul li {
	display:none;
}
ul li:hover ul li {
	animation: load 1s forwards;
	display:block;
}
.fa-list.modify{
	display: none;
	font-size: 35px;
	position: absolute;
	top: 10px;  
	right: 10px;
	cursor: pointer;
}

@keyframes load{
	0%{
		transform: translateX(25px) scale(1.6) rotate(-30deg);
	}
	100%{
		opacity:1;
		transform:translateX(0px) scale(1) rotate(0);
		box-shadow: 0px 0 px 10px black;
	}
} 



.gates li:first-child{
	animation-delay: 0;
}
.gates li:nth-child(2){
	animation-delay:0.1s;
}
.gates li:nth-child(3){
	animation-delay:0.2s;
}
.gates li:nth-child(4){
	animation-delay:0.3s;
}
.gates li:nth-child(5){
	animation-delay:0.4s;
}
.gates li:nth-child(6){
	animation-delay:0.5s;
}
.gates li:nth-child(7){
	animation-delay:0.6s;
}
.gates li:nth-child(8){
	animation-delay:0.7s;
}
.gates li:nth-child(9){
	animation-delay:0.8s;
}
.gates li:nth-child(10){
	animation-delay:0.9s;
}
.gates li:last-child{
	animation-delay:1s;
}

.darrow
{
	font-size: 11pt;
	position: absolute;
	top: 7px;
	right: 79px
}

div.background {
  
  border: 2px solid black; 
	margin-top:32px;
  }

div.transbox {
  margin: 30px;
  margin-top:30px;
  background-color: #ffffff;
  border: 1px solid black; 
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
  padding:2%
}

div.transbox p {
  margin-left: 2%;
  font-weight: bold;
  color: #000000;
  
}

div.transbox h3 {
margin-left: 2%;
}
div.transbox img {
	max-width:none;
	max-height:none;
	
	
}
.homeButton {
	float:left;
	width: 160px;
	height: 40px;
	}
.Contact {
	float:left;
	width: 160px;
	height: 40px;
	
	}

@media (max-width: 960px){
/*	ul{
	width: 100%;
	display: -webkit-box;
	margin: 0px;
	padding: 0px;
	list-style: none;
	*/
.gates{
	/*display:none;*/
}
.fa-list.modify{
	display:block;
	color:white;
	
}

div ul li{
	width:100px;
	height:50px;
	
}
}