/*------------------------------------*\
			0. IMPORT-FONTS
		\*------------------------------------*/

		@font-face {
			font-family: Akzidenz Grotesk;
			font-weight: 700;
			src: url("../fonts/akzidenz-grotesk-bq-bold.ttf") format("truetype"); }
		
		@font-face {
			font-family: Akzidenz Grotesk;
			font-weight: 500;
			src: url("../fonts/akzidenz-grotesk-bq-medium.ttf") format("truetype"); }
		
		@font-face {
			font-family: Akzidenz Grotesk;
			font-weight: 300;
			src: url("../fonts/akzidenz-grotesk-bq-regular.ttf") format("truetype"); }
		
		@font-face {
			font-family: Akzidenz Grotesk;
			font-weight: 100;
			src: url("../fonts/akzidenz-grotesk-bq-light.ttf") format("truetype"); }



		body {
			font-family: 'Akzidenz Grotesk', sans-serif;
		}	
		
		.output {
			/* background-color: rgba(0,0,0, 0.9); */
			background-color: #9f1a15;
			background-image: url('../code/assets/images/bg.gif');
			width: 100vw;
			height: 50px;
			color: #fff;
			top: 0;
			left: 0;
			z-index: 9999;
			position: absolute;
			text-align: center;
			font-family: 'Akzidenz Grotesk', sans-serif;
			height: 100vh;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 28px;
		}

		.codebtn {
			margin: auto;
			margin-top: 16px;
			margin-bottom: 16px;
		}

		.percent {
			padding: 32px;
			background-color: #fff;
			color: #000;
			border-radius: 15px;
			box-shadow: 
			font-family: 'Akzidenz Grotesk', sans-serif;
		}

		.codebtn .code_btn {
			width: 200px;
			height: 50px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0,0,0, 1);
			border-radius: 15px;
			cursor: pointer;
			box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
			
		}
		

		.codebtn a {
			color: #fff !important;
			text-transform: uppercase;
			font-family: 'Akzidenz Grotesk', sans-serif;
			text-decoration: none;
			font-size: 14px;
		}

		.codebtn .code_btn:hover {
			background-color: rgba(255,255,255, 1);
			color: #000;
		}
		
		.info {
			position: absolute;
			bottom: 0;
			width: 100%;
			z-index: 99;
			/* left: calc(50vw - 130px); */

		}

		.info .btn {
			background-color: rgba(255, 255, 255, 0.5);
			padding: 8px;
			font-size: 24px;
			border-radius: 10px 10px 0 0;
			cursor: pointer;
			font-family: 'Akzidenz Grotesk', sans-serif;
			z-index: 99;
			text-align: center;
			height: auto;
			display: flex;
			flex-direction: column;
		}

		.info a {
			color: #000000;
			text-decoration: none;
		}

		.info .error-btn {
			background-color: rgba(255, 0, 0, 0.8);
			color: yellow;
			padding: 8px;
			font-size: 24px;
			border-radius: 10px;
			cursor: pointer;
			font-family: 'Akzidenz Grotesk', sans-serif;
			z-index: 99;
			text-align: center;

			animation-name: puls;
			animation-duration: 4s;
		}

		.info .extern-btn {
			background-color: rgba(0, 0, 0, 0.8);
			color: #fff;
			padding: 8px;
			font-size: 24px;
			border-radius: 10px;
			cursor: pointer;
			font-family: 'Akzidenz Grotesk', sans-serif;
			z-index: 99;
			text-align: center;
			animation-iteration-count: infinite;
			animation-name: puls;
			animation-duration: 2s;
		}
		
		
		.lds {
		  display: inline-block;
		  position: relative;
		  width: 80px;
		  height: 80px;
		}
		.lds div {
		  display: inline-block;
		  position: absolute;
		  left: 8px;
		  width: 16px;
		  background: #fff;
		  animation: lds 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
		}
		.lds div:nth-child(1) {
		  left: 8px;
		  animation-delay: -0.24s;
		}
		.lds div:nth-child(2) {
		  left: 32px;
		  animation-delay: -0.12s;
		}
		.lds div:nth-child(3) {
		  left: 56px;
		  animation-delay: 0;
		}
		@keyframes lds {
		  0% {
			top: 8px;
			height: 64px;
		  }
		  50%, 100% {
			top: 24px;
			height: 32px;
		  }
		}