/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

#app::after, #app form::after, #app .views-wrapper::after {
  content: '';
  display: block;
  clear: both; }

.icon.logo, .signature .company-info .logo {
  width: 120px;
  height: 21.2px;
  position: relative;
  overflow: hidden; }
  .icon.logo img, .signature .company-info .logo img {
    max-width: 100%; }

.icon.mark, .signature .personal-info .logo {
  width: 120px;
  height: 120px;
  position: relative;
  overflow: hidden; }
  .icon.mark img, .signature .personal-info .logo img {
    max-width: 100%; }

.icon.email-light {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden; }
  .icon.email-light img {
    max-width: 100%; }

.icon.email, .signature .personal-info .contact .email i {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden; }
  .icon.email img, .signature .personal-info .contact .email i img {
    max-width: 100%; }

.icon.facebook, .signature .company-info .social .facebook i {
  width: 13px;
  height: 13px;
  position: relative;
  overflow: hidden; }
  .icon.facebook img, .signature .company-info .social .facebook i img {
    max-width: 100%; }

.icon.instagram, .signature .company-info .social .instagram i {
  width: 13px;
  height: 13px;
  position: relative;
  overflow: hidden; }
  .icon.instagram img, .signature .company-info .social .instagram i img {
    max-width: 100%; }

.icon.linkedin, .signature .company-info .social .linkedin i {
  width: 13px;
  height: 13px;
  position: relative;
  overflow: hidden; }
  .icon.linkedin img, .signature .company-info .social .linkedin i img {
    max-width: 100%; }

.icon.phone-light {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden; }
  .icon.phone-light img {
    max-width: 100%; }

.icon.phone, .signature .personal-info .contact .phone i, .signature .personal-info .contact .phone2 i {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden; }
  .icon.phone img, .signature .personal-info .contact .phone i img, .signature .personal-info .contact .phone2 i img {
    max-width: 100%; }

.icon.twitter, .signature .company-info .social .twitter i {
  width: 13px;
  height: 13px;
  position: relative;
  overflow: hidden; }
  .icon.twitter img, .signature .company-info .social .twitter i img {
    max-width: 100%; }

.signature-generator-page {
  text-align: center; }

#app {
  text-align: left;
  display: inline-grid;
  grid-auto-columns: 1fr 2fr;
  grid-auto-rows: -webkit-min-content -webkit-min-content 1fr;
  grid-auto-rows: min-content min-content 1fr;
  grid-template-areas: "form views" "form signature" "form .";
  row-gap: 40px;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px; }
  #app form {
    grid-area: form;
    text-align: left;
    -webkit-box-shadow: 0 1px 3px rgba(252, 239, 239, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            box-shadow: 0 1px 3px rgba(252, 239, 239, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 20px;
    font-family: "Verdana", "Tahoma";
    color: #747474; }
    #app form h2 {
      font-size: 20px;
      margin: 0 0 20px 0;
      text-transform: uppercase; }
    #app form > label {
      display: inline-block;
      font-size: 16px;
      text-transform: uppercase;
      font-weight: 400;
      margin: 15px 0 5px 0; }
    #app form > label:not([for=appointment]) {
      display: block; }
    #app form input:not([type=checkbox]), #app form select {
      display: block;
      font-size: 14px;
      width: 100%;
      padding: 5px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      clear: both; }
    #app form .checkbox {
      float: right;
      margin: 15px 0 0 0;
      width: 20px;
      height: 20px;
      position: relative; }
      #app form .checkbox input {
        margin: 0;
        padding: 0;
        visibility: hidden; }
      #app form .checkbox label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        top: -3px;
        left: 0;
        background: #eee;
        border: 1px solid #ddd; }
        #app form .checkbox label::after {
          opacity: 0.1;
          content: '';
          position: absolute;
          width: 9px;
          height: 5px;
          background: transparent;
          top: 4px;
          left: 4px;
          border: 3px solid #222;
          border-top: none;
          border-right: none;
          -webkit-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
                  transform: rotate(-45deg); }
        #app form .checkbox label:hover::after {
          opacity: 0.5; }
      #app form .checkbox input[type=checkbox]:checked + label::after {
        opacity: 1; }
    #app form .copy {
      padding: 15px 0;
      font-size: 16px;
      text-transform: uppercase;
      color: white;
      background-color: #f34140;
      font-weight: bold;
      text-decoration: none;
      display: block;
      text-align: center;
      margin: 10px 0 0 0; }
    #app form .copy-message {
      margin: 20px 0 0; }
  #app .views-wrapper {
    grid-area: views;
    text-align: left;
    display: inline-block;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 20px;
    font-family: "Verdana", "Tahoma";
    color: #747474; }
    #app .views-wrapper h2 {
      font-size: 20px;
      margin: 0 0 20px 0;
      text-transform: uppercase; }
    #app .views-wrapper .views {
      text-align: center;
      margin: 0;
      padding: 0;
      font-size: 0; }
      #app .views-wrapper .views li {
        display: inline-block; }
        #app .views-wrapper .views li input {
          margin: 0;
          padding: 0;
          visibility: hidden; }
        #app .views-wrapper .views li label {
          display: inline-block;
          background-color: #f34140;
          color: white;
          text-transform: uppercase;
          padding: 15px 30px;
          font-size: 15px;
          margin: 0 10px;
          font-weight: 800; }
        #app .views-wrapper .views li input:checked + label {
          background-color: #910a09; }

.signature-wrapper {
  grid-area: signature;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: inline-block; }
  .signature-wrapper.small {
    width: 350px; }
  .signature-wrapper.medium {
    width: 500px; }
  .signature-wrapper.large {
    width: 850px; }

.signature-copy {
  position: absolute;
  top: -1000000000px;
  left: -10000000000px; }

.signature {
  padding: 10px;
  width: 100%;
  max-width: 850px;
  display: inline-block;
  text-align: left;
  font-family: "Verdana", "Tahoma";
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  .signature a {
    text-decoration: none; }
  .signature .personal-info {
    max-width: 850px;
    display: block;
    background-color: #f7f7f7;
    font-size: 0; }
    .signature .personal-info > * {
      vertical-align: middle;
      display: inline-block; }
    .signature .personal-info .logo {
      height: auto;
      margin-right: 25px;
      max-width: 18%;
      padding-top: calc(17px - 2%);
      padding-left: calc(17px - 2%); }
    .signature .personal-info .personal {
      padding: 20px 50px 10px 10px;
      width: 310px; }
      .signature .personal-info .personal .name {
        color: #f34140;
        font-weight: 900;
        margin-bottom: 15px;
        font-size: 14pt; }
      .signature .personal-info .personal .position {
        color: #747474;
        font-weight: 300;
        font-size: 10pt; }
    .signature .personal-info .contact {
      padding: 10px 25px 0 10px; }
      .signature .personal-info .contact div {
        margin: 0 0 10px 0; }
        .signature .personal-info .contact div i {
          display: inline-block;
          overflow: hidden;
          vertical-align: middle; }
        .signature .personal-info .contact div a {
          vertical-align: middle;
          font-size: 10pt;
          color: #6f6f6f;
          font-family: "Verdana", "Tahoma";
          font-weight: 400;
          margin: 0 0 0 10px; }
      .signature .personal-info .contact .appointment a {
        color: #f34140;
        margin: 0; }
  .signature .company-info {
    display: block;
    font-size: 0; }
    .signature .company-info > * {
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
      vertical-align: middle; }
    .signature .company-info .logo {
      margin-right: 35px; }
    .signature .company-info .address {
      font-size: 8.63pt;
      width: 310px;
      margin-right: 60px; }
      .signature .company-info .address a {
        color: #757575; }
    .signature .company-info .website {
      font-size: 8.63pt;
      margin-right: 25px; }
      .signature .company-info .website a {
        color: #757575; }
    .signature .company-info .social {
      margin-right: 25px; }
      .signature .company-info .social a {
        margin: 0 3px; }
        .signature .company-info .social a i {
          display: inline-block;
          vertical-align: middle; }