@font-face { font-family: myFirstFont; src: url(./newFont.ttf); }

/* Global Settings */

html>* {
    box-sizing: border-box;
  }
  
  body {
    font-size: 100%;
    font-family: myFirstFont;
    line-height: 100%;
  }
  
  main {
    width: 100%;
    height: 100%;
  }
  
  p,small,span {
    line-height: 1.5em;
  }
  
  h1 {
    font-size: 3.25em; /* 52px */
    font-weight: bold;
    line-height: 1em;
  }
  
  h2 {
    font-size: 1.5em; /* 24px */
    line-height: 1.842em;
  }
  
  h3 {
    font-size: 1.375em; /* 22px */
    font-weight: 500;
    line-height: 1.2em;
  }
  
  h2,small {
    color: #B3B4B5;
  }

  button {
    background-color:#203159;
    color: rgb(255, 255, 255);
    font-size: 120%;
    border:none;
    border-radius:4px;
    padding: 16%;
  }
  
  /* Setting flex containers so they are....flexible -__- */
  
  .wrapper,
  .container,
  .col-1,
  .col-2
  {
    display: flex;
    flex: 1 100%;
    align-items: center;
  }
  .social-container {
    display: flex;
  }
  
  /* Adjusting alignment and layout for each flex parent  */
  
  .container {
    flex-flow: column nowrap;
    min-height: 90vh;
    width:100%;
  }
  
  .col-1, 
  .col-2 {
    justify-content: center;
  }
  
  .col-1 {
    align-items: center;
    flex-basis: 100%;
    height: 10vh;
  }
  
  .col-2 {
    flex-flow: column nowrap;
    padding: 2% 2%;
  }
  
  /*  Medium to larger screens. Breakpoint at 980px */
  
  @media (min-width: 61.25em) {
    .container {
      flex-flow: row nowrap;
   }
    .col-2 {
      padding: 1.5% 1%;
    }
  }
  
  /* Styling the rest of the items  */
  
  /* Article Cover Section */  
  
  .article-cover {
    align-items: center;
    text-align:center;
  }
  
  #article-tip1-cover {
    background: #EDF0F5;
    color: #203159;
  }
  
    .article-cover-title {
    padding: 4%;
    }
  
      .social-container {
        justify-content: center;
        list-style: none;
        margin-top: 20px;
      }
  
        .social-container>li {
          margin:0 2%;
        }
  
          .social-container>li>a {
            border: solid 1px #fff;
              border-radius: 90px;
            color: #fff;
            padding:5px 8px;
            text-decoration: none;  
          }
  
            .social-container>li>a:hover {
            background: #3498DB;
          }
  
  /* Article Content Section */
  
  #article-tip1-content {
    background: #EDF0F5;
    color: white;
  }
  
    .article-content-summary {
      background: #fff;
      color: #0c0d11;
      border: dashed 5px #f1c40f;
      padding: 4%;
      margin: 4% 0;
    }
  
      #article-tip1-content a:hover {
        color: #0C0D11;
        font-size:110%;
       }
  
       .divContainer {
        position: relative;
        text-align: center;
    }

    .empCardName {
        position: absolute;
        top: 87%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #499ed5;
        font-size: 120%;
;
    }