@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');

/* standard.css: */
/***************************************************************************
 * Font
 ***************************************************************************/
.small {
  font-size         : 0.8em !important;
}
.large,
.big {
  font-size         : 1.2em !important;
}
.bold {
  font-weight       : bold !important;
}
.italic {
  font-style        : italic !important;
}
.underline {
  text-decoration   : underline !important;
}

/***************************************************************************
 * Alignment: Content
 ***************************************************************************/
.left {
  text-align        : left !important;
}
.center {
  text-align        : center !important;
}
.right {
  text-align        : right !important;
}
.justify {
  text-align        : justify !important;
}
.left div,
.left form,
.left p,
.left table {
  margin-left       : 0        !important;
  margin-right      : auto     !important;
  position          : relative !important;
  text-align        : left     !important;
}
.center div,
.center form,
.center p,
.center table {
  margin-left       : auto     !important;
  margin-right      : auto     !important;
  position          : relative !important;
  text-align        : center   !important;
}
.right div,
.right form,
.right p,
.right table {
  margin-left       : auto     !important;
  margin-right      : 0        !important;
  position          : relative !important;
  text-align        : right    !important;
}

/***************************************************************************
 * Alignment: Block
 ***************************************************************************/
.align-left {
  margin-left       : 0        !important;
  margin-right      : auto     !important;
  position          : relative !important;
}
.align-center {
  margin-left       : auto     !important;
  margin-right      : auto     !important;
  position          : relative !important;
}
.align-right {
  margin-left       : auto     !important;
  margin-right      : 0        !important;
  position          : relative !important;
}
.valign-top {
  margin-top        : 0        !important;
  margin-bottom     : auto     !important;
  position          : relative !important;
}
.valign-middle {
  margin-top        : auto     !important;
  margin-bottom     : auto     !important;
  position          : relative !important;
}
.valign-bottom {
  margin-top        : auto     !important;
  margin-bottom     : 0        !important;
  position          : relative !important;
}

/***************************************************************************
 * Alignment: Table Cell
 ***************************************************************************/
td.align-left {
  text-align        : left !important;
}
td.align-center {
  text-align        : center !important;
}
td.align-right {
  text-align        : right !important;
}
td.valign-top {
  vertical-align    : top !important;
}
td.valign-middle {
  vertical-align    : middle !important;
}
td.valign-bottom {
  vertical-align    : bottom !important;
}

/***************************************************************************
 * Alignment: Float
 ***************************************************************************/
.float-left {
  float             : left;
}
.float-right {
  float             : right;
}

/***************************************************************************
 * Alignment: Clear
 ***************************************************************************/
.clear-left {
  clear             : left;
}
.clear-right {
  clear             : right;
}
.clear-both {
  clear             : both;
}

/***************************************************************************
 * Alignment: Margin
 ***************************************************************************/
.margin-none {
  margin            : 0 !important;
}
.margin_top-none {
  margin-top        : 0 !important;
}
.margin_right-none {
  margin-right      : 0 !important;
}
.margin_bottom-none {
  margin-bottom     : 0 !important;
}
.margin_left-none {
  margin-left       : 0 !important;
}

/***************************************************************************
 * Alignment: Padding
 ***************************************************************************/
.padding-none {
  padding           : 0 !important;
}
.padding_top-none {
  padding-top       : 0 !important;
}
.padding_right-none {
  padding-right     : 0 !important;
}
.padding_bottom-none {
  padding-bottom    : 0 !important;
}
.padding_left-none {
  padding-left      : 0 !important;
}

/***************************************************************************
 * Tables
 ***************************************************************************/
table.layout
{
  border-collapse   : separate;
  border-spacing    : 0;
  margin            : 0;
  padding           : 0;
  position          : relative;
}
/* TODO: Not possible?
table.layout tr,
table.layout td
{
  margin            : 0;
  padding           : 0;
} */



/* Theme overrides: */
body {
  background-color: #3b4756;
}

body p,
body li {
    color: #4f555d;
    font-size: 16px;
	line-height: 26px;
    font-family: "Karla", sans-serif;
}

.main-content {
  padding-top: 2em;
  padding-bottom: 3em;
}
@media (max-width: 991px)
{
  .main-content {
  }
}

.header1 {
  padding: 30px 0 0 0;
}

.footer_sidebar address a {
  color: #fff;
}

.footer_mentions,
.footer_mentions a {
  color: #92a2b4;
}
.footer_mentions a:hover {
  color: rgb(172,202,172);
}


.footer .social_navbar {
  margin: 2em 0;
  padding: 0;
}
.footer .social_navbar li {
  display: inline-block;
  padding: 0;
  font-size: 2em;
}
.footer .social_navbar li a {
  color: white;
  padding-right: 0.75em;
}
.footer .social_navbar li a:hover {
  color: rgb(172,202,172);
}

.logo
{
  height: 75px;
  position: relative;
}
.logo a img.logo-hoh-full
{
  display: none;
  max-height: 300px;
  margin-top: 3em;
  padding-left: 10px;
  position: relative;
  width: auto;
  z-index: 2000
}
.logo a img.logo-hoh
{
    max-height: 105px;
    margin-top: -30px;
    padding-left: 10px;
    position: relative;
    width: auto;
    z-index: 2000
}
.logo a img.logo-hoh-text
{
    max-height: 65px;
    margin-left: 10px;
    top: -15px;
    position: relative;
    width: auto;
}

@media (max-width: 499px)
{
  .logo {
    width: 80%;
	height: auto;
  }
  .logo a img.logo-hoh
  {
    top: auto;
    max-height: 105px;
    max-width: 30%;
    height: auto;
  }
  .logo a img.logo-hoh-text
  {
    top: -15px;
    max-height: 105px;
    max-width: 65%;
    height: auto;
  }
}
@media (min-width: 768px)
{
  .logo a img.logo-hoh-text
  {
    max-height: 55px;
  }
}
@media (min-width: 992px)
{
  .logo a img.logo-hoh-text
  {
    max-height: 65px;
  }
}
@media (min-width: 1200px)
{
  .logo a img.logo-hoh
  {
    max-height: 105px;
    margin-top: -30px;
  }
  .logo a img.logo-hoh-text
  {
    top: -15px;
  }
}



/*#menu_top {
    margin-left: 152px !important;
  }

  #menu_top > li:first-child {
    display: none;
  } */
}
/*
@media (min-width: 768px) and (max-width: 991px)
{
  #menu_top > li:first-child {
    display: none;
  }
}
*/
@media (min-width: 768px) and (max-width: 1199px),
       (max-width: 599px)
{
  .header-contact {
	float: right !important;
	margin-left: 2em;
  }
  .header-contact > .pull-left:first-child {
	margin-top: -18px;
  }
  .header-contact .pull-left + .pull-left {
    clear: left;
	border-left: none;
	padding-left: 6px;
  }
}
/*
@media (max-width: 767px)
{
  .header-contact {
    display: block;
  }
  .header-contact {
	float: none !important;
	margin: 2em 1em 1em 1em;
  }
} */

/*@media (min-width: 768px) {*/
@media (max-width: 0) {
  #mainNav .navbar-nav li a + ul {
    display: block;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
  }
}
/*@media (min-width: 768px) {*/
@media (max-width: 0) {
  #mainNav .navbar-nav li:hover > a + ul, #mainNav .navbar-nav li:focus > a + ul, #mainNav .navbar-nav li.open > a + ul {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
/*@media (min-width: 768px) {*/
@media (max-width: 0) {
  #mainNav .navbar-nav li:hover > a + ul li a + ul, #mainNav .navbar-nav li:focus > a + ul li a + ul, #mainNav .navbar-nav li.open > a + ul li a + ul {
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
  }
}
/*@media (min-width: 768px) {*/
@media (max-width: 0) {
  #mainNav .navbar-nav li:hover > a + ul li:hover a + ul, #mainNav .navbar-nav li:hover > a + ul li.active a + ul, #mainNav .navbar-nav li:hover > a + ul li.open a + ul, #mainNav .navbar-nav li:focus > a + ul li:hover a + ul, #mainNav .navbar-nav li:focus > a + ul li.active a + ul, #mainNav .navbar-nav li:focus > a + ul li.open a + ul, #mainNav .navbar-nav li.open > a + ul li:hover a + ul, #mainNav .navbar-nav li.open > a + ul li.active a + ul, #mainNav .navbar-nav li.open > a + ul li.open a + ul {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

.navbar-header .navbar-toggle[aria-expanded="false"] {
  background: none;
  border-color: none;
}
.navbar-header .navbar-toggle[aria-expanded="false"] span {
  background: rgb(172,202,172);
}
.navbar-header .navbar-toggle[aria-expanded="true"] {
  margin-bottom: 20px;
  background: none;
  border-color: none;
}
.navbar-header .navbar-toggle[aria-expanded="true"] span {
  background: #435061;
}
/*@media (max-width: 767px) {*/
@media (min-width: 0) {
  #mainNav {
    max-height: 70vh;
	max-height: calc(100vh - 105px);
  }
}

/*@media (max-width: 767px) {*/
@media (min-width: 0) {
  .header1 {
    z-index: 1001;
    box-shadow: 0px 3px 3px 0px rgba(30,30,30);
	box-shadow: 0px 3px 3px 0px rgba(30,30,30,0.5);
  }
  .navbar {
	min-height: 0;
	box-shadow: 0px 3px 3px 0px rgba(30,30,30);
	box-shadow: 0px 3px 3px 0px rgba(30,30,30,0.5);
  }
}

@media (max-width: 1199px)
{
  .navbar {
    position: absolute;
    width: 100%;
  }
  .navbar.affix {
    position: fixed;
    width: 100%;
  }
}
@media (min-width: 1200px)
{
  .navbar {
    position: absolute;
	margin-left: calc(50% - (1170px / 2));
  }
  .navbar.affix {
    position: fixed;
    width: auto;
  }
}
.navbar-toggle .icon-bar {
    width: 30px;
    height: 5px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.2);
}

@media (min-width: 992px)
{
  .featured-slider
  {
	display: block;
    width: 100%;
    padding-bottom: 38.781725%; /* (1970x764 dimension aspect ratio) */
    height: 0;
  }
}
.owl-carousel .owl-item img
{
  width: 100%;
  height: auto;
}
.owl-carousel .volunteer_summery_box
{
  background-color: rgba(67, 80, 97, .5);
  padding: 0.1em 2em 2em 2em;
  border-radius: 10px;
}
.owl-carousel .volunteer_summery_box p {
  opacity: 1;
}
.owl-nav,
.owl-dot {
  display: none;
}

.page-wrapper {
  min-height: 20em;
}

body section.page-header
{
  color: #fff;
  padding-bottom: 0;
  border-bottom: none;
  padding: 3.5em 0;
  background-color: rgb(66,95,66);
  background-size: contain;
  background-position: 75% bottom;
  background-image: url("../images/hoh-tagline-logo-greenwords.png"), linear-gradient(rgb(88 123 88), rgb(29 43 29));
  box-shadow: inset 0 -10px 20px -10px #000000,
              inset 0 10px 20px -10px #000000;
}

.page-header container
{
  background-color: transparent;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
}
.page-header h4
{
  background-color: transparent;
  color: #fff;
  float: none;
  font-family: "Rancho", cursive;
  font-style: normal;
  font-weight: normal;
  font-size: 70px;
  text-transform: none;

  text-shadow: 0 0 10px rgba(0,0,0,0.9);

  NO_text-shadow:
      1px 1px 0 #000,
      /* Simulated effect for Firefox and Opera
         and nice enhancement for WebKit */
     -1px -1px 0 #000,
      1px -1px 0 #000,
     -1px  1px 0 #000,
      1px  1px 0 #000;
}

.page-header a
{
  background-color: transparent;
  color: #3b4756;
  font-weight: bold;
  font-size: 18px;
}
.page-header .pathway {
  margin-top: 0.5em;
}
.page-header .pathway:before {
  content: "\25FE";
  position: relative;
  font-size: 16px;
  color: #3b4756;
  font-weight: normal;
  margin: 0 0.5em 0 0.25em;
}

.page-header h4
{
  padding-bottom: 0;
  padding-left: 0;
  line-height: normal;
  margin: 0;
}
.page-header .page-header-content
{
/*background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgb(111 141 106);*/
  margin-bottom: 0;
  padding: 0.25em 3em;
  float: none;
  border-radius: 10px;
}
.page-header .content-pathway {
  clear: left;
}

@media (max-width: 499px)
{
  body section.page-header
  {
	padding: 1em 0 6.5em 0;
	background-position: center bottom;
  }
  .page-header h4 {
	line-height: 1;
     text-align: center;
  }
}
@media (max-width: 767px)
{
  .page-header h4
  {
    font-size: 50px;
  }
}

.page-content {
  padding: 23px 0 73px 0;
  background-color: #fff;
}

.board_head .memberIntro {
  position: relative;
}
.board_head .memberIntro a {
  color: #efe;
}

.team_member {
  text-transform: none;
}
@media (max-width: 599px)
{
  .team_member {
    width: 100%;
  }
}

.team_member .user-name,
.team_member .user-title {
  text-transform: uppercase;
}
.team_member .user-bio {
  margin: 1em 0;
}

.team_members_row .row
{
  display: flex;
  flex-wrap: wrap;
}
.team_members_row .row .team_member {
  height: auto;
}
.team_members_row .row .team_member:nth-child(4n+1) {
  clear: both;
}
.team_member img {
  border-radius: 10px;
}

.how_help2.row {
  margin-top: -157px;
}
.help-process2 .media-left {
  padding: 0.5em 1em 1em 0;
}
.help-process2 + .help-process2 {
  border-top-color: #ccc;
  border-left-color: #ccc;
}
@media (max-width: 1199px)
{
  .how_help2.row {
    margin-top: -50px;
  }
}
@media (max-width: 991px)
{
  .how_help2.row {
    margin-top: 0;
  }
}
@media (min-width: 992px)
{
  .how_help2.row {
    display: flex;
  }
  .help-process2 .media-left {
    vertical-align: top;
    padding: 2em 1em 2em 0;
  }
}

.help-process2 h5 {
  font-size: 22px;
}
.help-process2 p {
  font-size: 18px;
  color: #000;
}
.help-process2 {
  background: white;
  color: black;
  padding: 0 30px;
}
.help-process2 a {
  color: #000;
}
.help-process2 a:hover {
  color: #972c2c;

}
.help-process2 img {
  width: auto;
  max-height: 150px;
  margin: 0.5em 0 0 0;
}
@media (min-width: 550px) and (max-width: 991px)
{
  .help-process2 img {
    max-height: 100px;
  }
}

/*Label*/
.invoice td.label, .invoice td.label.widget-title {
  font: inherit;
  font-weight: bold;
  color: inherit;
  display: table-cell;
  padding: 0.1em 20px;
  text-transform: uppercase;
  border-radius: 3px;
  letter-spacing: 0.1px;
  margin: 0 auto;
  text-align: left;
}
.invoice td.label, td.label.widget-title {
  background: inherit;
  color: inherit;
}
.invoice td.label.white, .invoice td.label.widget-title.white {
  background: inherit;
  color: inherit;
}

.donation-details {
  float: right;
  margin: 1em 1em 2.5em 1em;
}
.donation-details img {
  border-radius: 5px;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Tables: */
.table thead tr {
  background-image: none;
}

/* Forms: */
.form .field_label,
.form .field_value {
  font-size: 1.0em;
}

/* Gallery: */
.gallery
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.gallery .photo_name,
.gallery .photo_caption
{
  font-size: 1.0em;
  text-align: center;
}
.gallery div.gallery-photo {
  flex: 0 1 auto;
  margin-bottom: 40px;
}
@media (max-width: 767px)
{
  .gallery div.gallery-photo {
    flex: auto;
  }
}

/* Slideshows: */
.gallery_slideshow.pull-left,
.gallery_slideshow.pull-right {
  width: 50%;
  margin: 0 1em 1em 1em;
  border-radius: 2em;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
@media (max-width: 767px)
{
  .gallery_slideshow.pull-left,
  .gallery_slideshow.pull-right {
    width: 100%;
	margin: 1em 0;
  }
}

.newsletter_signup .form-control,
.newsletter_signup_form .form-control
{
  float: none;
  width: 100%;
}

.newsletter_signup.style2 {
  background: rgb(172,202,172);
}
.newsletter_signup.style2 .form-control {
  background: #6f8d6a;
}
.newsletter_signup.style2 .form_error {
  background: #6f8d6a !important;
}

/* Events: */
.event-listing {
  display: flex;
  flex-wrap: wrap;
}
.event-listing .images_row {
  padding: 0;
  background: none;
  padding: 0 15px 0 0;
}
.event-listing .images_row img,
.single-event  .images_row img,
.event-sidebar .images_row img {
  max-width: 100%;
  height: auto;
  margin-bottom: 2em;
}

.event-sidebar {
  margin-bottom: 1em;
}
.event-sidebar .images_row {
	text-align: center;
}

.single-event .media{
}

.upcoming_event
{
  z-index: 1;
  background-color: #fff;
  margin: -1em 0.5em 2em 0.5em;
  padding-bottom: 0;
}
.upcoming_event .event-countdown {
  text-align: center;
}
.upcoming_event .clock {
  display: inline-block;
}
.upcoming_event .flip-clock-wrapper {
  float: none;
}
.upcoming_event .upcoming_label {
	float: none;
	margin-top: 0;
	padding-left: 0;
}
.upcoming_event .event-title {
  margin-top: 9px;
}
.upcoming_event .event-photo img
{
  max-width: 100%;
  margin-bottom: 1em;
  height: auto;
}

.event-listing .event-date,
.event-listing .event-place,
.event-listing .event-contact {
  padding: 15px 30px;
  line-height: 23px;
  font: 700 13px/18px "Montserrat", sans-serif;
  margin-bottom: 0px;
  text-transform: none;
}
.event-listing .event-date i,
.event-listing .event-place i,
.event-listing .event-contact i {
  margin-right: 6px;
}

.event-listing .event-date,
.event-listing .event-place,
.event-listing .event-contact {
    color: #91a1b4;
    background: #f8fafc;
}

.event-listing .event-header {
  margin-bottom: 0;
}

.event-listing .event-header .info-row span {
  float: left;
  width: -webkit-calc(100% - 36px);
  width: calc(100% - 36px);
}
.event-listing .event-header .info-row i {
  float: left;
  width: 30px;
  line-height: 20px;
  font-size: 20px;
  padding-top: 0.25em;
}

@media (max-width: 767px)
{
  .event-listing {
    max-width: none;
  }
  .event-listing-row {
    max-width: none;
    margin: 0 auto;
  }
}

/* Video: */
.video-container-16x9 {
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
.video-container-16x9 iframe,
.video-container-16x9 object,
.video-container-16x9 embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* Annoucements: */
.announcements_bar
{
	/* height: 30px; */
    text-align: center;
	font-size: 14px;
	line-height: 30px;
	font-weight: bold;
	background-color: #435061;
	background-color: #c35a5a;
	color: #Fff;
}
.announcements_bar a {
  color: #fff;
}

/* CONTENT: */

.program-buttons .btn
{
  width: 100%;
  margin-bottom: 1em;
}

@media (max-width: 767px) {
  .featured_news .caption {
    background: rgba(67, 80, 97, 1);
    padding: 0 0 10px 0;
  }
}

/* STAFF LISTING: */
.team_member img {
  height: 350px;
  width: 100%;
  object-fit: cover;
}
.team_member .user-bio {
  max-height: 450px;
  overflow: auto;
}
.team_member .user-bio p {
  font-size: 11pt;
  line-height: 1.5;
}

@media (max-width: 599px)
{
  .team_member img {
    height: auto;
	width: auto;
	max-height: 500px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
  }
  .team_member .user-bio {
    max-height: none;
  }
}



/* Hide the pathway: */
.content-pathway {
  display: none;
}



/* Rounded images: */
.rounded-img,
.step-img
{
  border-radius: 2em;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}



/* Homepage video */
.home-video
{
    display: block;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
/*	height: 56.25vw; /* 1.777778 aspect ratio */
/*  max-height: 90vh; */
}
.home-video .video-container
{
    display: block;
	position: relative;
    max-width: none;
	min-width: 100%;
	min-height: 100%;
    width: auto;
	height: auto;

	background-size: contain;
	background-repeat: no-repeat;
}
.home-video .video-container video
{
	display: block;
	position: absolute;
	visibility: visible;
	min-width: 100%;
    min-height: 100%;
    width: auto;
	height: auto;

	top: 50%;
    left: 50%;
/*    z-index: -100; */
    transform: translateX(-50%) translateY(-50%);
}



/* Next Steps */
.apply-now
{
  text-align: center;
  margin    : 2em 0;
}

.next-step
{
  position: relative;
  margin  : 2em 0;
}

.step-img
{
  width    : 400px;
  max-width: 100%;
  height   : auto;
  position : relative;
  margin   : 0 auto;
  display  : block;
}

@media screen and (max-width: 991px)
{
  .step-img
  {
    width    : 600px;
  }
}

.step1 li,
.step2 li,
.step3 li,
.next-step p
{
  font-size: 1.3em;
  line-height: 1.6em;
}

@media screen and (min-width: 992px)
{
  .step2
  {
    display: flex;
    align-items: center;
  }
}

.btn-cta
{
  font-size: 1.5em;
  line-height: 1.5em;
  white-space: normal;
  padding: 0.5em 2em;
}