/* ==========================================================================
   =Accordions and Toggles
   ========================================================================== */

/* =Accordion
   ========================================================================== */

.accordion {
  margin-bottom: 30px;
}

.accordion-item {
  position: relative;
  display: block;
  padding: 20px 30px 15px;
  border: 1px solid #cccccc;
  margin-bottom: 20px;
  color: #151617;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}

.accordion-item:after {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #151617;
  font-size: 14px;
  content: "+";
}

.accordion-item.active:after {
  top: 20px;
  color: #fff;
  content: "-";
}

.accordion-item:hover,
.accordion-item.active {
  border-color: #24bee8;
  background-color: #24bee8;
  color: #fff;
  text-decoration: none;
}

.accordion-item:hover:after {
  color: #fff;
}

.accordion-item-content {
  display: none;
  padding: 10px 0 10px;
}

.accordion-item-content h5 {
  margin-bottom: 20px;
  color: #24bee8;
  text-transform: uppercase;
}

/*
	 * 1. Clearfix hack 
	 */

.accordion-item-content:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

/* =Toggle
   ========================================================================== */

.toggle {
  margin-bottom: 30px;
}

.toggle-item {
  position: relative;
  display: block;
  padding: 20px 30px 15px;
  border: 1px solid #cccccc;
  margin-bottom: 20px;
  color: #151617;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}

.toggle-item:after {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #151617;
  font-size: 14px;
  content: "+";
}

.toggle-item.active:after {
  top: 20px;
  color: #fff;
  content: "-";
}

.toggle-item:hover,
.toggle-item.active {
  border-color: #24bee8;
  background-color: #24bee8;
  color: #fff;
  text-decoration: none;
}

.toggle-item:hover:after {
  color: #fff;
}

.toggle-item-content {
  display: none;
  padding: 10px 0 10px;
}

.toggle-item-content h5 {
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #24bee8;
}

/*
	 * 1. Clearfix hack 
	 */

.toggle-item-content:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

/* ==========================================================================
   =Alerts
   ========================================================================== */

.alert {
  padding: 15px 30px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  background-color: #fff;
  color: #aaa;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}

.alert i {
  position: relative;
  top: 1px;
  margin-right: 10px;
  color: #fff;
  font-size: 16px;
}

.alert.info {
  border: 1px solid #ccc;
  background-color: #91def3;
  color: #fff;
}

.alert.success {
  border: 1px solid #17acd4;
  background-color: #17acd4;
  color: #fff;
}

.alert.error {
  border: 1px solid #ff0030;
  background-color: #ff0030;
  color: #fff;
}

.alert.warning {
  border: 1px solid #101010;
  background-color: #101010;
  color: #fff;
}

/* ==========================================================================
   =Animations
   ========================================================================== */

.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  visibility: hidden;
}

.animate.visible {
  visibility: visible;
}
.animate.hidden {
  visibility: hidden;
}

/* ==========================================================================
   =Buttons
   ========================================================================== */

/* =Default Button
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 20px 40px;
  margin: 0 5px 20px 0;
  background-color: #24bee8;
  color: #fff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 2px;
  text-decoration: none !important;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
}

a.btn {
  color: #fff;
}

.btn:focus {
  outline: 0;
}

.btn-large {
  padding: 20px 40px;
  font-size: 12px;
}

.btn i,
.btn-large i {
  float: left;
  margin: 2px 8px 0 -4px;
  font-size: 14px;
  line-height: 14px;
}

.btn:hover {
  background: #17acd4;
}

/* =Colored Buttons
   ========================================================================== */

.btn-white {
  border: 1px solid #24bee8;
  background-color: #fff;
  color: #24bee8;
}

a.btn-white {
  color: #24bee8 !important;
}

.btn-white:hover {
  border: 1px solid #17acd4 !important;
  background-color: #17acd4 !important;
  color: #fff !important;
}

.btn-black {
  border: 1px solid #101010 !important;
  background-color: transparent !important;
  color: #101010 !important;
}

a.btn-black {
  background-color: #101010 !important;
  color: #fff !important;
}

.btn-black:hover {
  background: #000 !important;
}

/* ==========================================================================
   =Clients logos
   ========================================================================== */

.clients-logos {
  margin: 50px 0;
  list-style: none;
}

.clients-logos li {
  float: left;
  width: 20%;
  text-align: center;
}

/*
	 * 1. Clearfix hack 
	 */
#clients-logos:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

@media (max-width: 767px) {
  .clients-logos li {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }

  .clients-logos li:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   =Contact form
   ========================================================================== */

#contact-form {
  overflow: hidden;
  margin-bottom: 30px;
}

#contact-form fieldset {
}

label.validation-error {
  color: #d50f25;
}

input.validation-error,
textarea.validation-error,
select.validation-error {
  border: 1px solid #e0e0e0;
}

#contact-form #formstatus {
}

#contact-form textarea {
}

/*
	 * 1. Clearfix hack 
	 */
#contact-form:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

/* ==========================================================================
   =Dividers
   ========================================================================== */

.divider {
  margin: 30px 0;
}

.divider.single-line {
  border-top: 1px solid #ccc;
}

.divider.double-line {
  border-top: 4px double #ccc;
}

/* ==========================================================================
   =Error 404 - page not found
   ========================================================================== */

.error404 p {
  color: #24bee8;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.error404 p.title {
  margin-bottom: 40px;
  font-size: 70px;
}

.error404 p.subtitle {
  margin-bottom: 50px;
  font-size: 24px;
}

.error404 p i {
  margin-left: 7px;
  font-size: 30px;
  vertical-align: middle;
}

.error404 a:hover {
  color: #17acd4;
}

.error404 p:last-child {
  margin-top: 30px;
  color: #101010;
  font-family: "Open Sans", sans-serif;
}

/* ==========================================================================
   =Google Maps
   ========================================================================== */

/**
	 * 1. needed so that Google Maps controls are not distorted
	 */

.google-map {
  width: 100%;
  height: 600px;
}

.google-map img {
  max-width: none;
} /* 1 */

.map {
  margin: 70px 0;
}

@media (max-width: 767px) {
  .map {
    padding: 0 20px;
  }
  .row .map {
    padding: 0;
  }
}

/* ==========================================================================
   =Headlines
   ========================================================================== */

.headline {
  margin-bottom: 60px;
}

.headline h3,
.headline h4 {
  line-height: 1;
}

.headline h5,
.headline h6 {
  color: #24bee8;
}

/* ==========================================================================
   =Icon Boxes
   ========================================================================== */

/* =Icon Box 1
   ========================================================================== */

.icon-box-1 {
  position: relative;
  margin-bottom: 60px;
}

.icon-box-1 > i {
  float: left;
  display: block;
  font-size: 32px;
  line-height: 32px;
  color: #24bee8;
}

.icon-box-1 > img {
  float: left;
  display: block;
}

.icon-box-content > a {
  font-size: 12px;
  text-transform: uppercase;
}

.icon-box-content h5 a {
  display: block;
  padding-top: 7px;
  margin-bottom: 20px;
  color: #101010;
}

.icon-box-1 .icon-box-content {
  margin-left: 62px;
}

/* ==========================================================================
   =Info Boxes
   ========================================================================== */

.info-box {
  position: relative;
  padding: 40px 30px 30px 120px;
  margin-bottom: 100px;
  background-color: #fafafa;
  color: #101010;
}

.info-box.alt {
  background-color: #101010;
  color: #fff;
}

.info-box span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 90px;
  background-color: #24bee8;
  color: #fff;
  font-size: 38px;
  text-align: center;
}

.info-box span i {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.info-box .btn-black {
  color: #101010 !important;
  background: transparent !important;
  float: right;
}

.fullwidth-section .info-box {
  margin-bottom: 0;
}

.info-box .btn-black:hover {
  color: #fff !important;
  background: #101010 !important;
}

@media (max-width: 767px) {
  .info-box .btn-black {
    float: none;
  }
}

/* ==========================================================================
   =Milestones
   ========================================================================== */

.milestone {
  position: relative;
  margin-bottom: 50px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

/*
	 * 1. Clearfix hack 
	 */
.milestone:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

.milestone i {
  float: none;
  display: inline-block;
  z-index: 2;
  margin-bottom: 40px;
  font-size: 50px;
}

.milestone .milestone-content span {
  font-size: 50px;
}

.milestone .milestone-value {
  display: inline-block;
  margin-bottom: 25px;
  font-size: 48px;
}

.milestone .milestone-content {
  float: none;
  z-index: 1;
  font-size: 14px;
  line-height: 32px;
}

.milestone .milestone-description {
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
}

/* ==========================================================================
   =Our Process
   ========================================================================== */

/* =Horizontal process
   ========================================================================== */

.horizontal-process-builder {
  position: relative;
  list-style: none;
  text-align: center;
}

.horizontal-process-builder:before {
  position: absolute;
  z-index: 1;
  top: 60px;
  left: 130px;
  display: block;
  width: 75%;
  border-top: 4px dotted #24bee8;
  content: "";
}

.horizontal-process-builder li {
  float: left;
  width: 25%;
}

.horizontal-process-builder li i,
.horizontal-process-builder li h1 {
  position: relative;
  z-index: 2;
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border: 1px solid #24bee8;
  border-radius: 50%;
  margin: 0 auto 40px;
  background-color: #fff;
  background-clip: padding-box;
  color: #24bee8;
  font-size: 24px;
  line-height: 120px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.horizontal-process-builder li:hover i,
.horizontal-process-builder li:hover h1 {
  width: 100px;
  height: 100px;
  margin: 10px auto 50px;
  background-color: #24bee8;
  color: #fff;
  line-height: 100px;
}

.horizontal-process-builder.three-items li {
  width: 33.3333333333%;
}
.horizontal-process-builder.four-items li {
  width: 25%;
}
.horizontal-process-builder.five-items li {
  width: 20%;
}

/*
	 * 1. Clearfix hack 
	 */
.horizontal-process-builder:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

.process-description h5 {
  color: #24bee8;
  letter-spacing: 2px;
}

@media (max-width: 767px) {
  .horizontal-process-builder li {
    float: none;
    width: 100%;
    margin-bottom: 40px;
  }

  .horizontal-process-builder:before {
    content: none;
  }

  .horizontal-process-builder.three-items li {
    width: 100%;
  }
  .horizontal-process-builder.four-items li {
    width: 100%;
  }
  .horizontal-process-builder.five-items li {
    width: 100%;
  }
}

/* ==========================================================================
   =Pie charts
   ========================================================================== */

.pie-chart {
  position: relative;
  margin: 0 auto 30px;
  text-align: center;
}

.pie-chart canvas {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.pie-chart i,
.pie-chart .pie-chart-custom-text,
.pie-chart .pie-chart-percent {
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
}

.pie-chart img {
  max-width: 100%;
  vertical-align: middle;
}

.pie-chart .pie-chart-custom-text {
  top: 35px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.pie-chart .pie-chart-percent {
  font-size: 48px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}

.pie-chart-description {
  display: block;
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   =Pricing Tables
   ========================================================================== */

.pricing-table {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 30px;
  text-align: center;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.pricing-table-header {
  font-family: "Montserrat", sans-serif;
}

.pricing-table-header h1 {
  padding: 40px 0;
  margin-bottom: 0;
  background-color: #24bee8;
  color: #fff;
  font-size: 60px;
  line-height: 1;
}

.pricing-table-header h1 sub {
  margin-bottom: 0;
  font-size: 18px;
  text-transform: none;
}

.pricing-table-header h4 {
  padding: 20px 0;
  margin-bottom: 0;
  background-color: #17acd4;
  color: #fff;
  font-size: 18px;
}

.pricing-table-offer {
  padding: 70px 40px;
  border: solid #ccc;
  border-width: 0 2px 2px 2px;
}

.pricing-table-offer ul {
  list-style: none;
}

.pricing-table-offer ul li {
  border-top: 2px solid #ccc;
  padding: 15px 0;
}

.pricing-table-offer ul li:first-child {
  border-top: none;
}

/* ==========================================================================
   =Progress Bar
   ========================================================================== */

.progress-bar-description {
  display: block;
  margin-bottom: 15px;
  font-family: "Montserrat", sans-serif;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.progress-bar {
  position: relative;
  display: block;
  height: 20px;
  margin-bottom: 15px;
  background-color: #f0f0f0;
}

.progress-bar .progress-bar-outer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #24bee8;
}

.progress-bar .progress-bar-outer .progress-bar-inner {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.progress-percentage {
  position: absolute;
  right: 0;
  top: -35px;
  font-weight: 700;
}

/* ==========================================================================
   =Revolution Slider
   ========================================================================== */

/* =Rev Slider Basics
   ========================================================================== */

.fullwidthbanner-container {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  padding: 0;
  margin: 0;
}

.fullwidthbanner-container ul {
  list-style: none;
}

.fullwidthbanner-container .fullwidthbanner {
  position: relative;
  width: 100% !important;
}

/**
 	 * 1. We apply the max-height using an extra class to make the transition to WP more easy
	 *    If we apply the max-heigh directly to .fullwidthbanner-container, in WP, it would overwrite the height setting you make in the plugin
 	 */

.slider-revolution.fullwidthbanner-container {
  max-height: 610px !important; /* 1 */
  margin-bottom: 100px;
}

.slider-revolution.fullwidthbanner-container .fullwidthbanner {
  max-height: 610px !important; /* 1 */
}

/* =Rev Slider Pager
   ========================================================================== */

/**
 	 * 1. changing the z-index from 1000 so that the bullets don't go over the sticky menu
 	 */

.tp-bullets {
  z-index: 100; /* 1 */
}

.tp-bullets.simplebullets.round .bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 3px;
  background: #ccc;
}

.tp-bullets.simplebullets.round .bullet.selected {
  background: #24bee8;
}

/* =Rev Slider navigation
   ========================================================================== */

.tp-leftarrow.default,
.tp-rightarrow.default {
  width: 60px;
  height: 60px;
  opacity: 0.5;
}

.tp-leftarrow.default:hover,
.tp-rightarrow.default:hover {
  opacity: 1;
}

.tp-leftarrow.default {
  background: #111 url(../images/left.png) no-repeat center center;
}
.tp-rightarrow.default {
  background: #111 url(../images/right.png) no-repeat center center;
}

@media (min-width: 768px) and (max-width: 991px) {
  .tp-leftarrow.default,
  .tp-rightarrow.default {
    display: none;
  }
}

@media (max-width: 767px) {
  .tp-leftarrow.default,
  .tp-rightarrow.default {
    display: none;
  }

  .tp-bullets {
    bottom: 20px !important;
  }
}

/* =Rev Slider customization
   ========================================================================== */

.background-blue {
  width: 810px;
  height: 300px;
  max-width: 100% !important;
  background-color: #24bee8;
}

.background-blue-inner-1 {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.background-blue-inner-2 {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.revolution-style-custom-1 {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.revolution-style-custom-2 {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 7px;
  text-transform: uppercase;
}

.rounded {
  border-radius: 50%;
  text-align: center;
}

.rounded h4,
.rounded h5,
.rounded h3 {
  color: #fff;
}

.background-light-blue {
  width: 118px;
  height: 118px;
  background-color: #8be6ff;
}

.btn-blue {
  border: 1px solid #fff;
}

.background-light-blue h5,
.background-dark-blue h5,
.background-medium-blue h4 {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.background-dark-blue {
  width: 118px;
  height: 118px;
  background-color: #00b3e4;
}

.background-medium-blue {
  width: 210px;
  height: 210px;
  background-color: #5bdafd;
}

.revolution-style-custom h5,
.revolution-style-custom h2 {
  color: #fff;
  letter-spacing: 2px;
}

.btn-black-background {
  background-color: #101010;
  color: #fff;
}

a.btn-black-background {
  color: #fff;
}
.btn-black-background:hover {
  background: #17acd4;
}

@media (min-width: 768px) and (max-width: 991px) {
  .background-blue {
    width: 560px;
    height: 200px;
  }

  .tp-caption .btn {
    padding: 5px 10px;
  }
}

@media (max-width: 767px) {
  .background-blue {
    width: 300px;
    height: 120px;
  }

  .tp-caption .btn {
    padding: 3px 6px;
    font-size: 6px;
  }
}

@media (max-width: 480px) {
  .background-blue {
    width: 200px;
    height: 90px;
  }

  .tp-caption .btn {
    padding: 1px 2px;
    font-size: 6px;
  }
}

/* ==========================================================================
   =Social Media
   ========================================================================== */

a.social-icon {
  float: left;
  display: block;
  width: 30px;
  margin-right: 1px;
  margin-bottom: 1px;
  color: #444;
  text-align: center;
}

a.social-icon:last-child {
  margin-right: 0;
}

a.social-icon i {
  font-size: 24px;
  line-height: 30px;
}

a.social-icon:hover {
  text-decoration: none;
}

a.facebook-icon:hover {
  color: #0e59a0 !important;
}
a.twitter-icon:hover {
  color: #0ea4ff !important;
}
a.dribble-icon:hover {
  color: #ea73a0 !important;
}
a.pinterest-icon:hover {
  color: #d73532 !important;
}
a.google-plus-icon:hover {
  color: #282927 !important;
}
a.tumblr-icon:hover {
  color: #586980 !important;
}
a.instagram-icon:hover {
  color: #82685a !important;
}
a.rss-icon:hover {
  color: #f79638 !important;
}
a.linkedin-icon:hover {
  color: #018faf !important;
}
a.skype-icon:hover {
  color: #00b0f6 !important;
}
a.flickr-icon:hover {
  color: #0061db !important;
}
a.vimeo-icon:hover {
  color: #63879c !important;
}
a.github-icon:hover {
  color: #3b3b3b !important;
}
a.youtube-icon:hover {
  color: #cc181e !important;
}
a.windows-icon:hover {
  color: #6dc2e9 !important;
}
a.dropbox-icon:hover {
  color: #007ee5 !important;
}
a.xing-icon:hover {
  color: #026566 !important;
}
a.adn-icon:hover {
  color: #1ea076 !important;
}
a.android-icon:hover {
  color: #98cb02 !important;
}
a.apple-icon:hover {
  color: #000000 !important;
}
a.behance-icon:hover {
  color: #2d9ad2 !important;
}
a.bitbucket-icon:hover {
  color: #214f81 !important;
}
a.bitcoin-icon:hover {
  color: #f7931b !important;
}
a.codepan-icon:hover {
  color: #000000 !important;
}
a.css3-icon:hover {
  color: #3289ce !important;
}
a.delicious-icon:hover {
  color: #3399fe !important;
}
a.deviantart-icon:hover {
  color: #c8da30 !important;
}
a.digg-icon:hover {
  color: #0080c2 !important;
}
a.drupal-icon:hover {
  color: #0077b9 !important;
}
a.empire-icon:hover {
  color: #000000 !important;
}
a.foursquare-icon:hover {
  color: #daecb0 !important;
}
a.git-icon:hover {
  color: #f34f29 !important;
}
a.gitti-icon:hover {
  color: #634c3e !important;
}
a.hacker-news-icon:hover {
  color: #f18642 !important;
}
a.html5-icon:hover {
  color: #e54c1f !important;
}
a.joomla-icon:hover {
  color: #016fb9 !important;
}
a.jsfiddle-icon:hover {
  color: #4679a4 !important;
}
a.linux-icon:hover {
  color: #fece0e !important;
}
a.maxcdn-icon:hover {
  color: #f36f20 !important;
}
a.openid-icon:hover {
  color: #fe6101 !important;
}
a.pagelines-icon:hover {
  color: #3783e3 !important;
}
a.pied-piper-icon:hover {
  color: #0c7b48 !important;
}
a.qq-icon:hover {
  color: #23286c !important;
}
a.rebel-icon:hover {
  color: #000000 !important;
}
a.reddit-icon:hover {
  color: #cee3f8 !important;
}
a.renren-icon:hover {
  color: #0d81e4 !important;
}
a.share-icon:hover {
  color: #252525 !important;
}
a.slack-icon:hover {
  color: #453744 !important;
}
a.soundcloud-icon:hover {
  color: #fe4e00 !important;
}
a.spotify-icon:hover {
  color: #80bb41 !important;
}
a.stack-exchange-icon:hover {
  color: #265a93 !important;
}
a.stackoverflow-icon:hover {
  color: #fea501 !important;
}
a.steam-icon:hover {
  color: #191919 !important;
}
a.stumbleupon-icon:hover {
  color: #f04f23 !important;
}
a.tencent-weibo-icon:hover {
  color: #0063a7 !important;
}
a.trello-icon:hover {
  color: #226784 !important;
}
a.vine-icon:hover {
  color: #00b081 !important;
}
a.vk-icon:hover {
  color: #50769d !important;
}
a.wechat-icon:hover {
  color: #a4dc31 !important;
}
a.weibo-icon:hover {
  color: #d82828 !important;
}
a.wordpress-icon:hover {
  color: #454442 !important;
}
a.yahoo-icon:hover {
  color: #4b04a8 !important;
}

/* ==========================================================================
   =Tabs
   ========================================================================== */

/* =Horizontal tabs
   ========================================================================== */

/*
    *  1. Wraps around a horizontal tab group
	*/

.tabs-container {
} /* 1 */

.tabs-container .tabs-menu {
  border-bottom: 1px solid #cccccc;
  margin-top: 10px;
  margin-bottom: 0;
  list-style: none;
}

.tabs-container .tabs-menu li {
  display: inline;
}

.tabs-container .tabs-menu li a {
  float: left;
  display: block;
  padding: 18px 25px;
  border: 1px solid #cccccc;
  border-left: none;
  margin-bottom: -1px;
  background-color: #fff;
  color: #373f48;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  text-decoration: none;
}

.tabs-container .tabs-menu li a:hover {
  text-decoration: none;
}

.tabs-container .tabs-menu li:first-child a {
  border-left: 1px solid #e0e0e0;
}

.tabs-container .tabs-menu li.active a {
  padding-top: 22px;
  border-left: 1px solid #24bee8;
  border-color: #24bee8;
  margin-top: -4px;
  background-color: #24bee8;
  color: #fff;
}

.tabs-container .tabs {
  border: 1px solid #e0e0e0;
  border-top: none;
  margin-bottom: 30px;
}

.tabs-container .tab-content {
  padding: 27px 25px;
}

.inside-tab-image {
  float: left;
  display: block;
  margin-right: 15px;
}

/*
	 * 1. Clearfix hack 
	 */
.tabs-container .tabs-menu:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

/* =Vertical tabs
   ========================================================================== */

.vertical-tabs-container {
  position: relative;
  border: 1px solid #e0e0e0;
  background-color: #f3f3f3;
}

.vertical-tabs-container .tabs-menu {
  float: left;
  width: 179px;
  border-right: 1px solid #e0e0e0;
  margin-bottom: 0;
  list-style: none;
}

.vertical-tabs-container .tabs-menu li a {
  display: block;
  padding: 15px 25px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin-right: -1px;
  background-color: #f3f3f3;
  color: #444;
  text-decoration: none;
}

.vertical-tabs-container .tabs-menu li.active a {
  border-right-color: #fff;
  background-color: #fff;
}

.vertical-tabs-container .tabs {
  margin-left: 180px;
  background-color: #fff;
}

.vertical-tabs-container .tab-content {
  padding: 25px;
}

@media (max-width: 767px) {
  .tabs-container .tabs-menu {
    border-bottom: none;
  }

  .tabs-container .tabs-menu li {
    display: block;
  }

  .tabs-container .tabs-menu li a {
    float: none;
    display: block;
    padding: 20px 25px;
    border: 1px solid #e0e0e0;
    border-top: none;
    margin: 0;
  }

  .tabs-container .tabs-menu li a:hover {
    text-decoration: none;
  }

  .tabs-container .tabs-menu li:first-child a {
    border-top: 1px solid #e0e0e0;
  }

  .tabs-container .tabs-menu li.active a {
    padding: 20px 25px;
    border-bottom-color: #bbb;
    margin: 0;
    background-color: #fff;
    color: #111;
  }

  .vertical-tabs-container .tabs-menu {
    float: none;
    width: 100%;
  }

  .vertical-tabs-container .tabs {
    margin-left: 0;
  }

  .vertical-tabs-container .tabs-menu li a {
    padding: 20px 25px;
    border-right: none;
    margin-right: 0;
  }

  .vertical-tabs-container .tabs-menu li.active a {
    border-bottom-color: #bbb;
  }
}

/* ==========================================================================
   =Testimonials
   ========================================================================== */

.testimonial {
  padding-bottom: 60px;
  margin: 60px 0 30px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #101010;
}

.testimonial blockquote {
  position: relative;
  margin: 40px 150px;
}

.testimonial blockquote p {
  margin-bottom: 0;
  font-style: normal;
}

.testimonial img {
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.testimonial h5 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.testimonial a {
}

.testimonial h5 span {
  display: block;
  color: #24bee8;
  font-family: "Open Sans", sans-serif;
  text-transform: none;
}

/*
	 * 1. Clearfix hack 
	 */
.testimonial:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

@media (min-width: 768px) and (max-width: 991px) {
  .testimonial blockquote {
    margin: 40px 70px;
  }
}

@media (max-width: 767px) {
  .testimonial blockquote {
    margin: 40px 20px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .testimonial blockquote {
    margin: 40px 10px;
  }
}

/* ==========================================================================
   =Team Member
   ========================================================================== */

.team-member {
  margin: 30px 0;
  text-align: center;
}

.team-member-item {
}

.team-member-item-preview {
  position: relative;
}

.team-member img {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}

.team-member-item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(245, 227, 148, 0.85);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.team-member-item-overlay:hover {
  opacity: 1;
}

.team-member h5 {
  margin-bottom: 10px;
}

.team-member p {
  color: #24bee8;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}

.team-member-item-description {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -30px;
  text-align: center;
}

.team-member .social-media a.social-icon {
  float: none;
  display: inline-block;
  color: #fff;
}

.team-member .social-media a.social-icon i {
  font-size: 24px;
}

/* ==========================================================================
   =Portfolio Item
   ========================================================================== */

.portfolio-item {
  position: relative;
  margin-bottom: 30px;
}

.portfolio-item-preview {
  position: relative;
}

.portfolio-item-preview > img {
  display: block;
  width: 100%;
}

.portfolio-item-preview.round-shape > img,
.portfolio-item-preview.round-shape .portfolio-item-overlay {
  border-radius: 50%;
}

.portfolio-item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(36, 190, 232, 0.85);
  opacity: 0;
}

.portfolio-item-overlay:hover {
  opacity: 1;
}

.portfolio-item-overlay-actions {
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: -30px;
  text-align: center;
}

.portfolio-item-overlay-actions .portfolio-item-zoom,
.portfolio-item-overlay-actions .portfolio-item-link {
  display: inline-block;
  padding: 10px;
  margin: 0 5px;
}

.portfolio-item-overlay-actions .portfolio-item-zoom i,
.portfolio-item-overlay-actions .portfolio-item-link i {
  color: #fff;
  font-size: 20px;
  line-height: 40px;
}

.portfolio-item-overlay .portfolio-item-description {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
}

.portfolio-item-overlay .portfolio-item-description h5,
.portfolio-item-overlay .portfolio-item-description h4 a {
  color: #fff;
}

/* ==========================================================================
   =Portfolio Filter
   ========================================================================== */

.portfolio-filter ul {
  margin: 10px auto 90px;
  list-style: none;
  text-align: center;
}

.portfolio-filter ul li {
  display: inline-block;
  margin-right: 20px;
}

.portfolio-filter ul li:last-child {
  margin-right: 0;
}

.portfolio-filter ul li a {
  color: #101010;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

.portfolio-filter ul li a:hover,
.portfolio-filter ul li a.active {
  color: #24bee8;
}

.load-more {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .portfolio-filter ul li {
    display: block;
    margin-right: 0;
  }
}

/* ==========================================================================
   =Portfolio Pagination
   ========================================================================== */

.portfolio-pagination {
  margin: 110px 0;
}

/*
	 * 1. Clearfix hack 
	 */
.portfolio-pagination:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

.portfolio-pagination .nav-links {
  position: relative;
  text-align: center;
}

.portfolio-pagination .page-numbers {
  padding: 15px;
  background-color: #ccc;
  font-family: "Montserrat", sans-serif;
  line-height: 48px;
}

.portfolio-pagination .page-numbers.current {
  text-transform: uppercase;
}

.portfolio-pagination .current {
  background-color: #24bee8;
  color: #fff;
}

.portfolio-pagination .prev,
.portfolio-pagination .next {
  position: absolute;
  display: inline-block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background-color: #ccc;
  color: #fff;
  padding: 0;
}

.portfolio-pagination .prev:before,
.portfolio-pagination .next:before {
  position: relative;
  width: 48px;
  height: 48px;
  font-family: "FontAwesome";
  font-size: 14px;
  line-height: 48px;
  text-align: center;
}

.portfolio-pagination .prev:hover,
.portfolio-pagination .prev:focus,
.portfolio-pagination .next:hover,
.portfolio-pagination .next:focus {
}

.portfolio-pagination .prev {
  left: 0;
}

.portfolio-pagination .prev:before {
  left: -5px;
  content: "\f060";
}

.portfolio-pagination .next {
  right: 0;
}

.portfolio-pagination .next:before {
  right: 5px;
  content: "\f061";
}

/* ==========================================================================
   =Portfolio Grid
   ========================================================================== */

.portfolio-grid {
  margin: 0 -15px 90px;
  list-style: none;
}

.portfolio-grid.gutter {
  margin: -15px -15px 60px -15px;
}

.portfolio-grid .item {
  float: left;
  width: 33.33333%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.portfolio-grid.gutter .item {
  padding: 15px;
}

.portfolio-grid .portfolio-item {
  margin-bottom: 0;
}

.portfolio-grid.three-cols .item {
  width: 33.33333%;
}
.portfolio-grid.four-cols .item {
  width: 25%;
}
.portfolio-grid.five-cols .item {
  width: 25%;
}

/*
	 * 1. Clearfix hack 
	 */
.portfolio-grid:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

@media (min-width: 1200px) {
  .portfolio-grid.five-cols .item {
    width: 20%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .portfolio-grid.four-cols .item,
  .portfolio-grid.five-cols .item {
    width: 33.33333%;
  }
}

@media (max-width: 767px) {
  .portfolio-grid .item {
    float: none;
    width: 100%;
  }

  .portfolio-grid.three-cols .item,
  .portfolio-grid.four-cols .item,
  .portfolio-grid.five-cols .item {
    width: 100%;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .portfolio-grid .item {
    float: left;
    width: 50%;
  }

  .portfolio-grid.three-cols .item,
  .portfolio-grid.four-cols .item,
  .portfolio-grid.five-cols .item {
    width: 50%;
  }
}

/* ==========================================================================
   =Portfolio Strip
   ========================================================================== */

.portfolio-strip {
  margin: 50px 0 110px;
  list-style: none;
}

.portfolio-strip .item {
  float: left;
  width: 25%;
}

.portfolio-strip .portfolio-item {
  margin-bottom: 0;
}

/*
	 * 1. Clearfix hack 
	 */
.portfolio-strip:after {
  /* 1 */
  visibility: hidden;
  display: block;
  height: 0;
  font-size: 0;
  content: " ";
  clear: both;
}

@media (min-width: 1200px) {
  .portfolio-strip .item {
    width: 25%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .portfolio-strip .item {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .portfolio-strip .item {
    float: none;
    width: 100%;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .portfolio-strip .item {
    float: left;
    width: 50%;
  }
}

/* ==========================================================================
   =Timeline
========================================================================== */

.timeline {
  background: url(../../content/background/bg-timeline.jpg) no-repeat bottom
    right;
}

.timeline:before {
  position: absolute;
  top: 110px;
  bottom: 110px;
  left: 50%;
  height: 92%;
  border-left: 1px solid #d6d6d6;
  content: "";
}

.timeline .headline {
  margin-bottom: 40px;
}

.timeline div:first-child {
  margin-top: 0;
}

.timeline div:hover {
  background-color: #fff;
}

.left-side {
  float: left;
  width: 49%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 45px 15px;
  margin-top: 70px;
  text-align: center;
}

.right-side {
  float: right;
  width: 49%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 45px 15px;
  margin-top: 70px;
  text-align: center;
}

.timeline .right-side.first {
  margin-top: 130px;
}

.left-side p:first-child,
.right-side p:first-child {
  display: inline-block;
  width: 60px;
  height: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 10px solid #eee;
  border-radius: 50%;
  color: #fff;
  background-color: #24bee8;
  line-height: 38px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.left-side:hover p:first-child,
.right-side:hover p:first-child {
  border: 20px solid #24bee8;
  background-color: #eee;
  color: #101010;
  line-height: 18px;
}

@media (max-width: 767px) {
  .timeline {
    background: none;
  }

  .timeline:before {
    border-left: 0;
  }

  .left-side,
  .right-side {
    float: none;
    width: 100%;
  }

  .timeline .right-side.first {
    margin-top: 70px;
  }
}

/* ==========================================================================
   =Bx Slider
   ========================================================================== */

/* =Bx Slider reset
   ========================================================================== */

.bx-wrapper {
  margin: 0 auto 80px;
}

.slides {
  list-style: none;
}

/* =Bx Slider theme
   ========================================================================== */

.bx-wrapper .bx-viewport {
  left: auto;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: none;
}

/* =Bx Slider Pager
   ========================================================================== */

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  bottom: 20px;
}

.aboutus-slider .bx-wrapper .bx-pager,
.aboutus-slider .bx-wrapper .bx-controls-auto {
  bottom: -70px;
}

.testimonial-slider .bx-wrapper .bx-pager,
.testimonial-slider .bx-wrapper .bx-controls-auto {
  bottom: 60px;
}

/* =Bx Slider Dir Nav
   ========================================================================== */

.bx-wrapper .bx-prev {
  left: 0;
  background: #111 url(../images/left.png) no-repeat center center;
}

.bx-wrapper .bx-next {
  right: 0;
  background: #111 url(../images/right.png) no-repeat center center;
}

.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-next:hover {
  background-position: center center;
}

.bx-wrapper .bx-controls-direction a {
  width: 48px;
  height: 48px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 0 5px;
  background: none repeat scroll 0 0 #ccc;
  outline: 0 none;
  text-indent: -9999px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #24bee8 none repeat scroll 0 0;
}

@media (max-width: 767px) {
  .bx-wrapper .bx-pager,
  .bx-wrapper .bx-controls-auto {
    bottom: 0;
  }

  .bx-wrapper .bx-controls-direction a {
    display: none;
  }
}

/* ==========================================================================
   =Fullwidth Section
   ========================================================================== */

.fullwidth-section.custom-color-selected a,
.fullwidth-section.custom-color-selected .accordion-item::after,
.fullwidth-section.custom-color-selected .toggle-item::after,
.fullwidth-section.custom-color-selected .icon-box-1 > i,
.fullwidth-section.custom-color-selected .process-description h5,
.fullwidth-section.custom-color-selected blockquote::before,
.fullwidth-section.custom-color-selected .testimonial h5 span,
.fullwidth-section.custom-color-selected .team-member p,
.fullwidth-section.custom-color-selected ul.check li:before,
.fullwidth-section.custom-color-selected ul.plus li:before,
.fullwidth-section.custom-color-selected ul.pin li:before,
.fullwidth-section.custom-color-selected .widget_recent_entries ul li a:hover,
.fullwidth-section.custom-color-selected
  .widget_recent_entries
  ul
  li
  .post-date,
.fullwidth-section.custom-color-selected .ewf_widget_latest_posts .post-date,
.fullwidth-section.custom-color-selected .byline,
.fullwidth-section.custom-color-selected .widget_nav_menu .menu a,
.fullwidth-section.custom-color-selected .widget_search #s,
.fullwidth-section.custom-color-selected
  #newsletter-subscribe-form
  input[type="text"],
.fullwidth-section.custom-color-selected .posted-on {
  color: inherit;
}

.fullwidth-section.custom-color-selected .accordion-item:hover,
.fullwidth-section.custom-color-selected .accordion-item.active,
.fullwidth-section.custom-color-selected .toggle-item:hover,
.fullwidth-section.custom-color-selected .toggle-item.active,
.fullwidth-section.custom-color-selected .divider.single-line,
.fullwidth-section.custom-color-selected .divider.double-line,
.fullwidth-section.custom-color-selected .horizontal-process-builder:before,
.fullwidth-section.custom-color-selected .pricing-table-offer,
.fullwidth-section.custom-color-selected .pricing-table-offer ul li,
.fullwidth-section.custom-color-selected .testimonial,
.fullwidth-section.custom-color-selected .widget_search #s,
.fullwidth-section.custom-color-selected .widget_pages ul li,
.fullwidth-section.custom-color-selected
  #newsletter-subscribe-form
  input[type="text"],
.fullwidth-section.custom-color-selected .ewf_widget_navigation li,
.fullwidth-section.custom-color-selected .comment-meta {
  border-color: inherit;
}

.fullwidth-section.custom-color-selected .accordion-item:hover,
.fullwidth-section.custom-color-selected .accordion-item.active,
.fullwidth-section.custom-color-selected .toggle-item:hover,
.fullwidth-section.custom-color-selected .toggle-item.active {
  background-color: inherit;
}

.fullwidth-section.custom-color-selected .widget_tag_cloud a,
.fullwidth-section.custom-color-selected .portfolio-pagination .page-numbers,
.fullwidth-section.custom-color-selected .pagination .page-numbers {
  color: #fff;
}