/* Utility Classes */

.animate-in-view-20 {
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
  animation-duration: 1.75s;
}

.animate-in-view-40 {
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

/* Animation Delays */

/* Keyframes */

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes blur-5 {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes slideIn100 {
  0% {
    opacity: 0;
    transform: translate(0, 100px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes slideIn50 {
  0% {
    opacity: 0;
    transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes appearLeft {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate(-100px, 100px);
    transition: all 1s;
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0);
  }
}

@keyframes appearRight {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate(100px, 100px);
    transition: all 1s;
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translate(0, 0);
  }
}

@keyframes appeardown {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(100px);
    transition: all 1s;
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0%);
  }
}

@keyframes typing {
  0.0000%, 9.5% {
    content: "";
  }
  0.9375%, 8.5625% {
    content: "L";
  }
  1.875%, 7.625% {
    content: "Lo";
  }
  2.8125%, 6.6875% {
    content: "Lov";
  }
  3.75%, 5.75% {
    content: "Love";
  }
  10.5%, 23.75% {
    content: "";
  }
  11.4375%, 22.8125% {
    content: "W";
  }
  12.375%, 21.875% {
    content: "Wa";
  }
  13.3125%, 20.9375% {
    content: "War";
  }
  14.25%, 20% {
    content: "Warm";
  }
  15.1875%, 19.0625% {
    content: "Warmt";
  }
  16.125%, 18.125% {
    content: "Warmth";
  }
  24.75%, 39.875% {
    content: "";
  }
  25.6875%, 38.9375% {
    content: "C";
  }
  26.625%, 38% {
    content: "Co";
  }
  27.5625%, 37.0625% {
    content: "Com";
  }
  28.5%, 36.125% {
    content: "Comf";
  }
  29.4375%, 35.1875% {
    content: "Comfo";
  }
  30.375%, 34.25% {
    content: "Comfor";
  }
  31.3125%, 33.3125% {
    content: "Comfort";
  }
  40.875%, 56% {
    content: "";
  }
  41.8125%, 55.0625% {
    content: "P";
  }
  42.75%, 54.125% {
    content: "Pr";
  }
  43.6875%, 53.1875% {
    content: "Pre";
  }
  44.625%, 52.25% {
    content: "Pres";
  }
  45.5625%, 51.3125% {
    content: "Prese";
  }
  46.5%, 50.375% {
    content: "Presen";
  }
  47.4375%, 49.4375% {
    content: "Presence";
  }
  57%, 68.375% {
    content: "";
  }
  57.9375%, 67.4375% {
    content: "P";
  }
  58.875%, 66.5% {
    content: "Po";
  }
  59.8125%, 65.5625% {
    content: "Pow";
  }
  60.75%, 64.625% {
    content: "Powe";
  }
  61.6875%, 63.6875% {
    content: "Power";
  }
  69.375%, 84.5% {
    content: "";
  }
  70.3125%, 83.5625% {
    content: "K";
  }
  71.25%, 82.625% {
    content: "Ki";
  }
  72.1875%, 81.6875% {
    content: "Kin";
  }
  73.125%, 80.75% {
    content: "King";
  }
  74.0625%, 79.8125% {
    content: "Kingd";
  }
  75%, 78.875% {
    content: "Kingdo";
  }
  75.9375%, 77.9375% {
    content: "Kingdom";
  }
  85.5%, 98.75% {
    content: "";
  }
  86.4375%, 97.8125% {
    content: "G";
  }
  87.375%, 96.875% {
    content: "Gl";
  }
  88.3125%, 95.9375% {
    content: "Glo";
  }
  89.25%, 95% {
    content: "Glor";
  }
  90.1875%, 94.0625% {
    content: "Glory";
  }
  91.125%, 93.125% {
    content: "Glory!";
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes together-typing {
  0.0000%, 16.8750% {
    content: "";
  }
  0.9375%, 15.9375% {
    content: "T";
  }
  1.875%, 15.0000% {
    content: "To";
  }
  2.8125%, 14.0625% {
    content: "Tog";
  }
  3.75%, 13.1250% {
    content: "Toge";
  }
  4.6875%, 12.1875% {
    content: "Toget";
  }
  5.6250%, 11.2500% {
    content: "Togeth";
  }
  6.5625%, 10.3125% {
    content: "Togethe";
  }
  7.5000%, 9.3750% {
    content: "Together";
  }
  17.8125%, 38.4375% {
    content: "";
  }
  18.7500%, 37.5000% {
    content: "I";
  }
  19.6875%, 36.5625% {
    content: "In";
  }
  20.6250%, 35.6250% {
    content: "In H";
  }
  21.5625%, 34.6875% {
    content: "In Ha";
  }
  22.5000%, 33.7500% {
    content: "In Har";
  }
  23.4375%, 32.8125% {
    content: "In Harm";
  }
  25.3125%, 31.8750% {
    content: "In Harmo";
  }
  26.2500%, 30.9375% {
    content: "In Harmon";
  }
  27.1875%, 30.0000% {
    content: "In Harmony";
  }
  39.3750%, 60.0000% {
    content: "";
  }
  40.3125%, 59.0625% {
    content: "H";
  }
  41.2500%, 58.1250% {
    content: "Ha";
  }
  42.1875%, 57.1875% {
    content: "Han";
  }
  43.1250%, 56.2500% {
    content: "Hand";
  }
  44.0625%, 55.3125% {
    content: "Hand I";
  }
  45.0000%, 54.3750% {
    content: "Hand In";
  }
  45.9375%, 53.4375% {
    content: "Hand In H";
  }
  46.8750%, 52.5000% {
    content: "Hand In Ha";
  }
  47.8125%, 51.5625% {
    content: "Hand In Han";
  }
  48.7500%, 50.6250% {
    content: "Hand In Hand";
  }
  60.9375%, 83.4375% {
    content: "";
  }
  61.8750%, 82.5000% {
    content: "I";
  }
  62.8125%, 81.5625% {
    content: "In";
  }
  63.7500%, 80.6250% {
    content: "In O";
  }
  64.6875%, 79.6875% {
    content: "In On";
  }
  65.6250%, 78.7500% {
    content: "In One";
  }
  66.5625%, 77.8125% {
    content: "In One S";
  }
  67.5000%, 76.8750% {
    content: "In One Sp";
  }
  68.4375%, 75.9375% {
    content: "In One Spi";
  }
  69.3750%, 75.0000% {
    content: "In One Spir";
  }
  70.3125%, 74.0625% {
    content: "In One Spiri";
  }
  71.2500%, 73.1250% {
    content: "In One Spirit";
  }
  84.3750%, 100% {
    content: "";
  }
  85.3125%, 99.5% {
    content: "J";
  }
  86.2500%, 99% {
    content: "Jo";
  }
  87.1875%, 98.4375% {
    content: "Joy";
  }
  88.1250%, 97.5000% {
    content: "Joyf";
  }
  89.0625%, 96.5625% {
    content: "Joyfu";
  }
  90.0000%, 95.6250% {
    content: "Joyful";
  }
  90.9375%, 94.6875% {
    content: "Joyfull";
  }
  91.8750%, 93.7500% {
    content: "Joyfully";
  }
}

@keyframes home-typing {
  0.0000%, 9.3750% {
    content: "";
  }
  0.9375%, 8.4375% {
    content: "H";
  }
  1.875%, 7.5000% {
    content: "Ho";
  }
  2.8125%, 6.5625% {
    content: "Hom";
  }
  3.75%, 5.6250% {
    content: "Home";
  }
  10.3125%, 21.5625% {
    content: "";
  }
  11.2500%, 20.6250% {
    content: "V";
  }
  12.1875%, 19.6875% {
    content: "Vo";
  }
  13.1250%, 18.7500% {
    content: "Voi";
  }
  14.0625%, 17.8125% {
    content: "Voic";
  }
  15.0000%, 16.8750% {
    content: "Voice";
  }
  22.5000%, 33.7500% {
    content: "";
  }
  23.4375%, 32.8125% {
    content: "H";
  }
  24.3750%, 31.8750% {
    content: "Ha";
  }
  25.3125%, 30.9375% {
    content: "Hav";
  }
  26.2500%, 30.0000% {
    content: "Have";
  }
  27.1875%, 29.0625% {
    content: "Haven";
  }
  34.6875%, 45.9375% {
    content: "";
  }
  35.6250%, 45.0000% {
    content: "S";
  }
  36.5625%, 44.0625% {
    content: "Sp";
  }
  37.5000%, 43.1250% {
    content: "Spa";
  }
  38.4375%, 42.1875% {
    content: "Spar";
  }
  39.3750%, 41.2500% {
    content: "Spark";
  }
  46.8750%, 61.8750% {
    content: "";
  }
  47.8125%, 60.9375% {
    content: "P";
  }
  48.7500%, 60.0000% {
    content: "Pu";
  }
  49.6875%, 59.0625% {
    content: "Pur";
  }
  50.6250%, 58.1250% {
    content: "Purp";
  }
  51.5625%, 57.1875% {
    content: "Purpo";
  }
  52.5000%, 56.2500% {
    content: "Purpos";
  }
  53.4375%, 55.3125% {
    content: "Purpose";
  }
  62.8125%, 72.1875% {
    content: "";
  }
  63.7500%, 71.2500% {
    content: "R";
  }
  64.6875%, 70.3125% {
    content: "Ro";
  }
  65.6250%, 69.3750% {
    content: "Roo";
  }
  66.5625%, 68.4375% {
    content: "Root";
  }
  73.1250%, 88.1250% {
    content: "";
  }
  74.0625%, 87.1875% {
    content: "W";
  }
  75.0000%, 86.2500% {
    content: "Wi";
  }
  75.9375%, 85.3125% {
    content: "Wit";
  }
  76.8750%, 84.3750% {
    content: "Witn";
  }
  77.8125%, 83.4375% {
    content: "Witne";
  }
  78.7500%, 82.5000% {
    content: "Witnes";
  }
  79.6875%, 81.5625% {
    content: "Witness";
  }
  89.0625%, 100% {
    content: "";
  }
  90.0000%, 99.3750% {
    content: "C";
  }
  90.9375%, 98.4375% {
    content: "Ca";
  }
  91.8750%, 97.5000% {
    content: "Cau";
  }
  92.8125%, 96.5625% {
    content: "Caus";
  }
  93.7500%, 95.6250% {
    content: "Cause";
  }
}

/* Animations */

/* Fade */

/* Pop In */

.pop {
  animation-name: animate-pop;
}

/* Blur In */

.blur {
  animation-name: animate-blur;
  animation-timing-function: ease-in;
}

.blur-5 {
  animation-name: blur-5;
  animation-timing-function: ease-in;
}

/* Glow In */

/* Grow In */

/* Splat In */

/* Roll In */

/* Flip In */

/* Spin In */

/* Slide In */

.slideIn100 {
  animation-name: slideIn100;
  animation-timing-function: linear;
}

.slideIn50 {
  animation-name: slideIn50;
  animation-timing-function: linear;
}

/* Drop In */

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

.animate {
  animation-duration: 1.75s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.animate-fast {
  animation-duration: 0.75s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.appearRight {
  animation: appearRight linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.appeardown {
  animation: appeardown linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes move-about-hero-992px-max {
  0% {
    box-shadow: 1.5rem -1.5rem var(--bs-primary);
  }
  100% {
    box-shadow: 0 0 var(--bs-primary);
    border: 4px solid var(--bs-primary);
    margin-top: 24px;
    border-radius: 2px;
  }
}

@keyframes move-about-hero-tablet {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 36px -36px var(--bs-primary);
    position: relative;
    right: 0px;
  }
  100% {
    transform: translate(36px, -36px);
    box-shadow: 0 0 var(--bs-primary);
    border: 4px solid var(--bs-primary);
    padding: 5px;
    margin-top: 48px;
    border-radius: 30px;
    position: relative;
    right: 23px;
  }
}

@keyframes move-about-hero-first-tablet {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 1.5rem -1.5rem var(--bs-primary);
  }
  100% {
    transform: translate(24px, -24px);
    box-shadow: 0 0 var(--bs-primary);
    border: 4px solid var(--bs-primary);
    padding: 3px;
    margin-top: 24px;
    border-radius: 2px;
  }
}

@keyframes move-about-hero {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 1.5rem -1.5rem var(--bs-primary);
  }
  100% {
    transform: translate(24px, -24px);
    box-shadow: 0 0 var(--bs-primary);
    border: 4px solid var(--bs-primary);
    padding: 3px;
    margin-top: 24px;
    border-radius: 2px;
  }
}

@keyframes move-about-hero-first {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 1.5rem -1.5rem var(--bs-primary);
  }
  100% {
    transform: translate(24px, -24px);
    box-shadow: 0 0 var(--bs-primary);
    border: 4px solid var(--bs-primary);
    padding: 3px;
    margin-top: 24px;
    border-radius: 2px;
  }
}

@keyframes move-about-hero-mobile {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 10px -10px var(--bs-primary);
  }
  100% {
    transform: translate(10px, -10px);
    box-shadow: 0 0 var(--bs-primary);
    border: 3px solid black;
    padding: 5px;
    width: 100%;
    clip-path: 0;
    margin-top: 10px;
    margin-left: -10px;
    border-radius: 25px;
  }
}

@keyframes move-maps-div {
  0% {
    transform: translate(0px, 0px) scale(1);
    box-shadow: 10px 10px var(--bs-primary);
    padding: 0;
  }
  100% {
    transform: translate(48px, -48px) scale(1.15);
    box-shadow: 0 0 var(--bs-primary);
    padding: 3px;
  }
}

@keyframes move-maps-div-reverse {
  0% {
    transform: translate(0px, 0px) scale(1);
    box-shadow: 10px 10px var(--bs-primary);
    padding: 0;
  }
  100% {
    transform: translate(48px, -48px) scale(1.15);
    box-shadow: 0 0 var(--bs-primary);
    padding: 3px;
  }
}

@keyframes move-maps-div-992px {
  0% {
    transform: translate(0px, 0px) scale(1);
    box-shadow: 10px 10px var(--bs-primary);
    padding: 0;
  }
  100% {
    transform: translate(48px, -48px) scale(1.1);
    box-shadow: 0 0 var(--bs-primary);
    padding: 3px;
    margin-bottom: -40px;
  }
}

@keyframes move-maps-div-992px-reverse {
  0% {
    transform: translate(0px, 0px) scale(1);
    box-shadow: 10px 10px var(--bs-primary);
    padding: 0;
  }
  100% {
    transform: translate(48px, -48px) scale(1.1);
    box-shadow: 0 0 var(--bs-primary);
    padding: 3px;
    margin-bottom: -40px;
  }
}

@keyframes move-maps-div-mobile {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 10px 10px var(--bs-primary);
    padding: 0;
  }
  100% {
    transform: translate(10px, -10px);
    box-shadow: 0 0 var(--bs-primary);
    padding: 3px;
    margin-bottom: 0px;
    width: 100%;
  }
}

@keyframes move-maps-div-mobile-reverse {
  0% {
    transform: translate(0px, 0px);
    box-shadow: 10px 10px var(--bs-primary);
    padding: 0;
  }
  100% {
    transform: translate(10px, -10px);
    box-shadow: 0 0 var(--bs-primary);
    padding: 3px;
    margin-bottom: 0px;
    width: 100%;
  }
}

@keyframes move-dark-button {
  0% {
    box-shadow: 5px 5px var(--bs-primary);
  }
  100% {
    box-shadow: 0 0 var(--bs-primary);
  }
}

@keyframes heartbeat116 {
  0%, 100% {
    width: 100%;
  }
  50% {
    width: 30%;
  }
}

.move-about-hero:hover {
  animation: move-about-hero 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
  transition: all 0.75s ease-in-out 0.75s;
}

#about-hero-div:has(.move-about-hero:hover) {
  scale: 1.05;
  transition: all 0.75s ease-in-out 0.75s;
}

.move-about-hero-first {
  animation: move-about-hero-first 0.75s cubic-bezier(0.42, 0, 0.58, 1) 1s reverse;
  transition: all 0.75s ease-in-out 0.75s;
}

/* .move-about-hero:not(:hover) {
  animation: move-about-hero-first 0.75s cubic-bezier(0.42, 0, 0.58, 1) reverse;
  transition: all ease-in-out 0.75s;
} */

.alternating-slides > div:nth-child(3n + 1) {
  animation: appearLeft linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

.alternating-slides > div:nth-child(3n + 2) {
  animation: appeardown linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

.alternating-slides > div:nth-child(3n + 3) {
  animation: appearRight linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

.youth-exec-img {
  transform: translateY(0px) scale(1);
  transform-origin: 50% bottom;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.exec-div:hover > img:last-child {
  transform: translateY(0) scale(1.2);
}

#first-two-rows {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.youth-hero-img {
  transform: scale(1);
  transform-origin: 50% bottom;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.youth-hero-img:hover {
  transition-delay: 0.25s;
  align-self: center;
  place-self: center;
  height: calc(100vh - 160px);
  max-height: 800px;
}

#first-row > .youth-hero-img:hover {
  width: 2000% !important;
  margin: auto 0;
}

#second-img-row > .youth-hero-img:hover {
  width: 2000% !important;
  margin-top: 0px;
}

#third-row > .youth-hero-img:hover {
  width: 3000% !important;
  margin-top: -450px;
}

#third-row:hover {
  padding-left: 33%;
  float: right;
}

.dark-button:hover {
  animation: move-dark-button 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  transition: all ease-in-out 0.5s;
}

#maps-div:hover {
  animation: move-maps-div 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  transition: all ease-in-out 0.5s;
  margin-top: 48px;
  margin-left: -48px;
}

#maps-div:not(:hover), #maps-div {
  animation: move-maps-div-reverse 0.5s cubic-bezier(0.42, 0, 0.58, 1) reverse;
  transition: all ease-in-out 0.5s;
}

#first-group:hover {
  width: 200% !important;
  height: 800px;
}

#flex-img:has(.images-group:hover) .images-group:not(:hover) {
  filter: blur(4px);
  visibility: hidden;
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
  height: 0;
}

.images-group {
  transition: all ease-in-out 0.5s;
}

#second-group:hover, #third-group:hover {
  width: 200% !important;
  height: 500px;
  clip-path: none;
  -webkit-clip-path: none;
}

#second-group:hover #second-group-img, #third-group:hover #third-group-img {
  width: 200%;
  height: 100%;
}

#second-group:hover, #second-group-img:hover, #third-group:hover, #third-group-img:hover {
  clip-path: none;
  -webkit-clip-path: none;
}

#third-group:hover {
  margin-left: -280px;
}

#fourth-group:hover {
  margin-left: -280px;
  width: 200% !important;
  height: 800px;
}

.love-span {
  --caret: currentcolor;
}

.love-span::before {
  content: "";
  animation: typing 20s infinite;
}

.love-span::after {
  content: "";
  border-right: 2px solid var(--bs-primary);
  animation: blink 0.5s linear infinite;
}

.together-span {
  --caret: currentcolor;
}

.together-span::before {
  content: "";
  animation: together-typing 20s infinite;
}

.together-span::after {
  content: "";
  border-right: 2px solid var(--bs-primary);
  animation: blink 0.5s linear infinite;
}

.home-span {
  --caret: currentcolor;
}

.home-span::before {
  content: "";
  animation: home-typing 20s infinite;
}

.home-span::after {
  content: "";
  border-right: 2px solid var(--bs-primary);
  animation: blink 0.5s linear infinite;
}

.minister-image:hover {
  background-blend-mode: normal;
}

.executives-column:has(.minister-image:hover) {
  scale: 1.05;
  z-index: 10;
}

@media (min-width: 992px) {
  .nav-item {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .nav-item::before, .nav-item::after {
    content: "";
    position: absolute;
    border: 0px solid transparent;
    width: 0%;
    height: 0%;
    bottom: 0%;
    right: 0%;
    z-index: 0;
    pointer-events: none;
  }
}

@media (min-width: 992px) {
  .nav-item::before {
    border-bottom-width: 2px;
    border-left-width: 2px;
  }
}

@media (min-width: 992px) {
  .nav-item::after {
    border-top-width: 2px;
    border-right-width: 2px;
  }
}

@media (min-width: 992px) {
  .nav-item:hover {
    color: #fff;
  }
}

@media (min-width: 992px) {
  .nav-item:hover::before, .nav-item:hover::after {
    border-color: var(--bs-primary);
    transition: border-color 0s, width 0.3s, height 0.3s;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 992px) {
  .nav-item:hover::before {
    transition-delay: 0s, 0s, 0.3s;
  }
}

@media (min-width: 992px) {
  .nav-item:hover::after {
    transition-delay: 0s, 0.3s, 0s;
  }
}

/* Mobile styles */

@media (max-width: 992px) {
  .nav-item {
    position: relative;
    overflow: hidden;
  }
}

@media (max-width: 992px) {
  .nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--bs-primary);
    width: 0%;
    transition: width 0.3s ease;
    z-index: 0;
    pointer-events: none;
  }
}

@media (max-width: 992px) {
  .nav-item:hover::after {
    width: 100%;
    animation: heartbeat116 1.5s ease-in-out 0.3s infinite;
  }
}

@media (max-width: 993px) {
  #third-group:hover {
    margin-left: -200px;
  }
}

@media (max-width: 993px) {
  #fourth-group:hover {
    margin-left: -200px;
  }
}

@media (max-width: 993px) {
  #first-row > .youth-hero-img:hover {
    margin: auto 0 auto 10%;
  }
}

@media (max-width: 993px) {
  #second-img-row > .youth-hero-img:hover {
    margin: 0 0 0 10%;
  }
}

@media (max-width: 993px) {
  #third-row > .youth-hero-img:hover {
    margin-left: 10%;
  }
}

@media (max-width: 993px) {
  .youth-hero-img:hover {
    transition-delay: 0.25s;
    align-self: center;
    place-self: center;
    height: 300%;
  }
}

.move-about-hero {
  transition: all 0.75s ease-in-out 0.75s;
}

@media (min-height: 800px) and (max-width: 993px) {
  .move-about-hero:hover {
    animation: move-about-hero-tablet 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
  }
}

.move-about-hero:not(:hover) {
  animation: move-about-hero-first-tablet 0.75s cubic-bezier(0.42, 0, 0.58, 1) reverse;
  transition: all ease-in-out 0.75s;
}

@media (min-height: 800px) and (max-width: 993px) {
  #maps-div:hover {
    animation: move-maps-div-992px 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
    transition: all ease-in-out 0.5s;
    margin-top: 48px;
    margin-left: -48px;
  }
}

@media (min-height: 800px) and (max-width: 993px) {
  #maps-div:not(:hover), #maps-div {
    animation: move-maps-div-992px-reverse 0.5s cubic-bezier(0.42, 0, 0.58, 1) reverse;
    transition: all ease-in-out 0.5s;
  }
}

@media (max-width: 992px) {
  #maps-div:hover {
    margin-top: 90px;
  }
}

@media (max-width: 992px) {
  .move-about-hero:hover {
    animation: move-about-hero-992px-max 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
    transition: all ease-in-out 0.75s;
  }
}

@media (max-width: 992px) {
  .move-about-hero:not(:hover) {
    animation: move-about-hero-992px-max 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s reverse;
    transition: all ease-in-out 0.75s;
  }
}

@media (max-width: 992px) {
  .move-about-hero-first {
    animation: move-about-hero-992px-max 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s reverse;
    transition: all ease-in-out 0.75s;
  }
}

@media (max-width: 992px) {
  #third-row > .youth-hero-img:hover {
    margin-top: -350px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  #third-row:hover {
    padding-left: 35%;
    margin-right: -28px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  #first-row > .youth-hero-img:hover {
    margin: auto 0px auto 30px;
  }
}

@media (min-width: 768px) and (max-width: 993px) {
  #first-group:hover, #second-group:hover, #third-group:hover, #fourth-group:hover {
    height: 350px;
  }
}

@media (min-width: 768px) and (max-width: 993px) {
  #second-group:hover #second-group-img, #third-group:hover #third-group-img {
    height: 100%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #third-group:hover, #fourth-group:hover {
    margin-left: -100%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #first-row > .youth-hero-img:hover, #second-img-row > .youth-hero-img:hover, #third-row > .youth-hero-img:hover {
    width: 100000% !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #first-row > .youth-hero-img:hover {
    margin: auto 0;
    padding: 0;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #second-img-row > #youth-choir-dancing:hover {
    margin: 0 0 0 -7%;
  }
}

@media (max-width: 767px) {
  #third-row:hover {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .youth-hero-img.appearRight {
    animation-name: none;
  }
}

@media (max-width: 767px) {
  #third-row > .youth-hero-img:hover {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  #first-row > .youth-hero-img:first-child:hover, #second-img-row > .youth-hero-img:first-child:hover, #third-row > .youth-hero-img:first-child:hover {
    margin-right: -3%;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  #first-row > .youth-hero-img:nth-child(2):hover, #second-img-row > .youth-hero-img:nth-child(2):hover, #third-row > .youth-hero-img:nth-child(2):hover {
    margin-right: -1.5%;
    margin-left: -1.5%;
  }
}

@media (max-width: 767px) {
  #first-row > .youth-hero-img:nth-child(3):hover, #second-img-row > #youth-choir-dancing:hover, #third-row > .youth-hero-img:nth-child(3):hover {
    margin-right: 0%;
    margin-left: -3%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #maps-div:hover {
    margin-left: -18px;
    margin-top: 80px;
    width: 476px;
  }
}

@media (max-width: 575px) {
  #third-group:hover {
    margin-left: -102%;
  }
}

@media (max-width: 575px) {
  .move-about-hero:hover {
    width: 104%;
    transition: all ease-in-out 0.75s;
  }
}

@media (max-width: 575px) {
  #first-row > .youth-hero-img:nth-child(1):hover, #second-img-row > .youth-hero-img:nth-child(1):hover, #third-row > .youth-hero-img:nth-child(1):hover {
    /*margin: auto -6% auto 0;*/
    margin-left: 0;
    margin-right: -6%;
  }
}

@media (max-width: 575px) {
  #first-row > .youth-hero-img:nth-child(2):hover, #second-img-row > .youth-hero-img:nth-child(2):hover, #third-row > .youth-hero-img:nth-child(2):hover {
    /*margin: auto -3%;*/
    margin-left: -3%;
    margin-right: -3%;
  }
}

@media (max-width: 575px) {
  #first-row > .youth-hero-img:nth-child(3):hover, #second-img-row > .youth-hero-img:nth-child(3):hover, #third-row > .youth-hero-img:nth-child(3):hover {
    /*margin: auto 0 auto -6%;*/
    margin-right: 0;
    margin-left: -6%;
  }
}

@media (max-width: 575px) {
  #first-row > .youth-hero-img:hover {
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media (max-width: 575px) {
  #second-img-row > .youth-hero-img:hover {
    margin-top: 0px;
    width: 2000% !important;
  }
}

@media (max-width: 575px) {
  #third-row > .youth-hero-img:hover {
    margin-top: -242px;
    width: 2000% !important;
  }
}

@media (max-width: 575px) {
  #maps-div:hover {
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  #maps-div:not(:hover), #maps-div {
    animation: move-maps-div-mobile-reverse 0.5s cubic-bezier(0.42, 0, 0.58, 1) reverse;
    transition: all ease-in-out 0.5s;
  }
}

@media (max-width: 575px) {
  #maps-div:hover {
    animation: move-maps-div-mobile 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
    transition: all ease-in-out 0.5s;
    margin-top: 10px;
    margin-left: -10px;
    margin-right: 0;
    right: 0;
    left: 0;
  }
}

@media (max-width: 400px) {
  #fourth-group:hover {
    margin-left: -104%;
  }
}

@media (max-width: 400px) {
  .move-about-hero:hover {
    animation: move-about-hero-mobile 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
    transition: all ease-in-out 0.75s;
  }
}

@media (max-width: 400px) {
  .move-about-hero:not(:hover) {
    animation: move-about-hero-mobile 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s reverse;
    transition: all ease-in-out 0.75s;
  }
}

@media (max-width: 400px) {
  .move-about-hero-first {
    animation: move-about-hero-mobile 0.75s cubic-bezier(0.42, 0, 0.58, 1) 0.5s reverse;
    transition: all ease-in-out 0.75s;
  }
}