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



/*  * {border:1px solid black} */



html {
	width: 100%;
	margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}


body
	{
		margin: 0;
		width: 100%;
		height: auto;
		 padding: 0px;
    	overflow-x: hidden;
		background: #161616;
	    font-family: 'Roboto', sans-serif;
		font-size: 11pt;
		font-weight: 300;
		line-height: 1.75em;
		background-color: #FFF;
	}


section {
	margin: 0 auto;
	display: block;
	height: auto;
	text-align: center;
}


header {
	margin: 0 auto;
	width: 100%;
	height: auto;
	min-height: 20em;
	position: relative;
	text-align: center;
	background-color: #000;
	background-image: url("../images/port_banner.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	
}

nav {
	width: 100%;
	padding: .1em;
	height: 2.5em;
	background-color:rgba(40,40,40,.8);
	/*background-color:rgba(33,33,33,.6);*/
	position:fixed;
	z-index: 1;
	
}



a {
	text-decoration: none;
}

a.home {
	color: #FFF;
	padding: 0em 3em;
}

a.home:hover {
	color: #747474;
}

a.author {
color: rgba(158,1,4,1.00);
}


h1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 4.5em;
	font-weight: 100;
	color: rgba(158,1,4,1.00);
	margin-top: .9em;
	line-height: 1em;
	letter-spacing: .04em;
}



h2 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1.5em;
	font-weight: 100;
	color: rgba(78,78,78,1.00);
	margin-top: -1.7em;
	letter-spacing: .5em;
}


h3 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: .9em;
	font-weight: 100;
	color: #FFF;
	opacity: 1;
	margin-top: 8px;

}


h4 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 3em;
	font-weight: 100;
	line-height: 1em;
	width: 100%;
	height:auto;
	color: #FFF;
	position:absolute;
	margin: 0 auto;
	padding: 47% 0;
}


h4:hover {
	
	color: rgba(255,255,255,1)
}



h5 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 3em;
	font-weight: 100;
	width: 100%;
	height: 52%;
	color: #FFF;
	position: relative;
	margin: 0 auto;
	padding-top:30%;
}


h5:hover {
	
	color: rgba(255,255,255,1)
}


h6 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 3em;
	font-weight: 100;
	color: #666;
	opacity: 1;
	margin-top: 1em;
	letter-spacing: .1em;

}







.subhead {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:1.25em;
	font-weight: 100;
	color: #666;
	opacity: 1;
	margin-top: -4.5em;
	letter-spacing: .5em;
}




.title {
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: auto;
	padding-top: 1em;
}


.contact {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	margin-top: 3em;
	margin-bottom: 3em;
	
}



.lookcloser {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	margin-top: 0;
	margin-bottom: 4em;
}




.button {
	width: 12em;
	height:1.8em;
	background-color: white;
	border: 1.5px solid gray;
	border-radius: .7em;
	margin: 0 auto;
	margin-left: 1em;
	margin-right: 1em;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 1.5em;
	color: gray;
	text-align: center;
	
}

.button:hover {
	background-color:rgba(85,0,2,1.00);
	color: white;
	border-color:rgba(85,0,2,.8);
	
}



.button2 {
	width: 8em;
	height:1.7em;
	background-color: white;
	border: 2px solid gray;
	border-radius: .7em;
	margin: 0 auto;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 1.1em;
	color: gray;
	
}

.button2:hover {
	background-color:rgba(85,0,2,1.00);
	color: white;
	border-color:rgba(85,0,2,.8);
	
}


.aboutme {
	width: 65%;
	margin: 0 auto;
	text-align: center;
	font-size: 1.05em;
}


.bold {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size:1.1em;
	font-weight: 300;
	color: #666;
	opacity: 1;
	text-transform: uppercase;
	color: rgba(158,1,4,1.00);
}




.pad {
	padding: 0em 0em 1em 0em;
	margin-top: -1em;
	
	
}



.square {
	margin: 0 auto;
	width: 24em;
	height: 24em;
	margin: 10px 20px;
	background-color: black;
	display: inline-block;
	position: relative;
	border-radius: .5em;
	

}


.rectangle {
	margin: 0 auto;
	width: 37.5em;
	height: 24em;
	margin: 10px 20px 30px 20px;
	background-color: black;
	display: inline-block;
	position: relative;
	border-radius: 1em;
	

}





.marketing {
	background-image:url("../images/marketing1.jpg");
	background-size: cover;
	opacity: 1;
	
}


.marketing:hover {
	background-image:url("../images/marketing2.jpg");
	background-size: cover;
	opacity: 1;
	
}



.branding {
	background-image:url("../images/branding_1.jpg");
	background-size: cover;
	opacity: 1;
	
}


.branding:hover {
	background-image:url("../images/branding_2.jpg");
	background-size: cover;
	opacity: 1;
	
}


.production {
	background-image:url("../images/production_1.jpg");
	background-size: cover;
	opacity: 1;
	
}


.production:hover {
	background-image:url("../images/production_2.jpg");
	background-size: cover;
	opacity: 1;
	
}


.digital {
	background-image:url("../images/digital_1.jpg");
	background-size: cover;
	opacity: 1;
	
}


.digital:hover {
	background-image:url("../images/digital_2.jpg");
	background-size: cover;
	opacity: 1;
	
}



.events {
	background-image:url("../images/events_1.jpg");
	background-size: cover;
	opacity: 1;
	
}


.events:hover {
	background-image:url("../images/events_2.jpg");
	background-size: cover;
	opacity: 1;
	
}





.appear {
	
	color: rgba(0,0,0,0);
	background-color: rgba(17,193,41,0);
}


.appear:hover {
	
	color: rgba(0,0,0,.6)
}



.appear2 {
	
	color: rgba(255,255,255,0);
}


.appear2:hover {
	
	color: rgba(255,255,255,1);
}




.image {
	margin: 5em auto 2em auto;
	width: 90%;
	height: auto;
	display: block;
	
}


.image2 {
	margin: 0 auto;
	width: 100%;
	height: auto;
	display: block;
	
}


.imgresume {
	margin: auto 0;
	border: 1px solid #000;
	width: 50%;
	margin-bottom: 2em;
}