/* CSS Document */
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 100%; 
	font-family: BenchNineLight;
	background-color: #EEEEEE;
}


.clearfix{
	clear:both;
}

p{
	font-family: BenchNineLight;
	font-size: 1em;
}

h1{
	margin-top: 4%;
	font-family: BenchNineLight;
	font-size: 3.2em;
	font-weight: normal;
}
	
h2{
	font-family: BenchNineRegular;
	font-size: 1.6em;	
}

h3{
	font-family: BenchNineRegular;
	font-size: 1.4em;		
}

h4{
	font-family: BenchNineRegular;
	font-size: 1.2em;		
}
	
a, a:link, a:visited{
	font-family: BenchNineBold;
	font-size: 1em;	
	color: #0099cb;
	text-decoration: none;
}

a:hover{
	font-family: BenchNineBold;
	font-size: 1em;	
	color: #377693;	
	text-decoration: none;
}

a.nav, a.nav:link, a.nav:visited{
	font-family: BenchNineLight;
	font-size: 1.3em;	
	color: #EEEEEE;
	text-decoration: none;
}

a.nav:hover{
	font-family: BenchNineLight;
	font-size: 1.3em;	
	color: #333333;	
	text-decoration: none;
}

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

li{
	float: right;
	font-family: BenchNineBold;
	font-size: 1.8em;	
	color: #377693;	
	display: inline;
	margin: 0 2% 0 2%;
}



form{
	background: #6c6c6c;
	width: 30%;
	height: auto;
	margin: 0 auto;	
	padding: 2%;
}

input[type=text]
{
    background-color: #EEEEEE;
    color: #377693;
    height: 6%;
	margin-left: 5%;
	width: 45%;
	padding-left: 2%;
	outline: none;
}



input[type=button]
{
    background-color: #0099cb;
    color: #979797;
    height: 6%;
    width: 25%;
    color: #EEEEEE;
    text-transform:uppercase;
    box-shadow:-1px 2px #6E6B6A inset;
	margin: 0 auto;
	margin-left: 35%;
	outline:none;
}

.welcome1{
	margin: 6% 0 -.5em 0;
	font-family: BenchNineRegular;
	font-size: 3.2em;		
}

.welcome2{
	margin:0 0 -.5em 0;
	font-family: BenchNineRegular;
	font-size: 4em;		
}

.welcome3{
	margin:0 0 -.5em 0;
	font-family: BenchNineRegular;
	font-size: 4.5em;	
}

.welcome4{
	margin:0 0 -.5em 0;
	font-family: BenchNineRegular;
	font-size: 5.3em;	
}

.welcome5{
	margin:0 0 -.5em 0;
	font-family: BenchNineRegular;
	font-size: 6.8em;	
}

input[type=button], input[type=text]
{
    border: 0;
    border-radius:5px;
    font-family: BenchNineLight;
	font-size: 1em;
}


blockquote{
	font-family: BenchNineRegular;
	font-size: 1em;	
	width: 20%;
}

b{
	font-family: BenchNineBold;
	font-size: 1em;	
}

i, em {
	font-family: BenchNineRegular;
	font-size: 1em;
}

.grey{
	color: #6C6C6C;
}

.lightBlue{
	color: #0099cb;
}

.darkBlue{
	color: #377693;
	}
	
.white{
	color: #EEEEEE;
	}


@font-face {
    font-family: BenchNineLight;
    src: url(benchnine/BenchNine-Light-webfont.woff);
}

@font-face {
    font-family: BenchNineRegular;
    src: url(benchnine/BenchNine-Regular-webfont.woff);
}

@font-face {
    font-family: BenchnineBold;
    src: url(benchnine/BenchNine-Bold-webfont.woff);
}
/*Layout Grid*/

.container{
	position: relative;
	max-width: 2000px;
	min-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.header{
	position: relative;
	z-index: -1;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}

.navi{
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #0099CB;
	height: 45px;
}

.body{
	overflow: hidden;
	padding: 1.5% 0 2% 0;
	width: 100%;
	background-color: #EEEEEE;
	height: 100%;
}

.left{
	margin: 0% 1% 0 10%;	
	width: 28%;
	float: left;
}

.right{
	margin:0 10% 0 1%;	
	width: 50%;
	float: left;
	height: 100%;
}

.footer{
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #333333;
	height: 200px;
	min-height: 35%;	
}

.processHeader{
	font-size: 2.3em;
}

.section{
	float: left;
	margin-right: 5%;
	margin-left: 5%;
	}

.portfolio{
	width: 75%;
	margin: 0 auto;	
}

.process{
	width: 80%;
	margin: 0 auto;	
	padding-left: 25px;
	margin-bottom: 40px;
}

.about1{
	width: 75%;
	margin: 0 auto;	
}

.contact{
	width: 60%;
	margin: 0 auto;	
}

.footerleft{
	float: left;	
}

.footerright{
	float: right;
	padding-top: 1%;
	padding-right: 1%;
	text-align: right;
}

.recent{
	margin: 0;
	width: 100%;
	height: 50%;
}

.rimage{
	float: left;	
	margin-left: 35px;
	margin-right: 20px;
}


@media screen and (max-width: 640px) { 
	body {
		font-size: .5rem;
	} 
	
	.left, .right{
	width: 100%;
	margin: 0;
	float: none;
}


	div.logo{
	top: 2%;
	left: 38.7%;

}
.footerleft{
	float: none;	
	width: 100%;
}

.footerright{
	float: none;	
	width: 100%;
}

.facebook{
	margin-left: 10px;
}
} 

@media (min-width: 640px) { 
	body {
		font-size: .6rem;
	} 
} 

@media (min-width:960px) { 
	body {
		font-size:.8rem;
	} 
} 

@media (min-width:1100px) { 
	body {
		font-size:1rem;
	}
	
div.logo{
	top: 2%;
	left: 38.7%;
	width: 60%;
}

}
	
	
div.logo{
	position: absolute;
	z-index: 6;
	top: 1.5%;
	left: 39%;
	background-image: url(images/logo.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 29%;
	padding-bottom: 29%;
	max-width: 350px;
	margin: 0 auto;
}

/*Styles for the facebook image links*/	
.facebook{
	display: inline-block;
	width: 50px;
	height: 50px;
	background:url(images/Untitled-2.png) 0px 0px;
	margin-right: 20px;
	margin-left: 50px;
	margin-top: 40px;
}

.facebook:hover{
	display: inline-block;
	min-width: 50px;
	min-height: 50px;
	background:url(images/Untitled-2.png) 0px -54px;
	margin-right: 20px;
	margin-left: 50px;
	margin-top: 40px;
}

/*Styles for the behance image links*/	
.behance{
	display: inline-block;
	width: 50px;
	height: 50px;
	background:url(images/Untitled-2.png) -55px 0px;
	margin-right: 20px;
	margin-top: 40px;
}

.behance:hover{
	display: inline-block;
	min-width: 50px;
	min-height: 50px;
	background:url(images/Untitled-2.png) -55px -54px;
	margin-right: 20px;
	margin-top: 40px;
}

/*Styles for the linkedin image links*/	
.linkedin{
	display: inline-block;
	width: 50px;
	height: 50px;
	background:url(images/Untitled-2.png) -110px 0px;
	margin-right: 20px;
	margin-top: 40px;
}

.linkedin:hover{
	display: inline-block;
	min-width: 50px;
	min-height: 50px;
	background:url(images/Untitled-2.png) -110px -54px;
	margin-right: 20px;
	margin-top: 40px;
}
	
	/*Styles for the twitter image links*/	
.twitter{
	display: inline-block;
	width: 50px;
	height: 50px;
	background:url(images/Untitled-2.png) -165px 0px;
	margin-right: 20px;
	margin-top: 40px;
}

.twitter:hover{
	display: inline-block;
	min-width: 50px;
	min-height: 50px;
	background:url(images/Untitled-2.png) -165px -54px;
	margin-right: 20px;
	margin-top: 40px;
}

/*Styles for the instagram image links*/	
.instagram{
	display: inline-block;
	width: 50px;
	height: 50px;
	background:url(images/Untitled-2.png) -220px 0px;
	margin-right: 20px;
	margin-top: 40px;
}

.instagram:hover{
	display: inline-block;
	min-width: 50px;
	min-height: 50px;
	background:url(images/Untitled-2.png) -220px -54px;
	margin-right: 20px;
	margin-top: 40px;
}