@charset "UTF-8";
/* CSS Document */

body, html {width:100%; height:100%; padding:0; margin:0; background-color:#FDE3A7}
#contentor {
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 1;
	
	}
#home {width: 100%; padding-top: 80px; text-align: center;}

.menu {display: inline-block; margin: 0 40px; position: relative;}
.menu a {text-decoration: none; z-index:3000}
.menu img {width: 38px;}
.menu span {margin: 2px 12px; display: none; padding: 6px 10px; border: 2px solid #000; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; text-transform:uppercase; z-index:3000; position: absolute; top: 50px; left: -10px;}
.menu a:hover span {display: inline-block; z-index:3000}

#imgHome {margin-top: 150px; text-align:center;}
#imgHome img {width:430px;}

#aboutme {margin-top: 150px; color:#000000; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:20px; font-weight: 500; text-transform:uppercase; text-align:center;}


.main {
	margin-top: 100px;
	text-align: center;
	overflow: hidden;
	max-width: 1200px;
    margin: 100px auto;
	position: relative;
}

.work {
	display: inline-block;
	width: 300px;
	padding: 0 40px 40px;
	vertical-align: top;
}
.work img {
	width: 100%;
	vertical-align: top;
}

.work a {
	display:block;
	position: relative;
}
.work a:hover .overlay {
	width: 100%;
	height: 100%;
	background: url(images/hover.png) no-repeat center;
	background-size: cover;
	z-index: 1000;
	position: absolute;
	top: 0;
	left: 0;
}

#contact {color:#000000; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:28px; font-weight: 500; text-transform:uppercase; margin-top: 100px; text-align:center;}

.banner {width:770px; height:560px; margin: 0 auto 30px; position:relative;}
.slide {width:770px; height:560px; background-position:center; background-size:contain; background-repeat:no-repeat;}

.cycle-nav {position: absolute; top: 260px; left: 0; height: 50px; width: 100%; z-index: 999;}
.cycle-prev {cursor:pointer; position: absolute; left:0;}
.cycle-prev img {width:100px;}

.cycle-next {cursor:pointer; position: absolute; right:0;}
.cycle-next img {width:100px;}

@media only screen and (max-width: 700px) {
		
	
	#imgHome {margin-top: 100px;}
	#imgHome img {width: 80%;}
	
	.menu {margin: 0 10px;}
	.menu span {display: block; font-size: 12px; margin-top: 10px; position: static;}
	.menu a:hover span {display: block; z-index:3000}
	
	#aboutme {margin: 100px 20px 40px; font-size: 15px; line-height: 21px;}
	#aboutme br {display: none;}
	
	#contact {font-size: 22px;}
	
	.work {width: calc(100% - 40px); padding: 0 20px 40px;}

	.cycle-nav {display: none;}
	
	.banner {width: calc(100% - 40px); height: 280px; margin:0 20px;}
	.slide {width: 100%; height: 280px;}
	
	.imgfancybox-media {margin-top: 800px;}
	
	/*
	.banner, .slide {height:300px;}
	.cycle-prev, .cycle-next {display: none;}
	.project {width: 100%; padding:0 0 30px;}
	*/
	}