body{
     background-color: #19355c;
     color:#6caed0;
     font-size:16px;
     font-family:Arial;
     line-height:1.5;
     text-align:justify;
     overflow-y: scroll}
body p strong, body li strong{
 font-weight:700;}

body p b, body li b{
 font-weight:700;}
 
body li i, body p i, body figure i, body h2 i, body h1 i {
 font-style: italic;} 
 
body p .c, body h1 .c, body h2 .c {
 font-variant: small-caps;} 
 
body p {
 margin-bottom:10px
 }  

body p sup {
    vertical-align: super;
    font-size: smaller;
}

body hr {
  border-top: 1px solid;
  color: #6caed0
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    margin-bottom: 10px;
}
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
.back-to-top {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #6caed0;
    background-color: rgba(7, 80, 155, 0.50);
    border-radius:20px 0 0 20px;
    font-size: 12px;
    padding: 1em;
    display: none;
    
}

.back-to-top:link, visited {    
     color:#6caed0;
     font-weight:700;
} 

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
    color:#6caed0;
    font-weight:700;
} 

figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}

figcaption {
font-size:85%;
font-family:Arial;
text-align:center
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

          
a{
     text-decoration:none}
a:link,a:visited{
     color:#000}
a:hover,a:active, a.active{
     color:#000}
a.old {
     color:#000}      
.foto{
     font-size:90%}
    
.hidden{
     position:absolute;
     clip:rect(1px 1px 1px 1px);
      clip:rect(1px,1px,1px,1px)}
.body{
     margin:0 auto;
     width:94%;
     clear:both}
.body img{
     border:0;
     max-width:100%;}
.topbanner{
     width:95%;
     padding:1% 3% 0% 3%;
     margin-top:2px}
.topbanner h1 {
     font-weight:700;
     color: #6caed0;
     text-align:center;
     font-size: 2em
     }  
.topbanner h2 {
     font-weight:700;
     color: #6caed0;
     text-align:center;
     font-size: 1.5em
     }          
.topbanner p{
     font-size:84%;
     color:#fff}
.navigation{
     width:100%}
.navigation nav{
     margin:0 auto;
     text-align:center;
     padding:8px}
.navigation nav ul li{
     display: inline;
     font-size:100%;
     padding:5px 0}
.navigation nav a:link,.navigation nav a:visited{
     color:#90ceee}
.navigation nav a:hover,.navigation nav a:active,.navigation nav .active a:link,.navigation nav .active a:visited, .navigation nav .activedesktop a:link, .navigation nav .activedesktop a:visited{
     background-color:#666;
     background:rgba(255,255,255,0.1);
     color:rgba(104,206,238,1);
     display:inline-block;
     text-shadow:none;
     border-radius:3px;}
.navigation nav ul li a{
     border-radius:3px}     
.navigation form input.textfield{
     width:200px}     
.maincontent{
     line-height:1.5}
.content{
     width:50%;
     float:left}
.content100{
     width:100%;
     float:left}       
.news { background:rgba(51,51,51,0.1);
     color:rgba(255,255,255,1);
     display:inline-block;
     text-shadow:none;
     border-radius:3px;
     display:block;
     padding:2%}      
.topleft{
     border-radius:3px;
     padding:0% 3% 0% 3%;
     margin-top:2px}
.bottomleft{
     padding:1% 3% 3% 5%;
     margin-top:2px}
.topleft h1{
     font-weight:700;
     color: #6caed0;
     text-align:center;
     font-size: 2.5em;
     margin-bottom:10px}
.topleft h2{
     font-weight:700;
     text-align:center;
     margin-bottom:5px;
     margin-top:20px}
.topleft h3{
     font-weight:700;
     text-align:left;
     margin-bottom:5px;
     margin-top:20px}
.topleft ul {
     padding:0px 0px 10px 5 px;
     margin-bottom:10px;
     margin-left:5px}
.topleft ul li{
     padding:10px 0 0;
     list-style-type: disc;}
.topleft ol {
     padding: 0 0 0 10px;
     margin-bottom:10px;
     counter-reset:yourCounter;}
.topleft ol.species {
     font-size:85%}        
.topleft ol li{
     list-style-type: decimal;
     }  
.topleft ol li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
.topleft ol  li:not(.skip):before {
    content:counter(yourCounter) ".";
    
}
.topleft ol  li.skip {
        list-style:none;
        
}
     
.topleft form {
    text-align:center;
    padding: 1px; 
   }

.topleft form input.button{
    font-weight:700;
    background:#f60;
     border:1px solid #19355c;
     color:#000;
     width:170px;
     height: 40px;
     border-radius:20px;
    box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
    margin-bottom: 20px}
.topleft form input.button:hover,.topleft form input.button-link:focus{
     box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
     background:#ccc;
     transition-duration:.2s}
.topleft form input.button:active{
     box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
     background:#3c0;
     border:solid 1px #203E5F}         
.bottomleft h2{
     font-weight:700;
     color:#333;
     text-align:left;
     margin-bottom:10px}
.bottomleft ul {
     list-style:disc;
     padding:3px 10px 0;
     margin-bottom:10px;}
.bottomleft ul li{
     padding:10px 0 0}       
.topleft img{
     border:0}
.topleft imageMap {
     max-width:100%;
     border:0}   
.thumbnails {
      text-align:justify;} 
.bottomleft img{
     max-width:100%;
     border:0}
.topleft #news li {
  display: inline;
  list-style-type: none;
  padding:5px;}
.top-sidebar{
     width:50%;
     float:left;
     font-size:1em}
.top-sidebar #news li {
  display: inline;
  list-style-type: none;
  padding:5px;}  
.bottom-sidebar{
     width:50%;
     float:left;
     font-size:85%}
.top-sidebar h2{
     font-weight:700;
     text-align:center;
     margin-bottom:10px}
.top-sidebar h3{
     font-weight:700;
     text-align:center;
     margin-bottom:5px;
     margin-top:5px}
.bottom-sidebar h2{
     font-weight:700;
     text-align:center;
     margin-bottom:10px}
.top-sidebar img{
     padding:0px 0 0px 0;
     border:0}      
.top-sidebar ul{
     list-style-type: disc;
     font-size:90%;
      }
.top-sidebar ul li {
     padding:10px 0 2px 0;
     }         
.bottom-sidebar img{
     max-width:100%;
     border:0}
.top-sidebar form {
    text-align:center;
    padding: 5px; 
   }
.top-sidebar form input.button{
    font-weight:700;
    background:#f60;
     border:1px solid #19355c;
     color:#000;
     width:170px;
     height: 40px;
     border-radius:20px;
      box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);}
.top-sidebar form input.button:hover,.top-sidebar form input.button-link:focus{
     box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
     background:#ccc;
     transition-duration:.2s}
.top-sidebar form input.button:active{
     box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
     background:#3c0;
     border:solid 1px #203E5F}  
         
.bottom-sidebar form {
    text-align:center;
    padding: 5px; 
   }
.bottom-sidebar form input.button{
    font-weight:700;
    background:#f60;
     border:1px solid #999;
     color:#000;
     width:170px;
     height: 40px;
     border-radius:20px;
      box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);}
.bottom-sidebar form input.button:hover,.bottom-sidebar form input.button-link:focus{
     box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
     background:#ccc;
     transition-duration:.2s}
.bottom-sidebar form input.button:active{
     box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);
     background:#3c0;
     border:solid 1px #203E5F}
.bottom-sidebar ul li {
     padding:10px 0 2px 0;
     }              
.top-right{
     padding:0% 3% 0% 3%;
     margin-top:2px}
.bottom-right{
     padding:3% 0 3% 3%;
     margin-top:2px;
    }         

.mainfooter{
     width:100%;
     float:left;
     margin-top:2%;
     text-align:center}
.mainfooter p{
     font-size:90%;
     line-height:1.8;
     color:#6caed0;
     padding:5px 0 10px}
.mainfooter a:link,.mainfooter a:visited{
     color:#6caed0}
.mainfooter a:hover,.mainfooter a:active{
     background-color: #07509b;
     display:inline-block;
     text-shadow:none;
     border-radius:3px}

.g-recaptcha {
        margin: 0 auto; /* Centers block-level element horizontally */
        max-width: 304px; /* Optional: Sets a max-width for better control */
    }
     
     
@media only screen and (min-width:150px) and (max-width:290px){
     .body{
     width:100%;
     font-size:95%}
.topbanner h1 {
     font-size: 1.1em;
}
.logo{
     height:100px}
a#homelink{
     width:140px;
     height:100px}
.desktop, .activedesktop{
     position:absolute;
     clip:rect(1px 1px 1px 1px);
      clip:rect(1px,1px,1px,1px)}
.content{
     width:100%;
     font-size:90%}
.topleft{
     padding:3% 3% 1% 3%} 
.bottomleft {
     padding:3% 3% 1% 3%}     
.top-sidebar{
     width:100%;
     font-size:85%}
.bottom-sidebar{
     width:100%;
     font-size:85%}
.top-right{
     padding:3% 5%}
.bottom-right{
     padding:3% 5%}

.mainfooter p{
     font-size:80%;
     }
}
@media only screen and (min-width:291px) and (max-width:320px){
     .body{
     width:100%;
     font-size:95%}
.topbanner h1 {
     font-size: 1.1em;
}  
.logo{
     height:127px}
a#homelink{
     width:160px;
     height:125px}
.desktop, .activedesktop{
     position:absolute;
     clip:rect(1px 1px 1px 1px);
      clip:rect(1px,1px,1px,1px)}
.content{
     width:100%}
.topleft{
     padding:3% 3% 1% 3%} 
.bottomleft {
     padding:3% 3% 1% 3%}       
.top-sidebar{
     width:100%}
.bottom-sidebar{
     width:100%}
.top-right{
     padding:3% 5%}
.bottom-right{
     padding:3% 5%}
.mainfooter p{
     font-size:90%
     }
}
@media only screen and (min-width:321px) and (max-width:450px){
     .body{
     width:100%;
     font-size:95%}
.topbanner h1 {
    font-size: 1.1em;
    margin-top:12px
    }  
.logo{
     height:127px}
.foto {
     font-size:90%}          
a#homelink{
     width:320px;
     height:125px}
.desktop, .activedesktop{
     position:absolute;
     clip:rect(1px 1px 1px 1px);
      clip:rect(1px,1px,1px,1px)}
.content{
     width:100%;
     font-size: 95%}
.topleft{
     padding:0 3% 1% 3%;
     font-size: 95%}
.topleft h1{
     font-weight:700;
     color: #6caed0;
     text-align:center;
     font-size: 1.7em;
     margin-bottom:10px}     
.bottomleft{
     padding:3% 3% 1% 3%;
     font-size: 95%}      
.top-sidebar{
     width:100%}
.bottom-sidebar{
     width:100%}
.top-right{
     padding:3% 5%;
     font-size: 90%}
.bottom-right{
     padding:3% 5%;
     font-size: 90%}
.mainfooter p{
     font-size:0.8em
     }
}
@media only screen and (min-width:451px) and (max-width:550px){
     .body{
     width:100%;
     font-size:95%}
.topbanner h1 {
     font-size: 1.2em;
}  
.logo{
     height:127px}
.foto {
     font-size:90%}          
a#homelink{
     width:320px;
     height:125px}
.desktop, .activedesktop{
     position:absolute;
     clip:rect(1px 1px 1px 1px);
      clip:rect(1px,1px,1px,1px)}
.content{
     width:100%;
     font-size: 95%}
.topleft{
     padding:0 3% 1% 3%;
     font-size: 95%}
.topleft h1{
     font-weight:700;
     color: #6caed0;
     text-align:center;
     font-size: 1.7em;
     margin-bottom:10px}     
.bottomleft{
     padding:3% 3% 1% 3%;
     font-size: 95%}      
.top-sidebar{
     width:100%}
.bottom-sidebar{
     width:100%}
.top-right{
     padding:3% 5%;
     font-size: 90%}
.bottom-right{
     padding:3% 5%;
     font-size: 90%}
.mainfooter p{
     font-size:0.8em
     }
}
@media only screen and (min-width:551px) and (max-width:600px){
     .body{
     width:100%;
     font-size:95%}
.topbanner h1 {
     font-size: 1.3em;
}    
.logo{
     height:150px}
a#homelink{
     width:160px;
     height:140px)
}
.content{
     width:100%}
.topleft{
     padding:3% 3% 1% 3%}
.bottomleft {
     padding:3% 3% 1% 3%}           
.top-sidebar{
     width:100%;
     float:right}
.bottom-sidebar{
     width:100%;
     float:right}
.top-right{
     padding:3% 3%}
.bottom-right{
     padding:3% 3%}
.mainfooter p{
     font-size:90%
    }
}
@media only screen and (min-width:601px) and (max-width:750px){
     .body{
     width:100%;
     font-size:95%}
.topbanner h1 {
     font-size: 1.5em;
}      
.logo{
     height:150px}
a#homelink{
     width:160px;
     height:140px}
.content{
     width:50%}
.topleft{
     padding:3% 3% 1% 3%}
.topleft ul {
     margin-left:15px}     
.bottomleft {
     padding:3% 3% 1% 3%}           
.top-sidebar{
     width:50%;
     float:right}
.bottom-sidebar{
     width:50%;
     float:right}
.top-right{
     padding:3% 5%}
.bottom-right{
     padding:3% 5%}
.mainfooter p{
     font-size:90%
     }
}
@media only screen and (min-width:751px) and (max-width:800px){
     .body{
     width:100%;
     font-size:95%}
.logo{
     height:150px}
.topbanner h1 {
     font-size: 2em;
} 
a#homelink{
     width:160px;
     height:140px}
.content{
     width:50%;
     float:left}
.topleft ul {
     margin-left:10px}     
.top-sidebar{
     width:50%;
     float:left}
.bottom-sidebar{
     width:50%;
     float:left}
.top-right{
     padding:3% 5%}
.bottom-right{
     padding:3% 5%}
.mainfooter p{
     font-size:90%
 }
}
@media only screen and (min-width:801px) and (max-width:960px){
     .body{
     width:100%;
     font-size:95%}
.logo{
     height:150px}
.topbanner h1 {
     font-size: 2em;
} 
a#homelink{
     width:160px;
     height:140px}
.content{
     width:50%;
     float:left}
.topleft ul {
     margin-left:10px}      
.top-sidebar{
     width:50%;
     float:left}
.bottom-sidebar{
     width:50%;
     float:left}
.top-right{
     padding:3% 5%}
.bottom-right{
     padding:3% 5%}
.mainfooter p{
     font-size:90%
     }
}
@media only screen and (min-width:961px) and (max-width:1024px){
     .body{
     width:100%}
.logo{
     height:130px}
a#homelink{
     width:160px;
     height:130px}
.content{
     width:50%;
     float:left}
.top-sidebar{
     width:50%;
     float:left}
.bottom-sidebar{
     width:50%;
     float:left}
.top-right{
     padding:3% 5%}
.bottom-right{
     padding:3% 5%}
.mainfooter p{
     font-size:90%
    }
}
@media only screen and (min-width:1025px){
     .body{
     width:1024px}
}
}