/* =========================================================================================== Homepage ============================================================================================== */ .container { margin-right: auto; margin-left: auto; } @media (min-width: 1200px) { .container { width: 1170px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .container--inner { width: 80%; margin: 0 auto; } .Homepage { padding-top: 60px !important; background-color: var(--light); border-radius: 0; border: none; color: var(--dark); overflow: hidden; padding-bottom: 0; margin-bottom: 0; @include kill-box-shadow; } .HomepageTitle { h2 { width: 80%; font-size: 30px; margin: 20px auto; text-align: center; } } .HomepageImage { img { display: block; max-width: 80%; margin: 0 auto; height: auto; } } .HomepageButtons { padding: 20px 0; background-color: var(--sidebar-hover); text-align: center; .Button--hero { padding: 20px 30px; border-radius: 0; text-shadow: none; opacity: 0.8; margin: 0 10px; text-transform: uppercase; border: 5px solid var(--dark); font-family: var(--font-family-heading); font-weight: 700; @include kill-background-image; @include kill-box-shadow; @media (max-width: 768px) { display: block; margin-bottom: 10px; } &:hover { opacity: 1; } &.Button--secondary { background-color: var(--sidebar-hover); color: var(--dark); } &.Button--primary { background-color: var(--dark); color: var(--sidebar-background); } } } .HomepageContent { background-color: white; padding: 40px 0; @media (min-width: 769px) { .row { margin: 0 -15px; } .col-third { width: 33.333333%; float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } } ul, ol { li { list-style: none; padding-bottom: 0.5em; &::before { content: ''; width: 0; height: 0; border: 3px solid transparent; border-left: 3px solid var(--light); float: left; display: block; margin: 6px 6px 6px -12px; } } } .lead { font-family: var(--font-family-heading); font-weight: 300; font-size: 16px; margin-bottom: 20px; line-height: 1.4; } @media (min-width: 768px) { padding: 40px 20px; .lead { font-size: 21px; } } } .HomepageFooter { background-color: var(--dark); border-radius: 0; color: var(--light); border: none; @include kill-box-shadow; @media (max-width: 768px) { padding: 0 20px; text-align: center; .HomepageFooter__links { padding-left: 0; list-style-type: none; } } @media (min-width: 769px) { .HomepageFooter__links { float: left; } .HomepageFooter__twitter { float: right; } } &__links { margin: 40px 0; li { a { line-height: 32px; font-size: 16px; font-family: var(--font-family-heading); font-weight: 700; &:hover { color: var(--light); text-decoration: underline; } } } } &__twitter { margin: 40px 0; } .Twitter { margin-bottom: 20px; } }