/*
   feature an event with an image that is left aligned in title area
   responsive it will center and go to top

*/

.featured.aziza {
   display: none;
}

/*
.mhuw {
  display: none;
}
*/

div.featured, div.featured-c {
   margin: 1%; 
   background-color: #fdfadd; 
   border: 2px solid #f8ea78;
   padding: 1%;
}

.featured-c > img {
	float: none;
	display: block;
	padding: .5em;
	margin: auto;
	width: 35%;
}

.featured-c h2 {
	text-align: center;
	font-size: x-large;
}
.featured-c h3 {
	text-align: center;
	font-size: large;
}
.featured-c h4 {
	text-align: center;
	font-weight: normal;
}

.featured > img {
	float: left;
	display: block;
	padding: .5em;
	padding-right: 1.5em;
	height: 240px;
}

.featured h2 {
	text-align: left;
	font-size: x-large;
}
.featured h3 {
	text-align: left;
	font-size: large;
}

.featured-c td {
   vertical-align: top;
}

@media screen and (max-width: 690px) {
   .featured > img {
      float: none;
      display: block;
      margin: auto;
      height: 20%;
      }
   
   .featured h2, .featured h3, .featured-c h2, .featured-c h3  {
      padding: 0;
      text-align: center;
   }
   .featured h2, .featured-c h2  {
      font-size: 1.2em;
   }
   .featured h3, .featured-c h3  {
      font-size: 1.0em;
   }
   .featured td {
      padding-top: 0;
   }
   .featured-c > img {
      width: 60%;
   }
}