/*
 Theme Name:   Civic Center SF
 Theme URI:    
 Description:  Dazzling Child Theme
 Author:       Gary Chen
 Author URI:   
 Template:     dazzling
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, green, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  dazzling-child
*/

/* Table of content
-----------------------------------------------
1. Global
2. Content
3. Post styling
4. Singe Post/Page Pagination
5. Media
6. Widgets
7. Buttons
8. Infinite Scroll
8. Custom Styles
9. Navigation
10. Comments
11. Attachment styling
12. Footer
13. Mobile Styling
14. Social icons
15. Call For Action
*/

/* Colors
-----------------------------------------------
Old Gold	#b8b58d		184, 182, 141
Yellow Gold	#edc416		237, 196, 23
Blue		#1c75bc		28, 117, 189
Dark Gray	#2f393f		48, 57, 63
*/

/* =Global
----------------------------------------------- */
body {
  color: #6B6B6B;
  word-wrap: break-word;
  font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: #00abdc;
  text-decoration: none;
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
}

a:hover,
a:focus {
  color: #1FA67A;
  text-decoration: none;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

p, td, th, .column, .entry-content {font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif!important; line-height: 1.6;}

th {background: #F6F6FA; color: #007394;}

p {margin: 0 0 0.9em;}

.entry-content ul li {
    list-style: disc;
	margin-left: 1.2em;
    margin-top: 1em;
}

h2, h3, h4, .h1, .h2, .h3, .h4 {font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, .h1, .h2, .h3 {line-height: 1.4em;}
h4, h5, h6, .h4, .h5, .h6 {line-height: 1.25em;}

h1,
.h1 {
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 3.25em;
  font-weight: 300;
  line-height: 1.3em;
  text-align: center;
  letter-spacing: -0.02em;
}

h2,
.h2 {
  font-size: 1.55em;
  font-weight: 600;
  color: #111;
}

h3,
.h3 {
  font-size: 1.2em;
  font-weight: 500;
  color: #111;
}

h4,
.h4 {
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 0;
}

h5,
.h5 {
  font-size: 16px;
}

h6,
.h6, .small-text {
  font-size: 0.8em;
}

.text-2-col-span {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;
  -webkit-column-gap: 25px; /* Chrome, Safari, Opera */ -moz-column-gap: 25px; /* Firefox */ column-gap: 25px;
}

.text-3-col-span {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; 
  -webkit-column-gap: 25px; /* Chrome, Safari, Opera */ -moz-column-gap: 25px; /* Firefox */ column-gap: 25px;
}

@media (max-width: 767px) {
  body {font-size: 14px; line-height: 1.4;}
  h1, .h1, .entry-title h1 {font-size: 2em!important; margin-bottom: 0px;}
  h2, .h2, .entry-title h2 {font-size: 1.5em!important;}
  h3, .h3, .cfa-text {font-size: 1.1em!important;}
  h4, .h4 {font-size: 0.85em!important; letter-spacing: 0em;}
  .text-2-col-span {-webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1;}
  .text-3-col-span {-webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1;}
}

/* Prevents horizontal scrolling in mobile view */
@media screen and (max-width: 767px) {
  body {overflow-x: hidden !important;}
}


.blue {color: #007394;}
.gold {color: #b8b58d;}
.white {color :#FFF;}

.whiteBkg {background-color: #FFF}
.lightgrayBkg {background-color: #E1E1E1;}
.blueBkg {background-color: #007394;}
.navyBkg {background-color: #202f44;}
.goldBkg {background-color: #B8B58D;}
.greenBkg {background-color: #34aa7e;}
.purpleBkg {background-color: #804980;}

.box {padding: 0.25em 0.65em;}

.photo-credit {font-size: 10px;}

.rd-border {border-radius: 0.75em;}

blockquote p {hanging-punctuation: first;}

img {
  height: auto; /* Make sure images are scaled correctly. */
  max-width: 100%; /* Adhere to container width. */
}
button,
input,
select,
textarea {
  font-size: 100%; /* Corrects font size not being inherited in all browsers */
  margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
  vertical-align: baseline; /* Improves appearance and consistency in all browsers */
  *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
select {
    width: 250px;
    border: 1px solid #DCE4EC;
    background-color: #FFF;
    height: 30px;
    padding: 5px;
}
input[type="checkbox"],
input[type="radio"] {
  padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
  -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
  -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
  -moz-box-sizing:    content-box;
  box-sizing:         content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
  border: 0;
  padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  color: #666;
  border: 1px solid #E8E8E8;
  border-radius: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  color: #111;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
  padding: 3px;
}
textarea {
  overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
  padding-left: 3px;
  vertical-align: top; /* Improves readability and alignment in all browsers */
  width: 100%;
}


/* Alignment */
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}
.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}

/* Text meant only for screen readers */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar */
}

/* Clearing */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: '';
  display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/* =Slider
----------------------------------------------- */

.flexslider {background: rgb(32,47,68); overflow: hidden!important;}

.flexslider .slides img {width: 100%; vertical-align: bottom; overflow: hidden!important;}

.flex-caption {bottom:0;}

.flex-caption h2 {background: #b8b58d!important; color: #FFF!important; font-weight: 700; font-size: 1em; letter-spacing: 0.1em; padding: 8px 20px 6px;}

.flex-caption .excerpt {background: rgba(255,255,255,0.9); font-family: 'Droid Serif', Georgia, serif; font-size: 1.45em; color: rgb(32,47,68); padding: 16px 20px; margin-bottom: 10%; max-width: 580px;}
.flex-caption .excerpt {-webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.35); -moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.35); box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.35);}

.flex-img-caption {font-size: 0.75em; color: #EFEFEF; display: block; position: absolute; bottom: 15px; right: 20px; }

.flex-direction-nav a {color: #FFF;}
.flex-control-paging li a {background: transparent; width: 12px; height: 12px; border: 1px solid #FFF; webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;}
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active {background: #FFF;}

@media (min-width: 768px) and (max-width: 992px) {
  .flex-caption h2 {font-size: 0.9em!important;}
  .flex-caption .excerpt {font-size: 1em; padding: 12px 20px; max-width: 400px;}
}

@media (max-width: 767px) {
  .flex-caption {display: block!important; position: relative!important; margin-left: 0; max-width: 100%;}
  .flex-caption h2 {margin-top: 0; font-size: 0.7em!important; padding: 6px 8px 5px 8px;}
  .flex-caption .excerpt {color:#FFF!important; font-size: 1em; background: none; padding: 15px 0 30px; margin-bottom: 0; max-width: 760px;}
  .flex-caption .excerpt {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
  .tagline {font-size: 0.6em;}
  .flex-img-caption {display: none;}
  .flex-control-nav {display: none;}
  .flexslider .slides img {min-height: 267px; min-width: 640px; max-width: none; float: left;}
}

/* =Content
----------------------------------------------- */

.sticky {
}
.hentry {
  margin: 0 0 0;
}
.byline,
.updated {
  display: none;
}
.single .byline,
.group-blog .byline {
  display: inline;
  margin-right: 0;
}
.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}
.page-links {
  clear: both;
  margin: 0 0 1.5em;
}
#content {
  margin-top: 40px;
  margin-bottom: 40px;
}


/* =Post styling
----------------------------------------------- */
.entry-meta a {
  font-size: 13px;
}
#main .page-header {
  margin-top: 0;
  border-bottom: none;
}

.entry-meta a {
  color: #6B6B6B;
}
.entry-meta .fa {
  font-size: 14px;
  margin-right: 3px;
  color: #1FA67A;
}
.entry-meta span {
  margin-right: 10px;
}
.entry-title {
  font-size: 3em;
  color: #007394;
}
.entry-title a {
  color: #444;
}
.entry-title a:hover {
  color: #666;
}
.btn.btn-default.read-more {
  float: right;
  border: 1px solid #E8E8E8;
  color: #1FA67A;
  background-color: transparent;
  margin-top: 10px;
}
.btn.btn-default.read-more:hover {
  color: #FFF;
  background-color: #1FA67A;
}
.search .btn.btn-default.read-more {
  float: none;
}
hr.section-divider {
  border-color: #E8E8E8;
  margin-top: 50px;
  margin-bottom: 50px;
}

/* =Civic Center Stories page
----------------------------------------------- */

hr.cc-stories {
  width: 60%;
  min-width: 250px;
  height: 1px;
  text-align: left;
  border-top: 0px;
  margin: 1.5em 0;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(left, rgba(180,180,180,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(180,180,180,1)), color-stop(100%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(left, rgba(180,180,180,1) 0%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(left, rgba(180,180,180,1) 0%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(left, rgba(180,180,180,1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(to right, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4b4b4', endColorstr='#ffffff', GradientType=1 );
}

.cc-stories-navband {
  /* if full width
  width:99.8vw!important;
  margin-left: calc(-51vw + 50%);   */
  margin-top:-15px;
  width: 100%;
  margin-bottom: 15px;
  text-align: center; 
}

.cc-stories-feature-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
  margin-bottom: 2em;
  height: 65vh;
  position: relative;
  border-radius: 12px;
  -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3);
  box-shadow: inset 0 0 35px rgba(0,0,0,0.3);
}

#cc-stories .entry-content p {font-family: 'Droid Serif', Georgia, serif!important; color:#666; margin: 0 0 1em;}
#cc-stories .entry-content p strong {font-weight: 400; color:#000!important;}
.cc-stories-header {width: 100%; display: inline-block; color:#FFF; position: absolute; bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);}
.cc-stories-header h1 {font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif!important; color:#FFF!important; font-size: 3.5em; font-weight: 600; letter-spacing: -0.02em; margin-bottom:1em; }
.cc-stories-header h3 {font-family: Georgia, serif!important; font-size: 0.85em; color:#FFF!important;}
.cc-stories-navband h4 {color: #B8B58D; font-size: 1em; font-weight: 500; line-height: 1em; letter-spacing: 0.5em;}

blockquote.cc-stories {font-size: 1.5em; border-left: 0px; margin: 0; padding: 10px 0;}
blockquote.cc-stories p {color: #000!important; text-indent: -0.25em;}

.cc-stories-footer {margin-top: 3em; color: #a5a27a; font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif!important;}
.cc-stories-footer strong {font-weight: 500;}

@media (min-width: 768px) and (max-width: 992px) {
  .cc-stories-header h1 {font-size: 2.9em;}
}


@media (max-width: 767px) {
  .cc-stories-navband {margin-top: 0px;}
  .cc-stories-feature-image {height: 40vh; min-height: 300px;}
  .cc-stories-header h1 {font-size: 2em!important;}
  .cc-stories-header h3 {display:none;}
  .cc-stories-navband h4 {letter-spacing: 0.25em;}
}


/* =Singe Post/Page Pagination
----------------------------------------------- */
.page-links span {
  display: inline-block;
  color: #fff;
  background-color: #1FA67A;
  border-radius: 4px;
  padding: 2px 10px;
  margin-left: 2px;
}
.page-links a span {
  background-color: inherit;
  border: 1px solid #E8E8E8;
  color: #1FA67A;
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
}
.page-links a:hover span {
  background-color: #1FA67A;
  border: 1px solid #1FA67A;
  color: #fff;
}
/* =Asides
----------------------------------------------- */

.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
  display: none;
}

/* =Media
----------------------------------------------- */

.thumbnail {padding: 0; border-radius: 0;}

.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}
.wp-caption {
  border: 1px solid #ccc;
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
  display: block;
}
.wp-caption-text {
  text-align: center;
  font-size: 0.8em; 
  color: #008E89;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}
.site-main .gallery {
  margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-main .gallery a img {
  border: none;
  height: auto;
  max-width: 90%;
}
.site-main .gallery dd {
  margin: 0;
}
.site-main .gallery-columns-4 .gallery-item {
}
.site-main .gallery-columns-4 .gallery-item img {
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
  max-width: 100%;
}

/* =Widgets
----------------------------------------------- */

.widget {
  margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets */
.widget select {
  max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
  display: none;
}
.widget > ul > li,
li.recentcomments {
  border-bottom: 1px solid #EEE;
  position: relative;
  display: block;
  padding: 10px 0;
}
.widget ul li {
    list-style: inherit;
}
.widget ul {
    padding: 10px 10px;
}
.widget-title {
  border-bottom: 1px solid #eee;
  font-family: "Montserrat",sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  color: #B8B58D;
}
.widget ul.nav.nav-tabs {
  padding: 0;
}
.tab-content ul li {
  list-style: none;
}
#secondary .widget_archive ul li:before,
#secondary .widget_categories ul li:before,
#secondary .widget_recent_comments ul li:before {
  font-family: fontawesome;
  margin-right: 10px;
}
#secondary .widget_archive ul li:before {
  content: '\f073';
}
#secondary .widget_categories ul li:before {
  content: '\f115';
}
#secondary .widget_recent_comments ul li:before {
  content: '\f0e5';
}
.tab-content .tab-thumb {
  float: left;
  margin-right: 8px;
  padding-top: 5px;
  float: left;
  line-height: 0px;
  width: 60px;
  height: 60px;
}
.tab-content li {
  overflow: hidden;
  list-style: none;
  border-bottom: 1px solid #f0f0f0;
  margin: 0 0 8px;
  padding: 0 0 6px;
}
.tab-content .tab-entry {
  display: block;
}
.tab-content > .active {
  border: 1px solid #E8E8E8;
  border-top: none;
}
.tab-content ul li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tab-content .tab-entry {
  font-size: 14px
}
.tab-comment {
  font-size: 18px;
  padding: 0 10px;
}
.nav-tabs > li > a {
  border-bottom-color: transparent;
  text-transform: uppercase;
}
.tab-content i {
  font-size: 12px;
}
.tab-thumb.thumbnail {
  margin-bottom: 5px;
}
.tab-content #messages li:before {
  content: '\f0e5';
  font-family: fontawesome;
  float: left;
  padding-right: 10px;
  font-size: 20px;
  color: #1FA67A;
}

/* =Buttons
----------------------------------------------- */
.btn-default, .label-default {
  background-color: #1FA67A;
  border-color: #1FA67A;
}
.btn-default:hover, .label-default[href]:hover, .label-default[href]:focus, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, #image-navigation .nav-previous a:hover, #image-navigation .nav-next a:hover {
  background-color: #1b926c;
  border-color: #1b926c;
}
.btn.btn-default {
    color: #FFF;
}
.btn-secondary {background-color: #FFF; border: 1px solid #BBB; font-family: 'Montserrat', sans-serif;}

/* =Infinite Scroll
----------------------------------------------- */

/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
  display: block;
}
#infinite-handle span {
  display: block;
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
  border-radius: 4px;
  padding: 12px;
  background: transparent;
  border: 1px solid #E8E8E8;
  color: #1FA67A;
  -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
       -o-transition: all 0.2s;
          transition: all 0.2s;
}
#infinite-handle span:hover {
  background-color: #1FA67A;
  color: #fff;
}
.woocommerce #infinite-handle {
    display: none;
}
.woocommerce div.product form.cart .variations label {
  color: #6B6B6B;
  font-size: 14px;
  margin-bottom: 0;
  margin-top: 8px;
}

/* =Custom Styles
----------------------------------------------- */
.site-branding {
  margin-top: 20px;
  margin-bottom: 20px;
}
.site-description {
  clear: both;
  color: #777;
  font-weight: 200;
  font-size: 14px;
}
.page-template-page-homepage-php .carousel {
  margin-top: -20px;
  margin-bottom: 20px;
}

.library-item {font-size: 84%; color: #666;}
.library-item h3 {font-weight: 600;}


.project-container h3 {margin-top: 0px; font-weight: 600;}

.component {
  text-align: center;
  border: 1px solid #DDD; 
  height: 100%;
  min-height: 440px;
  background-color: #FCFCFC;
  border-radius: 12px;
}

.component-icon {padding: 10px 20%;}
.component h3 {font-size: 1.1em; font-weight: 600; color: #000!important;}
.component p {color: #333;}

.feature-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  width: 100%;
  height: 400px;
  position: relative;
  z-index: 1;
}

.feature-image-caption { 
  float: right;
  display: inline-block;
  font-size: 0.75em;
  font-weight: 400;
  color: #FFF;
  position: absolute;
  bottom: 10px;
  right: 20px;
}


@media (max-width: 767px) {
  .feature-image {height: 240px;}
}

.round-icon {margin: 10px 10px 10px 0; padding: 10px; border: 1px solid #CCC; border-radius: 50%;}

/* =Navigation
----------------------------------------------- */

#logo {max-width: 180px; padding: 8px; z-index: 100; position: absolute; clear: none; float: left;}

.tagline {
  background-color: #3A3A3A!important;
  color: #FFF;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.2em;
}


.site-main [class*="navigation"] a,
.more-link {
  border: 1px solid #E8E8E8;
  padding: 6px 12px;
  border-radius: 4px;
  display: block;
}
.site-main [class*="navigation"] a:hover,
.more-link:hover {
  color: #fff;
  background: #1FA67A;
  text-decoration: none;
}
.more-link {
  float: right;
  margin: 10px 0;
}
.site-main [class*="navigation"] {
  margin: 0 0 1.5em;
  overflow: hidden;
}
[class*="navigation"] .nav-previous {
  float: left;
}
[class*="navigation"] .nav-next {
  float: right;
  text-align: right;
}
.navbar.navbar-default {
  background-color: #fff;
  font-weight: 400;
  margin-bottom: 0;
  
  border-bottom: 1px solid #eee;
}
.navbar-default .navbar-nav > li > a {
  color: #999;
  line-height: 30px;
}
.navbar > .container .navbar-brand {
  color: #1FA67A;
  font-size: 24px;
  margin: 8px 0;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  border-right: none;
  border-left: none;
}
.navbar {
  border-radius: 0;
}
.navbar-default {
  border: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #fff;
  background-color: #1FA67A;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #999;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu > li > a {
  padding: 14px 20px;
  color: #999;
}
.dropdown-menu,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  border: none;
}
.dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a {
  background-color: #1FA67A;
  color: #fff;
}

.dropdown-menu .divider {
  background-color: rgba(0, 0, 0, 0.1);
}
.navbar-nav > li > .dropdown-menu {
  padding: 0;
}
.navbar-nav > li > a {
  padding-top: 18px;
  padding-bottom: 18px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}
.nav.navbar-nav {
  float: right;
}

@media (min-width: 768px) and (max-width: 992px) {
  #logo {max-width: 120px;}
}

@media (max-width: 767px) {
  .nav.navbar-nav {float: none;}
  .navbar-nav {margin-top: 50px;}
  .tagline {display: none;}
  #logo {display: block; margin: 0 auto!important;}
  #logo img {max-width: 90px; padding: 0;}

  .navbar-nav .open .dropdown-menu>li>a {line-height: 30px;}
}



/* =Attachment styling
----------------------------------------------- */
#image-navigation .nav-previous a,
#image-navigation .nav-next a{
  padding: 5px 20px;
  border: 1px solid #E8E8E8;
  border-radius: 4px;
  display: block;
}
#image-navigation .nav-previous a:hover,
#image-navigation .nav-next a:hover{
  background-color: #1FA67A;
  color: #fff;
}
#image-navigation .nav-previous,
#image-navigation .nav-next {
  margin: 10px 0;
}

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

.agency-logos-row {
  margin-top: 25px;
}

.agency-logo, .agency-logo a {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

a.agency-logo:hover, a.agency-logo:focus  {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

#footer-area {
  background-color: #efedd2; /* Darker Gold #b8b58d; */
  color: #666;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  /*background: #313233 url("../../uploads/2016/10/bg-sfbay-skyline.png.html") no-repeat;
  background-size: cover;*/
}
#footer-area a {
  color: #007394;
}
#footer-area .footer-widget-area {
  padding: 30px 0 20px 0;
  border-top: 1px solid #b0ab75;
  overflow: hidden;
}
#footer-area ul li {
  border-bottom: 1px solid #444;
}
#footer-area .site-info nav ul li {
  border-bottom: none;
}
#footer-area .tab-content > .active {
  border: none;
}
#footer-area .nav-tabs > li.active > a, #footer-area .nav-tabs > li.active > a:hover, #footer-area .nav-tabs > li.active > a:focus {
  background-color: transparent;
}
#footer-area .tab-content .tab-entry {
  font-size: inherit;
}
#footer-area .widgettitle {
  font-size: 16px;
  color: #007394;
  margin-top: 0px;
}
#footer-area #social ul li {
  border-bottom: none;
}
#footer-area .widget ul li {
  padding: 10px 0;
  list-style: none;
}
.footer-nav.nav > li {
  position: relative;
  display: inline-table;
}
.footer-nav.nav {
  float: left;
  margin-bottom: 2px;
}
.copyright {
  margin-top: 10px;
  float: right;
  text-align: right;
}
#colophon {
  background-color: #1F1F1F;
  padding: 6px 0;
}
.site-info a {
  color: #777;
}
.site-info a:hover {
  color: #999;
}
#footer-area a:hover {
  color: #000;
}
.site-info {
  color: #999;
  font-size: 12px;
}
.footer-nav.nav > li > a:hover {
    background-color: transparent;
}
.scroll-to-top {
  background: #3B3B3B;
  background: rgba(0, 0, 0, 0.4);
  color: #FFF;
  bottom: 4%;
  cursor: pointer;
  display: none;
  position: fixed;
  right: 20px;
  z-index: 999;
  font-size: 16px;
  padding: 2px 10px;
  border-radius: 4px;
  -webkit-transition: background-color 0.1s linear;
     -moz-transition: background-color 0.1s linear;
       -o-transition: background-color 0.1s linear;
          transition: background-color 0.1s linear;
}
.scroll-to-top:hover {
  background: #1FA67A;
  opacity: .8;
}

/* =Mobile Styling
----------------------------------------------- */

@media (max-width: 767px) {
  .pull-right {
    float: none !important;
  }
  .pull-left {
    float: none !important;
  }
  .site-info, .copyright {
      text-align: center;
  }
  .footer-nav.nav, .copyright {
    float: none;
  }
  .flex-caption {
    display: none;
  }
  .navbar > .container .navbar-brand {
    margin: 0;
  }
  .navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding: 15px 10px;
  }
}

/* =Social icons
----------------------------------------------- */

.top-bar {
    border-bottom-color: #E8E8E8;
}
#social a {
    font-size: 32px;
    margin: 6px;
    color: #E8E8E8;
}
#social {
    top: 0;
    position: relative;
    text-align: center;
}
#social ul li {
  list-style: none;
  display: inline-block;
  padding: 0 10px;
}
#social ul {
  margin-bottom: 0;
  padding: 0;
}
#social li a span {
  display: none;
}
.fa-googleplus:before {
  content: "\f0d5";
}
#social li,
#social ul {
    border: 0!important;
    list-style: none;
    padding-left: 0
}
#social li a[href*="twitter.com"] .fa:before,
.fa-twitter:before {
    content: "\f099"
}
#social li a[href*="facebook.com"] .fa:before,
.fa-facebook-f:before,
.fa-facebook:before {
    content: "\f09a"
}
#social li a[href*="github.com"] .fa:before,
.fa-github:before {
    content: "\f09b"
}
#social li a[href*="/feed"] .fa:before,
.fa-rss:before {
    content: "\f09e"
}
#social li a[href*="pinterest.com"] .fa:before,
.fa-pinterest:before {
    content: "\f0d2"
}
#social li a[href*="plus.google.com"] .fa:before,
.fa-google-plus:before {
    content: "\f0d5"
}
#social li a[href*="linkedin.com"] .fa:before,
.fa-linkedin:before {
    content: "\f0e1"
}
#social li a[href*="youtube.com"] .fa:before,
.fa-youtube:before {
    content: "\f167"
}
#social li a[href*="instagram.com"] .fa:before,
.fa-instagram:before {
    content: "\f16d"
}
#social li a[href*="flickr.com"] .fa:before,
.fa-flickr:before {
    content: "\f16e"
}
#social li a[href*="tumblr.com"] .fa:before,
.fa-tumblr:before {
    content: "\f173"
}
#social li a[href*="dribbble.com"] .fa:before,
.fa-dribbble:before {
    content: "\f17d"
}
#social li a[href*="skype.com"] .fa:before,
.fa-skype:before {
    content: "\f17e"
}
#social li a[href*="foursquare.com"] .fa:before,
.fa-foursquare:before {
    content: "\f180"
}
#social li a[href*="vimeo.com"] .fa:before,
.fa-vimeo-square:before {
    content: "\f194"
}
#social li a[href*="spotify.com"] .fa:before,
.fa-spotify:before {
    content: "\f1bc"
}
#social li a[href*="soundcloud.com"] .fa:before,
.fa-soundcloud:before {
    content: "\f1be"
}

@media (max-width: 992px) {
  .site-branding {
    text-align: center;
  }
  #social {
    top: 0;
    float: none;
    text-align: center;
  }
  .side-pull-left .main-content-inner, .side-pull-right .main-content-inner{
    float: none;
  }
}

/* =Call For Action
----------------------------------------------- */

.cfa{
  padding: 30px 0px;
  text-align: center;
  overflow: hidden;
  background: #007394; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #0f95bb 0%, #7dbdd0 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #0f95bb 0%, #7dbdd0 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #0f95bb 0%, #7dbdd0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f95bb', endColorstr='#7dbdd0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.cfa-text{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4em;
  color: #fff;
  display: block;
  padding: 12px 0;
}
.cfa-button {
  font-family: 'Montserrat', sans-serif;
  background-color: transparent;
  color: #FFF;
  padding: 15px 20px;
  border-color: #fff;
}
.cfa-button a,
.cfa-button a {
}

.cfa-button:hover {
    background-color: #FFF;
    color: #007394;
    border: 1px solid #FFF;
}
.cfa-button:hover a {
    background-color: #FFF;
    color: #007394;
    border: 1px solid #FFF;
}
/* Layout */
.side-pull-left #primary{
    float: left;
}
.side-pull-right #primary{
    float: right;
}
.no-sidebar #secondary, .full-width #secondary{
    display: none;
}
.no-sidebar #primary{
    float: none;
    margin: 0 auto;
}
.full-width #primary{
    width: 100%;
}

/* =Same Column Height
----------------------------------------------- */

.row.match-my-cols {
    overflow: hidden; 
}

.row.match-my-cols [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

/* =Post Tiles
----------------------------------------------- */
.cc-stories-home {display: block; width: 100vw!important; margin-left: calc(-50.15vw + 50%); margin-top: 2em; margin-right: -10px!important; position: relative;}
ul#post-tiles.responsive li {margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;}
ul#post-tiles li a {font-family: 'Droid Serif', Georgia, serif; line-height: 1.35em; border-bottom: none!important; border-right: none!important;}
ul#post-tiles.responsive li a, ul#post-tiles.responsive-mobile li a {padding: 1em 2em; width: auto!important; height: 100%!important;}
ul#post-tiles li a h3 {font-family:'Montserrat', sans-serif; font-size: 1.3em; font-weight: 700; line-height: 1.1em; margin: 0.65em 0; color:#FFF!important;}

.textwidget .responsive tiles-small {width:49%;}

@media only screen and (min-width : 1200px) {
  ul#post-tiles li a {font-size: 105%;}
}

@media (max-width: 767px) {
  #post-tiles {font-size: 100%!important;}
  .cc-stories-home {margin-top: 1em; margin-right: 0px!important;}
  ul#post-tiles li a {padding: 2em 1em; line-height: 1.25em;}
}

/* =WPForms
----------------------------------------------- */
.wpforms-container .wpforms-field-sublabel {color: #b0ab75;}
.wpforms-container textarea, .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="url"], .wpforms-container input[type="password"], .wpforms-container input[type="search"] {padding:5px!important;}
#OpenHouseSurvey textarea, #OpenHouseSurvey wpforms-field-large {background-color: #feffee;}

/* = FRAMEWORK PLANS
----------------------------------------------- */
.cs-color {color: #5BC3BD;}		.cs-bkg {background-color: #5BC3BD;} 		/* Civic Sanctuary color */
.cc-color {color: #E8D72E;} 	.cc-bkg {background-color: #E8D72E;}		/* Culture Connector actual color #EDDE4C */
.pp-color {color: #F48DA5;} 	.pp-bkg {background-color: #F48DA5;}		/* Public Platform color */
.sd-color {color: #becfda;} 	.sd-bkg {background-color: #becfda;}		/* Street Design color */
.white-color {color:#FFF;}		.white-bkg {background-color: #FFF;}

#fp-nav {
	display: block; 
	background: rgba(80,72,91,1); 
	font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: right; 
	width:100%;
}

#fp-nav .subheader {display: block; padding: 10px 0px; letter-spacing: 0.25em; color: #dad6e0;}
#fp-nav a.link {display: block; padding: 10px; color: rgba(80,72,91,1); font-weight: 700; text-decoration: none;}

.fp-title {font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; text-transform: uppercase; margin-top: 0; margin-bottom: 20px;}

.fp p, .fp ul {font-size: 90%; line-height: 1.4;}
.fp ul li {list-style-type: disc; margin-left: 1.2em; margin-top: 0.75em;}
.fp h3 {margin-top: 10px;}
.credit {font-size: 0.8em; color:#999; text-align: center; font-style: italic;}
.WhiteBkg {background-color: rgba(255, 255, 255, 0.9)}
.view-icon {position: relative; bottom: -10px; right: -6px; float: right; color: #FFF;}

span.fig-key {
	font-size: 14px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: -0.1em;
	background: #FFF;
	border: 1px solid #999;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	color: #000;
	display: inline-block;
	margin-right: 5px;
	text-align: center;
	width: 28px;
	height: 28px;
}

img.fig-key {	
	display: inline-block;
	margin-right: 5px;
	text-align: center;
	width: 28px;
	height: 28px;
}

div.fig-key {
	float: left;
	display: block;
	margin-right: 9px;
	width: 28px;
	height: 16px;
}

.fp-title-block {padding: 6px 10px; background: rgba(80,72,91,0.90); color:#FFF;}
.fp-excerpt {padding: 0 20px 20px 20px;}
.fp-excerpt h2 {font-size: 1.5em; font-weight: 700; text-transform: uppercase; color: #444;}

.fp-feature {color: #555; border: 1px solid #dddddd;}

.fp-feature:hover img {
	filter: brightness(110%);
	transition-duration: 0.25s;
	-webkit-box-shadow: inset 0px 0px 35px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 0px 35px 5px rgba(0,0,0,0.5);
	box-shadow: inset 0px 0px 35px 5px rgba(0,0,0,0.5);
}
.fp-feature:hover {color:#000; transition-duration: 0.15s;} 
.fp-feature:hover .fp-excerpt h2 {color:#000; transition-duration: 0.15s;}

.label {padding: 0.4em 0.8em 0.3em;}