| @import "variables"; |
| @import "reset"; |
| |
| body { |
| margin-top: $header-height; |
| } |
| |
| html, body { |
| position:relative; |
| color: $dark; |
| font-family: 'Open Sans', Arial, Helvetica, sans-serif; |
| font-weight: 400; |
| font-size: 15px; |
| word-wrap:break-word; |
| |
| h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { |
| font-weight: 600; |
| line-height: 140%; |
| margin-bottom: 14px; |
| margin-top: 28px; |
| } |
| |
| h1 { |
| font-size: 2.7em; |
| } |
| |
| h2 { |
| font-size: 2.2em; |
| } |
| |
| h3 { |
| font-size: 1.7em; |
| } |
| |
| h4 { |
| font-size: 1.4em; |
| } |
| |
| h5 { |
| font-weight: bold; |
| } |
| |
| h6 { |
| font-weight: bold; |
| color: $light-text; |
| } |
| |
| p { |
| line-height: 170%; |
| margin-bottom: 14px; |
| margin-top: 14px; |
| |
| &:first-child { |
| margin-top: 28px; |
| } |
| } |
| |
| strong { |
| font-weight: 700; |
| } |
| |
| hr { |
| margin: 30px 0 30px 0; |
| } |
| |
| a { |
| cursor: pointer; |
| } |
| |
| p, table, ul, li { |
| a { |
| color: $link; |
| cursor: pointer; |
| font-weight: 600; |
| |
| &:hover { |
| text-decoration: underline; |
| } |
| } |
| } |
| |
| ul { |
| margin-top: 14px; |
| margin-bottom: 14px; |
| line-height: 170%; |
| |
| li { |
| margin-left: 18px; |
| list-style-type: disc; |
| } |
| } |
| |
| ol { |
| margin-top: 14px; |
| margin-bottom: 14px; |
| line-height: 170%; |
| |
| li { |
| margin-left: 22px; |
| list-style-type: decimal; |
| } |
| } |
| |
| table { |
| width: 100%; |
| table-layout: fixed; |
| margin-top: 14px; |
| margin-bottom: 14px; |
| |
| |
| th { |
| font-weight: 700; |
| } |
| |
| th, td { |
| padding: 5px; |
| } |
| } |
| |
| blockquote { |
| font-size: 14px; |
| font-style: italic; |
| color: #777; |
| } |
| } |
| |
| .druid-header { |
| padding: 34px 0 44px; |
| margin-bottom: 24px; |
| color: #1c1c26; |
| text-align: center; |
| background-image: url('/img/watermark-light.png'); |
| background-size: 330px 330px; |
| background-repeat: no-repeat; |
| background-position: 18% -30px; |
| background-color: $light-bkg; |
| overflow: hidden; |
| |
| h1 { |
| margin-top: 14px; |
| font-size: 2.8em; |
| } |
| |
| h4 { |
| font-weight: 400; |
| font-size: 15px; |
| margin-top: 0; |
| margin-bottom: 0; |
| |
| a { |
| color: $link; |
| font-weight: 600; |
| |
| .fa { |
| margin-right: 4px; |
| } |
| |
| &:hover { |
| text-decoration: underline; |
| } |
| } |
| } |
| } |
| |
| .text-indent { |
| padding-left: 50px; |
| } |
| |
| .text-indent-2 { |
| padding-left: 100px; |
| } |
| |
| .text-indent-p p { |
| padding-left: 50px; |
| } |
| |
| .image-large { |
| text-align: center; |
| margin-top: 28px; |
| margin-bottom: 28px; |
| |
| img { |
| width: 100%; |
| max-width: 660px; |
| } |
| } |
| |
| .large-button { |
| display: inline-block; |
| padding: 10px 22px; |
| color: white; |
| background: $link; |
| border-radius: 2px; |
| font-size: 15px; |
| margin-top: 14px; |
| margin-bottom: 14px; |
| |
| .fa { |
| margin-right: 3px; |
| } |
| |
| &:hover { |
| background: darken($link, 10); |
| text-decoration: none; |
| } |
| } |
| |
| .fancy-list { |
| margin-top: 22px; |
| margin-bottom: 22px; |
| |
| li { |
| list-style: none; |
| font-weight: 600; |
| margin-left: 0; |
| padding-left: 30px; |
| margin-bottom: 8px; |
| |
| &:before { |
| content: ""; |
| position: absolute; |
| top: 5px; |
| left: 0; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| background: #9caeff; |
| } |
| } |
| } |
| |
| .features { |
| margin-bottom: 28px; |
| margin-top: 38px; |
| |
| .feature { |
| padding-left: 74px; |
| margin-bottom: 34px; |
| |
| &:nth-child(3n-2) { |
| .fa { |
| //color: $medium-1; |
| background: $light-1; |
| } |
| } |
| |
| &:nth-child(3n-1) { |
| .fa { |
| //color: $medium-2; |
| background: $light-2; |
| } |
| } |
| |
| &:nth-child(3n) { |
| .fa { |
| //color: $medium-3; |
| background: $light-3; |
| } |
| } |
| |
| .fa { |
| top: 0; |
| left: 0; |
| position: absolute; |
| width: 54px; |
| height: 54px; |
| line-height: 54px; |
| border-radius: 40px; |
| text-align: center; |
| font-size: 20px; |
| background: $light-1; |
| color: $dark; |
| } |
| |
| p { |
| margin-top: 0; |
| } |
| |
| h5 { |
| margin-bottom: 0; |
| font-size: 1.2em; |
| } |
| } |
| } |
| |
| .zigzag-features { |
| margin-bottom: 100px; |
| |
| .zigzag-feature { |
| margin-top: 100px; |
| |
| .fa { |
| top: 0; |
| position: absolute; |
| width: 220px; |
| height: 220px; |
| line-height: 220px; |
| border-radius: 50%; |
| text-align: center; |
| font-size: 70px; |
| background: $light-1; |
| color: $medium-1; |
| } |
| |
| &:nth-child(2n-1) { |
| padding-right: 300px; |
| |
| .fa { |
| right: 0; |
| } |
| } |
| |
| &:nth-child(2n) { |
| padding-left: 300px; |
| |
| .fa { |
| left: 0; |
| } |
| } |
| |
| &:nth-child(3n-2) { |
| .fa { |
| background: $light-1; |
| color: $medium-1; |
| } |
| } |
| |
| &:nth-child(3n-1) { |
| .fa { |
| background: $light-2; |
| color: $medium-2; |
| } |
| } |
| |
| &:nth-child(3n) { |
| .fa { |
| background: $light-3; |
| color: $medium-3; |
| } |
| } |
| } |
| |
| @media (max-width: 840px) { |
| .zigzag-feature { |
| .fa { |
| position: relative; |
| display: block; |
| margin-left: auto; |
| margin-right: auto; |
| margin-bottom: 40px; |
| } |
| |
| &:nth-child(2n-1) { |
| padding-right: 0; |
| } |
| |
| &:nth-child(2n) { |
| padding-left: 0; |
| } |
| } |
| } |
| |
| @media (max-width: 440px) { |
| margin-bottom: 70px; |
| |
| .zigzag-feature { |
| margin-top: 70px; |
| |
| .fa { |
| width: 180px; |
| height: 180px; |
| line-height: 180px; |
| font-size: 60px; |
| } |
| } |
| } |
| } |