/*
Theme Name: cityofwest
Theme URI: http://www.cityofwest.com/
Description: A custom theme developed by Internet Imagineering.
Version: 1.0
Author URI: http://www.internetimagineering.com/
Tags: fixed width, two columns
*/

:root {
    --beige: #ffedcf;
    --red: #be0121;
    --black: #000000;
    --ltgray: #DDDDDD;
    --midgray: #464646;
    --dkgray: #333;
    --white: #ffffff;
}

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Lato', trebuchet ms, arial, verdana, sans-serif;
	color: var(--black);
	font-size: 14px;
	font-weight: 300;
}

.clear { clear: both;}

.lightbox {display: none;}

/* TEXT */


/* IMG */
	img.imgFull {width: 100%;}
	
/* TEXT COLORS */
	.textRed {color: var(--red);}
	.textWhite {color: var(--white);}

/* LINKS */

	a.linkBlack {text-decoration: none; color: var(--black);}
	a:visited.linkBlack {text-decoration: none; color: var(--black);}
	a:hover.linkBlack {text-decoration: underline; color: var(--midgray);}
	
	a.linkRed {text-decoration: none; color: var(--red);}
	a:visited.linkRed {text-decoration: none; color: var(--red);}
	a:hover.linkRed {text-decoration: underline; color: var(--midgray);}
	
	a.linkSidebar {text-decoration: none; color: var(--black);}
	a:visited.linkSidebar {text-decoration: none; color: var(--black);}
	a:hover.linkSidebar {text-decoration: none; color: var(--red);}
	
	a.linkSearch {text-decoration: none; color: var(--red); font-weight: bold;}
	a:visited.linkSearch {text-decoration: none; color: var(--red);}
	a:hover.linkSearch {text-decoration: underline; color: var(--black);}
	
	a.linkSocial {font-size: 30px; text-decoration: none; color: var(--red); font-weight: bold; margin: 0 10px;}
	a:visited.linkSocial {text-decoration: none; color: var(--red);}
	a:hover.linkSocial {text-decoration: none; color: var(--black);}
	
	a.linkReadMore {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--dkgray); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--dkgray); text-decoration: none;}
	a:visited.linkReadMore {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--dkgray); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--dkgray); text-decoration: none;}
	a:hover.linkReadMore {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--red); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	
	a.linkButtonRed {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--red); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	a:visited.linkButtonRed {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--red); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	a:hover.linkButtonRed {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--white); background-color: var(--red); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	
	a.linkButtonRed2 {font-size: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--red); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	a:visited.linkButtonRed2 {font-size: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--red); background-color: var(--white); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	a:hover.linkButtonRed2 {font-size: 18px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--red); background-color: var(--red); padding: 4px 6px; border: 1px solid var(--red); text-decoration: none;}
	
	.content a {color: var(--red); text-decoration: none;}
	.content a:visited {color: var(--red); text-decoration: none;}
	.content a:hover {color: var(--red); text-decoration: underline;}

/* HEADINGS */
	h1.pageTitle {margin: 0 0 30px 0; font-weight: 300; font-size: 30px;}
	h3.navTitle {margin: 5px 0 30px 0; font-weight: 300; font-size: 24px;}
	
	h1.mainheading {font-family: 'PT Serif', times new roman, serif; font-size: 42px; text-transform: uppercase; margin: 0; padding: 0; font-weight: 400; letter-spacing: 2px;}
	h3.subheading {font-family: 'PT Serif', times new roman, serif; font-size: 22px; font-style: italic; margin: 0; padding: 0; font-weight: 400;}
	h3.newsTitle {font-size: 20px; font-style: 600; margin: 10px 0; padding: 0;}
	
	.lineSeparator {width: 120px; height: 3px; background-color: var(--ltgray); margin: 40px 0;}

/* HEADER */
	.headerWrapper {width: 100%; height: 80px; min-height: 80px; position: sticky; top: 0; margin: 0 0 0 0; border-top: 50px solid var(--white); background-color: var(--white); z-index: 99999;}
	.headerContainer {position: absolute; top: 40px; left: 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: 160px auto; grid-column-gap: 80px; width: 90%; max-width: 1440px; z-index: 9999999;}
	.headerLogo {width: 100%;  z-index: 9999999;}
	.headerGrayBar {background-color: var(--midgray); height: 80px; min-height: 80px;}
	
	.sectionpicWrapper {width: 100%; height: 170px; min-height: 170px; background: #fff url('images/sectionpic-1.jpg') no-repeat top;}
	
	.headerNav {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20px; margin: 8px 0 0 0;}
		.headerAnnouncement {color: var(--red); font-weight: bold;}
		.navHeader {text-align: right;}
		.navHeader a {margin: 0 5px;}
		
		.navMain {text-align: right; width: 100%; margin: 15px 0 0 0;}
		
/* MOBILE MENU */

	.menu-mobile {display: none; background-color: var(--midgray); width: 100%; padding: 70px 40px 20px 40px; color: var(--white); top: 100px;position: sticky; z-index: 999;}
	.menu-mobile-container ul {list-style-type: none; margin: 0 0 0 10px; padding: 0;}
	.menu-mobile-container ul li {list-style-type: none; margin: 10px 0 0 0; padding: 0; font-size: 18px;}
	.menu-mobile-container ul li a {color: var(--white); text-decoration: none;}

/* FRONT PAGE */
	.sliderWrapper {width: 100%; height: auto;}
	
	.frontFeatureWrapper {width: 98%; display: grid; grid-template-columns: 1fr 370px 1fr; grid-template-rows: 300px 300px; grid-column-gap: 20px; grid-row-gap: 20px; margin: 20px 1%;}
	.frontFeature1 {grid-row: 1 / 3; background: var(--white) url('images/front-feature-pic1.jpg') no-repeat top; background-size: cover; position: relative;}
	.frontFeature2 {background: var(--white) url('images/front-feature-pic2.jpg') no-repeat top; background-size: cover; position: relative;}
	.frontFeature3 {grid-area: 2 / 2 / 3 / 3; background: var(--white) url('images/front-feature-pic3.jpg') no-repeat top; background-size: cover; position: relative;}
	.frontFeature4 {grid-row: 1 / 3; background: var(--white) url('images/front-feature-pic4.jpg') no-repeat top; background-size: cover; position: relative;}
	
	.frontFeatureText {position: absolute; bottom: 10px; right: 20px; color: var(--white); text-align: right; font-family: 'PT Serif', times new roman, serif;}
	
	.frontFeatureText-1 {font-size: 22px;}
	.frontFeatureText-2 {font-size: 28px; text-transform: uppercase;}
	
	.frontFacts {width: 100%; background-color: var(--ltgray); padding: 60px 0; text-align: center;}
	.frontFacts-Container {width: 80%; max-width: 1200px; margin: 50px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px;}
	
	.frontFact-BigNumber {font-weight: bold; font-size: 60px;}
	.frontFact-Desc {font-weight: bold; font-size: 24px;}
	
	.frontNewsEvents-Wrapper {margin: 50px auto; width: 90%; max-width: 1440px; display: grid; grid-template-columns: 3fr 1fr; grid-column-gap: 80px; }
	
	.newsHolder {border-bottom: 2px dotted var(--midgray); padding: 0 0 30px 0; margin: 30px 0 0 0;}
	.newsCategory {text-transform: uppercase; letter-spacing: 1px;}
		.newsCategory a {color: var(--red); text-decoration: none;}
		.newsCategory a:visited {color: var(--red); text-decoration: none;}
		.newsCategory a:hover {color: var(--black); text-decoration: none;}
	.newsExcerpt {font-size: 16px; line-height: 24px;}
	.newsAllNews {margin: 10px 0 0 0;}
	
	.widgetCalendar {margin: 0px 0 0 -40px; padding: 0;}
	

/* LAYOUT */
	.contentWrapper {width: 90%; max-width: 1440px; margin: 100px auto; }
	.contentContainer-2col {width: 100%; display: grid; grid-template-columns: 300px auto; grid-column-gap: 100px;}
	.contentContainer-1col {width: 100%; display: block;}
	.containerSidebar {border-right: 1px solid var(--ltgray);}
	
	.leftnav {margin: 0; padding: 0;}
	.leftnav ul {margin: 0 0 0 20px; padding: 0;}
	.leftnav ul li {margin: 0; padding: 0; font-size: 18px; padding: 4px 0;}
	
	.content {font-size: 18px; line-height: 30px;}

/* FOOTER */
	.socialWrapper {width: 100%; padding: 40px 0; text-align: center; background-color: var(--beige);}
	
	.footerWrapper {width: 100%; background-color: var(--midgray); padding: 100px 0;}
	.footerContainer {width: 90%; max-width: 1000px; margin: 0 auto;}
	.footerContact {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px; text-align: center; color: var(--white);}
	.footerContact-Title {font-size: 14px; letter-spacing: 4px; font-weight: bold; text-transform: uppercase;}
	.footerContact-Text {margin: 10px 0 0 0; line-height: 24px;}
	
	.footerCopyright {margin: 50px auto 0 auto; text-align: center; text-transform: uppercase; color: var(--white); letter-spacing: 2px; font-size: 12px;}

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

#dropmenu li a.topnav {display:block; float:left; height:56px; text-decoration:none; cursor:pointer;  text-transform: uppercase; text-align: center; padding: 24px 30px 0px 30px;}

#dropmenu li:hover a.topnav, #dropmenu a:hover.topnav {background-color: var(--dkgray);}

#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:#fff;
	padding:0px;
}
#dropmenu ul a:hover {
	background-color: #fff;
}
#dropmenu li ul {
	background: var(--dkgray);
	top:80px;
	float: left;
	padding: 0px;
	margin: 0px;
	width: 250px;
	border-right:0px solid #fff;
	border-left:0px solid #fff;
	border-bottom: 3px solid var(--red);
	opacity: 1;
	text-align: left !important;
}

#dropmenu li ul li.current_page_item a {
	background:#fff;
	color: var(--red);
}

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

#dropmenu li ul a {
	width:215px;
	padding:10px 10px 10px 25px;
	font-size: 14px;
	float:left;
	font-weight: 300;
}

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

#dropmenu ul ul {
	top:auto;
}
#dropmenu li ul ul {
	left:240px;
	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;}
		
		#dropmenu li a.topnav {display:block; float:left; height:56px; text-decoration:none; padding:0; cursor:pointer;  text-transform: uppercase; text-align: center; padding: 24px 30px 0 30px;}
		

	
	}
	
	@media screen and (min-width: 1024px) and (max-width: 1199px) {
		
		.mobileNav {display: none;}
		
		.headerNav {width: 100%; display: grid; grid-template-columns: 1fr 1.8fr; grid-column-gap: 0px; margin: 8px 0 0 0;}
		
		#dropmenu li a.topnav {display:block; float:left; height:56px; text-decoration:none; padding:0; cursor:pointer;  text-transform: uppercase; text-align: center; padding: 24px 15px 0 15px;}
		

	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
			
			.topnavHolder {display: none;}
			
			.headerContainer {position: absolute; top: 30px; left: 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: 120px auto; grid-column-gap: 40px; width: 90%; max-width: 1440px;}
			.headerLogo {margin: 8px 0 0 0;}
			.headerNav {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; margin: 8px 0 0 0;}
			.headerAnnouncement {width: 100%;}
			.navHeader {display: none;}
			
			.mobileNav {font-size: 32px; color: var(--white); margin: 40px 0 0 0;}
			
			.contentWrapper {width: 90%; max-width: 1440px; margin: 50px auto; }
			.contentContainer-2col {width: 100%; display: block; }
			.containerSidebar {border-right: 0px solid var(--ltgray); background-color: var(--ltgray); padding: 20px; margin: 0 0 50px 0;}
			
			.frontNewsEvents-Wrapper {margin: 50px auto; width: 90%; max-width: 1440px; display: block; }
			
			.frontFeatureWrapper {display: none; }
			
		}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		
			.headerContainer {position: absolute; top: 30px; left: 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: 120px auto; grid-column-gap: 40px; width: 90%; max-width: 1440px;}
			.headerLogo {margin: 8px 0 0 0;}
			
			.headerNav {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; margin: 8px 0 0 0;}
			.headerAnnouncement {width: 100%;}
			.navHeader {display: none;}
			
			.mobileNav {font-size: 32px; color: var(--white); margin: 40px 0 0 0;}
			
			.contentWrapper {width: 90%; max-width: 1440px; margin: 50px auto; }
			.contentContainer-2col {width: 100%; display: block; }
			.containerSidebar {border-right: 0px solid var(--ltgray); background-color: var(--ltgray); padding: 20px; margin: 0 0 50px 0;}
			
			.frontNewsEvents-Wrapper {margin: 50px auto; width: 90%; max-width: 1440px; display: block; }
			
			.frontFeatureWrapper {display: none; }
		
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		.topnavHolder {display: none;}
		
		.headerContainer {position: absolute; top: 30px; left: 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: 120px auto; grid-column-gap: 40px; width: 90%; max-width: 1440px;}
		.headerLogo {margin: 8px 0 0 0;}
		.headerNav {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; margin: 0px 0 0 0;}
		.headerAnnouncement {width: 100%;}
		.navHeader {display: none;}
		
		.mobileNav {font-size: 32px; color: var(--white); margin: 40px 0 0 0;}
		
		.contentWrapper {width: 90%; max-width: 1440px; margin: 50px auto; }
		.contentContainer-2col {width: 100%; display: block; }
		.containerSidebar {border-right: 0px solid var(--ltgray); background-color: var(--ltgray); padding: 20px; margin: 0 0 50px 0;}
		
		.frontNewsEvents-Wrapper {margin: 50px auto; width: 90%; max-width: 1440px; display: block; }
		
		.frontFeatureWrapper {display: none; }
		
		.frontFacts-Container {width: 80%; max-width: 1200px; margin: 50px auto; display: block; }
		.frontFact-BigNumber {margin: 40px 0 0 0;}
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		.topnavHolder {display: none;}
		
		.headerContainer {position: absolute; top: 30px; left: 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: 120px auto; grid-column-gap: 40px; width: 90%; max-width: 1440px;}
		.headerLogo {margin: 8px 0 0 0;}
		.headerNav {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; margin: 0px 0 0 0;}
		.headerAnnouncement {width: 100%;}
		.navHeader {display: none;}
		
		.mobileNav {font-size: 32px; color: var(--white); margin: 40px 0 0 0;}
		
		.contentWrapper {width: 90%; max-width: 1440px; margin: 50px auto; }
		.contentContainer-2col {width: 100%; display: block; }
		.containerSidebar {border-right: 0px solid var(--ltgray); background-color: var(--ltgray); padding: 20px; margin: 0 0 50px 0;}
		
		.frontNewsEvents-Wrapper {margin: 50px auto; width: 90%; max-width: 1440px; display: block; }
		
		.frontFeatureWrapper {display: none; }
		
		.frontFacts-Container {width: 80%; max-width: 1200px; margin: 50px auto; display: block; }
		.frontFact-BigNumber {margin: 40px 0 0 0;}
		
	}
	
}

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

	.mobileNav {display: none;}

	
	
	
}