/* @import must be at top of file, otherwise CSS will not work */
@import url('//hello.myfonts.net/count/2f2338');
@font-face
{
    font-family: 'Calibri-Bold';

    src: url('/typo3conf/ext/wr/Resources/Public/webfonts/2F2338_0_0.eot');
    src: url('/typo3conf/ext/wr/Resources/Public/webfonts/2F2338_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2F2338_0_0.woff2') format('woff2'),url('../webfonts/2F2338_0_0.woff') format('woff'),url('../webfonts/2F2338_0_0.ttf') format('truetype');
}
@font-face
{
    font-family: 'Calibri';

    src: url('/typo3conf/ext/wr/Resources/Public/webfonts/2F2338_1_0.eot');
    src: url('/typo3conf/ext/wr/Resources/Public/webfonts/2F2338_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2F2338_1_0.woff2') format('woff2'),url('../webfonts/2F2338_1_0.woff') format('woff'),url('../webfonts/2F2338_1_0.ttf') format('truetype');
}


/* BODY FOR DEMO */
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}

/* CANVAS */
#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

/* LOADING ANIMATION */
.loading-dots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-dots::after {
  content: '';
  display: block;
  color: rgba(35, 95, 172, 0.7);
  width: 125px;
  height: 60px;
  background: radial-gradient(circle closest-side, currentColor 90%, #0000) 0% 50%,
    radial-gradient(circle closest-side, currentColor 90%, #0000) 50% 50%,
    radial-gradient(circle closest-side, currentColor 90%, #0000) 100% 50%;
  background-size: calc(100% / 3) 30px;
  background-repeat: no-repeat;
  animation: d3 1600ms infinite linear;
}

@keyframes d3 {
  20% {
    background-position: 0% 0%, 50% 50%, 100% 50%;
  }

  40% {
    background-position: 0% 100%, 50% 0%, 100% 50%;
  }

  60% {
    background-position: 0% 50%, 50% 100%, 100% 0%;
  }

  80% {
    background-position: 0% 50%, 50% 50%, 100% 100%;
  }
}

/* Labels */
h1 {
	position:absolute;
	left:0;
	top:0;
	right:0;
	margin:0;
	padding:8px 0;
	color:#fff;
	background-color:#008ccf;
	font-size:28px;
	text-transform:uppercase;
	text-align:center;
	z-index:10;
}
.red-dot-award {
	position:absolute;
	right:10px;
	top:60px;
	width:280px;
	z-index:9;
	color:#000;
	font-weight:bold;
	font-size:18px;
}
.red-dot-award span {
	padding-left:16px;
}
.red-dot-award img {
	max-width:100%;
	width:100%;
	height:auto;
}
.product-link {
	position:absolute;
	left:auto;
	bottom:0;
	right:0;
	color:#fff;
	background-color:#008ccf;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	padding:5px 20px;
	z-index:10;
}
.product-link a {
	color:#fff;
	text-decoration:none;
}
.threedicon {
	position:absolute;
	left:0;
	bottom:0;
	right:auto;
	text-align:center;
	font-size:12px;
	color:#000;
	font-style:italic;
	padding-left:10px;
	padding-right:10px;
}
.threedicon span {
	display:block;
}
.threedicon img {
	width:60px;
	margin:10px;
}
@media screen and ( max-width: 820px ) {
	.red-dot-award {
		width:180px;
	}
}
@media screen and ( max-width: 480px ), screen and ( max-height: 480px ) {
	h1 {
		font-size:18px;
		padding-left:35px;
		padding-right:35px;
	}
	.red-dot-award {
		width:100px;
		top:75px;
		font-size:12px;
		display:none;
	}
	.red-dot-award span {
		padding-left:6px;
	}
	.product-link {
		left:0;
		text-align:center;
	}
	#renderCanvas {
		/*margin-top:200px;
		height:auto;*/
	}
	.threedicon {
		bottom:36px;
	}
	.threedicon {
		display:none;
	}
}