@charset "UTF-8";
:root {
--open-sans-font: 'Open Sans', sans-serif;
--pt-sans-font: 'PT Sans Caption', sans-serif;
--dela-gothic-font: 'Dela Gothic One', sans-serif;
--red-color: #E90506;
--gray-color: #5E5E5E;
--dark-color: #444444;
--light-gray-color: #DADADA;
--lighter-gray-color: #F5F5F5;
--white-color: white;
--black-color: black;
--golden-color: #D69E3D;
--yellow-color: #EE8021;
--green-color: #029746;
--marker-bg-color: rgb(237, 237, 237);
--container-width: 87.5rem;
--playbill-width: 84.5rem;
--subcontainer-width: 81.875rem;
--tab-panel-width: 75.625rem;
--dialog-width: 40rem;
--modal-width: 28.125rem;
--mobi-height: 56.25vw;
--mobi-padding: 1rem;
--mobi-bg-color: rgb(253, 242, 233); }
*, *::before, *::after {
box-sizing: border-box; }
* {
padding: 0;
margin: 0; }
html {
font-family: sans-serif;
font-size: 16px;
line-height: 1.15;
transform-origin: center top; }
@media (min-width: 1600px) and (max-width: 1899px) {
html {
font-size: 18.4px; } }
@media (min-width: 1900px) {
html {
font-size: 20.8px; } }
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block; }
body {
font-family: var(--open-sans-font);
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 1.2;
position: relative;
/*
&.body-playbill {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: 40% 71.875rem;
}
*/ }
@media (min-width: 1600px) and (max-width: 1899px) {
body {
font-size: 18.4px; } }
@media (min-width: 1900px) {
body {
font-size: 20.8px; } }
body.body-home section.playbill-item-list {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-y;
background-position: 40% -37px; }
body.body-playbill {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-y;
background-position: 10% 46.5rem; }
body.body-play {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-y;
background-position: 50% 46.5rem; }
body.body-person {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-y;
background-position: 55% 46.5rem; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--pt-sans-font);
font-weight: 400; }
button, input, select, textarea, th, td {
font-family: var(--open-sans-font);
font-style: normal;
font-weight: normal; }
a {
text-decoration: none; }
header.top {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: white; }
@media (max-width: 767px) {
header.top {
display: none; } }
header.top .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center; }
@media (max-width: 767px) {
header.top .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
header.top .logo {
display: block;
position: relative;
width: 7.75rem;
height: 5.625rem;
z-index: 5; }
header.top .logo svg {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; }
header.top .menu-placeholder {
margin-left: auto;
margin-right: auto; }
header.top a.merch-bag-link {
display: none; }
header.top a.merch-bag-link.show {
display: block;
position: relative;
width: 2rem;
height: 2rem;
margin-right: 1rem;
color: var(--red-color); }
header.top a.merch-bag-link svg {
width: 2rem;
height: 2rem;
vertical-align: top; }
header.top a.merch-bag-link span {
display: block;
position: absolute;
right: 0;
top: 0;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
background-color: var(--yellow-color);
color: white;
font-size: 0.75rem;
border-radius: 50%; }
header.top .contacts {
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 1.125rem;
/*
height: $header-top-height;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.address a {
color: inherit;
}
.links a:not(:last-of-type) {
margin-right: 1.125rem;
}
*/ }
header.top .contacts .phone a {
color: var(--red-color);
font-size: 1.6875rem;
font-weight: 700; }
header.top .contacts svg {
vertical-align: top; }
header.top form.search {
position: relative;
width: 32px;
height: 32px; }
header.top form.search a {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
width: 32px;
height: 32px; }
header.top form.search.opened a {
display: none; }
header.top form.search input {
display: none; }
header.top form.search.opened input {
display: block;
position: absolute;
top: 0;
right: 40px;
border-width: 0 0 1px;
height: 32px;
line-height: 32px;
width: 200px;
outline: none; }
header.top form.search button {
display: none; }
header.top form.search.opened button {
display: block;
position: absolute;
right: 0;
top: 0;
width: 32px;
height: 32px;
border: none;
background: transparent;
cursor: pointer; }
nav.home-menu {
display: flex;
align-items: center; }
nav.home-menu a {
display: block;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.875rem;
font-weight: 700;
margin-right: 3.75rem;
text-transform: uppercase; }
nav.home-menu a.clk {
transform: translateY(-1px); }
nav.home-menu svg {
stroke: var(--gray-color);
vertical-align: middle; }
footer.bottom {
padding-top: 2.8125rem;
padding-bottom: 3.125rem;
background-color: var(--dark-color);
color: white; }
@media (max-width: 767px) {
footer.bottom {
padding-top: 2rem;
padding-bottom: 2rem; } }
footer.bottom a {
color: inherit; }
footer.bottom .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between; }
@media (max-width: 767px) {
footer.bottom .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
footer.bottom .container {
display: block;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
footer.bottom .contacts .head {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem; }
footer.bottom .contacts .line:not(:last-of-type) {
margin-bottom: 0.625rem; }
footer.bottom .center {
width: 38.25rem; }
@media (max-width: 767px) {
footer.bottom .center {
width: auto;
margin-top: 1rem;
margin-bottom: 1rem; } }
footer.bottom .center .subscribe-form {
margin-bottom: 1.375rem; }
@media (max-width: 767px) {
footer.bottom .center .subscribe-form {
display: none; } }
footer.bottom .center .controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem; }
footer.bottom .center .controls input, footer.bottom .center .controls button {
width: 11.875rem;
height: 2.1875rem;
flex-shrink: 0;
border: none; }
footer.bottom .center .controls input {
padding-left: 1.125rem;
padding-right: 1.125rem;
background: var(--light-gray-color);
line-height: 2.1875rem; }
footer.bottom .center .controls button {
background: var(--red-color);
color: white; }
footer.bottom .center label {
display: flex;
align-items: center; }
footer.bottom .center label span {
font-size: 0.6875rem;
margin-left: 0.25rem; }
footer.bottom .center p {
line-height: 1.4; }
footer.bottom .right .snippet-block {
margin-bottom: 1.25rem; }
footer.bottom .right .line {
margin-bottom: 0.625rem;
text-align: right; }
footer.bottom .right .social-block {
display: flex;
justify-content: flex-end; }
@media (max-width: 767px) {
footer.bottom .right .social-block {
justify-content: center;
margin-top: 1rem; } }
footer.bottom .right .social-block a {
display: block;
width: 1.5625rem;
height: 1.5625rem;
margin-left: 0.5rem;
margin-right: 0.5rem; }
@media (max-width: 767px) {
footer.bottom .right .social-block a {
width: 2.5rem;
height: 2.5rem; } }
footer.bottom .right .social-block a svg {
width: 1.5625rem;
height: 1.5625rem;
object-fit: contain;
object-position: center; }
@media (max-width: 767px) {
footer.bottom .right .social-block a svg {
width: 2.5rem;
height: 2.5rem; } }
div.section-menu nav {
display: flex;
align-items: center; }
div.section-menu nav a {
display: block; }
div.section-menu nav a.section {
color: var(--red-color);
font-family: var(--pt-sans-font);
font-size: 2.8125rem;
font-weight: 700;
margin-right: 1rem;
text-transform: uppercase; }
div.section-menu nav a.clk {
transform: translateY(2px); }
div.section-menu nav a.clk svg {
vertical-align: top; }
div.section-menu .season {
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
margin-top: 0.125rem; }
div.marble-block {
margin-bottom: 1rem;
/*.trees {
position: absolute;
left: 0;
top: 0;
@include phone {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
rect.main-rect {
rx: 0;
}
}
}*/ }
div.marble-block .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto;
position: relative;
height: 12.375rem;
z-index: 1;
background: url("../images/trees.a00175c73dca.png") no-repeat center/cover; }
@media (max-width: 767px) {
div.marble-block .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.marble-block .container {
height: auto; } }
div.marble-block .placeholder {
position: relative;
height: 12.375rem;
padding-left: 24.0625rem;
padding-right: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2; }
@media (max-width: 767px) {
div.marble-block .placeholder {
height: auto;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
padding-top: var(--mobi-padding);
padding-bottom: var(--mobi-padding); } }
div.marble-block .left-triangles {
position: absolute;
left: 7.125rem;
top: -4.375rem;
width: 15.875rem;
height: 20.8125rem;
z-index: 3; }
@media (max-width: 767px) {
div.marble-block .left-triangles {
display: none; } }
div.marble-block .right-triangles {
position: absolute;
right: 11.5625rem;
top: -2rem;
width: 9.4375rem;
height: 9.125rem; }
@media (max-width: 767px) {
div.marble-block .right-triangles {
display: none; } }
div.marble-block nav.marble-menu {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem; }
@media (max-width: 767px) {
div.marble-block nav.marble-menu {
justify-content: center; } }
div.marble-block nav.marble-menu a {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal; }
@media (max-width: 767px) {
div.marble-block nav.marble-menu a {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.marble-block nav.marble-menu a.active {
color: var(--red-color); }
div.marble-block nav.marble-menu a:hover {
color: var(--red-color); }
div.marble-block .disclaimer {
color: var(--gray-color);
font-size: 0.875rem;
margin-top: 0.625rem; }
div.dropdown {
position: relative;
width: var(--dropdown-width, 8.625rem);
height: var(--dropdown-height, 2.25rem);
margin-left: var(--dropdown-margin-left, 0);
font-family: var(--pt-sans-font);
color: var(--gray-color);
z-index: 99; }
div.dropdown a {
color: inherit; }
div.dropdown div.dropdown-holder {
position: absolute;
left: 0;
top: 0;
width: var(--dropdown-width, 8.625rem);
background-color: white;
border-radius: 0.625rem;
border: 1px solid var(--light-gray-color);
box-shadow: 0px 0.25rem 1rem 0px rgba(0, 0, 0, 0.15); }
div.dropdown div.grid {
width: var(--dropdown-width, 8.625rem);
height: var(--dropdown-height, 2.25rem);
display: grid;
grid-template-columns: 1fr var(--dropdown-height, 2.25rem);
cursor: pointer; }
div.dropdown div.current {
padding: 0 0.75rem;
line-height: var(--dropdown-height, 2.25rem); }
div.dropdown div.drop-btn a {
display: flex;
width: var(--dropdown-height, 2.25rem);
height: var(--dropdown-height, 2.25rem);
justify-content: center;
align-items: center;
transition: transform 0.5s ease-in-out; }
div.dropdown.dropped div.drop-btn a {
transform: rotate(180deg); }
div.dropdown div.current {
padding: 0 0.75rem;
line-height: var(--dropdown-height, 2.25rem); }
div.dropdown ul {
display: none;
list-style: none;
border-top: 1px solid var(--light-gray-color);
padding-top: 0.375rem;
padding-bottom: 0.75rem; }
div.dropdown ul li {
padding: 0.1875rem 0.75rem 0.1875rem 1rem; }
div.dropdown ul li a {
display: block;
line-height: 1.25rem; }
div.dropdown ul li a::before {
content: '';
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 1px solid var(--light-gray-color);
border-radius: 0.3125rem;
vertical-align: top;
margin-right: 0.375rem; }
div.dropdown ul li a:hover {
color: var(--red-color); }
div.dropdown ul li a:hover::before {
background-color: var(--red-color);
border-color: var(--red-color); }
div.dropdown ul li.active {
color: var(--red-color); }
div.dropdown ul li.active a::before {
background-color: var(--red-color);
border-color: var(--red-color); }
div.dropdown.dropped ul {
display: block; }
div.gray-container {
margin-bottom: 2.5rem; }
div.gray-container > .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto;
position: relative; }
@media (max-width: 767px) {
div.gray-container > .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.gray-container > .container > .bg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 0.625rem;
opacity: 0.2;
background: var(--light-gray-color); }
div.gray-container > .container > .interior {
position: relative;
padding-top: 0.5rem;
padding-bottom: 1.25rem; }
section.flat-gallery {
margin-bottom: 2.25rem; }
section.flat-gallery div.head {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 1rem;
color: var(--gray-color); }
@media (max-width: 767px) {
section.flat-gallery div.head {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.flat-gallery div.head span {
font-size: 1.125rem; }
section.flat-gallery div.head svg {
cursor: pointer; }
section.flat-gallery div.head svg:hover {
color: var(--red-color); }
section.flat-gallery div.photos {
width: var(--container-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.flat-gallery div.photos {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.flat-gallery div.photos .f-carousel {
--f-carousel-slide-width: 25%;
--f-progress-color: var(--red-color); }
@media (max-width: 767px) {
section.flat-gallery div.photos .f-carousel {
--f-carousel-slide-width: 100%; } }
section.flat-gallery div.photos .f-carousel img {
border-radius: 0.625rem;
display: block;
margin-left: auto;
margin-right: auto; }
div.tab-list {
margin-top: 2.25rem;
margin-bottom: 3.5rem; }
div.tab-list .tab-list-head {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
column-gap: 0.9375rem;
row-gap: 0.9375rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
div.tab-list .tab-list-head {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.tab-list .tab-list-head a {
display: block;
min-width: 8.3125rem;
height: 3.5rem;
line-height: calc(3.5rem - 2px);
color: var(--gray-color);
text-align: center;
border-radius: 1.875rem;
border: 1px solid var(--gray-color);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem; }
@media (max-width: 767px) {
div.tab-list .tab-list-head a {
height: 2.75rem;
line-height: calc(2.75rem - 2px); } }
div.tab-list .tab-list-head a.active {
background-color: var(--red-color);
border-color: var(--red-color);
color: white;
font-weight: bold; }
div.tab-list .tab-list-head a:not(.active):hover {
border-color: var(--red-color);
color: var(--red-color); }
div.tab-list .tab-panel.show-always {
margin-top: 3rem !important; }
div.tab-list .tab-panel:not(:first-of-type) {
margin-top: 2rem; }
div.tab-list .tab-panel:not(.active):not(.show-always) {
display: none; }
section.publications-panel article {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 9.6875rem 1.6875rem 11.875rem; }
@media (max-width: 767px) {
section.publications-panel article {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.publications-panel article {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
section.publications-panel article:not(:first-of-type) {
margin-top: 3.25rem; }
section.publications-panel article h3 {
font-family: var(--open-sans-font);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem; }
@media (max-width: 767px) {
section.publications-panel article h3 {
font-size: 1.25rem; } }
section.publications-panel article h3 a {
color: var(--red-color); }
section.publications-panel article h3 a:hover {
text-decoration: underline; }
section.publications-panel article .date {
font-size: 1.125rem;
color: var(--gray-color); }
@media (max-width: 767px) {
section.publications-panel article .date {
font-size: 1rem; } }
section.publications-panel article .publisher {
font-size: 1.125rem;
font-style: italic;
color: var(--gray-color);
margin-top: 0.25rem; }
@media (max-width: 767px) {
section.publications-panel article .publisher {
font-size: 1rem; } }
section.video-panel {
margin-bottom: 2.25rem; }
section.video-panel .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.video-panel .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.video-panel .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.video-panel .grid {
display: grid;
grid-template-columns: repeat(2, 42.75rem);
grid-auto-rows: 31.25rem;
gap: 2rem 2rem; }
section.video-panel .grid.single {
display: flex;
justify-content: center; }
@media (max-width: 767px) {
section.video-panel .grid.single {
display: block; } }
section.video-panel .grid.single a {
height: 31.25rem;
width: 42.75rem; }
@media (max-width: 767px) {
section.video-panel .grid.single a {
width: auto;
height: auto; } }
@media (max-width: 767px) {
section.video-panel .grid {
display: block; } }
section.video-panel .grid a {
display: block;
position: relative;
color: white;
transition: color 0.5s ease-in-out; }
@media (max-width: 767px) {
section.video-panel .grid a {
aspect-ratio: 4 / 3; }
section.video-panel .grid a:not(:first-of-type) {
margin-top: 1rem; } }
section.video-panel .grid a:hover {
color: var(--red-color); }
section.video-panel .grid a img {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 1.875rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.4); }
@media (max-width: 767px) {
section.video-panel .grid a img {
border-radius: 0.625rem; } }
section.video-panel .grid a span {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
@media (max-width: 767px) {
section.video-panel .grid a span svg {
width: 4rem;
height: 4rem; } }
section.video-panel .player {
display: none; }
@media (max-width: 767px) {
.fancybox__content.player iframe {
width: 100vw;
height: var(--mobi-height); } }
.fancybox__content {
padding: 0; }
.fancybox__content iframe {
display: block; }
div.main-menu {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.5);
z-index: 9999; }
div.main-menu div.main-menu-block {
padding-top: 1.25rem;
padding-bottom: 2.5rem;
background-color: #fdf2e9;
border-radius: 1.875rem; }
div.main-menu .container {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.main-menu .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.main-menu .head {
display: grid;
grid-template-columns: 21rem 23.6875rem 20.1875rem 1fr 1.8125rem;
grid-auto-rows: 5rem;
border-bottom: 1px solid var(--light-gray-color);
margin-bottom: 1rem; }
div.main-menu .head svg {
width: 6.25rem; }
div.main-menu .head .phone a {
color: var(--red-color);
font-size: 1.6875rem;
font-weight: 700; }
div.main-menu .head .open {
line-height: 1.6875rem; }
div.main-menu .grid {
display: grid;
grid-template-columns: 1fr 31rem;
column-gap: 1rem;
color: var(--gray-color); }
div.main-menu .grid a {
color: inherit; }
div.main-menu .grid a:hover {
color: var(--red-color); }
div.main-menu .nav-table {
display: grid;
grid-template-columns: 23% 28% 23% 23%;
column-gap: 1%;
row-gap: 1rem;
padding-top: 0.5rem;
z-index: 11; }
div.main-menu .nav-table .nav-item {
position: relative;
z-index: 12; }
div.main-menu .nav-table .nav-item > a {
font-size: 1.5625rem;
line-height: 2rem;
font-weight: bold;
font-family: var(--pt-sans-font);
text-transform: uppercase; }
div.main-menu .nav-table .nav-item ul {
display: none; }
div.main-menu .nav-table .nav-item:hover ul {
display: block;
position: absolute;
list-style: none;
left: 0;
top: 100%;
border: 1px solid var(--light-gray-color);
background-color: #fdf2e9;
padding: 0.5rem 1rem 1.5rem;
font-size: 1.25rem;
width: 16rem;
z-index: 999; }
div.main-menu .nav-table .nav-item:hover ul li:not(:last-of-type) {
margin-bottom: 0.5rem; }
div.main-menu div.straw-lark nav {
display: flex;
margin-top: 0.5rem; }
div.main-menu div.straw-lark nav a {
font-size: 1.25rem; }
div.main-menu div.straw-lark nav a:not(:first-of-type) {
margin-left: 1.5rem; }
div.main-menu div.straw-lark-head {
display: flex;
align-items: center; }
div.main-menu div.straw-lark-head a {
font-family: var(--pt-sans-font);
font-size: 1.875rem;
font-weight: 700;
text-transform: uppercase;
color: var(--golden-color); }
div.main-menu div.straw-lark-head img {
width: 3.5rem;
margin-left: 1rem; }
div.main-menu div.foot {
margin-top: 2.75rem;
padding-top: 2.25rem;
border-top: 1px solid var(--light-gray-color);
display: grid;
grid-template-columns: 13.3125rem 1fr;
column-gap: 7.375rem; }
div.main-menu a.askus {
display: block;
width: 100%;
height: 3.75rem;
line-height: calc(3.75rem - 2px);
border: 1px solid var(--red-color);
font-size: 1.25rem;
color: var(--red-color);
text-align: center; }
div.main-menu div.address {
color: var(--gray-color);
line-height: 1.375rem; }
div.main-menu ul.main-menu-popup {
display: none;
list-style: none;
border: 1px solid var(--light-gray-color);
background-color: #fdf2e9;
padding: 0.5rem 1rem 1.5rem;
font-size: 1.25rem;
width: 16rem;
border-radius: 10px;
z-index: 999;
transform: translateY(-1px); }
div.main-menu ul.main-menu-popup[data-show], div.main-menu ul.main-menu-popup:hover {
display: block; }
div.main-menu ul.main-menu-popup li.right-menu-holder {
position: relative; }
div.main-menu ul.main-menu-popup li.right-menu-holder ul.right-menu {
position: absolute;
left: 100%;
top: 0;
display: none;
list-style: none;
border: 1px solid var(--light-gray-color);
background-color: #fdf2e9;
padding: 0.5rem 1rem 1.5rem;
font-size: 1.25rem;
width: 16rem;
border-radius: 10px;
z-index: 999; }
div.main-menu ul.main-menu-popup li.right-menu-holder:hover ul.right-menu {
display: block; }
div.main-menu ul.main-menu-popup li:not(:last-of-type) {
margin-bottom: 0.5rem; }
div.main-menu ul.main-menu-popup a {
color: inherit; }
div.main-menu ul.main-menu-popup a:hover {
color: var(--red-color); }
body:not(.show-main-menu) div.main-menu {
display: none; }
div.simple-header {
display: flex; }
div.simple-header h1 {
display: block;
line-height: 1.2;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--black-color);
font-family: var(--pt-sans-font);
font-size: 2.5rem;
font-weight: bold; }
@media (max-width: 767px) {
div.simple-header h1 {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.simple-header h1.active {
color: var(--red-color); }
@media (max-width: 767px) {
div.simple-header h1 {
font-size: 1.375rem;
height: auto;
line-height: 2.125rem; } }
section.simple-text {
margin-top: 2rem;
margin-bottom: 2rem; }
section.simple-text .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.simple-text .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.simple-text .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.simple-text .text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.simple-text .text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.simple-text .text a {
color: var(--red-color); }
section.simple-text .text p {
margin-bottom: 1em; }
section.simple-text .text ol, section.simple-text .text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.simple-text .text img {
max-width: 100%; }
section.simple-text .text iframe {
max-width: 100%; }
section.simple-text .text h2 {
margin-bottom: 1rem; }
section.simple-text .text *:last-child {
margin-bottom: 0; }
section.simple-text .text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.simple-text .text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.simple-text .text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.simple-text .text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.simple-text .text table.bordered-table {
border-collapse: collapse; }
section.simple-text .text table.bordered-table th, section.simple-text .text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.simple-text .text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.simple-text .text p.video-holder iframe, section.simple-text .text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.simple-text .text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.simple-text .text ul.dots {
padding-left: 0 !important; } }
section.simple-text .text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.simple-text .text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
div.pager {
margin-top: 3rem;
margin-bottom: 3rem; }
div.pager .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
column-gap: 1rem;
row-gap: 1rem;
flex-wrap: wrap; }
@media (max-width: 767px) {
div.pager .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.pager a {
display: block;
height: 2.8125rem;
line-height: 2.6875rem;
min-width: 2.8125rem;
text-align: center;
border: 1px solid var(--light-gray-color);
color: var(--gray-color);
border-radius: 0.3125rem;
font-size: 1.25rem; }
div.pager a:hover, div.pager a.active {
border-color: var(--red-color);
background-color: var(--red-color);
color: white;
font-weight: bold; }
div.dialog {
background: #FFFFFF;
box-shadow: 0px 0.625rem 1.875rem rgba(2, 61, 72, 0.2);
border-radius: 2.5rem;
padding: 1.75rem 2.5rem 2.5rem; }
@media (max-width: 767px) {
div.dialog {
padding: 1.75rem var(--mobi-padding) 2.5rem;
border-radius: 1.25rem; } }
div.dialog .head {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 1.75rem; }
div.dialog .head a {
transform: rotate(45deg);
color: var(--black-color); }
div.dialog .head h4 {
font-weight: 400;
font-size: 1.75rem;
line-height: 1;
color: var(--black-color);
margin-right: auto; }
@media (max-width: 767px) {
div.dialog .head h4 {
font-size: 1.375rem; } }
div.dialog form p {
font-size: 0.875rem;
color: var(--gray-color);
margin-bottom: 1rem; }
div.dialog .submit {
margin-top: 1.75rem; }
div.dialog .submit button {
display: block;
width: 100%;
height: 3.75rem;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
div.dialog .submit p {
margin-top: 0.5rem;
font-size: 0.875rem;
font-style: italic;
color: var(--gray-color); }
div.dialog .submit p a {
color: var(--red-color); }
div.dialog .message {
display: none;
margin-bottom: 1rem; }
div.dialog .message.error {
color: var(--red-color); }
div.dialog .message.info {
color: var(--red-color);
font-weight: bold; }
div.dialog .control {
position: relative;
border: 0.03125rem solid #DDDDDD;
border-radius: 1rem;
padding: 1rem;
margin-bottom: 1rem; }
div.dialog .control label {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: var(--color-text);
padding: 1rem;
font-size: 1rem; }
div.dialog .control input, div.dialog .control textarea {
display: block;
border: none;
background: transparent;
outline: none;
width: 100%;
font-size: 1rem; }
div.dialog .control input::placeholder, div.dialog .control textarea::placeholder {
color: transparent; }
div.dialog .control input:focus ~ label, div.dialog .control input:not(:placeholder-shown) ~ label, div.dialog .control textarea:focus ~ label, div.dialog .control textarea:not(:placeholder-shown) ~ label {
opacity: 0.7;
font-size: 0.875rem;
line-height: 1rem;
padding-top: 0;
padding-bottom: 0;
height: 1rem; }
div.dialog .control textarea {
max-width: 100%;
min-height: 4.375rem; }
div.dialog .control .errtext {
display: none;
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--red-color); }
div.dialog .control.error .errtext {
display: block; }
div.dialog .bi-arrow-clockwise {
display: none;
vertical-align: middle;
margin-right: 0.25rem;
width: 1.5rem;
height: 1.5rem;
animation: rotation 2s linear infinite; }
div.dialog.sending .bi-arrow-clockwise {
display: inline; }
@keyframes rotation {
from {
transform: rotate(0deg); }
to {
transform: rotate(359deg); } }
div.modal {
display: none; }
div.modal.shown {
display: flex;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding-top: 5.625rem;
padding-bottom: 5.625rem;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999; }
div.modal .dialog {
width: var(--modal-width); }
@media (max-width: 767px) {
div.modal .dialog {
width: calc(100vw - 2 * var(--mobi-padding)); } }
section.response-code {
margin-top: 2rem;
margin-bottom: 2rem; }
section.response-code .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.response-code .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.content-header {
margin-top: 3rem;
margin-bottom: 2rem; }
@media (max-width: 767px) {
div.content-header {
margin-top: 2rem; } }
div.content-header .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.content-header .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.content-header .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.content-header h1 {
font-size: 2.5rem;
font-weight: bold; }
@media (max-width: 767px) {
div.content-header h1 {
font-size: 1.375rem; } }
.scrollup {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
right: 2.5rem;
bottom: 2.5rem;
opacity: 0;
visibility: hidden;
background-color: var(--red-color);
border-radius: 50%;
z-index: 9999;
transition: visibility 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
outline: none; }
.scrollup svg {
width: 50%;
max-width: 50%; }
.scrollup svg path {
fill: white; }
.scrolled-down .scrollup {
visibility: visible;
opacity: 0.5; }
div.expandable {
position: relative; }
div.expandable div.expand-block {
display: none; }
div.expandable.on:not(.collapsed) {
padding-bottom: 7.5rem; }
div.expandable.on div.expand-block {
display: block;
position: absolute;
left: 0;
bottom: 0;
right: 0; }
div.expandable.on div.expand-block div.cover {
display: none; }
div.expandable.on div.expand-block div.inner {
height: 7.5rem;
position: relative;
overflow: hidden;
background-color: var(--play-info-background); }
@media (max-width: 767px) {
div.expandable.on div.expand-block div.inner {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.expandable.on div.expand-block div.inner svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-53%, -50%); }
div.expandable.on div.expand-block div.inner div.link {
position: absolute;
left: 0;
top: calc(0.5 * (7.5rem - 1.25rem));
width: 100%;
text-align: center; }
div.expandable.on div.expand-block div.inner a {
font-size: 1.25rem;
font-weight: bold;
line-height: 1;
color: var(--red-color); }
@media (max-width: 767px) {
div.expandable.on div.expand-block div.inner {
background-color: white; } }
div.expandable span.expand-all {
display: none; }
div.expandable.collapsed {
max-height: 28.125rem;
overflow: hidden; }
div.expandable.collapsed div.expand-block div.cover {
display: block;
height: 6rem;
background: linear-gradient(180deg, #FFFFFF00, var(--play-info-background)); }
@media (max-width: 767px) {
div.expandable.collapsed div.expand-block div.cover {
background: linear-gradient(180deg, #FFFFFF00, white); } }
div.expandable.collapsed span.collapse-all {
display: none; }
div.expandable.collapsed span.expand-all {
display: inline; }
button.soldout-button, a.soldout-button {
width: 200px;
height: 56px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid var(--red-color);
background-color: white;
display: grid;
grid-template-columns: 119px 81px;
text-align: center;
cursor: pointer; }
@media (max-width: 767px) {
button.soldout-button, a.soldout-button {
grid-template-columns: 108px 70px;
width: 179px;
height: 2.6875rem; } }
button.soldout-button span.white-block, a.soldout-button span.white-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 54px; }
@media (max-width: 767px) {
button.soldout-button span.white-block, a.soldout-button span.white-block {
height: 2.625rem; } }
button.soldout-button span.white-block span, a.soldout-button span.white-block span {
font-size: 20px;
line-height: 1;
font-family: var(--open-sans-font);
color: var(--red-color); }
@media (max-width: 767px) {
button.soldout-button span.white-block span, a.soldout-button span.white-block span {
font-size: 1rem;
line-height: 1; } }
button.soldout-button span.red-block, a.soldout-button span.red-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 55px;
background-color: var(--red-color);
border-radius: 10px; }
@media (max-width: 767px) {
button.soldout-button span.red-block, a.soldout-button span.red-block {
height: 2.625rem; } }
button.soldout-button span.red-block span, a.soldout-button span.red-block span {
font-size: 14px;
line-height: 12px;
font-family: var(--open-sans-font);
color: white; }
@media (max-width: 767px) {
button.soldout-button span.red-block span, a.soldout-button span.red-block span {
font-size: 12px;
line-height: 10px; } }
section.search-results {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.search-results {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
margin-bottom: 2rem; } }
section.search-results .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.search-results .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.search-results .container {
width: calc(100vw - 2 * var(--mobi-padding)); } }
section.search-results article {
border-radius: 0.625rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.15); }
section.search-results article:not(:first-of-type) {
margin-top: 2.25rem; }
section.search-results article.with-image {
display: grid;
grid-template-columns: 25rem 1fr;
height: 15.625rem;
column-gap: 5rem;
border-radius: 0.625rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.15);
overflow: hidden; }
@media (max-width: 767px) {
section.search-results article.with-image {
display: block;
height: auto;
width: auto; } }
section.search-results article .image {
display: block;
height: 15.625rem; }
@media (max-width: 767px) {
section.search-results article .image {
height: auto; } }
section.search-results article img {
display: block;
width: 100%;
height: 15.625rem;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0px 0px 0.625rem;
box-shadow: 0px 0px 0.25rem 0px rgba(0, 0, 0, 0.15); }
@media (max-width: 767px) {
section.search-results article img {
height: auto;
aspect-ratio: 4 / 3;
border-radius: 0.625rem 0.625rem 0px 0px; } }
section.search-results article div.info {
position: relative;
border: solid var(--lighter-gray-color);
border-width: 1px 1px 1px 0;
display: flex;
flex-direction: column;
padding: 2rem 1.5rem 1.5rem 0; }
@media (max-width: 767px) {
section.search-results article div.info {
padding-top: 0.5rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.search-results article:not(.with-image) div.info {
padding-left: 1.5rem; }
section.search-results article div.head {
display: flex;
align-items: center;
margin-bottom: 0.5rem; }
@media (max-width: 767px) {
section.search-results article div.head {
justify-content: flex-start;
flex-wrap: wrap; } }
section.search-results article h3 {
font-size: 2.5rem;
font-weight: bold; }
@media (max-width: 767px) {
section.search-results article h3 {
font-size: 1.375rem;
width: 100%; } }
section.search-results article h3 a {
color: inherit; }
section.search-results article:hover h3 {
color: var(--red-color);
font-weight: bold; }
section.search-results article div.date {
color: var(--gray-color);
font-size: 1.25rem;
margin-bottom: 2px; }
@media (max-width: 767px) {
section.search-results article div.date {
font-size: 1rem; } }
section.search-results article p {
color: var(--gray-color);
margin-top: 0.125rem; }
@media (max-width: 767px) {
section.search-results article p {
margin-top: 0.5rem; } }
button.few-tickets, a.few-tickets {
position: relative;
width: 200px;
height: 56px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid var(--golden-color);
background-color: white;
display: grid;
grid-template-columns: 81px 119px;
text-align: center;
cursor: pointer; }
@media (max-width: 767px) {
button.few-tickets, a.few-tickets {
grid-template-columns: 70px 108px;
width: 179px;
height: 2.6875rem; } }
button.few-tickets span.white-block, a.few-tickets span.white-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 54px; }
@media (max-width: 767px) {
button.few-tickets span.white-block, a.few-tickets span.white-block {
height: 2.625rem; } }
button.few-tickets span.white-block span, a.few-tickets span.white-block span {
font-size: 20px;
line-height: 1;
font-family: var(--open-sans-font);
color: var(--golden-color); }
@media (max-width: 767px) {
button.few-tickets span.white-block span, a.few-tickets span.white-block span {
font-size: 1rem;
line-height: 1; } }
button.few-tickets span.yellow-block, a.few-tickets span.yellow-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 55px;
background-color: var(--golden-color);
border-radius: 9px; }
@media (max-width: 767px) {
button.few-tickets span.yellow-block, a.few-tickets span.yellow-block {
height: 2.625rem; } }
button.few-tickets span.yellow-block span, a.few-tickets span.yellow-block span {
font-size: 14px;
line-height: 12px;
font-family: var(--open-sans-font);
color: white; }
@media (max-width: 767px) {
button.few-tickets span.yellow-block span, a.few-tickets span.yellow-block span {
font-size: 12px;
line-height: 10px; } }
button.few-tickets .pushkin-card, a.few-tickets .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
button.few-tickets .prices, a.few-tickets .prices {
position: absolute;
left: 50%;
top: 2.25rem;
font-size: 1rem;
color: var(--red-color);
transform: translateX(-50%);
white-space: nowrap; }
button.stage-link, a.stage-link {
width: 200px;
height: 56px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid var(--green-color);
background-color: white;
display: grid;
grid-template-columns: 119px 81px;
text-align: center;
cursor: pointer; }
@media (max-width: 767px) {
button.stage-link, a.stage-link {
grid-template-columns: 108px 70px;
width: 179px;
height: 2.6875rem; } }
button.stage-link span.white-block, a.stage-link span.white-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 54px; }
@media (max-width: 767px) {
button.stage-link span.white-block, a.stage-link span.white-block {
height: 2.625rem; } }
button.stage-link span.white-block span, a.stage-link span.white-block span {
font-size: 20px;
line-height: 1;
font-family: var(--open-sans-font);
color: var(--green-color); }
@media (max-width: 767px) {
button.stage-link span.white-block span, a.stage-link span.white-block span {
font-size: 1rem;
line-height: 1; } }
button.stage-link span.green-block, a.stage-link span.green-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 55px;
background-color: var(--green-color);
border-radius: 10px; }
@media (max-width: 767px) {
button.stage-link span.green-block, a.stage-link span.green-block {
height: 2.625rem; } }
button.stage-link span.green-block span, a.stage-link span.green-block span {
font-size: 14px;
line-height: 12px;
font-family: var(--open-sans-font);
color: white; }
@media (max-width: 767px) {
button.stage-link span.green-block span, a.stage-link span.green-block span {
font-size: 12px;
line-height: 10px; } }
section.promo-slides {
margin-bottom: 1rem;
max-height: 500px;
overflow: hidden; }
@media (max-width: 767px) {
section.promo-slides {
margin-top: 1rem;
max-height: var(--mobi-height); } }
section.promo-slides .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.promo-slides .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.promo-slides .f-carousel {
--f-progress-color: var(--red-color); }
section.promo-slides .f-progress {
left: 1.875rem;
right: 1.875rem; }
@media (max-width: 767px) {
section.promo-slides .f-progress {
left: 0.625rem;
right: 0.625rem; } }
section.promo-slides .promo-slide {
width: var(--container-width);
height: 31.25rem;
position: relative; }
@media (max-width: 767px) {
section.promo-slides .promo-slide {
width: 100vw;
height: var(--mobi-height); } }
section.promo-slides .promo-slide img, section.promo-slides .promo-slide video {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 1.875rem;
object-fit: cover;
object-position: center; }
section.promo-slides .promo-slide img.mobile-image, section.promo-slides .promo-slide video.mobile-image {
display: none; }
@media (max-width: 767px) {
section.promo-slides .promo-slide img, section.promo-slides .promo-slide video {
border-radius: 0.625rem; }
section.promo-slides .promo-slide img.mobile-image, section.promo-slides .promo-slide video.mobile-image {
display: block; }
section.promo-slides .promo-slide img.main-image, section.promo-slides .promo-slide video.main-image {
display: none; } }
section.promo-slides .promo-slide .info {
position: absolute;
right: 2.8125rem;
bottom: 1.875rem;
color: white;
text-align: right; }
@media (max-width: 767px) {
section.promo-slides .promo-slide .info {
right: 1.5rem;
bottom: 1rem; } }
section.promo-slides .promo-slide .info .caption {
font-size: 4.375rem;
line-height: 1; }
@media (max-width: 767px) {
section.promo-slides .promo-slide .info .caption {
font-size: 1.5rem; } }
section.promo-slides .promo-slide .info .subcaption {
font-size: 1.875rem;
line-height: 1;
margin-top: 1rem; }
@media (max-width: 767px) {
section.promo-slides .promo-slide .info .subcaption {
font-size: 1.125rem;
margin-top: 0.25rem; } }
section.promo-slides .promo-slide > a {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
section.homelink-block .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 29.375rem 1fr 29.375rem;
column-gap: 4.0625rem;
row-gap: 2rem; }
@media (max-width: 767px) {
section.homelink-block .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.homelink-block .container {
display: block;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
@media (max-width: 767px) {
section.homelink-block .container article.homelink:not(:first-of-type) {
margin-top: 2rem; } }
section.homelink-block .container article.homelink a.image {
display: block; }
section.homelink-block .container article.homelink img {
display: block;
width: 100%;
height: 18.75rem;
object-fit: cover;
object-position: center;
border-radius: 1.875rem; }
@media (max-width: 767px) {
section.homelink-block .container article.homelink img {
height: auto;
aspect-ratio: 16 / 9;
border-radius: 0.625rem; } }
section.homelink-block .container article.homelink img.big {
display: none; }
section.homelink-block .container article.homelink:nth-of-type(4n), section.homelink-block .container article.homelink:nth-of-type(4n-3) {
grid-column: span 2; }
section.homelink-block .container article.homelink:nth-of-type(4n) img.big, section.homelink-block .container article.homelink:nth-of-type(4n-3) img.big {
display: block; }
section.homelink-block .container article.homelink:nth-of-type(4n) img.mini, section.homelink-block .container article.homelink:nth-of-type(4n-3) img.mini {
display: none; }
section.homelink-block .container article.homelink h3 {
font-size: 2.8125rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
margin-bottom: 1.5rem; }
@media (max-width: 767px) {
section.homelink-block .container article.homelink h3 {
font-size: 1.5rem; } }
section.homelink-block .container article.homelink h3 a {
color: var(--red-color); }
section.homelink-block.padded {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.homelink-block.padded {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.home-newsitem-list ~ section.homelink-block {
margin-top: 3rem; }
@media (max-width: 767px) {
section.home-newsitem-list ~ section.homelink-block {
margin-top: 2rem; } }
div.info-links div.inner {
position: relative;
border-radius: 1.875rem;
border: 1px solid #F5F5F5;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.5625rem 2.28125rem 2.5625rem; }
@media (max-width: 767px) {
div.info-links div.inner {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.info-links div.inner h3 {
color: var(--gray-color);
font-size: 1.375rem;
line-height: 1.75rem;
font-weight: 700;
text-align: center;
padding-bottom: 0.75rem; }
div.info-links div.inner .f-carousel {
width: 20.75rem;
--f-progress-color: var(--red-color); }
@media (max-width: 767px) {
div.info-links div.inner .f-carousel {
width: auto; } }
div.info-links div.inner .f-progress {
left: 0.625rem;
right: 0.625rem; }
@media (max-width: 767px) {
div.info-links div.inner .f-progress {
left: 0;
right: 0; } }
div.info-links div.inner a.image {
display: flex;
justify-content: center;
align-items: center;
width: 20.75rem;
height: 14.5rem;
border-radius: 0.625rem;
overflow: hidden; }
@media (max-width: 767px) {
div.info-links div.inner a.image {
width: auto; } }
div.info-links div.inner a.image img {
max-width: 100%;
max-height: 100%; }
div.info-links div.inner a.next {
display: block;
position: absolute;
right: 3.3125rem;
bottom: 3.3125rem;
width: 3.75rem;
height: 3.75rem;
background: white;
border-radius: 50%; }
@media (max-width: 767px) {
div.info-links div.inner a.next {
display: none; } }
div.info-links div.inner a.next svg {
vertical-align: top; }
div.play-list-header {
margin-top: 1rem;
margin-bottom: 1.25rem; }
div.play-list-header .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 23.75rem 1fr 11rem; }
@media (max-width: 767px) {
div.play-list-header .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.play-list-header .container {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
row-gap: 0.5rem; } }
div.play-list-header .icons {
display: flex;
align-items: center; }
@media (max-width: 767px) {
div.play-list-header .icons {
order: 2; } }
div.play-list-header .disclaimer {
display: flex;
align-items: center;
color: var(--red-color); }
@media (max-width: 767px) {
div.play-list-header .disclaimer {
order: 1; } }
div.play-list-header .disclaimer span {
font-size: 0.875rem;
margin-left: 0.875rem; }
div.play-list-header a.as-list path {
stroke: var(--red-color); }
div.play-list-header a.as-tiles {
margin-left: 1.25rem; }
div.play-list-header a.as-tiles path {
stroke: var(--gray-color); }
div.play-list-header .dropdown {
--dropdown-margin-left: auto;
--dropdown-width: 11rem; }
@media (max-width: 767px) {
div.play-list-header .left {
order: 3;
margin-left: auto; } }
body.show-plays-as-tiles div.play-list-header a.as-list path {
stroke: var(--gray-color); }
body.show-plays-as-tiles div.play-list-header a.as-tiles path {
stroke: var(--red-color); }
section.play-list {
margin-top: 1.25rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.play-list {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
margin-bottom: 2rem; } }
section.play-list.padded {
margin-top: 3rem; }
@media (max-width: 767px) {
section.play-list.padded {
margin-top: 2rem; } }
section.play-list > div.container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.play-list > div.container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.play-list > div.container h2 {
font-size: 2.8125rem;
font-weight: 700;
text-transform: uppercase;
color: var(--red-color);
margin-bottom: 1rem; }
section.play-list article:not(:first-of-type) {
margin-top: 2.25rem; }
section.play-list article .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 25rem 1fr;
height: 15.625rem;
column-gap: 5rem;
border-radius: 0.625rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.15);
overflow: hidden; }
@media (max-width: 767px) {
section.play-list article .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.play-list article .container {
display: block;
height: auto;
width: auto; } }
section.play-list article .image {
display: flex;
justify-content: center;
align-items: center;
height: 15.625rem;
position: relative; }
section.play-list article .image span.premiere {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
left: 0;
top: 0;
color: white;
background-color: var(--red-color);
border-radius: 0.625rem 0px; }
@media (max-width: 767px) {
section.play-list article .image {
height: auto; } }
section.play-list article img {
display: block;
width: 100%;
height: 15.625rem;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0px 0px 0.625rem;
box-shadow: 0px 0px 0.25rem 0px rgba(0, 0, 0, 0.15); }
@media (max-width: 767px) {
section.play-list article img {
height: auto;
aspect-ratio: 4 / 3;
border-radius: 0.625rem 0.625rem 0px 0px; } }
section.play-list article.theater img {
width: auto;
max-width: 90%;
height: auto;
max-height: 90%;
border-radius: 0;
box-shadow: none; }
@media (max-width: 767px) {
section.play-list article.theater img {
aspect-ratio: auto; } }
section.play-list article div.info {
position: relative;
border: solid var(--lighter-gray-color);
border-width: 1px 1px 1px 0;
display: flex;
flex-direction: column;
padding: 2rem 1.5rem 1.5rem 0; }
@media (max-width: 767px) {
section.play-list article div.info {
padding-top: 0.5rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.play-list article div.author {
color: var(--gray-color);
font-size: 1.25rem;
margin-bottom: 2px; }
@media (max-width: 767px) {
section.play-list article div.author {
font-size: 1rem; } }
section.play-list article div.head {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 0.5rem; }
@media (max-width: 767px) {
section.play-list article div.head {
justify-content: flex-start;
flex-wrap: wrap; } }
section.play-list article h2 {
font-size: 2.5rem;
margin-right: auto;
font-weight: bold; }
@media (max-width: 767px) {
section.play-list article h2 {
font-size: 1.375rem;
width: 100%; } }
section.play-list article h2 a {
color: inherit; }
section.play-list article .container:hover h2 {
color: var(--red-color);
font-weight: bold; }
section.play-list article .age {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: -0.03125rem;
bottom: -0.03125rem;
background-color: var(--marker-bg-color);
color: var(--gray-color);
border-radius: 0.625rem 0px; }
section.play-list article .pushkin-card {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: -0.03125rem;
top: -0.03125rem;
background-color: var(--marker-bg-color);
color: var(--gray-color);
border-radius: 0px 0.625rem; }
@media (max-width: 767px) {
section.play-list article .info .age, section.play-list article .info .pushkin-card {
display: none; }
section.play-list article .image .age {
border-radius: 0.625rem 0 0; } }
@media (min-width: 768px) {
section.play-list article .image .age, section.play-list article .image .pushkin-card {
display: none; } }
section.play-list article .container:hover .age, section.play-list article .container:hover .pushkin-card {
color: white;
background-color: var(--red-color); }
section.play-list article div.genre {
color: var(--gray-color);
margin-top: 0.125rem; }
@media (max-width: 767px) {
section.play-list article div.genre {
margin-top: 0.5rem; } }
section.play-list article div.nearest {
margin-top: auto;
display: flex;
flex-wrap: wrap;
column-gap: 0.75rem;
row-gap: 0.5rem;
align-items: center; }
@media (max-width: 767px) {
section.play-list article div.nearest {
margin-top: 0.75rem; } }
@media (max-width: 767px) {
section.play-list article div.nearest > span {
display: none; } }
section.play-list article div.nearest .buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 200px;
height: 3.5rem;
padding-left: 1rem;
padding-right: 1rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--gray-color);
background: var(--white-color);
color: var(--gray-color);
font-size: 1.25rem;
cursor: pointer; }
section.play-list article div.nearest .buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.play-list article div.nearest .buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.play-list article div.nearest .buy-button:hover svg {
width: 1.25rem;
margin-left: 0.25rem; }
section.play-list article div.nearest .buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.play-list article div.nearest .buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.play-list article div.nearest .buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.play-list article div.nearest .buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
@media (max-width: 767px) {
section.play-list article div.nearest .buy-button {
width: 179px; } }
section.play-list article div.nearest .buy-button:hover {
border-color: var(--red-color);
color: var(--red-color); }
@media (max-width: 767px) {
section.play-list article div.nearest button.few-tickets {
height: 56px; }
section.play-list article div.nearest button.few-tickets span.yellow-block {
height: 55px; }
section.play-list article div.nearest button.few-tickets span.yellow-block span {
font-size: 14px;
line-height: 12px; }
section.play-list article div.nearest button.few-tickets span.white-block {
height: 54px; }
section.play-list article div.nearest button.few-tickets span.white-block span {
font-size: 1.25rem; } }
section.play-list article div.nearest .host {
color: var(--gray-color); }
section.play-list article div.nearest .host a {
color: var(--red-color); }
section.play-list.project-list article .container {
height: auto;
min-height: 15.625rem; }
body.show-plays-as-tiles section.play-list {
display: none; }
div.play-header .top-line {
display: flex;
justify-content: flex-end;
align-items: center; }
div.play-header .top-line h1 {
display: block;
line-height: 1.2;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--black-color);
font-family: var(--pt-sans-font);
font-size: 2.5rem;
font-weight: bold;
margin-right: auto; }
@media (max-width: 767px) {
div.play-header .top-line h1 {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.play-header .top-line h1.active {
color: var(--red-color); }
@media (max-width: 767px) {
div.play-header .top-line h1 {
background: none;
font-size: 2rem;
text-align: left; } }
div.play-header .top-line .age {
display: inline-block;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--red-color);
border-radius: 50%;
line-height: calc(2.25rem - 2px);
text-align: center;
color: var(--red-color);
font-size: 1rem;
background-color: var(--white-color); }
div.play-header .top-line .pushkin {
width: 2.4rem;
height: 2.25rem;
flex-shrink: 0;
background: url("../images/pushkin.23e221a6095c.png") no-repeat center/contain;
margin-left: 0.625rem; }
div.play-header .details {
display: flex;
flex-wrap: wrap;
row-gap: 0.5rem;
column-gap: 0.75rem;
margin-top: 1.25rem; }
@media (max-width: 767px) {
div.play-header .details {
margin-top: 0.5rem; } }
div.play-header .details .item {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal;
cursor: pointer;
/*&.play-counter {
@include phone {
display: none;
}
}*/ }
@media (max-width: 767px) {
div.play-header .details .item {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.play-header .details .item.active {
color: var(--red-color); }
@media (max-width: 767px) {
div.play-header .details .item.genre {
text-align: left;
min-height: 2rem;
display: flex;
flex-direction: column;
justify-content: center; }
div.play-header .details .item.genre span {
line-height: 1.4; } }
div.play-header .details .item svg {
vertical-align: middle; }
div.play-header .mobi-details {
display: flex;
flex-wrap: wrap;
row-gap: 0.5rem;
column-gap: 0.75rem;
margin-top: 0.5rem; }
@media (min-width: 768px) {
div.play-header .mobi-details {
display: none; } }
div.play-header .mobi-details .item {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal;
cursor: pointer; }
@media (max-width: 767px) {
div.play-header .mobi-details .item {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.play-header .mobi-details .item.active {
color: var(--red-color); }
div.play-header .mobi-details .item svg {
vertical-align: middle; }
div.play-block span.age {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: 0;
bottom: 0;
background-color: var(--red-color);
color: white;
border-radius: 0.625rem 0px;
z-index: 3; }
@media (max-width: 767px) {
div.play-block span.age {
border-radius: 0.625rem 0px 0 0;
font-size: 1rem; } }
div.play-block .pushkin-card {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: 0;
top: 0;
background-color: var(--red-color);
color: white;
border-radius: 0px 0.625rem;
z-index: 3; }
@media (max-width: 767px) {
div.play-block .pushkin-card {
border-radius: 0px 0px 0px 0.625rem;
font-size: 1rem; } }
@media (max-width: 767px) {
div.play-block .placeholder {
padding-top: 2rem !important;
padding-bottom: 2rem !important; } }
div.play-nearest-performances .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
padding-left: 22.4375rem;
padding-bottom: 1rem;
min-height: 4rem;
display: flex;
align-items: center;
column-gap: 0.75rem; }
@media (max-width: 767px) {
div.play-nearest-performances .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.play-nearest-performances .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
height: auto;
flex-wrap: wrap;
row-gap: 0.5rem; } }
div.play-nearest-performances .container div.performances, div.play-nearest-performances .container div.icons {
display: flex;
align-items: center;
column-gap: 0.75rem;
flex-wrap: wrap;
row-gap: 0.5rem; }
div.play-nearest-performances .container .buy-button, div.play-nearest-performances .container .more {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: auto;
height: 3.5rem;
padding-left: 1rem;
padding-right: 1rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--gray-color);
background: var(--white-color);
color: var(--gray-color);
font-size: 1.25rem;
cursor: pointer; }
div.play-nearest-performances .container .buy-button.soldout, div.play-nearest-performances .container .more.soldout {
background-color: white;
color: var(--red-color); }
div.play-nearest-performances .container .buy-button svg, div.play-nearest-performances .container .more svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
div.play-nearest-performances .container .buy-button:hover svg, div.play-nearest-performances .container .more:hover svg {
width: 1.25rem;
margin-left: 0.25rem; }
div.play-nearest-performances .container .buy-button .pushkin-card, div.play-nearest-performances .container .more .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
div.play-nearest-performances .container .buy-button .pushkin-card:not(.alt), div.play-nearest-performances .container .more .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
div.play-nearest-performances .container .buy-button .pushkin-card.alt, div.play-nearest-performances .container .more .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
div.play-nearest-performances .container .buy-button span.few-tickets, div.play-nearest-performances .container .more span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
@media (max-width: 767px) {
div.play-nearest-performances .container .buy-button, div.play-nearest-performances .container .more {
font-size: 1rem;
height: 2.75rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
width: 179px; }
div.play-nearest-performances .container .buy-button span.few-tickets, div.play-nearest-performances .container .more span.few-tickets {
transform: none;
left: 0;
top: 0;
bottom: auto;
width: 100%;
background: transparent;
text-align: center; } }
div.play-nearest-performances .container .buy-button:hover, div.play-nearest-performances .container .more:hover {
border-color: var(--red-color);
color: var(--red-color); }
div.play-nearest-performances .container .host {
color: var(--gray-color); }
div.play-nearest-performances .container .host a {
color: var(--red-color); }
div.play-nearest-performances .container .age {
display: inline-block;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--red-color);
border-radius: 50%;
line-height: calc(2.25rem - 2px);
text-align: center;
color: var(--red-color);
font-size: 1rem;
margin-left: auto; }
div.play-nearest-performances .container .pushkin {
width: 2.4rem;
height: 2.25rem;
flex-shrink: 0;
background: url("../images/pushkin.23e221a6095c.png") no-repeat center/contain;
margin-left: 1rem; }
section.play-info {
--play-info-background: white;
--play-info-text-color: var(--gray-color); }
section.play-info .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
padding: 2rem 2.5rem 2.5rem 2.75rem;
display: flex;
flex-direction: column;
row-gap: 1rem;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
font-size: 1.125rem;
color: var(--play-info-text-color);
background-color: var(--play-info-background);
background-position: left top;
background-repeat: no-repeat;
position: relative; }
@media (max-width: 767px) {
section.play-info .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.play-info .container.with-poster {
display: grid;
grid-template-columns: 18.75rem 1fr;
gap: 1.5rem 1rem; }
section.play-info .container.with-theater {
padding-top: 3rem; }
@media (max-width: 767px) {
section.play-info .container {
display: flex !important;
flex-direction: column;
row-gap: 0 !important;
padding: 1.25rem var(--mobi-padding) 1.5rem;
border-radius: 0;
background-image: none !important;
color: var(--gray-color) !important;
background-color: transparent !important; }
section.play-info .container div.premier-date {
margin-top: 2rem;
order: 10; }
section.play-info .container div.duration {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
order: 20; } }
@media (max-width: 767px) {
section.play-info .container .poster {
margin-bottom: 1rem; } }
section.play-info .container .poster a {
display: block; }
section.play-info .container .poster img {
display: block;
max-width: 100%;
border-radius: 1.875rem; }
@media (max-width: 767px) {
section.play-info .container .poster img {
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem; } }
section.play-info .container.about-spec .poster a {
display: none; }
@media (max-width: 767px) {
section.play-info .container.about-spec .poster a {
display: inline; } }
section.play-info .container .text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--play-info-text-color); }
@media (max-width: 767px) {
section.play-info .container .text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.play-info .container .text a {
color: var(--red-color); }
section.play-info .container .text p {
margin-bottom: 1em; }
section.play-info .container .text ol, section.play-info .container .text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.play-info .container .text img {
max-width: 100%; }
section.play-info .container .text iframe {
max-width: 100%; }
section.play-info .container .text h2 {
margin-bottom: 1rem; }
section.play-info .container .text *:last-child {
margin-bottom: 0; }
section.play-info .container .text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.play-info .container .text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.play-info .container .text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.play-info .container .text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.play-info .container .text table.bordered-table {
border-collapse: collapse; }
section.play-info .container .text table.bordered-table th, section.play-info .container .text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.play-info .container .text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.play-info .container .text p.video-holder iframe, section.play-info .container .text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.play-info .container .text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.play-info .container .text ul.dots {
padding-left: 0 !important; } }
section.play-info .container .text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.play-info .container .text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
section.play-info .container:not(.with-poster) .text {
grid-column: span 2; }
section.play-info .container .theater-marker {
position: absolute;
left: 2.75rem;
top: 0;
padding: 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5rem;
border-radius: 0px 0px 0.625rem 0.625rem;
color: white; }
section.play-info .container .theater-marker.gold {
background: var(--golden-color); }
section.play-info .container .theater-marker.green {
background: var(--green-color); }
@media (max-width: 767px) {
section.play-info .container .theater-marker {
left: var(--mobi-padding);
max-width: calc(100vw - 2 * var(--mobi-padding));
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; } }
section.play-crew {
--play-crew-background: transparent;
--play-crew-text-color: var(--gray-color);
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 1.25rem 1.6875rem 2.75rem;
display: grid;
grid-template-columns: calc(45% - 2rem) 55%;
column-gap: 2rem;
background-color: var(--play-crew-background);
background-position: left top;
background-repeat: no-repeat; }
@media (max-width: 767px) {
section.play-crew {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.play-crew {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
@media (max-width: 767px) {
section.play-crew {
margin-left: 0;
margin-right: 0;
width: 100vw;
border-radius: 0;
display: flex;
flex-direction: column;
row-gap: 2rem;
background-image: none !important;
color: var(--gray-color) !important;
background-color: transparent !important; } }
section.play-crew .head {
display: flex;
flex-wrap: wrap;
margin-bottom: 1.5625rem;
column-gap: 0.9375rem;
row-gap: 0.5rem; }
section.play-crew .head h3 {
width: 13.5625rem;
height: 3.5rem;
line-height: 3.375rem;
text-align: center;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--play-crew-text-color);
color: var(--play-crew-text-color);
font-family: var(--open-sans-font);
font-size: 1.25rem;
font-weight: 400; }
section.play-crew .head h3.active {
font-weight: 700;
/*color: var(--red-color) !important;
border-color: var(--red-color) !important;*/ }
section.play-crew .head h3.btn {
cursor: pointer; }
section.play-crew .head button {
padding-left: 1rem;
padding-right: 1rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--play-crew-text-color);
background: var(--play-crew-background);
color: var(--play-crew-text-color);
font-size: 1.25rem;
height: 3.5rem;
cursor: pointer; }
@media (max-width: 767px) {
section.play-crew .head button {
height: 2.75rem;
font-size: 1rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
color: var(--gray-color) !important;
border-color: var(--gray-color) !important;
background: white !important; } }
section.play-crew .head button.active {
color: var(--red-color) !important;
border-color: var(--red-color) !important; }
section.play-crew .head button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.play-crew .head button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
@media (max-width: 767px) {
section.play-crew .play-team .head h3 {
width: 100%;
height: auto;
line-height: 1.2;
border: none;
text-align: left;
color: var(--gray-color) !important;
border-color: var(--gray-color) !important; } }
@media (max-width: 767px) {
section.play-crew .play-actors .head h3 {
width: auto;
height: 2.75rem;
line-height: calc(2.75rem - 2px);
font-size: 1rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
color: var(--gray-color) !important;
border-color: var(--gray-color) !important;
background: white !important; } }
section.play-crew ul {
list-style: none; }
section.play-crew ul.inactive {
display: none; }
section.play-crew li:not(:first-of-type) {
margin-top: 1rem; }
section.play-crew li.group {
font-size: 1.125rem;
color: var(--play-crew-text-color); }
section.play-crew dl {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
font-size: 1.125rem;
color: var(--play-crew-text-color); }
@media (max-width: 767px) {
section.play-crew dl {
color: var(--gray-color) !important; } }
section.play-crew dl dt {
font-weight: 700;
line-height: 1; }
section.play-crew dl dd a {
color: var(--red-color); }
section.play-crew dl dd a:hover {
text-decoration: underline; }
section.play-recomendations {
margin-top: 3.5rem;
margin-bottom: 7rem; }
@media (max-width: 767px) {
section.play-recomendations {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.play-recomendations .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.play-recomendations .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.play-recomendations .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.play-recomendations h2 {
margin-bottom: 2rem;
font-size: 2.8125rem;
font-weight: 700;
color: var(--red-color);
text-transform: uppercase; }
@media (max-width: 767px) {
section.play-recomendations h2 {
font-size: 1.375rem; } }
section.play-recomendations .grid {
display: grid;
grid-template-columns: repeat(3, 25rem);
gap: 2rem 3.4375rem;
grid-auto-rows: 29.6875rem; }
@media (max-width: 767px) {
section.play-recomendations .grid {
display: block; } }
section.play-recomendations .grid article {
display: flex;
flex-direction: column;
border-radius: 1.875rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
section.play-recomendations .grid article {
border-radius: 0.625rem; }
section.play-recomendations .grid article:not(:first-of-type) {
margin-top: 2rem; } }
section.play-recomendations .grid article a.image {
display: block;
margin-bottom: 0.75rem;
position: relative; }
section.play-recomendations .grid article a.image span.premiere {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
left: 0;
top: 0;
color: white;
background-color: var(--red-color);
border-radius: 0.625rem 0px; }
section.play-recomendations .grid article div.viewport {
position: relative;
margin-bottom: 0.75rem; }
section.play-recomendations .grid article div.viewport a.image {
margin-bottom: 0 !important; }
section.play-recomendations .grid article img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 1.875rem 1.875rem 0px 0px; }
@media (max-width: 767px) {
section.play-recomendations .grid article img {
border-radius: 0.625rem 0.625rem 0px 0px; } }
section.play-recomendations .grid article h3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.75rem;
font-size: 1.875rem;
font-weight: 700; }
@media (max-width: 767px) {
section.play-recomendations .grid article h3 {
margin-bottom: 0.5rem;
font-size: 1.375rem; } }
section.play-recomendations .grid article h3 a {
color: inherit; }
section.play-recomendations .grid article:hover h3 {
color: var(--red-color); }
section.play-recomendations .grid article p {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 1.5rem;
color: var(--gray-color); }
section.play-recomendations .grid article .author {
padding-left: 0.75rem;
padding-right: 0.75rem;
color: var(--gray-color);
margin-bottom: 0.75rem; }
section.play-recomendations .grid article .age {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: 0;
bottom: 0;
background-color: var(--marker-bg-color);
color: var(--gray-color);
border-radius: 0.625rem 0px 0px; }
section.play-recomendations .grid article .pushkin-card {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: 0;
top: 0;
background-color: var(--marker-bg-color);
color: var(--gray-color);
border-radius: 0px 0.625rem; }
section.play-recomendations .grid article:hover .age, section.play-recomendations .grid article:hover .pushkin-card {
color: white;
background-color: var(--red-color); }
section.play-recomendations .grid article div.button {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 1.5rem;
margin-top: auto; }
section.play-recomendations .grid article div.button button.buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--white-color);
color: var(--red-color);
font-size: 1.5625rem;
cursor: pointer; }
section.play-recomendations .grid article div.button button.buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.play-recomendations .grid article div.button button.buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.play-recomendations .grid article div.button button.buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.play-recomendations .grid article div.button button.buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.play-recomendations .grid article div.button button.buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.play-recomendations .grid article div.button button.buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.play-recomendations .grid article div.button button.buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
@media (max-width: 767px) {
section.play-recomendations .grid article div.button button.buy-button {
font-size: 1.25rem; } }
section.play-recomendations .grid article div.button button.buy-button:hover {
background-color: var(--red-color);
color: var(--white-color); }
section.play-grid {
margin-top: 1.25rem;
margin-bottom: 3rem; }
section.play-grid .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.play-grid .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.play-grid .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.play-grid .grid {
display: grid;
grid-template-columns: repeat(3, 25rem);
gap: 2rem 3.4375rem;
grid-auto-rows: 29.6875rem; }
@media (max-width: 767px) {
section.play-grid .grid {
display: block; } }
section.play-grid .grid article {
display: flex;
flex-direction: column;
border-radius: 1.875rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
section.play-grid .grid article {
border-radius: 0.625rem; }
section.play-grid .grid article:not(:first-of-type) {
margin-top: 2rem; } }
section.play-grid .grid article a.image {
display: block;
margin-bottom: 0.75rem;
position: relative; }
section.play-grid .grid article a.image span.premiere {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
left: 0;
top: 0;
color: white;
background-color: var(--red-color);
border-radius: 0.625rem 0px; }
section.play-grid .grid article div.viewport {
position: relative;
margin-bottom: 0.75rem; }
section.play-grid .grid article div.viewport a.image {
margin-bottom: 0 !important; }
section.play-grid .grid article img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 1.875rem 1.875rem 0px 0px; }
@media (max-width: 767px) {
section.play-grid .grid article img {
border-radius: 0.625rem 0.625rem 0px 0px; } }
section.play-grid .grid article h3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.75rem;
font-size: 1.875rem;
font-weight: 700; }
@media (max-width: 767px) {
section.play-grid .grid article h3 {
margin-bottom: 0.5rem;
font-size: 1.375rem; } }
section.play-grid .grid article h3 a {
color: inherit; }
section.play-grid .grid article:hover h3 {
color: var(--red-color); }
section.play-grid .grid article p {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 1.5rem;
color: var(--gray-color); }
section.play-grid .grid article .author {
padding-left: 0.75rem;
padding-right: 0.75rem;
color: var(--gray-color);
margin-bottom: 0.75rem; }
section.play-grid .grid article .age {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: 0;
bottom: 0;
background-color: var(--marker-bg-color);
color: var(--gray-color);
border-radius: 0.625rem 0px 0px; }
section.play-grid .grid article .pushkin-card {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
right: 0;
top: 0;
background-color: var(--marker-bg-color);
color: var(--gray-color);
border-radius: 0px 0.625rem; }
section.play-grid .grid article:hover .age, section.play-grid .grid article:hover .pushkin-card {
color: white;
background-color: var(--red-color); }
section.play-grid .grid article div.button {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 1.5rem;
margin-top: auto; }
section.play-grid .grid article div.button button.buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--white-color);
color: var(--red-color);
font-size: 1.5625rem;
cursor: pointer; }
section.play-grid .grid article div.button button.buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.play-grid .grid article div.button button.buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.play-grid .grid article div.button button.buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.play-grid .grid article div.button button.buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.play-grid .grid article div.button button.buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.play-grid .grid article div.button button.buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.play-grid .grid article div.button button.buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
@media (max-width: 767px) {
section.play-grid .grid article div.button button.buy-button {
font-size: 1.25rem; } }
section.play-grid .grid article div.button button.buy-button:hover {
background-color: var(--red-color);
color: var(--white-color); }
body:not(.show-plays-as-tiles) section.play-grid {
display: none; }
section.play-awards {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 1.25rem 1.6875rem 2.75rem; }
@media (max-width: 767px) {
section.play-awards {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.play-awards {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
section.play-awards div.text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.play-awards div.text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.play-awards div.text a {
color: var(--red-color); }
section.play-awards div.text p {
margin-bottom: 1em; }
section.play-awards div.text ol, section.play-awards div.text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.play-awards div.text img {
max-width: 100%; }
section.play-awards div.text iframe {
max-width: 100%; }
section.play-awards div.text h2 {
margin-bottom: 1rem; }
section.play-awards div.text *:last-child {
margin-bottom: 0; }
section.play-awards div.text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.play-awards div.text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.play-awards div.text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.play-awards div.text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.play-awards div.text table.bordered-table {
border-collapse: collapse; }
section.play-awards div.text table.bordered-table th, section.play-awards div.text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.play-awards div.text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.play-awards div.text p.video-holder iframe, section.play-awards div.text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.play-awards div.text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.play-awards div.text ul.dots {
padding-left: 0 !important; } }
section.play-awards div.text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.play-awards div.text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
section.play-awards ul.award-list {
list-style: none;
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
section.play-awards ul.award-list li:not(:first-of-type) {
margin-top: 0.5rem; }
section.play-awards ul.award-list a {
color: var(--red-color); }
section.play-awards div.text ~ ul.award-list {
margin-top: 2rem; }
section.play-responses {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 1.25rem 1.6875rem 2.75rem; }
@media (max-width: 767px) {
section.play-responses {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.play-responses {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
div.play-partial {
height: 9.0625rem;
position: relative;
overflow: hidden; }
@media (max-width: 767px) {
div.play-partial {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.play-partial svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-53%, -50%); }
div.play-partial div.link {
position: absolute;
left: 0;
top: calc(0.5 * (9.0625rem - 1.25rem));
width: 100%;
text-align: center; }
div.play-partial a {
font-size: 1.25rem;
font-weight: bold;
line-height: 1;
color: var(--red-color); }
body.show-plays-as-tiles div.partial-play-list {
display: none; }
body:not(.show-plays-as-tiles) div.partial-play-grid {
display: none; }
section.playbill-item-list {
margin-top: 2rem;
margin-bottom: 2rem; }
section.playbill-item-list.home {
margin-bottom: 0; }
section.playbill-item-list article.performance:not(:first-of-type) {
margin-top: 2.25rem; }
section.playbill-item-list article.performance .container {
position: relative;
width: var(--playbill-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.playbill-item-list article.performance .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.playbill-item-list article.performance .pgrid {
display: grid;
grid-template-columns: 23.75rem 1fr 21rem;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
min-height: 9.375rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .pgrid {
display: block;
padding-top: calc(2 * var(--mobi-padding));
padding-bottom: var(--mobi-padding);
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.playbill-item-list article.performance .datatime {
padding-left: 2.5rem;
display: flex;
align-items: center; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .datatime {
display: none; } }
section.playbill-item-list article.performance .datatime .day {
color: var(--red-color);
font-size: 9.375rem;
font-weight: 600;
line-height: 9.375rem;
opacity: 0.5;
margin-right: 1.5rem; }
section.playbill-item-list article.performance .datatime .time {
font-size: 2.1875rem;
font-weight: 600;
color: var(--gray-color); }
section.playbill-item-list article.performance .datatime .month {
font-size: 1.25rem;
color: var(--gray-color);
margin-top: 2px;
margin-bottom: 2px; }
section.playbill-item-list article.performance .datatime .weekday {
font-size: 1.25rem;
color: var(--red-color);
text-transform: lowercase; }
section.playbill-item-list article.performance .info {
align-self: center;
padding-left: 1rem; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .info {
padding-left: 0;
margin-bottom: 1rem; } }
section.playbill-item-list article.performance .info .author {
font-size: 1.25rem;
color: var(--gray-color);
line-height: 1; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .info .author {
font-size: 1rem; } }
section.playbill-item-list article.performance .info h3 {
font-size: 2.5rem;
font-weight: bold;
line-height: 1.2; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .info h3 {
font-size: 1.5rem; } }
section.playbill-item-list article.performance .info h3:hover {
font-weight: 700;
color: var(--red-color); }
section.playbill-item-list article.performance .info h3 a {
color: inherit; }
section.playbill-item-list article.performance .info .line {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 0.25rem;
color: var(--gray-color);
column-gap: 0.75rem;
row-gap: 0.5rem; }
section.playbill-item-list article.performance .info .line span.stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--gray-color);
color: var(--gray-color);
background-color: var(--white-color); }
@media (max-width: 767px) {
section.playbill-item-list article.performance .info .line span.stage {
display: none; } }
section.playbill-item-list article.performance .info .line a.stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--red-color);
color: var(--white-color);
background-color: var(--red-color); }
@media (max-width: 767px) {
section.playbill-item-list article.performance .info .line a.stage {
display: none; } }
section.playbill-item-list article.performance .info .line .marker {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--golden-color);
color: var(--golden-color);
background-color: var(--white-color); }
@media (max-width: 767px) {
section.playbill-item-list article.performance .info .line .marker {
display: none; } }
section.playbill-item-list article.performance .info .host {
margin-top: 0.5rem;
color: var(--gray-color); }
section.playbill-item-list article.performance .info .host a {
color: var(--red-color); }
section.playbill-item-list article.performance .payment {
align-self: center; }
section.playbill-item-list article.performance .payment .grid {
display: grid;
grid-template-columns: 17.5rem 2.875rem;
gap: 0.5rem 0.5rem; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .payment .grid {
display: block; } }
section.playbill-item-list article.performance .payment .grid .btn {
align-self: center; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .payment .grid .btn {
display: none; } }
section.playbill-item-list article.performance .payment .grid .prices {
font-size: 1.25rem;
text-align: center;
color: var(--gray-color); }
@media (max-width: 767px) {
section.playbill-item-list article.performance .payment .grid .prices {
display: none;
/*margin-top: 0.5rem;
font-size: 1rem;
color: var(--red-color);*/ } }
section.playbill-item-list article.performance .payment .grid .buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.playbill-item-list article.performance .payment .grid .buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.playbill-item-list article.performance .payment .grid .buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.playbill-item-list article.performance .payment .grid .buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.playbill-item-list article.performance .payment .grid .buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.playbill-item-list article.performance .payment .grid .buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.playbill-item-list article.performance .payment .grid .buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.playbill-item-list article.performance .payment .grid .buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
section.playbill-item-list article.performance .payment .grid .buy-button.green-button {
background-color: var(--green-color);
border-color: var(--green-color); }
section.playbill-item-list article.performance .payment .grid button.buy-button ~ .prices {
margin-top: 0.625rem; }
section.playbill-item-list article.performance .payment .grid .icons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .payment .grid .icons {
display: none; } }
section.playbill-item-list article.performance .payment .grid .icons .age {
font-size: 1.5625rem;
color: var(--red-color);
opacity: 0.5; }
section.playbill-item-list article.performance .payment .theater img {
display: block;
width: 25rem;
height: 5.625rem;
object-fit: contain;
object-position: center; }
section.playbill-item-list article.performance .payment .theater .buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 17.5rem;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.playbill-item-list article.performance .payment .theater .buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.playbill-item-list article.performance .payment .theater .buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.playbill-item-list article.performance .payment .theater .buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.playbill-item-list article.performance .payment .theater .buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.playbill-item-list article.performance .payment .theater .buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.playbill-item-list article.performance .payment .theater .buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.playbill-item-list article.performance .payment .theater .buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
@media (max-width: 767px) {
section.playbill-item-list article.performance .payment .theater .buy-button {
display: none; } }
section.playbill-item-list article.performance .left-marker {
display: block;
position: absolute;
left: 1.875rem;
bottom: 100%;
padding: 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5rem;
border-radius: 0.625rem 0.625rem 0px 0px;
color: white; }
section.playbill-item-list article.performance a.left-marker:hover {
text-decoration: underline; }
section.playbill-item-list article.performance .center-marker {
position: absolute;
left: 24.125rem;
top: 0;
padding: 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5rem;
border-radius: 0px 0px 0.625rem 0.625rem;
color: white; }
@media (max-width: 767px) {
section.playbill-item-list article.performance .center-marker {
left: 1.875rem;
max-width: calc(100vw - var(--mobi-padding) - 1.875rem);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; } }
section.playbill-item-list article.performance.premiere .left-marker, section.playbill-item-list article.performance.ourtour .center-marker {
background: var(--red-color); }
section.playbill-item-list article.performance.ourtour .left-marker, section.playbill-item-list article.performance.ourtour .center-marker {
background: var(--golden-color); }
section.playbill-item-list article.performance.tour .left-marker, section.playbill-item-list article.performance.tour .center-marker {
background: var(--green-color); }
section.playbill-item-list article.performance.strawlark .left-marker, section.playbill-item-list article.performance.strawlark .center-marker {
background: var(--golden-color); }
section.playbill-item-list article.performance.canceled .left-marker {
background: black; }
section.playbill-item-list article.performance.replaced .left-marker {
background: var(--gray-color); }
section.playbill-item-list article.performance .mobi-line {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
row-gap: 1rem; }
@media (min-width: 768px) {
section.playbill-item-list article.performance .mobi-line {
display: none; } }
section.playbill-item-list article.performance .mobi-line .buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: auto;
height: 2.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1rem;
cursor: pointer; }
section.playbill-item-list article.performance .mobi-line .buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.playbill-item-list article.performance .mobi-line .buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.playbill-item-list article.performance .mobi-line .buy-button:hover svg {
width: 1rem;
margin-left: 0.2rem; }
section.playbill-item-list article.performance .mobi-line .buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.playbill-item-list article.performance .mobi-line .buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.playbill-item-list article.performance .mobi-line .buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.playbill-item-list article.performance .mobi-line .buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
section.playbill-item-list article.performance .mobi-line .buy-button.green-button {
background-color: var(--green-color);
border-color: var(--green-color); }
section.playbill-item-list article.performance .mobi-line .buy-button .prices {
position: absolute;
left: 50%;
top: 2.25rem;
font-size: 1rem;
color: var(--red-color);
transform: translateX(-50%);
white-space: nowrap; }
section.playbill-item-list article.performance .mobi-line span.stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.625rem;
border: 1px solid var(--gray-color);
color: var(--gray-color);
background-color: var(--white-color); }
section.playbill-item-list article.performance .mobi-line a.stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
color: var(--white-color);
background-color: var(--red-color); }
section.playbill-item-list article.performance .mobi-line .marker {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.625rem;
border: 1px solid var(--golden-color);
color: var(--golden-color);
background-color: var(--white-color); }
section.playbill-item-list article.performance .mobi-line .age {
font-size: 1rem;
color: var(--red-color); }
@media (max-width: 767px) {
section.playbill-item-list article.performance:not(.soldout) .mobi-line {
padding-bottom: 0.75rem; }
section.playbill-item-list article.performance.few .mobi-line .buy-button {
display: none; }
section.playbill-item-list article.performance button.few-tickets {
grid-template-columns: 60px 70px;
width: 130px;
height: 36px; }
section.playbill-item-list article.performance button.few-tickets span.yellow-block, section.playbill-item-list article.performance button.few-tickets span.white-block {
height: 35px; } }
section.playbill-item-list article.performance .mobi-datetime {
font-size: 1rem; }
@media (min-width: 768px) {
section.playbill-item-list article.performance .mobi-datetime {
display: none; } }
body.show-playbill-as-tiles section.playbill-item-list {
display: none; }
/*body.body-home section.playbill-item-list article.performance h3 {
font-weight: bold;
}*/
div.playbill-link-all {
height: 9.0625rem;
position: relative;
overflow: hidden; }
@media (max-width: 767px) {
div.playbill-link-all {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.playbill-link-all svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-53%, -50%); }
div.playbill-link-all div.link {
position: absolute;
left: 0;
top: calc(0.5 * (9.0625rem - 1.25rem));
width: 100%;
text-align: center; }
div.playbill-link-all a {
font-size: 1.25rem;
font-weight: bold;
line-height: 1;
color: var(--red-color); }
div.playbill-list-header {
margin-top: 1rem;
margin-bottom: 1.25rem; }
div.playbill-list-header .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 23.75rem 1fr 11rem; }
@media (max-width: 767px) {
div.playbill-list-header .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.playbill-list-header .container {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
row-gap: 0.5rem; } }
div.playbill-list-header .icons {
display: flex;
align-items: center; }
@media (max-width: 767px) {
div.playbill-list-header .icons {
order: 2; } }
div.playbill-list-header .disclaimer {
display: flex;
align-items: center;
color: var(--red-color); }
@media (max-width: 767px) {
div.playbill-list-header .disclaimer {
order: 1; } }
div.playbill-list-header .disclaimer span {
font-size: 0.875rem;
margin-left: 0.875rem; }
div.playbill-list-header a.as-list path {
stroke: var(--red-color); }
div.playbill-list-header a.as-tiles {
margin-left: 1.25rem; }
div.playbill-list-header a.as-tiles path {
stroke: var(--gray-color); }
div.playbill-list-header .dropdown {
--dropdown-margin-left: auto;
--dropdown-width: 11rem; }
@media (max-width: 767px) {
div.playbill-list-header .left {
order: 3;
margin-left: auto; } }
body.show-playbill-as-tiles div.playbill-list-header a.as-list path {
stroke: var(--gray-color); }
body.show-playbill-as-tiles div.playbill-list-header a.as-tiles path {
stroke: var(--red-color); }
div.month-menu {
margin-top: 3rem;
margin-bottom: 3.5rem; }
div.month-menu nav {
width: var(--container-width);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 0.75rem;
row-gap: 0.75rem; }
@media (max-width: 767px) {
div.month-menu nav {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.month-menu nav a {
display: inline-block;
height: 2.75rem;
line-height: calc(2.75rem - 2px);
padding-left: 1.25rem;
padding-right: 1.25rem;
border-radius: 0.625rem;
border: 1px solid var(--gray-color);
background: #FFF;
color: var(--gray-color);
font-size: 1.25rem; }
div.month-menu nav a.active {
color: var(--red-color);
border-color: var(--red-color); }
section.playbill-tiles {
margin-top: 2rem;
margin-bottom: 2rem; }
section.playbill-tiles .container {
width: var(--playbill-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(3, 25rem);
column-gap: 3.4375rem;
row-gap: 3.125rem; }
@media (max-width: 767px) {
section.playbill-tiles .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.playbill-tiles .container {
display: block;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.playbill-tiles article.tile {
display: flex;
flex-direction: column;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
section.playbill-tiles article.tile:not(:first-of-type) {
margin-top: 2.25rem; } }
section.playbill-tiles article.tile div.image {
position: relative; }
section.playbill-tiles article.tile div.image a {
display: block; }
section.playbill-tiles article.tile div.image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0.625rem 0px 0px; }
section.playbill-tiles article.tile .left-marker {
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5rem;
border-radius: 0.625rem 0px 0.625rem 0px;
color: white; }
section.playbill-tiles article.tile a.left-marker:hover {
text-decoration: underline; }
section.playbill-tiles article.tile .center-marker {
position: absolute;
right: 0;
bottom: 0;
padding: 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5rem;
border-radius: 0.625rem 0px 0px 0;
color: white; }
section.playbill-tiles article.tile.premiere .left-marker {
background: var(--red-color); }
section.playbill-tiles article.tile.ourtour .left-marker, section.playbill-tiles article.tile.ourtour .center-marker {
background: var(--golden-color); }
section.playbill-tiles article.tile.tour .left-marker, section.playbill-tiles article.tile.tour .center-marker {
background: var(--green-color); }
section.playbill-tiles article.tile.strawlark .left-marker, section.playbill-tiles article.tile.strawlark .center-marker {
background: var(--golden-color); }
section.playbill-tiles article.tile.canceled .left-marker {
background: black; }
section.playbill-tiles article.tile .details {
height: 3.75rem;
display: flex;
align-items: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.75rem; }
@media (max-width: 767px) {
section.playbill-tiles article.tile .details {
margin-bottom: 0; } }
section.playbill-tiles article.tile .details .day {
color: var(--red-color);
font-size: 2.8125rem;
font-weight: 600;
line-height: 1;
margin-right: 0.1875rem; }
@media (max-width: 767px) {
section.playbill-tiles article.tile .details .day {
display: none; } }
section.playbill-tiles article.tile .details .parts {
color: var(--red-color); }
@media (max-width: 767px) {
section.playbill-tiles article.tile .details .parts {
display: none; } }
section.playbill-tiles article.tile .details .parts .month {
font-size: 1.25rem;
line-height: 1; }
section.playbill-tiles article.tile .details .parts .weekday {
line-height: 1;
text-transform: lowercase; }
section.playbill-tiles article.tile .details span.stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--gray-color);
color: var(--gray-color);
background-color: var(--white-color);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.playbill-tiles article.tile .details span.stage {
margin-left: 0; } }
section.playbill-tiles article.tile .details a.stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--red-color);
color: var(--white-color);
background-color: var(--red-color);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.playbill-tiles article.tile .details a.stage {
margin-left: 0; } }
section.playbill-tiles article.tile .details .marker {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--golden-color);
color: var(--golden-color);
background-color: var(--white-color);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.playbill-tiles article.tile .details .marker {
margin-left: 0; } }
section.playbill-tiles article.tile .details .age {
display: inline-block;
width: 2.25rem;
height: 2.25rem;
border: 1px solid transparent;
border-radius: 50%;
line-height: calc(2.25rem - 2px);
text-align: center;
color: var(--red-color);
font-size: 1.25rem; }
section.playbill-tiles article.tile .details .pushkin {
width: 2.4rem;
height: 2.25rem;
flex-shrink: 0;
background: url("../images/pushkin.23e221a6095c.png") no-repeat center/contain;
margin-left: 0.625rem; }
section.playbill-tiles article.tile .author {
padding-left: 0.75rem;
padding-right: 0.75rem;
color: var(--gray-color); }
section.playbill-tiles article.tile h3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 1.875rem;
font-weight: 700; }
@media (max-width: 767px) {
section.playbill-tiles article.tile h3 {
font-size: 1.375rem;
margin-bottom: 0.5rem; } }
section.playbill-tiles article.tile h3:hover {
color: var(--red-color); }
section.playbill-tiles article.tile h3:not(.with-genre) {
margin-bottom: 0.5rem; }
section.playbill-tiles article.tile h3 a {
color: inherit; }
section.playbill-tiles article.tile.event h3, section.playbill-tiles article.tile.game h3 {
color: var(--golden-color); }
section.playbill-tiles article.tile.event h3:hover, section.playbill-tiles article.tile.game h3:hover {
color: var(--red-color); }
section.playbill-tiles article.tile .genre {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.5rem;
color: var(--gray-color); }
@media (max-width: 767px) {
section.playbill-tiles article.tile .genre {
display: none; } }
section.playbill-tiles article.tile .host {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.5rem;
color: var(--gray-color); }
section.playbill-tiles article.tile .host a {
color: var(--red-color); }
section.playbill-tiles article.tile .mobi-datetime {
font-size: 1.125rem;
margin-bottom: 0.75rem;
padding-left: 0.75rem;
padding-right: 0.75rem; }
@media (min-width: 768px) {
section.playbill-tiles article.tile .mobi-datetime {
display: none; } }
section.playbill-tiles article.tile .timeline {
margin-top: auto;
padding-left: 0.75rem;
padding-right: 0.75rem;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 0.75rem;
row-gap: 0.5rem;
color: var(--gray-color); }
section.playbill-tiles article.tile .timeline span, section.playbill-tiles article.tile .timeline div.prices {
display: inline-block;
height: 2.25rem;
line-height: 2.125rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--gray-color);
padding-left: 0.375rem;
padding-right: 0.375rem; }
section.playbill-tiles article.tile .timeline span {
font-weight: 700; }
section.playbill-tiles article.tile .buttons {
margin-top: 1rem;
padding: 0 0.75rem 1.5rem; }
section.playbill-tiles article.tile .buttons button.buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.playbill-tiles article.tile .buttons button.buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.playbill-tiles article.tile .buttons button.buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.playbill-tiles article.tile .buttons button.buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.playbill-tiles article.tile .buttons button.buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.playbill-tiles article.tile .buttons button.buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.playbill-tiles article.tile .buttons button.buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.playbill-tiles article.tile .buttons button.buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
section.playbill-tiles article.tile .buttons button.buy-button.green-button {
background-color: var(--green-color);
border-color: var(--green-color); }
section.playbill-tiles article.tile .buttons > a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.playbill-tiles article.tile .buttons > a.soldout {
background-color: white;
color: var(--red-color); }
section.playbill-tiles article.tile .buttons > a svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.playbill-tiles article.tile .buttons > a:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.playbill-tiles article.tile .buttons > a .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.playbill-tiles article.tile .buttons > a .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.playbill-tiles article.tile .buttons > a .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.playbill-tiles article.tile .buttons > a span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
section.playbill-tiles article.tile .buttons .theater img {
display: block;
width: 100%;
height: 5.625rem;
object-fit: contain;
object-position: center; }
section.playbill-tiles article.tile .buttons .theater .buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.playbill-tiles article.tile .buttons .theater .buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.playbill-tiles article.tile .buttons .theater .buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.playbill-tiles article.tile .buttons .theater .buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.playbill-tiles article.tile .buttons .theater .buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.playbill-tiles article.tile .buttons .theater .buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.playbill-tiles article.tile .buttons .theater .buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.playbill-tiles article.tile .buttons .theater .buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
body:not(.show-playbill-as-tiles) section.playbill-tiles {
display: none; }
section.popup-block .performances {
display: grid;
grid-template-columns: 30% 1fr;
column-gap: 2rem; }
@media (max-width: 767px) {
section.popup-block .performances {
display: flex;
flex-direction: column;
row-gap: 2rem; } }
section.popup-block .performances .image img {
max-width: 100%;
border-radius: 0.3125rem; }
section.popup-block .performances .author {
color: var(--gray-color); }
section.popup-block .performances .head {
display: flex;
justify-content: flex-end;
align-items: center; }
@media (max-width: 767px) {
section.popup-block .performances .head {
margin-bottom: 0.75rem; } }
section.popup-block .performances h3 {
font-size: 1.875rem;
font-weight: 700;
margin-right: auto; }
@media (max-width: 767px) {
section.popup-block .performances h3 {
font-size: 1.375rem; } }
section.popup-block .performances h3:hover {
color: var(--red-color); }
section.popup-block .performances h3 a {
color: inherit; }
section.popup-block .performances .age {
display: inline-block;
width: 2.25rem;
height: 2.25rem;
border: 1px solid white;
border-radius: 50%;
line-height: calc(2.25rem - 2px);
text-align: center;
color: var(--red-color);
font-size: 1.25rem; }
section.popup-block .performances .genre {
margin-bottom: 0.5rem;
color: var(--gray-color); }
section.popup-block .performances .playbill {
margin-top: 2rem; }
@media (max-width: 767px) {
section.popup-block .performances .playbill {
margin-top: 0.75rem; } }
section.popup-block .performances .performance {
display: flex;
justify-content: space-between;
align-items: center; }
@media (max-width: 767px) {
section.popup-block .performances .performance {
display: block; } }
section.popup-block .performances .performance:not(:first-of-type) {
margin-top: 1.5rem; }
section.popup-block .performances .performance .datetime {
font-size: 1.25rem;
color: var(--gray-color); }
section.popup-block .performances .performance .stage {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--gray-color);
color: var(--gray-color);
background-color: var(--white-color); }
@media (max-width: 767px) {
section.popup-block .performances .performance .stage {
margin-top: 0.75rem;
margin-bottom: 0.75rem; } }
section.popup-block .performances .performance .marker {
display: inline-block;
height: 2.25rem;
line-height: calc(2.25rem - 2px);
flex-shrink: 0;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 1.875rem;
border: 1px solid var(--golden-color);
color: var(--white-color);
background-color: var(--golden-color); }
@media (max-width: 767px) {
section.popup-block .performances .performance .marker {
margin-top: 0.75rem;
margin-bottom: 0.75rem; } }
section.popup-block .performances .performance .buy {
flex: 0 0 25rem; }
section.popup-block .performances .performance .buy .buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.popup-block .performances .performance .buy .buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.popup-block .performances .performance .buy .buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.popup-block .performances .performance .buy .buy-button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.popup-block .performances .performance .buy .buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.popup-block .performances .performance .buy .buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.popup-block .performances .performance .buy .buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.popup-block .performances .performance .buy .buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
section.playbill-mosaic {
margin-top: 1rem;
margin-bottom: 1rem; }
@media (max-width: 767px) {
section.playbill-mosaic {
display: none; } }
section.playbill-mosaic .container {
width: var(--playbill-width);
margin-left: auto;
margin-right: auto;
height: 3.8125rem;
position: relative; }
@media (max-width: 767px) {
section.playbill-mosaic .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.playbill-mosaic .slider {
width: var(--playbill-width);
margin-left: auto;
margin-right: auto;
height: 3.8125rem;
overflow: hidden;
display: flex; }
@media (max-width: 767px) {
section.playbill-mosaic .slider {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.playbill-mosaic .runner {
display: flex;
align-items: center;
height: 3.8125rem; }
section.playbill-mosaic .month {
display: flex;
align-items: center;
height: 3.8125rem; }
section.playbill-mosaic .month-name {
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.875rem;
font-weight: 700;
line-height: 1.90625rem;
text-transform: uppercase; }
section.playbill-mosaic .week {
display: flex;
align-items: center;
height: 3.8125rem;
padding-left: 0.96875rem;
padding-right: 0.96875rem; }
section.playbill-mosaic .week:not(.first) {
margin-left: 3rem; }
section.playbill-mosaic .item {
position: relative;
width: 2.4375rem;
height: 3.8125rem;
color: white; }
section.playbill-mosaic .item .triangle {
position: absolute;
width: 4.375rem;
height: 3.8125rem;
left: -0.96875rem; }
section.playbill-mosaic .item .hover {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
cursor: pointer; }
section.playbill-mosaic .item.empty .inner {
background-color: var(--light-gray-color); }
section.playbill-mosaic .item.mon .inner {
background-color: var(--red-color); }
section.playbill-mosaic .item.tues .inner {
background-color: var(--yellow-color); }
section.playbill-mosaic .item.wed .inner {
background-color: #ff9898; }
section.playbill-mosaic .item.thurs .inner {
background-color: #F5E2C1; }
section.playbill-mosaic .item.fri .inner {
background-color: var(--gray-color); }
section.playbill-mosaic .item.sat .inner {
background-color: var(--green-color); }
section.playbill-mosaic .item.sun .inner {
background-color: #D7EAD7; }
section.playbill-mosaic .item .day {
width: 4.375rem;
height: 3.78886rem;
text-align: center;
font-family: var(--dela-gothic-font); }
section.playbill-mosaic .item.down .inner {
clip-path: polygon(0% 100%, 50% 0%, 100% 100%); }
section.playbill-mosaic .item.down .day {
padding-top: 1.625rem; }
section.playbill-mosaic .item.up .inner {
clip-path: polygon(0% 0%, 50% 100%, 100% 0%); }
section.playbill-mosaic .item.up .day {
padding-top: 0.625rem; }
section.playbill-mosaic .mosaic-popup {
display: none;
z-index: 999;
/*a {
color: inherit
}*/ }
section.playbill-mosaic .mosaic-popup[data-show], section.playbill-mosaic .mosaic-popup:hover {
display: block; }
section.playbill-mosaic .mosaic-popup.empty .inner {
background-color: var(--light-gray-color); }
section.playbill-mosaic .mosaic-popup.mon .inner {
background-color: var(--red-color); }
section.playbill-mosaic .mosaic-popup.tues .inner {
background-color: var(--yellow-color); }
section.playbill-mosaic .mosaic-popup.wed .inner {
background-color: #ff9898; }
section.playbill-mosaic .mosaic-popup.thurs .inner {
background-color: #F5E2C1; }
section.playbill-mosaic .mosaic-popup.fri .inner {
background-color: var(--gray-color); }
section.playbill-mosaic .mosaic-popup.sat .inner {
background-color: var(--green-color); }
section.playbill-mosaic .mosaic-popup.sun .inner {
background-color: #D7EAD7; }
section.playbill-mosaic .mosaic-popup .inner {
display: flex;
justify-content: flex-end;
align-items: center;
width: 12.5rem;
height: 7rem;
text-align: center;
color: inherit; }
section.playbill-mosaic .mosaic-popup .h4 {
display: block;
font-weight: bold;
font-size: 0.875rem;
max-height: 2.2rem;
overflow: hidden;
color: white;
padding-left: 1.5rem;
padding-right: 1.5rem; }
section.playbill-mosaic .mosaic-popup .age {
display: block; }
section.playbill-mosaic .mosaic-popup .age span {
display: block;
width: 1.875rem;
height: 1.875rem;
line-height: 1.875rem;
text-align: center;
background: white;
border-radius: 50%;
font-weight: bold;
margin-left: auto;
margin-right: auto; }
section.playbill-mosaic .mosaic-popup.mon .age span {
color: var(--red-color); }
section.playbill-mosaic .mosaic-popup.tues .age span {
color: var(--yellow-color); }
section.playbill-mosaic .mosaic-popup.wed .age span {
color: var(--light-gray-color); }
section.playbill-mosaic .mosaic-popup.thurs .age span {
color: #F5E2C1; }
section.playbill-mosaic .mosaic-popup.fri .age span {
color: var(--gray-color); }
section.playbill-mosaic .mosaic-popup.sat .age span {
color: var(--green-color); }
section.playbill-mosaic .mosaic-popup.sun .age span {
color: #D7EAD7; }
section.playbill-mosaic .mosaic-popup .times {
display: block;
color: white;
font-size: 0.875rem;
max-width: 6.25rem; }
section.playbill-mosaic .mosaic-popup.down .inner {
transform: translateY(-1px);
flex-direction: column-reverse;
padding-top: 1rem;
padding-bottom: 0.5rem;
clip-path: polygon(0% 100%, 32.8% 0%, 67.3% 0%, 100% 100%); }
section.playbill-mosaic .mosaic-popup.down .inner .h4 {
margin-top: auto; }
section.playbill-mosaic .mosaic-popup.up .inner {
transform: translateY(1px);
flex-direction: column;
padding-top: 0.5rem;
padding-bottom: 1rem;
clip-path: polygon(0% 0%, 32.8% 100%, 67.3% 100%, 100% 0%); }
section.playbill-mosaic .mosaic-popup.up .inner .h4 {
margin-bottom: auto; }
section.playbill-mosaic .arrow {
position: absolute;
top: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 3.75rem;
height: 3.75rem;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%; }
section.playbill-mosaic .arrow:hover {
color: var(--red-color); }
section.playbill-mosaic .arrow.prev {
left: -1.5rem; }
section.playbill-mosaic .arrow.next {
right: -1.5rem; }
div.tile-popup {
background: #FFFFFF;
box-shadow: 0px 0.625rem 1.875rem rgba(2, 61, 72, 0.2);
border-radius: 2.5rem;
padding: 1.75rem 2.5rem 2.5rem;
width: 75rem; }
@media (max-width: 767px) {
div.tile-popup {
padding: 1.75rem var(--mobi-padding) 2.5rem;
border-radius: 1.25rem; } }
div.tile-popup .head {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 1.75rem; }
div.tile-popup .head a {
transform: rotate(45deg);
color: var(--black-color); }
@media (max-width: 767px) {
div.tile-popup {
width: auto; } }
div.theater-header {
margin-top: 2rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
div.theater-header {
margin-bottom: 2rem; } }
div.theater-header .container {
position: relative;
width: var(--playbill-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.theater-header .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.theater-header .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.theater-header h2 {
color: var(--red-color);
font-weight: bold; }
section.home-newsitem-list .head {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: flex-end;
align-items: center;
color: var(--gray-color);
margin-bottom: 1rem; }
@media (max-width: 767px) {
section.home-newsitem-list .head {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.home-newsitem-list .head {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding);
margin-bottom: 1.5rem; } }
section.home-newsitem-list .head h2 {
margin-right: auto;
font-size: 2.8125rem;
font-weight: 700;
text-transform: uppercase; }
@media (max-width: 767px) {
section.home-newsitem-list .head h2 {
font-size: 1.5rem; } }
section.home-newsitem-list .head h2 a {
color: var(--red-color); }
section.home-newsitem-list .head svg {
cursor: pointer; }
section.home-newsitem-list .head svg:hover {
color: var(--red-color); }
@media (max-width: 767px) {
section.home-newsitem-list .head svg {
width: 2rem;
height: 2rem; } }
section.home-newsitem-list .f-carousel {
--f-carousel-slide-width: 25%; }
@media (max-width: 767px) {
section.home-newsitem-list .f-carousel {
--f-carousel-slide-width: 100%; } }
section.home-newsitem-list article.newsitem {
width: 17.8125rem;
height: 25rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
background: #FFF;
box-shadow: 0px 0px 1.25rem 0px rgba(68, 68, 68, 0.1);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.home-newsitem-list article.newsitem {
width: calc(100% - 2 * var(--mobi-padding)); } }
section.home-newsitem-list article.newsitem a.image {
display: block; }
section.home-newsitem-list article.newsitem a.image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0.625rem 0px 0px; }
section.home-newsitem-list article.newsitem div.bottom {
padding: 1rem 0.875rem; }
section.home-newsitem-list article.newsitem div.inner {
height: 9.5rem;
overflow: hidden; }
section.home-newsitem-list article.newsitem div.date {
font-size: 0.875rem;
line-height: 1;
margin-bottom: 0.25rem;
color: var(--gray-color); }
section.home-newsitem-list article.newsitem h3 {
font-size: 1.375rem;
line-height: 1.2;
font-weight: 700; }
section.home-newsitem-list article.newsitem h3 a {
color: var(--gray-color);
transition: color 0.3s ease-in-out; }
section.home-newsitem-list article.newsitem h3:hover a {
color: var(--red-color); }
section.home-newsitem-list article.newsitem p {
font-size: 0.875rem;
color: var(--gray-color);
margin-top: 0.25rem; }
section.newsitem-list {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.newsitem-list {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.newsitem-list .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.newsitem-list .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.newsitem-list .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.newsitem-list .grid {
display: grid;
grid-template-columns: repeat(3, 25rem);
gap: 2rem 3.4375rem; }
@media (max-width: 767px) {
section.newsitem-list .grid {
display: block; } }
section.newsitem-list .grid article {
display: flex;
flex-direction: column;
border-radius: 1.875rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
section.newsitem-list .grid article {
border-radius: 0.625rem; }
section.newsitem-list .grid article:not(:first-of-type) {
margin-top: 2rem; } }
section.newsitem-list .grid article a.image {
display: block;
margin-bottom: 0.75rem;
position: relative; }
section.newsitem-list .grid article a.image span.premiere {
display: block;
position: absolute;
padding: 0 0.625rem;
height: 1.5625rem;
line-height: 1.5625rem;
font-size: 1.125rem;
left: 0;
top: 0;
color: white;
background-color: var(--red-color);
border-radius: 0.625rem 0px; }
section.newsitem-list .grid article div.viewport {
position: relative;
margin-bottom: 0.75rem; }
section.newsitem-list .grid article div.viewport a.image {
margin-bottom: 0 !important; }
section.newsitem-list .grid article img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 1.875rem 1.875rem 0px 0px; }
@media (max-width: 767px) {
section.newsitem-list .grid article img {
border-radius: 0.625rem 0.625rem 0px 0px; } }
section.newsitem-list .grid article h3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.75rem;
font-size: 1.875rem;
font-weight: 700; }
@media (max-width: 767px) {
section.newsitem-list .grid article h3 {
margin-bottom: 0.5rem;
font-size: 1.375rem; } }
section.newsitem-list .grid article h3 a {
color: inherit; }
section.newsitem-list .grid article:hover h3 {
color: var(--red-color); }
section.newsitem-list .grid article p {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 1.5rem;
color: var(--gray-color); }
section.newsitem-list .grid article .date {
padding-left: 0.75rem;
padding-right: 0.75rem;
color: var(--gray-color);
margin-bottom: 0.75rem; }
div.newsitem-header div.line {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 0.75rem;
row-gap: 0.75rem; }
div.newsitem-header div.line:not(:first-of-type) {
margin-top: 0.5rem; }
div.newsitem-header .breadcrumb {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal; }
@media (max-width: 767px) {
div.newsitem-header .breadcrumb {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.newsitem-header .breadcrumb.active {
color: var(--red-color); }
div.newsitem-header .breadcrumb a {
color: var(--red-color); }
div.newsitem-header .date {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal; }
@media (max-width: 767px) {
div.newsitem-header .date {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.newsitem-header .date.active {
color: var(--red-color); }
section.partner-block {
margin-top: 2rem;
margin-bottom: 2rem; }
section.partner-block .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr 25.3125rem;
column-gap: 4.375rem; }
@media (max-width: 767px) {
section.partner-block .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.partner-block .container {
display: flex;
flex-direction: column;
row-gap: 2rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.partner-block .partners {
display: flex;
flex-direction: column;
border-radius: 1.875rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1); }
section.partner-block .season {
flex-grow: 1;
position: relative; }
section.partner-block .season .bg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: var(--red-color);
opacity: 0.2;
border-radius: 1.875rem; }
section.partner-block .line {
padding: 1.5rem 2rem 1rem; }
@media (max-width: 767px) {
section.partner-block .line {
padding: 1rem 1.5rem; } }
section.partner-block h3 {
position: relative;
color: var(--gray-color);
font-size: 1.375rem;
line-height: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem; }
section.partner-block .logos {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 1rem;
column-gap: 2rem; }
@media (max-width: 767px) {
section.partner-block .logos {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
text-align: center; }
section.partner-block .logos img {
max-width: 100%;
vertical-align: top; } }
section.partner-groups {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.partner-groups {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.partner-groups .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.partner-groups .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.partner-groups .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.partner-groups h2 {
font-size: 2.5rem;
margin-bottom: 1rem; }
@media (max-width: 767px) {
section.partner-groups h2 {
font-size: 1.375rem; } }
section.partner-groups .logos {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 1rem;
column-gap: 2rem;
margin-bottom: 2rem; }
@media (max-width: 767px) {
section.partner-groups .logos {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
text-align: center; }
section.partner-groups .logos img {
max-width: 100%;
vertical-align: top; } }
div.top-people-block {
margin-top: 4.5rem;
margin-bottom: 3.5rem; }
@media (max-width: 767px) {
div.top-people-block {
display: none; } }
div.top-people-block .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.top-people-block .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
div.top-people-block .grid {
display: grid;
grid-template-columns: 25rem 31.25rem 25rem;
grid-auto-rows: 18.75rem;
column-gap: 3.125rem;
row-gap: 1.875rem; }
div.top-people-block article {
position: relative;
border-radius: 1.875rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.4); }
div.top-people-block article:nth-of-type(2n - 1) {
grid-row: span 2; }
div.top-people-block article a.image {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
div.top-people-block article a.image img, div.top-people-block article a.image video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 1.875rem;
vertical-align: top; }
div.top-people-block article div.info {
position: absolute;
left: 1.1875rem;
right: 1.1875rem;
bottom: 0.9375rem;
background-color: white;
border-radius: 1.875rem;
padding: 0.9375rem 1.75rem 1.125rem;
text-align: center;
min-height: 6.4375rem; }
div.top-people-block article div.info h3 {
font-size: 1.875rem;
font-weight: 700; }
div.top-people-block article div.info div.title {
font-size: 1.25rem;
margin-top: 0.25rem;
color: var(--gray-color); }
div.top-people-block article div.info a {
color: inherit;
transition: color 0.3s ease-in-out; }
div.top-people-block article div.info a:hover {
color: var(--red-color); }
div.top-people-block article:nth-of-type(2n) div.info {
left: 4rem;
right: 4rem; }
div.people-block {
margin-top: 3.5rem;
margin-bottom: 3.5rem; }
@media (max-width: 767px) {
div.people-block {
margin-top: 2rem;
margin-bottom: 2rem; } }
@media (min-width: 768px) {
div.people-block.mobi-only {
display: none; } }
div.people-block .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.people-block .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.people-block .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.people-block .grid {
display: grid;
grid-template-columns: repeat(4, 18.75rem);
grid-auto-rows: 25rem;
column-gap: 4.125rem;
row-gap: 3.4375rem; }
@media (max-width: 767px) {
div.people-block .grid {
display: block; } }
div.people-block article {
position: relative;
border-radius: 1.875rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.4); }
@media (max-width: 767px) {
div.people-block article {
border-radius: 0.625rem;
width: 100%;
aspect-ratio: 3 / 4; }
div.people-block article:not(:first-of-type) {
margin-top: 2rem; } }
div.people-block article a.image {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
div.people-block article a.image img, div.people-block article a.image video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 1.875rem; }
@media (max-width: 767px) {
div.people-block article a.image img, div.people-block article a.image video {
border-radius: 0.625rem; } }
div.people-block article div.info {
position: absolute;
left: 1.5rem;
right: 1.5rem;
bottom: 0.9375rem;
background-color: white;
border-radius: 1.25rem;
padding: 0.5rem 0.75rem;
text-align: center;
min-height: 4.375rem;
display: flex;
flex-direction: column;
justify-content: center; }
@media (max-width: 767px) {
div.people-block article div.info {
left: var(--mobi-padding);
right: var(--mobi-padding);
border-radius: 0.625rem; } }
div.people-block article div.info h3 {
font-size: 1.5625rem;
font-weight: 700; }
@media (max-width: 767px) {
div.people-block article div.info h3 {
font-size: 1.375rem; } }
div.people-block article div.info div.title {
font-size: 1.25rem;
margin-top: 0.25rem;
color: var(--gray-color); }
@media (max-width: 767px) {
div.people-block article div.info div.title {
font-size: 1rem; } }
div.people-block article div.info a {
color: inherit;
transition: color 0.3s ease-in-out; }
div.people-block article div.info a:hover {
color: var(--red-color); }
div.person-header {
display: flex;
flex-wrap: wrap;
row-gap: 0.5rem;
column-gap: 0.75rem;
align-items: center;
margin-top: 1.25rem; }
div.person-header h1 {
display: block;
line-height: 1.2;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--red-color);
font-family: var(--pt-sans-font);
font-size: 2.5rem;
font-weight: bold; }
@media (max-width: 767px) {
div.person-header h1 {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.person-header h1.active {
color: var(--red-color); }
@media (max-width: 767px) {
div.person-header h1 {
font-size: 1.375rem; } }
div.person-header .title {
display: block;
line-height: 1.2;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--red-color);
font-family: var(--pt-sans-font);
font-size: 2.5rem;
font-weight: normal; }
@media (max-width: 767px) {
div.person-header .title {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.person-header .title.active {
color: var(--red-color); }
section.person-info {
margin-top: 4.75rem;
margin-bottom: 3.5rem; }
@media (max-width: 767px) {
section.person-info {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.person-info .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 25rem 1fr;
column-gap: 2.5rem; }
@media (max-width: 767px) {
section.person-info .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.person-info .container {
display: flex;
flex-direction: column;
row-gap: 1rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.person-info .image img, section.person-info .image video {
width: 100%;
border-radius: 1.875rem; }
@media (max-width: 767px) {
section.person-info .image img, section.person-info .image video {
border-radius: 0.625rem; } }
section.person-info .text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.person-info .text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.person-info .text a {
color: var(--red-color); }
section.person-info .text p {
margin-bottom: 1em; }
section.person-info .text ol, section.person-info .text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.person-info .text img {
max-width: 100%; }
section.person-info .text iframe {
max-width: 100%; }
section.person-info .text h2 {
margin-bottom: 1rem; }
section.person-info .text *:last-child {
margin-bottom: 0; }
section.person-info .text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.person-info .text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.person-info .text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.person-info .text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.person-info .text table.bordered-table {
border-collapse: collapse; }
section.person-info .text table.bordered-table th, section.person-info .text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.person-info .text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.person-info .text p.video-holder iframe, section.person-info .text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.person-info .text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.person-info .text ul.dots {
padding-left: 0 !important; } }
section.person-info .text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.person-info .text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
section.person-roles {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 1.25rem 1.6875rem 12.5rem; }
@media (max-width: 767px) {
section.person-roles {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.person-roles {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
section.person-roles .play-roles {
display: grid;
grid-template-columns: 25rem 1fr;
column-gap: 0.5rem;
font-size: 1.125rem;
color: var(--gray-color); }
@media (max-width: 767px) {
section.person-roles .play-roles {
display: flex;
flex-direction: column;
row-gap: 0.5rem; } }
section.person-roles .play-roles:not(:last-of-type) {
padding-bottom: 1rem; }
@media (max-width: 767px) {
section.person-roles .play-roles:not(:last-of-type) {
border-bottom: 1px solid var(--light-gray-color);
margin-bottom: 1rem; } }
section.person-roles .play-roles .roles {
position: relative;
line-height: 2.25rem;
align-self: center; }
@media (max-width: 767px) {
section.person-roles .play-roles .roles {
align-self: self-start; } }
section.person-roles .play-roles .roles::before {
content: '';
position: absolute;
left: 0;
bottom: 0.375rem;
right: 0;
border: 1px dashed var(--gray-color); }
@media (max-width: 767px) {
section.person-roles .play-roles .roles::before {
content: none; } }
section.person-roles .play-roles .roles span {
position: relative;
background-color: white;
padding-right: 0.25rem;
font-weight: bold; }
section.person-roles .play-roles .play {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 0.75rem;
row-gap: 0.5rem;
min-height: 2.25rem;
align-self: self-end; }
@media (max-width: 767px) {
section.person-roles .play-roles .play {
align-self: self-start;
height: auto; } }
section.person-roles .play-roles .play a {
color: var(--red-color); }
section.person-roles .play-roles .play a:hover {
text-decoration: underline; }
section.person-roles .play-roles .play button.buy-button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: auto;
height: 2.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--gray-color);
background: var(--white-color);
color: var(--gray-color);
font-size: 1rem;
cursor: pointer; }
section.person-roles .play-roles .play button.buy-button.soldout {
background-color: white;
color: var(--red-color); }
section.person-roles .play-roles .play button.buy-button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.person-roles .play-roles .play button.buy-button:hover svg {
width: 1rem;
margin-left: 0.2rem; }
section.person-roles .play-roles .play button.buy-button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.person-roles .play-roles .play button.buy-button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.person-roles .play-roles .play button.buy-button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.person-roles .play-roles .play button.buy-button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
section.person-roles .play-roles .play button.buy-button:hover {
border-color: var(--red-color);
color: var(--red-color); }
section.person-photos .container {
width: var(--container-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.person-photos .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
section.person-photos .head {
padding-right: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1.25rem;
text-align: right; }
@media (max-width: 767px) {
section.person-photos .head {
padding-right: var(--mobi-padding); } }
section.person-photos .head a {
color: var(--gray-color); }
section.person-photos .photo-grid {
display: grid;
grid-template-columns: 25rem 18.75rem 7.375rem 30.375rem;
grid-template-rows: 24.6875rem 17.6875rem;
gap: 2rem 2rem; }
@media (max-width: 767px) {
section.person-photos .photo-grid {
display: none; } }
section.person-photos .photo-grid .photo {
cursor: pointer; }
section.person-photos .photo-grid .photo video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 1.875rem; }
section.person-photos .photo-grid .photo:nth-child(1) {
grid-row: span 2; }
section.person-photos .photo-grid .photo:nth-child(3) {
grid-column: span 2; }
section.person-photos .photo-grid .photo:nth-child(4) {
grid-column: span 2; }
section.person-photos .photo-grid img {
border-radius: 1.875rem; }
section.person-photos .person-gallery {
display: none; }
section.person-awards {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 1.25rem 1.6875rem 2.75rem; }
@media (max-width: 767px) {
section.person-awards {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.person-awards {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
section.person-awards ul.award-list {
list-style: none;
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
section.person-awards li:not(:first-of-type) {
margin-top: 0.5rem; }
section.person-awards a {
color: var(--red-color); }
@media (min-width: 768px) {
div.photo-grid-mobi {
display: none; } }
div.photo-grid-mobi video {
width: 100%;
aspect-ratio: 9 /16;
border-radius: 10px; }
div.photo-grid-mobi .photo, div.photo-grid-mobi .video {
margin-top: 1rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); }
div.photo-grid-mobi img {
max-width: 100%;
border-radius: 0.625rem; }
div.person-diploms {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem 1rem;
margin-top: 2rem; }
div.person-diploms img {
border-radius: 0.625rem;
cursor: pointer; }
section.person-perfs {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 1.25rem 1.6875rem 2.75rem; }
@media (max-width: 767px) {
section.person-perfs {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.person-perfs {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
section.person-perfs div.text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.person-perfs div.text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.person-perfs div.text a {
color: var(--red-color); }
section.person-perfs div.text p {
margin-bottom: 1em; }
section.person-perfs div.text ol, section.person-perfs div.text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.person-perfs div.text img {
max-width: 100%; }
section.person-perfs div.text iframe {
max-width: 100%; }
section.person-perfs div.text h2 {
margin-bottom: 1rem; }
section.person-perfs div.text *:last-child {
margin-bottom: 0; }
section.person-perfs div.text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.person-perfs div.text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.person-perfs div.text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.person-perfs div.text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.person-perfs div.text table.bordered-table {
border-collapse: collapse; }
section.person-perfs div.text table.bordered-table th, section.person-perfs div.text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.person-perfs div.text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.person-perfs div.text p.video-holder iframe, section.person-perfs div.text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.person-perfs div.text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.person-perfs div.text ul.dots {
padding-left: 0 !important; } }
section.person-perfs div.text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.person-perfs div.text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
div.person-dismissed {
display: flex;
flex-wrap: wrap;
row-gap: 0.5rem;
column-gap: 0.75rem;
align-items: center;
margin-top: 1.25rem; }
div.person-dismissed .years {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal; }
@media (max-width: 767px) {
div.person-dismissed .years {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.person-dismissed .years.active {
color: var(--red-color); }
div.strawlark-header div.line {
display: flex;
margin-bottom: 0.5rem; }
div.strawlark-header div.line h1 {
display: block;
line-height: 1.2;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--black-color);
font-family: var(--pt-sans-font);
font-size: 2.5rem;
font-weight: bold; }
@media (max-width: 767px) {
div.strawlark-header div.line h1 {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.strawlark-header div.line h1.active {
color: var(--red-color); }
section.festival-list {
margin-top: 1.25rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.festival-list {
margin-top: 2rem;
margin-bottom: 2rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.festival-list article:not(:first-of-type) {
margin-top: 2.25rem; }
section.festival-list article .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 25rem 1fr;
height: 15.625rem;
column-gap: 5rem;
border-radius: 0.625rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.15); }
@media (max-width: 767px) {
section.festival-list article .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.festival-list article .container {
display: flex;
flex-direction: column;
height: auto;
width: calc(100vw - 2 * var(--mobi-padding)); } }
section.festival-list article a.image {
display: block;
height: 15.625rem; }
@media (max-width: 767px) {
section.festival-list article a.image {
height: auto;
aspect-ratio: 4 / 3; } }
section.festival-list article img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0px 0px 0.625rem; }
@media (max-width: 767px) {
section.festival-list article img {
border-radius: 0.625rem 0.625rem 0px 0px; } }
section.festival-list article div.info {
border: solid var(--lighter-gray-color);
border-width: 1px 1px 1px 0;
padding: 2rem 1.5rem 1.5rem 0; }
@media (max-width: 767px) {
section.festival-list article div.info {
padding: 1rem var(--mobi-padding) 2rem; } }
section.festival-list article div.head {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 1rem; }
section.festival-list article h2 {
font-size: 2.5rem;
margin-right: auto; }
@media (max-width: 767px) {
section.festival-list article h2 {
font-size: 1.375rem; } }
section.festival-list article h2:hover {
color: var(--red-color);
font-weight: bold; }
section.festival-list article h2 a {
color: inherit; }
section.festival-list article div.text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.festival-list article div.text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.festival-list article div.text a {
color: var(--red-color); }
section.festival-list article div.text p {
margin-bottom: 1em; }
section.festival-list article div.text ol, section.festival-list article div.text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.festival-list article div.text img {
max-width: 100%; }
section.festival-list article div.text iframe {
max-width: 100%; }
section.festival-list article div.text h2 {
margin-bottom: 1rem; }
section.festival-list article div.text *:last-child {
margin-bottom: 0; }
section.festival-list article div.text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.festival-list article div.text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.festival-list article div.text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.festival-list article div.text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.festival-list article div.text table.bordered-table {
border-collapse: collapse; }
section.festival-list article div.text table.bordered-table th, section.festival-list article div.text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.festival-list article div.text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.festival-list article div.text p.video-holder iframe, section.festival-list article div.text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.festival-list article div.text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.festival-list article div.text ul.dots {
padding-left: 0 !important; } }
section.festival-list article div.text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.festival-list article div.text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
section.publication-list {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.publication-list {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.publication-list article {
width: var(--tab-panel-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 9.6875rem 1.6875rem 11.875rem; }
@media (max-width: 767px) {
section.publication-list article {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.publication-list article {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding));
margin-left: var(--mobi-padding);
margin-right: var(--mobi-padding); } }
section.publication-list article:not(:first-of-type) {
margin-top: 3.25rem; }
section.publication-list article h3 {
font-family: var(--open-sans-font);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem; }
@media (max-width: 767px) {
section.publication-list article h3 {
font-size: 1.25rem; } }
section.publication-list article h3 a {
color: var(--red-color); }
section.publication-list article h3 a:hover {
text-decoration: underline; }
section.publication-list article .date {
font-size: 1.125rem;
color: var(--gray-color); }
@media (max-width: 767px) {
section.publication-list article .date {
font-size: 1rem; } }
section.publication-list article .publisher {
font-size: 1.125rem;
font-style: italic;
color: var(--gray-color);
margin-top: 0.25rem; }
@media (max-width: 767px) {
section.publication-list article .publisher {
font-size: 1rem; } }
div.publication-header div.line {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
align-items: center; }
div.publication-header div.line:not(:first-of-type) {
margin-top: 0.5rem; }
div.publication-header .breadcrumb {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal; }
@media (max-width: 767px) {
div.publication-header .breadcrumb {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.publication-header .breadcrumb.active {
color: var(--red-color); }
div.publication-header .breadcrumb a {
color: var(--red-color); }
div.publication-header .date, div.publication-header .author, div.publication-header .publisher {
display: block;
line-height: 1.2;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
min-width: 5.75rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.625rem;
background: white;
text-align: center;
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: normal; }
@media (max-width: 767px) {
div.publication-header .date, div.publication-header .author, div.publication-header .publisher {
font-size: 1rem;
padding-top: calc(0.5 * (2rem - 1.2 * 1rem));
padding-bottom: calc(0.5 * (2rem - 1.2 * 1rem));
padding-left: 0.75rem;
padding-right: 0.75rem; } }
div.publication-header .date.active, div.publication-header .author.active, div.publication-header .publisher.active {
color: var(--red-color); }
div.publication-permalink {
margin-top: 2rem;
margin-bottom: 2rem; }
div.publication-permalink .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.publication-permalink .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.publication-permalink .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.publication-permalink .line:not(:first-of-type) {
margin-top: 0.5rem; }
div.publication-permalink a {
color: var(--red-color); }
section.group-card {
margin-top: 2rem;
margin-bottom: 2rem; }
@media (max-width: 767px) {
section.group-card {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.group-card:first-of-type {
margin-top: 4rem; }
@media (max-width: 767px) {
section.group-card:first-of-type {
margin-top: 2rem; } }
section.group-card div.container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 2.75rem 1.6875rem 1.25rem; }
@media (max-width: 767px) {
section.group-card div.container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.group-card div.container {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding)); } }
section.group-card h2 {
font-size: 1.5rem; }
@media (max-width: 767px) {
section.group-card h2 {
font-size: 1.375rem; } }
section.group-card h2:hover {
color: var(--red-color);
font-weight: bold; }
section.group-card h2 a {
color: inherit; }
section.group-card ul {
list-style: none;
font-size: 1.25rem;
margin-top: 1rem;
display: none; }
@media (max-width: 767px) {
section.group-card ul {
font-size: 1rem; } }
section.group-card.expanded ul {
display: block; }
section.group-card li {
display: flex;
align-items: center;
row-gap: 1rem; }
section.group-card li:not(:first-of-type) {
margin-top: 0.5rem; }
section.group-card li i {
display: block;
flex: 0 0 2.5rem;
height: 2.5rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain; }
section.group-card li a {
color: var(--red-color); }
div.festival-awardees {
margin-top: 2rem;
margin-bottom: 2rem; }
div.festival-awardees .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.festival-awardees .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.festival-awardees .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.festival-awardees h3 {
font-size: 2.5rem;
margin-bottom: 0.5rem; }
@media (max-width: 767px) {
div.festival-awardees h3 {
font-size: 1.375rem; } }
div.festival-awardees ul {
list-style: none;
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
div.festival-awardees ul {
font-size: 1rem; } }
div.festival-awardees a {
color: var(--red-color); }
section.history {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.history {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.history .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.history .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.history .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.history .text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color);
margin-bottom: 1rem; }
@media (max-width: 767px) {
section.history .text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.history .text a {
color: var(--red-color); }
section.history .text p {
margin-bottom: 1em; }
section.history .text ol, section.history .text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.history .text img {
max-width: 100%; }
section.history .text iframe {
max-width: 100%; }
section.history .text h2 {
margin-bottom: 1rem; }
section.history .text *:last-child {
margin-bottom: 0; }
section.history .text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.history .text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.history .text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.history .text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.history .text table.bordered-table {
border-collapse: collapse; }
section.history .text table.bordered-table th, section.history .text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.history .text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.history .text p.video-holder iframe, section.history .text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.history .text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.history .text ul.dots {
padding-left: 0 !important; } }
section.history .text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.history .text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
section.history .text::after {
display: block;
content: '';
clear: both; }
section.history figure.left {
float: left;
margin: 0.25rem 1.25rem 0.25rem 0px; }
@media (max-width: 767px) {
section.history figure.left {
float: none;
margin-right: 0;
text-align: center; } }
section.history figure.right {
float: right;
margin: 0.25rem 0px 0.25rem 1.25rem; }
@media (max-width: 767px) {
section.history figure.right {
float: none;
margin-left: 0;
text-align: center; } }
section.history figure.center {
text-align: center; }
section.history figure figcaption {
font-size: 0.875rem; }
section.history .photos {
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
column-gap: 1rem;
row-gap: 1rem; }
section.history .photos a, section.history .photos img {
display: block; }
@media (max-width: 767px) {
section.history .photos {
flex-direction: column; }
section.history .photos img {
width: 100%; } }
section.congrats-dialog {
margin-top: 2rem;
margin-bottom: 4rem; }
@media (max-width: 767px) {
section.congrats-dialog {
margin-bottom: 2rem; } }
section.congrats-dialog .container {
width: var(--dialog-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.congrats-dialog .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.congrats-dialog .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.merch-list {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.merch-list {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.merch-list .container {
width: var(--playbill-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(3, 25rem);
column-gap: 3.4375rem;
row-gap: 3.125rem; }
@media (max-width: 767px) {
section.merch-list .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.merch-list .container {
display: block;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.merch-list article.merch {
display: flex;
flex-direction: column;
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1); }
@media (max-width: 767px) {
section.merch-list article.merch:not(:first-of-type) {
margin-top: 2rem; } }
section.merch-list article.merch div.image {
position: relative; }
section.merch-list article.merch div.image a {
display: block; }
section.merch-list article.merch div.image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0.625rem 0px 0px; }
section.merch-list article.merch h3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.5rem;
font-size: 1.875rem;
font-weight: 700; }
@media (max-width: 767px) {
section.merch-list article.merch h3 {
font-size: 1.375rem; } }
section.merch-list article.merch h3:hover {
color: var(--red-color); }
section.merch-list article.merch h3:not(.with-genre) {
margin-bottom: 0.5rem; }
section.merch-list article.merch h3 a {
color: inherit; }
section.merch-list article.merch .details {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center; }
section.merch-list article.merch .details .onstock {
font-size: 0.875rem;
color: var(--gray-color); }
section.merch-list article.merch .details .price {
font-size: 1.25rem; }
section.merch-list article.merch .button {
margin-top: 1rem;
padding: 0 0.75rem 1.5rem; }
section.merch-list article.merch .button button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.merch-list article.merch .button button.soldout {
background-color: white;
color: var(--red-color); }
section.merch-list article.merch .button button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.merch-list article.merch .button button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.merch-list article.merch .button button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.merch-list article.merch .button button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.merch-list article.merch .button button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.merch-list article.merch .button button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
div.merch-bag-placeholder {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
div.merch-bag-placeholder {
margin-top: 2rem;
margin-bottom: 2rem; } }
div.merch-bag-placeholder .container {
width: var(--playbill-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.merch-bag-placeholder .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.merch-bag-placeholder .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.merch-bag-placeholder article {
display: grid;
grid-template-columns: 25rem 1fr;
height: 15.625rem;
column-gap: 5rem;
border-radius: 0.625rem;
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.15); }
@media (max-width: 767px) {
div.merch-bag-placeholder article {
display: flex;
flex-direction: column;
height: auto; } }
div.merch-bag-placeholder article:not(:first-of-type) {
margin-top: 2rem; }
div.merch-bag-placeholder article a.image {
display: block;
height: 15.625rem; }
@media (max-width: 767px) {
div.merch-bag-placeholder article a.image {
height: auto;
aspect-ratio: 4 / 3; } }
div.merch-bag-placeholder article img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 0.625rem 0px 0px 0.625rem; }
@media (max-width: 767px) {
div.merch-bag-placeholder article img {
border-radius: 0.625rem 0.625rem 0px 0px; } }
div.merch-bag-placeholder article div.info {
padding: 2rem 1.5rem 1.5rem 0; }
@media (max-width: 767px) {
div.merch-bag-placeholder article div.info {
padding: 1rem var(--mobi-padding) 2rem; } }
div.merch-bag-placeholder article div.head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem; }
div.merch-bag-placeholder article h2 {
font-size: 2.5rem; }
@media (max-width: 767px) {
div.merch-bag-placeholder article h2 {
font-size: 1.375rem; } }
div.merch-bag-placeholder article h2:hover {
color: var(--red-color);
font-weight: bold; }
div.merch-bag-placeholder article h2 a {
color: inherit; }
div.merch-bag-placeholder article a.close {
transform: rotate(45deg);
color: var(--black-color); }
div.merch-bag-placeholder article div.price-line {
display: flex;
justify-content: flex-end;
align-items: center; }
div.merch-bag-placeholder article div.total-block {
margin-left: 2rem; }
div.merch-bag-placeholder article span.total-value {
font-size: 1.875rem;
font-weight: bold;
color: var(--red-color); }
div.merch-bag-placeholder article div.qty-block {
display: flex;
justify-content: center;
align-items: center; }
div.merch-bag-placeholder article button {
display: flex;
justify-content: center;
align-items: center;
width: 1.875rem;
height: 1.875rem;
font-size: 1.875rem;
font-family: var(--pt-sans-font);
line-height: 1.25rem;
background: white;
border: 1px solid #D9D9D9;
border-radius: 0.3125rem;
cursor: pointer; }
div.merch-bag-placeholder article button.minus span {
line-height: 0.625rem;
padding-bottom: 0.25rem; }
div.merch-bag-placeholder article span.qty {
display: block;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 1.125rem; }
div.merch-bag-placeholder div.total {
margin-top: 2rem; }
div.merch-bag-placeholder div.total div.total-wrap {
display: flex;
justify-content: flex-end;
align-items: baseline; }
div.merch-bag-placeholder div.total div.total-caption {
font-size: 1.5rem; }
div.merch-bag-placeholder div.total div.total-holder {
margin-left: 1rem; }
div.merch-bag-placeholder div.total span.total-value {
font-size: 1.875rem;
font-weight: bold;
color: var(--red-color); }
section.merch-dialog {
margin-top: 2rem;
margin-bottom: 4rem; }
@media (max-width: 767px) {
section.merch-dialog {
margin-bottom: 2rem; } }
section.merch-dialog .container {
width: var(--dialog-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.merch-dialog .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.merch-dialog .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.merch-block {
margin-top: 3rem;
margin-bottom: 3rem; }
@media (max-width: 767px) {
section.merch-block {
margin-top: 2rem;
margin-bottom: 2rem; } }
section.merch-block .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 31.25rem 1fr;
column-gap: 3.125rem; }
@media (max-width: 767px) {
section.merch-block .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.merch-block .container {
display: flex;
flex-direction: column;
row-gap: 1rem;
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
@media (max-width: 767px) {
section.merch-block .image img {
max-width: 100%;
aspect-ratio: 4 / 3;
border-radius: 0.625rem; } }
section.merch-block .text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.merch-block .text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.merch-block .text a {
color: var(--red-color); }
section.merch-block .text p {
margin-bottom: 1em; }
section.merch-block .text ol, section.merch-block .text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.merch-block .text img {
max-width: 100%; }
section.merch-block .text iframe {
max-width: 100%; }
section.merch-block .text h2 {
margin-bottom: 1rem; }
section.merch-block .text *:last-child {
margin-bottom: 0; }
section.merch-block .text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.merch-block .text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.merch-block .text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.merch-block .text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.merch-block .text table.bordered-table {
border-collapse: collapse; }
section.merch-block .text table.bordered-table th, section.merch-block .text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.merch-block .text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.merch-block .text p.video-holder iframe, section.merch-block .text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.merch-block .text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.merch-block .text ul.dots {
padding-left: 0 !important; } }
section.merch-block .text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.merch-block .text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
section.merch-block .button {
margin-top: 2rem; }
section.merch-block .button button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 25rem;
height: 3.75rem;
padding-left: 0;
padding-right: 0;
flex-shrink: 0;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background: var(--red-color);
color: var(--white-color);
font-size: 1.5625rem;
cursor: pointer; }
section.merch-block .button button.soldout {
background-color: white;
color: var(--red-color); }
section.merch-block .button button svg {
width: 0;
margin-left: 0;
transition: all 0.5s ease-in-out; }
section.merch-block .button button:hover svg {
width: 1.3125rem;
margin-left: 0.2625rem; }
section.merch-block .button button .pushkin-card {
display: block;
position: absolute;
left: 50%;
height: 0.9375rem;
line-height: 0.9375rem;
padding: 0 0.625rem;
background-color: var(--marker-bg-color);
font-size: 0.625rem;
color: var(--gray-color);
transform: translateX(-50%);
white-space: nowrap;
min-width: 7.125rem;
/*&:hover {
color: var(--red-color);
}*/ }
section.merch-block .button button .pushkin-card:not(.alt) {
top: -1rem;
border-radius: 0.3125rem 0.3125rem 0px 0px; }
section.merch-block .button button .pushkin-card.alt {
bottom: -1rem;
border-radius: 0px 0px 0.3125rem 0.3125rem; }
section.merch-block .button button span.few-tickets {
display: block;
position: absolute;
left: -0.1875rem;
bottom: 1.375rem;
width: 5.625rem;
height: 0.9375rem;
line-height: 0.9375rem;
transform: rotate(-50deg);
background-color: white;
text-align: center;
font-size: 0.625rem;
color: var(--red-color);
/*@include phone {
transform: none;
left: 0.5625rem;
top: 0.0625rem;
bottom: auto;
}*/ }
@media (max-width: 767px) {
section.merch-block .button button {
width: 100%; } }
div.merch-popup {
background: #FFFFFF;
box-shadow: 0px 0.625rem 1.875rem rgba(2, 61, 72, 0.2);
border-radius: 2.5rem;
padding: 1.75rem 2.5rem 2.5rem;
width: 34.25rem; }
@media (max-width: 767px) {
div.merch-popup {
padding: 1.75rem var(--mobi-padding) 2.5rem;
border-radius: 1.25rem; } }
div.merch-popup .head {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 1.75rem; }
div.merch-popup .head a {
transform: rotate(45deg);
color: var(--black-color); }
div.merch-popup .head h4 {
font-weight: 400;
font-size: 1.75rem;
line-height: 1;
color: var(--black-color);
margin-right: auto; }
@media (max-width: 767px) {
div.merch-popup .head h4 {
font-size: 1.375rem; } }
@media (max-width: 767px) and (max-width: 767px) {
div.merch-popup {
width: calc(100vw - 2 * var(--mobi-padding)); } }
div.merch-popup p {
font-size: 1.125rem;
line-height: 1.4; }
div.merch-popup div.buttons {
margin-top: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
column-gap: 0.75rem; }
@media (max-width: 767px) {
div.merch-popup div.buttons {
flex-direction: column;
row-gap: 0.5rem; } }
div.merch-popup div.buttons a {
display: block;
width: 14.25rem;
height: 3.125rem;
line-height: 3rem;
text-align: center;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background-color: var(--red-color);
color: var(--white-color);
font-size: 1.125rem; }
@media (max-width: 767px) {
div.merch-popup div.buttons a {
width: 100%; } }
div.merch-popup div.buttons a.close {
border-color: var(--grey-color);
color: var(--grey-color);
background-color: white; }
header.mobi-head {
display: flex;
justify-content: flex-end;
align-items: center;
height: 3.125rem;
padding-left: 0.5rem;
background-color: var(--mobi-bg-color); }
@media (min-width: 768px) {
header.mobi-head {
display: none; } }
header.mobi-head a.logo {
display: flex;
justify-content: center;
align-items: center;
width: 3.125rem;
height: 3.125rem;
margin-right: auto; }
header.mobi-head a.logo svg {
width: 2rem;
height: 2rem;
object-fit: contain;
object-position: center; }
header.mobi-head a.playbill {
margin-left: auto;
margin-right: auto;
color: var(--gray-color);
font-weight: bold;
text-transform: uppercase;
font-size: 1.25rem; }
header.mobi-head a.icon {
display: flex;
justify-content: center;
align-items: center;
width: 3.125rem;
height: 3.125rem;
color: var(--gray-color); }
header.mobi-head a.icon svg {
width: 1.875rem;
height: 1.875rem; }
header.mobi-head a.icon.search svg {
width: 1.625rem;
height: 1.625rem; }
header.mobi-head a.merch-bag-link {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 3.125rem;
height: 3.125rem;
color: var(--red-color); }
header.mobi-head a.merch-bag-link:not(.show) {
display: none; }
header.mobi-head a.merch-bag-link svg {
width: 1.625rem;
height: 1.625rem; }
header.mobi-head a.merch-bag-link span {
display: block;
position: absolute;
right: 0.1875rem;
top: 0.375rem;
width: 1.25rem;
height: 1.25rem;
line-height: 1.25rem;
text-align: center;
background-color: var(--yellow-color);
color: white;
font-size: 0.75rem;
border-radius: 50%; }
header.mobi-head div.h5 {
color: var(--gray-color);
font-family: var(--pt-sans-font);
font-size: 1.875rem;
font-weight: 700;
margin-right: auto;
padding-left: 0.5rem; }
header.mobi-head div.h5.upper {
text-transform: uppercase; }
body:not(.mobi-menu-on) header.mobi-head a.close-menu {
display: none; }
body.mobi-menu-on header.mobi-head a.hamburger,
body.mobi-search-on header.mobi-head a.hamburger {
display: none; }
body.mobi-about-menu-on header.mobi-head a.logo,
body.mobi-about-menu-on header.mobi-head a.search,
body.mobi-about-menu-on header.mobi-head a.close-menu,
body.mobi-spectators-menu-on header.mobi-head a.logo,
body.mobi-spectators-menu-on header.mobi-head a.search,
body.mobi-spectators-menu-on header.mobi-head a.close-menu,
body.mobi-search-on header.mobi-head a.logo,
body.mobi-search-on header.mobi-head a.search,
body.mobi-search-on header.mobi-head a.close-menu,
body.mobi-search-on header.mobi-head a.playbill {
display: none; }
body:not(.mobi-about-menu-on) header.mobi-head a.close-about-menu,
body:not(.mobi-about-menu-on) header.mobi-head div.about-menu-caption {
display: none; }
body:not(.mobi-spectators-menu-on) header.mobi-head a.close-spectators-menu,
body:not(.mobi-spectators-menu-on) header.mobi-head div.spectators-menu-caption {
display: none; }
body:not(.mobi-search-on) header.mobi-head a.close-search,
body:not(.mobi-search-on) header.mobi-head div.search-caption,
body:not(.mobi-poll-menu-on) header.mobi-head div.poll-caption,
body:not(.mobi-poll-menu-on) header.mobi-head a.close-poll-menu {
display: none; }
body.mobi-poll-menu-on a.close-spectators-menu,
body.mobi-poll-menu-on div.spectators-menu-caption,
body.mobi-poll-menu-on div.mobi-spectators-menu {
display: none !important; }
div.mobi-overlay {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 3.125rem;
background-color: rgba(255, 255, 255, 0.5);
z-index: 9999;
border-top: 1px solid var(--light-gray-color); }
body.mobi-menu-on div.mobi-overlay,
body.mobi-search-on div.mobi-overlay {
display: block; }
div.mobi-main-menu {
padding-top: 2px;
background-color: var(--mobi-bg-color); }
div.mobi-main-menu a.menu-item {
display: flex;
align-items: center;
height: 3.125rem;
margin-top: 0.25rem;
padding-left: var(--mobi-padding);
color: var(--gray-color); }
div.mobi-main-menu a.menu-item.active {
color: var(--red-color); }
div.mobi-main-menu a.menu-item span {
font-family: var(--pt-sans-font);
font-size: 1.875rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase; }
div.mobi-main-menu a.menu-item svg {
width: 3.125rem;
height: 3.125rem;
margin-left: auto; }
div.mobi-main-menu a.strawlark {
display: block;
margin-top: 0.75rem;
padding-left: var(--mobi-padding);
background: url("../images/straw-lark.071a7b2092ac.png") no-repeat right center/auto 4.5rem; }
div.mobi-main-menu a.strawlark span {
font-size: 1.875rem;
font-weight: 700;
line-height: 2.375rem;
color: var(--golden-color);
text-transform: uppercase; }
div.mobi-main-menu div.main-menu-footer {
padding: var(--mobi-padding) var(--mobi-padding) 1.25rem;
border-top: 1px solid var(--light-gray-color);
margin-top: 1.25rem;
color: var(--gray-color); }
div.mobi-main-menu div.main-menu-footer h6 {
font-size: 1rem;
font-weight: bold; }
div.mobi-main-menu div.main-menu-footer p {
font-size: 0.875rem;
line-height: 1.375rem; }
div.mobi-main-menu div.main-menu-footer p a {
font-size: 1.125rem;
color: inherit; }
div.mobi-main-menu div.main-menu-footer div.btn {
display: flex;
justify-content: center;
margin-top: 1rem; }
div.mobi-main-menu div.main-menu-footer div.btn a {
display: block;
width: 13.3125rem;
height: 3.75rem;
line-height: 3.625rem;
border: 1px solid var(--red-color);
font-size: 1.25rem;
color: var(--red-color);
text-align: center; }
body.mobi-about-menu-on div.mobi-main-menu,
body.mobi-spectators-menu-on div.mobi-main-menu,
body.mobi-search-on div.mobi-main-menu {
display: none; }
div.mobi-about-menu {
padding-top: 0.125rem;
padding-bottom: 1.25rem;
background-color: var(--mobi-bg-color); }
div.mobi-about-menu a.menu-item {
display: flex;
align-items: center;
height: 3.125rem;
margin-top: 0.25rem;
padding-left: var(--mobi-padding);
color: var(--gray-color); }
div.mobi-about-menu a.menu-item.active {
color: var(--red-color); }
div.mobi-about-menu a.menu-item span {
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: 700;
line-height: 1; }
body:not(.mobi-about-menu-on) div.mobi-about-menu {
display: none; }
div.mobi-spectators-menu {
padding-top: 2px;
padding-bottom: 1.25rem;
background-color: var(--mobi-bg-color); }
div.mobi-spectators-menu a.menu-item {
display: flex;
align-items: center;
height: 3.125rem;
margin-top: 0.25rem;
padding-left: var(--mobi-padding);
color: var(--gray-color); }
div.mobi-spectators-menu a.menu-item.active {
color: var(--red-color); }
div.mobi-spectators-menu a.menu-item span {
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: 700;
line-height: 1; }
body:not(.mobi-spectators-menu-on) div.mobi-spectators-menu {
display: none; }
div.mobi-search-menu {
padding: 1.25rem var(--mobi-padding) 2rem;
background-color: var(--mobi-bg-color); }
div.mobi-search-menu form {
display: flex;
flex-direction: column; }
div.mobi-search-menu input {
height: 3.75rem;
border: 1px solid var(--light-gray-color);
line-height: 3.625rem;
padding: 0 0.625rem;
font-family: var(--open-sans-font);
font-size: 1.25rem;
color: var(--gray-color);
background-color: var(--mobi-bg-color); }
div.mobi-search-menu button {
margin-top: 2rem;
height: 3.75rem;
border: 1px solid var(--red-color);
background-color: var(--red-color);
color: white;
font-family: var(--open-sans-font);
font-size: 1.25rem; }
body:not(.mobi-search-on) div.mobi-search-menu {
display: none; }
div.mobi-poll-menu {
padding-top: 2px;
padding-bottom: 1.25rem;
background-color: var(--mobi-bg-color); }
div.mobi-poll-menu a.menu-item {
display: flex;
align-items: center;
height: 3.125rem;
margin-top: 0.25rem;
padding-left: var(--mobi-padding);
color: var(--gray-color); }
div.mobi-poll-menu a.menu-item.active {
color: var(--red-color); }
div.mobi-poll-menu a.menu-item span {
font-family: var(--pt-sans-font);
font-size: 1.25rem;
font-weight: 700;
line-height: 1; }
body:not(.mobi-poll-menu-on) div.mobi-poll-menu {
display: none; }
div.feedback-ask {
margin-top: 2rem;
margin-bottom: 2rem; }
div.feedback-ask div.container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.feedback-ask div.container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.feedback-ask div.container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.feedback-ask a {
display: block;
margin-left: auto;
margin-right: auto;
width: 13.3125rem;
height: 3.75rem;
line-height: 3.625rem;
border: 1px solid var(--red-color);
font-size: 1.25rem;
color: var(--red-color);
text-align: center;
border-radius: 0.625rem; }
section.feedback-list {
margin-top: 2rem;
margin-bottom: 2rem; }
section.feedback-list div.container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
section.feedback-list div.container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
section.feedback-list div.container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
section.feedback-list article {
border-radius: 0.625rem;
border: 1px solid var(--lighter-gray-color);
box-shadow: 0px 0px 1.25rem 0px rgba(0, 0, 0, 0.1);
padding: 1.6875rem 2.75rem 1.6875rem 1.25rem; }
@media (max-width: 767px) {
section.feedback-list article {
padding: 1.25rem var(--mobi-padding) 1.5rem;
width: calc(100vw - 2 * var(--mobi-padding)); } }
section.feedback-list article:not(:first-of-type) {
margin-top: 2rem; }
section.feedback-list article h3 {
font-size: 1.125rem;
margin-bottom: 0.5rem;
color: var(--red-color); }
section.feedback-list article div.text {
font-size: 1.125rem;
line-height: 1.4;
color: var(--gray-color); }
@media (max-width: 767px) {
section.feedback-list article div.text {
font-size: 1rem;
color: var(--gray-color) !important; } }
section.feedback-list article div.text a {
color: var(--red-color); }
section.feedback-list article div.text p {
margin-bottom: 1em; }
section.feedback-list article div.text ol, section.feedback-list article div.text ul {
padding-left: 1.2em;
margin-bottom: 1em; }
section.feedback-list article div.text img {
max-width: 100%; }
section.feedback-list article div.text iframe {
max-width: 100%; }
section.feedback-list article div.text h2 {
margin-bottom: 1rem; }
section.feedback-list article div.text *:last-child {
margin-bottom: 0; }
section.feedback-list article div.text img.image-left {
float: left;
margin: 0 0.75rem 0.375rem 0; }
@media (max-width: 767px) {
section.feedback-list article div.text img.image-left {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.feedback-list article div.text img.image-right {
float: right;
margin: 0 0 0.375rem 0.75rem; }
@media (max-width: 767px) {
section.feedback-list article div.text img.image-right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; } }
section.feedback-list article div.text table.bordered-table {
border-collapse: collapse; }
section.feedback-list article div.text table.bordered-table th, section.feedback-list article div.text table.bordered-table td {
border: 1px solid #999; }
@media (max-width: 767px) {
section.feedback-list article div.text p.video-holder {
aspect-ratio: 16 / 9;
width: 100%; }
section.feedback-list article div.text p.video-holder iframe, section.feedback-list article div.text p.video-holder video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center; } }
section.feedback-list article div.text ul.dots {
list-style: none;
padding-left: 0; }
@media (max-width: 767px) {
section.feedback-list article div.text ul.dots {
padding-left: 0 !important; } }
section.feedback-list article div.text ul.dots li {
position: relative;
padding-left: 1.2rem; }
section.feedback-list article div.text ul.dots li::before {
content: '•';
display: block;
position: absolute;
left: 0.125rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
line-height: 1rem;
font-family: var(--open-sans-font);
color: var(--red-color);
font-size: 2rem; }
div.attachment-list {
margin-top: 2rem;
margin-bottom: 2rem; }
div.attachment-list .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.attachment-list .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.attachment-list .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.attachment-list ul {
padding-left: 1.2em;
font-size: 1.125rem;
color: var(--gray-color); }
div.attachment-list ul a {
color: var(--red-color); }
div.strawlark-attachments {
margin-top: 3rem;
margin-bottom: 2rem; }
div.strawlark-attachments .container {
width: var(--subcontainer-width);
margin-left: auto;
margin-right: auto; }
@media (max-width: 767px) {
div.strawlark-attachments .container {
width: 100vw;
margin-left: 0;
margin-right: 0; } }
@media (max-width: 767px) {
div.strawlark-attachments .container {
padding-left: var(--mobi-padding);
padding-right: var(--mobi-padding); } }
div.strawlark-attachments div.head {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
column-gap: 0.75rem;
row-gap: 0.5rem; }
div.strawlark-attachments div.head a {
display: block;
height: 3.125rem;
line-height: calc(3.125rem - 2px);
text-align: center;
padding: 0 1.25rem;
border-radius: 0.625rem;
border: 1px solid var(--red-color);
background-color: var(--red-color);
color: var(--white-color);
font-size: 1.125rem; }
div.strawlark-attachments div.head a:hover, div.strawlark-attachments div.head a.active {
color: var(--red-color);
background-color: var(--white-color); }
div.strawlark-attachments ul {
display: none;
padding-left: 1.2em;
font-size: 1.125rem;
color: var(--gray-color);
margin-top: 1rem; }
div.strawlark-attachments ul.shown {
display: block; }
div.strawlark-attachments ul li:not(:first-of-type) {
margin-top: 0.25rem; }
div.strawlark-attachments ul a {
color: var(--red-color); }