/* =================================================================== * Keep It Simple Main Stylesheet * Template Ver. 3.0.0 * 12-14-2019 * ------------------------------------------------------------------ * * TOC: * # custom block grid STACK breakpoints * # base style overrides * ## links * # typography & general theme styles * ## lists * ## responsive video container * ## floated image * ## tables * ## spacing * # preloader * # forms * ## style placeholder text * ## change autocomplete styles in chrome * # buttons * # additional components * ## additional typo styles * ## alert box * ## pagination * # common and reusable styles * # site header * ## header-logo * ## main navigation * ## mobile menu toggle * ## main navigation on large screens * # content * # sidebar * # footer * ## footer social * ## photostream * ## copyright * ## go top * # blog styles and blog components * ## entry meta * ## entry tags * ## entry post nav * ## post-list-nav * ## comments * * =================================================================== */ /* =================================================================== * # custom block grid STACK breakpoints * * ------------------------------------------------------------------- */ @media screen and (max-width:1000px) { .block-1000-full>.column { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; } } @media screen and (max-width:900px) { .block-900-full>.column { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; } } /* =================================================================== * # base style overrides * * ------------------------------------------------------------------- */ html { font-size: 10px; } @media screen and (max-width:400px) { html { font-size: 9.375px; } } html, body { height: 100%; } body { background: #f5f5f5; font-family: "Merriweather", serif; font-size: 1.6rem; font-style: normal; font-weight: normal; line-height: 2; color: #3e3e3e; margin: 0; padding: 0; position: relative; } /* ------------------------------------------------------------------- * ## links * ------------------------------------------------------------------- */ a { color: #84be5b; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover, a:focus, a:active { color: #656986; } a:hover, a:active { outline: 0; } /* =================================================================== * # typography & general theme styles * * ------------------------------------------------------------------- */ /* type scale - ratio 1:125(major second), base: 16px * ------------------------------------------------------------------- * 3.653em (58.45px) * 3.247em (51.96px) * 2.887em (46.18px) * 2.566em (41.05px) * 2.281em (36.49px) * 2.027em (32.44px) * 1.802em (28.83px) * 1.602em (25.63px) * 1.424em (22.78px) * 1.266em (20.25px) * 1.125em (18.00px) * 1em (16.00px) * 0.889em (14.22px) * 0.79em (12.64px) * 0.702em (11.24px) * -------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Open Sans", sans-serif; font-weight: 600; font-style: normal; color: #272727; -webkit-font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { margin-top: 6rem; margin-bottom: 1.6rem; } @media screen and (max-width:600px) { h1, .h1, h2, .h2, h3, .h3, h4, .h4 { margin-top: 5.6rem; } } h5, .h5, h6, .h6 { margin-top: 4rem; margin-bottom: 1.2rem; } @media screen and (max-width:600px) { h5, .h5, h6, .h6 { margin-top: 3.6rem; margin-bottom: 0.8rem; } } h1, .h1 { font-size: 3.649rem; line-height: 1.206; letter-spacing: -.05rem; } @media screen and (max-width:600px) { h1, .h1 { font-size: 3.244rem; } } h2, .h2 { font-size: 2.883rem; line-height: 1.249; } h3, .h3 { font-size: 2.563rem; line-height: 1.249; } h4, .h4 { font-size: 2.278rem; line-height: 1.229; } h5, .h5 { font-size: 2.025rem; line-height: 1.383; } h6, .h6 { font-weight: 700; font-size: 1.422rem; line-height: 1.406; text-transform: uppercase; letter-spacing: .2rem; } p img { margin: 0; } p.lead { font-family: "Merriweather", serif; font-weight: 300; font-size: 2.025rem; line-height: 1.975; color: #272727; } @media screen and (max-width:600px) { p.lead { font-size: 1.8rem; } } em, i, strong, b { font-size: inherit; line-height: inherit; } em, i { font-family: "Merriweather", serif; font-style: italic; } strong, b { font-family: "Merriweather", serif; font-weight: 700; } small { font-size: 1.264rem; font-weight: 500; line-height: 1.582; line-height: inherit; } blockquote { margin: 4rem 0; padding: 4rem 4rem; border-left: 4px solid #272727; position: relative; } @media screen and (max-width:600px) { blockquote { padding: 3.2rem 3.2rem; } } @media screen and (max-width:400px) { blockquote { padding: 2.8rem 2.8rem; } } blockquote p { font-family: "Merriweather", serif; font-weight: 400; padding: 0; font-size: 2.278rem; line-height: 1.756; color: #272727; } @media screen and (max-width:600px) { blockquote p { font-size: 2.025rem; } } blockquote cite { display: block; font-family: "Open Sans", sans-serif; font-weight: 500; font-size: 1.264rem; line-height: 1.266; font-style: normal; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite, blockquote cite a, blockquote cite a:visited { color: #3e3e3e; border: none; } abbr { font-family: "Merriweather", serif; font-weight: 600; font-variant: small-caps; text-transform: lowercase; letter-spacing: .2rem; color: #272727; } var, kbd, samp, code, pre { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; } pre { padding: 2.4rem 3.2rem 3.2rem; background: #efefef; overflow-x: auto; } code { font-size: 1.4rem; margin: 0 .2rem; padding: .4rem .8rem; white-space: nowrap; background: #efefef; border: 1px solid #d3d3d3; color: #272727; border-radius: 3px; } pre>code { display: block; white-space: pre; line-height: 2; padding: 0; margin: 0; } pre.prettyprint>code { border: none; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; text-decoration: none; } mark { background: #fff099; color: #000000; } hr { border: solid #efefef; border-width: 1px 0 0; clear: both; margin: 8rem 0 9.6rem; height: 0; } /* ------------------------------------------------------------------- * ## lists * ------------------------------------------------------------------- */ ol { list-style: decimal; } ul { list-style: disc; } li { display: list-item; } ol, ul { margin-left: 1.6rem; } ul li { padding-left: .4rem; } ul ul, ul ol, ol ol, ol ul { margin: .8rem 0 .8rem 1.6rem; } ul.disc li { display: list-item; list-style: none; padding: 0 0 0 .8rem; position: relative; } ul.disc li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #84be5b; position: absolute; left: -16px; top: 11px; vertical-align: middle; } dt { margin: 0; color: #84be5b; } dd { margin: 0 0 0 2rem; } /* ------------------------------------------------------------------- * ## responsive video container * ------------------------------------------------------------------- */ .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ------------------------------------------------------------------- * ## floated image * ------------------------------------------------------------------- */ img.h-pull-right { margin: 1.2rem 0 1.2rem 2.8rem; } img.h-pull-left { margin: 1.2rem 2.8rem 1.2rem 0; } /* ------------------------------------------------------------------- * ## tables * ------------------------------------------------------------------- */ table { border-width: 0; width: 100%; max-width: 100%; font-family: "Merriweather", serif; border-collapse: collapse; } th, td { padding: 1.5rem 3.2rem; text-align: left; border-bottom: 1px solid #efefef; } th { color: #000000; font-family: "Open Sans", sans-serif; font-weight: 600; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------- * ## spacing * ------------------------------------------------------------------- */ button, .btn { margin-bottom: 1.6rem; } fieldset { margin-bottom: 1.6rem; } input, textarea, select, pre, blockquote, figure, table, p, ul, ol, dl, form, .video-container, .ss-custom-select { margin-bottom: 3.2rem; } /* =================================================================== * # preloader * * ------------------------------------------------------------------- */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; z-index: 500; height: 100vh; width: 100%; overflow: hidden; } .no-js #preloader, .oldie #preloader { display: none; } #loader { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; padding: 0; display: inline-block; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } #loader>div { content: ""; background: #000000; width: 6px; height: 6px; position: absolute; top: 0; left: 0; border-radius: 50%; } #loader>div:nth-of-type(1) { left: 15px; } #loader>div:nth-of-type(3) { left: -15px; } /* dots jump */ .dots-jump>div { -webkit-animation: dots-jump 1.2s infinite ease; animation: dots-jump 1.2s infinite ease; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .dots-jump>div:nth-of-type(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .dots-jump>div:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes dots-jump { 0% { top: 0; } 40% { top: -6px; } 80% { top: 0; } } @keyframes dots-jump { 0% { top: 0; } 40% { top: -6px; } 80% { top: 0; } } /* dots fade */ .dots-fade>div { -webkit-animation: dots-fade 1.6s infinite ease; animation: dots-fade 1.6s infinite ease; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .dots-fade>div:nth-of-type(1) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .dots-fade>div:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes dots-fade { 0% { opacity: 1; } 40% { opacity: 0.2; } 80% { opacity: 1; } } @keyframes dots-fade { 0% { opacity: 1; } 40% { opacity: 0.2; } 80% { opacity: 1; } } /* dots pulse */ .dots-pulse>div { -webkit-animation: dots-pulse 1.2s infinite ease; animation: dots-pulse 1.2s infinite ease; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .dots-pulse>div:nth-of-type(1) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .dots-pulse>div:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes dots-pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(1.1); transform: scale(1.3); } 80% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes dots-pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(1.1); transform: scale(1.3); } 80% { -webkit-transform: scale(1); transform: scale(1); } } /* =================================================================== * # forms * * ------------------------------------------------------------------- */ fieldset { border: none; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { display: block; height: 6rem; padding: 1.3rem 23px 1.5rem; border: 0; outline: none; color: #3e3e3e; font-family: "Open Sans", sans-serif; font-size: 1.422rem; line-height: 3.2rem; max-width: 100%; background-color: #efefef; border: 1px solid transparent; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 4px; } .ss-custom-select { position: relative; padding: 0; } .ss-custom-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; margin: 0; line-height: 3rem; vertical-align: middle; } .ss-custom-select select option { padding-left: 2rem; padding-right: 2rem; } .ss-custom-select select::-ms-expand { display: none; } .ss-custom-select::after { border-bottom: 2px solid #000000; border-right: 2px solid #000000; content: ''; display: block; height: 8px; width: 8px; margin-top: -7px; pointer-events: none; position: absolute; right: 2.4rem; top: 50%; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } textarea { min-height: 25.6rem; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { color: #000000; -webkit-box-shadow: 0 0 5px #6ba441; box-shadow: 0 0 5px #6ba441; border: 1px solid #6ba441; } label, legend { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.714; margin-bottom: .8rem; color: #272727; display: block; } input[type="checkbox"], input[type="radio"] { display: inline; } label>.label-text { display: inline-block; margin-left: 1rem; font-family: "Open Sans", sans-serif; line-height: inherit; } label>input[type="checkbox"], label>input[type="radio"] { margin: 0; position: relative; top: .2rem; } /* ------------------------------------------------------------------- * ## style placeholder text * ------------------------------------------------------------------- */ ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #8c8c8c; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #8c8c8c; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #8c8c8c; } ::placeholder { /* Most modern browsers support this now. */ color: #8c8c8c; } .placeholder { color: #8c8c8c !important; } /* ------------------------------------------------------------------- * ## change autocomplete styles in chrome * ------------------------------------------------------------------- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: #9fcc7f; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } /* =================================================================== * # buttons * * ------------------------------------------------------------------- */ .btn, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 1.264rem; text-transform: uppercase; letter-spacing: .5rem; height: 6rem; line-height: 5.6rem; padding: 0 3.2rem; margin: 0 .4rem 1.6rem 0; color: #000000; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; -webkit-transition: all .3s; transition: all .3s; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; border-radius: 4px; background-color: #d3d3d3; border: 0.2rem solid #d3d3d3; } .btn:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .btn:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { background-color: #000000; border-color: #000000; color: #ffffff; outline: 0; } /* button primary * ------------------------------------------------- */ .btn.btn--primary, button.btn--primary, input[type="submit"].btn--primary, input[type="reset"].btn--primary, input[type="button"].btn--primary { background: #84be5b; border-color: #84be5b; color: #ffffff; } .btn.btn--primary:hover, button.btn--primary:hover, input[type="submit"].btn--primary:hover, input[type="reset"].btn--primary:hover, input[type="button"].btn--primary:hover, .btn.btn--primary:focus, button.btn--primary:focus, input[type="submit"].btn--primary:focus, input[type="reset"].btn--primary:focus, input[type="button"].btn--primary:focus { background: #000000; border-color: #000000; } /* button modifiers * ------------------------------------------------- */ .btn.h-full-width, button.h-full-width { width: 100%; margin-right: 0; } .btn--small, button.btn--small { height: 5.6rem !important; line-height: 5.2rem !important; } .btn--medium, button.btn--medium { height: 6.4rem !important; line-height: 6rem !important; } .btn--large, button.btn--large { height: 6.8rem !important; line-height: 6.4rem !important; } .btn--stroke, button.btn--stroke { background: transparent !important; border: 0.2rem solid #000000; color: #000000; } .btn--stroke:hover, button.btn--stroke:hover { background: #000000 !important; border: 0.2rem solid #000000; color: #ffffff; } .btn--pill, button.btn--pill { padding-left: 3.2rem !important; padding-right: 3.2rem !important; border-radius: 1000px !important; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* =================================================================== * # additional components * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * ## additional typo styles * ------------------------------------------------------------------- */ .drop-cap:first-letter { float: left; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 6em; line-height: 1; padding: 0 0.125em 0 0; text-transform: uppercase; background: transparent; color: #000000; } /* line definition style * ----------------------------------------------- */ .lining dt, .lining dd { display: inline; margin: 0; } .lining dt+dt:before, .lining dd+dt:before { content: "\A"; white-space: pre; } .lining dd+dd:before { content: ", "; } .lining dd+dd:before { content: ", "; } .lining dd:before { content: ": "; margin-left: -0.2em; } /* dictionary definition style * ----------------------------------------------- */ .dictionary-style dt { display: inline; counter-reset: definitions; } .dictionary-style dt+dt:before { content: ", "; margin-left: -0.2em; } .dictionary-style dd { display: block; counter-increment: definitions; } .dictionary-style dd:before { content: counter(definitions, decimal) ". "; } /** * Pull Quotes * ----------- * markup: * * * * --------------------------------------------------------------------- */ .pull-quote { position: relative; padding: 2.4rem 0; } .pull-quote blockquote { background-color: #efefef; border: none; margin: 0; padding-top: 9.6rem; position: relative; } .pull-quote blockquote:before { content: ""; display: block; height: 3.2rem; width: 3.2rem; background-repeat: no-repeat; background: center center; background-size: contain; background-image: url(../images/icons/icon-quote.svg); position: absolute; top: 4rem; left: 4rem; } /** * Stats Tab * --------- * markup: * * * * Extend this object into your markup. * * --------------------------------------------------------------------- */ .stats-tabs { padding: 0; margin: 3.2rem 0; } .stats-tabs li { display: inline-block; margin: 0 1.6rem 3.2rem 0; padding: 0 1.5rem 0 0; border-right: 1px solid #e0e0e0; } .stats-tabs li:last-child { margin: 0; padding: 0; border: none; } .stats-tabs li a { display: inline-block; font-size: 2.5rem; font-family: "Open Sans", sans-serif; font-weight: 700; line-height: 1.92; border: none; color: #000000; } .stats-tabs li a:hover { color: #84be5b; } .stats-tabs li a em { display: block; margin: .4rem 0 0 0; font-family: "Open Sans", sans-serif; font-size: 1.5rem; line-height: 1.6rem; font-weight: normal; font-style: normal; color: #a7a7a7; } /* ------------------------------------------------------------------- * ## alert box * ------------------------------------------------------------------- */ .alert-box { padding: 2.4rem 4rem 2.4rem 3.2rem; position: relative; margin-bottom: 3.2rem; border-radius: 3px; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.422rem; line-height: 1.688; } .alert-box__close { position: absolute; display: block; right: 1.6rem; top: 1.6rem; cursor: pointer; width: 12px; height: 12px; } .alert-box__close::before, .alert-box__close::after { content: ''; position: absolute; display: inline-block; width: 2px; height: 12px; top: 0; left: 5px; } .alert-box__close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .alert-box__close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .alert-box--error { background-color: #ffd1d2; color: #dd4043; } .alert-box--error .alert-box__close::before, .alert-box--error .alert-box__close::after { background-color: #dd4043; } .alert-box--success { background-color: #c8e675; color: #637533; } .alert-box--success .alert-box__close::before, .alert-box--success .alert-box__close::after { background-color: #637533; } .alert-box--info { background-color: #d5ebfb; color: #387fb2; } .alert-box--info .alert-box__close::before, .alert-box--info .alert-box__close::after { background-color: #387fb2; } .alert-box--notice { background-color: #fff099; color: #827217; } .alert-box--notice .alert-box__close::before, .alert-box--notice .alert-box__close::after { background-color: #827217; } /* ------------------------------------------------------------------- * ## pagination * ------------------------------------------------------------------- */ .pgn { margin: 3.2rem auto 3.2rem; text-align: center; } .pgn ul { display: inline-block; list-style: none; margin-left: 0; position: relative; padding: 0 6rem; } .pgn ul li { display: inline-block; margin: 0; padding: 0; } .pgn__num { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 1.7rem; line-height: 3.2rem; display: inline-block; padding: .2rem 1.2rem; height: 3.6rem; margin: .2rem .2rem; color: #272727; border-radius: 4px; -webkit-transition: all, .3s, ease-in-out; transition: all, .3s, ease-in-out; } .pgn__num:hover { background: #efefef; color: #000000; } .pgn .current, .pgn .current:hover { background-color: #272727; color: #ffffff; } .pgn .inactive, .pgn .inactive:hover { opacity: 0.4; cursor: default; } .pgn__prev, .pgn__next { display: block; background-repeat: no-repeat; background-size: 16px 16px; background-position: center; height: 3.6rem; width: 4.8rem; line-height: 2rem; border-radius: 4px; padding: 0; margin: 0; opacity: 1; font: 0/0 a; text-shadow: none; color: transparent; -webkit-transition: all, .2s, ease-in-out; transition: all, .2s, ease-in-out; position: absolute; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .pgn__prev:hover, .pgn__next:hover { background-color: #efefef; } .pgn__prev { background-image: url("../images/icons/icon-arrow-left.svg"); left: 0; } .pgn__next { background-image: url("../images/icons/icon-arrow-right.svg"); right: 0; } .pgn__prev.inactive, .pgn__next.inactive { opacity: 0.4; cursor: default; } .pgn__prev.inactive:hover, .pgn__next.inactive:hover { background-color: transparent; } /* ------------------------------------------------------------------- * responsive: * pagination * ------------------------------------------------------------------- */ @media screen and (max-width:600px) { .pgn ul { padding: 0 5.2rem; } } /* =================================================================== * # common and reusable styles * * ------------------------------------------------------------------- */ .wide { max-width: 1400px; } .wider { max-width: 1600px; } .narrow { max-width: 1000px; } /* =================================================================== * # site header * * ------------------------------------------------------------------- */ .s-header { width: 100%; background-color: #ffffff; position: relative; } .s-header::before { z-index: 101; content: ""; display: block; width: 100%; height: .6rem; background-color: #9fcc7f; position: absolute; top: 0; left: 0; } .s-header__content { background-color: #ffffff; background-image: url(../images/header-content-bg_@2x.png); background-size: 361px 256px; background-repeat: no-repeat; background-position: right top; min-height: 30rem; padding-top: 12rem; padding-bottom: 8rem; border-bottom: 1px dashed #efefef; position: relative; } /* ------------------------------------------------------------------- * ## header-logo * ------------------------------------------------------------------- */ .s-header__logotext { margin: 0; padding: 0; width: 100%; font-family: Georgia, serif; font-weight: 400; font-size: 7.2rem; line-height: 1; letter-spacing: -.45rem; } .s-header__logotext a { color: #9fcc7f; } .s-header__tagline { font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.8rem; line-height: 2rem; margin: 0; padding: 0; color: #c3c3c3; position: relative; top: .8rem; left: .8rem; } /* ------------------------------------------------------------------- * ## main navigation * ------------------------------------------------------------------- */ .s-header__nav-wrap, .s-header__nav { margin: 0; padding: 0; } /* nav-wrap */ .s-header__nav-wrap { z-index: 1; width: 100%; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .2rem; background-color: #F5F4F3; border-bottom: 1px solid #EAE8E8; position: absolute; top: .6rem; left: 0; } .s-header__nav { list-style: none; min-height: 6rem; width: auto; margin-left: 20px; position: relative; } .s-header__nav li { display: inline-block; height: 6rem; margin: 0; padding-top: 1.2rem; padding-left: 0; position: relative; } .s-header__nav li.has-children>a { padding-right: 2.6rem; position: relative; } .s-header__nav li.has-children>a::after { border-bottom: 1px solid #6ba441; border-right: 1px solid #6ba441; content: ''; display: block; height: 5px; width: 5px; margin-top: -3px; pointer-events: none; position: absolute; right: 1.6rem; top: 50%; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .s-header__nav>li { float: left; } .s-header__nav li a { display: block; padding: 0 1.4rem; line-height: calc(6rem - 1.2rem); text-decoration: none; color: #666666; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .s-header__nav li a:hover, .s-header__nav li a:focus { color: #000000; } .s-header__nav li a:active { background-color: transparent !important; } .s-header__nav li.current>a { background-color: #ffffff; border-right: 1px solid #EAE8E8; border-top: 1px solid #EAE8E8; border-left: 1px solid #EAE8E8; border-radius: 3px 3px 0 0; } /* sub menu */ .s-header__nav ul { min-width: 100%; margin: 0; padding: 1.2rem 0; background: #F4F3F3; border: 1px solid #EAE8E8; border-top: none; border-radius: 0 0 3px 3px; opacity: 0; visibility: hidden; -webkit-transition: all .25s ease .1s; transition: all .25s ease .1s; position: absolute; top: calc(100% + 2px); left: 0px; } .s-header__nav ul li { padding: 0; display: block; text-align: left; -webkit-transition: height .25s ease .1s; transition: height .25s ease .1s; height: 0; overflow: hidden; } .s-header__nav ul li a { padding: 0 2rem; margin: 0; white-space: nowrap; font-size: 13px; font-family: "Open Sans", sans-serif; font-weight: 400; line-height: 4rem; text-transform: none; letter-spacing: 0; } /* on hover */ .s-header__nav li:hover>ul { opacity: 1; visibility: visible; } .s-header__nav li:hover>ul li { height: 4rem; overflow: visible; } /* ------------------------------------------------------------------- * ## mobile menu toggle * ------------------------------------------------------------------- */ .header-menu-toggle { z-index: 101; display: none; background-color: #9fcc7f; height: 4.8rem; width: 5.2rem; line-height: 4.8rem; font-family: "Open Sans", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .2rem; color: #9fcc7f; outline: none; -webkit-transition: all .3s; transition: all .3s; position: absolute; right: 3.2rem; top: .6rem; } .header-menu-toggle:hover, .header-menu-toggle:focus { color: #ffffff; } .header-menu-toggle span { display: block; width: 2rem; height: 2px; background-color: #ffffff; -webkit-transition: all .5s; transition: all .5s; font: 0/0 a; text-shadow: none; color: transparent; margin-top: -1px; position: absolute; top: 50%; left: 1.6rem; right: auto; bottom: auto; } .header-menu-toggle span::before, .header-menu-toggle span::after { content: ''; width: 100%; height: 100%; background-color: inherit; -webkit-transition: all .5s; transition: all .5s; position: absolute; left: 0; } .header-menu-toggle span::before { top: -.7rem; } .header-menu-toggle span::after { bottom: -.7rem; } .header-menu-toggle.is-clicked span { background-color: rgba(255, 255, 255, 0); -webkit-transition: all .1s; transition: all .1s; } .header-menu-toggle.is-clicked span::before, .header-menu-toggle.is-clicked span::after { background-color: white; } .header-menu-toggle.is-clicked span::before { top: 0; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .header-menu-toggle.is-clicked span::after { bottom: 0; -webkit-transform: rotate(225deg); transform: rotate(225deg); } /* ------------------------------------------------------------------- * responsive: * header * ------------------------------------------------------------------- */ @media screen and (max-width:1200px) { .s-header__logotext { font-size: 7rem; } .s-header__tagline { font-size: 1.6rem; } } @media screen and (max-width:1000px) { .s-header__logotext { font-size: 6.8rem; } } @media screen and (max-width:800px) { .s-header__content { padding-top: 9.6rem; padding-bottom: 12rem; min-height: 0; background-size: 310px 220px; } .header-menu-toggle { display: block; } .s-header__nav-wrap { opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; padding-top: 8rem; font-weight: 600; font-size: 1.8rem; text-transform: none; letter-spacing: 0; } .s-header__nav-wrap>.row { width: 100%; } .s-header__nav { min-height: 0; width: 100%; margin: 6rem 6rem 8rem; } .s-header__nav>li { float: none; display: block; height: auto; padding-top: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .s-header__nav>li:first-child { border-top: 2px solid rgba(0, 0, 0, 0.1); } .s-header__nav li.has-children>a::after { border-bottom: 1px solid #000000; border-right: 1px solid #000000; } .s-header__nav li.has-children>a.sub-menu-is-open::after { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .s-header__nav li a { padding: 0; } .s-header__nav>li a { display: block; color: #272727; line-height: 6rem; } .s-header__nav li.current>a { background-color: transparent; border: none; border-radius: 0; color: #84be5b; } .s-header__nav ul { opacity: 1; visibility: visible; display: none; padding-top: 0; -webkit-transition: none; transition: none; background: transparent; border: none; position: static; } .s-header__nav ul li { height: auto; overflow: auto; } .s-header__nav ul li a { padding: 0 0 0 .8rem; } body.menu-is-open { overflow: hidden; } .menu-is-open .s-header__nav-wrap { -webkit-transition: all .3s; transition: all .3s; opacity: 1; visibility: visible; } } @media screen and (max-width:600px) { .s-header__content { background-position: center top; text-align: center; } .s-header__logotext { font-size: 6.4rem; } .s-header__nav-wrap>.row { padding: 0; } } @media screen and (max-width:400px) { .s-header__logotext { font-size: 6rem; } .s-header__nav { margin: 6rem 4rem 4.8rem; } } /* ------------------------------------------------------------------- * ## main navigation on large screens * ------------------------------------------------------------------- */ @media only screen and (min-width:801px) { .s-header__nav li.has-children:hover>a::after, .s-header__nav li.has-children:focus>a::after { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .s-header__nav ul { display: block !important; } } /* =================================================================== * # content * * ------------------------------------------------------------------- */ .s-content { background: #ffffff; padding: 4.4rem 0 3.6rem 0; } .s-content__main { padding-right: 4.6rem; } .ss-single .s-content__main { padding-bottom: 8rem; } .page-content { padding-bottom: 2rem; margin-bottom: 3.6rem; } .page-content__title { margin-top: 0; } /* ------------------------------------------------------------------- * responsive: * content * ------------------------------------------------------------------- */ @media screen and (max-width:1200px) { .s-content__main { padding-right: 3.6rem; } } @media screen and (max-width:960px) { .s-content__main { padding-right: 2.4rem; } } @media screen and (max-width:900px) { .s-content__main, .s-content__sidebar { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; } .s-content__main { padding-right: 16px; } .s-content__sidebar { margin-top: 6rem; } } @media screen and (max-width:600px) { .s-content__main { padding-right: 10px; } .page-content__title { text-align: center; } } @media screen and (max-width:400px) { .s-content__main { padding-right: 0; } } /* =================================================================== * # sidebar * * ------------------------------------------------------------------- */ .s-content__sidebar h3 { margin-top: 0; } .s-content__sidebar ul { list-style: none; margin-left: 0; } .s-content__sidebar hr, .s-content__sidebar .widget { margin-bottom: 2.4rem; } /* link List */ .s-content__sidebar .link-list { padding: 0; margin: 2rem 0 3.2rem 0; } .s-content__sidebar .link-list li { padding: .8rem 0; margin: 0; border-bottom: 1px solid #efefef; } .s-content__sidebar .link-list li:first-child { border-top: 1px solid #efefef; } .s-content__sidebar .link-list li a { color: #3e3e3e; } .s-content__sidebar .link-list li a:hover, .s-content__sidebar .link-list li a:focus { color: #9fcc7f; } /* tag cloud */ .s-content__sidebar .tagcloud { margin: 2rem 0 3.2rem -1.2rem; padding: 0; } .s-content__sidebar .tagcloud a { background-color: #efefef; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.1rem; line-height: 2.4rem; display: inline-block; margin: 0 0 1.2rem 1rem; padding: .8rem 1.6rem; position: relative; text-transform: uppercase; border-radius: 3px; text-decoration: none; letter-spacing: .2rem; color: #000000; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .s-content__sidebar .tagcloud a:hover, .s-content__sidebar .tagcloud a:focus { color: #ffffff; background: #9fcc7f; } /* search */ .widget--search h3 { display: none; } .widget--search form { position: relative; margin: 0; } .widget--search .text-search { padding-right: 50px; border: none; width: 100%; min-width: 150px; border-radius: 4px; } .widget--search .submit-search { background-color: transparent !important; background-image: url(../images/icons/icon-search.svg); background-size: contain; background-repeat: no-repeat; -webkit-box-shadow: none; box-shadow: none; border: none; cursor: pointer; width: 2rem; height: 2rem; min-height: 2rem; padding: 0; margin: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); position: absolute; top: 50%; right: 2rem; } .s-content__sidebar .widget--search { margin-bottom: 4rem; } /* categories */ .widget--categories ul { margin-top: 1.2rem; } .widget--categories ul li { padding-left: 0; } /* =================================================================== * # footer * * ------------------------------------------------------------------- */ .s-footer { padding-top: 4.8rem; margin-bottom: 4.2rem; font-size: 1.422rem; line-height: 2.8rem; position: relative; } .s-footer h3 { margin-top: 0; margin-bottom: 1.6rem; } .s-footer p { margin-bottom: 2.4rem; } .s-footer__list { margin: 0; padding: 0; list-style: none; } .s-footer__list li { margin: 0; padding-left: 0; line-height: 24px; } .s-footer__list li a { color: #3e3e3e; } .s-footer__list li a:hover, .s-footer__list li a:focus { color: #84be5b; } .s-footer__info { padding-right: 3.2rem; } /* ------------------------------------------------------------------- * ## footer social * ------------------------------------------------------------------- */ .s-footer__social { margin: 1.6rem auto 4.8rem; padding: 0; text-align: center; } .s-footer__social li { display: inline-block; font-size: 3.2rem; line-height: 4.8rem; padding: 0; margin: 0 1.6rem; } .s-footer__social li a { color: #3e3e3e; } .s-footer__social li a:hover, .s-footer__social li a:focus { color: #84be5b; } /* ------------------------------------------------------------------- * ## photostream * ------------------------------------------------------------------- */ .s-footer .photostream { list-style: none; margin: 1.2rem 0 2.4rem -1.6rem; padding: 0; overflow: hidden; } .s-footer .photostream li { display: inline-block; margin: 0 0 1.2rem 1.2rem; padding: 0; } .s-footer .photostream li a { display: block; height: 6rem; width: 6rem; background-color: #ffffff; padding: .9rem; border: 1px solid #e0e0e0; border-radius: 3px; } .s-footer .photostream li a img { vertical-align: bottom; } /* ------------------------------------------------------------------- * ## copyright * ------------------------------------------------------------------- */ .ss-copyright { font-family: "Open Sans", sans-serif; margin: 0; padding: 3.2rem 1.6rem .8rem 1.6rem; width: 100%; } .ss-copyright span { display: inline-block; } .ss-copyright span::after { content: "|"; display: inline-block; padding: 0 1rem 0 1.2rem; color: rgba(0, 0, 0, 0.3); } .ss-copyright span:last-child::after { display: none; } /* ------------------------------------------------------------------- * ## go top * ------------------------------------------------------------------- */ .ss-go-top { z-index: 2; opacity: 0; visibility: hidden; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position: fixed; bottom: 4.4rem; right: 4rem; } .ss-go-top a { text-decoration: none; border: 0 none; display: block; height: 5.6rem; width: 5.6rem; border-radius: 50%; background-color: #84be5b; -webkit-transition: all .3s; transition: all .3s; position: relative; } .ss-go-top a:hover, .ss-go-top a:focus { background-color: #000000; } .ss-go-top svg { height: 1.2rem; width: 1.2rem; position: absolute; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); left: 50%; top: 50%; } .ss-go-top svg path { fill: #ffffff; } .ss-go-top.link-is-visible { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */ @media screen and (max-width:900px) { .s-footer__bottom>.column { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; } .s-footer__info { margin-bottom: 1.6rem; } .ss-copyright { border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: center; margin-top: 3.2rem; } } @media screen and (max-width:800px) { .s-footer__social li { font-size: 2.8rem; margin: 0 1.2rem; } .s-footer-list--nav li { display: inline-block; margin-right: 1.2rem; } .s-footer-list--nav li:last-child { margin-right: 0; } .ss-go-top { right: 3.2rem; } .ss-go-top a { height: 4.8rem; width: 4.8rem; } } @media screen and (max-width:600px) { .ss-copyright span { display: block; } .ss-copyright span::after { display: none; } } @media screen and (max-width:400px) { .ss-go-top { right: 0rem; bottom: 0rem; } .ss-go-top a { border-radius: 4px 0 0 0; } } /* =================================================================== * # blog styles and blog components * * ------------------------------------------------------------------- */ .entry { padding-bottom: 1.2rem; margin-bottom: 3.2rem; } .entry h2 { margin-top: 0; margin-bottom: 0; } .entry h2 a { color: #272727; } .entry h2 a:hover, .entry h2 a:focus { color: #000000; } .entry__header { border: none; height: auto; } .entry__content-media { margin: 3.2rem 0 4.8rem; } .entry__content-media img { vertical-align: bottom; } /* ------------------------------------------------------------------- * ## entry meta * ------------------------------------------------------------------- */ .entry__meta ul { list-style: none; margin: .8rem 0 2rem; font-size: 1.422; color: #a7a7a7; line-height: 2.8rem; } .entry__meta ul li { display: inline-block; margin: 0; padding: 0; font-family: "Merriweather", serif; } .entry__meta ul li::after { content: "\2022"; margin-left: .4rem; margin-right: .2rem; } .entry__meta ul li:last-child::after { display: none; } /* ------------------------------------------------------------------- * ## entry tags * ------------------------------------------------------------------- */ .entry__tags { margin-top: 2rem; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 1.422rem; line-height: 2rem; text-transform: uppercase; letter-spacing: .03rem; color: #3e3e3e; } .entry__tags a { font-family: "Merriweather", serif; font-size: 1.6rem; text-transform: none; letter-spacing: 0; color: #9fcc7f; } /* ------------------------------------------------------------------- * ## entry post nav * ------------------------------------------------------------------- */ .entry__post-nav { margin: 2.4rem 0 3.2rem; padding: 1.6rem 0 0 0; font-family: "Merriweather", serif; } .entry__post-nav li { display: block; margin: 0; padding: 0; width: 49%; } .entry__post-nav li a { color: #3e3e3e; } .entry__post-nav li strong { display: block; } .entry__post-nav li.next { float: right; text-align: right; } .entry__post-nav li.prev { float: left; text-align: left; } /* ------------------------------------------------------------------- * ## post-list-nav * ------------------------------------------------------------------- */ .post-list-nav { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; padding-top: 2.4rem; margin-bottom: 4rem; border-top: 1px solid #efefef; } .post-list-nav a:first-child { margin-right: .8rem; } .post-list-nav a[rel="prev"], .post-list-nav a[rel="next"] { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 1.422rem; line-height: 1.6rem; text-transform: uppercase; letter-spacing: .2rem; color: #000000; background-color: #efefef; padding: 1.2rem 2rem; border-radius: 4px; } .post-list-nav a[rel="prev"]:hover, .post-list-nav a[rel="prev"]:focus, .post-list-nav a[rel="next"]:hover, .post-list-nav a[rel="next"]:focus { color: #ffffff; background-color: #9fcc7f; } /* ------------------------------------------------------------------- * ## comments * ------------------------------------------------------------------- */ .comments-wrap { padding: 6.4rem 0 0 0; } .comments-wrap h3 { margin-top: 0; } .comments-wrap h3 span { display: block; font-weight: 400; font-size: 1.6rem; color: #a7a7a7; margin-top: .4rem; } /* comments * -------------------------------------------------- */ #comments { padding-top: 4rem; padding-bottom: 1.2rem; border-top: 1px solid #efefef; } #comments ol, #comments ul { list-style: none; } .commentlist { margin: 6rem 0 5.6rem; padding: 0; } .commentlist>.comment { position: relative; list-style: none; margin: 0; padding: 2rem 0 0 0; padding-left: 14%; } .comment__avatar { position: absolute; left: 0; display: block; } .comment__avatar img { height: 6rem; width: 6rem; border-radius: 100%; vertical-align: bottom; } .comment__info { position: relative; } .comment__info .comment__author { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 1.8rem; line-height: 1.778; font-style: normal; color: #272727; } .comment__meta { font-family: "Open Sans", sans-serif; font-style: normal; font-size: 1.422rem; line-height: 2rem; letter-spacing: .2rem; text-transform: uppercase; color: #a7a7a7; } .comment__meta .comment__time, .comment__meta .comment__reply { display: inline-block; } .comment__meta .comment__time { margin-right: .8rem; } .comment__meta .comment__reply a { font-weight: 600; color: #272727; } .comment__text { clear: both; margin: 1.6rem 0 0 0; } .comment ul.children { margin: 0; padding: 0; } .comment ul.children li { padding-left: 5%; margin-top: calc(3.2rem + 2rem); border-left: 1px solid rgba(0, 0, 0, 0.15); } /* comments form * ---------------------------- */ .comments-wrap .comment-respond { margin-top: 6.4rem; } .comment-respond form { padding-top: 4rem; } /* ------------------------------------------------------------------- * responsive: * blog styles and blog components * ------------------------------------------------------------------- */ @media screen and (max-width:900px) { .post-list-nav { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; } } @media screen and (max-width:800px) { .comment__avatar img { margin-top: 0; height: 5.2rem; width: 5.2rem; } } @media screen and (max-width:600px) { .entry__header { text-align: center; } .entry__post-nav li { display: block; width: 100%; } .entry__post-nav li.next, .entry__post-nav li.prev { float: none; text-align: left; } .commentlist>.comment { padding-top: 0; padding-left: 0; } .comment__avatar { display: none; } .comment ul.children li { margin-top: calc(3.2rem + 0rem); } } @media screen and (max-width:400px) { .comments-wrap, .comment-respond form { padding-top: 3.2rem; } .comment ul.children li { border-left: none; } }