*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/*font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600vw - 300px)));*/
html {
  font-size: calc(14px + 0.375vw);
}

/* creates standardized style for the whole body */
body {
  font-family: Helvetica;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  background-color: #f0f2f6;
  padding-top: 2vw;
}

/* blue line background */
.bluelines{
height: 100%;
width: 100%;
background: url(../images/svg/bluebackgroundlines.svg);
background-size: 100%;
}

/* adds a margin to the entire page */
.container {
  width: 85vw;
  margin: 3vh auto;
}

/* header for the homepage */
h1 {
color: #333;
font-family: Helvetica;
font-size: calc(15px + 3vw);
font-weight: 100;
line-height: 1;
padding: 2.5vw;
background-color: #f558eb;
color: white;
text-align: center;
cursor: pointer;
}

/* header for side pages */
h2 {
color: #333;
font-family: Helvetica;
font-size: calc(5px + 2.0vw);
font-weight: 100;
line-height: 1.2;
padding: 1vw;
background-color: #f558eb;
color: white;
text-align: center;
}


/* makes links not look like underlined blue text */
a {
color: inherit;
text-decoration: none;
}

.link {
  background-color: #58f59f;
  border: none;
  color: #21b56b;
  padding: 0.5vw 0.5vw;
  font-size: 1vw;
  cursor: pointer;
  font-weight: bold
}

.textlink {
  color: #f558eb;
}

.textlink:hover {
  background-color: #f558eb;
  transition: 0.5s ease;
  color: white;
}


/* creates the size colour and padding for the paragraphs at the homepage, so it doesnt touch the edge */
.pbehind {
  font-family: Helvetica;
  font-weight: 100;
  font-size: calc(5px + 0.5vw);
  color: white;
  padding: 1vw;
}

/* decorates buttons on the homepage */
.pagebutton {
  background-color: #58f59f;
  border: none;
  color: #457796;
  padding: 2vh 2vw 2vh ;
  text-align: center;
  font-size: 1vmax;
  cursor: pointer;
  font-weight: 100;
}

/* decoration for the hover of the homepage buttons */
.pagebutton:hover {
  background-color: #198a5b;
  transition: 0.5s ease;
  color: white;
}

.dropbtn {
 background-color: #ffca00;
 border:solid;
 border-color: #ffca00;
 color: white;
 padding: 1vmax 1vmax;
 font-size: 2vh;
 text-align: center;
 cursor: pointer;
 font-weight: 100;
}

/* all these dropdown things have to do with the navigation menu */
.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #ffca00;
 min-width: 10vmax;
 z-index: 1;
 font-size: 2vh;
}

.dropdown-content a {
 color: #457796;
 padding: 1vmax;
 text-decoration: none;
 display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}


/* defines the properties of the images of the gallery (might need to change this to only affect the homepage images) */
.gallery_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: scale-down;
}

/* defines the properties of the images of the side galleries (projects and such) */
.gallery-side_img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
}

.lightbox_img {
  width: 100%;
  height: 80vh;
  object-fit: contain;
  display: block;
}

/* defines the dimentions of the gallery of the homepage */
.gallery_home {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(15, 5vw);
  grid-column-gap: 2vw;
  grid-row-gap: calc(1vw + 3vh);
}


/* 1 to 9 define where all the items of the gallery go on the homepage */
/* title pia lindman, profile */
.gallery_item-1 {
  grid-column-start: 3;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 2;
  position: relative;
}

/* the overlay is where the images go (on top of the blue box with text) */
/* it has the same values as the non overlay kind to make them overlap  */
/* title pia lindman, profile */
.gallery_item-1_overlay {
  grid-column-start: 3;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 2;
  opacity: 1;
  position: relative;
}

.gallery_item-1_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* subsensoriallokka (water canoe pic) */
.gallery_item-2 {
  grid-column-start: 2;
  grid-column-end: 9;
  grid-row-start: 3;
  grid-row-end: 6;
  position: relative;
  background-color: #124b93;
}

/* subsensoriallokka (water canoe pic) */
.gallery_item-2_overlay {
  grid-column-start: 2;
  grid-column-end: 9;
  grid-row-start: 3;
  grid-row-end: 6;
  opacity: 1;
  position: relative;
}

.gallery_item-2_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* articulationsoffourcesatplay mumoe pic */
.gallery_item-3 {
  grid-column-start: 11;
  grid-column-end: 14;
  grid-row-start: 2;
  grid-row-end: 5;
  position: relative;
  background-color: #124b93;
  top: 2vh;
}

/* articulationsoffourcesatplay mumoe pic */
.gallery_item-3_overlay {
  grid-column-start: 11;
  grid-column-end: 14;
  grid-row-start: 2;
  grid-row-end: 5;
  opacity: 1;
  position: relative;
  top: 2vh;
}

.gallery_item-3_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* subsensorialXYZ yellow ball pic */
.gallery_item-4 {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 8;
  position: relative;
  background-color: #124b93;
  top: 8vw;
}

/* subsensorialXYZ yellow ball pic */
.gallery_item-4_overlay {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 8;
  opacity: 1;
  position: relative;
  top: 8vw;
}

.gallery_item-4_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* poisonandplay tree pic */
.gallery_item-5 {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 6;
  grid-row-end: 8;
  position: relative;
  background-color: #124b93;
}

/* poisonandplay tree pic */
.gallery_item-5_overlay {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 6;
  grid-row-end: 8;
  position: relative;
  opacity: 1;

}

.gallery_item-5_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* noseearseyes yellow hand pic */
.gallery_item-6 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 8;
  grid-row-end: 12;
  background-color: #124b93;
}

/* noseearseyes yellow hand pic */
.gallery_item-6_overlay {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 8;
  grid-row-end: 12;
  opacity: 1;
}

.gallery_item-6_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* learningfromdomo white robot pic */
.gallery_item-7 {
  grid-column-start: 11;
  grid-column-end: 16;
  grid-row-start: 5;
  grid-row-end: 7;
  position: relative;
  background-color: #124b93;
  top: 2vh;
}

/* learningfromdomo white robot pic */
.gallery_item-7_overlay {
  grid-column-start: 11;
  grid-column-end: 16;
  grid-row-start: 5;
  grid-row-end: 7;
  opacity: 1;
  position: relative;
  top: 2vh;
}

.gallery_item-7_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* bigtoebrainrock grey floor sketch */
.gallery_item-8 {
  grid-column-start: 9;
  grid-column-end: 13;
  grid-row-start: 10;
  grid-row-end:12;
  position: relative;
  background-color: #124b93;
}

/* bigtoebrainrock grey floor sketch */
.gallery_item-8_overlay {
  grid-column-start: 9;
  grid-column-end: 13;
  grid-row-start: 10;
  grid-row-end: 12;
  opacity: 1;
  position: relative;
}

.gallery_item-8_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* kalevaladuoplayingbones toe and hand pic */
.gallery_item-9 {
  grid-column-start: 10;
  grid-column-end: 15;
  grid-row-start: 8;
  grid-row-end: 10;
  position: relative;
  background-color: #124b93;
}

/* kalevaladuoplayingbones toe and hand pic */
.gallery_item-9_overlay {
  grid-column-start: 10;
  grid-column-end: 15;
  grid-row-start: 8;
  grid-row-end: 10;
  opacity: 1;
  position: relative;
}

.gallery_item-9_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* lady liberty preformance outside, yellow trees pic */
.gallery_item-10 {
  grid-column-start: 6;
  grid-column-end: 9;
  grid-row-start: 7;
  grid-row-end: 10;
  position: relative;
  background-color: #124b93;
}

/* lady liberty preformance outside, yellow trees pic */
.gallery_item-10_overlay {
  grid-column-start: 6;
  grid-column-end: 9;
  grid-row-start: 7;
  grid-row-end: 10;
  opacity: 1;
  position: relative;
}

.gallery_item-10_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* mudhut insect */
.gallery_item-11 {
  grid-column-start: 11;
  grid-column-end: 14;
  grid-row-start: 12;
  grid-row-end: 15;
  position: relative;
  background-color: #124b93;
}

/* mudhut insect */
.gallery_item-11_overlay {
  grid-column-start: 11;
  grid-column-end: 14;
  grid-row-start: 12;
  grid-row-end: 15;
  opacity: 1;
  position: relative;
}

.gallery_item-11_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* coming up / subsensorial wearable*/
.gallery_item-12 {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 13;
  grid-row-end: 16;
  position: relative;
  background-color: #124b93;
  right: 2vw;
  top: 2vw;
}

/* coming up / subsensorial wearable */
.gallery_item-12_overlay {
  grid-column-start: 7;
  grid-column-end: 10;
  grid-row-start: 13;
  grid-row-end: 16;
  opacity: 1;
  position: relative;
  right: 2vw;
  top: 2vw;
}

.gallery_item-12_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/*karukinka (rocks) */
.gallery_item-13 {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 12;
  grid-row-end: 13;
  position: relative;
  background-color: #124b93;
  right: 2vw;
}

/* karukinka (rocks) */
.gallery_item-13_overlay {
  grid-column-start: 1;
  grid-column-end: 9;
  grid-row-start: 12;
  grid-row-end: 13;
  opacity: 1;
  position: relative;
  right: 2vw;
}

.gallery_item-13_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* Mummo */
.gallery_item-14 {
  grid-column-start: 3;
  grid-column-end: 7;
  grid-row-start: 16;
  grid-row-end: 18;
  position: relative;
  background-color: #124b93;
  right: 2vw;
}

/* Mummo */
.gallery_item-14_overlay {
  grid-column-start: 3;
  grid-column-end: 7;
  grid-row-start: 16;
  grid-row-end: 24;
  opacity: 1;
  position: relative;
  right: 2vw;
}

.gallery_item-14_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* Mummo */
.gallery_item-15 {
  grid-column-start: 11;
  grid-column-end: 14;
  grid-row-start: 15;
  grid-row-end: 19;
  position: relative;
  background-color: #124b93;
  right: 2vw;
}

/* Mummo */
.gallery_item-15_overlay {
  grid-column-start: 11;
  grid-column-end: 14;
  grid-row-start: 15;
  grid-row-end: 19;
  opacity: 1;
  position: relative;
  right: 2vw;
}

.gallery_item-15_overlay:hover  {
  opacity: 0;
  transition: .5s ease;
}

/* *//*
.gallery_item-template {
  grid-column-start: 0;
  grid-column-end: 0;
  grid-row-start: 0;
  grid-row-end: 0;
  position: relative;
  background-color: #124b93;
}


.gallery_item-template_overlay {
  grid-column-start: 0;
  grid-column-end: 0;
  grid-row-start: 0;
  grid-row-end: 0;
  opacity: 1;
  position: relative;
}

.gallery_item-template_overlay:hover  {
  opacity: 0;
}
*/

.gallery_item-navigationhome {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  opacity: 1;
  position: relative;
}

/* defines where the buttons from the homepage go */
.gallery_button-library {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 3;
  grid-row-end: 4;
  position: relative;
  bottom: 2vh
}

.gallery_button-subsensorial {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 14;
  grid-row-end: 15;
  position: relative;
}

.gallery_button-contact {
  grid-column-start: 13;
  grid-column-end: 14;
  grid-row-start: 7;
  grid-row-end: 8;
}

.gallery_button-projects {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 8;
  position: relative;
  right: 1vw;
  bottom: 1vw;
}

.gallery_button-process {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 10;
  grid-row-end: 11;
  position: relative;
  right: 2vw;
  top: 2vw;
}

/* defines the gallery for the non homepage pages  */
.gallery_side {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 10vw);
  grid-gap: 1em;
}

.gallery_item-sideheader {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  position: relative;
  right: 4vmin;
}

/* where the images go on the side pages */
.gallery_item-image {
  grid-column-start: 5;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 5;
  opacity: 1;
  position: relative;
  object-fit: contain;
}

/* where the text goes on the side pages  */
.gallery_item-text {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 8;
  opacity: 1;
  position: relative;
}

/* if you want to cover the entire grid in a sidepage use this one  */
.gallery_item-full {
  grid-column-start: 2;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 8;
  opacity: 1;

  position: relative;
}

/* defines where the navigation button goes (used to be tree navigation) */
.gallery_item-tree {
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 2;
  opacity: 1;

  position: relative;
}


/* defines where to "go back to project page" button goes */
.gallery_item-crumb {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
  opacity: 1;

  position: relative;
  right: 2vw;
}

/* defines how stuff looks differently on a smaller screen  */
@media only screen and (max-width: 820px) {
  .gallery_item-image {
    grid-column-start: 2;
    grid-column-end: 9;
    grid-row-start: 2;
    grid-row-end: 7;
    opacity: 1;
    position: relative;
    object-fit: contain;
  }

  .gallery_item-text {
    grid-column-start: 2;
    grid-column-end: 9;
    grid-row-start: 7;
    grid-row-end: 12;
    opacity: 1;
    position: relative;
  }

  .gallery_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* all these things define how the project and library galleries work */
div.projects {
  border: 1px solid #ccc;
  height: 50vh;
}

div.projects:hover {
  border: 1px solid #777;
}

div.projects img {
    float: left;
    width:  100%;
    height: 40vh;
    object-fit: cover;
}

div.desc {
  padding: 1vmin;
  font-size: 2vmin;
  text-align: center;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* ccs for lightbox*/

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Slideshow container */
.slideshow-containerTwo {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlidesTwo {
  display: none;
}


/* Next & previous buttons */
.prevTwo, .nextTwo {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.nextTwo {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevTwo:hover, .nextTwo:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.textTwo {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertextTwo {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dotTwo {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.activeTwo, .dot:hover {
  background-color: #717171;
}

    /*handles footer behaviour and appearance */
    footer {
        background-color: #282c34;
        padding: 20px;
        text-align: center;
        position: relative;
    }

    footer a {
        display: inline-block;
        transition: transform 0.3s;
    }

    footer a:hover {
        transform: scale(1.1);
    }

    footer img.small {
        width: 10px;
        height: auto;