/******************************************************************
Theme Name: Start Strong
Theme URI: http://www.fenton.com/
Description: Custom built for Start Strong
Author: Fenton Communications
Author URI: http://www.fenton.com/
Version: 1.3

******************************************************************/
h1, h2, h3, h4, h5{font-family: 'Roboto Slab', 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;}
.sprite{background: url("library/images/sprite.png") no-repeat 0 0 transparent;}

.page-wrap{padding-left: 50px; padding-right: 50px;}
#sub-content.page-wrap{padding-left: 100px; padding-right: 100px;}
.header{padding-top: 5px;position: relative;
    z-index: 999;}
#logo{margin: 0px; position: absolute; width: 160px;}
	#logo img{width: 100%;}
	.navigation{padding: 25px 0 0;}
	.navigation ul{margin: 0px -50px; list-style: none; }
	.navigation ul li{white-space: nowrap; text-transform: uppercase; padding-left: 230px; height: 28px; font-size: 17px; font-family: 'Roboto Slab', 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;}
	.navigation ul li a{color: #fff; text-decoration: none;}
	.navigation ul li.green{background: url("library/images/bkg_green.png") repeat-x 0 0 #3b6a28;}
	.navigation ul li.orange{background: url("library/images/bkg_orange.png") repeat-x 0 0 #7c5e15;}
	.navigation ul li.blue{background: url("library/images/bkg_blue.png") repeat-x 0 0 #0a749a;}
	.navigation ul li.red{background: url("library/images/bkg_red.png") repeat-x 0 0 #8d5b59;}
	.content{position: relative;}
	
	/*** HOME PAGE CONTENT ***/
	#home-content{background: url("library/images/home_image.jpg") repeat 0 0 transparent; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover;}
	#home-intro{line-height: 1.35em; padding: 35% 0;}
	.home-content{float: left; background: url("library/images/bkg_home_content.png") repeat 0 0 transparent;    padding: 10px 20px 10px 120px; }
	.home-content h1, .home-content h2{color: #fff; margin: 0px;line-height: 1em;}
	.home-content h1{font-size: 52px;}
	.home-content h2{font-weight: normal; font-size: 36px;}
	
	/*** PAGE CONTENT ***/
	.page-content{padding-top: 30px; padding-bottom: 100px;}
		.green h1, .green .sub-headers a, .green .sub-headers, .green .close-sub-content, .green .prev-page, .green .next-page{color: #6abd45;}
		.orange h1, .orange .sub-headers a, .orange .sub-headers, .orange .close-sub-content, .orange .prev-page, .orange .next-page{color: #cd982b;}
		.blue h1, .blue .sub-headers a, .blue .sub-headers, .blue .close-sub-content, .blue .prev-page, .blue .next-page{color: #109dcf;}
	
	.sub-headers{font-size: 20px;}
		.sub-headers > div{float: left;}
		.sub-headers .divider{padding: 0px 10px; }
		.sub-headers a {text-decoration: none;}
		.sub-headers a:hover {opacity: 0.7;}
		
		/******SUB-HEADER CONTENT*****/
		#sub-content{box-shadow: 0 3px 5px #ddd, 0 -3px 5px #ddd; -moz-box-shadow: 0 3px 5px #ddd, 0 -3px 5px #ddd; -webkit-box-shadow: 0 3px 5px #ddd, 0 -3px 5px #ddd;  background: url("library/images/bkg_white.png"); position: absolute; z-index: 100; left: 0px; right: 0px; top: 1px; min-height: 98%; display: none;}
		.close-sub-content, .prev-page, .next-page{display: none;}
		#sub-content .close-sub-content, #sub-content .prev-page, #sub-content .next-page{display: block; position: absolute; z-index: 101; cursor: pointer;}
		#sub-content .close-sub-content{width: 18px; height: 18px; background-position:-235px -105px; top: 40px; right: 40px;}
#sub-content.green .close-sub-content{background-position:-235px -146px;}
#sub-content.red .close-sub-content{background-position:-235px -166px;}
#sub-content.blue .close-sub-content{background-position:-235px -125px;}
.activeheader{font-weight: bold;}
		#sub-content .prev-page, #sub-content .next-page{line-height: 1.3em; font-size: 12px; max-width: 75px; min-width: 26px; top: 180px; height: 57px; margin-top: -33px; background: url("library/images/arrows.png") no-repeat right center transparent; }
#sub-content.green .prev-page, #sub-content.green .next-page{background: url("library/images/green_arrows.png") no-repeat right center transparent;}
#sub-content.red .prev-page, #sub-content.red .next-page{background: url("library/images/red_arrows.png") no-repeat right center transparent;}
#sub-content.blue .prev-page, #sub-content.blue .next-page{background: url("library/images/blue_arrows.png") no-repeat right center transparent;}

		#sub-content .prev-page a, #sub-content .next-page a{color: #cd982b; text-transform: uppercase; text-decoration: none; font-weight: bold; display: block; margin-top: 5px; width: 100%; height: 100%;}
#sub-content.green .prev-page a, #sub-content.green .next-page a{color: #6ABD45;}
#sub-content.red .prev-page a, #sub-content.red .next-page a{color: #B52F28;}
#sub-content.blue .prev-page a, #sub-content.blue .next-page a{color: #109DCF;}
		#sub-content .prev-page{padding: 5px 0px 5px 25px; background-position: left bottom !important; left: 10px;}
		#sub-content .next-page{padding: 5px 25px 5px 0px; background-position: right top !important; right: 10px; text-align: right;}
		
		
		.page-content .article-header, #sub-content .main-content .page-content{padding: 0px;}
		#sub-content .sub-headers{margin-bottom: 20px;}
		.page-content .article-header {display: none;}
		#sub-content .main-content .next-page, #sub-content .main-content .prev-page{display: none !IMPORTANT;}
		.article-header{padding-top: 30px;}
		
		.sub-headers.page-4-elements > div{display: block; float: none; padding: 5px 0px 0px 55px; position: relative; border-bottom: 1px solid #CD982B; margin-bottom: 50px;font-family: 'Roboto Slab','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
}
		.sub-headers.page-4-elements > div > a{display: block; text-decoration: none; padding: 2px 8px 2px 20px; margin-top: 15px;}
		.sub-headers.page-4-elements > div > a:hover{background: #CD982B; color: #fff; }
		
		.page-4-elements.sub-headers img{position: absolute; left: 0px;}
		.page-4-elements.sub-headers .policy-change{padding-left: 40px;}
		.page-4-elements.sub-headers .policy-change a{padding-left: 35px;}

		.page-4-elements.sub-headers .social-marketing-and-communication img{left:-4px;top: 10px;}

		.page-4-elements.sub-headers .educate-youth-in-and-out-of-school{padding-left: 35px;}
		.page-4-elements.sub-headers .educate-youth-in-and-out-of-school img{left: -2px;}
		.page-4-elements.sub-headers .educate-youth-in-and-out-of-school a{padding-left: 40px;}
		.entry-content .rounded{margin: 20px 0px;}
		
	/*** SIDEBAR ****/
	.sidebar > div{margin-bottom: 40px;}
	.resource-links h3, .resource-links h1{height: 100px; margin: 0px; text-indent: -9999em; margin-bottom: 15px;}
	.rounded{padding: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; border-color: 1px solid #b1b1b1; box-shadow: 0 3px 5px #ddd, 0 -3px 5px #ddd; -moz-box-shadow: 0 3px 5px #ddd, 0 -3px 5px #ddd; -webkit-box-shadow: 0 3px 5px #ddd, 0 -3px 5px #ddd;}
	.media-caption{padding: 15px; background: #ecd6a3;}
	.media-wrap img{width: 100%;}
	
	/**** FOOTER ****/
	.home .footer{position: absolute; left: 0px; right: 0px;   bottom: 0px; }
	.footer{background: url("library/images/bkg_footer.png") repeat 0 0 transparent; font-size: 11px; color: #fff;line-height: 15px; padding: 15px 20px;}
	.footer a{color: #fff;}
		.collaborations .widget{float: right; margin-left: -10px;}
		.collaborations .widget img{margin-left: 10px;}
		.collaborations .widget strong{display: block; margin-left: 10px;}
	
		.social-media ul{list-style: none;}
		.social-media ul li{float: right; width: 30px; height: 25px; background: url("library/images/sprite.png") no-repeat 0 0 transparent;}
		.social-media ul li a{display: block; width: 100%; height: 100%; text-indent: -9999em;}
		.social-media ul li.em-btn{background-position: -115px -107px;}
		.social-media ul li.youtube-btn{background-position: 0px -107px;}
		.social-media ul li.twt-btn{background-position: -38px -107px;}
		.social-media ul li.flk-btn{background-position: -75px -107px;}
		
		
		
.callout{font-weight: normal;}
.relative{position: relative;}
.ir {display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; width: 100%; height: 100%; *text-indent: -9999px;}
.ir:before {content: ""; display: block; width: 0; height: 100%;}
.ir br {display: none;}

@media (max-width:480px){
	.navigation #menu-main-menu li{font-size: 65%; }

}
	
@media (max-width:767px){
	.page-wrap{padding-left: 0px; padding-right: 0px;}
	#sub-content.page-wrap{padding-left: 40px; padding-right: 40px;}
	
	#logo{width: 130px;}
	.navigation{padding: 10px 0px 0;}
	.navigation ul, .footer, #sub-content.page-wrap{margin: 0px -20px; }
	.navigation ul li{padding-left: 160px; font-size: 75%;}
	
	#home-content{margin-left: -20px; margin-right: -20px; }
	.home-content{padding: 10px 20px 10px 20px; }

	.home-content h1{font-size: 41px;}
	.home-content h2{font-size: 28px;}
	
	.home .footer{position: static; padding-left: 20px; padding-right: 20px;}
.collaborations .widget img{display: block; float: none;}
	
}

@media (min-width:1200px){
	.page-wrap{padding-left: 100px; padding-right: 100px;}
	#sub-content.page-wrap{padding-left: 200px; padding-right: 200px;}
	#logo{width: 194px;}
	.navigation{padding: 45px 0px 0px;}
	.navigation ul{margin: 0px -100px; }
	.navigation ul li{padding-left: 330px;}
	
	.home-content{padding: 10px 20px 10px 197px; }
	.home-content h1{font-size: 65px;}
	.home-content h2{font-size: 45px;}
}
#headerlink {float:right;}
#headerlink a {color:#6abd45 !important;font-size:12px;text-decoration: none;}
.alignleft {float:left; margin: 0 10px 10px 0;}
.alignright {float:right; margin: 0 0 10px 10px;}
.with_frm_style .frm_form_fields input, #wpcontent .with_frm_style .frm_form_fields select, .with_frm_style .frm_form_fields select, .with_frm_style .frm_form_fields textarea {width:100% !important;}

/* TOOLTIP */

.ui-tooltip {
	padding:8px;
	position:absolute;
	z-index:9999;
	-o-box-shadow: 0 0 5px #aaa;
	-moz-box-shadow: 0 0 5px #aaa;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
	
}
/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
	background-image: none;
}
body .ui-tooltip { border-width:2px; }

.ui-tooltip, .lsarrow:after {
background: #666666;
}
.ui-tooltip {
	
padding: 10px 20px;
color: #FFFFFF;
border-radius: 2px;
background: #666666;
/*box-shadow: 0 0 7px black;*/
}
.lsarrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.lsarrow.top {
top: -16px;
bottom: auto;
}
.lsarrow.left {
left: 20%;
}
.lsarrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.lsarrow.top:after {
bottom: -20px;
top: auto;
}


/* BOX Highlight Settings */

.lshowcase-boxhighlight {
	margin:10px;
	
	/* Nothing on normal state */
}


.lshowcase-boxhighlight:hover {
	
	-webkit-box-shadow:0 0 10px #CCC; 
	-moz-box-shadow: 0 0 10px #CCC; 
	box-shadow:0 0 10px #CCC; 
	
}



/* GRAYSCALE SETTINGS */

.lshowcase-grayscale, 
.lshowcase-hover-grayscale {
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	opacity:0.7;
	margin:10px;
	
    
}

.lshowcase-hover-grayscale:hover {
	  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(0%);
	opacity:1;
}


.lshowcase-clear-both {
	clear:both;
	height:0px;
}

/* Horizontal Carousel Settings */
/* More classes at /bxslider/jquery.bxslider.css */

.lshowcase-wrap-hcarousel {	
	display:inline-block;
	vertical-align:middle;
}
.lshowcase-slide {
	vertical-align: middle;
    display: inline-block;
    float: none !important;
	
}

/* NORMAL GRID SETTINGS */

.lshowcase-wrap-normal {
	display:inline-block;
	vertical-align:middle;
}

 .lshowcase-box-normal {
	 float:left;
	 vertical-align: middle;
	 display:inline-block;
	 }
 
.lshowcase-boxInner-normal {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
	padding:5px;
	margin:5px;
	
	}

.lshowcase-boxInner-normal img {
	margin:0 auto;
	text-align:center;
}

/* RESPONSIVE GRID SETTINGS */


    .lshowcase-box-12 {
      float: left;
      position: relative;
      width:8.3%;
      padding-bottom:8.3%;
    }
	
	.lshowcase-box-11 {
      float: left;
      position: relative;
      width:9.09%;
      padding-bottom:9.09%;
    }
	
	.lshowcase-box-10 {
      float: left;
      position: relative;
      width:10%;
      padding-bottom:10%;
    }
	
	.lshowcase-box-9 {
      float: left;
      position: relative;
      width:11.11%;
      padding-bottom:11.11%;
    }
	
	.lshowcase-box-8 {
      float: left;
      position: relative;
      width:12.5% !important;
      padding-bottom:12.5% !important;
    }
	
	.lshowcase-box-7 {
      float: left;
      position: relative;
      width:14.28%;
      padding-bottom:14.28%;
    }
	
	.lshowcase-box-6 {
      float: left;
      position: relative;
      width:16.6%;
      padding-bottom:16.6%;

    }
	
	.lshowcase-box-5 {
      float: left;
      position: relative;
      width:20%;
      padding-bottom:20%;
    }
	
	.lshowcase-box-4 {
      float: left;
      position: relative;
      width:25%;
      padding-bottom:25%;
    }
	
	.lshowcase-box-3 {
      float: left;
      position: relative;
      width:33.3%;
      padding-bottom:33.3%;
    }
	.lshowcase-box-2 {
      float: left;
      position: relative;
      width:50%;
      padding-bottom:50%;
    }
	.lshowcase-box-1 {
      float: left;
      position: relative;
      width:100%;
      padding-bottom:100%;
    }
	
	
    .lshowcase-boxInner {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      bottom: 10px;
      
	  padding:5px;
	  }
	  
    .lshowcase-boxInner img {
      width: 100%;
	  position:absolute;top:0;bottom:0;margin:auto;
	  
    }
	
	@media only screen and (max-width : 480px) {
      /* Smartphone view: 1 tile */
      .lshowcase-box-1,.lshowcase-box-2,.lshowcase-box-3,.lshowcase-box-4,.lshowcase-box-5,.lshowcase-box-6,.lshowcase-box-8,.lshowcase-box-12 {
        width: 100%;
        padding-bottom: 100%;
      }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
      /* Tablet view: 4 tiles */
	  
     .lshowcase-box-4, .lshowcase-box-5,.lshowcase-box-6,.lshowcase-box-8,.lshowcase-box-12 {
        width: 25%;
        padding-bottom: 25%;
      }
	  
	 .lshowcase-box-3 {
        width: 33.3%;
        padding-bottom: 33.3%;
      }
	  
	  .lshowcase-box-2 {
        width: 50%;
        padding-bottom: 50%;
      }
	  .lshowcase-box-1 {
		 width: 100%;
        padding-bottom: 100%;  
	  }
	  
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
      /* Small desktop / ipad view: 5 tiles */
 	  .lshowcase-box-5,.lshowcase-box-6,.lshowcase-box-8,.lshowcase-box-12 {
        width: 20%;
        padding-bottom: 20%;
      }
	  
     .lshowcase-box-4 {
        width: 25%;
        padding-bottom: 25%;
      }
	  
	 .lshowcase-box-3 {
        width: 33.3%;
        padding-bottom: 33.3%;
      }
	  
	  .lshowcase-box-2 {
        width: 50%;
        padding-bottom: 50%;
      }
	  .lshowcase-box-1 {
		 width: 100%;
        padding-bottom: 100%;  
	  }
	  
	  
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
      /* Medium desktop: 5 tiles */
	  
	  .lshowcase-box-5,.lshowcase-box-6,.lshowcase-box-8,.lshowcase-box-12 {
        width: 20%;
        padding-bottom: 20%;
      }
	  
     .lshowcase-box-4 {
        width: 25%;
        padding-bottom: 25%;
      }
	  
	 .lshowcase-box-3 {
        width: 33.3%;
        padding-bottom: 33.3%;
      }
	  
	  .lshowcase-box-2 {
        width: 50%;
        padding-bottom: 50%;
      }
	  .lshowcase-box-1 {
		 width: 100%;
        padding-bottom: 100%;  
	  }
	  
    }