@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(../fonts/Pacifico.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html { 
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

body {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*overflow: hidden;*/
}

.contact-wrapper {
  position: absolute;
  width: 726px;
  height: 384px;
  top: 0;
  left: 0;
  transform: translate3d(100%, 0px, 0px);
}
.contact-wrapper.hidden{
  display: none;
}

.contact-wrapper.open {
    background: black;
    transform: translate3d(0%,0,0);
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: white;
    overflow: hidden;
    display: block;
}

.input-container{
  margin-bottom: 22px;
}

input {
  height: 25px;
  width: 325px;
  border: none;
  background: transparent;
  color: white;
}

input:focus {
  outline: none;
  text-shadow: 1px 1px 1px white;
}

textarea {
  resize: none;
  overflow: hidden;
  border: none;
  background: transparent;
  color: white;
}

textarea:focus {
  outline: none;
  text-shadow: 1px 1px 1px white;
}

.contact-wrapper.open .contact-container {
  padding: 5%;
}

.contact-wrapper.open input {
  border-bottom: dashed 2px white;
  font-size: 2rem;
  height: auto;
  width: 50%;
}

.contact-wrapper.open textarea{
  border-bottom: dotted 2px white;
  border-top: dotted 2px white;
  width: 50%;
  font-size: 2rem;
  height: auto;
}

.contact-wrapper.open .in-message label{
  vertical-align: top;
}

.toolbar {
    display: flex;
    width: 100%;
    background: white;
    height: 8%;
    color: black;
    box-sizing: border-box; 
    justify-content: space-between;
    padding: 0 5%;
}

.toolbar .sendingMessage {
  display: none;
}

.toolbar.sending .cancelButton, .toolbar.sending .sendButton {
  display: none;
}

.toolbar.sending .sendingMessage{
  display: block;
}

.contact-wrapper.open .input-container:after{
  content: attr(data-before);
  color: red;
  font-size: 1.5rem;
  vertical-align: top;
}