.elementor-1702 .elementor-element.elementor-element-60ca66c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-1702 .elementor-element.elementor-element-60ca66c{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-00f03e9 */.hero-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
}

.hero-column {
  width: 25%;
  height: 100%;
  float: left;
  border-right: 2px solid rgba(0,0,0,.5);
  box-sizing: border-box;
  z-index: 1;
}

.hero-column:last-child {
  border-right: none;
}

.hero-content {
  position: relative;
  height: 100%;
}

.hero-content h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  background: rgba(0,0,0,0.1);
  text-align: center;
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,0.2);
  font-size: 15em;
  border-top: 2px solid rgba(0,0,0,.5);
  border-bottom: 2px solid rgba(0,0,0,.5);
}

.hero-box {
  position: absolute;
  top: 50%;
  transform: translateY(100%);
  box-sizing: border-box;
  padding: 40px;
  background: rgba(255,255,255,1);
  text-align: center;
  transition: 0.5s;
  opacity: 0;
}

.hero-column.active .hero-box {
  opacity: 1;
  transform: translateY(-50%);
}

.hero-box h2 {
  margin: 0;
  padding: 0;
  font-size: 30px;
  color: #262626;
}

.hero-box p {
  color: #262626;
  font-size: 18px;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.hero-column.active .hero-bg1 {
  background: url(https://images.pexels.com/photos/245032/pexels-photo-245032.jpeg) no-repeat center center fixed;
  background-size: cover;
  transition: 0.5s;
}
.hero-column.active .hero-bg2 {
  background: url(https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg) no-repeat center center fixed;
  background-size: cover;
  transition: 0.5s;
}
.hero-column.active .hero-bg3 {
  background: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg) no-repeat center center fixed;
  background-size: cover;
  transition: 0.5s;
}
.hero-column.active .hero-bg4 {
  background: url(https://images.pexels.com/photos/1002634/pexels-photo-1002634.jpeg) no-repeat center center fixed;
  background-size: cover;
  transition: 0.5s;
}/* End custom CSS */