<!DOCTYPE html>
<html>
<head>
<title>Inicio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
</head>
<body>
<!-- begin header -->
<header>
<span id="btn-menu"></span>
<a class="main-logo" href="#">
<img src="img/logo.png" alt="pyhex work" />
</a>
<div class="lang">
<a href="#">EN</a>
<a class="active" href="#">ES</a>
</div>
</header>
<!-- begin navigation -->
<nav>
<ul>
<li><a class="active" href="index.html">Inicio</a></li>
<li><a href="#about-us">Nosotros</a></li>
<li><a href="flex-office.html">Flex Office</a></li>
<li><a href="flex-services.html">Flex Services</a></li>
<li><a href="flex-events.html">Flex Events</a></li>
<li><a href="flex-buzz.html">Buzz</a></li>
<li><a href="flex-innovation.html">Innovation</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
<!-- begin intro -->
<div class="wrapper slide where" id="intro">
<div class="wrapper-block">
<h1 class="block-title">
¡Un <span>ecosistema</span><br/> de negocios diseñado para ti!
<small class="action bounce">Desplazarse hacia abajo</small>
</h1>
</div>
</div>
<!-- begin about us -->
<div class="wrapper slide where" id="about-us">
<div class="wrapper-block">
<img src="img/logo.png" alt="#" />
<h3>
Es un espacio de trabajo flexible con todas las<br/>
herramientas necesarias para la formación y<br/>
desarrollo de un ecosistema de negocios.
</h3>
</div>
</div>
<!-- begin percent block -->
<div class="wrapper slide where" id="percent">
<div class="wrapper-percent">
<div class="block-small">
<div class="block-info">
<span>Solo<br/>40%</span>
<small>de tu espacio es<br/> verdaderamente productivo!</small>
</div>
</div>
<div class="block-large">
<div class="block-info">
<img src="img/logo-white.png" alt="#" />
<span>te hace <b>100%</b> productivo!</span>
<a href="#contact">Únete a nosotros</a>
</div>
</div>
</div>
</div>
<!-- begin start block -->
<div class="wrapper slide where" id="start">
<div class="wrapper-start">
<div class="square-large animate-in" data-animation="fly-in-left">
<div class="square-title">
<h3>¡Emprendemos contigo!</h3>
</div>
<div class="square-img"></div>
</div>
<div class="square-small animate-in" data-animation="fly-in-right"></div>
</div>
</div>
<!-- begin icons block -->
<div class="wrapper slide where" id="icons">
<div class="wrapper-block animate-in or-block">
<h2 class="wrapper-title">Que creemos</h2>
<div class="wrapper-icon">
<div class="block-icon">
<img src="img/wallet.png" alt="#" />
<p>Debes pagar solo<br/> por lo que realmente<br/> te hace productivo</p>
</div>
<div class="block-icon">
<img src="img/stair.png" alt="#" />
<p>Puedes tener<br/> todo a un piso<br/> de distancia</p>
</div>
<div class="block-icon">
<img src="img/bulb.png" alt="#" />
<p>El intercambio de ideas<br/> es indispensable para<br/> el éxito en los negocios</p>
</div>
<div class="block-icon">
<img src="img/coins.png" alt="#" />
<p>Hoy puedes ser más<br/> eficiente a un<br/> menor costo</p>
</div>
</div>
</div>
</div>
<!-- begin office block -->
<div class="wrapper slide where" id="office">
<div class="wrapper-block animate-in or-block">
<h2 class="wrapper-title">Que ofrecemos</h2>
<img class="wrapper-img" src="img/logo-flex.png" alt="#" />
<p>
Es un espacio de trabajo creativo que flexiblemente se ajusta al tamaño de tu proyecto.<br/> Desde
un coworking space, un espacio dedicado, o una oficina cerrada del tamaño que desees, PYHEX
WORK lo tiene para ti.
</p>
<a class="action" href="flex-office.html">Conocer más</a>
</div>
</div>
<!-- begin split block -->
<div class="wrapper split slide where">
<div class="wrapper-split">
<div class="wrapper-split-info animate-in" data-animation="fly-in-left">
<div class="block-split-info">
<img src="img/logo-services.png" alt="#" />
<p>
Serás más productivo y eficiente<br/>a través de nuestros Flex Services.
</p>
<a class="action" href="flex-services.html">Conocer más</a>
</div>
</div>
<div class="wrapper-split-img animate-in" data-animation="fly-in-right" id="bg-1"></div>
</div>
</div>
<!-- begin split block -->
<div class="wrapper split slide where">
<div class="wrapper-split">
<div class="wrapper-split-img animate-in" data-animation="fly-in-left" id="bg-2"></div>
<div class="wrapper-split-info animate-in" data-animation="fly-in-right">
<div class="block-split-info">
<img src="img/logo-events.png" alt="#" />
<p>
Un ecosistema dinámico es el que promueve crecimiento y aprendizaje constante para sus
usuarios, nosotros estamos equipados para hacer de tu visión una realidad.
</p>
<a class="action" href="flex-events.html">Conocer más</a>
</div>
</div>
</div>
</div>
<!-- begin split block -->
<div class="wrapper split slide where">
<div class="wrapper-split">
<div class="wrapper-split-info animate-in" data-animation="fly-in-left">
<div class="block-split-info">
<img src="img/logo-buzz.png" alt="#" />
<p>
Las grandes ideas huelen a café, los grandes
proyectos se celebran con el paladar. ¡Ven a
nuestro Buzz café y celebremos el éxito juntos!
</p>
<a class="action" href="flex-buzz.html">Conocer más</a>
</div>
</div>
<div class="wrapper-split-img animate-in" data-animation="fly-in-right" id="bg-3"></div>
</div>
</div>
<!-- begin innovation -->
<div class="wrapper slide where" id="innovation" style="background-color: #F05C2A">
<div class="wrapper-block animate-in or-block">
<h1 class="block-title">
¡La innovación es nuestro ADN!
<a class="action" href="flex-innovation.html">Conocer más</a>
</h1>
</div>
</div>
<!-- begin contact -->
<div class="wrapper slide where" id="contact">
<h3>¡Se parte de nuestro<br/> ecosistema y crezcamos juntos!</h3>
<form action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads2191794000000108038 method='POST' onSubmit='javascript:document.charset = "UTF-8"; return checkMandatory()' accept-charset='UTF-8'>
<!-- Do not remove this code. -->
<input type='text' style='display:none;' name='xnQsjsdp' value='f2e647c5db0ff4fae641d03ee426d012f2e9c1e044c8312d56aae2dfcd9a2d2b'/>
<input type='hidden' name='zc_gad' id='zc_gad' value=''/>
<input type='text' style='display:none;' name='xmIwtLD' value='545dee618055f0a8ca4a6a0247d67d4b0a27cd0b6981cfecd6ab50e3a13048bd'/>
<input type='text' style='display:none;' name='actionType' value='TGVhZHM='/>
<input type='text' style='display:none;' name='returnURL' value='http://pyhex.com/contact/thank-you' />
<!-- Do not remove this code. -->
<input type='text' maxlength='100' name='Email' placeholder="Ingresa tu email aquí para contactarte" />
<select style='width:250px;' name='Lead Status' hidden>
<option value='-None-'>None</option>
<option selected value='Attempted to Contact'>Attempted to Contact</option>
<option value='Contact in Future'>Contact in Future</option>
<option value='Contacted'>Contacted</option>
<option value='Junk Lead'>Junk Lead</option>
<option value='Lost Lead'>Lost Lead</option>
<option value='Not Contacted'>Not Contacted</option>
<option value='Pre-Qualified'>Pre-Qualified</option>
</select>
<select style='width:250px;' name='Lead Source' hidden>
<option value='-None-'>None</option>
<option value='Advertisement'>Advertisement</option>
<option value='Cold Call'>Cold Call</option>
<option value='Employee Referral'>Employee Referral</option>
<option value='External Referral'>External Referral</option>
<option value='Online Store'>Online Store</option>
<option value='Partner'>Partner</option>
<option value='Public Relations'>Public Relations</option>
<option value='Sales Email Alias'>Sales Email Alias</option>
<option value='Seminar Partner'>Seminar Partner</option>
<option value='Internal Seminar'>Internal Seminar</option>
<option value='Trade Show'>Trade Show</option>
<option value='Web Download'>Web Download</option>
<option selected value='Web Research'>Web Research</option>
<option value='Chat'>Chat</option>
</select>
<button class="btn-submit">Enviar</button>
<script>
var mndFileds = new Array('Last Name', 'Email');
var fldLangVal = new Array('Last Name', 'Email');
var name = '';
var email = '';
function checkMandatory() {
for (i = 0; i < mndFileds.length; i++) {
var fieldObj = document.forms['WebToLeads2191794000000108038'][mndFileds[i]];
if (fieldObj) {
if (((fieldObj.value).replace(/^s+|s+$/g, '')).length == 0) {
if (fieldObj.type == 'file')
{
alert('Please select a file to upload.');
fieldObj.focus();
return false;
}
alert(fldLangVal[i] + ' cannot be empty.');
fieldObj.focus();
return false;
} else if (fieldObj.nodeName == 'SELECT') {
if (fieldObj.options[fieldObj.selectedIndex].value == '-None-') {
alert(fldLangVal[i] + ' cannot be none.');
fieldObj.focus();
return false;
}
} else if (fieldObj.type == 'checkbox') {
if (fieldObj.checked == false) {
alert('Please accept ' + fldLangVal[i]);
fieldObj.focus();
return false;
}
}
try {
if (fieldObj.name == 'Last Name') {
name = fieldObj.value;
}
} catch (e) {
}
}
}
}
</script>
</form>
<div class="block-contact">
<span>PDR +1 (809) 221-3300</span>
<small>John F. Kennedy 88 | Buenaventura Freites, Santo Domingo 10601, República Dominicana</small>
<div class="block-social">
<a id="fb" target="_blank" href="https://www.facebook.com/pyhex"></a>
<a id="ins" target="_blank" href="https://www.instagram.com/pyhex/"></a>
<a id="tw" target="_blank" href="https://twitter.com/pyhexDR"></a>
<a id="in" target="_blank" href="https://www.linkedin.com/company/pyhex"></a>
</div>
<span class="copyright">Copyright 2016 | All Rights Reserved | Powered by <a target="_blank" href="http://www.fusion.com.do/">Fusion</a></span>
</div>
</div>
<!-- begin javascript-->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollorama.js"></script>
<script type="text/javascript" src="js/jquery.scrolldeck.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
$('#intro').parallax({imageSrc: 'img/imagen_home_chica.jpg'});
$('#innovation').parallax({imageSrc: 'img/imagen_innovation.jpg'});
$('.block-large').mouseover(function(){
$('.block-small').css('right','95%');
$('.block-small .block-info').css('color','transparent');
});
$('.block-large').mouseout(function(){
$('.block-small').css('right','60%');
$('.block-small .block-info').css('color','#fff');
});
</script>
</body>
</html>
body {
font-weight: 100;
font-family: 'encodesans-thin';
-webkit-animation: fade 2s forwards;
-ms-animation: fade 2s forwards;
-o-animation: fade 2s forwards;
animation: fade 2s forwards;
}
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
@-moz-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
@-ms-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
@-o-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce {
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
/*-- begin header --*/
header {
top: -5em;
z-index: 3;
width: 100%;
height: 4.5em;
position: fixed;
background-color: #fff;
-webkit-transition: .2s top ease-in-out;
-moz-transition: .2s top ease-in-out;
-ms-transition: .2s top ease-in-out;
-o-transition: .2s top ease-in-out;
transition: .2s top ease-in-out;
}
.lang {
right: 20px;
top: 50%;
overflow: hidden;
position: absolute;
margin-top: -5px;
}
.lang > a {
float: left;
width: 20px;
display: block;
font-size: 10px;
color: #5C5C5C;
text-align: center;
border-left: 1px solid;
text-decoration: none;
}
.lang > a:first-child {
border-left: none;
}
.lang .active {
color: #F05C2A;
font-family: 'encodesans-medium';
}
.sticky {
top: 0;
}
.main-logo img {
display: block;
max-width: 10em;
margin: 1em auto;
}
#btn-menu {
top: 0;
left: 0;
bottom: 0;
width: 7em;
position: absolute;
background: url('../img/menu.png') center no-repeat;
background-size: 2.5em;
}
.show {
left: 0;
}
nav {
left: -50%;
bottom: 0;
z-index: 3;
width: 50%;
top: 4.5em;
padding: 6vw;
position: fixed;
box-sizing: border-box;
background-color: #F05C2A;
-webkit-transition: .2s left ease-in-out;
-moz-transition: .2s left ease-in-out;
-ms-transition: .2s left ease-in-out;
-o-transition: .2s left ease-in-out;
transition: .2s left ease-in-out;
}
nav ul {
padding: 0;
}
nav ul li {
cursor: pointer;
list-style: none;
}
nav ul li a:hover,
nav ul li a.active {
font-family: 'encodesans-medium';
}
nav ul li:first-child a {
margin-top: 0;
}
nav ul li a {
color: #fff;
cursor: pointer;
font-size: 2.3vw;
margin-top: .5em;
display: inline-block;
text-decoration: none;
font-family: 'encodesans-thin';
}
nav ul li a:focus,
nav ul li a:hover {
color: #fff;
text-decoration: none;
}
.wrapper {
width: 100%;
display: table;
height: 140vh;
text-align: center;
}
.wrapper-block {
z-index: 1;
position: relative;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
.wrapper-block h1 {
font-size: 6vw;
color: #5C5C5C;
line-height: 7vw;
font-weight: 100;
margin-top: -10vw;
}
#office-intro h1 {
margin: -15vw 0 0;
}
.wrapper-block h1 span {
color: #F05C2A;
}
#office-intro .block-title span {
color: #91C73E;
}
#about-us img {
width: 100%;
display: block;
margin: 0 auto;
max-width: 32vw;
}
#about-us h3 {
font-size: 2vw;
color: #5C5C5C;
margin-top: 7vw;
line-height: 3.5vw;
}
.action {
display: block;
color: #4A4A4A;
font-size: 1.5vw;
margin-top: 5vw;
text-decoration: none;
font-family: 'encodesans-bold';
}
.action i {
font-weight: 100;
font-style: normal;
font-family: 'encodesans-thin';
}
.action.space i {
color: #91C73E;
}
.action.events i {
color: #542E91;
}
.action.services i {
color: #EC202D;
}
#buzz h1,
#space h1,
#closed h1,
#events h1,
#services h1,
#produce h1,
#buzz .action,
#microsoft h1,
#space .action,
#closed .action,
#events .action,
#innovation h1,
#office-intro .action,
#office-intro h1,
#services .action,
#produce .action,
#microsoft .action,
#innovation .action,
#mind {
color: #fff;
}
#contact {
color: #fff;
padding: 6vw 0;
box-sizing: border-box;
background-color: #F05C2A;
position: relative;
height: 95vh;
}
#contact.space {
background-color: #91C73E;
}
#contact.events {
background-color: #542E91;
}
#contact.services {
background-color: #EC202D;
}
#contact.buzz {
background-color: #F8A01B;
}
#contact h3,
#contact h4 {
margin: 2vw;
font-size: 4vw;
font-weight: 100;
}
#contact h4 {
font-family: 'encodesans-bold';
}
#contact input,
#contact button {
width: 40%;
border: none;
outline: none;
padding: 1.5vw;
font-size: 1.3vw;
margin-top: 4vw;
border-radius: .7vw;
background-color: #fff;
font-family: 'encodesans-thin';
text-align: center;
}
.wrapper-percent {
height: 140vh;
overflow: hidden;
position: relative;
}
.wrapper-percent > div {
position: absolute;
}
.block-small {
background-color: #4A4A4A;
top: 0;
right: 60%;
bottom: 0;
left: 0;
z-index: 2;
text-align: left;
overflow: hidden;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
}
.block-large span {
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
}
.block-large span b {
font-family: 'encodesans-bold';
}
.block-large:hover span {
font-size: 3vw;
}
.block-large {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #F05C2A;
}
.block-small .block-info {
top: 50%;
left: 50%;
color: #fff;
width: 12vw;
height: 16vw;
position: absolute;
margin: -8vw -6vw;
}
.block-small .block-info span {
display: block;
font-size: 3vw;
font-family: 'encodesans-medium';
}
.block-small .block-info small {
font-size: 1.5vw;
}
.block-large .block-info {
left: 0;
top: 50%;
color: #fff;
height: 6vw;
width: 100%;
font-size: 2vw;
text-align: left;
line-height: 7vw;
position: absolute;
margin-top: -5vw;
}
.block-large .block-info img {
float: left;
width: 23vw;
height: auto;
margin-left: 16vw;
margin-right: 4vw;
}
.block-large .block-info a {
color: #fff;
opacity: 0;
display: block;
font-size: 1.5vw;
text-align: center;
margin-top: 12vw;
text-decoration: none;
font-family: 'encodesans-bold';
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
}
.block-title img {
display: block;
margin: 5vw auto;
}
.block-large:hover .block-info a {
opacity: 1;
}
.wrapper-start {
overflow: hidden;
}
.wrapper-start > div {
float: left;
}
.square-large {
width: 70%;
height: 140vh;
}
.square-small {
width: 30%;
height: 140vh;
background: url('../img/imagen_loby.jpg') center no-repeat;
background-size: cover;
}
.square-title {
height: 70vh;
background-color: #fff;
}
.square-title h3 {
margin: 0;
font-size: 5vw;
color: #4A4A4A;
font-weight: 100;
line-height: 70vh;
}
.square-img {
height: 70vh;
background: url('../img/imagen_butacas.jpg') center no-repeat;
background-size: cover;
}
.wrapper-icon {
text-align: center;
}
.block-icon {
width: 14vw;
height: 13vw;
margin: 0 3vw;
text-align: center;
vertical-align: top;
display: inline-block;
}
.block-icon img {
width: auto;
height: 4vw;
}
.block-icon p {
font-size: 1.3vw;
line-height: 2vw;
}
.wrapper-title,
.wrapper-title-office {
font-size: 7vw;
color: #4A4A4A;
font-weight: 100;
margin: 0 0 10vw;
font-family: 'encodesans-thin';
}
.wrapper-title-office {
color: #91C73E;
margin-top: 8vw;
margin-bottom: 4vw;
}
.icons {
height: 100vh;
}
.wrapper-img {
width: 14vw;
}
#office .wrapper-title {
margin-bottom: 4vw;
}
#office .wrapper-block {
top: -15vh;
position: relative;
}
#office .action {
margin-top: 5vh;
}
#open-space > p,
#closed-office > p,
.wrapper-block > p,
#dedicated-space > p,
#open-space > div > p,
#closed-office > div > p,
#dedicated-space > div > p {
font-size: 1.3vw;
line-height: 2.3vw;
}
.wrapper-split {
overflow: hidden;
}
.wrapper-split > div {
float: left;
width: 50%;
height: 140vh;
}
.wrapper-split-info {
display: table;
}
.block-split-info {
padding: 5vw;
text-align: left;
display: table-cell;
vertical-align: middle;
}
.block-split-info img {
width: auto;
height: 4vw;
}
.block-split-info p {
margin: 5vw 0;
color: #4A4A4A;
font-size: 1.5vw;
line-height: 2.5vw;
}
.block-split-info h3 {
font-size: 2.5vw;
color: #4A4A4A;
line-height: 4vw;
font-weight: 100;
}
.block-contact > span {
display: block;
margin: 5vw 0 1vw;
font-size: 2vw;
}
.block-contact small {
font-size: 1vw;
}
.block-social {
text-align: center;
margin-top: 3vw;
}
.block-social a {
width: 30px;
height: 30px;
margin: 0 .8vw;
display: inline-block;
background: url('../img/social.png') no-repeat;
background-size: 145px;
}
#fb {
background-position: 9px 5px;
}
#ins {
background-position: -33px 5px;
}
#tw {
background-position: -76px 5px;
}
#in {
background-position: -119px 5px;
}
span.copyright {
font-size: 1vw;
margin-top: 5vw;
position: absolute;
bottom: 1vh;
text-align: center;
width: 100%;
}
span.copyright a {
color: #fff;
text-decoration: none;
font-family: 'encodesans-medium';
}
#mind p {
font-size: 3vw;
line-height: 4vw;
}
.block-mind {
margin-bottom: 1vw;
}
.block-mind > div {
font-size: 10vw;
display: inline-block;
padding: 1vw 2vw;
text-align: center;
}
.block-mind > div > small {
display: block;
font-size: 1.5vw;
}
.block-mind > div > span > small {
font-size: 7vw;
margin-left: -2vw;
}
.wrapper-mind {
margin: 5vw 0;
}
.wrapper-mind > small {
font-size: 1.5vw;
}
#mind .wrapper-block > img {
max-width: 9vw;
}
#bg-1 {
background: url('../img/imagen_mitad_flex_services.jpg') center no-repeat;
}
#bg-2 {
background: url('../img/imagen_mitad_flex_events.jpg') center no-repeat;
}
#bg-3 {
background: url('../img/imagen_mitad_buzz.jpg') center no-repeat;
}
#bg-4 {
background: url('../img/imagen_mitad_mirra_2_amarilla.jpg') center no-repeat;
}
#bg-5 {
background: url('../img/imagen_mitad_relax.jpg') center no-repeat;
}
#bg-6 {
background: url('../img/imagen_mitad_mirra_2_azul.jpg') center no-repeat;
}
#bg-7 {
background: url('../img/imagen_mitad_phone.jpg') center no-repeat;
}
#bg-8 {
background: url('../img/imagen_mitad_mirra_2_roja.jpg') center no-repeat;
}
#bg-9 {
background: url('../img/imagen_mitad_training_room.jpg') center no-repeat;
}
#bg-10 {
background: url('../img/imagen_mitad_anfiteatro.jpg') center no-repeat;
}
#bg-11 {
background: url('../img/imagen_mitad_catering.jpg') center no-repeat;
}
#bg-12 {
background: url('../img/imagen_mitad_admin.jpg') center no-repeat;
}
#bg-13 {
background: url('../img/imagen_mitad_people.jpg') center no-repeat;
}
#bg-14 {
background: url('../img/imagen_mitad_code.jpg') center no-repeat;
}
#bg-15 {
background: url('../img/imagen_mitad_legal.jpg') center no-repeat;
}
#bg-16 {
background: url('../img/imagen_mitad_advertisement.jpg') center no-repeat;
}
#bg-17 {
background: url('../img/imagen_mitad_metronas.jpg') center no-repeat;
}
#bg-18 {
background: url('../img/imagen_mitad_bike_desk.jpg') top center no-repeat;
}
#bg-19 {
background: url('../img/imagen_mitad_loctek_bike.jpg') top center no-repeat;
}
#bg-20 {
background: url('../img/imagen_mitad_locus_seat.jpg') center no-repeat;
}
#bg-21 {
background: url('../img/imagen_mitad_mogo_seat.jpg') center no-repeat;
}
#bg-22 {
background: url('../img/imagen_mitad_treadmill.jpg') center no-repeat;
}
#bg-23 {
background: url('../img/imagen_mitad_rotonda.jpg') center no-repeat;
}
#office {
background: url('../img/imagen_desk_2.jpg') center bottom no-repeat;
}
#open-space {
background: url('../img/imagen_open_space.jpg') center no-repeat;
}
#dedicated-space {
background: url('../img/imagen_dedicated_space.jpg') center no-repeat;
}
#closed-office {
background: url('../img/imagen_closed_office.jpg') center no-repeat;
}
.wrapper,
.animate-in {
background-size: cover !important;
}
.lang {
display: none;
}
.btn-submit {
cursor: pointer;
width: 10% !important;
}
.btn-submit:hover {
color: #F05C2A;
}
#btn-office:hover {
color: #91C73E;
}
#btn-buzz:hover {
color: #F8A01B;
}
#btn-events:hover {
color: #542E91;
}
#btn-innovation:hover {
color: #542E91;
}
#btn-services:hover {
color: #EC202D;
}
.parallax-mirror {
z-index: 1 !important;
}
#gradient-top,
#gradient-bottom {
z-index: 2;
width: 100%;
height: 25vw;
position: absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.84+35,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.84) 35%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.84) 35%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.84) 35%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#gradient-top.stick {
position: fixed;
top: 0;
right: 0;
left: 0;
}
#gradient-bottom.stick {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}