@media only screen
{

	html
	{
		box-sizing: border-box;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}

	html::-webkit-scrollbar 
	{
		display: none;
	}

	a
	{
		color: inherit;
		text-decoration: none;
	}

	.bold
	{
		font-weight: bold;
	}

	.black
	{
		color: rgb(45,45,45);
	}

	.grey
	{
		color: rgb(75,75,75);
	}

	.light
	{
		color: rgb(155,155,155);
	}

	.lighter
	{
		color: rgb(225,225,225);
	}

	.white
	{
		color: white;
	}

	.purple
	{
		color: rgb(200,64,233);
	}

	.red
	{
		color: rgb(255,45,85);
	}

	.yellow
	{
		color: rgb(255,204,0);
	}

	.green
	{
		color: rgb(76,217,100);
	}

	.blue
	{
		color: rgb(0,122,255);
	}

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

	@font-face
	{
		font-family: Eina02;
		src: url(fonts/Eina02-SemiBold.ttf);
		font-weight: bold;
	}

	body
	{
		font-family: 'Eina02', sans-serif; 
		color: rgb(45,45,45);
		line-height: 1.5;
		scrollbar-width: none;
	}

	@keyframes fadein 
	{
		from {opacity: 0}
		to {opacity: 1}
	}

	@keyframes fadeout
	{
		from {opacity: 1}
		to {opacity: 0}
	}

	@keyframes storyin
	{
		from {transform: translateY(80vh);}
		to {transform: translateY(0vw);}
	}

	@keyframes storyout
	{
		from {transform: translateY(0);}
		to {transform: translateY(80vw);}
	}

	@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);}
	}
}

@media only screen and (orientation: portrait)
{
	.notonmobile
	{
		display: none;
	}

	html
	{
		font-size: 3vw;
	}

	.linkarrow
	{
		display: inline-block;
		margin-top: -0.1vw;
		height: 3vw;
	}

	.linkarrowsmall
	{
		display: inline-block;
		height: 2vw;
	}

	header
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 14vw;
		background-color: white;
		overflow: hidden;
		box-shadow: 0 0 3vw rgba(0,0,0,0.05);
		transition: 0.3s;
		z-index: 2;
	}

		#mobileheaderbackground
		{
			display: none;
			position: fixed;
			top: 0;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0,0,0,0.5);
			animation-name: fadein;
			animation-duration: 0.3s;
		}

		#mobileheadertogglebutton
		{
			float: left;
			padding: 4vw;
			height: 6vw;
			width: 6vw;
			font-weight: bold;
		}

			#mobileheadermenu
			{
				width: 100%;
			}

		.mobileheaderitems
		{
			display: block;
			margin-top: 2vw;
			font-size: 4vw;
			line-height: 10vw;
		}

		#mobileheaderlogocontainer
		{
			margin-top: 0;
			margin-bottom: 10vw;
			padding: 2vw;
			width: 10vw;
		}

			#mobileheaderlogoimage
			{
				width: 100%;
			}

			#mobileheadertyefaceimage
			{
				display: none;
			}

	footer
	{
		background-color: rgb(35,35,35);
		color: white;
		text-align: left;
		font-size: 3vw;
	}

		#footercontentleft
		{
			padding-top: 15vw;
			margin: 15vw;
			margin-top: 0vw;
			margin-bottom: 0vw;
		}

			#footercontentleftheading
			{
				width: 20vw;
				padding-bottom: 10vw;
			}

				#footercontentleftheadingimage
				{
					width: 100%;
				}

			.footercontentleftitems
			{
				display: inline-block;
				line-height: 10vw;
				width: 34vw;
				height: 10vw;
			}

		#footercontentright
		{
			padding-top: 15vw;
			margin: 15vw;
			margin-top: 0vw;
			margin-bottom: 0vw;
		}

			#footercontentrightheading
			{
				font-size: 5vw;
				margin-bottom: 5vw;
				font-weight: bold;
			}

				#footersubscribeform
				{
					margin-top: 3vw;
					margin-bottom: 25vw;
					width: 80vw;
					font-family: inherit;
					color: inherit;
				}

					#footersubscribeformemail
					{
						float: left;
						padding: 2vw;
						width: 56vw;
						height: 6vw;
						font-family: inherit;
						border-radius: 1vw;
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
						border-style: none;
						background-color: rgb(45,45,45);
					}

					#footersubscribeformsubmit
					{
						float: left;
						height: 10vw;
						width: 10vw;
						border-radius: 1vw;
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
						border-style: none;
						background-color: rgb(45,45,45);
					}

						#footersubscribeformsubmitarrow
						{
							width: 60%;
						}

				#footersociallinkscontainer
				{
					margin-top: 3vw;
					height: 10vw;
				}

					.footersociallinks
					{
						display: inline-block;
						height: 10vw;
						margin-right: 6vw;
					}

					.footerlinksimage
					{
						height: 100%;
					}

		#footerlowercontent
		{
			padding-bottom: 15vw;
			margin: 15vw;
			margin-bottom: 0vw;
		}

			#footerlowerphone,
			#footerlowermail,
			#footerlowercopyright
			{
				padding-bottom: 5vw;
			}

				.footerlowertext
				{
					color: white;
				}
}

@media only screen and (orientation: landscape)
{
	html
	{
		font-size: 0.9vw;
	}

	.notondesktop
	{
		display: none;
		display: none;
	}

	.title
	{
		font-size: 2.4vw;
	}

	.heading
	{
		font-size: 1.8vw;
	}

	.subheading
	{
		font-size: 1.2vw;
	}

	.text
	{
		font-size: 0.9vw;
	}

	.subtext
	{
		font-size: 0.6vw;
	}

	.linkarrow
	{
		display: inline-block;
		margin-top: -0.1vw;
		height: 0.9vw;
	}

	.linkarrowsmall
	{
		display: inline-block;
		height: 0.6vw;
	}

	header
	{
		position: fixed;
		top: 0;
		left: 0;
		height: 8vw;
		width: 100vw;
		background-color: rgb(255,255,255);
		animation-duration: 0.3s;

		font-weight: bold;
		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-right: 7vw;
			line-height: 8vw;
			font-size: 0.9vw;
			font-weight: bold;
			transition-duration: 0.3s;
		}

		#headerrightitem
		{
			margin-right: 9vw;
		}

			#headerlogocontainer
			{
				float: left;
				margin-left: 9vw;
				line-height: 8vw;
				text-align: left;
			}

				#headerlogoimage
				{
					display: inline-block;
					height: 3vw;
					transition-duration: 0.3s;
				}

				#headertyefaceimage
				{
					display: inline-block;
					margin-left: 1vw;
					padding-top: 0.5vw;
					height: 2vw;
					transition-duration: 0.3s;
				}

	footer
	{
		background-color: rgb(35,35,35);
		margin-bottom: -1vw;
	}

		#desktopfooter
		{
			height: 40vw;
			background-color: rgb(35,35,35);
			font-size: 0.9vw;
			text-align: left;
		}

			#footercontent
			{
				padding-top: 5vw;
				padding-bottom: 3vw;
				height: 25vw;
			}

				#footercontentleft
				{
					float: left;
					margin-left: 10vw;
					height: 25vw;
					width: 50vw;
				}

					#footercontentleftheading
					{
						height: 6vw;
					}

						#footercontentleftheadingimage
						{
							margin-top: 0.35vw;
							height: 35%;
						}

					.footercontentleftitems
					{
						display: inline-block;
						margin-right: 3vw;
						margin-top: 1vw;
						height: 2vw;
						width: 10vw;
						transition-duration: 0.3s;
					}

					.footercontentleftitems:hover
					{
						color: white;
					}

				#footercontentright
				{
					float: right;
					margin-right: 10vw;
					height: 25vw;
					width: 30vw;
				}

					#footercontentrightheading
					{
						height: 7vw;
						font-size: 1.8vw;
						font-weight: bold;
					}

					#footersubscribeform
					{
						margin-top: 1vw;
						margin-bottom: 3.8vw;
						height: 2.8vw;
						font-family: inherit;
						color: inherit;
					}

						#footersubscribeformemail
						{
							float: left;
							padding: 0.5vw;
							padding-left: 1vw;
							width: 25.7vw;
							height: 1.8vw;
							font-family: inherit;
							border-radius: 0.2vw;
							border-top-right-radius: 0;
							border-bottom-right-radius: 0;
							border-style: none;
							background-color: rgb(45,45,45);
						}

						#footersubscribeformsubmit
						{
							float: left;
							height: 2.8vw;
							width: 2.8vw;
							border-radius: 0.2vw;
							border-top-left-radius: 0;
							border-bottom-left-radius: 0;
							border-style: none;
							background-color: rgb(45,45,45);
						}

							#footersubscribeformsubmitarrow
							{
								width: 60%;
							}

					#footersociallinkscontainer
					{
						margin-top: 1vw;
						height: 2.5vw;
					}

						.footersociallinks
						{
							float: left;
							margin-right: 1.5vw;
							height: 2.5vw;
							width: 2.5vw;
							opacity: 0.7;
							transition-duration: 0.3s;
						}

						.footersociallinks:hover
						{
							opacity: 1;
						}

							.footerlinksimage
							{
								height: 100%;
							}



			#footerlowercontent
			{
				border-width: 0vw;
				border-style: solid;
				border-color: grey;
				border-top-width: 0.05vw;
				height: 7vw;
			}

				#footerlowerphone,
				#footerlowermail
				{
					line-height: 7vw;
					float: left;
					margin-left: 10vw;
				}

				#footerlowermail
				{
					margin-left: 5vw;
				}

					.footerlowertext
					{
						color: white;
					}

				#footerlowercopyright
				{
					line-height: 7vw;
					float: right;
					margin-right: 10vw;
					width: 30vw;
				}

	#storypopupcontainer
	{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		overflow: scroll;

		z-index: 2;

		animation-name: fadein;
		animation-duration: 0.3s;
	}

		#popupbackground
		{
			position: fixed;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0,0,0,0.2);
		}

		#storypopup
		{
			position: relative;
			margin-top: 10vh;
			margin-bottom: 20vh;
			height: 75vw;
			width: 50vw;
			border-radius: 0.2vw;
			background-color: white;

			animation-name: storyin;
			animation-duration: 0.3s;
		}

			#closepopupbuttonbalance
			{
				float: left;
				margin: 2vw;
				height: 2vw;
				width: 2vw;
			}

			#closepopupbutton
			{
				float: right;
				margin: 2vw;
				height: 2vw;
				width: 2vw;
				cursor: pointer;
			}

				#closepopupbuttonimage
				{
					height: 100%;
					width: 100%;
				}

			#story1,#story2,#story3,#story4
			{
				display: none;
			}
}