/* Note to User: This CSS file is compiled by SASS. It should not be edited directly.
If you are unfamiliar with SASS,you should take some time to understand its operation.
If you do not understand how this file works, you will find yourself frustrated and risk your code being overwritten. */
/*
A few resets
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
}

span.chicAF {
  font-weight: bold;
  letter-spacing: 2px !important;
  word-spacing: 2px;
}
span.chicAF i {
  letter-spacing: 5px;
}

/*
:::::::::: Set Base Font Size ::::::::
*/
/*
:::::::: Apply Base Font Size ::::::::
*/
body {
  font-size: 1em;
}

h1 {
  font-family: "Gilda Display", serif;
  color: #2d3748;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 300;
}

h2 {
  font-family: "Gilda Display", serif;
  color: #2d3748;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 300;
}

h3 {
  font-family: "Gilda Display", serif;
  color: #2d3748;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 300;
}

h4 {
  font-family: "Gilda Display", serif;
  color: #2d3748;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 300;
}

p {
  font-family: "Krub", sans-serif;
  color: #2d3748;
  padding: 0 !important;
  margin: 0 !important;
}

ul {
  font-family: "Krub", sans-serif;
  color: #2d3748;
  padding: 0 !important;
  margin: 0 !important;
}

label {
  font-family: "Krub", sans-serif;
  color: #2d3748;
}

figcaption {
  font-family: "Krub", sans-serif;
}

header {
  padding: 1em 1em 0 1em;
}
@media only screen and (min-width: 1200px) {
  header {
    padding: 2em 2em 0 2em !important;
  }
}
@media only screen and (min-width: 1400px) {
  header {
    padding: 3em 3em 0 3em !important;
  }
}
header img {
  width: 100%;
  display: block;
}
header #panel-3 a {
  text-decoration: none !important;
}

div#overlay i {
  font-size: 250% !important;
  color: #ffffff !important;
  background-color: #000e14 !important;
}

section.about h4 {
  font-weight: lighter !important;
  font-size: 150%;
  line-height: 1.5em;
  margin-left: -5px !important;
  color: #54545a;
}
@media only screen and (min-width: 1200px) {
  section.about h4 {
    font-size: 215%;
  }
}
section.about p {
  line-height: 2em !important;
  font-size: 90%;
  color: #54545a;
}
@media only screen and (min-width: 1200px) {
  section.about p {
    font-size: 100%;
  }
}
section.about img {
  width: 100%;
  display: block;
}
section.about div.copy {
  display: flex;
  justify-content: center;
  align-items: center;
}
section.about div.copy > div {
  padding: 10%;
}

section#about-1 {
  display: flex;
  flex-direction: column;
  margin: 1em 1em 0 1em;
  background-color: #f5f5f5;
}
@media only screen and (min-width: 1000px) {
  section#about-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  section#about-1 {
    margin: 2em 2em 0 2em !important;
  }
}
@media only screen and (min-width: 1400px) {
  section#about-1 {
    margin: 3em 3em 0 3em !important;
  }
}
section#about-1 a {
  font-weight: bold;
  color: #3f3f3e;
}

section#about-2 {
  display: flex;
  flex-direction: column-reverse !important;
  margin: 0 1em 1em 1em;
  background-color: #f5f5f5;
}
@media only screen and (min-width: 1000px) {
  section#about-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  section#about-2 {
    margin: 0 2em 2em 2em !important;
  }
}
@media only screen and (min-width: 1400px) {
  section#about-2 {
    margin: 0 3em 3em 3em !important;
  }
}

section#about-3 {
  margin-top: 1em;
  background-color: #1a202c;
  display: flex;
  flex-direction: column-reverse !important;
}
@media only screen and (min-width: 1200px) {
  section#about-3 {
    margin-top: 2em !important;
  }
}
@media only screen and (min-width: 1400px) {
  section#about-3 {
    margin-top: 3em !important;
  }
}
@media only screen and (min-width: 900px) {
  section#about-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
section#about-3 h4, section#about-3 p {
  color: #ffffff !important;
}
section#about-3 a {
  color: #ffffff;
  font-weight: bold !important;
}

section#locations {
  padding: 2em 0;
}
section#locations h2 {
  text-align: center;
  margin-bottom: 40px !important;
  font-size: 190% !important;
  padding: 0 15px;
}
@media only screen and (min-width: 750px) {
  section#locations h2 {
    font-size: 220% !important;
  }
}
@media only screen and (min-width: 1000px) {
  section#locations h2 {
    font-size: 250% !important;
  }
}
@media only screen and (min-width: 1600px) {
  section#locations h2 {
    font-size: 300% !important;
  }
}
section#locations ul {
  list-style-type: none;
  text-align: center;
}
section#locations ul a {
  font-weight: bold;
  color: #3f3f3e;
}
section#locations ul li {
  margin-bottom: 8px;
}
section#locations ul li:last-child {
  margin-bottom: 0 !important;
}
section#locations li.h4 {
  font-weight: bold;
  font-size: 110%;
  text-transform: uppercase;
}
section#locations .wrap {
  display: grid;
  gap: 40px;
  width: 98%;
  max-width: 1700px;
  margin: auto;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 900px) {
  section#locations .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
section#locations .wrap > div {
  margin: auto;
  width: 100%;
}
section#locations .wrap figure, section#locations .wrap iframe {
  width: 100%;
}
section#locations .wrap figcaption {
  padding: 20px;
  background-color: #1a202c;
}
section#locations .wrap figcaption ul {
  color: #ffffff !important;
}
section#locations .wrap figcaption a {
  color: #ffffff !important;
  text-decoration: none;
}
section#locations .wrap figcaption a:hover {
  text-decoration: underline;
}

section#bracelets h2, section#earrings h2 {
  text-transform: uppercase;
  font-weight: lighter;
  text-align: center;
  letter-spacing: 12px;
  text-indent: 12px;
  font-size: 250%;
  color: #54545a !important;
}
@media only screen and (min-width: 600px) {
  section#bracelets h2, section#earrings h2 {
    font-size: 300%;
  }
}
@media only screen and (min-width: 1400px) {
  section#bracelets, section#earrings {
    /*
    h2 {
      letter-spacing: 12px;
      text-indent: 0;
      transform-origin: left top;
      rotate: 90deg;
      position: absolute;
      left: 10%;
      padding-bottom: 0 !important;
    }
    */
  }
}

section.productGrid {
  padding: 4em 0 0 0;
  position: relative;
}
section.productGrid div.theGrid {
  display: grid;
  gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(2, 1fr);
  width: 100% !important;
  max-width: 1200px;
  margin: auto;
}
@media only screen and (min-width: 500px) {
  section.productGrid div.theGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 900px) {
  section.productGrid div.theGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  section.productGrid div.theGrid {
    grid-template-columns: repeat(5, 1fr);
  }
}
section.productGrid div.theGrid figure :hover {
  cursor: pointer;
}
section.productGrid div.theGrid figure img {
  display: block;
  width: 100%;
}

section#about-mobile {
  padding: 1em;
}
@media only screen and (min-width: 850px) {
  section#about-mobile {
    display: none;
  }
}
section#about-mobile img {
  margin: 0 auto 30px auto;
  display: block;
}
section#about-mobile h3 {
  text-transform: uppercase;
  text-align: center;
  font-size: 150%;
  letter-spacing: 8px;
  color: #1a202c;
  margin-bottom: 20px !important;
}
section#about-mobile p {
  line-height: 2em !important;
  font-size: 95% !important;
}

section#about {
  display: none;
  padding: 4em 1em 4em 1em;
  grid-template-columns: 60% 30% 10%;
  grid-template-rows: 50px auto 50px;
  width: 100%;
  max-width: 1400px;
  margin: auto;
}
@media only screen and (min-width: 850px) {
  section#about {
    display: grid;
  }
}
section#about img {
  box-shadow: 0 10px 24px 2px rgba(29, 17, 51, 0.35);
}
section#about img.mobile {
  display: none !important;
}
section#about .bg {
  z-index: 10;
  grid-row: 1/4;
}
section#about .first {
  background-color: #fff;
  grid-column: 1/2;
}
section#about .second {
  background-image: url("images/bloom.jpg");
  background-color: #1a202c;
  grid-column: 2/3;
}
section#about .third {
  background-color: #1a202c;
  grid-column: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section#about .third h2 {
  letter-spacing: 12px;
  font-size: 220%;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: lighter;
  transform: rotate(90deg);
}
@media only screen and (min-width: 1200px) {
  section#about .third h2 {
    font-size: 270%;
  }
}
section#about .overlay {
  grid-column: 1/4;
  grid-row: 2/3;
  z-index: 20;
  display: flex;
}
section#about .overlay h3 {
  margin-bottom: 20px !important;
  font-family: "Gilda Display", serif;
  text-transform: uppercase;
  font-size: 250%;
  letter-spacing: 8px;
}
section#about .overlay p {
  margin-bottom: 20px !important;
  line-height: 1.75em !important;
  font-size: 95% !important;
}
@media only screen and (min-width: 1400px) {
  section#about .overlay p {
    font-size: 100% !important;
  }
}
section#about .overlay img {
  width: 100%;
  display: block;
}
section#about .overlay > div:first-child {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
section#about .overlay > div:first-child > div {
  padding: 40px 40px 40px 0;
}
section#about .overlay > div:last-child {
  flex-basis: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#more {
  padding: 1em;
  background-color: #ffffff;
}
section#more a {
  text-decoration: none;
  color: #cfcfcf;
}
section#more a:hover {
  text-decoration: underline;
}
section#more p {
  letter-spacing: 4px;
  font-size: 100%;
  font-weight: bold;
}
section#more h3 {
  text-transform: uppercase;
  font-size: 150%;
  letter-spacing: 8px;
  text-indent: 8px;
  margin-bottom: 15px !important;
}
section#more div.wrap {
  width: 100%;
  display: grid;
}
@media screen and (max-width: 650px) {
  section#more div.wrap {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  section#more div.wrap #AFCopy, section#more div.wrap #FWCopy {
    background-color: rgba(26, 32, 44, 0.75);
  }
  section#more div.wrap #AFCopy, section#more div.wrap #AFImage {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section#more div.wrap #FWCopy, section#more div.wrap #FWImage {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
@media screen and (min-width: 650px) and (max-width: 1250px) {
  section#more div.wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "AFImagea AFCopya" "FWCopya FWImagea";
  }
}
@media screen and (min-width: 1250px) {
  section#more div.wrap {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "AFImagea AFCopya FWImagea FWCopya";
  }
}
section#more div#AFImage, section#more div#FWImage {
  background-color: #2d3748;
  min-height: 300px;
}
section#more div#AFImage img, section#more div#FWImage img {
  width: 100%;
  display: block;
}
section#more div#AFCopy, section#more div#FWCopy {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a202c;
}
section#more div#AFCopy h3, section#more div#FWCopy h3 {
  color: #ffffff !important;
}
section#more div#AFImage {
  grid-area: AFImagea;
}
section#more div#AFCopy {
  grid-area: AFCopya;
}
section#more div#FWCopy {
  grid-area: FWCopya;
}
section#more div#FWImage {
  grid-area: FWImagea;
}

section#contact {
  padding: 2em 0;
}
section#contact a {
  color: #1a202c;
}
section#contact h2 {
  text-align: center;
  font-size: 250%;
  text-transform: uppercase;
  margin-bottom: 20px !important;
  letter-spacing: 8px;
  text-indent: 8px;
}
section#contact p {
  margin-bottom: 30px !important;
  font-size: 100% !important;
  line-height: 1.5em !important;
  color: #2d3748;
}
section#contact ul {
  list-style-position: inside;
}
section#contact li {
  margin-bottom: 10px;
}
section#contact div.wrap {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  max-width: 1400px;
  margin: auto;
}
@media only screen and (min-width: 1000px) {
  section#contact div.wrap {
    flex-direction: row;
  }
}
section#contact div.wrap > div {
  flex-basis: 50%;
  padding: 40px;
}

div.logoDark {
  width: 250px;
  height: 250px;
  background-color: #1a202c;
  box-sizing: border-box;
  padding: 8px;
  letter-spacing: 0;
  box-shadow: 0 0 15px 8px rgba(255, 255, 255, 0.4);
}
@media only screen and (min-width: 700px) {
  div.logoDark {
    width: 300px;
    height: 300px;
  }
}
div.logoDark > div {
  border: 1px solid #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
div.logoDark h1 {
  color: #ffffff !important;
  font-size: 420%;
  letter-spacing: 12px;
  text-indent: 12px;
  font-weight: lighter;
}
@media only screen and (min-width: 700px) {
  div.logoDark h1 {
    letter-spacing: 21px;
    text-indent: 21px;
  }
}
div.logoDark p {
  color: #ffffff !important;
  font-size: 180%;
  letter-spacing: 14px;
  text-indent: 14px;
  text-transform: uppercase;
}
@media only screen and (min-width: 700px) {
  div.logoDark p {
    letter-spacing: 25px;
    text-indent: 25px;
  }
}

div.logoLight {
  width: 300px;
  height: 300px;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 8px;
  letter-spacing: 0;
}
div.logoLight > div {
  border: 1px solid #1a202c;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
div.logoLight h1 {
  color: #1a202c !important;
  font-size: 420%;
  letter-spacing: 21px;
  text-indent: 21px;
  font-weight: lighter;
}
div.logoLight p {
  color: #1a202c !important;
  font-size: 180%;
  letter-spacing: 25px;
  text-indent: 25px;
  text-transform: uppercase;
}

/*
Overlays
 */
div#overlay {
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  z-index: 1000;
  height: 100% !important;
  width: 100% !important;
  margin: 0;
  top: 0;
  left: 0;
  display: none;
  flex-direction: column;
}
div#overlay button.close {
  width: 50px;
  background-color: transparent;
  border: none;
}

div.productDetail {
  display: none;
  flex-direction: column;
  width: 80%;
  margin: auto;
  max-width: 700px;
}
div.productDetail h1 {
  color: #ffffff !important;
  text-align: center;
  font-family: "Krub", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: lighter !important;
  font-size: 120% !important;
}
div.productDetail div.theDetails {
  padding-top: 15px;
}
div.productDetail img {
  width: 100%;
  display: block;
}

/*
Coming Soon Styles
 */
main#comingSoon {
  background-image: url("images/ComingSoonBg.jpeg");
  background-size: cover;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}
main#comingSoon div.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
main#comingSoon h3 {
  color: #ffffff !important;
  text-transform: uppercase;
  font-family: "Krub", sans-serif;
  margin-top: 20px !important;
  text-align: center;
  letter-spacing: 8px;
  text-indent: 8px;
}
main#comingSoon a {
  color: #ffffff;
  text-decoration: none;
}
main#comingSoon a:hover {
  text-decoration: underline;
}

footer {
  padding: 2em 2em;
  overflow: hidden;
  background-color: #f5f5f5;
}
footer div.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 2em;
}
@media only screen and (min-width: 900px) {
  footer div.wrap {
    flex-direction: row;
  }
}
footer div#contact {
  flex-basis: 50%;
  flex-shrink: 1;
  flex-grow: 1;
  order: 1;
  padding-right: 20px;
}
@media only screen and (min-width: 1200px) {
  footer div#contact {
    flex-basis: 35%;
    padding-right: 0;
  }
}
footer div#contact a {
  color: #1a202c;
  text-decoration: none;
}
footer div#contact a:hover {
  text-decoration: underline;
}
footer div#contact h3 {
  font-size: 200%;
  margin-bottom: 15px !important;
}
footer div#contact p {
  margin-bottom: 15px !important;
}
footer div#contact ul {
  list-style-position: inside;
  margin-bottom: 15px !important;
}
footer div#contact ul li {
  margin-bottom: 8px;
}
footer div#contact ul li:last-child {
  margin-bottom: 0;
}
footer div#branding {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em 0 0 0;
  order: 3;
}
footer div#branding a {
  text-decoration: none !important;
}
@media only screen and (min-width: 1200px) {
  footer div#branding {
    flex-basis: 30%;
    order: 2;
    padding: 0 !important;
  }
}
footer div#newsletter {
  flex-basis: 50%;
  flex-shrink: 1;
  flex-grow: 1;
  order: 2;
}
@media only screen and (min-width: 1200px) {
  footer div#newsletter {
    flex-basis: 35%;
    order: 3;
  }
}
footer div#newsletter h3 {
  font-size: 200%;
  margin-bottom: 15px !important;
}
footer div#newsletter p {
  font-size: 100%;
  margin-bottom: 20px !important;
}
footer section#copyright {
  text-align: center;
  padding: 1.5em 0;
  margin-top: 1.5em;
}
footer section#copyright p {
  color: #1a202c;
}

footer form#newsletterSignUp {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  font-size: 90%;
}
footer form#newsletterSignUp div.formGroup {
  width: 100%;
  margin-bottom: 20px;
}
footer form#newsletterSignUp div#robotCheck input[type=checkbox] {
  margin-right: 5px;
}
footer form#newsletterSignUp div#robotCheck label {
  font-size: 100% !important;
  font-weight: bold;
  font-family: "Krub", sans-serif;
}
footer form#newsletterSignUp input[type=text], footer form#newsletterSignUp input[type=email], footer form#newsletterSignUp textarea {
  padding: 0.8em;
  border: 1px solid #cccccc;
  width: 100%;
  font-size: 90% !important;
  border-radius: 2px;
}
footer form#newsletterSignUp input[type=submit]:hover {
  cursor: pointer;
}
footer form#newsletterSignUp input[type=submit] {
  width: 100%;
  text-transform: uppercase;
  padding: 10px;
  letter-spacing: 7px;
  text-indent: 7px;
  font-size: 100%;
  border-radius: 2px;
  border: none !important;
  color: #ffffff;
  background-color: #1a202c;
}

form#standardContact div.formGroup {
  width: 100%;
  margin-bottom: 20px;
}
form#standardContact label {
  width: 100%;
  margin-bottom: 5px !important;
  font-size: 100% !important;
  font-weight: bold;
  display: block;
}
form#standardContact div#robotCheck {
  font-size: 100% !important;
  font-weight: bold;
  font-family: "Krub", sans-serif;
  display: flex;
}
form#standardContact textarea {
  padding: 0.5em;
  border: 1px solid #cccccc;
  width: 100%;
  font-size: 110% !important;
  border-radius: 2px;
  height: 225px;
}
form#standardContact input[type=text], form#standardContact input[type=email] {
  padding: 0.5em;
  border: 1px solid #cccccc;
  width: 100%;
  font-size: 105% !important;
  border-radius: 2px;
}
form#standardContact input[type=submit]:hover {
  cursor: pointer;
}
form#standardContact input[type=submit] {
  width: 100%;
  text-transform: uppercase;
  padding: 10px;
  letter-spacing: 7px;
  text-indent: 7px;
  font-size: 100%;
  border-radius: 2px !important;
  border: none !important;
  color: #ffffff;
  background-color: #1a202c;
}

.veryRequired {
  display: none;
}

main#confirmation {
  background-image: url("images/confirmationBg.jpeg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 60vh;
  padding: 1em;
}
main#confirmation div.container {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2em;
  box-shadow: 0 10px 24px 2px rgba(29, 17, 51, 0.7);
  width: 100%;
  max-width: 500px !important;
}
main#confirmation .confirmationTitle {
  margin-bottom: 20px;
}
main#confirmation .confirmationTitle h1, main#confirmation .confirmationTitle h2 {
  text-align: center;
}
main#confirmation .confirmationTitle h1 {
  margin-bottom: 12px !important;
}
main#confirmation .confirmationTitle h2 {
  font-size: 110% !important;
  font-family: "Krub", sans-serif;
  font-weight: bold;
  background-color: #1e2824;
  color: #ffffff;
  padding: 12px !important;
}
main#confirmation .confirmationContent h6 {
  font-family: "Krub", sans-serif;
  font-size: 120%;
}
main#confirmation .confirmationContent p {
  font-size: 120%;
  text-align: center;
  margin-bottom: 20px !important;
}
main#confirmation .confirmationContent a {
  color: #2d3748;
}
main#confirmation .confirmationContent > div {
  margin-bottom: 20px;
}
main#confirmation div#confirm {
  text-align: center;
}
main#confirmation div#confirm a {
  color: #ffffff;
  text-decoration: none;
}
main#confirmation div#confirm a:hover {
  text-decoration: underline;
}
main#confirmation div#confirm p {
  background-color: #1e2824;
  padding: 10px !important;
}
main#confirmation div#edit {
  text-align: center;
}
main#confirmation div#edit a {
  color: #000e14;
  text-decoration: none;
}
main#confirmation div#edit a:hover {
  text-decoration: underline;
}
main#confirmation .review-actions {
  display: flex;
  flex-direction: column;
}
main#confirmation .review-actions a.btn-secondary {
  text-align: center;
  margin: auto;
  display: inline-block;
  width: 100%;
}
main#confirmation .review-actions button {
  width: 100%;
  text-transform: uppercase;
  padding: 10px;
  letter-spacing: 7px;
  text-indent: 7px;
  font-size: 80%;
  border-radius: 2px;
  border: none !important;
  color: #ffffff;
  background-color: #1a202c;
  margin-bottom: 20px;
}

/*
A Collection of Common Grids
 */
.gridLayout-1 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}
.gridLayout-1 div#panel-1 {
  grid-column: 1/3;
  grid-row: 1/2;
}
@media only screen and (min-width: 1200px) {
  .gridLayout-1 div#panel-1 {
    grid-column: 1/2;
    grid-row: 1/3;
  }
}
.gridLayout-1 div#panel-2 {
  grid-column: 1/3;
  grid-row: 2/3;
}
@media only screen and (min-width: 1200px) {
  .gridLayout-1 div#panel-2 {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
.gridLayout-1 div#panel-3 {
  grid-column: 1/3;
  grid-row: 1/3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gridLayout-2 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}
.gridLayout-2 div#overlay {
  grid-column: 1/13;
  grid-row: 1/13;
  padding: 50px;
  display: flex;
}
.gridLayout-2 div#overlay aside {
  flex-basis: 25%;
}
.gridLayout-2 div#overlay article {
  flex-basis: 75%;
}
.gridLayout-2 div#overlay aside {
  padding: 25px;
  background-color: #3e3c4a;
}
.gridLayout-2 div#overlay aside h2 {
  letter-spacing: 2px;
  color: #ffffff !important;
}
.gridLayout-2 div#overlay article {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 25px;
  background-color: #2a2a2a;
}
.gridLayout-2 div#overlay article h3 {
  letter-spacing: 2px;
  color: #ffffff;
}
.gridLayout-2 div#overlay article > div {
  flex-basis: 50%;
  padding: 10px;
}
.gridLayout-2 div#panel-1 {
  background-color: #7a7a7a;
  grid-column: 1/5;
  grid-row: 1/13;
}
.gridLayout-2 div#panel-2 {
  background-color: #616161;
  grid-column: 5/13;
  grid-row: 1/13;
}

.gridLayout-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-3 p {
  color: #ffffff !important;
}
.gridLayout-3 div#panel-1 {
  background-color: #7a7a7a;
  color: #ffffff !important;
  grid-column: 1/2;
  grid-row: 1/3;
}
.gridLayout-3 div#panel-2 {
  background-color: #3e3c4a;
  grid-column: 2/3;
  grid-row: 1/2;
}
.gridLayout-3 div#panel-3 {
  background-color: #2d3134;
  grid-column: 2/3;
  grid-row: 2/3;
}

.gridLayout-4 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 60% 40%;
}
.gridLayout-4 p {
  color: #ffffff;
}
.gridLayout-4 #panel-1 {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: #5f5f5f;
}
.gridLayout-4 #panel-2 {
  grid-column: 3/5;
  grid-row: 1/2;
  background-color: #3e3c4a;
}
.gridLayout-4 #panel-3 {
  grid-column: 5/7;
  grid-row: 1/2;
  background-color: #5f5f5f;
}
.gridLayout-4 #panel-4 {
  grid-column: 1/4;
  grid-row: 2/3;
  background-color: #3e3c4a;
}
.gridLayout-4 #panel-5 {
  grid-column: 4/7;
  grid-row: 2/3;
  background-color: #5f5f5f;
}

.gridLayout-5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 70% 30%;
}
.gridLayout-5 p {
  color: #ffffff;
}
.gridLayout-5 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #5f5f5f;
}
.gridLayout-5 #panel-2 {
  grid-column: 2/3;
  grid-row: 1/2;
  background-color: #2d3134;
}
.gridLayout-5 #panel-3 {
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: #3e3c4a;
}

.gridLayout-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.gridLayout-6 p {
  color: #ffffff;
}
.gridLayout-6 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/3;
  background-color: #b1b1b1;
}
.gridLayout-6 #panel-2 {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: #5f5f5f;
}
.gridLayout-6 #panel-3 {
  grid-column: 2/3;
  grid-row: 1/4;
  background-color: #3e3c4a;
}
.gridLayout-6 #panel-4 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #5f5f5f;
}
.gridLayout-6 #panel-5 {
  grid-column: 3/4;
  grid-row: 2/4;
  background-color: #b1b1b1;
}

.gridLayout-7 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-7 p {
  color: #ffffff;
}
.gridLayout-7 #panel-1 {
  grid-column: 1/7;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-7 #panel-2 {
  grid-column: 7/13;
  grid-row: 1/2;
  background-color: #2d3134;
}
.gridLayout-7 #panel-3 {
  grid-column: 1/4;
  grid-row: 2/3;
  background-color: #3e3c4a;
}
.gridLayout-7 #panel-4 {
  grid-column: 4/13;
  grid-row: 2/3;
  background-color: #5f5f5f;
}

.gridLayout-8 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}
.gridLayout-8 #panel-1 {
  grid-column: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-8 #panel-2 {
  grid-column: 2/4;
  background-color: #2d3134;
}

.gridLayout-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-9 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-9 #panel-2 {
  grid-column: 2/3;
  grid-row: 1/2;
  background-color: #2d3134;
}
.gridLayout-9 #panel-3 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #2d3134;
}
.gridLayout-9 #panel-4 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #2d3134;
}
.gridLayout-9 #panel-5 {
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #2d3134;
}
.gridLayout-9 #panel-6 {
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: #2d3134;
}

.gridLayout-10 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-10 #panel-1 {
  grid-column: 1/3;
  grid-row: 1/3;
  background-color: #b1b1b1;
}
.gridLayout-10 #panel-2 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #2d3134;
}
.gridLayout-10 #panel-3 {
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: #3e3c4a;
}

.gridLayout-11 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-11 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-11 #panel-2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #2d3134;
}
.gridLayout-11 #panel-3 {
  grid-column: 2/3;
  grid-row: 1/3;
  background-color: #3e3c4a;
}
.gridLayout-11 #panel-4 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #3e3c4a;
}
.gridLayout-11 #panel-5 {
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: #3e3c4a;
}

.gridLayout-12 {
  display: grid;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-12 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/3;
  background-color: #b1b1b1;
}
.gridLayout-12 #panel-2 {
  grid-column: 2/3;
  grid-row: 1/2;
  background-color: #2d3134;
}
.gridLayout-12 #panel-3 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #3e3c4a;
}
.gridLayout-12 #panel-4 {
  grid-column: 2/4;
  grid-row: 2/3;
  background-color: #3e3c4a;
}

.gridLayout-13 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-13 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/3;
  background-color: #b1b1b1;
}
.gridLayout-13 #panel-2 {
  grid-column: 2/4;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-13 #panel-3 {
  grid-column: 2/4;
  grid-row: 2/3;
  background-color: #b1b1b1;
}

.gridLayout-14 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-14 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-14 #panel-2 {
  grid-column: 2/3;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-14 #panel-3 {
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-14 #panel-4 {
  grid-column: 3/4;
  grid-row: 1/3;
  background-color: #b1b1b1;
}

.gridLayout-15 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-15 #panel-1 {
  grid-column: 1/4;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-15 #panel-2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-15 #panel-3 {
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-15 #panel-4 {
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: #b1b1b1;
}

.gridLayout-16 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-16 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-16 #panel-2 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-16 #panel-3 {
  grid-column: 2/4;
  grid-row: 1/3;
  background-color: #b1b1b1;
}

.gridLayout-17 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-17 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-17 #panel-2 {
  grid-column: 2/4;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-17 #panel-3 {
  grid-column: 1/4;
  grid-row: 2/3;
  background-color: #b1b1b1;
}

.gridLayout-18 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-18 #panel-1 {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-18 #panel-2 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-18 #panel-3 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-18 #panel-4 {
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-18 #panel-5 {
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: #b1b1b1;
}

.gridLayout-19 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-19 #panel-1 {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-19 #panel-2 {
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-19 #panel-3 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #b1b1b1;
}
.gridLayout-19 #panel-4 {
  grid-column: 2/4;
  grid-row: 2/3;
  background-color: #b1b1b1;
}

.gridLayout-20 {
  display: grid;
  gap: 5px;
  width: 900px;
  height: 450px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.gridLayout-20 #panel-1 {
  grid-column: 1/2;
  grid-row: 1/3;
  background-color: #b1b1b1;
}
.gridLayout-20 #panel-2 {
  grid-column: 2/3;
  grid-row: 1/2;
  background-color: #b1b1b1;
}
.gridLayout-20 #panel-3 {
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #b1b1b1;
}

/*
A Collection of Layered Elements
 */
.layeredElements-1 {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  color: #ffffff;
  max-width: 1000px;
}
.layeredElements-1 #background {
  z-index: 1;
  grid-column: 1/4;
  grid-row: 1/5;
}
.layeredElements-1 #background img {
  width: 100%;
  display: block;
}
.layeredElements-1 #caption {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  background-color: #2c2b37;
  grid-column: 1/3;
  grid-row: 4/5;
}
.layeredElements-1 #leadImage {
  z-index: 2;
  grid-column: 2/6;
  grid-row: 2/5;
}
.layeredElements-1 #leadImage img {
  width: 100%;
  display: block;
}
.layeredElements-1 #accent {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #04b8cc !important;
  grid-column: 6/7;
  grid-row: 4/5;
}

body.hidden-scroll {
  overflow: hidden;
}

.sl-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  display: none;
  z-index: 1035;
}

.sl-wrapper {
  z-index: 1040;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
}
.sl-wrapper * {
  box-sizing: border-box;
}
.sl-wrapper button {
  border: 0 none;
  background: transparent;
  font-size: 28px;
  padding: 0;
  cursor: pointer;
}
.sl-wrapper button:hover {
  opacity: 0.7;
}
.sl-wrapper .sl-close {
  display: none;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 10060;
  margin-top: -14px;
  margin-right: -14px;
  height: 44px;
  width: 44px;
  line-height: 44px;
  font-family: "Krub" !important;
  color: #fff;
  font-size: 3rem;
}
.sl-wrapper .sl-counter {
  display: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 1060;
  color: #fff;
  font-size: 1rem;
}
.sl-wrapper .sl-navigation {
  width: 100%;
  display: none;
}
.sl-wrapper .sl-navigation button {
  position: fixed;
  top: 50%;
  margin-top: -22px;
  height: 44px;
  width: 22px;
  line-height: 44px;
  text-align: center;
  display: block;
  z-index: 10060;
  font-family: "Krub" !important;
  color: #fff;
}
.sl-wrapper .sl-navigation button.sl-next {
  right: 5px;
  font-size: 2rem;
}
.sl-wrapper .sl-navigation button.sl-prev {
  left: 5px;
  font-size: 2rem;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 10px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 10px;
    font-size: 3rem;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-navigation button {
    width: 44px;
  }
  .sl-wrapper .sl-navigation button.sl-next {
    right: 20px;
    font-size: 3rem;
  }
  .sl-wrapper .sl-navigation button.sl-prev {
    left: 20px;
    font-size: 3rem;
  }
}
.sl-wrapper.sl-dir-rtl .sl-navigation {
  direction: ltr;
}
.sl-wrapper .sl-image {
  position: fixed;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 10000;
}
.sl-wrapper .sl-image img {
  margin: 0;
  padding: 0;
  display: block;
  border: 0 none;
  width: 100%;
  height: auto;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image img {
    border: 0 none;
  }
}
.sl-wrapper .sl-image iframe {
  background: #000;
  border: 0 none;
}
@media (min-width: 35.5em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
@media (min-width: 50em) {
  .sl-wrapper .sl-image iframe {
    border: 0 none;
  }
}
.sl-wrapper .sl-image .sl-caption {
  display: none;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1.25rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Krub";
}
.sl-wrapper .sl-image .sl-caption.pos-top {
  bottom: auto;
  top: 0;
}
.sl-wrapper .sl-image .sl-caption.pos-outside {
  bottom: auto;
}
.sl-wrapper .sl-image .sl-download {
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #fff;
  z-index: 1060;
}

.sl-spinner {
  display: none;
  border: 5px solid #333;
  border-radius: 40px;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -20px;
  opacity: 0;
  position: fixed;
  top: 50%;
  width: 40px;
  z-index: 1007;
  -webkit-animation: pulsate 1s ease-out infinite;
  -moz-animation: pulsate 1s ease-out infinite;
  -ms-animation: pulsate 1s ease-out infinite;
  -o-animation: pulsate 1s ease-out infinite;
  animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.sl-transition {
  transition: -moz-transform ease 200ms;
  transition: -ms-transform ease 200ms;
  transition: -o-transform ease 200ms;
  transition: -webkit-transform ease 200ms;
  transition: transform ease 200ms;
}

@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-o-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@-ms-keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/*# sourceMappingURL=stylesBrochure-6-19-22.css.map */