/****************************************************************************
Main stylesheet for willowtree.net. 
Imports all other stylesheets. 
*****************************************************************************/
/****************************************************************************
CUSTOM.scss
Override Bootstrap styles in _variables.scss with my own values.
*****************************************************************************/
/* $theme-colors: (
  "tertiary": #E4AE25,
  "dark": #2A2E22
); */
.btn-tertiary {
  color: #fff !important;
}

/* .bg-dark {
  // background-color: #2A2E22 !important;
  background-color: #000 !important;
} */
/****************************************************************************
SASS mixins for use elsewhere in the SCSS. 
*****************************************************************************/
/*
$xsBreakpoint: 576px; // Between 0 and 576px
$smBreakpoint: 768px; // Between 576px and 768px
$mdBreakpoint: 1024px;
$lgBreakpoint: 1290px;
$xlBreakpoint: 1440px;
*/
/*_breakpoints.scss 
$breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1600px,
);
From https://dev.to/serifcolakel/breakpoints-with-sass-in-react-2k59
*/
/*************************************************
RESET
*************************************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* html {
  font-size: 16px;
} */
/**********************************************************
BASE STYLES
**********************************************************/
body {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  color: #333;
  background-color: #ffffff;
}

img {
  max-width: 100%;
}

.photoLeft {
  margin-bottom: 2rem;
  float: left;
  margin-right: 1rem;
}

.clear {
  clear: both;
}

/**********************************************************
TYPOGRAPHY
**********************************************************/
h1,
h2,
h3,
h4 {
  font-family: "Questa Grande", sans-serif;
}

h1 {
  color: #333;
  font-weight: 300;
}
@media only screen and (min-width: 0) {
  h1 {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 768px) {
  h1 {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  h1 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

h2 {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 300;
  margin-bottom: 2rem;
}
h2 .subhead {
  font-size: 0.8em;
  font-style: italic;
}

h3 {
  font-size: 1.6rem;
  font-weight: 400;
}

h4 {
  font-size: 1.4rem;
  font-weight: 400;
}

p,
ul,
ol {
  line-height: 1.5rem;
  margin-bottom: 1.25rem;
}

li {
  margin-left: 1rem;
  padding-left: 0.5rem;
}

strong {
  font-weight: 700;
}

a {
  color: #789244;
  text-decoration: none;
}
a:hover {
  color: rgb(91.4018691589, 111.2056074766, 51.7943925234);
  text-decoration: underline;
}

em {
  font-style: normal;
  /* text-decoration: $primary dotted underline; */
  font-weight: 600;
}

/*****************************************************
BUTTONS
******************************************************/
button {
  border: 0px none;
  background-color: transparent;
}

.btn {
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: baseline;
}

.btn-lg {
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
}

.btn-primary {
  background-color: #789244;
  border: 0px none;
  color: #ffffff;
  text-align: center;
}
.btn-primary:hover {
  background-color: rgb(147.3831775701, 177.1495327103, 87.8504672897);
  text-decoration: none;
  color: #ffffff;
}

.btn-secondary {
  background-color: #e4ae25;
  border: 0px none;
  color: #ffffff;
}

.btn-text {
  color: #789244;
  margin: 0px;
  padding: 0px;
  font-weight: 600;
}

/*************************************************
NAV
*************************************************/
nav {
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, white 0.01%, transparent);
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 3rem;
  align-items: center;
  padding: 0.5rem 1rem;
}
.navbar a {
  color: #333;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: "Questa Grande";
  font-weight: 300;
}
.navbar a:hover {
  color: #789244;
  text-decoration: underline;
}
.navbar .branding {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.navbar .branding a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.navbar .navbar-toggler {
  font-size: 1.25rem;
  /* @include xs-breakpoint {
    display: flex;
  } */
}
@media only screen and (min-width: 0) {
  .navbar .navbar-toggler {
    display: none;
  }
}
.navbar .navbar-toggler:hover {
  background-color: #ccc;
}

.navbar-nav {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  font-family: "";
}

/*************************************************
PORTFOLIO STYLES
*************************************************/
.bg-dark {
  background-color: #fff;
}
.bg-dark a {
  color: #333;
}

section {
  min-width: 320px;
}
@media only screen and (min-width: 0) {
  section {
    padding: 0 1.5rem 0 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  section {
    padding: 0 10% 0 10%;
  }
}

.masthead {
  background: linear-gradient(to top, white 0.05%, transparent), url("../img/hero_background_hexagons.png");
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  .masthead {
    background: linear-gradient(to top, white 0.05%, transparent), url("../img/hero_background.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.jumbotron {
  height: 70vh;
}
.jumbotron .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 0;
}
.jumbotron .lead {
  font-family: "Questa Grande";
  color: #555;
  font-size: 1.8rem;
  line-height: 2.6rem;
  padding: 1.5rem 0 2rem 0;
}

/* 
.pf-top-stripe {
  background-color: #ccc;
  // background-image: url('../img/tree_hero_bg.png');
  height: 25px;
} */
.subhead {
  color: #666;
}

/**********************************************************
HOME PAGE CASE STUDIES
**********************************************************/
.pf-project {
  margin-bottom: 5rem;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
.pf-project .pf-image,
.pf-project .pf-project-details {
  flex: 1 1 0;
}

.pf-image {
  border-radius: 6px;
}
.pf-image img {
  border-radius: 6px;
}

.pf-project-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pf-project-details h4 {
  color: #666;
}
.pf-project-details p {
  margin: 0 0 1rem 0;
}
.pf-project-details .intro {
  display: flex;
  flex-direction: column;
}

.pf-project-tools {
  min-width: 20%;
}

.pf-case-study .pf-login-form {
  border: 1px solid #ccc;
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  border-radius: 12px;
  width: 600px;
  margin: 3rem auto 0 auto;
}
.pf-case-study .pf-login-form h2 {
  margin-bottom: 0.5rem;
}
.pf-case-study .pf-login-form .form-row {
  margin-bottom: 1rem;
}
.pf-case-study .pf-login-form label {
  display: block;
}
.pf-case-study .pf-login-form input {
  border: 1px solid #ccc;
  height: 2rem;
  border-radius: 4px;
}
.pf-case-study .pf-login-form .btn-block {
  margin-top: 1.5rem;
}

/**********************************************************
TAGS
**********************************************************/
.tag-container {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  padding: 0.5rem 0 0.5rem 0;
  flex-wrap: wrap;
}

.pf-project-details .tag {
  background-color: #eee;
  color: #333;
  border: 1px solid #e8e7e7;
  border-radius: 4px;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5rem;
  margin: 0;
}

/**********************************************************
CASE STUDY PAGES
**********************************************************/
.pf-case-study section {
  padding: 0;
}
.pf-case-study .hero-img {
  margin-bottom: 2rem;
}
.pf-case-study .pf-project-content,
.pf-case-study .pf-project-summary {
  max-width: 1024px;
  min-width: 320px;
}
@media only screen and (min-width: 0) {
  .pf-case-study .pf-project-content,
  .pf-case-study .pf-project-summary {
    margin: 0 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .pf-case-study .pf-project-content,
  .pf-case-study .pf-project-summary {
    margin: 0 auto 2rem auto;
  }
}
.pf-case-study .pf-project-content h2 {
  line-height: 2.2rem;
}
.pf-case-study .pf-project-img {
  width: 100%;
  background-color: #f9f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
}
.pf-case-study .pf-project-img figure,
.pf-case-study .pf-project-img figure a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.pf-case-study .pf-project-img a {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.pf-case-study .pf-pull-quote {
  font-family: "Questa Grande";
  color: #647a39;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: space-between;
  position: relative;
  left: -10%;
  /* margin: 0 -1rem 0 auto; */
  /* @include xs-breakpoint {
    margin: 0 1.5rem;
  }

  @include xl-breakpoint {
    margin: 0 auto 2rem auto;
  } */
}
.pf-case-study .pf-pull-quote p {
  text-decoration: italic;
  font-size: 1.4rem;
  line-height: 2rem;
  min-width: 320px;
}

#playbook .hero-img {
  margin-top: 2rem;
}

.pf-project-summary {
  display: flex;
  flex-direction: row;
  max-width: 800px;
  justify-content: flex-start;
}
@media only screen and (min-width: 0) {
  .pf-project-summary {
    gap: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .pf-project-summary {
    gap: 10rem;
  }
}
.pf-project-summary h3 {
  margin-bottom: 1rem;
}
.pf-project-summary .pf-image {
  border-radius: 6px;
}

.pf-hero {
  display: flex;
  flex-direction: row;
  gap: 0;
  justify-content: center;
  align-items: center;
  background-color: #f9f8f8;
  margin-bottom: 2rem;
  /* .hero-img {
    margin-bottom: 2rem;
    width: 100%;
    text-align: center;
  } */
}

/*
.pf-project-tools {
  flex: 1 1 0;
}

.pf-project-skills {
  flex: 2 1 0;
}
  */
.pf-project-nav-links {
  margin: 2rem 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: flex-start;
  align-items: center;
}

/**********************************************************
IMAGES
**********************************************************/
.placeholder {
  background-color: #eee;
}

.pf-main .placeholder {
  width: 713px;
  height: 546px;
}

.caption {
  font-size: 0.8em;
  color: #666;
}

.figure-caption {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  color: #666;
  max-width: 1024px;
}

.carousel-caption {
  background-color: #333;
}

#carousel_sketches,
#carousel_wireframes,
#carousel_mobile {
  max-width: 800px;
}

.carousel-indicators {
  z-index: 50;
  bottom: 80px;
}

/* .carousel-thumbs img {
  border: 1px solid #ccc;
} */
a[data-toggle=tooltip] {
  text-decoration: underline dotted;
}

/*****************************************************
GALLERY
******************************************************/
.pf-slider .figure-caption,
.pf-gallery .figure-caption {
  max-width: 750px;
}
.pf-slider li,
.pf-gallery li {
  list-style-type: none;
}

.pf-gallery img {
  cursor: pointer;
}

/*****************************************************
FOOTER
******************************************************/
footer {
  background-color: #353535;
  min-height: 200px;
  color: #fff;
  padding-top: 30px;
  padding-left: 1.5rem;
  margin-top: 40px;
  /* 
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
  } */
}
footer p {
  font-size: 0.875em;
  margin-bottom: 0.5rem;
}
footer a {
  color: #fff;
  text-decoration: underline;
}
footer #contact-info span {
  margin-right: 0.5rem;
}

.pf-project-role {
  font-size: 0.9rem;
  color: #999;
}

/*****************************************************
RESPONSIVE
******************************************************/
/* @include media-breakpoint-up(xs) {

  .jumbotron .display-2 {
    font-size: 3rem;
  }

  .jumbotron .lead {
    font-size: 1.25rem;
  }

} 

@include media-breakpoint-up(sm) {

  .jumbotron .display-2 {
    font-size: 3.5rem;
  }

  .jumbotron .lead {
    font-size: 1.25rem;
  }

}

@include media-breakpoint-up(md) {

  .jumbotron .display-2 {
    font-size: 4.5rem;
  }

  .jumbotron .lead {
    font-size: 1.50rem;
  }

}

@include media-breakpoint-up(lg) {

  .jumbotron .display-2 {
    font-size: 5.5rem;
  }

  .jumbotron .lead {
    font-size: 1.75rem;
  }

}
*/

/*# sourceMappingURL=style.css.map */