@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Dosis:600);

*{
  margin:0;
  padding:0;
}

img{
  display:block;
  width:100%;
}

.clearfix:after{
  display:block;
  clear:both;
  content:"";
}

#container{
  font-family: "Open Sans";
  color:#222;
  font-size:16px;
  color:#333;
  -webkit-font-smoothing:antialiased;
}

.wrapper{
	width:80%;
	margin:0 auto;
	max-width:1200px;
}

.wrapperbig{
	width:80%;
	margin:0 auto;
}

/*-----HEADER-----*/

header{
	height:300px;
	background-color:#6D6E70;
	background-image:url('img/header2.png');
	background-position:center;
	background-size: cover;
}

/*-----NAV-----*/

nav{
	width:100%;
	background-color:#6D6E70;
}

nav img{
	display:none;
}

nav ul{
	text-align:center;
	list-style:none;
}

nav ul li{
	display:inline-block;
}

nav ul li a{
	text-decoration:none;
	font-size:1.5em;
	font-weight:400;
	color:white;
	display:block;
	padding:10px;
	text-transform:uppercase;
}

nav ul li:nth-of-type(1) a:hover{
	color:#A7CE38;
}

nav ul li:nth-of-type(2) a:hover{
	color:#5ABC7A;
}

nav ul li:nth-of-type(3) a:hover{
	color:#47C3D8;
}

.fixed{
	position:fixed;
	top:0;
	left:0;
	z-index:5;
}


/*-----MAIN-----*/

main section{
	position:relative;
	padding-top:200px;
}

main section h2{
	color:white;
	font-size:1.75em;
	text-transform:uppercase;
	position:absolute;
	display:block;
	top:130px;
	right:0;
	background-position:left center;
	background-size:cover;
	background-repeat:no-repeat;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:10%;
	padding-left:50px;
}

main section:first-of-type{
	padding-top:150px;
}

main section:first-of-type h2{
	top:70px;
}

/*WORK*/

#work h2{
	background-image:url('img/ribbon2.png');
}

#work #buttons{
	list-style:none;
	padding-bottom:5px;
	padding-left:5px;
}

#work #buttons li{
	float:left;
	padding:5px 10px;
	color:#999;
	cursor:pointer;
	text-transform: uppercase;
}

#work #buttons li:hover{
	color:#A7CE38;
}

#work #isotope img{
	float:left;
	box-sizing:border-box;
	padding:10px;
	cursor:pointer;
}

/*PHP*/

#close p{
	float:right;
	padding-right:15px;
	padding-top:30px;
	color:#A7CE38;
	font-size:2em;
	font-weight:400;
	position:relative;
	top:35px;
	visibility:hidden;
	cursor:pointer;
}

#work #php h3{
	color:#A7CE38;
	font-size:1.5em;
	font-weight:400;
	padding-left:10px;
}

#work #php .left{
	float:left;
	box-sizing:border-box;
	width:33.33%;
	padding:10px;
}

#work #php a{
	color:inherit;
}

#work #php .left h4 a{
	color:#A7CE38;
	font-size:1.25em;
	font-weight:400;
	display:block;
	padding:5px 0;
}

#work #php .right{
	width:66.67%;
	float:left;
}

#work #php .right .half{
	float:left;
	box-sizing:border-box;
	width:50%;
	padding:10px;
}

#work #php .right .full{
	float:left;
	box-sizing:border-box;
	width:100%;
	padding:10px;
}

#work #php .right .gif{
	max-width:650px;
	margin:0 auto;
}

.embed-container { 
	float:left;
	box-sizing:border-box;
	width:100%;
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

div.sushi img{
	width:50%;
	margin:0 auto;
	margin-bottom:80px;
	transition:all 0s;
	-moz-transition:all 0s;
	-webkit-transition:all 0s;
}

div.sushi img:hover{
	transform:rotate(360deg);
	transition:transform .5s ease-in-out;
}

/*ABOUT*/

#about h2{
	background-image:url('img/ribbon3.png');
}

#about .wrapper > *{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding:10px;
}

#about article h3{
	font-size:1.75em;
	font-weight:600;
	color:#5ABC7A;
}

#about article a{
	display:block;
	margin-top:20px;
	text-decoration: none;
	font-size:.75em;
}


/*CONTACT*/

#contact h2{
	background-image:url('img/ribbon4.png');
}

#contact h3{
	color:#47C3D8;
	font-size:1.75em;
	padding-left:10px;
}

#contact a{
	color:inherit;
	padding-bottom:15px;
	display: block;
	padding-left:10px;
}

#contact form *:focus {
    outline: 0;
}


#contact form .half{
	width:50%;
	box-sizing:border-box;
	padding:10px;
	float:left;
	margin-bottom:15px;
}

#contact form input[type="text"]{
	width:100%;
	box-sizing:border-box;
	padding:10px;
	border:none;
	background-color:#eee;
	font-size:1em;
	color:inherit;
}

#contact form .full{
	width:100%;
	box-sizing:border-box;
	padding:10px;
}

#contact form textarea{
	width:100%;
	box-sizing:border-box;
	padding:10px;
	border:none;
	background-color:#eee;
	font-size:1em;
	height:200px;
	color:inherit;
}

#contact form input[type="submit"]{
	width:100%;
	box-sizing:border-box;
	padding:10px;
	text-align:center;
	text-transform:uppercase;
	color:white;
	border:none;
	font-size:1.15em;
	cursor:pointer;
	background-color:#eee;
	color:#aaa;
}

#contact form input[type="submit"]:hover{
	background-color:#47C3D8;
	color:#fff;
}

/*-----FOOTER-----*/

footer{
	padding-top:70px;
	padding-bottom:20px;
}

footer h6{
	font-weight:400;
	font-size:.75em;
	padding-left:10px;
}

/*-----------QUERIES!-----------*/

/*-----3 Grid-----*/

@media screen and (min-width:1024px){

	#work #isotope img{
		width:33.33%;
	}

}

/*-----2 Grid-----*/

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

	main section{
		padding-top:130px;
	}

	main section h2{
		top:60px;
	}


	#work #isotope img{
		width:50%;
	}

	#work #php .left, #work #php .right{
		float:none;
		width:100%;
	}

	#close p{
		top:0;
	}

	#about .wrapper > *{
		float:none;
		width:100%;
		box-sizing:border-box;
		padding:10px;
	}

}

/*-----mobile fix-----*/

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

	header{
		background-image:url('img/header1502.png');
		height:150px;
	}

	nav img{
		display:block;
		margin:0 auto;
		width:28px;
		padding:16px;
		cursor:pointer;
	}

	nav ul{
		display:none;
	}

	nav ul li{
		display:block;
		margin:0 auto;
		text-align:center;
	}


	main section:first-of-type{
		padding-top:100px;
	}

	main section:first-of-type h2{
		top:40px;
	}

	
	#work #php .right .half{
		width:100%;
	}


	#contact form .half{
		width:100%;
		box-sizing:border-box;
		padding:10px;
		margin-bottom:0;
	}

	#contact form .half:nth-of-type(2){
		margin-bottom:15px;
	}


}