
body {
  margin: 0;
  
}


body
	{
	
	font-family			: Avenir, calibri, helvetica,arial,sans-serif;
	font-size			: 1.3em;
	line-height			: 1.5em;
	color				: #333; 	
	text-align			: left;   /* 8/27*/
	width:100%; background:#FF3F00;
	}

a {
 	color: #d32d27;
	text-decoration: none;
  
}


#container {
	max-width: 100%;  
	padding: 0px 0px;			/* 8/23 */
	height: auto;			/* 9/15/08 */
	border: 2px solid #e7e7e7;
	background:#fff;	
	padding: 10px 15%;
	
 } 

#content {
	 margin: 30px auto 40px auto;     /* Pushes content below the fixed header */       
}

#logo  img {width:50%}



h1
	{
	margin				: 0 0 0 0;
	padding				: 0;
	font-size			: 190%;  
	line-height			:1em;			 
	font-weight			: bold;
	}
h2
	{
	margin				: 1em 0 0 0;
	padding				: 0px;
	font-size			: 120%;
	color				: #093865; 	/* #DB3B00;*/	
	font-weight			: bold;
	}

h2 a  	{color				: #11297a;
	}

h3
	{
	margin				: 0em 0 0 0;
	padding				: 0px;
	font-size			: 110%;
	color				: #093865; 	/* #11297a;*/	
	font-weight			: bold;
	}



.flex-container-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
}


.flex-header-logo {
  flex: 80%;
  img {width:65%};
}

.flex-header-right {
   flex: 20%;
   Font-size:100%;
}



.flex-container-1  {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-container-2  {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}



.flex-item-75 {
  flex: 75%;
}

.flex-item-25 {
  flex: 25%;
   
}

.flex-1-image {

  Margin-top:10%;
  margin-left: 50%;
  margin-right: auto; 

  display: block;
  width: 200px;
  height: auto;
}




.flex-item-80 {
   flex: 75%;
   Padding: 20px 0;
}

.flex-item-20 {
  flex: 15%;
   
}

.flex-2-image {

  Margin-top: 0%;
  margin-left: 0%;
  margin-right: auto; 
  Margin-bottom:20%;
  display: block;
  width : 80%;
}


.mobile-flex-item-80, .mobile-only { display:none }
		




#classdesc
	{
	
	font-family			:  Nunito, Lucida Sans, helvetica,arial,sans-serif;
	font-size			: .9em;
	line-height			: 1.5em;
	color				: #2f2504; 	
	text-align			: left;   /* 8/27*/
	width:100%; 
	}



#footer {
	background: #FF3F00;
	padding: 30px 0 60px 0;
	margin: 0 0 ;
	width:100%;
}

.footer-container {
	padding: 10px 0; 
	margin: 0 10% 0 15%; 
	color: white;
}
	


/* header */

.header {
  background-color: #333333; /* 4PM */
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
  height: 80px;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #333333;   /* 4 PM */
}

.header li a {
  display: block;
  text-align: left;  /* right pushed items to right */
  padding: 15px 20px;
  Font-weight: semibold;
  font-family: Roboto, sans-serif;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
   Text-decoration: underline;
}

.header .logo {
  display: block;
  float: left;
  font-size: 1.2em;  /* RICHMAN */
  padding: 15px 0px 0px 20px;
  text-decoration: none;
   
}

.header a {
  Color:#FFFFFF;  /* changed the logo to near white */
}


/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* Hamburger menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #CCCCCC;   /* 4 PM */
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #CCCCCC;   /* 4 PM */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn: Hamburger Menu transition to an 'x' */

.header .menu-btn {   
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 320px;     /* controls total height of top-down menu items */
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {    
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}


/*

@media (min-width: 53em) {    /* default */

.flex-2-image {
  /*width : 100%; */
}
*/


@media (max-width: 110em) {   /* break 1 */
 body {font-size: 1.2em;}

.flex-2-image {
   Margin: 0;
   width : 80%; }

.flex-header-right {    /* phone number */
   Font-size:95%;
}


}


@media (max-width: 100em) {   /* break 2 - shrink both images */

 body {font-size: 1.1em;}

h1	{ font-size: 150%;}

.flex-header-right {    /* phone number */
   Font-size:85%;
 }


#logo  img {width:65%}

.flex-header-logo {
   img {width:80%};
 }


.flex-item-20 {
  flex: 20%;
 }

.flex-2-image {
   width : 100%; 
 }

.flex-1-image {
   Width: 80%;
 }

.flex-item-80 {
   Padding: 0 0 20px 0;
 }

}


@media (max-width: 53em) {  /* break 3 - drop both images */
   body {font-size: 1.1em;}

#container { padding: 0px 6%;}



h1	{ font-size: 120%;}


.flex-header-right {   /* phone number */
   Font-size:75%;
 }


.flex-header-logo {
   img {width:80%};
 }

.flex-container-1 {	/* eliminate flex */
  display: block;
 }


/* turn on the mobile-only divs and turn off the others */

.mobile-flex-item-80 {
   Display: block;
   Flex: 70%;
   Padding:0;
 }


.mobile-only { display: block;  width:100%; margin-bottom: 40px;}


.flex-item-25 {
  Display:none;
 }




.flex-item-80 {
  Display: none;
 }

#classdesc { font-size: 1em;}

#footer {font-size: .8em}  


}
	
   

