.banner {
    padding-top: 0;
}

.image-right {
  justify-content: stretch;
}
.image-right .outer-wrap {
  /* align-items: center; */
  display: flex;
  justify-content: center;
  overflow: visible;
  /* width: 100%; */
  /* margin-top: 50px; */
  max-width: 2000px;
  min-height: calc(100vh - 100px);
  /* padding-bottom: 50px; */
  width: 45%;
}


.splash {
  display: flex;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0;
  position: relative;
  width: 100%;
}


.splash.image-right .right-wrap {
  right: 0;
}
.splash .right-wrap {
  height: 100%;
  position: fixed;
  top: 0;
}
.right-wrap {
  width: 55%;
}

.left-content-wrap {
    /* padding: 0 20px; */
    position: relative;
    width: 100%;
    text-align: center;
}

.splash .right {

  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* transition: ease-in 1s; */
}

.image-right .right {
  
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.desktop-swap {
  display: block;
}
.desktop-inline {
  display: inline;
}

.mobile-swap {
  display: none;
}

.desktop-banner {
  padding: 20px; 
  margin-top: 20px; 
  margin-bottom: 20px; 
  border-radius: 10px;
}
.desktop-banner img {
  width: 100%; 
  max-width: 679px;
}

.mobile-banner {
  padding: 20px; 
  background-image: url('/assets/imgs/layout/banner/bk1m.jpg'); 
  margin-bottom: 20px;
}

.front-page-button {
  display: block;
  gap: 2em;
  padding-left: 2rem;
  padding: 20px;
  text-align: center;
  margin: auto;
  border-radius: 7px;
  color: #fff;
  max-width: 300px;
  border-style: solid;
  border-width: 5px;
}
.front-page-button:hover {
  color: #fff;
  text-decoration: none;
}
.front-page-button h2 {
  margin: 0;
}
.front-page-button.blue {
  background-color: #25baf1;
}
.front-page-button.blue:hover {
  background-color: #0380ad;
}
.front-page-button.pink {
  background-color: #f296bd;
}
.front-page-button.pink:hover {
  background-color: #aa3465;
}
.front-page-button.yellow {
  background-color: #ffcc1a;
}
.front-page-button.yellow:hover {
  background-color: #FFAA0C;
}


.social-buttons {
  display: block;
  text-align: center;
  margin: 0 auto;
  max-width: 350px; 
  width: 100%;
}

.social-buttons a {
  display: block;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;  
  padding-top: 10px; 
  font-family: "Bowlby One SC", sans-serif;
  color: #25baf1;
  background-color: #fff;
  text-decoration: none;
  border-radius: 7px;
  font-size: 1.5em;
  width: 100%;
}


.social-buttons a:hover {
  color: #fff;
  background-color: #25baf1;
  
}

.quote-block {
    display: flex; 
    max-width:  605px; 
    background-image: url('/assets/imgs/layout/banner/bk1m.jpg'); 
    color: #fff; 
    border-radius: 60px 7px 7px 60px; 
    padding: 10px;
    max-height: 120px;
}
.quote-block #quote {
  width: 100%; 
  /* padding: 5% 5px;*/
}
.quote-block #icon2 {
  width: 100%; 
  max-width: 100px;
  cursor: pointer;

}
.quote-block #badge2{
  width: 100%; 
  max-width: 80px;
  cursor: pointer;
}

footer {
  background: none;
  padding: 0;
  margin: 0;

}

footer p {
  color: #6d6d6d;
  margin: 0;
  font-size: 15px;
}

@media (max-width: 800px) {
  .outer-wrap {
    width: 100% !important;
  }
  .image-right .outer-wrap {
    min-height: 20vh;
  }

  .image-right {
      display: block;
  }
  .image-right .right {
    height: 30vh;
  }
  
  .image-right .right-wrap {
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .quote-block {
    display: flex;
  }
 
  .mobile-swap {
    display: block !important;
  }
  .desktop-swap, .desktop-inline {
    display: none !important;

  }

  footer {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #666;
    width: 100%;

  }
  
  footer p {
    color: #ddd;
    font-size: 1.2em;
  }
}

@media (max-width: 400px) {
  .quote-block {
   /*
    text-align: center;
    background: none;
    display: block;
    */
  }
  .quote-block #quote, .quote-block #badge2 {
    /* display: none; */
  }
}