@charset "UTF-8"; /* Theme Name: Storefront Child Theme Theme URI: Author: ideative Author URI: https://ideative.rocks Template: storefront Description: This is a blank child theme for WooThemes StoreFront theme Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: storefront Tags: black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc. Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL Images License: GNU General Public License v2 or later */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Elements # Forms # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Comments # Infinite scroll # Media ## Captions ## Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** Remove the margin in all browsers. */ body { margin: 0; } /** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** Remove the gray background on active links in IE 10. */ a { 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 */ text-decoration: underline dotted; /* 2 */ } /** Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Show the overflow in IE. 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 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; } /** 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 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -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 */ } /* Interactive ========================================================================== */ /* Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** Add the correct display in IE 10+. */ template { display: none; } /** Add the correct display in IE 10. */ [hidden] { display: none; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, optgroup, textarea { color: #404040; font-family: sans-serif; font-size: 16px; font-size: 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.75rem; line-height: 1; padding: .6em 1em .4em; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; } button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: royalblue; } a:visited { color: purple; } a:hover, a:focus, a:active { color: midnightblue; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation { clear: both; display: block; float: left; width: 100%; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; text-decoration: none; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ } .widget select { max-width: 100%; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .post, .page { margin: 0 0 1.5em; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /* ideative */ /*! * Bootstrap Grid v4.3.1 (https://getbootstrap.com/) * Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ html { box-sizing: border-box; -ms-overflow-style: scrollbar; } *, *::before, *::after { box-sizing: inherit; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .order-first { order: -1; } .order-last { order: 13; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-9 { order: 9; } .order-10 { order: 10; } .order-11 { order: 11; } .order-12 { order: 12; } .offset-1 { margin-left: 8.3333333333%; } .offset-2 { margin-left: 16.6666666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.3333333333%; } .offset-5 { margin-left: 41.6666666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.3333333333%; } .offset-8 { margin-left: 66.6666666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.3333333333%; } .offset-11 { margin-left: 91.6666666667%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-sm-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-sm-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-sm-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-sm-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .order-sm-first { order: -1; } .order-sm-last { order: 13; } .order-sm-0 { order: 0; } .order-sm-1 { order: 1; } .order-sm-2 { order: 2; } .order-sm-3 { order: 3; } .order-sm-4 { order: 4; } .order-sm-5 { order: 5; } .order-sm-6 { order: 6; } .order-sm-7 { order: 7; } .order-sm-8 { order: 8; } .order-sm-9 { order: 9; } .order-sm-10 { order: 10; } .order-sm-11 { order: 11; } .order-sm-12 { order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.3333333333%; } .offset-sm-2 { margin-left: 16.6666666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.3333333333%; } .offset-sm-5 { margin-left: 41.6666666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.3333333333%; } .offset-sm-8 { margin-left: 66.6666666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.3333333333%; } .offset-sm-11 { margin-left: 91.6666666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-md-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-md-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-md-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-md-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .order-md-first { order: -1; } .order-md-last { order: 13; } .order-md-0 { order: 0; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } .order-md-3 { order: 3; } .order-md-4 { order: 4; } .order-md-5 { order: 5; } .order-md-6 { order: 6; } .order-md-7 { order: 7; } .order-md-8 { order: 8; } .order-md-9 { order: 9; } .order-md-10 { order: 10; } .order-md-11 { order: 11; } .order-md-12 { order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.3333333333%; } .offset-md-2 { margin-left: 16.6666666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.3333333333%; } .offset-md-5 { margin-left: 41.6666666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.3333333333%; } .offset-md-8 { margin-left: 66.6666666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.3333333333%; } .offset-md-11 { margin-left: 91.6666666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-lg-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-lg-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-lg-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-lg-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .order-lg-first { order: -1; } .order-lg-last { order: 13; } .order-lg-0 { order: 0; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } .order-lg-4 { order: 4; } .order-lg-5 { order: 5; } .order-lg-6 { order: 6; } .order-lg-7 { order: 7; } .order-lg-8 { order: 8; } .order-lg-9 { order: 9; } .order-lg-10 { order: 10; } .order-lg-11 { order: 11; } .order-lg-12 { order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.3333333333%; } .offset-lg-2 { margin-left: 16.6666666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.3333333333%; } .offset-lg-5 { margin-left: 41.6666666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.3333333333%; } .offset-lg-8 { margin-left: 66.6666666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.3333333333%; } .offset-lg-11 { margin-left: 91.6666666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; } .col-xl-1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .col-xl-2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .col-xl-5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .col-xl-8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .col-xl-11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } .order-xl-first { order: -1; } .order-xl-last { order: 13; } .order-xl-0 { order: 0; } .order-xl-1 { order: 1; } .order-xl-2 { order: 2; } .order-xl-3 { order: 3; } .order-xl-4 { order: 4; } .order-xl-5 { order: 5; } .order-xl-6 { order: 6; } .order-xl-7 { order: 7; } .order-xl-8 { order: 8; } .order-xl-9 { order: 9; } .order-xl-10 { order: 10; } .order-xl-11 { order: 11; } .order-xl-12 { order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.3333333333%; } .offset-xl-2 { margin-left: 16.6666666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.3333333333%; } .offset-xl-5 { margin-left: 41.6666666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.3333333333%; } .offset-xl-8 { margin-left: 66.6666666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.3333333333%; } .offset-xl-11 { margin-left: 91.6666666667%; } } .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-table { display: table !important; } .d-table-row { display: table-row !important; } .d-table-cell { display: table-cell !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } @media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-flex { display: inline-flex !important; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-flex { display: inline-flex !important; } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: flex !important; } .d-xl-inline-flex { display: inline-flex !important; } } @media print { .d-print-none { display: none !important; } .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: flex !important; } .d-print-inline-flex { display: inline-flex !important; } } .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-row-reverse { flex-direction: row-reverse !important; } .flex-column-reverse { flex-direction: column-reverse !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-fill { flex: 1 1 auto !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0 { flex-shrink: 0 !important; } .flex-shrink-1 { flex-shrink: 1 !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch { align-items: stretch !important; } .align-content-start { align-content: flex-start !important; } .align-content-end { align-content: flex-end !important; } .align-content-center { align-content: center !important; } .align-content-between { align-content: space-between !important; } .align-content-around { align-content: space-around !important; } .align-content-stretch { align-content: stretch !important; } .align-self-auto { align-self: auto !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } .align-self-baseline { align-self: baseline !important; } .align-self-stretch { align-self: stretch !important; } @media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; } .flex-sm-column { flex-direction: column !important; } .flex-sm-row-reverse { flex-direction: row-reverse !important; } .flex-sm-column-reverse { flex-direction: column-reverse !important; } .flex-sm-wrap { flex-wrap: wrap !important; } .flex-sm-nowrap { flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-sm-fill { flex: 1 1 auto !important; } .flex-sm-grow-0 { flex-grow: 0 !important; } .flex-sm-grow-1 { flex-grow: 1 !important; } .flex-sm-shrink-0 { flex-shrink: 0 !important; } .flex-sm-shrink-1 { flex-shrink: 1 !important; } .justify-content-sm-start { justify-content: flex-start !important; } .justify-content-sm-end { justify-content: flex-end !important; } .justify-content-sm-center { justify-content: center !important; } .justify-content-sm-between { justify-content: space-between !important; } .justify-content-sm-around { justify-content: space-around !important; } .align-items-sm-start { align-items: flex-start !important; } .align-items-sm-end { align-items: flex-end !important; } .align-items-sm-center { align-items: center !important; } .align-items-sm-baseline { align-items: baseline !important; } .align-items-sm-stretch { align-items: stretch !important; } .align-content-sm-start { align-content: flex-start !important; } .align-content-sm-end { align-content: flex-end !important; } .align-content-sm-center { align-content: center !important; } .align-content-sm-between { align-content: space-between !important; } .align-content-sm-around { align-content: space-around !important; } .align-content-sm-stretch { align-content: stretch !important; } .align-self-sm-auto { align-self: auto !important; } .align-self-sm-start { align-self: flex-start !important; } .align-self-sm-end { align-self: flex-end !important; } .align-self-sm-center { align-self: center !important; } .align-self-sm-baseline { align-self: baseline !important; } .align-self-sm-stretch { align-self: stretch !important; } } @media (min-width: 768px) { .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; } .flex-md-row-reverse { flex-direction: row-reverse !important; } .flex-md-column-reverse { flex-direction: column-reverse !important; } .flex-md-wrap { flex-wrap: wrap !important; } .flex-md-nowrap { flex-wrap: nowrap !important; } .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-md-fill { flex: 1 1 auto !important; } .flex-md-grow-0 { flex-grow: 0 !important; } .flex-md-grow-1 { flex-grow: 1 !important; } .flex-md-shrink-0 { flex-shrink: 0 !important; } .flex-md-shrink-1 { flex-shrink: 1 !important; } .justify-content-md-start { justify-content: flex-start !important; } .justify-content-md-end { justify-content: flex-end !important; } .justify-content-md-center { justify-content: center !important; } .justify-content-md-between { justify-content: space-between !important; } .justify-content-md-around { justify-content: space-around !important; } .align-items-md-start { align-items: flex-start !important; } .align-items-md-end { align-items: flex-end !important; } .align-items-md-center { align-items: center !important; } .align-items-md-baseline { align-items: baseline !important; } .align-items-md-stretch { align-items: stretch !important; } .align-content-md-start { align-content: flex-start !important; } .align-content-md-end { align-content: flex-end !important; } .align-content-md-center { align-content: center !important; } .align-content-md-between { align-content: space-between !important; } .align-content-md-around { align-content: space-around !important; } .align-content-md-stretch { align-content: stretch !important; } .align-self-md-auto { align-self: auto !important; } .align-self-md-start { align-self: flex-start !important; } .align-self-md-end { align-self: flex-end !important; } .align-self-md-center { align-self: center !important; } .align-self-md-baseline { align-self: baseline !important; } .align-self-md-stretch { align-self: stretch !important; } } @media (min-width: 992px) { .flex-lg-row { flex-direction: row !important; } .flex-lg-column { flex-direction: column !important; } .flex-lg-row-reverse { flex-direction: row-reverse !important; } .flex-lg-column-reverse { flex-direction: column-reverse !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-nowrap { flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-lg-fill { flex: 1 1 auto !important; } .flex-lg-grow-0 { flex-grow: 0 !important; } .flex-lg-grow-1 { flex-grow: 1 !important; } .flex-lg-shrink-0 { flex-shrink: 0 !important; } .flex-lg-shrink-1 { flex-shrink: 1 !important; } .justify-content-lg-start { justify-content: flex-start !important; } .justify-content-lg-end { justify-content: flex-end !important; } .justify-content-lg-center { justify-content: center !important; } .justify-content-lg-between { justify-content: space-between !important; } .justify-content-lg-around { justify-content: space-around !important; } .align-items-lg-start { align-items: flex-start !important; } .align-items-lg-end { align-items: flex-end !important; } .align-items-lg-center { align-items: center !important; } .align-items-lg-baseline { align-items: baseline !important; } .align-items-lg-stretch { align-items: stretch !important; } .align-content-lg-start { align-content: flex-start !important; } .align-content-lg-end { align-content: flex-end !important; } .align-content-lg-center { align-content: center !important; } .align-content-lg-between { align-content: space-between !important; } .align-content-lg-around { align-content: space-around !important; } .align-content-lg-stretch { align-content: stretch !important; } .align-self-lg-auto { align-self: auto !important; } .align-self-lg-start { align-self: flex-start !important; } .align-self-lg-end { align-self: flex-end !important; } .align-self-lg-center { align-self: center !important; } .align-self-lg-baseline { align-self: baseline !important; } .align-self-lg-stretch { align-self: stretch !important; } } @media (min-width: 1200px) { .flex-xl-row { flex-direction: row !important; } .flex-xl-column { flex-direction: column !important; } .flex-xl-row-reverse { flex-direction: row-reverse !important; } .flex-xl-column-reverse { flex-direction: column-reverse !important; } .flex-xl-wrap { flex-wrap: wrap !important; } .flex-xl-nowrap { flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .flex-xl-fill { flex: 1 1 auto !important; } .flex-xl-grow-0 { flex-grow: 0 !important; } .flex-xl-grow-1 { flex-grow: 1 !important; } .flex-xl-shrink-0 { flex-shrink: 0 !important; } .flex-xl-shrink-1 { flex-shrink: 1 !important; } .justify-content-xl-start { justify-content: flex-start !important; } .justify-content-xl-end { justify-content: flex-end !important; } .justify-content-xl-center { justify-content: center !important; } .justify-content-xl-between { justify-content: space-between !important; } .justify-content-xl-around { justify-content: space-around !important; } .align-items-xl-start { align-items: flex-start !important; } .align-items-xl-end { align-items: flex-end !important; } .align-items-xl-center { align-items: center !important; } .align-items-xl-baseline { align-items: baseline !important; } .align-items-xl-stretch { align-items: stretch !important; } .align-content-xl-start { align-content: flex-start !important; } .align-content-xl-end { align-content: flex-end !important; } .align-content-xl-center { align-content: center !important; } .align-content-xl-between { align-content: space-between !important; } .align-content-xl-around { align-content: space-around !important; } .align-content-xl-stretch { align-content: stretch !important; } .align-self-xl-auto { align-self: auto !important; } .align-self-xl-start { align-self: flex-start !important; } .align-self-xl-end { align-self: flex-end !important; } .align-self-xl-center { align-self: center !important; } .align-self-xl-baseline { align-self: baseline !important; } .align-self-xl-stretch { align-self: stretch !important; } } .m-0 { margin: 0 !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mr-0, .mx-0 { margin-right: 0 !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .ml-0, .mx-0 { margin-left: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1, .my-1 { margin-top: 0.25rem !important; } .mr-1, .mx-1 { margin-right: 0.25rem !important; } .mb-1, .my-1 { margin-bottom: 0.25rem !important; } .ml-1, .mx-1 { margin-left: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mr-2, .mx-2 { margin-right: 0.5rem !important; } .mb-2, .my-2 { margin-bottom: 0.5rem !important; } .ml-2, .mx-2 { margin-left: 0.5rem !important; } .m-3 { margin: 1rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mr-3, .mx-3 { margin-right: 1rem !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-3, .mx-3 { margin-left: 1rem !important; } .m-4 { margin: 1.5rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mr-4, .mx-4 { margin-right: 1.5rem !important; } .mb-4, .my-4 { margin-bottom: 1.5rem !important; } .ml-4, .mx-4 { margin-left: 1.5rem !important; } .m-5 { margin: 3rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .mr-5, .mx-5 { margin-right: 3rem !important; } .mb-5, .my-5 { margin-bottom: 3rem !important; } .ml-5, .mx-5 { margin-left: 3rem !important; } .p-0 { padding: 0 !important; } .pt-0, .py-0 { padding-top: 0 !important; } .pr-0, .px-0 { padding-right: 0 !important; } .pb-0, .py-0 { padding-bottom: 0 !important; } .pl-0, .px-0 { padding-left: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1, .py-1 { padding-top: 0.25rem !important; } .pr-1, .px-1 { padding-right: 0.25rem !important; } .pb-1, .py-1 { padding-bottom: 0.25rem !important; } .pl-1, .px-1 { padding-left: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2, .py-2 { padding-top: 0.5rem !important; } .pr-2, .px-2 { padding-right: 0.5rem !important; } .pb-2, .py-2 { padding-bottom: 0.5rem !important; } .pl-2, .px-2 { padding-left: 0.5rem !important; } .p-3 { padding: 1rem !important; } .pt-3, .py-3 { padding-top: 1rem !important; } .pr-3, .px-3 { padding-right: 1rem !important; } .pb-3, .py-3 { padding-bottom: 1rem !important; } .pl-3, .px-3 { padding-left: 1rem !important; } .p-4 { padding: 1.5rem !important; } .pt-4, .py-4 { padding-top: 1.5rem !important; } .pr-4, .px-4 { padding-right: 1.5rem !important; } .pb-4, .py-4 { padding-bottom: 1.5rem !important; } .pl-4, .px-4 { padding-left: 1.5rem !important; } .p-5 { padding: 3rem !important; } .pt-5, .py-5 { padding-top: 3rem !important; } .pr-5, .px-5 { padding-right: 3rem !important; } .pb-5, .py-5 { padding-bottom: 3rem !important; } .pl-5, .px-5 { padding-left: 3rem !important; } .m-n1 { margin: -0.25rem !important; } .mt-n1, .my-n1 { margin-top: -0.25rem !important; } .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } .m-n2 { margin: -0.5rem !important; } .mt-n2, .my-n2 { margin-top: -0.5rem !important; } .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } .m-n3 { margin: -1rem !important; } .mt-n3, .my-n3 { margin-top: -1rem !important; } .mr-n3, .mx-n3 { margin-right: -1rem !important; } .mb-n3, .my-n3 { margin-bottom: -1rem !important; } .ml-n3, .mx-n3 { margin-left: -1rem !important; } .m-n4 { margin: -1.5rem !important; } .mt-n4, .my-n4 { margin-top: -1.5rem !important; } .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } .m-n5 { margin: -3rem !important; } .mt-n5, .my-n5 { margin-top: -3rem !important; } .mr-n5, .mx-n5 { margin-right: -3rem !important; } .mb-n5, .my-n5 { margin-bottom: -3rem !important; } .ml-n5, .mx-n5 { margin-left: -3rem !important; } .m-auto { margin: auto !important; } .mt-auto, .my-auto { margin-top: auto !important; } .mr-auto, .mx-auto { margin-right: auto !important; } .mb-auto, .my-auto { margin-bottom: auto !important; } .ml-auto, .mx-auto { margin-left: auto !important; } @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; } .mt-sm-0, .my-sm-0 { margin-top: 0 !important; } .mr-sm-0, .mx-sm-0 { margin-right: 0 !important; } .mb-sm-0, .my-sm-0 { margin-bottom: 0 !important; } .ml-sm-0, .mx-sm-0 { margin-left: 0 !important; } .m-sm-1 { margin: 0.25rem !important; } .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; } .mr-sm-1, .mx-sm-1 { margin-right: 0.25rem !important; } .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; } .ml-sm-1, .mx-sm-1 { margin-left: 0.25rem !important; } .m-sm-2 { margin: 0.5rem !important; } .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; } .mr-sm-2, .mx-sm-2 { margin-right: 0.5rem !important; } .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; } .ml-sm-2, .mx-sm-2 { margin-left: 0.5rem !important; } .m-sm-3 { margin: 1rem !important; } .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; } .mr-sm-3, .mx-sm-3 { margin-right: 1rem !important; } .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; } .ml-sm-3, .mx-sm-3 { margin-left: 1rem !important; } .m-sm-4 { margin: 1.5rem !important; } .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; } .mr-sm-4, .mx-sm-4 { margin-right: 1.5rem !important; } .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; } .ml-sm-4, .mx-sm-4 { margin-left: 1.5rem !important; } .m-sm-5 { margin: 3rem !important; } .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; } .mr-sm-5, .mx-sm-5 { margin-right: 3rem !important; } .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; } .ml-sm-5, .mx-sm-5 { margin-left: 3rem !important; } .p-sm-0 { padding: 0 !important; } .pt-sm-0, .py-sm-0 { padding-top: 0 !important; } .pr-sm-0, .px-sm-0 { padding-right: 0 !important; } .pb-sm-0, .py-sm-0 { padding-bottom: 0 !important; } .pl-sm-0, .px-sm-0 { padding-left: 0 !important; } .p-sm-1 { padding: 0.25rem !important; } .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; } .pr-sm-1, .px-sm-1 { padding-right: 0.25rem !important; } .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; } .pl-sm-1, .px-sm-1 { padding-left: 0.25rem !important; } .p-sm-2 { padding: 0.5rem !important; } .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; } .pr-sm-2, .px-sm-2 { padding-right: 0.5rem !important; } .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; } .pl-sm-2, .px-sm-2 { padding-left: 0.5rem !important; } .p-sm-3 { padding: 1rem !important; } .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; } .pr-sm-3, .px-sm-3 { padding-right: 1rem !important; } .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; } .pl-sm-3, .px-sm-3 { padding-left: 1rem !important; } .p-sm-4 { padding: 1.5rem !important; } .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; } .pr-sm-4, .px-sm-4 { padding-right: 1.5rem !important; } .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; } .pl-sm-4, .px-sm-4 { padding-left: 1.5rem !important; } .p-sm-5 { padding: 3rem !important; } .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; } .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; } .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; } .pl-sm-5, .px-sm-5 { padding-left: 3rem !important; } .m-sm-n1 { margin: -0.25rem !important; } .mt-sm-n1, .my-sm-n1 { margin-top: -0.25rem !important; } .mr-sm-n1, .mx-sm-n1 { margin-right: -0.25rem !important; } .mb-sm-n1, .my-sm-n1 { margin-bottom: -0.25rem !important; } .ml-sm-n1, .mx-sm-n1 { margin-left: -0.25rem !important; } .m-sm-n2 { margin: -0.5rem !important; } .mt-sm-n2, .my-sm-n2 { margin-top: -0.5rem !important; } .mr-sm-n2, .mx-sm-n2 { margin-right: -0.5rem !important; } .mb-sm-n2, .my-sm-n2 { margin-bottom: -0.5rem !important; } .ml-sm-n2, .mx-sm-n2 { margin-left: -0.5rem !important; } .m-sm-n3 { margin: -1rem !important; } .mt-sm-n3, .my-sm-n3 { margin-top: -1rem !important; } .mr-sm-n3, .mx-sm-n3 { margin-right: -1rem !important; } .mb-sm-n3, .my-sm-n3 { margin-bottom: -1rem !important; } .ml-sm-n3, .mx-sm-n3 { margin-left: -1rem !important; } .m-sm-n4 { margin: -1.5rem !important; } .mt-sm-n4, .my-sm-n4 { margin-top: -1.5rem !important; } .mr-sm-n4, .mx-sm-n4 { margin-right: -1.5rem !important; } .mb-sm-n4, .my-sm-n4 { margin-bottom: -1.5rem !important; } .ml-sm-n4, .mx-sm-n4 { margin-left: -1.5rem !important; } .m-sm-n5 { margin: -3rem !important; } .mt-sm-n5, .my-sm-n5 { margin-top: -3rem !important; } .mr-sm-n5, .mx-sm-n5 { margin-right: -3rem !important; } .mb-sm-n5, .my-sm-n5 { margin-bottom: -3rem !important; } .ml-sm-n5, .mx-sm-n5 { margin-left: -3rem !important; } .m-sm-auto { margin: auto !important; } .mt-sm-auto, .my-sm-auto { margin-top: auto !important; } .mr-sm-auto, .mx-sm-auto { margin-right: auto !important; } .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; } .ml-sm-auto, .mx-sm-auto { margin-left: auto !important; } } @media (min-width: 768px) { .m-md-0 { margin: 0 !important; } .mt-md-0, .my-md-0 { margin-top: 0 !important; } .mr-md-0, .mx-md-0 { margin-right: 0 !important; } .mb-md-0, .my-md-0 { margin-bottom: 0 !important; } .ml-md-0, .mx-md-0 { margin-left: 0 !important; } .m-md-1 { margin: 0.25rem !important; } .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; } .mr-md-1, .mx-md-1 { margin-right: 0.25rem !important; } .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; } .ml-md-1, .mx-md-1 { margin-left: 0.25rem !important; } .m-md-2 { margin: 0.5rem !important; } .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; } .mr-md-2, .mx-md-2 { margin-right: 0.5rem !important; } .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; } .ml-md-2, .mx-md-2 { margin-left: 0.5rem !important; } .m-md-3 { margin: 1rem !important; } .mt-md-3, .my-md-3 { margin-top: 1rem !important; } .mr-md-3, .mx-md-3 { margin-right: 1rem !important; } .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; } .ml-md-3, .mx-md-3 { margin-left: 1rem !important; } .m-md-4 { margin: 1.5rem !important; } .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; } .mr-md-4, .mx-md-4 { margin-right: 1.5rem !important; } .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; } .ml-md-4, .mx-md-4 { margin-left: 1.5rem !important; } .m-md-5 { margin: 3rem !important; } .mt-md-5, .my-md-5 { margin-top: 3rem !important; } .mr-md-5, .mx-md-5 { margin-right: 3rem !important; } .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; } .ml-md-5, .mx-md-5 { margin-left: 3rem !important; } .p-md-0 { padding: 0 !important; } .pt-md-0, .py-md-0 { padding-top: 0 !important; } .pr-md-0, .px-md-0 { padding-right: 0 !important; } .pb-md-0, .py-md-0 { padding-bottom: 0 !important; } .pl-md-0, .px-md-0 { padding-left: 0 !important; } .p-md-1 { padding: 0.25rem !important; } .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; } .pr-md-1, .px-md-1 { padding-right: 0.25rem !important; } .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; } .pl-md-1, .px-md-1 { padding-left: 0.25rem !important; } .p-md-2 { padding: 0.5rem !important; } .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; } .pr-md-2, .px-md-2 { padding-right: 0.5rem !important; } .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; } .pl-md-2, .px-md-2 { padding-left: 0.5rem !important; } .p-md-3 { padding: 1rem !important; } .pt-md-3, .py-md-3 { padding-top: 1rem !important; } .pr-md-3, .px-md-3 { padding-right: 1rem !important; } .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; } .pl-md-3, .px-md-3 { padding-left: 1rem !important; } .p-md-4 { padding: 1.5rem !important; } .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; } .pr-md-4, .px-md-4 { padding-right: 1.5rem !important; } .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; } .pl-md-4, .px-md-4 { padding-left: 1.5rem !important; } .p-md-5 { padding: 3rem !important; } .pt-md-5, .py-md-5 { padding-top: 3rem !important; } .pr-md-5, .px-md-5 { padding-right: 3rem !important; } .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; } .pl-md-5, .px-md-5 { padding-left: 3rem !important; } .m-md-n1 { margin: -0.25rem !important; } .mt-md-n1, .my-md-n1 { margin-top: -0.25rem !important; } .mr-md-n1, .mx-md-n1 { margin-right: -0.25rem !important; } .mb-md-n1, .my-md-n1 { margin-bottom: -0.25rem !important; } .ml-md-n1, .mx-md-n1 { margin-left: -0.25rem !important; } .m-md-n2 { margin: -0.5rem !important; } .mt-md-n2, .my-md-n2 { margin-top: -0.5rem !important; } .mr-md-n2, .mx-md-n2 { margin-right: -0.5rem !important; } .mb-md-n2, .my-md-n2 { margin-bottom: -0.5rem !important; } .ml-md-n2, .mx-md-n2 { margin-left: -0.5rem !important; } .m-md-n3 { margin: -1rem !important; } .mt-md-n3, .my-md-n3 { margin-top: -1rem !important; } .mr-md-n3, .mx-md-n3 { margin-right: -1rem !important; } .mb-md-n3, .my-md-n3 { margin-bottom: -1rem !important; } .ml-md-n3, .mx-md-n3 { margin-left: -1rem !important; } .m-md-n4 { margin: -1.5rem !important; } .mt-md-n4, .my-md-n4 { margin-top: -1.5rem !important; } .mr-md-n4, .mx-md-n4 { margin-right: -1.5rem !important; } .mb-md-n4, .my-md-n4 { margin-bottom: -1.5rem !important; } .ml-md-n4, .mx-md-n4 { margin-left: -1.5rem !important; } .m-md-n5 { margin: -3rem !important; } .mt-md-n5, .my-md-n5 { margin-top: -3rem !important; } .mr-md-n5, .mx-md-n5 { margin-right: -3rem !important; } .mb-md-n5, .my-md-n5 { margin-bottom: -3rem !important; } .ml-md-n5, .mx-md-n5 { margin-left: -3rem !important; } .m-md-auto { margin: auto !important; } .mt-md-auto, .my-md-auto { margin-top: auto !important; } .mr-md-auto, .mx-md-auto { margin-right: auto !important; } .mb-md-auto, .my-md-auto { margin-bottom: auto !important; } .ml-md-auto, .mx-md-auto { margin-left: auto !important; } } @media (min-width: 992px) { .m-lg-0 { margin: 0 !important; } .mt-lg-0, .my-lg-0 { margin-top: 0 !important; } .mr-lg-0, .mx-lg-0 { margin-right: 0 !important; } .mb-lg-0, .my-lg-0 { margin-bottom: 0 !important; } .ml-lg-0, .mx-lg-0 { margin-left: 0 !important; } .m-lg-1 { margin: 0.25rem !important; } .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; } .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; } .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; } .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; } .m-lg-2 { margin: 0.5rem !important; } .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; } .mr-lg-2, .mx-lg-2 { margin-right: 0.5rem !important; } .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; } .ml-lg-2, .mx-lg-2 { margin-left: 0.5rem !important; } .m-lg-3 { margin: 1rem !important; } .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; } .mr-lg-3, .mx-lg-3 { margin-right: 1rem !important; } .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; } .ml-lg-3, .mx-lg-3 { margin-left: 1rem !important; } .m-lg-4 { margin: 1.5rem !important; } .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; } .mr-lg-4, .mx-lg-4 { margin-right: 1.5rem !important; } .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; } .ml-lg-4, .mx-lg-4 { margin-left: 1.5rem !important; } .m-lg-5 { margin: 3rem !important; } .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; } .mr-lg-5, .mx-lg-5 { margin-right: 3rem !important; } .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; } .ml-lg-5, .mx-lg-5 { margin-left: 3rem !important; } .p-lg-0 { padding: 0 !important; } .pt-lg-0, .py-lg-0 { padding-top: 0 !important; } .pr-lg-0, .px-lg-0 { padding-right: 0 !important; } .pb-lg-0, .py-lg-0 { padding-bottom: 0 !important; } .pl-lg-0, .px-lg-0 { padding-left: 0 !important; } .p-lg-1 { padding: 0.25rem !important; } .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; } .pr-lg-1, .px-lg-1 { padding-right: 0.25rem !important; } .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; } .pl-lg-1, .px-lg-1 { padding-left: 0.25rem !important; } .p-lg-2 { padding: 0.5rem !important; } .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; } .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; } .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; } .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; } .p-lg-3 { padding: 1rem !important; } .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; } .pr-lg-3, .px-lg-3 { padding-right: 1rem !important; } .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; } .pl-lg-3, .px-lg-3 { padding-left: 1rem !important; } .p-lg-4 { padding: 1.5rem !important; } .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; } .pr-lg-4, .px-lg-4 { padding-right: 1.5rem !important; } .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; } .pl-lg-4, .px-lg-4 { padding-left: 1.5rem !important; } .p-lg-5 { padding: 3rem !important; } .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; } .pr-lg-5, .px-lg-5 { padding-right: 3rem !important; } .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; } .pl-lg-5, .px-lg-5 { padding-left: 3rem !important; } .m-lg-n1 { margin: -0.25rem !important; } .mt-lg-n1, .my-lg-n1 { margin-top: -0.25rem !important; } .mr-lg-n1, .mx-lg-n1 { margin-right: -0.25rem !important; } .mb-lg-n1, .my-lg-n1 { margin-bottom: -0.25rem !important; } .ml-lg-n1, .mx-lg-n1 { margin-left: -0.25rem !important; } .m-lg-n2 { margin: -0.5rem !important; } .mt-lg-n2, .my-lg-n2 { margin-top: -0.5rem !important; } .mr-lg-n2, .mx-lg-n2 { margin-right: -0.5rem !important; } .mb-lg-n2, .my-lg-n2 { margin-bottom: -0.5rem !important; } .ml-lg-n2, .mx-lg-n2 { margin-left: -0.5rem !important; } .m-lg-n3 { margin: -1rem !important; } .mt-lg-n3, .my-lg-n3 { margin-top: -1rem !important; } .mr-lg-n3, .mx-lg-n3 { margin-right: -1rem !important; } .mb-lg-n3, .my-lg-n3 { margin-bottom: -1rem !important; } .ml-lg-n3, .mx-lg-n3 { margin-left: -1rem !important; } .m-lg-n4 { margin: -1.5rem !important; } .mt-lg-n4, .my-lg-n4 { margin-top: -1.5rem !important; } .mr-lg-n4, .mx-lg-n4 { margin-right: -1.5rem !important; } .mb-lg-n4, .my-lg-n4 { margin-bottom: -1.5rem !important; } .ml-lg-n4, .mx-lg-n4 { margin-left: -1.5rem !important; } .m-lg-n5 { margin: -3rem !important; } .mt-lg-n5, .my-lg-n5 { margin-top: -3rem !important; } .mr-lg-n5, .mx-lg-n5 { margin-right: -3rem !important; } .mb-lg-n5, .my-lg-n5 { margin-bottom: -3rem !important; } .ml-lg-n5, .mx-lg-n5 { margin-left: -3rem !important; } .m-lg-auto { margin: auto !important; } .mt-lg-auto, .my-lg-auto { margin-top: auto !important; } .mr-lg-auto, .mx-lg-auto { margin-right: auto !important; } .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; } .ml-lg-auto, .mx-lg-auto { margin-left: auto !important; } } @media (min-width: 1200px) { .m-xl-0 { margin: 0 !important; } .mt-xl-0, .my-xl-0 { margin-top: 0 !important; } .mr-xl-0, .mx-xl-0 { margin-right: 0 !important; } .mb-xl-0, .my-xl-0 { margin-bottom: 0 !important; } .ml-xl-0, .mx-xl-0 { margin-left: 0 !important; } .m-xl-1 { margin: 0.25rem !important; } .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; } .mr-xl-1, .mx-xl-1 { margin-right: 0.25rem !important; } .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; } .ml-xl-1, .mx-xl-1 { margin-left: 0.25rem !important; } .m-xl-2 { margin: 0.5rem !important; } .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; } .mr-xl-2, .mx-xl-2 { margin-right: 0.5rem !important; } .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; } .ml-xl-2, .mx-xl-2 { margin-left: 0.5rem !important; } .m-xl-3 { margin: 1rem !important; } .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; } .mr-xl-3, .mx-xl-3 { margin-right: 1rem !important; } .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; } .ml-xl-3, .mx-xl-3 { margin-left: 1rem !important; } .m-xl-4 { margin: 1.5rem !important; } .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; } .mr-xl-4, .mx-xl-4 { margin-right: 1.5rem !important; } .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; } .ml-xl-4, .mx-xl-4 { margin-left: 1.5rem !important; } .m-xl-5 { margin: 3rem !important; } .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; } .mr-xl-5, .mx-xl-5 { margin-right: 3rem !important; } .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; } .ml-xl-5, .mx-xl-5 { margin-left: 3rem !important; } .p-xl-0 { padding: 0 !important; } .pt-xl-0, .py-xl-0 { padding-top: 0 !important; } .pr-xl-0, .px-xl-0 { padding-right: 0 !important; } .pb-xl-0, .py-xl-0 { padding-bottom: 0 !important; } .pl-xl-0, .px-xl-0 { padding-left: 0 !important; } .p-xl-1 { padding: 0.25rem !important; } .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; } .pr-xl-1, .px-xl-1 { padding-right: 0.25rem !important; } .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; } .pl-xl-1, .px-xl-1 { padding-left: 0.25rem !important; } .p-xl-2 { padding: 0.5rem !important; } .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; } .pr-xl-2, .px-xl-2 { padding-right: 0.5rem !important; } .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; } .pl-xl-2, .px-xl-2 { padding-left: 0.5rem !important; } .p-xl-3 { padding: 1rem !important; } .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; } .pr-xl-3, .px-xl-3 { padding-right: 1rem !important; } .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; } .pl-xl-3, .px-xl-3 { padding-left: 1rem !important; } .p-xl-4 { padding: 1.5rem !important; } .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; } .pr-xl-4, .px-xl-4 { padding-right: 1.5rem !important; } .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; } .pl-xl-4, .px-xl-4 { padding-left: 1.5rem !important; } .p-xl-5 { padding: 3rem !important; } .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; } .pr-xl-5, .px-xl-5 { padding-right: 3rem !important; } .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; } .pl-xl-5, .px-xl-5 { padding-left: 3rem !important; } .m-xl-n1 { margin: -0.25rem !important; } .mt-xl-n1, .my-xl-n1 { margin-top: -0.25rem !important; } .mr-xl-n1, .mx-xl-n1 { margin-right: -0.25rem !important; } .mb-xl-n1, .my-xl-n1 { margin-bottom: -0.25rem !important; } .ml-xl-n1, .mx-xl-n1 { margin-left: -0.25rem !important; } .m-xl-n2 { margin: -0.5rem !important; } .mt-xl-n2, .my-xl-n2 { margin-top: -0.5rem !important; } .mr-xl-n2, .mx-xl-n2 { margin-right: -0.5rem !important; } .mb-xl-n2, .my-xl-n2 { margin-bottom: -0.5rem !important; } .ml-xl-n2, .mx-xl-n2 { margin-left: -0.5rem !important; } .m-xl-n3 { margin: -1rem !important; } .mt-xl-n3, .my-xl-n3 { margin-top: -1rem !important; } .mr-xl-n3, .mx-xl-n3 { margin-right: -1rem !important; } .mb-xl-n3, .my-xl-n3 { margin-bottom: -1rem !important; } .ml-xl-n3, .mx-xl-n3 { margin-left: -1rem !important; } .m-xl-n4 { margin: -1.5rem !important; } .mt-xl-n4, .my-xl-n4 { margin-top: -1.5rem !important; } .mr-xl-n4, .mx-xl-n4 { margin-right: -1.5rem !important; } .mb-xl-n4, .my-xl-n4 { margin-bottom: -1.5rem !important; } .ml-xl-n4, .mx-xl-n4 { margin-left: -1.5rem !important; } .m-xl-n5 { margin: -3rem !important; } .mt-xl-n5, .my-xl-n5 { margin-top: -3rem !important; } .mr-xl-n5, .mx-xl-n5 { margin-right: -3rem !important; } .mb-xl-n5, .my-xl-n5 { margin-bottom: -3rem !important; } .ml-xl-n5, .mx-xl-n5 { margin-left: -3rem !important; } .m-xl-auto { margin: auto !important; } .mt-xl-auto, .my-xl-auto { margin-top: auto !important; } .mr-xl-auto, .mx-xl-auto { margin-right: auto !important; } .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; } .ml-xl-auto, .mx-xl-auto { margin-left: auto !important; } } /* style ogólne */ html { font-size: 62.5%; } .text-right { text-align: right; } .text-center { text-align: center; } /* style ogólne END */ /** Lightcase - jQuery Plugin The smart and flexible Lightbox Plugin. @author Cornel Boppart @copyright Author @version 2.5.0 (11/03/2018) */ /** Lightcase settings Note: Override default settings for your project without touching this source code by simply defining those variables within a SASS map called '$lightcase-custom'. // Example usage $lightcase-custom: ( 'breakpoint': 768px ); */ @font-face { font-family: 'lightcase'; src: url("../fonts/lightcase.eot?55356177"); src: url("../fonts/lightcase.eot?55356177#iefix") format("embedded-opentype"), url("../fonts/lightcase.woff?55356177") format("woff"), url("../fonts/lightcase.ttf?55356177") format("truetype"), url("../fonts/lightcase.svg?55356177#lightcase") format("svg"); font-weight: normal; font-style: normal; } /* line 12, ../scss/components/fonts/_font-lightcase.scss */ [class*='lightcase-icon-']:before { font-family: 'lightcase', sans-serif; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } /* Codes */ /* line 35, ../scss/components/fonts/_font-lightcase.scss */ .lightcase-icon-play:before { content: '\e800'; } /* line 36, ../scss/components/fonts/_font-lightcase.scss */ .lightcase-icon-pause:before { content: '\e801'; } /* line 37, ../scss/components/fonts/_font-lightcase.scss */ .lightcase-icon-close:before { content: '\e802'; } /* line 38, ../scss/components/fonts/_font-lightcase.scss */ .lightcase-icon-prev:before { content: '\e803'; } /* line 39, ../scss/components/fonts/_font-lightcase.scss */ .lightcase-icon-next:before { content: '\e804'; } /* line 40, ../scss/components/fonts/_font-lightcase.scss */ .lightcase-icon-spin:before { content: '\e805'; } /** Mixin providing icon defaults to be used on top of font-lightcase. Example usage: @include icon(#e9e9e9) */ /** Mixin providing icon defaults including a hover status to be used on top of font-lightcase. Example usage: @include icon-hover(#e9e9e9, #fff) */ /** Provides natural content overflow behavior and scrolling support even so for touch devices. Example usage: @include overflow() */ /** Neutralizes/resets dimensions including width, height, position as well as margins, paddings and styles. Used to enforce a neutral and unstyled look and behavoir! Example usage: @include clear(true) @param boolean $important */ @-webkit-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @-moz-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @-o-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @-ms-keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes lightcase-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); -moz-transform: rotate(359deg); -o-transform: rotate(359deg); transform: rotate(359deg); } } /* line 1, ../scss/components/modules/_case.scss */ #lightcase-case { display: none; position: fixed; z-index: 2002; top: 50%; left: 50%; font-family: arial, sans-serif; font-size: 13px; line-height: 1.5; text-align: left; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } @media screen and (max-width: 640px) { /* line 16, ../scss/components/modules/_case.scss */ html[data-lc-type=inline] #lightcase-case, html[data-lc-type=ajax] #lightcase-case { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 55px 0 70px 0; width: 100% !important; height: 100% !important; overflow: auto !important; } } @media screen and (min-width: 641px) { /* line 4, ../scss/components/modules/_content.scss */ html:not([data-lc-type=error]) #lightcase-content { position: relative; z-index: 1; text-shadow: none; background-color: #fff; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; } } @media screen and (min-width: 641px) { /* line 23, ../scss/components/modules/_content.scss */ html[data-lc-type=image] #lightcase-content, html[data-lc-type=video] #lightcase-content { background-color: #333; } } /* line 31, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } @media screen and (max-width: 640px) { /* line 31, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content, html[data-lc-type=ajax] #lightcase-content, html[data-lc-type=error] #lightcase-content { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } } /* line 43, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 640px) { /* line 43, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner { padding: 15px; } /* line 52, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner, html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *, html[data-lc-type=error] #lightcase-content .lightcase-contentInner, html[data-lc-type=error] #lightcase-content .lightcase-contentInner > * { width: 100% !important; max-width: none !important; } /* line 59, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner > *:not(iframe), html[data-lc-type=error] #lightcase-content .lightcase-contentInner > *:not(iframe) { height: auto !important; max-height: none !important; } } @media screen and (max-width: 640px) { /* line 70, ../scss/components/modules/_content.scss */ html.lightcase-isMobileDevice[data-lc-type=iframe] #lightcase-content .lightcase-contentInner iframe { overflow: auto; -webkit-overflow-scrolling: touch; } } @media screen and (max-width: 640px) and (min-width: 641px) { /* line 74, ../scss/components/modules/_content.scss */ html[data-lc-type=image] #lightcase-content .lightcase-contentInner, html[data-lc-type=video] #lightcase-content .lightcase-contentInner { line-height: 0.75; } } /* line 82, ../scss/components/modules/_content.scss */ html[data-lc-type=image] #lightcase-content .lightcase-contentInner { position: relative; overflow: hidden !important; } @media screen and (max-width: 640px) { /* line 91, ../scss/components/modules/_content.scss */ html[data-lc-type=inline] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=ajax] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap, html[data-lc-type=error] #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; } } @media screen and (min-width: 641px) { /* line 100, ../scss/components/modules/_content.scss */ html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap { padding: 30px; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width: 640px) { /* line 117, ../scss/components/modules/_content.scss */ #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { color: #aaa; } } @media screen and (min-width: 641px) { /* line 117, ../scss/components/modules/_content.scss */ #lightcase-content h1, #lightcase-content h2, #lightcase-content h3, #lightcase-content h4, #lightcase-content h5, #lightcase-content h6, #lightcase-content p { color: #333; } } /* line 3, ../scss/components/modules/_error.scss */ #lightcase-case p.lightcase-error { margin: 0; font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; } @media screen and (max-width: 640px) { /* line 3, ../scss/components/modules/_error.scss */ #lightcase-case p.lightcase-error { padding: 30px 0; } } @media screen and (min-width: 641px) { /* line 3, ../scss/components/modules/_error.scss */ #lightcase-case p.lightcase-error { padding: 0; } } /* line 4, ../scss/components/modules/_global.scss */ .lightcase-open body { overflow: hidden; } /* line 8, ../scss/components/modules/_global.scss */ .lightcase-isMobileDevice .lightcase-open body { max-width: 100%; max-height: 100%; } /* line 1, ../scss/components/modules/_info.scss */ #lightcase-info { position: absolute; padding-top: 15px; } /* line 9, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-title, #lightcase-info #lightcase-caption { margin: 0; padding: 0; line-height: 1.5; font-weight: normal; text-overflow: ellipsis; } /* line 19, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-title { font-size: 17px; color: #aaa; } @media screen and (max-width: 640px) { /* line 19, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-title { position: fixed; top: 10px; left: 0; max-width: 87.5%; padding: 5px 15px; background: #333; } } /* line 33, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-caption { clear: both; font-size: 13px; color: #aaa; } /* line 39, ../scss/components/modules/_info.scss */ #lightcase-info #lightcase-sequenceInfo { font-size: 11px; color: #aaa; } @media screen and (max-width: 640px) { /* line 45, ../scss/components/modules/_info.scss */ .lightcase-fullScreenMode #lightcase-info { padding-left: 15px; padding-right: 15px; } /* line 51, ../scss/components/modules/_info.scss */ html:not([data-lc-type=image]):not([data-lc-type=video]):not([data-lc-type=flash]):not([data-lc-type=error]) #lightcase-info { position: static; } } /* line 1, ../scss/components/modules/_loading.scss */ #lightcase-loading { position: fixed; z-index: 9999; width: 1.123em; height: auto; font-size: 38px; line-height: 1; text-align: center; text-shadow: none; position: fixed; z-index: 2001; top: 50%; left: 50%; margin-top: -0.5em; margin-left: -0.5em; opacity: 1; font-size: 32px; text-shadow: 0 0 15px #fff; -moz-transform-origin: 50% 53%; -webkit-animation: lightcase-spin 0.5s infinite linear; -moz-animation: lightcase-spin 0.5s infinite linear; -o-animation: lightcase-spin 0.5s infinite linear; animation: lightcase-spin 0.5s infinite linear; } /* line 20, ../scss/components/mixins/_presets.scss */ #lightcase-loading, #lightcase-loading:focus { text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent; -webkit-transition: color, opacity, ease-in-out 0.25s; -moz-transition: color, opacity, ease-in-out 0.25s; -o-transition: color, opacity, ease-in-out 0.25s; transition: color, opacity, ease-in-out 0.25s; } /* line 32, ../scss/components/mixins/_presets.scss */ #lightcase-loading > span { display: inline-block; text-indent: -9999px; } /* line 2, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'] { position: fixed; z-index: 9999; width: 1.123em; height: auto; font-size: 38px; line-height: 1; text-align: center; text-shadow: none; outline: none; cursor: pointer; } /* line 20, ../scss/components/mixins/_presets.scss */ a[class*='lightcase-icon-'], a[class*='lightcase-icon-']:focus { text-decoration: none; color: rgba(255, 255, 255, 0.6); -webkit-tap-highlight-color: transparent; -webkit-transition: color, opacity, ease-in-out 0.25s; -moz-transition: color, opacity, ease-in-out 0.25s; -o-transition: color, opacity, ease-in-out 0.25s; transition: color, opacity, ease-in-out 0.25s; } /* line 32, ../scss/components/mixins/_presets.scss */ a[class*='lightcase-icon-'] > span { display: inline-block; text-indent: -9999px; } /* line 49, ../scss/components/mixins/_presets.scss */ a[class*='lightcase-icon-']:hover { color: white; text-shadow: 0 0 15px white; } /* line 10, ../scss/components/modules/_navigation.scss */ .lightcase-isMobileDevice a[class*='lightcase-icon-']:hover { color: #aaa; text-shadow: none; } /* line 17, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-close { position: fixed; top: 15px; right: 15px; bottom: auto; margin: 0; opacity: 0; outline: none; } /* line 28, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-prev { left: 15px; } /* line 33, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-next { right: 15px; } /* line 38, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { left: 50%; margin-left: -0.5em; } @media screen and (min-width: 641px) { /* line 38, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'].lightcase-icon-pause, a[class*='lightcase-icon-'].lightcase-icon-play { opacity: 0; } } @media screen and (max-width: 640px) { /* line 2, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'] { bottom: 15px; font-size: 24px; } } @media screen and (min-width: 641px) { /* line 2, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-'] { bottom: 50%; margin-bottom: -0.5em; } /* line 57, ../scss/components/modules/_navigation.scss */ a[class*='lightcase-icon-']:hover, #lightcase-case:hover ~ a[class*='lightcase-icon-'] { opacity: 1; } } /* line 1, ../scss/components/modules/_overlay.scss */ #lightcase-overlay { display: none; width: 100%; min-height: 100%; position: fixed; z-index: 2000; top: -9999px; bottom: -9999px; left: 0; background: #333; } @media screen and (max-width: 640px) { /* line 1, ../scss/components/modules/_overlay.scss */ #lightcase-overlay { opacity: 1 !important; } } /* jquery.selectBoxIt.css 3.8.1 Author: @gregfranko */ /* Common CSS Properties --------------------- These properties will be applied to any themes that you use */ /* SelectBoxIt container */ .selectboxit-container { position: relative; display: inline-block; vertical-align: top; } /* Styles that apply to all SelectBoxIt elements */ .selectboxit-container * { font: 14px Helvetica, Arial; /* Prevents text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; -o-user-select: none; user-select: none; outline: none; white-space: nowrap; } /* Button */ .selectboxit-container .selectboxit { width: 220px; /* Width of the dropdown button */ cursor: pointer; margin: 0; padding: 0; border-radius: 6px; overflow: hidden; display: block; position: relative; } /* Height and Vertical Alignment of Text */ .selectboxit-container span, .selectboxit-container .selectboxit-options a { height: 30px; /* Height of the drop down */ line-height: 30px; /* Vertically positions the drop down text */ display: block; } /* Focus pseudo selector */ .selectboxit-container .selectboxit:focus { outline: 0; } /* Disabled Mouse Interaction */ .selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled { opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; cursor: default; } /* Button Text */ .selectboxit-text { text-indent: 5px; overflow: hidden; text-overflow: ellipsis; float: left; } .selectboxit .selectboxit-option-icon-container { margin-left: 5px; } /* Options List */ .selectboxit-container .selectboxit-options { -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: content-box\9; min-width: 100%; /* Minimum Width of the dropdown list box options */ margin: 0; padding: 0; list-style: none; position: absolute; overflow-x: hidden; overflow-y: auto; cursor: pointer; display: none; z-index: 9999999999999; border-radius: 6px; text-align: left; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Individual options */ .selectboxit-option .selectboxit-option-anchor { padding: 0 2px; } /* Individual Option Hover Action */ .selectboxit-option .selectboxit-option-anchor:hover { text-decoration: none; } /* Individual Option Optgroup Header */ .selectboxit-option, .selectboxit-optgroup-header { text-indent: 5px; /* Horizontal Positioning of the select box option text */ margin: 0; list-style-type: none; } /* The first Drop Down option */ .selectboxit-option-first { border-top-right-radius: 6px; border-top-left-radius: 6px; } /* The first Drop Down option optgroup */ .selectboxit-optgroup-header + .selectboxit-option-first { border-top-right-radius: 0px; border-top-left-radius: 0px; } /* The last Drop Down option */ .selectboxit-option-last { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } /* Drop Down optgroup headers */ .selectboxit-optgroup-header { font-weight: bold; } /* Drop Down optgroup header hover psuedo class */ .selectboxit-optgroup-header:hover { cursor: default; } /* Drop Down down arrow container */ .selectboxit-arrow-container { /* Positions the down arrow */ width: 30px; position: absolute; right: 0; } /* Drop Down down arrow */ .selectboxit .selectboxit-arrow-container .selectboxit-arrow { /* Horizontally centers the down arrow */ margin: 0 auto; position: absolute; top: 50%; right: 0; left: 0; } /* Drop Down down arrow for jQueryUI and jQuery Mobile */ .selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon { top: 30%; } /* Drop Down individual option icon positioning */ .selectboxit-option-icon-container { float: left; } .selectboxit-container .selectboxit-option-icon { margin: 0; padding: 0; vertical-align: middle; } /* Drop Down individual option icon positioning */ .selectboxit-option-icon-url { width: 18px; background-size: 18px 18px; background-repeat: no-repeat; height: 100%; background-position: center; float: left; } .selectboxit-rendering { display: inline-block !important; *display: inline !important; zoom: 1 !important; visibility: visible !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */ .jqueryui .ui-icon { background-color: inherit; } /* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */ .jqueryui .ui-icon-triangle-1-s { background-position: -64px -16px; } /* Default Theme ------------- Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme */ .selectboxit-btn { background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #b3b3b3; } .selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:active { color: #333333; background-color: #e6e6e6; } .selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus { color: #333333; text-decoration: none; background-position: 0 -15px; } .selectboxit-default-arrow { width: 0; height: 0; border-top: 4px solid #000000; border-right: 4px solid transparent; border-left: 4px solid transparent; } .selectboxit-list { background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .selectboxit-list .selectboxit-option-anchor { color: #333333; } .selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor { color: #ffffff; background-color: #0081c2; background-image: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); background-image: -o-linear-gradient(top, #0088cc, #0077b3); background-image: linear-gradient(to bottom, #0088cc, #0077b3); background-repeat: repeat-x; } .selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor { color: #999999; } /* szczegółowe style danego szablonu */ /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { font: inherit; display: inline-block; overflow: visible; margin: 0; padding: 15px; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity,filter; text-transform: none; color: inherit; border: 0; background-color: transparent; } .hamburger.is-active:hover, .hamburger:hover { opacity: .7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before { background-color: #000; } .hamburger-box { position: relative; display: inline-block; width: 40px; height: 24px; } .hamburger-inner { top: 50%; display: block; margin-top: -2px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 40px; height: 4px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background-color: #000; } .hamburger-inner:after, .hamburger-inner:before { display: block; content: ""; } .hamburger-inner:before { top: -10px; } .hamburger-inner:after { bottom: -10px; } .hamburger--3dx .hamburger-box { perspective: 80px; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dx .hamburger-inner:after, .hamburger--3dx .hamburger-inner:before { transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dx.is-active .hamburger-inner { transform: rotateY(180deg); background-color: transparent !important; } .hamburger--3dx.is-active .hamburger-inner:before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dx-r .hamburger-box { perspective: 80px; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dx-r .hamburger-inner:after, .hamburger--3dx-r .hamburger-inner:before { transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dx-r.is-active .hamburger-inner { transform: rotateY(-180deg); background-color: transparent !important; } .hamburger--3dx-r.is-active .hamburger-inner:before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dy .hamburger-box { perspective: 80px; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dy .hamburger-inner:after, .hamburger--3dy .hamburger-inner:before { transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dy.is-active .hamburger-inner { transform: rotateX(-180deg); background-color: transparent !important; } .hamburger--3dy.is-active .hamburger-inner:before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dy-r .hamburger-box { perspective: 80px; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dy-r .hamburger-inner:after, .hamburger--3dy-r .hamburger-inner:before { transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dy-r.is-active .hamburger-inner { transform: rotateX(180deg); background-color: transparent !important; } .hamburger--3dy-r.is-active .hamburger-inner:before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dxy .hamburger-box { perspective: 80px; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dxy .hamburger-inner:after, .hamburger--3dxy .hamburger-inner:before { transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dxy.is-active .hamburger-inner { transform: rotateX(180deg) rotateY(180deg); background-color: transparent !important; } .hamburger--3dxy.is-active .hamburger-inner:before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--3dxy-r .hamburger-box { perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dxy-r .hamburger-inner:after, .hamburger--3dxy-r .hamburger-inner:before { transition: transform 0s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .hamburger--3dxy-r.is-active .hamburger-inner { transform: rotateX(180deg) rotateY(180deg) rotate(-180deg); background-color: transparent !important; } .hamburger--3dxy-r.is-active .hamburger-inner:before { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner:after { transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--arrow.is-active .hamburger-inner:before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scaleX(0.7); } .hamburger--arrow.is-active .hamburger-inner:after { transform: translate3d(-8px, 0, 0) rotate(45deg) scaleX(0.7); } .hamburger--arrow-r.is-active .hamburger-inner:before { transform: translate3d(8px, 0, 0) rotate(45deg) scaleX(0.7); } .hamburger--arrow-r.is-active .hamburger-inner:after { transform: translate3d(8px, 0, 0) rotate(-45deg) scaleX(0.7); } .hamburger--arrowalt .hamburger-inner:before { transition: top 0.1s ease 0.1s, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner:after { transition: bottom 0.1s ease 0.1s, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner:before { top: 0; transition: top 0.1s ease, transform 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.1s; transform: translate3d(-8px, -10px, 0) rotate(-45deg) scaleX(0.7); } .hamburger--arrowalt.is-active .hamburger-inner:after { bottom: 0; transition: bottom 0.1s ease, transform 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.1s; transform: translate3d(-8px, 10px, 0) rotate(45deg) scaleX(0.7); } .hamburger--arrowalt-r .hamburger-inner:before { transition: top 0.1s ease 0.1s, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner:after { transition: bottom 0.1s ease 0.1s, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner:before { top: 0; transition: top 0.1s ease, transform 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.1s; transform: translate3d(8px, -10px, 0) rotate(45deg) scaleX(0.7); } .hamburger--arrowalt-r.is-active .hamburger-inner:after { bottom: 0; transition: bottom 0.1s ease, transform 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.1s; transform: translate3d(8px, 10px, 0) rotate(-45deg) scaleX(0.7); } .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner:before { transform: translate3d(8px, 0, 0) rotate(45deg) scaleX(0.7); } .hamburger--arrowturn.is-active .hamburger-inner:after { transform: translate3d(8px, 0, 0) rotate(-45deg) scaleX(0.7); } .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner:before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scaleX(0.7); } .hamburger--arrowturn-r.is-active .hamburger-inner:after { transform: translate3d(-8px, 0, 0) rotate(45deg) scaleX(0.7); } .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner:after, .hamburger--boring .hamburger-inner:before { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner:before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner:after { bottom: 0; transform: rotate(-90deg); } .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-delay: .13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration: .13s; } .hamburger--collapse .hamburger-inner:after { top: -20px; transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, opacity 0.1s linear; } .hamburger--collapse .hamburger-inner:before { transition: top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { transition-delay: .22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--collapse.is-active .hamburger-inner:after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s linear 0.22s; opacity: 0; } .hamburger--collapse.is-active .hamburger-inner:before { top: 0; transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.16s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; transform: rotate(-90deg); } .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-delay: .13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration: .13s; } .hamburger--collapse-r .hamburger-inner:after { top: -20px; transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner:before { transition: top 0.12s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transition-delay: .22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -10px, 0) rotate(45deg); } .hamburger--collapse-r.is-active .hamburger-inner:after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s linear 0.22s; opacity: 0; } .hamburger--collapse-r.is-active .hamburger-inner:before { top: 0; transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.16s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; transform: rotate(90deg); } .hamburger--elastic .hamburger-inner { top: 2px; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-duration: .275s; } .hamburger--elastic .hamburger-inner:before { top: 10px; transition: opacity .125s ease .275s; } .hamburger--elastic .hamburger-inner:after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transition-delay: 75ms; transform: translate3d(0, 10px, 0) rotate(135deg); } .hamburger--elastic.is-active .hamburger-inner:before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner:after { transition-delay: 75ms; transform: translate3d(0, -20px, 0) rotate(-270deg); } .hamburger--elastic-r .hamburger-inner { top: 2px; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-duration: .275s; } .hamburger--elastic-r .hamburger-inner:before { top: 10px; transition: opacity .125s ease .275s; } .hamburger--elastic-r .hamburger-inner:after { top: 20px; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transition-delay: 75ms; transform: translate3d(0, 10px, 0) rotate(-135deg); } .hamburger--elastic-r.is-active .hamburger-inner:before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner:after { transition-delay: 75ms; transform: translate3d(0, -20px, 0) rotate(270deg); } .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color .125s ease-in .175s; } .hamburger--emphatic .hamburger-inner:before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s linear 0.125s, left 0.125s ease-in 0.175s; } .hamburger--emphatic .hamburger-inner:after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s linear 0.125s, right 0.125s ease-in 0.175s; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner:before { top: -80px; left: -80px; transition: left 0.125s ease-out, top 0.05s linear 0.125s, transform 0.125s cubic-bezier(0.075, 0.82, 0.165, 1) 0.175s; transform: translate3d(80px, 80px, 0) rotate(45deg); } .hamburger--emphatic.is-active .hamburger-inner:after { top: -80px; right: -80px; transition: right 0.125s ease-out, top 0.05s linear 0.125s, transform 0.125s cubic-bezier(0.075, 0.82, 0.165, 1) 0.175s; transform: translate3d(-80px, 80px, 0) rotate(-45deg); } .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color .125s ease-in .175s; } .hamburger--emphatic-r .hamburger-inner:before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s linear 0.125s, left 0.125s ease-in 0.175s; } .hamburger--emphatic-r .hamburger-inner:after { top: 10px; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s linear 0.125s, right 0.125s ease-in 0.175s; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner:before { top: 80px; left: -80px; transition: left 0.125s ease-out, top 0.05s linear 0.125s, transform 0.125s cubic-bezier(0.075, 0.82, 0.165, 1) 0.175s; transform: translate3d(80px, -80px, 0) rotate(-45deg); } .hamburger--emphatic-r.is-active .hamburger-inner:after { top: 80px; right: -80px; transition: right 0.125s ease-out, top 0.05s linear 0.125s, transform 0.125s cubic-bezier(0.075, 0.82, 0.165, 1) 0.175s; transform: translate3d(-80px, -80px, 0) rotate(45deg); } .hamburger--minus .hamburger-inner:after, .hamburger--minus .hamburger-inner:before { transition: bottom .08s ease-out 0s,top .08s ease-out 0s,opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner:after, .hamburger--minus.is-active .hamburger-inner:before { transition: bottom .08s ease-out,top .08s ease-out,opacity 0s linear .08s; opacity: 0; } .hamburger--minus.is-active .hamburger-inner:before { top: 0; } .hamburger--minus.is-active .hamburger-inner:after { bottom: 0; } .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner:before { top: 10px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform,opacity; } .hamburger--slider .hamburger-inner:after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner:before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner:after { transform: translate3d(0, -20px, 0) rotate(-90deg); } .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner:before { top: 10px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform,opacity; } .hamburger--slider-r .hamburger-inner:after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner:before { transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner:after { transform: translate3d(0, -20px, 0) rotate(90deg); } .hamburger--spin .hamburger-inner { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration: .22s; } .hamburger--spin .hamburger-inner:before { transition: top .1s ease-in .25s,opacity .1s ease-in; } .hamburger--spin .hamburger-inner:after { transition: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transition-delay: .12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: rotate(225deg); } .hamburger--spin.is-active .hamburger-inner:before { top: 0; transition: top .1s ease-out,opacity .1s ease-out .12s; opacity: 0; } .hamburger--spin.is-active .hamburger-inner:after { bottom: 0; transition: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transform: rotate(-90deg); } .hamburger--spin-r .hamburger-inner { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration: .22s; } .hamburger--spin-r .hamburger-inner:before { transition: top .1s ease-in .25s,opacity .1s ease-in; } .hamburger--spin-r .hamburger-inner:after { transition: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transition-delay: .12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: rotate(-225deg); } .hamburger--spin-r.is-active .hamburger-inner:before { top: 0; transition: top .1s ease-out,opacity .1s ease-out .12s; opacity: 0; } .hamburger--spin-r.is-active .hamburger-inner:after { bottom: 0; transition: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transform: rotate(90deg); } .hamburger--spring .hamburger-inner { top: 2px; transition: background-color 0s linear .13s; } .hamburger--spring .hamburger-inner:before { top: 10px; transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner:after { top: 20px; transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: .22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner:before { top: 0; transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner:after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration: .13s; } .hamburger--spring-r .hamburger-inner:after { top: -20px; transition: top 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, opacity 0s linear; } .hamburger--spring-r .hamburger-inner:before { transition: top 0.1s cubic-bezier(0.33333, 0.66667, 0.66667, 1) 0.2s, transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transition-delay: .22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -10px, 0) rotate(-45deg); } .hamburger--spring-r.is-active .hamburger-inner:after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s linear 0.22s; opacity: 0; } .hamburger--spring-r.is-active .hamburger-inner:before { top: 0; transition: top 0.1s cubic-bezier(0.33333, 0, 0.66667, 0.33333) 0.15s, transform 0.13s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s; transform: rotate(90deg); } .hamburger--stand .hamburger-inner { transition: transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.15s, background-color 0s linear 75ms; } .hamburger--stand .hamburger-inner:before { transition: top 75ms ease-in 75ms, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s; } .hamburger--stand .hamburger-inner:after { transition: bottom 75ms ease-in 75ms, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s; } .hamburger--stand.is-active .hamburger-inner { transition: transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s, background-color 0s linear 0.15s; transform: rotate(90deg); background-color: transparent !important; } .hamburger--stand.is-active .hamburger-inner:before { top: 0; transition: top 75ms ease-out 0.1s, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s; transform: rotate(-45deg); } .hamburger--stand.is-active .hamburger-inner:after { bottom: 0; transition: bottom 75ms ease-out 0.1s, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s; transform: rotate(45deg); } .hamburger--stand-r .hamburger-inner { transition: transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.15s, background-color 0s linear 75ms; } .hamburger--stand-r .hamburger-inner:before { transition: top 75ms ease-in 75ms, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s; } .hamburger--stand-r .hamburger-inner:after { transition: bottom 75ms ease-in 75ms, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s; } .hamburger--stand-r.is-active .hamburger-inner { transition: transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s, background-color 0s linear 0.15s; transform: rotate(-90deg); background-color: transparent !important; } .hamburger--stand-r.is-active .hamburger-inner:before { top: 0; transition: top 75ms ease-out 0.1s, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s; transform: rotate(-45deg); } .hamburger--stand-r.is-active .hamburger-inner:after { bottom: 0; transition: bottom 75ms ease-out 0.1s, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s; transform: rotate(45deg); } .hamburger--squeeze .hamburger-inner { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-duration: 75ms; } .hamburger--squeeze .hamburger-inner:before { transition: top 75ms ease .12s,opacity 75ms ease; } .hamburger--squeeze .hamburger-inner:after { transition: bottom 75ms ease 0.12s, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transition-delay: .12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: rotate(45deg); } .hamburger--squeeze.is-active .hamburger-inner:before { top: 0; transition: top 75ms ease,opacity 75ms ease .12s; opacity: 0; } .hamburger--squeeze.is-active .hamburger-inner:after { bottom: 0; transition: bottom 75ms ease, transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transform: rotate(-90deg); } .hamburger--vortex .hamburger-inner { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-duration: .2s; } .hamburger--vortex .hamburger-inner:after, .hamburger--vortex .hamburger-inner:before { transition-delay: .1s; transition-timing-function: linear; transition-duration: 0s; } .hamburger--vortex .hamburger-inner:before { transition-property: top,opacity; } .hamburger--vortex .hamburger-inner:after { transition-property: bottom,transform; } .hamburger--vortex.is-active .hamburger-inner { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transform: rotate(765deg); } .hamburger--vortex.is-active .hamburger-inner:after, .hamburger--vortex.is-active .hamburger-inner:before { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner:before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner:after { bottom: 0; transform: rotate(90deg); } .hamburger--vortex-r .hamburger-inner { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-duration: .2s; } .hamburger--vortex-r .hamburger-inner:after, .hamburger--vortex-r .hamburger-inner:before { transition-delay: .1s; transition-timing-function: linear; transition-duration: 0s; } .hamburger--vortex-r .hamburger-inner:before { transition-property: top,opacity; } .hamburger--vortex-r .hamburger-inner:after { transition-property: bottom,transform; } .hamburger--vortex-r.is-active .hamburger-inner { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transform: rotate(-765deg); } .hamburger--vortex-r.is-active .hamburger-inner:after, .hamburger--vortex-r.is-active .hamburger-inner:before { 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; transform: rotate(-90deg); } /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%,43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%,43%,70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%,50%,to { opacity: 1; } 25%,75% { opacity: 0; } } @keyframes flash { 0%,50%,to { opacity: 1; } 25%,75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%,11.1%,to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { 0%,11.1%,to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownMin { 0% { opacity: 0; -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownMin { 0% { opacity: 0; -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownMin { -webkit-animation-name: fadeInDownMin; animation-name: fadeInDownMin; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%,80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%,80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%,40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%,80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%,80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 0%,to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%,to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 0%,to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { transform-origin: top left; } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); transform-origin: top left; } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { transform-origin: top left; } 0%,20%,60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); transform-origin: top left; } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%,to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%,to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* animate END */ /* mixins */ /* mixins */ /* zmienne */ /* zmienne END */ /* style ogólne */ *:focus { outline: none; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } @media (max-width: 991.98px) { .show-desktop { display: none !important; } } @media (min-width: 768px) { .show-mobile { display: none !important; } } html { font-size: 0.937rem; } html.font-size-x { font-size: 1.2rem; } html.font-size-xx { font-size: 1.2rem; } #content { overflow: hidden; } *:focus { outline: none; } a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus { outline: none; } textarea:focus, input:focus { outline: none; } body { font-family: "Open Sans", sans-serif; } body.ovhid { overflow: hidden; } @media (max-width: 991.98px) { .rwd-order-last { order: 9; } } .hamburger { position: absolute; right: 0px; top: 35px; margin-top: 6px; z-index: 10000; padding: 15px 7px; } @media (min-width: 768px) { .hamburger { display: none; } } .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { background: #fff; height: 3px; width: 27px; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before { background: #fff; } @media (min-width: 992px) { .container { max-width: 1130px; } } p { line-height: 1.5; } a:visited { color: #000; } .hidden { display: none; } .text-right { text-align: right; } .post, .page { margin: 0; } .anim, .anim-p p { opacity: 0; } .anim-mobile { opacity: 1 !important; } .hide-animated { opacity: 0; } .anim-p p { animation-delay: 0.7s; } a { text-decoration: none; } img { border-radius: 0; } .flex { display: flex; } .alert { margin-top: 20px; margin-bottom: 20px; font-size: 2rem; font-weight: bold; } .alert__info { color: #95C11F; } html:not([data-lc-type="error"]) #lightcase-content { background: none; box-shadow: none; } .lightcase-icon-next::before { content: url(images/arrow-right-slider.svg); } .lightcase-icon-prev::before { content: url(images/arrow-left-slider.svg); } .lightcase-icon-close::before { content: "X"; font-size: 25px; } .lightcase-icon-spin::before { content: '---'; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #464646; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #464646; transition: all 0.4s; } h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: #464646; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #000; } h2 { font-weight: 300; font-size: 2.5rem; margin-top: 40px; margin-bottom: 0; } @media (min-width: 768px) { h2 { font-size: 4.66rem; } } .subheader { color: #B4B4B4; margin-top: 20px; } .order-first { order: 0; } .btn { padding: 9px 20px; line-height: 1; border-radius: 32px; background: none; font-weight: bold; transition: all 0.4s; color: #000; display: inline-block; text-decoration: none; position: relative; cursor: pointer; border: 1px solid #000; } .btn:visited { color: #000; } .btn:hover { background-color: #000; color: #fff; text-decoration: none; } .btn--margin { margin-top: 40px; margin-bottom: 40px; } .btn--white { color: #fff; border: 1px solid #fff; } .btn--white:visited { color: #fff; } .btn--white:hover { background: #fff; color: #000; } .container-fluid__no-gutters { padding-left: 0; padding-right: 0; } .container-fluid-ctn { max-width: 980px; margin: 0 auto; } .category-list { list-style: none; border-right: 1px solid #3D3D3D; } .category-list ul { list-style: none; } .category-list a { color: #fff; margin-bottom: 20px; display: block; } .category-list a.active { font-weight: bold; } .cart-item { color: #919191; } /* animacja podkreslenia menu */ .animate-header h1, .animate-header h1::after, .animate-header h2, .animate-header h2::after, .animate-header h3, .animate-header h3::after { animation-delay: 0.4s; animation-iteration-count: 1; animation-duration: 800ms; animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .animate-header h1, .animate-header h2, .animate-header h3 { position: relative; cursor: default; clip-path: inset(0 100% 0 0); } .animate-header h1:after, .animate-header h2:after, .animate-header h3:after { content: ""; position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background-color: #323B84; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; transform-origin: 0 50%; } .animate-header h1.anim-header, .animate-header h2.anim-header, .animate-header h3.anim-header { animation-name: text; } .animate-header h1.anim-header:after, .animate-header h2.anim-header:after, .animate-header h3.anim-header:after { animation-name: revealer; } .animate-header__white h1:after { background-color: #fff; } @keyframes text { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes revealer { 0%, 50% { transform-origin: 0 50%; } 60%, 100% { transform-origin: 100% 50%; } 60% { transform: scaleX(1); } 100% { transform: scaleX(0); } } /* animacja podkreslenia menu END */ /* style ogólne END */ /* nagłówek */ #page .site-header { position: fixed; width: 100%; z-index: 999; transition: all 0.4s; border: none; background: black; padding: 10px; /* .woocs-style-1-dropdown{ max-width: 200px; position: absolute; right: 0; top: 0; height: auto; } .wpml-ls{ position: absolute; top: 0; right: 218px; }*/ } #page .site-header .site-logo { float: left; } #page .site-header .custom-logo { transition: all 0.4s; } @media (max-width: 991.98px) { #page .site-header .custom-logo { max-width: 65px; } } #page .site-header.nav-scroll { background: black !important; } #page .site-header.nav-scroll .custom-logo { max-width: 66px; } #page .site-header.nav-scroll .site-header__ctn--rightTop { opacity: 0; visibility: hidden; } #page .site-header.nav-scroll .top-account { top: -19px; } #page .site-header.nav-scroll .hamburger { top: -1px; } @media (min-width: 768px) { #page .site-header__menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } #page .site-header__ctn { display: flex; justify-content: space-between; } #page .site-header__ctn--right { float: right; } #page .site-header__ctn--rightTop { display: flex; margin-bottom: 25px; transition: all 0.4s; opacity: 1; } #page .site-header__ctn--rightTop > div { display: flex; } #page .site-header__ctn--rightTop > div:last-of-type { margin-left: 20px; } #page .site-header__ctn--rightTop > div > span { display: block; color: #919191; margin-right: 8px; font-size: 0.687rem; } @media (max-width: 991.98px) { #page .site-header__ctn--rightTop > div > span { display: none; } } #page .site-header__ctn .top-account { text-align: right; position: relative; top: 0; transition: all 0.4s; } @media (max-width: 991.98px) { #page .site-header__ctn .top-account { margin-right: 55px; } } #page .site-header ul#primary-menu { list-style: none; padding: 0; margin: 0; } @media (max-width: 991.98px) { #page .site-header ul#primary-menu { text-align: center; } } #page .site-header ul#primary-menu li { display: block; margin-left: 8px; margin-right: 8px; } @media (min-width: 768px) { #page .site-header ul#primary-menu li { display: inline-block; } } #page .site-header ul#primary-menu li a { color: #000; text-transform: uppercase; letter-spacing: 0.15em; } @media (min-width: 768px) { #page .site-header ul#primary-menu li a { color: #fff; } } #page .site-header ul#primary-menu li.current-menu-item a { font-weight: bold; } #page .site-header .woocs-style-1-dropdown { background: url(images/arrow-down-select.svg) no-repeat top 7px right; box-shadow: none; color: #fff; font-size: 0.866rem; } #page .site-header .woocs-style-1-dropdown .fa-chevron-left2 { display: none; } #page .site-header .woocs-style-1-dropdown:hover { box-shadow: none; } #page .site-header .woocs-style-1-dropdown .woocs-style-1-dropdown-menu { background: none; box-shadow: none; background-color: #000; } #page .site-header .woocs-style-1-dropdown .woocs-style-1-dropdown-menu li:hover { background: none; } #page .site-header .woocs-style-1-dropdown .woocs-style-1-select { padding: 0 16px; } #page .site-header .woocs-style-1-active { background: url(images/arrow-down-select.svg) no-repeat 7px right; box-shadow: none; color: #fff; box-shadow: none; } #page .site-header .wpml-ls-legacy-dropdown-click { width: 95px; } #page .site-header .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu { background: #000; } #page .site-header .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu .wpml-ls-item { padding: 9px 4px; } #page .site-header .wpml-ls-legacy-dropdown-click .js-wpml-ls-item-toggle a { background: none; border: none; color: #fff; padding: 0; font-size: 0.866rem; } #page .site-header .wpml-ls-legacy-dropdown-click .js-wpml-ls-item-toggle a:after { content: url("images/arrow-down-select.svg"); border: none; top: 2px; } #page .site-header .wpml-ls-legacy-dropdown-click a { background: none; border: none; color: #fff; padding: 0; } .woocommerce-active .site-header .main-navigation { width: auto; margin-right: auto; } #page .woocs-style-1-dropdown .woocs-style-1-dropdown-menu li:hover { background: none !important; } .mobilemenu-active .site-branding { z-index: 9; border: none; } .mobilemenu-active .container-fluid { padding: 0; } .hamburger { position: absolute; right: -7px; top: 17px; margin-top: 6px; z-index: 10000; padding: 15px 7px; transition: all 0.4s; } @media (min-width: 768px) { .hamburger { display: none; } } .hamburger:hover { background: no-repeat; opacity: 1; } .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { background: #fff; height: 3px; width: 27px; } .main-navigation { width: auto; clear: none; } .main-navigation li { float: none; margin-top: 12px; margin-bottom: 12px; } @media (min-width: 768px) { .main-navigation li { float: left; text-align: left; margin: auto; } } @media only screen and (min-width: 1100px) and (max-width: 1800px) { .main-navigation ul { margin-top: 13px; } .main-navigation ul li a { margin-left: 11px; margin-right: 11px; } } .cart-icon__user { margin-left: 15px; } #page .site-header .woocs-style-1-dropdown .woocs-style-1-select { padding-left: 0; padding-right: 22px; } #page .main-navigation.toggled .collapse-ctn { position: fixed; height: 100%; width: 100%; left: 0; top: 0; bottom: 0; background: #000; z-index: 99; } #page .main-navigation.toggled .collapse-ctn .menu-top-menu-container { margin-top: 125px; } #page .main-navigation.toggled .collapse-ctn .menu-item a { color: #fff !important; } #page .main-navigation.toggled .hamburger { right: 7px; } /* nagłówek END */ /* swiper & slider */ .swiper-container { width: 100%; height: 100%; } .swiper-slide { /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } /* swiper END */ /* footer */ .social-bar { background: #F2F2F2; font-weight: 300; position: relative; margin-top: 80px; padding-bottom: 40px; z-index: 2; position: relative; } .social-bar:after { background: #F2F2F2; content: ""; position: absolute; top: -40px; height: 80px; left: 50%; transform: translateX(-50%); width: 190px; z-index: -1; } .social-bar span { display: block; font-weight: 400; color: #B4B4B4; text-transform: uppercase; margin-top: 35px; margin-bottom: 20px; } .social-bar .fb-icon { width: 22px; } .social-bar .youtube-icon { width: 44px; } .social-bar a { margin-top: -25px; display: inline-block; } .social-bar__left { margin-right: 15px; } .social-bar__right { margin-left: 15px; } .newsletter-bar { background: #2C2C2C; padding-top: 65px; padding-bottom: 65px; color: #575757; } .newsletter-bar h2 { margin-top: 0; color: #fff; margin-bottom: 15px; } .newsletter-bar form { margin-top: 40px; } .newsletter-bar form .form-input { width: 240px; border-radius: 20px; border: 1px solid #757575; margin-right: 20px; background: transparent; color: #aaa; padding: 3px 20px; } .newsletter-bar form .btn { border-color: #fff; color: #fff; font-size: 1.125rem; font-weight: bold; padding: 6px 18px; } .newsletter-bar form .btn:hover { background-color: #2C2C2C; } #colophon.site-footer { background: #2C2C2C; border-top: 1px solid #353535; padding-top: 40px; padding-bottom: 40px; } @media (min-width: 768px) { #colophon.site-footer { padding-top: 110px; padding-bottom: 60px; } } #colophon.site-footer a { color: #FFFFFF; text-decoration: none; } #colophon.site-footer h3 { color: #575757; margin-top: 0; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; } #colophon.site-footer .site-footer__address { color: #CBCBCB; margin-bottom: 15px; } #colophon.site-footer ul { list-style: none; margin: 0; } #colophon.site-footer ul li { margin-bottom: 9px; } #colophon.site-footer img { display: inline-block; } #colophon.site-footer .footer-author { margin-top: 50px; } @media (max-width: 991.98px) { #colophon.site-footer .text-right { text-align: left; } } @media (max-width: 991.98px) { .footer-bottom { margin-top: 30px; } } .policy-accept { margin-top: 20px; } .policy-accept a { color: #fff; } /* footer END */ /* strona główna */ .swiper-mp .swiper-button-prev { background-image: url(images/arrow-left-slider.svg); left: 3%; opacity: 1 !important; } .swiper-mp .swiper-button-next { background-image: url(images/arrow-right-slider.svg); right: 3%; } .swiper-mp-ctn { position: relative; } .swiper-mp-ctn .mp-slider-btn { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 2; } .mp-slider { height: 100vh; width: 100%; display: flex; background-position: center; background-size: cover; } .mp-slider .mp-slider-top { justify-content: center; align-items: center; flex-direction: column; width: 100%; display: flex; color: #fff; position: relative; z-index: 2; font-size: 1.6rem; font-weight: 300; } @media (max-width: 991.98px) { .mp-slider .mp-slider-top p { font-size: 1rem; max-width: 70%; } .mp-slider .mp-slider-top p br { display: none; } } @media (min-width: 768px) { .mp-slider .mp-slider-top { font-size: 2rem; } } .mp-slider .mp-slider-top h1, .mp-slider .mp-slider-top h2 { color: #fff; font-size: 3rem; font-weight: bold; font-family: "Open Sans", sans-serif; margin: 0; } @media (min-width: 768px) { .mp-slider .mp-slider-top h1, .mp-slider .mp-slider-top h2 { font-size: 7rem; } } @media (min-width: 1200px) { .mp-slider .mp-slider-top h1, .mp-slider .mp-slider-top h2 { font-size: 11.3rem; } } .mp-slider:after { position: absolute; content: ""; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; } .mp-promo { background: url(images/products-bg.jpg) no-repeat center #E3E3E3; background-size: cover; padding-top: 0px; padding-bottom: 50px; } .mp-promo h2 { margin-bottom: 60px; } .mp-promo__btn { margin-top: 70px; margin-bottom: 10px; } .mp-sectionText { padding-top: 40px; padding-bottom: 40px; line-height: 2.1; font-weight: 300; } @media (min-width: 768px) { .mp-sectionText { padding-top: 85px; padding-bottom: 85px; } } .mp-sectionText h3 { font-weight: 300; font-size: 2.5rem; line-height: 1.4; } @media (min-width: 768px) { .mp-sectionText h3 { font-size: 2.5rem; } } @media (min-width: 1200px) { .mp-sectionText h3 { font-size: 3.33rem; } } @media (max-width: 991.98px) { .mp-sectionText h3 br { display: none; } } .mp-sectionText p { line-height: 2.1; margin-top: 15px; color: #000000; } .swiper-product-top .swiper-slide { opacity: 0 !important; } .swiper-product-top .swiper-slide.swiper-slide-active { opacity: 1 !important; } .swiper-product-bottom-ctn { max-width: 860px; margin: 0 auto; background: #fff; padding-left: 30px; padding-right: 30px; padding-bottom: 15px; position: relative; } .swiper-product-bottom-ctn:after { width: 100%; height: 300px; top: -150px; content: ""; position: absolute; left: 0; background: #fff; } @media (min-width: 768px) { .swiper-product-bottom-ctn:after { height: 400px; top: -360px; } } @media (max-width: 991.98px) { .swiper-product-bottom-ctn h3 { min-height: 50px; font-size: 16px; } } .swiper-product-bottom { position: relative; } .swiper-product-bottom .swiper-slide { justify-content: left; } .swiper-product-bottom__border { width: 100%; height: 3px; position: absolute; bottom: 17px; left: 0; transition: all 0.4s; } .swiper-product-bottom__comp { color: #B2B2B2; } .swiper-product-bottom h3 a { color: #B2B2B2; font-weight: bold; } .swiper-product-bottom .amount { color: #B2B2B2; } .swiper-product-bottom-slide { cursor: pointer; margin-bottom: 40px; width: 100%; } .swiper-product-bottom-slide h3 { color: #B2B2B2; } .swiper-product-bottom-slide .btn { float: right; top: -6px; opacity: 0; transition: all 0.4s; } @media (max-width: 991.98px) { .swiper-product-bottom-slide .btn { float: none; top: 6px; } } .swiper-product-bottom-slide__active .swiper-product-bottom__border { height: 10px; bottom: 14px; } .swiper-product-bottom-slide__active h3 { color: #000; } .swiper-product-bottom-slide__active h3 a { color: #000; } .swiper-product-bottom-slide__active .amount { color: #000; } .swiper-product-bottom-slide__active .swiper-product-bottom__comp { color: #000; } .swiper-product-bottom-slide__active .btn { opacity: 1; } .mp-difference { position: relative; color: #B4B4B4; /* .beer-handle{ width: 12px; height: 171px; border-radius: 4px; background: #fff; &:after, &:before{ //border: none; } }*/ } .mp-difference:after { content: ""; width: 100%; height: 75%; background: #F2F2F2; position: absolute; left: 0; top: 0; z-index: -1; } .mp-difference .beer-reveal:after { content: ""; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.61); top: 0; padding: 0; right: 0; left: auto; } .mp-difference .beer-slider[data-beer-label]::after { content: ""; display: none; } .mp-difference .beer-slider { margin-top: 20px; } .mp-gallery { margin-top: 40px; margin-bottom: 60px; } @media (min-width: 768px) { .mp-gallery { margin-top: 110px; } } .mp-gallery p { font-weight: 300; line-height: 2.1; } .mp-gallery__left img { float: right; } @media (max-width: 991.98px) { .mp-gallery__left img { display: none; } } .mp-gallery__right .btn { margin-top: 40px; } /* strona główna END */ /* single product */ @media only screen and (min-width: 1100px) and (max-width: 1500px) { .single-product-ctn > .row .col-xl-2 { flex: 0 0 10%; max-width: 10%; } .single-product-ctn > .row .col-xl-8 { flex: 0 0 80%; max-width: 80%; } } .product-breadcrumb { margin-left: 0; list-style: none; } .product-breadcrumb li { display: inline-block; color: #757575; margin-left: 15px; margin-right: 15px; position: relative; text-transform: uppercase; } .product-breadcrumb li:before { content: "»"; position: absolute; right: -20px; top: -1px; } .product-breadcrumb li:last-of-type:before { content: ""; } .product-price__comp { font-size: 1rem; margin-left: 10px; } .product-name-hh { color: #fff; font-family: "Montserrat", sans-serif; font-size: 2.5rem; margin-top: 0px; margin-bottom: 30px; } @media (min-width: 768px) { .product-name-hh { font-size: 4rem; margin-top: 20px; } } .product-single-ctn { margin-top: 40px; } .product-single-ctn__details { color: #fff; font-weight: 300; } .product-single-ctn__details strong { font-weight: 700; } @media (min-width: 768px) { .product-single-ctn__details strong { position: absolute; padding-left: 12px; } } .product-single-ctn__details strong:after { top: 9px; left: 0px; position: absolute; content: ""; width: 4.5px; height: 4.5px; background: #fff; border-radius: 50%; } .product-single-ctn__details--text { max-width: 400px; } .product-single-ctn .single-product-text { border-top: 1px solid #2C2C2C; padding-top: 60px; margin-top: 10px; color: #fff; } .product-single-ctn .single-product-text h2 { font-size: 1.73rem; color: #fff; margin-bottom: 35px; margin-top: 0; font-weight: bold; line-height: 1.38; } .product-single-ctn .single-product-text h3 { font-size: 1rem; color: #616161; font-weight: 400; } .product-single-ctn .single-product-text p { line-height: 1.866; } .site-content { padding-top: 87px; } @media (min-width: 768px) { .site-content { padding-top: 118px; } } .home .site-content { padding-top: 0px; } .home #page .site-header { background: none; } .onsale { display: none; } .single-product { background: url(images/product_bg.jpg) no-repeat top center #000000; } .single-product .product-left-gallery .fa-chevron-left::before { content: url(images/arrow-small-left.svg); } .single-product .product-left-gallery .fa-chevron-right::before { content: url(images/arrow-small-right.svg); } .single-product .product-left-gallery .swiper-button-prev-s { position: absolute; top: 50%; transform: translateY(-50%); left: -15px; cursor: pointer; } .single-product .product-left-gallery .swiper-button-next-s { position: absolute; top: 50%; transform: translateY(-50%); right: -15px; cursor: pointer; } .single-product .product-left-gallery .swiper-slide-active img { border: 1px solid #707070; } .single-product .related-products { background: #fff; padding-bottom: 60px; } .single-product .edit-link { display: none; } .single-product .product-single-ctn p.price { float: left; color: #fff; font-weight: bold; font-size: 2.66rem; margin-top: 0 !important; } .single-product .product-single-ctn p.price ins { background: none; font-weight: bold; font-size: 1.5rem; } @media (min-width: 768px) { .single-product .product-single-ctn p.price ins { font-size: 2.66rem; } } .single-product .product-single-ctn p.price del { display: block; } @media (max-width: 991.98px) { .single-product .product-single-ctn p.price del { font-size: 1rem; } } .single-product .product-single-ctn p.price del + ins { margin-left: 0; } .single-product .product-single-ctn .cart { float: right; margin-bottom: 0 !important; width: 100%; } .single-product .product-single-ctn .cart .single_add_to_cart_button { background: url(images/icon-basket.svg) no-repeat center right 15px #fff; color: #000; border-radius: 20px; font-weight: bold; font-size: 1.2rem; padding: 12px 65px 12px 20px; margin-top: 38px; } .single-product .product-single-ctn .cart .quantity input { background: #000; color: #fff; border-radius: 32px; border: 1px solid #3E3E3E; padding: 9px; } .single-product .product-single-ctn .product-single-price { margin-top: 30px; overflow: auto; } .single-product .site-content { padding-top: 100px; } @media (min-width: 768px) { .single-product .site-content { padding-top: 205px; } } .single-product #page .site-header { background: none; } .single-product .social-bar { margin-top: 0px; } .single-product .shipping-link { color: #fff; text-decoration: underline; font-weight: 300; float: left; } .cart-collaterals .cart_totals small.includes_tax, .includes_tax { display: none; } .storefront-full-width-content.single-product div.product .images { width: 100%; } .storefront-full-width-content.single-product div.product .summary { width: 100%; } #select-product-colorsSelectBoxIt { border-radius: 25px; background: #000; border: none; color: #fff; font-family: "Open Sans", sans-serif; font-weight: 300; border: 1px solid #3E3E3E; } #select-product-colorsSelectBoxIt #select-product-colorsSelectBoxItArrow { border-top: 7px solid #747474; border-right: 6px solid transparent; border-left: 6px solid transparent; } .selectboxit-container #select-product-colorsSelectBoxIt { height: 38px; } .selectboxit-container .selectboxit-option-icon-container { padding-top: 3px; } #select-product-colorsSelectBoxItText { padding-top: 3px; } .selectboxit-container { width: 100%; } .selectboxit-container .selectboxit { width: 100%; } .selectboxit .selectboxit-arrow-container .selectboxit-arrow { top: 16px; } #select-product-colorsSelectBoxItDefaultIcon { position: relative; height: 24px; background: none; border-radius: 50%; width: 24px; top: -1px; left: 2px; } .selectboxit-option-icon { height: 24px; background: none; border-radius: 50%; width: 24px; } #select-product-colorsSelectBoxItText { position: relative; padding-left: 20px; } #select-product-colorsSelectBoxItOptions li { position: relative; } #select-product-colorsSelectBoxItOptions li:after { width: 24px; height: 24px; background: attr(data-color); border-radius: 50%; content: ""; position: absolute; left: 0; top: 2px; } .related-products { background: #fff; } .related-products__header { margin-bottom: 30px; } .product-list-item { margin-bottom: 40px; } .product-list-item .product-price__comp { margin-left: 0; } .product-list-item h3 { font-weight: bold; font-size: 1.6rem; } .product-list-item__line { text-align: center; margin-top: 0px; margin-bottom: 11px; line-height: 0; } .product-list-item__line img { display: inline-block; } .product-list-item__price { padding-bottom: 40px; position: relative; } .product-list-item__price:after { content: ""; background: #fff; position: absolute; bottom: -125px; left: 0; width: 100%; height: 175px; z-index: -1; } .product-list-item__ctn { background: #fff; max-width: 280px; margin: 0 auto; } .product-list-item__ctn h3 { font-weight: bold; font-size: 1.6rem; margin-top: 25px; margin-bottom: 5px; display: inline-block; } .product-list-item__ctn h3 a { font-weight: bold; } .product-single-label { color: #B4B4B4; font-weight: 500; font-size: 1rem; text-transform: uppercase; margin-bottom: 15px; } .socialmedia-share { list-style: none; float: right; margin-left: 5px; } .socialmedia-share li { display: inline-block; margin-left: 12px; } .socialmedia-share img { width: 23px; } .socialmedia-share-ctn span { color: #B4B4B4; display: block; float: right; } /* single product END */ /* product list */ .tax-product_cat { background: #F2F2F2; } .tax-product_cat .storefront-sorting { display: none; } .tax-product_cat .site-content { padding-top: 130px; } @media (min-width: 768px) { .tax-product_cat .site-content { padding-top: 200px; } } .tax-product_cat .category-list a { color: #000; } .tax-product_cat h1 { color: #000; font-weight: bold; font-size: 4rem; margin-top: 0; text-align: center; } /* product list END */ /* galeria */ .gallery-ctn { display: flex; flex-wrap: wrap; } .gallery { /* a{ display: inline-block; max-width: 48%; float: left; margin-left: 0.5%; margin-right: 0.5%; }*/ } @media (min-width: 768px) { .gallery { margin-top: 50px; } } .gallery a { display: flex; width: 49%; margin-left: 0.5%; margin-right: 0.5%; } @media (max-width: 991.98px) { .gallery a { width: 99%; } } .gallery .col-md-6 { padding-left: 5px; padding-right: 5px; margin-bottom: 10px; } .gallery img { margin-bottom: 10px; } .page-template-gallery { background: #F2F2F2; } /* galeria END */ /* o nas */ .about h3 { color: #000; font-size: 1rem; font-weight: bold; } .about__top { background: #F2F2F2; padding-bottom: 50px; padding-top: 40px; color: #000; } @media (min-width: 768px) { .about__top { padding-bottom: 200px; } } .about__top h2 { color: #000; font-size: 2.33rem; font-weight: 300; margin-top: 0; margin-bottom: 40px; } @media (min-width: 768px) { .about__top h2 { font-size: 3.33rem; margin-bottom: 0px; } } .about__top h2 strong { font-weight: bold; } .about__bottom--left { max-width: 430px; padding-top: 60px; } .about img { max-width: initial; margin-top: -120px; margin-left: auto; margin-right: auto; } @media (max-width: 991.98px) { .about img { margin-top: 0px; max-width: 100%; } } .page-template-about p { font-weight: 300; font-size: 0.93rem; line-height: 2; } /* o nas END */ /* contact */ .contact__top { background: #F2F2F2; padding-top: 45px; padding-bottom: 45px; } @media (min-width: 768px) { .contact__top { padding-top: 100px; padding-bottom: 80px; } } .contact__top p { color: #B4B4B4; margin-bottom: 0; } .contact__top a { color: #000000; font-weight: 300; font-size: 2rem; } @media (min-width: 768px) { .contact__top a { font-size: 3.33rem; } } .contact__bottom { padding-top: 45px; padding-bottom: 45px; } @media (min-width: 768px) { .contact__bottom { padding-top: 80px; padding-bottom: 80px; } } .contact__bottom .row { margin-bottom: 25px; } .contact input, .contact textarea { width: 100%; background: none; border: 1px solid #C9C9C9; border-radius: 16px; padding: 5px 15px; } .contact .btn { font-size: 1.2rem; font-weight: bold; } @media only screen and (min-width: 800px) { .contact .img-bg { position: absolute; right: -160px; top: 252px; } } @media only screen and (min-width: 1000px) { .contact .img-bg { max-width: 600px; } } @media only screen and (min-width: 1300px) { .contact .img-bg { max-width: 800px; } } @media only screen and (min-width: 1900px) { .contact .img-bg { max-width: 100%; } } @media (max-width: 991.98px) { .contact input[name="your-name"] { margin-bottom: 25px; } } /* contact END */ /* podstrona tekstowa */ .page-template-default h1 { font-size: 4.5rem; margin-top: 30px; font-weight: 300; } .page-template-default h2 { font-size: 3rem; margin-bottom: 30px; font-weight: 300; } .page-template-default p + h2 { margin-top: 1.5em; } /* podstrona tekstowa END */ /* koszyk */ .checkout .col2-set .col-1, .checkout .col2-set .col-2 { width: 100%; max-width: 100%; } .wc-proceed-to-checkout .button.checkout-button, #payment .place-order .button { border-radius: 30px; } .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="url"], .woocommerce input[type="password"], .woocommerce input[type="search"], .woocommerce input[type="number"], .woocommerce input[type="tel"], .woocommerce input[type="range"], .woocommerce input[type="date"], .woocommerce input[type="month"], .woocommerce input[type="week"], .woocommerce input[type="time"], .woocommerce input[type="datetime"], .woocommerce input[type="datetime-local"], .woocommerce input[type="color"], .woocommerce textarea { color: #666; padding: 5px 15px; border: 1px solid #C9C9C9; border-radius: 16px; background: none; } .woocommerce .select2-container--default .select2-selection--single { border-radius: 16px; padding: 5px 15px; height: 38px; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 6px; } .woocommerce .shop_table .actions .button { border: 1px solid #000; color: #000; padding: 9px 20px; line-height: 1; border-radius: 32px; background: none; } .woocommerce .col-1, .woocommerce .col-2 { max-width: 100%; } table.cart td.actions .coupon { display: flex; } .woocommerce .shop_table .actions .button { padding: 11px 20px; } .star-rating span::before, .quantity .plus, .quantity .minus, p.stars a:hover::after, p.stars a::after, .star-rating span::before, #payment .payment_methods li input[type="radio"]:first-child:checked + label::before { color: #000; } .woocommerce-MyAccount-navigation-link--downloads { display: none; } .woocommerce-shipping-destination, .woocommerce-shipping-calculator { display: none; } /* koszyk END */ /*# sourceMappingURL=style.css.map */ .seo_text { max-height: 400px; overflow-y: scroll; padding: 0 15px; } .seo_text h2, .term-description h2 { margin-top: 0; margin-bottom: 10px; font-size: 2em; }