body {
  font-family: 'Playfair Display', serif;
  /*font-family: 'Playfair Display SC', serif;*/
}

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

body.mobile {
  -webkit-tap-highlight-color: transparent;
}

*, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input {
  font-size: 1vw;
  font-family: 'Playfair Display', serif;
  line-height: 120%;
}

.mobile *,
.mobile html,
.mobile body,
.mobile div,
.mobile span,
.mobile applet,
.mobile object,
.mobile iframe,
.mobile h1,
.mobile h2,
.mobile h3,
.mobile h4,
.mobile h5,
.mobile h6,
.mobile p,
.mobile blockquote,
.mobile pre,
.mobile a,
.mobile abbr,
.mobile acronym,
.mobile address,
.mobile big,
.mobile cite,
.mobile code,
.mobile del,
.mobile dfn,
.mobile em,
.mobile img,
.mobile ins,
.mobile kbd,
.mobile q,
.mobile s,
.mobile samp,
.mobile small,
.mobile strike,
.mobile strong,
.mobile sub,
.mobile sup,
.mobile tt,
.mobile var,
.mobile b,
.mobile u,
.mobile i,
.mobile center,
.mobile dl,
.mobile dt,
.mobile dd,
.mobile ol,
.mobile ul,
.mobile li,
.mobile fieldset,
.mobile form,
.mobile label,
.mobile legend,
.mobile table,
.mobile caption,
.mobile tbody,
.mobile tfoot,
.mobile thead,
.mobile tr,
.mobile th,
.mobile td,
.mobile article,
.mobile aside,
.mobile canvas,
.mobile details,
.mobile embed,
.mobile figure,
.mobile figcaption,
.mobile footer,
.mobile header,
.mobile hgroup,
.mobile menu,
.mobile nav,
.mobile output,
.mobile ruby,
.mobile section,
.mobile summary,
.mobile time,
.mobile mark,
.mobile audio,
.mobile video,
.mobile input {
  font-size: 5vw;
}

a, a:visited, a:focus, a:hover {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

input[type="text"] {
  background-color: transparent;
  border-width: 0px;
  outline: none;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  border-bottom-style: dotted;
}

/* the buy popup's Email field is type="email" (#68) and keeps the text inputs' look; the footer newsletter field is meant to stay boxed */
.buy-popup-container input[type="email"] {
  background-color: transparent;
  border-width: 0px;
  outline: none;
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  border-bottom-style: dotted;
}

::-webkit-input-placeholder {
  color: #444444;
}
:-moz-placeholder {
   color: #444444;
   opacity: 1;
}
::-moz-placeholder {
   color: #444444;
   opacity: 1;
}
:-ms-input-placeholder {
   color: #444444;
}

.no-cursor {
  cursor: initial;
}

/* HEADER */
#navbar {
  display: table;
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  color: rgb(255, 255, 255);
  z-index: 10;
  font-weight: 700;
  -webkit-transition: padding 0.6s;
  -moz-transition: padding 0.6s;
  -o-transition: padding 0.6s;
  -ms-transition: padding 0.6s;
  transition: padding 0.6s;
  /*-webkit-transform: translateZ(0);
  transform: translateZ(0);*/
}

.mobile #navbar {
  display: block;
}

#navbar div, #navbar li, #navbar a, #navbar .navbar-link {
  -webkit-transition: font-size 0.6s;
  -moz-transition: font-size 0.6s;
  -o-transition: font-size 0.6s;
  -ms-transition: font-size 0.6s;
  transition: font-size 0.6s;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever div,
#navbar.little-forever li,
#navbar.little-forever a,
#navbar.little-forever .navbar-link {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/* END disables/reduces animations to prevent bad presentation on change page */

.mobile #navbar > div {
  /*display: block;*/
}

#navbar .navbar-link {
  position: relative;
  text-transform: uppercase;
  z-index: 0;
  -webkit-transition: font-size 0.6s, box-shadow 0.2s;
  -moz-transition: font-size 0.6s, box-shadow 0.2s;
  -o-transition: font-size 0.6s, box-shadow 0.2s;
  -ms-transition: font-size 0.6s, box-shadow 0.2s;
  transition: font-size 0.6s, box-shadow 0.2s;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever .navbar-link {
  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  -o-transition: box-shadow 0.2s;
  -ms-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}
/* END disables/reduces animations to prevent bad presentation on change page */

#navbar .navbar-link:hover, #navbar .navbar-link.active {
  -webkit-box-shadow: 1px 1px rgb(205, 97, 74), 2px 2px rgb(205, 97, 74), 3px 3px rgb(205, 97, 74), 4px 4px rgb(205, 97, 74), 5px 5px rgb(205, 97, 74)/*, 6px 6px rgb(205, 97, 74), 7px 7px rgb(205, 97, 74), 8px 8px rgb(205, 97, 74)*/;
  box-shadow: 1px 1px rgb(205, 97, 74), 2px 2px rgb(205, 97, 74), 3px 3px rgb(205, 97, 74), 4px 4px rgb(205, 97, 74), 5px 5px rgb(205, 97, 74)/*, 6px 6px rgb(205, 97, 74), 7px 7px rgb(205, 97, 74), 8px 8px rgb(205, 97, 74)*/;
  -webkit-transition: font-size 0.6s, box-shadow 0.2s 0.1s;
  -moz-transition: font-size 0.6s, box-shadow 0.2s 0.1s;
  -o-transition: font-size 0.6s, box-shadow 0.2s 0.1s;
  -ms-transition: font-size 0.6s, box-shadow 0.2s 0.1s;
  transition: font-size 0.6s, box-shadow 0.2s 0.1s;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever .navbar-link:hover, #navbar.little-forever .navbar-link.active {
  -webkit-transition: box-shadow 0.2s 0.1s;
  -moz-transition: box-shadow 0.2s 0.1s;
  -o-transition: box-shadow 0.2s 0.1s;
  -ms-transition: box-shadow 0.2s 0.1s;
  transition: box-shadow 0.2s 0.1s;
}
/* END disables/reduces animations to prevent bad presentation on change page */

#navbar .navbar-link:after {
  content: '';
  background-color: rgb(205, 97, 74);
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0%;
  height: 100%;
  z-index: -1;
  -webkit-transition: width 0.2s 0.1s;
  -moz-transition: width 0.2s 0.1s;
  -o-transition: width 0.2s 0.1s;
  -ms-transition: width 0.2s 0.1s;
  transition: width 0.2s 0.1s;
}
#navbar .navbar-link:hover:after, #navbar .navbar-link.active:after {
  width: 100%;
  -webkit-transition: width 0.2s;
  -moz-transition: width 0.2s;
  -o-transition: width 0.2s;
  -ms-transition: width 0.2s;
  transition: width 0.2s;
}

.mobile #navbar .navbar-link:after {
  content: none;
}

#navbar.tall {
  padding: 1.5% 0%;
}

#navbar .navbar-link {
  vertical-align: top !important;
}

#navbar.tall div,
#navbar.tall li,
#navbar.tall a {
  font-size: 1.2vw;
  vertical-align: middle;
}



.mobile #navbar.tall div,
.mobile #navbar.tall li,
.mobile #navbar.tall a,
.mobile #navbar.tall .navbar-link {
  font-size: 2.1vw;
}

.mobile #navbar .logo-horizontal-container {
  display: inline-block;
  line-height: 0%;
  margin: 10% 5%;
}

#navbar.little, #navbar.little-forever {
  padding: calc(1/10 * 1%) 0%;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/* END disables/reduces animations to prevent bad presentation on change page */

.mobile #navbar.little,
.mobile #navbar.little-forever {
  padding: calc(1/5 * 1%) 0%;
}

.mobile #navbar.navbar-menu-open {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: scroll;
}

#navbar.little div,
#navbar.little li,
#navbar.little a,
#navbar.little-forever div,
#navbar.little-forever li,
#navbar.little-forever a {
  font-size: 1vw;
  vertical-align: middle;
}

.mobile #navbar.little div,
.mobile #navbar.little li,
.mobile #navbar.little a,
.mobile #navbar.little .navbar-link,
.mobile #navbar.little-forever div,
.mobile #navbar.little-forever li,
.mobile #navbar.little-forever a,
.mobile #navbar.little-forever .navbar-link {
  font-size: 5vw !important;
}

.mobile #navbar-links-social {
  display: none !important;
}

#navbar-page-title {
  display: none;
}

.mobile #navbar #navbar-page-title {
  display: block;
  position: absolute;
  left: 20%;
  width: 60%;
  margin-top: 1%;
  font-size: 4vw !important;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#navbar-menu {
  display: none;
}

.mobile #navbar-menu {
  display: block;
}

.mobile .navbar-menu-image {
  width: 10%;
  margin-right: 5%;
  transform: rotate(0deg);
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.4s;
}

.mobile #navbar.navbar-menu-open .navbar-menu-image {
  /*transform: rotate(45deg);*/
}

/*.hamburger {
  font: inherit;
  display: inline-block;
  overflow: visible;
  margin: 0;
  padding: 0px 15px;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .15s;
  transition-property: opacity,filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: transparent;
}
.hamburger-box {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before {
  background-color: #fff;
}
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s linear .13s;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
  position: absolute;
  width: 35px;
  height: 4px;
  transition-timing-function: ease;
  transition-duration: .15s;
  transition-property: transform;
  border-radius: 4px;
  background-color: #000;
}
.hamburger-inner {
  top: 50%;
  display: block;
  margin-top: -2px;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before {
  background-color: #fff;
}
.hamburger--spring .hamburger-inner:before {
  top: 10px;
  transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner:before {
  top: -10px;
}
.hamburger-inner:after, .hamburger-inner:before {
  display: block;
  content: "";
}
.hamburger--spring .hamburger-inner:after {
  top: 20px;
  transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner:after {
  bottom: -10px;
}
#navbar.navbar-menu-open .hamburger--spring .hamburger-inner {
  transition-delay: .22s;
  background-color: transparent;
}
#navbar.navbar-menu-open .hamburger--spring .hamburger-inner:before {
  top: 0;
  transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
  transform: translate3d(0,10px,0) rotate(45deg);
}
#navbar.navbar-menu-open .hamburger--spring .hamburger-inner:after {
  top: 0;
  transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
  transform: translate3d(0,10px,0) rotate(-45deg);
}*/
.hamburger {
  font: inherit;
  display: inline-block;
  overflow: visible;
  margin: 0;
  padding: 0px 15px;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .10s;
  transition-property: opacity,filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: transparent;
}
.hamburger-box {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before {
  background-color: #fff;
}
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s linear .08s;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
  position: absolute;
  width: 35px;
  height: 4px;
  transition-timing-function: ease;
  transition-duration: .10s;
  transition-property: transform;
  border-radius: 4px;
  background-color: #000;
}
.hamburger-inner {
  top: 50%;
  display: block;
  margin-top: -2px;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before {
  background-color: #fff;
}
.hamburger--spring .hamburger-inner:before {
  top: 10px;
  transition: top .06s cubic-bezier(.33333,.66667,.66667,1) .13s,transform .08s cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner:before {
  top: -10px;
}
.hamburger-inner:after, .hamburger-inner:before {
  display: block;
  content: "";
}
.hamburger--spring .hamburger-inner:after {
  top: 20px;
  transition: top .13s cubic-bezier(.33333,.66667,.66667,1) .13s,transform .08s cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner:after {
  bottom: -10px;
}
#navbar.navbar-menu-open .hamburger--spring .hamburger-inner {
  transition-delay: .14s;
  background-color: transparent;
}
#navbar.navbar-menu-open .hamburger--spring .hamburger-inner:before {
  top: 0;
  transition: top .06s cubic-bezier(.33333,0,.66667,.33333) .10s,transform .08s cubic-bezier(.215,.61,.355,1) .14s;
  transform: translate3d(0,10px,0) rotate(45deg);
}
#navbar.navbar-menu-open .hamburger--spring .hamburger-inner:after {
  top: 0;
  transition: top .13s cubic-bezier(.33333,0,.66667,.33333),transform .08s cubic-bezier(.215,.61,.355,1) .14s;
  transform: translate3d(0,10px,0) rotate(-45deg);
}

#navbar #navbar-links {
  margin-bottom: 4%;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.6s;
}

.mobile #navbar #navbar-links {
  display: none;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever #navbar-links {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/* END disables/reduces animations to prevent bad presentation on change page */

#navbar.little #navbar-links, #navbar.little-forever #navbar-links {
  margin-bottom: 0%;
}

.mobile #navbar.navbar-menu-open #navbar-links {
  display: block;
  position: absolute;
  left: 0%;
  width: 100%;
}

#navbar .social-icon {
  width: 14%;
  margin-left: 4%;
  vertical-align: middle;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.6s;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever .social-icon {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/* END disables/reduces animations to prevent bad presentation on change page */

#navbar.little .social-icon, #navbar.little-forever .social-icon {
  width: 12%;
}

#navbar .change-language {
  margin-left: 4%;
}

#navbar .change-language > span {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  border-color: #FFFFFF;
  border-width: 1px;
  border-style: solid;
}

#navbar .change-language > span:hover,
#navbar .change-language > span.active {
  background-color: rgb(205, 97, 74);
  border-color: rgb(205, 97, 74);
}

#navbar:after, #navbar:before {
  content: '';
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  z-index: -1;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  -ms-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever:after, #navbar.little-forever:before {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/* END disables/reduces animations to prevent bad presentation on change page */

#navbar:after {
  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

#navbar:before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
}

#navbar.tall:after {
  opacity: 1;
}

#navbar.little:after {
  opacity: 0;
}

#navbar.little-forever:after {
  opacity: 0 !important;
}

.mobile #navbar.little-forever:after {
  display: none;
}

#navbar.tall:before {
  opacity: 0;
}

#navbar.little:before {
  opacity: 1;
}

#navbar.little-forever:before {
  opacity: 1 !important;
}

.mobile #navbar.navbar-menu-open:before {
  display: none;
}

#navbar > div {
  display: table-cell;
  vertical-align: middle;
}

#navbar > div:first-child {
  text-align: left;
  width: 20%;
}

#navbar > div:nth-child(2) {
  text-align: right;
}

#navbar-links > li {
  display: inline-block;
  position: relative;
  margin: 0% 2%;
  text-align: left;
  cursor: pointer;
}

.mobile #navbar.navbar-menu-open #navbar-links > li {
  display: block;
  margin: 10% 0%;
  text-align: center;
}

.mobile #navbar.navbar-menu-open #navbar-links .navbar-link {
  font-size: 8vw !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#navbar-links-social {
  width: 20%;
}

#navbar-links-mysteries ul {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: -200%;
  top: -500%;
  padding-top: 50%;
  text-align: center;
  width: 500%;
  align-items: center;
  z-index: -1;
}

#navbar-links-mysteries.hover ul {
  top: 0%;
}

.mobile #navbar-links-mysteries ul {
  display: initial;
  flex-wrap: initial;
  position: relative;
  left: 0%;
  width: auto;
  padding-top: 0%;
}

#navbar-links-mysteries.hover ul > li {
  width: 46%;
  margin: 2%;
}

#navbar-links-mysteries.hover ul > li:last-child {
  width: 100%;
  margin: 0%;
}

.mobile #navbar-links-mysteries.hover ul > li,
.mobile #navbar-links-mysteries.hover ul > li:last-child {
  width: auto;
  margin: auto;
}

#navbar.tall #navbar-links-mysteries ul > li > div {
  font-size: 0.95vw;
}

#navbar-links-mysteries ul > li > div {
  margin: 2% 0%;
  margin-top: -40%;
  padding: 3% 5%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: margin-top 0.4s, opacity 0.2s !important;
  -moz-transition: margin-top 0.4s, opacity 0.2s !important;
  -o-transition: margin-top 0.4s, opacity 0.2s !important;
  -ms-transition: margin-top 0.4s, opacity 0.2s !important;
  transition: margin-top 0.4s, opacity 0.2s !important;
}

.mobile #navbar-links-mysteries ul > li > div {
  margin: 0%;
  margin-top: 0%;
  padding: 0% 5%;
  background-color: transparent;
}

.mobile #navbar-links-mysteries ul > li > div {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#navbar-links-mysteries.hover ul > li > div,
.mobile #navbar-links-mysteries ul > li > div {
  opacity: 1;
}

#navbar-links-mysteries.hover ul > li > div {
  margin-top: 3%;
}

.mobile #navbar-links-mysteries ul > li > div {
  margin-top: 6%;
}

#navbar-links-mysteries ul > li > div:hover, #navbar-links-mysteries ul > li > div.active {
  background-color: rgba(205, 97, 74, 0.7);
}

#navbar-links-mysteries.hover ul > li:nth-child(2) > div {
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#navbar-links-mysteries.hover ul > li:nth-child(3) > div {
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

#navbar-links-mysteries.hover ul > li:nth-child(4) > div {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#navbar-links-mysteries.hover ul > li:nth-child(5) > div {
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.mobile #navbar-links-mysteries.hover ul > li > div {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#navbar > #menu-button {
  display: none;
}

#navbar .logo-horizontal {
  width: 95%;
  margin-left: 15%;
  vertical-align: middle;
  cursor: pointer;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.6s;
}

.mobile.modal-open #navbar .logo-horizontal-container {
  display: none;
}

.mobile.modal-open #navbar.navbar-menu-open .logo-horizontal-container {
  display: block;
}

.mobile #navbar .arrow-back-container {
  display: none;
}

.mobile.modal-open #navbar .arrow-back-container {
  display: block;
}

.mobile.modal-open #navbar.navbar-menu-open .arrow-back-container {
  display: none;
}

.mobile #navbar .arrow-back {
  width: 50%;
  margin-left: 15%;
  margin-top: 10%;
  margin-bottom: 10%;
  vertical-align: middle;
  transform: rotateZ(-90deg);
}

/* Disables/reduces animations to prevent bad presentation on change page */
#navbar.little-forever .logo-horizontal {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/* END disables/reduces animations to prevent bad presentation on change page */

.mobile #navbar .logo-horizontal {
  width: 240%;
  margin-left: 0%;
  opacity: 1;
  -webkit-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  -moz-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  -o-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  -ms-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  transition: opacity 0.4s 0.4s, width 0s 0.4s;
}

#navbar.little .logo-horizontal,
#navbar.little-forever .logo-horizontal {
  width: 50%;
  margin-left: 14%;
}

.mobile #navbar.little .logo-horizontal,
.mobile #navbar.little-forever .logo-horizontal {
  width: 0%;
  opacity: 0;
  -webkit-transition: opacity 0.4s, width 0s 0.4s;
  -moz-transition: opacity 0.4s, width 0s 0.4s;
  -o-transition: opacity 0.4s, width 0s 0.4s;
  -ms-transition: opacity 0.4s, width 0s 0.4s;
  transition: opacity 0.4s, width 0s 0.4s;
}

.mobile #navbar .logo-icon {
  width: 0%;
  /*margin: 10% 5%;*/
  opacity: 0;
  -webkit-transition: opacity 0.4s, width 0s 0.4s;
  -moz-transition: opacity 0.4s, width 0s 0.4s;
  -o-transition: opacity 0.4s, width 0s 0.4s;
  -ms-transition: opacity 0.4s, width 0s 0.4s;
  transition: opacity 0.4s, width 0s 0.4s;
}

.mobile #navbar.little .logo-icon,
.mobile #navbar.little-forever .logo-icon {
  width: 70%;
  opacity: 1;
  -webkit-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  -moz-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  -o-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  -ms-transition: opacity 0.4s 0.4s, width 0s 0.4s;
  transition: opacity 0.4s 0.4s, width 0s 0.4s;
}
/* END HEADER */

/* HOME */
.main {
  width: 100%;
  height: 100%;
}

.mobile.modal-open .main {
  height: auto;
}

/*#landpage {
  position: fixed;
  left: 0%;
  top: -5%;
  width: 100%;
  height: 110%;
  z-index: 11;
  background-image: url('../images/landpage.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-transition: top 1s cubic-bezier(.03, -.22, .88, .5);
  -moz-transition: top 1s cubic-bezier(.03, -.22, .88, .5);
  -o-transition: top 1s cubic-bezier(.03, -.22, .88, .5);
  -ms-transition: top 1s cubic-bezier(.03, -.22, .88, .5);
  transition: top 1s cubic-bezier(.03, -.22, .88, .5);
}

#landpage.hidden {
  top: -110%;
}*/

#loading {
  position: fixed;
  z-index: 15;
}

.loading {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-color: #F2DBAF;
  z-index: 15;
}

.loading.loading-buy-popup {
  display: none;
  position: absolute;
}

.mobile .loading.loading-buy-popup {
  position: fixed;
}

.loading.loading-pdf-preview-popup {
  display: block;
  position: absolute;
  z-index: 0;
}

.loading > div {
  display: table;
  width: 100%;
  height: 100%;
}

.loading > div > div {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.loading > div > div > div {
  position: relative;
}

.loading .loading-gun {
  position: relative;
  width: 6%;
  vertical-align: middle;
}

.mobile .loading .loading-gun {
  width: 30%;
}

.loading .loading-circle {
  position: absolute;
  left: 47%;
  top: 0%;
  width: 6%;
  transform: rotateZ(0deg);
  -webkit-animation-name: animation-loading-rotate;
  animation-name: animation-loading-rotate;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.mobile .loading .loading-circle {
  left: 35%;
  width: 30%;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animation-loading-rotate {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

/* Standard syntax */
@keyframes animation-loading-rotate {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

/*.mobile #home-container {
  height: 100%;
}*/

/*.mobile #home-main-section {
  height: 100%;
}*/

.mobile #home-container .background-container {
  background-size: contain;
}

.mobile #home-main-section .background-container {
  width: 100%;
  /*height: 100%;*/
}

.background-main-section {
  display: none;
}

.mobile .how-to-do-description {
  padding: 10%;
}

.mobile .how-to-do-description b {
  font-weight: bold;
}

.mobile .how-to-do-description h6,
.mobile .how-to-do-description h6 b {
  font-size: 6vw;
}

.mobile .how-to-do-description i {
  font-style: italic;
}

.mobile .home-how-to-do-image {
  width: 90%;
  margin-bottom: 10%;
  padding: 0% 5%;
}

.mobile #home-main-section .background-main-section {
  width: 100%;
  /*height: 100%;
  object-fit: cover;
  object-position: 50% 50%;*/
}

.section.section-envelopes {
  padding-top: 2%;
  text-align: center;
}

.mobile .section.section-envelopes {
  padding-top: auto;
  padding-bottom: 7%;
}

.section.section-envelopes > .envelopes-title-container {
  position: absolute;
  left: 73%;
  top: 3%;
}

.mobile .section.section-envelopes > .envelopes-title-container {
  display: block;
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  padding-left: 15%;
  margin-top: -12%;
}

.section.section-envelopes > .envelopes-title-container > .envelopes-title {
  color: #FFB349;
  font-size: 3vw;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
  filter: drop-shadow(-5px -5px 3px #000000);
}

.mobile .section.section-envelopes > .envelopes-title-container > .envelopes-title {
  font-size: 6vw;
}

.section.section-envelopes > .envelopes-title-container > .envelopes-subtitle {
  color: #FFFFFF;
  font-size: 2vw;
  text-align: left;
  filter: drop-shadow(-5px -5px 3px #000000);
}

.mobile .section.section-envelopes > .envelopes-title-container > .envelopes-subtitle {
  font-size: 5vw;
}

.section.section-envelopes > div:not(:first-child) {
  display: inline-block;
  width: 30%;
  text-align: center;
}

.section.section-envelopes > div:nth-child(2) {
  display: block;
  margin-left: 50%;
  margin-bottom: 3%;
}

.section.section-envelopes > div:nth-child(2) .poster-container {
  width: 70%;
  rotate: 5deg;
}

.section.section-envelopes > div:nth-child(2) .poster-container > img {
  width: 100%;
}

.mobile .section.section-envelopes > div.poster-container > img {
  width: 70%;
  margin-left: -15%;
  rotate: 5deg;
}

.section.section-envelopes > div > img {
  width: 80%;
}

.section.section-envelopes > div:nth-child(2) > img {
  margin-left: 32%;
  margin-top: -21%;
  rotate: -10deg;
}

.mobile .envelope-mystery-0 {
  position: relative;
  top: auto;
  left: 24%;
  width: 55%;
  margin-top: -22%;
  transform: rotateZ(-15deg);
}

.mobile .envelope-mystery-1 {
  position: relative;
  left: -35%;
  top: auto;
  width: 55%;
  margin-top: 10%;
  margin-bottom: 0%;
  transform: rotateZ(-8deg);
}

.mobile .envelope-mystery-2 {
  position: relative;
  left: 23%;
  top: auto;
  width: 55%;
  margin-top: -1%;
  transform: rotateZ(0deg);
}

.mobile .envelope-mystery-3 {
  position: relative;
  left: -24%;
  top: auto;
  width: 55%;
  margin-top: -1%;
  transform: rotateZ(-4deg);
}

.mobile .envelope-mystery-4 {
  position: relative;
  left: 21%;
  top: auto;
  width: 55%;
  margin-top: -1%;
  transform: rotateZ(10deg);
}

.mobile .envelope-mystery-5 {
  position: relative;
  left: 23%;
  top: auto;
  width: 55%;
  margin-top: -20%;
  transform: rotateZ(-10deg);
}

.mobile .envelope-mystery-6 {
  position: relative;
  left: -21%;
  top: auto;
  width: 55%;
  margin-top: -7%;
  transform: rotateZ(10deg);
}

.mobile .envelope-mystery-7 {
  position: relative;
  left: 23%;
  top: auto;
  width: 55%;
  margin-top: -7%;
  transform: rotateZ(-7deg);
}

.mobile .envelope-mystery-8 {
  position: relative;
  left: -20%;
  top: auto;
  width: 55%;
  margin-top: -3%;
  transform: rotateZ(10deg);
}

.mobile .envelope-mystery-9 {
  position: relative;
  left: 22%;
  top: auto;
  width: 55%;
  margin-top: -3%;
  transform: rotateZ(-7deg);
}

.mobile .envelope-mystery-10 {
  position: relative;
  left: -22%;
  top: auto;
  width: 55%;
  margin-top: -3%;
  transform: rotateZ(10deg);
}

.mobile .envelope-mystery-11 {
  position: relative;
  left: 23%;
  top: auto;
  width: 55%;
  margin-top: 0%;
  transform: rotateZ(-10deg);
}

.section.section-envelopes .spoon-mobile {
  position: absolute;
  top: 7%;
  left: 74%;
  width: 11%;
  transform: rotateZ(220deg);
}

.section.section-envelopes .poison {
  width: 40%;
  transform: rotateZ(-45deg);
}

.mobile .section.section-envelopes .spoon-mobile {
  position: relative;
  top: auto;
  left: 29%;
  width: 29%;
  margin-top: -6%;
  margin-left: auto;
  margin-bottom: 30%;
  transform: rotateZ(235deg);
}

.section.section-envelopes .cup-mobile {
  position: absolute;
  left: 17%;
  top: 7%;
  width: 25%;
}

.mobile .section.section-envelopes .cup-mobile {
  position: relative;
  left: -44%;
  width: 70%;
  margin-top: -15%;
  margin-bottom: auto;
}

.mobile .home-explanations-mobile {
  position: relative;
  left: 1%;
  width: 84%;
  margin-top: 5%;
}

.background-parallax {
  position: absolute;
  width: 100%;
}

.section-explanations {
  background-position-y: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.mobile .section-explanations {
  background-position-x: 100%;
}

.explanations-container {
  top: 0%;
  width: 100%;
  font-size: 0px;
  text-align: center;
}

.explanation-container {
  display: inline-block;
  position: relative;
  width: 26%;
  margin: 5% 3% 10% 3%;
  font-size: 0px;
}

.explanation-container:nth-child(2) {
}

.mobile .explanation-container {
  width: 42%;
  margin: 3%;
}

.mobile .explanation-container:nth-child(1),
.mobile .explanation-container:nth-child(2) {
  margin-top: 5%;
}

.mobile .explanation-container:last-child {
  margin-bottom: 15%;
}

.explanation-container img {
  width: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
}

.explanation-container .explanation {
  position: absolute;
  left: 0%;
  top: 0%;
}

.explanation-container .title-explanation, .explanation-container:hover .explanation, .explanation-container.active .explanation {
  transform: rotateY(0deg);
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.explanation-container .explanation, .explanation-container:hover .title-explanation, .explanation-container.active .title-explanation {
  transform: rotateY(-180deg);
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

.scroll-to-section-container {
  position: absolute;
  left: 45%;
  bottom: 45%;
  width: 10%;
  cursor: pointer;
}

.mobile .scroll-to-section-container {
  left: 36%;
  bottom: 28%;
  width: 28%;
}

.scroll-to-section-container.scroll-to-faq-container {
  width: 6%;
}

.mobile .scroll-to-section-container.scroll-to-faq-container {
  display: none;
  width: 10%;
}

.scroll-to-section-button {
  width: 100%;
}

.scroll-to-section-arrow {
  position: absolute;
  left: 40%;
  bottom: 20%;
  width: 20%;
  cursor: pointer;
  -webkit-animation-name: animation-scroll-to-section-arrow;
  animation-name: animation-scroll-to-section-arrow;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animation-scroll-to-section-arrow {
  0% {
    bottom: 20%;
  }
  30% {
    bottom: 20%;
  }
  50% {
    bottom: 0%;
  }
  70% {
    bottom: 20%;
  }
  100% {
    bottom: 20%;
  }
}

/* Standard syntax */
@keyframes animation-scroll-to-section-arrow {
  0% {
    bottom: 20%;
  }
  30% {
    bottom: 20%;
  }
  50% {
    bottom: 0%;
  }
  70% {
    bottom: 20%;
  }
  100% {
    bottom: 20%;
  }
}

.bottom-screen {
  position: fixed;
  bottom: 12%;
  width: 100%;
  text-align: center;
}

.mobile .bottom-screen {
  bottom: 12%;
}

.bottom-section {
  position: absolute;
  bottom: 5%;
  width: 100%;
  text-align: center;
}
/* END HOME */

/* FOOTER */
footer {
  position: relative;
}

.mobile.modal-open footer {
  display: none;
}

.mobile.modal-open.modal-open-menu footer {
  display: block;
}

#about-us {
  position: relative;
  z-index: 1;
}

#about-us > .section {
  padding-top: 3%;
  padding-bottom: 3%;
  overflow: visible;
  z-index: 2;
}

#newsletter {
  margin-top: -1%;
}

.mobile #newsletter {
  margin-top: 0%;
  padding-top: 3%;
  padding-bottom: 5%;
}

.mobile #newsletter .section-centered-container {
  display: block;
}

.mobile #newsletter .section-centered {
  display: block;
}

.newsletter-container {
  width: 120%;
  padding: 5% 10% 10% 10%;
  text-align: left;
  font-weight: bold;
  font-size: 1.2vw;
}

.mobile .newsletter-container {
  display: block;
  width: auto;
  margin: 3%;
  padding: 0%;
}

.mobile .newsletter-container .newsletter-email-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.newsletter-text {
  padding: 0% 0% 3% 0%;
  font-size: 1.3vw;
}

.mobile .newsletter-text {
  font-weight: normal;
}

.newsletter-email {
  padding: 1% 2%;
  margin-right: 1%;
  width: 50%;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px;
  font-weight: bold;
  font-size: 1.2vw;
}

.mobile .newsletter-email {
  /*width: auto;*/
  flex: 1;
  padding: 3%;
}

.newsletter-button {
  padding: 1% 5%;
  background-color: #000000;
  border-style: none;
  color: #FFFFFF;
  font-size: 1.2vw;
  cursor: pointer;
}

.newsletter-privacy-container {
  margin-top: 10px;
}

.newsletter-privacy-checkbox {
  vertical-align: middle;
}

.newsletter-response {
  display: none;
  font-size: 1.2vw;
}

.newsletter-error {
  display: none;
  font-size: 1vw;
  color: red;
  margin-top: 7px;
}


.about-us-table {
  display: table;
  width: 100%;
  color: #FFFFFF;
}

.about-us-table > div {
  display: table-cell;
  width: 33%;
  padding: 0% 2%;
  vertical-align: top;
  border-left-width: 1px;
  border-left-color: #FFFFFF;
  border-left-style: solid;
  vertical-align: middle;
}

.mobile .about-us-table > div {
  width: 50%;
  padding: 1%;
  border-width: 0px;
}

.about-us-table > div:first-child {
  border-left-width: 0px;
}

.mobile .about-us-table > div:first-child {
  display: none;
}

.about-us-table .footer-info {
  padding-left: 5%;
}

.mobile .about-us-table .footer-info {
  padding-top: 3%;
  text-align: center;
}

.footer-info > div {
  display: inline-block;
  margin-bottom: 4%;
  vertical-align: middle;
  cursor: pointer;
}

.mobile .footer-info > div {
  margin-bottom: 6%;
}

#open-privacy,
#open-cookie-settings {
  margin-left: 7%;
}

.mobile #open-privacy,
.mobile #open-cookie-settings {
  margin-left: 16%;
}

.footer-info .mail-vat-info {
  display: none;
}

.mobile .footer-info .mail-vat-info {
  display: block;
  margin-top: 3%;
}

.mobile .footer-info .mail-vat-info > div {
  margin-bottom: 5%;
  font-size: 3vw;
}

#social > div {
  text-align: center;
}

#social > div > div {
  display: inline-block;
  width: 10%;
  margin: 2%;
  cursor: pointer;
}

#social .new-line {
  display: none;
}

.mobile #social > div > div {
  width: 25%;
  margin: 3%;
}

.mobile #social .new-line {
  display: block;
}

#social img {
  width: 100%;
}

#back-to-top {
  cursor: pointer;
}

.footer-logo {
  margin-right: 6%;
}

.footer-logo img {
  width: 6vw;
  cursor: initial;
}

.footer-popup-container {
  position: absolute;
  bottom: 0%;
  height: 0%;
  margin-left: 15%;
  margin-right: 15%;
  /*padding: 5% 5% 2% 5%;*/
  overflow: hidden;
  z-index: 1;
}

.mobile .footer-popup-container.footer-popup-container-open {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  height: auto;
  margin: 0%;
  padding: 22% 5% 5% 5%;
  z-index: 9;
  background-color: #CE614A;
  overflow-y: scroll;
}

.footer-popup-container * {
  font-size: 1vw;
  color: #000000;
}

.footer-popup-container ul br,
.footer-popup-container ol br {
  display: none;
}

.mobile .footer-popup-container * {
  font-size: 3vw;
}

.footer-popup-container > div {
  position: relative;
  height: 100%;
  background-color: #CE614A;
}

.mobile .footer-popup-container > div {
  bottom: 0%;
  /*height: 100%; */
  margin: 0%;
  /*overflow-y: scroll;*/
  padding: 0px;
}

.footer-popup-container > div > div {
  height: 90%;
  padding: 5%;
}

.footer-popup-container .title {
  margin-bottom: 5%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
}

.mobile .footer-popup-container .title {
  font-size: 4vw;
}

.footer-popup-container .close-popup {
  position: absolute;
  top: 5%;
  right: 2%;
  width: 2%;
  cursor: pointer;
}

.mobile .footer-popup-container .close-popup {
  top: 3%;
  right: 7%;
  width: 7%;
}

.footer-popup-container .scroll-wrapper {
  height: 65%;
}

.mobile .footer-popup-container .scroll-wrapper {
  height: 90%;
}

.footer-popup-container .scroll-content {
  padding-right: 5%;
}

.footer-popup-container b {
  font-weight: bold;
}

.footer-popup-container a {
  text-decoration: underline;
  color: #000000;
}

.footer-popup-container i {
  font-style: italic;
}

.footer-popup-container li {
  margin-left: 4%;
}

.footer-popup-container li:before {
  content: "~";
  margin-left: -2%;
}

.footer-popup-container .subtitle {
  font-size: 1.2vw;
}

.mobile .footer-popup-container .subtitle {
  font-size: 3.2vw;
}
/* END FOOTER */


/* HOW-TO */
#how-to-container .background {
  width: 150%;
}

.mobile #how-to-container .background-container {
  position: absolute;
}

#how-to-container .bottom-section {
  bottom: 18%;
}

.mobile #how-to-section {
  background-size: contain;
}

.how-to-sections-container {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

.mobile .how-to-sections-container {
  position: relative;
  height: auto;
  padding-top: 15%;
  font-size: 0vw;
  white-space: nowrap;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  -ms-transition: left 0.3s;
  transition: left 0.3s;
}

.how-to-section {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

.mobile .how-to-section {
  display: inline-block;
  position: relative;
  left: 0% !important;
  height: auto;
  white-space: normal;
  vertical-align: top;
}

.how-to-image {
  position: absolute;
  left: 17%;
  top: 18%;
  width: 32%;
}

.mobile .how-to-image {
  position: relative;
  left: 0%;
  top: 2%;
  width: 90%;
}

.how-to-text-container {
  position: absolute;
  left: 58%;
  top: 25%;
  width: 30%;
}

.mobile .how-to-text-container {
  position: relative;
  left: 0%;
  top: 0%;
  width: 90%;
  padding: 0% 5% 5% 5%;
}

.how-to-title {
  margin-bottom: 2%;
  font-size: 2vw;
  text-transform: uppercase;
}

.mobile .how-to-title {
  margin-bottom: 0%;
  font-size: 6vw;
  text-align: center;
  font-weight: bold;
}

.how-to-title > .how-to-number {
  margin-left: -12%;
  font-size: 6vw;
}

.mobile .how-to-title > .how-to-number {
  margin-left: 0%;
}

.how-to-text {
  font-size: 1.6vw;
  text-align: left;
}

.mobile .how-to-text {
  text-align: center;
  margin-top: 2%;
}

.how-to-text b {
  font-size: 100%;
  font-weight: bold;
}

/*.mobile .how-to-text b {
  font-size: 4vw;
}*/

.how-to-pickers-container {
  position: absolute;
  left: 57%;
  top: 60%;
  width: 24%;
  font-size: 0vw;
}

.mobile .how-to-pickers-container {
  display: none;
  top: 14%;
  width: 28%;
}

.how-to-picker-container {
  display: inline-block;
  width: 10%;
  margin: 3%;
}

.how-to-picker-container .how-to-picker, .how-to-picker-container .how-to-picker-active {
  width: 100%;
  cursor: pointer;
}

.how-to-picker-container .how-to-picker, .how-to-picker-container.active .how-to-picker-active {
  display: inline-block !important;
}

.how-to-picker-container.active .how-to-picker, .how-to-picker-container .how-to-picker-active {
  display: none !important;
}

.arrow-black-left {
  display: none !important;
  position: absolute;
  top: 40%;
  left: 1%;
  width: 3%;
  transform: rotateZ(-90deg);
  cursor: pointer;
}

.mobile .arrow-black-left {
  left: 3%;
  width: 5%;
}

.arrow-black-right {
  display: none !important;
  position: absolute;
  top: 40%;
  right: 1%;
  width: 3%;
  transform: rotateZ(90deg);
  cursor: pointer;
}

.mobile .arrow-black-right {
  right: 3%;
  width: 5%;
}

.mobile .how-to-swipe-container {
  position: absolute;
  top: 18%;
  right: 5%;
  width: 10%;
  font-size: 0vw;
  z-index: -1;
}

.mobile .how-to-swipe {
  width: 100%;
}

.mobile .how-to-explanations {
  margin-bottom: 5%;
}

.mobile .how-to-explanation-1 {
  width: 100%;
  margin-left: -6%;
}

.mobile .how-to-explanation-2 {
  width: 100%;
  margin-left: 4%;
  margin-top: -11%;
}

.mobile .how-to-explanation-3 {
  width: 100%;
  margin-left: -6%;
  margin-top: -10%;
}

.faqs-container {
  padding: 0% 10% 5% 10%;
}

.mobile .faqs-container {
  padding-top: 8%;
  padding-right: 5%;
}

.faq-container {
  margin-bottom: 2%;
}

.mobile .faq-container {
  margin-bottom: 5%;
}

.faq-question, .faq-question > div {
  font-weight: bold;
  font-size: 1.6vw;
  cursor: pointer;
}

.mobile .faq-question,
.mobile .faq-question > div {
  font-size: 5vw;
}

.faq-question > div {
  display: inline-block;
  margin-left: 1%;
  vertical-align: middle;
}

.faq-question-image {
  float: left;
  width: 4%;
  margin-left: -4%;
  vertical-align: middle;
  transform: rotateZ(90deg);
  transition: 0.2s;
}

.mobile .faq-question-image {
  width: 10%;
  margin-left: -10%;
}

.faq-container.active .faq-question-image {
  transform: rotateZ(180deg);
}

.faq-answer {
  display: none;
  font-size: 1.6vw;
}

.mobile .faq-answer {
  font-size: 4vw;
}

.faq-answer * {
  font-size: 1.6vw;
}

.mobile .faq-answer * {
  font-size: 4vw;
}

.faq-answer i {
  font-style: italic;
}

.faq-answer b {
  font-weight: bold;
}

.faq-container.active .faq-answer {
  margin-left: 1%;
}
/* END HOW-TO */


/* ELEMENTS */
.button {
  padding: 2% 7%;
  margin: 6%;
  font-size: 5vw;
  color: rgb(255, 255, 255);
  background-color: #6E92D4;
  border-radius: 2vw;
  border-width: 0px;
  cursor: pointer;
  outline: none;
  -webkit-box-shadow: 0vw 2vw #566196;
  box-shadow: 0vw 2vw #566196;
}

.button-important {
  background-color: #f60;
  -webkit-box-shadow: 0vw 2vw #e83200;
  box-shadow: 0vw 2vw #e83200;
}

.error, .tooltip {
  display: none;
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  padding: 2vh;
  z-index: 2;
  background-color: #F2DBAF;
  -webkit-box-shadow: 1vh 1vh 0px 0px #000000;
  box-shadow: 1vh 1vh 0px 0px #000000;
}

.mobile .error, .mobile .tooltip {
  width: 88%;
}

.email-hint {
  cursor: pointer;
}

.bottom-message {
  display: none;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 14;
  margin-bottom: 1%;
  text-align: right;
}

#cookie.bottom-message {
  z-index: 15;
}

.bottom-message * {
  color: #000000;
  font-size: 1.3vw;
}

.mobile .bottom-message * {
  font-size: 3.5vw;
}

.bottom-message > div {
  display: inline-block;
  margin-left: 4%;
  margin-right: 4%;
  padding: 2vh 16vh;
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  background-color: #F2DBAF;
  text-align: center;
  -webkit-box-shadow: 1vh 1vh 0px 0px #000000;
  box-shadow: 1vh 1vh 0px 0px #000000;
}

.mobile .bottom-message > div {
  margin-left: 0%;
  margin-right: 0%;
  padding: 5%;
}

.bottom-message a {
  color: #000000;
  text-decoration: underline;
}

.cookie-button-container {
  margin-top: 1%;
}

.cookie-accept-button,
.cookie-deny-button {
  padding: 1% 5%;
  margin: 0% 1%;
  font-size: 1.2vw;
  cursor: pointer;
}

.cookie-accept-button {
  background-color: #000000;
  color: #FFFFFF;
}

.cookie-deny-button {
  background-color: transparent;
}
/* END ELEMENTS */


/* JQUERY SCROLLBAR OVERRIDE */
.scrollbar-inner > .scroll-element .scroll-bar {
  background-color: #7D4536;
}
.scrollbar-inner > .scroll-element:hover .scroll-bar, .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #A50101;
}

.scrollbar-inner-hide > .scroll-element.scroll-y {
  display: none !important;
}
/* END JQUERY SCROLLBAR OVERRIDE */


/* PURCHASE */
.centered-text {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

.centered-text > div {
  display: table;
  width: 100%;
  height: 100%;
}

.centered-text > div > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
/* END PURCHASE */


/* CONTACTS */
.mobile #contacts-container .background-container {
  background-size: 100%;
}

.contacts-container {
  position: absolute;
  top: 22%;
  left: 33%;
  width: 38%;
  height: 43%;
}

.mobile .contacts-container {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  padding: 25% 5% 0% 5%;
}

.modal-open #contacts-container {
  z-index: 12;
}

.contacts-info {
  position: absolute;
  top: 22%;
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
}

.mobile .contacts-info {
  position: relative;
  top: auto;
  width: auto;
  font-size: 4vw;
  margin-bottom: 2%;
}

.contacts-mail {
  display: block;
  position: absolute;
  top: 31%;
  width: 100%;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  color: #000000;
}

.contacts-mail:active, .contacts-mail:focus, .contacts-mail:hover, .contacts-mail:visited {
  color: #000000;
}

.mobile .contacts-mail {
  position: relative;
  top: auto;
  width: auto;
  font-size: 6vw;
}

.contacts-social-icon-container {
  position: absolute;
  left: 10%;
  bottom: 7%;
  width: 38%;
  text-align: center;
}

.mobile .contacts-social-icon-container {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  margin: 10% 10% 0% 10%;
}

.contacts-social-icon {
  width: 23%;
  margin: 4%;
  cursor: pointer;
}

.mobile .contacts-social-icon {
  width: 18%;
}

.contacts-credits {
  position: absolute;
  right: 10%;
  bottom: 18%;
  font-size: 4vh;
  text-decoration: underline;
  cursor: pointer;
}

.mobile .contacts-credits {
  position: relative;
  right: auto;
  bottom: auto;
  margin-top: 10%;
  text-align: center;
}

.credits-open-popup {
  font-size: 2vw;
  text-decoration: underline;
  color: #000000 !important;
}

.mobile .credits-open-popup {
  font-size: 7vw;
  font-weight: bold;
  text-transform: uppercase;
}

.credits-popup-container {
  display: none;
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 11;
  cursor: pointer;
}

.credits-popup-content {
  position: relative;
  height: calc(100% - 16vh);
  margin-top: 8vh;
  margin-bottom: 8vh;
  cursor: initial;
  -webkit-box-shadow: 4vh 4vh 0px 0px #000000;
  box-shadow: 4vh 4vh 0px 0px #000000;
}

.mobile .contacts-credits-container {
  padding: 4% 0% 3% 0%;
}

.credits-popup-content img {
  height: 100%;
}

.mobile .contacts-credits-container > div {
  padding: 1% 3% 1% 6%;
  font-size: 0px;
}

.mobile .contacts-credits-container > div > div {
  display: inline-block;
  position: relative;
  width: calc(50% - 5px);
  overflow: hidden;
  font-size: 4vw;
}

.mobile .contacts-credits-container > div > div:first-child {
  margin-right: 5px;
}

.mobile .contacts-credits-container > div > div:first-child::after {
  content: '........................................................................................................................................................................................................................................................';
  position: absolute;
  padding-left: 5px;
}

.mobile .credits-popup-content > div > div > div:last-child {
  font-weight: bold;
}
/* END CONTACTS */


/* BLOG */
.blog-categories-container {
  padding: 5% 10% 1% 10%;
  background-color: #CE614A;
}

.mobile .blog-categories-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 19%;
}

.blog-categories-container > .blog-category {
  display: inline-block;
  padding: 0% 2%;
  cursor: pointer;
  color: #F2DBAF;
}

.mobile .blog-categories-container > .blog-category {
  flex-grow: 1;
  width: 36%;
  margin-bottom: 6%;
}

.blog-categories-container > .blog-category.selected,
.blog-categories-container > .blog-category:hover {
  color: #FFFFFF;
}

.post-list {
  display: flex;
  padding: 5% 10% 5% 10%;
  flex-wrap: wrap;
  text-align: center;
  background-size: 100%;
}

.mobile .post-list {
  padding: 5%;
}

.post-list .post-thumbnail-container {
  display: block;
  width: 29%;
  margin: 3% 2%;
  text-align: center;
  color: #000000;
  background-color: #FFFFFF;
  cursor: pointer;
  -webkit-box-shadow: 5px 6px 20px 0px #000000;
  box-shadow: 5px 6px 20px 0px #000000;
}

.mobile .post-list .post-thumbnail-container {
  width: 100%;
  margin: 10% 2%;
}

.post-thumbnail-container img {
  width: 100%;
  /* A fixed frame independent of the image's own shape (#73): the card's
     height no longer depends on whether the featured image is landscape,
     portrait or a panorama, so every card in a row stays the same height.
     object-fit crops to fill it. No padding-top fallback: aspect-ratio has
     shipped in every browser since 2021, the same floor this stylesheet
     already assumes for object-fit and flexbox, and the padding-top trick
     needs a position:relative wrapper with the image absolutely
     positioned inside it, a markup change this fix does not need. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 1;
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -ms-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.post-thumbnail-container img:hover {
  opacity: 0.8;
}

.post-thumbnail-container .post-thumbnail-title {
  display: block;
  margin: 5%;
  font-size: 1.6vw;
  text-align: center;
  line-height: 160%;
  cursor: pointer;
}

.mobile .post-thumbnail-container .post-thumbnail-title {
  font-size: 5.5vw;
}

.post-list .post-container {
  padding: 0% 17%;
}

.mobile .post-list .post-container {
  padding: 0%;
}

.post-container * {
  font-size: 1.2vw;
}

.post-container .post-header-container {
  display: block;
  text-align: left;
  margin-top: 4%;
  padding-bottom: 2%;
  margin-bottom: 3%;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.mobile .post-container .post-header-container {
  margin-top: 20%;
}

.mobile .post-container .post-date-container {
  font-size: 3.5vw;
}

.post-container .post-date {
  font-weight: bold;
  text-decoration: underline;
}

.mobile .post-container .post-date {
  font-size: 3.5vw;
}

.post-container .post-title {
  font-size: 3vw;
}

.mobile .post-container .post-title {
  font-size: 10vw;
}

.post-container .post-body-container {
  display: block;
  /*text-align: right;*/
}

/*.mobile .post-container .post-body-container {
  text-align: left;
}*/

.post-container .post-body-container > * {
  display: inline-block;
  width: 100%;
}

.mobile .post-container .post-body-container > * {
  width: 100%;
}

.post-container .post-image-container {
  margin-bottom: 3%;
}

.post-container .post-image-container > img {
  width: 100%;
  height: auto;
}

.post-container .post-content {
  text-align: left;
}

.post-container .post-content,
.post-container .post-content * {
  line-height: 170%;
}

.mobile .post-container .post-content,
.mobile .post-container .post-content * {
  font-size: 4vw;
}

.post-container .post-content iframe {
  width: 100%;
}

.post-container .post-content .post-video {
  position: relative;
  display: block;
  cursor: pointer;
  background-color: #000;
}

.post-container .post-content .post-video iframe {
  display: block;
  pointer-events: none;
}

.post-container .post-content .post-video.playing iframe {
  pointer-events: auto;
}

.post-container .post-content .post-video-play,
.post-container .post-content .post-video-notice {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: #FFFFFF;
}

.post-container .post-content .post-video-play {
  top: 40%;
  font-weight: bold;
  text-transform: uppercase;
}

.post-container .post-content .post-video-notice {
  top: 55%;
  padding: 0 5%;
}

.post-container .post-content .post-video.playing .post-video-play,
.post-container .post-content .post-video.playing .post-video-notice {
  display: none;
}

.post-container .post-content a {
  color: #CE614A;
  font-weight: bold;
}

.post-container .post-content b,
.post-container .post-content strong {
  font-weight: bold;
}

.post-container .post-content i,
.post-container .post-content italic {
  font-style: italic;
}

.post-container h2 {
  margin-top: 5%;
  font-size: 2vw;
  font-weight: bold;
}

.post-container h3 {
  font-size: 1.6vw;
  margin-bottom: 1%;
}

.post-container .post-links-container {
  width: 100%;
}

.post-container .post-links-container .post-link-container {
  display: inline-block;
  width: 49%;
  margin-top: 5%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.mobile .post-container .post-links-container .post-link-container {
  white-space: normal;
}

.post-container .post-links-container .post-back-blog-container {
  width: 100%;
}

.post-container .post-links-container .post-link-container.post-back-blog-container {
  text-align: left;
}

.post-container .post-links-container .post-link-container.post-prev-link-container {
  text-align: left;
}

.post-container .post-links-container .post-link-container.post-next-link-container {
  text-align: right;
}

.post-container .post-link-container a {
  color: #CE614A;
  font-weight: bold;
}

.mobile .post-container .post-link-container a {
  font-weight: normal;
  font-size: 4.5vw;
}

/* END BLOG */


/* REVIEW*/
.mobile .section-review {
  font-size: 0px;
  padding-top: 15%;
}

.review-mystery {
  position: absolute;
  top: 27%;
  left: 38%;
  width: 30%;
  text-align: center;
  text-transform: uppercase;
  font-size: 3vh;
}

.mobile .review-mystery {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  background-size: contain;
}

.mobile .review-title {
  width: 100%;
}

.review-text {
  position: absolute;
  top: 36%;
  left: 33%;
  width: 35%;
  height: 20%;
  background-color: transparent;
  border-width: 0px;
  outline: none;
  resize: none;
}

.mobile .review-text {
  position: relative;
  top: auto;
  left: auto;
  width: 90%;
  height: 30vh;
  margin-bottom: 5%
}

.scroll-content .review-text {
  left: 0%;
}

.review-signature {
  position: absolute;
  top: 60%;
  left: 59%;
  width: 10%;
}

.mobile .review-signature {
  position: relative;
  top: auto;
  left: auto;
  width: 60%;
  margin-left: 30%;
}

.review-send-button-container {
  position: absolute;
  left: 45%;
  top: 66%;
  width: 11%;
  cursor: pointer;
  z-index: 1;
}

.mobile .review-send-button-container {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  padding: 5%;
}

.review-send-button-container .review-send-button,
.review-send-button-container .review-send-button-pressed  {
  width: 100%;
}

.mobile .review-send-button-container .review-send-button,
.mobile .review-send-button-container .review-send-button-pressed  {
  width: 35%;
}

.review-send-button-container .review-send-button-pressed {
  display: none;
}

.review-send-button-container:hover .review-send-button {
  display: none;
}

.review-send-button-container:hover .review-send-button-pressed {
  display: block;
}

.mobile .review-send-button-container:hover .review-send-button {
  display: inline-block;
}

.mobile .review-send-button-container:hover .review-send-button-pressed {
  display: none;
}

.review-response {
  position: absolute;
  top: 77%;
  left: 34%;
  width: 34%;
  text-align: center;
  font-size: 2vh;
}

.mobile .review-response {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  padding-bottom: 5%;
}
/* END REVIEW */


/* MODAL */
body.mobile.modal-open {
  overflow-y: scroll;
}

.container {
  display: none;
}

.container.container-opened {
  display: block;
}

.mobile.modal-open .container,
.mobile.modal-open .container.container-opened {
  display: none;
}

.mobile.modal-open.modal-open-menu .container.container-opened {
  display: block;
}

body.modal-open .container *, body.modal-open footer * {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.modal.opened, .modal.opened * {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

body.modal-open .container .popup-container, body.modal-open .container .popup-container * {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.popup-container-open {
  display: block;
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.popup-container-open .section-centered-container {
  display: block;
  background-color: #CE614A;
}

.popup-container-open .section-centered {
  display: block;
}
/* END MODAL */