@massds/mayflower-assets/css/layout.css

Mayflower Assets

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

#body-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex-grow: 1;
  width: 100%;
}

.ma__container {
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0px;
}
@media (min-width: 781px) {
  .ma__container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 911px) {
  .ma__container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.pre-content::after,
.main-content::after,
.post-content::after {
  clear: both;
  content: "";
  display: block;
}

.main-content {
  margin-bottom: 45px;
}
@media (min-width: 911px) {
  .main-content {
    margin-bottom: 60px;
  }
}

.ma__short-description.main-content {
  margin-bottom: 45px;
  margin-bottom: 20px;
}
.ma__short-description.main-content .ma__page-header__sub-title .ma__rich-text h4 {
  padding-bottom: 0;
}
@media (min-width: 481px) {
  .ma__short-description.main-content {
    margin-bottom: 60px;
    margin-bottom: 40px;
  }
}

.main-content--two {
  margin-right: auto;
  margin-left: auto;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 781px) {
  .main-content--two {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 911px) {
  .main-content--two {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.page-content {
  position: relative;
}
@media (min-width: 911px) {
  .main-content--two .page-content {
    float: left;
    padding-right: 85px;
    width: calc(100% - 295px);
  }
}
@media (min-width: 1201px) {
  .main-content--two .page-content {
    padding-right: 125px;
  }
}
.page-content > :last-child {
  margin-bottom: 0;
}
.main-content--two .page-content > *, .main-content--two .page-content .ma__rich-text__container {
  margin-top: 30px;
}
@media (min-width: 621px) {
  .main-content--two .page-content > *, .main-content--two .page-content .ma__rich-text__container {
    margin-top: 45px;
  }
}
.main-content--two .page-content > *:first-child, .main-content--two .page-content .ma__rich-text__container:first-child {
  margin-top: 0;
}
.main-content--full .page-content > * {
  margin-top: 40px;
}
@media (min-width: 621px) {
  .main-content--full .page-content > * {
    margin-top: 50px;
  }
}
@media (min-width: 781px) {
  .main-content--full .page-content > * {
    margin-top: 60px;
  }
}
@media (min-width: 911px) {
  .main-content--full .page-content > * {
    margin-top: 70px;
  }
}
.main-content--full .page-content > *:first-child {
  margin-top: 0;
}

.post-content > * {
  margin-top: 30px;
}
@media (min-width: 621px) {
  .post-content > * {
    margin-top: 45px;
  }
}
.post-content > *:first-child {
  margin-top: 0;
}

@media (min-width: 911px) {
  .sidebar {
    float: left;
    width: 295px;
  }
}
.sidebar > * {
  margin-top: 40px;
}
@media (min-width: 621px) {
  .sidebar > * {
    margin-top: 65px;
  }
}
.sidebar > *:first-child {
  margin-top: 0;
}

.page-content + .sidebar {
  padding-top: 40px;
}
.page-content + .sidebar > .sidebar {
  padding-top: 0;
}
@media (min-width: 621px) {
  .page-content + .sidebar {
    padding-top: 65px;
  }
}
@media (min-width: 911px) {
  .page-content + .sidebar {
    padding-top: 0;
  }
}

.main-content--reversed .page-content {
  padding-bottom: 0;
  padding-right: 0;
}
@media (min-width: 911px) {
  .main-content--reversed .page-content {
    float: left;
    padding-left: 20px;
    width: calc(100% - 370px);
  }
}
@media (min-width: 1201px) {
  .main-content--reversed .page-content {
    padding-left: 50px;
  }
}
.main-content--reversed .sidebar {
  padding-bottom: 45px;
}
@media (min-width: 911px) {
  .main-content--reversed .sidebar {
    float: left;
    padding-bottom: 0;
    width: 370px;
  }
}

.ma__section-content {
  position: relative;
  max-width: 820px;
}
@media (min-width: 911px) {
  .ma__section-content-wrapper--two .ma__section-content {
    padding-right: 85px;
    width: calc(100% - 295px);
  }
}
@media (min-width: 1201px) {
  .ma__section-content-wrapper--two .ma__section-content {
    padding-right: 125px;
  }
}