/*
 =========================================================
 =========================================================
 *** CSS table of contents ***
 =========================================================
 =========================================================
 *  1 * General (body, page, sections)  
 =========================================================
 *  2 * Typography
 =========================================================
 *  3 * Loading Screen
 =========================================================
 *  4 * Buttons
 =========================================================
 *  5 * Navigation Bar (menu)
 =========================================================
 *  6 * Hero Section
 =========================================================
 *  7 * Services Section
 =========================================================
 *  8 * Testimonials Section
 =========================================================
 *  9 * Features Section
 =========================================================
 * 10 * Stats Section
 =========================================================
 * 11 * Steps Section
 =========================================================
 * 12 * Premium Section
 =========================================================
 * 13 * Screenshots Section
 =========================================================
 * 14 * Video Section
 =========================================================
 * 15 * Partners Section
 =========================================================
 * 16 * Comment Section
 =========================================================
 * 17 * Pricing Section
 =========================================================
 * 18 * Team Section
 =========================================================
 * 19 * Reviews Section
 =========================================================
 * 20 * Register & contact form Section
 =========================================================
 * 21 * Map Section
 =========================================================
 * 22 * Download Section
 =========================================================
 * 23 * Contact Information Section
 =========================================================
 * 24 * Footer
 =========================================================
 * 25 * Coming Soon Pages
 =========================================================
 * 26 * Full-screen Modal
 =========================================================
 * 27 * Sticky Action Button
 =========================================================
 * 28 * Scroll To Top
 =========================================================
 * 29 * Icons
 =========================================================
 * 30 * type.js Customization
 =========================================================
 * 30 * VenoBox.js Customization
 =========================================================
 * 31 * Decorative Elements
 =========================================================
 * 32 * General
 =========================================================
 * 33 * Flex Containers and Items
 =========================================================
 * 34 * Animations
 =========================================================
 =========================================================
 */



 /***** GENERAL *****/

 html,
 body {
     font-family: 'Raleway', sans-serif;
     font-size: 1rem;
     margin: 0px;
     height: 100%;
     background-color: #FFFFFF;
 }

 #page {
     -webkit-animation-name: fadeInOpacity;
     animation-name: fadeInOpacity;
     -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
     -webkit-animation-duration: 1.5s;
     animation-duration: 1.5s;
 }

 footer {
     font-size: 15px;
     padding-top: 3rem;
 }

 a:hover {
     color: transparent;
     text-decoration: none;
 }

 a.base-color-anchor:hover {
     border-bottom: 1px solid white;
     color: white;
     text-decoration: none;
 }

 section {
     padding-top: 100px;
     padding-bottom: 100px;
 }

 /* for sections that need a max-width on small screens */
 @media (max-width: 767px) and (min-width: 576px) {
     .container-mobile-fluid {
         max-width: 25rem;
     }
 }

 @media (max-width: 767px) {
     .container-mobile-fluid {
         max-width: 20rem;
     }
 }

 .separator {
     text-align: center;
 }

 .section-title {
     text-align: center;
     color: #242527;
 }

 .section-subtitle,
 .section-subtitle-2,
 .section-footer {
     text-align: center;
     margin-top: 0;
 }

 .section-subtitle,
 .section-footer {
     color: #242527;
 }

 .section-subtitle-2 {
     color: #666666;
 }

 .section-subtitle-anchor {
     color: #898989;
 }

 .section-subtitle-anchor i {
     margin-right: 10px;
 }

 .section-subtitle.bottom-decoration::after,
 .section-title.bottom-decoration::after {
     content: '';
     position: absolute;
     display: block;
     width: 50px;
     height: 2px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     margin-top: 20px;
 }

 .section-footer-title {
     text-align: center;
     color: #242527;
     letter-spacing: 0.1rem;
 }

 .section-footer-subtitle {
     text-align: center;
     color: #898989;
     margin-top: 0;
 }

 .section-footer {
     margin-top: 50px;
 }

 .page-section {
     padding-top: 100px;
     padding-bottom: 100px;
 }

 @media screen and (max-width: 767px) {
     .page-section {
         padding-top: 50px;
         padding-bottom: 50px;
     }
 }

 .page-section-nopadding {
     padding-top: 0;
     padding-bottom: 0;
 }

 .page-section-no-bottompadding {
     padding-bottom: 0;
 }

 .page-section-no-toppadding {
     padding-top: 0;
 }

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

 @media screen and (max-width: 767px) {
     .page-section-padding-sm {
         padding-top: 25px;
         padding-bottom: 25px;
     }
 }

 .auto-height {
     height: auto;
 }

 .hero.parallax,
 #testimonials.parallax,
 #video.parallax,
 #comment.parallax,
 .footer-bg-img.parallax {
     background-attachment: fixed;
 }

 @media screen and (max-width: 767px) {

     .hero.parallax,
     #testimonials.parallax,
     #video.parallax,
     #comment.parallax,
     .footer-bg-img.parallax {
         background-attachment: scroll;
     }
 }

 .height-100 {
     height: 100px;
 }

 /***** END OF GENERAL *****/



 /***** TYPOGRAPHY *****/

 h1 {
     font-family: 'Raleway', sans-serif;
     letter-spacing: 0.1rem;
     text-transform: uppercase;
     color: #FFFFFF;
 }

 @media screen and (min-width: 992px) {
     h1 {
         font-weight: 700;
         font-size: 6rem;
     }
 }

 @media screen and (max-width: 991px) and (min-width: 768px) {
     h1 {
         font-weight: 700;
         font-size: 4rem;
     }
 }

 @media screen and (max-width: 767px) {
     h1 {
         font-weight: 700;
         font-size: 3rem;
     }
 }

 h2 {
     font-family: 'Raleway', sans-serif;
     letter-spacing: 0.1rem;
     color: #FFFFFF;
 }

 @media screen and (min-width: 992px) {
     h2 {
         font-weight: 700;
         font-size: 4.5rem;
     }
 }

 @media screen and (max-width: 991px) and (min-width: 768px) {
     h2 {
         font-weight: 700;
         font-size: 3rem;
     }
 }

 @media screen and (max-width: 767px) {
     h2 {
         font-weight: 700;
         font-size: 2.5rem;
     }
 }

 h3 {
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
     letter-spacing: 0.1em;
     color: #434343;
 }

 @media screen and (min-width: 992px) {
     h3 {
         font-size: 3rem;
     }
 }

 @media screen and (max-width: 991px) and (min-width: 768px) {
     h3 {
         font-size: 2.5rem;
     }
 }

 @media screen and (max-width: 767px) {
     h3 {
         font-size: 2rem;
     }
 }

 h4 {
     font-family: 'Quattrocento Sans', sans-serif;
     letter-spacing: 0.3em;
     font-weight: 400;
     color: #242527;
 }

 @media screen and (min-width: 992px) {
     h4 {
         font-size: 2rem;
     }
 }

 @media screen and (max-width: 991px) and (min-width: 768px) {
     h4 {
         font-size: 1.5rem;
     }
 }

 @media screen and (max-width: 767px) {
     h4 {
         font-size: 1rem;
     }
 }

 h5 {
     font-family: 'Raleway', sans-serif;
     font-weight: bold;
     letter-spacing: 0.1rem;
     text-transform: uppercase;
     color: #434343;
 }

 @media screen and (min-width: 992px) {
     h5 {
         font-size: 1rem;
     }
 }

 @media screen and (max-width: 991px) and (min-width: 768px) {
     h5 {
         font-size: 1rem;
     }
 }

 @media screen and (max-width: 767px) {
     h5 {
         font-size: 0.8rem;
     }
 }

 p {
     font-size: 1rem;
     line-height: 1.5rem;
     color: #898989;
 }

 span {
     font-family: 'Raleway', sans-serif;
 }

 .number {
     text-align: center;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
     letter-spacing: 0;
 }

 h4 sub {
     letter-spacing: 0;
     font-size: 1rem;
 }

 /***** END OF TYPOGRAPHY *****/



 /***** LOADING SCREEN *****/

 #loader {
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 99999;
     /* higher than anything on the page */
     width: 100vw;
     max-width: 100%;
     height: 100vh;
     background-color: white;
     overflow: hidden;
 }

 .loader-status {
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
     align-items: center;
     height: 100%;
 }

 .loader-status span {
     font-size: 1.5rem;
     letter-spacing: 0.2rem;
     font-weight: 700;
 }

 .spinning-loader {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: transparent;
     animation: rotate-spinning-loader 1s linear infinite;
     margin: 1rem auto;
 }

 /***** END OF LOADING SCREEN *****/



 /***** BUTTONS *****/

 .btn-custom-lg {
     color: white;
     border-color: #FFFFFF;
     border-width: 2px;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
     font-size: 1.3rem;
     letter-spacing: 0.15rem;
     border-radius: 100px;
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 40px;
     padding-right: 40px;
     margin-top: 20px;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .btn-custom-sm {
     color: white;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     letter-spacing: 0.1rem;
     border-radius: 100px;
     padding-left: 40px;
     padding-right: 40px;
     margin-bottom: 1rem;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .btn-custom-sm.transparent {
     background: transparent;
 }

 .btn-custom-sm.no-radius {
     border-radius: 0;
 }

 .btn-custom-submit {
     color: white;
     border-color: #FFFFFF;
     border-width: 2px;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 400;
     font-size: 1.2rem;
     letter-spacing: 0.05rem;
     border-radius: 100px;
     width: 100%;
     margin-top: 20px;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .btn-custom-lg:hover,
 .btn-custom-submit:hover {
     background: #FFFFFF;
 }

 .btn-custom-sm:hover {
     background: transparent;
 }

 .btn-custom-sm.transparent.light-border {
     border-color: #FFFFFF;
 }

 .btn-custom-lg:hover,
 .btn-custom-submit:hover {
     border-width: 2px;
 }

 .btn-custom-google {
     color: white;
     background-color: #4285f4;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     letter-spacing: 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border-radius: 4px;
     padding: 8px 0;
     margin-bottom: 16px;
     text-align: center;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
     width: 8rem;
     margin-right: 0.5rem;
     margin-left: 0.5rem;
 }

 .btn-custom-google:hover {
     background-color: #0759E4;
     color: white;
     text-decoration: none;
     border-width: 0;
 }

 .btn-custom-facebook {
     color: white;
     background-color: #3b5998;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
     font-size: 1rem;
     letter-spacing: 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border-radius: 4px;
     padding: 8px 0;
     margin-bottom: 16px;
     text-align: center;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
     width: 8rem;
     margin-right: 0.5rem;
     margin-left: 0.5rem;
 }

 .btn-custom-facebook:hover {
     background-color: #14306B;
     color: white;
     text-decoration: none;
     border-width: 0;
 }

 /***** END OF BUTTONS *****/



 /***** NAVIGATION BAR *****/

 .navbar {
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .navbar.hidden-top {
     display: none;
 }

 .nav-item {
     text-align: center;
     padding-bottom: 0.5rem;
     padding-top: 0.5rem;
 }

 .main-nav-with-bg {
     border-bottom: 1px solid #FFFFFF;
 }

 .nav-link-custom {
     padding-right: 40px;
     color: #FFFFFF;
     font-family: 'Raleway', sans-serif;
     font-size: 14px;
     font-weight: bold;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     border-bottom: 1px solid transparent;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .nav-btn-custom {
     color: #FFFFFF;
     border: 1px solid #FFFFFF;
     font-family: 'Raleway', sans-serif;
     font-size: 14px;
     font-weight: bold;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     padding-left: 20px;
     padding-right: 20px;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .nav-btn-custom:hover {
     border-bottom: 1px solid #FFFFFF;
     text-decoration: none;
     background: #FFFFFF;
 }

 .nav-search-custom {
     cursor: pointer;
     display: block;
     padding-top: 0.3rem;
     padding-left: 2rem;
 }

 .nav-search-custom i {
     color: #FFFFFF;
 }

 .nav-search-custom:hover {
     border-bottom: none;
 }

 .navbar-dark.navbar-expand-lg .nav-link-custom {
     color: #666666;
 }

 .navbar-dark.navbar-expand-lg .nav-link-custom:hover {
     color: #666666;
     border-bottom: 1px dashed #666666;
     text-decoration: none;
 }

 .navbar-dark.navbar-expand-lg.main-nav-with-bg .nav-link-custom {
     color: #FFFFFF;
 }

 .navbar-dark.navbar-expand-lg .nav-btn-custom {
     color: #666666;
     border: 1px solid #666666;
 }

 .navbar-dark.navbar-expand-lg .nav-btn-custom:hover {
     color: #FFFFFF;
     background: #666666;
 }

 .navbar-dark.navbar-expand-lg.main-nav-with-bg .nav-btn-custom {
     color: #FFFFFF;
     border: 1px solid #FFFFFF;
 }

 .navbar-dark.navbar-expand-lg.main-nav-with-bg .nav-search-custom i {
     color: #FFFFFF;
 }

 .navbar-dark.navbar-expand-lg .nav-search-custom i {
     color: #666666;
 }

 .navbar-dark.navbar-expand-lg.main-nav-with-bg .nav-btn-custom:hover {
     background: #FFFFFF;
 }

 @media (min-width:992px) {
     .nav-link-custom:hover {
         color: #FFFFFF;
         text-decoration: none;
         border-bottom: 1px dashed #FFFFFF;
     }

     .main-nav-with-bg .nav-link-custom:hover,
     .navbar-dark.navbar-expand-lg.main-nav-with-bg .nav-link-custom:hover {
         border-bottom: 1px dashed #FFFFFF;
         text-decoration: none;
     }

     /* when scrolling in that area, show the link as active */
     .nav-link-custom.active {
         border-bottom: 1px solid #FFFFFF;
         text-decoration: none;
     }

     .navbar-expand-lg .navbar-nav .nav-link {
         margin-right: 2rem;
     }
 }

 @media (max-width:991px) {

     .navbar-dark.navbar-expand-lg .nav-link-custom:hover,
     .navbar-expand-lg .nav-link-custom:hover {
         color: #FFFFFF;
         border-bottom: 1px dashed white;
     }

     .nav-search-custom {
         padding-left: 0;
     }
 }

 .nav-toggler-custom-container {
     vertical-align: middle;
 }

 /* hide dark logo on solid navigation menu */
 .navbar-dark.navbar-expand-lg.main-nav-with-bg .brand-logo-dark {
     display: none;
 }

 /* hide default logo on navbar dark with transparent background */
 .navbar-dark.navbar-expand-lg .brand-logo {
     display: none;
 }

 /* show default logo on solid navigation menu */
 .navbar-dark.navbar-expand-lg.main-nav-with-bg .brand-logo {
     display: block;
 }

 .navbar-brand:hover {
     border-bottom: none;
 }

 /***** END OF NAVIGATION BAR *****/



 /***** HERO SECTION *****/

 .hero {
     position: relative;
     max-width: 100%;
     width: 100vw;
     height: auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     text-align: center;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
 }

 .hero-padding-1 {
     padding-top: 150px;
     padding-bottom: 100px;
 }

 @media screen and (max-width: 767px) {
     .hero-padding-1 {
         padding-top: 150px;
         padding-bottom: 100px;
     }

     .hero-padding-1.no-bottompadding {
         padding-bottom: 0;
     }
 }

 .hero-padding-2 {
     padding-top: 200px;
     padding-bottom: 150px;
 }

 @media screen and (max-width: 767px) {
     .hero-padding-2 {
         padding-top: 150px;
         padding-bottom: 100px;
     }
 }

 .hero-padding-3 {
     padding-top: 20px;
 }

 .hero-padding-1.no-bottompadding {
     padding-bottom: 0;
 }

 .hero-padding-3.no-bottompadding {
     padding-bottom: 0;
 }

 @media screen and (max-width: 767px) {
     .hero-padding-sm-1 {
         padding-top: 75px;
         padding-bottom: 75px;
     }
 }

 @media screen and (max-width: 767px) {
     .hero-padding-sm-2 {
         padding-top: 20px;
         padding-bottom: 0;
     }
 }

 .hero-1 {
     background: url("../images/hero-1.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-2 {
     background: url("../images/hero-2.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-3 {
     background: url("../images/hero-3.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-7 {
     background: url("../images/hero-7.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-solid-light {
     background: #EFEFEF;
 }

 .hero-bottom-diagonal {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     z-index: 3;
     margin-bottom: -1px;
 }

 .hero.hero-left-align {
     text-align: left;
 }

 .hero.full-screen,
 .hero-overlay.full-screen {
     height: 100vh;
 }

 .hero-overlay,
 .hero-overlay-2,
 .hero-overlay-3 {
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .particles-hero {
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 3;
 }

 .hero-dark-overlay {
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     background: rgba(0, 0, 0, 0.3);
 }

 .video-placeholder-image {
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     background: url("../videos/hero-video.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-content {
     z-index: 4;
 }

 .hero-content.full-width {
     width: 100%;
 }

 .hero-content.full-width .btn-custom-sm {
     margin-left: 0;
 }

 .hero-content-solid,
 .hero-content-solid-2 {
     padding-top: 2rem;
     padding-bottom: 2rem;
 }

 .hero-content-solid {
     background: rgba(0, 0, 0, 0.5);
 }

 .hero-content-solid-2 {
     background: rgba(0, 0, 0, 0.2);
 }

 .hero-social .social-container li {
     color: #FFFFFF;
 }

 .owl-carousel-hero {
     position: absolute;
     left: 0;
     top: 0;
 }

 .owl-carousel.owl-carousel-hero .owl-dots {
     position: relative;
     z-index: 5;
     top: -50px;
 }

 .hero-content p {
     text-transform: none;
     font-size: 1rem;
     font-weight: normal;
     line-height: 2rem;
     letter-spacing: 0.1rem;
 }

 .hero-content.small-text p {
     text-transform: none;
     font-size: 13px;
     font-weight: 400;
     line-height: 2rem;
     letter-spacing: 0;
 }

 .hero-solid-light .hero-content p,
 .hero-solid-light .hero-content span {
     color: #4C4C4C;
 }

 .hero-solid-light .subtitle-container-2 h3 {
     color: #7F7F7F;
 }

 .hero-solid-light .subtitle-container-2 h4 {
     color: #666666;
 }

 .hero-video {
     position: absolute;
     top: 50%;
     left: 50%;
     height: auto;
     width: auto;
     min-width: 100%;
     min-height: 100%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     -o-object-fit: cover;
     object-fit: cover;
 }

 .hero-video-container {
     margin-top: 10px;
 }

 .hero-video-container > p {
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .hero-video-container > a {
     display: inline-block;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .hero-video-container > a:hover ~ p {
     color: #FFFFFF;
     font-size: 1.2rem;
 }

 .hero-video-container > a:hover {
     -ms-transform: scale(1.2, 1.2);
     -webkit-transform: scale(1.2, 1.2);
     transform: scale(1.2, 1.2);
 }

 .hero-video-icon {
     border-radius: 100px;
     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
     padding: 5px;
     margin-bottom: 10px;
 }

 .hero-buttons-container {
     margin-top: 20px;
 }

 .hero-buttons-container .btn-custom-sm {
     margin-left: 10px;
     margin-right: 10px;
 }

 @media screen and (max-width: 767px) {
     .hero-buttons-container.app-badges-container {
         margin-top: 40px;
         margin-bottom: 40px;
     }
 }

 .hero-carousel-item {
     width: 100vw;
     max-width: 100%;
     min-height: 100vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     vertical-align: middle;
 }

 .hero-carousel-item-1 {
     background: url("../images/hero-4.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-carousel-item-2 {
     background: url("../images/hero-5.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .hero-carousel-item-3 {
     background: url("../images/hero-6.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 @media screen and (max-width: 767px) {
     .hero-img {
         margin-top: 50px;
     }

     .hero-img.sm-hidden {
         display: none;
     }
 }

 @media screen and (max-width: 767px) {
     #hero-section.hero-left-align {
         text-align: center;
     }
 }

 .hero-features-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column wrap;
     flex-flow: column wrap;
 }

 @media screen and (max-width: 991px) {
     .hero-features-container {
         margin-top: 2rem;
     }
 }

 .hero-feature {
     margin-bottom: 1rem;
     margin-top: 1rem;
     padding-top: 10px;
     padding-bottom: 25px;
     padding-left: 50px;
     padding-right: 50px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column wrap;
     flex-flow: column wrap;
     max-width: 300px;
     border: 1px solid rgba(255, 255, 255, 0.4);
     border-radius: 10px;
 }

 .hero-feature h5 {
     color: #DBDBDB;
 }

 .hero-feature span {
     color: #DBDBDB;
     font-size: 14px;
 }

 .hero-buttons-container a:hover {
     border-bottom: none;
 }

 .app-badge {
     height: 50px;
     margin-right: 10px;
     margin-bottom: 10px;
     -webkit-transition: -webkit-transform .4s ease-in-out;
     transition: -webkit-transform .4s ease-in-out;
     -o-transition: transform .4s ease-in-out;
     transition: transform .4s ease-in-out;
     transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
 }

 .app-badge:hover {
     -webkit-transform: scale(1.1);
     -ms-transform: scale(1.1);
     transform: scale(1.1);
 }

 .hero-trailer-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-top: 20px;
     font-weight: 700;
     -webkit-transition: -webkit-transform .4s ease-in-out;
     transition: -webkit-transform .4s ease-in-out;
     -o-transition: transform .4s ease-in-out;
     transition: transform .4s ease-in-out;
     transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
 }

 .hero-trailer-container span {
     letter-spacing: 0.05rem;
 }

 @media screen and (max-width: 767px) {
     .hero-trailer-container {
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         margin-bottom: 50px;
     }
 }

 .hero-trailer-container:hover {
     -webkit-transform: scale(1.1);
     -ms-transform: scale(1.1);
     transform: scale(1.1);
 }

 .hero-trailer-container i {
     margin-right: 10px;
 }

 .hero-anchor-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-top: 20px;
     font-weight: 700;
     -webkit-transition: -webkit-transform .4s ease-in-out;
     transition: -webkit-transform .4s ease-in-out;
     -o-transition: transform .4s ease-in-out;
     transition: transform .4s ease-in-out;
     transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
 }

 @media screen and (max-width: 767px) {
     .hero-anchor-container {
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
     }
 }

 .hero-anchor-container:hover {
     -webkit-transform: scale(1.1);
     -ms-transform: scale(1.1);
     transform: scale(1.1);
 }

 .hero-anchor-container i {
     margin-right: 10px;
 }

 .hero-anchor-container a {
     color: #666666;
 }

 .hero-img-product {
     max-width: 250px;
 }

 .hero-img-product .img-responsive {
     max-width: 250px;
 }

 .hero-img-phone {
     text-align: center;
 }

 @media screen and (max-width: 767px) {
     .hero-img-phone {
         margin-bottom: 30px;
     }
 }

 .hero-content p.product-name-badge {
     color: #EFEFEF;
     padding-left: 10px;
     padding-right: 10px;
     text-transform: uppercase;
     margin-left: 15px;
 }

 @media screen and (max-width: 575px) {
     .hero-content p.product-name-badge {
         margin-left: 0;
     }
 }

 .hero-box {
     width: 100vw;
     max-width: 100%;
     padding-top: 50px;
     padding-bottom: 50px;
 }

 .product-hero-img {
     border-radius: 20px;
 }

 .hero-box-img-container {
     margin-left: 10px;
 }

 @media screen and (max-width: 767px) {
     .hero-box-img-container {
         margin-bottom: 50px;
     }
 }

 .hero-box-img-container .main-img {
     max-width: 200px;
     width: 100%;
     margin-right: 10px;
 }

 .hero-box-img-container .second-img {
     max-width: 100px;
     width: 100%;
 }

 .hero-box-img-container .second-img.top-img {
     margin-bottom: 2px;
 }

 .hero-box-img-container .second-img.bottom-img {
     margin-top: 2px;
 }

 .hero-icon {
     color: #DBDBDB;
 }

 .hero-icon-container:hover {
     border-bottom: none;
 }

 .subtitle-container,
 .subtitle-container-2 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column nowrap;
     flex-flow: column nowrap;
 }

 .subtitle-container {
     margin-bottom: 10vh;
 }

 .subtitle-container-2 {
     margin-bottom: 2vh;
 }

 @media screen and (max-width: 767px) {

     .subtitle-container,
     .subtitle-container-2 {
         margin-bottom: 1vh;
     }
 }

 /***** END OF HERO SECTION *****/



 /***** SERVICES SECTION *****/

 #services.overlapping-top {
     position: relative;
     margin-top: -150px;
 }

 @media screen and (max-width: 767px) {
     #services.overlapping-top {
         padding-top: 100px;
     }
 }

 #services.glued-top {
     position: relative;
     margin-top: -100px;
 }

 #services .overlapping-title-container,
 .glued-title-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column nowrap;
     flex-flow: column nowrap;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     background: #FFFFFF;
     padding-top: 30px;
     padding-bottom: 20px;
     padding-left: 50px;
     padding-right: 50px;
     border: 1px solid #EFEFEF;
     border-top: none;
 }

 #services .overlapping-title-container i,
 .glued-title-container i {
     color: #666666;
 }

 #services .overlapping-title-container a,
 .glued-title-container i {
     -webkit-animation: blink-slow 1.5s infinite;
     animation: blink-slow 1.5s infinite;
 }

 #services .overlapping-title-container a:hover,
 .glued-title-container a:hover {
     border-bottom: none;
 }

 .service-container {
     margin-top: 100px;
     margin-bottom: 100px;
 }

 /* for scrolling purpose */
 .scrollable-container::before {
     display: block;
     content: " ";
     margin-top: -50px;
     height: 50px;
     visibility: hidden;
     pointer-events: none;
 }

 @media screen and (max-width: 767px) {
     .service-container {
         text-align: center;
         margin-top: 50px;
         margin-bottom: 50px;
     }

     .service-container ul {
         text-align: left;
         margin-top: 30px;
     }

     .service-container .btn {
         margin-bottom: 30px;
         margin-top: 10px;
     }
 }

 .service-image {
     display: block;
     width: 100%;
     position: relative;
 }

 .service-image-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-size: 20px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: #FFFFFF;
     opacity: 0;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .service-image-icon:hover,
 .service-image:hover + .service-image-icon {
     opacity: 1;
 }


 .service-title {
     font-family: 'Raleway', sans-serif;
     letter-spacing: 0.05rem;
     color: #434343;
     font-weight: 800;
     border-bottom: 0.2rem solid #DBDBDB;
     padding-bottom: 0.2rem;
     display: block;
     margin-bottom: 1rem;
 }

 @media screen and (min-width: 992px) {
     .service-title {
         font-size: 2rem;
     }
 }

 @media screen and (max-width: 991px) and (min-width: 768px) {
     .service-title {
         font-size: 1.5rem;
     }
 }

 @media screen and (max-width: 767px) {
     .service-title {
         font-size: 1rem;
     }
 }

 .service-side-list {
     list-style: none;
     padding-left: 0;
     margin: 0 0 2rem 0;
 }

 .service-side-list li {
     color: #898989;
     font-size: 14px;
 }

 .service-side-list i {
     margin-right: 10px;
 }

 .card.service-card {
     margin-bottom: 2rem;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
     display: block;
     /* for IE compatibility */
 }

 .service-card-footer {
     background-color: #ADADAD;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .service-card-footer a {
     color: #FFFFFF;
 }

 .service-card-footer a:hover {
     border-bottom: none;
 }

 /* for light effect when hovering over service card */
 .service-card::before,
 .service-card::after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     -webkit-transform: scale3d(0, 0, 1);
     transform: scale3d(0, 0, 1);
     -webkit-transition: -webkit-transform .3s ease-out 0s;
     transition: -webkit-transform .3s ease-out 0s;
     -o-transition: transform .3s ease-out 0s;
     transition: transform .3s ease-out 0s;
     transition: transform .3s ease-out 0s, -webkit-transform .3s ease-out 0s;
     content: '';
     pointer-events: none;
 }

 .service-card::before {
     -webkit-transform-origin: left top;
     -ms-transform-origin: left top;
     transform-origin: left top;
 }

 .service-card::after {
     -webkit-transform-origin: right bottom;
     -ms-transform-origin: right bottom;
     transform-origin: right bottom;
 }

 .service-card:hover::before,
 .service-card:hover::after,
 .service-card:focus::before,
 .service-card:focus::after {
     -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
 }

 .card.service-card-2 {
     margin-bottom: 0;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
     display: block;
     /* for IE compatibility */
 }

 .service-card-2 .service-action-toggler {
     font-size: 15px;
     font-family: 'Quattrocento Sans', sans-serif;
 }

 .service-card-2 .service-action-toggler i {
     margin-left: 10px;
 }

 .service-card-2 .service-action-toggler:hover {
     border-bottom: none;
 }

 .service-card-2 .card-footer {
     background: transparent;
     border-top: none;
     text-align: right;
 }

 .service-card-2.first-lg {
     border-top-left-radius: 40%;
 }

 .service-card-2.first-lg img {
     border-top-left-radius: 40%;
 }

 .service-card-2.last-lg {
     border-top-right-radius: 40%;
 }

 .service-card-2.last-lg img {
     border-top-right-radius: 40%;
 }

 @media screen and (max-width: 991px) {
     .service-card-2.c1-md {
         border-top-left-radius: 40%;
     }

     .service-card-2.c1-md img {
         border-top-left-radius: 40%;
     }

     .service-card-2.c2-md {
         border-top-right-radius: 40%;
     }

     .service-card-2.c2-md img {
         border-top-right-radius: 40%;
     }

     .service-card-2.c3-md,
     .service-card-2.c3-md img,
     .service-card-2.c4-md,
     .service-card-2.c4-md img {
         border-radius: 0;
     }

 }

 @media screen and (max-width: 767px) {

     .service-card-2.c1-md,
     .service-card-2.c1-md img,
     .service-card-2.c2-md,
     .service-card-2.c2-md img,
     .service-card-2.c3-md,
     .service-card-2.c3-md img,
     .service-card-2.c4-md,
     .service-card-2.c4-md img {
         border-radius: 0;
     }

 }

 @media screen and (max-width: 991px) {
     .card.service-card-2 {
         margin-top: 10px;
         margin-bottom: 10px;
     }
 }

 .service-box {
     margin-bottom: 3rem;
 }

 @media screen and (max-width: 767px) {
     .service-box {
         margin-top: 2.5rem;
         margin-bottom: 2.5rem;
     }
 }

 .service-box .service-action-toggler {
     font-size: 15px;
     font-family: 'Quattrocento Sans', sans-serif;
     color: #434343;
     text-decoration: underline;
 }

 .service-box .service-action-toggler:hover {
     border-bottom: none;
 }

 .service-box svg {
     margin-bottom: 20px;
 }

 .sidebox-container {
     padding-top: 100px;
 }

 @media screen and (max-width: 767px) {
     .sidebox-container {
         padding-top: 50px;
     }
 }

 .phone-ss-image,
 .product-ss-image {
     max-width: 250px;
 }

 /***** END OF SERVICES SECTION *****/



 /***** TESTIMONIALS SECTION *****/

 #testimonials {
     width: 100vw;
     max-width: 100%;
 }

 .testimonials-bg-img {
     background-image: url("../images/testimonials-background.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .testimonials-solid-light {
     background: #EFEFEF;
 }

 .testimonials-solid-light h3 {
     color: #666666;
 }

 .testimonial-item {
     margin-bottom: 1rem;
 }

 .testimonial-box {
     text-align: center;
     position: relative;
     padding-top: 20px;
     margin-top: 100px;
     margin-right: auto;
     margin-left: auto;
     padding-bottom: 3rem;
     max-width: 40rem;
     border-radius: 50px;
 }

 .testimonials-solid-light .testimonial-box {
     background: #F2F2F2;
 }

 .testimonial-user-pic {
     width: 100px;
     margin: auto;
     margin-top: -4.5rem;
 }

 .testimonial-quote {
     margin-left: auto;
     margin-right: auto;
     margin-top: 1rem;
 }

 .testimonial-text {
     margin-top: 1rem;
     color: #FFFFFF;
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .testimonials-solid-light .testimonial-text {
     color: #666666;
 }

 .testimonial-user-title {
     color: #898989;
     font-weight: 100;
 }

 .testimonial-user-name {
     color: #FFFFFF;
 }

 .testimonials-solid-light .testimonial-user-name {
     color: #666666;
 }

 /***** END OF TESTIMONIALS SECTION *****/



 /***** FEATURES SECTION *****/

 @media screen and (max-width: 767px) {
     #features {
         margin-bottom: 50px;
         padding-bottom: 0;
     }
 }

 .features-container {
     text-align: center;
     margin-top: 5rem;
 }

 @media screen and (min-width: 576px) {
     .features-container {
         justify-content: center;
     }
 }

 .feature {
     margin-bottom: 5rem;
 }

 @media screen and (max-width: 767px) {
     .feature {
         margin-bottom: 75px;
     }
 }

 .features-icon {
     color: #FFFFFF;
     width: 65px;
     height: 65px;
     line-height: 65px;
     border-radius: 100%;
     margin-bottom: 0.5rem;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .feature:hover * .features-icon {
     background: #434343;
 }

 #features.glued-top {
     border-top: 1px solid #EFEFEF;
 }

 /***** END OF FEATURES SECTION *****/



 /***** STATS SECTION *****/

 #stats {
     padding-top: 3rem;
     padding-bottom: 3rem;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .stats-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-line-pack: center;
     align-content: center;
     text-align: center;
     height: 100%;
 }

 .stats-item {
     margin-bottom: 1rem;
     margin-top: 1rem;
 }

 @media screen and (max-width: 767px) {
     .stats-item {
         margin-bottom: 1.5rem;
         margin-top: 1.5rem;
     }
 }

 .number-counter {
     color: #FFFFFF;
     margin-top: 10px;
 }

 @media screen and (max-width: 767px) {
     h4.number-counter {
         font-size: 1.5rem;
     }
 }

 #stats p {
     color: #FFFFFF;
 }

 .stats-icon {
     color: #FFFFFF;
 }

 .particles-stats {
     display: block;
     position: absolute;
     margin-left: 0;
     margin-top: 0;
     width: 100%;
     height: 100%;
     z-index: 3;
 }

 /***** END OF STATS SECTION *****/



 /***** STEPS SECTION *****/

 .steps-container {
     padding-top: 5rem;
     padding-bottom: 2rem;
 }

 .step-box {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-top: 1rem;
     margin-bottom: 1rem;
 }

 .number-container {
     -ms-flex-preferred-size: 8rem;
     flex-basis: 8rem;
 }

 .steps-image {
     width: 100%;
 }

 @media (max-width:767px) {
     #tech-graphic-svg.sm-hidden {
         display: none;
     }
 }

 /***** END OF STEPS SECTION *****/



 /***** PREMIUM SECTION *****/

 @media (max-width:767px) {
     #premium {
         padding-bottom: 50px;
     }
 }

 .premium-features-container {
     padding-top: 100px;
     padding-bottom: 50px;
 }

 @media (max-width:767px) {
     .premium-features-container {
         padding-top: 50px;
         padding-bottom: 0;
     }

     .steps-image {
         padding-top: 50px;
         padding-bottom: 50px;
     }
 }

 /***** END OF PREMIUM SECTION *****/



 /***** SCREENSHOTS SECTION *****/

 #screenshots {
     background: #FCFCFC;
 }

 .screenshots-container {
     padding-top: 4rem;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .screenshot-item,
 .screenshot-app-item {
     margin-left: auto;
     margin-right: auto;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .screenshot-item {
     max-width: 500px;
 }

 .screenshot-app-item {
     width: 250px;
 }

 .phone-frame {
     position: absolute;
     z-index: 4;
     padding-top: 2rem;
 }

 #owl-carousel-screenshots .owl-item.center {
     -webkit-filter: blur(0);
     filter: blur(0);
 }

 #owl-carousel-screenshots .owl-item {
     -webkit-filter: blur(3px);
     filter: blur(3px);
 }

 .text-over-img-container {
     position: relative;
     display: inline-block;
     bottom: 0;
     width: 100%;
     height: 2rem;
     background: #DBDBDB;
 }

 .text-over-img {
     position: absolute;
     bottom: 5px;
     width: 100%;
     text-align: center;
     font-family: 'Quattrocento Sans', sans-serif;
     color: #434343;
 }

 /* overwrite default margin-top for owl carousel dots */
 .owl-theme .owl-nav.disabled + .owl-dots {
     margin-top: 30px;
 }

 /***** END OF SCREENSHOTS SECTION *****/



 /***** VIDEO SECTION *****/

 #video,
 #video-2 {
     max-width: 100%;
     width: 100vw;
     height: 400px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: stretch;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 #video {
     background: url("../images/video-pic.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .video-overlay {
     display: block;
     position: absolute;
     left: 0;
     width: 100%;
     height: 400px;
     z-index: 1;
 }

 .video-content {
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
     z-index: 2;
 }

 .video-container {
     margin-top: 3rem;
 }

 .section-video {
     position: absolute;
     top: 50%;
     left: 50%;
     height: auto;
     width: auto;
     min-width: 100%;
     min-height: 100%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     -o-object-fit: cover;
     object-fit: cover;
 }

 #video .video-container i:hover,
 #video-2 .video-container i:hover {
     -webkit-animation: pulsate-medium 1s linear infinite;
     animation: pulsate-medium 1s linear infinite;
 }

 /***** END OF VIDEO SECTION *****/



 /***** PARTNERS SECTION *****/

 #partners {
     background: #fcfcfc;
 }

 .partners-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding-top: 4rem;
 }

 .partner-logo {
     height: 200px;
     margin: 2px;
 }

 #partners-2 {
     background: transparent;
 }

 @media screen and (max-width: 767px) {
     #partners-2 {
         text-align: center;
     }
 }

 #partners-2 .section-title {
     letter-spacing: 0.1rem;
     color: #898989;
     font-family: 'Quattrocento Sans', sans-serif;
     font-weight: 700;
 }

 #partners-2 .owl-carousel .owl-item img,
 #partners .owl-carousel .owl-item img {
     width: auto;
 }

 #owl-carousel-partners {
     padding-top: 50px;
 }

 #owl-carousel-partners .owl-item div {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row nowrap;
     flex-flow: row nowrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 /***** END OF PARTNERS SECTION *****/



 /***** COMMENT SECTION *****/

 #comment,
 #comment-2 {
     max-width: 100%;
     width: 100vw;
 }

 #comment-2 {
     padding-top: 0;
     padding-bottom: 0;
 }

 #comment-2 .comment-box {
     padding-top: 50px;
     padding-bottom: 50px;
 }

 #comment {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     text-align: center;
 }

 .comment-bg-img {
     background-image: url("../images/comment-background.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .comment-solid-light {
     background: #EFEFEF;
 }

 .comment-box {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column nowrap;
     flex-flow: column nowrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .comment-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin-left: 1rem;
     margin-right: 1rem;
 }

 .comment-title {
     color: #FFFFFF;
     letter-spacing: 0;
 }

 .comment-solid-light .comment-title {
     color: #666666;
 }

 .comment-subtitle {
     color: #898989;
 }

 .comment-quote-icon.right-quote {
     -ms-flex-item-align: end;
     align-self: flex-end;
 }

 #comment-2 .img-half {
     margin-top: 50px;
     margin-bottom: -500px;
 }

 @media screen and (max-width: 767px) {
     #comment-2 .img-half {
         display: none;
     }
 }

 /***** END OF COMMENT SECTION *****/



 /***** PRICING SECTION *****/

 .pricing-container {
     margin-top: 100px;
     margin-bottom: 100px;
 }

 @media screen and (max-width: 767px) {
     .pricing-container {
         margin-top: 50px;
         margin-bottom: 50px;
     }
 }

 .pricing-card {
     -webkit-box-shadow: 0px 10px 23px 5px rgba(173, 173, 173, 0.5);
     box-shadow: 0px 10px 23px 5px rgba(173, 173, 173, 0.5);
     border-radius: 50px;
     border-style: solid;
     border-width: 0.05rem;
     border-color: #ADADAD;
     overflow: hidden;
     margin-bottom: 2rem;
 }

 .pricing-card-header {
     font-size: 1.5rem;
     font-weight: 700;
     color: #FFFFFF;
 }

 .starter .pricing-card-header,
 .starter .pricing-card-footer {
     background: #ADADAD;
 }

 .premium .pricing-card-header,
 .premium .pricing-card-footer {
     background: #434343;
 }

 .pricing-card-title {
     font-size: 1.5rem;
 }

 .pricing-card-footer a {
     color: #FFFFFF;
     letter-spacing: 0.1rem;
     border-bottom: 1px solid transparent;
 }

 .pricing-card-footer a:hover {
     text-decoration: none;
     border-bottom: 1px solid #FFFFFF;
 }

 #pricing .section-title {
     color: #898989;
 }

 /***** END OF PRICING SECTION *****/



 /***** TEAM SECTION *****/

 #team .section-title {
     color: #898989;
 }

 .team-container {
     margin-top: 100px;
     margin-bottom: 100px;
 }

 @media screen and (max-width: 767px) {
     .team-container {
         margin-top: 50px;
         margin-bottom: 50px;
     }
 }

 .team-social-container li {
     display: inline-block;
     margin-right: 1rem;
 }

 .team-social-container li a {
     font-size: 1.5rem;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .team-social-container li a:hover {
     color: #434343;
     border-bottom: none;
 }

 .card.team-card {
     margin-bottom: 2rem;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
     display: block;
     cursor: pointer;
 }

 .team-card .card-body {
     padding: 1rem;
 }

 .team-card:hover .team-social-container {
     opacity: 1;
 }

 .team-social-container {
     opacity: 0;
     position: relative;
     margin-top: -3rem;
     background: rgba(255, 255, 255, 0.5);
     -webkit-transition: .4s;
     -o-transition: .4s;
     transition: .4s;
 }

 @media screen and (max-width: 991px) {
     .team-social-container {
         opacity: 1;
     }
 }

 .about-me-container {
     margin-bottom: 50px;
 }

 .about-me-items {
     margin-bottom: 50px;
 }

 .about-me-items h5,
 .about-me-items p {
     color: #FFFFFF;
 }

 .about-item {
     text-align: center;
     padding: 20px;
     margin-top: 10px;
     margin-bottom: 10px;
 }

 /***** END OF TEAM SECTION *****/



 /***** REVIEWS SECTION *****/

 #reviews .section-title {
     color: #898989;
 }

 .reviews-container {
     margin-top: 100px;
     margin-bottom: 100px;
 }

 @media screen and (max-width: 767px) {
     .reviews-container {
         margin-top: 50px;
         margin-bottom: 50px;
     }
 }

 .review-rating-container span {
     display: inline-block;
     margin-left: 1px;
     margin-right: 1px;
     color: #FFB962;
     font-size: 12px;
 }

 .review-rating-container span.blank {
     color: #898989;
 }

 .review-rating-container {
     position: relative;
     margin-top: -2rem;
     margin-bottom: 1rem;
     background: rgba(255, 255, 255, 1);
 }

 .card.review-card {
     margin-bottom: 2rem;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
     display: block;
 }

 .review-card .card-body {
     padding: 1rem;
 }

 .review-card .card-location {
     font-size: 14px;
 }

 .list-group-item p {
     margin-top: 0;
     margin-bottom: 0;
 }

 /***** END OF REVIEWS SECTION *****/



 /***** REGISTER AND CONTACT FORM SECTION *****/

 #register {
     max-width: 100%;
     width: 100vw;
     height: 150px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: flex-end;
     -ms-flex-align: flex-end;
     align-items: flex-end;
     text-align: center;
 }

 #contact {
     padding-top: 5rem;
     padding-bottom: 5rem;
     margin-bottom: -10px;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 #contact .section-title {
     color: #FFFFFF;
 }

 #contact label {
     color: #FFFFFF;
     font-weight: 400;
 }

 #contact textarea {
     /* preserve line breaks */
     white-space: pre-wrap;
 }

 .particles-contact {
     display: block;
     position: absolute;
     margin-left: 0;
     margin-top: 0;
     width: 100%;
     height: 100%;
     z-index: 3;
 }

 .contact-form-control:hover {
     -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.3);
     box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.3);
 }

 .contact-form-control:focus {
     -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.6);
     box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.6);
 }

 .contact-form-control {
     border-radius: 5px;
 }

 #contact-form .form-message-container,
 #subscribe-form .form-message-container,
 #register-form .form-message-container {
     margin-top: 20px;
     color: #FFFFFF;
     display: block;
     height: 20px;
 }

 .invalid-feedback {
     color: #FFFFFF;
     font-size: 14px;
     text-decoration: underline;
     text-align: right;
 }

 .form-container {
     margin-top: 2rem;
 }

 .alternate-sign-up {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 2rem;
     text-align: center;
 }

 .alternate-sign-up * p {
     color: #DBDBDB;
 }

 .alternate-buttons-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 .alternate-buttons-container > a > i {
     margin-right: 0.5rem;
 }

 /* custom checkbox for register form */
 .checkbox-container {
     display: block;
     position: relative;
     padding-left: 35px;
     margin-bottom: 12px;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .checkbox-container .form-check-label,
 .checkbox-container .form-check-input {
     cursor: pointer;
 }

 .default-checkbox {
     /* hide default checkbox */
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: #eee;
 }

 .checkbox-container:hover input ~ label .checkmark {
     background-color: #ccc;
 }

 .checkbox-container input:checked ~ label .checkmark {
     background-color: #434343;
 }

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 .checkbox-container input:checked ~ label .checkmark:after {
     display: block;
 }

 .checkbox-container .checkmark:after {
     left: 8px;
     top: 5px;
     width: 8px;
     height: 11px;
     border: solid white;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 /***** END OF REGISTER AND CONTACT FORM SECTION *****/



 /***** MAP SECTION *****/

 .google-map {
     position: relative;
     padding-bottom: 30rem;
     height: 0;
     overflow: hidden;
 }

 .google-map::before {
     content: '';
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     pointer-events: none;
 }

 /***** END OF MAP SECTION *****/



 /***** DOWNLOAD SECTION *****/

 #download {
     background: #EFEFEF;
     text-align: center;
 }

 #download .section-subtitle {
     margin-bottom: 40px;
 }

 #download .btn-custom-sm {
     margin-top: 50px;
 }

 .download-buttons-container {
     margin-top: 40px;
     text-align: center;
 }

 .download-buttons-container a:hover {
     border-bottom: none;
 }

 @media screen and (max-width: 767px) {
     .download-buttons-container {
         margin-bottom: 40px;
     }
 }

 .download-img {
     width: 100%;
     max-width: 420px;
 }

 /***** END OF DOWNLOAD SECTION *****/



 /***** CONTACT INFORMATION SECTION *****/

 #contact-information {
     padding-bottom: 2rem;
 }

 .contact-info-container {
     text-align: center;
 }

 .information-container {
     padding-bottom: 100px;
     margin-top: 100px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 @media screen and (max-width: 767px) {
     .information-container {
         padding-bottom: 50px;
         margin-top: 50px
     }
 }

 .social-container li {
     display: inline-block;
     margin-right: 1.5rem;
 }

 .social-container li a {
     font-size: 1.5rem;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .social-container li a:hover {
     color: #434343;
     border-bottom: none;
 }

 .contact-method {
     background-color: #DBDBDB;
     padding: 20px;
     cursor: pointer;
     margin: 10px;
     width: 250px;
     height: 250px;
     overflow: hidden;
     -webkit-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }

 .contact-method.selected {
     -webkit-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }

 .contact-icon {
     color: #434343;
     font-size: 3rem;
     position: absolute;
     margin-top: 10px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     -webkit-transition: all .5s ease;
     -o-transition: all .5s ease;
     transition: all .5s ease;
 }

 .contact-method h5 {
     position: absolute;
     font-size: 18px;
     margin-top: 90px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

 /*
 .contact-method > span,
 .contact-method .expand {
     position: relative;
 }*/

 .contact-method:hover .expand .plus {
     border: 5px solid white;
 }

 @media screen and (min-width: 768px) {
     .contact-method:hover h5 {
         -webkit-transform: translateX(-50%) scale(1.2);
         -ms-transform: translateX(-50%) scale(1.2);
         transform: translateX(-50%) scale(1.2);
     }
 }

 .contact-method .expand:hover {
     border-bottom: none;
 }

 .contact-method .expand .plus {
     width: 40px;
     height: 40px;
     color: #FFFFFF;
     position: absolute;
     margin-top: 150px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .contact-method p.hidden {
     opacity: 0;
     position: absolute;
     margin-top: 110px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     color: #FFFFFF;
 }

 .contact-method.selected .hidden {
     opacity: 1;
 }

 .contact-method.selected .contact-icon {
     -webkit-transform: scale(1.5, 1.5);
     -ms-transform: scale(1.5, 1.5);
     transform: scale(1.5, 1.5);
     font-size: 4rem;
     opacity: 0.3;
     position: absolute;
     margin-top: -20px;
     margin-left: -120px;
     -webkit-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }

 .contact-method.selected .expand .plus {
     opacity: 0;
     -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
 }

 .contact-method.selected h5 {
     margin-top: 70px;
     font-size: 14px;
     -webkit-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     color: #DBDBDB;
 }

 .contact-method.selected p {
     opacity: 1;
 }

 /***** END OF CONTACT INFORMATION SECTION *****/



 /***** FOOTER *****/

 .about-us {
     text-align: left;
     margin-bottom: 2rem;
 }

 .about-us * .brand-logo {
     margin-bottom: 1rem;
 }

 .footer-bg-img {
     background-image: url("../images/footer-background.jpg");
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .footer-info {
     margin-bottom: 2rem;
 }

 footer a:hover {
     border-bottom: none;
 }

 footer h5 {
     margin-bottom: 1rem;
     color: #898989;
 }

 footer.footer-2 h5 {
     color: #434343;
 }

 footer li {
     margin-bottom: 0.5rem;
 }

 .menu-footer-links {
     display: inline-block;
     list-style: none;
     padding-left: 0;
     margin: 0 0 2rem 0;
 }

 .menu-footer-links a {
     color: #FFFFFF;
 }

 .footer-2 .menu-footer-links a {
     color: #898989;
 }

 .menu-footer-links a:hover {
     text-decoration: underline;
 }

 .footer-copyright {
     text-align: center;
     padding-bottom: 0.5rem;
 }

 .footer-copyright span {
     font-family: 'Quattrocento Sans', sans-serif;
     letter-spacing: 0.05rem;
     color: #898989;
 }

 /***** END OF FOOTER *****/



 /***** COMING SOON PAGES *****/
 /* coming-soon-1.html and coming-soon-2.html */

 #coming-soon {
     padding: 0;
     min-height: 100vh;
 }

 #coming-soon .container.full-width {
     max-width: 100%;
 }

 #coming-soon .container.full-height {
     min-height: 100vh;
 }

 #coming-soon .row.full-height {
     min-height: 100vh;
 }

 .coming-soon-info {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column nowrap;
     flex-flow: column nowrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     height: 100%;
     padding: 100px;
 }

 .coming-soon-left {
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
 }

 @media screen and (max-width: 767px) {
     .coming-soon-info {
         padding-left: 0;
         padding-right: 0;
     }
 }

 .coming-soon-info .brand-logo {
     position: absolute;
     top: 50px;
 }

 .coming-soon-info .brand-logo:hover {
     border-bottom: none;
 }

 #coming-soon .number {
     font-weight: 700;
     margin-left: 10px;
 }

 @media screen and (min-width: 1200px) {
     #coming-soon .number {
         font-size: 35px;
     }
 }

 @media screen and (max-width: 1199px) {
     #coming-soon .number {
         font-size: 25px;
     }
 }

 #coming-soon #clock {
     margin-top: 50px;
     margin-bottom: 50px;
 }

 .coming-soon-social {
     margin-top: 100px;
     position: absolute;
     bottom: 30px;
     left: 0;
 }

 .coming-soon-social .social-container {
     padding-top: 0;
 }

 .coming-soon-social .social-container li a {
     font-size: 16px;
     color: #666666;
 }

 .coming-soon-social .social-container li a:hover {
     font-size: 16px;
     color: #000000;
 }

 .coming-soon-img {
     background-image: url('../images/coming-soon-1.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     height: 100%;
     min-height: 300px;
 }

 .coming-soon-img-2 {
     background-image: url('../images/coming-soon-2.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     height: 100vh;
     min-height: 300px;
 }

 .coming-soon-overlay,
 .coming-soon-dark-overlay {
     height: 100%;
     min-height: 300px;
     width: 100%;
     position: absolute;
     z-index: 2;
 }

 .coming-soon-dark-overlay {
     background: rgba(0, 0, 0, 0.6);
 }

 .demo-img-container {
     position: fixed;
     bottom: 0;
     left: 35%;
     max-width: 100%;
     z-index: 6;
 }

 .demo-img-item {
     margin-left: auto;
     margin-right: auto;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
     height: 200px;
 }

 .demo-img-item.width-1 {
     width: 135px;
 }

 .demo-img-item.width-2 {
     width: 240px;
 }

 .demo-img-item img {
     max-height: 100%;
 }

 .demo-img-item.solid-color {
     width: 240px;
     background-color: #7F7F7F;
 }

 .owl-text-overlay {
     position: absolute;
     display: inline-block;
     width: 100%;
     height: 100%;
     padding: 20px;
     text-align: center;

 }

 .owl-text-overlay h5,
 .owl-text-overlay p {
     color: #FFFFFF;
 }

 .owl-text-overlay p {
     font-size: 12px;
 }

 #custom-coming-soon-nav {
     margin-left: 20%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row nowrap;
     flex-flow: row nowrap;
 }

 #custom-coming-soon-nav .custom-coming-soon-nav-prev {
     color: #7B797A;
 }

 #custom-coming-soon-nav .custom-coming-soon-nav-next {
     color: #FFFFFF;
 }

 #custom-coming-soon-nav .btn {
     border-radius: 0;
     font-size: 15px;
     width: 50px;
     height: 50px;
     padding: 15px;
 }

 #custom-coming-soon-nav .custom-coming-soon-nav-prev {
     background-color: #FFFFFF;
 }

 #custom-coming-soon-nav .custom-coming-soon-nav-next {
     background-color: #7B797A;
 }

 #custom-coming-soon-nav .owl-prev,
 #custom-coming-soon-nav .owl-next {
     display: none;
 }

 @media screen and (max-width: 991px) {
     .demo-img-container {
         position: relative;
         left: 0;
         margin-top: 50px;
     }

     #custom-coming-soon-nav {
         margin-left: 0;
     }
 }

 @media screen and (max-width: 991px) {
     .side-image {
         display: none;
     }
 }

 /***** END OF COMING SOON PAGES *****/



 /***** FULL SCREEN MODAL *****/

 .full-screen-modal {
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 99999;
     /* higher than anything on the page */
     width: 100vw;
     max-width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.9);
     overflow-x: hidden;
     overflow-y: auto;
     display: none;
     opacity: 0;
     -webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
     transition: all 0.5s linear;
 }

 .full-screen-modal.displayed {
     display: block;

 }

 .full-screen-modal.visible {
     opacity: 1;
 }

 .close-modal {
     position: absolute;
     right: 15px;
     top: 10px;
     font-size: 3rem;
 }

 .close-modal a {
     color: #FFFFFF;
 }

 .close-modal a:hover {
     border-bottom: none;
 }

 .modal-container {
     text-align: center;
     margin-top: 100px;
 }

 .modal-container h2,
 .modal-container h3 {
     color: #898989;
 }

 .modal-container h5 {
     color: #FFFFFF;
 }

 .modal-text {
     margin-bottom: 40px;
 }

 .modal-text p {
     color: #FFFFFF;
 }

 .modal-text::after {
     content: '';
     position: absolute;
     display: block;
     width: 50px;
     height: 2px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
 }

 .service-1-grid,
 .service-2-grid,
 .service-3-grid,
 .newsletter-grid,
 .portfolio-grid {
     margin: 0 auto;
 }

 .portfolio-grid {
     margin-top: 50px;
     margin-bottom: 50px;
 }

 .grid-item {
     float: left;
     width: 200px;
     margin-bottom: 10px;
 }

 .grid-item--width2 {
     width: 300px;
 }

 .modal-form {
     margin-top: 50px;
     margin-bottom: 50px;
 }

 .portfolio-grid img {
     width: 100%;
 }

 #terms-modal h4 {
     letter-spacing: 0.05rem;
     color: #898989;
     margin-top: 30px;
 }

 #terms-modal p {
     color: #FFFFFF;
 }

 .close-modal-inline-container {
     margin-top: 30px;
     margin-bottom: 30px;
 }

 .close-modal-inline:hover {
     color: #898989;
     border-bottom: none;
 }


 /***** END OF FULL SCREEN MODAL *****/



 /***** STICKY ACTION BUTTON *****/
 /* used in the product.html page */

 @media screen and (max-width: 991px) {
     .sticky-action-button {
         display: none;
     }
 }

 .sticky-action-button {
     position: fixed;
     bottom: 20rem;
     width: 100px;
     z-index: 999;
     right: 0
 }

 .sticky-action-handle {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     width: 100%;
     height: 50px;
     cursor: pointer;
     position: absolute;
     border-radius: 10px 0 0 10px;
 }

 .sticky-action-handle span {
     opacity: 1;
     color: #FFFFFF;
     text-shadow: 1px 1px #000000;
     letter-spacing: 0.1rem;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .sticky-action-handle i {
     opacity: 0;
     position: absolute;
     left: 50%;
     -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     transform: translateX(-50%);
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
 }

 .sticky-action-handle:hover {
     border-bottom: none;
 }

 .sticky-action-handle:hover i {
     opacity: 1;
 }

 .sticky-action-handle:hover span {
     /*opacity: 0;*/
     -webkit-transform: scale(1.3);
     -ms-transform: scale(1.3);
     transform: scale(1.3);
     opacity: 0.3;
 }

 .sticky-action-handle i {
     color: white;
     font-size: 1.5rem;
 }

 /***** END OF STICKY ACTION BUTTON *****/



 /***** SCROLL TO TOP *****/
 .scroll-to-top {
     display: none;
     width: 40px;
     height: 40px;
     line-height: 40px;
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
     font-size: 30px;
     -webkit-transition: all .4s ease;
     -o-transition: all .4s ease;
     transition: all .4s ease;
     cursor: pointer;
     text-align: center;
     border-radius: 10px;
 }

 .scroll-to-top {
     color: #FFFFFF;
 }

 .scroll-to-top:hover {
     color: #FFFFFF;
 }


 /***** END OF SCROLL TO TOP *****/



 /***** ICONS *****/

 .fa-bars {
     color: #FFFFFF;
     vertical-align: middle;
 }

 .fa-play-circle {
     color: #FFFFFF;
 }

 .svg-icon-services {
     display: inline-block;
     width: 5em;
     height: 5em;
     stroke-width: 0;
 }

 .icon-small {
     width: 3em;
     height: 3em;
 }

 .icon-shadow {
     box-shadow: 10px 10px 5px -7px rgba(0, 0, 0, 0.75);
 }

 /***** END OF ICONS *****/



 /***** TYPE.JS CUSTOMIZATION *****/
 /* used for typing animation */
 /* used in the hero area in the pages elearning.html and product.html */

 .hero-typed-wrap {
     height: 50px;
     margin-bottom: 50px;
 }

 @media screen and (max-width: 767px) {
     h4#typed {
         font-size: 1.5rem;
     }
 }

 /* custom cursor */
 .typed::after {
     content: '|';
     display: inline;
     -webkit-animation: blink 0.7s infinite;
     animation: blink 0.7s infinite;
     color: #DBDBDB;
 }

 .hero-typed-wrap .typed::after {
     content: '|';
     display: inline;
     -webkit-animation: blink 0.7s infinite;
     animation: blink 0.7s infinite;
 }

 /* remove default cursor */
 .typed-cursor {
     opacity: 0;
     display: none;
 }

 /***** END OF TYPE.JS CUSTOMIZATION *****/



 /***** VENOBOX.JS CUSTOMIZATION *****/

 .vbox-next:hover,
 .vbox-prev:hover {
     border-bottom: none;
 }

 /***** END OF VENOBOX.JS CUSTOMIZATION *****/



 /***** DECORATIVE *****/

 .section-top-decor-svg-container {
     top: 0;
 }

 .section-top-decor-svg {
     max-width: 500px;
 }

 .section-top-decor-svg path {
     stroke: #898989;
 }

 .svg-drawing-animation {
     stroke-dasharray: 2000;
     stroke-dashoffset: 2000;
     -webkit-animation: dash 3s linear forwards;
     animation: dash 3s linear forwards;
 }

 #vertical-lines-svg {
     fill-opacity: 0;
     -webkit-transition: fill-opacity 1s;
     -o-transition: fill-opacity 1s;
     transition: fill-opacity 1s;
 }

 #vertical-lines-svg.finished {
     fill-opacity: 1
 }

 .up-down-arrow-svg {
     height: 70px;
     width: 25px;
     position: relative;
     margin-bottom: -40px;
     margin-right: 10px;
     margin-left: 10px;
     z-index: 2;
 }

 #vertical-dashed-lines-svg {
     max-width: 8px;
 }

 .spinner {
     margin-top: 50px;
     text-align: center;
 }

 .bounce1,
 .bounce2,
 .bounce3 {
     width: 18px;
     height: 18px;
     background-color: #333;
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bounce-delay 1.4s infinite ease-in-out both;
     animation: bounce-delay 1.4s infinite ease-in-out both;
 }

 .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
 }

 .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }

 /***** END OF DECORATIVE *****/



 /***** GENERAL *****/

 .animated-span {
     display: inline-block;
 }

 .no-letter-spacing {
     letter-spacing: 0;
 }

 .min-letter-spacing {
     letter-spacing: 0.1rem;
 }

 .centered-text {
     text-align: center;
 }

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

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

 .strong {
     font-weight: 700;
 }

 .uppercase {
     text-transform: uppercase;
 }

 .highlight-color {
     color: #DBDBDB;
 }

 .img-responsive {
     max-width: 100%;
     height: auto;
 }

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

 .img-rounded-corners {
     border-radius: 100px;
 }

 .no-overflow {
     overflow: hidden;
 }

 .no-overflow-x {
     overflow-x: hidden;
 }

 .no-padding {
     padding: 0;
 }

 .full-width {
     width: 100%;
 }

 .img-container-center {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row nowrap;
     flex-flow: row nowrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 .pulsating {
     -webkit-animation: pulsate 2s linear infinite;
     animation: pulsate 2s linear infinite;
 }

 .rotating-y {
     -webkit-animation: rotate-y 4s linear infinite;
     animation: rotate-y 4s linear infinite;
 }

 .shaking-horizontal {
     display: inline-block;
 }

 .shaking-horizontal:hover {
     -webkit-animation-name: shake-horizontal;
     animation-name: shake-horizontal;
     -webkit-animation-duration: .8s;
     animation-duration: .8s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
 }

 .bouncing-vertical i {
     display: inline-block;
 }

 .bouncing-vertical:hover i {
     -webkit-animation-name: bounce-vertical;
     animation-name: bounce-vertical;
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom;
     -webkit-animation-duration: .8s;
     animation-duration: .8s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
 }

 .swinging-horizontal {
     display: inline-block
 }

 .swinging-horizontal:hover {
     -webkit-animation-name: swing-horizontal;
     animation-name: swing-horizontal;
     -webkit-transform-origin: top center;
     transform-origin: top center;
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
 }

 /***** END OF GENERAL *****/



 /***** FLEX CONTAINERS AND ITEMS *****/

 .flex-container-row {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-flow: row nowrap;
     flex-flow: row nowrap;
 }

 .flex-container-column {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-flow: column nowrap;
     flex-flow: column nowrap;
 }

 .justify-center {
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }

 .justify-space-around {
     -ms-flex-pack: distribute;
     justify-content: space-around;
 }

 .justify-flex-start {
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
 }

 .justify-flex-end {
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
 }

 .align-items-center {
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .align-self-center {
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 }

 /***** END OF FLEX CONTAINERS AND ITEMS *****/



 /***** ANIMATIONS *****/

 @-webkit-keyframes fadeInOpacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes fadeInOpacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @-webkit-keyframes fadeInOut {
     0% {
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes fadeInOut {
     0% {
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 @-webkit-keyframes pulsate {
     0% {
         -webkit-transform: scale(1);
     }

     50% {
         -webkit-transform: scale(1.5);
     }

     100% {
         -webkit-transform: scale(1);
     }
 }

 @keyframes pulsate {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }

     50% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }

 @-webkit-keyframes pulsate-medium {
     0% {
         -webkit-transform: scale(1);
     }

     50% {
         -webkit-transform: scale(1.2);
     }

     100% {
         -webkit-transform: scale(1);
     }
 }

 @keyframes pulsate-medium {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }

     50% {
         -webkit-transform: scale(1.2);
         transform: scale(1.2);
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }

 @-webkit-keyframes rotate-y {
     50% {
         -webkit-transform: rotate(-180deg);
     }

     100% {
         -webkit-transform: rotate(0deg);
     }
 }

 @keyframes rotate-y {
     50% {
         -webkit-transform: rotateY(-180deg);
         transform: rotateY(-180deg);
     }

     100% {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }
 }

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

     50% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes blink-slow {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

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

     50% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

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

     50% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @-webkit-keyframes shake-horizontal {

     from,
     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }

     20%,
     60% {
         -webkit-transform: translate3d(-10px, 0, 0);
         transform: translate3d(-10px, 0, 0);
     }

     40%,
     80% {
         -webkit-transform: translate3d(10px, 0, 0);
         transform: translate3d(10px, 0, 0);
     }
 }

 @keyframes shake-horizontal {

     from,
     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }

     20%,
     60% {
         -webkit-transform: translate3d(-10px, 0, 0);
         transform: translate3d(-10px, 0, 0);
     }

     40%,
     80% {
         -webkit-transform: translate3d(10px, 0, 0);
         transform: translate3d(10px, 0, 0);
     }
 }


 @-webkit-keyframes rotate-spinning-loader {
     from {
         -webkit-transform: rotate(0);
         transform: rotate(0);
     }

     to {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes rotate-spinning-loader {
     from {
         -webkit-transform: rotate(0);
         transform: rotate(0);
     }

     to {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 /* from animate.css */
 @-webkit-keyframes bounce-vertical {

     from,
     20%,
     53%,
     80%,
     to {
         -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }

     40%,
     43% {
         -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0);
     }

     70% {
         -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         -webkit-transform: translate3d(0, -7px, 0);
         transform: translate3d(0, -7px, 0);
     }

     90% {
         -webkit-transform: translate3d(0, -2px, 0);
         transform: translate3d(0, -2px, 0);
     }
 }

 @keyframes bounce-vertical {

     from,
     20%,
     53%,
     80%,
     to {
         -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
         animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
     }

     40%,
     43% {
         -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0);
     }

     70% {
         -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
         -webkit-transform: translate3d(0, -7px, 0);
         transform: translate3d(0, -7px, 0);
     }

     90% {
         -webkit-transform: translate3d(0, -2px, 0);
         transform: translate3d(0, -2px, 0);
     }
 }

 /* from animate.css */
 @-webkit-keyframes swing-horizontal {
     20% {
         -webkit-transform: rotate3d(0, 0, 1, 15deg);
         transform: rotate3d(0, 0, 1, 15deg);
     }

     40% {
         -webkit-transform: rotate3d(0, 0, 1, -10deg);
         transform: rotate3d(0, 0, 1, -10deg);
     }

     60% {
         -webkit-transform: rotate3d(0, 0, 1, 5deg);
         transform: rotate3d(0, 0, 1, 5deg);
     }

     80% {
         -webkit-transform: rotate3d(0, 0, 1, -5deg);
         transform: rotate3d(0, 0, 1, -5deg);
     }

     to {
         -webkit-transform: rotate3d(0, 0, 1, 0deg);
         transform: rotate3d(0, 0, 1, 0deg);
     }
 }

 @keyframes swing-horizontal {
     20% {
         -webkit-transform: rotate3d(0, 0, 1, 15deg);
         transform: rotate3d(0, 0, 1, 15deg);
     }

     40% {
         -webkit-transform: rotate3d(0, 0, 1, -10deg);
         transform: rotate3d(0, 0, 1, -10deg);
     }

     60% {
         -webkit-transform: rotate3d(0, 0, 1, 5deg);
         transform: rotate3d(0, 0, 1, 5deg);
     }

     80% {
         -webkit-transform: rotate3d(0, 0, 1, -5deg);
         transform: rotate3d(0, 0, 1, -5deg);
     }

     to {
         -webkit-transform: rotate3d(0, 0, 1, 0deg);
         transform: rotate3d(0, 0, 1, 0deg);
     }
 }

 @-webkit-keyframes dash {
     from {
         stroke-dashoffset: 2000;
     }

     to {
         stroke-dashoffset: 0;
     }
 }

 @keyframes dash {
     from {
         stroke-dashoffset: 2000;
     }

     to {
         stroke-dashoffset: 0;
     }
 }

 @-webkit-keyframes bounce-delay {

     0%,
     80%,
     100% {
         -webkit-transform: scale(0)
     }

     40% {
         -webkit-transform: scale(1.0)
     }
 }

 @keyframes bounce-delay {

     0%,
     80%,
     100% {
         -webkit-transform: scale(0);
         transform: scale(0);
     }

     40% {
         -webkit-transform: scale(1.0);
         transform: scale(1.0);
     }
 }



 /***** END OF ANIMATIONS *****/


 /* color picker */
 .color-picker-chooser {
     background: #FFFFFF;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 2rem;
     padding-bottom: 2rem;
 }

 .color-picker-chooser h5 {
     margin-bottom: 1rem;
     margin-top: 0.25rem;
 }

 .color-list {
     text-align: center;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .color-picker-chooser ul li {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     margin: 0.25rem;
     display: inline-block;
     cursor: pointer;
 }

 .color-picker-chooser ul li:hover {
     border: solid 1px #ADADAD;
     -webkit-box-shadow: 1px 1px 5px #ADADAD;
     box-shadow: 1px 1px 5px #ADADAD;
 }

 .color-picker-chooser .theme-color-1 {
     background-color: #A54648;
 }

 .color-picker-chooser .theme-color-2 {
     background-color: #2B6563;
 }

 .color-picker-chooser .theme-color-3 {
     background-color: #A67147;
 }

 .color-picker-chooser .theme-color-4 {
     background-color: #61A25E;
 }

 .color-picker-chooser .theme-color-5 {
     background-color: #843865;
 }

 .color-picker-chooser .theme-color-6 {
     background-color: #125E8A;
 }

 .color-picker {
     position: fixed;
     top: 15rem;
     width: 250px;
     z-index: 999;
     left: -250px;
 }

 .color-picker-coming-soon {
     top: 11rem;
 }

 .color-picker-handle {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     width: 50px;
     height: 50px;
     cursor: pointer;
     position: absolute;
     left: 250px;
 }

 .color-picker-handle:hover {
     border-bottom: none;
 }

 .color-picker-handle i {
     color: white;
     font-size: 1.5rem;
 }

 .hide-color-picker p {
     margin-top: 20px;
     margin-bottom: 0;
     cursor: pointer;
 }

 .hide-color-picker p:hover {
     text-decoration: underline;
 }

 .color-picker.hidden {
     display: none;
 }