@font-face {
	font-family: 'CenturySchoolbook';
	src: url(../app/fonts/CENSCBK.TTF);
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'CenturySchoolbook';
	src: url(../app/fonts/SCHLBKB.TTF);
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Carlito';
	src: url(../app/fonts/Carlito-Regular.ttf);
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Carlito';
	src: url(../app/fonts/Carlito-Bold.ttf);
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Carlito';
	overflow: hidden;
	font-size: 2vh;
}

@media (min-aspect-ratio: 16/9) {
	body {
		font-size: 2.5vh;
	}
}

.gridcontainer {
	display: grid;
	grid-template-rows: 85vh 15vh; 
}

.toppane {
	background-image: url("../app/img/bg/v2/GVC App - background image V1 - 1920x1080.jpg");
	background-size: auto 85vh;
	background-position: top center;
}

.contentcontainer {
	height: 85vh;
	overflow-x: hidden;
	overflow-y: scroll;
}

.contentcontainer::-webkit-scrollbar {
	display: none;
}

.content {
	height: 85vh;
	width: 75vw;
	left: 12.5vw;
	padding-bottom: 5vh;
	position: relative;
}

.content.behind {
	background-image: url("../app/img/bg/v2/GVC App - background image V2 - 1920x1080.jpg");
	opacity: 0.8;
	padding-bottom: 0;
	position: absolute;
	background-size: auto 85vh;
	background-position: top center;
}

@keyframes contentfade {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.title {
	color: #338445;
	font-family: "CenturySchoolbook";
	font-size: 300%;
	text-align: center;
	line-height: 120%;
	margin-top: 5vh;
	padding: 0.2em 0;
	background-color: rgba(255,255,255,0.8);
}

.title.ani {
	animation: titledrop 1s ease-out;
}

@keyframes titledrop {
	0% {transform: translate(0, -50vh);}
	100% {transform: translate(0, 0);}
}

.title .secondline {
	font-size: 150%;
	font-weight: bold;
}

.blurb {
	font-size: 120%;
	padding: 2vh 5vw;
	font-weight: bold;
}

.blurb.ani {
	animation: contentfade 1s ease-out 1s;
	animation-fill-mode: both;
}

a {
	color: #0093B2;
	text-decoration: none;
}

.applinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.applink {
	width: 10em;
	height: 3em;
	margin: 0.5em;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: top center;
}

#applinkapple {
	background-image: url("../img/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg");
}

#applinkandroid {
	background-image: url("../img/google-play-badge-gapless.png");
}

#applinkbrowser {
	background-image: url("../img/webapp.png");
}

.previewimagecontainer {
	overflow-x: scroll;
	animation: contentfade 1s ease-out 1s;
	animation-fill-mode: both;
}

.previewimagegrid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
}

.previewimage {
	width: 30vw;
	max-width: 40vh;
	margin-right: 1vw;
	border: solid black 1px;
}

.soclinks {
	width: 60%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	animation: contentfade 1s ease-out 1s;
	animation-fill-mode: both;
}

.soclink {
	width: 3em;
	height: 3em;
	margin: 0.5em;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: top center;
}

#soclinkfacebook {
	background-image: url("../img/flogo_RGB_HEX-512.svg");
}

#soclinkinstagram {
	background-image: url("../img/instagram_col.png");
}

.bottompane {
	background-color: #338445;
}

.logobar {
	background-color: white;
	height: 15vh;
	width: 100%;
	margin-top: 2vh;
	display: flex;
	justify-content: space-around;
}

.logobar.ani {	
	animation: logorise 1s ease-out 0.5s;
	animation-fill-mode: both;
}

@keyframes logorise {
	0% {transform: translate(0, 50vh);}
	100% {transform: translate(0, 0);}
}

.imglogo {
	height: 100%;
	max-height: 14vh;
	max-width: 25vw;
}

#logocc {
	max-width: 50vw;
}

.old {
	color: darkgrey;
}

.old a {
	color: grey;
}


@media (min-aspect-ratio: 3/2) {
	.toppane {
		background-size: 101vw auto;
	}
	.content.behind {
		background-size: 101vw auto;
	}
}

@media (max-aspect-ratio: 1/1) {
	.previewimage {
		width: 40vh;
		max-width: 75vw;
	}
}

@media (max-aspect-ratio: 3/4) {
	.title {
		font-size: 220%;
	}
	
	.content {
		width: 95vw;
		left: 2.5vw;
	}
	.toppane {
		background-image: url("../app/img/bg/v2/GVC App - background image V1 - 1080x1920.jpg");
		background-size: 100vw auto;
	}
	.content.behind {
		background-image: url("../app/img/bg/v2/GVC App - background image V2 - 1080x1920.jpg");
		background-size: 100vw auto;
	}
}

@media (max-aspect-ratio: 9/16) {
	body {
		font-size: 1.7vh;
	}
	.applink {
		width: 8em;
		height: 2.5em;
		margin: 0.5em;
	}
}

@media (max-aspect-ratio: 1/2) {
	.toppane {
		background-size: auto 85vh;
	}
	.content.behind {
		background-size: auto 85vh;
	}
}