a{
	color:green;
}

.top-img
{max-height:70vh; 
overflow:hidden;
position:relative;
 width:100%;
 padding:0px;
 margin:0px;
}
.top-img p
{position:absolute; 
width:100%; 
color: white; 
bottom:2px; 
background-color:black; 
opacity: 0.7; 
text-align: center; 
font-size: 40px; 
margin:0px;
padding:0px;
 animation-name: slide;
 animation-duration: 4s;
}

@keyframes slide {
  0%   { transform: translate(-100%, 0); }
  100% { transform: translate( 0%, 0); }
}
.top-img p:hover
{
	 text-decoration:underline;
	
}

.image-left
{width: 30%;
margin:20px;
margin-top:0px;


}

.text
{display: inline-block;
vertical-align:top;
max-width: 60%;
	text-align: left;
}
.right
{
text-align: right;
margin-left: 20%;
width:60%;

background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
border-radius: 10px;
padding-bottom:15px;



	
}
.left
{	
text-align: left;
margin-left: 20%;
width:60%;

background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
border-radius: 10px;
padding-bottom:15px;

	
	
	
	
}
.left h2
{padding-top:10px;
	text-align:center;



}
.right h2
{padding-top:10px;
	text-align:center;

}
#Expand
{ background-color: #226D24; 
text-decoration:underline;
color:white;
border: none;
margin-top:20px;
padding:5px;
margin-left:50%;
translate: -50% 0px;
}

#Expand:hover
{background-color:#74B958; 
}

@media screen and (max-width: 800px) {
	.left 
	{text-align: center;
	margin: 0;
	width:100%;
	
	}
	.image-left
	{width:60%;
	margin:0;
	}
	.right
	{text-align: center;
	margin: 0;
    width:100%;
	}
	.text
    {
     max-width: 90%;
	
    }
	
	
	.top-img p
	{font-size: 20px;
	}
	
	
	#history
	{display:none;
	}
	
}