html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 100%; vertical-align: baseline; } body { line-height: 1; color: #000; background: #fff; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; vertical-align: middle; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } a img { border: none; } .dev { outline: 1px solid #912eff; } .dev > * { outline: 1px solid #5497ff; } .dev > * > * { outline: 1px solid #51feff; } .dev > * > * > * { outline: 1px solid #f00; } .dev > * > * > * * { outline: 1px solid #0f0; } .embed, .embed iframe, .embed img, .embed object { max-width: 100%; } .embed { position: relative; margin: 0; padding: 0; } .embed img { display: block; height: auto; } .embed--video iframe, .embed--video object, .embed__thumb { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .embed--video { background-color: #ddd; overflow: hidden; } .embed--error { font-size: 0.8em; } .embed__thumb { background-repeat: no-repeat; background-position: center center; background-size: cover; cursor: pointer; } .embed__thumb > img { position: absolute; top: 50%; left: 50%; width: 25%; min-width: 75px; max-width: 175px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; opacity: 0.65; } .embed__thumb:hover > img { opacity: 1; } @-moz-keyframes blink { 0% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 1; -ms-filter: none; filter: none; } 50.0001% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } 100% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } } @-webkit-keyframes blink { 0% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 1; -ms-filter: none; filter: none; } 50.0001% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } 100% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } } @-o-keyframes blink { 0% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 1; -ms-filter: none; filter: none; } 50.0001% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } 100% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } } @keyframes blink { 0% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 1; -ms-filter: none; filter: none; } 50.0001% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } 100% { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } } @font-face { font-family: 'E'; src: url('../../fonts/ExcellentRegular.eot') format('eot'), url('../../fonts/ExcellentRegular.eot?#iefix') format('embedded-opentype'), url('../../fonts/ExcellentRegular.woff') format('woff'), url('../../fonts/ExcellentRegular.woff2') format('woff2'), url('../../fonts/ExcellentRegular.ttf') format('truetype'), url('../../fonts/ExcellentRegular.svg#E') format('svg'); font-weight: 'normal'; font-style: normal; } @font-face { font-family: 'H'; src: url('../../fonts/HelveticaLTStdRoman.eot') format('eot'), url('../../fonts/HelveticaLTStdRoman.eot?#iefix') format('embedded-opentype'), url('../../fonts/HelveticaLTStdRoman.woff') format('woff'), url('../../fonts/HelveticaLTStdRoman.woff2') format('woff2'), url('../../fonts/HelveticaLTStdRoman.ttf') format('truetype'), url('../../fonts/HelveticaLTStdRoman.svg#H') format('svg'); font-weight: 'normal'; font-style: normal; } ::selection { background: rgba(13, 13, 13, 0.5); } ::-moz-selection { background: rgba(13, 13, 13, 0.5); } body, html { -webkit-text-size-adjust: 100%; } html { font-size: 12px; } @media only screen and (max-width: 1023px) { html { font-size: 13px; } } @media only screen and (min-width: 1601px) { html { font-size: 14px; } } body { letter-spacing: 0.03em; font-family: 'E', monospace, 'Lucida Console', Courier New, Helvetica Neue, Arial, sans-serif; font-size: 1rem; line-height: 1; text-rendering: optimizeLegibility; } @media only screen and (min-width: 1601px) { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } body.sans-serif { font-family: 'H', Helvetica, Arial, sans-serif; letter-spacing: 0.1em; } p { line-height: 1.3; text-align: justify; } p:not(:last-child) { margin-bottom: 1em; } .uppercase { text-transform: uppercase; } .text-center { text-align: center !important; } body, html { width: 100%; float: left; background: #fff; } body { float: left; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } video::-webkit-media-controls { display: none; } a, a:hover, a:visited, a:focus { color: inherit; text-decoration: none; cursor: pointer; } .lazy { -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } .lazy.lazyloaded, .lazy.flickity-lazyloaded { opacity: 1; -ms-filter: none; filter: none; } .responsive-image { -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transform-style: flat; -webkit-transform-style: flat; -moz-transform-style: flat; -ms-transform-style: flat; -o-transform-style: flat; transform-style: flat; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; outline: 0; position: relative; overflow: hidden; } .responsive-image img { position: absolute; top: 0; left: 0; } #main, #container, #page-content, .row { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #main::after, #container::after, #page-content::after, .row::after { content: ''; display: table; clear: both; } #page-content { min-height: 100vh; } @media only screen and (max-width: 1023px) { #page-content { margin-top: 2rem; } } select, button { outline: 0 !important; } body.is-loading { cursor: wait; pointer-events: none; } #outdated { display: none; text-align: center; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #fff; z-index: 900; } #outdated a { border-bottom: 1px solid; } #outdated .inner { padding: 8rem 20%; } .no-js #outdated, .no-svg #outdated, .no-flexbox #outdated { display: block; } #loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #fff; z-index: 10000; } #intro { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #fff; z-index: 999; } #intro svg { position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; width: 40vmin; height: 40vmin; } @media only screen and (max-width: 1023px) { #intro svg { width: 70vmin; height: 70vmin; } } #intro #popnoire { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); -webkit-transition: opacity 500ms ease; -moz-transition: opacity 500ms ease; -ms-transition: opacity 500ms ease; -o-transition: opacity 500ms ease; transition: opacity 500ms ease; } #intro #logo { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1); } #intro #circle { stroke: #fff; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotateZ(45deg) rotateY(180deg); -moz-transform: rotateZ(45deg) rotateY(180deg); -ms-transform: rotateZ(45deg) rotateY(180deg); -o-transform: rotateZ(45deg) rotateY(180deg); transform: rotateZ(45deg) rotateY(180deg); stroke-dasharray: 2834; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: stroke-dashoffset 1.5s cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: stroke-dashoffset 1.5s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: stroke-dashoffset 1.5s cubic-bezier(0.77, 0, 0.175, 1); transition: stroke-dashoffset 1.5s cubic-bezier(0.77, 0, 0.175, 1); } #intro.show #popnoire { opacity: 1; -ms-filter: none; filter: none; } #intro.animate #logo { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } #intro.animate #circle { stroke-dashoffset: 2834; } #intro.hide { -webkit-transition: opacity 200ms ease 500ms, visibility 200ms ease 500ms; -moz-transition: opacity 200ms ease 500ms, visibility 200ms ease 500ms; -ms-transition: opacity 200ms ease 500ms, visibility 200ms ease 500ms; -o-transition: opacity 200ms ease 500ms, visibility 200ms ease 500ms; transition: opacity 200ms ease 500ms, visibility 200ms ease 500ms; opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); visibility: hidden; } #intro.hide #popnoire { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; } header { -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transform-style: flat; -webkit-transform-style: flat; -moz-transform-style: flat; -ms-transform-style: flat; -o-transform-style: flat; transform-style: flat; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; outline: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 15; -webkit-transition: transform 0.2s ease; -moz-transition: transform 0.2s ease; -ms-transition: transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; } header:not(:hover).hidden { -webkit-transform: translateY(-100%) translateZ(0); -moz-transform: translateY(-100%) translateZ(0); -ms-transform: translateY(-100%) translateZ(0); -o-transform: translateY(-100%) translateZ(0); transform: translateY(-100%) translateZ(0); } @media only screen and (max-width: 1023px) { header { max-height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch; overflow-scrolling: touch; } } header h1 { display: none; } #burger { position: relative; width: 1rem; height: 1rem; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; cursor: pointer; margin: 0.6em 1rem; } @media only screen and (min-width: 1024px) { #burger { display: none; } } #burger span { display: block; position: absolute; height: 1px; width: 100%; background: #fff; opacity: 1; -ms-filter: none; filter: none; padding: 0; left: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; z-index: 210; } #burger span:nth-child(1) { top: calc(50% - 7px); -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } #burger span:nth-child(2), #burger span:nth-child(3) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; top: calc(50% - 1px); } #burger span:nth-child(4) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; top: calc(50% + 5px); } #menu { -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transform-style: flat; -webkit-transform-style: flat; -moz-transform-style: flat; -ms-transform-style: flat; -o-transform-style: flat; transform-style: flat; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; outline: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; box-pack: justify; -webkit-flex-pack: justify; -moz-flex-pack: justify; -ms-flex-pack: justify; -o-flex-pack: justify; flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; width: 100%; background: #0d0d0d; color: #fff; z-index: 10; -webkit-transition: width 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: width 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: width 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: width 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: width 500ms cubic-bezier(0.77, 0, 0.175, 1); } @media only screen and (min-width: 1024px) { #menu { height: 2em; } #menu #mobile-toggle-header { display: none; } } #menu.visible { visibility: visible; } @media only screen and (max-width: 1023px) { #menu { display: block; } #menu.opened { height: 100vh; } #menu.opened #burger span:nth-child(1), #menu.opened #burger span:nth-child(4) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); top: 50%; } #menu.opened #burger span:nth-child(2) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menu.opened #burger span:nth-child(3) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menu:not(.opened) #primary-nav, #menu:not(.opened) #secondary-nav { display: none; } #menu [event-target='about-panel'] { display: none; } #menu #mobile-toggle-header { display: block; text-transform: uppercase; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; box-pack: justify; -webkit-flex-pack: justify; -moz-flex-pack: justify; -ms-flex-pack: justify; -o-flex-pack: justify; flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } #menu #mobile-toggle-header [event-target='about-panel'] { display: block; } #menu #mobile-toggle-header > *:not([event-target='menu']) { padding: 0.6em 1rem; } } #primary-nav > * a, #primary-nav > * span { display: block; padding: 0.6em 0; } @media only screen and (max-width: 1023px) { #primary-nav > * a, #primary-nav > * span { padding: 0.3em 0; } } #secondary-nav > * { position: relative; padding: 0.6em 0; } @media only screen and (max-width: 1023px) { #secondary-nav > * { padding: 0.3em 0; } } #primary-nav, #secondary-nav { text-transform: uppercase; padding: 0 1rem; } @media only screen and (min-width: 1024px) { #primary-nav, #secondary-nav { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; height: 2em; } } #primary-nav > *, #secondary-nav > * { position: relative; } #primary-nav > *:not(:last-child), #secondary-nav > *:not(:last-child) { padding-right: 1em; } @media only screen and (max-width: 1023px) { #primary-nav > li > ul, #secondary-nav > li > ul { padding-left: 1em; } } @media only screen and (min-width: 1024px) { #primary-nav > li > ul, #secondary-nav > li > ul { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; position: absolute; background: #0d0d0d; width: 100vw; top: 1.8em; left: 0; height: 2em; overflow: hidden; -webkit-transition: height 200ms ease; -moz-transition: height 200ms ease; -ms-transition: height 200ms ease; -o-transition: height 200ms ease; transition: height 200ms ease; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } #primary-nav > li > ul::after, #secondary-nav > li > ul::after { content: ''; position: fixed; z-index: -1; background: #0d0d0d; height: 4rem; -webkit-transition: height 200ms ease; -moz-transition: height 200ms ease; -ms-transition: height 200ms ease; -o-transition: height 200ms ease; transition: height 200ms ease; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; width: 100%; left: 0; top: 0; } #primary-nav > li > ul > li, #secondary-nav > li > ul > li { position: relative; z-index: 1; } #primary-nav > li > ul > li a, #secondary-nav > li > ul > li a { display: block; padding: 0.6em 0; } #primary-nav > li > ul > li:not(:last-child) a, #secondary-nav > li > ul > li:not(:last-child) a { padding-right: 1.8em; } #primary-nav > li:not(.hover) > ul, #secondary-nav > li:not(.hover) > ul { height: 0; } #primary-nav > li:not(.hover) > ul::after, #secondary-nav > li:not(.hover) > ul::after { height: 2rem; } } @media only screen and (max-width: 1023px) { #primary-nav { width: 100%; float: left; } } #primary-nav > li > a { -webkit-transition: color 150ms ease; -moz-transition: color 150ms ease; -ms-transition: color 150ms ease; -o-transition: color 150ms ease; transition: color 150ms ease; } #primary-nav > li > a.active, #primary-nav > li > span.active { color: rgba(255, 255, 255, 0.6); } @media only screen and (min-width: 1024px) { #primary-nav > li > a:hover { color: rgba(255, 255, 255, 0.6); } } #primary-nav > li > ul a { -webkit-transition: color 150ms ease; -moz-transition: color 150ms ease; -ms-transition: color 150ms ease; -o-transition: color 150ms ease; transition: color 150ms ease; } #primary-nav > li > ul a.active, #primary-nav > li > ul span.active { color: rgba(255, 255, 255, 0.6); } @media only screen and (min-width: 1024px) { #primary-nav > li > ul a:hover { color: rgba(255, 255, 255, 0.6); } } @media only screen and (max-width: 1023px) { #secondary-nav { width: 100%; float: left; } } #secondary-nav a, #secondary-nav [event-target] { -webkit-transition: color 150ms ease; -moz-transition: color 150ms ease; -ms-transition: color 150ms ease; -o-transition: color 150ms ease; transition: color 150ms ease; } @media only screen and (min-width: 1024px) { #secondary-nav a.active, #secondary-nav a:hover, #secondary-nav [event-target]:hover { color: rgba(255, 255, 255, 0.6); } } #menu-socials { width: 100%; float: left; margin: 2em 0; } @media only screen and (min-width: 1024px) { #menu-socials { display: none; } } #languages { text-transform: uppercase; } @media only screen and (max-width: 1023px) { #languages { padding: 0.3em 0 0.6em; margin-top: 0.5em; } } #languages a:not(:last-child)::after { content: ' / '; color: #fff; } #newsletter div.x { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } #newsletter #legal { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; margin-top: 1rem; } #newsletter #legal::after { content: ''; display: table; clear: both; } #newsletter .form { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; position: relative; width: 100%; } #newsletter .form::after { content: ''; display: table; clear: both; } #newsletter .form .byline { float: left; } #newsletter .form > *, #newsletter .form .sib-container { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #newsletter .form > *::after, #newsletter .form .sib-container::after { content: ''; display: table; clear: both; } #newsletter .form #nom::before { content: 'FIRST NAME'; } #newsletter .form #prenom::before { content: 'LAST NAME'; } #newsletter .form #email::before { content: 'E-MAIL'; } #newsletter .form .mandatory-email { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } [page-type='about'] #newsletter .message_area { margin: 0; border: none !important; background: transparent !important; color: #fff !important; margin: 0.5rem 0; } [page-type='about'] #newsletter .field:not(:first-child) { margin-top: 1rem; } [page-type='about'] #newsletter .field input { margin-top: 0.5rem; } [page-type='about'] #newsletter input, [page-type='about'] #newsletter button { color: #fff; -webkit-apparence: none; -moz-apparence: none; border: 1px solid rgba(255, 255, 255, 0.2); background: #0d0d0d; font-family: inherit; font-size: 1rem; padding: 0.3em; margin: 0; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -webkit-flex-align: center; -moz-flex-align: center; -ms-flex-align: center; -o-flex-align: center; flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } [page-type='about'] #newsletter input:not([type='button']), [page-type='about'] #newsletter button:not([type='button']) { width: 100%; } [page-type='about'] #newsletter input:active, [page-type='about'] #newsletter button:active, [page-type='about'] #newsletter input:focus, [page-type='about'] #newsletter button:focus { outline: none; } [page-type='about'] #newsletter input::placeholder, [page-type='about'] #newsletter button::placeholder { color: rgba(255, 255, 255, 0.2); font-size: inherit; font-family: inherit; text-transform: uppercase; } [page-type='about'] #newsletter button { text-transform: uppercase; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; font-size: inherit; font-family: inherit; cursor: pointer; } [page-type='about'] #newsletter button[type='submit'] { margin-top: 1rem; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.3em 0.6em; } [page-type='about'] #newsletter button.close { padding: 0 0.5em; } .video-container { position: relative; cursor: none; } .video-container .video-cursor { position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); pointer-events: none; width: 4.2rem; height: 4.2rem; color: #fff; mix-blend-mode: difference; border-radius: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -o-box-pack: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -o-box-pack: center; box-pack: center; -webkit-flex-pack: center; -moz-flex-pack: center; -ms-flex-pack: center; -o-flex-pack: center; flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -webkit-flex-align: center; -moz-flex-align: center; -ms-flex-align: center; -o-flex-align: center; flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } .video-container .seekbar { display: none; cursor: pointer; position: absolute; bottom: 0; left: 1rem; width: calc(100% - 2rem); padding: 1.5rem 0; } @media only screen and (max-width: 1023px) { .video-container .seekbar { display: block !important; } } .video-container .seekbar::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; } .video-container .seekbar .thumb { position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 1px; height: 1rem; background: #fff; } .video-container .play-cursor::after { content: 'PLAY'; } .video-container .pause-cursor { display: none; } .video-container .pause-cursor::after { content: 'PAUSE'; } .video-container.video-is-playing .play-cursor { display: none; } .video-container.video-is-playing .pause-cursor { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .video-container:hover .seekbar { display: block; } @media only screen and (min-width: 1024px) { .video-container:hover .video-cursor { opacity: 1; -ms-filter: none; filter: none; } } #play-pause::after { content: 'PLAY'; } #play-pause.amplitude-playing::after { content: 'PAUSE'; } #player { position: relative; } #player #controls *:not(.amplitude-current-time) { cursor: pointer; } .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 7%; background: rgba(255, 255, 255, 0.83); cursor: url('../../images/close-b.png') 8 8, not-allowed !important; } .lightbox .ph { display: none; } .lightbox img { position: static; width: 100%; height: 100%; object-fit: contain; } [page-type='about'] { background: #0d0d0d; color: #fff; } [page-type='about'] #page-content { padding: 5rem 1rem !important; } [page-type='about'] #about-logo { filter: invert(1); } #about-logo { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; width: 12rem; height: 12rem; margin-bottom: 3rem; } #about-logo::after { content: ''; display: table; clear: both; } #about-logo svg { width: 100%; height: 100%; } #about-text { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; margin-bottom: 3rem; } #about-text::after { content: ''; display: table; clear: both; } #about-contact { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; margin-bottom: 3rem; } #about-contact::after { content: ''; display: table; clear: both; } #about-socials { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; line-height: 1.3; } #about-socials::after { content: ''; display: table; clear: both; } #newsletter { line-height: 1.3; float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; margin-bottom: 3rem; } #newsletter::after { content: ''; display: table; clear: both; } #credits { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; line-height: 1.3; } #credits::after { content: ''; display: table; clear: both; } #about-panel { position: fixed; z-index: 50; top: 0; right: 0; width: 50rem; padding: 4rem 5rem 0; height: 100%; background: rgba(255, 255, 255, 0.83); color: #0d0d0d; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform: translateX(100%) translateZ(0); -moz-transform: translateX(100%) translateZ(0); -ms-transform: translateX(100%) translateZ(0); -o-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); } @media only screen and (max-width: 1023px) { #about-panel { width: 100%; padding: 3rem 1rem 0; } #about-panel #credits { margin-bottom: 3rem; } } #about-panel .about-close { position: absolute; top: 0; right: 0; padding: 0.4rem 1rem; } @media only screen and (max-width: 1023px) { #about-panel .about-close { padding: 0.5em 1rem; } } #about-panel [data-scroll] { width: 100%; height: 100%; float: left; } #about-panel .inner-scroll { width: 100%; float: left; padding-bottom: 5rem; } #about-panel .message_area { margin: 0; border: none !important; background: transparent !important; color: #0d0d0d !important; margin: 0.5rem 0; } #about-panel .field:not(:first-child) { margin-top: 1rem; } #about-panel .field input { margin-top: 0.5rem; } #about-panel input, #about-panel button { color: #0d0d0d; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border-radius: 0; -webkit-box-shadow: 0; -moz-box-shadow: 0; -ms-box-shadow: 0; -o-box-shadow: 0; box-shadow: 0; border: 1px solid rgba(13, 13, 13, 0.2); background: transparent; font-family: inherit; letter-spacing: inherit; font-size: 1rem; padding: 0.3em; margin: 0; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -webkit-flex-align: center; -moz-flex-align: center; -ms-flex-align: center; -o-flex-align: center; flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } #about-panel input:not([type='button']), #about-panel button:not([type='button']) { width: 100%; } #about-panel input:active, #about-panel button:active, #about-panel input:focus, #about-panel button:focus { outline: none; } #about-panel input::placeholder, #about-panel button::placeholder { color: #0d0d0d; font-size: inherit; font-family: inherit; text-transform: uppercase; } #about-panel button { text-transform: uppercase; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; font-size: inherit; font-family: inherit; letter-spacing: inherit; cursor: pointer; } #about-panel button[type='submit'] { margin-top: 1rem; border: 1px solid rgba(13, 13, 13, 0.2); padding: 0.6em 0.6em 0.3em; line-height: 1; } #about-panel button.close { padding: 0 0.5em; } body.about-panel #main { pointer-events: none; } body.about-panel #about-panel { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } @media only screen and (min-width: 1024px) { body.about-panel #menu { width: calc(100% - 50rem); } body.about-panel #player, body.about-panel .shopify-buy-frame--toggle { -webkit-transform: translateX(-50rem) translateZ(0) !important; -moz-transform: translateX(-50rem) translateZ(0) !important; -ms-transform: translateX(-50rem) translateZ(0) !important; -o-transform: translateX(-50rem) translateZ(0) !important; transform: translateX(-50rem) translateZ(0) !important; } } @media only screen and (max-width: 1023px) { #page-content[page-type='artist'] { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; height: calc(100vh - 4rem); min-height: calc(100vh - 4rem); } #page-content[page-type='artist']::after { content: ''; display: table; clear: both; } } #artist-medias { -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transform-style: flat; -webkit-transform-style: flat; -moz-transform-style: flat; -ms-transform-style: flat; -o-transform-style: flat; transform-style: flat; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; outline: 0; float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; position: relative; background: #fff; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); } #artist-medias::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #artist-medias { height: 100vh; } } #artist-medias[data-scroll] { position: relative; width: 100vw; overflow: hidden; } @media only screen and (max-width: 1023px) { #artist-medias[data-scroll] { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch; overflow-scrolling: touch; position: initial; } #artist-medias[data-scroll]::after { content: ''; display: table; clear: both; } } @media only screen and (max-width: 1023px) { #artist-medias[data-scroll] > .inner-scroll { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #artist-medias[data-scroll] > .inner-scroll::after { content: ''; display: table; clear: both; } } @media only screen and (min-width: 1024px) { #artist-medias[data-scroll] > .inner-scroll { height: 100%; display: table; } } #artist-medias .artist-image { position: relative; padding: 0; margin: 0; } @media only screen and (min-width: 1024px) { #artist-medias .artist-image { height: 100vh; overflow: hidden; display: table-cell; } } @media only screen and (max-width: 1023px) { #artist-medias .artist-image { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; height: auto; } #artist-medias .artist-image::after { content: ''; display: table; clear: both; } } #artist-medias .artist-image .embed { position: absolute; top: 0; z-index: 1; height: 100%; width: 100%; } #artist-medias .artist-image .embed .embed__thumb > img { opacity: 1; -ms-filter: none; filter: none; pointer-events: none; min-width: 50px; max-width: 50px; } #artist-medias .artist-image > img { cursor: url('../../images/arrow-top.png') 8 8, n-resize !important; } @media only screen and (max-width: 1023px) { #artist-medias .artist-image > img { width: 100%; display: block; } } @media only screen and (min-width: 1024px) { #artist-medias .artist-image > img { height: 100%; } #artist-medias .artist-image > img.lazy, #artist-medias .artist-image > img + .embed { -webkit-transition: transform 800ms ease, opacity 400ms ease; -moz-transition: transform 800ms ease, opacity 400ms ease; -ms-transition: transform 800ms ease, opacity 400ms ease; -o-transition: transform 800ms ease, opacity 400ms ease; transition: transform 800ms ease, opacity 400ms ease; -webkit-transform: translateX(100px) translateZ(0); -moz-transform: translateX(100px) translateZ(0); -ms-transform: translateX(100px) translateZ(0); -o-transform: translateX(100px) translateZ(0); transform: translateX(100px) translateZ(0); } #artist-medias .artist-image > img.lazy.lazyloaded, #artist-medias .artist-image > img + .embed.lazyloaded { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } #artist-medias .artist-image > img.lazy.lazyloaded + .embed, #artist-medias .artist-image > img + .embed.lazyloaded + .embed { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @media only screen and (min-width: 1024px) { #artist-medias .artist-image video { object-fit: cover; } } @media only screen and (max-width: 1023px) { #artist-medias .artist-image video { width: 100%; height: auto; } } @media only screen and (max-width: 1023px) { #artist-medias .artist-image:not(:last-child) { margin-bottom: 4px; } } @media only screen and (min-width: 1024px) { #artist-medias .artist-image:not(:last-child) { padding-right: 4px; } #artist-medias .artist-image:not(:last-child) .embed { width: calc(100% - 4px); } } #infos-btn { position: absolute; bottom: 0; left: 0; padding: 1rem; mix-blend-mode: difference; color: #fff; z-index: 10; } @media only screen and (max-width: 1023px) { #infos-btn { display: none; } } #infos-btn-mobile { position: fixed; bottom: 0; left: 0; padding: 0.6em 1rem; color: #fff; background: #0d0d0d; width: 100%; z-index: 10; } @media only screen and (min-width: 1024px) { #infos-btn-mobile { display: none; } } #player { line-height: 1.3; position: absolute; bottom: 0; right: 0; padding: 1rem; mix-blend-mode: difference; color: #fff; text-align: right; z-index: 10; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); } @media only screen and (max-width: 1023px) { #player { bottom: 2rem; right: initial; left: 0; text-align: left; padding: 0.6em 1rem; width: 100%; background: #0d0d0d; mix-blend-mode: normal; text-align: left; } } body:not(.player-playing) #player { visibility: hidden; } #artist-panel { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; overflow: hidden; color: #0d0d0d; background: #fff; height: 50vh; position: fixed; left: 0; top: 100%; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); } #artist-panel::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #artist-panel { height: calc(100vh - 2rem); } } #artist-panel[data-scrollmobile] { overflow: hidden; } #artist-panel[data-scrollmobile] > .inner-scroll { float: left; } #panel-close { position: absolute; bottom: 0; left: 0; padding: 1rem; } @media only screen and (max-width: 1023px) { #panel-close { display: none; } } #artist-infos { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; height: 100%; line-height: 1.3; position: relative; overflow: hidden; } #artist-infos::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #artist-infos { height: calc(50vh - 3rem); padding-right: 0.5rem; } } @media only screen and (max-width: 1023px) { #artist-infos { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; } #artist-infos:first-child { margin-left: auto; } #artist-infos:last-child { margin-right: auto; } } #artist-infos > .inner-scroll { padding-left: 1rem; padding-top: 1rem; padding-bottom: 1rem; width: 100%; float: left; } @media only screen and (max-width: 1023px) { #artist-infos > .inner-scroll { padding-right: 1rem; } } #artist-infos #artist-title { margin-bottom: 1rem; } #artist-infos #artist-description { float: left; clear: none; text-align: inherit; width: 66.66666666666666%; margin-left: 0%; margin-right: 0%; } #artist-infos #artist-description::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #artist-infos #artist-description { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } #artist-infos #artist-description:first-child { margin-left: auto; } #artist-infos #artist-description:last-child { margin-right: auto; } } #artist-infos #artist-links { float: left; clear: none; text-align: inherit; width: 33.33333333333333%; margin-left: 0%; margin-right: 0%; } #artist-infos #artist-links::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #artist-infos #artist-links { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } #artist-infos #artist-links:first-child { margin-left: auto; } #artist-infos #artist-links:last-child { margin-right: auto; } } @media only screen and (min-width: 1024px) { #artist-infos #artist-description { padding-right: 2rem; } } #artist-infos #artist-links > div:not(:last-child) { margin-bottom: 1rem; } #artist-infos #artist-links > div div:first-child { float: left; clear: none; text-align: inherit; width: 33.33333333333333%; margin-left: 0%; margin-right: 0%; padding-right: 1rem; } #artist-infos #artist-links > div div:first-child::after { content: ''; display: table; clear: both; } #artist-infos #artist-links > div div:last-child { float: left; clear: none; text-align: inherit; width: 66.66666666666666%; margin-left: 0%; margin-right: 0%; } #artist-infos #artist-links > div div:last-child::after { content: ''; display: table; clear: both; } #artist-infos #artist-links > div div:last-child a { display: block; float: left; clear: both; } #artist-releases { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; height: 100%; line-height: 1.3; padding-left: 0.5rem; overflow: hidden; } #artist-releases::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #artist-releases { width: 50vw; } #artist-releases .inner-scroll { float: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding-right: 1rem; } } @media only screen and (max-width: 1023px) { #artist-releases { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; padding: 0 1rem 3rem; } #artist-releases:first-child { margin-left: auto; } #artist-releases:last-child { margin-right: auto; } } #artist-releases .release { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; padding-top: 1rem; padding-bottom: 1rem; height: 100%; } #artist-releases .release::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #artist-releases .release { width: calc(50vw - 12rem); margin-right: 6rem; } } #artist-releases .release .responsive-image, #artist-releases .release .release-infos { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; } #artist-releases .release .responsive-image::after, #artist-releases .release .release-infos::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #artist-releases .release .responsive-image, #artist-releases .release .release-infos { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; } #artist-releases .release .responsive-image:first-child, #artist-releases .release .release-infos:first-child { margin-left: auto; } #artist-releases .release .responsive-image:last-child, #artist-releases .release .release-infos:last-child { margin-right: auto; } } @media only screen and (min-width: 1024px) { #artist-releases .release .responsive-image { padding-right: 0.5rem; height: calc(50vh - 4rem); } #artist-releases .release .responsive-image img { height: 100%; object-fit: contain; object-position: top left; } } @media only screen and (max-width: 1023px) { #artist-releases .release .responsive-image { margin-bottom: 1rem; } } @media only screen and (min-width: 1024px) { #artist-releases .release .release-infos { padding-left: 1rem; } } #artist-releases .tracklist { margin-top: 1rem; } @media only screen and (max-width: 1023px) { #artist-releases .tracklist { display: none; } } #artist-releases .tracklist .track { cursor: pointer; width: 100%; display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } #artist-releases .tracklist .track .amplitude-duration-minutes:not(:empty)::after { content: ':'; } #artist-releases .tracklist .track > div:first-child { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; -o-flex-grow: 1; flex-grow: 1; } #artist-releases .tracklist .track > div:not(:last-child) { margin-right: 1em; } #artist-releases .tracklist .track > div:last-child::after { content: 'PLAY'; } #artist-releases .tracklist .track.amplitude-playing > div:last-child::after { content: 'PAUSE'; } #artist-releases .buy { padding-top: 1rem; } [page-type='artist'] .shopify-buy__option-select { margin: 1rem 0; } [page-type='artist'] .shopify-buy__btn { cursor: pointer; border: 0; padding: 0; font-size: inherit; font-family: inherit; letter-spacing: inherit; margin: 0; border-radius: 0; } body.infos-panel #artist-medias { -webkit-transform: translateY(-50vh) translateZ(0); -moz-transform: translateY(-50vh) translateZ(0); -ms-transform: translateY(-50vh) translateZ(0); -o-transform: translateY(-50vh) translateZ(0); transform: translateY(-50vh) translateZ(0); } @media only screen and (max-width: 1023px) { body.infos-panel #artist-medias { -webkit-transform: translateY(calc(-100vh + 2rem)) translateZ(0); -moz-transform: translateY(calc(-100vh + 2rem)) translateZ(0); -ms-transform: translateY(calc(-100vh + 2rem)) translateZ(0); -o-transform: translateY(calc(-100vh + 2rem)) translateZ(0); transform: translateY(calc(-100vh + 2rem)) translateZ(0); } } body.infos-panel #artist-medias .artist-image > img { cursor: url('../../images/arrow-bottom.png') 8 8, s-resize !important; } body.infos-panel #artist-panel { -webkit-transform: translateY(-50vh) translateZ(0); -moz-transform: translateY(-50vh) translateZ(0); -ms-transform: translateY(-50vh) translateZ(0); -o-transform: translateY(-50vh) translateZ(0); transform: translateY(-50vh) translateZ(0); } @media only screen and (max-width: 1023px) { body.infos-panel #artist-panel { -webkit-transform: translateY(calc(-100vh + 2rem)) translateZ(0); -moz-transform: translateY(calc(-100vh + 2rem)) translateZ(0); -ms-transform: translateY(calc(-100vh + 2rem)) translateZ(0); -o-transform: translateY(calc(-100vh + 2rem)) translateZ(0); transform: translateY(calc(-100vh + 2rem)) translateZ(0); } } body.infos-panel #infos-btn-mobile { color: #0d0d0d; } body.infos-panel #infos-btn-mobile::before { content: 'Close'; color: #fff; } [page-type='news'] { background: #fff; } #news.justified { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; background: #fff; } #news.justified::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #news.justified[data-scroll='x'] { height: 100vh; width: 100vw; } #news.justified[data-scroll='x'] .inner-scroll { height: 100%; float: left; } } #news.justified .grid { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #news.justified .grid::after { content: ''; display: table; clear: both; } #news.justified .grid .item { position: relative; overflow: hidden; } @media only screen and (max-width: 1023px) { #news.justified .grid .item { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #news.justified .grid .item::after { content: ''; display: table; clear: both; } } #news.justified .grid .item a.link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } @media only screen and (min-width: 1024px) { #news.justified .grid .item .responsive-image { height: 100%; } #news.justified .grid .item .responsive-image img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover'; } } #news.justified .grid .item .caption { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 3; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem 0; background: #fff; } @media only screen and (max-width: 1023px) { #news.justified .grid .item .caption { position: static; padding: 1rem; } } #news.justified .grid .item .caption:empty { display: none; } @media only screen and (min-width: 1024px) { #news.justified .grid .item:not(:hover) .caption .text { -webkit-transform: translateY(100%) translateZ(0); -moz-transform: translateY(100%) translateZ(0); -ms-transform: translateY(100%) translateZ(0); -o-transform: translateY(100%) translateZ(0); transform: translateY(100%) translateZ(0); -webkit-transition: transform 200ms ease; -moz-transition: transform 200ms ease; -ms-transition: transform 200ms ease; -o-transition: transform 200ms ease; transition: transform 200ms ease; } } #news.justified .grid .item .subtitle { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } #news.justified .grid .item .text { -webkit-transition: transform 400ms ease; -moz-transition: transform 400ms ease; -ms-transition: transform 400ms ease; -o-transition: transform 400ms ease; transition: transform 400ms ease; -webkit-transform: translateY(0) translateZ(0); -moz-transform: translateY(0) translateZ(0); -ms-transform: translateY(0) translateZ(0); -o-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); margin-top: 1rem; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 100%; -moz-flex: 1 0 100%; -ms-flex: 1 0 100%; -o-flex: 1 0 100%; flex: 1 0 100%; } #news.justified .grid .item.side .caption { padding-left: 1rem; } #news { background: #fff; } @media only screen and (min-width: 1024px) { #news[data-scroll='x'] { height: 100vh; width: 100vw; } #news[data-scroll='x'] .inner-scroll { height: 100%; float: left; } } #news .grid { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #news .grid::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #news .grid { height: 100%; } } #news .grid .item { position: relative; overflow: hidden; } @media only screen and (max-width: 1023px) { #news .grid .item { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; width: 100% !important; height: auto !important; } #news .grid .item::after { content: ''; display: table; clear: both; } #news .grid .item:not(:last-child) { margin-bottom: 4px; } } #news .grid .item a.link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } @media only screen and (min-width: 1024px) { #news .grid .item .responsive-image { height: 100%; } #news .grid .item .responsive-image img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover'; } } #news .grid .item .caption { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 3; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem 1rem 1.5rem; background: #fff; -webkit-transition: transform 150ms ease; -moz-transition: transform 150ms ease; -ms-transition: transform 150ms ease; -o-transition: transform 150ms ease; transition: transform 150ms ease; -webkit-transform: translateY(0) translateZ(0); -moz-transform: translateY(0) translateZ(0); -ms-transform: translateY(0) translateZ(0); -o-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); } @media only screen and (max-width: 1023px) { #news .grid .item .caption { position: static; padding: 1rem; } } #news .grid .item .caption:empty { display: none; } @media only screen and (min-width: 1024px) { #news .grid .item:not(:hover) .caption { -webkit-transform: translateY(100%) translateZ(0); -moz-transform: translateY(100%) translateZ(0); -ms-transform: translateY(100%) translateZ(0); -o-transform: translateY(100%) translateZ(0); transform: translateY(100%) translateZ(0); -webkit-transition: transform 400ms ease; -moz-transition: transform 400ms ease; -ms-transition: transform 400ms ease; -o-transition: transform 400ms ease; transition: transform 400ms ease; } } #news .grid .item .subtitle { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 50%; -moz-flex: 1 0 50%; -ms-flex: 1 0 50%; -o-flex: 1 0 50%; flex: 1 0 50%; } #news .grid .item .text { margin-top: 0.5rem; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 100%; -moz-flex: 1 0 100%; -ms-flex: 1 0 100%; -o-flex: 1 0 100%; flex: 1 0 100%; width: 100%; } #news .grid .item.side .caption { padding-left: 1rem; } [page-type='press'] { background: #0d0d0d; color: #fff; line-height: 1.3; } [page-type='press'] .breadcrumb { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-box-lines: multiple; -o-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } [page-type='press'] .breadcrumb a:not(:last-child)::after { content: '\0000A0\00002F\0000A0'; } [page-type='press'] #press-header { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; padding: 1rem; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; box-pack: justify; -webkit-flex-pack: justify; -moz-flex-pack: justify; -ms-flex-pack: justify; -o-flex-pack: justify; flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } [page-type='press'] #press-header > * { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; text-align: center; } [page-type='press'] #press-header > *:nth-child(1) { text-align: left; } [page-type='press'] #press-header > *:nth-child(3) { text-align: right; } [page-type='press'] header { display: none; } [page-type='press'] ul { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; text-transform: uppercase; } [page-type='press'] ul li:not(.depth-2) { padding-left: 1rem; } [page-type='press'] #page-content { min-height: 100vh; padding: 3rem 1rem 1rem; } [page-type='press'] button { background: transparent; border: 0; padding: 0; text-transform: uppercase; font-family: inherit; font-size: inherit; color: inherit; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; } [page-type='press'] button:active, [page-type='press'] button:focus { outline: none; } #press-tree, #page-files { float: left; clear: none; text-align: inherit; width: 16.666666666666664%; margin-left: 0%; margin-right: 0%; } #press-tree::after, #page-files::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #press-tree, #page-files { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; } #press-tree::after, #page-files::after { content: ''; display: table; clear: both; } } @media only screen and (min-width: 1024px) { #page-files { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; } #page-files::after { content: ''; display: table; clear: both; } } #press-tree { padding-right: 1rem; } #press-tree #tree a.active { color: rgba(255, 255, 255, 0.6) !important; } #press-tree #tree ul:first-child > li { padding-left: 0; } #page-content[page-type='project'] { position: relative; } @media only screen and (min-width: 1024px) { #page-content[page-type='project'] { padding-top: calc(20vh + (1.6rem + 2px)); } } #project-medias { -webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transform-style: flat; -webkit-transform-style: flat; -moz-transform-style: flat; -ms-transform-style: flat; -o-transform-style: flat; transform-style: flat; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; outline: 0; float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; padding: 1rem; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } #project-medias::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #project-medias { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; height: auto !important; } #project-medias:first-child { margin-left: auto; } #project-medias:last-child { margin-right: auto; } } @media only screen and (min-width: 1024px) { #project-medias { position: fixed; left: 0; } } #project-infos { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 50%; margin-right: 0%; padding: 1rem; } #project-infos::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #project-infos { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; } #project-infos:first-child { margin-left: auto; } #project-infos:last-child { margin-right: auto; } } @media only screen and (min-width: 1024px) { #project-infos { padding-left: 0; } } #project-technical { margin-bottom: 1rem; } #project-technical .row { font-size: 0.7rem; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media only screen and (min-width: 1024px) { #project-technical .row { font-size: 0.7rem; } } #project-technical .row > * { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 50%; -moz-flex: 1 1 50%; -ms-flex: 1 1 50%; -o-flex: 1 1 50%; flex: 1 1 50%; } #project-description p { line-height: 1.2; margin-bottom: 0; } #page-content[page-type='projects'] { margin-top: calc(20vh + (1.6rem + 2px)); } #projects-grid { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; padding: 1rem; padding-bottom: 0; } #projects-grid::after { content: ''; display: table; clear: both; } #projects-grid .project-item { display: block; float: left; position: relative; width: calc((100% - 2rem) / 3); margin-bottom: 1rem; } @media only screen and (min-width: 1024px) { #projects-grid .project-item:not(:nth-child(3n)) { margin-right: 1rem; } } @media only screen and (max-width: 1023px) { #projects-grid .project-item { width: calc((100% - 1rem) / 2); } #projects-grid .project-item:not(:nth-child(2n)) { margin-right: 1rem; } } @media only screen and (max-width: 1023px) { #projects-grid .project-item { width: 100%; } } #projects-grid .project-item.format-png .responsive-image, #projects-grid .project-item.format-gif .responsive-image { background: rgba(13, 13, 13, 0.05); } #projects-grid .project-item.format-png img, #projects-grid .project-item.format-gif img { mix-blend-mode: darken; } #projects-grid .project-item--infos { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-box-pack: justify; -o-box-pack: justify; box-pack: justify; -webkit-flex-pack: justify; -moz-flex-pack: justify; -ms-flex-pack: justify; -o-flex-pack: justify; flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; } #projects-grid .project-item--infos div:first-child { padding-right: 1rem; } @media only screen and (min-width: 1024px) { #projects-grid .project-item--infos { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0.7rem; color: #fff; background: #0d0d0d; z-index: 1; } #projects-grid .project-item--infos:not(:hover) { opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity=0); } } @media only screen and (max-width: 1023px) { #projects-grid .project-item--infos { margin-top: 0.3em; } } [page-type='default'], [page-type='about'] { background: #0d0d0d; color: #fff; } [page-type='default'] #page-content, [page-type='about'] #page-content { padding-top: 2rem; } [page-type='default'] #page-text, [page-type='about'] #page-text { float: left; clear: none; text-align: inherit; width: 33.33333333333333%; margin-left: 0%; margin-right: 0%; padding: 0 1rem; } [page-type='default'] #page-text::after, [page-type='about'] #page-text::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { [page-type='default'] #page-text, [page-type='about'] #page-text { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; } [page-type='default'] #page-text::after, [page-type='about'] #page-text::after { content: ''; display: table; clear: both; } } @media only screen and (max-width: 1023px) { [page-type='default'] #page-text, [page-type='about'] #page-text { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; } [page-type='default'] #page-text:first-child, [page-type='about'] #page-text:first-child { margin-left: auto; } [page-type='default'] #page-text:last-child, [page-type='about'] #page-text:last-child { margin-right: auto; } } [event-target] { cursor: pointer; } [data-scroll] { overflow: hidden; } #artists-preview { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; } #artists-preview .artist-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; } #artists-preview .artist-preview .responsive-image { width: 100%; height: 100%; } #artists-preview .artist-preview .responsive-image img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover'; } .mt1 { margin-top: 1rem; } .mb1 { margin-bottom: 1rem; } .mb2 { margin-top: 1rem; } @media only screen and (min-width: 1024px) { .link-hover { -webkit-transition: color 150ms ease; -moz-transition: color 150ms ease; -ms-transition: color 150ms ease; -o-transition: color 150ms ease; transition: color 150ms ease; } .link-hover.black:hover { color: rgba(13, 13, 13, 0.6) !important; } .link-hover.white:hover { color: rgba(255, 255, 255, 0.6) !important; } } .table { width: 100%; } .table-row .table-cell { vertical-align: top; } .table-row .table-cell:not(:last-child) { padding-right: 1rem; } .iScrollVerticalScrollbar { top: 0 !important; bottom: 0 !important; width: 5px !important; } .iScrollVerticalScrollbar .iScrollIndicator { background: #0d0d0d !important; border-radius: 0 !important; } #shop { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; position: relative; background: #fff; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); } #shop::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { #shop { height: 100vh; overflow-y: hidden; } } @media only screen and (min-width: 1024px) { #shop > [data-scroll] { position: relative; width: 100vw; overflow: hidden; } } @media only screen and (min-width: 1024px) { #shop > .inner-scroll { height: 100%; display: table; } } #shop .product-image { padding: 0; margin: 0; overflow: hidden; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); } @media only screen and (min-width: 1024px) { #shop .product-image { height: 100vh; display: table-cell; } } @media only screen and (max-width: 1023px) { #shop .product-image { width: 100%; height: auto; } } #shop .product-image img { height: 100%; width: auto; } @media only screen and (max-width: 1023px) { #shop .product-image img { width: 100%; height: auto; } } #shop .product-image video { object-fit: cover; } #shop .product-infos { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; width: calc(100% - 4px); position: absolute; top: 100%; left: 0; color: #0d0d0d; background: #fff; height: 80vh; -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); } #shop .product-infos::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { #shop .product-infos { height: 100vw; width: 100%; } } #shop .product-infos .inner-scroll { padding: 1rem 1rem 3rem 1rem; } #shop .product { display: table-cell; position: relative; } @media only screen and (max-width: 1023px) { #shop .product { display: block; overflow: hidden; float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } #shop .product::after { content: ''; display: table; clear: both; } } #shop .product [event-target='product-panel'] { cursor: url('../../images/arrow-top.png') 8 8, n-resize !important; } @media only screen and (min-width: 1024px) { #shop .product:not(:last-child) .product-image { padding-right: 4px; } } #shop .product.opened [event-target='product-panel'] { cursor: url('../../images/arrow-bottom.png') 8 8, s-resize !important; } #shop .product.opened .product-image { -webkit-transform: translateY(-80vh) translateZ(0); -moz-transform: translateY(-80vh) translateZ(0); -ms-transform: translateY(-80vh) translateZ(0); -o-transform: translateY(-80vh) translateZ(0); transform: translateY(-80vh) translateZ(0); } @media only screen and (max-width: 1023px) { #shop .product.opened .product-image { -webkit-transform: translateY(-100vw) translateZ(0); -moz-transform: translateY(-100vw) translateZ(0); -ms-transform: translateY(-100vw) translateZ(0); -o-transform: translateY(-100vw) translateZ(0); transform: translateY(-100vw) translateZ(0); } } #shop .product.opened .product-infos { -webkit-transform: translateY(-80vh) translateZ(0); -moz-transform: translateY(-80vh) translateZ(0); -ms-transform: translateY(-80vh) translateZ(0); -o-transform: translateY(-80vh) translateZ(0); transform: translateY(-80vh) translateZ(0); } @media only screen and (max-width: 1023px) { #shop .product.opened .product-infos { -webkit-transform: translateY(-100vw) translateZ(0); -moz-transform: translateY(-100vw) translateZ(0); -ms-transform: translateY(-100vw) translateZ(0); -o-transform: translateY(-100vw) translateZ(0); transform: translateY(-100vw) translateZ(0); } } #shop .product.opened .panel-open { display: none; } #shop .product:not(.opened) .panel-close { display: none; } body.product-opened #shop .product:not(.opened) [event-target='product-panel'] { cursor: url('../../images/close-b.png') 8 8, not-allowed !important; } .panel-close, .panel-open { position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); text-transform: uppercase; color: #fff; mix-blend-mode: difference; position: absolute; bottom: 0; padding: 1rem; } .buy .price { margin-bottom: 0.5rem; } .buy .price:empty { display: none; } .shopify-buy__btn { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -webkit-flex-align: center; -moz-flex-align: center; -ms-flex-align: center; -o-flex-align: center; flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; margin: 1rem 0; position: relative; } [page-type*='shop'] .buy-button, [page-type*='shop'] .shopify-buy__btn { cursor: pointer; width: 4.2rem; height: 4.2rem; background: #0d0d0d; color: #fff; padding: 1.3rem; border: 1px solid #0d0d0d; font-size: inherit; font-family: inherit; letter-spacing: inherit; border-radius: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -o-box-pack: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-box-pack: center; -o-box-pack: center; box-pack: center; -webkit-flex-pack: center; -moz-flex-pack: center; -ms-flex-pack: center; -o-flex-pack: center; flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center; box-align: center; -webkit-flex-align: center; -moz-flex-align: center; -ms-flex-align: center; -o-flex-align: center; flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-transition: color 150ms ease, background 150ms ease; -moz-transition: color 150ms ease, background 150ms ease; -ms-transition: color 150ms ease, background 150ms ease; -o-transition: color 150ms ease, background 150ms ease; transition: color 150ms ease, background 150ms ease; } [page-type*='shop'] .buy-button:hover, [page-type*='shop'] .shopify-buy__btn:hover { background: #fff; color: #0d0d0d; } .product-infos { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; height: 100%; padding-right: 0.5rem; line-height: $lineheight; height: calc(100% - 2rem); position: relative; overflow: hidden; } .product-infos::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { .product-infos { padding: 0; } } .product-infos .inner-scroll { width: 100%; float: left; } .product-infos .product-title { margin-bottom: 3rem; } .product-infos .product-description { float: left; clear: none; text-align: inherit; width: 70%; margin-left: 0%; margin-right: 0%; margin-bottom: 3rem; } .product-infos .product-description::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { .product-infos .product-description { padding-right: 3rem; } } @media only screen and (max-width: 1023px) { .product-infos .product-description { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; } .product-infos .product-description:first-child { margin-left: auto; } .product-infos .product-description:last-child { margin-right: auto; } } .product-infos .buy { float: left; clear: none; text-align: inherit; width: 30%; margin-left: 0%; margin-right: 0%; } .product-infos .buy::after { content: ''; display: table; clear: both; } @media only screen and (min-width: 1024px) { .product-infos .buy { padding-left: 1%; } } @media only screen and (max-width: 1023px) { .product-infos .buy { width: 50%; margin-bottom: 3rem; } } .product-infos .left, .product-infos .right { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; } .product-infos .left::after, .product-infos .right::after { content: ''; display: table; clear: both; } .product-infos .left > *:not(:last-child), .product-infos .right > *:not(:last-child) { margin-bottom: 1rem; } .product-infos .left { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } .product-infos .left::after { content: ''; display: table; clear: both; } .product-infos .right { display: none; padding-left: 0.5rem; } .product-infos .product-tracklist, .product-infos .product-moreinfos { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; margin-bottom: 3rem; } .product-infos .product-tracklist::after, .product-infos .product-moreinfos::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { .product-infos .product-tracklist, .product-infos .product-moreinfos { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; } .product-infos .product-tracklist:first-child, .product-infos .product-moreinfos:first-child { margin-left: auto; } .product-infos .product-tracklist:last-child, .product-infos .product-moreinfos:last-child { margin-right: auto; } } .product-infos .product-tracklist .table, .product-infos .product-moreinfos .table { line-height: 1.3; width: 100%; } .product-infos .product-tracklist .table tr, .product-infos .product-moreinfos .table tr { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .product-infos .product-tracklist .table tr td, .product-infos .product-moreinfos .table tr td { width: 50%; } .product-infos .product-links { margin-bottom: 3rem; line-height: 1.3; } @media only screen and (max-width: 1023px) { .product-infos .product-links { float: left; clear: none; text-align: inherit; width: 50%; margin-left: 0%; margin-right: 0%; } .product-infos .product-links::after { content: ''; display: table; clear: both; } } .product-infos .product-links .table { line-height: 1.3; } .product-infos .product-links .table .table-row .table-cell:last-child { width: 100%; } .product-infos .product-links > div div:first-child { float: left; clear: none; text-align: inherit; width: 25%; margin-left: 0%; margin-right: 0%; padding-right: 1rem; } .product-infos .product-links > div div:first-child::after { content: ''; display: table; clear: both; } .product-infos .product-links > div div:last-child { float: left; clear: none; text-align: inherit; width: 75%; margin-left: 0%; margin-right: 0%; } .product-infos .product-links > div div:last-child::after { content: ''; display: table; clear: both; } .product-infos .product-medias { margin-top: 3rem; } .product-infos .product-medias .responsive-image { cursor: pointer; float: left; clear: none; text-align: inherit; width: 33.33333333333333%; margin-left: 0%; margin-right: 0%; width: calc(33.33333333% - 1rem); margin-right: 1rem; } .product-infos .product-medias .responsive-image::after { content: ''; display: table; clear: both; } @media only screen and (max-width: 1023px) { .product-infos .product-medias .responsive-image { display: block; clear: both; float: none; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } .product-infos .product-medias .responsive-image:first-child { margin-left: auto; } .product-infos .product-medias .responsive-image:last-child { margin-right: auto; } } [page-type*='shop'] .shopify-buy__product__price { font-size: 2rem; letter-spacing: normal; } .shopify-buy__option-select { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; margin-top: 1rem; } .shopify-buy__option-select::after { content: ''; display: table; clear: both; } .shopify-buy__option-select .shopify-buy__option-select__label { float: left; clear: none; text-align: inherit; width: 100%; margin-left: 0%; margin-right: 0%; } .shopify-buy__option-select .shopify-buy__option-select__label::after { content: ''; display: table; clear: both; } .shopify-buy__option-select .shopify-buy__option-select-wrapper { position: relative; display: inline-block; } .shopify-buy__option-select .shopify-buy__option-select-wrapper .shopify-buy__option-select__select { display: block; text-transform: uppercase; background: none; padding: 0; margin: 0; padding-right: 1.2em; border: 0; letter-spacing: inherit; font-family: inherit; font-size: inherit; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; margin-top: 0.2em; } .shopify-buy__option-select .shopify-buy__option-select-wrapper .shopify-buy__select-icon { position: absolute; pointer-events: none; top: 0.2em; right: 0; height: 1em; } .shopify-buy-frame--toggle { -webkit-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1); z-index: 10 !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; top: initial !important; bottom: 0; background: #0d0d0d; color: #fff; cursor: pointer; } .shopify-buy-frame--toggle .shopify-buy__cart-toggle { padding: 1rem; } @media only screen and (max-width: 1023px) { .shopify-buy-frame--toggle .shopify-buy__cart-toggle { padding: 0.6em 1rem; } } .shopify-buy__cart-toggle { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-direction: reverse; -moz-box-direction: reverse; -ms-box-direction: reverse; -o-box-direction: reverse; -webkit-box-direction: reverse; -moz-box-direction: reverse; -ms-box-direction: reverse; -o-box-direction: reverse; box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -ms-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -ms-box-orient: horizontal; -o-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; } .shopify-buy__cart-toggle .shopify-buy__cart-toggle__title { margin-right: 1em; text-transform: uppercase; } .shopify-buy__btn-wrapper { display: inline-block; } @media only screen and (max-width: 1023px) { [page-type='shop.product'] #shop .panel-close, [page-type='shop.product'] #shop .panel-open { display: none; } [page-type='shop.product'] #shop .product-infos { height: auto !important; position: initial; } }