@import url("https://use.typekit.net/kfa5oml.css");
:root {
    --line: #fff;
    --line-active: #ff0083;
    --line-active-2: #00c9e1;
    --line-active-3: #ffff00;
}

body {
    font-family: acumin-pro-wide, sans-serif;
    font-weight: 700;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: bicyclette, sans-serif;
    font-weight: 300;
    letter-spacing: -0.0125em;
}
p {
    font-size: calc(10px + 6*(100vw - 320px)/1600);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.text-pink {
    color: #ff0083!important;
}
.text-cyan {
    color: #00c9e1!important;
}
.text-yellow {
    color: #ffff00!important;
}
.is-fade {
    visibility: hidden;
    opacity: 0;
}
a, a:hover {
    text-decoration: none;
    color: inherit;
}
.show-name a:hover {
    opacity: 0.67;
}
/* 01. -------------- INTRO -------------- */

.intro {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #ffff00;
    padding: 2.5em;
    transition: all 0.6s ease-in;
    z-index: 1000;
    cursor: pointer;
}
.intro.is-fade {
    pointer-events: none;
}
.intro-logo {
    top: 2.5em;
    position: absolute;
    width: auto;
    height: 120px;
}
.intro-h1 {
    font-size: calc(40px + 48*(100vw - 320px)/1600);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 300;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 9.62962962962963vh;
}
.intro-h2 {
    font-size: calc(20px + 28*(100vw - 320px)/1600);
    line-height: 1;
    letter-spacing: 0;
    font-weight: 300;
    text-transform: uppercase;
    color: #000;
}

/* 02. -------------- HEADER -------------- */
header {
    position: relative;
    padding: 1.5em;
    z-index: 105;
    transition: background-color 0.3s ease;
}
header.is-active {
    background-color: var(--line-active-3);
    transition: background-color 0s ease 0.6s;
}
header.is-fixed{
    background-color: #fff;
}

.header-logo {
    width: auto;
    height: 72px;
}
@media screen and (min-width: 768px) {
    header {
        padding: 2.5em 3.5em;
    }
    .header-logo {
        height: 120px;
    }    
}
/* 03. -------------- MAIN MENU -------------- */
.main-menu li + li {
    margin-top: 2em;
}
.main-menu li a {
    font-family: bicyclette, sans-serif;
    font-weight: 400;
    display: inline-block;
    position: relative;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
    line-height: 1.5;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}
.main-menu li a svg {
    width: 76px;
    height: 40px;
    position: absolute;
    opacity: 0;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 7px) translateZ(0);
    fill: none;
    stroke: var(--stroke, var(--line));
    stroke-linecap: round;
    stroke-width: 2px;
    stroke-dasharray: var(--offset, 69px) 281px;
    stroke-dashoffset: 361px;
    transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s, opacity 0.35s ease;
}
.main-menu li a:hover {
    --stroke-delay: .1s;
    --offset: 170px;
}
.main-menu li a.color-pink:hover {
    --stroke: var(--line-active);
}
.main-menu li a.color-cyan:hover {
    --stroke: var(--line-active-2);
}
.main-menu li a.color-yellow:hover {
    --stroke: #fae600;
}
.main-menu li a.color-black:hover {
    --stroke: #000;
}
.press-body .main-menu li a.color-black, .press-body .main-menu li a.color-black:hover,
header.is-active .main-menu li a.color-cyan, header.is-active .main-menu li a.color-yellow, header.is-active .main-menu li a.color-pink,
header.is-active .main-menu li a.color-cyan:hover, header.is-active .main-menu li a.color-yellow:hover, header.is-active .main-menu li a.color-pink:hover,
header.is-active-black .main-menu li a.color-cyan, header.is-active-black .main-menu li a.color-yellow, header.is-active-black .main-menu li a.color-pink,
header.is-active-black .main-menu li a.color-cyan:hover, header.is-active-black .main-menu li a.color-yellow:hover, header.is-active-black .main-menu li a.color-pink:hover {
    --stroke: #000;
}
.main-menu li a:hover svg {
    opacity: 1;
}


@media screen and (min-width: 991px) {
    .main-menu li + li {
        margin-top: 0;
        margin-left: 2em;
    }
}

.menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 150;
}

.menu--visible {
    pointer-events: auto;
}
.app-menu {
    background-color: #fff;
    position: relative;
    max-width: 400px;
    width: 90%;
    height: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    -webkit-transform: translateX(-103%);
            transform: translateX(-103%);
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
    z-index: 160;
    pointer-events: auto;
    padding: 40px;    
}

.menu--visible .app-menu {
    -webkit-transform: none;
            transform: none;
}

.menu--animatable .app-menu {
    transition: all 130ms ease-in;
}

.menu--visible.menu--animatable  .app-menu {
    transition: all 330ms ease-out;
}

.menu:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    will-change: opacity;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0,0,0.3,1);
}

.menu--visible.menu:after {
    opacity: 1;
    pointer-events: auto;
}

.menu-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: 40px;
    z-index: 1;
}
.menu-icon span {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition-duration: .25s;
}
.menu-icon span + span {
    margin-top: 8px;
}

@media screen and (min-width: 991px) {
    .menu {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
        z-index: 150;
    }
    .menu:after {
        display: none;
        visibility: hidden;
    }
    .app-menu {
        background-color: transparent;
        position: relative;
        max-width: 100%;
        width: 100%;
        height: 100%;
        box-shadow: none;
        -webkit-transform: none;
                transform: none;
        flex-direction: row;
        will-change: transform;
        padding: 0;
        justify-content: space-between;        

    }
    .menu-icon {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}

/* 04. -------------- LANGUAGE MENU -------------- */
.language-menu li {
    display: inline-block;
}
.language-menu li + li {
    margin-left: 2em;
}
.language-menu li a {
    font-family: bicyclette, sans-serif;
    font-weight: 700;
    display: inline-block;
    position: relative;
    font-size: calc(10px + 4*(100vw - 320px)/1600);
    line-height: 1.7;
    color: rgba(28, 29, 32, 0.5);
    text-transform: uppercase;
    text-decoration: none;
}
.language-menu li a svg {
    position: absolute;
    width: auto;
    height: 12px;
    top: 3px;
    transition: all 0.25s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    fill: rgba(28, 29, 32, 0.5);
}
.language-menu li a svg.left {
    left: 0;
}
.language-menu li a svg.right {
    right: 0;
}
.language-menu li a.active {
    color: rgba(28, 29, 32, 1);
}
.language-menu li a:hover svg, .language-menu li a.active svg {
    opacity: 1;
    visibility: visible;
}
.language-menu li a.active svg {
    fill: rgba(28, 29, 32, 1);
}
.language-menu li a:hover svg.left, .language-menu li a.active svg.left {
    left: -8px;
}
.language-menu li a:hover svg.right, .language-menu li a.active svg.right {
    right: -8px;
}

@media screen and (min-width: 991px) {
    .language-menu li + li {
        margin-left: 2em;
    }
    .language-menu li a svg {
        top: 5px;
    }
}

/* 05. -------------- MAIN OWL CAROUSEL -------------- */
.owl-main-carousel .owl-item {
    height: calc(100vh - (136px + 3em));
}
.owl-main-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.owl-main-carousel .owl-dots {
    top: 100%;
    right: 1.5em;
    position: absolute;
    height: 64px;
    margin: 0 !important;
    display: flex;
}
.owl-main-carousel .owl-dots .owl-dot span {
    width: 14px;
    height: 18px;
    margin: 5px 10px;
    background: #fff;
    border-radius: 0;
    transition: all .2s ease;
    border: 1px solid rgba(28, 29, 32, 0.5);
}
.owl-main-carousel .owl-dots .owl-dot.active span, .owl-main-carousel .owl-dots .owl-dot:hover span {
    background-color: rgba(28, 29, 32, 1);
    border-color: rgba(28, 29, 32, 1);
}

@media screen and (min-width:768px) {
    .owl-main-carousel .owl-item {
        height: calc(100vh - (240px + 5em));
    }
    .owl-main-carousel .owl-dots {
        right: 46px;
        height: 120px;
    }
}

/* 06. -------------- SOCIAL NAV -------------- */
.social-menu {
    /* height: 64px;
    padding: 0 1.5em; */
    margin-top: 4em;
}
.social-menu li {
    display: inline-block;
}
.social-menu li + li {
    margin-left: 1.2em;
}
.social-menu li a {
    font-family: bicyclette, sans-serif;
    font-weight: 400;
    display: inline-block;
    position: relative;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
    line-height: 1.5;
    color: rgba(28, 29, 32, 0.5);
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
}
.social-menu li a svg {
    width: auto;
    height: 15px;
    fill: rgba(28, 29, 32, 0.67);
    transition: all 0.25s ease;
}
.social-menu li a:hover {
    color: rgba(0, 0, 0, 1);
}

.social-menu li a:hover svg {
    fill: rgba(0, 0, 0, 1);
}

@media screen and (min-width: 991px) {
    .social-menu {
        /* height: 120px;
        padding: 0 3.5em; */
        margin-top: 0;
    }
}

/* 07. -------------- AWARDS -------------- */
.button-awards {
    position: fixed;
    top: 50%;
    left: 0;
    font-family: bicyclette, sans-serif;
    font-weight: 700;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
    line-height: 1.5;
    color: rgba(28, 29, 32, 1);
    background-color: var(--line-active-3);
    text-transform: uppercase;
    transition: all 0.25s ease;
    width: 11em;
    height: 3em;
    transform: rotate(-90deg) translate(calc(-50% + 5.5em),calc(-100% - 1em));
    z-index: 101;
    cursor: pointer;
}
.button-awards.is-active {
    background-color: rgba(28, 29, 32, 1);
    color: var(--line-active-3);
}
.awards {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-color: var(--line-active-3);
    transform: translateX(-100%);
    transition: all 0.25s ease;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
}
.awards.is-active {
    transform: none;
}
.awards-intro {
    width: 100vw;
    height: 100vh;
}
.awards-container {
    padding: 100px 20px;
}

.awards-intro .header-h3 {
    position: absolute;
    color: #feff02;
}
.awards-intro .header-h3 span { 
    background-color: #1c1d20;
    padding: 0 0.125em;
}

.awards-intro .header-h3 svg {
    width: auto;
    height: 48px;
    margin-top: 0.5em;
    fill: #feff02;
}

.header-h2 {
    font-size: calc(30px + 42*(100vw - 320px)/1600);
    line-height: 1;
    margin-bottom: 0.444444444444444em;
    text-transform: uppercase;
}
.header-h3 {
    font-size: calc(24px + 32*(100vw - 320px)/1600);
    line-height: 1;
    margin-bottom: 0.444444444444444em;
    text-transform: uppercase;
}
.awards-list {
    padding: 0;
    margin: 0 0 8em;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
    line-height: 1.5;
    border-top: 1px solid #000;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
}
.awards-list li {
    border-bottom: 1px solid;
    padding: 1em 0;
}
.first {
    width: 220px;
    text-transform: uppercase;
    font-weight: 700;
}
.awards--img {
    width: 100%;
    height: auto;
    filter: grayscale(1);
    mix-blend-mode: multiply;
    display: block;
    object-fit: cover;
    background-color: #1c1d20;
    opacity: 0.93;
}
@media screen and (min-width:768px) {
    .button-awards {
        width: 12.5em;
        height: 4em;
        transform: rotate(-90deg) translate(calc(-50% + 6.25em),calc(-100% - 0.25em));
    }
    .awards-container {
        padding: 100px 3em;
    }
    
}
@media screen and (min-width:991px) {
    .awards-intro {
        padding-top: calc(120px + 5em);
    }
    .awards--img {
        width: auto;
        height: calc(100% - 3.75em);
        object-fit: contain;
    }
    .awards-intro .header-h3 {
        bottom: 1.25em;
    }

}
/* 08. -------------- MAIN -------------- */
.main-inner{
    width: 100%;
    height: calc(100vh - 200px);
}
.intro-text {
    font-weight: 400;
    font-size: calc(10px + 14*(100vw - 320px)/1600);
    line-height: 1.5;
}

/* 09. -------------- ABOUT -------------- */

.fundo-yellow {
    background-image: url(../img/fundo-yellow.svg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: calc(100vw - 7.5px);
    padding: 3.229166666666667vw;
}
.fundo-cyan {
    background-image: url(../img/fundo-cyan.svg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: calc(100vw - 7.5px);
    padding: 3.229166666666667vw;
}
.fundo-pink {
    background-image: url(../img/fundo-pink.svg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: calc(100vw - 7.5px);
    padding: 3.229166666666667vw;
}
.separador {
    width: 0;
    height: 0;
}
.img-about {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-content {
    padding: 10.833333333333333vw;
}

@media screen and (min-width:991px) {
    .fundo-yellow, .fundo-cyan, .fundo-pink {
        height: calc(50vw - 7.5px);
    }
    .about-content {
        padding: 0 10.833333333333333vw;
    }
    .separador {
        width: 100%;
        height: 14.814814814814815vh;
    }
}

/* 10. -------------- SHOWS -------------- */

.container-small {
    padding: 0 3.25vw;
}
.main-show {
    position: relative;
    margin-top: 5.925925925925926vh;
    padding: 0 8.4375vw;
}
.grid-show {
    padding: 8.4375vw;
    gap: 3.958333333333333vw;
    column-count: 1;
}
figure {
    padding: 0 0 3.958333333333333vw;
    display: grid;
    grid-template-rows: 1fr auto;
    break-inside: avoid;
    margin: 0;
}
figure a {
    text-decoration: none;
}
figure img {
    width: 100%;
    height: 100%;
    grid-row: 1 / -1;
    grid-column: 1;
    object-fit: contain;
}
figure h3 {
    color: #000;
    padding: 0.681818181818182em 0;
    font-size: calc(20px + 24*(100vw - 320px)/1600);
    line-height: 1.1818181818182em;
    border-bottom: 1px solid rgba(28, 29, 32, 0.5);
    font-weight: 400;
    margin: 0;
    transition: all 0.25s ease;
}
figure h3:hover {
    color: rgba(0,0,0,0.67);
}
.wrapper-img-one, .wrapper-img-two, .wrapper-img-three, .wrapper-img-four, .wrapper-img-five, .wrapper-img-six, .wrapper-img-seven, .wrapper-img-eight, .wrapper-img-nine, .wrapper-img-ten {
    width: 100%;
    height: calc(100vw - 24.875vw);
    padding: 4vw;
    background-color: #e8dac9;
}
.wrapper-img-two {
    background-color: #c6e0fb;
}
.wrapper-img-three {
    background-color: #fcdd02;
}
.wrapper-img-four {
    background-color: #e1d1b4;
}
.wrapper-img-five {
    background-color: #295095;
}
.wrapper-img-six {
    background-color: #d81e18;
}
.wrapper-img-seven {
    background-color: #336031;
}
.wrapper-img-eight {
    background-color: #946e63;
}
.wrapper-img-nine {
    background-color: #90673e;
}
.wrapper-img-ten {
    background-color: #5c17e0;
}
@media screen and (min-width:768px) {
    .grid-show {
        column-count: 2;
        display: grid;
    }
    .wrapper-img-one, .wrapper-img-two, .wrapper-img-three, .wrapper-img-four, .wrapper-img-five, .wrapper-img-six, .wrapper-img-seven, .wrapper-img-eight, .wrapper-img-nine, .wrapper-img-ten{
        height: 39.583333333333333vw;
        padding: 2vw;
    }
    .grid-show figure {
        padding: 0;
    }
    .order--1 {grid-row-start: 1;  grid-row-end: 2;}
    .order--2 {order: 2;}
    .order--3 {order: 3;}
    .order--4 {order: 4;}
}
/* 11. -------------- SINGLE-SHOWS -------------- */
.main-show.half-blue::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: var(--line-active-2);
    top: 0;
    right: 0;
    z-index: -1;
}
.show-info {
    font-size: calc(8px + 4*(100vw - 320px)/1600);
    line-height: 1.2;
    padding-bottom: 1em;
    text-transform: uppercase;
    color: rgba(28, 29, 32, 0.5);
    font-weight: 400;
    border-bottom: 1px solid rgba(28, 29, 32, 0.5);
    margin-bottom: 1em;
}
.show-name {
    font-size: calc(10px + 9*(100vw - 320px)/1600);
    line-height: 1.6;
    margin-bottom: 2.1em;
    color: #000;
    font-weight: 400;
}
.show-button {
    position: relative;
    display: inline-block;
    font-size: calc(8px + 10*(100vw - 320px)/1600);
    line-height: 1.6;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    background-color: #000;
    padding: 0.64em 1.36em;
    border: 0;
}
.show-button:hover{
    color: #fff;
    background-color: rgba(28, 29, 32, 1);
}
.mb-8vw {
    margin-bottom: 8.4375vw;
}
/* 12. -------------- SINGLE SHOWS OWL CAROUSEL -------------- */
.single-carousel-wrapper {
    padding: 8.4375vw;
}
.owl-show-single-carousel .owl-item {
    height: calc(100vh - 200px);
}
.owl-show-single-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.owl-show-single-carousel .owl-dots {
    top: calc(50% - 56px);
    left: 100%;
    position: absolute;
    width: 8.4375vw;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.owl-show-single-carousel .owl-dots .owl-dot span {
    width: 14px;
    height: 18px;
    margin: 5px 10px;
    background: #fff;
    border-radius: 0;
    transition: all .2s ease;
    border: 1px solid rgba(28, 29, 32, 0.5);
}
.owl-show-single-carousel .owl-dots .owl-dot.active span, .owl-show-single-carousel .owl-dots .owl-dot:hover span {
    background-color: rgba(28, 29, 32, 1);
    border-color: rgba(28, 29, 32, 1);
}
/* 13. -------------- SINGLE SHOW GRID -------------- */
.single-show-grid {
    display: grid;
    gap: 3.958333333333333vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry;
    padding: 8.4375vw;
}
/* 14. -------------- MATERIAL PHOTO GALLERY -------------- */
.m-p-g {
    max-width: 100%;
    margin: 8.4375vw auto;

}
.m-p-g__thumbs {
    column-count: 2;
    column-gap: 3.958333333333333vw;
}
.m-p-g__thumbs.m-p-g__video {
    column-count: 1;
}

.m-p-g__thumbs > figure {
    padding: 0 0 3.958333333333333vw;
    display: grid;
    grid-template-rows: 1fr auto;
    break-inside: avoid;
}

.m-p-g__thumbs-img {
    margin: 0;
    float: left;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 1;
    position: relative;
    opacity: 0;
    filter: brightness(100%);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: opacity, transform;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100% !important;
    height: auto !important;
}

.m-p-g__thumbs-img.active {
    z-index: 50;
}

.m-p-g__thumbs-img.layout-completed {
    opacity: 1;
}

.m-p-g__thumbs-img.hide {
    opacity: 0;
}

.m-p-g__thumbs-img:hover {
    filter: brightness(110%);
}

.m-p-g__video .m-p-g__thumbs-img:hover {
    filter: none;
}

.m-p-g__fullscreen {
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    visibility: hidden;
    transition: background 0.25s ease-out, visibility 0.01s 0.5s linear;
    will-change: background, visibility;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.m-p-g__fullscreen.active {
    transition: background 0.25s ease-out, visibility 0.01s 0s linear;
    visibility: visible;
    background: rgba(0, 0, 0, 0.95);
}

.m-p-g__fullscreen-img {
    pointer-events: none;
    position: absolute;
    transform-origin: left top;
    top: 50%;
    left: 50%;
    max-height: 100vh;
    max-width: 100%;
    visibility: hidden;
    will-change: visibility;
    transition: opacity 0.5s ease-out;
}

.m-p-g__fullscreen-img.active {
    visibility: visible;
    opacity: 1 !important;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out;
}

.m-p-g__fullscreen-img.almost-active {
    opacity: 0;
    transform: translate3d(0, 0, 0) !important;
}

.m-p-g__controls {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    height: 20vh;
    background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.m-p-g__controls.active {
    opacity: 1;
    visibility: visible;
}

.m-p-g__controls-close,
.m-p-g__controls-arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: none;
}

.m-p-g__controls-close:focus,
.m-p-g__controls-arrow:focus {
    outline: none;
}

.m-p-g__controls-arrow {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 20%;
    height: 100vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    opacity: 0;
}

.m-p-g__controls-arrow:hover {
    opacity: 1;
}

.m-p-g__controls-arrow--prev {
    left: 0;
    padding-left: 3vw;
    justify-content: flex-start;
}

.m-p-g__controls-arrow--next {
    right: 0;
    padding-right: 3vw;
    justify-content: flex-end;
}

.m-p-g__controls-close {
    position: absolute;
    top: 3vh;
    left: 3vw;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.m-p-g__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    transition: all 0.25s ease-out;
}

.m-p-g__btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.m-p-g__alertBox {
    position: fixed;
    z-index: 999;
    max-width: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border-radius: 3px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
    color: grey;
}

.m-p-g__alertBox h2 {
    color: red;
}

@media screen and (min-width: 768px) {
    .m-p-g__thumbs {
        column-count: 3;
    }
    .m-p-g__thumbs.m-p-g__video {
        column-count: 1;
    }
}

.press-body .m-p-g__thumbs-img {
    margin: 0;
    float: left;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 1;
    position: relative;
    opacity: 0;
    filter: grayscale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: opacity, transform, filter, mix-blend-mode;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.press-body .m-p-g__thumbs-img.layout-completed {
    opacity: 1;
}

.press-body .m-p-g__thumbs-img:hover {
    filter: grayscale(0);
    mix-blend-mode: unset;
    -webkit-box-shadow: 0px 20px 35px 7px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 20px 35px 7px rgba(0,0,0,0.3);
    box-shadow: 0px 20px 35px 7px rgba(0,0,0,0.3);
}


/* 15. -------------- PRESS CONTENT -------------- */

.press-body {
    transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
    background-color: var(--line-active-2);
}
.pink-press-body {
    background-color: var(--line-active);
}

/* 16. -------------- CONTACT CONTENT -------------- */

.contact-h1 {
    font-size: calc(32px + 40*(100vw - 320px)/1600);
    line-height: 0.95em;
    letter-spacing: 0;
    font-weight: 300;
    text-transform: uppercase;
    color: #000;
}
.contact-h3 {
    font-size: calc(16px + 16*(100vw - 320px)/1600);
    line-height: 0.95em;
    letter-spacing: 0;
    font-weight: 300;
    text-transform: uppercase;
    color: #000;
}

.contact-h6 {
    font-family: acumin-pro-wide, sans-serif;
    font-size: calc(10px + 8*(100vw - 320px)/1600);
    line-height: 1.3;
    font-weight: 400;
    margin: 0;
}

.c-banner_wrapper {
    width: 100%;
    overflow: hidden;
}
.u-anim-scroll {
    opacity: 0;
    transform: translate3d(0, -40px, 0);
}
.u-anim-scroll.-reverse {
    transform: translate3d(0, 40px, 0);
}
.is-inview {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1),transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 0s;
}

.c-banner {
    background-color: var(--line-active);
    color: #000;
    overflow: hidden;
    width: 120vw;
    display: flex;
    align-items: center;
    font-size: 11vw;
    margin-left: -10vw;
    transform: rotate(-5deg);
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    text-decoration: none;
    margin: 5rem 0 5rem -1rem;
}

.c-banner:hover {
    color: #000;
}
html[data-scroll-direction="up"] .c-banner {
    transform: rotate(5deg);
}

.c-banner:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--line-active-3);
    transform: scale3d(1, 0, 1);
    transform-origin: bottom center;
    transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-banner:focus:before, .c-banner:hover:before {
    transform: scale3d(1, 1, 1);
}
.c-banner_inner {
    white-space: nowrap;
    line-height: .675;
    padding-top: 0.15em;
    padding-bottom: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
    animation: bannerInner 9s linear infinite;
    font-family: bicyclette, sans-serif;
    font-weight: 300;
}

.c-banner_inner svg {
    display: inline-block;
    margin-top: -0.15em;
    width: 1em;
    height: 0.714em;
}

@keyframes bannerInner{
    0% {
        transform:translate3d(0, 0, 0)
    }
    100% {
        transform:translate3d(-100%, 0, 0)
    }
}
.b {
    fill: #cd2027;
}

.form-control, .btn {
    border-radius: 0;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
}

.modal-dialog {
    height: 100vh;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
}

.modal-content {
    background-color: transparent;
    border-radius: 0;
    border:0
}

.modal-backdrop.show {
    opacity: .95;
}

.f-play-video {
    margin:0;
    margin-top: calc(8.4375vw - 2.1em);
    margin-bottom: 8.4375vw;
}

.f-play-video img{
    cursor: pointer;
}
.nav-pills .nav-link.active {
    background-color: var(--line-active);
    transition: all .2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav-pills .nav-link.video.active{
    background-color: var(--line-active-2);
}
.video-wrapper {
    max-width: 100%;
    margin: 8.4375vw auto;
}

.press-body .video__thumbs {
    column-count: 2;
    column-gap: 3.958333333333333vw;
}

.press-body .video__thumbs > figure {
    padding: 0 0 3.958333333333333vw;
    display: grid;
    grid-template-rows: 1fr auto;
    break-inside: avoid;
}

.press-body .video__thumbs-img {
    margin: 0;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 1;
    position: relative;
    opacity: 1;
    filter: grayscale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: opacity, transform, filter, mix-blend-mode;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100% !important;
    height: auto !important;
    mix-blend-mode: multiply;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.press-body .video__thumbs-img:hover {
    filter: grayscale(0);
    mix-blend-mode: unset;
    -webkit-box-shadow: 0px 20px 35px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 20px 35px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 20px 35px 0px rgba(0,0,0,0.3);
}
@media screen and (min-width: 768px) {
    .press-body .video__thumbs {
        column-count: 3;
    }
}
/* 17. -------------- MERCHANDISE CONTENT -------------- */

.product-description {
    padding: 10vw;
}
.product-name {
    font-size: calc(20px + 28*(100vw - 320px)/1600);
    font-weight: 700;
    margin-bottom: 0;
}
.product-detail{
    font-size: calc(10px + 8*(100vw - 320px)/1600);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.product-info {
    font-size: calc(10px + 4*(100vw - 320px)/1600);
    line-height: 1.5;
    opacity: 0.5;
}
.product-price {
    font-family: bicyclette, sans-serif;;
    font-size: calc(20px + 28*(100vw - 320px)/1600);
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--line-active-2);
    line-height: 1;
}
.product img{
    width: 100%;
    height: calc(100vh - (72px + 10em));
    object-fit: cover;
}

@media screen and (min-width:768px) {
    .product img {
        /* height: calc(100vh - (120px + 5em)); */
        height: calc(44.635416666666664vw);
    }
    .product-description {
        padding: 5vw;
    }
}

.merchandise-wrapper {
    max-width: 100%;
    margin: 8.4375vw auto;
}
.merchandise__thumbs {
    column-count: 1;
    column-gap: 3.958333333333333vw;
}
.merchandise__thumbs > figure {
    padding: 0 0 3.958333333333333vw;
    display: grid;
    grid-template-rows: 1fr auto;
    break-inside: avoid;
}
.merchandise__thumbs-img {
    margin: 0;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 1;
    position: relative;
    opacity: 1;
    filter: brightness(100%);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: opacity, transform;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100% !important;
    height: auto !important;
}
.merchandise__thumbs-img:hover {
    filter: brightness(110%);
}
@media screen and (min-width: 768px) {
    .merchandise__thumbs {
        column-count: 2;
    }
}

.qty-input {
    color: #000;
    background: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.qty-input .product-qty,
.qty-input .qty-count {
    background: transparent;
    color: inherit;
    font-weight: 500;
    font-size: inherit;
    border: 1px solid #ced4da;
    display: inline-block;
    min-width: 0;
    height: 2.5rem;
    line-height: 1;
}
.qty-input .product-qty:focus,
.qty-input .qty-count:focus {
    outline: none;
}
.qty-input .product-qty {
    width: auto;
    min-width: 0;
    padding: .375rem .75rem;
    display: inline-block;
    text-align: center;
    -webkit-appearance: textfield;
        -moz-appearance: textfield;
            appearance: textfield;
}
.qty-input .product-qty::-webkit-outer-spin-button, .qty-input .product-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
            appearance: none;
    margin: 0;
}
.qty-input .qty-count {
    padding: 0;
    cursor: pointer;
    width: 2.5rem;
    font-size: 1.25em;
    text-indent: -100px;
    overflow: hidden;
    position: relative;
}
.qty-input .qty-count:before, .qty-input .qty-count:after {
    content: "";
    height: 2px;
    width: 10px;
    position: absolute;
    display: block;
    background: #000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.qty-input .qty-count--minus {
    border-right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
}
.qty-input .qty-count--add {
    border-left: 0;
    border-radius: 0 0.25rem 0.25rem 0;
}
.qty-input .qty-count--add:after {
    transform: rotate(90deg);
}
.qty-input .qty-count:disabled {
    color: #ccc;
    background: #f2f2f2;
    cursor: not-allowed;
    border-color: transparent;
}
.qty-input .qty-count:disabled:before, .qty-input .qty-count:disabled:after {
    background: #ccc;
}
.product-breaker {
    height: 6vw;
}
.color--list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.color--list li + li{
    margin-left: 16px;
}
.color--list a {
    display: block;
    text-decoration: none;
    width: 32px;
    height: 32px;
    border: 1px solid #000;
    border-radius: 50%;
    outline: 0;
    padding: 0;
}
.color--white {
    background-color: #fff;
}
.color--black {
    background-color: #000;
}

/* 18. -------------- TESTIMONIALS -------------- */
.button-testimonials {
    position: fixed;
    top: 50%;
    right: 0;
    font-family: bicyclette, sans-serif;
    font-weight: 700;
    font-size: calc(10px + 6*(100vw - 320px)/1600);
    line-height: 1.5;
    color: rgba(28, 29, 32, 1);
    background-color: var(--line-active-2);
    text-transform: uppercase;
    transition: all 0.25s ease;
    width: 11em;
    height: 3em;
    transform: rotate(90deg) translate(calc(-50% + 5.5em),calc(-100% - 1em));
    z-index: 101;
    cursor: pointer;
}
.button-testimonials.is-active {
    background-color: rgba(28, 29, 32, 1);
    color: var(--line-active-2);
}
.testimonials {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--line-active-2);
    transform: translateX(100%);
    transition: all 0.25s ease;
    z-index: 100;    
    padding-top: calc(120px + 5em);
}
.testimonials.is-active {
    transform: none;
}
.owl-testimonials-carousel .owl-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}
.owl-testimonials-carousel .owl-dots {
    margin-top: 2.5em !important;
}

.owl-testimonials-carousel .owl-dots .owl-dot span {
    background-color: #fff;
}

.owl-testimonials-carousel .owl-dots .owl-dot.active span, .owl-testimonials-carousel .owl-dots .owl-dot:hover span {
    background: rgba(28, 29, 32, 1);
}

.owl-testimonials-carousel h1 {
    text-align: center;
    font-size: calc(1.375rem + 5vw);
    margin: 0 3rem;
}

@media screen and (min-width:768px) {
    .button-testimonials {
        width: 12.5em;
        height: 4em;
        transform: rotate(90deg) translate(calc(-50% + 6.25em),calc(-100% - 0.25em));
    }
    .owl-testimonials-carousel h1 {
        text-align: center;
        font-size: calc(1.375rem + 3vw);
        max-width: 50vw;
        margin: 0 auto;
    }
    
}