* {
padding:0;
margin:0;
}

body {
font-family: 'Montserrat', sans-serif;
font-weight:400;
font-size:18px;
line-height:1.45;
background-color:#e6e6e6;
}

header {
width:100%;
height:4em;
background-color:#2E2E2E;
overflow:hidden;
}

a {
text-decoration:none;
color:#545454;	
}

p {
	margin-bottom:1em;
}

a:hover {
color:#ff9800;	
}

ul li {
list-style-type:none;	
}

#logo {
width:20%;
float:left;	
}
#logo span {
line-height: 2.5em;
font-weight: 400;
font-size: 150%;
color: #FF9800;
}
#logo span:nth-of-type(1) {
margin-left: 1em;	
}

#logo span.white {
color:#fff;	
}

#logo span.gray {
color:#ccc;	
}

#logo a {
color:#fff;	
}

.page-nav {
width:60%;
max-width:35em;
float:right;
}
nav ul {
	margin-left: 0;
}
nav ul li {
display:inline;
width:25%;
float:left;
text-align:center;
margin-left:0;
line-height:4em;
}

nav ul li a {
	display: block;
	color: #fff;
}

.page-nav ul li a:hover, .page-nav ul li a:focus, .page-nav ul li.main-on {
	color:#fff;
	background-color:#FF9800;
}

/* Sub Menus */
.page-nav li ul {
	position: absolute;
	display: none;
	width: 15em;
	z-index: 9999;
	background: #666;
}
.page-nav li ul li {
	display: block;
	width: 100%;
	text-align: left;
	text-indent: 1em;
	font-size:80%;
}
.page-nav li ul li a {
	display: block;
}


.page-nav ul li ul li.sub-menu a:hover, .page-nav ul li ul li.sub-menu a:focus, .page-nav ul li.sub-menu:hover, .page-nav ul li.sub-menu:focus, .page-nav ul li.sub-menu:hover a, .page-nav ul li.sub-menu:focus a {
	background: #FF9800;
}


/* mobile nav */
.primary-nav, .nav-button {
	display: none;
}

#banner {
width:100%;
max-width:120em;/*1920px*/
position:relative;
}

#banner img {
width:100%;
display:block;	
z-index:400;
}

.banner-box {
position:absolute;
bottom:0;
right:0;
width:100%;
height:50%;
background-color:rgba(0,0,0,.5);	
z-index:500;
}

.banner-text {
margin:0 auto;	
z-index:600;
color:#fff;
width:80%;
position:relative;
}

.banner-call {
font-size:300%;
width:50%;
position:absolute;
top:0;
left:0;
margin-top:11.75%;
color:#FF9800;

}

.banner-links {
width:50%;
float:right;	
position:absolute;
right:0;
top:0;
margin-top:4.75%;
}

.banner-links li {
	list-style-type:none;
	color:#fff;
	font-size:150%;
	text-align:right;
}

.banner-links li a {
color:#fff;
text-decoration:none;	
}

.banner-links li a:hover {
color:#FF9800;
}

#main {
width:60%;
max-width:72em; /*1152px*/
margin:1em auto 5em auto;
overflow:hidden;
font-size:110%;
position:relative;
}

#main-port {
width:75%;
max-width:90em; /*1440px*/
margin:1em auto 5em auto;
overflow:hidden;
font-size:110%;
position:relative;	
}

.port-list {
padding-bottom: 1em;
}

a.bright, .bright {
float:right;	
color:#ff9800;
clear:both;
}

a.bright:hover {
color:#666;	
}

p.thx {
text-align:center;	
}
.clear {
margin-top:80vh;	
}
.clear1 {
display: block;
clear: both;
padding-bottom: 1em;
}

h2 {
margin:0 auto 2em auto;
text-align:center;	
padding-top:2em;
}

h2:nth-of-type(2) {
margin-bottom:0;	
}

h3 {
 margin-bottom: .5em;
 padding-top: .5em;
 color:#FF9800;
 clear: both;
}

h3 a {
color:#FF9800;	
}

h4 {
  padding-left: .5em;
 color:#FF9800;
}

#main ul {
margin-left:.5em;
margin-bottom:2em;
}

#main ul li {
padding-top:.25em;
margin-bottom:.5em;	
}
.mobile-services {
display:none;	
}

.service, .skill {
width:20%;
float:left;	
padding-right:6.667%;
padding-top:2em;
margin-bottom:3.5em;
}



.service:nth-of-type(4), .skill:nth-of-type(4) {
padding-right:0;
float:right;	
}

.service img, .skill img {
max-width:80%;	
margin:0 auto 1em auto ;
padding-top:1em;
display:block;
}

.service h3, .skill h3 {
font-size:90%;	
text-align:center;
color:#2e2e2e;
}

.piece {
width:49%;
float:left;
margin-bottom:2em;	
}

.piece:nth-of-type(2n) {
float:right;	
}

.port {
position:relative;
}

.port-box {
position:absolute;
top:0;
right:0;
background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
color: #fff;
height: 100%;
padding: 1em;
box-sizing: border-box;
display:none;
font-size:65%;
}
.port-box ul {
	margin-bottom:.5em;
}
.port-box li {
    display: inline-block;
    padding: .5em;
    border: 2px solid #e2e2e2;
	margin-bottom:.25em;
}

.port-box li.port-type {
border: 2px solid #ff9800;	
}

.port img {
max-width:100%;	
display:block;
}

/* Contact Form*/

form {
padding-top:2em;	
margin-bottom:3.5em;
clear:both;
}

#name, #company, #email, #phone {
    width: 20em;
    height: 2em;
}

#comments {
width:98%;	
}

#submit, .cog-button__text {
width:15%;
min-width:75px;	
color: #ff9800;
font-family: montserrat;
background: none;
border: 2px solid #666;
margin-top: .75em;
height: 2.5em;
}

#submit:hover, .cog-button__text:hover {
background-color:#666;

}
.cog-branding.cog-branding--minimal, .cog-branding.cog-branding--minimal a, .cog-abuse.cog-wrapper, cog-abuse.cog-wrapper a {
  display: none !important;
}

/*label.inquiry, label.comments {
display:block;
margin-bottom:-.5em;
}*/
/* END Contact Form*/


footer {
height:6em;
line-height:7em;
	background-color:#2E2E2E;
overflow:hidden;
clear:both;
}

#copy {
	width:80%;
margin:0 auto;	
color:#fff;
text-align:right;
font-size:70%;
}

a.more {
float:right;
padding:.25em;
}

@media screen and (max-width: 1100px){
.piece {
width:100%;
float:none;
margin-bottom:2em;	
}

.piece:nth-of-type(2n) {
float:none;	
}

.port-box {
font-size:100%;	
}
}

@media screen and (max-width: 900px) {

#logo {
	float:none;
	position:absolute;
	top:.5em;
	left:0;
	z-index:9999;
}

/* Navigation Button
	-------------------------------------------------------- */
.page-nav {
	display: none;
}
.nav-button {
	display: block;
	position: relative;
	top: .5em;
	float: right;
	margin-right: .5em;
	width: 50px;
	height: 35px;
	background: url('../images/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/menu-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/menu-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/menu-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 21px, 100%;
	cursor: pointer;
	border: 0 none;
	border-bottom: 1px solid rgba(255,255,255,.1);
	/*	box-shadow: 0 0 4px rgba(0,0,0,.7) inset;*/
	z-index: 9999;
	text-indent: -9999px;
}
.nav-button:hover {
	background-color: rgba(0,0,0,.1);
}
.nav-button.open {
	background: url('../images/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/close-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/close-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background: url('../images/close-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 21px, 100%;
}

/* Navigation Bar
	-------------------------------------------------------- */

.primary-nav {
	display: block;
	width: 100%;
	float: none;
	background-color: #2e2e2e; /*change the menu color*/
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	display: block;
	height: 50px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.6);
	position: absolute;
	z-index: 9998;
	clear: both;
	text-align: center;
}
.primary-nav li {
	display: none;
	width: 100%;
	margin-left: 0;
}
.primary-nav li a {
	display: block;
	color: #ffffff;
	width: 90%;
	padding: 10px 5%;
	font-size: 150%;
	font-weight: normal;
	text-shadow: -1px -1px 0 rgba(0,0,0,.4);
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,.2);
	border-top: 1px solid rgba(255,255,255,.1);
}
.primary-nav li a:hover {
	background-color: rgba(0,0,0,.5);
	border-top-color: transparent;
	color: #fff;
}
.primary-nav > li:first-child {
	border-top: 1px solid rgba(0,0,0,.2);
}

/* Toggle the navigation bar open  */

.primary-nav.open {
	height: auto;
	padding-top: 50px;
}
.primary-nav.open li {
	display: block;
}



#main, #main-port {
font-size:150%;	
width:80%;
}

.port-box {
font-size:85%;	
}

.mobile-services {
display:block;	
}

.service {
width:40%;
float:left;	
padding-right:5%;
margin-bottom:3.5em;
}

.service:nth-of-type(even) {
padding-right:0;
float:right;	
}	
	
.banner-text {
width:90%;	
}

.banner-links {
margin-top:4%;	
}

.banner-call {
margin-top:10.5%;	
}


.service h3 {
font-size:100%;	
}

footer {
font-size:150%;	
}
	
}


@media screen and (max-width: 675px) {
	
.banner-text {
width:95%;	
}

.banner-links {
margin-top:2.5%;	
}

.banner-call {
margin-top:9%;	
}

.service {
clear:left;	
}

.service:nth-of-type(even) {
clear:right;	
}
.port-box {
font-size:65%;	
}
	
}

@media screen and (max-width: 600px) {
	

.banner-links {
display:none;	
}

.banner-call {
	width:90%;
margin-top:5%;	
}

#main, #main-port {
	width:95%;
	
}

h2 {
margin:0 auto 1em auto;
text-align:center;	
padding-top:1em;
}
.port-box {
font-size:60%;	
}

}

@media screen and (max-width: 400px) {
.port-box {
font-size:50%;	
}
}