/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box;  }
:root{
   --bright-blue:#01ACE4;
   --royal-blue:#2842D6;
}


body {
   font-family: Arial, sans-serif; background:#f8f9fa; }
a { text-decoration:none; color:inherit;        }
.bordertest1 {    border:3px solid red;}
.bordertest2 {    border:3px solid green;}
.bordertest3 {    border:3px solid blue;}
.bordertest4 {    border:3px solid yellow;}
.centerit { text-align:center; }
.ulit { border-bottom:1px solid black; }
.italit { font-style: italic;}
.boldit { font-weight:bold; }
section {
   position:relative;       }
.wave-divider {
  width: 100%; line-height:0; background:#f8f9fa; /* Prevents extra space below the SVG */ /* to set opposite color other than white do background:<color> */}
.wave-dividers svg {
  display:block; width:100%; height:auto;  }
.wave-divider2 {
   width:100%; line-height:0; background-color:#f8f9fa; background-image: url("https://www.transparenttextures.com/patterns/brick-wall-dark.png"); margin-top:-1rem; }

/********************************************/
/* HEADER AND NAVIGATION
/**************************************/

/* Wrapper for logo + bars */
.header-wrapper {
   display:flex; background-color:#ffffff; background-image: url(img/groovepaper.png); padding:.4rem 1.5rem .4rem .5rem; box-shadow: 0px 5px 10px 0px #aaa; border-bottom:1px solid black;}
.logo {
   display:flex; align-items:center; justify-content:center; padding:0 15px;    }
.logo img {
   height:100px; /* covers both bars */ object-fit:contain;     }
.right-section {
   flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;  }
.top-bar {
   width:100%; display:flex; justify-content:flex-end; align-items:center; padding:0; font-size:16px; flex:1;   }
.top-buttons {
   display:flex; gap:2rem;   }
.top-buttons a {
   padding: .5rem 1rem; border-radius:8px; font-size:15px; font-weight:bold; border:1px solid var(--royal-blue); transition: 0.3s;   }
.phone-btn {
   background: #fff; color: var(--royal-blue);   }
.phone-btn:hover {
   background:var(--bright-blue); color:white;   }
.estimate-btn {
   background:var(--royal-blue); color: #fff;   }
.estimate-btn:hover {
   background:var(--bright-blue);    }

/* Navbar */
nav {
   display:flex; justify-content:center; align-items:flex-end; padding:0; position:relative; flex:1; }
.nav-links {
   display:flex; justify-content:center; gap:1.3rem; }
.nav-links a {
   color:black; font-size:1rem; font-weight:bold; transition: 0.3s;  }
.nav-links a:hover {
   color:var(--bright-blue);   }

/* Mobile controls (hamburger only) */
.menu-toggle {
   display:none; font-size:50px; cursor:pointer;  }

/* Side menu (mobile) */
.side-menu {
   position:fixed; top:0; right:-280px; width:280px; height:100%; background:#fff; box-shadow:-2px 0 6px rgba(0,0,0,0.15); transition: right 0.3s ease;
padding: 20px; display:flex; flex-direction:column; gap:15px; z-index:999;    }
.side-menu.active {
   right: 0;    }
.close-btn {
   font-size:24px; margin-left:auto; cursor:pointer; margin-bottom:10px;    }
.side-logo {
   text-align:center;  margin-bottom: 20px;       }
.side-logo img {
   max-width:100%; height:auto;   }
.side-buttons {
   display:flex; flex-direction:column; gap:10px; margin-bottom:20px;    }
.side-buttons a {
   text-align:center; padding: 10px; border-radius: 4px; font-size: 16px; font-weight: bold; border: 1px solid #01ACE4;   }
.side-buttons .phone-btn {
   background: #fff; color: #01ACE4;    }
.side-buttons .estimate-btn {
   background: #01ACE4; color: #fff;  }
.side-menu a {
   font-size:16px; color:#333; border-bottom:1px solid #eee; padding-bottom:8px;   }

/* Responsive */
@media (max-width: 768px) {
   nav {
      align-items:center; height:100%; padding:0 2rem 0 0; }
   .nav-links {
      display: none;       }
   .top-bar {
      display: none; /* Hide top bar on mobile */        }
   .menu-toggle {
      display: block;      }
   .logo img {
      width:90%;    }

}

.nav-link {
  font-weight: normal;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--royal-blue);
  padding: 10px 0px;
  margin: 0px 10px;
  display: inline-block;
  position: relative;
  opacity: 0.75;
}

.nav-link:hover {
  opacity: 1; }

.nav-link::before {
  transition: 300ms;
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--bright-blue);
}

.nav-link-ltr::before {
  width: 0%;
  bottom: 10px;
}

.nav-link-ltr:hover::before {
  width: 100%;
}

.nav-link-fade-up::before {
  width: 100%;
  bottom: 5px;
  opacity: 0;
}

.nav-link-fade-up:hover::before {
  bottom: 10px;
  opacity: 1;
}

.nav-link-grow-up::before {
  height: 0%;
  width: 100%;
  bottom: 0px;
}

.nav-link-grow-up:hover::before {
  height: 2px;
}

.nav-link-fade-up::before {
  width: 100%;
  bottom: 5px;
  opacity: 0;
}

.nav-link-fade-up:hover::before {
  bottom: 10px;
  opacity: 1;
}

/****************************************************/
/* VIDEO HERO SECTION
/***************************************************/
.outter.hero-video {
  width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;  }
.hero-video .video-container {
  height:550px; width:100%; position:relative; overflow:hidden;  }
.hero-video video {
  -o-object-fit:cover; object-fit:cover; position:absolute; height:550px; width:100%; top:0; left:0;  }
.hero-video img {
  -o-object-fit:cover; object-fit:cover; position:absolute; height:550px; width:100%; top:0; left:0; }
.hero-video .video-container:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.hero-video h1 {
  margin: 0 0 1rem; padding: 0; line-height: 1; color: white; }
.hero-video h2 {
  margin: 0 0 1rem; padding: 0; line-height: 1; color:#EEEEEE; }

.hero-video .desc {
  color: white;
  font-weight: 400;
  font-size: 18px;
}
.hero-video .callout {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
  width: 70%;
  margin: auto;
}

.hero-video .button {
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 0px;
  margin-top: 20px;
  background-color: var(--royal-blue);
  padding: 15px 30px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.hero-video .button:hover {
  cursor: pointer; background-color: var(--bright-blue);  }

@media (max-width: 767px) {
  .hero-video .button {
    padding: 10px 20px; }
  .hero-video h1 {
    font-size: 32px;   }
  .hero-video video {
    height: 325px;    }
  .hero-video img {
    height: 325px;   }
  .hero-video .video-container {
    height: 325px;   }
  .outter.hero-video {
    height: 325px;    }
  .hero-video .callout {
    width: 90%;
  }

}

@media (min-width: 768px) {
  .hero-video h1 {
    font-size: 52px;   }
}
/***************************************************/
/* ABOUT
/**************************************************/
.about-container {
   display:flex; flex-wrap:wrap; justify-content:center; padding:1rem; gap:2rem; max-width:1600px;  }
.about {
   padding:4rem 0; background:#f8f9fa; }
.about-content {
   display: grid; grid-template-columns: 1fr 1fr; gap:4rem; align-items:center; }
.about-text h2 {
   font-size:2.5rem; color:#1e3c72; margin-bottom:1.5rem; }
.about-text p {
   font-size:1.1rem; margin-bottom:1.5rem; color:#555;  }
.about-image {
   text-align: center; }
.about-placeholder {
   background: linear-gradient(135deg, #1e3c72, #1e3c72); border-radius:15px; padding:1rem; color:white; font-size:1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.about-placeholder img {
   max-width:100%; border-radius:15px; }

/* Responsive Design */
@media (max-width: 768px) {
   .about-content {
      grid-template-columns:1fr; gap:2rem;    }
   .about-text h2 {
      text-align:center;    }

}

/***************************************************/
/* SERVICES
/**************************************************/
.services {
   padding: 6rem 1rem; background:#1e3c72; margin-top:-1rem;     }
.services h2 {
   text-align: center; font-size:2.5rem; color:#DEDEDE; margin-bottom:3rem;       }
.services h3 {
   margin-bottom:1.5rem;       }
.services-grid {
   display: grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:2rem;    }
.service-card {
   background:white; border-radius:15px; padding:2rem; box-shadow:0 5px 20px rgba(0,0,0,0.1); transition:transform 0.3s ease; text-align:center;        }
.service-card:hover {
   transform: translateY(-5px);       }
.service-icon {
   background: linear-gradient(45deg, #01B7F4, #01ACE4);
   color: white;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   font-size: 2rem;
}

/* Responsive Design */


@media (max-width: 480px) {
   .services-grid {
      grid-template-columns: 1fr;
   }
}


/***************************************************/
/* BEFORE AFTER PHOTOS
/**************************************************/
.gallery {
   padding:4rem 1rem; background-color: #f8f9fa; background-image: url("https://www.transparenttextures.com/patterns/brick-wall-dark.png");   }
.gallery h2 {
  text-align: center; font-size:2.5rem; color:#1e3c72; margin-bottom:2rem;  }
.gallery p {
  font-size:1.1rem; color:black; }
.bfcontainer {
   padding:2rem 0; display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; max-width:1600px;   }
.bfgallery {
   padding:2rem 0; display:flex; flex-direction:column; align-items:center; }
.bfcard {
   display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:.5rem; background:black; height:100%; width:450px; min-width:450px; padding:.5rem; border-radius:8px; }
.before, .after {
   width:100%; height:100%; display:flex; flex-direction:column; background:white;  }
.bftitle {
   text-align:center; color:red; font-weight:bolder; padding:.5rem 0; }
.img-container {
   width:100%; height:300px;  }
.img-container img, .img-container img {
   width:100%; height:300px; object-fit: cover;  }
.bfgallery .button {
  text-transform:uppercase; background-color:transparent; border-radius:0px; background-color:var(--royal-blue); padding:15px 30px; border-radius:8px;
  color:#fff; text-decoration:none; font-weight:bold; }
.bfgallery .button:hover {
  cursor: pointer; background-color: var(--bright-blue);  }
@media (max-width: 767px) {
  .bfgallery .button {  padding: 10px 20px;  }
}
@media (max-width: 480px) {
  .bfcard { flex-wrap:wrap; min-width:200px; width:100%; }
}

/***************************************************/
/* TESTIMONIALS
/**************************************************/
.testimonials {
   padding:6rem 1rem; background:#EEEEEE; margin-top:-1rem; }
.tests-intro {
   display:flex; flex-direction:column; justify-content:center; color:#555555 ;align-items:center; padding:0 2rem 3rem; }
.tests-intro h2 {
   font-size:2.5rem; color:#333333; margin-bottom:1.5rem; }
.tests-intro p {
   font-size:1.1rem; }
.wrapper-tests {
   max-width:1100px; padding:20px 10px; margin:0 60px 35px; overflow:hidden; }
.wrapper-tests .card-tests {
   background:#fff; display:flex; height:auto; flex-direction:column; border-radius:20px; box-shadow:0 10px 10px rgba(0, 0, 0, 0.05); transition:transform 0.3s ease;}
.wrapper-tests .card-tests:hover {
   transform: translateY(-10px); }
.testimonial-rating {
   color: #ffd700; font-size: 1.2rem; margin-bottom: 1rem; }
.card-tests .card-tests-image {
   position: relative;  }
.card-tests .card-tests-image img {
   width:33%; max-width:100px; padding:10px; border-radius:22px; object-fit:contain; aspect-ratio:16 / 9; }
.card-tests .card-tests-image .card-tests-tag {
   position:absolute; top:25px; left:25px; font-size:0.75rem; color:#2842D6; padding:5px 15px; border-radius:30px; font-weight:600; letter-spacing:0.5px;
   text-transform: uppercase; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.card-tests .card-tests-content {
   flex: 1; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; padding:10px 25px 25px; }
.card-tests .card-tests-content .card-tests-title {
   color:#111111; font-size:1.25rem; font-weight:700; line-height:1.3; margin-bottom:15px; }
.card-tests .card-tests-content .card-tests-text {
   color:#747474; font-size:0.95rem; line-height:1.6; margin-bottom:20px; text-align:center; }
.card-tests .card-tests-footer {
   display:flex; margin-top:auto; align-items:center; padding-top:15px; justify-content:space-between; border-top: 1px solid rgba(0, 0, 0, 0.08);  }
.card-tests .card-tests-footer .card-tests-profile {
   display:flex; align-items:center; }
.card-tests .card-tests-profile .card-tests-profile-info {
   display:flex; flex-direction:column;  }
.card-tests .card-tests-profile .card-tests-profile-name {
   font-size:0.875rem; font-weight:600; color:#202020;  }
.card-tests .card-tests-profile .card-tests-profile-role {
   font-size: 0.8rem; color: #7A7A7A; }
.card-tests .card-tests-profile img {
   width:35px; height:35px; margin-right:10px; object-fit:cover; border-radius:50%; border:2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.card-tests .card-tests-button {
   color:#fff; padding:10px 20px; border-radius:30px; font-size:0.81rem; font-weight:600; text-decoration:none; transition:all 0.3s ease;
   background: linear-gradient(135deg, #2842D6 0%, #01ACE4 100%); box-shadow:0 4px 10px rgba(40, 66, 214, .3); }
.card-tests .card-tests-button:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 15px rgba(40, 66, 214, .3);
}
.wrapper-tests .swiper-pagination-bullet {
   height: 15px;
   width: 15px;
   opacity: 1;
   overflow: hidden;
   position: relative;
   background: #01ACE4;
}
.wrapper-tests .swiper-pagination-bullet-active {
   background: #01ACE4;
}
/* Auto-play loading indicator */
.wrapper-tests .swiper-pagination-bullet-active::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: #2842D6;
   transform-origin: left center;
   transform: scaleX(0);
   animation: autoplay-loading 5s linear forwards;
}
.container-tests:hover .wrapper-tests .swiper-pagination-bullet-active::before {
   animation-play-state: paused;
}
@keyframes autoplay-loading {
   0% {
      transform: scaleX(0);
   }
   100% {
      transform: scaleX(1);
   }
}
.wrapper-tests :where(.swiper-button-prev, .swiper-button-next) {
   color: #2842D6;
   margin-top: -35px;
   transition: all 0.3s ease;
}
.wrapper-tests :where(.swiper-button-prev, .swiper-button-next):hover {
   color: black;
}
/* Responsive media query code for small screens */
@media (max-width: 768px) {
   .wrapper-tests {
      margin: 0 10px 25px;     }
   .wrapper-tests :where(.swiper-button-prev, .swiper-button-next) {
      display: none;     }
   .tests-intro h2, .tests-intro p {
      text-align:center;    }

}
/****************************************************/
/* CONTACT FORM
/***************************************************/
.contact {
    padding:6rem 1rem; background: url(img/shutterstock-siding1.jpg) no-repeat center; background-size: cover;   }
.contact h2 {
    text-align:center; font-size:2.5rem; color:#1e3c72; margin-bottom:2rem;       }
.contact-form {
    max-width:600px; margin:0 auto; background:white; padding:3rem; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1);        }
.form-group {
    margin-bottom: 1.5rem;       }
.form-group label {
    display:block; margin-bottom:0.5rem; font-weight:bold; color:#1e3c72;     }
.form-group input,
.form-group textarea,
.form-group select {
    width:100%; padding:12px; border:2px solid #e0e0e0; border-radius:8px; font-size:1rem; transition:border-color 0.3s ease; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline:none; border-color:#01ACE4; }
.form-group textarea {
    height:120px; resize:vertical; }
.sendmsg {
   width:100%; padding:.5rem 0 1rem; color:red; text-align:center;  }
.poohbear-field {
    display: none; /* A simple method that works for many bots */
    visibility:hidden; height:0; width:0; position:absolute; left:-9999px; }
.contact button {
  text-transform:uppercase; background-color:transparent; border-radius:0px; background-color:var(--royal-blue); padding:15px 30px; border-radius:8px;
  color:#fff; text-decoration:none; font-weight:bold; }
.contact button:hover {
  cursor: pointer; background-color: var(--bright-blue);  }
@media (max-width: 767px) {
  .contact button {  padding: 10px 20px;  }
}
/* Responsive Design */
@media (max-width: 768px) {
    .contact-form { padding: 2rem 1rem; }
}


/****************************************************/
/* PAYMENT METHODS
/***************************************************/
.payments {
    padding:3rem 1rem; background:#01ACE4; display:flex; flex-direction:column; align-items:center; justify-content:center;   }
.payments h1 {
   text-align:center; margin-bottom:1rem; }
.payments-container {
   background:white; border-radius:20px; padding:40px; box-shadow:0 20px 60px rgba(0, 0, 0, 0.3); max-width:800px; width:100%;    }
.payment-grid {
   display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:30px; margin-top:30px;     }
.payment-method {
   display:flex; flex-direction:column; align-items:center; padding:25px; border-radius:15px; background:#f8f9fa; transition:all 0.3s ease; cursor:pointer;   }
.payment-method:hover {
   transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); background: #e9ecef;    }
.payment-icon {
   width: 60px; height: 60px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; font-size: 2.5em;  }
.payment-name {
   font-size: 1.1em; font-weight: 600; color: #495057;}
/* Custom icons using SVG */
.cash-icon {
   color: #28a745; }
.venmo-icon {
   color: #3D95CE;  }
.zelle-icon {
   color: #6D1ED4; }
.check-icon {
   color: #007bff; }

@media (max-width: 600px) {
   .payment-grid {
      grid-template-columns: repeat(2, 1fr);    }
   .payments h1 {
      font-size:1.5rem;   }
}

/****************************************************/
/* FOOTER
/***************************************************/
.footer {
   padding:6rem 1rem 1rem; background:#2B2B2B; color:white; }
.wrap-footer {
   display:flex; justify-content:space-around; align-items:flex-top; gap:1.5rem; }
.wrap-footer a:hover {
   color:#01ACE4; }

.footer-col2 {
   display:flex; justify-content:space-around; align-items:flex-top; gap:1rem; flex:1;}

.wrap-footer h3 {
    color:#01ACE4; }
.footer-col {
    flex:1; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:.8rem; max-width:350px; }
.footer-col p {
   padding:0 2rem 0; text-align:center;}

.footer-col img {
   height:100px; /* covers both bars */ object-fit:contain;     }
.footer-bottom {
    width:100%; text-align:center; background:#2B2B2B; color:silver; font-size:.8rem; padding:5rem 1rem 0;}
@media (max-width: 768px) {
   .wrap-footer, .footer-col, .footer-col2 { flex-direction:column; align-items:center; text-align:center; }
   .wrap-footer h3 { margin-top:1.3rem; }
   .footer-col { width:100%; }
   .footer-col p { padding:0 1rem; }
}

/****************************************************/
/* BUBBLES
/***************************************************/
.bubble-section{
   position:relative; }
.bubbleContainer {
   width:100%; position:absolute; top:0; left:0; height:100%; overflow:hidden; z-index:1; pointer-events:none; }
div[class^="bubble-"] {
   height:1px; width:1px; position:absolute; background:url(img/buble.png) no-repeat center center; background-size:cover; border-radius:50%;
   -webkit-transform: translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); pointer-events:none;  }
.bubble-1 {
   bottom:0px; left:60%; -webkit-animation:bubble-movement 10s infinite ease-in -5.7s; animation:bubble-movement 10s infinite ease-in -5.7s; }
.bubble-2 {
   bottom:0px; left:90%; -webkit-animation:bubble-movement 10s infinite ease-in -4.94s; animation:bubble-movement 10s infinite ease-in -4.94s;  }
.bubble-3 {
   bottom:0px; left:20%; -webkit-animation:bubble-movement 4s infinite ease-in -1.2s; animation:bubble-movement 4s infinite ease-in -1.2s;  }
.bubble-4 {
   bottom:0px; left:40%; -webkit-animation:bubble-movement 10s infinite ease-in -1.58s; animation:bubble-movement 10s infinite ease-in -1.58s;  }
.bubble-5 {
   bottom:0px; left:75%; -webkit-animation:bubble-movement 7s infinite ease-in -6.31s; animation:bubble-movement 7s infinite ease-in -6.31s;  }
.bubble-6 {
   bottom:0px; left:45%; -webkit-animation:bubble-movement 10s infinite ease-in -0.51s; animation:bubble-movement 10s infinite ease-in -0.51s; }
.bubble-7 {
   bottom:0px; left:10%; -webkit-animation:bubble-movement 15s infinite ease-in -3.37s; animation:bubble-movement 15s infinite ease-in -3.37s; }
.bubble-8 {
   bottom:0px; left:65%; -webkit-animation: bubble-movement 10s infinite ease-in -0.66s; animation: bubble-movement 10s infinite ease-in -0.66s; }
.bubble-9 {
   bottom:0px; left:30%; -webkit-animation: bubble-movement 4s infinite ease-in -5.81s; animation:bubble-movement 4s infinite ease-in -5.81s; }
.bubble-10 {
   bottom:0px; left:95%; -webkit-animation:bubble-movement 10s infinite ease-in -3.98s; animation:bubble-movement 10s infinite ease-in -3.98s; }
.bubble-11 {
   bottom:0px; left:41%; -webkit-animation:bubble-movement 15s infinite ease-in -3.98s; animation:bubble-movement 15s infinite ease-in -3.98s;  }
.bubble-12 {
   bottom:0px; left:46%; -webkit-animation:bubble-movement 10s infinite ease-in -3.98s; animation:bubble-movement 10s infinite ease-in -3.98s; }
.bubble-13 {
   bottom:0px; left:50%; -webkit-animation:bubble-movement 4s infinite ease-in -3.98s;  animation:bubble-movement 4s infinite ease-in -3.98s; }
.bubble-14 {
   bottom:0px; left:70%; -webkit-animation:bubble-movement 4s infinite ease-in -3.98s;  animation:bubble-movement 4s infinite ease-in -3.98s; }
.bubble-15 {
   bottom:0px; left:58%; -webkit-animation:bubble-movement 4s infinite ease-in -3.98s;  animation:bubble-movement 4s infinite ease-in -3.98s; }

@-webkit-keyframes bubble-movement {
   0% {
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
      height: 1px;
      width: 1px; }
   100% {
      -webkit-transform: translate3d(-50%, -700px, 0);
      transform: translate3d(-50%, -700px, 0);
      height: 75px;
      width: 75px; } }

@-moz-keyframes bubble-movement {
   0% {
      transform: translate3d(-50%, 0, 0);
      height: 1px;
      width: 1px; }
   100% {
      transform: translate3d(-50%, -700px, 0);
      height: 75px;
      width: 75px; } }

@-o-keyframes bubble-movement {
   0% {
      transform: translate3d(-50%, 0, 0);
      height: 1px;
      width: 1px; }
   100% {
      transform: translate3d(-50%, -700px, 0);
      height: 75px;
      width: 75px; } }

@keyframes bubble-movement {
   0% {
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
      height: 1px;
      width: 1px; }
   100% {
      -webkit-transform: translate3d(-50%, -700px, 0);
      transform: translate3d(-50%, -700px, 0);
      height: 75px;
      width: 75px; } }