footer {
  /* position: absolute; */
  bottom: 0;
  /* height: 318px; */
  padding: 0;
  margin-top: 30px;
  width: 100%;
  background-color: #1c2125;
}
#cloud-intro {
  position: relative;
  height: 318px;
  padding-top: 30px;
  background: url(../img/clouds-001.png),
              url(../img/clouds-002.png),
              url(../img/clouds-003.png),
              url(../img/clouds-004.png);
  background-repeat: no-repeat;
	/* animation: wind 30s linear infinite; */
  background-position:  52% 181px,
                          77% 127px,
                          88% 117px,
                          100% 201px;
}


/*

  size overrides...

*/

 /* DESKTOP */
 @media (max-width: 1380px) {
  #cloud-intro{
    background-position:  0% 151px,
                            15% 97px,
                            36% 87px,
                            100% 151px;
  }
}

 /* LAPTOP */
@media (max-width: 1199px) {
  #cloud-intro{
    background-position:  0% 151px,
                            20% 97px,
                            9936% 87px,
                            100% 182px;
  }
}


/* TABLET */
@media (max-width: 991px) {
  #cloud-intro{
    background-position:  0% 151px,
                            20% 97px,
                         -9636% 6687px,
                            11100% 182px;
  }
}

/* MOBILE HD */
@media (max-width: 767px) {
  #cloud-intro{
    background-position:  9690% 151px,
                            9620% 97px,
                         -9636% 6687px,
                            9100% 182px;
  }
}
/* MOBILE */
@media (max-width: 575px) {
  #cloud-intro{
    background-position:  990% 151px,
                            9920% 97px,
                         -6636% 6687px,
                            9100% 182px;
  }
}

  /* MOBILE OG */
@media (max-width: 320px) {
  #cloud-intro{
    background-position:  990% 151px,
                            9920% 97px,
                            -9636% 6687px,
                            9980% 182px;
  }
}


/* ANIMATION BUT LEN DOESNT WANT IT */
@keyframes wind{
  0% {
    background-position:  5% 151px,
                          20% 97px,
                          36% 87px,
                          80% 182px;
                          
                          
  }
  100% {
    background-position:  20% 151px,
                          30% 97px,
                          30% 87px,
                          65% 182px;
                          
                          
  }
}





.copyright {
  position: absolute;
  bottom: 0;
  margin-bottom: 44px;
  color: #969696;
  font-size: medium;
}

/* =========================
   Force homepage card hover background off + APNG background (last-loaded override)
   ========================= */

/* Kill the grey hover background everywhere (scoped to homepage work cards) */
.home #work .flex-wrap .card:hover,
.home #work .flex-wrap .card:focus-within,
#work .flex-wrap .card:hover,
#work .flex-wrap .card:focus-within{
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* If the theme re-applies background via a more specific selector, override globally for work cards */
.home #work .flex-wrap .card:hover{
  background-color: transparent !important;
}


/* =========================
   APNG rollover layer (DOM-injected) — ensures animation restarts every hover
   Layer order:
   - card image (z 1)
   - rollover art (z 2)
   - card title/copy (z 3)
   ========================= */

#work .flex-wrap .card{
  position: relative;
}

#work .flex-wrap .card .card-img-top{
  position: relative;
  z-index: 3;
}

#work .flex-wrap .card .card-title{
  position: relative;
  z-index: 3;
}

#work .flex-wrap .card .apng-rollover-layer{
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 4;
  pointer-events: none;
}

#work .flex-wrap .card .apng-rollover-layer img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center calc(50% + 12px);
}

@media (min-width: 992px){
  #work .flex-wrap .card .apng-rollover-layer img{
    object-position: center 50%;
  }
}


/* =========================
   Rollover fade-out on rollout (both anim + end frame)
   ========================= */
#work .flex-wrap .card .apng-rollover-layer img.apng-rollover-anim,
#work .flex-wrap .card .apng-rollover-layer img.apng-rollover-end{
  opacity: 1;
  transition: opacity 0.2s ease;
  will-change: opacity;
}


/* =========================
   Split rollover layers: grey block + gleam
   ========================= */
#work .flex-wrap .card{ position: relative; overflow: visible; }
#work .flex-wrap .card .card-img-top{ position: relative; z-index: 3; }
#work .flex-wrap .card .card-title,
#work .flex-wrap .card .card-copy{ position: relative; z-index: 3; }

#work .flex-wrap .card .rollover-grey-layer{
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 1;
  pointer-events: none;
}
#work .flex-wrap .card .rollover-grey-layer img{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}

#work .flex-wrap .card .card-img-top .rollover-gleam-layer{
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 4;
  pointer-events: none;
}
#work .flex-wrap .card .card-img-top .rollover-gleam-layer img{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}


/* Stacking order for DOM-injected rollovers */
.rollover-static { z-index: 3; }
.rollover-anim { z-index: 4; }
/* Disable legacy rollover layer */
#work .flex-wrap .card .apng-rollover-layer{ display:none !important; }