@charset "utf-8";
style

html * {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px;
  }
  body {
    background: gray;
    margin: 0;
    width: 100vw;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.container {  
    display: grid;
    grid-template-columns: 4% 7% 54% 35%;
    grid-template-rows: 0.3fr 1fr 0.2fr 0.75fr 0.2fr 1.5fr;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . pic"  
      "logo logo logo pic"
      ". . . pic"
      "vstripe icon detail name"
      "hstripe hstripe hstripe hstripe"
      "buttonarea buttonarea buttonarea cardarea";
      max-width: 360px;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 10px;
      border-radius: 7px ;
      background: white;
      justify-content: center; /* centers items horizontally */
      align-items: center; /* centers items vertically */
  }
  
  .logo { 
    grid-area: logo;
    padding-left: 5px;
 }

  .logo img {
    max-width: 90%;
    height: auto;
    display: grid;
    padding-bottom: 2%;
  }
 
  .pic { grid-area: pic; }

  .pic img {
    max-width: 90%;
    height: auto;
    display: grid;
    justify-self: baseline;
  }  
  .vstripe { 
    grid-area: vstripe;
    justify-self: center;
    background-color: #2E3092;
    content: " ";
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: 55%;
    border-radius: 2px;
}

  .vstripe img {
    height: 55px;
  }
  
  .icon { grid-area: icon; }
  .icon img { height: 20px;}
  
  .hstripe { 
    grid-area: hstripe;
}

.hstripe img {
    max-width: 100%;
}

  .wicon { grid-area: wicon; }
  .wicon img { height: 15px;}
  
  .detail { 
    grid-area: detail;
    line-height: 15px;
    margin-left: 2px; }
  
  .email { grid-area: email; }
  
  .www { grid-area: www; }
  
  .name { 
    grid-area: name;
    text-align: center;
    align-self: flex-start;
    padding-top: 2px;
 }
  
  .title { 
    grid-area: title;
    text-align: center;
     }
  
  .ppra { 
    grid-area: ppra;
    text-align: center;
    font-style: italic;
    font-size: smaller;
 }
  
  .cardarea { 
    grid-area: cardarea;
    max-height: 50%;
    align-self: flex-start;
 }

.cardarea img {
    max-height: 100px;
    justify-self: center;
    Height: 100%;
}
  
.buttonarea { 
    grid-area: buttonarea;
    max-height: 50%;
    justify-self: center;
    align-self: flex-start;
}

.buttonarea img {
    max-height: 80px;
    justify-self: center;
    Height: 100%;
}

button {
    outline: none;
    border: none;
    background-color: #ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#d7d7d7));
    background-image: -webkit-linear-gradient(top, #f1f1f1, #d7d7d7);
    background-image: -moz-linear-gradient(top, #f1f1f1, #d7d7d7);
    background-image: -ms-linear-gradient(top, #f1f1f1, #d7d7d7);
    background-image: -o-linear-gradient(top, #f1f1f1, #d7d7d7);
    background-image: linear-gradient(to bottom, #f1f1f1, #d7d7d7);
    width: 80px;
    height: 40px;
    border-radius: 6px;
    color: #2E3092;
    font-size: small;
    box-shadow: 0  17px 10px -10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }