
html {
    font-size: 16px;
  }
  
   h1 {
       font-size:2.2rem;
   }
   h4 {
       font-size: 2rem;
       line-height: 2.2rem;
       font-weight: 600;
       margin-top: 0;
  color:#141824;
   }
   h6 {
      font-size: 1.2rem;
       line-height: 1.6rem;
       margin-top: 0;
   }
   .site-register h2{
      font-size:1.85rem;
      line-height: 2rem;
      margin: 0.5rem 0 1rem;
   }
   .site-register {
      transform: translateY(-120px);
      -webkit-transform: translateY(-120px);
      -moz-transform: translateY(-120px);
      -ms-transform: translateY(-120px);
      -o-transform: translateY(-120px);
  }
  .rdh-bgr-grey{
      background-color: #ececec;
  }
  .text-bold{
      font-weight: 600 !important;
  }
.text-underline {
text-decoration: underline;
}
   .border-bottom {
       border-bottom:2px solid;
   } 
   .border-grey{
      border-color:#ddd
   }
   .box-heading{
       padding:2rem;
   }
  
   .container {
      width: 85%;
  }
.site-header {
    background: #141824;
    
}
   .site-footer {
      background: #fff;
      font-size: 0.875rem;
      line-height: 1.5;
  min-height:7.25rem;
  }
  .site-event {
      padding: 0.75rem 0;
  }
.btn:hover, .btn-large:hover, .btn-small:hover, .btn-flat:hover {
     background: #ececec;
}
[type="checkbox"].filled-in:checked+span:not(.lever):after {
    background-color: #ececec;
}
[type="checkbox"].filled-in:checked+span:not(.lever):before {
    box-shadow: 3px 0 #ececec;
}
  /* Banner  */
  .site-banner{
      position: relative;
      padding:0;
      margin: 0;
  }
  .site-banner:after{
      display: block;
      content:"";
      padding-bottom: 33%;
  }
  .site-banner .banner-media {
      position:absolute;
      top:50%;left:50%;
      transform: translate(-50%, -50%);
      z-index:1;
      width:100%;
  }
  .site-banner .banner-media img{
      width:100%;
      height: auto;
  }
  .site-banner .banner-title{
      position:absolute;
      top:50%;left:0;
      transform: translateY(-50%);
      margin: 0;
      margin-left: 2rem;
      z-index:2;
  }
  /* Icon text tiles  */
  .tile-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .tile {
      position: relative;
      width:200px;
      height: 80px;
      background-color: #ececec;
      display: flex;
      overflow: hidden;
  }
  .tile:before {
      display: block;
      content: "";
      position: absolute;
      top:0;left:0;
      width:20px;
      height: 100%;
      background-color: #e41612;
  }
  .tile .tile-media {
      width:65px;
      height: 80px;
      background-color: #e41612;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: skew(-20deg);
      -moz-transform: skew(-20deg);
      -ms-transform: skew(-20deg);
      -o-transform: skew(-20deg);
      transform: skew(-20deg);
  }
  .tile .tile-media img {
      width:45px;
      height: 45px;
      -webkit-transform: skew(20deg);
      -moz-transform: skew(20deg);
      -ms-transform: skew(20deg);
      -o-transform: skew(20deg);
      transform: skew(20deg);
  }
  .tile .tile-text{
      flex:1 1 50%;
      padding-left:35px;
      line-height: 1.2rem;
      display:flex;
      align-items: center;
      justify-content: flex-end;
  }
  /* Skew list  */
  .skew-row {
      background-color: #ececec;
      display: flex;
      align-items: center;
  }
  .skew-row > div{
      padding:0.5rem 0;
      display: flex;
      justify-content: center;
  }
  .skew-row > div.w-20 {
      width:20%;
  }
  
  .skew-row > div.w-33{
      width:33%;
  }
  .skew-row img{
      margin-right: 5px;
  }
  .skew-row .skew{
      background-color: #ddd;
      -webkit-transform: skew(-20deg);
      -moz-transform: skew(-20deg);
      -ms-transform: skew(-20deg);
      -o-transform: skew(-20deg);
      transform: skew(-20deg);
  }
  .skew-row .skew span {
      display: inline-block;
      background-color: #ddd;
      -webkit-transform: skew(20deg);
      -moz-transform: skew(20deg);
      -ms-transform: skew(20deg);
      -o-transform: skew(20deg);
      transform: skew(20deg);
  }
   @media screen and (max-width: 960px){
       .site-copyright {
          flex-wrap: wrap;
       }
       .mobile-w-100 {
           width:100%;
       }
   }
  
   @media screen and (max-width: 1600px) {
      h1{
          font-size:1.75rem;
          line-height: 1.95rem;
      }
   }
   @media screen and (max-width: 1535px) {
       .site-register h2{
           font-size:1.5rem;
           line-height: 1.75rem;
          }
      }
  @media screen and (max-width: 1387px) {
      h1 {
          font-size:1.5rem;
          line-height: 1.75rem;
         }
  }
  @media screen and (max-width: 1024px) {
      html {
          font-size:0.9rem;
  
      }
  }
  @media screen and (max-width: 996px) {
      h1 {
          font-size:2rem;
          line-height: 2.2rem;
      }
      .site-register {
          transform: translateY(-0);
          -webkit-transform: translateY(-0);
          -moz-transform: translateY(-0);
          -ms-transform: translateY(-0);
          -o-transform: translateY(-0);
      }
  }
  @media screen and (max-width: 668px) {
      .tile {
          width:100%;
      } 
      .tile  .tile-text {
          justify-content: center;
      }
      .site-header-logo, .site-footer-logo {
     width: 40%;
 }
 .site-header-logo img {
     margin: 0;
 }
  }
  @media screen and (max-width: 500px) {
      .skew-row {
          flex-wrap: wrap;
      }
      .skew-row > div.w-20, .skew-row > div.w-33 {
          width:100%;
      }
      .skew-row .skew, .skew-row .skew span {
          transform: skew(0);
          -webkit-transform: skew(0);
          -moz-transform: skew(0);
          -ms-transform: skew(0);
          -o-transform: skew(0);
  }
  }
  @media screen and (max-width: 412px) {
      h1 {
          font-size:1.1rem;
          line-height: 1.3rem;
          margin-left: 1rem !important;
      }
      .tile {
          width:100%;
      } 
      .tile  .tile-text {
          justify-content: center;
      }
  }
  @media screen and (max-width: 375px) {
      h1 {
          font-size:0.8rem;
          line-height: 1rem;
          margin-left: 1rem !important;
      }
  }
  
