body {
	margin:0;
	padding:0;
	background:#fff;
	background-size:cover;
}

a:link, a:hover {
	text-decoration:none;
}

header {
	box-sizing:border-box;
	width:100%;
	padding:0 10px;
	background:rgba(0,0,0,.7);
	position:fixed;
	top:0;
	z-index:9999;
}

nav {
	position:relative;
	text-align:center;
	min-height:80px;
	max-height:80px;
	width:1000px;
	max-width:100%;
	margin:0 auto;
}

.nav-icon {
		display: none;
		cursor: pointer;
	}
	
	.bar1, .bar2, .bar3 {
		width: 35px;
		height: 4px;
		background-color: #fff;
		margin: 3px 0;
		transition: 0.4s;
	}
	
	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-5px, 4px) ;
		transform: rotate(-45deg) translate(-5px, 4px) ;
	}
	
	.change .bar2 {opacity: 0;}
	
	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-6px, -6px) ;
		transform: rotate(45deg) translate(-6px, -6px) ;
	}

nav > ul {
	position:absolute;
	top:0;
	left:0;
	list-style:none;
	margin:0;
	padding:0;
    font-family: 'Roboto Condensed', sans-serif;
	font-size:1.1em;
}

nav > ul li {
	display:inline-block;
	line-height:80px;
	margin-right:15px;
}

nav > ul a:link, nav > ul a:visited {
	color:#72b2de;
	transition:color .5s ease;
}

nav > ul a:hover {
	color:#fff;
	transition:color .5s ease;
}

#logo {
	height:80px;
	width:auto;
}


#social {
	display:inline-block;
	position:absolute;
	top:0;
	right:0;
	line-height:80px;
}

.social {
	display:inline-block;
	width:36px;
	height:36px;
	line-height:40px;
	margin-left:10px;
	text-align:center;
	font-size:1.1em;
	font-weight:bolder;
}

.social a:link, .social a:visited {
	color:#72b2de;
	display:block;
	width:36px;
	height:36px;
	transition:color .3s ease;
}

.social a:hover {
	color:#fff;
	transition:color .3s ease;
}

#banner {
	background:url(../img/banner.jpg) #fff no-repeat top center fixed;
	background-size:cover;
	width:100%;
	padding-top:80px;
	padding-bottom:300px;
	margin:0 auto;
	position:fixed;
	top:0;
	color:#fff;
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	z-index:-2;
	text-align:center;
	font-size:1.2em;
}

#banner:before {
	content:'';
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:rgba(46,134,195,.6);
	z-index:-1;
}

#banner2 {
	background:url(../img/foto1.jpg) #fff no-repeat top center fixed;
	background-size:cover;
	width:100%;
	padding-top:80px;
	padding-bottom:300px;
	margin:0 auto;
	position:fixed;
	top:0;
	color:#fff;
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	z-index:-2;
	text-align:center;
	font-size:1.2em;
}

#banner2:before {
	content:'';
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:rgba(0,0,0,.4);
	z-index:-1;
}
#banner3 {
	background:url(../img/contacto.jpg) #fff no-repeat top center fixed;
	background-size:cover;
	width:100%;
	padding-top:80px;
	padding-bottom:300px;
	margin:0 auto;
	position:fixed;
	top:0;
	color:#fff;
	font-family: 'Raleway', sans-serif;
	font-weight:300;
	z-index:-2;
	text-align:center;
	font-size:1.2em;
}

#banner3:before {
	content:'';
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:rgba(0,0,0,.4);
	z-index:-1;
}
#banner h1, #banner2 h1, #banner3 h1 {
	font-weight:normal;
	font-size:2.5em;
	padding-top:30px;
	margin-bottom:10px;
	font-family: 'Fjalla One', sans-serif;
	z-index:1;
}

#main {
	z-index:999;
	background:#fff;
	margin-top:400px;
	width:100%;
	max-width:100%;
	min-height:300px;
	padding:80px 0;
}


#main2 {
	z-index:999;
	background:#fff;
	width:100%;
	max-width:100%;
	min-height:300px;
	padding:100px 0;
}

#menu {
	box-sizing:border-box;
	width:1020px;
	max-width:100%;
	margin:0 auto;
	text-align:center;
	font-size:1.2em;
	padding:10px 10px 50px 10px;
	font-family: 'Raleway', sans-serif;
	color:#72b2de;
}

#menu a:link, #menu a:visited {
	color:#72b2de;
	transition:color .4s ease;
}

#menu a:hover {
	color:rgba(46,134,195,1);
	transition:color .4s ease;
}

#menu h1 {
	margin-top:0;
}

.info {
	text-align:center;
	font-size:.85em;
	color:#515151;
}

#project {
	box-sizing:border-box;
	width:1020px;
	max-width:100%;
	padding:0 10px;
	margin:0 auto;
	font-size:0pt;
	text-align:center;
}


#project img {
	max-width:100%;
	height:auto;
	margin:10px auto;
	display:block;
}
	

#grid {
	box-sizing:border-box;
	width:1020px;
	max-width:100%;
	padding:0 10px;
	margin:0 auto;
	font-size:0pt;
	text-align:center;
}

.thumb {
	box-sizing:border-box;
	width:25%;
	display:inline-block;
	border:1px solid #fff;
	background:#ccc;
	position:relative;
}

.mix, .thumb {
	display:none;
	vertical-align:top;
}

.thumb img {
	width:100%;
	max-width:100%;
	height:auto;
	z-index:98;
}

.thumbtxt {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.7);
  	background: -webkit-radial-gradient(circle, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));
  	background: -o-radial-gradient(circle, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));
 	background: -moz-radial-gradient(circle, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));
 	background: radial-gradient(circle, rgba(0, 0, 0, .2), rgba(0, 0, 0, .8));
	z-index:99;
	opacity:0;
	transition:opacity .4s ease;
	font-size:medium;
}

.thumbtxt span {
	box-sizing:border-box;
	padding:10px;
	display:block;
	position:absolute;
    top:50%;
	left:0;
	right:0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	text-align:center;
	color:#fff;
	font-family: 'Fjalla One', sans-serif;
	font-size:1.5em;
	 text-shadow: 0px 0px 10px #000;
}

.thumb:hover .thumbtxt {
	opacity:1;
	transition:opacity .4s ease;
}

#contact {
	box-sizing:border-box;
	width:1020px;
	max-width:100%;
	padding:30px 10px;
	margin:0 auto;
	font-family: 'Raleway', sans-serif;
	color:#666;
}

#contact h1, #contact h2, #contact h3 {
	margin-top:0;
	font-family: 'Raleway', sans-serif;
	color:#72b2de;
}


footer {
	width:100%;
	background:#fff;
	padding:20px 0;
	font-size:.9em;
	color:#8B8B8B;
	font-family: 'Raleway', sans-serif;
	text-align:center;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #72b2de;
  position: fixed;
  z-index: 999999;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

@media (max-width:850px) {
		
	#nav {
		display:none;
		position:absolute;
		width:100%;
		z-index:1;
		top:80px;
	}
	
	
	.nav-icon {
		display:block;
		position:absolute;
		top:25px;
		left:0;
	}
	
	nav ul {
		background:rgba(0,0,0,.7);
	}
	
	nav ul li {
		display:block;
		padding:0;
		margin:0;
		text-align:center;
	}
	
	nav > ul li {
		display:block;
		line-height:normal;
		margin-right:0;
	}
	
	nav > ul a:link, nav > ul a:visited {
		display:block;
		padding:20px 0;
	}
	
	.social {
		display:inline-block;
		width:36px;
		height:36px;
		line-height:40px;
		margin-left:4px;
		text-align:center;
		font-size:1.1em;
		font-weight:bolder;
	}
	
	.thumb {
		width:33.333%;
		display:inline-block;
	}
	
	.mix, .thumb {
		display:none;
		vertical-align:top;
	}

}

@media (max-width:650px) {
	.thumb {
		width:50%;
		display:inline-block;
	}
	
	.mix, .thumb {
		display:none;
		vertical-align:top;
	}

}

@media (max-width:480px) {
	.thumb {
		width:100%;
		display:inline-block;
	}
	
	.mix, .thumb {
		display:none;
		vertical-align:top;
	}

}