@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700|Raleway:400,400i,500,500i,700,700i,800,800i,900&display=swap');

*{
	box-sizing: border-box;
}

body{
	margin: 0;
	font-family: 'Raleway', sans-serif;
	text-align: center;
	font-variant-numeric: lining-nums;
}

img{
	max-width: 100%;
	height: auto;
}


.container{
	width: 80%;
	min-height: calc(100vh - 265px);
	margin: 0 auto;
}

.clearfix::after,
	section::after,
	footer::after{
	content: '';
	display: block;
	clear: both;
}


/*typography
=========================
=========================*/

h2{
	text-transform: uppercase;
	font-size: 1.25em;
	letter-spacing: .1em;
	font-weight: 800;
	color: #000000;
}

h3{
	font-size: 1.5em;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .1em;
	margin: .7em 0;
}
	
h4{
	font-size: 1em;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .1em;
	margin: 0;
}

p{
	font-weight: 200;
	font-size: 1em;
	text-decoration: none;
	letter-spacing: .1em;
}


.button{
	display: inline-block;
	color:  #FFFFFF;
	background-color: #F89623;
	font-weight: 600;
	font-size: .9em;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .1em;
	border-width: 2px;
	border-style: solid;
	border-radius: .2em;
	border-color: #F89623;
	padding: .25em .5em;
	margin: 1em;
	
}

.button:hover{
	background: #FFFFFF;
	color: #F89623;
	border-color: #F89623;
	
}


.button-accent{
	display: inline-block;
	color:  #FFFFFF;
	font-weight: 600;
	font-size: .9em;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .1em;
	border-width: 2px;
	border-style: solid;
	border-radius: .2em;
	border-color: #FFFFFF;
	padding: .25em .5em;
	margin: .25em;
	
}

.button-accent:hover{
	background-color: #FFFFFF;
	color: #F89623;
	border-color: #FFFFFF;
	
}


@media(min-width: 37.5rem){
	
}




/*Featured Work
=========================
=========================*/

.featured{
	margin-bottom: 3em;
	transition: all ease-in-out 250ms;

}

.featured figure{
	margin: .5em;
}

.featured h2{
	font-size: 1.75em;
	border-bottom: solid medium #F89623;
	width: 13em;
	margin: 1.5em auto;
	clear: both;
}

.featuredItem{
	margin: .5em;
	position: relative;
	padding: 0;
}

.featuredItem img{
	display: block;
}

.featuredDescription{
	position: absolute;
	z-index: 100;
	bottom: 0em;
	left: 0em;
	right: 0em;
	background:rgba(50,50,50,0.65);
	padding: .25em;
}

.featuredDescription p{
	margin: 0em;
	color: #FFFFFF;
	letter-spacing: .1em;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
}

.featuredDescription a{
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	font-size: .75rem;
	padding: .6em;
	font-weight: 500;
	color: #FFFFFF;
}

.featuredDescription a:hover,
.featuredDescription a:focus{
	color: #F89623;
}

@media(min-width: 37.5rem){
	.featuredItem{
		width: calc(50% - 1em);
		float: left;
		margin: 0em;
		overflow: hidden;
	}
		.featuredDescription{
		transform: translateY(150%);
	}
	
	.featuredItem:hover{
			box-shadow: 0em .10em .5em rgba(0, 0, 0, .55);
			}
	
	.featuredItem:hover .featuredDescription{
		transform: translateY(0%);
	}	

}

@media(min-width: 60rem){
	.featuredItem{
		width: calc(33.3333% - 1em);
	}
}



/*///////////////////////////////*/
/*/////////// NEW CSS ///////////*/
/*///////////////////////////////*/


/*Header & Landing
=========================
=========================*/

header{
	position: fixed;
	top: -7em; 
	left: 0;
	width: 100vw;
	min-height: 6.25em;
	background-color: rgba(84,86,91,1.0);
	padding: .85em 5em;	
	box-shadow: 0em .10em .5em rgba(0, 0, 0, .55);
	z-index: 300;
  	transition: top ease-in-out 500ms;
}

header.static{
	top: 0; 
}

header div.logoPlaceholder{
	display: inline-block;
	width: 3em;
	height: 4em;
	float: left;
}

header.static .logo{
	width: 3.5em;
	height: auto;
	float: left;
	
}

header .wordmark{
	width: 15em;
	display: inline-block;
	float: left;
	text-align: center;
}

header h1{
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: .175em;
	font-weight: 800;
	color: #FFFFFF;
}

header h1 hr{
	width: 13em;
	border: 0;
	border-top: solid .14em rgba(249,157,37,1.0);
	border-radius: 100px;
	margin: .2em auto .2em auto;
}

header h1 span{
	font-size: 1em;
	letter-spacing: .225em;
	font-weight: 400;
	display: block;
	font-family: 'Quicksand', sans-serif;
	text-transform: lowercase;
	
}

header ul{
	display: inline-block;	
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(249,157,37,1.00);
}

header li{
	display: inline-block;
	margin: 1.75em .25em;
}

header a{
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	font-size: 1rem;
	padding: .6em;
	color: #FFFFFF;
}

header a:hover,
header a:focus{
	color: #F89623;
}

.placeholder{
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: red;
}


.large{
	width: 15em;
	height: auto;
	position: fixed;
	top: 35%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	z-index: 999;
  	transition: all ease-in-out 500ms;

}

.small{
	width: 3.35em;
	height: auto;
	position: fixed;
	top: .75em;
	left: 5.25em;
	z-index: 999;
    transition: all ease-in-out 500ms;

}

.landingBG{
	display: block;
	width: 100vw;
	height: 100vh;
	background-image: 
	url("../images/landingBG.jpg");
	padding:  0;	
	background-size: cover;
	background-position: center;
	text-align: center;
}

.landingBG ul{
	display: inline-block;	
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(249,157,37,1.00);
}

.landingBG li{
	display: inline-block;
	margin: 1.75em .25em;
}

.landingBG a{
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	font-size: 1rem;
	padding: .6em;
	color: #FFFFFF;
}

.landingBG a:hover,
.landingBG a:focus{
	color: #F89623;
}


.landingBG .wordmark{
	margin-top: 11.25em;
	font-size: 2.5em;
	text-transform: uppercase;
	letter-spacing: .175em;
	display: block;
	font-weight: 800;
	color: #FFFFFF;
}

.landingBG .wordmark hr{
	width: 13em;
	border: 0;
	border-top: solid .125em rgba(249,157,37,1.0);
	margin: .25em auto .2em auto;
	border-radius: 100px;
}

.landingBG .wordmark span{
	font-size: 1em;
	letter-spacing: .225em;
	font-weight: 400;
	display: block;
	font-family: 'Quicksand', sans-serif;
	text-transform: lowercase;
}

#scrollDown{
	margin-top: 13em;
}

#scrollDown h2{
	color: #FFFFFF;
}

#scrollDown img{
	width: 3em;
	height: auto;
	
}

.invisible{
	opacity: 0;
	transition: opacity 200ms;
}

.visible{
	opacity: 1;
}

div.headerSpacer{
	height: 9em;
	width: 100%;
	display: block;
	}

section.welcome{
	margin: 4em 0 9em 0;
}

.welcome.photo{
	width: 30%;
	display: inline-block;
	float: left;
	padding: 0 2em 0 0;
	text-align: right;
}

.welcome.photo img{
	margin-top: 3.5em;
	width: 15em;
	height: auto;
}

.welcome.text{
	width: 65%;
	display: inline-block;
	float: left;
	text-align: left;
	padding: 2em;
}

.welcome.text a{
	color: rgba(249,157,37,1.00);
	text-decoration: none;
}

.welcome.text a:hover{
	color: rgba(244,121,32,1.00);
	text-decoration: none;
}


.welcome h2{
	font-size: 1.75em;
	border-bottom: solid medium #F89623;
	width: 5.9em;
	margin: 1.5em 0 .75em 0;
	}


/*About Page
=========================
=========================*/

section.about{
	margin: 1em 0;
}

.about.photo{
	width: 30%;
	display: inline-block;
	float: left;
	padding: 0 2em 0 0;
	text-align: right;
}

.about.photo img{
	margin-top: 3.5em;
	width: 15em;
	height: auto;
}

.about.text{
	width: 65%;
	display: inline-block;
	float: left;
	text-align: left;
	padding: 2em;
}

.about.text a{
	color: rgba(249,157,37,1.00);
	text-decoration: none;
}

.about.text a:hover{
	color: rgba(244,121,32,1.00);
	text-decoration: none;
}


.about h2{
	font-size: 1.75em;
	border-bottom: solid medium #F89623;
	width: 3.75em;
	margin: 1.5em 0 .75em 0;
	}
	
.about.text span{
	display: block;
	width: 100%;
	margin-top: 3em;
	text-align: center;
}
.about.text img{
	height: 4em;
	padding: 0 3em;
}


/*PORTFOLIO - PROJECT
=========================
=========================*/
.projectInfo{
	width: 27%;
	height: 100%;
	float: left;
	padding-right: 1em;
	text-align: left;
	border-right: solid medium;
	border-color: rgba(254,191,64,1.00);
	clear: both;
}

.projectInfo p{
	margin: .25em 0 1.5em 0;
}

.projectImages{
	width: 70%;
	min-height: 300px;
	float: left;
	margin-left: 2em;
}

.projectImages figure{
	margin: 0 0 1em 0;
	overflow: hidden;
}

.relatedProjects{
	display: block;
	float: left;
	width: 100%;
	min-height: 50px;
}

.relatedProjects h2{
	font-size: 1.75em;
	border-bottom: solid medium #F89623;
	width: 11.5em;
	margin: 2em 0 .75em 0;
}

.relatedProjects figure{
	width: calc(25% - 1em);
	margin: .5em;
}

/*FOOTER
=========================
=========================*/

footer{
	background-color: rgba(84,86,91,1.0);
	padding: .85em 5em;	
	margin-top: 3em;
}

footer p{
	font-size: .7em;
	color: #FFFFFF;
	margin: .25em;
	line-height: 2em;
}

.footer.left{
	width: 50%;
	text-align: center;
	float: left;
}

.footer.right{
	width: 50%;
	text-align: center;
	float: right;
}

footer ul{
	display: inline-block;	
	margin: 0;
	padding: 0;
	list-style: none;
}

footer li{
	display: inline-block;
	margin: 0 .25em;
}

footer a{
	padding: .6em;
}

footer img{
	height: 2.5em;
	width: auto;
}