html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* typography */
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.fontstyle-04 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}

/* body */
body {
    margin: 0;
    background-color: black;
}

/* flex */
.flex {
    display: -webkit-box;
    display: flex;
}
.flex_fullheight {
    height: 100%;
}

.flex_flex-wrap_wrap {
    flex-wrap: wrap;
}

.flex_justify-content_center {
    -webkit-box-pack: center;
    justify-content: center;
}

.flex_justify-content_space-between {
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.flex_justify-content_flex-end {
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.flex_align-items_center {
    -webkit-box-align: center;
    align-items: center;
}

.flex_align-items_stretch {
    -webkit-box-align: stretch;
    align-items: stretch;
}

.flex-item {
    position: relative;
}

.flex-item[data-widthmobile="25"] {
    width: 25%;
}

.flex-item[data-widthmobile="50"] {
    width: 50%;
}

.flex-item[data-widthmobile="75"] {
    width: 75%;
}

.flex-item[data-widthmobile="100"] {
    width: 100%;
}

@media (min-width: 540px) {
    .flex-item[data-widthdesktop="25"] {
        width: 25% !important;
    }
}

@media (min-width: 540px) {
    .flex-item[data-widthdesktop="50"] {
        width: 50% !important;
    }
}

@media (min-width: 540px) {
    .flex-item[data-widthdesktop="75"] {
        width: 75% !important;
    }
}

@media (min-width: 540px) {
    .flex-item[data-widthdesktop="100"] {
        width: 100% !important;
    }
}

/* a */
a {
    position: relative;
    text-decoration: none;
    color: black;
}

/* lazy load */
img.lazy,
video.lazy {
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -ms-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
  opacity: 0;
}
img.lazy.loaded,
video.lazy.loaded {
  opacity: 1;
}

/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

header .wrapper {
    position: relative;
    margin: 0 20px;
}

@media (min-width: 540px) {
    header .wrapper {
        position: relative;
        margin: 0 25px;
    }
}

header .wrapper .flex .flex-item {
    position: relative;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-basis: 0;
}

header .wrapper .flex .flex-item.link a {
    position: relative;
    padding: 15px 0;
    display: inline-block;
    color: black;
    text-decoration: none;
}

header .wrapper .flex .flex-item.logo a {
    position: relative;
    padding: 15px 0;
    display: inline-block;
}

@media (min-width: 540px) {
    header .wrapper .flex .flex-item.logo a {
        padding: 15px;
    }
}

header .wrapper .flex .flex-item.logo img,
header .wrapper .flex .flex-item.logo svg {
    position: relative;
    width: 100%;
    max-width: 140px;
    display: block;
}

/* main */
main {
    position: relative;
    background-color: white;
}

/* section row */
main section.row {
    position: relative;
}

/* text */
.row .text {
    position: relative;
    max-width: 480px;
    padding: 40px 20px;
    text-align: center;
    line-height: 1.5;
}
.row .text .header {
    font-weight: bold;
}
[data-backgroundcolor="black"] {
    background-color: black;
}
[data-backgroundcolor="black"] .text {
    color: white;
}

/* image */
.row .image {
    position: relative;
}
.row .image.intrinsic {
    width: 100%;
    height: 0;
    overflow: hidden;
}

.row .image.intrinsic.intrinsicratio-720x1280 {
    /* viewport height on mobile*/
    padding-bottom: calc(100% / 720 * 1280);
}

.row .image.intrinsic.intrinsicratio-1280x720 {
    /* viewport height on mobile*/
    padding-bottom: calc(100% / 1280 * 720);
}

.row .image.intrinsic.intrinsicratio-1280x1440 {
    /* viewport height on mobile*/
    padding-bottom: calc(100% / 1280 * 1440);
}

@media (min-width: 540px) {
    .row .image.intrinsic.intrinsicratio-720x1280 {
        padding-bottom: calc(100% / 720 * 1280);
    }
}
@media (min-width: 540px) {
    .row .image.intrinsic.intrinsicratio-1280x720 {
        padding-bottom: calc(100% / 1280 * 720);
    }
}
@media (min-width: 540px) {
    .row .image.intrinsic.intrinsicratio-1280x1440 {
        padding-bottom: calc(100% / 1280 * 1440);
    }
}

.row .image img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}
.row .image.intrinsic img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

/* video */
.row .video {
    position: relative;
}
.row .video.intrinsic {
    width: 100%;
    height: 0;
    overflow: hidden;
}

.row .video.intrinsic.intrinsicratio-720x1280 {
    /* viewport height on mobile*/
    padding-bottom: calc(100% / 720 * 1280);
}

.row .video.intrinsic.intrinsicratio-1280x720 {
    /* viewport height on mobile*/
    padding-bottom: calc(100% / 1280 * 720);
}

.row .video.intrinsic.intrinsicratio-1280x1440 {
    /* viewport height on mobile*/
    padding-bottom: calc(100% / 1280 * 1440);
}

@media (min-width: 540px) {
    .row .video.intrinsic.intrinsicratio-720x1280 {
        padding-bottom: calc(100% / 720 * 1280);
    }
}
@media (min-width: 540px) {
    .row .video.intrinsic.intrinsicratio-1280x720 {
        padding-bottom: calc(100% / 1280 * 720);
    }
}
@media (min-width: 540px) {
    .row .video.intrinsic.intrinsicratio-1280x1440 {
        padding-bottom: calc(100% / 1280 * 1440);
    }
}

.row .video video {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}
.row .video.intrinsic video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 101%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

/* videoplayer */
.video .videoplayer {
    position: relative;
    opacity: 0;
    -webkit-transition: opacity 500ms ease 500ms;
    transition: opacity 500ms ease 500ms;
}

.video.initialised .videoplayer {
    opacity: 1;
}

.video .videoplayer .videoelement {
    position: relative;
}

.video .videoplayer .videoelement.intrinsic {
    width: 100%;
    height: 0;
    overflow: hidden;
}

.video .videoplayer .videoelement.intrinsic.intrinsicratio-1280x720 {
    /* viewport height on mobile*/
    padding-bottom: 100vh;
}

@media (min-width: 540px) {
    .video .videoplayer .videoelement.intrinsic.intrinsicratio-1280x720 {
        padding-bottom: calc(100% / 1280 * 720);
    }
}

.video .videoplayer .videoelement video {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.video .videoplayer .videoelement.intrinsic video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}
.video .videoplayer .videoelement.intrinsic video:not(.fullscreen) {
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}
.video .videoplayer .videoelement.intrinsic video:fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.video .videoplayer .controls {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 10px;
}

.video .videoplayer .controls .time {
    position: relative;
    padding: 20px;
    color: white;
    display: none;
}

.video .videoplayer .controls .scrubber {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    margin: 0 10px;
}

.video .videoplayer .controls .scrubber .track {
    position: relative;
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 2px;
    overflow: hidden;
}

.video .videoplayer .controls .scrubber .track .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: white;
  -webkit-transition: width 60ms ease;
    transition: width 60ms ease;
}

.video .videoplayer .controls .scrubber .track .head {
    display: none;
}

.video .videoplayer .controls .playpause {
    position: relative;
    color: white;
}

.video .videoplayer .controls .playpause a.toggle {
    position: relative;
    padding: 20px 10px;
    color: inherit;
    display: inline-block;
    -webkit-transition: color 100ms ease;
    -moz-transition: color 100ms ease;
    -ms-transition: color 100ms ease;
    -o-transition: color 100ms ease;
    transition: color 100ms ease;
}

.video .videoplayer .controls .playpause a.toggle:hover {
    color: black;
}

.video .videoplayer .controls .playpause a.toggle .play {
    display: block;
}
.video .videoplayer .controls .playpause a.toggle .pause {
    display: none;
}

.video.playing .videoplayer .controls .playpause a.toggle .play {
    display: none;
}
.video.playing .videoplayer .controls .playpause a.toggle .pause {
    display: block;
}

.video .videoplayer .controls .fullscreen {
    position: relative;
    color: white;
}

.video .videoplayer .controls .fullscreen a.toggle {
    position: relative;
    padding: 20px 10px;
    color: inherit;
    display: inline-block;
    -webkit-transition: color 100ms ease;
    -moz-transition: color 100ms ease;
    -ms-transition: color 100ms ease;
    -o-transition: color 100ms ease;
    transition: color 100ms ease;
}
.video .videoplayer .controls .fullscreen a.toggle:hover {
    color: black;
}

.video .videoplayer .controls .audio {
    position: relative;
    color: white;
}

.video .videoplayer .controls .audio a.toggleaudio {
    position: relative;
    padding: 20px 10px;
    color: inherit;
    display: inline-block;
    -webkit-transition: color 100ms ease;
    -moz-transition: color 100ms ease;
    -ms-transition: color 100ms ease;
    -o-transition: color 100ms ease;
    transition: color 100ms ease;
}
.video .videoplayer .controls .audio a.toggleaudio:hover {
    color: black;
}

.video .videoplayer .controls .audio a.toggleaudio .mute {
    display: block;
}
.video .videoplayer .controls .audio a.toggleaudio .unmute {
    display: none;
}

.video.muted .videoplayer .controls .audio a.toggleaudio .mute {
    display: none;
}
.video.muted .videoplayer .controls .audio a.toggleaudio .unmute {
    display: block;
}

/* posters */
.video .posters {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    -webkit-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
}

.video.initialised .posters {
    opacity: 1;
}

.video.initialised.videoclicked .posters {
    opacity: 0;
}

.video .posters .poster {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

.video .posters .poster.mobile {
    display: block;
}

.video .posters .poster.desktop {
    display: none;
}

@media (min-width: 540px) {
    .video .posters .poster.mobile {
        display: none;
    }
}

@media (min-width: 540px) {
    .video .posters .poster.desktop {
        display: block;
    }
}

.video .posters .poster > * {
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

/* toggleplay */
.video .toggleplay {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 5;
    -webkit-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.video.idle .toggleplay,
.video.videoclicked .toggleplay {
    opacity: 0;
}

.video .toggleplay a {
    color: white;
}

.video .toggleplay a .playing {
    display: none;
}

.video.playing .toggleplay a .playing {
    display: block;
}

.video.playing .toggleplay a .paused {
    display: none;
}

/* product-meta */
.row .product-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    line-height: 1.1em;
    font-size: 11px;
    background-color: transparent;
    color: white;
    padding: 10px;
}

@media (min-width: 1024px) {
    .row .product-meta {
        opacity: 0;
    }
}

.row a {
    position: relative;
    display: block;
}

@media (min-width: 1024px) {
    .row a:hover .product-meta {
        opacity: 1;
    }
}

.row .product-meta .title {
    position: relative;
    width: 100%;
    text-align: center;
}