/*
Theme Name: Caritas of Waco
Theme URI: http://www.caritas-waco.org/
Description: A custom theme developed by Internet Imagineering for use on www.caritas-waco.org.
Version: 1.0
Author URI: http://www.internetimagineering.com/
Tags: fixed width, two columns
*/

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Oswald', arial, trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

.clear { clear: both;}

/* FONTS */
/* font-family: 'Oswald', sans-serif;
/* font-family: 'PT Serif', serif;

/* GLOBAL - MOBILE */

	.m-header-navigation {display: none;}
	.m-search {display: none;}
	
	.menu-content {width: 90%; display: none; position: absolute; z-index: 999999999999; background-color: #155883; padding: 20px 5% 30px 5%; margin: 0px 0 0 0;top: 125px;}
	.menu-content ul {list-style-type: none; width: 100%; margin: 0; padding: 0;}
	.menu-content ul li {color: #fff; margin: 10px 0; padding: 0; font-size: 16px; text-transform: uppercase; font-weight: bold;}
	.menu-content ul li a {color: #fff; text-decoration: none;}
	.menu-content ul li a:hover {color: #f00; text-decoration: none;}
	
	.menu-content ul ul {list-style-type: disc; width: 100%; margin: 10px 0; padding: 0;}
	.menu-content ul ul li {color: #ccc; margin: 5px 20px; padding: 0; font-size: 14px; text-transform: initial;}
	.menu-content ul ul li a {color: #ccc; text-decoration: none;}
	.menu-content ul ul li a:hover {color: #f00; text-decoration: none;}

/* HEADINGS */

	h1 {font-size: 42px; font-family: 'PT Serif', times new roman, serif; font-weight: normal; margin: 0 0 20px 0; padding: 0;}
	h2 {font-size: 34px; font-family: 'PT Serif', times new roman, serif; font-weight: normal; margin: 10px 0 0px 0; padding: 0;}
	
	h1.pagetitle {font-size: 42px; font-family: 'PT Serif', times new roman, serif; font-weight: normal; margin: 0; padding: 0;}
	h1.bigNumber {font-size: 72px; font-family: 'PT Serif', times new roman, serif; font-weight: normal; margin: 0; padding: 0; color: #0e67a2;}
	h3.subtitle {font-size: 24px; font-weight: bold; margin: 0px 0; padding: 0; text-transform: uppercase;}
	
	h5.subtitle {font-size: 18px; font-weight: bold; margin: 0px 0; padding: 0; text-transform: uppercase;}
	h5.fronttitle {font-size: 24px; font-weight: bold; margin: 0; padding: 0; min-height: 100px;}
	
	.content h3 {font-size: 28px; font-family: 'PT Serif', times new roman, serif; font-weight: normal; margin: 0; padding: 0; font-style: italic; color: #0e67a2;}

/* COLORS */

	.blue {color: #0e67a2 !important;}
	.white {color: #fff !important;}
	.red {color: #ff3300 !important;}

/* LINKS */

	a.blackLink {color: #333; text-decoration: none;}
	a:visited.blackLink {color: #333; text-decoration: none;}
	a:hover.blackLink {color: #0e67a2; text-decoration: none;}
	
	a.whiteLink {color: #fff; text-decoration: none;}
	a:visited.whiteLink {color: #fff; text-decoration: none;}
	a:hover.whiteLink {color: #000; text-decoration: none;}
	
	a.blueLink {color: #0e67a2; text-decoration: none;}
	a:visited.blueLink {color: #0e67a2; text-decoration: none;}
	a:hover.blueLink {color: #000; text-decoration: none;}
	
/* BUTTONS */

	button.buttonGreen {background-color: #33cc99; padding: 8px 20px; border: 0px; color: #fff; cursor: pointer;}
	button:hover.buttonGreen {background-color: #004500;}
	
	button.buttonRed {background-color: #ff3300; padding: 8px 20px; border: 0px; color: #fff; cursor: pointer;}
	button:hover.buttonRed {background-color: #900;}
	
/* HEADER */

	.wrapperHeader {width: 90%; max-width: 1600px; margin: 0 auto;}
	.headerLogo {width: 227px; float: left; margin: 10px 0 10px 0;}
		.headerLogo img {width: 100%;}
	.headerRight {width: 80%; float: right;}
		.navHeader {}
			.headerSlogan {float: left; font-family: 'PT Serif', times new roman, serif; font-size: 16px; font-style: italic; margin: 12px 0 0 0;}
			.headernav {float: right;}
				.headerlinks {float: right; text-transform: uppercase; font-size: 14px; font-weight: bold; margin: 10px 20px 0 0;}
				.actionnav {float: right;}
					.actionbutton {font-size: 16px; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: bold; margin: 0 5px;}
		.navPrimary {margin: 30px 0 0 0;}

/* FRONT PAGE */

	/*.frontSlider {width: 100%; background:#fff url("images/slider-temp.jpg") no-repeat top; height: 665px; min-height: 665px;}*/
	.frontSlider {width: 100%; background-color: #fff; height: auto; min-height: auto;}
	
	.frontImpact {width: 100%; background-color: #33cc99; padding: 5px 0;}
	.frontImpact2 {width: 100%; background-color: #D3D3D3; padding: 50px 0px 50px 0px;}
		
	
		.graphicimpact {width: 80%; margin: -250px auto 0 auto; max-width: 1400px;}
		.graphicimpact img {width: 100%;}
		
	.frontCTAs {width: 70%; max-width: 1440px; margin: 80px auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; text-align: center; column-gap: 20px;}
	.frontCTAs2 {width: 70%; max-width: 1440px; margin: 80px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; align-items: center; column-gap: 20px;}
		.ctaIcon {font-size: 72px;}
		.ctaDesc {font-size: 20px; margin: 20px 0;}
		.ctaDesc2 {font-size: 20px; margin: 10px 0; color: #fff;}
		.ctaLink {font-size: 24px; text-transform: uppercase;}
		
		.fronttext {width: 80%; margin: 50px auto; text-align: center;}
		
		.frontFeatures {width: 100%; background:#fff url("images/texture1-bg.jpg") repeat-y top; padding: 100px 0;}
		.containerFrontFeatures {width: 80%; max-width: 1440px; display: grid; grid-template-columns: 1fr 1fr; text-align: center; column-gap: 100px; margin: 0 auto;}
		.containerFrontEvent {width: 80%; max-width: 1440px; text-align: center; margin: 0 auto;}
		
	.frontIcons {width: 90%; max-width: 1600px; margin: 0 auto 50px auto; text-align: center;}
	.holder-fronticon {display: inline-block; width: 12%; margin: 0 2%; text-align: center; vertical-align: top; }
		.holder-fronticon img {width: 90%; text-align: center;}

/* PAGE */

	.wrapperPage {width: 90%; max-width: 1600px; margin: 100px auto; display: grid; grid-template-columns: 350px 1fr 10fr;}
	
	.content {font-size: 20px; margin: 50px 0; line-height: 32px;}
	
	.wrapperTestimonials {width 80%; padding: 80px 10%; text-align: center; background-color: #33cc99;}
		.contentTestimonial {font-size: 22px;}
		
/* LEFTNAV */

	.leftnav_title {font-size: 26px; font-family: 'PT Serif', times new roman, serif; margin: 18px 0 0 0;}

	.leftnav {margin: 16px 0; font-size: 18px;}
	.leftnav ul {margin: 0; padding: 0; list-style-type: none;}
	.leftnav ul li {color: #ff3300; font-size: 20px; font-weight: bold;}
	.leftnav ul li a {color: #ff3300; text-decoration: none;}
	.leftnav ul li a:visited {color: #ff3300; text-decoration: none;}
	.leftnav ul li a:hover {color: #000; text-decoration: none;}

	.leftnav ul li ul {margin: 0 0 0 25px; padding: 0; list-style-type: disc;}
	.leftnav ul li ul li {color: #666; margin: 3px 0; padding: 3px 0; font-size: 14px; font-weight: 300; border-bottom: 0px;}
	.leftnav ul li ul li a {color: #666; text-decoration: none;}
	.leftnav ul li ul li a:visited {color: #666; text-decoration: none;}
	.leftnav ul li ul li a:hover {color: #000; text-decoration: none;}
		
/* FOOTER */

	.wrapperFooter {width: 90%; padding: 50px 5%; background-color: #999999; display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0 0 0;}
	.footerCopyright {color: #fff; font-size: 18px; text-align: left;}
	.footerContact {color: #fff; font-size: 18px; text-align: right;}
	.footerLinks a {margin: 0 20px 0 0;}



.mobilenav ul {list-style-type: disc; margin: 0; padding: 0 30px;}
.mobilenav ul li {margin: 5px 0 0 20px; padding: 5px 0; border-bottom: 2px dotted #333; font-size: 16px;}
.mobilenav ul li a {color: #0395d3; text-decoration: none;}
.mobilenav ul li a:visited {color: #0395d3; text-decoration: none;}
.mobilenav ul li a:hover {color: #0395d3; text-decoration: underline;}

.alignright { float: right; }
.alignleft { float: left; }
img.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}


/* Drop-down menus */
#dropmenu, #dropmenu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
	font-weight:bold;
	z-index: 6000;
}
#dropmenu a {
	color: #0e67a2;
	text-decoration: none;
	font-weight: bold;
}

#dropmenu li a.about{display:block; float:left; height: 50px; text-decoration:none; padding:0; cursor:pointer; text-transform: uppercase; font-size: 22px; margin: 0 40px 0 0;}
#dropmenu li a.programs {display:block; float:left; height: 50px; text-decoration:none; padding:0; cursor:pointer; text-transform: uppercase; font-size: 22px;  margin: 0 40px 0 0;}
#dropmenu li a.treasures {display:block; float:left; height: 50px; text-decoration:none; padding:0; cursor:pointer; text-transform: uppercase; font-size: 22px;  margin: 0 40px 0 0;}
#dropmenu li a.involved {display:block; float:left; height: 50px; text-decoration:none; padding:0; cursor:pointer; text-transform: uppercase; font-size: 22px;  margin: 0 40px 0 0;}


#dropmenu li:hover a.about, #dropmenu a:hover.about {}
#dropmenu li:hover a.programs, #dropmenu a:hover.programs {}
#dropmenu li:hover a.treasures, #dropmenu a:hover.treasures {}
#dropmenu li:hover a.involved, #dropmenu a:hover.involved {}


#dropmenu li {
	float:left;
	position:relative;
	display:block;
}
#dropmenu ul {
	position:absolute;
	display:none;
	height:auto;
	border-bottom:2px solid #000;
}
#dropmenu ul a {
	color:#000;
	padding:0px;
}
#dropmenu ul a:hover {
	background-color: #fff;
}
#dropmenu li ul {
	background:#fff;
	top:50px;
	float: left;
	padding: 0px;
	margin: 0px;
	width: 300px;
	border-right:0px solid #fff;
	border-left:0px solid #fff;
	border-bottom: 0px solid #fff;
	opacity: .9;
}

#dropmenu li ul li.current_page_item a {
	background:#fff;
	color:#369;
}

#dropmenu li ul li {
	border-top:0px solid #fff;
}

#dropmenu li ul a {
	width:260px;
	padding:10px 10px 6px 25px;
	font-size: 20px;
	float:left;
	font-weight: 400;
}

#dropmenu li ul a:hover {
	color: #f00;
}

#dropmenu ul ul {
	top:auto;
}
#dropmenu li ul ul {
	left:175px;
	margin:0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
	display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
	display:block;
}


@media screen and (min-width: 0px) and (max-width: 1440px) {


	@media screen and (min-width: 1200px) and (max-width: 1440px) {
	
		.mobilenav {display: none;}	
	
		.headerSlogan {display: none;}

		.headerRight {width: 70%;}
		.navPrimary {margin: 30px 0 0 0; float: right;}

	}
	
	@media screen and (min-width: 1024px) and (max-width: 1199px) {
	
		.mobilenav {display: none;}	
		
		.wrapperHeader {width: 95%; max-width: 1600px; margin: 0 auto;}
		
		.headerRight {width: 70%;}
		.navPrimary {margin: 30px 0 0 0; float: right;}
		
		.headerSlogan {display: none;}

	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		.mobilenav {font-size: 36px; float: right; margin: -80px 0 0 0;}
		
		.headerSlogan {display: none;}
		.headernav {display: none;}
		.navPrimary {display: none;}
		
		.wrapperPage {width: 90%; max-width: 1600px; margin: 100px auto; display: grid; grid-template-columns: auto; grid-template-rows: auto;}
		
		.holder-fronticon {display: inline-block; width: 25%; margin: 20px 2%; text-align: center; vertical-align: top; }
			.holder-fronticon img {width: 50%; text-align: center;}
			
		.containerFrontFeatures {width: 80%; max-width: 1440px; display: grid; grid-template-columns: auto; text-align: center; column-gap: 0px; row-gap: 30px; margin: 0 auto;}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
			
			
			
		}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		

		
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		.mobilenav {font-size: 36px; float: right; margin: -70px 0 0 0;}
		
		.headerLogo {width: 190px; float: left; margin: 10px 0 10px 0;}
		
		.headerSlogan {display: none;}
		.headernav {display: none;}
		.navPrimary {display: none;}
		
		.wrapperPage {width: 90%; max-width: 1600px; margin: 40px auto; display: grid; grid-template-columns: auto; grid-template-rows: auto;}
		
		.frontCTAs {width: 90%; max-width: 1440px; margin: 80px auto; display: grid; grid-template-columns: auto; text-align: center; column-gap: 0px; row-gap: 30px;}
		
		.holder-fronticon {display: inline-block; width: 30%; margin: 20px 2%; text-align: center; vertical-align: top; }
			.holder-fronticon img {width: 50%; text-align: center;}
			
		.containerFrontFeatures {width: 80%; max-width: 1440px; display: grid; grid-template-columns: auto; text-align: center; column-gap: 0px; row-gap: 30px; margin: 0 auto;}
		
		.wrapperFooter {width: 90%; padding: 50px 5%; background-color: #999999; display: grid; grid-template-columns: auto; margin: 10px 0 0 0; row-gap: 20px;}
		.footerCopyright {color: #fff; font-size: 18px; text-align: center;}
		.footerContact {color: #fff; font-size: 18px; text-align: center;}
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		.mobilenav {font-size: 36px; float: right; margin: -70px 0 0 0;}
		
		.headerLogo {width: 190px; float: left; margin: 10px 0 10px 0;}
		
		.headerSlogan {display: none;}
		.headernav {display: none;}
		.navPrimary {display: none;}
		
		.wrapperPage {width: 90%; max-width: 1600px; margin: 100px auto; display: grid; grid-template-columns: auto; grid-template-rows: auto;}
		
		.frontCTAs {width: 90%; max-width: 1440px; margin: 80px auto; display: grid; grid-template-columns: auto; text-align: center; column-gap: 0px; row-gap: 30px;}
		
		.holder-fronticon {display: inline-block; width: 40%; margin: 20px 2%; text-align: center; vertical-align: top; }
			.holder-fronticon img {width: 50%; text-align: center;}
		
		.containerFrontFeatures {width: 80%; max-width: 1440px; display: grid; grid-template-columns: auto; text-align: center; column-gap: 0px; row-gap: 30px; margin: 0 auto;}
		
		.wrapperFooter {width: 90%; padding: 50px 5%; background-color: #999999; display: grid; grid-template-columns: auto; margin: 10px 0 0 0; row-gap: 20px;}
		.footerCopyright {color: #fff; font-size: 18px; text-align: center;}
		.footerContact {color: #fff; font-size: 18px; text-align: center;}
		
	}
	
	
	
}

@media screen and (min-width: 1401px) {

	.mobilenav {display: none;}	
	
	
}