/* Generate Google Fonts 
-------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,400i,500,700&display=swap');


/* Essential Styles
-------------------------*/

  ::selection {
  	background-color: #ececec;
  }

  html, body {
  	font-family: 'Roboto', sans-serif;
  	-webkit-font-smoothing: antialiased;
    color: #515558;
    height: 100%;
  }

  body {
    font-size:1.25rem;
    line-height: 1.5;
  }

  hr {
    margin: 140px 0;
  }

  .pagewrap {
    height: 100%;
  }

  .footer {
    max-width: 100%;
    background: #252525;
  }

  .footer a {
    color: #fbfbfb;
    text-decoration: none;
    transition: all 0.5s ease;
    text-decoration: underline solid transparent;
    -webkit-text-decoration: underline solid transparent;
  }

  .footer a:hover, .footer a:focus {
    color: #3399ff;
    text-decoration: underline solid Currentcolor;
    -webkit-text-decoration: underline solid Currentcolor;
  }

  .footer h2 {
    line-height: 1.4;
  }

  a {
    color: #515558;
    text-decoration: underline;
    transition: all 0.23s ease;
  }

  a:hover
  {
  	color: #3399ff;
  }

  a:focus {
    color: #3399ff;
  }

  a.bluebarcta {
    color:#fbfbfb;
    pointer-events: auto;
  } 

  a.bluebarcta:hover {
    color:#3399ff;
  } 

  a.bluebarcta:focus {
    color:#3399ff;
  } 

  div.ctabar {
    width:100%; 
    background-color:#007bff; 
    color: white;
    pointer-events: none;
    transition: all .6s;
  }

  div.ctabar:hover {
    background: white;
  } 

  ol, ul {
    list-style:none;
    padding:0;
  }

  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: 400;
  }

  img {
    max-width: 100%;
  }

  .maintext {
    font-size: 2.8rem;
  }

  @media (max-width: 991px) {
    .maintext {
      font-size: 2.4rem;
    }
  }

  @media (max-width: 768px) {
    .maintext {
      font-size: 1,6rem;
    }
  }

  .circlepic {
      border-radius: 100px;
      max-width: 120px;
      position: relative;
      left: 20px;
      top: auto;
      -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 2s; /* Firefox < 16 */
          -ms-animation: fadein 2s; /* Internet Explorer */
           -o-animation: fadein 2s; /* Opera < 12.1 */
              animation: fadein 2s;
  }

  @media (min-width: 1500px) {
    .circlepic {
        border-radius: 100px;
        max-width: 165px;
        position: absolute;
        left: -199px;
        top: 14px;
    }
  }

  .fadetext {
      -webkit-animation: fadein .6s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein .6s; /* Firefox < 16 */
          -ms-animation: fadein .6s; /* Internet Explorer */
           -o-animation: fadein .6s; /* Opera < 12.1 */
              animation: fadein .6s;
  }

/*  MARGINS, PADDING, WIDTHS
-------------------------*/

  .mb-30 {
    margin-bottom: 12rem;
  }

  .mb-20 {
    margin-bottom: 8rem;
  }

  .mt-20 {
    margin-top: 8rem;
  }  

  .mb-15 {
    margin-bottom: 6rem;
  }

  .mt-15 {
    margin-top: 6rem;
  }

  .mb-10 {
    margin-bottom: 4rem;
  }

  .mt-10 {
    margin-top: 4rem;
  }

  .mb-4_5 {
    margin-bottom: 1.8rem;
  }

  .pb-10 {
    padding-bottom: 4rem;
  }

  .pt-10 {
    padding-top: 4rem;
  }

  .pt-12 {
    padding-top: 5rem;
  }

  .pb-20 {
    padding-bottom: 8rem;
  }

  .pt-20 {
    padding-top: 8rem;
  }

  .w-40 {
    width: 40%;
  }

  .w-90 {
    width: 90%;
  }

  .w-95 {
    width: 95%;
  }



  .fadetext {
      -webkit-animation: fadein .6s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein .6s; /* Firefox < 16 */
          -ms-animation: fadein .6s; /* Internet Explorer */
           -o-animation: fadein .6s; /* Opera < 12.1 */
              animation: fadein .6s;
  }

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  40% { opacity: 1; }
}