@charset "UTF-8";
/**
* CONTENTS
*
* #SETTINGS
* Global...............Globally-available variables and config.
* Imports...............Fonts, CSS
* Elements...............
*
* #UI
* Interaction Elements.............A, INPUT, BUTTON.
* Headings.............H1–H6 styles.
* Buttons..............Button elements.
* Other.............SVG, TIME, UL.
*
* #COMPONENTS
* Page............Page structure
* Header...........The main page header.
* Main............The main page content.
* Footer...........The main page footer.
*
* #PARTIALS
* Page............Page structure
* Header...........The main page header.
* Main............The main page content.
* Modals..............Hidden content.
* Footer...........The main page footer.
*
* #BEHAVIOUR
* Media............Behaviour on different platforms and sizes.
* Animation...........Special interaction behaviour. 
*/
/*------------------------------------*\
#SETTINGS
\*------------------------------------*/

* {
  margin: 0;
  padding: 0; }

::-moz-selection {
  color: #fff;
  background: rgba(246, 87, 87, 0.75); }

::selection {
  color: #fff;
  background: rgba(246, 87, 87, 0.75); }

/*------------------------------------*\
#UI
\*------------------------------------*/
a, input, button {
  cursor: pointer;
  position: relative;
  color: #fff;
  text-decoration: none; }
  a:focus, a:active, input:focus, input:active, button:focus, button:active {
    outline: none; }
    a:focus::before, a:active::before, input:focus::before, input:active::before, button:focus::before, button:active::before {
      opacity: 1;
      background: #F65757; }

address {
  font-weight: normal !important; }

a[href*="//"]:not([href*="denvel.eu"]) {
  cursor: alias; }

a::before, button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  background: #fff;
  transition: opacity 0.5s cubic-bezier(0, 1, 0.5, 1); }

a:hover::before, button:hover::before {
  opacity: 1; }

a:active, button:active {
  opacity: 1; }
  a:active::before, button:active::before {
    opacity: 1;
    background: #F65757; }

/*a*/
.link--image, .link--image svg {
  opacity: .75;
  transition: .3s opacity; }
  .link--image:hover, .link--image .link--image:hover svg, .link--image svg:hover, .link--image svg .link--image:hover svg {
    opacity: 1; }
  .link--image::before, .link--image svg::before {
    content: none;
    display: none; }
  .link--image:focus, .link--image:active, .link--image:focus svg, .link--image:active svg, .link--image svg:focus, .link--image svg:active, .link--image svg:focus svg, .link--image svg:active svg {
    opacity: 1; }

h1, h2 {
  display: block;
  font-size: 5vw;
  font-weight: bold;
  line-height: 1.2em; }

h3 {
  display: block;
  font-size: 2vw;
  font-weight: normal; }

svg {
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(0); }

time {
  display: block; }

ul {
  display: block;
  list-style: none; }

/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/
body {
  height: 100%;
  cursor: default;
  background-color: #162837;
  transform: translateZ(0); }

body, input, label, button, textarea {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  font: 2vw 'Nunito', Arial, sans-serif;
  line-height: 1.6em;
  text-align: center; }

address {
  font-style: normal; }

/*header*/
#page-header {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 75vh;
  overflow: hidden; }

/*img or svg*/
.page-header__cover__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 80vh; }

/*div*/
.page-header__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5vmin 5vw;
  display: flex;
  flex-flow: column; }

/*nav*/
.page-header__content__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold; }

/*a*/
.page-header__content__navigation__link-featured {
  padding: .3vh 2vw;
  background: #F65757;
  border-radius: 100px;
  color: #fff; }

/*h1*/
#page-header__content__heading {
  flex: 1 1;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  margin-bottom: 2vh; }

/*h3*/
#page-header__content__subheading {
  flex: 0 1; }

.page-section {
  margin: 12vmin 5vw; }

#page-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1vh 5vw;
  background-color: #F65757;
  font-size: 1vw; }
  #page-footer a::before {
    height: 1px;
    background: #fff; }

.page-footer__copyright, .page-footer__navigation {
  width: 100%;
  flex: 5 0;
  margin: .5vh 0; }

.page-footer__fuchsia-logo {
  flex: 0 1 65px; }
  .page-footer__fuchsia-logo svg {
    max-width: 65px;
    max-height: 65px; }

.page-footer__navigation {
  text-align: right; }

.page-footer__navigation a {
  margin: 1vh .4vw; }

/*------------------------------------*\
  #Partials
\*------------------------------------*/
.carousel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 3vmin 0; }

.carousel__figure {
  flex: 1 1 12vw; }

.carousel__figure__image {
  display: block;
  width: 12vw;
  height: 12vw;
  margin: 0 auto; }

.carousel__figure__caption {
  margin: 1vh 0; }

.layout {
  display: flex;
  justify-content: space-between; }

.layout__column:first-of-type {
  text-align: left; }

.layout__column:last-of-type {
  text-align: right; }

.layout__column--spacing__line {
  margin: 2vh 0; }

#contact-form label {
  margin-right: 1.5vw; }

#contact-form textarea {
  resize: vertical; }

#contact-form input, #contact-form textarea {
  width: 35vw;
  cursor: auto;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #fff;
  outline: none;
  text-align: left; }
  #contact-form input:focus, #contact-form input:active, #contact-form textarea:focus, #contact-form textarea:active {
    border-bottom: 2px solid #F65757; }

#contact-form p {
  text-align: left; }

.contact-form__row {
  display: flex;
  flex: 5 0;
  justify-content: flex-end;
  margin: 3vh 0; }
  .contact-form__row label::after {
    content: ":"; }

.contact-form__error {
  margin: -2vh 0;
  color: #F65757;
  font-size: 1vw;
  text-align: right !important; }

.contact-form__submit-button {
  background: none;
  border: none;
  font-weight: bold; }

/*------------------------------------*\
  #BEHAVIOUR
\*------------------------------------*/
@media only screen and (max-width: 900px) {
  /*div*/
  .page-header__content {
    padding: 3vmin 3vw; }
  #page-footer {
    flex-flow: column-reverse;
    justify-content: center;
    align-items: center;
    padding: 1vh 1vw;
    font-size: 2vw; }
  .page-footer__copyright {
    text-align: center; }
  .page-footer__fuchsia-logo {
    order: 1; }
  .page-footer__navigation {
    text-align: center; }
  .contact-form__error {
    font-size: 2vw !important; } }

@media only screen and (max-width: 600px) {
  body, input, label, button, textarea, #contact-form p {
    font-size: 12pt;
    line-height: 1.5em; }
  h1, h2 {
    font-size: 25pt; }
  h3 {
    font-size: 10pt; }
  .layout {
    max-width: 83vw;
    margin: 0 auto;
    flex-flow: column; }
  .layout__column {
    text-align: left !important; }
  #contact-form input, #contact-form textarea {
    width: 70vw; }
  #page-footer, .contact-form__error {
    font-size: 10pt !important; } }

@media only screen and (min-width: 1280px) {
  body, input, label, button, textarea, #contact-form p {
    font-size: 25px; }
  h1, h2 {
    font-size: 65px; }
  h3 {
    font-size: 25px; }
  .page-section {
    margin: 12vmin auto;
    max-width: 1150px; }
  .carousel__figure__image {
    width: 250px;
    height: 250px; }
  #contact-form input, #contact-form textarea {
    width: 450px; }
  #page-footer, .contact-form__error {
    font-size: 14px !important; } }