@font-face
   {
   font-family: 'asvcodar';
   src: url('asvcodar.ttf') format('truetype');
   }

* { box-sizing: border-box; }

#scene
   {
   position: relative;
   width: 80%;
   margin: 10px auto 10px auto;
   perspective: 1000px;
   overflow: hidden;
   }
   @media only screen and (max-width: 399px) { #scene {height: 200px;} }
   @media only screen and (min-width: 400px) and (max-width: 769px) { #scene {height: 250px;} }
   @media only screen and (min-width: 770px) and (max-width: 1199px) { #scene {height: 350px;} }
   @media only screen and (min-width: 1200px) and (max-width: 1699px) { #scene {height: 450px;} }
   @media only screen and (min-width: 1700px) { #scene {height: 500px;} }
      	      	      	
   #carousel
      {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: translateZ(-288px);
      transform-style: preserve-3d;
      transition: transform 1s;
      }
      	      	      	
      #carousel__cell
      	{
      	position: absolute;
      	display: -webkit-flex;
      	display: -webkit-box;
      	display: -ms-flexbox;
      	display: flex;
      	flex-direction: row;
      	flex-wrap: wrap;
      	-webkit-align-items: center;
      	align-items: center;
      	align-content: center;
      	-webkit-justify-content: center;
      	justify-content: center;
      	box-sizing: border-box;
      	width: 98%;
      	font-size: 80px;
      	font-weight: bold;
      	color: white;
      	text-align: center;
      	transition: transform 1s, opacity 1s;
      	}
      	@media only screen and (max-width: 399px) { #carousel__cell {height: 200px;} }
      	@media only screen and (min-width: 400px) and (max-width: 769px) { #carousel__cell {height: 250px;} }
      	@media only screen and (min-width: 770px) and (max-width: 1199px) { #carousel__cell {height: 350px;} }
      	@media only screen and (min-width: 1200px) and (max-width: 1699px) { #carousel__cell {height: 450px;} }
      	@media only screen and (min-width: 1700px) { #carousel__cell {height: 500px;} }
      	      #carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(288px); }
      	      #carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
      	      #carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
      	      #carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
      	      #carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
      	      #carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
      	      #carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
      	      #carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
      	      #carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }
      	      	      	
      	#carousel__cell a
      	   {
      	   position: relative;
      	   margin-top: 17px;
      	   max-width: 95%;
      	   }
      	      	      	
      	   #carousel__cell a img
      	      {
      	      width: auto;
      	      height: auto;
      	      max-width: 100%;
      	      border: solid 5px rgb(255,255,255);
      	      }
      	      @media only screen and (max-width: 399px) { #carousel__cell a img {max-height: 200px;} }
      	      @media only screen and (min-width: 400px) and (max-width: 769px) { #carousel__cell a img {max-height: 250px;} }
      	      @media only screen and (min-width: 770px) and (max-width: 1199px) { #carousel__cell a img {max-height: 350px;} }
      	      @media only screen and (min-width: 1200px) and (max-width: 1699px) { #carousel__cell a img {max-height: 450px;} }
      	      @media only screen and (min-width: 1700px) { #carousel__cell a img {max-height: 500px;} }
      	      	      	
      	#carousel__cell #link_float
      	   {
      	   position: absolute;
      	   top: 0;
      	   right: 0;
      	   height: 100%;
      	   text-align: right;
      	   color: rgb(255,255,255);
      	   pointer-events: none;
      	   }
      	      	      	
      	   #carousel__cell #link_float a
      	      {
      	      position: relative;
      	      pointer-events: auto;
      	      }
      	      	      	
      	      #carousel__cell #link_float a #infokreis
      	      	{
      	      	position: relative;
      	      	box-sizing: border-box;
      	      	border-style: solid;
      	      	
      	      	border-color: rgb(255,255,255);
      	      	border-radius: 100%;
      	      	box-shadow: 0px 0px 3px rgb(0,0,0);
      	      	margin: 10px 10px 0px 0px;
      	      	padding: 0px 0px 0px 0px;
      	      	text-align: center;
      	      	font-family: asvcodar;
      	      	color: rgb(255,255,255);
      	      	background-color: rgb(48,81,160);
      	      	transition: all ease 0.8s;
      	      	}
      	      	@media only screen and (max-width: 399px) { #carousel__cell #link_float a #infokreis {border-width: 3px; width: 30px; height: 30px; font-size: 45%;} }
      	      	@media only screen and (min-width: 400px) and (max-width: 769px) { #carousel__cell #link_float a #infokreis {border-width: 3px; width: 40px; height: 40px; font-size: 60%;} }
      	      	@media only screen and (min-width: 770px) and (max-width: 1199px) { #carousel__cell #link_float a #infokreis {border-width: 5px; width: 50px; height: 50px; font-size: 70%;} }
      	      	@media only screen and (min-width: 1200px) and (max-width: 1699px) { #carousel__cell #link_float a #infokreis {border-width: 3px; width: 40px; height: 40px; font-size: 60%;} }
      	      	@media only screen and (min-width: 1700px) { #carousel__cell #link_float a #infokreis {border-width: 3px; width: 40px; height: 40px; font-size: 60%;} }
      	      	      	
      	      	#carousel__cell #link_float a #infokreis:hover
      	      	   {
      	      	   border-color: rgb(48,81,160);
      	      	   box-shadow: 0px 0px 3px rgb(255,255,255);
      	      	   color: rgb(48,81,160);
      	      	   background-color: rgb(255,255,255);
      	      	   transition: all ease 0.8s;
      	      	   }
      	      	      	
      	      	@media only screen and (max-width: 399px) { #carousel__cell #link_float a #infokreis div {line-height: 30px; margin-top: 4px;} }
      	      	@media only screen and (min-width: 400px) and (max-width: 769px) { #carousel__cell #link_float a #infokreis div {line-height: 40px; margin-top: 6px;} }
      	      	@media only screen and (min-width: 770px) and (max-width: 1199px) { #carousel__cell #link_float a #infokreis div {line-height: 50px; margin-top: 5px;} }
      	      	@media only screen and (min-width: 1200px) and (max-width: 1699px) { #carousel__cell #link_float a #infokreis div {line-height: 40px; margin-top: 6px;} }
      	      	@media only screen and (min-width: 1700px) { #carousel__cell #link_float a #infokreis div {line-height: 40px; margin-top: 6px;} }
      	      	      	
#carousel-options
   {
   z-index: 2;
   position: relative;
   width: 10%;
   text-align: center;
   }
      	      	      	
   #carousel-options #previous-button, #carousel-options #next-button
      {
      width: 100%;
      height: auto;
      }
      	      	      	
      #carousel-options #previous-button img, #carousel-options #next-button img
      	{
      	width: auto;
      	height: auto;
      	max-width: 100%;
      	-webkit-filter: brightness(1);
      	filter: brightness(1);
      	transition: all ease 0.5s;
      	cursor: pointer;
      	}
      	      	      	
      #carousel-options #previous-button img:hover, #carousel-options #next-button img:hover
      	{
      	-webkit-filter: brightness(0.9);
      	filter: brightness(0.9);
      	transition: all ease 0.5s;
      	}