2022-07-22 15:40:31 +02:00
/ * ! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ! * \
! * * * css . / node_modules / css-loader / dist / cjs . js ? ? ruleSet [ 1 ] . rules [ 4 ] . oneOf [ 1 ] . use [ 1 ] ! . / node_modules / postcss-loader / dist / cjs . js ? ? ruleSet [ 1 ] . rules [ 4 ] . oneOf [ 1 ] . use [ 2 ] ! . / node_modules / resolve-url-loader / index . js ? ? ruleSet [ 1 ] . rules [ 4 ] . oneOf [ 1 ] . use [ 3 ] ! . / node_modules / sass-loader / dist / cjs . js ? ? ruleSet [ 1 ] . rules [ 4 ] . oneOf [ 1 ] . use [ 4 ] ! . / public / assets / css / main . scss * * * !
\ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
@ charset "UTF-8" ;
/ * ----------------------------------------------------------------------------
MINIRESET V0 . 0 . 6
---------------------------------------------------------------------------- * /
html ,
body ,
p ,
ol ,
ul ,
li ,
dl ,
dt ,
dd ,
blockquote ,
figure ,
fieldset ,
legend ,
textarea ,
pre ,
iframe ,
hr ,
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
margin : 0 ;
padding : 0 ;
}
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
font-size : 100 % ;
font-weight : normal ;
}
ul {
list-style : none ;
}
button ,
input ,
select {
margin : 0 ;
}
html {
box-sizing : border-box ;
}
* , * :: before , * :: after {
box-sizing : inherit ;
}
img ,
video {
height : auto ;
max-width : 100 % ;
}
iframe {
border : 0 ;
}
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
td ,
th {
padding : 0 ;
}
@ -webkit-keyframes plyr-progress {
to {
background-position : var ( --plyr-progress-loading-size , 25px ) 0 ;
}
}
@ keyframes plyr-progress {
to {
background-position : var ( --plyr-progress-loading-size , 25px ) 0 ;
}
}
@ -webkit-keyframes plyr-popup {
0 % {
opacity : 0 . 5 ;
transform : translateY ( 10px ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
@ keyframes plyr-popup {
0 % {
opacity : 0 . 5 ;
transform : translateY ( 10px ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
@ -webkit-keyframes plyr-fade-in {
from {
opacity : 0 ;
}
to {
opacity : 1 ;
}
}
@ keyframes plyr-fade-in {
from {
opacity : 0 ;
}
to {
opacity : 1 ;
}
}
. plyr {
-moz-osx-font-smoothing : grayscale ;
-webkit-font-smoothing : antialiased ;
align-items : center ;
direction : ltr ;
display : flex ;
flex-direction : column ;
font-family : var ( --plyr-font-family , inherit ) ;
font-variant-numeric : tabular-nums ;
font-weight : var ( --plyr-font-weight-regular , 400 ) ;
line-height : var ( --plyr-line-height , 1 . 7 ) ;
max-width : 100 % ;
min-width : 200px ;
position : relative ;
text-shadow : none ;
transition : box-shadow 0 . 3s ease ;
z-index : 0 ;
}
. plyr video ,
. plyr audio ,
. plyr iframe {
display : block ;
height : 100 % ;
width : 100 % ;
}
. plyr button {
font : inherit ;
line-height : inherit ;
width : auto ;
}
. plyr : focus {
outline : 0 ;
}
. plyr--full-ui {
box-sizing : border-box ;
}
. plyr--full-ui * ,
. plyr--full-ui * :: after ,
. plyr--full-ui * :: before {
box-sizing : inherit ;
}
. plyr--full-ui a ,
. plyr--full-ui button ,
. plyr--full-ui input ,
. plyr--full-ui label {
touch-action : manipulation ;
}
. plyr__badge {
background : var ( --plyr-badge-background , hsl ( 216deg , 15 % , 34 % ) ) ;
border-radius : var ( --plyr-badge-border-radius , 2px ) ;
color : var ( --plyr-badge-text-color , # fff ) ;
font-size : var ( --plyr-font-size-badge , 9px ) ;
line-height : 1 ;
padding : 3px 4px ;
}
. plyr--full-ui :: -webkit-media-text-track-container {
display : none ;
}
. plyr__captions {
-webkit-animation : plyr-fade-in 0 . 3s ease ;
animation : plyr-fade-in 0 . 3s ease ;
bottom : 0 ;
display : none ;
font-size : var ( --plyr-font-size-small , 13px ) ;
left : 0 ;
padding : var ( --plyr-control-spacing , 10px ) ;
position : absolute ;
text-align : center ;
transition : transform 0 . 4s ease-in-out ;
width : 100 % ;
}
. plyr__captions span : empty {
display : none ;
}
@ media ( min-width : 480px ) {
. plyr__captions {
font-size : var ( --plyr-font-size-base , 15px ) ;
padding : calc ( var ( --plyr-control-spacing , 10px ) * 2 ) ;
}
}
@ media ( min-width : 768px ) {
. plyr__captions {
font-size : var ( --plyr-font-size-large , 18px ) ;
}
}
. plyr--captions-active . plyr__captions {
display : block ;
}
. plyr : not ( . plyr--hide-controls ) . plyr__controls : not ( : empty ) ~ . plyr__captions {
transform : translateY ( calc ( var ( --plyr-control-spacing , 10px ) * -4 ) ) ;
}
. plyr__caption {
background : var ( --plyr-captions-background , rgba ( 0 , 0 , 0 , 0 . 8 ) ) ;
border-radius : 2px ;
-webkit-box-decoration-break : clone ;
box-decoration-break : clone ;
color : var ( --plyr-captions-text-color , # fff ) ;
line-height : 185 % ;
padding : 0 . 2em 0 . 5em ;
white-space : pre-wrap ;
}
. plyr__caption div {
display : inline ;
}
. plyr__control {
background : transparent ;
border : 0 ;
border-radius : var ( --plyr-control-radius , 3px ) ;
color : inherit ;
cursor : pointer ;
flex-shrink : 0 ;
overflow : visible ;
padding : calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ;
position : relative ;
transition : all 0 . 3s ease ;
}
. plyr__control svg {
display : block ;
fill : currentColor ;
height : var ( --plyr-control-icon-size , 18px ) ;
pointer-events : none ;
width : var ( --plyr-control-icon-size , 18px ) ;
}
. plyr__control : focus {
outline : 0 ;
}
. plyr__control . plyr__tab-focus {
outline : var ( --plyr-tab-focus-color , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) dotted 3px ;
outline-offset : 2px ;
}
a . plyr__control {
text-decoration : none ;
}
a . plyr__control :: after , a . plyr__control :: before {
display : none ;
}
. plyr__control : not ( . plyr__control--pressed ) . icon--pressed ,
. plyr__control . plyr__control--pressed . icon--not-pressed ,
. plyr__control : not ( . plyr__control--pressed ) . label--pressed ,
. plyr__control . plyr__control--pressed . label--not-pressed {
display : none ;
}
. plyr--full-ui :: -webkit-media-controls {
display : none ;
}
. plyr__controls {
align-items : center ;
display : flex ;
justify-content : flex-end ;
text-align : center ;
}
. plyr__controls . plyr__progress__container {
flex : 1 ;
min-width : 0 ;
}
. plyr__controls . plyr__controls__item {
margin-left : calc ( var ( --plyr-control-spacing , 10px ) / 4 ) ;
}
. plyr__controls . plyr__controls__item : first-child {
margin-left : 0 ;
margin-right : auto ;
}
. plyr__controls . plyr__controls__item . plyr__progress__container {
padding-left : calc ( var ( --plyr-control-spacing , 10px ) / 4 ) ;
}
. plyr__controls . plyr__controls__item . plyr__time {
padding : 0 calc ( var ( --plyr-control-spacing , 10px ) / 2 ) ;
}
. plyr__controls . plyr__controls__item . plyr__progress__container : first-child , . plyr__controls . plyr__controls__item . plyr__time : first-child , . plyr__controls . plyr__controls__item . plyr__time + . plyr__time {
padding-left : 0 ;
}
. plyr__controls : empty {
display : none ;
}
. plyr [ data-plyr = captions ] ,
. plyr [ data-plyr = pip ] ,
. plyr [ data-plyr = airplay ] ,
. plyr [ data-plyr = fullscreen ] {
display : none ;
}
. plyr--captions-enabled [ data-plyr = captions ] ,
. plyr--pip-supported [ data-plyr = pip ] ,
. plyr--airplay-supported [ data-plyr = airplay ] ,
. plyr--fullscreen-enabled [ data-plyr = fullscreen ] {
display : inline-block ;
}
. plyr__menu {
display : flex ;
position : relative ;
}
. plyr__menu . plyr__control svg {
transition : transform 0 . 3s ease ;
}
. plyr__menu . plyr__control [ aria-expanded = true ] svg {
transform : rotate ( 90deg ) ;
}
. plyr__menu . plyr__control [ aria-expanded = true ] . plyr__tooltip {
display : none ;
}
. plyr__menu__container {
-webkit-animation : plyr-popup 0 . 2s ease ;
animation : plyr-popup 0 . 2s ease ;
background : var ( --plyr-menu-background , rgba ( 255 , 255 , 255 , 0 . 9 ) ) ;
border-radius : 4px ;
bottom : 100 % ;
box-shadow : var ( --plyr-menu-shadow , 0 1px 2px rgba ( 0 , 0 , 0 , 0 . 15 ) ) ;
color : var ( --plyr-menu-color , hsl ( 216deg , 15 % , 34 % ) ) ;
font-size : var ( --plyr-font-size-base , 15px ) ;
margin-bottom : 10px ;
position : absolute ;
right : -3px ;
text-align : left ;
white-space : nowrap ;
z-index : 3 ;
}
. plyr__menu__container > div {
overflow : hidden ;
transition : height 0 . 35s cubic-bezier ( 0 . 4 , 0 , 0 . 2 , 1 ) , width 0 . 35s cubic-bezier ( 0 . 4 , 0 , 0 . 2 , 1 ) ;
}
. plyr__menu__container :: after {
border : var ( --plyr-menu-arrow-size , 4px ) solid transparent ;
border-top-color : var ( --plyr-menu-background , rgba ( 255 , 255 , 255 , 0 . 9 ) ) ;
content : "" ;
height : 0 ;
position : absolute ;
right : calc ( ( ( var ( --plyr-control-icon-size , 18px ) / 2 ) + calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ) - ( var ( --plyr-menu-arrow-size , 4px ) / 2 ) ) ;
top : 100 % ;
width : 0 ;
}
. plyr__menu__container [ role = menu ] {
padding : calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ;
}
. plyr__menu__container [ role = menuitem ] ,
. plyr__menu__container [ role = menuitemradio ] {
margin-top : 2px ;
}
. plyr__menu__container [ role = menuitem ] : first-child ,
. plyr__menu__container [ role = menuitemradio ] : first-child {
margin-top : 0 ;
}
. plyr__menu__container . plyr__control {
align-items : center ;
color : var ( --plyr-menu-color , hsl ( 216deg , 15 % , 34 % ) ) ;
display : flex ;
font-size : var ( --plyr-font-size-menu , var ( --plyr-font-size-small , 13px ) ) ;
padding : calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) / 1 . 5 ) calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 1 . 5 ) ;
-webkit-user-select : none ;
-moz-user-select : none ;
user-select : none ;
width : 100 % ;
}
. plyr__menu__container . plyr__control > span {
align-items : inherit ;
display : flex ;
width : 100 % ;
}
. plyr__menu__container . plyr__control :: after {
border : var ( --plyr-menu-item-arrow-size , 4px ) solid transparent ;
content : "" ;
position : absolute ;
top : 50 % ;
transform : translateY ( -50 % ) ;
}
. plyr__menu__container . plyr__control--forward {
padding-right : calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 4 ) ;
}
. plyr__menu__container . plyr__control--forward :: after {
border-left-color : var ( --plyr-menu-arrow-color , hsl ( 216deg , 15 % , 52 % ) ) ;
right : calc ( ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 1 . 5 ) - var ( --plyr-menu-item-arrow-size , 4px ) ) ;
}
. plyr__menu__container . plyr__control--forward . plyr__tab-focus :: after , . plyr__menu__container . plyr__control--forward : hover :: after {
border-left-color : currentColor ;
}
. plyr__menu__container . plyr__control--back {
font-weight : var ( --plyr-font-weight-regular , 400 ) ;
margin : calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ;
margin-bottom : calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) / 2 ) ;
padding-left : calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 4 ) ;
position : relative ;
width : calc ( 100 % - ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 2 ) ) ;
}
. plyr__menu__container . plyr__control--back :: after {
border-right-color : var ( --plyr-menu-arrow-color , hsl ( 216deg , 15 % , 52 % ) ) ;
left : calc ( ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 1 . 5 ) - var ( --plyr-menu-item-arrow-size , 4px ) ) ;
}
. plyr__menu__container . plyr__control--back :: before {
background : var ( --plyr-menu-back-border-color , hsl ( 216deg , 15 % , 88 % ) ) ;
box-shadow : 0 1px 0 var ( --plyr-menu-back-border-shadow-color , # fff ) ;
content : "" ;
height : 1px ;
left : 0 ;
margin-top : calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) / 2 ) ;
overflow : hidden ;
position : absolute ;
right : 0 ;
top : 100 % ;
}
. plyr__menu__container . plyr__control--back . plyr__tab-focus :: after , . plyr__menu__container . plyr__control--back : hover :: after {
border-right-color : currentColor ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] {
padding-left : calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] :: before , . plyr__menu__container . plyr__control [ role = menuitemradio ] :: after {
border-radius : 100 % ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] :: before {
background : rgba ( 0 , 0 , 0 , 0 . 1 ) ;
content : "" ;
display : block ;
flex-shrink : 0 ;
height : 16px ;
margin-right : var ( --plyr-control-spacing , 10px ) ;
transition : all 0 . 3s ease ;
width : 16px ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] :: after {
background : # fff ;
border : 0 ;
height : 6px ;
left : 12px ;
opacity : 0 ;
top : 50 % ;
transform : translateY ( -50 % ) scale ( 0 ) ;
transition : transform 0 . 3s ease , opacity 0 . 3s ease ;
width : 6px ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] [ aria-checked = true ] :: before {
background : var ( --plyr-control-toggle-checked-background , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] [ aria-checked = true ] :: after {
opacity : 1 ;
transform : translateY ( -50 % ) scale ( 1 ) ;
}
. plyr__menu__container . plyr__control [ role = menuitemradio ] . plyr__tab-focus :: before , . plyr__menu__container . plyr__control [ role = menuitemradio ] : hover :: before {
background : rgba ( 35 , 40 , 47 , 0 . 1 ) ;
}
. plyr__menu__container . plyr__menu__value {
align-items : center ;
display : flex ;
margin-left : auto ;
margin-right : calc ( ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) - 2 ) * -1 ) ;
overflow : hidden ;
padding-left : calc ( calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) * 3 . 5 ) ;
pointer-events : none ;
}
. plyr--full-ui input [ type = range ] {
-webkit-appearance : none ;
-moz-appearance : none ;
appearance : none ;
background : transparent ;
border : 0 ;
border-radius : calc ( var ( --plyr-range-thumb-height , 13px ) * 2 ) ;
color : var ( --plyr-range-fill-background , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) ;
display : block ;
height : calc ( ( var ( --plyr-range-thumb-active-shadow-width , 3px ) * 2 ) + var ( --plyr-range-thumb-height , 13px ) ) ;
margin : 0 ;
min-width : 0 ;
padding : 0 ;
transition : box-shadow 0 . 3s ease ;
width : 100 % ;
}
. plyr--full-ui input [ type = range ] :: -webkit-slider-runnable-track {
background : transparent ;
border : 0 ;
border-radius : calc ( var ( --plyr-range-track-height , 5px ) / 2 ) ;
height : var ( --plyr-range-track-height , 5px ) ;
-webkit-transition : box-shadow 0 . 3s ease ;
transition : box-shadow 0 . 3s ease ;
-webkit-user-select : none ;
user-select : none ;
background-image : linear-gradient ( to right , currentColor var ( --value , 0 % ) , transparent var ( --value , 0 % ) ) ;
}
. plyr--full-ui input [ type = range ] :: -webkit-slider-thumb {
background : var ( --plyr-range-thumb-background , # fff ) ;
border : 0 ;
border-radius : 100 % ;
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) ;
height : var ( --plyr-range-thumb-height , 13px ) ;
position : relative ;
-webkit-transition : all 0 . 2s ease ;
transition : all 0 . 2s ease ;
width : var ( --plyr-range-thumb-height , 13px ) ;
-webkit-appearance : none ;
appearance : none ;
margin-top : calc ( ( var ( --plyr-range-thumb-height , 13px ) - var ( --plyr-range-track-height , 5px ) ) / 2 * -1 ) ;
}
. plyr--full-ui input [ type = range ] :: -moz-range-track {
background : transparent ;
border : 0 ;
border-radius : calc ( var ( --plyr-range-track-height , 5px ) / 2 ) ;
height : var ( --plyr-range-track-height , 5px ) ;
-moz-transition : box-shadow 0 . 3s ease ;
transition : box-shadow 0 . 3s ease ;
-moz-user-select : none ;
user-select : none ;
}
. plyr--full-ui input [ type = range ] :: -moz-range-thumb {
background : var ( --plyr-range-thumb-background , # fff ) ;
border : 0 ;
border-radius : 100 % ;
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) ;
height : var ( --plyr-range-thumb-height , 13px ) ;
position : relative ;
-moz-transition : all 0 . 2s ease ;
transition : all 0 . 2s ease ;
width : var ( --plyr-range-thumb-height , 13px ) ;
}
. plyr--full-ui input [ type = range ] :: -moz-range-progress {
background : currentColor ;
border-radius : calc ( var ( --plyr-range-track-height , 5px ) / 2 ) ;
height : var ( --plyr-range-track-height , 5px ) ;
}
. plyr--full-ui input [ type = range ] :: -ms-track {
background : transparent ;
border : 0 ;
border-radius : calc ( var ( --plyr-range-track-height , 5px ) / 2 ) ;
height : var ( --plyr-range-track-height , 5px ) ;
-ms-transition : box-shadow 0 . 3s ease ;
transition : box-shadow 0 . 3s ease ;
user-select : none ;
color : transparent ;
}
. plyr--full-ui input [ type = range ] :: -ms-fill-upper {
background : transparent ;
border : 0 ;
border-radius : calc ( var ( --plyr-range-track-height , 5px ) / 2 ) ;
height : var ( --plyr-range-track-height , 5px ) ;
-ms-transition : box-shadow 0 . 3s ease ;
transition : box-shadow 0 . 3s ease ;
user-select : none ;
}
. plyr--full-ui input [ type = range ] :: -ms-fill-lower {
background : transparent ;
border : 0 ;
border-radius : calc ( var ( --plyr-range-track-height , 5px ) / 2 ) ;
height : var ( --plyr-range-track-height , 5px ) ;
-ms-transition : box-shadow 0 . 3s ease ;
transition : box-shadow 0 . 3s ease ;
user-select : none ;
background : currentColor ;
}
. plyr--full-ui input [ type = range ] :: -ms-thumb {
background : var ( --plyr-range-thumb-background , # fff ) ;
border : 0 ;
border-radius : 100 % ;
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) ;
height : var ( --plyr-range-thumb-height , 13px ) ;
position : relative ;
-ms-transition : all 0 . 2s ease ;
transition : all 0 . 2s ease ;
width : var ( --plyr-range-thumb-height , 13px ) ;
margin-top : 0 ;
}
. plyr--full-ui input [ type = range ] :: -ms-tooltip {
display : none ;
}
. plyr--full-ui input [ type = range ] :: -moz-focus-outer {
border : 0 ;
}
. plyr--full-ui input [ type = range ] : focus {
outline : 0 ;
}
. plyr--full-ui input [ type = range ] . plyr__tab-focus :: -webkit-slider-runnable-track {
outline : var ( --plyr-tab-focus-color , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) dotted 3px ;
outline-offset : 2px ;
}
. plyr--full-ui input [ type = range ] . plyr__tab-focus :: -moz-range-track {
outline : var ( --plyr-tab-focus-color , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) dotted 3px ;
outline-offset : 2px ;
}
. plyr--full-ui input [ type = range ] . plyr__tab-focus :: -ms-track {
outline : var ( --plyr-tab-focus-color , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) dotted 3px ;
outline-offset : 2px ;
}
. plyr__poster {
background-color : var ( --plyr-video-background , var ( --plyr-video-background , rgb ( 0 , 0 , 0 ) ) ) ;
background-position : 50 % 50 % ;
background-repeat : no-repeat ;
background-size : contain ;
height : 100 % ;
left : 0 ;
opacity : 0 ;
position : absolute ;
top : 0 ;
transition : opacity 0 . 2s ease ;
width : 100 % ;
z-index : 1 ;
}
. plyr--stopped . plyr__poster-enabled . plyr__poster {
opacity : 1 ;
}
. plyr--youtube . plyr--paused . plyr__poster-enabled : not ( . plyr--stopped ) . plyr__poster {
display : none ;
}
. plyr__time {
font-size : var ( --plyr-font-size-time , var ( --plyr-font-size-small , 13px ) ) ;
}
. plyr__time + . plyr__time :: before {
content : "⁄ " ;
margin-right : var ( --plyr-control-spacing , 10px ) ;
}
@ media ( max-width : 767px ) {
. plyr__time + . plyr__time {
display : none ;
}
}
/* stylelint-disable selector-max-compound-selectors */
. plyr__tooltip {
background : var ( --plyr-tooltip-background , rgba ( 255 , 255 , 255 , 0 . 9 ) ) ;
border-radius : var ( --plyr-tooltip-radius , 5px ) ;
bottom : 100 % ;
box-shadow : var ( --plyr-tooltip-shadow , 0 1px 2px rgba ( 0 , 0 , 0 , 0 . 15 ) ) ;
color : var ( --plyr-tooltip-color , hsl ( 216deg , 15 % , 34 % ) ) ;
font-size : var ( --plyr-font-size-small , 13px ) ;
font-weight : var ( --plyr-font-weight-regular , 400 ) ;
left : 50 % ;
line-height : 1 . 3 ;
margin-bottom : calc ( calc ( var ( --plyr-control-spacing , 10px ) / 2 ) * 2 ) ;
opacity : 0 ;
padding : calc ( var ( --plyr-control-spacing , 10px ) / 2 ) calc ( calc ( var ( --plyr-control-spacing , 10px ) / 2 ) * 1 . 5 ) ;
pointer-events : none ;
position : absolute ;
transform : translate ( -50 % , 10px ) scale ( 0 . 8 ) ;
transform-origin : 50 % 100 % ;
transition : transform 0 . 2s 0 . 1s ease , opacity 0 . 2s 0 . 1s ease ;
white-space : nowrap ;
z-index : 2 ;
}
. plyr__tooltip :: before {
border-left : var ( --plyr-tooltip-arrow-size , 4px ) solid transparent ;
border-right : var ( --plyr-tooltip-arrow-size , 4px ) solid transparent ;
border-top : var ( --plyr-tooltip-arrow-size , 4px ) solid var ( --plyr-tooltip-background , rgba ( 255 , 255 , 255 , 0 . 9 ) ) ;
bottom : calc ( var ( --plyr-tooltip-arrow-size , 4px ) * -1 ) ;
content : "" ;
height : 0 ;
left : 50 % ;
position : absolute ;
transform : translateX ( -50 % ) ;
width : 0 ;
z-index : 2 ;
}
. plyr . plyr__control : hover . plyr__tooltip ,
. plyr . plyr__control . plyr__tab-focus . plyr__tooltip ,
. plyr__tooltip--visible {
opacity : 1 ;
transform : translate ( -50 % , 0 ) scale ( 1 ) ;
}
. plyr . plyr__control : hover . plyr__tooltip {
z-index : 3 ;
}
. plyr__controls > . plyr__control : first-child . plyr__tooltip ,
. plyr__controls > . plyr__control : first-child + . plyr__control . plyr__tooltip {
left : 0 ;
transform : translate ( 0 , 10px ) scale ( 0 . 8 ) ;
transform-origin : 0 100 % ;
}
. plyr__controls > . plyr__control : first-child . plyr__tooltip :: before ,
. plyr__controls > . plyr__control : first-child + . plyr__control . plyr__tooltip :: before {
left : calc ( ( var ( --plyr-control-icon-size , 18px ) / 2 ) + calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ) ;
}
. plyr__controls > . plyr__control : last-child . plyr__tooltip {
left : auto ;
right : 0 ;
transform : translate ( 0 , 10px ) scale ( 0 . 8 ) ;
transform-origin : 100 % 100 % ;
}
. plyr__controls > . plyr__control : last-child . plyr__tooltip :: before {
left : auto ;
right : calc ( ( var ( --plyr-control-icon-size , 18px ) / 2 ) + calc ( var ( --plyr-control-spacing , 10px ) * 0 . 7 ) ) ;
transform : translateX ( 50 % ) ;
}
. plyr__controls > . plyr__control : first-child : hover . plyr__tooltip , . plyr__controls > . plyr__control : first-child . plyr__tab-focus . plyr__tooltip ,
. plyr__controls > . plyr__control : first-child . plyr__tooltip--visible ,
. plyr__controls > . plyr__control : first-child + . plyr__control : hover . plyr__tooltip ,
. plyr__controls > . plyr__control : first-child + . plyr__control . plyr__tab-focus . plyr__tooltip ,
. plyr__controls > . plyr__control : first-child + . plyr__control . plyr__tooltip--visible ,
. plyr__controls > . plyr__control : last-child : hover . plyr__tooltip ,
. plyr__controls > . plyr__control : last-child . plyr__tab-focus . plyr__tooltip ,
. plyr__controls > . plyr__control : last-child . plyr__tooltip--visible {
transform : translate ( 0 , 0 ) scale ( 1 ) ;
}
. plyr__progress {
left : calc ( var ( --plyr-range-thumb-height , 13px ) * 0 . 5 ) ;
margin-right : var ( --plyr-range-thumb-height , 13px ) ;
position : relative ;
}
. plyr__progress input [ type = range ] , . plyr__progress__buffer {
margin-left : calc ( var ( --plyr-range-thumb-height , 13px ) * -0 . 5 ) ;
margin-right : calc ( var ( --plyr-range-thumb-height , 13px ) * -0 . 5 ) ;
width : calc ( 100 % + var ( --plyr-range-thumb-height , 13px ) ) ;
}
. plyr__progress input [ type = range ] {
position : relative ;
z-index : 2 ;
}
. plyr__progress . plyr__tooltip {
left : 0 ;
max-width : 120px ;
overflow-wrap : break-word ;
white-space : normal ;
}
. plyr__progress__buffer {
-webkit-appearance : none ; /* stylelint-disable-line */
background : transparent ;
border : 0 ;
border-radius : 100px ;
height : var ( --plyr-range-track-height , 5px ) ;
left : 0 ;
margin-top : calc ( ( var ( --plyr-range-track-height , 5px ) / 2 ) * -1 ) ;
padding : 0 ;
position : absolute ;
top : 50 % ;
}
. plyr__progress__buffer :: -webkit-progress-bar {
background : transparent ;
}
. plyr__progress__buffer :: -webkit-progress-value {
background : currentColor ;
border-radius : 100px ;
min-width : var ( --plyr-range-track-height , 5px ) ;
-webkit-transition : width 0 . 2s ease ;
transition : width 0 . 2s ease ;
}
. plyr__progress__buffer :: -moz-progress-bar {
background : currentColor ;
border-radius : 100px ;
min-width : var ( --plyr-range-track-height , 5px ) ;
-moz-transition : width 0 . 2s ease ;
transition : width 0 . 2s ease ;
}
. plyr__progress__buffer :: -ms-fill {
border-radius : 100px ;
-ms-transition : width 0 . 2s ease ;
transition : width 0 . 2s ease ;
}
. plyr--loading . plyr__progress__buffer {
-webkit-animation : plyr-progress 1s linear infinite ;
animation : plyr-progress 1s linear infinite ;
background-image : linear-gradient ( -45deg , var ( --plyr-progress-loading-background , rgba ( 35 , 40 , 47 , 0 . 6 ) ) 25 % , transparent 25 % , transparent 50 % , var ( --plyr-progress-loading-background , rgba ( 35 , 40 , 47 , 0 . 6 ) ) 50 % , var ( --plyr-progress-loading-background , rgba ( 35 , 40 , 47 , 0 . 6 ) ) 75 % , transparent 75 % , transparent ) ;
background-repeat : repeat-x ;
background-size : var ( --plyr-progress-loading-size , 25px ) var ( --plyr-progress-loading-size , 25px ) ;
color : transparent ;
}
. plyr--video . plyr--loading . plyr__progress__buffer {
background-color : var ( --plyr-video-progress-buffered-background , rgba ( 255 , 255 , 255 , 0 . 25 ) ) ;
}
. plyr--audio . plyr--loading . plyr__progress__buffer {
background-color : var ( --plyr-audio-progress-buffered-background , rgba ( 193 , 200 , 209 , 0 . 6 ) ) ;
}
. plyr__progress__marker {
background-color : var ( --plyr-progress-marker-background , # fff ) ;
border-radius : 1px ;
height : var ( --plyr-range-track-height , 5px ) ;
position : absolute ;
top : 50 % ;
transform : translate ( -50 % , -50 % ) ;
width : var ( --plyr-progress-marker-width , 3px ) ;
z-index : 3 ;
}
. plyr__volume {
align-items : center ;
display : flex ;
max-width : 110px ;
min-width : 80px ;
position : relative ;
width : 20 % ;
}
. plyr__volume input [ type = range ] {
margin-left : calc ( var ( --plyr-control-spacing , 10px ) / 2 ) ;
margin-right : calc ( var ( --plyr-control-spacing , 10px ) / 2 ) ;
position : relative ;
z-index : 2 ;
}
. plyr--is-ios . plyr__volume {
min-width : 0 ;
width : auto ;
}
. plyr--audio {
display : block ;
}
. plyr--audio . plyr__controls {
background : var ( --plyr-audio-controls-background , # fff ) ;
border-radius : inherit ;
color : var ( --plyr-audio-control-color , hsl ( 216deg , 15 % , 34 % ) ) ;
padding : var ( --plyr-control-spacing , 10px ) ;
}
. plyr--audio . plyr__control . plyr__tab-focus , . plyr--audio . plyr__control : hover , . plyr--audio . plyr__control [ aria-expanded = true ] {
background : var ( --plyr-audio-control-background-hover , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) ;
color : var ( --plyr-audio-control-color-hover , # fff ) ;
}
. plyr--full-ui . plyr--audio input [ type = range ] :: -webkit-slider-runnable-track {
background-color : var ( --plyr-audio-range-track-background , var ( --plyr-audio-progress-buffered-background , rgba ( 193 , 200 , 209 , 0 . 6 ) ) ) ;
}
. plyr--full-ui . plyr--audio input [ type = range ] :: -moz-range-track {
background-color : var ( --plyr-audio-range-track-background , var ( --plyr-audio-progress-buffered-background , rgba ( 193 , 200 , 209 , 0 . 6 ) ) ) ;
}
. plyr--full-ui . plyr--audio input [ type = range ] :: -ms-track {
background-color : var ( --plyr-audio-range-track-background , var ( --plyr-audio-progress-buffered-background , rgba ( 193 , 200 , 209 , 0 . 6 ) ) ) ;
}
. plyr--full-ui . plyr--audio input [ type = range ] : active :: -webkit-slider-thumb {
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) , 0 0 0 var ( --plyr-range-thumb-active-shadow-width , 3px ) var ( --plyr-audio-range-thumb-active-shadow-color , rgba ( 35 , 40 , 47 , 0 . 1 ) ) ;
}
. plyr--full-ui . plyr--audio input [ type = range ] : active :: -moz-range-thumb {
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) , 0 0 0 var ( --plyr-range-thumb-active-shadow-width , 3px ) var ( --plyr-audio-range-thumb-active-shadow-color , rgba ( 35 , 40 , 47 , 0 . 1 ) ) ;
}
. plyr--full-ui . plyr--audio input [ type = range ] : active :: -ms-thumb {
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) , 0 0 0 var ( --plyr-range-thumb-active-shadow-width , 3px ) var ( --plyr-audio-range-thumb-active-shadow-color , rgba ( 35 , 40 , 47 , 0 . 1 ) ) ;
}
. plyr--audio . plyr__progress__buffer {
color : var ( --plyr-audio-progress-buffered-background , rgba ( 193 , 200 , 209 , 0 . 6 ) ) ;
}
. plyr--video {
background : var ( --plyr-video-background , var ( --plyr-video-background , rgb ( 0 , 0 , 0 ) ) ) ;
overflow : hidden ;
}
. plyr--video . plyr--menu-open {
overflow : visible ;
}
. plyr__video-wrapper {
background : var ( --plyr-video-background , var ( --plyr-video-background , rgb ( 0 , 0 , 0 ) ) ) ;
height : 100 % ;
margin : auto ;
overflow : hidden ;
position : relative ;
width : 100 % ;
}
. plyr__video-embed ,
. plyr__video-wrapper--fixed-ratio {
aspect-ratio : 16 / 9 ;
}
@ supports not ( aspect-ratio : 16 / 9 ) {
. plyr__video-embed ,
. plyr__video-wrapper--fixed-ratio {
height : 0 ;
padding-bottom : 56 . 25 % ;
position : relative ;
}
}
. plyr__video-embed iframe ,
. plyr__video-wrapper--fixed-ratio video {
border : 0 ;
height : 100 % ;
left : 0 ;
position : absolute ;
top : 0 ;
width : 100 % ;
}
. plyr--full-ui . plyr__video-embed > . plyr__video-embed__container {
padding-bottom : 240 % ;
position : relative ;
transform : translateY ( -38 . 28125 % ) ;
}
. plyr--video . plyr__controls {
background : var ( --plyr-video-controls-background , linear-gradient ( rgba ( 0 , 0 , 0 , 0 ) , rgba ( 0 , 0 , 0 , 0 . 75 ) ) ) ;
border-bottom-left-radius : inherit ;
border-bottom-right-radius : inherit ;
bottom : 0 ;
color : var ( --plyr-video-control-color , # fff ) ;
left : 0 ;
padding : calc ( var ( --plyr-control-spacing , 10px ) / 2 ) ;
padding-top : calc ( var ( --plyr-control-spacing , 10px ) * 2 ) ;
position : absolute ;
right : 0 ;
transition : opacity 0 . 4s ease-in-out , transform 0 . 4s ease-in-out ;
z-index : 3 ;
}
@ media ( min-width : 480px ) {
. plyr--video . plyr__controls {
padding : var ( --plyr-control-spacing , 10px ) ;
padding-top : calc ( var ( --plyr-control-spacing , 10px ) * 3 . 5 ) ;
}
}
. plyr--video . plyr--hide-controls . plyr__controls {
opacity : 0 ;
pointer-events : none ;
transform : translateY ( 100 % ) ;
}
. plyr--video . plyr__control . plyr__tab-focus , . plyr--video . plyr__control : hover , . plyr--video . plyr__control [ aria-expanded = true ] {
background : var ( --plyr-video-control-background-hover , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) ;
color : var ( --plyr-video-control-color-hover , # fff ) ;
}
. plyr__control--overlaid {
background : var ( --plyr-video-control-background-hover , var ( --plyr-color-main , var ( --plyr-color-main , hsl ( 198deg , 100 % , 50 % ) ) ) ) ;
border : 0 ;
border-radius : 100 % ;
color : var ( --plyr-video-control-color , # fff ) ;
display : none ;
left : 50 % ;
opacity : 0 . 9 ;
padding : calc ( var ( --plyr-control-spacing , 10px ) * 1 . 5 ) ;
position : absolute ;
top : 50 % ;
transform : translate ( -50 % , -50 % ) ;
transition : 0 . 3s ;
z-index : 2 ;
}
. plyr__control--overlaid svg {
left : 2px ;
position : relative ;
}
. plyr__control--overlaid : hover , . plyr__control--overlaid : focus {
opacity : 1 ;
}
. plyr--playing . plyr__control--overlaid {
opacity : 0 ;
visibility : hidden ;
}
. plyr--full-ui . plyr--video . plyr__control--overlaid {
display : block ;
}
. plyr--full-ui . plyr--video input [ type = range ] :: -webkit-slider-runnable-track {
background-color : var ( --plyr-video-range-track-background , var ( --plyr-video-progress-buffered-background , rgba ( 255 , 255 , 255 , 0 . 25 ) ) ) ;
}
. plyr--full-ui . plyr--video input [ type = range ] :: -moz-range-track {
background-color : var ( --plyr-video-range-track-background , var ( --plyr-video-progress-buffered-background , rgba ( 255 , 255 , 255 , 0 . 25 ) ) ) ;
}
. plyr--full-ui . plyr--video input [ type = range ] :: -ms-track {
background-color : var ( --plyr-video-range-track-background , var ( --plyr-video-progress-buffered-background , rgba ( 255 , 255 , 255 , 0 . 25 ) ) ) ;
}
. plyr--full-ui . plyr--video input [ type = range ] : active :: -webkit-slider-thumb {
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) , 0 0 0 var ( --plyr-range-thumb-active-shadow-width , 3px ) var ( --plyr-audio-range-thumb-active-shadow-color , rgba ( 255 , 255 , 255 , 0 . 5 ) ) ;
}
. plyr--full-ui . plyr--video input [ type = range ] : active :: -moz-range-thumb {
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) , 0 0 0 var ( --plyr-range-thumb-active-shadow-width , 3px ) var ( --plyr-audio-range-thumb-active-shadow-color , rgba ( 255 , 255 , 255 , 0 . 5 ) ) ;
}
. plyr--full-ui . plyr--video input [ type = range ] : active :: -ms-thumb {
box-shadow : var ( --plyr-range-thumb-shadow , 0 1px 1px rgba ( 35 , 40 , 47 , 0 . 15 ) , 0 0 0 1px rgba ( 35 , 40 , 47 , 0 . 2 ) ) , 0 0 0 var ( --plyr-range-thumb-active-shadow-width , 3px ) var ( --plyr-audio-range-thumb-active-shadow-color , rgba ( 255 , 255 , 255 , 0 . 5 ) ) ;
}
. plyr--video . plyr__progress__buffer {
color : var ( --plyr-video-progress-buffered-background , rgba ( 255 , 255 , 255 , 0 . 25 ) ) ;
}
. plyr : -webkit-full-screen {
background : # 000 ;
border-radius : 0 ! important ;
height : 100 % ;
margin : 0 ;
width : 100 % ;
}
. plyr : fullscreen {
background : # 000 ;
border-radius : 0 ! important ;
height : 100 % ;
margin : 0 ;
width : 100 % ;
}
. plyr : -webkit-full-screen video {
height : 100 % ;
}
. plyr : fullscreen video {
height : 100 % ;
}
. plyr : -webkit-full-screen . plyr__control . icon--exit-fullscreen {
display : block ;
}
. plyr : fullscreen . plyr__control . icon--exit-fullscreen {
display : block ;
}
. plyr : -webkit-full-screen . plyr__control . icon--exit-fullscreen + svg {
display : none ;
}
. plyr : fullscreen . plyr__control . icon--exit-fullscreen + svg {
display : none ;
}
. plyr : -webkit-full-screen . plyr--hide-controls {
cursor : none ;
}
. plyr : fullscreen . plyr--hide-controls {
cursor : none ;
}
@ media ( min-width : 1024px ) {
. plyr : -webkit-full-screen . plyr__captions {
font-size : var ( --plyr-font-size-xlarge , 21px ) ;
}
. plyr : fullscreen . plyr__captions {
font-size : var ( --plyr-font-size-xlarge , 21px ) ;
}
}
. plyr--fullscreen-fallback {
background : # 000 ;
border-radius : 0 ! important ;
height : 100 % ;
margin : 0 ;
width : 100 % ;
bottom : 0 ;
display : block ;
left : 0 ;
position : fixed ;
right : 0 ;
top : 0 ;
z-index : 10000000 ;
}
. plyr--fullscreen-fallback video {
height : 100 % ;
}
. plyr--fullscreen-fallback . plyr__control . icon--exit-fullscreen {
display : block ;
}
. plyr--fullscreen-fallback . plyr__control . icon--exit-fullscreen + svg {
display : none ;
}
. plyr--fullscreen-fallback . plyr--hide-controls {
cursor : none ;
}
@ media ( min-width : 1024px ) {
. plyr--fullscreen-fallback . plyr__captions {
font-size : var ( --plyr-font-size-xlarge , 21px ) ;
}
}
. plyr__ads {
border-radius : inherit ;
bottom : 0 ;
cursor : pointer ;
left : 0 ;
overflow : hidden ;
position : absolute ;
right : 0 ;
top : 0 ;
z-index : -1 ;
}
. plyr__ads > div ,
. plyr__ads > div iframe {
height : 100 % ;
position : absolute ;
width : 100 % ;
}
. plyr__ads :: after {
background : hsl ( 216deg , 15 % , 16 % ) ;
border-radius : 2px ;
bottom : var ( --plyr-control-spacing , 10px ) ;
color : # fff ;
content : attr ( data-badge-text ) ;
font-size : 11px ;
padding : 2px 6px ;
pointer-events : none ;
position : absolute ;
right : var ( --plyr-control-spacing , 10px ) ;
z-index : 3 ;
}
. plyr__ads : empty :: after {
display : none ;
}
. plyr__cues {
background : currentColor ;
display : block ;
height : var ( --plyr-range-track-height , 5px ) ;
left : 0 ;
opacity : 0 . 8 ;
position : absolute ;
top : 50 % ;
transform : translateY ( -50 % ) ;
width : 3px ;
z-index : 3 ;
}
. plyr__preview-thumb {
background-color : var ( --plyr-tooltip-background , rgba ( 255 , 255 , 255 , 0 . 9 ) ) ;
border-radius : var ( --plyr-tooltip-radius , 5px ) ;
bottom : 100 % ;
box-shadow : var ( --plyr-tooltip-shadow , 0 1px 2px rgba ( 0 , 0 , 0 , 0 . 15 ) ) ;
margin-bottom : calc ( calc ( var ( --plyr-control-spacing , 10px ) / 2 ) * 2 ) ;
opacity : 0 ;
padding : 3px ;
pointer-events : none ;
position : absolute ;
transform : translate ( 0 , 10px ) scale ( 0 . 8 ) ;
transform-origin : 50 % 100 % ;
transition : transform 0 . 2s 0 . 1s ease , opacity 0 . 2s 0 . 1s ease ;
z-index : 2 ;
}
. plyr__preview-thumb--is-shown {
opacity : 1 ;
transform : translate ( 0 , 0 ) scale ( 1 ) ;
}
. plyr__preview-thumb :: before {
border-left : var ( --plyr-tooltip-arrow-size , 4px ) solid transparent ;
border-right : var ( --plyr-tooltip-arrow-size , 4px ) solid transparent ;
border-top : var ( --plyr-tooltip-arrow-size , 4px ) solid var ( --plyr-tooltip-background , rgba ( 255 , 255 , 255 , 0 . 9 ) ) ;
bottom : calc ( var ( --plyr-tooltip-arrow-size , 4px ) * -1 ) ;
content : "" ;
height : 0 ;
left : calc ( 50 % + var ( --preview-arrow-offset ) ) ;
position : absolute ;
transform : translateX ( -50 % ) ;
width : 0 ;
z-index : 2 ;
}
. plyr__preview-thumb__image-container {
background : hsl ( 216deg , 15 % , 79 % ) ;
border-radius : calc ( var ( --plyr-tooltip-radius , 5px ) - 1px ) ;
overflow : hidden ;
position : relative ;
z-index : 0 ;
}
. plyr__preview-thumb__image-container img , . plyr__preview-thumb__image-container :: after {
height : 100 % ;
left : 0 ;
position : absolute ;
top : 0 ;
width : 100 % ;
}
. plyr__preview-thumb__image-container :: after {
border-radius : inherit ;
box-shadow : inset 0 0 0 1px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
content : "" ;
pointer-events : none ;
}
. plyr__preview-thumb__image-container img {
max-height : none ;
max-width : none ;
}
. plyr__preview-thumb__time-container {
background : var ( --plyr-video-controls-background , linear-gradient ( rgba ( 0 , 0 , 0 , 0 ) , rgba ( 0 , 0 , 0 , 0 . 75 ) ) ) ;
border-bottom-left-radius : calc ( var ( --plyr-tooltip-radius , 5px ) - 1px ) ;
border-bottom-right-radius : calc ( var ( --plyr-tooltip-radius , 5px ) - 1px ) ;
bottom : 0 ;
left : 0 ;
line-height : 1 . 1 ;
padding : 20px 6px 6px ;
position : absolute ;
right : 0 ;
z-index : 3 ;
}
. plyr__preview-thumb__time-container span {
color : # fff ;
font-size : var ( --plyr-font-size-time , var ( --plyr-font-size-small , 13px ) ) ;
}
. plyr__preview-scrubbing {
bottom : 0 ;
filter : blur ( 1px ) ;
height : 100 % ;
left : 0 ;
margin : auto ;
opacity : 0 ;
overflow : hidden ;
pointer-events : none ;
position : absolute ;
right : 0 ;
top : 0 ;
transition : opacity 0 . 3s ease ;
width : 100 % ;
z-index : 1 ;
}
. plyr__preview-scrubbing--is-shown {
opacity : 1 ;
}
. plyr__preview-scrubbing img {
height : 100 % ;
left : 0 ;
max-height : none ;
max-width : none ;
-o-object-fit : contain ;
object-fit : contain ;
position : absolute ;
top : 0 ;
width : 100 % ;
}
. plyr--no-transition {
transition : none ! important ;
}
. plyr__sr-only {
clip : rect ( 1px , 1px , 1px , 1px ) ;
overflow : hidden ;
border : 0 ! important ;
height : 1px ! important ;
padding : 0 ! important ;
position : absolute ! important ;
width : 1px ! important ;
}
. plyr [ hidden ] {
display : none ! important ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-Regular . fd0c54f3 . ttf ) format ( "truetype" ) ;
font-weight : 400 ;
font-style : normal ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-Italic . 18662850 . ttf ) format ( "truetype" ) ;
font-weight : 400 ;
font-style : italic ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-Medium . 6cf31fae . ttf ) format ( "truetype" ) ;
font-weight : 500 ;
font-style : normal ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-MediumItalic . 57991510 . ttf ) format ( "truetype" ) ;
font-weight : 500 ;
font-style : italic ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-SemiBold . 56124591 . ttf ) format ( "truetype" ) ;
font-weight : 600 ;
font-style : normal ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-SemiBoldItalic . e0d50cda . ttf ) format ( "truetype" ) ;
font-weight : 600 ;
font-style : italic ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-Bold . bb33ef1f . ttf ) format ( "truetype" ) ;
font-weight : 700 ;
font-style : normal ;
}
@ font-face {
font-family : "Nunito" ;
src : url ( / assets / build / fonts / Nunito-BoldItalic . bf268a33 . ttf ) format ( "truetype" ) ;
font-weight : 700 ;
font-style : italic ;
}
@ font-face {
font-family : "Gloria Hallelujah" ;
src : url ( / assets / build / fonts / GloriaHallelujah-Regular . c9da976c . ttf ) format ( "truetype" ) ;
font-weight : 400 ;
font-style : normal ;
}
: root {
--text-font-family : "Nunito" , Verdana , sans-serif ;
--logo-font-family : "Gloria Hallelujah" , Verdana , sans-serif ;
--regular-font-weight : 400 ;
--medium-font-weight : 500 ;
--semi-bold-font-weight : 600 ;
--bold-font-weight : 700 ;
--text-font-size : 1rem ;
--caption-font-size : 0 . 9rem ;
--footnote-font-size : 0 . 8rem ;
--text-line-height : 1 . 4rem ;
--h1-font-size : 1 . 8rem ;
--h2-font-size : 1 . 4rem ;
--h3-font-size : 1 . 2rem ;
--content-max-width : 140rem ;
--text-max-width : 70rem ;
--icon-size : 2 . 5rem ;
--header-bar-vertical-padding : 1rem ;
--header-bar-horizontal-padding : 2rem ;
--header-bar-height : calc ( ( var ( --header-bar-vertical-padding ) * 2 ) + var ( --icon-size ) ) ;
--footer-bar-vertical-padding : 1rem ;
--footer-bar-horizontal-padding : 2rem ;
--footer-bar-height : calc ( ( var ( --footer-bar-vertical-padding ) * 2 ) + var ( --icon-size ) + 1rem + var ( --text-font-size ) ) ;
--generic-section-vertical-padding : 3rem ;
--generic-section-horizontal-padding : 2rem ;
--home-section-vertical-padding : 2rem ;
--home-section-horizontal-padding : 2rem ;
--home-section-min-height : calc ( 100vh - var ( --header-bar-height ) - var ( --footer-bar-height ) ) ;
--home-nav-gap : 1rem ;
--home-nav-item-size : 2rem ;
--home-nav-item-translation : 0 ;
--home-nav-image-max-height : calc ( 100vh - var ( --header-bar-height ) - ( ( var ( --generic-section-vertical-padding ) + var ( --home-nav-item-size ) + var ( --home-nav-gap ) ) * 2 ) - var ( --footer-bar-height ) ) ;
--black : # 000 ;
--transparent-black : rgba ( 0 , 0 , 0 , 0 . 8 ) ;
--jet : # 333333 ;
--transparent-jet : rgba ( 51 , 51 , 51 , 0 . 8 ) ;
--granite-gray : # 666666 ;
--spanish-gray : # 999999 ;
--light-gray : # cccccc ;
--white : # fff ;
--transparent-white : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
--plyr-color-main : var ( --transparent-jet ) ;
--plyr-tab-focus-color : var ( --white ) ;
}
@ media screen and ( min-width : 48rem ) {
: root {
--text-font-size : 1 . 2rem ;
--caption-font-size : 1 . 1rem ;
--footnote-font-size : 1rem ;
--h1-font-size : 2rem ;
--h2-font-size : 1 . 6rem ;
--h3-font-size : 1 . 4rem ;
--icon-size : 3rem ;
--header-bar-vertical-padding : 2rem ;
--header-bar-horizontal-padding : 4rem ;
--footer-bar-vertical-padding : 2rem ;
--footer-bar-horizontal-padding : 4rem ;
--footer-bar-height : calc ( ( var ( --footer-bar-vertical-padding ) * 2 ) + var ( --icon-size ) ) ;
--generic-section-horizontal-padding : 4rem ;
--home-section-horizontal-padding : 4rem ;
}
}
@ -webkit-keyframes expand-outline {
from {
outline-offset : 0 ;
}
to {
outline-offset : 2px ;
}
}
@ keyframes expand-outline {
from {
outline-offset : 0 ;
}
to {
outline-offset : 2px ;
}
}
@ -webkit-keyframes wave-up {
0 % {
top : 0 ;
}
60 % {
top : -0 . 5rem ;
}
100 % {
top : 0 ;
}
}
@ keyframes wave-up {
0 % {
top : 0 ;
}
60 % {
top : -0 . 5rem ;
}
100 % {
top : 0 ;
}
}
@ -webkit-keyframes wave-down {
0 % {
bottom : 0 ;
}
60 % {
bottom : -0 . 5rem ;
}
100 % {
bottom : 0 ;
}
}
@ keyframes wave-down {
0 % {
bottom : 0 ;
}
60 % {
bottom : -0 . 5rem ;
}
100 % {
bottom : 0 ;
}
}
body {
font-family : var ( --text-font-family ) ;
font-size : var ( --text-font-size ) ;
line-height : var ( --text-font-size ) ;
color : var ( --jet ) ;
background-color : var ( --white ) ;
}
h1 ,
h2 ,
h3 {
color : var ( --black ) ;
}
h1 {
font-family : var ( --logo-font-family ) ;
font-size : var ( --h1-font-size ) ;
line-height : var ( --h1-font-size ) ;
}
h2 {
font-family : var ( --text-font-family ) ;
font-size : var ( --h2-font-size ) ;
line-height : var ( --h2-font-size ) ;
margin : 0 0 4rem 0 ;
}
h3 {
font-family : var ( --text-font-family ) ;
font-size : var ( --h3-font-size ) ;
line-height : var ( --h3-font-size ) ;
margin : 2rem 0 1rem 0 ;
}
p {
text-align : justify ;
line-height : var ( --text-line-height ) ;
}
strong {
font-weight : var ( --bold-font-weight ) ;
}
em {
font-style : italic ;
}
a {
color : var ( --jet ) ;
text-decoration : underline ;
border-radius : 2px ;
transition : color 200ms ease-in-out ;
}
a : hover , a : focus , a : active {
color : var ( --black ) ;
}
a : focus-visible {
outline : 1px dashed var ( --black ) ;
outline-offset : 2px ;
-webkit-animation : expand-outline 200ms ease-in-out ;
animation : expand-outline 200ms ease-in-out ;
}
body {
min-height : 100vh ;
overflow-x : hidden ;
display : grid ;
grid : "header" var ( --header-bar-height ) "main" 1fr "footer" auto / 1fr ;
}
. body--hidden-overflow-y {
overflow-y : hidden ;
}
header {
grid-area : header ;
}
main {
grid-area : main ;
}
footer {
grid-area : footer ;
}
. header-bar {
width : 100 % ;
height : var ( --header-bar-height ) ;
margin : auto ;
padding : var ( --header-bar-vertical-padding ) max ( var ( --header-bar-horizontal-padding ) , ( 100vw - var ( --content-max-width ) ) / 2 + var ( --header-bar-horizontal-padding ) ) ;
background-color : var ( --transparent-white ) ;
border-bottom : 1px solid var ( --transparent-white ) ;
display : flex ;
justify-content : space-between ;
align-items : center ;
z-index : 1 ;
transition : height 400ms ease-in-out , border-bottom 400ms ease-in-out ;
}
. header-bar--fixed {
position : fixed ;
--header-bar-vertical-padding : 0 . 5rem ;
--header-bar-height : calc ( ( var ( --header-bar-vertical-padding ) * 2 ) + var ( --icon-size ) ) ;
top : calc ( -1 * var ( --header-bar-height ) ) ;
border-bottom : 1px solid var ( --light-gray ) ;
transition : transform 400ms ease-in-out ;
}
. header-bar--visible {
transform : translateY ( var ( --header-bar-height ) ) ;
}
. header-bar__logo {
width : -webkit-max-content ;
width : -moz-max-content ;
width : max-content ;
transition : transform 400ms ease-in-out ;
transform-origin : left ;
}
. header-bar__logo--small {
transform : scale ( 0 . 8 ) ;
}
. header-bar__logo-link {
text-decoration : none ;
}
. header-bar__nav {
position : relative ;
z-index : 2 ;
}
. header-bar__nav-button {
position : relative ;
z-index : 3 ;
width : var ( --icon-size ) ;
height : var ( --icon-size ) ;
padding : 0 ;
overflow : hidden ;
border : none ;
border-radius : 50 % ;
background-color : var ( --jet ) ;
cursor : pointer ;
display : flex ;
align-items : center ;
transition : transform 200ms ease-in-out , background-color 400ms ease-in-out ;
}
. header-bar__nav-button svg {
width : 100 % ;
height : 100 % ;
padding : 10 % ;
flex-shrink : 0 ;
transition : opacity 400ms ease-in-out , transform 400ms ease-in-out ;
}
. header-bar__nav-button svg : nth-child ( 1 ) {
fill : var ( --white ) ;
opacity : 1 ;
}
. header-bar__nav-button svg : nth-child ( 2 ) {
fill : var ( --black ) ;
opacity : 0 ;
}
. header-bar__nav-button : hover , . header-bar__nav-button : active {
transform : scale ( 1 . 1 ) ;
}
. header-bar__nav-button--custom-focus {
background-color : var ( --white ) ;
}
. header-bar__nav-button--custom-focus svg {
transform : translateX ( -100 % ) ;
}
. header-bar__nav-button--custom-focus svg : nth-child ( 1 ) {
opacity : 0 ;
}
. header-bar__nav-button--custom-focus svg : nth-child ( 2 ) {
opacity : 1 ;
}
. header-bar__nav-menu {
position : fixed ;
z-index : 2 ;
top : 0 ;
left : 100vw ;
min-width : 100vw ;
max-width : 100vw ;
height : 100vh ;
padding : calc ( var ( --header-bar-height ) + 4rem ) max ( 4rem , ( 100vw - var ( --content-max-width ) ) / 2 + 4rem ) 4rem 4rem ;
background-color : var ( --transparent-black ) ;
color : var ( --white ) ;
overflow-x : hidden ;
overflow-y : auto ;
transition : transform 400ms ease-in-out ;
}
. header-bar__nav-menu > li + li {
border-top : 1px solid var ( --spanish-gray ) ;
}
. header-bar__nav-menu > li li {
margin : 0 0 0 2rem ;
border-top : 1px solid var ( --granite-gray ) ;
}
. header-bar__nav-menu > li div {
padding : 1rem 0 ;
transform : translateX ( 100 % ) ;
transition : transform 400ms ease-in-out ;
}
. header-bar__nav-menu > li div a ,
. header-bar__nav-menu > li div span {
color : var ( --light-gray ) ;
}
. header-bar__nav-menu > li div a {
text-decoration : none ;
}
. header-bar__nav-menu > li div a : hover , . header-bar__nav-menu > li div a : focus , . header-bar__nav-menu > li div a : active {
color : var ( --white ) ;
}
. header-bar__nav-menu > li div a : focus-visible {
outline : 1px dashed var ( --white ) ;
}
. header-bar__nav-menu . header-bar__nav-item--active {
list-style : disc outside ;
}
. header-bar__nav-menu . header-bar__nav-item--active a {
color : var ( --white ) ;
}
. header-bar__nav-menu--visible {
transform : translateX ( -100 % ) ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-1 div {
transform : translateX ( 0 ) ;
transition : transform 500ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-2 div {
transform : translateX ( 0 ) ;
transition : transform 600ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-3 div {
transform : translateX ( 0 ) ;
transition : transform 700ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-4 div {
transform : translateX ( 0 ) ;
transition : transform 800ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-5 div {
transform : translateX ( 0 ) ;
transition : transform 900ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-6 div {
transform : translateX ( 0 ) ;
transition : transform 1000ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-7 div {
transform : translateX ( 0 ) ;
transition : transform 1100ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-8 div {
transform : translateX ( 0 ) ;
transition : transform 1200ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-9 div {
transform : translateX ( 0 ) ;
transition : transform 1300ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-10 div {
transform : translateX ( 0 ) ;
transition : transform 1400ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-11 div {
transform : translateX ( 0 ) ;
transition : transform 1500ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-12 div {
transform : translateX ( 0 ) ;
transition : transform 1600ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-13 div {
transform : translateX ( 0 ) ;
transition : transform 1700ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-14 div {
transform : translateX ( 0 ) ;
transition : transform 1800ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-15 div {
transform : translateX ( 0 ) ;
transition : transform 1900ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-16 div {
transform : translateX ( 0 ) ;
transition : transform 2000ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-17 div {
transform : translateX ( 0 ) ;
transition : transform 2100ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-18 div {
transform : translateX ( 0 ) ;
transition : transform 2200ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-19 div {
transform : translateX ( 0 ) ;
transition : transform 2300ms ease-in-out ;
}
. header-bar__nav-menu--visible . header-bar__nav-item-20 div {
transform : translateX ( 0 ) ;
transition : transform 2400ms ease-in-out ;
}
. header-bar__nav-overlay {
position : fixed ;
z-index : 1 ;
top : 0 ;
left : 0 ;
width : 100vw ;
height : 100vh ;
background-color : var ( --black ) ;
opacity : 0 ;
pointer-events : none ;
will-change : opacity ;
transition : opacity 400ms ease-in-out ;
}
. header-bar__nav-overlay--visible {
opacity : 0 . 2 ;
pointer-events : auto ;
cursor : pointer ;
}
@ media screen and ( min-width : 48rem ) {
. header-bar__nav-menu {
min-width : 50vw ;
}
}
@ media screen and ( min-width : 62rem ) {
. header-bar__nav-menu {
min-width : 25vw ;
}
}
. home-section {
max-width : var ( --content-max-width ) ;
min-height : var ( --home-section-min-height ) ;
margin : auto ;
padding : var ( --home-section-vertical-padding ) var ( --home-section-horizontal-padding ) ;
display : flex ;
justify-content : center ;
align-items : center ;
}
. home__nav {
height : 100 % ;
display : grid ;
grid : "top-left top top-right" var ( --home-nav-item-size ) "left center right" auto "bottom-left bottom bottom-right" var ( --home-nav-item-size ) / var ( --home-nav-item-size ) auto var ( --home-nav-item-size ) ;
place-content : center center ;
gap : var ( --home-nav-gap ) ;
line-height : 0 ;
}
. home__nav-image {
grid-area : center ;
}
. home__nav-image img {
min-width : 12rem ;
max-width : min ( 100 % , 2500px ) ;
min-height : 12rem ;
max-height : var ( --home-nav-image-max-height ) ;
}
. home__nav--2-items . home__nav-item-1 {
grid-area : top-left ;
place-self : end end ;
transform : rotate ( -45deg ) translateY ( var ( --home-nav-item-translation ) ) ;
}
. home__nav--2-items . home__nav-item-2 {
grid-area : top-right ;
place-self : end start ;
transform : rotate ( 45deg ) translateY ( var ( --home-nav-item-translation ) ) ;
}
. home__nav--3-items . home__nav-item-1 {
grid-area : top-left ;
place-self : end end ;
transform : rotate ( -45deg ) translateY ( var ( --home-nav-item-translation ) ) ;
}
. home__nav--3-items . home__nav-item-2 {
grid-area : top-right ;
place-self : end start ;
transform : rotate ( 45deg ) translateY ( var ( --home-nav-item-translation ) ) ;
}
. home__nav--3-items . home__nav-item-3 {
grid-area : bottom ;
place-self : start center ;
}
. home__nav--4-items . home__nav-item-1 {
grid-area : top-left ;
place-self : end end ;
transform : rotate ( -45deg ) translateY ( var ( --home-nav-item-translation ) ) ;
}
. home__nav--4-items . home__nav-item-2 {
grid-area : top-right ;
place-self : end start ;
transform : rotate ( 45deg ) translateY ( var ( --home-nav-item-translation ) ) ;
}
. home__nav--4-items . home__nav-item-3 {
grid-area : bottom-left ;
place-self : start end ;
transform : rotate ( 45deg ) translateY ( calc ( var ( --home-nav-item-translation ) * -1 ) ) ;
}
. home__nav--4-items . home__nav-item-4 {
grid-area : bottom-right ;
place-self : start start ;
transform : rotate ( -45deg ) translateY ( calc ( var ( --home-nav-item-translation ) * -1 ) ) ;
}
. home__nav-link {
color : var ( --black ) ;
font-size : var ( --h3-font-size ) ;
text-decoration : none ;
opacity : 0 ;
transition : opacity 600ms ease-in-out ;
}
. home__nav-link div {
opacity : 0 ;
transition : opacity 600ms ease-in-out ;
}
. home__nav-link--visible {
opacity : 1 ;
}
. home__nav-link--visible div {
opacity : 1 ;
}
. home__nav-letter--wave-up {
-webkit-animation : wave-up 600ms ease-in-out ;
animation : wave-up 600ms ease-in-out ;
}
. home__nav-letter--wave-down {
-webkit-animation : wave-down 600ms ease-in-out ;
animation : wave-down 600ms ease-in-out ;
}
. gallery-section ,
. biography-section {
max-width : var ( --content-max-width ) ;
margin : auto ;
padding : var ( --generic-section-vertical-padding ) var ( --generic-section-horizontal-padding ) ;
}
. gallery__title ,
. biography__title {
text-align : center ;
}
. gallery__introduction ,
. biography__presentation {
max-width : var ( --text-max-width ) ;
margin : auto ;
}
. gallery__introduction h3 : nth-child ( 1 ) ,
. biography__presentation h3 : nth-child ( 1 ) {
margin : 0 0 1rem 0 ;
}
. gallery__introduction p + p ,
. gallery__introduction p + ul ,
. biography__presentation p + p ,
. biography__presentation p + ul {
margin : 1rem 0 0 0 ;
}
. gallery__introduction ul ,
. biography__presentation ul {
line-height : var ( --text-line-height ) ;
}
. gallery__introduction ul + ul ,
. gallery__introduction ul + p ,
. biography__presentation ul + ul ,
. biography__presentation ul + p {
margin : 1rem 0 0 0 ;
}
. gallery__introduction ul li ,
. biography__presentation ul li {
position : relative ;
padding : 0 0 0 1rem ;
}
. gallery__introduction ul li + li ,
. biography__presentation ul li + li {
margin : 1rem 0 0 0 ;
}
. gallery__introduction ul li : before ,
. biography__presentation ul li : before {
content : "•" ;
position : absolute ;
top : 0 ;
left : 0 ;
}
. gallery__artwork {
display : table ;
max-width : min ( 1280px , 100 % ) ;
margin : auto ;
}
. gallery__artwork + . gallery__artwork {
margin : 2rem auto 0 auto ;
}
. gallery__artwork . gallery__image ,
. gallery__artwork . gallery__video {
display : block ;
max-height : 80vh ;
}
. gallery__artwork . gallery__video--full-screen {
max-height : initial ;
}
. gallery__artwork figcaption {
display : table-caption ;
caption-side : bottom ;
margin : 1rem auto 0 auto ;
font-size : var ( --caption-font-size ) ;
line-height : var ( --text-line-height ) ;
}
@ media screen and ( min-width : 48rem ) {
. gallery__artwork + . gallery__artwork {
margin : 3rem auto 0 auto ;
}
}
. error-section {
max-width : var ( --content-max-width ) ;
margin : auto ;
padding : var ( --generic-section-vertical-padding ) var ( --generic-section-horizontal-padding ) ;
}
. error__title {
text-align : center ;
}
. error__message {
max-width : var ( --text-max-width ) ;
margin : auto ;
text-align : center ;
}
. error__button {
margin : 1rem 0 0 0 ;
text-align : center ;
}
. error__button a {
display : inline-block ;
padding : 0 . 8rem ;
border-radius : 10px ;
color : var ( --white ) ;
background-color : var ( --jet ) ;
text-decoration : none ;
font-weight : var ( --semi-bold-font-weight ) ;
transition : transform 200ms ease-in-out ;
}
. error__button a : hover , . error__button a : focus , . error__button a : active {
transform : scale ( 1 . 1 ) ;
}
. footer-bar {
max-width : var ( --content-max-width ) ;
height : var ( --footer-bar-height ) ;
margin : auto ;
padding : var ( --footer-bar-vertical-padding ) var ( --footer-bar-horizontal-padding ) ;
display : flex ;
flex-direction : column ;
align-items : center ;
}
. footer-bar__social {
display : flex ;
align-items : center ;
}
. footer-bar__social a {
width : var ( --icon-size ) ;
height : var ( --icon-size ) ;
border-radius : 50 % ;
background-color : var ( --jet ) ;
display : flex ;
justify-content : center ;
align-items : center ;
transition : transform 200ms ease-in-out ;
}
. footer-bar__social a + a {
margin : 0 0 0 1rem ;
}
. footer-bar__social a svg {
fill : var ( --white ) ;
}
. footer-bar__social a : hover , . footer-bar__social a : focus , . footer-bar__social a : active {
transform : scale ( 1 . 1 ) ;
}
. footer-bar__social a . footer-bar__instagram-button svg {
width : 55 % ;
height : 55 % ;
}
. footer-bar__social a . footer-bar__email-button svg {
width : 70 % ;
height : 70 % ;
}
. footer-bar__copyright {
font-size : var ( --footnote-font-size ) ;
margin : 1rem 0 0 0 ;
}
@ media screen and ( min-width : 48rem ) {
. footer-bar {
flex-direction : row ;
justify-content : space-between ;
align-items : flex-end ;
}
. footer-bar__social {
order : 2 ;
}
. footer-bar__copyright {
order : 1 ;
margin : 0 ;
}
}
/ * # sourceMappingURL = data : application / json ; charset = utf-8 ; base64 , eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJtYXBwaW5ncyI6Ijs7O0FBQUEsZ0JBQWdCO0FDQWhCOzs4RUFBQTtBQUlBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXVCQztFQUNBO0FEQ0Q7O0FDRUE7Ozs7OztFQU1DO0VBQ0E7QURDRDs7QUNFQTtFQUNDO0FEQ0Q7O0FDRUE7OztFQUdDO0FEQ0Q7O0FDRUE7RUFDQztBRENEOztBQ0VBO0VBQ0M7QURDRDs7QUNFQTs7RUFFQztFQUNBO0FEQ0Q7O0FDRUE7RUFDQztBRENEOztBQ0VBO0VBQ0M7RUFDQTtBRENEOztBQ0VBOztFQUVDO0FEQ0Q7O0FFekVBO0VBQ0U7SUFDRTtFRjRFRjtBQUNGOztBRS9FQTtFQUNFO0lBQ0U7RUY0RUY7QUFDRjtBRXpFQTtFQUNFO0lBQ0U7SUFDQTtFRjJFRjtFRXhFQTtJQUNFO0lBQ0E7RUYwRUY7QUFDRjtBRW5GQTtFQUNFO0lBQ0U7SUFDQTtFRjJFRjtFRXhFQTtJQUNFO0lBQ0E7RUYwRUY7QUFDRjtBRXZFQTtFQUNFO0lBQ0U7RUZ5RUY7RUV0RUE7SUFDRTtFRndFRjtBQUNGO0FFL0VBO0VBQ0U7SUFDRTtFRnlFRjtFRXRFQTtJQUNFO0VGd0VGO0FBQ0Y7QUdoR0E7RUNVSTtFQUNBO0VEUkY7RUFDQTtFQUNBO0VBQ0E7RUFDQSw2Q0VSaUI7RUZTakI7RUFDQSxpREVGeUI7RUZHekIseUNFRGlCO0VGRWpCO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtBSGtHRjtBRy9GRTs7O0VBR0U7RUFDQTtFQUNBO0FIaUdKO0FHOUZFO0VBQ0U7RUFDQTtFQUNBO0FIZ0dKO0FHNUZFO0VBQ0U7QUg4Rko7O0FHdkZFO0VBQ0U7QUgwRko7QUd4Rkk7OztFQUdFO0FIMEZOOztBR2xGSTs7OztFQUlFO0FIcUZOOztBTWxKQTtFQUNFLCtEQ0RzQjtFREV0QjtFQUNBLHlDQ0ZzQjtFREd0QiwyQ0RHcUI7RUNGckI7RUFDQTtBTnFKRjs7QVExSkE7RUFDRTtBUjZKRjs7QVExSkE7RUFDRTtVQUFBO0VBQ0E7RUFDQTtFQUNBLDRDSFBxQjtFR1FyQjtFQUNBLDBDQ1ZxQjtFRFdyQjtFQUNBO0VBQ0E7RUFDQTtBUjZKRjtBUTNKRTtFQUNFO0FSNkpKO0FRMUpFO0VBaEJGO0lBaUJJLDJDSHJCa0I7SUdzQmxCO0VSNkpGO0FBQ0Y7QVEzSkU7RUFyQkY7SUFzQkksNENIeEJtQjtFTHNMckI7QUFDRjs7QVEzSkE7RUFDRTtBUjhKRjs7QVExSkE7RUFDRTtBUjZKRjs7QVExSkE7RUFDRSwrREV6Q3lCO0VGMEN6QjtFQUNBO1VBQUE7RUFDQSw0Q0UzQ3lCO0VGNEN6QjtFQUNBO0VBQ0E7QVI2SkY7QVExSkU7RUFDRTtBUjRKSjs7QVcvTUE7RUFDRTtFQUNBO0VBQ0EsOENGQ29CO0VFQXBCO0VBQ0E7RUFDQTtFQUNBO0VBQ0Esc0RGTnFCO0VFT3JCO0VBQ0E7QVhrTkY7QVdoTkU7RUFDRTtFQUNBO0VBQ0EsMkNGZnFCO0VFZ0JyQjtFQUNBLDBDRmpCcUI7QVRtT3pCO0FXOU1FO0VBQ0U7QVhnTko7QVc1TUU7RVB2QkE7RUFDQTtBSnNPRjs7QVcxTUE7RUFDRTtBWDZNRjtBVzNNRTtFQUVFO0FYNE1KOztBV3ZNQTs7OztFQUlFO0FYME1GOztBWXZQQTtFQUNFO0FaMFBGOztBWXRQQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0FaeVBGO0FZdlBFO0VBQ0U7RUFDQTtBWnlQSjtBWXJQRTtFQUNFO0FadVBKO0FZclBJO0VBQ0U7RUFDQTtBWnVQTjtBWXBQSTtFQUNFO0Fac1BOO0FZblBJO0VBQ0U7QVpxUE47QVlsUEk7RUFHRTtBWmtQTjtBWTdPRTtFQUNFO0FaK09KOztBWTFPQTs7OztFQUlFO0FaNk9GOztBWTFPQTs7OztFQUlFO0FaNk9GOztBYXhTQTtFQUNFO0VBQ0E7QWIyU0Y7QWF4U0U7RUFDRTtBYjBTSjtBYXRTSTtFQUNFO0Fid1NOO0FhcFNJO0VBQ0U7QWJzU047QWFqU0U7RUFDRTtVQUFBO0VBQ0EsaUVDdkJtQjtFRHdCbkI7RUFDQTtFQUNBLGtFQ3ZCZTtFRHdCZixvREN6QmM7RUQwQmQsMkNSM0JrQjtFUTRCbEI7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0FibVNKO0FhalNJO0VBQ0U7RUFDQTtBYm1TTjtBYS9SSTtFQUNFO0VBQ0EsdUVDNUNpQjtFRDZDakI7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0FiaVNOO0FhOVJJO0VBQ0Usc0RKcERpQjtBVG9WdkI7QWE3Ukk7O0VBRUU7QWIrUk47QWE3Uk07O0VBQ0U7QWJnU1I7QWEzUkk7RUFDRTtFQUNBLG9EQ25FWTtFRG9FWjtFQUNBLHdFUmpFZ0I7RVFrRWhCO0VBQ0E7S0FBQTtVQUFBO0VBQ0E7QWI2Uk47QWEzUk07RUFDRTtFQUNBO0VBQ0E7QWI2UlI7QWExUk07RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0FiNFJSO0FhelJNO0VBQ0U7QWIyUlI7QWF6UlE7RUFDRSxzRUN4Rm1CO0VEeUZuQjtBYjJSVjtBYXhSUTtFQUVFO0FieVJWO0FhclJNO0VBQ0UsaURSakdtQjtFUWtHbkIscURKeEdlO0VJeUdmO0VBQ0E7RUFDQTtFQUNBO0FidVJSO0FhclJRO0VBQ0UsdUVDM0dtQjtFRDRHbkI7QWJ1UlY7QWFwUlE7RUFDRSxxRUMvR29CO0VEZ0hwQjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7QWJzUlY7QWFuUlE7RUFFRTtBYm9SVjtBYS9RSTtFQUNFLDJESnhJaUI7QVR5WnZCO0FhL1FNO0VBRUU7QWJnUlI7QWE3UU07RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0EsK0NKdEplO0VJdUpmO0VBQ0E7QWIrUVI7QWE1UU07RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7QWI4UVI7QWExUVE7RUFDRSxpSUpySytCO0FUaWJ6QztBYXpRUTtFQUNFO0VBQ0E7QWIyUVY7QWF2UU07RUFFRTtBYndRUjtBYW5RSTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0FicVFOOztBZXRjQTtFQUNFO0tBQUE7VUFBQTtFQUNBO0VBQ0E7RUFDQTtFQUdBLGdIQ1MyQjtFRFIzQjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtBZnVjRjtBZXJjRTtFWEdBO0VBQ0E7RUFDQTtFQUNBLDJDWVR3QjtFWlV4QjtFQUFBO0VBQ0E7VUFBQTtFV0xFO0FmMmNKO0FleGNFO0VYTUEsb0RZMUI0QjtFWjJCNUI7RUFDQTtFQUNBLDZHWTVCd0I7RVo2QnhCLDRDWS9Cd0I7RVpnQ3hCO0VBQ0E7RUFBQTtFQUNBLDJDWWxDd0I7RUR3QnRCO1VBQUE7RUFDQTtBZmdkSjtBZTVjRTtFWFhBO0VBQ0E7RUFDQTtFQUNBLDJDWVR3QjtFWlV4QjtFQUFBO0VBQ0E7T0FBQTtBSjBkRjtBZWhkRTtFWE5BLG9EWTFCNEI7RVoyQjVCO0VBQ0E7RUFDQSw2R1k1QndCO0VaNkJ4Qiw0Q1kvQndCO0VaZ0N4QjtFQUNBO0V