/*
Global
Updated= 24.08.17 */

/*
=Global
============================================= */
:root {
 font-size: 62.5%;
 color: rgb(255 45 0);
 -webkit-text-size-adjust: none; /* =prevent font scaling in mobile landscape while allowing user zoom */
         text-size-adjust: none;
}

* {
 box-sizing: border-box;
}

body {
 background-color: rgb(240 240 240);
 font: 300 1.5rem/1.5 Saira, sans-serif;
 letter-spacing: 0.02rem;
 margin: 0;
}

menu {
  padding: 0;
}

li {
  list-style-type: none;
}

/*
=Page Wrapper
============================================= */
.pge-wrapper {
 box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(218 218 218); /* h-offset v-offset blur spread color */
 background-color: rgb(246 246 246);
 display: flow-root;
 max-width: 120rem;
 min-height: 100vh;
 margin: 0 auto;
}

/*
=Header + Inside Wrapper
============================================= */
header {
 position: fixed;
 top: 0; left: 0;
 width: 100%;
 z-index: 10;
}

header .ins-wrapper {
 background-color: rgb(246 246 246/ 0.85);
 max-width: 120rem;
 margin: 0 auto;
 padding-top: 3rem;

 display: flex;
 justify-content: space-between;
 align-items: center;
}

/*
=Heading + Subheading
============================================= */
h1,
h2 {
 color: rgb(255 45 0);
 text-transform: uppercase;
 font-weight: 400;
 letter-spacing: 0.15rem;
}

h1 {
 font-size: 1.85rem;
 margin: 0;
}

h2 {
 font-size: inherit;
 margin-top: 19.5rem;
 padding-right: 2.5rem;
}

h2 span.gray {
 color: rgb(78 85 92);
}

/*
=Image Gallery
============================================= */
.img-gallery {
 display: flex;
 flex-wrap: wrap;
 margin: 0 -0.5rem;
}

/*
=Image Wrapper
============================================= */
.img-wrapper {
 margin: 0;
 padding: 0.5rem;
 position: relative;
 animation: slide-up 1s;
}

@keyframes slide-up {
 from {
  transform: scale(0.75);
  opacity: 0; 
  top: 14rem;
 }
 to {
  transform: scale(1);
  opacity: 1;
  top: 0;
 }
}

/*
=Images
============================================= */
.img-wrapper img {
 width: 100%;
 display: block; /* remove the descender space */
 box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(218 218 218); /* h-offset v-offset blur spread color */
}

/*
=Caption Overlay
============================================= */
.img-wrapper figcaption {
 color: transparent;
 text-transform: uppercase;
 font-size: 77.5%;
 font-weight: 400;
 letter-spacing: 0.125rem;

 position: absolute;
 top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem;

 display: flex;
 align-content: center;
 align-items: center;
 flex-wrap: wrap;

 transition: 0.25s ease-in-out;
 padding: 1rem;
 cursor: pointer;
}

.img-wrapper figcaption:hover {
 background-color: rgb(255 45 0/ 0.875);
 color: white;
}

.img-wrapper figcaption span {
  padding-right: 1.5rem;
}

/*
=Fancybox Overrides
============================================= */
.fancybox__container {
 --fancybox-bg: rgb(24 24 27/ 0.95);
}

.fancybox__toolbar {
 font-family: Saira, sans-serif;
}

/*
=Link States
============================================= */
a {
 text-decoration: none;
}

/* ========================================== */