html,
body {
	margin: 0px;
	height: 100%;
	background-color: #070a0f;
}

.video {
	display: none;
}

.wrapper {
	display: grid;
	grid-template-areas: "header" "main" "footer";
	grid-template-rows: auto 1fr auto;
	height: 100%;
}

/* ~~~~~~~~~~~ HEADER ~~~~~~~~~~~ */
.header {
	grid-area: main;
	margin: 4vmin;
	z-index: 2;
}

.logotype {
	width: 32vmin;
}
/* ~~~~~~~~~~~ HEADER-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ MAIN ~~~~~~~~~~~ */
.main {
	grid-area: main;
	display: grid;
	grid-template-areas: "overlay";
	grid-template-rows: 1fr;
	position: relative;
	height: 100%;
	margin: 2.5vmin;
	border: 1px solid white;
	border-radius: 6px;
	overflow: hidden;
}

.shadow {
	grid-area: overlay;
	z-index: 1;
	height: 14vmin;
	border-radius: 9px;
	background-image: linear-gradient(to bottom, #000a, #0000);
}
/* ~~~~~~~~~~~ MAIN-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ IPD ~~~~~~~~~~~ */
.ipd {
	grid-area: overlay;
	position: absolute;
	align-self: flex-start;
	justify-self: flex-end;
	margin: 4vmin;
	padding: 1.5vmin;
	width: 30vmin;
	opacity: 0.7;
	border-radius: 16px;
	background-color: #28313a;
	z-index: 2;
}

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

.ipd_input {
	width: 4vmin;
	font-family: "Roboto", sans-serif;
	font-size: 2vmin;
	font-weight: bold;
	letter-spacing: 1.88px;
	text-align: center;
	color: #fff;
	background-color: transparent;
	border: none;
}

.dec,
.inc {
	width: 4vmin;
	height: 4vmin;
	opacity: 0.28;
	font-family: "Roboto", sans-serif;
	font-size: 2vmin;
	font-weight: bold;
	cursor: pointer;
}

.dec:hover,
.dec:active {
	transform: scale(0.9);
}

.inc:hover,
.inc:active {
	transform: scale(1.1);
}
/* ~~~~~~~~~~~ IPD-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ CANVAS ~~~~~~~~~~~ */
#container {
	grid-area: overlay;
	height: 100%;
	/* Flip verticaly */
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
}

#container > canvas {
	position: absolute;
	object-fit: cover;
	width: 100% !important;
	height: 100% !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* ~~~~~~~~~~~ CANVAS-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ THUMBS ~~~~~~~~~~~ */
.thumbs {
	grid-area: overlay;
	position: absolute;
	justify-self: center;
	align-self: flex-end;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
	animation: 0.3s linear 6s 1 pop;
}

@keyframes pop {
	50%  {transform: scale(1.2);}
}

.thumbs ul {
	margin: 0;
	list-style-type: none;
}

.thumbs li {
	display: inline-block;
	margin: 3vmin 2vmin;
	width: 10vmin;
	height: 10vmin;
	background-image: linear-gradient(to top, #ffffff33, #ffffff66);
	border-radius: 50%;
}

.thumbs a {
	display: block;
	height: 8vmin;
	padding-top: 1.5vmin;
}

.thumbs li.active {
	outline: 2px solid #ffffff66;
	outline-offset: 0.75vmin;
	background-color: #ffffff66;
}

.thumbs li:hover {
	transform: scale(1.1);
	outline: transparent;
	background-color: #ffffff66;
}

.thumbs li img {
	display: block;
	margin: 0 auto;
}

.thumbs img {
	height: 8vmin;
}

/* ~~~~~~~~~~~ THUMBS-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ FOOTER ~~~~~~~~~~~ */
.footer {
	grid-area: footer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 2.5vmin;
	padding-top: 2.5vmin;
}

.demo_name {
	font-family: "Roboto", sans-serif;
	font-size: 2vmin;
	font-weight: bold;
	letter-spacing: 2.1px;
	text-align: left;
	color: #fff;
}

.trial_button {
	padding: 2vmin 8vmin;
	border-radius: 14px;
	border: 1px solid #fff;
	background-color: #3fff85;
	text-decoration: none;
}

.trial_button:hover {
	border: 1px solid #37fd82;
	background-image: linear-gradient(to bottom, #37fd82 50%, #ffffffa5), linear-gradient(to bottom, #37fd82, #37fd82 52%);
}

.trial_text {
	font-family: "Roboto", sans-serif;
	font-size: 2vmin;
	font-weight: bold;
	letter-spacing: 1.54px;
	text-align: center;
	color: #070a0f;
}
/* ~~~~~~~~~~~ FOOTER-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ LOADING ~~~~~~~~~~~ */
.background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}

.text {
	position: absolute;
	margin: auto;
	top: 80%;
	bottom: 0;
	left: 0;
	right: 0;
	font-family: "Roboto", sans-serif;
	font-size: 2vmin;
	letter-spacing: 2.1px;
	text-align: center;
	color: #fff;
	z-index: 5;
}
/* ~~~~~~~~~~~ LOADING-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ LOADING SPINNER ~~~~~~~~~~~ */
/* From https://loading.io/css/ */
.loading-spinner {
	color: official;
	display: inline-block;
	position: absolute;
	margin: auto;
	width: 50px;
	height: 50px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}
.loading-spinner div {
	transform-origin: 25px 25px;
	animation: loading-spinner 1.2s linear infinite;
}
.loading-spinner div:after {
	content: " ";
	display: block;
	position: absolute;
	top: 35px;
	left: 23px;
	width: 4px;
	height: 20px;
	border-radius: 2.5px;
	background-image: linear-gradient(100deg, #35fd82 50%, #0a93e7 80%);
}
.loading-spinner div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
}
.loading-spinner div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
}
.loading-spinner div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
}
.loading-spinner div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
}
.loading-spinner div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
}
.loading-spinner div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
}
.loading-spinner div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
}
.loading-spinner div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
}
.loading-spinner div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
}
.loading-spinner div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
}
.loading-spinner div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
}
.loading-spinner div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
}
@keyframes loading-spinner {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* ~~~~~~~~~~~ LOADING SPINNER-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ TOOLTIP ~~~~~~~~~~~ */
.tooltip {
	display: inline-block;
	position: relative;
	text-align: justify;
}

.tooltip .top {
	min-width: 245px;
	top: -20px;
	left: 50%;
	transform: translate(-50%, -100%);
	padding: 10px 20px;
	color: #fff;
	background-color: #202020;
	font-family: "Roboto", sans-serif;
	font-weight: normal;
	font-size: 16px;
	border-radius: 8px;
	position: absolute;
	z-index: 99999999;
	box-sizing: border-box;
	display: none;
	border: 1px solid #007bff;
}

.tooltip:hover .top {
	display: block !important;
}

.tooltip .top i {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	width: 24px;
	height: 12px;
	overflow: hidden;
}

.tooltip .top i::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	background-color: #202020;
	border: 1px solid #007bff;
}
/* ~~~~~~~~~~~ TOOLTIP-END ~~~~~~~~~~~ */

/* ~~~~~~~~~~~ MEDIA QUERIES ~~~~~~~~~~~ */
@media only screen and (max-width: 500px) {
	/* font size */
	.ipd_input {
		font-size: 3.5vmin;
		width: 6vmin;
	}
	.dec, .inc {
		font-size: 6vmin;
		width: 8vmin;
		height: 8vmin;
	}
	.demo_name {
		font-size: 4vmin;
	}
	.trial_text {
		font-size: 4vmin;
	}
	.text {
		font-size: 4vmin;
	}

	/* element changes */
	.header {
		grid-area: header;
		display: grid;
		align-self: center;
		margin: 2.5vmin;
	}
	.logotype {
		width: 38vmin;
	}
	.ipd {
		grid-area: header;
		position: relative;
		margin: 2.5vmin;
		padding: 2.5vmin;
		width: 48vmin;
	}
	.shadow {
		display: none;
	}
	.thumbs {
		justify-self: auto;
	}
	.thumbs li {
		width: 20vmin;
		height: 20vmin;
	}
	.thumbs a {
		padding-top: 0vmin;
	}
	.thumbs li:active {
		transform: scale(1.1);
		outline-offset: 1vmin;
	}
	.thumbs img {
		width: 20vmin;
		height: 20vmin;
	}
	.footer {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.demo_name_tooltip {
		margin: 2vmin;
	}
	.trial_button {
		margin: 2vmin;
	}
	.tooltip .top {
		left: -14vmin;
	}
	.tooltip .top i {
		left: 75%;
	}
}
/* ~~~~~~~~~~~ MEDIA QUERIES-END ~~~~~~~~~~~ */
