/* 
Theme Name:Ryhmäteatteri 
Theme URI: https://www.ryhmateatteri.fi
Description: Ryhmäteatteri custom theme
Template: twentytwentyfour 
Theme Author: Taikalehto
Author URI: http://taikalehto.fi
Version: 1.0.0
License: GNU General Public License or later
*/

/*

VARIABLES

*/

:root {
  --red: #e10f1a;
  --darkred: #85090f;
  --black: rgb(12,12,12);
  --darkgrey: #222;
  --grey: #444;
  --white: #f5f5f5;
  --text: #ccc;
  --blackshadow: rgba(12,12,12,0.7);
  --greyshadow: rgba(12,12,12,0.3);
  --contentbg: rgba(12,12,12,0.5);

  --maxwidth: 1500px;
  --maxcontentwidth: 1200px;
  --maxpagewidth: 900px;
}


/* RESET */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, landing, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, landing, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {	
	margin-bottom: 20px;
}

ul li {
	list-style-type: disc;
	margin-left: 20px;
	margin-bottom: 8px;
}

ol {
   list-style: none;
   counter-reset: item;
}

ol li {
   counter-increment: item;
}


ol li:before {
   content: counter(item);

   margin-left: -34px;
   display: inline-block;
   width: 34px;
   position: relative;
   text-align: center;
   top: 3px;

	font-family: "Outfit", sans-serif;
	line-height: 100%;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.1px;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: var(--white);	
}

ol li {
	margin-left: 40px;
	margin-bottom: 8px;
}

ul li::marker,
ol li::marker {

}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;	border-spacing: 0;
}

img {
	display: block;
}

html, body {
	-webkit-text-size-adjust: none;	

	color: var(--red);
	background-color: var(--black);
}

::selection {
  background-color: var(--red); 
  color: var(--white);
}
::-moz-selection {
  background-color: var(--red); 
  color: var(--white);
}

a {

}

img {
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
    -webkit-user-drag: none;
    user-drag: none;

    width: 100%;	
    height: auto;
}

.reset {
	clear: both;
}

.gap {
	height: 40px;
}

.floatLeft {
	float:  left;
}

.floatRight {
	float:  right;
}

.alignLeft {
	text-align: left;
}

.alignCenter {
	text-align: center;
}

.alignRight {
	text-align: right;
}

#stageWidth {
	position: fixed;
	top: -1px;
	left: 0px;
	z-index: 999;
	width: 100%;	
	height: 1px;
	background-color: black;
	visibility: hidden;
	pointer-events: none;
}

#stageHeight {
	position: fixed;
	top: 0px;
	left: -1px;
	z-index: 998;
	width: 1px;	
	height: 100%;
	background-color: yellow;
	visibility: hidden;
	pointer-events: none;
}

/*

TYPOGRAPHY

*/

body {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;

	font-size: 16px;
	line-height: 150%;

	color: var(--text);
}

html::-webkit-scrollbar {
  width: 10px;               /* width of the entire scrollbar */
}

html::-webkit-scrollbar-track {
  background: var(--black);        /* color of the tracking area */
}

html::-webkit-scrollbar-thumb {
  background-color: var(--red);    /* color of the scroll thumb */
  border-radius: 0px;       /* roundness of the scroll thumb */
  border: 1px solid var(--black);  /* creates padding around scroll thumb */
}

h1, h2, h3, h4, h5, h6, .cmplz-subtitle {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	line-height: 120%;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: var(--white);
}

h1 {
	font-weight: 800;
	font-size: 50px;
	line-height: 110%;
	letter-spacing: -0.6px;
	margin-top: 25px;
	margin-bottom: 25px;
}

h2 {
	font-weight: 800;
	font-size: 36px;
	letter-spacing: -0.4px;
	margin-top: 36px;
	margin-bottom: 18px;
}

h3 {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.2px;
	margin-top: 24px;
	margin-bottom: 12px;
}

h4,
.cmplz-subtitle {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.1px;
	margin-top: 18px;
	margin-bottom: 6px;
}

h5 {
	font-size: 16px;
	letter-spacing: -0.1px;
}

h6 {
	font-size: 14px;
	letter-spacing: -0.1px;
}


a {
	text-decoration: underline;
	font-weight: 700;

	color: var(--white);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	

	transition: color 0.15s ease-in-out;
}

.btnNavi a,
.btnDropdown a, 
.btnMenu a,
.btnMenuSub a,
.calendarItem a,
.play a {
	text-decoration: none;
}

a:hover {
	color: var(--red);
}

p, li, div, i, em, select, blockquote {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 145%;
	color: var(--text);
	letter-spacing: -0.15px;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;		
}

blockquote p,
blockquote em {
	font-family: "Spectral", serif;
	line-height: 125%;
	font-weight: 400;
	font-size: 19px;
	font-style: italic;
	box-sizing: border-box;
	color: var(--white);
}

blockquote p {
	padding: 0 0px;	
}

p, blockquote {
	margin-bottom: 22px;
	word-wrap: break-word;
}

blockquote cite {
	position: relative;
	top: -10px;
	padding: 0 0px;
	color: var(--text);
	//font-style: italic;
}

em {
	font-style: italic;
}

strong {
	font-weight: 700;
}

input, textarea {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	color: #383e40;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;		
}

.noMarginTop {
	margin-top: 0px;
}

/*

STRUCTURE

*/

html, body {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

body {
	position: relative;
}

.wrapper {
	position: relative;

	opacity: 1;

	-webkit-transition: opacity 0.25s ease-in-out;
 	transition: opacity 0.25s ease-in-out;

 	width:  100%;
 	min-height: 100%;

 	box-sizing: border-box;
}

.debug {
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 5000;
	background-color: var(--darkgrey);
	color: #0f0;
	font-size: 10px;
	box-sizing: border-box;
	padding: 10px;
	width: 300px;
	height: 600px;
	overflow: auto;
	display: none;
}

.fullWidth {
	position: relative;
	width: 100%;
}

.maxWidth {
	position: relative;
	width: 100%;
	max-width: var(--maxwidth);
	margin: 0 auto;
	box-sizing: border-box;
}

main {
	position: relative;
	z-index: 1;
	width:  100%;
	max-width:  var(--maxwidth);
	min-height: 500px;
	margin:  0 auto;
	box-sizing: border-box;
	padding: 0;
	background-color: var(--black);
}

.backgroundHolder {
	position: relative;
	width: 100%;
	height: 500px;
	max-width: var(--maxwidth);
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: -50px;
}

.background {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	opacity: 1;

	clip-path: circle(0px at 50% 250px);
}

.backgroundImage {
	position: relative;
	width: var(--maxwidth);
	height: 500px;
	left: 50%;
	top: 0;
	transform: translateX(-50%);

	background-image: url("images/curtain_bg.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
}

.backgroundDefault {
	clip-path: unset;
	opacity: 0;
	height: 100vh;
}

.backgroundDefault .backgroundImage {
	height: 100vh;
}

.container {
	position: relative;
	width:  100%;
}

.grid {
 	width: 6%;
	height:  100px;
	background-color: var(--white);
	float:  left;
}

.gutter {
	width: 2.5%;
	height:  100px;
	float:  left;
	background-color: #ddd;
}

.wp-block-columns {
	display: flex;
	flex-direction: row;
}

.wp-block-column {
	display: block;
	box-sizing: border-box;
	padding: 0 2.5%;
	flex: 1 1 0px;
}

.col {
	position: relative;
	box-sizing: border-box;
	float:  left;
	margin-right:  2.5%;
	min-height: 1px;
}

.lastcol {
	margin-right:  0;
}

.emptycol {
	content: "empty";
	background-color: #ddd;
	opacity:  0;
}

.col1 {
	width: 6%;
}

.col2 {
	width: 14.5%;
}

.col3 {
	width: 23%;
}

.col4 {
	width: 31.5%;
}

.col5 {
	width: 40%;
}

.col6 {
	width: 48.5%;
}

.col7 {
	width: 57%;
}

.col8 {
	width: 65.5%;
}

.col9 {
	width: 74%;
}

.col10 {
	width: 82.5%;
}

.col11 {
	width: 91%;
}

.col12 {
	width: 100%;
}

.bigLink {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.2px;
	color:  #34aa2a;
}

.midLink {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.1px;
}

button {
	border: 0px solid;
	background-color: #fff;
}

/*

NAVI

*/

/*

NAVI

*/

.loadingAnim {
	position: absolute;
	top: 15px;
	z-index: 2000;
	width: 100%;
	height: 40px;
	display: none;
}

.loadingAnim img {
	position: relative;
	left: calc(50vw - 25px);
	top: 0;
	width: 40px;
	height: 40px;
}

header {
	width: 100%;
	max-width: var(--maxwidth);
	position: relative;
	z-index: 600;
	background-color: var(--black);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px 20px 20px 20px;
}

.headerInfo,
.footerInfo {
	position: relative;
	box-sizing: border-box;
	display: table;
	margin: 0px auto;
}

.btnHeader,
.btnFooter {
	position: relative;
	display: block;
	top: 20px;
	list-style-type: none;
	float: left;
	box-sizing: border-box;
	height: 30px;
	margin: 0;
	margin-left: 10px;
	opacity: 0;
}

.headerInfo img,
.footerInfo img {
	height: 22px;
	width: auto;
	margin: 0;
	position: relative;
	top: 4px;
	margin-left: -4px;
	margin-right: 6px;
	display: inline-block;
}

.headerInfo a,
.footerInfo a {
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	line-height: 100%;
	font-size: 15px;
	color: var(--white);
	margin: 0;
}

.btnHeaderDefault,
.btnFooterDefault {
	position: relative;
	display: block;
	align-items: center;
	box-sizing: border-box;
	height: 30px;
	padding:  0 12px;
	background-color: var(--black);
	transform: translateY(0%) rotateX(0deg);
	transition: 0.2s transform ease-in-out;
}

.btnHeaderHover,
.btnFooterHover {
	position: relative;
	display: block;
	align-items: center;
	box-sizing: border-box;
	height: 30px;
	padding: 0px 12px;
	margin-top: -30px;
	background-color: var(--red);
	transform: translateY(50%) rotateX(90deg);
	transition: 0.2s transform ease-in-out;	
}

.btnHeaderDefault p,
.btnHeaderHover p,
.btnFooterDefault p,
.btnFooterHover p {
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	line-height: 120%;
	font-size: 15px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: inline-block;
	position: relative;
	top: -2px;
	color: var(--white);
}

.btnHeader:hover .btnHeaderDefault,
.btnFooter:hover .btnFooterDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnHeader:hover .btnHeaderHover,
.btnFooter:hover .btnFooterHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnHeader:focus-within .btnHeaderDefault,
.btnFooter:focus-within .btnFooterDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnHeader:focus-within .btnHeaderHover,
.btnFooter:focus-within .btnFooterHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnHeader a:focus-visible,
.btnFooter a:focus-visible {
	outline: 0px solid white;
}

nav {
	position: relative;
	z-index:  500;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 60px;

	-webkit-box-shadow: 0px 0px 30px 0px var(--blackshadow);
	box-shadow: 0px 0px 30px 0px var(--blackshadow);
}

.navi,
.naviBlock {
	position: relative;
	display: block;
	box-sizing: border-box;
	max-width: var(--maxwidth);
	height: 60px;
	margin: 0 auto;
	padding: 0;
	background-color: var(--darkgrey);
	overflow: hidden;
	width: 282px;
}

.naviBlock {
	width: 100%;
	height: 0px;
}

.naviLogo {
	position: relative;
	z-index: 505;
	height: 60px;
	width: auto;
	box-sizing: border-box;
	float: left;
	padding: 0px;
}

.naviLogo img {
	height: 60px;
	width: auto;
}


.naviContainer,
.btnToggleMenu {
	visibility: hidden;
	margin: 0;
}

.btnNaviLogo {
	position: relative;
	float:  left;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: block;
	height: 60px;
	cursor: pointer;
	margin-right: 24px;
}

.btnNaviLogoDefault {
	position: relative;
	display: block;
	align-items: center;
	box-sizing: border-box;
	height: 60px;
	padding: 0;
	background-color: var(--darkgrey);
	color: var(--white);
	transform: translateY(0%) rotateX(0deg);
	transition: 0.2s transform ease-in-out;
}

.btnNaviLogoHover {
	position: relative;
	display: block;
	align-items: center;
	box-sizing: border-box;
	height: 60px;
	padding: 0px;
	margin-top: -60px;
	background-color: var(--red);
	transform: translateY(50%) rotateX(90deg);
	transition: 0.2s transform ease-in-out;
}

.btnNaviLogo:hover .btnNaviLogoDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnNaviLogo:hover .btnNaviLogoHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnNaviLogo:focus-within .btnNaviLogoDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnNaviLogo:focus-within .btnNaviLogoHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnNaviLogo a:focus-visible {
	outline: 0px solid white;
}

.naviFiller {
	position: relative;
	z-index: 502;
	float: left;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background-color: var(--darkgrey);
	width: 300px;
	height: 60px;
}

.btnNavi {
	position: relative;
	z-index: 501;
	float:  left;
	box-sizing: border-box;
	margin: 0;
	margin-left: -1px;
	padding: 0;
	display: block;
	height: 60px;
	cursor: pointer;
}

.btnNaviDefault {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 60px;
	padding:  0 24px;
	background-color: var(--darkgrey);
	transform: translateY(0%) rotateX(0deg);
	transition: 0.2s transform ease-in-out;
}

.btnNaviHover {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 60px;
	padding: 0px 24px;
	margin-top: -60px;
	background-color: var(--red);
	transform: translateY(50%) rotateX(90deg);
	transition: 0.2s transform ease-in-out;
}

.btnNaviDefault p,
.btnNaviHover p,
.btnNaviDown p,
.btnDropdownDefault p,
.btnDropdownHover p,
.btnDropdownDown p {
	text-transform: uppercase;
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	line-height: 120%;
	font-size: 15px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--white);
}

.btnSome {
	box-sizing: border-box;
	width: 60px;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 503;
}

#btnNaviFacebook {
	right: 60px;
}

.btnSome .btnNaviDefault,
.btnSome .btnNaviHover {
	padding: 0;
}

.dropdown {
	position: absolute;
	z-index: -1;
	box-sizing: border-box;
	width:  250px;
	top:  60px;
	opacity: 1;
	transition: top 0.3s ease-in-out;
	display: block;
	transform: translateY(-150%);
	transition: 0s transform ease-in-out;
	background-color: var(--darkgrey);
	-webkit-box-shadow: 0px 0px 30px 0px var(--blackshadow);
	box-shadow: 0px 0px 30px 0px var(--blackshadow);
}

.btnDropdown {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	height: 60px;
	cursor: pointer;
	overflow: hidden;
}

.btnDropdownDefault {
	position: relative;
	top: 0px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 250px;
	height: 60px;
	padding:  0px 24px;

	background-color: var(--darkgrey);
	color: var(--white);
	transform: translateY(0%) rotateX(0deg);
	transition: 0.2s transform ease-in-out;
}

.btnDropdownHover {
	position: relative;
	top: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;	
	width: 250px;
	height: 60px;
	padding:  0px 24px;
	margin-top: -60px;
	background-color: var(--red);
	transform: translateY(50%) rotateX(90deg);
	transition: 0.2s transform ease-in-out;
}

.btnNavi:hover .btnNaviDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnNavi:hover .btnNaviHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnNavi:hover .dropdown {
	transform: translateY(0%) rotateX(0deg);
}

.btnNavi:focus-within .btnNaviDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnNavi:focus-within .btnNaviHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnNavi:focus-within .dropdown {
	transform: translateY(0%) rotateX(0deg);
}

.btnDropdown:hover .btnDropdownDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnDropdown:hover .btnDropdownHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnDropdown:focus-within .btnDropdownDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnDropdown:focus-within .btnDropdownHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnNavi a:focus-visible {
	outline: 0px solid white;
}
.btnDropdown a:focus-visible {
	outline: 0px solid white;
}

.btnToggleMenuHolder {
	position: absolute;
	top: 0px;
	right: 0px;
	width:  60px;
	height:  60px;
	overflow: hidden;
	display: none;
}

.btnToggleMenu {
	position: relative;
	z-index: 504;
	top:  0px;
	left:  0px;
	width:  60px;
	height:  60px;
	cursor: pointer;
	background-color: var(--red);
}

#btnToggleMenuLine1,
#btnToggleMenuLine2,
#btnToggleMenuLine3 {
	position: absolute;
	width:  26px;
	height:  4px;
	background-color: #fff;
}

#btnToggleMenuLine1 {
	left:  17px;
	top:  19px;
}

#btnToggleMenuLine2 {
	left:  17px;
	top:  28px;
}

#btnToggleMenuLine3 {
	left:  17px;
	top:  37px;
}

.menu {
	position: relative;
	z-index: -1;
	width:  100%;
	height: calc(100vh - 60px);
	overflow-y: auto !important;
	background-color: var(--darkgrey);
	box-sizing: border-box;
	border-top: 1px solid var(--black);
	display: none;
}

.menu::-webkit-scrollbar {
  width: 10px;
}

.menu::-webkit-scrollbar-track {
  background: var(--black);
}

.menu::-webkit-scrollbar-thumb {
  background-color: var(--red);
  border-radius: 0px;
  border: 1px solid var(--black);
}

.menuItems {
	box-sizing: border-box;
	padding: 0px 20px 100px 20px;
	text-align: center;
}

.btnMenu,
.btnMenuSub {
	display: block;
	box-sizing: border-box;
	margin:  0 auto;
	margin-bottom: 0px;
	cursor: pointer;
	text-align: center;
}

.btnMenu {
	padding-top: 12px;
	margin-top: 12px;
	border-top: 1px solid var(--black);
}

.btnMenu:first-of-type {
	border-top: 0px solid;
}

.btnMenu:after {
	content:  "\A";
}

.btnMenu p {
	text-transform: uppercase;
	font-family:  "Outfit", sans-serif;
	font-weight:  600;
	font-size: 18px;
	margin:  0;
	box-sizing: border-box;
	padding:  8px 24px;
	color: var(--white);
}

.btnMenuSub p {
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	font-size: 16px;
	margin:  0;
	box-sizing: border-box;
	padding:  12px 24px;
	color: var(--white);
}

/*

SIVUTYYLIT

*/

.pageTitleCentered {
	position: relative;
	z-index: 10;
	width: 100%;
	text-align: center;
	opacity: 0;
	top: -20px;
	box-sizing: border-box;
	padding: 10px 5%;
	max-width: 1000px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding-top: 25px;
}

.pageTitleShadow {
	text-shadow: 0px 0px 20px var(--greyshadow);
}

.historiikkiContent {
	width: 100%;
	padding: 0 5%;
	box-sizing: border-box;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;

	position: relative;
	opacity: 0;
	top: -20px;	
}

.viewer {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 600;
	box-sizing: border-box;
	width: 100%;
	height: 100%;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;	
  //background-color: rgba(12,12,12,0.95);
  background-color: var(--black);
  display: none;
}

.images {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--maxwidth);
	height: calc(100% - 110px);
	margin: 0 auto;
	margin-top: 10px;
	overflow: hidden;
	cursor: pointer;
}

.playImage {
	position: absolute;
	left: 0;
	top: 0px;
	display: none;
	opacity: 0;
}

.thumbViewer {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	height: 80px;

	margin: 0 auto;
	margin-top: 10px;
	overflow: hidden;
	background-color: var(--black);
}

.thumbs {
	position: absolute;
	left: 0;
}

.btnNextImage,
.btnPrevImage,
.btnTogglePages,
.btnClosePlay {
	position: absolute;
	top: 0px;
	box-sizing: border-box;
	width: 50px;
	height: 80px;
	background-color: var(--red);
	transition: 0.15s background-color ease-in-out;
	cursor: pointer;
}

.btnTogglePages {
	width: 51px;
	left: 0px;
	border-right: 1px solid var(--black);
}

.btnPrevImage {
	left: 51px;
}

.btnNextImage {
	right: 51px;
}

.btnClosePlay {
	width: 51px;
	right: 0px;
	border-left: 1px solid var(--black);
}

.btnImageViewer:hover,
.btnImageViewer:hover,
.btnImageViewer:hover,
.btnImageViewer:hover {
	background-color: var(--darkred);
}

.btnImageViewer:focus-within {
	background-color: var(--darkred);
}

.btnImageViewer:focus-visible {
	outline: 0px solid white;
}

#iconTogglePages2 {
	display: none;
}

.playImageThumb {
	position: absolute;
	left: 0;
	top: 0px;
	width: 80px;
	height: 80px;
	opacity: 0;
	overflow: hidden;
	cursor: pointer;
}

.playImageThumb img {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.playImageThumb:hover {
	opacity: 1;
}

/*

FILTTERIT

*/

.filterPlays {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 40px;
}

.filterPlays h3 {
	text-align: center;
	position: relative;
	top: -20px;
	opacity: 0;
}

.btnRect {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 0;
	display: inline-block;
	height: 60px;
	cursor: pointer;

	top: -20px;
	opacity: 0;
}

.btnRect a {
	text-decoration: none;
}

.btnRectDefault {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 60px;
	padding:  0 24px;
	background-color: var(--darkgrey);
	color: var(--white);
	transform: translateY(0%) rotateX(0deg);
	transition: 0.2s transform ease-in-out;
}

.btnRectHover {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 60px;
	padding: 0px 24px;
	margin-top: -60px;
	background-color: var(--red);
	transform: translateY(50%) rotateX(90deg);
	transition: 0.2s transform ease-in-out;
}

.btnRectDefault p,
.btnRectHover p {
	text-transform: uppercase;
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	line-height: 120%;
	font-size: 15px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--white);
}

.selectedButton {
	cursor: default;
}

.selectedButton .btnRectHover {
	transform: translateY(0%) rotateX(0deg);
}

.selectedButton .btnRectDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnRect:hover .btnRectDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnRect:hover .btnRectHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnRect:focus-within .btnRectDefault {
	transform: translateY(-50%) rotateX(-90deg);
}

.btnRect:focus-within .btnRectHover {
	transform: translateY(0%) rotateX(0deg);
}

.btnRect:focus-visible {
	outline: 0px solid white;
}

/*

LISTA

*/

.plays {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--maxwidth);
	margin: 0px auto 0 auto;
	padding-top: 0px;
	min-height: 1500px;
}

.play {
	position: relative;
	box-sizing: border-box;
	width: 24.25%;
	margin-right: 1%;
	float: left;
	text-align: center;
	cursor: pointer;
	padding-bottom: 0px;
	margin-bottom: 20px;
	opacity: 0;
	background-color: var(--black);
}

.play:focus-visible {
	outline: 1px solid var(--red);
}

.play:nth-child(4n-3) {

}

.play:nth-child(4n) {
	margin-right: 0;
}

.play:nth-child(4n+5) {
	clear: both;
}

.playListAuthor {
	font-weight: 400;
	font-size: 16px;
	color: var(--white);
	margin-top: 12px;
	transition: 0.3s color ease-in-out;

	position: relative;
	top: 10px;
	opacity: 0;
}

.playListTitle {
	font-weight: 700;
	font-size: 26px;
	color: var(--white);
	margin-top: 12px;
	margin-bottom: 8px;
	transition: 0.3s color ease-in-out;

	position: relative;
	top: 10px;
	opacity: 0;
}

.playListDate {
	font-weight: 400;
	font-size: 14px;
	color: var(--white);
	margin-top: 0px;
	text-transform: uppercase;
	transition: 0.3s color ease-in-out;

	position: relative;
	top: 10px;
	opacity: 0;
}

.playThumbHolder {
	box-sizing: border-box;
	position: relative;
	//transform: rotateX(45deg) rotateY(-45deg);
	width: 100%;
	overflow: hidden;
}

.playThumb {
	position: relative;
	left: 0%;
	top: 30px;
}

.playThumbHover {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 100%;
	background-color: var(--red);
	mix-blend-mode: darken;
	opacity: 1;
	transition: 0.2s top ease-in-out;
}

.playThumbBlock {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-color: var(--darkgrey);	
}

.thumbLoading {
	position: absolute;
	left: calc( 50% - 10px);
	top: calc( 50% - 10px);
	width: 20px;
	height: 20px;
}

.play:hover .playThumbHover,
.play:focus-within .playThumbHover {
	top: 0;
}

.play:hover .playListAuthor,
.play:hover .playListTitle,
.play:hover .playListDate {
	color: var(--red);
}

.play:focus-within .playListAuthor,
.play:focus-within .playListTitle,
.play:focus-within .playListDate {
	color: var(--red);
}

.play a:focus-visible {
	outline: 0px solid white;
}

/*

FOOTER

*/

footer {
	position: relative;
	z-index: 50;
	width: 100%;
	max-width: var(--maxwidth);
	min-height: 300px;
	box-sizing: border-box;
	background-color: var(--darkgrey);
	margin: 0 auto;
	padding: 0;
	margin-top: 100px;
	margin-bottom: 0;
	padding: 80px 5%;
	opacity: 0;
}

.footerLogo {
	width: 80%;
	max-width: 220px;
	margin: 0 auto;
}

.footerInfo {
	margin: 30px auto 0px auto;
}

.btnFooter {
	top: 0;
	opacity: 1;
	float: none;
	clear: both;
	margin: 0px auto 12px auto;
	display: table;	
}

.btnFooterDefault {
	background-color: var(--darkgrey);
}

.footerContent {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 30px 5%;
	text-align: center;
}

.sitemap {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 50px;
}

.sitemap .menuItems {
	width: 100%;
	padding: 0;
}

.sitemap .btnMenu,
.sitemap .btnMenuSub {
	display: table;
	border-top: 0px solid var(--white);
	padding-top: 0;
	transition: 0.15s background-color ease-in-out;
}

.sitemap .btnMenu p,
.sitemap .btnMenuSub p {
	transition: 0.15s color ease-in-out;
}

.sitemap .btnMenu:hover,
.sitemap .btnMenuSub:hover {
	background-color: var(--white);
}

.sitemap .btnMenu:hover p,
.sitemap .btnMenuSub:hover p {
	color: var(--grey);
}

.sitemap .btnMenu:focus-within,
.sitemap .btnMenuSub:focus-within {
	background-color: var(--white);
}

.sitemap .btnMenu:focus-within p,
.sitemap .btnMenuSub:focus-within p {
	color: var(--grey);
}

.sitemap .btnMenu a:focus-visible,
.sitemap .btnMenuSub a:focus-visible {
	outline: 0px solid black;
}

.sitemap .btnMenu p {
	text-transform: uppercase;
	font-family:  "Outfit", sans-serif;
	font-weight:  600;
	font-size: 18px;
	margin:  0;
	box-sizing: border-box;
	padding:  4px 12px;
}

.sitemap .btnMenuSub {
	display: inline-block;
}

.sitemap .btnMenuSub p {
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	font-size: 16px;
	margin:  0;
	box-sizing: border-box;
	padding:  6px 12px;
}



.footerLogos {
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.footerLogos a {
	position: relative;
	display: block;
	width: 33.333%;
	box-sizing: border-box;
	padding: 30px;
}

.footerLogos a img {
	width: 100%;
	max-width: 220px;
	margin: 0 auto;
}

.footerTaikalehto {
	width: 80%;
	max-width: 180px;
	margin: 0 auto;
	margin-top: 30px;
}

.wp-block-button {
	position: relative;
	display: inline-block;
	background-color: var(--red);
	box-sizing: border-box;
	padding: 0;
	margin: 6px 0;
	margin-right: 16px;
	transition: 0.15s background-color ease-in-out;
}

.wp-block-button a {
	text-transform: uppercase;
	text-decoration: none;
	font-family:  "Outfit", sans-serif;
	font-weight:  400;
	line-height: 120%;
	font-size: 15px;
	box-sizing: border-box;
	padding: 12px 18px;
	margin: 0;
	box-sizing: border-box;
	color: var(--white);
	display: block;
	transition: 0.15s color ease-in-out;
}

.wp-block-button:hover {
	background-color: var(--white);
}

.wp-block-button:hover a {
	color: var(--red);
}

/*

LIPPUTILANNE

*/

.editor select {
	padding: 4px;
	background-color: var(--white);
	border-radius: 2px;
	border: 0px solid white;
	color: var(--black);
	margin-bottom: 20px;
}

.editor p {
	margin-bottom: 10px;
}





/*

MEDIA QUERIES

*/

@media (max-width: 1515px) {

	.play {
		width: 23.75%;
		margin-right: 1%;
	}

	.play:nth-child(4n-3) {
		margin-left: 1%;
	}

	.play:nth-child(4n) {
		margin-right: 0;
	}

	.calendarDayName {
		width: 13.142%;
	}

	.calendarItem {
		width: 13.142%;
	}

	.calendarItemFirstofweek {
		margin-left: 1%;
	}

	.calendarItemLastofweek {
		margin-right: 1%;
	}

	.instaFeed {
		padding: 30px 5%;
	}

}


@media (max-width: 1200px) {

	.homePlayImageWide {
		display: none;
	}

	.homePlayImageMobile {
		display: block;
	}

	.play {
		width: 32%;
	}

	.play:nth-child(4n-3) {
		margin-left: 0;
	}

	.play:nth-child(4n) {
		margin-right: 1%;
	}

	.play:nth-child(4n+5) {
		clear: none;
	}	

	.play:nth-child(3n) {
		margin-right: 0;
	}

	.play:nth-child(3n-2) {
		margin-left: 1%;
	}

	.play:nth-child(3n+4) {
		clear: both;
	}

	.playHolder {
		margin-top: 0;
	}

	.playContent {
		background-color: var(--black);
	}

	.calendarDate {
		width: 44px;
		height: 44px;
		margin-top: -4px;
		margin-bottom: 4px;
	}

	.calendarDate h3 {
		font-size: 22px;
	}

	.calendarStatusSingle {
		height: calc(100% - 44px);
	}

	.calendarStatusMulti {
		height: calc(50% - 22px);
	}	

	.calendarTime {
		font-size: 15px;
	}

	.calendarStatusText {
		font-size: 12px;
		margin-top: 4px;
	}

}

@media (max-width: 1000px) {

	.calendarItem {
		aspect-ratio: 0.8;
	}

}

@media (max-width: 900px) {

	.homePlay {
		margin-top: 30px;
	}
	
	.homePlayImageHolder {
		width: 100%;
		left: -50%;
	}

	.homePlayImage {
		width: 100%;
		left: 100%;
		padding: 0;
	}

	.homePlayInfoWide {
		display: none;
	}

	.homePlayInfo {
		width: 100%;
		padding: 5%;
	}

	.homePlayInfoMobile {
		display: block;
		padding: 0 5%;
		padding-bottom: 12px;
	}

	.homeNewsletter {
		margin: 40px auto;
	}

	.play {
		width: 48.5%;
	}

	.play:nth-child(3n-2) {
		margin-left: 0;
	}

	.play:nth-child(3n) {
		margin-right: 1%;
	}

	.play:nth-child(3n+4) {
		clear: none;
	}	

	.play:nth-child(2n) {
		margin-right: 0;
	}

	.play:nth-child(2n-1) {
		margin-left: 1%;
	}

	.play:nth-child(2n+3) {
		clear: both;
	}

	.playListTitle {
		font-size: 20px;
		margin-top: 6px;
		margin-bottom: 0;
	}

	.playListDate {
		margin-top: 4px;
		margin-bottom: 14px;
	}

	.play {
		padding-bottom: 0px;
		margin-bottom: 20px;
	}

	.heroImageWide {
		display: none;
	}
	.heroImageMobile {
		display: block;
	}

	.playContentMain {
		width: 90%;
		margin: 0;
		margin-left: 5%;
		float: none;
		clear: both;
		padding-top: 0px;
	}

	.playContentSide {
		width: 90%;
		margin: 0;
		margin-top: 50px;
		margin-left: 5%;
		float: none;
		clear: both;
		padding-top: 0px;
	}

	.titleAbsolute {
		position: relative;
	}

	.attentionBox {
		width: 90%;
		margin: 20px 5% 20px 5%;
	}

	.backgroundHolder {
		height: 300px;
		margin-bottom: 0px;
	}

	.backgroundImageCustom {
		background-size: 60%;
		transform: translateX(-30%);
		margin-top: 0px;
	}

	.bgMargin {
		height: 0px;
	}

	.pageContent {
		background-color: transparent;
		padding-top: 10px;
	}

	.pageContentTitle {
		text-align: left;
		margin-bottom: 0;
	}

	.btnPlayTickets {
		width: 100px;
		height: 100px;
		top: -50px;
		left: calc(50% - 50px);
	}

	.btnPlayTicketsDefault,
	.btnPlayTicketsHover {
		width: 100px;
		height: 100px;
	}

	.calendarMonth {
		margin-bottom: 20px;
	}

	.calendarItem {
		float: none;
		clear: both;
		display: block;
		width: 80%;
		max-width: 400px;
		aspect-ratio: 0;
	}

	.calendarItem,
	.calendarItemFirstofweek,
	.calendarItemLastofweek {
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.calendarStatusHidden {
		display: none;
	}

	.calendarStatusSingle {
		padding: 20px 5%;
	}

	.calendarStatusMulti {
		padding: 20px 5%;
	}

	.calendarDate {
		top: -6px;
		margin-bottom: -12px;
	}

	.calendarTime {
		display: none;
	}

	.calendarDateFull {
		display: block;
	}

	.calendarStatusText {
		font-size: 16px;
		margin: 0;
	}

	.calendarDayName {
		display: none;
	}

	.calendarStatusOff {
		display: none;
	}

	.footerLogos {
		display: block; 
		max-width: 220px;
	}

	.footerLogos a {
		width: 100%;
	}

	.footerTaikalehto {
		margin-top: 30px;
	}

	footer {
		padding: 45px 5%;	
	}

}

@media (max-width: 800px) {

	.thumbViewer {
		height: 60px;
	}

	.playImageThumb {
		width: 60px;
		height: 60px;
	}

	.images {
		height: calc(100% - 80px);
	}

	.btnNextImage,
	.btnPrevImage,
	.btnTogglePages,
	.btnClosePlay {
		width: 38px;
		height: 60px;
	}

	.btnTogglePages {
		width: 39px;
	}

	.btnPrevImage {
		left: 39px;
	}

	.btnNextImage {
		right: 39px;
	}

	.btnClosePlay {
		width: 39px;
		right: 0px;
	}

}

@media (max-width: 700px) {

	h1 {
		font-size: 36px;
	}

	h2 {
		font-size: 27px;
	}

	h3 {
		font-size: 22px;
	}

	h4 {
		font-size: 18px;
	}

	blockquote p {
		font-size: 18px;
	}	

	.headerInfo {
		float: none;
		clear: both;
	}
	.btnHeader {
		float: none;
		clear: both;
		margin: 6px auto;
		display: table;
	}

	.loadingAnim {
		top: 20px;
	}

	.naviFiller {
		display: none;
	}

	

	nav,
	.navi {
		height: 55px;
	}

	.navi,
	.naviBlock {	
		width: 235px;
	}

	.naviLogo {
		height: 50px;
	}

	.menu {
		height: calc(100vh - 50px);
		height: calc(100dvh - 50px);
	}

	.naviLogo img {
		height: 50px;
	}

	.btnNaviLogo {
		height: 50px;
		margin-top: 3px;
		margin-left: -3px;
	}

	.btnNaviLogoDefault {
		height: 50px;
	}

	.btnNaviLogoHover {
		height: 50px;
		margin-top: -50px;
	}


	.btnToggleMenuHolder {
		width: 54px;
		height: 54px;
	}

	.btnToggleMenu {
		left: -3px;
		top: -3px;
	}

	.btnRect,
	.selectedButton,
	.btnRectDefault,
	.btnRectHover {
		height: 50px;
	}

	.btnRectHover {
		margin-top: -50px;
	}

	.selectedButton .btnRectHover {
		transform: translateY(0%) rotateX(0deg);
	}

	.selectedButton .btnRectDefault {
		transform: translateY(-50%) rotateX(-90deg);
	}

	.selectedButton:hover .btnRectHover {
		transform: translateY(0%) rotateX(0deg);
	}

	.selectedButton:hover .btnRectDefault {
		transform: translateY(-50%) rotateX(-90deg);
	}

	.btnGalleryPrevImage:hover, 
	.btnGalleryNextImage:hover {
		background-color: var(--red);
	}	


}