/* ----------------------------------

Template Name: Softing - Software Landing Page
Author: validtheme
Version: 1.0

-------------------------------------

Table of contents

    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Blog
    20. Footer
    21. Home Page
    22. Services Page
    23. About Page
    24. Projects Page
    25. Pricing Page
    26. PHP Contact Form
    27. Others

*/
/*
** General Styles for HTML tags
*/
* {
  padding: 0;
  margin: 0;
}
html {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  overflow-x: hidden;
  background-color: #fff;
}
html,
body,
.wrapper {
  height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #232323;
  font-weight: normal;
  line-height: 1.2;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0;
  margin: 0;
}
h1,
h2,
h3,
h4 {
  margin-bottom: 15px;
}
h5 {
  margin-bottom: 10px;
}
img {
  border: none;
  outline: none;
  max-width: 100%;
}
label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 5px;
  max-width: 100%;
}
a,
.btn,
button {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  outline: medium none;
}
a img,
iframe {
  border: none;
}
p {
  color: #232323;
  line-height: 26px;
  margin: 0 0 15px;
  text-transform: none;
  font-weight: 400;
}
hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid #eee;
}
pre {
  display: block;
  margin: 0 0 30px;
  padding: 9.5px;
  word-wrap: break-word;
  word-break: break-all;
  color: #333;
  border: 1px solid #ededed;
  border-radius: inherit;
  background-color: #f9f9f9;
  font-size: 13px;
  line-height: 1.42857143;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: inherit;
}
ul {
  margin: 0;
  list-style-type: none;
}
a,
a:active,
a:focus,
a:hover {
  outline: none;
  text-decoration: none;
  color: #232323;
}
a:hover {
  color: #232323;
}
a {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  text-decoration: none;
}
b,
strong {
  font-weight: 900;
}
.btn.active,
.btn:active {
  background-image: inherit !important;
}
.btn.focus,
.btn:active:focus,
.btn:active:hover,
.btn:focus,
.btn:hover {
  outline: 0;
}
.btn.circle {
  border-radius: 30px;
}
.btn.active,
.btn:active {
  outline: 0;
  box-shadow: inherit;
}
input {
  border: 1px solid #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
  min-height: 50px;
}
/* Default CSS */
.container-half {
  margin: 0 auto;
  width: 60%;
  padding: 0 15px;
}
.bg-cover {
  background-position: center center;
  background-size: cover;
}
.bg-fixed {
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
}
.bg-gray {
  background-color: #ddd;
}
.bg-theme-small {
  background-color: #edf5ff;
}
.bg-light {
  background-color: #fff;
}
.bg-theme {
  background-color: #018e8c;
  background: #018e8c;
  background: linear-gradient(90deg, #018e8c 0%, #68d8d6 70%);
}
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p,
.text-light a {
  color: #fff;
}
.shadow {
  position: relative;
  z-index: 1;
}
.shadow.dark::after {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.shadow.dark-hard::after {
  background: #232323 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.75;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.shadow.light::after {
  background: #fff none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.shadow.theme::after {
  background: #018e8c none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.shadow.theme-hard::after {
  background: #018e8c none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.default-padding {
  padding-top: 30px;
  padding-bottom: 30px;
}
.default-padding-top {
  padding-top: 80px;
}
.default-padding-bottom {
  padding-bottom: 80px;
}
.default-padding.bottom-30 {
  padding-top: 80px;
  padding-bottom: 30px;
}
.default-padding.bottom-20 {
  padding-top: 80px;
  padding-bottom: 20px;
}
.padding-xl {
  padding-top: 180px;
  padding-bottom: 180px;
}
.btn {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 25px;
  text-transform: uppercase;
  transition: all 0.35s ease-in-out;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 5px;
  overflow: hidden;
}
.btn-md {
  padding: 10px 40px 10px;
}
.btn-sm {
  padding: 8px 35px;
  font-size: 12px;
}
.btn.btn-sm-pro {
  font-size: 10px;
  font-weight: 600;
  margin-top: 5px;
  padding: 4px 35px;
  display: inline-block;
}
.btn-border-light {
  border: 2px solid #fff;
}
.btn.btn-sm-pro.btn-border-light:hover,
.btn.btn-sm-pro.btn-border-light:focus {
  background-color: #fff;
  color: #232323;
  border: 2px solid #fff;
}
.btn-dark {
  background-color: #232323;
  color: #fff;
  border: 2px solid #232323;
}
.btn-dark.border {
  background-color: transparent;
  color: #232323;
  border: 2px solid #232323;
}
.btn-dark.border:hover {
  background-color: #232323;
  color: #fff !important;
  border: 2px solid #232323;
}
.btn.btn-light {
  background: #fff none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #232323;
}
.btn.btn-light:hover,
.btn.btn-light:focus {
  background: transparent none repeat scroll 0 0;
  border: 2px solid #fff;
  color: #fff;
}
.btn.btn-light.effect:hover,
.btn.btn-light.effect:focus {
  background-color: #3dccc7;
  color: #fff !important;
  border: 2px solid #fff;
}
.btn.btn-light.border {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn.btn-light.border:hover {
  background: #fff none repeat scroll 0 0 !important;
  border: 2px solid #fff !important;
  color: #232323 !important;
}
.btn-dark:hover,
.btn-dark:focus {
  color: #232323 !important;
  background: transparent;
}
.bg-dark {
  background: #1d2024 none repeat scroll 0 0;
}
.btn-theme {
  background-color: #018e8c;
  color: #fff !important;
  border: 2px solid #018e8c;
  position: relative;
}
.btn-theme i {
  display: inline-block;
  opacity: 0;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: 10px;
  transition: all 0.5s ease-in-out;
}
.btn-theme:hover i {
  opacity: 1;
}
.btn-theme.border {
  background-color: transparent;
  color: #018e8c !important;
  border: 2px solid #018e8c;
}
.btn-theme.border:hover {
  background-color: #018e8c;
  color: #fff !important;
  border: 2px solid #018e8c;
}
.btn-theme.effect:hover,
.btn-theme.effect:focus {
  background: #3dccc7 none repeat scroll 0 0;
  border: 2px solid #3dccc7;
  color: #fff;
  padding-right: 50px;
}
.btn.btn-sm-lm {
  font-size: 12px;
  padding: 4px 35px;
}
.btn.border.btn-light.standard {
  padding-left: 20px;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}
.btn.border.btn-light.standard::after {
  background: #fff none repeat scroll 0 0;
  content: "";
  height: 53px;
  position: absolute;
  right: -18px;
  top: -10px;
  transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  width: 50px;
  z-index: -1;
}
.btn.border.btn-light.standard::before {
  color: #018e8c;
  content: "\F061";
  font-family: "Font Awesome 5 Free";
  height: 100%;
  position: absolute;
  right: 0;
  width: 25px;
}
.bg-fixed {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
.bg-cover {
  background-position: center center;
  background-size: cover;
}
.container-full {
  padding: 0 15px;
  width: 100%;
}
.oh {
  overflow: hidden;
}
.less-margin {
  margin: 0;
}
header {
  position: relative;
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a {
  position: relative;
  z-index: 1;
  margin-left: 3px;
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a {
  border: medium none;
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a::after {
  background: #fff none repeat scroll 0 0;
  bottom: -2px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 0;
  transition: all 0.35s ease-in-out;
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background ul li a:hover::after {
  width: 100%;
}
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a.active::after,
header nav.navbar.border.bootsnav.navbar-fixed.no-background .attr-nav ul li a:hover::after {
  width: 0;
}
.attr-nav .social.right li {
  margin-left: 20px;
}
.attr-nav .social li a {
  font-size: 16px;
}
/* Navbar */
nav.bootsnav.navbar-default.info-topbar .navbar-header {
  display: none;
}
nav.bootsnav.navbar-default.info-topbar ul li a {
  margin-right: 30px;
  padding: 35px 0;
}
nav.bootsnav.navbar-default.info-topbar.active-full ul li a {
  margin-right: 0;
  padding: 35px 20px;
}
.attr-nav > a.btn-theme.effect:hover,
.attr-nav > a.btn-theme.effect,
.attr-nav > a.btn-theme.effect:focus {
  background: #018e8c none repeat scroll 0 0;
  border: 2px solid #018e8c;
  color: #fff !important;
}
nav.bootsnav.navbar-default.info-topbar.sticked ul li a {
  margin-right: 30px;
  padding: 35px 0;
}
.attr-nav.social li {
  display: inline-block;
  padding: 25px 0 !important;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}
.attr-nav.social li a {
  border: 1px solid #f4f4f4;
  border-radius: 50%;
  color: #018e8c;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  padding: 0 !important;
  text-align: center;
  width: 40px;
}
nav.navbar.bootsnav.sticked .attr-nav.social li {
  display: inline-block;
  padding: 20px 0 !important;
}
.site-heading h2 {
  display: inline-block;
  font-weight: 700;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}
.site-heading.clean h2 {
  padding-bottom: 0;
}
.site-heading.clean h2 span {
  color: #018e8c;
}
.site-heading h2 span {
  color: #018e8c;
}
.site-heading.barber h2 span {
  color: #bc9355;
}
.site-heading p {
  margin: 0;
}
.site-heading.clean h2::after,
.site-heading.clean h2::before {
  display: none;
}
.site-heading h2::before {
  background: #018e8c none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 50px;
}
.bg-theme .site-heading h2::before,
.bg-theme-hard .site-heading h2::before {
  background: #fff none repeat scroll 0 0;
}
.site-heading h2::after {
  background: #232323 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -40px;
  position: absolute;
  width: 25px;
}
.bg-theme .site-heading h2::after,
.bg-theme-hard .site-heading h2::after {
  background: #fff none repeat scroll 0 0;
}
.site-heading h2 span {
  color: #018e8c;
}
.site-heading {
  padding-bottom: 10px;
  overflow: hidden;
  margin-top: -5px;
}
.site-heading.single {
  margin-bottom: 35px;
}
/* ==============================================================
     # Bradcrumb
=================================================================== */
.breadcrumb-area {
  padding: 100px 0;
}
.breadcrumb-area .breadcrumb {
  background: transparent none repeat scroll 0 0;
  display: inline-block;
  margin: 0;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
}
.breadcrumb-area .breadcrumb::after {
  background: #232323 none repeat scroll 0 0;
  border-radius: 5px;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.breadcrumb-area h1 {
  display: block;
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
}
.breadcrumb > li + li::before {
  color: #fff;
  content: "\F105";
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  padding: 0 5px;
}
.breadcrumb-area .breadcrumb a,
.breadcrumb-area .breadcrumb li {
  font-weight: 600;
  text-transform: uppercase;
}
.breadcrumb-area .breadcrumb li.active {
  color: #018e8c;
}
/* ==============================================================
     # Banner
=================================================================== */
body,
.banner-area,
.banner-area div {
  height: 100%;
}
.banner-area.auto-height,
.banner-area.auto-height div {
  height: auto;
  min-height: 100%;
}
.banner-area .box-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
.banner-area .box-table {
  display: table;
  width: 100%;
}
.banner-area .box-cell,
.banner-area .box-cell div {
  height: auto;
  z-index: 2;
}
.banner-area {
  position: relative;
  overflow: hidden;
}
.banner-area .wavesshape {
  bottom: -2px;
  left: 0;
  position: absolute;
  right: 0;
  top: auto;
  width: 100%;
}
.banner-area .wavesshape.shape {
  bottom: -50px;
}
.banner-area .content {
  overflow: hidden;
  position: relative;
  z-index: 9;
}
.banner-area.wavesshape {
  position: relative;
  z-index: 1;
}
.banner-area.triangle-shadow {
  position: relative;
  z-index: 1;
}
.banner-area.triangle-shadow::before {
  border-bottom: 0 solid transparent;
  border-right: 100vw solid #fff;
  border-top: 80px solid transparent;
  bottom: 0;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 101;
}
.banner-area.shadow-inner .content {
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.banner-area.content-double .double-items {
  align-items: center;
  align-self: center;
  display: flex;
  justify-content: center;
  vertical-align: middle;
}
.banner-area .banner-carousel .owl-item.center img {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.banner-area .banner-carousel .owl-item img {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.banner-area .simple-video {
  position: relative;
}
.banner-area .simple-video .video-play-button {
  bottom: inherit;
  float: left;
  left: 0;
  margin-left: 30px;
  position: relative;
  top: 0;
  -webkit-transform: inherit;
          transform: inherit;
  font-size: 20px;
  padding: 0;
}
.banner-area .simple-video a {
  float: left;
  text-align: center;
}
.banner-area .simple-video .content {
  overflow: inherit;
}
.banner-area .simple-video .video-play-button::after {
  height: 60px;
  width: 60px;
}
.banner-area .simple-video .video-play-button::before {
  height: 60px;
  width: 60px;
}
.banner-area .simple-video .video-play-button i {
  line-height: 40px;
}
.banner-area.shadow-inner .content::after {
  background: #1c1c1c none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.banner-area.inc-dots .carousel-indicators {
  bottom: inherit;
  display: inline-block;
  left: auto;
  margin: -40px 0 0;
  position: absolute;
  right: 20px;
  top: 50%;
  width: auto;
}
.banner-area.inc-dots .carousel-indicators li {
  border: 3px solid #fff;
  display: block;
  height: 20px;
  margin: 10px 0;
  width: 20px;
}
.banner-area.inc-dots .carousel-indicators li.active,
.banner-area.inc-dots .carousel-indicators li:hover {
  background: #018e8c none repeat scroll 0 0;
}
.banner-area.large-font .content h1 {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.banner-area.text-center p {
  padding: 0 10%;
}
.banner-area .content span {
  color: #018e8c;
  font-weight: 700;
}
.banner-area.text-light.shadow.theme-hard .content span {
  color: #232323;
}
.banner-area.banner-top-padding .double-items {
  margin-top: -60px;
}
.banner-area.text-dark .content span {
  color: #fff;
}
.banner-area.large-font h4 {
  line-height: 1.4;
  margin-bottom: 30px;
}
.banner-area.middle-text.heading-uppercase .content h1 {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.banner-area.small-text .content h1 {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 25px;
  text-transform: capitalize;
}
.banner-area.normal-text .content h1 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 25px;
  text-transform: capitalize;
}
.banner-area.normal-text .content a {
  margin-top: 15px;
}
.banner-area .banner-carousel {
  cursor: w-resize;
}
.banner-area .banner-carousel .owl-dots {
  margin-top: 20px !important;
}
.banner-area .banner-carousel .owl-dots .owl-dot span {
  background: #fff none repeat scroll 0 0;
  border: 3px solid #e7e7e7;
  height: 20px;
  width: 20px;
  transition: all 0.35s ease-in-out;
}
.banner-area .banner-carousel .owl-dots .owl-dot.active span,
.banner-area .banner-carousel .owl-dots .owl-dot:hover span {
  border-color: #018e8c;
}
.banner-area.small-text .content p {
  margin-bottom: 30px;
}
.banner-area.middle-text .content h4 {
  line-height: 30px;
}
.banner-area.middle-text .content h2 {
  color: #018e8c;
  font-weight: 500;
  text-transform: capitalize;
}
.banner-area.middle-text .content h1 {
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 25px;
  text-transform: capitalize;
}
.banner-area.middle-text .content a {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 10px;
}
.banner-area .content a {
  margin: 0 3px;
}
.banner-area.version-3 .content h1 {
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.banner-area.version-3 .content h3 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
}
.banner-area .right-info {
  text-align: center;
}
.banner-area.auto-height .double-items {
  overflow: hidden;
  padding-top: 160px;
}
.banner-area.auto-height.sticky-nav .double-items {
  padding-top: 90px;
}
.banner-area.auto-height .double-items .banner-carousel,
.banner-area.auto-height .double-items .banner {
  margin-top: 50px;
}
.banner-area .carousel-control {
  font-size: 40px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  margin-top: -25px;
  background: transparent;
  opacity: 1;
  z-index: 1;
}
.banner-area .carousel-control.shadow {
  background: transparent none repeat scroll 0 0;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  opacity: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 1;
  color: #fff;
  text-shadow: inherit;
}
.banner-area .carousel-control.shadow::after {
  background: #232323 none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.banner-area .carousel-control.left {
  left: -50px;
}
.banner-area:hover .carousel-control.left {
  left: 0;
}
.banner-area.typed-text.small-text .content h2 {
  display: block;
  margin-bottom: 30px;
}
.banner-area:hover .carousel-control.shadow.left {
  left: 20px;
}
.banner-area .carousel-control.right {
  right: -50px;
}
.banner-area:hover .carousel-control.right {
  right: 0;
}
.banner-area:hover .carousel-control.shadow.right {
  right: 20px;
}
/* Animation delays */
.banner-area .item h1:first-child,
.banner-area .item h2:first-child,
.banner-area .item h3:first-child,
.banner-area .item h4:first-child,
.banner-area .item h5:first-child,
.banner-area .item h6:first-child {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.banner-area .item h1:nth-child(2),
.banner-area .item h2:nth-child(2),
.banner-area .item h3:nth-child(2),
.banner-area .item h4:nth-child(2),
.banner-area .item h5:nth-child(2),
.banner-area .item h6:nth-child(2) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.carousel-caption h1:nth-child(3),
.carousel-caption h2:nth-child(3),
.carousel-caption h3:nth-child(3),
.carousel-caption h4:nth-child(3),
.carousel-caption h5:nth-child(3),
.carousel-caption h6:nth-child(3) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.banner-area .item p {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.banner-area .item a,
.banner-area .item button {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
/* Carousel Fade Effect */
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
/* Slider Zoom Effect */
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.2, 1.2);
  }
}
.carousel-inner .item > .slider-thumb {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}
.banner-area .carousel-zoom .slider-thumb {
  height: 100%;
  position: absolute;
  width: 100%;
}
#particles-js,
#ripple {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/* ==============================================================
     # About
=================================================================== */
.about-area .default.info h4 {
  color: #018e8c;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.about-area .default.info h2 {
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 20px;
}
.about-area .bottom-info {
  border-top: 1px solid #e7e7e7;
  margin-top: 35px;
  padding-top: 30px;
}
.about-area .bottom-info span {
  display: table;
  padding-top: 2px;
}
.about-area .default.info h3 {
  font-weight: 600;
  margin-bottom: 20px;
}
.about-area .default.info > a {
  margin-top: 10px;
}
.about-area .bottom-info li {
  color: #666;
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  margin-bottom: 15px;
  text-transform: capitalize;
}
.about-area .bottom-info li i {
  background: #018e8c none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  float: left;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  margin-right: 15px;
  margin-top: 5px;
  position: relative;
  text-align: center;
  width: 20px;
  z-index: 1;
}
.about-area .bottom-info li:last-child {
  margin: 0;
}
.about-area .bottom-info li i::after {
  background: #018e8c none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 28px;
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 28px;
  z-index: -1;
}
.about-area .services-info .item {
  background: #fff none repeat scroll 0 0;
  -o-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
  margin-top: 30px;
  padding: 30px;
}
.about-area .services-info {
  margin-top: -30px;
}
.about-area .services-info .item i {
  color: #018e8c;
  display: inline-block;
  font-size: 60px;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}
.about-area .services-info .item h4 {
  font-weight: 600;
  text-transform: capitalize;
}
.about-area .services-info .item p {
  margin: 0;
}
.about-area .services-info .equal-height:nth-child(1) .item,
.about-area .services-info .equal-height:nth-child(4) .item {
  background: #018e8c none repeat scroll 0 0;
}
.about-area .services-info .equal-height:nth-child(1) .item i,
.about-area .services-info .equal-height:nth-child(4) .item i,
.about-area .services-info .equal-height:nth-child(1) .item h4,
.about-area .services-info .equal-height:nth-child(4) .item h4,
.about-area .services-info .equal-height:nth-child(1) .item p,
.about-area .services-info .equal-height:nth-child(4) .item p {
  color: #fff;
}
/* ==============================================================
     # Features
=================================================================== */
.features-area.bottom-small {
  padding-bottom: 25px;
}
.features-area.default-padding.bottom-none {
  padding-bottom: 30px;
}
.features-area .item .icon {
  display: table-cell;
  vertical-align: top;
}
.features-area .item .info {
  display: table-cell;
  padding-left: 25px;
  vertical-align: top;
}
.features-area .item .icon i {
  background: #018e8c none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-size: 50px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 100px;
}
.features-area .item .info h4 {
  font-weight: 600;
}
.features-area .item .info p {
  margin: 0;
}
.features-area .equal-height {
  padding-bottom: 50px;
}
.features-area.cell-items .features-thumb,
.features-area.cell-items .features-items {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
.features-area.cell-items .features-thumb {
  padding-right: 35px;
}
.features-area.cell-items .features-items .equal-height {
  margin-bottom: 0;
  margin-top: 50px;
}
.features-area.cell-items .features-items .equal-height:first-child,
.features-area.cell-items .features-items .equal-height:nth-child(2) {
  margin-top: 0;
}
.features-area.features-list .features-items h2 {
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 25px;
}
.features-area.features-list .features-items li {
  color: #666;
  display: block;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
.features-area.features-list .features-items li:last-child {
  margin: 0;
}
.features-area.features-list .features-items li i {
  background: #018e8c none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  float: left;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  margin-right: 15px;
  margin-top: 5px;
  position: relative;
  text-align: center;
  width: 30px;
  z-index: 1;
}
.features-area.features-list .features-items li i::after {
  background: #018e8c none repeat scroll 0 0;
  border-radius: 50%;
  content: "";
  height: 40px;
  left: 0;
  margin-left: -5px;
  margin-top: -5px;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 40px;
  z-index: -1;
}
.features-area.features-list .features-thumb {
  padding-right: 35px;
}
.features-area.features-list .features-items li .icon {
  display: table-cell;
  vertical-align: top;
}
.features-area.features-list .features-items li .info {
  display: table-cell;
  padding-left: 5px;
  vertical-align: top;
}
.features-area.features-list .features-items li .info h4 {
  margin-bottom: 10px;
}
.features-area.features-list .features-items ul {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-right: 50px;
}
.features-area.features-list .features-items li .info p {
  color: #666;
  margin: 0;
}
.features-area.features-list .features-item.reverse .features-thumb {
  float: right;
  padding-right: 15px;
}
.features-area.features-list .features-item.reverse .features-items {
  padding-left: 15px;
}
.features-area.features-list .features-item {
  margin-top: 80px;
  overflow: hidden;
}
.features-area.features-list .features-item:first-child {
  margin: 0;
}
/* ==============================================================
     # Overview
=================================================================== */
.overview-area .nav-pills li {
  display: inline-block;
  float: none;
  margin-bottom: 10px;
}
.overview-area .tab-navigation {
  display: block;
  height: auto;
  margin-bottom: 30px;
  min-height: auto;
  overflow: hidden;
}
.overview-area .nav-pills li a {
  background: #edf5ff none repeat scroll 0 0;
  border-radius: 30px;
  color: #232323;
  display: inline-block;
  font-weight: 600;
  padding: 10px 40px;
  text-transform: uppercase;
}
.overview-area .nav-pills li.active a {
  background: #018e8c none repeat scroll 0 0;
  color: #fff;
}
.overview-area .overview-items.vertical .tab-navigation,
.overview-area .overview-items.vertical .tab-content {
  display: table-cell;
  vertical-align: top;
}
.overview-area .overview-items.vertical .tab-navigation {
  background: #edf5ff none repeat scroll 0 0;
  min-width: 200px;
  overflow: inherit;
  padding: 30px 50px;
}
.overview-area .overview-items.vertical .tab-navigation li {
  display: block;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.overview-area .overview-items.vertical .tab-navigation li:last-child {
  margin-bottom: 0;
}
.overview-area .overview-items .item .info h3,
.overview-area .overview-items .item .info h4 {
  font-weight: 600;
  text-transform: capitalize;
}
.overview-area .overview-items .item .info .playstore {
  width: 50px;
  display: block;
  float: left;
}
.overview-area .overview-items .item .info .appstore {
  width: 50px;
  margin-left: 30px;
  display: block;
  float: left;
}
.overview-area .overview-items .item .thumb,
.overview-area .overview-items .item .info {
  display: table-cell;
  float: none;
  vertical-align: middle;
  background-color: #fff;
}
.overview-area .overview-items .item .thumb {
  padding: 0;
}
.overview-area .overview-items .item .info {
  padding: 30px;
  overflow: auto;
  background-color: #ddd;
}
.overview-area .overview-items .item .info a {
  color: #018e8c;
  font-weight: 600;
  text-transform: uppercase;
}
.overview-area .overview-items .owl-dots .owl-dot span {
  background: #e7e7e7 none repeat scroll 0 0;
  border: 4px solid #edf5ff;
  height: 20px;
  transition: all 0.35s ease-in-out;
  width: 20px;
}
.overview-area .overview-items .owl-dots .owl-dot.active span,
.overview-area .overview-items .owl-dots .owl-dot:hover span {
  background: #018e8c none repeat scroll 0 0;
}
.overview-area .overview-carousel .owl-nav {
  margin: 0;
}
.overview-area .overview-carousel .owl-dots {
  margin-bottom: -15px;
  margin-top: 20px;
}
.overview-area .overview-carousel .owl-nav .owl-prev,
.overview-area .overview-carousel .owl-nav .owl-next {
  background: transparent none repeat scroll 0 0;
  color: #018e8c;
  font-size: 30px;
  height: 40px;
  left: 20px;
  line-height: 40px;
  margin-top: -50px;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 40px;
}
.overview-area .overview-carousel .owl-nav .owl-next {
  left: auto;
  right: 20px;
}
.overview-area .overview-carousel .item:hover {
  cursor: crosshair;
}
/* ==============================================================
 # Team
=================================================================== */
#team {
  background-attachment: fixed;
  background-size: cover;
}
.team-area .item .thumb {
  position: relative;
  overflow: hidden;
}
.team-area .item .thumb .social {
  bottom: -100%;
  left: 0;
  padding: 20px;
  position: absolute;
  text-align: center;
  transition: all 0.35s ease-in-out;
  width: 100%;
}
.team-area .item:hover .thumb .social {
  bottom: 30px;
}
.team-area .item .thumb img {
  transition: all 0.35s ease-in-out;
}
.team-area .item:hover .thumb img {
  opacity: 0.6;
}
.team-area .item .thumb .social li {
  display: inline-block;
}
.team-area .item .thumb .social li a {
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0 2px;
  text-align: center;
  width: 40px;
}
.team-area .info {
  background: #fff none repeat scroll 0 0;
  border-radius: 35px;
  border: 3px solid #018e8c;
  left: 5%;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  top: -30px;
  width: 90%;
  z-index: 9;
}
.team-area .info h4 {
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: capitalize;
}
.team-area .info span {
  color: #018e8c;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}
.team-area .social li.twitter a {
  background-color: #00b6f1;
}
.team-area .social li.pinterest a {
  background-color: #bd081c;
}
.team-area .social li.facebook a {
  background-color: #3b5998;
}
.team-area .social li.g-plus a {
  background-color: #df4a32;
}
.team-area .social li.vimeo a {
  background-color: #1ab7ea;
}
.team-area .social li.instagram a {
  background-color: #cd486b;
}
.team-area .social li.linkedin a {
  background-color: #0e76a8;
}
.team-area .team-carousel .owl-dots {
  margin-bottom: 15px;
  margin-top: 0 !important;
}
.team-area .team-carousel .owl-dots .owl-dot span {
  background: #e7e7e7 none repeat scroll 0 0;
  border: 4px solid #edf5ff;
  height: 20px;
  transition: all 0.35s ease-in-out;
  width: 20px;
}
.team-area .team-carousel .owl-dots .owl-dot.active span,
.team-area .team-carousel .owl-dots .owl-dot:hover span {
  background: #018e8c none repeat scroll 0 0;
}
/* ==============================================================
     # Video Button Play
=================================================================== */
.video-play-button {
  border-radius: 50%;
  box-sizing: content-box;
  color: #fff;
  display: block;
  font-size: 40px;
  height: 40px;
  left: 50%;
  line-height: 40px;
  margin-top: 25px;
  padding: 0 0 0 10px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 40px;
  z-index: 10;
}
.text-dark .video-play-button {
  color: #018e8c;
}
.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #018e8c repeat scroll 0 0;
  border-radius: 50%;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}
.text-dark .video-play-button:before {
  background: #fff repeat scroll 0 0;
}
.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #018e8c repeat scroll 0 0;
  border-radius: 50%;
  transition: all 200ms;
  -webkit-transition: all 200ms;
  -moz-transition: all 200ms;
  -ms-transition: all 200ms;
  -o-transition: all 200ms;
}
.text-dark .video-play-button:after {
  background: #fff repeat scroll 0 0;
}
.video-play-button:hover,
.video-play-button:focus {
  color: #fff;
}
.text-dark .video-play-button:hover,
.text-dark .video-play-button:focus {
  color: #018e8c;
  background-color: #fff;
}
.video-play-button:hover:after {
  background-color: #018e8c;
}
.text-dark .video-play-button:hover:after {
  background-color: #fff;
}
@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.video-play-button i {
  display: block;
  position: relative;
  z-index: 3;
}
/* ==============================================================
     # Contact
=================================================================== */
.contact-us-area .address .address-items h4 {
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}
.contact-us-area .address {
  padding-right: 35px;
}
.contact-us-area .address .address-items ul {
  margin-bottom: 40px;
}
.contact-us-area .address .address-items ul.social {
  margin-bottom: 50px;
}
.contact-us-area .google-maps iframe {
  height: 300px;
  margin-bottom: -8px;
  width: 100%;
}
.contact-us-area .address .social li {
  display: inline-block;
}
.contact-us-area .address .social li a {
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0 2px;
  text-align: center;
  width: 40px;
}
.contact-us-area .address .social li.twitter a {
  background-color: #00b6f1;
}
.contact-us-area .address .social li.pinterest a {
  background-color: #bd081c;
}
.contact-us-area .address .social li.facebook a {
  background-color: #3b5998;
}
.contact-us-area .address .social li.g-plus a {
  background-color: #df4a32;
}
.contact-us-area .address .social li.vimeo a {
  background-color: #1ab7ea;
}
.contact-us-area .address .social li.instagram a {
  background-color: #cd486b;
}
.contact-us-area .address .social li.linkedin a {
  background-color: #0e76a8;
}
.contact-us-area .address-items .info li i {
  border-radius: 50%;
  color: #018e8c;
  display: table-cell;
  font-size: 20px;
  text-align: center;
  vertical-align: top;
  width: 30px;
}
.contact-form img {
  margin-left: 10px;
}
.contact-us-area .address-items .info li span {
  display: table-cell;
  padding-left: 10px;
  vertical-align: middle;
}
.contact-us-area .address-items .info li {
  margin-bottom: 15px;
}
.contact-us-area .address-items .info li:last-child {
  margin: 0;
}
.contact-us-area .address-items #map {
  width: 100%;
  height: 375px;
}
.contact-us-area .contact-form h2 {
  font-weight: 600;
  margin-bottom: 0;
}
.contact-us-area .contact-form input {
  border: 1px solid #e7e7e7;
  box-shadow: inherit;
  color: #232323;
}
.contact-us-area .contact-form textarea {
  border: 1px solid #e7e7e7;
  box-shadow: inherit;
  min-height: 200px;
  padding-top: 15px;
  resize: none;
}
.contact-us-area .contact-form button {
  background: #018e8c none repeat scroll 0 0;
  border: medium none;
  box-shadow: inherit;
  color: #fff;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  margin-top: 15px;
  padding: 10px 35px;
  text-transform: uppercase;
  border-radius: 30px;
}
.contact-us-area .contact-form button:hover {
  background: #3dccc7;
}
.contact-us-area .contact-form button i {
  margin-left: 5px;
}
.contact-form-area .alert-notification {
  margin-top: 15px;
  padding: 0;
}
.contact-form-area .alert-notification .alert-error {
  background: #e7e7e7 none repeat scroll 0 0;
  color: #f00;
  margin-top: 0;
  text-align: left;
}
.contact-form-area.bg-fixed .alert-notification .alert-error {
  background: #fff none repeat scroll 0 0;
  color: #f00;
  margin-top: 0;
  text-align: left;
}
.contact-us-area form.contact-form .alert-notification {
  margin-top: 10px;
  padding: 0;
}
.contact-us-area form.contact-form .alert-notification h3 {
  color: #008000;
  margin-bottom: 10px;
}
.contact-us-area form.contact-form .alert-notification .alert-msg .alert-error {
  background: #f4f4f4 none repeat scroll 0 0;
  color: #f00;
  margin-top: 30px;
}
.contact-us-area form.contact-form .alert-notification .alert-msg .alert-error ul {
  list-style-type: disc;
  margin-left: 20px;
}
/* ==============================================================
     # Companies Area
=================================================================== */
.companies-area .row {
  align-items: center;
  align-self: center;
  display: flex;
  justify-content: center;
  vertical-align: middle;
}
.companies-area .clients-items img {
  width: auto;
  margin: auto;
  padding: 5px;
}
.companies-area .clients-items .owl-nav {
  margin: 0;
}
.companies-area .clients-items .owl-nav .owl-prev,
.companies-area .clients-items .owl-nav .owl-next {
  background: transparent none repeat scroll 0 0;
  color: #018e8c;
  font-size: 30px;
  height: 35px;
  left: 0;
  line-height: 35px;
  margin-top: -18px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 35px;
}
.companies-area .clients-items .owl-nav .owl-next {
  left: auto;
  right: 0;
}
.companies-area .info h4 {
  font-weight: 600;
  text-transform: capitalize;
}
.companies-area .info p {
  margin: 0;
}
/* ==============================================================
 # Pricing Table
=================================================================== */
.pricing-item {
  background: #fff none repeat scroll 0 0;
  -o-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
  margin-bottom: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}
.pricing-header h4 {
  font-weight: 600;
  text-transform: uppercase;
  color: #232323;
}
.pricing-header h2 {
  color: #232323;
  font-size: 50px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 0;
}
.color-yellow .pricing-header h2 {
  color: #ff9800;
}
.pricing-header h2 sup {
  font-size: 24px;
  font-weight: 600;
  margin-right: 5px;
}
.pricing-header h2 sub {
  font-size: 18px;
  font-weight: 400;
  margin-left: -5px;
}
.pricing-item .pricing-header span {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}
.pricing-header {
  background: rgba(1,142,140,0.5) none repeat scroll 0 0;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 35px;
  padding: 30px !important;
}
.pricing-item .footer {
  padding: 30px;
}
.pricing-item li {
  font-family: 'Open Sans', sans-serif;
  line-height: 30px;
  padding: 0 30px;
}
.pricing-area .pricing-item.active .pricing-header {
  background: #018e8c none repeat scroll 0 0;
}
.pricing-area.color-yellow .pricing-item.active .pricing-header {
  background: #ff9800 none repeat scroll 0 0;
}
.pricing-area .pricing-item.active .pricing-header h2,
.pricing-area .pricing-item.active .pricing-header h4,
.pricing-area .pricing-item.active .pricing-header span {
  color: #fff;
}
.pricing-area .pricing-item.active .pricing-header span.badge {
  background: #fff none repeat scroll 0 0;
  color: #232323;
}
.pricing-item li i {
  color: #018e8c;
  margin-right: 5px;
}
.pricing-item li i.fa-times {
  color: #e22626;
}
/* ==============================================================
 # Portfolio
=================================================================== */
#portfolio {
  background-image: url("/img/piedras.jpg");
  background-attachment: fixed;
  background-size: cover;
}
/* ==============================================================
# Footer
=================================================================== */
footer {
  background-color: #018e8c;
  background: #018e8c;
  background: linear-gradient(90deg, #018e8c 0%, #68d8d6 70%);
  color: #fff;
  margin-top: 20px;
}
footer .footer-bottom {
  padding: 10px 0;
}
footer .footer-bottom p {
  color: #fff;
  margin: 0;
  text-transform: capitalize;
  line-height: 40px;
}
footer .footer-bottom p a {
  color: #232323;
  text-transform: capitalize;
}
/* ==============================================================
     # 404
=================================================================== */
.error-page-area h1 {
  font-size: 150px;
  font-weight: 900;
  line-height: 120px;
  margin-bottom: 30px;
}
.error-page-area h2 {
  font-weight: 600;
  text-transform: uppercase;
}
.error-page-area a {
  margin-top: 15px;
}
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
}
@keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
}
@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
@keyframes pulse-border {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}