/*
	01 . General CSS
	02 . preloader
	03 . Navigation 
	04 . home
	05 . features
	06 . images-text
	07 . download
	08 . screenshots
*/
/* 01 . General CSS Starts */
body {
  font-family: "Poppins", sans-serif;
  padding: 0px;
  margin: 0px;
  color: #3b4650;
}

p {
  font-size: 14px;
  line-height: 30px;
  font-family: "Poppins", sans-serif;
}

h2.title {
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0;
  color: #233140;
  margin-bottom: 50px;
}

* a {
  text-decoration: none;
}
@media only screen and (max-width: 992px) {
  .container {
    padding: 24px;
  }
}
* a:hover,
* a:focus {
  text-decoration: none;
}

.bg-layer {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: linear-gradient(to left, #4099ff, #6e7ff3);
}

.bg-layer-2 {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(59, 70, 80, 0.8);
}
.bg-layer-2 + div,
.bg-layer + div{
  z-index: 5;
  position: relative;
}
.typed-cursor {
  color: #4488e0;
  font-weight: lighter;
}

.typing {
  font-size: 44px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}

.typed-cursor {
  opacity: 0;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.mt10 {
  margin-top: 10px;
}

/* 01 . General CSS end */
/* 03 . Navigation start */
.navbar-nav > li > a {
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  color: #fff;
  text-transform: capitalize;
}

.navbar-nav > li > a:hover {
  color: #1abc9c;
}

.navbar.top-nav-collapse {
  background-color: transparent !important;
  padding: 25px 0 !important;
}

.navbar.default {
  top: 0;
  background-color: rgba(59, 70, 80, 1);
  padding: 10px 0;
}

.btn-nav {
  padding-top: 22px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.navbar-btn {
  margin-top: 0;
}

.navbar {
  padding: 25px 0;
  position: fixed;
  width: 100%;
  z-index: 999;
  margin-bottom: 0;
  transition: all linear 0.3s;
  top: -120px;
}
.navbar ul {
  font-size: 14px;
  font-weight: 300;
}
.navbar-brand {
  padding: 10px 15px;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background-color: #fff;
}

.navbar-toggle .icon-bar {
  height: 1px;
}

.navbar-toggle span {
  background-color: #fff;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background-color: transparent;
}

.navbar-nav > li:hover:before,
.navbar-nav > li:focus:before,
.navbar-nav > .active:before {
  right: 15px;
}

@keyframes rollbg {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1900px;
  }
}

header {
  background-image: url(../images/home-bg.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  animation: rollbg 30s linear infinite;
  background-repeat: repeat-x;
  height: 100vh;
  min-height: 100vh;
  position: relative;
}
header > * {
  position: relative;
  z-index: 5;
}
header h1 {
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
}

header p {
  color: #fff;
  margin-top: 50px;
}

section {
  padding: 50px 0;
}

.btn-buy,
.btn-preview {
  padding: 10px 15px;
}

.btn-buy {
  background-color: #f44336;
  border-color: #f44336;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.btn-preview {
  background-color: #4caf50;
  border-color: #4caf50;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.btn-buy:hover,
.btn-buy:focus {
  background-color: transparent;
  border-color: #000;
  color: #000;
}

.btn-preview:hover,
.btn-preview:focus {
  background-color: #000;
  border-color: #000;
}

/* 03 . Navigation End */
/* 04 . home start */
.home-screens img {
  position: absolute;
}

.home-screens img:first-child {
  z-index: 3;
  -webkit-animation: screen-animate 6s ease-in-out infinite;
  animation: screen-animate 6s ease-in-out infinite;
}

.home-screens img:nth-child(2) {
  z-index: 2;
  left: 220px;
  top: -50px;
  -webkit-animation: screen-animate-hor 6s ease-in-out infinite;
  animation: screen-animate-hor 6s ease-in-out infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.home-screens img:nth-child(3) {
  z-index: 1;
  left: 430px;
  -webkit-animation: screen-animate 6s ease-in-out infinite;
  animation: screen-animate 6s ease-in-out infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

@-webkit-keyframes screen-animate {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
}

@keyframes screen-animate {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
}

@-webkit-keyframes screen-animate-hor {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10% {
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
}

@keyframes screen-animate-hor {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10% {
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
}

.premium {
  color: #1b8bf9;
}

.screen {
  margin-top: 30px;
}

.feature-head {
  position: relative;
}

.feature-head h3 {
  margin-bottom: 10px;
  margin-top: 0;
  font-weight: 600;
}

.feature-head h4 {
  color: #4099ff;
  font-size: 16px;
  position: relative;
  margin-bottom: 30px;
}

.feature-head h4:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 80px;
  background-color: #e4e3e3;
  left: 0;
  top: 30px;
}

.head-features {
  background: #f9f9f9;
}

/* 04 . home end */
/* 05. version start */
.version p {
  padding: 0 170px;
  margin-bottom: 40px;
}

.version-img {
  margin-top: 15px;
}

.version-img h5 a {
  color: #233140;
  margin-top: 10px;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 18px;
}

.version-img h5 {
  text-align: center;
  font-size: 18px;
  line-height: 22px;
  padding: 0;
}

.btn-light,
.btn-dark,
.btn-rtl,
.btn-angular,
.btn-boxed {
  transition: all 0.3s;
  width: 60px;
  border-color: transparent;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.btn-layout {
  margin-top: 20px;
  margin-bottom: 50px;
}

.btn-light {
  background-color: #1abc9c;
  color: #fff;
}

.btn-light:hover,
.btn-light:active,
.btn-light:focus {
  background-color: #d8d8d8;
  color: #000;
}

.btn-angular {
  background: linear-gradient(to left, #ff7a81, #de2e31);
  color: #fff;
}

.btn-dark {
  background: linear-gradient(to left, #4099ff, #6e7ff3);
  color: #fff;
}

.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus {
  background-color: #2d2d2d;
  color: #fff;
}

.btn-rtl {
  background-color: #bdc3c7;
  color: #fff;
}

.btn-rtl:hover,
.btn-rtl:active,
.btn-rtl:focus {
  background-color: #d66e04;
  color: #fff;
}

.btn-boxed {
  background-color: #3498db;
  color: #fff;
}

.btn-boxed:hover,
.btn-boxed:active,
.btn-boxed:focus {
  background-color: #3a853d;
  color: #fff;
}

.btn-mobile {
  display: none;
}

.demos_box h3 {
  color: #1abc9c;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.btn-outline {
  background-color: transparent !important;
  margin-right: 20px;
}

.btn-buy-mobile {
  padding: 10px 15px;
  background-color: #e74c3c;
  border-color: #000;
  color: #fff;
  transition: all 0.5s;
  border: 1px solid #e74c3c;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.btn-buy-mobile:hover {
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
}

.btn-preview-mobile {
  padding: 8px 16px;
  background-color: #4caf50;
  border-color: #4caf50;
  color: #fff;
  transition: all 0.5s;
  border: 1px solid #4caf50;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  cursor: pointer;
}

.btn-preview-mobile:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* effect hover start */
.ehover1 img {
  transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.ehover1 .overlay {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.ehover1 a.info {
  opacity: 0;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* effect hover end */
/* 05. version end */
/* 06. features start */
.features,
.client {
  background: #f3f3f3;
}

.features p {
  padding: 0 170px;
  margin-top: 10px;
}

.features-img {
  margin-top: 15px;
}

.m-b-40 {
  margin-bottom: 40px;
}

/* .features-img img{
		width: 60px;
		height: 60px;
		margin:0 auto;
		border-radius: 50%;
	} */
.features h2 {
  margin-top: 50px;
}

.features-img span {
  display: block;
  margin: 0 auto;
}

.features-img p {
  text-align: center;
  font-size: 14px;
  line-height: 26px;
  padding: 0 40px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.features-img p:hover {
  color: #4488e0;
}

.features-img h5 {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-top: 25px;
}

.arrow_box {
  position: relative;
  background: #f44336;
  color: #fff;
  display: inline-block;
  left: 220px;
  padding: 0 8px;
  border-radius: 5px;
  top: 16px;
}

.arrow_box:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(213, 213, 213, 0);
  border-top-color: #f44336;
  border-width: 7px;
  margin-left: -7px;
}

/*buy now start*/
.buy-text {
  color: #fff;
  font-weight: 300;
}

.buy-text ~ p {
  color: #fff;
  opacity: 0.6;
}

.call-to-action {
  text-align: right;
}

.buy-now span {
  color: #fff;
  font-size: 25px;
}
.btn-buy {
  background: linear-gradient(to right, #11c788, #54e2b7) !important ;
}
.buy-now .btn-buy {
  background-color: #1abc9c;
  color: #fff;
  padding: 20px 50px;
  font-size: 22px;
  border-color: #1abc9c;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.buy-now .btn-buy:hover {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

/*buy now end*/
/* 06. features end */
/* 07. client start */
.client-box {
  padding: 20px;
  border: 1px solid #ccc;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  margin-bottom: 10px;
}

.client-box:hover {
  border: 1px solid #1abc9c;
}

.client-box .comment {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
}

.client-box img {
  display: inline-block;
  float: right;
  padding-right: 30px;
  width: auto !important;
}

.m-b-70 {
  margin-bottom: 70px;
}

.client-box h3 {
  margin-top: 2px;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 700;
}
.client-box p.text {
  padding-left: 30px;
  border-left: 5px solid #1abc9c;
  font-size: 14px;
  padding-top: 5px;
  line-height: 30px;
}
.client-box p {
  font-size: 16px;
  margin-top: 0;
  display: block;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #1abc9c;
}

.area {
  font-style: italic;
  margin-left: 18px;
  display: inline-block;
  color: #bcbcbc;
  font-size: 16px;
}

.blog-card {
  box-shadow: 0px 0px 5px 0px #ccc;
}

.blog-card i {
  margin: 0px 5px 0px 10px;
}

.blog-socialmedia-counter {
  display: inline-block;
}

.blogimg {
  position: relative;
  top: -45px;
  margin: 0 auto;
  width: 100%;
  box-shadow: 0px 0px 7px 2px #ccc;
  margin-bottom: -40px;
  border-radius: 5px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-t-20 {
  margin-top: 20px;
}

.brand-text {
  font-size: 22px;
  color: #1abc9c;
}

.btn-primary {
  text-transform: capitalize;
  font-size: 14px;
  padding: 10px 19px;
  background: linear-gradient(45deg, #ff5370, #ff869a);
  border-color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #28e1bd;
  border-color: #28e1bd;
}

/* 07. client end */
/* 08. footer starts */
.footer {
  background-color: #2c3e50;
  color: #fff;
  padding-top: 50px;
  padding-bottom: 20px;
}

.footer ul {
  padding-left: 0;
}

.footer ul li {
  list-style: none;
  line-height: 30px;
}

.footer ul li a {
  color: #fff;
  border-bottom: 1px solid #5d7e96;
  line-height: 40px;
  text-decoration: none;
  font-size: 13px;
}

.footer ul li a:hover {
  color: #4488e0;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}

.footer h5 {
  color: #fff;
  font-weight: bold;
}

.footer p {
  font-size: 14px;
  line-height: 22px;
  margin-top: 20px;
  color: #fff;
}

.footer i {
  margin-right: 15px;
}

.logo-white {
  display: block;
}

.link {
  border-top: 1px solid #3e637c;
  margin-top: 50px;
  padding-top: 40px;
}

.link span {
  font-size: 14px;
  padding: 10px;
  position: relative;
  text-transform: uppercase;
}

.link span:hover {
  color: #1b8bf9;
}

.link span:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.6em;
  bottom: 0.6em;
  width: 1px;
  background-color: #fff;
}

.link > span:last-child:after {
  display: none;
}

.link-icon ul {
  display: inline-block;
  margin: 0 auto;
}

.link-icon ul li {
  float: left;
  margin-top: 15px;
}

.link-icon ul li a {
  text-decoration: none;
  padding: 0 10px;
  border-bottom: none;
  font-size: 24px;
}

.link-icon ul li a i {
  font-size: 24px;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
}

.link-icon ul li a i:hover {
  color: #4488e0;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
}

.link span a {
  color: #fff;
}

/* 08. footer ends */
/* sprite start*/
.sprite {
  background-image: url(../images/sprite.png);
  background-repeat: no-repeat;
  display: block;
}

.sprite-CRM {
  width: 60px;
  height: 60px;
  background-position: -5px -5px;
}

.sprite-UIelement {
  width: 60px;
  height: 60px;
  background-position: -75px -5px;
}

.sprite-charts {
  width: 60px;
  height: 60px;
  background-position: -145px -5px;
}

.sprite-cms {
  width: 60px;
  height: 60px;
  background-position: -215px -5px;
}

.sprite-color {
  width: 60px;
  height: 60px;
  background-position: -5px -75px;
}

.sprite-datatable {
  width: 60px;
  height: 60px;
  background-position: -75px -75px;
}

.sprite-ecommerce {
  width: 60px;
  height: 60px;
  background-position: -145px -75px;
}

.sprite-email {
  width: 60px;
  height: 60px;
  background-position: -215px -75px;
}

.sprite-form {
  width: 60px;
  height: 60px;
  background-position: -5px -145px;
}

.sprite-icons {
  width: 60px;
  height: 60px;
  background-position: -75px -145px;
}

.sprite-landing {
  width: 60px;
  height: 60px;
  background-position: -145px -145px;
}

.sprite-layouts {
  width: 60px;
  height: 60px;
  background-position: -215px -145px;
}

.sprite-loader {
  width: 60px;
  height: 60px;
  background-position: -5px -215px;
}

.sprite-login {
  width: 60px;
  height: 60px;
  background-position: -75px -215px;
}

.sprite-menu {
  width: 60px;
  height: 60px;
  background-position: -145px -215px;
}

.sprite-pages {
  width: 60px;
  height: 60px;
  background-position: -215px -215px;
}

.sprite-social {
  width: 60px;
  height: 60px;
  background-position: -285px -5px;
}

.sprite-task {
  width: 60px;
  height: 60px;
  background-position: -285px -75px;
}

.sprite-themeUI {
  width: 60px;
  height: 60px;
  background-position: -285px -145px;
}

.sprite-widget {
  width: 60px;
  height: 60px;
  background-position: -285px -215px;
}

/* sprite end */
/* general styling for all the hovers */
.hover {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  margin-bottom: 15px;
}

.hover .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.hover img {
  display: block;
  position: relative;
  margin: 0 auto;
}

.hover a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #f44336;
  margin: 100px 0 0 0;
  border-radius: 5px;
  background-color: #f44336;
  cursor: pointer;
}

.hover a.info:hover {
  border: 1px solid transparent;
  background-color: #fff;
  color: #000;
}

.hover a.preview {
  display: inline-block;
  text-decoration: none;
  padding: 10px 15px;
  color: #fff;
  border: 1px solid #34495e;
  margin: 100px 0 0 0;
  border-radius: 5px;
  background-color: #34495e;
  cursor: pointer;
  transition: all 0.2s;
}

.hover a.preview:hover {
  border: 1px solid transparent;
  background-color: #fff;
  color: #000;
}

/* styling to remove box shadow and border from buttons for last few effects */
.hover a.nullbutton {
  border: none;
  padding: 0px;
  margin: 0px;
}

.hover a.nullbutton:hover {
  box-shadow: none;
}

/* remove the blue line that shows on modal buttons after you have open and close a modal */
.modal-open .modal,
a:focus {
  outline: none !important;
}

/**  =====================
      Theme-preloader css start
==========================  **/
.theme-loader {
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 999999;
}

@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.ball-scale {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 45%;
  width: 100%;
}

.ball-scale > div {
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  animation: ball-scale 1s 0s ease-in-out infinite;
  background-color: #148f77;
  border-radius: 100px;
  display: inline-block;
  height: 60px;
  width: 60px;
}

/**====== Theme-preloader css end ======**/