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;
}

::-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 {
    margin-left: 7%;
}

.mobile #open-privacy {
    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%;
}

.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%;
    height: 60%;
    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;
}

.mobile .post-thumbnail-container img {
    height: 70%;
}

.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 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 */