#gallery {width: 60%; height: auto !important; float: left; margin: 2em 20%; }
#slides { margin-top: 0.5em; width: 100%; height: auto !important;      font-size: 0.8em; display: block;  }
ul.slides {width: 100%; margin: 0 ; }

.flex-caption { width: 80%;  padding: 0 10%; text-align: center;
  color: #fff;
  line-height: 1.5em;;
}
.flex-prev, .flex-next { color: #000; font-size: 1em; line-height: 1em; width: 10%; margin-bottom: 1em; margin-top: 1em;}
 .flex-prev {margin-left: 15%;} .flex-next {margin-right: 10%;}
.arrow a:hover {opacity: 1;}

.flex-control-thumbs {
  /*margin: 5px 0 0; */ /* width of thumbnails? */
  margin: 5px auto; width: 90%;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {

/*  width: 25%; 
margin: 0;*/ 
width: 14%;
margin: 4px 6px; display: inline-block;
  float: none;
}
.flex-control-thumbs img {
border: #fff 2px solid;
-webkit-box-shadow: 0 1px 2px #000; -moz-box-shadow: 0 2px 1px #000; 	box-shadow: 0 2px 1px #000;	
	
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  cursor: pointer;
}
.flex-control-thumbs img:hover {
  opacity: 0.5;
  -webkit-box-shadow: 0 1px 2px #524e80; -moz-box-shadow: 0 2px 1px #524e80; 	box-shadow: 0 2px 1px #524e80;
}
.flex-control-thumbs .flex-active {
  opacity: 0.4;
  cursor: default;
   -webkit-box-shadow: 0 1px 2px #fafafa; -moz-box-shadow: 0 2px 1px #fafafa; 	box-shadow: 0 2px 1px #fafafa;
}


.mems {width: 100%; text-align: center; padding-top: 7em;}
.mems img {width: 15%; margin: 1em 2%; display: inline-block;}

.cw1 {width: 90%;}
.cw2 {width: 91%;}
.cw3 {width: 100%;}
.cw4 {width: 95%;}
.cw5 {width: 55%;}
.cw6 {width: 83%;}