html,body{font-family:Calibri, sans-serif;font-size:16px;}

body {
margin: 0px;
padding: 0px;
background-color: #161032;
color: #FEF3E4;
}

#topbar {
  position: relative;
  color: #D1A259;
  padding:0px 10px 3px 10px;
  font-family: Arial;
  background-image: url("bg5.jpg");
  background-repeat: repeat-x;
  background-position: bottom;
}

#topmenu {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}

#topmenu a {
text-decoration: none;
text-transform: uppercase;
font-family:Arial; 
font-size:9pt; 
color: #F2DDAC;
letter-spacing: 0.5px;
}

#topmenu a:hover {
color: #ff0066;
}

#micaa {color:#FAC12A; font-size:1.5em; letter-spacing: 0.07em; padding: 7px 0px 5px 0px; max-width: 80%; display: inline-block;}
#icon {
  position: absolute;
  top:15%; right:16px;
  display: none;
  color:#D1A259;
  padding:2px 16px;
  font-size: 36px;
}
#icon:hover {
  color:#D1A259;
}

.container {
    position: relative;
	margin-left: 10px;
}

#respmenu {
    width: 180px;
    position: absolute;
    top: 0px;
    left: 0px;
	background-color:#FAC12A;
	height: 100%;
}

#menu {
  color: #ffffff;
  font-size: 1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top:140px;
}

/*#menu {font-family: 'Comic Neue', sans-serif; color: #DAA450; margin-left:15px; font-size:1.1em; margin-top: 30px; line-height:1.2;}*/
#menu ul {list-style: none; margin: 0; padding: 0;}
#menu li {
	padding: 0px;
	margin: 0px;
	text-align:center;
}
#menu li a {
	text-decoration: none;
	display: block;
	padding: 7px 7px;
}

#artists {background-color: #30639D;}
#exhibitions {background-color: #BC371E;}
#events {background-color: #77916F;}
#books {background-color: #BC542F;}
#shop {background-color: #332183;}
#links {background-color: #4C704C;}

#artists:hover {background-color: #5088C2;}
#exhibitions:hover {background-color: #DC4128;}
#events:hover {background-color: #91A68A;}
#books:hover {background-color: #CE6844;}
#shop:hover {background-color: #4A31B5;}
#links:hover {background-color: #7CAA7C;}

#moremenu {display: none; text-align:center; margin:30px 0px; padding:20px 0px; background-color:#FDDC8D; font-size:0.9em; color:#ff9222;}
#moremenu a {color:#30639D; text-decoration: none; border-bottom: 1px solid #9721b5; padding-bottom: 3px; margin: 0px 10px;}
#donate {display: none;}

#newsletter {
width:140px;
margin:30px auto;
background:#FDDC8D;
font-size:1.1em;
padding:5px 0px;
border-radius: 20px;
text-align:center;
}
#newsletter:hover {
background:#FEECC6;
}
#newsletter a {
text-decoration: none; 
text-transform: lowercase;
display: block;
color:#30639D;
}

#maincol {
    margin-left: 180px;
	padding:5px 7px;
}

#respmenu.responsive {display:block; padding:30px 0px;}
#maincontent {background-color:#BC542F; padding:25px 20px;}

img.imgleft {float:left; margin: 10px 30px 30px auto;}
img.imgright {float:right; margin: 10px auto 30px 30px;}

.clearfix::after { /* make div of class clearfix to contain floating images */
  content: "";
  clear: both;
  display: table;
}

.hr {display:none;}

.reg {text-decoration: underline; color: #400000;}
A:hover.reg {text-decoration: underline; color: #A00E0E}
.nav {text-decoration: none; color: #FEF3E4}
A:hover.nav {text-decoration: none; color: #FFFFFF}
.nav2 {text-decoration: none; color: #400000; font-family:Arial; font-size:9pt; font-weight: bold}
A:hover.nav2 {text-decoration: none; font-family:Arial; font-size:9pt; color: #800000}
.nav3 {text-decoration: none; color: #FDF1DD; font-family:Arial; font-size:9pt; font-weight: bold}
A:hover.nav3 {text-decoration: none; font-family:Arial; font-size:9pt; color: #EFB339}
.space {letter-spacing: 0.1em; padding: 7px 0px 5px 0px}

h3 {
   width: 100%; 
   text-align: center; 
   padding: 0px;
   font-family: 'Handlee', cursive;
   font-size: 1.7em;
   color: brown;
}

h2 {
   text-align: left; 
   font-family: 'Handlee', cursive;
   font-size: 1.3em;
   color: #171D1C;
   border-bottom: 1px solid;
   margin: 20px 0px 40px 0px;
   line-height: 1.25;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   line-height: 1.25;
}

@media screen and (max-width: 1000px) {
  #micaa {font-size:1.2em;}
}
@media screen and (max-width: 800px) {
  #topmenu {display: none;}
  #icon {display: inline-block;}
  #respmenu {position:static; width:100%; display:none;}
  #maincol {margin-left: 0px;}
  #maincontent {max-width:100%;}
  .container {margin:0px;}
  #menu {margin-top:50px; font-size:1.1em;}
  #menu li a {padding:12px;}
  #moremenu {display: block;}
  img {max-width:100%;height:auto;}
  img.imgleft, img.imgright {float:none; margin:30px auto; display:block;}
}