/*
Theme Name: TNPA.org
Theme URI: http://totalwptheme.com
Description: TNPA.org web theme based on Total WordPress theme.
Author: Ryan Rasmussen and Caitlin Pratt for Anne Lewis Strategies
Author URI: https://annelewisllc.com/
Template: Total
Version: 1.1
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* import custom fonts */
@import url("https://use.typekit.net/lag8iwv.css");

/********************************/
/* General Theme Customizations */
body {
	font-family: Lato, Helvetica, Arial, sans-serif;
	font-size: 1em;
}
h1 {
	font-family: eloquent-jf-pro, serif;
	font-style: normal;
	font-size: 4em;
}
h2.vcex-heading {
    line-height: 2em;
    font-family: eloquent-jf-pro, serif;
	font-style: normal;
}
h3 {
	font-family: eloquent-jf-pro, serif;
	font-style: normal;
	font-size: 3em;
}
h4 {
	font-family: eloquent-jf-pro, serif;
	font-style: normal;
	font-size: 1.5em;
}
h5 {
	font-family: Lato, Helvetica, Arial, sans-serif;
	font-size: 1em;
}
p, .list-items li, .staff-entry-position {
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 1.5em;
}
.tpna-join-button, .theme-button-inner {
	font-family: eloquent-jf-pro, serif;
	font-style: normal;
}
.two-cols {
	column-count: 2;
}
.event-calendar h2 {
	text-align: center;
}
table th, table td {
	border: none;
	font-weight: bold;
}
.vcex-form-shortcode {
	text-align: center;
}
#footer-bottom-menu a {
	text-decoration: underline;
}
.nav-squares {
	display: flex;
    flex-flow: row wrap;
	justify-content: space-evenly;
}
.nav-squares button {
    margin: auto;
    height: 20em;
    flex-basis: 20em;
    width: 20em;
    border-radius: 0;
}
.nav-squares-teal {
	background: #0adbe5;
}
.nav-squares-gold {
	background: #faad07;
}
.nav-squares h4 {
	color: #FFF;
    margin-bottom: 0;
    font-size: 2em;
}
.nav-squares img {
	max-width: 35px;
	margin-right: 20px;
	margin-top: 0;
	float: right;
}
.vcex-multi-buttons .vcex-clr .a {
	font-family: eloquent-jf-pro, serif;
}
.tribe-event-startdate {
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}
.form-container {
    margin-top: 25px;
}
.membership-buttons {
    margin: 30px auto;
}
.tribe-bar-filters-inner input[type="text"] {
    color: #404653 !important;
}
/*****************/
/* Social Stream */
div.ff-stream {
    max-height: 20vh;
    overflow: auto;
}
.ff-stream-wrapper article div.ff-item-cont a {
    font-weight: bold;
}
.ff-stream-wrapper article:nth-child(odd) div.ff-item-cont, .ff-stream-wrapper article:nth-child(odd) h6.ff-item-bar {
    background: #00dbe6;
    border: none;
}
.ff-stream-wrapper article:nth-child(even) div.ff-item-cont, .ff-stream-wrapper article:nth-child(even) h6.ff-item-bar {
    background: #f8ac2b;
    border: none;
}
/*********************/
/* Staff Bio styling */
.staff-bio .vc_gitem-post-data-source-post_title, .staff-entry h2 {
    font-weight: bold;
    font-size: 2em;
}
.staff-container .vc_gitem-zone {
    max-width: 300px;
    margin: auto;
}
.staff-entry-details {
    text-align: center;
}
.staff-entry-media {
    max-width: 300px;
    margin: auto;
}
/***********/
/* Members */
.member-hero-hdr .vc_column-inner {
    margin-bottom: 0;
}
.members-logo .vc_pageable-slide-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.members-logo .vc_grid-item-mini, .members-logo .vc_gitem-animated-block, .members-logo .vc_gitem-zone {
    height: 100%;
}
.members-container h4 {
    margin: 25px auto;
}
/***********************/
/** Colored Triangles **/
.blue-triangle-hero {
    border-top: 12vh solid transparent;
    border-right: 80vw solid #00dbe6;
    position: relative;
    top: -12vh;
    float: right;
    margin-bottom: -12vh;
    z-index: 10;
}
.gold-triangle-hero {
    border-top: 12vh solid transparent;
    border-left: 80vw solid #f8ac2b;
    position: relative;
    top: -12vh;
    margin-bottom: -12vh;
    z-index: 9;
}
/** Form styling **/
/******************/
.section-header h2 {
    text-align: center;
    font-size: 200%;
    font-family: eloquent-jf-pro, serif;
}
input[type="text"] {
    border: 1px solid #404653;
    opacity: .9;
}
form input[type="text"], form input[type="email"] {
    background: #d9dada;
    border-radius: 0px;
}
form input[type="submit"] {
    min-height: 50px;
	background: #0adbe5;
	border-radius: 0px;
	font-size: 1.25em;
	padding: 1% 10% 1% 10%;
	color: #404754;
	font-weight: bold;
}
.sortables {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sortables .formEl {
    flex-basis: 45%;
    flex-grow: 1;
    max-width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.submit-container {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    flex-direction: column;
    padding: 10px;
}
.grecaptcha-badge {
    display: none;
}  
@media screen and (max-width: 575.98px) {
    .elcontainer h2 {
      font-size: 2.75rem;
    }
}

/***************************/
/** Colored Ribbon Banner **/

/** NOTE - .hdr-banner-cont is being set on each page in the CSS view **/
/********* any other title styling will also need to be done there ****/
.hdr-banner-cont span {
    color: white;
}
.hdr-banner-cont > .wpb_column {
    max-height: 30vh;
}
.blue-ribbon {
    background: #00dbe6;
    position: relative;
    top: -10vh;
    z-index: -1;
    -webkit-clip-path: polygon(100% 0, 100% 50%, 0 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 50%, 0 100%, 0 50%);
}
.gold-ribbon {
    background: #f8ac2b;
    position: relative;
    top: -40vh;
    z-index: -2;
    -webkit-clip-path: polygon(100% 50%, 100% 100%, 0 50%, 0 0);
    clip-path: polygon(100% 50%, 100% 100%, 0 50%, 0 0);
}
.hdr-banner-cont h1 {
    position: relative;
    top: 12.5vh;
}
/* small screens */
@media (max-width: 576px) { 
    .hdr-banner-cont {
        top: -7em;
        margin-bottom: 0;
    }
    .hdr-banner-cont h1 {
        top: 1.4em;
    }
    .blue-ribbon {
        -webkit-clip-path: polygon(100% -20%, 100% 55%, 0 120%, 0 45%);
        clip-path: polygon(100% -20%, 100% 55%, 0 120%, 0 45%);
    }
    .gold-ribbon {
        -webkit-clip-path: polygon(100% 55%, 100% 120%, 0 45%, 0 -20%);
        clip-path: polygon(100% 55%, 100% 120%, 0 45%, 0 -20%);
    }
}
/* very small screens */
@media (max-width: 361px) { 
    .hdr-banner-cont h1 {
        top: .75em;
        line-height: 120%;
    }
    .blue-ribbon {
        top: -21vh;
    }
    .gold-ribbon {
        top: -51vh;
    }
}

/**********************/
/* Blog post excerpts */
.vcex-blog-grid .col-1 div.entry-details, .vcex-blog-grid .col-3 div.entry-details {
    background: #00dbe6;
}
.vcex-blog-grid .col-2 div.entry-details {
    background: #f8ac2b;
}
h2.vcex-blog-entry-title.entry-title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}
.post-grid p {
    font-size: 100%;
}