@charset "UTF-8";
/* Scss Document */
html {
  scroll-behavior: smooth;
  background: white; }

body {
  margin: 0; }

.wrapper {
  width: 100%;
  background: #222;
  padding-top: 10px; }

/*							*\
		KUVAKARUSELLI 			
\*							*/
.owl-carousel .carousel-cell-image {
  background: #222;
  height: 89vh;
  width: auto;
  margin: auto; }
  .owl-carousel .carousel-cell-image img {
    margin: auto;
    width: auto;
    height: inherit; }
  .owl-carousel .carousel-cell-image .kuvaaja {
    position: absolute;
    font-family: "Arial";
    color: white;
    right: 25%;
    bottom: 5px;
    width: 100%; }
.owl-carousel .carousel-cell-video {
  background: #222;
  height: 89vh;
  width: auto;
  margin: auto; }
  .owl-carousel .carousel-cell-video iframe {
    margin: 2vh auto;
    width: 80%;
    height: 80%; }

/*											*\
		NAVIGAATTORINUOLET SIVUILLA 			
\*											*/
.owl-prev {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 45%;
  left: 20px;
  display: block !important;
  border: 0px solid black; }

.owl-next {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 45%;
  right: 20px;
  display: block !important;
  border: 0px solid black; }

.owl-prev i, .owl-next i {
  transform: scale(2, 3);
  color: #ccc; }

/*												*\
		NAVIGAATTORI (PIENET KUVAT ALHAALLA) 			
\*												*/
.gridcontainer {
  width: 85vw;
  display: grid;
  margin: auto;
  grid-template-columns: 16% auto 10%;
  grip-gap: 10px; }
  .gridcontainer .navigator-wrapper {
    text-align: center; }
    .gridcontainer .navigator-wrapper .nav-item {
      margin: 10px 2px 10px 2px;
      display: inline-block; }
      .gridcontainer .navigator-wrapper .nav-item img {
        height: 40px; }
        .gridcontainer .navigator-wrapper .nav-item img:hover {
          transform: scale(1.05);
          transition: 0.3s; }
      .gridcontainer .navigator-wrapper .nav-item i {
        font-size: 50px; }
  .gridcontainer p {
    color: white;
    font-size: 20px;
    font-family: "Arial";
    float: center;
    white-space: nowrap; }
  .gridcontainer .nimi {
    text-align: left; }
  .gridcontainer .vuosi {
    text-align: right; }

#kuvaaja {
  font-size: 10px;
  font-family: "Arial"; }

.nuoli {
  margin-top: 5px;
  margin: auto;
  text-align: center;
  display: block; }
  .nuoli img {
    width: 20px;
    margin: auto; }

/*																						*\
		OTSIKKO, TEKSTI JA MUUT TIEDOT #NIMI NÄKYY VAIN KUN RUUDUN LEVEYS YLI 801px			
\*																						*/
#nimi h1 {
  text-align: center;
  margin: 20px auto 20px auto;
  color: black;
  font-size: 4vh;
  font-family: "Arial"; }

.grid {
  display: relative;
  background: white;
  color: black;
  font-family: "Arial";
  margin-bottom: 200px;
  width: 85vw;
  margin: auto; }
  .grid .leipateksti {
    width: 70%;
    float: left;
    margin-bottom: 10%;
    margin-top: 20px; }
  .grid .info {
    border-left: outset;
    width: 25%;
    padding: 0 0 0 1%;
    margin: 35px 1% 20px 1%;
    float: left; }
    .grid .info p {
      margin: 0 0 10px 0; }

.nav-wrapper {
  background: linear-gradient(to right, rgba(34, 34, 34, 0), #222222);
  position: fixed;
  right: 0;
  z-index: 100;
  font-family: "Arial";
  padding-right: 10px;
  padding-left: 50px;
  margin-top: 0px; }

a:link {
  color: white;
  text-decoration: none; }

/* visited link */
a:visited {
  text-decoration: none;
  color: white; }

/* mouse over link */
a:hover {
  color: hotpink; }

/* selected link */
a:active {
  color: white; }

.linkit {
  display: grid;
  grid-template-columns: 50% 50%; }

.linkki:hover {
  transform: scale(1.05);
  transition: 0.3s; }
.linkki img {
  width: 80%;
  filter: grayscale(100); }
  .linkki img:hover {
    filter: grayscale(0);
    transition: 0.3s; }
.linkki a:link {
  color: black; }
.linkki a:visited {
  color: black; }
.linkki a:hover {
  color: hotpink; }
.linkki a:active {
  color: black; }

footer {
  min-width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  font-family: "Arial"; }

@media (min-width: 800px) {
  #nimi {
    display: none; } }
@media (max-width: 1040px) {
  .owl-carousel .carousel-cell-image {
    height: auto; }
    .owl-carousel .carousel-cell-image img {
      margin: auto;
      height: auto;
      width: 90vw; }

  .owl-prev {
    top: 40%;
    left: -25px; }

  .owl-next {
    top: 40%;
    right: -25px; }

  .owl-prev i, .owl-next i {
    transform: scale(1, 2);
    color: #ccc; } }
@media (max-width: 800px) {
  .gridcontainer {
    float: center; }
    .gridcontainer .navigation-wrapper {
      display: inline-block;
      text-align: center; }
    .gridcontainer p {
      display: none; }

  .grid .leipateksti {
    width: 100%;
    margin-bottom: 4%; }
  .grid .info {
    width: 90%;
    padding: 4%;
    border-left: hidden;
    border-top: groove;
    margin-top: 0px; } }