.head-title h1,
.cs-scroll .fa,
.big,
.lg,
.about-content .item h4,
.about-content .item p.color,
.service-content .item .icon,
.funfact-slider .item .icon,
.service-content .item h4 a,
.blog-time-content .post .post-title h4 a:hover,
.single-content .post .post-meta-author a,
.single-content .author-info .author-info-body span a,
.post-content-slider h4,
#comments cite.fn a,
#comments .comment-meta .reply a,
.pp-contact h5,
.work-wrap-1 .item .icon-wrap .icon,
.owl-buttons .fa,
.controls-sm span .fa {
	color: #0099E6;	

}

.preloader .pre-icon:before,
.preloader .pre-icon:after,
.bg-color-2,
.head-title hr.line,
.cs-scroll .line-1, .cs-scroll .line-2, .cs-scroll .line-3, .cs-scroll .line-4,
.navigation .nav li.active a:before,
.andmore-content .item:after,
.service-content .item:hover,
.ser-link .dl-quote,
.blog-time-content .post:before, .blog-time-content .post:after,
.blog-time-content .load-btn a,
.copyright,
.funfact .title hr.line,
.blog-time-content .post .post-body .read:hover,
.sidebar,
.sidebar:after,
#respond .form-submit button,
.pp-contact .contact-form button.submit,
.pp-slider .owl-pagination .owl-page.active span,.btn-style-1 {
	background-color: #0099E6;
}

.btn-style-1:hover {
    background-color: #ffffff; /* darker */
    color: #0099e6
}

.testimonial .item .image,
.andmore-content .item:before,
.pre-item,
.controls-sm span .fa {
	border-color: #ffffff;
}

.andmore:before {
	border-top-color: #0099E6;
}

.cs-scroll:hover {
  box-shadow: inset 0 0 0 30px #0099E6;
}.head-title h1.typer span {
  color: #0099E6 !important;
  background-color: rgba(0,153,230,.3) !important;
}

.team-content .item .hiring {
	background-color: #02151A;
}
.overlay-pattern-2 {
  background: url('../../images/pattern-2-blue.png') repeat;
}
.about-content .item ul li:before {
  background: url('../../images/list-icon-blue.png') no-repeat;
}

.bg-color-2 .title .big, .bg-color-2 .title .small,
#filters ul li a,
.service-content .item:hover .icon,
.service-content .item:hover h4, 
.service-content .item:hover p, 
.service-content .item:hover h4 a,
.footer .title .lg,
.copyright {
	color: #fff
}
#filters ul .select-filter a {
	border-bottom-color: #fff;
}
.btn-style-1 {
	color: #fff;
}







/* Play with speed and easing of the animation */
$one-second: 1s;
$easing: cubic-bezier(1,0,1,0);
/* =========================================== */

@mixin animate($count) {
  $step: (100 / $count);
  $progress: 0%;
  $translate: -$digit-height;
  @while $progress < 100 {
    #{$progress} { transform: translateY($translate); }
    $progress: $progress + $step;
    $translate: $translate - $digit-height;
  }
}

$digit-height: 180px;

.digit {
  display: inline-block;
  font-size: 200px;
  color: rgba(0,0,0,0.25);
  height: $digit-height;
  line-height: 1;
}

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;

  &:not(:last-child):after {
    content: ":";
    display: block;
    width: 30px;
    height: 230px;
    position: absolute;
    top: 0px;
    right: -30px;
    color: rgba(0,0,0,0.25);
    font-size: 200px;
    line-height: 0.9;
  }
}

.time-part {
  width: 140px;
  text-align: center;
  height: $digit-height;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
  
  .digit-wrapper {
    animation-timing-function: $easing;
  }
  
  &.minutes {
    &.tens .digit-wrapper {
      animation-name: minutes-tens;
      animation-duration: $one-second * 10 * 6 * 10 * 6;
      animation-iteration-count: 1;
    }
    &.ones .digit-wrapper {
      animation-name: minutes-ones;
      animation-duration: $one-second * 10 * 6 * 10;
      animation-iteration-count: 6;
    }
  }
  
  &.seconds {
    &.tens .digit-wrapper {
      animation-name: seconds-tens;
      animation-duration: $one-second * 10 * 6;
      animation-iteration-count: 60;
    }
    &.ones .digit-wrapper {
      animation-name: seconds-ones;
      animation-duration: $one-second * 10;
      animation-iteration-count: 360;
    }
  }
  
  &.hundredths {
    &.tens .digit-wrapper {
      animation-name: hundredths-tens;
      animation-duration: $one-second;
      animation-iteration-count: 3600;
    }
    &.ones .digit-wrapper {
      animation-name: hundredths-ones;
      animation-duration: $one-second / 10;
      animation-iteration-count: 36000;
    }
  }
}

@keyframes minutes-tens {
  @include animate(6);
}
@keyframes minutes-ones {
  @include animate(10);
}

@keyframes seconds-tens {
  @include animate(6);
}
@keyframes seconds-ones {
  @include animate(10);
}

@keyframes hundredths-tens {
  @include animate(10);
}
@keyframes hundredths-ones {
  @include animate(10);
}

body {
  background: #F1614B;
  margin: 0;
  font-family: "Aldrich";
}

.wrapper {
  margin: 100px auto;
  width: 1000px;
  position: relative;
  
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    height: 20px;
    z-index: 10;
  }
  
  &:before {
    top: 0px;
    @include background-image(linear-gradient(top,  rgba(241,97,75,1) 0%,rgba(241,97,75,0) 100%));
  }
  
  &:after {
    bottom: 0px;
    @include background-image(linear-gradient(top,  rgba(241,97,75,0) 0%,rgba(241,97,75,1) 100%));
  }
}