/** FONTS **/
.white {
  color: white; }

.black {
  color: #292a34; }

.primary {
  color: #3950ff; }

.secondary {
  color: #fff3b6; }

.tiertiary {
  color: #ff6e57; }

.black-faded {
  color: #656780; }

.primary-faded {
  color: #6171e6; }

.secondary-faded {
  color: #cccccc; }

.tiertiary-faded {
  color: #b34c3d; }

/** BACKGROUNDS **/
.bg-black {
  background: #292a34; }

.bg-primary {
  background: #3950ff; }

.bg-secondary {
  background: #fff3b6; }

.bg-tiertiary {
  background: #ff6e57; }

.bg-black-faded {
  background: #656780; }

.bg-primary-faded {
  background: #6171e6; }

.bg-secondary-faded {
  background: #cccccc; }

.bg-tiertiary-faded {
  background: #b34c3d; }

/** ASSETS **/
.bold {
  font-weight: 900; }

.map-assets-d-none {
  display: none; }

.d-flex {
  display: flex; }

.d-none {
  display: none; }

.flex-col-sd-row,
.flex-col-md-row,
.flex-col-lg-row,
.flex-col-xl-row {
  flex-direction: column; }

.flex-colrev-md-row {
  flex-direction: column-reverse; }

.flex-row-sd-col,
.flex-row-md-col,
.flex-row {
  flex-direction: row; }

.flex-col {
  flex-direction: column; }

.flex-wrap {
  flex-wrap: wrap; }

.space-around {
  justify-content: space-around; }

.space-between {
  justify-content: space-between; }

.justify-center {
  justify-content: center; }

.justify-around {
  justify-content: space-around; }

.text-center-sd-left {
  text-align: center; }

.align-items-center {
  align-items: center; }

.align-items-end {
  align-items: end; }

.d-inline-md-none {
  display: inline; }

.d-none-md-inline {
  display: none; }

.relative {
  position: relative; }

.line-break {
  content: "\a"; }

.margin-top-20-md {
  margin-top: 4px; }

.margin-top-20-sd-0 {
  margin-top: 20px; }

/** LAYOUT **/
html {
  font-size: 14px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
  overflow-y: scroll;
  overflow-x: hidden; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; }

body {
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
  overflow-y: scroll;
  overflow-x: hidden; }

p {
  letter-spacing: .3px;
  margin: 10px 0 0 0; }

header, main {
  min-height: 100vh;
  justify-content: space-around;
  align-items: center; }

main {
  max-width: 100vw;
  padding: 20px 10px; }

header {
  padding: 40px 40px;
  height: 100vh;
  overflow: hidden; }
  header .blob-container {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100vh; }
    header .blob-container .blob {
      width: calc(100% + 100px);
      position: relative;
      right: -100px;
      top: 100px; }
  header .stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 30vh;
    overflow: hidden; }

header .text {
  max-width: 380px;
  max-height: 380px;
  width: 100%;
  padding: 20px;
  z-index: 1450;
  position: absolute;
  top: 50%;
  height: calc(50% - 20px); }

header .header_right_square {
  width: 100%;
  top: -40px;
  position: relative;
  height: 100%; }
  header .header_right_square .village {
    position: absolute;
    top: 0;
    right: -70px;
    max-height: 54vh; }

.smallImg {
  height: 100px; }

.main-explainations {
  position: relative; }

header div h2 {
  font-size: 1.35rem;
  font-family: 'Merriweather', serif;
  font-weight: 900;
  margin-bottom: 20px; }
header div .margin-top-20 {
  margin-top: 20px; }

header .header_right_square h1 {
  font-size: 2.5rem;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  font-weight: 900; }

input {
  padding: 10px;
  width: 162px;
  height: 50px;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  letter-spacing: 1.1px;
  font-weight: 600; }

#playButton {
  padding: 10px;
  width: 162px;
  height: 50px;
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  letter-spacing: 1.1px;
  font-weight: 600;
  background: #ff6e57;
  color: #fff; }

#puzzle {
  touch-action: none; }

.place_icon {
  max-width: 80px;
  max-height: 80px; }

.place_on_map {
  transform-origin: center; }

.greyed-border {
  background: #f1e8bb;
  box-shadow: inset 0 0 10px #292a3422;
  border: 1px solid #292a3422; }

.container_image {
  transition: all ease-in-out .15s; }
  .container_image:hover {
    transform: scale(1.2) translateX(-100%); }

.cursor-pointer {
  cursor: pointer; }

@media screen and (orientation: portrait) {
  .main-map {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 80px);
    min-width: 300px;
    position: relative;
    top: 0; } }
@media screen and (orientation: landscape) and (max-width: 767px) {
  .main-map {
    height: auto;
    width: auto;
    max-height: 95vh;
    max-width: 95vw; } }
@media screen and (orientation: landscape) and (min-width: 768px) {
  .main-map {
    height: auto;
    width: auto;
    max-height: 95vh;
    max-width: calc(100vw - 400px); } }
.main-explainations {
  width: 100%;
  padding: 0 40px;
  font-weight: 400;
  max-width: 460px; }
  .main-explainations .explainations-buttons {
    position: relative;
    bottom: 0;
    height: 120px; }

.coworkers-list {
  width: 100%;
  padding: 40px;
  background: url(./assets/bg.png);
  background-repeat: repeat;
  padding-bottom: 80px; }
  .coworkers-list .coworker-container {
    width: 100%;
    margin-top: 40px;
    max-width: 1400px; }
    .coworkers-list .coworker-container .coworker {
      width: 100%;
      max-width: 612px;
      margin: 0; }
      .coworkers-list .coworker-container .coworker .coworker-thumbnail {
        height: 150px;
        width: 150px;
        background: #3950ff;
        margin: 20px 50px;
        border-radius: 100px;
        overflow: visible; }
      .coworkers-list .coworker-container .coworker-text {
        width: 100%;
        margin-left: 10px; }
      .coworkers-list .coworker-container .coworker-place {
        margin: 20px 60px 20px 0;
        background: #3950ff; }

.arrow-container {
  height: 1px;
  overflow: visible;
  width: 100%;
  text-align: center; }
  .arrow-container .arrow {
    position: relative;
    margin: 0 auto;
    top: -70px; }

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

.side-img {
  position: relative;
  right: 0;
  top: 30px;
  transform: translateX(-100%); }

.container_image_bravo {
  position: absolute;
  z-index: 9000; }

.bravo {
  transform: translate(-50%, -50%) scale(0);
  transition: all 200ms ease-in; }

.bravo-fadein {
  transform: translate(-50%, -50%) scale(1); }

footer {
  text-align: center;
  padding: 10px; }

footer p {
  margin: 10px 0 0 0; }

footer a,
footer a:hover,
footer a:visited,
footer a:active {
  font-weight: 600;
  color: white; }

footer a {
  text-decoration: none; }

footer a:hover,
footer a:visited,
footer a:active {
  text-decoration: underline; }

.fade-in {
  animation: 600ms ease-in-out 1 running fade-in; }

.fade-out {
  animation: 400ms ease-in-out 1 running fade-out; }

@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fade-out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
.bravo-star {
  color: #ff6e57;
  display: inline-block; }

.CWrotation {
  animation: 750ms linear infinite CWrotation; }

@keyframes CWrotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
.falling {
  animation: 750ms ease-in 1 fallingStar; }

@keyframes fallingStar {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(50%, 50%); } }
.nudge-vert {
  animation: 1200ms ease-in-out infinite alternate nudgeVert;
  transition: all ease-in-out .3s; }
  .nudge-vert:hover {
    animation: unset;
    transform: scale(1.2) translateY(8px); }

@keyframes nudgeVert {
  0% {
    transform: translateY(0); }
  10% {
    transform: translateY(4px); }
  20% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } }
@media screen and (min-width: 576px) and (orientation: portrait) {
  .flex-col-sd-row {
    flex-direction: row; }

  .flex-row-sd-col {
    flex-direction: column; }

  .text-center-sd-left {
    text-align: left; }

  header .header_right_square h1 {
    font-size: 3.4em; }

  header div h2 {
    font-size: 1.7rem;
    margin-bottom: 10px; }

  .main-explainations {
    padding: 0;
    margin-right: 20px; } }
@media screen and (min-width: 576px) and (orientation: landscape) {
  .flex-col-sd-row {
    flex-direction: row; }

  .flex-row-sd-col {
    flex-direction: column; }

  .text-center-sd-left {
    text-align: left; }

  .margin-top-20-sd-0 {
    margin: 20px 0; }

  header .text {
    top: unset;
    left: 30px; }
  header .header_right_square .village {
    top: 70px; } }
@media screen and (min-width: 768px) and (orientation: portrait) {
  header .header_right_square {
    top: 0px;
    position: relative; }
    header .header_right_square .village {
      position: relative;
      max-height: 85vh;
      z-index: 1300;
      right: -11vw;
      max-width: 85vw;
      width: auto; } }
@media screen and (min-width: 768px) and (min-height: 750px) {
  .smallImg {
    height: auto;
    width: 300px; } }
@media screen and (min-width: 768px) and (orientation: landscape) {
  .margin-top-20-md {
    margin-top: 20px; }

  header, main {
    flex-direction: row; }

  main {
    padding: 40px 40px; }

  .flex-colrev-md-row,
  .flex-col-md-row {
    flex-direction: row; }

  .flex-row-md-col {
    flex-direction: column; }

  .d-inline-md-none {
    display: none; }

  .d-none-md-inline {
    display: inline; }

  .arrow-container {
    height: 1px;
    overflow: visible;
    width: 100%;
    text-align: center; }
    .arrow-container .arrow {
      position: relative;
      top: -70px; }

  header .blob-container {
    height: calc(100vh - 30%);
    top: 30%;
    width: 63%;
    overflow: hidden; }
  header .text {
    position: unset;
    top: unset; }
  header .header_right_square {
    width: 50%; }
    header .header_right_square .scenery {
      position: relative;
      top: 30px;
      right: 0; }
      header .header_right_square .scenery .village {
        max-height: 65vh;
        z-index: 1300;
        max-width: 85vw;
        width: auto;
        top: 20vh; }

  .main-explainations {
    width: 300px;
    font-weight: 400; }

  main {
    padding-left: 20px; } }
@media screen and (min-width: 992px) {
  .flex-col-lg-row {
    flex-direction: row; }

  main {
    padding-left: 50px; }

  .coworker {
    width: 48%; } }
@media screen and (min-width: 1200px) {
  .flex-col-xl-row {
    flex-direction: row; }

  header .village {
    max-height: unset;
    top: unset;
    bottom: 5vh;
    right: -2vw;
    height: auto; }

  main {
    padding-left: 70px; } }
/*# sourceMappingURL=styles.css.map */

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