body {
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 14pt;
	color: rgb(70, 70, 70);
}

p {
	color: gray;
}

a {
	color: rgb(70, 70, 70);
	text-decoration: none;
}	
	
footer p {
	font-size: 12pt;
	text-align: right;
	color: #b6b6b6;
}

@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}

@media screen and (min-width: 1000px) {
	
	* {
		margin: 0;
	}
		
	html, body {
		height: 100%;
	}

	.languages {
		position: absolute; 
		top: 0; 
		right: 80px; 
		height: 80px;
		line-height: 80px;
		white-space: nowrap; 
	}

	.languages a {
		display: inline-block;
	}

	.languages a.active {
		font-weight: bold;
	}		

	.page-wrap {
		position: relative;
		width: 700px;
		min-height: 100%;
	  	margin-left: auto;
	  	margin-right: auto;
	  	/* equal to footer height */
		margin-bottom: -102px; 
	}
	
	.page-wrap:after {
	  content: "";
	  display: block;
	}

	.k7Small {
		background-image: url(../img/k7.svg);
		background-repeat: no-repeat;
		background-position: right bottom 122px;
	}

	.header {
		position: relative;
		height: 80px;
		line-height: 80px;
		margin-bottom: 80px;
		font-family: 'Open Sans Condensed', sans-serif;
	}

	.header ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		text-align: justify;
		animation-delay: 1s;
	} 
	
	.header ul:after {
		/* ensures justification for single lines */
		content: '';
		display: inline-block;
		width: 100%; 
	}

	.header li {
		display: inline-block;
	}	
	
	.header a.active {
		font-weight: bold;
	}

	#line {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		pointer-events: none;
	}
	
	.line {
		stroke-dasharray: 1000;
		stroke-dashoffset: 1000;
		animation: dash 5s linear forwards;
		animation-delay: 1s;
	}
	
	.header-item {
		display: none;
	}
	
	#content {
		min-height: 300px; 
		padding-right: 200px; 
		padding-bottom: 70px;
	}
	
	#content p {
		line-height: 180%;
		margin-bottom: 1em;
	}

	#placeholder {
		height: 500px;
	}
		
	#k7 {
		position: absolute;
		width: 500px;
		height: 500px;
		top: 50%;
		left: 50%;
		margin-left: -250px;
		margin-top: -250px;
	}		

	footer, #page-wrap:after {
		/* must be the same height as footer */
		height: 102px; 
	}
	
	footer {
		width: 700px;
		margin: 0 auto;
	}
		
	.bottom-image {
		display: none;
	}

	.k7Small {
		background-image: url(../img/k7.svg);
		background-repeat: no-repeat;
		background-position: right bottom 122px;
	}

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

	body {
		margin: 0;
		background: white;
	}
	
	.languages {
		display: none;
	}
	
	.page-wrap {
		width: 100%;
		margin: 0;
	}
	 
	.header {
		display: block;
		top: 0;
		left: 0;
		height: 50px;
		width: 100%;
		background: white;
		overflow: hidden;
		-webkit-transition: all 0.5s ease-out, background 1s ease-out;
		transition: all 0.5s ease-out, background 1s ease-out;
		-webkit-transition-delay: 0.2s;
		transition-delay: 0.2s;
		z-index: 1;
	}
	
	.menu-icon-container {
		position: relative;
		display: inline-block;
		height: 50px;
		width: 50px;
		cursor: pointer;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent; 
	}
	
	.menu-icon {
	 	width: 18px;
		height: 8px;
		position: relative;
		display: block;
		margin: -4px auto 0;
		top: 50%;
	}
	
	.bar {
		width: 100%;
		height: 1px;
		display: block;
		position: relative;
		background: black;
		-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
	}
	
	.top-bar {
		-webkit-transform: translateY(0px) rotate(0deg);
		transform: translateY(0px) rotate(0deg);
	}
	
	.bottom-bar {
		-webkit-transform: translateY(6px) rotate(0deg);
		transform: translateY(6px) rotate(0deg);
	}
	
	.header-item {
		display: inline-block;
		position: absolute;
		height: 100%;
		line-height: 50px;
		width: 50px;
		height: 50px;
		text-align: center;
		color: black;
		font-size: 22px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	.language {
		right: 0;
		top: 0;
		left: auto;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		-webkit-transition-delay: 0.65s;
		transition-delay: 0.65s;
	}
	
	ul.menu {
		position: relative;
		display: block;
		padding: 0px 48px 0;
		list-style: none;
	}
	
	li.menu-item {
		border-bottom: 1px solid #333;
		margin-top: 5px;
		-webkit-transform: scale(1.15) translateY(-30px);
		transform: scale(1.15) translateY(-30px);
		opacity: 0;
		-webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
	}
	
	li.menu-item:nth-child(1) {
		display: none;
	}
	
	li.menu-item:nth-child(2) {
		-webkit-transition-delay: 0.35s;
		transition-delay: 0.35s;
	}
	
	li.menu-item:nth-child(3) {
		-webkit-transition-delay: 0.28s;
		transition-delay: 0.28s;
	}
	
	li.menu-item:nth-child(4) {
	  	-webkit-transition-delay: 0.21s;
	  	transition-delay: 0.21s;
	}
	
	li.menu-item:nth-child(5) {
		-webkit-transition-delay: 0.14s;
		transition-delay: 0.14s;
	}
	
	li.menu-item:nth-child(6) {
		-webkit-transition-delay: 0.07s;
		transition-delay: 0.07s;
	}
	
	li.menu-item a {
		display: block;
		position: relative;
		color: black;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: 100;
		text-decoration: none;
		line-height: 2.35;
		font-weight: 200;
		width: 100%;
	}
	
	.header li a {
		pointer-events: none;
	}
	
	.header.menu-opened a {
		pointer-events: auto;
	}
	
	.header.menu-opened {
		height: 100vh;
		background-color: white;
		-webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
		transition: all 0.3s ease-in, background 0.5s ease-in;
		-webkit-transition-delay: 0.25s;
		transition-delay: 0.25s;
		overflow: scroll;
	}
	
	.header.menu-opened .menu-icon-container {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	.header.menu-opened .menu-icon-container .menu-icon .bar {
		-webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
		-webkit-transition-delay: 0.2s;
		transition-delay: 0.2s;
	}
	
	.header.menu-opened .menu-icon-container .menu-icon .bar.top-bar {
		-webkit-transform: translateY(4px) rotate(45deg);
		transform: translateY(4px) rotate(45deg);
	}
	
	.header.menu-opened .menu-icon-container .menu-icon .bar.bottom-bar {
		-webkit-transform: translateY(3px) rotate(-45deg);
		transform: translateY(3px) rotate(-45deg);
	}
	
	.header.menu-opened ul.menu li.menu-item {
		-webkit-transform: scale(1) translateY(0px);
		transform: scale(1) translateY(0px);
		opacity: 1;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(1) {
		-webkit-transition-delay: 0.27s;
		transition-delay: 0.27s;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(2) {
		-webkit-transition-delay: 0.34s;
		transition-delay: 0.34s;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(3) {
		-webkit-transition-delay: 0.41s;
		transition-delay: 0.41s;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(4) {
		-webkit-transition-delay: 0.48s;
		transition-delay: 0.48s;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(5) {
		-webkit-transition-delay: 0.55s;
		transition-delay: 0.55s;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(6) {
		-webkit-transition-delay: 0.62s;
		transition-delay: 0.62s;
	}
	
	.header.menu-opened ul.menu li.menu-item:nth-child(7) {
		-webkit-transition-delay: 0.69s;
		transition-delay: 0.69s;
	}
	
	.header.menu-opened .language {
		-webkit-transform: translateX(75px);
		transform: translateX(75px);
		-webkit-transition-delay: 0.3s;
		transition-delay: 0.3s;
	}
	
	#line {
		display: none;	
	}
	
	#content {
		padding: 20px;
		padding-top: 0;
	}
	
	footer {
		padding: 20px;
	}
	
	.bottom-image {
		display:block;
		width: 25%; 
		margin-left:auto;
		margin-right:auto;
		margin-top: 50px;
	}
}