*,
:after,
:before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  outline:none;
}

html {
    overflow-x:hidden;
}
body,
html {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  background: #fff;
  color: #9099a2;
  margin:0;
  padding:0;
  line-height: 1.7;
  height: 100%; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing:grayscsale;
}

.site-container {
  min-height: 100%;
}

.site-container-inner {
  padding-bottom: 450px;
}

/* fix safari grid issue */
.row:before, .row:after {
  display: none !important;
}

@media (max-width: 1400px) {
  body,
  html {
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .site-container-inner {
    padding-bottom: 0;
  }
}

/*****************************/
/*       Typography          */
/*****************************/
h1 {
  font-size: 2.667em;
}

h2 {
  font-size: 2.222em;
  font-weight: 700;
  margin-bottom: 50px !important;
}

.sm-hr h2 ,
.sm-hr h3 {
  position: relative;
}

.sm-hr h2:before,
.sm-hr h3:before {
  display: block;
  content: "";
  width: 65px;
  height: 1px;
  background: #FFF;
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  margin: 0 auto;
}

.sm-hr.green h2:before,
.sm-hr.green h3:before {
  background: #82bc00;
}

.sm-hr h3:before {
  top: 58px;
}

.sm-hr.left h3:before {
  left: 0;
  margin: 0;
}

h3 {
  font-size: 1.556em;
  font-weight: 700;
  margin-bottom: 50px !important;
}

h4 {
  font-size: 1.111em;
}

p{
  font-size: 1em;
  margin-bottom: 1em;
}

a {
  color: #000;
}
a:hover{
  text-decoration: none;
  opacity: 0.9;
}

ul {
  padding: 0;
  margin: 0;
}

.c-white * {
  color: #FFF;
}

.site-content ul {
  margin-left: 20px;
  margin-top: -10px;
  margin-bottom: 15px;
}

@media (max-width: 1400px) {
  h1 {
    font-size: 2.3em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.3em;
  }
  h4 {
    font-size: 1.2em;
  }
}

/*****************************/
/*          General          */
/*****************************/
.wrapper,
.wrapper-sm {
	max-width: 1580px;
	padding:0px 30px;
	margin: 0 auto !important;
}

.wrapper-sm {
  max-width: 1270px;
}

header {
  background: transparent;
  padding: 0 30px;
  width: 100%;
  transition: all 200ms cubic-bezier(0.55, 0, 0.1, 1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  border-bottom: 1px solid #FFF;
}

header ul li {
  display: inline-block;
  color: #FFF;
}

header ul li a {
  color: #FFF;
  font-weight: 700;
  font-size: 16px;
  padding: 35px 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

header .site-branding img{ 
  transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

header ul li.current-menu-item a,
header ul li a:hover{
  color: #56b2d3;
}

header.sticky{
  background: #56b2d3;
  opacity: 1;
}

header.sticky ul li a{
  padding: 20px 10px
}
header.sticky .site-branding{
  padding: 15px 0
}
header.sticky .site-branding img{
  width: 80px;
}


header.sticky ul li.current-menu-item a,
header.sticky ul li a:hover{
  color: #014969;
}

ul.nav-menu li.menu-item-has-children{
  position:relative;
}

ul.nav-menu ul.sub-menu {
  background-color:#FFFFFF;
  left: -9999%;
  padding: 0 17px;
  position: absolute;
  text-align: left;
  top: 97px;
  width: 120px;
  z-index: 9999;
  /* border-top: 1px solid #e5e5e5; */
}

header.sticky ul.nav-menu ul.sub-menu {
  top: 67px
}

ul.nav-menu li.menu-item-has-children:hover > ul.sub-menu{
  left:-15px !important;
}

ul.nav-menu li.menu-item-has-children > ul.sub-menu li:hover a {
  text-decoration: none;
}

ul.nav-menu ul.sub-menu li{
  display:block;
  padding: 0;
  margin: 0;
}

ul.nav-menu ul.sub-menu li:last-child a{
  border-bottom:0px;
}

ul.nav-menu ul.sub-menu li a {
  color: #0080bb;
  display: block;
  font-size: 0.800em;
  font-weight: 700;
  background: #FFF !important;
  padding: 9px 7px;
  border-bottom: 1px solid #0080bb;
  
}

header .site-branding {
  padding: 15px 0;
}

footer {
  background: #232323;
  height: 450px;
  margin-top: -450px;
  padding: 65px 0 0;
}

footer * {
  color: #FFF;
  font-size: 14px;
  line-height: 1.7;
}

footer #google_language_translator select option {
    color: #000 !important;
}

footer .widget-title {
  font-size: 18px;
  font-weight: 700;
  margin: 30px 0px 20px !important
}

footer #text-2 p strong {
  font-size: 1.1em;
}

footer ul li {
  list-style: none;
  padding: 0 3px 1em;
}

footer ul li a:hover,
footer .widget p a:hover{
  color: #FFF;
  text-decoration: underline;
}


footer ul.socialmediaicons li{
  display: inline-block;
  border: 2px solid #0080bb;
  border-radius: 50%;
  padding: 7px 10px;
  margin-right: 10px;
  line-height: 1.7 !important;
}


footer ul.socialmediaicons li.fb{
    padding: 7px 12px;
}

footer ul.socialmediaicons li i{
  color: #FFF;
  font-size: 14px;
  padding: 0 3px;
  transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;

}



footer ul.socialmediaicons li:hover i{
  transform: scale(1.1);
}

footer .copyright {
  font-size: 14px;
  color: #9099a2;
  padding: 22px 45px 0;
  border-top: 1px solid #9099a2;
}

footer .container-fluid {
  padding: 0 45px 40px;
}

footer .cd-top {
  position: fixed;
  width: 41px;
  right: 15px;
  bottom: 30px;
  margin: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

footer .cd-top .icon-stack{
  position: relative;
  display: block;
  width: 39px;
  height: 39px;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  background-color: transparent;
  border: 1px solid #0080bb;
  overflow: hidden;
  -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
  transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
}

footer .cd-top .icon-stack i{
  position: relative;
  color: #0080bb;
  z-index: 5;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  transition: .2s ease;
  background: transparent;
}

footer .cd-top:hover .icon-stack{
  background: #000;
}
footer .cd-top:hover .icon-stack i{
  color: #FFF;
}

footer .cd-top.cd-is-visible, 
footer .cd-top
footer .cd-fade-out, 
footer .no-touch 
footer .cd-top:hover { 
  transition: opacity 0.3s ease 0s, visibility 0s ease 0s; 
}

footer .cd-top.cd-is-visible {
	opacity: 1;
	visibility: visible;
}

footer .cd-top.cd-fade-out { 
  opacity: 0.5; 
}

#pagebanner{
  height: 300px;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-color: #FFF;
  background-repeat: no-repeat;
  color: #FFF;
}

#pagebanner h1 {
  text-transform: uppercase;
  padding-top: 94px;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  background-position:center 20%;
  background-repeat:no-repeat;
  /* change if the mask should have another color then white */
  z-index: 99999;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url('img/preloading.gif');
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

body.admin-bar header,
body.admin-bar header.sticky { 
  top: 32px !important; 
}

@media (max-width: 1580px){
  .wrapper,
  .wrapper-sm {
    max-width: 1200px;
  }

  footer .widget-title {
    font-size: 16px;
  }
}

@media (max-width: 1250px){
  header ul li a { 
    font-size: 14px;
    padding: 35px 8px;
  }
  header.sticky ul li a {
    padding: 20px 8px;
  }
}

@media (max-width: 1030px){
  header ul li a { 
    font-size: 14px;
    padding: 35px 5px;
  }
}

@media (max-width: 991px){
  header {
    background: #56b2d3;
    opacity: 0.9;
  }
  header .site-branding img{
    width: 80px;
  }
  footer {
    height: auto;
    margin-top: 0;
  }
}

@media (max-width: 767px){
  body.admin-bar header { 
    top: 46px !important; 
  }

  /* header {
    position: fixed;
    padding: 20px 15px;
    z-index: 99;
  } */
  #pagebanner{
    height: 200px;
  }
  footer .container-fluid,
  footer .copyright {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
  }
  footer * {
    font-size: 13px;
    line-height: 1.3;
  }
  
  footer .widget-title {
    margin: 10px 0px !important;
    font-size: 14px;
  }
  footer ul li {
    padding: 0 3px .8em
  }
}

@media (max-width: 414px) {
  .wrapper, .wrapper-sm {
    padding: 0px 15px
  }
}

/*****************************/
/*        Morph Menu         */
/*****************************/
.morph-header-bar, 
.morph-logo-wrapper {
  display:none !important; 
}

.morph-menu-wrapper {
  top: 100px !important;
}

.morph-main-menu-button-wrapper {
  top: 18px !important;
  left: 15px !important;
}

.menu-toggle-div {
  display: block;
  cursor: pointer;
  margin-top: -58px;
  margin-left: 10px;
}

.menu-toggle {
  display: none;
}

.morph-by-bonfire ul li a,
.morph-by-bonfire ul.sub-menu li a {
  text-transform: uppercase !important;
  color: #56b2d3 !important;
  font-weight: 700 !important;
}

@media (min-width: 992px) {
  .morph-main-menu-button-wrapper,
  .menu-toggle-div {
    display:none !important; 
  }
}

@media (max-width: 991px) {
  .morph-heading-overlay, 
  .morph-heading-wrapper, 
  .morph-heading-image,
  .morph-heading-inner {
    height: 0 !important;
    border: 0 !important;
  }
}

@media (max-width: 767px){
  .morph-menu-button-right{
    right: 30px !important;
  }
}

/*****************************/
/*          Slick            */
/*****************************/
.slick-next{
  right: 0;
}
.slick-prev{
  left: 0;
}
.slick-dots {
  bottom: 10px !important
}
.slick-dotted.slick-slider{
  margin-bottom: 0 !important;
}
.slick-dots li button:before{
  color: #FFF !important;
  font-size: 10px !important;
}
.slick-dots li.slick-active button:before{
  opacity: 1 !important;
}
/*****************************/
/*      VC Custom Class      */
/*****************************/
.visual-wrapper > .vc_row {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.visual-wrapper > .vc_row.p-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.visual-wrapper > .vc_row.pt-0 {
  padding-top: 0 !important;
}
.visual-wrapper > .vc_row.pb-0 {
  padding-bottom: 0 !important;
}

/* .wpb_button, 
.wpb_content_element, 
ul.wpb_thumbnails-fluid>li{
  margin-bottom: 15px;
} */

.wpb_single_image{
  margin-bottom: 0 !important;
}

.wp-video {
  margin: 0 auto;
}


@media (max-width: 1400px){
  .visual-wrapper > .vc_row {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 767px){
  .visual-wrapper > .vc_row-fluid {
    padding-left: 30px;
    padding-right: 30px;
  }
  .wrapper .visual-wrapper > .vc_row-fluid ,
  .wrapper-sm .visual-wrapper > .vc_row-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  .visual-wrapper > .vc_row-fluid.max-900 {
    padding-left: 0;
    padding-right: 0;
  }
  .visual-wrapper > .vc_row{
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .vc_row.reverse-md{
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

}

/*****************************/
/*      Gravity Form        */
/*****************************/
.gfield.w-100 input,
.gfield.w-100 select{
  width: 100% !important;
}

.gform_wrapper div.validation_error{
  border: none !important;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  margin-bottom: 0 !important;
}

.gform_wrapper li.gfield.gfield_error{
  border: none !important;
  background: none !important;
}

.gform_wrapper li.gfield_error input[type="text"], 
.gform_wrapper li.gfield_error textarea{
  border: 1px solid #790000 !important;
}

.gform_wrapper li.gfield_error .gform_fileupload_multifile .gform_drop_area{
  border: 1px dashed #790000 !important;
}

.gform_wrapper .field_description_below .gfield_description{
  padding-top: 5px !important;
}

.gform_wrapper.gform_validation_error .top_label li.gfield.gfield_error{
  margin-top: 0 !important;
}

.gform_wrapper .gform_fileupload_multifile .gform_drop_area{
  margin-bottom: 0 !important;
}

.gform_wrapper .top_label .gfield_label{
  color: #0080bb !important;
  font-size: 0.778em !important;
  margin-bottom: 5px !important;
}

.gform_wrapper .top_label li {
  margin-top: 0 !important;
  line-height: 1 !important;
}


.gform_wrapper .top_label div.ginput_container {
  margin-top: 2px !important;
  margin-bottom: 7px !important;
}

.gform_wrapper .gfield_required {
  display: none;
}

.gform_confirmation_wrapper {
  margin: 30px 0;
  text-align: center;
  padding: 20px 0;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.gfield input[type="text"],
.gfield select,
.gfield textarea{
  border: 1px solid #9099a2;
  border-radius: 5px;
  height: 40px !important;
  font-size: 14px !important;
  padding: 10px !important;
}

.gfield input[type="file"]{
  font-size: 14px !important;
}
.gfield textarea{
  height: 120px !important;
}

#gform_2 ul.gform_fields li.gfield {
  padding-right: 0 !important;
}

@media (max-width: 1400px) {
  .gform_wrapper .top_label .gfield_label {
    font-size: 1em !important;
  }
}

/*****************************/
/*    Extra Custom Class     */
/*****************************/
.d-table-v{
  display: table;
  height: 100%;
  width: 100%;
}

.d-table-cell-v{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.no-results.not-found{
  margin: 20px 0
}

.social-sharing ul {
  display: inline-block;
}
.social-sharing ul li{
  display: inline-block;
  margin: 0 5px;
}

.btn {
  display: inline;
}

.btn a,
a.btn,
.gform_footer input[type=submit] {
  width: 170px !important;
  height: 50px;
  margin: 0 auto;
  background: #56b2d3;
  color: #FFF;
  display: block;
  font-weight: 700;
  border-radius: 30px;
  line-height: 3.5;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  cursor: pointer !important;
  font-size: 14px !important;
  text-transform: uppercase;
  border: 0;
}

.btn.btn-white a {
  background: #FFF;
  color: #56b2d3;
}

a.btn,
.gform_footer input[type=submit] {
  line-height: 2.5;
}

.btn a:hover,
a.btn:hover,
.gform_footer input[type=submit]:hover {
  /* opacity: 0.9 !important; */
  background: #014969;
  color: #FFF;
}

.max-900{
  max-width: 900px;
  padding: 0 30px;
  margin: 0 auto !important;
}
.max-760 {
  max-width: 760px;
  padding-right: 110px;
  padding-left: 30px;
}
.max-275{
  max-width: 275px;
}
.max-80{
  max-width: 80px;
}

.fix-bg {
  background-attachment: fixed;
  background-position: center center;
  min-height: 525px;
  padding: 0 30px !important;
}

.t-shadow {
  text-shadow: 1px 1px 15px rgba(0,0,0,0.7);
}

.--fs-14{
  font-size: 0.778em !important;
}
.--fc-primary{
  color: #0080bb;
}
.--border-left {
  border-left: 2px solid #82bc00;
  padding-left: 10px;
}
.--ln-1-4{
  line-height: 1.4;
}

.post-password-form {
  padding: 50px 15px;
  text-align: center;
}

@media (max-width: 1400px){
  .fix-bg {
    min-height: 400px;
  }
  .--fs-14 {
    font-size: 1em !important;
  }
}

@media (max-width: 767px){
  .social-sharing {
    text-align: left !important;
    margin-top: 10px;
  }
  .fix-bg {
    min-height: 300px;
    background-attachment: scroll;
  }
  .max-760 {
    max-width: 100%;
    padding: 0 30px;
  }
  .max-275{ 
    max-width: 100%;
  }
  
}

@media (max-width: 414px){
  .fix-bg {
    min-height: 200px;
  }
}
/*****************************/
/*        Custom Page        */
/*****************************/

/*** Home Page ***/
/* .home-banner,
.home-slide{
  
} */
/* .home-slide{
  background-size: cover;
  background-repeat: no-repeat center center;
} */

.slide-container{
  width: 100%;
  height: 100vh;
  position: relative;
}
.home-slide{
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60% top;
}
.slide-container.slick-active .home-slide{
  transform: scale(1.3);
  animation: animate-slick 10s 1 ease-in-out
}

.slide-content {
  position: absolute;
  max-width: 1270px;
  width: 100%;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%); 
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 15px;
}

.slide-content div{
  opacity: 0;
}

.slide-content * {
  color: #FFF;
  text-shadow: 1px 1px 15px rgba(0,0,0,0.7);
}
.slide-content p {
  font-size: 1.1em;
}
.slide-content h2 {
  font-weight: 700;
  font-size: 3.5em;
  text-transform: uppercase;
  margin-bottom: 0 !important;
}

.about-us-listing .btn {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
}

.about-us-listing h3 {
  margin-bottom: 30px !important;
}

@media (max-width: 1400px) {
  .slide-content {
    max-width: 1100px;
  }
  .slide-content h2 {
    font-size: 3em;
  }
}

@media (max-width: 767px){
  .slide-container{
    height: 400px; 
  }
  .slide-content h2 {
    padding-top: 68px;
  }
}
@media (max-width: 414px){
  .slide-container{
    height: 300px; 
  }
  .slide-content h2 {
    font-size: 2em;
  }
  .slide-content p{
    font-size: 1em;
  }
}

@keyframes animate-slick{
  from {
    transform: scale(1) translate(0px)
  }
  to {
    transform: scale(1.3) translate(0px)
  }
}

/*** About Page ***/
.mission-values .content {
  padding: 0 10px;
}
.mission-values .content * {
  font-size: 0.875em;
}
.team-listing .row {
  border-bottom: 1px solid #82bc00;
  padding: 50px 0;
}

.team-listing .row:last-child {
  border: none;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* .team-listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center
}

.team-listing div {
  width: 49%;
  padding: 0 2%; 
  display: inline-block;
  display: flex;
  flex-direction: column;
} */

/*** What We Do Page ***/
.what-we-do .icon {
  max-width: 80px;
}

/*** Contact Page ***/
.contact-socialmediaicons li {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}
.contact-socialmediaicons li i{ 
  color: #82bc00
}

/*** News and Resources ***/
#voting-form {
  max-width: 500px;
  width: 100%;
}
#voting-form p.msg{
  font-size: 0.778em !important;
  font-weight: 700;
}

#gform_wrapper_2 {
  margin: 0 !important;
}

#gform_wrapper_2 .validation_error,
#gform_confirmation_wrapper_2 .gform_confirmation_message{
  font-size: 0.778em !important; 
}
#gform_wrapper_2 .validation_message{
  font-size: 0.6em !important; 
}

#gform_wrapper_2 li.gfield.gfield_error {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
#gform_wrapper_2 .gform_footer {
  padding: 10px 0 !important;
}

#gform_wrapper_2 .field_description_below .gfield_description {
  padding-top: 0 !important;
}


/*** Porject Showcase ***/
.visual-wrapper > .vc_row.project-container,
.page-id-16 .vc_column_container>.vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.project-showcase-map {
  position: relative;
}

.project-showcase-nav {
  margin: 0 0 50px !important;
}

.project-showcase-nav li{
  position: relative;
  display: inline-block;
  list-style: none;
  font-size: 0.778em;
  font-weight: 700;
  margin: 0 20px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.project-showcase-nav li.active,
.project-showcase-nav li:hover{
  text-decoration: underline;
}
.project-showcase-nav li.ds:before,
.project-showcase-nav li.mi:before{
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 26px;
  background: url('img/pin-red.png') no-repeat;
  left: -25px;
  background-size: contain;
}
.project-showcase-nav li.mi:before{
  background: url('img/pin-yellow.png') no-repeat;
}
.map-container {
  display: none;
}
.map-container#all{
  display: block;
}
#overlay {
  position: absolute;
  border: none !important;
  color: #9099a2;
  width: 315px;
  font-size: 14px;
  text-align: left;
  z-index: 99;
}
#overlay h4{
  font-size: 20px;
  color: #FFF;
  background: #e7121c;
  border-radius: 0 30px 30px 0;
  padding: 10px 20px;
  font-weight: 599;
  margin: 0;
  position: relative;
  box-shadow: 0px 4px 7px rgba(0,0,0,0.3);
}

#overlay h4.yellow{
  background: #e7c12e;
}

#overlay h4:after{
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid #b60f16;
  transform: rotate(45deg);
  bottom: -18px;
  left: 1px;
}

#overlay h4.yellow:after{
  border-bottom: 21px solid #d1ab28;
}

#overlay .content {
  margin: 0 29px;
  padding: 10px;
  background: #f7f7f7;
  font-size: 0.889em;
  line-height: 1.3;
}

#overlay .close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: 700;
  cursor: pointer;
}
          
@media (max-width: 1400px) {
  .project-showcase-nav li{
    font-size: 1em;
  }
}
@media (max-width: 768px) {
  #overlay h4{
    font-size: 13px;
    padding: 7px 10px;
  }
  #overlay {
    font-size: 10px;
    width: 200px;
  }
  #overlay .content {
    margin: 0 15px;
  }
  #overlay h4:after{
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #b60f16;
    transform: rotate(45deg);
    bottom: -8px
  }
  #overlay h4.yellow:after{
    border-bottom: 10px solid #d1ab28;
  }
  .project-showcase-nav li.ds:before,
  .project-showcase-nav li.mi:before{
    width: 13px;
    height: 15px;
    left: -17px;
    background-size: contain;
  }
  .mission-values .content {
    padding: 0 15px;
  }
}

@media (max-width: 450px) {
  #overlay h4:after{
    bottom: -8px;
    left: 0;
  }
  #overlay .content {
    margin: 0 13px;
  }
}

/*****************************/
/*        Animation         */
/*****************************/
@keyframes stickySlideDown {
  0% {
      opacity: 0.7;
      transform: translateY(-100%);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}