/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}/* ===== CORE ==== */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 10px;
}

html,
body {
    color: #fff;
    /*max-width: 100%;*/
    width:100vw;
    height:100vh;
    overflow-x: hidden;
    background-color: #f2f2f2;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;

    touch-action: manipulation;
}
/* ===== ADDED FOR TLML==== */
a {
    color: #fff;
    text-decoration: none;
}


.r-reverse {
    flex-flow: row-reverse;
}

.active-ps {
    font-weight: 600 !important;
    border-right: solid 1px;
    padding-right: 6px;
    margin-right: 6px !important;
}

.logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 120;
}

.logo img {
    max-width: 62px;
}





.position-nav {
    position: absolute;
    left: 2em;
    transform-origin: 0 0;
    /*move side text up ==== top:20vw; ====*/
    top:17vw;
    transform: rotateZ(-90deg) !important;
	width: 46em;	
}
@media (max-width: 1280px) { .position-nav{ top: 27vw; } }
@media (max-width: 980px) { .position-nav{ top: 40vw; } }
/* ================= SAFARI hack for title to left====================== */
	.safari .position-nav {
    left: -40em;
    }




.position-nav ul {
    display: contents;
}


.position-nav ul li {
    font-weight: 300;
    font-size: 1.2em;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: inline-flex;
    list-style: none;
    margin: 0 4px 0 0;
}

/* ================= LOADING ====================== */
#loading {
    color: #333;
    font-size: 3.2em;
    width: 100vw;
    height: 100%;
    position: fixed;
    z-index: 9000;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    transition: opacity .2s ease-out;
    pointer-events: none;
    top: 0;
    z-index: 999999;
}

#loading img {
    display: block;
    margin: 0 auto;
    max-width: 148px;
    max-height: 148px;
}

.ready #loading {
    opacity: 0;
}


/* == NAV EDGE == */
@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) {

    .edge #nav-bar {
        transform: translateX(25vw) !important;
    }
}

/* == BACK TO TOP == */
.btn-top {
    width: 4em;
    height: 4em;
    background-image: url('/zubi/common/top.png');
    background-size: contain;
    cursor: pointer;
    position: fixed;
    bottom: 2em;
    right: 10em;
    z-index: 120;
    opacity: 0;
    transition: opacity .2s ease-out, bottom .2s ease-out;
}

.btn-top.show {
    opacity: 1;
    bottom: 5em;
}

/* ================= BOXES ====================== */
.box .tri-1-b h2 {
    height: 100%;
    flex-direction: column-reverse;
    display: flex;
    padding: 0 6% 5% 0 !important;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 4em;
}
 /*makes box smaller*/
.box {
    flex: 1 0 calc(20% - 10px);
    display: flex;
    background-size: cover;
    background-position: center;
}

.box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.box.b {
    flex: 1 0 calc(75% - 10px);
    background-position: center;

}

.box.b:after {
    content: '';
    display: block;
    padding-bottom: 33%;
}

.box.c {
    flex: 1 0 calc(50% - 10px);
    background-size: cover;
    background-position: center;
}

.box.d {
    flex: 1 0 calc(75% - 10px);
    background-size: cover;
    background-position: center;
}

/* ================= #NAV ====================== */


#nav-bar {
    height: 100vh;
    background: #fff;
    position: fixed;
    right: 0;
    z-index: 500;
    display: flex;
    padding-top: 44vh;
    justify-content: center;
    align-items: flex-start;
    transform: translateX(25.5vw);
    width: 28vw;
    transition: transform .6s cubic-bezier(0.445, 0.050, 0.550, 0.950);
    z-index: 99999;
}


#nav-bar.open {
    width: 28vw;
    transform: translateX(0);
    display: inline-flex;
}

#nav-bar span {
    cursor: pointer;
}


#nav {
    color: #333;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    position: absolute;
    left: -1.8em;
    z-index: 10;
}

#nav #spot {
    cursor: pointer;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    width: 82px;
    height: auto;
    text-align: center;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    border: none;
}

/* CROSS-NAV */
#nav span.cross {
    position: absolute;
    left: 2em;
    top: 0.5px;
    font-size: 40px;
    width: 1em;
    height: 0.43em;
    background-size: 14em 0.43em;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url("/zubi/common/sp-cross.jpg");

    transition: background-position .3s steps(13) .3s;
}

#nav-bar.open span.cross {

    background-position: -13em 0;
}

/* CROSS-NAV */


#nav #spot:focus {
    outline: 0px;
}

#nav #cont-nav {
    display: inline-flex;
}

#nav #cont-nav p {
    font-weight: 700;
    letter-spacing: 2.5px;
    font-size: 1.8em;
    margin-right: 0;
}


#nav-bar .social {
    bottom: 6vh;
    position: absolute;
    list-style-type: none;
    left: 1.6em;
}

#box-social-m .social {
    display: none;
    flex-direction: row;
    width: 40%;
    position: fixed;
    z-index: 500;
    bottom: 1.4em;
    right: 0;
    list-style-type: none;
}

#nav-bar.open .social {
    right: 2em !important;
    left: inherit;
}

#nav-bar .social li a i,
#box-social-m .social li a i {
    color: #333;
    transition: color .3s ease-out;
}

#nav-bar .social li a:hover,
#box-social-m .social li a i:hover {
    color: #FC1A24;
}


#nav-bar ul li a i {
    font-size: 1.8em;
    line-height: 28px;
}

#nav-bar .entradas {
    width: 100%;
    top: 4%;
    left: 2px;
    text-align: right;
    list-style: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-out, margin-left .3s ease-out;
    margin-left: 2em;
}

#nav-bar.open .entradas {
    opacity: 1;
    pointer-events: all;
    margin-left: 0;
    transition: opacity .6s ease-out .6s, margin-left .4s ease-out .4s;
}

#nav-bar .cian a {
    color: #01C4EC;
    padding-right: 1em;
    background-image: url("/zubi/skin/int/nav/hov1.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s;
}

#nav-bar .cian a:hover,
#nav-bar .yell a:hover,
#nav-bar .yell span.act:hover,
#nav-bar .oran a:hover,
#nav-bar .red a:hover,
#nav-bar .red2 a:hover,
#nav-bar .red2 span.act:hover {
    background-position: 100%;
}

.li-a.yell .act {
    color: #FEC300;
    font-size: 4.5em;
    padding-right: 1em;
    text-transform: uppercase;
    font-weight: 700;
    background-image: url("/zubi/skin/int/nav/hov2-a.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s;
}

#nav-bar .yell a {
    color: #FEC300;
    padding-right: 1em;
    background-image: url("/zubi/skin/int/nav/hov2.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s;
}

#nav-bar .oran a {
    color: #FE5919;
    padding-right: 1em;
    background-image: url("/zubi/skin/int/nav/hov3.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s;
}

#nav-bar .red a {
    color: #FC1A24;
    padding-right: 1em;
    background-image: url("/zubi/skin/int/nav/hov4.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s;
}

.li-a.red2 .act {
    color: #D21930;
    font-size: 4.5em;
    padding-right: 1em;
    text-transform: uppercase;
    font-weight: 700;
    background-image: url("/zubi/skin/int/nav/hov5-a.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s;
}

#nav-bar .red2 a {
    color: #D21930;
    padding-right: 1em;
    background-image: url("/zubi/skin/int/nav/hov5.png");
    background-repeat: no-repeat;
    background-position: 120%;
    transition: background-position .2s ease-out .1s
}

#nav-bar .entradas .li-a {
    height: 8em;
    margin-bottom: -3em;
    transition: height .2s ease-in-out .1s;
}

#nav-bar .entradas .li-a.open {
    height: 17em;
	/* ================= new TLML ====================== */
	/*margin-bottom: 3em;*/
	margin-bottom: 3em;
}

#nav-bar .entradas ul {
    opacity: 0;
    position: absolute;
    z-index: -1;
    right: -10%;
    transition: opacity .1s ease-in-out .1s, right .2s ease-in-out .1s;
}

#nav-bar .entradas ul.open {
    opacity: 1;
    z-index: 0;
    right: 5%;
}

#nav-bar .entradas li a {
    font-size: 4.5em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2em;
}

#nav-bar .entradas li ul li a {
    line-height: 1.4em;
    font-size: 2.5em;
    position: relative;
    top: 10%;
}


#overblack {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: fixed;
    z-index: 110;
    background: #070707c7;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-in-out .2s;
}

#overblack.open {
    opacity: 1;
    pointer-events: all;
}




#nav-bar.splash {
    transform: translateX(0);
    display: inline-flex;
    transition: transform .6s cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

#nav-bar.splash .entradas {
    opacity: 1;
    pointer-events: all;
    margin-left: 0;
    transition: opacity .6s ease-out .6s, margin-left .4s ease-out .4s;
}


/* ================= #NAV OPEN mobile====================== */
@media (max-width: 1680px) {
    #nav-bar {
        transform: translateX(25vw);
    }
 /*
    #nav-bar.open {
         width: 33vw; 
    }

    .position-nav {
        top: 23vh !important;
    }

    .ready .position-nav {
        top: 25vh !important;
    }*/
}

@media screen and (min-width: 1200px) and (max-width: 1420px) {
    #nav-bar {
        transform: translateX(24.5vw);
    }
}

/* ============ @Media screen mackbook Pro 13"  ================= */
/*@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {*/

@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {
    /*
	.ready .position-nav {
        top: 35vh !important;
    }
    */

   /* #nav-bar {
        transform: translateX(29vw) !important;
    }*/

   /* .cont-grid {
        width: calc(100vw - 4.5vw);
    }

    .safari .cont-grid {
        width: calc(100vw - 4.5vw) !important;
    }
*/
    .safari #nav-bar.open {
        width: 40vw !important;
    }

}




@media (max-width: 1280px) {
    #nav-bar {
        width: 33vw;
    }
}

/*
@media only screen and (max-device-width: 1920px) and (max-device-height: 1200px) {
    .ready .position-nav {
        top: 25vh;
    }
}
*/


@media (max-width: 980px) {
    /*.cont-grid {
        width: calc(100vw - 5vw) !important;
    }*/

}

@media (max-width: 850px) {

    #nav {
        left: 1.5em;
        z-index: 10;
    }

   /* .cont-grid {
        width: calc(100vw - 0vw) !important;
    }
    */



    #nav-bar .entradas {
        opacity: 0;
        pointer-events: all;
        margin-left: 0;
        transition: opacity .2s ease-out .2s, margin-left .4s ease-out .4s;
    }

    #nav-bar.open .entradas {
        opacity: 1;
        pointer-events: all;
        margin-left: 0;
    }

    #nav span.cross {
        left: 2em;
        top: 2px;
        height: 0.43em;
    }


    #nav-box-mob.mob {
        color: #333;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        position: absolute;
        left: 0;
        top: 55vh;
        display: inline !important;
    }

    #nav3 a {
        text-decoration: none;
        color: #333;
        text-align: center;
        text-transform: uppercase;
    }

    #nav3 #cont-nav2 {
        display: inline-flex;
    }

    #nav3 #cont-nav2 p {
        font-weight: 800;
        font-size: 1.5em;
        margin-right: 10px;
    }

    #nav-bar .social {
        top: 1em;
        position: absolute;
        color: #333;
        list-style: none;
        right: 1vw;
    }

    #nav-bar.open .social {
        right: 0 !important;
        left: inherit;
        bottom: 6%;
        top: inherit;
    }

    #nav3 {
        color: #333;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        position: absolute;
        left: 0;
        top: 55vh;
    }

    #nav-box-mob ul li a i {
        font-size: 1.5em;
        color: #333 !important;
        line-height: 28px;
    }

    #nav-box-mob.nav-full {
        width: 100vw;
        height: auto;
        background: #fff;
        position: fixed;
        right: 0;
        top: 30vh;
        z-index: 50;
        justify-content: center;
        transform: rotate(0deg);
    }

    #nav-box-mob.nav-full nav p {
        padding-top: 50vh;
    }

    #nav3.nav-full {
        color: #333;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }

    #nav-box-mob.nav-full .entradas {
        width: 80%;
        list-style: none;
        position: absolute;
        top: 10%;
        left: 8%;
        display: block;
    }

    #nav-box-mob.nav-full .entradas li {
        width: 100%;
        position: relative;
    }

    #nav-box-mob.nav-full .entradas .li-a {
        height: 100px;
        -webkit-transition: height .4s;
        transition: height .4s;
        margin-bottom: -10px;
    }

    #nav-box-mob.nav-full .entradas .li-a:hover {
        height: 22vh;
    }

    #nav-box-mob.nav-full .entradas li a {
        font-size: 4em;
        font-weight: 100;
        text-transform: uppercase;
        color: #333;
        line-height: 3.4em;
    }

    #nav-box-mob.nav-full .entradas ul {
        display: none;
        position: absolute;
    }

    #nav-box-mob.nav-full .entradas .abo li:hover {
        height: auto !important;
    }

    #nav-box-mob.nav-full .entradas ul li {
        float: none;
    }

    #nav-box-mob.nav-full .entradas li ul li {
        height: auto;
    }

    #nav-box-mob.nav-full .entradas li ul li a {
        line-height: 1.8em;
        font-size: 2.5em;
        position: relative;
        top: 10%;
    }

    #nav-box-mob.nav-full .entradas li:hover > ul {
        display: inline-block;
        left: 50%;
        top: 26%;
        height: inherit;
    }

    #nav-box-mob.nav-full .entradas li:hover > ul.con {
        width: 100%;
        display: inline-block;
        left: 50%;
        position: absolute;
    }

    #nav-bar .social {
        right: 2em !important;
        left: inherit;
    }

}

/* ================= Contenedor Grid ====================== */



.cont-grid {
    width: 100vw;
    /*width: calc(100vw - 2.5vw);*/
    width: calc(100% - 32px) !important;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ================= Footer ====================== */
.edge #footer {
    width: calc(100vw - 2.5vw);
}

#footer {
    width: calc(100vw - 2.5vw);
    height: 33.3vh;
    max-height: 40vh;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    background: #000;
    position: relative;
}

#footer #info-foot {
    width: 80%;
    height: auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    color: #fff;
}

#footer #info-foot ul.nav-foot {
    width: 100%;
    list-style: none;
    text-transform: uppercase;
    font-weight: 300;
    margin: 2% auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 100;
}

#footer #info-foot ul.nav-foot li {
    width: 18em;
}

#footer #info-foot ul.nav-foot li a {
    opacity: .4;
    font-size: 1.4em;
    font-weight: 400;
    margin: 0 auto;
    padding: 1em 0;
    transition: opacity .2s;
}

#footer #info-foot ul.nav-foot a:hover {
    opacity: 1;
}

#footer ul.nav-foot ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
}


#footer ul.nav-foot li ul li {
    width: 70% !important;
    list-style: none;
    font-size: .8em;
    text-align: left !important;
    margin: 0 auto 0 62px;
}

#footer ul.nav-foot li .drop.b li {
    margin-left: 56px;
}

#footer ul.nav-foot a {
    line-height: inherit;
    padding: 8% 6%;
    display: block;
}

#footer ul li:hover > ul {
    display: contents;
}




#footer ul.drop :first-child {
    margin-top: 3em;
}

#footer .nav-foot li span {
    background: none;
    color: #fff;
    opacity: .5;
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: 300;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    top: 1.05em;

    transition: opacity .2s;
}

#footer .nav-foot li span:hover {
    opacity: 1;
}

#footer a.logo-foot {
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 11vh;
    z-index: 0;
    background-image: url('/zubi/skin/int/zubi_vml.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#footer #info-foot .legal {
    color: #fff;
    opacity: .5;
    line-height: 2em;
    font-size: 1.2em;
    font-weight: 100;
    bottom: 10%;
    position: absolute;
    right: 0;
    left: 0;
}

#footer .legal a {
    font-size: 1em;
    font-weight: 100;
    color: #fff;
    /*opacity: .5;
    transition: color .2s;*/
}

#footer .legal a:hover {
    opacity: .5;
    color: #fff;
}




/* @MEDIA SCREENS CORE */

@media screen and (max-width: 1680px) {
    .cont-grid {
        /*width: 100vw;
        width: calc(100vw - 3vw);*/
    }
}

/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
   /* #footer {
        width: calc(100vw - 5vw);
    } */

    .logo img {
        max-width: 52px;
    }

}



@media screen and (max-width: 1580px) {
    .cont-grid {
        /*width: calc(100vw - 3vw);*/
    }
 /*makes box smaller*/
    .box {
        flex: 1 0 calc(20% - 10px);
    }

    .box.b {
        flex: 1 0 calc(66% - 10px);
    }

    .box.c {
        flex: 1 0 calc(50% - 10px);
    }

    .box.d {
        flex: 1 0 calc(50% - 10px);
    }
}

@media screen and (max-width: 1440px) and (max-height: 1050px) {
    #nav-bar {
        transform: translateX(24.5vw);
    }

    .cont-grid {
        /*width: calc(100vw - 3.5vw);*/
    }

    @keyframes undefined-easeOutBounce {
        0% {
            transform: translateX(24.5vw);
        }

        10% {
            transform: translateX(24.8vw);
        }

        25% {
            transform: translateX(23.5vw);
        }

        50% {
            transform: translateX(24.8vw);
        }

        85% {
            transform: translateX(23.5vw);
        }

        100% {
            transform: translateX(24.5vw);
        }

    }

}



@media only screen and (max-device-width: 1400px) and (max-device-height: 1080px) {    #nav-bar.splash {
        transform: translateX(0) !important;
    }

    #nav-bar {
        transform: translateX(23.5vw);
    }

    #nav-bar.open {
        width: 33vw;
        transform: translateX(0) !important;
    }
    #footer {
    width: calc(100vw - 3vw) !important;
}
}

@media screen and (max-width: 1280px) {
    #nav-bar {
        transform: translateX(29vw);
    }

    #nav-bar.open {
        width: 40vw;
    }

    .cont-grid {
        /*width: calc(100vw - 5vw);*/
    }

    .box {
        flex: 1 0 calc(33% - 10px);
    }

    .box.c {
        flex: 1 0 calc(33% - 10px);
    }

    .box.d {
        flex: 1 0 calc(33% - 10px);
    }

}

@media screen and (max-width: 1024px) {
    .cont-grid {
        /*width: calc(100vw - 6vw);*/
    }
}

@media screen and (max-width: 980px) {

    #nav-bar.open {
        width: 90vw;
    }

    .box {
        flex: 1 0 calc(50% - 10px);
    }


    .box:after {
        padding-bottom: 100%;
    }

    .box.b {
        flex: 1 0 calc(50% - 10px);
    }

    .box.off {
        display: none;
    }

    .box.lg {
        flex: 1 0 calc(100% - 10px) !important;
    }

    .box.lg:after {
        padding-bottom: 50%;
    }

    .box.off-mob {
        display: none !important;
    }

    #footer #info-foot ul.nav-foot li {
        width: 12em;
        text-align: center;
    }

    #footer ul.nav-foot li ul li {
        width: 100% !important;
        margin: 0 auto;
        text-align: center !important;
    }

    #footer ul.nav-foot li .drop.b li {
        margin: 10px auto;
        text-align: center !important;
    }

}

@media screen and (max-width: 850px) {

    .cont-grid {
        width: 100vw;
        width: calc(100vw - 0vw) !important;
    }

    .position-nav ul li {
        display: none;
    }

    #nav-bar {
        width: 100vw;
        height: 100vh;
        bottom: 0;
        padding: 14px 0px 0 40px;
        justify-content: space-between;
        transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
        /* ease (default) */
        transform: translateY(calc(100vh - 50px)) translateX(0) !important;
    }

    #nav-bar.open {
        width: 100vw;
        top: 0;
        transform: translateY(0vw) !important;
    }

    #nav-bar.splash {
        width: 100vw !important;
        height: 100vh;
        top: 0;
        bottom: 0;
        padding: 14px 0px 0 40px;
        justify-content: space-between;
        transform: translateY(calc(85vh - 50px)) translateX(0);
    }

    #nav #spot {
        height: inherit;
        background-size: 25% !important;

    }

    .close #nav {
        left: 6%;
    }

    #nav {
        transform: rotate(90deg);
        -webkit-transform: rotate(0deg);
    }

    #nav-bar .social {
        bottom: 10px;
        position: absolute;
        display: flex;
        -webkit-transition: bottom .4s;
        transition: bottom .4s;
    }

    #nav-bar .social {
        display: none;
    }

    #box-social-m .social {
        display: inline-flex;
    }

    #box-social-m .social li a i {
        letter-spacing: 33px;
        font-size: 2.2em;
    }

    #nav-bar ul li a i {
        letter-spacing: 40px;
        font-size: 1.4em;
    }

    .cont-grid {
        /*width: calc(100vw - 0px);*/
    }

    #footer {
        width: calc(100vw - 0px) !important;
    }

    #footer #info-foot ul.nav-foot li {
        width: 12em;
        text-align: center;
    }

    #footer .nav-foot li span {
        background: none;
        color: #fff;
        opacity: .5;
        font-size: 1.4em;
        text-transform: uppercase;
        font-weight: 300;
        cursor: pointer;
        margin: 0 auto;
        position: relative;
    }

    #footer a.logo-foot {
        bottom: 20vh;
    }

    #footer #info-foot .legal {
        bottom: 10vh;
    }
}

@media screen and (max-width: 780px) {
    .btn-top{
        bottom: 0;
        right: 0;
        margin:2em;
        transform: translateY(0);
    }
    .btn-top.show {
    bottom: 0 ;
    right: 0;
    margin:2em 2em 7em 2em ;
    transform: translateY(2em);
}

    #box-social-m .social {
        transition: bottom 600ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
        /* ease (default) */
    }

    #nav-bar.nav-off,
    #box-social-m.nav-off .social {
        bottom: -100%;
    }
}

@media screen and (max-width: 520px) {

    /* == BACK TO TOP == */


    #nav #spot {
        height: inherit;
        margin-left: 0 !important;
    }

    .logo img {
        max-width: 50px !important;
    }

    #nav-bar .entradas .li-a {
        height: 10em;
        margin-bottom: -5em;
    }

    #nav-bar .entradas .li-a.open {
        height: 23.5em;
    }



    #nav-bar ul li a i {
        letter-spacing: 20px;
        font-size: 1.8em;
    }

    .box {
        flex: 1 0 calc(100% - 10px);
    }

    .box:after {
        padding-bottom: 100% !important;
    }

    .box.b {
        flex: 3 0 calc(100% - 10px);
    }

    .box.lg-mob {
        flex: 1 0 calc(100% - 10px) !important;
    }

    .box.xs-mob {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #footer {
        width: calc(100vw - 0px);
        height: 50vh;
        max-height: 100vh;
    }

    #footer li.w {
        left: 3em;
        position: relative;
    }

    #footer li.c {
        position: relative;
        right: 3.5em;
    }

    #footer #info-foot {
        width: 100%;
    }

    #footer #info-foot ul.nav-foot {
        width: 100%;
        justify-content: space-around;
    }



    #footer ul.nav-foot a {
        width: 8em;
    }

    #footer #info-foot ul.nav-foot li a {
        font-size: 1.4em;
        padding: 8% 0;
        margin: 0 auto;
    }

    #footer .nav-foot li span {
        width: 9em;
        text-align: center;
        top: .6em
    }

    #footer #info-foot .bajada {
        font-size: 1.1em;
        bottom: 15%;
        width: 80%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {
    #nav-bar .entradas .li-a.open {
        height: 19.2em;
    }

    #footer #info-foot ul.nav-foot li a {
        font-size: 1.4em;
        padding: 8% 0;
        margin: 0 auto;
    }

    #footer .nav-foot li span {
        text-align: center;
        padding-top: 7px;
    }
}


@media screen and (max-width: 380px) {
    .cont-grid {
        /*width: 100%;*/
    }

}






.sm2-bar-ui {
    font-size: 16px;
}

.sm2-bar-ui .sm2-main-controls,
.sm2-bar-ui .sm2-playlist-drawer {
    background-color: #000;
}

.sm2-bar-ui .sm2-inline-texture {
    background: transparent;
}













/* ============ IE-EDGE Work ================= */
.edge #wrk .cont-grid {
    /*width: calc(96.5vw);*/
}

.edge #wrk .box .sub-box {
    position: absolute;
    right: 0;
}

@media only screen and (max-device-width: 1920px) and (max-device-height: 1980px) {
    .edge #wrk .cont-grid {
        /*width: calc(95vw);*/
    }
}

@media only screen and (max-device-width: 1440px) and (max-device-height: 990px) {
    .edge #wrk .cont-grid {
        /*width: calc(95.2vw);*/
    }
}

/* ============ WINDOWS ================= */

@media only screen and (max-device-width: 1920px) and (max-device-height: 1200px) {

    .win #wrk .cont-grid {
        /*width: calc(100vw - 3vw);*/
    }

}
@media only screen and (max-device-width: 1440px) and (max-device-height: 1050px) {
        .win #wrk .cont-grid {
        /*width: calc(100vw - 4.5vw);*/
    }
}

/* ============ Work ================= */

#wrk * {
    transform: translate3d(0, 0, 0);
}

#wrk .box.tri-1 {
    background-size: 110% 110%;
}

#wrk .box.tri-1 {
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out, background-color .2s ease-out .8s;
    background-position: 50% 50%;
}

.ready #wrk .box.tri-1 {
    transform: translate3d(0, 0, 0);
    background-color: #eb2129;
}

#wrk .box .tri-1-b {
    width: 100%;
    height: 100% !important;
    background-size: 101% 101%;
    background-position: bottom;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 100;
    transform-origin: 0 50%;
    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transition: transform .4s ease-out .4s;
}

.ready #wrk .box .tri-1-b {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
}



#wrk .box .tri-1-b h2 {
    transition: opacity .4s ease-out 1s, margin-right .4s ease-out 1s;
    opacity: 0;
    margin-right: 6%;
}

#wrk .box .tri-1-b.go h2 {
    opacity: 1;
    margin-right: 0;
}


#wrk .box .tri-1-b h2 {
    height: 100%;
    flex-direction: column-reverse;
    display: flex;
    padding: 0 6% 6% 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 4em;
}

#wrk .box .red-hov {

    opacity: .3;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: -1;
    background-size: 200%;
    background-position: 50% -100%;


    background-image: url('/zubi/works/tri-e-red.png');
    transition: background-position .6s ease-out .4s;
}

#wrk .box.go .red-hov {
    background-position: 0% 98%;

}

#wrk .box.go.open .red-hov {
    transition: background-position .6s ease-out;
    background-position: 50% -100%;
}








#wrk .box.b {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: row-reverse;
}

#wrk .box.b:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: inherit;
    content: ' ';
}

#wrk .box {
    position: relative;
    transition: background-color .4s;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
}


#wrk .box-info {

    text-align: right;
    padding: 6%;
    box-sizing: border-box;
    text-transform: uppercase;
}

#wrk .box-info h3 {

    font-weight: 300;
    font-size: 2.5em;
    margin-bottom: .8em;
    opacity: 0;
    transition: opacity .2s ease-out, transform .4s ease-out;
    transform: translateY(.5em);
}

#wrk .box.open .box-info h3 {
    opacity: 1;
    transition: opacity .4s ease-out .4s, transform .4s ease-out .4s;
    transform: translateY(0);
}

#wrk .box-info ul {

    list-style: none;
    font-weight: 100;
    font-size: .8em;
    line-height: 12px;
    opacity: 0;
    transition: opacity .2s ease-out, transform .4s ease-out;
    transform: translateY(1em);
}

#wrk .box.open .box-info ul {
    transition: opacity .4s ease-out .5s, transform .4s ease-out .5s;
    opacity: 1;
    transform: translateY(0);
}

#wrk .box-info ul li p {
    font-size: 1.2em;
}

#wrk .box-info ul span {
    font-weight: 400;
}

#wrk .box-info ul li a {
    margin-top: 20px;
    background-image: url("/zubi/works/arrow-white.png");
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 1.2em;
    padding: 0 0 0 2.2em;
}




#wrk .box {
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    image-rendering: auto;

    transform: translateX(-100vw);
    transition: transform .4s ease-out .4s;
}

#wrk .box.go {
    transform: translateX(0);
}

#wrk .box:nth-child(even) {
    transform: translateX(100vw);
    transition: transform .4s ease-out .2s;
}

#wrk .box.go:nth-child(even) {
    transform: translateX(0);
}


#wrk .box .sub-box {

    opacity: 0;
    top: 0;
    position: absolute;
    width: 75px;
    height: 75px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column-reverse;

    background-repeat: no-repeat;
    background-position: 100% 0;
    transition: width .3s ease-out .2s, height .3s ease-out .2s, opacity .2s ease-out .4s;
}

#wrk .box.go .sub-box {
    opacity: 1;
}

#wrk .box.open .sub-box {
    transition: width .3s ease-out, height .3s ease-out, opacity .3s ease-out;
    width: 100%;
    height: 100%;
}

#wrk .box.b.open .sub-box {
    width: 50vh;
    height: 100%;
}

#wrk .box .box-info {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    padding: 6%;
}

#wrk .box.open .sub-box .box-info {}


#wrk .box-info .plus {
    position: absolute;
    top: 10px;
    width: 20px;
    right: 10px;
    transition: opacity .2s ease-out .4s, transform .4s ease-out .4s;
    transform: rotate(0);
    opacity: 1;
}

#wrk .box.open .box-info .plus {
    transform: rotate(90deg);
    opacity: 0;
    transition: opacity .2s ease-out .2s, transform .4s ease-out;
}


#wrk .box-info .plus-b {
    position: absolute;
    top: 10px;
    right: 10px;
}




.ready #wrk .box.tri-1 {
    background-image: url("/zubi/skin/int/tri-a-red.png");
}

.ready #wrk .box .tri-1-b {
    background-image: url("/zubi/skin/int/tri-c-red.png");
}

.ready #wrk .box.b .sub-box {
    background-image: url("/zubi/skin/int/tri-d-red.png");
}

.ready #wrk .box .sub-box {
    background-image: url("/zubi/skin/int/tri-d-red.png");
}





#wrk .box.fx.imp {
    height: 50vh;
}
#wrk .box.imp.open .sub-box {
    transition: width .3s ease-out, height .3s ease-out, opacity .3s ease-out;
    width: 25%;
    height: 100%;
}
/* ============ @Media screens Work ================= */

/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {

    /*
	.ready .position-nav {
        top: 40vh !important;
    }
    */

    #wrk .box.b.open .sub-box,
    #wrk .box.open .sub-box {
        width: 60vh;
        height: 60vh;
    }
}

/* ============  ================= */

@media screen and (max-width: 1580px) {
    #wrk .box.b {
        flex: 1 0 calc(66% - 10px);
    }

    #wrk .box-info ul {
        font-size: 0.8em;
    }

}


/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
    /* #wrk .cont-grid{
    width: calc(95vw);
} */
}

@media only screen and (max-device-width: 1440px) and (max-device-height: 1050px) {
    #wrk .box .box-info {
        padding: 7%;
    }
}


@media screen and (max-width: 980px) {
    #wrk .box-info {
        padding: 4% 12%;
    }

    #wrk .box.b {
        flex: 1 0 calc(50% - 10px);
    }

    #wrk .box.open .sub-box,
    #wrk .box.b.open .sub-box {
        width: 80%;
        height: 80%;
    }
}

@media screen and (max-width: 680px) {
    #wrk .box .red-hov {
        background-size: 320%;
    }

    #wrk .box .tri-1-b h2 {
        font-size: 2.8em;
        height: 50vw;
        width: 50vw;
    }

    .ready #wrk .box.b:nth-child(2) .sub-box {
        background-image: url("/zubi/works/tri-big-red.png") !important;
    }

    #wrk .box-info h3 {
        font-size: 3.5em;
    }

    #wrk .box-info ul {
        font-size: 70%;
    }

    #wrk .box {
        flex: 1 0 calc(100% - 10px);
    }

    #wrk .box.b {
        flex: 1 0 calc(100% - 10px) !important;
    }

    #wrk .box.b:after {
        content: '';
        display: block;
        padding-bottom: 100%;
    }

    #wrk .box.tri-1 {
        display: flex;
        position: absolute;
        z-index: 100;
        width: 50vw;
    }

    #wrk .box.b .sub-box {
        width: 20%;
        height: 20%;
        position: absolute;
        bottom: 0;
        flex-direction: column-reverse;
        background-repeat: no-repeat !important;
        background-position: bottom left !important;
    }

    #wrk .box-info {
        width: 100%;
        padding: 4%;
        height: auto;
        text-align: right;
    }

    #wrk .cont-grid .box.b:nth-child(2) {
        height: 80vh;
    }

    #wrk .cont-grid .box.b:nth-child(2) .sub-box {
        width: 20vw;
        height: 20vw;
        position: absolute;
        bottom: 0;
        left: 0;
        top: inherit;
    }

    #wrk .cont-grid .box.b.open:nth-child(2) .sub-box {
        bottom: 0 !important;
        top: inherit;
        left: 0;
        width: 100vw;
        height: 100vw;
    }

    #wrk .cont-grid .box.b:nth-child(2) .open .sub-box .box-info {
        bottom: 0;
        top: inherit;
        text-align: left;
    }

    #wrk .cont-grid .box.b:nth-child(2) .box-info {
        position: absolute;
        left: 1em;
        bottom: 1em;
        top: inherit;
        text-align: left;
        padding: 2%;
    }

    #wrk .cont-grid .box.b:nth-child(2) .box-info .plus {
        position: absolute;
        bottom: 1em;
        left: 0;
        top: inherit;
        width: 20px;
        right: 10px;
    }

}



@media screen and (max-width: 580px) {
    #wrk .box {
        flex: 1 0 calc(100% - 10px);
    }

    #wrk .box.b {
        flex: 1 0 calc(100% - 10px) !important;
    }

    #wrk .box .tri-1-b h2 {
        font-size: 2.8em;
    }

    #wrk .box-info h3 {
        font-size: 2em;
    }

}
/* MODAL VIDEO*/
#videoBGc {
    width: 100%;
    height: 800px;
}
    .workdetail .modal-vid.on {
        transform: translateX(0vw);
        opacity: 1;
    }

    .workdetail .modal-vid {
        display: flex;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100000;
        transform: translateX(-120vw);
        transition: transform .5s, opacity .5s;
        opacity: 0;
    }

    .workdetail .modal-vid .cont-modal-vid {
        width: 75vw;
        height: 80vh;
        margin: auto;
        opacity: 0;
        transition: opacity .5s ease .8s;
    }

    .workdetail .modal-vid.on .cont-modal-vid {
        opacity: 1;
    }

    .workdetail .modal-vid .cross {
        width: 30px;
        height: 30px;
        top: 4vh;
        right: 4vw;
        cursor: pointer;
        position: fixed;
        z-index: 10;
        background-size: cover;
        background-image: url(/zubi/common/cross.png);
    }


/* ============ Work Detail ================= */
.z1.ind.reverse-up .cont-grid {
    flex-direction: column-reverse;
    flex-wrap: unset;
}

.z1 .cont-grid,
.z4 .cont-grid {
    max-height: 50vh;
}




.workdetail .box.b:after {
    padding-bottom: 50%;
}

.workdetail .box.txt{
    height: 100%;
}


#workdetail .position-nav {
    position: fixed !important;
    /* left: -.5em; */
    top: 30vh;
    transform-origin: unset;
    width: 100%;
    height: 90%;
    text-align: center;
}

#workdetail .bl-tri {
    width: 45vw;
    height: 45vw;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url('/zubi/common/tri-black-op.png');
    background-size: 100% 100%;
    background-position: bottom right;
    background-repeat: no-repeat;
}

/* ============  Safari Work Detail ================= */
/*.safari #workdetail a.btn-red {
    right: 1.5em;
}*/


.cont-grid #banner @media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {
    /*   .ready .position-nav {
         top: 35vh !important; 
    }*/

    .safari .cont-grid {
        width: calc(100vw - 4.5vw) !important;
    }

    .safari #nav-bar.open {
        width: 40vw !important;
    }

    .safari #workdetail a.btn-red {
        right: 3vw;
    }

    .safari #workdetail .position-nav {
        /* top: 18vh !important; */
        height: 36%;
        /* width: 26em;*/
        /* max-width: 60%;*/
    }

    .safari #workdetail #info-vid .brand {
        right: 6vw;
    }

    .safari #workdetail #cont-info-vid {
        padding: 6% 6%;
    }

    .safari .btn-play.ms-r {
        left: 25% !important;
    }

    .safari .btn-play.ms-l {
        right: 33% !important;
    }

    .safari #controls-slide {
        width: 64vw;
    }

}


.box.b.cont-vid video {
    margin: 0 auto;
    left: 0;
    right: 0;
    /* position: absolute; */
    width: 100%;
}


/* ============  IE-EDGE-WIN Work Detail ================= */
.win #workdetail .position-nav{
    position: absolute !important;
    left: -24vw;
}
.edge #workdetail a.btn-red {
    right: 4em !important;
}

.edge #workdetail .cont-grid {
    width: calc(98vw);
}

.edge .box.b.cont-vid {
    max-height: 55vh;
}

.edge .z4 .box.b {
    height: 100%;
    max-height: 70vh;
}

.edge .btn-play.ms-r {
    left: 25% !important;
}

.edge .btn-play.ms-l {
    right: 33% !important;
}


@media only screen and (max-device-width: 1980px) and (max-device-height: 1200px) {
    .edge #workdetail a.btn-red {
        right: 20px;
    }

    .edge #workdetail.cont-video-bg {
        max-height: 110vh;
    }

    .edge.ready #workdetail .position-nav {
        /*top: 8% !important;*/
        /*left: 2em;*/
    }
}

@media only screen and (max-device-width: 1440px) and (max-device-height: 990px) {

    .edge #workdetail a.btn-red {
        right: 8px;
    }

    .edge.ready #workdetail .position-nav {
        /*top: 14vh !important;*/
        /* left: -4em;*/
    }
}

/* ======== BLOCK VIDEO ========== */
#sec-separador-detail,
.cont-grid {
    transform: translate3d(0, 0, 0);
}

.video-off {
    display: none;
}


/*VIDEO BG RESPONSIVE*/
#workdetail video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: #242424 url(int/pattern.png) repeat center center;
}

/* // VIDEO BG RESPONSIVE*/


.play-video img {
    margin: 0 auto;
}

#workdetail.cont-video-bg {
    max-height: 110vh;
    height: 100vh;
    overflow: hidden;
    position: relative;
}


#workdetail .big-bg {
    background-size: cover;
    background-position: center;
    background-color: #000;
    transform: initial;
}

#workdetail .big-bg .box.b {
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: initial;
    z-index: 10;
    -webkit-transform: initial;
    filter: grayscale(0);
}

#workdetail .big-bg .box:nth-child(1) {
    background: none;
}

#workdetail .big-bg .box .tri-1-b {
    width: 100%;
    background-size: 100% 100%;
    /* background-image: url("/skin/zubi/common/tri-alpha-r.png"); */
    display: flex;
    flex-direction: row-reverse;
    text-align: right;

}

#workdetail .big-bg .box .tri-1-b h2 {
    width: 60%;
    height: 100%;
    flex-direction: column-reverse;
    display: flex;
    padding: 0 6% 6% 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 4em;
}

#workdetail a.btn-red {
    width: 12.5em;
    cursor: pointer;
    background: #eb2129;
    padding: 1em;
    text-transform: uppercase;
    font-weight: 400;
    color: #000;
    position: absolute;
    top: 0;
    right: 4em;
    text-align: right;

    font-size: 1.2em;

    background-image: url("/zubi/common/a-back.png");
    background-position: 1em center;
    background-repeat: no-repeat;

    z-index: 9999;
}

/*#workdetail a.btn-red span{ font-size: 1.2em; }*/

#workdetail a.btn-red.m {
    display: none;
}

#workdetail .box.dsc.b {
    flex-direction: row-reverse !important;
    justify-content: right !important;
}

#workdetail #cont-info-vid {
    width: 40%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* flex: 1 0 calc(100% - 10px); */
    z-index: 0;
    background-repeat: no-repeat;
    text-align: right;
    transform: translate(-100px, 80px);
}

#workdetail #info-vid .brand {
    width: 180px;
    height: 70px;
    max-width: 220px;
    position: relative;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 0 0 auto;
}

#workdetail #info-vid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: right;
}

#workdetail #info-vid ul li {
    list-style: none;
    display: inline-block;
    margin-left: 8px;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 100;
}

#workdetail #info-vid ul span {
    font-size: 1em;
    font-weight: 600;
}

#workdetail #info-vid h3 {
    color: #EB2129;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 4em;
    margin: 20px 0 10px auto;
}

#workdetail #info-vid p {
    width: 40%;
    margin: 10px 0 0 auto;
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: 100;


    display: none;
}


#workdetail .big-bg .play-video {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

#workdetail .big-bg .box.lg-mob {
    background-image: url("/zubi/common/tri-red-op.png");
    background-size: 104% 104%;
    z-index: 5;
    background-repeat: no-repeat;
    filter: initial;
}

.ready #workdetail .big-bg .box.lg-mob {
    background-position: initial;
}

#sec-separador-detail {
    width: calc(100vw - 2.5vw);
    background-repeat: no-repeat;
    transition: background-position-y .6s ease-out .8s;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 0;
}

#sec-separador-detail .c1,
#sec-separador-detail .c2 {
    flex: 1 0 calc(8% - 10px);
    background-size: 100% 100%;
}

#sec-separador-detail .c1 {
    background-image: url("/zubi/service/bg-lg-tri.png");
}

#sec-separador-detail .c2 {
    background-image: url("/zubi/service/bg-lg-tri-b2.png");
}


.break-c {
    width: 100%;
    padding: 2% 0;
    text-align: center;
    opacity: .1;
    transition: opacity .4s ease-out;
}

.break-c.go {
    opacity: 1;
}

.break-c h2 {
    font-size: 3em;
    font-weight: 200;
}

/* ======== BLOCK Z1 ========== */
.z1 .btn-play {
    width: 10em;
    height: 10em;
    background-image: url('/zubi/common/play-pause.png');
    background-size: cover;
    position: absolute;
    z-index: 10;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 35%;
    transition: opacity .2s ease-out;

    cursor: pointer;
}

.z1 .btn-play.pause {
    background-position-y: -10em;
}

.z1 .btn-play.hide {
    opacity: 0;
}

.z1 .cover-poster.hide {
    transform: translateX(100%);
}

.z1 .m2 .cover-poster.hide {
    transform: translateX(-100%);
}

.cover-poster {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 1;
    transition: transform .4s ease, opacity .4s ease;
}

.z1 .box.txt,
.z4 .box.txt,
.z5 .box.txt,
.z6 .box.txt {
    background-image: url('/zubi/common/tri-grey-b-r.png');
}

.z1 .z1-cont-txt,
.z4 .z1-cont-txt,
.z5 .z1-cont-txt,
.z6 .z1-cont-txt {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    color: #000 !important;
}

.z1 .z1-cont-txt h2,
.z4 .z1-cont-txt h2,
.z5 .z1-cont-txt h2,
.z6 .z1-cont-txt h2 {
    font-size: 3em;
    font-weight: 400;
    text-transform: uppercase;
}

.z1 .z1-cont-txt p,
.z4 .z1-cont-txt p,
.z5 .z1-cont-txt p,
.z6 .z1-cont-txt p {
    font-size: 1.4em;
    font-weight: 100;
    line-height: 1.6em;
}

/* ======== BLOCK Z3 ========== */

.z3 .box.a:after {
    content: '';
    display: block;
    padding-bottom: 33%;
}

/* ======== BLOCK Z4 ========== */


.z4 .box.b {
    background-size: cover;
    background-position: center;
    overflow: hidden;
    height: 100%;
    position: relative;

    background: #000;
}

#code-block {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

#code-block iframe {
    margin: 0 auto !important;
    top: 0px;
    bottom: 0px;
}

#code-block img {
    filter: saturate(.2);
}

#code-block p {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 30%;
    text-align: center;
    font-size: 4em;
    font-weight: 600;
    text-transform: uppercase;
    background: #000000ad;
}

/* ======== BLOCK Z5 ========== */

.z5 .box.b {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.z5 .btn-audio {
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: 10%;
    background-image: url('/zubi/skin/int/workdetail/play-icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    cursor: pointer;
}

.z5 video,
.z5 audio {
    width: 100%;
}

.z5 .sm2-bar-ui .bd,
.sm2-bar-ui .sm2-extra-controls {
    background-color: #191919;
}

/* ======== BLOCK Z6 ========== */
.z6 .cont-grid .col-detail {
    flex: 1 0 calc(23% - 10px);
    display: flex;
    flex-flow: column;
}

.z6 .cont-grid {
    width: 100vw;
    display: flex;
}

.z6 .cont-grid .box.d {
    flex: 1 0 calc(75% - 10px);
}

.z6 .cont-grid .box:after {
    padding-bottom: 65%;
}

.z6 .box.leader-off {
    display: none;
}

.z6 .cont-grid .box.gr {
    background-color: #606060;
}

.z6 .cont-grid .box.gr p {
    font-size: 2.6em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.box.b.cont-vid {
    overflow: hidden;
    display: flex !important;
    max-height: 50vh;
    background-color: #000 !important;
}

.box.b.m.cont-vid,
.z4 .box.b {
    transform: translateX(80vw);
    transition: transform .4s cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

.box.b.m2.cont-vid,
.box.b.m.cont-slide {
    transform: translateX(-80vw);
    transition: transform .4s cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

.box.b.m.cont-vid.go,
.box.b.m2.cont-vid.go,
.box.b.m.cont-slide.go,
.z4 .box.b.go {
    transform: translateX(0vw);
}

.box.b.cont-slide {
    overflow: hidden;
    display: flex;
    max-height: 52vh;
    overflow-y: hidden;
    overflow-x: hidden;
}


.box.b.cont-slide .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    box-sizing: border-box;
    filter: saturate(0);
    background-position: center center;
    background-size: cover;
    image-rendering: auto;
    transform: translateX(100%);
}

.box.b.cont-slide .slide.in {
    filter: saturate(1);
    transform: translateX(0);
    transition: filter 2s ease-out, transform .6s ease-out;
}

#arrow-a {
    width: 6em;
    height: 6em;
    position: absolute;
    left: 0;
    top: 40%;
    background-size: cover;
    background-image: url(/zubi/common/arrow_org-r.png);
    z-index: 10;
}

#arrow-b {
    width: 6em;
    height: 6em;
    position: absolute;
    right: 0;
    top: 40%;
    background-size: cover;
    background-image: url(/zubi/common/arrow_org.png);
    z-index: 10;
}

#controls-slide {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ======== ANIMATION ========== */

.workdetail * {
    background-repeat: no-repeat;

}

.workdetail .box {
    background-size: cover;
    background-position: -100vw 50%;
    transition: background-position .4s ease-out .2s, filter .4s ease-out .6s;
    filter: grayscale(1);
}

.workdetail .box:nth-child(odd) {
    background-position: 100vw 50%;
}

.workdetail .box.go {
    background-position: 50% 50%;
    filter: grayscale(0);
}


.workdetail #sec-separador-detail .box {
    transition: background-position .4s ease-out;

    background-position: -10vw -10vw;
}

.workdetail #sec-separador-detail .box:nth-child(odd) {
    transition: background-position .4s ease-out .4s;
    background-position: 10vw -10vw;
}

.workdetail #sec-separador-detail .box.go {
    background-position: 50% 50%;
}



.workdetail .txt div {
    opacity: 0;
    transition: transform .4s ease-out .2s, opacity .4s ease-out .2s;
    transform: translateY(1em);
}

.workdetail .txt.go div {
    opacity: 1;
    transform: translateY(0);
}

.sm2-bar-ui {
    max-width: 100% !important;
}

.sm2-bar-ui > .bd {
    position: absolute !important;
    bottom: 0;
}



#code-block iframe {
    overflow: hidden !important;
}




@media only screen and (max-device-width: 1920px) and (max-device-height: 900px) {}

@media (max-width: 1580px) {

    #code-block iframe {
        /*position: absolute;*/
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

@media only screen and (max-width: 1680px) and (max-height: 1050px) {


    #workdetail .position-nav {
        /*left: 0.5em;*/
    }

    .workdetail .box.b {
        flex: 1 0 calc(60% - 10px);
    }

    .z4 .box.b {
        /* height: 52vh;
        max-height: 52vh; */
    }

    #workdetail #cont-info-vid {
        transform: translate(-100px, 0px);
    }
}

@media screen and (min-width: 1680px) {
    .workdetail .box.b:after {
        padding-bottom: 35%;
    }

    .box.b.cont-vid video {
        width: 100%;
    }

}

@media only screen and (max-width: 1580px) and (max-height: 840px) {
    .safari #workdetail a.btn-red {
        /* right: 0; NEJUS*/
    }

    #workdetail .position-nav {
        /*  top: 20vh !important; */
    }

    #workdetail.cont-video-bg {
        width: calc(100% - 3em);
    }

    .box.b.cont-vid {
        max-height: 100% !important;
    }

    .box.b.cont-slide {
        max-height: 100%;
    }

    #workdetail a.btn-red {
        right: 0 !important;
    }

}

@media only screen and (max-device-width: 1480px) and (max-device-height: 1080px) {
    #workdetail.cont-video-bg {
        max-height: 110vh;
    }

    #workdetail #info-vid .brand {}

    .box.b.cont-vid {
        max-height: 55vh;
    }

    .z1 .cont-grid,
    .z4 .cont-grid {
        max-height: 55vh;
    }

    #workdetail a.btn-red {
        right: 0 !important;
    }
}


@media (max-width: 1320px) {
    #workdetail.cont-video-bg {
        max-height: 110vh;
    }

    #workdetail .bl-tri {
        width: 50vw;
        height: 50vw;
    }
}

@media only screen and (max-device-width: 1280px) and (max-device-height: 1080px) {
    .workdetail .cont-grid {
        width: calc(100vw - 4vw);
    }


    #workdetail #cont-info-vid {
        width: 80%;
    }

    #workdetail #info-vid p {
        width: 80%;
    }


}

@media (max-width: 1440px) {

    #workdetail a.btn-red {
        right: 4em !important;
    }
}

@media (max-width: 1280px) {
    #workdetail #cont-info-vid {
        transform: translate(-100px, 80px);
    }
    #workdetail .bl-tri {
    width: 60vw;
    height: 60vw;
}
}

@media (max-width: 1080px) {
    #workdetail #cont-info-vid {
    width: 60%;
    }
}

@media (max-width: 980px) {
    /* SAFARI */

    .safari #workdetail .box {
        flex: 1 0 calc(30% - 10px);
    }

    /*.safari #workdetail #cont-info-vid {
        padding: 12% 8%;
    }*/



    .safari .z1 .cont-grid,
    .safari .z4 .cont-grid {
        max-height: 30vh;
    }

    /* SAFARI */
    .workdetail .cont-grid {
        width: calc(100vw - 5vw);
    }

    .workdetail .box {
        flex: 1 0 calc(30% - 10px);
    }

    #workdetail.cont-video-bg {
        max-height: 90vh;
    }

    #workdetail #cont-info-vid {
        padding: 0;
    }



    #workdetail .big-bg .box {
        background: none !important;
    }

    #z2 .cont-grid .box {
        flex: 1 0 calc(33% - 10px);
    }

    .z3 .cont-grid {
        height: 50vh;
    }

    .z4 #code-block p {
        width: 100%;
        font-size: 3em;
    }

    .z1 .z1-cont-txt,
    .z4 .z1-cont-txt,
    .z5 .z1-cont-txt,
    .z6 .z1-cont-txt {
        width: 70%;
    }

    .z6 .cont-grid .box.gr p {
        font-size: 2.6em;
    }

    .z6 .cont-grid .col-detail {
        flex: 1 0 calc(100% - 10px);
        display: flex;
        flex-flow: row;
    }

    .z6 .cont-grid .box:after {
        padding-bottom: 90%;
    }

#workdetail #cont-info-vid {
    width: 70%;
    transform: translate(-40px, 60px);
}
    
    #workdetail .position-nav{
            height: 70%;
    }

    /*NEJUS*/
    #workdetail a.btn-red span {
        display: none;
    }

    #workdetail a.btn-red {
        width: 6em;
        height: 3.5em;
        cursor: pointer;
        background-position: center center !important;
    }

    #workdetail .bl-tri {
        width: 60vw;
        height: 60vw;
    }

}


@media (max-width: 850px) {
    /*  #workdetail.cont-video-bg {
        width: calc(100vw - 0vw) !important;
    }*/

    #box-social-m .social {
        width: 20%;
    }
}

@media (max-width: 798px) {

    .z1 .z1-cont-txt,
    .z4 .z1-cont-txt,
    .z5 .z1-cont-txt,
    .z6 .z1-cont-txt {
        width: 70%;
    }
#workdetail a.btn-red {
    right: 0 !important;
}
    #workdetail .bl-tri {
        width: 80vw;
        height: 80vw;
    }

}

@media (max-width: 680px) {
    .box.b.non {
        display: none !important;
    }

    .workdetail.safari .cont-grid {
        width: calc(100vw - 0vw) !important;
    }

    #workdetail .big-bg .box .tri-1-b {
        height: 50%;
    }

    #workdetail #info-vid h3 {
        font-size: 4.2em;
    }



    .android #workdetail .big-bg .box.b {
        /*height: 33%;*/
    }

    #workdetail a.btn-red span {
        display: none;
    }

    #workdetail a.btn-red {
        width: 6em;
        height: 3.5em;
        cursor: pointer;
        background-position: center center !important;
    }

    .z1 .cont-grid,
    .z4 .cont-grid {
        max-height: 120vh !important;
    }

    #workdetail a.btn-red.m {
        right: 0;
    }

    #workdetail a.btn-red {
        display: none;
    }

    .workdetail .box.b.cont-vid {
        max-height: 50vh !important;
    }




}

@media (max-width: 580px) {
    #workdetail .box.non {
        display: none;
    }

    #workdetail.cont-video-bg {
        width: calc(100vw - 0vw) !important;
        max-height: 93vh;
    }

    .sec-separador h2 {
        font-size: 2.8em;
        font-weight: 200;
    }

    #workdetail a.btn-red.m {
        display: inline;
        position: fixed;
        top: 0;
    }

    #workdetail .big-bg .box .tri-1-b {
        width: 50%;
        height: 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    #workdetail .bl-tri {
        width: 100vw;
        height: 100vw;
    }

    #workdetail #cont-info-vid {
        width: 70%;
        padding: 0;
        transform: translate(-30px, 20px);
    }

    #workdetail #info-vid .brand {
        width: 120px;
        height: 66px;
    }

    #workdetail #info-vid h3 {
        font-size: 3em;
    }

    #workdetail a.btn-red {
        font-size: 1em;
        top: 0;
        position: fixed !important;
        z-index: 50;
    }

    .play-video img {
        margin: 0 auto;
        max-width: 60px;
    }

    #workdetail #info-vid p {
        margin-top: 1em;
    }



    .workdetail .box {
        flex: 1 0 calc(100% - 10px);
    }

    .z1 .box.b.m {
        flex: 1 0 calc(100% - 10px);
    }

    .z1 .box.m2 {
        flex: 1 0 calc(100% - 10px);
    }

    #z2 .cont-grid .box {
        flex: 1 0 calc(100% - 10px);
    }

    .z3 .cont-grid {
        height: 33vh;
    }

    .z3 .cont-grid .box:after {
        padding-bottom: 33% !important;
    }

    .z6 .cont-grid .col-detail {
        display: flex;
        flex-flow: column;
        flex-wrap: wrap;
    }

    .z1 .z1-cont-txt,
    .z4 .z1-cont-txt,
    .z5 .z1-cont-txt,
    .z6 .z1-cont-txt {
        width: 80%;
    }

    .z6 .cont-grid {
        display: flex;
        flex-direction: column;
        flex-wrap: inherit;
    }

    .z1 .btn-play {
        top: initial;
        margin-top: 30%
    }

    /* SAFARI */
    .safari #workdetail .box {
        flex: 1 0 calc(100% - 10px);
    }

    /* .safari #workdetail #cont-info-vid {
        padding: 12% 4%;
    } */
}

@media screen and (max-width: 480px) {
    #workdetail #cont-info-vid {
        width: 70% !important;
        padding: 0;
        transform: translate(-30px, -100px) !important;
    }

}

@media screen and (max-width: 380px) {
    #workdetail #cont-info-vid {
        width: 80% !important;
        padding: 0;
        transform: translate(-20px, -60px) !important;
    }

}





/* ============ @Media screen mackbook Pro 13"  ================= 
@media screen and (max-device-height: 800px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1)
*/
@media screen and (max-height: 800px) and (max-width: 1420px) {
    #workdetail a.btn-red {
        right: 0vw !important;
    }

    .safari #workdetail #cont-info-vid,
    #workdetail #cont-info-vid {
        bottom: 40px;
        padding: 0;
        top: inherit;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1420px) {

    #workdetail #info-vid .brand {
        margin: 0 0 0 auto;
    }

    /*#workdetail.cont-video-bg {
        max-height: 95vh;
    }*/

    #workdetail #cont-info-vid {
        transform: translate(-100px, -40px);
    }


    .z1 .cont-grid,
    .z4 .cont-grid,
    .safari .z1 .cont-grid,
    .safari .z4 .cont-grid {
        max-height: 62vh;
    }


    .workdetail .box.b:after {
        padding-bottom: 60%;
    }


    .box.b.cont-slide {
        max-height: 100%;
    }

    .workdetail .z1 .box.b:after {
        padding-bottom: 50% !important;
    }

}

@media screen and (max-height: 800px) and (max-width: 1280px) {
    #workdetail #cont-info-vid {
        width: 70%;
        padding: 0;
      transform: translate(0px, -140px) !important;
    }
    #workdetail .bl-tri {
    width: 50vw;
    height: 45vw;
}
}

@media screen and (max-height: 768px) and (max-width: 1420px) {
    #workdetail a.btn-red {
        right: 0vw !important;
    }

    #workdetail #cont-info-vid {
        width: 60%;
        padding: 0;
        transform: translate(-50px, -120px);
    }

    .safari #workdetail #cont-info-vid {
        width: 60%;
        padding: 0;
        transform: translate(-40px, -80px);
    }
}
#service * {
    transform: translate3d(0, 0, 0);
}

/* === BRAND CARROUSEL == */

#service .customer-logos img {
    width: auto;
    max-width: 60%;
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
}


/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

button.slick-prev.slick-arrow {
    width: 40px;
    height: 40px;
    background-image: url('/zubi/common/arrow-l-b.png');
    background-color: #0000;
    border: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 1%;
    bottom: 0;
    top: 0;
    margin: auto 0;
    cursor: pointer;
    z-index: 20;
}

button.slick-next.slick-arrow {
    width: 40px;
    height: 40px;
    background-image: url('/zubi/common/arrow-r-b.png');
    background-color: #0000;
    border: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto 0;
    right: 1%;
    cursor: pointer;
}

@media screen and (max-width: 980px) {}

@media screen and (max-width: 480px) {}

/* === // BRAND CARROUSEL == */



#service .box {
    background-repeat: no-repeat;
}

#service .box:after,
.careers .box.c:after {
    content: '';
    display: block;
    padding-bottom: 50%;
}

#service .box.b:after {
    content: '';
    display: block;
    padding-bottom: 35.5%;
}

#service .box.b5 {
    position: relative;
    background-size: 100% 100%;
    background-position: center;
}

#service .box.b6 {
    position: relative;
    background-size: 100% 100% !important;
    background-position: center;
}

#service .box .box-info {
    color: #707070;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    padding: 20px;
    box-sizing: content-box;
}

#service .box .box-info.d p {
    color: #fff;
    width: 70%;
    margin: 0 auto;
    line-height: 1.8em;
    text-align: center;
    font-size: 1.6em;
    font-weight: 100;
}

#service .box-info.white {
    color: #323232 !important;
    font-size: 3em;
    width: 80% !important;
    margin: 0 auto;
}

#service .box-info.black {
    color: #fff !important;
    font-size: 2em;
    width: 60% !important;
    margin: 0 auto;
}

#service .box .box-info h4 {
    width: 70%;
    margin: 0 auto;
    font-weight: 400;
    font-size: 1em;
}

#service .box.c2 .box-info p {
    width: 80%;
    font-weight: 400;
    margin: 1.2em auto;
    font-size: 13px;
    line-height: 22px;
}

#service .box .box-info p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
    max-height: 100%;
    overflow: hidden;
}

#service #sec-separador {
    width: calc(100vw - 3vw);
    height: 20vh;
    background: #b51f32;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}

#service #sec-separador .btn {
    width: 290px;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px;
    color: #b51e31;
    background: #fff;
}


#service .box.tri-1 {
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out, background-color .2s ease-out .8s;
}

.ready #service .box.tri-1 {
    transform: translate3d(0, 0, 0);
    background-color: #f4831f;
}


#service .sqr-a {
    background-position: -60em -60em;
    background-size: cover;
    transition: background-position .4s ease-out;
}

#service .sqr-a.go {
    background-position: 0 0;
}

#service .sqr-b {
    background-position: 60em 60em;
    background-size: 100% 100%;
    transition: background-position .4s ease-out;
}

#service .sqr-b.go {
    background-position: 0 0;
}


#service .sqr-c {
    background-position: 60em -60em;
    background-size: 100% 100%;
    transition: background-position .4s ease-out;
}

#service .sqr-c.go {
    background-position: 0 0;
}



#service .box .tri-1-b {
    width: 100%;
    background-size: 101% 101%;
    background-position: bottom;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
    background-repeat: no-repeat;

    opacity: 0;
    z-index: 100;


    transform-origin: 0 50%;
    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transition: transform .4s ease-out .4s;
}

.ready #service .tri-1-b {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
}


#service .box .tri-1-b h2 {
    transition: opacity .4s ease-out 1s, margin-right .4s ease-out 1s;
    opacity: 0;
    margin-right: 6%;
}

#service .box .tri-1-b.go h2 {
    opacity: 1;
    margin-right: 0;
}




#service .box.b2 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position-x: -60em;
    transition: background-position-x .4s ease-out .6s;
}

#service .box.b2.go {
    background-position-x: 0;
    background-size: cover;
}

#service .box.b3 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position: 0 -60em;
    background-size: cover;
    image-rendering: auto;
    transition: background-position .4s ease-out .6s;
}

#service .box.b3.go {
    background-position: center;
}





#service .box.b4 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;


    background-position: 60em 0;
    background-size: cover;
    transition: background-position .4s ease-out .8s;
}

#service .box.b4.go {
    background-position: 0 0;
}


#service .b8.sqr-a {
    background-position: -120em -60em;
}

#service .b8.sqr-a.go {
    background-position: 0 0;
}


#service .box.b6 {
    position: relative;
    background-position: center;
    display: flex;


    background-position: -60em 0;
    background-size: cover;
    transition: background-position .4s ease-out .8s;
}

#service .box.go.b6 {
    background-position: bottom;
    background-size: 105% 105% !important;
}

#service .box.b7 {
    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;


    background-position: 60em 0;
    background-size: cover;
    transition: background-position .4s ease-out .2s;
}

#service .box.b7.go {
    background-position: 0 0;
}


#service .cont-grid .box.b9 {
    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position: -60em 0;
    background-size: cover;
    transition: background-position .4s ease-out .2s;
}

#service .cont-grid .box.b9.go {
    background-position: 0 0;
}

#service .cont-grid .box:nth-child(10) {
    position: relative;
    transition: .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;
}

#service .box .ico-social {
    position: absolute;
    bottom: -4px;
    right: 0;
}

#service .box:nth-child(4) {
    justify-content: center;
    flex-direction: column;
}

#service .box:nth-child(4) p {
    width: 50%;
    margin: 0 auto;
    right: 0;
    left: 0;
    bottom: auto;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
}

#service .sec-separador {
    width: calc(100vw - 2.5vw);
    background-size: 100% 100% !important;
    display: flex;
}

#service .sec-separador.sec-brands {

    transition: background .3s ease-out .3s;
}

#service .sec-separador.sec-brands.go {
    background: #9f9f9f;
}

#service .sec-separador .box-info {
    width: calc(100vw - 2.5vw);
    height: 100%;
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#service .sec-separador p {
    width: 50%;
    color: #333;
    font-size: 3em;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

#service .sec-separador-2 {
    width: calc(100vw - 2.5vw);
    display: flex;
    flex-wrap: wrap;
}

#service .sec-separador-2 .c1 {
    background-image: url("/zubi/service/07.png");
}

#service .sec-separador-2 .c2 {
    background-image: url("/zubi/service/08.png");
}

#service .sec-separador-2 .c3 {
    background-image: url("/zubi/service/09.png");
}

#service .sec-separador-2 .c4 {
    background-image: url("/zubi/service/10.png");
}


#service .sec-separador-2 span {
    font-size: 3em;
    font-weight: 200;
    text-transform: uppercase;
    height: fit-content;
    top: 0;
    bottom: 0;
    margin: auto;

    opacity: 0;
    transition: opacity .4s ease-out .4s;
}

#service .sec-separador-2.go span {
    opacity: 1;
}

#service .sec-separador-2 .c1,
#service .sec-separador-2 .c2,
#service .sec-separador-2 .c3,
#service .sec-separador-2 .c4 {
    background-size: cover;
    transition: background-position .4s ease-out;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: initial;
}

#service .sec-separador-2 .c1 {
    background-position: -60em 0;
}

#service .sec-separador-2 .c2 {
    background-position: 60em 0;
}

#service .sec-separador-2 .c3 {
    background-position: -60em 0;
}

#service .sec-separador-2 .c4 {
    background-position: 60em 0;
}

#service .sec-separador-2 .c1.go {
    background-position: 0 0;
}

#service .sec-separador-2 .c2.go {
    background-position: 0 0;
}

#service .sec-separador-2 .c3.go {
    background-position: 0 0;
}

#service .sec-separador-2 .c4.go {
    background-position: 0 0;
}


#service .sec-symbols {
    width: calc(100vw - 2.5vw);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#service .sec-symbols div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#service .sec-symbols .box {
    flex: 1 0 calc(16% - 10px) !important;

    flex-basis: calc(16% - 10px);

    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
}

#service .sec-symbols .box span {
    text-align: center;
    bottom: 1em;
    position: relative;
    font-size: 1.7em;
    font-weight: 100;
    text-transform: uppercase;
}

#service .sec-symbols .box span.b {
    color: #000;
}

#service .sec-symbols .box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

#service .sec-symbols div {
    background-size: cover;
    background-repeat: no-repeat;
}

#service .sec-symbols .i1 {
    background-image: url("/zubi/service/11-.jpg");
}

#service .sec-symbols .i2 {
    background-image: url("/zubi/service/12-.jpg");
}

#service .sec-symbols .i3 {
    background-image: url("/zubi/service/13-.jpg");
}

#service .sec-symbols .i4 {
    background-image: url("/zubi/service/14-.jpg");
}

#service .sec-symbols .i5 {
    background-image: url("/zubi/service/15-.jpg");
}

#service .sec-symbols .i6 {
    background-image: url("/zubi/service/16-.jpg");
}

#service .sec-symbols .i7 {
    background-image: url("/zubi/service/17-.jpg");
}

#service .sec-symbols .i8 {
    background-image: url("/zubi/service/18-.jpg");
}

#service .sec-symbols .i9 {
    background-image: url("/zubi/service/19-.jpg");
}

#service .sec-symbols .i10 {
    background-image: url("/zubi/service/20-.jpg");
}

#service .sec-symbols .i11 {
    background-image: url("/zubi/service/21-.jpg");
}

#service .sec-symbols .i12 {
    background-image: url("/zubi/service/22-.jpg");
}



#service .sec-symbols div div {
    transition: background-position .4s ease-out;
}

#service .sec-symbols div div:nth-child(even) {
    background-position: -60em 0;
}

#service .sec-symbols div div:nth-child(odd) {
    background-position: 60em 0;
}

#service .sec-symbols div div.go {
    background-position: center;
}

#service .sec-symbols div div span {
    transition: transform .4s ease-out .4s, opacity .4s ease-out .4s;
    transform: translateY(1em);
    opacity: 0;
}

#service .sec-symbols div div.go span {
    opacity: 1;
    transform: translateY(0);
}

#service .sec-symbols div div.go span {
    background-position: 0 0;
}




#service .sec-separador:after,
.service .sec-separador-2:after {
    content: '';
    display: block;
    padding-bottom: 25%;
}





.ready #service .cont-grid .box:nth-child(5) {
    background-image: url("/zubi/int/careers/bg-tri.png");
}

.ready #service .cont-grid .box.b6 {
    background-image: url("/zubi/int/careers/bg-tri.png");
}

.ready #service .box.tri-1 {
    background-image: url("/zubi/service/tri-or-1.png");
}

.ready #service .box .tri-1-b {
    background-image: url("/zubi/service/tri-or-2.png");
}

.ready #service .cont-grid .box:nth-child(2) {
    background-image: url("/zubi/service/Awards_1.png");
}

.ready #service .cont-grid .box:nth-child(3) {
    background-image: url("/zubi/service/Ford_serv.png");
}

.ready #service .cont-grid .box:nth-child(4) {
    background-image: url("/zubi/service/Chase_serv.png");
}

.ready #service .cont-grid .box.b6 {
    background-image: url("/zubi/service/Tere_Zubi_HOF_serv.png");
}

.ready #service .cont-grid .box.b7 {
    background-image: url("/zubi/service/Lincoln_Badge_serv.png");
}

.ready #service .cont-grid .box:nth-child(8) {
    background-image: url("/zubi/service/Awards2_serv.png");
}

.ready #service .cont-grid .box.b9 {
    background-image: url("/zubi/service/Layer43_serv.png");
}

.ready #service .cont-grid .box:nth-child(10) {
    background-image: url("/zubi/service/09.png");
}

.ready #service .sec-separador-3 .box.a {
    background-image: url("/zubi/service/bg-mosaic-a.png") !important;
}

.ready #service .sec-separador-3 .box.b {
    background-image: url("/zubi/service/bg-mosaic-b.png") !important;
}



#service .box-info.white {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out 1s, transform .4s ease-out 1s;
    transform: translateY(.6em);
}

#service .box-info.white.go {
    opacity: 1;
    transform: translateY(0);
}

#service .box .box-info.d p {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out 1s, transform .4s ease-out 1s;
    transform: translateY(.6em);
}

#service .box .box-info.d.go p {
    opacity: 1;
    transform: translateY(0);
}


#service .box-info.black {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out .4s, transform .4s ease-out .4s;
    transform: translateY(1em);
}

#service .box-info.black.go {
    opacity: 1;
    transform: translateY(0);
}


#service .sec-separador {
    background-repeat: no-repeat;
    transition: background-position-y .6s ease-out .8s;
}

#service .sec-brands .c1 {
    background-image: url("/zubi/service/serv_bg_logos_02.png") !important;
}

#service .sec-brands .c2 {
    background-image: url("/zubi/service/serv_bg_logos_04.png") !important;
}

#service .sec-separador .c1 {
    background-image: url("/zubi/service/bg-lg-tri.png");
}

#service .sec-separador .c2 {
    background-image: url("/zubi/service/bg-lg-tri-b2.png");
}


#service .sec-separador .box-info {
    opacity: 0;
    transition: opacity .4s ease-out .2s, transform .4s ease-out .2s;
    transform: translateY(2em);

}

#service .sec-separador .box-info.go {
    opacity: 1;
    transform: translateY(0);
}

#service .sec-separador p {
    margin: 0 auto;
    position: relative;
}


#service .sec-separador-2 {
    background-repeat: no-repeat;
    background-position-y: -100vw;
    -webkit-transition: background-position-y .6s ease-out .8s;
    transition: background-position-y .6s ease-out .8s;
}

#service .sec-separador-2.go {
    background-position-y: 0vw;
}



.ready #service .position-nav {
    /*left: -4em !important;*/
}



@media screen and (max-width: 1680px) {

    #service .sec-separador,
    #service .sec-separador-2.go,
    #service .sec-symbols {
        width: calc(100vw - 3vw);
    }

    #service .sec-separador .box-info {
        width: calc(100vw - 3.5vw);
    }



}

@media only screen and (max-device-width: 1440px) and (max-device-height: 1050px) {

    #service .sec-separador,
    #service .sec-separador-2.go,
    #service .sec-symbols {
        width: calc(100vw - 3.5vw);
    }

    #service .sec-separador .box-info {
        width: calc(100vw - 3.5vw);
    }

    .ready #service .position-nav {
        left: -5em !important;
        top: 25vh !important;
    }
}

@media screen and (max-width: 1280px) {
    #service .box:after {
        content: '';
        display: block;
        padding-bottom: 90%;
    }

    #service .box:after {
        padding-bottom: 100% !important;
    }

    #service .box.lg:after {
        padding-bottom: 50% !important;
    }

    #service .box-info.white {
        font-size: 2.5em;
        width: 50% !important;
        box-sizing: content-box;
    }

    #service .box .box-info.d p {
        width: 80%;
        line-height: 1.8em;
        max-height: 80%;
        font-size: 1.4em;
    }

    #service .box .box-info {
        width: 100%;
        padding: 20px;
        box-sizing: content-box;
    }

    #service .box-info.black {
        color: #fff !important;
        font-size: 2em;
        width: 80% !important;
        margin: 0 auto;
    }

    #service .sec-separador.a .box,
    #service .sec-separador.b .box {
        flex: 1 0 calc(25% - 10px) !important;

        flex-basis: calc(25% - 10px);
    }

    #service .sec-separador-2 .box {
        flex: 1 0 calc(25% - 10px);

        flex-basis: calc(25% - 10px);
    }

    #service .sec-separador,
    #service .sec-separador-2.go,
    #service .sec-symbols {
        width: calc(100% - 5em);
    }

    #service .sec-separador .box-info {
        width: calc(100% - 5em);
    }
}

@media screen and (max-width: 980px) {

    #service .sec-separador,
    .service .sec-separador-2,
    .service .sec-separador-3 {
        width: calc(100vw - 0px) !important;
    }

    #service .sec-separador .box-info {
        width: calc(100vw - 0vw);
    }

    #service .sec-separador-3 {
        flex-direction: column;
    }

    #service .sec-separador-3 .box:after {
        content: '';
        display: block;
        padding-bottom: 65%;
    }

    #service .box.c {
        flex: 1 0 calc(50% - 10px);

        flex-basis: calc(50% - 10px);
    }

    #service .cont-grid .box:nth-child(4) {
        display: none;
    }

    #service .box {
        flex: 1 0 calc(50% - 10px) !important;

        flex-basis: calc(50% - 10px);

    }

    #service .box.black {
        flex: 1 0 calc(100% - 10px) !important;

        flex-basis: calc(100% - 10px);
    }

    #service .sec-symbols .box {
        flex: 1 0 calc(33% - 10px) !important;

        flex-basis: calc(33% - 10px);
    }

}

@media screen and (max-width: 868px) {
    #service .sec-symbols {
        width: calc(100vw - 0vw);
    }
}

@media screen and (max-width: 580px) {
    .ready #service .box.tri-1 {
        background-size: 103% 103%;
    }

    /* === BRAND CARROUSEL == */
    #service .sec-separador.a .box,
    #service .sec-separador.b .box {
        flex: 1 0 calc(54% - 10px) !important;
        flex-basis: calc(54% - 10px);
    }

    #service .customer-logos .slide img {
        width: auto;
        max-width: 100%;
    }

    button.slick-next.slick-arrow,
    button.slick-prev.slick-arrow {
        width: 10px;
        height: 20px;
    }

    /* === // BRAND CARROUSEL == */

    #service .box .tri-1-b h2 {
        font-size: 1.8em;
    }

    #service .box .box-info.d p {
        width: 100%;
        line-height: 1.5em;
        max-height: 100%;
        font-size: 1.4em;
    }

    #service .box.c2 {
        flex: 1 0 calc(100% - 10px) !important;

        flex-basis: calc(100% - 10px);


        background-size: 100% 100% !important;
    }

    #service .sec-separador-2 .box.c2 {
        flex: 1 0 calc(50% - 10px) !important;
        background-size: 100% 100% !important;
    }

    #service .box.b9 {
        background-size: 100% 100% !important;
    }

    #service .sec-separador p {
        width: 80%;
        font-size: 2em;
    }

    #service .sec-symbols .box span {
        font-size: 1em;
        bottom: .5em;
    }

    #service .sec-separador .box-info {
        width: calc(100vw - 0vw);
    }

    #service .sec-separador-2 span {
        font-size: 1.8em;
    }
}


@media screen and (max-width: 480px) {

    #service .box:nth-child(2),
    #service .box:nth-child(3),
    #service .box:nth-child(5),
    #service .box.b6,
    #service .box.b7 {
        width: 50%;
    }

    #service .box-info.white {
        font-size: 1.7em;
        width: 100% !important;
    }

    #service .box .box-info.d p {
        font-size: 1.2em;
    }

    #service .box .box-info h4 {
        font-weight: 400;
        font-size: .9em;
    }

    #service .box.c2 .box-info p {
        width: 100%;
    }

    #service .sec-separador-3 .box.b {
        background-size: 100% auto !important;
        width: 100%;
    }
}
/* ============ IE-EDGE People ================= */
.edge #people .sec-leaders .sub-box {
    position: absolute !important;
    right: 0 !important;
}

/* ============ //IE-EDGE People ================= */



/* ============ People ================= */

#people * {
    transform: translate3d(0, 0, 0);
}

body.people {
    background-color: #fff;
}

/*.ready #people .position-nav {
    left: -5em;
}*/

/* MODAL VIDEO */
.box-text button {
    padding: 10px 50px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
    border: 0px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

.box-text button:hover {
    background-color: #000;
}

#people .modal-vid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
    z-index: 100000;

    transform: translateX(-120vw);
    transition: transform .5s, opacity .5s;
    opacity: 0;
}

#people .modal-vid.on {
    transform: translateX(0vw);
    opacity: 1;
}

#people .modal-vid .cross {
    width: 30px;
    height: 30px;
    top: 4vh;
    right: 4vw;
    cursor: pointer;
    position: fixed;
    z-index: 10;
    background-size: cover;
    background-image: url(/zubi/common/cross.png);
}

#people .modal-vid .cont-modal-vid {
    width: 75vw;
    opacity: 0;
    transition: opacity .5s ease .8s;
}

#people .modal-vid.on .cont-modal-vid {
    opacity: 1;
}

#people .modal-vid video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    width: 110%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

/* //  MODAL VIDEO */




#people .box.tri-1 {
    background-size: 110% 110%;
}

#people .box.tri-1.mob {
    display: none;
}

#people .box .tri-1-b {
    width: 100%;
    background-size: 101% 101%;
    background-position: bottom;
    display: flex;
    flex-direction: row-reverse;
    text-align: right;
}



#people .box {
    background-size: cover;
    background-repeat: no-repeat;
}

#people .box:after {
    content: '';
    display: block;
    padding-bottom: 50%;
}

#people .box.b2 {
    position: relative;
    background-position: center;
    display: flex;
    flex-direction: row-reverse;
}

#people .box:nth-child(5) {
    position: relative;
    background-position: center;

    transition: background-color .4s;
    display: flex;
    background-size: 100% 100.5%;
    color: #333;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 20px;

    background-repeat: no-repeat;
    background-position: 100em 100em;

    transition: background-position .6s ease-out .6s;
}

#people .box.go:nth-child(5) {
    background-position: 0 0;
}


#people .box:nth-child(6) {
    position: relative;
    background-position: center;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
    display: flex;
    flex-direction: row-reverse;
}

#people .cont-grid .box-fw {
    width: 100vw;
    display: inline-block;
    flex-flow: row;
    background-size: cover;
    background-position: center;

}

#people .box-text {
    width: 95.8%;
    transition: opacity .8s ease-out .8s, transform .4s ease-out .8s;
    position: absolute;
    opacity: 0;
    top: 35%;
    transform: translateY(2em);


}

#people .box-text.go {
    opacity: 1;
    transform: translateY(0);


}

#people .box-text h3 {
    font-size: 1.8em;
    font-weight: 400;
}

#people .box-text p {
    width: 40%;
    margin: 2em auto;
    text-align: center;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.6em;
}

#people .cont-grid .box-fw .box.c {
    width: 50%;
    height: 50vh;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: row-reverse;

    background-repeat: no-repeat;
    background-position: 0 -60em;
    transition: background-position .4s ease-out .4s;
}

#people .cont-grid .box-fw .box.c.go {
    background-position: 0 0;

}

#people .cont-grid .box-cont {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: row column;
}

#people .cont-grid .box-cont .box-col {
    flex: 25vw 1 0;
    background-size: contain;
    background-repeat: no-repeat;

}

#people .sec-leaders {
    width: 100vw;
    display: flex;
}

#people .sec-leaders .box:after {
    padding-bottom: 65%;
}

#people .sec-leaders .col-detail {
    flex: 25% 0 0;
    display: flex;
    flex-flow: column;
}

#people .sqr-a {
    background-position: -60em -60em;
    background-size: cover;
    transition: background-position .4s ease-out;
}

#people .sqr-a.go {
    background-position: 0 0;
}

#people .sqr-b {
    background-position: 60em 60em;
    background-size: 100% 100%;
    transition: background-position .4s ease-out;
}

#people .sqr-b.go {
    background-position: 0 0;
}

#people .sec-leaders .col-detail :nth-child(2).box {
    background-size: cover;
}

#people .sec-leaders .col-detail .box-info {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}

#people .sec-leaders .d1,
#people .sec-leaders .d2,
#people .sec-leaders .d3,
#people .sec-leaders .d4,
#people .sec-leaders .d5,
#people .sec-leaders .d6,
#people .sec-leaders .d7,
#people .sec-leaders .d8,
#people .sec-leaders .d9 {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
}

.ready #people .sec-leaders .d7 {
    background-image: none;
}

#people .sec-leaders .col-detail .box-info p {
    color: #9e9e9e;
    width: 80%;
    text-align: center;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.8em;
    margin: 0 auto;
}


#people .sec-leaders .col-detail .leader-off {
    display: none;
}

#people .sec-leaders .quote.mob {
    display: none;
}

#people .sec-leaders .quote {
    font-size: 3em;
    font-weight: 100;
    color: #333;
    width: 20vw;
    line-height: 1.2em;
    text-transform: uppercase;
}

#people .sec-leaders .d1 .quote {
    width: 25%;
    text-align: right;
    right: 25%;
    top: 45%;
    position: absolute;

}

#people .sec-leaders .d2 .quote {
    width: 18%;
    text-align: left;
    right: 14%;
    top: 50%;
    position: absolute;
}

#people .sec-leaders .d3 .quote {
    width: 15vw;
    text-align: right;
    left: 15%;
    top: 50%;
    position: absolute;
}

#people .sec-leaders .d4 .quote {
    width: 14.5%;
    text-align: right;
    left: 8%;
    top: 25%;
    position: absolute;
}

#people .sec-leaders .d5 .quote {
    width: 23.5%;
    text-align: center;
    left: 12%;
    top: 50%;
    position: absolute;
}

#people .sec-leaders .d6 .quote {
    width: 22%;
    text-align: center;
    right: 10%;
    top: 45%;
    position: absolute;
}

#people .sec-leaders .d7 .quote {
    width: 25%;
    text-align: left;
    left: 4%;
    top: 50%;
    position: absolute;
}

#people .sec-leaders .d8 .quote {
    width: 22%;
    text-align: left;
    right: 10%;
    top: 45%;
    position: absolute;
}

#people .sec-leaders .d9 .quote {
    width: 25%;
    text-align: center;
    left: 12%;
    top: 50%;
    position: absolute;
    color: #fff;
}

#people .sec-leaders .sub-box {
    width: 18vw;
    height: 18vw;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
}

#people .sec-leaders .sub-box.b {
    width: 18vw;
    height: 18vw;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 0;
}

#people .sec-leaders .box-info {
    padding: 8%;
    box-sizing: content-box;
    width: 50%;

    transition: opacity .4s ease-out .4s, transform .4s ease-out .4s;
    opacity: 0;
    transform: translateX(2em);

}

#people .sec-leaders .sub-box .box-info.go {
    opacity: 1;
    transform: translateX(0);
}

#people .sec-leaders .sub-box .box-info h3 {
    text-transform: uppercase;
    text-align: right;
    font-size: 2.5em;
    font-weight: 100;
    width: 90%;
    float: right;
}

#people .d3 .box-info h3,
#people .d3 .box-info p,
#people .d5 .box-info h3,
#people .d5 .box-info p {
    text-align: left !important;
}

#people .sec-leaders .box-info p {
    text-align: right;
    width: auto;
    float: right;
    margin-top: 1em;
    font-weight: 200;
}

#people .sec-leaders .d3 .box-info h3,
#people .sec-leaders .d5 .box-info h3,
#people .sec-leaders .d7 .box-info h3,
#people .sec-leaders .d9 .box-info h3 {
    text-align: left;
    font-size: 2.5em;
    font-weight: 100;
    width: 100%;
    float: left;
}

#people .sec-leaders .d4 .box-info h3 {
    width: 90%;
}

#people .sec-leaders .d3 .box-info p,
#people .sec-leaders .d5 .box-info p,
#people .sec-leaders .d7 .box-info p,
#people .sec-leaders .d9 .box-info p {
    text-align: left;
    font-weight: 100;
    width: 80%;
    float: left;
}

#people .sec-leaders .d2 .box-info p,
#people .sec-leaders .d4 .box-info p,
#people .sec-leaders .d6 .box-info p {
    width: 50%;
}

#people .box.tri-1 {
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out, background-color .2s ease-out .8s;
}

.ready #people .box.tri-1 {
    transform: translate3d(0, 0, 0);
    /* background-color: #edc600; */
}

#people .box .tri-1-b {
    width: 100%;
    background-size: 102% 102%;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
    background-repeat: no-repeat;

    transform-origin: 0 50%;
    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transition: transform .4s ease-out .4s;

}

.ready #people .box .tri-1-b {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
}

#people .box .tri-1-b h2 {
    transition: opacity .4s ease-out 1s, margin-right .4s ease-out 1s;
    opacity: 0;
    margin-right: 6%;
}

#people .box .tri-1-b.go h2 {
    opacity: 1;
    margin-right: 0;
}


#people .box.b2 {
    background-position-x: -60em;
    transition: background-position-x .4s ease-out .1s;
}

#people .box.b2.go {
    background-position-x: 0;
    background-size: cover;
}

#people .box.b3 {

    background-position: 0 -60em;
    background-size: cover;
    image-rendering: auto;
    transition: background-position .4s ease-out .1s;
}

#people .box.b3.go {
    background-position: 0 0;
}

#people .box.b4 {
    background-position: 60em 0;
    background-size: cover;
    transition: background-position .4s ease-out .3s;
}

#people .box.b4.go {
    background-position: 0 0;
}


#people .box:nth-child(6) {
    background-position: -60em 0;
    background-size: cover;
    transition: background-position .4s ease-out .3s;
}

#people .box.go:nth-child(6) {
    background-position: 0 0;

}

#people .cont-grid .box-fw {
    background-repeat: no-repeat;
    background-size: 128%;
    background-position: 50% -80em;
    transition: background-position .4s ease-out .4s;
}

#people .cont-grid .box-fw.go {
    opacity: 1;
    background-position: 50% 50%;

}


#people .sec-leaders .col-detail .box-info {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out .6s, transform .4s ease-out .6s;
    transform: translateY(2em);
}

#people .sec-leaders .col-detail .box-info.go {
    opacity: 1;
    transform: translateY(0);

}

#people .sec-leaders .d1,
#people .sec-leaders .d2,
#people .sec-leaders .d3,
#people .sec-leaders .d4,
#people .sec-leaders .d5,
#people .sec-leaders .d6,
#people .sec-leaders .d7,
#people .sec-leaders .d8,
#people .sec-leaders .d9 {
    background-repeat: no-repeat;
    background-position: 0 50%;
    transition: background-position .6s ease-out;
}

#people .sec-leaders .d1 {
    background-position: 100vw 50%;
}

#people .sec-leaders .d2 {
    background-position: -100vw 50%;
}

#people .sec-leaders .d3 {
    background-position: 100vw 50%;
}

#people .sec-leaders .d4 {
    background-position: -100vw 50%;
}

#people .sec-leaders .d5 {
    background-position: 100vw 50%;
}

#people .sec-leaders .d6 {
    background-position: -100vw 50%;
}

#people .sec-leaders .d7 {
    background-position: 100vw 50%;
}

#people .sec-leaders .d8 {
    background-position: -100vw 50%;
}

#people .sec-leaders .d9 {
    background-position: 100vw 50%;
}



#people .sec-leaders .d1.go,
#people .sec-leaders .d2.go,
#people .sec-leaders .d3.go,
#people .sec-leaders .d4.go,
#people .sec-leaders .d5.go,
#people .sec-leaders .d6.go,
#people .sec-leaders .d7.go,
#people .sec-leaders .d8.go,
#people .sec-leaders .d9.go {
    background-position: 0 50%;
}

#people .sec-leaders .d1.go {
    background-size: 120%;
    background-position: right;
}

#people .sec-leaders .quote {
    opacity: 0;
    position: relative;
    transform: translateY(1em);
    transition: opacity .4s ease-out .6s, transform .4s ease-out .6s;
}

#people .sec-leaders .quote.go {
    opacity: 1;
    transform: translateY(0);
}


#people .sec-leaders .box.tri-1 {
    transition: background-position .4s ease-out .3s;
    background-position: -30vw -30vw;
}

#people .sec-leaders .box.tri-1.go {
    background-position: 0 0;
}

#people .sec-leaders .box .tri-1-b {


    transform-origin: 0 50%;
    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transition: transform .4s ease-out .4s;
}

#people .sec-leaders .box .tri-1-b.go {
    transform: translateY(0) translateX(0) rotate(0);
}

#people .sec-leaders .sub-box {
    transform-origin: 100% 100%;
    transform: rotate(-135deg);
    transition: transform .3s ease-out;
}

#people .sec-leaders .sub-box.b {
    transform-origin: 0 100%;
    transform: rotate(135deg);
}

#people .sec-leaders .sub-box.go {
    transform: rotate(0);
}

.ready #people .box.tri-1 {
    background-image: url("/zubi/people/tri-ye.png");
}

.ready #people .box .tri-1-b {
    background-image: url("/zubi/people/tri-ye-b.png");
}

.ready #people .box {
    background-image: url('/zubi/people/tri-grey-b2.png');
}

.ready #people .box.b2 {
    background-image: url("/zubi/people/01.jpg");
}

.ready #people .box.b3 {
    background-image: url("/zubi/people/02.jpg");
}

.ready #people .box.b4 {
    background-image: url("/zubi/people/03.jpg");
}

.ready #people .box:nth-child(5) {
    background-image: url("/zubi/people/tri-grey-b.png");
}

.ready #people .box:nth-child(6) {
    background-image: url("/zubi/people/05.jpg");
}


.ready #people .cont-grid .box-fw {
    background-image: url("/zubi/people/people6.jpg");
}

.ready #people .cont-grid .box-fw .box.c {
    background-image: url("/zubi/people/04.jpg");
}

.ready #people .cont-grid .box-cont .box-col {
    background-image: url("/zubi/skin/int/bg_tricube.png");
}

.ready #people .sec-leaders .col-detail .box:nth-child(3) {
    background-image: url("/zubi/people/bg_black1.png");
}

.ready #people .sec-leaders .sub-box {
    background-image: url("/zubi/people/tri-d.png");
}

.ready #people .sec-leaders .sub-box.b {
    background-image: url("/zubi/people/tri-d2.png");
}


.sec-leaders .box.sqr-b.gray.fx.go {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.sec-leaders .box.gray h3 {
    font-size: 2.5em;
    font-weight: 100;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}




/* ============ QUOTE POSITION CMS ================= */
#people .q-right {
    right: 10%;
    text-align: right !important;
    left: initial !important;
}

#people .q-left {
    left: 10%;
    text-align: left !important;
    right: initial !important;
}

#people .q-top {
    top: 20% !important;
}

#people .q-bottom {
    bottom: 20% !important;
    display: flex;
    flex-direction: column-reverse;
}

/* ============ @Media screens #people ================= */
@media screen and (max-width: 1680px) {
    #people .box.tri-1 {
        background-color: #fffffa;
        background-size: 120% 120%;
    }

    #people .sec-leaders .d2 .quote {
        width: 25% !important;
    }
}

@media screen and (max-width: 1580px) {


    #people .sec-leaders .sub-box {
        width: 33.3%;
        height: 50%;
    }

    #people .sec-leaders .box-info {
        width: 50%;
        padding-right: 10%;
    }

    #people .sec-leaders .box-info h3 {
        width: 60%;
    }

    #people .sec-leaders .d1 .quote {
        width: 28%;
        right: 15%;
        top: 45%;
    }

    #people .sec-leaders .d2 .quote {
        width: 22.5%;
        right: 5%;
    }

    #people .sec-leaders .d4 .quote {
        width: 22%;
        right: 5%;
    }

    #people .sec-leaders .d6 .quote {
        width: 28%;
        right: 4%;
    }

    #people .sec-leaders .col-detail .box-info p {
        width: 80%;
        max-height: 20em;
        overflow: hidden;
    }

    #people .box.b3.go,
    #people .sec-leaders.a .d1.go,
    #people .sec-leaders.b .d2.go,
    #people .sec-leaders.c .d3.go,
    #people .sec-leaders.d .d4.go,
    #people .sec-leaders.e .d5.go,
    #people .sec-leaders.f .d6.go {
        background-size: cover;
        background-position: 50% 50%;
    }

}

@media screen and (max-width: 1380px) {
    #people .box-text p {
        width: 90%;
    }

    #people .sec-leaders .col-detail {
        flex: 33.3% 0 0;
    }

    #people .cont-grid .box-fw .box-text {
        width: 33.3%;
        height: 33vh;
    }


    #people .sec-leaders .box:after {
        padding-bottom: 90%;
    }

    #people .sec-leaders .box-info {
        padding-right: 10%;
        box-sizing: content-box;
        width: 50%;
    }

    #people .sec-leaders .sub-box {
        width: 50%;
        height: 50%;
    }

    #people .sec-leaders .sub-box.b {
        width: 50%;
        height: 50%;
    }

    #people .sec-leaders .quote {
        font-size: 2.5em;
    }

    #people .sec-leaders .quote.mob {
        display: none;
    }

    #people .sec-leaders .d1 .quote {
        width: 40%;
    }

    #people .sec-leaders .d2 .quote {
        width: 24%;
        right: 5% !important;
    }

    #people .sec-leaders .d4 .quote {
        width: 20%;
        right: 6%;
        top: 68%;
    }

    #people .sec-leaders .d5 .quote {
        width: 80%;
        text-align: center;
        left: 10%;
        top: 100%;
    }

    #people .sec-leaders .d6 .quote {
        width: 33.3%;
        text-align: center;
        right: 4%;
    }
}

@media screen and (max-width: 1280px) {

    #people .box:after {
        padding-bottom: 100%;
    }

    #people .box.c.tx:after {
        padding-bottom: 50% !important;
    }

    #people .cont-grid .box-fw.go {
        background-size: cover !important;
        background-position: center;
    }
}

@media screen and (max-width: 1024px) {

    #people .cont-grid .box-fw .box.c {
        width: 100%;
        height: 25vh;
    }

    #people .sec-leaders .d2 .quote {
        width: 30% !important;
        text-align: left;
        right: -45% !important;
        top: 20%;
    }

    #people .sec-leaders .d3 .quote {
        text-align: right;
        left: -45%;
        top: 20%;
        width: 40%;
    }

    #people .sec-leaders .d4 .quote {
        width: 30%;
        text-align: right;
        right: -45%;
        top: 20%;
    }

    #people .sec-leaders .d5 .quote {
        width: 90%;
        text-align: center;
        left: -96%;
        top: 48%;
    }

    #people .sec-leaders .d6 .quote {
        width: 40%;
        text-align: center;
        right: -45%;
        top: 20%;
    }

    .t.ios .d2 .quote.fx.q-left.go {
        left: 105% !important;
        top: 2% !important;
    }

    .t.ios .d3 .quote.fx.q-right.go {
        right: 104% !important;
        top: 2% !important;
        text-align: left !important;
    }
}

@media screen and (max-width : 980px) {
    #people .box {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #people .cont-grid .box-fw {
        width: 50%;
    }

    #people .cont-grid .box-fw .box-text {
        width: 100%;
        height: auto;
    }

    #people .sec-leaders .col-detail {
        flex: 50% 0 0;
    }

    #people .sec-leaders .col-detail .box {
        flex: 1 0 calc(33% - 10px);
    }

    #people .box-text p {
        width: 60%;
    }

    #people .cont-grid .box-fw .box.c {
        width: 100%;
    }

    #people .sec-leaders .sub-box {
        width: 100%;
        height: 50%;
    }

    #people .sec-leaders .box-info {
        padding-right: 14%;
        width: 40%;
    }

    #people .sec-leaders .d2 .box-info,
    #people .sec-leaders .d4 .box-info,
    #people .sec-leaders .d6 .box-info {
        padding-right: 10%;
    }

    #people .sec-leaders .d1 .quote.bg {
        width: 100%;
        height: 50%;
        top: 50%;
        right: 0;
        padding: 50% 10% 0 33%;
        background: url("int/people/tri-bg-w.png");
        background-size: 100% 100% !important;
    }

    #people .sec-leaders .sub-box.b {
        width: 100%;
        height: 50%;
    }

    #people .sec-leaders .d2 .quote {
        width: 60%;
        text-align: left;
        right: -70% !important;
        top: 34%;
    }

    #people .sec-leaders .d3 .quote {
        text-align: right;
        left: -92%;
        top: 30%;
        width: 80%;
    }

    #people .sec-leaders .d4 .quote {
        width: 60%;
        text-align: right;
        right: -85%;
        top: 25%;
    }

    #people .sec-leaders .d5 .quote {
        width: 70%;
        text-align: center;
        left: -85%;
        top: 35%;
    }

    #people .sec-leaders .d6 .quote {
        width: 80%;
        text-align: center;
        right: -88%;
        top: 18%;
    }

    #people .cont-grid .box-fw.go {
        background: none;
    }
}

@media screen and (max-width: 780px) {

    #people .sec-leaders .box:after {
        padding-bottom: 100% !important;
    }

    #people .cont-grid .box-fw {
        width: 100%;
    }

    #people .cont-grid .box-fw .box.c {
        width: 100%;
    }

}

@media screen and (max-width : 580px) {

    #people .sec-leaders .d1 {
        background-position: 100vw 50%;
    }

    #people .sec-leaders .d2 {
        background-position: 100vw 50%;
    }

    #people .sec-leaders .d3 {
        background-position: -100vw 50%;
    }

    #people .sec-leaders .d4 {
        background-position: 100vw 50%;
    }

    #people .sec-leaders .d5 {
        background-position: -100vw 50%;
    }

    #people .sec-leaders .d6 {
        background-position: 100vw 50%;
    }


    #people .box:nth-child(5) {
        background-position: 60em 60em;
    }


    #people .box .tri-1-b {
        height: 100%;
    }

    #people .box.tri-1 .tri-1-b.a h2 {
        font-size: 2.5em;
    }

    #people .box .tri-1-b h2 {
        font-size: 3.8em;
        padding: 4% 2%;
    }

    #people .box.tri-1.mob {
        display: inline;
    }

    #people .box-text.go {
        margin: 0 auto;
        left: 0;
        right: 0;
        top: auto;
        bottom: auto;
    }

    #people .box-text p {
        width: 80%;
        margin: 2% auto;
    }

    #people .sec-leaders {
        width: 100vw;
        display: flex;
        flex-direction: column-reverse;
    }

    #people .tri-1.desk {
        display: none;
    }

    #people .sec-leaders .box:after {
        padding-bottom: 100% !important;
    }

    #people .sec-leaders .sub-box {
        width: 50%;
        height: 50%;
    }

    #people .sec-leaders .sub-box.b {
        width: 50%;
        height: 50%;
    }

    #people .quote.mob {
        display: inline;
    }

    #people .sec-leaders .box-info {
        padding: 6%;
    }

    #people .sec-leaders .d2 .box-info,
    #people .sec-leaders .d4 .box-info,
    #people .sec-leaders .d6 .box-info {
        padding-right: 6%;
    }

    #people .sec-leaders .d4 .box-info h3 {
        width: 100%;
    }

    #people .sec-leaders .box-info {
        width: 50%;
    }

    #people .box.gray {
        display: none;
    }

    #people .sec-leaders .quote {
        display: none !important;
    }

    #people .sec-leaders .col-detail .box-info p {
        max-height: 20em;
    }

    #people .sec-leaders .quote.mob {
        width: 90% !important;
        display: inline !important;
        font-size: 2em !important;
        line-height: initial !important;
        font-weight: 400;
        margin-bottom: 1em !important;
    }

}

@media screen and (max-width : 480px) {
    #people .sec-leaders .sub-box {
        width: 50%;
        height: 50%;
    }

    #people .sec-leaders .sub-box.b {
        width: 50%;
        height: 50%;
    }

    #people .box.c.tx:after {
        padding-bottom: 100% !important;
    }

    #people .box-text.go {
        top: auto;
        bottom: auto;
    }

    #people .cont-grid .box-fw .box.c {
        height: 25vh;
    }

    #people .box.mob:after {
        padding-bottom: 82% !important;
    }

    #people .sec-leaders .box-info {
        padding: 4% !important;
        width: 60%;
    }

    #people .sec-leaders .box-info h3 {
        width: 100% !important;
        font-size: 2em !important;
    }

    #people .sec-leaders .d2 .box-info p,
    #people .sec-leaders .d4 .box-info p,
    #people .sec-leaders .d6 .box-info p {
        width: 80%;
    }
}
/* ==================== IE-EDGE Founder ========================= */
.edge #founder .cont2 .big-sec3 .box-text {
    bottom: 0px;
}

.edge .big-tri {
    position: absolute !important;
    right: 0px;
}

.edge #founder .cont2 .big-sec img {
    max-width: 50em;
}

.edge #zubi-type-y.go {
    height: 12em;
}

.edge #founder #rincon {
    top: 8%;
}

/* ==================== Safari Founder ========================= */
.safari #founder .big-tri h3 {
    width: 60%;
}

/* ==================== Founder ========================= */

#founder * {
    transform: translate3d(0, 0, 0);
    /*perspective: 2000;*/
}

.logo {
    -webkit-transition: left .3s ease-out .4s, padding-right .3s ease-out .4s;
    transition: left .3s ease-out .4s, padding-right .3s ease-out .4s;

    position: absolute;
    left: -10em;
    opacity: 0;
}

.ready .logo {
    left: 2.5em;
    top: 2.5em;
    opacity: 1;
}

.big-bg .box .tri-1-b {
    transform-origin: 0 50%;
    transform: translateY(-80px) translateX(-170px) rotate(120deg);

    transition: transform .4s ease-out 0s;
}

.ready .big-bg .box .tri-1-b {
    background-size: 200%;
    transform: translateY(0) translateX(0) rotate(0);
}

.big-bg .box .tri-1-b h2 {
    opacity: 0;
    margin-right: 6%;
}

.ready .big-bg .box .tri-1-b h2 {
    margin-right: 0;
    opacity: 1;
    transition: opacity .8s ease-out .3s, margin-right .8s ease-out .3s;
}

.position-nav {
    /*top: 28vh;*/
    opacity: 0;

    transition: opacity .6s ease-out 2s;

}

.ready .position-nav {
    /*top: 14vw;*/
    opacity: 1;
    /*  left: -2.5em;*/

}


#founder .position-nav {
    /* left: -8em !important;*/
    /*top: 27vh;*/
}

.ready #founder .position-nav {
    /*left: -8em !important;*/
    /*top: 29vh;*/
}

#founder p {
    color: #333;
}

#founder .big-bg {
    filter: saturate(0);
    opacity: 0;
    background-position: left;
    background-size: 115%;
    image-rendering: auto;
    background-attachment: fixed;
    transition: opacity .3s ease-out .2s, filter .8s ease-out .2s, background-size 2s ease-out .2s;
}

.ff #founder .big-bg {
    filter: none !important;
}

.safari #founder .big-bg {
    background-attachment: inherit;
}


#founder #bgtri {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;

    z-index: -1;
    background-size: 200%;
    background-position: 0% -80%;
    transition: background-position .8s ease-out .8s, background-size 1s ease-out .8s;
}

.ready #founder #bgtri {
    background-size: 200%;
    background-position: 0 70%;
    z-index: -1;

    opacity: .5;
}


#founder #bgtri-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-x: 100vw;
    transition: background-position .6s ease-out .6s, background-size 1s ease-out .6s;
}

#founder #bgtri-2.go {
    background-size: 200%;
    background-position: 70% 10%;
    z-index: -1;

    opacity: .8;
}

#founder .big-bg .box.b {
    background: none;
}

#founder .big-bg .box:nth-child(1) {
    background: none;
}

#founder .big-bg .box .tri-1-b {
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row-reverse;
    text-align: right;
}

#founder .big-bg .box .tri-1-b h2 {
    width: 60%;
    height: 100%;
    flex-direction: column-reverse;
    display: flex;
    padding: 0 6% 6% 0;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 4em;
}

#founder .big-bg .box.b {
    background: none;
    display: flex;
    flex-direction: row-reverse;
    transform: initial;
    -webkit-transform: initial;
}

#founder .box.b .big-tri {
    width: 40vw;
    height: 40vw;
    flex: 1 0 calc(100% - 10px);
    position: absolute;
    z-index: 10;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: right;
    padding: 4%;

    opacity: .8;
}

#founder .box.b .big-tri:after {
    content: '';
    display: block;
    padding-bottom: 150%;
}

#founder .big-tri h3 {
    font-size: 3.5em;
    font-weight: 400;
    width: 40%;
    float: right;
}

#founder .cont2 .box {
    z-index: 10;
}

#founder .cont2 .box h3,
#founder .cont2 .big-sec h3 {
    color: #333;
    text-align: center;
    font-size: 1.5em;
    font-weight: 500;
    margin-bottom: 20px;
}

#founder .cont2 .box.b2 {
    flex: 1 0 calc(50% - 10px);
}

#founder .cont2 .box.b2::after {
    padding-bottom: 50%;
}

#founder .cont2 .box.b2 p {
    color: #333;
    font-size: 13px;
    font-weight: 300;
    width: 38%;
    text-align: center;
    line-height: 20px;
    margin: 0 auto;
}

#founder .cont2 .box:nth-child(1) {
    background-size: 0 0 !important;
    transition: background-size .4s ease-out;
    background-position: 0 100%;
    background-repeat: no-repeat;

}

#founder .cont2 .box.go:nth-child(1) {
    background-size: 100% 100% !important;
}

#founder .cont2 .box:nth-child(6) {
    background-size: 0 0 !important;
    transition: background-size .4s ease-out;
    background-position: 0 0;
    background-repeat: no-repeat;
}

#founder .cont2 .box.go:nth-child(6) {
    background-size: 100% 100% !important;
}

#founder .cont2 .big-sec {
    /* width: calc(100vw - 2.5vw);*/
    height: 102vh;
    max-height: 102vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}


#founder #rincon {
    width: 35em;
    height: 35em;
    position: absolute;
    display: -webkit-box;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: 15%;

}

#founder #rincon .logo-rin {
    width: 12em;
    height: 12em;
    position: absolute;
    z-index: 10;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 12em;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("/zubi/founder/el-rincon.png");

    transition: transform .3s ease-out .6s, opacity .3s ease-out .6s;
    transform: scale(.8);
    opacity: 0;
}

#founder #rincon .logo-rin.go {

    transform: scale(1);
    opacity: 1;
}


#founder #rincon .bg-malla {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background-size: 100%;
    background-image: url("/zubi/founder/bg.png");

    transition: transform .4s ease-out .4s, opacity .4s ease-out .4s;
    transform: scale(.6) rotate(90deg);
    opacity: 0;
}

#founder #rincon .bg-malla.go {

    transform: scale(1) rotate(0);
    opacity: 1;

}


#founder #rincon .malla {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    background-size: 100%;
    background-image: url("/zubi/founder/malla.png");

    transition: transform .4s ease-out .4s, opacity .4s ease-out .4s;
    transform: scale(2) rotate(-90deg);
    opacity: 0;
}


#founder #rincon .malla.go {

    transform: scale(1) rotate(0);
    opacity: 1;
}




#founder .cont2 .big-sec p {
    width: 25vw;
    margin: 0 auto;
    text-align: center;
    color: #333;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 20px;

}

#founder .cont2 .big-sec2 {
    width: calc(100vw - 2.5vw);
    height: 90vh;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

    background-attachment: fixed;
}

.safari #founder .cont2 .big-sec2 {
    background-attachment: inherit;
}

#box-tri-y {
    width: 48.8vw;
    height: 100%;
    position: absolute;
}

#tri-y-1 {
    width: 100%;
    height: 80%;
    left: 0;
    position: absolute;
    z-index: 0;
    background-image: url("/zubi/founder/founder-big-tri-y2.png");
    background-repeat: no-repeat;
    background-size: 100%;


    transform: scale(0);
    transform-origin: 50% 0;
    transition: transform .3s ease-out;

}

#tri-y-2 {
    width: 100%;
    height: 80%;
    position: absolute;
    transform-origin: 49.9% 62.4%;

    z-index: 0;
    background-image: url("/zubi/founder/founder-big-tri-y1-2.png");
    background-repeat: no-repeat;
    background-size: 100%;


    transform-origin: 0 0;
    transform: rotate(-180deg) translateX(-50%);
    transition: transform .3s ease-out;


    background-position: left top;
}


.big-sec.go #tri-y-1 {

    transform: scale(1);

}

.big-sec.go #tri-y-2 {
    transform: rotate(-90deg) translateX(-100%);
}


#zubi-type-y {
    width: 50%;
    height: 0;
    bottom: 0;
    right: 6vw;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("/zubi/founder/zubi_type.png");
    z-index: 0;

    transition: transform .6s ease-out, height .6s ease-out;

    transform-origin: 100% 100%;
    transform: scale(1);
    background-position: left top;

}

#zubi-type-y.go {
    filter: grayscale(0%);
    height: 18em;
}

.ff #zubi-type-y.go {
    filter: none !important;
}



#founder .cont2 .big-sec2 img {
    margin: 0 auto;
}

#founder .cont2 .big-sec2 p {
    color: #fff;
    width: 25vw;
    font-weight: 400;
    margin: 20% auto 2em auto;
    text-align: center;
    font-size: 13.5px;
    line-height: 20px;
}


#founder .cont2 .big-sec3 .box {
    flex: inherit;
}

#founder .cont2 .big-sec3 .box.a {
    width: 33%;
    height: 60vh;
    background-size: 100% 100% !important;
}

#founder .cont2 .big-sec3 .box.b {
    width: 33.3%;
    height: 61vh;
    margin-top: 30vh;
    background-size: 100% 100% !important;
    display: flex;
    flex-direction: column-reverse;
}

#founder .cont2 .big-sec3 .white .box-text {
    width: 40%;
    padding: 0 6% 6% 0;
    text-align: left;
    position: absolute;
    left: 2vw;
    top: 3vh;
    color: #333 !important;
    opacity: 0;
    transition: opacity .3s ease-out .6s, transform .3s ease-out .6s;
    transform: translateX(2em);
}

#founder .cont2 .big-sec3 .black .box-text {
    width: 40%;
    padding: 0 6% 6% 0;
    text-align: right;
    position: absolute;
    right: 2vw;
    bottom: 3vh;
    color: #fff !important;
    opacity: 0;
    transition: opacity .3s ease-out .6s, transform .3s ease-out .6s;
    transform: translateX(2em);
}

#founder .cont2 .big-sec3 .black .box-text p {
    color: #fff !important;
}

#founder .cont2 .big-sec3 .box-text.go {
    opacity: 1;
    transform: translateX(0);
}

#founder .cont2 .big-sec3 .box-text h4 {
    width: 100%;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1.8em;
    margin-bottom: 4px;
}

#founder .cont2 .big-sec3 .white .box-text h4 {
    margin-top: 20%;
}

#founder .cont2 .big-sec3 .box-text p {
    font-weight: 100;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 20px;
}

#founder .big-sec2 .btn {
    background: #EDC600;
    color: #333;
    width: 220px;
    height: 40px;
    padding: 10px;
    text-align: center;
    margin: 0 auto;
}

#founder .big-sec2 .btn p {
    width: 100% !important;
    margin: 0 !important;
    left: 0;
    right: 0;
    line-height: inherit !important;
    display: initial;
    font-size: 1.8em;
    font-weight: 700;
    color: #000;
}


.ready #founder .big-bg {
    opacity: 1;
    filter: saturate(1);
    background-size: 100%;
    position: relative;
    height: 100%;
}

.ff .ready #founder .big-bg {
    filter: none !important;
}

#founder .box.b .big-tri {

    transform-origin: 100% 0;
    transform: rotate(-180deg);
    transition: transform .4s ease-out .8s;
}

#founder .box.b .big-tri.go {
    transform: rotate(0deg);
}


#founder .big-tri h3 {
    opacity: 0;
    margin-right: 6%;
    transition: opacity .8s ease-out 1s, margin-right .8s ease-out 1s;
}

#founder .big-tri.go h3 {
    opacity: 1;
    margin-right: 0;
}


#founder .cont2 .box.b2 .text-box-b2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(20%);
    transition: opacity .8s ease-out .3s, transform .8s ease-out .3s;
}

#founder .cont2 .box.b2 .text-box-b2.go {
    opacity: 1;
    transform: translateY(0);
}


#founder .cont2 > .box:nth-child(2) {
    background-position: -2000% 25%;
    background-size: 105% 105%;
    background-repeat: no-repeat;
    transition: background-position .4s ease-in-out .3s;
}

#founder .cont2 > .box.go:nth-child(2) {
    background-position: 25% 90%;
}



#founder .cont2 .box:nth-child(3) {
    background-position: 25% -2000%;
    background-size: 105% 105%;
    background-repeat: no-repeat;
    transition: background-position .4s ease-in-out;
}

#founder .cont2 .box.go:nth-child(3) {
    background-position: 25% 100%;

}

#founder .cont2 .box:nth-child(4) {
    background-position: 2400% 25%;
    background-size: 105% 105%;
    background-repeat: no-repeat;
    transition: background-position .4s ease-in-out;
}

#founder .cont2 .box.go:nth-child(4) {
    background-position: 25% 90%;
}

#founder .cont2 .box:nth-child(5) {
    background-position: 25% -2000%;
    background-size: 105% 105%;
    background-repeat: no-repeat;
    transition: background-position .4s ease-in-out .3s;
}

#founder .cont2 .box.go:nth-child(5) {
    background-position: 25% 90%;
}


#founder .cont2 .big-sec {
    background-repeat: no-repeat;
    background-color: #e5e5e5;
    flex-basis: 100%;
}

#founder .cont2 .big-sec img {
    max-width: 60em;
    margin: 0 auto 2% auto;

    transition: transform .8s ease-out;

    transform: translateY(50%);
}

#founder .cont2 .big-sec img.go {
    transform: translateY(0);
}

#founder .cont2 .big-sec h3,
#founder .cont2 .big-sec p {
    position: relative;
    opacity: 0;
    transform: translateY(50%);
    transition: transform .8s ease-out, opacity .3s ease-out;
}

#founder .cont2 .big-sec h3.go,
#founder .cont2 .big-sec p.go {
    transform: translateY(0);
    opacity: 1;
}

#founder .cont2 .big-sec2 img,
#founder .cont2 .big-sec2 p,
#founder .big-sec2 .btn {
    z-index: 1;
}

#founder .cont2 .big-sec2 {
    opacity: .4;
    filter: saturate(0) brightness(1.3);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120%;
    image-rendering: auto;
    transition: opacity .8s ease-out, filter 2s ease-out, background-size 2s ease-out;
    height: 90vh;
    position: relative;
}

.ff #founder .cont2 .big-sec2 {
    filter: none !important;
}

#founder .cont2 .big-sec2.go {
    opacity: 1;
    filter: saturate(1) brightness(1);
    background-size: 114%;
}

.ff #founder .cont2 .big-sec2.go {
    filter: none !important;
}

#founder .cont2 .big-sec2 img {
    top: -10%;
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out .9s, top .4s ease-out .9s;
}

#founder .cont2 .big-sec2.go img {
    top: 0;
    opacity: 1;
}

#founder .cont2 .big-sec2 p,
#founder .cont2 .big-sec2 .btn {
    opacity: 0;
    position: relative;
    transform: translateY(70%);
    transition: opacity .6s ease-out, transform .6s ease-out;
}

#founder .cont2 .big-sec2 p.go,
#founder .cont2 .big-sec2 .btn.go {
    transform: translateY(0);
    opacity: 1;
}





#founder .cont2 .big-sec3 {
    width: calc(100vw - 2.5vw);
    height: 90vh;

    background-position: center center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;


    background-repeat: no-repeat;

    background-size: 130%;
    background-position-y: 30%;
    image-rendering: auto;

    transform: rotate(0.001deg);

    background-attachment: fixed;

    transition: opacity .8s ease-out 1s, filter .8s ease-out 1s, background-size 3s ease-out;
}

.safari #founder .cont2 .big-sec3 {
    background-attachment: inherit;
}

#founder .cont2 .big-sec3.go {

    background-size: 100%;
}

#founder .big-sec3 .a {
    transition: transform .3s ease-out .4s !important;
    transform-origin: 0 0;
    transform: rotate(90deg);
}

#founder .big-sec3 .a.go {
    transition: transform .3s ease-out .4s !important;
    transform: rotate(0);
}

#founder .big-sec3 .b {
    transition: transform .3s ease-out .4s !important;
    transform-origin: 100% 100%;
    transform: rotate(90deg);
}

#founder .big-sec3 .b.go {
    transition: transform .3s ease-out .4s !important;
    transform: rotate(0);

}


/* ----- READY ------ */

.ready #founder .big-bg {
    background-image: url("/zubi/founder/founder_zubi_tere.jpg") !important;
}

.ready #founder .big-bg .box .tri-1-b {
    background-image: url("/zubi/common/tri-alpha.png");
}

.ready #founder .box.b .big-tri {
    background-image: url("/zubi/founder/tri-yell-a-2x.png") !important;
}

.ready #founder .cont2 .b2:nth-child(1) {
    background-image: url("/zubi/founder/bg-grey1.png") !important;
}

.ready #founder .cont2 > .box:nth-child(2) {
    background-image: url("/zubi/founder/02.jpg") !important;
}

.ready #founder .cont2 .box:nth-child(3) {
    background-image: url("/zubi/founder/03.jpg") !important;
}

.ready #founder .cont2 .box:nth-child(4) {
    background-image: url("/zubi/founder/04.jpg") !important;
}

.ready #founder .cont2 .box:nth-child(5) {
    background-image: url("/zubi/founder/05.jpg") !important;
}

.ready #founder .cont2 .b2:nth-child(6) {
    background-image: url("/zubi/founder/bg-grey2.png") !important;
}

.ready #founder .cont2 .big-sec2 {
    background-image: url("/zubi/founder/360.jpg") !important;
}

.ready #founder .cont2 .big-sec3 {
    background-image: url("/zubi/founder/TEREPHOTO3.jpg") !important;
}

.ready #founder .cont2 .big-sec3 .box.a {
    background-image: url("/zubi/founder/tri-w.png") !important;
}

.ready #founder .cont2 .big-sec3 .box.b {
    background-image: url("/zubi/founder/tri-gr.png") !important;
}

.ready #founder #bgtri {
    background-image: url("/zubi/founder/founder-big-tri-y0.png");
}

.ready #founder #bgtri-2 {
    background-image: url("/zubi/founder/founder-big-tri-y0-2.png");
}





/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {
    #founder .cont2 .big-sec img {
        max-width: 40em !important;
    }

    #founder #rincon {
        top: 4% !important;
    }

    #founder .cont2 .big-sec2 p {
        margin: 28% auto 2em auto !important;
    }
}

@media (max-width: 1580px) {
    #founder .big-tri h3 {
        width: 60%;
    }

    #founder .cont2 .box {
        flex: 1 0 calc(33.3% - 10px) !important;
    }

    #founder .cont2 .box.b2 {
        flex: 1 0 calc(33.3% - 10px) !important;
    }

    #founder .cont2 .box.b2 {
        height: auto;
    }

    #founder .cont2 .box.b2:after {
        content: '';
        display: block;
        padding-bottom: 0%;
    }

    #founder .cont2 .big-sec2 {
        background-size: 180%;
    }

    #founder .cont2 .big-sec2.go {
        opacity: 1;
        background-size: 150%;
    }

    #founder #bgtri-2.go {
        background-size: 220%;
    }
}

@media (max-width: 1440px) {
    #founder .cont2 .box.b2 p {
        width: 80%;
    }

    /*#founder .cont-grid {
        width: calc(100vw - 5vw);
    }*/
}

@media only screen and (max-width: 1920px) and (max-height: 900px) {
    /*
	    .ready .position-nav {
        top: 25vh;
    }
    */

    #founder .cont2 .big-sec img {
        max-width: 50em;
    }

    #zubi-type-y.go {
        height: 12em;
    }

    #founder #rincon {
        top: 8%;
    }
}

@media only screen and (max-width: 1680px) and (max-height: 1050px) {
    .ready #founder .position-nav {
        /*left: -8em !important;*/
        /*top: 22vh !important;*/
    }

    #founder .big-tri h3 {
        width: 60%;
    }

}

@media only screen and (max-device-width: 1440px) and (max-device-height: 1050px) {
    .ready #founder .position-nav {
        /*left: -8em !important;*/
        /*top: 30vh !important;*/
    }

    #founder .cont2 .big-sec2.go {
        background-size: 150%;
    }

    #founder .cont2 .big-sec2.go {
        background-size: 160%;
        background-position: center center;
    }

    #founder .cont2 .box.b2 p {
        width: 70%;
    }

    #founder .cont2 .big-sec img {
        max-width: 50em;
    }

    #zubi-type-y.go {
        height: 14em;
    }

    #founder .cont2 .big-sec2 {
        height: 100vh;
    }

    #founder #rincon {
        top: 14%;
    }

    #founder .cont2 .big-sec2 p {
        margin: 25% auto 2em auto;
    }

 
}

@media (max-width: 1280px) {
    .founder #nav-bar {
        /* width: 6.4em;*/
    }

    /* #founder .cont2 .box {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #founder .cont2 .box.b2 {
        flex: 1 0 calc(50% - 10px) !important;
    } */

    .ready #founder .big-bg {
        background-position: top;
    }

    #founder .cont2 .big-sec2 {
        background-size: 220%;
    }

    #founder .cont2 .big-sec2.go {
        opacity: 1;
        background-size: 200%;
    }

    #founder #zubi-type-y.go {
        height: 9em;
    }

    #founder #bgtri-2.go {
        background-size: 300%;
    }

    #founder .cont2 .big-sec2 p {
        margin: 35% auto 2em auto;
    }

    #founder .cont2 .big-sec3 {
        background-size: 190%;
    }

       #founder .cont2 .big-sec3 .black .box-text {
        padding: 0;
        width: 50%;
    }

    .white .box-text.fx.go {
        padding: 0% !important;
        width: 60% !important;
    }
    

}

@media (max-width: 1180px) {


    #founder .big-bg .box .tri-1-b h2 {
        width: 90%;
    }

    #founder .big-tri h3 {
        width: 90%;
    }

    #founder .cont2 .big-sec p {
        width: 50%;
    }

    #founder .cont2 .big-sec2 p {
        margin: 32% auto 2em auto !important;
        width: 50%;
    }

    #founder .cont2 .big-sec3 .box-text {
        width: 50%;
    }
}

@media (max-width: 980px) {
    #founder .box.b .big-tri {
        width: 48vw;
        height: 48vw;
    }

    #founder .big-tri h3 {
        width: 80%;
        font-size: 3.2em;
    }

    .ready #founder .big-bg {
        background-size: cover !important;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #founder .cont2 .box.b2:after {
        padding-bottom: 0% !important;
    }

    #founder .cont2 .big-sec,
    #founder .cont2 .big-sec2,
    #founder .cont2 .big-sec3 {
        width: calc(100vw - 0px) !important;
    }

    #founder .cont2 .big-sec2.go {
        opacity: 1;
        background-size: cover !important;
    }

    #founder .cont2 .big-sec3 {
        background-size: 240% !important;
    }

    #founder .cont2 .big-sec3 {
        background-size: 112% !important;
        background-position-y: bottom;

    }

    #founder .cont2 .big-sec3.go {
        background-size: 112% !important;
        background-position-y: bottom;
    }
}

@media (max-width: 880px) {
    #founder .box.b .big-tri:after {
        padding-bottom: 100%;
    }

    #founder .box.b:after {
        content: '';
        display: block;
        padding-bottom: 50%;
    }
}

@media (max-width: 680px) {
    #founder .position-nav {
        display: none;
    }

    #founder .big-bg {

        background-attachment: inherit;

    }


    #founder .big-bg {
        height: 60vh !important;
    }

    #founder .box.b .big-tri {
        width: 50vw;
        height: 50vw;
    }

    #founder .big-tri h3 {
        font-size: 2.2em;
    }

    #founder .big-bg .box .tri-1-b h2 {
        width: 80%;
        font-size: 2.8em;
    }

    #founder .cont2 .box.b2 {
        flex: 1 0 calc(100% - 10px) !important;
    }

    #founder .cont2 .box.b2:after {
        padding-bottom: 100% !important;
        ;
    }


    #founder .box.a {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #founder .box.b {
        flex: 3 0 calc(50% - 10px) !important;
    }

    #founder .cont2 .box.b2 p {
        width: 60%;
        margin: 0 auto;
    }

    #founder .cont2 .big-sec img {
        margin: 0 auto;
        max-width: 380px;
    }

    #founder .cont2 .big-sec2 img {
        margin: 0 auto;
        max-width: 280px;
    }

    #founder .cont2 .big-sec2 p {
        width: 80vw;
    }

    #founder .cont2 .box h3,
    #founder .cont2 .big-sec h3 {
        margin: 4% 0;
    }

    #founder .cont2 .big-sec p {
        width: 60%;
    }


    #founder .cont2 .big-sec3 .box.a {
        width: 33%;
        height: 33%;
    }

    #founder .cont2 .big-sec3 .box.a {
        display: none;
    }

    #founder .cont2 .big-sec3 .box.b {
        width: 60%;
        height: 100%;
        margin-top: 0;
    }

    #founder .cont2 .big-sec3 .box-text {
        width: 60%;
        padding: 0 5% 5% 0;
    }

    #founder .cont2 .big-sec3 .box-text h4 {
        font-size: 2.8em;
    }

    #founder p {
        color: #a9a9a9;
    }

}


@media (max-width: 480px) {
    #founder .box.b .big-tri {
        width: 51vw;
        height: 51vw;
    }

    #founder #bgtri {
        background-position: 25% -155%;
    }

    .ready #founder #bgtri {
        background-size: 200%;
        background-position: 0 80%;
    }

    #founder .big-bg .box .tri-1-b {
        padding: .8em;
    }

    #founder .box.b .big-tri {
        background-size: 100% 100%;
        padding: 2%;
    }

    #founder .big-bg .box .tri-1-b h2 {
        width: 80%;
        font-size: 1.8em;
    }

    #founder .big-tri h3 {
        font-size: 1.7em;
        width: 80%;
    }

    #founder .cont2 .big-sec img {
        width: 80%;
    }

    #founder #zubi-type-y {
        width: 80%;
        height: 0em;
    }

    #founder #zubi-type-y.go {
        height: 7em;
    }

    #founder .cont2 .big-sec3 {
        height: 60vh;
    }

    #founder .cont2 .big-sec3 .box-text h4 {
        width: 70%;
        position: absolute;
        top: -4em;
        right: 2%;
        font-size: 1.8em;
    }

    #founder #bgtri-2.go {
        background-size: 400% !important;
    }

    #founder #rincon {
        top: 8%;
        width: 30em;
        height: 30em;
    }

    #founder #rincon .logo-rin {
        width: 10em;
        height: 10em;
        top: 10em;
    }

    #founder .cont2 .big-sec2 p {
        margin: 90% auto 2em auto !important;
    }

    #founder .cont2 .big-sec3 .box-text {
        width: 70%;
        padding: 0 2% 2% 0 !important;
    }
}
/* ==================== Culture core ========================= */
#culture .position-nav {
   /* position: absolute !important;
    /*top: 24vh !important;*/
    /*left: -5em;*/
    /*transform: rotate(-90deg) !important;*/
}

#culture .box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}


/* ==================== Culture ========================= */

#culture .box.tri-1 {
    background-size: 100% 100%;
    background-position: 50% 50%;
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out, background-color .2s ease-out .8s;
}

.ready #culture .box.tri-1 {
    transform: translate3d(0, 0, 0);
    background-color: #edc600;
}

#culture .box .tri-1-b {
    width: 100%;
    background-size: 102% 102% !important;
    background-position: center;
    display: flex;
    flex-direction: row-reverse;

    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transform-origin: 0 50%;
    transition: transform .4s ease-out .4s;
}

.ready #culture .box .tri-1-b {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
}

#culture .box .tri-1-b h2 {
    transition: opacity .4s ease-out 1s, margin-right .4s ease-out 1s;
    opacity: 0;
    margin-right: 6%;
}

#culture .box .tri-1-b.go h2 {
    opacity: 1;
    margin-right: 0;
}

#culture .box .yellow-hov {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 210%;
    background-position: 50% -100%;
    background-image: url('/zubi/common/tri-gr-r.png');
    transition: background-position .4s ease-out .4s, opacity .4s ease-in .4s;
}

#culture .box.open .yellow-hov {
    opacity: 1;
    background-position: 0% 98%;
}



#culture .box p {
    font-size: 1.6em;
    font-weight: 100;
    width: 70%;
    position: absolute;
    bottom: 8vh;
    right: 2.5vw;
    text-align: right;
    line-height: 1.4em;
    transition: opacity .4s ease-out .4s, transform .3s ease-out .4s;
    transform: translateY(1em);
    opacity: 0;
    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
}

#culture .box.open p {
    transform: translateY(0);
    opacity: 1;
}

#culture .box p a {
    color: rgb(29, 161, 242);
    font-size: .9em;
}

#culture .box .ico-social {
    position: absolute;
    bottom: -4px;
    right: -1px;
    opacity: 0;
    transition: opacity .4s ease-out .7s, transform .3s ease-out .7s;
    transform: rotate(-90deg);
}

#culture .box.go .ico-social {
    transform: rotate(0);
    transform-origin: 100% 0;
    opacity: 1;
}



#culture #sec-separador {
    width: calc(100vw - 60px);
    height: 5.6em;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

#culture #sec-separador .btn p {
    color: #333;
    font-size: 1.5em;
    margin: 1.2em auto;
    cursor: pointer;
}


.ready #culture .box.tri-1 {
    background-image: url("/zubi/culture/tri-a-yellow.png") !important;
}

.ready #culture .box .tri-1-b {
    background-image: url("/zubi/culture/tri-c-yellow.png") !important;
}


#culture .box {
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    display: flex;
    background-position: -100em 0;

    transition: background-position .4s ease-out .1s, background-color .4s ease-out .4s;
}


#culture .box:nth-child(even) {
    background-position: 100em 0;
}

#culture .box.go {
    background-color: #343434;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: background-position .4s ease-out .1s, background-color .1s ease-out .4s;
}



#culture #cont-article {
    position: absolute;
    width: 100%;
    height: 98.5vh;
    right: 0;
    background-color: #0000009c;
    z-index: 10;
    display: none;
}

#culture #cont-article.open {
    display: inline;
}

#culture .box.art {
    z-index: 100;
}





@media only screen and (max-device-width: 1680px) and (max-device-height: 1080px) {
    #culture .cont-grid {
        /*width: calc(100vw - 3vw) ;*/
    }
}

@media (min-width: 1675px) {
	#culture .cont-grid {
        /*width: calc(100vw - 2.5vw) ;*/
    }
}

@media (max-width: 1280px) {
	
	
	#culture .cont-grid {
        /*width: calc(100vw - 4vw) !important;*/
    }
    
    
    #culture .box {
        flex: 1 0 calc(25% - 10px);
    }

    #culture .box p {
        font-size: 1.4em;
        width: 70%;
        bottom: 6vh;
        right: 3.5vw;
        
        
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    }
}

@media (max-width: 1180px) {
    #culture .box {
        flex: 1 0 calc(33% - 10px);
    }

    #culture .box:last-child {
        display: none;
    }
}

@media (max-width: 1080px) {
    #culture .box {
        flex: 1 0 calc(50% - 10px);
    }

    #culture .box p {
        font-size: 1.6em;
        font-weight: 100;
        width: 80%;
        
        
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    }

    #culture .box:last-child {
        display: inline-block;
    }
}

@media (max-width: 580px) {
    #culture .cont-grid {
        /*width: calc(100vw - 0vw) !important;*/
    }
    #culture .box .tri-1-b {
        background-size: 104% 104% !important;
    }

    #culture .box {
        flex: 1 0 calc(100% - 10px);
    }

    #culture .box.xs-mob {
        flex: 1 0 calc(100% - 10px) !important;
    }

    #culture #sec-separador {
        width: calc(100vw - 0px);
    }

    #culture .box p {
        font-size: 1.2em;
        font-weight: 100;
        width: 80%;
        max-height: 60%;
        overflow: hidden;
        
        overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    }
}



/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {
    #culture .cont-grid {
    	/*width: calc(100vw - 5vw) !important;*/
	}
}/* ============ IE-EDGE Connect ================= */

.edge #box-contact {
    height: 53.5vh;
}


/* ============ Connect ================= */
*:focus {
    outline: none;
}

input,
optgroup,
select,
textarea {
    color: #fff;
    padding: 8px;
    font-weight: 200;
}

#connect span a,
#connect p a {
    color: #B51F32 !important;
}




#connect .suggestion {
    font-size: 1.2em;
    font-weight: 200;
    padding: 2px 10px;
    background: #000;
    display: none;
    position: absolute;
    width: 50%;
    bottom: 35%;
    height: fit-content;
}

#connect .suggestion i {
    font-size: 1.2em;
}

#connect .suggestion.in {
    display: inline;
}

#box-contact2 .suggestion,
#box-contact3 .suggestion {
    bottom: 8%;
}

#connect {
    max-width: 100vw;
    overflow-x: hidden;
}

#connect .position-nav {
    /*left: -6.5em;*/

}

#connect .big-bg {
    filter: saturate(0);
    opacity: 0;
    background-position: right;
    background-size: 105%;
    image-rendering: auto;
    -webkit-transition: opacity .3s ease-out .2s, filter .8s ease-out .2s, background-size 1s ease-out .2s;
    transition: opacity .3s ease-out .2s, filter .8s ease-out .2s, background-size 1s ease-out .2s;
}

#connect .big-bg .box.b {
    background: none !important;
}

#connect .box.b1.m {
    display: none;
}



#connect .big-bg .box:nth-child(1) {
    background: none !important;
}

#connect .big-bg .box .tri-1-b {
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
    transition: transform .5s ease-out 0s;
}

#connect .big-bg .box .tri-1-b h2 {
    text-transform: uppercase;
    font-weight: 300;
}

#connect .big-bg .box.lg-mob {
    background-position: 80em 80em;
    background-size: 102% 102%;
    transition: background-position .4s ease-out;
    background-repeat: no-repeat;
}

.ready #connect .big-bg .box.lg-mob {
    background-position: 0 0;
}


#connect .cont2 .box.b0 {
    background-position: -80em -80em;
    background-size: cover;
    transition: background-position .4s ease-out;
    background-repeat: no-repeat;
}

#connect .cont2 .box.b0.go {
    background-position: 0 0;
}

#connect .cont3 .box.b3 {
    background-position: 80em 80em;
    background-size: cover;
    transition: background-position .4s ease-out;
    background-repeat: no-repeat;
    position: relative;
    z-index: 20;
}

#connect .cont3 .box.b3.go {
    background-position: 0 0;
}


#connect .cont2 .box.b1 {
    background-size: cover;
    overflow: hidden;
    max-height: 53vh;

    background-repeat: no-repeat;
    background-position: 100vw 50%;
    transition: background-position .4s ease-out;
}

#connect .cont2 .box.b1.go {
    background-position: right bottom;
}

#connect .cont2 .box.b2 {
    background-size: cover;
    overflow: hidden;
    max-height: 50vh;

    background-repeat: no-repeat;
    background-position: -100vw -50%;
    transition: background-position .4s ease-out;
}

#connect .cont2 .box.b2.go {
    background-position: left bottom;
}



#connect .big-bg .box {
    background-size: 102% 102%;
}


#connect .box-info {
    width: 60%;
    padding: 10%;
    font-size: 10px;
    color: #707070;
    line-height: 18px;
}

.b3 .box-info {
    bottom: 0;
}

#connect .box .box-info h3 {
    opacity: 0;
    color: #B51F32;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 3.5em;
    line-height: 1.2em;
    margin-bottom: 8%;
    margin-top: 40%;
    transform: translateY(.5em);
    transition: transform .4s ease-out .3s, opacity .4s ease-out .3s;
}

#connect .box.go .box-info h3 {
    transform: translateY(0);
    opacity: 1;
}

#connect .box .box-info p {
    font-size: 1.2em;
    line-height: 1.8em;
    font-weight: 200;
    opacity: 0;
    transform: translateY(2em);
    transition: transform .4s ease-out .3s, opacity .4s ease-out .3s;

}

#connect .box.go .box-info p {
    transform: translateY(0);
    opacity: 1;
}

#connect .box-info b {
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 500;
    color: #000;
}

#connect .box-info span {
    color: #B51F32;
    font-size: 1.2em;
    font-weight: 200;
    text-transform: uppercase;
    cursor: pointer;
}

#connect .box-info ul {
    list-style: none;
    margin-top: 10px;
    font-size: 10px;
    line-height: 2.2em;
}

#connect .box-info ul li a, #connect .box-info ul li span{
    font-size: 1em;
    font-weight: 500;
    color: #B51F32;
    text-transform: uppercase;
}

#connect .box-info ul li i {
    color: #B51F32;
    /*font-size: 1.2em;*/
    margin-right: .4em;
}


#connect .cont2 .box.b0 {
    background-size: 100% 100%;
}

#connect .cont2 .box.b1 {
    background-size: cover;
}

#connect .cont2 .box.b2 {
    background-size: cover;
}

#connect .cont3 .box.b3 {
    background-size: 100% 100%;
}

#connect .cont2 .box-r {
    display: flex;
    flex-direction: row-reverse;
    text-align: right;
    position: relative;
    z-index: 20;
}

.ready #connect .big-bg {
    opacity: 1;
    filter: saturate(1);
    background-size: 100%;
}


/* TEST FOR ANIMATION GO */

#connect .go .position-nav {
    /*left: -6em !important;*/
    -webkit-transition: left .3s ease-out 2s;
    transition: left .3s ease-out 2s;
}


#connect .go .big-bg {
    background-color: #33333300;
}

#connect .big-bg .box.lg-mob.go {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

#connect .cont2 .box.b0.go {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}


#connect .cont2 .box.b3.go {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}


#box-contact {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-x: hidden;
    background: #B51F31;
    opacity: 0;
    transform: translateX(120%);

    transition: opacity .2s ease-in-out .2s, transform .4s ease-in-out .2s;
}

#box-contact.open {
    width: 100%;
    opacity: 1;
    transform: translateX(0);
}

#box-contact2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    background: #B51F31;
    opacity: 0;
    transform: translateX(-100vw);

    transition: opacity .2s ease-in-out .2s, transform .2s ease-in-out .3s;
}

#box-contact2:after {
    content: '';
    display: block;
    padding-bottom: 50%;
}

#box-contact2.go.open {
    transform: translateY(0);
    opacity: 1;
    width: 100%;
        overflow: hidden;
    position: absolute;
}

#box-contact3 {
    width: 100%;
    overflow: hidden;
    position: absolute;
    background: #B51F31;
    opacity: 0;
    transform: translateX(100vw);

    transition: opacity .2s ease-in-out .2s, transform .2s ease-in-out .3s;
}

#box-contact3:after {
    content: '';
    display: block;
    padding-bottom: 50%;
}

#box-contact3.go.open {
    transform: translateX(0);
    opacity: 1;
    width: 100%;
        overflow: hidden;
    position: absolute;
}


.form {
    width: 62%;
    position: absolute;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    padding: 4% 0;
    -webkit-transition: right .4s ease-in-out .4s;
    transition: right .4s ease-in-out .4s;
}

.open.form {
    width: 62%;
}

#box-contact2.open .form {
    left: 6%;
    width: 60%;
}

#box-contact2 .form {
    width: 60%;
    left: -100%;
    -webkit-transition: left .4s ease-in-out .4s;
    transition: left .4s ease-in-out .4s;
}

#box-contact3.open .form {
    right: 35%;
    width: 60%;
}

#box-contact3 .form {
    width: 60%;
    right: -100%;
    -webkit-transition: right .4s ease-in-out .4s;
    transition: right .4s ease-in-out .4s;
}

.form .box-inputs {
    width: 50%;
}

.form .box-inputs input {
    width: 100%;
    height: 2em;
    margin: .5em 0 2em 0;
    background: none;
    border-radius: 0;
    border: 0px;
    border-bottom: 1px solid #fff;
}

.form .box-inputs input::placeholder {
    color: #ffffff5e;
}


.form .cross {
    width: 2em;
    height: 2em;
    top: 2em;
    right: -5%;
    cursor: pointer;
    position: absolute;
    background-size: cover;
    background-image: url("/zubi/common/cross.png");
}



.form .title-cont {
    width: 33%;
    font-weight: 100;
}

.form .title-cont h3 {
    text-transform: uppercase;
    font-size: 3.5em;
    font-weight: 100;
}

.form .col-a {
    display: flex;
    justify-content: space-between;
}

.form .col-b {
    display: flex;
    flex-direction: column;
}

.form .col-b .box-btn {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.form .col-b .box-btn button {
    width: 33.3%;
    border: 0;
    height: 2.2em;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    color: #b51f30;
    transition: .4s;
    -webkit-transition: .2s;
    background-color: #f2f2f2;
    cursor: pointer;
}

.form .col-b .box-btn button:hover {
    background: #333;
    color: #fff;
}

.form .col-a label {
    width: 48%;
}

.form label span {
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 300;
}

.form label textarea {
    width: 100%;
    height: 10em;
    margin: 1em 0;
    background: none;
    border: 1px solid #fff;
}

.box-inputs p {
    display: none;
}

.thanks .col-a,
.thanks .col-b {
    display: none;
}

.box-inputs.thanks p {
    display: inline;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 200;
}

.ready #connect .big-bg {
    background-image: url("/zubi/connect/zubi_miami.jpg");
}

.ready #connect .big-bg .box .tri-1-b {
    background-image: url("/zubi/common/tri-alpha.png");
}

.ready #connect .big-bg .box {
    background-image: url("/zubi/connect/tri-grey-map.png");
}

.ready #connect .box.b {
    background-image: url("/zubi/connect/zubi_la.jpg");
}

.ready #connect .cont2 .box.b0 {
    background-image: url("/zubi/connect/tri-grey-map2.png");
}

.ready #connect .cont2 .box.b1 {
    background-image: url("/zubi/connect/zubi_la.jpg");
}

.ready #connect .cont3 .box.b2 {
    background-image: url("/zubi/connect/zubi_detroit.jpg");
}

.ready #connect .cont3 .box.b3 {
    background-image: url("/zubi/connect/tri-grey-map3.png");
}



@media screen and (max-width: 1680px) {
    .form label textarea {
        width: 100%;
        height: 6em;
    }

    .connect .cont-grid {
        /*width: calc(100vw - 3vw) !important;*/
    }
}


@media screen and (max-width: 1580px) {

    .cont2 .b0 .box,
    .cont2 .b3 .box {
        flex: 1 0 calc(25% - 10px) !important;
    }

    #connect .box-info h3 {
        margin-top: 25%;
    }

    #connect .big-bg {
        background-size: 130% !important;
        background-repeat: no-repeat;
    }

    .ready #connect .big-bg {
        background-size: 150%;
        background-repeat: no-repeat;
    }

    #connect .cont2 .box.b1,
    #connect .cont2 .box.b2 {
        opacity: 1;
        background-size: 130% !important;
    }

    #connect .cont2 .box.b1.go,
    #connect .cont2 .box.b2.go {
        opacity: 1;
        background-size: 160% !important;
    }


    .form .title-cont {
        width: 33%;
        font-weight: 100;
    }

    .form label textarea {
        width: 100%;
        height: 8em;
    }

    #box-contact.open {
        width: 100%;
        right: 0;
        background: #B51F31;
    }

    #box-contact2 {
        width: 100%;
    }

    #box-contact2.go.open {
        width: 100%;
    }

    #box-contact3 {
        width: 100%;
    }

    #box-contact3.go.open {
        width: 100%;
    }

    #box-contact2:after {
        content: '';
        display: block;
        padding-bottom: 29.5%;
    }

    #box-contact3:after {
        content: '';
        display: block;
        padding-bottom: 29.4%;
    }

}

@media screen and (max-width: 1480px) {

    #connect .cont2 .box.b1,
    #connect .cont2 .box.b2 {
        background-size: cover;
        overflow: hidden;
        max-height: 100%;
    }

    #connect .suggestion {
        bottom: 42%;
    }

    #connect .box-info {
        width: 80%;
    }

    #box-contact2:after {
        content: '';
        display: block;
        padding-bottom: 30.2%;
    }

    #box-contact3:after {
        content: '';
        display: block;
        padding-bottom: 34.4%;
    }
}

@media screen and (max-width: 1340px) {
    #box-contact2.open .form {
    left: 3%;
    width: 60%;
}
    #box-contact3.open .form {
    right: 38%;
    width: 60%;
}
    .form label textarea {
    width: 100%;
    height: 5em;
}
}

/* ============ @Media screen mackbook Pro 15"  ================= */
@media only screen and (max-width: 1680px) and (max-height: 1050px) {
   
  	/* #connect .position-nav { top: 14vw !important; }*/
   
   
    #connect .big-bg {
        background-size: 110%;
    }

    .ready #connect .big-bg {
        background-size: 105%;
    }
}

/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1420px){

    /*#connect .position-nav { top: 17vw !important; }*/
    
    #box-contact {
        width: 100%;
    }
    .form{
        width: 60%;
    }
    


}

@media only screen and (max-device-width: 1440px) and (max-device-height: 1050px) {
    #connect .cont-grid {
       /*width: calc(100vw - 3.5vw);*/
    }
     /*#connect .position-nav { top: 17vw !important; }*/
}

@media screen and (max-width: 1280px) {
    #connect .big-bg {
        background-size: 140% !important;
        background-repeat: no-repeat;
    }

    #connect .box-info p {
        font-size: 1.2em;
        line-height: 1.4em;
    }

    #connect .box-info h3 {
        margin-top: 22%;
    }

    .ready #connect .big-bg {
        background-size: 170%;
        background-repeat: no-repeat;
    }

    #connect .cont2 .box.b1,
    #connect .cont2 .box.b2 {
        opacity: 1;
        background-size: 150% !important;
    }

    #connect .cont2 .box.b1.go,
    #connect .cont2 .box.b2.go {
        opacity: 1;
        background-size: 190% !important;
    }

    .form.open {
        /*right: 40%;*/
    }


    .form .box-inputs {
        width: 40%;
    }

    .form label textarea {
        height: 8em;
    }

    #box-contact2:after {
        content: '';
        display: block;
        padding-bottom: 34.8%;
    }



    #box-contact2.open .form {
        left: 4%;
    }


}

@media screen and (max-width: 1024px) {
	
	
	/*#connect .position-nav { top: 18vw !important; }*/


    #connect .box-info h3 {
        margin-top: 20%;
        font-size: 3em;
    }

    #connect .box .box-info h3 {
        margin-top: 0;
        margin-bottom: 4%;
    }

    #connect .box-info {
        position: absolute;
        width: 90%;
    }

    .form {
        width: 60%;
        padding: 2% 0;
    }

    .form .box-inputs {
        width: 50%;
    }

    .form label textarea {
        height: 4em;
    }

    #box-contact {
        width: 100%;
    }

    #box-contact .form {
        width: 60% !important;
    }

    #box-contact2 .form {
        width: 80%;
    }

    #box-contact3 .form {
        width: 90%;
    }

    #box-contact.open .form {
        width: 60% !important;
    }

    #box-contact2.open .form {
        width: 80%;
    }

    #box-contact3.open .form {
        width: 90%;
    }
}

@media screen and (max-width: 980px) {
	
	/*#connect .position-nav { top: 26vw !important; }*/
	
	
    #connect .suggestion {
        bottom: 34%;
    }

    #connect .cont-grid {
       /* width: calc(100vw - 0vw);*/
    }

    #connect .big-bg {
        background-size: 200% !important;
        background-repeat: no-repeat;
    }

    .ready #connect .big-bg {
        background-size: 220%;
        background-repeat: no-repeat;
    }

    #connect .cont2 .box.b1,
    #connect .cont2 .box.b2 {
        opacity: 1;
        background-size: 300% !important;
    }

    #connect .cont2 .box.b1.go,
    #connect .cont2 .box.b2.go {
        opacity: 1;
        background-size: 320% !important;
    }

    #box-contact.open {
        z-index: 1000;


    }

    .form .cross {
        width: 2em;
        height: 2em;
        top: 2em;
        right: 5%;
    }

    .form {
        width: 80%;
        padding: 4% 0;
    }

    .open .form {
        /*right: 10%;*/
    }

    #box-contact {
        z-index: 1000;
    }

    #box-contact.open {
        right: 0;

        z-index: 1000;
    }

    .form .title-cont {
        width: 20%;
        font-weight: 100;
    }

    .form .box-inputs {
        width: 60%;
    }

    .form label textarea {
        height: 12em;
    }

    #box-contact2 {
        width: 100%;
        left: 0;
    }

    #box-contact2.go.open,
    #box-contact3.go.open {
        z-index: 30;
        left: 0;
    }

    #box-contact2:after {
        content: '';
        display: block;
        padding-bottom: 50%;
    }

    #box-contact3:after {
        content: '';
        display: block;
        padding-bottom: 50%;
    }

    #box-contact2.open .form {
        left: 6%;
    }

    #box-contact3.open .form {
        right: 8%;
    }


}

@media (max-width: 780px) {
    .ready #connect .big-bg {
        background-size: cover !important;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #connect .cont2 .box.b1.go,
    #connect .cont2 .box.b2.go {
        background-size: cover !important;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #connect .box-info {
        width: 60%;
    }

    #connect .box-info h3 {
        font-size: 3em;
        margin-top: 25%;
        font-size: 3em;
        line-height: 1.2em;
    }

    #connect .box-info p {
        font-size: 1em;
        line-height: 1.6em;
    }

    #connect .box-info b {
        font-size: 1.2em;
    }

    #connect .box-info ul {
        line-height: 1.8em;
    }

    .form label textarea {
        width: 100%;
        height: 4em;
    }

    #box-contact2 {
        height: 40vh;
        position: absolute;
        z-index: 1000;
    }

    #box-contact2.open {
        height: 40vh;
        position: absolute;
    }

    #box-contact3.open {
        height: 40vh;
        position: absolute;
        z-index: 100;
    }

    #box-contact3 {
        height: 40vh;
        position: absolute;
        z-index: 100;
    }

    #connect .box .box-info h3 {
        margin-top: 20%;
    }

    #connect .box-info {
        width: 80%;
    }

    #box-contact .form {
        width: 100% !important;
    }

    #box-contact.open .form {
        width: 100% !important;
    }

    #box-contact2 .form {
        width: 90%;
    }

    #box-contact2.open .form {
        width: 90%;
    }

    #box-contact3 .form {
        width: 90%;
    }

    #box-contact3.open .form {
        width: 90%;
    }

}

@media (max-width: 680px) {
    #connect .box-info {
        width: 70%;
    }

    #connect .suggestion {
        bottom: 34%;
        text-align: center;
    }
}

@media (max-width: 580px) {
    #connect .big-bg .box .tri-1-b {
        padding: 4%
    }

    #connect .box .tri-1-b h2 {
        font-size: 1.8em;
    }

    #connect .box.a {
        width: 50vw;
        display: flex;
        position: absolute;
    }

    #connect .box.b:after {
        padding-bottom: 50%;
    }

    #connect .box.b1:after,
    #connect .box.b2:after {
        padding-bottom: 100% !important;
    }

    #connect .box.b,
    #connect .box.lg-mob {
        flex: 1 0 calc(100% - 10px);
    }

    #connect .box.b1.m {
        display: inline;
    }

    .cont2 .box {
        flex: 1 0 calc(100% - 10px) !important;
    }

    #connect .box-info {
        width: 60%;
        padding: 0 4%;
        font-size: 10px;
        line-height: 18px;
        bottom: 10%
    }

    #connect .b3 .box-info h3 {
        margin-top: 50%;
    }

    #connect .box-info h3 {
        font-size: 3.5em;
        margin-bottom: .4em;
        margin-top: 30%;
        line-height: initial;
    }

    #connect .box-info p {
        font-size: 1.2em;
        line-height: 1.6em;
        color: #707070 !important;
    }

    #connect .box-info b {
        text-transform: uppercase;
        font-size: 1.3em;
        font-weight: 500;
        color: #000;
    }

    #connect .box-info span {
        color: #B51F32;
        font-size: 1em;
    }

    #connect .box-info ul {
        list-style: none;
        margin-top: 2em;
    }

    #connect .box-info ul li a {
        /*color: #B51F32;
        font-size: 1.2em;
        font-weight: 500;
        line-height: 1.8em;
        */
    }

    #connect .box-info ul li a i {
        margin-right: 4px;
        font-size: 1em;
    }

    #connect .box.sec1:after {
        padding-bottom: 50% !important;
    }

    #box-contact {
        width: 100vw;
    }

    .form {
        flex-direction: column;
        padding: 4% 8%;
        justify-content: flex-start;
    }

    .form .title-cont {
        width: 100%;
        font-weight: 100;
    }

    .form .box-inputs {
        width: 100%;
        margin-top: 10%;
    }

    .form .col-a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .form .col-a label {
        width: 100%;
    }

    .form .title-cont p,
    .form .title-cont a {
        font-size: 1.3em;
    }

    .form .col-b .box-btn button {
        width: 100%;
        border: 0;
        height: 2.8em;
    }

    .open .form {
        right: 0;
        left: 0;
    }

    .form {
        width: 95%;
    }

    #box-contact2,
    #box-contact3 {
        width: 100%;
        position: absolute;
        height: 55vh;
        left: 0;
    }

    #box-contact2:after {
        content: '';
        display: block;
        padding-bottom: 80.4%;
    }

    #box-contact2.go,
    #box-contact3.go {
        width: 100%;
        position: fixed;
        height: 100% !important;
        top: 0;
        bottom: 0;
    }

    #box-contact2.go.open,
    #box-contact3.go.open {
        width: 100%;
        position: fixed;
        height: 100%;
        top: 0;
        bottom: 0;
    }

    #box-contact {
        width: 100%;
        height: 100%;
        top: 0;
    }

    #box-contact.open .form {
        width: 97% !important;
    }

    #box-contact .form {
        width: 97% !important;
    }

    #box-contact3.go {
        width: 100%;
        position: absolute;
        height: 33%;
        bottom: 0;
    }

    #box-contact3 .form {
        right: auto;
    }

    .form {
        left: 2% !important;
        width: 97% !important;
    }

    .open .form {
        left: 2% !important;
        width: 97% !important;
    }

    .form .box-inputs {
        margin-top: 20%;
    }

    .form label textarea {
        width: 100%;
        height: 15em;
    }

    #connect .cont-grid.cont2 {
        display: flex !important;
        flex-wrap: wrap-reverse !important;
        height: 90vh;
    }


}
/* ============ Careers ================= */

#careers * {
    transform: translate3d(0, 0, 0);
}

#careers .box {
    background-repeat: no-repeat;
}



#careers .position-nav {
   /* left: -6.5em;*/
}


#careers .box:after,
.careers .box.c:after {
    content: '';
    display: block;
    padding-bottom: 50%;
}

#careers .box.b:after {
    content: '';
    display: block;
    padding-bottom: 35.5%;
}


#careers .box .tri-1-b {
    width: 100%;
    background-size: 200% !important;
    background-position: -150% -150% !important;
    display: flex;
    flex-direction: row-reverse;
    text-align: right;
}

#careers .box {
    background-repeat: no-repeat !important;

}



#careers .sqr-a {
    background-position: -60em -60em;
    background-size: cover;
    transition: background-position .4s ease-out;
}

#careers .sqr-a.go {
    background-position: 50% 50%;
}





#careers .box.b2 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position-x: -60em;
    transition: background-position-x .4s ease-out .6s;
}

#careers .box.b2.go {
    background-position-x: 0;
    background-size: cover;
}


#careers .box.b3 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position: 50% -60em;
    background-size: cover;
    image-rendering: auto;
    transition: background-position .4s ease-out .6s;
}

#careers .box.b3.go {
    background-position: 50% 50%;
}



#careers .box.b4 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;


    background-position: 50% -50em;
    background-size: cover;
    transition: background-position .4s ease-out .8s;
}

#careers .box.b4.go {
    background-position: 50% 50%;
}


#careers .box .box-info {
    color: #000;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

#careers .box.c .box-info {
    width: 50%;
}

#careers .box .box-info h4 {
    font-size: 1.8em;
    font-weight: 400;
}

#careers .box .box-info p {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
    max-height: 80%;
}

#careers #sec-separador {
    width: calc(100vw - 2.5vw);
    height: 20vh;
    background: #b51f32;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}

#careers #sec-separador .btn {
    width: 290px;
    text-align: center;
    margin: 0 auto;
    text-transform: uppercase;
    padding: 20px;
    background: #fff;
}

#careers #sec-separador .btn p {
    font-weight: 700;
    color: #b51e31;
    letter-spacing: 2px;
    font-size: 1.6em;
}

#careers .box.tri-1 {
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out, background-color .2s ease-out .8s;
}

.ready #careers .box.tri-1 {
    transform: translate3d(0, 0, 0);
    background-size: contain !important;
        background-color: #eb2129 !important;
}

#careers .box .tri-1-b {
    width: 100%;
    background-size: 102% 102% !important;
    background-position: bottom !important;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
    background-repeat: no-repeat;

    opacity: 0;
    z-index: 100;


    transform-origin: 0 50%;
    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transition: transform .4s ease-out .4s;
}

.ready #careers .tri-1-b {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
}

#careers .box .tri-1-b h2 {
    transition: opacity .4s ease-out 1s, margin-right .4s ease-out 1s;
    opacity: 0;
    margin-right: 6%;
}

#careers .box .tri-1-b.go h2 {
    opacity: 1;
    margin-right: 0;
}




#careers .box-tri-w {
    width: 33.3%;
    height: 100%;
    position: absolute;
    right: 0;
    background-image: url("/zubi/careers/carreers_tri_opacity_2x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;

    transition: transform .4s ease-out .4s, opacity .2s ease-out .4s;
    opacity: 0;
    transform: rotate(46deg);
    transform-origin: 100% 0%;
}

#careers .go .box-tri-w {
    opacity: 1;
    transform: rotate(0);
}


#careers .box.b5 {
    background-position: 40em -40em;
    transition: background-position .4s ease-out .8s;
    background-size: 100% 100%;
}

#careers .box.b5.go {
    background-position: 50% 50%;
}

#careers .box.b5 .box-info {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out .8s, transform .4s ease-out .8s;
    transform: translateY(2em);
}

#careers .box.b5.go .box-info {
    opacity: 1;
    transform: translateY(0);
}

#careers .box.b6 {
    background-position: 40em -40em;
    transition: background-position .4s ease-out .8s;
    background-size: 100% 100%;
}

#careers .box.go.b6 {
    background-position: 50% 50%;
}

#careers .box.b6 .box-info {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out .8s, transform .4s ease-out .8s;
    transform: translateY(2em);
}

#careers .box.b6.go .box-info {
    opacity: 1;
    transform: translateY(0);
}




#careers .box.b7 {
    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position: 50% -60em;
    image-rendering: auto;
    transition: background-position .4s ease-out .6s;
}

#careers .box.b7.go {
    background-position: 50% 50%;
}



#careers .box.b8 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position: 60em 50%;
    transition: background-position .4s ease-out .6s;
}

#careers .box.b8.go {
    background-position: 50% 50%;
    background-size: cover;
}

#careers .box.b9 {
    background-position: -100em 50em;
    transition: background-position .4s ease-out .4s;
}

#careers .box.b9.go {
    background-position: 50% 50%;
}


#careers .box.b9 .box-info {
    opacity: 0;
    position: relative;
    transition: opacity .4s ease-out .8s, transform .4s ease-out .8s;
    transform: translateY(2em);
}

#careers .box.b9.go .box-info {
    opacity: 1;
    transform: translateY(0);
}

#careers .box.b10 {

    position: relative;
    transition: background-color .4s;
    background-size: cover !important;
    background-position: center;
    display: flex;

    background-position: -60em 50%;
    transition: background-position .4s ease-out .6s;
}

#careers .box.b10.go {
    background-position: 50%;
    background-size: cover;
}


#careers #sec-separador {
    opacity: 0;
    position: relative;
    -webkit-transition: opacity .2s ease-out .2s;
    transition: opacity .2s ease-out .2s;
}

#careers #sec-separador.go {
    opacity: 1;
}


.ready #careers .box {
    background-image: url("/zubi/skin/int/05.png");
}

.ready #careers .box.c {
    background-image: url("/zubi/skin/int/04.png");
}

.ready #careers .box.tri-1 {
    background: url("/zubi/skin/int/tri-a-red.png");
}

.ready #careers .box .tri-1-b {
    background: url("/zubi/skin/int/tri-c-red.png");
}

.ready #careers .box.b2 {
    background-image: url("/zubi/careers/01.jpg");
}

.ready #careers .box.b3 {
    background-image: url("/zubi/careers/premios_v3.jpg");
}

.ready #careers .box.b4 {
    background-image: url("/zubi/careers/03.jpg");
}

.ready #careers .box.b5 {
    background-image: url("/zubi/careers/bg-tri.png");
}

.ready #careers .box.b6 {
    background-image: url("/zubi/careers/bg-tri.png");
}

.ready #careers .box.b7 {
    background-image: url("/zubi/careers/04.jpg");
}

.ready #careers .box.b8 {
    background-image: url("/zubi/careers/05.jpg");
}

.ready #careers .box.b9 {
    background-image: url("/zubi/careers/bg-lg-tri.png");
}

.ready #careers .box.b10 {
    background-image: url("/zubi/careers/06.jpg");
}

.ready .box-tri-w {
    background-image: url("/zubi/careers/carreers_tri_opacity_2x.png");
}

/* ============ @Media screens Careers ================= */

@media (max-width: 1280px) {

    #careers .box:after,
    #careers .box.c:after {
        padding-bottom: 100%;
    }

    #careers .box.b {
        flex: 1 0 calc(66% - 10px);
    }

    #careers .box-tri-w {
        width: 50%;
    }

    #careers .box.c .box-info {
        width: 80%;
    }
}

@media (max-width: 980px) {

    #careers .box.b,
    #careers .box.c {
        flex: 1 0 calc(50% - 10px);
    }

    #careers .box.lg:after {
        padding-bottom: 50%;
    }


    #careers .box.b10:after {
        padding-bottom: 60%;
    }

    #careers .box.off {
        display: inline !important;
    }

    #careers .box .box-info {
        padding: 20px;
    }

    #careers .box-tri-w {
        width: 100%;
    }
}



@media (max-width: 520px) {
    #careers .box .tri-1-b {
        background-size: 100% 100% !important;
    }

    #careers .box .tri-1-b h2 {
        font-size: 1.8em;
    }

    #careers .box.off {
        display: none !important;
    }

    #careers .box {
        flex: 1 0 calc(100% - 10px)
    }

    #careers .box.tri-1 {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #careers .box.b,
    #careers .box.c {
        flex: 1 0 calc(100% - 10px);
    }

    #careers .box.go.b2 {
        background-size: cover;
    }

    #careers .box.go.b9 {
        background-position-y: 50% !important;
        background-size: 100% 100%;
    }
}
@media screen and (max-width: 1440px) {
    #careers #sec-separador{
        width: calc(100vw - 5vw);
    }
}
@media (max-width: 880px) {
    #careers #sec-separador { width:100vw; }
}

/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
    #careers #sec-separador{
        width: calc(100vw - 5vw);
    }
}


/* ============ featured ================= */

#featured .position-nav {
    /*left: -5.5em;*/
    color: #000;
}

span.ico {
    width: 47px;
    height: 47px;
    background-size: 100% 100%;
    margin-right: 50px;
    position: fixed;
    bottom: 42%;
    display: none;
}

#featured .box.tri-1 {
    background-image: url('/zubi/featured/featured-tri-w_2x.png');
    background-size: 101% 101%;
    background-position: left;
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out;
}

.ready #featured .box.tri-1 {
    transform: translate3d(0, 0, 0);
}

.ready #featured .big-bg .box .tri-1-b {
    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    display: none;
}

.ready #featured .big-bg .box .tri-1-b.in {
    transform: translateY(0px) translateX(-0px) rotate(0deg);
}

#featured .cont-grid {
    height: 100vh;
}

#featured #big-slide {
    width: 100vw;
    height: 100vh;
    position: absolute;
    display: inline-flex;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #111;
    cursor: pointer;
}

#featured #big-slide video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3D(-50%, -50%, 0);
    transform: translate3D(-50%, -50%, 0);
    object-fit: cover;
}

#featured video#videoBG {
    width: 110vw;
    top: -20vh;
    left: -8vw;
    position: relative;
}

#featured #bg {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: absolute;
}

#featured #big-slide #bg div {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-position: center center;
    background-size: cover;
    image-rendering: auto;
    overflow: hidden;
    transform: translateX(100%);
}

#featured #big-slide #bg div img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#featured #big-slide #bg div.in {
    transform: translateX(0);
    transition: transform .6s ease-out;
}

#featured #big-slide #bg div.out {
    transform: translateX(-100%);
    transition: transform .6s ease-out;
}

.ff #featured #big-slide #bg div {
    filter: none;
}

.ff #featured #big-slide #bg div.in {
    filter: none;
}

.ff #featured #big-slide #bg div.out {
    filter: none;
}


#featured #txt-vid {
    opacity: 1;
    width: 33%;
    left: 10vh;
    bottom: 18vh;
    position: absolute;
    transition: bottom .2s ease-in-out, opacity .2s ease-in-out;
}

#featured #txt-vid.out {
    opacity: 0;
    bottom: 10vh;
}

#featured #txt-vid h3 {
    font-size: 10em;
    font-weight: 500;
    text-transform: uppercase;
}

#big-slide #tri {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: absolute;
}

#big-slide #tri div {
    width: 40vw;
    height: 40vw;
    background-size: 100% 100%;
    right: 0;
    bottom: 0;
    position: absolute;
    transform-origin: 100% 100%;
    transform: rotate(90deg);
}

#big-slide #tri div.in {
    transition: transform .6s ease-in-out;
    transform: rotate(0deg);
}

#big-slide #tri div.out {
    transition: transform .6s ease-in-out;
    transform: rotate(-89deg);
}

#big-slide #tx {
    width: 40vw;
    height: 40vh;
    position: absolute;
    right: 0;
    bottom: 10%;
}

#big-slide #tx div {
    opacity: 0;
}

#big-slide #tx .in {
    transition: opacity .3s;
    opacity: 1;
}

#big-slide #tx .out {
    transition: opacity .2s;
    opacity: 0;
}

#big-slide #tx h3 {
    opacity: 0;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 3.5em;
    margin: 1% 0;
    position: relative;
    transform: translateY(.5em);
    transition: transform .4s ease-out .3s, opacity .4s ease .3s;
}

#big-slide #tx .in h3 {
    transform: translateY(0);
    opacity: 1;
    font-weight: 100;
}

#featured #tx p,
#featured #tx span {
    color: #fff;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 100;
    text-transform: uppercase;
}

#featured #tx p {
    position: relative;
    opacity: 0;
    transform: translateY(2em);
}

#featured #tx .in p {
    transform: translateY(0);
    opacity: 1;
}

#featured #tx p.a {
    transition: transform .4s ease .3s, opacity .3s ease .3s;
}

#featured #tx p.b {
    transition: transform .4s ease .4s, opacity .3s ease .4s;
}

#featured #tx p.c {
    transition: transform .4s ease .5s, opacity .3s ease .5s;
}

#featured #tx span {
    font-weight: 400;
    font-size: 1.1em;
    margin-right: 4px;
    font-weight: 100;
}

#featured #tx .vw-link {
    width: 130px !important;
    height: 14px !important;
    font-size: 1.3em;
    font-weight: 400;
    text-transform: uppercase;
    float: right;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    opacity: 0;
    transform: translateY(1em);
    transition: transform .3s ease .6s, opacity .3s ease .6s;
}

#featured #tx .in .vw-link {
    transform: translateY(0);
    opacity: 1;
}

#big-slide #tx .tx1,
#tx .tx2,
#tx .tx3,
#tx .tx4,
#tx .tx5 {
    width: 35em;
    right: 20%;
    bottom: 8%;
    position: absolute;
    text-align: right;
    cursor: pointer;

}

#featured .big-bg .box.b {
    background: none !important;
}

#featured .big-bg .box:nth-child(1) {
    background: none !important;
}

#featured .big-bg .box .tri-1-b {
    width: 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
    background-repeat: no-repeat;
}

#featured .big-bg .box .tri-1-b h2 {
    text-transform: uppercase;
    font-weight: 300;
}

#featured .big-bg .box.a .sub-box {
    background-size: 100% 100%;
}

#featured .big-bg .box.a .sub-box:after {
    content: '';
    display: block;
    padding-bottom: 150%;
}

#featured .box ul.tri-points {
    width: 170px;
    height: 60px;
    display: inline-flex;
    position: absolute;
    z-index: 20;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
}

#featured .box ul.tri-points li {
    width: 38px;
    height: 45px;
    margin-left: -.6em;
    background-size: 100% !important;
    list-style: none;
    cursor: pointer;
}

#featured .box ul.tri-points li.act,
#featured .box ul.tri-points li:hover {
    background-position: left 119%;
}

#featured .cont2 .box:nth-child(1) {
    background-size: 100% 100%;
}

#featured .cont2 .box-r {
    display: flex;
    flex-direction: row-reverse;
    text-align: right;
}

/* ============ @Media screen mackbook Pro 13"  ================= */
@media screen and (min-device-width: 1200px) and (max-device-width: 1420px) and (-webkit-min-device-pixel-ratio: 1) {
    .logo img {
        max-width: 52px;
    }

    .featured #nav-bar {
        /*transform: translateX(24.5vw);*/
    }
}


@media screen and (max-width: 1680px) {
    #big-slide #tx {
        bottom: 4%;
    }
}

@media screen and (max-width: 1580px) {
    #featured .box {
        flex: 1 0 calc(33.3% - 10px) !important;
    }

    #featured .box:after {
        padding-bottom: 50%;
    }

    #featured .box.b {
        flex: 1 0 calc(66.6% - 10px) !important;
    }

    #big-slide #tri div {
        width: 55vw;
        height: 55vw;
    }

    #featured video#videoBG {
        width: 125%;
        top: 0;
    }

    #featured .box ul.tri-points {
        margin: initial;
        left: 6%;
        right: 0;
        bottom: 0;
    }
}

@media screen and (max-width: 1440px) {
    /*.ready .position-nav {
        top: 25vh !important;
    }
    */

    #big-slide #tri div {
        width: 54vw;
        height: 54vw;
    }

    #featured video#videoBG {
        width: 135%;
        top: 0;
        left: -20%;
    }

    #featured #txt-vid {
        bottom: 12vh;
    }

    #featured #txt-vid h3 {
        font-size: 9em;
    }
}

@media only screen and (max-device-width: 1440px) and (max-device-height: 1050px) {
    /*.ready .position-nav {
        top: 32vh !important;
    }*/

    #big-slide #tri div {
        width: 45vw;
        height: 45vw;
    }

    #featured video#videoBG {
        width: 135%;
        top: 0;
        left: -20%;
    }

    #featured #txt-vid h3 {
        font-size: 9em;
    }
}

@media screen and (max-width: 1180px) {
    #featured {
        max-height: 100vh;
        overflow: hidden;
        height: 100vh;
        top: 0;
    }

    #featured .box {
        flex: 1 0 calc(15% - 10px) !important;
    }

    #featured .box:after {
        padding-bottom: 50%;
    }

    #featured .box.b {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #big-slide #tri div {
        width: 60vw;
        height: 60vw;
    }

    #featured video#videoBG {
        width: 155%;
        top: 0;
        left: -20%;
    }

    #featured #txt-vid {
        opacity: 1;
        width: 70%;
    }
}

@media screen and (max-width: 1024px) {
    #featured .box.tri-1.a {
        height: 33vw;
        width: 33vw;
    }

    #featured .position-nav {
        /*left: -5.5em;*/
        color: #000;
        /*top: 55% !important;*/
    }
}

@media (max-width: 980px) {

    #featured .box {
        flex: 1 0 calc(50% - 10px) !important;
    }

    #featured .box:after {
        padding-bottom: 100%;
    }

    #featured .box ul.tri-ponits {
        width: 90%;
    }

    #featured .big-bg .box .sub-box {
        height: 50vh;
    }

    #featured .box-info {
        width: 60%;
        right: 4%;
        bottom: 0;
    }

    #featured .box-info h3 {
        line-height: 1em;
    }

    #big-slide #tri div {
        width: 65vh;
        height: 65vh;
    }

    #featured video#videoBG {
        width: 185%;
        top: 0;
        left: -40%;
    }

    #featured .box.tri-1.a {
        height: 50vw;
        width: 33vw;
    }
}

@media (max-width: 880px) {
    #featured video#videoBG {
        width: 280%;
        top: 0;
        left: -90%;
    }
}

@media (max-width: 690px) {
    #featured #big-slide {
        width: 100vw;
        max-width: 100vw;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    #featured .big-bg .box.lg-mob {
        flex: 1 0 calc(100% - 10px);
        background-size: 100% 100%;
    }

    #featured .box .tri-1-b h2 {
        font-size: 3em;
    }

    #big-slide #tri div {
        width: 100vw;
        height: 100vw;
        max-width: 100vw;
    }

    #featured .box ul.tri-points {
        bottom: 2em;
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    #featured {
        height: 90vh;
    }

    #featured .cont-grid {
        height: 90vh !important;
    }

    #featured #big-slide,
    #featured #bg,
    #big-slide #tri {
        height: 90vh;
    }

    #featured .big-bg .box.a {
        height: 25vh;
    }

    #featured .big-bg .box .tri-1-b,
    #big-slide #tri {
        padding: 0;
    }

    #big-slide #tri > div {
        width: 55vh;
        height: 55vh;
        position: absolute;
    }

    #big-slide #tx div {
        width: 50%;
        right: -100%;
        bottom: 0;
    }

    #big-slide #tx div.in {
        opacity: 1;
        position: absolute;
        right: 10%;
        width: 50%;
    }

    #featured .box ul.tri-points {
        bottom: 6em;
    }

    #featured .tri-points {
        width: 54% !important;
        height: 24px !important;
        z-index: 0 !important;
        position: absolute !important;
    }

    #featured .box ul.tri-points li {
        width: 32px;
        height: 38px;
        margin-left: 8px !important;
    }

    #big-slide #tx {
        width: 100%;
        height: 60vh;
        right: 0;
        position: absolute;
        bottom: 15%;
    }

    #big-slide #tx .tx1,
    #tx .tx2,
    #tx .tx3,
    #tx .tx4,
    #tx .tx5 {
        width: 30em;
        right: 10%;
    }
}

@media (max-width: 480px) {
    #nav button {
        height: inherit;
        margin-left: 20%;
    }

    #featured .big-bg .box.a {
        height: 25vh;
        width: 50vw;
    }

    #featured .big-bg .box .tri-1-b h2 {
        text-transform: uppercase;
        font-weight: 300;
        font-size: 2em;
        width: 100%;
        padding: .6em;
    }

    #big-slide #tx div {
        width: 50%;
        right: 4%;
        bottom: 0;
        font-size: .8em;
    }

    #big-slide #tx div.in {
        right: 4%;
    }

    #big-slide #tx {
        bottom: 18%;
    }

    #featured #tx .vw-link {
        width: 120px !important;
        height: 14px !important;
        font-size: 1.5em !important;
    }

    #featured #txt-vid {
        width: 80%;
        left: 4%;
        bottom: 24%;
    }

    #featured #txt-vid h3 {
        font-size: 5.4em;
    }

    #featured .box ul.tri-points {
        bottom: 2em;
    }
}

/* Galaxy S9*/
@media only screen and (min-device-width: 360px) and (orientation: portrait) {

    #big-slide #tx .tx1,
    #big-slide #tx .tx2,
    #big-slide #tx .tx3,
    #big-slide #tx .tx3 {
        bottom: 0;
        font-size: .8em;
    }

    #big-slide #tx h3 {
        font-size: 3em;
    }

    #featured .box ul.tri-points {
        bottom: 6em;
    }
}

/* Galaxy S9*/

.ready #featured .big-bg .box .tri-1-b {
    background-image: url("/zubi/common/tri-alpha.png");
}

.ready #featured .big-bg .box.a .sub-box {
    background-image: url("/zubi/featured/tri-cyan.png");
}

/*
.ready #featured #big-slide .stp1 {
    background-image: url("/zubi/featured/hero_5.jpg");
}

.ready #featured #big-slide .stp2 {
    background-image: url("/zubi/featured/hero_1.jpg");
}

.ready #featured #big-slide .stp3 {
    background-image: url("/zubi/featured/feat-bg1.jpg");
}

.ready #featured #big-slide .stp4 {
    background-image: url("/zubi/featured/feat-bg2.jpg");
}

.ready #featured #big-slide .stp5 {
    background-image: url("/zubi/featured/hero_2.jpg");
}
*/

.ready #featured #big-slide #tri .tri1 {
    background-image: url("/zubi/featured/tri-cyan.png");
}

.ready #featured #big-slide #tri .tri2 {
    background-image: url("/zubi/featured/tri-big-red_2x-b.png");
}

.ready #featured #big-slide #tri .tri3 {
    background-image: url("/zubi/featured/tri-yell.png");
}

.ready #featured #big-slide #tri .tri4 {
    background-image: url("/zubi/featured/tri-cyan.png");
}

.ready #featured #big-slide #tri .tri5 {
    background-image: url("/zubi/featured/tri-big-red_2x-b.png");
}

.ready #featured .box ul.tri-points .tri1 {
    background-image: url("/zubi/featured/tri-icon-1_2x.png");
}

.ready #featured .box ul.tri-points .tri1.act {
    background-image: url("/zubi/featured/tri-icon-1_2x.png");
}

.ready #featured .box ul.tri-points .tri2 {
    background-image: url("/zubi/featured/tri-icon-2_2x.png");
}

.ready #featured .box ul.tri-points .tri2.act {
    background-image: url("/zubi/featured/tri-icon-2_2x.png");
}

.ready #featured .box-info ul .vw-link {
    background-image: url("/zubi/featured/arrow-white_2x.png");
}

.ready #featured #tx .vw-link {
    background-image: url("/zubi/featured/arrow-white_2x.png");
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    /*CORE */
    #footer #info-foot .bajada {
        font-size: 1.1em;
        bottom: 18%;
    }

    #nav-bar.open .social {
        /*  top: 80vh !important;
    position: fixed;
    height: 10vh;
    right: 2em !important; */
    }

    #box-social-m .social {
        width: 40%;
    }

    #nav-bar .entradas li a {}

    #nav-bar .entradas li ul li a {
        line-height: 1.2em;
    }

    #footer #info-foot ul.nav-foot {
        width: 100%;
        justify-content: space-around;
        left: -10px;
    }

    #footer #info-foot ul.nav-foot li {
        width: 11em;
        text-align: center;
    }

    #footer a.logo-foot {
        bottom: 22vh;
    }

    /* HOME */
    #featured,
    #featured #big-slide,
    #featured #bg,
    #big-slide #tri {
        height: 80vh;
    }

    #featured .box ul.tri-points {
        bottom: 14%;
    }

    #featured .big-bg .box.a {
        height: 28vh;
        width: 50vw;
    }

    #featured .big-bg .box .tri-1-b h2 {
        text-transform: uppercase;
        font-weight: 300;
        font-size: 2em;
        width: 100%;
        padding: .6em;
    }

    #big-slide #tx .tx1,
    #big-slide #tx .tx2,
    #big-slide #tx .tx3 {
        bottom: 2%;
        font-size: .8em;
    }

    #featured .box ul.tri-points {
        bottom: 12%;
    }

    #big-slide #tx {
        position: absolute;
        bottom: 15.5%;
    }

    #big-slide #tx .tx1.in,
    #big-slide #tx .tx2.in,
    #big-slide #tx .tx3.in,
    #big-slide #tx .tx4.in,
    #big-slide #tx .tx5.in {
        opacity: 1;
        position: absolute;
        right: 4%;
        width: 50%;
    }

    /* WORKDETAIL */

    #workdetail #cont-info-vid,
    .safari #workdetail #cont-info-vid {
        width: 80%;
        padding: 0;
        transform: translate(-20px, -60px) !impotant;
    }
  .workdetail .modal-vid .cont-modal-vid {
    width: 90vw;
    height: 50vh;
    }
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
    #big-slide #tri > div {
        width: 55vh;
        height: 55vh;
        position: absolute;
    }

    #box-social-m .social {
        width: 20%;
    }

    /*FOUNDER*/
    .ready #founder #bgtri {
        background-size: 240%;
        background-position: 0 80%;
    }

    #founder .cont2 .big-sec3.go {
        background-size: 112% !important;
        background-position-y: center;
    }

    /* CONNECT */

    #connect .cont-grid.cont2 {
        height: 112vh !important;
    }

    /* WORKDETAIL */
    .safari .z1 .cont-grid,
    .safari .z4 .cont-grid {
        max-height: 120vh !important;
    }

    #workdetail.cont-video-bg {
        max-height: 93vh !important;
    }
    #workdetail .bl-tri {
    width: 100vw;
    height: 85vw;
}

    #workdetail #cont-info-vid,
    .safari #workdetail #cont-info-vid {
        width: 70% !important;
        padding: 0;
        transform: translate(-30px, -40px) !important;
    }
    .workdetail .modal-vid .cont-modal-vid {
    width: 90vw;
    height: 50vh;
    }
    

}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {

    /* ======== CORE ========== */
    .logo img {
        max-width: 42px !important;
    }

    .big-bg .box .tri-1-b h2 {
        width: 100%;
        padding: 0;
        font-size: 2em !important;
    }

    .big-tri h3 {
        font-size: 1.6em !important;
    }

    #box-social-m .social {
        width: 20%;
        right: 7em;
    }

    /* ========= HOME =========== */
    #featured .big-bg .box.a {
        height: 25vh;
        width: 50vw;
    }

    #featured,
    #featured #big-slide,
    #featured #bg,
    #big-slide #tri {
        height: 80vh;
    }

    #big-slide #tri > div {
        width: 50vh;
        height: 50vh;
        position: absolute;
    }

    #featured .box ul.tri-points {
        width: 170px;
        height: 120px;
        display: inline-flex;
        position: absolute;
        z-index: 20;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 11em;
    }

    #footer #info-foot .bajada {
        font-size: 1.1em;
        bottom: 18%;
        width: 80%;
        margin: 0 auto;
    }

    #featured .box ul.tri-points li.act,
    #featured .box ul.tri-points li:hover {
        background-position: left 112%;
    }

    /* ======== WORK ========== */

    #wrk .box.b:nth-child(2):after {
        padding-bottom: 170% !important;
    }

    #wrk .box.b:nth-child(2) {
        background-position-x: 30%;
    }

    /* ======== FOUNDER ========== */
    .ready #founder #bgtri {
        background-size: 230%;
        background-position: 0 100%;
    }

    #founder #bgtri {
        background-position: 25% -155%;
    }

    .ready #founder #bgtri {
        background-size: 200%;
        background-position: 0 80%;
    }

    .founder .big-tri h3 {
        width: 80%;
    }

    #founder #bgtri-2.go {
        background-size: 450% !important;
    }

    .founder .big-tri h3 {
        font-size: 1.69em;
    }

    .founder .big-bg .box .tri-1-b h2 {
        width: 70%;
        font-size: 2em;
        padding: 0;
    }

    .founder .cont2 .big-sec img {
        max-width: 70%;
        margin-bottom: 10%;
    }

    .founder .cont2 .big-sec p {
        width: 80%;
        font-size: 12px;
    }

    .founder .cont2 .big-sec {
        background-size: cover !important;
        background-position: bottom;
    }

    .founder .cont2 .big-sec,
    .founder .cont2 .big-sec2,
    .founder .cont2 .big-sec3 {
        width: calc(100vw - 0px) !important;
        background-size: cover !important;
        background-position: center;
    }

    #founder .cont2 .box h3,
    #founder .cont2 .big-sec h3 {
        margin: 0 0 1em 0;
    }

    #founder .cont2 .big-sec img {
        margin: 0 auto 4em auto;
        max-width: 80%;
    }

    #founder .cont2 .big-sec3 .box.b {
        margin-top: 1%;
    }

    .founder .cont2 .big-sec2 img {
        max-width: 60%;
    }

    .founder .cont2 .big-sec2 p {
        width: 90vw;
        font-size: 12px;
        margin-top: 30%;
    }

    .ready #founder .g-bg,
    .ready #founder .cont2 .g-bg {
        display: none;
    }





    #culture #sec-separador .btn p {
        position: relative;
    }

    /* CONNECT */
    #connect .box-info p {
        color: #707070 !important;
    }

    #connect .cont-grid.cont2 {
        height: 100vh;
    }

    /* WORKDETAIL */
    #workdetail #info-vid .brand {}

    #workdetail #info-vid h3 {
        font-size: 3em;
    }

    #workdetail .big-bg .box.b {
        /* margin-top: -130%;*/
    }

    #workdetail.cont-video-bg {
        max-height: 78vh;
    }

    #workdetail #cont-info-vid,
    .safari #workdetail #cont-info-vid {
        width: 80%;
        padding: 0;
        transform: translate(-30px, -100px);
    }
  .workdetail .modal-vid .cont-modal-vid {
    width: 90vw;
    height: 50vh;
    }
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}

/* ----------- iPhone XR ----------- */

@media only screen and (device-width : 414px) and (device-height : 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio : 2) {

    /* ========= HOME =========== */
    #featured .big-bg .box.a {
        height: 25vh;
        width: 50vw;
    }

    #big-slide #tri > div {
        width: 50vh;
        height: 50vh;
        position: absolute;
    }

    #featured .box ul.tri-points {
        bottom: 12.5em;
    }

}




/* ----------- iPad´s & tablets ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* STYLES GO HERE */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    /* CORE */

    #footer #info-foot .bajada {
        bottom: 30%;
    }

    /* HOME */
    #featured,
    #featured .cont-grid,
    #featured #big-slide,
    #featured #bg {
        max-height: 96vh;
    }

    #featured #big-slide .stp1.in,
    #featured #big-slide .stp2.in,
    #featured #big-slide .stp3.in,
    #featured #big-slide .stp4.in,
    #featured #big-slide .stp5.in {
        background-size: cover !important;
        background-position: center center;
    }

    #featured .box ul.tri-points {
        margin: inherit;
        left: 8%;
        bottom: 5%;
    }

    #big-slide #tri .tri1,
    #big-slide #tri .tri2,
    #big-slide #tri .tri3,
    #big-slide #tri .tri4,
    #big-slide #tri .tri5 {
        width: 80vw;
        height: 80vw;
    }

    #big-slide #tx {
        width: 60vw;
        height: 60vh;
        bottom: 4%;
    }

    #big-slide #tx .tx1,
    #big-slide #tx .tx2,
    #big-slide #tx .tx3,
    #big-slide #tx .tx4,
    #big-slide #tx .tx5 {
        width: 70%;
        height: 20%;
        right: 10%;
        bottom: 4%;
    }

    /* FOUNDER */
    #founder .box .tri-1-b h2 {
        padding: 0 2% 2% 0 !important;
    }

    #founder .box.b .big-tri {
        background-size: 103% 100%;
    }

    #founder .big-tri h3 {
        width: 90% !important;
        font-size: 3.2em;
    }

    #founder .cont2 .box.b2 p {
        width: 90%;
    }

    #founder .cont2 .big-sec.go {
        background-position-y: 0vh;
        background-size: cover !important;
    }

    #founder #bgtri-2.go {
        background-size: 320%;
    }

    #founder .cont2 .big-sec.go img {
        right: 0;
        width: 50%;
    }

    #founder .cont2 .box h3,
    #founder .cont2 .big-sec h3 {
        margin: 2% 0;
    }

    #founder .cont2 .big-sec p {
        width: 50%;
    }

    #founder .cont2 .big-sec2.go img {
        width: 40%;
    }

    #founder .cont2 .big-sec2 p {
        width: 50%;
    }

    #founder .cont2 .big-sec3 {
        background-position: center;
    }

    #founder .cont2 .big-sec3 .box-text {
        width: 60%;
    }

    #founder .cont2 .big-sec3.go {
        background-size: 112% !important;
        background-position-y: center;
    }

    /* CARREERS */
    .ready #careers .box.tri-1,
    .ready #careers .box .tri-1-b {
        background-size: 100%;
    }

    #founder .cont2 .big-sec3 .box.a {
        width: 33%;
        height: 50vh;
    }

    #founder .cont2 .big-sec3 .box.b {
        height: 50vh;
        margin-top: 41vh;
    }

    #founder .cont2 .big-sec3 .box-text {
        padding: 0 4% 2% 0;
    }

    /* People */
    #people .sec-leaders .box-info {
        padding-right: 6%;
        width: 60%;
    }

    #people .sec-leaders .col-detail .box-info p {
        width: 85%;
    }

    #people .sec-leaders .d2 .quote,
    #people .sec-leaders .d3 .quote {
        left: -92% !important;
        width: 70% !important;
        text-align: left !important;
        top: 25% !important;
    }

    #people .sec-leaders.r-reverse .d2 .quote,
    #people .sec-leaders.r-reverse .d3 .quote {
        width: 80% !important;
        text-align: right !important;
        left: 110% !important;
        top: 25% !important;
    }

    /* WORKDETAIL */
    
    #workdetail a.btn-red {
        /*right: 0 !important; NEJUS*/
    }

    #workdetail .box {
        flex: 1 0 calc(50% - 10px) !important;
    }

    .workdetail .box.b:after {
        padding-bottom: 55%;
    }

    #workdetail #cont-info-vid {
        width: 80%;
        transform: translate(-50px, 60px);
    }
    
    .workdetail .modal-vid .cont-modal-vid {
        width: 80vw;
    }

}


/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {}

/* Portrait */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {

    /* FEATURED */
    .cont-grid {
        /*width: calc(100vw - 5vw);*/
    }

    #featured #big-slide {
        width: 100vw;
        height: 80vh;
    }

    #featured #big-slide #bg div.in {
        background-size: cover !important;
    }

    #featured .box ul.tri-points {
        margin: inherit;
        left: 10% !important;
        bottom: 4% !important;
    }

    #big-slide #tx {
        width: 80vw !important;
        bottom: -2% !important;
    }

    #big-slide #tri {
        height: 90vh;
        max-height: 90vh;
    }

    #featured,
    #featured .cont-grid,
    #featured #big-slide,
    #featured #bg {
        max-height: 80vh;
    }

    #featured #big-slide .stp1.in,
    #featured #big-slide .stp2.in,
    #featured #big-slide .stp3.in,
    #featured #big-slide .stp4.in,
    #featured #big-slide .stp5.in {
        background-size: 140% !important;
    }

    #featured .box ul.tri-points {
        margin: inherit;
        left: 20%;
        bottom: 20%;
    }

    #big-slide #tri .tri1,
    #big-slide #tri .tri2,
    #big-slide #tri .tri3,
    #big-slide #tri .tri4,
    #big-slide #tri .tri5 {
        width: 80vw;
        height: 80vw;
    }

    #big-slide #tx {
        width: 60vw;
        height: 60vh;
        bottom: 4%;
    }




    /* CORE */

    /*
	.position-nav {
        top: 16vh;
    }

    .ready .position-nav {
        top: 14vh !important;
    }
	*/
    #nav-bar .social {
        bottom: 4%;
    }

    #footer {
        max-height: 20vh;
    }


    /* FOUNDER */
    .ready #founder .position-nav {
        /* width: 50%;
        left: -6em !important;
        /*top: 29vh;*/
    }

    .ready #founder #bgtri {
        background-size: 210%;
    }

    #founder .cont-grid {
        /*width: calc(100vw - 5vw);*/
    }

    #founder .cont2 .big-sec2.go {
        opacity: 1;
        filter: saturate(1);
        background-size: cover;
    }

    #founder .cont2 .big-sec,
    #founder .cont2 .big-sec2,
    #founder .cont2 .big-sec3 {
        height: 80vh;
    }

    #founder .cont2 .big-sec3 {
        background-position: center;
        background-size: cover !important;
    }

    #founder .cont2 .box.b2 p {
        width: 80%;
    }

    #founder .cont2 .big-sec3 .box.a {
        height: 35vh;
    }

    #founder .cont2 .big-sec3 .box.b {
        height: 40vh;
    }

    /* PEOPLE */
    #people .box-text {
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    #people .sec-leaders .d1 .quote {
        right: 8%;
    }

    #people .sec-leaders .d2 .quote,
    #people .sec-leaders .d3 .quote {
        left: -45% !important;
        width: 50% !important;
    }

    #people .sec-leaders.r-reverse .d2 .quote,
    #people .sec-leaders.r-reverse .d3 .quote {
        width: 40% !important;
        text-align: right !important;
        left: 105% !important;
        top: 4% !important;
    }

    /* WORK */

    /* WORKDETAIL */
    .workdetail .box.b:after {
        padding-bottom: 51%;
    }

    #workdetail.cont-video-bg {
        max-height: 100vh;
    }

    #workdetail .position-nav {
        left: 2vw;
    }

    #workdetail #info-vid {
        margin-right: 3vw;
    }

    #workdetail .bl-tri {
        width: 60vw;
        height: 60vw;
    }

    #workdetail a.btn-red {
        right: 4.5vw !important;
    }

    #workdetail #info-vid {
        margin-top: 30%;
    }

    #workdetail #cont-info-vid {
        width: 80%;
        transform: translate(-60px, 130px);
    }


    .z1 .cont-grid,
    .z4 .cont-grid {
        max-height: 25vh;
    }

    #code-block iframe {
        margin: auto !important
    }

    /* culture */
    #culture .cont-grid {
        /* width: calc(100vw - 4.9vw) !important;*/
    }

    #culture .position-nav {
        /* top: 18vh !important;*/
        /* left: -5em;*/
    }

    /* service */
    #service .box-info.white {
        font-size: 2.5em;
        width: 100% !important;
    }

    #service .box-info.black {
        width: 100% !important;
    }

    service .box.c2 .box-info p {
        width: 100% !imporatant;
    }

    #service .sec-separador-2 span {
        font-size: 2.5em;
    }

    #service .sec-symbols .box span {
        text-align: center;
        bottom: .4em;
    }

    /* Connect */
    #box-contact2 .form,
    #box-contact2.open .form {
        width: 55%;
    }

    #box-contact3 .form,
    #box-contact3.open .form {
        width: 55%;
        right: 44%;
    }
}

/* Landscape */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {}



/* ANDROID  Portrait */
@media only screen and (max-device-width: 420px) and (max-device-height: 740px) {
    .android #workdetail.cont-video-bg {
        max-height: 93vh;
    }

    .android #workdetail #cont-info-vid {
        width: 70% !important;
        padding: 0;
        transform: translate(-20px, -50px) !important;
    }
      .workdetail .modal-vid .cont-modal-vid {
    width: 90vw;
    height: 50vh;
    }
}

@media only screen and (max-device-width: 390px) and (max-device-height: 680px) {
    .android #workdetail.cont-video-bg {
        max-height: 93vh;
    }

    .android #workdetail #cont-info-vid {
        width: 80% !important;
        padding: 0;
        transform: translate(-20px, -95px) !important;
    }
      .workdetail .modal-vid .cont-modal-vid {
    width: 90vw;
    height: 50vh;
    }
}

@media only screen and (max-device-width: 360px) and (max-device-height: 740px) {
    .android #workdetail #cont-info-vid {
        width: 80% !important;
        padding: 0;
        transform: translate(-10px, 40px) !important;
    }
      .workdetail .modal-vid .cont-modal-vid {
    width: 90vw;
    height: 50vh;
    }
}
.ready #article .box.tri-1 {
    background-image: url("/zubi/culture/tri-a-yellow.png") !important;
}

.ready #article .box .tri-1-b {
    background-image: url("/zubi/culture/tri-c-yellow.png") !important;
}

.ready #article .position-nav {
   /* top: 30vh;*/
    opacity: 1;
    /*left: -4.5em;*/
}

#article #box-tags {
    width: 100%;
    overflow: hidden;
    display: block;
}
#article p.tags {
    width: 8em;
    float: left;
    margin: 0 1em 0 0;
    background-color: #edc600;
    color: #000;
    text-align: center;
    text-transform: uppercase;
}
#article a.btn-red {
width: 6.5em;
    cursor: pointer;
    background: #f7d118;
    padding: 1em;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.2em;
    color: #000;
    position: absolute;
    text-align: right;
    /*top: 55vh;*/
    right: 0;
    background-image: url(/zubi/common/a-back.png);
    background-position: 1em center;
    background-repeat: no-repeat;
}



#article .box.tri-1 {
    background-size: 100% 100%;
    background-position: 50% 50%;
    z-index: 99;
    transform: translate3d(-100%, -100%, 0);
    transition: transform .4s ease-out;
}

.ready #article .box.tri-1 {
    transform: translate3d(0, 0, 0);
}

#article .box .tri-1-b {
    width: 100%;
    background-size: 102% 102% !important;
    background-position: center;
    display: flex;
    flex-direction: row-reverse;

    transform: translateY(-80px) translateX(-170px) rotate(120deg);
    transform-origin: 0 50%;
    transition: transform .4s ease-out .4s;
}

.ready #article .box .tri-1-b {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
}

#article .box .tri-1-b h2 {
    transition: opacity .4s ease-out 1s, margin-right .4s ease-out 1s;
    opacity: 0;
    margin-right: 6%;
}

#article .box .tri-1-b.go h2 {
    opacity: 1;
    margin-right: 0;
}

#article .box .yellow-hov {
    opacity: .6;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 0;
    background-size: 210%;
    background-position: 50% -100%;
    background-image: url('/zubi/founder/tri-gr.png');
    transition: background-position .6s ease-out .4s, opacity .4s ease-in 1s;
}

#article .box.go .yellow-hov {
    opacity: 1;
    background-position: 0% 98%;
}


#article .box.prt {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#article .box.a {
    background: #01C4EC;
    background-position: 0 0;
    background-size: 100%;
    position: relative;
	background-repeat: no-repeat !important;
}

#article .box.b {
    background: #070707;
    display: flex;
    justify-content: center;
}

#article .art-info {
    width: 60%;
    padding: 4% 0;
}

#article .art-info h2 {
    font-size: 3.6em;
    text-transform: uppercase;
    font-weight: 200;
    color: #f7d118;
}

    /*NEW CHANGES FOR TLML*/
#article .art-info p {
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.8em;
}
#article .art-info a {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8em;
	color: #01C4EC;
}

@media (max-width: 980px) {
    #article .box.a {
    flex: 1 0 calc(100% - 10px);
    max-height: 50vh;
    }
    #article a.btn-red {
    top: 100vh;
    }
}
@media (max-width: 540px) {
    #article .box.prt{
        display: none;
    }  
    #article .art-info {
    width: 80%;
    padding: 4% 0;
}
#article a.btn-red {
    top: 50vh;
}
}
    /* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (orientation: landscape) {
    html, body {
        background-color: #121212;
    }
    #nav-bar.open {
        width: 100vw;
        height: 90vh;
    }
    #nav-bar.open .entradas {
        top: 0;
        left: 0;
    }
    #nav-bar.open .entradas {
        top: 4em;
        left: 0;
        max-height: 65vh;
        overflow: scroll;
    }
    /* Featured */
    #featured .big-bg .box .tri-1-b {
        width: 50%;
    }
    #featured .big-bg .box .tri-1-b {
        width: 50%;
        padding: 0;
    }
    #featured .big-bg .box .tri-1-b h2 {

        font-size: 1.8em;
    }
    #featured .box:after {
        padding-bottom: 50%;
    }
    #featured #big-slide {
        width: 100vw;
        max-width: 100vw;
        overflow-y: hidden;
        overflow-x: hidden;
    }
    #big-slide #tx {
        width: 100%;
        height: 100vh;
        right: 0;
        position: absolute;
        bottom: 15%;
    }
    #big-slide #tx .tx1, #big-slide #tx .tx2, #big-slide #tx .tx3, #big-slide #tx .tx4, #big-slide #tx .tx5 {
        width: 50%;
        right: 2%;
        bottom: 0;
        font-size: .8em;
    }
    #featured .box ul.tri-points {
        left: 10%;
        bottom: -6em;
        margin: inherit;
    }
    #big-slide #tx h3{
        font-size: 2.2em;
    }
    /* Featured */

    #footer {
        height: 80vh;
        max-height: 100vh;
    }
}





/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */


/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {

}

/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

}


/* ----------- iPad ----------- */

/* Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 2048px) 
and (orientation : landscape) {
    .t #nav-bar .social {
        bottom: 10vh;
    }
    .t #big-slide #tx{
        right: 6vw;
    }
}body.e404 {
    background: #E5E5E5;
}

.e404 .tri404 {
    width: 33vw;
    height: 33vw;
    background-image: url(/zubi/404/tri404@2x.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;

    transform: translateX(-100vw);
    -webkit-transition: transform .4s ease .4s;
    transition: transform .4s ease .4s;
}

.e404.ready .tri404 {
    transform: translateX(0);
}

.e404 .c {
    text-align: center;
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
}

.e404 .c img.maq {
    max-width: 344px;
    margin: 0 auto;
    transform: translateX(150vw);
    -webkit-transition: transform .4s ease .8s;
    transition: transform .4s ease .8s;
}

.e404.ready .c img.maq {
    transform: translateX(0);
}

.e404 ._404 {
    font-size: 220px;
    position: relative;
    display: inline-block;
    z-index: 2;
    height: 250px;
    letter-spacing: 15px;
}

.e404 ._1 {
    text-align: center;
    display: block;
    position: relative;
    font-size: 65px;
    font-weight: 400;
    line-height: 80%;
    margin-bottom: 20px;
    opacity: 0;
    -webkit-transition: opacity .4s ease 1s;
    transition: opacity .4s ease 1s;
}

.e404.ready ._1 {
    opacity: 1;
}

.e404 ._2 {
    text-align: center;
    display: block;
    position: relative;
    opacity: 0;
    -webkit-transition: opacity .4s ease 1.4s;
    transition: opacity .4s ease 1.4s;
}

.e404.ready ._2 {
    opacity: 1;
}

.e404 ._2 p {
    font-weight: 300;
    width: 50%;
    margin: 10px auto;
    text-align: center;
    display: block;
    position: relative;
    font-size: 15px;
    color: #333;
}


.e404 .btn {
    background: #fff;
    position: relative;
    display: inline-block;
    width: 298px;
    padding: 10px;
    z-index: 5;
    font-size: 18px;
    margin: 0 auto;
    color: #333;
    text-decoration: none;
    -webkit-transition: .4s ease;
    transition: .4s ease;
    opacity: 0;
    -webkit-transition: opacity .4s ease 1.8s;
    transition: opacity .4s ease 1.8s;
}

.e404.ready .btn {
    opacity: 1;
}

.e404 .btn:hover {
    background: #333;
    color: #fff;
}

.e404 #footer #info-foot ul.nav-foot {
    width: 60vw;
}

@media screen and (max-width: 1020px) {
    .e404 .tri404 {
        width: 70vw;
        height: 70vw;
    }

    .e404 #footer #info-foot ul.nav-foot {
        width: 80vw;
    }
}

@media screen and (max-width: 580px) {
    .e404 .c img.maq {
        max-width: 254px;
    }
    .e404 ._1{
            font-size: 35px;
    }
    .e404 ._2 p{
        width: 100%;
    }
    .e404 .btn {
    width: 200px;
    font-size: 15px;
    }
    .e404 #footer #info-foot ul.nav-foot {
    width: 90%;
    }
}
/**
 * SoundManager 2: "Bar UI" player - CSS
 * Copyright (c) 2014, Scott Schiller. All rights reserved.
 * http://www.schillmania.com/projects/soundmanager2/
 * Code provided under BSD license.
 * http://schillmania.com/projects/soundmanager2/license.txt
 */

.sm2-bar-ui .sm2-main-controls, .sm2-bar-ui .sm2-playlist-drawer {
    background-color: #181818;
}


.sm2-bar-ui {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: helvetica, arial, verdana, sans-serif;
    font-weight: normal;
    /* prevent background border bleed */
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    /* because indeed, fonts do look pretty "fat" otherwise in this case. */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /* general font niceness? */
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-width: 20em;
    max-width: 30em;
    /* take out overflow if you want an absolutely-positioned playlist dropdown. */
    border-radius: 2px;
    overflow: hidden;
    /* just for fun (animate normal / full-width) */
    transition: max-width 0.2s ease-in-out;
}

.sm2-bar-ui .sm2-playlist li {
    text-align: center;
    margin-top: -2px;
    font-size: 95%;
    line-height: 1em;
}

.sm2-bar-ui.compact {
    min-width: 1em;
    max-width: 15em;
}

.sm2-bar-ui ul {
    line-height: 1em;
}

/* want things left-aligned? */
.sm2-bar-ui.left .sm2-playlist li {
    text-align: left;
}

.sm2-bar-ui .sm2-playlist li .load-error {
    cursor: help;
}

.sm2-bar-ui.full-width {
    max-width: 100%;
    z-index: 5;
}

.sm2-bar-ui.fixed {
    position: fixed;
    top: auto;
    bottom: 0px;
    left: 0px;
    border-radius: 0px;
    /* so the absolutely-positioned playlist can show... */
    overflow: visible;
    /* and this should probably have a high z-index. tweak as needed. */
    z-index: 999;
}

.sm2-bar-ui.fixed .bd,
.sm2-bar-ui.bottom .bd {
    /* display: table; */
    border-radius: 0px;
    border-bottom: none;
}

.sm2-bar-ui.bottom {
    /* absolute bottom-aligned UI */
    top: auto;
    bottom: 0px;
    left: 0px;
    border-radius: 0px;
    /* so the absolutely-positioned playlist can show... */
    overflow: visible;
}

.sm2-bar-ui.playlist-open .bd {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-color: transparent;
}

.sm2-bar-ui .bd,
.sm2-bar-ui .sm2-extra-controls {
    position: relative;
    background-color: #2288cc;
    /*
    transition: background 0.2s ease-in-out;
    */
}

.sm2-bar-ui .sm2-inline-gradient {
    /* gradient */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.125) 5%, rgba(255,255,255,0.125) 45%, rgba(255,255,255,0.15) 50%, rgba(0,0,0,0.1) 51%, rgba(0,0,0,0.1) 95%); /* W3C */
}

.sm2-bar-ui.flat .sm2-inline-gradient {
    background-image: none;
}

.sm2-bar-ui.flat .sm2-box-shadow {
    display: none;
    box-shadow: none;
}

.sm2-bar-ui.no-volume .sm2-volume {
    /* mobile devices (android + iOS) ignore attempts to set volume. */
    display: none;
}

.sm2-bar-ui.textured .sm2-inline-texture {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* for example */
    /* background-image: url(../image/wood_pattern_dark.png); */
    /* additional opacity effects can be applied here. */
    opacity: 0.75;

}

.sm2-bar-ui.textured.dark-text .sm2-inline-texture {
    /* dark text + textured case: use light wood background (for example.) */
    /* background-image: url(../image/patterns/wood_pattern.png); */
}

.sm2-bar-ui.textured.dark-text .sm2-playlist-wrapper {
    /* dark text + textured case: ditch 10% dark on playlist body. */
    background-color: transparent;
}

.sm2-bar-ui.textured.dark-text .sm2-playlist-wrapper ul li:hover a,
.sm2-bar-ui.textured.dark-text .sm2-playlist-wrapper ul li.selected a {
    /* dark + textured case: dark highlights */
    background-color: rgba(0,0,0,0.1);
    background-image: url(../image/black-10.png);
    /* modern browsers don't neeed the image */
    background-image: none, none;
}

.sm2-bar-ui .bd {
    display: table;
    border-bottom: none;
}

.sm2-bar-ui .sm2-playlist-wrapper {
    background-color: rgba(0,0,0,0.1);
}

.sm2-bar-ui .sm2-extra-controls .bd {
    background-color: rgba(0,0,0,0.2);
}


.sm2-bar-ui.textured .sm2-extra-controls .bd {
    /* lighten extra color overlays */
    background-color: rgba(0,0,0,0.05);
}

.sm2-bar-ui .sm2-extra-controls {
    background-color: transparent;
    border: none;
}

.sm2-bar-ui .sm2-extra-controls .bd {
    /* override full-width table behaviour */
    display: block;
    border: none;
}

.sm2-bar-ui .sm2-extra-controls .sm2-inline-element {
    display: inline-block;
}

.sm2-bar-ui,
.sm2-bar-ui .bd a {
    color: #fff;
}

.sm2-bar-ui.dark-text,
.sm2-bar-ui.dark-text .bd a {
    color: #000;
}

.sm2-bar-ui.dark-text .sm2-inline-button {
    /* Warning/disclaimer: SVG might be fuzzy when inverted on Chrome, losing resolution on hi-DPI displays. */
    -webkit-filter: invert(1);
    /* SVG-based invert filter for Firefox */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");
    /* IE 8 inverse filter, may only match pure black/white */
    /* filter: xray; */
    /* pending W3 standard */
    filter: invert(1);
    /* not you, IE < 10. */
    filter: none\9;
}

.sm2-bar-ui .bd a {
    text-decoration: none;
}

.sm2-bar-ui .bd .sm2-button-element:hover {
    background-color: rgba(0,0,0,0.1);
    background-image: url(../image/black-10.png);
    background-image: none, none;
}

.sm2-bar-ui .bd .sm2-button-element:active {
    background-color: rgba(0,0,0,0.25);
    background-image: url(../image/black-25.png);
    background-image: none, none;
}

.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active .sm2-inline-button,
.sm2-bar-ui .bd .active .sm2-inline-button/*,
.sm2-bar-ui.playlist-open .sm2-menu a */{
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -webkit-transform-origin: 50% 50%;
    /* firefox doesn't scale quite right. */
    transform: scale(0.9);
    transform-origin: 50% 50%;
    /* firefox doesn't scale quite right. */
    -moz-transform: none;
}

.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:hover,
.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active,
.sm2-bar-ui .bd .active {
    background-color: rgba(0,0,0,0.1);
    background-image: url(../image/black-10.png);
    background-image: none, none;
}

.sm2-bar-ui .bd .sm2-extra-controls .sm2-button-element:active {
    /* box shadow is excessive on smaller elements. */
    box-shadow: none;
}

.sm2-bar-ui {
    /* base font size */
    font-size: 15px;
    text-shadow: none;
}

.sm2-bar-ui .sm2-inline-element {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    overflow: hidden;
}

.sm2-bar-ui .sm2-inline-element,
.sm2-bar-ui .sm2-button-element .sm2-button-bd {
    position: relative;
    /**
     * .sm2-button-bd exists because of a Firefox bug from 2000
     * re: nested relative / absolute elements inside table cells.
     * https://bugzilla.mozilla.org/show_bug.cgi?id=63895
     */
}

.sm2-bar-ui .sm2-inline-element,
.sm2-bar-ui .sm2-button-element .sm2-button-bd {
    /**
     * if you play with UI width/height, these are the important ones.
     * NOTE: match these values if you want square UI buttons.
     */
    min-width: 2.8em;
    min-height: 2.8em;
}

.sm2-bar-ui .sm2-inline-button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.sm2-bar-ui .sm2-extra-controls .bd {
    /* don't double-layer. */
    background-image: none;
    background-color: rgba(0,0,0,0.15);
}

.sm2-bar-ui .sm2-extra-controls .sm2-inline-element {
    width: 25px; /* bare minimum */
    min-height: 1.75em;
    min-width: 2.5em;
}

.sm2-bar-ui .sm2-inline-status {
    line-height: 100%;
    /* how much to allow before truncating song artist / title with ellipsis */
    display: inline-block;
    min-width: 200px;
    max-width: 20em;
    /* a little more spacing */
    padding-left: 0.75em;
    padding-right: 0.75em;
}

.sm2-bar-ui .sm2-inline-element {
    /* extra-small em scales up nicely, vs. 1px which gets fat */
    border-right: 0.075em dotted #666; /* legacy */
    border-right: 0.075em solid rgba(0,0,0,0.1);
}

.sm2-bar-ui .sm2-inline-element.noborder {
    border-right: none;
}

.sm2-bar-ui .sm2-inline-element.compact {
    min-width: 2em;
    padding: 0px 0.25em;
}

.sm2-bar-ui .sm2-inline-element:first-of-type {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    overflow: hidden;
}

.sm2-bar-ui .sm2-inline-element:last-of-type {
    border-right: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.sm2-bar-ui .sm2-inline-status a:hover {
    background-color: transparent;
    text-decoration: underline;
}

.sm2-inline-time,
.sm2-inline-duration {
    display: table-cell;
    width: 1%;
    font-size: 75%;
    line-height: 0.9em;
    min-width: 2em; /* if you have sounds > 10:00 in length, make this bigger. */
    vertical-align: middle;
}

.sm2-bar-ui .sm2-playlist {
    position: relative;
    height: 1.45em;
}

.sm2-bar-ui .sm2-playlist-target {
    /* initial render / empty case */
    position: relative;
    min-height: 1em;
}

.sm2-bar-ui .sm2-playlist ul {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    list-style-type: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sm2-bar-ui p,
.sm2-bar-ui .sm2-playlist ul,
.sm2-bar-ui .sm2-playlist ul li {
    margin: 0px;
    padding: 0px;
}

.sm2-bar-ui .sm2-playlist ul li {
    position: relative;
}

.sm2-bar-ui .sm2-playlist ul li,
.sm2-bar-ui .sm2-playlist ul li a {
    position: relative;
    display: block;
    /* prevent clipping of characters like "g" */
    height: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.sm2-row {
    position: relative;
    display: table-row;
}

.sm2-progress-bd {
    /* spacing between progress track/ball and time (position) */
    padding: 0px 0.8em;
}

.sm2-progress .sm2-progress-track,
.sm2-progress .sm2-progress-ball,
.sm2-progress .sm2-progress-bar {
    position: relative;
    width: 100%;
    height: 0.65em;
    border-radius: 0.65em;
}

.sm2-progress .sm2-progress-bar {
    /* element which follows the progres "ball" as it moves */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0px;
    background-color: rgba(0,0,0,0.33);
    background-image: url(../image/black-33.png);
    background-image: none, none;
}

.volume-shade,
.playing .sm2-progress .sm2-progress-track,
.paused .sm2-progress .sm2-progress-track {
    cursor: pointer;
}

.playing .sm2-progress .sm2-progress-ball {
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

.sm2-progress .sm2-progress-ball {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1em;
    height: 1em;
    margin: -0.2em 0px 0px -0.5em;
    width: 14px;
    height: 14px;
    margin: -2px 0px 0px -7px;
    width: 0.9333em;
    height: 0.9333em;
    margin: -0.175em 0px 0px -0.466em;
    background-color: #fff;
    padding: 0px;
    /*
     z-index: 1;
    */
    transition: transform 0.15s ease-in-out;
}

/*
.sm2-bar-ui.dark-text .sm2-progress .sm2-progress-ball {
 background-color: #000;
}
*/

.sm2-progress .sm2-progress-track {
    background-color: rgba(0,0,0,0.4);
    background-image: url(../image/black-33.png); /* legacy */
    background-image: none, none; /* modern browsers */
}

/* scrollbar rules have to be separate, browsers not supporting this syntax will skip them when combined. */
.sm2-playlist-wrapper ul::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.4);
}

.playing.grabbing .sm2-progress .sm2-progress-track,
.playing.grabbing .sm2-progress .sm2-progress-ball {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.sm2-bar-ui.grabbing .sm2-progress .sm2-progress-ball {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.sm2-inline-button {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /* hide inner text */
    line-height: 10em;
    /**
     * image-rendering seems to apply mostly to Firefox in this case. Use with caution.
     * https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#Browser_compatibility
     */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    -ms-interpolation-mode: bicubic;
}

.sm2-icon-play-pause,
.sm2-icon-play-pause:hover,
.paused .sm2-icon-play-pause:hover {
    background-image: url('/zubi/skin/int/play.svg');
    background-image: none, url('/zubi/common/play.svg');
    background-size: 67.5%;
    background-position: 40% 53%;
}

.playing .sm2-icon-play-pause {
    background-image: url(/zubi/skin/int/pause.png);
    background-image: none, url('/zubi/common/pause.svg');
    background-size: 57.6%;
    background-position: 50% 53%;
}

.sm2-volume-control {
    background-image: url(/zubi/skin/int/volume.png);
    background-image: none, url('/zubi/common/volume_2.svg');
}

.sm2-volume-control,
.sm2-volume-shade {
    background-position: 42% 50%;
    background-size: 56%;
}

.volume-shade {
    filter: alpha(opacity=33); /* <= IE 8 */
    opacity: 0.33;
    /* -webkit-filter: invert(1);*/
    background-image: url(../image/icomoon/entypo-25px-000000/PNG/volume.png);
    background-image: none, url('/zubi/common/volume.svg');
}

.sm2-icon-menu {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/list2.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/list2.svg);
    background-size: 58%;
    background-position: 54% 51%;
}

.sm2-icon-previous {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/first.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/first.svg);
}

.sm2-icon-next {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/last.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/last.svg);
}

.sm2-icon-previous,
.sm2-icon-next {
    background-size: 49.5%;
    background-position: 50% 50%;
}


.sm2-extra-controls .sm2-icon-previous,
.sm2-extra-controls .sm2-icon-next {
    backgound-size: 53%;
}

.sm2-icon-shuffle {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/shuffle.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/shuffle.svg);
    background-size: 45%;
    background-position: 50% 50%;
}

.sm2-icon-repeat {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/loop.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/loop.svg);
    background-position: 50% 43%;
    background-size: 54%;
}

.sm2-extra-controls .sm2-icon-repeat {
    background-position: 50% 45%;
}

.sm2-playlist-wrapper ul li .sm2-row {
    display: table;
    width: 100%;
}

.sm2-playlist-wrapper ul li .sm2-col {
    display: table-cell;
    vertical-align: top;
    /* by default, collapse. */
    width: 0%;
}

.sm2-playlist-wrapper ul li .sm2-col.sm2-wide {
    /* take 100% width. */
    width: 100%;
}

.sm2-playlist-wrapper ul li .sm2-icon {
    display: inline-block;
    overflow: hidden;
    width: 2em;
    color: transparent !important; /* hide text */
    white-space: nowrap; /* don't let text affect height */
    padding-left: 0px;
    padding-right: 0px;
    text-indent: 2em; /* IE 8, mostly */
}

.sm2-playlist-wrapper ul li .sm2-icon,
.sm2-playlist-wrapper ul li:hover .sm2-icon,
.sm2-playlist-wrapper ul li.selected .sm2-icon {
    background-size: 55%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sm2-playlist-wrapper ul li .sm2-col {
    /* sibling table cells get borders. */
    border-right: 1px solid rgba(0,0,0,0.075);
}

.sm2-playlist-wrapper ul li.selected .sm2-col {
    border-color: rgba(255,255,255,0.075);
}

.sm2-playlist-wrapper ul li .sm2-col:last-of-type {
    border-right: none;
}

.sm2-playlist-wrapper ul li .sm2-cart,
.sm2-playlist-wrapper ul li:hover .sm2-cart,
.sm2-playlist-wrapper ul li.selected .sm2-cart {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/cart.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/cart.svg);
    /* slight alignment tweak */
    background-position: 48% 50%;
}

.sm2-playlist-wrapper ul li .sm2-music,
.sm2-playlist-wrapper ul li:hover .sm2-music,
.sm2-playlist-wrapper ul li.selected .sm2-music {
    background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/music.png);
    background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/music.svg);
}

.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li .sm2-cart,
.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover .sm2-cart,
.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li.selected .sm2-cart {
    background-image: url(../image/icomoon/entypo-25px-000000/PNG/cart.png);
    background-image: none, url(../image/icomoon/entypo-25px-000000/SVG/cart.svg);
}

.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li .sm2-music,
.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover .sm2-music,
.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li.selected .sm2-music {
    background-image: url(../image/icomoon/entypo-25px-000000/PNG/music.png);
    background-image: none, url(../image/icomoon/entypo-25px-000000/SVG/music.svg);
}


.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li .sm2-col {
    border-left-color: rgba(0,0,0,0.15);
}

.sm2-playlist-wrapper ul li .sm2-icon:hover {
    background-color: rgba(0,0,0,0.33);
}

.sm2-bar-ui .sm2-playlist-wrapper ul li .sm2-icon:hover {
    background-color: rgba(0,0,0,0.45);
}

.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li.selected .sm2-icon:hover {
    background-color: rgba(255,255,255,0.25);
    border-color: rgba(0,0,0,0.125);
}

.sm2-progress-ball .icon-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: none, url(../image/icomoon/free-25px-000000/SVG/spinner.svg);
    background-size: 72%;
    background-position: 50%;
    background-repeat: no-repeat;
    display: none;
}

.playing.buffering .sm2-progress-ball .icon-overlay {
    display: block;
    -webkit-animation: spin 0.6s linear infinite;
    animation: spin 0.6s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.sm2-element ul {
    font-size: 95%;
    list-style-type: none;
}

.sm2-element ul,
.sm2-element ul li {
    margin: 0px;
    padding: 0px;
}

.bd.sm2-playlist-drawer {
    /* optional: absolute positioning */
    /* position: absolute; */
    z-index: 3;
    border-radius: 0px;
    width: 100%;
    height: 0px;
    border: none;
    background-image: none;
    display: block;
    overflow: hidden;
    transition: height 0.2s ease-in-out;
}

.sm2-bar-ui.fixed .bd.sm2-playlist-drawer,
.sm2-bar-ui.bottom .bd.sm2-playlist-drawer {
    position: absolute;
}

.sm2-bar-ui.fixed .sm2-playlist-wrapper,
.sm2-bar-ui.bottom .sm2-playlist-wrapper {
    padding-bottom: 0px;
}

.sm2-bar-ui.fixed .bd.sm2-playlist-drawer,
.sm2-bar-ui.bottom .bd.sm2-playlist-drawer {
    /* show playlist on top */
    bottom: 2.8em;
}

.sm2-bar-ui .bd.sm2-playlist-drawer {
    opacity: 0.5;
    /* redraw fix for Chrome, background color doesn't always draw when playlist drawer open. */
    transform: translateZ(0);
}

/* experimental, may not perform well. */
/*
.sm2-bar-ui .bd.sm2-playlist-drawer a {
 -webkit-filter: blur(5px);
}
*/

.sm2-bar-ui.playlist-open .bd.sm2-playlist-drawer {
    height: auto;
    opacity: 1;
}

.sm2-bar-ui.playlist-open .bd.sm2-playlist-drawer a {
    -webkit-filter: none; /* blur(0px) was still blurred on retina displays, as of 07/2014 */
}

.sm2-bar-ui.fixed.playlist-open .bd.sm2-playlist-drawer .sm2-playlist-wrapper,
.sm2-bar-ui.bottom.playlist-open .bd.sm2-playlist-drawer .sm2-playlist-wrapper {
    /* extra padding when open */
    padding-bottom: 0.5em;
    box-shadow: none;
}

.sm2-bar-ui .bd.sm2-playlist-drawer {
    transition: all 0.2s ease-in-out;
    transition-property: transform, height, opacity, background-color, -webkit-filter;
}

.sm2-bar-ui .bd.sm2-playlist-drawer a {
    transition: -webkit-filter 0.2s ease-in-out;
}

.sm2-bar-ui .bd.sm2-playlist-drawer .sm2-inline-texture {
    /* negative offset for height of top bar, so background is seamless. */
    background-position: 0px -2.8em;
}

.sm2-box-shadow {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 1px 6px rgba(0,0,0,0.15);
}

.sm2-playlist-wrapper {
    position: relative;
    padding: 0.5em 0.5em 0.5em 0.25em;
    background-image: none, none;
}

.sm2-playlist-wrapper ul {
    max-height: 9.25em;
    overflow: auto;
}

.sm2-playlist-wrapper ul li {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sm2-playlist-wrapper ul li:nth-child(odd) {
    background-color: rgba(255,255,255,0.03);
}

.sm2-playlist-wrapper ul li a {
    display: block;
    padding: 0.5em 0.25em 0.5em 0.75em;
    margin-right: 0px;
    font-size: 90%;
    vertical-align: middle;
}

.sm2-playlist-wrapper ul li a.sm2-exclude {
    display: inline-block;
}

.sm2-playlist-wrapper ul li a.sm2-exclude .label {
    font-size: 95%;
    line-height: 1em;
    margin-left: 0px;
    padding: 2px 4px;
}

.sm2-playlist-wrapper ul li:hover a {
    background-color: rgba(0,0,0,0.20);
    background-image: url(../image/black-20.png);
    background-image: none, none;
}

.sm2-bar-ui.dark-text .sm2-playlist-wrapper ul li:hover a {
    background-color: rgba(255,255,255,0.1);
    background-image: url(../image/black-10.png);
    background-image: none, none;
}

.sm2-playlist-wrapper ul li.selected a {
    background-color: rgba(0,0,0,0.25);
    background-image: url(../image/black-20.png);
    background-image: none, none;
}

.sm2-bar-ui.dark-text ul li.selected a {
    background-color: rgba(255,255,255,0.1);
    background-image: url(../image/black-10.png);
    background-image: none, none;
}

.sm2-bar-ui .disabled {
    filter: alpha(opacity=33); /* <= IE 8 */
    opacity: 0.33;
}

.sm2-bar-ui .bd .sm2-button-element.disabled:hover {
    background-color: transparent;
}

.sm2-bar-ui .active,
    /*.sm2-bar-ui.playlist-open .sm2-menu,*/
.sm2-bar-ui.playlist-open .sm2-menu:hover {
    /* depressed / "on" state */
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.1);
    background-image: none;
}

.firefox-fix {
    /**
     * This exists because of a Firefox bug from 2000
     * re: nested relative / absolute elements inside table cells.
     * https://bugzilla.mozilla.org/show_bug.cgi?id=63895
     */
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* some custom scrollbar trickery, where supported */

.sm2-playlist-wrapper ul::-webkit-scrollbar {
    width: 10px;
}

.sm2-playlist-wrapper ul::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.33);
    border-radius: 10px;
}

.sm2-playlist-wrapper ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fff;
}

.sm2-extra-controls {
    font-size: 0px;
    text-align: center;
}

.sm2-bar-ui .label {
    position: relative;
    display: inline-block;
    font-size: 0.7em;
    margin-left: 0.25em;
    vertical-align: top;
    background-color: rgba(0,0,0,0.25);
    border-radius: 3px;
    padding: 0px 3px;
    box-sizing: padding-box;
}

.sm2-bar-ui.dark-text .label {
    background-color: rgba(0,0,0,0.1);
    background-image: url(../image/black-10.png);
    background-image: none, none;
}

.sm2-bar-ui .sm2-playlist-drawer .label {
    font-size: 0.8em;
    padding: 0px 3px;
}

/* --- full width stuff --- */

.sm2-bar-ui .sm2-inline-element {
    display: table-cell;
}

.sm2-bar-ui .sm2-inline-element {
    /* collapse */
    width: 1%;
}

.sm2-bar-ui .sm2-inline-status {
    /* full width */
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.sm2-bar-ui > .bd {
    width: 100%;
}

.sm2-bar-ui .sm2-playlist-drawer {
    /* re-hide playlist */
    display: block;
    overflow: hidden;
}

#nav-bar {
    width: 40em;
    transform: translateX(35em);
}
#nav-bar.open {
   /* width: 40em;*/
}

@media screen and (max-width: 850px){
	#nav-bar {
	    width: 100%;
	    height: 100vh;
	    transform: translateY(calc(100vh - 5em)) translateX(0);
	}
}




.cont-grid { width: calc(100% - 5.01em); }
#workdetail .cont-grid { width: 100%; }
@media screen and (max-width: 850px){
	.cont-grid, #workdetail .cont-grid  { width: 100%; }
	#workdetail.cont-video-bg {	width: 100%; }
	.workdetail .cont-grid { width: 100%; }
}






