/*
=====================================================================
*   Kreative v1.0 Layout Stylesheet
*   url: styleshout.com
*   09-26-2013
=====================================================================

   TOC:
   a. Common Styles
   b. Header Styles
   c. Intro Section
   d. Services
   e. Portfolio
   f. Journal
   g. About
   h. Map
   i. Contact
   j. Blog Post
   k. Blog Entries
   l. Footer Styles
   m. Media Queries

===================================================================== */


/* ================================================================== */

/* a. Common Styles

/* ================================================================== */

.section-head h2 { font: 30px/42px montserrat-bold, sans-serif; }
.item p.desc { 
	font-size: 14px/18px;
	font-family: opensans-regular, sans-serif;
	line-height: 120%;
	width: 100%;
}
.intro { font: 20px/36px opensans-light, sans-serif; }


/* Left clearing for flexible columns - columns that changes width in
different screen sizes. Makes columns with different heights align
properly.
--------------------------------------------------------------------- */
.first { clear: left; }   /* first column in default screen */
.m-first { clear: none; } /* first column in medium size screens */

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides, .flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0; }
.slides img { max-width: 100%; height: auto; padding: 0;}


/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
    content: " ";
    display: table;
}
.slides:after {
    clear: both;
}

/* ================================================================== */

/* b. Header Styles

/* ================================================================== */

header {
   height: 54px;
   width: 100%;
   z-index: 99999;
   background-color: rgba(13, 81, 143, 0.6);

   position: fixed;
   top: 0;
   left: 0;
}
header.static {
   background-color: rgba(13, 81, 143, 0.6);
   position: static;
}

/* header logo */
header .logo {
   position: relative;
   height: 54px;
   width: 300px;
   float: left;
}
header .logo h1 a {
   position: relative;
   color: #FFFFFF;
   font-size: 14px;
}
header .logo a {
   color: #FFFFFF;
   display: block;
   padding: 0;
   margin: 0;
   height: 16px;
   width: 300px;
   position: absolute;
   left: 12px;
   top: 5px;
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* nav-wrap */
#nav-wrap {
	position: relative;
    font: 16px opensans-bold, sans-serif;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;

   /* center align the menu */
   text-align: center;
}
ul#nav li {
	position: relative;
	list-style: none;
   height: 54px;

   display: inline-block;
}
ul#nav > li.active a {
   background: #2484c6;
   color: #fff !important;
}

/* Links */
ul#nav li a {
   display: block;
   padding: 0 14px;
   line-height: 54px;
	text-decoration: none;
   text-align: left;
   color: #fff;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.active a { color: #2484c6; }

ul#nav li.notice a { background:#fdba12; font-weight:600; }


/* ================================================================== */

/* c. Intro Section

/* ================================================================== */


.masthead {
	position: relative;
	width: 100%;
	height: 300px;
	background-color:#0d518f;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	z-index:-1;
	}
.masthead img {
	margin-top: -54px;
	padding: 0;
	}

#intro {
	position: top;
   background: #0d518f url(../images/online4good_bg_gray6.jpg) no-repeat top left fixed;
   overflow:hidden;
   padding-top: 0px;
   color: #0d518f;
   height: 340px;
}

#intro .introtext {
   color: #FFFFFF; 
   margin: 0 auto;
   text-align:center;
   font: 20px/24px montserrat-bold, sans-serif;
}

#intro .introtext h3 {
	padding-top: 300px;
	color: #FFFFFF;
	font: 24px/32px montserrat-bold, sans-serif;
}

#intro2 {
   position: top;
   background: #0d518f url(../images/online4good_bg_gray5.jpg) no-repeat top left fixed;
   background-size:auto;
   padding-top: 80px;
   color: #FFFFFF;
   height: 450px;
   width: 100%;
   overflow:hidden;
}

#intro2 .introtext h3 {
   margin: 0 auto;
   padding-top: 160px;
   padding-left: 40px;
   font-size: 18px/24px montserrat-bold, sans-serif;
}

.blue { color: #0d518f; }

.textShadow {
    background-color: #ffffff;
    color: transparent;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	/*Chrome, Safari*/
    -webkit-background-clip: text;
	/*Firefox*/
    -moz-background-clip: text;
	/*Standard Syntax*/
    background-clip: text;
}


/* ================================================================== */

/* event description

/* ================================================================== */

#whatis {
   background: #2484c6;
   padding-top: 80px;
   padding-bottom: 40px;
   color: #FFFFFF;
   font: 18px/32px sans-serif;
}

#whatis a, #services a:visited  { color: #ffffff; text-decoration:none; }
#whatis a:hover, #services a:focus { color: #ffffff; text-decoration:underline; }

#whatis .section-head h2 { color: #ffffff; }
#whatis .section-head p.desc,
#whatis .section-head .intro { color: #ffffff; }

.services-wrapper { margin-top: 30px; }
.services-wrapper .col {
   margin-bottom: 30px;
   text-align:left;
   padding: 0;
}
.services-wrapper h2 {
	color: #ffffff;
	font: 20px/24px montserrat-bold, sans-serif;
	margin-bottom: 18px;
}
.services-wrapper p {
   font-size: 16px;
   line-height: 130%;
	margin-top: 10px;
}
.services-wrapper ul {
	list-style-type: disc;
	padding-left: 30px;
}
.services-wrapper ul li {
	font: 16px/28px opensans-regular, sans-serif;
	margin-bottom: 10px;
}
.videobox {
	display:block;
	background-color:#0d518f;
	border: solid #FFFFFF 2px;
	font-size: 16px;
	line-height: 130%;
	text-align:center;
	max-width: 400px;
}
.videobox img, p {
	margin-bottom: 5px;

}
.videobox a {
	text-decoration: none;
}
.videobox a:hover {
	color: #0d518f;
}

#whatis .services-wrapper i { margin-right: 10px; }

/* Video section */
#testimonials {
   background-color: #0d518f;
   padding-top: 40px;
   padding-bottom: 40px;
   text-align:center;
   color: #ffffff;
}
#testimonials p {
   font-size: 14px;
   max-width: 800px;
   margin: 0 auto;
}
#testimonials .section-head h2 { color: #ffffff; }
#testimonials h3 {
   font: 24px/30px montserrat-regular, sans-serif;
   margin-top: 24px;
   margin-bottom: 24px;
   color: #ffffff;
}

.portfolio-wrapper { margin-top: 30px; }
.portfolio-item {
   width: 33%;
   overflow:hidden;
   margin-bottom: 10px;
}



/* Reveal Modal Plugin Styles
---------------------------------------------------*/
.reveal-modal-bg {
   position: fixed;
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0;
}
.reveal-modal {
   visibility: hidden;
	top: 100px;
	left: 50%;
	margin-left: -300px;
   width: 600px;
	max-width: 600px;
	background: #fff;
	position: absolute;
	z-index: 101;
	padding: 0;

	-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
	box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal .description-box { padding: 18px 36px; }
.reveal-modal .description-box h4 {
   font: 15px/24px montserrat-bold, sans-serif;
	margin-bottom: 18px;
   color: #111;
}
.reveal-modal .description-box p {
	font: 13px/24px opensans-regular, sans-serif;
   color: #A1A1A1;
   margin-bottom: 18px;
}
.reveal-modal .description-box .categories {
   font: 11px/24px opensans-regular, sans-serif;
   color: #A1A1A1;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: block;
}
.reveal-modal .description-box .categories i {
   margin-right: 8px;
}
.reveal-modal .link-box {
   padding: 18px 36px;
   background: #111;
   text-align: left;
}
.reveal-modal .link-box a {
   color: #fff;
	font: 11px/24px opensans-regular, sans-serif;
	text-transform: uppercase;
   letter-spacing: 3px;
   cursor: pointer;
}
.reveal-modal a:hover {	color: #00CCCC; }
.reveal-modal a.close-reveal-modal { margin-left: 28px; }

/* ================================================================== */

/* g. About

/* ================================================================== */

#about {
   background: #fff;
   padding-top: 80px;
   padding-bottom: 30px;
   text-align:left;
   color: #777777;
}
#about .section-head h2,
#about h3 { color: #0c508e; }
#about .section-head p.desc { color: #999999; }
#about .section-head .intro { color: #0c508e; }
#about h3 {
   font: 24px/30px montserrat-regular, sans-serif;
   margin-top: 24px;
   margin-bottom: 24px;
   color: #0c508e;
}
#about .button {
	background: #0c508e;
	margin-top: 10px;
	padding: 10px 20px;
}

#about .button:hover {
	background: #0071bb;
}
#about p {
	font-size: 14px;
	margin-top: 5px;
}

.caps {
	text-transform:uppercase;
}

.time {
	display:inline-block;
	width: 20%;
	max-width: 100px;
	float: left;
	color: #0c508e;
	font-size: 16px;
}
.item {
	width: 80%;
	float: left;
	line-height: 120%;
	padding-top: 5px;
	padding-top: 5px;
}



/* parent educator info */
.process-wrap { 
	width: 100%; 
	text-align: center;
	padding: 20px;
		}
.process-wrap .col { 
	display: block;
	width: 44%; 
	margin-left: 6%;
	margin-bottom: 10px;
	border: 1px solid #0d518f;
	border-radius: 10px;
	padding: 20px;
	}
.process-wrap p { 
	color: #525252;
	}

#about .process-wrap h4 {
   font: 20px/24px montserrat-bold, sans-serif;
   text-transform: uppercase;
}

/* ================================================================== */

/* g. Join

/* ================================================================== */

#join {
   background: #0d518f;
   padding-top: 40px;
   padding-bottom: 40px;
   text-align:center;
   color: #ffffff;
}
#join p {
   font-size: 14px;
   max-width: 800px;
   margin: 0 auto;
}
#join .section-head h2 { color: #ffffff; }
#join .section-head p.desc { color: #777777; }
#join .section-head .intro { color: #752b8e; }
#join h3 {
   font: 24px/30px montserrat-regular, sans-serif;
   margin-top: 24px;
   margin-bottom: 24px;
   color: #ffffff;
}
#join .button {
	background: #6f2c91;
	margin-top: 20px;
	border: 2px solid #FFFFFF;
	       -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;

}
#join .button:hover {
	background: #0d518f;
}


/* Testimonials
/* ------------------------------------------------------------------ */
.testimonials { margin-top: 30px }

.testimonials .client-author {
   position: relative;
}
.testimonials .client-author img {
   height: 66px;
   width: 66px;

   -moz-border-radius: 100% 100% 100% 100%;
	-webkit-border-radius: 100% 100% 100% 100%;
	-khtml-border-radius: 100% 100% 100% 100%;
	border-radius: 100% 100% 100% 100%;
}
.testimonials .client-author .name {
   font: 14px/24px montserrat-bold, sans-serif;
   color: #0f9095;

   position: absolute;
   top: 6px;
   left: 80px;
}
.testimonials .client-author span {
   font-family: opensans-regular, sans-serif;
   line-height: 18px;
   font-size: 13px;
   color: #969696;
   display: block;
}
.testimonials .client-cite {
   font: 18px/36px opensans-light, sans-serif;
}


/* ================================================================== */

/* h. Map

/* ================================================================== */

#map {
   display: block;
	height: 486px;
   width: 100%;
   background-color: #F6F4EF;
}
#map img { max-width:inherit !important; }
#map .map-error {
  text-align: center;
  padding-top: 48px;
  color: #C0B491;
  font-size: 14px;
}


/* ================================================================== */

/* i. register block

/* ================================================================== */

#contact {
   background-color: #0071bb;
   padding-top: 60px;
   padding-bottom: 60px;
   color: #ffffff;
}

#contact a, #contact a:visited  { color: #ffffff; }
#contact a:hover, #contact a:focus { color: #0c508e; }

#contact .section-head { margin-bottom: 42px; }
#contact .section-head h2 { color: #ffffff; }
#contact .section-head p.desc,
#contact .intro { color: #c8c9ca; }
#contact p {  }

#contact .button {
	background: #fdba12;
	margin-top: 20px;
	font-size:18px;
	text-transform:uppercase;
	padding: 20px;
}

#contact .button:hover {
	background: #fdba12;
}


/* contact sidebar */
#contact aside h3 {
   font: 21px/30px montserrat-bold, sans-serif;
   margin-bottom: 18px;
   color: #11ABB0;
}


/* ================================================================== */

/* l. footer

/* ================================================================== */

footer {
   margin-top: 30px;
   margin-bottom: 30px;
   color: #525252;
   font-size: 13px;
   line-height: 150%;
   text-align:left;
}
footer a, footer a:visited { font-size: 13px; color: #6f2c91; text-decoration: none;}
footer a:hover, footer a:focus { text-decoration: underline;}

/* copyright */
footer .copyright {
    margin: 0;
    padding: 0;
 }
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.ie footer .copyright li {
   display: inline;
}

footer .copyright li:before {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
    color: #0b8b89;
}
footer .copyright  li:first-child:before {
    display: none;
}

/* social links */
footer .social-links {
   margin: 0;
   padding: 0;
   font-size: 18px;
   position: relative;
   top: -30px;
   float: right;
}
footer .social-links li {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-left: 24px;
}
footer .social-links li:first-child { margin-left: 0; }


/* ================================================================== */

/* m. Media Queries

/* ================================================================== */


/* small screens
--------------------------------------------------------------------- */
@media only screen and (max-width: 836px) {

   /* adjust sections padding top */
   #services, #whatis, #about { padding-top: 40px; }

   #intro { padding: 120px 10px 40px 10px; height: auto; }
   
   #intro .introtext p {
	   font-size: 14px;
   }
   #intro .introtext img {
	   width: 80%;
   }

   /* adjust font size */
   .intro, .testimonies .client-cite { font-size: 18px; }


   /* intro section
   -------------------------------------------------------------------- */
   .slider-text h2 { font: 48px/66px montserrat-regular, Sans-serif; }

   /* services section
   -------------------------------------------------------------------- */
   #services .section-head .col { width: 100%; }
   #services .services-wrapper { margin-top: 12px; }
   #services .services-wrapper .col { width: 50%; }
   #services .services-wrapper .col { margin-bottom: 0; }


   /* about section
   -------------------------------------------------------------------- */
   #about .process-wrap .col { width: 50%; margin-left: 0; }

   /* about section
   -------------------------------------------------------------------- */
   #about .section-head .col { width: 100%; }

   /* contact section
   ----------------------------------------------------------------------- */
   #contact label { width: 25%; }
   #contact button.submit { margin-left: 25%; }
   #contact input,
	#contact textarea,
	#contact select { width: 70%; }
   #message-warning, #message-success { width: 95%; }

   /* left clearing */
   .first { clear: none; }
   .m-first { clear: left; }


}



/* mobile wide
---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

   /* center align some text */
   .section-head, .intro, #about h3,
   #journal .entry-header {
      text-align: center;
   }


   /* mobile navigation
   -------------------------------------------------------------------- */

   header.mobile { height: 66px; }
   header.mobile .logo a { top: 2px; }

   .mobile #nav-wrap {
      position: absolute;
      top: 0;
      right: 10px;
      width: auto;
      margin: 0;
   }
   .mobile #nav-wrap > a {
	   width: 48px;
		height: 48px;
		text-align: left;
		background-color: #83c5d7;
		position: relative;
      border: none;
      float: right;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      }

	.mobile #nav-wrap > a:before,
   .mobile #nav-wrap > a:after {
	   position: absolute;
		border: 2px solid #fff;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}
   .mobile #nav-wrap > a:after { top: 60%; }

   /* toggle buttons */
	.mobile #nav-wrap:not( :target ) > a:first-of-type,
	.mobile #nav-wrap:target > a:last-of-type  {
	   display: block;
	}

   /* hide menu panel */
   .mobile #nav-wrap ul#nav {
      height: auto;
		display: none;
      clear: both;
   }
   .mobile #nav-wrap ul#nav li {
      display: block;
      width: 100%;
      height: 100%;
      text-align: left;
   }
   .mobile #nav-wrap ul#nav > li.active a {
      color: #83c5d7 !important;
      background: none;
   }

   /* display menu panels */
	.mobile #nav-wrap:target > ul#nav	{
	   display: block;
      padding: 12px 25px 24px 25px;
      background: #0b8b89;
	  opacity: .90;
      margin: 0;
      clear: both;
   }
   .mobile #nav-wrap ul#nav li { border-bottom: 1px dotted #83c5d7; }
   .mobile #nav-wrap ul#nav li a {
      margin: 0;
      padding: 0;
      font-size: 13px;
      margin: 10px 0;
      line-height: 14px;
      border: none;
   }

    /* intro section
   -------------------------------------------------------------------- */
   .slider-text { margin-top: 120px; margin-bottom: 48px; }
   .slider-text h2 { font: 43px/54px montserrat-regular, sans-serif; }
   .slider-text p {
      font: 14px/30px opensans-regular, sans-serif;
      margin-top: 30px;
   }
   .slides {
      overflow: hidden;
      min-height: 300px;
   }

	#intro .introtext h3 {
		font-size:20px;
	}
   /* contact section
   ----------------------------------------------------------------------- */
   #contact label {
      display: block;
      float: none;
      width: auto;
   }
   #contact input,
	#contact textarea,
	#contact select {
      width: 100%;
      margin-bottom: 30px;
	}
   #contact button.submit {
      margin-left: 0;
   }
   #message-warning,
   #message-success {
      width: 100%;
   }



   /* footer
   ------------------------------------------------------------------------ */
   footer .copyright li { margin-right: 0px; }
   footer p, .copyright, footer .social-links {
      text-align: center;
      float: none;
   }
   footer .social-links { margin-top: 12px; }

}

/* mobile narrow
  -------------------------------------------------------------------------- */

@media only screen and (max-width: 460px) {

   /* intro section
   ------------------------------------------------------------------------- */
   .slider-text { margin-top: 108px; margin-bottom: 36px; }
   .slider-text h2 { font: 32px/42px montserrat-regular, sans-serif; }
   .slider-text p {
      font: 12px/24px opensans-regular, sans-serif;
      margin-top: 24px;
   }


}