Proyecto: Pyhexwork

<!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;
}
Regresar