/********** fonts **********/

	@font-face {
		font-family: Seravek-ExtraLight; src: url(../fonts/Seravek-ExtraLight.woff2);
		font-family: Seravek-ExtraLightItalic; src: url(../fonts/Seravek-ExtraLightItalic.woff2);
		font-family: Seravek-Light; src: url(../fonts/Seravek-Light.woff2);
		font-family: Seravek-LightItalic; src: url(../fonts/Seravek-LightItalic.woff2);
		font-family: Seravek; src: url(../fonts/Seravek.woff2);
		font-family: Seravek-Italic; src: url(../fonts/Seravek-Italic.woff2);
		font-family: Seravek-Medium; src: url(../fonts/Seravek-Medium.woff2);
		font-family: Seravek-MediumItalic; src: url(../fonts/Seravek-MediumItalic.woff2);
		font-family: Seravek-Bold; src: url(../fonts/Seravek-Bold.woff2);
		font-family: Seravek-BoldItalic; src: url(../fonts/Seravek-BoldItalic.woff2);
	}

/********** color reference **********

	light green: 164,218,34
	
	green: 100,180,30
	
	dark green: 75,135,22

/********** media queries **********/
	
	@media only screen and (max-width: 599px) {}
	
	@media only screen and (min-width: 600px) {}
	
	@media only screen and (min-width: 750px) {}
	
	@media only screen and (min-width: 990px) {}
	
	@media only screen and (min-width: 1200px) {}
	
	@media only screen and (min-width: 1920px) {}
	
	@media only screen and (min-width: 2500px) {}
	
	@media only screen and (min-width: 3500px) {}
	
	@media only screen and (min-width: 4500px) {}

/**************************************************
	general CSS
**************************************************/

	a, a:visited, a:hover, a:active {
		color: rgb(255,255,255);
		text-decoration: none;
	}
	
	:root {
		font-size: 62.5%; /* this percentage makes 1em or 1rem = 10px */
	}
	
	body {
		color: rgb(225,225,225);
		font-family: Seravek-Light;
		font-size: 1.8rem;
		line-height: 1.8;
		text-align: justify;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
		@media only screen and (min-width: 1920px) {
			
			body {
				font-size: 2rem;
			}
			
		}
		
		@media only screen and (min-width: 2400px) {
			
			body {
				font-size: 2.2rem;
			}
			
		}
	
	.svg {
		vertical-align: top;
	}
	
	.flex-row {
		display: flex;
		flex-flow: row wrap;
	}
	
	.flex-col {
		display: flex;
		flex-flow: column;
	}
	
	.wrapper {
		padding: 5rem; /*5rem 5rem 8rem 5rem;*/
	}
	
		@media only screen and (min-width: 1200px) {
			
			.wrapper {
				padding: 8rem 0 10rem 0;
			}
			
		}
		
		@media only screen and (min-width: 1920px) {
			
			.wrapper {
				padding: 10rem 0 13rem 0;
			}
			
		}
	
	.text-wrapper {
		max-width: 42rem;
	}

/**************************************************
	headers
**************************************************/

	.header1 {
		font-size: 4rem;
	}
	
	.header2 {
		font-family: Seravek;
		font-size: 4.5rem;
		text-align: center;
	}
	
		@media only screen and (min-width: 1200px) {
			
			.header2 {
				text-align: left;
			}
			
		}
		
		@media only screen and (min-width: 1920px) {
			
			.header2 {
				font-size: 5rem;
			}
			
		}
		
		@media only screen and (min-width: 2400px) {
			
			.header2 {
				font-size: 5.5rem;
			}
			
		}
	
	.header3 {
		font-family: Seravek;
	}
	
	.header-green {
		color: rgb(100,180,30);
	}

/**************************************************
	paddings
**************************************************/

	.padding20 {
		padding-bottom: 2rem;
	}
	
	.padding30 {
		padding-bottom: 3rem;
	}
	
	.padding40 {
		padding-bottom: 4rem;
	}
	
	.padding50 {
		padding-bottom: 5rem;
	}
	
	.padding60 {
		padding-bottom: 6rem;
	}
	
	.padding70 {
		padding-bottom: 7rem;
	}
	
	.padding80 {
		padding-bottom: 8rem;
	}
	
	.padding90 {
		padding-bottom: 9rem;
	}
	
	.padding100 {
		padding-bottom: 10rem;
	}