/* ===================================
    Font family
====================================== */

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

.alt-font {    font-family: 'Roboto', sans-serif;}
.main-font {    font-family: 'Poppins', sans-serif;}

a{outline: none; text-decoration: none;}
a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none;text-decoration: none; }
.pt-180 {padding-top: 180px;}
.pb-60 {padding-bottom: 60px!important;}
.theme-dark {color: #484b59;}
.bg-drk {background-color: #484b59 !important;}
.drk-blu {
    color: #0284d0;}
.light-blu {color: #39c5de;}


/* ===================================
    Custom
====================================== */
.center-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/* ===================================
               revicon
====================================== */
.revicon {
  top: 50%;
  position: absolute;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 40px;
  z-index: 11;
}
/* ===================================
             rev bullets
====================================== */
.hermes.tp-bullets {
  height: auto !important;
  width: auto !important;
  text-align: center;
  display: inline-block;
  position: relative;
}
.hermes .tp-bullet {
  position: relative;
  display: contents;
  background: transparent;
  cursor: pointer;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
#hermes .tp-bullet .tp-bullet-inner { /*bille droite */
  width: 18px;
  height: 18px;
  position: relative;
  border: 4px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.hermes .tp-bullet.selected .tp-bullet-inner {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  background: transparent;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.hermes .tp-bullet .tp-bullet-inner::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  background: #24ccd5;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  display: none;
}
.hermes .tp-bullet.selected .tp-bullet-inner::before {
  opacity: 1;
  visibility: visible;
  display: block;
}
.hermes .tp-bullet:not(:last-child) .tp-line {
  height: 20px;
  -webkit-transform: scaleY(1.4);
  -ms-transform: scaleY(1.4);
  transform: scaleY(1.4);
  width: 3px;
  background: #fff;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}
/* ===================================
             feature box
====================================== */
.feature-icon {
  font-size: 40px;
  margin-bottom: 20px;
  max-width: 30px;
  margin-left: auto;
  margin-right: auto;
}
.feature-content {
  position: relative;
  top: -120px;
  margin-bottom: -160px;
}
.feature-content .feature-col {
  color: #fff;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;
  -ms-flex-align: center !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  min-height: 240px;
  vertical-align: middle;
}
.feature-content .feature-col-1 {
  color: #39C5DE;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;
  -ms-flex-align: center !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  min-height: 240px;
  vertical-align: middle;
}
.feature-content .feature-col-2 {
  color: #0284d0;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;
  -ms-flex-align: center !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  min-height: 240px;
  vertical-align: middle;
}
.feature-content .feature-col-3 {
  color: #484b59;
  display: -ms-flexbox !important;
  display: -webkit-box !important;
  display: flex !important;
  -ms-flex-align: center !important;
  -webkit-box-align: center !important;
  align-items: center !important;
  min-height: 240px;
  vertical-align: middle;
}
.feature-content .feature-col-1 > .box {
  padding: 0 20px;
  vertical-align: middle;
  width: 100%;
  min-height: 340px;
}
.feature-content .feature-col-2 > .box {
  padding: 0 20px;
  vertical-align: middle;
  width: 100%;
  min-height: 340px;
}
.feature-content .feature-col-3 > .box {
  padding: 0 20px;
  vertical-align: middle;
  width: 100%;
  min-height: 340px;
}
.back:hover {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .12);
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
/*.flip-box {margin: 0px 15px 0px 15px;}*/
.feature-content .feature-col-1.one-1 {
  background: #ffffff;
}
.feature-content .feature-col-2.two-2 {
  background: #ffffff;
}
.feature-content .feature-col-3.three-3 {
  background: #ffffff;
}
.feature-content .feature-col.one {
  background: #ed8e6e;
}
.feature-content .feature-col.two {
  background: #ffce99;
}
.feature-content .feature-col.three {
  background: #7b9c96;
}
.feature-content .feature-col > .box {
  padding: 0 20px;
  vertical-align: middle;
  width: 100%;
  min-height: 340px;
}
.mb-10px {
  margin-bottom: 10px;
}
.mb-30px {
  margin-bottom: 30px;
}
.mb-35px {
  margin-bottom: 35px;
}
/* features */
.feature-item {
  display: table;
  margin: 30px 0 0;
  max-width: 450px;
  text-align: left;
}
.feature-item .icon {
  text-align: center;
  position: relative;
  z-index: 1;
  font-size: 40px;
}
.laptop-features-icon {
  display: table-cell;
  vertical-align: top;
  width: 41px;
  -webkit-transition: all 1.2s;
  -o-transition: all 1.2s;
  transition: all 1.2s;
}
.features-content {
  display: table-cell;
  padding-left: 15px;
}
/* features 2 Boxes with image Section */
.blog-three-block {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.features-one {
  text-align: center;
  height: 100%;
  width: 100%;
  padding: 78px 45px;
  z-index: 0;
  position: relative;
  background: #ffffff;
  color: #2b2b2b;
}
.features-one i {
  font-size: 40px;
  width: 43px;
  height: 34px;
  display: inline-block;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.features-one:hover i {
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
}
.features-one h5 {
  margin: 20px 0 14px;
}
.time-line {
  height: 2px;
  width: 40px;
  background-color: #4997e4;
  display: inline-block;
}