/*

Global Styles


*/

html{
	background-color: #E6DBCC; 	
}

.projects{
		display: grid;
		
		grid-template-columns: repeat(3, 1fr);
		grid
		grid-gap: 20px;
		grid-template-areas: 
		"akagi bismark frigate"
		"js-elcano mississippi san-francisco"
		"sanson stagecoach strikecraft"
		"submarine titanic victory"
		"victory-build victory-build victory-build"
		
	}

body{
  font-family: 'Arial', 'Times New Roman', 'Times', 'serif';
	font-size: 10px;
	margin: 0 auto;	
	width: 100vw;
	text-align: center;
	overflow-x: hidden;
	max-width: 1500px;
	background-color: #E6DBCC; 
}

img{

	max-width: 100%;
}

hr{

	width: 100%;
	opacity: 0.5;
	color: darkgoldenrod;

}

ul{

	list-style: none;
	margin: 0;
	padding: 0;
}

a {

	text-decoration: none;
	color: inherit;
}

/*

Header Section
*/

header {

	background: lightblue;
	padding: 1rem;
	height: 100vh;
}

nav ul{

	font-size: 1rem;
	display: inline-flex;
	justify-content: center;
	
}

nav a {
	
  color: white;
  text-align: center;
  padding: 15px;
  font-weight: bold;
  height: 100%;
}

nav a:hover {
	background-color: #757575;
}

nav li{

	margin: 0 1rem;
}

header h1{

	font-size: 5rem;

}

header p{

	font-size: 1.6rem ;
	padding: 1rem 0;
	border-bottom: 	1px solid lightgray;
}

.rotate{

	margin-top: 2rem;
	font-size: 3rem;
	opacity: 0.4;

}

/*

Parallax Section

*/

.parallax {
	background-image: url("../img/allmodels.jpg");
	height: 100vh;
	background-position: center;
	background-size: cover;

}

/*

Recent Work Section
*/

 .recent-work {
	
	display: flex;
	flex-direction: column;
	font-size: 1.3rem;
	margin: 1rem 0;

}

.recent-work-title{

	font-size: 1.6rem;

}

.recent-work-info{

	padding: 1rem;
}

.recent-work-info h4{

	font-size: 1.4rem;
}

.features > li{

	margin: 1rem 0;
	color: lightcoral;

}

/*

CONTACT US SECTION

*/

#contact{

	display: flex;
	flex-direction: column;
	padding: 1rem;
	height: 100vh;
	background-color: sandybrown;
	color: white;
}

.contact-heading{

	margin: 0;
	font-size: 5rem;
}

.contact-text {
	font-size: 1.4rem;
	margin-bottom: 3rem;

}

#contact.rotate{
	display: none;

}

/* 

PROJECT PAGE

*/
.project-title{
	font-size: 1.6rem;

}

#akagi{
	grid-area: akagi;
}

#bismark{
	grid-area: bismark;
}

#frigate{
	grid-area: frigate;
}

#js-elcano{
	grid-area: js-elcano;
}

#mississippi{
	grid-area: mississippi;
}

#san-francisco{
	grid-area: san-francisco;
}

#sanson{
	grid-area: sanson;
}

#stagecoach{
	grid-area: stagecoach;
}

#strikecraft{
	grid-area: strikecraft;
}

#submarine{
	grid-area: submarine;
}

#titanic{
	grid-area: titanic;
}

#victory{
	grid-area: victory;
}

#victory-build{
	grid-area: victory-build;
}

.projects{
	display: flex;
	flex-direction: column;

}

.grid-item{
	margin-bottom: 1rem;
	padding: 1rem;
	background: lightskyblue;
	position: relative;

}

.grid-item img{
	width: 100%;
	height: 100%;
}

.hidden-text{
	display: none;
}

.grid-item:hover > .hidden-text{
	display: block;
	text-align: center;
	font-size: 30px;
	color: floralwhite;
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -50%);
}

.grid-item:hover img{
	filter: brightness(0.4);
	transform: scale(1.01);
	opacity: 0.95;
}

@media  (min-width: 860px){
	nav ul{
		justify-content: flex-end;	
	}

	.rotate{
		margin: 2rem 0 0 0;
		writing-mode: vertical-lr;
		text-orientation: upright;
		font-size: 2rem;

	}

header{
	height: 100%;
}

.recent-work{
	flex-direction: row;
}

.recent-work-info{
	flex: 1;
	padding: 1rem;
}

.recent-work-image{
	flex: 2;
	border: lightskyblue 1rem solid;
}

.recent-work-image img{
	width: 100%;
	height: 100%;
}

.move-right{
	order: 1;
}

.contact-heading{

	margin: 0;
	font-size: 8rem;
}

#contact{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	text-align: left;
}

#contact .rotate{
	display: block;
}

.projects{
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;

}

.grid-item{
	flex-basis: 45%;
}

}

.fade-in-custom{
	opacity: 0;
	animation:fadein ease-in;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.delay1{
	animation-delay: 0.5s;
}

.delay2{
	animation-delay: 1.5s;

}

@keyframes fadein{
	
	to{opacity: 1}

}

@media (min-width: 760px) {

	.projects{
		display: grid;
		height: 100vh;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20px;
		grid-template-areas: 
		"akagi bismark frigate"
		"js-elcano mississippi san-francisco"
		"sanson stagecoach strikecraft"
		"submarine titanic victory"
		"victory-build victory-build victory-build"
	}

	nav ul{

	font-size: 1.2rem;
	display: inline-flex;
	justify-content: center;
}

nav li{

	margin: 0 1rem;
}

	.grid-item{
		margin-bottom: 0;

	}
}