/*
Global
Updated= 26.02.17 */

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

* {
 box-sizing: border-box;
}

body {
 /* background-color: rgb(242 240 238); */
 background-color: rgb(243 241 239);
 font: 335 1.5rem/1.5 Saira, sans-serif;
 letter-spacing: 0.02rem;
 margin: 0;
 border: none;
 padding: 0;
}

li {
 list-style-type: none;
}

/*
=Home Page
============================================= */
.welcome {
 /* background: linear-gradient(rgb(242 240 238), rgb(248 248 248)); */
 background-color: rgb(243 241 239);
 font-weight: 300;
 font-size: 1.7rem;
 display: flow-root;
 margin-top: 0.5rem;
}
.welcome p:last-child::before {
 content: "— ";
}
.welcome p span {
 color: var(--warm-red);
}

/*
=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(250 248 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(250 248 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 {
 text-transform: uppercase;
 font-weight: 400;
 letter-spacing: 0.15rem;
}

h1 {
 color: rgb(255 45 0); /* homepage */
 font-size: 1.85rem;
 margin: 0;
}

h1 a {
 color: rgb(255 45 0);
}

h2 {
 color: rgb(255 45 0);
 font-size: inherit;
 margin-top: 19.5rem;
 /* margin-bottom: 1rem; */
 padding-right: 2.5rem;
}

h2 span.gray {
 color: rgb(78 85 92);
 /* padding-left: 0.5rem; */
}

/*
=hide the gallery subheading */
h2.hide {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; /* pull surrounding layout inward by 1px on all sides (does not change the element's size) */
  padding-right: 0; /* remove right padding inherited from the global stylesheet */
  clip: rect(0, 0, 0, 0); /* fallback for older browsers */
  clip-path: inset(50%); /* reduce the paint area to zero */
  overflow: hidden; /* prevent any content from being visually rendered */
  white-space: nowrap; /* keep the subheading on a single line */
}

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

/*
=hide the gallery subheading */
h2.hide {
 position: absolute; /* remove the subheading from the page flow */
 width: 1px; height: 1px; /* reduce the subheading's size */
 margin: -1px; /* pull surrounding layout inward by 1px on all sides (doesn't change the element's size) */
 padding-right: 0; /* remove right padding inherited from the global stylesheet */
 clip: rect(0, 0, 0, 0); /* fallback for older browsers */
 clip-path: inset(50%); /* reduce the paint area to zero */
 overflow: hidden; /* prevent the content from being visually rendered */
 white-space: nowrap; /* keep the subheading on a single line */
}

/*
=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;
 }
}

/*
=Color Section */
.img-gallery > a {
  display: none;
}

/*
=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-size: 1.175rem;
 /* font-weight: 425; */
 font-weight: 450;
 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:
  background-color 250ms ease-in-out,
  color 250ms 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;
}

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