diff --git a/debug.css b/debug.css index e8b12ff..835d675 100644 --- a/debug.css +++ b/debug.css @@ -11,16 +11,33 @@ a:not([href]), a:[href="#"], a:[href=""], -a[href*="javascript:void(0)"] { +a[href*="javascript:void(0)"], +a:empty +a:empty[title=""], +a:empty[aria-label=""], +a:empty[aria-labelledby=""], +a:empty:not([title]):not([aria-label]):not([aria-labelledby]), +a:blank[title=""], +a:blank[aria-label=""], +a:blank[aria-labelledby=""], +a:blank:not([title]):not([aria-label]):not([aria-labelledby]) { animation: blink .5s step-end infinite alternate; } img:not([alt]), -img[alt=""] { +img[alt=""], +img[alt=" "], +[role="img"]:not([aria-label]):not([aria-labelledby]), +svg[role="img"]:not([aria-label]):not([aria-labelledby]), +img[src=""], +img[src=" "], +img[src="#"], +img[src="/"], { animation: blink .5s step-end infinite alternate; } -html:not([lang]), +html:not([lang]), +html[lang=" "], html[lang=""] { animation: blink .5s step-end infinite alternate; } @@ -37,12 +54,15 @@ meta[name="viewport"][content*="minimum-scale"] { } input:not([id]), +input[type=""], select:not([id]), textarea:not([id]) { animation: blink .5s step-end infinite alternate; } -label:not([for]) { +label:not([for]), +label[for=""], +label[for=" "] { animation: blink .5s step-end infinite alternate; } @@ -52,16 +72,107 @@ textarea:not([name]) { animation: blink .5s step-end infinite alternate; } -form:not([name]):not([id]) { +form:not([name]):not([id]), +form:not([action]), +form[action=" "], +form[action=""] { animation: blink .5s step-end infinite alternate; } -button:empty, -a:empty { +button:empty, +button:empty:not([aria-label]):not([aria-labelledby]):not([title]), +button:blank:not([aria-label]):not([aria-labelledby]):not([title]), +button[aria-label=""], +button[aria-labelledby=""], +button[title=""], +button:not([type]):not([form]):not([formaction]):not([formtarget]) { animation: blink .5s step-end infinite alternate; } script[type="text/javascript"], link[rel="stylesheet"][type="text/css"] { animation: blink .5s step-end infinite alternate; -} \ No newline at end of file +} + +table[role="presentation"] th, +table[role="presentation"] thead, +table[role="presentation"] tfoot, +table[role="presentation"] caption, +table[role="presentation"] colgroup, +table[role="presentation"] [axis], +table[role="presentation"] [scope], +table[role="presentation"] [headers] { + animation: blink .5s step-end infinite alternate; +} + +[onafterprint], [onbeforeprint], [onbeforeunload], +[onerror], [onhaschange], [onload], [onmessage], +[onoffline], [ononline], [onpagehide], [onpageshow], +[onpopstate], [onredo], [onresize], [onstorage], +[onundo], [onunload], +[onblur], [onchage], [oncontextmenu], [onfocus], +[onformchange], [onforminput], [oninput], [oninvalid], +[onreset], [onselect], [onsubmit], +[onkeydown], [onkeypress], [onkeyup], +[onclick], [ondblclick], [ondrag], [ondragend], +[ondragenter], [ondragleave], [ondragover], +[ondragstart], [ondrop], [onmousedown], [onmousemove], +[onmouseout], [onmouseover], [onmouseup], [onmousewheel], +[onscroll], +[onabort], [oncanplay], [oncanplaythrough], +[ondurationchange], [onemptied], [onended], [onerror], +[onloadeddata], [onloadedmetadata], [onloadstart], +[onpause], [onplay], [onplaying], [onprogress], +[onratechange], [onreadystatechange], [onseeked], +[onseeking], [onstalled], [onsuspend], [ontimeupdate], +[onvolumechange], [onwaiting] { + animation: blink .5s step-end infinite alternate; +} + +title:empty, +title:blank { + animation: blink .5s step-end infinite alternate; +} + +[dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"]) { + animation: blink .5s step-end infinite alternate; +} + +[type="radio"]:not([name]), +[type="checkbox"]:not(:only-of-type):not([name]) { + animation: blink .5s step-end infinite alternate; +} + +ul > :not(li), +ol > :not(li), +:not(ul):not(ol) > li { + animation: blink .5s step-end infinite alternate; +} + +:not(figure) > figcaption { + animation: blink .5s step-end infinite alternate; +} + +figure:not([role="group"]) { + animation: blink .5s step-end infinite alternate; +} + +:not(tr) > td, +:not(tr) > th, +colgroup *:not(col), +:not(colgroup) > col, +tr > :not(td):not(th), +optgroup > :not(option), +:not(select) > optgroup, +:not(fieldset) > legend, +select > :not(option):not(optgroup), +:not(select):not(optgroup) > option, +table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption) { + animation: blink .5s step-end infinite alternate; +} + +[target$="blank"]:not([rel]), +[target$="blank"]:not([rel*="noopener"]), +[target$="blank"]:not([rel*="noreferrer"]) { + animation: blink .5s step-end infinite alternate; +} \ No newline at end of file diff --git a/nav.scss b/nav.scss index c9b8ae3..16ea406 100644 --- a/nav.scss +++ b/nav.scss @@ -11,9 +11,13 @@ z-index: 0; overflow-y: auto; font-size: 0.8em; - background: #2F2F2F; + span { + width: 20px; + display: inline-block; + } + input { display: none; diff --git a/styles.css b/styles.css index fc156d0..a86a241 100644 --- a/styles.css +++ b/styles.css @@ -1,4834 +1,4837 @@ -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label { - margin: 0; - padding: 0; } - -a, img, button { - outline: none; } - -a { - color: inherit; - text-decoration: none; } - -h1, h2, h3, h4, h5, h6 { - font-weight: normal; } - -ul { - list-style: none; } - -input, select, textarea, .textarea { - box-sizing: border-box; - appearance: none; - box-shadow: none; } - input:focus, select:focus, textarea:focus, .textarea:focus { - outline: none; } - -input[type=checkbox] { - margin-right: 5px; } - -button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { - border: 0; } - -table { - border-collapse: separate; - border-spacing: 0; } - -i { - font-style: normal; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -body { - background: #e7ebf3; - font-family: Open Sans, sans-serif; - font-size: 0.9em; } - -.clear { - clear: both; } - -pre { - background: #fff; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; - border: 1px solid #b7b7b7; - padding: 5px; - overflow-x: scroll; - counter-reset: line; } - pre span { - display: block; } - pre span:before { - counter-increment: line; - content: counter(line); - display: inline-block; - border-right: 1px solid #ddd; - padding: 0 .5em; - margin-right: .5em; - color: #888; - width: 30px; } - -article { - background: #fff; - padding: 5px; - margin: 0; } - article p { - line-height: 1.5em; } - -.ok { - color: #5cff56; } - -.warning { - color: #ff4b41; } - -.favorite { - color: #d16059; } - -.green { - background: #61BD6D; } - -.red { - background: #D14841; } - -.blue { - background: #2C82C9; } - -.orange { - background: #FBA026; } - -.lightblue { - background: #54ACD2; } - -.yellow { - background: #FAC51C; } - -.purple { - background: #553982; } - -.pink { - background: #ffa6e3; } - -.grey { - background: #dcdcdc; } - -.darkred { - background: #B8312F; } - -.darkgreen { - background: #41A85F; } - -.darkblue { - background: #2969B0; } - -.wf-100 { - width: 100%; } - -.wf-80 { - width: 80%; } - -.wf-20 { - width: 20%; } - -.wf-50 { - width: 50%; } - -.wf-33 { - width: 33.33%; } - -.wf-25 { - width: 25%; } - -.wf-75 { - width: 75%; } - -.wf-66 { - width: 66.66%; } - -.spacer { - padding: 5px; } - -.resizable { - resize: both; - overflow: auto; } - -@media only screen and (min-width: 501px) and (max-width: 900px) { - .box.w-33, .box.w-25 { - width: 49%; - width: calc(50% - 5px); } - - .box.w-75, .box.w-66 { - width: 49%; - width: calc(50% - 5px); } } -@media only screen and (max-width: 500px) { - .box.w-33, .box.w-50, .box.w-25, .box.w-66, .box.w-75 { - width: 100%; - width: calc(100% - 5px); } } -.center { - margin: 0 auto; } - -.centerText { - text-align: center; } - -.rightText { - text-align: right; } - -.floatLeft { - float: left; } - -.floatRight { - float: right; } - -.pAlignTable { - display: table; - width: 100%; } - -.vCenterTable { - display: table-cell; - vertical-align: middle; } - -.h-overflow { - overflow-x: auto; } - -.hidden { - display: none; } - -/*! - * 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: 0.5s; - animation-duration: 0.5s; - -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.flipOutX, -.animated.flipOutY, -.animated.bounceIn, -.animated.bounceOut { - -webkit-animation-duration: .75s; - animation-duration: .75s; } - -@-webkit-keyframes bounce { - from, 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: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 40%, 43% { - -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); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); } - 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); - -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 { - from, 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: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 40%, 43% { - -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); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); } - 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); - -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 { - from, 50%, to { - opacity: 1; } - 25%, 75% { - opacity: 0; } } -@keyframes flash { - from, 50%, to { - opacity: 1; } - 25%, 75% { - opacity: 0; } } -.flash { - -webkit-animation-name: flash; - animation-name: flash; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); } - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -@keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); } - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -.pulse { - -webkit-animation-name: pulse; - animation-name: pulse; } - -@-webkit-keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 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: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -@keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 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: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -.rubberBand { - -webkit-animation-name: rubberBand; - animation-name: rubberBand; } - -@-webkit-keyframes shake { - from, to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 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 { - from, to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 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: rotate3d(0, 0, 1, 15deg); - transform: rotate3d(0, 0, 1, 15deg); } - 40% { - -webkit-transform: rotate3d(0, 0, 1, -10deg); - transform: rotate3d(0, 0, 1, -10deg); } - 60% { - -webkit-transform: rotate3d(0, 0, 1, 5deg); - transform: rotate3d(0, 0, 1, 5deg); } - 80% { - -webkit-transform: rotate3d(0, 0, 1, -5deg); - transform: rotate3d(0, 0, 1, -5deg); } - to { - -webkit-transform: rotate3d(0, 0, 1, 0deg); - transform: rotate3d(0, 0, 1, 0deg); } } -@keyframes swing { - 20% { - -webkit-transform: rotate3d(0, 0, 1, 15deg); - transform: rotate3d(0, 0, 1, 15deg); } - 40% { - -webkit-transform: rotate3d(0, 0, 1, -10deg); - transform: rotate3d(0, 0, 1, -10deg); } - 60% { - -webkit-transform: rotate3d(0, 0, 1, 5deg); - transform: rotate3d(0, 0, 1, 5deg); } - 80% { - -webkit-transform: rotate3d(0, 0, 1, -5deg); - transform: rotate3d(0, 0, 1, -5deg); } - to { - -webkit-transform: rotate3d(0, 0, 1, 0deg); - transform: rotate3d(0, 0, 1, 0deg); } } -.swing { - -webkit-transform-origin: top center; - transform-origin: top center; - -webkit-animation-name: swing; - animation-name: swing; } - -@-webkit-keyframes tada { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } - 10%, 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -@keyframes tada { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } - 10%, 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { - -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); - transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -.tada { - -webkit-animation-name: tada; - animation-name: tada; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes wobble { - from { - -webkit-transform: none; - transform: none; } - 15% { - -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } - 30% { - -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } - 45% { - -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } - 60% { - -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } - 75% { - -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - to { - -webkit-transform: none; - transform: none; } } -@keyframes wobble { - from { - -webkit-transform: none; - transform: none; } - 15% { - -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } - 30% { - -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } - 45% { - -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } - 60% { - -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } - 75% { - -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - to { - -webkit-transform: none; - transform: none; } } -.wobble { - -webkit-animation-name: wobble; - animation-name: wobble; } - -@-webkit-keyframes jello { - from, 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 { - from, 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 { - from, 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: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -@keyframes bounceIn { - from, 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: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); } } -.bounceIn { - -webkit-animation-name: bounceIn; - animation-name: bounceIn; } - -@-webkit-keyframes bounceInDown { - from, 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 { - from, 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 { - from, 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 { - from, 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 { - from, 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); } - from { - 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 { - from, 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); } - from { - 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 { - from, 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); } - from { - 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: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes bounceInUp { - from, 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); } - from { - 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: translate3d(0, 0, 0); - transform: translate3d(0, 0, 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 { - from { - opacity: 0; } - to { - opacity: 1; } } -@keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } -.fadeIn { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; } - -@-webkit-keyframes fadeInDown { - from { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInDown { - from { - 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 fadeInDownBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInDownBig { - from { - 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 { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInLeft { - from { - 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 { - from { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInLeftBig { - from { - 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 { - from { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInRight { - from { - 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 { - from { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInRightBig { - from { - 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 { - from { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInUp { - from { - 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 { - from { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes fadeInUpBig { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; } } -@keyframes fadeOut { - from { - opacity: 1; } - to { - opacity: 0; } } -.fadeOut { - -webkit-animation-name: fadeOut; - animation-name: fadeOut; } - -@-webkit-keyframes fadeOutDown { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); } } -@keyframes fadeOutDown { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); } } -@keyframes fadeOutDownBig { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); } } -@keyframes fadeOutLeft { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); } } -@keyframes fadeOutLeftBig { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); } } -@keyframes fadeOutRight { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); } } -@keyframes fadeOutRightBig { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); } } -@keyframes fadeOutUp { - from { - 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 { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); } } -@keyframes fadeOutUpBig { - from { - 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 { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; } - 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; } - 50% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - -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); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } } -@keyframes flip { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; } - 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; } - 50% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - -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); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - 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 { - from { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; } - 40% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - 60% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; } - 80% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); } } -@keyframes flipInX { - from { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; } - 40% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - 60% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; } - 80% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - transform: perspective(400px) rotate3d(1, 0, 0, -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 { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; } - 40% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - 60% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; } - 80% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); } } -@keyframes flipInY { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; } - 40% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; } - 60% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; } - 80% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - transform: perspective(400px) rotate3d(0, 1, 0, -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 { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); } - 30% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; } - to { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; } } -@keyframes flipOutX { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); } - 30% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; } - to { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; } } -.flipOutX { - -webkit-animation-name: flipOutX; - animation-name: flipOutX; - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; } - -@-webkit-keyframes flipOutY { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); } - 30% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; } - to { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; } } -@keyframes flipOutY { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); } - 30% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; } - to { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; } } -.flipOutY { - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipOutY; - animation-name: flipOutY; } - -@-webkit-keyframes lightSpeedIn { - from { - -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); - opacity: 1; } - 80% { - -webkit-transform: skewX(-5deg); - transform: skewX(-5deg); - opacity: 1; } - to { - -webkit-transform: none; - transform: none; - opacity: 1; } } -@keyframes lightSpeedIn { - from { - -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); - opacity: 1; } - 80% { - -webkit-transform: skewX(-5deg); - transform: skewX(-5deg); - opacity: 1; } - 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 { - from { - opacity: 1; } - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; } } -@keyframes lightSpeedOut { - from { - 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 { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; } } -@keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; } } -.rotateIn { - -webkit-animation-name: rotateIn; - animation-name: rotateIn; } - -@-webkit-keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -@keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -.rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; } - -@-webkit-keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -@keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -.rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; } - -@-webkit-keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -@keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -.rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; } - -@-webkit-keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -@keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; } } -.rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; } - -@-webkit-keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; } } -@keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; } - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; } } -.rotateOut { - -webkit-animation-name: rotateOut; - animation-name: rotateOut; } - -@-webkit-keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } } -@keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; } } -.rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; } - -@-webkit-keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } -@keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } -.rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; } - -@-webkit-keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } -@keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; } - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; } } -.rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; } - -@-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; } } -@keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; } - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; } } -.rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; } - -@-webkit-keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; } - 20%, 60% { - -webkit-transform: rotate3d(0, 0, 1, 80deg); - transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; } - 40%, 80% { - -webkit-transform: rotate3d(0, 0, 1, 60deg); - transform: rotate3d(0, 0, 1, 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% { - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; } - 20%, 60% { - -webkit-transform: rotate3d(0, 0, 1, 80deg); - transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; } - 40%, 80% { - -webkit-transform: rotate3d(0, 0, 1, 60deg); - transform: rotate3d(0, 0, 1, 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; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes rollIn { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -@keyframes rollIn { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - to { - opacity: 1; - -webkit-transform: none; - transform: none; } } -.rollIn { - -webkit-animation-name: rollIn; - animation-name: rollIn; } - -/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -@-webkit-keyframes rollOut { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } -@keyframes rollOut { - from { - opacity: 1; } - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } -.rollOut { - -webkit-animation-name: rollOut; - animation-name: rollOut; } - -@-webkit-keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); } - 50% { - opacity: 1; } } -@keyframes zoomIn { - from { - 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 { - from { - 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 { - from { - 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 { - from { - 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 { - from { - 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 { - from { - 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 { - from { - 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 { - from { - 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 { - from { - 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 { - from { - opacity: 1; } - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); } - to { - opacity: 0; } } -@keyframes zoomOut { - from { - opacity: 1; } - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); } - 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 { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -.slideInDown { - -webkit-animation-name: slideInDown; - animation-name: slideInDown; } - -@-webkit-keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -.slideInLeft { - -webkit-animation-name: slideInLeft; - animation-name: slideInLeft; } - -@-webkit-keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -.slideInRight { - -webkit-animation-name: slideInRight; - animation-name: slideInRight; } - -@-webkit-keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -@keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } -.slideInUp { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; } - -@-webkit-keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); } } -@keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 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 { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); } } -@keyframes slideOutLeft { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 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 { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); } } -@keyframes slideOutRight { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 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 { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); } } -@keyframes slideOutUp { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); } } -.slideOutUp { - -webkit-animation-name: slideOutUp; - animation-name: slideOutUp; } - -.container-fluid, .container { - box-sizing: border-box; } - -.row { - box-sizing: border-box; - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; } - -.col { - box-sizing: border-box; - display: flex; - flex: 1 0 auto; - flex-direction: column; - flex-wrap: wrap; - margin-bottom: var(--gutter-compensation, -0.5rem); - margin-left: var(--gutter-compensation, -0.5rem); } - -.row.reverse { - flex-direction: row-reverse; } - -.col.reverse { - flex-direction: column-reverse; } - -.col-xs, -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12 { - box-sizing: border-box; - -ms-flex: 0 0 auto; - -webkit-box-flex: 0; - flex: 0 0 auto; - padding-right: 0.3rem; - padding-left: 0.3rem; } - -.col-xs { - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; } - -.col-xs-1 { - -ms-flex-preferred-size: 8.333%; - flex-basis: 8.333%; - max-width: 8.333%; } - -.col-xs-2 { - -ms-flex-preferred-size: 16.667%; - flex-basis: 16.667%; - max-width: 16.667%; } - -.col-xs-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; } - -.col-xs-4 { - -ms-flex-preferred-size: 33.333%; - flex-basis: 33.333%; - max-width: 33.333%; } - -.col-xs-5 { - -ms-flex-preferred-size: 41.667%; - flex-basis: 41.667%; - max-width: 41.667%; } - -.col-xs-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; } - -.col-xs-7 { - -ms-flex-preferred-size: 58.333%; - flex-basis: 58.333%; - max-width: 58.333%; } - -.col-xs-8 { - -ms-flex-preferred-size: 66.667%; - flex-basis: 66.667%; - max-width: 66.667%; } - -.col-xs-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; } - -.col-xs-10 { - -ms-flex-preferred-size: 83.333%; - flex-basis: 83.333%; - max-width: 83.333%; } - -.col-xs-11 { - -ms-flex-preferred-size: 91.667%; - flex-basis: 91.667%; - max-width: 91.667%; } - -.col-xs-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; } - -.col-xs-offset-1 { - margin-left: 8.333%; } - -.col-xs-offset-2 { - margin-left: 16.667%; } - -.col-xs-offset-3 { - margin-left: 25%; } - -.col-xs-offset-4 { - margin-left: 33.333%; } - -.col-xs-offset-5 { - margin-left: 41.667%; } - -.col-xs-offset-6 { - margin-left: 50%; } - -.col-xs-offset-7 { - margin-left: 58.333%; } - -.col-xs-offset-8 { - margin-left: 66.667%; } - -.col-xs-offset-9 { - margin-left: 75%; } - -.col-xs-offset-10 { - margin-left: 83.333%; } - -.col-xs-offset-11 { - margin-left: 91.667%; } - -.start-xs { - -ms-flex-pack: start; - -webkit-box-pack: start; - justify-content: flex-start; - text-align: start; } - -.center-xs { - -ms-flex-pack: center; - -webkit-box-pack: center; - justify-content: center; - text-align: center; } - -.end-xs { - -ms-flex-pack: end; - -webkit-box-pack: end; - justify-content: flex-end; - text-align: end; } - -.top-xs { - -ms-flex-align: start; - -webkit-box-align: start; - align-items: flex-start; } - -.middle-xs { - -ms-flex-align: center; - -webkit-box-align: center; - align-items: center; } - -.bottom-xs { - -ms-flex-align: end; - -webkit-box-align: end; - align-items: flex-end; } - -.around-xs { - -ms-flex-pack: distribute; - justify-content: space-around; } - -.between-xs { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; } - -.first-xs { - -ms-flex-order: -1; - -webkit-box-ordinal-group: 0; - order: -1; } - -.last-xs { - -ms-flex-order: 1; - -webkit-box-ordinal-group: 2; - order: 1; } - -@media only screen and (min-width: 48em) { - .container { - width: 46rem; } - - .col-sm, - .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 { - box-sizing: border-box; - -ms-flex: 0 0 auto; - -webkit-box-flex: 0; - flex: 0 0 auto; - padding-right: 0.3rem; - padding-left: 0.3rem; } - - .col-sm { - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; } - - .col-sm-1 { - -ms-flex-preferred-size: 8.333%; - flex-basis: 8.333%; - max-width: 8.333%; } - - .col-sm-2 { - -ms-flex-preferred-size: 16.667%; - flex-basis: 16.667%; - max-width: 16.667%; } - - .col-sm-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; } - - .col-sm-4 { - -ms-flex-preferred-size: 33.333%; - flex-basis: 33.333%; - max-width: 33.333%; } - - .col-sm-5 { - -ms-flex-preferred-size: 41.667%; - flex-basis: 41.667%; - max-width: 41.667%; } - - .col-sm-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; } - - .col-sm-7 { - -ms-flex-preferred-size: 58.333%; - flex-basis: 58.333%; - max-width: 58.333%; } - - .col-sm-8 { - -ms-flex-preferred-size: 66.667%; - flex-basis: 66.667%; - max-width: 66.667%; } - - .col-sm-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; } - - .col-sm-10 { - -ms-flex-preferred-size: 83.333%; - flex-basis: 83.333%; - max-width: 83.333%; } - - .col-sm-11 { - -ms-flex-preferred-size: 91.667%; - flex-basis: 91.667%; - max-width: 91.667%; } - - .col-sm-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; } - - .col-sm-offset-1 { - margin-left: 8.333%; } - - .col-sm-offset-2 { - margin-left: 16.667%; } - - .col-sm-offset-3 { - margin-left: 25%; } - - .col-sm-offset-4 { - margin-left: 33.333%; } - - .col-sm-offset-5 { - margin-left: 41.667%; } - - .col-sm-offset-6 { - margin-left: 50%; } - - .col-sm-offset-7 { - margin-left: 58.333%; } - - .col-sm-offset-8 { - margin-left: 66.667%; } - - .col-sm-offset-9 { - margin-left: 75%; } - - .col-sm-offset-10 { - margin-left: 83.333%; } - - .col-sm-offset-11 { - margin-left: 91.667%; } - - .start-sm { - -ms-flex-pack: start; - -webkit-box-pack: start; - justify-content: flex-start; - text-align: start; } - - .center-sm { - -ms-flex-pack: center; - -webkit-box-pack: center; - justify-content: center; - text-align: center; } - - .end-sm { - -ms-flex-pack: end; - -webkit-box-pack: end; - justify-content: flex-end; - text-align: end; } - - .top-sm { - -ms-flex-align: start; - -webkit-box-align: start; - align-items: flex-start; } - - .middle-sm { - -ms-flex-align: center; - -webkit-box-align: center; - align-items: center; } - - .bottom-sm { - -ms-flex-align: end; - -webkit-box-align: end; - align-items: flex-end; } - - .around-sm { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .between-sm { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; } - - .first-sm { - -ms-flex-order: -1; - -webkit-box-ordinal-group: 0; - order: -1; } - - .last-sm { - -ms-flex-order: 1; - -webkit-box-ordinal-group: 2; - order: 1; } } -@media only screen and (min-width: 62em) { - .container { - width: 61rem; } - - .col-md, - .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 { - box-sizing: border-box; - -ms-flex: 0 0 auto; - -webkit-box-flex: 0; - flex: 0 0 auto; - padding-right: 0.3rem; - padding-left: 0.3rem; } - - .col-md { - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; } - - .col-md-1 { - -ms-flex-preferred-size: 8.333%; - flex-basis: 8.333%; - max-width: 8.333%; } - - .col-md-2 { - -ms-flex-preferred-size: 16.667%; - flex-basis: 16.667%; - max-width: 16.667%; } - - .col-md-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; } - - .col-md-4 { - -ms-flex-preferred-size: 33.333%; - flex-basis: 33.333%; - max-width: 33.333%; } - - .col-md-5 { - -ms-flex-preferred-size: 41.667%; - flex-basis: 41.667%; - max-width: 41.667%; } - - .col-md-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; } - - .col-md-7 { - -ms-flex-preferred-size: 58.333%; - flex-basis: 58.333%; - max-width: 58.333%; } - - .col-md-8 { - -ms-flex-preferred-size: 66.667%; - flex-basis: 66.667%; - max-width: 66.667%; } - - .col-md-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; } - - .col-md-10 { - -ms-flex-preferred-size: 83.333%; - flex-basis: 83.333%; - max-width: 83.333%; } - - .col-md-11 { - -ms-flex-preferred-size: 91.667%; - flex-basis: 91.667%; - max-width: 91.667%; } - - .col-md-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; } - - .col-md-offset-1 { - margin-left: 8.333%; } - - .col-md-offset-2 { - margin-left: 16.667%; } - - .col-md-offset-3 { - margin-left: 25%; } - - .col-md-offset-4 { - margin-left: 33.333%; } - - .col-md-offset-5 { - margin-left: 41.667%; } - - .col-md-offset-6 { - margin-left: 50%; } - - .col-md-offset-7 { - margin-left: 58.333%; } - - .col-md-offset-8 { - margin-left: 66.667%; } - - .col-md-offset-9 { - margin-left: 75%; } - - .col-md-offset-10 { - margin-left: 83.333%; } - - .col-md-offset-11 { - margin-left: 91.667%; } - - .start-md { - -ms-flex-pack: start; - -webkit-box-pack: start; - justify-content: flex-start; - text-align: start; } - - .center-md { - -ms-flex-pack: center; - -webkit-box-pack: center; - justify-content: center; - text-align: center; } - - .end-md { - -ms-flex-pack: end; - -webkit-box-pack: end; - justify-content: flex-end; - text-align: end; } - - .top-md { - -ms-flex-align: start; - -webkit-box-align: start; - align-items: flex-start; } - - .middle-md { - -ms-flex-align: center; - -webkit-box-align: center; - align-items: center; } - - .bottom-md { - -ms-flex-align: end; - -webkit-box-align: end; - align-items: flex-end; } - - .around-md { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .between-md { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; } - - .first-md { - -ms-flex-order: -1; - -webkit-box-ordinal-group: 0; - order: -1; } - - .last-md { - -ms-flex-order: 1; - -webkit-box-ordinal-group: 2; - order: 1; } } -@media only screen and (min-width: 75em) { - .container { - width: 71rem; } - - .col-lg, - .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 { - box-sizing: border-box; - -ms-flex: 0 0 auto; - -webkit-box-flex: 0; - flex: 0 0 auto; - padding-right: 0.3rem; - padding-left: 0.3rem; } - - .col-lg { - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - -webkit-box-flex: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100%; } - - .col-lg-1 { - -ms-flex-preferred-size: 8.333%; - flex-basis: 8.333%; - max-width: 8.333%; } - - .col-lg-2 { - -ms-flex-preferred-size: 16.667%; - flex-basis: 16.667%; - max-width: 16.667%; } - - .col-lg-3 { - -ms-flex-preferred-size: 25%; - flex-basis: 25%; - max-width: 25%; } - - .col-lg-4 { - -ms-flex-preferred-size: 33.333%; - flex-basis: 33.333%; - max-width: 33.333%; } - - .col-lg-5 { - -ms-flex-preferred-size: 41.667%; - flex-basis: 41.667%; - max-width: 41.667%; } - - .col-lg-6 { - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - max-width: 50%; } - - .col-lg-7 { - -ms-flex-preferred-size: 58.333%; - flex-basis: 58.333%; - max-width: 58.333%; } - - .col-lg-8 { - -ms-flex-preferred-size: 66.667%; - flex-basis: 66.667%; - max-width: 66.667%; } - - .col-lg-9 { - -ms-flex-preferred-size: 75%; - flex-basis: 75%; - max-width: 75%; } - - .col-lg-10 { - -ms-flex-preferred-size: 83.333%; - flex-basis: 83.333%; - max-width: 83.333%; } - - .col-lg-11 { - -ms-flex-preferred-size: 91.667%; - flex-basis: 91.667%; - max-width: 91.667%; } - - .col-lg-12 { - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - max-width: 100%; } - - .col-lg-offset-1 { - margin-left: 8.333%; } - - .col-lg-offset-2 { - margin-left: 16.667%; } - - .col-lg-offset-3 { - margin-left: 25%; } - - .col-lg-offset-4 { - margin-left: 33.333%; } - - .col-lg-offset-5 { - margin-left: 41.667%; } - - .col-lg-offset-6 { - margin-left: 50%; } - - .col-lg-offset-7 { - margin-left: 58.333%; } - - .col-lg-offset-8 { - margin-left: 66.667%; } - - .col-lg-offset-9 { - margin-left: 75%; } - - .col-lg-offset-10 { - margin-left: 83.333%; } - - .col-lg-offset-11 { - margin-left: 91.667%; } - - .start-lg { - -ms-flex-pack: start; - -webkit-box-pack: start; - justify-content: flex-start; - text-align: start; } - - .center-lg { - -ms-flex-pack: center; - -webkit-box-pack: center; - justify-content: center; - text-align: center; } - - .end-lg { - -ms-flex-pack: end; - -webkit-box-pack: end; - justify-content: flex-end; - text-align: end; } - - .top-lg { - -ms-flex-align: start; - -webkit-box-align: start; - align-items: flex-start; } - - .middle-lg { - -ms-flex-align: center; - -webkit-box-align: center; - align-items: center; } - - .bottom-lg { - -ms-flex-align: end; - -webkit-box-align: end; - align-items: flex-end; } - - .around-lg { - -ms-flex-pack: distribute; - justify-content: space-around; } - - .between-lg { - -ms-flex-pack: justify; - -webkit-box-pack: justify; - justify-content: space-between; } - - .first-lg { - -ms-flex-order: -1; - -webkit-box-ordinal-group: 0; - order: -1; } - - .last-lg { - -ms-flex-order: 1; - -webkit-box-ordinal-group: 2; - order: 1; } } -.ok { - color: #5cff56; } - -.warning { - color: #ff4b41; } - -.favorite { - color: #d16059; } - -.green { - background: #61BD6D; } - -.red { - background: #D14841; } - -.blue { - background: #2C82C9; } - -.orange { - background: #FBA026; } - -.lightblue { - background: #54ACD2; } - -.yellow { - background: #FAC51C; } - -.purple { - background: #553982; } - -.pink { - background: #ffa6e3; } - -.grey { - background: #dcdcdc; } - -.darkred { - background: #B8312F; } - -.darkgreen { - background: #41A85F; } - -.darkblue { - background: #2969B0; } - -*[draggable] { - cursor: move; } - -p { - margin: 0 0 10px 0; - line-height: 1.4em; } - p span { - margin: 0; - padding: 0; } - p + p { - margin-top: 5px; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.tooltip { - position: relative; - cursor: pointer; - display: inline-block; } - .tooltip > i { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; - text-align: center; - font-size: 0.7em; - color: #fff; - line-height: 1.0em; - background: #000000; - position: absolute; - padding: 5px; - bottom: 100%; - left: -50%; - margin-bottom: 10px; - visibility: hidden; - opacity: 0; - white-space: pre; } - .tooltip > i:before, .tooltip > i:after { - content: ""; - position: absolute; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - top: 100%; - left: 50%; - margin-left: -10px; } - .tooltip > i:after { - border-top: 10px solid #000000; - margin-top: 0; - z-index: 1; } - .tooltip:hover > i { - visibility: visible; - opacity: 1; } - -.spinner-1 { - width: 40px; - height: 40px; - background-color: #333; - margin: 50px auto; - -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; - animation: sk-rotateplane 1.2s infinite ease-in-out; } - -@-webkit-keyframes sk-rotateplane { - 0% { - -webkit-transform: perspective(120px); } - 50% { - -webkit-transform: perspective(120px) rotateY(180deg); } - 100% { - -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } -@keyframes sk-rotateplane { - 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } -.spinner-2 { - text-align: center; } - -.spinner-2 > div { - width: 18px; - height: 18px; - background-color: #333; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; } - -.spinner-2 .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; } - -.spinner-2 .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } - -@-webkit-keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); } - 40% { - -webkit-transform: scale(1); } } -@keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } -.spinner-3 { - margin: 50px auto; - width: 40px; - height: 40px; - position: relative; } - -.spinner-3 .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } - -.spinner-3 .sk-circle:before { - content: ''; - display: block; - margin: 0 auto; - width: 15%; - height: 15%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; - animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } - -.spinner-3 .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } - -.spinner-3 .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } - -.spinner-3 .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } - -.spinner-3 .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } - -.spinner-3 .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } - -.spinner-3 .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } - -.spinner-3 .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } - -.spinner-3 .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } - -.spinner-3 .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } - -.spinner-3 .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } - -.spinner-3 .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } - -.spinner-3 .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } - -.spinner-3 .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - -.spinner-3 .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - -.spinner-3 .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - -.spinner-3 .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } - -.spinner-3 .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } - -.spinner-3 .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } - -.spinner-3 .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } - -.spinner-3 .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } - -.spinner-3 .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } - -.spinner-3 .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } -@keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - 40% { - opacity: 1; } } -.spinner-4 { - width: 40px; - height: 40px; - margin: 50px auto; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; - animation: sk-scaleout 1.0s infinite ease-in-out; } - -@-webkit-keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); } - 100% { - -webkit-transform: scale(1); - opacity: 0; } } -@keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -canvas { - background: #fff; - border: 1px solid #000; - user-select: none; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -form li { - margin: 5px 0 5px 0; } -form td { - white-space: nowrap; - padding-bottom: 5px; } - form td textarea + i { - vertical-align: top; } -form label { - font-size: 0.9em; - color: #878787; - text-shadow: -1px -1px 1px #ffffff; } -form i + i { - margin-left: 3px; } -form .inputPrefix { - border-left: 1px solid #b7b7b7; - border-top: 1px solid #b7b7b7; - border-bottom: 1px solid #b7b7b7; - line-height: 2em; - height: 100%; - background: #bebebe; } -form .layout td + td { - padding-left: 5px; } -form .list { - font-size: 0.9em; } - form .list td { - white-space: nowrap; - padding: 3px 5px 3px 5px; } -form .ipt-wrap { - display: table; - box-sizing: border-box; } - form .ipt-wrap .ipt-first { - width: 100%; - display: table-cell; } - form .ipt-wrap .ipt-second { - padding-left: 5px; - display: table-cell; } - -.infoIcon { - width: .9rem; - text-align: center; - vertical-align: middle; - position: relative; - cursor: pointer; } - .infoIcon span { - font-size: .55rem; - display: block; - position: absolute; - right: -.55rem; - top: -.45rem; - width: .9rem; - height: .9rem; - line-height: .9rem; - border-radius: 50%; - text-align: center; - color: #fff; - background: #d16059; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -img.frame-1 { - padding: 5px; - background: #f5f5ff; - border: 1px solid #b7b7b7; - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; } -img.frame-2 { - border: 1px solid #b7b7b7; - background: #f5f5ff; } -img.frame-3 { - padding: 5px; - background: #ffffff; - border: 1px solid #b7b7b7; - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; } - -@keyframes slidy { - 0% { - left: 0%; } - 20% { - left: 0%; } - 25% { - left: -100%; } - 45% { - left: -100%; } - 50% { - left: -200%; } - 70% { - left: -200%; } - 75% { - left: -300%; } - 95% { - left: -300%; } - 100% { - left: -400%; } } -div.slider-1 { - overflow: hidden; } - div.slider-1 figure { - position: relative; - width: 500%; - margin: 0; - left: 0; - text-align: left; - font-size: 0; - animation: 30s slidy infinite; } - div.slider-1 figure img { - width: 20%; - float: left; } - -.slider-2 { - width: 100%; - position: relative; - padding-top: auto; - text-align: center; } - .slider-2 > img { - width: 100%; - position: absolute; - left: 0; - top: 0; - transition: all 0.5s; - box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } - .slider-2 input { - display: none; } - .slider-2 input:checked + label { - border-color: #666; - opacity: 1; } - .slider-2 input:checked + label + img { - opacity: 1; - transform: scale(1); } - .slider-2 input ~ img { - opacity: 0; - transform: scale(1.1); } - .slider-2 label { - display: inline-block; - margin-top: calc(50% + 15px); - margin-left: 15px; - border: 3px solid #999; - cursor: pointer; - opacity: 0.6; } - .slider-2 label img { - display: block; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -input, select, textarea, .textarea { - border: 1px solid #b7b7b7; } - -progress { - height: 20px; - width: 100%; - min-width: 150px; } - -.textarea, -.tag-input, -textarea, -select, -input[type="password"], -input[type="text"], -input[type="datetime"], -input[type="email"], -input[type="date"], -input[type="number"], -input[type="datetime-local"] { - box-sizing: border-box; - color: #454545; - background: #fff; - width: 100%; - height: 2rem; - min-width: 70px; - max-width: 100%; - padding: 7px; - font-size: 0.9rem; - border: solid 1px #dcdcdc; - transition: background 0.3s, border 0.3s; - box-shadow: inset 1px 1px 4px -2px #c5c5c5; } - .textarea:focus, - .tag-input:focus, - textarea:focus, - select:focus, - input[type="password"]:focus, - input[type="text"]:focus, - input[type="datetime"]:focus, - input[type="email"]:focus, - input[type="date"]:focus, - input[type="number"]:focus, - input[type="datetime-local"]:focus { - border-color: #0c69d6; } - -select { - cursor: pointer; - padding: 0 7px 0 7px; - /* overwrites input padding: 7px. don't know why i have to do this! */ } - -option { - line-height: 1rem; } - -input[type="file"] { - border: solid 1px #dcdcdc; - width: 100%; - max-width: 100%; - color: #454545; - padding: 10px; - box-sizing: border-box; } - -input[placeholder], textarea { - font-family: 'FontAwesome', serif; } - -input:invalid { - transition: all 0.5s; - border: 1px solid #b85450; } - -.textarea { - overflow: auto; - resize: both; } - -textarea, .textarea { - min-height: 100px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - -span.check input[type="checkbox"], span.radio input[type="radio"] { - position: relative; - vertical-align: middle; - bottom: 1px; - margin-right: 5px; - cursor: pointer; } - -input[type="range"] { - border: none; - width: 100%; - min-width: 150px; - cursor: pointer; } - -.input { - width: 100%; - min-width: 120px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; } - .input button { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - background: #fff; - height: 2rem; - font-size: 1rem; - min-width: 40px; - border-left: solid 1px #dcdcdc; - border-top: solid 1px #dcdcdc; - border-bottom: solid 1px #dcdcdc; - border-right: none; - padding: 0; - position: relative; - vertical-align: middle; - flex-grow: 0; - flex-shrink: 0; } - .input button:hover { - background: #fff; } - .input i { - position: relative; - vertical-align: middle; } - .input input { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - font-size: 1em; - position: relative; - vertical-align: middle; - flex-grow: 1; - flex-shrink: 1; } - -.dropdown { - position: relative; - display: inline-block; } - .dropdown:hover .content { - display: block; } - .dropdown .content { - display: none; - position: absolute; - z-index: 2; - background: #fff; } - .dropdown .content input { - display: none; } - .dropdown .content label { - display: block; - margin: 5px; - padding: 5px; } - -select.plain { - width: auto; - margin: 0; - padding: 0; - border: none; - outline: none; - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - box-shadow: none; } - -.tag-input input { - border: none; - padding: 0; - margin: 0; } -.tag-input .tag { - padding: 3px; - font-size: 0.8rem; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.ac-container { - margin: 10px auto 30px auto; - text-align: left; } - .ac-container > input { - display: none; } - .ac-container > input:checked + label { - background: #ffffff; - background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); - background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); - color: #000; } - .ac-container > input:checked + label + section { - display: inherit; } - .ac-container > input + label + section { - display: none; } - .ac-container label { - display: block; - padding: 5px 20px; - position: relative; - z-index: 20; - margin-top: -1px; - cursor: pointer; - color: #777; - font-size: 1em; - border: 1px solid #b7b7b7; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; - background: #f5f5ff; - background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff)); - background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); - background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); - background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); - background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100); } - .ac-container label:hover { - background: #ffffff; - background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); - background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } - .ac-container > section { - background: #f5f5ff; - overflow: hidden; - height: auto; - position: relative; - z-index: 10; - border-left: 1px solid #b7b7b7; - border-right: 1px solid #b7b7b7; - padding: 10px; } - -div.alert { - padding: 10px; - font-weight: bold; } - div.alert i { - margin-right: 5px; } - -.alertbox.ok, .alert.ok { - background: #aaffad; - border: 2px solid #81e27d; - color: #459442; } - -.alertbox.warning, .alert.warning { - background: #f8ffa8; - border: 2px solid #d6d949; - color: #94972f; } - -.alertbox.error, .alert.error { - background: #ff7d79; - border: 2px solid #ee5649; - color: #a5302a; } - -.alertbox.info, .alert.info { - background: #b6d2ff; - border: 2px solid #85b0ee; - color: #4865a5; } - -.slider { - overflow-x: auto; - white-space: nowrap; } - .slider ul { - display: inline; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -blockquote { - border: 1px solid #dddddd; - background: #ffffff; - padding: 10px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.crumbs-1 { - list-style: none; - overflow: hidden; - font-size: 12px; } - .crumbs-1 li { - background: #f5f5ff; - border: 1px solid #b7b7b7; - padding: 10px 10px 10px 20px; - position: relative; - display: block; - float: left; - text-shadow: -1px -1px 1px #ffffff; - cursor: pointer; - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; } - .crumbs-1 li:first-child { - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - background-clip: padding-box; } - .crumbs-1 li:not(.last):after, .crumbs-1 li:before { - content: " "; - display: block; - width: 0; - height: 0; - border-top: 18px solid transparent; - border-bottom: 17px solid transparent; - border-left: 14px solid #f5f5ff; - position: absolute; - top: 50%; - margin-top: -18px; - left: 100%; } - .crumbs-1 li:not(.last):after { - z-index: 2; } - .crumbs-1 li:before { - border-left-color: #b7b7b7; - margin-left: 1px; - z-index: 1; } - .crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after { - border-left: 14px solid #ffffff; } - .crumbs-1 .last { - padding-right: 20px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - background-clip: padding-box; } - .crumbs-1 .last:before { - border: none; } - .crumbs-1 .active { - cursor: default; } - .crumbs-1 .active, .crumbs-1 li:hover { - background: #ffffff; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.btn { - cursor: pointer; } - -button, input[type="submit"], input[type="button"], a.button { - border: 1px solid #b7b7b7; - cursor: pointer; - text-shadow: 1px 1px 1px #ffffff; - min-width: 70px; - height: 2rem; - font-size: 0.9rem; - background: #d9d9d9; - background: -moz-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(100, #d1d1d1)); - background: -webkit-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); - background: -o-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); - background: -ms-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); - background: linear-gradient(to bottom, #f1f1f1 0, #d1d1d1 100); - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; } - button:hover, button :active, input[type="submit"]:hover, input[type="submit"] :active, input[type="button"]:hover, input[type="button"] :active, a.button:hover, a.button :active { - text-shadow: -1px -1px 1px #ffffff; - background: #d9d9d9; - background: -moz-linear-gradient(top, #d6d6d6 0, #ededed 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(100, #ededed)); - background: -webkit-linear-gradient(top, #d6d6d6 0, #ededed 100); - background: -o-linear-gradient(top, #d6d6d6 0, #ededed 100); - background: -ms-linear-gradient(top, #d6d6d6 0, #ededed 100); - background: linear-gradient(to bottom, #d6d6d6 0, #ededed 100); } - -button.red { - color: #ffffff; - text-shadow: 1px 1px 1px #696969; - background: #d9645b; - background: -moz-linear-gradient(top, #f17068 0, #d16059 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f17068), color-stop(100, #d16059)); - background: -webkit-linear-gradient(top, #f17068 0, #d16059 100); - background: -o-linear-gradient(top, #f17068 0, #d16059 100); - background: -ms-linear-gradient(top, #f17068 0, #d16059 100); - background: linear-gradient(to bottom, #f17068 0, #d16059 100); - -moz-box-shadow: inset 1px 1px 0px 0px #ff8d7c; - -webkit-box-shadow: inset 1px 1px 0px 0px #ff8d7c; - box-shadow: inset 1px 1px 0px 0px #ff8d7c; } - button.red:hover, button.red :active { - text-shadow: -1px -1px 1px #696969; - background: #d9645b; - background: -moz-linear-gradient(top, #d16059 0, #f17068 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d16059), color-stop(100, #f17068)); - background: -webkit-linear-gradient(top, #d16059 0, #f17068 100); - background: -o-linear-gradient(top, #d16059 0, #f17068 100); - background: -ms-linear-gradient(top, #d16059 0, #f17068 100); - background: linear-gradient(to bottom, #d16059 0, #f17068 100); } - -button.green { - color: #ffffff; - text-shadow: 1px 1px 1px #696969; - background: #90d99d; - background: -moz-linear-gradient(top, #9df1ad 0, #77d17c 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9df1ad), color-stop(100, #77d17c)); - background: -webkit-linear-gradient(top, #9df1ad 0, #77d17c 100); - background: -o-linear-gradient(top, #9df1ad 0, #77d17c 100); - background: -ms-linear-gradient(top, #9df1ad 0, #77d17c 100); - background: linear-gradient(to bottom, #9df1ad 0, #77d17c 100); - -moz-box-shadow: inset 1px 1px 0px 0px #c8ffb6; - -webkit-box-shadow: inset 1px 1px 0px 0px #c8ffb6; - box-shadow: inset 1px 1px 0px 0px #c8ffb6; } - button.green:hover, button.green :active { - text-shadow: -1px -1px 1px #696969; - background: #90d99d; - background: -moz-linear-gradient(top, #77d17c 0, #9df1ad 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77d17c), color-stop(100, #9df1ad)); - background: -webkit-linear-gradient(top, #77d17c 0, #9df1ad 100); - background: -o-linear-gradient(top, #77d17c 0, #9df1ad 100); - background: -ms-linear-gradient(top, #77d17c 0, #9df1ad 100); - background: linear-gradient(to bottom, #77d17c 0, #9df1ad 100); } - -button.blue { - color: #ffffff; - text-shadow: 1px 1px 1px #696969; - background: #97afd9; - background: -moz-linear-gradient(top, #beddf1 0, #7ba9d1 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #beddf1), color-stop(100, #7ba9d1)); - background: -webkit-linear-gradient(top, #beddf1 0, #7ba9d1 100); - background: -o-linear-gradient(top, #beddf1 0, #7ba9d1 100); - background: -ms-linear-gradient(top, #beddf1 0, #7ba9d1 100); - background: linear-gradient(to bottom, #beddf1 0, #7ba9d1 100); - -moz-box-shadow: inset 1px 1px 0px 0px #cbf3ff; - -webkit-box-shadow: inset 1px 1px 0px 0px #cbf3ff; - box-shadow: inset 1px 1px 0px 0px #cbf3ff; } - button.blue:hover, button.blue :active { - text-shadow: -1px -1px 1px #696969; - background: #97afd9; - background: -moz-linear-gradient(top, #7ba9d1 0, #beddf1 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ba9d1), color-stop(100, #beddf1)); - background: -webkit-linear-gradient(top, #7ba9d1 0, #beddf1 100); - background: -o-linear-gradient(top, #7ba9d1 0, #beddf1 100); - background: -ms-linear-gradient(top, #7ba9d1 0, #beddf1 100); - background: linear-gradient(to bottom, #7ba9d1 0, #beddf1 100); } - -ul.btns { - list-style: none; - overflow: hidden; - font-size: 12px; } - ul.btns li { - background: #f5f5ff; - border-left: 1px solid #b7b7b7; - border-top: 1px solid #b7b7b7; - border-bottom: 1px solid #b7b7b7; - float: left; - text-shadow: -1px -1px 1px #ffffff; - cursor: pointer; - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; } - ul.btns li:last-child { - border-right: 1px solid #b7b7b7; } - ul.btns li:before { - border-left-color: #b7b7b7; - margin-left: 1px; } - ul.btns a { - display: block; - padding: 10px; } - ul.btns .active { - cursor: default; } - ul.btns .active, ul.btns li:hover { - background: #ffffff; } - -button.simple { - background: #f5f5ff; - border: 1px solid #b7b7b7; - text-shadow: -1px -1px 1px #ffffff; - padding: 5px; - min-width: 40px; } - button.simple:hover { - background: #ffffff; } - -article a { - color: #8ea4ff; - border-bottom: 1px dotted #8ea4ff; } - article a:hover { - border-bottom: none; } - -.unseen { - font-weight: bold; } - -[data-href] { - cursor: pointer; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -ul.default li { - margin: 5px 0 5px 0; } - ul.default li:first-child { - margin: 0 0 5px 0; } - ul.default li:last-child { - margin: 5px 0 0 0; } - -ul.boxed { - background: #fff; - padding: 5px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; - border: 1px solid #b7b7b7; } - ul.boxed li { - margin: 5px 0 5px 0; } - ul.boxed li:first-child { - margin-top: 0; } - ul.boxed li:last-child { - margin-bottom: 0; } - -ul.h-list li { - display: inline-block; - margin: 5px 10px 5px 10px; } - -.bullet-list { - margin: 0; - padding: 0; - border-spacing: 0; - border-collapse: collapse; } - .bullet-list td:first-child { - padding-right: 20px; } - .bullet-list span { - margin-right: 5px; } - -.bullet { - width: 7px; - height: 7px; - border-radius: 30px; - background: #ccc; - display: inline-block; } - .bullet.active { - background: #000; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -#nav-side { - user-select: none; - width: 175px; - position: fixed; - top: 79px; - right: 0; - bottom: 0; - left: 0; - z-index: 0; - overflow-y: auto; - font-size: 0.8em; - background: #2F2F2F; } - #nav-side input { - display: none; } - #nav-side input:checked + ul .max { - display: inherit; } - #nav-side input:checked + ul .min { - display: none; } - #nav-side input:checked + ul > li:nth-child(n+2) { - display: inherit; } - #nav-side input + ul .max { - display: none; } - #nav-side input + ul .min { - display: inherit; } - #nav-side input + ul > li:nth-child(n+2) { - display: none; } - #nav-side > li li { - border-top: 1px solid #3f3f3f; - border-bottom: 1px solid #252525; - color: #fff; } - #nav-side > li li:not(:first-child) { - background: #353535; } - #nav-side > li li:first-child { - border-bottom: 1px solid #1a1a1a; } - #nav-side > li li:first-child { - padding: 7px 0 7px 7px; } - #nav-side > li li a { - display: block; - padding: 7px 0 7px 7px; } - #nav-side > li li a:hover { - background: #3F3F3F; } - #nav-side li:last-child li:last-child { - border-bottom: none; } - #nav-side .max, #nav-side .min { - float: right; } - #nav-side i { - margin-right: 5px; } - #nav-side::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - background-color: #F5F5F5; } - #nav-side::-webkit-scrollbar { - width: 12px; - background-color: #F5F5F5; } - #nav-side::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - background-color: #555; } - -.nav-trigger { - position: absolute; - clip: rect(0, 0, 0, 0); } - -label[for="nav-trigger"] { - font-size: 2.0em; - height: 30px; - width: 30px; - cursor: pointer; } - -.nav-trigger:checked ~ main { - width: calc(100% - 175px); - left: 175px; } - -.nav-top { - user-select: none; - margin-top: 5px; - display: block; - background: #ffffff; - border: 1px solid #b7b7b7; - -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; - box-shadow: inset 0px 1px 0px 0px #ffffff; } - .nav-top > li { - -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; - box-shadow: inset 0px 1px 0px 0px #ffffff; - text-shadow: 1px 1px 1px #ffffff; } - .nav-top > li:first-child { - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; } - -.nav-top li { - background: #fff; - display: inline-block; - margin-right: -4px; - position: relative; - cursor: pointer; } - -.nav-top > li > a { - display: inline-block; - padding: 10px 10px; } - -.nav-top li:hover { - background: #555; - color: #fff; - text-shadow: 0 -1px 0 #000; } - -.nav-top li > ul { - padding: 0; - position: absolute; - top: 36px; - left: 0; - width: 150px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - display: none; - opacity: 0; - visibility: hidden; } - -.nav-top li > ul li { - background: #555; - display: block; - color: #fff; - text-shadow: 0 -1px 0 #000; } - -.nav-top li > ul li:hover { - background: #666; } - -.nav-top li:hover > ul { - display: block; - opacity: 1; - visibility: visible; } - -@media screen and (max-width: 600px) { - .nav-trigger:checked ~ main { - width: 100%; - left: 0; } - - .nav-trigger:not(:checked) ~ main { - width: 0; - padding-right: 0; } - - #nav-side { - width: 100%; } } -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -main { - height: 100%; - width: 100%; - position: relative; - top: 0; - bottom: 100%; - left: 0; - z-index: 1; - background: #e7ebf3; - transition: all 0.2s; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.pagination li { - display: inline; } -.pagination a { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; - background: #f5f5ff; - padding: 5px 10px 5px 10px; } -.pagination .active, .pagination a:hover, .pagination a:active { - color: #ffffff; - background: #353535; - -moz-box-shadow: inset 1px 1px 0px 0px #e8e8e8; - -webkit-box-shadow: inset 1px 1px 0px 0px #e8e8e8; - box-shadow: inset 1px 1px 0px 0px #e8e8e8; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.meter { - height: 20px; - /* Can be anything */ - position: relative; - background: none !important; } - .meter > span { - display: block; - height: 100%; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - border-radius: 3px; - background-clip: padding-box; - background-color: #2bc253; - background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054)); - position: relative; - overflow: hidden; } - -.meter > span:after, .animate > span > span { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - z-index: 1; - -webkit-background-size: 50px 50px; - -moz-background-size: 50px 50px; - -webkit-animation: move 4s linear infinite; - overflow: hidden; } - -.animate > span:after { - display: none; } - -@-webkit-keyframes move { - 0% { - background-position: 0 0; } - 100% { - background-position: 50px 50px; } } -.orange > span { - background-color: #f1a165; - background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); - background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } - -.blue > span { - background-color: #96c2f1; - background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); - background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } - -.red > span { - background-color: #f0a3a3; - background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323)); - background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } - -.nostripes > span > span, .nostripes > span:after { - -webkit-animation: none; - background-image: none; } - -.timeline { - list-style: none; - margin: 0 0 30px 120px; - padding-left: 30px; - border-left: 3px solid #eaeaea; } - .timeline li { - margin: 0; - position: relative; } - .timeline p { - margin: 0 0 15px; } - -.timeline-date { - margin-top: -18px; - top: 50%; - left: -150px; - font-size: 0.95em; - line-height: 20px; - position: absolute; - padding: 5px 10px 5px 10px; - border: 1px solid #ccc; } - -.timeline-circle { - margin-top: -10px; - top: 50%; - left: -40px; - width: 10px; - height: 10px; - background: tomato; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-circle-start { - margin-top: 0; - top: 0; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-circle-end { - margin-top: 0; - top: 100%; - left: -45px; - width: 20px; - height: 20px; - background: #fff; - border: 3px solid #eaeaea; - border-radius: 50%; - display: block; - position: absolute; } - -.timeline-content { - padding: 50px 20px 0; - border-radius: 0.5em; - position: relative; } - -.timeline-content p { - text-align: justify; } - -.timeline label { - font-size: 1.3em; - position: absolute; - z-index: 100; - top: 20px; } - -.timeline-radio { - display: none; } - -.timeline-break { - display: none; } - -.progress-radial { - float: left; - margin-right: 20px; - position: relative; - width: 70px; - height: 70px; - border-radius: 50%; - background-color: tomato; } - .progress-radial .overlay { - position: absolute; - width: 60px; - height: 60px; - background-color: #fff; - border-radius: 50%; - margin-left: 5px; - margin-top: 5px; - text-align: center; - line-height: 60px; - font-size: 9px; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.box { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - margin-top: 0.3rem; - overflow-x: auto; } - .box .inner { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; - padding: 10px; } - -.box-container { - display: inline-block; } - -section.box { - -moz-box-shadow: 0px 1px 0px 0px #f1f1f1; - -webkit-box-shadow: 0px 1px 0px 0px #f1f1f1; - box-shadow: 0px 1px 0px 0px #f1f1f1; - border: 1px solid #b7b7b7; - background: #fff; } - section.box.orange { - border-top: 3px solid #FBA026; } - section.box.red { - border-top: 3px solid #B8312F; } - section.box.green { - border-top: 3px solid #41A85F; } - section.box.blue { - border-top: 3px solid #2C82C9; } - section.box.purple { - border-top: 3px solid #553982; } - section.box.darkblue { - border-top: 3px solid #2969B0; } - -section header > h1 { - margin: 10px 10px 0 10px; - padding-bottom: 5px; - font-size: 1.1em; - text-shadow: 1px 1px 1px #ffffff; - border-bottom: 1px solid #e1e1e1; } -section > h2 { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - font-size: 1.2em; - margin-bottom: 5px; - text-shadow: 1px 1px 1px #ffffff; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.tabular { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - .tabular .tab-links { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0.3rem 0 0 0.3rem; } - .tabular .tab-links label { - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; - border-top: 1px solid #b7b7b7; - border-left: 1px solid #b7b7b7; - border-right: 1px solid #b7b7b7; - background: #f5f5ff; - background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff)); - background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100); - padding: 5px 10px 5px 10px; - text-shadow: 1px 1px 1px #ffffff; - font-size: 0.9em; - cursor: pointer; } - .tabular .tab-links .active a, .tabular .tab-links label:hover { - background: #ffffff; - background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); - background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } - .tabular .tab-links .active a { - cursor: default; } - .tabular .tab-links li { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - margin: 0 5px 0 0; } - .tabular .tab-content { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - background: #ffffff; - border: 1px solid #b7b7b7; - padding: 10px; } - .tabular .tab-content > input { - display: none; } - .tabular .tab-content input + div { - display: none; } - .tabular .tab-content input:checked + div { - display: inherit; } - -.tabular-2 .tab-links { - padding: 0.3rem 0 0 0.3rem; } -.tabular-2 .tab-links label { - -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; - box-shadow: inset 1px 1px 0px 0px #ffffff; - border: 1px solid #b7b7b7; - background: #f5f5ff; - background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff)); - background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100); - background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100); - padding: 5px 10px 5px 10px; - text-shadow: 1px 1px 1px #ffffff; - font-size: 0.9em; - cursor: pointer; } -.tabular-2 .tab-links .active a, .tabular-2 .tab-links label:hover { - background: #ffffff; - background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); - background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); - background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } -.tabular-2 .tab-links .active a { - cursor: default; } -.tabular-2 .tab-links li { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: inline-block; - margin: 0 5px 15px 0; } -.tabular-2 .tab-content > input { - display: none; } -.tabular-2 .tab-content input + div { - display: none; } -.tabular-2 .tab-content input:checked + div { - display: inherit; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.table { - background: none; } - .table caption { - color: #fff; } - .table thead { - color: #fff; } - .table.red caption, .table.red thead { - background: #B8312F; } - .table.orange caption, .table.orange thead { - background: #FBA026; } - .table.green caption, .table.green thead { - background: #41A85F; } - .table.blue caption, .table.blue thead { - background: #2C82C9; } - .table.white caption, .table.white thead { - background: #fff; } - -table.table { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - font-size: 0.9em; - max-width: 100%; - overflow: hidden; } - table.table caption { - background: #fff; - border-right: 1px solid #b7b7b7; - border-left: 1px solid #b7b7b7; - border-top: 1px solid #b7b7b7; - padding: 5px; } - table.table td { - padding: 5px 10px 5px 10px; - white-space: nowrap; } - table.table tbody td:first-child { - border-left: 1px solid #b7b7b7; } - table.table tbody td:last-child { - border-right: 1px solid #b7b7b7; } - table.table tbody td { - border-top: 1px solid #b7b7b7; - -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; - -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; - box-shadow: inset 0px 1px 0px 0px #ffffff; } - table.table tbody tr { - height: 2rem; } - table.table tbody tr:nth-of-type(2n) { - background: #f8f8f8; } - table.table tbody tr:nth-of-type(2n+1) { - background: #fff; } - table.table tbody tr:hover { - background: #f0f0f0; } - table.table tbody tr:last-child td { - border-bottom: 1px solid #b7b7b7; } - table.table thead { - background: #fff; } - table.table thead td:first-child { - border-left: 1px solid #b7b7b7; } - table.table thead td:last-child { - border-right: 1px solid #b7b7b7; } - table.table .empty { - text-align: center; - color: #d8d8d8; } - table.table tfoot { - border: none; } - table.table tfoot label { - float: left; } - table.table tfoot select { - width: auto; - float: right; - margin: 0; - min-width: 0px; } - table.table tfoot td { - text-align: center; - padding-top: 10px; } - -table.list th { - text-align: left; } -table.list td { - padding: 2px 5px 2px 5px; } - -@media screen and (max-width: 600px) { - table.table { - display: table; - table-layout: fixed; - width: 100%; - border: 0; } - table.table thead { - display: none; } - table.table tbody tr { - height: auto; - display: block; - margin-bottom: .625em; } - table.table tbody tr td:last-child { - border-bottom: 1px solid #b7b7b7; } - table.table tbody tr:last-child td { - border-bottom: none; } - table.table tbody tr:last-child td:last-child { - border-bottom: 1px solid #b7b7b7; } - table.table tbody td { - border-left: 1px solid #b7b7b7; - border-right: 1px solid #b7b7b7; - display: block; - font-size: .8rem; - text-align: right; - position: relative; - height: 2rem; - line-height: 2rem; - text-overflow: ellipsis; - overflow: hidden; - max-width: 100%; } - table.table tbody td:before { - content: attr(data-label); - float: left; - margin-right: 10px; - font-weight: bold; } - table.table tfoot { - display: none; } } -.nobreak { - white-space: nowrap; } - -/* Global */ -/* Content Container */ -/* Content box */ -/* Navigation */ -/* Colors */ -.tag { - cursor: pointer; - border: 1px solid #b7b7b7; - padding: 5px 10px 5px 10px; - font-size: 0.7rem; - color: #fff; - display: inline-block; - line-height: 1rem; } +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, nav, section, iframe, label { + margin: 0; + padding: 0; } + +a, img, button { + outline: none; } + +a { + color: inherit; + text-decoration: none; } + +h1, h2, h3, h4, h5, h6 { + font-weight: normal; } + +ul { + list-style: none; } + +input, select, textarea, .textarea { + box-sizing: border-box; + appearance: none; + box-shadow: none; } + input:focus, select:focus, textarea:focus, .textarea:focus { + outline: none; } + +input[type=checkbox] { + margin-right: 5px; } + +button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { + border: 0; } + +table { + border-collapse: separate; + border-spacing: 0; } + +i { + font-style: normal; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +body { + background: #e7ebf3; + font-family: Open Sans, sans-serif; + font-size: 0.9em; } + +.clear { + clear: both; } + +pre { + background: #fff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; + border: 1px solid #b7b7b7; + padding: 5px; + overflow-x: scroll; + counter-reset: line; } + pre span { + display: block; } + pre span:before { + counter-increment: line; + content: counter(line); + display: inline-block; + border-right: 1px solid #ddd; + padding: 0 .5em; + margin-right: .5em; + color: #888; + width: 30px; } + +article { + background: #fff; + padding: 5px; + margin: 0; } + article p { + line-height: 1.5em; } + +.ok { + color: #5cff56; } + +.warning { + color: #ff4b41; } + +.favorite { + color: #d16059; } + +.green { + background: #61BD6D; } + +.red { + background: #D14841; } + +.blue { + background: #2C82C9; } + +.orange { + background: #FBA026; } + +.lightblue { + background: #54ACD2; } + +.yellow { + background: #FAC51C; } + +.purple { + background: #553982; } + +.pink { + background: #ffa6e3; } + +.grey { + background: #dcdcdc; } + +.darkred { + background: #B8312F; } + +.darkgreen { + background: #41A85F; } + +.darkblue { + background: #2969B0; } + +.wf-100 { + width: 100%; } + +.wf-80 { + width: 80%; } + +.wf-20 { + width: 20%; } + +.wf-50 { + width: 50%; } + +.wf-33 { + width: 33.33%; } + +.wf-25 { + width: 25%; } + +.wf-75 { + width: 75%; } + +.wf-66 { + width: 66.66%; } + +.spacer { + padding: 5px; } + +.resizable { + resize: both; + overflow: auto; } + +@media only screen and (min-width: 501px) and (max-width: 900px) { + .box.w-33, .box.w-25 { + width: 49%; + width: calc(50% - 5px); } + + .box.w-75, .box.w-66 { + width: 49%; + width: calc(50% - 5px); } } +@media only screen and (max-width: 500px) { + .box.w-33, .box.w-50, .box.w-25, .box.w-66, .box.w-75 { + width: 100%; + width: calc(100% - 5px); } } +.center { + margin: 0 auto; } + +.centerText { + text-align: center; } + +.rightText { + text-align: right; } + +.floatLeft { + float: left; } + +.floatRight { + float: right; } + +.pAlignTable { + display: table; + width: 100%; } + +.vCenterTable { + display: table-cell; + vertical-align: middle; } + +.h-overflow { + overflow-x: auto; } + +.hidden { + display: none; } + +/*! + * 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: 0.5s; + animation-duration: 0.5s; + -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.flipOutX, +.animated.flipOutY, +.animated.bounceIn, +.animated.bounceOut { + -webkit-animation-duration: .75s; + animation-duration: .75s; } + +@-webkit-keyframes bounce { + from, 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: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + 40%, 43% { + -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); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); } + 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); + -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 { + from, 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: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + 40%, 43% { + -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); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); } + 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); + -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 { + from, 50%, to { + opacity: 1; } + 25%, 75% { + opacity: 0; } } +@keyframes flash { + from, 50%, to { + opacity: 1; } + 25%, 75% { + opacity: 0; } } +.flash { + -webkit-animation-name: flash; + animation-name: flash; } + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes pulse { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +@keyframes pulse { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; } + +@-webkit-keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 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: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +@keyframes rubberBand { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 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: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +.rubberBand { + -webkit-animation-name: rubberBand; + animation-name: rubberBand; } + +@-webkit-keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 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 { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 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: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); } + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); } + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); } + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); } + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); } } +@keyframes swing { + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); } + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); } + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); } + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); } + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); } } +.swing { + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; } + +@-webkit-keyframes tada { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } + 10%, 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +@keyframes tada { + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } + 10%, 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } + 30%, 50%, 70%, 90% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } + 40%, 60%, 80% { + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +.tada { + -webkit-animation-name: tada; + animation-name: tada; } + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes wobble { + from { + -webkit-transform: none; + transform: none; } + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } + to { + -webkit-transform: none; + transform: none; } } +@keyframes wobble { + from { + -webkit-transform: none; + transform: none; } + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } + to { + -webkit-transform: none; + transform: none; } } +.wobble { + -webkit-animation-name: wobble; + animation-name: wobble; } + +@-webkit-keyframes jello { + from, 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.39063deg) skewY(0.39063deg); + transform: skewX(0.39063deg) skewY(0.39063deg); } + 88.8% { + -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); + transform: skewX(-0.19531deg) skewY(-0.19531deg); } } +@keyframes jello { + from, 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.39063deg) skewY(0.39063deg); + transform: skewX(0.39063deg) skewY(0.39063deg); } + 88.8% { + -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); + transform: skewX(-0.19531deg) skewY(-0.19531deg); } } +.jello { + -webkit-animation-name: jello; + animation-name: jello; + -webkit-transform-origin: center; + transform-origin: center; } + +@-webkit-keyframes bounceIn { + from, 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: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +@keyframes bounceIn { + from, 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: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); } } +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; } + +@-webkit-keyframes bounceInDown { + from, 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 { + from, 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 { + from, 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 { + from, 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 { + from, 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); } + from { + 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 { + from, 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); } + from { + 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 { + from, 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); } + from { + 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: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes bounceInUp { + from, 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); } + from { + 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: translate3d(0, 0, 0); + transform: translate3d(0, 0, 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 { + from { + opacity: 0; } + to { + opacity: 1; } } +@keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; } + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInDown { + from { + 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 fadeInDownBig { + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInDownBig { + from { + 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 { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInLeft { + from { + 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 { + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInLeftBig { + from { + 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 { + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInRight { + from { + 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 { + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInRightBig { + from { + 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 { + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInUp { + from { + 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 { + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes fadeInUpBig { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; } } +@keyframes fadeOut { + from { + opacity: 1; } + to { + opacity: 0; } } +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; } + +@-webkit-keyframes fadeOutDown { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } } +@keyframes fadeOutDown { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); } } +@keyframes fadeOutDownBig { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } } +@keyframes fadeOutLeft { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); } } +@keyframes fadeOutLeftBig { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } } +@keyframes fadeOutRight { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); } } +@keyframes fadeOutRightBig { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } +@keyframes fadeOutUp { + from { + 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 { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); } } +@keyframes fadeOutUpBig { + from { + 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 { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; } + 40% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; } + 50% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -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); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } } +@keyframes flip { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; } + 40% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; } + 50% { + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -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); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } + 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 { + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; } + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; } + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); } } +@keyframes flipInX { + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; } + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; } + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -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 { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; } + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; } + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); } } +@keyframes flipInY { + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; } + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; } + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -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 { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); } + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; } + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; } } +@keyframes flipOutX { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); } + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; } + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; } } +.flipOutX { + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; } + +@-webkit-keyframes flipOutY { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); } + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; } + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; } } +@keyframes flipOutY { + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); } + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; } + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; } } +.flipOutY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; } + +@-webkit-keyframes lightSpeedIn { + from { + -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); + opacity: 1; } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + opacity: 1; } + to { + -webkit-transform: none; + transform: none; + opacity: 1; } } +@keyframes lightSpeedIn { + from { + -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); + opacity: 1; } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + opacity: 1; } + 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 { + from { + opacity: 1; } + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; } } +@keyframes lightSpeedOut { + from { + 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 { + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; } } +@keyframes rotateIn { + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; } } +.rotateIn { + -webkit-animation-name: rotateIn; + animation-name: rotateIn; } + +@-webkit-keyframes rotateInDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +@keyframes rotateInDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +.rotateInDownLeft { + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; } + +@-webkit-keyframes rotateInDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +@keyframes rotateInDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +.rotateInDownRight { + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; } + +@-webkit-keyframes rotateInUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +@keyframes rotateInUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +.rotateInUpLeft { + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; } + +@-webkit-keyframes rotateInUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +@keyframes rotateInUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; } } +.rotateInUpRight { + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; } + +@-webkit-keyframes rotateOut { + from { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; } } +@keyframes rotateOut { + from { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; } } +.rotateOut { + -webkit-animation-name: rotateOut; + animation-name: rotateOut; } + +@-webkit-keyframes rotateOutDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; } } +@keyframes rotateOutDownLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; } } +.rotateOutDownLeft { + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; } + +@-webkit-keyframes rotateOutDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; } } +@keyframes rotateOutDownRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; } } +.rotateOutDownRight { + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; } + +@-webkit-keyframes rotateOutUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; } } +@keyframes rotateOutUpLeft { + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; } } +.rotateOutUpLeft { + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; } + +@-webkit-keyframes rotateOutUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; } } +@keyframes rotateOutUpRight { + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; } } +.rotateOutUpRight { + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; } + +@-webkit-keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 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% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 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; } + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes rollIn { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +@keyframes rollIn { + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } + to { + opacity: 1; + -webkit-transform: none; + transform: none; } } +.rollIn { + -webkit-animation-name: rollIn; + animation-name: rollIn; } + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ +@-webkit-keyframes rollOut { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } +@keyframes rollOut { + from { + opacity: 1; } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } +.rollOut { + -webkit-animation-name: rollOut; + animation-name: rollOut; } + +@-webkit-keyframes zoomIn { + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } +@keyframes zoomIn { + from { + 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 { + from { + 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 { + from { + 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 { + from { + 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 { + from { + 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 { + from { + 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 { + from { + 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 { + from { + 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 { + from { + 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 { + from { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + to { + opacity: 0; } } +@keyframes zoomOut { + from { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 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 { + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInDown { + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; } + +@-webkit-keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInLeft { + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; } + +@-webkit-keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInRight { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; } + +@-webkit-keyframes slideInUp { + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +@keyframes slideInUp { + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } +.slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; } + +@-webkit-keyframes slideOutDown { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } } +@keyframes slideOutDown { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 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 { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } } +@keyframes slideOutLeft { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 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 { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } } +@keyframes slideOutRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 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 { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } +@keyframes slideOutUp { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); } } +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; } + +.container-fluid, .container { + box-sizing: border-box; } + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; } + +.col { + box-sizing: border-box; + display: flex; + flex: 1 0 auto; + flex-direction: column; + flex-wrap: wrap; + margin-bottom: var(--gutter-compensation, -0.5rem); + margin-left: var(--gutter-compensation, -0.5rem); } + +.row.reverse { + flex-direction: row-reverse; } + +.col.reverse { + flex-direction: column-reverse; } + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 0.3rem; + padding-left: 0.3rem; } + +.col-xs { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; } + +.col-xs-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; } + +.col-xs-2 { + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; } + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + +.col-xs-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; } + +.col-xs-5 { + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; } + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + +.col-xs-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; } + +.col-xs-8 { + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; } + +.col-xs-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + +.col-xs-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; } + +.col-xs-11 { + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; } + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + +.col-xs-offset-1 { + margin-left: 8.333%; } + +.col-xs-offset-2 { + margin-left: 16.667%; } + +.col-xs-offset-3 { + margin-left: 25%; } + +.col-xs-offset-4 { + margin-left: 33.333%; } + +.col-xs-offset-5 { + margin-left: 41.667%; } + +.col-xs-offset-6 { + margin-left: 50%; } + +.col-xs-offset-7 { + margin-left: 58.333%; } + +.col-xs-offset-8 { + margin-left: 66.667%; } + +.col-xs-offset-9 { + margin-left: 75%; } + +.col-xs-offset-10 { + margin-left: 83.333%; } + +.col-xs-offset-11 { + margin-left: 91.667%; } + +.start-xs { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; } + +.center-xs { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; } + +.end-xs { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; } + +.top-xs { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; } + +.middle-xs { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; } + +.bottom-xs { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; } + +.around-xs { + -ms-flex-pack: distribute; + justify-content: space-around; } + +.between-xs { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; } + +.first-xs { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; } + +.last-xs { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; } + +@media only screen and (min-width: 48em) { + .container { + width: 46rem; } + + .col-sm, + .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 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 0.3rem; + padding-left: 0.3rem; } + + .col-sm { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; } + + .col-sm-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; } + + .col-sm-2 { + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; } + + .col-sm-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + + .col-sm-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; } + + .col-sm-5 { + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; } + + .col-sm-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + + .col-sm-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; } + + .col-sm-8 { + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; } + + .col-sm-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + + .col-sm-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; } + + .col-sm-11 { + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; } + + .col-sm-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + + .col-sm-offset-1 { + margin-left: 8.333%; } + + .col-sm-offset-2 { + margin-left: 16.667%; } + + .col-sm-offset-3 { + margin-left: 25%; } + + .col-sm-offset-4 { + margin-left: 33.333%; } + + .col-sm-offset-5 { + margin-left: 41.667%; } + + .col-sm-offset-6 { + margin-left: 50%; } + + .col-sm-offset-7 { + margin-left: 58.333%; } + + .col-sm-offset-8 { + margin-left: 66.667%; } + + .col-sm-offset-9 { + margin-left: 75%; } + + .col-sm-offset-10 { + margin-left: 83.333%; } + + .col-sm-offset-11 { + margin-left: 91.667%; } + + .start-sm { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; } + + .center-sm { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; } + + .end-sm { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; } + + .top-sm { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; } + + .middle-sm { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; } + + .bottom-sm { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; } + + .around-sm { + -ms-flex-pack: distribute; + justify-content: space-around; } + + .between-sm { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; } + + .first-sm { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; } + + .last-sm { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; } } +@media only screen and (min-width: 62em) { + .container { + width: 61rem; } + + .col-md, + .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 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 0.3rem; + padding-left: 0.3rem; } + + .col-md { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; } + + .col-md-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; } + + .col-md-2 { + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; } + + .col-md-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + + .col-md-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; } + + .col-md-5 { + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; } + + .col-md-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + + .col-md-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; } + + .col-md-8 { + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; } + + .col-md-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + + .col-md-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; } + + .col-md-11 { + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; } + + .col-md-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + + .col-md-offset-1 { + margin-left: 8.333%; } + + .col-md-offset-2 { + margin-left: 16.667%; } + + .col-md-offset-3 { + margin-left: 25%; } + + .col-md-offset-4 { + margin-left: 33.333%; } + + .col-md-offset-5 { + margin-left: 41.667%; } + + .col-md-offset-6 { + margin-left: 50%; } + + .col-md-offset-7 { + margin-left: 58.333%; } + + .col-md-offset-8 { + margin-left: 66.667%; } + + .col-md-offset-9 { + margin-left: 75%; } + + .col-md-offset-10 { + margin-left: 83.333%; } + + .col-md-offset-11 { + margin-left: 91.667%; } + + .start-md { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; } + + .center-md { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; } + + .end-md { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; } + + .top-md { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; } + + .middle-md { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; } + + .bottom-md { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; } + + .around-md { + -ms-flex-pack: distribute; + justify-content: space-around; } + + .between-md { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; } + + .first-md { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; } + + .last-md { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; } } +@media only screen and (min-width: 75em) { + .container { + width: 71rem; } + + .col-lg, + .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 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 0.3rem; + padding-left: 0.3rem; } + + .col-lg { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; } + + .col-lg-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; } + + .col-lg-2 { + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; } + + .col-lg-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + + .col-lg-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; } + + .col-lg-5 { + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; } + + .col-lg-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + + .col-lg-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; } + + .col-lg-8 { + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; } + + .col-lg-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + + .col-lg-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; } + + .col-lg-11 { + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; } + + .col-lg-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + + .col-lg-offset-1 { + margin-left: 8.333%; } + + .col-lg-offset-2 { + margin-left: 16.667%; } + + .col-lg-offset-3 { + margin-left: 25%; } + + .col-lg-offset-4 { + margin-left: 33.333%; } + + .col-lg-offset-5 { + margin-left: 41.667%; } + + .col-lg-offset-6 { + margin-left: 50%; } + + .col-lg-offset-7 { + margin-left: 58.333%; } + + .col-lg-offset-8 { + margin-left: 66.667%; } + + .col-lg-offset-9 { + margin-left: 75%; } + + .col-lg-offset-10 { + margin-left: 83.333%; } + + .col-lg-offset-11 { + margin-left: 91.667%; } + + .start-lg { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; } + + .center-lg { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; } + + .end-lg { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; } + + .top-lg { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; } + + .middle-lg { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; } + + .bottom-lg { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; } + + .around-lg { + -ms-flex-pack: distribute; + justify-content: space-around; } + + .between-lg { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; } + + .first-lg { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; } + + .last-lg { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; } } +.ok { + color: #5cff56; } + +.warning { + color: #ff4b41; } + +.favorite { + color: #d16059; } + +.green { + background: #61BD6D; } + +.red { + background: #D14841; } + +.blue { + background: #2C82C9; } + +.orange { + background: #FBA026; } + +.lightblue { + background: #54ACD2; } + +.yellow { + background: #FAC51C; } + +.purple { + background: #553982; } + +.pink { + background: #ffa6e3; } + +.grey { + background: #dcdcdc; } + +.darkred { + background: #B8312F; } + +.darkgreen { + background: #41A85F; } + +.darkblue { + background: #2969B0; } + +*[draggable] { + cursor: move; } + +p { + margin: 0 0 10px 0; + line-height: 1.4em; } + p span { + margin: 0; + padding: 0; } + p + p { + margin-top: 5px; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.tooltip { + position: relative; + cursor: pointer; + display: inline-block; } + .tooltip > i { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; + text-align: center; + font-size: 0.7em; + color: #fff; + line-height: 1.0em; + background: #000000; + position: absolute; + padding: 5px; + bottom: 100%; + left: -50%; + margin-bottom: 10px; + visibility: hidden; + opacity: 0; + white-space: pre; } + .tooltip > i:before, .tooltip > i:after { + content: ""; + position: absolute; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + top: 100%; + left: 50%; + margin-left: -10px; } + .tooltip > i:after { + border-top: 10px solid #000000; + margin-top: 0; + z-index: 1; } + .tooltip:hover > i { + visibility: visible; + opacity: 1; } + +.spinner-1 { + width: 40px; + height: 40px; + background-color: #333; + margin: 50px auto; + -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; + animation: sk-rotateplane 1.2s infinite ease-in-out; } + +@-webkit-keyframes sk-rotateplane { + 0% { + -webkit-transform: perspective(120px); } + 50% { + -webkit-transform: perspective(120px) rotateY(180deg); } + 100% { + -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } +@keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } + 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } + 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } +.spinner-2 { + text-align: center; } + +.spinner-2 > div { + width: 18px; + height: 18px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; } + +.spinner-2 .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; } + +.spinner-2 .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; } + +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); } + 40% { + -webkit-transform: scale(1); } } +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 40% { + -webkit-transform: scale(1); + transform: scale(1); } } +.spinner-3 { + margin: 50px auto; + width: 40px; + height: 40px; + position: relative; } + +.spinner-3 .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; } + +.spinner-3 .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } + +.spinner-3 .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); } + +.spinner-3 .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); } + +.spinner-3 .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + +.spinner-3 .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); } + +.spinner-3 .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); } + +.spinner-3 .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + +.spinner-3 .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); } + +.spinner-3 .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); } + +.spinner-3 .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + +.spinner-3 .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); } + +.spinner-3 .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); } + +.spinner-3 .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; } + +.spinner-3 .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + +.spinner-3 .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; } + +.spinner-3 .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; } + +.spinner-3 .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; } + +.spinner-3 .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; } + +.spinner-3 .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; } + +.spinner-3 .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; } + +.spinner-3 .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; } + +.spinner-3 .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; } + +.spinner-3 .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; } + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { + opacity: 0; } + 40% { + opacity: 1; } } +.spinner-4 { + width: 40px; + height: 40px; + margin: 50px auto; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; + animation: sk-scaleout 1.0s infinite ease-in-out; } + +@-webkit-keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); } + 100% { + -webkit-transform: scale(1); + opacity: 0; } } +@keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + transform: scale(0); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; } } +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +canvas { + background: #fff; + border: 1px solid #000; + user-select: none; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +form li { + margin: 5px 0 5px 0; } +form td { + white-space: nowrap; + padding-bottom: 5px; } + form td textarea + i { + vertical-align: top; } +form label { + font-size: 0.9em; + color: #878787; + text-shadow: -1px -1px 1px #ffffff; } +form i + i { + margin-left: 3px; } +form .inputPrefix { + border-left: 1px solid #b7b7b7; + border-top: 1px solid #b7b7b7; + border-bottom: 1px solid #b7b7b7; + line-height: 2em; + height: 100%; + background: #bebebe; } +form .layout td + td { + padding-left: 5px; } +form .list { + font-size: 0.9em; } + form .list td { + white-space: nowrap; + padding: 3px 5px 3px 5px; } +form .ipt-wrap { + display: table; + box-sizing: border-box; } + form .ipt-wrap .ipt-first { + width: 100%; + display: table-cell; } + form .ipt-wrap .ipt-second { + padding-left: 5px; + display: table-cell; } + +.infoIcon { + width: .9rem; + text-align: center; + vertical-align: middle; + position: relative; + cursor: pointer; } + .infoIcon span { + font-size: .55rem; + display: block; + position: absolute; + right: -.55rem; + top: -.45rem; + width: .9rem; + height: .9rem; + line-height: .9rem; + border-radius: 50%; + text-align: center; + color: #fff; + background: #d16059; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +img.frame-1 { + padding: 5px; + background: #f5f5ff; + border: 1px solid #b7b7b7; + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; } +img.frame-2 { + border: 1px solid #b7b7b7; + background: #f5f5ff; } +img.frame-3 { + padding: 5px; + background: #ffffff; + border: 1px solid #b7b7b7; + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; } + +@keyframes slidy { + 0% { + left: 0%; } + 20% { + left: 0%; } + 25% { + left: -100%; } + 45% { + left: -100%; } + 50% { + left: -200%; } + 70% { + left: -200%; } + 75% { + left: -300%; } + 95% { + left: -300%; } + 100% { + left: -400%; } } +div.slider-1 { + overflow: hidden; } + div.slider-1 figure { + position: relative; + width: 500%; + margin: 0; + left: 0; + text-align: left; + font-size: 0; + animation: 30s slidy infinite; } + div.slider-1 figure img { + width: 20%; + float: left; } + +.slider-2 { + width: 100%; + position: relative; + padding-top: auto; + text-align: center; } + .slider-2 > img { + width: 100%; + position: absolute; + left: 0; + top: 0; + transition: all 0.5s; + box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } + .slider-2 input { + display: none; } + .slider-2 input:checked + label { + border-color: #666; + opacity: 1; } + .slider-2 input:checked + label + img { + opacity: 1; + transform: scale(1); } + .slider-2 input ~ img { + opacity: 0; + transform: scale(1.1); } + .slider-2 label { + display: inline-block; + margin-top: calc(50% + 15px); + margin-left: 15px; + border: 3px solid #999; + cursor: pointer; + opacity: 0.6; } + .slider-2 label img { + display: block; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +input, select, textarea, .textarea { + border: 1px solid #b7b7b7; } + +progress { + height: 20px; + width: 100%; + min-width: 150px; } + +.textarea, +.tag-input, +textarea, +select, +input[type="password"], +input[type="text"], +input[type="datetime"], +input[type="email"], +input[type="date"], +input[type="number"], +input[type="datetime-local"] { + box-sizing: border-box; + color: #454545; + background: #fff; + width: 100%; + height: 2rem; + min-width: 70px; + max-width: 100%; + padding: 7px; + font-size: 0.9rem; + border: solid 1px #dcdcdc; + transition: background 0.3s, border 0.3s; + box-shadow: inset 1px 1px 4px -2px #c5c5c5; } + .textarea:focus, + .tag-input:focus, + textarea:focus, + select:focus, + input[type="password"]:focus, + input[type="text"]:focus, + input[type="datetime"]:focus, + input[type="email"]:focus, + input[type="date"]:focus, + input[type="number"]:focus, + input[type="datetime-local"]:focus { + border-color: #0c69d6; } + +select { + cursor: pointer; + padding: 0 7px 0 7px; + /* overwrites input padding: 7px. don't know why i have to do this! */ } + +option { + line-height: 1rem; } + +input[type="file"] { + border: solid 1px #dcdcdc; + width: 100%; + max-width: 100%; + color: #454545; + padding: 10px; + box-sizing: border-box; } + +input[placeholder], textarea { + font-family: 'FontAwesome', serif; } + +input:invalid { + transition: all 0.5s; + border: 1px solid #b85450; } + +.textarea { + overflow: auto; + resize: both; } + +textarea, .textarea { + min-height: 100px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +span.check input[type="checkbox"], span.radio input[type="radio"] { + position: relative; + vertical-align: middle; + bottom: 1px; + margin-right: 5px; + cursor: pointer; } + +input[type="range"] { + border: none; + width: 100%; + min-width: 150px; + cursor: pointer; } + +.input { + width: 100%; + min-width: 120px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; } + .input button { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + background: #fff; + height: 2rem; + font-size: 1rem; + min-width: 40px; + border-left: solid 1px #dcdcdc; + border-top: solid 1px #dcdcdc; + border-bottom: solid 1px #dcdcdc; + border-right: none; + padding: 0; + position: relative; + vertical-align: middle; + flex-grow: 0; + flex-shrink: 0; } + .input button:hover { + background: #fff; } + .input i { + position: relative; + vertical-align: middle; } + .input input { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 1em; + position: relative; + vertical-align: middle; + flex-grow: 1; + flex-shrink: 1; } + +.dropdown { + position: relative; + display: inline-block; } + .dropdown:hover .content { + display: block; } + .dropdown .content { + display: none; + position: absolute; + z-index: 2; + background: #fff; } + .dropdown .content input { + display: none; } + .dropdown .content label { + display: block; + margin: 5px; + padding: 5px; } + +select.plain { + width: auto; + margin: 0; + padding: 0; + border: none; + outline: none; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + box-shadow: none; } + +.tag-input input { + border: none; + padding: 0; + margin: 0; } +.tag-input .tag { + padding: 3px; + font-size: 0.8rem; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.ac-container { + margin: 10px auto 30px auto; + text-align: left; } + .ac-container > input { + display: none; } + .ac-container > input:checked + label { + background: #ffffff; + background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); + background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); + color: #000; } + .ac-container > input:checked + label + section { + display: inherit; } + .ac-container > input + label + section { + display: none; } + .ac-container label { + display: block; + padding: 5px 20px; + position: relative; + z-index: 20; + margin-top: -1px; + cursor: pointer; + color: #777; + font-size: 1em; + border: 1px solid #b7b7b7; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; + background: #f5f5ff; + background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff)); + background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); + background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); + background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); + background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100); } + .ac-container label:hover { + background: #ffffff; + background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); + background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } + .ac-container > section { + background: #f5f5ff; + overflow: hidden; + height: auto; + position: relative; + z-index: 10; + border-left: 1px solid #b7b7b7; + border-right: 1px solid #b7b7b7; + padding: 10px; } + +div.alert { + padding: 10px; + font-weight: bold; } + div.alert i { + margin-right: 5px; } + +.alertbox.ok, .alert.ok { + background: #aaffad; + border: 2px solid #81e27d; + color: #459442; } + +.alertbox.warning, .alert.warning { + background: #f8ffa8; + border: 2px solid #d6d949; + color: #94972f; } + +.alertbox.error, .alert.error { + background: #ff7d79; + border: 2px solid #ee5649; + color: #a5302a; } + +.alertbox.info, .alert.info { + background: #b6d2ff; + border: 2px solid #85b0ee; + color: #4865a5; } + +.slider { + overflow-x: auto; + white-space: nowrap; } + .slider ul { + display: inline; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +blockquote { + border: 1px solid #dddddd; + background: #ffffff; + padding: 10px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.crumbs-1 { + list-style: none; + overflow: hidden; + font-size: 12px; } + .crumbs-1 li { + background: #f5f5ff; + border: 1px solid #b7b7b7; + padding: 10px 10px 10px 20px; + position: relative; + display: block; + float: left; + text-shadow: -1px -1px 1px #ffffff; + cursor: pointer; + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; } + .crumbs-1 li:first-child { + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + background-clip: padding-box; } + .crumbs-1 li:not(.last):after, .crumbs-1 li:before { + content: " "; + display: block; + width: 0; + height: 0; + border-top: 18px solid transparent; + border-bottom: 17px solid transparent; + border-left: 14px solid #f5f5ff; + position: absolute; + top: 50%; + margin-top: -18px; + left: 100%; } + .crumbs-1 li:not(.last):after { + z-index: 2; } + .crumbs-1 li:before { + border-left-color: #b7b7b7; + margin-left: 1px; + z-index: 1; } + .crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after { + border-left: 14px solid #ffffff; } + .crumbs-1 .last { + padding-right: 20px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + background-clip: padding-box; } + .crumbs-1 .last:before { + border: none; } + .crumbs-1 .active { + cursor: default; } + .crumbs-1 .active, .crumbs-1 li:hover { + background: #ffffff; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.btn { + cursor: pointer; } + +button, input[type="submit"], input[type="button"], a.button { + border: 1px solid #b7b7b7; + cursor: pointer; + text-shadow: 1px 1px 1px #ffffff; + min-width: 70px; + height: 2rem; + font-size: 0.9rem; + background: #d9d9d9; + background: -moz-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(100, #d1d1d1)); + background: -webkit-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); + background: -o-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); + background: -ms-linear-gradient(top, #f1f1f1 0, #d1d1d1 100); + background: linear-gradient(to bottom, #f1f1f1 0, #d1d1d1 100); + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; } + button:hover, button :active, input[type="submit"]:hover, input[type="submit"] :active, input[type="button"]:hover, input[type="button"] :active, a.button:hover, a.button :active { + text-shadow: -1px -1px 1px #ffffff; + background: #d9d9d9; + background: -moz-linear-gradient(top, #d6d6d6 0, #ededed 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(100, #ededed)); + background: -webkit-linear-gradient(top, #d6d6d6 0, #ededed 100); + background: -o-linear-gradient(top, #d6d6d6 0, #ededed 100); + background: -ms-linear-gradient(top, #d6d6d6 0, #ededed 100); + background: linear-gradient(to bottom, #d6d6d6 0, #ededed 100); } + +button.red { + color: #ffffff; + text-shadow: 1px 1px 1px #696969; + background: #d9645b; + background: -moz-linear-gradient(top, #f17068 0, #d16059 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f17068), color-stop(100, #d16059)); + background: -webkit-linear-gradient(top, #f17068 0, #d16059 100); + background: -o-linear-gradient(top, #f17068 0, #d16059 100); + background: -ms-linear-gradient(top, #f17068 0, #d16059 100); + background: linear-gradient(to bottom, #f17068 0, #d16059 100); + -moz-box-shadow: inset 1px 1px 0px 0px #ff8d7c; + -webkit-box-shadow: inset 1px 1px 0px 0px #ff8d7c; + box-shadow: inset 1px 1px 0px 0px #ff8d7c; } + button.red:hover, button.red :active { + text-shadow: -1px -1px 1px #696969; + background: #d9645b; + background: -moz-linear-gradient(top, #d16059 0, #f17068 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d16059), color-stop(100, #f17068)); + background: -webkit-linear-gradient(top, #d16059 0, #f17068 100); + background: -o-linear-gradient(top, #d16059 0, #f17068 100); + background: -ms-linear-gradient(top, #d16059 0, #f17068 100); + background: linear-gradient(to bottom, #d16059 0, #f17068 100); } + +button.green { + color: #ffffff; + text-shadow: 1px 1px 1px #696969; + background: #90d99d; + background: -moz-linear-gradient(top, #9df1ad 0, #77d17c 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9df1ad), color-stop(100, #77d17c)); + background: -webkit-linear-gradient(top, #9df1ad 0, #77d17c 100); + background: -o-linear-gradient(top, #9df1ad 0, #77d17c 100); + background: -ms-linear-gradient(top, #9df1ad 0, #77d17c 100); + background: linear-gradient(to bottom, #9df1ad 0, #77d17c 100); + -moz-box-shadow: inset 1px 1px 0px 0px #c8ffb6; + -webkit-box-shadow: inset 1px 1px 0px 0px #c8ffb6; + box-shadow: inset 1px 1px 0px 0px #c8ffb6; } + button.green:hover, button.green :active { + text-shadow: -1px -1px 1px #696969; + background: #90d99d; + background: -moz-linear-gradient(top, #77d17c 0, #9df1ad 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77d17c), color-stop(100, #9df1ad)); + background: -webkit-linear-gradient(top, #77d17c 0, #9df1ad 100); + background: -o-linear-gradient(top, #77d17c 0, #9df1ad 100); + background: -ms-linear-gradient(top, #77d17c 0, #9df1ad 100); + background: linear-gradient(to bottom, #77d17c 0, #9df1ad 100); } + +button.blue { + color: #ffffff; + text-shadow: 1px 1px 1px #696969; + background: #97afd9; + background: -moz-linear-gradient(top, #beddf1 0, #7ba9d1 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #beddf1), color-stop(100, #7ba9d1)); + background: -webkit-linear-gradient(top, #beddf1 0, #7ba9d1 100); + background: -o-linear-gradient(top, #beddf1 0, #7ba9d1 100); + background: -ms-linear-gradient(top, #beddf1 0, #7ba9d1 100); + background: linear-gradient(to bottom, #beddf1 0, #7ba9d1 100); + -moz-box-shadow: inset 1px 1px 0px 0px #cbf3ff; + -webkit-box-shadow: inset 1px 1px 0px 0px #cbf3ff; + box-shadow: inset 1px 1px 0px 0px #cbf3ff; } + button.blue:hover, button.blue :active { + text-shadow: -1px -1px 1px #696969; + background: #97afd9; + background: -moz-linear-gradient(top, #7ba9d1 0, #beddf1 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ba9d1), color-stop(100, #beddf1)); + background: -webkit-linear-gradient(top, #7ba9d1 0, #beddf1 100); + background: -o-linear-gradient(top, #7ba9d1 0, #beddf1 100); + background: -ms-linear-gradient(top, #7ba9d1 0, #beddf1 100); + background: linear-gradient(to bottom, #7ba9d1 0, #beddf1 100); } + +ul.btns { + list-style: none; + overflow: hidden; + font-size: 12px; } + ul.btns li { + background: #f5f5ff; + border-left: 1px solid #b7b7b7; + border-top: 1px solid #b7b7b7; + border-bottom: 1px solid #b7b7b7; + float: left; + text-shadow: -1px -1px 1px #ffffff; + cursor: pointer; + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; } + ul.btns li:last-child { + border-right: 1px solid #b7b7b7; } + ul.btns li:before { + border-left-color: #b7b7b7; + margin-left: 1px; } + ul.btns a { + display: block; + padding: 10px; } + ul.btns .active { + cursor: default; } + ul.btns .active, ul.btns li:hover { + background: #ffffff; } + +button.simple { + background: #f5f5ff; + border: 1px solid #b7b7b7; + text-shadow: -1px -1px 1px #ffffff; + padding: 5px; + min-width: 40px; } + button.simple:hover { + background: #ffffff; } + +article a { + color: #8ea4ff; + border-bottom: 1px dotted #8ea4ff; } + article a:hover { + border-bottom: none; } + +.unseen { + font-weight: bold; } + +[data-href] { + cursor: pointer; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +ul.default li { + margin: 5px 0 5px 0; } + ul.default li:first-child { + margin: 0 0 5px 0; } + ul.default li:last-child { + margin: 5px 0 0 0; } + +ul.boxed { + background: #fff; + padding: 5px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; + border: 1px solid #b7b7b7; } + ul.boxed li { + margin: 5px 0 5px 0; } + ul.boxed li:first-child { + margin-top: 0; } + ul.boxed li:last-child { + margin-bottom: 0; } + +ul.h-list li { + display: inline-block; + margin: 5px 10px 5px 10px; } + +.bullet-list { + margin: 0; + padding: 0; + border-spacing: 0; + border-collapse: collapse; } + .bullet-list td:first-child { + padding-right: 20px; } + .bullet-list span { + margin-right: 5px; } + +.bullet { + width: 7px; + height: 7px; + border-radius: 30px; + background: #ccc; + display: inline-block; } + .bullet.active { + background: #000; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +#nav-side { + user-select: none; + width: 175px; + position: fixed; + top: 79px; + right: 0; + bottom: 0; + left: 0; + z-index: 0; + overflow-y: auto; + font-size: 0.8em; + background: #2F2F2F; } + #nav-side span { + width: 20px; + display: inline-block; } + #nav-side input { + display: none; } + #nav-side input:checked + ul .max { + display: inherit; } + #nav-side input:checked + ul .min { + display: none; } + #nav-side input:checked + ul > li:nth-child(n+2) { + display: inherit; } + #nav-side input + ul .max { + display: none; } + #nav-side input + ul .min { + display: inherit; } + #nav-side input + ul > li:nth-child(n+2) { + display: none; } + #nav-side > li li { + border-top: 1px solid #3f3f3f; + border-bottom: 1px solid #252525; + color: #fff; } + #nav-side > li li:not(:first-child) { + background: #353535; } + #nav-side > li li:first-child { + border-bottom: 1px solid #1a1a1a; } + #nav-side > li li:first-child { + padding: 7px 0 7px 7px; } + #nav-side > li li a { + display: block; + padding: 7px 0 7px 7px; } + #nav-side > li li a:hover { + background: #3F3F3F; } + #nav-side li:last-child li:last-child { + border-bottom: none; } + #nav-side .max, #nav-side .min { + float: right; } + #nav-side i { + margin-right: 5px; } + #nav-side::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #F5F5F5; } + #nav-side::-webkit-scrollbar { + width: 12px; + background-color: #F5F5F5; } + #nav-side::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #555; } + +.nav-trigger { + position: absolute; + clip: rect(0, 0, 0, 0); } + +label[for="nav-trigger"] { + font-size: 2.0em; + height: 30px; + width: 30px; + cursor: pointer; } + +.nav-trigger:checked ~ main { + width: calc(100% - 175px); + left: 175px; } + +.nav-top { + user-select: none; + margin-top: 5px; + display: block; + background: #ffffff; + border: 1px solid #b7b7b7; + -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; + box-shadow: inset 0px 1px 0px 0px #ffffff; } + .nav-top > li { + -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; + box-shadow: inset 0px 1px 0px 0px #ffffff; + text-shadow: 1px 1px 1px #ffffff; } + .nav-top > li:first-child { + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; } + +.nav-top li { + background: #fff; + display: inline-block; + margin-right: -4px; + position: relative; + cursor: pointer; } + +.nav-top > li > a { + display: inline-block; + padding: 10px 10px; } + +.nav-top li:hover { + background: #555; + color: #fff; + text-shadow: 0 -1px 0 #000; } + +.nav-top li > ul { + padding: 0; + position: absolute; + top: 36px; + left: 0; + width: 150px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + display: none; + opacity: 0; + visibility: hidden; } + +.nav-top li > ul li { + background: #555; + display: block; + color: #fff; + text-shadow: 0 -1px 0 #000; } + +.nav-top li > ul li:hover { + background: #666; } + +.nav-top li:hover > ul { + display: block; + opacity: 1; + visibility: visible; } + +@media screen and (max-width: 600px) { + .nav-trigger:checked ~ main { + width: 100%; + left: 0; } + + .nav-trigger:not(:checked) ~ main { + width: 0; + padding-right: 0; } + + #nav-side { + width: 100%; } } +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +main { + height: 100%; + width: 100%; + position: relative; + top: 0; + bottom: 100%; + left: 0; + z-index: 1; + background: #e7ebf3; + transition: all 0.2s; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.pagination li { + display: inline; } +.pagination a { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; + background: #f5f5ff; + padding: 5px 10px 5px 10px; } +.pagination .active, .pagination a:hover, .pagination a:active { + color: #ffffff; + background: #353535; + -moz-box-shadow: inset 1px 1px 0px 0px #e8e8e8; + -webkit-box-shadow: inset 1px 1px 0px 0px #e8e8e8; + box-shadow: inset 1px 1px 0px 0px #e8e8e8; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.meter { + height: 20px; + /* Can be anything */ + position: relative; + background: none !important; } + .meter > span { + display: block; + height: 100%; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + background-clip: padding-box; + background-color: #2bc253; + background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054)); + position: relative; + overflow: hidden; } + +.meter > span:after, .animate > span > span { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); + z-index: 1; + -webkit-background-size: 50px 50px; + -moz-background-size: 50px 50px; + -webkit-animation: move 4s linear infinite; + overflow: hidden; } + +.animate > span:after { + display: none; } + +@-webkit-keyframes move { + 0% { + background-position: 0 0; } + 100% { + background-position: 50px 50px; } } +.orange > span { + background-color: #f1a165; + background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); + background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } + +.blue > span { + background-color: #96c2f1; + background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); + background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } + +.red > span { + background-color: #f0a3a3; + background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323)); + background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } + +.nostripes > span > span, .nostripes > span:after { + -webkit-animation: none; + background-image: none; } + +.timeline { + list-style: none; + margin: 0 0 30px 120px; + padding-left: 30px; + border-left: 3px solid #eaeaea; } + .timeline li { + margin: 0; + position: relative; } + .timeline p { + margin: 0 0 15px; } + +.timeline-date { + margin-top: -18px; + top: 50%; + left: -150px; + font-size: 0.95em; + line-height: 20px; + position: absolute; + padding: 5px 10px 5px 10px; + border: 1px solid #ccc; } + +.timeline-circle { + margin-top: -10px; + top: 50%; + left: -40px; + width: 10px; + height: 10px; + background: tomato; + border: 3px solid #eaeaea; + border-radius: 50%; + display: block; + position: absolute; } + +.timeline-circle-start { + margin-top: 0; + top: 0; + left: -45px; + width: 20px; + height: 20px; + background: #fff; + border: 3px solid #eaeaea; + border-radius: 50%; + display: block; + position: absolute; } + +.timeline-circle-end { + margin-top: 0; + top: 100%; + left: -45px; + width: 20px; + height: 20px; + background: #fff; + border: 3px solid #eaeaea; + border-radius: 50%; + display: block; + position: absolute; } + +.timeline-content { + padding: 50px 20px 0; + border-radius: 0.5em; + position: relative; } + +.timeline-content p { + text-align: justify; } + +.timeline label { + font-size: 1.3em; + position: absolute; + z-index: 100; + top: 20px; } + +.timeline-radio { + display: none; } + +.timeline-break { + display: none; } + +.progress-radial { + float: left; + margin-right: 20px; + position: relative; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: tomato; } + .progress-radial .overlay { + position: absolute; + width: 60px; + height: 60px; + background-color: #fff; + border-radius: 50%; + margin-left: 5px; + margin-top: 5px; + text-align: center; + line-height: 60px; + font-size: 9px; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.box { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + margin-top: 0.3rem; + overflow-x: auto; } + .box .inner { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; + padding: 10px; } + +.box-container { + display: inline-block; } + +section.box { + -moz-box-shadow: 0px 1px 0px 0px #f1f1f1; + -webkit-box-shadow: 0px 1px 0px 0px #f1f1f1; + box-shadow: 0px 1px 0px 0px #f1f1f1; + border: 1px solid #b7b7b7; + background: #fff; } + section.box.orange { + border-top: 3px solid #FBA026; } + section.box.red { + border-top: 3px solid #B8312F; } + section.box.green { + border-top: 3px solid #41A85F; } + section.box.blue { + border-top: 3px solid #2C82C9; } + section.box.purple { + border-top: 3px solid #553982; } + section.box.darkblue { + border-top: 3px solid #2969B0; } + +section header > h1 { + margin: 10px 10px 0 10px; + padding-bottom: 5px; + font-size: 1.1em; + text-shadow: 1px 1px 1px #ffffff; + border-bottom: 1px solid #e1e1e1; } +section > h2 { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 1.2em; + margin-bottom: 5px; + text-shadow: 1px 1px 1px #ffffff; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.tabular { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .tabular .tab-links { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0.3rem 0 0 0.3rem; } + .tabular .tab-links label { + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; + border-top: 1px solid #b7b7b7; + border-left: 1px solid #b7b7b7; + border-right: 1px solid #b7b7b7; + background: #f5f5ff; + background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff)); + background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100); + padding: 5px 10px 5px 10px; + text-shadow: 1px 1px 1px #ffffff; + font-size: 0.9em; + cursor: pointer; } + .tabular .tab-links .active a, .tabular .tab-links label:hover { + background: #ffffff; + background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); + background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } + .tabular .tab-links .active a { + cursor: default; } + .tabular .tab-links li { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + margin: 0 5px 0 0; } + .tabular .tab-content { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: #ffffff; + border: 1px solid #b7b7b7; + padding: 10px; } + .tabular .tab-content > input { + display: none; } + .tabular .tab-content input + div { + display: none; } + .tabular .tab-content input:checked + div { + display: inherit; } + +.tabular-2 .tab-links { + padding: 0.3rem 0 0 0.3rem; } +.tabular-2 .tab-links label { + -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; + box-shadow: inset 1px 1px 0px 0px #ffffff; + border: 1px solid #b7b7b7; + background: #f5f5ff; + background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff)); + background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100); + background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100); + padding: 5px 10px 5px 10px; + text-shadow: 1px 1px 1px #ffffff; + font-size: 0.9em; + cursor: pointer; } +.tabular-2 .tab-links .active a, .tabular-2 .tab-links label:hover { + background: #ffffff; + background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); + background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); + background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } +.tabular-2 .tab-links .active a { + cursor: default; } +.tabular-2 .tab-links li { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + margin: 0 5px 15px 0; } +.tabular-2 .tab-content > input { + display: none; } +.tabular-2 .tab-content input + div { + display: none; } +.tabular-2 .tab-content input:checked + div { + display: inherit; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.table { + background: none; } + .table caption { + color: #fff; } + .table thead { + color: #fff; } + .table.red caption, .table.red thead { + background: #B8312F; } + .table.orange caption, .table.orange thead { + background: #FBA026; } + .table.green caption, .table.green thead { + background: #41A85F; } + .table.blue caption, .table.blue thead { + background: #2C82C9; } + .table.white caption, .table.white thead { + background: #fff; } + +table.table { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-size: 0.9em; + max-width: 100%; + overflow: hidden; } + table.table caption { + background: #fff; + border-right: 1px solid #b7b7b7; + border-left: 1px solid #b7b7b7; + border-top: 1px solid #b7b7b7; + padding: 5px; } + table.table td { + padding: 5px 10px 5px 10px; + white-space: nowrap; } + table.table tbody td:first-child { + border-left: 1px solid #b7b7b7; } + table.table tbody td:last-child { + border-right: 1px solid #b7b7b7; } + table.table tbody td { + border-top: 1px solid #b7b7b7; + -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; + -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; + box-shadow: inset 0px 1px 0px 0px #ffffff; } + table.table tbody tr { + height: 2rem; } + table.table tbody tr:nth-of-type(2n) { + background: #f8f8f8; } + table.table tbody tr:nth-of-type(2n+1) { + background: #fff; } + table.table tbody tr:hover { + background: #f0f0f0; } + table.table tbody tr:last-child td { + border-bottom: 1px solid #b7b7b7; } + table.table thead { + background: #fff; } + table.table thead td:first-child { + border-left: 1px solid #b7b7b7; } + table.table thead td:last-child { + border-right: 1px solid #b7b7b7; } + table.table .empty { + text-align: center; + color: #d8d8d8; } + table.table tfoot { + border: none; } + table.table tfoot label { + float: left; } + table.table tfoot select { + width: auto; + float: right; + margin: 0; + min-width: 0px; } + table.table tfoot td { + text-align: center; + padding-top: 10px; } + +table.list th { + text-align: left; } +table.list td { + padding: 2px 5px 2px 5px; } + +@media screen and (max-width: 600px) { + table.table { + display: table; + table-layout: fixed; + width: 100%; + border: 0; } + table.table thead { + display: none; } + table.table tbody tr { + height: auto; + display: block; + margin-bottom: .625em; } + table.table tbody tr td:last-child { + border-bottom: 1px solid #b7b7b7; } + table.table tbody tr:last-child td { + border-bottom: none; } + table.table tbody tr:last-child td:last-child { + border-bottom: 1px solid #b7b7b7; } + table.table tbody td { + border-left: 1px solid #b7b7b7; + border-right: 1px solid #b7b7b7; + display: block; + font-size: .8rem; + text-align: right; + position: relative; + height: 2rem; + line-height: 2rem; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; } + table.table tbody td:before { + content: attr(data-label); + float: left; + margin-right: 10px; + font-weight: bold; } + table.table tfoot { + display: none; } } +.nobreak { + white-space: nowrap; } + +/* Global */ +/* Content Container */ +/* Content box */ +/* Navigation */ +/* Colors */ +.tag { + cursor: pointer; + border: 1px solid #b7b7b7; + padding: 5px 10px 5px 10px; + font-size: 0.7rem; + color: #fff; + display: inline-block; + line-height: 1rem; }