:root {
	--bs-primary: #0083c2;
}

.btn-primary {
	background-color: #0083c2;
	border-color: #0083c2;
}
.btn-primary:hover,
.btn-primary:active {
	background-color: #00a5f5;
	border-color: #00a5f5;
}
	background-color: #00a5f5;
	border-color: #00a5f5;
}

.btn-outline-primary {
	color: #0083c2;
	border-color: #0083c2;
}

.btn-outline-primary:hover {
	background-color: #0083c2;
	border-color: #0083c2;
}

.btn-outline-primary:active {
	background-color: #00a5f5;
	border-color: #00a5f5;
}


.loading_container {
	position: relative;
	min-height: 200px;
}

.loading {
  font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
  text-transform:uppercase;
  
  width:200px;
  text-align:center;
  line-height:50px;
  
  position:absolute;
  left:0;right:0;top:50%;
  margin:auto;
  transform:translateY(-50%);
}

.loading span {
  position:relative;
  z-index:999;
  color:#fff;
}
.loading:before {
  content:'';
  background: #0083c2;
  width:178px;
  height:36px;
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
  
  animation:2s loadingBefore infinite ease-in-out;
}

@keyframes loadingBefore {
  0%   {transform:translateX(-14px);}
  50%  {transform:translateX(14px);}
  100% {transform:translateX(-14px);}
}


.loading:after {
  content:'';
  background: #80bd01;
  width:14px;
  height:60px;
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
  opacity:.5;
  
  animation:2s loadingAfter infinite ease-in-out;
}

@keyframes loadingAfter {
  0%   {transform:translateX(-70px);}
  50%  {transform:translateX(70px);}
  100% {transform:translateX(-70px);}
}

#results .genuine_code {
	font-weight: bold;
}


/* animation styling */

.genuine_container {
	text-align: center;
	margin: 20px 0px;
}

.animated_genuine {
	font-size: 26px;
}

/* Small devices (landscape phones, less than 768px)*/
@media (min-width: 576px) {
	.animated_genuine {
		font-size: 38px;
	}
}

/* Medium devices (tablets, less than 992px)*/
@media (min-width: 768px) {
	.animated_genuine {
		font-size: 50px;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.animated_genuine {
		font-size: 60px;
	}
}

.animated_genuine span {
	display: inline-block;
}

.animated_genuine span:nth-of-type(2) { 	animation-delay: .05s; }
.animated_genuine span:nth-of-type(3) { 	animation-delay: .1s; }
.animated_genuine span:nth-of-type(4) { 	animation-delay: .15s; }
.animated_genuine span:nth-of-type(5) { 	animation-delay: .2s; }
.animated_genuine span:nth-of-type(6) { 	animation-delay: .25s; }
.animated_genuine span:nth-of-type(7) { 	animation-delay: .3s; }
.animated_genuine span:nth-of-type(8) { 	animation-delay: .35s; }
.animated_genuine span:nth-of-type(9) { 	animation-delay: .4s; }
.animated_genuine span:nth-of-type(10) { 	animation-delay: .45s; }
.animated_genuine span:nth-of-type(11) { 	animation-delay: .5s; }
.animated_genuine span:nth-of-type(12) { 	animation-delay: .55s; }
.animated_genuine span:nth-of-type(13) { 	animation-delay: .6s; }
.animated_genuine span:nth-of-type(14) { 	animation-delay: .65s; }
.animated_genuine span:nth-of-type(15) { 	animation-delay: .7s; }
.animated_genuine span:nth-of-type(16) { 	animation-delay: .75s; }
.animated_genuine span:nth-of-type(17) { 	animation-delay: .8s; }
.animated_genuine span:nth-of-type(18) { 	animation-delay: .85s; }
.animated_genuine span:nth-of-type(19) { 	animation-delay: .9s; }
.animated_genuine span:nth-of-type(20) { 	animation-delay: .95s; }


.animated_genuine span {
	color: #80bd01;
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight .5s forwards;
}


@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color: #80bd01;
	}

	60% {
		color: #0083c2;
	}

	80% {
		transform: translate(0) scale(2);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}



#results .notgenuine_code {
	font-weight: bold;
}


/* animation styling */

.notgenuine_container {
	text-align: center;
	margin: 20px 0px;
}

.animated_notgenuine {
	font-size: 26px;
}

/* Small devices (landscape phones, less than 768px)*/
@media (min-width: 576px) {
	.animated_notgenuine {
		font-size: 38px;
	}
}

/* Medium devices (tablets, less than 992px)*/
@media (min-width: 768px) {
	.animated_notgenuine {
		font-size: 50px;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.animated_notgenuine {
		font-size: 60px;
	}
}

.animated_notgenuine span {
	display: inline-block;
}

.animated_notgenuine span:nth-of-type(2) { 	animation-delay: .05s; }
.animated_notgenuine span:nth-of-type(3) { 	animation-delay: .1s; }
.animated_notgenuine span:nth-of-type(4) { 	animation-delay: .15s; }
.animated_notgenuine span:nth-of-type(5) { 	animation-delay: .2s; }
.animated_notgenuine span:nth-of-type(6) { 	animation-delay: .25s; }
.animated_notgenuine span:nth-of-type(7) { 	animation-delay: .3s; }
.animated_notgenuine span:nth-of-type(8) { 	animation-delay: .35s; }
.animated_notgenuine span:nth-of-type(9) { 	animation-delay: .4s; }
.animated_notgenuine span:nth-of-type(10) { 	animation-delay: .45s; }
.animated_notgenuine span:nth-of-type(11) { 	animation-delay: .5s; }
.animated_notgenuine span:nth-of-type(12) { 	animation-delay: .55s; }
.animated_notgenuine span:nth-of-type(13) { 	animation-delay: .6s; }
.animated_notgenuine span:nth-of-type(14) { 	animation-delay: .65s; }
.animated_notgenuine span:nth-of-type(15) { 	animation-delay: .7s; }
.animated_notgenuine span:nth-of-type(16) { 	animation-delay: .75s; }
.animated_notgenuine span:nth-of-type(17) { 	animation-delay: .8s; }
.animated_notgenuine span:nth-of-type(18) { 	animation-delay: .85s; }
.animated_notgenuine span:nth-of-type(19) { 	animation-delay: .9s; }
.animated_notgenuine span:nth-of-type(20) { 	animation-delay: .95s; }


.animated_notgenuine span {
	color: #b30000;
	opacity: 0;
	transform: translate(-300px, 0) scale(0);
	animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		color: #b30000;
	}

	80% {
		transform: translate(20px, 0) scale(1);
		color: #b30000;
	}

	99% {
		transform: translate(0) scale(1.2);
		color: #0083c2;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: #b30000;
	}
}