@font-face {
	font-family: 'Gilroy-Bold';
	src: url('fonts/Gilroy-Bold.woff2');
  }


body{
	font-family: 'Gilroy-Bold', sans-serif;
}

/****** HEADLINES ******/
h2{
	font-size:1.5rem;
	text-transform: uppercase;
	font-style: bold;
	margin:0.5rem 0;
	padding:0 1rem;
	line-height: 1rem;
  }
  
  h3{
	font-size:1.4rem;
	text-transform: uppercase;
	font-style: bold;
	line-height: 1.5rem;
  }

.color1{
	color:#272cfd;
	line-height: 0.3rem;
}

.color2{
	font-weight:100;
	font-size:1.2rem;
	font-style: normal;
	font-family: 'Work Sans', sans-serif;
	padding-bottom: 55px;
}

.logoarea{
	padding:0;
	height:15%;
	position:absolute;
	width:99%;
	z-index: 0;
}
.logo{
  text-align:left;
  justify-content: left;
  background-color:transparent;
}

.logo img{
	position: absolute;
	top: 12px;
	left:12px;
  height:60%;
  width:17%;
}

.tap img{
	position: absolute;
	height: 65px;
	width: 100%;
	bottom: 110px; 
	left: 0px;
	z-index: 0;
}

/****** Button Animation ******/

.btn-default{
	font-weight:200;

	box-shadow: 0 0 0 0 #fff27e;
	transform: scale(1);
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 #fff27e;
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

#taparea{
	position:absolute;
	bottom:0;
	left:1%;
	width:98%;
	text-align:center;
	height:70%;
	display:flex;
	align-items:center;
  justify-content:center;
	cursor:pointer;
	z-index: 1;
}
.instruction,
.imagetext,
.resulttext{
	width:100%;
	padding:2%;
	letter-spacing:0.1rem;
}
.resulttext{
	height:100%;
}
.content{
	align-items: center;
	height:100%;
	padding-top:35%;
}
#content2{
	background-image:url("bg2.jpg");
	background-position:bottom center;
	background-size:cover;
	display:none;
	opacity: 0;
	transition: opacity ease 0.5s;
}
#content1{
	background-image:url("bg1.jpg");
	background-position:bottom center;
	background-size:cover;
}
#content1.hide{
	display: none;
}
#content2.reveal{
  display: flex;
}
#content2.fade {
	opacity: 1;
}
@keyframes fade_in_show {
     0% {
          opacity: 0;
     }

     100% {
          opacity: 1;
     }
}

/****** CTA ******/
.cta{
  width:80%;
  height:15%;
  min-height:35px;
  margin:1.5rem auto;
  font-size: 1.1rem ;
}
.retry{
	z-index: 1;
	cursor:pointer;
	align-self:flex-end;
	position:absolute;
	top: 12px;
	right: 12px; 
	
}
.lightson{
	padding:5%;
	cursor:pointer;
	align-self:flex-end;
	color:#fff;
	font-weight:500;
	text-transform:uppercase;
}
.lightson .btn{
	margin-left:5px;
}