body {
       overflow: hidden;
       opacity: 0;
   }
   body.active {
       opacity: 1;
       transition: 2000ms;
   }
   .contact-form h3 {
       padding: 10px;
       margin: 0px;
       border-bottom: 1px solid rgba(255, 255, 255, .1);
       font-family: 'arial black';
       text-transform: uppercase;
       letter-spacing: -2px;
       border-bottom: 1px solid #000;
       font-weight: normal;
   }
   .contact-form label {
       display: inline-block;
       width: 23%;
       padding: 1%;
       text-align: right;
   }
   .input-area {
       display: inline-block;
       width: 72%;
       padding: 1%;
       position: relative;
   }
   .closer {
       font-weight: 900;
       position: absolute;
       right: 10px;
       top: 10px;
       color: #FFF;
   }
   .clear {
       clear: both;
   }
   .contact-form form {
       padding: 20px;
   }
   .contact-form {
       position: absolute;
       width: 10vw;
       background-color: #222;
       color: #FFF;
       left: 45vw;
       top: -100vh;
       -moz-transform: rotate(90deg);
       transform: rotate(90deg);
       border-radius: 5px;
       opacity: 1;
       z-index: 99999;
   }
   .contact-form.showing {
       position: absolute;
       width: 45vw;
       background-color: #222;
       color: #FFF;
       left: 27.5vw;
       top: 300px;
       border-radius: 5px;
       -moz-transform: rotate(0deg);
       transform: rotate(0deg);
       opacity: 1;
       box-shadow: 0 0 12px rgba(0, 0, 0, 1);
       transition: 528ms;
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1);
       /* older webkit */
       
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       /* custom */
   }
   .contact-form.hidden {
       position: absolute;
       width: 10vw;
       background-color: #222;
       color: #FFF;
       left: 45vw;
       top: -120vh;
       -moz-transform: rotate(90deg);
       transform: rotate(90deg);
       border-radius: 5px;
       opacity: 1;
   }
   .help-block {
       position: absolute;
       top: 1px;
       background: none repeat scroll 0% 0% rgb(229, 29, 36);
       color: rgb(255, 255, 255);
       padding: 5px 10px 2px;
       border: none;
       border-radius: 3px;
       z-index: 9999;
       right: 10px;
       text-transform: uppercase;
       font-size: 10px;
       transition: 200ms;
   }
   .highlight {
       color: #e51d24;
   }
   body {
       font-family: "Helvectica", sans-serif;
       background-color: #0E0E0E;
   }
   input[type="text"], input[type="email"] {
       width: 98%;
       border-radius: 3px;
       height: 25px;
       border: 1px solid #CCC;
       color: #666;
       padding-left: 2%;
       font-size: 16px;
   }
   input[type="text"].error, input[type="email"].error {
       width: 98%;
       border-radius: 3px;
       height: 25px;
       border: 1px solid #F00;
       color: #666;
       padding-left: 2%;
       font-size: 16px;
       box-shadow: 0 0 2px red;
   }
   button[type="submit"] {
       background-color: #000;
       float: right;
       font-family: 'Arial Black';
       display: block;
       width: 150px;
       text-align: center;
       padding: 5px;
       padding-left: 10px;
       padding-right: 10px;
       color: #FFF;
       border: 3px solid #e51d24;
       border-radius: 3px;
       margin: auto;
       font-size: 12px;
       text-decoration: none;
       box-shadow: inset 1px 1px rgba(0, 0, 0, .1);
       text-transform: uppercase;
   }
   textarea {
       width: 98%;
       border-radius: 3px;
       height: 125px;
       border: 1px solid #CCC;
       color: #666;
       padding-left: 2%;
       font-size: 16px;
   }
   .logo-red {
       width: 562px;
       background-color: #e51d24;
       padding: 10px;
       border-radius: 8px;
       margin-right: auto;
       margin-left: auto;
       margin-top: 300px;
       opacity: 1;
       max-width: 90%;
   }
   .logo-red.hidden {
       width: 562px;
       background-color: #e51d24;
       padding: 10px;
       margin-right: auto;
       margin-left: auto;
       margin-top: 300px;
       opacity: 1;
       max-width: 90%;
       transition: 400ms;
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1);
       /* older webkit */
       
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       /* custom */
   }
   .logo-red.showing {
       width: 462px;
       background-color: #e51d24;
       padding: 10px;
       margin-right: auto;
       margin-left: auto;
       margin-top: 150px;
       opacity: .5;
       max-width: 90%;
       transition: 400ms;
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1);
       /* older webkit */
       
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       transition-timing-function: cubic-bezier(0.250, 0.250, 0.600, 1.355);
       /* custom */
   }
   .logo-img img {
       max-width: 100%;
   }
   .logo-black {
       background-color: #000;
       padding: 10px;
       padding-bottom: 5px;
       border-radius: 7px;
       opacity: 1;
       text-align: center;
   }
   .contact-link {
       font-family: 'Arial Black';
       display: block;
       width: 150px;
       text-align: center;
       padding: 5px;
       padding-left: 10px;
       padding-right: 10px;
       color: #FFF;
       border: 3px solid #e51d24;
       border-radius: 3px;
       margin: auto;
       font-size: 12px;
       text-decoration: none;
       box-shadow: inset 1px 1px rgba(0, 0, 0, .1);
       text-transform: uppercase;
   }
   .contact-link:hover {
       background-color: #FFF;
       color: #000;
   }
   .tag-line {
       text-align: center;
       font-size: 15px;
       letter-spacing: 7px;
       font-weight: 100;
       margin-bottom: 100px;
       color: #ccc;
       text-transform: uppercase;
   }
   .alert-success {
       padding: 10px;
       width: 30%;
       border-radius: 3px;
       margin: auto;
       text-align: center;
       color: rgb(255, 255, 255);
       border: 2px solid green;
   }
   @media only screen and (max-width: 480px) {
       .logo-red {
           margin-top: 100px;
       }
       .logo-red.hidden {
           margin-top: 100px;
       }
       .logo-red.showing {
           margin-top: 50px;
       }
       .contact-form.showing {
           width: 98%;
           left: 1%;
           top: 5px;
       }
       .contact-form.hidden {
           width: 10vw;
           left: 45vw;
           top: -120vh;
       }
       .contact-form label {
           width: 98%;
           text-align: left;
       }
       .input-area {
           width: 98%;
           padding: 1%;
           position: relative;
       }
   }
   @media only screen and (min-width: 481px) and (max-width: 1000px) {
       .logo-red {
           margin-top: 100px;
       }
       .logo-red.hidden {
           margin-top: 100px;
       }
       .logo-red.showing {
           margin-top: 50px;
       }
       .contact-form.showing {
           width: 80%;
           left: 10%;
           top: 50px;
       }
       .contact-form.hidden {
           width: 10vw;
           left: 45vw;
           top: -120vh;
       }
       .contact-form label {
           width: 98%;
           text-align: left;
       }
       .input-area {
           width: 98%;
           padding: 1%;
           position: relative;
       }
   }