@charset "UTF-8";
body {}

header {
	display: flex;
	width: 100%;}

.logo {
  	display: block;
  	width: 20%;
	z-index: 1;}

.logoPhone {
  	display: none;
  	width: 30%;}

.topnav {
  	margin: 40px auto;
  	overflow: hidden;
	font-family: SourceSansPro-Bold, Helvetica, Arial, sans-serif;
	font-size: 1.4em;}

.topnav a {
  	float: left;
 	display: block;
  	color: black;
  	text-align: center;
  	padding: 10px 70px;
  	text-decoration: none;}

.active {
  	color: red !important;}

.topnav .icon {
  	display: none;}

.topnav a:hover, .dropdown:hover .dropbtn {
  	color: red !important;}

.underLogo {
	display: block;
	position: relative;
	top: -35px;
	left: 0;}

.fullLength {
	display: block;
	width: 100%;
	position: relative;
	top: -35px;
	left: 0;
	z-index: -1;}

.mainContent {
	display: inline-block;
	clear: both;
	margin: 0 30px 40px 30px;}

row {
	width: 100%;}

.colLeft {
	float: left;
	width: 49%;
	padding-right: 10px;}

.colRight {
	float: right;
	width: 49%;}

/* Home Page */
.homePortfolio {
	display: inline-block;
	align-content: center;}

.homePortfolio img {
	display: block;
	float: left;
	width: 16.6%;
	margin: 0;}

/* Portfolio */
.colTwo {
	float: left;
	width: 50%;}

.colThree {
	float: left;
	width: 33.3%;}

/* Project Page */
.sideBar {
	display: inline-block;
	float: left;
	width: 12%;}

.sideBar ul {
	margin: inherit;
	padding-left: 0;}

.sideBar li {
	float: none;}

.projectImages {
	display: block;
	float: left;
	width: 57%;}

.projectImages img {
	padding-bottom: 20px;}

.projectInfo {
	display: block;
	float: right;
	width: 28%;
	padding-left: 10px;}

.colLeftThree {
	display: block;
	float: left;
	width: 32%;
	padding-right: 10px;}

.colRightThree {
	display: block;
	float: right;
	width: 32%;}

.colLeftFour {
	display: block;
	float: left;
	width: 24%;
	padding-right: 10px;}

.colRightFour {
	display: block;
	float: right;
	width: 23%;}

.footer {
	display: inline-flex;
	width: 100%;
	background-color: black;}

.info {
	display: inline-flex;
	width: 85%;
	margin: auto;}

.info li {
	float: left;
	margin-left: 20px;}

.socialMedia {
	float: right;
	width: 20%;}

.socialMedia li {
	float: left;
	width: 15%;
	margin: 0 10px 10px 10px;}


/* Tablet Wide */
@media only screen and (max-width : 999px) {
	.topnav {
		margin: 30px auto;}
	
	.topnav a {
		padding: 10px 45px;}
	
	.logo {
		width: 25%;}
	
	.fullLength {
		top: -30px;}
}

/* Tablet Long */
@media only screen and (max-width : 760px) {
	.logo {
		width: 28%;}
	
	.topnav {
		margin: 20px auto;}
	
	.topnav a {
		padding: 10px 25px;}
	
	.underLogo {
		top: -25px;}
	
	.fullLength {
		top: -25px;
		margin-bottom: 10px;}
	
	.colLeft {
		width: 100%;
		margin-bottom: 20px;}
	
	.colRight {
		width: 100%;}
	
	.homePortfolio img {
		width: 33.3%}
	
	.sideBar {
		width: 20%;}
	
	.projectImages {
		width: 80%;}
	
	.colLeftThree, .colRightThree {
		width: 32%;
		padding-bottom: 20px;}
	
	.projectInfo {
		width: 80%;}
	
	.socialMedia {
		width: 30%;}
}

/* Phone */
@media only screen and (max-width : 480px) {
	.mainContent {
		margin-top: 30px;}
	
	header {background-color: black;}
	
	.logo {display: none;}
	.logoPhone {display: block;}
	
	.topnav {
		margin: 10px auto;}
	
  	.topnav a:not(:first-child), .dropdown .dropbtn {
    	display: none;
		color: white;}

  	.topnav a.icon {
    	display: block;
    	position: absolute;
    	top: 0;
    	right: 0;}

  	.topnav.responsive .icon {
    	position: absolute;
    	right: 0;
    	top: 0;}
	
  	.topnav.responsive a {
    	float: none;
    	display: block;
    	text-align: center;}
	
  	.topnav.responsive {
    	display: block;}
	
	.underLogo {
		position: static;}
	
	.fullLength {
		position: static;}
	
	.homePortfolio img {
		width: 50%;}
	
	.colTwo, .colThree {
		width: 100%;
		padding-bottom: 20px;}
	
	.sideBar {
		width: 100%;}
	
	.projectImages {
		width: 100%;}
	
	.colLeft, .colRight {
		width: 100%;}
	
	.colLeftThree, .colRightThree {
		width: 100%;}
	
	.projectInfo {
		width: 100%;}
	
	.socialMedia {
		width: 55%;}
}