/*! Theme Name: JUICE R US 
Author: mediamax.co.in */


@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf1.otf") format("opentype");
    font-weight: 100;

}

@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf2.otf") format("opentype");
    font-weight: 200;

}

@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf3.otf") format("opentype");
    font-weight: 300;

}

@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf4.otf") format("opentype");
    font-weight: 400;

}

@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf5.otf") format("opentype");
    font-weight: 500;

}

@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf6.otf") format("opentype");
    font-weight: 600;
}

@font-face {
    font-family: sf-pro;
    src: url("assets/fonts/sf7.otf") format("opentype");
    font-weight: 700;
}


@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h1.otf") format("opentype");
    font-weight: 100;
}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h2.otf") format("opentype");
    font-weight: 200;
}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h3.otf") format("opentype");
    font-weight: 300;

}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h4.otf") format("opentype");
    font-weight: 400;

}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h5.otf") format("opentype");
    font-weight: 500;

}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h6.otf") format("opentype");
    font-weight: 600;

}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h7.otf") format("opentype");
    font-weight: 700;

}

@font-face {
    font-family: helvetica;
    src: url("assets/fonts/h8.otf") format("opentype");
    font-weight: 800;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc1.otf") format("opentype");
    font-weight: 100;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc2.otf") format("opentype");
    font-weight: 200;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc3.otf") format("opentype");
    font-weight: 300;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc4.otf") format("opentype");
    font-weight: 400;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc5.otf") format("opentype");
    font-weight: 500;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc6.otf") format("opentype");
    font-weight: 600;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc7.otf") format("opentype");
    font-weight: 700;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc8.otf") format("opentype");
    font-weight: 800;

}

@font-face {
    font-family: hel-con;
    src: url("assets/fonts/hc9.otf") format("opentype");
    font-weight: 900;

}


@font-face {
    font-family: Heavitas;
    src: url("assets/fonts/heavitas/heavitas.woff") format("woff");
    font-weight: 400;
}



@font-face {
    font-family: trend;
    src: url("assets/fonts/trend.woff2") format("woff2");
    font-weight: 400;
    font-style: normal
}


@font-face {
    font-family: trend;
    src: url("assets/fonts/trendn.ttf") format("truetype");
    font-weight: 400;
    font-style: normal
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

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

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

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

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

* {
    box-sizing: border-box
}

body,
html {
    font: normal 16px/1 Helvetica, Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

body.noscroll,
html.noscroll {
    overflow: hidden !important
}

body {
    transition: background-color 1s
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

::selection {
    background: #b3d4fc;
    text-shadow: none
}

hr {
    border: 0;
    display: block;
    height: 1px;
    margin: 1.5em 0;
    padding: 0
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: none
}

a,
a:active,
a:focus,
a:hover,
a:link,
a:visited {
    outline: none
}

.lowercase {
    text-transform: lowercase
}

.ethos-hero-items,
.ethos-hero-items:after,
.hero.overlay:before,
.home-hero-wine .bg:after,
.wines-hero-wine .bg:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%
}

.home-hero-wine .bg:after,
.wines-hero-wine .bg:after {
    content: "";
    *background: transparent url("assets/images/global/line-texture-bg-overlay.png") 50%/7px auto repeat;
    background: rgba(1, 1, 1, 0.0);

}

.headline {
    color: #424242;
    font-weight: 700;
    text-transform: uppercase;
    *font: normal normal 75px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    font: normal normal 75px/1.1 trend, sans-serif;
    margin: 0;
    padding: 0
}

.contact-form-submit .headline+input,
.headline+.button {
    margin-top: 30px
}

.default-content-inner .headline+p,
.headline+.text {
    margin-top: .75em
}

.eyebrow {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font: normal normal 30px/1.1 helvetica, sans-serif;
    margin: 0;
    padding: 0;
    letter-spacing: .05em;
}

@media only screen and (max-width:1200px) {
    .eyebrow {
        font-size: 26px
    }
}

@media only screen and (max-width:1023px) {
    .eyebrow {
        font-size: 22px
    }
}

@media only screen and (max-width:767px) {
    .eyebrow {
        font-size: 17px
    }
}

@media only screen and (max-width:480px) {
    .eyebrow {
        font-size: 14px
    }
}

.title {
    color: #ccc;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    font: normal normal 50px/1.1 trend, Arial Black, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width:1200px) {
    .title {
        font-size: 40px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .title {
        font-size: 30px
    }
}

@media only screen and (max-width:1023px) {
    .title {
        font-size: 30px
    }
}

@media only screen and (max-width:767px) {
    .title {
        font-size: 25px
    }
}

@media only screen and (max-width:480px) {
    .title {
        font-size: 20px
    }
}

.default-content-inner h2,
.subtitle,
.wines-name {
    color: #fff;
    text-transform: uppercase;
    font: normal normal 30px/1.1 trend, Arial Black, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

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

    .default-content-inner h2,
    .subtitle,
    .wines-name {
        font-size: 26px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {

    .default-content-inner h2,
    .subtitle,
    .wines-name {
        font-size: 22px
    }
}

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

    .default-content-inner h2,
    .subtitle,
    .wines-name {
        font-size: 22px
    }
}

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

    .default-content-inner h2,
    .subtitle,
    .wines-name {
        font-size: 18px
    }
}

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

    .default-content-inner h2,
    .subtitle,
    .wines-name {
        font-size: 16px
    }
}

.default-content-inner .subtitle+h2,
.default-content-inner .wines-name+h2,
.default-content-inner h2+.subtitle,
.default-content-inner h2+.wines-name,
.default-content-inner h2+h2,
.subtitle+.subtitle,
.subtitle+.wines-name,
.wines-name+.subtitle,
.wines-name+.wines-name {
    margin-top: 5px
}

.subtitle2 {
    text-transform: uppercase;
    font: normal normal 20px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    margin: 0;
    padding: 0
}

.default-content-inner p,
.text {
    font: 400 normal 20px/1.4 Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

    .default-content-inner p,
    .text {
        font-size: 18px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {

    .default-content-inner p,
    .text {
        font-size: 18px
    }
}

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

    .default-content-inner p,
    .text {
        font-size: 17px
    }
}

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

    .default-content-inner p,
    .text {
        font-size: 15px
    }
}

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

    .default-content-inner p,
    .text {
        font-size: 14px
    }
}

.default-content-inner p strong,
.text strong {
    font-weight: 700
}

.wine-title {
    color: #424242;
    font-weight: 700;
    text-transform: uppercase;
    *font: normal normal 4vw/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    font: normal normal 4vw/1.1 trend;
    letter-spacing: .01em;
    margin: 0 0 5px;
    padding: 0
}

@media only screen and (max-width:1023px) {
    .wine-title {
        font-size: 40px
    }
}

@media only screen and (max-width:767px) {
    .wine-title {
        font-size: 30px
    }
}

@media only screen and (max-width:480px) {
    .wine-title {
        font-size: 20px;
        margin-bottom: 10px
    }
}

@media only screen and (max-width:767px) {
    .wine-title br {
        display: none
    }
}

.wine-title .period {
    display: none
}

@media only screen and (max-width:767px) {
    .wine-title .period {
        display: inline
    }
}

.wine-subtitle2 {
    color: #fff;
    text-transform: uppercase;
    * font: normal normal 23px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    font: normal normal 23px/1.1 helvetica, sans-serif;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width:1500px) {
    .wine-subtitle2 {
        font-size: 21px
    }
}

@media only screen and (max-width:1023px) {
    .wine-subtitle2 {
        font-size: 18px
    }
}

@media only screen and (max-width:767px) {
    .wine-subtitle2 {
        font-size: 17px
    }
}

@media only screen and (max-width:480px) {
    .wine-subtitle2 {
        font-size: 15px
    }
}

@media only screen and (max-width:340px) {
    .wine-subtitle2 {
        font-size: 13px
    }
}

.contact-form-submit .wine-subtitle2+input,
.wine-subtitle2+.button {
    margin-top: 20px;
}

.wine-subtitle2+.wine-subtitle2 {
    margin-top: 5px
}

.fp-enabled body,
html.fp-enabled {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent
}

#superContainer {
    height: 100%;
    position: relative;
    -ms-touch-action: none;
    touch-action: none
}

.fp-section {
    position: relative;
    box-sizing: border-box
}

.fp-slide {
    float: left
}

.fp-slide,
.fp-slidesContainer {
    height: 100%;
    display: block
}

.fp-slides {
    z-index: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-out
}

.fp-section.fp-table,
.fp-slide.fp-table {
    display: table;
    table-layout: fixed;
    width: 100%
}

.fp-tableCell {
    width: 100%;
    height: 100%
}

.fp-slidesContainer {
    float: left;
    position: relative
}

.fp-controlArrow {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent
}

.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff
}

.fp-scrollable {
    position: relative
}

.fp-scrollable,
.fp-scroller {
    overflow: hidden
}

.iScrollIndicator {
    border: 0 !important
}

.fp-notransition {
    transition: none !important
}

#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translateZ(0)
}

#fp-nav.right {
    right: 17px
}

#fp-nav.left {
    left: 17px
}

.fp-slidesNav {
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.fp-slidesNav.bottom {
    bottom: 17px
}

.fp-slidesNav.top {
    top: 17px
}

#fp-nav ul,
.fp-slidesNav ul {
    margin: 0;
    padding: 0
}

#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative
}

.fp-slidesNav ul li {
    display: inline-block
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none
}

#fp-nav ul li:hover a.active span,
#fp-nav ul li a.active span,
.fp-slidesNav ul li:hover a.active span,
.fp-slidesNav ul li a.active span {
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    transition: all .1s ease-in-out
}

#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer
}

#fp-nav.fp-show-active a.active+.fp-tooltip,
#fp-nav ul li:hover .fp-tooltip {
    transition: opacity .2s ease-in;
    width: auto;
    opacity: 1
}

#fp-nav ul li .fp-tooltip.right {
    right: 20px
}

#fp-nav ul li .fp-tooltip.left {
    left: 20px
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
    height: auto !important
}

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

.slick-list,
.slick-slider {
    position: relative;
    display: block
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

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

.slick-slider .slick-list,
.slick-slider .slick-track {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

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

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

.slick-track:after {
    clear: both
}

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

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

[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 {
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50px;
    height: 150px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 33px auto;
    border: 0;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    padding: 0;
    margin: 0;
    transition: opacity .2s
}

@media only screen and (max-width:767px) {
    .slick-arrow {
        width: 30px;
        height: 100px;
        background-size: 20px auto;
        display: none !important
    }
}

.slick-arrow.slick-prev {
    left: 0;
    background-image: url("assets/images/global/slider-arrow-left.png");
    background-position: 0
}

.slick-arrow.slick-next {
    right: 0;
    background-image: url("assets/images/global/slider-arrow-right.png");
    background-position: 100%
}

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

.slick-arrow:focus {
    outline: none
}

.slick-disabled {
    opacity: .25;
    cursor: default
}

.slick-dots {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    bottom: -100px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    z-index: 1
}

@media only screen and (max-width:1023px) {
    .slick-dots {
        bottom: -60px
    }
}

.slick-dots li {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    list-style-type: none;
    margin: 0 5px;
    cursor: pointer;
    transition: background .2s
}

.slick-dots li.slick-active {
    background: #fff
}

.slick-dots li button {
    display: none
}

@-webkit-keyframes a {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes a {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.typed-cursor {
    color: #b11f24;
    opacity: 1;
    -webkit-animation: a .7s infinite;
    animation: a .7s infinite
}

.wpcf7-not-valid {
    box-shadow: inset 0 0 0 2px red !important
}

.wpcf7-not-valid-tip,
.wpcf7-response-output {
    display: none !important
}

span.ajax-loader {
    left: calc(50% - 8px);
    position: relative;
    margin: 10px 0 0 !important;
    display: block !important;
    background: none !important;
    border-radius: 50%;
    border-left: 2px solid #b11f24 !important;
    border-top: 2px solid #b11f24 !important;
    border-bottom: 2px solid transparent !important;
    border-right: 2px solid transparent !important;
    -webkit-animation: e .7s infinite linear;
    animation: e .7s infinite linear
}

.button,
.contact-form-submit input {
    padding: 10px 15px 6px 15px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font: 600 normal 14px/1.4 helvetica, sans-serif;
    letter-spacing: .12em;
    border-radius: 10px 0 0 10px;
    position: relative;
    transition: background-position .2s linear, padding .2s linear, background-color .2s;
}

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

    .button,
    .contact-form-submit input {
        font-size: 13px
    }
}

.button.primary,
.contact-form-submit input.primary {
    color: #fff;
    padding-right: 10px
}

.button.primary:after,
.contact-form-submit input.primary:after {
    content: "";
    position: absolute;
    left: 100%;
    height: 100%;
    width: 25px;
    top: 0;
    background-image: url("assets/images/global/button-arrow-line.png"), url("assets/images/global/button-arrow-end.png");
    background-position: 0, calc(100% - 10px) 50%;
    background-size: 7px 10px, 13px 10px;
    background-repeat: no-repeat;
    border-radius: 0 10px 10px 0;
    transition: width .2s, background-color .2s
}

@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2),
(min-resolution:192dpi) {

    .button.primary:after,
    .contact-form-submit input.primary:after {
        background-image: url("assets/images/global/button-arrow-line@2x.png"), url("assets/images/global/button-arrow-end@2x.png")
    }
}

.button.primary:hover:after,
.contact-form-submit input.primary:hover:after {
    width: 30px
}

.button.secondary,
.contact-form-submit input.secondary {
    border: 1px solid #fff;
    color: #fff;
    transition: background-color .2s
}

.button.secondary:after,
.contact-form-submit input.secondary:after {
    content: "";
    position: absolute;
    left: 100%;
    height: 100%;
    width: 35px;
    top: -1px;
    background-image: url("assets/images/global/button-arrow-line.png"), url("assets/images/global/button-arrow-end.png");
    background-position: 10px, calc(100% - 10px) 50%;
    background-size: 7px 10px, 13px 10px;
    background-repeat: no-repeat;
    border: 1px solid #fff;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    transition: width .2s, background-color .2s
}

@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2),
(min-resolution:192dpi) {

    .button.secondary:after,
    .contact-form-submit input.secondary:after {
        background-image: url("assets/images/global/button-arrow-line@2x.png"), url("assets/images/global/button-arrow-end@2x.png")
    }
}

.button.secondary:hover,
.contact-form-submit input.secondary:hover {
    background-color: hsla(0, 0%, 100%, .1)
}

.button.secondary:hover:after,
.contact-form-submit input.secondary:hover:after {
    width: 40px;
    background-color: hsla(0, 0%, 100%, .1)
}

.button.download,
.contact-form-submit input.download {
    border: 1px solid #424242;
    color: #424242;
    transition: background-color .2s
}

.button.download:after,
.contact-form-submit input.download:after {
    content: "";
    position: absolute;
    left: 100%;
    height: 100%;
    width: 35px;
    top: -1px;
    background: transparent url("assets/images/global/button-arrow-download.png") center 50%/10px 13px no-repeat;
    border: 1px solid #424242;
    border-left: 0;
    border-radius: 0 10px 10px 0;
    transition: background-color .2s
}

.button.download:hover,
.button.download:hover:after,
.contact-form-submit input.download:hover,
.contact-form-submit input.download:hover:after {
    background-color: rgba(66, 66, 66, .1)
}

.button.download.centered,
.contact-form-submit input.download.centered {
    margin-left: -35px
}

.button.centered,
.contact-form-submit input.centered {
    margin-left: -25px
}

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

    .button.centered-s,
    .contact-form-submit input.centered-s {
        margin-left: -25px
    }
}

.button.white:after,
.contact-form-submit input.white:after {
    background-image: url("assets/images/global/button-arrow-line-dark.png"), url("assets/images/global/button-arrow-end-dark.png")
}

@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2),
(min-resolution:192dpi) {

    .button.white:after,
    .contact-form-submit input.white:after {
        background-image: url("assets/images/global/button-arrow-line-dark@2x.png"), url("assets/images/global/button-arrow-end-dark@2x.png")
    }
}

.full-width-image {
    width: 100%;
    height: auto
}

.overflow-container {
    overflow: hidden;
    display: block
}

.overflow-container.animate .overflow-inner {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition-delay: .6s
}

.overflow-container.animate .overflow-inner.delay1 {
    transition-delay: .8s
}

.overflow-container.animate .overflow-inner.delay2 {
    transition-delay: 1s
}

.overflow-container.animate .overflow-inner.delay3 {
    transition-delay: 1.2s
}

.overflow-container.animate .overflow-inner.delay4 {
    transition-delay: 1.4s
}

.overflow-container.full-width {
    width: 100%
}

.overflow-inner {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition-delay: 1s;
    display: block
}

.header-logo {
    display: block;
    height: 100%;
    width: 100%;
    *background-color: #b11f24;
    background-color: rgba(1, 1, 1, .0);
    padding: 12px 17px 13px 14px;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    transition: background-color .5s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01), background-color .5s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01), background-color .5s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01);
    transition-delay: .8s
}

@media only screen and (max-width:767px) {
    .header-logo.animate {
        *-webkit-transform: rotateY(100deg);
        *transform: rotateY(100deg);
        *background-color: #5a1012;
        transition-delay: 0s
    }
}

.header-logo-wrapper {
    -webkit-perspective: 300px;
    perspective: 300px;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 20px;

}

.header-logo svg {
    fill: #fff;
    width: 44px;
    height: auto
}

.header-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    z-index: 1000;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition-delay: 0s
}

@media only screen and (max-width:480px) {
    .header-nav {
        width: 100%
    }
}

.header-nav.open {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.header-nav.open .header-button.close {
    float: right;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) .7s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) .7s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) .7s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) .7s
}

.header-nav.open .header-nav-logo svg {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s;
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s;
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s, -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s
}

.header-nav.open .header-nav-items li a span {
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01);
    font-family: trend;
}

.header-nav.open .header-nav-items li:first-child span {
    transition-delay: .1s
}

.header-nav.open .header-nav-items li:nth-child(2) span {
    transition-delay: .2s
}

.header-nav.open .header-nav-items li:nth-child(3) span {
    transition-delay: .3s
}

.header-nav.open .header-nav-items li:nth-child(4) span {
    transition-delay: .4s
}

.header-nav.open .header-nav-items li:nth-child(5) span {
    transition-delay: .5s
}

.header-nav.open .header-nav-items li:nth-child(6) span {
    transition-delay: .6s
}

.header-nav.open .header-nav-items span,
.header-nav.open .header-nav-social {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.header-nav.open .header-nav-social {
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01) .9s;
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01) .9s;
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01) .9s, -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01) .9s
}

.header-nav-logo {
    text-align: center;
    margin-top: 20px;
    overflow: hidden;
    display: block;
}

@media only screen and (max-width:480px) {
    .header-nav-logo {
        margin-top: 10px
    }
}

.header-nav-logo svg {
    width: 200px;
    height: auto;
    fill: #ddd;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition-delay: .8s
}

@media only screen and (max-width:480px) {
    .header-nav-logo svg {
        width: 150px
    }
}

@media only screen and (max-width:340px) {
    .header-nav-logo svg {
        width: 110px
    }
}

.header-nav-items {
    margin: 60px 0 0;
    padding: 0 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: start;
    align-items: flex-start
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .header-nav-items {
        margin-top: 30px
    }
}

@media only screen and (max-width:480px) {
    .header-nav-items {
        margin-top: 30px
    }
}

@media only screen and (max-width:340px) {
    .header-nav-items {
        margin-top: 20px
    }
}

.header-nav-items li {
    list-style-type: none;
    font: normal normal 25px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    letter-spacing: .01em
}

@media only screen and (max-width:480px) {
    .header-nav-items li {
        font-size: 20px
    }
}

@media only screen and (max-width:340px) {
    .header-nav-items li {
        font-size: 16px
    }
}

.header-nav-items a {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden
}

.header-nav-items a span {
    position: relative;
    z-index: 2;
    display: block;
    padding: 10px 20px 10px 10px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition-delay: .8s
}

@media only screen and (max-width:340px) {
    .header-nav-items a span {
        padding: 8px 0
    }
}

.header-nav-items a.primary {
    color: #8b8782
}

.header-nav-items a.secondary {
    color: #cac4bd
}

.header-nav-items a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    https: //media.istockphoto.com/vectors/abstract-polka-dot-background-vector-id481542392;
        background:transparent url("assets/images/global/line-texture.png") 0 0/5px auto repeat;
    z-index: 1;
    background: url(https://thumbs.dreamstime.com/b/repeatable-grid-mesh-pattern-fine-lines-cellular-texture-royalty-free-vector-illustration-81803115.jpg) 90%/181px;
    transition: width .4s cubic-bezier(.24, .72, .35, 1.01), left 0s .4s;
}

@media only screen and (max-width:1200px) {
    .header-nav-items a:after {
        display: none
    }
}

.header-nav-items a:hover:after {
    width: 100%
}

.header-nav-social {
    position: absolute;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 70px;
    border-top: 1px solid #cac4bd;
    width: 100%;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition-delay: .8s
}

.header-nav-social-title {
    font: 700 normal 11px/1 Open Sans, Helvetica, Arial, sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8b8782;
    padding: 18px 20px 0;
    text-align: center;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.header-nav-social-item {
    width: 80px;
    text-align: center;
    border-left: 1px solid #cac4bd;
    padding-top: 20px;
    transition: background .2s cubic-bezier(.24, .72, .35, 1.01)
}

.header-nav-social-item:hover {
    background: #fff
}

.header-nav-social-item:hover svg {
    fill: #716d69
}

.header-nav-social-item svg {
    fill: #8b8782;
    height: 25px;
    transition: fill .2s cubic-bezier(.24, .72, .35, 1.01)
}

.header-button {
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 0;
    position: relative
}

.header-button:focus {
    outline: 0
}

.header-button-wrapper {
    overflow: hidden
}

.header-button.open {
    position: fixed;
    z-index: 1000;
    right: 20px;
    top: 20px;
    background: transparent url("assets/images/global/line-texture2.png") 50%/5px auto repeat;
}

@media only screen and (max-width:767px) {
    .header-button.open {
        right: 10px;
        top: 10px
    }
}

.header-button.open:after,
.header-button.open:before {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-bottom: 3px solid #fff;
    margin-left: auto;
    margin-right: auto
}

.header-button.open:before {
    top: 15px;
    height: 6px;
    border-top: 3px solid #fff
}

.header-button.open:after {
    top: 33px;
    border-bottom: 3px solid #fff
}

.header-button.open.hidden {
    transition-delay: 0s
}

.header-button.close {
    position: relative;
    transition-delay: .8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    background: transparent url("assets/images/global/line-texture.png") 50%/5px auto repeat;
    background: url(https://thumbs.dreamstime.com/b/repeatable-grid-mesh-pattern-fine-lines-cellular-texture-royalty-free-vector-illustration-81803115.jpg) 90%/181px;
}

.header-button.close:after,
.header-button.close:before {
    content: "";
    display: block;
    position: absolute;
    width: 35px;
    left: 50%;
    top: 23px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #8b8782;
    height: 3px;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.header-button.close:before {
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg)
}

.header-button.close:after {
    -webkit-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg)
}

.newsletter-signup form {
    margin-top: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap
}

.newsletter-signup input[type=email] {
    background-color: #fff;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: calc(100% - 120px);
    height: 100px;
    padding: 0 30px;
    font: 300 normal 30px/1 Open Sans, Helvetica, Arial, sans-serif;
    color: #525252
}

@media only screen and (max-width:1200px) {
    .newsletter-signup input[type=email] {
        height: 80px;
        font-size: 26px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .newsletter-signup input[type=email] {
        height: 80px;
        font-size: 26px
    }
}

@media only screen and (max-width:480px) {
    .newsletter-signup input[type=email] {
        width: calc(100% - 80px);
        font-size: 20px;
        height: 60px;
        padding: 0 20px
    }
}

.newsletter-signup input[type=email]::-webkit-input-placeholder {
    color: #525252
}

.newsletter-signup input[type=email]:-moz-placeholder,
.newsletter-signup input[type=email]::-moz-placeholder {
    text-transform: uppercase;
    color: #525252
}

.newsletter-signup input[type=email]:-ms-input-placeholder {
    text-transform: uppercase;
    color: #525252
}

.newsletter-signup input[type=email]:focus {
    outline: 0
}

.newsletter-signup input[type=submit] {
    background: url("assets/images/global/shaka.svg") 50%/50% auto no-repeat;
    background-color: #ddd;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: 120px
}

@media only screen and (max-width:1200px) {
    .newsletter-signup input[type=submit] {
        background-size: 40% auto
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .newsletter-signup input[type=submit] {
        background-size: 40% auto
    }
}

@media only screen and (max-width:480px) {
    .newsletter-signup input[type=submit] {
        width: 80px
    }
}

.footer {
    height: 100%;
    background: #1f1f1f;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media only screen and (max-width:1023px) {
    .footer {
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}

.footer-full-height .footer {
    height: 100vh
}

.footer-item {
    width: 50%;
    height: calc(100% - 40px)
}

@media only screen and (max-width:1023px) {
    .footer-item {
        width: 100%
    }
}

.footer-item.left {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap
}

@media only screen and (max-width:1023px) {
    .footer-item.left {
        height: 40%
    }
}

@media only screen and (max-width:1023px) {
    .footer-item.right {
        -ms-flex-order: -1;
        order: -1;
        height: calc(60% - 40px)
    }
}

.footer-section {
    padding: 5vh 7vw;
}

@media only screen and (max-height:800px) {
    .footer-section {
        *padding-top: 100px;
        *padding-bottom: 100px;
        padding-top: 3%;
        padding-bottom: 3%;
    }
}

@media only screen and (max-width:1023px) {
    .footer-section {
        padding-top: 40px;
        padding-bottom: 40px;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media only screen and (max-width:767px) {
    .footer-section {
        padding: 8vw
    }
}

.footer-trade {
    height: 50%;
    background-color: #1f1f1f
}

.footer-contact {
    height: 50%;
    background-color: #232323
}

.footer-follow {
    height: 100%;
    background-color: #1c1c1c;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width:1023px) {
    .footer-follow {
        -ms-flex-pack: center;
        justify-content: center
    }
}

.footer-newsletter {
    margin-bottom: 40px
}

@media only screen and (max-width:767px) {
    .footer-newsletter {
        margin-bottom: 20px
    }
}

.footer-newsletter input[type=email] {
    background-color: #232323
}

.footer-newsletter input[type=submit] {
    background-color: #2f2f2f
}

.footer-title {
    margin: 0;
    padding: 0 0 0.5em;
    color: #f5f0ea;
    font: normal normal 50px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    font: normal normal 33px/1.1 trend, Arial Black, Helvetica, sans-serif;
}

@media only screen and (max-width:1500px) {
    .footer-title {
        font-size: 40px
    }
}

@media only screen and (max-width:1023px) {
    .footer-title {
        font-size: 30px
    }
}

@media only screen and (max-width:480px) {
    .footer-title {
        font-size: 20px
    }
}

.default-content-inner .footer p,
.footer .default-content-inner p,
.footer .text {
    color: #525252
}

.default-content-inner .footer p a,
.footer .default-content-inner p a,
.footer .text a {
    color: currentColor;
    text-decoration: none
}

.default-content-inner .footer p a:hover,
.footer .default-content-inner p a:hover,
.footer .text a:hover {
    text-decoration: underline
}

.footer .highlight {
    color: #f78f2e;
}

.footer-social {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    align-items: flex-start;
    width: 100%;
    -webkit-box-align: stretch;
    align-items: stretch;
    -ms-flex-flow: row nowrap;
}

.footer-social-icons {
    width: calc(100% - 6px);
    margin: 0 6px 0 0;
    padding: 0;
}

@media only screen and (max-width:1023px) {
    .footer-social-icons {
        display: none
    }
}

.footer-social-icons li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: 20px;
    padding-top: calc(9% + 3px);
    width: 9%;
    position: relative;
    display: inline-table;
}

.footer-social-icons li:first-child {
    margin-bottom: 6px;
}

.footer-social-icons a {
    display: block;
    width: 100%;
    height: 100%;
    transition: background-color .2s;
    position: absolute;
    left: 0;
    top: 0
}

.footer-social-icons svg {
    position: absolute;
    fill: #fff;
    height: 40%;
    left: 50%;
    top: 50%;
    width: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.footer-social-instagram {
    background-color: #d47620;
}

.footer-social-facebook {
    background-color: #d47620;
}

.footer-social-facebook:hover {
    background-color: #2e4576
}

.footer-social-feed {
    width: 75%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    /* flex-flow:row wrap; */
}

@media only screen and (max-width:1023px) {
    .footer-social-feed {
        width: 100%
    }
}

@media only screen and (max-width:340px) {
    .footer-social-feed {
        display: none
    }
}

.footer-social-feed a {
    width: calc(33.33333% - 4px);
    margin: 0 6px 6px 0;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: calc(33.33333% - 3px)
}

@media only screen and (max-width:1023px) {
    .footer-social-feed a {
        width: calc(25% - 4.5px);
        padding-top: calc(25% - 6px)
    }
}

.footer-social-feed a:nth-child(3n) {
    margin-right: 0
}

@media only screen and (max-width:1023px) {
    .footer-social-feed a:nth-child(3n) {
        margin-right: 6px
    }
}

@media only screen and (max-width:1023px) {
    .footer-social-feed a:nth-child(4n) {
        margin-right: 0
    }
}

.footer-social-feed a:nth-child(n+4) {
    margin-bottom: 0
}

@media only screen and (max-width:1023px) {
    .footer-social-feed a:nth-child(n+5) {
        display: none
    }
}

.footer-social-feed img {
    display: block;
    width: 100%;
    height: auto
}

.footer-copyright {
    background-color: #111;
    text-align: center;
    height: 40px;
    font: 400 normal 12px/1.5 Helvetica, Arial, sans-serif;
    color: #525252;
    width: 100%;
    padding-top: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media only screen and (max-width:767px) {
    .footer-copyright {
        font-size: 9px;
        padding-top: 7px;
        letter-spacing: .03em
    }
}

@media only screen and (max-width:340px) {
    .footer-copyright {
        font-size: 8px;
        letter-spacing: 0
    }
}

.footer-copyright-item:after {
    content: " |";
    margin: 0 .5em
}

@media only screen and (max-width:767px) {
    .footer-copyright-item:nth-child(2):after {
        content: none
    }
}

@media only screen and (max-width:767px) {
    .footer-copyright-makers {
        display: block
    }
}

.footer-copyright a {
    color: currentColor;
    text-decoration: none
}

.footer-copyright a:hover {
    text-decoration: underline
}

@-webkit-keyframes b {
    0% {
        background-position: center 50%
    }

    80% {
        background-position: center 50%
    }

    90% {
        background-position: center 60%
    }

    to {
        background-position: center 50%
    }
}

@keyframes b {
    0% {
        background-position: center 50%
    }

    80% {
        background-position: center 50%
    }

    90% {
        background-position: center 60%
    }

    to {
        background-position: center 50%
    }
}

.hero {
    height: 100%;
    position: relative;
    overflow: hidden
}

.hero.main {
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%
}

.hero.main .eyebrow {
    z-index: 3
}

.hero.main .headline {
    color: #fff;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width:1200px) {
    .hero.main .headline {
        font-size: 60px
    }
}

@media only screen and (max-width:1023px) {
    .hero.main .headline {
        font-size: 45px
    }
}

@media only screen and (max-width:767px) {
    .hero.main .headline {
        font-size: 35px
    }
}

@media only screen and (max-width:480px) {
    .hero.main .headline {
        font-size: 28px
    }
}

.hero.main .headline a {
    color: currentColor;
    text-decoration: none
}

.hero-intro {
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.hero-intro-content {
    z-index: 1;
    width: 100%;
    position: relative;
    padding: 50px 0
}

@media only screen and (max-width:1023px) {
    .hero-intro-content {
        padding-left: 15%;
        padding-right: 15%
    }
}

@media only screen and (max-width:767px) {
    .hero-intro-content {
        padding-left: 5%;
        padding-right: 5%
    }
}

.hero-intro-icon {
    margin-bottom: 2em
}

.hero-intro-eyebrow {
    margin-bottom: .1em
}

.hero-intro-headline {
    margin-bottom: 1em
}

@media only screen and (max-width:767px) {
    .hero-intro-headline {
        margin-bottom: .5em
    }
}

.hero-intro-text {
    margin-bottom: 2em
}

.hero-intro .headline {
    color: #424242
}

@media only screen and (max-width:1200px) {
    .hero-intro .headline {
        font-size: 60px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .hero-intro .headline {
        font-size: 60px
    }
}

@media only screen and (max-width:1023px) {
    .hero-intro .headline {
        font-size: 45px
    }
}

@media only screen and (max-width:767px) {
    .hero-intro .headline {
        font-size: 35px
    }
}

@media only screen and (max-width:480px) {
    .hero-intro .headline {
        font-size: 28px
    }
}

.default-content-inner .hero-intro p,
.hero-intro .default-content-inner p,
.hero-intro .text {
    padding-top: 20px;
    color: #424242
}

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

    .default-content-inner .hero-intro p br,
    .hero-intro .default-content-inner p br,
    .hero-intro .text br {
        display: none
    }
}

.hero-arrow {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 33px;
    width: 126px;
    background: transparent url("assets/images/global/hero-arrow.png") bottom/100% 100% no-repeat;
    cursor: pointer;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    transition-delay: 1s;
    z-index: 3
}

@media only screen and (max-width:767px) {
    .hero-arrow {
        height: 22px;
        width: 85px
    }
}

.hero-arrow.animate {
    -webkit-transform: translateX(-50%) rotateX(-90deg);
    transform: translateX(-50%) rotateX(-90deg);
    transition-delay: 0s
}

.hero-arrow.white {
    background-image: url("assets/images/global/hero-arrow-white.png")
}

.hero-arrow-small {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40px;
    height: 40px;
    background: transparent url("assets/images/global/hero-arrow-small.png") center 50%/10px auto no-repeat;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    z-index: 4;
    transition: opacity .3s 1.5s, visibility .3s 1.5s;
    -webkit-animation: b 3s infinite;
    animation: b 3s infinite
}

@media only screen and (max-width:767px) {
    .hero-arrow-small {
        bottom: -5px
    }
}

.hero-arrow-small:hover {
    cursor: pointer
}

.hero-arrow-small.hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s
}

.hero-arrow-small.dark {
    background-image: url("assets/images/global/hero-arrow-small-dark.png")
}

.hero-arrow-small.main {
    bottom: 20%;
    border-radius: 50%;
    border: 1px solid #fff
}

.hero-arrow-small.main.dark {
    border-color: #424242
}

.hero-arrow-small.main.hidden {
    opacity: 0;
    transition: none
}

.hero-line-texture {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 600px;
    width: 400px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden
}

@media only screen and (max-width:1200px) {
    .hero-line-texture {
        height: 550px;
        width: 350px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .hero-line-texture {
        height: 550px
    }
}

@media only screen and (max-width:1023px) {
    .hero-line-texture {
        height: 450px;
        width: 300px
    }
}

@media only screen and (max-width:480px) {
    .hero-line-texture {
        height: 65%;
        width: 65%;
        max-height: 450px
    }
}

.hero-line-texture:after,
.hero-line-texture:before {
    content: "";
    position: absolute;
    background-image: url("assets/images/global/line-texture-horizontal.png");
    background-repeat: repeat;
    background-size: auto 10px;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    transition-delay: 1s
}

.hero-line-texture:before {
    background-position: 0 0;
    -webkit-transform: translate(calc(-50% + 600px), calc(-50% - 600px)) rotate(-45deg);
    transform: translate(calc(-50% + 600px), calc(-50% - 600px)) rotate(-45deg)
}

.hero-line-texture:after {
    background-position: 0 5px;
    -webkit-transform: translate(calc(-50% - 600px), calc(-50% + 600px)) rotate(-45deg);
    transform: translate(calc(-50% - 600px), calc(-50% + 600px)) rotate(-45deg)
}

.hero-line-texture.animate:after,
.hero-line-texture.animate:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01);
    transition-delay: .75s
}

.hero-line-texture.dark:after,
.hero-line-texture.dark:before {
    background-image: url("assets/images/global/line-texture-horizontal-dark.png")
}

.hero.full-height {
    height: 100vh
}

.hero.parallax {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: z-index 1s 1s, -webkit-transform 1s ease;
    transition: transform 1s ease, z-index 1s 1s;
    transition: transform 1s ease, z-index 1s 1s, -webkit-transform 1s ease;
    z-index: 3
}

@media only screen and (max-width:767px) {
    .hero.parallax {
        padding-bottom: 60px
    }
}

.hero.parallax.animate {
    -webkit-transform: translateY(-50vh);
    transform: translateY(-50vh);
    z-index: 0;
    transition: z-index 0s linear 0s, -webkit-transform 1.3s cubic-bezier(.5, 0, .6, 1);
    transition: transform 1.3s cubic-bezier(.5, 0, .6, 1), z-index 0s linear 0s;
    transition: transform 1.3s cubic-bezier(.5, 0, .6, 1), z-index 0s linear 0s, -webkit-transform 1.3s cubic-bezier(.5, 0, .6, 1)
}

.hero.no-parallax {
    position: absolute;
    z-index: 0
}

.hero.no-parallax.animate {
    -webkit-transform: none;
    transform: none
}

.hero.video {
    z-index: 3
}

.hero.video video {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1
}

.hero.video video.desktop {
    min-width: 100%;
    min-height: 100%
}

@media only screen and (max-width:480px) {
    .hero.video video.desktop {
        display: none
    }
}

.hero.video video.mobile {
    *width: 120%;
    min-height: 120%;
    display: none
}

@media only screen and (max-width:480px) {
    .hero.video video.mobile {
        display: block
    }
}

.hero.video:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 2
}

.hero.overlay:before {
    content: "";
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.hero-play {
    z-index: 4;
    margin-top: 30px;
    position: relative
}

.hero-play-button {
    display: block;
    z-index: 4;
    position: relative;
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s
}

.hero-play-button:hover {
    opacity: .7
}

#play-button {
    width: 75px
}

#play-button.animate #play-button-circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease-in-out 1.2s
}

#play-button.animate #play-button-triangle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease-in-out 1.6s
}

#play-button-circle,
#play-button-triangle {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    transition-delay: 1s
}

#play-button-circle {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    stroke-dashoffset: 340;
    stroke-dasharray: 340
}

#play-button-triangle {
    stroke-dashoffset: 180;
    stroke-dasharray: 180
}

.parallax-standard-scroll {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.wrapper {
    -webkit-transform: none;
    transform: none;
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition-delay: 0s
}

.wrapper.nav-in {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px)
}

@-webkit-keyframes c {
    0% {
        -webkit-transform: translateY(100%) rotate(0deg);
        transform: translateY(100%) rotate(0deg)
    }

    30% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    70% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    80% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    90% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes c {
    0% {
        -webkit-transform: translateY(100%) rotate(0deg);
        transform: translateY(100%) rotate(0deg)
    }

    30% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg)
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    70% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    80% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    90% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.contact-form {
    width: 700px;
    margin: 0 auto;
    padding: 100px 0
}

@media only screen and (max-width:1200px) {
    .contact-form {
        width: 600px
    }
}

@media only screen and (max-width:1023px) {
    .contact-form {
        width: 500px
    }
}

@media only screen and (max-width:767px) {
    .contact-form {
        width: 100%;
        padding: 80px 30px;
        max-width: 500px
    }
}

.contact-form-title {
    margin-bottom: 20px
}

.contact-form-intro {
    margin-bottom: 30px
}

.contact-form .title {
    color: #f78f2e;
    text-align: center;
}

.contact-form .default-content-inner p a,
.contact-form .text a,
.default-content-inner .contact-form p a {
    color: currentColor;
    text-decoration: none;
    transition: color .2s
}

.contact-form .default-content-inner p a:hover,
.contact-form .text a:hover,
.default-content-inner .contact-form p a:hover {
    color: #b11f24
}

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

    .contact-form .default-content-inner p br,
    .contact-form .text br,
    .default-content-inner .contact-form p br {
        display: none
    }
}

.contact-form-wrapper {
    position: relative
}

.contact-form form {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s, visibility .5s
}

.contact-form form.hide {
    opacity: 0;
    visibility: hidden
}

.contact-form-input input,
.contact-form-input select,
.contact-form-input textarea {
    width: 100%;
    display: block;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: none;
    position: relative;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s;
    background-color: #f3f3f3;
    font: 300 normal 26px/1.3 Open Sans, Helvetica, Arial, sans-serif;
    padding: .4em .7em;
    margin-top: 10px;
}

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

    .contact-form-input input,
    .contact-form-input select,
    .contact-form-input textarea {
        font-size: 22px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {

    .contact-form-input input,
    .contact-form-input select,
    .contact-form-input textarea {
        font-size: 22px
    }
}

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

    .contact-form-input input,
    .contact-form-input select,
    .contact-form-input textarea {
        font-size: 18px
    }
}

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

    .contact-form-input input,
    .contact-form-input select,
    .contact-form-input textarea {
        font-size: 16px
    }
}

.contact-form-input input:focus,
.contact-form-input select:focus,
.contact-form-input textarea:focus {
    outline: 0
}

.contact-form-input select {
    background: #f5f0ea url("assets/images/global/select-arrow.png") calc(100% - 16px) 50%/20px auto no-repeat
}

.contact-form-input select::-ms-expand {
    display: none
}

.contact-form-submit input {
    display: block;
    margin: 30px auto 0;
    background: #77b442 url(assets/images/global/button-arrow-end.png) calc(100% - 10px) 50%/13px 10px no-repeat;
    padding-right: 30px !important;
    border: 0;
    padding-top: 11px;
    border-radius: 10px;
    color: #fff;
}

@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .contact-form-submit input {
        background-image: url("assets/images/global/button-arrow-end@2x.png")
    }
}

.contact-form-submit input:hover {
    background-color: #f78e2e;
}

.contact-form-submit input:focus {
    outline: 0
}

.contact-form textarea {
    height: 150px
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .contact-form textarea {
        height: 100px
    }
}

@media only screen and (max-width:767px) {
    .contact-form textarea {
        height: 100px
    }
}

.contact-form-success {
    color: #b11f24;
    font-weight: 700;
    text-transform: uppercase;
    font: normal normal 30px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    margin: 0;
    text-align: center;
    visibility: hidden;
    transition: visibility 0s .5s;
    position: absolute;
    top: 30%;
    width: 100%
}

@media only screen and (max-width:767px) {
    .contact-form-success {
        font-size: 20px
    }
}

.contact-form-success.show {
    visibility: visible
}

.contact-form-success.show .contact-form-success-icon svg {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-animation: c .8s forwards .5s;
    animation: c .8s forwards .5s
}

.contact-form-success.show .contact-form-success-text div {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .3s .6s;
    transition: transform .3s .6s;
    transition: transform .3s .6s, -webkit-transform .3s .6s
}

.contact-form-success svg {
    fill: #b11f24;
    width: 80px;
    display: block;
    margin: 0 auto 20px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@media only screen and (max-width:767px) {
    .contact-form-success svg {
        width: 50px
    }
}

.contact-form-success path {
    fill: #b11f24 !important
}

.contact-form-success-icon {
    overflow: hidden;
    padding-top: 20px
}

.contact-form-success-icon svg {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.contact-form-success-text {
    overflow: hidden
}

.contact-form-success-text div {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.ethos-hero {
    background: #f5f0ea
}

.ethos-hero .overflow-container {
    z-index: 4;
    position: relative
}

.ethos-hero .headline {
    color: #424242
}

.contact-form-submit .ethos-hero input,
.ethos-hero .button,
.ethos-hero .contact-form-submit input {
    background-color: #424242;
    color: #fff
}

.contact-form-submit .ethos-hero input:after,
.ethos-hero .button:after,
.ethos-hero .contact-form-submit input:after {
    background-color: #424242
}

.contact-form-submit .ethos-hero input:hover,
.contact-form-submit .ethos-hero input:hover:after,
.ethos-hero .button:hover,
.ethos-hero .button:hover:after,
.ethos-hero .contact-form-submit input:hover,
.ethos-hero .contact-form-submit input:hover:after {
    background-color: #353535
}

.ethos-hero-items:after {
    content: "";
    z-index: 3;
    background: linear-gradient(0deg, #f5f0ea 0, hsla(33, 35%, 94%, .7))
}

@media only screen and (max-width:767px) {
    .ethos-hero-items:after {
        background: hsla(33, 35%, 94%, .9)
    }
}

.ethos-hero-items.animate-in .ethos-hero-item {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition-timing-function: cubic-bezier(.24, .72, .35, 1.01)
}

.ethos-hero-items.animate-out .ethos-hero-item {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
    transition-timing-function: ease
}

.ethos-hero-item {
    position: absolute;
    z-index: 1;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
    transition-timing-function: ease-in-out
}

.ethos-hero-item.item1 {
    width: 30%;
    left: -2%;
    top: 3%;
    transition-duration: 2s;
    z-index: 1
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item1 {
        width: 60%
    }
}

.ethos-hero-item.item2 {
    width: 42%;
    left: -1%;
    top: 30%;
    transition-duration: 2.5s;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item2 {
        width: 70%;
        bottom: 13%
    }
}

.ethos-hero-item.item3 {
    width: 29%;
    left: 7%;
    bottom: 5%;
    transition-duration: 1.6s;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item3 {
        width: 45%
    }
}

.ethos-hero-item.item4 {
    width: 28%;
    left: 33%;
    top: 14%;
    transition-duration: 2.1s;
    z-index: 1
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item4 {
        width: 48%
    }
}

.ethos-hero-item.item5 {
    width: 45%;
    right: -5%;
    top: 5%;
    transition-duration: 1.7s;
    z-index: 1
}

.ethos-hero-item.item6 {
    width: 30%;
    right: 31%;
    bottom: 11%;
    transition-duration: 2.2s;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item6 {
        width: 50%;
        bottom: 27%
    }
}

.ethos-hero-item.item7 {
    width: 26%;
    right: -8%;
    bottom: 14%;
    transition-duration: 1.5s;
    z-index: 1
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item7 {
        width: 50%
    }
}

.ethos-hero-item.item8 {
    width: 30%;
    right: 4%;
    bottom: 32%;
    transition-duration: 1.8s;
    z-index: 2
}

@media only screen and (max-width:767px) {
    .ethos-hero-item.item8 {
        width: 50%
    }
}

.video-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    left: 0;
    top: 0;
    z-index: 2000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s
}

.video-overlay.open {
    opacity: 1;
    visibility: visible
}

.video-overlay-inner {
    width: 80%;
    position: relative
}

.video-overlay-close {
    position: absolute;
    right: -50px;
    top: 0;
    width: 40px;
    height: 40px;
    background: transparent url("assets/images/global/line-texture-light.png") 0 0/5px auto repeat;
    cursor: pointer
}

@media only screen and (max-width:767px) {
    .video-overlay-close {
        top: -50px;
        right: 0
    }
}

.video-overlay-close:after,
.video-overlay-close:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 25px;
    height: 3px;
    background-color: #fff
}

.video-overlay-close:before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.video-overlay-close:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.contact-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01) .1s;
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01) .1s;
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01) .1s, -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01) .1s
}

@media only screen and (max-width:1023px) {
    .contact-popup {
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.contact-popup.animate {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition-delay: .3s
}

@media only screen and (max-width:1023px) {
    .contact-popup.animate {
        transition-delay: .5s
    }
}

.contact-popup.animate .left {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition-delay: .5s
}

.contact-popup.animate .close {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.7s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.7s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.7s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.7s
}

.contact-popup-section {
    width: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

@media only screen and (max-width:1023px) {
    .contact-popup-section {
        width: 100%;
        height: 50%
    }
}

.contact-popup-inner {
    width: 60%;
    height: 300px;
    text-align: left
}

@media only screen and (max-width:1500px) {
    .contact-popup-inner {
        width: 70%
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .contact-popup-inner {
        height: 200px
    }
}

@media only screen and (max-width:1023px) {
    .contact-popup-inner {
        height: auto
    }
}

@media only screen and (max-width:767px) {
    .contact-popup-inner {
        width: 80%
    }
}

.contact-popup .left {
    background-color: #f9f9f9;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    z-index: 1;
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01)
}

@media only screen and (max-width:1023px) {
    .contact-popup .left {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.contact-popup .right {
    background-color: #ececec;
    z-index: 2
}

.contact-popup-button-wrapper {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 50px;
    height: 50px;
    z-index: 3;
    cursor: pointer;
    overflow: hidden
}

.contact-popup .close {
    transition-delay: 1s
}

.contact-popup-title {
    margin-bottom: 20px
}

.contact-popup .title {
    color: #424242
}

.contact-popup .default-content-inner p a,
.contact-popup .text a,
.default-content-inner .contact-popup p a {
    color: currentColor;
    text-decoration: none
}

.contact-popup .default-content-inner p a:hover,
.contact-popup .text a:hover,
.default-content-inner .contact-popup p a:hover {
    text-decoration: underline
}

.contact-popup.in-app .left {
    height: 40%
}

.contact-popup.in-app .right {
    height: 60%
}

.contact-popup.in-app .right .contact-popup-inner {
    -webkit-transform: translateY(-40%);
    transform: translateY(-40%)
}

@-webkit-keyframes d {
    0% {
        background-color: #decd8c
    }

    10% {
        background-color: #dbb78a
    }

    20% {
        background-color: #eb997d
    }

    30% {
        background-color: #c86f69
    }

    40% {
        background-color: #ad3029
    }

    50% {
        background-color: #873ab9
    }

    60% {
        background-color: #2c459a
    }

    70% {
        background-color: #4f93b5
    }

    80% {
        background-color: #70d5b8
    }

    90% {
        background-color: #c86f69
    }

    to {
        background-color: #decd8c
    }
}

@keyframes d {
    0% {
        background-color: #decd8c
    }

    10% {
        background-color: #dbb78a
    }

    20% {
        background-color: #eb997d
    }

    30% {
        background-color: #c86f69
    }

    40% {
        background-color: #ad3029
    }

    50% {
        background-color: #873ab9
    }

    60% {
        background-color: #2c459a
    }

    70% {
        background-color: #4f93b5
    }

    80% {
        background-color: #70d5b8
    }

    90% {
        background-color: #c86f69
    }

    to {
        background-color: #decd8c
    }
}

.landscape-popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1999;
    background-position: 50%;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-image: url("assets/images/global/landscape-popup1.svg");
    -webkit-animation: d 2s infinite;
    animation: d 2s infinite
}

.landscape-popup.bg2 {
    background-image: url("assets/images/global/landscape-popup2.svg")
}

@media only screen and (max-width:767px) and (orientation:landscape) {
    .landscape-popup {
        display: block
    }
}

.landscape-popup.in-app {
    background-size: auto 40%;
    background-position: center 35%
}

.home-hero-intro {
    background-color: #f5f0ea
}

.home-hero-intro .bg {}

@media only screen and (max-width:767px) {
    .home-hero-intro .bg {
        display: none
    }
}

.home-hero-intro .bg:after {
    content: none
}

.home-hero-intro .eg-logo svg {
    fill: #424242
}

@media only screen and (max-width:1023px) {
    .home-hero-intro .eg-logo svg {
        width: 60px
    }
}

.home-hero-wine .content {
    width: 50%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    position: absolute;
    top: 0;
    z-index: 1
}

@media only screen and (max-width:767px) {
    .home-hero-wine .content {
        position: absolute;
        width: 100%;
        height: 35%;
        text-align: center;
        -ms-flex-align: center;
        align-items: center;
        bottom: 0;
        left: 0;
        top: auto;
        padding: 0
    }
}

.home-hero-wine .content.left {
    left: 0;
    padding-right: 15%;
    padding-left: 12%;
    margin-left: auto
}

@media only screen and (max-width:1200px) {
    .home-hero-wine .content.left {
        padding-left: 10%;
        padding-right: 10%
    }
}

@media only screen and (max-width:1023px) {
    .home-hero-wine .content.left {
        padding-left: 7%;
        padding-right: 7%
    }
}

@media only screen and (max-width:767px) {
    .home-hero-wine .content.left {
        padding-left: 10%;
        padding-right: 10%
    }
}

.home-hero-wine .content.right {
    right: 0;
    padding-left: 11%
}

@media only screen and (max-width:1500px) {
    .home-hero-wine .content.right {
        padding-left: 12%
    }
}

@media only screen and (max-width:1200px) {
    .home-hero-wine .content.right {
        padding-left: 10%;
        padding-right: 10%
    }
}

@media only screen and (max-width:1023px) {
    .home-hero-wine .content.right {
        padding-left: 7%;
        padding-right: 7%
    }
}

@media only screen and (max-width:767px) {
    .home-hero-wine .content.right {
        padding-left: 10%;
        padding-right: 10%
    }
}

@media only screen and (max-width:480px) {
    .home-hero-wine .content.right {
        padding-left: 20px;
        padding-right: 20px
    }
}

.home-hero-wine .content .subtitle2 {
    margin-bottom: 30px
}

@media only screen and (max-width:767px) {
    .home-hero-wine .content .overflow-container {
        display: inline-block
    }
}

.home-hero-wine .bg {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    transition-delay: 1s
}

@media only screen and (max-width:767px) {
    .home-hero-wine .bg {
        width: 100%;
        height: 50%;
        position: relative
    }
}

@media only screen and (max-width:480px) {
    .home-hero-wine .bg {
        height: 45%
    }
}

.home-hero-wine .bg.left {
    left: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transform-origin: right center;
    transform-origin: right center
}

.home-hero-wine .bg.right {
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.home-hero-wine .bg.animate {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform .7s;
    transition: transform .7s;
    transition: transform .7s, -webkit-transform .7s;
    transition-delay: .3s
}

.home-hero-wine .can {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 800px auto;
    background-attachment: fixed
}

@media only screen and (max-width:1500px) {
    .home-hero-wine .can {
        background-size: 700px auto
    }
}

@media only screen and (max-width:1200px) {
    .home-hero-wine .can {
        background-attachment: scroll
    }
}

@media only screen and (max-width:767px) {
    .home-hero-wine .can {
        width: 100%;
        height: 75%;
        background-size: auto 100%;
        background-position: center top 0
    }
}

.home-hero-wine .can.left {
    left: 0
}

@media only screen and (max-width:1200px) {
    .home-hero-wine .can.left {
        left: -25%
    }
}

@media only screen and (max-width:767px) {
    .home-hero-wine .can.left {
        left: 0
    }
}

.home-hero-wine .can.right {
    right: 0
}

@media only screen and (max-width:1200px) {
    .home-hero-wine .can.right {
        right: -25%
    }
}

@media only screen and (max-width:767px) {
    .home-hero-wine .can.right {
        right: 0
    }
}

.home .chardonnay {
    background-color: #c84a49;
}

.home .chardonnay .bg {
    *background-image: url("assets/images/home/bg-chardonnay.jpg")
}

.home .chardonnay .can {
    *background-image: url("assets/images/home/can-chardonnay.png")
}

.home .chardonnay .wine-title {
    color: #ffffff;
}

.home .chardonnay .wine-subtitle2 {
    color: #7e0d0e;
}

.contact-form-submit .home .chardonnay input,
.home .chardonnay .button,
.home .chardonnay .contact-form-submit input {
    background-color: #7e0d0e;
    color: #fff;
}

.contact-form-submit .home .chardonnay input:after,
.home .chardonnay .button:after,
.home .chardonnay .contact-form-submit input:after {
    background-color: #7e0d0e;
}

.contact-form-submit .home .chardonnay input:hover,
.contact-form-submit .home .chardonnay input:hover:after,
.home .chardonnay .button:hover,
.home .chardonnay .button:hover:after,
.home .chardonnay .contact-form-submit input:hover,
.home .chardonnay .contact-form-submit input:hover:after {
    background-color: #007775;
    background-color: #312b2c;
}

.home .red-wine {
    background-color: #8b144a;
}

.home .red-wine .bg {
    background-image: url("assets/images/home/bg-red-wine.jpg")
}

.home .red-wine .can {
    background-image: url("assets/images/home/can-red-wine.png")
}

.home .red-wine .wine-title {
    color: #ffffff;
}

.home .red-wine .wine-subtitle2 {
    color: #bb5782;
}

.contact-form-submit .home .red-wine input,
.home .red-wine .button,
.home .red-wine .contact-form-submit input {
    background-color: #bb5782;
    color: #fff;
}

.contact-form-submit .home .red-wine input:after,
.home .red-wine .button:after,
.home .red-wine .contact-form-submit input:after {
    background-color: #bb5782;
}

.contact-form-submit .home .red-wine input:hover,
.contact-form-submit .home .red-wine input:hover:after,
.home .red-wine .button:hover,
.home .red-wine .button:hover:after,
.home .red-wine .contact-form-submit input:hover,
.home .red-wine .contact-form-submit input:hover:after {
    background-color: #671215;
    background-color: #312b2c;
}

.home .rose {
    background-color: #eaae01;
}

.home .rose .bg {
    background-image: url("assets/images/home/bg-rose.jpg")
}

.home .rose .can {
    background-image: url("assets/images/home/can-rose.png")
}

.home .rose .wine-title {
    color: white;
}

.home .rose .wine-subtitle2 {
    color: #d78e01;
}

.contact-form-submit .home .rose input,
.home .rose .button,
.home .rose .contact-form-submit input {
    background-color: #d78e01;
    color: #fff;
}

.contact-form-submit .home .rose input:after,
.home .rose .button:after,
.home .rose .contact-form-submit input:after {
    background-color: #d78e01;
}

.contact-form-submit .home .rose input:hover,
.contact-form-submit .home .rose input:hover:after,
.home .rose .button:hover,
.home .rose .button:hover:after,
.home .rose .contact-form-submit input:hover,
.home .rose .contact-form-submit input:hover:after {
    background-color: #111d44;
    background-color: #312b2c;
}

.home .sauvignon-blanc {
    background-color: #a36644;
    background: #98552c;
}

.home .sauvignon-blanc .bg {
    background-image: url("assets/images/home/bg-sauvignon-blanc.jpg")
}

.home .sauvignon-blanc .can {
    background-image: url("assets/images/home/can-sauvignon-blanc.png")
}

.home .sauvignon-blanc .wine-title {
    color: #ffffff;
}

.home .sauvignon-blanc .wine-subtitle2 {
    color: #753b2a;
}

.contact-form-submit .home .sauvignon-blanc input,
.home .sauvignon-blanc .button,
.home .sauvignon-blanc .contact-form-submit input {
    background-color: #753b2a;
    color: #fff;
}

.contact-form-submit .home .sauvignon-blanc input:after,
.home .sauvignon-blanc .button:after,
.home .sauvignon-blanc .contact-form-submit input:after {
    background-color: #753b2a;
}

.contact-form-submit .home .sauvignon-blanc input:hover,
.contact-form-submit .home .sauvignon-blanc input:hover:after,
.home .sauvignon-blanc .button:hover,
.home .sauvignon-blanc .button:hover:after,
.home .sauvignon-blanc .contact-form-submit input:hover,
.home .sauvignon-blanc .contact-form-submit input:hover:after {
    background-color: #50702f
}

.home .bubbles {
    background-color: #d43847;
}

.home .bubbles .bg {
    background-image: url("assets/images/home/bg-bubbles.jpg")
}

.home .bubbles .can {
    background-image: url("assets/images/home/can-bubbles.png")
}

.home .bubbles .wine-title {
    color: #e1d169
}

.home .bubbles .wine-title .overflow-container:first-child .overflow-inner {
    color: white;
}

.home .bubbles .wine-title .overflow-container:nth-child(2) .overflow-inner {
    color: white;
}

.home .bubbles .wine-title .overflow-container:nth-child(3) .overflow-inner {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(transparent, transparent), linear-gradient(180deg, #b9d382 0, #9dd29e);
    background-repeat: repeat, repeat;
    background-size: cover, cover;
    -webkit-background-clip: text
}

.home .bubbles .wine-subtitle2 {
    color: #95110e;
}

.contact-form-submit .home .bubbles input,
.home .bubbles .button,
.home .bubbles .contact-form-submit input {
    background-color: #95110e;
    color: #fff;
}

.contact-form-submit .home .bubbles input:after,
.home .bubbles .button:after,
.home .bubbles .contact-form-submit input:after {
    background-color: #95110e;
}

.contact-form-submit .home .bubbles input:hover,
.contact-form-submit .home .bubbles input:hover:after,
.home .bubbles .button:hover,
.home .bubbles .button:hover:after,
.home .bubbles .contact-form-submit input:hover,
.home .bubbles .contact-form-submit input:hover:after {
    background-color: #2d5550
}

#intro-cans {
    width: 160px
}

@media only screen and (max-width:1023px) {
    #intro-cans {
        width: 100px
    }
}

#intro-cans.animate #intro-can-red-wine,
#intro-cans.animate #intro-can-rose {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s
}

#intro-can-red-wine {
    -webkit-transform: translateX(110px);
    transform: translateX(110px);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition-delay: 1s
}

#intro-can-rose {
    -webkit-transform: translateX(-110px);
    transform: translateX(-110px);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition-delay: 1s
}

#wines {
    z-index: 1
}

#wines.show {
    z-index: 100
}

.wines {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease
}

.wines.animate {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.wines.animate-up-easing {
    transition-timing-function: cubic-bezier(0, 0, .36, .99)
}

.wines.animate-up {
    -webkit-transform: translateY(-50vh);
    transform: translateY(-50vh);
    transition-timing-function: cubic-bezier(.5, 0, .6, 1)
}

.wines .hero-arrow {
    -webkit-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
    top: 0;
    left: 100%
}

@media only screen and (max-width:767px) {
    .wines .hero-arrow {
        left: 200%
    }
}

.wines .hero-arrow.animate {
    -webkit-transform: translateX(-50%) translateY(-100%) rotateX(-90deg);
    transform: translateX(-50%) translateY(-100%) rotateX(-90deg)
}

.wines-section {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden
}

.wines-hero-main {
    background: transparent url("assets/images/wines/hero.jpg") 50%/cover no-repeat
}

.wines-hero-wine {
    overflow: visible;
    height: 100%
}

.wines-hero-wine .left,
.wines-hero-wine .right {
    transition: background-position 5s ease, -webkit-transform 1s ease;
    transition: transform 1s ease, background-position 5s ease;
    transition: transform 1s ease, background-position 5s ease, -webkit-transform 1s ease
}

@media only screen and (min-width:768px) {
    .wines-hero-wine .down {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .wines-hero-wine .up {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .down-s {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    .wines-hero-wine .up-s {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.wines-hero-wine .content {
    width: 50%;
    height: 100%;
    padding: 100px 9vw;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 4;
    overflow: hidden
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .content {
        width: 100%;
        position: relative;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 0 60px 40px
    }
}

@media only screen and (max-width:480px) {
    .wines-hero-wine .content {
        padding: 0 40px 40px
    }
}

.wines-hero-wine .content.left {
    left: 0
}

.wines-hero-wine .content.right {
    right: 0
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .content.right {
        -ms-flex-align: end;
        align-items: flex-end
    }
}

.wines-hero-wine .content-breaker {
    position: relative;
    margin-bottom: 15px
}

@media only screen and (max-width:340px) {
    .wines-hero-wine .content-breaker {
        margin-bottom: 5px
    }
}

.wines-hero-wine .content-breaker-inner {
    padding-bottom: 22px
}

.wines-hero-wine .content-breaker-inner:after {
    content: "";
    position: absolute;
    background: transparent url("assets/images/global/line-texture-breaker.png") 0 100%/7px auto repeat-x;
    display: block;
    width: 70%;
    height: 7px;
    left: 0;
    bottom: 0
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .content-breaker-inner:after {
        width: 100%
    }
}

.contact-form-submit .wines-hero-wine .content input,
.wines-hero-wine .content .button,
.wines-hero-wine .content .contact-form-submit input {
    margin: 40px 0 10px
}

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

    .contact-form-submit .wines-hero-wine .content input,
    .wines-hero-wine .content .button,
    .wines-hero-wine .content .contact-form-submit input {
        margin: 20px 0 0
    }
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .content>div {
        width: 250px
    }
}

@media only screen and (max-width:480px) {
    .wines-hero-wine .content>div {
        width: 200px
    }
}

.wines-hero-wine .content:after,
.wines-hero-wine .content:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 200%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
    background-color: transparent;
    background-position: 50%;
    background-size: 120% auto;
    background-repeat: repeat
}

.wines-hero-wine .content:before {
    transition-duration: 2s
}

.wines-hero-wine .content:after {
    transition-duration: 2.5s
}

.wines-hero-wine .content.down:after,
.wines-hero-wine .content.down:before {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%)
}

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

    .wines-hero-wine .content.down-s:after,
    .wines-hero-wine .content.down-s:before {
        -webkit-transform: translateY(-25%) !important;
        transform: translateY(-25%) !important
    }
}

.wines-hero-wine .content.last-down:after,
.wines-hero-wine .content.last-down:before,
.wines-hero-wine .content.up:after,
.wines-hero-wine .content.up:before {
    -webkit-transform: translateY(-75%);
    transform: translateY(-75%)
}

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

    .wines-hero-wine .content.up-s:after,
    .wines-hero-wine .content.up-s:before {
        -webkit-transform: translateY(-75%);
        transform: translateY(-75%)
    }
}

.wines-hero-wine .bg {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 4
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .bg {
        background: none !important;
        width: 25%;
        z-index: 5
    }
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .bg:after {
        content: none
    }
}

.wines-hero-wine .bg.left {
    left: 0
}

.wines-hero-wine .bg.right {
    right: 0
}

.wines-hero-wine .can {
    width: 150%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    background-size: 1000px auto;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    transition-delay: 1s
}

@media only screen and (max-width:1500px) {
    .wines-hero-wine .can {
        background-size: 900px auto
    }
}

@media only screen and (max-width:1200px) {
    .wines-hero-wine .can {
        background-size: 800px auto
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .wines-hero-wine .can {
        background-size: 800px auto
    }
}

@media only screen and (max-width:1023px) {
    .wines-hero-wine .can {
        background-size: 600px auto
    }
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .can {
        background-size: 100% auto;
        width: 700px;
        top: -100px
    }
}

@media only screen and (max-width:480px) {
    .wines-hero-wine .can {
        top: -100px;
        width: 520px
    }
}

@media only screen and (max-width:340px) {
    .wines-hero-wine .can {
        background-size: 70% auto
    }
}

.wines-hero-wine .can.left {
    -webkit-transform: translateX(-100%) rotate(-35deg);
    transform: translateX(-100%) rotate(-35deg);
    left: -25%
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .can.left {
        left: -300px
    }
}

@media only screen and (max-width:480px) {
    .wines-hero-wine .can.left {
        left: -220px
    }
}

@media only screen and (max-width:340px) {
    .wines-hero-wine .can.left {
        left: -250px
    }
}

.wines-hero-wine .can.right {
    -webkit-transform: translateX(100%) rotate(35deg);
    transform: translateX(100%) rotate(35deg);
    right: -25%
}

@media only screen and (max-width:767px) {
    .wines-hero-wine .can.right {
        right: -300px
    }
}

@media only screen and (max-width:480px) {
    .wines-hero-wine .can.right {
        right: -220px
    }
}

@media only screen and (max-width:340px) {
    .wines-hero-wine .can.right {
        right: -240px
    }
}

.wines-hero-wine .can.animate {
    transition: -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01);
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01), -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01);
    transition-delay: .5s
}

.wines-hero-wine .can.animate.left {
    -webkit-transform: translateX(0) rotate(35deg);
    transform: translateX(0) rotate(35deg)
}

.wines-hero-wine .can.animate.right {
    -webkit-transform: translateX(0) rotate(-35deg);
    transform: translateX(0) rotate(-35deg)
}

.wines-hero-wine.chardonnay .bg {
    background-image: url("assets/images/wines/chardonnay-bg.jpg")
}

.wines-hero-wine.chardonnay .content {
    background-color: #00b4b1
}

.wines-hero-wine.chardonnay .content:before {
    background-image: url("assets/images/wines/chardonnay-pattern1.png")
}

.wines-hero-wine.chardonnay .content:after {
    background-image: url("assets/images/wines/chardonnay-pattern2.png")
}

.wines-hero-wine.chardonnay .can {
    background-image: url("assets/images/home/can-chardonnay.png")
}

.wines-hero-wine.chardonnay .title {
    color: #f9e093
}

.wines-hero-wine.chardonnay .wines-ml {
    color: #00908e
}

.wines-hero-wine.red-wine .bg {
    background-image: url("assets/images/wines/red-wine-bg.jpg")
}

.wines-hero-wine.red-wine .content {
    background-color: #b11f24
}

.wines-hero-wine.red-wine .content:before {
    background-image: url("assets/images/wines/red-wine-pattern1.png")
}

.wines-hero-wine.red-wine .content:after {
    background-image: url("assets/images/wines/red-wine-pattern2.png")
}

.wines-hero-wine.red-wine .can {
    background-image: url("assets/images/home/can-red-wine.png")
}

.wines-hero-wine.red-wine .title {
    color: #9cd5c4
}

.wines-hero-wine.red-wine .wines-ml {
    color: #7d1619
}

.wines-hero-wine.rose .bg {
    background-image: url("assets/images/wines/rose-bg.jpg")
}

.wines-hero-wine.rose .content {
    background-color: #243f93
}

.wines-hero-wine.rose .content:before {
    background-image: url("assets/images/wines/rose-pattern1.png")
}

.wines-hero-wine.rose .content:after {
    background-image: url("assets/images/wines/rose-pattern2.png")
}

.wines-hero-wine.rose .can {
    background-image: url("assets/images/home/can-rose.png")
}

.wines-hero-wine.rose .title {
    color: #f3896f
}

.wines-hero-wine.rose .wines-ml {
    color: #162559
}

.wines-hero-wine.sauvignon-blanc .bg {
    background-image: url("assets/images/wines/sauvignon-blanc-bg.jpg")
}

.wines-hero-wine.sauvignon-blanc .content {
    background-color: #74a345
}

.wines-hero-wine.sauvignon-blanc .content:before {
    background-image: url("assets/images/wines/sauvignon-blanc-pattern1.png")
}

.wines-hero-wine.sauvignon-blanc .content:after {
    background-image: url("assets/images/wines/sauvignon-blanc-pattern2.png")
}

.wines-hero-wine.sauvignon-blanc .can {
    background-image: url("assets/images/home/can-sauvignon-blanc.png")
}

.wines-hero-wine.sauvignon-blanc .title {
    color: #c2e8fb
}

.wines-hero-wine.sauvignon-blanc .wines-ml {
    color: #537431
}

.wines-hero-wine.bubbles .bg {
    background-image: url("assets/images/wines/bubbles-bg.jpg")
}

.wines-hero-wine.bubbles .bg:after {
    display: none
}

.wines-hero-wine.bubbles .content {
    background-color: #1d1e1e
}

.wines-hero-wine.bubbles .content:before {
    background-image: url("assets/images/wines/bubbles-pattern1.png")
}

.wines-hero-wine.bubbles .content:after {
    background-image: url("assets/images/wines/bubbles-pattern2.png")
}

.wines-hero-wine.bubbles .can {
    background-image: url("assets/images/home/can-bubbles.png")
}

.wines-hero-wine.bubbles .content .overflow-container:first-child .overflow-inner .wines-ml,
.wines-hero-wine.bubbles .content .overflow-container:first-child .overflow-inner .wines-name {
    color: #eeb978
}

.wines-hero-wine.bubbles .content .overflow-container:first-child .overflow-inner:after {
    background-image: url("assets/images/wines/breaker-bubbles1.png")
}

.wines-hero-wine.bubbles .content .overflow-container:nth-child(2) .overflow-inner .title {
    color: #e5d065
}

.default-content-inner .wines-hero-wine.bubbles .content .overflow-container:nth-child(2) .overflow-inner h2,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(2) .overflow-inner .default-content-inner h2,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(2) .overflow-inner .subtitle,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(2) .overflow-inner .wines-name {
    color: #d0d275
}

.wines-hero-wine.bubbles .content .overflow-container:nth-child(2) .overflow-inner:after {
    background-image: url("assets/images/wines/breaker-bubbles2.png")
}

.default-content-inner .wines-hero-wine.bubbles .content .overflow-container:nth-child(3) .overflow-inner>div h2,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(3) .overflow-inner>div .default-content-inner h2,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(3) .overflow-inner>div .subtitle,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(3) .overflow-inner>div .title,
.wines-hero-wine.bubbles .content .overflow-container:nth-child(3) .overflow-inner>div .wines-name {
    color: #b0d387
}

.wines-title {
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0
}

.wines-ml {
    text-transform: uppercase;
    font: normal normal 42px/1.1 Heavitas, Arial Black, Helvetica, sans-serif;
    line-height: .9;
    margin-right: 10px
}

.wines-ml-number {
    display: block;
    font-size: 47px
}

@media only screen and (max-width:1200px) {
    .wines-ml-number {
        font-size: 38px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .wines-ml-number {
        font-size: 33px
    }
}

@media only screen and (max-width:1023px) {
    .wines-ml-number {
        font-size: 33px;
        margin-top: 1px
    }
}

@media only screen and (max-width:767px) {
    .wines-ml-number {
        font-size: 26px
    }
}

@media only screen and (max-width:480px) {
    .wines-ml-number {
        font-size: 24px
    }
}

.wines-ml-unit {
    display: block;
    font-size: 25px
}

@media only screen and (max-width:1200px) {
    .wines-ml-unit {
        font-size: 20px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .wines-ml-unit {
        font-size: 17px
    }
}

@media only screen and (max-width:1023px) {
    .wines-ml-unit {
        font-size: 17px
    }
}

@media only screen and (max-width:767px) {
    .wines-ml-unit {
        font-size: 14px
    }
}

@media only screen and (max-width:480px) {
    .wines-ml-unit {
        font-size: 12px
    }
}

.wines.static {
    position: absolute;
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh)
}

.wines.static .wines-section {
    position: static
}

.wines.static .wines-hero-wine .bg,
.wines.static .wines-hero-wine .content {
    -webkit-transform: none;
    transform: none
}

.ethos-hero-main {
    background: #000 url("assets/images/ethos/hero.jpg") 50%/cover no-repeat;
    z-index: 0 !important
}

.ethos-hero-main .headline {
    *height: 3.2em;
    height: auto;
}

.ethos-hero-intro {
    background: #f5f0ea
}

.default-content-inner .ethos-hero-intro h2,
.ethos-hero-intro .default-content-inner h2,
.ethos-hero-intro .subtitle,
.ethos-hero-intro .wines-name {
    color: #f78f2e;
}

.ethos-video {
    height: 50%;
    width: 100%;
    position: relative;
    overflow: hidden
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .ethos-video {
        height: 40%
    }
}

@media only screen and (max-width:1023px) {
    .ethos-video {
        height: auto
    }
}

.ethos-video.animate-in video {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:1023px) {
    .ethos-video.animate-in video {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.ethos-video.animate-out video {
    -webkit-transform: translate(-50%, -20%);
    transform: translate(-50%, -20%)
}

@media only screen and (max-width:1023px) {
    .ethos-video.animate-out video {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.ethos-video video {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -80%);
    transform: translate(-50%, -80%);
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    width: 100%;
    min-height: 100%
}

@media only screen and (max-width:1023px) {
    .ethos-video video {
        -webkit-transform: translate(0);
        transform: translate(0);
        transition-duration: 0s;
        position: static;
        min-height: 0;
        width: 100%
    }
}

@media only screen and (max-width:1023px) {
    .ethos-video video.desktop {
        display: none
    }
}

.ethos-video video.mobile {
    display: none
}

@media only screen and (max-width:1023px) {
    .ethos-video video.mobile {
        display: block
    }
}

.ethos-values {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background: #f3f3f3;
    height: 50%;
    width: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .ethos-values {
        height: 60%
    }
}

.ethos-values-wrapper {
    height: 100%;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center
}

.ethos-values-inner,
.ethos-values-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.ethos-values-inner {
    padding: 40px;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    max-width: 1800px
}

.ethos-values-item {
    width: 33.33333%;
    text-align: center;
    padding: 30px 4%;
    *border-right: 2px solid #e0dbd6
}

@media only screen and (max-width:1200px) {
    .ethos-values-item {
        padding: 40px 2% 30px
    }
}

@media only screen and (max-width:1023px) {
    .ethos-values-item {
        width: 100%;
        padding: 40px 2% 60px;
        border-right: 0;
        border-bottom: none;
        max-width: 500px
    }
}

@media only screen and (max-width:480px) {
    .ethos-values-item {
        padding: 0
    }
}

.ethos-values-item:last-child {
    border-right: 0;
    border-bottom: 0
}

@media only screen and (max-width:1023px) {
    .ethos-values-item-hide-s {
        display: none
    }
}

.ethos-values-icon {
    margin-bottom: 30px
}

@media only screen and (max-width:1500px) {
    .ethos-values-icon {
        margin-bottom: 15px
    }
}

@media only screen and (max-width:1023px) {
    .ethos-values-icon {
        margin-bottom: 30px
    }
}

@media only screen and (max-width:767px) {
    .ethos-values-icon {
        margin-bottom: 20px
    }
}

.ethos-values-icon svg {
    width: auto;
    height: 100px
}

@media only screen and (max-width:1500px) {
    .ethos-values-icon svg {
        height: 80px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .ethos-values-icon svg {
        height: 80px
    }
}

.ethos-values-icon path {
    fill: #f78f2e;
}

.ethos-values-title {
    margin-bottom: 20px
}

@media only screen and (max-width:1500px) {
    .ethos-values-title {
        margin-bottom: 15px
    }
}

@media only screen and (max-width:1023px) {
    .ethos-values-title {
        margin-bottom: 20px
    }
}

@media only screen and (max-width:767px) {
    .ethos-values-title {
        margin-bottom: 15px
    }
}

@media only screen and (max-width:1023px) {
    .ethos-values-title br {
        display: none
    }
}

@media only screen and (max-width:480px) {
    .ethos-values-title br {
        display: inline
    }
}

.default-content-inner .ethos-values h2,
.ethos-values .default-content-inner h2,
.ethos-values .subtitle,
.ethos-values .wines-name {
    color: #f78f2e;
}

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

    .default-content-inner .ethos-values h2,
    .ethos-values .default-content-inner h2,
    .ethos-values .subtitle,
    .ethos-values .wines-name {
        font-size: 26px
    }
}

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

    .default-content-inner .ethos-values h2,
    .ethos-values .default-content-inner h2,
    .ethos-values .subtitle,
    .ethos-values .wines-name {
        font-size: 30px
    }
}

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

    .default-content-inner .ethos-values h2,
    .ethos-values .default-content-inner h2,
    .ethos-values .subtitle,
    .ethos-values .wines-name {
        font-size: 26px
    }
}

.ethos-statement {
    background: #f3f3f3;
    height: 50%;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .ethos-statement {
        height: 60%
    }
}

@media only screen and (max-width:767px) {
    .ethos-statement {
        height: 70%
    }
}

.ethos-statement-inner {
    max-width: 1200px;
    padding: 40px 100px
}

@media only screen and (max-width:767px) {
    .ethos-statement-inner {
        padding: 40px 60px
    }
}

@media only screen and (max-width:480px) {
    .ethos-statement-inner {
        padding: 0 30px 40px
    }
}

.ethos-statement-title {
    margin-bottom: 20px
}

@media only screen and (max-width:767px) {
    .ethos-statement-title {
        margin-bottom: 10px;
        text-align: left
    }
}

.ethos-statement .title {
    color: #424242
}

@media only screen and (max-width:1500px) {
    .ethos-statement .title {
        font-size: 50px
    }
}

@media only screen and (max-width:1200px) {
    .ethos-statement .title {
        font-size: 40px
    }
}

@media only screen and (max-width:1023px) {
    .ethos-statement .title {
        font-size: 30px
    }
}

@media only screen and (max-width:767px) {
    .ethos-statement .title {
        font-size: 25px
    }
}

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

    .default-content-inner .ethos-statement p,
    .ethos-statement .default-content-inner p,
    .ethos-statement .text {
        font-size: 13px
    }
}

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

    .default-content-inner .ethos-statement p.full,
    .ethos-statement .default-content-inner p.full,
    .ethos-statement .text.full {
        display: none
    }
}

.default-content-inner .ethos-statement p.shortened,
.ethos-statement .default-content-inner p.shortened,
.ethos-statement .text.shortened {
    display: none;
    text-align: left
}

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

    .default-content-inner .ethos-statement p.shortened,
    .ethos-statement .default-content-inner p.shortened,
    .ethos-statement .text.shortened {
        display: block
    }
}

.ethos-contact {
    background: #fff
}

.ethos-text {
    font-size: 16px;
    text-align: justify;
    text-align-last: center;
    color: #424242;
}

#ethos~.ethos-values-s-only {
    display: none
}

@-webkit-keyframes e {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes e {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes f {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    to {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes f {
    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    to {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@-webkit-keyframes g {
    0% {
        -webkit-transform: translateX(-55px);
        transform: translateX(-55px)
    }

    to {
        -webkit-transform: translateX(55px);
        transform: translateX(55px)
    }
}

@keyframes g {
    0% {
        -webkit-transform: translateX(-55px);
        transform: translateX(-55px)
    }

    to {
        -webkit-transform: translateX(55px);
        transform: translateX(55px)
    }
}

#screw-corks {
    transition: background-color 1s
}

#screw-corks .first-section {
    background-color: #b11f24;
    transition: background-color 0s 0s
}

#screw-corks .first-section.animate {
    background-color: transparent;
    transition: background-color 0s 1s
}

.screw-corks {
    transition: background-color 1s
}

.screw-corks-hero-main {
    background: #000 url("assets/images/screw-corks/hero.jpg") 50%/cover no-repeat;
    z-index: 0 !important
}

.screw-corks-hero-main-icon {
    margin-bottom: 30px
}

.screw-corks-hero-main-icon svg {
    fill: #fff
}

.contact-form-submit .screw-corks-hero-main input,
.screw-corks-hero-main .button,
.screw-corks-hero-main .contact-form-submit input {
    background-color: #fff;
    color: #424242
}

.contact-form-submit .screw-corks-hero-main input:after,
.screw-corks-hero-main .button:after,
.screw-corks-hero-main .contact-form-submit input:after {
    background-color: #fff
}

.contact-form-submit .screw-corks-hero-main input:hover,
.contact-form-submit .screw-corks-hero-main input:hover:after,
.screw-corks-hero-main .button:hover,
.screw-corks-hero-main .button:hover:after,
.screw-corks-hero-main .contact-form-submit input:hover,
.screw-corks-hero-main .contact-form-submit input:hover:after {
    background-color: #f2f2f2
}

.screw-corks-hero-main.hide {
    visibility: hidden
}

.default-content-inner .screw-corks-hero p,
.screw-corks-hero .default-content-inner p,
.screw-corks-hero .headline,
.screw-corks-hero .text {
    color: #fff
}

.screw-corks-hero-arrow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: transparent url("assets/images/screw-corks/hero-arrow.png") center 50%/10px auto no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: background-position .3s cubic-bezier(.24, .72, .35, 1.01), opacity .3s, visibility .3s, -webkit-transform .5s;
    transition: background-position .3s cubic-bezier(.24, .72, .35, 1.01), opacity .3s, visibility .3s, transform .5s;
    transition: background-position .3s cubic-bezier(.24, .72, .35, 1.01), opacity .3s, visibility .3s, transform .5s, -webkit-transform .5s;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    z-index: 1
}

.screw-corks-hero-arrow:hover {
    background-position: center 70%;
    cursor: pointer
}

.screw-corks-hero-arrow.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.screw-corks-icon {
    margin-bottom: 30px
}

.screw-corks-icon-svg path {
    fill: #fff
}

.screw-corks-headline {
    margin-bottom: 1em
}

#screw-corks-recycle {
    width: 250px
}

#recycle-arrows {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: e 3s linear infinite;
    animation: e 3s linear infinite
}

#recycle-can,
#recycle-can-shape {
    -webkit-animation: f 3s ease-in-out infinite;
    animation: f 3s ease-in-out infinite
}

#recycle-can-lines,
#recycle-can-logo {
    -webkit-animation: g 2s linear infinite;
    animation: g 2s linear infinite
}

#screw-corks-pack {
    width: 200px
}

#screw-corks-pack.animate #pack-moon {
    -webkit-transform: translate(0);
    transform: translate(0);
    transition: -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition: transform 1s cubic-bezier(.24, .72, .35, 1.01) 1s, -webkit-transform 1s cubic-bezier(.24, .72, .35, 1.01) 1s
}

#screw-corks-pack.animate #pack-can {
    -webkit-transform: translate(0);
    transform: translate(0);
    transition: -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s;
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s;
    transition: transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s, -webkit-transform .8s cubic-bezier(.24, .72, .35, 1.01) .8s
}

#pack-moon {
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
    transition-delay: 1s
}

#pack-can {
    -webkit-transform: translateX(-25px);
    transform: translateX(-25px);
    transition-delay: 1.1s
}

#screw-corks-break {
    width: 250px
}

#screw-corks-break.animate #break-can {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .5s cubic-bezier(.6, .03, 1, .57) 1.4s;
    transition: transform .5s cubic-bezier(.6, .03, 1, .57) 1.4s;
    transition: transform .5s cubic-bezier(.6, .03, 1, .57) 1.4s, -webkit-transform .5s cubic-bezier(.6, .03, 1, .57) 1.4s
}

#screw-corks-break.animate #break-bottle {
    opacity: 0;
    transition: opacity 0s linear 1.8s
}

#screw-corks-break.animate #break-bottle-left,
#screw-corks-break.animate #break-bottle-left-shape,
#screw-corks-break.animate #break-bottle-right,
#screw-corks-break.animate #break-bottle-right-shape {
    -webkit-transform: translate(0) rotate(0);
    transform: translate(0) rotate(0);
    opacity: 1;
    transition: opacity 0s linear 1.8s, -webkit-transform .2s cubic-bezier(.6, .03, 1, .57) 1.8s;
    transition: transform .2s cubic-bezier(.6, .03, 1, .57) 1.8s, opacity 0s linear 1.8s;
    transition: transform .2s cubic-bezier(.6, .03, 1, .57) 1.8s, opacity 0s linear 1.8s, -webkit-transform .2s cubic-bezier(.6, .03, 1, .57) 1.8s
}

#screw-corks-break.animate #break-circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s cubic-bezier(.76, .2, .39, .8) .8s
}

#break-can {
    -webkit-transform: translateY(-270px);
    transform: translateY(-270px);
    transition-delay: 1s
}

#break-bottle {
    opacity: 1;
    transition-delay: 1s
}

#break-bottle-left,
#break-bottle-left-shape {
    opacity: 0;
    -webkit-transform-origin: 187px 261px 0;
    transform-origin: 187px 261px 0;
    -webkit-transform: translateX(-10px) rotate(90deg);
    transform: translateX(-10px) rotate(90deg);
    transition-delay: 1s
}

#break-bottle-right,
#break-bottle-right-shape {
    opacity: 0;
    -webkit-transform-origin: 214px 261px 0;
    transform-origin: 214px 261px 0;
    -webkit-transform: translateX(10px) rotate(-90deg);
    transform: translateX(10px) rotate(-90deg);
    transition-delay: 1s
}

#break-circle {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition-delay: 1s
}

#screw-corks-equal {
    width: 200px
}

#screw-corks-equal.animate #equal-can-top {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.4s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.4s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.4s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.4s
}

#screw-corks-equal.animate #equal-can-bottom {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1s
}

#screw-corks-equal.animate #equal-bottle {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.2s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.2s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.2s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.2s
}

#screw-corks-equal.animate #equal-sign {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s;
    transition: transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s, -webkit-transform .5s cubic-bezier(.24, .72, .35, 1.01) 1.6s
}

#equal-can-top {
    -webkit-transform: translateY(140px);
    transform: translateY(140px);
    transition-delay: 1s
}

#equal-can-bottom {
    -webkit-transform: translateX(165px);
    transform: translateX(165px);
    transition-delay: 1s
}

#equal-bottle {
    -webkit-transform: translateX(-103px);
    transform: translateX(-103px);
    transition-delay: 1s
}

#equal-sign {
    -webkit-transform: translateX(-45px);
    transform: translateX(-45px);
    transition-delay: 1s
}

#screw-corks-gear {
    width: 250px
}

#screw-corks-gear.animate #gear-can-left {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform 2s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition: transform 2s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition: transform 2s cubic-bezier(.24, .72, .35, 1.01) 1s, -webkit-transform 2s cubic-bezier(.24, .72, .35, 1.01) 1s;
    transition-delay: 1s
}

#screw-corks-gear.animate #gear-can-right {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform 2s cubic-bezier(.24, .72, .35, 1.01) 1.3s;
    transition: transform 2s cubic-bezier(.24, .72, .35, 1.01) 1.3s;
    transition: transform 2s cubic-bezier(.24, .72, .35, 1.01) 1.3s, -webkit-transform 2s cubic-bezier(.24, .72, .35, 1.01) 1.3s
}

#screw-corks-gear.animate #gear-can-left-lines,
#screw-corks-gear.animate #gear-can-left-logo {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .6s;
    transition: transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .6s;
    transition: transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .6s, -webkit-transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .6s
}

#screw-corks-gear.animate #gear-can-right-lines,
#screw-corks-gear.animate #gear-can-right-logo {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .8s;
    transition: transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .8s;
    transition: transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .8s, -webkit-transform 2.9s cubic-bezier(.24, .72, .35, 1.01) .8s
}

#screw-corks-gear.animate #gear-circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s cubic-bezier(.76, .2, .39, .8) .8s
}

#gear-can-left,
#gear-can-right {
    -webkit-transform: translateY(-110px);
    transform: translateY(-110px);
    transition-delay: 1s
}

#gear-can-left-lines,
#gear-can-left-logo,
#gear-can-right-lines,
#gear-can-right-logo {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    transition-delay: 1s
}

#gear-circle {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition-delay: 1s
}

#fp-nav {
    -webkit-transform: translateX(60px);
    transform: translateX(60px);
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s
}

@media only screen and (max-width:767px) {
    #fp-nav {
        display: none
    }
}

#fp-nav.show {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#fp-nav ul li:first-child,
#fp-nav ul li:nth-child(n+7) {
    display: none
}

#fp-nav ul li a {
    cursor: default
}

#fp-nav ul li a span {
    background-color: #fff
}

.screw-corks-hero-main.no-parallax {
    visibility: visible !important
}

.trade-media-hero .parallax-standard-scroll {
    background: #000 url("assets/images/trade-media/hero.jpg") 50%/cover no-repeat
}

.trade-media-section {
    text-align: center;
    border-bottom: 1px solid #cac4bd;
    background: #f5f0ea;
    padding: 80px
}

@media only screen and (max-width:1200px) {
    .trade-media-section {
        padding: 60px 0
    }
}

@media only screen and (max-width:1023px) {
    .trade-media-section {
        padding: 40px
    }
}

.trade-media-section-headline+.trade-media-section-text {
    margin-top: 1em
}

@media only screen and (max-width:1200px) {
    .trade-media-headline {
        font-size: 60px
    }
}

@media only screen and (max-width:1023px) {
    .trade-media-headline {
        font-size: 50px
    }
}

@media only screen and (max-width:767px) {
    .trade-media-headline {
        font-size: 40px
    }
}

@media only screen and (max-width:480px) {
    .trade-media-headline {
        font-size: 30px
    }
}

.trade-media-title {
    margin-bottom: 20px;
    font-size: 40px
}

@media only screen and (max-width:1200px) {
    .trade-media-title {
        font-size: 30px
    }
}

@media only screen and (max-width:1023px) {
    .trade-media-title {
        font-size: 20px
    }
}

@media only screen and (max-width:767px) {
    .trade-media-title {
        font-size: 30px
    }
}

@media only screen and (max-width:480px) {
    .trade-media-title {
        font-size: 20px
    }
}

.tech-sheet-section {
    padding-bottom: 0
}

.tech-sheet-items {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 40px;
    max-width: 1400px;
    margin: 0 auto
}

@media only screen and (max-width:767px) {
    .tech-sheet-items {
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0
    }
}

.tech-sheet-item {
    width: 33.33333%;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 100px
}

@media only screen and (max-width:1023px) {
    .tech-sheet-item {
        margin-bottom: 60px
    }
}

@media only screen and (max-width:767px) {
    .tech-sheet-item {
        width: 100%
    }
}

@media only screen and (max-width:480px) {
    .tech-sheet-item {
        padding: 0
    }
}

.tech-sheet-item img {
    display: block;
    margin: 0 auto;
    margin-bottom: 30px;
    width: 100%;
    max-width: 350px
}

.tech-sheet-item .chardonnay-title {
    color: #00b4b1
}

.tech-sheet-item .red-wine-title {
    color: #b11f24
}

.tech-sheet-item .rose-title {
    color: #243f93
}

.tech-sheet-item .sauvignon-blanc {
    color: #74a345
}

.tech-sheet-item .bubbles {
    color: #1d1e1e
}

.brand-assets-items {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto
}

@media only screen and (max-width:767px) {
    .brand-assets-items {
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0
    }
}

.brand-assets-item {
    width: 50%;
    text-align: center;
    padding: 0 20px
}

@media only screen and (max-width:767px) {
    .brand-assets-item {
        width: 100%
    }
}

@media only screen and (max-width:480px) {
    .brand-assets-item {
        padding: 0
    }
}

.brand-assets-item:first-child {
    position: relative
}

@media only screen and (max-width:767px) {
    .brand-assets-item:first-child {
        margin-bottom: 80px
    }
}

.brand-assets-item:first-child:after {
    position: absolute;
    content: "";
    border-right: 1px solid #acacac;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 50%
}

@media only screen and (max-width:767px) {
    .brand-assets-item:first-child:after {
        display: none
    }
}

.brand-assets-item-icon {
    height: 300px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto
}

@media only screen and (max-width:1023px) {
    .brand-assets-item-icon {
        height: 250px
    }
}

@media only screen and (max-width:767px) {
    .brand-assets-item-icon {
        height: auto
    }
}

.brand-assets-item-icon.logos {
    width: 225px
}

@media only screen and (max-width:1023px) {
    .brand-assets-item-icon.logos {
        width: 180px
    }
}

@media only screen and (max-width:480px) {
    .brand-assets-item-icon.logos {
        width: 150px
    }
}

.brand-assets-item-icon.images {
    width: 250px
}

@media only screen and (max-width:1023px) {
    .brand-assets-item-icon.images {
        width: 200px
    }
}

@media only screen and (max-width:480px) {
    .brand-assets-item-icon.images {
        width: 170px
    }
}

.brand-assets-item svg {
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
    width: 100%;
    height: auto;
    fill: #b11f24
}

.brand-assets-title {
    color: #424242
}

.buzz {
    background-color: #243f93;
    padding: 100px 0 200px;
    transition: background-color .5s
}

@media only screen and (max-width:1200px) {
    .buzz {
        padding: 80px 0 160px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .buzz {
        padding: 60px 0 140px
    }
}

@media only screen and (max-width:1023px) {
    .buzz {
        padding: 60px 0 100px
    }
}

@media only screen and (max-width:767px) {
    .buzz {
        padding-top: 40px 30px
    }
}

.buzz .title {
    color: rgba(0, 0, 0, .4);
    text-align: center;
    margin-bottom: 40px
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .buzz .title {
        font-size: 50px
    }
}

@media only screen and (max-width:1023px) {
    .buzz .title {
        margin-bottom: 20px
    }
}

.buzz .headline {
    color: #f3eee8;
    font-size: 60px;
    max-width: 1400px
}

@media only screen and (max-width:1200px) {
    .buzz .headline {
        font-size: 50px
    }
}

@media only screen and (max-height:730px) and (min-width:1024px) {
    .buzz .headline {
        font-size: 40px
    }
}

@media only screen and (max-width:1023px) {
    .buzz .headline {
        font-size: 40px
    }
}

@media only screen and (max-width:767px) {
    .buzz .headline {
        font-size: 28px
    }
}

@media only screen and (max-width:480px) {
    .buzz .headline {
        font-size: 17px
    }
}

.buzz-item {
    height: 100%;
    text-align: center;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 200px
}

@media only screen and (max-width:1200px) {
    .buzz-item {
        padding: 0 150px
    }
}

@media only screen and (max-width:1023px) {
    .buzz-item {
        padding: 0 100px
    }
}

@media only screen and (max-width:767px) {
    .buzz-item {
        padding: 0 70px
    }
}

@media only screen and (max-width:480px) {
    .buzz-item {
        padding: 0 50px
    }
}

.buzz-item:focus {
    outline: 0
}

.buzz .button,
.buzz .contact-form-submit input,
.contact-form-submit .buzz input {
    background-color: rgba(0, 0, 0, .3);
    color: #fff
}

.buzz .button:after,
.buzz .button:hover,
.buzz .button:hover:after,
.buzz .contact-form-submit input:after,
.buzz .contact-form-submit input:hover,
.buzz .contact-form-submit input:hover:after,
.contact-form-submit .buzz input:after,
.contact-form-submit .buzz input:hover,
.contact-form-submit .buzz input:hover:after {
    background-color: rgba(0, 0, 0, .3)
}

.buzz .button:hover,
.buzz .contact-form-submit input:hover,
.contact-form-submit .buzz input:hover {
    background-color: rgba(0, 0, 0, .4);
    color: #fff
}

.buzz .button:hover:after,
.buzz .button:hover:hover,
.buzz .button:hover:hover:after,
.buzz .contact-form-submit input:hover:after,
.buzz .contact-form-submit input:hover:hover,
.buzz .contact-form-submit input:hover:hover:after,
.contact-form-submit .buzz input:hover:after,
.contact-form-submit .buzz input:hover:hover,
.contact-form-submit .buzz input:hover:hover:after {
    background-color: rgba(0, 0, 0, .4)
}

.buy-hero {
    background: #f5f0ea;
    z-index: 0 !important
}

.buy-hero-headline {
    position: relative;
    z-index: 2
}

.buy-hero-headline .headline {
    color: #424242 !important
}

.buy-hero-more {
    position: absolute;
    bottom: 80px;
    left: 0;
    z-index: 2;
    text-align: center;
    width: 100%
}

@media only screen and (max-width:767px) {
    .buy-hero-more {
        bottom: 120px
    }
}

.buy-hero-more.bottom-spacing {
    bottom: 29%
}

.buy-hero-title {
    margin-top: auto;
    margin-bottom: 10px;
    position: relative;
    z-index: 2
}

.buy-hero-title .eyebrow {
    color: #424242
}

.buy-contact {
    background: #fff
}

#map {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 800px;
    z-index: 1
}

@media only screen and (max-width:1200px) {
    #map {
        width: 700px
    }
}

@media only screen and (max-width:1023px) {
    #map {
        width: 600px
    }
}

@media only screen and (max-width:767px) {
    #map {
        width: 400px;
        -webkit-transform: translate(-50%, -60%);
        transform: translate(-50%, -60%)
    }
}

@media only screen and (max-width:480px) {
    #map {
        width: 300px
    }
}

#map circle {
    transition: fill .5s
}

#map .default-state {
    transition-delay: .3s;
    transition-duration: .2s
}

@media only screen and (min-width:1201px) {
    #map .default-state {
        fill: #e2ded9
    }
}

.default-hero {
    background: #f5f0ea;
    height: 400px;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 3%;
    padding-right: 3%
}

@media only screen and (max-width:1023px) {
    .default-hero {
        height: auto;
        padding-top: 150px;
        padding-bottom: 100px
    }
}

.default-hero .headline {
    color: #424242
}

@media only screen and (max-width:1200px) {
    .default-hero .headline {
        font-size: 60px
    }
}

@media only screen and (max-width:1023px) {
    .default-hero .headline {
        font-size: 45px
    }
}

@media only screen and (max-width:767px) {
    .default-hero .headline {
        font-size: 35px
    }
}

@media only screen and (max-width:480px) {
    .default-hero .headline {
        font-size: 28px
    }
}

.default-content {
    background-color: #fff
}

.default-content-inner {
    padding: 100px 60px;
    max-width: 900px;
    margin: 0 auto
}

@media only screen and (max-width:767px) {
    .default-content-inner {
        padding: 40px 30px
    }
}

.default-content-inner h2 {
    color: #424242;
    margin-bottom: .3em
}

.default-content-inner p+p {
    margin-top: 1.5em
}

.default-content-inner p+h2 {
    margin-top: 2em
}

.default-content-inner p a {
    color: currentColor;
    text-decoration: underline
}

.default-content-inner p a:hover {
    color: #b11f24
}

.not-found {
    text-align: center
}

.contact-form-submit .not-found input,
.not-found .button,
.not-found .contact-form-submit input {
    margin-top: 50px;
    background-color: #b11f24;
    color: #fff
}

.contact-form-submit .not-found input:after,
.not-found .button:after,
.not-found .contact-form-submit input:after {
    background-color: #b11f24
}

.contact-form-submit .not-found input:hover,
.contact-form-submit .not-found input:hover:after,
.not-found .button:hover,
.not-found .button:hover:after,
.not-found .contact-form-submit input:hover,
.not-found .contact-form-submit input:hover:after {
    background-color: #9b1b20
}



.home .faloodacolor .button,
.contact-form-submit .home .faloodacolor input:after,
.home .faloodacolor .button:after,
.home .faloodacolor .contact-form-submit input:after {
    background-color: #90122d;
}

.home .faloodacolor .wine-title {
    color: white;
}

.home .faloodacolor .wine-subtitle2 {
    color: #90122d;
}

.home .faloodacolor {
    background-color: #c13654;
}



.home .lassicolor .button,
.contact-form-submit .home .lassicolor input:after,
.home .lassicolor .button:after,
.home .lassicolor .contact-form-submit input:after {
    background-color: #989898;
}

.home .lassicolor .wine-title {
    color: #cac2af;
}

.home .lassicolor .wine-subtitle2 {
    color: #989898;
}

.home .lassicolor {
    background-color: #d8d7cb;
}


.titleofmenu {
    z-index: 99999;
    color: white;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    text-align: -webkit-center;
    text-transform: uppercase;
    font: normal normal 4vw/1.1 trend;
}

.overflowopacity {
    width: 100%;
    height: 100%;
    background: rgba(1, 1, 1, .7);
}

.wine-title ol.juicelist h4 {
    display: inline-block;
    font: normal normal 1.11vw/1.1 hel-con;
    width: 75%;
    font-weight: 500;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .7);
}

.wine-title ol.juicelist span {
    display: inline-block;
    font: normal normal 1.11vw/1.1 hel-con;
    width: 25%;
    font-weight: 500;
    border-bottom: 1px dashed rgba(255, 255, 255, .7);
}


ol.juicelist {
    -webkit-padding-start: 0;
}

ol.juicelist li {
    line-height: 3.5vw;
    -webkit-margin-after: 0;
    width: calc(100%);
    * min-width: max-content;
}

ol.juicelist li span {
    width: max-content;
    position: relative;
    right: 0;
    width: 4.7em;
    text-align: right;
}

.footer-copyright-makers a:hover {
    text-decoration: none;
    color: #d47620;
}

#mc_embed_signup {
    display: none;
}

#mc_embed_signup h2 {
    font-weight: 300;
}

.menupage1 .wine-title {
    * width: 100%;
    width: 62%;
    margin: auto;
}

.menupage1 .home-hero-wine .content.left {
    padding: 3em;

}

.menupage1 .home-hero-wine .content.right {
    right: 0;
    padding-left: 0;
    padding: 3em;
}

ol.juicelist li {
    color: #ffffff;
}

ol.juicelist li div.juicedesc {
    font: normal normal 0.91vw/1.1 hel-con;
    text-transform: capitalize;
    padding: 0.6em 0 0 0;
}

.menupage1 .section:nth-child(2) .hero .content h2 ol li,
.menupage1 .section:nth-child(3) .hero .content h2 ol li {
    color: #424242;
}

.menupage1 .section:nth-child(2) .hero .content h2 ol li h4,
.menupage1 .section:nth-child(3) .hero .content h2 ol li h4,
.menupage1 .section:nth-child(2) .hero .content h2 ol li span,
.menupage1 .section:nth-child(3) .hero .content h2 ol li span {
    border-bottom: 1px dashed rgba(66, 66, 66, .8);
}

.full-height.screw-corks-hero-main {
    background-position: center !important;
    background-size: cover !important;
}

.footer-social-twitter:hover {
    background: #1dcaff;
}

.footer-social-instagram:hover {
    background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
}

.footer-social-youtube:hover {
    background: #ff0000;

}

.footer-social-twitter,
.footer-social-youtube {
    background-color: #d47620;
}

#load {
    width: 100%;
    background-color: #262626;
    height: 100%;
    position: fixed;
    z-index: 9999;
    *background: url("images/logo.svg") no-repeat center center rgba(255, 255, 255, 1)
}

#load video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.extrapad {
    padding-top: 20px;
}

.footer-copyright-makers a {
    color: #b7b7b7;
}

.footer-item.left {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.footer-item {
    width: 100%;
    height: calc(54% - 40px);
    flex-flow: row nowrap;
}

.footer-social-icons li {
    padding-top: calc(3% + 3px);
    width: 3%;
}

.footer-item.left {
    display: none;
}

.footer-newsletter {
    text-align: -webkit-center;
}

.footer-item {
    height: calc(100% - 40px);
}

.bottompad20 {
    padding-bottom: 20px;
}

.toppad20 {
    padding-top: 20px;
}

.hero .content .overflow-container .overflow-inner.delay3 {
    padding-left: 10px;
}