/*
Theme Name: Delaware African Caribbean Commission
Theme URI: https://afrocarib.delaware.gov/
Author: Delaware GIC - Matt Campbell & Julianne Solum
Author URI: https://gic.delaware.gov
Description: Custom WordPress theme designed exclusively for the Delaware African and Caribbean Affairs Commission.
Version: CLF 4.0.1
Tags: Bootstrap, mobile first, State of Delaware
Text Domain: dosgic_AFROCARIB_theme
*/

/* ########################################################### */

/*  D E V E L O P E R   C U S T O M I Z A B L E   S T Y L E S  */
/*  State of Delaware - CLF4 2016  */
/*  Developed by the GIC (Matt Campbell & Julianne Solum)  */

/* ########################################################### */

/*==========  Bootstrap 3 Mobile First Method CSS  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

/* =============== ELEMENTS =============== */
html {
-webkit-font-smoothing: antialiased !important;
position: relative;
min-height: 100%;
}
body {
width: 100%;
min-height: 100%;
font-family: 'Open Sans', sans-serif !important;
font-weight: 400 !important;
font-size: 16px !important;
-webkit-font-smoothing: antialiased !important;
padding-bottom: 980px;
color: #3c2415;
}
/* ============== ID's ============== */

/* BOOTSTRAP NAV-WALKER COMPENSATORY CSS  */
/* ID OF BELOW SELECTOR WILL CHANGE BASED ON WEBSITE */
#menu-main {
z-index: 999;
}
.affix #menu-main {
position: absolute !important;
}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: #537234;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#main_header h1, 
#main_content h1 {
font-family: 'Aleo', serif !important;
font-weight: 700;
color: #3c2415;
font-size: 45px;
margin-top: 10px;
}
#main_header h2, 
#main_content h2 {
font-family: 'Aleo', serif;
font-weight: 700;
color: #537234 !important;
margin-top:	12px;
padding-top: 12px;
font-size: 25px;
letter-spacing: 0.85px;
}
#main_content h3 {
font-family: 'Aleo', serif !important;
font-weight: 400;
font-size: 30px;
color: #222 !important;
margin-top: 0px;
}

a,
#main_content a, 
#main_content a:link, 
#main_content a:active, 
#main_content a:visited {
color: #890101;
text-decoration: underline;
font-weight: bold;
}
#main_content a:hover {
color: #537234;
text-decoration: none;
font-weight: bold;
}
#main_content ul, 
#main_content ol {
font-size: 0.9em;
line-height: 2.1em;
margin-top: 1.0em;
margin-bottom: 1.0em
}
#loading1 {
margin-left: auto;
margin-right: auto;
width: 100px
}
#loading2 {
margin-left: auto;
margin-right: auto;
width: 100px
}

#agencyFooter {
background-color: #537234;
color: #fff;
font-size: 15px;
line-height: 1.5em;
padding-top: 30px;
padding-bottom: 2.0em;
border-bottom: 10px solid #245194;
position: absolute;
bottom: 0;
width: 100%;
height: 343px;
z-index: 1029;
}

#agencyFooter a,
#agencyFooter a:link, 
#agencyFooter a:active, 
#agencyFooter a:visited {
color: #fff;
text-decoration: none
}
#agencyFooter a:hover {
color: #fff;
text-decoration: underline
}
#agencyFooter ul {
list-style-type: none;
margin-left: -38px;
}
/* ================ Classes ================ */

/* WordPress Core CSS */
.alignnone {
margin: 5px 20px 20px 0
}
.aligncenter, 
div.aligncenter {
display: block;
margin: 5px auto 5px auto
}
.alignright {
float:right;
margin: 5px 0 20px 20px
}
.alignleft {
float: left;
margin: 5px 20px 20px 0
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px
}
a img.alignnone {
margin: 5px 20px 20px 0
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0
}
.wp-caption.alignright {
margin: 5px 0 20px 20px
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden
}
.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-size: 0.875rem;
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 */
}
img.alignright { 
float: right;
margin: 0 0 1em 1em
}
img.alignleft { 
float: left;
margin: 0 1em 1em 0
}
img.aligncenter { 
display: block; 
margin-left: auto;
margin-right: auto
}
.alignright { 
float: right
}
.alignleft { 
float: left
}
.aligncenter { 
display: block; 
margin-left: auto; 
margin-right: auto
}
/* End WP Core Classes */

.agencyFooter_logo {
	width: 75px;
	height: 79px;
	border: none;
	text-align: center;
  margin-bottom: 2rem;
}

hr {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-image: none;
  margin-bottom: 25px;
  margin-top: 20px
}
hr.clf {
  border: 1px solid #537234;
}

hr.gray {
  border: 1px solid #e9eae5;
}

hr.magenta {
  border: 1px solid #b21f61;
}

hr.orange {
  border: 1px solid #ea6226;
}

hr.green {
  border: 1px solid #537234;
}

.border_none {
  border: none;
}

.small-top {
font-size: 18px;
color: #fff;
padding: 0px;
line-height: 30px;
}
.interiorTitle {
color: #fff;
font-size: 25px;
font-weight: 300;
font-family: 'Aleo', serif;line-height: 1.0;
padding-top: 30px !important;
padding-bottom: 15px !important;
background-color: #537234;
}
.interior-title-wrapper {
margin-top:-20px;
background-color: #537234;
}
.jumbo {
font-size: 45px;
}
.photo-highlights {
margin-bottom:-126px;
}
.highlight {
padding-right:0px !important;
padding-left:0px !important;
}}


/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
/* ============= ELEMENTS ==================== */

/* ============= ID's ========================= */

/* ============= Classes ====================== */

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
/* ============= ELEMENTS ==================== */

/* ============= ID's ========================= */

#agencyFooter {
padding-top: 2.0em;
padding-bottom: 2.0em;
height: 179px;
}

/* ============= Classes ====================== */
.small-top {
font-size: 18px;
color: #fff;
padding: 0px;
line-height: 30px;
}}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
/* ============= ELEMENTS ==================== */

/* ============= ID's ========================= */

/* ============= Classes ====================== */
.small-top {
font-size: 21px;
color: #fff;
padding: 0px;
line-height: 40px;
}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
/* ============= ELEMENTS ==================== */

/* ============= ID's ========================= */

/* ============= Classes ====================== */
.small-top {
font-size: 21px;
color: #fff;
padding: 40px;
line-height: 40px;
}}

/* ============= CUSTOM MEDIA QUERIES ========= */

@media (max-width: 874px) {
.menu_text {
position: absolute;
margin-left: 60px;
margin-top:	-44px;
opacity: 1;
font-size: 20px;
font-weight: bold;
color: #537234;
}}
@media (min-width: 875px) {
.menu_text {
position: absolute;
margin-left: 60px;
margin-top:	-44px;
opacity: 0;
font-size: 20px;
font-weight: bold;
color: #537234;
}}
@media (min-width: 1100px) {
.menu_text {
position: absolute;
margin-left: 60px;
margin-top:	-100px;
opacity: 0;
font-size: 20px;
font-weight: bold;
color: #537234;
}}
@media (min-width: 1300px) {
.menu_text {
position: absolute;
margin-left: 60px;
margin-top:	-100px;
opacity: 0;
font-size: 20px;
font-weight: bold;
color: #537234;
}}
/* =========== END CUSTOM MEDIA QUERIES =========== */


html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

a img {
  border: none;
}

html {
  background-color: #fff;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375em;
  line-height: 22.5px;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
}

body #preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999999999999999999999;
  background: url("../img/preloader2.gif") 50% 50% no-repeat #fff;
}

.mobile-overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* hack for ie8 */
  opacity: 1\9;
  visibility: visible\9;
  display: none\9;
  z-index: 6;
}

.mobile-overlay.active {
  visibility: visible;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  /* hacks for ie8 */
  display: block\9;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Aleo", serif !important;
  line-height: 1;
  position: relative;
  z-index: 2;
}

h1 {
  font-size: 100px;
}

h2 {
  font-size: 65px;
}

h3 {
  font-size: 35px;
}

h4 {
  font-size: 30px;
  font-family: "Aleo", serif !important;
  color: #fff !important;
}

h5 {
  font-size: 19px;
  font-family: "Aleo", serif !important;
  color: #537234;
}

h6 {
  font-size: 15px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* https://paulirish.com/2012/box-sizing-border-box-ftw/ */
}

img {
  vertical-align: middle;
}

strong {
  font-weight: bold;
}

.clearfix {
  *zoom: 1;
}

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

.inline {
  display: inline-block !important;
}

.center {
  text-align: center !important;
  margin: 0 auto;
}

button:hover,
input[type="submit"]:hover,
label {
  cursor: pointer;
}

.icon-right-arrow {
  font-size: 11px !important;
}

/* ============= CUSTOM CLASSES for items ============== */

/* Brand Colors */

.fa-magenta {  color: #b21f61;}
.fa-lime {  color: #3db54a;}
.fa-yellow { color: #febf10;}
.fa-sky { color: #08a0c8;}

/* New Logo Colors */
.fa-orange, .text-orange, .bg-orange { color: #ea6226;}
.fa-green, .text-green, .bg-green { color: #537234;}
.fa-brown, .text-brown, .bg-brown { color: #3c2415;}
.fa-red, .text-red, .bg-red { color: #b72726;}

.brand-tagline {
  font-size: 3rem;
  padding: 2rem;
  background-color: rgba(256, 256, 256, 0.5);
}


/************************************* 
  Homepage Hero .subheader-section 
**************************************/
.hero-section {
  position: relative;
  overflow: hidden;
  background-image: url("img/afro-carib-bg-diverse-hands-compressed.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height: 550px;
}

/* #subheader {
  height: 65vh !important;
} */

/* Small devices (tablets, 768px and up) */
/* @media (min-width: 500px) {
  #subheader {
    height: 100vh;
  }
} */

.subheader-section {
  position: relative;
  overflow: hidden;
  background-image: url("img/afro-carib-bg-diverse-hands-compressed.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height: 300px;
}

.subheader-section {
  position: relative;
  z-index: 5;
  text-align: left;
}

.subheader-section h4 {
  display: block;
  margin-bottom: 20px;
  font-weight: 300;
}

.subheader-section h1 {
  display: block;
  margin-left: 0px;
  color: #ffffff;
}

.subheader-section a {
  margin-top: 50px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.subheader-section a span {
  margin-left: -22px;
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.subheader-section a span svg {
  width: 19px;
  height: 11px;
  fill: #fff;
}

.subheader-section a:hover span {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.subheader-section.background-section {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: rgba(0,0,0,0.5);
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -ms-behavior: url(../js/backgroundsize.htc);
  position: relative;
}

/* .subheader-section.background-section .container {
  position: relative;
  height: 100%;
  padding: 0 15px !important;
} */


.subheader-section.background-section article {
  position: absolute;
  left: 15px;
  top: 50%;
  -ms-transform: translate(0, -50%);
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Chrome, Safari, Opera */
  transform: translate(0, -50%);
}

.subheader-section.background-section:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("img/subheader-img-wrap.png");
}


/**************************
  #about section
**************************/

.about-section {
  overflow: hidden;
}
.about-logo {
  width: 200px;
}

.hero-logo-lockup {
  width: 480px;
  margin: 0 auto;
}

.about-section .about-logo-lockup {
  margin-bottom: 4.5rem;
  padding: 0 1rem;
}

.about-section .container > p {
  width: 60%;
  margin: 0 auto 40px;
  font-weight: 300;
  font-size: 19px;
  /* color: #606364; */
}
.about-section a, .about-section a:link, .about-section a:active, .about-section a:visited {
	color:#890101;
	font-weight: bold;
  transition:	0.5s;
}
.about-section a:hover {
  color:#537234;
  text-decoration: none;
  font-weight: bold;
}

.about-section .container .about__item {
  text-align: center;
  position: relative;
}

.about-section .container .about__item .icon {
  margin-bottom: 28px;
}

.about-section .container .about__item i.icon--calendar {
  color: #537234;
  position: relative;
}

.about-section .container .about__item i.icon--calendar:after {
  content: "";
  top: -50%;
  margin-top: -55px;
  left: 50%;
  margin-left: -55px;
  width: 110px;
  height: 110px;
  display: block;
  behavior: url("../PIE.htc");
  position: relative;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid #537234;
}

.about-section .container .about__item h6 {
  color: #3c3d40;
  margin-bottom: 20px;
}

.about-section .container .about__item p {
  color: #606364;
  line-height: 1.52;
  font-weight: 300;
  margin-bottom: 0;
}
/* Xtra-Small Portrait devices (phones, 400px and up) */
@media (max-width: 874px) {
  #about .about__item {
    margin-top: 40px;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 875px) {
  #about .about__item {
    margin-top: 0px;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 1100px) {
  #about .about__item {
    margin-top: 0px;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1300px) {
  #about .about__item {
    margin-top: 0px;
  }
}


/*******************************
  #numbers section
********************************/

.numbers-section .container h3 {
  margin-bottom: 50px;
}

.numbers-section .container > p {
  font-weight: 300;
  margin: 0 auto 30px;
  width: 60%;
  color: #606364;
  font-size: 19px;
  line-height: 28px;
}

.numbers-section i {
  color: #ea6226;
  margin-bottom: 20px;
}

.numbers-section i:after {
  display: none;
}

.numbers-section .icon {
  height: 70px;
  line-height: 70px;
}

.numbers-section .anim-numb {
  color: #ea6226;
  font-size: 60px;
  line-height: 45px;
  margin-bottom: 20px;
  font-weight: 700;
}

.numbers-section h6 {
  font-size: 15px;
  color: #313133;
}


/* TODO: 
 * The following rule is incorrectly commented out and is throwing
 * an error in VSCode: "at-rule or selector expected".
 * Nothing appears broken on the front end though.
 * But, as soon as I try and correct the comment or remove it 
 * entirely, the entire green footer moves to the top of the page!
 * Plus, the .customNavigation is not being used in the template.
*/
/* @media screen and (-webkit-min-device-pixel-ratio: 0) { */
  /* line 1495, ../../scss/custom/_content.scss */
  .subheader-section .customNavigation a.next::after {
    right: 9px !important;
  }
}





/* --------------------------------------------------------------------------------------
+
+ LAYOUT
+
-------------------------------------------------------------------------------------- */
/* line 10, C:/Ruby21/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
html, body {
  height: 100%;
}

/* line 12, C:/Ruby21/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.layout {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -auto;
}

/* line 11, ../../scss/custom/_layout.scss */
main {
  display: block;
  /* this is important for some browsers (opera, ...) who recognize <main> as inline element */
}

/* line 14, ../../scss/custom/_layout.scss */
.layout {
  overflow-x: hidden;
}

/* line 17, ../../scss/custom/_layout.scss */
.container {
  margin: 0 auto;
  width: 1170px;
}

@media (max-width: 1169px) {
  /* line 23, ../../scss/custom/_layout.scss */
  .container {
    width: 100%;
  }
}
/* line 29, ../../scss/custom/_layout.scss */
.left {
  float: left;
}

/* line 34, ../../scss/custom/_layout.scss */
.right {
  float: right;
}


/*************************************
************************************** 
************************************** 

  Buttons

**************************************
************************************** 
**************************************/
/* line 12, ../../scss/custom/_buttons.scss */
.btn1 {
  font-family: "Open Sans", sans-serif !important;
  font-size: 15px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -o-user-select: none;
  user-select: none;
  text-decoration: none !important;
  text-shadow: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  display: inline-block;
  text-align: center;
  margin: 0;
  /* remove margin for some browsers */
  color: #ea6226;
  border: none;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* line 30, ../../scss/custom/_buttons.scss */
.btn1.btn1--medium {
  width: 170px;
}
/* line 33, ../../scss/custom/_buttons.scss */
.btn1.btn1--big {
  width: 250px;
  font-size: 20px;
}
/* line 36, ../../scss/custom/_buttons.scss */
.btn1:hover {
  cursor: pointer !important;
  text-decoration: none !important;
  color: #537234 !important;
}
.btn1:focus {
  cursor: pointer !important;
  text-decoration: none !important;
  color: #537234 !important;
}
/* line 40, ../../scss/custom/_buttons.scss */
.btn1:hover span {
  visibility: visible;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  /* hacks for ie8 */
  display: block\9;
  margin-left: 10px !important;
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
/* line 47, ../../scss/custom/_buttons.scss */
.btn1.btn--white {
  height: 61px;
  line-height: 61px;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
/* line 51, ../../scss/custom/_buttons.scss */
.btn1.btn--white:hover {
  padding: 0 10px;
}
/* line 56, ../../scss/custom/_buttons.scss */
.btn1.btn--blue {
  height: 51px;
  line-height: 51px;
  background-color: #313133;
}
/* line 60, ../../scss/custom/_buttons.scss */
.btn1.btn--white-blue {
  height: 51px;
  line-height: 51px;
  border: 1px solid rgba(197, 199, 213, 0.4);
  background-color: transparent;
  color: #0f122f !important;
}
/* line 66, ../../scss/custom/_buttons.scss */
.btn1 span {
  display: inline-block;
  visibility: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* hack for ie8 */
  opacity: 1\9;
  visibility: visible\9;
  display: none\9;
  margin-left: 10px;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin-left: -3px;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
/* line 74, ../../scss/custom/_buttons.scss */
.btn1:hover span svg {
  width: 19px;
  height: 11px;
  fill: #537234;
}


/* --------------------------------------------------------------------------------------
+
+ ICONS FONT
+
-------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'et-line';
  src: url("fonts/et-line.eot");
  src: url("fonts/et-line.eot?#iefix") format("embedded-opentype"), url("fonts/et-line.woff") format("woff"), url("fonts/et-line.ttf") format("truetype"), url("fonts/et-line.svg#et-line") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
/* line 20, ../../scss/custom/_icons.scss */
[data-icon]:before {
  font-family: 'et-line';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}

/* line 34, ../../scss/custom/_icons.scss */
.icon--calendar {
  font-family: 'et-line';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 64px;
  font-size: px-rem(64px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  color: #fff;
  height: 110px;
  line-height: 110px;
}
/* line 50, ../../scss/custom/_icons.scss */
.icon--calendar:after {
  content: '';
  width: 110px;
  height: 110px;
  display: block;
  behavior: url("PIE.htc");
  position: relative;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: 0;
  border: 2px solid #fff;
}
/* line 101, ../../scss/custom/_icons.scss */
.icon--calendar:before {
  content: "\e00d";
}
.icon--calendar:before {
  -o-transition:						.5s;
  -ms-transition:						.5s;
  -moz-transition:						.5s;
  -webkit-transition:					.5s;
  transition:							.5s;
}
.icon--calendar:hover:before {
    color: #537234;
}






/* --------------------------------------------------------------------------------------
+
+ CUSTOM RULES
+
-------------------------------------------------------------------------------------- */
/* line 8, ../../scss/custom/_custom-rules.scss */
section:first-child {
  padding: 0;
}

/* line 12, ../../scss/custom/_custom-rules.scss */
section {
  padding: 85px 0;
}

/* line 15, ../../scss/custom/_custom-rules.scss */
.light-blue {
  color: #537234 !important;
}

/* line 19, ../../scss/custom/_custom-rules.scss */

.h2-heading,
.h3-heading {
  font-size: 35px;
  font-weight: normal;
  margin-bottom: 60px;
}
/* line 25, ../../scss/custom/_custom-rules.scss */
.h2-heading:before,
.h3-heading:before {
  position: absolute;
  content: "";
  width: 86px;
  background-color: #c8cad5;
  height: 2px;
  top: 100%;
  left: 50%;
  margin-left: -43px;
  margin-top: 27px;
}

.mb-60 {
  margin-bottom: 60px;
}





/* --------------------------------------------------------------------------------------
+
+ MEDIA QUERY
+
-------------------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  	/*************************************
  	************************************** 
  	************************************** 
  
  	  #about section
  
  	**************************************
  	************************************** 
  	**************************************/
  /* line 24, ../../scss/custom/_media.scss */
  #about .about__item:first-child, #about .about__item:nth-child(2) {
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  	/*************************************
  	**************************************  
  	************************************** 
  
  	  #subheader section
  
  	**************************************
  	************************************** 
  	**************************************/
  /* line 468, ../../scss/custom/_media.scss */
  .subheader-section {
    position: relative;
  }
  /* line 471, ../../scss/custom/_media.scss */
  .subheader-section .container article {
    position: relative;
    z-index: 5;
    text-align: center !important;
  }
  /* line 475, ../../scss/custom/_media.scss */
  .subheader-section .container article h4 {
    font-size: 27px;
  }
  /* line 478, ../../scss/custom/_media.scss */
  .subheader-section .container article h1 {
    font-size: 90px;
    margin-left: 0;
    letter-spacing: -5px;
  }
  /* line 483, ../../scss/custom/_media.scss */
  .subheader-section .container article a {
    margin-top: 50px;
  }
  /* line 489, ../../scss/custom/_media.scss */
  .subheader-section .customNavigation a.next {
    margin: 0 50px 0 0 !important;
  }
  /* line 493, ../../scss/custom/_media.scss */
  .subheader-section .owl-pagination {
    left: 50px;
  }
  /* line 497, ../../scss/custom/_media.scss */
  .subheader-section.background-section article {
    left: 0;
  }
  /* line 502, ../../scss/custom/_media.scss */
  .subheader-section.video-section article {
    left: 0;
  }
  /* line 504, ../../scss/custom/_media.scss */
  .subheader-section.video-section article .console {
    float: none !important;
    display: block !important;
  }

  	/*************************************
  	************************************** 
  	************************************** 
  
  	  #about section
  
  	**************************************
  	************************************** 
  	**************************************/
  /* line 524, ../../scss/custom/_media.scss */
  #about {
    position: relative;
  }
  /* line 527, ../../scss/custom/_media.scss */
  #about .container > p {
    width: 90%;
  }
  /* line 531, ../../scss/custom/_media.scss */
  #about .about__item {
    margin-bottom: 0 !important;
  }

  	/*************************************
  	************************************** 
  	************************************** 
  
  	  #numbers section
  
  	**************************************
  	************************************** 
  	**************************************/
  /* line 668, ../../scss/custom/_media.scss */
  .numbers-section .row > div:first-child {
    margin-bottom: 60px;
  }
  /* line 671, ../../scss/custom/_media.scss */
  .numbers-section .row > div:nth-child(2) {
    margin-bottom: 60px;
  }
}
@media (max-width: 550px) {
  	/*************************************
  	************************************** 
  	************************************** 
  
  	  #subheader section
  
  	**************************************
  	************************************** 
  	**************************************/
  /* line 1220, ../../scss/custom/_media.scss */
  .subheader-section {
    position: relative;
  }
  /* line 1223, ../../scss/custom/_media.scss */
  .subheader-section .container article {
    position: relative;
    z-index: 5;
    text-align: center !important;
  }
  /* line 1227, ../../scss/custom/_media.scss */
  .subheader-section .container article h4 {
    font-size: 22px;
  }
  /* line 1230, ../../scss/custom/_media.scss */
  .subheader-section .container article h1 {
    font-size: 55px;
  }
  /* line 1234, ../../scss/custom/_media.scss */
  .subheader-section .container article a {
    margin-top: 50px;
  }
  /* line 1238, ../../scss/custom/_media.scss */
  .subheader-section .container .customNavigation {
    display: none;
  }
  /* line 1241, ../../scss/custom/_media.scss */
  .subheader-section .container .owl-pagination {
    left: 50%;
    -ms-transform: translate(-50%, 0);
    /* IE 9 */
    -webkit-transform: translate(-50%, 0);
    /* Chrome, Safari, Opera */
    transform: translate(-50%, 0);
  }
}
@media (max-width: 450px) {
  	/*************************************
  	************************************** 
  	************************************** 
  
  	  #numbers section
  
  	**************************************
  	************************************** 
  	**************************************/
  /* line 1277, ../../scss/custom/_media.scss */
  .numbers-section .row > div {
    display: block;
    width: 100%;
    float: none;
  }
  /* line 1282, ../../scss/custom/_media.scss */
  .numbers-section .row > div:first-child {
    margin-bottom: 60px;
  }
  /* line 1285, ../../scss/custom/_media.scss */
  .numbers-section .row > div:nth-child(2) {
    margin-bottom: 60px;
  }
  /* line 1288, ../../scss/custom/_media.scss */
  .numbers-section .row > div:nth-child(3) {
    margin-bottom: 60px;
  }
}

/* ============================= END CUSTOM MEDIA QUERIES ============================= */


/* ======================== STYLE FOR THE PUBLIC MEETING CALENDAR ====================== */
#public-meetings a, 
#public-meetings a:link, 
#public-meetings a:active, 
#public-meetings a:visited {
color: #b72726;
text-decoration: none;
font-weight: bold;
}
#public-meetings a:hover {
color: #ccc;
text-decoration: none;
font-weight: bold;
}
ul.meeting-container > li {
  list-style-type: none;
}
.meeting-container {
  text-align: center;
  padding:0px;
}
span.meeting-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #606060;
}
span.meeting-agency {
  display:none;
}
span.meeting-date {
  font-style: italic !important;
  color: #606060;
  font-weight: bold;
  font-size: 17px;
}
span.meeting-time {
  font-style: italic !important;
  color: #7e8082;
  font-weight: bold;
  font-size: 17px;
}
span.meeting-end {
  font-style: italic !important;
  color: #7e8082;
  font-weight: bold;
  font-size: 17px;
}
span.meeting-purpose {
  display:none;
}
span.meeting-address {
    color: #7e8082;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 4px;
    display:block;
}
a.map-link, 
a.map-link:link, 
a.map-link:active, 
a.map-link:visited,
a.info-link, 
a.info-link:link, 
a.info-link:active, 
a.info-link:visited {
  color: #537234;
  background-color: #fff;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #537234;
  border-radius: 30px;
  padding: 15px 35px;
}
a.info-link:hover, a.map-link:hover {
  color: #fff !important;
  background-color: #537234;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #537234;
  border-radius: 30px;
  padding: 15px 35px;
}
/* ====== END PUBLIC MEETING CALENDAR ======= */

/* ======  Bootstrap Overrides  ====== */
.label-success {
background-color: #477C41;
}

/* ======  Utility Styles  =========== */

/* Text utilities */
.text-smaller {
  font-size: 30px;
}
.text-white {
  color: #fff;
}
.ff-aleo {
  font-family: 'Aleo', sans-serif;
}

/* Background utilities */
.bg-tint-60 {
  background-color: #fff;
  opacity: .9;
  padding: 2rem;
}
.bg-brand-header {
  background-color: #fff;
  padding: 2rem;
}

/* Flex Utilities */
.d-flex {
  display: flex;
}
.justify-content-center {
  justify-content: center;
}
.align-items-center {
  align-items: center;
}