/*
 * TheGuide v1.0.0 (http://shamsoft.net/theguide)
 * Copyright 2016 ShaMSofT
 * Licensed under the Themeforest Standard Licenses
 */
/*------------------------------------
- Typography
------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #606873;
  position: relative;
}

p {
  line-height: 25px;
  margin-bottom: 10px;
  color: #7C8188;
  line-height: 30px;
  font-weight: 100;
  font-size: 18px;
}

p.lead {
  font-size: 19px;
  line-height: 28px;
}

a,
a:focus,
a:hover {
	color: #1274A9;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 38px;
  line-height: 48px;
}

h3 {
  font-size: 28px;
  line-height: 38px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
  line-height: 30px;
}

h6 {
  font-size: 15px;
  line-height: 22px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Raleway, sans-serif;
  color: #fff;
  margin: 24px 0 16px;
  font-weight: lighter;
  font-size: 24px;
}

h1 a,
h1 a:focus,
h1 a:hover, h2 a,
h2 a:focus,
h2 a:hover, h3 a,
h3 a:focus,
h3 a:hover, h4 a,
h4 a:focus,
h4 a:hover, h5 a,
h5 a:focus,
h5 a:hover, h6 a,
h6 a:focus,
h6 a:hover {
  color: #606873;
  text-decoration: none;
}

h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small {
  font-weight: 300;
}

h3,
h4 {
  margin-top: 48px;
}

h1 small {
  font-weight: 100;
}

.text-primary {
  color: #9e7dd3;
}

.text-success {
  color: #36d678;
}

.text-info {
  color: #5bc0de;
}

.text-warning {
  color: #f0ad4e;
}

.text-danger {
  color: #ff3366;
}

.text-gray {
  color: #55595c;
}

.text-dark {
  color: #000000;
}

.text-white {
  color: #ffffff;
}

mark,
.highlight {
  background-color: #fefcc1;
}

blockquote {
  font-family: Raleway, sans-serif;
}

blockquote p {
  line-height: 30px;
}

.text-cols-2 {
  column-count: 2;
  column-gap: 24px;
  -webkit-column-count: 2;
  -webkit-column-gap: 24px;
}

.text-cols-3 {
  column-count: 3;
  column-gap: 24px;
  -webkit-column-count: 3;
  -webkit-column-gap: 24px;
}

.text-cols-4 {
  column-count: 4;
  column-gap: 24px;
  -webkit-column-count: 4;
  -webkit-column-gap: 24px;
}

iframe {
  border: none;
  border-radius: 7px;
}

@media (max-width: 991px) {
  h1 {
    font-size: 45px;
    margin-bottom: 30px;
  }
  h2 {
    font-size: 32px !important;
    margin-bottom: 28px;
    margin-top: 55px;
  }
  h3 {
    font-size: 28px;
    margin-bottom: 25px;
    margin-top: 38px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 20px;
  }
  .text-cols-2 {
    column-count: 2;
    column-gap: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 24px;
  }
  .text-cols-3 {
    column-count: 2;
    column-gap: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 24px;
  }
  .text-cols-4 {
    column-count: 2;
    column-gap: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 24px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 32px;
    margin-bottom: 25px;
  }
  h2 {
    font-size: 48px !important;
    margin-top: 40px;
  }
  h3 {
    font-size: 25px;
    margin-bottom: 23px;
    margin-top: 30px;
  }
  h4 {
    font-size: 22px;
    line-height: 26px;
    font-weight: 300;
  }
  h5 {
    font-size: 19px;
    line-height: 24px;
    font-weight: 400;
  }
  h6 {
    font-size: 17px;
    line-height: 20px;
    font-weight: 500;
  }
  .text-cols-2 {
    column-count: 1;
    column-gap: 24px;
    -webkit-column-count: 1;
    -webkit-column-gap: 24px;
  }
  .text-cols-3 {
    column-count: 1;
    column-gap: 24px;
    -webkit-column-count: 1;
    -webkit-column-gap: 24px;
  }
  .text-cols-4 {
    column-count: 1;
    column-gap: 24px;
    -webkit-column-count: 1;
    -webkit-column-gap: 24px;
  }
}


/*------------------------------------
- Packages
------------------------------------*/
.packages {
    padding-top: 110px;
    background: #ffffff;
}

.faq-title{
    color: #7b8087;
    text-align: center;
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 2px;
    margin-top: -10px;
    margin-bottom: 30px;
}
.dotted{
    width: auto;
    margin:0 auto;
    border-bottom: 1px dotted #7b8087;
}

.package-separator{
    margin:0;
}
.package-heading{
    color: #169ce5;
    font-size: 45px;
    font-weight: 400;
}

.single-package {
    background: #F7F8FA;
    overflow: auto;
    border: 0px solid #161616;
    border-radius: 3px;
    margin-bottom: 60px;
    text-align: center;
}

.geek-package{
    margin-left: 16%;
}

.single-package .price {
    background: linear-gradient(189deg,#4C9CD9,#53A1DD);
}
.single-package .color-bg {
}
.single-package .price h2 {
    color: #fff;
}

.single-package .price .color-bg h2 {
    color: #FFFFFF !important;
} 

.single-package .price .sign {
    vertical-align: super;
    font-size: 20px;
}

.single-package .price .month {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.single-package .package-feature {
  margin-top: 25px;
  margin-bottom: 25px;
  list-style: none;
  color: #000;
  font-size: 20px;
}

.single-package .package-feature > li {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: -30px;
}

.single-package .package-feature > li > span {
  margin-right: 7px;
  color: #169ce5;
}


/*---------------------------------------
   SECTION:  FEATURES                 
-----------------------------------------*/

.features {
    padding-top: 80px;
    padding-bottom: 0px;
    background: #ffffff;
}

.features .features-left {
    text-align: right;
    margin-top: 26px;
    margin-bottom: 0px;
}

.features .features-left .icon-container {
    float: right;
    margin-left: 20px;
}

.features .features-right {
    text-align: left;
    margin-top: 26px;
    margin-bottom: 0px;
}

.features .features-right .icon-container {
    float: left;
    margin-right: 20px;
}

.features .feature {
    margin-bottom: 0px;
}

.features .feature .icon-container {
    display: block;
    min-height: 120px;
    margin-top: 5px;
}

.features .feature .icon-container .icon {
    border: 1px solid #fff;
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    line-height: 55px;
    font-size: 23px;
    text-align: center;
    -webkit-transition: all ease-in 0.25s;
    transition: all ease-in 0.25s;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.features .phone-image {
    max-width: 250px;
    margin: auto;
    margin-bottom: 60px;
    margin-top: 55px;
}

.features .phone-image img {
    width: 100%;
}

/*------------------------------------
- Features
------------------------------------*/

.featureinfo-section{
    margin: 0 auto;
}

@media all and (max-width: 960px) {
    .featureinfo-section{width: auto;}
}

@media all and (min-width: 960px) {
    .featureinfo-section{width: 960px;}
}

.featureinfo-title{
    color:black;
    font-size:40px;
    padding-bottom: 20px;
}


/*------------------------------------
- Sections
------------------------------------*/
section {
  position: relative;
  padding: 50px 32px;
  z-index: 0;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  border-bottom: 1px solid #eceeef;
}

section.bg-repeat {
  background-repeat: repeat;
  background-size: auto;
}

section .row [class*="col-"].content-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

section .bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}

.section-header {
  text-align: center;
  margin-bottom: 72px;
}

.section-header span {
  color: #96A2B5;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-header h2 {
  position: relative;
  font-size: 38px;
  margin-bottom: 48px;
  position: relative;
  text-transform: capitalize;
  color: #7b8087;
  font-weight: 200;
  letter-spacing: 2px;
}

.section-header h2::after {
  position: absolute;
  left: 50%;
  margin-left: -24px;
  bottom: -30px;
  width: 48px;
  height: 2px;
  background-color: #169CE5;
  content: "";
}

.section-header span ~ h2 {
  margin-top: 13px;
}

.sectionp-text{
  font-size: 18px;
  margin-left: 22%;
  width: 620px;
  line-height: 30px;
  font-weight: 100;
  color: #7b8087;
}

@media (max-width:1200px){
    .sectionp-text{
        width: auto;
        margin-left:auto;
    }
}

.section-header.text-left {
  text-align: left;
}

.section-header.text-left h2::after {
  left: 0;
  margin-left: 0;
}

.section-header.text-right {
  text-align: right;
}

.section-header.text-right h2::after {
  left: 100%;
  margin-left: -48px;
}

.builtText{
	color:#7b8087;
	font-size: 27px;
	text-transform: none;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 5px;
}

.bg-dark,
.bg-dark-light,
.bg-dark-lighter,
.bg-dark-lightest,
.bg-blue,
.bg-red,
.bg-orange,
.bg-green,
.bg-purple {
  color: #eeeeee;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark-light h1,
.bg-dark-light h2,
.bg-dark-light h3,
.bg-dark-light h4,
.bg-dark-light h5,
.bg-dark-light h6,
.bg-dark-lighter h1,
.bg-dark-lighter h2,
.bg-dark-lighter h3,
.bg-dark-lighter h4,
.bg-dark-lighter h5,
.bg-dark-lighter h6,
.bg-dark-lightest h1,
.bg-dark-lightest h2,
.bg-dark-lightest h3,
.bg-dark-lightest h4,
.bg-dark-lightest h5,
.bg-dark-lightest h6,
.bg-blue h1,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6,
.bg-red h1,
.bg-red h2,
.bg-red h3,
.bg-red h4,
.bg-red h5,
.bg-red h6,
.bg-orange h1,
.bg-orange h2,
.bg-orange h3,
.bg-orange h4,
.bg-orange h5,
.bg-orange h6,
.bg-green h1,
.bg-green h2,
.bg-green h3,
.bg-green h4,
.bg-green h5,
.bg-green h6,
.bg-purple h1, .bg-purple h2, .bg-purple h3, .bg-purple h4, .bg-purple h5, .bg-purple h6 {
  color: #eeeeee;
}

.bg-dark hr {
  border-top-color: #2b353d;
}

.bg-dark-light hr {
  border-top-color: #4a4b55;
}

.bg-dark-lighter hr {
  border-top-color: #5e6068;
}

.bg-dark-lightest hr {
  border-top-color: #828284;
}

.bg-gray hr {
  border-top-color: white;
}

.bg-gray-light hr {
  border-top-color: white;
}

.bg-gray-lighter hr {
  border-top-color: white;
}

.bg-blue hr {
  border-top-color: #b3d7ed;
}

.bg-red hr {
  border-top-color: #fd9e9e;
}

.bg-orange hr {
  border-top-color: #fea693;
}

.bg-green hr {
  border-top-color: #88e1b4;
}

.bg-purple hr {
  border-top-color: #bfbaf5;
}

.overlay-black::before,
.overlay-white::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.overlay-black::before {
  background-color: rgba(0, 0, 0, 0.6);
}

.overlay-black.overlay-intense::before {
  background-color: rgba(0, 0, 0, 0.85);
}

.overlay-black.overlay-pale::before {
  background-color: rgba(0, 0, 0, 0.4);
}

.overlay-white::before {
  background-color: rgba(255, 255, 255, 0.6);
}

.overlay-white.overlay-intense::before {
  background-color: rgba(255, 255, 255, 0.85);
}

.overlay-white.overlay-pale::before {
  background-color: rgba(255, 255, 255, 0.4);
}

.overlay-black, .overlay-black p, .overlay-black h1, .overlay-black h2, .overlay-black h3, .overlay-black h4, .overlay-black h5, .overlay-black h6 {
  color: #eeeeee;
}

.overlay-black hr {
  border-top-color: #46474d;
}

section.no-border-bottom {
  border-bottom: none;
}

section.section-sm {
  padding-top: 48px;
  padding-bottom: 48px;
}

section.section-lg {
  padding-top: 164px;
  padding-bottom: 164px;
}

@media (max-width: 991px) {
  section {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  section {
    padding: 72px 15px;
  }
  section > .container {
    padding-left: 0;
    padding-right: 0;
  }
  .section-sm {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .section-lg {
    padding-top: 128px;
    padding-bottom: 128px;
  }
}

/*------------------------------------
- Content
------------------------------------*/
@media (max-width: 991px) {
  .container {
    width: auto;
  }
}

/*------------------------------------
- Header
------------------------------------*/
.header-image {
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 180px 0;
  color: #fff;
  z-index: 0;
  padding-bottom: 50px;
}

.header-image.bg-repeat {
  background-size: none;
  background-repeat: repeat;
}

.header-image::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.22);
}

.header-image.no-overlay::before {
  display: none;
}

.header-image h1, .header-image h2, .header-image h3, .header-image h4, .header-image h5, .header-image h6, .header-image p {
  color: #fff;
  text-align: center;
}

.header-image h1 {
  font-weight: 200;
  font-size: 48px;
  line-height: 64px;
  margin-bottom: 24px;
  letter-spacing: 2px;
  text-align: center;
  min-height: 64px;
}
@media (max-width: 1120px){
    .customCheckBox{
    margin-left: 25% !important;
    }
}
@media (max-width: 910px){
    .customCheckBox{
    margin-left: 20% !important;
    }
}


@media (max-width: 380px){
    .customCheckBox{
    margin-left: 15% !important;
    }
}

@media (max-width: 320px){
    .customCheckBox{
    margin-left: 10% !important;
    }
}

.customCheckBox{
    float: left;
    margin-top: -25px;
    margin-left: 30%;
}

.packageMainText{
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    font-weight: 600;
}
.packageCodedWith{
    color: #8A8A8A !important;
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    font-size: 12.5px;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    font-weight: 400;
}
.largerCheckbox{
    height: 50px;
    width: 50px;
}
@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; }
}

.header-image h4,
.header-image h3 {
  letter-spacing: 1px;
  line-height: 36px;
}

.header-image img {
  max-width: 80%;
}

@media (max-width: 767px) {
  .header-image {
    padding: 120px 0 80px;
  }
  .header-image h1 {
    /*font-size: 46px;*/
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 36px;
  }
  .header-image h4,
  .header-image h3 {
    line-height: 28px;
    font-size: 17px;
  }
  .header-image h5 {
    line-height: 26px;
    font-size: 16px;
  }
}

/*------------------------------------
- Site navigation
------------------------------------*/
.site-navigation {
  background-color: #fff;
  position: relative;
  z-index: 999;
  transition: background-color 0.3s ease-out;
}

.site-navigation .container .navbar-toggle,
.site-navigation .container-fluid .navbar-toggle {
  margin-right: 0;
}

.site-navigation .navbar-toggle {
  display: none;
  border: 0;
  line-height: 40px;
  padding: 10px;
  margin-top: 0;
  margin-bottom: 0;
  color: #55595c;
}

.site-navigation .navbar-toggle .fa {
  font-size: 48px;
    width: 48px;
}

.site-navigation .logo {
  float: left;
}

.site-navigation .logo img {
  height: 100px;
  transition: height 0.2s linear;
}

.site-navigation ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.site-navigation ul li:hover > ul {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

.site-navigation .nav-menu {
  float: right;
}

.site-navigation .nav-menu > li {
  position: relative;
  display: inline-block;
  padding: 0 2px;
}

.site-navigation .nav-menu > li:hover > a {
  color: #9e7dd3;
}

.site-navigation .nav-menu > li:hover > a.menu-highlighted {
  color: #fff;
}

.site-navigation .nav-menu a {
  display: inline-block;
  font-family: Raleway, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 14px;
  line-height: 100px;
  color: #818a91;
  transition: color 0.2s linear, line-height 0.2s linear;
}

.site-navigation .nav-menu a:hover {
  color: #147CB9;
  text-decoration: none;
}

.site-navigation .nav-menu a.active {
  color: #147CB9;
  border-top: #147CB9;
}

.site-navigation .nav-menu a.menu-highlighted {
  line-height: 50px;
  margin: 10px 0;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 2px;
  color: #fff;
  background-color: #169CE5;
  transition: all 0.2s linear;
  visibility: hidden;
}

.site-navigation .nav-menu a.menu-highlighted:hover {
  color: #fff;
  background-color: #169;
}

.site-navigation .nav-menu ul {
  position: absolute;
  top: 120%;
  left: 0;
  z-index: 2;
  background-color: #fff;
  border-top: 2px solid #169CE5;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, top 0.2s ease-in-out;
}

.site-navigation .nav-menu ul li a {
  line-height: 40px;
  white-space: nowrap;
  display: block;
  min-width: 150px;
  font-weight: 600;
  border-bottom: 1px solid #f8f9fa;
}

.reskin{
    padding-top:10%;
}

.auto-setup-block{
  padding-top: 0%;
  padding-left: 0px;
  margin-top: -20px;
}

.auto-setup-text{
    margin-top: -20px;
}

.auto-setup-video{
}

@media (max-width: 590px){
    .auto-setup-video{
        display: none;
    }
}

.setup-auto-h1{
    color:#7b8087;
    font-size:38px;
    text-transform:capitalize;
}
@media (max-width: 767px){
    .setup-auto-h1{
        font-size: 42px !important;
    }
}

.reskinText{
    color:#7b8087;
    font-size:38px;
    text-transform:capitalize;
}

p.facts-description{
    color: black;
}

.site-navigation .nav-menu ul li:last-child a {
  border-bottom: 0;
}

.site-navigation .nav-menu ul a.active {
  border-top: none;
}

.site-navigation.container-fluid .nav-menu > li:last-child ul {
  left: auto;
  right: 0;
}

.offcanvas-show .navbar-toggle {
  color: #9e7dd3;
}

.sticky-nav .site-header {
  /* min-height: 100px; */
  padding-top: 100px;
}

.sticky-nav .site-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.imac{
    width: 75%;
    margin-right:35px;
    margin-bottom: -70px;
    margin-left:-25%;
    box-shadow:0 -3px 30px rgba(0,0,0,.3);
}

.iphone{
    width: 300px;
    margin-bottom: -45px;
    position: absolute;
}


@media (max-width: 320px){
    .devices{
        height:210px !important;
    }
}

.devices{
    height: 280px;
    width: 425px;
    margin-top: 100px;
}

.icon_cloud_alt{
    font-size:90px !important;
}

.icon_flowchart{
    font-size:90px !important;
}

.icon_lock_alt{
    font-size: 77px !important;
    padding-top: 8px !important;
}

.whiteHighlight{
    color: #fff !important;
}
.dmca-req{
    padding-left:25px;
}
.pricingHeader{
    color:#fff !important;
    font-size:50px !important;
}

.pricingTitle{
    font-size: 45px !important;
    font-weight:400px !important;
}

.dollarSignSymbol{
    font-size:18px !important;
}

.priceText{
    font-size:24px !important;
    font-family:'HelveticaNeue-Light' !important;
}

.legalblock{
    width: 640px !important;
    margin: auto !important;
    padding-top: 25px !important;
}

@media (max-width: 640px){
      .legalblock {
        margin-left: 20px !important;
        margin-right: 20px !important;
        float: none;
        display: block;
        width: auto !important;
    }
}

.completeExpPackText{
    font-weight:600 !important;
    color:#000 !important;
}

.faqText{
    font-size:22px !important;
}

.faqDescText{
    font-size:18px !important;
}

.faqDescTextWithPadding{
    padding-bottom: 10px !important;
    font-size: 18px !important;
}

.discount{
    text-decoration: line-through !important;
    font-size: 20px !important;
    padding-right:10px !important;
}


.sticky-nav.body-scrolled .site-navigation {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

.sticky-nav.body-scrolled .site-navigation .logo img {
  height: 80px;
}

.sticky-nav.body-scrolled .site-navigation .nav-menu > li > a {
  line-height: 45px;
}

.sticky-nav.body-scrolled .site-navigation .menu-highlighted .nav-menu > li > a.menu-highlighted {
  line-height: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.body-scrolled .nav-menu {
    display: block;
}

.transparent-nav .page-navigation,
.transparent-nav .logo-default {
  display: none;
}

.transparent-nav .logo-transparent {
  display: inline-block;
}

.transparent-nav .site-header {
  padding-top: 0;
}

.transparent-nav .site-navigation {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.transparent-nav .site-navigation .nav-menu a,
.transparent-nav .site-navigation .navbar-toggle {
  color: rgba(255, 255, 255, 0.7);
}

.transparent-nav .site-navigation .nav-menu a:hover,
.transparent-nav .site-navigation .nav-menu a.active,
.transparent-nav .site-navigation .navbar-toggle:hover,
.transparent-nav .site-navigation .navbar-toggle.active {
  color: #fff;
  border-top-color: #fff;
}

.transparent-nav .site-navigation .nav-menu > li:hover > a {
  color: #fff;
  border-top-color: #fff;
}

.transparent-nav .site-navigation .nav-menu ul a {
  color: #818a91;
}

.transparent-nav .site-navigation .nav-menu ul a:hover,
.transparent-nav .site-navigation .nav-menu ul a.active {
  color: #169ce5;
}

.transparent-nav.sticky-nav .site-navigation {
  position: fixed;
}

.transparent-nav.body-scrolled .page-navigation {
  display: block;
}

.transparent-nav.body-scrolled .logo-transparent {
  display: none;
}

.transparent-nav.body-scrolled .logo-default {
  display: inline-block;
}

.transparent-nav.body-scrolled .site-navigation {
  background-color: #fff;
}

.transparent-nav.body-scrolled .site-navigation .nav-menu a,
.transparent-nav.body-scrolled .site-navigation .navbar-toggle {
  color: #818a91;
}

.transparent-nav.body-scrolled .site-navigation .nav-menu a:hover,
.transparent-nav.body-scrolled .site-navigation .nav-menu a.active,
.transparent-nav.body-scrolled .site-navigation .navbar-toggle:hover,
.transparent-nav.body-scrolled .site-navigation .navbar-toggle.active {
  color: #169CE5;
}

.transparent-nav.body-scrolled .site-navigation .nav-menu > li:hover > a {
  color: #169ce5;
  border-top-color: #169CE5;
}

.transparent-nav.body-scrolled .site-navigation .nav-menu a.menu-highlighted {
  color: #fff;
  visibility: visible;
}

@media (max-width: 1200px){
  .imac, .iphone {
    display: none;
}
}

@media (max-width: 991px) {
  html,
  body {
    overflow-x: hidden;
  }

  body > main {
    position: relative;
    left: 0;
    transition: left 0.2s ease-out;
  }
  .site-navigation .nav-menu {
    position: fixed;
    left: -80%;
    top: 0;
    bottom: 0;
    width: 80%;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    padding: 24px 16px;
    box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
    transition: left 0.2s ease-out;
  }
  .site-navigation .nav-menu a {
    line-height: 50px !important;
  }
  .site-navigation .nav-menu a.active {
    border-top: 0;
  }
  .site-navigation .nav-menu a.menu-highlighted {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .site-navigation .nav-menu > li {
    display: block;
    border-bottom: 1px solid #f7f7f9;
  }
  .site-navigation .nav-menu > li:last-child {
    border-bottom: 0;
  }
  .site-navigation .nav-menu ul {
    visibility: visible;
    opacity: 1;
    position: static;
    border-top: 0;
  }
  .site-navigation .nav-menu ul li a {
    border-bottom: 0;
    line-height: 40px !important;
  }
  .offcanvas-show > main {
    left: 80%;
  }
  .offcanvas-show .site-navigation .nav-menu {
    left: 0;
  }
  .sticky-nav .site-header {
    min-height: 60px;
    padding-top: 60px;
  }
  .transparent-nav .site-header {
    padding-top: 0;
  }
  .site-navigation .logo img {
    /*height: 55px !important;*/
    height: 70px !important;
  }
  .site-navigation .nav-menu > li > a {
    line-height: 60px;
  }
  .site-navigation .navbar-toggle {
    display: inline-block;
  }
  .transparent-nav .site-navigation .nav-menu a {
    color: #818a91;
  }
  .transparent-nav .site-navigation .nav-menu a:hover,
  .transparent-nav .site-navigation .nav-menu a.active {
    color: #169ce5;
  }
}

/*------------------------------------
- Page navigation
------------------------------------*/
@media (min-width: 992px) {
  .page-navigation.full-topbar {
    padding: 0 15px;
    background-color: #9e7dd3;
    height: 40px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
    box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
  }
  .page-navigation.full-topbar a {
    color: rgba(255, 255, 255, 0.7);
    padding: 0 12px;
    font-size: 13px;
    line-height: 40px;
    transition: all 0.2s ease-in;
  }
  .page-navigation.full-topbar a:hover {
    text-decoration: none;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }
  .page-navigation.full-topbar a:focus,
  .page-navigation.full-topbar a:active {
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
  }
  .page-navigation.full-topbar ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    text-align: center;
  }
  .page-navigation.full-topbar li {
    display: inline-block;
  }
  .page-navigation.full-topbar li.active a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.18);
  }
  .page-navigation.full-topbar .heading,
  .page-navigation.full-topbar .nav > li > ul {
    display: none;
  }
  .sticky-nav .page-navigation.full-topbar {
    top: 60px;
  }
  .page-navigation.dotted-topbar {
    padding: 0 15px;
    background-color: #9e7dd3;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
    box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
  }
  .page-navigation.dotted-topbar a {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
    padding: 0 17px;
    font-size: 13px;
    line-height: 40px;
    width: 0;
    text-indent: -9999px;
    transition: background-color 0.2s ease-in, width 0.2s ease-in;
  }
  .page-navigation.dotted-topbar a:hover {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
  }
  .page-navigation.dotted-topbar a:hover::before {
    background-color: transparent;
    border: 1px solid #fff;
  }
  .page-navigation.dotted-topbar a:focus,
  .page-navigation.dotted-topbar a:active {
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
  }
  .page-navigation.dotted-topbar a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 17px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    transition: background-color 0.2s ease-in;
  }
  .page-navigation.dotted-topbar ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    text-align: center;
  }
  .page-navigation.dotted-topbar li {
    display: inline-block;
  }
  .page-navigation.dotted-topbar li.active .tooltip-dotted-topbar {
    display: none !important;
  }
  .page-navigation.dotted-topbar li.active a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    width: auto;
    text-indent: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  .page-navigation.dotted-topbar li.active a::before {
    background-color: transparent;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    left: -2px;
    opacity: 0;
  }
  .page-navigation.dotted-topbar .heading,
  .page-navigation.dotted-topbar .nav > li > ul {
    display: none;
  }
  .tooltip-dotted-topbar .tooltip-arrow {
    border-bottom-color: #eee !important;
  }
  .tooltip-dotted-topbar .tooltip-inner {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    max-width: 200px;
    font-size: 13px;
    letter-spacing: 1px;
    background-color: #fff;
    color: #9e7dd3;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .sticky-nav .page-navigation.dotted-topbar {
    top: 60px;
  }
  .page-navigation.sidebar-left,
  .page-navigation.sidebar-right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 260px;
    padding-top: 120px;
    background-color: #fff;
  }
  .page-navigation.sidebar-left a,
  .page-navigation.sidebar-right a {
    color: #636e77;
    padding: 2px 12px;
    margin: 8px 0;
    display: inline-block;
    border-left: 2px solid transparent;
    transition: all 0.2s linear;
  }
  .page-navigation.sidebar-left a:hover,
  .page-navigation.sidebar-right a:hover {
    background-color: transparent;
    text-decoration: none;
    color: #9e7dd3;
  }
  .page-navigation.sidebar-left a:focus,
  .page-navigation.sidebar-left a:active,
  .page-navigation.sidebar-right a:focus,
  .page-navigation.sidebar-right a:active {
    background-color: transparent;
    text-decoration: none;
    color: #9e7dd3;
  }
  .page-navigation.sidebar-left .nav > li > ul,
  .page-navigation.sidebar-right .nav > li > ul {
    display: none;
    padding-left: 15px;
    list-style: none;
    margin-bottom: 15px;
  }
  .page-navigation.sidebar-left .nav > li > ul a,
  .page-navigation.sidebar-right .nav > li > ul a {
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 2px 0;
  }
  .page-navigation.sidebar-left .nav > li.active > ul,
  .page-navigation.sidebar-right .nav > li.active > ul {
    display: block;
  }
  .page-navigation.sidebar-left li.active > a,
  .page-navigation.sidebar-right li.active > a {
    color: #9e7dd3;
    border-left-color: #9e7dd3;
  }
  .page-navigation.sidebar-left .nav > li.active > a,
  .page-navigation.sidebar-right .nav > li.active > a {
    font-weight: 600;
  }
  .page-navigation.sidebar-left .nav,
  .page-navigation.sidebar-right .nav {
    margin: 12px;
  }
  .page-navigation.sidebar-left .heading,
  .page-navigation.sidebar-right .heading {
    font-family: Raleway, sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    margin: 12px 6px;
  }
  .page-navigation.sidebar-left {
    left: 0;
    box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
    padding-left: 15px;
  }
  .page-navigation.sidebar-left ~ main {
    margin-left: 260px;
  }
  .page-navigation.sidebar-left ~ .site-header {
    margin-left: 260px;
  }
  .page-navigation.sidebar-right {
    right: 0;
    box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
    padding-left: 15px;
  }
  .page-navigation.sidebar-right ~ main {
    margin-right: 260px;
  }
  .page-navigation.sidebar-right ~ .site-header {
    margin-right: 260px;
  }
}

@media (max-width: 991px) {
  .page-navigation {
    padding: 0 15px;
    background-color: #9e7dd3;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
    box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
  }
  .page-navigation a {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
    padding: 0 17px !important;
    font-size: 13px;
    line-height: 40px;
    width: 0;
    text-indent: -9999px;
    transition: background-color 0.2s ease-in, width 0.2s ease-in;
  }
  .page-navigation a:hover {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
  }
  .page-navigation a:hover::before {
    background-color: transparent;
    border: 1px solid #fff;
  }
  .page-navigation a:focus,
  .page-navigation a:active {
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
  }
  .page-navigation a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 17px;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    transition: background-color 0.2s ease-in;
  }
  .page-navigation > .nav {
    height: 40px;
    overflow: hidden;
  }
  .page-navigation ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    text-align: center;
  }
  .page-navigation li {
    display: inline-block;
  }
  .page-navigation li.active .tooltip-dotted-topbar {
    display: none !important;
  }
  .page-navigation li.active a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    width: auto;
    text-indent: 0;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .page-navigation li.active a::before {
    background-color: transparent;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    left: -2px;
    opacity: 0;
  }
  .page-navigation .heading,
  .page-navigation .nav > li > ul {
    display: none;
  }
  .tooltip-dotted-topbar .tooltip-arrow {
    border-bottom-color: #eee !important;
  }
  .tooltip-dotted-topbar .tooltip-inner {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    max-width: 200px;
    font-size: 13px;
    letter-spacing: 1px;
    background-color: #fff;
    color: #9e7dd3;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  .sticky-nav .page-navigation {
    top: 60px;
  }
}

/*------------------------------------
- Footer
------------------------------------*/
.site-footer {
  background-color: #161b1f;
  padding: 45px 0;
}

.site-footer .back-to-top {
  text-align: right;
  margin: 0;
}

.site-footer .back-to-top a {
  color: #606873;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s linear;
}

.site-footer .back-to-top a:hover,
.site-footer .back-to-top a:focus,
.site-footer .back-to-top a:active {
  color: #fff;
  text-decoration: none;
}

.footer-links {
  padding-left: 0;
  list-style: none;
}

.footer-links li {
  display: inline-block;
}

.footer-links a {
  color: #eceeef;
  margin-right: 16px;
  line-height: 34px;
}

.footer-links a:hover,
.footer-links a:focus,
.footer-links a:active {
  color: #fff;
  text-decoration: none;
}

.footer-socials {
  padding-left: 0;
  list-style: none;
  text-align: right;
}

.footer-socials li {
  display: inline-block;
}

.footer-socials a {
  color: #606873;
  font-size: 16px;
  display: inline-block;
  line-height: 34px;
  width: 34px;
  height: 34px;
  text-align: center;
  margin-left: 2px;
  border-radius: 2px;
  transition: all 0.2s linear;
}

.footer-socials a:hover,
.footer-socials a:focus,
.footer-socials a:active {
  color: #fff;
}

.footer-socials a.facebook:hover {
  background-color: #3b5998;
}

.footer-socials a.rss:hover {
  background-color: #f26522;
}

.footer-socials a.google-plus:hover {
  background-color: #dd4b39;
}

.footer-socials a.twitter:hover {
  background-color: #00aced;
}

.footer-socials a.linkedin:hover {
  background-color: #007bb6;
}

.footer-socials a.pinterest:hover {
  background-color: #cb2027;
}

.footer-socials a.git:hover {
  background-color: #666666;
}

.footer-socials a.tumblr:hover {
  background-color: #32506d;
}

.footer-socials a.vimeo:hover {
  background-color: #aad450;
}

.footer-socials a.youtube:hover {
  background-color: #bb0000;
}

.footer-socials a.flickr:hover {
  background-color: #ff0084;
}

.footer-socials a.pinterest:hover {
  background-color: #cc2127;
}

.footer-socials a.reddit:hover {
  background-color: #ff4500;
}

.footer-socials a.dribbble:hover {
  background-color: #ea4c89;
}

.footer-socials a.skype:hover {
  background-color: #00aff0;
}

.footer-socials a.instagram:hover {
  background-color: #517fa4;
}

.footer-socials a.lastfm:hover {
  background-color: #c3000d;
}

.footer-socials a.behance:hover {
  background-color: #1769ff;
}

.copyright-text {
  margin: 0;
}

.copyright-text a {
  color: #606873;
  transition: all 0.2s linear;
}

.copyright-text a:hover,
.copyright-text a:focus,
.copyright-text a:active {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 767px) {
  .footer-links,
  .footer-socials,
  .copyright-text,
  .back-to-top {
    text-align: center !important;
  }
  .footer-socials,
  .copyright-text,
  .back-to-top {
    margin-top: 16px !important;
  }
}

/*------------------------------------
- Form controls
------------------------------------*/
.form-control {
  color: #606873;
  background-color: #fff;
  border: 1px solid #e4eaec;
  border-radius: 3px;
  height: 44px;
  line-height: 44px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: none;
  transition: box-shadow 0.25s linear, border 0.25s linear, color 0.25s linear, background-color 0.25s linear;
}

.form-control.focus,
.form-control:focus {
  box-shadow: none;
  outline: none;
  border-color: #baa3e0;
}

.form-control.input-sm {
  height: 38px;
  line-height: 38px;
}

.form-control.input-lg {
  height: 58px;
  line-height: 58px;
}

.form-group label {
  font-weight: 500;
}

.form-group.form-round .form-control {
  border-radius: 22px;
}

.form-group.form-round .form-control.input-sm {
  border-radius: 19px;
}

.form-group.form-round .form-control.input-lg {
  border-radius: 29px;
}

.form-group.form-material .form-control {
  position: relative;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #e4eaec;
  padding-right: 0;
  padding-left: 0;
  height: 34px;
  line-height: 34px;
  background-color: transparent;
}

.form-group.form-material .form-control:focus {
  border-bottom-color: #9e7dd3;
}

.form-group.form-material-floating {
  position: relative;
  padding-top: 8px;
  margin-top: 10px;
}

.form-group.form-material-floating label {
  width: 100%;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 14px;
  bottom: 0;
  transition: 0.2s ease all;
}

.form-group.form-material-floating .form-control {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #e4eaec;
  padding-right: 0;
  padding-left: 0;
  height: 34px;
  line-height: 34px;
  background-color: transparent;
}

.form-group.form-material-floating .form-control:focus {
  border-bottom-color: #9e7dd3;
}

.form-group.form-material-floating.input-touched label {
  top: -6px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #9e7dd3;
}

.form-group.search-control {
  max-width: 600px;
  margin: 0 auto;
}

.form-group.search-control.search-no-border .form-control {
  border: 0;
}

#faq-search {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

#faq-search .form-control {
  height: 64px;
  line-height: 64px;
  border-radius: 32px;
  border: none;
  font-family: Raleway, sans-serif;
  font-size: 18px;
  padding-left: 64px;
  letter-spacing: 1px;
}

#faq-search .fa {
  position: absolute;
  left: 20px;
  font-size: 36px;
  line-height: 64px;
  color: #ccc;
}

/*------------------------------------
- Labels
------------------------------------*/
.label {
  font-family: Raleway, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0.3em 0.6em;
}

.label .fa,
.label .glyphicon {
  padding: 0 4px;
}

.label-primary {
  background-color: #9e7dd3;
}

.label-success {
  background-color: #36d678;
}

.label-info {
  background-color: #5bc0de;
}

.label-warning {
  background-color: #f0ad4e;
}

.label-danger {
  background-color: #ff3366;
}

.label-dark {
  background-color: #000000;
}

/*------------------------------------
- Alerts
------------------------------------*/
.callout {
  padding: 12px 20px;
  margin: 20px 0;
  border: 1px solid #f7f7f9;
  border-top-width: 2px;
  border-radius: 2px;
  box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.05);
}

.callout h4,
.callout h5 {
  margin: 16px 0;
}

.callout-success {
  border-top-color: #36d678;
}

.callout-success p:last-child {
  margin-bottom: 0;
  font-size: 15px;
}

.callout-success h5,
.callout-success h4,
.callout-success a {
  color: #36d678;
}

.callout-success h5,
.callout-success h4 {
  text-transform: uppercase;
}

.callout-info {
  border-top-color: #5bc0de;
}

.callout-info p:last-child {
  margin-bottom: 0;
  font-size: 15px;
}

.callout-info h5,
.callout-info h4,
.callout-info a {
  color: #5bc0de;
}

.callout-info h5,
.callout-info h4 {
  text-transform: uppercase;
}

.callout-warning {
  border-top-color: #f0ad4e;
}

.callout-warning p:last-child {
  margin-bottom: 0;
  font-size: 15px;
}

.callout-warning h5,
.callout-warning h4,
.callout-warning a {
  color: #f0ad4e;
}

.callout-warning h5,
.callout-warning h4 {
  text-transform: uppercase;
}

.callout-danger {
  border-top-color: #ff3366;
}

.callout-danger p:last-child {
  margin-bottom: 0;
  font-size: 15px;
}

.callout-danger h5,
.callout-danger h4,
.callout-danger a {
  color: #ff3366;
}

.callout-danger h5,
.callout-danger h4 {
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .callout {
    padding: 10px;
  }
}

/*------------------------------------
- Buttons
------------------------------------*/
.btn {
  line-height: 42px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 3px;
  border-color: #169CE5;
  padding: 0 30px;
  color: #fff;
  background-color: #169CE5;
  transition: all 0.4s ease;
}

.btn:hover,
.btn:focus,
.btn:active {
  color: #fff;
  background-color: #169;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.btn .fa {
  margin-right: 6px;
  font-size: 16px;
}

.btn-success {
  background-color: #36d678;
  border-color: #36d678 !important;
}

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

.btn-info {
  background-color: #5bc0de;
  border-color: #5bc0de !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  color: #fff;
  background-color: #63c3e0;
}

.btn-warning {
  background-color: #f0ad4e;
  border-color: #f0ad4e !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  color: #fff;
  background-color: #f1b157;
}

.btn-danger {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #169;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}

.btn-dark {
  background-color: #fff;
  border-color: #169ce5;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: transparent;
}

.btn-white {
  background-color: #fff;
  color: #818a91;
  border-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.15);
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
  color: #55595c;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.15);
}

.btn-xs {
  line-height: 24px;
  padding: 0 12px;
  font-size: 11px;
}

.btn-xs .fa {
  font-size: 12px;
}

.btn-sm {
  line-height: 36px;
  padding: 0 20px;
}

.btn-sm .fa {
  font-size: 14px;
}

.btn-lg {
  line-height: 45px;
}

.btn-xl {
  line-height: 72px;
  padding: 0 50px;
  font-size: 14px;
}

.btn-xl .fa {
  font-size: 18px;
}

.btn-round.btn {
  border-radius: 21px;
}

.btn-round.btn-xs {
  border-radius: 12px;
}

.btn-round.btn-sm {
  border-radius: 18px;
}

.btn-round.btn-lg {
  border-radius: 28px;
}

.btn-round.btn-xl {
  border-radius: 36px;
}

.btn-outline {
  background-color: transparent;
}

.btn-outline.btn {
  color: #9e7dd3;
}

.btn-outline.btn-success {
  color: #36d678;
}

.btn-outline.btn-info {
  color: #5bc0de;
}

.btn-outline.btn-warning {
  color: #f0ad4e;
}

.btn-outline.btn-danger {
  color: #ff3366;
}

.btn-outline.btn-dark {
  color: #fff;
  background-color: #169ce5;
}

.btn-outline.btn-white {
  color: #818a91;
  border-color: #eceeef;
  box-shadow: none;
}

.btn-outline:hover {
  color: #fff;
  background-color: #169;
}

.btn-outline.btn-white:hover {
  color: #55595c;
}

.btn-float {
  padding: 0;
  display: inline-block;
  width: 42px;
  text-align: center;
  border-radius: 100%;
}

.btn-float .fa {
  margin: 0;
}

.btn-float.btn-xs {
  width: 24px;
}

.btn-float.btn-sm {
  width: 36px;
}

.btn-float.btn-lg {
  width: 56px;
}

.btn-float.btn-lg .fa {
  font-size: 22px;
}

.btn-float.btn-xl {
  width: 72px;
}

.btn-float.btn-xl .fa {
  font-size: 26px;
}

/*------------------------------------
- Tables
------------------------------------*/
.table th,
.table td {
  border-top: none !important;
}

.table td {
  line-height: 32px !important;
}

.table thead > tr > th {
  border-bottom: 1px solid #dfe3e9;
  color: #9ba5ad;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  font-family: Raleway, sans-serif;
  letter-spacing: 1px;
}

.table tbody > tr:nth-of-type(odd) {
  background-color: #fafafa;
}

.table tbody th {
  color: #9ba5ad;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  font-family: Raleway, sans-serif;
  letter-spacing: 1px;
  line-height: 32px !important;
}

.table-options thead > tr > th {
  border-bottom-width: 2px;
  color: #9ba5ad;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  font-family: Raleway, sans-serif;
  letter-spacing: 1px;
  color: #818a91;
}

.table-info tr > td:first-child {
  padding-right: 10px;
  max-width: 25%;
  color: #9ba5ad;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
  font-family: Montserrat, sans-serif;
  letter-spacing: 1px;
  color: #818a91;
}

/*------------------------------------
- Tabs
------------------------------------*/
.tabs {
  margin: 20px 0;
}

.tabs .nav-tabs {
  border-bottom-color: #c8d0d7;
}

.tabs .nav-tabs > li {
  margin-bottom: 0;
  float: none;
  display: inline-block;
}

.tabs .nav-tabs > li a {
  border: 0 !important;
  border-radius: 0;
  color: #c8d0d7;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 600;
  transition: 0.3s ease;
}

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

.tabs .tab-content {
  padding: 15px;
}

.tabs-text .nav-tabs > li.active {
  margin-bottom: -1px;
  border-bottom: 1px solid #9e7dd3;
}

.tabs-text .nav-tabs > li.active a {
  color: #9e7dd3;
}

.tabs-icon .nav-tabs > li a {
  padding: 10px 25px;
}

.tabs-icon .nav-tabs > li a .fa,
.tabs-icon .nav-tabs > li a .glyphicon {
  display: block;
  font-size: 32px;
  margin-bottom: 15px;
  text-align: center;
}

.tabs-icon .nav-tabs > li.active {
  margin-bottom: -1px;
  border-bottom: 1px solid #9e7dd3;
}

.tabs-icon .nav-tabs > li.active a {
  color: #9e7dd3;
}

.tabs-btn .nav-tabs {
  border-bottom: 0;
}

.tabs-btn .nav-tabs li {
  float: left;
}

.tabs-btn .nav-tabs li a {
  background-color: #eee;
  margin-right: 0;
}

.tabs-btn .nav-tabs li.active a {
  color: #9e7dd3;
}

@media (max-width: 767px) {
  .tabs .nav-tabs > li a {
    font-size: 12px;
  }
}

/*------------------------------------
- Code
------------------------------------*/
code {
  color: #f4645f;
  background-color: #f0f2f1;
  text-shadow: 0 1px #ffffff;
}

pre {
  background-color: #fafafa;
  border-color: #eceeef;
}

.code-ios {
  padding: 16px;
}

.code-android {
  padding: 16px;
}

.clipboard-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: opacity 0.2s ease-in-out;
  opacity: .6;
  z-index: 9;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  background-color: #fff;
  padding: 4px 8px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.clipboard-copy:hover {
  text-decoration: none;
  opacity: 1;
}

.code-window .clipboard-copy,
.code-tabs .clipboard-copy {
  top: 13px;
}

pre .language-name {
  background-color: transparent;
  color: #bbbbbb;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: default;
  position: absolute;
  top: 15px;
  right: 100px;
}

pre.no-copy .language-name {
  right: 10px;
}

pre.no-name .language-name {
  display: none;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color: #fafafa;
  border-radius: 3px;
  border-color: #eceeef;
  padding-bottom: 8px;
  margin-top: 15px;
  margin-bottom: 25px;
  word-wrap: normal;
}

.line-numbers .line-numbers-rows {
  border-right-color: #eceeef;
}

.line-numbers-rows > span:before {
  color: #cccccc;
}

pre[class*='language-'][data-language]::before {
  /*
  background-color: transparent;
  color: $pale-text-color;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  top: 8px;
  // Change to 56px after using clipboard
  right: 8px;
  */
  display: none;
}

pre.simple-view {
  background-color: transparent;
  border: none;
  padding: 0 24px;
}

.code-window {
  border: 1px solid #eceeef;
  border-radius: 3px;
  margin: 30px 0 30px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.07);
}

.code-window .window-bar {
  height: 38px;
  border-top: 1px solid #eaeae9;
  border-bottom: 1px solid #dfdfde;
  background: #ebebeb;
}

.code-window .window-bar .circles {
  margin: 6px 10px 0;
  float: left;
}

.code-window .window-bar .circles .circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.code-window .window-bar .circles .circle-red {
  background-color: #fc615c;
  border-color: #fd504a;
}

.code-window .window-bar .circles .circle-yellow {
  background-color: #fec041;
  border-color: #f0b542;
}

.code-window .window-bar .circles .circle-green {
  background-color: #33c849;
  border-color: #1bc634;
}

.code-window .window-bar .circles .window-title {
  margin-left: 16px;
  font-size: 13px;
  color: #818a91;
}

.code-window .window-bar .languages {
  margin: 6px 10px 0;
  float: right;
}

.code-window .window-bar .languages .btn-group {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.07);
}

.code-window .window-bar .languages .btn {
  padding: 2px 10px;
  background-color: #ffffff;
  color: #cccccc;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: 0;
  border: none;
  transition: all 0.4s ease;
}

.code-window .window-bar .languages .btn.active,
.code-window .window-bar .languages .btn:active {
  color: #29b6f6;
  box-shadow: none;
}

.code-window :not(pre) > code[class*="language-"],
.code-window pre[class*="language-"] {
  background-color: #ffffff;
  border: none;
  margin: 0;
  padding-bottom: 8px;
  max-height: 585px;
}

.code-window pre[class*='language-'][data-language]::before {
  display: none;
}

.code-window .line-numbers .line-numbers-rows {
  background-color: #f7f7f7;
  border-right: none;
  padding-bottom: 8px;
}

.code-window .line-numbers-rows > span:before {
  color: #cccccc;
}

.code-window .line-numbers:after {
  content: '';
  background-color: #f7f7f7;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 39px;
  height: 15px;
}

.code-snippet {
  border: 1px solid #eceeef;
  border-radius: 3px;
  margin: 30px 0 20px;
}

.code-snippet > * {
  border-bottom: 1px solid #eceeef !important;
}

.code-snippet > *:last-child {
  border-bottom: none !important;
}

.code-snippet :not(pre) > code[class*="language-"],
.code-snippet pre[class*="language-"] {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.code-snippet .code-ios {
  position: relative;
  padding-top: 35px;
}

.code-snippet .code-ios::before {
  position: absolute;
  top: 8px;
  right: 12px;
  color: #cccccc;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 600;
  content: "iOS";
}


.code-snippet .code-android {
  position: relative;
  padding-top: 35px;
}

.code-snippet .code-android::before {
  position: absolute;
  top: 8px;
  right: 12px;
  color: #cccccc;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 600;
  content: "iOS";
}

.code-splitted {
  margin: 15px -15px 25px;
}

.code-splitted > div:first-child {
  border-right: 1px solid #eeeeee;
}

.code-splitted .code-ios {
  padding-top: 0;
  padding-bottom: 0;
}

.code-splitted .code-android {
  padding-top: 0;
  padding-bottom: 0;
}

.code-splitted pre {
  border: none;
  border-radius: 0;
  margin: 0;
}

.code-splitted .languages .btn {
  border-radius: 0;
  border: none;
  box-shadow: none;
  font-family: Raleway, sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  color: #818a91;
  background-color: transparent;
  transition: all 0s linear;
}

.code-splitted .languages .btn.active {
  background-color: #fafafa;
  color: #55595c;
}

@media (max-width: 991px) {
  .clipboard-copy {
    opacity: 1;
  }
  pre[class*='language-'][data-language]::before {
    right: 56px;
  }
  pre .language-name {
    right: 56px;
  }
  .code-splitted > div:first-child {
    border-right: 0;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .code-window .window-bar .languages .btn {
    padding: 2px 6px;
    font-size: 11px;
  }
}

/*------------------------------------
- Step
------------------------------------*/
.step-text {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
  counter-reset: toc1;
}

.step-text li {
  position: relative;
  padding-left: 60px;
  margin-bottom: 24px;
}

.step-text li::before {
  content: counter(toc1, decimal-leading-zero) ".";
  counter-increment: toc1;
  position: absolute;
  left: 0;
  top: 0;
  color: #606873;
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  width: 42px;
  height: 34px;
  line-height: 34px;
  font-weight: 600;
}

.step-text li > span {
  color: #96a2b2;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.step-text li > p {
  margin-top: 0;
}

.step-text h4,
.step-text h5 {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  line-height: 35px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.step-text.step-cols-2 li,
.step-text.step-cols-3 li {
  padding-left: 0;
  display: inline-block;
  vertical-align: top;
}

.step-text.step-cols-2 li::before,
.step-text.step-cols-3 li::before {
  position: static;
}

.step-text.step-cols-2 li {
  width: 47%;
}

.step-text.step-cols-2 li:nth-child(odd) {
  margin-right: 4%;
}

.step-text.step-cols-3 li {
  width: 30%;
  margin-right: 4%;
}

.step-text.step-cols-3 li:nth-child(3n+3) {
  margin-right: 0;
}

.step-image {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid #eeeeee;
}

.step-image .item > img {
  display: block;
  margin: 0 auto;
}

.step-image .carousel-caption {
  position: static;
  text-align: left;
  color: #818a91;
  text-shadow: none;
}

.step-image .carousel-indicators {
  top: -40px;
  left: 0;
  margin-left: 0;
  text-align: left;
  width: 80%;
  counter-reset: toc1;
}

.step-image .carousel-indicators::before {
  content: "STEPS:";
  color: #818a91;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 34px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 10px;
}

.step-image .carousel-indicators li {
  border: 0;
  text-indent: 0;
  width: 34px;
  height: 34px;
  text-align: center;
}

.step-image .carousel-indicators li:before {
  content: counter(toc1);
  counter-increment: toc1;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #818a91;
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 100%;
  transition: all 0.2s ease;
}

.step-image .carousel-indicators .active::before,
.step-image .carousel-indicators li:hover::before {
  color: #fff;
  background-color: #9e7dd3;
}

.step-image .carousel-control {
  text-shadow: none;
  color: #818a91;
  width: 34px;
  height: 34px;
  font-size: 26px;
}

.step-image .carousel-control.right,
.step-image .carousel-control.left {
  background-image: none;
  top: -40px;
  bottom: auto;
  left: auto;
  right: 0;
}

.step-image .carousel-control.left {
  right: 36px;
}

@media (max-width: 991px) {
  .step-text.step-cols-3 li {
    width: 47%;
    margin-right: 0;
  }
  .step-text.step-cols-3 li:nth-child(odd) {
    margin-right: 4%;
  }
}

@media (max-width: 767px) {
  .step-text li {
    width: 100% !important;
    padding: 0 !important;
  }
  .step-text li::before {
    position: static;
  }
}

/*------------------------------------
- Views
------------------------------------*/
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin-right: 4%;
}

.link-list li:nth-child(3n+3) {
  margin-right: 0;
}

.link-list h5 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
}

.link-list a {
  color: #606873;
  margin-left: 4px;
  line-height: 36px;
  transition: all 0.2s ease;
}

.link-list a:hover {
  color: #9e7dd3;
  text-decoration: none;
}

.link-list a::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-right: 12px;
  border: 1px solid #9e7dd3;
  border-radius: 100%;
  transition: all 0.4s ease;
}

.link-list a:hover::before {
  background-color: #9e7dd3;
}

.link-list a::after {
  content: '';
  display: block;
}

.link-list.cols-4 li {
  width: 21.5%;
  margin-right: 4%;
}

.link-list.cols-4 li:nth-child(4n+4) {
  margin-right: 0;
}

.link-list.cols-2 li {
  width: 47.5%;
  margin-right: 0;
}

.link-list.cols-2 li:nth-child(odd) {
  margin-right: 4%;
}

.link-list.cols-1 li {
  width: 100%;
  margin-right: 0;
}

.list-view {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-view li {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.list-view li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.list-view li p:last-child {
  margin-bottom: 0;
}

.list-view li span {
  color: #96a2b2;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.list-view h5 {
  margin-bottom: 8px;
  margin-top: 16px;
  font-weight: 600;
  color: #000000;
}

.list-view h5 a {
  color: #000000;
}

.list-view .meta-data {
  font-size: 12px;
  font-style: italic;
  color: #96a2b2;
  margin: 0;
}

.list-view.no-border-bottom li {
  border-bottom: 0;
}

.list-view-item {
  padding-bottom: 20px;
}

.list-view-item p:last-child {
  margin-bottom: 0;
}

.list-view-item span {
  color: #96a2b2;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.list-view-item h5 {
  margin-bottom: 8px;
  margin-top: 16px;
  font-weight: 600;
  color: #000000;
}

.list-view-item h5 a {
  color: #000000;
}

.list-view-item .meta-data {
  font-size: 12px;
  font-style: italic;
  color: #96a2b2;
  margin: 0;
}

.list-view-item .read-more {
  text-transform: capitalize;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
}

.list-view-item .read-more:hover {
  text-decoration: none;
}

@media (max-width: 991px) {
  .link-list li {
    width: 47.5%;
    margin-right: 0;
  }
  .link-list li:nth-child(odd) {
    margin-right: 4%;
  }
  .link-list.cols-1 li {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .link-list li {
    width: 100%;
    margin-right: 0;
  }
  .list-view-item {
    margin-bottom: 20px;
  }
}

/*------------------------------------
- Color palette
------------------------------------*/
.color-palette-circular {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
}

.color-palette-circular li {
  display: inline-block;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
  font-weight: 600;
  border-radius: 100%;
  margin-right: 24px;
  margin-bottom: 24px;
  color: #fff;
}

.color-palette-stacked {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
}

.color-palette-stacked li {
  display: block;
  padding: 15px 20px;
  color: #fff;
  font-weight: 600;
}

/*------------------------------------
- Features
------------------------------------*/
.features {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  text-align: center;
  padding-top: 50px;
}

@media (max-width: 1200px) {
    .features-right{
        padding-left: 65px;
    }
    .features-left{
        padding-left: 65px;
    }
}

.features::after {
  content: '';
  display: block;
  clear: both;
}

.features li {
  display: inline-block;
  float: left;
  width: 30%;
  margin-right: 4%;
  margin-bottom: 3%;
}

.features li:nth-child(3n+3) {
  margin-right: 0;
}

.features .icon {
  display: inline-block;
  width: 92px;
  height: 92px;
  line-height: 92px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 72px;
  border-radius: 100%;
  color: #ac90d9;
  transition: all 0.2s ease;
}

.features h5 {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 10px;
}

.features .btn {
  margin-top: 24px;
}

.features.text-center li {
  text-align: center;
}

.features.icon-round .icon {
  background-color: #ac90d9;
  color: #fff;
  font-size: 48px;
}

.features.icon-round li:hover .icon {
  background-color: #a485d6;
}

.features.icon-sided {
  text-align: left;
}

.features.icon-sided .icon {
  float: left;
  width: 40px;
  height: 30px;
  line-height: 30px;
  margin-top: 8px;
  font-size: 25px;
}

.features.icon-sided h5,
.features.icon-sided p {
  margin-left: 50px;
}

.features.icon-sided.icon-round .icon {
  font-size: 18px;
}

.features.icon-image .icon {
  width: 100%;
  height: auto;
  border-radius: 0;
  margin-bottom: 32px;
  line-height: 36px;
}

.features.icon-image .icon img {
  max-width: 100%;
}

.features.cols-2 li {
  width: 42.5%;
  margin-right: 0;
}

.features.cols-2 li:nth-child(odd) {
  margin-right: 4%;
}

.features.cols-1 li {
  width: 100%;
  margin-right: 0;
}

.features .feature:hover .icon-container .icon {
    background: #fff;
    color: #169ce5;
}

.main-color{
    color: #fff;
}
@media (max-width: 767px) {
  .features li {
    width: 100%;
    margin-right: 0;
  }
}

/*------------------------------------
- Files
------------------------------------*/
.file-tree {
  background-color: #fafafa;
  margin: 24px 0;
  padding: 20px 10px 10px;
}

.file-tree ul {
  list-style: none;
  padding-left: 25px;
  display: none;
}

.file-tree > ul {
  display: block;
}

.file-tree li {
  padding: 4px 0;
  line-height: 24px;
}

.file-tree i {
  margin-left: 24px;
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 20px;
  color: #b4b7b8;
  cursor: default;
  transition: color 0.4s ease;
}

.file-tree li:hover > i {
  color: #697376;
}

.file-tree .is-folder > span {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;
  min-width: 120px;
}

.file-tree .is-folder > span::before {
  content: "\f07b";
  font-family: FontAwesome;
  margin-right: 8px;
  color: #8b949e;
  cursor: pointer;
  display: inline-block;
  width: 18px;
}

.file-tree .is-folder.open > span::before {
  content: "\f07c";
}

.file-tree .is-folder.open > ul {
  display: block;
}

.file-tree .is-file > span {
  display: inline-block;
  min-width: 120px;
}

.file-tree .is-file > span::before {
  content: "\f016";
  font-family: FontAwesome;
  margin-right: 8px;
  color: #bec7d2;
  cursor: pointer;
  display: inline-block;
  width: 18px;
}

/*------------------------------------
- Media
------------------------------------*/
img {
  max-width: 100%;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  text-align: center;
  color: #818a91;
}

.img-shadow {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.light-gallery {
  list-style: none;
  padding-left: 0;
}

.light-gallery li {
  margin-bottom: 30px;
}

.lity {
  z-index: 999;
}

.video-js {
  font-size: 10px;
  color: #fff;
}

.videojs-container.ratio-4by3 {
  padding-top: 75%;
}

.videojs-container {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.videojs-container .video-js {
  height: 100% !important;
  width: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

.vjs-poster {
  background-size: cover;
}

.vjs-poster:focus {
  outline: none;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 3em;
  height: 3em;
  width: 3em;
  border: none;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  margin-left: -1.5em;
  margin-top: -1.5em;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.8s ease;
}

.video-js:hover .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.5);
}

.video-js .vjs-control-bar,
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: transparent;
}

.video-js .vjs-slider {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: #fff;
}

.video-js .vjs-volume-bar {
  background-color: rgba(255, 255, 255, 0.2);
}

.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder {
  height: 2px;
}

.video-js .vjs-load-progress {
  background: rgba(255, 255, 255, 0.35);
}

.video-js .vjs-play-progress:before {
  font-size: 6px;
  transition: .2s ease;
}

.video-js:hover .vjs-play-progress:before {
  font-size: 12px;
  top: -5px;
}

.video-js .vjs-load-progress div {
  background: rgba(255, 255, 255, 0.5);
}

.video-js .vjs-progress-holder {
  margin-left: 5px;
  margin-right: 5px;
  transition: all 0.4s ease;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
.video-js .vjs-progress-control:hover .vjs-play-progress:after,
.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: none;
}

.video-js .vjs-progress-holder .vjs-play-progress {
  background-color: #9e7dd3;
}

/*------------------------------------
- Counter
------------------------------------*/
.counter {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 25px;
  left: 12%;
}

.counter i {
  display: block;
  font-size: 48px;
  color: #818a91;
}

.counter h6 {
  text-transform: uppercase;
  font-weight: 400;
}

.key-icon{
    font-size: 78px !important;
    height: 85px;
}

.lock-icon{
    height: 85px;
}

.infrastructure-icon{
    height: 85px;
}

.facts-titletext{
  font-size: 16px;
  margin: 32px 0;
  line-height: 28px;
  color: #373a3c;
  font-family: Raleway, sans-serif;
  border-bottom: 1px solid #fff;
  margin: 0 10px 10px;
  padding-top: 25px;
  padding-bottom: 5px;
  font-weight: 500;
  text-transform: uppercase;
}

.facts-description{
  font-size:16px;
}

.facts-featuretitle{
  font-weight: lighter;
  font-size: 48px;
  font-family: 'Helvetica Neue Light','Helvetica Neue';
  letter-spacing: 3px;
}

.counter.color-alt i,
.counter.color-alt p,
.counter.color-alt h6 {
  color: #fff;
}

@media (max-width: 767px) {
  .counter i {
    font-size: 36px;
  }
  .counter p {
    font-size: 20px;
  }
  .counter h6 {
    font-size: 14px;
  }
  .counter{
    left:0%;
  }
}

/*------------------------------------
- Testimonials
------------------------------------*/
.testimonials li {
  padding: 0 100px;
}

.testimonials li img {
  border-radius: 100%;
  max-width: 128px;
  height: auto;
  float: left;
  margin-right: 24px;
}

.testimonials li p {
  margin-left: 152px;
  margin-top: 0;
  font-family: Raleway, sans-serif;
  font-size: 18px;
  line-height: 32px;
  font-weight: 300;
}

.testimonials li h6 {
  margin-left: 152px;
  font-size: 13px;
  font-weight: 600;
}

.testimonials li h6::before {
  content: '\2014 \00A0';
}

.lSSlideOuter .lSPager.lSpg > li a {
  background-color: transparent;
  border: 1px solid #9e7dd3;
  transition: background-color .3 ease-in;
}

.lSSlideOuter .lSPager.lSpg > li.active a {
  background-color: #9e7dd3;
}

@media (max-width: 991px) {
  .testimonials li {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .testimonials li img {
    max-width: 96px;
    float: none;
    display: block;
    margin: 0 auto;
    margin-bottom: 24px;
  }
  .testimonials li p,
  .testimonials li h6 {
    margin-left: 0;
  }
  .testimonials li p {
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
  }
}

/*------------------------------------
- Requirements
------------------------------------*/
.requirements {
  background-color: #fafafa;
  border-radius: 3px;
  padding: 16px;
}

.requirements .css,
.requirements .js {
  position: relative;
  padding-top: 34px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #373a3c;
}

.requirements .css:before,
.requirements .js:before {
  position: absolute;
  top: 0;
  padding-bottom: 4px;
  color: #c8d0d7;
  border-bottom: 2px solid #ebeef1;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.requirements .css p,
.requirements .js p {
  margin: 0;
}

.requirements .css:before {
  content: "Required Stylesheet";
}

.requirements .js:before {
  content: "Required Script";
}

.requirements > div + div {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .requirements .css,
  .requirements .js {
    word-break: break-all;
  }
}

/*------------------------------------
- FAQ
------------------------------------*/
.faq-items {
  list-style: none;
  padding-left: 0;
}

.faq-items li {
  display: block;
  margin-bottom: 48px;
}

.faq-items h4 {
  color: #9e7dd3;
}

.faq-items p {
  font-size: 15px;
  margin-top: 0;
}

/*------------------------------------
- Changelog
------------------------------------*/
.changelog {
  list-style: none;
  padding-left: 0;
}

.changelog li {
  position: relative;
  padding: 16px 0;
  padding-left: 36px;
  font-size: 15px;
  line-height: 26px;
}

.changelog li::after {
  content: '';
  position: absolute;
  bottom: 0;
  display: block;
  width: 33%;
  border-bottom: 1px solid #eeeeee;
}

.changelog li:last-child::after {
  display: none;
}

.changelog .change-add::before,
.changelog .change-fix::before,
.changelog .change-update::before,
.changelog .change-remove::before {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  font-family: Raleway, sans-serif;
  font-weight: 800;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 100%;
  color: #fff;
  opacity: .8;
}

.changelog .change-add::before {
  content: 'A';
  background-color: #36d678;
}

.changelog .change-fix::before {
  content: 'F';
  background-color: #f0ad4e;
}

.changelog .change-update::before {
  content: 'U';
  background-color: #5bc0de;
}

.changelog .change-remove::before {
  content: 'R';
  background-color: #ff3366;
}

.changelog-guide {
  list-style: none;
  padding-left: 0;
}

.changelog-guide li {
  position: relative;
  display: inline-block;
  float: left;
  width: 25%;
  text-align: center;
  padding-top: 96px;
  font-family: Montserrat, sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #96a2b2;
  letter-spacing: 2px;
}

.changelog-guide .change-add::before,
.changelog-guide .change-fix::before,
.changelog-guide .change-update::before,
.changelog-guide .change-remove::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -36px;
  display: inline-block;
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: 36px;
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  border-radius: 100%;
  color: #fff;
}

.changelog-guide .change-add::before {
  content: 'A';
  background-color: #36d678;
}

.changelog-guide .change-fix::before {
  content: 'F';
  background-color: #f0ad4e;
}

.changelog-guide .change-update::before {
  content: 'U';
  background-color: #5bc0de;
}

.changelog-guide .change-remove::before {
  content: 'R';
  background-color: #ff3366;
}

@media (max-width: 767px) {
  .changelog-guide li {
    width: 50%;
    margin: 16px 0;
    font-size: 18px;
  }
}

/*------------------------------------
- Utility classes
------------------------------------*/
.bg-white {
  background-color: #fff !important;
}

.bg-dark {
  background-color: #161b1f !important;
}

.bg-dark-light {
  background-color: #32333a !important;
}

.bg-dark-lighter {
  background-color: #46474d !important;
}

.bg-dark-lightest {
  background-color: #69696a !important;
}

.bg-gray {
  background-color: #f0f0f0 !important;
}

.bg-gray-light {
  background-color: #f8f9fb !important;
}

.bg-gray-lighter {
  background-color: #fafafa !important;
}

.bg-gray-lightest {
  background-color: #fdfdfd !important;
}

.bg-blue {
  background-color: #89c1e4 !important;
}

.bg-red {
  background-color: #fc6c6c !important;
}

.bg-orange {
  background-color: #fe7c60 !important;
}

.bg-green {
  background-color: #5fd79a !important;
}

.bg-purple {
  background-color: #968eee !important;
}

.txt-white {
  color: #fff !important;
}

.txt-dark {
  color: #161b1f !important;
}

.txt-gray {
  color: #818a91 !important;
}

.txt-blue {
  color: #89c1e4 !important;
}

.txt-red {
  color: #fc6c6c !important;
}

.txt-orange {
  color: #fe7c60 !important;
}

.txt-green {
  color: #5fd79a !important;
}

.txt-purple {
  color: #968eee !important;
}

.no-padding {
  padding: 0;
}

.no-padding-x {
  padding-left: 0;
  padding-right: 0;
}

.no-padding-y {
  padding-top: 0;
  padding-bottom: 0;
}

.no-padding-top {
  padding-top: 0;
}

.no-padding-bottom {
  padding-bottom: 0;
}

.no-margin {
  margin: 0;
}

.no-margin-x {
  margin-left: 0;
  margin-right: 0;
}

.no-margin-y {
  margin-top: 0;
  margin-bottom: 0;
}

.padding-xs {
  padding: 32px 16px;
}

.padding-sm {
  padding: 64px 24px;
}

.padding-md {
  padding: 96px 32px;
}

.padding-lg {
  padding: 128px 48px;
}

.padding-xl {
  padding: 180px 64px;
}

.margin-xs {
  margin: 32px 16px;
}

.margin-sm {
  margin: 64px 24px;
}

.margin-md {
  margin: 96px 32px;
}

.margin-lg {
  margin: 128px 48px;
}

.margin-xl {
  margin: 180px 64px;
}

.m-a-0 {
  margin: 0 !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-x-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-a {
  margin: 16px !important;
}

.m-t {
  margin-top: 16px !important;
}

.m-r {
  margin-right: 16px !important;
}

.m-b {
  margin-bottom: 16px !important;
}

.m-l {
  margin-left: 16px !important;
}

.m-x {
  margin-right: 16px !important;
  margin-left: 16px !important;
}

.m-y {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.m-x-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.m-a-md {
  margin: 24px !important;
}

.m-t-md {
  margin-top: 24px !important;
}

.m-r-md {
  margin-right: 24px !important;
}

.m-b-md {
  margin-bottom: 24px !important;
}

.m-l-md {
  margin-left: 24px !important;
}

.m-x-md {
  margin-right: 24px !important;
  margin-left: 24px !important;
}

.m-y-md {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.m-a-lg {
  margin: 48px !important;
}

.m-t-lg {
  margin-top: 48px !important;
}

.m-r-lg {
  margin-right: 48px !important;
}

.m-b-lg {
  margin-bottom: 48px !important;
}

.m-l-lg {
  margin-left: 48px !important;
}

.m-x-lg {
  margin-right: 48px !important;
  margin-left: 48px !important;
}

.m-y-lg {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.p-a-0 {
  padding: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-a {
  padding: 16px !important;
}

.p-t {
  padding-top: 16px !important;
}

.p-r {
  padding-right: 16px !important;
}

.p-b {
  padding-bottom: 16px !important;
}

.p-l {
  padding-left: 16px !important;
}

.p-x {
  padding-right: 16px !important;
  padding-left: 16px !important;
}

.p-y {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.p-a-md {
  padding: 24px !important;
}

.p-t-md {
  padding-top: 24px !important;
}

.p-r-md {
  padding-right: 24px !important;
}

.p-b-md {
  padding-bottom: 24px !important;
}

.p-l-md {
  padding-left: 24px !important;
}

.p-x-md {
  padding-right: 24px !important;
  padding-left: 24px !important;
}

.p-y-md {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.p-a-lg {
  padding: 48px !important;
}

.p-t-lg {
  padding-top: 48px !important;
}

.p-r-lg {
  padding-right: 48px !important;
}

.p-b-lg {
  padding-bottom: 48px !important;
}

.p-l-lg {
  padding-left: 48px !important;
}

.p-x-lg {
  padding-right: 48px !important;
  padding-left: 48px !important;
}

.p-y-lg {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/*# sourceMappingURL=TheGuide.css.map */