* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    list-style: none;
    word-wrap: break-word
  }
  
  body {
    color: #000;
    line-height: 1.3;
    font-weight: 400;
    font-size: 1 px;
    font-family: Rubik, sans-serif;
    overflow-x: hidden !important
  }
  
  p {
    font-family: Raleway, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444;
    line-height: 1.8;
    margin: 0
  }
  
  img {
    width: 100%;
    height: auto
  }
  
  a,
  span {
    display: inline-block;
    text-decoration: none;
    color: inherit
  }
  
  a:hover {
    color: inherit;
    text-decoration: none
  }
  
  .curve {
    position: absolute;
    z-index: 7
  }
  
  .curve.curve-center:after {
    border-left: 50vw solid transparent
  }
  
  .curve.curve-center:before {
    border-right: 50vw solid transparent
  }
  
  .curve.curve-center.curve-top:after {
    border-left: 50vw solid transparent
  }
  
  .curve.curve-center.curve-top:before {
    border-right: 50vw solid transparent
  }
  
  .curve.curve-bottom {
    left: 0;
    bottom: -1px;
    width: 100%
  }
  
  .curve.curve-bottom:after,
  .curve.curve-bottom:before {
    bottom: 0
  }
  
  .curve.curve-top {
    left: 0;
    top: -1px;
    width: 100%
  }
  
  .curve.curve-top:after,
  .curve.curve-top:before {
    top: 0;
    border-top: 50px solid #fff;
    border-bottom: 0
  }
  
  .curve.curve-top:after {
    border-left: 70vw solid transparent
  }
  
  .curve.curve-top:before {
    border-right: 30vw solid transparent
  }
  
  .curve.curve-gray-b:after,
  .curve.curve-gray-b:before {
    border-bottom: 50px solid #f9f9f9
  }
  
  .curve.curve-gray-t:after,
  .curve.curve-gray-t:before {
    border-top: 50px solid #f9f9f9
  }
  
  .curve:after,
  .curve:before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 50px solid #fff;
    position: absolute
  }
  
  .curve:after {
    right: 0;
    border-left: 30vw solid transparent
  }
  
  .curve:before {
    left: 0;
    border-right: 70vw solid transparent
  }
  
  .section-padding {
    padding: 120px 0
  }
  
  .section-head {
    margin-bottom: 80px;
    text-align: center
  }
  
  .section-head h4 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px
  }
  
  .section-head h4 span {
    font-weight: 300
  }
  
  [data-overlay-color] .section-head p {
    color: #ccc
  }
  
  [data-overlay-color].process .icon {
    color: #fff !important
  }
  
  .bg-gray {
    background: #f9f9f9
  }
  
  .badged {
    text-align: center;
  }
  
  .badged img {
    width: 190px;
  }
  
  .bg-blue {
    background: url(../img/bg-texture.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  
  .pos-re {
    position: relative
  }
  
  .full-width {
    width: 100% !important
  }
  
  .bg-img {
    background-size: cover;
    background-repeat: no-repeat
  }
  
  .bg-fixed {
    background-attachment: fixed
  }
  
  .valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
  
  .cd-headline {
    font-size: 3rem;
    line-height: 1.2
  }
  
  @media only screen and (min-width:768px) {
    .cd-headline {
      font-size: 4.4rem;
      font-weight: 300
    }
  }
  
  @media only screen and (min-width:1170px) {
    .cd-headline {
      font-size: 6rem
    }
  }
  
  .cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left
  }
  
  .cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    font-weight: 100 !important;
    left: 0;
    top: 0
  }
  
  .cd-words-wrapper b.is-visible {
    position: relative
  }
  
  .cd-headline.clip span {
    display: inline-block;
    padding: .2em 0
  }
  
  .cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top
  }
  
  .cd-headline.clip .cd-words-wrapper::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 2px;
    height: 70%;
    background-color: #aebcb9
  }
  
  .cd-headline.clip b {
    opacity: 0
  }
  
  .cd-headline b.is-visible {
    opacity: 1;
    font-weight: 900
  }
  
  .navbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
    background: 0 0;
    z-index: 9;
    min-height: 70px
  }
  
  .navbar .icon-bar {
    color: #fff
  }
  
  .navbar .navbar-nav .nav-link {
    font-size: 20px;
    font-weight: 100;
    color: #eee;
    letter-spacing: .5px;
    margin: 15px 5px;
    -webkit-transition: all .5s;
    transition: all .5s
  }
  
  .navbar .navbar-nav .active {
    color: #2576fd !important
  }
  
  .nav-scroll {
    background: #fff;
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, .05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .05);
    padding: 0;
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translateY(100px);
    transform: translateY(100px)
  }
  
  .nav-scroll .icon-bar {
    color: #222
  }
  
  .nav-scroll .navbar-nav .nav-link {
    color: #222
  }
  
  .nav-scroll .navbar-nav .logo {
    padding: 15px 0;
    color: #111
  }
  
  .logo {
    padding: 15px 0;
    width: 350px
  }
  
  .header {
    min-height: 100vh;
    position: relative
  }
  
  .header.video {
    overflow: hidden
  }
  
  .header .caption h4 {
    font-size: 50px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
  }
  
  .header .caption h1 {
    margin: 10px 0;
    font-size: 65px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
  }
  
  .header .caption p {
    font-size: 16px;
    font-weight: 300;
    color: #eee;
    word-spacing: 2px;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
  }
  
  .header .caption p span {
    letter-spacing: 5px;
    text-transform: uppercase;
    margin: 0 5px;
    padding-right: 14px;
    position: relative
  }
  
  .header .caption p span:last-child {
    padding: 0
  }
  
  .header .caption p span:last-child:after {
    display: none
  }
  
  .header .caption p span:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2576fd;
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .5
  }
  
  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
  }
  
  .hero .extra-title {
    margin-bottom: 30px
  }
  
  .hero .extra-title span {
    color: #2576fd
  }
  
  .hero .feat-item {
    padding: 0
  }
  
  .hero .feat-item .text-center {
    padding: 50px 30px;
    background-color: #fff
  }
  
  .hero .feat-item.active .text-center {
    margin-top: -25px;
    padding-top: 75px;
    -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, .05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .05);
    position: relative;
    z-index: 3
  }
  
  .hero .feat-item:hover .icon {
    color: #fff
  }
  
  .hero .feat-item:hover .icon:after {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
  }
  
  .hero .feat-item .icon {
    width: 90px;
    height: 90px;
    line-height: 105px;
    color: #777;
    font-size: 60px;
    border-radius: 50%;
    margin-bottom: 15px;
    position: relative;
    z-index: 3
  }
  
  .hero .feat-item .icon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #2576fd;
    background: -webkit-gradient(linear, left top, right bottom, from(#2576fd), to(#2576fd));
    background: linear-gradient(to bottom right, #2576fd, #2576fd);
    border-radius: 50%;
    z-index: -1;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: all .4s;
    transition: all .4s
  }
  
  .hero .feat-item h5 {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 10px
  }
  
  .hero .feat-item h6 {
    color: #2576fd;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 20px
  }
  
  .skills h6 {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px
  }
  
  .process .item {
    position: relative;
    z-index: 4
  }
  
  .process .item img {
    position: absolute;
    width: 70%;
    right: -40%;
    top: 15px;
    opacity: .5
  }
  
  .process .item .cont {
    padding: 50px 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    border-radius: 10px;
    position: relative;
    z-index: 3;
    -webkit-transition: all .3s;
    transition: all .3s
  }
  
  .process .item .cont:hover {
    background-color: #2576fd
  }
  
  .process .item .cont:hover h6 {
    color: #fff
  }
  
  .process .item .cont:hover p {
    color: #eee
  }
  
  .process .item .icon {
    color: #2576fd;
    font-size: 30px;
    width: 80px;
    height: 80px;
    line-height: 85px;
    border-radius: 50%;
    border: 1px dashed #eee;
    margin-bottom: 30px
  }
  
  .process .item h3 {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    color: #777;
    font-size: 50px;
    font-weight: 700;
    opacity: .1;
    z-index: -1
  }
  
  .process .item h6 {
    color: #222;
    font-size: 16px;
    margin-bottom: 15px
  }
  
  .process .item p {
    font-size: 14px;
    color: #999
  }
  
  .works .filtering .filter {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 30px
  }
  
  .works .filtering span {
    margin: 0 5px;
    padding: 10px 40px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 30px;
    cursor: pointer
  }
  
  .works .filtering .active {
    background: #2576fd;
    color: #fff
  }
  
  .works .item-img {
    position: relative;
    margin-top: 30px
  }
  
  .works .item-img:hover .item-img-overlay {
    visibility: visible;
    opacity: 1
  }
  
  .works .item-img-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 30px;
    background: rgba(255, 255, 255, .95);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .7s;
    transition: all .7s
  }
  
  .works .item-img-overlay .icon {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid #2576fd;
    text-align: center;
    font-size: 20px;
    color: #2576fd
  }
  
  .works .item-img-overlay p {
    color: #2576fd;
    font-weight: 400;
    font-size: 13px
  }
  
  .works .item-img-overlay h6 {
    font-weight: 400;
    font-size: 16px;
    margin-top: 5px
  }
  
  .why-us .img {
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    overflow: hidden
  }
  
  .why-us .item .icon {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 57px;
    font-size: 25px;
    border-radius: 50%;
    border: 1px solid #eee;
    color: #2576fd;
    float: left;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s
  }
  
  .why-us .item .icon:hover {
    color: #fff;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05)
  }
  
  .why-us .item .icon:hover:after {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
  }
  
  .why-us .item .icon:after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #2576fd;
    background: -webkit-gradient(linear, left top, right top, from(#2576fd), to(#2576fd));
    background: linear-gradient(to right, #2576fd, #2576fd);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: all .3s;
    transition: all .3s
  }
  
  .why-us .item .icon:before {
    position: relative;
    z-index: 3
  }
  
  .why-us .item .cont {
    margin-left: 70px;
    margin-bottom: 20px;
  }
  
  .why-us .item .cont h5 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px
  }
  
  .why-us .item .cont p {
    /* font-size: 14px */
  }
  
  .google-cer {
    line-height: 1.8;
  }
  
  .google-cer ol {
    margin-top: 20px;
  }
  
  .google-cer ol li {
    list-style: decimal-leading-zero;
    margin-left: 40px;
  }
  ul.bullet li {
    list-style: disc;
    margin-left: 40px;
  }
  
  .areas-expertise h5 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .areas-expertise span {
    background: #ededed;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    margin: 3px;
  
  }
  
  .blog .item {
    -webkit-box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
    padding: 15px
  }
  
  .blog .item .cont {
    padding: 30px 0 15px
  }
  
  .blog .item .cont h6 {
    font-size: 16px;
    margin-bottom: 10px
  }
  
  .blog .item .info {
    font-size: 10px;
    color: #999;
    font-style: italic;
    margin-bottom: 10px
  }
  
  .blog .item .info a {
    margin-right: 10px
  }
  
  .blog .item .info a:last-child {
    margin-right: 0
  }
  
  .call-action {
    position: relative
  }
  
  .call-action:after {
    content: '';
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }
  
  .call-action .text-center {
    padding: 0 20px
  }
  
  .call-action h2 {
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 10px
  }
  
  .call-action h5 {
    font-weight: 400;
    margin-bottom: 30px
  }
  
  .contact .contact-info h5 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px
  }
  
  .contact .contact-info .item {
    margin-top: 30px
  }
  
  .contact .contact-info .item .icon {
    float: left;
    font-size: 25px;
    color: #2576fd
  }
  
  .contact .contact-info .item .cont {
    margin-left: 50px
  }
  
  .contact .contact-info .item .cont h6 {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px
  }
  
  .contact .contact-info .item .cont p {
    font-size: 13px
  }
  
  footer {
    padding: 80px 0;
    background-color: #111
  }
  
  footer .social a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #151515;
    color: #999;
    font-size: 16px;
    margin: 15px 5px
  }
  
  footer .social a:hover {
    background-color: #2576fd;
    color: #fff
  }
  
  footer p {
    color: #999;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px
  }
  
  @media screen and (min-width:1200px) {
    .container {
      max-width: 1200px
    }
  }
  
  @media screen and (max-width:991px) {
    .mb-md50 {
      margin-bottom: 50px
    }
  
    .mb-md30 {
      margin-bottom: 30px
    }
  
    .mb-md0 {
      margin-bottom: 0
    }
  
    .bg-fixed {
      background-attachment: scroll !important
    }
  
    .navbar {
      padding-left: 15px
    }
  
    .navbar .navbar-collapse {
      max-height: 340px;
      overflow: auto;
      background: #111;
      text-align: center;
      padding: 10px 0
    }
  
    .navbar .nav-link {
      margin: 10px auto !important
    }
  
    .nav-scroll .navbar-toggler {
      margin-right: 15px
    }
  
    .nav-scroll .navbar-collapse .nav-link {
      color: #fff !important
    }
  
    .nav-scroll .navbar-collapse .active {
      color: #2576fd !important
    }
  
    .header {
      background-attachment: scroll !important;
      background-position: 50% 0 !important
    }
  
    .header .caption h4 {
      font-size: 30px
    }
  
    .header .caption h1 {
      font-size: 45px;
      line-height: 1.4
    }
  
    .hero .feat-item.active .text-center {
      padding-top: 50px;
      margin-top: 0
    }
  
    .process .item img {
      display: none
    }
  }
  
  @media screen and (max-width:767px) {
    .mb-sm50 {
      margin-bottom: 50px
    }
  
    .mb-sm30 {
      margin-bottom: 30px
    }
  
    .hero .extra-title {
      font-size: 22px
    }
  
    .works .filtering .filter {
      padding: 0
    }
  
    .works .filtering span {
      margin: 0
    }
  
    .call-action h2 {
      font-size: 25px;
      font-weight: 500
    }
  
    .call-action h5 {
      font-size: 20px;
      font-weight: 300
    }
  }
  
  @media screen and (max-width:480px) {
    .header .caption h4 {
      font-size: 14px
    }
  
    .header .caption h1 {
      font-size: 25px;
      line-height: 1.4
    }
  
    .works .filtering span {
      padding: 5px 15px
    }
  }
  
  .blc {
    display: block !important
  }
  
  .cd-words-wrapper {
    font-size: 25px
  }
  
  .yt-img {
    width: 70%
  }
  
  .krp-title {
    margin-bottom: 45px;
    text-align: center
  }
  
  .krp-title h4 span {
    font-weight: 300
  }
  
  .scroll-down {
    width: 100px;
    margin-top: 75px;
    transform: translateX(-50%);
    animation: bounce 3s ease infinite;
    position: absolute;
  }
  
  .google-certification a img {
    scale: 1;
    transition: all 0.3s linear;
  }
  
  .google-certification a img:hover {
    scale: 1.05;
    transition: all 0.3s linear;
  }
  
  .works .item-img-overlay .icon {
    transform: scale(1);
    transition: 1s
  }
  
  .works .item-img-overlay .icon:hover {
    transform: scale(1.1);
    transition: 1s
  }
  
  .krp-blue {
    color: #4285f4 !important
  }
  
  .hero .feat-item:hover .icon {
    color: #fff !important
  }
  
  section.blog{
  
  }s
  
  section.blog img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  
  .bi01Date {
    position: absolute;
    left: 12px;
    top: 12px;
    height: 72px;
    width: 72px;
    border-radius: 5px;
    background: #2576fd;
    text-align: center;
    color: #FFF;
    padding: 9px 5px 0;
  }
  
  .bi01Date span:first-child {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 7px;
  }
  
  .bi01Date span:last-child {
    font-size: 15px;
    display: block;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
  }
  
  section.blog .blog-title {
    width: calc(100% - 60px);
    overflow: hidden;
    background: #FFF;
    box-shadow: 0px 5px 90px 0px rgb(2 24 93 / 8%);
    border-radius: 5px;
    padding: 21px 30px 28px 29px;
    position: absolute;
    left: 30px;
    bottom: -75px;
    transition: all ease 350ms;
    -moz-transition: all ease 350ms;
    -webkit-transition: all ease 350ms;
  }
  
  section.blog .blog-title h3 {
      font-size: 21px;
      line-height: 30px;
      margin: 0;
  
  }
  
  .blog-title .read-more {
    position: absolute;
    left: 30px;
    bottom: 27px;
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: -webkit-transform .7s cubic-bezier(.77,0,.175,1),opacity .4s cubic-bezier(.165,.84,.44,1);
    transition: transform .7s cubic-bezier(.77,0,.175,1),opacity .4s cubic-bezier(.165,.84,.44,1);
  }
  
  .blog-item:hover .blog-title .read-more {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: .6s cubic-bezier(.165,.84,.44,1) .2s;
    -moz-transition: .6s cubic-bezier(.165,.84,.44,1) .2s;
    transition: .6s cubic-bezier(.165,.84,.44,1) .2s;
  }
  
  .blog-item .blog-thumb {
   overflow: hidden;
  }
  
  .blog-item .blog-thumb img {
    scale: 1;
    transition: all 0.3s linear;
    height: 265px;
  }
  
  .blog-item:hover .blog-thumb img {
    scale: 1.05;
      transition: all 0.3s linear;
  }
  
  .blog-item:hover .blog-title {
    padding-bottom: 59px;
  }
  
  @media only screen and (max-width:767px) {
    .logo {
      width: 270px
    }
  }
  
  [data-overlay-dark] p {
    color: #fff !important
  }
  
  .krp-contact .item {
    text-align: center
  }
  
  .item span {
    color: #2576fd;
    font-size: 28px
  }
  
  .krp-play {
    width: 5%;
    position: relative;
    left: 465px
  }
  
  .krp-black-text {
    color: #444
  }
  
  .krp-title2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8
  }
  
  @media only screen and (max-width:767px) {
    .mobile-fix {
      margin-top: -91px;
      margin-bottom: 52px
    }
  }
  
  @media only screen and (max-width:445px) {
    .cd-words-wrapper {
      font-size: 20px;
    }
  }
  
  @media only screen and (max-width:990px) {
  .mrg-100 {
    margin-bottom: 100px;
  }
  .section-padding {
    padding: 65px 0;
  }
  }
  
  @media only screen and (max-width :768px) {
    .animated {
      -o-transition-property: none !important;
      -moz-transition-property: none !important;
      -ms-transition-property: none !important;
      -webkit-transition-property: none !important;
      transition-property: none !important;
      -o-transform: none !important;
      -moz-transform: none !important;
      -ms-transform: none !important;
      -webkit-transform: none !important;
      transform: none !important;
      -webkit-animation: none !important;
      -moz-animation: none !important;
      -o-animation: none !important;
      -ms-animation: none !important;
      animation: none !important
    }
  }
  
  [data-overlay-color],
  [data-overlay-dark],
  [data-overlay-light] {
    position: relative
  }
  
  [data-overlay-color],
  [data-overlay-dark],
  [data-overlay-light] {
    position: relative
  }
  
  [data-overlay-color] .container,
  [data-overlay-dark] .container,
  [data-overlay-light] .container {
    position: relative;
    color: #fff;
    z-index: 2
  }
  
  [data-overlay-color]:before,
  [data-overlay-dark]:before,
  [data-overlay-light]:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
  }
  
  [data-overlay-dark]:before {
    background: #0b1520
  }
  
  [data-overlay-color]:before {
    background-color: #1a237e;
    background: linear-gradient(to bottom right, #1a237e, #2576fd)
  }
  
  [data-overlay-light]:before {
    background: #fff
  }
  
  [data-overlay-dark] h1,
  [data-overlay-dark] h2,
  [data-overlay-dark] h3,
  [data-overlay-dark] h4,
  [data-overlay-dark] h5,
  [data-overlay-dark] h6,
  [data-overlay-dark] span {
    color: #fff
  }
  
  [data-overlay-dark] p {
    color: #bbb
  }
  
  [data-overlay-color="0"]:before,
  [data-overlay-dark="0"]:before,
  [data-overlay-light="0"]:before {
    opacity: 0
  }
  
  [data-overlay-color="1"]:before,
  [data-overlay-dark="1"]:before,
  [data-overlay-light="1"]:before {
    opacity: .1
  }
  
  [data-overlay-color="2"]:before,
  [data-overlay-dark="2"]:before,
  [data-overlay-light="2"]:before {
    opacity: .2
  }
  
  [data-overlay-color="3"]:before,
  [data-overlay-dark="3"]:before,
  [data-overlay-light="3"]:before {
    opacity: .3
  }
  
  [data-overlay-color="4"]:before,
  [data-overlay-dark="4"]:before,
  [data-overlay-light="4"]:before {
    opacity: .4
  }
  
  [data-overlay-color="5"]:before,
  [data-overlay-dark="5"]:before,
  [data-overlay-light="5"]:before {
    opacity: .5
  }
  
  [data-overlay-color="6"]:before,
  [data-overlay-dark="6"]:before,
  [data-overlay-light="6"]:before {
    opacity: .6
  }
  
  [data-overlay-color="7"]:before,
  [data-overlay-dark="7"]:before,
  [data-overlay-light="7"]:before {
    opacity: .7
  }
  
  [data-overlay-color="8"]:before,
  [data-overlay-dark="8"]:before,
  [data-overlay-light="8"]:before {
    opacity: .8
  }
  
  [data-overlay-color="9"]:before,
  [data-overlay-dark="9"]:before,
  [data-overlay-light="9"]:before {
    opacity: .9
  }
  
  [data-overlay-color="10"]:before,
  [data-overlay-dark="10"]:before,
  [data-overlay-light="10"]:before {
    opacity: 1
  }
  
  .krp-google-ads {
    padding: 10px 0 5px 0;
    background: #eee;
  }