#hero-image {
  position: relative;
  height: 240px;
  z-index: 101;
  background: rgb(2,2,2);
  background: linear-gradient(0deg, rgba(2,2,2,0.6) 0%, rgba(255,255,255,0) 100%), url('/themes/custom/macewan_library/images/banners/Banner_Homepage.jpg');
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-position: 50% 58%;
  background-size: cover;
  color: white;
  font-size: 50px;
  padding: 20px;
  display: flex;
  align-items: flex-end;
}

#hero-text {
  width: 100%;
  max-width: 1245px;
  margin-left: auto;
  margin-right: auto;
}

#hero-macewan {
  font-family: var(--font-serif);
  font-size: 26px;
}

#hero-haar {
  margin: 10px 0 0 0;
  padding: 0;
  height: 70px;
  display: inline-block;
}

#hero-haar h1 {
  color: white;
  font-weight: 600;
  font-size: 60px;
  margin: 0;
  line-height: 70px;
}

.region-fp-first, .region-fp-second, .region-fp-third, .region-fp-fourth {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.slfp-hide {
  display: none;
}

.layout-container {
  background: linear-gradient(to bottom,  #e5e2e5 0%,#a99ea9 100%);
}

main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1246px;
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}

.b-box {
  padding: 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: var(--bg-gray);
  -webkit-box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.3);
  box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.3);
}

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

main {
  width: calc(100% - 100px);
  margin-left: 50px;
  margin-right: 50px;
}

.region-fp-first, .region-fp-second, .region-fp-third, .region-fp-fourth {
  width: calc(100% - 150px);
  padding-left: 75px;
  padding-right: 75px;
}

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

.region-fp-first, .region-fp-second, .region-fp-third, .region-fp-fourth {
  width: calc(100% - 100px);
  padding-left: 50px;
  padding-right: 50px;
}


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

.region-fp-first, .region-fp-second, .region-fp-third, .region-fp-fourth {
  width: calc(100% - 50px);
  padding-left: 25px;
  padding-right: 25px;
}

#third-row {
  flex-direction: column;
}

}

@media screen and (max-width: 768px) {
  
main {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
}

  #hero-image {
    height: 170px;
  }

  #hero-macewan {
    font-size: 19px;
  }

  #hero-haar {
    font-size: 30px;
  }
}

@media screen and (max-width: 565px) {
main {
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
}