html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
body { line-height: normal; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

:root {
	--background-size: 148vw;
}

/* Baseline for the font-size value */
html {
	/* Minimum 16x, and grows more slowly */
  /* (half the rate of screen growth) */
  font-size: calc(1em + 0.5vw);

  /* Line-height based on font-size, */
  /* with addition viewport-relative growth */
  line-height: calc(1.1em + 0.5vw);
}

body {
	font-family: "Poppins", sans-serif;
	color: #707070;
	font-size: 100%;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	/* border: 1px solid black; */
	/* background-color: pink; */
}

form {
	padding: 1% 5%;
}

input {
	border: 1px solid #707070;;
	border-radius: 2px;
}

table {
  border-collapse: collapse;
  width: 90%;
  margin: 15px auto;
}

table caption {
	padding: 2% 0;
}

table#clicks-table {
	table-layout: fixed;
	width: 90%;
}

th.sml-font {
	color: #505050;
  text-align: center;
  border-bottom: 1px solid #ddd;
	padding: 2px 5px;
	vertical-align: middle;
}

td.xxsml-font {
  color: #707070;
  text-align: center;
  border-bottom: 1px solid #ddd;
	padding: 2px 5px;
	vertical-align: middle;
}

th {
	font-weight: bold;
	color: #050505;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
	text-align: center;
  padding: .35rem;
}

table th {
	text-align: center;
}

strong {
  font-weight: bold;
}

p.sml-font, p.l-font, p.xsml-font, p.xxsml-font{
	padding: 1% 5%;
}

li.sml-font {
	padding: 0 5%;
}

.customcheck {
  position: relative;
}

.customcheck input {
  display: none;
}

.customcheck input~.checkmark {
  background: #ca2717;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 4px;
  vertical-align:middle;
}

.customcheck input~.checkmark:after,
.customcheck input~.checkmark:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #fff;
  left: 12px;
  top: 4px;
}

.customcheck input~.checkmark:after {
  transform: rotate(-45deg);
  z-index: 1;
}

.customcheck input~.checkmark:before {
  transform: rotate(45deg);
  z-index: 1;
}

.customcheck input:checked~.checkmark {
  background: #67ca55;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 4px;
}

.customcheck input:checked~.checkmark:after {
  display: none;
}

.customcheck input:checked~.checkmark:before {
  background: none;
  border: 2px solid #fff;
  width: 6px;
  top: 2px;
  left: 9px;
  border-top: 0;
  border-left: 0;
  height: 13px;
  top: 2px;
}

/* .nav-ul {
	list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
} */

/* .nav-ul li a {
  text-align: center;
  padding: 0px 20px;
  text-decoration: none;
	font-weight: normal;
	float: right;
} */

.txt-ul {
	list-style-type: disc;
	list-style-position: inside;
}

.txt-ol {
	list-style-type: lower-alpha;
	list-style-position: inside;
}

/* Typography */
.xxl-font {
		font-size: 1.40rem;
		color: #010214A6;
		text-align: center;
}

.xl-font {
		font-size: 1.15rem;
		color: #010214A6;
		text-align: justify;
}

.l-font {
		font-size: 1rem;
		color: #010214A6;
		text-align: justify;
}

/* .l-font {
    font-size: 2.0vw;
		color: #010214A6;
		text-align: justify;
} */

.sml-font {
		font-size: .75rem;
		color: #010214A6;
		text-align: justify;
}

.xsml-font {
		font-size: .7rem;
		color: #010214A6;
		text-align: justify;
}

/* .xsml-font {
    font-size: 1.25vw;
		color: #010214A6;
		text-align: justify;
} */

.xxsml-font {
		font-size: .5rem;
		color: #010214A6;
		text-align: justify;
}

.txt-footer {
	text-align: center;
}

.review-txt {
	background-color: #9782ED;
	color: white;
	text-align: left;
	margin: 0;
	padding: 1%;
}

a:link {
	color: #010214A6;
  text-decoration: none;
}

a:visited {
	color: #010214A6;
  text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #010214A6;
  text-decoration: underline;
}

a:active {
	color: #010214A6;
  text-decoration: underline;
}

img {
	/* pointer-events: none; */
	/* max-width: 100%; */
	/* display: block; */
  /* margin-left: auto;
  margin-right: auto; */
  vertical-align: middle;
}

#platform-red-txt, #version-red-txt {
	font-weight: bold;
	color: #CA2717;
	padding: 5px 10px;
	text-align: justify;
}

#platform-green-txt, #version-green-txt {
	font-weight: bold;
	color: #67CA55;
	padding: 2px 5px;
	text-align: justify;
}

#wrapper {
	 /* width: 100%;
	 min-width: 360px;
	 margin: 0 auto; */
   height: var(--background-size);

	 /* border: 1px solid black; */
	 /* background-color: #00000055; */
 }

 /* #home {
	 padding: 2% 25%;
 } */

 /* #logo {
	 padding: 1%;
 } */

 /* #bannerContainer {
 	position: relative;
 } */

 /* #videoBanner{
 	background: pink;
 } */

 /* video {
 	width: 100%;
 } */

 /* #boxBanner {
 	position: absolute;
 	bottom: 0;
 	opacity: 1.0;
 	margin: 0 auto;
  padding: 3% 5%;
 } */

/* Style the video: 100% width and height to cover the entire window */
/* #elloveoPreview {
	margin: 0 auto;
	width: 100%;
} */

/* #pauseBtn {
	font-size: 1rem;
	color: rgb(107, 123, 180);
} */

 /* #game, #app-store {
	padding: 1% 20% 1% 20%;
 } */

  /* #nav-bar, #game-txt, #about, #reviews {
	padding: 1% 5% 1% 5%;
 } */

 /* #family_1 {
	padding: 2% 25% 2% 5%;
 } */

 /* #family_2{
	 padding: 2% 5% 2% 25%;
 } */

 /* #family_3{
	 padding: 2% 25% 2% 5%;
 } */

 /* #nsf {
	 padding: 1% 30% 1% 30%;
 } */

 /* #caru {
	padding: 1% 35% 1% 35%;
 } */

 #caru_logo {
   margin: 10px auto;
   height: 3vw;
 }

 /* #tryfree {
	 padding: 1% 35% 1% 35%;
 } */

 /* #testfree {
	 padding: 1% 10% 1% 10%;
 } */

 /* #QRcode {
	 padding: 1% 15% 1% 15%;
 } */

 /* #footer {
	 padding: 2% 0 1% 0;
 } */

 #comp-header {
	 text-align: center;
 }

 #test-1-desktop {
	display: flex;
  height: 45vw;
 }

 #test-2-mobile {
	 display: none;
   height: 40vw;
 }

 #comp-table {
	 margin-left: auto;
	 margin-right: auto;
	 /* padding: 1% 20% 1% 20%; */
	 width: 60%;
	 text-align: justify;
 }

 #playFree_img {
   height: 7vw;
 }

 #qrcode_img, #appcode_img {
   height: 25vw;
 }

 .section {
	 /* margin: 10px; */

	 /* padding: 2%; */
	 /* border: 1px solid black; */
	 /* background-color: #f0f0f055; */
 }

.columns {
	display: flex;
	justify-content: space-between;
	align-items: center;

	/* padding: 2%; */
	/* border: 1px solid black; */
	/* background-color: #ff666655; */
}

/* For desktop: */
/* .col-1 { width: 20.0%; }
.col-2 { width: 40.0%; }
.col-3 { width: 60.0%; }
.col-4 { width: 80.0%; }
.col-5 { width: 100.0%; } */

.col-1 { width: 8.33%; }
.col-2 { width: 16.67%; }
.col-3 { width: 25.00%; }
.col-4 { width: 32.33%; }
.col-5 { width: 41.67%; }
.col-6 { width: 50.00%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.67%; }
.col-9 { width: 75.00%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.67%; }
.col-12 { width: 100.0%; }

.col-bg {
	/* padding: 2%; */
	/* border: 1px solid black; */
	/* background-color: #66cc6655; */
}

.margins {
	padding: 15px 10px 15px 10px;
}

.margin-auto-center {
	margin: 0 auto;
}

.row-5 { height: 5vw; }
.row-16 { height: 16vw; }

.txt-footer {
	text-align: center;
}

.menu_btn_img {
	height: 1.25vw;
}

.logo_img {
	height: 10.0vw;
}

@media only screen and (max-width: 767px) {

  .col-1 { width: calc(8.33% * 1.5); }
	.col-2 { width: calc(16.67% * 1.5); }
	.col-3 { width: calc(25.00% * 1.5); }
	.col-4 { width: calc(32.33% * 1.5); }
	.col-5 { width: calc(41.67% * 1.5); }
	.col-6 { width: calc(50.00% * 1.5); }
	.col-7 { width: calc(58.33% * 1.5); }
	.col-8 { width: calc(66.67% * 1.5); }
	.col-9 { width: calc(75.00% * 1.5); }
	.col-10 { width: calc(83.33% * 1.5); }
	.col-11 { width: calc(91.67% * 1.5); }
	.col-12 { width: calc(100.0% * 1.5); }

  .row-5 { height: calc(5vw * 1.5); }
  .row-16 { height: calc(16vw * 1.5); }

  .menu_btn_img { height: calc(1.25vw * 1.5); }
	.logo_img { height: calc(10.0vw * 1.5); }
  /* .xsml-font { font-size: 2.0vw; } */
  .xsml-font { font-size: .6rem; }
  /* .l-font { font-size: 3.0vw; } */

  #wrapper {
     height: calc( var(--background-size) * 1.5 );
   }

  #qrcode_img, #appcode_img {
    height: 40vw;
  }

  #caru_logo { height: calc(5vw * 1.5); }

	/* .xxsml-font {
		font-size: .4rem;
	} */

	/* .margins {
		padding: 5px 2px 5px 2px;
	} */

	/* .nav-ul li a {
	  padding: 0px 5px;
	} */
	/* #home {
 	 padding: 2% 15%;
  } */

	/* #nav-bar, #game-txt, #app-store, #game, #about, #reviews, #family_1, #family_2, #family_3 {
		padding: 2% 2%;
	} */

	/* #nsf {
		padding: 1% 20% 1% 20%;
	} */

	/* #tryfree {
		padding: 1% 25% 1% 25%;
	} */

	/* #testfree {
		padding: 1% 5% 1% 5%;
	} */

	/* #QRcode {
		padding: 1% 5% 1% 5%;
	} */

	/* #test-1-desktop {
		display: none;
	}

	#test-2-mobile {
		display: flex;
	} */
}