.main {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease
}

.main.elem-opened {
  opacity: 1
}

.main.elem-closed {
  opacity: 0
}

.main * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.elem-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important
}

.elem-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em
}

.elem-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease
}

.elem-loading .elem-loader {
  opacity: 1
}

.elem-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important
}

.elem-content {
  z-index: 9993;
  width: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .3s ease;
  -o-transition: -o-transform .3s ease;
  transition: transform .3s ease
}

.elem-loading .elem-content,
.elem-closed .elem-content {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8)
}

.elem-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6)
}

.elem-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none
}

.elem-close::-moz-focus-inner {
  border: 0;
  padding: 0
}

.elem-close:hover,
.elem-close:focus,
.elem-close:active,
.elem-close:visited {
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none
}

.elem-close:active {
  top: 1px
}

.elem-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0
}

.elem-iframe .elem-container {
  width: 100%;
  max-width: 964px
}

.elem-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch
}

.elem-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000
}

.elem-hide {
  display: none
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  font: 62.5%/2 Georgia, serif;
  color: #fff;
}

body {
  background-image: url("../img/bg.jpg");
  background-repeat: repeat;
}

.a11y {
  position: absolute;
  left: -9999px;
  overflow: hidden
}

a {
  color: #b6a96d;
  text-decoration: none;
  outline: none
}

a:hover {
  color: #fff
}

i,
em,
q,
blockquote {
  font-style: italic
}

q:before,
q:after {
  content: ""
}

.pipe {
  padding: 0 .5rem;
  opacity: 0.5;
  color: #fff
}

img {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0
}

abbr {
  letter-spacing: 0.025rem;
  font-size: .875rem;
  font-weight: 400;
  vertical-align: middle
}

figure {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 15px -5px 0 0 #000, 15px -5px 0 1px #3c392a, -15px 5px 0 0 #000, -15px 5px 0 1px #3c392a;
  -moz-box-shadow: 15px -5px 0 0 #000, 15px -5px 0 1px #3c392a, -15px 5px 0 0 #000, -15px 5px 0 1px #3c392a;
  -ms-box-shadow: 15px -5px 0 0 #000, 15px -5px 0 1px #3c392a, -15px 5px 0 0 #000, -15px 5px 0 1px #3c392a;
  box-shadow: 15px -5px 0 0 #000, 15px -5px 0 1px #3c392a, -15px 5px 0 0 #000, -15px 5px 0 1px #3c392a
}

a img,
fieldset {
  border: 0
}

.input-image {
  outline: none
}

.grid {
  width: 80%;
  margin: 0 auto;
  padding: 3rem 0
}

.grid:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  visibility: hidden
}

.header .grid {
  width: 100%
}

.header {
  /* background-color: #161616; */
  border-bottom: 1px solid #3d3a2c
}

#logo a {
  color: #b6a96d;
  display: block;
  width: 320px;
  margin: 0 auto;
  text-align: center;
  height: auto
}

#logo a:hover {
  color: #d7c885;
  text-decoration: none
}

#tagline {
  display: block;
  font-size: 1rem;
  margin-top: .4rem;
  text-transform: uppercase
}

#lang-nav ul {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center
}

#lang-nav a {
  font-size: 1.4rem;
  padding: 2rem 2rem 0;
  display: block;
  color: #aba174;
  text-transform: uppercase;
  text-decoration: none
}

#lang-nav a:hover {
  color: #fff
}

#lang-nav .current a {
  color: #d7c885;
  text-decoration: underline
}

.footer {
  width: 100%
}

.footer strong {
  font-weight: normal;
  font-style: italic;
  color: #aba174
}

.footer .copyright {
  font-size: 1.1rem;
  text-align: center;
  padding-bottom: 3rem;
  color: #eee
}

.footer a {
  color: #eee;
  text-decoration: none;
  border-bottom: 1px solid #999
}

.footer a:hover {
  border-bottom: 0
}

.fb-like {
  display: block !important;
  width: 130px;
  margin: 0 auto 3.6rem
}

#siteby {
  width: 100%;
  padding-bottom: 6.6rem;
  text-align: center
}

#siteby a {
  opacity: .5;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/i/creativenights.png) no-repeat 50% 50%;
  border: 0
}

#siteby a:hover {
  opacity: 1
}

.nav {
  background: #161616
}

.nav ul {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.nav li {
  -webkit-flex: 1 0 220px;
  -moz-flex: 1 0 220px;
  -ms-flex: 1 0 220px;
  flex: 1 0 220px
}

.nav li a {
  display: block;
  color: #b6a96d;
  height: 54px;
  line-height: 54px;
  font-size: 1.4rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px dotted #3d3a2c
}

.nav li a:hover {
  color: #fff;
  text-decoration: none
}

.nav li.current a {
  color: #d7c885;
  /* font-weight: bold */
}

@media screen and (min-width: 540px) {
  .nav li {
    -webkit-flex: 1 0 50%;
    -moz-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%
  }
}

@media screen and (min-width: 640px) {
  .nav li {
    -webkit-flex: 1 0 25%;
    -moz-flex: 1 0 25%;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%
  }
}

@media screen and (min-width: 815px) {
  .grid {
    width: 90%;
    padding: 6rem 0
  }

  .header .grid {
    width: 94%;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important
  }

  #logo {
    margin-right: auto
  }

  #logo a {
    margin: 0;
    text-align: left;
    width: 370px;
    vertical-align: top
  }

  #tagline {
    letter-spacing: 1px
  }

  #lang-nav a {
    padding: 0 0 0 2rem
  }

  .footer .copyright {
    font-size: 1.4rem
  }

  .nav li {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
  }

  .nav li a {
    display: block;
    height: 72px;
    line-height: 72px;
    border-bottom: none;
    color: #aba174
  }

  .nav li.current {
    background-image: -webkit-radial-gradient(50% 45% at center bottom, #2d2d2d, #161616);
    background-image: -moz-radial-gradient(50% 45% at center bottom, #2d2d2d, #161616);
    background-image: -ms-radial-gradient(50% 45% at center bottom, #2d2d2d, #161616);
    background-image: radial-gradient(50% 45% at center bottom, #2d2d2d, #161616)
  }

  .nav li.current a {
    background: url(./files/nav-current-border.png) no-repeat 50% 100%
  }

  .nav li.current a:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
    border-top: solid 8px #2d2d2d;
    border-left: solid 8px transparent;
    border-right: solid 8px transparent
  }
}

@media screen and (min-width: 900px) {

  .grid,
  .nav ul {
    max-width: 94rem;
    margin: 0 auto
  }

  .footer .grid {
    padding: 0
  }
}

/* .content {
    background: #000
} */

.content h1,
.content h2 {
  font-weight: normal;
  font-style: italic;
  color: #b6a96d
}

.content h1 {
  font-size: 2.8rem
}

.content h2 {
  font-size: 2.4rem
}

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

.content p,
.content li,
.content li * {
  font-size: 1.5rem
}

.content p {
  margin: 0 0 2.4rem
}

.content ul {
  margin: 0 0 1.5rem
}

.columns {
  -webkit-columns: 240px 2;
  -moz-columns: 240px 2;
  -ms-columns: 240px 2;
  columns: 240px 2;
  -webkit-column-gap: 5rem;
  -moz-column-gap: 5rem;
  -ms-column-gap: 5rem;
  column-gap: 5rem;
  -webkit-break-inside: avoid;
  -moz-break-inside: avoid;
  -ms-break-inside: avoid;
  break-inside: avoid
}

.columns p {
  display: inline-block
}

#promo-area {
  clear: both;
  width: 100%;
  border-bottom: 1px solid #3d3a2c;
  background-image: -webkit-linear-gradient(top, #000 12%, #0a0a0a 44%, #141414 64%, #161616 100%);
  background-image: -moz-linear-gradient(top, #000 12%, #0a0a0a 44%, #141414 64%, #161616 100%);
  background-image: -ms-linear-gradient(top, #000 12%, #0a0a0a 44%, #141414 64%, #161616 100%);
  background-image: linear-gradient(top, #000 12%, #0a0a0a 44%, #141414 64%, #161616 100%)
}

#promo-area .inner {
  position: relative;
  clear: both;
  width: 100%;
  overflow: hidden;
  z-index: 500
}

#promo-area .inner:after {
  content: '';
  display: block;
  clear: both;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-image: -webkit-radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 80%);
  background-image: -moz-radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 80%);
  background-image: -ms-radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 80%);
  background-image: radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 80%)
}

#promo-area .grid {
  width: 98%;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 6rem 0 3rem
}

#promo-product {
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center
}

#promo-product img {
  display: block;
  border: 0;
  max-width: 380px;
  margin: 0 auto
}

#multimedia-and-quote {
  position: relative;
  width: 100%;
  height: 260px;
  display: block;
  z-index: 100
}

/* #multimedia-and-quote .btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -150px;
    width: 300px
} */

#homepage-quote h1 {
  font: italic normal 3.6rem/36px Georgia, serif;
  margin: 1.2rem 0 2.4rem;
  color: #aba174;
  text-align: center
}

#homepage-quote #quotes {
  overflow: hidden
}

#homepage-quote #quotes li {
  display: none;
  width: 80%;
  margin: 0 auto;
  font-style: italic;
  color: #eee;
  font-size: 1.2rem;
  text-align: center
}

#homepage-quote #quotes li.first-child {
  display: block
}

#highlights {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  z-index: 100
}

#highlights h3 {
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  color: #aba174;
  border-top: 1px solid #3C392B;
  padding-top: 2.4rem
}

#highlights ul {
  padding: 3rem 0;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between
}

#highlights li {
  font-size: 3.2rem;
  font-weight: normal;
  line-height: 1.25;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #202020;
  text-align: center;
  color: #aba174;
  padding: 2.4rem 0 0
}

#highlights li span {
  display: block;
  font-size: 1rem
}

@media screen and (min-width: 566px) {
  #homepage-quote #quotes li {
    width: 60%
  }
}

@media screen and (min-width: 700px) {
  #promo-area .grid {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
  }

  #promo-product {
    -webkit-flex: 1 0 360px;
    -moz-flex: 1 0 360px;
    -ms-flex: 1 0 360px;
    flex: 1 0 360px
  }

  #multimedia-and-quote {
    -webkit-flex: 1 0 300px;
    -moz-flex: 1 0 300px;
    -ms-flex: 1 0 300px;
    flex: 1 0 300px;
    height: auto;
    margin: 0 10px 0 20px
  }

  #highlights {
    -webkit-flex: 1 0 220px;
    -moz-flex: 1 0 220px;
    -ms-flex: 1 0 220px;
    flex: 1 0 220px
  }

  /* #multimedia-and-quote .btn {
        bottom: 70px;
        left: 0;
        margin-left: 0
    } */

  #homepage-quote h1 {
    text-align: left
  }

  #homepage-quote #quotes li {
    margin: 0;
    width: 280px;
    text-align: left
  }

  #promo-area .inner:after {
    width: 70%;
    height: 37%;
    background-image: -webkit-radial-gradient(ellipse farthest-corner at left bottom, #474747 0%, transparent 75%);
    background-image: -moz-radial-gradient(ellipse farthest-corner at left bottom, #474747 0%, transparent 75%);
    background-image: -ms-radial-gradient(ellipse farthest-corner at left bottom, #474747 0%, transparent 75%);
    background-image: radial-gradient(ellipse farthest-corner at left bottom, #474747 0%, transparent 75%)
  }
}

@media screen and (min-width: 930px) {
  #highlights ul {
    padding: 7.6rem 0 3.4rem
  }

  #highlights li {
    margin: 0
  }

  #promo-area .inner:after {
    top: -10%;
    left: -8%;
    width: 60%;
    height: 65%;
    background-image: -webkit-radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 60%);
    background-image: -moz-radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 60%);
    background-image: -ms-radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 60%);
    background-image: radial-gradient(ellipse farthest-corner at center bottom, #474747 0%, transparent 60%)
  }
}

@media screen and (min-width: 1200px) {
  #promo-area .inner:after {
    top: -30%;
    left: 0;
    height: 85%
  }
}

@media screen and (min-width: 1800px) {
  #promo-area .inner:after {
    left: 15%;
    width: 40%
  }
}

#contact-us {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

#contact-left {
  -webkit-flex: 1 0 300px;
  -moz-flex: 1 0 300px;
  -ms-flex: 1 0 300px;
  flex: 1 0 300px
}

#contact-right {
  -webkit-flex: 1 0 300px;
  -moz-flex: 1 0 300px;
  -ms-flex: 1 0 300px;
  flex: 1 0 300px
}

.award-image {
  width: 80%;
  margin: 36px auto
}

.award-image img {
  display: block
}

@media screen and (min-width: 650px) {
  #contact-right {
    padding: 0 50px
  }
}

.group-content {
  margin-bottom: 6rem
}

.group-content:last-child {
  margin-bottom: 0
}

.group-content ul {
  margin: 0 0 5.6rem
}

.group-content li {
  /* border-bottom: 1px solid #3c392a; */
  padding: .5rem 0
}

/* .group-content li:first-child {
    border-top: 1px solid #3c392a
} */

/* .group-content li span {
  float: right;
  text-transform: lowercase
} */

.group-content aside figure {
  /* max-width: 22rem; */
  margin: 0 auto
}

.group-content aside img {
  display: block;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s
}

.product-list,
.product-gallery {
  width: 100%;
  margin: 0 !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -ms-flex-pack: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around
}

.product-list li {
  text-align: center
}

.product-list li.primary {
  display: block;
  width: 100%
}

.product-list li.primary a {
  display: block;
  width: 100%;
  margin: 3rem 0
}

.product-list li.primary figure {
  width: 66.66666666%;
  margin: 0 auto;
  padding-top: 66.66666666%;
  position: relative
}

.product-list li.primary figure img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%
}

.product-list a,
.product-list a img,
.product-list .caption span {
  display: block;
  font-size: inherit
}

.product-list .caption {
  padding-top: 2rem
}

.product-list a {
  padding: 0 2rem 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease
}

.product-list a:hover figure,
.product-gallery a:hover figure {
  -webkit-box-shadow: 0 0 0 0 #000, 0 0 0 1px #d7c885, 0 0 0 0 #000, 0 0 0 1px #d7c885;
  -moz-box-shadow: 0 0 0 0 #000, 0 0 0 1px #d7c885, 0 0 0 0 #000, 0 0 0 1px #d7c885;
  -ms-box-shadow: 0 0 0 0 #000, 0 0 0 1px #d7c885, 0 0 0 0 #000, 0 0 0 1px #d7c885;
  box-shadow: 0 0 0 0 #000, 0 0 0 1px #d7c885, 0 0 0 0 #000, 0 0 0 1px #d7c885
}

.product-list .caption .product-name {
  font-style: italic;
  font-size: 2rem;
  line-height: 1.2
}

.other-products li {
  -webkit-flex: 0 0 200px;
  -moz-flex: 0 0 200px;
  -ms-flex: 0 0 200px;
  flex: 0 0 200px;
  margin: 4rem 0 0
}

.home-products li {
  -webkit-flex: 0 0 260px;
  -moz-flex: 0 0 260px;
  -ms-flex: 0 0 260px;
  flex: 0 0 260px;
  margin: 4rem 0 0
}

#product {
  margin-bottom: 5.6rem;
  padding: 3rem 0 0
}

#product h1 {
  font-size: 3.6rem;
  line-height: 1.2;
  margin-bottom: 1.2rem
}

#product h2 {
  font-size: 1.6rem;
  margin-bottom: .5rem
}

#product .group-content {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

#product .group-content section li {
  border-bottom: 1px solid #3c392a;
  padding: 0.5rem 1.5rem;
}

#product .group-content section li:first-child {
  border-top: 1px solid #3c392a
}


#product .group-content aside {
  margin-bottom: 5.6rem
}

#product .group-content aside img {
  padding: .25rem;
  border: 1px solid #3c392a
}

@media screen and (min-width: 540px) {
  #product {
    padding: 3rem 3rem 0
  }
}

@media screen and (min-width: 640px) {
  #product {
    padding: 3rem 8rem 0
  }
}

@media screen and (min-width: 768px) {
  #product {
    padding: 3rem 10rem 0
  }
}

@media screen and (min-width: 640px) {
  .group-content {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 6rem
  }

  .group-content section {
    -webkit-flex: 2 0 460px;
    -moz-flex: 2 0 460px;
    -ms-flex: 2 0 460px;
    flex: 2 0 460px
  }

  .group-content aside {
    -webkit-flex: 1 0 200px;
    -moz-flex: 1 0 200px;
    -ms-flex: 1 0 200px;
    flex: 1 0 200px
  }

  #product .group-content section {
    -webkit-flex: 1 0 300px;
    -moz-flex: 1 0 300px;
    -ms-flex: 1 0 300px;
    flex: 1 0 300px
  }

  #product .group-content aside {
    -webkit-flex: 2 0 300px;
    -moz-flex: 2 0 300px;
    -ms-flex: 2 0 300px;
    flex: 2 0 300px
  }
}

@media screen and (min-width: 815px) {
  #product {
    padding: 0
  }

  .group-content aside {
    /* padding: 5.6rem 0 0 18px; */
    margin: 0 4rem 0 0;
    -ms-flex-order: -1;
    -webkit-box-ordinal-group: -1;
    -moz-box-ordinal-group: -1;
    -ms-box-ordinal-group: -1;
    box-ordinal-group: -1;
    -webkit-order: -1;
    -moz-order: -1;
    -ms-order: -1;
    order: -1
  }

  #product .group-content aside {
    margin-top: 0;
    padding: 0
  }
}

#the-product {
  clear: both;
  position: relative;
  border: 1px solid #3c392a;
  margin: 0 auto 6rem auto
}

#the-product h2 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 278px;
  height: 164px;
  margin-left: -139px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(/i/whats-in-the-box-en.png) no-repeat 0 0
}

#the-product ul {
  margin: 164px 0 4rem
}

#the-product li {
  list-style: none;
  line-height: 24px;
  text-align: center
}

@media screen and (min-width: 815px) {
  #the-product {
    height: 170px;
    border: 0;
    background: #161616 url(/i/whats-in-the-box.jpg) no-repeat top right
  }

  #the-product h2 {
    width: 278px;
    top: 3px;
    left: 0;
    margin: 0
  }

  #the-product ul {
    margin: 2.2rem 0;
    padding-top: 2.6rem
  }

  #the-product li {
    margin-left: 320px;
    text-align: left
  }
}

@media screen and (min-width: 1020px) {
  #the-product {
    width: 940px
  }

  #the-product h2 {
    left: 3px
  }

  #the-product ul {
    margin: 0
  }
}

.btn,
.swal2-actions [type="button"] {
  color: #595336 !important;
  text-shadow: 0 1px 0 #e1d6a4;
  border: 1px solid #ba6 !important;
  border-radius: 5px !important;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-style: normal;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  /* background: transparent; */
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.3) !important;
  outline: none;
  backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(180deg, #fea 0%, #dc8 49%, #a95 51%, #dc8 100%) !important;
  ;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /* box-shadow: 15px -5px 0 0 #000, 15px -5px 0 1px #3c392a, -15px 5px 0 0 #000, -15px 5px 0 1px #3c392a; */
}

.btn:hover,
.swal2-actions [type="button"]:hover {
  box-shadow: inset 0px 1px 20px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.swal2-show {
  background: none !important;
}

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
  background: rgba(0, 0, 0, .9) !important;
}

.swal2-popup {
  width: auto !important;
}

.swal2-image {
  border-radius: 5px;
}

.swal2-actions [type="button"] {
  font-size: 1.4em !important;
}

/* CSS for the contact form */
#contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  /* background-color: #f5f5f5; */
  /* border: 1px solid #ccc; */
}

#contact-form div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
}

#contact-form label {
  width: 30%;
  /* font-weight: bold; */
  font-size: 1.5rem;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea {
  width: 65%;
  padding: 10px;
  border: 1px solid #d7c885;
  border-radius: 5px;
  font-size: 1.5rem;
  box-sizing: border-box;
}

#contact-form input[type="tel"] {
  width: 65%;
}

#contact-form textarea {
  height: 120px;
}

/* #contact-form small {
  font-size: 12px;
  color: #777;
} */

/* #contact-form input[type="submit"] {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#contact-form input[type="submit"]:hover {
  background-color: #338033;
} */