@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lora:400,700');

* {border:none;background-repeat:no-repeat;background-position:center center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;outline:none;position:relative;background-size:cover;}

html, body {margin:0;padding:0;height:100%;font-size:10px;background-color:rgb(62,62,62)}
body {font-family:"Open Sans";color:#555555;}
header {position:fixed;top:0;right:0;left:0;color: #FFF;font-size: 20px;background-color:transparent;z-index:100;padding:0 20px}
header>div {display:flex;align-items:flex-end}
header>div>* {width:50%;}
header.scrolled {background-color:rgba(25,25,25,0.8);}
nav {text-align:right;}
nav a {display:inline-block;color:#ffffff;font-weight:700;text-decoration:none;padding:10px}
section {margin:0;}

a {color:#cf9653;font-weight:bold;text-decoration:none;}

.logo {font-size:30px;font-weight:700;padding:10px}
.page {margin:calc(100vh - 100px) 20px 00px;background-color:#ffffff;padding:20px 20px 60px;border-radius:5px;font-size:18px;line-height:166%;}
.intro {margin:0 auto;max-width:800px;text-align:left;}

h1, h2, h3 {font-family:Lora;line-height:133%;font-weight:700;margin:15px 0 25px}
h1 {font-size:38px;}
h2 {font-size:34px;}
h3 {font-size:30px;}

.background {width:100%;height:100vh;position:fixed;top:0;left:0;}
.background h1 {position:absolute;top:50%;left:0;right:0;text-align:center;transform:translateY(-50%);color:#ffffff;font-size:50px}
.background h1.scrolled {opacity:0.5}

.filters {text-align:center;margin:40px 0 0px;}
.filters span {display:inline-block;padding:4px 10px;border-radius:25px;margin:0 5px;background-color:#e1e5e6;color:#265c5f;cursor:pointer}
.filters span:hover {background-color:#cbd7da}

.gallery {display:flex;flex-wrap:wrap;margin:30px 0}
.gallery>div {background-color:#aaaaaa;margin:20px;width:calc(100% / 3 - 40px);cursor:pointer;border-radius:5px;overflow:hidden;}
.gallery img {max-width:100%;}
.gallery>div>div {position:absolute;top:0;right:0;left:0;bottom:0;background-color:rgba(25,25,25,0.75);color:#ffffff;font-size:24px;font-weight:700;padding:15px;opacity:0;}
.gallery>div:hover>div {opacity:1}
.gallery span {position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%);text-align:center;}

.features {width:800px;margin:20px auto;}
.features>div {width:100%;min-height:240px;text-align:left}
.features>div>span:first-child {position:absolute;left:0;top:20px;bottom:20px;width:200px;height:200px;border-radius:50%;overflow:hidden}
.features>div>span:last-child {position:Absolute;left:250px;right:0;padding:0;top:50%;transform:translateY(-50%)}

.features img {display:block;width:100%;height:100%}
.features strong {display:block;}