@font-face {
  font-family: 'PoiretOne-Regular';
  src: url('Fonts/PoiretOne-Regular.eot');
  src: url('Fonts/PoiretOne-Regular.eot?#iefix') format('embedded-opentype'),
       url('Fonts/PoiretOne-Regular.svg#PoiretOne-Regular') format('svg'),
       url('Fonts/PoiretOne-Regular.ttf') format('truetype'),
       url('Fonts/PoiretOne-Regular.woff') format('woff'),
       url('Fonts/PoiretOne-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Audiowide-Regular';
  src: url('Fonts/Audiowide-Regular.ttf');
  src: url('Fonts/Audiowide-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('Fonts/Nunito/static/Nunito-ExtraLight.ttf');
  src: url('Fonts/Nunito/static/Nunito-ExtraLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'PoiretOne-Regular';
}

#header {
    position: fixed;
    z-index:100;
    top: 0;
    left:0;
    right: 0;
    padding: 2.7vh 2vh 2.2vh 2vh;
    background-color:#fff;
}

#logo {
    position: relative;
	max-height: 4.75vh;
	max-width: 50vw;
    left: 0;
}

#language
{
    position: relative;
    float: right;
    color: #2a6f97;
    font-size: 3.5vh;
    padding: 0.5vh 0;
}

#language a
{
    color: #2a6f97;
    text-decoration: none;
}


@media screen and (max-width:  725px) and (orientation : portrait) {
	#header {
		padding: 3.7vw 3vw 2.2vw 3vw;
	}
	
	#language
	{
		font-size: 5vw;
		padding: 0.5vw 0;
	}
}

#white-bar {
	position: fixed;
	bottom: 0;
	left:0;
	right: 0;
	height: 40px;
	background-color: #ffffff;
	z-index: 300;
}

/* Slogan (start) */

	#slogan {
		position:fixed;
		top: 37vh;
		left: 0;
		right:0;
		z-index:20;
	}

	#slogan-background {
		position:absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right:0;
		z-index:21;
		background-color: #fff;
		opacity: 50%;
	}

	#slogan-text,
	#slogan-text a {
		position:relative;
		z-index:22;
		padding: 5vh 0;
		
		color: #013a63;
		font-size: 5.5vh;
		text-align: center;
		text-decoration: none;
		
		opacity: 90%;
	}
	
	#slogan-text a {
		width: 50%;
		align: center;
		float: left;
		display: block;
		margin: -5vh 0;
	}
	
	#background-video {
		position: fixed;    
		z-index: 1;
		top: 0;
		width: 100vw;
		height: 110vh;
		object-fit: cover;
	}
	
/* Slogan (end) */

/* About (start) */

	.about {
		position: relative;
		margin-top: 90vh;
		padding: 10vh 0 5vh 0;
		max-height: 70vh;
		overflow: hidden;
		z-index:50;
		background-color: #fff;
	}

	.about-picture {
		position: relative;
		float: left;
		width: 240px;
		height: 247px;
		background-image: url(../media/logo/profilepic2.jpg);
		background-size: cover;
		background-position: center;
	}

	.about i {
		position: relative;
		width: 200px;
		display: block;
		float: left;
		font-style: normal;
	}

	.about p {
		float: right;
		width: 1010px;
	}

	h2 {
		float: right;
		width: 1010px;
		font-size: 30px;
		margin: 0 0 20px 10px;
	}

	.logo {
		font-size: 23px;
		color: #468faf;
	}

	.logo strong {
		font-size: 32px;
		color: #468faf;
	}
	@media screen and (max-width: 1400px) {

		h2 {
			width: 73vw;
		}
		
		.about {
			margin-top: 95vh;
			padding: 5vw 0 5vw 0;
		}
	
		.about p {
			border-style: none;
			padding: 0.25vw 3vw 0 0;
			width: 70vw;
		}
		
		.about-picture {
			margin-left: 2.7vw;
			width: 19vw;
			height:  19.5vw;
		}
		
		.about .bigger-text {
			font-size: 25px;
		}
   }

	@media screen and (max-width: 765px) {

		h2 {
			width: 97.5%;
			margin: 20px 0 -5px 0;
		}
		
		.about {
			margin-top: 95vh;
			padding: 4vw 3.7% 5vw 2%;
			max-height: 80vh;
		}
	
		.about p {
			border-style: none;
			margin: 2.5vw auto 3vw auto;
			width: 94%;
		}
	
		.about-picture {
			margin: 0 3.7% 0 1.9%;
			width: 98%;
			height:  50vw;
		}
	
		
   }
   
/* About (end) */

/* CV (start) */

	.cv {
		position: relative;
		padding: 10vh 0 5vh 0;
		max-height: 70vh;
		overflow: hidden;
		z-index:50;
		background-color: #fff;
	}

	.picture,
	.picture2 {
		position: relative;
		float: left;
		width: 260px;
		height: 260px;
		
		background-size: cover;
		background-position: center;

		margin-left: -25%; 
		transition: margin 1s ease-in-out, opacity 1s ease-in-out;
		-webkit-transition: margin 1s ease-in-out, opacity 1s ease-in-out;
		opacity: 0;
		filter: alpha(opacity=0);
	}
	
	.picture2 {
		height: 334px;
	}

	.active .picture,
	.active .picture2 {
		margin-left: 0; 
		opacity: 1;
		filter: alpha(opacity=100);
	}

	.content {
		border-width: 0 1px;
		border-style: solid;
		border-color: #2a6f97;
		float: right;
		padding: 0 64px;
		width: 833px;
		
		transition: opacity .7s ease-in-out;
		-webkit-transition: opacity .7s ease-in-out;
		opacity: 0.3;
		filter: alpha(opacity=30);
	}

	.active .content {
		opacity: 1;
		filter: alpha(opacity=100);
	}

	.width {
		position:relative;
		max-width: 1300px;
		margin: 0 auto;
	}
	
	.plejmo {
		background-image: url(../media/logo/plejmo_film2home.png);
	}
	
	@media screen and (max-width: 1400px) {
		.content {
			border-style: none;
			padding: 0.25vw 3vw 0 0;
			width: 71vw;
		}
		
		.cv {
			padding: 2.7vw 0 2vw 0;
		}
		
		.width {
			max-width: 100vw;
			margin: 0;
		}
		
		.picture,
		.picture2 {
			width: 20.8vw;
			height:  20.8vw;
		}
	
		.active .picture,
		.active .picture2 {
			margin-left: 2.7vw;
		}		
	
		.picture2 {
			height: 25.69vw;
		}
	}

	@media screen and (max-width: 764px) {
		
		.content {
			border-style: none;
			margin: 30px auto 0 auto;
			width: 100%;
		}
		
		.cv {
			padding: 5vw auto 0 auto;
			max-height: 80vh;
		}
		
		.width {
			margin: 0 auto;
			padding: 0;
		}
		
		.picture,
		.picture2 {
			margin-top: 1vw;
			margin-left: 1vw;
			width: 92.4%;
			height:  50vw;
		}
		
		.active .picture,
		.active .picture2 {
			margin: 1vw 0 0 3.8%;
		}
	
		.plejmo {
			background-image: url(../media/logo/plejmo_film2home_wide.png);
		}	
   }
   
/* CV (end) */

.headline1,
.headline3 ,
.headline4 {
    font-size: 45px;
	color: #468faf;
}

.headline1 span,
.headline3 span,
.headline4 span {
    font-size: 29px;
}

h2,
.logo strong,
.headline2,
.headline1 strong,
.headline3 strong,
.headline4 strong {
	font-family: 'Audiowide-Regular';
	font-weight: none;
	color: #2a6f97;
}

.headline1 strong,
.headline3 strong,
.headline4 strong {
	white-space: nowrap;
}
	
.headline2 {
	font-size: 1.84VW;
}

p {
	position: relative;

    font-size: 28px;
	margin: -13px 0 45px 0;
	font-weight: none;
}

.text {
    font-size: 21px;
	font-family: 'Nunito';
}

.bigger-text,
h1 {
    font-size: 33px;
    font-family: 'PoiretOne-Regular';
	font-weight: normal;
	margin: -10px 0 25px 0;
}

@media screen and (max-width:  1400px) {

	.headline1,
	.headline3,
	.headline4 {
		font-size: 3VW;
		color: #468faf;
	}

	.headline1 span,
	.headline3 span,
	.headline4 span {
		font-size: 2VW;
	}

	.headline1 strong,
	.headline3 strong,
	.headline4 strong {
		text-align-last: justify;
		font-size: 4VW;
	}
	
	.headline2 {
		font-size: 2.5VW;
	}
	
}

@media screen and (max-width:  764px) {
	
	.headline1,
	.headline3,
	.headline4,
	.headline3 span {
		font-size: 6VW;
	}

	.headline1 strong {
		display: block;
		font-size: 8VW;
		text-align: justify;
	}
	
	.headline2 {
		display: block;
		font-size: 4.6VW;
		text-align: justify;
		line-height: 4.7vw;
	}

	.headline3 strong {
		display: block;
		font-size: 6.21VW;
		text-align: justify;
	}
	
	.headline4 strong {
		display: block;
		font-size: 7.4VW;
		text-align: justify;
	}
	
	.cv .bigger-text {
		line-height: 7VW;
		margin-bottom: 25px;
		margin-left: 6.3%;
		width: 94%;
	}
	
	h1 {
		text-align: end;
		line-height: 7VW;
		width: 91%;
		margin: -20px 7% 25px 7%;
		display: block;
	}
	
	p {
		font-size: 25px;
		width: 91%;
		margin: -13px 6% 45px 7%;
	}
	
	p dfn {
		display: block;
		font-style: normal;
	}

	.text {
		font-size: 19px;
	}
}

@media screen and (max-width:  364px) {
	
	.headline1 strong {
		font-size: 7.8VW;
	}
	
	.headline3 strong {
		font-size: 6.12VW;
	}
	
	.headline4 strong {
		font-size: 7.3VW;
	}
}

.image-devider {
	position: relative;
    z-index:50;
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	background-color: #ffffff;
}
@supports (-webkit-touch-callout: none) {
	.image-devider {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		HEIGHT: 100vh;
		background-attachment: scroll;
	}
}

/* expand read more (start) */

	a.readmore,
	a.readmore:visited {
		position: absolute;
		bottom: 0;
		right: 0;
		left:0;
		padding: 10px 0;
		color: #2a6f97;
		text-align: center;
		font-size: 3.5vh;
		text-decoration: none;
		background-color: #fff;
		display: block;
		
		border-width: 1px 0 0 0;
		border-style: solid;
		border-color: #2a6f97;
		
		box-shadow: 0 0 20px 30px #fff;
	}

	.always-expanded,
	.expanded {
		transition: max-height 2s ease-in-out;
		-webkit-transition: max-height 2s ease-in-out;
		max-height: 900vh;
	}

	.expanded a.readmore {
		display: none;
	}
	
	@media screen and (max-width:  1400px),
	@media screen and (max-device-width: 1400px) {

		a.readmore,
		a.readmore:visited {
			font-size: 25px;
		}
	}

/* expand read more (end) */

.contact {
	position: relative;
    margin-top: 85vh;
	padding: 3vh 0;
    z-index:50;
	
    color: #2a6f97;
	background-color: #fff;
}

.contact .width {
	margin: auto;
}

@media screen and (max-width:  1400px) {
	.contact {
		padding: 2vw 2vw;
	}
}

@media screen and (max-width:  540px) {
	.contact .bigger-text{
		font-size: 6VW;
	}
}

.clear {
	clear: both;
}

.left {
	float: left;
}

.right {
	float: right;
}