:root{
	--c1: #474A6B;
	--c2: #E8DCC3;
	--c3: #DEE6FF;
	--c4: #FF9673; 
	--c5: #FF4F5B; 


	--grad1: #4A4D6E;
	--grad2: #6C708F;
	--grad3:#9196B3;
	--grad4: #B3B9D5;
	--grad5: #DDE4FE;
}





@charset "UTF-8";


a:link {
		color: var(--c5);	
	}

a:visited {
		color: var(--c5);	
	}

embed{
	display: flex;
	width:100%;
	height:100%;
	justify-content: center;
	align-self: center;
	text-align: center;
	margin: 2em 0em;
}

iframe{
	align-content: center;
}

.panel {
	text-align:center;
}

.panel img{
	
	max-width: 100%;
	height: auto;
	padding:  2em;
	
}

.panel iframe{
	display: block;
}

.textBox {
	  text-align: justify;
  text-justify: inter-word;
}



hr {
    border: 0;
    border-bottom: 2px dotted var(--grad4);
}

.container {
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;


	/* FONTS */
	font-family: ff-more-web-pro-wide, serif;
	font-style: normal;
	font-weight: 400;

	
	
	color: var(--dark5);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-bottom-width: 0px;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;


}

#topBox {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;

	width: 100%;
	text-align: center;
}

#topBox a:link, a:visited, a:hover{
	color:  #000000;
	text-decoration: none;
}

#news {
	width:  100%;
	text-align: center;

}



	


#siteTitle{
	display: flex;
	
	font-family: korolev, sans-serif;
	font-weight: 500;
	font-style: italic;
	color: #00000;
	width:100%;
	text-align: right;
	align-content: center;
	justify-content: flex-end;
}

#siteTitle img{
	height: 2em;
	width: auto;
	padding: 0.5em;
	vertical-align: center;
	
}

#artworkTitle{
	
	font-family: ff-more-web-pro-wide, serif;
	float: left;
	font-weight: 400;
	font-style: normal;
	font-size: 250%;
	color: var(--grad1);
	width: 80%;
}

#artworkMenu{
	display: flex;
	float:right;
	flex-flow: row wrap;
	flex-direction: row;
	font-family: korolev, sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #FFFFFF;
	font-style: italic;
	cursor:pointer;
	width: 100%;
}
.artworkMenuItem{
	/* 
	flex-grow: 1; 
	background-color: var(--grad3);
	height: 2em;
	*/
	flex-grow: 1;
	padding: 0.5em 0.5em 0.5em;
	margin: 0.25em;
	border-style: none none none outset;
	color: #000000;
	font-style: italic;
	font-family: korolev, sans-serif;
	font-size: 20px;
	font-weight: 500;

}

.indexContentFullWidth{
	font-family: korolev, sans-serif;
	font-weight: 500;
	font-style: italic;
	color: #00000;
}

.indexContentFullWidth img {
	width:  100%;
	height:  auto;
}

#indexContent{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 80%;
}

.indexPanel{
	flex: 1 1 400px;
	
	height: auto;
	
	
}

.indexPanelImage{
	max-width:  100%;
	height: 400;
	padding: 1em;
	
}

.indexPanelImage img{
	width: 100%;
	height:  250px;
	object-fit: cover;
		
}

.panelImage{
	max-width:  100%;
	height: 400;
	padding: 1em;
	
}

.panelImage img{
	width: 100%;
	height:  auto;
	object-fit: cover;
		
}

.indexContentFullWidth{
	width:  100%;

}

hr.padded{
	padding:  2em 0em 2em 0em;
}

.panelTextBox{
	padding:  0em 1em 0em 1em;

}




#content{
display:flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: left;
	width:80%;



	
}




video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
  
}

 .textBox{
 width: 100vw;
 margin-top: 2em;
}

.middle{
	display:flex;
	flex-flow: row wrap;
	flex-direction: row;
	font-family: ff-more-web-pro-wide, serif;
	font-weight: 100;
	font-style: normal;
	font-size: 18px;		
}

.middle h1{
	text-transform: uppercase;
	font-family: korolev, sans-serif;

	font-weight: 500;
	font-size: 200%;
	color: var(--grad2);
	
}
.middle h2{
	text-transform: uppercase;
	font-family: korolev, sans-serif;

	font-weight: 500;
	font-size: 150%;
	color: var(--grad3);
	
}
	
.middle img {
		display: block;
		object-fit: contain;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2em;
		margin-bottom: 2em;
		width: 90%; 
		height: auto;
		align-self: center;
		align-content: center;
}


#main{
	display: block;
	float:right;
	width:75%;
}

.finePrint{
	font-size: 75%;
}



#splash{
	
	float: left;
	width:100%;
	
}

#footer{
	color: var(--grad4);
	font-family: ff-more-web-pro-wide, serif;
	font-size: 14px;
	width:100%; 
	padding-top: 200px; 
	text-align:right;
	line-height: 0.5;
}






.spinner {
    width: 100%;
    -moz-animation: 30s rotate infinite linear;
    -moz-transform-origin: 50% 50%;
    -webkit-animation: 30s rotate infinite linear;
    -webkit-transform-origin: 50% 50%;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
}