body{
	margin:0px;
	padding:0px;
	font-family:1em;
	font-family:arial;
	overflow-x: hidden;
}



 *{
	 box-sizing: border-box;
	 margin:0px;
	 padding:0px;
 }
header{

	padding: 1rem;
	z-index:9990;
	background:rgba(255,255,255,1);
}

a{
	text-decoration:none;
}

#projects{
width:100%;
max-width:100%;
}


#header {
	max-height: 75px;
	
}

/*#logo h2{
	background:url(http://oneorangeallblue.com/wp-content/uploads/blue.png) no-repeat left top;
	text-indent:-9999px;
	height:34px;
	display:block;
}*/


.project{
	overflow:hidden!important;
	position:relative;
	width:100%!important;
}

.project a, .project a span{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	
}



.project a{
	position:absolute;
	top:0%;
	left:0px;
	background:rgba(0,0,0,0.45);
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
	opacity: 0;
	width:100%;
	height:100%;
	z-index:9990;
	}

.project a span{
	-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top:8%;
font-size:32px;
color:#fff;
font-family: 'Roboto Condensed', sans-serif;
text-transform:uppercase;
position:absolute;
top:0px;
left:0px;

}

.project:hover a{
	opacity: 1;
}

.project img.prjPic{
	width:100%;
	height:auto;
	z-index:8000;
}




/*#project1{
	background:url(images/1.jpg) no-repeat left top;
}

#project2{
	background:url(images/2.jpg) no-repeat left top;
}

#project3{
	background:url(images/3.jpg) no-repeat left top;
}

#project4{
	background:url(images/4.jpg) no-repeat left top;
}

#project5{
	background:url(images/5.jpg) no-repeat left top;
}

#project6{
	background:url(images/6.jpg) no-repeat left top;
}

#project7{
	background:url(images/7.jpg) no-repeat left top;
}

#project8{
	background:url(images/8.jpg) no-repeat left top;
}

#project9{
	background:url(images/9.jpg) no-repeat left top;
}
#project10{
	background:url(images/10.jpg) no-repeat left top;
}

#project11{
	background:url(images/11.jpg) no-repeat left top;
}

#project12{
	background:url(images/12.jpg) no-repeat left top;
}
#project13{
	background:url(images/13.jpg) no-repeat left top;
}

#project14{
	background:url(images/14.jpg) no-repeat left top;
}

#project15{
	background:url(images/15.jpg) no-repeat left top;
}
#project16{
	background:url(images/16.jpg) no-repeat left top;
}

#project17{
	background:url(images/17.jpg) no-repeat left top;
}

#project18{
	background:url(images/18.jpg) no-repeat left top;
}
#project19{
	background:url(images/19.jpg) no-repeat left top;
}

#project20{
	background:url(images/20.jpg) no-repeat left top;
}

#project21{
	background:url(images/21.jpg) no-repeat left top;
}
#project22{
	background:url(images/22.jpg) no-repeat left top;
}
#project23{
	background:url(images/23.jpg) no-repeat left top;
}

#project25{
	background:url(images/8.jpg) no-repeat left top;
}
*/

#orangeHeader {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	
}
ul, li{
	margin:0px;
	padding:0px;
}

#topMenu li{
	display:inline-block;

	padding:0px 15px;
}

#topMenu li a{
	font-size:16px;
	font-family: 'rio_blue_lt_cdrio_blue_lt_cd';
	color:#a4a4a4;
	text-transform:uppercase;
	font-weight:bold;
}
@media only screen and (max-width: 2560px) {
	.project{max-height:500px;
	}
	
}

@media only screen and (min-width: 1920px) {
	.project{max-height:396px;
	}
	
}

@media only screen and (max-width: 1920px) {
	.project{height:396px;
	}
	
}

@media only screen and (max-width: 1600px) {
	.project{max-height:320px;
	}
	
}


@media only screen and (max-width: 1440px) {
	.project{max-height:296px;
	}
	
}

@media only screen and (max-width: 1280px) {
	.project{max-height:246px;
	}
	.project a span{
		font-size:18px;}

	}
@media only screen and (max-width: 1080px) {
	.project{max-height:221px;
	}
	.project a span{
		font-size:18px;}

	}	
	
@media only screen and (max-width: 800px) {
	.project{max-height:156px;
	}
	
	.project a span{
		font-size:14px;}

		#logo h2{
			background-size:320px 22px;
		}
		
	}
	

	
@media only screen and (max-width: 400px) {
	.project{max-height:80px;

	}
	.project a span{
		font-size:14px;}
		#projects{
		width:300px;
	}
	#projects{
		width:300px;
	}
	
}

@media only screen and (max-width: 320px) {
	.project{height:68px;
	}
	.project a span{
font-size:14px;}
#projects{
		width:300px;
	}
}
	
@media only screen and (max-width: 300px) {
	.project{height:50px;
	}
	#projects{
		width:300px;
	}
	.project a span{
		font-size:14px;}

	
}