html, body {
    max-width: 100%;
    overflow-x: hidden;
    

  
}


* {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
}

img {
  position: relative;
  max-height: 90vh;
  max-width: 57vw;
  display: inline-block;
  background: url(loading.gif) 50% no-repeat;

   }

.kuva2
{
  position: relative;
  max-height: 40vh;
  max-width: 30vw;
  display: inline-block;
  
   }

.twit {

  position; relative;
  display: block; 
 padding-top: 0.5em;
    padding-left: 0.5em;

   
}

.fb {

   position: relative;
display: block;
 padding-top: 0.5em;
    padding-left: 0.5em;
 
  
}


.pikku {
 display: inline-block;
 vertical-align: top; 
}

li {
list-style-type: none;
display: inline-block;
border-width: 0px 1px 0px 0px;
border-style: solid;
border-color: rgba(7,43,18,0.5);
border-color: rgba(0,42,52,0.5);
margin: 0;

padding-right: 0.5em;
padding-left: 0.5em;

}

li:hover {
text-decoration: underline;
}

.vuosi {

list-style-type: none;
display: block;
margin: 0;
border: none;
margin-top: 0.7em;
padding: 0;

font-family: "Montserrat", sans-serif;
font-size: 0.9em;

cursor: pointer;

}

.vuosihl {
list-style-type: none;
display: block;
margin: 0;
border: none;
margin-top: 0.7em;
padding: 0;

font-family: "Montserrat", sans-serif;
font-size: 1.2em;

  
cursor: pointer;
  
  
  }



.portraits {

font-family: "Montserrat", sans-serif;
font-size: 0.9em;
color: rgba(16,100,42,0.5);
 color: rgba(7,43,18,0.5);
color: rgba(0,42,52,0.5);
cursor: pointer;
text-decoration: none;
}

a {
font-family: "Montserrat", sans-serif;
font-size: 1em;
color: rgba(211,127,179,1);
color: rgba(16,100,42,0.8);
 color: rgba(7,43,18,0.8);
color: rgba(0,42,52,0.8);
cursor: pointer;
text-decoration: none;
}

.makasiini {
font-family: "Montserrat", sans-serif;
font-size: 1em;
color: rgba(211,127,179,1);
color: rgba(16,100,42,0.8);
 color: rgba(255,255,255,0.8);
cursor: pointer;
text-decoration: none;
}

h1 {
 font-family: "Josefin Sans", sans-serif;
 font-size: 3em;
 color: rgba(16,100,42,0.8);
 color: rgba(7,43,18,0.8);
color: rgba(0,42,52,0.8);
   cursor: arrow;
 letter-spacing: 0.03em;
}

h2 {
 font-family: "Montserrat", sans-serif;
 font-size: 2em;
 color: rgba(16,100,42,0.4);
 color: rgba(7,43,18,0.5);
color: rgba(0,42,52,0.5);
    cursor: arrow;
 letter-spacing: 0.05em;
 top: 2em;
}

.tiedot {
 font-family: "Montserrat", sans-serif;
 font-size: 1em;
 color: rgba(16,100,42,0.6);
 color: rgba(7,43,18,0.6);
color: rgba(0,42,52,0.6);
 cursor: pointer;
 letter-spacing: 0.05em;
}

#header {
 display: block;
 position: absolute;
 left: 2%;
 top: 1%;
 width: auto;
}

#menu {
 font-family: "Montserrat", sans-serif;
 font-size: 1.5em;
 color: rgba(80,35,33,1);
 color: rgba(16,100,42,0.8);
 color: rgba(7,43,18,0.8);
color: rgba(0,42,52,0.8);
 cursor: pointer;
 display: block;
 position: fixed;
 right: 0;
 top: 0;
  z-index: 4;
}

#laitamenu {
 display: block;
 position: fixed;
 width: 10%;
 height: 100%;
}    
#vuodet {
 display: block;
 position: fixed;
 width: 15%;
 top: 50%; 
 transform: translate( 0, -50%); 
 -webkit-transform: translate( 0, -50%);
  text-align: right;
 
}

#portfolio {
 display: block;
 position: absolute;
  height: auto;
 width: 85%;
 left: 15%;
 margin-top: 10em;
  border: none;
  text-align: center;
   overflow-x: hidden;
   oveerflow-y: auto;
  -webkit-transform: translate3d (0, 0, 0);

}

.otsikko {
 
 display: block;
  position: relative;
 border: none;
  text-align: center;
  height: 4em;

}

.teos {
  
  position: relative;
 display: block;
 font-family: "Montserrat", sans-serif;
 font-size: 0.8em;
 color: rgba(16,100,42,0.6);
 color: rgba(7,43,18,0.6);
color: rgba(0,42,52,0.6);
 cursor: arrow;
 letter-spacing: 0.05em;
  border: none;

  height: auto;
  margin-bottom: 4em;
  margin-left: 2em;
  margin-right: 2em;
   left: 50%;
 transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  

}

.kuva {
  display: inline-block;
  position: relative;
  border: none;
  height: auto;
  }



.teosteksti {
  display: inline-block;
  position: relative;

 text-align: left;  
  border: none;
 bottom 1em;
 padding-left: 0.5em;

}



#contact {
 background-color: rgba(16,100,42,0.95); 
 background-color: rgba(7,43,18,0.95);
background-color: rgba(0,42,52,0.95);
 position: fixed;
 height: 30em;
 width: 50em;
  left: 50%;
  top: 50%;
 transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
 z-index: 5; 
}

#about {
 background-color: rgba(16,100,42,0.95);
 background-color: rgba(7,43,18,0.95);
background-color: rgba(0,42,52,0.95);

 position: fixed;
 height: 40em;
 width: 62em;
  left: 50%;
  top: 50%;
 transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
 z-index: 5;
}

#upcoming {
 background-color: rgba(16,100,42,0.95);
 background-color: rgba(7,43,18,0.95);
background-color: rgba(0,42,52,0.95);

 position: fixed;
 height: 40em;
 width: 30em;
  left: 50%;
  top: 50%;
 transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
 z-index: 5;
}


.contacttext {
  display: block;
  position: absolute;
  font-family: "Montserrat", sans-serif;
 top: 3em;
 left: 2em;
  font-size: 2em;
 color: rgba(255,255,255,0.8);
 cursor: arrow;
 letter-spacing: 0.05em;
  }

.abouttext {
  display: block;
  position: absolute;
  font-family: "Montserrat", sans-serif;
 top: 4em;
 left: 2em;
  font-size: 1.2em;
 color: rgba(255,255,255,0.8);
 cursor: arrow;
 letter-spacing: 0.05em;
  }

#close {
 display: block;
 position: absolute;  
 top: 0%;
 right: 1%;
 font-family: "Lato", sans-serif;
  font-weight: 100;
 font-size: 3em;
 color: rgba(255,255,255,0.8);
 cursor: pointer;
}




.show {
 display: block;
}

.hide {
 display: none;
}




#somenappula {
  display: inline-block;
  position: absolute;
  bottom: 10%;
  left: 10%; 

}

#lightbox{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
         background-color: rgba (50, 50, 50, 0.8);
   z-index: 100000;
 }


.photoby {
    
  position: relative;
  display: block;
width: 100%;
  text-align: left;
   font-size: 0.6em;
 color: rgba(0,0,0,0.6);
  border: none;
}

.omistus {
    
  position: relative;
  display: block;
width: 100%;
  text-align: left;
   font-size: 0.6em;
 color: rgba(0,0,0,0.6);
  border: none;
}

.art {
  font-family: "Montserrat", sans-serif;
font-size: 0.8em;
color: rgba(16,100,42,0.8);
color: rgba(0,0,0,0.8);

  cursor: pointer;
  text-decoration: underline;
  }


.boxer {
   display: table;
   border-collapse: collapse;
height: 100%;
width: 100%;
}
 
.boxer .box-row {
   display: table-row;


}
 
.boxer .box {
   display: table-cell;
   text-align: left;
   vertical-align: top;
   border: 0;
height: 50%;
width: 50%;
}


#textit {
 background-color: rgba(16,100,42,0.95); 
 background-color: rgba(7,43,18,0.95);
background-color: rgba(0,42,52,0.95);
 position: fixed;
 height: 30em;
 width: 45em;
  left: 50%;
  top: 50%;
 transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
 z-index: 5; 
}

.pikkukuva {
 max-height: 10em;

   left:  25%;
 transform: translate( -50%, 0);
  -webkit-transform: translate( -50%, 0);

 top: 50%; 
 transform: translate( 0, -50%); 
 -webkit-transform: translate( 0, -50%);
}

.texttext {
  display: block;
  position: absolute;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
 color: rgba(255,255,255,0.8);
 cursor: pointer;
 letter-spacing: 0.05em;
 top: 25%; 
 transform: translate( 0, -50%); 
 -webkit-transform: translate( 0, -50%);
 z-index: 5;
  }

.texttextb {
 display: block;
  position: absolute;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
 color: rgba(255,255,255,0.8);
 cursor: pointer;
 letter-spacing: 0.05em;
 top: 75%; 
 transform: translate( 0, -50%); 
 -webkit-transform: translate( 0, -50%);
 z-index: 5;
}

.texttext:hover {
text-decoration: underline;
}


.texttextb:hover {
text-decoration: underline;
}