body {
  background-color: white;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

object {
  height: 100%;
  min-height: 500px;
  left: 0;
  top: 0;
  display: inline-block;
  opacity: 1.0;
  -webkit-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

.overlay {
  opacity: 0.1;
}

/**
 * Popup
**/

#info {
  position: fixed;
  top: 10%;
  left: 10%;
  right: 10%;
  box-sizing: border-box;
  text-align: left;
  background-color: transparent;

  -webkit-transform-origin: 50% 50%;
  -webkit-transition: all .2s ease-in-out;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: all .2s ease-in-out;
}

.hidden {
  transform: scale3d(0, 0, 0);
  opacity: 0;
}

.shown {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

#info .header {
  border-bottom: 8px solid black;
  border-left: 8px solid black;
  height: 50px;
  margin-right: 50px;
  background-color: white;
  box-sizing: border-box;
}
#info .fade {
  height: 50px;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  position: absolute;
  bottom: 8px;
  left: 28px;
  right: 28px;
}
#info .close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 20px;
  width: 60px;
  height: 80px;
  display: block;
}
#info .close:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "×";
  font-size: 50px;
  color: black;
  line-height: 80px;
  text-align: center;
}

#info .fold {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 25px solid transparent !important;
  border-right: 25px solid transparent !important;
  border-top: 25px solid black;
  border-left: 25px solid black;
  display: block;
}
#info .fold-inside {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 0;
  height: 0;
  border-bottom: 11px solid transparent !important;
  border-right: 11px solid transparent !important;
  border-top: 11px solid white !important;
  border-left: 11px solid white !important;
  display: block;
}
#info .body:empty::before {
  text-align: center;
}
#info .body:empty::before {
  display: block;
  margin-top: 5em;
  content: "Ladataan...";
}
#info .body {
  padding: 10px 40px 0px 50px;
  box-sizing: border-box;
  overflow: auto;
  -webkit-transition: all .33s linear;
  transition: all .33s linear;
  hyphens: manual;
}
#info .bottom {
  border: 8px solid black;
  background-color: white;
  padding: 0;
  box-sizing: border-box;
}
#info .body a {
  display: inline-block;
  width: 80%;
  vertical-align: top;
  padding-left: 10px;
  text-decoration: none;
}
#info .body a:hover {
  text-decoration: underline;
}
#info .body p img {
  width: 20px;
  vertical-align: text-top;
}
#info .body p img.inside {
  margin-left: 0;
  vertical-align: middle;
}
#info .body p {
  color: rgb(94, 94, 94);
  line-height: 1.5em;
}
#info .body h1,
#info .body h2,
#info .body h3,
#info .body h4 {
  color: rgb(74, 74, 74);
}
#info .body > *:last-child {
  margin-bottom: 60px;
}

#info.osallisuus div {
  border-color: #C386CE;
}
#info.osallisuus .body a,
#info.osallisuus div.close:after {
  color: #C386CE;
}
#info.oppiminen div {
  border-color: #0BA6D6;
}
#info.oppiminen .body a,
#info.oppiminen div.close:after {
  color: #0BA6D6;
}
#info.ihmissuhteet div {
  border-color: #FB8D76;
}
#info.ihmissuhteet .body a,
#info.ihmissuhteet div.close:after {
  color: #FB8D76;
}
#info.turvallisuus div {
  border-color: #328E58;
}
#info.turvallisuus .body a,
#info.turvallisuus div.close:after {
  color: #328E58;
}
#info.terveys div {
  border-color: #F2952F;
}
#info.terveys .body a,
#info.terveys div.close:after {
  color: #F2952F;
}
#info.syntyvyys div {
  border-color: #9E9785;
}
#info.syntyvyys .body a,
#info.syntyvyys div.close:after {
  color: #9E9785;
}
#info.kokemus div {
  border-color: #E2D20A;
}
#info.kokemus .body a {
  color: rgb(174, 162, 8);
}
#info.kokemus div.close:after {
  color: #E2D20A;
}




/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  object {
    position: absolute;
  }
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  object {
    position: absolute;
  }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  object {
    position: absolute;
  }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  object {
    position: absolute;
  }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  body {
    font-size: 80%;
  }
  object {
    position: absolute;
  }
  .overlay {
    opacity: 0.4;
  }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  body {
    font-size: 80%;
  }
  object {
    position: absolute;
  }
  .overlay {
    opacity: 0.4;
  }
}