@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Asap|Ubuntu:400|Ubuntu:700&display=swap');

/* html{ */
	/* animation: fade .3s ease-in-out forwards; */
/* } */
/* @keyframes fade{ */
	/* from {opacity: 0;} */
	/* to {opacity: 1; animation-play-state: paused;} */
/* } */
body {
	margin: 0;
	background-repeat: no-repeat;
	width: 100vw;
	height: 100%;
	background-size: cover;
	background: linear-gradient(339deg, rgba(30,26,92,1) 0%, rgba(57,91,194,1) 35%, rgba(131,200,254,1) 100%);
	background-attachment: fixed;
	overflow-x: hidden;
}
/* iframe{ */
	/* display: none; */
/* } */
/* .mobilelinks{ */
	/* pointer-events: none; */
/* } */
.lab1riga{
	 width:85%;
	 margin: 0 auto;
	 text-align:center;
	 padding: 2% 0;
}

.lastrow{
	position: relative;
	top: 0.4vw;
	width: 70vw;
	margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

.labtable{
	/*! width: auto; */
	border-collapse: separate;
	text-align: center;
}
.bottomtable{
	text-align: center;
	z-index: 90;
	/* position: fixed; */
	bottom: 0.5vw;
	width: 100vw;
	margin-bottom: 0.7vw;
}
.labtd {
	text-align: center;
	width: 12.2vw;
	height: 3.5vw;
	padding: 1vh 1vw;
	/* margin: 3%; */
	color: #E6E6E6;
	margin-bottom: 0px;
	/* margin-left: 4.5vw; */
	font-family: 'Ubuntu', sans-serif;
	font-weight: bolder;
	font-size: 2.5vh;
	background-color: #00c;
	border-radius: 15px;
	transition: all .15s;
	vertical-align: middle;
	display: table-cell;
}

.labtd:hover{
	background-color: #006;
	color: #0ff;
}

#logo {
	z-index: 11;
	width: 22.5vw;
	min-width: 300px;
	top: 0.86vh;
	position: fixed;
	left: 2.8vw;
	pointer-events: none;
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.width{
	width: 73vw;
	border-spacing: 0vw;
}
.logo2{
	width: 4.5vw;
	margin-left: -4.5vw;
}

#intro img {
	opacity: 0;
	z-index: 900;
	width: 4.5vw;
	position: fixed;
	top: 0.86vh;
	left: 12.8vw;
	pointer-events: none;
	animation: intro 3s;
	-webkit-animation: intro 3s;
}

#navbar {
	position: sticky;
	z-index: 10;
	width: 90vw;
	height: auto;
	top: 0.65vh;
	margin-top: 0.65vh;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(253,253,253,0.6);
	backdrop-filter: blur(20px);
	border-radius: 20vh;
	-webkit-box-shadow: 2px 11px 22px -8px rgba(0,0,0,0.36);
	-moz-box-shadow: 2px 11px 22px -8px rgba(0,0,0,0.36);
	box-shadow: 2px 11px 22px -8px rgba(0,0,0,0.36);
}

table a {
	text-decoration: none;
}

.buttons {
	display: table-cell;
	width: 11vw;
	height: 2.5em;
	border-radius: 15px;
	color: #0E0E0E;
	font-family: 'Asap', sans-serif;
	font-weight: bold;
	font-size: 1.25vw;
	vertical-align: middle;
	text-align: center;
	background: #FDFDFD;
	transition: all .1s ease-in-out;
	cursor: pointer;
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.buttons:active {
	border-radius: 13px;
	color: #E0E0E0;
	background-color: #4468D7;
	box-shadow: inset 1px 1px 1px rgba(150, 150, 150, .4), inset -1px -1px 1px rgba(0, 0, 0, .4);
	transform: scale(1.05); 
}

.selected {
	display: table-cell;
	width: 11vw;
	height: 2.5em;
	border-radius: 15px;
	color: #E0E0E0;
	font-family: 'Asap', sans-serif;
	font-weight: bold;
	font-size: 1.25vw;
	vertical-align: middle;
	text-align: center;
	background-color: #4468D7;
	transition: all .1s ease-in-out;
	cursor: pointer;
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.selected:active {
	border-radius: 13px;
	color: #E0E0E0;
	background-color: #4468D7;
	box-shadow: inset 1px 1px 1px rgba(150, 150, 150, .4), inset -1px -1px 1px rgba(0, 0, 0, .4);
	transform: scale(1.05); 
}

table {
	table-layout: fixed;
	margin: 0 auto;
	height: auto;
}

.td {
	width: 12.1%;
	margin: 0 auto;
}

#whitebg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(219,233,244,1.00);
	z-index: 100;
	top: 0;
	left: 0;
	animation: bg 1s ease-in-out 1.5s forwards;
}

@keyframes bg{
	0% {
		opacity: 1;
	}
	
	70% {
		opacity: 0.1;
	}
	
	100% {
		opacity: 0; 
		visibility: hidden;
	}
}

@keyframes intro {
	0% {
		opacity: 1;
		z-index: 101;
		top: 50%;
		left: 50%;
		transform: translate(-3.375vw, -3.375vw) scale(3.0);
	}
	
	50% {
		opacity: 1;
		z-index: 101;
		top: 50%;
		left: 50%;
		transform: translate(-2.825vw, -2.825vw) scale(5.0);
	}
	
	100% {
		opacity: 0;
		z-index: 101;
		top: 50%;
		left: 50%;
		transform: scale(1.0) translate(-2.155vw, -2.155vw);
	}
}
	
.box {
	z-index: 1;
	padding-top: 1.5vh;
	padding-bottom: 2vh;
	display: inline-flex;
	position: relative;
	height: auto;
	width: 91vw;
	left: auto;
}

.paragraph {
	z-index: 1;
	background-color: rgba(245,245,245, 0.6);
	display: inline-flex;
	position: relative;
	border-radius: 4px;
	height: auto;
	width: 100%;
	-webkit-box-shadow: 2px 11px 22px -8px rgba(0,0,0,0.36);
	-moz-box-shadow: 2px 11px 22px -8px rgba(0,0,0,0.36);
	box-shadow: 2px 11px 22px -8px rgba(0,0,0,0.36);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	
}

.paragraph:hover {
	cursor: default;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.illu {
	z-index: 2;
	width: 45.3vw;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(34,34,156,0) 50%, rgba(0,0,0,0.1) 100%);
	border-radius: 2px;
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.td_illu {
	text-align: center;
}
.illu img{
	cursor: default;
	z-index: 2;
	max-height: 63.55vh;
	max-width: 100%;
	border-radius: 2px;
	display: block;
	margin: 0, auto;
}

.illu video{
	max-height: 63.55vh;
	max-width: 100%;
}

.media {
	pointer-events: none;
	z-index: 4;
	position: absolute;
	display: table-cell;
	top: 50%;
	transform: translateY(-50%);
	margin-left: auto;
	margin-right: auto;
}

.controls img{
	cursor: pointer;
	pointer-events: all;
	padding: 10px;
	width: 1.5vw;
	opacity: 0.5;
}

.controls img:hover{
	width: 1.5vw;
	opacity: 1;
}

.full {
	pointer-events: none;
	z-index: 4;
	position: absolute;
	display: table-cell;
	top: 0%;
	margin-left: auto;
	margin-right: auto;
}

.full img {
	cursor: pointer;
	pointer-events: all;
	position: absolute;
	top: 10px;
	padding: 10px;
	width: 1.6vw;
	opacity: 0.5;
}

.full img:hover {
	width: 1.6vw;
	opacity: 1;
}

h2 {
	text-align: left;
	color: #E6E6E6;
	margin-bottom: 0px;
	margin-left: 4.5vw;
	font-family: 'Ubuntu', sans-serif;
	font-weight: bolder;
	font-size: 5vh;
	width: 91vw;
}

p {
	font-family: 'Ubuntu', sans-serif;
	font-size: 3vh;
	margin: 10px;
}

iframe {
	position: fixed;
	display: block;
	/* pointer-events: none; */
	border: none;
	margin: 0;
	opacity: 0;
	z-index: -200;
	width: 100vw;
	height: 100%;
}

.mySlides {
	display: none;
}

.dots {
	position: absolute;
	bottom: 1.5%;
	left: 75%;
	transform: translateX(-50%);
}

.dots2 {
	position: absolute;
	bottom: 1.5%;
	left: 50%;
	transform: translateX(-50%);
}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: rgba(220,220,220,0.7);
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .dot:hover {
	background-color: rgba(255,255,255,1.00);
}

@media (max-aspect-ratio: 4/3){ 
	
	.buttons {
	height: 2.5em;
	font-size: 2.2vh;
}
	
	.selected {
	height: 2.5em;
	font-size: 2.2vh;
}
	#navbar {
		width: 95vw;
		margin-top: 0;
	}
	
	#logo {
	width: 24em;
	position: fixed;
	top: 0.8vh;
	left: 1.2vw;
	animation: intro 0s;
	-webkit-animation: intro 0s;
}
	
.logo2{
	width: 6vw;
	margin-left: -9.5vw;
}
	
	.box {
	width: 98vw;
}
	
	.illu {
		width: 48.6vw;
	}
	
	.full img {
		width: 2.5vw;
	}
	
	.full img:hover {
	width: 2.5vw;
}
	
	h2 {
	margin-left: 1vw;
	font-size: 3vh;
	}
	
	table {
	table-layout: fixed;
	margin: 0 auto;
	height: 5.4em;
}
	
	.media {
	z-index: 4;
	position: absolute;
	display: table-cell;
	top: 50%;
	transform: translateY(-50%);
	margin-left: auto;
	margin-right: auto;
}

.controls img{
	padding: 10px;
	width: 2vw;
	opacity: 0.5;
}

.controls img:hover{
	width: 2vw;
	opacity: 1;
}
	
p {
	font-size: 2vh;
}
	
}

@media (max-aspect-ratio: 3/4){

body {
	margin: 0;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
	background: linear-gradient(339deg, rgba(30,26,92,1) 0%, rgba(57,91,194,1) 35%, rgba(131,200,254,1) 100%);
	background-attachment: fixed;
}
	
#logo {
	display: none;
}

#navbar {
	display: none;
}
	
#whitebg {
	display: none;
}
	
.buttons {
	display: none;
}

table {
	display: none;
}

#intro {
	display: none;
}

.box {
	display: none;
}

.paragraph {
	display: none;
}

.paragraph:hover {
	display: none;
}

.illu img{
	display: none;
}

.media {
	display: none;
}

.controls img{
	display: none;
}

.controls img:hover{
	display: none;
}

h2 {
	display: none;
}

p {
	display: none;
}
	
iframe {
	opacity: 1;
	z-index: 200;
}
	
}