*,*:before,*:after {
  box-sizing:border-box;
}
:root {
  --gray-dark: #333131;
  --gray-medium: #707070;
  --gray-light: #A2A2A2;

  --section-padding: 1.5rem;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url("./fonts/hk-grotesk/HKGrotesk-Light.woff2") format("woff2"),
       url("./fonts/hk-grotesk/HKGrotesk-Light.woff") format("woff"),
       url("./fonts/hk-grotesk/HKGrotesk-Light.eot") format("embedded-opentype");
  font-weight:100;
  font-style:normal;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url("./fonts/hk-grotesk/HKGrotesk-Regular.woff2") format("woff2"),
       url("./fonts/hk-grotesk/HKGrotesk-Regular.woff") format("woff"),
       url("./fonts/hk-grotesk/HKGrotesk-Regular.eot") format("embedded-opentype");
  font-weight:300;
  font-style:normal;
}
html,body {
  height:100%;
}
body {
  margin:0;
  padding:0;
  background:var(--gray-light);
  display: flex;
  flex-direction: column;
}
body,table,input,textarea,button,select {
  font-family:'HK Grotesk',arial,sans-serif;
  font-size:1rem;
  line-height:1.6;
  font-weight: 100;
  color:#222;
}
h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,form,fieldset,object {
  margin:0 0 1.3rem 0;
}
h1 {
  font-size:1.5rem;
  font-weight:100;
  margin:0;
}
@media only screen and (min-width : 360px) {
  h1 {
    font-size:1.8rem;
  }
}
a {
  color:#fff;
  text-decoration: none;
  border-bottom: solid transparent 1px;
  transition:border-color .2s ease;
}
a:hover {
  text-decoration: none;
  border-color:#fff;
}
.site-main {
  display: contents;
}
.site-header {
  background: var(--gray-dark);
  color:#fff;
  padding:var(--section-padding);
  text-transform: lowercase;
  order: 1;
}
.site-content {
  background: var(--gray-dark);
  color:#fff;
  padding:var(--section-padding);
  order: 3;
}
.site-content-contact {
  color:var(--gray-light);
  margin-top:5rem;
}
.site-gallery {
  order: 2;
  z-index: 1;
}

.site-footer {
  padding:var(--section-padding);
  font-size:.8rem;
  background:#fff;
  order:4;
}
.site-footer-logos {
  display:flex;
  flex-wrap: wrap;
}
.site-footer-logos a {
  display:block;
  margin:0 2.5rem 2rem 0;
}
.site-footer-logos a:last-child {
  margin-right:0;
}
.site-footer-logos img {
  height:3.5rem;
  width:auto;
  display:block;
}

/* Splide
 * ***************************/
.splide {
  /*position: absolute;*/
  /*left:0;*/
  /*top:0;*/
  width:100%;
  height:100vh;
}
.splide__track {
  height:100vh;
}
.splide__list {
  height:100vh;
}
.splide__slide {
  height:100vh;
}
.splide__slide img {
  width:100%;
  height:100%;
  object-fit: cover;
}

@media only screen and (min-width : 992px) and (min-height: 900px) {
  :root {
    --section-padding: 2.5rem;
  }
  html {
    font-size:20px;
  }
  body {
    display:block;
  }
  .site-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:27rem;
    height:75vh;
    background: var(--gray-dark);
    position: absolute;
    z-index: 3;
    right:0;
    top:0;
  }
  .site-footer {
    position: absolute;
    z-index: 2;
    right:0;
    bottom:0;
    width:34rem;
    height:50vh;
    padding-left:9.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .splide {
    width:calc(100% - 27rem);
  }
}