body,
html,
.wrap {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  color: white; }

.pohjanmaan-banner {
  position: absolute;
  top: 20vh;
  right: 1vw;
  z-index: 80; }
  .pohjanmaan-banner img {
    width: 200px; }
    @media (max-width: 1199px) {
      .pohjanmaan-banner img {
        width: 150px; } }
    @media (max-width: 800px) {
      .pohjanmaan-banner img {
        width: 120px; } }
    @media (max-width: 700px) {
      .pohjanmaan-banner img {
        width: 150px; } }
  @media (max-width: 700px) {
    .pohjanmaan-banner {
      top: 45%;
      transform: translate(0, -50%); } }

#index-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  background-size: cover;
  background-position: center;
  z-index: 0; }
  #index-bg:after {
    display: block;
    content: "";
    z-index: 15;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.3);
    /* black 0.4 */ }
  #index-bg .slideshow-main {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh !important;
    overflow: hidden;
    pointer-events: none; }
    #index-bg .slideshow-main video {
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 2;
      transform: translateX(-50%) translateY(-50%); }

#index-page {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  z-index: 20; }
  #index-page .content {
    height: 100vh; }
    #index-page .content .logo {
      width: 400px;
      max-width: 60vw; }
    #index-page .content .m-c {
      display: inline-block;
      position: relative;
      padding-top: 55px;
      height: 80px;
      margin-top: 40px;
      color: white;
      font-weight: 400;
      font-size: 20px;
      text-transform: uppercase;
      text-decoration: none !important;
      outline: none !important;
      text-align: left;
      -webkit-filter: invert(0.9);
      filter: invert(0.9); }
      #index-page .content .m-c:before {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 40px;
        height: 40px;
        opacity: 0.8;
        -webkit-transition: 200ms;
        -moz-transition: 200ms;
        -ms-transition: 200ms;
        -o-transition: 200ms;
        transition: 200ms;
        background-repeat: no-repeat;
        background-position: top left; }
      #index-page .content .m-c.m-c-1:before {
        background-image: url("/images/site/m-c-1.png"); }
      #index-page .content .m-c.m-c-2:before {
        background-image: url("/images/site/m-c-2.png"); }
      #index-page .content .m-c.m-c-3:before {
        background-image: url("/images/site/m-c-3.png"); }
      #index-page .content .m-c.m-c-4:before {
        background-image: url("/images/site/m-c-4.png"); }
      #index-page .content .m-c.m-c-5:before {
        background-image: url("/images/site/m-c-5.png"); }
      #index-page .content .m-c.m-c-6:before {
        background-image: url("/images/site/m-c-6.png"); }
      #index-page .content .m-c.m-c-7:before {
        background-image: url("/images/site/m-c-7.png"); }
      #index-page .content .m-c.m-c-8:before {
        background-image: url("/images/site/m-c-8.png"); }
      #index-page .content .m-c:hover:before {
        opacity: 1; }
    #index-page .content .eff1 {
      position: relative; }
      #index-page .content .eff1:hover:before {
        opacity: 1; }
      #index-page .content .eff1:before {
        content: "";
        pointer-events: none;
        background: url("/images/site/effects/ws1.png");
        background-repeat: no-repeat;
        background-size: 150px;
        background-position: 50% 50%;
        top: 50%;
        left: 50%;
        width: 150px;
        height: 120px;
        margin-top: -60px;
        margin-left: -75px;
        opacity: 0;
        -webkit-transition: 350ms;
        -moz-transition: 350ms;
        -ms-transition: 350ms;
        -o-transition: 350ms;
        transition: 350ms;
        position: absolute; }
    #index-page .content .eff2 {
      position: relative; }
      #index-page .content .eff2:hover:before {
        opacity: 0.9;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
      #index-page .content .eff2:hover:after {
        opacity: 0.8;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
      #index-page .content .eff2:before {
        content: "";
        pointer-events: none;
        background: url("/images/site/effects/ww1.png");
        background-repeat: no-repeat;
        background-size: 150px;
        background-position: 50% 50%;
        width: 150px;
        height: 130px;
        top: 70%;
        left: 30%;
        margin-top: -60px;
        margin-left: -75px;
        opacity: 0;
        -webkit-transition: 350ms;
        -moz-transition: 350ms;
        -ms-transition: 350ms;
        -o-transition: 350ms;
        transition: 350ms;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        position: absolute;
        z-index: -1; }
      #index-page .content .eff2:after {
        content: "";
        pointer-events: none;
        background: url("/images/site/effects/ww2.png");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: 50% 50%;
        width: 100px;
        height: 100px;
        top: 38%;
        left: 65%;
        margin-top: -50px;
        margin-left: -50px;
        opacity: 0;
        -webkit-transition: 650ms;
        -moz-transition: 650ms;
        -ms-transition: 650ms;
        -o-transition: 650ms;
        transition: 650ms;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        position: absolute;
        z-index: -1; }
    #index-page .content .eff3 {
      position: relative; }
      #index-page .content .eff3:hover:before {
        width: 150px;
        height: 150px;
        margin-top: -75px;
        margin-left: -75px;
        background: rgba(255, 255, 255, 0);
        opacity: 1; }
      #index-page .content .eff3:before {
        content: "";
        pointer-events: none;
        background: rgba(255, 255, 255, 0.8);
        top: 50%;
        left: 50%;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px;
        opacity: 0;
        -webkit-transition: 350ms;
        -moz-transition: 350ms;
        -ms-transition: 350ms;
        -o-transition: 350ms;
        transition: 350ms;
        position: absolute; }
    #index-page .content .eff4:hover .m-c:before {
      top: -7px; }
    #index-page .content .eff5 .m-c {
      -webkit-transition: 250ms;
      -moz-transition: 250ms;
      -ms-transition: 250ms;
      -o-transition: 250ms;
      transition: 250ms;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
    #index-page .content .eff5:hover .m-c {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1); }
  #index-page .dwexpo {
    position: absolute;
    bottom: 10px;
    left: 10px; }

@media (max-width: 767px) {
  #index-page .dwexpo {
    bottom: 50%;
    transform: translateY(20%); }
    #index-page .dwexpo img {
      width: 90px; } }
@media (max-width: 767px) {
  .menu .nav {
    width: 100vw;
    right: -100vw; } }
/*@media (min-aspect-ratio: 16 / 9) {*/
/*  .slideshow-main {*/
/*    height: 300%;*/
/*    top: -100%; } }*/
/*@media (max-aspect-ratio: 16 / 9) {*/
/*  .slideshow-main {*/
/*    width: 300%;*/
/*    left: -100%; } }*/

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