/* ***** Developeer ********************************** */

/* ***** Custom fonts ******************************** */
@font-face { font-family: 'Amaranth'; src: url('../fonts/amaranth-regular-webfont.woff2') format('woff2'), url('../fonts/amaranth-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'ClearSans'; src: url('../fonts/ClearSans-Thin-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

/* ***** Global settings and reset ******************* */
body, div, img, p, h1, h2, h3, em, span, a, ul, li { margin: 0em; padding: 0em; border: 0em; outline: 0em; line-height: 1.5em; }
html, body { height: 100%; background: #203F49; font-family: 'ClearSans', sans-serif; font-size: 15px; color: #FFFFFF; -webkit-text-size-adjust: 100%; }

/* ***** Contents settings *************************** */
h1 { font-family: 'Amaranth', sans-serif; font-size: 2.2em; font-weight: normal; line-height: 2em; margin: 0em 0em 0em 0em; padding-bottom: 2%; }
h2 { font-family: 'Amaranth', sans-serif; font-size: 1.5em; font-weight: normal; line-height: 1.3em; margin-bottom: 0.25em; }
p {	margin: 0em 0em 1.5em 0em; }
p img { width: 100%; margin-top: 25px; }
ul { padding: 0em 0em 1.5em 1.3em; }
a { text-decoration: none; color: #B3C100; transition: all 0.25s ease-out; }
a:hover, a:focus, a:active { color: #D3E120; }
.horizontal-line-below { border-bottom: 1px dashed #B3C100; }
strong { font-weight: bold; font-family: sans-serif; }

/* ***** Block structure ***************************** */
.block-wrapper { width: 100%; position: relative; clear: both; float: left; }
.block-contents { margin: 0em auto 0em auto; width: 90%; max-width: 1000px; position: relative; padding: 3% 0% 3% 0%; box-sizing: border-box; }
.block-column { clear: both; position: relative; }
.two-columns .block-column { display: inline-block; vertical-align: top; width: 47.7%; margin: 0% 2% 0% 2%; }
.two-columns .block-column:first-child { margin: 0% 2% 0% 0%; }
.two-columns .block-column:last-child { margin: 0% 0% 0% 2%; }

/* ***** Custom elements ***************************** */
.peer-bg { width: 100%; height: 100%; background: #203F49 url('../images/peer-bg.png') no-repeat bottom left; background-size: 300px; position: fixed; transform: translateZ(-2px) scale(1); }
.peer-little { width: 60px; height: 130px; background: url('../images/peer-bg.png') no-repeat bottom left; background-size: 60px; position: absolute; left: 0px; bottom: 0px; }
.peer-logo { width: 100%; height: 72px; background: url('../images/peer-logo-white.svg') no-repeat right center; background-size: 350px; margin-top: 25px; }
.peer-portfolio-item { background: #304F59; border: 0px dashed #B3C100; padding: 7px 7px 7px 90px; margin: 0px 0px 25px 0px; position: relative; }
.peer-portfolio-item span { background: #203F49; width: 70px; height: 25px; border-radius: 0px 13px 13px 0px; padding-left: 7px; position: absolute; left: 0px; top: 10px; font-size: 70%; line-height: 25px; white-space: nowrap; box-sizing: border-box; transition: all 0.25s ease-out; }
.peer-portfolio-item:hover span { width: 75px; border-radius: 0px; }
.peer-icon-white { width: 100px; height: 100px; background: #304F59 url('../images/developeer1.0-icon-white-1024.png') no-repeat center center; background-size: 50px; border-radius: 100px; margin: 50px auto 0px auto; transition: all 0.25s ease-out; }
.peer-icon-white:hover { background-size: 60px; }
.martijn-de-milliano { width: 180px; height: 180px; border-radius: 90px; background: url('../images/martijn-de-milliano.jpg') no-repeat center center; background-size: 180px; position: absolute; right: 0px; top: 0px; }

/* ***** Responsiveness ****************************** */
@media screen and (max-width: 1700px) {	.peer-bg { background-size: 250px; } }
@media screen and (max-width: 1600px) {	.peer-bg { background-size: 200px; } }
@media screen and (max-width: 1500px) {	.peer-bg { background-size: 150px; } }
@media screen and (max-width: 1400px) {	.peer-bg { background-size: 100px; } }
@media screen and (max-width: 1250px) {	.peer-bg { background-size: 200px; } .peer-logo { background-position: center center; margin-bottom: 15px; } .block-contents { width: 90%; max-width: 550px; } .block-column img { width: 100%; float: none; margin-top: 35px; } .martijn-de-milliano { top: 25px; } .no-mobile { display: none; } .two-columns .block-column, .two-columns .block-column:first-child, .two-columns .block-column:last-child { display: block; width: 100%; margin: 0%; } }
@media screen and (max-width: 1025px) {	.peer-bg { background-size: 150px; } }
@media screen and (max-width: 925px) { .peer-bg { background-size: 100px; } }
@media screen and (max-width: 925px) { .peer-bg { display: none; } }
@media screen and (max-width: 725px) { .mobile-adjust { padding-left: 80px; } }
@media screen and (max-width: 525px) { .peer-logo { height: 51px; background-size: 250px; }	.martijn-de-milliano { width: 150px; height: 150px; border-radius: 75px; background-size: 150px; } }