html {
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
  height:100%;
}

body { 
  margin:0px;
  padding:0px;
  text-align: justify;
  font-family: Myriad Pro, Helvetica, Arial, sans-serif;
  font-size:16px;
  background-color:#e6f1f1;
}

li {
  margin-top: 7px;
  padding-right:5px;
}

h1 {
  font-weight:600;
  font-size:27px;
  color:#61a4b0;
  margin:0px;
  padding: 10px;
  padding-top:15px;
}
h2 {
  font-weight:bold;
  font-size:23px;
  padding:0px;
  margin:10px 0px;
}

h4 {
  font-size:16px;
  padding:0px;
  margin:0px;
}

p {
  font-size: 16px;
  line-height: 120%;
  padding: 5px;
}
a {
  /* links outside menu */
  font-size: 16px;
  font-weight:bold;
  text-decoration:none;
  color:#007474;/*Skobelof*/
  color:#2380bb;
}
a img { 
   border:none;
}
a:hover {
  text-decoration:underline dotted 3px;
  /*color:#EC6969;*/
  cursor:pointer;
}

.apex {
  margin-left:0px;padding: 5px;
  background-color: white;
  box-shadow: 5px 5px #2380bb;
}

#canvas { 
  position:relative;
  width:100%;
  height:auto;
  margin: 0% 0%;
  background-color:#F7F6F2;
  background-color:white;
  border:1px solid #b4b4b4;
  padding-bottom:20px;
}
#menu {
  width:100%;
  text-align:center;
  /*green margins*/
  padding-top:1px;
  padding-bottom:1px;
  margin-left:0px;
  background-color:#007474;/*Skobelof*/
  background-color:#2380bb;
  line-height:28px;
}
#menu ul {
  padding-left:0px;
}

#menu ul li {
  display:inline;
  padding:0px;
  margin:0px;
  padding-left:0px;
  cursor:pointer;
}

#menu ul li a {
  padding: 1vw 3vw;
  font-size: 22px;
  color:#F7F6F2;
  text-decoration: none;
}
#menu ul li a:hover {
  padding: 1vw 3vw;
  color: #B31B1B;
  color:#2380bb;
  background-color:#F7F6F2;
  border-radius:70%;
  margin: 0px;
}
.hideable {
  margin:0px;
  padding:20px 20px 0px 20px;
  /*height:100%;*/
}
.hideable h2{
  font-weight:bold;
  font-size:22px;
  padding:0px;
  margin-bottom: 5px;
  /*height:100%;*/
}
.hideable p{
  font-size:16px;
  padding:5px;
  margin:0px;
  line-height: 120%;
  text-rendering: optimizeLegibility;
  /*height:100%;*/
}

#info {
  margin-bottom:1vw;
}
#info h1 {
  color:#007474;/*Skobelof*/
  color:#2380bb;
  font-size:27px;
  font-weight:600;
  padding: 10px;
  /*padding-top:15px;*/
}
#info h3{
  font-size:22px;
  margin:0px;
  padding:0px;
}

#picture {
  position:relative;
}
.pic{
  position:relative;
  height:auto;
}
b { 
  font-weight:bold;
}
#copy {
  margin:0px;
  font-size:12px;
  color:#777777;
  width:100%;
}
div.bib {
  padding-left:40px;
  text-indent:-40px; 
}

.hide1{ position: absolute; left: -200em; top: -9999px; visibility:hidden;}


* {
  box-sizing: border-box;
}

.right {
  padding-top: 2vw;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 1vw;
  float: left;
  width: 50%; /* The width is 45%, by default */
  /*vertical-align:baseline;*/
}

.left {
  padding-top: 2vw;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 2vw;
  text-align:center;
  float: left;
  width: 50%; /* The width is 55%, by default */
  /*vertical-align:baseline;*/
}
  /* Use a media query to add a break point at 525px: */
@media screen and (max-width: 525px) {
  .left{
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 0px;
    padding-bottom: 1px;
    width: 100%;
}
.right{
  padding-left: 2px;
  padding-right: 2px;
  padding-top:0px;
  padding-bottom:2px;
  width:100%;
  /*
  padding: 2vw;
  */
}
}
  /* Zoom Mode at 900px: */
@media screen and (min-width: 900px){
  .left{
   /*
    padding-top: 2.5vw;
    width:53%;
    */
  }
  .right{
   /*
    width:47%;
    */
  }
  #menu{
    line-height:3.9vw;
  }
 #menu ul li{
  padding-top:1vh;
  padding-bottom:1vh;
 }
  #menu ul li a{
  font-size:2.4vw;
  padding: 1vh 3vw;
}
#menu ul li a:hover {
  padding: 1vh 3vw;
}
#info{
  margin-bottom: 2vw;
}
#info h1{
  padding-top:2vh;
  font-size:3.2vw;
}
#info h3{
  font-size:2.45vw;
}
.hideable h2{
  font-size:2.4vw;
  margin-bottom: 1vw;
}
/*
.hideable table tbody tr td h4{
  font-size:3.7vw;
}*/
h4{
  font-size:3.7vw;
}
.hideable p{
  font-size:1.9vw;
  padding:1vw;
  margin:0px;
  line-height: 120%;
}
.hideable p a{
  font-size:1.9vw;
}
.hideable ul{
  margin-top:0vw;
  margin-left:1.5vw;
}
.hideable ul li{
  font-size:2vw;
  /*margin-top:1vw;*/
  line-height:2.7vw;
}
.hideable ul li a{
  font-size:2vw;
}
.hideable ol{
  margin-top:0vw;
  margin-left:1.5vw;
}
.hideable ol li{
  font-size:2vw;
  /*margin-top:1vw;*/
  line-height:2.7vw;
}
.hideable ol li a{
  font-size:2vw;
}
#copy {
  font-size:1.3vw;
}
}

@media screen and (min-width: 526px) and (max-width: 700px){
  .left{
    padding-top: 3.6vw;
  }
  .right{
   /*
    padding-top: 2.2vw;
    padding-right: 2vw;
    */
  }
   #info h1 {
    /*color:red;*/
    font-size: 27px;
    
    padding:5px;
    padding-top:2vw;
}

}

@media screen and (min-width: 561px) and (max-width: 700px){
     #info h3 {
    padding-top: 1vw;
    font-size: 20px; 
}
}

@media screen and (min-width: 526px) and (max-width: 560px){
     #info h3 {
    padding-top: 1vw;
    font-size: 18px; 
}
}

@media screen and (min-width: 701px) and (max-width: 900px){
    .left{
    padding-top: 2.5vw;
  }
}