@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");

h1,
h2:not(.contact-details),
h3,
h4,
h5 {
  font-family: "Alfa Slab One", serif !important;
  font-weight: normal !important;
  letter-spacing: 0.75px !important;
}

h1 {
  letter-spacing: 1px !important;
  text-transform: uppercase;
}

.detailedlist-img img {
  margin-bottom: 0 !important;
  padding: 3px;
  border-radius: 10px;
}

.detailedlist-img {
  margin-bottom: 1rem;
  background: var(--color-theme-secondary);
  background: -moz-linear-gradient(
    -45deg,
    rgba(250, 175, 36, 1) 0%,
    rgba(250, 175, 36, 1) 50%,
    rgba(250, 175, 36, 1) 50%,
    rgba(122, 19, 26, 1) 50%,
    rgba(122, 19, 26, 1) 100%
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(250, 175, 36, 1) 0%,
    rgba(250, 175, 36, 1) 50%,
    rgba(250, 175, 36, 1) 50%,
    rgba(122, 19, 26, 1) 50%,
    rgba(122, 19, 26, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(250, 175, 36, 1) 0%,
    rgba(250, 175, 36, 1) 50%,
    rgba(250, 175, 36, 1) 50%,
    rgba(122, 19, 26, 1) 50%,
    rgba(122, 19, 26, 1) 100%
  );
  border-radius: 10px;
}

/*-- Header --*/

.cw-header-info {
  background: linear-gradient(
      45deg,
      rgba(122, 19, 26, 0.7),
      rgba(176, 63, 40, 0.7),
      rgba(122, 19, 26, 1)
    ),
    url(https://apihoard.webit.com/api/v1/Image/E1BB260FF8AC9E4A1E8DD2F323FB9D88/E1BB260FF8AC9E4A1E8DD2F323FB9D88.jpg?size=Original);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.cw-header-info {
  text-shadow: 2px 2px 2px #00000099;
}

.header .navbar-dark .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: 0.825rem;
}

.header .navbar .active > .nav-link {
  color: var(--color-theme-primary);
}

.cw-phone:before {
  font-family: FontAwesome;
  content: "\f095" !important;
  margin-right: 0.5em;
  color: var(--color-theme-secondary) !important;
}

.cw-location:before {
  font-family: FontAwesome;
  content: "\f041" !important;
  margin-right: 0.5em;
  color: var(--color-theme-secondary) !important;
}

@media (min-width: 992px) {
  .cw-header-info h5 {
    font-size: 1.5rem;
  }

  .cw-header-info {
    font-size: 1.1rem;
    padding-bottom: 4rem !important;
  }
}

/*---- Hero ----*/

.cw-heroslider {
  position: relative;
  background: var(--color-theme-primary);
  margin-bottom: 1em;
}

.cw-heroslider .cw-carousel {
  position: relative;
}

/* Slideshow fade animation  */
.cw-slideshow-fade .carousel-inner .carousel-item {
  opacity: 0;
  transition-property: opacity;
}

.cw-slideshow-fade .carousel-inner .active {
  opacity: 1;
}

.cw-slideshow-fade .carousel-inner .active.left,
.cw-slideshow-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.cw-slideshow-fade .carousel-inner .next.left,
.cw-slideshow-fade .carousel-inner .prev.right {
  opacity: 1;
}

.cw-slideshow-fade .carousel-control {
  z-index: 2;
}

.cw-hero {
  position: relative;
  padding: 8rem 0;
}

.cw-heroText {
  z-index: 2;
  padding-bottom: 2rem;
}

.cw-hero:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.45);
}

.cw-heroText h1 {
  font-size: 2rem;
}

.cw-heroText .cw-checklist li {
  font-family: "Alfa Slab One", serif !important;
  font-weight: normal !important;
  letter-spacing: 1px;
  font-size: 1.5em;
}

.cw-heroText p {
  text-shadow: 0 0 5px black;
}

@media all and (transform-3d), (-webkit-transform-3d) {
  .cw-slideshow-fade .carousel-inner > .carousel-item.next,
  .cw-slideshow-fade .carousel-inner > .carousel-item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .cw-slideshow-fade .carousel-inner > .carousel-item.prev,
  .cw-slideshow-fade .carousel-inner > .carousel-item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .cw-slideshow-fade .carousel-inner > .carousel-item.next.left,
  .cw-slideshow-fade .carousel-inner > .carousel-item.prev.right,
  .cw-slideshow-fade .carousel-inner > .carousel-item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 440px) {
  .cw-heroslider {
    margin-bottom: 2em;
  }
}

@media (min-width: 768px) {
  .cw-hero {
    padding: 12rem 0;
  }
}

@media (min-width: 992px) {
  .cw-heroslider {
    margin-top: -66px;
  }

  .cw-hero {
    padding: 16rem 0;
  }

  .cw-heroText .cw-checklist li {
    font-size: 3rem;
  }
}

/*-- Home --*/

.page-home .list {
  padding: 0 0 0.75rem;
}

.page-home .list .list-img-photo {
  margin: 3px;
  border-radius: 10px;
}

.page-home .list .list-text-title {
  color: var(--color-theme-primary);
  font-size: 1.25rem;
}

.page-home .list-img-wrap {
  padding: 30% 0;
  background: var(--color-theme-secondary);
  background: -moz-linear-gradient(
    -45deg,
    rgba(250, 175, 36, 1) 0%,
    rgba(250, 175, 36, 1) 50%,
    rgba(250, 175, 36, 1) 50%,
    rgba(122, 19, 26, 1) 50%,
    rgba(122, 19, 26, 1) 100%
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(250, 175, 36, 1) 0%,
    rgba(250, 175, 36, 1) 50%,
    rgba(250, 175, 36, 1) 50%,
    rgba(122, 19, 26, 1) 50%,
    rgba(122, 19, 26, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(250, 175, 36, 1) 0%,
    rgba(250, 175, 36, 1) 50%,
    rgba(250, 175, 36, 1) 50%,
    rgba(122, 19, 26, 1) 50%,
    rgba(122, 19, 26, 1) 100%
  );
  border-radius: 10px;
}

.page-home .list .list-wrap {
  margin-bottom: 2.5rem;
}

@media (min-width: 992px) {
  .page-home .text h4 {
    font-size: 2.25rem;
  }

  .page-home .textwithimage h3 {
    font-size: 2.25rem;
  }

  .page-home .list .list-text-title {
    font-size: 1.4rem;
  }
}

/* --Youtube Video-- */

.cw-video iframe {
  height: 250px;
}

@media (min-width: 576px) {
  .cw-video iframe {
    height: 250px;
  }
}

@media (min-width: 768px) {
  .cw-video iframe {
    height: 360px;
  }
}

@media (min-width: 1400px) {
  .cw-video iframe {
    height: 540px;
  }
}

/*-- Pricing --*/

.page-pricing .list {
  padding: 0 0 2rem;
}

.page-pricing .list .list-wrap {
  background: linear-gradient(45deg, #b03f28, #7a131a, #7a131a, #b03f28);
  height: 100%;
  padding: 0.5em 1rem;
  margin-bottom: 0;
  border-bottom: 20px solid white;
  border-radius: 5px;
  color: #fff;
}

.page-pricing .list .list-img-wrap {
  padding: 70px 0;
}

.page-pricing .list .list-img-photo {
  background-size: 180px;
}

.page-pricing .list .list-text-btn {
  margin-bottom: 1rem;
}

.page-services .cw-checklist li {
  padding-top: 0.25rem;
}

/*-- Lists --*/

.cw-checklist {
  padding-left: 0;
}

.cw-checklist li {
  display: inline-block;
  padding: 0 0.25rem;
}

.cw-checklist li:before {
  margin-right: 0.35rem;
  color: #b03f28;
  font-family: FontAwesome;
  font-weight: normal;
  content: "\f00c";
  text-shadow: 0 0 2px black;
}

/*-- Footer --*/

footer.footer {
  background: linear-gradient(
      45deg,
      rgba(176, 63, 40, 0.8),
      rgba(122, 19, 26, 0.8),
      rgba(176, 63, 40, 0.8)
    ),
    url(https://apihoard.webit.com/api/v1/Image/E1BB260FF8AC9E4A1E8DD2F323FB9D88/E1BB260FF8AC9E4A1E8DD2F323FB9D88.jpg?size=Original);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Simple SVG Christmas Lights Animation */

/* html {
	height: 100%;
} */
body {
  background: rgb(255, 255, 255);
  /*background-image: linear-gradient(to bottom, #bc987e, #000);*/
}

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}

.lightrope li {
  position: relative;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: #03256c;
  box-shadow: 0px 4.6666666667px 24px 3px #03256c;
  animation-name: flash-1;
  animation-duration: 2s;
}

.lightrope li:nth-child(2n + 1) {
  background: #1ac72f;
  box-shadow: 0px 4.6666666667px 24px 3px #1ac72e7c;
  animation-name: flash-2;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n + 2) {
  background: #00a7e1;
  box-shadow: 0px 4.6666666667px 24px 3px #00a7e1;
  animation-name: flash-3;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n + 1) {
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  content: none;
}

.lightrope li:first-child {
  margin-left: -40px;
}

@keyframes flash-1 {
  0%,
  100% {
    background: #03256c;
    box-shadow: 0px 4.6666666667px 24px 3px #03256c;
  }

  50% {
    background: #03246c6b;
    box-shadow: 0px 4.6666666667px 24px 3px #03246c38;
  }
}

@keyframes flash-2 {
  0%,
  100% {
    background: #1ac72f;
    box-shadow: 0px 4.6666666667px 24px 3px #1ac72f;
  }

  50% {
    background: #1ac72e69;
    box-shadow: 0px 4.6666666667px 24px 3px #1ac72e31;
  }
}

@keyframes flash-3 {
  0%,
  100% {
    background: #00a7e1;
    box-shadow: 0px 4.6666666667px 24px 3px #00a7e1;
  }

  50% {
    background: #00a9e162;
    box-shadow: 0px 4.6666666667px 24px 3px #00a9e13a;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  color: #000;
  margin: 17% auto;
  width: 80%;
  padding: 10px 30px 30px 30px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: 1s;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.75)
    ),
    url(https://apihoard.webit.com/api/v1/Image/4D9BA1E4960F8FB300CD812186EF6C69/4D9BA1E4960F8FB300CD812186EF6C69.jpg?size=1920x1440);
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
}

@media (min-width: 991px) {
  .modal-content {
    margin: 10% auto;
    width: 40%;
    padding: 10px 30px 30px 30px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-duration: 1s;
    border: 4px solid #D7922F!important;
  }
}
.modal-header .close {
    color: #333;
   
}
.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 !important;
  border-bottom: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.modal-body {
  padding: 10px 20px;
  background: #fff;
}

.close {
  font-size: 30px;
}

.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal p a {
  color: #fff;
}

.modal p a:hover {
  color: var(--color-theme-secondary);
}


#webit__modal .modal-content p span {
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color-theme-primary);
  text-shadow: 1px 1px 1px var(--color-theme-secondary), 2px 2px 1px var(--color-theme-highlight);
}