@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=c6dc14f7-9f78-481a-a15f-05818ba7eb8d&fontids=721263");
@import url("https://use.typekit.net/mjq3fkc.css");
@font-face{
    font-family:"AvenirNextLTW01-Regular";
    src:url("/fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix");
    src:url("/fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"),url("/fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"),url("/fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"),url("/fonts/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype");
}

body {
  background-color: #545454;
  font-size: 10px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 51.1em; /*
  min-height: 70.96vh; */
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
/*
  height: 69.5em;
  height: 59.122vh;
  height: 70.96vh; */
  width: 70%;
  padding-top: 4em;
  padding-bottom: 4em;
}


#main > p, #main > textarea {
/*
  max-width: 45.6em; */
  max-width: 44.4878vw;
}

h1 {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 3.512vw;
  color: white;
  letter-spacing: 0.4878vw;
  text-transform: uppercase;
  line-height: 120%;
}

h2 {
  font-family: SFProText, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; /*
  font-size: 1.7em; */
  font-size: 1.658vw;
  color: #A6A6A6;
  text-transform: uppercase; /*
  letter-spacing: 4.87px;  */
  letter-spacing: 0.39vw; /*
  margin-bottom: 34px; */
  margin-bottom: 2.8vw;
  margin-top: 4em;
}

p, li {
  font-family: AvenirNext-Regular, AvenirNextLTW01-Regular, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2em;
  font-size: 1.756vw;
  color: white;
  letter-spacing: 0.4px;
  letter-spacing: 0.046vw;
  line-height: 2.731vw;
  line-height: 30px;
  margin-bottom: 3vw;
  position: relative;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  position: relative;
  text-shadow:
    -2px -2px #545454,
    -2px 2px #545454,
    2px -2px #545454,
    2px 2px #545454;
    background-size: 1px 1em;
    box-shadow:
      inset 0 -3px #545454,
      inset 0 -4px grey;
    display: inline;
    transition: box-shadow 100ms ease-in;
}

a:hover {
  box-shadow:
    inset 0 -3px #545454,
    inset 0 -4px white;
  transition: box-shadow 300ms ease-in;
}
/*
a::after{
  border-bottom: 1px solid grey;
  position: absolute;
  left: 0;
  bottom: 4px;
  content: "";
  width: 100%;
  transition: border-bottom-color 100ms ease-in;
}

a:hover::after {
  border-bottom-color: white;
  transition: border-bottom-color 300ms ease-in;
}
*/
button {
  border: 1px solid #717171;
  border-radius: 0.4em;
  background-color: transparent;
  text-align: center;
  padding: 7px 11px 8px 11px;
  margin: 0;
  /*margin-top: 2.8vw;*/
}

button .button-text {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 1.4em;
  color: #7D7D7D;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-transform: uppercase;
  display: inline-block;
}

button.valid-input {
  border-color: #C1C1C1;
  cursor: pointer;
}

button.valid-input .button-text {
  color: white;
}

button:focus {outline:0;}

button.success {
  /*border-radius: 100em; */
  position: relative;
  transition: opacity linear 0.1s;
  cursor: default;
  border: 0;
}

@keyframes spin {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
         transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}


button.success:before {
    animation: 1s linear 1 spin;
    border: solid 2px #9C9C9C;
    border-bottom-color: white;
    border-radius: 50%;
    content: "";
    height: 32px;
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
    width: 32px;
    will-change: transform;
    background-image: url(/images/checkmark.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

button.success.complete:before {
    border-bottom-color: #9C9C9C;
}

button.success.complete:after {
    content: "Sent.";
    border: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2.5em;
    text-transform: none;
    font-family: AvenirNext-Regular, AvenirNextLTW01-Regular, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.756vw;
    color: white;
    letter-spacing: 0.046vw;
    line-height: 30px;
    opacity: 0;
    animation: 0.3s fadeIn 0.3s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



textarea {
  overflow: auto;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: AvenirNext-Regular, AvenirNextLTW01-Regular, -apple-system, BlinkMacSystemFont, sans-serif;
/*  color: #A6A6A6; */
  color: white;
  font-size: 1.756vw;
  letter-spacing: 0.046vw;
  line-height: 2.731vw;
  line-height: 30px;
  margin-bottom: 2.8vw;
  padding: 0;
  resize: none;
  min-height: 38px;
  max-height: 27vh;
}

textarea:read-only {
  color: grey;
}

li:before {
  content: '\2022';
  font-size: 0.7em;
  position: absolute;
  left: -1.3em;
}

::selection {
  background-color: #727272;
}

.user-message {
  font-family: Georgia-Italic, AvenirNext-Regular, AvenirNextLTW01-Regular, -apple-system, BlinkMacSystemFont, sans-serif;
/*  color: white; */
}



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

    h1 {
      font-size: 5em;
      letter-spacing: 0.145em;

    }

    h2 {
      font-size: 1.5em;
      letter-spacing: 0.286em;
      margin-bottom: 2em;
    }
    button {
      margin-top: 2em;
    }

    textarea {
      margin-bottom: 2em;
    }

    p, li, textarea, button.success.complete:after {
      font-size: 1.8em;
      letter-spacing: 0.022em;
      line-height: 1.556em;
      margin-bottom: 1.111em;
    }

}


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

    #main {
      justify-content: center;
    }

    h1 {
      font-size: 11vw;
    }
}

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

    #main > p, #main > textarea {
      max-width: none;
    }
}

@media only screen
  and (min-width: 1153px) {

    #main {
      height: 70vh;
    }

    h2 {
        font-size: 1.7em;
        /* letter-spacing: 0.27em; */
    }

    p, li {
      font-size: 2em;
      margin-bottom: 1em;
    }

    textarea, button.success.complete:after {
      font-size: 2em;
    }

}

@media only screen
  and (min-width: 1153px)
  and (max-width: 1920px) {

    h1 {
      font-size: 4vw;
    }

}

@media only screen
  and (min-width: 1920px) {

    h1 {
      font-size: 4vw;
    }

    h2 {
      font-size: 1vw;
    }

    button .button-text {
      font-size: 0.9vw;
      letter-spacing: 0.27vw;
      text-indent: 0.27vw;
    }

    p, li, textarea, button.success.complete:after {
      font-size: 1.2vw;
      line-height: 2vw;
    }
}

@media only screen
  and (max-height: 668px)
  and (max-width: 670px) {
    body {
      display: block;
      position: static;
    }

    #main {
      display: block;
      padding-top: 4em;
      margin-left: auto;
      margin-right: auto;
    }
}

/*
@media only screen
  and (max-height: 530px) {

    #main > * {
      min-height: 520px;
    }
}
*/

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 1152px) {

}