html {}
* {margin:0;padding:0;font-family:Arial, Verdana;box-sizing: border-box;}
body {font-size:100%;background-color:#f0fafc}
h1 {font-size:170%;padding:10px 0px;color:#000099;text-align:center}
h2, h3 {margin:20px 0px 0px 0px;color:#b00;text-align:center}
h2 {font-size:150%;}
h3 {font-size:120%;text-align:left}
p {padding:15px 10px;text-align:justify;line-height:170%}

li {line-height:170%;margin-left:25px}
#outer {max-width:960px;margin:0 auto;}

#head {width:100%;height:145px;background-color:#0bf;}
#head h1 {font-size:250%;color:#fff;padding:30px 0px 0px 0px}
#head h2 {margin:10px 0px 0px 0px}
#logo {padding:5px 5px 3px 15px;height:135px;float:left}



.nav {  width: 100%;  height: 45px;  background-color: #0080ff;  position: relative;  float: left;  margin-top:-20px}
.dropdown {background-color: #0080ff;color:#000}
.m_item, .c_item, .dropdown .dropbtn{  float: left;  height: 45px;  padding:12px 5px;  text-align:center;background-color: #0080ff;border: none;  outline: none;font-size:90%;width:16.5%}

.m_item:hover, .c_item,.dropdown .dropbtn:hover{  background-color: #a2e3f5;color:#000}
p.m_item, p.c_item   {  text-align: center;  margin-top: 10px;}
a.m_item,.dropdown .dropbtn{  color: #fff;  text-decoration: none;}
a.m_item:hover,.dropdown .dropbtn:hover {  text-decoration: underline;color:#000}

.dropdown-content {display: none;position: absolute;background-color: #a2e3f5;min-width: 160px;z-index: 1;left: 33%;top: 45px;}

.dropdown-content a {  float: none;  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}
.dropdown-content a:hover {  background-color: #ddd;}
.dropdown:hover .dropdown-content {  display: block;}






.slideshow {position:relative;height:270px; width:400px; margin:15px auto;text-align:center}
.slideshow img {position:absolute; left:0; top:0; transition:opacity 1s; opacity:1;width:100% }
.slideshow img.is-hidden { opacity:0; }

#content {margin:20px 10px}

#footer {background-color:#0bf;color:#000;width:100%;text-align:center}

.imgl {padding:10px 20px 10px 0px ;float:left;width:50%}
.imgr {padding:20px 0px 10px 20px;float:right ;width:50%}
.error {color:red;background-color:yellow}
label {width:19%;float:left;padding:5px 0px}
.txt {margin:5px 0px;line-height:150%;width:80%;}

/* repsonsive naviagation */
/* Hide the link that should open and close the topnav on small screens */
.nav .icon {    display: none;} 
 /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
.nav.responsive a.icon {position: absolute;width:100%;text-align:right; top: -50px; color:#fff ;background-color:#0080ff;height:50px}
.nav.responsive a, .nav.responsive .dropdown {   display: block;    text-align: left;padding:20px 5px 5px 5px  }
.nav.responsive {height:400px;margin-top:30px}


 /* make everything slighly smaller */  
 @media screen and (max-width: 860px){
   body {font-size:90%;}
   p {line-height:130%}
}   
   
      
   
 /* When the screen is less than 560 pixels wide, hide all links,Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 560px) {
  body {font-size:90%}
.nav a ,.nav .dropdown{display: none;}
.nav a.icon {float: right; display: block;font-size:200%;padding-right:40px;padding-top:0px;color:#fff}
#head {height:100px;padding:5px}
#head h1 {font-size:150%;padding:10px 0px 0px 0px}
#head h2 {font-size:120%}
 #logo {height:90px;padding-left:5px}
.m_item, .c_item,.dropdown .dropbtn  {  float: left;  width:96%;  height: 65px;  color: #fff;  padding:5px 10px; font-size:110%;text-align:left;margin:0px}
.dropdown {margin-left: -10px}
.imgl {padding:10px 20px 10px 0px ;float:left}
.imgr {padding:20px 0px 10px 20px;float:right }
  .slideshow {position:relative;; width:280px; height:220px}
  
 .dropdown-content {left: 33%;top:130px}
.nav.responsive .dropdown-content a {  float: none;  color: black;  padding: 30px 16px;  text-decoration: none;  display: block;  text-align: left;}
 
  }