html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
font-size: 16px;
scroll-behavior: smooth;
flex-direction: column;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
*:focus:not(:focus-visible),
*:active {
outline: none;
}
:focus-visible {
outline: 1px solid black;
}
:root {
--flow-space: 1rem;
--bg: #fff;
--fg: #000;
--fullHeight: 2000px;
--halfHeight: 1000px;
}
.noflow {
--flow-space: 0 !important;
}
html,
body {
min-height: 100%;
margin: 0;
}
html.modal-on,
body.modal-on {
overflow: hidden;
}
body {
background-color: var(--bg);
transition-property: background-color;
transition-duration: 1s;
}
body.menu-on {
overflow: hidden;
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
body.section-home {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
@font-face {
font-family: "URWGrotesk Light";
src: url("webfont/URWGroteskTOT-Light.eot");
/* IE9 Compat Modes */
src: url("webfont/URWGroteskTOT-Light.eot?#iefix") format("embedded-opentype"), url("webfont/URWGroteskTOT-Light.woff") format("woff"), url("webfont/URWGroteskTOT-Light.ttf") format("truetype"), url("webfont/URWGroteskTOT-Light.svg#2abbeb97fed36279a344e4ceca056123") format("svg");
/* Legacy iOS */
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: "URWGrotesk Light";
src: url("webfont/URWGroteskTOT-LightItalic.eot");
/* IE9 Compat Modes */
src: url("webfont/URWGroteskTOT-LightItalic.eot?#iefix") format("embedded-opentype"), url("webfont/URWGroteskTOT-LightItalic.woff") format("woff"), url("webfont/URWGroteskTOT-LightItalic.ttf") format("truetype"), url("webfont/URWGroteskTOT-LightItalic.svg#dd58cb1097634bb70ccfb692464e3d8b") format("svg");
/* Legacy iOS */
font-style: italic;
font-weight: normal;
}
/*
RULES:
- Only font declarations and character styles established here
- All font sizes, letter-spacing, and line height defined here
- Except when overriding an attibute
- No paddings or margins should go in here
*/
/*
RULES:
- Positioning elements established here
- Any reusable layout should use a unified class for placement
- Except when overriding
*/
.alignleft {
float: left;
margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
float: right;
margin: 0.375em 0 1.75em 1.75em;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto 1.75em;
}
@media (max-width: 736px) {
.alignleft,
.alignright {
float: none;
clear: both;
display: block;
margin: 0 auto 1.75em;
}
}
.gr:after {
content: "";
display: table;
clear: both;
}
.gr .gi {
display: inline-block;
vertical-align: top;
}
.gr-10 {
width: 9.99%;
}
.gr-25 {
width: 24.99%;
}
.gr-33 {
width: 33.33%;
}
.gr-40 {
width: 39.99%;
}
.gr-50 {
width: 49.99%;
}
.gr-60 {
width: 59.99%;
}
.gr-75 {
width: 74.99%;
}
.gr-90 {
width: 89.99%;
}
body.admin-bar.author {
margin-top: 32px;
}
.accounts-wrap {
padding: 0 50px;
margin-top: 30px;
}
.logged-in .accounts-wrap {
margin-top: 0;
}
.portal-wrap {
padding: 0 50px;
}
.portal-wrap.margin-bot {
margin-bottom: 100px;
}
@media (max-width: 735px) {
.portal-wrap {
padding: 0 10px;
}
}
.valign-middle {
vertical-align: middle;
padding: 15px 11px 12px 8px;
}
.table-wrap {
padding: 0 50px;
}
@media (max-width: 735px) {
.table-wrap {
padding: 0 0 0 10px;
}
.mobile-totals.mobile-show {
border-top: 1px solid black;
margin-top: 30px;
display: table;
table-layout: fixed;
}
}
.portal-header {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0 0 50px 0;
padding: 0 10px;
position: relative;
}
.portal-header svg {
display: block;
margin: 16px 0;
}
.portal-header .log-out {
position: absolute;
right: 13px;
top: 12px;
font-size: 14px;
}
.portal-header .log-out a {
text-decoration: none;
color: black;
}
@media (max-width: 735px) {
.mobile-hide {
display: none;
}
}
.mobile-show {
display: none;
}
@media (max-width: 735px) {
.mobile-show {
display: table-row;
}
}
small {
display: block;
margin-top: 5px;
color: #929497;
}
.portalGreen {
color: #00ff00;
}
.bgGreen {
background-color: #00ff00 !important;
}
.bgBlue {
background-color: #eeedf6;
}
.portalBlue {
color: #5f6db3;
}
h1.artist-name {
font-size: 56px;
line-height: 1;
position: relative;
}
@media (max-width: 735px) {
h1.artist-name {
margin-bottom: 30px;
font-size: 24px;
}
}
@media (max-width: 735px) {
.table-padding {
width: 100%;
padding-right: 10px;
}
}
@media (max-width: 735px) {
.scroll-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
#thead-placeholder {
position: fixed;
top: 0;
left: 50px;
z-index: 100;
width: 100%;
font-size: 14px;
line-height: 1.28571429;
display: none;
}
@media (min-width: 736px) {
#thead-placeholder {
width: calc(100% - 100px);
}
}
@media (max-width: 735px) {
#thead-placeholder {
left: 10px;
}
}
#thead-placeholder.loaded.show {
display: table;
}
#thead-placeholder .header-scroll {
overflow-x: auto;
white-space: nowrap;
width: 100vw;
-webkit-overflow-scrolling: touch;
}
#thead-placeholder .col {
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
background-color: #00ff00;
padding: 12px 11px 10px 8px;
min-height: 58px;
position: relative;
}
#thead-placeholder .col:last-of-type {
border-right: none;
}
#thead-placeholder .col:last-of-type:after {
display: none;
}
#thead-placeholder .col:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-right: 1px solid #fad5e5;
z-index: 2;
pointer-events: none;
mix-blend-mode: multiply;
}
table {
width: 100%;
border-collapse: collapse;
border-bottom: 1px solid black;
font-size: 14px;
line-height: 1.28571429;
mix-blend-mode: multiply;
color: #444444;
position: relative;
}
table th {
background-color: #00ff00;
font-weight: normal;
text-align: left;
position: sticky;
position: -webkit-sticky;
vertical-align: middle;
z-index: 100;
padding: 12px 12px 10px 8px;
top: 0;
}
.logged-in .portal-wrap table th {
top: 0;
}
@media (max-width: 735px) {
table th {
position: relative;
z-index: inherit;
}
}
table th:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-right: 1px solid #fad5e5;
z-index: 2;
pointer-events: none;
mix-blend-mode: multiply;
}
@media (min-width: 767px) {
.admin-bar table th {
top: 46px;
}
}
@media (min-width: 770px) {
.admin-bar table th {
top: 32px;
}
}
table td {
position: relative;
padding: 8px 11px 35px 8px;
vertical-align: top;
border-bottom: 1px solid black;
}
table td:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-right: 1px solid #fad5e5;
border-bottom: 1px solid black;
z-index: 2;
pointer-events: none;
mix-blend-mode: multiply;
}
table td:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-bottom: 1px solid black;
z-index: 5;
pointer-events: none;
}
table td.status {
cursor: pointer;
}
table td .old-status {
margin-top: 5px;
}
table td .current-status {
margin-bottom: 5px;
}
table td.no-border {
border-top: none;
}
table td.no-border:after, table td.no-border:before {
display: none;
}
table td.expanded .expand-text {
display: block;
}
table td.expanded .expand-toggle {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) !important;
opacity: 0 !important;
}
.no-touchevents table td:hover .expand-toggle {
color: #444444;
}
.no-touchevents table td:hover .expand-toggle svg path {
fill: #444444;
}
table th:last-of-type,
table td:last-of-type {
border-right-color: transparent;
}
table th:last-of-type:after, table th:last-of-type:before,
table td:last-of-type:after,
table td:last-of-type:before {
display: none;
}
table tfoot {
border-top: 1px solid black;
}
@media (max-width: 735px) {
table tfoot td {
border-top: none;
}
}
table tfoot td:nth-of-type(even) {
background-color: transparent;
}
.no-touchevents table tr:hover td .expand-toggle {
opacity: 1;
}
table tr.row-closed td {
color: #b3b3b3;
}
table.finalCosts {
border-bottom: none;
}
table.finalCosts td {
padding: 0;
}
table.finalCosts td.border-top {
border-top: 1px solid black;
}
.dl-link {
display: block;
line-height: 1;
font-size: 14px;
text-decoration: none;
color: black;
position: absolute;
right: 0;
top: 18px;
font-weight: normal;
}
@media (max-width: 735px) {
.dl-link {
top: auto;
bottom: -9px;
}
}
.dl-link:before {
content: "";
background: url(../images/pdf-button.jpg) 50% 50% no-repeat;
position: absolute;
right: 100%;
top: -6px;
margin-right: 12px;
width: 50px;
height: 50px;
background-size: contain;
cursor: pointer;
}
.cost-summary {
margin-top: 80px;
border-top: 1px solid black;
border-bottom: none;
}
.cost-summary td {
border-right-color: transparent;
border-bottom: none;
}
.cost-summary td:after, .cost-summary td:before {
display: none;
}
.cost-summary table .padding-bot {
padding-bottom: 7px;
}
.cost-summary table .border-top {
padding-top: 10px;
}
.cost-summary table td:after {
display: none;
}
@media (max-width: 735px) {
.cost-summary {
table-layout: fixed;
vertical-align: middle;
margin-top: 30px;
}
.cost-summary td {
padding: 15px 11px 12px 8px;
border-bottom: 1px solid black;
}
.cost-summary td:first-of-type {
background-color: transparent !important;
}
}
.infoPlacements p {
margin: 0;
padding-left: 15px;
position: relative;
}
.infoPlacements .greenBullet {
position: absolute;
left: 0;
top: 2px;
}
.check {
color: #00ff00;
font-size: 20px;
}
.greenBullet {
border-radius: 50%;
background-color: #00ff00;
width: 10px;
height: 10px;
margin-right: 7px;
display: inline-block;
}
.expand-text {
display: none;
color: #929497;
font-size: 12px;
}
.expand-toggle {
display: block;
margin-top: 5px;
color: #929497;
font-size: 12px;
cursor: pointer;
}
.no-touchevents .expand-toggle {
opacity: 0;
}
.tables-container.single-author tfoot,
.tables-container.single-author .cost-summary .bgGreen {
display: none;
}
.modal-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
display: none;
pointer-events: none;
}
.modal-ani .modal-wrap {
display: block;
-webkit-animation: modalOff 0.2s forwards 1;
animation: modalOff 0.2s forwards 1;
}
.modal-on .modal-wrap {
display: block;
-webkit-animation: modalOn 0.25s forwards 1;
animation: modalOn 0.25s forwards 1;
pointer-events: all;
}
@media (min-width: 768px) {
.admin-bar .modal-wrap {
top: 32px;
height: calc(100% - 32px);
}
}
.modal-wrap .modal-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
}
.modal-wrap .modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 60px;
height: 60px;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
cursor: pointer;
}
.modal-wrap .modal-close:before, .modal-wrap .modal-close:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 1px;
margin-left: -16px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.modal-wrap .modal-close:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.modal-wrap .modal-close span {
opacity: 0;
pointer-events: none;
}
.modal-wrap .modal-contents-wrap {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal-wrap .vid-embed {
position: relative;
width: 80vw;
max-height: 80vh;
}
.modal-wrap .vid-embed:before {
content: "";
position: relative;
width: 100%;
display: block;
height: 0;
padding-bottom: 56.25%;
}
.modal-wrap .vid-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-color: rgba(0, 0, 0, 0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
@-webkit-keyframes modalOff {
0% {
opacity: 1;
display: block;
}
99% {
opacity: 0;
display: block;
}
100% {
opacity: 0;
display: none;
}
}
@keyframes modalOff {
0% {
opacity: 1;
display: block;
}
99% {
opacity: 0;
display: block;
}
100% {
opacity: 0;
display: none;
}
}
@-webkit-keyframes modalOn {
0% {
opacity: 0;
display: none;
}
1% {
opacity: 0;
display: block;
}
100% {
opacity: 1;
display: block;
}
}
@keyframes modalOn {
0% {
opacity: 0;
display: none;
}
1% {
opacity: 0;
display: block;
}
100% {
opacity: 1;
display: block;
}
}
html {
font-family: "URWGrotesk Light";
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 1.6;
letter-spacing: 0.05em;
}
@media (max-width: 767px) {
html {
font-size: 16px;
}
}
header {
--bg: black;
--fg: white;
position: -webkit-sticky;
position: sticky;
top: 0;
display: flex;
height: 140px;
transition-duration: 0.15s;
align-items: flex-start;
justify-content: flex-end;
background: var(--bg);
color: var(--fg);
z-index: 5;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media (min-width: 768px) {
.admin-bar header {
top: 32px;
}
}
header h1 {
margin: 0 auto;
position: absolute;
bottom: 70px;
left: 4rem;
-webkit-transform: translate(-50%, 50%) scale(1);
transform: translate(-50%, 50%) scale(1);
width: 113px;
height: 90px;
}
header h1 span {
position: absolute;
opacity: 0;
pointer-events: none;
font-size: 10px;
}
header h1 svg path {
fill: var(--fg);
}
@media (max-width: 800px) {
header h1 {
width: 58px;
height: 38px;
bottom: 62px;
}
}
header .menu-primary-nav-container {
margin: 1rem 1rem 0 0;
font-family: "URWGrotesk Light";
font-style: normal;
font-weight: normal;
font-size: 20px;
}
header .menu-primary-nav-container ul {
list-style: none;
display: flex;
margin: 0;
}
header .menu-primary-nav-container ul li {
margin-left: 2rem;
}
header .menu-primary-nav-container a {
text-decoration: none;
color: inherit;
}
header .menu-primary-nav-container .current-menu-item a {
opacity: 0.5;
}
@media (max-width: 800px) {
header .menu-primary-nav-container {
margin: 0.5rem auto 0;
}
header .menu-primary-nav-container ul li {
margin: 0 1rem;
}
}
header .site-name {
margin: 1rem auto 1rem 1rem;
display: none;
color: inherit;
text-decoration: none;
}
.section-home header {
margin-top: var(--fullHeight);
border-color: transparent;
}
@media (max-width: 768px) {
.section-home header {
margin-top: 140vw;
margin-top: var(--halfHeight);
}
}
.section-home header h1 {
-webkit-animation: logoOut 0.2s forwards 1;
animation: logoOut 0.2s forwards 1;
}
.section-home header .site-name {
display: block;
transition-duration: 0.15s;
}
.section-home header.scrolled h1 {
-webkit-animation: logoIn 1s forwards 1;
animation: logoIn 1s forwards 1;
}
.section-home header.scrolled .site-name {
opacity: 0;
}
.allow-home-ani header {
transition-duration: 0.3s;
}
@media (max-width: 767px) {
header {
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
min-height: 80px;
padding: 1rem 0;
}
.menu-on header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
margin: 0 !important;
transition-duration: 0s;
}
.menu-on header h1 {
-webkit-animation: logoIn 1s forwards 1;
animation: logoIn 1s forwards 1;
}
.menu-on header .site-name {
opacity: 0;
}
header .site-name {
margin: auto auto auto 1rem;
-webkit-transform: translateY(0.125rem);
transform: translateY(0.125rem);
}
header h1 {
margin: auto;
left: 2.5rem;
bottom: auto;
top: 0;
}
header h1 svg {
margin-top: -0.1rem;
}
header .menu-primary-nav-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
display: none;
}
.menu-on header .menu-primary-nav-container {
display: flex;
}
header .menu-primary-nav-container ul {
margin: 80px auto 0;
padding: 0;
flex-direction: column;
text-align: center;
font-size: 32px;
width: 100%;
}
header .menu-primary-nav-container ul li {
margin-top: 1rem;
}
header .menu-toggle {
position: absolute;
top: 1.85rem;
right: 1rem;
width: 40px;
height: 40px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header .menu-toggle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 15px;
border-top: solid 1px;
border-bottom: solid 1px;
border-color: white;
margin: -7px 0 0 -12px;
}
header .menu-toggle:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
margin-left: -12px;
height: 1px;
background: white;
}
.menu-on header .menu-toggle:before {
border: none;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
margin-left: -12px;
margin-top: 0;
height: 1px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-on header .menu-toggle:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 0;
}
}
@media (max-width: 767px) and (max-width: 767px) {
header .menu-toggle {
top: 2.35rem;
}
}
@-webkit-keyframes logoIn {
0% {
-webkit-transform: translate(-50%, 50%) scale(0.5);
transform: translate(-50%, 50%) scale(0.5);
opacity: 0;
}
40% {
-webkit-transform: translate(-50%, 50%) scale(0.5);
transform: translate(-50%, 50%) scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, 50%) scale(1);
transform: translate(-50%, 50%) scale(1);
opacity: 1;
}
}
@keyframes logoIn {
0% {
-webkit-transform: translate(-50%, 50%) scale(0.5);
transform: translate(-50%, 50%) scale(0.5);
opacity: 0;
}
40% {
-webkit-transform: translate(-50%, 50%) scale(0.5);
transform: translate(-50%, 50%) scale(0.5);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, 50%) scale(1);
transform: translate(-50%, 50%) scale(1);
opacity: 1;
}
}
@-webkit-keyframes logoOut {
0% {
-webkit-transform: translate(-50%, 50%) scale(1);
transform: translate(-50%, 50%) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translate(-50%, 50%) scale(0.5);
transform: translate(-50%, 50%) scale(0.5);
opacity: 0;
}
}
@keyframes logoOut {
0% {
-webkit-transform: translate(-50%, 50%) scale(1);
transform: translate(-50%, 50%) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translate(-50%, 50%) scale(0.5);
transform: translate(-50%, 50%) scale(0.5);
opacity: 0;
}
}
.home-gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media (min-width: 768px) {
.admin-bar .home-gallery {
top: 32px;
height: calc(100% - 32px);
}
}
.home-gallery .img-label {
position: absolute;
left: 1rem;
top: 1rem;
color: white;
z-index: 3;
opacity: 0;
transition-duration: 0.15s;
}
.home-gallery .active .img-label {
opacity: 1;
}
@media (max-width: 768px) {
.home-gallery {
height: 75%;
height: 140vw;
height: var(--halfHeight);
}
}
.fixed-cover {
position: relative;
background: white;
z-index: 2;
min-height: 100vh;
padding: 2rem 1rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding-bottom: 8rem;
overflow: hidden;
}
@media (max-width: 767px) {
.fixed-cover {
padding-bottom: 0;
}
}
a {
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
.blok {
display: block;
}
.wyg a {
color: inherit;
}
.items {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
-webkit-animation: fadeIn 0.3s forwards 1;
animation: fadeIn 0.3s forwards 1;
overflow: hidden;
}
.items:before {
content: "";
position: relative;
display: block;
padding-bottom: 56.25%;
}
.items li {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.items li:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg);
mix-blend-mode: multiply;
}
.items li img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.last {
z-index: 2;
}
.active {
opacity: 0;
z-index: 3;
-webkit-animation: clip_circle 2.3s forwards 1;
animation: clip_circle 2.3s forwards 1;
}
.active.active-alt {
-webkit-animation: clip_wipe 2s forwards 1;
animation: clip_wipe 2s forwards 1;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes clip_circle {
0% {
opacity: 1;
-webkit-clip-path: circle(0% at var(--posX) var(--posY));
clip-path: circle(0% at var(--posX) var(--posY));
}
100% {
opacity: 1;
-webkit-clip-path: circle(200% at var(--posX) var(--posY));
clip-path: circle(200% at var(--posX) var(--posY));
}
}
@keyframes clip_circle {
0% {
opacity: 1;
-webkit-clip-path: circle(0% at var(--posX) var(--posY));
clip-path: circle(0% at var(--posX) var(--posY));
}
100% {
opacity: 1;
-webkit-clip-path: circle(200% at var(--posX) var(--posY));
clip-path: circle(200% at var(--posX) var(--posY));
}
}
@-webkit-keyframes clip_wipe {
0% {
opacity: 1;
-webkit-clip-path: polygon(var(--posX) 0%, var(--posX) 0%, var(--posX) 100%, var(--posX) 100%);
clip-path: polygon(var(--posX) 0%, var(--posX) 0%, var(--posX) 100%, var(--posX) 100%);
}
100% {
opacity: 1;
-webkit-clip-path: polygon(-50% 0%, 150% 0%, 150% 100%, -50% 100%);
clip-path: polygon(-50% 0%, 150% 0%, 150% 100%, -50% 100%);
}
}
@keyframes clip_wipe {
0% {
opacity: 1;
-webkit-clip-path: polygon(var(--posX) 0%, var(--posX) 0%, var(--posX) 100%, var(--posX) 100%);
clip-path: polygon(var(--posX) 0%, var(--posX) 0%, var(--posX) 100%, var(--posX) 100%);
}
100% {
opacity: 1;
-webkit-clip-path: polygon(-50% 0%, 150% 0%, 150% 100%, -50% 100%);
clip-path: polygon(-50% 0%, 150% 0%, 150% 100%, -50% 100%);
}
}
.inset-width {
padding-left: 8rem;
padding-right: 8rem;
}
@media (max-width: 900px) {
.inset-width {
padding-left: 0;
padding-right: 0;
}
.inset-width > .page-title,
.inset-width > .wyg {
padding-left: 1rem;
padding-right: 1rem;
}
.inset-width.about-content > * {
padding-left: 1rem;
padding-right: 1rem;
}
}
.page-title {
font-size: 35px;
line-height: 1.14;
font-weight: normal;
text-align: center;
margin: 5rem 0 5rem;
}
@media (max-width: 768px) {
.page-title {
font-size: 26px;
}
}
@media (max-width: 767px) {
.page-title {
margin: 2rem 0;
}
}
.section-title {
position: relative;
font-size: 1em;
margin: 5rem 0 3rem;
font-weight: normal;
border-top: solid 1px;
padding-top: 0.5rem;
}
.section-title.comps-title {
margin-top: 3rem;
}
@media (min-width: 900px) {
.section-title {
margin-left: -1.5rem;
width: calc(100% + 3rem);
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (max-width: 767px) {
.section-title {
margin-bottom: 1rem;
}
.section-title.comps-title {
margin-top: 2rem;
}
}
.artist-list,
.placements-list,
.placements-grid {
margin-bottom: 8rem;
}
@media (min-width: 900px) {
.artist-list,
.placements-list,
.placements-grid {
margin-left: -1.5rem;
width: calc(100% + 3rem);
}
}
.artist-list .single-artist,
.artist-list .single-placement,
.placements-list .single-artist,
.placements-list .single-placement,
.placements-grid .single-artist,
.placements-grid .single-placement {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (max-width: 900px) {
.artist-list .single-artist,
.artist-list .single-placement,
.placements-list .single-artist,
.placements-list .single-placement,
.placements-grid .single-artist,
.placements-grid .single-placement {
padding-left: 1rem;
padding-right: 1rem;
}
}
.placements-list {
margin-bottom: 0;
}
.placements-grid {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 0;
}
@media (max-width: 767px) {
.placements-grid {
margin-top: 0;
}
}
.single-placement {
padding-top: 1rem;
border-top: solid 1px;
padding-bottom: 3rem;
}
.placements-list .single-placement {
padding-bottom: 1rem;
}
@media (max-width: 767px) {
.single-placement {
padding-bottom: 1.5rem;
}
.placements-list .single-placement {
padding-bottom: 1.5rem;
}
}
.placement-info {
margin-top: 1rem;
line-height: 1.3;
}
.placement-info p {
margin: 0;
}
ul.compositions-featured {
margin: 0 0 4rem;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
position: relative;
}
ul.compositions-featured li {
width: 100%;
max-width: 350px;
border: solid 1px;
border-radius: 3px;
overflow: hidden;
padding: 1.5rem;
z-index: 0;
background: var(--bg);
}
@media (max-width: 810px) {
ul.compositions-featured li {
max-width: 250px;
}
}
@media (max-width: 800px) {
ul.compositions-featured li {
padding: 1rem;
}
}
ul.compositions-featured li.moving {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
ul.compositions-featured li.left-2 {
margin-left: -8rem;
}
ul.compositions-featured li.left-1 {
margin-left: -4rem;
}
ul.compositions-featured li.right-1 {
margin-left: 4rem;
}
ul.compositions-featured li.right-2 {
margin-left: 8rem;
}
@media (max-width: 1100px) {
ul.compositions-featured li.left-2 {
margin-left: -4rem;
}
ul.compositions-featured li.left-1 {
margin-left: -2rem;
}
ul.compositions-featured li.right-1 {
margin-left: 2rem;
}
ul.compositions-featured li.right-2 {
margin-left: 4rem;
}
}
@media (max-width: 900px) {
ul.compositions-featured li.left-2 {
margin-left: -2rem;
}
ul.compositions-featured li.left-1 {
margin-left: -1rem;
}
ul.compositions-featured li.right-1 {
margin-left: 1rem;
}
ul.compositions-featured li.right-2 {
margin-left: 2rem;
}
}
ul.compositions-featured li.left {
z-index: 0;
}
ul.compositions-featured li.center {
z-index: 2;
}
ul.compositions-featured li.right-1 {
z-index: 2;
}
ul.compositions-featured li.right-2 {
z-index: 1;
}
ul.compositions-featured li.left-2.top + li {
z-index: 4;
}
ul.compositions-featured li.left.top ~ .center {
z-index: 3;
}
ul.compositions-featured li.top {
z-index: 5;
}
ul.compositions-featured .txt-wrap {
text-align: center;
padding-top: 1rem;
line-height: 1;
}
ul.compositions-featured .txt-wrap a {
color: inherit;
text-decoration: none;
}
ul.compositions-featured .txt-wrap a:hover {
text-decoration: underline;
}
ul.compositions-featured .txt-wrap .listen-links {
margin-top: 1rem;
font-size: 16px;
line-height: 0.9;
}
ul.compositions-featured .img-wrap {
position: relative;
padding-bottom: 100%;
background-color: #eaeaea;
border-radius: 2px;
overflow: hidden;
}
ul.compositions-featured .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 901px) {
ul.compositions-featured.compositions-active li.left-2 {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
ul.compositions-featured.compositions-active li.left-1 {
-webkit-transform: translateX(-75%);
transform: translateX(-75%);
}
ul.compositions-featured.compositions-active li.right-1 {
-webkit-transform: translateX(-25%);
transform: translateX(-25%);
}
ul.compositions-featured.compositions-active li.right-2 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.single-placement-feature {
position: relative;
max-width: 634px;
margin-left: auto;
margin-right: auto;
}
.single-placement-feature .placement-info {
margin-top: 0.5rem;
}
.single-placement-feature .placement-info p {
margin: 0;
}
@media (max-width: 767px) {
.placement-info {
font-size: 16px;
margin-top: 0.5rem;
}
.placement-info p {
margin: 0;
}
}
.placement-embed {
position: relative;
border-radius: 3px;
padding-bottom: 56.25%;
}
.placement-embed.empty {
background: #eaeaea;
padding-bottom: 56.25%;
}
.placement-embed .embed-hold {
position: absolute;
opacity: 0;
pointer-events: none;
}
.placement-embed img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
border-radius: 3px;
}
.placement-embed.has-video:before {
content: "";
position: absolute;
bottom: 0.625rem;
left: 0.625rem;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
z-index: 2;
pointer-events: none;
}
.placement-embed.has-video:after {
content: "";
position: absolute;
bottom: 1.25rem;
left: 1.125rem;
width: 14px;
height: 14px;
border-right: solid 1px;
border-bottom: solid 1px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 3;
pointer-events: none;
}
.mc-field-group {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-bottom: 1rem;
}
.mc-field-group label {
white-space: nowrap;
margin-right: 1rem;
}
.mc-field-group input[type=text],
.mc-field-group input[type=email] {
display: block;
width: 100%;
border: solid 1px;
font-family: "URWGrotesk Light";
font-style: normal;
font-weight: normal;
font-size: 20px;
}
footer {
position: relative;
background: var(--bg);
color: var(--fg);
padding: 1rem;
display: flex;
justify-content: space-between;
}
footer .ribbon-social {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
footer .ribbon-social > * {
display: block;
position: relative;
margin-right: 1rem;
}
footer .ribbon-social .social-yt {
width: 24.29px;
height: 17px;
}
footer .ribbon-social .social-ig {
width: 18px;
height: 18px;
}
footer .ribbon-social .social-tw {
width: 20.92px;
height: 17px;
}
footer a {
color: inherit;
text-decoration: none;
}
.featured-comp-carousel {
list-style: none;
margin: 0;
padding: 0;
margin-left: -1rem;
width: calc(100% + 2rem);
position: relative;
overflow: hidden;
}
.featured-comp-carousel:not(.flickity-enabled) li:first-child {
position: relative;
}
.featured-comp-carousel li {
top: 0;
left: 0;
flex-shrink: 0;
top: 0;
z-index: -1;
position: absolute;
width: 100%;
max-width: 350px;
border: solid 1px;
border-radius: 8px;
padding: 1.5rem;
margin-right: 30px;
z-index: 0;
background: var(--bg);
transition-duration: 0.3s;
}
@media (max-width: 810px) {
.featured-comp-carousel li {
max-width: 250px;
}
}
@media (max-width: 800px) {
.featured-comp-carousel li {
padding: 1rem;
}
}
.featured-comp-carousel li .txt-wrap {
text-align: center;
padding-top: 1rem;
line-height: 1;
}
.featured-comp-carousel li .txt-wrap a {
color: inherit;
text-decoration: none;
}
.featured-comp-carousel li .txt-wrap a:hover {
text-decoration: underline;
}
.featured-comp-carousel li .txt-wrap .listen-links {
font-size: 16px;
line-height: 0.9;
}
.featured-comp-carousel li .img-wrap {
position: relative;
padding-bottom: 100%;
background-color: #eaeaea;
border-radius: 2px;
overflow: hidden;
}
.featured-comp-carousel li .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.featured-comp-carousel li:nth-of-type(1) {
left: 0;
z-index: 3;
}
.featured-comp-carousel li:nth-of-type(2) {
left: 30px;
z-index: 2;
}
.featured-comp-carousel li:nth-of-type(3) {
left: 60px;
z-index: 1;
}
.featured-comp-carousel li:nth-of-type(4) {
left: 90px;
z-index: 0;
}
.featured-comp-carousel li:nth-of-type(5) {
left: 120px;
z-index: -1;
}
.featured-comp-carousel li:nth-of-type(6) {
left: 150px;
z-index: -2;
}
.featured-comp-carousel li:nth-of-type(7) {
left: 180px;
z-index: -3;
}
.featured-comp-carousel li:nth-of-type(8) {
left: 210px;
z-index: -4;
}
.featured-comp-carousel li:nth-of-type(9) {
left: 240px;
z-index: -5;
}
.featured-comp-carousel li:nth-of-type(10) {
left: 270px;
}
.featured-comp-carousel li:nth-of-type(11) {
left: 300px;
}
.featured-comp-carousel li:nth-of-type(12) {
left: 330px;
}
.featured-comp-carousel li:nth-of-type(13) {
left: 360px;
}
.featured-comp-carousel li:nth-of-type(14) {
left: 390px;
}
.featured-comp-carousel li:nth-of-type(15) {
left: 420px;
}
.featured-comp-carousel li:nth-of-type(16) {
left: 450px;
}
.featured-comp-carousel li:nth-of-type(17) {
left: 480px;
}
.featured-comp-carousel li:nth-of-type(18) {
left: 510px;
}
.featured-comp-carousel li:nth-of-type(19) {
left: 570px;
}
.featured-comp-carousel li:nth-of-type(20) {
left: 600px;
}
.featured-comp-carousel li:nth-of-type(21) {
left: 630px;
}
.featured-comp-carousel li:nth-of-type(22) {
left: 660px;
}
.featured-comp-carousel li:nth-of-type(23) {
left: 690px;
}
/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: none;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- flickity-button ---- */
.flickity-button {
position: absolute;
background: rgba(255, 255, 255, 0.75);
border: none;
color: #333;
}
.flickity-button:hover {
background: white;
cursor: pointer;
}
.flickity-button:focus {
outline: none;
box-shadow: 0 0 0 5px #19f;
}
.flickity-button:active {
opacity: 0.6;
}
.flickity-button:disabled {
opacity: 0.3;
cursor: auto;
/* prevent disabled button from capturing pointer up event. #716 */
pointer-events: none;
}
.flickity-button-icon {
fill: currentColor;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
top: 50%;
width: 44px;
height: 44px;
border-radius: 50%;
/* vertically center */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button.previous {
left: 10px;
}
.flickity-prev-next-button.next {
right: 10px;
}
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots {
direction: rtl;
}
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}
.swiperjs-wrap .slide-single {
width: 33.333%;
}
.swiperjs-wrap .img-wrap {
height: auto;
}
/**
* Swiper 7.3.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2021 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: November 24, 2021
*/
@font-face {
font-family: swiper-icons;
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color: #007aff;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
margin-left: -1.5rem;
width: calc(100% + 3rem);
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
box-sizing: content-box;
}
.swiper-wrapper .img-wrap {
height: auto;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-pointer-events {
touch-action: pan-y;
}
.swiper-pointer-events.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
-webkit-margin-start: var(--swiper-centered-offset-before);
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
-webkit-margin-before: var(--swiper-centered-offset-before);
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
:root {
--swiper-navigation-size: 44px;
}
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 10px;
right: auto;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: "prev";
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: 10px;
left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: "next";
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 0.3s opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(0.33);
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: 50%;
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet:only-child {
display: none !important;
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 0.2s top, 0.2s -webkit-transform;
transition: 0.2s transform, 0.2s top;
transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 0.2s left, 0.2s -webkit-transform;
transition: 0.2s transform, 0.2s left;
transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 0.2s right, 0.2s -webkit-transform;
transition: 0.2s transform, 0.2s right;
transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform;
}
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-lock {
display: none;
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
touch-action: none;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s infinite linear;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.swiper .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube {
overflow: visible;
}
.swiper-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next + .swiper-slide,
.swiper-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
content: "";
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
-webkit-filter: blur(50px);
filter: blur(50px);
}
.swiper-flip {
overflow: visible;
}
.swiper-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
transition-property: opacity, height, -webkit-transform;
transition-property: transform, opacity, height;
transition-property: transform, opacity, height, -webkit-transform;
}
.swiper-cards {
overflow: visible;
}
.swiper-cards .swiper-slide {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
main .swiper-free-mode > .swiper-wrapper {
transition-duration: 0s;
transition-timing-function: linear;
}
.swiper {
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.swiper .swiper-slide {
height: 100%;
}
.swiper:not(.swiper-initialized) .swiper-wrapper > .carousel-item {
opacity: 0.01;
}
.swiper-nav {
position: absolute;
top: 0.5rem;
right: 0;
display: flex;
}
@media (min-width: 768px) {
.swiper-nav {
right: 1.5rem;
}
}
.swiper-nav button {
position: relative;
width: 30px;
height: 30px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
cursor: pointer;
}
.swiper-nav button:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-right: solid 1px;
border-bottom: solid 1px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: -6px 0 0 -6px;
border-color: black;
}
.swiper-nav button.prev:before {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.swiper-nav button span {
display: none;
}
.swiper-autoheight {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.carousel-wrap,
.ani-overlay {
margin-left: -1rem;
width: calc(100% + 2rem);
display: flex;
}
.carousel-wrap .flickity-viewport,
.ani-overlay .flickity-viewport {
padding-top: 1rem;
padding-bottom: 1rem;
overflow: visible;
}
.carousel-wrap .carousel-item,
.ani-overlay .carousel-item {
display: flex;
flex-direction: column;
width: 25%;
padding: 2rem 1.5rem 1.375rem;
border: solid 1px;
margin-right: 1rem;
text-align: center;
border-radius: 4px;
transition-duration: 0.15s;
transition-property: border-color, box-shadow, -webkit-transform;
transition-property: border-color, box-shadow, transform;
transition-property: border-color, box-shadow, transform, -webkit-transform;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0);
}
@media (max-width: 767px) {
.carousel-wrap .carousel-item,
.ani-overlay .carousel-item {
width: 275px;
}
}
.carousel-wrap .carousel-item.placement,
.ani-overlay .carousel-item.placement {
padding-top: 1.5rem;
width: 50%;
}
@media (max-width: 767px) {
.carousel-wrap .carousel-item.placement,
.ani-overlay .carousel-item.placement {
width: 275px;
}
}
@media (hover: hover) {
.carousel-wrap .carousel-item:not(.writer):hover,
.ani-overlay .carousel-item:not(.writer):hover {
border-color: rgba(0, 0, 0, 0);
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
}
}
@media (max-width: 767px) {
.carousel-wrap .carousel-item,
.ani-overlay .carousel-item {
padding: 1rem 1rem 1.375rem;
}
}
.carousel-wrap .carousel-text,
.ani-overlay .carousel-text {
margin: 1.375rem 0 0;
}
.carousel-wrap .carousel-text .titles.blok,
.ani-overlay .carousel-text .titles.blok {
line-height: 1.333;
}
.carousel-wrap .img-wrap,
.ani-overlay .img-wrap {
position: relative;
width: 100%;
max-width: 175px;
margin-left: auto;
margin-right: auto;
flex-shrink: 0;
}
.carousel-wrap .img-wrap:before,
.ani-overlay .img-wrap:before {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.carousel-wrap .img-wrap.round,
.ani-overlay .img-wrap.round {
border-radius: 50%;
overflow: hidden;
height: auto;
}
.carousel-wrap .img-wrap img,
.ani-overlay .img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.carousel-wrap .writer,
.ani-overlay .writer {
padding-left: 2rem;
padding-right: 2rem;
}
.carousel-wrap .writer .img-wrap,
.ani-overlay .writer .img-wrap {
background: #efefef;
}
.carousel-wrap.flickity-enabled .carousel-item,
.ani-overlay.flickity-enabled .carousel-item {
min-height: 100%;
}
.placements-featured-carousel .carousel-item {
min-height: 300px;
}
.text-additional,
.wyg-additional {
margin-top: 0.75rem;
font-size: 16px;
line-height: 0.9;
line-height: 1.25;
text-align: left;
}
.text-additional a,
.wyg-additional a {
color: inherit;
text-decoration: none;
}
@media (hover: hover) {
.text-additional a:hover,
.wyg-additional a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
text-decoration-thickness: 1px;
}
}
.text-additional p,
.wyg-additional p {
margin: 0;
}
.text-additional p:not(:first-child),
.wyg-additional p:not(:first-child) {
margin-top: 0.75em;
}
.carousel-item.placement .placement-info {
text-align: left;
}
.text-additional {
max-height: 30px;
min-height: 30px;
overflow: hidden;
margin-top: 0.9rem;
transition-duration: 0.5s;
transition-delay: 0s;
opacity: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
@media (max-width: 767px) {
.text-additional {
max-height: 900px;
min-height: 30px;
opacity: 1;
}
}
.img-wrap-flex {
height: 100%;
position: relative;
}
.img-wrap-flex img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: 3px;
}
.compositions-featured-carousel .carousel-item {
width: 375px;
height: 440px;
}
@media (max-width: 767px) {
.compositions-featured-carousel .carousel-item {
width: 275px;
}
}
.compositions-featured-carousel .carousel-item {
height: 440px !important;
}
.compositions-featured-carousel .carousel-item:hover .text-additional {
max-height: 300px;
opacity: 1;
}
.ani-overlay {
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate3d(0, 0.5rem, 0);
transform: translate3d(0, 0.5rem, 0);
display: flex;
justify-content: center;
background: white;
z-index: 5;
width: 100%;
height: 100%;
height: calc(100% - 1rem);
left: 50%;
-webkit-transform: translate3d(-50%, 0.5rem, 0);
transform: translate3d(-50%, 0.5rem, 0);
}
.ani-overlay:before {
content: "";
position: absolute;
left: 100%;
width: 1rem;
height: 100%;
background: white;
}
.swiper-comps .ani-overlay {
height: 440px;
}
.ani-overlay .carousel-item {
position: absolute;
top: 0;
left: 50%;
height: 100%;
background: white;
transition-duration: 0.4s;
margin-left: 0.5rem;
}
.swiper-comps .ani-overlay .carousel-item {
width: 375px;
height: 440px;
}
@media (max-width: 767px) {
.swiper-comps .ani-overlay .carousel-item {
width: 275px;
}
}
.swiper-placements .ani-overlay .carousel-item {
padding-top: 1.5rem;
width: 50vw;
}
@media (max-width: 767px) {
.swiper-placements .ani-overlay .carousel-item {
width: 275px;
}
}
.swiper-writers .ani-overlay .carousel-item {
width: 25vw;
}
@media (max-width: 767px) {
.swiper-writers .ani-overlay .carousel-item {
width: 275px;
}
}
.ribbon-playlist-wrap,
.morelink-wrap {
text-align: center;
margin: 2.5rem 0 2rem;
}
.ribbon-playlist-wrap a,
.morelink-wrap a {
color: inherit;
}
.text-intro,
.stick-columns {
font-size: 35px;
line-height: 1.14;
font-weight: normal;
}
@media (max-width: 768px) {
.text-intro,
.stick-columns {
font-size: 26px;
}
}
.scroll-col :first-child {
margin-top: 0;
}
.scroll-col :last-child {
margin-bottom: 0;
}
.stick-columns {
display: flex;
margin-top: 5rem;
}
.stick-columns .stick-col {
width: 20%;
position: -webkit-sticky;
position: sticky;
top: 220px;
flex-shrink: 0;
margin-bottom: auto;
}
@media (max-width: 900px) {
.stick-columns {
width: auto;
margin-top: 2.5rem;
}
.stick-columns .scroll-col {
padding-left: 1rem;
}
}
.text-cols {
font-size: 16px;
line-height: 0.9;
line-height: 1.25;
margin-top: 5rem;
}
.text-cols a {
color: inherit;
}
@media (min-width: 768px) {
.text-cols {
display: flex;
}
.text-cols > * {
flex-basis: 0;
flex-grow: 1;
}
.text-cols > *:first-child {
padding-right: 1rem;
}
.text-cols > *:last-child {
padding-last: 1rem;
}
}
@media (max-width: 767px) {
.text-cols {
margin-top: 2.5rem;
}
}
.bg-pickup {
background-color: var(--colorPickup);
}
.sticky {
position: -webkit-sticky;
position: sticky;
}
.bbox, .placements-list li .placement-info, .album-grid .album-info, .artist-list, .content {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.mobile-only {
display: none;
}
@media (max-width: 735px) {
.mobile-only {
display: block;
}
}
.tablet-only {
display: none;
}
@media (min-width: 736px) {
.tablet-only {
display: block;
}
}
@media (max-width: 735px) {
.h-mob {
display: none !important;
}
}
@media (min-width: 736px) {
.h-dt {
display: none !important;
}
}
.sprite, .album-grid .album-links a.artist-www:after, .album-grid li.open .album-toggle:after, .social-links li a.social-link, .linkAft12, .artist-list .artist-www:after {
background-image: url(../images/sprite.png);
background-image: url(../images/sprite.svg);
background-repeat: no-repeat;
background-size: 468px 144px;
}
.linkAft12, .artist-list .artist-www:after {
content: "";
width: 12px;
height: 12px;
display: block;
background-position: -432px 0;
position: absolute;
}
.section-content,
.archive-contents {
-webkit-animation: fadeIn 1s forwards 1;
animation: fadeIn 1s forwards 1;
}
.section-list .section-content, .section-contact .section-content {
border-top: 1px solid black;
}
.section-contact .section-content {
padding: 1em 20px;
}
@media (min-width: 736px) {
.section-contact .section-content {
padding: 1em 100px;
}
}
.section-contact .section-content a {
text-decoration: none;
color: inherit;
}
.no-touchevents .section-contact .section-content a:hover {
color: #0071bc;
}
.no-touchevents .section-label .section-contact .section-content a:hover {
color: #d8b900;
}
.no-touchevents .section-placement .section-contact .section-content a:hover {
color: #911010;
}
.section-contact .section-content p:nth-of-type(1) {
margin-top: 0;
}
@-webkit-keyframes (fadeIn) {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes (fadeIn) {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.home-contents {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.ball-ani {
position: absolute;
top: 50%;
left: 50%;
width: 670px;
height: 530px;
z-index: 3;
margin: -335px 0 0 -265px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ball-ani svg {
position: relative;
width: 670px;
height: 530px;
}
@media (max-width: 1200px) and (min-height: 800px), (min-width: 1200px) and (max-height: 800px) {
.ball-ani {
width: 536px;
height: 424px;
margin: -268px 0 0 -212px;
}
.ball-ani svg {
width: 536px;
height: 424px;
}
}
.social-links {
margin: 0;
padding: 0;
list-style: none;
align-items: center;
height: 18px;
}
header .social-links {
display: none;
position: absolute;
top: 40px;
left: 36px;
}
@media (max-width: 769px) {
header .social-links {
left: 16px;
}
}
@media (max-width: 735px) {
header .social-links {
top: 24px;
left: 12px;
}
}
.section-home header .social-links {
display: block;
}
@media (max-width: 735px) {
.section-home.menu-on header .social-links {
display: none;
}
}
.social-links li {
display: inline-block;
width: 36px;
height: 36px;
}
.social-links li.youtube-social-wrap {
margin-right: 3px;
}
.social-links li.twitter-social-wrap {
white-space: nowrap;
position: relative;
}
.social-links li.twitter-social-wrap .twitter-text-link {
display: none;
}
.social-links li a.social-link {
display: block;
text-indent: -9999px;
height: 100%;
}
.social-links li a.social-link.soundcloud-link {
background-position: -216px 0;
}
.social-links li a.social-link.soundcloud-link:hover {
background-position: -216px -36px;
}
.section-placement .social-links li a.social-link.soundcloud-link:hover {
background-position: -216px -72px;
}
.section-label .social-links li a.social-link.soundcloud-link:hover {
background-position: -216px -108px;
}
.social-links li a.social-link.youtube-link {
background-position: -252px 0;
}
.social-links li a.social-link.youtube-link:hover {
background-position: -252px -36px;
}
.section-placement .social-links li a.social-link.youtube-link:hover {
background-position: -252px -72px;
}
.section-label .social-links li a.social-link.youtube-link:hover {
background-position: -252px -108px;
}
.social-links li a.social-link.facebook-link {
background-position: -288px 0;
}
.social-links li a.social-link.facebook-link:hover {
background-position: -288px -36px;
}
.section-placement .social-links li a.social-link.facebook-link:hover {
background-position: -288px -72px;
}
.section-label .social-links li a.social-link.facebook-link:hover {
background-position: -288px -108px;
}
.social-links li a.social-link.instagram-link {
background-position: -324px 0;
}
.social-links li a.social-link.instagram-link:hover {
background-position: -324px -36px;
}
.social-links li a.social-link.twitter-link {
background-position: -360px 0;
}
.social-links li a.social-link.twitter-link:hover {
background-position: -360px -36px;
}
.section-placement .social-links li a.social-link.twitter-link:hover {
background-position: -360px -72px;
}
.section-label .social-links li a.social-link.twitter-link:hover {
background-position: -360px -108px;
}
.social-links li.hovered a.social-link.twitter-link {
background-position: -360px -36px;
}
.section-placement .social-links li.hovered a.social-link.twitter-link:hover {
background-position: -360px -72px;
}
.section-label .social-links li.hovered a.social-link.twitter-link:hover {
background-position: -360px -108px;
}
.social-links li.list-li {
width: 46px;
text-align: center;
margin-left: 5px;
height: 100%;
}
.social-links li a.list-link {
font-size: 16px;
padding-bottom: 4px;
text-decoration: none;
color: #000;
}
.section-list .social-links li a.list-link, .social-links li a.list-link:hover {
border-bottom: solid 1px #000;
}
.gradient-bg {
position: fixed;
top: 0px;
right: 0px;
bottom: 100px;
left: 0px;
z-index: -1;
background-color: #ced6ef;
-webkit-animation: bgcRot 45s linear infinite;
animation: bgcRot 45s linear infinite;
}
.gradient-bg .gradient {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
-webkit-animation: cwRot 120s linear infinite;
animation: cwRot 120s linear infinite;
z-index: 1;
}
.gradient-bg .noise {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(../images/noise.png);
opacity: 0.25;
z-index: 2;
}
@media (max-width: 735px) {
.gradient-bg {
position: fixed;
top: 80px;
right: 0px;
bottom: 0px;
left: 0px;
}
}
@-webkit-keyframes cwRot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes cwRot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes bgcRot {
0% {
background-color: #ced6ef;
}
20% {
background-color: #ced6ef;
}
25% {
background-color: #f4e3df;
}
45% {
background-color: #f4e3df;
}
50% {
background-color: #fff7d5;
}
70% {
background-color: #fff7d5;
}
75% {
background-color: #d0cfc8;
}
95% {
background-color: #d0cfc8;
}
100% {
background-color: #ced6ef;
}
}
@keyframes bgcRot {
0% {
background-color: #ced6ef;
}
20% {
background-color: #ced6ef;
}
25% {
background-color: #f4e3df;
}
45% {
background-color: #f4e3df;
}
50% {
background-color: #fff7d5;
}
70% {
background-color: #fff7d5;
}
75% {
background-color: #d0cfc8;
}
95% {
background-color: #d0cfc8;
}
100% {
background-color: #ced6ef;
}
}
@media (min-width: 736px) {
.content {
padding-top: 110px;
}
}
@media (max-width: 735px) {
.menu-on .content {
display: none;
}
.menu-on.section-home .content {
display: block;
opacity: 0;
visibility: hidden;
}
}
.artist-list .single-artist {
position: relative;
padding-top: 3px;
border-bottom: 1px solid black;
display: flex;
justify-content: flex-start;
align-items: center;
}
@media (min-height: 800px) {
.artist-list .single-artist {
padding-top: 6px;
padding-bottom: 3px;
}
}
@media (min-height: 1000px) {
.artist-list .single-artist {
padding-top: 12px;
padding-bottom: 9px;
}
}
.artist-list .single-artist:first-child {
border-top: solid 1px;
}
.artist-list .single-artist p {
margin: 0;
}
.artist-list .single-artist:hover .social-links {
display: flex;
}
.artist-list .single-artist.has-www:hover .artist-name {
display: none;
}
.artist-list .single-artist.has-www:hover .artist-www {
display: block;
margin-right: 1.5rem;
}
.artist-list .single-artist.touch-on .social-links,
.artist-list .single-artist.touch-on .artist-www {
display: flex;
position: relative;
}
.artist-list .single-artist.touch-on .social-links:before,
.artist-list .single-artist.touch-on .artist-www:before {
content: "";
display: block;
}
.artist-list .social-links {
display: none;
}
.artist-list .artist-www {
color: inherit;
text-decoration: none;
display: none;
position: relative;
}
.artist-list .artist-www:after {
top: 10px;
right: -18px;
pointer-events: none;
}
@media (max-width: 767px) {
.artist-list .artist-www:after {
top: 7px;
}
}
.artist-list .artist-www:hover {
color: #0071bc;
}
.artist-list .artist-www:hover:after {
background-position: -450px 0px;
}
.artist-list .touch-toggle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
@media (max-width: 767px) {
.artist-list .touch-toggle {
display: block;
}
}
.artist-list .touch-on .touch-toggle {
display: none;
}
@media (max-width: 1000px) {
.artist-list.list-column-1 .single-artist:last-of-type {
border-bottom: 0;
}
.artist-list .single-artist {
padding: 3px 32px;
}
}
@media (max-width: 735px) {
.artist-list .single-artist {
font-size: 16px;
padding: 8px 24px;
overflow: hidden;
}
.artist-list .single-artist .social-links li {
margin-top: 2px;
}
}
.album-grid {
margin: 0;
padding: 0;
list-style: none;
}
.album-grid li {
position: relative;
}
.album-grid li .album-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
display: none;
}
.album-grid li .album-toggle {
position: absolute;
top: 0;
right: 0;
}
.album-grid li.init-state .album-toggle {
width: 100%;
height: 100%;
background-color: transparent;
}
.album-grid li.open .album-toggle {
top: 20px;
right: 15px;
width: 20px;
height: 20px;
z-index: 3;
}
.album-grid li.open .album-toggle:before {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
.album-grid li.open .album-toggle:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-position: -432px -72px;
}
.album-grid .album-info {
padding: 20px;
}
.album-grid .album-info h1 {
font-weight: normal;
font-size: 20px;
margin: 0;
}
.album-grid .album-info h1 span {
font-style: italic;
display: block;
}
.album-grid .album-links {
text-align: center;
color: white;
}
.album-grid .album-links a {
color: white;
text-decoration: none;
}
.album-grid .album-links a.artist-www {
display: inline-block;
font-size: 16px;
margin-bottom: 24px;
}
.album-grid .album-links a.artist-www:after {
content: "";
width: 12px;
height: 12px;
margin-left: 6px;
background-position: -432px -17px;
display: inline-block;
}
.album-grid img {
max-width: 100%;
height: auto;
display: block;
}
@media (min-width: 736px) {
.album-grid {
display: flex;
flex-wrap: wrap;
}
.album-grid li {
position: relative;
flex-basis: 33.33%;
}
.no-touchevents .album-grid li:hover, .touchevents .album-grid li.open {
color: white;
}
.no-touchevents .album-grid li:hover img, .touchevents .album-grid li.open img {
opacity: 0.1;
}
.no-touchevents .album-grid li:hover .album-bg, .touchevents .album-grid li.open .album-bg {
display: block;
}
.no-touchevents .album-grid li:hover .album-info, .touchevents .album-grid li.open .album-info {
background: transparent;
}
.no-touchevents .album-grid li:hover .album-links, .touchevents .album-grid li.open .album-links {
visibility: visible;
opacity: 1;
}
.touchevents .album-grid li .album-toggle {
display: block;
}
.album-grid .album-info {
text-align: center;
height: 136px;
}
.album-grid .album-links {
position: absolute;
top: 0;
left: 0;
bottom: 136px;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
visibility: hidden;
opacity: 0;
}
}
@media (min-width: 736px) and (max-width: 1000px) {
.album-grid li {
flex-basis: 50%;
}
}
@media (min-width: 1500px) {
.album-grid li {
flex-basis: 25%;
}
}
@media (max-width: 735px) {
.album-grid {
border-top: 1px solid #000;
}
.album-grid li {
border-bottom: 1px solid #000;
}
.album-grid li .album-info {
padding: 20px 0;
}
.album-grid li.init-state {
padding-left: 120px;
min-height: 120px;
}
.album-grid li.init-state .album-art {
width: 120px;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.album-grid li.init-state .album-info {
padding: 10px 16px;
}
.album-grid li.init-state .album-info h1 {
font-size: 16px;
line-height: 20px;
}
.album-grid li.open {
padding: 20px;
text-align: center;
color: white;
}
.album-grid li.open .album-art {
padding: 0px 30px;
}
.album-grid li.open .album-bg,
.album-grid li.open .album-links {
display: block;
}
.album-grid li.open .album-links a.artist-www {
margin-bottom: 0;
}
.album-grid .album-links {
display: none;
}
}
.link-set {
margin: auto;
}
.link-set a {
display: block;
margin: 6px;
}
.placements-list {
padding: 0;
list-style: none;
}
.placements-list li {
border-top: 1px solid black;
}
.placements-list li .placement-info {
margin: 0em 0 2em;
padding-right: 24px;
}
.placements-list li .placement-info p {
margin: 0;
}
@media (max-width: 767px) {
.placements-list li .placement-info {
margin: 0.5rem 0 0;
}
}
.placements-list li .placement-embed a {
display: block;
}
.placements-list li .placement-embed img {
max-width: 100%;
height: auto;
display: block;
}
@media (min-width: 736px) {
.placements-list li {
display: flex;
flex-direction: row-reverse;
}
.placements-list li .placement-embed {
padding-bottom: 0;
padding-left: 1.5rem;
}
.placements-list li .placement-embed a,
.placements-list li .placement-embed .no-link {
display: block;
position: relative;
padding-bottom: 56.25%;
}
.placements-list li .has-video:before, .placements-list li .has-video:after {
margin-left: 1.5rem;
}
.placements-list li .placement-embed,
.placements-list li .placement-info {
min-height: 1px;
display: block;
width: 50%;
}
}
@media (max-width: 735px) {
.placements-list li {
font-size: 16px;
}
.placements-list li .placement-embed img {
margin-bottom: 1em;
}
}
.placement-content .pagination-wrap {
padding: 1em 100px;
border-bottom: 1px solid black;
}
.placement-content .pagination-wrap ul {
list-style: none;
padding: 0;
}
.placement-content .pagination-wrap .page-prev {
float: left;
}
.placement-content .pagination-wrap .page-next {
float: right;
}
.placement-content .pagination-wrap a {
color: #000;
text-decoration: none;
}
.placement-content .pagination-wrap a:hover {
color: #911010;
}
@media (max-width: 735px) {
.placement-content .pagination-wrap {
padding: 1em 20px;
}
}
.archive-list {
margin: 0;
padding: 0;
list-style: none;
}
.archive-list li {
border-top: 1px solid black;
padding: 1em 100px;
}
.archive-list li:last-of-type {
border-bottom: 1px solid black;
}
.archive-list li .post-overview {
display: block;
text-align: center;
}
.archive-list li .post-overview:after {
content: "";
display: table;
clear: both;
}
.archive-list li .post-overview .post-date {
float: right;
}
.archive-list a {
color: #000;
text-decoration: none;
}
.archive-list a:hover {
border-bottom: solid 1px #000;
}
.single-contents {
padding: 1em 100px 2em;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.single-contents h1 {
margin: 0;
line-height: 1.4;
text-align: center;
}
.single-contents p.post-date {
margin: 1.5em 0 1em;
text-align: center;
}
.single-contents img {
max-width: 100%;
height: auto;
}
.single-contents a {
color: #000;
text-decoration: none;
border-bottom: solid 1px #000;
}
@media (max-width: 767px) {
.single-contents,
.archive-list li {
padding: 1em 1em 2em;
}
}
.img-wrap {
position: relative;
height: 0;
}
.img-wrap.ar-square {
padding-bottom: 100%;
}
.img-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-content {
padding: 36px;
}
.page-content a {
text-decoration: none;
color: inherit;
}
.no-touchevents .page-content a:hover {
color: #0071bc;
}
.no-touchevents .section-label .page-content a:hover {
color: #d8b900;
}
.no-touchevents .section-placement .page-content a:hover {
color: #911010;
}
.msg {
text-align: center;
}
#mc_embed_signup form {
padding: 1em 0 8rem !important;
}
#mc_embed_signup #mc-embedded-subscribe {
background-color: #000000 !important;
color: #ffffff !important;
display: inline-block;
font-weight: 500;
font-family: "URWGrotesk Light";
font-style: normal;
font-weight: normal;
font-size: 20px;
width: auto;
white-space: nowrap;
height: 50px;
margin: 12px 5px 12px 0;
padding: 0 22px;
text-decoration: none;
text-align: center;
cursor: pointer;
border: 0;
border-radius: 0;
vertical-align: top;
}
#mc_embed_signup h2 {
margin: 0 0 2em !important;
line-height: 1.2;
}
#mc_embed_signup .mc-field-group input {
font-size: 14px;
text-indent: 0 !important;
padding: 10px !important;
border-radius: 0;
}
#mc_embed_signup #mce-responses {
margin-left: 0 !important;
padding-left: 0 !important;
}
@media (min-width: 768px) {
.page-not-found {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
@media (max-width: 768px) {
#wpadminbar {
display: none !important;
}
html[lang=en] {
margin-top: 0 !important;
}
}
/*# sourceMappingURL=styles.css.map */