/* some style */

html {
    font-family: 'Ariel', sans-serif;
    font-weight: 400;
    font-size: 0.3820cm;
    line-height: 140%;
}

body{

}
ul{
  padding: 0;
  margin: 0;
}

#main-layer{
  background: linear-gradient(135deg, rgba(50, 93, 50, 1), rgba(96, 147, 88, 1), rgba(120, 179, 151, 1), rgba(182, 213, 137, 1), rgba(177, 186, 67, 1), rgba(221, 231, 194, 1), rgba(250, 246, 159,1), rgba(120, 179, 151,1) );

}

#header-area{
  background-image: url("/img/spring-narrow.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
}

.homepage-header-size{
    height: 331.8px;
}
.homepage-content-area-size{
    min-height: calc(100vh - 331.8px);
}
.contentpage-header-size{
  height: 214px;
}
.contentpage-content-area-size{
    min-height: calc(100vh - 214px);
}

.content-column{
  flex-basis: 300px;
  flex-grow: 1;
}

#content-area{
  background-image: linear-gradient(0deg, rgba(243, 250, 241, .56), rgba(243, 250, 241, .56)), url("/img/spring-frosted-85.png");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;

  box-shadow: inset 0px 1px 3px white;
  border-radius: 2px;
}

.header-vertical-spacer{
  height: 5cm;
}

.content-width-constraint{
  max-width: calc(18cm + 20%);
  width: 100%;
}

.windborne-gradient-divider{
  /* Can move the gradient out, if we end up needing it someqhere else.*/
  background: linear-gradient(45deg, rgba(50, 93, 50, 0), rgba(50, 93, 50, 1), rgba(96, 147, 88, 1), rgba(120, 179, 151, 1), rgba(182, 213, 137, 1), rgba(177, 186, 67, 1), rgba(221, 231, 194, 1), rgba(250, 246, 159,1), rgba(120, 179, 151,1), rgba(120, 179, 151,0) );
  height: 2px;

  opacity: .4;
}

.windborne-vertical-gradient{
  background: linear-gradient(180deg, rgba(50, 93, 50, 0), rgba(50, 93, 50, 1), rgba(96, 147, 88, 1), rgba(120, 179, 151, 1), rgba(182, 213, 137, 1), rgba(177, 186, 67, 1), rgba(221, 231, 194, 1), rgba(250, 246, 159,1), rgba(120, 179, 151,1), rgba(120, 179, 151,0) );
  width: 2px;

  opacity: .4;
}

#spring-image {
    background-image: url("/img/spring.jpg");
    background-size: cover, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
    min-height: 12cm;
}

#windborn-logo {
    max-width: 11.25239cm;
    /* background-image: url("/img/Dandelion.svg"); */
    background-image: url("/img/optimized windborne logo.svg");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat, no-repeat;
}
.logo-container{
  height: 5.65cm;
  margin-bottom: -2.3cm;
}

.legibility-background-helper{
  background-image: linear-gradient(0deg,rgba(255,252,221, 0), rgba(255,252,221, .2) 20%, rgba(38, 107, 52, .6) 54% , rgba(255,252,221, .6));

  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
}

@media (max-width: 600px){
  .legibility-background-helper{
    opacity: 1;
  }
}

.alternate-content-section-color{
  background-color: rgba(220, 215, 149,.24);
}

#main-page-dimming-layer{
  background-color: rgba(222,222,222,.4);
}

.smooth-corners {
    border-radius: 4px;
}

.nav-element {
    text-decoration: none;
    margin-left: 0.2cm;

    color: rgba(45, 72, 38, 1);
    font-weight: 600;

    cursor: pointer;

    font-size: 120%;
    font-weight: 700;
    flex-shrink: 0;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.nav-element.active {
    background-color: rgba(242, 237, 146, .8);
    color: #3A6132;

    text-shadow: none;
}

.nav-element.active:hover {
  background-color: rgba(242, 237, 146, 1);
}

.nav-element:hover {
  background-color: rgba(251, 249, 224, .4);
}

.nav-menu-element:hover {
  background-color: rgba(251, 249, 224, .4);
}

#nav-menu {
    width: 100%;
}

#nav-menu div, #nav-menu a {
    width: 100%;
    margin-left: 0px;
    text-align: center;
    margin-top: 0.03cm;
    display: block;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.nav-element {
    padding: 0.27cm;
}

.quote-text{
  font-weight: 600;

  font-size: calc(121.80% + 1vw);

  filter: drop-shadow(0 0 8px rgba(255,255,255,.8));
  -webkit-filter: drop-shadow(0 0 8px rgba(255,255,255,.8));

  line-height: 130%;
  width: 100%;
  max-width: calc(20em);
}

@media (min-width: 1818px){
  .quote-text{
    font-size: 35.75px !important;
  }
  /* Forgive me lord, for I have sinned. #media-queries. This is probably the least hassel-free way--for now--to build in a max font size. */
  }

@media (min-width: 1482px){
  .title-text{
    font-size: 36.35px !important;
    /* font-size: 32.4px !important; */
  }
  .paragraph-text{
    font-size: 17.3833px !important;
  }
  .sub-title-text{
    /* font-size: 20.3167px !important; */

    font-size: 24.6333px !important;
  }
  /* Forgive me lord, for I have sinned. #media-queries. This is probably the least hassel-free way--for now--to build in a max font size. */
  }

.title-text{
  /* font-size: calc(121.80% + 1vw); */
  font-size: calc(180% + .7vw);
  line-height: 130%;
}

.paragraph-text{
  font-size: calc(100% + .2vw);
  line-height: 130%;
}

.sub-title-text{
  /* font-size: calc(110% + .3vw); */
  font-size: calc(140% + .3vw);
  line-height: 130%;
}

.call-to-action-button{
  background-size: cover, cover;
  background-position: center bottom;
  background-repeat: no-repeat, no-repeat;
  min-height: 1.4cm;

  border-radius: 6px;

  box-shadow: 0 0 4px rgba(255,255,255,.2), inset  0px 1px 3px white;
  -webkit-box-shadow: 0 0 4px rgba(255,255,255,.2), inset  0px 1px 3px white;

  text-shadow: 0px 0px 2px rgba(255,255,255,.64);
  /* font-size: 120%; */
}

.call-to-action-button:hover{
  box-shadow: 0 0 6px rgba(255,255,255,.6), inset  0px 1px 3px white;
  -webkit-box-shadow: 0 0 6px rgba(255,255,255,.6), inset  0px 1px 3px white;
}

.call-to-action-button-container{
  flex-basis: 190px;
}

.action-picture-1{
    background-image: linear-gradient(0deg, rgba(242, 237, 146, .4), rgba(242, 237, 146, .4)), url("/img/action-button-1.png");
}
.action-picture-1:hover{
    background-image: linear-gradient(0deg, rgba(252, 247, 156, .6), rgba(252, 247, 156, .6)), url("/img/action-button-1.png");
}
.action-picture-2{
    background-image: linear-gradient(0deg, rgba(242, 237, 146, .5), rgba(242, 237, 146, .5)), url("/img/action-button-2.png");
}
.action-picture-2:hover{
    background-image: linear-gradient(0deg, rgba(252, 247, 156, .66), rgba(252, 247, 156, .66)), url("/img/action-button-2.png");
}


.main-text-color{
  /* color: #3A6132; */
  color: rgba(45, 72, 38, 1);
}

.text-emphasize-color{
  color: #21823f;
}


@media (max-width: 320px){
  .re-justify-sponser-text{
    text-align: left !important;
  }
}

.main-action-button{
  background-color: #F2ED92;
  box-shadow: inset 0px 1px 3px white, 0 0 2px #515151, 1px 1px 2px rgba(38, 100, 51, 0.466), 1px 1px 2px rgba(211, 239, 217, 0.466)  ;
  font-weight: 600;
  color: #515151;
  border: 0;
  cursor: pointer;
  margin: 0;
  outline: none;
  text-decoration: none;
  display: block;
}

.glass-background-effect{
  background-image: url("/img/spring-frosted-65-white.png");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  filter:
    drop-shadow(1px 1px 2px rgba(211, 239, 217, 0.466))
    drop-shadow(1px 1px 2px rgba(38, 100, 51, 0.466))
  ;
  -webkit-filter:
    drop-shadow(1px 1px 2px rgba(211, 239, 217, 0.466))
    drop-shadow(1px 1px 2px rgba(38, 100, 51, 0.466))
  ;
  box-shadow: inset 0px 1px 3px white;
  border-radius: 2px;

  /* max-width: 820px; */
  width: 100%;
}
.link-style{
  color: #42838E;
}

.vertical-spacer-lg{
  height: 2cm;
}
.vertical-spacer-sm{
  height: 1cm;
}
.content-separator{
  background-color: #515151;
  height: 1px;
}
.dr-ballinger-picture{
  background-image: url("/img/julie_small.jpg");
  background-size: contain, contain;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;

  border-radius: 6px;

  height: 146px;
  width: 146px;

}
.dr-ballinger-picture-container{
  width: 100%;
  background-color: rgba(58, 97, 50, .06);
  border-radius: 6px;
}

.dr-ballinger-picture-container-container{
  min-height: 4cm;
  width: 6cm;
}

.heart-image{
  background-image: url("/img/heart-green.svg");
  background-size: contain, contain;
  background-position: center right, center right;
  background-repeat: no-repeat, no-repeat;

  opacity: .3;

  width: 100%;
}

.check-image{
  background-image: url("/img/check-green.svg");
  background-size: contain, contain;
  background-position: center right, center right;
  background-repeat: no-repeat, no-repeat;

  opacity: .3;

  width: 100%;
}

.wrapping-text-break-point{
  flex-basis: 8cm;
}

#about-text{
  flex-basis: 260px;
}

/* FORM STUFF */

.right-justify {
    text-align: right;
}

#contact-form input {
    display: block;
    width: 100%;
    padding: 0.1cm;
}

.form-section {
    max-width: 16cm;
}

textarea {
    width: 100%;
    rows: 10;
}

#adorner-layer{
  overflow-x: hidden;
  position: relative;
}
.small-form{
  max-width: 20cm;
}
.form-field{
  /* width: 8cm; */
}
.text-input-style{
  /* background-color: rgba(245,242,162,.48); */
  background-color: rgba(248, 249, 218, .7);
  border-width: 1px;
  /* border-color: rgba(245,242,162,.6); */
  border-color: rgba(248, 249, 218, 1);

  border-radius: 4px;

}
.field-set-overrides{
  border: none;
  padding: 0;
  margin: 0;
}
input[readonly].text-input-style{
  background-color: rgba(0,0,0,.1);
  border: none;
}
input[disabled].call-to-action-button, input[disabled].call-to-action-button:hover{
  background-image: linear-gradient(0deg, rgba(242, 237, 146, .7), rgba(242, 237, 146, .7)), url("/img/action-button-1.png");
  box-shadow: none;
  -webkit-box-shadow: none;
}

.status-full-class-visual{
  color: rgba(180, 80, 80, 1) !important;
}
.alert-text-color{
  color: rgba(180, 80, 80, 1);

  /* rgba(180, 120, 120, 1) */
}


/*===========================================================================================
    Helpers
============================================================================================*/
.full-height-width{
  height: 100%;
  width: 100%;
}

.match-parent-width{
  width: 100%;
}

.match-parent-height{
  height: 100%;
}

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

.flex-spring{
  flex-grow: 10000;
}

.adorner-overlay{
  /* position: absolute;

  left: 0;
  right: 0;
  top: 0; */

  min-height: 100vh;
}

#nav-menu-container{
  min-height: 100vh;
}

.remove-input-border{
  border: none;
}

/*===========================================================================================
    Stratis Framework Overrides
============================================================================================*/

.so-scrollable{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* For testing before changing stratis static library */
/* This fixed behavior breaks the return animation. We need to wait until that's done*/
/* In Edge, this also bumps you to the bottom of the page after the menu is closed, wtf.*/
.so-ios-disable-overflow-scrolling{
  position: fixed;
  -webkit-overflow-scrolling: auto !important;
}

/* This is a class that gets toggled with javascript in order to turn the main
page content into a background that is not part of the page flow. This allows
the overlay to be the thing to trigger the html/body scroll effect. This is so
we can scroll the html, and not the particular overlay. Which fixes a lot of
horrible cross browser performance problems. Without additional work, this will
get not save the scroll position of the user when it is applied. I.e. The page
will snap to the top. This only really works since the navbar is at the top of
the page. To fix this--if needed--apply the scroll position to this class like
top: scroll-position-in-pixels. You will then need to put them back where they
were after the overlay is closed.;
*/
.so-backgroundify-to-viewport{
  /* max-height: 100vh;
  overflow: hidden; */
  position: fixed;
  /* top: scroll-position-at-time-of-overlay; */
}
