footer {
  color: white;
  max-width: 100%;
  line-height: 1.556rem;
  display: inline-block;
  background-image: linear-gradient(to bottom,#34111a,#34111a),linear-gradient(to bottom,#d51f37,#9a1426);
  background-size: 50% 100%,100% 100%;
  background-repeat: no-repeat;
}

footer a {
  color: white;
}

#footer-wrapper {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1445px;
}

.region-footer-content-left {
  width: 66%;
  display: flex;
  padding: 50px 50px 50px 100px;
  background-color: #34111a;
  font-size: 0.85rem;
  color: var(--font-light-gray);
}

.region-footer-content-left h2 {
  font-size: 1rem;
  margin-top: 0px;
  color: white;
  text-transform: uppercase;
}

.region-footer-content-left a {
  color: var(--font-light-gray);
}

.region-footer-content-left svg.ext path {
  stroke: var(--font-light-gray);
}

.region-footer-content-right {
  padding: 50px 100px 50px 50px;
  display: flex;
  width: 34%;
  background-image: linear-gradient(to bottom,#d51f37,#9a1426);
  background-color: #9a1426;
}

#footer-flex-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 40px;
}

#footer-flex-content #land-acknowledgement {
  width: 50%;
}

#footer-flex-content #library-links, #footer-flex-content #social-media-icons {
  width: 25%;
}

#footer-flex-content #social-media-icons {
  display: flex;
  gap:6px;
  justify-content: space-between;
  max-width: 152px;
}

.sm-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  overflow: hidden;
  color: rgba(0,0,0,0);
}

.sm-icon a {
  text-decoration: none;
}

.sm-icon.hoverlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 32px;
  height: 32px;
  transition: opacity 0.2s ease;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  background-color: #8b2331;
  opacity: 0;
  mix-blend-mode: color-dodge;
}

.sm-icon:hover .hoverlay {
  opacity: 1;
}

.region-footer-content-right .footer-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 2rem;
}

.region-footer-content-right .footer-title a {
  text-decoration: none;
}

.region-footer-content-right .library-address {
  padding-left: 26px;
  margin-bottom: 30px;
  background-image: url('/themes/custom/macewan_library/images/icons/font-awesome-free-icons/location-dot-solid.svg');
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left 3px;
}

.region-footer-content-right .phone {
  padding-left: 26px;
  margin-bottom: 30px;
  background-image: url('/themes/custom/macewan_library/images/icons/font-awesome-free-icons/phone-solid.svg');
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left center;
}

.region-footer-content-right .hours {
  padding-left: 26px;
  margin-bottom: 30px;
  background-image: url('/themes/custom/macewan_library/images/icons/font-awesome-free-icons/clock-regular.svg');
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left center;
}

.region-footer-content-right a {
  color: white;
}

.region-footer-content-right a:hover, .region-footer-content-right a:visited {
  color: white;
}

@media screen and (max-width: 1348px) {

  .region-footer-content-left {
    padding: 50px 50px 50px 75px;
  }

  .region-footer-content-right {
    padding: 50px 75px 50px 50px;
  }
}

@media screen and (max-width: 1178px) {

  .region-footer-content-left {
    padding: 50px 50px 50px 50px;
  }

  .region-footer-content-right {
    padding: 50px 50px 50px 50px;
  }
}

@media screen and (max-width: 958px) {

  #footer-flex-content {
    flex-wrap: wrap;
  }

  .region-footer-content-left {
    padding: 50px 50px 50px 25px;
  }

  .region-footer-content-right {
    padding: 50px 25px 50px 50px;
  }

  #footer-flex-content #land-acknowledgement {
    width: 66%;
  }

  #footer-flex-content #library-links {
    width: 24%;
  }

  #footer-flex-content #social-media-icons {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

}

@media screen and (max-width: 768px) {
  #footer-wrapper {
    flex-direction: column;
  }

  .region-footer-content-left, .region-footer-content-right {
    width: 100%;
    padding: 50px;
    text-align: center;
    max-width: calc(100% - 100px);
  }

  #footer-flex-content {
    flex-direction: column;
  }

  #footer-flex-content div {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  #block-macewan-library-footercontentright {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  
  #block-macewan-library-footercontentright .views-field:not(:first-child) {
    margin-left: 30px;
  }

  #footer-flex-content #library-links {
    width: 100%;
  }
}