.centered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vh;
    text-align: center;
    animation-name: lowerText;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    opacity: 1.0 !important;
}

.contact{
    color:white;
}

.form-container{
    background-color: #2c2c2c;
    color: white;
}

.services{
    background-color: #2c2c2c;
}

.service-text{
    font-size: 3.5vh;
}

.service{
    border: none !important;
    color:whitesmoke;
    text-shadow: 2px 2px 3px #090a09;
    /* height: 350px; */
}

.service:hover .service-img{
    animation-name: dim;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    /* height: 350px; */
}

.service_descrip {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5vh;
    text-align: center;
    animation-name: disappear;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    text-shadow: 2px 2px #090a09;
}

.service:hover .centered{
    animation-name: raiseText;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    text-shadow: 2px 2px #090a09;
}

.service:hover .service_descrip{
    animation-name: appear;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    text-shadow: 2px 2px #090a09;
}

.logo{
    text-decoration: none;
    animation-name: logoHighlightOff;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.logo:hover{
    animation-name: logoHighlightOn;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.location{
  text-decoration: none;
  animation-name: colorHighlightOff;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}

.location:hover{
  animation-name: colorHighlightOn;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}

.imageRow-dumpster-text{
    color: lightgray;
    font-weight: 10;
}

.yard-debris {
    height: 350px;
}

.hide-this{
    display:none;
}

@media only screen and (min-width: 565px){
  @keyframes appear {
      from {opacity: 0;}
      to {opacity: 1.0;}
  }

  @keyframes disappear {
      from {opacity: 1.0;}
      to {opacity: 0;}
  }

  @keyframes raiseText {
      from {top: 50%;}
      to {top: 15%;}
  }

  @keyframes lowerText {
      from {top: 20%;}
      to {top: 50%;}
  }

  .logo {
    font-size: 25px;
  }
}
@keyframes dim {
      from {filter: brightness(100%);}
      to {filter: brightness(50%);}
  }

@keyframes unDim {
    from {filter: brightness(50%);}
    to {filter: brightness(100%);}
}

@keyframes colorHighlightOn{
  from {color: white}
  to {color: #e6c242}
}

@keyframes colorHighlightOff{
  from {color: #e6c242}
  to {color: white}
}

@keyframes logoHighlightOn{
    from {color: #e6c242}
    to {color: white}
  }
  
  @keyframes logoHighlightOff{
    from {color: white}
    to {color: #e6c242}
  }