/*
* SANDY - One page apps landing page
* Build Date: February 2016
* Last updated: July 2022
* Version: 1.5
* Author: ThemeAtelier
* Copyright (C) 2016 ThemeAtelier
*/
/* ------------------------------------- */
/* TABLE OF CONTENTS
/* -------------------------------------
	1. IMPORT GOOGLE FONTS
    2. GENERAL
		-2.1 PARALLAX
		-2.2 COLORS AND BACKGROUND
		-2.3 PADDINGS
		-2.4 MARGINS
		-2.5 BUTTONS
		-2.6 SECTION TITLE
		-2.7 TYPE ANIMATION CSS
		-2.8 PRE LOADER
		-2.9 SCROLL TO UP
	3. HEADER
	4. HERO SECTION
	5. FEATURES SECTION
	6. ABOUT SECTION
	7. HOW WORKS
	8. SCREENSHOTS SECTION
	9. NEW SECREENSHOTS SECTION
		-9.1 FREQUENTLY ASK QUESTIONS
	10. VIDEO PROMO SECTION
	11. PRICING TABLE
	12. FACTS SECTION
	13. TESTIMONIAL AREA
	14. BLOG SECTION
	15. CONTACT SECTION
	16. SUBSCRIPTION SECTION
	17. FOOTER SECTION
	18. BLOG LISTS PAGE
		-18.1 SIDEBAR
		-18.2 SINGLE PAGE
	19. EXTRA PAGES
		-19.1 COMING SOON PAGE
	------------------------------------- */

/*  ----------------------------------------------------
1. IMPORT GOOGLE FONTS
-------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i');

/*  ----------------------------------------------------
2. GENERAL
-------------------------------------------------------- */
body {
  color: #54657e;
  font-size: 16px;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  overflow-x: hidden;
  font-family: 'Nunito', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
button {
  font-family: 'Poppins', sans-serif;
  color: #0d3559;
  margin-top: 0;
  margin-bottom: 0;
}
a:hover,
a:focus,
a:active,
button {
  text-decoration: none;
  outline: none;
  webkit-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a {
  color: #346afe;
}
a:hover {
  color: #4676fa;
}
h1 {
  font-size: 48px;
}
h2 {
  font-size: 40px;
}
h3 {
  font-size: 36px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
  margin-bottom: 10px;
}
h6 {
  font-size: 18px;
}
blockquote {
  font-style: italic;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-bottom: 15px;
}
/* -2.1 PARALLAX */
.bg-parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
.gredient-overlay {
  background: #346afe;
  background: -webkit-linear-gradient(to left, #346afe, #004e92);
  background: -webkit-linear-gradient(right, #346afe, #004e92);
  background: linear-gradient(to left, #346afe, #004e92);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.opacity-8 {
  opacity: 0.8;
}

/* -2.2 COLORS AND BACKGROUND */
.primary-bg {
  background: #346afe;
}
.bg-gray {
  background: #eef4f5;
}
.bg-black {
  background: #222328;
}
.bg-gredient {
  background: #eef4f5;
  background: -webkit-linear-gradient(
    top,
    rgb(244, 250, 255) 0%,
    rgb(221, 240, 253) 100%
  );
  background: linear-gradient(
    to bottom,
    rgb(244, 250, 255) 0%,
    rgb(221, 240, 253) 100%
  );
}
.color-white h1,
.color-white h4,
.color-white p,
.color-white h2,
.color-white {
  color: #ffffff;
}
.card-header .btn-link {
  color: #ffffff;
}
/* -2.3 PADDINGS */
.pt200 {
  padding-top: 200px;
}
.pt100 {
  padding-top: 100px;
}
.pb100 {
  padding-bottom: 100px;
}
.pt70 {
  padding-top: 70px;
}
.pt50 {
  padding-top: 50px;
}
.pb50 {
  padding-bottom: 50px;
}

/* -2.4 MARGINS */
.mb60 {
  margin-bottom: 60px;
}
.mt60 {
  margin-top: 60px;
}
.mb30 {
  margin-bottom: 30px;
}
.mt30 {
  margin-top: 30px;
}
/* -2.5 BUTTONS */
.primary-btn {
  padding: 15px 30px;
  background: #346afe;
  color: #ffffff;
  border: none;
  text-transform: uppercase;
  border-radius: 5px;
  display: inline-block;
}
.primary-btn span {
  font-weight: 500;
  font-size: 16px;
}
.download-apps-content .primary-btn {
  text-align: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
button.primary-btn {
  padding: 12px 20px;
}
.primary-btn i {
  margin-right: 8px;
}
.primary-btn:hover {
  background: #4676fa;
  color: #ffffff;
}
.cd-btn {
  background: #346afe;
}
.cd-btn:hover {
  background: #4676fa;
  color: #ffffff;
}
/* -2.6 SECTION TITLE */
.section-title h2 {
  margin-bottom: 15px;
  text-transform: uppercase;
}
.section-title h2 span {
  color: #346afe;
}
.lines {
  width: 6px;
  position: relative;
  border-top: 2px solid #346afe;
}
.section-title .lines {
  width: 6px;
  position: relative;
  margin-left: 34px;
  margin-top: 15px;
}
.text-center .lines {
  margin: auto;
}
.lines:before,
.lines:after {
  content: '';
  position: absolute;
  top: -2px;
  width: 30px;
  border-top: 2px solid #346afe;
}
.lines:before {
  left: -34px;
}
.lines:after {
  right: -34px;
}
.section-title p {
  margin-top: 20px;
}

/* -2.7 TYPE ANIMATION CSS */
.typed-cursor {
  opacity: 1;
  font-weight: 100;
  -webkit-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: #346afe;
}
@-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* -2.8 PRE LOADER */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eef4f5;
  z-index: 99999;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
}
.status {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.loader {
  position: relative;
  margin: 0px auto;
  width: 70px;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.circular {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%,
  0% {
    stroke: #346afe;
  }
  40% {
    stroke: #346afe;
  }
  66% {
    stroke: #346afe;
  }
  80%,
  90% {
    stroke: #346afe;
  }
}
@keyframes color {
  100%,
  0% {
    stroke: #346afe;
  }
  40% {
    stroke: #346afe;
  }
  66% {
    stroke: #346afe;
  }
  80%,
  90% {
    stroke: #346afe;
  }
}

/* -2.8 SCROLL TO UP */
.scrollup {
  background: #346afe;
  border-radius: 2px;
  bottom: 30px;
  color: #fff;
  cursor: pointer;
  float: right;
  font-size: 20px;
  height: 40px;
  line-height: 35px;
  position: fixed;
  right: 50px;
  text-align: center;
  width: 38px;
  z-index: 9;
  border: 1px solid transparent;
  webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.scrollup:hover {
  background: #eef4f5;
  color: #0d3559;
  border: 1px dashed #346afe;
}
/*  ----------------------------------------------------
3. HEADER
-------------------------------------------------------- */
.header {
  background: rgba(238, 244, 245, 0.7);
  padding-top: 20px;
  padding-bottom: 20px;
  transition: all 0.4s;
}
.header a {
  color: #0d3559;
}

.header.nav-sticky {
  background: #346afe;
}
.header-nav .navbar-nav > li .sub-menu li > a:hover {
  background: #346afe;
  color: #fff;
}
.header.nav-sticky a {
  color: #ffffff;
}
.header.nav-sticky .sub-menu a {
  color: #0d3559;
}
.header.nav-sticky .dropdown-menu a {
  color: #0d3559;
}
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
  background: transparent;
}
.logo {
  font-size: 30px;
  height: auto;
  padding-top: 0px;
  padding-bottom: 0px;
}

.logo-light {
  display: none;
}
.nav-sticky .logo-light {
  display: block;
}
.nav-sticky .logo-dark {
  display: none;
}
.logo:hover {
  color: inherit;
}
.logo:first-letter {
  font-size: 40px;
}
.navbar-light .navbar-toggler {
  border: 1px solid #0d3559;
  margin-top: 0px;
  color: #0d3559;
}
.navbar-light.nav-sticky .navbar-toggler {
  border: 1px solid #ffffff;
  color: #ffffff;
}

.header .navbar-nav {
  margin-top: 5px;
}
.header .navbar-nav > li > a {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
}
.header .navbar-nav > li > a.active,
.header .navbar-nav > li > a:hover,
.header .navbar-nav > li > a:focus {
  background: transparent;
  color: #346afe;
}
.header.nav-sticky .navbar-nav > li > a.active,
.header.nav-sticky .navbar-nav > li > a:hover,
.header.nav-sticky .navbar-nav > li > a:focus {
  color: #eef4f5;
}
.header .nav li a:before {
  background: #346afe;
  bottom: -5px;
  content: '';
  height: 1px;
  position: absolute;
  right: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 15px;
}
.header.nav-sticky .nav li a:before,
.header.nav-sticky .nav li a:after {
  background: #ffffff;
}
.header .nav li a:after {
  background: #346afe;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: -5px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 15px;
}
.header .nav li a.active:after,
.header .nav li a.active:before,
.header .nav li a:hover:after,
.header .nav li a:hover:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.nav-sticky .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: #346afe;
  color: #ffffff;
}
.dropdown-menu > li > a {
  padding: 5px 20px;
}
.dropdown-menu > li > a:hover:after,
.dropdown-menu > li > a:hover:before,
.dropdown-menu > li.active > a:after,
.dropdown-menu > li.active > a:before {
  opacity: 0;
  width: 0px;
}
.navbar-right .dropdown-menu {
  border: medium none;
  border-radius: 0;
  top: 40px;
}

.header .dropdown li a:hover {
  color: #ffffff;
}
/* NAV BAR */

.header-nav .navbar-nav > li {
  margin-left: 15px;
  position: relative;
}

.header-nav .navbar-nav .nav-btn.nav-link {
  border: 1px solid #ffffff;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

.header-nav .navbar-nav .nav-btn.nav-link i {
  margin-left: 5px;
}
.nav-sticky .sub-menu-toggle {
  color: #ffffff;
}
.navbar-toggler {
  border: 1px solid #0d3559;
}

.nav-sticky .navbar-toggler {
  border: 1px solid #ffffff;
}

.nav-sticky .navbar-toggler i {
  color: #ffffff;
}

.header-nav .navbar-nav > li .sub-menu li > a {
  font-size: 14px;
  display: block;
  padding: 5px 20px 5px 20px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-decoration: none;
  -webkit-transition: 0.3s;
  /* Safari, Chrome */
  -moz-transition: 0.3s;
  /* Firefox 4.0~16.0 */
  transition: 0.3s;
  /* IE >9, FF >15, Opera >12.0 */
}

.header-nav .navbar-nav > li .sub-menu li:hover > a {
  padding-left: 28px;
}

/* Navbar Toogle */
.navbar-toggler {
  outline: none !important;
}
.header-nav.nav-sticky {
  top: 0;
  margin-top: 0;
  padding: 12px 10px;
  -webkit-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
  /* Webkit browsers */
  -moz-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
  /* Firefox */
  -ms-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
  /* IE9 */
  -o-box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
  /* Opera(Old) */
  box-shadow: 0px 1px 27px -3px rgba(0, 0, 0, 0.2);
  /* IE9+, News */
}

.header-nav .navbar-nav > li:hover .sub-menu {
  opacity: 1;
  /* W3C */
  filter: alpha(opacity=100);
  /* IE */
}
.navbar-nav .nav-link {
  float: left;
}
@media (min-width: 992px) {
  .header-nav .navbar-nav > li a {
    position: relative;
  }
  .header-nav .navbar-nav > li .sub-menu {
    background: #ffffff;
    margin: 0;
    padding: 10px 0;
    min-width: 200px;
    max-width: 100%;
    position: absolute;
    left: 0;
    top: calc(100% + 30px);
    list-style: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    opacity: 0;
    /* W3C */
    filter: alpha(opacity=0);
    /* IE */
    z-index: 999;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* Webkit browsers */
    -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* Firefox */
    -ms-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* IE9 */
    -o-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* Opera(Old) */
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* IE9+, News */
    pointer-events: none;
    -webkit-transition: 0.3s;
    /* Safari, Chrome */
    -moz-transition: 0.3s;
    /* Firefox 4.0~16.0 */
    transition: 0.3s;
    /* IE >9, FF >15, Opera >12.0 */
  }

  .header-nav .navbar-nav > li .sub-menu-toggle {
    font-size: 15px;
    line-height: 32px;
  }

  .header-nav .navbar-nav > li:hover .sub-menu {
    pointer-events: auto;
    top: 100%;
  }

  ul.sub-menu {
    background: #ffffff;
    margin: 0;
    padding: 10px 0;
    min-width: 200px;
    max-width: 100%;
    position: absolute;
    left: 0;
    top: calc(100% + 30px);
    list-style: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    opacity: 0;
    /* W3C */
    filter: alpha(opacity=0);
    /* IE */
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* Webkit browsers */
    -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* Firefox */
    -ms-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* IE9 */
    -o-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* Opera(Old) */
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
    /* IE9+, News */
    pointer-events: none;
    -webkit-transition: 0.3s;
    /* Safari, Chrome */
    -moz-transition: 0.3s;
    /* Firefox 4.0~16.0 */
    transition: 0.3s;
    /* IE >9, FF >15, Opera >12.0 */
  }
}
@media (max-width: 991px) {
  .header-nav {
    top: 0;
    padding: 10px 15px;
  }

  .navbar-nav {
    padding-top: 5px;
  }

  .header-nav .navbar-nav > li {
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-nav .navbar-nav > li .sub-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    color: #ffffff;
    width: 100%;
    height: 44px;
    width: 44px;
    line-height: 44px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    z-index: 1;
    background: #0d3559;
  }

  .header-nav .navbar-nav > li .sub-menu {
    margin: 0;
    list-style: none;
    padding-left: 10px;
    padding-top: 0px;
  }

  .navbar-nav .nav-link {
    float: none;
  }

  .header-nav .navbar-nav > li .sub-menu {
    display: none;
  }

  .header-nav .navbar-nav > li.show .sub-menu {
    display: block;
  }

  .header-nav .navbar-nav > li .sub-menu li > a {
    padding: 5px 0;
    color: #ffffff;
  }

  .header-nav .navbar-nav > li .sub-menu li > a:after {
    left: -15px;
  }

  .header-nav .navbar-nav > li .sub-menu li:hover > a {
    padding-left: 0px;
  }

  .navbar-nav .nav-link {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-link:hover,
  .nav-link.active {
    background: #151515;
  }
}
/*  ----------------------------------------------------
4. HERO SECTION
-------------------------------------------------------- */

.hero-section {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero-full-screen {
  height: 600px;
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
}
.full-height {
  min-height: 100vh;
}
.display-table {
  width: 100%;
  height: 100%;
  display: table;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
.hero-content h1 {
  margin-bottom: 30px;
}
.hero-content p {
  margin-bottom: 30px;
}
.promo-image {
  position: absolute;
  right: 0px;
  bottom: 0;
}
.promo-image {
  -webkit-animation-name: UpDown;
  -moz-animation-name: UpDown;
  /* Firefox 5.0~16.0 */
  animation-name: UpDown;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  /* Firefox 5.0~16.0 */
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  /* Firefox 5.0~16.0 */
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  /* Firefox 5.0~16.0 */
  animation-direction: alternate;
}
/*  ----------------------------------------------------
5. FEATURES SECTION
-------------------------------------------------------- */
.media {
  margin-top: 20px;
  margin-bottom: 20px;
}
.media h5 {
  font-weight: 600;
}
.media-icon {
  width: 60px;
  height: 60px;
  text-align: center;
  border: 1px dashed #346afe;
  display: inline-block;
  border-radius: 5px;
  webkit-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.media-icon img {
  width: 40px;
  height: 40px;
  position: relative;
  top: 9px;
}
.media-icon i {
  font-size: 35px;
  color: #346afe;
  line-height: 60px;
}
.media:hover .media-icon {
  background: #346afe;
}
.media:hover .media-icon i {
  color: #ffffff;
}
.vertical-align {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.vertical-align > .flex-box,
.vertical-align > .flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*  ----------------------------------------------------
6. ABOUT SECTION
-------------------------------------------------------- */
.about-boxes .media {
  text-align: center;
  padding: 30px;
  webkit-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  border-radius: 5px;
  background: #eef4f5;
}
.about-boxes .media p {
  margin-bottom: 0px;
}
.bg-gray .about-boxes .media:hover {
  background: #ffffff;
  box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
}
.about-boxes .media:hover {
  background: #eef4f5;
  box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
}

/*  ----------------------------------------------------
7. HOW WORKS
-------------------------------------------------------- */
.how-works-item .icon-outer {
  display: inline-table;
  width: 90px;
  height: 90px;
  position: relative;
  border-radius: 5px;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
  background-color: #ffffff;
  color: #346afe;
  line-height: 90px;
  font-size: 40px;
  margin-bottom: 25px;
  border: 1px dashed #346afe;
}
.how-works-item:hover .icon-outer {
  background: #346afe;
  color: #ffffff;
  box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.15);
}
.how-works-item .title {
  font-size: 22px;
  font-weight: 400;
}
.how-works-item {
  position: relative;
  z-index: 1;
}
.how-works-item:after,
.how-works-item:before {
  content: '';
  width: 50%;
  border-top: 1px solid;
  position: absolute;
  top: 45px;
  transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg) scale(1);
  -o-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg)
    scale(1);
  -ms-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg)
    scale(1);
  -moz-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg)
    scale(1);
  -webkit-transform: translateX(0) translateY(-50%) translateZ(0) rotate(0deg)
    scale(1);
  z-index: -1;
}
.how-works-item::before {
  right: 50%;
}
.how-works-item:after,
.how-works-item:before {
  border-color: #0d3559;
}
.how-works-item:first-child::before {
  border-color: transparent;
}
.how-works-item:last-child::after {
  border-color: transparent;
}
/*  ----------------------------------------------------
8. SCREENSHOTS SECTION
-------------------------------------------------------- */
.shot-item {
  padding: 8px;
  border-radius: 4px;
  background: #eef4f5;
}
.bg-gray .screenshots .shot-item {
  background: #ffffff;
}
.shot-item img {
  border-radius: 4px;
}
.overlay {
  display: block;
  position: relative;
}
.overlay:before,
.overlay:after {
  position: absolute;
  content: '';
  height: 0;
  width: 100%;
  background: #346afe;
  background: -webkit-linear-gradient(to left, #346afe, #004e92);
  background: -webkit-linear-gradient(right, #346afe, #004e92);
  background: linear-gradient(to left, #346afe, #004e92);
  opacity: 0.8;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  left: 0;
}
.overlay:before {
  top: 0;
  z-index: 1;
}
.overlay:after {
  bottom: 0;
  z-index: 1;
}
.shot-item:hover .overlay:before {
  height: 50%;
}
.shot-item:hover .overlay:after {
  height: 50%;
}
.overlay .item-icon {
  height: 50px;
  width: 50px;
  line-height: 50px;
  color: #ffffff;
  top: 50%;
  left: 50%;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  position: absolute;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  font-size: 50px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.shot-item:hover .item-icon {
  visibility: visible;
  opacity: 1;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
}
.owl-dot {
  margin-top: 30px;
}
.owl-theme .owl-dots .owl-dot span {
  background: #7a9af2;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #4676fa;
  opacity: 0.5;
}

/*  ----------------------------------------------------
9. NEW SECREENSHOTS SECTION
-------------------------------------------------------- */
.screenshots-mobile {
  padding: 73px 14px 0px 14px;
  background: rgba(0, 0, 0, 0) url(../img/screenshot-mobile.png) no-repeat
    scroll top center;
  background-size: 100%;
  max-width: 293px;
  margin: 0 auto;
}
.screenshots-mobile.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 70px;
}
.screenshots-mobile .shot-item {
  padding: 0px;
  border-radius: 0px;
}
.mfp-counter {
  display: none;
}

/* -9.1 FREQUENTLY ASK QUESTIONS */

.wrap {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.panel {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  background: none;
  box-shadow: none;
}
.panel:last-child {
  border-bottom: none;
}
.panel-group > .panel:first-child .panel-heading {
  border-radius: 4px 4px 0 0;
}
.panel-group .panel {
  border-radius: 0;
}
.panel-group .panel + .panel {
  margin-top: 0;
}
.panel-heading {
  background: #346afe;
  border-radius: 0;
  border: none;
  color: #fff;
  padding: 0;
  webkit-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.panel-heading:hover {
  opacity: 0.8;
}
.panel-title a {
  display: block;
  color: #fff;
  padding: 15px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
}
.panel-body {
  background: #eef4f5;
}
.bg-gray .panel-body {
  background: #fff;
}
.panel:last-child .panel-body {
  border-radius: 0 0 4px 4px;
}
.panel:last-child .panel-heading {
  border-radius: 0 0 4px 4px;
  -webkit-transition: border-radius 0.3s linear 0.2s;
  transition: border-radius 0.3s linear 0.2s;
}
.panel:last-child .panel-heading.active {
  border-radius: 0;
  -webkit-transition: border-radius linear 0s;
  transition: border-radius linear 0s;
}
.panel-heading a:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  font-size: 24px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.panel-heading.active a:before {
  content: ' ';
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0);
  transform: scale(0);
}
#bs-collapse .card-header button:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#bs-collapse .card-header.active a:after {
  content: '\e909';
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#accordion .card-header button:before {
  content: '\e316';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#accordion .card-header.active button:before {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#accordion button:hover,
#accordion button:focus {
  color: #ffffff;
}
/*  ----------------------------------------------------
10. VIDEO PROMO SECTION
-------------------------------------------------------- */
.video-popup {
  border: 1px dashed #ffffff;
  margin-top: 30px;
  display: inline-block;
  width: 70px;
  height: 70px;
  color: #ffffff;
  line-height: 70px;
  font-size: 25px;
  border-radius: 100%;
  background: transparent;
}

/*  ----------------------------------------------------
11. PRICING TABLE
-------------------------------------------------------- */
.bg-gray .single-package {
  background: #ffffff;
}
.bg-gray .single-package .price {
  background: #eef4f5;
}
.single-package {
  background: #eef4f5;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.single-package:hover {
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15);
}
.bg-gray .featured-package,
.featured-package {
  background: #346afe;
  background: -webkit-linear-gradient(to left, #346afe, #004e92);
  background: -webkit-linear-gradient(right, #346afe, #004e92);
  background: linear-gradient(to left, #346afe, #004e92);
}
.featured-package h4,
.featured-package ul {
  color: #ffffff;
}
.price {
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
.price h5 {
  margin-bottom: 0px;
}
.sign {
  font-size: 14px;
  vertical-align: super;
}
.price .month {
  font-size: 14px;
}
.package-head {
  margin-top: 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.package-feature {
  margin: 0;
  padding: 0;
  list-style: none;
}
.package-feature li {
  margin-top: 10px;
  margin-bottom: 10px;
}
.download-btn {
  padding-top: 20px;
  padding-bottom: 20px;
}
.download-btn .primary-btn {
  font-size: 14px;
  text-transform: inherit;
  padding: 8px 30px;
}
.featured-package .primary-btn {
  background: #ffffff;
  color: #346afe;
}
.featured-package .primary-btn:hover {
  background: #eef4f5;
}
/*  ----------------------------------------------------
12. FACTS SECTION
-------------------------------------------------------- */
.single-counter {
  color: #ffffff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.single-counter h4 {
  color: #ffffff;
  font-weight: normal;
}
.single-counter i {
  font-size: 50px;
}
.counter-number {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 35px;
}
/*  ----------------------------------------------------
13. TESTIMONIAL AREA
-------------------------------------------------------- */
.testimonial-item {
  text-align: center;
}
.testimonial-item blockquote {
  font-style: italic;
  border: none;
  margin: 0px;
  padding: 0px;
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
}
.client-avater {
  display: inline-block;
  border-radius: 4px;
  padding: 5px;
  background: #eef4f5;
}
.bg-gray .client-avater {
  background: #ffffff;
}
.owl-carousel .owl-item .client-avater img {
  width: auto;
  margin: 0 auto;
}
.company-info {
  margin-bottom: 0px;
  font-size: 14px;
}

/*  ----------------------------------------------------
14. BLOG SECTION
-------------------------------------------------------- */
.blog-post {
  background: #eef4f5;
  padding: 8px;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}
.bg-gray .blog-post {
  background: #ffffff;
}
.blog-thumb {
  height: 250px;
  margin-bottom: 15px;
  background-size: cover;
  background-position: center center;
}
.blog-thumb .thumb-overlay {
  border: 1px solid #ffffff;
  width: 100%;
  height: 100%;
  background: #346afe;
  background: -webkit-linear-gradient(to left, #346afe, #004e92);
  background: -webkit-linear-gradient(right, #346afe, #004e92);
  background: linear-gradient(to left, #346afe, #004e92);
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  height: 0;
}
.blog-post:hover .blog-thumb .thumb-overlay {
  opacity: 0.8;
  height: 100%;
}
.blog-meta {
  color: #ffffff;
  padding: 15px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  right: 100%;
  position: relative;
}
.blog-post:hover .blog-meta {
  right: 0;
}
.blog-meta a {
  color: #ffffff;
}
.blog-meta a:hover {
  color: #ffffff;
}
.post-content {
  padding-left: 15px;
  padding-right: 15px;
}
.post-title {
  font-size: 22px;
  margin-bottom: 10px;
}
.latest-blog {
  padding-top: 25px;
  position: relative;
}
.owl-nav {
  position: absolute;
  top: -50px;
  right: 0;
}
.owl-theme .owl-nav [class*='owl-'] {
  padding: 4px 14px;
  font-size: 20px;
  background: #346afe;
}
.owl-theme .owl-nav [class*='owl-']:hover {
  background: #4676fa;
}

/*  ----------------------------------------------------
15. CONTACT SECTION
-------------------------------------------------------- */
.contact-block {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  padding: 30px;
  overflow: hidden;
}
.contact-block h3 {
  text-align: center;
  margin-bottom: 10px;
}
.contact-block .subtitle {
  margin-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
}
.email-success,
.email-failed,
.email-loading,
.success-msg,
.error-msg {
  font-size: 15px;
  text-align: center;
  padding: 10px;
  display: none;
  margin: 0px !important;
}
.email-loading {
  color: #52b8ff;
}
.email-loading img {
  width: 15px;
  position: relative;
  top: -2px;
}
.email-failed,
.error-msg {
  color: #ff5252 !important;
}
.email-failed .icon {
  font-size: 20px;
  position: relative;
  top: 5px;
}
.email-success,
.success-msg {
  color: #56cc35;
}
.email-failed .icon,
.email-success .icon,
.error-msg .icon,
.success-msg .icon {
  font-size: 20px;
  position: relative;
  top: 2px;
}
.input-box {
  margin-bottom: 10px;
  margin-top: 10px;
  height: 50px;
  box-shadow: none;
  font-size: 16px;
}
.textarea-box {
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: none;
  font-size: 16px;
}
textarea.form-control.textarea-box {
  height: 120px;
}
.input-box:focus,
.textarea-box:focus {
  border: 1px solid #346afe;
  box-shadow: none;
}

/*  ----------------------------------------------------
16. SUBSCRIPTION SECTION
-------------------------------------------------------- */
.subscription-form {
  margin-bottom: 70px;
}
.subscription-form .input-box {
  min-width: 320px;
}
.subscribe-area h3,
.download-area h3 {
  margin-bottom: 10px;
}
.subscribe-area .primary-btn {
  margin-left: 8px;
}
.download-area p {
  margin-bottom: 25px;
}
.download-area .primary-btn {
  margin-bottom: 8px;
  margin-left: 8px;
  padding: 10px 18px;
  font-size: 14px;
  margin-right: 5px;
}

/*  ----------------------------------------------------
17. FOOTER SECTION
-------------------------------------------------------- */
.social-icons {
  margin-bottom: 30px;
}
.social-icons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-icons ul li {
  display: inline;
}
.social-icons ul li a {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 15px;
  border: 1px dashed #ccc;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
}
.social-icons ul li a:hover {
  color: #ffffff;
}
.social-icons ul li i {
  line-height: 40px;
}
.facebook a {
  color: #4867aa;
}
.facebook a:hover {
  background: #4867aa;
}
.twitter a {
  color: #1da1f2;
}
.twitter a:hover {
  background: #1da1f2;
}
.google-plus a {
  color: #dd4d42;
}
.google-plus a:hover {
  background: #dd4d42;
}
.youtube a {
  color: #df2926;
}
.youtube a:hover {
  background: #df2926;
}
.linked-in a {
  color: #007bb6;
}
.linked-in a:hover {
  background: #007bb6;
}
.instagram a {
  color: #a823d1;
}
.instagram a:hover {
  background: #a823d1;
}
.pinterest a {
  color: #bd081c;
}
.pinterest a:hover {
  background: #bd081c;
}
.dribbble a {
  color: #ea4c89;
}
.dribbble a:hover {
  background: #ea4c89;
}
.behance a {
  color: #0b7cff;
}
.behance a:hover {
  background: #0b7cff;
}
/*  ----------------------------------------------------
18. BLOG LISTS PAGE
-------------------------------------------------------- */
.sandy-pagenation {
  margin-top: 25px;
}
.sandy-pagenation a {
  color: #54657e;
}
.sandy-pagenation a:hover,
.sandy-pagenation a.active {
  background: #346afe;
  color: #fff;
}
.sandy-pagination .pagination-lg > li:first-child > a,
.sandy-pagination .pagination-lg > li:first-child > span {
  border-radius: 0px;
}
.sandy-pagination .pagination > li > a,
.sandy-pagination .pagination > li > span {
  color: #54657e;
}
.sandy-pagination .pagination > li.active > a {
  color: #ffffff;
  background: #346afe;
}
.post-meta {
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 15px;
}
.post-meta ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-meta ul li {
  display: inline-block;
  margin-right: 8px;
  margin-left: 8px;
}
.post-meta ul li i {
  margin-right: 5px;
}
.post-meta ul li a {
  color: #ffffff;
}
.post-thumb {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px dashed #346afe;
  border-radius: 4px;
  background: #fff;
}
.bg-gray .post-thumb {
  background: #eef4f5;
}
.post-thumb img {
  width: 100%;
  border-radius: 4px;
}
.post-content-full {
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 20px;
  overflow: hidden;
}
.blog-footer {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 15px;
  padding-bottom: 10px;
  border-top: 1px dashed #346afe;
}
.blog-footer span {
  padding-right: 15px;
}
/* -18.1 SIDEBAR */
#sidebar {
  overflow: hidden;
}
.sidebar-inner .widget {
  margin-top: 15px;
  margin-bottom: 30px;
}
.widget.widget_search #searchform {
  position: relative;
}
.widget.widget_search #searchform:after {
  content: '\f002';
  font-family: FontAwesome;
  right: 15px;
  position: absolute;
  top: 50%;
  margin-top: -13px;
  font-size: 20px;
  color: #c3c3c3;
}
.bg-gray .sidebar-inner .widget {
  background: #ffffff;
}
.sidebar-inner .widget {
  background: #eef4f5;
  padding: 30px;
}
.widget h3 {
  border-bottom: 1px solid #cccccc;
  font-size: 22px;
  margin: 0 0 20px;
  padding: 0 0 20px;
  position: relative;
}
.widget h3:before {
  content: '';
  width: 60px;
  height: 5px;
  background: #346afe;
  position: absolute;
  bottom: -3px;
  left: 10px;
}
.widget h6 {
  margin-top: 8px;
  margin-bottom: 20px;
}
.widget a {
  color: #54657e;
}
.widget ul {
  line-height: 30px;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.widget ul li {
  position: relative;
  padding-left: 15px;
}
.widget ul li::before {
  content: '\f0da';
  position: absolute;
  left: 0;
  font-family: 'FontAwesome';
  color: #333;
  transition: all 0.5s;
  opacity: 1;
}
.latest-post-widget h5 {
  font-size: 16px;
}
.latest-post-widget span {
  font-size: 14px;
}
.tagcloud a {
  display: inline-block;
  border: 1px dashed #346afe;
  border-radius: 20px;
  padding: 0px 15px;
  margin-right: 5px;
  margin-bottom: 10px;
}
/* -18.2 SINGLE PAGE */
.nav-links {
  margin-top: 15px;
  margin-bottom: 15px;
  overflow: hidden;
}
.nav-links span {
  text-transform: uppercase;
}
.nav-links a {
  display: block;
}
.nav-links .nav-previous,
.nav-links .nav-next {
  background: #eef4f5;
  padding: 10px 15px;
  margin-bottom: 15px;
}
.nav-links .nav-previous:hover,
.nav-links .nav-next:hover {
  opacity: 0.7;
}
.bg-gray .nav-links .nav-previous,
.bg-gray .nav-links .nav-next {
  background: #ffffff;
}
.blog-comment {
  background: #eef4f5;
  padding: 50px 30px;
  margin-top: 30px;
  overflow: hidden;
}
.bg-gray .blog-comment {
  background: #ffffff;
}
.blog-comment h4 {
  margin-bottom: 30px;
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 50px;
}
.comment-list .the-comment {
  border-bottom: 1px solid #e7e6e6;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
.comment-list .children {
  list-style: none;
}
.avatar {
  float: left;
  margin-right: 15px;
  padding: 5px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px dashed #346afe;
}
.bg-gray .avater {
  background: #eef4f5;
}
.comment-list .the-comment p {
  margin-bottom: 0px;
}
.meta {
  margin-bottom: 10px;
}
.blog-comment .textarea-box {
  margin-top: 10px;
  margin-bottom: 10px;
}
.blog-comment .primary-btn {
  margin-top: 10px;
}

/*  ----------------------------------------------------
19. EXTRA PAGES
-------------------------------------------------------- */
.extra-page-wrapper {
  overflow: hidden;
  position: relative;
}
.ep-title {
  font-size: 120px;
  line-height: 130px;
}
.ep-subtitle {
  font-size: 22px;
  margin-bottom: 25px;
}
.cloud {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  border: 5px dashed #eef4f5;
  opacity: 0.8;
}
.x1 {
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
  top: 150px;
  border: 5px dotted #346afe;
}
.x2 {
  border: 5px solid #fe7e17;
  left: 200px;
  top: 200px;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: moveclouds 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}
.x3 {
  border: 5px dashed #673ab7;
  left: -250px;
  top: 250px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}
.x4 {
  border: 5px dotted #e91e63;
  left: 470px;
  top: 300px;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  -webkit-animation: moveclouds 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}
.x5 {
  border: 5px solid #e91e63;
  left: -150px;
  top: 100px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}
.x6 {
  border: 5px dashed #8d6e63;
  left: -150px;
  top: 500px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
}
.x7 {
  border: 5px dotted 08C2F3;
  left: 470px;
  bottom: 100px;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  -webkit-animation: moveclouds 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}
.x8 {
  border: 5px solid #6fda44;
  left: -250px;
  bottom: 250px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}
.x9 {
  border: 5px dotted #78ac53;
  left: 200px;
  bottom: 200px;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: moveclouds 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}
.x10 {
  border: 5px dashed #123f63;
  -webkit-animation: moveclouds 15s linear infinite;
  -moz-animation: moveclouds 15s linear infinite;
  -o-animation: moveclouds 15s linear infinite;
  bottom: 150px;
}
@-webkit-keyframes moveclouds {
  0% {
    margin-left: 1000px;
  }
  100% {
    margin-left: -1000px;
  }
}
@-moz-keyframes moveclouds {
  0% {
    margin-left: 1000px;
  }
  100% {
    margin-left: -1000px;
  }
}
@-o-keyframes moveclouds {
  0% {
    margin-left: 1000px;
  }
  100% {
    margin-left: -1000px;
  }
}
/* -19.1 COMING SOON PAGE */
.extra-page-content h1,
.extra-page-content h4 {
  margin-bottom: 10px;
}
.countdown-timer {
  margin-bottom: 35px;
}
.countdown-timer ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.countdown-timer ul li {
  display: inline-block;
  margin-right: 25px;
  margin-left: 25px;
}
.countdown-timer ul li span {
  display: block;
  font-size: 35px;
}
.extra-page-content .logo {
  margin-bottom: 15px;
  font-size: 35px;
  color: #ffffff;
}
.extra-page-content .logo {
  margin-bottom: 35px;
  font-size: 50px;
  color: #ffffff;
  display: inline-block;
}
.extra-page-content .logo:first-letter {
  font-size: 70px;
}
/* Animations */
@-webkit-keyframes UpDown {
  0% {
    -webkit-transform: translateY(0);
    /* Safari, Chrome */
    -moz-transform: translateY(0);
    /* Firefox 3.5~16.0 */
    -ms-transform: translateY(0);
    /* IE9~10 */
    -o-transform: translateY(0);
    /* Opera 10.5~12.10 */
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(30px);
    /* Safari, Chrome */
    -moz-transform: translateY(30px);
    /* Firefox 3.5~16.0 */
    -ms-transform: translateY(30px);
    /* IE9~10 */
    -o-transform: translateY(30px);
    /* Opera 10.5~12.10 */
    transform: translateY(30px);
  }
}