body { background: url("/images/background.webp"); background-size: cover; font-family: 'Lato', sans-serif; font-size: 16px; line-height: 24px; color: #373d3f; margin: 0; padding: 0; } .Container { max-width: 960px; margin: 0 auto; padding: 0 32px; } h1, h2, h3, h4, h5 { font-family: 'Calluna'; line-height: 150%; margin: 0; } h1 { font-size: 39.06px; } h2 { font-size: 31.25px; margin: 1em 0 0.2em 0; } h3 { font-size: 25px; margin: 0.6em 0 0.2em 0; } h4 { font-size: 20.83px; margin-bottom: 16px; } h5 { font-size: 16px; margin-bottom: 8px; } p + h5 { margin-top: 32px; } p { margin: 0; } p + p { margin-top: 16px; } abbr { border-bottom: 1px dotted #373d3f; } .meta-published { color: #999; margin-bottom: 1em; } .Button { padding: 8px 24px; background: #373d3f; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 12.8px; font-weight: bold; border-radius: 24px; line-height: 24px; display: inline-block; } .button-members { padding: 8px 24px; background: #05b; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 12.8px; font-weight: bold; border-radius: 0 0 24px 24px; line-height: 24px; display: inline-block; } .tac { text-align: center; } .mt192 { margin-top: 192px; } .mt64 { margin-top: 64px; } .mt32 { margin-top: 32px; } .mb64 { margin-bottom: 64px; } .Logo { display: block; margin: 6em auto 0; height: 25vh; } .logo-small { width: 3em; display: inline-block; margin: 0.4em; } menu { margin: 0; padding: 0; font-size: 0; } .LogoContainer, .Menu-Items { height: 30%; display: inline-block; font-size: 16px; vertical-align: middle; } .Menu-Items { float: right; } .Hero { height: calc(75vh - 6em); display: flex; align-items: center; flex-direction: column; justify-content: center; } .Services-Title { position: relative; padding-left: 64px; line-height: 48px; } .Services-Title:before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 48px; background-color: #b9daf6; border-radius: 50%; } .Services-Title--Cloud::before { background: #b9daf6 url(/images/icon-cloud.svg) center center no-repeat; } .Services-Title--Share::before { background: #b9daf6 url(/images/icon-share.svg) center center no-repeat; } .Services-Title--Email::before { background: #b9daf6 url(/images/icon-email.svg) center center no-repeat; } .Services-Title--List::before { background: #b9daf6 url(/images/icon-list.svg) center center no-repeat; } .Two-cols-One-row, .Two-cols-Two-rows { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 64px 0; } .Article-Title { margin-top: 64px; margin-bottom: 32px; } .footer { padding: 64px 0; } .footer ul, .footer li { margin: 0; padding: 0; list-style: none; } .footer .Two-cols-One-row { grid-row-gap: 0; } @media only screen and (min-width: 768px) { h1 { font-size: 48.33px; } .Two-cols-One-row { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 64px; grid-row-gap: 0; } .Two-cols-Two-rows { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 64px; grid-row-gap: 64px; } }