/* Start Screen */
.startScreenLogo{
	width:15vh;
}

.startScreenTitle{
	font-size: 5vh;
    font-family: var(--fontHeader);
    font-weight: normal;
	margin: 5vh 0 3vh 0!important;
	line-height: 1;
}
.startScreenCenter h1, .startScreenCenter h2{
	margin:60px 0 30px 0;
	padding: 0;
	text-align: center;
	text-transform: none;
}

.startScreenCenter h1{
	font-family: var(--fontHeader);
	font-size: 3.1vw;
	font-weight: bold;
	line-height: 1.2;
	color:white !important;
	text-align: left;
}

.startScreenSubTitle {
    font-family: var(--fontRegular);
    font-size: max(1.9vh, 12px);
    line-height: 1.8;
    font-weight: normal;
    padding: 3vh 0 0 0;
    margin-bottom: 5vh !important;
    border-top: solid 1px white;
}

.startScreen {
	visibility: hidden;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: 100%;
    justify-content: center;
    padding-left: 5vw;
	color:white;
}

.startScreen>div {
	position: relative;
}

.startScreenBottomText {
	font-weight: 300;
}

.startScreenCenter{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.startScreenCenter > div {
	position: relative;
	margin: 0;
}









.startArrow{
	--startArrowIcon: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="white" d="m586.923-226.923-28.538-27.539 206.307-206.307H120v-40h645.461L559.385-707.077l27.538-27.539 253.846 253.847-253.846 253.846Z" /></svg>');
	--startArrowIconHover: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="%23ffffff" d="m586.923-226.923-28.538-27.539 206.307-206.307H120v-40h645.461L559.385-707.077l27.538-27.539 253.846 253.847-253.846 253.846Z" /></svg>');
}
.startArrow{
	width:24px;
	height:24px;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	background-position: center;
	/* background-color: red; */
	background-image: var(--startArrowIcon);
}
.startText{
	font-size: 14px;
	position: absolute;
	text-transform: uppercase;
	top:50%;
	left:50%;
	width:260px;
	text-align: center;
	z-index: 1;
	color:white;
	opacity: 0;
	transform: translate(0%, -50%);
}

.startScreenButton, .startText, .startArrow{
	transition: all 0.3s ease-in-out;
	user-select: none;
}
.startScreenButton{
	cursor: pointer;
	background-color: var(--colorBlack50);
    border: solid 1px white;
    padding: 15px 30px;
    border-radius: 50px;
	overflow: hidden;
    width: 60px;
    height: 60px;
}
.startScreen hr{
	background-color: white;
	margin: 0;
	height:1px;
	width:400px;
}
body.hasHover .startScreenButton:hover{
	border:none;
	box-shadow: 0 0 0 4px rgba(255,255,255,0.2);
	width:260px;
}
body.hasHover .startScreenButton:hover .startArrow{
	background-image: var(--startArrowIconHover);
	left:auto;
	right:20px;
}
body.hasHover .startScreenButton:hover .startText{
	opacity: 1;
	transform: translate(calc(-50% - 20px), -50%);
}









.startScreenLoader{
	display: none;
	position: absolute;
	top:0;
	left:0;
	width:100%; height:100%;
	background-color: var(--colorBody);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 200px;
	z-index: 10;
	transition: opacity 0.5s ease, transform 0.0s 0.5s ease;
}
.startScreenLoaderHide{
	opacity: 0.0;
	transform: scale(0%);
}
.leftSide,
.rightSide {
overflow: hidden;
}

.main{
	padding: 0;
}