@charset "UTF-8";

@font-face {
    font-family: 'proxima_novabold';
    src: url('assets/proximanova-bold-webfont.woff2') format('woff2'),
         url('assets/proximanova-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_novalight';
    src: url('assets/proximanova-light-webfont.woff2') format('woff2'),
         url('assets/proximanova-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'proxima_novaextrabold';
    src: url('assets/proximanova-extrabld-webfont.woff2') format('woff2'),
         url('assets/proximanova-extrabld-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body, html, p {
    font-family: 'proxima_novalight';
	font-size: 18px;
	line-height: 30px;
	color: #fff;
}

a {
	color: #fff;
	text-decoration: none;
}
a:hover { 
	color: #009FE3;
	background: #fff;
	transition: all 1s ease;
	cursor: pointer;
}

strong {
    font-family: 'proxima_novabold';
}

.site { 
	position: absolute; 
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	background: #009FE3;
	display: flex;
}

.secondary {
	background-image: url(assets/foto_patrick_v1.jpg);
	background-position: center;
	background-size: cover;
	width: 33%;
	height: 100%;
}

.primary {
	width: 67%;
	height: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	overflow: scroll;
}

@media screen and (min-height:800px) {
	.primary { align-items: center; }
}

.st0 {
	fill:none;
	stroke:#FFFFFF;
	stroke-width:5;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	stroke-dasharray: 1000;
  	stroke-dashoffset: 1000;
  	animation: dash 3s linear forwards;
}

.st0b {
	fill:none;
	stroke:#FFFFFF;
	stroke-width:5;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	stroke-dasharray: 1000;
  	stroke-dashoffset: 1000;
  	animation: dash 12s linear forwards;
	animation-delay: 2s;
}

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

.content-container {
	text-align: center;
	max-width: 70%;
	margin: 25px 0;
}
.logo-container {
	width: 150px;
	display: inline-block;
}

h1 {
	font-family: 'proxima_novaextrabold';
	text-transform: uppercase;
	font-size: 48px;
	line-height: 48px;
}

.adres { 
	margin-top: 50px;
	font-size: 14px; 
	line-height: 20px;
	letter-spacing: 1px;
}

@media screen and (max-width: 420px) {
	.site {	display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; }
	.secondary { width: 100%; height: 250px;  }
	.primary { width: 100%; }
	.site-container { background: #009FE3; margin: 20px; }
	.content-container { max-width: 90%; }
	h1 { font-size: 36px; line-height: 36px; }
	p { font-size: 16px; line-height: 24px; }
}