/*
Jade Purple Brown
============================================== */
:root {
/* Colors */
--red: #ff5400;
--orange: #fc8500;
--pink: #ff75ba;
--lavender: #f7b0e0;
--black: #000000;
--cream: #fce5cf;
--white: #fef5ec;
--delay: 0.05s;
}
h1.red, h2.red, h3.red, a.red, a.red:visited, a.red:link { color: var(--red); }
h1.orange, h2.orange, h3.orange, a.orange, a.orange:visited, a.orange:link { color: var(--orange); }
h1.pink, h2.pink, h3.pink, a.pink, a.pink:visited, a.pink:link { color: var(--pink); }
h1.lavender, h2.lavender, h3.lavender, a.lavender, a.lavender:visited, a.lavender:link { color: var(--lavender); }
h1.black, h2.black, h3.black, a.black, a.black:visited, a.black:link { color: var(--black); }
h1.cream, h2.cream, h3.cream, a.cream, a.cream:visited, a.cream:link { color: var(--cream); }
h1.white, h2.white, h3.white, a.white, a.white:visited, a.white:link{ color: var(--white); }
.bg.red { background-color: var(--red); }
.bg.orange { background-color: var(--orange); }
.bg.yellow { background-color: var(--yellow); }
.bg.pink { background-color: var(--pink); }
.bg.lavender { background-color: var(--lavender); }
.bg.black { background-color: var(--black); }
.bg.cream { background-color: var(--cream); }
.bg.white { background-color: var(--white); }
.center { text-align: center; }
/* Fonts */
@font-face {
font-family: 'Avant Garde';
src: url('AvantGarde-Bk.woff2') format('woff2'),
url('AvantGarde-Bk.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avant Garde';
src: url('AvantGarde-Bold.woff2') format('woff2'),
url('AvantGarde-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Platform';
src: url('Platform-Bold.woff2') format('woff2'),
url('Platform-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Romie';
src: url('Romie-Regular.woff2') format('woff2'),
url('Romie-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*
==============================================
General Styles
============================================== */
*:not(i) {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: 'Avant Garde', sans-serif;
font-weight: 400;
color: var(--black);
font-size: 16px;
}
/* Body */
html, body {
width: 100%;
margin:0px !important;
font-size: 62.5%;
}
html { scroll-behavior: smooth; }
body {
position: relative;
min-height: 100vh;
background-color: rgba(0,0,0,0) !important;
}
.preload * {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
}
h1 {
font-family: 'Platform';
text-transform: uppercase;
font-size: clamp(6rem, 1rem + 10.6250vw, 20rem);
line-height: 72%;
letter-spacing: -4px;
transition: color .3s ease-in-out;
}
@media (min-width: 1921px) {
h1 {
font-size: 26rem;
font-size: clamp(20rem, 1rem + 10.6250vw, 40rem);
letter-spacing: -1.4rem;
}
}
h1.page {
font-size: 8rem;
line-height: 6rem;
letter-spacing: -2px;
}
.home-work-hover ~ .text-link, .home-shop-hover ~ .text-link, .shop-hover ~ .text-link {
background-image: none !important; position: relative; }
.home-work-hover ~ .text-link:after, .home-shop-hover ~ .text-link:after, .shop-hover ~ .text-link:after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 2px;
width: 40px;
transition: all 0.2s ease-in-out;
}
.home-work-hover ~ .text-link:before, .home-shop-hover ~ .text-link:before, .shop-hover ~ .text-link:before {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 13px;
height: 13px;
transform: translateY(-50%) rotateZ(-45deg);
transition: all 0.2s ease-in-out;
}
.home-work-hover ~ h1, .home-work-hover ~ .text-link { color: var(--homework); }
.home-work-hover ~ .text-link:after { background-color: var(--homework); }
.home-work-hover ~ .text-link:before { border-right: 2px solid var(--homework); border-bottom: 2px solid var(--homework); }
.home-work-hover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.home-work-hover:hover ~ h1, .home-work-hover:hover ~ .text-link {
color: var(--hoverhomework) !important;
}
.home-work-hover:hover ~ .text-link:after { background-color: var(--hoverhomework); }
.home-work-hover:hover ~ .text-link:before { border-right: 2px solid var(--hoverhomework); border-bottom: 2px solid var(--hoverhomework); }
/*.home-work-hover:hover ~ .text-link { background-image: url('data:image/svg+xml;utf8,'); }
*/
.home-shop-hover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.home-shop-hover ~ h1, .home-shop-hover ~ .text-link { color: var(--homeshop); }
.home-shop-hover ~ .text-link:after { background-color: var(--homeshop); }
.home-shop-hover ~ .text-link:before { border-right: 2px solid var(--homeshop); border-bottom: 2px solid var(--homeshop); }
.home-shop-hover:hover ~ h1, .home-shop-hover:hover ~ .text-link {
color: var(--hoverhomeshop);
}
.home-shop-hover:hover ~ .text-link:after { background-color: var(--hoverhomeshop); }
.home-shop-hover:hover ~ .text-link:before { border-right: 2px solid var(--hoverhomeshop); border-bottom: 2px solid var(--hoverhomeshop); }
/*.home-shop-hover:hover ~ .text-link { background-image: url('data:image/svg+xml;utf8,'); }
*/
.home-work-hover:hover ~ .text-link:after, .home-shop-hover:hover ~ .text-link:after { transform: translateY(-50%) translateX(-7px); }
.home-work-hover:hover ~ .text-link:before, .home-shop-hover:hover ~ .text-link:before { transform: translateY(-50%) translateX(-7px) rotateZ(-45deg); }
.shop-hover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.shop-hover ~ h1, .shop-hover ~ .button { color: var(--shop) !important; }
.shop-hover ~ .button { border: 2px solid var(--shop) !important}
h1.shop-hover:hover {
color: var(--hovershop) !important;
}
.shop-hover:hover ~ h1, .shop-hover:hover ~ .button {
color: var(--hovershop) !important;
}
.shop-hover:hover ~ .button { border: 2px solid var(--hovershop) !important; }
h2 {
font-family: 'Romie', serif;
font-size: 32px;
line-height: 50px;
color: var(--black);
margin-bottom: 50px;
}
@media (min-width: 1921px) {
h2 {
font-size: 48px;
line-height: 75px;
}
}
h3 {
font-family: 'Avant Garde';
font-weight: bold;
font-size: 2.4rem;
letter-spacing: 2.4px;
line-height: 117%;
text-transform: uppercase;
margin-bottom: 4px;
}
h4 {
font-family: 'Avant Garde';
font-weight: bold;
font-size: 1.8rem;
letter-spacing:1.8px;
line-height: 117%;
text-transform: uppercase;
margin-bottom: 8px;
}
h5 {
font-family: 'Avant Garde';
font-weight: normal;
font-size: 1.8rem;
line-height: 117%;
}
p {
font-family: 'Avant Garde';
font-weight: normal;
font-size: 1.6rem;
line-height: 2.3rem;
color: var(--black);
margin-bottom: 2.8rem;
}
.bold { font-weight: bold; text-transform: uppercase; letter-spacing: 1.6px; }
a, a:link, a:visited { text-decoration: none; }
p a, p a:link, p a:visited { text-decoration: underline; }
@media (max-width: 1000px) {
h2 {
font-size: 2.1rem;
margin-bottom: 2rem;
line-height: 35px;
}
}
@media (max-width: 800px) {
h1 {
letter-spacing: -2px;
}
}
img {
border: none;
}
hr {
width: 100%;
border: 0;
border-top: 1px solid var(--lightgray);
}
.resp-img {
width: 100%;
}
.object-fit {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
object-position: center;
}
.button {
font-family: 'Avant Garde';
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
transition: all 0.2s ease-in-out;
white-space: nowrap;
}
.b-1 {
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
display: inline-block;
padding: 0 28px;
line-height: 34px;
height: 34px;
border: 2px solid var(--black);
border-radius: 17px;
margin-left: 15px;
}
.b-2 {
font-size: 18px;
text-transform: uppercase;
display: inline-block;
letter-spacing: 1.8px;
padding: 0 28px;
line-height: 48px;
height: 48px;
border: 2px solid var(--black);
border-radius: 24px;
background-color: var(--lavender);
}
.b-2:hover { background-color: var(--orange); }
.btn--loading { background-color: #fc8500 !important; }
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="checkbox"]:focus{
outline:0;
}
.h-20 {
width: 20%;
max-width: 20%;
}
.h-60 {
position: relative;
width: 60%;
max-width: 60%;
}
.r-50 {
position: relative;
display: block;
width: 50%;
max-width: 50%;
padding-bottom: 55%;
overflow: hidden;
}
.r-50 a img, .r-50 a video { transition: transform 0.5s cubic-bezier(0.34, 1, 0.64, 1); }
.r-50:hover > a img, .r-50:hover > a video { transform: scale(1.02); }
.col-1 {
width: 100%;
max-width: 100%;
position: relative;
padding: 15rem 80px 10rem;
}
.col-2 {
width: 100%;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
align-content: center;
}
.r-50.center .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: calc(100% - 200px);
}
@media (max-width: 1300px) {
.r-50.center .text {
width: calc(100% - 80px);
}
}
@media (max-width: 1000px) {
.r-50.no-pad {
padding-bottom: initial;
padding: 50px 20px 60px;
}
.r-50.center .text {
position: relative;
top: initial;
left: initial;
transform: initial;
margin: 0 auto;
width: calc(100% - 40px);
}
#h-info .r-50.center .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.expertise {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
}
}
@media (max-width: 800px) {
p { font-size: 1.2rem; line-height: 190%; margin-bottom: 1.9rem; }
.b-2 {
font-size: 1.1rem;
height: 3.4rem;
line-height: 3.4rem;
border-radius: 1.7rem;
}
.col-1 {
padding: 6rem 20px 6rem;
}
.col-2 {
flex-flow: row wrap;
}
.r-50{
width: 100%;
max-width: 100%;
padding-bottom: 110%;
}
.r-50.center .text { margin: 0 auto -20px; }
#h-info .r-50.center .text {
position: relative;
top: initial;
left: initial;
transform: initial;
margin: -10px auto 15px;
}
}
@media (max-width: 500px) {
.expertise { margin: 40px auto !important; }
}
/*
==============================================
Animation
============================================== */
.fadein {
opacity: 0;
}
[data-aos=slide-up] {
transform: translate3d(0,50%,0) !important;
}
[data-aos^=slide][data-aos^=slide].aos-animate {
transform: translateZ(0) !important;
}
/*
==============================================
Gradient
============================================== */
#jpb-gradient {
position: fixed;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
background: linear-gradient(135deg, #ff2a00, #ff5400, #fc8500, #f9b200, #ff75ba, #ff1770);
background-size: 250% 250%;
-webkit-animation: jpb-gradient 11s ease infinite;
-moz-animation: jpb-gradient 11s ease infinite;
animation: jpb-gradient 11s ease infinite;
transition: all 0.4s ease-in-out;
}
.jpb-gradient {
background: linear-gradient(135deg, #ff2a00, #ff5400, #fc8500, #f9b200, #ff75ba, #ff1770);
background-size: 250% 250%;
-webkit-animation: jpb-gradient 11s ease infinite;
-moz-animation: jpb-gradient 11s ease infinite;
animation: jpb-gradient 11s ease infinite;
transition: all 0.4s ease-in-out;
}
@-webkit-keyframes jpb-gradient {
0%{background-position:0% 0%}
50%{background-position:93% 100%}
100%{background-position:0% 0%}
}
@-moz-keyframes jpb-gradient {
0%{background-position:0% 0%}
50%{background-position:93% 100%}
100%{background-position:0% 0%}
}
@keyframes jpb-gradient {
0%{background-position:0% 0%}
50%{background-position:93% 100%}
100%{background-position:0% 0%}
}
/*
==============================================
Cursor
============================================== */
#shopify-section-home-play:hover * {
cursor: url("play_cursor_1.png") 12 12, pointer !important;
}
#shopify-section-home-play .play-layers { pointer-events: none }
/*
==============================================
Header
============================================== */
header {
position: relative;
z-index: 10;
top: 0;
left: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 20px 80px;
transition: background-color 0.3s ease-in-out;
margin-bottom: -100px;
transition-property: initial !important;
}
header.h-bg, header.static { background-color: var(--white); }
.sticky { position: fixed; }
#logo {
display: block;
height: 75px;
position: relative;
}
#logo svg, #logo img {
height: 100%;
width: auto;
position: relative;
z-index: 2;
}
#h-nav {
text-align: center;
margin: 0 auto;
width: 100%;
max-width: 600px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#h-nav a, #h-nav a * {
font-family: 'Avant Garde';
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
#h-nav a, #h-nav a:link, #h-nav a:visited {
display: inline-block;
text-transform: uppercase;
padding: 0 20px;
}
#h-nav a span { display: inline-block; }
.h-link:hover > span {
animation: jumb 0.5s;
-webkit-animation: jumb 0.5s;
animation-iteration-count: 1;
}
.h-link span { animation-direction: reverse; }
/* here */
.h-anim.bounce {
animation: jumb 0.5s;
-webkit-animation: jumb 0.5s;
}
@keyframes jumb {
0% { -webkit-transform:translateY(0px); transform:translateY(0px) }
50% { -webkit-transform:translateY(-15px); transform:translateY(-15px) }
100% { -webkit-transform:translateY(0px); transform:translateY(0px) }
}
@-webkit-keyframes jumb {
0% { -webkit-transform:translateY(0px); transform:translateY(0px) }
50% { -webkit-transform:translateY(-15px); transform:translateY(-15px) }
100% { -webkit-transform:translateY(0px); transform:translateY(0px) }
}
.h-link span:nth-of-type(1) { animation-delay: .1s; }
.h-link span:nth-of-type(2) { animation-delay: .15s; }
.h-link span:nth-of-type(3) { animation-delay: .2s; }
.h-link span:nth-of-type(4) { animation-delay: .25s; }
.h-link span:nth-of-type(5) { animation-delay: .3s; }
/*
#h-nav a:hover > span {
animation: jumb 0.5s;
-webkit-animation: jumb 0.5s;
}
@keyframes jumb {
0% { -webkit-transform:translateY(0px); transform:translateY(0px) }
50% { -webkit-transform:translateY(-15px); transform:translateY(-15px) }
100% { -webkit-transform:translateY(0px); transform:translateY(0px) }
}
@-webkit-keyframes jumb {
0% { -webkit-transform:translateY(0px); transform:translateY(0px) }
50% { -webkit-transform:translateY(-15px); transform:translateY(-15px) }
100% { -webkit-transform:translateY(0px); transform:translateY(0px) }
}
#h-nav a span:nth-of-type(1) { animation-delay: .1s; }
#h-nav a span:nth-of-type(2) { animation-delay: .15s; }
#h-nav a span:nth-of-type(3) { animation-delay: .2s; }
#h-nav a span:nth-of-type(4) { animation-delay: .25s; }
#h-nav a span:nth-of-type(5) { animation-delay: .3s; }
*/
#h-symbols {
text-align: right;
min-width: 180px;
margin-left: auto;
}
#h-symbols li {
display: inline-block;
margin-left: 17px;
cursor: pointer;
}
#h-symbols svg {
height: 35px;
width: auto;
}
.not-empty {
position: relative;
}
.not-empty:after {
content: '';
position: absolute;
top: 4px;
right: -2px;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: var(--pink);
}
#mobile-menu { display: none; }
#mobile-menu-icon {
display: none;
position: relative;
z-index: 5;
width: 26px;
height: 20px;
border-top: 3px solid var(--black);
border-bottom: 3px solid var(--black);
transition: all 0.3s ease-in-out;;
}
#mobile-menu-icon:before, #mobile-menu-icon:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
height: .25rem;
width: 26px;
background-color: var(--black);
transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
#mobile-menu:checked ~ #mobile-menu-icon { position: fixed; top: 24px; right: 20px; border-top: 1px solid rgba(0,0,0,0); border-bottom: 1px solid rgba(0,0,0,0); }
#mobile-menu:checked ~ #mobile-menu-icon:before {
transform: rotateZ(45deg);
}
#mobile-menu:checked ~ #mobile-menu-icon:after {
transform: rotateZ(-45deg);
}
#mobile-links-bottom { display: none; }
#CartDrawer {
padding: 20px;
text-align: left;
}
.drawer {
display: block;
opacity: 0;
position:fixed;
overflow:hidden;
-webkit-overflow-scrolling:touch;
top:0;
bottom:0;
max-width:95%;
z-index:30;
transition: all 0.3s ease-in-out;
pointer-events: none;
}
.drawer--right{
width:400px;
max-width: calc(100% - 20px);
right:-400px;
}
.drawer--is-open {
opacity: 1 !important;
right: 0 !important;
transition: all 0.3s ease-in-out;
transform: initial !important;
pointer-events: all;
}
#cart-check:checked ~ #CartDrawer > .drawer {
pointer-events: all;
}
.cart-header {
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.cart-title {
font-family: 'Romie', serif;
font-size: 4.8rem;
}
.cart-close {
position: relative;
height:30px;
width: 30px;
margin-left: auto;
border: 0;
background: none;
}
.cart-close:before, .cart-close:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 26px;
background-color: var(--black);
}
.cart-close:before {
transform: translate(-50%, -50%) rotateZ(-45deg);
}
.cart-close:after {
transform: translate(-50%, -50%) rotateZ(45deg);
}
.drawer__inner {
}
.drawer__scrollable {
padding: 50px 0 0;
overflow-y: auto;
overflow-x: auto;
}
.drawer__scrollable::-webkit-scrollbar {
width: 0px !important;
background: transparent !important; /* make scrollbar transparent */
}
.drawer__scrollable label { margin-top: 10px; font-size: 14px; }
.ajaxcart__row {
padding-bottom: 0;
margin-bottom: 30px;
border-bottom: 0;
}
.ajaxcart__product-name {
font-size:16px;
letter-spacing: 1.6px;
font-weight: bold;
text-transform: uppercase;
}
.ajaxcart__product-meta {
padding-top: 0;
font-size: 16px;
}
.js-qty__wrapper { max-width: 70px !important }
.js-qty__num {
padding: 3px 0 0;
border-radius: 9px;
height: 18px;
border: 1px solid var(--black) !important;
font-size: 12px;
}
.js-qty__adjust:hover {
background-color: initial !important;
color: var(--black) !important;
fill: initial !important;
font-size: 10px !important;
}
.input-full {
border-radius: 18px;
background-color: var(--white);
border: 1px solid var(--black);
border-color: var(--black) !important;
padding: 6px 10px;
}
.drawer__footer {
padding: 10px 0 0;
}
.drawer__footer:after { display: none !important; }
.ajaxcart__subtotal { font-family: 'Avant Garde'; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 0; }
.ajaxcart__note, .ajaxcart__note label {
font-family: 'Avant Garde';
margin-top: 0;
margin-bottom: 20px;
max-width: 55%;
font-size: 14px;
line-height: var(--typeHeaderLineHeight);
}
.ajaxcart__note--terms {
display:flex;
flex-flow: row nowrap;
}
.ajaxcart__note label {
max-width: 100% !important;
}
/*.ajaxcart__note label {
font-family: 'Avant Garde';
font-weight: 400;
font-size: 8px;
line-height: 9.6px;
}*/
#CartAgree {
background: rgba(0,0,0,0);
border: 1px solid var(--black);
border-color: var(--black) !important;
border-radius: 2px;
}
.drawer__footer .button {
width: 100%;
background-color: var(--lavender);
margin-left: 0;
}
.drawer__footer .button:hover {
background-color: #fc8500;
}
@media (max-width: 1100px) {
header { padding: 10px 20px; }
#logo svg, #logo img { height: 100%; width: auto; }
#h-nav a, #h-nav a:link, #h-nav a:visited { padding: 4px; }
}
@media (max-width: 850px) {
header { margin-bottom: -70px }
#logo { height: 50px; }
#logo svg, #logo img { height: 50px !important; width: auto; }
#h-symbols {
margin-left: auto;
padding-right: 15px;
max-width: 100%;
}
#mobile-menu:checked ~ #h-symbols { padding-right: 41px; }
#mobile-menu-icon { display: block; }
#h-nav {
pointer-events: none;
position: fixed;
z-index: 999;
top: 50%;
left: 0;
width: 100%;
max-width: 100%;
opacity: 0;
text-align: center;
transform: translateY(-50%);
transition: opacity 0.6s ease-in-out;
}
#h-nav a, #h-nav a * {
font-family: 'Platform';
font-weight: bold;
font-size: clamp(6rem, 4.5750rem + 15.6250vw, 17.6rem);
line-height: 64%;
letter-spacing: -6px;
}
.h-link {
transition: all 0.6s linear;
opacity: 0;
transform: rotateX(40deg);
transform-origin: bottom;
}
.h-link:nth-of-type(1) { transition-delay: .1s !important; }
.h-link:nth-of-type(2) { transition-delay: .2s !important; }
.h-link:nth-of-type(3) { transition-delay: .3s !important; }
.h-link:nth-of-type(4) { transition-delay: .4s !important; }
.h-link:nth-of-type(5) { transition-delay: .5s !important; }
#h-symbols { min-width: 40px; }
#h-account, #h-search { display: none !important; }
#h-cart {
position: relative;
top: 4px;
}
#h-cart svg { height: 30px; width: auto; }
#mobile-menu:checked ~ #h-nav {
opacity: 1;
pointer-events: all;
}
#mobile-menu:checked ~ #h-nav .h-link {
transform: rotateX(0deg);
opacity: 1;
}
/*@keyframes rotate {
0% { -webkit-transform:rotateX(25deg); transform:rotateX(25deg); opacity: 0; }
100% { -webkit-transform:rotateX(0deg); transform:rotateX(0deg); opacity: 1; }
}
@-webkit-keyframes rotate {
0% { -webkit-transform:rotateX(0px); transform:rotateXY(0px) }
100% { -webkit-transform:rotateX(90deg); transform:rotateX(90deg) }
}*/
#mobile-menu:checked ~ #jpb-gradient { opacity: 1;pointer-events: all; }
#mobile-links-bottom {
display: flex;
position: fixed;
width: calc(100% - 40px);
bottom: 20px;
left: 20px;
justify-content: space-between;
}
#mobile-links-bottom a, #mobile-links-bottom a:link, #mobile-links-bottom a:visited {
font-family: 'Avant Garde';
font-weight: normal;
font-size: 12px;
text-transform: uppercase;
}
}
@media (max-width: 500px) {
#h-nav a, #h-nav a * { line-height: 55%; letter-spacing: -4px; }
#logo, #logo svg, #logo img { height: 40px !important; }
#mobile-menu:checked~#mobile-menu-icon {
top: 20px;
}
}
/*
==============================================
Footer
============================================== */
#project-bottom { height: 226px; }
@media (max-width: 900px) { #project-bottom { height: 571px; } }
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 226px;
background-color: var(--red);
overflow: hidden;
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20396%20197%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23FF75B6%22%20d%3D%22M203.542%202.442H99.851c-7.545%200-13.38%205.03-13.38%2011.152%200%207.276%204.108%2013.472%2021.621%2026.059%2018.33%2013.136%2025.722%2024.099%2025.722%2040.501%200%2023.537-17.244%2043.235-37.766%2043.235-18.642%200-31.351-9.864-31.351-24.685%200-8.308%203.577-13.679%206.031-13.679%201.435%200%202.533%201.239%202.533%203.119%200%201.88-1.501%205.506-1.501%209.883%200%209.241%207.355%2017.219%2023.891%2017.219%2015.322%200%2029.953-16.548%2029.953-32.693%200-22.451-13.148-37.974-37.009-37.974C42.075%2044.579%200%2090.006%200%20139.266c0%2034.202%2020.564%2057.165%2048.473%2057.165%2040.226%200%2064.813-49.504%2083.974-82.07%2018.282-29.654%2038.304-60.363%2060.626-82.045%2012.239-11.885%2019.607-15.572%2019.607-22.103%200-4.847-3.302-7.771-9.138-7.771M191.279%2093.29c-2.942-6.324%2041.514-40.257%2045.97-28.732%204.462%2011.524-43.028%2035.056-45.97%2028.732M262.703%200c-34.757%200-82.918%2053.888-113.018%20102.318-8.485%2013.411-22.164%2037.766-33.933%2055.828-8.484%2013.136-19.155%2022.982-19.155%2028.183%200%204.383%203.285%207.661%2010.396%207.661h70.6c6.843%200%2010.951-2.46%2010.951-7.661%200-4.102-3.284-8.479-9.309-13.954-6.293-5.75-23.256-19.704-23.256-44.06%200-18.605%205.744-24.898%207.935-24.898s3.284%201.916%203.284%204.376c0%204.652-2.948%2010.945-2.948%2020.248%200%2022.988%2011.494%2035.452%2029.281%2035.452%2033.384%200%2089.694-74.854%2089.694-130.952C283.225%208.735%20277.475%200%20262.703%200m74.336%20132.112c-8.698%2010.194-44.694-24.16-39.847-28.231%207.294-6.648%2047.124%2019.716%2039.847%2028.231m.873-89.59c4.933%2010.926-29.611%2025.027-31.375%2019.564-2.643-7.93%2027.316-28.904%2031.375-19.564m11.128%2037.723c-33.304%200-55.413%2014.565-56.78%209.364-1.093-4.926%2020.052-11.952%2045.872-15.987%2019.57-3.064%2055.646-15.651%2055.646-45.878C393.778%209.956%20380.367%200%20354.644%200c-19.698%200-34.751%203.535-45.97%2013.387-24.356%2021.071-18.063%2049.529-38.859%2087.838-17.238%2031.742-36.668%2054.18-53.363%2065.949-12.312%208.76-18.33%2012.862-18.33%2019.155%200%204.383%203.284%207.661%208.21%207.661h52.391c8.479%200%2012.038-7.386%2012.038-16.689%200-9.992-3.345-19.704-3.345-32.566%200-16.261%208.094-35.721%2011.866-35.721.91%200%201.648.672%201.648%201.489%200%207.93-6.861%2015.59-6.861%2041.472%200%2026.822%2018.197%2044.456%2044.438%2044.456%2055.981%200%2077.395-41.184%2077.395-71.607%200-24.807-17.098-44.579-46.862-44.579%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: -20px -4px;
background-size: auto calc(100% - 33px);
z-index: -2;
}
#p-project { margin-bottom: 0; }
.project-footer { z-index: initial; }
#footer-links {
display: flex;
flex-flow: row nowrap;
width: 100%;
padding: 20px 0 30px 28%;
align-items: flex-start;
}
#footer-links ul {
display: flex;
flex-flow: row wrap;
width: calc(50% - 200px);
max-width: 300px;
padding-right: 15px;
}
#footer-links ul:first-of-type { min-width: 180px; }
.f-link, .f-link * {
font-family: 'Avant Garde';
font-weight: normal;
display: inline-block;
width: 100%;
font-size: 14px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--black);
list-style: none;
line-height: 25px;
margin-bottom: 0px;
}
.f-link:first-of-type { margin-bottom: 7px; font-weight: bold; }
.f-link a, .f-link a:visited, .f-link a:link {
color: var(--black);
font-family: 'Avant Garde';
font-weight: normal;
}
.f-link a:hover { text-decoration: underline; }
#f-newsletter {
display: flex;
flex-flow: row nowrap;
height: 100%;
align-self: center;
padding-right: 80px;
text-align: right;
margin-left: auto;
width: 600px;
min-width: 400px;
}
#f-newsletter input[type=email] {
width: calc(100% - 120px);
min-width: 265px;
font-family: 'Avant Garde', serif;
font-size: 18px;
border: 0;
background-color: rgba(0, 0, 0, 0);
border-bottom: 2px solid var(--black);
}
#f-newsletter input[type=email]::placeholder {
color: var(--black);
opacity: 1;
}
#footer-legal {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 50px;
line-height: 50px;
background-color: var(--lavender);
padding: 0 50px;
}
#footer-legal * {
font-family: 'Avant Garde';
font-weight: normal;
font-size: 12px;
}
#footer-legal ul { display: inline; float: right; }
#footer-legal ul li {
list-style-type: none;
display: inline-block;
margin-left: 20px;
}
.f-2 { width: 140px !important; }
@media (max-width: 1400px) {
#footer-links {
padding: 20px 0 30px 30%;
}
#footer-links ul {
width: 200px;
}
}
@media (max-width: 1200px) {
#f-newsletter {
width: 100%;
}
#f-newsletter input[type=email] {
width: 100%;
}
#footer-links {
flex-flow: row wrap;
padding: 20px 0 30px 50%;
}
#footer-links ul { width: 50%; margin-bottom: 10px; }
.f-link, .f-link * {
font-size: 12px;
letter-spacing: 1.2px;
line-height: 15px;
}
}
@media (max-width: 900px) {
footer {
height: initial;
text-align: center;
background-position: center 15px;
background-size: auto 90px;
padding-bottom: 100px;
}
#footer-links {
flex-flow: row wrap;
padding: 130px 0 20px;
text-align: center;
}
.f-link:first-of-type { margin-bottom: 0; }
.hide { display: none !important; }
#footer-links ul { width: 100%; max-width: 100%; padding: 0; }
.f-2 { width: 100% !important; }
#footer-links ul:first-of-type { margin-bottom: 10px; }
.f-link {
display: block;
width: 100%;
}
.f-link, .f-link * {
font-size: 12px;
letter-spacing: 1.2px;
line-height: 25px;
}
#f-newsletter {
min-width: initial;
width: 100%;
flex-flow: row wrap;
justify-content: center;
padding: 0 50px;
margin-top: 50px;
}
#f-newsletter input[type=email] {
font-size: 16px;
margin: 0 auto 15px;
width: 100%;
min-width: 0;
text-align: center;
border-radius: 0;
}
#f-newsletter .button { margin: 0 auto }
#footer-legal {
text-align: left;
}
}
/*
==============================================
Main
============================================== */
#hero {
display: block;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 3;
}
#hero, #hero * { pointer-events: none !important; }
#hero-slideshow {
width: 100%;
height: 100%;
}
#hero-slideshow img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
object-position: center;
}
#jpb-hero {
display: block;
width: calc(100% - 160px);
max-width: 1129px;
min-width: 500px;
height: auto;
margin: 0 auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.9s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
}
@media (min-width: 1921px) {
#jpb-hero {
width: 60%;
max-width: initial;
}
}
main {
position: relative;
z-index: 1;
margin-bottom: 226px;
background-color: var(--white);
}
@media (max-width: 900px) { main { margin-bottom: 571px; } }
#p-home {
padding-top: 100px;
}
@media (max-width: 850px) {
#p-home {
padding-top: 70px;
}
}
/*@media (max-width: 500px) {
#p-home {
padding-top: 0;
margin-top: 70px;
}
}*/
.block-heading {
display: block;
position: relative;
width: 90%;
height: 90%;
margin: 0 auto;
object-fit: contain;
object-position: center;
}
.text-link {
position: relative;
display: inline-block;
font-family: 'Avant Garde';
font-weight: bold;
font-size: 24px;
letter-spacing: 2.4px;
text-transform: uppercase;
margin-top: 30px;
padding-top: 9px;
padding-right: 48px;
background-position: right center;
background-repeat: no-repeat;
transition: all 0.2s ease-in-out;
white-space: nowrap;
}
.text-link.red { background-image: url('data:image/svg+xml;utf8,'); }
.text-link.orange { background-image: url('data:image/svg+xml;utf8,'); }
.text-link.pink { background-image: url('data:image/svg+xml;utf8,'); }
.text-link.lavender { background-image: url('data:image/svg+xml;utf8,'); }
.text-link.black { background-image: url('data:image/svg+xml;utf8,'); }
.text-link.cream { background-image: url('data:image/svg+xml;utf8,'); }
.text-link.white { background-image: url('data:image/svg+xml;utf8,'); }
.text-link:hover {
background-position: right 7px center;
}
/* Play Section */
#play-heading {
/* margin: 0 auto 30px; */
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 7rem;
}
#h-col .play_Section .blue_Overlay {
padding-top: 0 !important;
margin-top: 0 !important;
height: initial !important;
z-index: initial !important;
}
.play_Section .blue_Overlay .play-layers.layer1 {
width: 15vw;
right: 9vw;
top: 50px;
}
.play-items {
position: absolute;
}
.item-1 {
width: 15vw;
right: 9vw;
top: 50px;
z-index: 1;
transform: translateY(-100px);
}
.item-2 {
left: 9vw;
width: 29vw;
top: 20%;
}
.item-3 {
width: 25vw;
left: 45vw;
top: 20%;
z-index: 1;
}
.item-4 {
left: auto;
width: 29vw;
top: calc(50% + 100px);
right: 0;
}
.sparkle {
top: 30%;
width: 15vw;
left: 30vw;
z-index: 2;
}
@media (max-width: 1200px) {
#jpb-hero { width: calc(100% - 40px); max-width: 700px; min-width: 300px; }
}
@media (max-width: 800px) {
.text-link { margin-top: 20px; }
.block-heading {
width: 90%;
height: 90%;
}
#jpb-hero { width: calc(100% - 40px); max-width: calc(100% - 40px);}
#play-heading { width: 105px; height: auto; top: 3rem }
.play-items { transform: translateY(-100px); }
.item-1 { width: 20vw; }
.item-2 {
left: -20px;
width: 50vw;
top: 30vw;
}
.item-3 {
width: 35vw;
left: 51.5vw;
top: 30vw; }
.item-4 {
width: 43vw;
top: 80%;
right: -12vw;
}
.sparkle {
width: 22vw;
top: 52%;
left: 36vw;
}
#h-info .r-50:first-of-type {
padding: 60px 4rem 40px;
}
#h-info .b-2 {
font-size: 1.1rem;
height: 3.4rem;
line-height: 3.4rem;
border-radius: 1.7rem;
}
#h-info, #h-work {
flex-wrap: wrap-reverse;
}
}
@media (max-width: 500px) {
#jpb-hero { min-width: 200px;}
#play-heading { top: 2rem }
.text-link { font-size: 18px; letter-spacing: 1.8px; margin-top: 0px; margin-bottom: -14px; }
}
@media (max-width: 400px) {
.item-1 {
right: 0vw;
top: -40px;
transform: translateY(0);
}
.item-2 {
width: 50vw;
top: 34vw;
}
.item-3 { width: 35vw; top: 34vw; }
.item-4 { top: 90%;}
}
/*
==============================================
Image Frame
============================================== */
.img-clip {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
background-size: cover;
background-position: center;
z-index: 2;
}
.img-clip.frame_1 { background-image: url('clip_1.svg'); }
.img-clip.frame_2 { background-image: url('clip_2.svg'); }
.img-clip.frame_3 { background-image: url('clip_3.svg'); }
.img-clip.frame_4 { background-image: url('clip_4.svg'); }
#clip1 {
position: absolute;
left: 50%;
}
#h-col {
position: relative;
}
.clipping-mask {
position: relative;
width: 100%;
padding-bottom: 46.499483878%;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
overflow: hidden;
}
@media (max-width: 800px) {
.clipping-mask {
padding-bottom: 78.90374661%;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
}
/*
==============================================
Badges
============================================== */
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.badge {
position: absolute;
top: -20px;
left: 60px;
width: 9vw;
max-width: 160px;
height: 9vw;
max-height: 160px;
border-radius: 50%;
z-index: 3;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: rotating 15s linear infinite;
-moz-animation: rotating 15s linear infinite;
-ms-animation: rotating 15s linear infinite;
-o-animation: rotating 15s linear infinite;
animation: rotating 15s linear infinite;
/*pointer-events: none;*/
}
.badge:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */
}
.badge.hello {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M0%20.238h159.76V160H0z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(0%20-.238)%22%3E%3Cmask%20id%3D%22b%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2Fmask%3E%3Cpath%20fill%3D%22%23FCE5CF%22%20d%3D%22M151.03%2043.841c20.036%2039.294%204.424%2087.391-34.871%20107.43-39.294%2020.036-87.391%204.424-107.43-34.871C-11.306%2077.106%204.306%2029.009%2043.6%208.97c39.295-20.035%2087.391-4.423%20107.43%2034.871%22%20mask%3D%22url(%23b)%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23FF5400%22%20fill-rule%3D%22nonzero%22%20d%3D%22M116.29%2076.641a38.303%2038.303%200%2001-.769-.947c-3.341-4.249-5.762-9.233-9.422-13.262-3.217-3.541-7.585-6.458-12.369-6.383-2.474.039-4.889.883-7.027%202.13-2.418%201.411-4.804%203.411-7.582%203.269-2.778.142-5.164-1.858-7.582-3.269-2.138-1.247-4.553-2.091-7.027-2.13-4.784-.075-9.152%202.842-12.369%206.383-3.289%203.622-5.673%207.872-8.658%2011.716a50.284%2050.284%200%2001-6.803%207.172c-2.466%202.133-4.961%204.133-7.609%206.025%201.175.917%202.869%201.102%204.337%201.225%201.935.162%203.98.698%205.243%202.172.555.647.919%201.432%201.277%202.206.945%202.046%201.607%204.412%202.882%206.241%201.433%202.055%203.214%203.974%204.858%205.862%203.323%203.815%206.982%207.446%2011.412%209.962a41.067%2041.067%200%200020.039%205.325%2041.067%2041.067%200%200020.039-5.325c5.169-2.935%209.267-7.361%2013.041-11.877%201.71-2.047%203.287-4.001%204.548-6.352%201.219-2.271%202.311-4.805%204.593-6.221%201.311-.814%202.733-.997%204.2-1.338.446-.104%203.816-1.546%203.676-1.655-2.232-1.742-4.686-3.17-6.884-4.981-2.139-1.762-4.373-3.72-6.044-5.948%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M31.939%2087.22l.174.277c.115.075.229.151.342.227%202.237%201.496%204.23%203.44%207.151%202.535.2-.062.412-.136.61-.073.26.081.394.357.503.605%202.926%206.687%207.606%2013.364%2012.96%2018.298a42.014%2042.014%200%20002.133%201.844c.107.087.215.172.324.258.034.027.307.237.146.114a33.835%2033.835%200%20001.611%201.156c3.37%202.269%206.966%203.821%2010.847%204.898%207.817%202.168%2015.985%201.837%2023.67-.922a37.241%2037.241%200%20005.427-2.449%2031.712%2031.712%200%20004.6-3.055c2.97-2.391%205.567-5.207%208.025-8.111%203.218-3.801%205.701-7.579%207.224-12.393%201.996-.312%204.491-.536%206.34-1.387.314-.145%201.331-.686%202.31-1.263l.226-.278c-1.828-1.296-3.783-2.554-5.515-3.988-2.062-1.706-4.023-3.498-5.691-5.589a6.952%206.952%200%2001-.276-.344%2047.762%2047.762%200%2001-1.729-2.22c-2.194-2.99-4.024-6.229-6.213-9.223a30.03%2030.03%200%2000-3.356-3.88c-1.278-1.23-2.36-2.082-3.916-2.964a17.487%2017.487%200%2000-1.129-.587c-.039-.018-.569-.253-.355-.164a14.007%2014.007%200%2000-3.014-.86c-.27-.046.028%200-.135-.019-.078-.008-.156-.017-.235-.024a11.752%2011.752%200%2000-1.97-.017c-.737.057-1.588.236-2.44.5-1.667.513-3.16%201.4-4.709%202.38-1.482.94-3.047%201.916-4.783%202.295-1.918.42-3.866.18-5.659-.588-1.613-.69-3.03-1.727-4.533-2.617-1.585-.939-3.104-1.566-4.958-1.883-.629-.108-1.638-.149-2.46-.089-.132.01-.263.022-.393.035-.317.03-.129.013-.059.004a13.185%2013.185%200%2000-1.759.387c-1.527.448-2.822%201.117-4.253%202.098-1.25.858-2.528%202.008-3.679%203.26-2.516%202.736-4.485%205.895-6.659%208.984-2.24%203.18-4.719%206.168-7.57%208.82-1.43%201.33-2.927%202.602-4.429%203.852a56.277%2056.277%200%2001-2.746%202.16zm85.567-11.504a264.923%20264.923%200%2001.118.148c.126.166.317.402.524.646.228.27.463.534.703.794.464.503.948.987%201.443%201.458a57.4%2057.4%200%20003.066%202.683c2.147%201.77%204.695%203.285%206.95%205.036.81.628.45%201.96-.311%202.42-2.321%201.4-4.876%202.351-7.598%202.7-.176.021-.358.043-.514.127-.252.138-.39.413-.516.671-2.745%205.63-6.794%2010.573-10.99%2015.185-2.638%202.902-5.525%205.612-8.815%207.766-3.473%202.273-7.414%203.937-11.411%205.027a41.993%2041.993%200%2001-24.967-.909c-3.947-1.397-7.66-3.327-10.97-5.895-7.47-5.798-13.545-14.436-17.75-22.853-.788-.105-12.656-1.927-8.243-4.69a35.225%2035.225%200%20002.435-1.674c1.44-1.079%202.95-2.403%204.374-3.638%201.48-1.284%202.919-2.607%204.264-4.036%202.65-2.814%204.718-5.834%206.923-9.03%202.165-3.14%204.435-6.308%207.39-8.759%202.829-2.344%206.162-4.083%209.875-4.354%201.908-.14%203.87.188%205.665.836%201.844.665%203.474%201.651%205.124%202.69.739.463%201.488.92%202.28%201.29.32.15.549.24%201.038.376.2.056.404.101.609.141.179.034.01.008-.024.003.103.014.209.022.312.028.444.028.905.028%201.347-.006.037-.002.356-.044.184-.016-.172.027.145-.032.18-.039.204-.042.406-.094.606-.155.732-.22%201.319-.52%202.11-.979%201.584-.92%203.064-2%204.745-2.748%201.87-.832%203.839-1.384%205.896-1.447%203.629-.11%207.152%201.378%2010.007%203.537%203.024%202.286%205.378%205.2%207.49%208.324%201.065%201.574%202.07%203.186%203.118%204.771a59.246%2059.246%200%20002.157%203.08c.246.304.574.719.984%201.245l.069.082c.044.053.085.108.123.164z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32.475%2089.978c2.82.845%205.762%201.225%208.693.869%201.787-.217%203.526-.592%205.224-1.193%201.665-.59%203.284-1.306%204.893-2.033%203.053-1.379%205.943-2.803%209.367-3.366.033-.005.363-.054.192-.031a13.938%2013.938%200%2001.722-.064%2011.89%2011.89%200%20011.677.018c.096.008.513.056.215.016.361.049.719.12%201.073.205a12.035%2012.035%200%20011.41.434l.25.095c.398.152-.162-.076.064.024.639.284%201.26.6%201.866.949%201.271.734%202.473%201.581%203.676%202.42%201.356.947%202.677%201.955%204.288%202.428%203.303.971%206.716-.244%209.404-2.186a52.267%2052.267%200%20001.837-1.41l.43-.339.215-.169.06-.046.115-.088.218-.163c.145-.109.292-.216.439-.321a14.228%2014.228%200%20011.794-1.104c.143-.073.29-.135.433-.207.213-.108-.211.076.014-.008.087-.032.173-.067.26-.099a8.838%208.838%200%20011.093-.323c.795-.179%201.516-.225%202.434-.188.887.035%201.434.123%202.343.335.884.207%201.751.478%202.605.784a38.836%2038.836%200%20011.793.691c.263.108.351.146.51.214%203.308%201.425%206.526%203.049%209.964%204.152%203.674%201.18%207.586%201.432%2011.363.613a20.958%2020.958%200%20002.588-.747c1.022-.364%201.698-1.702%201.428-2.753-.098-.381-.328-.726-.369-1.118-3.618%201.999-8.05%202.491-12.069%201.611-3.533-.773-6.523-2.257-9.766-3.719-3.361-1.515-6.901-3.081-10.651-3.152a11.767%2011.767%200%2000-5.158%201.075c-1.341.615-2.517%201.521-3.673%202.425l-.806.636-.378.296.04-.031-.273.207c-.57.428-1.155.837-1.771%201.196-.727.423-1.131.613-1.85.84a9.191%209.191%200%2001-1.136.281c-.036.007-.352.055-.176.032a9.267%209.267%200%2001-.787.045%207.252%207.252%200%2001-.835-.038c.066.006.271.049-.043-.006a7.273%207.273%200%2001-1.406-.39c-.241-.097.171.085-.065-.032a9.368%209.368%200%2001-.497-.259c-.362-.208-.705-.451-1.05-.687-1.227-.837-2.428-1.711-3.673-2.521-2.491-1.621-5.205-2.868-8.216-3.008-3.491-.162-6.905%201.174-10.052%202.532-3.148%201.359-5.861%202.841-9.154%203.686-.802.205-1.618.37-2.438.479.071-.009.235-.027-.088.009a18.825%2018.825%200%2001-.918.09c-.447.035-.895.057-1.344.067-2.647.057-5.16-.318-7.589-1.4-.236-.105-.444.938-.548%201.144-.266.523-.675.961-1.207%201.218a29.57%2029.57%200%20002.996%201.083m4.963-60.937l3.284-2.23%203.281%204.83%204.206-2.858-3.283-4.83%203.284-2.231%208.737%2012.856-3.283%202.233-3.496-5.145-4.205%202.858%203.495%205.144-3.284%202.23zM55.466%2018.55l8.2-2.681%201.084%203.313-4.59%201.5.75%202.295%204.45-1.455%201.082%203.312-4.45%201.455.828%202.534%204.59-1.501%201.082%203.313-8.2%202.682zm15.047-3.989l3.954-.352%201.069%2012.008%204.582-.408.309%203.473-8.536.761zm14.532-.479l3.935.521-1.584%2011.95%204.559.605-.458%203.455-8.495-1.125zM101.99%2031.09c2.563%201.16%204.863-.613%205.686-2.432.83-1.836.65-4.752-1.954-5.929-2.506-1.133-4.834.396-5.733%202.386-.987%202.182-.43%204.877%202.001%205.975m5.149-11.547c4.364%201.973%205.944%206.789%204.162%2010.733-1.784%203.941-6.422%205.947-10.825%203.957-4.458-2.016-5.842-6.906-4.2-10.541.425-.939%201.034-1.93%201.923-2.774a8.073%208.073%200%20018.94-1.375m9.301%2018.525l-2.784-2.27%206.582-8.073%202.783%202.269-6.581%208.074zm-3.238%203.971l-2.783-2.268%202.254-2.767%202.785%202.269-2.256%202.766z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.hello2 {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M0%20.238h159.762V160H0z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20transform%3D%22translate(0%20-.238)%22%3E%3Cmask%20id%3D%22b%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2Fmask%3E%3Cpath%20fill%3D%22%23FC8500%22%20d%3D%22M151.03%2043.841c20.036%2039.294%204.424%2087.391-34.871%20107.427-39.294%2020.036-87.391%204.424-107.427-34.871C-11.303%2077.103%204.309%2029.006%2043.602%208.97c39.296-20.035%2087.392-4.423%20107.428%2034.871%22%20mask%3D%22url(%23b)%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23FF5400%22%20fill-rule%3D%22nonzero%22%20d%3D%22M116.293%2076.641a38.303%2038.303%200%2001-.77-.947c-3.34-4.249-5.761-9.233-9.421-13.262-3.217-3.54-7.585-6.458-12.37-6.383-2.473.04-4.888.883-7.026%202.13-2.418%201.411-4.804%203.411-7.582%203.27-2.778.141-5.164-1.859-7.582-3.27-2.138-1.247-4.553-2.09-7.027-2.13-4.784-.075-9.152%202.842-12.37%206.383-3.288%203.622-5.672%207.872-8.657%2011.716a50.284%2050.284%200%2001-6.803%207.172c-2.466%202.133-4.961%204.133-7.61%206.025%201.176.917%202.87%201.102%204.338%201.225%201.935.162%203.98.698%205.243%202.172.555.647.919%201.432%201.277%202.206.945%202.046%201.607%204.412%202.882%206.241%201.433%202.055%203.214%203.974%204.858%205.862%203.323%203.815%206.982%207.446%2011.412%209.962a41.067%2041.067%200%200020.039%205.325%2041.067%2041.067%200%200020.039-5.325c5.169-2.935%209.267-7.36%2013.04-11.877%201.71-2.047%203.288-4%204.549-6.352%201.219-2.27%202.31-4.805%204.593-6.22%201.31-.815%202.733-.998%204.2-1.339.446-.104%203.816-1.546%203.676-1.655-2.232-1.742-4.686-3.17-6.884-4.98-2.14-1.763-4.373-3.72-6.044-5.949%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M31.939%2087.22l.174.277c.114.075.228.15.342.227%202.237%201.496%204.229%203.44%207.15%202.535.2-.062.413-.136.61-.073.26.08.395.357.504.605%202.926%206.687%207.606%2013.364%2012.959%2018.298a42.014%2042.014%200%20002.134%201.844c.107.087.215.172.324.258.034.027.307.237.146.114a33.835%2033.835%200%20001.611%201.156c3.37%202.269%206.966%203.82%2010.847%204.898%207.817%202.168%2015.985%201.837%2023.67-.922a37.241%2037.241%200%20005.427-2.45%2031.712%2031.712%200%20004.599-3.054c2.97-2.391%205.568-5.207%208.026-8.111%203.218-3.801%205.7-7.58%207.224-12.393%201.996-.312%204.49-.536%206.339-1.387.315-.145%201.331-.686%202.31-1.263l.227-.278c-1.828-1.296-3.783-2.554-5.515-3.988-2.062-1.706-4.024-3.498-5.692-5.59a6.955%206.955%200%2001-.276-.343%2047.753%2047.753%200%2001-1.728-2.22c-2.194-2.991-4.024-6.23-6.213-9.223a30.03%2030.03%200%2000-3.356-3.881c-1.278-1.23-2.361-2.081-3.916-2.963a17.487%2017.487%200%2000-1.13-.587c-.038-.018-.568-.253-.354-.164a14.007%2014.007%200%2000-3.014-.86c-.271-.046.028-.001-.135-.02l-.235-.023a11.752%2011.752%200%2000-1.97-.017c-.737.057-1.588.236-2.441.499-1.666.514-3.16%201.4-4.708%202.38-1.482.94-3.047%201.917-4.783%202.296-1.918.419-3.866.18-5.66-.588-1.612-.691-3.03-1.727-4.532-2.617-1.585-.94-3.104-1.566-4.958-1.883-.63-.108-1.638-.15-2.461-.09-.131.01-.262.023-.392.036-.317.03-.13.013-.06.004a13.185%2013.185%200%2000-1.759.387c-1.526.448-2.821%201.117-4.252%202.098-1.25.858-2.528%202.008-3.68%203.26-2.515%202.736-4.484%205.895-6.658%208.984-2.24%203.18-4.72%206.168-7.57%208.82-1.431%201.33-2.927%202.602-4.43%203.852a56.218%2056.218%200%2001-2.745%202.16zm85.566-11.504a271.219%20271.219%200%2001.118.148c.126.166.317.402.524.646.228.27.463.534.703.794.464.503.948.987%201.443%201.458a57.4%2057.4%200%20003.066%202.683c2.147%201.769%204.695%203.285%206.95%205.036.81.628.45%201.96-.311%202.419-2.321%201.4-4.876%202.352-7.598%202.7-.176.022-.358.044-.514.128-.252.138-.39.413-.516.67-2.745%205.63-6.794%2010.574-10.99%2015.186-2.638%202.902-5.525%205.612-8.815%207.766-3.473%202.273-7.414%203.937-11.411%205.027a41.993%2041.993%200%2001-24.967-.91c-3.947-1.396-7.66-3.326-10.97-5.894-7.47-5.798-13.545-14.436-17.75-22.853-.788-.105-12.656-1.927-8.243-4.69a35.225%2035.225%200%20002.435-1.674c1.44-1.08%202.95-2.403%204.374-3.638%201.48-1.284%202.919-2.607%204.264-4.036%202.65-2.814%204.718-5.834%206.923-9.031%202.165-3.14%204.435-6.307%207.39-8.758%202.829-2.344%206.162-4.083%209.875-4.354%201.908-.14%203.87.188%205.665.836%201.844.665%203.474%201.65%205.124%202.689.739.464%201.488.92%202.28%201.29.32.15.549.24%201.038.377.2.056.404.1.609.14.179.035.01.009-.024.004.103.014.209.022.312.028.444.028.905.028%201.347-.006.037-.002.356-.044.184-.016-.172.027.145-.032.18-.04.204-.041.406-.093.606-.154.732-.22%201.319-.52%202.11-.98%201.584-.92%203.064-2%204.745-2.747%201.87-.832%203.839-1.384%205.896-1.447%203.629-.111%207.152%201.378%2010.007%203.537%203.024%202.286%205.378%205.2%207.49%208.324%201.065%201.574%202.07%203.186%203.118%204.77a59.13%2059.13%200%20002.157%203.08c.246.304.574.72.985%201.246l.068.082c.044.053.085.108.123.164z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M32.475%2089.978c2.82.845%205.762%201.225%208.693.869%201.787-.217%203.526-.592%205.224-1.193%201.665-.59%203.284-1.306%204.893-2.033%203.053-1.38%205.943-2.803%209.367-3.366.033-.005.363-.054.192-.031a13.938%2013.938%200%2001.722-.064%2011.89%2011.89%200%20011.677.018c.096.008.513.056.215.016.361.049.72.12%201.073.205a12.035%2012.035%200%20011.41.434c.084.03.166.064.25.095.398.152-.162-.076.064.024.64.284%201.26.6%201.866.949%201.271.734%202.473%201.58%203.676%202.42%201.356.947%202.677%201.955%204.288%202.428%203.303.97%206.716-.244%209.404-2.186a52.267%2052.267%200%20001.837-1.41l.43-.34c.072-.055.144-.111.215-.168.014-.01.193-.15.06-.046l.115-.088a22.36%2022.36%200%2001.657-.484%2014.228%2014.228%200%20011.794-1.104c.143-.073.29-.135.433-.207.213-.108-.21.076.014-.008.087-.032.173-.067.26-.1a8.838%208.838%200%20011.093-.322c.795-.18%201.516-.225%202.434-.188.887.035%201.434.123%202.343.335.884.207%201.751.478%202.605.784a38.836%2038.836%200%20011.793.691c.263.108.351.146.51.214%203.308%201.425%206.526%203.049%209.964%204.152%203.674%201.18%207.586%201.432%2011.363.613a20.958%2020.958%200%20002.588-.747c1.022-.364%201.698-1.702%201.428-2.753-.098-.381-.328-.726-.369-1.118-3.618%201.999-8.05%202.49-12.069%201.61-3.533-.772-6.523-2.256-9.766-3.718-3.36-1.515-6.9-3.081-10.65-3.152a11.767%2011.767%200%2000-5.159%201.075c-1.34.615-2.517%201.52-3.673%202.425-.269.21-.537.424-.806.636l-.378.296.04-.031-.273.207c-.57.428-1.155.837-1.77%201.196-.728.423-1.132.613-1.85.84a9.191%209.191%200%2001-1.137.28c-.036.008-.352.056-.176.033a9.267%209.267%200%2001-.787.045%207.252%207.252%200%2001-.835-.038c.066.006.271.049-.043-.006a7.273%207.273%200%2001-1.406-.39c-.24-.097.171.085-.065-.032a9.368%209.368%200%2001-.497-.26c-.362-.207-.705-.45-1.05-.686-1.227-.837-2.428-1.711-3.673-2.521-2.49-1.621-5.205-2.868-8.216-3.008-3.49-.162-6.905%201.174-10.052%202.532-3.148%201.359-5.86%202.84-9.154%203.686-.802.205-1.618.37-2.438.479.071-.01.235-.027-.088.009a18.825%2018.825%200%2001-.918.09c-.447.035-.895.057-1.344.067-2.647.057-5.16-.318-7.589-1.4-.236-.105-.444.938-.548%201.144-.266.523-.675.96-1.207%201.218a29.57%2029.57%200%20002.996%201.083m4.963-60.937l3.284-2.23%203.281%204.83%204.206-2.858-3.283-4.83%203.284-2.23%208.737%2012.855-3.283%202.233-3.496-5.145-4.205%202.858%203.495%205.144-3.284%202.23zM55.465%2018.55l8.201-2.681%201.084%203.313-4.59%201.5.75%202.295%204.45-1.455%201.082%203.312-4.45%201.455.828%202.534%204.59-1.501%201.083%203.313-8.201%202.682zm15.048-3.99l3.954-.351%201.07%2012.008%204.581-.408.31%203.473-8.537.76zm14.532-.478l3.935.521-1.584%2011.95%204.559.605-.458%203.455-8.495-1.125zm16.948%2017.008c2.563%201.16%204.863-.613%205.686-2.432.83-1.836.65-4.752-1.954-5.929-2.506-1.133-4.834.396-5.733%202.386-.987%202.182-.43%204.877%202%205.975m5.15-11.547c4.364%201.973%205.944%206.789%204.162%2010.733-1.784%203.941-6.422%205.947-10.825%203.957-4.458-2.016-5.842-6.906-4.2-10.541.425-.939%201.034-1.93%201.923-2.774a8.073%208.073%200%20018.94-1.375m9.298%2018.526l-2.784-2.27%206.582-8.073%202.783%202.268-6.58%208.075zm-3.238%203.97l-2.783-2.267%202.254-2.767%202.785%202.268-2.256%202.766z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.news {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23FF75BA%22%2F%3E%3Cg%20transform%3D%22translate(39%2059)%22%3E%3Cellipse%20cx%3D%2262.76%22%20cy%3D%2232.51%22%20fill%3D%22%23FCE5CF%22%20rx%3D%2217.21%22%20ry%3D%2229.96%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M62.76%2064.48c-10.77%200-19.21-14-19.21-32s8.44-32%2019.21-32c10.77%200%2019.21%2014%2019.21%2032s-8.44%2032-19.21%2032zm0-59.93c-8.24%200-15.21%2012.81-15.21%2028s7%2028%2015.21%2028S78%2047.67%2078%2032.51c0-15.16-7-27.96-15.24-27.96z%22%2F%3E%3Cellipse%20cx%3D%2266.09%22%20cy%3D%2248.66%22%20fill%3D%22%23000%22%20rx%3D%227.51%22%20ry%3D%2211.48%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M66.09%2062.14c-5.33%200-9.51-5.92-9.51-13.48%200-7.56%204.18-13.47%209.51-13.47s9.51%205.92%209.51%2013.47c0%207.55-4.18%2013.48-9.51%2013.48zm0-23c-3%200-5.51%204.34-5.51%209.47%200%205.13%202.52%209.48%205.51%209.48%202.99%200%205.51-4.34%205.51-9.48%200-5.14-2.52-9.42-5.51-9.42v-.05z%22%2F%3E%3Cellipse%20cx%3D%2219.62%22%20cy%3D%2232.66%22%20fill%3D%22%23FCE5CF%22%20rx%3D%2217.21%22%20ry%3D%2229.96%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M19.62%2064.62c-10.77%200-19.21-14-19.21-32s8.44-32%2019.21-32c10.77%200%2019.22%2014%2019.22%2032s-8.44%2032-19.22%2032zm0-59.92c-8.24%200-15.21%2012.8-15.21%2028s7%2028%2015.21%2028%2015.22-12.8%2015.22-28-6.97-28-15.22-28z%22%2F%3E%3Cellipse%20cx%3D%2222.95%22%20cy%3D%2248.81%22%20fill%3D%22%23000%22%20rx%3D%227.51%22%20ry%3D%2211.48%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M23%2062.29c-5.33%200-9.51-5.92-9.51-13.48%200-7.56%204.13-13.47%209.51-13.47s9.51%205.91%209.51%2013.47c0%207.56-4.23%2013.48-9.51%2013.48zm0-23c-3%200-5.51%204.33-5.51%209.47%200%205.14%202.51%209.53%205.51%209.53s5.51-4.34%205.51-9.48c0-5.14-2.57-9.47-5.51-9.47v-.05z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M15.6%2065.1l1-3.84%2015%203.95-1%203.84zm3.26-10.95l1.64-3%2011.44-.6L23.31%2046l1.82-3.34%2013.64%207.44-1.65%203-11.12.69%208.32%204.43-1.82%203.33zm21.43-22.56l-2.43%201.87-2.13-2.77%208-6.14%202.12%202.76-2.41%201.86%207.34%209.56-3.15%202.42zM49.4%2021.1l3.69-1.47%202.16%205.43L60%2023.17l-2.16-5.42%203.69-1.47%205.75%2014.44-3.69%201.47-2.3-5.78-4.72%201.88%202.3%205.78-3.69%201.47zm19.77-6.36l8.59-.87.35%203.47-4.8.49.24%202.4%204.66-.47.35%203.46-4.66.48.27%202.65%204.8-.49.36%203.47-8.59.87zm26.08.71l3.23%201.12L101%2027.76h.05l3-9.25%203.59%201.25-5.09%2014.68-3.26-1.14-2.51-10.87-3%209-3.59-1.25zm19.23%208.18l7.06%205-2%202.86-4-2.78-1.38%202%203.83%202.7-2%202.85-3.83-2.69-1.53%202.18%204%202.77-2%202.86-7.06-5zm15.11%2012.51l-6.92%207.65%209.5-4.13%201.8%202.46-6.82%207.88%209.44-4.29L139%2049l-15%205.87-2-2.87%206.73-7.83-9.49%204.07-2.12-2.89%2010.08-12.46zM139%2063.22c.48-.23%201.39-.65%201-1.81a1.31%201.31%200%2000-1.57-.95c-.88.28-.94.74-1.32%203.78-.38%203.04-1.41%204.25-3.11%204.76-2.17.67-4.94.16-6.16-3.77C126.5%2061%20129%2059%20130.89%2058.44l.48-.15%201.16%203.77c-1.73.53-1.7%201.69-1.55%202.17a1.49%201.49%200%20001.87%201c1-.3%201-1%201.29-3.58.1-1.17.35-4.08%203.13-4.94%202.78-.86%205.22%201.35%206%203.84a5.58%205.58%200%2001-.44%204.54%204.71%204.71%200%2001-2.65%201.91L139%2063.22z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.bestseller {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23FF75BA%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16.32%2061.6L18%2057.12c.93-2.45%201.59-3.5%203.17-4.12a3.68%203.68%200%20012.73%200%203.51%203.51%200%20012.28%202.8%203.6%203.6%200%20014.29-1.12%204.52%204.52%200%20012.66%202.53c.61%201.76.38%202.78-.55%205.23l-1.73%204.66-14.53-5.5zm6.86-1.47l.5-1.31c.19-.51.59-1.57-.57-2-1.16-.43-1.48.58-1.69%201.15l-.5%201.32%202.26.84zm5.75%202.18l.66-1.75c.18-.47.7-1.84-.69-2.37s-1.73.78-2%201.37l-.66%201.75%202.69%201zM25%2043.19l5.22-6.87%202.78%202.1-3%203.85%202%201.46L34.79%2040l2.77%202.11-2.83%203.73%202.12%201.61%202.92-3.84%202.78%202.11-5.22%206.87zm19.26-13.37a1.42%201.42%200%2000-2-.36%201.31%201.31%200%2000-.36%201.8c.55.73%201%20.63%204%200s4.5-.07%205.58%201.38c1.36%201.81%201.82%204.6-1.48%207.06-3.59%202.7-6.24%201-7.44-.58l-.3-.4%203.16-2.37c1.08%201.44%202.16%201%202.56.72a1.49%201.49%200%2000.32-2.1c-.62-.82-1.29-.63-3.81%200-1.14.3-4%201.05-5.71-1.28s-.48-5.37%201.6-6.93a5.56%205.56%200%20014.42-1.11%204.71%204.71%200%20012.66%201.84l-3.2%202.33zm11.09-7.44l-2.85%201.11-1.27-3.24%209.39-3.67%201.27%203.25-2.84%201.1%204.39%2011.23-3.7%201.45zm19.77-3.78c-.13-.51-.36-1.48-1.57-1.36a1.29%201.29%200%2000-1.23%201.35c.09.92.53%201.07%203.43%202%202.9.93%203.89%202.26%204.08%204.06.23%202.26-.81%204.88-4.91%205.3-4.47.46-5.87-2.35-6.08-4.33v-.51l3.93-.4c.18%201.8%201.32%202%201.82%201.94a1.49%201.49%200%20001.3-1.65c-.1-1-.77-1.2-3.26-2-1.13-.33-3.94-1.14-4.24-4-.3-2.86%202.35-4.84%204.94-5.11a5.54%205.54%200%20014.36%201.32A4.69%204.69%200%200179%2018.2l-3.88.4zm12.15-4.44l8.5%201.49-.6%203.43-4.76-.83-.41%202.38%204.61.81-.61%203.43-4.62-.81-.45%202.63%204.75.83-.59%203.48-8.5-1.49zm17.09%204.31l3.6%201.67-5.07%2010.93%204.17%201.93-1.46%203.16-7.78-3.6zm14.5%208.03l3.08%202.5-7.62%209.34%203.56%202.91-2.2%202.7-6.68-5.41zM131%2037.83l5.06%207-2.83%202-2.88-3.83-1.95%201.42%202.74%203.79-2.82%202-2.75-3.79-2.16%201.58%202.83%203.92-2.82%202-5.06-7zm9.44%2015.23l1.61%204.64c.9%202.58.92%203.68.52%204.89a5.36%205.36%200%2001-3.38%203.19%204.71%204.71%200%2001-5.89-2.05l-3.62%205.72-1.48-4.28%203.56-5-4.76%201.57-1.25-3.6%2014.69-5.08zm-6.13%206.15l.46%201.33c.76%202.2%202.24%202%202.95%201.73%201.33-.46%201.65-1.66%201.15-3.11l-.47-1.37-4.09%201.42z%22%2F%3E%3Cpath%20fill%3D%22%23FF5400%22%20d%3D%22M121%2082.4c0%2013.61-9.09%2020.65-17.72%2027.23-8.63%206.58-20.28%2015.67-23.4%2020.67-3.12-5-14.82-14.08-23.44-20.67C47.82%20103.04%2038.72%2096%2038.72%2082.4S47%2058.54%2059%2058.54c10.76%200%2017.73%207.31%2020.85%2012.52C83%2065.85%2090%2058.54%20100.73%2058.54c12.05%200%2020.27%2010.24%2020.27%2023.86z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M79.88%20134.07l-1.7-2.71c-3.1-5-16.51-15.22-23-20.14-8.67-6.61-18.51-14.11-18.51-28.82%200-15%209.38-25.86%2022.31-25.86%2010.83%200%2017.63%206.7%2020.85%2011%203.22-4.26%2010-11%2020.85-11%2012.98%200%2022.32%2010.87%2022.32%2025.86%200%2014.71-9.83%2022.21-18.51%2028.82-6.44%204.92-19.85%2015.16-23%2020.14l-1.61%202.71zM59%2060.54c-10.78%200-18.31%209-18.31%2021.86s8.64%2019.29%2016.97%2025.6c8.55%206.53%2017.8%2013.77%2022.22%2018.94%204.42-5.17%2013.67-12.41%2022.22-18.94%208.33-6.31%2016.9-12.87%2016.9-25.6%200-12.73-7.53-21.86-18.31-21.86-11.34%200-17.51%208.84-19.13%2011.55L79.88%2075l-1.72-2.87C76.54%2069.38%2070.37%2060.54%2059%2060.54z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.limited {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23FF5400%22%2F%3E%3Cpath%20fill%3D%22%23FC8500%22%20d%3D%22M79.19%20116.82c-1.07-4.53-2-8.69-3-12.82-.45-1.77-1.08-3.5-1.7-5.22-2.59-7.13-7.39-12.18-14.6-14.58-5-1.66-10.19-2.77-15.3-4.12-.83-.22-1.69-.36-3.07-.66%203.69-.8%206.86-1.45%2010-2.21%202.11-.5%204.19-1.13%206.27-1.75%209.43-2.85%2015.21-9.25%2017.79-18.67%201.1-4%202-8.17%203-12.26.18-.76.35-1.53.6-2.66%201%204.34%201.89%208.3%202.82%2012.25.27%201.12.69%202.2%201%203.31%202.78%209.94%209.4%2015.93%2019.23%2018.52%204.64%201.23%209.33%202.3%2014.3%203.52-3.48.76-6.73%201.39-9.93%202.22a89.5%2089.5%200%2000-8.17%202.5A22.59%2022.59%200%200083.9%2098.87c-1.66%205.08-2.77%2010.33-4.13%2015.5-.18.7-.33%201.4-.58%202.45z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M79.19%20123.32l-1.46-6.16c-.32-1.33-.62-2.63-.92-3.91-.72-3.08-1.39-6-2.13-8.88A51.3%2051.3%200%200073%2099.29c-2.51-6.89-7.1-11.49-13.66-13.66-3.46-1.15-7.11-2.06-10.63-2.94-1.53-.38-3.06-.76-4.58-1.16-.52-.13-1-.24-1.72-.37l-1.28-.27-6.82-1.44L41.14%2078l3.3-.71c2.33-.51%204.54-1%206.7-1.5%202-.47%204-1.06%206.18-1.73%208.81-2.65%2014.31-8.42%2016.81-17.62.76-2.79%201.43-5.67%202.07-8.46.29-1.25.57-2.5.87-3.75.12-.51.24-1%20.37-1.62l1.69-7.46%202.29%2010c.68%203%201.32%205.79%202%208.62.14.58.33%201.17.54%201.8.21.63.31%201%20.45%201.45C87%2066.24%2092.92%2072%20102.56%2074.5c3.16.83%206.3%201.59%209.63%202.39%201.52.36%203.07.73%204.64%201.12l6.26%201.53-6.29%201.39-3.15.68c-2.33.5-4.54%201-6.73%201.53-2.91.75-5.54%201.56-8%202.46a21.07%2021.07%200%2000-13.59%2013.74c-1.14%203.48-2%207.13-2.91%2010.66-.39%201.59-.78%203.17-1.2%204.75-.11.45-.22.9-.34%201.45l-1.69%207.12zM48.27%2079.49l1.2.29c3.57.89%207.27%201.81%2010.85%203%207.47%202.48%2012.68%207.69%2015.53%2015.49a55.38%2055.38%200%20011.74%205.36c.57%202.24%201.1%204.47%201.64%206.78l.27-1.12c.89-3.59%201.8-7.3%203-10.88%202.5-7.56%207.63-12.82%2015.37-15.63%202.58-.94%205.29-1.77%208.3-2.54%201.19-.31%202.37-.59%203.57-.86-2.71-.65-5.31-1.28-7.94-2C91.18%2074.6%2084.35%2068%2081.51%2057.83c-.133-.44-.273-.88-.42-1.32-.21-.66-.43-1.33-.6-2-.46-1.95-.91-3.89-1.36-5.88-.65%202.82-1.32%205.73-2.09%208.57-2.77%2010.13-9.11%2016.8-18.85%2019.7-2.25.67-4.28%201.27-6.35%201.77l-3.57.82zM33.1%2033.9l2.9-2.67%208.12%208.9L47.56%2037l2.34%202.57-6.33%205.77zm10.71-8.72l3.38-2.09%208.15%2013.23L52%2038.41zm9.92-5.91l4.9-1.42%205.82%209%20.07-10.67%204.92-1.43%204.34%2014.92-3.51%201-3.09-11.24h-.05l.07%2012.15-2.52.73L58.23%2022v.05l3.37%2011.14-3.51%201zm23.32-4.86l4-.05.21%2015.54-4%20.05zm11.78%204.07l-3-.54.61-3.43%209.92%201.77-.61%203.43-3-.54L90.63%2031l-3.91-.7zm13.05-.48l7.93%203.4-1.37%203.2-4.44-1.86-1%202.22%204.3%201.85L106%2030l-4.3-1.85-1.06%202.45%204.44%201.91-1.37%203.2-7.93-3.4zM116%2024.84l4%203.23c1.35%201.1%203.77%203.05%203.52%206.57a7.93%207.93%200%2001-1.93%204.65c-2.66%203.3-6.54%204.76-11.13%201.05l-4.23-3.42L116%2024.84zm-4.5%2011.86l1.32%201.07c2.31%201.86%204.25.79%205.64-.92a5.58%205.58%200%20001.22-2.72%203.29%203.29%200%2000-1.46-3L116.88%2030l-5.38%206.7zm-68.08%2077.66l6.43%205.75-2.32%202.6-3.6-3.22-1.61%201.8%203.49%203.12-2.32%202.59-3.49-3.11-1.78%202%203.6%203.21-2.32%202.6-6.44-5.75zm8.01%207.16l4.57%202.32c1.56.79%204.33%202.19%204.82%205.69a7.87%207.87%200%2001-.9%204.95c-1.92%203.79-5.4%206-10.67%203.36l-4.85-2.45%207.03-13.87zm-1.89%2012.55l1.51.77c2.65%201.33%204.32-.12%205.32-2.09a5.45%205.45%200%2000.62-2.91%203.27%203.27%200%2000-2.05-2.64l-1.54-.77-3.86%207.64zm16.35-6.16l3.86%201L66%20144l-3.86-1zm8.6%205.19l-3.07-.19.22-3.48%2010.07.63-.22%203.48-3-.19-.75%2012-4-.24zm9.17-3.36l3.94-.46%201.8%2015.43-3.94.46zm13.73-3.38A8.07%208.07%200%201192.63%20137a8.89%208.89%200%2001-.6-3.32%208.08%208.08%200%20015.36-7.32zm4.51%2011.81c2.63-1%203-3.86%202.31-5.73-.69-1.87-2.9-3.83-5.57-2.82a4.59%204.59%200%20003.26%208.55zm4.59-15.48l2.64-2.17%2010.87%203.72v-.06l-6.3-7.4%202.93-2.41%209.87%2012-2.66%202.19-10.6-3.56%206.07%207.21-2.93%202.42z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.mto {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23FCE5CF%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M27.15%2040.21l3.54-3.67%209.5%204.89L35%2032.1l3.56-3.68%2011.17%2010.8-2.54%202.63-8.29-8.18h-.06l6.08%2010.5-1.82%201.89-10.7-5.73v.06l8.45%208L38.31%2051zM55%2033.94l.22%202.38-3.84%201.84-1.12-16.72%202.83-1.34%2012.26%2011.37-3.88%201.85-1.65-1.7L55%2033.94zm-.38-3.31l2.94-1.4-3.73-4.11.79%205.51zm10.59-14.92l5.11-.64c1.73-.21%204.81-.6%207.17%202a7.93%207.93%200%20012%204.62c.53%204.21-1.11%208-7%208.75l-5.4.67-1.88-15.4zm5.44%2011.47l1.69-.18c2.94-.37%203.52-2.52%203.24-4.71a5.45%205.45%200%2000-1.11-2.76%203.27%203.27%200%2000-3.18-1l-1.7.22%201.06%208.43zm15.06-12.67l8.53%201.3-.53%203.44-4.77-.72-.36%202.38%204.63.71-.53%203.44-4.63-.7-.4%202.64%204.77.73-.52%203.45-8.53-1.3zM109%2025.07l-2.66-1.52%201.73-3%208.75%205-1.74%203-2.64-1.51-6%2010.46-3.44-2zm18.34%209.23a8.06%208.06%200%2011-11.62-.19%209%209%200%20012.81-1.86%208.07%208.07%200%20018.81%202.05zm-9.06%208.8c1.94%202%204.74%201.24%206.18-.14a4.39%204.39%200%2000.38-6.23%204.31%204.31%200%2000-6.2.08%204.36%204.36%200%2000-.36%206.29zm-63.67%2079.58a8.06%208.06%200%2011-11.25%202.94%208.58%208.58%200%20012.21-2.55%208.08%208.08%200%20019.04-.39zm-6.38%2010.92c2.42%201.43%204.9-.08%205.91-1.8a4.39%204.39%200%2000-1.29-6.11%204.59%204.59%200%2000-4.62%207.91zm15.1-6.23l4.79%201.1c2.66.61%203.61%201.17%204.42%202.15a5.4%205.4%200%2001.91%204.57%204.71%204.71%200%2001-4.86%203.9l2.93%206.11-4.42-1-2.38-5.69-1.12%204.89-3.71-.85%203.44-15.18zm2%208.46l1.37.32c2.27.52%202.86-.85%203-1.59.32-1.37-.53-2.27-2-2.62l-1.41-.32-.96%204.21zm10.94-5.68l5.13-.31c1.74-.1%204.84-.29%207%202.48a8%208%200%20011.72%204.74c.25%204.23-1.63%207.92-7.52%208.28l-5.43.33-.9-15.52zM81%20142l1.7-.11c3-.17%203.67-2.28%203.54-4.48a5.56%205.56%200%2000-.93-2.83%203.26%203.26%200%2000-3.1-1.24l-1.72.1L81%20142zm10.8-13.42l8.19-2.73%201.1%203.3-4.58%201.53.76%202.29%204.45-1.48%201.1%203.31-4.44%201.48.84%202.53%204.58-1.53%201.1%203.3-8.18%202.74zm10.42-3.67l4.14-2.65c2.3-1.47%203.36-1.75%204.63-1.64a5.41%205.41%200%20013.9%202.54%204.73%204.73%200%2001-.62%206.21l6.41%202.18-3.83%202.45-5.73-2.3%202.7%204.22-3.2%202.05-8.4-13.06zm7.41%204.53l1.18-.75c2-1.26%201.41-2.65%201-3.28-.76-1.19-2-1.22-3.29-.39l-1.22.78%202.33%203.64z%22%2F%3E%3Cpath%20fill%3D%22%23FF75BA%22%20d%3D%22M84.34%2077.55a18.24%2018.24%200%2000.48-3V50.71c0-3.91%201.24-5.67%203.94-5.62%202.7.05%203.85%201.83%203.85%205.8v23.23c0%201.07.1%202.15.15%203.23l1%20.21a10.83%2010.83%200%2000.76-2.56c.07-4.48%200-9%200-13.45%200-3.21%201.33-4.8%203.81-4.82%202.48-.02%203.91%201.61%203.92%204.76%200%2011.3.19%2022.62%200%2033.92-.26%2012.48-9%2021.73-21.39%2023-11.22%201.17-22.27-6.79-25-18.09a21.26%2021.26%200%2001-.55-4.84c-.06-7.94-.05-15.89%200-23.84%200-3%201.05-3.64%203.79-2.59%203.25%201.25%204.14%204.08%204.33%207.11.2%203.25%200%206.52.1%209.78.074.893.231%201.777.47%202.64h1a31.4%2031.4%200%2000.37-3.33c0-11.62-.05-23.23.09-34.84a7%207%200%20011.81-4.5%203.93%203.93%200%20013.86-.18%205.85%205.85%200%20012%204c.18%208.25.08%2016.5.11%2024.75.066%201.008.2%202.01.4%203h1a22%2022%200%2000.46-3.2V45.55c0-3.6%201.36-5.34%204-5.26%202.64.08%203.8%201.72%203.81%205.19v28.73c0%201%20.13%202.09.2%203.14l1.23.2z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M85.79%2078c.89-4.78.56-9.71.56-14.56v-7.5a43.8%2043.8%200%2001.11-7c.17-1.06.53-2.14%201.69-2.34a2.19%202.19%200%20012.45%201c.85%201.59.55%203.8.55%205.52v7.41c0%205.61-.15%2011.24.15%2016.83a1.54%201.54%200%20001.11%201.45l1%20.2a1.54%201.54%200%20001.84-1c.34-.831.591-1.696.75-2.58.045-.81.045-1.62%200-2.43V62c0-1%200-2.51.79-3.32a2.33%202.33%200%20013.74%201.16c.28%201.513.35%203.058.21%204.59v5.49c0%207.48.09%2015%200%2022.45a35.85%2035.85%200%2001-.76%208.33%2021.75%2021.75%200%2001-2.75%206.4%2022.26%2022.26%200%2001-25.61%208.67A22.79%2022.79%200%200160%20106.31a21%2021%200%2001-3-7.67c-.55-3.45-.26-7.11-.27-10.59V75.64a23.91%2023.91%200%2001.1-5.08c0-.09.26-.55.09-.44.29-.17%201.12.18%201.4.28%203%201.06%203.48%203.95%203.6%206.76.08%202%200%203.91%200%205.86a24.87%2024.87%200%2000.6%206A1.52%201.52%200%200064%2090.08h1a1.56%201.56%200%20001.5-1.5c.66-5.21.37-10.53.37-15.78V53.14a16.92%2016.92%200%2001.18-3.83c.34-1.35%201.34-3.24%203.07-2.4a3.5%203.5%200%20011.3%202.07%2015.3%2015.3%200%2001.2%203.77v7.92c0%205.74-.41%2011.61.45%2017.29A1.51%201.51%200%200073.63%2079h1a1.51%201.51%200%20001.45-1.1c.88-5.33.53-10.83.53-16.23s-.19-11%200-16.49c0-1.3.28-3.07%201.82-3.34a2.23%202.23%200%20012.75%201.51%209.34%209.34%200%2001.26%202.89V58.9c0%206.15-.24%2012.36.21%2018.5a1.55%201.55%200%20001.5%201.5l1.18.15c1.91.24%201.89-2.76%200-3l-1.18-.15%201.5%201.5c-.45-6.14-.21-12.35-.21-18.5v-9.41c0-2.5.35-5.32-.67-7.68A5.34%205.34%200%200075%2040.59c-1.38%201.68-1.41%203.94-1.42%206v19.82a65%2065%200%2001-.43%2010.72L74.62%2076h-1l1.44%201.1a57%2057%200%2001-.35-8.57v-9.16c0-3.06%200-5.94-.09-8.91%200-2.19-.73-4.62-2.6-6a5.25%205.25%200%2000-5.37-.07c-1.83%201.17-2.61%203.89-2.71%205.93-.29%205.94-.09%2012-.09%2017.91v10a80.48%2080.48%200%2001-.37%2010.3L65%2087h-1l1.45%201.1c-.94-4-.3-8.11-.6-12.17-.21-2.85-1-5.65-3.48-7.39-1.78-1.27-5.11-2.46-6.75-.35a5.83%205.83%200%2000-.87%203.64v19.12c0%203.81-.1%207.6%201.07%2011.28a25.93%2025.93%200%200010.87%2013.92%2024.71%2024.71%200%200038-19.42c.29-4%20.17-8.1.18-12.12V65.4a36.3%2036.3%200%2000-.16-5.62%205.21%205.21%200%2000-5-4.62%205.06%205.06%200%2000-5.34%204%2024.24%2024.24%200%2000-.27%205.52v9.46a9%209%200%2001-.7%202.92l1.84-1-1-.2%201.1%201.44c-.34-5.62-.2-11.3-.19-17.01v-8.4c0-2%200-4.14-1-5.91a5.34%205.34%200%2000-8-1%207.24%207.24%200%2000-1.73%204.83c-.18%202.79%200%205.62%200%208.41v9.44a52.38%2052.38%200%2001-.46%209.54c-.42%201.8%202.47%202.65%202.83.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.oos {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23FC8500%22%2F%3E%3Cg%20transform%3D%22translate(40%2039)%22%3E%3Ccircle%20cx%3D%2239.89%22%20cy%3D%2240.33%22%20r%3D%2237.78%22%20fill%3D%22%23FF5400%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M39.89%2080.11C17.92%2080.11.11%2062.3.11%2040.33.11%2018.36%2017.92.55%2039.89.55c21.97%200%2039.78%2017.81%2039.78%2039.78-.022%2021.96-17.82%2039.758-39.78%2039.78zm0-75.56c-19.76%200-35.78%2016.02-35.78%2035.78s16.02%2035.78%2035.78%2035.78%2035.78-16.02%2035.78-35.78C75.648%2020.578%2059.642%204.572%2039.89%204.55z%22%2F%3E%3Cellipse%20cx%3D%2248.19%22%20cy%3D%2252.14%22%20fill%3D%22%23000%22%20rx%3D%223.78%22%20ry%3D%228%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M52.71%2052.14c0%205-1.94%208.74-4.52%208.74-2.58%200-4.52-3.76-4.52-8.74s2-8.74%204.52-8.74c2.52%200%204.52%203.84%204.52%208.74zm-1.47%200c0-4.28-1.61-7.27-3-7.27s-3%203-3%207.27%201.61%207.27%203%207.27%203-2.99%203-7.27z%22%2F%3E%3Cellipse%20cx%3D%2231.38%22%20cy%3D%2252.14%22%20fill%3D%22%23000%22%20rx%3D%223.78%22%20ry%3D%228%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M35.9%2052.14c0%205-1.94%208.74-4.52%208.74-2.58%200-4.52-3.76-4.52-8.74s2-8.74%204.52-8.74c2.52%200%204.52%203.84%204.52%208.74zm-1.47%200c0-4.28-1.6-7.27-3.05-7.27-1.45%200-3%203-3%207.27s1.6%207.27%203%207.27%203.05-2.99%203.05-7.27zM58.64%2031a20%2020%200%2000-38.53%200l-.34%201.24h5l.22-.67a15.07%2015.07%200%200128.67%200l.22.67h5L58.64%2031z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M41.32%2026.58a8.06%208.06%200%2011-1.81%2011.48%208.76%208.76%200%2001-1.45-3%208.07%208.07%200%20013.26-8.48zm7.45%2010.21c2.28-1.65%201.89-4.53.72-6.15a4.39%204.39%200%2000-6.11-1.25%204.32%204.32%200%2000-.78%206.16%204.36%204.36%200%20006.17%201.24zM58%2018.13l2.87%208.94c.32%201%201%202.8%202.82%202.2%201.82-.6%201.35-2.24%201-3.42l-2.87-8.93%203.78-1.22%202.86%208.94c.8%202.48.61%203.75%200%205a5.8%205.8%200%2001-3.63%202.93%206.22%206.22%200%2001-4.83-.2c-1.65-.95-2.24-1.91-2.94-4.09l-2.87-8.94L58%2018.13zM74.93%2018l-3.06.15-.17-3.48%2010.06-.5.17%203.48-3%20.15.6%2012-4%20.2zM105%2019.07a8.07%208.07%200%2011-10.73%204.49%208.91%208.91%200%20011.84-2.83%208.08%208.08%200%20018.89-1.66zm-4.78%2011.71c2.6%201.07%204.84-.77%205.61-2.61.77-1.84.5-4.78-2.14-5.87a4.33%204.33%200%2000-5.66%202.57%204.36%204.36%200%20002.23%205.91h-.04zm18.12-4.07l6.57%205.36-2.2%202.7-3.63-3-1.67%202.05%203.49%202.86-2.2%202.7-3.5-2.86-3.75%204.59-2.94-2.4zm-67.5%2099.35a1.41%201.41%200%2000-.34-2%201.3%201.3%200%2000-1.82.25c-.51.77-.27%201.16%201.36%203.76%201.63%202.6%201.55%204.22.55%205.72-1.26%201.89-3.73%203.25-7.16%201-3.74-2.5-3-5.56-1.92-7.22l.28-.42%203.28%202.19c-1%201.51-.25%202.39.17%202.67a1.51%201.51%200%20002.09-.4c.57-.86.17-1.43-1.26-3.6-.67-1-2.32-3.39-.69-5.82s4.9-2.23%207.06-.78a5.51%205.51%200%20012.52%203.8%204.65%204.65%200%2001-.85%203.12l-3.27-2.27zm8.21%203.12l-2.86-1.08%201.23-3.26%209.43%203.57-1.24%203.26-2.85-1.08-4.27%2011.27-3.71-1.4zm16.32.17a8.07%208.07%200%2011-8.89%207.5%208.74%208.74%200%2001.9-3.25%208.09%208.09%200%20017.99-4.25zM74.31%20142c2.81.25%204.39-2.18%204.57-4.16.18-1.98-.95-4.71-3.8-5a4.59%204.59%200%2000-.77%209.12v.04zm28.14-6.28a8%208%200%2001-6.1%207.86%208.07%208.07%200%2011-4-15.62%208%208%200%20019.18%204.06l-4%201a4%204%200%2000-4.31-1.7%204.31%204.31%200%2000-2.91%205.43%204.36%204.36%200%20005.19%203.44%204.15%204.15%200%20003-3.46l3.95-1.01zm-.65-10.58l3.35-2.12%203.73%205.92v-8.25l3.51-2.22-.21%209.3%208.82%203.63-3.92%202.48-7.18-3.42%203.58%205.68-3.35%202.12z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.play {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23FCE5CF%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M18.12%2056.26l2.2-4.59c1.24-2.59%202.1-3.37%203.09-3.83a5.29%205.29%200%20014.5.13%205.61%205.61%200%20013%203.24c.36%201.36.3%202.49-.74%204.67l-.75%201.55%204.4%202.11L32.14%2063l-14.02-6.74zm8.12-.33l.7-1.46c.33-.68%201.07-2.23-.62-3s-2.41.8-2.78%201.58l-.63%201.32%203.33%201.56zM27%2040.16l3.26-3.67c1.81-2%202.76-2.61%204-2.84A5.37%205.37%200%200138.74%2035a4.7%204.7%200%20011.09%206.13l6.76.37-3%203.38-6.14-.64%203.75%203.33-2.53%202.84L27%2040.16zm8.36%202.35l.94-1c1.54-1.75.63-2.93.06-3.43-1-.93-2.25-.62-3.27.52l-1%201.08%203.27%202.83zm4.8-15.38l7.21-4.75%201.92%202.91-4%202.66%201.33%202%203.91-2.58%201.92%202.91-3.95%202.6%201.5%202.23%204-2.66%201.92%202.91-7.21%204.75zM61%2021.51c-.25-.47-.7-1.36-1.85-1a1.29%201.29%200%2000-.88%201.6c.3.88.76.92%203.81%201.18%203.05.26%204.3%201.29%204.9%203%20.75%202.14.35%204.93-3.53%206.29-4.24%201.48-6.26-.92-6.92-2.8l-.17-.48L60%2028c.6%201.7%201.75%201.63%202.23%201.46a1.5%201.5%200%2000.93-1.91c-.34-1-1-1-3.63-1.15-1.17-.05-4.09-.19-5-2.94-.91-2.75%201.16-5.26%203.61-6.12a5.56%205.56%200%20014.55.28%204.68%204.68%200%20012%202.55L61%2021.51zm15.23-2.89c-.13-.52-.34-1.49-1.55-1.39a1.3%201.3%200%2000-1.26%201.33c.08.92.51%201.07%203.4%202.09%202.89%201.02%203.85%202.33%204%204.13.19%202.26-.9%204.86-5%205.21-4.47.38-5.83-2.46-6-4.44v-.51l3.93-.33c.15%201.8%201.29%202%201.79%202a1.5%201.5%200%20001.38-1.62c-.08-1-.75-1.22-3.22-2-1.13-.35-3.92-1.2-4.17-4.11s2.44-4.8%205-5a5.53%205.53%200%20014.33%201.4%204.67%204.67%200%20011.28%203l-3.91.24zm20.3-2.73l4.8%201.66c2.72.95%203.59%201.71%204.15%202.65a5.26%205.26%200%2001.38%204.48A5.63%205.63%200%2001103%2028c-1.31.51-2.45.58-4.73-.21l-1.63-.57L95%2031.81l-3.6-1.24%205.13-14.68zm1.24%208l1.52.53c.72.25%202.35.81%203-.95.65-1.76-1.07-2.31-1.88-2.59L99%2020.43l-1.23%203.46zm15.52-.96l3.3%202.21-6.71%2010%203.83%202.56-1.94%202.9-7.12-4.77zm4.63%2020.45l-2.23.86-2.8-3.24%2015.82-5.48%202%202.36-7.68%2014.85-2.82-3.25%201.2-2-3.49-4.1zm3.08-1.24l2.14%202.46%203-4.69-5.14%202.23zm8.75%2012.05l7-8.41%201.84%203.89-4.65%204.75%206.63-.55%201.82%203.85-10.9.06-5.11%202.41-1.7-3.59z%22%2F%3E%3Cg%20transform%3D%22translate(38%2045)%22%3E%3Cpath%20fill%3D%22%23F7B0E0%22%20d%3D%22M35.72%2045.12c.74.08%201.83.12%202.88.33%201.2.24%201.47.73%201.16%201.92a8.91%208.91%200%2001-.77%202c-1.79%203.28-3.5%206.62-5.47%209.79a51.65%2051.65%200%2001-9.2%2011.12A12.44%2012.44%200%201110.23%2050a32.26%2032.26%200%20016.65-2.37%2063.91%2063.91%200%200114.23-2c1.43-.11%202.89-.32%204.61-.51z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M16.15%2074.81a13.63%2013.63%200%2001-8.54-2.93%2014.23%2014.23%200%2001-5.35-12.26%2013.76%2013.76%200%20017.26-11%2029.09%2029.09%200%20016.28-2.3l.68-.19A65.33%2065.33%200%200131%2044.12c.9%200%201.81-.15%202.87-.27l1.65-.19h.31l.67.06a19%2019%200%20012.35.29A3%203%200%200141%2045.25a3.08%203.08%200%2001.2%202.49%2010.1%2010.1%200%2001-.9%202.32L39%2052.49c-1.32%202.46-2.69%205-4.2%207.44a53.59%2053.59%200%2001-9.46%2011.43%2013.62%2013.62%200%2001-9.19%203.45zM35.72%2046.6l-1.47.17c-1.06.12-2.06.24-3.06.29a62.64%2062.64%200%2000-13.9%202l-.69.19a26.76%2026.76%200%2000-5.66%202%2010.83%2010.83%200%2000-5.74%208.62%2011.07%2011.07%200%20004.26%209.71%2010.89%2010.89%200%200013.87-.4%2050.44%2050.44%200%20008.94-10.8c1.46-2.36%202.81-4.86%204.11-7.28.44-.82.87-1.63%201.32-2.45a7.57%207.57%200%2000.64-1.65.3.3%200%20010-.1%2018.76%2018.76%200%2000-2-.24l-.62-.06z%22%2F%3E%3Cpath%20fill%3D%22%23F7B0E0%22%20d%3D%22M53.47%2044.45a52.57%2052.57%200%200115.11%201.28%2024.88%2024.88%200%20015.14%201.59A12.27%2012.27%200%200179%2064.9c-2.68%204.41-6.72%206.38-11.9%206-3.5-.25-6.17-2.1-8.64-4.38A67.3%2067.3%200%200147.71%2053.3c-1-1.49-2-2.91-3-4.4a9.2%209.2%200%2001-1-2.15c-.34-1.07%200-1.62%201-1.86a16.57%2016.57%200%20013.06-.42c1.96-.07%203.83-.02%205.7-.02z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M68.3%2072.43h-1.26c-4.17-.29-7.17-2.58-9.54-4.77a68.44%2068.44%200%2001-11-13.53c-.45-.7-1-1.41-1.42-2.09-.42-.68-1.08-1.56-1.6-2.35a10.39%2010.39%200%2001-1.11-2.49%203%203%200%2001.11-2.43%202.9%202.9%200%20012-1.32%2018.64%2018.64%200%20013.33-.45h5.59a53.9%2053.9%200%200115.47%201.31A26.79%2026.79%200%200174.33%2046a13.7%2013.7%200%20017.39%208.43%2013.91%2013.91%200%2001-1.42%2011.25%2013.39%2013.39%200%2001-12%206.75zM45.18%2046.31a8%208%200%2000.78%201.8c.47.74%201%201.45%201.5%202.2.5.75%201%201.44%201.48%202.19a65.87%2065.87%200%200010.56%2013c2%201.85%204.48%203.77%207.75%204%204.71.33%208.16-1.41%2010.53-5.32a11%2011%200%20001.13-8.86%2010.8%2010.8%200%2000-5.81-6.62%2025.06%2025.06%200%2000-4.84-1.49%2051%2051%200%2000-14.69-1.24h-5.66a14.59%2014.59%200%2000-2.73.34z%22%2F%3E%3Cpath%20fill%3D%22%23F7B0E0%22%20d%3D%22M46.92%2044.13c-.66-.09-1.64-.16-2.59-.38s-1.2-.69-.94-1.6a14.1%2014.1%200%20011.09-2.81c1.42-2.7%202.82-5.42%204.41-8a56.41%2056.41%200%20019.84-12.21%2012.39%2012.39%200%200117.82%201.23%2012%2012%200%20012.25%2012.08%2012.28%2012.28%200%2001-8%207.91%2055.19%2055.19%200%2001-14%203c-3.17.24-6.36.49-9.88.78z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M46.88%2045.61h-.16l-.58-.07a18.49%2018.49%200%2001-2.14-.36%202.54%202.54%200%2001-2-3.43%2015.9%2015.9%200%20011.21-3.1l.6-1.14c1.21-2.3%202.46-4.68%203.86-7A57.75%2057.75%200%200157.73%2018a13.85%2013.85%200%200119.94%201.37%2013.42%2013.42%200%20012.53%2013.48%2013.71%2013.71%200%2001-8.91%208.83%2057%2057%200%2001-14.35%203.07c-2.18.19-4.37.37-6.67.55l-3.39.31zm-2-3.25c.54.11%201.1.17%201.61.23l.49.06L50%2042.4l6.66-.55a54.34%2054.34%200%200013.61-2.91%2010.73%2010.73%200%20007.1-7%2010.5%2010.5%200%2000-2-10.67%2010.92%2010.92%200%2000-7.71-3.9%2010.71%2010.71%200%2000-8%202.8%2054.68%2054.68%200%2000-9.57%2011.9c-1.35%202.19-2.58%204.53-3.77%206.79L45.78%2040a12.43%2012.43%200%2000-.92%202.36h.02z%22%2F%3E%3Cpath%20fill%3D%22%23F7B0E0%22%20d%3D%22M29.45%2044.8a51.35%2051.35%200%2001-15-1.31%2027.44%2027.44%200%2001-5.51-1.84c-4.37-2-7.2-7.57-6.46-12.35.84-5.49%203.89-9.12%209.25-10.61A12%2012%200%200123%2021.27a57.58%2057.58%200%200111%2012.51c1.36%202%202.77%204%204.08%206a12.4%2012.4%200%20011.29%202.73c.39%201.12.1%201.61-1.05%201.9a13%2013%200%2001-2.69.4c-2.04.03-4.11-.01-6.18-.01z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M26.3%2046.38a55.74%2055.74%200%2001-12.2-1.45A29.36%2029.36%200%20018.29%2043%2013.65%2013.65%200%20011%2029.08c.94-6.11%204.51-10.19%2010.32-11.8a13.52%2013.52%200%200112.6%202.85A58.51%2058.51%200%200135.25%2033l1.44%202c.88%201.27%201.79%202.58%202.66%203.91a14.13%2014.13%200%20011.44%203%202.64%202.64%200%2001-2.09%203.81c-.982.252-1.987.4-3%20.44h-6.19c-1.06.18-2.12.22-3.21.22zM15%2019.7a11.26%2011.26%200%2000-2.94.41c-4.74%201.32-7.42%204.4-8.19%209.42a10.72%2010.72%200%20005.62%2010.79%2026.3%2026.3%200%20005.23%201.73%2049.62%2049.62%200%200014.6%201.28h6.27A11.11%2011.11%200%200038%2043a11.15%2011.15%200%2000-1.14-2.4c-.83-1.29-1.73-2.58-2.6-3.84l-1.45-2.1A55.84%2055.84%200%200022%2022.4a10.92%2010.92%200%2000-7-2.7z%22%2F%3E%3Cpath%20fill%3D%22%23F7B0E0%22%20d%3D%22M52.74%2014.1a29.39%2029.39%200%2001-1.33%207.61A68.23%2068.23%200%200146%2035.16c-.89%201.72-1.68%203.5-2.59%205.22a6.24%206.24%200%2001-1.2%201.47%201.1%201.1%200%2001-1.81%200%2014%2014%200%2001-1.92-2.42c-1.91-3.13-3.89-6.23-5.58-9.47a48.26%2048.26%200%2001-4.93-13.79%2012.37%2012.37%200%20015.35-12%2012.17%2012.17%200%200112.51-.8%2012%2012%200%20016.91%2010.73z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M41.23%2043.8a2.68%202.68%200%2001-1.9-.92%2016.31%2016.31%200%2001-2.12-2.67c-.36-.6-.73-1.2-1.1-1.8-1.54-2.5-3.14-5.09-4.53-7.76a49.82%2049.82%200%2001-5.07-14.21%2013.87%2013.87%200%20016-13.53%2013.67%2013.67%200%200114-.87%2013.5%2013.5%200%20017.78%2012v.1a30.54%2030.54%200%2001-1.38%208%2068.86%2068.86%200%2001-5.57%2013.75c-.41.79-.81%201.62-1.2%202.42-.39.8-.91%201.87-1.39%202.8a7.59%207.59%200%2001-1.49%201.85%202.8%202.8%200%2001-2.03.84zm-1-40.33a11.54%2011.54%200%2000-6.19%201.93%2010.92%2010.92%200%2000-4.68%2010.51%2046.8%2046.8%200%20004.78%2013.38c1.35%202.57%202.91%205.12%204.43%207.58l1.11%201.81c.452.72.978%201.39%201.57%202a4.47%204.47%200%2000.8-1c.47-.88.91-1.81%201.35-2.71.44-.9.8-1.67%201.23-2.5A66.58%2066.58%200%200050%2021.32a28.74%2028.74%200%20001.28-7.21%2010.56%2010.56%200%2000-6.15-9.44%2010.94%2010.94%200%2000-4.89-1.2h-.01z%22%2F%3E%3Cpath%20fill%3D%22%23F7B0E0%22%20d%3D%22M55.35%2074.93a12.32%2012.32%200%2001-10.93%2012.21A12.46%2012.46%200%200130.5%2074.05a34.87%2034.87%200%20012.41-10c1.17-3.08%202.56-6.07%203.9-9.08a97.85%2097.85%200%20012.75-5.64%209.83%209.83%200%20011.6-2%201%201%200%20011.56%200A25.19%2025.19%200%200145%2050.14c1.54%202.43%203.09%204.86%204.46%207.39a53.33%2053.33%200%20015.87%2015.63c.01.146.01.294%200%20.44.02.4.02.88.02%201.33z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M42.87%2088.71a13.85%2013.85%200%2001-9.5-3.82A13.71%2013.71%200%200129%2074a36.12%2036.12%200%20012.5-10.44c1-2.68%202.21-5.32%203.36-7.87l.58-1.29a96.27%2096.27%200%20012.79-5.73A10.83%2010.83%200%200140%2046.41l.1-.11a2.53%202.53%200%20011.9-.84%202.5%202.5%200%20011.85.89%2025.84%2025.84%200%20012.37%203l.14.23c1.49%202.34%203%204.76%204.38%207.25a54%2054%200%20016%2016.06%204%204%200%2001.09.68v1.35A13.78%2013.78%200%200144.61%2088.6a14.52%2014.52%200%2001-1.74.11zm-.94-40.07A6.66%206.66%200%200040.86%2050a87.12%2087.12%200%2000-2.7%205.54l-.59%201.3c-1.13%202.51-2.3%205.11-3.28%207.7a32.85%2032.85%200%2000-2.32%209.6%2011%2011%200%201021.9.8v-1.33a1.22%201.22%200%20000-.17%2051.37%2051.37%200%2000-5.71-15.22c-1.3-2.4-2.81-4.78-4.27-7.07l-.15-.23a20.25%2020.25%200%2000-1.81-2.28z%22%2F%3E%3Ccircle%20cx%3D%2241.35%22%20cy%3D%2245.06%22%20r%3D%229.99%22%20fill%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.badge.preorder {
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20160%20160%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2279.88%22%20cy%3D%2279.88%22%20r%3D%2279.86%22%20fill%3D%22%23F7B0E0%22%2F%3E%3Cpath%20fill%3D%22%23FF75BA%22%20d%3D%22M44.41%20122.88c.02.118.048.235.08.35a9.75%209.75%200%2000.84%202.49c2.64%204.84%2011.7%205%2016.42%205.07%206.4%200%2012.79-.32%2019.19-.42%207.59-.13%2015.88.5%2023.3-1.19%206.92-1.59%2012.5-4.66%2012.54-12.7%200-3.11-.78-5.92-1.32-8.91-.61-3.36-.2-7-.49-10.44-.16-1.78-3.1-20.35-5.08-19.87C104%2078.7%20101.14%2083.64%2096%2086.2c-6%203.06-13.75%203.8-20.42%202.85a23.91%2023.91%200%2001-6.28-1.68%2041.61%2041.61%200%2001-5.3-3.06%2096.07%2096.07%200%2000-11.69-6.2%204.31%204.31%200%2000-2.14-.52c-1.9.22-2.58%202.57-2.82%204.46-.65%205.08-.54%2010.65-1.63%2015.63-1.78%207.97-3.12%2017.19-1.31%2025.2z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M104.45%20132.17h-49c-7.88%200-14.3-6.86-14.3-15.29a166.35%20166.35%200%20014.66-36.63C52.09%2055.63%2063.89%2042.61%2080%2042.61c16.06%200%2027.86%2013%2034.13%2037.64a166.35%20166.35%200%20014.66%2036.63c-.04%208.43-6.46%2015.29-14.34%2015.29zM80%2046.61c-34.37%200-34.79%2069.56-34.79%2070.27%200%206.23%204.62%2011.29%2010.3%2011.29h49c5.68%200%2010.3-5.06%2010.3-11.29-.06-.71-.48-70.27-34.81-70.27z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M80.19%2092.36h-1.16c-17.91-.62-30.11-15.22-30.62-15.85L51.5%2074c.12.13%2011.61%2013.85%2027.7%2014.38%2010.1.37%2020-4.53%2029.38-14.49l2.91%202.75c-9.87%2010.42-20.4%2015.72-31.3%2015.72z%22%2F%3E%3Cpath%20fill%3D%22%23FF5400%22%20d%3D%22M94.1%20105c0%204.74-3.17%207.19-6.18%209.49s-7.08%205.46-8.16%207.2c-1.09-1.74-5.17-4.91-8.17-7.2s-6.17-4.75-6.17-9.49%202.87-8.31%207.07-8.31a8.63%208.63%200%20017.27%204.31A8.59%208.59%200%200187%2096.64c4.22%200%207.1%203.56%207.1%208.36z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M79.76%20125.42l-1.7-2.72c-1-1.53-5.67-5.13-7.68-6.67-3.1-2.37-7-5.31-7-11.08%200-6%203.81-10.31%209.07-10.31a10.06%2010.06%200%20017.27%203.13A10.05%2010.05%200%200187%2094.64c5.26%200%209.08%204.33%209.08%2010.31%200%205.77-3.86%208.71-7%2011.08-1.84%201.4-6.73%205.14-7.69%206.67l-1.63%202.72zm-7.27-26.78c-3%200-5.07%202.59-5.07%206.31%200%203.72%202.61%205.79%205.38%207.9a78.4%2078.4%200%20017%205.74%2079.5%2079.5%200%20016.95-5.74c2.77-2.11%205.39-4.11%205.39-7.9S90%2098.64%2087%2098.64a6.7%206.7%200%2000-5.53%203.36l-1.71%202.86L78%20102a6.7%206.7%200%2000-5.51-3.36zM19.48%2053l2.44-4.46c1.38-2.53%202.28-3.26%203.29-3.66a5.24%205.24%200%20014.48.37%205.55%205.55%200%20012.79%203.39c.28%201.37.17%202.5-1%204.62l-.83%201.51%204.28%202.34-1.82%203.33L19.48%2053zm8.13.1l.77-1.42c.36-.66%201.19-2.17-.45-3.07-1.64-.9-2.45.68-2.86%201.43l-.71%201.29%203.25%201.77zm1.6-15.7l3.46-3.49c1.91-1.94%202.89-2.45%204.15-2.62a5.39%205.39%200%20014.36%201.62%204.71%204.71%200%2001.76%206.19l6.73.72L45.49%2043l-6.1-1%203.57%203.52-2.67%202.71L29.21%2037.4zm8.23%202.79l1-1c1.64-1.66.78-2.88.24-3.42-1-1-2.21-.74-3.29.35l-1%201%203.05%203.07zM43%2025.09l7.46-4.35%201.75%203-4.17%202.44%201.22%202.08%204-2.36%201.76%203-4%202.36%201.34%202.31%204.17-2.44%201.76%203-7.45%204.35zm21.37%202.26l-5.56%202-1.14-3.23%205.56-2zM73.94%2014a8.06%208.06%200%2011-7.41%209%208.75%208.75%200%2001.31-3.35%208.07%208.07%200%20017.1-5.65zm1.21%2012.59a4.35%204.35%200%20003.74-4.92%204.38%204.38%200%2000-4.62-4.2%204.33%204.33%200%2000-3.81%204.9%204.37%204.37%200%20004.69%204.18v.04zm14.74-12.07l4.78%201.13c2.65.64%203.6%201.21%204.4%202.19a5.39%205.39%200%2001.87%204.57%204.71%204.71%200%2001-4.89%203.87l2.88%206.12-4.41-1-2.33-5.71L90%2030.51l-3.7-.88%203.59-15.11zM91.78%2023l1.37.33c2.26.54%202.87-.83%203-1.56.33-1.37-.51-2.28-2-2.64l-1.41-.33-.96%204.2zm16.13-3.13l4.43%202.63c1.49.89%204.17%202.47%204.42%206a8%208%200%2001-1.24%204.89C113.35%2037%20109.72%2039%20104.65%2036L100%2033.23l7.91-13.36zm-2.74%2012.39l1.46.86c2.54%201.52%204.32.18%205.44-1.72a5.45%205.45%200%2000.82-2.86%203.25%203.25%200%2000-1.89-2.77l-1.48-.88-4.35%207.37zm19.83-.61l6%206.26-2.53%202.4-3.37-3.51-1.75%201.66%203.21%203.4-2.56%202.4-3.22-3.4-1.94%201.83%203.32%203.51-2.53%202.39-5.93-6.27zm10.33%2012.11l2.34%204.32c1.3%202.4%201.5%203.49%201.29%204.75a5.35%205.35%200%2001-2.82%203.69%204.71%204.71%200%2001-6.14-1.07l-2.66%206.23-2.15-4%202.71-5.55-4.42%202.39-1.8-3.35%2013.65-7.41zm-5.07%207.06l.67%201.23c1.11%202.06%202.53%201.6%203.2%201.24%201.24-.67%201.36-1.91.63-3.26l-.69-1.27-3.81%202.06z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
@media (max-width: 850px) {
.badge.hello2 { width: 70px; height: 70px; }
.badge {
width: 60px;
height: 60px;
}
}
/*
==============================================
Newsletter
============================================== */
#newsletter {
width: 100%;
padding: 100px 90px;
background-color: var(--black);
position: relative;
}
#section-newsletter {
width: 100%;
max-width: 845px;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
}
#section-newsletter input[type=email] {
height: 48px;
line-height: 48px;
flex: 1;
margin-right: 15px;
font-family: 'Avant Garde', serif;
font-size: 30px;
border: 0;
border-radius: 0;
background-color: rgba(0, 0, 0, 0);
border-bottom: 2px solid var(--white);
color: var(--white);
}
#section-newsletter input[type=email]::-webkit-input-placeholder {
color: var(--white);
opacity: 1;
}
:-moz-placeholder {
color: var(--white) !important;
}
::-moz-placeholder {
color: var(--white) !important;
}
#section-newsletter .b-2 {
background-color: var(--black);
border: 2px solid var(--white);
color: var(--white);
}
@media (max-width: 800px) {
#newsletter { padding: 60px 50px; }
#section-newsletter { max-width: 100%; text-align: center; flex-flow: row wrap; }
#section-newsletter input[type=email] {
height: initial;
line-height: var(--typeBaseLineHeight);
font-size: 16px;
margin: 0 auto 15px;
flex: initial;
width: 100%;
min-width: 0;
text-align: center;
border-radius: 0;
}
#section-newsletter .button { margin: 0 auto }
}
@media (max-width: 500px) {
#newsletter { padding: 45px 50px; }
}
/*
==============================================
Work Page
============================================== */
#p-work {
background-color: var(--white);
padding: 220px 90px 90px;
}
#p-work h2 {
font-family: 'Romie';
font-size: 4.5rem;
color: var(--black);
margin-bottom: 0;
text-transform: capitalize;
letter-spacing: initial;
line-height: 100%;
}
.p-margin { padding: 90px; }
.work-section {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.project {
display: block;
width: calc(50% - 45px);
margin-bottom: 80px;
}
.project-img {
position: relative;
width: 100%;
padding-bottom: 125%;
background-position: center;
background-repeat: no-repeat;
transition: all 0.3s ease-in-out;
overflow: hidden;
margin-bottom: 30px;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
}
.project-img img, .project-img video { transition: transform 0.5s cubic-bezier(0.34, 1, 0.64, 1); }
.project-img:hover img, .project-img:hover video { transform: scale(1.02); }
.project:nth-of-type(6n - 4) {
width: calc(50% - 45px);
align-self: flex-end;
}
.project:nth-of-type(6n - 4) .project-img {
padding-bottom: 100%;
}
.project:nth-of-type(6n - 3), .project:nth-of-type(6n) {
width: 100%;
}
.project:nth-of-type(6n - 3) .project-img, .project:nth-of-type(6n) .project-img {
padding-bottom: 50%;
}
.project:nth-of-type(6n - 2) {
width: calc(50% - 45px);
}
.project:nth-of-type(6n - 2) .project-img {
padding-bottom: 100%;
}
.project:hover > .project-img {
animation: zoom 0.6s linear infinite;
}
/*@keyframes rotate {
0% { -webkit-transform:rotateX(25deg); transform:rotateX(25deg); opacity: 0; }
100% { -webkit-transform:rotateX(0deg); transform:rotateX(0deg); opacity: 1; }
}
@-webkit-keyframes rotate {
0% { -webkit-transform:rotateX(0px); transform:rotateXY(0px) }
100% { -webkit-transform:rotateX(90deg); transform:rotateX(90deg) }
}*/
.project-img:hover {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.project:nth-of-type(6n - 1) .project-img:hover, .project:nth-of-type(6n - 5) .project-img:hover {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.project:nth-of-type(3n) .project-img:hover {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
@media (max-width: 800px) {
#p-work h2 { font-size: 3rem }
#p-work h3 { font-size: 1.4rem; margin-bottom: 0; }
.project { width: 100% !important; }
.project-img:hover, .project:nth-of-type(3n) .project-img:hover, .project:nth-of-type(6n - 1) .project-img:hover, .project:nth-of-type(6n - 5) .project-img:hover {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.project-img { padding-bottom: 100% !important; margin-bottom: 20px; }
.project-text { text-align: center; }
}
@media (max-width: 500px) {
.p-margin { padding: 90px 20px 30px !important; }
.project { margin-bottom: 50px; }
}
/*
==============================================
Project Page
============================================== */
#p-project {
display: flex;
flex-flow: row wrap;
height: 100%;
min-height: 100vh;
padding: 220px 90px 90px;
}
#project-close {
margin-left: auto;
width: 40px;
height: 40px;
position: relative;
border: 0;
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
#project-close:before, #project-close:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 4px;
background-color: var(--black);
transition: all 0.3s ease-in-out;
}
#project-close:before { transform: translate(-50%,-50%) rotateZ(45deg); }
#project-close:after { transform: translate(-50%,-50%) rotateZ(-45deg); }
#project-close:hover:before { transform: translate(-50%,-50%) rotateZ(-45deg);}
#project-close:hover:after { transform: translate(-50%,-50%) rotateZ(-135deg);}
#project-desc {
position: absolute;
bottom: 90px;
left: 90px;
width: 50%;
max-width: 40rem;
}
#project-desc h1 {
font-family: 'Romie';
font-size: 4.5rem;
color: var(--black);
margin-bottom: 3rem;
text-transform: capitalize;
letter-spacing: initial;
line-height: 100%;
}
#project-desc h2 {
font-family: 'Avant Garde';
font-weight: bold;
font-size: 1.5rem;
color: var(--black);
line-height: 1.8rem;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 15px;
}
#project-desc h3 {
font-size: 2.2rem;
letter-spacing: 2.2px;
}
#project-desc p { padding-right: 15%; max-width: 45rem; }
#project-desc p:last-of-type { margin-bottom: 0; }
#project-img {
width: 100%;
text-align: right;
padding: 0 80px 0 45rem;
}
#project-img img, #project-img video {
display: block;
margin-bottom: 30px;
width: 100%;
max-width: 900px;
margin-left: initial;
}
@media (min-width: 1921px) {
#project-img img, #project-img video {
max-width: 1400px;
margin-left: auto;
}
}
#project-tags, .project-tags {
list-style-type: none;
}
#project-tags li, .project-tags li {
display: inline;
}
.project-tags li h3 {
font-family: Avant Garde;
font-weight: 700;
font-size: 1.5rem;
color: var(--black);
line-height: 1.8rem;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 15px;
}
#project-tags li h2:after, .project-tags li h3:after {
content: '\002C\00A0';
position: relative;
font-family: 'Avant Garde';
font-weight: bold;
}
#project-tags li h2, .project-tags li h3 { display: inline }
#project-tags li:last-of-type { margin-right: 0 }
#project-tags li:last-of-type h2:after, .project-tags li:last-of-type h3:after {
content: '';
}
@media (max-width: 1000px) {
#p-project {
padding: 220px 20px 90px;
}
#project-close {
width: 20px;
height: 20px;
}
#project-close:before, #project-close:after {
width: 20px;
height: 2px;
}
#project-desc, #project-img { width: 100% !important; max-width: 100% !important; }
#project-img { padding: 0; }
#project-desc {
position: relative !important;
bottom: initial !important;
left: initial !important;
margin-bottom: 30px;
}
#project-desc h1, #p-work h2 { font-size: 3rem; }
#project-desc h2, .project-tags li h3 { font-size: 0.9rem; margin-bottom: 7px; letter-spacing: 0.9px; }
#project-tags li:after { font-size: 0.9rem; }
#project-desc h3 { font-size: 1rem; letter-spacing: 1px; }
#project-desc p { max-width: 100%; padding-right: 0;}
}
@media (max-width: 800px) {
.project-tags li:after { font-size: 1.4rem; }
}
@media (max-width: 650px) {
#p-project { padding: 90px 20px; }
}
/*
==============================================
Shop
============================================== */
#p-shop {
padding-top: 100px;
}
/*#shop-hero h1 {
font-size: clamp(6rem,1rem + 14.625vw,25rem);
}*/
#shop-hero .button {
background-color: rgba(0,0,0,0);
border: 2px solid var(--orange);
margin-top: 40px;
}
@media (max-width: 800px) {
#shop-hero .button { margin-top: 20px; }
}
/* Marquee */
.marquee {
width: 100%;
padding: 30px 0;
position: relative;
overflow: hidden;
}
.marquee span {
font-family: 'Platform', serif;
text-transform: uppercase;
color: var(--pink);
white-space: nowrap;
font-size: 100px;
letter-spacing: -4px;
line-height: 100%;
margin-bottom: 0;
padding: 0 1.1vw;
}
#shop-marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 150px;
overflow-x: hidden;
padding: 30px 0;
}
.cont{
width: 100%;
overflow: hidden;
}
.marquee-wrapper {
position: relative;
display: flex;
width: 100%;
justify-content: space-between;
}
.marquee-items {
animation-name: marquee;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
flex-shrink: 0;
}
.marquee-items li{
width: fit-content;
display: inline-block;
list-style: none;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css');
.b-slider__slides {
width: 100%;
background: var(--red);
overflow: hidden;
padding: 30px 0;
height: 160px;
}
.b-slider__slide, .marquee-items li {
font-family: 'Platform', serif;
text-transform: uppercase;
color: var(--pink);
white-space: nowrap;
font-size: 100px;
letter-spacing: -4px;
line-height: 100%;
margin-bottom: 0;
padding: 0 0.75vw;
height: 200px;
}
.smiley {
height: 70px;
width: auto;
margin-left: 2.5vw;
}
/* Nav */
#shop-nav {
position: sticky;
top: 100px;
z-index: 4;
text-align: center;
}
#shop-nav * {
font-size: 20px;
font-weight: bold;
color: var(--white);
letter-spacing: 2px;
text-transform: uppercase;
}
#shop-nav ul {
}
#shop-nav ul li {
display: inline-block;
line-height: 70px;
height: 70px;
cursor: pointer;
position: relative;
margin: 0 20px;
}
#shop-nav ul li ul {
width: auto;
max-width: auto;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
left: 50%;
top: 100%;
transform: translateX(-50%);
background-color: var(--lavender);
padding: 5px 30px 30px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
opacity: 0;
pointer-events: none;
transition: 0.3s ease-in-out;
margin: 0;
}
#shop-nav ul li ul li {
display: block;
line-height: initial;
height: initial;
min-width: 100%;
text-align: center;
margin: 0;
white-space: nowrap;
margin-bottom: 25px;
}
#shop-nav ul li ul li:last-of-type { margin-left: initial; position: relative; left: 0; transform: translateX(0); margin-bottom: 0; }
#shop-nav ul li:hover > ul {
opacity: 1;
pointer-events: all;
}
#shop-check { display: none; }
.shop-dropdown-span { line-height: 70px; position: relative }
.shop-dropdown-span:after {
content: '';
display: inline-block;
position: relative;
top: -4px;
width: 10px;
height: 10px;
border-left: 3px solid var(--white);
border-bottom: 3px solid var(--white);
transform: rotateZ(-45deg);
margin-left: 5px;
transform-origin: center;
}
#shop-nav ul li:hover > label .shop-dropdown-span:after, #shop-check:checked + label .shop-dropdown-span:after { transform: rotateZ(135deg); top: 0px; }
/* Categories */
.shop-collection {
display: flex;
flex-flow: row wrap;
width: 100%;
justify-content: space-between;
padding: 70px 90px 30px;
}
.shop-collection h3 {
font-family: "Platform";
font-size: 48px;
letter-spacing: -1px;
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.shop-collection:after {
content: '';
margin-left: auto;
}
.shop-collection .product {
width: calc(33.33% - 40px);
margin-right: 60px;
margin-bottom: 30px;
position: relative;
}
.shop-collection .product:nth-of-type(3n) {
margin-right: 0;
}
@media (max-width: 1100px) {
#shop-nav { top: 80px; }
#shop-nav ul li { margin: 0 10px; }
#p-shop { padding-top: 80px; }
}
@media (max-width: 850px) {
#p-shop { padding-top: 70px; }
.b-slider__slides, #shop-marquee { height: 63px; }
.b-slider__slides img, #shop-marquee img { height: 40px; width: auto; margin: 0 0 0 3vw; }
.b-slider__slides, #shop-marquee { padding: 5px 0 10px; }
.b-slider__slide, .marquee-items li {
font-size: 55px;
letter-spacing: -2.2px;
}
#shop-nav * { font-size: 16px; letter-spacing: 1.6px; }
#shop-nav { top: 70px; }
/*#shop-nav ul { width: 70%; max-width: 450px; }*/
#shop-nav ul li { line-height: 44px; height: 40px; }
#shop-nav ul li ul { padding: 5px 15px 15px }
#shop-nav ul li ul li { margin-bottom: 15px; }
.shop-dropdown-span { line-height: 40px; }
.shop-collection { padding: 20px; }
.shop-collection h3 {
font-size: 20px;
letter-spacing: 0;
margin-bottom: 20px;
}
.shop-collection .product {
width: calc(50% - 10px);
margin-right: 20px;
}
.shop-collection .product:nth-of-type(3n) { margin-right: 20px; }
.shop-collection .product:nth-of-type(2n) { margin-right: 0; }
#shop-check:checked ~ ul {
opacity: 1;
pointer-events: all;
}
.shop-dropdown-span:after {
width: 6px;
height: 6px;
border-left: 2px solid var(--white);
border-bottom: 2px solid var(--white);
top: -3px;
}
}
@media (max-width: 500px) {
#p-shop { padding-top: 60px; }
#shop-nav { top: 60px; }
}
/*
==============================================
Product Description Page (PDP)
============================================== */
#product {
display: flex;
flex-flow: row wrap;
padding: 15rem 9rem 9rem;
}
#product-img {
width: 55%;
display: flex;
flex-flow: row nowrap;
}
#p-img-left {
width: 15%;
padding-right: 20px;
}
#p-img-right {
position: relative;
width: 85%;
}
.img-hover {
z-index: 2;
}
.img-hover:hover { opacity: 0; }
.p-img-radio { display: none; }
.p-img-thumb {
display: block;
width: 100%;
padding-bottom: 120%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
cursor: pointer;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.p-img-thumb:hover { transform: scale(1.05); }
.p-img-thumb:nth-of-type(4n-3) {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.p-img-thumb:nth-of-type(4n-2) {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.p-img-thumb:nth-of-type(4n-1) {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.p-img-thumb:nth-of-type(4n) {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.p-img-radio + img { opacity: 0; transition: all 0.3s ease-in-out; }
.p-img-radio:checked + img { opacity: 1; }
.product-img {
display: block;
position: relative;
width: 100%;
padding-bottom: 125%;
background-color: var(--lavender);
overflow: hidden;
}
.product-img img, .product-img video { transition: transform 0.5s cubic-bezier(0.34, 1, 0.64, 1); }
.product-img:hover img, .product-img:hover video { transform: scale(1.02); }
.product-img.thumb, .product-img.clip-on {
transition: all 0.3s ease-in-out;
}
/* #p-img-right:hover > .product-img img { transform: scale(2); } */
.product-img.thumb:hover, .product-img.clip-on {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
}
/* Product Description */
#product-desc {
width: 45%;
padding-left: 5rem;
}
#product-desc h1 { margin-bottom: 40px; }
#product-desc h3 {
font-size: 2rem;
letter-spacing: 0;
margin-bottom: 30px;
}
#product-desc .number-input {
position: relative;
top: -2px;
}
.pdp-qty {
display: flex;
align-items: center;
}
#product-desc .pdp-qty { margin-bottom: 48px; }
.pdp-qty h4 { margin: 0 20px 0 0; line-height: 18px; }
.pdp-qty input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.pdp-qty input[type=number]::-webkit-inner-spin-button,
.pdp-qty input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 2px solid var(--lavender);
line-height: 18px;
display: inline-flex;
border-radius: 11px;
}
.number-input,
.number-input * {
box-sizing: border-box;
font-family: 'Avant Garde';
font-weight: bold;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 18px;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:after {
display: inline-block;
position: absolute;
content: '\2212';
transform: translate(-50%, -50%)
}
.number-input button.plus:after {
content: '\002B';
}
.number-input input[type=number] {
font-family: sans-serif;
background-color: rgba(0, 0, 0, 0);
max-width: 3rem;
border: 0;
font-size: 2rem;
height: 18px;
font-weight: bold;
text-align: center;
}
#product-desc .button { width: 100%; margin-bottom: 36px; }
#product-desc .button:hover { background-color: #fc8500 }
.accordion {
display: flex;
flex-direction: column;
}
.accordion label { width: 100%; height: 60px; }
.accordion h2 {
position: relative;
min-width: 100%;
height: 48px;
line-height: 60px;
font-size: 22px;
margin-bottom: 0;
}
.accordion h2:before, .accordion h2:after {
content: '';
position: absolute;
height: 2px;
width: 22px;
background-color: var(--black);
transition: all 0.3s ease-in-out;
right: 0;
top: 30px;
transform: translateY(-50%);
}
.accordion h2:after {
transform: translateY(-50%) rotateZ(90deg);
}
.accordion h4 {
position: relative;
min-width: 100%;
height: 48px;
line-height: 48px;
margin-bottom: 0;
}
.accordion h4:after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 48px;
width: 22px;
background-image: url('data:image/svg+xml;utf8,');
background-position: center;
background-repeat: no-repeat;
transition: all 0.3s ease-in-out;
}
.accordion-open {
width: 100%;
height: auto;
overflow: hidden;
pointer-events: none;
border-bottom: 2px solid var(--black);
margin-top: -10px;
}
.accordion-open p {
line-height: 0px;
opacity: 0;
font-size: 0;
margin: 0;
padding: 0;
transition: font-size .4s .2s, margin .4s .2s, padding .4s .2s, line-height .4s .2s, opacity .3s 0s;
}
.accordion-open p * {
line-height: 0px;
font-size: 0;
margin: 0;
padding: 0;
opacity: 0;
transition: margin .4s, padding .4s, line-height .4s, opacity .3s;
}
.accordion-check { display: none; }
.accordion-check:checked + label h2:after {
transform: translateY(-50%);
}
.accordion-check:checked + label h4:after {
transform: rotateX(180deg);
}
.accordion-check:checked ~ .accordion-open p {
height: auto;
opacity: 1;
font-size: 1.6rem;
line-height: 1.9rem;
margin: 0 0 2.8rem;
padding-top: 10px;
transition: opacity .4s .35s, font-size .4s, margin .4s, padding .4s, line-height .4s;
}
.accordion-check:checked ~ .accordion-open p * {
line-height: inherit;
font-size: inherit;
opacity: 1;
transition: opacity .4s, margin .4s, padding .4s, line-height .4s;
}
/* Related Products */
#related-products {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 50px 0;
}
#related-products h2 { text-align: center; width: 100%; min-width: 100%; }
#related-products .grid-overflow-wrapper {
width: 100%;
padding: 0 80px;
}
#related-products .grid-product__meta {
position: relative;
text-align: center;
}
#related-products .image-wrap {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
}
.product .product-img { margin-bottom: 3rem; }
.product .badge {
width: 90px;
height: 90px;
top: 15px;
left: 15px;
z-index: 3;
}
.product-img .badge {
width: 10vw;
height: 10vw;
max-width: 120px;
max-height: 120px;
top: 20px;
left: 20px;
z-index: 3;
}
.scroll-container {
width: 100%;
display: flex;
flex-flow: row no wrap;
justify-content: space-between;
}
.product-single__description table { border-spacing: 0; }
.product-single__description td {
width: 50% !important;
padding-right: 10px;
background-color: var(--white);
border: 0;
}
.rte li:before {
content: "-";
margin-right: 5px;
}
.table-wrapper, .table-wrapper * { margin-bottom: 0 !important; }
@media (max-width: 1000px) {
#related-products .grid-overflow-wrapper {padding: 0 20px;}
}
@media (max-width: 800px) {
.rte * {
font-size: 1.6rem;
line-height: 2.3rem;
}
.product-img .badge {
width: 15vw;
height: 15vw;
top: 10px;
left: 10px;
}
}
@media (max-width: 500px) {
.product-img .badge {
width: 70px;
height: 70px;
top: 10px;
left: 10px;
}
}
/* Theme Overrides */
.product-single__meta {
padding-left: 0;
}
.product-single__description-full {
margin: 0 0 40px;
}
.product-single__form {
margin-bottom: 0;
}
.js-qty__wrapper { background-color: transparent !important; }
.pdp-qty-input .js-qty__num {
border: 2px solid var(--lavender) !important;
line-height: 22px;
height: 22px;
width: 90px;
display: inline-flex;
border-radius: 11px;
background-color: var(--white);
font-size: 16px;
}
.pdp-qty-input .js-qty__adjust {
height: 22px;
font-family: 'Avant Garde';
font-weight: bold;
}
.pdp-qty-input .js-qty__adjust:hover {
font-size: 16px !important;
}
.pdp-qty-input .js-qty__num,
.pdp-qty-input .js-qty__num * {
box-sizing: border-box;
font-family: 'Avant Garde';
font-weight: bold;
}
.variant-input-wrap label {
font-family: 'Avant Garde';
font-weight: bold;
padding-top: 10px;
background-color: transparent;
border-radius: 5px;
}
label.disabled { pointer-events: none; }
@media (max-width: 1200px) {
.product .badge {
width: 60px;
height: 60px;
}
}
@media (max-width: 1000px) {
#related-products h2 {
font-size: 32px;
}
#product {
padding: 20rem 2rem 4rem;
}
}
@media (max-width: 850px) {
#shop-hero { flex-flow: row wrap-reverse; }
#product-img, #product-desc { width: 100%; }
#p-img-left { padding-right: 10px; }
#product-desc {
margin-top: 20px;
padding-left: 0;
}
#product-desc h1 {
font-size: 5.5rem;
line-height: 4.1rem;
letter-spacing: -1px;
margin-bottom: 20px;
}
}
@media (max-width: 800px) {
#related-products {
padding: 30px 0;
}
.scroll-container {
width: 100%;
display: grid !important;
grid-gap: 30px;
grid-auto-flow: column;
grid-auto-columns: 60%;
scroll-snap-type: x mandatory;
overflow-x: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 20px;
}
#related-products .product { width: 100%; scroll-snap-align: start; scroll-margin: 0px 0 0 20px; }
.product .badge {
left: 5px;
top: 5px;
width: 50px;
height: 50px;
}
.product-text h4, .product-text h5 { font-size: 14px !important; }
.product-text h4 { margin-bottom: 0; }
}
@media (max-width: 500px) {
#product-desc h3, .pdp-qty h4, .accordion h4 {
font-size: 14px;
}
#product-desc h3 {
margin-bottom: 15px;
}
#product-desc .pdp-qty { margin-bottom: 20px; }
.number-input { line-height: 14px; }
.number-input button, .number-input input[type=number] {
height: 14px;
font-size: 1.4rem;
}
.number-input button {
width: 2rem;
}
.accordion label { height: 40px; }
.accordion h4 {
line-height: 30px;
}
.accordion h4:after {
height: 30px;
background-size: 80%;
}
.accordion-check:checked ~ .accordion-open p {
font-size: 1.2rem;
line-height: 1.6rem;
margin-bottom: 1.9rem;
}
.accordion-check:checked ~ .accordion-open p:first-of-type { padding-top: 1.9rem; }
.bold { font-size: 1.2rem; }
}
/*
==============================================
News Page
============================================== */
#p-news {
padding-top: 20rem;
background-color: var(--cream);
}
#p-news h2 {
font-family: 'Platform';
font-size: 8rem;
font-size: clamp(6rem, 1rem + 4.6250vw, 10rem);
line-height: 72%;
letter-spacing: -2px;
color: var(--black);
margin-bottom: 4rem;
text-transform: uppercase;
}
#p-news p {
font-family: 'Romie';
font-size: 3.2rem;
font-size: clamp(0.5rem, 0.5rem + 1.5vw, 3.2rem);
line-height: 125%;
color: var(--black);
margin-bottom: 4rem;
}
@media (min-width: 1921px) {
#p-news h2 {
font-size: 10rem;
font-size: clamp(10rem, 5rem + 9.25vw, 15rem);
letter-spacing: -4px;
}
#p-news p {
font-size: 4rem;
font-size: clamp(3.2rem, 0.5rem + 1.5vw, 4rem);
}
}
.news-article {
padding: 6rem 0;
border-bottom: 2px solid var(--black);
}
.news-article:last-of-type { border-bottom: 0; }
.news-text {
position: -webkit-sticky; /* Safari */
position: sticky;
left: 0;
float: left;
top: 25rem;
width: 60%;
padding-right: 26.5%;
}
.news-img {
width: 40%;
margin-left: auto;
display: block;
}
.news-img-container {
position: relative;
width: 100%;
padding-bottom: 100%;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
}
.news-img img, .news-img video, .news-img-container img, .news-img-container video { transition: transform 0.5s cubic-bezier(0.34, 1, 0.64, 1); }
.news-img:hover img, .news-img:hover video, .news-img-container:hover img, .news-img-container:hover video { transform: scale(1.02); }
@media (max-width: 1100px) {
#p-news h2 {
font-size: 4.5rem;
letter-spacing: -2px;
margin-bottom: 2rem;
}
#p-news p {
font-size: 1.8rem;
line-height: 2.2rem;
margin-bottom: 1.5rem;
}
.news-text { padding-right: 20%; }
}
@media (max-width: 850px) {
#p-news { padding-top: 15rem; }
.news-article {
padding: 3rem 0;
}
.news-text, .news-img { width: 100%; text-align: center; }
.news-article { display: flex; flex-flow: row-reverse !important; flex-wrap: wrap-reverse !important; }
.news-text { position: relative; top: 0; padding-right: 0; }
.news-img { margin-bottom: 30px; }
.news-article .button svg { height: 8px; width: auto; }
}
/*
==============================================
Links Page
============================================== */
#p-links {
padding: 100px 0 0;
}
.p-links {
padding: 100px 90px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
/*max-width: calc(1440px - 180px);
margin: 0 auto;*/
}
.link-item {
display: block;
width: calc(40% - 40px);
text-align: center;
}
.link-item h1 {
margin: 4rem 0 0;
font-size: 60px;
letter-spacing: -2.4px;
line-height: 60px;
}
.link-item h2 {
width: 100%;
max-width: 350px;
margin: 0 auto;
font-size: 26px;
line-height: 140%;
}
@media (max-width: 850px) {
.p-links { padding: 50px 20px; }
.link-item { width: 100%; }
.link-item:first-of-type { margin-bottom: 40px; }
.link-item h1 {
margin: 2rem 0 0;
}
.link-item h2 {
width: 100%;
max-width: 500px;
font-size: 18px;
}
}
/*
==============================================
FAQ Page
============================================== */
#p-faq {
background-color: var(--cream);
display: flex;
flex-flow: row wrap;
padding: 190px 90px 130px;
min-height: 100vh;
margin-bottom: 226px;
}
#p-faq h1 {
font-size: 8rem;
line-height: 75%;
letter-spacing: -3px;
color: var(--black);
margin-bottom: 4rem;
text-transform: uppercase;
max-width: 650px;
}
#p-faq h3 {
font-size: 18px;
font-weight: normal;
letter-spacing: 1.8px;
margin-bottom: 20px;
}
#faq-topics {
position: fixed;
width: 40%;
padding-right: 40px;
}
#faq-topics li {
display: block;
list-style-type: none;
text-transform: uppercase;
line-height: 28px;
font-size: 18px;
letter-spacing: 1.8px;
}
#faq-topics li:first-of-type {
display: block;
margin-bottom: 28px;
}
#faq-topics li:first-of-type a { font-weight: bold !important; }
#faq-topics li a:hover {
text-decoration:underline;
}
#faq-answers {
width: 60%;
margin-left: auto;
}
#faq-shipping { margin-bottom: 80px; }
@media (max-width: 900px) {
#p-faq { margin-bottom: 571px;}
#faq-topics, #faq-answers { width: 100%; }
#faq-topics { position: relative; margin-bottom: 40px; }
#faq-topics li:first-of-type { margin-bottom: 0; }
}
@media (max-width: 500px) {
#p-faq h1 {
font-size: 5.2rem;
line-height: 75%;
letter-spacing: -2px;
margin-bottom: 30px;
}
#p-faq { padding: 100px 20px 50px }
#p-faq .accordion label { height: 40px; }
#p-faq .accordion label { height: 40px; }
#p-faq .accordion h2 { height: 40px; line-height: 40px; font-size: 14px; }
#p-faq .accordion-open { margin-top: 0 }
#p-faq .accordion h2:after, .accordion h2:before { top: 20px; }
}
/*
==============================================
Info Page
============================================== */
#p-info {
z-index: initial;
display: flex;
flex-flow: row wrap;
align-items: stretch;
padding: 100px 0 0;
min-height: calc(100vh - 100px);
}
#p-info .shopify-section { width: 100%; }
#p-info .col-2 { align-items: stretch; }
.r-rev { flex-flow: row-reverse nowrap; }
#info-bg {
padding-bottom: 0;
display: flex;
align-items: center;
}
#info-main {
text-align: left;
position: relative;
top: 0;
left: 0;
transform: translate(0);
padding: 60px;
width: 100%;
}
#info-main p {
font-family: 'Romie';
font-size: 32px;
line-height: 50px;
color: var(--black);
margin-bottom: 50px;
}
@media (min-width: 2200px) {
#info-main p {
font-size: 48px;
line-height: 75px;
}
}
@media (max-width: 1050px) {
#info-main {
padding: 40px;
}
}
#info-col {
display: flex;
flex-flow: row wrap;
}
#info-col li {
width: 60%;
list-style: none;
margin-bottom: 50px;
}
#info-col li:nth-of-type(2) {
width: 40%;
}
#info-col li:last-of-type { margin-bottom: 0; }
.stretch {
padding-bottom: 0;
display: flex;
align-items: center;
}
#info-video .news-img-container {
width: 80%;
padding-bottom: 80%;
margin: 0 auto;
}
#info-video {
text-align: left;
position: relative;
top: 0;
left: 0;
transform: translate(0);
padding: 40px;
width: 100%;
}
#info-video p {
font-size: 22px;
line-height: 34px;
max-width: 500px;
text-align: center;
margin: 0 auto;
color: var(--white);
}
#video-container {
position: relative;
margin-bottom: 50px;
}
#video-container .badge {
top: -20px;
left: initial;
right: 60px;
}
@media (max-width: 1000px) {
#video-container .badge {
right: 10%;
}
}
@media (max-width: 500px) {
#video-container .badge {
right: 20px;
}
}
.t-relative {
text-align: left !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
transform: translate(0) !important;
padding: 40px !important;
width: 100% !important;
}
#h-experience h3 {
font-family: 'Platform';
font-size: 36px;
line-height: 32px;
letter-spacing: -1px;
margin-bottom: 30px;
}
#h-experience .img-clip {
top: -1px;
height: calc(100% + 2px);
}
#clients {
max-width: 600px;
margin: 0 auto;
}
#clients h3 { margin-bottom: 50px; }
#clients ul {
display: flex;
flex-flow: row wrap;
}
#clients ul li {
list-style-type: none;
width: 50%;
}
#clients ul li, #expertise-ul li {
font-size: 22px;
line-height: 38px;
list-style-type: none;
}
@media (min-width: 1921px) {
.expertise { transform: translate(-50%,-50%) scale(1.5) !important; }
.t-relative { transform: translate(0) scale(1.5) !important; }
.t-relative.news { transform: translate(0) !important; }
}
#info-news { text-align: left; }
#info-news .badge {
position: relative;
top: initial;
left: initial;
margin-bottom: 30px;
}
#info-news li { list-style-type: none; }
#info-news li a {
font-family: 'Platform';
font-size: 95px;
line-height: 70px;
text-transform: uppercase;
color: var(--orange);
letter-spacing: -3.8px;
transition: color 0.3s ease-in-out;
}
#info-news li a:hover { color: var(--cream) }
@media (min-width: 1921px) {
#info-news li a {
font-size: 150px;
line-height: 110px;
letter-spacing: -6px;
}
}
#instagram {
width: 100%;
padding: 60px 80px;
text-align: center;
}
.thin {
font-weight: 300;
font-size: 2.4rem;
letter-spacing: 2.4px;
line-height: 117%;
text-transform: uppercase;
}
.instagram-wrapper {
display: flex;
justify-content: space-between;
}
.instagram-wrapper div {
position: relative;
width: calc(25% - 22.5px);
padding-bottom: 25%;
background-color: var(--pink);
}
#insta-feed {
width: 100%;
padding: 60px 80px 80px;
margin-top: 0 !important;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#insta-feed a {
width: calc(25% - 22.5px);
z-index: 3 !important;
}
#insta-feed h2 {
font-family: 'Avant Garde' !important;
font-size: 24px !important;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 45px;
width: 100%;
}
#insta-feed img, .instafeed-overlay {
width: 100% !important;
height: 100% !important;
}
.instafeed-container {
width: 100% !important;
padding-top: 100% !important;
border-radius: 20px;
overflow: hidden;
}
@media (max-width: 800px) {
#insta-feed { padding: 20px 20px; }
#insta-feed h2 { font-size: 18px !important; margin-bottom: 15px; }
#insta-feed a { width: calc(50% - 7px) !important; margin-bottom: 14px; }
}
#video-modal { display: none; }
.video-modal {
position: fixed;
pointer-events: none;
opacity: 0;
z-index: 7;
top: 50%;
left: 50%;
width: 80%;
max-width: 1000px;
transform: translate(-50%, -50%);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.modal-bg {
opacity: 0;
pointer-events: none;
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 6;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
transition: all 0.5s ease-in-out;
}
.modal-bg .cart-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
}
.modal-bg .cart-close:before, .modal-bg .cart-close:after { background-color: var(--white); }
.video-modal-frame {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.video-modal iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
object-position: center;
}
#video-modal:checked + .video-modal, #video-modal:checked ~ .modal-bg {
pointer-events: all;
opacity: 1;
}
.info-work-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.info-work-slideshow .flickity-viewport { height: 100% !important; }
#info-work-slide-button {
position: absolute;
bottom: 30px;
left: 50%;
z-index: 2;
transform: translateX(-50%);
opacity: 0;
height: 80px;
width: 50%;
}
.info-work-slideshow .text-link {
position: absolute;
bottom: 40px;
left: 50%;
z-index: 2;
transform: translateX(-50%);
}
.info-work-slide {
opacity: 0;
transition: all 0.2s ease-in-out;
}
#info-work-slide-button:hover ~ .info-work-slideshow .flickity-viewport .flickity-slider .info-work-slide .text-link {
background-position: right 7px center;
}
.info-work-slide.is-selected {
opacity:1
}
.r-50 .flickity-previous {
display: none;
}
.r-50 .flickity-prev-next-button {
top: 0;
width: 100%;
height: 100%;
border-radius: 0;
transform: translateY(0);
opacity: 0;
}
.r-50 .flickity-prev-next-button:hover {
transform: translateY(0);
}
@media (max-width: 1100px) {
#p-info { padding-top: 80px; }
}
@media (max-width: 1000px) {
#p-info { padding: 100px 0 0; }
#p-info .r-50 {
width: 100%;
max-width: 100%;
}
.full-mobile { padding-bottom: 100% !important; }
.r-rev {
flex-flow: row wrap;
}
#info-col li, #info-col li:nth-of-type(2) {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
#clients h3, #clients li { text-align: center; }
}
@media (max-width: 850px) {
#p-info { padding-top: 70px; }
}
@media (max-width: 800px) {
#info-col li h4, #info-col li a { font-size: 14px; }
#info-col li h4 { margin-bottom: 0; }
#h-experience h3 { font-size: 24px; line-height: 22px; letter-spacing: -0.5px; margin-bottom: 30px; }
#clients ul li, #expertise-ul li {
font-size: 14px;
line-height: 24.5px;
}
#info-bg, #info-video { padding: 0}
#info-main { padding: 30px 40px; margin: 0 auto; }
#info-main p {
font-size: 20px;
line-height: 29px;
margin-bottom: 40px;
text-align: center;
}
#video-container { margin-bottom: 20px; }
#info-video p {
font-size: 14px;
line-height: 18px;
width: 70%;
}
#info-news {
padding: 0 10px 20px;
}
#info-news li a {
font-size: 50px;
line-height: 36px;
letter-spacing: -2px;
}
}
@media (max-width: 500px) {
#p-info { padding: 60px 0 0; }
.info-work-slideshow .text-link { bottom: 20px; }
}
/*
==============================================
Play Page
============================================== */
#p-play {
padding: 200px 0 0;
background-color: rgba(0,0,0,0) !important;
}
.play_Heading p {
position: relative;
z-index: 2;
font-family: 'Romie', serif;
font-size: 30px;
line-height: 42px;
width: 40%;
padding-left: 90px;
}
.home .play_Section {
-webkit-animation: colorchange 48s infinite;
animation: colorchange 48s infinite;
}
.home .play_Section .blue_Overlay {
height: 55vw;
overflow: hidden;
margin-top: -15vw;
}
#shopify-section-home-play img {
width: 100%;
height: auto;
}
#play-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* Main Styles Only */
@media (max-width: 1000px) {
.play_Heading { margin-bottom: 150px; }
.play_Heading p {
width: 70%;
}
.play-page-main.play_Section .play_Heading svg {
position: relative;
z-index: 2;
margin-left: 90px;
height: auto;
width: 40%;
}
}
@media (max-width: 700px) {
#p-play { padding: 80px 0 0; }
.play-page-main.play_Section .play_Heading svg {
display: block;
width: 60% !important;
max-width: 400px !important;
margin: 0 auto 20px !important;
}
.play_Heading p {
width: calc(100% - 80px);
padding: 0;
margin: 0 auto;
font-size: 21px;
line-height: 24px;
text-align: center;
}
.play_Heading { margin-bottom: 100px; }
}
@media (max-width: 500px) {
.play_Heading p { width: calc(100% - 40px); }
}
/* Image Positions */
@media (max-width: 1479px) {
.home .play_Section .blue_Overlay {
margin-top: -18vw;
}
}
@media (max-width: 1279px) {
.home .play_Section .blue_Overlay {
margin-top: -19vw;
}
}
@media (max-width: 1023px) {
.home .play_Section .blue_Overlay {
margin-top: -22vw;
}
}
@media (max-width: 767px) {
.home .play_Section .blue_Overlay {
overflow: visible;
margin-top: -15vw;
height: 137vw;
}
}
.home .play_Section .blue_Overlay .grid_ {
display: block;
}
@media (max-width: 767px) {
.home .play_Section .play_Heading {
z-index: 0;
}
}
.home .play_Section .play_Heading h1 {
font-size: 16vw;
}
@media (max-width: 767px) {
.home .play_Section .play_Heading h1 {
font-size: 32vw;
}
}
.home .play_Section .blue_Overlay .play-layers.layer4 {
top: 32.5vw;
}
@media (max-width: 767px) {
.home .play_Section .work-layout-5, .home .play_Section .work-layout-6, .home .play_Section .work-layout-7 {
display: none;
}
}
@media (max-width: 767px) {
.home .home-cover-main .work_listing .work-layout-5 {
display: none;
}
}
@media (max-width: 767px) {
.home .home-cover-main .work_listing .work-layout-6 {
display: none;
}
}
.overlay-caps {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #ffffff;
-webkit-transition: all 0.5s;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
}
@media (max-width: 1023px) {
.overlay-caps {
padding: 20px;
}
}
@media (max-width: 767px) {
.overlay-caps {
padding: 15px;
}
}
.overlay-caps a {
color: #4fc1ef;
}
.overlay-caps a:hover {
text-decoration: underline;
}
.play-layers:hover .overlay-caps {
visibility: visible;
opacity: 1;
}
.play_Section {
width: 100%;
position: relative;
}
.play_Section:before {
content: "";
position: absolute;
bottom: 0;
height: 25%;
left: 0;
right: 0;
background: #4fc1ef;
display: none;
}
@media (max-width: 1920px) {
.play_Section:before {
height: 30%;
}
}
@media (max-width: 1479px) {
.play_Section:before {
height: 35%;
}
}
@media (max-width: 1279px) {
.play_Section:before {
height: 40%;
}
}
@media (max-width: 767px) {
.play_Section:before {
height: 70%;
}
}
.play_Section .play_Heading {
width: 100%;
z-index: 2;
position: relative;
-webkit-perspective-origin: inherit;
perspective-origin: inherit;
-webkit-perspective: inherit;
perspective: inherit;
}
.play_Section .play_Heading svg {
-ms-grid-column: 2;
-ms-grid-column-span: 4;
grid-column: 2 / span 4;
font-size: 25vw;
}
@media (max-width: 767px) {
.play_Section .play_Heading h1 {
font-size: 32vw;
}
}
.play_Section .blue_Overlay {
background-size: 100%;
background-repeat: no-repeat;
padding-top: 184px;
margin-top: -25vw;
position: relative;
height: 911vw;
z-index: 5;
-webkit-perspective-origin: inherit;
perspective-origin: inherit;
-webkit-perspective: inherit;
perspective: inherit;
}
@media (max-width: 1479px) {
.play_Section .blue_Overlay {
margin-top: -22vw;
}
}
@media (max-width: 1279px) {
.play_Section .blue_Overlay {
margin-top: -24vw;
}
}
@media (max-width: 1023px) {
.play_Section .blue_Overlay {
margin-top: -25vw;
}
}
@media (max-width: 767px) {
.play_Section .blue_Overlay {
height: 3101vw;
margin-top: -15vw;
padding-top: 0;
}
}
.play_Section .blue_Overlay .play-layers {
position: absolute;
animation: float 6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
z-index: 2;
}
.play_Section .blue_Overlay .play-layers:nth-of-type(4n) {
animation-delay: -1.5s;
}
.play_Section .blue_Overlay .play-layers:nth-of-type(4n - 1) {
animation-delay: -3s;
}
.play_Section .blue_Overlay .play-layers:nth-of-type(4n - 2) {
animation-delay: -4.5s;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-40px);
}
100% {
transform: translatey(0px);
}
}
.play_Section .blue_Overlay .play-layers.layer1 {
width: 22vw;
right: 9vw;
top: 50px;
z-index: 2;
}
@media (min-width: 2000px) {
.play_Section .blue_Overlay .play-layers.layer1 { top: initial }
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer1 {
top: 14vw;
width: 49.5vw;
right: 5vw;
}
}
.play_Section .blue_Overlay .play-layers.layer2 {
left: 9vw;
width: 32vw;
top: 27vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer2 {
display: none;
}
}
.play_Section .blue_Overlay .play-layers.layer2.layer17 {
top: 280.5vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer2.layer17 {
top: 864.5vw;
left: 4vw;
}
}
.play_Section .blue_Overlay .play-layers.layer2.layer28 {
top: 447vw;
left: 5vw;
width: 28vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer2.layer28 {
top: 1419vw;
width: 60vw;
}
}
.play_Section .blue_Overlay .play-layers.layer2.layer43 {
top: 680vw;
left: 52vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer2.layer43 {
top: 2206vw;
width: 59vw;
left: 20vw;
}
}
.play_Section .blue_Overlay .play-layers.layer3 {
left: 51.5vw;
width: 32vw;
top: 18.2vw;
z-index: 1;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer3 {
left: 12.5vw;
width: 65vw;
top: 0;
position: relative;
}
}
.play_Section .blue_Overlay .play-layers.layer3.layer18 {
top: 281.2vw;
right: 9vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer3.layer18 {
left: 12.5vw;
width: 65vw;
top: 851vw;
position: relative;
}
}
.play_Section .blue_Overlay .play-layers.layer3.layer29 {
top: 453.5vw;
width: 19vw;
left: 76vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer3.layer29 {
top: 1485vw;
right: 10vw;
position: absolute;
left: auto;
width: 74vw;
}
}
.play_Section .blue_Overlay .play-layers.layer4 {
left: auto;
width: 40vw;
top: 44.5vw;
right: 0;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer4 {
left: auto;
width: 69.8vw;
margin-top: -31.3vw;
right: 0;
position: relative;
float: right;
top: auto;
}
}
.play_Section .blue_Overlay .play-layers.layer4.layer18 {
top: 273.2vw;
right: 7vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer4.layer18 {
left: auto;
width: 34.8vw;
margin-top: 0;
right: 5vw;
position: relative;
float: right;
top: 828vw;
}
}
.play_Section .blue_Overlay .play-layers.layer4.layer30 {
top: 491vw;
right: 4vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer4.layer30 {
top: 1595vw;
right: 0;
left: auto;
}
}
.play_Section .blue_Overlay .play-layers.layer4.layer44 {
top: 712vw;
left: 7vw;
width: 31vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer4.layer44 {
top: 2320vw;
left: 7vw;
width: 54vw;
}
}
.play_Section .blue_Overlay .play-layers.layer5 {
left: 33vw;
width: 17vw;
top: 226vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer5 {
display: none;
}
}
.play_Section .blue_Overlay .play-layers.layer5.layer19 {
top: 317vw;
left: 23vw;
width: 25vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer5.layer19 {
top: 932vw;
left: 43vw;
width: 51vw;
z-index: 9;
}
}
.play_Section .blue_Overlay .play-layers.layer5.layer31 {
top: 480vw;
left: auto;
right: 3vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer5.layer31 {
top: 1580vw;
left: 6vw;
z-index: 9;
}
}
.play_Section .blue_Overlay .play-layers.layer5.layer45 {
top: 712vw;
width: 17vw;
left: 44vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer5.layer45 {
top: 2338vw;
left: auto;
z-index: 9;
width: 58vw;
right: 6vw;
}
}
.play_Section .blue_Overlay .play-layers.layer6 {
top: 84vw;
left: 0;
width: 30vw;
}
.play_Section .blue_Overlay .play-layers.layer6.layer16 {
top: 241.5vw;
left: 1vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer6.layer16 {
top: 806vw;
width: 63vw;
left: 28vw;
}
}
.play_Section .blue_Overlay .play-layers.layer6.layer20 {
top: 344vw;
left: 8vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer6.layer20 {
top: 969vw;
z-index: 9;
left: 7vw;
width: 53vw;
}
}
.play_Section .blue_Overlay .play-layers.layer6.layer32 {
top: 491vw;
width: 33vw;
left: 4vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer6.layer32 {
top: 1653vw;
left: 10vw;
width: 81vw;
}
}
.play_Section .blue_Overlay .play-layers.layer6.layer42 {
top: 665vw;
left: 3vw;
width: 36vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer6.layer42 {
top: 2133vw;
left: 11vw;
width: 79vw;
}
}
.play_Section .blue_Overlay .play-layers.layer6.layer46 {
top: 732vw;
right: 7vw;
left: auto;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer6.layer46 {
top: 2407vw;
left: 7vw;
width: 85vw;
}
}
.play_Section .blue_Overlay .play-layers.layer6.layer56 {
top: 864vw;
left: 4vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer6.layer56 {
top: 2996vw;
left: 7vw;
}
}
.play_Section .blue_Overlay .play-layers.layer7 {
top: 86.5vw;
left: 34.2vw;
width: 32vw;
}
.play_Section .blue_Overlay .play-layers.layer7.layer21 {
top: 343vw;
width: 33vw;
left: 56vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer7.layer21 {
top: 1031vw;
width: 70vw;
left: 13vw;
}
}
.play_Section .blue_Overlay .play-layers.layer7.layer33 {
top: 510vw;
left: 33vw;
width: 21vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer7.layer33 {
top: 1729vw;
left: 16vw;
width: 40vw;
}
}
.play_Section .blue_Overlay .play-layers.layer7.layer47 {
top: 747vw;
width: 24vw;
left: 25vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer7.layer47 {
top: 2502vw;
left: 11vw;
width: 50vw;
}
}
.play_Section .blue_Overlay .play-layers.layer8 {
top: 78vw;
right: 7vw;
width: 18vw;
}
.play_Section .blue_Overlay .play-layers.layer8.layer22 {
top: 323vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer8.layer22 {
top: 991.5vw;
}
}
.play_Section .blue_Overlay .play-layers.layer8.layer34 {
top: 566vw;
}
.play_Section .blue_Overlay .play-layers.layer8.layer48 {
top: 733vw;
right: 29vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer8.layer48 {
top: 2516vw;
}
}
.play_Section .blue_Overlay .play-layers.layer9 {
top: 117.8vw;
left: 8.6vw;
width: 24vw;
}
.play_Section .blue_Overlay .play-layers.layer9.layer23 {
top: 380.8vw;
width: 28.8vw;
left: 6vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer9.layer23 {
top: 1127vw;
width: 63vw;
left: 7vw;
}
}
.play_Section .blue_Overlay .play-layers.layer9.layer35 {
top: 542vw;
width: 29vw;
left: 6vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer9.layer35 {
top: 1749vw;
left: 51vw;
width: 39vw;
}
}
.play_Section .blue_Overlay .play-layers.layer9.layer49 {
top: 768vw;
left: 4vw;
width: 23vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer9.layer49 {
top: 2574vw;
left: 7vw;
right: auto;
width: 84vw;
}
}
.play_Section .blue_Overlay .play-layers.layer10 {
top: 130.2vw;
right: 8.5vw;
width: 40.2vw;
}
.play_Section .blue_Overlay .play-layers.layer10.layer24 {
top: 389.8vw;
right: 5vw;
width: 36vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer10.layer24 {
top: 1195vw;
right: 6vw;
width: 64vw;
left: auto;
}
}
.play_Section .blue_Overlay .play-layers.layer10.layer36 {
top: 548vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer10.layer36 {
top: 1806vw;
left: 12vw;
}
}
.play_Section .blue_Overlay .play-layers.layer10.layer50 {
top: 769vw;
width: 30vw;
right: 11vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer10.layer50 {
top: 2667vw;
width: 60vw;
left: 17vw;
}
}
.play_Section .blue_Overlay .play-layers.layer10.layer58 {
top: 869vw;
width: 25vw;
right: 5vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer10.layer58 {
top: 3050vw;
width: 35vw;
left: 6vw;
}
}
.play_Section .blue_Overlay .play-layers.layer11 {
top: 149.2vw;
left: 0;
width: 40.2vw;
}
.play_Section .blue_Overlay .play-layers.layer11.layer25 {
top: 408vw;
left: 19.5vw;
width: 22vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer11.layer25 {
top: 1282vw;
width: 77vw;
left: 12vw;
}
}
.play_Section .blue_Overlay .play-layers.layer11.layer37 {
top: 569vw;
left: 0vw;
width: 42vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer11.layer37 {
top: 1867vw;
left: 12vw;
width: 76vw;
}
}
.play_Section .blue_Overlay .play-layers.layer11.layer51 {
top: 788vw;
width: 30vw;
left: 23vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer11.layer51 {
top: 2751vw;
left: 18vw;
width: 58vw;
}
}
.play_Section .blue_Overlay .play-layers.layer12 {
top: 185.5vw;
right: 22.4vw;
z-index: 1;
width: 43.5vw;
}
.play_Section .blue_Overlay .play-layers.layer12.layer38 {
top: 599vw;
width: 35vw;
right: 34vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer12.layer38 {
top: 1907vw;
width: 76vw;
left: 13vw;
}
}
.play_Section .blue_Overlay .play-layers.layer12.layer52 {
top: 809vw;
right: 28vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer12.layer52 {
top: 2792vw;
}
}
.play_Section .blue_Overlay .play-layers.layer13 {
top: 193vw;
left: 5.4vw;
width: 32vw;
}
.play_Section .blue_Overlay .play-layers.layer13.layer39 {
top: 618vw;
right: 7vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer13.layer39 {
top: 1955vw;
right: 11vw;
left: auto;
}
}
.play_Section .blue_Overlay .play-layers.layer13.layer53 {
top: 819vw;
left: 7vw;
width: 27vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer13.layer53 {
top: 2827vw;
left: 7vw;
width: 84vw;
}
}
.play_Section .blue_Overlay .play-layers.layer13.layer57 {
top: 873vw;
left: 39vw;
width: 24vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer13.layer57 {
top: 3016vw;
left: auto;
right: 6vw;
width: 47vw;
}
}
.play_Section .blue_Overlay .play-layers.layer14 {
top: 191vw;
right: 0vw;
width: 40vw;
}
.play_Section .blue_Overlay .play-layers.layer14.layer26 {
top: 443vw;
right: 23vw;
width: 34vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer14.layer26 {
top: 1376vw;
left: 53vw;
width: 40vw;
}
}
.play_Section .blue_Overlay .play-layers.layer14.layer40 {
top: 620vw;
right: 5vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer14.layer40 {
top: 2061vw;
width: 50vw;
}
}
.play_Section .blue_Overlay .play-layers.layer14.layer54 {
top: 826vw;
right: 6vw;
width: 36vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer14.layer54 {
top: 2939vw;
left: auto;
right: 5vw;
width: 50vw;
}
}
.play_Section .blue_Overlay .play-layers.layer15 {
top: 250.5vw;
right: 17vw;
width: 40vw;
}
.play_Section .blue_Overlay .play-layers.layer15.layer27 {
top: 430vw;
width: 15vw;
right: 42vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer15.layer27 {
top: 1435vw;
width: 29vw;
right: 5vw;
left: auto;
}
}
.play_Section .blue_Overlay .play-layers.layer15.layer41 {
top: 653vw;
width: 22vw;
right: 39vw;
z-index: 9;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer15.layer41 {
top: 2071vw;
width: 34vw;
left: auto;
right: 9vw;
}
}
.play_Section .blue_Overlay .play-layers.layer15.layer55 {
top: 848vw;
right: 22vw;
}
@media (max-width: 767px) {
.play_Section .blue_Overlay .play-layers.layer15.layer55 {
top: 2960vw;
left: 7vw;
width: 54vw;
}
}
.play_Section .play-sec-wave {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: -5em;
}
@media (max-width: 767px) {
.play_Section .play-sec-wave {
top: 3em;
}
}
.play_Section .play-sec-wave .wave-four {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
}
.play_Section .overlay-link {
cursor: url("play_cursor_1_bw.png") 12 12, pointer !important;
}
@media (max-width: 767px) {
.play_Section .overlay-link {
z-index: 9;
}
}
/* Play Section */
.page-template-play-template .full-page-cover {
-webkit-animation: colorchange 48s infinite;
animation: colorchange 48s infinite;
-webkit-perspective: initial;
perspective: initial;
-webkit-perspective-origin: inherit;
perspective-origin: inherit;
overflow: hidden;
}
.page-template-play-template .newsletter {
background: #000000;
-webkit-animation: none;
animation: none;
}
.play_Section canvas {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
width: 100%;
}
.page-template-play-template header {
z-index: 999;
}
.page-template-play-template .header-spacer {
height: 0 !important;
}
.page-template-play-template .play-page-main {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-perspective-origin: inherit;
perspective-origin: inherit;
}
.page-template-play-template .gform_wrapper .gform_footer .button {
-webkit-animation: none;
animation: none;
color: #000;
}
@media (max-width: 767px) {
.play-page-main {
padding-top: 0px;
}
}
.play-page-main.play_Section:before {
height: 85%;
display: none;
}
@media (max-width: 767px) {
.play-page-main.play_Section:before {
height: 94%;
}
}
.play-page-main.play_Section .play_Heading {
padding: 0;
position: relative;
}
.play-page-main.play_Section .play_Heading svg {
position: relative;
z-index: 2;
margin-left: 90px;
height: auto;
width: 40%;
}
.play-page-main.play_Section canvas {
height: 100% !important;
}
.play-page-main .play-sec-wave {
position: absolute;
width: 100%;
height: 130%;
overflow: visible;
top: -30%;
}
.play-page-main .play-sec-wave:before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 500px;
bottom: 99%;
background: var(--white);
}
.play-page-main .play-sec-wave .wave-four {
height: 100%;
}
.play-page-main .blue_Overlay {
position: relative;
z-index: 3;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer1 {
display: block;
top: 3vw;
width: 43vw;
left: 49vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer2 {
display: block;
top: 32vw;
width: 47vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer3 {
display: block;
top: 75vw;
width: 56vw;
left: 36vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer4 {
display: block;
top: 140vw;
left: 13vw;
right: 0;
position: absolute;
z-index: 9;
}
}
.play-page-main .blue_Overlay .play-layers.layer5 {
top: 59vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer5 {
display: block;
top: 174vw;
left: 5vw;
right: 0;
width: 33vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer6 {
display: block;
top: 188vw;
left: 46vw;
width: 44vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer7 {
display: block;
top: 226vw;
left: 7vw;
width: 54vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer8 {
top: 100vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer8 {
display: block;
top: 240vw;
left: 62vw;
width: 31vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer9 {
top: 131vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer9 {
display: block;
top: 300vw;
left: 13vw;
width: 71vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer10 {
top: 141vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer10 {
display: block;
top: 394vw;
left: 10vw;
width: 76vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer11 {
display: block;
top: 453vw;
left: 10vw;
width: 77vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer12 {
top: 183vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer12 {
display: block;
top: 509vw;
left: 10vw;
width: 77vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer13 {
top: 195vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer13 {
display: block;
top: 551vw;
left: 10vw;
width: 77vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer14 {
top: 205vw;
right: 7vw;
}
@media (max-width: 1479px) {
.play-page-main .blue_Overlay .play-layers.layer14 {
top: 176vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer14 {
display: block;
top: 656vw;
left: -4vw;
width: 65vw;
}
}
.play-page-main .blue_Overlay .play-layers.layer15 {
top: 244vw;
right: 26vw;
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers.layer15 {
display: block;
top: 753vw;
left: 16vw;
width: 79vw;
}
}
@media (max-width: 767px) {
.play-page-main .blue_Overlay .play-layers {
display: none;
}
}
@keyframes colorchange {
0% {
background: #4fc1ef;
}
20% {
background: #c6227b;
}
40% {
background: #ed4e8d;
}
60% {
background: #ef3e23;
}
80% {
background: #f39120;
}
95% {
background: #17a555;
}
100% {
background: #4fc1ef;
}
}
.play-layers:nth-of-type(6n) img {
cursor: url("play_cursor_1.png") 12 12, pointer !important;
}
.play-layers:nth-of-type(6n - 1) img {
cursor: url("play_cursor_2.png") 12 12, pointer !important;
}
.play-layers:nth-of-type(6n - 2) img {
cursor: url("play_cursor_3.png") 12 12, pointer !important;
}
.play-layers:nth-of-type(6n - 3) img {
cursor: url("play_cursor_4.png") 12 12, pointer !important;
}
.play-layers:nth-of-type(6n - 4) img {
cursor: url("play_cursor_5.png") 12 12, pointer !important;
}
.play-layers:nth-of-type(6n - 5) img {
cursor: url("play_cursor_6.png") 12 12, pointer !important;
}
#p-play { z-index: initial !important; }
.play-page-main .blue_Overlay {
position: relative;
/*z-index: 3;*/
z-index: initial !important;
}
.play-layers { /*transition: background-color 0.2s ease-in-out;*/ }
.play-layers img { transition: all 0.2s ease-in-out; }
.play-check { display: none; }
.play-check:checked + .play-layers {
position: fixed !important;
top: 100px !important;
left: 0 !important;
width: 100% !important;
height: calc(100% - 100px) !important;
z-index: 99 !important;
margin: 0 !important;
padding: 10%;
background-color: var(--white);
animation: none !important;
opacity: 1;
transform: translateZ(0);
}
.play-check:checked + .play-layers:after {
content: '';
position: fixed;
top: -100px;
right: 0;
width: calc(100% - 200px);
height: 100px;
background-color: var(--white);
z-index: -1;
}
/*.play-check:checked + .play-layers label {
width: 80%;
height: 80%;
display: block;
position: absolute;
top: 50%;
left: 50%;
padding-bottom: 80%;
transform: translate(-50%,-50%);
}*/
.play-check:checked + .play-layers label img {
max-height: 70%;
max-width: 70%;
/* width: 100%; */
/* height: 100%; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) translateY(-50px);
}
.play-check:checked + .play-layers .hide {
display: block !important;
position: absolute;
top: 50%;
}
.play-layers #project-close {
display: none;
position: fixed;
right: 20px;
top: -60px;
}
.play-check:checked + .play-layers #project-close { display: block; }
.arrow {
display:block;
width: 40px;
height: 40px;
border-left: 4px solid var(--black);
border-top: 4px solid var(--black);
}
.a-prev {
transform: translateY(-50%) translateY(-50px) rotate(-45deg);
left: 40px;
}
.a-next {
transform: translateY(-50%) translateY(-50px) rotate(135deg);
right: 40px;
}
@media (max-width: 1100px) {
.play-check:checked + .play-layers { top: 80px !important; height: calc(100% - 80px) !important; }
.play-check:checked + .play-layers:after { height: 80px; top: -80px; }
.play-check:checked + .play-layers label img { transform: translate(-50%,-50%) translateY(-40px) }
.play-layers #project-close { top: -50px }
.a-prev { transform: translateY(-50%) translateY(-40px) rotate(-45deg); }
.a-next { transform: translateY(-50%) translateY(-40px) rotate(135deg); }
}
@media (max-width: 850px) {
.play-check:checked + .play-layers { top: 70px !important; height: calc(100% - 70px) !important; }
.play-check:checked + .play-layers:after { height: 70px; top: -70px; }
.play-check:checked + .play-layers label img { transform: translate(-50%,-50%) translateY(-35px) }
.play-layers #project-close { top: -40px }
.a-prev { transform: translateY(-50%) translateY(-35px) rotate(-45deg); }
.a-next { transform: translateY(-50%) translateY(-35px) rotate(135deg); }
}
@media (max-width: 600px) {
.arrow { width: 26px; height: 26px; }
.a-prev { left: 20px; }
.a-next { right: 20px; }
}
@media (max-width: 500px) {
.play-check:checked + .play-layers { top: 60px !important; height: calc(100% - 60px) !important; }
.play-check:checked + .play-layers:after { height: 60px; top: -60px; }
.play-check:checked + .play-layers label img { transform: translate(-50%,-50%) translateY(-30px) }
/*.play-layers #project-close { top: -30px }*/
.a-prev { transform: translateY(-50%) translateY(-30px) rotate(-45deg); }
.a-next { transform: translateY(-50%) translateY(-30px) rotate(135deg); }
}
/*
==============================================
Account Page
============================================== */
#p-account {
padding: 180px 90px 90px;
background-color: var(--cream);
min-height: 100vh;
}
#p-account h1 {
font-family: 'Romie';
text-align: center;
text-transform: none;
font-size: 60px;
letter-spacing: 72px;
margin-bottom: 30px;
letter-spacing: 0;
}
#p-account form {
width: 100%;
max-width: 530px;
margin: 0 auto;
}
#p-account form label {
display: block;
font-family: 'Avant Garde';
font-weight: bold;
font-size: 18px;
letter-spacing: 1.8px;
width: 100%;
margin-bottom: 7px;
}
#p-account form input {
width: 100%;
}
#p-account form input[type=email],#p-account form input[type=password] {
background-color: var(--white);
border: 2px solid var(--black);
border-radius: 20px;
height: 60px;
margin-bottom: 30px;
padding: 0 10px;
}
#p-account form input[type=submit] { margin: 40px 0 30px; }
@media (max-width: 800px) {
#p-account {
padding: 180px 40px 90px;
}
}
/*
==============================================
Search
============================================== */
.site-header__search {
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0 80px;
background-color: var(--white);
}
.site-header__search-btn { padding: 0; }
.site-header__search-input {
padding-left: 50px;
font-family: 'romie';
font-size: 45px;
color: var(--black);
}
.site-header__search-input::placeholder { color: var(--black); }
#search-close {
margin-left: auto;
width: 40px;
height: 40px;
position: relative;
border: 0;
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
#search-close:before, #search-close:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 4px;
background-color: var(--black);
transition: all 0.3s ease-in-out;
}
#search-close:before { transform: translate(-50%,-50%) rotateZ(45deg); }
#search-close:after { transform: translate(-50%,-50%) rotateZ(-45deg); }
#search-close:hover:before { transform: translate(-50%,-50%) rotateZ(-45deg);}
#search-close:hover:after { transform: translate(-50%,-50%) rotateZ(-135deg);}
.predictive-results { background-color: var(--white); padding: 0 80px 20px; }
.predictive__result {
align-items: initial;
}
.grid-product__title {
font-family: 'Avant Garde';
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
color: var(--black);
}
.predictive__result-image {
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-clip: border-box;
mask-clip: border-box;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.predictive__result-image:hover { transform: scale(1.05); }
.predictive__result-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit:cover;
object-position: center;
}
@media (max-width: 1100px) {
.site-header__search { padding: 0 20px }
.predictive-results { padding: 0 20px 20px; }
}
/*
==============================================
Miscellaneous
============================================== */
.page-content {
padding-top: 120px;
}
.page-content h1 {
font-size: 120px;
letter-spacing: -2px;
text-align: center;
margin-bottom: 40px;
}
@media (max-width: 700px) {
.page-content h1 {
font-size: 60px;
letter-spacing: -1px;
margin-bottom: 30px;
}
}
.grecaptcha-badge { display: none !important; }