/*! #1 _fonts.scss  */
@import url("https://fonts.googleapis.com/css2?family=Ysabeau:ital,wght@0,1;0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,1;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Taviraj:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
/*! #2 _vars-colors.scss  */
:root {
  /** RED */
  --red-12: hsla(339,91.3%,9%, 1);
  --red-11: hsla(343,68.7%,18.8%, 1);
  --red-10: hsla(350,56.4%,30.6%, 1);
  --red-09: hsla(356,51.4%,42.7%, 1);
  --red-08: hsla(3,60.5%,54.3%, 1);
  --red-07: hsla(9,100%,63.9%, 1);
  --red-06: hsla(21,98.9%,64.3%, 1);
  --red-05: hsla(33,87.8%,71.2%, 1);
  --red-04: hsla(41,73%,78.2%, 1);
  --red-03: hsla(52,56.9%,87.3%, 1);
  --red-02: hsla(60,48.7%,92.4%, 1);
  --red-01: hsla(70,60%,98%, 1);
  /** YELLOW */
  --yel-12: hsla(32,87%,9%, 1);
  --yel-11: hsla(36,83.9%,17.1%, 1);
  --yel-10: hsla(39,83.1%,25.5%, 1);
  --yel-09: hsla(42,84.9%,33.7%, 1);
  --yel-08: hsla(44,86.9%,41.8%, 1);
  --yel-07: hsla(47,86.7%,50%, 1);
  --yel-06: hsla(47,80.4%,63.9%, 1);
  --yel-05: hsla(51,71%,75.7%, 1);
  --yel-04: hsla(56,65.5%,82.9%, 1);
  --yel-03: hsla(60,63.3%,90.4%, 1);
  --yel-02: hsla(63,72.4%,94.3%, 1);
  --yel-01: hsla(66,100%,98%, 1);
  /** BLUE */
  --blu-12: hsla(240,87%,9%, 1);
  --blu-11: hsla(227,71.7%,18%, 1);
  --blu-10: hsla(222,62.8%,28.4%, 1);
  --blu-09: hsla(218,58.8%,39%, 1);
  --blu-08: hsla(216,56.9%,50%, 1);
  --blu-07: hsla(213,88.9%,61%, 1);
  --blu-06: hsla(211,89.6%,66.1%, 1);
  --blu-05: hsla(207,88.8%,75.5%, 1);
  --blu-04: hsla(205,86.7%,82.4%, 1);
  --blu-03: hsla(202,84.6%,89.8%, 1);
  --blu-02: hsla(201,81.3%,93.7%, 1);
  --blu-01: hsla(200,81.8%,97.8%, 1);
  /** GREEN: */
  --grn-12: hsla(120,87%,9%, 1);
  --grn-11: hsla(129,57.4%,18.4%, 1);
  --grn-10: hsla(135,49%,28.4%, 1);
  --grn-09: hsla(141,45.5%,38.8%, 1);
  --grn-08: hsla(146,44.2%,49.2%, 1);
  --grn-07: hsla(150,65.7%,60%, 1);
  --grn-06: hsla(156,68.4%,66.5%, 1);
  --grn-05: hsla(164,70.9%,77.1%, 1);
  --grn-04: hsla(170,70.7%,83.9%, 1);
  --grn-03: hsla(175,73.3%,91.2%, 1);
  --grn-02: hsla(177,71.4%,94.5%, 1);
  --grn-01: hsla(180,80%,98%, 1);
  --clr-neutral-100: hsla(0, 0%, 100%, 1);
  --clr-neutral-300: hsla(0, 0%, 50%, 1);
  --clr-neutral-400: hsla(0, 0%, 40%, 1);
  --clr-neutral-500: hsla(0, 0%, 60%, 1);
  --clr-neutral-900: hsla(0, 0%, 10%, 1);
  --front: var(--blu-12, hsla(120,87%,9%));
  --back: var(--red-01, hsla(70,60%,98%));
}

/*! #3 _cwebba-vars.scss  */
:root {
  --clr-primary-010: #f8feeb;
  --clr-primary-020: #eefff2;
  --clr-primary-030: #e7fefa;
  --clr-primary-040: #aecbd4;
  --clr-primary-050: #8296ae;
  --clr-primary-060: #646182;
  --clr-primary-070: #4a304d;
  --clr-primary-080: #2b0315;
  --clr-primary-090: #4f0d25;
  --clr-primary-100: #771b33;
  --clr-primary-110: #a12b3d;
  --clr-primary-120: #cd3c41;
  --clr-primary-130: #fa503d;
  --clr-primary-140: #fc6f38;
  --clr-primary-150: #fb8a40;
  --clr-primary-160: #f8a253;
  --clr-primary-170: #f4b86e;
  --clr-primary-180: #f0cc8c;
  --clr-primary-190: #eedeac;
  --clr-primary-200: #f0edcc;
  /*! BRAND: */
  --brand-100: #771b33;
  --brand-200: #a12b3d;
  --brand-300: #cd3c41;
  --brand-400: #fa503d;
  --brand-500: #fc6f38;
  --brand-600: #fb8a40;
  --brand-700: #f8a253;
  --brand-800: #f4b86e;
  --brand-900: #f0cc8c;
  --fs-300: 0.9375rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.375rem;
  --fs-600: 1.875rem;
  --fs-700: 2rem;
  --ff-body: "Ysabeau", "Roboto", sans-serif;
  --ff-heading: "Outfit", sans-serif;
  /* "Taviraj", "Playfair Display", serif */
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --fw-1: 100;
  --fw-2: 200;
  --fw-3: 300;
  --fw-4: 400;
  --fw-5: 500;
  --fw-6: 600;
  --fw-7: 700;
  --fw-8: 800;
  --fw-9: 900;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-cwebba: 0.0625em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;
  --typography-spacing-vertical: calc(1em + 0.5rem);
}

:where(html) {
  --font-sans: "Ysabeau", "Outfit", "Roboto", "Open Sans", system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, Arial, "Helvetica Neue", Helvetica,sans-serif;
  --font-serif: "Taviraj", "Lora", ui-serif,serif;
  --font-brand-sans: "Ysabeau", "Ubuntu", Verdana, "Corbel", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
  --rem:18px;
}

/*! #4 resets/_reset.scss  */
/* RESET source: https://piccalil.li/blog/a-modern-css-reset */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul:where([role=list]),
ol:where([role=list]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*! #5 base/cwebba-base-01.scss  */
/** _cwebba-base-01 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-500);
  color: var(--front);
  background: var(--back);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
  margin-inline: auto;
  max-width: 72rem;
}

/* 072423+072523 NEW */
article {
  display: flow-root;
  overflow: hidden;
  /*margin: 30px -20px; */
}

/** typgraphy */
.article-title,
.section-title {
  color: var(--red-09); /*--brand-200 *var(--clr-primary-500);*/
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

figure img, figure object, figure embed, figure video {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 1px solid #662323;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  padding: 0;
  margin: 0 0 1em;
  font-size: 1rem;
}

figcaption {
  margin: 1rem 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: --red-10;
}

/* This may cause double margin
figcaption p {
  margin: 0;
  font-size: inherit;
  line-height: 1.25;
  color: --red-10;
  text-align: left;
}

figcaption p:last-of-type {
  margin: 0.5em 0 0 0;
} */
/* Image floats & sizes */
@media (min-width: 600px) {
  /*  .fig-card {
  max-width:24rem;

  border:1px solid hsl(355 50% 10% / 1);
  } */
  /* Image floats */
  .left {
    margin: 0 1rem 1rem 0;
    float: left;
  }
  .right {
    margin: 0 0 1rem 1rem;
    float: right;
  }
  /* Figure sizing */
  .sml {
    width: clamp(10rem, 5.714rem + 11.429vw, 16rem);
  } /* clamp(10rem, 25vw, 16rem); */
  .big {
    width: clamp(16rem, 10.286rem + 15.238vw, 24rem);
  }
  .huge {
    width: clamp(18.75rem, 2.143rem + 44.286vw, 42rem);
  }
  /*     width: 50%;
  clamp(18.75rem, 2.143rem + 44.286vw, 42rem);
  clamp(25rem, 10.714rem + 38.095vw, 45rem); 
  width: clamp(28rem, 15.857rem + 32.381vw, 45rem);*/
}
/* This is to impose a standard ratio to blog floating images */
.blog-float-image {
  aspect-ratio: 3.875/4;
  object-fit: cover;
}

h1,
h2,
h3 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-600);
  line-height: 1.1;
  letter-spacing: -2px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: var(--fw-6);
  color: var(--red-09); /* --brand-300 */
  letter-spacing: var(--font-letterspacing-2);
  font-family: var(--ff-heading);
  text-wrap: balance;
}

h1 {
  font-size: calc(var(--rem) * 2);
  line-height: var(--typography-spacing-vertical);
}

h2 {
  font-size: calc(var(--rem) * 1.75);
  /*    --typography-spacing-vertical: 2.625rem; */
  line-height: var(--typography-spacing-vertical);
}

h3 {
  font-size: calc(var(--rem) * 1.5);
  line-height: var(--typography-spacing-vertical);
  /*      --typography-spacing-vertical: 2.25rem;*/
}

h4 {
  --font-size: 1.25rem;
  font-size: calc(var(--rem) * 1.25);
  /*  --typography-spacing-vertical: 1.874rem;*/
  line-height: var(--typography-spacing-vertical);
}

h5 {
  font-size: calc(var(--rem) * 1.125);
  line-height: var(--typography-spacing-vertical);
}

h6 {
  font-size: 1rem;
  line-height: var(--typography-spacing-vertical);
}

blockquote {
  /*  color: #241000; */
  font-style: italic;
  color: var(--front);
  font-size: 1.0625em;
  line-height: 1.325em;
  padding: 0.25em 1% 0.375em 2%;
  margin: 0 0 0.5em 0;
  background: hsla(150, 50%, 86%, 0.3);
  border-radius: 0.5rem;
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 1px 6px 6px hsla(150, 50%, 90%, 0.3);
}

/*    blockquote.big {
      color: #241000;
      font-size: 1.125em;
      line-height: 1.375em;
      letter-spacing: 0.1em;
      background: rgba(148, 209, 179, 0.3);
      padding: 0.25em 1% 0.375em 2%;
      margin: 1.25em 0 1.375em 0;
    } */
em {
  font-weight: 600;
}

strong {
  font-weight: var(--fw-700);
}

section,
.section {
  padding: min(10vh, 10em) 0;
}

/* //////////////////////
  Utility Classes
  /////////////////////// */
/* select all direct childen of .flow
   and add margin to the top for proper
   spacing */
.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

.container {
  margin-inline: auto;
  padding-inline: 1.5em;
  max-width: 72rem;
}

.container--narrow {
  max-width: 65rem;
}

.flex-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1em);
}

.text-center {
  text-align: center;
}

/* typgraphy */
.article-title,
.section-title {
  color: var(--red-09); /*--clr-primary-140*/
}

.article-title {
  font-size: var(--fs-700);
}

.section-title {
  font-size: var(--fs-600);
}

/* //////////////////////
  Header
  /////////////////////// */
.page-header {
  padding: 1em 0;
  background-image: url(/assets/images/retina-dust.png);
}

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

@media (max-width: 720px) {
  .page-header__content {
    flex-direction: column;
    align-items: center;
  }
}
.nav-list {
  margin: 0 1em 0 0;
  padding: 0;
}

.nav-list a {
  color: var(--blu-09);
  text-decoration: none;
}

.nav-list a:focus,
.nav-list a:hover {
  color: var(--blu-07); /* --clr-primary-080 */
  text-decoration: underline;
}

nav ul a {
  color: var(--blu-09); /* --clr-neutral-900*/
  text-decoration: none;
  padding: 0.125em 0.25em;
}

nav ul a:focus,
nav ul a:hover {
  color: var(--blu-07); /*--clr-primary-080*/
  text-decoration: none;
  background: var(--blu-02); /* #EAF9DB */
  padding: 0.125em 0.25em;
  border-radius: 6px;
}

/** Cwebba Top Nav */
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 1em);
  list-style: none;
}

nav ul li {
  text-decoration: none;
}

li ul, li ol {
  margin: 0;
}

nav ul a,
nav ul a {
  text-decoration: none;
}

/* dropdown */
nav ul li:nth-child(3) {
  position: relative;
  /* background-color:rgba(148, 25, 85, 0.4); */
}

nav ul ul {
  background: var(--red-02); /* #F9FBFA */
  /*  background: linear-gradient(180deg, rgba(253, 254, 251, 0.9) 0%, #f9fbfa 17%, #a9c6b8 100%);*/
  color: var(--blu-09); /* #fff*/
  display: none;
  margin: 0;
  padding: 0 0.5em;
  width: 5em;
  height: 3.375em;
  /* HERE this has an affect - 150% width */
  position: absolute;
  top: 1.5em;
  left: -1em;
  z-index: 2;
  border: solid 1px #EFEFEF;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

nav ul li:hover > ul {
  display: block;
}

.logo-box-head {
  width: 12em;
}

/* //////////////////////
  Footer
  /////////////////////// */
.site-footer {
  --logo-color: currentColor;
  padding: 2em 0;
  color: var(--red-12); /* var(--neutral-600) */
  background-color: var(--yel-02); /*--clr-primary-030*/
  /*        background-color: var(--shhh); --clr-primary-500*/
  background-image: url(/assets/images/retina-dust.png);
  text-align: center;
}

.logo-box-footer {
  max-width: 12em;
  margin: auto;
}

.copyright {
  font-size: 66%;
}

/* //////////////////////
Homepage
/////////////////////// */
.hero > div {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 3em;
}

.hero__image {
  width: 100%;
  /* max-height: max(15rem, 40vh); */
  object-fit: cover;
}

/* View Transition Styles 072323 */
/* These style seem to lessen the View Transition effect. Just the meta declaration seems to work better ? 072323 */
.hero {
  view-transition-name: hero;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*
@keyframes slide-to-left {
  from {
    transform: translateX(-4rem);
  }
  to {
    transform: translateX(0rem);
  }
}
*/
::view-transition-old(hero),
::view-transition-new(hero) {
  mix-blend-mode: normal;
}

::view-transition-old(img),
::view-transition-new(img) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: fade-out 450ms, cubic-bezier(0, 0, 0.2, 1), slide-to-right 450ms, cubic-bezier(0, 0, 0.2, 1);
}

::view-transition-new(root) {
  animation: fade-in 450ms, cubic-bezier(0, 0, 0.2, 1), slide-to-left 450ms, cubic-bezier(0, 0, 0.2, 1);
  mix-blend-mode: normal;
}

/* END View Transitions */
@media (min-width: 45em) {
  .hero > div {
    grid-auto-flow: column;
  }
}
.featured-articles {
  background-color: color-mix(in hsl shorter hue, var(--grn-03) 20%, var(--red-03));
  background-color: hsla(66, 50%, 60%, 0.125);
}

.articles__list {
  --flow-spacer: 3rem;
  margin: 6rem 0;
}

/* This does not appear to be in use 081323
.postgrid__list {
  --flow-spacer: 3rem;
  display:grid; 
  gap: 1rem;
  grid-template-columns:repeat(auto-fit, minmax(calc(33% - 3em), 1fr));    
}
*/
/* //////////////////////
Individual article page
/////////////////////// */
.main-article {
  margin-bottom: 3rem;
}

.main-article__figure figcaption {
  margin: 1rem 0;
  font-size: var(--fs-300);
  opacity: 0.9;
}

/* //////////////////////
  Article snippets
  /////////////////////// */
.snippet {
  display: grid;
  gap: 1em;
  grid-template-areas: "image" "title" "meta" "body" "button";
}

.snippet__image {
  grid-area: image;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.snippet__title {
  grid-area: title;
}

.snippet__meta {
  grid-area: meta;
  color: var(--red-10); /*--clr-neutral-300*/
}

.snippet__meta span {
  color: var(--red-10); /* --clr-neutral-900 */
}

.snippet .btn {
  grid-area: button;
}

.snippet__title {
  color: var(--red-09); /* --clr-primary-110 */
  font-size: var(--fs-500);
}

.snippet__title a {
  color: inherit;
  text-decoration: none;
}

.snippet__title a:hover,
.snippet__title a:focus {
  color: var(--red-05); /* --clr-primary-130 */
}

@media (min-width: 45em) {
  .snippet {
    grid-template-areas: "image title" "image meta" "image body" "image button";
    grid-column-gap: 3em;
    grid-template-columns: 40% 1fr;
    grid-template-rows: min-content min-content min-content 1fr;
  }
}
.postgrid__list {
  display: grid;
  gap: 3rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (width > 760px) {
  .postgrid__list {
    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 1.5em), 1fr));
  }
}
@media (width > 1220px) {
  .postgrid__list {
    grid-template-columns: repeat(auto-fit, minmax(calc(33% - 3em), 1fr));
  }
}
.postgrid__list li {
  display: flex;
  flex: 1 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  background: hsla(12, 30%, 96%, 0.4);
  /*flex-basis: 22em; */
  /* flex: 0 1 22em;  flex-shrink = 1 */
  /*flex-grow: 1; */
  padding: 0;
  border-radius: 9px;
  box-shadow: 3px 8px 42px 9px hsla(210, 40%, 50%, 0.3);
  box-shadow: 2px 6px 32px 3px hsla(240, 30%, 50%, 0.4);
}

.card__image {
  display: block;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  /*	background-size: cover; */
  object-fit: cover;
  aspect-ratio: 4/3;
}

.card h2 {
  color: hsl(0, 50%, 40%);
}

.card_content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1.375;
  padding: 0.5rem 1rem;
  flex-grow: 2;
  justify-items: stretch;
  margin-block: 1rem;
}

.snippet__body {
  flex-grow: 2;
}

.btn {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  padding: 0.5em 1.75em;
  border-radius: 0.375em;
  align-self: center;
  justify-self: start;
  margin-block: 1.5rem 1rem;
}

.btn:focus {
  outline: 0.125em solid var(--red-06); /* --clr-primary-160*/
  outline-offset: 0.25em;
}

.btn--primary {
  background: var(--red-09); /* --clr-primary-120 */
  color: var(--red-01); /* var(--red-09);  --clr-neutral-100*/
  font-weight: var(--fw-700);
  border: 2px solid var(--red-01);
} /*var(--clr-primary-110)*/
.btn--primary:hover,
.btn--primary:focus {
  color: var(--red-09); /*   --clr-neutral-100*/
  background: var(--red-05); /* --clr-primary-130 */
  border-color: var(--red-09); /* --clr-primary-090*/
}

/* this uses KP neutral vars. Transferring nuetrals to vars-colors.scss 081023*/
.btn--neutral {
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
  font-weight: var(--fw-700);
  border: 2px solid var(--clr-neutral-900);
}

.btn--neutral:hover,
.btn--neutral:focus {
  color: var(--clr-neutral-100);
  background-color: var(--clr-neutral-900);
}

/** * * * [ Custom Lihtbox Styles ] * * * * */
.lightbox {
  /* this is for JavaScript */
}

.slbImageWrap {
  font-size: 80%;
  line-height: 1.1;
}

article > a {
  /*  float: left;
    width: 33.3333%;  */
  padding: 1px;
  box-sizing: border-box;
  position: relative;
}

article > a:first-child {
  left: -1px;
}

article > a:last-child {
  right: -1px;
}

article > a > figure > img {
  display: block;
  width: 100%;
}

/*! #6 _lightbox.scss  */
/** Lightbox CSS */
.slbOverlay, .slbWrapOuter, .slbWrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slbOverlay {
  overflow: hidden;
  z-index: 2000;
  background-color: #564545;
  opacity: 0.8;
  -webkit-animation: slbOverlay 0.5s;
  -moz-animation: slbOverlay 0.5s;
  animation: slbOverlay 0.5s;
}

.slbWrapOuter {
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2010;
}

.slbWrap {
  position: absolute;
  text-align: center;
}

.slbWrap:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.slbContentOuter {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0px auto;
  padding: 0 1em;
  box-sizing: border-box;
  z-index: 2020;
  text-align: left;
  max-width: 100%;
}

.slbContentEl .slbContentOuter {
  padding: 5em 1em;
}

.slbContent {
  position: relative;
}

.slbContentEl .slbContent {
  -webkit-animation: slbEnter 0.3s;
  -moz-animation: slbEnter 0.3s;
  animation: slbEnter 0.3s;
  background-color: #fff;
  box-shadow: 0.2em 0.2em 1em 1.25em rgba(86, 69, 69, 0.8);
}

.slbImageWrap {
  -webkit-animation: slbEnter 0.3s;
  -moz-animation: slbEnter 0.3s;
  animation: slbEnter 0.3s;
  position: relative;
}

.slbImageWrap:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5em;
  bottom: 5em;
  display: block;
  z-index: -1;
  box-shadow: 0.1em 0.1em 1em 0.5em rgba(86, 69, 69, 0.8);
  background-color: #FFF;
}

.slbDirectionNext .slbImageWrap {
  -webkit-animation: slbEnterNext 0.4s;
  -moz-animation: slbEnterNext 0.4s;
  animation: slbEnterNext 0.4s;
}

.slbDirectionPrev .slbImageWrap {
  -webkit-animation: slbEnterPrev 0.4s;
  -moz-animation: slbEnterPrev 0.4s;
  animation: slbEnterPrev 0.4s;
}

.slbImage {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 5em 0;
  margin: 0 auto;
}

.slbCaption {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: wrap; /*normal*/
  font-size: 1.125em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25em;
  padding: 0.71429em 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-shadow: 2px 2px 4px 5px rgba(0, 0, 0, 0.9);
}

.slbCloseBtn, .slbArrow {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
}

.slbCloseBtn::-moz-focus-inner, .slbArrow::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.slbCloseBtn:hover, .slbArrow:hover {
  opacity: 0.5;
}

.slbCloseBtn:active, .slbArrow:active {
  opacity: 0.8;
}

.slbCloseBtn {
  -webkit-animation: slbEnter 0.3s;
  -moz-animation: slbEnter 0.3s;
  animation: slbEnter 0.3s;
  font-size: 3em;
  width: 1.66667em;
  height: 1.66667em;
  line-height: 1.66667em;
  position: absolute;
  right: -0.33333em;
  top: 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.slbLoading .slbCloseBtn {
  display: none;
}

.slbLoadingText {
  font-size: 1.4em;
  color: #fff;
  color: rgba(255, 255, 255, 0.9);
}

.slbArrows {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
}

.slbLoading .slbArrows {
  display: none;
}

.slbArrow {
  position: absolute;
  top: 50%;
  margin-top: -5em;
  width: 5em;
  height: 10em;
  opacity: 0.7;
  text-indent: -999em;
  overflow: hidden;
}

.slbArrow:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.8em 0 0 -0.8em;
  border: 0.8em solid transparent;
}

.slbArrow.next {
  right: 0;
}

.slbArrow.next:before {
  border-left-color: #fff;
}

.slbArrow.prev {
  left: 0;
}

.slbArrow.prev:before {
  border-right-color: #fff;
}

.slbIframeCont {
  width: 80em;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  margin: 5em 0;
}

.slbIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.6);
  background: #000;
}

@-webkit-keyframes slbOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@-moz-keyframes slbOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@keyframes slbOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}
@-webkit-keyframes slbEnter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -1em, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes slbEnter {
  from {
    opacity: 0;
    -moz-transform: translate3d(0, -1em, 0);
  }
  to {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
  }
}
@keyframes slbEnter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -1em, 0);
    -moz-transform: translate3d(0, -1em, 0);
    -ms-transform: translate3d(0, -1em, 0);
    -o-transform: translate3d(0, -1em, 0);
    transform: translate3d(0, -1em, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slbEnterNext {
  from {
    opacity: 0;
    -webkit-transform: translate3d(4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes slbEnterNext {
  from {
    opacity: 0;
    -moz-transform: translate3d(4em, 0, 0);
  }
  to {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
  }
}
@keyframes slbEnterNext {
  from {
    opacity: 0;
    -webkit-transform: translate3d(4em, 0, 0);
    -moz-transform: translate3d(4em, 0, 0);
    -ms-transform: translate3d(4em, 0, 0);
    -o-transform: translate3d(4em, 0, 0);
    transform: translate3d(4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slbEnterPrev {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes slbEnterPrev {
  from {
    opacity: 0;
    -moz-transform: translate3d(-4em, 0, 0);
  }
  to {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
  }
}
@keyframes slbEnterPrev {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-4em, 0, 0);
    -moz-transform: translate3d(-4em, 0, 0);
    -ms-transform: translate3d(-4em, 0, 0);
    -o-transform: translate3d(-4em, 0, 0);
    transform: translate3d(-4em, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*# sourceMappingURL=styles.css.map */