/*
  Theme Name: 3C Construction
  Theme URI: http://pushcrankpress.com
  Description: PushCrankPress Default Theme
  Version: 1.0
  Author: PushCrankPress (webmaster@pushcrankpress.com)
  Author URI: http://pushcrankpress.com
  Tags: Default, HTML5, CSS3, PHP, JS

  License: MIT
  License URI: http://opensource.org/licenses/mit-license.php
*/

/* ---------------------------------- */
/* ------ Site Specific Styles ------ */
/* ---------------------------------- */

/* Fonts */

@font-face {
    font-family: 'campground';
    src: url('CampgroundFreeDemo-regular.woff2') format('woff2'),
        url('CampgroundFreeDemo-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Variables */

:root {
  --gray: rgb(240, 237, 237);
}

/* Resets */

html * {
  font-family: "proxima-nova", sans-serif;
  box-sizing: border-box;
}

a, a:hover, a:visited, a:active {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

/* Elements */

body {
  background: white;
}

main {
  background: white;
}

/* Text Classes */

html * {
  font-family: "Proxima Nova", sans-serif;
  color: black;
}

h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 2px;
}

h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  color: rgb(14,14,14);
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}

h4 {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  color: rgb(140, 111, 111);
  font-weight: 400;
  letter-spacing: 2px;
}

p {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: rgb(87, 78, 78);
  line-height: 1.6;
}

p:empty {
  display: none;
}

@media only screen and (max-width: 500px) {
  h2 {

  }

  h3 {

  }

  p {

  }
  p.large {

  }
}

/* Wrappers */

.site-wrapper {
  max-width: 1550px;
  margin: 0 auto;
}

.block-wrapper {
  padding: clamp(4rem, 9vw, 9rem) clamp(2rem, 9vw, 9rem) 0 clamp(2rem, 9vw, 9rem);
}

.block-wrapper--reverse {
  padding: 0 clamp(2rem, 9vw, 9rem) clamp(4rem, 9vw, 9rem) clamp(2rem, 9vw, 9rem);
}

.block-wrapper--full {
  padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 9vw, 9rem);
}

.block-wrapper--thin {
  padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 9vw, 9rem);
}

.block-wrapper--inner {
  padding: 4rem;
}

.block-wrapper--horizontal {
  padding: 0 clamp(2rem, 9vw, 9rem) 0 clamp(2rem, 9vw, 9rem);
}

.block-wrapper--vertical {
  padding: clamp(4rem, 9vw, 9rem) 0 clamp(4rem, 9vw, 9rem) 0;
}

/* Stacks */

.stack-xtra-small > * + * {
  margin-block-start: 0.5rem;
}

.stack-small > * + * {
  margin-block-start: 1rem;
}

.stack > * + * {
  margin-block-start: 2rem;
}

.stack-medium > * + * {
  margin-block-start: 3rem;
}

.stack-large > * + * {
  margin-block-start: 4rem;
}

.stack-xtra-large > * + * {
  margin-block-start: 6rem;
}

.stack-xtra-xtra-large > * + * {
  margin-block-start: 8rem;
}

/* Max Width */

.max-1440 {
  display: block;
  margin: 0 auto;
  max-width: 1440px;
}

.max-1280 {
  display: block;
  margin: 0 auto;
  max-width: 1280px;
}

.max-1080 {
  display: block;
  margin: 0 auto;
  max-width: 1080px;
}

.max-800 {
  display: block;
  margin: 0 auto;
  max-width: 800px;
}

.max-450 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 450px;
}

/* Utility Classes */

.bg-image {
  background-position: center;
  background-size: cover;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.vertical-center {
  display: flex;
  align-items: center;
}

.position-relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.self-centered {
  margin-left: auto;
  margin-right: auto;
}

.margin-fix {
  margin-block-start: 3.5rem;
}

/* Buttons */

.button {
  display: grid;
  place-items: center;
  width: 250px;
  height: 75px;
  max-width: 100%;
  color: white;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer !important;
}

.button.small {

}

/* Flexbox */

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
  row-gap: 3rem;
}

.flex-item {
  flex: 1 0 320px;
  max-width: 100%;
}

/* Colors */

.bg-green {
  background-color: green;
}

/* --------------------------------- */
/* ------ Reusable Components ------ */
/* --------------------------------- */

/* --- Header Styles --- */

#top-bar {
  display: block;
  padding-top: 6px;
  padding-bottom: 4px;
  font-size: 1rem;
  text-align: center;
  color: rgb(22,22,22);
  text-decoration: none;
  letter-spacing: 2px;
  background-color: rgb(230, 230, 230);
  transition: background-color 1s ease;
}

#top-bar:hover {
  background-color: rgb(195, 193, 193);
  transition: background-color 1s ease;
}

header * {
  font-family:"raleway", sans-serif;
  font-weight: 400;
}

header .nav-container {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

header .nav-container .tagline {
  font-size: 18px;
  text-align: center;
  letter-spacing: 2px;
}

header #menu-main-menu {
  display: flex;
  justify-content: center;
  column-gap: 2rem;
  row-gap: 2rem;
  margin-top: 2rem;
  padding-left: 0px;
}

header #menu-main-menu li {
  list-style: none;
}

header #menu-main-menu a {
  padding-bottom: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

header #menu-main-menu li.current_page_item a {
  border-bottom: 1px solid rgb(161, 129, 129);
}

/* Hero Styles */

#hero img {
  width: 100%;
  margin-bottom: 3rem;
}

/* Cards */

#cards-container .cards .card {
  padding: 2em;
  text-align: center;
  background-color: var(--gray);
}

#cards-container h2.cards-heading,
h2.section-heading {
  font-size: 18px;
  color: rgb(140, 111, 111);
  font-weight: 400;
}

#card-image-container {
  margin-bottom: 2rem;
}

#card-image-container .flex-wrapper {
  column-gap: 0px;
}

#card-image-container .card {
  padding: 3rem;
  text-align: center;
  background-color: var(--gray);
}

#card-image-container .image {
  min-height: 300px;
}

#team-members-container {
  padding: 3rem;
  background-color: var(--gray);
  text-align: center;
}

#team-members-container .team-member-image {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 1/1;
}

/* Flexslider */

body.home .flex-viewport {
  aspect-ratio: 18/10;
}

body.gallery .flex-viewport {
  aspect-ratio: 3/1;
}

.slide-img {
	display: block;
  height: 100%;
	background-position: center;
  background-size: cover;
}

.slides,
.slides li {
  height: 100%;
}

nav.mobile {
  display: none;
}

@media only screen and (max-width: 1000px) {
  nav.desktop {
    display: none;
  }
  nav.mobile {
    display: block;
  }
  header .nav-container {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

header .burger-icon {
  position: relative;
  width: 40px;
}

header .burger-icon:hover {
  cursor: pointer;
}

header .burger-patty {
  margin-bottom: 5px;
  width: 30px;
  height: 3px;
  background: black;
  opacity: 1;
}

header .burger-patty:last-of-type {
  margin-bottom: 0px;
}

header .burger-patty:nth-of-type(3) {
  position: absolute;
  bottom: 3px;
}

header .burger-icon.open :where(.burger-patty:first-of-type, .burger-patty:last-of-type) {
  opacity: 0;
}

header .burger-icon.open .burger-patty:nth-of-type(2) {
  transform: rotate(45deg);
}

header .burger-icon.open .burger-patty:nth-of-type(3) {
  transform: rotate(-45deg);
}

#mobile-menu-container {
  position: fixed;
  z-index: 1000000;
  top: 0;
  left: -100%;
  width: 100vw;
  height: 100vh;
  background-color: #f3f1f1;
  transition: 0.5s all ease;
}

#mobile-menu-container.open {
  left: 0;
  transition: 0.5s all ease;
}


#mobile-menu-container li {
  list-style: none;
  margin-bottom: 2rem;
}

#mobile-menu-container li a {
  font-family: "Open Sans", arial, sans-serif;
  font-size: 22px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
}

#mobile-menu-container li.current-menu-item a {
  font-weight: 700 !important;
}