@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
	
	
		* { box-sizing: border-box; }
	
		body {	
			font-family: 'Lato', sans-serif;
			background: rgb(0,2,46);
			background: linear-gradient(0deg, rgba(0,2,46,1) 0%, rgba(0,152,196,1) 100%);
			padding: 0px;
			margin: 0px;
			color: #fff;
			padding-bottom: 50px;
			height: 100%;
			background-attachment: fixed !important;
		}	
		
		.pet { background-position: center bottom; background-repeat: no-repeat; background-size: contain; display: block; width: 100%; position: absolute; bottom: 0px; left: 0px; z-index: -1; padding-top: 300px;  }
		
		
		
		.timer { position: absolute; top: 30px; right: 40px; font-size: 42px; }
		.container { padding: 30px; }
		.wrapper { max-width: 1180px; margin-left: auto; margin-right: auto; }

		
		.logo { text-align: center; }
		.logo img { max-width: 300px; margin-top: 25px; }
	

		.cta { background: #f5c304; display: inline-block;border-radius: 20px 10px 20px 5px; box-sizing: border-box; padding: 15px 40px; transition: all 0.4s ease-in-out; box-shadow: 7px 7px 0px 2px rgba(170,58,20,1); font-size: 20px; text-decoration: none; font-weight: 900; color: #000; top: 0px; left: 0px; position: relative; }
		.cta:hover { box-shadow: 0px 0px 0px 0px rgba(170,58,20,1); top: 8px; left: 8px; /* -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); */  }
	
	
		.video a.next { background: rgba(255, 255, 255, 0.0); position: absolute; left: 0px; top: 0px; height: 100vh; z-index: 9999; width: 100%; }
		.video video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; bottom: 0; left: 0; }
		.video .show-mobile { display: none; }
		
	
		.intro { margin-top: 50px; }
		.intro .introbox { float: left; width: 50%; text-align: center; min-height: 600px; background-position: center bottom; background-repeat: no-repeat; background-size: 220px; padding-top: 50px; }
		.intro .introbox.cat { background-image: url('cat_bg.png'); border-right: 1px solid #003a62;  }
		.intro .introbox.dog { background-image: url('dog_bg.png'); border-left: 1px solid #00608b; }
		.intro .introbox h2 { font-size: 42px; }
	
	
		.question { margin-top: 50px; margin-bottom: 100px; max-width: 800px; margin-left: auto; margin-right: auto; }
		.question .no { text-align: center; font-size: 40px; font-weight: 900; display: block; margin-bottom: 10px;  }
		.question .text { font-size: 24px; line-height: 1.4; text-align: center; }
		
		
		.answer {  }
		.answer input[type=radio] { display: none; }
		.answer .option label { width: calc(33.33% - 30px); margin-left: 15px; margin-right: 15px; float: left; border-radius: 25px 10px 40px 10px; border: 2px solid #00B1DD; box-sizing: border-box; padding: 20px; transition: all 0.4s ease-in-out; }
		.answer .option label span { display: none; }
		.answer .option label:hover { background: #00B1DD; cursor: pointer; cursor: pointer; box-shadow: 0px 2px 13px 1px rgba(0, 0, 0, 0.275); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05);  }
		.answer .option:nth-child(1) label:before { content: "A."; margin-right: 6px; }
		.answer .option:nth-child(2) label:before { content: "B."; margin-right: 6px; }
		.answer .option:nth-child(3) label:before { content: "C."; margin-right: 6px; }
		.answer .option label span { margin-right: 10px; }
			
		
		.resulttext { margin-top: 50px; margin-bottom: 50px; }
		.resulttext .point { text-align: center; display: block; margin-left: auto; margin-right: auto; width: 360px; max-width: 100%; border-radius: 50px; padding: 10px;  border: 3px solid #eea645; color: #fff; font-size: 18px;  }
		.resulttext h1 { text-align: center; font-size: 24px; display: block; margin-top: 30px; margin-bottom: 60px; }
		.resultwrap {display: inline-flex; flex-wrap: wrap; }	
		.resultwrap .result { width: 30%; margin-right: 1.666%; margin-left: 1.666%; margin-bottom: 2.5%; border-radius: 25px 10px 40px 10px; border: 2px solid #00B1DD; padding: 20px; transition: all 0.4s ease-in-out;background: rgba(255, 255, 255, 0.2); }
		.resultwrap .result .no { height: 0px; }
		.resultwrap .result .no span { display: block; position: relative; height: 40px; width: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #00B1DD; top: -35px; left: -35px; font-weight: 900; }
		.resultwrap .result .text { font-size: 14px; line-height: 1.2; margin-bottom: 20px; margin-top: 15px; }
		.resultwrap .result .option { padding: 14px 20px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50px; font-size: 12px; margin-bottom: 8px; background: rgba(166, 225, 196, 0.20); }	
		.resultwrap .result .option.selected { background: #e46761; border: 1px solid #fff; box-shadow: 0px 2px 13px 1px rgba(0, 0, 0, 0.275); }
		.resultwrap .result .option.selected.correct:before { content: "✅"; margin-right: 10px; margin-left: -5px;  }
		.resultwrap .result .option.correct { background: #509562; }
		.resultwrap .result.selected .option.selected { background: #509562; }	
		/*.result.selected { }*/
		/*.result.selected .no span { background: white; color: green; }*/



		.data { position: fixed; bottom: 0px; left: 0; width: 100%; z-index: 999; background: #000; padding: 10px; text-align: center; display: none; }
		.data input { width: 50px; }



		.loading { text-align: center; }
		.loading h1 { margin-top: 60px; }
		.loading a { padding-left: 50px !important; padding-right: 50px !important; display: inline-block; border-radius: 25px 10px 40px 10px; border: 2px solid #00B1DD; box-sizing: border-box; padding: 20px; transition: all 0.4s ease-in-out; color: #fff; text-decoration: none; opacity: 80%; }




		.compliance { padding-top: 50px; color: #ccc; text-align: center; font-size: 13px; }





	@media screen and (max-width: 720px) { 
		
		.logo img { max-width: 150px; margin-top: 0px; }
		
		
		.cta { background: #f5c304; display: inline-block;border-radius: 20px 10px 20px 5px; box-sizing: border-box; padding: 12px 30px; transition: all 0.4s ease-in-out; box-shadow: 6px 7px 0px 2px rgba(170,58,20,1); font-size: 16px; text-decoration: none; font-weight: 900; color: #000; }
		
		
		.pet { display: none; }
		.timer { position: absolute; top: 20px; right: 20px; font-size: 22px; }

		.video .show-mobile { display: block; }
		.video .hide-mobile { display: none; }
		.video video { object-fit: cover; width: 100vw; height: 100vh; position: fixed; bottom: 0px; left: 0; }


		.intro { margin-top: 25px; width: calc(100% + 40px); margin-left: -20px; }
		.intro .introbox { float: left; width: calc(50% - 10px); min-height: auto; text-align: center;  background-repeat: no-repeat; background-size: 120px; padding-top: 25px; padding-bottom: 200px; }
		.intro .introbox.cat { background-image: url('cat_bg.png'); border-right: none; margin-right: 10px;  }
		.intro .introbox.dog { background-image: url('dog_bg.png'); border-left: none; margin-left: 10px; }
		.intro .introbox h2 { font-size: 20px; }


		.question { margin-top: 25px; margin-bottom: 25px; }
		.question .no { text-align: center; font-size: 26px;  margin-bottom: 5px; }
		.question .text { font-size: 20px; line-height: 1.2; text-align: center; }
		.answer .option label { width: 100%; margin-left: 0px; margin-right: 0px; padding: 20px; margin-bottom: 20px;}
	
	
		.loading { text-align: center; }
		.loading h1 { font-size: 20px; margin-top: 60px; }
		.loading a { padding-left: 50px !important; padding-right: 50px !important; display: inline-block; border-radius: 25px 10px 40px 10px; border: 2px solid #00B1DD; box-sizing: border-box; padding: 20px; transition: all 0.4s ease-in-out; color: #fff; text-decoration: none; opacity: 80%; }
	
	
		.resulttext { margin-top: 50px; margin-bottom: 25px; }
		.resulttext h1 {  font-size: 20px; display: block; margin-top: 30px; margin-bottom: 50px; }
		.resultwrap .result { width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 20px; }
	
	
	
	}
	
	
	
	
	
	
	
/* ANIMATION */	
	
	
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.answer, .question {  
  animation: 1s ease-out 0s 1 slideInFromLeft;

}

.result {  
  animation: 1s ease-out 0s 1 slideInFromLeft;

}




@keyframes ldio-54cgxfwqfic {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-54cgxfwqfic div {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 20px solid #93dbe9;
  border-top-color: transparent;
  border-radius: 50%;
}
.ldio-54cgxfwqfic div {
  animation: ldio-54cgxfwqfic 3s linear infinite;
  top: 100px;
  left: 100px
}
.loadingio-spinner-rolling-1b7yocw1l2j {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  background: rgba(NaN, NaN, NaN, 0);
}
.ldio-54cgxfwqfic {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-54cgxfwqfic div { box-sizing: content-box; }