/*

Theme Name: Centerwest New
Theme URI: https://www.centerwest.org
Description: The 2017 theme for the Center of the American West.
Author: Grayson Scherer <gscherer@elementswebdev.com> 
Version: 2.0
Tags:
General comments: The Center of the American West 2017

*/

/*

Colors:

cu-gold: #CFB87C;
cu-black: #000;
cu-dark-grey: #565A5C;
cu-light-grey: #A2A4A3;

cw-blue: #0070A8;
cw-gold: #ECE4CE;

*/

/*

Notes:

Create menu `mainmenu`
Create menu `footermenu`
Create menu `socialmenu`


*/

/** Reset
 * -------------------------------------------------------------------------- */

@import("normalize.css");

/** Base
 * -------------------------------------------------------------------------- */

html {
	font-size: 100%; /* base font size is 16px = 1em */
	background-color: white;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: black;
	margin: 0;
	background: url(/images/mainimages/background-blurred.jpg) no-repeat center center;
	background-size: cover;
}

body:before {
	content: ' ';
	position: fixed;
	background: url(/images/mainimages/background-blurred.jpg) no-repeat center center;
	background-size: cover;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 200;
	font-family: "MyriadPro-Cond", "myriad-pro-condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3, h4 {
	font-size: 1.5em;
}

h5, h6 {
	font-size: 1.125em;
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, .home-feature-title a:link {
	color: #565A5C;
}

a {
	color: #CFB87C;
	text-decoration: none;
}

a:link {
 color:#0070A8;
}

a:active {
	outline: none;
	-moz-outline-style: none;
}

a:focus {
	-moz-outline-style: none;
}

p {
	margin: 0.5em 0;
}

p:first-child {
	margin-top: 0;
}

/** Layout
 * -------------------------------------------------------------------------- */

[class*='col-'] {
  float: left;
}

.col-1-2 {
	width: 50%;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.col-1-4 {
	width: 25%;
}

.col-3-4 {
	width: 75%;
}

.col-1-5 {
	width: 20%;
}

.col-2-5 {
	width: 40%;
}

.col-3-5 {
	width: 60%
}

.col-4-5 {
	width: 80%;
}

.row {
	/* cols must be in rows */
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.container {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

.container-not-rel {
	/* used in front-page.php */
	width: 960px;
	margin: 0 auto;
}

.page-container {
	/* used on body tag */
	min-width: 960px;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

a.button {
	display: inline-block;
	background-color: #565A5C;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	text-align: center;
	padding: 0.5em;
	min-width: 80px;
	text-decoration: none;
	-webkit-transition: background-color 300ms;
	-moz-transition: background-color 300ms;
	-o-transition: background-color 300ms;
	transition: background-color 300ms;
}

a.button:hover {
	background-color: #0070A8;
}

.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-item {
	display: inline-block;
}

.tm {
	font-variant: small-caps;
}

.imginfo {
	margin: 0;
}

/** Add to Calendar Plugin
 * -------------------------------------------------------------------------- */
.addtocalendar {
	position: absolute !important;
	right: 0;
	top: 0;


}

/** Post Listings (bios, staff pics)
 * -------------------------------------------------------------------------- */

.post-image-lists {
	background-color: #ECE4CE;
	padding: 2em 0 0 0;
}

.post-image-list-title {
	color: #565A5C;
	text-transform: uppercase;
	font-size: 1.25em;
	margin: 0 0 1em 0;
}

.post-image-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-image-list-item {
	height: 240px;
	margin-bottom: 1em;
}

a.post-image-list-link {
	display: block;
	text-decoration: none;
	color: black;
	height: 100%;
	margin: 0 1em 0 0;
	position: relative;
}

a.post-image-list-link:hover {
	color: white;
}

a.post-image-list-link:hover .post-image-list-item-caption {
	background-color: #565A5C;
}

.post-image-list-cover {
	width: 100%;
	height: 200px;
	background-color: white;
}

.post-image-list-cover iframe {
	height: 200px;
	width: 100%;
}

.post-image-list-item-caption {
	width: 100%;
	background-color: white;
	font-size: 0.75em;
	-webkit-transition: background-color 300ms;
	-moz-transition: background-color 300ms;
	-o-transition: background-color 300ms;
	-ms-transition: background-color 300ms;
	transition: background-color 300ms;
}

.post-image-list-item-caption p {
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 1em;
	margin: 0;
	white-space: nowrap;
}

/** Header
 * -------------------------------------------------------------------------- */

.header-container {
	position: relative;
	padding: 1em 0;
	border-top: 3px solid #CFB87C;
	-webkit-box-shadow: 0 4px 6px -6px #A2A4A3;
	   -moz-box-shadow: 0 4px 6px -6px #A2A4A3;
	        box-shadow: 0 4px 6px -6px #A2A4A3;
	z-index: 10; /* box shadow will show over gallery */
	background: white;
}

.header-logo {
	display: block;
	text-decoration: none;
	background: url("/images/mainimages/cu-logo.png") top left no-repeat; /* cu-logo.png is 65px x 62px */
	padding-left: 75px;
	min-height: 62px;
	max-width: 50%;
}

.header-title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.75em;
	color: black;
	margin: 0;
}

.header-subtitle {
	margin: 0;
	color: black;
	text-transform: uppercase;
	font-size: 0.75em;
}

.header-menu {
	position: absolute;
	width: 50%;
	top: 0;
	right: 0;
	text-align: right;
}

/** Top Menu (in header)
 * -------------------------------------------------------------------------- */

.menu-topmenu-container {
	display: inline-block;
	margin-bottom: 1em;
}

#menu-topmenu {
	font-size: 0.8em; /* default is 10px where 16px = 1em */
	margin: 0;
	font-weight: bold;
}

#menu-topmenu .menu-item {
	margin-left: 1em;
}

#menu-topmenu .menu-item:first-child {
	margin-left: 0;
}

#menu-topmenu a {
	color: #565A5C;
	-webkit-transition: color 300ms;
	-moz-transition: color 300ms;
	-o-transition: color 300ms;
	-ms-transition: color 300ms;
	transition: color 300ms;
}

#menu-topmenu a:hover {
	color: #0070A8;
}

/** Search
 * -------------------------------------------------------------------------- */

#cse-search-box {
	width: 180px;
	display: inline-block;
	box-sizing: border-box;
	margin-left: 1em;

}

#cse-search-box input[type=submit] {
	display: none;
}

#cse-search-box input[type=text] {
	background: white url("/images/mainimages/search-icon.png") 97% 0.25em no-repeat !important;
	max-width: 100%;
	border: 1px solid #A2A4A3;
	outline: 0;
	height: 1.5em;
	padding: 0.5em 30px 0.5em 0;
	color: #565A5C;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: right;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
    font-size: 0.75em;
}

#cse-search-results iframe {
	width: 100%;
}


/** Main Menu
 * -------------------------------------------------------------------------- */

.main-menu {
	height: 3.5em;
	background: #565A5C;
	position: relative;
}

#menu-mainmenu a {
	color: white;
	font-weight: bold;
	font-size: 1em;
}

#menu-mainmenu li {
	-webkit-transition: background-color 350ms;
	-moz-transition: background-color 350ms;
	-o-transition: background-color 350ms;
	-ms-transition: background-color 350ms;
	transition: background-color 350ms;
}

#menu-mainmenu > li {
	display: inline-block;
	line-height: 3.5em;
	width: 20%;
	text-align: center;
	margin-right: -4px; /* inline-block whitespace fix */
	position: relative; /* sub menus positioned absolute */
}

#menu-mainmenu > li:hover {
	background-color: #0070A8;
}

#menu-mainmenu > li:hover .sub-menu {
	z-index: 10; /* show sub menus */
	opacity: 1;
}

#menu-mainmenu > li:first-child + li + li {
	margin-left: 20%; /* make room for logo in the center */
}

#menu-mainmenu .sub-menu {
	position: absolute;
	z-index: -1; /* hide sub menus behind page */
	top: 3.5em;
	background: #efefef;
	padding: 0;
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 350ms;
	-moz-transition: opacity 350ms;
	-o-transition: opacity 350ms;
	-ms-transition: opacity 350ms;
	transition: opacity 350ms;
}

#menu-mainmenu .sub-menu li {
	display: block;
	line-height: 2.5em;
	text-align: left;
	text-indent: 1.5em;
}

#menu-mainmenu .sub-menu li:hover {
	background-color: #0070A8;
}

#menu-mainmenu .sub-menu li:active,
#menu-mainmenu .current-page-ancestor {
	background-color: #CFB87C;
}

#menu-mainmenu .sub-menu a {
	font-size: 0.75em;
	color: #565A5C;
	display: block;
	height: 100%;
}

#menu-mainmenu .sub-menu li:hover a {
	color: white;
}

/** Logo
 * -------------------------------------------------------------------------- */

.logo-container {
	display: block;
	position: relative;
	margin: 0 auto;
	height: 156px;
	width: 160px;
	margin-bottom: -156px;
	z-index: 10;
}

.logo {
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	background: url("/images/mainimages/logo-med.png") no-repeat;
	top: 0.5em;
}

/** Slides
 * -------------------------------------------------------------------------- */

.slides-container {
	background: #ECE4CE;
	position: relative;
	height: 375px;
}

/** Pages
 * -------------------------------------------------------------------------- */
.content-container {
	position: relative;
}

.page-content {
	box-sizing: border-box;
	padding: 4em 2em;
	background: white;
	-webkit-box-shadow: 0 -4px 6px -6px black;
	-moz-box-shadow: 0 -4px 6px -6px black;
	box-shadow: 0 -4px 6px -6px black;
	min-height: 1000px;
}

/** Posts
 * -------------------------------------------------------------------------- */

.page-column {
	padding: 4em 2em 0 2em;
}

.page-column-no-pad {
	padding: 0 2em;
}

.post-parent-title {
	margin: 0;
	color: #A2A4A3;
	font-size: 1em;
	text-transform: uppercase;
	border-bottom: 1px solid #EFEFEF;
	padding-bottom: 1em;
}

.post-title, .post-main-title {
	text-transform: uppercase;
	color: #CFB87C;
}

.post-main-title {
	color: #0070A8;
	margin-bottom: 0;
}

.post-sub-title {
	margin-top: 0;
}

.page-sub-menu-container ul {
	margin-bottom: 1em;
	padding: 0;
}

.page-sub-menu-container li {
	list-style: none;
	float: left;
	text-align: center;
	padding: 0 0.5em;
	margin: 0 0.5em 0.5em -0.5em;
	line-height: 1.5em;
	background-color: white;
	-webkit-transition: background-color 300ms;
	-moz-transition: background-color 300ms;
	-o-transition: background-color 300ms;
	transition: background-color 300ms;
}

.page-sub-menu-container li:hover {
	background-color: #0070A8;
}

.page-sub-menu-container a {
	color: black;
	font-weight: bold;
	text-decoration: none;
}

.page-sub-menu-container li:hover a {
	color: white;
}

.page-sub-menu .current_page_item {
	background-color: #CFB87C;
}

.page-sub-menu .current_page_item a {
	color: white;
}

.post-content {
	color: #565A5C;
	margin-top: 2em;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
	color: black;
}

.post-content {
	line-height: 175%;
}

.post-content-a {
	line-height: 100%;
}

.post-content li {
	margin-bottom: 1.25em;
}

.post-content p {
	margin-bottom: 1.5em;
	text-align: justify;
}

.post-content img {
	max-width: 100%;
	text-align: center;
}

.post-meta {
	margin-bottom: 1em;
	position: relative;
}

.post-meta-date {
	margin-top: -1em;
}

.post-listing-bookshelf {
    width: 50%;
    float: left;
}
.post-listing-bookshelf .post-title {
    font-size: 1.2em;
    text-align: center;
    white-space: nowrap;
}
.bookshelf-image a,
.bookshelf-image img {
	display: block;
    height: 280px;
}

.bookshelf-image img {
	margin: 0 auto;
}

.post-listing {
	border-bottom: 1px solid #efefef;
	padding-bottom: 2em;
}

.post-listing:after {
	content: "";
	display: table;
	clear: both;
}

.event-image {
	float: left;
	margin-right: 1em;
}

/* Force "add to calendar" button to be red */
.atc-style-blue .atcb-link {
	background: red !important;
}

.resources-pdf {
    background: url("/images/mainimages/pdfsm.png") no-repeat left top;
    padding-left: 30px;
}

.resources-podcast {
    background: url("/images/mainimages/podcastsm.png") no-repeat left top;
    padding-left: 30px;
}
.resources-video {
    background: url("/images/mainimages/videosm.png") no-repeat left top;
    padding-left: 30px;
}
.resources-website {
    background: url("/images/mainimages/websitesm.png") no-repeat left top;
    padding-left: 30px;
}

/** Page Sidebar
 * -------------------------------------------------------------------------- */

.sidebar-container {
	background: #ECE4CE;
}

.sidebar-inner-container {
	padding: 1em;
}

.sidebar-title {
	color: #0070A8;
	font-weight: bold;
	font-size: 1em;
}

.sidebar p {
	color: #565A5C;
	margin-top: 1em;
	font-size: 0.75em;
	line-height: 200%;
}

.sidebar-quote {
	font-style: italic;
}

.sidebar-image {
	height: 135px;
	overflow: hidden;
}

.sidebar-image img {
	margin: 0 auto;
	display: block;
	height: auto;
}

.sidebar-list {
	padding: 0;
	margin: 0 0 2em 0;
}

.sidebar-list li {
	list-style: none;
	padding: 0 0.5em;
	margin: 0.5em 0;
    	display: block;
	margin-right: 60px;
}

.sidebar-list a {
	font-size: 0.75em;
	text-decoration: none;
}


/** Post Navigation
 * -------------------------------------------------------------------------- */

.nav-prev {

}

.nav-next {
	float: right;
}

#nav-below {
	padding-top: 1em;
}

/** Footer
 * -------------------------------------------------------------------------- */

#footer {
	position: relative;
	background: #565A5C;
	border-top: 12px solid #0070A8;
	padding: 4em 0;
}

#footer-logo-left {
	position: absolute;
	left: 2em;
	top: 1em;
	display: block;
	cursor: point;
}

#footer-logo-right {
	position: absolute;
	right: 2em;
	top: 1em;
	display: block;
	cursor: pointer;
}

.footer-menu {
	text-align: center;
}

.menu-socialmenu-container li,
.menu-footermenu-container li {
	display: inline-block;
	margin: 0 0.25em 0 0;
}

.menu-socialmenu-container,
.menu-footermenu-container {
	margin: 1em 0;
}

#menu-socialmenu li {
	background: url("social-icons.png") no-repeat;
	height: 60px;
	width: 60px;
	border-radius: 30px;
}

#menu-socialmenu li.youtube {
	background-position: 0 0;
}

#menu-socialmenu li.subscribe {
	background-position: -60px 0;
}

#menu-socialmenu li.twitter {
	background-position: -120px 0;
}

#menu-socialmenu li.instagram {
	background-position: -180px 0;
}

#menu-socialmenu li.facebook {
	background-position: -240px 0;
}

#menu-socialmenu li.podcast {
	background-position: -300px 0;
}

#menu-socialmenu li.pinterest {
	background-position: -360px 0;
}

#menu-socialmenu li.youtube:hover {
	background-position: 0 -60px;
}

#menu-socialmenu li.subscribe:hover {
	background-position: -60px -60px;
}

#menu-socialmenu li.twitter:hover {
	background-position: -120px -60px;
}

#menu-socialmenu li.instagram:hover {
	background-position: -180px -60px;
}

#menu-socialmenu li.facebook:hover {
	background-position: -240px -60px;
}

#menu-socialmenu li.podcast:hover {
	background-position: -300px -60px;
}

#menu-socialmenu li.pinterest:hover {
	background-position: -360px -60px;
}

#menu-socialmenu a {
	height: 100%;
	display: block;
	cursor: pointer;
}

.menu-footermenu-container a {
	color: white;
	text-decoration: none;
	font-size: 0.75em;
}

.menu-footermenu-container li {
	list-style: none;
	text-align: center;
	padding: 0 0.5em;
	line-height: 1.5em;
	background-color: transparent;
	-webkit-transition: background-color 300ms;
	-moz-transition: background-color 300ms;
	-o-transition: background-color 300ms;
	transition: background-color 300ms;
}

.menu-footermenu-container li:hover {
	background-color: #0070A8;
}

.footer-title {
	margin: 0 0 0.5em 0;
	text-align: center;
	font-size: 1.5em;
	color: #A2A4A3;
	font-style: italic;

}

/** Breadcrumbs
 * -------------------------------------------------------------------------- */

#breadcrumbs {
	list-style: none;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #A2A4A3;
}

#breadcrumbs li {
	margin: 0;
	display: inline;
	color: #A2A4A3;
}

#breadcrumbs a {
	color: #A2A4A3;
}


/** Home Page
 * -------------------------------------------------------------------------- */

/* Home image lists */

#home-post-image-lists {
	min-height: 300px;
	padding-bottom: 0;
}

/* Home page callout */

#home-callout {
	background: white;
	height: 12em;
}

#home-callout .container,
#home-callout [class*='col-'] {
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

#home-callout [class*='col-'] {
	padding: 1em 0;
}

#home-callout-title {
	color: #0070A8;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	font-size: 2em;
}

#home-callout-tagline {
	font-style: italic;
	text-align: center;
	margin: 0;
}

#home-callout-text {
	font-size: 0.75em;
	line-height: 1.75em;
}

#home-callout-button {
	position: absolute;
	width: 100%;
	bottom: 1.5em;
	padding: 0;
	margin: 0;
	text-align: center;
	z-index: 20;
}

/* Home page feature */

.home-feature {
	position: relative;
	height: 300px;
	width: 50%;
	top: auto;
	background-repeat: no-repeat;
	background-size: auto 100%;
	float: left;
}

.home-feature-left {
	left: auto;
	background-position: 50% 25px; /* account for hover hand */
}

.home-feature-right {
	right: auto;
	background-position: 50% bottom;
}

.home-feature-left .home-feature-title {
	padding-left: 0;
	text-align: right;
}

.home-feature-right .home-feature-title {
	padding-right: 0;
}



/* Home page feature */

.home-feature-title {
	padding: 0 1em;
}

.home-feature-title span {
	display: block;
}

.home-feature-title-line1 {
	text-transform: uppercase;
	color: #565A5C;
}

.home-feature-title-line2 {
	font-size: 0.6em;
	color: #CFB87C;
}

/** Bios
 * -------------------------------------------------------------------------- */

 .bio-list {
 	padding: 0;
 	list-style: none;
 }

.bio-list-item {
	height: 250px;
	overflow: hidden;
	text-align: center;
	margin-bottom: 3em !important;
}

.bio-thumbnail {
	display: block;
	height: 137px;
	width: 100px;
}

.bio-summary {
	font-size: 0.75em;
	padding: 0 1.5em 0 0;
}

.bio-summary a {
	font-weight: bold;
}

.post-content .bio-summary {
	text-align: left;
	line-height: 125%;
}

.bio-image {
	float: left;
	margin: 0.5em 1.5em 0.5em 0;
}

/** Project Reports
 * -------------------------------------------------------------------------- */

.project-report-header {
	background: #6A4731;
	padding: 1em;
	box-sizing: border-box;
	text-align: center;
	color: white;
}

.project-report-title {
	font-weight: bold;
}

.project-report-content .post-title,
.project-report-content .post-main-title {
	color: #6A4731;
	text-align: center;
}

.project-report-content .post-sub-title {
	text-align: center;
}

.project-report-sidebar {
	background: none;
}

.project-report-sidebar .current_page_item {
	background-color: #CFB87C;
}

.project-report-sidebar .sidebar-title {
	color: #CFB87C;
}

.project-report-sidebar .sidebar-list a {
	color: #565A5C;
	font-weight: bold;
}

.project-report-sidebar li:hover {
	background-color: #0070A8;
}

.project-report-sidebar li:hover a {
	color: white;
}

.project-report-sidebar .current_page_item a {
	color: white;
}

.project-report-header.annualretreat {
	background: black;

}

.project-report-content.annualretreat .post-title,
.project-report-content.annualretreat .post-main-title {
	color: black;
}

/*

Add specific project styling here for "Project Class" overrides.

Example setting 'Report Class' to 'glo'

.project-report-header.glo {
	background: green;
}

.project-report-content.glo .post-title,
.project-report-content.glo .post-main-title {
	color: green;
}


*/


/** Media Queries
 * -------------------------------------------------------------------------- */

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

}


@media only screen and (min-width: 1224px) {
	.container, .container-not-rel {
		width: 1024px;
	}

	.slides-container {
		height: 456px;
	}
}

@media only screen and (min-width: 1700px) {
    .post-image-lists .container {
        z-index: 1;
    }
    .home-feature {
        position: absolute;
        height: 524px;
        /* width: 50% */
        bottom: 0;
        background-repeat: no-repeat;
        background-size: auto 80%;
        z-index: 0;
        float: left;
    }

    .home-feature-left {
        left: 0;
        /* background-position: 20% bottom;  */
        background-position: 10% 138px;  /* hover hand */
    }

    .home-feature-right {
        right: 0;
        background-position: 80% bottom;
    }

    .home-feature-left .home-feature-title {
        padding-left: 12.5%;
        text-align: left;
    }

    .home-feature-right .home-feature-title {
        padding-right: 12.5%;
        text-align: right;
    }
}