/*!
  Theme Name: Product Demo
  Theme URI: http://preview.decentthemes.com/
  Author: Decent Themes
  Author URI: http://www.decentthemes.com
  Description: Decent Themes products demonstration theme.
  Version: 1.0.0
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain: productdemo
  Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
  */
/*-----------------------------------------------
  >>> TABLE OF CONTENTS:
  -----------------------------------------------
  # Base rules
    ## Typography
    ## Buttons
  # Headline Animator
  # Elements
    ## Section Heading
    ## Demo Item
    ## Feature Item
    ## Statics Item
    ## Testimonial Item
    ## Social Profles
    ## Animated Headline
    ## Animated Objects
  # Sections
    ## Header
    ## Banner
    ## Intro Images
    ## Demo
    ## Features
    ## Callout-action
    ## Statics
    ## Testimonials
    ## Footer
  ---------------------------------------------*/
/*-----------------------------------------------
  # Base rules
  ---------------------------------------------*/
body {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #222222;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

svg {
  display: block;
}

a {
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

a,
a:hover {
  text-decoration: none;
}

[data-image] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.margin-top-m-100 {
  margin-top: -100px;
}

@media (max-width: 767px) {
  .margin-top-m-100 {
    margin-top: -50px;
  }
}

/*-----------------------------------------------
  ## Typography
  ---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/*-----------------------------------------------
  ## Buttons
  ---------------------------------------------*/
.btn__action {
  padding: 10px 15px;
  background-color: transparent;
  color: #FFF;
  font-size: 16px;
  font-size: 1.14286em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 5px;
  border: 2px solid white;
  border-radius: 0;
  position: relative;
}

.btn__action:hover, .btn__action:focus {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: #FFF;
}

@media (min-width: 768px) {
  .btn__action {
    padding: 15px 30px;
    margin: 15px;
  }
}

.btn__filled {
  padding: 10px 15px;
  background-color: var(--theme-color);
  border: 2px solid var(--theme-color);
  border-radius: 0;
  color: #FFF;
  text-transform: uppercase;
  margin: 5px;
  position: relative;
}

.btn__filled:hover, .btn__filled:focus {
  background-color: transparent;
  color: var(--theme-color);
}

.btn__action > i,
.btn__filled > i {
  margin-right: 10px;
}

@media (min-width: 768px) {
  .btn__filled {
    padding: 15px 30px;
    margin: 15px;
  }
}

/*-----------------------------------------------
  ## Preloader
  ---------------------------------------------*/
#Preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #222222;
  z-index: 2000;
}

#Preloader > div {
  position: absolute;
  width: 20px;
  height: 20px;
  -webkit-animation: preloaderAnimation 1s ease infinite;
          animation: preloaderAnimation 1s ease infinite;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}

@-webkit-keyframes preloaderAnimation {
  0%, 100% {
    -webkit-box-shadow: -13px 20px 0 var(--theme-color), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
            box-shadow: -13px 20px 0 var(--theme-color), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
  }
  25% {
    -webkit-box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 var(--theme-color), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
            box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 var(--theme-color), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
  }
  50% {
    -webkit-box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 var(--theme-color), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
            box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 var(--theme-color), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
  }
  75% {
    -webkit-box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 var(--theme-color);
            box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 var(--theme-color);
  }
}

@keyframes preloaderAnimation {
  0%, 100% {
    -webkit-box-shadow: -13px 20px 0 var(--theme-color), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
            box-shadow: -13px 20px 0 var(--theme-color), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
  }
  25% {
    -webkit-box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 var(--theme-color), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
            box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 var(--theme-color), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
  }
  50% {
    -webkit-box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 var(--theme-color), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
            box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 var(--theme-color), -13px 46px 0 rgba(var(--theme-color-rgb), 0.2);
  }
  75% {
    -webkit-box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 var(--theme-color);
            box-shadow: -13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 20px 0 rgba(var(--theme-color-rgb), 0.2), 13px 46px 0 rgba(var(--theme-color-rgb), 0.2), -13px 46px 0 var(--theme-color);
  }
}

/*-----------------------------------------------
  # Elements
  ---------------------------------------------*/
/*-----------------------------------------------
  ## Sectoion Heading
  ---------------------------------------------*/
.Section-heading {
  margin-bottom: 85px;
}

.Section-heading > .title {
  font-size: 30px;
  font-size: 2.14286em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 14px;
}

.Section-heading > .description {
  font-weight: 300;
}

@media (max-width: 1024px) {
  .Section-heading {
    margin-bottom: 50px;
  }
}

/*-----------------------------------------------
  ## Demo Item
  ---------------------------------------------*/
.Demo__item {
  display: block;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  background-color: #FFF;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Demo__item > .Thumb {
  position: relative;
}

.Demo__item > .Thumb > .Image {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Demo__item > .Thumb > a {
  display: inline-block;
  position: absolute;
  padding: 20px 34px;
  font-size: 12px;
  font-size: 0.85714em;
  text-transform: uppercase;
  line-height: 1.1;
  bottom: 48%;
  left: 50%;
  background-color: #222222;
  color: #FFF;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Demo__item > .Thumb > a:hover {
  background-color: var(--theme-color);
}

@media (min-width: 992px) {
  .col-md-3 .Demo__item > .Thumb > a {
    padding: 15px 18px;
  }
}

.Demo__item > .Info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 40px;
  min-height: 150px;
  border-top: 1px solid #eaeaea;
}

@media (min-width: 992px) {
  .col-md-3 .Demo__item > .Info {
    padding: 10px 30px;
  }
}

.Demo__item > .Info .Info-content > h3 {
  font-size: 20px;
  font-size: 1.42857em;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .col-md-3 .Demo__item > .Info .Info-content > h3 {
    font-size: 16px;
    font-size: 1.14286em;
  }
}

.Demo__item > .Info .Info-content > h3 > a {
  color: #222222;
}

.Demo__item > .Info .Info-content > p {
  font-weight: 300;
  margin-bottom: 0;
}

.Demo__item:hover {
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-box-shadow: 0px 16px 26px 0px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 16px 26px 0px rgba(0, 0, 0, 0.16);
}

.Demo__item:hover > .Thumb > .Image {
  opacity: 0.3;
}

.Demo__item:hover > .Thumb > a {
  bottom: 50%;
  opacity: 1;
}

.Demo__item:hover > .Info > .Info-content > h3 > a {
  color: var(--theme-color);
}

.Demo__item-alternate {
  display: block;
  position: relative;
  margin-bottom: 30px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.Demo__item-alternate > .Thumb {
  background-color: #222222;
}

.Demo__item-alternate > .Thumb > .Image {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Demo__item-alternate > .Thumb > a {
  position: absolute;
  top: 30%;
  left: 50%;
  color: #222222;
  background-color: #FFF;
  display: inline-block;
  font-size: 12px;
  font-size: 0.85714em;
  padding: 15px 25px;
  text-transform: uppercase;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Demo__item-alternate > .Thumb > a:hover {
  background-color: var(--theme-color);
  color: #FFF;
}

.Demo__item-alternate > .Info {
  position: absolute;
  bottom: 0;
  background-color: #FFF;
  width: 100%;
  padding: 30px;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Demo__item-alternate > .Info > .Info-content > h3 {
  margin-top: 0;
  margin-bottom: 15px;
  text-transform: uppercase;
  font-size: 18px;
  font-size: 1.28571em;
  color: var(--theme-color);
  opacity: 0;
  -webkit-transform: translateX(10%);
      -ms-transform: translateX(10%);
          transform: translateX(10%);
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0.20s;
       -o-transition-delay: 0.20s;
          transition-delay: 0.20s;
}

.Demo__item-alternate > .Info > .Info-content > h3 > a {
  color: var(--theme-color);
}

.Demo__item-alternate > .Info > .Info-content > p {
  color: #5e5d5d;
  font-weight: 300;
  margin-bottom: 0;
  opacity: 0;
  -webkit-transform: translateX(10%);
      -ms-transform: translateX(10%);
          transform: translateX(10%);
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transition-delay: 0.35s;
       -o-transition-delay: 0.35s;
          transition-delay: 0.35s;
}

.Demo__item-alternate:hover > .Thumb > img {
  opacity: 0.3;
  -webkit-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
          transform: translateY(-10%);
}

.Demo__item-alternate:hover > .Thumb > a {
  opacity: 1;
}

.Demo__item-alternate:hover > .Info {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.Demo__item-alternate:hover > .Info > .Info-content > h3,
.Demo__item-alternate:hover > .Info > .Info-content > p {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/*-----------------------------------------------
  ## Feature Item
  ---------------------------------------------*/
.Feature-item {
  text-align: center;
  background-color: #fbfbfb;
  padding: 34px;
  min-height: 270px;
  max-width: 370px;
  margin: 0 auto 30px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.Feature-item > .Feature-inside > .Icon {
  height: 50px;
  width: 50px;
  margin: 0 auto;
  color: var(--theme-color);
  margin-bottom: 30px;
}

.Feature-item > .Feature-inside > .Icon > i {
  font-size: 50px;
  font-size: 3.57143em;
}

.Feature-item > .Feature-inside > .Content > h4 {
  font-size: 18px;
  font-size: 1.28571em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 20px;
}

.Feature-item > .Feature-inside > .Content > .description {
  font-weight: 300;
}

.Feature-item:hover {
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}

.Feature-item--alternate {
  margin: 0 auto 50px auto;
  max-width: 360px;
  min-height: 170px;
}

.Feature-item--alternate:before, .Feature-item--alternate:after {
  content: "";
  display: table;
}

.Feature-item--alternate:after {
  clear: both;
}

.Feature-item--alternate > .Feature-inside > .Icon {
  width: 50px;
  float: left;
}

.Feature-item--alternate > .Feature-inside > .Icon > i {
  font-size: 48px;
  font-size: 3.42857em;
}

.Feature-item--alternate > .Feature-inside > .Content {
  padding-left: 90px;
}

.Feature-item--alternate > .Feature-inside > .Content > h4 {
  font-size: 18px;
  font-size: 1.28571em;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 25px;
}

.Feature-item--alternate > .Feature-inside > .Content > .description {
  line-height: 28px;
  line-height: 2em;
  font-weight: 300;
}

/*-----------------------------------------------
  ## Statics Item
  ---------------------------------------------*/
.Statics-item {
  margin-bottom: 30px;
  text-align: center;
}

.Statics-item > .amount {
  font-size: 60px;
  font-size: 4.28571em;
  line-height: 1;
  margin-bottom: 20px;
  font-weight: 700;
}

.Statics-item > .title {
  margin-top: 0;
  font-size: 24px;
  font-size: 1.71429em;
  text-transform: uppercase;
  font-weight: 400;
}

@media (max-width: 600px) {
  .Statics-item > .amount {
    font-size: 40px;
    font-size: 2.85714em;
    margin-bottom: 10px;
  }
  .Statics-item > .title {
    font-size: 16px;
    font-size: 1.14286em;
  }
}

/*-----------------------------------------------
  ## Testimonial Item
  ---------------------------------------------*/
.Testimonial-item {
  max-width: 570px;
  margin: 0 auto 50px;
}

.Testimonial-item:before, .Testimonial-item:after {
  content: "";
  display: table;
}

.Testimonial-item:after {
  clear: both;
}

.Testimonial-item > .Content {
  background-color: var(--theme-color);
  color: #FFF;
  line-height: 28px;
  line-height: 2em;
  padding: 30px 35px;
  border-radius: 5px;
  position: relative;
}

.Testimonial-item > .Content:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: var(--theme-color) transparent transparent transparent;
  position: absolute;
  bottom: -12px;
  right: 55px;
}

.Testimonial-item > .Content > .Stars {
  color: #ffd74b;
  margin-bottom: 10px;
}

.Testimonial-item > .Content > .Stars > span {
  margin: 2px;
  width: 16px;
  height: 16px;
}

.Testimonial-item > .Meta {
  float: right;
  margin-top: 30px;
  padding-right: 40px;
}

.Testimonial-item > .Meta > .Info {
  text-align: right;
  float: left;
  padding-right: 25px;
  margin-top: 12px;
}

.Testimonial-item > .Meta > .Info > h4 {
  font-size: 16px;
  font-size: 1.14286em;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 5px;
}

.Testimonial-item > .Meta > .Info > .job {
  font-size: 12px;
  font-size: 0.85714em;
  opacity: 0.7;
}

.Testimonial-item > .Meta > .Image {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}

.Testimonial-item > .Meta > .Image > img {
  width: 100%;
  height: auto;
}

/*-----------------------------------------------
  ## Social Profles
  ---------------------------------------------*/
.Social-profiles {
  padding: 0;
  margin: 0;
}

.Social-profiles > li {
  display: inline-block;
}

.Social-profiles > li + li {
  margin-left: 10px;
}

.Social-profiles > li > a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e7e7e7;
  color: #222222;
  padding: 12px;
}

.Social-profiles > li > a > .svg-icon {
  width: 14px;
  height: 14px;
  margin: 0 auto;
}

.Social-profiles > li > a:hover {
  color: #FFF;
  background-color: var(--theme-color);
}

/*-----------------------------------------------
  ## Animated Headline
  ---------------------------------------------*/
.Animated-headline {
  position: relative;
}

.Animated-headline > .dt-animated-headline {
  position: relative;
  line-height: 1;
}

.Animated-headline > .dt-animated-headline > .dt-words-wrapper {
  display: inline-block;
}

.Animated-headline > .dt-animated-headline > .dt-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: center;
  -webkit-perspective: 300px;
          perspective: 300px;
}

.Animated-headline > .dt-animated-headline > .dt-words-wrapper > b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
  opacity: 0;
}

.Animated-headline > .dt-animated-headline > .dt-words-wrapper > b.is-visible {
  position: relative;
  opacity: 1;
  -webkit-animation: heading-zoom-in 0.8s;
          animation: heading-zoom-in 0.8s;
}

.Animated-headline > .dt-animated-headline > .dt-words-wrapper > b.is-hidden {
  -webkit-animation: heading-zoom-out 0.8s;
          animation: heading-zoom-out 0.8s;
}

@-webkit-keyframes heading-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@keyframes heading-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@-webkit-keyframes heading-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
  }
}

@keyframes heading-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
  }
}

/*-----------------------------------------------
  ## Animated Objects
  ---------------------------------------------*/
.Animated-objects {
  position: relative;
  overflow: hidden;
}

.Animated-objects > .container {
  position: relative;
  z-index: 2;
}

.Animated-objects .Animated-styles {
  position: absolute;
  z-index: 1;
}

.Animated-objects .Animated-styles.top-left {
  top: 0;
  left: 0;
}

.Animated-objects .Animated-styles.top-left > .circle:nth-child(1) {
  top: -175px;
  left: -80px;
}

.Animated-objects .Animated-styles.top-left > .circle:nth-child(2) {
  top: -180px;
  left: -110px;
}

.Animated-objects .Animated-styles.top-left > .circle:nth-child(3) {
  top: -145px;
  left: -160px;
}

.Animated-objects .Animated-styles.top-right {
  top: 0;
  right: 0;
}

.Animated-objects .Animated-styles.top-right > .circle:nth-child(1) {
  top: -175px;
  right: -80px;
  left: auto;
}

.Animated-objects .Animated-styles.top-right > .circle:nth-child(2) {
  top: -180px;
  right: -110px;
  left: auto;
}

.Animated-objects .Animated-styles.top-right > .circle:nth-child(3) {
  top: -145px;
  right: -160px;
  left: auto;
}

.Animated-objects .Animated-styles.bottom-left {
  bottom: 0;
  left: 0;
}

.Animated-objects .Animated-styles.bottom-right {
  bottom: 0;
  right: 0;
}

.Animated-objects .Animated-styles.bottom-right > .circle:nth-child(1) {
  right: -30px;
  left: auto;
}

.Animated-objects .Animated-styles.bottom-right > .circle:nth-child(2) {
  right: -75px;
  left: auto;
}

.Animated-objects .Animated-styles.bottom-right > .circle:nth-child(3) {
  right: -160px;
  left: auto;
}

.Animated-objects .Animated-styles > .circle {
  display: block;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background-color: var(--theme-color);
  position: absolute;
  top: 0;
}

.Animated-objects .Animated-styles > .circle:nth-child(1) {
  top: -120px;
  left: -30px;
  opacity: 0.3;
}

.Animated-objects .Animated-styles > .circle:nth-child(2) {
  top: -150px;
  left: -75px;
  opacity: 0.6;
}

.Animated-objects .Animated-styles > .circle:nth-child(3) {
  top: -100px;
  left: -120px;
}

.Animated-objects .Animated-styles.size-2x > .circle {
  width: 380px;
  height: 380px;
}

.Animated-objects .Animated-styles--alternate > .circle {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
}

.Animated-objects .Animated-styles--alternate > .circle:before {
  content: '';
  width: 100%;
  height: 100%;
  border: 4px solid var(--theme-color);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.Animated-objects .Animated-styles--alternate > .circle:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  border-radius: 50%;
  opacity: 0.6;
  top: 10%;
  z-index: 1;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}

.Animated-objects .Animated-styles--alternate > .circle.size-2x {
  width: 290px;
  height: 290px;
}

.Animated-objects .Animated-styles--alternate > .circle.size-2x:after {
  top: 3%;
}

.Animated-objects .Animated-styles--alternate > .circle.top-right {
  top: 200px;
  right: 100px;
}

.Animated-objects .Animated-styles--alternate > .circle.middle-left {
  left: 100px;
  top: 50%;
}

.Animated-objects .Animated-styles--alternate > .circle.bottom-right {
  bottom: 30%;
  right: 200px;
}

.Animated-objects .Animated-styles--alternate > .circle.bottom2-right {
  bottom: 100px;
  right: 25px;
}

.Animated-objects .Animated-images > img {
  position: absolute;
}

.Animated-objects .Animated-images > img.top-left {
  top: 250px;
  left: 150px;
}

.Animated-objects .Animated-images > img.top-right {
  top: 150px;
  right: 20px;
}

.Animated-objects .Animated-images > img.bottom-left {
  left: -100px;
  bottom: 0;
}

.Animated-objects .Animated-images > img.bottom-right {
  bottom: 0;
  right: -30px;
}

@media (max-width: 1199px) {
  .Animated-objects .Animated-images {
    display: none;
  }
}

/*-----------------------------------------------
  # Sections
  ---------------------------------------------*/
/*-----------------------------------------------
  ## Header
  ---------------------------------------------*/
#Header {
  position: relative;
}

#Header .container-fluid {
  max-width: 1275px;
}

#Header .navbar {
  border-radius: 0;
  background-color: #FFF;
  border: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1030;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
}

#Header .navbar.navbar-fixed-top {
  position: fixed;
  -webkit-animation: nav_fixed_pos 0.35s;
          animation: nav_fixed_pos 0.35s;
}

#Header .navbar-brand {
  text-transform: uppercase;
  font-weight: 700;
  color: #FFF;
  max-height: 50px;
  padding: 10px 15px;
}

#Header .navbar-brand > img {
  width: auto;
  height: 100%;
}

#Header .navbar-brand > img:first-child {
  display: none;
}

#Header .nav > li {
  border-top: 1px solid #DDD;
}

#Header .nav > li > a {
  text-transform: uppercase;
  color: #222222;
}

#Header .nav > li > a:hover,
#Header .nav > li.active > a {
  color: var(--theme-color);
}

#Header .nav > li.Purchase-btn {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: none;
}

#Header .nav > li.Purchase-btn > a {
  display: inline-block;
  background-color: var(--theme-color);
  border: 2px solid var(--theme-color);
  border-radius: 0;
  color: #FFF;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
}

#Header .nav > li.Purchase-btn > a:hover, #Header .nav > li.Purchase-btn > a:focus {
  background-color: transparent;
  color: var(--theme-color);
}

#Header .navbar-toggle {
  border-radius: 0;
  border-color: var(--theme-color);
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

#Header .navbar-toggle > span {
  background-color: var(--theme-color);
}

#Header .navbar-toggle:hover {
  background-color: var(--theme-color);
}

#Header .navbar-toggle:hover > span {
  background-color: #FFF;
}

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

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

@media (min-width: 768px) {
  #Header {
    height: 80px;
  }
  #Header .navbar {
    min-height: 80px;
  }
  #Header .navbar-brand {
    height: 80px;
    max-height: 80px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #Header .navbar-collapse {
    padding-left: 15px;
    padding-right: 15px;
  }
  #Header .nav > li {
    border-top: 0;
  }
  #Header .nav > li > a {
    background-color: transparent;
    padding: 30px 25px;
  }
  #Header .nav > li.Purchase-btn {
    text-align: left;
    margin-top: 0;
  }
  #Header .nav > li.Purchase-btn > a {
    display: block;
    margin-top: 17px;
    margin-left: 15px;
    padding: 12px 20px;
  }
  #Header.transparent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) {
    background-color: transparent;
    border-bottom: 1px solid rgba(170, 170, 170, 0.4);
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) .navbar-brand > img:first-child {
    display: block;
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) .navbar-brand > img:last-child {
    display: none;
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) .nav > li > a {
    color: #FFF;
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) .nav > li > a:hover,
  #Header.transparent .navbar:not(.navbar-fixed-top) .nav > li.active > a {
    background-color: transparent;
    color: var(--theme-color);
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) .nav > li.Purchase-btn {
    padding: 0;
    display: none;
  }
  #Header.transparent .navbar:not(.navbar-fixed-top) .nav > li.Purchase-btn > a {
    display: block;
    padding: 12px 20px;
  }
}

/*-----------------------------------------------
  ## Banner
  ---------------------------------------------*/
#Banner {
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 100;
  color: #FFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#Banner:not(.banner-ripples-effect) {
  -webkit-transition: height 0.75s ease-in-out;
  -o-transition: height 0.75s ease-in-out;
  transition: height 0.75s ease-in-out;
}

#Banner > .Banner-content {
  margin-top: 150px;
  margin-bottom: 150px;
  width: 100%;
  position: relative;
}

#Banner > .Banner-content .product-title {
  text-transform: uppercase;
  margin-top: 0;
  font-size: 16px;
  font-size: 1.14286em;
  letter-spacing: 0.2em;
  color: #bfbfbf;
  margin-bottom: 15px;
}

#Banner > .Banner-content .product-desc {
  margin-bottom: 25px;
  font-size: 20px;
  font-size: 1.42857em;
}

#Banner > .Banner-content .Action-buttons {
  margin-bottom: 25px;
}

#Banner > .Banner-content .dt-animated-headline {
  font-size: 30px;
  font-size: 2.14286em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#Banner > .Go-to-preview {
  display: block;
  position: absolute;
  color: #FFF;
  bottom: 30px;
  left: 50%;
  -webkit-animation: arrowDown 2s infinite;
          animation: arrowDown 2s infinite;
}

#Banner > .Go-to-preview > i {
  font-size: 28px;
}

#Banner > .Go-to-preview:focus, #Banner > .Go-to-preview:hover {
  text-decoration: none;
}

#Banner > .Intro-content {
  position: relative;
  width: 100%;
  margin-top: 150px;
  margin-bottom: 150px;
}

#Banner > .Intro-content .small-title {
  font-size: 16px;
  font-size: 1.14286em;
}

#Banner > .Intro-content .product-title {
  font-size: 30px;
  font-size: 2.14286em;
  margin-bottom: 20px;
}

#Banner > .Intro-content .description {
  font-weight: 300;
  margin-bottom: 30px;
}

@-webkit-keyframes arrowDown {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes arrowDown {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

#Logo {
  display: block;
  max-width: 150px;
  margin: 0 auto;
  margin-bottom: 30px;
}

#Logo > img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  #Banner {
    min-height: 750px;
  }
  #Banner > .Banner-content .product-title {
    font-size: 22px;
    font-size: 1.57143em;
    margin-bottom: 45px;
  }
  #Banner > .Banner-content .dt-animated-headline {
    font-size: 54px;
    font-size: 3.85714em;
    margin-bottom: 60px;
  }
  #Banner > .Intro-content .small-title {
    font-size: 20px;
    font-size: 1.42857em;
    margin-bottom: 20px;
  }
  #Banner > .Intro-content .product-title {
    font-size: 40px;
    font-size: 2.85714em;
  }
  #Banner > .Intro-content .description {
    margin-bottom: 50px;
  }
  #Logo {
    max-width: 250px;
    margin-bottom: 90px;
  }
}

/*-----------------------------------------------
  ## Intro Images
  ---------------------------------------------*/
#Intro-images {
  position: absolute;
  z-index: 100;
  width: 100%;
}

#Intro-images .product-screenshots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: justify;
      align-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#Intro-images .product-screenshots > .item > img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  #Intro-images .product-screenshots > .item:nth-child(2),
  #Intro-images .product-screenshots > .item:nth-last-child(2) {
    display: none;
  }
}

/*-----------------------------------------------
  ## Demo
  ---------------------------------------------*/
.Demo {
  padding-top: 50px;
  padding-bottom: 50px;
}

.Demo--gray-bg {
  background-color: #fbfbfb;
}

.Demo > .container-fluid {
  max-width: 1275px;
}

#Intro-images + #DemoContainer > section:first-child {
  padding-top: 100px;
}

@media (min-width: 992px) {
  .Demo {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  #Intro-images + #DemoContainer > section:first-child {
    padding-top: 200px;
  }
}

/*-----------------------------------------------
  ## Features
  ---------------------------------------------*/
.Features {
  padding-top: 50px;
  padding-bottom: 50px;
}

.Features--gray-bg {
  background-color: #111111;
}

.Features--alternate {
  overflow: hidden;
  background-color: var(--theme-color);
  padding-top: 100px;
  padding-bottom: 100px;
  color: #FFF;
}

.Features--alternate .Features-list {
  margin-top: 50px;
}

.Features--alternate .Mockup {
  margin-top: 50px;
  text-align: right;
}

@media (min-width: 992px) {
  .Features {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/*-----------------------------------------------
  ## Callout-action
  ---------------------------------------------*/
.Callout-action {
  background-color: #111111;
  color: #FFF;
  padding-top: 66px;
  padding-bottom: 66px;
}

.Callout-action .Action-info > .title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 24px;
  font-size: 1.71429em;
  font-weight: 600;
  text-transform: uppercase;
}

.Callout-action .Action-info > .description {
  margin-bottom: 0;
  font-weight: 300;
  margin-bottom: 25px;
}

.Callout-action .Action-info > .btn {
  background-color: var(--theme-color);
  border: 2px solid var(--theme-color);
  border-radius: 0;
  font-size: 12px;
  font-size: 0.85714em;
  text-transform: uppercase;
  padding: 15px 30px;
  color: #FFF;
}

.Callout-action .Action-info > .btn:hover {
  background-color: transparent;
  color: var(--theme-color);
}

@media (min-width: 768px) {
  .Callout-action .Action-info {
    padding-right: 200px;
    position: relative;
  }
  .Callout-action .Action-info > .description {
    margin-bottom: 0;
  }
  .Callout-action .Action-info > .btn {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

/*-----------------------------------------------
  ## Statics
  ---------------------------------------------*/
.Statics {
  padding-top: 80px;
  padding-bottom: 50px;
  background-color: #2d2d2d;
  color: #FFF;
}

.Statics > .container-fluid {
  max-width: 1275px;
  margin: 0 auto;
}

/*-----------------------------------------------
  ## Testimonials
  ---------------------------------------------*/
.Testimonials {
  margin-top: 75px;
  margin-bottom: 75px;
}

.Testimonials > .container-fluid {
  max-width: 1275px;
}

@media (min-width: 992px) {
  .Testimonials {
    margin-top: 145px;
    margin-bottom: 170px;
  }
}

/*-----------------------------------------------
  ## Footer
  ---------------------------------------------*/
#Footer {
  background-color: #111111;
  color: #FFF;
  padding-top: 80px;
  text-align: center;
}

#Footer h3 {
  font-size: 30px;
  font-size: 2.14286em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 50px;
}

#Footer .Copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 80px;
  padding-top: 25px;
  padding-bottom: 25px;
}

#Footer .Copyright .Logo {
  display: inline-block;
  max-width: 170px;
  margin-bottom: 30px;
}

#Footer .Copyright .Logo > img {
  max-width: 100%;
  height: auto;
}

#Footer .Copyright .notice {
  opacity: 0.4;
}

.Footer-alternate > .Footer-content .Logo {
  display: inline-block;
  max-width: 170px;
  margin-bottom: 26px;
}

.Footer-alternate > .Footer-content .Logo > img {
  max-width: 100%;
  height: auto;
}

.Footer-alternate > .Footer-content .btn {
  background-color: var(--theme-color);
  border: 2px solid var(--theme-color);
  color: #fff;
  text-transform: uppercase;
  border-radius: 0;
  font-size: 12px;
  font-size: 0.85714em;
  padding: 15px 30px;
}

.Footer-alternate > .Footer-content .btn:hover {
  background-color: transparent;
  color: var(--theme-color);
}

.Footer-alternate > .Copyright {
  background-color: #fbfbfb;
  color: #222222;
  text-align: left;
}

.Footer-alternate > .Copyright > .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.Footer-alternate > .Copyright > .container > div {
  width: 50%;
}

.Footer-alternate > .Copyright p {
  margin-bottom: 0;
}

.Footer-alternate > .Copyright .Social-profiles {
  text-align: right;
}

@media (max-width: 767px) {
  .Footer-alternate > .Copyright {
    text-align: center;
  }
  .Footer-alternate > .Copyright > .container {
    display: block;
  }
  .Footer-alternate > .Copyright > .container > div {
    width: auto;
  }
  .Footer-alternate > .Copyright > .container > div + div {
    margin-top: 20px;
  }
  .Footer-alternate > .Copyright .Social-profiles {
    text-align: center;
  }
}