@font-face {
    font-family: 'Silka';
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Silka-Regular.otf') format('truetype');
}

/**
* Much Smaller screens
*/
@media only screen and (max-width: 1026px) {
    .textContainer {
        font-size: 24px !important;
    }
}

.intro-no-scroll-x {
	overflow-x: clip;
}

.intro-skipOption {
	position: absolute;
	z-index: 51;
	color: #ffffff;
	right: 10px;
	bottom: 10px;
	opacity: 1;
	font-size: 20px;
	cursor: pointer;
}

.intro-skipOption a {
	text-decoration: none;
	color: #ffffff;
}

body {
	font-family: 'Silka', sans-serif;
	font-weight: lighter;
    padding:0;
    margin:0;
    background-color: rgba(0,0,0, 1);
	overflow: hidden !important;
}

::-webkit-scrollbar { 
	display: none !important; 
}

#canvasContainer {
    display: block;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.textContainer {
	position: absolute;
    color: #ffffff;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -70%);
    text-align: center;
	font-size: 32px;
}

.volannoLogoContainer {
	position: absolute;
    margin: 25% auto;
    width: 100%;
	text-align: center;
}

.volannoLogo {
	position: absolute;
	width: 0px;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	opacity: 1;
}

.busIconContainer {
	position: absolute;
    margin: 40% auto;
    width: 100%;
	text-align: center;
	opacity: 0;
}

.jetIconContainer {
	position: absolute;
    margin: 40% auto;
    width: 100%;
	text-align: center;
	opacity: 0;
}

.carsIconContainer {
	position: absolute;
    margin: 40% auto;
    width: 100%;
	text-align: center;
	opacity: 0;
}

.trainIconContainer {
	position: absolute;
    margin: 40% auto;
    width: 100%;
	text-align: center;
	opacity: 0;
}

.peopleIconContainer {
	position: absolute;
    margin: 30% auto;
    width: 100%;
	text-align: center;
	opacity: 0;
}

.busIcon {
	width: 50px;
	position: absolute;
    top: 70%;
	left: 20%;
	opacity: 0;
}

.jetIcon {
	width: 50px;
	position: absolute;
    top: 25%;
	left: 20%;
	opacity: 0;
}

.carsIcon {
	width: 50px;
	position: absolute;
    top: 60%;
	left: 40%;
	transform: translate(-40%, -60%);
	opacity: 0;
}

.trainIcon {
	width: 50px;
	position: absolute;
    top: 60%;
	left: 25%;
	opacity: 0;
}

.peopleIcon {
	width: 50px;
}