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

Author: Will Pfeil »—> PfeilDesign
Website: https://pfeil.design

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

/*    Brand    */
:root {
    --primary: #00bcd4;
    --secondary: #9c27b0;
}

.text-balance {
    text-wrap: balance;
}

.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu a:active {
    box-shadow: 0 4px 20px 0 rgb(76 175 80 / 14%), 0 7px 10px -5px rgb(76 175 80 / 40%);
    background-color: #4caf50;
    color: #ffffff;
}
.nav-pills .nav-item .nav-link.active {
    box-shadow: 0 4px 20px 0 rgb(0 188 212 / 20%), 0 7px 10px -5px rgb(0 188 212 / 60%);
    background-color: #00bcd4;
    color: #ffffff;
}

.navbar.navbar-transparent .logo-rev,
.navbar:not(.navbar-transparent) .logo {
    width: 150px;
    height: 50px;
    overflow: hidden;
    margin-top: -10px;
    display: block;
}

.navbar.navbar-transparent .logo-rev img,
.navbar:not(.navbar-transparent) .logo img {
    height: 100%;
}

.navbar.navbar-transparent .logo,.navbar:not(.navbar-transparent) .logo-rev {
    display: none;
}

html * { -webkit-font-smoothing: subpixel-antialiased; }

p { font-size: 16px; }

p a { text-decoration: underline; }

.section-products .section-title {margin-top: 28px;}

.description, .card-description, .info p , .footer-big p {
    color: #585858;
}

.card-header-image .carousel-shadow {
    box-shadow: 0 5px 15px -8px rgb(0 0 0 / 24%), 0 8px 10px -5px rgb(0 0 0 / 20%);
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: 1.25s;
    transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
    opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

.card { font-size: 1rem; }
.card-pricing { text-align: center; display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin: 0; }
.card-pricing h1 small { font-size: 18px; display: inline-flex; height: 0; }
.card-pricing h1 small:first-child { position: relative; top: -17px; font-size: 26px; }
.card-pricing ul { list-style: none; padding: 0; max-width: 240px; margin: 10px auto; }
.card-pricing ul li { color:#000; text-align:center; padding:12px 0; border-bottom:1px solid rgba(153,153,153,.3); }
.card-pricing ul li:last-child { border:0; }
.card-pricing[class*=bg-] ul li { color:#fff; border-color:rgba(255,255,255,.3); }
.card-pricing ul li .material-icons { top:6px; position:relative; }
.features .card-pricing .card-checklist li { text-align:left; text-indent:-14px; margin-left: 2em; }

.embed-responsive.embed-responsive-3by2::before { padding-top:67%;}
.multicol-stretch-card-image > [class^="col-"] { margin-top:30px; }
.multicol-stretch-card-image .card { margin-top:0; }

.tab-pane li { margin-bottom: .75em; }

.spanner{
  position:fixed;
  top: 50%;
  left: 0;
  background: #00bcd4dc;
  width: 100%;
  display:flex;
  text-align:center;
  height: 100%;
  color: #fff;
  transform: translateY(-50%);
  z-index: 1200;
  visibility: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: var(--primary);
  font-size: 10px;
  margin: 40px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.show {
  visibility: visible;
}

.event-completed {
    display: none;
}

.spanner, .overlay {
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.spanner.show, .overlay.show {
	opacity: 1
}

.card.appear {
    scale: .65;
    opacity: 0;
    visibility: hidden;
}

.show .card.appear {
    scale: 1;
    opacity: 1;
    visibility: visible;
    transition: all 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 400ms;
}

.spanner .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Button Circular Progress Indicator */
.button { position:relative; }
.button__text {
    transition: all 0.2s;
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0;
}

.button--loading.disabled { cursor: default; }

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

@media (min-width: 768px) {
    .col-md-6 .card.card-product { margin-bottom:0; height:100%; }
    .features .col-md-8 .card-pricing .card-checklist { max-width:340px; }
}

@media (max-width: 991px) {
    .navbar .dropdown.show .dropdown-menu, .navbar .dropdown .dropdown-menu {
        height:auto;
        max-height:300px;
    }
}

@media (max-height: 700px) {
    .page-header .title {
        font-size:2.5rem;
    }
    .page-header .title ~ h2:not(.h4) {  
        font-size: 1.75rem;
        line-height: 1.4;
    }
}