/* CSS Document */

@font-face {
    font-family: AdobeClean;
    src: url("../fonts/AdobeCleanRegular.otf") format("opentype");
}

@font-face {
    font-family: AdobeClean;
    font-weight: 200;
    src: url("../fonts/AdobeCleanLight.otf") format("opentype");
}

@font-face {
    font-family: AdobeClean;
    font-weight: bold;
    src: url("../fonts/AdobeCleanBold.otf") format("opentype");
}

@font-face {
    font-family: AdobeClean;
    font-weight: 800;
    src: url("../fonts/AdobeCleanBlack.otf") format("opentype");
}

::selection {
	background: #f2473b;
	color:#d9d9d9;
}
::-moz-selection {
	background: #f2473b;
	color:#d9d9d9;
}

html, body {
	font-family: 'AdobeClean', sans-serif;
	height: 100%;
	margin: 0;
}

body {
	-webkit-box-sizing:border-box; 
	overflow: hidden;
	color: white;
	overscroll-behavior: none;
	font-size: 13px;
	line-height: 24px;
}

p {
  font-size: 1rem;
}

#CSS3D, #WebGL {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
}

iframe{
	border: none;
	pointer-events: auto;
}

canvas {
  	width: 100%;
  	height: 100%;
  	display: block;
}

div {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

a{
	color: white;
	text-decoration: none;
}

a:hover {
	color: #f05454;
	text-decoration: none;
}

#UI_Header {
	position: fixed;
	top:0;
	left: 0; 
  	right: 0; 
	width: 100%;
	height: 40px;
/*	background-color: rgba(0,0,0,0.70);*/
/*	background-image: url("img/MAXGradient.jpg");*/
	
	z-index: 1000;
}

#UI_Header::before {    
      content: "";
	background-color: #f2473b;
      background-image: url("../img/MAXGradient.jpg");
      background-size: cover;
/*	 background-position: 0 1000%;*/
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 1;
	  z-index: -1; 
	animation: animatedBackground 6s linear infinite alternate;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}

#MAXLogoMenu {
	position: absolute;
	top:4px;
	left:20px;
	height: 32px;
}

#MAXLogoMenu img {
	position: relative;
	height: 100%;
}

#UI_HeaderMenu{
	display: block;
}

#UI_HeaderMenu a {
	font-size: 1rem;
}

.topnav {
/*  overflow: hidden;*/
}

.topnav a {
  	float: left;
  	display: block;
	padding: 0 15px;
  	color: #f2f2f2;
  	text-align: center;
  	text-decoration: none;
	border-radius: 0.75rem;
	margin-top: 8px;
}

.topnav a:first-child {
  	margin-left: 200px;
}

.topnav a:hover {
	background-color: #ffffff;
	color: #000000;
}

.topnav a.active {
  	background-color: #ffffff;
	color: #000000;
}

.topnav .icon {
	position: absolute;
	top:0;
	right: 10px;
	font-size: 17px !important;
  	display: none;
}

@media (max-width: 48em) {
	.topnav a {
		display: none;
	}
	.topnav a.icon {
		display: block;
	}
	.topnav a:not(:last-child) {
		padding: 10px 15px;
		border-radius: 1.375rem;
	}

	.topnav.responsive {
		position: relative;
		background-color: rgba(0,0,0,0.85);
		margin-top: 40px;
	}
	.topnav.responsive .icon {
		top:-40px;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: center;
	}
	
	.topnav.responsive a:first-child {
		margin-left: 0;
	}
}

#UI_Artwork {
	position: absolute;
	left: 0; 
  	right: 0; 
  	margin-left: auto; 
  	margin-right: auto; 
	width: 60%;
	height: 100%;
/*	top:130%;*/
	top: 150px;
	background-color: rgba(0,0,0,0.85);
	border-radius: 25px;
	transition: 0.4s;
	
	min-width: 619px;
	
	z-index: 999;
}



/*
#UI_Artwork:hover {
	top:150px;
}
*/

#UI_Artwork_thumbnail, #UI_ProgressRing, svg {
	position: absolute;
	left: 125px;
	top: 25px;
	border-radius: 50%;
	transform: translate(-50%,-50%);
}

#UI_Artwork_thumbnail {
	width: 150px;
	height: 150px;
	background-color: white;
	background-size: cover;
	background-position: center;
	
	background-image : url("../img/AdobeMark.jpg");
}

#UI_ProgressRing {
	width: 176px;
	height: 176px;
/*	background: conic-gradient(#f2473b 0deg 70deg, #f79a05 70.1deg 90deg, transparent 90.1deg 360deg);*/
	transition-property: background, width, height;
  	transition-duration: 1s;
  	transition-timing-function: ease-in;
	pointer-events: none;
	
	background: conic-gradient(#f2473b 0deg 120deg, transparent 120deg 360deg);
	
	 -webkit-animation: spin 2s linear infinite;
  	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
  100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); }
}

@keyframes spin {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

/*LOADER*/

svg {
  	max-width: 176px;
}

path {
  	stroke: black;
  	stroke-width: 8;
  	stroke-dasharray: 288.5;
  	stroke-linecap: round;
  	fill: none;
  	transform-origin: 50px 50px;
	stroke-dashoffset: 144;
	
	 -webkit-animation: 
		 spin 2s linear infinite,
		 pathStroke 3.75s infinite ease-in-out;
  	animation: 
		spinPath 2s linear infinite,
		pathStroke 3.75s infinite ease-in-out;
/*
  	animation:
    	pathStroke 3.75s infinite ease-in-out,
    	spin 2s linear infinite;
*/
}

@-webkit-keyframes spinPath {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spinPath {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes pathStroke {
  0% {  stroke-dashoffset: 0; }
  40%, 70% { stroke-dashoffset: 230; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pathStroke {
  0% {  stroke-dashoffset: 0; }
  40%, 70% { stroke-dashoffset: 230; }
  100% { stroke-dashoffset: 0; }
}

/*
@keyframes pathStroke {
  0% {  stroke-dashoffset: -288.5; }
  40%, 70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 288.5; }
}

@keyframes pathRotate {
  0% {  transform: rotate(0deg); }
  50% { transform: rotate(-540deg); }
  100% { transform: rotate(-1080deg); }
}
*/

#UI_Artwork_Overflow {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#expandArrow{
	width: 36px;
	height: 36px;
	font-size: 5erm;
	position: absolute;
	top:8px;
	left: 225px;
	cursor: pointer;
	z-index: 10;
	transform: translate(-50%,-50%) rotate(0deg);
	
    transition: transform 0.4s;

}

#expandArrow span{
	cursor: pointer;
}

#UI_Artwork_title {
	position: relative;
	text-align: right;
	margin-top: 12px;
	margin-right: 50px;
	margin-left: 50px;
}

#UI_Artwork h1, #UI_Artwork h2 {
/*	margin-left: 250px;*/
}
#UI_Artwork h1 {
	margin-top: 0px;
	margin-bottom: 0px;
}
#UI_Artwork h2 {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: normal;
}

#UI_Artwork_info_Cont {
	position: absolute;
	left: 50px;
	right: 50px;
	top: 130px;
}

#UI_Artwork_info {
	position: relative;
}

/* hide scrollbar but allow scrolling */
#UI_Artwork_info {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

#UI_Artwork_info::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

#UI_Artwork_info_Img {
	display: block;
	width: 100%;
	height: 0;
	background-color: none;
	border-radius: 5px;
	margin: 0;
	padding: 0;
	Box-sizing: border-box;
	background-size:contain;
	background-position:top;
	background-repeat: no-repeat;
}
#UI_Artwork_info_Txt {
	position: relative;
	display: grid;
	gap: 12px 25px;
	grid-template-columns: auto auto;
	width: 100%;
	margin: 0;
	padding: 0;
}

#UI_Artwork_info_Txt p {
	margin:0;
}

#UI_Artwork_info_Txt #UI_Artwork_info_Txt_Center {
	grid-column-start: 1;
  	grid-column-end: 3;
	margin: 0;
	padding: 0;
	padding-bottom: 25px;
	border-bottom: 1px solid white;
}

#UI_Artwork_info_Txt #UI_Artwork_info_Txt_Left {
	grid-column-start: 1;
  	grid-column-end: 2;
	margin: 0;
	padding: 0;
}
#UI_Artwork_info_Txt #UI_Artwork_info_Txt_Right {
	grid-column-start: 2;
  	grid-column-end: 3;
	margin: 0;
	padding: 0;
	text-align: right;
}

#info2 {
	position: absolute;
	top: 75px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

#info3 {
	position: absolute;
	top: 150px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

#fadeWhite {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 1;
	pointer-events: none;
	z-index: 100;
	
    transition: opacity 0.8s;
}

#MAXLogoMenu img:hover{
	 -webkit-filter: invert(1);
   	filter: invert(1);
}




/*max width 688px for mobiles*/
@media (max-width: 48em) {
  	#UI_Artwork {
		top: 175px;
    	min-width:90%;
  	}
	
	#UI_Artwork_thumbnail, #UI_ProgressRing {
		left: 50%;
		top: -62px;
	}
	
	#UI_Artwork_thumbnail {
		width: 100px;
		height: 100px;
	}

	#UI_ProgressRing {
		width: 120px;
		height: 120px;
	}
	
	#expandArrow{
		left: auto;
		right: 12px;
	}
	
	#UI_Artwork_title {
		text-align: center;
		margin-right: 7.5%;
		margin-left: 7.5%;
		max-width: 85%;
	}
	
	#UI_Artwork h1 {
		font-size: 1.5rem;
	}
	
	#UI_Artwork_info_Cont {
		left: 20px;
		right: 20px;
		top: 75px;
	}
	
	#UI_Artwork_info_Txt #UI_Artwork_info_Txt_Left {
		grid-column-start: 1;
		grid-column-end: 3;
	}
	#UI_Artwork_info_Txt #UI_Artwork_info_Txt_Right {
		grid-column-start: 1;
		grid-column-end: 3;
		text-align: left;
	}
}