@import url("https://use.typekit.net/dao3pol.css");



body {

  font-family: refrigerator-deluxe, sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 1.9rem;

}



/*typography*/

h1 {

  display: block;    /*text-align: center;*/

  font-size: clamp(2.2rem, 4vw, 4vw);

  margin: 40px auto;

  font-weight: 600;

}



p {

  margin-bottom: 30px;

}



header .contain-header {

  display: flex;

  background-image: url(../images/header-bkgd.gif);

  height: 10.5vw;

  background-position: right;

  background-size: cover;

  align-items: center;

  background-color: #003951;

}



header .contain-header .contain-logo {

  flex-basis: 80%;

  padding-left: 50px;

  color: #Fff;

  font-size: 4rem;

   font-weight: 700;

}



header .contain-header .contain-contact-info {

  flex-basis: 20%;

  text-align: right;

  padding: 40px;

  font-size: clamp(1.3vw, 1.9vw, 1.9vw);

}



phone {

   font-weight: 800;

}



.section-name {

  position: absolute;

  background-color: #003951;

  width: 400px;

  padding: 10px 20px;

  color: #fff;

  font-size: 2.8rem;

  top: -30px;

  text-align: center;

}



.section-name::after {

  content: url(../images/triangle-01.svg);

  position: absolute;

  top: 0;

  right: -73px;

  width: 73px;

}



.contain-lead-in {

  display: flex;

  align-items: center;

  padding: 0 0 0 3vw;

  margin-bottom: 40px;

  margin-top: -9px;

}



.contain-lead-in .lead-in {

  flex-basis: 82%;

}



.contain-lead-in .lead-in p {

  width: 80%;

}



.contain-lead-in .callout {

  position: relative;

  flex-basis: 18%;

  background-color: #586a37;

  align-self: flex-start;

  height: 273px;

  color: #fff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 2.5rem;

}



.contain-lead-in .callout::before {

  content: url(../images/triangle-01.svg);

  position: absolute;

  top: 0;

  left: -273px;

  width: 274px;

  transform: scaleX(-1);

}



.contain-lead-in .callout span {

  font-size: clamp(1.3rem, 3.4vw, 3.2rem);

}



.product {

  position: relative;

  margin-bottom: 110px;

}



.product p {

  padding: 0 10vw;

}



.contain-price {

  display: flex;

  align-items: center;

  justify-items: center;

  width: 50%;

  margin: 0 auto;

}



.price-point {

  display: inline-flex;

  align-items: center;

  justify-items: center;

  padding: 20px;

  flex-basis: 50%;

}



.price {

  padding: 10px 20px;

  background-color: #386477;

  color: #fff;

  margin-right: 14px;

}



/*form styles*/

aside.fw-form {

  width: 380px;

  background-color: #0e2d52;

  color: #fff;

}



aside.header-form form fieldset, aside.fw-form form fieldset {

  border: none;

  padding-bottom: 31px;

}



aside.header-form form fieldset {

  padding: 0.35em 0.75em 0;

}



aside.header-form form fieldset input, aside.fw-form form fieldset input {

  width: 100%;

  height: 45px;

  margin-bottom: 20px;

  color: #6a6a6a;

  padding-left: 10px;

}



aside.header-form form fieldset button, aside.fw-form form fieldset button {

  background-color: #faa51e;

  width: 340px;

  padding: 12px;

  font-weight: 600;

  cursor: pointer;

  font-size: 2.2rem;

  text-align: center;

  margin: 20px auto 0;

  display: block;

  color: #000;

   font-weight: 800;

}



aside.header-form form div.form-header, aside.fw-form form div.form-header {

  background-color: #08082f;

  padding: 40px;

  font-family: filosofia, serif;

  font-size: 1.65em;

  text-align: center;

}



aside.header-form form div.contain-form, aside.fw-form form div.contain-form {

  padding: 80px 20px 0;

}



aside.header-form form div.contain-form span, aside.fw-form form div.contain-form span {

  display: block;

  width: 100%;

  text-align: center;

  padding-bottom: 20px;

  font-family: filosofia, serif;

  font-size: 24px;

}



body.inner.contact aside.fw-form {

  position: initial;

  width: 100%;

  background-color: #0e2d52;

  color: #fff;

}



body.inner aside.fw-form.header {

  position: absolute;

  width: 90%;

  top: 40px;

  left: 50%;

  transform: translateX(-50%);  /*background: none;*/

}



body.inner aside.fw-form.header div.form-header {

  background: none;

}



aside.fw-form, body.inner .main aside.fw-form {

  position: initial;

  width: 100%;

}



aside.fw-form form fieldset input, body.inner .main aside.fw-form form fieldset input {

  width: 90%;

}



aside.fw-form form fieldset div.row, body.inner .main aside.fw-form form fieldset div.row {

  display: grid;

  grid-template-columns: 30% 30%;

  justify-content: center;

}



/********************************************

 * 

 *  Template Styles

 * 

 * ******************************************/



/*body.template*/

aside.fw-form.header form fieldset div.row {

  grid-template-columns: 1fr 1fr;

  gap: 1em;

}



/*body.template*/

aside.fw-form.header {

  background: rgba(14, 45, 82, 0.5);

}



/*body.template*/

aside.fw-form.header form fieldset input {

  width: 100%;

}



/*body.template*/

aside.header form fieldset input {

  margin: 0;

}



/*body.template*/

aside.fw-form.header form button {

  margin-top: 0;

  border: 0;

}



/*body.template*/

aside.fw-form.header form fieldset div.row div label {

  padding: 0;

}



/*body.template*/

.inner.short-header header section.header-image img.hero-image {

  height: 420px;

}



/*body.template*/

aside.fw-form.header form div.contain-form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2vw;

  padding: 2rem 0 0 0;

}



/*body.template*/

aside.fw-form.header form div.contain-form .header {

  font-size: 1.7rem;

}



/*body.template*/

aside.fw-form.header form div.contain-form .content {

  font-size: 1.2rem;

  width: 80%;

  display: block;

  margin: 0 auto;

}



/*body.template*/

aside.fw-form.header form fieldset div.row div.form-button {

  width: 100%;

}



/*body.template*/

aside.header form fieldset {

  padding: 0px 2rem 0 2rem;

}



/*body.inner.short-header.template*/

aside.fw-form form div.form-header {



  /* padding: 0.6em 0 0 0;*/

}



/***************************************************/

aside.fw-form form fieldset input, body.inner .main aside.fw-form form fieldset input {

  width: 90%;

  background-color: #fff;

}



aside.fw-form form fieldset div.row div label, body.inner .main aside.fw-form form fieldset div.row div label {

  padding: 0 5%;

}



aside.fw-form form fieldset div.row div.form-button, body.inner .main aside.fw-form form fieldset div.row div.form-button {

  grid-column-start: 2;

  width: 90%;

  justify-self: center;

}



aside.fw-form form div.form-header, body.inner .main aside.fw-form form div.form-header {

  text-align: center;

  font-size: 2.65em;

}



aside.fw-form form button, body.inner .main aside.fw-form form button {

  margin-top: 16px;

}



body.listing .listing-image {

  width: 85%;

  margin: 0 auto;

  display: block;

}



body.listing div.three-across {

  display: grid;

  grid-template-columns: 25% 25% 25%;

  justify-content: center;

  grid-gap: 4.9%;

  margin: 2rem 0 6rem;

}



footer {

  height: 50px;

  font-size: 1.2rem;

  text-align: center;

  margin-top: 20px;

}



@media screen and (max-width:890px) {

  header .contain-header, .contain-lead-in, .contain-price, aside.fw-form form fieldset div.row, .contain-lead-in .callout {

    display: block;

  }





  .contain-lead-in {

    padding: 0;

  }



  header .contain-header {

    background-image: none;

    height: initial;

  }



   header .contain-header .contain-logo {

    font-size: 3.2rem;

   }



  header .contain-header .contain-logo, header .contain-header .contain-contact-info {

    padding: 0;

    text-align: center;

  }

  header .contain-header .contain-contact-info {

    font-size: 1.5rem;

    color: #fff;

  }



  .contain-price, h1, .contain-lead-in .callout {

    width: 100%;

    text-align: center;

  }



  .section-name, .contain-lead-in .callout, .contain-lead-in .lead-in p {

    width: 100%;

  }



  .section-name::after {

    content: none;

  }



  .contain-lead-in .callout::before {

    content: none;

  }



.contain-lead-in .callout {

  height: auto;

  padding: 20px  0;

}



.contain-lead-in .callout span{

  font-size: 2.6rem;

}





  p {

    font-size: 1.5rem;

    padding-left: 30px;

    padding-right: 30px;

  }



}