@import url(/resource/geomanist/geomanist.css);
@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Ultra-Webfont/geomanist-ultra-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Ultra-Webfont/geomanist-ultra-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Ultra-Webfont/geomanist-ultra-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Ultra-Webfont/geomanist-ultra-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Ultra-Webfont/geomanist-ultra-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Ultra-Webfont/geomanist-ultra-webfont.svg#geomanistregular') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Black-Webfont/geomanist-black-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Black-Webfont/geomanist-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Black-Webfont/geomanist-black-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Black-Webfont/geomanist-black-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Black-Webfont/geomanist-black-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Black-Webfont/geomanist-black-webfont.svg#geomanistregular') format('svg');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.svg#geomanistregular') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Medium-Webfont/geomanist-medium-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Medium-Webfont/geomanist-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Medium-Webfont/geomanist-medium-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Medium-Webfont/geomanist-medium-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Medium-Webfont/geomanist-medium-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Medium-Webfont/geomanist-medium-webfont.svg#geomanistregular') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Book-Webfont/geomanist-book-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Book-Webfont/geomanist-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Book-Webfont/geomanist-book-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Book-Webfont/geomanist-book-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Book-Webfont/geomanist-book-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Book-Webfont/geomanist-book-webfont.svg#geomanistregular') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Regular-Webfont/geomanist-regular-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Regular-Webfont/geomanist-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Regular-Webfont/geomanist-regular-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Regular-Webfont/geomanist-regular-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Regular-Webfont/geomanist-regular-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Regular-Webfont/geomanist-regular-webfont.svg#geomanistregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.svg#geomanistregular') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-ExtraLight-Webfont/geomanist-extralight-webfont.eot');
    src: url('/resource/geomanist/Geomanist-ExtraLight-Webfont/geomanist-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-ExtraLight-Webfont/geomanist-extralight-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-ExtraLight-Webfont/geomanist-extralight-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-ExtraLight-Webfont/geomanist-extralight-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-ExtraLight-Webfont/geomanist-extralight-webfont.svg#geomanistregular') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistregular';
    src: url('/resource/geomanist/Geomanist-Thin-Webfont/geomanist-thin-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Thin-Webfont/geomanist-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Thin-Webfont/geomanist-thin-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Thin-Webfont/geomanist-thin-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Thin-Webfont/geomanist-thin-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Thin-Webfont/geomanist-thin-webfont.svg#geomanistregular') format('svg');
    font-weight: 100;
    font-style: normal;
}

/* ============== ITALIC ============== */
/* ============== ITALIC ============== */
/* ============== ITALIC ============== */
/* ============== ITALIC ============== */
/* ============== ITALIC ============== */

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Ultra-Italic-Webfont/geomanist-ultra-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Ultra-Italic-Webfont/geomanist-ultra-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Ultra-Italic-Webfont/geomanist-ultra-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Ultra-Italic-Webfont/geomanist-ultra-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Ultra-Italic-Webfont/geomanist-ultra-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Ultra-Italic-Webfont/geomanist-ultra-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Black-Italic-Webfont/geomanist-black-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Black-Italic-Webfont/geomanist-black-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Black-Italic-Webfont/geomanist-black-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Black-Italic-Webfont/geomanist-black-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Black-Italic-Webfont/geomanist-black-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Black-Italic-Webfont/geomanist-black-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Medium-Italic-Webfont/geomanist-medium-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Medium-Italic-Webfont/geomanist-medium-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Medium-Italic-Webfont/geomanist-medium-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Medium-Italic-Webfont/geomanist-medium-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Medium-Italic-Webfont/geomanist-medium-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Medium-Italic-Webfont/geomanist-medium-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Book-Italic-Webfont/geomanist-book-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Book-Italic-Webfont/geomanist-book-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Book-Italic-Webfont/geomanist-book-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Book-Italic-Webfont/geomanist-book-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Book-Italic-Webfont/geomanist-book-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Book-Italic-Webfont/geomanist-book-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Regular-Italic-Webfont/geomanist-regular-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-ExtraLight-Italic-Webfont/geomanist-extralight-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-ExtraLight-Italic-Webfont/geomanist-extralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-ExtraLight-Italic-Webfont/geomanist-extralight-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-ExtraLight-Italic-Webfont/geomanist-extralight-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-ExtraLight-Italic-Webfont/geomanist-extralight-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-ExtraLight-Italic-Webfont/geomanist-extralight-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'geomanistitalic';
    src: url('/resource/geomanist/Geomanist-Thin-Italic-Webfont/geomanist-thin-italic-webfont.eot');
    src: url('/resource/geomanist/Geomanist-Thin-Italic-Webfont/geomanist-thin-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/geomanist/Geomanist-Thin-Italic-Webfont/geomanist-thin-italic-webfont.woff2') format('woff2'),
         url('/resource/geomanist/Geomanist-Thin-Italic-Webfont/geomanist-thin-italic-webfont.woff') format('woff'),
         url('/resource/geomanist/Geomanist-Thin-Italic-Webfont/geomanist-thin-italic-webfont.ttf') format('truetype'),
         url('/resource/geomanist/Geomanist-Thin-Italic-Webfont/geomanist-thin-italic-webfont.svg#geomanistitalic') format('svg');
    font-weight: 100;
    font-style: normal;
}

body, html{
	/*background-image: url("");
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: no-repeat;*/
	background-color: rgb(0, 0, 0);
	height: 100%;
	margin: 0;

	font-family: geomanist;
    color: white;
    line-height: 1.4;
    font-size: 1em;
}

a, a:visited{
	text-decoration: none;
	color: gray;
}

a:hover, a:active{
	color: white;
}

a.screenFillDescriptionLogo, a.screenFillDescriptionLogo:hover, a.screenFillDescriptionLogo:active{
	color: #18345c;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.space{
	position: relative;
	height: 4em;
}

.space-small{
	position: relative;
	height: 1.2em;
}

.space-tiny{
	position: relative;
	height: 0.2em;
}

.footer{
	padding: 1em;
}

.screenfill{
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: no-repeat;
    background-color: rgb(0, 0, 0);
    
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.screenfillBigText{
	z-index: 1;
	position: absolute;
	top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    text-align: center;

	font-size: 3.5em;
	font-weight: 800;
	text-shadow: 0px 4px 2em #a0aeee;

	background: none!important;
}

.screenFillDescriptionLogo{
	color: #18345c;
	vertical-align: middle;
	text-shadow: 20px 4px 5em #1b7aff;
}

.screenFillDescriptionLogo div{
	display: inline-block;
	vertical-align: middle;
}

.screenFillDescriptionLogoIMG{
	vertical-align: middle;
	position: relative;
	display: inline-block;
	height: 6em;
}

.screenfillDescriptionL{
	padding: 5em;
	height: 100%;
	width: 100%;

	overflow: auto;
	
	background: rgba(0, 0, 0, 1);
	background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0) 100%);
	background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0) 100%);
}

.screenfillDHiddenImg{
	display: none;
}

.screenfillDescriptionL p{
	width: 50%;
}


@keyframes openingAnim{
	0% {
        background-image: url('/img/background/orchestra-empty.jpg');
        opacity: 0;
    }
	100% {
        background-image: url('/img/background/orchestra-empty.jpg');
        opacity: 1;
    }
}

@keyframes openingAnim2{
	0% {
        background-image: url('/img/background/orchestra-full.jpg');
        opacity: 0;
    }
	100% {
        background-image: url('/img/background/orchestra-full.jpg');
        opacity: 1;
    }
}

.screenfill{
    background-color: #000;
}

.screenfillSub{
    width: 100%;
    height: 100%;

    background-position: center;
	background-size: cover;
	background-attachment: scroll;
	background-repeat: no-repeat;
}

.frontPageAnim{
	opacity: 0;
    animation: openingAnim 2s ease-in-out 0.2s 1 forwards;
}

.frontPageAnim2{
	opacity: 0;
    animation: openingAnim2 2s ease-in-out 1.2s 1 forwards;
}

@keyframes jump-bnr_vis{
	0% {}
	50% {bottom: -0.1em;}
	75% {}
	100% {}
}

@keyframes jump-bnr_hvr{
	0% {}
	100% {bottom: -0.1em;}
}

@keyframes openingAnimDelay{
    0% {
        opacity: 0;
    }
	100% {
        opacity: 1;
    }
}

.openingAnimDelay{
    opacity: 0;
    animation: openingAnimDelay 2s ease-in-out 2.5s 1 forwards;
}

.jump-bnr, .jump-bnr:link{
	position: relative;
	bottom: 0;
	font-size: 1.5em;
	color: white;
	
    
	animation-name: jump-bnr_vis;
  	animation-duration: 1.5s;
	animation-delay: 0.2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.jump-bnr:hover{
	animation-name: jump-bnr_hvr;
  	animation-duration: 0.1s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    text-align: center;
}

.grid1{
	display: grid;
	grid-template-areas:
	"main-left sidebar-right";
	grid-template-columns: 3fr 1fr;
	gap: 0 2em;
}

.logoImgOffsetR{
	position: relative;
	top: .3em;
	height: 5em;
	vertical-align: middle;
}

.attentionBox{
	min-width: 40vw;
	max-width: calc(90%-10em);

	backdrop-filter: blur(0.0em);
	padding: 2em 5em 2em 5em;
	background-color: white;
	border-radius: .2em;

	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

	color: #18345c;
}

.brightFillCenter{
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);

	backdrop-filter: blur(0.3em);

	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.6);
}

.darkFillCenter{
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);

	backdrop-filter: blur(0.5em);

	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
}

.wrapper{
	min-width: 40vw;
	max-width: 90%;
	padding: 5em;
	font-size: 1.5em;
}

.wrapperContrast{
	min-width: 40vw;
	max-width: 90%;
	padding: 5em;
	font-size: 1.5em;

	background-color: white;
	color: #18345c;
}

.refGrid{
	display: grid;
	gap: 1em 1em;
	grid-template-columns: repeat(auto-fill, minmax(min(15em,100%), 1fr));
}

.refLink{
	background-color: rgba(60, 64, 67, 0.3);
	border-radius: .2em;
	padding: 1em;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.itmGridBright{
	display: grid;
	gap: 1em 1em;
	grid-template-columns: repeat(auto-fill, minmax(min(10em,100%), 1fr));
}

.itmGridItemBright{
	background-color: rgba(217, 228, 236, 0.3);
	border-radius: .2em;
	padding: 1em 1em 1.3em 1em;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.itmGridSmall{
	display: block;
	line-height: 1em!important;
	font-size: 0.6em;
}

.itmGridBright a{
	color: #18345c!important;
}

.itmGridBright a:hover,a:active{
	color: gray!important;
}

.audio-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin: 0 10px 20px;
    padding: 2em;
}

.audio-item audio {
    margin-bottom: 10px;
    width: 100%;
}

.audio-item .controls-container {
    width: 100%;
    display: flex;
    align-items: center;    
}

.play-button {
    background-color: #18345c;
    color: white;
    border: none;
    padding: 20px;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}


.play-button:hover {
    background-color: white;
	color: #18345c;
}

.volSliderContainer > * {
    vertical-align: middle;
}

#volume-control {
    -webkit-appearance: none;
    appearance: none;
    width: 200px;
    height: 0.4em;
    background: linear-gradient(to right, #22618b 0%, #228B22 50%, #f8e21a 100%);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

#volume-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--clr-EMBrown);
    border-radius: 50%;
    cursor: pointer;
}

@media screen and (max-width: 1050px){
	.attentionBox{
		min-width: none!important;
		max-width: none!important;
		width: calc(100% - 5em);
		padding: 2em 2em 2em 2em;
	}
}

@media screen and (max-width: 800px){
	
	.wrapper, .wrapperContrast{
		min-width: none!important;
		max-width: 90%;
		padding: 1em;
	}
	.grid1{
		display: block;
	}
	.attentionBox{
		width: calc(100% - 2.5em);
		padding: 4em 1em 1em 1em;
	}
	.logoImgOffsetR{
		position: absolute;
	}

	.screenfillDescriptionL{
		padding: 1em;
		height: 100%;
		width: 100%;
		
		background: rgba(0, 0, 0, 1);
		background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
		background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
		background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
	}

	.screenfillDHiddenImg{
		display: block;
		width: 90%;
	}
	
	.screenfillDescriptionL p{
		width: 90%;
	}
}

@media screen and (max-width: 520px){
	h1{
		font-size: 1.4em;
		font-size: 10vw;
	}
}