.cls-1{opacity:0.5;}
.cls-2,.cls-4{fill:#ffff00;}
.cls-2,
.cls-3{opacity:0.45;}
.cls-3,
.cls-5{fill: #ffff00;}
.cls-4{opacity:0.45;}
.cls-5{opacity:0.5;}


.border-color{
  border: hsla(60, 100%, 50%, 1) 1px solid;
}

.bg-color{
  background-color: hsla(60, 100%, 50%, .4);
}
.bg-color-2{
  background-color: hsla(60, 100%, 50%, .15);
}


@keyframes fadeborder {
  0% {border: hsla(60, 100%, 50%, 0) 2px solid;}
  50% {border: hsla(60, 100%, 50%, .45) 2px solid;}
  100% {border: hsla(60, 100%, 50%, .4) 2px solid;}
}
.codebox:hover {
  border: hsla(60, 100%, 50%, 0) 2px solid;
  animation-name: fadeborder;
  animation-duration: .8s;
  animation-fill-mode: forwards;
}

.text-box-audit{
line-height:1.4;
}

ul {
  padding: 5% 0%;
  list-style-type: none;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
  width: 100px;
  height: 100px;
}

.banner-padding{
  padding-left: 39rem;
  padding-right: 7rem;
}


.video-padding {
  margin: 0% 0% 11%;
  width: 100%;
}

/* The animation code */
@keyframes squaretop {
  0% {transform: translateY(-8%); opacity: 0;}
  25% {transform: translateY(8%); opacity: .2;}
  50% {transform: translateY(-2%); opacity: .25;}
  100% {transform: translateY(5%); opacity: .3;}
}

@keyframes squareright {
  0% {transform: translateX(-8%); opacity: 0;}
  25% {transform: translateX(8%); opacity: .2;}
  50% {transform: translateX(-2%); opacity: .25;}
  100% {transform: translateX(5%); opacity: .3;}
}

/* The element to apply the animation to */
.square-top {
  top: -8%;
  opacity: 0%;
  animation-name: squaretop;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

.square-right {
  top: -8%;
  opacity: 0%;
  animation-name: squareright;
  animation-duration: 8s;
  animation-fill-mode: forwards;
}

.lighthouse {
    width: 100%;
    right: 5%;
    z-index: -1;
    
}

.lightdiv{
  padding-bottom: 12%;
}
.lighthouse-div{
  height: 350px;
  padding-bottom: 5%;
}
.lighthouse-text{
  height: 200px;
  padding: 1rem;
  background-color: hsla(60, 100%, 50%, .1)
}
  
  .padding2{
    padding: 0%;
  }

  .report-padding{
    padding: 5% 5%;
    margin: 5% 5%;
    width: 100%;
  }
  
@media(min-width:768px){
  .lightdiv{
    padding-bottom: 0;
  }
  .lighthouse{ width: 900px; right: 18%; position: absolute;}
  .lighthouse-text{max-width: 460px; margin-top: 5rem;}
  .video-padding {
    padding: 0%;
    margin: 0%;
    max-width: 500px;
    text-align: center;
}
.padding2{
  padding: 3rem 6rem 0rem 5rem;
}
}

@media (min-width: 992px){
  .lighthouse{right: 20%;}
  .padding2{
    padding: 3rem 11rem 1rem 11rem;
  }
}