From cc7affa7d115201cedf6fd9491ce7ccb3612b20c Mon Sep 17 00:00:00 2001 From: Roni Laukkarinen Date: Mon, 25 Jun 2018 12:12:57 +0300 Subject: [PATCH] Fix gulp-stylefmt for expanded css, release 4.2.4 --- .stylelintrc | 20 + css/global.css | 6851 ++++++++++++++++++++++++++++-------------------- functions.php | 2 +- gulpfile.js | 3 +- package.json | 38 +- readme.txt | 2 +- style.css | 4 +- 7 files changed, 4080 insertions(+), 2840 deletions(-) create mode 100644 .stylelintrc diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..2890a614 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,20 @@ +{ + "extends": "stylelint-config-primer", + "rules": { + "rule-nested-empty-line-before": "always", + "rule-non-nested-empty-line-before": "always", + "block-no-empty": true, + "declaration-colon-newline-after": "never", + "number-leading-zero": "never", + "value-list-comma-newline-after": "never", + "selector-list-comma-newline-after": "always", + "declaration-colon-space-before": "never", + "block-opening-brace-space-before": "always", + "string-quotes": "single", + "declaration-block-trailing-semicolon": "always", + "no-eol-whitespace": "false", + "number-no-trailing-zeros": "true", + "block-closing-brace-newline-after": "always", + "declaration-empty-line-before": "never" + } +} diff --git a/css/global.css b/css/global.css index e621ff3f..a96b1322 100644 --- a/css/global.css +++ b/css/global.css @@ -1,4 +1,4 @@ -@charset "UTF-8"; +@charset "utf-8"; /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -10,7 +10,8 @@ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 2 */ +} /* Sections ========================================================================== */ @@ -18,15 +19,17 @@ html { * Remove the margin in all browsers. */ body { - margin: 0; } + margin: 0; +} /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { + margin: .67em 0; font-size: 2em; - margin: 0.67em 0; } +} /* Grouping content ========================================================================== */ @@ -35,13 +38,14 @@ h1 { * 2. Show the overflow in Edge and IE. */ hr { - -webkit-box-sizing: content-box; - box-sizing: content-box; /* 1 */ height: 0; + -webkit-box-sizing: content-box; + box-sizing: content-box; /* 1 */ overflow: visible; - /* 2 */ } + /* 2 */ +} /** * 1. Correct the inheritance and scaling of font size in all browsers. @@ -51,7 +55,8 @@ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; - /* 2 */ } + /* 2 */ +} /* Text-level semantics ========================================================================== */ @@ -59,27 +64,30 @@ pre { * Remove the gray background on active links in IE 10. */ a { - background-color: transparent; } + background-color: transparent; +} /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { - border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - /* 2 */ } + text-decoration: underline dotted; + border-bottom: none; + /* 2 */ +} /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { - font-weight: bolder; } + font-weight: bolder; +} /** * 1. Correct the inheritance and scaling of font size in all browsers. @@ -91,13 +99,15 @@ samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; - /* 2 */ } + /* 2 */ +} /** * Add the correct font size in all browsers. */ small { - font-size: 80%; } + font-size: 80%; +} /** * Prevent `sub` and `sup` elements from affecting the line height in @@ -105,16 +115,19 @@ small { */ sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; - vertical-align: baseline; } + vertical-align: baseline; +} sub { - bottom: -0.25em; } + bottom: -0.25em; +} sup { - top: -0.5em; } + top: -0.5em; +} /* Embedded content ========================================================================== */ @@ -122,7 +135,8 @@ sup { * Remove the border on images inside links in IE 10. */ img { - border-style: none; } + border-style: none; +} /* Forms ========================================================================== */ @@ -135,14 +149,15 @@ input, optgroup, select, textarea { + /* 1 */ + margin: 0; font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ } + /* 2 */ +} /** * Show the overflow in IE. @@ -151,7 +166,8 @@ textarea { button, input { /* 1 */ - overflow: visible; } + overflow: visible; +} /** * Remove the inheritance of text transform in Edge, Firefox, and IE. @@ -160,7 +176,8 @@ input { button, select { /* 1 */ - text-transform: none; } + text-transform: none; +} /** * Correct the inability to style clickable types in iOS and Safari. @@ -169,7 +186,8 @@ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; } + -webkit-appearance: button; +} /** * Remove the inner border and padding in Firefox. @@ -178,8 +196,9 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + padding: 0; border-style: none; - padding: 0; } +} /** * Restore the focus styles unset by the previous rule. @@ -188,13 +207,15 @@ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; } + outline: 1px dotted ButtonText; +} /** * Correct the padding in Firefox. */ fieldset { - padding: 0.35em 0.75em 0.625em; } + padding: .35em .75em .625em; +} /** * 1. Correct the text wrapping in Edge and IE. @@ -203,31 +224,34 @@ fieldset { * `fieldset` elements in all browsers. */ legend { - -webkit-box-sizing: border-box; - box-sizing: border-box; - /* 1 */ - color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; /* 1 */ padding: 0; + /* 1 */ + color: inherit; /* 3 */ white-space: normal; - /* 1 */ } + /* 1 */ +} /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - vertical-align: baseline; } + vertical-align: baseline; +} /** * Remove the default vertical scrollbar in IE 10+. */ textarea { - overflow: auto; } + overflow: auto; +} /** * 1. Add the correct box sizing in IE 10. @@ -236,43 +260,48 @@ textarea { [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; /* 1 */ padding: 0; - /* 2 */ } + /* 2 */ +} /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; } + height: auto; +} /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; - /* 2 */ } + -webkit-appearance: textfield; + /* 2 */ +} /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } + -webkit-appearance: none; +} /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ font: inherit; - /* 2 */ } + -webkit-appearance: button; + /* 2 */ +} /* Interactive ========================================================================== */ @@ -280,13 +309,15 @@ textarea { * Add the correct display in Edge, IE 10+, and Firefox. */ details { - display: block; } + display: block; +} /* * Add the correct display in all browsers. */ summary { - display: list-item; } + display: list-item; +} /* Misc ========================================================================== */ @@ -294,239 +325,299 @@ summary { * Add the correct display in IE 10+. */ template { - display: none; } + display: none; +} /** * Add the correct display in IE 10. */ [hidden] { - display: none; } + display: none; +} html, *, *:before, *:after { -webkit-box-sizing: border-box; - box-sizing: border-box; } + box-sizing: border-box; +} img { -webkit-box-sizing: content-box; - box-sizing: content-box; } + box-sizing: content-box; +} .screen-reader-text { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); + position: absolute !important; + width: 1px; height: 1px; + padding: 0; margin: -1px; overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px; - word-wrap: normal !important; } - .screen-reader-text.skip-link { - margin: 5px; } - .screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 0; - -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - -webkit-clip-path: none; - clip-path: none; - color: #21759b; - display: block; - font-size: 17px; - font-size: 1.7rem; - font-weight: 700; - height: auto; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - top: 5px; - width: auto; - z-index: 100000; } + clip: rect(1px, 1px, 1px, 1px); + word-wrap: normal !important; + border: 0; + -webkit-clip-path: inset(50%); + clip-path: inset(50%); +} + +.screen-reader-text.skip-link { + margin: 5px; +} + +.screen-reader-text:focus { + top: 5px; + left: 5px; + z-index: 100000; + display: block; + width: auto; + height: auto; + padding: 15px 23px 14px; + clip: auto !important; + font-size: 1.7rem; + font-size: 17px; + font-weight: 700; + line-height: normal; + color: #21759b; + text-decoration: none; + background-color: #f1f1f1; + border-radius: 0; + -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); + -webkit-clip-path: none; + clip-path: none; +} [tabindex="-1"]:focus { - outline: 0; } + outline: 0; +} [data-whatinput="mouse"] *:focus { - outline: none; } + outline: none; +} [data-whatinput="keyboard"] input:focus, [data-whatinput="keyboard"] button:focus, [data-whatinput="keyboard"] select:focus, [data-whatinput="keyboard"] textarea:focus { outline: 4px solid #f9bf47; - opacity: 1; } + opacity: 1; +} [data-whatinput="keyboard"] nav ul li a:focus { + color: #000; background: #f9bf47; - color: #000; } +} [data-whatinput="keyboard"] a:focus { - outline: 2px solid #f9bf47; background: #f9bf47; - opacity: 1; } + outline: 2px solid #f9bf47; + opacity: 1; +} .no-js *:focus { - outline: 4px solid #f9bf47; } + outline: 4px solid #f9bf47; +} .container a, .entry-content a { - text-decoration: underline; } - .container a:hover, .container a:focus, - .entry-content a:hover, - .entry-content a:focus { - text-decoration: none; } + text-decoration: underline; +} + +.container a:hover, +.container a:focus, +.entry-content a:hover, +.entry-content a:focus { + text-decoration: none; +} .block { - background-size: cover; + position: relative; + max-width: 100%; + min-height: 100px; + margin: 0 auto; + background-color: #fff; background-repeat: no-repeat; background-position: center; background-position: center; - background-color: #fff; - position: relative; - min-height: 100px; - max-width: 100%; - margin: 0 auto; } + background-size: cover; +} .shade { - background: #333; position: absolute; - width: 100%; - height: 100%; top: 0; left: 0; z-index: 0; - opacity: .15; } + width: 100%; + height: 100%; + background: #333; + opacity: .15; +} .site { + position: relative; max-width: 100%; - margin-left: auto; margin-right: auto; - position: relative; - overflow: hidden; } + margin-left: auto; + overflow: hidden; +} .container { - margin: 0 auto; + max-width: 960px; padding-top: 64px; padding-top: 6.4rem; - padding-bottom: 64px; + padding-right: 2rem; + padding-right: 2rem; + padding-right: 20px; + padding-right: 20px; padding-bottom: 6.4rem; - padding-left: 20px; + padding-bottom: 64px; padding-left: 2rem; - padding-right: 20px; - padding-right: 2rem; - max-width: 960px; - margin-left: auto; - margin-right: auto; + padding-left: 20px; padding-left: 20px; padding-left: 2rem; - padding-right: 20px; - padding-right: 2rem; } - @media (max-width: 760px) { - .container { - padding-top: 3.2rem; - padding-bottom: 3.2rem; } } + margin: 0 auto; + margin-right: auto; + margin-left: auto; +} + +@media (max-width: 760px) { + .container { + padding-top: 3.2rem; + padding-bottom: 3.2rem; + } +} .site-main .container { overflow: hidden; - clear: both; } + clear: both; +} .entry-footer { + display: block; overflow: hidden; clear: both; - display: block; } +} .edit-link { - text-align: left; - width: 100%; + top: 0; + bottom: 0; display: block; - clear: both; - max-width: 100%; + width: 100%; min-width: 0; - margin-bottom: 0; + max-width: 100%; + padding: 0; margin-top: 0; - top: 0; - bottom: 0; + margin-bottom: 0; + overflow: hidden; + clear: both; + text-align: left; +} + +.edit-link a { + display: block; padding: 0; - overflow: hidden; } - .edit-link a { - clear: both; - display: block; - margin-top: 40px; - padding: 0; } + margin-top: 40px; + clear: both; +} a.global-link { - width: 100%; - height: 100%; - z-index: 3; position: absolute; top: 0; - left: 0; } + left: 0; + z-index: 3; + width: 100%; + height: 100%; +} @font-face { font-family: "Karla"; + font-style: normal; + font-weight: 400; src: url("../fonts/karla-regular.eot"); src: url("../fonts/karla-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/karla-regular.woff") format("woff"), url("../fonts/karla-regular.woff2") format("woff2"), url("../fonts/karla-regular.ttf") format("truetype"), url("../fonts/karla-regular.svg#Karla") format("svg"); - font-style: normal; - font-weight: 400; } +} @font-face { font-family: "Karla"; + font-style: italic; + font-weight: 400; src: url("../fonts/karla-italic.eot"); src: url("../fonts/karla-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/karla-italic.woff") format("woff"), url("../fonts/karla-italic.woff2") format("woff2"), url("../fonts/karla-italic.ttf") format("truetype"), url("../fonts/karla-italic.svg#Karla") format("svg"); - font-style: italic; - font-weight: 400; } +} @font-face { font-family: "Karla"; + font-style: normal; + font-weight: 700; src: url("../fonts/karla-bold.eot"); src: url("../fonts/karla-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/karla-bold.woff") format("woff"), url("../fonts/karla-bold.woff2") format("woff2"), url("../fonts/karla-bold.ttf") format("truetype"), url("../fonts/karla-bold.svg#Karla") format("svg"); - font-style: normal; - font-weight: 700; } +} @font-face { font-family: "Karla"; + font-style: italic; + font-weight: 700; src: url("../fonts/karla-bolditalic.eot"); src: url("../fonts/karla-bolditalic.eot?#iefix") format("embedded-opentype"), url("../fonts/karla-bolditalic.woff") format("woff"), url("../fonts/karla-bolditalic.woff2") format("woff2"), url("../fonts/karla-bolditalic.ttf") format("truetype"), url("../fonts/karla-bolditalic.svg#Karla") format("svg"); - font-style: italic; - font-weight: 700; } +} :root { - font-size: 62.5%; } + font-size: 62.5%; +} body { - font-size: 17px; + font-family: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; font-size: 1.7rem; - font-family: "Karla", "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; color: #222; font-smoothing: antialiased; -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; - -ms-text-size-adjust: none; - text-size-adjust: none; + -moz-text-size-adjust: none; + -ms-text-size-adjust: none; + text-size-adjust: none; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } + -moz-osx-font-smoothing: grayscale; +} a { color: #045d30; - text-decoration: none; } - a:hover { - color: #111; } - -.cat a, .comments-link, .comment-list li, .comment-list li p, .comment-list li .comment-time { - font-size: 1.2vw; } - @media (max-width: 1166.66667px) { - .cat a, .comments-link, .comment-list li, .comment-list li p, .comment-list li .comment-time { - font-size: 14px; } } - @media (min-width: 1416.66667px) { - .cat a, .comments-link, .comment-list li, .comment-list li p, .comment-list li .comment-time { - font-size: 17px; } } + text-decoration: none; +} + +a:hover { + color: #111; +} + +.cat a, +.comments-link, +.comment-list li, +.comment-list li p, +.comment-list li .comment-time { + font-size: 1.2vw; +} + +@media (max-width: 1166.66667px) { + .cat a, + .comments-link, + .comment-list li, + .comment-list li p, + .comment-list li .comment-time { + font-size: 14px; + } +} + +@media (min-width: 1416.66667px) { + .cat a, + .comments-link, + .comment-list li, + .comment-list li p, + .comment-list li .comment-time { + font-size: 17px; + } +} p, dd, @@ -559,81 +650,93 @@ input[type="email"], input[type="search"] { font-size: 3vw; font-size: 18px; + line-height: 1.68; letter-spacing: -.003em; - line-height: 1.68; } - @media (max-width: 633.33333px) { - p, - dd, - dt, - figcaption, - hr, - small, - ol, - ul, - li, - blockquote, - kbd, - pre, - samp, - code, - th, - td, - table, - tr, - textarea, - select, - input[type="text"], - input[type="tel"], - input[type="url"], - input[type="password"], - input[type="number"], - input[type="month"], - input[type="week"], - input[type="email"], - input[type="search"] { - font-size: 19px; } } - @media (min-width: 600px) { - p, - dd, - dt, - figcaption, - hr, - small, - ol, - ul, - li, - blockquote, - kbd, - pre, - samp, - code, - th, - td, - table, - tr, - textarea, - select, - input[type="text"], - input[type="tel"], - input[type="url"], - input[type="password"], - input[type="number"], - input[type="month"], - input[type="week"], - input[type="email"], - input[type="search"] { - font-size: 18px; } } +} + +@media (max-width: 633.33333px) { + p, + dd, + dt, + figcaption, + hr, + small, + ol, + ul, + li, + blockquote, + kbd, + pre, + samp, + code, + th, + td, + table, + tr, + textarea, + select, + input[type="text"], + input[type="tel"], + input[type="url"], + input[type="password"], + input[type="number"], + input[type="month"], + input[type="week"], + input[type="email"], + input[type="search"] { + font-size: 19px; + } +} + +@media (min-width: 600px) { + p, + dd, + dt, + figcaption, + hr, + small, + ol, + ul, + li, + blockquote, + kbd, + pre, + samp, + code, + th, + td, + table, + tr, + textarea, + select, + input[type="text"], + input[type="tel"], + input[type="url"], + input[type="password"], + input[type="number"], + input[type="month"], + input[type="week"], + input[type="email"], + input[type="search"] { + font-size: 18px; + } +} p { margin-top: 29px; margin-top: 2.9rem; margin-bottom: 29px; margin-bottom: 2.9rem; - line-height: 1.78; } - p:first-child { - margin-top: 0; } - p:last-child { - margin-bottom: 0; } + line-height: 1.78; +} + +p:first-child { + margin-top: 0; +} + +p:last-child { + margin-bottom: 0; +} h1, h2, @@ -641,358 +744,476 @@ h3, h4, h5, h6 { + font-family: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 700; color: #222; - font-family: "Karla", "Helvetica Neue", Helvetica, sans-serif; - font-weight: 700; } +} h1 { - font-size: 3.2vw; } - @media (max-width: 1000px) { - h1 { - font-size: 32px; } } - @media (min-width: 2125px) { - h1 { - font-size: 68px; } } + font-size: 3.2vw; +} + +@media (max-width: 1000px) { + h1 { + font-size: 32px; + } +} + +@media (min-width: 2125px) { + h1 { + font-size: 68px; + } +} h2 { - font-size: 2.4vw; } - @media (max-width: 1000px) { - h2 { - font-size: 24px; } } - @media (min-width: 1916.66667px) { - h2 { - font-size: 46px; } } + font-size: 2.4vw; +} + +@media (max-width: 1000px) { + h2 { + font-size: 24px; + } +} + +@media (min-width: 1916.66667px) { + h2 { + font-size: 46px; + } +} h3, .accent { - font-size: 1.6vw; } - @media (max-width: 1312.5px) { - h3, - .accent { - font-size: 21px; } } - @media (min-width: 2125px) { - h3, - .accent { - font-size: 34px; } } + font-size: 1.6vw; +} + +@media (max-width: 1312.5px) { + h3, + .accent { + font-size: 21px; + } +} + +@media (min-width: 2125px) { + h3, + .accent { + font-size: 34px; + } +} h4, .comment-list li .comment-author { - font-size: 1.4vw; } - @media (max-width: 1285.71429px) { - h4, - .comment-list li .comment-author { - font-size: 18px; } } - @media (min-width: 1500px) { - h4, - .comment-list li .comment-author { - font-size: 21px; } } + font-size: 1.4vw; +} + +@media (max-width: 1285.71429px) { + h4, + .comment-list li .comment-author { + font-size: 18px; + } +} + +@media (min-width: 1500px) { + h4, + .comment-list li .comment-author { + font-size: 21px; + } +} h5 { - font-size: 1.2vw; } - @media (max-width: 1166.66667px) { - h5 { - font-size: 14px; } } - @media (min-width: 1500px) { - h5 { - font-size: 18px; } } + font-size: 1.2vw; +} + +@media (max-width: 1166.66667px) { + h5 { + font-size: 14px; + } +} + +@media (min-width: 1500px) { + h5 { + font-size: 18px; + } +} h6 { - font-size: 1.2vw; } - @media (max-width: 1166.66667px) { - h6 { - font-size: 14px; } } - @media (min-width: 1500px) { - h6 { - font-size: 18px; } } + font-size: 1.2vw; +} + +@media (max-width: 1166.66667px) { + h6 { + font-size: 14px; + } +} + +@media (min-width: 1500px) { + h6 { + font-size: 18px; + } +} ul { - list-style: disc outside; padding-left: 13.75px; - padding-left: 1.375rem; } - ul li { - padding-left: 3.5px; - padding-left: .35rem; } + padding-left: 1.375rem; + list-style: disc outside; +} + +ul li { + padding-left: 3.5px; + padding-left: .35rem; +} ol { padding-left: 17.5px; - padding-left: 1.75rem; } + padding-left: 1.75rem; +} ol, ul { padding-bottom: 10px; - padding-bottom: 1rem; } + padding-bottom: 1rem; +} b, strong { - font-weight: 700; } + font-weight: 700; +} em, i { - font-style: italic; } + font-style: italic; +} small { + font-size: .875em; line-height: 1; - font-size: .875em; } +} img { - -ms-interpolation-mode: bicubic; + max-width: 100%; height: auto; vertical-align: middle; - max-width: 100%; } + -ms-interpolation-mode: bicubic; +} figure { position: relative; + margin-top: 0; + margin-right: 0; margin-bottom: 10px; margin-bottom: 1rem; margin-left: 0; - margin-right: 0; - margin-top: 0; } - figure > img { - width: 100%; } +} + +figure > img { + width: 100%; +} figcaption { margin-top: 0; font-style: normal; - font-weight: 400; } + font-weight: 400; +} blockquote { - clear: both; - border: 0 none; position: relative; - margin-top: 30px; - margin-top: 3rem; padding-bottom: 30px; padding-bottom: 3rem; - margin: 0; } + margin: 0; + margin-top: 30px; + margin-top: 3rem; + clear: both; + border: 0 none; +} + +blockquote p { + position: relative; + margin-bottom: 0; + overflow: visible; + font-size: 2vw; + font-size: 25px; + font-style: italic; + color: #666; +} + +@media (max-width: 850px) { + blockquote p { + font-size: 17px; + } +} + +@media (min-width: 1250px) { blockquote p { - font-size: 2vw; font-size: 25px; - font-style: italic; - margin-bottom: 0; - position: relative; - overflow: visible; - color: #666; } - @media (max-width: 850px) { - blockquote p { - font-size: 17px; } } - @media (min-width: 1250px) { - blockquote p { - font-size: 25px; } } - @media (min-width: 770px) { - blockquote { - margin-top: 4rem; - padding-bottom: 4rem; } } + } +} + +@media (min-width: 770px) { + blockquote { + padding-bottom: 4rem; + margin-top: 4rem; + } +} + +blockquote:before { + position: absolute; + top: 0; + left: 0; + display: block; + max-width: 147px; + height: 4px; + content: ''; +} + +@media (min-width: 480px) { blockquote:before { - content: ''; - display: block; - height: 4px; - position: absolute; - left: 0; - top: 0; - max-width: 147px; } - @media (min-width: 480px) { - blockquote:before { - width: 30%; } } + width: 30%; + } +} cite { display: block; - font-style: italic; } + font-style: italic; +} hr { - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, #000)); + height: 0; + padding-top: 1rem; + padding-top: 10px; + padding-bottom: 1rem; + padding-bottom: 10px; + margin: 0; background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000 50%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000 50%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, #000)); background-repeat: repeat-x; - background-size: 2px 2px; background-position: 0 50%; + background-size: 2px 2px; border: 0; - padding-top: 10px; - padding-top: 1rem; - padding-bottom: 10px; - padding-bottom: 1rem; - margin: 0; - height: 0; } +} kbd, pre, samp { - font-family: "Menlo", "Courier", monospace; } + font-family: 'Menlo', 'Courier', monospace; +} code { - color: #c7254e; - background-color: #f9f2f4; - font-family: "Menlo", "Courier", monospace; - line-height: 1; padding: 3.75px 5px; padding: .375rem .5rem; + font-family: 'Menlo', 'Courier', monospace; + font-size: inherit; + line-height: 1; + color: #c7254e; + background-color: #f9f2f4; border-radius: .3rem; - font-size: inherit; } - pre code { - display: inline-block; - padding: 11.5px 10px 8.5px; - padding: 1.15rem 1rem .85rem; } +} + +pre code { + display: inline-block; + padding: 11.5px 10px 8.5px; + padding: 1.15rem 1rem .85rem; +} pre { - border-radius: .3rem; display: block; - white-space: pre-wrap; + margin-bottom: 20px; + margin-bottom: 2rem; word-break: break-all; word-wrap: break-word; - margin-bottom: 20px; - margin-bottom: 2rem; } + white-space: pre-wrap; + border-radius: .3rem; +} .site-header { position: relative; z-index: 15; - padding-bottom: 20px; - padding-bottom: 2rem; - padding-top: 20px; - padding-top: 2rem; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + max-width: 960px; + padding-top: 2rem; + padding-top: 20px; + padding-right: 2rem; + padding-right: 20px; + padding-bottom: 20px; + padding-bottom: 2rem; padding-left: 20px; padding-left: 2rem; - padding-right: 20px; - padding-right: 2rem; - max-width: 960px; - margin-left: auto; margin-right: auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; + margin-left: auto; + -ms-flex-pack: justify; + -ms-flex-align: center; -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } + justify-content: space-between; +} .site-title { margin: 0; - font-weight: 700; } - .site-title a { - color: #111; } + font-weight: 700; +} + +.site-title a { + color: #111; +} .site-footer { padding: 20px; - background: #eaeaea; - color: #fff; overflow: hidden; - clear: both; } - .site-footer svg { - fill: #555; - top: 2px; - position: relative; } - .site-footer p, - .site-footer span { - color: #555; } - .site-footer a { - color: #555; } - .site-footer a:hover { - color: #045d30; } + clear: both; + color: #fff; + background: #eaeaea; +} + +.site-footer svg { + position: relative; + top: 2px; + fill: #555; +} + +.site-footer p, +.site-footer span { + color: #555; +} + +.site-footer a { + color: #555; +} + +.site-footer a:hover { + color: #045d30; +} .theme-info { - overflow: hidden; } - @media (min-width: 770px) { - .theme-info { - width: 60%; - text-align: right; - float: right; } } + overflow: hidden; +} + +@media (min-width: 770px) { + .theme-info { + float: right; + width: 60%; + text-align: right; + } +} .content-area button, .content-area .button, .content-area input[type="reset"], .content-area input[type="submit"], .content-area input[type="button"] { - font-size: 16px; - font-size: 1.6rem; - background: #045d30; - color: #fff; - border: 0; - width: auto; + position: relative; display: inline-block; - padding: 12px 30px; + width: auto; padding: 1.2rem 3rem; + padding: 12px 30px; margin-bottom: 10px; margin-bottom: 1rem; + font-family: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; + font-size: 1.6rem; + font-size: 16px; + color: #fff; text-decoration: none; - position: relative; cursor: pointer; + background: #045d30; + border: 0; -webkit-transition: 150ms linear background; -o-transition: 150ms linear background; transition: 150ms linear background; - font-family: "Karla", "Helvetica Neue", Helvetica, sans-serif; } - @media (max-width: 480px) { - .content-area button, - .content-area .button, - .content-area input[type="reset"], - .content-area input[type="submit"], - .content-area input[type="button"] { - display: block; - text-align: center; } } - .content-area button:hover, .content-area button:focus, - .content-area .button:hover, - .content-area .button:focus, - .content-area input[type="reset"]:hover, - .content-area input[type="reset"]:focus, - .content-area input[type="submit"]:hover, - .content-area input[type="submit"]:focus, - .content-area input[type="button"]:hover, - .content-area input[type="button"]:focus { - color: #fff; - background: #01140a; } - .content-area button.button-ghost, - .content-area .button.button-ghost, - .content-area input[type="reset"].button-ghost, - .content-area input[type="submit"].button-ghost, - .content-area input[type="button"].button-ghost { - background-color: transparent; - border: 1px solid #045d30; - color: #045d30; } - .content-area button.button-ghost:hover, - .content-area .button.button-ghost:hover, - .content-area input[type="reset"].button-ghost:hover, - .content-area input[type="submit"].button-ghost:hover, - .content-area input[type="button"].button-ghost:hover { - background-color: #045d30; - color: #fff; } - .content-area button.button-ghost.button-ghost-white, - .content-area .button.button-ghost.button-ghost-white, - .content-area input[type="reset"].button-ghost.button-ghost-white, - .content-area input[type="submit"].button-ghost.button-ghost-white, - .content-area input[type="button"].button-ghost.button-ghost-white { - border-color: #fff; - color: #fff; } - .content-area button.button-ghost.button-ghost-white:hover, - .content-area .button.button-ghost.button-ghost-white:hover, - .content-area input[type="reset"].button-ghost.button-ghost-white:hover, - .content-area input[type="submit"].button-ghost.button-ghost-white:hover, - .content-area input[type="button"].button-ghost.button-ghost-white:hover { - background-color: #045d30; - border-color: #045d30; - color: #fff; } +} + +@media (max-width: 480px) { + .content-area button, + .content-area .button, + .content-area input[type="reset"], + .content-area input[type="submit"], + .content-area input[type="button"] { + display: block; + text-align: center; + } +} + +.content-area button:hover, +.content-area button:focus, +.content-area .button:hover, +.content-area .button:focus, +.content-area input[type="reset"]:hover, +.content-area input[type="reset"]:focus, +.content-area input[type="submit"]:hover, +.content-area input[type="submit"]:focus, +.content-area input[type="button"]:hover, +.content-area input[type="button"]:focus { + color: #fff; + background: #01140a; +} + +.content-area button.button-ghost, +.content-area .button.button-ghost, +.content-area input[type="reset"].button-ghost, +.content-area input[type="submit"].button-ghost, +.content-area input[type="button"].button-ghost { + color: #045d30; + background-color: transparent; + border: 1px solid #045d30; +} + +.content-area button.button-ghost:hover, +.content-area .button.button-ghost:hover, +.content-area input[type="reset"].button-ghost:hover, +.content-area input[type="submit"].button-ghost:hover, +.content-area input[type="button"].button-ghost:hover { + color: #fff; + background-color: #045d30; +} + +.content-area button.button-ghost.button-ghost-white, +.content-area .button.button-ghost.button-ghost-white, +.content-area input[type="reset"].button-ghost.button-ghost-white, +.content-area input[type="submit"].button-ghost.button-ghost-white, +.content-area input[type="button"].button-ghost.button-ghost-white { + color: #fff; + border-color: #fff; +} + +.content-area button.button-ghost.button-ghost-white:hover, +.content-area .button.button-ghost.button-ghost-white:hover, +.content-area input[type="reset"].button-ghost.button-ghost-white:hover, +.content-area input[type="submit"].button-ghost.button-ghost-white:hover, +.content-area input[type="button"].button-ghost.button-ghost-white:hover { + color: #fff; + background-color: #045d30; + border-color: #045d30; +} a, button, input { - -webkit-tap-highlight-color: transparent; } + -webkit-tap-highlight-color: transparent; +} .gform_wrapper, .gform_header, .gform_footer { + padding: 0; margin: 0; - padding: 0; } +} .gform_body li, .gform_body div { - margin-top: 0; padding-top: 0; padding-left: 0; - margin-left: 0; } + margin-top: 0; + margin-left: 0; +} .gform_body li { margin-bottom: 10px; - margin-bottom: 1rem; } - .gform_body li:last-child { - margin-bottom: 0; } + margin-bottom: 1rem; +} + +.gform_body li:last-child { + margin-bottom: 0; +} textarea, select, @@ -1005,641 +1226,825 @@ input[type="month"], input[type="week"], input[type="email"], input[type="search"] { - font-family: "Karla", "Helvetica Neue", Helvetica, sans-serif; - background: #f0f0f0; - border: 0; + position: relative; padding: 15px 20px; + margin-bottom: 0; + font-family: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; line-height: 24px; + text-decoration: none; + background: #f0f0f0; + border: 0; -webkit-transition: background .55s; -o-transition: background .55s; transition: background .55s; - text-decoration: none; - position: relative; -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - margin-bottom: 0; } - textarea::-webkit-input-placeholder, - select::-webkit-input-placeholder, - input[type="text"]::-webkit-input-placeholder, - input[type="tel"]::-webkit-input-placeholder, - input[type="url"]::-webkit-input-placeholder, - input[type="password"]::-webkit-input-placeholder, - input[type="number"]::-webkit-input-placeholder, - input[type="month"]::-webkit-input-placeholder, - input[type="week"]::-webkit-input-placeholder, - input[type="email"]::-webkit-input-placeholder, - input[type="search"]::-webkit-input-placeholder { - color: #434343; - opacity: .4; } - textarea:-ms-input-placeholder, - select:-ms-input-placeholder, - input[type="text"]:-ms-input-placeholder, - input[type="tel"]:-ms-input-placeholder, - input[type="url"]:-ms-input-placeholder, - input[type="password"]:-ms-input-placeholder, - input[type="number"]:-ms-input-placeholder, - input[type="month"]:-ms-input-placeholder, - input[type="week"]:-ms-input-placeholder, - input[type="email"]:-ms-input-placeholder, - input[type="search"]:-ms-input-placeholder { - color: #434343; - opacity: .4; } - textarea::-ms-input-placeholder, - select::-ms-input-placeholder, - input[type="text"]::-ms-input-placeholder, - input[type="tel"]::-ms-input-placeholder, - input[type="url"]::-ms-input-placeholder, - input[type="password"]::-ms-input-placeholder, - input[type="number"]::-ms-input-placeholder, - input[type="month"]::-ms-input-placeholder, - input[type="week"]::-ms-input-placeholder, - input[type="email"]::-ms-input-placeholder, - input[type="search"]::-ms-input-placeholder { - color: #434343; - opacity: .4; } - textarea::placeholder, - select::placeholder, - input[type="text"]::placeholder, - input[type="tel"]::placeholder, - input[type="url"]::placeholder, - input[type="password"]::placeholder, - input[type="number"]::placeholder, - input[type="month"]::placeholder, - input[type="week"]::placeholder, - input[type="email"]::placeholder, - input[type="search"]::placeholder { - color: #434343; - opacity: .4; } - textarea:focus, - select:focus, - input[type="text"]:focus, - input[type="tel"]:focus, - input[type="url"]:focus, - input[type="password"]:focus, - input[type="number"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="email"]:focus, - input[type="search"]:focus { - background: #dfdfdf; - border-color: #222222; - outline: 0; } - textarea:focus::-webkit-input-placeholder, - select:focus::-webkit-input-placeholder, - input[type="text"]:focus::-webkit-input-placeholder, - input[type="tel"]:focus::-webkit-input-placeholder, - input[type="url"]:focus::-webkit-input-placeholder, - input[type="password"]:focus::-webkit-input-placeholder, - input[type="number"]:focus::-webkit-input-placeholder, - input[type="month"]:focus::-webkit-input-placeholder, - input[type="week"]:focus::-webkit-input-placeholder, - input[type="email"]:focus::-webkit-input-placeholder, - input[type="search"]:focus::-webkit-input-placeholder { - color: #222; - opacity: .8; } - textarea:focus:-ms-input-placeholder, - select:focus:-ms-input-placeholder, - input[type="text"]:focus:-ms-input-placeholder, - input[type="tel"]:focus:-ms-input-placeholder, - input[type="url"]:focus:-ms-input-placeholder, - input[type="password"]:focus:-ms-input-placeholder, - input[type="number"]:focus:-ms-input-placeholder, - input[type="month"]:focus:-ms-input-placeholder, - input[type="week"]:focus:-ms-input-placeholder, - input[type="email"]:focus:-ms-input-placeholder, - input[type="search"]:focus:-ms-input-placeholder { - color: #222; - opacity: .8; } - textarea:focus::-ms-input-placeholder, - select:focus::-ms-input-placeholder, - input[type="text"]:focus::-ms-input-placeholder, - input[type="tel"]:focus::-ms-input-placeholder, - input[type="url"]:focus::-ms-input-placeholder, - input[type="password"]:focus::-ms-input-placeholder, - input[type="number"]:focus::-ms-input-placeholder, - input[type="month"]:focus::-ms-input-placeholder, - input[type="week"]:focus::-ms-input-placeholder, - input[type="email"]:focus::-ms-input-placeholder, - input[type="search"]:focus::-ms-input-placeholder { - color: #222; - opacity: .8; } - textarea:focus::placeholder, - select:focus::placeholder, - input[type="text"]:focus::placeholder, - input[type="tel"]:focus::placeholder, - input[type="url"]:focus::placeholder, - input[type="password"]:focus::placeholder, - input[type="number"]:focus::placeholder, - input[type="month"]:focus::placeholder, - input[type="week"]:focus::placeholder, - input[type="email"]:focus::placeholder, - input[type="search"]:focus::placeholder { - color: #222; - opacity: .8; } + -moz-appearance: none; + appearance: none; +} + +textarea::-webkit-input-placeholder, +select::-webkit-input-placeholder, +input[type="text"]::-webkit-input-placeholder, +input[type="tel"]::-webkit-input-placeholder, +input[type="url"]::-webkit-input-placeholder, +input[type="password"]::-webkit-input-placeholder, +input[type="number"]::-webkit-input-placeholder, +input[type="month"]::-webkit-input-placeholder, +input[type="week"]::-webkit-input-placeholder, +input[type="email"]::-webkit-input-placeholder, +input[type="search"]::-webkit-input-placeholder { + color: #434343; + opacity: .4; +} + +textarea:-ms-input-placeholder, +select:-ms-input-placeholder, +input[type="text"]:-ms-input-placeholder, +input[type="tel"]:-ms-input-placeholder, +input[type="url"]:-ms-input-placeholder, +input[type="password"]:-ms-input-placeholder, +input[type="number"]:-ms-input-placeholder, +input[type="month"]:-ms-input-placeholder, +input[type="week"]:-ms-input-placeholder, +input[type="email"]:-ms-input-placeholder, +input[type="search"]:-ms-input-placeholder { + color: #434343; + opacity: .4; +} + +textarea::-ms-input-placeholder, +select::-ms-input-placeholder, +input[type="text"]::-ms-input-placeholder, +input[type="tel"]::-ms-input-placeholder, +input[type="url"]::-ms-input-placeholder, +input[type="password"]::-ms-input-placeholder, +input[type="number"]::-ms-input-placeholder, +input[type="month"]::-ms-input-placeholder, +input[type="week"]::-ms-input-placeholder, +input[type="email"]::-ms-input-placeholder, +input[type="search"]::-ms-input-placeholder { + color: #434343; + opacity: .4; +} + +textarea::placeholder, +select::placeholder, +input[type="text"]::placeholder, +input[type="tel"]::placeholder, +input[type="url"]::placeholder, +input[type="password"]::placeholder, +input[type="number"]::placeholder, +input[type="month"]::placeholder, +input[type="week"]::placeholder, +input[type="email"]::placeholder, +input[type="search"]::placeholder { + color: #434343; + opacity: .4; +} + +textarea:focus, +select:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="number"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="email"]:focus, +input[type="search"]:focus { + background: #dfdfdf; + border-color: #222; + outline: 0; +} + +textarea:focus::-webkit-input-placeholder, +select:focus::-webkit-input-placeholder, +input[type="text"]:focus::-webkit-input-placeholder, +input[type="tel"]:focus::-webkit-input-placeholder, +input[type="url"]:focus::-webkit-input-placeholder, +input[type="password"]:focus::-webkit-input-placeholder, +input[type="number"]:focus::-webkit-input-placeholder, +input[type="month"]:focus::-webkit-input-placeholder, +input[type="week"]:focus::-webkit-input-placeholder, +input[type="email"]:focus::-webkit-input-placeholder, +input[type="search"]:focus::-webkit-input-placeholder { + color: #222; + opacity: .8; +} + +textarea:focus:-ms-input-placeholder, +select:focus:-ms-input-placeholder, +input[type="text"]:focus:-ms-input-placeholder, +input[type="tel"]:focus:-ms-input-placeholder, +input[type="url"]:focus:-ms-input-placeholder, +input[type="password"]:focus:-ms-input-placeholder, +input[type="number"]:focus:-ms-input-placeholder, +input[type="month"]:focus:-ms-input-placeholder, +input[type="week"]:focus:-ms-input-placeholder, +input[type="email"]:focus:-ms-input-placeholder, +input[type="search"]:focus:-ms-input-placeholder { + color: #222; + opacity: .8; +} + +textarea:focus::-ms-input-placeholder, +select:focus::-ms-input-placeholder, +input[type="text"]:focus::-ms-input-placeholder, +input[type="tel"]:focus::-ms-input-placeholder, +input[type="url"]:focus::-ms-input-placeholder, +input[type="password"]:focus::-ms-input-placeholder, +input[type="number"]:focus::-ms-input-placeholder, +input[type="month"]:focus::-ms-input-placeholder, +input[type="week"]:focus::-ms-input-placeholder, +input[type="email"]:focus::-ms-input-placeholder, +input[type="search"]:focus::-ms-input-placeholder { + color: #222; + opacity: .8; +} + +textarea:focus::placeholder, +select:focus::placeholder, +input[type="text"]:focus::placeholder, +input[type="tel"]:focus::placeholder, +input[type="url"]:focus::placeholder, +input[type="password"]:focus::placeholder, +input[type="number"]:focus::placeholder, +input[type="month"]:focus::placeholder, +input[type="week"]:focus::placeholder, +input[type="email"]:focus::placeholder, +input[type="search"]:focus::placeholder { + color: #222; + opacity: .8; +} select { - border: 0; - border-radius: 0; - background-image: url("../svg/select.svg"); + width: 100%; + min-width: 0; + max-width: 100%; + padding-right: 40px; + text-indent: 1px; + -o-text-overflow: ''; + text-overflow: ''; + background-image: url('../svg/select.svg'); background-repeat: no-repeat; background-position: right center; - padding-right: 40px; - -webkit-transition: none; + border: 0; + border-radius: 0; -o-transition: none; + -webkit-transition: none; transition: none; - width: 100%; - max-width: 100%; - min-width: 0; -webkit-appearance: none; -moz-appearance: none; - text-indent: 1px; - -o-text-overflow: ''; - text-overflow: ''; } - select::-ms-expand { - display: none; } - select:hover, select:focus { - border-color: #222; } +} + +select::-ms-expand { + display: none; +} + +select:hover, +select:focus { + border-color: #222; +} form p { - margin-bottom: 20px; } - form p.form-submit { - margin-bottom: 0; } + margin-bottom: 20px; +} + +form p.form-submit { + margin-bottom: 0; +} form.search-form .search-field { float: left; - margin-right: 5px; } + margin-right: 5px; +} form.search-form .search-submit { padding: 19px 1.75em; - line-height: 1; } + line-height: 1; +} .comment-respond { margin-bottom: 0; - overflow: visible; } + overflow: visible; +} + +.comment-respond p.comment-form-author { + float: left; + width: 31.33333%; + margin-top: 0; + margin-right: 3%; + margin-bottom: 20px; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.comment-respond p.comment-form-author::after { + display: block; + clear: both; + content: ''; +} + +.comment-respond p.comment-form-author:last-child { + margin-right: 0%; +} + +@media (max-width: 480px) { .comment-respond p.comment-form-author { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; - margin-bottom: 20px; - margin-top: 0; } - .comment-respond p.comment-form-author::after { - display: block; - content: ''; - clear: both; } - .comment-respond p.comment-form-author:last-child { - margin-right: 0%; } - @media (max-width: 480px) { - .comment-respond p.comment-form-author { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; } - .comment-respond p.comment-form-author:first-child { - margin-left: auto; } - .comment-respond p.comment-form-author:last-child { - margin-right: auto; } } - .comment-respond p.comment-form-author input#author { - padding: 15px; - border-width: 1px; } - .comment-respond p.comment-form-email { - float: left; - clear: none; - text-align: inherit; - width: 65.66667%; - margin-left: 0%; - margin-right: 3%; - margin-right: 0; - clear: right; - margin-bottom: 20px; - margin-top: 0; } - .comment-respond p.comment-form-email::after { - display: block; - content: ''; - clear: both; } - .comment-respond p.comment-form-email:last-child { - margin-right: 0%; } - @media (max-width: 480px) { - .comment-respond p.comment-form-email { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; } - .comment-respond p.comment-form-email:first-child { - margin-left: auto; } - .comment-respond p.comment-form-email:last-child { - margin-right: auto; } } - .comment-respond p.comment-form-email input#email { - padding: 15px; - border-width: 1px; } - .comment-respond p.comment-form-url { display: block; - clear: both; float: none; width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + } + + .comment-respond p.comment-form-author:first-child { margin-left: auto; + } + + .comment-respond p.comment-form-author:last-child { margin-right: auto; - position: relative; - margin-top: 0; - margin-bottom: 30px; } - .comment-respond p.comment-form-url:first-child { - margin-left: auto; } - .comment-respond p.comment-form-url:last-child { - margin-right: auto; } - .comment-respond p.comment-form-url input#url { - padding: 15px; - border-width: 1px; } - .comment-respond p.form-submit { + } +} + +.comment-respond p.comment-form-author input#author { + padding: 15px; + border-width: 1px; +} + +.comment-respond p.comment-form-email { + float: left; + width: 65.66667%; + margin-top: 0; + margin-right: 3%; + margin-right: 0; + margin-bottom: 20px; + margin-left: 0%; + clear: none; + clear: right; + text-align: inherit; +} + +.comment-respond p.comment-form-email::after { + display: block; + clear: both; + content: ''; +} + +.comment-respond p.comment-form-email:last-child { + margin-right: 0%; +} + +@media (max-width: 480px) { + .comment-respond p.comment-form-email { display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; clear: both; - margin-bottom: 0; - margin-top: 0; } - .comment-respond p.comment-form-comment { - margin-bottom: 20px; } - @media (max-width: 480px) { - .comment-respond input { - width: 100%; } } - .comment-respond input#author, - .comment-respond input#email, - .comment-respond input#url, - .comment-respond textarea { - width: 100%; } + } + + .comment-respond p.comment-form-email:first-child { + margin-left: auto; + } + + .comment-respond p.comment-form-email:last-child { + margin-right: auto; + } +} + +.comment-respond p.comment-form-email input#email { + padding: 15px; + border-width: 1px; +} + +.comment-respond p.comment-form-url { + position: relative; + display: block; + float: none; + width: 100%; + margin-top: 0; + margin-right: auto; + margin-bottom: 30px; + margin-left: auto; + clear: both; +} + +.comment-respond p.comment-form-url:first-child { + margin-left: auto; +} + +.comment-respond p.comment-form-url:last-child { + margin-right: auto; +} + +.comment-respond p.comment-form-url input#url { + padding: 15px; + border-width: 1px; +} + +.comment-respond p.form-submit { + display: block; + margin-top: 0; + margin-bottom: 0; + clear: both; +} + +.comment-respond p.comment-form-comment { + margin-bottom: 20px; +} + +@media (max-width: 480px) { + .comment-respond input { + width: 100%; + } +} + +.comment-respond input#author, +.comment-respond input#email, +.comment-respond input#url, +.comment-respond textarea { + width: 100%; +} .nav-primary .menu-items { position: relative; - z-index: 9999; } - .nav-primary .menu-items:after { - content: '\00a0'; - display: block; - height: 0; - font: 0/0 serif; - clear: both; - visibility: hidden; - overflow: hidden; } - .nav-primary .menu-items ul, - .nav-primary .menu-items li { - display: block; - list-style: none; - margin: 0; - padding: 0; - line-height: normal; - direction: ltr; - text-align: left; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - .nav-primary .menu-items li, - .nav-primary .menu-items a { - position: relative; } - .nav-primary .menu-items .disabled { - cursor: not-allowed; } - .nav-primary .menu-items li > h1, - .nav-primary .menu-items li > h2, - .nav-primary .menu-items li > h3, - .nav-primary .menu-items li > h4, - .nav-primary .menu-items li > h5, - .nav-primary .menu-items li > h6 { - margin: 0; - padding: 0; } + z-index: 9999; +} + +.nav-primary .menu-items:after { + display: block; + height: 0; + overflow: hidden; + clear: both; + font: 0/0 serif; + visibility: hidden; + content: '\00a0'; +} + +.nav-primary .menu-items ul, +.nav-primary .menu-items li { + display: block; + padding: 0; + margin: 0; + line-height: normal; + text-align: left; + list-style: none; + direction: ltr; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.nav-primary .menu-items li, +.nav-primary .menu-items a { + position: relative; +} + +.nav-primary .menu-items .disabled { + cursor: not-allowed; +} + +.nav-primary .menu-items li > h1, +.nav-primary .menu-items li > h2, +.nav-primary .menu-items li > h3, +.nav-primary .menu-items li > h4, +.nav-primary .menu-items li > h5, +.nav-primary .menu-items li > h6 { + padding: 0; + margin: 0; +} @media only screen and (-ms-high-contrast: active) and (min-width: 960px), only screen and (-ms-high-contrast: none) and (min-width: 960px) { .nav-primary .menu-items ul { - display: none; } } + display: none; + } +} @media only screen and (max-width: 960px) { .js .nav-primary .menu-items ul { - display: none; } } + display: none; + } +} .nav-primary ul ul { margin-top: 0; - margin-left: 25px; } - .nav-primary ul ul ul { - margin-left: 25px; } + margin-left: 25px; +} + +.nav-primary ul ul ul { + margin-left: 25px; +} @media only screen and (-ms-high-contrast: active) and (min-width: 960px), only screen and (-ms-high-contrast: none) and (min-width: 960px) { .js .nav-primary ul .sub-menu.toggled-on { - display: block; } } + display: block; + } +} @media only screen and (max-width: 960px) { .js .nav-primary ul .sub-menu.toggled-on { - display: block; } } + display: block; + } +} .dropdown-toggle:after, .dropdown-toggle.toggled-on:after, .nav-toggle:before, .nav-toggle.toggled-on:before { - speak: none; } + speak: none; +} .dropdown-toggle:after, .dropdown-toggle.toggled-on:after { font-size: 13px; - font-size: 1.3rem; } + font-size: 1.3rem; +} .no-js nav-toggle { - display: none; } + display: none; +} @media only screen and (min-width: 960px) { .sub-menu { - width: 19rem; - visibility: hidden; - opacity: 0; position: absolute; top: 100%; left: 0; - -webkit-transform: translateY(-2em); - -ms-transform: translateY(-2em); - transform: translateY(-2em); z-index: -1; - -webkit-transition: all 0.3s ease-in-out 0.3s, visibility 0.3s linear 0.3s, z-index 0s linear 0.01s; - -o-transition: all 0.3s ease-in-out 0.3s, visibility 0.3s linear 0.3s, z-index 0s linear 0.01s; - transition: all 0.3s ease-in-out 0.3s, visibility 0.3s linear 0.3s, z-index 0s linear 0.01s; } + width: 19rem; + visibility: hidden; + opacity: 0; + -o-transition: all .3s ease-in-out .3s, visibility .3s linear .3s, z-index 0s linear .01s; + -webkit-transition: all .3s ease-in-out .3s, visibility .3s linear .3s, z-index 0s linear .01s; + transition: all .3s ease-in-out .3s, visibility .3s linear .3s, z-index 0s linear .01s; + -ms-transform: translateY(-2em); + -webkit-transform: translateY(-2em); + transform: translateY(-2em); + } + .nav-primary ul .sub-menu.toggled-on { + z-index: 1; visibility: visible; opacity: 1; - z-index: 1; - -webkit-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); -webkit-transition-delay: 0s, 0s, .3s; - -o-transition-delay: 0s, 0s, .3s; - transition-delay: 0s, 0s, .3s; } + -o-transition-delay: 0s, 0s, .3s; + transition-delay: 0s, 0s, .3s; + -webkit-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + } + [data-whatinput="keyboard"] .sub-menu { -webkit-transition: none; -o-transition: none; transition: none; -webkit-transition-delay: none; - -o-transition-delay: none; - transition-delay: none; + -o-transition-delay: none; + transition-delay: none; -webkit-transform: none; - -ms-transform: none; - transform: none; } + -ms-transform: none; + transform: none; + } + [data-whatinput="mouse"] .nav-primary ul .menu-item-has-children:focus > .sub-menu, [data-whatinput="mouse"] .nav-primary ul .menu-item-has-children:focus-within > .sub-menu, [data-whatinput="mouse"] .nav-primary ul .menu-item-has-children:hover > .sub-menu, [data-whatintent="mouse"] .nav-primary ul .menu-item-has-children:focus > .sub-menu, [data-whatintent="mouse"] .nav-primary ul .menu-item-has-children:focus-within > .sub-menu, [data-whatintent="mouse"] .nav-primary ul .menu-item-has-children:hover > .sub-menu { + z-index: 1; visibility: visible; opacity: 1; - z-index: 1; - -webkit-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); -webkit-transition-delay: 0s, 0s, .3s; - -o-transition-delay: 0s, 0s, .3s; - transition-delay: 0s, 0s, .3s; } + -o-transition-delay: 0s, 0s, .3s; + transition-delay: 0s, 0s, .3s; + -webkit-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + } + .no-js .sub-menu { - width: 19rem; - visibility: hidden; - opacity: 0; position: absolute; top: 100%; left: 0; - -webkit-transform: translateY(-2em); - -ms-transform: translateY(-2em); - transform: translateY(-2em); z-index: -1; + width: 19rem; + visibility: hidden; + opacity: 0; -webkit-transition: none; -o-transition: none; transition: none; -webkit-transition-delay: none; - -o-transition-delay: none; - transition-delay: none; } + -o-transition-delay: none; + transition-delay: none; + -ms-transform: translateY(-2em); + -webkit-transform: translateY(-2em); + transform: translateY(-2em); + } + .no-js .nav-primary ul .menu-item-has-children:focus > .sub-menu, .no-js .nav-primary ul .menu-item-has-children:focus-within > .sub-menu, .no-js .nav-primary ul .menu-item-has-children:hover > .sub-menu { + z-index: 1; visibility: visible; opacity: 1; - z-index: 1; - -webkit-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); -webkit-transition-delay: 0s, 0s, .3s; - -o-transition-delay: 0s, 0s, .3s; - transition-delay: 0s, 0s, .3s; } } + -o-transition-delay: 0s, 0s, .3s; + transition-delay: 0s, 0s, .3s; + -webkit-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + } +} @media only screen and (min-width: 960px) and (-ms-high-contrast: active), only screen and (min-width: 960px) and (-ms-high-contrast: none) { .nav-primary .menu-items .sub-menu { + top: 0; + z-index: -1; width: 19rem; + list-style: none; + list-style-type: none; visibility: visible; opacity: 1; - top: 0; - -webkit-transform: translateY(1.5rem); - -ms-transform: translateY(1.5rem); - transform: translateY(1.5rem); - z-index: -1; - -webkit-transition: none; -o-transition: none; + -webkit-transition: none; transition: none; -webkit-transition-delay: none; - -o-transition-delay: none; - transition-delay: none; + -o-transition-delay: none; + transition-delay: none; + -ms-transform: translateY(1.5rem); + -webkit-transform: translateY(1.5rem); + transform: translateY(1.5rem); + } + + .nav-primary .menu-items .sub-menu .menu-item { + padding-top: 0; + margin-top: 0; + list-style: none; list-style-type: none; - list-style: none; } - .nav-primary .menu-items .sub-menu .menu-item { - padding-top: 0; - margin-top: 0; - list-style-type: none; - list-style: none; } - .nav-primary .menu-items .sub-menu .sub-menu.has-sub-menu { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - padding-top: .5rem; } + } + + .nav-primary .menu-items .sub-menu .sub-menu.has-sub-menu { + padding-top: .5rem; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + .nav-primary ul .menu-item-has-children:focus > .sub-menu, .nav-primary ul .menu-item-has-children:focus-within > .sub-menu, .nav-primary ul .menu-item-has-children:hover > .sub-menu { + z-index: 1; visibility: visible; opacity: 1; - z-index: 1; - -webkit-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); -webkit-transition-delay: 0s, 0s, .3s; - -o-transition-delay: 0s, 0s, .3s; - transition-delay: 0s, 0s, .3s; } } + -o-transition-delay: 0s, 0s, .3s; + transition-delay: 0s, 0s, .3s; + -webkit-transform: translateY(0%); + -ms-transform: translateY(0%); + transform: translateY(0%); + } +} @media only screen and (min-width: 960px) and (max-width: 960px) { .nav-primary ul li:hover > ul { - display: block; } } + display: block; + } +} @media only screen and (min-width: 960px) and (-ms-high-contrast: active), only screen and (min-width: 960px) and (-ms-high-contrast: none) { .nav-primary ul li:hover > ul { - display: block; } } + display: block; + } +} @media only screen and (min-width: 960px) { .no-js .nav-primary .menu-items .menu-item-has-children:after { position: relative; + position: absolute; top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; - text-indent: -9999px; - overflow: hidden; + right: 0; + display: block; + width: 8px; + height: 8px; + padding: 0; margin-top: 0; margin-right: 0; - right: 0; + overflow: hidden; + color: transparent; + text-indent: -9999px; + content: ' '; background-color: transparent; - padding: 0; - background-image: url("../svg/chevron-down-dark.svg"); + background-image: url('../svg/chevron-down-dark.svg'); background-repeat: no-repeat; background-position: center; - color: transparent; - position: absolute; - height: 8px; - width: 8px; border: 0; - content: ' '; - display: block; } + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + } + .no-js .nav-primary .menu-items .menu-item-has-children .sub-menu .menu-item-has-children:after { position: absolute; - right: 8px; top: 50%; - margin-top: 0; + right: 8px; + display: block; + width: 12px; + height: 12px; padding: 0; - text-indent: -9999px; + margin-top: 0; overflow: hidden; + color: transparent; + text-indent: -9999px; + content: ' '; background-color: transparent; - background-image: url("../svg/chevron-right-dark.svg"); + background-image: url('../svg/chevron-right-dark.svg'); background-repeat: no-repeat; background-position: center; - color: transparent; - width: 12px; - height: 12px; border: 0; - content: ' '; - display: block; } + } + .nav-toggle { - display: none; } + display: none; + } + .nav-primary { + float: right; padding-top: 1.7rem; padding-bottom: 1.7rem; - float: right; } - .nav-primary .menu-items { - margin: 0; - padding: 0; - background: transparent; - position: relative; - float: left; } - .nav-primary .menu-item { - position: relative; - float: left; - margin: 0; } - .nav-primary .menu-item a { - color: #333; - font-size: 16px; - padding: 20px 12px; - font-weight: 600; } - .nav-primary .menu-item a.disabled { - color: #bbb; } - .nav-primary .menu-item a:hover, .nav-primary .menu-item a:focus, .nav-primary .menu-item a:active, .nav-primary .menu-item a.highlighted, .nav-primary .menu-item a.current { - color: #333; } - .nav-primary .menu-item ul { - position: absolute; - background: #fff; - margin-left: 0; - padding-bottom: .5rem; - padding-top: .5rem; - margin-top: 18px; - z-index: 999; } - .nav-primary .menu-item ul.sub-menu { - padding-top: .5rem; - padding-bottom: .5rem; } - .nav-primary .menu-item ul.sub-menu li { - margin: 0; } - .nav-primary .menu-item ul .dropdown-toggle { - position: absolute; - right: 1rem; - top: .4rem; - border: 0; } - .nav-primary .menu-item ul li { - float: none; - width: 19rem; - padding: 0; } - .nav-primary .menu-item ul li .dropdown-toggle { - position: absolute; - right: 8px; - top: 50%; - margin-top: 0; - padding: 0; - text-indent: -9999px; - overflow: hidden; - background-color: transparent; - background-image: url("../svg/chevron-right-dark.svg"); - background-repeat: no-repeat; - background-position: center; - color: transparent; - width: 12px; - height: 12px; - border: 0; } - .nav-primary .menu-item ul li .dropdown-toggle.toggled-on { - background-image: url("../svg/chevron-left-dark.svg"); } - .nav-primary .menu-item ul li.menu-item-has-children a { - padding-right: 3.5rem; - margin-right: 0; - margin-bottom: 0; - width: 100%; } - .nav-primary .menu-item ul ul { - top: 0; - left: 100%; - margin-left: 0; - margin-top: -5px; } - .nav-primary .menu-item ul a { - padding: .8rem 1.5rem; - font-size: 1.4rem; - color: #333; - display: block; } - .nav-primary .menu-item ul a:hover, .nav-primary .menu-item ul a:focus, .nav-primary .menu-item ul a:active, .nav-primary .menu-item ul a.highlighted { - color: #045d30; } - .nav-primary .menu-item ul a.disabled { - background: #fff; - color: #ccc; } - .nav-primary .menu-item .dropdown-toggle { - position: relative; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; - text-indent: -9999px; - overflow: hidden; - margin-top: 0; - margin-right: 0; - right: 0; - background-color: transparent; - padding: 0; - background-image: url("../svg/chevron-down-dark.svg"); - background-repeat: no-repeat; - background-position: center; - color: transparent; - position: absolute; - height: 8px; - width: 8px; - border: 0; } - .nav-primary .menu-item > li > ul:after { - content: ''; - position: absolute; - width: 0; - height: 0; - overflow: hidden; - border-style: dashed dashed solid; - top: -16px; - left: 31px; - border-width: 8px; - border-color: transparent transparent #fff; } - .nav-primary .menu-item.menu-item-has-children { - margin-right: .8rem; } - .nav-primary .menu-item.menu-item-has-children > a { - padding-right: 1.5rem; - margin-bottom: .8rem; } } + } + + .nav-primary .menu-items { + position: relative; + float: left; + padding: 0; + margin: 0; + background: transparent; + } + + .nav-primary .menu-item { + position: relative; + float: left; + margin: 0; + } + + .nav-primary .menu-item a { + padding: 20px 12px; + font-size: 16px; + font-weight: 600; + color: #333; + } + + .nav-primary .menu-item a.disabled { + color: #bbb; + } + + .nav-primary .menu-item a:hover, + .nav-primary .menu-item a:focus, + .nav-primary .menu-item a:active, + .nav-primary .menu-item a.highlighted, + .nav-primary .menu-item a.current { + color: #333; + } + + .nav-primary .menu-item ul { + position: absolute; + z-index: 999; + padding-top: .5rem; + padding-bottom: .5rem; + margin-top: 18px; + margin-left: 0; + background: #fff; + } + + .nav-primary .menu-item ul.sub-menu { + padding-top: .5rem; + padding-bottom: .5rem; + } + + .nav-primary .menu-item ul.sub-menu li { + margin: 0; + } + + .nav-primary .menu-item ul .dropdown-toggle { + position: absolute; + top: .4rem; + right: 1rem; + border: 0; + } + + .nav-primary .menu-item ul li { + float: none; + width: 19rem; + padding: 0; + } + + .nav-primary .menu-item ul li .dropdown-toggle { + position: absolute; + top: 50%; + right: 8px; + width: 12px; + height: 12px; + padding: 0; + margin-top: 0; + overflow: hidden; + color: transparent; + text-indent: -9999px; + background-color: transparent; + background-image: url('../svg/chevron-right-dark.svg'); + background-repeat: no-repeat; + background-position: center; + border: 0; + } + + .nav-primary .menu-item ul li .dropdown-toggle.toggled-on { + background-image: url('../svg/chevron-left-dark.svg'); + } + + .nav-primary .menu-item ul li.menu-item-has-children a { + width: 100%; + padding-right: 3.5rem; + margin-right: 0; + margin-bottom: 0; + } + + .nav-primary .menu-item ul ul { + top: 0; + left: 100%; + margin-top: -5px; + margin-left: 0; + } + + .nav-primary .menu-item ul a { + display: block; + padding: .8rem 1.5rem; + font-size: 1.4rem; + color: #333; + } + + .nav-primary .menu-item ul a:hover, + .nav-primary .menu-item ul a:focus, + .nav-primary .menu-item ul a:active, + .nav-primary .menu-item ul a.highlighted { + color: #045d30; + } + + .nav-primary .menu-item ul a.disabled { + color: #ccc; + background: #fff; + } + + .nav-primary .menu-item .dropdown-toggle { + position: relative; + position: absolute; + top: 50%; + right: 0; + width: 8px; + height: 8px; + padding: 0; + margin-top: 0; + margin-right: 0; + overflow: hidden; + color: transparent; + text-indent: -9999px; + background-color: transparent; + background-image: url('../svg/chevron-down-dark.svg'); + background-repeat: no-repeat; + background-position: center; + border: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + } + + .nav-primary .menu-item > li > ul:after { + position: absolute; + top: -16px; + left: 31px; + width: 0; + height: 0; + overflow: hidden; + content: ''; + border-color: transparent transparent #fff; + border-style: dashed dashed solid; + border-width: 8px; + } + + .nav-primary .menu-item.menu-item-has-children { + margin-right: .8rem; + } + + .nav-primary .menu-item.menu-item-has-children > a { + padding-right: 1.5rem; + margin-bottom: .8rem; + } +} /*! * Hamburgers @@ -1649,403 +2054,509 @@ form.search-form .search-submit { * @link https://github.com/jonsuh/hamburgers */ .hamburger { + display: inline-block; padding: 50px 15px; padding: 5rem 1.5rem; - display: inline-block; - cursor: pointer; - -webkit-transition-property: opacity, -webkit-filter; - transition-property: opacity, -webkit-filter; - -o-transition-property: opacity, filter; - transition-property: opacity, filter; - transition-property: opacity, filter, -webkit-filter; - -webkit-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; - -webkit-transition-timing-function: linear; - -o-transition-timing-function: linear; - transition-timing-function: linear; + margin: 0; + overflow: visible; font: inherit; color: inherit; text-transform: none; + cursor: pointer; background-color: transparent; border: 0; - margin: 0; - overflow: visible; } - .hamburger:hover { - opacity: 0.8; } + -o-transition-timing-function: linear; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-duration: .15s; + -o-transition-duration: .15s; + transition-duration: .15s; + -o-transition-property: opacity, filter; + -webkit-transition-property: opacity, -webkit-filter; + transition-property: opacity, filter, -webkit-filter; + transition-property: opacity, filter; + transition-property: opacity, -webkit-filter; +} + +.hamburger:hover { + opacity: .8; +} .hamburger-box { + position: relative; + display: inline-block; width: 40px; width: 4rem; height: 18px; height: 1.8rem; - display: inline-block; - position: relative; } +} .hamburger-inner { - display: block; top: 50%; + display: block; margin-top: -1px; - margin-top: -0.1rem; } - .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { - width: 40px; - width: 4rem; - height: 2px; - height: 0.2rem; - background-color: #333; - border-radius: 0; - position: absolute; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; - -o-transition-property: transform; - transition-property: transform; - transition-property: transform, -webkit-transform; - -webkit-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; } - .hamburger-inner::before, .hamburger-inner::after { - content: ""; - display: block; } - .hamburger-inner::before { - top: -8px; - top: -0.8rem; } - .hamburger-inner::after { - bottom: -8px; - bottom: -0.8rem; } + margin-top: -0.1rem; +} + +.hamburger-inner, +.hamburger-inner::before, +.hamburger-inner::after { + position: absolute; + width: 4rem; + width: 40px; + height: 2px; + height: .2rem; + background-color: #333; + border-radius: 0; + -o-transition-timing-function: ease; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; + -webkit-transition-duration: .15s; + -o-transition-duration: .15s; + transition-duration: .15s; + -webkit-transition-property: -webkit-transform; + -o-transition-property: transform; + transition-property: transform; + transition-property: transform, -webkit-transform; + transition-property: -webkit-transform; +} + +.hamburger-inner::before, +.hamburger-inner::after { + display: block; + content: ''; +} + +.hamburger-inner::before { + top: -8px; + top: -0.8rem; +} + +.hamburger-inner::after { + bottom: -8px; + bottom: -0.8rem; +} /* * 3DX */ .hamburger--3dx .hamburger-box { -webkit-perspective: 8rem; - perspective: 8rem; } + perspective: 8rem; +} .hamburger--3dx .hamburger-inner { - -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } - .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { - -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } + -webkit-transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); +} + +.hamburger--3dx .hamburger-inner::before, +.hamburger--3dx .hamburger-inner::after { + -webkit-transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); +} .hamburger--3dx.is-active .hamburger-inner { background-color: transparent; -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); } - .hamburger--3dx.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--3dx.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); } + transform: rotateY(180deg); +} + +.hamburger--3dx.is-active .hamburger-inner::before { + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--3dx.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { -webkit-perspective: 8rem; - perspective: 8rem; } + perspective: 8rem; +} .hamburger--3dx-r .hamburger-inner { - -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } - .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { - -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } + -webkit-transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); +} + +.hamburger--3dx-r .hamburger-inner::before, +.hamburger--3dx-r .hamburger-inner::after { + -webkit-transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); +} .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent; -webkit-transform: rotateY(-180deg); - transform: rotateY(-180deg); } - .hamburger--3dx-r.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--3dx-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); } + transform: rotateY(-180deg); +} + +.hamburger--3dx-r.is-active .hamburger-inner::before { + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--3dx-r.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} /* * 3DY */ .hamburger--3dy .hamburger-box { -webkit-perspective: 8rem; - perspective: 8rem; } + perspective: 8rem; +} .hamburger--3dy .hamburger-inner { - -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } - .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { - -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } + -webkit-transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); +} + +.hamburger--3dy .hamburger-inner::before, +.hamburger--3dy .hamburger-inner::after { + -webkit-transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); +} .hamburger--3dy.is-active .hamburger-inner { background-color: transparent; -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); } - .hamburger--3dy.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--3dy.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); } + transform: rotateX(-180deg); +} + +.hamburger--3dy.is-active .hamburger-inner::before { + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--3dy.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { -webkit-perspective: 8rem; - perspective: 8rem; } + perspective: 8rem; +} .hamburger--3dy-r .hamburger-inner { - -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } - .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { - -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } + -webkit-transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); +} + +.hamburger--3dy-r .hamburger-inner::before, +.hamburger--3dy-r .hamburger-inner::after { + -webkit-transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); +} .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent; -webkit-transform: rotateX(180deg); - transform: rotateX(180deg); } - .hamburger--3dy-r.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--3dy-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); } + transform: rotateX(180deg); +} + +.hamburger--3dy-r.is-active .hamburger-inner::before { + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--3dy-r.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} /* * 3DXY */ .hamburger--3dxy .hamburger-box { -webkit-perspective: 8rem; - perspective: 8rem; } + perspective: 8rem; +} .hamburger--3dxy .hamburger-inner { - -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } - .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { - -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } + -webkit-transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); +} + +.hamburger--3dxy .hamburger-inner::before, +.hamburger--3dxy .hamburger-inner::after { + -webkit-transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); +} .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent; -webkit-transform: rotateX(180deg) rotateY(180deg); - transform: rotateX(180deg) rotateY(180deg); } - .hamburger--3dxy.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--3dxy.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); } + transform: rotateX(180deg) rotateY(180deg); +} + +.hamburger--3dxy.is-active .hamburger-inner::before { + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--3dxy.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { -webkit-perspective: 8rem; - perspective: 8rem; } + perspective: 8rem; +} .hamburger--3dxy-r .hamburger-inner { - -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } - .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { - -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - -o-transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } + -webkit-transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform .15s cubic-bezier(.645, .045, .355, 1), background-color 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform .15s cubic-bezier(.645, .045, .355, 1); +} + +.hamburger--3dxy-r .hamburger-inner::before, +.hamburger--3dxy-r .hamburger-inner::after { + -webkit-transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + -o-transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1); + transition: transform 0s .1s cubic-bezier(.645, .045, .355, 1), -webkit-transform 0s .1s cubic-bezier(.645, .045, .355, 1); +} .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent; -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); - transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } - .hamburger--3dxy-r.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--3dxy-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); } + transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); +} + +.hamburger--3dxy-r.is-active .hamburger-inner::before { + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--3dxy-r.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { - -webkit-transform: translate3d(-0.8rem, 0, 0) rotate(-45deg) scale(0.7, 1); - transform: translate3d(-0.8rem, 0, 0) rotate(-45deg) scale(0.7, 1); } + -webkit-transform: translate3d(-0.8rem, 0, 0) rotate(-45deg) scale(.7, 1); + transform: translate3d(-0.8rem, 0, 0) rotate(-45deg) scale(.7, 1); +} .hamburger--arrow.is-active .hamburger-inner::after { - -webkit-transform: translate3d(-0.8rem, 0, 0) rotate(45deg) scale(0.7, 1); - transform: translate3d(-0.8rem, 0, 0) rotate(45deg) scale(0.7, 1); } + -webkit-transform: translate3d(-0.8rem, 0, 0) rotate(45deg) scale(.7, 1); + transform: translate3d(-0.8rem, 0, 0) rotate(45deg) scale(.7, 1); +} /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { - -webkit-transform: translate3d(0.8rem, 0, 0) rotate(45deg) scale(0.7, 1); - transform: translate3d(0.8rem, 0, 0) rotate(45deg) scale(0.7, 1); } + -webkit-transform: translate3d(.8rem, 0, 0) rotate(45deg) scale(.7, 1); + transform: translate3d(.8rem, 0, 0) rotate(45deg) scale(.7, 1); +} .hamburger--arrow-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0.8rem, 0, 0) rotate(-45deg) scale(0.7, 1); - transform: translate3d(0.8rem, 0, 0) rotate(-45deg) scale(0.7, 1); } + -webkit-transform: translate3d(.8rem, 0, 0) rotate(-45deg) scale(.7, 1); + transform: translate3d(.8rem, 0, 0) rotate(-45deg) scale(.7, 1); +} /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { - -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - -o-transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } + -webkit-transition: top .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + -o-transition: top .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: top .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + transition: top .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: top .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); +} .hamburger--arrowalt .hamburger-inner::after { - -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - -o-transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } + -webkit-transition: bottom .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + -o-transition: bottom .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: bottom .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + transition: bottom .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: bottom .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); +} .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; - -webkit-transform: translate3d(-0.8rem, -1rem, 0) rotate(-45deg) scale(0.7, 1); - transform: translate3d(-0.8rem, -1rem, 0) rotate(-45deg) scale(0.7, 1); - -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - -o-transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } + -webkit-transition: top .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -o-transition: top .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: top .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: top .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: top .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22), -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -webkit-transform: translate3d(-0.8rem, -1rem, 0) rotate(-45deg) scale(.7, 1); + transform: translate3d(-0.8rem, -1rem, 0) rotate(-45deg) scale(.7, 1); +} .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; - -webkit-transform: translate3d(-0.8rem, 1rem, 0) rotate(45deg) scale(0.7, 1); - transform: translate3d(-0.8rem, 1rem, 0) rotate(45deg) scale(0.7, 1); - -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - -o-transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } + -webkit-transition: bottom .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -o-transition: bottom .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: bottom .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: bottom .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: bottom .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22), -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -webkit-transform: translate3d(-0.8rem, 1rem, 0) rotate(45deg) scale(.7, 1); + transform: translate3d(-0.8rem, 1rem, 0) rotate(45deg) scale(.7, 1); +} /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { - -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - -o-transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } + -webkit-transition: top .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + -o-transition: top .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: top .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + transition: top .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: top .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); +} .hamburger--arrowalt-r .hamburger-inner::after { - -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - -o-transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); - transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } + -webkit-transition: bottom .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + -o-transition: bottom .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: bottom .1s .1s ease, -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); + transition: bottom .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1); + transition: bottom .1s .1s ease, transform .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .1s cubic-bezier(.165, .84, .44, 1); +} .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; - -webkit-transform: translate3d(0.8rem, -1rem, 0) rotate(45deg) scale(0.7, 1); - transform: translate3d(0.8rem, -1rem, 0) rotate(45deg) scale(0.7, 1); - -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - -o-transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } + -webkit-transition: top .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -o-transition: top .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: top .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: top .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: top .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22), -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -webkit-transform: translate3d(.8rem, -1rem, 0) rotate(45deg) scale(.7, 1); + transform: translate3d(.8rem, -1rem, 0) rotate(45deg) scale(.7, 1); +} .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; - -webkit-transform: translate3d(0.8rem, 1rem, 0) rotate(-45deg) scale(0.7, 1); - transform: translate3d(0.8rem, 1rem, 0) rotate(-45deg) scale(0.7, 1); - -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - -o-transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); - transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } + -webkit-transition: bottom .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -o-transition: bottom .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: bottom .1s ease, -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: bottom .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22); + transition: bottom .1s ease, transform .1s .1s cubic-bezier(.895, .03, .685, .22), -webkit-transform .1s .1s cubic-bezier(.895, .03, .685, .22); + -webkit-transform: translate3d(.8rem, 1rem, 0) rotate(-45deg) scale(.7, 1); + transform: translate3d(.8rem, 1rem, 0) rotate(-45deg) scale(.7, 1); +} /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); } - .hamburger--arrowturn.is-active .hamburger-inner::before { - -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); - transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } - .hamburger--arrowturn.is-active .hamburger-inner::after { - -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); - transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); +} + +.hamburger--arrowturn.is-active .hamburger-inner::before { + -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(.7, 1); + transform: translate3d(8px, 0, 0) rotate(45deg) scale(.7, 1); +} + +.hamburger--arrowturn.is-active .hamburger-inner::after { + -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(.7, 1); + transform: translate3d(8px, 0, 0) rotate(-45deg) scale(.7, 1); +} /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); } - .hamburger--arrowturn-r.is-active .hamburger-inner::before { - -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); - transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } - .hamburger--arrowturn-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); - transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); +} + +.hamburger--arrowturn-r.is-active .hamburger-inner::before { + -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(.7, 1); + transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(.7, 1); +} + +.hamburger--arrowturn-r.is-active .hamburger-inner::after { + -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(.7, 1); + transform: translate3d(-8px, 0, 0) rotate(45deg) scale(.7, 1); +} /* * Boring */ -.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { +.hamburger--boring .hamburger-inner, +.hamburger--boring .hamburger-inner::before, +.hamburger--boring .hamburger-inner::after { -webkit-transition-property: none; -o-transition-property: none; - transition-property: none; } + transition-property: none; +} .hamburger--boring.is-active .hamburger-inner { -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); } - .hamburger--boring.is-active .hamburger-inner::before { - top: 0; - opacity: 0; } - .hamburger--boring.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); } + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.hamburger--boring.is-active .hamburger-inner::before { + top: 0; + opacity: 0; +} + +.hamburger--boring.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} /* * Collapse @@ -2053,53 +2564,63 @@ form.search-form .search-submit { .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; - -webkit-transition-duration: 0.13s; - -o-transition-duration: 0.13s; - transition-duration: 0.13s; - -webkit-transition-delay: 0.13s; - -o-transition-delay: 0.13s; - transition-delay: 0.13s; - -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--collapse .hamburger-inner::after { - top: -16px; - top: -1.6rem; - -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; - -o-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; - transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } - .hamburger--collapse .hamburger-inner::before { - -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + -o-transition-delay: .13s; + -webkit-transition-delay: .13s; + transition-delay: .13s; + -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-duration: .13s; + -webkit-transition-duration: .13s; + transition-duration: .13s; +} + +.hamburger--collapse .hamburger-inner::after { + top: -16px; + top: -1.6rem; + -webkit-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity .1s linear; + -o-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity .1s linear; + transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity .1s linear; +} + +.hamburger--collapse .hamburger-inner::before { + -webkit-transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); +} .hamburger--collapse.is-active .hamburger-inner { + -webkit-transition-delay: .22s; + -o-transition-delay: .22s; + transition-delay: .22s; + -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - -webkit-transition-delay: 0.22s; - -o-transition-delay: 0.22s; - transition-delay: 0.22s; - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--collapse.is-active .hamburger-inner::after { - top: 0; - opacity: 0; - -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; - -o-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; - transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } - .hamburger--collapse.is-active .hamburger-inner::before { - top: 0; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} + +.hamburger--collapse.is-active .hamburger-inner::after { + top: 0; + opacity: 0; + -webkit-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s .22s linear; + -o-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s .22s linear; + transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s .22s linear; +} + +.hamburger--collapse.is-active .hamburger-inner::before { + top: 0; + -webkit-transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .25s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .25s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .25s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .25s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .25s cubic-bezier(.215, .61, .355, 1), -webkit-transform .13s .25s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} /* * Collapse Reverse @@ -2107,495 +2628,613 @@ form.search-form .search-submit { .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; - -webkit-transition-duration: 0.13s; - -o-transition-duration: 0.13s; - transition-duration: 0.13s; - -webkit-transition-delay: 0.13s; - -o-transition-delay: 0.13s; - transition-delay: 0.13s; - -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--collapse-r .hamburger-inner::after { - top: -16px; - top: -1.6rem; - -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; - -o-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; - transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } - .hamburger--collapse-r .hamburger-inner::before { - -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + -o-transition-delay: .13s; + -webkit-transition-delay: .13s; + transition-delay: .13s; + -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-duration: .13s; + -webkit-transition-duration: .13s; + transition-duration: .13s; +} + +.hamburger--collapse-r .hamburger-inner::after { + top: -16px; + top: -1.6rem; + -webkit-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity .1s linear; + -o-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity .1s linear; + transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity .1s linear; +} + +.hamburger--collapse-r .hamburger-inner::before { + -webkit-transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .12s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); +} .hamburger--collapse-r.is-active .hamburger-inner { + -webkit-transition-delay: .22s; + -o-transition-delay: .22s; + transition-delay: .22s; + -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0, -0.8rem, 0) rotate(45deg); - transform: translate3d(0, -0.8rem, 0) rotate(45deg); - -webkit-transition-delay: 0.22s; - -o-transition-delay: 0.22s; - transition-delay: 0.22s; - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--collapse-r.is-active .hamburger-inner::after { - top: 0; - opacity: 0; - -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; - -o-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; - transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } - .hamburger--collapse-r.is-active .hamburger-inner::before { - top: 0; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } + transform: translate3d(0, -0.8rem, 0) rotate(45deg); +} + +.hamburger--collapse-r.is-active .hamburger-inner::after { + top: 0; + opacity: 0; + -webkit-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s .22s linear; + -o-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s .22s linear; + transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s .22s linear; +} + +.hamburger--collapse-r.is-active .hamburger-inner::before { + top: 0; + -webkit-transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .25s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .25s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .25s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .25s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .16s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .25s cubic-bezier(.215, .61, .355, 1), -webkit-transform .13s .25s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 1px; - top: 0.1rem; - -webkit-transition-duration: 0.275s; - -o-transition-duration: 0.275s; - transition-duration: 0.275s; - -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); - -o-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } - .hamburger--elastic .hamburger-inner::before { - top: 8px; - top: 0.8rem; - -webkit-transition: opacity 0.125s 0.275s ease; - -o-transition: opacity 0.125s 0.275s ease; - transition: opacity 0.125s 0.275s ease; } - .hamburger--elastic .hamburger-inner::after { - top: 16px; - top: 1.6rem; - -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - -o-transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } + top: .1rem; + -webkit-transition-timing-function: cubic-bezier(.68, -0.55, .265, 1.55); + -o-transition-timing-function: cubic-bezier(.68, -0.55, .265, 1.55); + transition-timing-function: cubic-bezier(.68, -0.55, .265, 1.55); + -webkit-transition-duration: .275s; + -o-transition-duration: .275s; + transition-duration: .275s; +} + +.hamburger--elastic .hamburger-inner::before { + top: 8px; + top: .8rem; + -webkit-transition: opacity .125s .275s ease; + -o-transition: opacity .125s .275s ease; + transition: opacity .125s .275s ease; +} + +.hamburger--elastic .hamburger-inner::after { + top: 16px; + top: 1.6rem; + -webkit-transition: -webkit-transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + -o-transition: transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + transition: -webkit-transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + transition: transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + transition: transform .275s cubic-bezier(.68, -0.55, .265, 1.55), -webkit-transform .275s cubic-bezier(.68, -0.55, .265, 1.55); +} .hamburger--elastic.is-active .hamburger-inner { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(135deg); - transform: translate3d(0, 0.8rem, 0) rotate(135deg); - -webkit-transition-delay: 0.075s; - -o-transition-delay: 0.075s; - transition-delay: 0.075s; } - .hamburger--elastic.is-active .hamburger-inner::before { - -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; - opacity: 0; } - .hamburger--elastic.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -1.6rem, 0) rotate(-270deg); - transform: translate3d(0, -1.6rem, 0) rotate(-270deg); - -webkit-transition-delay: 0.075s; - -o-transition-delay: 0.075s; - transition-delay: 0.075s; } + -webkit-transition-delay: .075s; + -o-transition-delay: .075s; + transition-delay: .075s; + -webkit-transform: translate3d(0, .8rem, 0) rotate(135deg); + transform: translate3d(0, .8rem, 0) rotate(135deg); +} + +.hamburger--elastic.is-active .hamburger-inner::before { + opacity: 0; + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; +} + +.hamburger--elastic.is-active .hamburger-inner::after { + -webkit-transition-delay: .075s; + -o-transition-delay: .075s; + transition-delay: .075s; + -webkit-transform: translate3d(0, -1.6rem, 0) rotate(-270deg); + transform: translate3d(0, -1.6rem, 0) rotate(-270deg); +} /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 1px; - top: 0.1rem; - -webkit-transition-duration: 0.275s; - -o-transition-duration: 0.275s; - transition-duration: 0.275s; - -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); - -o-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } - .hamburger--elastic-r .hamburger-inner::before { - top: 8px; - top: 0.8rem; - -webkit-transition: opacity 0.125s 0.275s ease; - -o-transition: opacity 0.125s 0.275s ease; - transition: opacity 0.125s 0.275s ease; } - .hamburger--elastic-r .hamburger-inner::after { - top: 16px; - top: 1.6rem; - -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - -o-transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); - transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } + top: .1rem; + -webkit-transition-timing-function: cubic-bezier(.68, -0.55, .265, 1.55); + -o-transition-timing-function: cubic-bezier(.68, -0.55, .265, 1.55); + transition-timing-function: cubic-bezier(.68, -0.55, .265, 1.55); + -webkit-transition-duration: .275s; + -o-transition-duration: .275s; + transition-duration: .275s; +} + +.hamburger--elastic-r .hamburger-inner::before { + top: 8px; + top: .8rem; + -webkit-transition: opacity .125s .275s ease; + -o-transition: opacity .125s .275s ease; + transition: opacity .125s .275s ease; +} + +.hamburger--elastic-r .hamburger-inner::after { + top: 16px; + top: 1.6rem; + -webkit-transition: -webkit-transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + -o-transition: transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + transition: -webkit-transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + transition: transform .275s cubic-bezier(.68, -0.55, .265, 1.55); + transition: transform .275s cubic-bezier(.68, -0.55, .265, 1.55), -webkit-transform .275s cubic-bezier(.68, -0.55, .265, 1.55); +} .hamburger--elastic-r.is-active .hamburger-inner { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(-135deg); - transform: translate3d(0, 0.8rem, 0) rotate(-135deg); - -webkit-transition-delay: 0.075s; - -o-transition-delay: 0.075s; - transition-delay: 0.075s; } - .hamburger--elastic-r.is-active .hamburger-inner::before { - -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; - opacity: 0; } - .hamburger--elastic-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -1.6rem, 0) rotate(270deg); - transform: translate3d(0, -1.6rem, 0) rotate(270deg); - -webkit-transition-delay: 0.075s; - -o-transition-delay: 0.075s; - transition-delay: 0.075s; } + -webkit-transition-delay: .075s; + -o-transition-delay: .075s; + transition-delay: .075s; + -webkit-transform: translate3d(0, .8rem, 0) rotate(-135deg); + transform: translate3d(0, .8rem, 0) rotate(-135deg); +} + +.hamburger--elastic-r.is-active .hamburger-inner::before { + opacity: 0; + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; +} + +.hamburger--elastic-r.is-active .hamburger-inner::after { + -webkit-transition-delay: .075s; + -o-transition-delay: .075s; + transition-delay: .075s; + -webkit-transform: translate3d(0, -1.6rem, 0) rotate(270deg); + transform: translate3d(0, -1.6rem, 0) rotate(270deg); +} /* * Emphatic */ .hamburger--emphatic { - overflow: hidden; } - .hamburger--emphatic .hamburger-inner { - -webkit-transition: background-color 0.125s 0.175s ease-in; - -o-transition: background-color 0.125s 0.175s ease-in; - transition: background-color 0.125s 0.175s ease-in; } - .hamburger--emphatic .hamburger-inner::before { - left: 0; - -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - -o-transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } - .hamburger--emphatic .hamburger-inner::after { - top: 8px; - top: 0.8rem; - right: 0; - -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - -o-transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } - .hamburger--emphatic.is-active .hamburger-inner { - -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; - -webkit-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; - background-color: transparent; } - .hamburger--emphatic.is-active .hamburger-inner::before { - left: -80px; - left: -8rem; - top: -80px; - top: -8rem; - -webkit-transform: translate3d(8rem, 8rem, 0) rotate(45deg); - transform: translate3d(8rem, 8rem, 0) rotate(45deg); - -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - -o-transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } - .hamburger--emphatic.is-active .hamburger-inner::after { - right: -80px; - right: -8rem; - top: -80px; - top: -8rem; - -webkit-transform: translate3d(-8rem, 8rem, 0) rotate(-45deg); - transform: translate3d(-8rem, 8rem, 0) rotate(-45deg); - -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - -o-transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } + overflow: hidden; +} + +.hamburger--emphatic .hamburger-inner { + -webkit-transition: background-color .125s .175s ease-in; + -o-transition: background-color .125s .175s ease-in; + transition: background-color .125s .175s ease-in; +} + +.hamburger--emphatic .hamburger-inner::before { + left: 0; + -webkit-transition: top .05s .125s linear, left .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + -o-transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, left .125s .175s ease-in; + transition: top .05s .125s linear, left .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, left .125s .175s ease-in; + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, left .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); +} + +.hamburger--emphatic .hamburger-inner::after { + top: 8px; + top: .8rem; + right: 0; + -webkit-transition: top .05s .125s linear, right .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + -o-transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, right .125s .175s ease-in; + transition: top .05s .125s linear, right .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, right .125s .175s ease-in; + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, right .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); +} + +.hamburger--emphatic.is-active .hamburger-inner { + background-color: transparent; + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; + -webkit-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} + +.hamburger--emphatic.is-active .hamburger-inner::before { + top: -80px; + top: -8rem; + left: -80px; + left: -8rem; + transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1), -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transition: left .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: left .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -o-transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transform: translate3d(8rem, 8rem, 0) rotate(45deg); + transform: translate3d(8rem, 8rem, 0) rotate(45deg); +} + +.hamburger--emphatic.is-active .hamburger-inner::after { + top: -80px; + top: -8rem; + right: -80px; + right: -8rem; + transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1), -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transition: right .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: right .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -o-transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transform: translate3d(-8rem, 8rem, 0) rotate(-45deg); + transform: translate3d(-8rem, 8rem, 0) rotate(-45deg); +} /* * Emphatic Reverse */ .hamburger--emphatic-r { - overflow: hidden; } - .hamburger--emphatic-r .hamburger-inner { - -webkit-transition: background-color 0.125s 0.175s ease-in; - -o-transition: background-color 0.125s 0.175s ease-in; - transition: background-color 0.125s 0.175s ease-in; } - .hamburger--emphatic-r .hamburger-inner::before { - left: 0; - -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - -o-transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } - .hamburger--emphatic-r .hamburger-inner::after { - top: 8px; - top: 0.8rem; - right: 0; - -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); - -o-transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; - transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } - .hamburger--emphatic-r.is-active .hamburger-inner { - -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; - -webkit-transition-timing-function: ease-out; - -o-transition-timing-function: ease-out; - transition-timing-function: ease-out; - background-color: transparent; } - .hamburger--emphatic-r.is-active .hamburger-inner::before { - left: -80px; - left: -8rem; - top: 80px; - top: 8rem; - -webkit-transform: translate3d(8rem, -8rem, 0) rotate(-45deg); - transform: translate3d(8rem, -8rem, 0) rotate(-45deg); - -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - -o-transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } - .hamburger--emphatic-r.is-active .hamburger-inner::after { - right: -80px; - right: -8rem; - top: 80px; - top: 8rem; - -webkit-transform: translate3d(-8rem, -8rem, 0) rotate(45deg); - transform: translate3d(-8rem, -8rem, 0) rotate(45deg); - -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - -o-transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); - transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } + overflow: hidden; +} + +.hamburger--emphatic-r .hamburger-inner { + -webkit-transition: background-color .125s .175s ease-in; + -o-transition: background-color .125s .175s ease-in; + transition: background-color .125s .175s ease-in; +} + +.hamburger--emphatic-r .hamburger-inner::before { + left: 0; + -webkit-transition: top .05s .125s linear, left .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + -o-transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, left .125s .175s ease-in; + transition: top .05s .125s linear, left .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, left .125s .175s ease-in; + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, left .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); +} + +.hamburger--emphatic-r .hamburger-inner::after { + top: 8px; + top: .8rem; + right: 0; + -webkit-transition: top .05s .125s linear, right .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + -o-transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, right .125s .175s ease-in; + transition: top .05s .125s linear, right .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, right .125s .175s ease-in; + transition: transform .125s cubic-bezier(.6, .04, .98, .335), top .05s .125s linear, right .125s .175s ease-in, -webkit-transform .125s cubic-bezier(.6, .04, .98, .335); +} + +.hamburger--emphatic-r.is-active .hamburger-inner { + background-color: transparent; + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; + -webkit-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} + +.hamburger--emphatic-r.is-active .hamburger-inner::before { + top: 80px; + top: 8rem; + left: -80px; + left: -8rem; + transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1), -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transition: left .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: left .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -o-transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transform: translate3d(8rem, -8rem, 0) rotate(-45deg); + transform: translate3d(8rem, -8rem, 0) rotate(-45deg); +} + +.hamburger--emphatic-r.is-active .hamburger-inner::after { + top: 80px; + top: 8rem; + right: -80px; + right: -8rem; + transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1), -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transition: right .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + transition: right .125s ease-out, top .05s .125s linear, -webkit-transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -o-transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(.075, .82, .165, 1); + -webkit-transform: translate3d(-8rem, -8rem, 0) rotate(45deg); + transform: translate3d(-8rem, -8rem, 0) rotate(45deg); +} /* * Minus */ -.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { - -webkit-transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; - -o-transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; - transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } - -.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { +.hamburger--minus .hamburger-inner::before, +.hamburger--minus .hamburger-inner::after { + -webkit-transition: bottom .08s 0s ease-out, top .08s 0s ease-out, opacity 0s linear; + -o-transition: bottom .08s 0s ease-out, top .08s 0s ease-out, opacity 0s linear; + transition: bottom .08s 0s ease-out, top .08s 0s ease-out, opacity 0s linear; +} + +.hamburger--minus.is-active .hamburger-inner::before, +.hamburger--minus.is-active .hamburger-inner::after { opacity: 0; - -webkit-transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; - -o-transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; - transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } + -webkit-transition: bottom .08s ease-out, top .08s ease-out, opacity 0s .08s linear; + -o-transition: bottom .08s ease-out, top .08s ease-out, opacity 0s .08s linear; + transition: bottom .08s ease-out, top .08s ease-out, opacity 0s .08s linear; +} .hamburger--minus.is-active .hamburger-inner::before { - top: 0; } + top: 0; +} .hamburger--minus.is-active .hamburger-inner::after { - bottom: 0; } + bottom: 0; +} /* * Slider */ .hamburger--slider .hamburger-inner { top: 1px; - top: 0.1rem; } - .hamburger--slider .hamburger-inner::before { - top: 8px; - top: 0.8rem; - -webkit-transition-property: opacity, -webkit-transform; - transition-property: opacity, -webkit-transform; - -o-transition-property: transform, opacity; - transition-property: transform, opacity; - transition-property: transform, opacity, -webkit-transform; - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; - -webkit-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; } - .hamburger--slider .hamburger-inner::after { - top: 16px; - top: 1.6rem; } + top: .1rem; +} + +.hamburger--slider .hamburger-inner::before { + top: 8px; + top: .8rem; + -o-transition-timing-function: ease; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; + -o-transition-duration: .15s; + -webkit-transition-duration: .15s; + transition-duration: .15s; + -o-transition-property: transform, opacity; + -webkit-transition-property: opacity, -webkit-transform; + transition-property: transform, opacity; + transition-property: opacity, -webkit-transform; + transition-property: transform, opacity, -webkit-transform; +} + +.hamburger--slider .hamburger-inner::after { + top: 16px; + top: 1.6rem; +} .hamburger--slider.is-active .hamburger-inner { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--slider.is-active .hamburger-inner::before { - -webkit-transform: rotate(-45deg) translate3d(-0.57143rem, -0.6rem, 0); - transform: rotate(-45deg) translate3d(-0.57143rem, -0.6rem, 0); - opacity: 0; } - .hamburger--slider.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -1.6rem, 0) rotate(-90deg); - transform: translate3d(0, -1.6rem, 0) rotate(-90deg); } + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--slider.is-active .hamburger-inner::before { + opacity: 0; + -webkit-transform: rotate(-45deg) translate3d(-0.57143rem, -0.6rem, 0); + transform: rotate(-45deg) translate3d(-0.57143rem, -0.6rem, 0); +} + +.hamburger--slider.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -1.6rem, 0) rotate(-90deg); + transform: translate3d(0, -1.6rem, 0) rotate(-90deg); +} /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 1px; - top: 0.1rem; } - .hamburger--slider-r .hamburger-inner::before { - top: 8px; - top: 0.8rem; - -webkit-transition-property: opacity, -webkit-transform; - transition-property: opacity, -webkit-transform; - -o-transition-property: transform, opacity; - transition-property: transform, opacity; - transition-property: transform, opacity, -webkit-transform; - -webkit-transition-timing-function: ease; - -o-transition-timing-function: ease; - transition-timing-function: ease; - -webkit-transition-duration: 0.15s; - -o-transition-duration: 0.15s; - transition-duration: 0.15s; } - .hamburger--slider-r .hamburger-inner::after { - top: 16px; - top: 1.6rem; } + top: .1rem; +} + +.hamburger--slider-r .hamburger-inner::before { + top: 8px; + top: .8rem; + -o-transition-timing-function: ease; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; + -o-transition-duration: .15s; + -webkit-transition-duration: .15s; + transition-duration: .15s; + -o-transition-property: transform, opacity; + -webkit-transition-property: opacity, -webkit-transform; + transition-property: transform, opacity; + transition-property: opacity, -webkit-transform; + transition-property: transform, opacity, -webkit-transform; +} + +.hamburger--slider-r .hamburger-inner::after { + top: 16px; + top: 1.6rem; +} .hamburger--slider-r.is-active .hamburger-inner { - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(-45deg); - transform: translate3d(0, 0.8rem, 0) rotate(-45deg); } - .hamburger--slider-r.is-active .hamburger-inner::before { - -webkit-transform: rotate(45deg) translate3d(0.57143rem, -0.6rem, 0); - transform: rotate(45deg) translate3d(0.57143rem, -0.6rem, 0); - opacity: 0; } - .hamburger--slider-r.is-active .hamburger-inner::after { - -webkit-transform: translate3d(0, -1.6rem, 0) rotate(90deg); - transform: translate3d(0, -1.6rem, 0) rotate(90deg); } + -webkit-transform: translate3d(0, .8rem, 0) rotate(-45deg); + transform: translate3d(0, .8rem, 0) rotate(-45deg); +} + +.hamburger--slider-r.is-active .hamburger-inner::before { + opacity: 0; + -webkit-transform: rotate(45deg) translate3d(.57143rem, -0.6rem, 0); + transform: rotate(45deg) translate3d(.57143rem, -0.6rem, 0); +} + +.hamburger--slider-r.is-active .hamburger-inner::after { + -webkit-transform: translate3d(0, -1.6rem, 0) rotate(90deg); + transform: translate3d(0, -1.6rem, 0) rotate(90deg); +} /* * Spin */ -.hamburger--spin .hamburger-inner, .hamburger .hamburger-inner { - -webkit-transition-duration: 0.22s; - -o-transition-duration: 0.22s; - transition-duration: 0.22s; - -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--spin .hamburger-inner::before, .hamburger .hamburger-inner::before { - -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; - -o-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; - transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } - .hamburger--spin .hamburger-inner::after, .hamburger .hamburger-inner::after { - -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } - -.hamburger--spin.is-active .hamburger-inner, .is-active.hamburger .hamburger-inner { +.hamburger--spin .hamburger-inner, +.hamburger .hamburger-inner { + -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -webkit-transition-duration: .22s; + -o-transition-duration: .22s; + transition-duration: .22s; +} + +.hamburger--spin .hamburger-inner::before, +.hamburger .hamburger-inner::before { + -webkit-transition: top .1s .25s ease-in, opacity .1s ease-in; + -o-transition: top .1s .25s ease-in, opacity .1s ease-in; + transition: top .1s .25s ease-in, opacity .1s ease-in; +} + +.hamburger--spin .hamburger-inner::after, +.hamburger .hamburger-inner::after { + -webkit-transition: bottom .1s .25s ease-in, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19); + -o-transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); + transition: bottom .1s .25s ease-in, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19); + transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); + transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19), -webkit-transform .22s cubic-bezier(.55, .055, .675, .19); +} + +.hamburger--spin.is-active .hamburger-inner, +.is-active.hamburger .hamburger-inner { + -webkit-transition-delay: .12s; + -o-transition-delay: .12s; + transition-delay: .12s; + -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: rotate(225deg); - -ms-transform: rotate(225deg); - transform: rotate(225deg); - -webkit-transition-delay: 0.12s; - -o-transition-delay: 0.12s; - transition-delay: 0.12s; - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--spin.is-active .hamburger-inner::before, .is-active.hamburger .hamburger-inner::before { - top: 0; - opacity: 0; - -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; - -o-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; - transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } - .hamburger--spin.is-active .hamburger-inner::after, .is-active.hamburger .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } + -ms-transform: rotate(225deg); + transform: rotate(225deg); +} + +.hamburger--spin.is-active .hamburger-inner::before, +.is-active.hamburger .hamburger-inner::before { + top: 0; + opacity: 0; + -webkit-transition: top .1s ease-out, opacity .1s .12s ease-out; + -o-transition: top .1s ease-out, opacity .1s .12s ease-out; + transition: top .1s ease-out, opacity .1s .12s ease-out; +} + +.hamburger--spin.is-active .hamburger-inner::after, +.is-active.hamburger .hamburger-inner::after { + bottom: 0; + -webkit-transition: bottom .1s ease-out, -webkit-transform .22s .12s cubic-bezier(.215, .61, .355, 1); + -o-transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .1s ease-out, -webkit-transform .22s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1), -webkit-transform .22s .12s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { - -webkit-transition-duration: 0.22s; - -o-transition-duration: 0.22s; - transition-duration: 0.22s; - -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--spin-r .hamburger-inner::before { - -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; - -o-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; - transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } - .hamburger--spin-r .hamburger-inner::after { - -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -webkit-transition-duration: .22s; + -o-transition-duration: .22s; + transition-duration: .22s; +} + +.hamburger--spin-r .hamburger-inner::before { + -webkit-transition: top .1s .25s ease-in, opacity .1s ease-in; + -o-transition: top .1s .25s ease-in, opacity .1s ease-in; + transition: top .1s .25s ease-in, opacity .1s ease-in; +} + +.hamburger--spin-r .hamburger-inner::after { + -webkit-transition: bottom .1s .25s ease-in, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19); + -o-transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); + transition: bottom .1s .25s ease-in, -webkit-transform .22s cubic-bezier(.55, .055, .675, .19); + transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); + transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19), -webkit-transform .22s cubic-bezier(.55, .055, .675, .19); +} .hamburger--spin-r.is-active .hamburger-inner { + -webkit-transition-delay: .12s; + -o-transition-delay: .12s; + transition-delay: .12s; + -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: rotate(-225deg); - -ms-transform: rotate(-225deg); - transform: rotate(-225deg); - -webkit-transition-delay: 0.12s; - -o-transition-delay: 0.12s; - transition-delay: 0.12s; - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--spin-r.is-active .hamburger-inner::before { - top: 0; - opacity: 0; - -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; - -o-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; - transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } - .hamburger--spin-r.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } + -ms-transform: rotate(-225deg); + transform: rotate(-225deg); +} + +.hamburger--spin-r.is-active .hamburger-inner::before { + top: 0; + opacity: 0; + -webkit-transition: top .1s ease-out, opacity .1s .12s ease-out; + -o-transition: top .1s ease-out, opacity .1s .12s ease-out; + transition: top .1s ease-out, opacity .1s .12s ease-out; +} + +.hamburger--spin-r.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transition: bottom .1s ease-out, -webkit-transform .22s .12s cubic-bezier(.215, .61, .355, 1); + -o-transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .1s ease-out, -webkit-transform .22s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1), -webkit-transform .22s .12s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} /* * Spring */ .hamburger--spring .hamburger-inner { top: 1px; - top: 0.1rem; - -webkit-transition: background-color 0s 0.13s linear; - -o-transition: background-color 0s 0.13s linear; - transition: background-color 0s 0.13s linear; } - .hamburger--spring .hamburger-inner::before { - top: 8px; - top: 0.8rem; - -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--spring .hamburger-inner::after { - top: 16px; - top: 1.6rem; - -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + top: .1rem; + -webkit-transition: background-color 0s .13s linear; + -o-transition: background-color 0s .13s linear; + transition: background-color 0s .13s linear; +} + +.hamburger--spring .hamburger-inner::before { + top: 8px; + top: .8rem; + -webkit-transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); +} + +.hamburger--spring .hamburger-inner::after { + top: 16px; + top: 1.6rem; + -webkit-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); +} .hamburger--spring.is-active .hamburger-inner { - -webkit-transition-delay: 0.22s; - -o-transition-delay: 0.22s; - transition-delay: 0.22s; - background-color: transparent; } - .hamburger--spring.is-active .hamburger-inner::before { - top: 0; - -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(45deg); - transform: translate3d(0, 0.8rem, 0) rotate(45deg); } - .hamburger--spring.is-active .hamburger-inner::after { - top: 0; - -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0.8rem, 0) rotate(-45deg); - transform: translate3d(0, 0.8rem, 0) rotate(-45deg); } + background-color: transparent; + -webkit-transition-delay: .22s; + -o-transition-delay: .22s; + transition-delay: .22s; +} + +.hamburger--spring.is-active .hamburger-inner::before { + top: 0; + -webkit-transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: translate3d(0, .8rem, 0) rotate(45deg); + transform: translate3d(0, .8rem, 0) rotate(45deg); +} + +.hamburger--spring.is-active .hamburger-inner::after { + top: 0; + -webkit-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: translate3d(0, .8rem, 0) rotate(-45deg); + transform: translate3d(0, .8rem, 0) rotate(-45deg); +} /* * Spring Reverse @@ -2603,1418 +3242,1996 @@ form.search-form .search-submit { .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; - -webkit-transition-duration: 0.13s; - -o-transition-duration: 0.13s; - transition-duration: 0.13s; + -o-transition-delay: 0s; -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; - -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--spring-r .hamburger-inner::after { - top: -16px; - top: -1.6rem; - -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; - -o-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; - transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } - .hamburger--spring-r .hamburger-inner::before { - -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + transition-delay: 0s; + -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-duration: .13s; + -webkit-transition-duration: .13s; + transition-duration: .13s; +} + +.hamburger--spring-r .hamburger-inner::after { + top: -16px; + top: -1.6rem; + -webkit-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity 0s linear; + -o-transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity 0s linear; + transition: top .2s .2s cubic-bezier(.33333, .66667, .66667, 1), opacity 0s linear; +} + +.hamburger--spring-r .hamburger-inner::before { + -webkit-transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19); + transition: top .1s .2s cubic-bezier(.33333, .66667, .66667, 1), transform .13s cubic-bezier(.55, .055, .675, .19), -webkit-transform .13s cubic-bezier(.55, .055, .675, .19); +} .hamburger--spring-r.is-active .hamburger-inner { + -webkit-transition-delay: .22s; + -o-transition-delay: .22s; + transition-delay: .22s; + -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - transform: translate3d(0, -0.8rem, 0) rotate(-45deg); - -webkit-transition-delay: 0.22s; - -o-transition-delay: 0.22s; - transition-delay: 0.22s; - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--spring-r.is-active .hamburger-inner::after { - top: 0; - opacity: 0; - -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; - -o-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; - transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } - .hamburger--spring-r.is-active .hamburger-inner::before { - top: 0; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } + transform: translate3d(0, -0.8rem, 0) rotate(-45deg); +} + +.hamburger--spring-r.is-active .hamburger-inner::after { + top: 0; + opacity: 0; + -webkit-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity 0s .22s linear; + -o-transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity 0s .22s linear; + transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity 0s .22s linear; +} + +.hamburger--spring-r.is-active .hamburger-inner::before { + top: 0; + -webkit-transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1); + transition: top .1s .15s cubic-bezier(.33333, 0, .66667, .33333), transform .13s .22s cubic-bezier(.215, .61, .355, 1), -webkit-transform .13s .22s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} /* * Stand */ .hamburger--stand .hamburger-inner { - -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; - transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; - transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--stand .hamburger-inner::before { - -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--stand .hamburger-inner::after { - -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + -webkit-transition: background-color 0s .075s linear, -webkit-transform .075s .15s cubic-bezier(.55, .055, .675, .19); + -o-transition: transform .075s .15s cubic-bezier(.55, .055, .675, .19), background-color 0s .075s linear; + transition: background-color 0s .075s linear, -webkit-transform .075s .15s cubic-bezier(.55, .055, .675, .19); + transition: transform .075s .15s cubic-bezier(.55, .055, .675, .19), background-color 0s .075s linear; + transition: transform .075s .15s cubic-bezier(.55, .055, .675, .19), background-color 0s .075s linear, -webkit-transform .075s .15s cubic-bezier(.55, .055, .675, .19); +} + +.hamburger--stand .hamburger-inner::before { + -webkit-transition: top .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: top .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19), -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); +} + +.hamburger--stand .hamburger-inner::after { + -webkit-transition: bottom .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + -o-transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19), -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); +} .hamburger--stand.is-active .hamburger-inner { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); background-color: transparent; - -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; - transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; - transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--stand.is-active .hamburger-inner::before { - top: 0; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--stand.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } + -webkit-transition: background-color 0s .15s linear, -webkit-transform .075s 0s cubic-bezier(.215, .61, .355, 1); + -o-transition: transform .075s 0s cubic-bezier(.215, .61, .355, 1), background-color 0s .15s linear; + transition: background-color 0s .15s linear, -webkit-transform .075s 0s cubic-bezier(.215, .61, .355, 1); + transition: transform .075s 0s cubic-bezier(.215, .61, .355, 1), background-color 0s .15s linear; + transition: transform .075s 0s cubic-bezier(.215, .61, .355, 1), background-color 0s .15s linear, -webkit-transform .075s 0s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.hamburger--stand.is-active .hamburger-inner::before { + top: 0; + -webkit-transition: top .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: top .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1), -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.hamburger--stand.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transition: bottom .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -o-transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1), -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { - -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; - transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; - transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--stand-r .hamburger-inner::before { - -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--stand-r .hamburger-inner::after { - -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + -webkit-transition: background-color 0s .075s linear, -webkit-transform .075s .15s cubic-bezier(.55, .055, .675, .19); + -o-transition: transform .075s .15s cubic-bezier(.55, .055, .675, .19), background-color 0s .075s linear; + transition: background-color 0s .075s linear, -webkit-transform .075s .15s cubic-bezier(.55, .055, .675, .19); + transition: transform .075s .15s cubic-bezier(.55, .055, .675, .19), background-color 0s .075s linear; + transition: transform .075s .15s cubic-bezier(.55, .055, .675, .19), background-color 0s .075s linear, -webkit-transform .075s .15s cubic-bezier(.55, .055, .675, .19); +} + +.hamburger--stand-r .hamburger-inner::before { + -webkit-transition: top .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + -o-transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: top .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19), -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); +} + +.hamburger--stand-r .hamburger-inner::after { + -webkit-transition: bottom .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + -o-transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .075s ease-in, -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(.55, .055, .675, .19), -webkit-transform .075s 0s cubic-bezier(.55, .055, .675, .19); +} .hamburger--stand-r.is-active .hamburger-inner { - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); background-color: transparent; - -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; - transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; - transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--stand-r.is-active .hamburger-inner::before { - top: 0; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--stand-r.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } + -webkit-transition: background-color 0s .15s linear, -webkit-transform .075s 0s cubic-bezier(.215, .61, .355, 1); + -o-transition: transform .075s 0s cubic-bezier(.215, .61, .355, 1), background-color 0s .15s linear; + transition: background-color 0s .15s linear, -webkit-transform .075s 0s cubic-bezier(.215, .61, .355, 1); + transition: transform .075s 0s cubic-bezier(.215, .61, .355, 1), background-color 0s .15s linear; + transition: transform .075s 0s cubic-bezier(.215, .61, .355, 1), background-color 0s .15s linear, -webkit-transform .075s 0s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +.hamburger--stand-r.is-active .hamburger-inner::before { + top: 0; + -webkit-transition: top .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -o-transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: top .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1), -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.hamburger--stand-r.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transition: bottom .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -o-transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s .1s ease-out, -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(.215, .61, .355, 1), -webkit-transform .075s .15s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} /* * Squeeze */ .hamburger--squeeze .hamburger-inner { - -webkit-transition-duration: 0.075s; - -o-transition-duration: 0.075s; - transition-duration: 0.075s; - -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - .hamburger--squeeze .hamburger-inner::before { - -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; - -o-transition: top 0.075s 0.12s ease, opacity 0.075s ease; - transition: top 0.075s 0.12s ease, opacity 0.075s ease; } - .hamburger--squeeze .hamburger-inner::after { - -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); - -o-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); - transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } + -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19); + transition-timing-function: cubic-bezier(.55, .055, .675, .19); + -webkit-transition-duration: .075s; + -o-transition-duration: .075s; + transition-duration: .075s; +} + +.hamburger--squeeze .hamburger-inner::before { + -webkit-transition: top .075s .12s ease, opacity .075s ease; + -o-transition: top .075s .12s ease, opacity .075s ease; + transition: top .075s .12s ease, opacity .075s ease; +} + +.hamburger--squeeze .hamburger-inner::after { + -webkit-transition: bottom .075s .12s ease, -webkit-transform .075s cubic-bezier(.55, .055, .675, .19); + -o-transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .12s ease, -webkit-transform .075s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19); + transition: bottom .075s .12s ease, transform .075s cubic-bezier(.55, .055, .675, .19), -webkit-transform .075s cubic-bezier(.55, .055, .675, .19); +} .hamburger--squeeze.is-active .hamburger-inner { + -webkit-transition-delay: .12s; + -o-transition-delay: .12s; + transition-delay: .12s; + -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1); + transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition-delay: 0.12s; - -o-transition-delay: 0.12s; - transition-delay: 0.12s; - -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - .hamburger--squeeze.is-active .hamburger-inner::before { - top: 0; - opacity: 0; - -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; - -o-transition: top 0.075s ease, opacity 0.075s 0.12s ease; - transition: top 0.075s ease, opacity 0.075s 0.12s ease; } - .hamburger--squeeze.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - -o-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); - transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.hamburger--squeeze.is-active .hamburger-inner::before { + top: 0; + opacity: 0; + -webkit-transition: top .075s ease, opacity .075s .12s ease; + -o-transition: top .075s ease, opacity .075s .12s ease; + transition: top .075s ease, opacity .075s .12s ease; +} + +.hamburger--squeeze.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transition: bottom .075s ease, -webkit-transform .075s .12s cubic-bezier(.215, .61, .355, 1); + -o-transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s ease, -webkit-transform .075s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1); + transition: bottom .075s ease, transform .075s .12s cubic-bezier(.215, .61, .355, 1), -webkit-transform .075s .12s cubic-bezier(.215, .61, .355, 1); + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} /* * Vortex */ .hamburger--vortex .hamburger-inner { - -webkit-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - transition-duration: 0.2s; - -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } - .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { - -webkit-transition-duration: 0s; - -o-transition-duration: 0s; - transition-duration: 0s; - -webkit-transition-delay: 0.1s; - -o-transition-delay: 0.1s; - transition-delay: 0.1s; - -webkit-transition-timing-function: linear; - -o-transition-timing-function: linear; - transition-timing-function: linear; } - .hamburger--vortex .hamburger-inner::before { - -webkit-transition-property: top, opacity; - -o-transition-property: top, opacity; - transition-property: top, opacity; } - .hamburger--vortex .hamburger-inner::after { - -webkit-transition-property: bottom, -webkit-transform; - transition-property: bottom, -webkit-transform; - -o-transition-property: bottom, transform; - transition-property: bottom, transform; - transition-property: bottom, transform, -webkit-transform; } + -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + -o-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + transition-timing-function: cubic-bezier(.19, 1, .22, 1); + -webkit-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; +} + +.hamburger--vortex .hamburger-inner::before, +.hamburger--vortex .hamburger-inner::after { + -webkit-transition-delay: .1s; + -o-transition-delay: .1s; + transition-delay: .1s; + -webkit-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-duration: 0s; + -o-transition-duration: 0s; + transition-duration: 0s; +} + +.hamburger--vortex .hamburger-inner::before { + -webkit-transition-property: top, opacity; + -o-transition-property: top, opacity; + transition-property: top, opacity; +} + +.hamburger--vortex .hamburger-inner::after { + -webkit-transition-property: bottom, -webkit-transform; + -o-transition-property: bottom, transform; + transition-property: bottom, -webkit-transform; + transition-property: bottom, transform; + transition-property: bottom, transform, -webkit-transform; +} .hamburger--vortex.is-active .hamburger-inner { + -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + -o-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + transition-timing-function: cubic-bezier(.19, 1, .22, 1); -webkit-transform: rotate(765deg); - -ms-transform: rotate(765deg); - transform: rotate(765deg); - -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } - .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { - -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; } - .hamburger--vortex.is-active .hamburger-inner::before { - top: 0; - opacity: 0; } - .hamburger--vortex.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } + -ms-transform: rotate(765deg); + transform: rotate(765deg); +} + +.hamburger--vortex.is-active .hamburger-inner::before, +.hamburger--vortex.is-active .hamburger-inner::after { + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; +} + +.hamburger--vortex.is-active .hamburger-inner::before { + top: 0; + opacity: 0; +} + +.hamburger--vortex.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { - -webkit-transition-duration: 0.2s; - -o-transition-duration: 0.2s; - transition-duration: 0.2s; - -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } - .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { - -webkit-transition-duration: 0s; - -o-transition-duration: 0s; - transition-duration: 0s; - -webkit-transition-delay: 0.1s; - -o-transition-delay: 0.1s; - transition-delay: 0.1s; - -webkit-transition-timing-function: linear; - -o-transition-timing-function: linear; - transition-timing-function: linear; } - .hamburger--vortex-r .hamburger-inner::before { - -webkit-transition-property: top, opacity; - -o-transition-property: top, opacity; - transition-property: top, opacity; } - .hamburger--vortex-r .hamburger-inner::after { - -webkit-transition-property: bottom, -webkit-transform; - transition-property: bottom, -webkit-transform; - -o-transition-property: bottom, transform; - transition-property: bottom, transform; - transition-property: bottom, transform, -webkit-transform; } + -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + -o-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + transition-timing-function: cubic-bezier(.19, 1, .22, 1); + -webkit-transition-duration: .2s; + -o-transition-duration: .2s; + transition-duration: .2s; +} + +.hamburger--vortex-r .hamburger-inner::before, +.hamburger--vortex-r .hamburger-inner::after { + -webkit-transition-delay: .1s; + -o-transition-delay: .1s; + transition-delay: .1s; + -webkit-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-duration: 0s; + -o-transition-duration: 0s; + transition-duration: 0s; +} + +.hamburger--vortex-r .hamburger-inner::before { + -webkit-transition-property: top, opacity; + -o-transition-property: top, opacity; + transition-property: top, opacity; +} + +.hamburger--vortex-r .hamburger-inner::after { + -webkit-transition-property: bottom, -webkit-transform; + -o-transition-property: bottom, transform; + transition-property: bottom, -webkit-transform; + transition-property: bottom, transform; + transition-property: bottom, transform, -webkit-transform; +} .hamburger--vortex-r.is-active .hamburger-inner { + -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + -o-transition-timing-function: cubic-bezier(.19, 1, .22, 1); + transition-timing-function: cubic-bezier(.19, 1, .22, 1); -webkit-transform: rotate(-765deg); - -ms-transform: rotate(-765deg); - transform: rotate(-765deg); - -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); - transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } - .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { - -webkit-transition-delay: 0s; - -o-transition-delay: 0s; - transition-delay: 0s; } - .hamburger--vortex-r.is-active .hamburger-inner::before { - top: 0; - opacity: 0; } - .hamburger--vortex-r.is-active .hamburger-inner::after { - bottom: 0; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); } + -ms-transform: rotate(-765deg); + transform: rotate(-765deg); +} + +.hamburger--vortex-r.is-active .hamburger-inner::before, +.hamburger--vortex-r.is-active .hamburger-inner::after { + -webkit-transition-delay: 0s; + -o-transition-delay: 0s; + transition-delay: 0s; +} + +.hamburger--vortex-r.is-active .hamburger-inner::before { + top: 0; + opacity: 0; +} + +.hamburger--vortex-r.is-active .hamburger-inner::after { + bottom: 0; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} @media screen and (max-width: 959px) { .no-js .site-header { position: static; - background: #020202; } + background: #020202; + } + .disable-scroll { - overflow: hidden; } + overflow: hidden; + } + .js.js-nav-active { - overflow: hidden; } - .js.js-nav-active .nav-primary { - visibility: visible; - max-height: 100%; - height: 100vh; - overflow: auto; } + overflow: hidden; + } + + .js.js-nav-active .nav-primary { + height: 100vh; + max-height: 100%; + overflow: auto; + visibility: visible; + } + .js .nav-primary { - visibility: hidden; - max-height: 0; - height: 0; - clip: auto; position: fixed; top: 0; + right: 0; left: 0; - right: 0; } - .js .nav-primary .menu-items { - padding: 15% 0; } + height: 0; + max-height: 0; + clip: auto; + visibility: hidden; + } + + .js .nav-primary .menu-items { + padding: 15% 0; + } + .nav-primary { + display: block; + width: 100%; + margin: 0; + overflow: hidden; background: #020202; -webkit-transition: all .55s; -o-transition: all .55s; transition: all .55s; + } + + .nav-primary .menu-items { + float: none; + width: 100%; + padding: 2rem 0; margin: 0; + } + + .nav-primary .menu-items a { + position: relative; + z-index: 0; + display: block; + padding-top: 1rem; + padding-right: 5.8rem; + padding-bottom: 1rem; + padding-left: 5%; + font-size: 1.6rem; + font-weight: 400; + line-height: 1.7rem; + color: #fff; + text-decoration: none; + outline: none; + } + + .nav-primary .menu-items a:focus { + outline: none; + } + + .nav-primary .menu-items a.has-submenu { + position: static; + width: 80%; + } + + .nav-primary .menu-items a:hover, + .nav-primary .menu-items a:focus, + .nav-primary .menu-items a:active { + color: #045d30; + } + + .nav-primary .menu-items a.current { + color: #d23600; + } + + .nav-primary .menu-items a.disabled { + color: #bbb; + } + + .nav-primary .menu-items a.highlighted .sub-arrow:before { + display: block; + content: '-'; + } + + .nav-primary .menu-items .dropdown-toggle { + position: absolute; + top: 0; + right: 2rem; + left: auto; + z-index: 9999; + width: 3.7rem; + height: 3.7rem; + padding: 0; + margin-top: 0; overflow: hidden; + font: bold 18px/37px monospace; + color: #fff; + text-align: center; + background: #202020; + border: 0; + } + + .nav-primary .menu-items .dropdown-toggle:focus { + z-index: 10000; + } + + .nav-primary .menu-items .dropdown-toggle:before { + content: '+'; + } + + .nav-primary .menu-items .dropdown-toggle:hover { + color: #fff; + background-color: #3e4853; + } + + .nav-primary .menu-items .dropdown-toggle.toggled-on:before { display: block; - width: 100%; } - .nav-primary .menu-items { - margin: 0; - width: 100%; - float: none; - padding: 2rem 0; } - .nav-primary .menu-items a { - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 5%; - padding-right: 5.8rem; - color: #fff; - font-size: 1.6rem; - font-weight: 400; - line-height: 1.7rem; - text-decoration: none; - position: relative; - z-index: 0; - display: block; - outline: none; } - .nav-primary .menu-items a:focus { - outline: none; } - .nav-primary .menu-items a.has-submenu { - width: 80%; - position: static; } - .nav-primary .menu-items a:hover, .nav-primary .menu-items a:focus, .nav-primary .menu-items a:active { - color: #045d30; } - .nav-primary .menu-items a.current { - color: #d23600; } - .nav-primary .menu-items a.disabled { - color: #bbb; } - .nav-primary .menu-items a.highlighted .sub-arrow:before { - display: block; - content: '-'; } - .nav-primary .menu-items .dropdown-toggle { - position: absolute; - top: 0; - margin-top: 0; - left: auto; - right: 2rem; - width: 3.7rem; - height: 3.7rem; - overflow: hidden; - font: bold 18px/37px monospace; - text-align: center; - background: #202020; - color: #fff; - padding: 0; - z-index: 9999; - border: 0; } - .nav-primary .menu-items .dropdown-toggle:focus { - z-index: 10000; } - .nav-primary .menu-items .dropdown-toggle:before { - content: '+'; } - .nav-primary .menu-items .dropdown-toggle:hover { - background-color: #3e4853; - color: #fff; } - .nav-primary .menu-items .dropdown-toggle.toggled-on:before { - display: block; - content: '-'; } - .nav-primary .menu-items ul { - background: rgba(102, 102, 102, 0.1); - margin-left: 0; - padding: 0; } - .nav-primary .menu-items ul > li { - padding-left: 1.5rem; } - .nav-primary .menu-items ul > li ul { - margin-left: -1.5rem; } - .nav-primary .menu-items ul > li ul li { - padding-left: 3rem; } - .nav-primary .menu-items ul > li ul ul { - margin-left: -3rem; } - .nav-primary .menu-items ul > li ul ul li { - padding-left: 4.5rem; } - .nav-primary .menu-items ul a { - font-size: 1.4rem; } } + content: '-'; + } + + .nav-primary .menu-items ul { + padding: 0; + margin-left: 0; + background: rgba(102, 102, 102, .1); + } + + .nav-primary .menu-items ul > li { + padding-left: 1.5rem; + } + + .nav-primary .menu-items ul > li ul { + margin-left: -1.5rem; + } + + .nav-primary .menu-items ul > li ul li { + padding-left: 3rem; + } + + .nav-primary .menu-items ul > li ul ul { + margin-left: -3rem; + } + + .nav-primary .menu-items ul > li ul ul li { + padding-left: 4.5rem; + } + + .nav-primary .menu-items ul a { + font-size: 1.4rem; + } +} .nav-toggle { - list-style: none; + position: relative; z-index: 100000; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - border: 0; + display: none; + padding: 2rem; + padding: 20px; + margin: 0 -2rem 0 0; + margin: 0 -20px 0 0; overflow: visible; - color: #fff; font-weight: 700; + color: #fff; + text-decoration: none; + list-style: none; + cursor: pointer; + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background: transparent; + border: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - text-decoration: none; - padding: 20px; - padding: 2rem; - margin: 0 -20px 0 0; - margin: 0 -2rem 0 0; - background: transparent; - cursor: pointer; - position: relative; - display: none; } - .nav-toggle span { - color: #333; - font-size: 1.2em; } - .nav-toggle:focus { - outline: none; } - .nav-toggle:focus span span { - background-color: #333; } - .nav-toggle:focus span:before, .nav-toggle:focus span:after { - background-color: #333; } - .nav-toggle:hover, .nav-toggle:active { - color: #333; } - .nav-toggle:hover span, .nav-toggle:active span { - color: #333; } - @media (max-width: 959px) { - .nav-toggle { - display: block; } } - .nav-toggle.is-active { - color: #fff; } - .nav-toggle.is-active:focus .hamburger-box .hamburger-inner, .nav-toggle.is-active.focus .hamburger-box .hamburger-inner { - background-color: #fff; } - .nav-toggle.is-active:focus .hamburger-box .hamburger-inner:after, .nav-toggle.is-active.focus .hamburger-box .hamburger-inner:after { - background-color: #fff; } - .nav-toggle.is-active .hamburger-box .hamburger-inner { - background-color: #fff; } - .nav-toggle.is-active .hamburger-box .hamburger-inner:after { - background-color: #fff; } - .nav-toggle.is-active:focus, .nav-toggle.is-active:hover, .nav-toggle.is-active:active { - color: #fff; } - .nav-toggle.is-active:focus span, .nav-toggle.is-active:hover span, .nav-toggle.is-active:active span { - color: #fff; } - .nav-toggle.is-active span { - color: #fff; } +} + +.nav-toggle span { + font-size: 1.2em; + color: #333; +} + +.nav-toggle:focus { + outline: none; +} + +.nav-toggle:focus span span { + background-color: #333; +} + +.nav-toggle:focus span:before, +.nav-toggle:focus span:after { + background-color: #333; +} + +.nav-toggle:hover, +.nav-toggle:active { + color: #333; +} + +.nav-toggle:hover span, +.nav-toggle:active span { + color: #333; +} + +@media (max-width: 959px) { + .nav-toggle { + display: block; + } +} + +.nav-toggle.is-active { + color: #fff; +} + +.nav-toggle.is-active:focus .hamburger-box .hamburger-inner, +.nav-toggle.is-active.focus .hamburger-box .hamburger-inner { + background-color: #fff; +} + +.nav-toggle.is-active:focus .hamburger-box .hamburger-inner:after, +.nav-toggle.is-active.focus .hamburger-box .hamburger-inner:after { + background-color: #fff; +} + +.nav-toggle.is-active .hamburger-box .hamburger-inner { + background-color: #fff; +} + +.nav-toggle.is-active .hamburger-box .hamburger-inner:after { + background-color: #fff; +} + +.nav-toggle.is-active:focus, +.nav-toggle.is-active:hover, +.nav-toggle.is-active:active { + color: #fff; +} + +.nav-toggle.is-active:focus span, +.nav-toggle.is-active:hover span, +.nav-toggle.is-active:active span { + color: #fff; +} + +.nav-toggle.is-active span { + color: #fff; +} .top { position: fixed; - bottom: 20px; right: 20px; - background: #222; + bottom: 20px; + z-index: 10000; width: 50px; height: 50px; text-decoration: none; + background: #222; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -o-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; - z-index: 10000; } - .top.is-visible, .top.fade-out, - .no-touch .top:hover { - -webkit-transition: opacity .3s 0s, visibility 0s 0s; - -o-transition: opacity .3s 0s, visibility 0s 0s; - transition: opacity .3s 0s, visibility 0s 0s; } - .top.is-visible { - opacity: 1; } - .top.fade-out { - opacity: .3; } - .top.fade-out:hover { - opacity: 1; } - .no-touch .top:hover { - opacity: 1; } - .top svg { - position: relative; - top: 50%; - left: 50%; - -webkit-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); - -webkit-transform-style: preserve-3d; - transform-style: preserve-3d; - position: absolute; - fill: #fff; - margin: 0; - opacity: .8; - font-size: 19px; - -webkit-transition: all .3s ease; - -o-transition: all .3s ease; - transition: all .3s ease; } - .top:hover, .top:focus, .top:active { - background: #045d30; } - .top:hover svg, .top:focus svg, .top:active svg { - fill: #fff; - top: 35%; } +} + +.top.is-visible, +.top.fade-out, +.no-touch .top:hover { + -webkit-transition: opacity .3s 0s, visibility 0s 0s; + -o-transition: opacity .3s 0s, visibility 0s 0s; + transition: opacity .3s 0s, visibility 0s 0s; +} + +.top.is-visible { + opacity: 1; +} + +.top.fade-out { + opacity: .3; +} + +.top.fade-out:hover { + opacity: 1; +} + +.no-touch .top:hover { + opacity: 1; +} + +.top svg { + position: absolute; + position: relative; + top: 50%; + left: 50%; + margin: 0; + font-size: 19px; + fill: #fff; + opacity: .8; + -webkit-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.top:hover, +.top:focus, +.top:active { + background: #045d30; +} + +.top:hover svg, +.top:focus svg, +.top:active svg { + top: 35%; + fill: #fff; +} .gallery { - clear: both; overflow: hidden; - text-align: center; } - .gallery.gallery-columns-1 .gallery-item { + clear: both; + text-align: center; +} + +.gallery.gallery-columns-1 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; +} + +.gallery.gallery-columns-1 .gallery-item:first-child { + margin-left: auto; +} + +.gallery.gallery-columns-1 .gallery-item:last-child { + margin-right: auto; +} + +.gallery.gallery-columns-2 .gallery-item { + float: left; + width: 48.5%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-2 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-2 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-2 .gallery-item:nth-child(2n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-2 .gallery-item:nth-child(2n + 1) { + clear: both; +} + +@media (max-width: 480px) { + .gallery.gallery-columns-2 .gallery-item { display: block; - clear: both; float: none; width: 100%; + margin-right: auto; margin-left: auto; - margin-right: auto; } - .gallery.gallery-columns-1 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-1 .gallery-item:last-child { - margin-right: auto; } - .gallery.gallery-columns-2 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 48.5%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-2 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-2 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-2 .gallery-item:nth-child(2n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-2 .gallery-item:nth-child(2n + 1) { - clear: both; } - @media (max-width: 480px) { - .gallery.gallery-columns-2 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-2 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-2 .gallery-item:last-child { - margin-right: auto; } } + clear: both; + text-align: center; + } + + .gallery.gallery-columns-2 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-2 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-3 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-3 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-3 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-3 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-3 .gallery-item:nth-child(3n + 1) { + clear: both; +} + +@media (max-width: 770px) { .gallery.gallery-columns-3 .gallery-item { float: left; - clear: none; - text-align: inherit; width: 31.33333%; + margin-right: 3%; margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-3 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-3 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-3 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-3 .gallery-item:nth-child(3n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-3 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-3 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-3 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-3 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-3 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-3 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-3 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-3 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-4 .gallery-item { - float: left; clear: none; text-align: inherit; - width: 22.75%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-4 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-4 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-4 .gallery-item:nth-child(4n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-4 .gallery-item:nth-child(4n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-4 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-4 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-4 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-4 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-4 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-4 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-4 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-4 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-5 .gallery-item { + } + + .gallery.gallery-columns-3 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-3 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-3 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-3 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-3 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-3 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-3 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-4 .gallery-item { + float: left; + width: 22.75%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-4 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-4 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-4 .gallery-item:nth-child(4n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-4 .gallery-item:nth-child(4n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-4 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; + } + + .gallery.gallery-columns-4 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-4 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-4 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-4 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-4 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-4 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-4 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-5 .gallery-item { + float: left; + width: 17.6%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-5 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-5 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-5 .gallery-item:nth-child(5n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-5 .gallery-item:nth-child(5n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-5 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; + } + + .gallery.gallery-columns-5 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-5 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-5 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-5 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-5 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-5 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-5 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-6 .gallery-item { + float: left; + width: 14.16667%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-6 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-6 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-6 .gallery-item:nth-child(6n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-6 .gallery-item:nth-child(6n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-6 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; + } + + .gallery.gallery-columns-6 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-6 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-6 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-6 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-6 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-6 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-6 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-7 .gallery-item { + float: left; + width: 11.71429%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-7 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-7 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-7 .gallery-item:nth-child(7n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-7 .gallery-item:nth-child(7n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-7 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; + } + + .gallery.gallery-columns-7 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-7 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-7 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-7 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-7 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-7 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-7 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-8 .gallery-item { + float: left; + width: 9.875%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-8 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-8 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-8 .gallery-item:nth-child(8n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-8 .gallery-item:nth-child(8n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-8 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; + } + + .gallery.gallery-columns-8 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-8 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-8 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-8 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-8 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-8 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-8 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-9 .gallery-item { + float: left; + width: 8.44444%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-9 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-9 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-9 .gallery-item:nth-child(9n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-9 .gallery-item:nth-child(9n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-9 .gallery-item { + float: left; + width: 31.33333%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; + } + + .gallery.gallery-columns-9 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-9 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; + } + + .gallery.gallery-columns-9 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-9 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-9 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-9 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-9 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery.gallery-columns-10 .gallery-item { + float: left; + width: 7.3%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery.gallery-columns-10 .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery.gallery-columns-10 .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery.gallery-columns-10 .gallery-item:nth-child(10n) { + float: right; + margin-right: 0%; +} + +.gallery.gallery-columns-10 .gallery-item:nth-child(10n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery.gallery-columns-10 .gallery-item { float: left; - clear: none; - text-align: inherit; - width: 17.6%; + width: 31.33333%; + margin-right: 3%; margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-5 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-5 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-5 .gallery-item:nth-child(5n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-5 .gallery-item:nth-child(5n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-5 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-5 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-5 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-5 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-5 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-5 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-5 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-5 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-6 .gallery-item { - float: left; clear: none; text-align: inherit; - width: 14.16667%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-6 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-6 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-6 .gallery-item:nth-child(6n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-6 .gallery-item:nth-child(6n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-6 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-6 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-6 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-6 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-6 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-6 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-6 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-6 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-7 .gallery-item { + } + + .gallery.gallery-columns-10 .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery.gallery-columns-10 .gallery-item:nth-child(n) { float: left; + margin-right: 3%; clear: none; - text-align: inherit; - width: 11.71429%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-7 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-7 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-7 .gallery-item:nth-child(7n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-7 .gallery-item:nth-child(7n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-7 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-7 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-7 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-7 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-7 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-7 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-7 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-7 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-8 .gallery-item { + } + + .gallery.gallery-columns-10 .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery.gallery-columns-10 .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { + .gallery.gallery-columns-10 .gallery-item { + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery.gallery-columns-10 .gallery-item:first-child { + margin-left: auto; + } + + .gallery.gallery-columns-10 .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery .gallery-item { + float: left; + width: 22.75%; + margin-right: 3%; + margin-left: 0%; + clear: none; + text-align: inherit; +} + +.gallery .gallery-item::after { + display: block; + clear: both; + content: ''; +} + +.gallery .gallery-item:nth-child(n) { + float: left; + margin-right: 3%; + clear: none; +} + +.gallery .gallery-item:nth-child(4n) { + float: right; + margin-right: 0%; +} + +.gallery .gallery-item:nth-child(4n + 1) { + clear: both; +} + +@media (max-width: 770px) { + .gallery .gallery-item { float: left; - clear: none; - text-align: inherit; - width: 9.875%; + width: 31.33333%; + margin-right: 3%; margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-8 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-8 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-8 .gallery-item:nth-child(8n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-8 .gallery-item:nth-child(8n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-8 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-8 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-8 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-8 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-8 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-8 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-8 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-8 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-9 .gallery-item { - float: left; clear: none; text-align: inherit; - width: 8.44444%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-9 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-9 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-9 .gallery-item:nth-child(9n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-9 .gallery-item:nth-child(9n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-9 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-9 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-9 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-9 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-9 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-9 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-9 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-9 .gallery-item:last-child { - margin-right: auto; } } - .gallery.gallery-columns-10 .gallery-item { + } + + .gallery .gallery-item::after { + display: block; + clear: both; + content: ''; + } + + .gallery .gallery-item:nth-child(n) { float: left; + margin-right: 3%; clear: none; - text-align: inherit; - width: 7.3%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-10 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-10 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-10 .gallery-item:nth-child(10n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-10 .gallery-item:nth-child(10n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery.gallery-columns-10 .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery.gallery-columns-10 .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery.gallery-columns-10 .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery.gallery-columns-10 .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery.gallery-columns-10 .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery.gallery-columns-10 .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery.gallery-columns-10 .gallery-item:first-child { - margin-left: auto; } - .gallery.gallery-columns-10 .gallery-item:last-child { - margin-right: auto; } } + } + + .gallery .gallery-item:nth-child(3n) { + float: right; + margin-right: 0%; + } + + .gallery .gallery-item:nth-child(3n + 1) { + clear: both; + } +} + +@media (max-width: 480px) { .gallery .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 22.75%; - margin-left: 0%; - margin-right: 3%; } - .gallery .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery .gallery-item:nth-child(4n) { - margin-right: 0%; - float: right; } - .gallery .gallery-item:nth-child(4n + 1) { - clear: both; } - @media (max-width: 770px) { - .gallery .gallery-item { - float: left; - clear: none; - text-align: inherit; - width: 31.33333%; - margin-left: 0%; - margin-right: 3%; } - .gallery .gallery-item::after { - display: block; - content: ''; - clear: both; } - .gallery .gallery-item:nth-child(n) { - margin-right: 3%; - float: left; - clear: none; } - .gallery .gallery-item:nth-child(3n) { - margin-right: 0%; - float: right; } - .gallery .gallery-item:nth-child(3n + 1) { - clear: both; } } - @media (max-width: 480px) { - .gallery .gallery-item { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - text-align: center; } - .gallery .gallery-item:first-child { - margin-left: auto; } - .gallery .gallery-item:last-child { - margin-right: auto; } } - .gallery .gallery-item .gallery-caption { - font-size: .85em; - margin-top: .7em; - font-style: italic; - display: block; - font-family: "Karla", "Helvetica Neue", Helvetica, sans-serif; - line-height: 1.2; - text-align: center; - opacity: .6; } - .gallery .gallery-item .gallery-icon a { - display: block; } - .gallery .gallery-item .gallery-icon img { - border: 0; - height: auto; - margin-bottom: 0; - width: 100%; } + display: block; + float: none; + width: 100%; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + .gallery .gallery-item:first-child { + margin-left: auto; + } + + .gallery .gallery-item:last-child { + margin-right: auto; + } +} + +.gallery .gallery-item .gallery-caption { + display: block; + margin-top: .7em; + font-family: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; + font-size: .85em; + font-style: italic; + line-height: 1.2; + text-align: center; + opacity: .6; +} + +.gallery .gallery-item .gallery-icon a { + display: block; +} + +.gallery .gallery-item .gallery-icon img { + width: 100%; + height: auto; + margin-bottom: 0; + border: 0; +} .entry-header-demo { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-image: url("../images/default.jpg"); - background-repeat: no-repeat; + position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; + max-width: 100%; + height: 50rem; + height: 500px; + min-height: 50rem; + min-height: 500px; + margin: 0 auto; + -ms-flex-pack: center; + -ms-flex-align: center; + background-image: url('../images/default.jpg'); + background-repeat: no-repeat; + background-repeat: no-repeat; + background-position: center; + background-size: cover; -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; +} + +.entry-header-demo h1 { position: relative; - min-height: 500px; - min-height: 50rem; - max-width: 100%; - margin: 0 auto; - height: 500px; - height: 50rem; } + z-index: 2; + padding: 0; + margin: 0; + font-size: 2.4vw; + color: #383d29; + text-align: center; +} + +@media (max-width: 916.66667px) { .entry-header-demo h1 { - font-size: 2.4vw; - color: #383d29; - text-align: center; - margin: 0; - padding: 0; - position: relative; - z-index: 2; } - @media (max-width: 916.66667px) { - .entry-header-demo h1 { - font-size: 22px; } } - @media (min-width: 1916.66667px) { - .entry-header-demo h1 { - font-size: 46px; } } + font-size: 22px; + } +} + +@media (min-width: 1916.66667px) { + .entry-header-demo h1 { + font-size: 46px; + } +} .accent { + position: relative; + z-index: 2; + display: block; + margin: 0; font-style: italic; - text-transform: lowercase; font-weight: 700; - text-align: center; - margin: 0; color: #045d30; - display: block; - position: relative; - z-index: 2; } + text-align: center; + text-transform: lowercase; +} @media (min-width: 480px) { .block.block-page { - min-height: 300px; } } + min-height: 300px; + } +} .cat-links, .tags-links { - display: block; } + display: block; +} .alignleft { display: inline; float: left; - margin-right: 20px; } + margin-right: 20px; +} .alignright { display: inline; float: right; - margin-left: 20px; } + margin-left: 20px; +} .aligncenter { - clear: both; display: block; - margin: 0 auto; } + margin: 0 auto; + clear: both; +} del { + color: #666; text-decoration: line-through; - color: #666; } +} .container.container-article { - max-width: 800px; } + max-width: 800px; +} .sticky { + padding: 30px; + padding: 3rem; background-color: #fafafa; border: 1px solid #e0e0e0; - padding: 30px; - padding: 3rem; } +} .comments-area .comment-list li.bypostauthor { - background-color: #fff6e8; padding: 30px; - padding: 3rem; } + padding: 3rem; + background-color: #fff6e8; +} .wp-caption { - max-width: 100%; } - .wp-caption img[class*="wp-image-"] { - display: block; - margin: 0 auto; } - .wp-caption .wp-caption-text { - text-align: left; - font-style: italic; - border-bottom: 2px solid #dadfe1; - padding: 10px 0; - padding: 1rem 0; - margin-bottom: 20px; } + max-width: 100%; +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin: 0 auto; +} + +.wp-caption .wp-caption-text { + padding: 10px 0; + padding: 1rem 0; + margin-bottom: 20px; + font-style: italic; + text-align: left; + border-bottom: 2px solid #dadfe1; +} .entry-content { - margin-bottom: 2em; } - .entry-content embed, - .entry-content iframe, - .entry-content object, - .entry-content video { - max-width: 100%; } + margin-bottom: 2em; +} + +.entry-content embed, +.entry-content iframe, +.entry-content object, +.entry-content video { + max-width: 100%; +} table { border-spacing: 0; - border-collapse: collapse; } + border-collapse: collapse; +} td, th { - font-family: "Karla", "Helvetica Neue", Helvetica, sans-serif; height: 30px; height: 3rem; padding: 10px; - padding: 1rem; } - @media (max-width: 600px) { - td, - th { - display: block; - clear: both; - float: none; - width: 100%; - margin-left: auto; - margin-right: auto; - display: inline-block; - height: auto; - padding: 10px 0; - text-align: center; } - td:first-child, - th:first-child { - margin-left: auto; } - td:last-child, - th:last-child { - margin-right: auto; } } + padding: 1rem; + font-family: 'Karla', 'Helvetica Neue', Helvetica, sans-serif; +} + +@media (max-width: 600px) { + td, + th { + display: block; + display: inline-block; + float: none; + width: 100%; + height: auto; + padding: 10px 0; + margin-right: auto; + margin-left: auto; + clear: both; + text-align: center; + } + + td:first-child, + th:first-child { + margin-left: auto; + } + + td:last-child, + th:last-child { + margin-right: auto; + } +} th { - font-weight: 700; } + font-weight: 700; +} abbr[title] { - border-bottom: 1px dotted; } + border-bottom: 1px dotted; +} b, strong { - font-weight: bold; } + font-weight: bold; +} dfn { - font-style: italic; } + font-style: italic; +} kbd { - border: 1px solid #ccc; + display: inline-block; + padding: 0 5px; + padding: 0 .5rem; font-family: Arial, Helvetica, sans-serif; - background-color: #f7f7f7; + line-height: 1.4; color: #333; - -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; - border-radius: 4px; - display: inline-block; text-shadow: 0 1px 0 #fff; - line-height: 1.4; white-space: nowrap; - padding: 0 5px; - padding: 0 .5rem; } + background-color: #f7f7f7; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 0 0 2px #fff inset; + box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 0 0 2px #fff inset; +} pre { display: block; padding: 9.5px; margin: 0 0 6.25px; margin: 0 0 .625rem; + overflow: auto; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; - overflow: auto; } - pre.debug { - font-size: 11px; - line-height: 1.5; } - pre code { - padding: 0; - font-size: inherit; - color: inherit; - white-space: pre-wrap; - background-color: transparent; - border-radius: 0; } +} + +pre.debug { + font-size: 11px; + line-height: 1.5; +} + +pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; +} .taxonomy-description { margin-bottom: 20px; - margin-bottom: 2rem; } + margin-bottom: 2rem; +} .post { - margin-bottom: 30px; } + margin-bottom: 30px; +} .entry-header .entry-title { - margin-bottom: .1em; } - .entry-header .entry-title a { - color: #222; } + margin-bottom: .1em; +} + +.entry-header .entry-title a { + color: #222; +} .entry-meta * { - color: #4f5964; } + color: #4f5964; +} .entry-time { - margin-bottom: 1.5em; } + margin-bottom: 1.5em; +} .cat { margin-top: 0; - margin-bottom: 10px; } - .cat a { - font-weight: 600; } + margin-bottom: 10px; +} + +.cat a { + font-weight: 600; +} ul.tags { - overflow: hidden; - margin: 0; padding: 0; - padding-left: 0; } - ul.tags li { - margin-left: 0; - margin-right: 10px; - margin-bottom: 10px; - padding-left: 0; - display: inline-block; - float: left; - margin-top: 0; } - ul.tags li a { - font-size: 12px; - font-size: 1.2rem; - color: #333; - padding: 5px 10px; - padding: .5rem 1rem; - display: inline; - border-radius: 4px; - background: #f0f0f0; - opacity: .8; } - ul.tags li a:hover { - color: #fff; - background: #aaa; - opacity: 1; } + padding-left: 0; + margin: 0; + overflow: hidden; +} + +ul.tags li { + display: inline-block; + float: left; + padding-left: 0; + margin-top: 0; + margin-right: 10px; + margin-bottom: 10px; + margin-left: 0; +} + +ul.tags li a { + display: inline; + padding: 5px 10px; + padding: .5rem 1rem; + font-size: 12px; + font-size: 1.2rem; + color: #333; + background: #f0f0f0; + border-radius: 4px; + opacity: .8; +} + +ul.tags li a:hover { + color: #fff; + background: #aaa; + opacity: 1; +} .comments-link { + display: block; text-align: right; - display: block; } - .comments-link svg { - fill: #777; - position: relative; - top: 1px; - margin-right: 2px; } - .comments-link:hover, .comments-link:focus { - color: #111; } - .comments-link:hover a, - .comments-link:hover a:link, - .comments-link:hover a:visited, - .comments-link:hover svg, .comments-link:focus a, - .comments-link:focus a:link, - .comments-link:focus a:visited, - .comments-link:focus svg { - color: #111; - fill: #111; } +} + +.comments-link svg { + position: relative; + top: 1px; + margin-right: 2px; + fill: #777; +} + +.comments-link:hover, +.comments-link:focus { + color: #111; +} + +.comments-link:hover a, +.comments-link:hover a:link, +.comments-link:hover a:visited, +.comments-link:hover svg, +.comments-link:focus a, +.comments-link:focus a:link, +.comments-link:focus a:visited, +.comments-link:focus svg { + color: #111; + fill: #111; +} .entry-footer { margin-top: 0; - margin-bottom: 0; } - .entry-footer a { - color: #4f5964; } - .entry-footer a:hover { - color: #045d30; - text-decoration: none; } + margin-bottom: 0; +} + +.entry-footer a { + color: #4f5964; +} + +.entry-footer a:hover { + color: #045d30; + text-decoration: none; +} .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 1.5em 0; - overflow: hidden; } - .site-main .comment-navigation::after, - .site-main .posts-navigation::after, - .site-main .post-navigation::after { - display: block; - content: ''; - clear: both; } + overflow: hidden; +} + +.site-main .comment-navigation::after, +.site-main .posts-navigation::after, +.site-main .post-navigation::after { + display: block; + clear: both; + content: ''; +} .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; - width: 50%; } + width: 50%; +} .comment-navigation .nav-previous a:before, .posts-navigation .nav-previous a:before, .post-navigation .nav-previous a:before { - content: '← '; } + content: '← '; +} .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; + width: 50%; text-align: right; - width: 50%; } +} .comment-navigation .nav-next a:after, .posts-navigation .nav-next a:after, .post-navigation .nav-next a:after { - content: ' →'; } + content: ' →'; +} .comments-area { margin-top: 50px; margin-bottom: 50px; - overflow: visible; } + overflow: visible; +} .comment-list { padding: 0; margin: 0; - list-style: none; } - .comment-list li { - padding: 0; - margin-top: 0; - margin-bottom: 70px; } - .comment-list li p { - color: #4f5964; } - .comment-list li .avatar { - float: right; - border-radius: 50%; } - .comment-list li .comment-author { - color: #222; - margin-top: 0; - margin-bottom: 10px; - padding: 0; } - .comment-list li .comment-author a { - color: #222; } - .comment-list li .comment-time { - padding: 0; - margin: 0; } - .comment-list li .comment-time svg { - fill: #4f5964; - position: relative; - top: 2px; - margin-right: 5px; } - .comment-list li .comment-time a { - color: #4f5964; } - .comment-list li .comment-time:hover { - opacity: 1; } + list-style: none; +} + +.comment-list li { + padding: 0; + margin-top: 0; + margin-bottom: 70px; +} + +.comment-list li p { + color: #4f5964; +} + +.comment-list li .avatar { + float: right; + border-radius: 50%; +} + +.comment-list li .comment-author { + padding: 0; + margin-top: 0; + margin-bottom: 10px; + color: #222; +} + +.comment-list li .comment-author a { + color: #222; +} + +.comment-list li .comment-time { + padding: 0; + margin: 0; +} + +.comment-list li .comment-time svg { + position: relative; + top: 2px; + margin-right: 5px; + fill: #4f5964; +} + +.comment-list li .comment-time a { + color: #4f5964; +} + +.comment-list li .comment-time:hover { + opacity: 1; +} diff --git a/functions.php b/functions.php index 4596f561..42b982b8 100644 --- a/functions.php +++ b/functions.php @@ -5,7 +5,7 @@ * @package air-light */ -define( 'AIR_LIGHT_VERSION', '4.2.3' ); +define( 'AIR_LIGHT_VERSION', '4.2.4' ); /** * Requires. diff --git a/gulpfile.js b/gulpfile.js index e0ab4498..92d47159 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -151,11 +151,10 @@ gulp.task('styles', function() { .on('error', handleError('styles')) .pipe(prefix('last 3 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) // Adds browser prefixes (eg. -webkit, -moz, etc.) .pipe(pixrem()) - .pipe(gulp.dest(cssDest)) // Process the expanded output with Stylefmt gulp.src('css/global.css') - .pipe(stylefmt()) + .pipe(stylefmt({ configFile: './.stylelintrc' })) .pipe(gulp.dest(cssDest)) }); diff --git a/package.json b/package.json index 288394c8..abad9c0a 100644 --- a/package.json +++ b/package.json @@ -1,34 +1,38 @@ { "name": "air-light", - "version": "4.2.3", + "version": "4.2.4", "description": "A minimalist WordPress starter theme.", "author": "Digitoimisto Dude Oy (moro@dude.fi)", "devDependencies": { - "access-sniff": "^3.1.0", - "browser-sync": "^2.18.13", + "access-sniff": "^3.2.0", + "browser-sync": "^2.24.5", "gulp": "^3.9.1", - "gulp-accessibility": "^3.0.1", - "gulp-autoprefixer": "4.0.0", - "gulp-changed": "^3.1.1", - "gulp-clean-css": "3.9.0", + "gulp-accessibility": "^3.1.1", + "gulp-autoprefixer": "5.0.0", + "gulp-changed": "^3.2.0", + "gulp-clean-css": "3.9.4", "gulp-concat": "2.6.1", - "gulp-header": "1.8.9", - "gulp-notify": "^3.0.0", + "gulp-header": "2.0.5", + "gulp-notify": "^3.2.0", "gulp-php2html": "^0.3.2", "gulp-pixrem": "^1.0.0", - "gulp-rename": "^1.2.2", - "gulp-sass": "^3.1.0", - "gulp-sourcemaps": "^2.6.1", + "gulp-rename": "^1.3.0", + "gulp-sass": "^4.0.1", + "gulp-sourcemaps": "^2.6.4", "gulp-stylefmt": "^1.1.0", - "gulp-uglify-es": "^0.1.6", + "gulp-uglify-es": "^1.0.4", "gulp-util": "^3.0.8", - "require-dir": "^0.3.1" + "require-dir": "^1.0.0", + "stylefmt": "^6.0.0", + "stylelint": "^9.3.0", + "stylelint-config-primer": "^2.2.8", + "stylelint-config-standard": "^18.2.0" }, "dependencies": { - "hamburgers": "^0.9.1", + "hamburgers": "^0.9.3", "jeet": "^7.2.0", - "moveto": "^1.7.1", + "moveto": "^1.7.3", "slick-carousel": "^1.8.1", - "what-input": "^5.0.4" + "what-input": "^5.1.0" } } diff --git a/readme.txt b/readme.txt index b04312d1..713a85c8 100644 --- a/readme.txt +++ b/readme.txt @@ -12,7 +12,7 @@ Tags: one-column, accessibility-ready, translation-ready Requires at least: 4.0 Tested up to: 4.9.6 -Stable tag: 4.2.3 +Stable tag: 4.2.4 License: MIT License License URI: https://opensource.org/licenses/MIT diff --git a/style.css b/style.css index 2dd96f06..08089f60 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ Theme URI: https://github.com/digitoimistodude/air-light Author: Digitoimisto Dude Oy Author URI: https://www.dude.fi Description: A minimalist WordPress starter theme. -Version: 4.2.3 +Version: 4.2.4 License: MIT License License URI: https://github.com/digitoimistodude/air-light/blob/master/LICENSE.md Text Domain: air-light @@ -19,6 +19,6 @@ Tags: one-column, accessibility-ready, translation-ready * @link https://github.com/Automattic/_s/commits/master * * @author Roni Laukkarinen (https://github.com/ronilaukkarinen), Timi Wahalahti (https://github.com/timiwahalahti) -* @version 06.06.2018 +* @version 25.06.2018 * @since 28.01.2016 */