body header {
  margin-bottom: 70px;
  overflow: visible;
}


body section.homequicklinks {
  padding: 35px 20px 130px 20px !important;
  z-index: 1;

  div.Grid>ul {
    grid-template-columns: repeat(auto-fill, minmax(213px, 1fr));
    grid-gap: 20px;
    max-width: 679px;
    margin: 0 auto;

    &>li .Item {
      height: 213px;

      &>.ItemInner {
        background: linear-gradient(to top, rgba(11, 11, 48, 0.65) 0%, rgba(11, 11, 48, 0.5) 35%, rgba(11, 11, 48, 0) 70%);

        &>.Title {
          position: absolute;
          bottom: 19px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 19px;
          font-weight: 700;
        }

        &>.ItemIcon {
          place-items: center;
          background-color: rgba(var(--color3), 1);
          padding: var(--button-padding);
          font-size: var(--button-font-size);
          color: rgba(var(--button-color), 1);
          cursor: pointer;
          text-decoration: none;
          text-align: center;
          text-transform: var(--button-text-transform);
          border: var(--button-border);
          margin: var(--button-gap);
          border-radius: var(--button-border-radius);
          font-family: var(--button-font-family);
          font-weight: var(--button-font-weight);
          line-height: 1.5em;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 19px;
          width: max-content;
          top: auto;
          opacity: 0;
          transition: 0.4s;

          &:hover {
            background-color: rgb(var(--color2));
          }

          &::before {
            content: 'READ MORE';
          }
        }
      }

      &:hover {
        &>.ItemInner {
          background-color: rgba(var(--color1), 0.8);
          background-image: none;

          .Title {
            bottom: 95px;
          }

          .ItemIcon {
            opacity: 1;
          }
        }
      }
    }
  }

  &::before {
    content: '';
    position: absolute;
    right: 50%;
    top: -445px;
    width: 50vw;
    height: 500px;
    background-image: var(--mwatermarkhead);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0% 100%;
  }
}


/* WELCOME */
body section.mod_lefttabs_welcome {
  &>div.Welcome>div.WelcomeFlex {
    position: relative;

    .Title {
      line-height: 0.8em;
      margin-top: 40px;

      &>span {
        font-weight: 300;
      }
    }
  }

  &::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 460px;
    right: -256px;
    top: -172px;
    background-image: var(--moutline);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 0%;
  }
}

/* QUOTES */
section.homequotes.mod_smooth_magazine {
  &>div.Magazine {
    &>ul {
      padding-top: 100px;

      &>li {
        &>.Item {
          &.fadedhide {
            margin-top: 50px;
          }

          &>.ItemInner {
            &>.ItemContent .paracontent .buttonstyle {
              margin-top: 34px;
            }

            &>.Title {
              font-size: var(--fs2);
              color: rgb(var(--color1));
              margin-bottom: 22px;
            }
          }
        }
      }

      &::before {
        content: 'Why choose Maritime Academy Trust?';
        color: black;
        font-size: var(--fs3);
        position: absolute;
        top: 0;
        left: 0;
        width: max-content;
        padding-left: calc(35% + 5vw);
        font-weight: 200;
      }

    }
  }

  &::before {
    content: '';
    left: 0px;
    margin-left: -20px;
    width: 50vw;
    height: 500px;
    background-image: var(--mwatermark);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    display: block;
    position: sticky;
    top: calc(50vh - 320px);
  }
}


/* HOME BACKGROUND */
body div.homebackgroundcontainer {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    width: calc(100% - 40px);
    height: 100%;
    background-image: linear-gradient(180deg, rgba(var(--color4), 1) 0%, rgba(var(--color4), 0.7) 15%, rgba(var(--color4), 0) 40%);
    border-radius: 20px;
  }
}

/* SOCIAL LINKS AND FACEBOOK FEED */
body section.homesociallinks {
  padding-bottom: 18px !important;
  z-index: 1;

  &>.bloqTitle {
    text-align: center;
    position: relative;
    color: white;
    z-index: 1;
  }

  &>div.Icon {
    &>ul {
      justify-content: center;
      gap: 7px;

      &>li .Item {
        border-radius: 50%;
        background-color: transparent;
        border: 1px solid white;

        &>.ItemInner .ItemIcon {
          width: 32px;
          height: 32px;
          font-size: 16px;
        }

        &:hover {
          background-color: white;

          &>.ItemInner .ItemIcon {
            color: rgb(var(--color1));
          }
        }
      }
    }

    &::before {
      content: '';
      position: absolute;
      width: 680px;
      height: 420px;
      right: 35px;
      top: -164px;
      background-image: var(--mwhite);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 100% 0%;
      opacity: 0.1;
    }
  }

  &::before {
    content: '';
    position: absolute;
    left: 20px;
    top: -160px;
    width: calc(100% - 40px);
    height: 510px;
    background-color: rgb(var(--color1));
    border-radius: 20px 20px 0 0;
  }
}

body section.homeslider {
  padding-bottom: 200px !important;
  z-index: 1;

  &>div.Slider {
    &>.SliderInner ul .Item {
      &>.ItemInner {
        &>.ItemDate {
          font-size: 14px;
        }

        &>.Title {
          font-size: 18px;
          margin-top: 3px;
        }
      }

      &:hover {
        &>.ItemInner {
          &::before {
            background: rgba(var(--grey0), 0.4) !important;
          }
        }
      }
    }
  }

  &::before {
    content: '';
    left: 0px;
    width: 370px;
    height: 200px;
    background-image: var(--mwatermark);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    display: block;
    position: absolute;
    bottom: 0;
  }
}

body section.homeslider div.Slider .SliderInner ul [data-pos-showing="first"] .Item .ItemInner {
  padding: 10px 30px 30px 46px;
}

div.homewatermarks {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 900px;
    height: 420px;
    left: -456px;
    top: -620px;
    background-image: var(--moutline2);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 0%;
  }

  &::after {
    content: '';
    position: absolute;
    width: calc(100% - 40px);
    height: 500px;
    bottom: 0;
    left: 20px;
    background-color: rgb(var(--color4));
  }
}

@media only screen and (max-width:800px){
  div.homewatermarks {
    &::after{
      width: 100%;
      left: 0;
    }
  }
    
  body section.homesociallinks {
    &::before{
      width: 100%;
      left: 0;
    }
  }
  section.homeschools::before{
    display: none;
  }
  body div.homebackgroundcontainer{
    &::before{
      width: 100%;
      left: 0;
    }
  }
  section.homequotes.mod_smooth_magazine {
    padding-top: 50px;
    & > div.Magazine {
        & > ul{
          padding: 80px 10px 0 10px;
            & > li .Item .ItemInner .Title{
              font-size: 18px;
            }
            &::before{
              padding-right: 10px;
              line-height: 32px;
              width: fit-content;
              font-size: 17px;
            }
          }}
        &::before{
          display: none;
        }
        }
}