@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:300,400");
html, body, div, 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 {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  list-style-type: none; }

/*

@Name Harmony
@author Elias Touil
@year 2017
@version 6.0
@copyright Creative Common CC0

Presuming musical intervals will have a spatial analog
Harmony generates spatial values which fit in a recursive 12 column grid.
Which are called using @function spatialValue with note names and
a numerical value for the octave as arguments.


*/
/*

@Name Gridception
@author Elias Touil
@year 2017
@version 1.0
@copyright Creative Common CC0

This is an unopiniated grid system, it just gives you numerical values.
A viewport size is divided in 10 columns, every depth increment means divided by 12
That is that in one column stand another grid.


*/
/*

@Name Resilience
@author Elias Touil
@year 2017
@version 3.0
@copyright Creative Common CC0

Resilience is a media query mixin collection simplified around the width/height proportions
It is restricted to 4 possibilities: { laptopr OR mobile } OR { landscape OR portrait }

It is presumed that one will want to adapt his design when (1) the Width/Height ratio changes and
(2) when the device size changes

Resilience supports harmony.scss and gridception.scss with resilientGrid() and resilientHarmony() mixins

*/
/* --- Dev Tools --- */
.devnotes:before {
  position: fixed;
  z-index: 40;
  opacity: 0.8; }
  @media (orientation: portrait) and (max-width: 700px) {
    .devnotes:before {
      content: 'phone-portrait'; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .devnotes:before {
      content: 'phone landscape'; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .devnotes:before {
      content: 'laptop portrait'; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .devnotes:before {
      content: 'laptop landscape'; } }

.flex {
  display: flex; }

/* --- Chroma --- */
/* --- Typography --- */
.primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph, .primary-info, .book__contact__line, .book__estimate, .primary-nav, .nav__item {
  font-family: "Nunito Sans","Sans Serif"; }

.primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
  font-weight: 300;
  color: #555555; }
  @media (orientation: portrait) and (max-width: 700px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      font-size: 2.346228042vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      font-size: 3.7309237762vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      font-size: 1.5625vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      font-size: 1.6633914334vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      line-height: 3.3267828668vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      line-height: 5.5729878616vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      line-height: 2.346228042vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .primary-paragraph, .paragraph-strong, .landing__intro, .photos__intro, .book__intro, .book__paragraph, .workshop__paragraph {
      line-height: 2.0920800637vh; } }

.primary-info, .book__contact__line, .book__estimate {
  font-weight: 300;
  color: #555555; }
  @media (orientation: portrait) and (max-width: 700px) {
    .primary-info, .book__contact__line, .book__estimate {
      font-size: 2.0920800637vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .primary-info, .book__contact__line, .book__estimate {
      font-size: 3.3267828668vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .primary-info, .book__contact__line, .book__estimate {
      font-size: 1.2423277482vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .primary-info, .book__contact__line, .book__estimate {
      font-size: 1.2423277482vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .primary-info, .book__contact__line, .book__estimate {
      line-height: 3.3267828668vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .primary-info, .book__contact__line, .book__estimate {
      line-height: 5.5729878616vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .primary-info, .book__contact__line, .book__estimate {
      line-height: 1.5625vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .primary-info, .book__contact__line, .book__estimate {
      line-height: 1.5625vh; } }

.paragraph-strong {
  color: #555555;
  font-weight: 400; }

.primary-nav, .nav__item {
  font-weight: 200;
  /* color changes to light grey on mobile */ }
  @media (orientation: portrait) and (max-width: 700px) {
    .primary-nav, .nav__item {
      color: #DDDDDD; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .primary-nav, .nav__item {
      color: #DDDDDD; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .primary-nav, .nav__item {
      color: #555555; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .primary-nav, .nav__item {
      color: #555555; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .primary-nav, .nav__item {
      font-size: 2.346228042vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .primary-nav, .nav__item {
      font-size: 3.7309237762vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .primary-nav, .nav__item {
      font-size: 1.5625vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .primary-nav, .nav__item {
      font-size: 1.8654618881vh; } }

/* elements */
a {
  text-decoration: none;
  cursor: pointer;
  color: inherit; }
  a:hover {
    color: black;
    cursor: pointer; }

/* Landing page elements */
@media (orientation: portrait) and (max-width: 700px) {
  .landing__logo {
    margin-top: 37.5vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .landing__logo {
    margin-top: 33.3333333333vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .landing__logo {
    margin-top: 41.6666666667vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .landing__logo {
    margin-top: 37.5vh; } }
@media (orientation: portrait) and (max-width: 700px) {
  .landing__logo {
    margin-left: 41.6666666667vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .landing__logo {
    margin-left: 45.8333333333vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .landing__logo {
    margin-left: 45.8333333333vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .landing__logo {
    margin-left: 46.875vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .landing__logo {
    width: 16.6666666667vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .landing__logo {
    width: 8.3333333333vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .landing__logo {
    width: 8.3333333333vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .landing__logo {
    width: 6.25vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .landing__logo {
    margin-right: 41.6666666667vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .landing__logo {
    margin-right: 45.8333333333vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .landing__logo {
    margin-right: 45.8333333333vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .landing__logo {
    margin-right: 46.875vw; } }

.landing__intro {
  position: relative;
  float: left;
  text-align: center; }
  @media (orientation: portrait) and (max-width: 700px) {
    .landing__intro {
      margin-top: 1.3888888889vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .landing__intro {
      margin-top: 1.3888888889vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .landing__intro {
      margin-top: 1.3888888889vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .landing__intro {
      margin-top: 0.6944444444vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .landing__intro {
      margin-left: 16.6666666667vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .landing__intro {
      margin-left: 25vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .landing__intro {
      margin-left: 25vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .landing__intro {
      margin-left: 37.5vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .landing__intro {
      width: 66.6666666667vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .landing__intro {
      width: 50vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .landing__intro {
      width: 50vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .landing__intro {
      width: 25vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .landing__intro {
      margin-right: 16.6666666667vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .landing__intro {
      margin-right: 25vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .landing__intro {
      margin-right: 25vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .landing__intro {
      margin-right: 37.5vw; } }

/* --- Nav Elements --- */
.nav__item {
  position: relative;
  float: left;
  /* text is centered on mobile*/ }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__item {
      text-align: center; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__item {
      text-align: center; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__item {
      text-align: left; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__item {
      text-align: left; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__item {
      margin-top: 1.3888888889vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__item {
      margin-top: 2.7777777778vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__item {
      margin-top: 0.6944444444vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__item {
      margin-top: 0.6944444444vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__item {
      width: 50vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__item {
      width: 33.3333333333vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__item {
      width: 16.6666666667vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__item {
      width: 16.6666666667vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__item {
      margin-bottom: 1.3888888889vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__item {
      margin-bottom: 2.7777777778vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__item {
      margin-bottom: 1.3888888889vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__item {
      margin-bottom: 0.6944444444vh; } }

.nav__icons {
  position: relative;
  float: left;
  display: -ms-flex;
  display: -moz-webkitflex;
  display: -webkit-flex;
  display: flex; }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__icons {
      justify-content: space-around; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__icons {
      justify-content: space-around; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__icons {
      justify-content: flex-start; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__icons {
      justify-content: flex-start; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__icons {
      margin-top: 2.7777777778vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__icons {
      margin-top: 4.1666666667vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__icons {
      margin-top: 1.3888888889vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__icons {
      margin-top: 1.3888888889vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__icons {
      width: 50vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__icons {
      width: 33.3333333333vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__icons {
      width: 12.5vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__icons {
      width: 12.5vw; } }

@media (orientation: portrait) and (max-width: 700px) {
  .icons__icon {
    padding-right: 0vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .icons__icon {
    padding-right: 0vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .icons__icon {
    padding-right: 1.3888888889vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .icons__icon {
    padding-right: 1.3888888889vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .icons__icon {
    width: 8.3333333333vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .icons__icon {
    width: 4.8611111111vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .icons__icon {
    width: 3.4722222222vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .icons__icon {
    width: 2.0833333333vw; } }

.nav__control {
  position: fixed;
  width: 100%;
  height: auto;
  bottom: 0;
  justify-content: space-around;
  flex-direction: row;
  opacity: 0.5; }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__control {
      display: flex; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__control {
      display: flex; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__control {
      display: none; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__control {
      display: none; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav__control {
      justify-content: space-around; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav__control {
      justify-content: flex-end; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav__control {
      justify-content: space-around; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav__control {
      justify-content: space-around; } }

@media (orientation: portrait) and (max-width: 700px) {
  .nav__control__logo {
    width: 12.5vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .nav__control__logo {
    width: 6.25vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .nav__control__logo {
    width: 0vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .nav__control__logo {
    width: 0vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .nav__control__logo {
    height: 12.5vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .nav__control__logo {
    height: 6.25vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .nav__control__logo {
    height: 0vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .nav__control__logo {
    height: 0vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .nav__control__logo {
    margin: 2.7777777778%; } }
@media (orientation: landscape) and (max-height: 700px) {
  .nav__control__logo {
    margin: 4.1666666667%; } }
@media (orientation: portrait) and (min-width: 701px) {
  .nav__control__logo {
    margin: 0%; } }
@media (orientation: landscape) and (min-height: 701px) {
  .nav__control__logo {
    margin: 0%; } }

/* photos elements */
.photos__photo {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center; }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos__photo {
      margin-top: 4.1666666667vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos__photo {
      margin-top: 4.1666666667vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos__photo {
      margin-top: 8.3333333333vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos__photo {
      margin-top: 8.3333333333vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos__photo {
      max-width: 91.6666666667vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos__photo {
      max-width: 91.6666666667vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos__photo {
      max-width: 50vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos__photo {
      max-width: 50vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos__photo {
      max-height: 91.6666666667vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos__photo {
      max-height: 91.6666666667vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos__photo {
      max-height: 91.6666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos__photo {
      max-height: 75vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos__photo {
      margin-bottom: 4.1666666667vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos__photo {
      margin-bottom: 4.1666666667vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos__photo {
      margin-bottom: 8.3333333333vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos__photo {
      margin-bottom: 8.3333333333vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos__photo:first-child {
      margin-top: 0; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos__photo:first-child {
      margin-top: 0; } }

@media (orientation: portrait) and (max-width: 700px) {
  .photos__intro {
    text-align: left; } }
@media (orientation: landscape) and (max-height: 700px) {
  .photos__intro {
    text-align: center; } }
@media (orientation: portrait) and (min-width: 701px) {
  .photos__intro {
    text-align: center; } }
@media (orientation: landscape) and (min-height: 701px) {
  .photos__intro {
    text-align: center; } }
@media (orientation: portrait) and (max-width: 700px) {
  .photos__intro {
    margin-left: 0vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .photos__intro {
    margin-left: 0vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .photos__intro {
    margin-left: 0vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .photos__intro {
    margin-left: 0vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .photos__intro {
    margin-top: 0vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .photos__intro {
    margin-top: 4.1666666667vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .photos__intro {
    margin-top: 0vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .photos__intro {
    margin-top: 0vh; } }
@media (orientation: portrait) and (max-width: 700px) {
  .photos__intro {
    width: 83.3333333333vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .photos__intro {
    width: 66.6666666667vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .photos__intro {
    width: 50vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .photos__intro {
    width: 33.3333333333vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .photos__intro {
    margin-bottom: 0vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .photos__intro {
    margin-bottom: 4.1666666667vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .photos__intro {
    margin-bottom: 0vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .photos__intro {
    margin-bottom: 0vh; } }

.book__photo {
  border-radius: 50%;
  order: 1; }
  @media (orientation: portrait) and (max-width: 700px) {
    .book__photo {
      margin-top: 8.3333333333vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book__photo {
      margin-top: 0vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book__photo {
      margin-top: 0vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book__photo {
      margin-top: 0vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .book__photo {
      width: 33.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book__photo {
      width: 25vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book__photo {
      width: 12.5vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book__photo {
      width: 8.3333333333vw; } }

@media (orientation: portrait) and (max-width: 700px) {
  .book__intro {
    text-align: center; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__intro {
    text-align: right; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__intro {
    text-align: justify; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__intro {
    text-align: justify; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__intro {
    order: 2; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__intro {
    order: 3; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__intro {
    order: 2; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__intro {
    order: 2; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__intro {
    margin-top: 4.1666666667vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__intro {
    margin-top: 0vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__intro {
    margin-top: 4.1666666667vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__intro {
    margin-top: 4.1666666667vh; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__intro {
    width: 83.3333333333vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__intro {
    width: 45.8333333333vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__intro {
    width: 50vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__intro {
    width: 33.3333333333vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__intro {
    margin-right: 0vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__intro {
    margin-right: 4.1666666667vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__intro {
    margin-right: 0vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__intro {
    margin-right: 0vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__intro {
    margin-bottom: 0vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__intro {
    margin-bottom: 5.5555555556vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__intro {
    margin-bottom: 2.0833333333vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__intro {
    margin-bottom: 2.0833333333vh; } }

@media (orientation: portrait) and (max-width: 700px) {
  .book__contact {
    order: 3; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__contact {
    order: 2; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__contact {
    order: 3; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__contact {
    order: 3; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__contact {
    width: 83.3333333333vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__contact {
    width: 45.8333333333vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__contact {
    width: 50vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__contact {
    width: 33.3333333333vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__contact {
    margin-top: 6.25vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__contact {
    margin-top: 8.3333333333vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__contact {
    margin-top: 2.0833333333vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__contact {
    margin-top: 2.0833333333vh; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__contact {
    margin-bottom: 6.25vh; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__contact {
    margin-bottom: 0vh; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__contact {
    margin-bottom: 1.3888888889vh; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__contact {
    margin-bottom: 1.3888888889vh; } }

@media (orientation: portrait) and (max-width: 700px) {
  .book__contact__line {
    text-align: center; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__contact__line {
    text-align: center; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__contact__line {
    text-align: right; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__contact__line {
    text-align: right; } }

@media (orientation: portrait) and (max-width: 700px) {
  .book__estimate {
    text-align: center; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__estimate {
    text-align: right; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__estimate {
    text-align: right; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__estimate {
    text-align: right; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__estimate {
    order: 4; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__estimate {
    order: 4; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__estimate {
    order: 4; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__estimate {
    order: 4; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__estimate {
    width: 83.3333333333vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__estimate {
    width: 45.8333333333vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__estimate {
    width: 50vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__estimate {
    width: 33.3333333333vw; } }
@media (orientation: portrait) and (max-width: 700px) {
  .book__estimate {
    margin-right: 0vw; } }
@media (orientation: landscape) and (max-height: 700px) {
  .book__estimate {
    margin-right: 4.1666666667vw; } }
@media (orientation: portrait) and (min-width: 701px) {
  .book__estimate {
    margin-right: 0vw; } }
@media (orientation: landscape) and (min-height: 701px) {
  .book__estimate {
    margin-right: 0vw; } }

.book__paragraph {
  text-align: justify; }
  @media (orientation: portrait) and (max-width: 700px) {
    .book__paragraph {
      margin-top: 5.5555555556vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book__paragraph {
      margin-top: 5.5555555556vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book__paragraph {
      margin-top: 0vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book__paragraph {
      margin-top: 0vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .book__paragraph {
      width: 83.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book__paragraph {
      width: 58.3333333333vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book__paragraph {
      width: 66.6666666667vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book__paragraph {
      width: 66.6666666667vw; } }

.workshop__photo {
  background: url("../images/workshop.jpg");
  background-size: cover;
  background-position: center; }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__photo {
      border-radius: 0; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__photo {
      border-radius: 0; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__photo {
      border-radius: 50%; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__photo {
      border-radius: 50%; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__photo {
      width: 100vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__photo {
      width: 50vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__photo {
      width: 12.5vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__photo {
      width: 8.3333333333vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__photo {
      height: 41.6666666667vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__photo {
      height: 100vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__photo {
      height: 12.5vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__photo {
      height: 8.3333333333vw; } }

.workshop__paragraph {
  text-align: justify; }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__paragraph {
      margin-top: 5.5555555556vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__paragraph {
      margin-top: 8.3333333333vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__paragraph {
      margin-top: 4.1666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__paragraph {
      margin-top: 4.1666666667vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__paragraph {
      padding-left: 8.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__paragraph {
      padding-left: 6.25vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__paragraph {
      padding-left: 0vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__paragraph {
      padding-left: 0vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__paragraph {
      width: 83.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__paragraph {
      width: 37.5vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__paragraph {
      width: 50vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__paragraph {
      width: 33.3333333333vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__paragraph {
      padding-right: 8.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__paragraph {
      padding-right: 6.25vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__paragraph {
      padding-right: 0vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__paragraph {
      padding-right: 0vw; } }

.workshop__like {
  display: none;
  bottom: 0;
  display: flex; }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      position: fixed; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      position: fixed; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      position: relative; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      position: relative; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      flex-direction: column; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      flex-direction: column; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      flex-direction: row; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      flex-direction: row; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      justify-content: center; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      justify-content: flex-start; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      justify-content: flex-end; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      justify-content: flex-end; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      right: 16.6666666667vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      right: 8.3333333333vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      right: 0vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      right: 0vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      width: auto; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      width: auto; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      width: 50vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      width: 33.3333333333vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      height: 8.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      height: 6.9444444444vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      height: auto; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      height: auto; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      padding-top: 0vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      padding-top: 0vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      padding-top: 2.7777777778vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      padding-top: 2.7777777778vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      padding-right: 2.7777777778vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      padding-right: 6.25vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      padding-right: 0vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      padding-right: 0vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like {
      padding-bottom: 1.3888888889vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like {
      padding-bottom: 2.7777777778vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like {
      padding-bottom: 0vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like {
      padding-bottom: 0vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop__like iframe {
      height: 8.3333333333vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop__like iframe {
      height: 3.125vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop__like iframe {
      height: auto; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop__like iframe {
      height: auto; } }

.landing {
  position: fixed;
  float: left;
  width: 100vw;
  height: 100vh;
  background: url(../images/background.gif) center center no-repeat;
  background-size: cover;
  z-index: 3; }

.nav {
  position: fixed;
  float: left;
  flex-direction: column;
  align-items: center;
  z-index: 4;
  /* background is dark on mobile */ }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav {
      display: flex; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav {
      display: flex; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav {
      display: block; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav {
      display: block; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav {
      padding-left: 0vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav {
      padding-left: 0vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav {
      padding-left: 2.0833333333vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav {
      padding-left: 2.0833333333vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav {
      width: 100vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav {
      width: 100vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav {
      width: 8.3333333333vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav {
      width: 16.6666666667vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav {
      padding-top: 33.3333333333vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav {
      padding-top: 25vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav {
      padding-top: 16.6666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav {
      padding-top: 16.6666666667vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav {
      height: 100vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav {
      height: 100vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav {
      height: 66.6666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav {
      height: 66.6666666667vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .nav {
      background: rgba(0, 0, 0,0.85); } }
  @media (orientation: landscape) and (max-height: 700px) {
    .nav {
      background: rgba(0, 0, 0,0.85); } }
  @media (orientation: portrait) and (min-width: 701px) {
    .nav {
      background: 0; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .nav {
      background: 0; } }

.photos {
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos {
      padding-top: 0vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos {
      padding-top: 0vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos {
      padding-top: 16.6666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos {
      padding-top: 16.6666666667vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos {
      width: 100vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos {
      width: 100vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos {
      width: 66.6666666667vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos {
      width: 66.6666666667vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .photos {
      margin-left: 0vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .photos {
      margin-left: 0vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .photos {
      margin-left: 25vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .photos {
      margin-left: 25vw; } }

.book {
  position: relative;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  @media (orientation: portrait) and (max-width: 700px) {
    .book {
      flex-direction: column; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book {
      flex-direction: column; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book {
      flex-direction: column; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book {
      flex-direction: column; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .book {
      margin-top: 0vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book {
      margin-top: 12.5vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book {
      margin-top: 16.6666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book {
      margin-top: 16.6666666667vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .book {
      width: 100vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book {
      width: 50vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book {
      width: 66.6666666667vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book {
      width: 66.6666666667vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .book {
      height: auto; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book {
      height: 87.5vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book {
      height: auto; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book {
      height: auto; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .book {
      margin-left: 0vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .book {
      margin-left: 0vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .book {
      margin-left: 25vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .book {
      margin-left: 25vw; } }

.workshop {
  position: relative;
  float: left;
  display: flex; }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop {
      flex-direction: column; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop {
      flex-direction: row; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop {
      flex-direction: column; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop {
      flex-direction: column; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop {
      justify-content: flex-start; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop {
      justify-content: flex-start; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop {
      justify-content: center; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop {
      justify-content: center; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop {
      align-items: flex-start; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop {
      align-items: flex-start; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop {
      align-items: center; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop {
      align-items: center; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop {
      padding-top: 0vh; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop {
      padding-top: 0vh; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop {
      padding-top: 16.6666666667vh; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop {
      padding-top: 16.6666666667vh; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop {
      width: 100vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop {
      width: 100vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop {
      width: 66.6666666667vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop {
      width: 66.6666666667vw; } }
  @media (orientation: portrait) and (max-width: 700px) {
    .workshop {
      margin-left: 0vw; } }
  @media (orientation: landscape) and (max-height: 700px) {
    .workshop {
      margin-left: 0vw; } }
  @media (orientation: portrait) and (min-width: 701px) {
    .workshop {
      margin-left: 25vw; } }
  @media (orientation: landscape) and (min-height: 701px) {
    .workshop {
      margin-left: 25vw; } }

/* --- Javascript --- */
.hidden {
  display: none; }

.translucent {
  opacity: 0.3; }

/*# sourceMappingURL=styles.css.map */