@charset "utf-8";
/* CSS Document */

.logo {
	margin-bottom: -30px;
	margin-top:-5px;
}

nav ul {
	float: right;
}

nav ul li {
	display: inline;
	float: left;
	margin: -5px 15px 0 0;
	
}
nav ul li a {
	text-decoration: none;
    color: #336699;
    font-size: 1.3em;
}

body {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	font-family: arial;
}

/* This is changed to flex, from grid, to modify the insides of the cell for this particular container. Insides of the cell being 1D in layout is fine, but this centers the text in the cell and it's the only way I can think of to do this so meh */

.titletext {
	font-size: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-box {
	height: 338px;
	background-color: #000000;
	background-image: url(images/banner-image-port.jpg);
	background-size:cover;
	margin: .5%;
}

h1 {
	color: #FFFFFF;
	font-size: 55px;
	padding-top: 30px;
	padding-left: 50px;
}



.column img {
	width: 100%;
	height: auto;
}

.column {
	width: 49%;
	float: left;
	margin: .5%;
	
}

.lightboxOverlay { overflow: scroll; }



img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/*Tablet Size*/
@media (max-width: 768px){
	h1 {
		font-size: 30px;
		text-align: left;
		padding-left: 0px;
	}
	nav ul { 
		display: block;
		margin-top: -75px;
		text-align: right;
	}
	nav ul li{
		      
   		width: 100%;
		height: 100%;
		
}
	
	.column {
		width: 49%;
	}
	

}

/*Mobile Phone Size*/
@media (max-width: 400px){
	.logo img {
		width: 40%;
	}
	h1 {
		font-size: 24px;
	}
	nav ul li {
		display: block;
		margin-top: 0px;
		font-size: 15px;
	}
	.column {
		width: 99%;
	}
	
}