@font-face { font-family: 'fira-sans'; 	font-weight: 300; src: url('../fonts/FiraSans-Light.otf')			format('opentype'); }
@font-face { font-family: 'fira-sans'; 	font-weight: 400; src: url('../fonts/FiraSans-Regular.otf')			format('opentype'); }
@font-face { font-family: 'fira-sans'; 	font-weight: 600; src: url('../fonts/FiraSans-SemiBold.otf')		format('opentype'); }





html{
	font-family:				fira-sans, sans-serif;	
	font-weight:				400;
	margin:						0;
	padding:					0;
}

body {
	margin:						0;
	padding:					0;
	background-size:			cover;
}

a {
	color:						#000;
	text-decoration:			none;
	cursor:						pointer;
	border-bottom:				solid rgba(0,0,0,0.3) 1px;

}

a:hover {
	border-bottom:				solid #000 1px;
}

body > header, 
body > section {
	overflow:					hidden;
	box-sizing:					border-box;
}

body > header {
	position:					fixed;
	top:						0;
	left:						0;
	right:						0;

	background-color:			#3575b1;
	box-shadow:					0 0 1rem rgba(0,0,0,0.5); 
	color:						#fff;
	opacity:					0.2;
	filter:						grayscale(100%);
	font-size:					1.1rem;
	z-index:					10;
	overflow:					visible;

	transition:					all 600ms ease-in-out;
}


.scrolled body > header,
body > header:hover {
	opacity:					0.9;
	filter:						grayscale(0%);
}

body > header:hover {
	transition:					all 150ms linear;
}

body > header > * {
	display:					flex;
	color:						#fff;
	flex-wrap:					wrap;
	align-items:				center;
	justify-content: 			flex-end;
	line-height:				3rem;
}


body > header > * > *{
	flex:						0 0 auto;
}

body > header  a {
	color:						#fff;
	border:						none !important;
	font-variant:				small-caps;
}

#hero {
	height:						95vh;
	text-align:					left;
}

#hero .logo {
	display:					block;
	background-color:			#3575b1;
	height:						10rem;
	width:						10rem;

	margin-top:					10vh;
	margin-left:				auto;
	margin-right:				auto;
	margin-bottom:				13vh;

	background-size:			66%;

	border-radius:				100%;
}

#hero h1 {
	font-size:					3rem;
	margin:						0;
}

#hero h2 {
	margin-top:					0.5rem;
	margin-bottom:				1rem;
	font-weight:				300;
}

#hero nav {
	display:					flex;
	flex-direction:				column;
}

#hero nav > * {
	color:						#3575b1;
	border:						none !important;
	font-variant: 				small-caps;
	margin:						0.25rem 0;
}


body > header > * > * +* {
	margin-left:				1.5rem;
}

body > section {
	color:						rgba(0,0,0,0.8);
	border-bottom:				0.15rem dashed rgba(0,0,0,0.2)
}

body > section:last-child{
	border-bottom:				none;
} 

section p {
	font-weight:				300;
}


section.blue {
	background-color:			#def;
}


section.white {
	background-color:			#fff;
}

header > *,
section > article {
	box-sizing:					border-box;
	max-width:					64rem;
	margin:						auto;
	padding-left:				1rem;
	padding-right:				1rem;

}

section > article {
	text-align:					center;
	min-height: 				5rem;
	padding-top:				15vh;
	padding-bottom:				15vh;
}


section.split {
	display:					flex;
	align-items:				flex-start;
	justify-content:			center;
	flex-wrap:					wrap;
}

section.split > article {
	flex:						1 1 auto;
	max-width:					32rem;
	min-width:					20rem;
	margin:						0;
}


.logo {
	display:					inline-block;
	background-image:			url(../images/docloop_white.svg);
	background-size:			contain;
	background-position:		50%;
	background-repeat:			no-repeat;
	vertical-align: 			middle;
	height:						2em;
	width:						3em;
}

.logo.nowrap {
	background-image:			url(../images/docloop_white_nowrap.svg);
	font-size:					1.8rem;
	height:						1em;
	width:						3.787671233em;
}

.logo.nowrap.blue {
	background-image:			url(../images/docloop_blue_nowrap.svg);
}

.text-logo {
	display:					inline-flex;
	font-weight:				400;
	font-size:					1em;
}

.text-logo > * {
	flex:						0 0 auto;
}


.flex-space {
	flex:						1 0 0;
	margin:						0 important;
}

h1 {
	font-size:					4em;
	margin:						2rem 0;
	font-weight:				600;
}

h2 {
	font-size:					1.5em;
	margin:						2em 0;
	font-weight:				600;
}

h3 {
	font-size:					1.3em;
	font-weight:				600;
	text-transform:			 	uppercase;
	margin:						2rem 0;
}

h4 {
	font-size:					1.25em;
	font-weight:				600;
	margin:						1rem 0;
}

h5 {
	box-sizing:					border-box;
	display:					inline-block;
	font-size:					1.25em;
	font-weight:				400;
	margin:						0;
	text-align:					right;
	vertical-align:				top;
	width:						25%;
	padding-right:				1rem;
}

h5 + p {
	display:					inline-block;
	width:						70%;
	margin-top:					0;
}

p {
	margin:						1rem auto;
}

article > p {
	max-width:					30rem;
	text-align:					left;
}

article > ul {
	max-width:					30rem;
	text-align:					left;
	padding:					0;
	padding-left:				2rem;
}

article > ul > li {
	padding:					0.3rem 0;
}


.boxes {
	display:					flex;
	flex-wrap:					wrap;
	justify-content:			space-around;

}

.boxes > * {
	flex:						1 0 auto;
	padding:					0;
	width:						20rem;
	margin:						2rem;
	text-align:					left;
}

.boxes > * > h1,
.boxes > * > h2,
.boxes > * > h3,
.boxes > * > h4,
.boxes > * > h5 {
	text-align:					center;
}

.three {
	display:					flex;
	justify-content:			space-around;
	align-items:				center;
	flex-wrap:					wrap;
}

.three.white {
	background-color:			rgba(255,255,255,0.9);
	border-radius:				1rem;
	margin:						3rem 0;
}

.three > * {
	margin:						1rem;
	flex:						1 1 0;
} 


@media screen and (max-width: 650px){
	.three > * {
		min-width:				100%;
	}
}


.image {
	height:						15rem;
	width:						10rem;
	background-size:			contain;
	background-position:		50% 50%;
	background-repeat:			no-repeat;	
}

.comments {
	background-image:			url(../images/comments.png);
}

.issues {
	background-image:			url(../images/issues.png);
}


.arrow-right {
	background-image:			url(../images/arrow_right.png);
	height:						4rem;
}

@media screen and (max-width: 650px){
	.arrow-right {
		background-image:		url(../images/arrow_down.png);
		height:					6rem;
	}
}

.logos {
	display:					flex;
	justify-content:			space-around;
	flex-wrap:					wrap;
}

.logos > * {
	flex:						0 0 auto;
	height:						6rem;
	width:						10rem;
	margin:						0.5rem;
	background-size:			contain;
	background-repeat:			no-repeat;
	background-position:		50% 50%;
	min-width:					10rem;
}


.okf {
	background-image:			url(../images/OKFDE_Logo_black.svg);
}


.bmbf {
	background-image:			url(../images/BMBF_Logo.svg);
}


.prototype {
	background-image:			url(../images/prototype_fund.svg);
}

.paperhive {
	background-image:			url(../images/paperhive.svg);
	width:						15rem;
	height:						5rem;
	border:						1rem solid transparent;
}

.github {
	background-image:			url(../images/GitHub_Logo.png);
	width:						15rem;
	height:						5rem;
	border:						1rem solid transparent;

}