body{
  background-color:#9a9a9a;
  }

.photo_english{
  position:absolute;
  left:0.8em;
  font-size:0.725em;
  bottom:0.275em;
  display:inline;
}

.photo_finnish{
  position:absolute;
  left:0.575em;   font-size:0.725em;
  bottom:0.275em;
  display:none;
}

.page_white{
  position:relative;
  margin: 0.5em auto;
  padding-bottom:0.5em;
  padding-left:0.6em;
  padding-right:0.6em;
  background-color:#FFF;
  overflow:auto;
  color:#000;
}

.page_black{
  position:relative;
  margin: 0.5em auto;
  margin-bottom:0.5em;
  padding-bottom:0.5em;
  padding-left:0.6em;
  padding-right:0.6em;
  background-color:#000;
  overflow:auto;
  color:#fff;
}

.text_white{
  width:100%;
  float:right;
  text-align:right;
}

.text_black{
  width:100%;
  float:right;
  text-align:right;
}


p{
  font-family: Arial;
  font-size:0.9em;
  margin:0;
  text-align:justify;
}
  
  
.title{
  font-family: Times, serif;
  font-size:1.3em;
  text-align:right;
}

.info{
  font-family: Times, serif;
  font-size:0.9em;
  text-align:right;
}

.quote{
  margin-bottom:0.25em;
}

img{
  margin-top:0.5em;
  padding-bottom:0.75em;
  max-width:100%;
  float:left;
  max-height:39.375em;
}


@media screen and (min-width: 40em) {
  
  .page_white{
    line-height:1em;
    padding-left:0.6em;
    padding-right:0.6em;
    background-color:#FFF;
    min-height:39.5em;
    max-width: 64em;
  }
  
  #page_vanha{
    max-width:100%;
    padding-left:0.6em;
    padding-right:0.6em;
    background-color:#FFF;
    height:40.75em;  
  }
  
  .page_black{
    line-height:1em;
    padding-left:0.6em;
    padding-right:0.6em;
    background-color:#000;
    color:#fff;
    min-height:39.5em;
    max-width: 64em;
  }

  .text_white{
    position:absolute;
    background:rgba(255,255,255,.5);
    width:19em;
    float:right;
    text-align:right;
    margin: 0;
    width: 20.25rem;
    right: 0;
    padding-bottom:0.25rem;
  }

  .text_black{
    position:absolute;
    background:rgba(0,0,0,.5);
    width:19em;
    float:right;
    text-align:right;
    margin: 0;
    width: 20.25rem;
    right: 0;
    padding-bottom:0.25rem;
  }

  p{
    line-height: 1.125em;
    font-family: Arial;
    font-size:0.813em;
    margin:0 0.875rem 0 0.375rem;
    text-align:justify;
  }

  .title{
    font-family: Times, serif;
    font-size:1.5rem;
    text-align:right;
    margin-top:0.25em;

  }

  .info{
    font-family: Times, serif;
    font-size:0.925em;
    text-align:right;
  }

  .quote{
    margin-bottom:0.25em;
  }

}
  



#header_container{
  color:#2b2b2b;
  width:100%;
  font-family: Times, serif;
  text-align:right;
  font-size:1.825em;
  padding-bottom:0.275em;
}

#header_image{
  overflow:hidden;
  text-align:right;
  max-height:0em; transition:max-height 1s;
  -webkit-transition: max-height 1s;
  width:100%;
}

#header_image img{
  float:right;
  max-height:20em;
}

#header_downarrow{
  font-family: Arial;
  font-size:0.55em;
  float:right;
  padding-top:0.55em;
}

#header_uparrow{
  font-family: Arial;
  font-size:0.55em;
  display:none;
  float:right;
  padding-top:0.55em;
}

#language_en{
  line-height:1.5em;
  color:#bcbcbc;
  font-family: Arial;
  font-size:0.8em;
  position:absolute;
  left:0.8em;
  top:0.6em;
  display:inline;
}

#language_fi{
  line-height:1.5em;
  color:#bcbcbc;
  font-family: Arial;
  font-size:0.8em;
  position:absolute;
  left:0.8em;
  top:0.6em;
  display:none;
}

.english{
  display:inline;
}

.finnish{
  display:none;
}

.downarrow{
  display:none;
  font-family: Arial;
  font-size:0.75em;
  text-align:right;
}

.uparrow{
  font-family: Arial;
  font-size:0.75em;
  text-align:right;
}

input{
  display:none;
}

input:checked~#header_image{
  max-height:39.375em;
  transition:max-height 1s;
  -webkit-transition: max-height 1s;
  overflow:hidden;
}

input:checked~#language_en{
  display:none;
}

input:checked~#language_fi{
  display:inline;
}

input:checked~.page_black .text_black .content .finnish{
  display:inline;
}

input:checked~.page_black .text_black .content .english{
  display:none;
}

input:checked~.page_white .text_white .content .finnish{
  display:inline;
}

input:checked~.page_white .text_white .content .english{
  display:none;
}




input:checked~.page_black .photo_finnish{
  display:inline;
}

input:checked~.page_black .photo_english{
  display:none;
}

input:checked~.page_white .photo_finnish{
  display:inline;
}

input:checked~.page_white .photo_english{
  display:none;
}

input:checked~.uparrow{
  display:none;
}

input:checked~.downarrow{
  display:inline;
}

input:checked~#header_uparrow{
  display:inline;
}

input:checked~#header_downarrow{
  display:none;
}


.content{
  max-height:42.25em;
  transition:max-height 1s; 
  -webkit-transition: max-height 1s;
  overflow:hidden;
}

input:checked~.content{
  max-height:0em; transition:max-height 1s;
  -webkit-transition: max-height 1s;
  overflow:hidden;
}