/* Generated by less 2.5.1 */
/*
File Name: grid.css
Date: 05/28/19
Programmer: Sarah Bayley
*/
/* Allow this stylesheet to refer to the code in var.less */
/*
File Name: var.less
Date: 05/28/19
Programmer: Sarah Bayley
*/
/* VARIABLES */
/* color palette */
/* font sizes */
/* font families */
/* miscellaneous, repeated values */
/* MIXINS */
.btn-basic {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
}
.btn-basic:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
.btn-basic i {
  color: rgba(255, 250, 240, 0.6);
}
.btn-red {
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
}
.btn-red:hover {
  background-color: #845f00;
}
.form-basic {
  padding: 18px;
}
.form-basic p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
.form-basic fieldset {
  padding-top: 18px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 100;
}
.form-basic fieldset input,
.form-basic fieldset textarea,
.form-basic fieldset select {
  opacity: .7;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  font-size: 0.65em;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}
.form-basic fieldset textarea {
  height: 8em;
}
.form-basic button {
  padding: calc(9px) 18px;
  text-align: center;
  background-color: #845f00;
  color: #fffaf0;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  transition: all 0.3s ease-in-out;
  background-color: #4e1507;
  font-variant-caps: all-small-caps;
  margin: 18px auto;
}
.form-basic button:hover {
  background-color: #4e1507;
  transition: all 0.3s ease-in-out;
}
.form-basic button i {
  color: rgba(255, 250, 240, 0.6);
}
.form-basic button:hover {
  background-color: #845f00;
}
.form-block {
  display: block;
  text-align: left;
  /* display labels above each fieldset */
}
.form-block fieldset {
  display: block;
  width: 100%;
  margin: auto;
}
.form-block fieldset label,
.form-block fieldset .label {
  display: block;
  margin-bottom: calc(9px);
  width: 100%;
}
.form-block fieldset input,
.form-block fieldset textarea,
.form-block fieldset select {
  display: block;
  padding: calc(9px);
  margin-left: 0;
  width: 100%;
}
.form-block fieldset select {
  /* keep month and day selectors on same line by alloting each so much space */
  display: inline-block;
}
.form-block fieldset select:nth-of-type(1) {
  width: 61%;
}
.form-block fieldset select:nth-of-type(2) {
  width: 35%;
  margin-left: 0;
}
.form-block button {
  width: 100%;
}
.centered-content {
  text-align: center;
}
.centered-content fieldset {
  text-align: left;
}
.form-flex {
  text-align: center;
}
.form-flex fieldset {
  /* display labels and inputs next to each other */
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}
.form-flex fieldset label,
.form-flex fieldset .label {
  padding-right: calc(9px);
  width: 30%;
}
.form-flex fieldset input,
.form-flex fieldset textarea,
.form-flex fieldset select {
  padding: calc(9px);
  width: 70%;
}
.form-flex fieldset select {
  /* divide space leftover from label between month and day selectors */
}
.form-flex fieldset select:nth-of-type(1) {
  width: 40%;
}
.form-flex fieldset select:nth-of-type(2) {
  width: 25%;
  margin-left: 4%;
}
.form-flex button {
  width: 50%;
}
/* Adapted from: http://www.responsivegridsystem.com (media queries changed to mobile first) */
/*  grouping  */
section {
  clear: both;
  padding: 0px;
  margin: 0px;
}
section:before,
.group:after {
  content: "";
  display: table;
}
section:after {
  clear: both;
}
.group {
  display: flex;
  flex-wrap: wrap;
}
/*  column basic setup  */
.col {
  display: block;
  /* make all columns gravitate to the left */
  float: left;
  /* add space under each column div */
  margin: 18px 0;
  flex: 0 0 100%;
}
/* make footer display uls in a column */
footer {
  /* both ul groups get to have two columns of items */
}
footer .col ul {
  width: 100%;
}
footer .col ul li {
  float: left;
}
footer .span_1_of_3 ul li {
  width: 50%;
}
footer .span_2_of_3 ul li {
  width: 50%;
}
/* TABLET (LANDSCAPE) CSS CODE AND UP */
@media only screen and (min-width: 769px) {
  .group {
    margin: 0 calc(-9px);
  }
  /*  fill half of wrapper width; fit 2 columns side by side  */
  .span_1_of_2 {
    flex: 0 0 50%;
  }
  .span_1_of_1,
  .span_1_of_2,
  .span_1_of_3,
  .span_2_of_3 {
    padding: 0 calc(9px);
  }
  footer .span_1_of_3,
  footer .span_2_of_3 {
    flex: 0 0 50%;
  }
}
/* DSKTOP CSS CODE AND UP */
@media only screen and (min-width: 1025px) {
  /* fill third of wrapper width; fit 3 columns side by side */
  .span_1_of_3 {
    flex: 0 0 33.33%;
  }
  .span_2_of_3 {
    flex: 0 0 66.67%;
  }
  footer .span_1_of_3 {
    flex: 33.33%;
  }
  footer .span_2_of_3 {
    flex: 66.67%;
  }
  footer .span_2_of_3 ul li {
    width: 25%;
  }
}