/* fonts */
@media screen{

	/* samarakan */

	@font-face
	{
		font-family: Samarakan;
		src: url(fonts/samarakan.TTF);
		font-weight: 400;
	}

	/* redhat display */

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(fonts/RedHatDisplay-Regular.ttf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(fonts/RedHatDisplay-RegularItalic.ttf);
		font-weight: 400;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(fonts/RedHatDisplay-Medium.ttf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(fonts/RedHatDisplay-MediumItalic.ttf);
		font-weight: 500;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(fonts/RedHatDisplay-Bold.ttf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(fonts/RedHatDisplay-BoldItalic.ttf);
		font-weight: 600;
		font-style: italic;
	}

	/* redhat text */
	
	@font-face
	{
		font-family: RedHatText;
		src: url(fonts/RedHatText-Regular.ttf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(fonts/RedHatText-RegularItalic.ttf);
		font-weight: 400;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(fonts/RedHatText-Medium.ttf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(fonts/RedHatText-MediumItalic.ttf);
		font-weight: 500;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(fonts/RedHatText-Bold.ttf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(fonts/RedHatText-BoldItalic.ttf);
		font-weight: 600;
		font-style: italic;
	}

	/* roboto */

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-Thin.ttf);
		font-weight: 200;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-ThinItalic.ttf);
		font-weight: 200;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-Light.ttf);
		font-weight: 300;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-LightItalic.ttf);
		font-weight: 300;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-Regular.ttf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-RegularItalic.ttf);
		font-weight: 400;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-Medium.ttf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-MediumItalic.ttf);
		font-weight: 500;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-Bold.ttf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-BoldItalic.ttf);
		font-weight: 600;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-Black.ttf);
		font-weight: 700;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(fonts/Roboto-BlackItalic.ttf);
		font-weight: 700;
		font-style: italic;
	}

	/* SF */

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Ultralight.otf);
		font-weight: 100;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Thin.otf);
		font-weight: 200;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Light.otf);
		font-weight: 300;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Regular.otf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Medium.otf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Semibold.otf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Bold.otf);
		font-weight: 700;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(fonts/SanFranciscoDisplay-Black.otf);
		font-weight: 700;
	}

}

*{
	box-sizing: border-box;
	vertical-align: middle;
}

html{
	-webkit-text-size-adjust: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: #ffffff;
}

body{
	margin:0;
	width: 100vw;
	min-height: 100vh;

	font-family: RedHatDisplay;
	line-height: 1.5;

	--top-safe-space: env(safe-area-inset-top);
	--bottom-safe-space: env(safe-area-inset-bottom);
	--left-safe-space: env(safe-area-inset-left);
	--right-safe-space: env(safe-area-inset-right);

	animation-duration: 0.15s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-name: zerozero;

	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

a{
	display: block;
	text-decoration: none;
	color: inherit;
	transition-duration: 0.1s;
}
a:hover{
	transform: scale(1.02);
}
a:active{
	transform: scale(0.95);
}

svg{
	fill: #000;
}

.vertical_centered{
	position: relative; 
	top: 50%; 
	transform: translateY(-50%);
}

/* colours */
@media screen{

	.whitetext{color: #fff;}
	.whitebackground{background-color: #fff;}
	.whiteborder{border-color: #fff;}
	.whitefill{fill: #fff;}

	.openlywhitetext{color: #f7f7f7;}
	.openlywhitebackground{background-color: #f7f7f7;}
	.openlywhiteborder{border-color: #f7f7f7;}
	.openlywhitefill{fill: #f7f7f7;}

	.lightgreytext{color: #f0f0f0;}
	.lightgreybackground{background-color: #f0f0f0;}
	.lightgreyborder{border-color: #f0f0f0;}
	.lightgreyfill{fill: #f0f0f0;}

	.greytext{color: #9c9c9c;}
	.greybackground{background-color: #9c9c9c;}
	.greyborder{border-color: #9c9c9c;}
	.greyfill{fill: #9c9c9c;}

	.openlyblacktext{color: #444;}
	.openlyblackbackground{background-color: #222;}
	.openlyblackborder{border-color: #444;}
	.openlyblackfill{fill: #444;}

	.blacktext{color: #000;}
	.blackbackground{background-color: #000;}
	.blackborder{border-color: #000;}
	.blackfill{fill: #000;}

	.purpletext{color: #C840E9;}
	.purplebackground{background-color: #C840E9;}
	.purpleborder{border-color: #C840E9;}
	.purplefill{fill: #C840E9;}

	.bluetext{color: #0078fa;}
	.bluebackground{background-color: #0078fa;}
	.blueborder{border-color: #0078fa;}
	.bluefill{fill: #0078fa;}

	.greentext{color: #4CD964;}
	.greenbackground{background-color: #4CD964;}
	.greenborder{border-color: #4CD964;}
	.greenfill{fill: #4CD964;}

	.yellowtext{color: #FFCC00;}
	.yellowbackground{background-color: #FFCC00;}
	.yellowborder{border-color: #FFCC00;}
	.yellowfill{fill: #FFCC00;}

	.orangetext{color: #ff9028;}
	.orangebackground{background-color: #ff9028;}
	.orangeborder{border-color: #ff9028;}
	.orangefill{fill: #ff9028;}

	.redtext{color: #ff2851;}
	.redbackground{background-color: #ff2851;}
	.redborder{border-color: #ff2851;}
	.redfill{fill: #ff2851;}

	/* shadows */
	.shadow1{box-shadow: 0 1vw 3vw 0 #00000020;}
	.shadow1up{box-shadow: 0 -1vw 3vw 0 #00000020;}
	.shadow2{box-shadow: 0 1vw 2vw 0 #00000010;}
	.shadow2up{box-shadow: 0 -1vw 2vw 0 #00000010;}
	.shadow3{box-shadow: 0 1vw 1.5vw 0.5vw #00000005;}
	.shadow3up{box-shadow: 0vw -1vw 1.5vw 0.5vw #00000005;}
	.blackshadowbackground{background-color: #000000a0;}
}

/* animations */
@media only screen{

	@keyframes openheaderanimation{
		from {transform: translateY(0);}
		to {transform: translateY(-50vh);}
	}

	@keyframes closeheaderanimation{
		from {transform: translateY(0);}
		to {transform: translateY(50vh);}
	}

	@keyframes spin {
		100% {transform:rotate(360deg);}
	}
}

/* for mobile */
@media only screen and (orientation: portrait){

	.section{
		margin: 10vw;
	}
		.sectionheading{
			text-align: center;
		}
		.sectioncontent{
			margin-top: 5vw;
		}

	/* text */
	@media screen{

		/* normal stuff */

		.heading{
			font-size: 6vw;
			font-weight: 500;
		}

		.caption{
			font-size: 5vw;
			font-weight: 500;
		}

		.text{
			font-size: 4vw;
			font-weight: 400;
		}

		/* button stuff */

		.buttontext{
			font-size: 3.5vw;
			font-weight: 600;
		}
	}

	/* banner */
	@media screen {
		#banner{
			margin-top: 14vw;
			height: 150vw;
			background-size: cover;
			background-position: center;
			text-align: center;
		}
			#bannerheading{
				padding-top: 30vw;
			}
			#bannercontent{
				margin: auto;
				margin-top: 1vw;
				width: 80vw;
			}
	}
	
	/* tiles */
	@media screen {
		.tilescontainer{
			margin: 5vw;
			display: flex;
			flex-wrap: wrap;
		}
			.tile{
				display: inline-block;
				margin: 5vw;
				width: 80vw;
				height: 40vw;
				border-radius: 0.25vw;
				border-style: solid;
				border-width: 0.1vw;
				background-size: contain;
				background-position: bottom;
				background-repeat: no-repeat;
			}
				.tileheading{
					position: relative;
					margin-top: 10vw;
					text-align: center;
				}
				.tilecontent{
					position: relative;
					margin: 5vw;
					margin-top: 5vw;
					text-align: center;
				}
			.smalltile{
				height: 80vw;
			}
			.mediumtile{
				height: 120vw;
			}
			.bigtile{
				height: 160vw;
			}
			.widetile{
				height: 80vw;
			}
	}

	/* buttons & lables */
	@media screen{

		.button{
			height: 10vw;
			width: 25vw;
			line-height: 10vw;
			text-align: center;
			border-radius: 1vw;
			transition-duration: 0.1s;
		}
		.button:active{
			transform: scale(0.9);
		}

		.disabledbutton{
			margin: auto;
			height: 10vw;
			width: 25vw;
			line-height: 9vw;
			text-align: center;
			font-size: 3.5vw;
			border-radius: 1vw;
			border-style: solid;
			border-width: 0.5vw;
			transition-duration: 0.1s;
		}

		.bigbutton{
			margin: auto;
			margin-top: 20vw;
			width: 50vw;
			height: 15vw;
			line-height: 14vw;
			text-align: center;
			border-radius: 1vw;
			border-style: solid;
			border-width: 0.5vw;
			transition-duration: 0.1s;
		}
		.bigbutton:active{
			transform: scale(0.9);
		}

		.label{
			display: inline;
			padding: 1vw 2vw 1vw 2vw;
			border-radius: 1vw;
		}
	}

	/* header */
	@media screen{
		header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 14vw;
			background-color: white;
			overflow: hidden;
			transition: 0.3s;
			z-index: 2;
		}
			#mobileheaderbackground{
				opacity: 0;
				position: fixed;
				top: 0;
				height: 100vh;
				width: 100vw;
				transition-duration: 0.3s;
				pointer-events: none;
			}
			#mobileheadertogglebutton{
				float: left;
				padding: 4vw;
				height: 14vw;
				width: 14vw;
			}
			.mobileheaderitems{
				margin: auto;
				text-align: center;
				display: block;
				margin-top: 2vw;
				line-height: 10vw;
				transition-duration: 0.1s;
			}
			.mobileheaderitems:active{
				transform: scale(0.9);
			}
			#mobileheaderlogocontainer{
				margin-top: 0;
				margin-bottom: 5vw;
				padding: 2vw;
				width: 12vw;
			}
			#headerdownloadbutton{
				margin-top: 4vw;
			}
	
	}

	/* footer */
	@media screen {
		footer{
			padding: 5vw;
			padding-top: 0vw;
			padding-bottom: 0vw;
		}
			#footertop{
				padding: 5vw;
				padding-bottom: 10vw;
				border-bottom-style: solid;
				border-bottom-width: 0.1vw;
			}
				.footerlinks{
					display: inline-block;
					margin-right: 5vw;
					margin-bottom: 3vw;
				}
				.footerlinks:hover{
					color: white;
				}
					.downloadcontent{
						width: 30vw;
					}
				.downloadlinks{
					margin-top: 3vw;
				}
				.downloadimages{
					width: 30vw;
					transition-duration: 0.1s;
				}
				.downloadimages:hover{
					transform: scale(0.9);
				}
			#footermid{
				padding: 5vw;
				padding-bottom: 10vw;
				border-bottom-style: solid;
				border-bottom-width: 0.1vw;
			}
				.forminput{
					margin-bottom: 5vw;
					width: 80vw;
					border-radius: 1vw;
					border-style: solid;
					border-width: 0.5vw;
					height: 10vw;
					line-height: 10vw;
					padding: 3vw;
					transition-duration: 0.3s;
					-webkit-appearance: none;
					box-shadow: inset 0 1vw 1vw 0 #0000000a;
				}
				.forminput:focus{
					outline: none;
					border-color: #0078fa;
					background-color: white;
				}
				.formradio {
					margin-right: 2.5vw;
					line-height: 5vw;
				}
				.connectlinks{
					display: inline-block;
					margin: 5vw;
					margin-bottom: 0vw;
					margin-left: 0;
					margin-top: 0;
				}
				.connectimages{
					width: 10vw;
					transition-duration: 0.1s;
				}
				.connectimages:hover{
					transform: scale(0.9);
					fill: white;
				}
				#footermidright .notondesktop{
					height: 3vw;
					width: 3vw;
				}
			#footerbottom{
				padding: 5vw;
				padding-bottom: 3vw;
				border-bottom-style: solid;
				border-bottom-width: 0.1vw;
			}
				#footerbottomcontent{
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					height: 45vw;
				}
					#footerbottomcontent a{
						margin-bottom: 0.3vw;
					}
					.footercategoryname{
						font-weight: 600;
						font-size: 1.2vw;
					}
					.footerbeforecategoryname{
						padding-bottom: 1vw;
					}
			#footerannotation{
				padding: 5vw;
				padding-top: 1vw;
				padding-bottom: 1vw;
				text-align: center;
				font-size: 3vw;
			}
		.footerheading{
			margin-top: 5vw;
			margin-bottom: 2vw;
			font-size: 5vw;
			font-weight: 500;
		}
	}

	/* page */
	@media screen {
		.pagecontainer{
			padding: 10vw;
			padding-top: 25vw;
		}
			.page{
				border-radius: 1vw;
				padding: 5vw;
				padding-left: 6vw;
				padding-right: 6vw;
				padding-bottom: 10vw;
			}
				.pagecontent{
					margin-top: 2vw;
				}
				.pagesubheading{
					margin-top: 5vw;
					margin-bottom: 5vw;
					font-size: 4vw;
				}

				ol {
					margin-top: 1vw;
					counter-reset: item
				}
				li {
					margin-top: 1vw;
					display: block;
				}
				li:before {
					content: counters(item, ".") " ";
					white-space: pre;
					counter-increment: item ;
				}
	}

	.notonmobile{
		display: none;
	}
}

/* for desktop */
@media only screen and (orientation: landscape){

	.section{
		margin: 10vw;
		margin-top: 5vw;
	}
		.sectionheading{
			text-align: center;
		}
		.sectioncontent{
			margin-top: 5vw;
		}

	/* banner */
	@media screen {
		#banner{
			margin-top: 3vw;
			height: 50vw;
			background-size: cover;
			text-align: center;
		}
			#bannerheading{
				padding-top: 10vw;
			}
			#bannercontent{
				margin: auto;
				margin-top: 1vw;
				width: 30vw;
			}
	}

	/* tiles */
	@media screen {
		.tilescontainer{
			margin: 2.5vw;
			display: flex;
			flex-wrap: wrap;
		}
			.tile{
				display: inline-block;
				margin: 2.5vw;
				width: 42.5vw;
				height: 28vw;
				border-radius: 0.25vw;
				border-style: solid;
				border-width: 0.1vw;
				background-size: contain;
				background-repeat: no-repeat;
			}
				.tileheading{
					position: relative;
					margin-top: 5vw;
					text-align: center;
				}
				.tilecontent{
					position: relative;
					margin: 5vw;
					margin-top: 1vw;
					text-align: center;
				}
			.smalltile{
				height: 28vw;
			}
			.mediumtile{
				height: 42vw;
			}
			.bigtile{
				height: 56vw;
			}
			.widetile{
				width: 90vw;
				height: 28vw;
			}
	}

	/* text */
	@media screen{

		/* normal stuff */

		.heading{
			font-size: 2vw;
			font-weight: 500;
		}

		.caption{
			font-size: 1.5vw;
			font-weight: 500;
		}

		.text{
			font-size: 1vw;
			font-weight: 400;
		}

		/* button stuff */

		.buttontext{
			font-size: 1vw;
			font-weight: 600;
		}
	}

	/* buttons & lables */
	@media screen{

		.button{
			height: 3vw;
			width: 10vw;
			line-height: 3vw;
			text-align: center;
			border-radius: 0.25vw;
			transition-duration: 0.1s;
		}
		.button:hover{
			transform: scale(1.03);
		}
		.button:active{
			transform: scale(0.9);
		}

		.disabledbutton{
			margin: auto;
			height: 10vw;
			width: 25vw;
			line-height: 9vw;
			text-align: center;
			font-size: 3.5vw;
			border-radius: 1vw;
			border-style: solid;
			border-width: 0.5vw;
			transition-duration: 0.1s;
		}

		.bigbutton{
			margin: auto;
			margin-top: 20vw;
			width: 50vw;
			height: 15vw;
			line-height: 14vw;
			text-align: center;
			border-radius: 1vw;
			border-style: solid;
			border-width: 0.5vw;
			transition-duration: 0.1s;
		}
		.bigbutton:active{
			transform: scale(0.9);
		}

		.label{
			display: inline;
			padding: 1vw 2vw 1vw 2vw;
			border-radius: 1vw;
		}
	}

	/* header */
	@media screen {
		header{
			position: fixed;
			top: 0;
			left: 0;
			height: 8vw;
			width: 100vw;
			padding-left: 10vw;
			padding-right: 10vw;
			background-color: rgb(255,255,255);
			animation-duration: 0.3s;
			z-index: 1;
			transition-duration: 0.3s;
			box-shadow: 0 0 0 rgba(0,0,0,0);
		}
	
			.headeritems {
				float: right;
				padding-left: 1vw;
				padding-right: 1vw;
				margin-left: 5vw;
				line-height: 8vw;
				transition-duration: 0.3s;
			}
			.headeritems:hover{
				transform: scale(1.03);
			}
	
			#headerrightitem{}
	
				#headerlogocontainer{
					float: left;
					line-height: 8vw;
					text-align: left;
					padding:0;
					margin-left: 0;
				}
	
					#headerlogoimage{
						display: inline-block;
						height: 3vw;
						transition-duration: 0.3s;
					}
	
					#headertyefaceimage{
						display: inline-block;
						margin-left: 1vw;
						padding-top: 0.2vw;
						height: 2vw;
						transition-duration: 0.3s;
					}
	
	}

	/* footer */
	@media screen {
		footer{
			padding: 5vw;
			padding-top: 0vw;
			padding-bottom: 0vw;
		}
			#footertop{
				padding: 5vw;
				display: flex;
				border-bottom-style: solid;
				border-bottom-width: 0.1vw;
			}
				.footerlinks{
					display: inline-block;
					margin-right: 2vw;
					margin-bottom: 1vw;
				}
				.footerlinks:hover{
					color: white;
				}
				#downloadcontainer{
					display: flex;
				}
					.downloadcontent{
						width: 15vw;
					}
				.downloadlinks{
					display: inline-block;
					margin-right: 2vw;
					margin-top: 1vw;
					transition-duration: 0.3s;
				}
				.downloadlinks:hover{
					transform: scale(1.03);
				}
				.downloadimages{
					height: 3vw;
				}
			#footermid{
				padding: 5vw;
				display: flex;
				border-bottom-style: solid;
				border-bottom-width: 0.1vw;
			}
				.forminput{
					margin-bottom: 1.5vw;
					width: 30vw;
					border-radius: 0.25vw;
					border-style: solid;
					border-width: 0.1vw;
					height: 2.5vw;
					line-height: 2.5vw;
					padding: 0.5vw;
					transition-duration: 0.3s;
					-webkit-appearance: none;
					box-shadow: inset 0 1vw 1vw 0 #0000000a;
				}
				.forminput:focus{
					outline: none;
					border-color: #0078fa;
					background-color: white;
				}
				.formradio {
					margin-right: 0.5vw;
					line-height: 2vw;
				}
				.connectlinks{
					display: inline-block;
					margin: 2vw;
					margin-left: 0;
					margin-top: 0;
				}
				.connectimages{
					width: 3vw;
					transition-duration: 0.3s;
				}
				.connectimages:hover{
					fill: white;
					transform: scale(1.03);
				}
				#gethelpheading{
					margin-top: 2vw;
				}
			#footerbottom{
				padding: 5vw;
				border-bottom-style: solid;
				border-bottom-width: 0.1vw;
			}
				#footerbottomcontent{
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					height: 45vw;
				}
					#footerbottomcontent a{
						margin-bottom: 0.3vw;
					}
					.footercategoryname{
						font-weight: 600;
						font-size: 1.1vw;
					}
					.footerbeforecategoryname{
						padding-bottom: 1vw;
					}
			#footerannotation{
				padding: 5vw;
				padding-top: 1vw;
				padding-bottom: 1vw;
				display: flex;
				justify-content: space-between;
			}
		.footerheading{
			margin-bottom: 1vw;
		}
		.footerblock{
			width: 50vw;
			padding-right: 5vw;
		}
		.rightblock{
			width: 30vw;
		}
	}

	/* page */
	@media screen {
		.pagecontainer{
			padding: 10vw;
		}
			.page{
				border-radius: 0.1vw;
				padding: 5vw;
				padding-left: 6vw;
				padding-right: 6vw;
				padding-bottom: 10vw;
			}
				.pagecontent{
					margin-top: 2vw;
				}
					.pagesubheading{
						font-size: 1vw;
					}

				ol {
					margin-top: 1vw;
					counter-reset: item
				}
				li {
					margin-top: 1vw;
					display: block;
				}
				li:before {
					content: counters(item, ".") " ";
					white-space: pre;
					counter-increment: item ;
				}
	}
	
	.notondesktop{
		display: none;
	}
}