@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Signika:400,300,600,700);
.row:before, .row:after, .clearfix:before, .clearfix:after {
  display: table;
  content: " "; }

.row:after, .clearfix:after {
  clear: both; }

.row, .clearfix {
  *zoom: 1; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: 'Signika', 'Helvetica Neue', arial;
  position: relative;
  background-color: #3f3f3f;
  /*height: 110vh;*/ }
  body.ua-android button#fullscreen {
    display: none; }

#app-canvas {
  /*height: 180vh;*/ }

button.icon {
  border-radius: 25%;
  padding: 6px 8px;
  line-height: 1em;
  font-size: 14px;
  font-family: sans-serif; }
  button.icon:focus {
    outline: none; }

button#fullscreen {
  position: absolute;
  bottom: 56px;
  right: 10px;
  z-index: 50;
  border: none;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid white;
  color: #3f3f3f;
  padding: 0.5em;
  transform: translateY(-50%), translateX(-50%);
  transition: bottom 0.25s;
  -webkit-transition: bottom 0.25s;
  display: none; }
  @media (min-width: 720px) {
    button#fullscreen {
      display: none; } }
  button#fullscreen:focus {
    outline: none; }
  button#fullscreen span.exit {
    display: none; }
  button#fullscreen.is-fullscreen {
    bottom: 10px; }
    button#fullscreen.is-fullscreen span.enter {
      display: none; }
    button#fullscreen.is-fullscreen span.exit {
      display: inline; }

.intro {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  min-height: 100vh;
  padding: 2.5vw;
  text-align: center;
  overflow: hidden;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
  background-color: #fff; }
  .intro img {
    max-width: 100%;
    height: auto;
    margin-bottom: 32px; }
  .intro p {
    font-size: 12pt; }
  .intro.transparent {
    opacity: 0;
    max-height: 1px;
    padding-bottom: 0;
    padding-top: 0; }
  .intro p.orientation-reminder {
    display: none; }
  @media all and (max-width: 720px) and (orientation: portrait) {
    .intro p.orientation-reminder {
      display: block; } }

#facts-container {
  max-height: 0px;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  background-color: #fff;
  position: relative; }
  #facts-container .marker-target {
    padding: 2vw 2vw 48px 2vw; }
    #facts-container .marker-target h1, #facts-container .marker-target h2, #facts-container .marker-target h3, #facts-container .marker-target h4, #facts-container .marker-target h5, #facts-container .marker-target p, #facts-container .marker-target li {
      color: #3f3f3f;
      font-family: 'Signika', 'Helvetica Neue', arial;
      margin-top: 0.5em;
      margin-bottom: 0.25em;
      line-height: 1.4em; }
    #facts-container .marker-target h1 {
      font-size: 19pt; }
    #facts-container .marker-target h2 {
      font-size: 17pt; }
    #facts-container .marker-target h3 {
      font-size: 15pt; }
    #facts-container .marker-target h4 {
      font-size: 13pt; }
    #facts-container .marker-target h1, #facts-container .marker-target h2, #facts-container .marker-target h3, #facts-container .marker-target h4, #facts-container .marker-target h5  {
      font-weight: 400; }
    #facts-container .marker-target p, #facts-container .marker-target li {
      font-weight: 300;
      font-size: 10pt;
      margin-bottom: 2em; }
      @media (min-width: 720px) {
        #facts-container .marker-target p, #facts-container .marker-target li {
          font-size: 12pt; } }
    #facts-container .marker-target img.alignright {
      float: right; }
    #facts-container .marker-target img.alignleft {
      float: left; }
    #facts-container .marker-target .marker-info {
      line-height: 1.2em; }
  #facts-container .content {
    padding-top: 32px; }
    #facts-container .content h1, #facts-container .content h2, #facts-container .content h3, #facts-container .content h4 {
      font-weight: 400; }
    #facts-container .content p {
      font-weight: 200; }
  #facts-container.active {
    max-height: 1999px; }
    #facts-container.active button.closes-facts {
      top: 10px;
      opacity: 1; }
  #facts-container button.closes-facts {
    border-radius: 50%;
    color: #44a64c;
    border: 0px;
    position: fixed;
    top: -50px;
    right: 10px;
    z-index: 10;
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    opacity: 0;
    background: url("../images/close.png");
    background-size: cover;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.9); }
  #facts-container .content {
    padding: 1em;
    width: 100vw; }

#map-container-outer {
  /*height: 100%;*/
  position: relative;
  background-color: #70d5b3; }
  #map-container-outer .scroll-overlay {
    background-color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 201;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0.6s;
    -webkit-transition: opacity 0.6s; }
    #map-container-outer .scroll-overlay p {
      position: absolute;
      top: 15vh;
      left: 10px;
      right: 10px;
      text-align: center;
      z-index: 300; }
    #map-container-outer .scroll-overlay.fade {
      opacity: 0; }
    #map-container-outer .scroll-overlay .cloud-left {
      background-image: url("../images/clouds-left.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 30%;
      bottom: 0px; }
    #map-container-outer .scroll-overlay .cloud-right {
      background: url("../images/clouds-right.png") right center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0px;
      left: 30%;
      right: 0px;
      bottom: 0px; }

.scroller {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  width: 5vw;
  background-color: red;
  display: block;
  display: none;
  z-index: 150;
  opacity: 0.5; }
  .scroller:before {
    content: '';
    width: 5vw;
    height: 5vw;
    top: 0px;
    right: 0px;
    position: absolute;
    background-color: blue; }
  .scroller:after {
    content: '';
    width: 5vw;
    height: 5vw;
    bottom: 0px;
    right: 0px;
    position: absolute;
    background-color: blue; }

#map-outer {
  position: relative;
  overflow: auto; }
  #map-outer button.zooms-map {
    background-color: rgba(255, 255, 255, 0.8);
    color: #44a64c;
    border: 1px solid #f0f9f1;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 15; }
    #map-outer button.zooms-map span {
      width: 32px;
      height: 32px; }
    #map-outer button.zooms-map span.zoom-in {
      display: block;
      background: url("../images/zoom-in.png") no-repeat;
      background-size: cover; }
    #map-outer button.zooms-map span.zoom-out {
      display: none;
      background: url("../images/zoom-out.png") no-repeat;
      background-size: cover; }
    #map-outer button.zooms-map.zoomed span.zoom-in {
      display: none; }
    #map-outer button.zooms-map.zoomed span.zoom-out {
      display: block; }
  #map-outer #map-container {
    overflow: scroll;
    position: relative;
    cursor: pointer; }
    #map-outer #map-container.admin .position-hud {
      position: absolute;
      font-size: 8pt;
      z-index: 100;
      transform: translateX(-50%) translateY(-100%);
      -webkit-transform: translateX(-50%) translateY(-100%);
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.8);
      padding: 4px; }
    #map-outer #map-container.admin .info-hud {
      display: none; }
      #map-outer #map-container.admin .info-hud.visible {
        display: none; }
    #map-outer #map-container .info-hud {
      position: absolute;
      font-size: 9pt;
      z-index: 100;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.8);
      padding: 4px;
      display: none;
      border-radius: 3px;
      line-height: 1.2em; }
      #map-outer #map-container .info-hud.visible {
        display: block; }
      #map-outer #map-container .info-hud span.name {
        font-weight: 700; }
      #map-outer #map-container .info-hud span.read-more {
        font-size: 8pt; }
    #map-outer #map-container .content {
      background-color: #000;
      width: 100vw;
      height: 56.25vw;
      background: url("../images/map-p.jpg") center center;
      background-size: 100vw 56.25vw;
      position: relative;
      transition: all 0.15s;
      -webkit-transition: all 0.15s; }
      #map-outer #map-container .content .color-map {
        background-color: #000;
        width: 100vw;
        height: 56.25vw;
        background: url("../images/map-c.jpg") center center;
        background-size: 100vw 56.25vw;
        position: relative;
        transition: all 0.15s;
        -webkit-transition: all 0.15s;
        opacity: 0; }
        #map-outer #map-container .content .color-map.visible {
          opacity: 1; }
      #map-outer #map-container .content .marker {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        border: 0.15vw solid #fff;
        width: 8px;
        height: 8px;
        margin-left: -4px;
        margin-top: -4px;
        transition: all 0.45s, border-radius 0.25s 0.4s;
        -webkit-transition: all 0.45s, border-radius 0.25s 0.4s; }
        @media all and (min-width: 820px) {
          #map-outer #map-container .content .marker {
            width: 16px;
            height: 16px;
            margin-left: -8px;
            margin-top: -8px; } }
        #map-outer #map-container .content .marker.loading {
          transition: all 0.45s;
          animation-name: pulse;
          animation-duration: 1.5s;
          animation-iteration-count: infinite;
          animation-timing-function: linear; }
@keyframes pulse {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.1; }
  100% {
    opacity: 1; } }
        #map-outer #map-container .content .marker.icon {
          background-color: transparent;
          border: none;
          width: 24px;
          height: 24px;
          margin-left: -24px;
          margin-top: -24px;
          background-size: 24px 24px !important; }
          @media all and (max-width: 820px) {
            #map-outer #map-container .content .marker.icon {
              width: 8px;
              height: 8px;
              margin-left: -12px;
              margin-top: -12px;
              background-size: 8px 8px !important; } }
        #map-outer #map-container .content .marker.icon-restaurant {
          background: url("../images/icon-restaurant.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-klocktorn {
          background: url("../images/icon-clock.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-badplats {
          background: url("../images/icon-swimming.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-buss {
          background: url("../images/icon-busstop.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-forskola {
          background: url("../images/icon-school.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-jaktfiske {
          background: url("../images/icon-fish.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-veterinar {
          background: url("../images/icon-veterinary.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-museum {
          background: url("../images/icon-museum.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-skola {
          background: url("../images/icon-school-2.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-info {
          background: url("../images/icon-info.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-hemsjukvard {
          background: url("../images/icon-medic.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-omradeskontor {
          background: url("../images/icon-office.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-aktivitetshus {
          background: url("../images/icon-activity.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-garage {
          background: url("../images/icon-garage.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-viltstyckeri {
          background: url("../images/icon-butcher.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-luftteknik {
          background: url("../images/icon-ventilation.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-ternstedtinvent {
          background: url("../images/icon-construction.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-vastervikskommunproduktionskok {
          background: url("../images/icon-cooking.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-landstingettvatteri {
          background: url("../images/icon-washing.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-vardbyggnader {
          background: url("../images/icon-jail.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-lagenheter {
          background: url("../images/icon-apartments.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-idrottsplats {
          background: url("../images/icon-football.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-site_taken, #map-outer #map-container .content .marker.icon-site_booked, #map-outer #map-container .content .marker.icon-site_built {
          width: 8px;
          height: 8px;
          margin-left: -4px;
          margin-top: -4px;
          background-size: 8px 8px !important;
          border-radius: 0px; }
          @media (min-width: 820px) {
            #map-outer #map-container .content .marker.icon-site_taken, #map-outer #map-container .content .marker.icon-site_booked, #map-outer #map-container .content .marker.icon-site_built {
              width: 16px;
              height: 16px;
              margin-left: -8px;
              margin-top: -8px;
              background-size: 16px 16px !important; } }
        #map-outer #map-container .content .marker.icon-site_taken {
          background: url("../images/icon-sold.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-site_booked {
          background: url("../images/icon-booked.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-site_built {
          background: url("../images/icon-sold.png") center center no-repeat; }
        #map-outer #map-container .content .marker.icon-tomt.loading {
          border-radius: 4px;
          background-color: #E0DAFF;
          transition: all 0.45s;
          animation-name: rotate;
          animation-duration: 1.5s;
          animation-iteration-count: infinite;
          animation-timing-function: linear; }
@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
        #map-outer #map-container .content .marker.icon-tomt.active {
          top: 0px;
          left: 0px !important;
          margin: 0;
          top: 0px !important;
          border-radius: 0px;
          width: 100%;
          height: 2px;
          border: 2px solid transparent; }
        #map-outer #map-container .content .marker .marker-target {
          display: none; }
    #map-outer #map-container .interactive-content .car-1 {
      width: 0.6vw;
      height: 0.36vw;
      margin-top: -3px;
      margin-left: -5px;
      background-color: red;
      position: absolute;
      background: url("../images/car-red.png") center center no-repeat;
      background-size: 0.6vw 0.36vw;
      top: 25px;
      left: 25px;
      -webkit-animation: car-travel 20s infinite;
      /* Safari 4+ */
      animation: car-travel 20s infinite;
      /* IE 10+, Fx 29+ */
      animation-timing-function: linear; }
@-webkit-keyframes car-travel {
  0% {
    top: 100%;
    left: 88%; }
  30% {
    top: 89.5%;
    left: 75.5%; }
  36% {
    top: 86.61%;
    left: 74.64%; }
  42% {
    top: 85.58%;
    left: 72.36%;
    transform: rotateZ(0deg); }
  80% {
    top: 70.52%;
    left: 55%; }
  90% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    top: 70%;
    left: 50%;
    opacity: 0; } }
    #map-outer #map-container .interactive-content .boat-1 {
      width: 1.6vw;
      height: 1.28vw;
      position: absolute;
      top: 25px;
      left: 25px;
      background: url("../images/boat-sail.png") center center no-repeat;
      background-size: 1.6vw 1.28vw;
      -webkit-animation: boat-1-travel 120s infinite;
      /* Safari 4+ */
      animation: boat-1-travel 120s infinite;
      /* IE 10+, Fx 29+ */
      animation-timing-function: linear; }
@-webkit-keyframes boat-1-travel {
  0% {
    top: -2%;
    left: 36%; }
  100% {
    top: 55%;
    left: 115%; } }
    #map-outer #map-container .interactive-content .boat-2 {
      width: 1.6vw;
      height: 1.28vw;
      position: absolute;
      top: 25px;
      left: 25px;
      background: url("../images/boat-motor.png") center center no-repeat;
      background-size: 1.6vw 1.28vw;
      -webkit-animation: boat-2-travel 120s infinite;
      /* Safari 4+ */
      animation: boat-2-travel 120s infinite;
      /* IE 10+, Fx 29+ */
      animation-timing-function: linear; }
@-webkit-keyframes boat-2-travel {
  0% {
    top: -2%;
    left: 36%; }
  20% {
    top: -2%;
    left: 40%; }
  100% {
    top: 50%;
    left: 115%; } }
    #map-outer #map-container .interactive-content .balloon {
      width: 179px;
      height: 30px;
      background-color: red;
      position: absolute;
      top: 25px;
      left: 25px;
      background: url("../images/airplane.png") center center no-repeat;
      background-size: 179px 30px;
      -webkit-animation: balloon-travel 120s infinite;
      /* Safari 4+ */
      animation: balloon-travel 120s infinite;
      /* IE 10+, Fx 29+ */
      animation-timing-function: linear; }
@-webkit-keyframes balloon-travel {
  0% {
    top: 12%;
    left: 101%; }
  20% {
    /*top: 14%;*/ }
  40% {
    /*top: 10%;*/ }
  60% {
    /*top: 15%;*/ }
  80% {
    /*top: 13%;*/ }
  100% {
    top: 10%;
    left: -5%; } }
#focal {
  text-align: center; }

button.show-pricing {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: 9pt; }
  @media (min-width: 720px) {
    button.show-pricing {
      font-size: 11pt; } }
  button.show-pricing:focus {
    outline: none;
    background-color: white; }
  button.show-pricing .toggles.hidden {
    display: none; }

#bottom-detector {
  width: 100vw;
  height: 2px;
  background-color: transparent;
  position: absolute;
  bottom: 2px;
  left: 0px;
  right: 0px;
  z-index: 400; }

/*img {
  width: 1600px;
  height: auto;

}
img {
  max-width: 100%;
  height: auto;
}*/
/*iframe {
  width: 2200px;
  height: 2200px;
  border: 2px solid #3f3f3f;
  margin: auto;
  margin-top: 32px;
}*/