/* ======== Base HTML & body ======== */

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

html {
  width: 100%;
  height: 100%;

  /* Force page width to be viewport width at all times. */
  font-size: calc(100vw / 240);
}

body {
  color: #212121;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2rem;

  background-color: #ffffff;

  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

#landing-page {
  /* Scale the entire container from the top-left corner */
  transform-origin: top left;

  width: 240rem;

  /* Position the container in the normal page flow */
  position: relative;
  left: 0;
  top: 0;
  /*
  transform: scale(calc(100vw / 3840px));
  height: calc(15809px * (100vw / 3840px));
  */
}

.menu-link:hover::before {
  opacity: 0.8;
}

.menu-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Create the border on the pseudo-element */
  border: 0.5rem solid #00b0c4;
  border-radius: 1.25rem; /* Match the parent's radius */

  /* IMPORTANT: Ensures the border stays inside the 100% width/height */
  box-sizing: border-box;

  /* Hide it by default and add a transition */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.menu-link:hover::before {
  opacity: 0.8;
  z-index: 5;
}

.hover-scale-lg,
.hover-scale {
  z-index: 5;
  transition: transform 0.15s ease-in-out;
}

.hover-scale:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 10;
}

.hover-scale-lg:hover {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
  z-index: 10;
}

/* Required for page scaling. */
img {
  width: 100%;
  height: 100%;
}

/* ==== Images ==== */

#landing-01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 240rem;
  height: 4.9375rem;
}

#landing-01002 {
  position: absolute;
  left: 0;
  top: 4.9375rem;
  width: 6.75rem;
  height: 129.875rem;
}

#landing-03 {
  position: absolute;
  left: 6.75rem;
  top: 4.9375rem;
  width: 28.75rem;
  height: 9.4375rem;
}

#landing-04 {
  position: absolute;
  left: 35.5rem;
  top: 4.9375rem;
  width: 27.625rem;
  height: 9.4375rem;
}

#landing-05 {
  position: absolute;
  left: 63.125rem;
  top: 4.9375rem;
  width: 22.3125rem;
  height: 9.4375rem;
}

#landing-06 {
  position: absolute;
  left: 85.4375rem;
  top: 4.9375rem;
  width: 26.25rem;
  height: 9.4375rem;
}

#landing-07 {
  position: absolute;
  left: 111.6875rem;
  top: 4.9375rem;
  width: 18.4375rem;
  height: 9.4375rem;
}

#landing-08 {
  position: absolute;
  left: 130.125rem;
  top: 4.9375rem;
  width: 22.375rem;
  height: 9.4375rem;
}

#landing-01009 {
  position: absolute;
  left: 152.5rem;
  top: 4.9375rem;
  width: 57.25rem;
  height: 129.875rem;
}

#landing-10 {
  position: absolute;
  left: 209.75rem;
  top: 4.9375rem;
  width: 25.375rem;
  height: 9.125rem;
}

#landing-01011 {
  position: absolute;
  left: 235.125rem;
  top: 4.9375rem;
  width: 4.875rem;
  height: 129.875rem;
}

#landing-01012 {
  position: absolute;
  left: 209.75rem;
  top: 14.0625rem;
  width: 25.375rem;
  height: 120.75rem;
}

#landing-01013 {
  position: absolute;
  left: 6.75rem;
  top: 14.375rem;
  width: 145.75rem;
  height: 83.5625rem;
}

#landing-01014 {
  position: absolute;
  left: 6.75rem;
  top: 97.9375rem;
  width: 9.8125rem;
  height: 36.875rem;
}

#landing-15 {
  position: absolute;
  left: 16.5625rem;
  top: 97.9375rem;
  width: 36.5625rem;
  height: 9.625rem;
}

#landing-01016 {
  position: absolute;
  left: 53.125rem;
  top: 97.9375rem;
  width: 99.375rem;
  height: 36.875rem;
}

#landing-01017 {
  position: absolute;
  left: 16.5625rem;
  top: 107.5625rem;
  width: 36.5625rem;
  height: 27.25rem;
}

#sisaltokirjasto {
  position: absolute;
  left: 0;
  top: 134.8125rem;
  width: 240rem;
  height: 23.3125rem;
}

#landing-02019 {
  position: absolute;
  left: 0;
  top: 158.125rem;
  width: 178.125rem;
  height: 46.6875rem;
}

#landing-20 {
  position: absolute;
  left: 178.125rem;
  top: 158.125rem;
  width: 36.4375rem;
  height: 9.5rem;
}

#landing-02021 {
  position: absolute;
  left: 214.5625rem;
  top: 158.125rem;
  width: 25.4375rem;
  height: 46.6875rem;
}

#landing-02022 {
  position: absolute;
  left: 178.125rem;
  top: 167.625rem;
  width: 36.4375rem;
  height: 37.1875rem;
}

#landing-23 {
  position: absolute;
  left: 0;
  top: 204.8125rem;
  width: 240rem;
  height: 108.375rem;
}

#landing-24 {
  position: absolute;
  left: 0;
  top: 313.1875rem;
  width: 240rem;
  height: 6.6875rem;
}

#landing-25 {
  position: absolute;
  left: 0;
  top: 319.875rem;
  width: 178.125rem;
  height: 35.1875rem;
}

#landing-26 {
  position: absolute;
  left: 178.125rem;
  top: 319.875rem;
  width: 36.4375rem;
  height: 9.375rem;
}

#landing-27 {
  position: absolute;
  left: 214.5625rem;
  top: 319.875rem;
  width: 25.4375rem;
  height: 35.1875rem;
}

#landing-28 {
  position: absolute;
  left: 178.125rem;
  top: 329.25rem;
  width: 36.4375rem;
  height: 25.8125rem;
}

#tutkimukset {
  position: absolute;
  left: 0;
  top: 355.0625rem;
  width: 240rem;
  height: 162rem;
}

#asiakkaitamme {
  position: absolute;
  left: 0;
  top: 517.0625rem;
  width: 240rem;
  height: 89.5625rem;
}

#landing-31 {
  position: absolute;
  left: 0;
  top: 606.625rem;
  width: 16.5625rem;
  height: 36.6875rem;
}

#landing-32 {
  position: absolute;
  left: 16.5625rem;
  top: 606.625rem;
  width: 36.5625rem;
  height: 9.5rem;
}

#landing-33 {
  position: absolute;
  left: 53.125rem;
  top: 606.625rem;
  width: 186.875rem;
  height: 36.6875rem;
}

#landing-34 {
  position: absolute;
  left: 16.5625rem;
  top: 616.125rem;
  width: 36.5625rem;
  height: 27.1875rem;
}

#hinnasto {
  position: absolute;
  left: 0;
  top: 643.3125rem;
  width: 240rem;
  height: 97.0625rem;
}

#landing-36 {
  position: absolute;
  left: 0;
  top: 740.375rem;
  width: 17.8125rem;
  height: 49.375rem;
}

#landing-37 {
  position: absolute;
  left: 17.8125rem;
  top: 740.375rem;
  width: 36.4375rem;
  height: 9.625rem;
}

#landing-38 {
  position: absolute;
  left: 54.25rem;
  top: 740.375rem;
  width: 185.75rem;
  height: 49.375rem;
}

#landing-39 {
  position: absolute;
  left: 17.8125rem;
  top: 750rem;
  width: 36.4375rem;
  height: 39.75rem;
}

#landing-40 {
  position: absolute;
  left: 0;
  top: 789.75rem;
  width: 240rem;
  height: 42.0625rem;
}

#ota-yhteytta {
  position: absolute;
  left: 0;
  top: 831.8125rem;
  width: 240rem;
  height: 42.625rem;
}

#landing-42 {
  position: absolute;
  left: 0;
  top: 874.4375rem;
  width: 240rem;
  height: 6.1875rem;
}

#landing-43 {
  position: absolute;
  left: 0;
  top: 880.625rem;
  width: 61.5625rem;
  height: 90.875rem;
}

#landing-44 {
  position: absolute;
  left: 61.5625rem;
  top: 880.625rem;
  width: 40.125rem;
  height: 52.5625rem;
}

#landing-45 {
  position: absolute;
  left: 101.6875rem;
  top: 880.625rem;
  width: 36.6875rem;
  height: 74.625rem;
}

#landing-46 {
  position: absolute;
  left: 138.375rem;
  top: 880.625rem;
  width: 35.9375rem;
  height: 52.5625rem;
}

#landing-47 {
  position: absolute;
  left: 174.3125rem;
  top: 880.625rem;
  width: 65.6875rem;
  height: 90.875rem;
}

#landing-48 {
  position: absolute;
  left: 61.5625rem;
  top: 933.1875rem;
  width: 40.125rem;
  height: 38.3125rem;
}

#landing-49 {
  position: absolute;
  left: 138.375rem;
  top: 933.1875rem;
  width: 35.9375rem;
  height: 38.3125rem;
}

#landing-50 {
  position: absolute;
  left: 101.6875rem;
  top: 955.25rem;
  width: 36.6875rem;
  height: 9.6875rem;
}

#landing-51 {
  position: absolute;
  left: 101.6875rem;
  top: 964.9375rem;
  width: 36.6875rem;
  height: 6.5625rem;
}

#landing-52 {
  position: absolute;
  left: 0;
  top: 971.5rem;
  width: 240rem;
  height: 4rem;
}

#landing-53 {
  position: absolute;
  left: 0;
  top: 975.5rem;
  width: 13.6875rem;
  height: 12.5625rem;
}

#landing-54 {
  position: absolute;
  left: 13.6875rem;
  top: 975.5rem;
  width: 66.6875rem;
  height: 8.5625rem;
}

#landing-55 {
  position: absolute;
  left: 80.375rem;
  top: 975.5rem;
  width: 159.625rem;
  height: 12.5625rem;
}

#landing-56 {
  position: absolute;
  left: 13.6875rem;
  top: 984.0625rem;
  width: 66.6875rem;
  height: 4rem;
}

/* Height = Default card height + nav button height + nav margins + page padding
@media screen and (max-width: 240rem) {
    html {
        font-size: calc(100vw / 240);
    }
}*/