/* /////////////////////// HOME PAGE ONLY /////////////////////////////////////// */

.homepage .banner {
	background: url(../img/hp-slide1.JPG) no-repeat center center;
	background-size: cover;
	min-height:650px;
-webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.homepage .banner h2 {
	color: #ffffff;
	font-size: 60px;
	font-weight: 900;
	margin-bottom: 23%;
	margin-left: 10%;
	max-width: 480px;
	text-transform: uppercase;
	line-height: 1.2em;
	display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;

}
a.purplecircle{
	font-weight:800;
	color: #553379;
	height: 170px;
	width: 170px;
	background-color: #c1d82f;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	padding-top: 58px;
	text-transform: uppercase;
	position: relative;
	top: -118px;
	left: 15%;
	font-size: 26px;
	line-height: 1.3em;
	letter-spacing: .04em;
	text-decoration: none;
	z-index: 200;
}
a.purplecircle:hover {background-color: #553379;  color:#c1d82f}
#maincontent.homepage {margin-top:-80px; padding-bottom:20px }
#maincontent .intro span{font-size:26px; color:#553379; text-transform:uppercase;font-weight: 600;}
#maincontent .intro p{ font-size:26px; line-height:1.8em}

/* All blocks */
.block {
	position: relative;
  width: 100%;
  margin-bottom:40px;
}
.homepage a {text-decoration:none}
hp.image {
  display: block;
  width: 100%;
  height: auto;
}
.mobileonly-hp {display:none; }
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.block:hover .overlay, .block:active .overlay, .block:focus .overlay {
  width: 100%;
}
.block img, .block50 img {max-width:100% }
.block50 {	position: relative;
  width: 50%;
  margin-bottom:40px; float:left}
.block50:hover .overlay, .block50:active .overlay, .block50:focus .overlay {
  width: 100%;
}
/*******************************/
.planet .overlay {
	display: -webkit-box;
	display: -webkit-flex;
	display: -webkit-flexbox;
	display: flex;
	height: 100%;
	background: #f0f5cc url(../img/hp-world-over.jpg) no-repeat center center;
	background-size: cover;
	}

.lefttext {font-weight:300;
color:#ffffff; line-height: 1.1em;
width: 50%;
font-size: 36px;
padding: 20px 23% 0px 20px

}
.lefttext h4{font-weight:600; color:#553379; text-transform:uppercase; margin:0px;
font-size: 40px}
.righttext { font-size:26px;
	width: 50%;
	
	padding-left: 11%;
	padding-right: 5%;

}
.righttext{font-weight:600;  line-height: 1.1em; align-self: center;
}
.righttext ul li:before {
		 content: "\00BB \0020";
	     } 
.righttext li {  padding-left: 16px; font-size: .85em;
  text-indent: -23px; margin-bottom:10px}
/*******************************/
.recycle {
	background: url(../img/hp-graph.JPG) no-repeat right center;
	height: 300px;
}

.recycle h2 {font-weight:600; font-size: 70px; color:#ffffff; text-align: center; padding-top: 110px;  line-height: 1.1em; text-decoration:none;
	text-transform: uppercase;} 
.recycle .overlay
{
	background: #c1d82F url(../img/hp-recycle.jpg) no-repeat center top;

}
.recycle p {	color: #553378; padding-top:110px; margin: 0 4%; font-size:40px;  line-height: 1.1em; font-weight:400; text-align:center}
.recycle strong {font-weight:500}
.recycle strong.black {
	font-weight:700;
	
}
/*******************************/

.houston {
	background: url(../img/hp-houston.JPG) no-repeat right bottom;
	min-height: 300px;

}
.houston h3 {
font-size: 37px;
color: #ffffff;
margin-left: 2%;
margin-top: 19px;
font-weight: 700;
position:absolute; bottom:5px;
margin-bottom:0px; text-transform:uppercase;
}
.houston .overlay  {
	color: #ffffff;
	background: url(../img/hp-houston-over.JPG);
}
.houston p {
 color:#ffffff;
    font-size: 30px;
    line-height: 1.3em;
    margin: 8% 10%;

}

/*******************************/

/*******************************/

.fluff {
	min-height: 300px;
	background: url(../img/hp-family.JPG) no-repeat right bottom;
}
.fluff h3 {font-size: 37px;
color: #ffffff;
margin-left: 5%;
margin-top: 19px;
font-weight: 700;
position:absolute; bottom:5px;
margin-bottom:0px; text-transform:uppercase}


.fluff .overlay  {
	background: url(../img/hp-family-over.JPG) no-repeat right bottom;
}
.fluff h4 {color: #553379; font-size:24px; margin-left: 6%; margin-top: 10%; text-transform:uppercase}
.fluff p {line-height:32px; font-size:26px; margin-left: 6%; margin-right:6%; 
	color: #553379;}
/*******************************/
@font-face {
    font-family: osw_bold;
    src: url('/fonts/Oswald-Bold.ttf') format('truetype');  
}


.essential {
	min-height: 300px;
	background: #DBF1EE url(../img/hp-training.JPG) no-repeat;
	color: #808285;
	font-size: 20px;
	background-size: contain;
}
.essential img {float:left; }
.essential h2 {font: 30px osw_bold, raleway, arial;
color:#000000;
line-height: 1.2em;
margin-bottom: 16%;
}
.ess-gray {padding-left: 60px;
max-width: 271px;
margin-top: -40px;}
.essential .abs {padding-left: 56%;padding-top: 6%;padding-right: 5%; }
.abs p {line-height:1.2em }
.essential .overlay  {background:#f1b81b; color: #000000;}
.essential .overlay p {
	line-height: 1.5em;
margin: 40px 7% 70px;
font-size: 24px;
}
.essential .course {margin-left: 5%;background: #6ec9ba; color:#000; 
float: left; padding: 15px 20px;
margin-right: 5%;}
.essential .course a {padding:15px 20px }
.essential .course a:hover {
    background-color: #fcedc6; }
.cdate { color:#000000; font-size:20px; font-weight: 700;

float: left;}
/*******************************/

.display {
	min-height: 300px;
	background: url(../img/hp-expo.JPG) no-repeat center center;
	background-size: cover;
}
.display  h3 {font-family: Raleway, Arial, Helvetica, sans-serif; 
font-size: 22px; color: #ffffff; font-weight: 600; position:absolute; bottom:0px; padding: 5px 0px; background-color:rgba(85,51,121,.7);
margin-bottom:0px; text-transform:uppercase; text-align:center; width:100%}

.display  .overlay{
	color: #ffffff;
	background: url(../img/hp-expo-over.JPG) no-repeat center center;
	background-size: cover;
}
.display  .overlay p {font-size: 24px;
margin: 12%;
line-height: 1.4em;}
/*******************************/

.planner {
	color: #553379;
	background: #f8f3fa url(/img/EventPlanner-hover.jpg) no-repeat center bottom;
	overflow: hidden;
	font-size:16px;

}
.planner h3 { font-weight:800; font-size:30px; padding-left: 36px; }
.planner a {color: #455560; }
.planner a:hover {color: #553379;}
.planner ul {list-style-type:none;}
.planner li {margin-bottom:1em; line-height: 1.3em; padding-left: 36px;padding-right: 20px; font-weight: 500;}
.planner .date { font-weight:700; }
.planner .pl-contact { line-height:2em; padding-top: 20px; border-top:solid 1px #553379;}
.planner .pl-contact .date { padding-top:20px}
@media (max-width: 1100px) {    /* Narrower screens */
.homepage .banner h2 {font-size:50px; }
.recycle h4 { font-size:32PX }
.recycle p  {font-size:26px}
.houston p, .fluff p {line-height:1.5em; font-size: 20PX;}
.essential .abs {font-size:15px}
.essential .overlay p {margin:20px 7% 20px }
.display .overlay p {font-size: 20px }
.essential .overlay p {margin: 25px 7% 25px;}

}
@media (max-width: 900px) {    /* Narrower screens */
.homepage .banner {min-height:500px }
.homepage .banner h2 {font-size:40px; margin-bottom:20%; margin-left:2% }
.lefttext h4 { font-size:30px }
.lefttext { font-size:30px; font-weight:500; padding:20px }
.righttext { font-size:20px }
.recycle h3 {font-size:40px; }
.recycle h4 { font-size:26PX }
.essential {
	background-size: 60%;
}
.essential .abs {padding-left: 35%;padding-top: 6%;padding-right: 5%; }

.essential .overlay p {font-size:16px;}
.essential h2 {font-size:25px}
.ess-gray {margin-top:-25px}
.cdate {width:auto; font-size:16px }
.houston h3, .fluff h3   {font-size:32px}
}

@media (max-width: 700px) {    /* Narrower screens */
#maincontent .intro p {font-size: 20px;	}
.overlay  {
	margin-top: 1%;
	color: #09C;
	background: #0C6;
}
.righttext  {padding-left:13%; padding-right:0px; font-size:18px;}
.lefttext  {padding: 20px; font-weight:500; }
.essential .abs {padding-left:5px;padding-top:50px; }
.essential .cdate {float:none; text-align: center; padding:20px 11%; width:100%; font-weight:700}
.essential .course {float:none; margin:5px 20%; Text-align: center; }
.essential h2 {font-size:20px}
.houston h3, .fluff h3   {font-size:24px}
}

@media (max-width: 550px) {                /* MOBIL ONLY */
.homepage .banner h2 {font-size:30px; margin-bottom:50%; margin-left:2% }

a.purplecircle {
	top: -50px;
	left: 50%;
font-size: 16px;
height: 100px;
width: 100px;
padding-top: 34px;
margin-left: -50px;
}
#maincontent.homepage {
    margin-top: -56px;
}

.nomobile-hp {display:none; }
.mobileonly-hp {display:block }  
#maincontent .intro h3 {font-size:22px }
#maincontent .intro p {font-size: 16px;	}
.billion .overlay { display:block;background: #f0f5cc; 
  position: relative;/* always display */
  width: 100%;
}
.lefttext{ width: 100%; font-size: calc(2vw + 20px); line-height:1.4em;	
	padding: 11% 11% 0%; margin:0px; text-align:center;}
.lefttext h4 {font-size:calc(2vw + 18px);}
.righttext {
	width: 100%;
	padding: 5% 5% 0px;
	margin:0px;
	text-align:center;
	background-size: 100%;
}
.righttext p {line-height: 1.5em; padding-left:0px}
.recycle  { }
.recycle .overlay  {
  width: 100%;
 }
.upcy
.recycle p.light {margin: 105px 11% 0px;
text-align: center;}
.regnow {background-color: #8347AD;
color: #D8C4E5;
text-decoration: none;
width: 100%;
display: inline-block;
text-align: center;
padding: 15px 10px;
text-transform: uppercase;
font-weight: bold;
border: none;
}
.block50 { width:100%; float:none; margin-bottom:20px; }

.houston {
	min-height: 200px;
	background: url(../img/hp-houston-over.JPG) no-repeat;
}
.houston p {font-size: 20px; text-align:center; padding-top:10px }

.fluff {min-height: 200px; padding-top:10px;
	background: url(../img/hp-family-over.JPG); }
.fluff h4 {
	margin-top: 0px;
}
.fluff p {font-size:20px; line-height:1.5em }
.essential .cdate {float:none; text-align: center; padding:20px 11%; width:100%;}
.essential .course {float:none; margin:5px 20%; Text-align: center; }
.essential .abs h2 {padding-top:11px; margin-bottom:2px; text-align:center}

.display {
	background: url(../img/hp-expo-over.JPG) no-repeat;
}
.display h3 {margin-left:0px; padding-top: 25px;

}
/* end of mobile */