/* 
.nav {
    border:1px solid #ccc;
    border-width:1px 0;
    font-family: syntax; 
    font-size: 30px; 
    font-weight: bold;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    background-color: #303030;
}
.nav li {
    display:inline;
    padding: 20px;
}
.nav a {
    display:inline-block;
    padding:30px;
    text-decoration: none;
    color: #FFFFFF
}

.nav a:hover {
    text-decoration: underline;
}

@font-face {
    font-family: syntax;
    font-style: roman; 
    src: url(syntaxltstd-roman.otf);
}

#image1 {
	width: 200px;
	height: 500px;
}

#image2 {
	width: 200px;
	height: 500px;
} 
 
body { 
background-color:  #303030;
} 

 */
 
.nav {
    font-family: syntax; 
    font-size: 30px; 
    font-weight: bold;
    list-style:none;
    margin:55px;
    padding:0;
    text-align:center;
    background-color: #303030
}
.nav li {
    display:inline;
    padding: 20px;
}
.nav a {
    display:inline-block;
    padding:30px;
    text-decoration: none;
    color: #FFFFFF
}

.nav a:hover {
    text-decoration: underline;
}

.nav a:active {
    text-decoration: underline;
}

@font-face {
    font-family: syntax;
    font-style: roman; 
    src: url(syntaxltstd-roman.otf);
}
 
 
#image1 {
	width: 455px;
	height: 411px;
	background-size:100%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:55px;
	margin-top:-55px;
 
}
 
#image2 {
	width: 469px;
	height: 411px;
	background-size:100%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:570px;
	margin-top:-411px;
 
} 

 
#image3 {
	/* 
width: 971px;
	height: 372px;
 */
 
 	width:988px;
 	height:345px;
	background-size:100%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:50px;
	margin-top:-344px;
	
/*  margin-top:-348px; */
} 
  #image4 {
	width: 492px;
	height: 800px;
	background-size:80%;
	background-repeat:no-repeat;
	position:relative;
	margin-left:1114px;
	margin-top:-411px;
	
	/* margin-left:1102px; */
 
} 
.responsiveImg{
 	width:100%;
	height:100%;
}




.overlayBox{

position:absolute;
width:100%;
height:100%;
color:white;
opacity:0;
transition: opacity 1s ease;


}

.overlayBox:hover{
opacity:0.5;
}

.overlayText{
font-size: 30px;
font-family: syntax;
font-weight: 10; 
text-align: center;
position:absolute;
bottom:0px;
background:black;
width:100%;
}