/*  
Theme Name: PBR Hawaii
Theme URI: http://pbrhawaii.com
Year: 2019
*/

/* General Styles */
body {
  color: #20492f;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 16px;
  padding-top: 104px;
}

a {
  color: #000;
  text-decoration: underline;
}

a:hover {
  color: #20492f;
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.box > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

.photo {
  max-height: 700px;
}

.photo img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.green-bg {
  background: #1a3f24 url(images/green-bg.gif);
  color: #fff;
}

.btn {
  text-transform: uppercase;
  color: #20492f;
  text-decoration: none;
  padding: 15px 55px;
  border: 2px solid #20492f;
  border-radius: 0;
  font-weight: bold;
}

.btn:hover,
.btn:focus {
  color: #000;
  background: rgb(21, 51, 29);
  background: rgba(21, 51, 29, 0.3);
}

.btn-contact {
  background-color: #20492f;
}

.btn-contact:hover,
.btn-contact:focus {
  background-color: #2e6a44;
}

.green-bg .btn,
footer .btn {
  color: #fff;
  border-color: #fff;
}

.green-bg .btn:hover,
.green-bg .btn:focus,
footer .btn:hover,
footer .btn:focus {
  color: #eee;
}

.btn.sml {
  font-size: 0.875em; /* 14px */
  line-height: 1.714em; /* 24px */
}

.mt {
  margin-top: 4rem;
}

.mb {
  margin-bottom: 4rem;
}

.p {
  padding: 4rem;
}

hr {
  border: 0;
  background: #fff;
  width: 60px;
  height: 3px;
}

hr.green {
  background: #20492f;
}

/* Header */
.masthead {
  background: #fff;
}

.masthead .logo {
  width: 180px;
  height: auto;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav ul li {
  display: inline-block;
  margin: 40px 15px;
  text-transform: uppercase;
}

.nav a {
  font-weight: bold;
  color: #20492f;
  text-decoration: none;
}

.nav a:hover,
.nav a:focus,
.nav .current-menu-item a {
  color: #000;
  text-decoration: none;
}

#slide-user-menu {
  width: 350px;
  height: 100%;
  position: fixed;
  top: 0;
  background: #f0f0f0 url(images/bg_white.jpg);
  padding: 70px 25px 25px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  z-index: -1;
}

#slide-user-menu li {
  display: block;
}

#slide-user-menu.hidden {
  position: fixed;
  right: -1000px;
  top: 0;
}

#slide-user-menu .nav {
  display: block;
}

#slide-user-menu .nav > li {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
}

#slide-user-menu .nav > li > a {
  position: relative;
  display: block;
  padding: 10px;
}

#slide-user-menu .toggle-custom {
  position: absolute !important;
  top: 0;
  right: 0;
}

#slide-user-menu .collapse {
  display: none;
  visibility: hidden;
}

#slide-user-menu .collapse.show {
  display: block;
  visibility: visible;
}

#slide-user-menu .nav .nav {
  background: #ddd;
}

#slide-user-menu .nav .nav > li > a {
  padding-left: 20px;
}

#slide-user-menu .toggle-custom > .fas {
  -webkit-transition: 0.3s transform ease-in-out;
  -moz-transition: 0.3s transform ease-in-out;
  transition: 0.3s transform ease-in-out;
}

#slide-user-menu .toggle-custom.collapsed > .fas {
  transform: rotate(180deg);
}

.user-slide {
  display: none;
  font-size: 1.25em; /* 20px */
  text-transform: uppercase;
}

.menu-close {
  text-transform: none;
  color: #383838;
  padding: 10px;
  font-size: 1em;
}

/* Content */
.home {
  padding-top: 0;
}

.full-video {
  height: 100vh;
  position: relative;
  color: #fff;
  background-size: cover;
  overflow: hidden;
}

.full-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-video .video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

.full-bg {
  position: relative;
  color: #fff;
  height: 60vh;
  overflow: hidden;
}

.full-bg .bg,
.full-bg-project .bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-bg-project {
  height: 100vh;
}

.full-bg .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 650px;
}

.full-bg .heading {
  font-size: 1.875em; /* 30px */
}

.full-bg.sustain .container {
  max-width: 70%;
}

.project-box {
  width: 100%;
  height: 145px;
  margin-bottom: 1rem;
  background: #c9d6cf;
}

.team .project-box {
  height: 400px;
}

.project-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: 0.3s opacity ease-in-out;
  -moz-transition: 0.3s opacity ease-in-out;
  transition: 0.3s opacity ease-in-out;
}

.team .project-box img {
  object-position: top;
}

.project:hover img {
  opacity: 0.75;
}

.project h6 {
  font-size: 0.75em; /* 12px */
  letter-spacing: 0;
  text-decoration: none;
  margin-bottom: 0;
}

.project.team h6 {
  font-size: 1em;
}

/* Side Navigation */
.nav-tabs,
.nav-tabs .nav-link,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border: none;
}

.nav-link {
  padding: 0 2rem 0 0;
}

.nav-tabs {
  font-size: 1.75em; /* 28px */
}

.nav-tabs .nav-link.active {
  color: #20492f;
}

.nav-tabs .nav-link {
  color: #658b77;
}

.subtitle {
  text-transform: uppercase;
  font-size: 0.656em; /* 10.5px */
}

#work-nav-content {
  text-transform: uppercase;
}

#work-nav-list .list {
  font-size: 14px;
  padding-left: 2rem;
}

#work-nav-list .list p {
  margin: 8px 0;
}

#work-nav-content a,
.project a,
#award-list a {
  color: #20492f;
  text-decoration: none;
  font-weight: bold;
}

#work-nav-content a:hover,
#work-nav-content a:focus,
.project a:hover,
.project a:focus,
#award-list a:hover,
#award-list a:focus {
  color: #000;
}

#work-nav-list a[aria-expanded='true']:after,
#award-list a[aria-expanded='true'] h3:after {
  content: url(images/arrow.gif);
  width: 15px;
  height: 14px;
  padding-left: 10px;
}

#community-outreach:after,
#cultural-sustainability-planning:after,
#economic-and-fiscal-studies:after,
#graphic-design:after {
  display: none;
}

#award-list p {
  margin-bottom: 2rem;
}

.filter-btn {
  background: #c9e9c1;
  padding: 10px;
  text-decoration: none;
}

.filter-btn:hover {
  background: #a5cf99;
  text-decoration: none;
}

/* @media (min-width: 992px) {
    .row-height {
        height: calc(100vh - 184px);
    }
    
    .project-scroll {
        height: 100%;
        overflow-y: scroll;
    }
} */

.team-profile .heading,
.project .heading {
  font-size: 1.5em; /* 24px */
}

.team-profile p {
  margin-bottom: 2rem;
}

.team-profile ul {
  padding-left: 20px;
}

/* Image carousels */
.carousel-item {
  text-align: center;
  background: #eee;
}

.carousel img {
  width: auto;
  max-height: 700px;
}

.carousel .carousel-control-next-icon,
.carousel .carousel-control-prev-icon {
  width: 50px;
  height: 50px;
}

.carousel .carousel-indicators li {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
}

.map-responsive .map {
  width: 100%;
  height: 100%;
}

/* Contact Form 7 Style Overrides */
div.wpcf7-response-output {
	margin: 15px 0 0 0;
	color: #721c24;
	background: #f8d7da;
	border-color: #f5c6cb !important;
}

div.wpcf7-mail-sent-ok {
	color: #155724;
	background: #d4edda;
	border-color: #c3e6cb !important;
}

/* Footer */
footer {
  background: #2c533a url(images/kapa-bg.gif);
  color: #fff;
  font-size: 0.75em; /* 12px */
}

footer a {
  color: #fff;
}

footer .fab {
  font-size: 1.5em;
  vertical-align: middle;
}

/* Responsive Media Queries */
/* The following breakpoints adhere to Bootstrap's framework. Refrain from adding custom breakpoints unless absolutely necessary. */
@media (min-width: 576px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1024px) {
  .masthead .logo {
    width: 250px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
  .masthead .logo {
    width: 300px;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 80px;
  }

  .masthead img {
    width: 150px;
    height: auto;
  }

  #desktop-nav {
    display: none !important;
  }

  .user-slide {
    display: block;
  }

  .btn.sml {
    font-size: 1em;
    line-height: normal;
  }

  .ipad {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .project-box,
  .team .project-box {
    height: 245px;
  }

  .project h6 {
    font-size: 1em;
  }

  .nav-link {
    padding: 0 1rem;
  }

  .nav-tabs .nav-item {
    margin-left: auto;
    margin-right: auto;
  }

  .full-bg.sustain .container {
    max-width: none;
  }

  .team-profile.mt {
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  #slide-user-menu {
    width: 100%;
  }

  .user-slide {
    font-size: 1em;
  }

  .box > * {
    max-width: none;
    width: 90%;
  }

  .heading {
    font-size: 1.5em; /* 24px */
  }

  .p {
    padding: 3rem 0;
  }

  .full-bg .container {
    max-width: none;
    padding: 3rem 1rem;
    width: 100% !important;
  }

  footer.p {
    padding: 15px;
  }

  .map-responsive {
    max-width: 100%;
    position: static;
    overflow: auto;
  }

  .map-responsive iframe {
    object-fit: none;
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 0;
  }
}

@media (max-width: 360px) {
  .heading {
    font-size: 1.125em; /* 18px */
  }

  .p {
    padding: 2rem 0;
  }
}

.hide {
  display: none !important;
}

@media print {
    #desktop-nav, .full-bg .bg, .full-bg-project .bg, .single .box.photo {
        display: none;
    }
    
    .masthead .logo {
        float: none !important;
        margin: auto;
        display: block;
    }
    
    .full-video, .full-bg, .full-bg-project {
        height: auto;
    }
    
    .full-bg .container {
        position: static;
        transform: none;
        max-width: none;
    }

    .green-bg, .full-bg, footer {
        color: #20492f;
    }
    
    .green-bg .p {
        padding: 0;
    }
    
    footer {
        background: none;
        padding: 0;
    }
    
    .page .box {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .page .box > * {
        max-width: none;
    }
    
    .team-profile img {
        width: 30% !important;
        height: auto !important;
    }
}