html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

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

figure { margin: 1em 40px; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html { color: #222; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/*
@include keyframes(fade-in) { 0%   { opacity: 0; } 100% { opacity: 1; }
}
*/
@font-face { font-family: 'Tilda Petite'; src: url("Tilda-Petite.eot?#iefix") format("embedded-opentype"), url("Tilda-Petite.otf") format("opentype"), url("Tilda-Petite.woff") format("woff"), url("Tilda-Petite.ttf") format("truetype"), url("Tilda-Petite.svg#Tilda-Petite") format("svg"); font-weight: normal; font-style: normal; }
/*
*, *:before, *:after {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}
*/
*::selection { background: rgba(187, 147, 105, 0.11); }

html { -ms-overflow-x: hidden; height: 100%; margin: 0; }

body { margin: 0; font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 30px; color: #ffa901; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); width: 100%; height: 100%; min-width: 320px; background-color: #fff; overflow-x: hidden; -webkit-print-color-adjust: exact; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 32px; }
@media screen and (max-width: 523px) { body { font-size: 24px; line-height: 28px; } }
@media screen and (max-width: 768px) { body { font-size: 28px; } }

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

h1 { font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 300px; line-height: 100%; margin: 16px auto; }

h2 { font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 120px; line-height: 100%; margin: 16px auto; }

p { padding: 0; margin: 0 0 1.5em 0; text-align: justify; -moz-text-align-last: center; text-align-last: center; padding: 0 8px; }
html.no-textalignlast p { text-align: center; }
p:last-child { margin: 0; }

ul { list-style-type: none; margin: 0; padding: 0; }

img.scale { width: 100%; height: auto; }

input, button { font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; margin: 16px auto; outline: none; background-color: #d8a57a; border: none; border-radius: 20px; height: 40px; min-width: 120px; color: #fff; line-height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

input { background-color: transparent; border: 2px solid; border-color: #d8a57a; color: #d8a57a; text-align: center; transition: border-color 150ms linear; }
input:focus { border-color: #ffa901; color: #ffa901; }
input.error { border-color: #7ccbfd; color: #7ccbfd; }

button { transition: background-color 150ms linear; }
html.desktop button:hover { background-color: #ffa901; }

blockquote { margin: 0; }

.cf:after { content: ""; display: table; clear: both; }

::-webkit-input-placeholder { color: #d8a57a; line-height: 100%; }

:-moz-placeholder { /* Firefox 18- */ color: #d8a57a; line-height: 100%; }

::-moz-placeholder { /* Firefox 19+ */ color: #d8a57a; line-height: 100%; }

:-ms-input-placeholder { color: #d8a57a; line-height: 100%; }

main { position: relative; margin: auto; margin-bottom: 200px; display: block; width: auto; max-width: 750px; visibility: hidden; text-align: center; padding: 0 32px; overflow: hidden; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
main h1 { line-height: 75%; padding: 32px 16px; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main h1:first-child { margin-top: 64px; }
main h2 { line-height: 75%; padding: 32px 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main img { display: block; width: 65%; margin: auto; }

nav { display: block; position: fixed; bottom: 0; width: 100%; height: auto; background: #d8a57a; overflow: hidden; visibility: visible; opacity: 1; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
nav ul { display: block; margin: 37.5px auto; text-align: center; }
nav ul li { color: #fff; }
nav .nacho-icon { display: block; position: absolute; width: 22px; height: 20px; left: calc(50% - 11px); }
nav .nacho-icon.top { top: 9px; }
nav .nacho-icon.list { position: relative; margin-top: 8px; }
nav a:before, nav a:after { content: ''; position: relative; width: 8px; height: 8px; display: inline-block; background-color: #fff; border-radius: 4px; overflow: hidden; margin-bottom: 2px; opacity: 0; transition: transform 500ms ease, opacity 500ms linear, background-color 500ms linear; }
nav a:before { transform: translateX(-24px); }
nav a:after { transform: translateX(24px); }
nav a:hover { text-decoration: none !important; }
nav a:hover:before { transform: translateX(-12px); opacity: 1; }
nav a:hover:after { transform: translateX(12px); opacity: 1; }
nav a.selected:before, nav a.selected:after { background-color: #ffa901; }
nav a.selected:before { transform: translateX(-12px); opacity: 1; }
nav a.selected:after { transform: translateX(12px); opacity: 1; }

.menu-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #7ccbfd; opacity: 0; visibility: hidden; }

body.gallery-page { overflow: hidden; position: fixed; left: 0; top: 0; display: block; width: 100%; }
body.gallery-page main { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 37.5px); max-width: none; margin: auto; padding: 0; }
body.gallery-page main .image-carousel { height: 100%; margin: 0; }
body.gallery-page main .image-carousel .carousel-wrapper { position: relative; display: block; width: 100%; height: 100%; }
body.gallery-page main .image-carousel .carousel-wrapper:after { content: ""; display: block; padding-bottom: 50%; }
body.gallery-page main .image-carousel .dots { display: none; }

main.book-page input { max-width: 300px; width: 100%; min-width: initial; }
main.book-page img { width: 65%; }
main.book-page button.disabled { pointer-events: none; }
main.book-page .title { margin-bottom: 0; }
main.book-page .subtitle { margin: 0; }
main.book-page .simple-image-carousel > .dots { display: none; }
main.book-page .small-dot__1 { margin-top: 60px; }
main.book-page .small-dot__2 { margin-top: 60px; }
main.book-page .small-dot__3 { margin-top: 60px; }
main.book-page .small-dot__4 { margin-top: 60px; }
main.book-page button.download-book { margin-top: 32px; width: 250px; }
main.book-page img.children-book-ipad { width: 100%; }
main.book-page img.devices { width: 220px; }
@media screen and (max-width: 523px) { main.book-page img.devices { width: 200px; } }
main.book-page .keep-you-posted { margin: 16px 16px; }
@media screen and (max-width: 523px) { main.book-page .keep-you-posted { margin: 16px 0; } }
main.book-page .printed-book-title { margin: 16px 6px; }
@media screen and (max-width: 523px) { main.book-page .printed-book-title { margin: 16px 0; } }

main.now-page div.svg-gradient { margin-bottom: 32px; }
main.now-page img { margin-top: 64px; width: 45%; }
main.now-page div.quote-marks { margin: auto; max-width: 80px; }

main.about-page button { margin-top: 32px; width: 250px; }
main.about-page div.svg-gradient { margin-bottom: 32px; }
main.about-page div.svg-gradient.symbolism { margin-bottom: 16px; }
main.about-page .small-dot { margin: 60px 0; }
main.about-page .small-dot__4 { margin: 16px 0; }
main.about-page .simple-image-carousel { margin-top: 16px; }
main.about-page .credits img { width: 50% !important; }

#intro { overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#intro h1 { text-align: center; line-height: 75%; padding: 32px 16px; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; }
#intro p { text-align: center; }
#intro .wrapper { position: relative; max-width: 750px; padding: 0 32px; margin: auto; box-sizing: content-box; }
#intro .cover { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #d8a57a; }
#intro .gradient-element { position: relative; display: block; margin: 1px auto; }
#intro .blue-copy { width: 100%; max-width: 420px; display: block; position: relative; visibility: hidden; opacity: 0; margin: auto; }

.gradient-element { background-color: white; color: #ffa901; display: block; }

.svg-gradient { margin: 64px 6px; }
@media screen and (max-width: 523px) { .svg-gradient { margin: 64px 0px; } }

html.gradients .svg-gradient { mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; }
html.gradients .svg-gradient img { width: 100%; opacity: 0; }

html.no-gradients .svg-gradient { mask-repeat: initial !important; mask-size: initial !important; mask-position: initial !important; -webkit-mask-repeat: initial !important; -webkit-mask-size: initial !important; -webkit-mask-position: initial !important; -webkit-mask-image: none !important; }
html.no-gradients .svg-gradient img { width: 100%; }

.quick-fit { display: inline-block; overflow: hidden; box-sizing: border-box; }

.image-carousel { position: relative; background-color: #fff; width: 100%; margin-bottom: 64px; }
.image-carousel .carousel-wrapper { position: relative; display: block; width: 100%; overflow: hidden; }
.image-carousel .carousel-wrapper:after { content: ""; display: block; padding-bottom: 50%; }
.image-carousel .image-wrapper { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.image-carousel .image-container { background-color: #fff; position: absolute; display: block; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.image-carousel .image-container.cursor { cursor: pointer; }
.image-carousel .image-container a { display: none; }
.image-carousel .image-container.cover { background-size: cover; }
.image-carousel .image-container.right { background-position: right center; }
.image-carousel .image-container.right.bottom { background-position: right bottom; }
.image-carousel .image-container.right.top { background-position: right top; }
.image-carousel .image-container.left { background-position: left center; }
.image-carousel .image-container.left.bottom { background-position: left bottom; }
.image-carousel .image-container.left.top { background-position: left top; }
.image-carousel .arrow { position: fixed; display: block; width: 91px; height: 92px; cursor: pointer; top: calc(50% - 64px); }
.image-carousel .arrow.left { left: 32px; background-size: contain; }
.image-carousel .arrow.right { right: 32px; background-size: contain; }
.image-carousel .arrow.disabled { display: none; }
.image-carousel .arrow canvas { cursor: pointer; }
html.mobile .image-carousel .arrow { width: 45.5px; height: 46px; top: calc(50% - 64px); }
html.mobile .image-carousel .arrow.left { left: -25px; }
html.mobile .image-carousel .arrow.right { right: 16px; }
html.mobile .image-carousel .arrow canvas { transform: scale(0.5); }
.image-carousel .cover-overlay { position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 100%; }
.image-carousel .loading-animation { position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; }

.simple-image-carousel { position: relative; background-color: #fff; width: 100%; margin-bottom: 64px; }
.simple-image-carousel .carousel-wrapper { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.simple-image-carousel .carousel-wrapper:after { content: ""; display: block; padding-bottom: 50%; }
.simple-image-carousel .image-wrapper { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.simple-image-carousel .image-container { background-color: #fff; position: absolute; display: block; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.simple-image-carousel .image-container a { display: none; }
.simple-image-carousel .image-container.cover { background-size: cover; }
.simple-image-carousel .image-container.right { background-position: right center; }
.simple-image-carousel .image-container.right.bottom { background-position: right bottom; }
.simple-image-carousel .image-container.right.top { background-position: right top; }
.simple-image-carousel .image-container.left { background-position: left center; }
.simple-image-carousel .image-container.left.bottom { background-position: left bottom; }
.simple-image-carousel .image-container.left.top { background-position: left top; }
.simple-image-carousel .arrow { position: absolute; display: block; width: 50px; height: 50px; cursor: pointer; top: calc(50% - 25px); }
.simple-image-carousel .arrow.left { left: 26px; background: transparent url("../img/arrow_left.png") no-repeat; background-size: contain; }
.simple-image-carousel .arrow.right { right: 2px; background: transparent url("../img/arrow_right.png") no-repeat; background-size: contain; }
.simple-image-carousel .arrow.disabled { display: none; }
.simple-image-carousel .arrow canvas { cursor: pointer; }
html.mobile .simple-image-carousel .arrow { width: 25px; height: 25px; top: calc(50% - 12.5px); }
html.mobile .simple-image-carousel .arrow.left { left: 12.5px; }
html.mobile .simple-image-carousel .arrow.right { right: 0px; }
.simple-image-carousel .dots { position: absolute; bottom: -32px; margin: auto; text-align: center; vertical-align: middle; height: 28px; width: auto; left: 50%; }
.simple-image-carousel .dots .dot { position: relative; display: inline-block; cursor: pointer; width: 12px; height: 12px; border-radius: 8px; border: 2px solid #d8a57a; overflow: hidden; }
.simple-image-carousel .dots .dot .inner-circle { position: absolute; display: block; width: 8px; height: 8px; left: 2px; top: 2px; background-color: white; border-radius: 10px; overflow: hidden; transition: background-color 150ms linear; }
.simple-image-carousel .dots .dot.selected .inner-circle { background-color: #d8a57a; }
.simple-image-carousel .cover-overlay { position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 100%; }
.simple-image-carousel .loading-animation { position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; }

.color-drip { position: fixed; top: 0; left: 50%; pointer-events: none; width: 10px; height: 100%; }
.color-drip .gradient-strip { display: none; }

.color-drop { position: absolute; display: block; width: 10px; height: 10px; background-color: #f00; border-radius: 5px; overflow: hidden; margin-left: -5px; }

.hourglass-animation { background-color: #fff; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.gallery-image-info { position: fixed; background-color: rgba(124, 203, 253, 0.8); top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; }

.gallery-image-info__wrapper { position: relative; transform: translateY(-50%); top: 50%; margin: auto; margin-top: -37px; color: #fff; max-width: 750px; }
.gallery-image-info__wrapper h3 { font-size: 64px; line-height: 100%; font-weight: normal; margin: 0; }
.gallery-image-info__wrapper .body-text .big { display: block; font-size: 64px; line-height: 100%; font-weight: normal; margin: 0; margin-top: 24px; }
@media screen and (max-width: 768px) { .gallery-image-info__wrapper { font-size: 24px; line-height: 28px; }
  .gallery-image-info__wrapper h3 { font-size: 32px; }
  .gallery-image-info__wrapper .body-text .big { margin-top: 16px; font-size: 32px; }
  .gallery-image-info__wrapper .small-dot.white { margin-top: 16px; margin-bottom: 16px; } }

.gallery-image-info__close { width: 50px; height: 50px; background-image: url('data:image/svg+xml;charset=UTF-8, <svg class="back-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.22 104.22"><defs><style>.cls-1 {fill: none;stroke: #fff;stroke-linecap: round;stroke-linejoin: round;stroke-width: 5px;}</style></defs><title>Close</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="2.5" y1="2.5" x2="101.72" y2="101.72"></line><line class="cls-1" x1="101.72" y1="2.5" x2="2.5" y2="101.72"></line></g></g></svg>'); background-size: contain; margin: auto; cursor: pointer; }
@media screen and (max-width: 768px) { .gallery-image-info__close { width: 25px; height: 25px; } }

div.small-dot { position: relative; display: block; background-color: #ffa901; width: 4px; height: 4px; border-radius: 2px; overflow: hidden; left: 50%; margin: 16px; margin-left: -2px; }
div.small-dot.white { background-color: #fff; margin-top: 32px; margin-bottom: 32px; }
html.tablet div.small-dot.white, html.mobile div.small-dot.white { margin-top: 16px; margin-bottom: 16px; }