/* SCSS Document */
/* MICROSOFT NONSENSE */
/* MIXINS */
/* RESET STYLES */
html, body, ul, ol, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
  list-style: none;
}

input, button, select, textarea {
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

/* VARIABLES */
/* ELEMENT STYLES */
*:focus {
  outline: none !important;
}

strong {
  font-weight: 700;
}

a, .contact {
  color: #000000;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  cursor: pointer;
}
a img, .contact img {
  border: none;
}
a:hover, .contact:hover {
  opacity: 0.5;
}

/*small { font-size: 0.5em; display: inline-block; transform: translateY(-0.75em); }*/
em {
  font-family: felt-tip-woman, sans-serif;
  font-weight: 400;
  font-style: normal;
}

body, html {
  text-align: center;
  color: #000000;
  font-family: futura-pt, sans-serif;
  font-size: 30px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  line-height: 1.25em;
  background-color: transparent;
  width: 100vw;
  overflow-x: hidden;
}

h1, h2, h3, h5 {
  font-family: shlop, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  line-height: 1em;
  display: block;
  text-wrap: balance;
  margin: 0;
}

p {
  text-wrap: balance;
}

h1 {
  font-size: 2em;
  margin: 1em 0;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 4em;
}

h4 {
  font-size: 1.33em;
  color: #9E1510;
  font-weight: 700;
}

h5 {
  font-size: 1em;
}

/* BG IMG STYLES */
#bgimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 0;
     object-position: 50% 0;
  z-index: -9999;
}

/* GENERAL STYLES */
.inner {
  width: 90vw;
  max-width: 1200px;
  margin: 2em auto;
  text-align: center;
}

/* HEADER STYLES */
header {
  position: fixed;
  top: -130px;
  z-index: 99999;
  left: 0;
  width: 100vw;
  height: 130px;
  background-image: linear-gradient(0deg, rgba(229, 229, 229, 0) 0%, rgb(229, 229, 229) 100%);
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}
header a, header .contact {
  font-family: futura-pt-condensed, sans-serif;
  font-weight: 700;
  font-style: italic;
  line-height: 130px;
  position: absolute;
  top: 0;
}
header a {
  left: 5vw;
}
header .contact {
  right: 5vw;
}
header img {
  height: 130px;
  width: 50vw;
  max-width: 650px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
}
header.down {
  top: 0;
}

/* ROUNDEL STYLES */
#roundelwrapper {
  height: 100vh;
  width: 100vw;
  position: relative;
}
#roundelwrapper #roundel {
  background-color: #9E1510;
  width: 200vw;
  height: 200vw;
  border-radius: 200vw;
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 2px 21px 20px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 2px 21px 20px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 2px 21px 20px 0px rgba(0, 0, 0, 0.25);
}
#roundelwrapper #warning {
  color: #FFFFFF;
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -60%);
  z-index: 1;
}
#roundelwrapper #warning img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}
#roundelwrapper #warning h3 {
  transform: rotate(-5deg);
}
#roundelwrapper #warning p {
  margin: 0 50px;
}
#roundelwrapper #warning #creep {
  width: 100%;
  display: block;
}
#roundelwrapper #warning #creep img {
  height: 100px;
  width: auto;
}

/* MAIN STYLES */
main {
  position: relative;
}
main #hoh-title .hide {
  display: none;
}
main #janet {
  width: 75%;
  max-width: 900px;
  height: auto;
  position: absolute;
  top: 15vw;
  right: 60%;
  z-index: 1;
}
main .inner {
  display: flex;
  flex-wrap: wrap;
}
main .inner a {
  text-decoration: underline;
}
main .inner .rightcol {
  width: 66%;
  margin-left: 34%;
  display: flex;
  flex-wrap: wrap;
}
main .inner .rightcol #stroke {
  width: 100%;
  background: url("../images/stroke.svg") no-repeat 50% 50%;
  background-size: contain;
  aspect-ratio: 2.3/1;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
}
main .inner .rightcol #stroke div {
  position: relative;
  width: 100%;
  top: -0.75em;
}
main .inner .rightcol #stroke div .item {
  position: absolute;
  top: -1em;
  left: 0;
  color: #FFFFFF;
  margin: 0 auto;
  line-height: 0.75em;
  transform: rotate(-5deg) translateY(-50%);
}
main .inner .rightcol .inline {
  height: auto;
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0.4em auto 0.25em;
}
main .inner .rightcol.third {
  width: 33%;
  margin: 0;
  justify-content: center;
  align-items: center;
}
main .inner .rightcol a {
  text-decoration: underline;
}
main .inner .leftcol {
  width: 66%;
  text-align: left;
  font-size: 0.75em;
  line-height: 1.25em;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
}
main .inner .leftcol .boldis {
  font-weight: 700;
}
main .inner .ilroudel {
  width: 60%;
  padding: 5%;
  font-size: 0.75em;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background-color: #9E1510;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.25em;
  transform: translateX(5%) rotate(5deg);
}
main .inner .ilroudel p {
  margin: 0;
}
main .inner .ilroudel span {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
}
main .inner .ilroudel strong {
  display: block;
}
main .inner .ilroudel:last-of-type {
  transform: translateX(-5%) rotate(5deg);
}
main .inner .makesmaller {
  font-size: 0.75em;
  line-height: 1.25em;
}
main .inner #gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5%;
  position: relative;
}
main .inner #gallery .polaroid {
  width: 31.33333%;
  position: relative;
}
main .inner #gallery .polaroid .images {
  width: 90%;
  aspect-ratio: 1/1;
  background-color: #000000;
  margin: 15% 5% 30%;
}
main .inner #gallery .polaroid .images .slides li {
  position: relative;
  background-color: grey;
}
main .inner #gallery .polaroid .images .slides li img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
main .inner #gallery .polaroid .images .slides li div {
  width: 100%;
  position: absolute;
  left: 0;
  top: 130%;
  font-size: 0.75em;
  line-height: 1.25em;
  text-wrap: balance;
  opacity: 0.95;
}
main .inner #gallery .polaroid .frame {
  width: 100%;
  aspect-ratio: 1/1.3;
  background-color: transparent;
  background-image: url("../images/polaroid-frame.webp");
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 9;
}
main .inner #gallery .polaroid .frame h5 {
  position: absolute;
  bottom: 1em;
  width: 100%;
  font-family: felt-tip-woman, sans-serif;
}
main .inner #gallery .polaroid .note {
  font-size: 0.75em;
  line-height: 1.25em;
}
main #fulltitle {
  color: #FFFFFF;
  font-size: 8vw;
  background-image: url("../images/title-stroke.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  position: relative;
  z-index: 1;
}
main #fulltitle span {
  background-position: 50% 50%;
  display: block;
}
main #fulltitle span:first-of-type {
  padding-top: 0.3em;
}
main #fulltitle span:nth-of-type(2) {
  transform: rotate(-2.5deg);
}
main #fulltitle span:last-of-type {
  padding-bottom: 0.75em;
  transform: rotate(-5deg);
}
main #theinfo {
  background-color: #FFFFFF;
  min-height: 100vh;
  padding: 2em 0 0;
}
main #theinfo h2 {
  font-family: futura-pt, sans-serif;
  color: #9E1510;
  width: 50%;
  font-weight: 700;
}
main #theinfo .inner {
  position: relative;
}
main #theinfo .inner .rightcol {
  text-align: left;
  font-size: 0.75em;
  line-height: 1.25em;
}
main #theinfo .inner .ilroudel {
  width: 19%;
  padding: 2%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background-color: #9E1510;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
  color: #FFFFFF;
  text-align: center;
  position: absolute;
  left: 0;
  top: 2em;
  transform: rotate(-5deg);
}
main #theinfo .inner .ilroudel p {
  margin: 0;
  width: 100%;
}
main #theinfo .inner .ilroudel p em {
  display: block;
}
main #theinfo .inner .ilroudel p span {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
}
main #theinfo .inner .ilroudel p strong {
  display: block;
}
main #theinfo .inner .triple {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5%;
  font-size: 0.75em;
  line-height: 1.25em;
  margin: 5% 0;
}
main #theinfo .inner .triple .block {
  width: 31.33333%;
  position: relative;
}
main #theinfo .inner .triple .block img {
  width: 100%;
  aspect-ratio: 6/4;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
main #theinfo .wrapper {
  background-color: #9E1510;
  color: #FFFFFF;
  width: 100%;
  padding: 2em 0;
}
main #theinfo .wrapper #refs {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 1em;
  position: relative;
  padding-bottom: 2em;
}
main #theinfo .wrapper #refs .slides {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
}
main #theinfo .wrapper #refs .slides li div {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: top;
  justify-content: space-around;
}
main #theinfo .wrapper #refs .slides li div img {
  width: 25%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 0;
     object-position: 50% 0;
}
main #theinfo .wrapper #refs .slides li div blockquote {
  width: 50%;
  margin: 0;
}
main #theinfo .wrapper #refs .slides li div blockquote q {
  text-align: left;
  display: block;
  font-size: 0.75em;
  line-height: 1.25em;
}
main #theinfo .wrapper #refs .slides li div blockquote cite {
  font-style: normal;
  text-align: right;
  color: #CF8A87;
  display: block;
}
main #theinfo .wrapper #refs .slides li div blockquote cite span {
  display: block;
  font-size: 0.5em;
}
main #theinfo .wrapper #refs .flex-control-nav {
  position: absolute;
  bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
}
main #theinfo .wrapper #refs .flex-control-nav li {
  display: inline-block;
}
main #theinfo .wrapper #refs .flex-control-nav li a {
  display: block;
  background-color: #CF8A87;
  margin: 0 10px;
  font-size: 0;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}
main #theinfo .wrapper #refs .flex-control-nav li a.flex-active {
  width: 90px;
  cursor: default;
}

/* FOOTER STYLES */
footer {
  background-color: #FFFFFF;
  padding: 1em 0 2em;
}
footer .inner .cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer .inner .cols form {
  width: 50%;
}
footer .inner .cols .col {
  width: 41.66666%;
  position: relative;
}
footer .inner .cols .col #contact {
  height: -moz-fit-content;
  height: fit-content;
  text-align: left;
  position: absolute;
  left: 0;
  bottom: 0;
}
footer .inner .cols .col #contact img {
  width: 40%;
  height: auto;
}
footer .inner .cols .col #contact p {
  margin: 0.5em 0;
  font-size: 1.33em;
  transform: translateX(-0.75em);
}
footer .inner .cols .col #contact a {
  font-weight: 700;
  display: block;
  margin: 0.25em 0;
}
footer .inner .cols .col #contact a.call {
  font-weight: 700;
  font-size: 2em;
}
footer .inner .cols .col #contact a.email {
  font-weight: 700;
}
footer .inner .cols .col #contact ul {
  font-size: 0.5em;
  margin: 1em 0 0;
}
footer .inner .cols .col #contact ul li {
  display: inline-block;
}
footer .inner .cols .col #contact ul li a {
  font-weight: 400;
  display: block;
  margin: 0;
  padding: 0 1em 0 calc(1em - 1px);
  line-height: 1.5em;
  border-right: 1px solid #000000;
}
footer .inner .cols .col #contact ul li:first-of-type a {
  padding-left: 0;
}
footer .inner .cols .col #contact ul li:last-of-type a {
  border-right: 0;
}
footer .inner .caveat {
  font-size: 0.5em;
  margin-top: 2em;
}

/* FORM STYLES -------------------- */
/*button { font-weight:700; color:#FFF; font-size:56px; text-transform:uppercase; line-height:56px; margin:20px 0; padding:0 20px 5px; border:2px solid #FFF; cursor:pointer; }
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='submit'],
select,
textarea { display:block; width:95%; color:#1A1A1A; padding:10px 2.5%; line-height:1.5em; -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:3% auto; -webkit-font-smoothing:inherit; border-radius:0; background:#B4A17B; border:none; margin:0; }
select { background:url('../images/select-bg.png') 95% 50% no-repeat #B4A17B;}
input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
select:focus,
textarea:focus { background-color:#BDAC8A; }*/
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=submit],
textarea,
.checkq {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  width: 95%;
  padding: 0.5em 2.5%;
  display: block;
  color: #000000;
  line-height: 1.5em;
  -webkit-font-smoothing: inherit;
  background: #E5E5E5;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus {
  background-color: #FFFFFF;
}

textarea {
  line-height: 1.3em;
  height: 156px;
}

.field {
  margin: 0 0 1em;
}

.field label,
.field input,
.field select {
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}

.fieldwrapper {
  display: block;
  position: relative;
  border: 1px solid #E5E5E5;
}

.fieldwrapper label {
  position: absolute;
  top: 0;
  left: 2.5%;
  opacity: 0;
  font-size: 0.5em;
}

.field.hasval label {
  opacity: 1;
}

.field.hasval input,
.field.hasval textarea {
  padding-top: 0.75em;
  padding-bottom: 0.25em;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  display: none;
}

/* For mobile, it's typically better to position checkbox on top of clickable area and turn opacity to 0 instead. */
input[type=checkbox] ~ label {
  cursor: pointer;
}

input[type=checkbox] ~ label div {
  background: brown;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-right: 0.5em;
  position: relative;
  top: 3px;
}

input[type=checkbox]:checked ~ label div {
  background: url("../images/close.png") brown no-repeat 50% 50%;
}

.checknote {
  font-size: 0.66em;
  display: none;
}

input[type=submit],
.fauxbutt {
  background-color: #9E1510;
  color: #FFFFFF;
  width: 95%;
  margin: 0 auto;
  cursor: pointer;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5em;
  padding: 0.5em 2.5%;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
}
input[type=submit]:hover,
.fauxbutt:hover {
  opacity: 0.5;
}

.note {
  width: 95%;
  margin: 0 2.5%;
  float: left;
}

.hide {
  display: none !important;
}

.g-recaptcha {
  margin: 2.5%;
  float: left;
}

span.error {
  display: inline-block;
  width: 95%;
  margin: 0 2.5%;
  font-weight: 700;
  text-align: left;
}

.warning strong, .success strong {
  font-size: 2em;
  font-family: shlop, sans-serif;
  font-weight: 400;
  font-style: normal;
  display: block;
}
.warning strong + p, .success strong + p {
  margin-top: 0;
}

.warning {
  border: 1px solid #9E1510;
  padding: 1em 0.5em;
  border-radius: 10px;
  color: #000000;
  background: #CF8A87;
  font-size: 0.8em;
}

.success {
  border: 1px solid #056E59;
  padding: 1em 0.5em;
  border-radius: 10px;
  color: #000000;
  background: #91C0B6;
  font-size: 1em;
  width: 87.5%;
  margin: 1em auto;
}

/* Tablet Styles */
@media only screen and (max-width: 1024px) {
  body, html {
    font-size: 20px;
  }
}
/* Phone Styles */
@media only screen and (max-width: 767px) {
  body, html {
    font-size: 20px;
  }
  /* HEADER STYLES */
  header img {
    height: auto;
    width: 90%;
    margin-top: 10px;
    left: 51%;
  }
  /* ROUNDEL STYLES */
  #roundelwrapper #roundel {
    width: 300vw;
    height: 300vw;
    border-radius: 300vw;
  }
  #roundelwrapper #creep {
    bottom: 4em;
  }
  /* MAIN STYLES */
  main #hoh-title {
    width: 90%;
    height: auto;
  }
  main .inner {
    display: flex;
    flex-wrap: wrap;
  }
  main .inner .rightcol {
    width: 100%;
    margin: 0 0 2em 1%;
    position: relative;
  }
  main .inner .rightcol #stroke {
    aspect-ratio: 2/1;
    font-size: 30px;
    width: 100%;
    position: relative;
    left: 0;
    background-size: cover;
  }
  main .inner .rightcol #stroke div {
    position: relative;
    width: 100%;
    top: -0.4em;
  }
  main .inner .rightcol #stroke div .item {
    font-size: 0.5em;
  }
  main .inner .rightcol.third {
    width: 98%;
  }
  main .inner .leftcol {
    width: 98%;
    margin-bottom: 2em;
  }
  main .inner .ilroudel {
    width: 40%;
    transform: rotate(-5deg);
  }
  main .inner .ilroudel:last-of-type {
    transform: rotate(5deg);
  }
  main .inner #gallery .polaroid {
    width: 98%;
    margin: 1em 1%;
  }
  main .inner #gallery .polaroid .frame h5 {
    font-size: 1.5em;
    bottom: 1em;
  }
  main #fulltitle {
    font-size: 10vw;
  }
  main #theinfo h2 {
    width: 100%;
  }
  main #theinfo h2 span {
    white-space: nowrap !important;
  }
  main #theinfo .inner {
    padding-top: 35vw;
  }
  main #theinfo .inner .rightcol {
    font-size: 1em;
  }
  main #theinfo .inner .ilroudel {
    width: 40%;
    padding: 5%;
    left: auto;
    right: 0;
    top: -15vw;
    transform: rotate(5deg);
  }
  main #theinfo .inner .ilroudel p {
    margin: 0;
    width: 100%;
  }
  main #theinfo .inner .ilroudel p em {
    display: block;
  }
  main #theinfo .inner .ilroudel p span {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
  }
  main #theinfo .inner .ilroudel p strong {
    display: block;
  }
  main #theinfo .inner .triple .block {
    width: 98%;
  }
  main #theinfo .wrapper #refs .slides li div img {
    width: 75%;
  }
  main #theinfo .wrapper #refs .slides li div blockquote {
    margin-top: 2em;
    width: 100%;
  }
  main #theinfo .wrapper #refs .flex-control-nav li a {
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }
  main #theinfo .wrapper #refs .flex-control-nav li a.flex-active {
    width: 60px;
  }
  /* FOOTER STYLES */
  footer .inner .cols form {
    width: 100%;
  }
  footer .inner .cols .col {
    width: 98%;
    position: relative;
  }
  footer .inner .cols .col #contact {
    position: relative;
    margin-top: 2em;
  }
  footer .inner .cols .col #contact p {
    transform: translateX(0);
  }
  footer .inner .cols .col #contact ul {
    font-size: 0.75em;
  }
  footer .inner .caveat {
    text-align: left;
    line-height: 1.5em;
  }
}/*# sourceMappingURL=styles.css.map */