html,body {
	font-family: Montserrat, Arial, sans-serif;
	color:#000;
	background-color:#3e3e3e;
	
}
img {
	vertical-align:middle;
	max-width:100%;
	max-height:100%;
}
.page {
	opacity:.9;
	max-width:1920px;
	height:100vh;
	width:100%;	
	margin:0 auto;
	position:relative;
}

.page__container {
	display:flex;
	height:100%;
}
.page__header {
	flex-shrink:0;
	width:54%;
	box-sizing: border-box;	
	padding-top: calc(3.3vw + 3.3vh);
	padding-left: calc(3vw + 3vh);
	font-size:165px;
	
}

.page__title {
	text-transform: uppercase;	
	font-weight:700;
	color:#fd2e61;
	white-space:nowrap;
	font-size:165px;
}

.page__desc {
	font-weight: 300;
	color: #ffffff;
	font-size: 24px;
	letter-spacing: 1.1px;
	padding-top: 14px;
	padding-left: calc(2px + (11 - 2) * (100vw - 320px) / (1920 - 320));
	padding-right:16px;
	line-height:1.35;
	text-transform:uppercase;
}

.page__sub-desc {
	font-weight: 300;
	color: #ffffff;
	font-size: 20px;
	letter-spacing: 1.1px;
	padding-top: 14px;
	padding-left: calc(2px + (11 - 2) * (100vw - 320px) / (1920 - 320));
	padding-right:16px;
	line-height:1.35;
}
.page__desc-short {
	font-weight: 300;
	color: #ffffff;
	font-size: 43px;
	letter-spacing: 1.1px;
	padding-top: 14px;
	padding-left: calc(2px + (11 - 2) * (100vw - 320px) / (1920 - 320));
	white-space:nowrap;
	text-transform:uppercase;
}


.page__content {
	width:46%
}
.page__content svg {
	width:100%;
	height:100%;
	vertical-align: top;	
}	
.page__footer {
	position:absolute;
	width:50vh;
	bottom:0;
	left:0;
}
.page__info {
	transform: rotate(-90deg) translateX(50%);
	transform-origin: 50% 0;
	position: absolute;
	color: #fff;
	left: 50%;
	width: 100%;
	padding: 16px;
	box-sizing: border-box;
	font-size: 17px;
	line-height: 1.1;
	text-transform: uppercase;
	font-family:'Roboto Condensed',sans-serif;
	font-weight:300;
}

.page__logo{
	position:absolute;
	top:0;
	right:0;
	width:100px;
	height:100px;
}

.s {
	/* color:#fd2e61; */
	font-style:italic;
	font-weight:700;
}



@media screen and (max-width:1920px){
	.page__title {
		font-size:calc(40px + (165 - 40) * (100vw - 320px) / (1920 - 320));
	}
	.page__desc {
		font-size:calc(18px + (30 - 18) * (100vw - 320px) / (1920 - 320));
		padding-top: calc(14 * (100vw / 1920));
	}
	.page__sub-desc {
		font-size:calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
	}
	.page__desc-short {
		font-size:calc(43 * (100vw / 1920));
		padding-top: calc(14 * (100vw / 1920));
	}	
	.page__info {
		font-size:calc(14px + (17 - 14) * (100vw - 320px) / (1920 - 320));
	}
}


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

	html {
		height: -webkit-fill-available;
	}
	body {
		min-height: -webkit-fill-available;
	}
	.page {
		height: auto;
		min-height: -webkit-fill-available;		

		display:flex;
		flex-direction:column;		
	}

	.page__container {
		flex-direction:column;
		flex-grow:1;
	}
	
	.page__content {
		margin:80px 0 80px 0;

		flex-grow: 1;
		width:100%;
		height:100vw;
		
	}
	
	.page__content svg {
		transform:scale(1.15) translateX(-7%);
	}
	.page__header {
		padding-top:80px;
		width:100%;		
	}
	.page__footer {
		width:100%;
		position:relative;
	}
	.page__info {
		transform:none;
		position:relative;
		left:0;
	}
	.page__logo{
		width:70px;
		height:70px;
	}
	
	.page__title {
		font-size:calc(70px + (120 - 70) * (100vw - 480px) / (768 - 480));
	}
	
	.page__desc {
		font-size:calc(16px + (20 - 16) * (100vw - 480px) / (768 - 480));
	}
	.page__desc-short {
		font-size:calc(18px + (30 - 18) * (100vw - 480px) / (768 - 480));
	}
	.page__logo{
		width:64px;
		height:64px;
	}
}
@media screen and (max-width:480px){
	.page__title {
		font-size:calc(40px + (70 - 40) * (100vw - 320px) / (480 - 320));
	}
	.page__desc {
		font-size:calc(10px + (16 - 10) * (100vw - 320px) / (480 - 320));
	}
	.page__desc-short {
		font-size:calc(10px + (18 - 10) * (100vw - 320px) / (480 - 320));
	}	
}