@charset "utf-8";
/* 
=================================================================================================================
DALE
-----------------------------------------------------------------------------------------------------------------
Diego Besné // diegobesne.com
=================================================================================================================
*/

/* ===========================================================
FONT-FACE 
============================================================== */
@font-face {
    font-family: 'Hoefler';
    src: url('fonts/HoeflerText-Roman.eot');
    src: url('fonts/HoeflerText-Roman.eot?#iefix') format('eot'),
         url('fonts/HoeflerText-Roman.woff') format('woff'),
         url('fonts/HoeflerText-Roman.ttf') format('truetype'),
         url('fonts/HoeflerText-Roman.svg#webfontZZwAv3cU') format('svg');
    font-weight:400;
    font-style:normal;
}
@font-face {
    font-family: 'Hoefler';
    src: url('fonts/HoeflerText-Italic.eot');
    src: url('fonts/HoeflerText-Italic.eot?#iefix') format('eot'),
         url('fonts/HoeflerText-Italic.woff') format('woff'),
         url('fonts/HoeflerText-Italic.ttf') format('truetype'),
         url('fonts/HoeflerText-Italic.svg#webfontZZwAv3cU') format('svg');
    font-weight:400;
    font-style:italic;
}

/* ===========================================================
RESET 
============================================================== */
html, body{ height:100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
body { line-height:1;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

img, a img, embed, iframe{ border:none; vertical-align:bottom;}
a, button{ color:#000; outline:none; text-decoration:none;
/* Webkit */ -webkit-transition:.2s ease-in-out;
/* Firefox */ -moz-transition:.2s ease-in-out;
/* Opera */ -o-transition:.2s ease-in-out; 
/* Standard */ transition:.2s ease-in-out;}
a:hover, a:focus{ color:#a0a0a0;}
form, fieldset{ border:none;}
ol, ul{ list-style:none;}
abbr{}
hr{ display:none;}
h1, h2, h3, h4, h5, h6{ font-weight:normal;}

/* ===========================================================
MISC 
============================================================== */

::selection { background:#1b1b1b; color:#fff; text-shadow:none;}
::-webkit-selection { background:#1b1b1b; color:#fff; text-shadow:none;}
::-moz-selection { background:#1b1b1b; color:#fff; text-shadow:none;}

/* ===========================================================
GENERIC 
============================================================== */
html, body{ height:100%; text-align:center;}
body{ background:#fff; color:#000; font:300 1em/2em 'Roboto', sans-serif;}
@media only screen and (min-width:601px) and (max-width:1024px) {
body{ font-size:.875em;}
}
@media only screen and (min-width:0) and (max-width:600px) {
body{ font-size:.75em;}
}
@media only screen and (min-device-width:0) and (max-device-width:1024px){
html, body{ overflow:scroll; -webkit-overflow-scrolling:touch;}
}

header{ background:#fff; padding:1.875em 0; position:fixed; right:0; top:0; text-align:center; width:50%; z-index:1000;}
header nav{ padding:0 12%;}
header nav ul{ font-size:.75em; line-height:1.5em; letter-spacing:1px; text-transform:uppercase;}
header nav ul li{ display:inline-block; margin:0 2%;}
header nav ul li a{ border-bottom:1px solid #fff; display:inline-block; padding:0 0 .333em;}
.nosotros header nav ul li a.nosotros,
.productos header nav ul li a.productos,
.proyectos header nav ul li a.proyectos,
.contacto header nav ul li a.contacto{ border-color:#000; color:#000;}
@media only screen and (min-width:0) and (max-width:800px) {
header{ position:relative; width:100%;}
header nav{ padding:0 6%;}
}

section.image{ display:table; float:left; height:100%; overflow:hidden; position:fixed; width:50%;}
section.image article{ display:table-cell; height:100%; position:relative; vertical-align:middle; width:100%; z-index:10;}
section.image article img{ height:auto; max-width:210px;}
section.image .bg_image{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
background-attachment: scroll !important;
transform-origin: 50% 50%;
animation: imageZoom linear 50s;
animation-iteration-count: infinite;
-webkit-animation: imageZoom linear 50s;
-webkit-animation-iteration-count: infinite;
-moz-animation: imageZoom linear 50s;
-moz-animation-iteration-count: infinite;
-ms-animation: imageZoom linear 50s;
-ms-animation-iteration-count: infinite;}
@media only screen and (min-width:0) and (max-width:800px) {
section.image{ display:block; float:none; height:auto; position:relative; width:100%;}
section.image article{ display:block; height:auto; padding:6.250em 0;}
}

section.content{ background:#fff; float:right; min-height:100%; width:50%; position:relative; z-index:100;}
section.content article{ position:relative; margin:83px auto 0; padding:6.25em 0 7.5em; text-align:left;}
section.content article .inner{ padding:0 12%;}
section.content article h1{ font:400 3.125em/1.320em 'Hoefler', sans-serif; letter-spacing:-.75px; margin:0; padding:0 0 .5em;}
section.content article h2{ font:400 1.750em/1.320em 'Hoefler', sans-serif; letter-spacing:-.5px; margin:1.429em 0 -.786em;}
section.content article h3{ font:400 2.5em/1.320em 'Hoefler', sans-serif; font-style:italic; letter-spacing:-.5px; margin:2.5em 0 0; padding:0 0 .5em;}
section.content article h4{ font:400 1.750em/1.320em 'Hoefler', sans-serif; font-style:italic; letter-spacing:-.5px; margin:1.429em 0 -.786em;}
section.content article p{ margin:2em 0 0;}
section.content article p a{ border-bottom:1px solid #fff; display:inline-block;}
section.content article p a:hover{ border-color:#a0a0a0;}
section.content article address{ font-style:normal; margin:2em 0 0;}
section.content article .project_list.inner{ padding:0 10%;}
section.content article .project_list ul{}
section.content article .project_list ul li{ display:inline-block; margin:0 -2px; padding:3.5em 3% 0; vertical-align:top; width:44%;}
section.content article .project_list ul li .img img{ height:auto; width:100%;}
section.content article .project_list ul li .txt h2{ margin:.8em 0 -.786em;}
@media only screen and (min-width:801px) and (max-width:1024px) {
section.content article .project_list.inner{ padding:0 12%;}
section.content article .project_list ul li{ margin:0; padding:3.5em 0 0; width:100%;}
}
@media only screen and (min-width:551px) and (max-width:800px) {
section.content{ float:none; width:100%; position:relative;}
section.content article{ margin:0; padding-top:3em;}
section.content article .inner{ padding:0 6%;}
section.content article .project_list.inner{ padding:0 4%;}
}
@media only screen and (min-width:0) and (max-width:550px) {
section.content{ float:none; width:100%; position:relative;}
section.content article{ margin:0; padding-top:3em;}
section.content article .inner{ padding:0 6%;}
section.content article .project_list.inner{ padding:0 6%;}
section.content article .project_list ul li{ margin:0; padding:3.5em 0 0; width:100%;}
}


/* ===========================================================
HOME 
============================================================== */
.home section.image .bg_image{ background:url(img/bg-home.jpg) no-repeat center; background-size:cover;}

.home section.content{ display:table; height:100%; padding:0;}
.home section.content article{ display:table-cell; height:100%; padding:0; text-align:center; vertical-align:middle; width:100%;}
.home section.content article h1{ padding:0;}
@media only screen and (min-width:0) and (max-width:800px) {
.home section.content{ display:block; height:auto;}
.home section.content article{ display:block; height:auto; padding:3em 0 7.5em;}
}

/* ===========================================================
NOSOTROS 
============================================================== */
.nosotros section.image .bg_image{ background:url(img/bg-nosotros.jpg) no-repeat center; background-size:cover;}


/* ===========================================================
PRODUCTOS 
============================================================== */
.productos section.image .bg_image{ background:url(img/bg-productos.jpg) no-repeat center; background-size:cover;}


/* ===========================================================
PROYECTOS 
============================================================== */
.proyectos section.image .bg_image{ background:url(img/bg-proyectos.jpg) no-repeat center; background-size:cover;}


/* ===========================================================
CONTACTO 
============================================================== */
.contacto section.image .bg_image{ background:url(img/bg-contacto.jpg) no-repeat center; background-size:cover;}


/* ===========================================================
KEYFRAMES 
============================================================== */
@keyframes imageZoom{
	0% { transform: scale(1); }
	50% { transform: scale(1.24); }
	100% { transform: scale(1);}
}

@-moz-keyframes imageZoom{
	0% { -moz-transform: scale(1);}
	50% { -moz-transform: scale(1.24); }
	100% { -moz-transform: scale(1); }
}
 
@-webkit-keyframes imageZoom{
	0% { -webkit-transform: scale(1); }
	50% {-webkit-transform: scale(1.24); }
	100% { -webkit-transform: scale(1); }
}

@-ms-keyframes imageZoom{
	0% { -ms-transform: scale(1); }
	50% { -ms-transform: scale(1.24); }
	100% { -ms-transform: scale(1); }
}