@charset "UTF-8"; /*@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");*/ @font-face { font-family: 'Roboto'; src: url("https://www.markenservice.net/layout/fonts/roboto-v29-latin-regular.woff2"); } /*@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700");*/ @font-face { font-family: 'Roboto Slab'; src: url("https://www.markenservice.net/layout/fonts/roboto-slab-v22-latin-regular.woff2"); } /*@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");*/ @font-face { font-family: 'FontAwesome'; src: url("https://www.markenservice.net/layout/fonts/fontawesome-webfont.woff2?v=4.5.0"); } .fa { display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-ul { padding-left: 0; margin-left: 2.14286em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14286em; width: 2.14286em; top: 0.14286em; text-align: center; } .fa-li.fa-lg { left: -1.85714em; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } /** layout styling goes in here **/ /* @font-face { src: url('../../../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../../../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../../../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'); font: { family: 'FontAwesome'; weight: normal; style: normal; } }*/ i.fa { font-family: "FontAwesome"; } i.fa::before { content: attr(data-icon); display: inline-block; font-family: "FontAwesome"; } html, button, input, select, textarea { color: #333; /* Set your content font stack here: */ font-family: "Roboto Slab", sans-serif; font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (min-width: 64em) { html, button, input, select, textarea { font-size: 16px; } } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", sans-serif; font-weight: 700; } /* Flexbox related mixins */ /* Including IE10 tweener syntax where possible */ /* CSS Filters - unsupported by IE */ /* Set the hyphenation - auto only works when lang attribute is set on */ /* Icon Font mixin */ /* Font size mixin */ /* Clearfix mixin */ /* toREM function */ /* em calculation function */ /*! Pure v0.6.0 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yahoo/pure/blob/master/LICENSE.md */ /*! normalize.css v^3.0 | MIT License | git.io/normalize Copyright (c) Nicolas Gallagher and Jonathan Neal */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } dfn { font-style: italic; } h1 { font-size: 2em; margin: .67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search] { -webkit-appearance: textfield; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .hidden, [hidden] { display: none !important; } .pure-img { max-width: 100%; height: auto; display: block; } .pure-g { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; text-rendering: optimizespeed; font-family: FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; -ms-align-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .opera-only :-o-prefocus, .pure-g { word-spacing: -.43em; } .pure-u { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-g [class*="pure-u"] { font-family: sans-serif; } .pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-2-3, .pure-u-1-4, .pure-u-3-4, .pure-u-1-5, .pure-u-2-5, .pure-u-3-5, .pure-u-4-5, .pure-u-5-5, .pure-u-1-6, .pure-u-5-6, .pure-u-1-8, .pure-u-3-8, .pure-u-5-8, .pure-u-7-8, .pure-u-1-12, .pure-u-5-12, .pure-u-7-12, .pure-u-11-12, .pure-u-1-24, .pure-u-2-24, .pure-u-3-24, .pure-u-4-24, .pure-u-5-24, .pure-u-6-24, .pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-1-24 { width: 4.1667%; *width: 4.1357%; } .pure-u-1-12, .pure-u-2-24 { width: 8.3333%; *width: 8.3023%; } .pure-u-1-8, .pure-u-3-24 { width: 12.5%; *width: 12.469%; } .pure-u-1-6, .pure-u-4-24 { width: 16.6667%; *width: 16.6357%; } .pure-u-1-5 { width: 20%; *width: 19.969%; } .pure-u-5-24 { width: 20.8333%; *width: 20.8023%; } .pure-u-1-4, .pure-u-6-24 { width: 25%; *width: 24.969%; } .pure-u-7-24 { width: 29.1667%; *width: 29.1357%; } .pure-u-1-3, .pure-u-8-24 { width: 33.3333%; *width: 33.3023%; } .pure-u-3-8, .pure-u-9-24 { width: 37.5%; *width: 37.469%; } .pure-u-2-5 { width: 40%; *width: 39.969%; } .pure-u-5-12, .pure-u-10-24 { width: 41.6667%; *width: 41.6357%; } .pure-u-11-24 { width: 45.8333%; *width: 45.8023%; } .pure-u-1-2, .pure-u-12-24 { width: 50%; *width: 49.969%; } .pure-u-13-24 { width: 54.1667%; *width: 54.1357%; } .pure-u-7-12, .pure-u-14-24 { width: 58.3333%; *width: 58.3023%; } .pure-u-3-5 { width: 60%; *width: 59.969%; } .pure-u-5-8, .pure-u-15-24 { width: 62.5%; *width: 62.469%; } .pure-u-2-3, .pure-u-16-24 { width: 66.6667%; *width: 66.6357%; } .pure-u-17-24 { width: 70.8333%; *width: 70.8023%; } .pure-u-3-4, .pure-u-18-24 { width: 75%; *width: 74.969%; } .pure-u-19-24 { width: 79.1667%; *width: 79.1357%; } .pure-u-4-5 { width: 80%; *width: 79.969%; } .pure-u-5-6, .pure-u-20-24 { width: 83.3333%; *width: 83.3023%; } .pure-u-7-8, .pure-u-21-24 { width: 87.5%; *width: 87.469%; } .pure-u-11-12, .pure-u-22-24 { width: 91.6667%; *width: 91.6357%; } .pure-u-23-24 { width: 95.8333%; *width: 95.8023%; } .pure-u-1, .pure-u-1-1, .pure-u-5-5, .pure-u-24-24 { width: 100%; } .pure-button, button, #cboxClose, .callme-cta a { display: inline-block; zoom: 1; line-height: normal; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; } .pure-button::-moz-focus-inner, button::-moz-focus-inner, #cboxClose::-moz-focus-inner, .callme-cta a::-moz-focus-inner { padding: 0; border: 0; } .pure-button, button, #cboxClose, .callme-cta a { font-family: inherit; font-size: 100%; padding: .5em 1em; color: #444; color: rgba(0, 0, 0, 0.8); border: 1px solid #999; border: 0 transparent; background-color: #E6E6E6; text-decoration: none; border-radius: 2px; } .pure-button-hover, .pure-button:hover, button:hover, #cboxClose:hover, .callme-cta a:hover, .pure-button:focus, button:focus, #cboxClose:focus, .callme-cta a:focus { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1))); background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .pure-button:focus, button:focus, #cboxClose:focus, .callme-cta a:focus { outline: 0; } .pure-button-active, .pure-button:active, button:active, #cboxClose:active, .callme-cta a:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; border-color: #000\9; } .pure-button[disabled], button[disabled], [disabled]#cboxClose, .callme-cta a[disabled], .pure-button-disabled, .pure-button-disabled:hover, .pure-button-disabled:focus, .pure-button-disabled:active { border: 0; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); filter: alpha(opacity=40); -khtml-opacity: .4; -moz-opacity: .4; opacity: .4; cursor: not-allowed; box-shadow: none; } .pure-button-hidden { display: none; } .pure-button::-moz-focus-inner, button::-moz-focus-inner, #cboxClose::-moz-focus-inner, .callme-cta a::-moz-focus-inner { padding: 0; border: 0; } .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: #0078e7; color: #fff; } .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea { padding: .5em .6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; vertical-align: middle; box-sizing: border-box; } .pure-form input:not([type]) { padding: .5em .6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; box-sizing: border-box; } .pure-form input[type=color] { padding: .2em .5em; } .pure-form input[type=text]:focus, .pure-form input[type=password]:focus, .pure-form input[type=email]:focus, .pure-form input[type=url]:focus, .pure-form input[type=date]:focus, .pure-form input[type=month]:focus, .pure-form input[type=time]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=week]:focus, .pure-form input[type=number]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=color]:focus, .pure-form select:focus, .pure-form textarea:focus { outline: 0; border-color: #129FEA; } .pure-form input:not([type]):focus { outline: 0; border-color: #129FEA; } .pure-form input[type=file]:focus, .pure-form input[type=radio]:focus, .pure-form input[type=checkbox]:focus { outline: thin solid #129FEA; outline: 1px auto #129FEA; } .pure-form .pure-checkbox, .pure-form .pure-radio { margin: .5em 0; display: block; } .pure-form input[type=text][disabled], .pure-form input[type=password][disabled], .pure-form input[type=email][disabled], .pure-form input[type=url][disabled], .pure-form input[type=date][disabled], .pure-form input[type=month][disabled], .pure-form input[type=time][disabled], .pure-form input[type=datetime][disabled], .pure-form input[type=datetime-local][disabled], .pure-form input[type=week][disabled], .pure-form input[type=number][disabled], .pure-form input[type=search][disabled], .pure-form input[type=tel][disabled], .pure-form input[type=color][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } .pure-form input:not([type])[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { background-color: #eee; color: #777; border-color: #ccc; } .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { color: #b94a48; border-color: #e9322d; } .pure-form input[type=file]:focus:invalid:focus, .pure-form input[type=radio]:focus:invalid:focus, .pure-form input[type=checkbox]:focus:invalid:focus { outline-color: #e9322d; } .pure-form select { height: 2.25em; border: 1px solid #ccc; background-color: #fff; } .pure-form select[multiple] { height: auto; } .pure-form label { margin: .5em 0 .2em; } .pure-form fieldset { margin: 0; padding: .35em 0 .75em; border: 0; } .pure-form legend { display: block; width: 100%; padding: .3em 0; margin-bottom: .3em; color: #333; border-bottom: 1px solid #e5e5e5; } .pure-form-stacked input[type=text], .pure-form-stacked input[type=password], .pure-form-stacked input[type=email], .pure-form-stacked input[type=url], .pure-form-stacked input[type=date], .pure-form-stacked input[type=month], .pure-form-stacked input[type=time], .pure-form-stacked input[type=datetime], .pure-form-stacked input[type=datetime-local], .pure-form-stacked input[type=week], .pure-form-stacked input[type=number], .pure-form-stacked input[type=search], .pure-form-stacked input[type=tel], .pure-form-stacked input[type=color], .pure-form-stacked input[type=file], .pure-form-stacked select, .pure-form-stacked label, .pure-form-stacked textarea { display: block; margin: .25em 0; } .pure-form-stacked input:not([type]) { display: block; margin: .25em 0; } .pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, .pure-form-aligned .pure-help-inline, .pure-form-message-inline { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .pure-form-aligned textarea { vertical-align: top; } .pure-form-aligned .pure-control-group { margin-bottom: .5em; } .pure-form-aligned .pure-control-group label { text-align: right; display: inline-block; vertical-align: middle; width: 10em; margin: 0 1em 0 0; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0 11em; } .pure-form input.pure-input-rounded, .pure-form .pure-input-rounded { border-radius: 2em; padding: .5em 1em; } .pure-form .pure-group fieldset { margin-bottom: 10px; } .pure-form .pure-group input, .pure-form .pure-group textarea { display: block; padding: 10px; margin: 0 0 -1px; border-radius: 0; position: relative; top: -1px; } .pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { z-index: 3; } .pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { top: 1px; border-radius: 4px 4px 0 0; margin: 0; } .pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: 4px; margin: 0; } .pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 4px 4px; margin: 0; } .pure-form .pure-group button { margin: .35em 0; } .pure-form .pure-input-1 { width: 100%; } .pure-form .pure-input-2-3 { width: 66%; } .pure-form .pure-input-1-2 { width: 50%; } .pure-form .pure-input-1-3 { width: 33%; } .pure-form .pure-input-1-4 { width: 25%; } .pure-form .pure-help-inline, .pure-form-message-inline { display: inline-block; padding-left: .3em; color: #666; vertical-align: middle; font-size: .875em; } .pure-form-message { display: block; color: #666; font-size: .875em; } @media only screen and (max-width: 480px) { .pure-form button[type=submit] { margin: .7em 0 0; } .pure-form input:not([type]), .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form label { margin-bottom: .3em; display: block; } .pure-group input:not([type]), .pure-group input[type=text], .pure-group input[type=password], .pure-group input[type=email], .pure-group input[type=url], .pure-group input[type=date], .pure-group input[type=month], .pure-group input[type=time], .pure-group input[type=datetime], .pure-group input[type=datetime-local], .pure-group input[type=week], .pure-group input[type=number], .pure-group input[type=search], .pure-group input[type=tel], .pure-group input[type=color] { margin-bottom: 0; } .pure-form-aligned .pure-control-group label { margin-bottom: .3em; text-align: left; display: block; width: 100%; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0; } .pure-form .pure-help-inline, .pure-form-message-inline, .pure-form-message { display: block; font-size: .75em; padding: .2em 0 .8em; } } .pure-menu { box-sizing: border-box; } .pure-menu-fixed { position: fixed; left: 0; top: 0; z-index: 3; } .pure-menu-list, .pure-menu-item { position: relative; } .pure-menu-list { list-style: none; margin: 0; padding: 0; } .pure-menu-item { padding: 0; margin: 0; height: 100%; } .pure-menu-link, .pure-menu-heading { display: block; text-decoration: none; white-space: nowrap; } .pure-menu-horizontal { width: 100%; white-space: nowrap; } .pure-menu-horizontal .pure-menu-list { display: inline-block; } .pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-separator { display: inline-block; *display: inline; zoom: 1; vertical-align: middle; } .pure-menu-item .pure-menu-item { display: block; } .pure-menu-children { display: none; position: absolute; left: 100%; top: 0; margin: 0; padding: 0; z-index: 3; } .pure-menu-horizontal .pure-menu-children { left: 0; top: auto; width: inherit; } .pure-menu-allow-hover:hover > .pure-menu-children, .pure-menu-active > .pure-menu-children { display: block; position: absolute; } .pure-menu-has-children > .pure-menu-link:after { padding-left: .5em; content: "\25B8"; font-size: small; } .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { content: "\25BE"; } .pure-menu-scrollable { overflow-y: scroll; overflow-x: hidden; } .pure-menu-scrollable .pure-menu-list { display: block; } .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { display: inline-block; } .pure-menu-horizontal.pure-menu-scrollable { white-space: nowrap; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: .5em 0; } .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { display: none; } .pure-menu-separator { background-color: #ccc; height: 1px; margin: .3em 0; } .pure-menu-horizontal .pure-menu-separator { width: 1px; height: 1.3em; margin: 0 .3em; } .pure-menu-heading { text-transform: uppercase; color: #565d64; } .pure-menu-link { color: #777; } .pure-menu-children { background-color: #fff; } .pure-menu-link, .pure-menu-disabled, .pure-menu-heading { padding: .5em 1em; } .pure-menu-disabled { opacity: .5; } .pure-menu-disabled .pure-menu-link:hover { background-color: transparent; } .pure-menu-active > .pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus { background-color: #eee; } .pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited { color: #000; } .pure-table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; } .pure-table caption { color: #000; font: italic 85%/1 arial,sans-serif; padding: 1em 0; text-align: center; } .pure-table td, .pure-table th { border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: .5em 1em; } .pure-table td:first-child, .pure-table th:first-child { border-left-width: 0; } .pure-table thead { background-color: #e0e0e0; color: #000; text-align: left; vertical-align: bottom; } .pure-table td { background-color: transparent; } .pure-table-odd td { background-color: #f2f2f2; } .pure-table-striped tr:nth-child(2n-1) td { background-color: #f2f2f2; } .pure-table-bordered td { border-bottom: 1px solid #cbcbcb; } .pure-table-bordered tbody > tr:last-child > td { border-bottom-width: 0; } .pure-table-horizontal td, .pure-table-horizontal th { border-width: 0 0 1px; border-bottom: 1px solid #cbcbcb; } .pure-table-horizontal tbody > tr:last-child > td { border-bottom-width: 0; } /*! Pure v0.6.0 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yahoo/pure/blob/master/LICENSE.md */ @media screen and (min-width: 35.5em) { .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-1-2, .pure-u-sm-1-3, .pure-u-sm-2-3, .pure-u-sm-1-4, .pure-u-sm-3-4, .pure-u-sm-1-5, .pure-u-sm-2-5, .pure-u-sm-3-5, .pure-u-sm-4-5, .pure-u-sm-5-5, .pure-u-sm-1-6, .pure-u-sm-5-6, .pure-u-sm-1-8, .pure-u-sm-3-8, .pure-u-sm-5-8, .pure-u-sm-7-8, .pure-u-sm-1-12, .pure-u-sm-5-12, .pure-u-sm-7-12, .pure-u-sm-11-12, .pure-u-sm-1-24, .pure-u-sm-2-24, .pure-u-sm-3-24, .pure-u-sm-4-24, .pure-u-sm-5-24, .pure-u-sm-6-24, .pure-u-sm-7-24, .pure-u-sm-8-24, .pure-u-sm-9-24, .pure-u-sm-10-24, .pure-u-sm-11-24, .pure-u-sm-12-24, .pure-u-sm-13-24, .pure-u-sm-14-24, .pure-u-sm-15-24, .pure-u-sm-16-24, .pure-u-sm-17-24, .pure-u-sm-18-24, .pure-u-sm-19-24, .pure-u-sm-20-24, .pure-u-sm-21-24, .pure-u-sm-22-24, .pure-u-sm-23-24, .pure-u-sm-24-24 { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-sm-1-24 { width: 4.1667%; *width: 4.1357%; } .pure-u-sm-1-12, .pure-u-sm-2-24 { width: 8.3333%; *width: 8.3023%; } .pure-u-sm-1-8, .pure-u-sm-3-24 { width: 12.5%; *width: 12.469%; } .pure-u-sm-1-6, .pure-u-sm-4-24 { width: 16.6667%; *width: 16.6357%; } .pure-u-sm-1-5 { width: 20%; *width: 19.969%; } .pure-u-sm-5-24 { width: 20.8333%; *width: 20.8023%; } .pure-u-sm-1-4, .pure-u-sm-6-24 { width: 25%; *width: 24.969%; } .pure-u-sm-7-24 { width: 29.1667%; *width: 29.1357%; } .pure-u-sm-1-3, .pure-u-sm-8-24 { width: 33.3333%; *width: 33.3023%; } .pure-u-sm-3-8, .pure-u-sm-9-24 { width: 37.5%; *width: 37.469%; } .pure-u-sm-2-5 { width: 40%; *width: 39.969%; } .pure-u-sm-5-12, .pure-u-sm-10-24 { width: 41.6667%; *width: 41.6357%; } .pure-u-sm-11-24 { width: 45.8333%; *width: 45.8023%; } .pure-u-sm-1-2, .pure-u-sm-12-24 { width: 50%; *width: 49.969%; } .pure-u-sm-13-24 { width: 54.1667%; *width: 54.1357%; } .pure-u-sm-7-12, .pure-u-sm-14-24 { width: 58.3333%; *width: 58.3023%; } .pure-u-sm-3-5 { width: 60%; *width: 59.969%; } .pure-u-sm-5-8, .pure-u-sm-15-24 { width: 62.5%; *width: 62.469%; } .pure-u-sm-2-3, .pure-u-sm-16-24 { width: 66.6667%; *width: 66.6357%; } .pure-u-sm-17-24 { width: 70.8333%; *width: 70.8023%; } .pure-u-sm-3-4, .pure-u-sm-18-24 { width: 75%; *width: 74.969%; } .pure-u-sm-19-24 { width: 79.1667%; *width: 79.1357%; } .pure-u-sm-4-5 { width: 80%; *width: 79.969%; } .pure-u-sm-5-6, .pure-u-sm-20-24 { width: 83.3333%; *width: 83.3023%; } .pure-u-sm-7-8, .pure-u-sm-21-24 { width: 87.5%; *width: 87.469%; } .pure-u-sm-11-12, .pure-u-sm-22-24 { width: 91.6667%; *width: 91.6357%; } .pure-u-sm-23-24 { width: 95.8333%; *width: 95.8023%; } .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-5-5, .pure-u-sm-24-24 { width: 100%; } } @media screen and (min-width: 48em) { .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-1-2, .pure-u-md-1-3, .pure-u-md-2-3, .pure-u-md-1-4, .pure-u-md-3-4, .pure-u-md-1-5, .pure-u-md-2-5, .pure-u-md-3-5, .pure-u-md-4-5, .pure-u-md-5-5, .pure-u-md-1-6, .pure-u-md-5-6, .pure-u-md-1-8, .pure-u-md-3-8, .pure-u-md-5-8, .pure-u-md-7-8, .pure-u-md-1-12, .pure-u-md-5-12, .pure-u-md-7-12, .pure-u-md-11-12, .pure-u-md-1-24, .pure-u-md-2-24, .pure-u-md-3-24, .pure-u-md-4-24, .pure-u-md-5-24, .pure-u-md-6-24, .pure-u-md-7-24, .pure-u-md-8-24, .pure-u-md-9-24, .pure-u-md-10-24, .pure-u-md-11-24, .pure-u-md-12-24, .pure-u-md-13-24, .pure-u-md-14-24, .pure-u-md-15-24, .pure-u-md-16-24, .pure-u-md-17-24, .pure-u-md-18-24, .pure-u-md-19-24, .pure-u-md-20-24, .pure-u-md-21-24, .pure-u-md-22-24, .pure-u-md-23-24, .pure-u-md-24-24 { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-md-1-24 { width: 4.1667%; *width: 4.1357%; } .pure-u-md-1-12, .pure-u-md-2-24 { width: 8.3333%; *width: 8.3023%; } .pure-u-md-1-8, .pure-u-md-3-24 { width: 12.5%; *width: 12.469%; } .pure-u-md-1-6, .pure-u-md-4-24 { width: 16.6667%; *width: 16.6357%; } .pure-u-md-1-5 { width: 20%; *width: 19.969%; } .pure-u-md-5-24 { width: 20.8333%; *width: 20.8023%; } .pure-u-md-1-4, .pure-u-md-6-24 { width: 25%; *width: 24.969%; } .pure-u-md-7-24 { width: 29.1667%; *width: 29.1357%; } .pure-u-md-1-3, .pure-u-md-8-24 { width: 33.3333%; *width: 33.3023%; } .pure-u-md-3-8, .pure-u-md-9-24 { width: 37.5%; *width: 37.469%; } .pure-u-md-2-5 { width: 40%; *width: 39.969%; } .pure-u-md-5-12, .pure-u-md-10-24 { width: 41.6667%; *width: 41.6357%; } .pure-u-md-11-24 { width: 45.8333%; *width: 45.8023%; } .pure-u-md-1-2, .pure-u-md-12-24 { width: 50%; *width: 49.969%; } .pure-u-md-13-24 { width: 54.1667%; *width: 54.1357%; } .pure-u-md-7-12, .pure-u-md-14-24 { width: 58.3333%; *width: 58.3023%; } .pure-u-md-3-5 { width: 60%; *width: 59.969%; } .pure-u-md-5-8, .pure-u-md-15-24 { width: 62.5%; *width: 62.469%; } .pure-u-md-2-3, .pure-u-md-16-24 { width: 66.6667%; *width: 66.6357%; } .pure-u-md-17-24 { width: 70.8333%; *width: 70.8023%; } .pure-u-md-3-4, .pure-u-md-18-24 { width: 75%; *width: 74.969%; } .pure-u-md-19-24 { width: 79.1667%; *width: 79.1357%; } .pure-u-md-4-5 { width: 80%; *width: 79.969%; } .pure-u-md-5-6, .pure-u-md-20-24 { width: 83.3333%; *width: 83.3023%; } .pure-u-md-7-8, .pure-u-md-21-24 { width: 87.5%; *width: 87.469%; } .pure-u-md-11-12, .pure-u-md-22-24 { width: 91.6667%; *width: 91.6357%; } .pure-u-md-23-24 { width: 95.8333%; *width: 95.8023%; } .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-5-5, .pure-u-md-24-24 { width: 100%; } } @media screen and (min-width: 64em) { .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-1-2, .pure-u-lg-1-3, .pure-u-lg-2-3, .pure-u-lg-1-4, .pure-u-lg-3-4, .pure-u-lg-1-5, .pure-u-lg-2-5, .pure-u-lg-3-5, .pure-u-lg-4-5, .pure-u-lg-5-5, .pure-u-lg-1-6, .pure-u-lg-5-6, .pure-u-lg-1-8, .pure-u-lg-3-8, .pure-u-lg-5-8, .pure-u-lg-7-8, .pure-u-lg-1-12, .pure-u-lg-5-12, .pure-u-lg-7-12, .pure-u-lg-11-12, .pure-u-lg-1-24, .pure-u-lg-2-24, .pure-u-lg-3-24, .pure-u-lg-4-24, .pure-u-lg-5-24, .pure-u-lg-6-24, .pure-u-lg-7-24, .pure-u-lg-8-24, .pure-u-lg-9-24, .pure-u-lg-10-24, .pure-u-lg-11-24, .pure-u-lg-12-24, .pure-u-lg-13-24, .pure-u-lg-14-24, .pure-u-lg-15-24, .pure-u-lg-16-24, .pure-u-lg-17-24, .pure-u-lg-18-24, .pure-u-lg-19-24, .pure-u-lg-20-24, .pure-u-lg-21-24, .pure-u-lg-22-24, .pure-u-lg-23-24, .pure-u-lg-24-24 { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-lg-1-24 { width: 4.1667%; *width: 4.1357%; } .pure-u-lg-1-12, .pure-u-lg-2-24 { width: 8.3333%; *width: 8.3023%; } .pure-u-lg-1-8, .pure-u-lg-3-24 { width: 12.5%; *width: 12.469%; } .pure-u-lg-1-6, .pure-u-lg-4-24 { width: 16.6667%; *width: 16.6357%; } .pure-u-lg-1-5 { width: 20%; *width: 19.969%; } .pure-u-lg-5-24 { width: 20.8333%; *width: 20.8023%; } .pure-u-lg-1-4, .pure-u-lg-6-24 { width: 25%; *width: 24.969%; } .pure-u-lg-7-24 { width: 29.1667%; *width: 29.1357%; } .pure-u-lg-1-3, .pure-u-lg-8-24 { width: 33.3333%; *width: 33.3023%; } .pure-u-lg-3-8, .pure-u-lg-9-24 { width: 37.5%; *width: 37.469%; } .pure-u-lg-2-5 { width: 40%; *width: 39.969%; } .pure-u-lg-5-12, .pure-u-lg-10-24 { width: 41.6667%; *width: 41.6357%; } .pure-u-lg-11-24 { width: 45.8333%; *width: 45.8023%; } .pure-u-lg-1-2, .pure-u-lg-12-24 { width: 50%; *width: 49.969%; } .pure-u-lg-13-24 { width: 54.1667%; *width: 54.1357%; } .pure-u-lg-7-12, .pure-u-lg-14-24 { width: 58.3333%; *width: 58.3023%; } .pure-u-lg-3-5 { width: 60%; *width: 59.969%; } .pure-u-lg-5-8, .pure-u-lg-15-24 { width: 62.5%; *width: 62.469%; } .pure-u-lg-2-3, .pure-u-lg-16-24 { width: 66.6667%; *width: 66.6357%; } .pure-u-lg-17-24 { width: 70.8333%; *width: 70.8023%; } .pure-u-lg-3-4, .pure-u-lg-18-24 { width: 75%; *width: 74.969%; } .pure-u-lg-19-24 { width: 79.1667%; *width: 79.1357%; } .pure-u-lg-4-5 { width: 80%; *width: 79.969%; } .pure-u-lg-5-6, .pure-u-lg-20-24 { width: 83.3333%; *width: 83.3023%; } .pure-u-lg-7-8, .pure-u-lg-21-24 { width: 87.5%; *width: 87.469%; } .pure-u-lg-11-12, .pure-u-lg-22-24 { width: 91.6667%; *width: 91.6357%; } .pure-u-lg-23-24 { width: 95.8333%; *width: 95.8023%; } .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-5-5, .pure-u-lg-24-24 { width: 100%; } } @media screen and (min-width: 80em) { .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-1-2, .pure-u-xl-1-3, .pure-u-xl-2-3, .pure-u-xl-1-4, .pure-u-xl-3-4, .pure-u-xl-1-5, .pure-u-xl-2-5, .pure-u-xl-3-5, .pure-u-xl-4-5, .pure-u-xl-5-5, .pure-u-xl-1-6, .pure-u-xl-5-6, .pure-u-xl-1-8, .pure-u-xl-3-8, .pure-u-xl-5-8, .pure-u-xl-7-8, .pure-u-xl-1-12, .pure-u-xl-5-12, .pure-u-xl-7-12, .pure-u-xl-11-12, .pure-u-xl-1-24, .pure-u-xl-2-24, .pure-u-xl-3-24, .pure-u-xl-4-24, .pure-u-xl-5-24, .pure-u-xl-6-24, .pure-u-xl-7-24, .pure-u-xl-8-24, .pure-u-xl-9-24, .pure-u-xl-10-24, .pure-u-xl-11-24, .pure-u-xl-12-24, .pure-u-xl-13-24, .pure-u-xl-14-24, .pure-u-xl-15-24, .pure-u-xl-16-24, .pure-u-xl-17-24, .pure-u-xl-18-24, .pure-u-xl-19-24, .pure-u-xl-20-24, .pure-u-xl-21-24, .pure-u-xl-22-24, .pure-u-xl-23-24, .pure-u-xl-24-24 { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-xl-1-24 { width: 4.1667%; *width: 4.1357%; } .pure-u-xl-1-12, .pure-u-xl-2-24 { width: 8.3333%; *width: 8.3023%; } .pure-u-xl-1-8, .pure-u-xl-3-24 { width: 12.5%; *width: 12.469%; } .pure-u-xl-1-6, .pure-u-xl-4-24 { width: 16.6667%; *width: 16.6357%; } .pure-u-xl-1-5 { width: 20%; *width: 19.969%; } .pure-u-xl-5-24 { width: 20.8333%; *width: 20.8023%; } .pure-u-xl-1-4, .pure-u-xl-6-24 { width: 25%; *width: 24.969%; } .pure-u-xl-7-24 { width: 29.1667%; *width: 29.1357%; } .pure-u-xl-1-3, .pure-u-xl-8-24 { width: 33.3333%; *width: 33.3023%; } .pure-u-xl-3-8, .pure-u-xl-9-24 { width: 37.5%; *width: 37.469%; } .pure-u-xl-2-5 { width: 40%; *width: 39.969%; } .pure-u-xl-5-12, .pure-u-xl-10-24 { width: 41.6667%; *width: 41.6357%; } .pure-u-xl-11-24 { width: 45.8333%; *width: 45.8023%; } .pure-u-xl-1-2, .pure-u-xl-12-24 { width: 50%; *width: 49.969%; } .pure-u-xl-13-24 { width: 54.1667%; *width: 54.1357%; } .pure-u-xl-7-12, .pure-u-xl-14-24 { width: 58.3333%; *width: 58.3023%; } .pure-u-xl-3-5 { width: 60%; *width: 59.969%; } .pure-u-xl-5-8, .pure-u-xl-15-24 { width: 62.5%; *width: 62.469%; } .pure-u-xl-2-3, .pure-u-xl-16-24 { width: 66.6667%; *width: 66.6357%; } .pure-u-xl-17-24 { width: 70.8333%; *width: 70.8023%; } .pure-u-xl-3-4, .pure-u-xl-18-24 { width: 75%; *width: 74.969%; } .pure-u-xl-19-24 { width: 79.1667%; *width: 79.1357%; } .pure-u-xl-4-5 { width: 80%; *width: 79.969%; } .pure-u-xl-5-6, .pure-u-xl-20-24 { width: 83.3333%; *width: 83.3023%; } .pure-u-xl-7-8, .pure-u-xl-21-24 { width: 87.5%; *width: 87.469%; } .pure-u-xl-11-12, .pure-u-xl-22-24 { width: 91.6667%; *width: 91.6357%; } .pure-u-xl-23-24 { width: 95.8333%; *width: 95.8023%; } .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-5-5, .pure-u-xl-24-24 { width: 100%; } } /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -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 { 0%, 20%, 53%, 80%, 100% { -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 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { 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 { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -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 { 0%, 100% { -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 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); } 100% { -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); } 100% { -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 { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -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); } 100% { -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 { 0% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -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); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 11.1% { -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.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes jello { 11.1% { -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.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; transform: none; } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -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); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) 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; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) 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; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) 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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) 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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -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; } 100% { -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 { 0% { -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; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -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; } 100% { -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 { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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; } 100% { -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; } 100% { -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 { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { 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 { 0% { opacity: 1; } 100% { 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 { 0% { opacity: 1; } 100% { 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 { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*! Flexible Grid System 5.4.0 | Scss Plus | MIT License | flexible.gs */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur { cursor: zoom-out; } .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader, .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } .fa { display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-ul { padding-left: 0; margin-left: 2.14286em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14286em; width: 2.14286em; top: 0.14286em; text-align: center; } .fa-li.fa-lg { left: -1.85714em; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } .inverse * { color: #fff; font-weight: 400; } .inverse h1, .inverse h2, .inverse h3, .inverse h4 { color: #fff; } .inverse a { background-image: -webkit-linear-gradient( bottom , #fff, #fff); background-image: -webkit-linear-gradient(bottom, #fff, #fff); background-image: linear-gradient(to top, #fff, #fff); color: #fff; } .inverse a:hover { color: #345f8d; text-decoration: none; } .inverse a[target]::before { color: #fff; } .inverse a[target]:hover::before { color: #345f8d; } .text-center { text-align: center; } .text-center .double-headline { font-size: 2em; } @media (min-width: 48.1em) { .text-center .double-headline { font-size: 2.67em; } } .text-right { text-align: right; } .small { font-size: 0.8em; } .big { font-size: 1.5em; } @media (min-width: 48.1em) { .huge { font-size: 3em; } } .visuallyhidden { height: 0.1px; margin: 0; padding: 0; position: absolute; overflow: hidden; visibility: hidden; width: 0.1px; } .hidden { display: none; } .nomargin { margin: 0; } .nomargin > .icon-box { margin: 0 1em; padding: 0; } .fullwidth .image_container { margin: 0; } .fullwidth img { height: auto; margin: 0; width: 100%; } .highlight { color: #81b200; } .highlight * { color: #81b200; } .inverse .highlight { color: #81b200; } .flipX { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .flipY { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .drop-cap { display: block; font-family: "Roboto", sans-serif; font-style: normal; font-size: 3.33em; font-weight: 100; float: left; line-height: .67em; margin: .13em .1em 0 0; } @-webkit-keyframes loading { 0% { background-color: #e7e7e7; } 25% { background-color: #d2d2d2; } 50% { background-color: #e7e7e7; } 75% { background-color: #d2d2d2; } 100% { background-color: #e7e7e7; } } @keyframes loading { 0% { background-color: #e7e7e7; } 25% { background-color: #d2d2d2; } 50% { background-color: #e7e7e7; } 75% { background-color: #d2d2d2; } 100% { background-color: #e7e7e7; } } @-webkit-keyframes submitted { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(10); transform: scale(10); } } @keyframes submitted { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(10); transform: scale(10); } } @-webkit-keyframes magicmouse { 0% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 25% { -webkit-transform: translate(-50%, 10%); transform: translate(-50%, 10%); } 50% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 75% { -webkit-transform: translate(-50%, -10%); transform: translate(-50%, -10%); } 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes magicmouse { 0% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 25% { -webkit-transform: translate(-50%, 10%); transform: translate(-50%, 10%); } 50% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 75% { -webkit-transform: translate(-50%, -10%); transform: translate(-50%, -10%); } 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes scaleInY { 0% { -webkit-transform: scale(1, 0); transform: scale(1, 0); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes scaleInY { 0% { -webkit-transform: scale(1, 0); transform: scale(1, 0); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes scaleInX { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes scaleInX { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } h1, h2, h3, h4, h5, h6 { color: #1a1a1a; font-weight: 700; line-height: 1; text-rendering: optimizeLegibility; } h3, h4 { line-height: 1.3em; } h1 { font-size: 1.67em; margin-top: 0; } @media (min-width: 48.1em) { h1 { font-size: 1.8em; } } h1 + h1 { margin-top: 1em; } h1 + h2 { margin-top: 0.67em; } h1 + h3 { margin-top: 0.33em; } p { margin: 0; } p + p { margin-top: 0.5em; } p a { text-decoration: underline; } p a:hover, p a:focus, p a:active { text-decoration: none; } strong { font-weight: 700; } a, ul li a { color: #345f8d; outline: none; text-decoration: underline; } a:hover, a:focus, a:active, ul li a:hover, ul li a:focus, ul li a:active { text-decoration: none; } a:focus, ul li a:focus { outline: 1px dotted #345f8d; } .icon-box a, .icon-box ul li a { background: transparent; } a[target]::before, ul li a[target]::before { color: #345f8d; float: none; font: 100%/1 "FontAwesome"; font-size: 0.8em; position: relative; } .flex-column { box-sizing: border-box; min-height: 1px; font-size: 1rem; vertical-align: middle; box-sizing: border-box; } .flex-column--25 { width: 25%; } @media (max-width: 48em) { .flex-column--25 { width: 100%; margin: 1em 0; } } .flex-column--33 { width: 33.33333%; } @media (max-width: 48em) { .flex-column--33 { width: 100%; margin: 1em 0; } } .flex-column--50 { width: 50%; } @media (max-width: 48em) { .flex-column--50 { width: 100%; margin: 1em 0; } } .flex-column--67 { width: 66.66667%; } @media (max-width: 48em) { .flex-column--67 { width: 100%; margin: 1em 0; } } .flex-column--75 { width: 75%; } @media (max-width: 48em) { .flex-column--75 { width: 100%; margin: 1em 0; } } .flex-column--100 { width: 100%; } .flex-column.vertical { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } @-webkit-keyframes sending { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(5); transform: scale(5); } } @keyframes sending { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(5); transform: scale(5); } } .pure-button, button, #cboxClose, .callme-cta a { border-radius: 0; background: #76a800; border: 1px solid #6d9b00; box-sizing: border-box; color: #fff; display: inline-block; box-shadow: none; text-shadow: none; font-family: "Roboto", sans-serif; font-size: 1rem; margin: 1em 0; padding: 0.85em 0.8em 0.85em; position: relative; text-decoration: none; -webkit-transition: all 0.25s; transition: all 0.25s; } .pure-button:hover, button:hover, #cboxClose:hover, .callme-cta a:hover, .pure-button:active, button:active, #cboxClose:active, .callme-cta a:active, .pure-button:focus, button:focus, #cboxClose:focus, .callme-cta a:focus { background: #5c7f00; border-color: #5c7f00; text-decoration: none; box-shadow: none; text-shadow: none; } .pure-button a, button a, #cboxClose a, .callme-cta a a { background: transparent; color: #fff; text-decoration: none; } .pure-button a:hover, button a:hover, #cboxClose a:hover, .callme-cta a a:hover { background-size: 0 0; text-decoration: none; } .pure-button i.fa::before, button i.fa::before, #cboxClose i.fa::before, .callme-cta a i.fa::before { letter-spacing: normal; } button:hover, button:active, button:focus { background: #5c7f00; border-color: #5c7f00; color: #fff; } button.button-submit { background: #345f8d; border: none; font-family: "Roboto", sans-serif; font-size: 1.1em; overflow: hidden; padding: 0.58em 1.33em; position: relative; margin-top: 10px; } button.button-submit i { position: relative; top: 1px; } button.button-submit:hover, button.button-submit:focus, button.button-submit:active { background-color: #6292c5; outline: none; } button.button-submit.sending::after { border: 3px solid white; border-radius: 100%; bottom: 0; content: ''; left: 33%; position: absolute; right: 33%; top: 0; -webkit-animation: sending 1s infinite; animation: sending 1s infinite; } .offer-button { border: none; font-size: 1em; font-weight: 700; text-align: center; width: 100%; } .highlight-button { background: #ff9c00; border: none; font-size: 1em; text-align: center; width: 100%; } .highlight-button:hover, .highlight-button:focus, .highlight-button:active { background-color: #ffc466; outline: none; } .accordion h3 { display: block; background: #eee; border-bottom: 1px solid #d2d2d2; } .accordion h3 a, .accordion h3 i { display: inline-block; } .accordion h3 a { width: 90%; border-bottom: none !important; } .accordion h3 a:before { display: none; } #cboxOverlay { background: #12181b; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9998; } #colorbox { box-sizing: content-box; z-index: 9999; } #cboxWrapper { border: 5px solid #fff; border-bottom: 3.67em solid #fff; } #cboxLoadedContent { overflow: hidden !important; } #cboxLoadedContent > * { height: 100% !important; } #cboxClose { border: none; border-radius: 2px; margin-top: 7px; } #cboxClose:hover { color: #12181b !important; } .colorbox { display: block; height: 100%; position: relative; line-height: 0; } .colorbox::before { content: '\f00e'; color: #fff; font-family: "FontAwesome"; font-size: 4em; font-weight: 400; left: 50%; opacity: 0; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.5s; transition: opacity 0.5s; width: 48px; z-index: 10; } .colorbox img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } .colorbox:hover::before { opacity: 1; } .colorbox:hover img { -webkit-transform: scale(1.02); transform: scale(1.02); } .double-headline { line-height: 1; } .double-headline small { color: #696969; font-family: "Roboto Slab", sans-serif; font-size: 0.67em; font-weight: 500; text-transform: none; padding-top: 24px; display: inline-block; } .inverse .double-headline small { color: #fff; } .double-headline.huge { line-height: 0.5; margin-top: 0.6em; } .double-headline.huge small { font-size: 0.33em; } @media (min-width: 20em) and (max-width: 48em) { .double-headline.huge small { font-size: 0.6em; line-height: 1.4; padding-top: 15px; } } .icon-separator { border: none; border-top: 1px solid rgba(51, 51, 51, 0.33); margin-bottom: 1.25em; width: 90%; } .icon-separator::after { background: #fff; color: #81b200; content: attr(data-icon); display: block; font-family: "FontAwesome"; margin: 0 auto; position: relative; text-align: center; top: -.75em; width: 2.4em; } section.icon-paragraph article i.fa { display: block; float: left; } section.icon-paragraph article i.fa::before { content: attr(data-icon); font-size: 2em; margin-top: -.1em; } .fa-ul li, .feature-list li { margin: 0.5em 0; } .fa-ul .fa-li, .feature-list .fa-li { color: #81b200; top: 0.25em; } .feature-list { list-style: none; } .feature-list li { position: relative; } .content-wrapper, .custom { margin: 0 auto; max-width: 68.75em; width: 100%; } body.home .content-wrapper, body.sidebar .content-wrapper, body.home .custom, body.sidebar .custom { max-width: 100%; } body.home .content-wrapper .mod_article, body.sidebar .content-wrapper .mod_article, body.home .custom .mod_article, body.sidebar .custom .mod_article { margin: 1.25em auto; max-width: 68.75em; padding: 0.3125em 0; width: 100%; } body.home .content-wrapper .mod_article.fullwidth, body.sidebar .content-wrapper .mod_article.fullwidth, body.home .custom .mod_article.fullwidth, body.sidebar .custom .mod_article.fullwidth { max-width: 100%; } body.home .content-wrapper .mod_article.fullwidth > .article-wrap, body.sidebar .content-wrapper .mod_article.fullwidth > .article-wrap, body.home .custom .mod_article.fullwidth > .article-wrap, body.sidebar .custom .mod_article.fullwidth > .article-wrap { margin: 0 auto; max-width: 68.75em; width: 100%; } body.home .content-wrapper .mod_article .column-wrap, body.sidebar .content-wrapper .mod_article .column-wrap, body.home .custom .mod_article .column-wrap, body.sidebar .custom .mod_article .column-wrap { display: block; width: 100%; font-size: 0; letter-spacing: 0; text-align: left; box-sizing: border-box; -webkit-align-items: flex-start; -ms-align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; padding-left: 0; padding-right: 0; } body.home .content-wrapper .mod_article .column-wrap > *, body.sidebar .content-wrapper .mod_article .column-wrap > *, body.home .custom .mod_article .column-wrap > *, body.sidebar .custom .mod_article .column-wrap > * { display: inline-block; } body.home .content-wrapper .mod_article .column-wrap > *, body.sidebar .content-wrapper .mod_article .column-wrap > *, body.home .custom .mod_article .column-wrap > *, body.sidebar .custom .mod_article .column-wrap > * { vertical-align: top; } body.home .content-wrapper .mod_article .column-wrap > *, body.sidebar .content-wrapper .mod_article .column-wrap > *, body.home .custom .mod_article .column-wrap > *, body.sidebar .custom .mod_article .column-wrap > * { padding-left: 16px; padding-right: 16px; } body.home .content-wrapper .mod_article .column-wrap > div, body.sidebar .content-wrapper .mod_article .column-wrap > div, body.home .custom .mod_article .column-wrap > div, body.sidebar .custom .mod_article .column-wrap > div { font-size: 1rem; } @media (max-width: 68.65em) { body.home .content-wrapper .mod_article .column-wrap, body.sidebar .content-wrapper .mod_article .column-wrap, body.home .custom .mod_article .column-wrap, body.sidebar .custom .mod_article .column-wrap { margin-left: 0; margin-right: 0; width: 100%; } } body.home .content-wrapper .mod_article.first { margin: 0.625em auto; } body.sidebar .custom { margin: 0 auto; max-width: 68.75em; } body.sidebar .custom .mod_article .column-wrap { display: block; width: 100%; font-size: 0; letter-spacing: 0; text-align: left; box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; table-layout: auto; -webkit-flex-direction: row; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: center; -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; padding-left: 0; padding-right: 0; -webkit-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; } body.sidebar .custom .mod_article .column-wrap > * { display: inline-block; } body.sidebar .custom .mod_article .column-wrap > * { display: inline-block; } body.sidebar .custom .mod_article .column-wrap > * { padding-left: 16px; padding-right: 16px; } @media (max-width: 68.65em) { body.sidebar .custom .mod_article .column-wrap { margin-left: 0; margin-right: 0; width: 100%; } } body.sidebar .custom .mod_article.first { margin: 0.625em auto; } body.sidebar .custom .mod_article.angebote .column-wrap .flex-column { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } body.sidebar .custom .mod_article.angebote .column-wrap .flex-column .offer-box { -webkit-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; -ms-grid-row-align: stretch; align-items: stretch; -ms-flex-align: stretch; } body.sidebar .content-wrapper { margin: 0 auto; max-width: 68.75em; } @media (min-width: 48.1em) { #header.fixed { background: white; left: 0; position: fixed; right: 0; top: 0; z-index: 1111; } body.home #header.fixed ~ .content-wrapper { padding-top: 180px; } body.sidebar #header.fixed ~ .custom { padding-top: 180px; } #header.fixed .page-header { margin-bottom: 0; } } .page-header { clear: both; margin: 0 auto; max-width: 68.75em; margin-bottom: 5px; } .page-header .header-column a[href$="start"] { display: block; font-size: 1rem; width: 100%; } .page-header .header-column.block-metanav { float: right; } @media (max-width: 68.65em) { .page-header .header-column.block-metanav { padding-right: 16px; } } .page-header .header-column.block-metanav .metanav a.invisible { display: none; } .page-header .header-column.block-metanav .metanav ul { margin: 0; padding: 0; } #logo { height: 100px; margin-left: -1.2em; margin-top: 0; padding-top: 1em; overflow: hidden; width: 185px; margin-bottom: 0; } @media (max-width: 68.65em) { #logo { margin-left: 1em; } } #logo svg g#image { fill: #345f8d; } #logo svg g#name { -webkit-transform: translate(0, 0); transform: translate(0, 0); } @media (min-width: 35.6em) and (max-width: 1100px) { #logo svg g#name { -webkit-transform: translate(-18px, 0); transform: translate(-18px, 0); } } @media (max-width: 35.5em) { #logo { width: 304px; height: 43px; padding-top: 0; margin: 5px 0 10px; } #logo a { width: 304px; height: 53px; display: block; } #logo svg { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); width: 304px; height: 60px; } #logo svg g#name { -webkit-transform: translate(138px, -37px); transform: translate(138px, -37px); } } #header.fixed #logo { height: 50px; margin-bottom: 0; padding-top: 1em; } #header.fixed #logo svg { position: relative; top: -55px; } #header.fixed #logo svg g#image { display: none; } #header.fixed #logo svg g#name { width: 30%; } #logo-phone { display: none; margin: 0; padding: 0.5em 0 0 0.5em; height: 58px; } #logo-phone svg { width: 100%; height: 45px; } #logo-phone svg g#image { fill: #345f8d; } @media (max-width: 35.5em) { #logo-phone { display: block; } } @media (max-width: 349px) { #logo-phone svg #name { display: none; } } #header-phone { margin-top: 2em; overflow: visible; } #header-phone p { color: #696969; font-size: 0.69em; line-height: 1; text-align: right; } #header.fixed #header-phone p { margin: 0; } #header.fixed #header-phone p span.cta { display: none; } #header-phone p a { color: #696969; text-decoration: none; } #header-phone p a:hover { text-decoration: none; } #header-phone p strong { font-size: 3.25em; font-weight: 700; } @media (max-width: 35.5em) { #header-phone { display: none; } } #header.fixed #header-phone { margin-top: 2.2em; } #header.fixed #header-phone p { line-height: 1; margin-top: -32px; font-size: 0.5em; } #phone-button { background: #345f8d; border-color: #345f8d; margin: 0; padding: 0.85em 0 0.6em; text-align: center; width: 4em; } #phone-button i.fa::before { color: white; content: '\f095'; font-family: "FontAwesome"; font-size: 1.5em; } @media (min-width: 35.6em) { #phone-button { display: none; } } /* Meta navigation */ .metanav { margin: 0 0 1.25em 0; text-align: right; } .metanav ul { margin: 0; } .metanav ul li { display: inline-block; margin-left: 1.5em; list-style-type: none; vertical-align: top; } .metanav ul li:first-child { margin-left: 0; } .metanav ul li a, .metanav ul li span { font-size: 0.875em; font-weight: 700; text-decoration: none; } .metanav ul li a:hover, .metanav ul li span:hover { text-decoration: underline; } .metanav ul li a.active, .metanav ul li span.active { color: #345f8d; text-decoration: none; } @media (max-width: 35.5em) { .metanav { display: none; } } #header.fixed .metanav { display: none; } /* Main navigation */ .mainnav { border-bottom: 5px solid #eee; border-top: 5px solid #eee; margin-bottom: 1em; position: relative; width: 100%; } #header.fixed .mainnav { margin-bottom: 0; } @media (max-width: 48em) { .mainnav { min-height: 3.7em; } } .mainnav--wrap { margin: 0 auto; max-width: 68.75em; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; position: relative; } .mainnav .mod_navigation, .mainnav .mod_customnav { overflow: visible; } @media (max-width: 35.5em) { .mainnav .mod_navigation, .mainnav .mod_customnav { padding-left: 0.6em; } } .mainnav .mod_navigation ul, .mainnav .mod_customnav ul { margin: 0; padding: 0; width: 100%; } .mainnav .mod_navigation ul li, .mainnav .mod_customnav ul li { display: inline-block; list-style-type: none; vertical-align: top; } .mainnav .mod_navigation ul li a, .mainnav .mod_navigation ul li span, .mainnav .mod_customnav ul li a, .mainnav .mod_customnav ul li span { color: #345f8d; display: block; font-size: 1.25em; font-weight: 700; padding: 0.4em 0.6em 0.5em; position: relative; text-decoration: none; -webkit-transition: color 0.25s, border 0.1s; transition: color 0.25s, border 0.1s; z-index: 2; } .mainnav .mod_navigation ul li a::after, .mainnav .mod_navigation ul li span::after, .mainnav .mod_customnav ul li a::after, .mainnav .mod_customnav ul li span::after { border-bottom: 5px solid #d2dbe4; bottom: -5px; content: ''; left: 0; position: absolute; right: 0; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: all 0.25s; transition: all 0.25s; z-index: 10; } .mainnav .mod_navigation ul li a:hover, .mainnav .mod_navigation ul li span:hover, .mainnav .mod_customnav ul li a:hover, .mainnav .mod_customnav ul li span:hover { color: #92a8be; } .mainnav .mod_navigation ul li a:hover::after, .mainnav .mod_navigation ul li span:hover::after, .mainnav .mod_customnav ul li a:hover::after, .mainnav .mod_customnav ul li span:hover::after { -webkit-transform: scale(1); transform: scale(1); } .mainnav .mod_navigation ul li a.active, .mainnav .mod_navigation ul li span.active, .mainnav .mod_customnav ul li a.active, .mainnav .mod_customnav ul li span.active { color: #345f8d; } .mainnav .mod_navigation ul li a.active::after, .mainnav .mod_navigation ul li span.active::after, .mainnav .mod_customnav ul li a.active::after, .mainnav .mod_customnav ul li span.active::after { border-bottom-color: #345f8d; } .mainnav .mod_navigation ul li a.no-link, .mainnav .mod_navigation ul li span.no-link, .mainnav .mod_customnav ul li a.no-link, .mainnav .mod_customnav ul li span.no-link { cursor: default; } .mainnav .mod_navigation ul li a.active, .mainnav .mod_navigation ul li span.active, .mainnav .mod_customnav ul li a.active, .mainnav .mod_customnav ul li span.active { color: #92a8be; } .mainnav .mod_navigation ul li a.active::after, .mainnav .mod_navigation ul li span.active::after, .mainnav .mod_customnav ul li a.active::after, .mainnav .mod_customnav ul li span.active::after { -webkit-transform: scale(1); transform: scale(1); } .mainnav .mod_navigation ul li a.trail, .mainnav .mod_customnav ul li a.trail { color: #345f8d; } .mainnav .mod_navigation ul li a.trail::after, .mainnav .mod_customnav ul li a.trail::after { border-bottom-color: #345f8d; -webkit-transform: scale(1); transform: scale(1); } @media (min-width: 64em) { .mainnav .mod_navigation ul li.first a, .mainnav .mod_navigation ul li.first span, .mainnav .mod_customnav ul li.first a, .mainnav .mod_customnav ul li.first span { padding-left: 0; } } @media (min-width: 64em) { .mainnav .mod_navigation ul li.last a, .mainnav .mod_navigation ul li.last span, .mainnav .mod_customnav ul li.last a, .mainnav .mod_customnav ul li.last span { padding-right: 0; } } .mainnav .mod_navigation ul.level_2 li a.first, .mainnav .mod_navigation ul.level_2 li span.first, .mainnav .mod_customnav ul.level_2 li a.first, .mainnav .mod_customnav ul.level_2 li span.first { padding-right: 0.6em; } @media (max-width: 48em) { .mainnav .mainnav--wrap > .mod_navigation { display: none; } } @media (max-width: 68.65em) { .mainnav .mod_customnav { display: none; } } .mainnav .mod_customnav ul li a, .mainnav .mod_customnav ul li span { font-weight: 400; } .mainnav .mod_customnav ul li.faq a, .mainnav .mod_customnav ul li.faq span { font-weight: 700; } .mainnav .megamenu--wrap .mod_customnav { display: block; } .mainnav .nav-explanation { display: none; } @media (min-width: 570px) and (max-width: 48em) { .mainnav .nav-explanation { display: block; padding-left: 1em; padding-top: 0.69em; } .mainnav .nav-explanation p { font-weight: 700; } .mainnav .nav-explanation p:after { font-family: "FontAwesome"; content: '\f061'; margin-left: 7px; color: #345f8d; } } @media (max-width: 68.65em) { .mainnav .mod_navigation:not(.nav-responsive) li a.first { padding-left: 16px; } } /* The (in)famous Mega Menu */ .megamenu--wrap { display: block; margin: 0 auto; max-width: 68.75em; position: relative; width: 100%; } .mega-menu { background: #eee; border: 5px solid #8aa1ba; display: block; width: 100%; font-size: 0; letter-spacing: 0; text-align: left; box-sizing: border-box; -webkit-align-items: flex-start; -ms-align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; font-size: 0.75em; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding-left: 0; padding-right: 0; display: none; left: 0; margin-left: 0; margin-right: 0; height: 0; position: absolute; overflow: visible; right: 0; top: 100%; width: 100%; z-index: 9999; } .mega-menu > * { display: inline-block; } .mega-menu > * { vertical-align: top; } .mega-menu > * { padding-left: 20px; padding-right: 20px; } .mega-menu.visible { -webkit-animation: fadeIn 0.25s; animation: fadeIn 0.25s; display: block; height: auto; } .mega-menu .flex-column { border-right: 2px solid #f2f5f7; margin: 1em 0; } .mega-menu .flex-column h2 { font-family: "Roboto Slab", sans-serif; font-size: 1.25em; margin-bottom: 0.33em; margin-top: 0; } .mega-menu .flex-column h2 a { color: #345f8d; text-decoration: underline; } .mega-menu .flex-column h2 a:hover { text-decoration: none; } .mega-menu .flex-column h2 + h2 { margin-top: 0.5em; } .mega-menu .flex-column h2 + p { margin-top: 1em; } .mega-menu .flex-column nav ul { line-height: 1.5; list-style-type: none; padding: 0; margin: 0.5em 0; } .mega-menu .flex-column nav ul li { margin: 0.33em 0; width: 95%; } .mega-menu .flex-column nav ul li a, .mega-menu .flex-column nav ul li span { display: inline-block; font-size: 1em; max-width: 90%; padding: 0; vertical-align: top; } .mega-menu .flex-column nav ul li a:hover, .mega-menu .flex-column nav ul li a.active, .mega-menu .flex-column nav ul li span:hover, .mega-menu .flex-column nav ul li span.active { color: #345f8d; text-decoration: underline; } .mega-menu .flex-column nav ul li a::after, .mega-menu .flex-column nav ul li span::after { display: none; } .mega-menu .flex-column nav ul li::before { color: #345f8d; content: '\f054'; display: inline-block; font-family: "FontAwesome"; font-size: 0.6875em; padding-right: 0.5em; position: relative; top: 5px; vertical-align: top; } .mega-menu .flex-column:last-child { border-right: none; padding-right: 0; } .mega-menu .flex-column.image { margin: 0; padding: 0; } .mega-menu .flex-column.image .image_container { line-height: 0; margin: 0; } .mega-menu .flex-column.no-border { border: none; } /* The menu toggler + the responsive navigation */ #navtoggle { display: none; } #navtoggle + label { background: #345f8d; cursor: pointer; display: inline-block; padding: 0.9em 1em 0.6em 1.1em; position: absolute; right: 0; top: 0; line-height: 1.65; } #navtoggle + label i { position: relative; top: -1px; } #navtoggle + label i::before { color: white; content: '\f067'; font-family: "FontAwesome"; font-size: 1.125em; } #navtoggle + label::after { border-bottom: 6px solid #8aa1ba; content: ''; display: block; position: absolute; right: 0; top: 100%; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transition: all .33s; transition: all .33s; width: 100vw; z-index: 11; } @media (max-width: 48em) { #navtoggle + label { line-height: 1.3; padding: 1em 1em 0.8em; } #navtoggle + label::before { color: white; content: 'Menü'; padding-right: 1em; position: relative; top: -2px; } html[lang="en"] #navtoggle + label::before { content: 'Menu'; } } @media (min-width: 48em) { #navtoggle + label { display: none; } } #navtoggle:checked + label i::before { content: '\f068'; } #navtoggle:checked + label::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } @media (max-width: 48em) { #navtoggle:checked + label::before { content: 'Schließen'; } html[lang="en"] #navtoggle:checked + label::before { content: 'Close'; } } #navtoggle:checked ~ .nav-mobile { pointer-events: all; -webkit-transform: scale(1, 1); transform: scale(1, 1); } #navtoggle ~ .nav-mobile { pointer-events: none; position: absolute; -webkit-transition: all .4s; transition: all .4s; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; z-index: 10; } .nav-mobile { border-bottom: 2px solid #d2dbe4; margin-top: 4px; box-sizing: border-box; top: calc(100% + 3px); width: 100vw; margin-left: 0; padding-left: 0; } @media (max-width: 35.5em) { .nav-mobile { top: calc(3em + 3px); } } .nav-mobile .menu-item.last a { border-bottom-width: 4px; } .nav-mobile .menu-item:last-child a { border-bottom: none; } .nav-mobile a { background: white; border-bottom: 2px solid #d2dbe4; font-family: "Roboto Slab", sans-serif; font-size: 1em; margin: 0; padding: 0; position: relative; width: 100%; text-align: right; padding-right: 3.75em; display: block; padding: 0.9em; text-decoration: none; } .nav-mobile a:hover { background: #345f8d; color: #fff; } /* Responsive toggle menus */ .nav-responsive { box-sizing: border-box; height: auto; overflow: hidden; overflow-y: visible; pointer-events: none; position: relative; width: 100%; } .nav-responsive > ul { margin: 0; } .nav-responsive * { box-sizing: border-box; } .nav-responsive ul { border: 2px solid #d2dbe4; font-size: 0.875em; list-style-type: none; padding: 0; pointer-events: all; width: 100%; } .nav-responsive ul li { width: 100%; } .nav-responsive ul li a, .nav-responsive ul li span { background: white; display: block; border-bottom: 2px solid #d2dbe4; padding: 0.5em; text-decoration: none; } .nav-responsive ul li a.submenu, .nav-responsive ul li span.submenu { padding-right: 48px; } .nav-responsive ul li a.last, .nav-responsive ul li span.last { border-bottom: none; } .nav-responsive ul li ul { font-size: 0.875em; left: -2px; pointer-events: none; position: absolute; right: -2px; top: calc(100% - 2px); -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition: all .4s; transition: all .4s; width: auto !important; z-index: 4; } .nav-responsive ul li ul > li:first-child a { padding-right: 48px; } .nav-responsive ul li ul li a { background: #f2f2f2; } .nav-responsive > ul > li { position: relative; } .nav-responsive .nav-checkbox { display: none; } .nav-responsive .nav-checkbox:checked + .nav-label { left: 0; z-index: 3; } .nav-responsive .nav-checkbox:checked + .nav-label i::before { content: '\f068'; } .nav-responsive .nav-checkbox:checked + .nav-label::before { color: white; content: 'Zurück'; font-size: 0.9em; padding-right: 0.5em; position: relative; top: -3px; } .nav-responsive .nav-checkbox:checked ~ ul { pointer-events: all; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .nav-responsive .nav-label { background: #345f8d; bottom: 2px; cursor: pointer; padding: 0.5em 0.6em 0 0; position: absolute; right: 0; text-align: right; -webkit-transition: width 0.5s; transition: width 0.5s; top: 0; width: 2rem; z-index: 2; } @media (max-width: 64em) { .nav-responsive .nav-label { padding: 0.6em 0.6em 0 0; } } .nav-responsive .nav-label i::before { color: white; content: '\f067'; font-family: "FontAwesome"; } /* BREADCRUMBS */ .mod_breadcrumb { text-align: left; } @media (max-width: 68.65em) { .mod_breadcrumb { padding-left: 1em; } } .mod_breadcrumb ul { font-size: 0.875em; list-style-type: none; margin: 0; padding: 0; } .mod_breadcrumb ul li { color: #939292; font-weight: 700; display: inline-block; margin-left: 0.5em; vertical-align: top; } .mod_breadcrumb ul li::before { color: #939292; float: none; font: 100%/1 "FontAwesome"; font-size: 0.75em; position: relative; } .mod_breadcrumb ul li:first-child { margin-left: 0; } .mod_breadcrumb ul li:first-child::before { display: none; } .mod_breadcrumb ul li::before { content: '\f054'; padding-right: 0.67em; } .mod_breadcrumb ul li a { color: #939292; text-decoration: none; } .mod_breadcrumb ul li a:hover { text-decoration: underline; } body { position: relative; border-top: 5px solid #345f8d; box-sizing: border-box; line-height: 1.618; } body * { box-sizing: border-box; } ol { padding-left: 2em; } ol li { margin: 0.75em 0; padding-left: 0.75em; } @media (max-width: 68.65em) { #wrapper { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100vw; } } #container { display: block; width: 100%; font-size: 0; letter-spacing: 0; text-align: left; box-sizing: border-box; -webkit-align-items: flex-start; -ms-align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } #container > * { display: inline-block; } #container > * { vertical-align: top; } body.sidebar #container { box-sizing: border-box; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; padding-left: 0; padding-right: 0; } body.sidebar #container > * { padding-left: 16px; padding-right: 16px; } @media (max-width: 68.65em) { body.sidebar #container { margin-left: 0; margin-right: 0; width: 100%; } } #main, #left, #right { clear: both; float: none; } #main { box-sizing: border-box; min-height: 1px; font-size: 1rem; vertical-align: middle; box-sizing: border-box; width: 100%; font-size: 1rem; margin: 0; min-height: 200px; } body.sidebar #main { width: 66.66667%; } body.sidebar-both #main { width: 50%; } @media (max-width: 48em) { #main { width: 100%; } body.sidebar #main, body.sidebar-both #main { width: 100%; } } #right { box-sizing: border-box; min-height: 1px; font-size: 1rem; vertical-align: middle; box-sizing: border-box; width: 33.33333%; margin: 0; min-height: 200px; vertical-align: top; } #right * { box-sizing: border-box; } @media (max-width: 48em) { #right { width: 100%; padding: 0 0.625em; } } #footer { background: #eee; margin-top: 1.875em; padding-top: 3em; } body.home #footer { margin-top: 0; } body.withoutnavandfooter header { border-bottom: 5px solid #eee; } body.withoutnavandfooter .mod_breadcrumb { display: none; } body.withoutnavandfooter #footer { margin-top: 0; padding-top: 0; } body.withoutnavandfooter #header.fixed { height: 50px; z-index: 999 !important; } body.withoutnavandfooter #header.fixed #logo { padding-top: 0.8em; } body.withoutnavandfooter #header.fixed #logo svg { position: relative; top: -55px; } body.withoutnavandfooter #header.fixed #logo svg g#image { display: none; } body.withoutnavandfooter #header.fixed #logo svg g#name { width: 30%; } @media (min-width: 48.1em) { body.withoutnavandfooter #header.fixed { background: white; left: 0; position: fixed; right: 0; top: 0; z-index: 1111; } body.withoutnavandfooter #header.fixed ~ .content-wrapper { padding-top: 0px; } body.withoutnavandfooter #header.fixed ~ .custom { padding-top: 110px !important; } body.withoutnavandfooter #header.fixed .page-header { margin-bottom: 0; } } .ssl-zertifikat-footer { display: none; position: fixed; cursor: pointer; bottom: 10px; right: 0; padding: 10px 10px 5px; box-shadow: 0 0 10px rgba(51, 51, 51, 0.25); -webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 0.25); -moz-box-shadow: 0 0 10px rgba(51, 51, 51, 0.25); -ms-box-shadow: 0 0 10px rgba(51, 51, 51, 0.25); -o-box-shadow: 0 0 10px rgba(51, 51, 51, 0.25); background-color: #ededec; background-image: -webkit-linear-gradient(top, #ededec 0%, #ffffff 40%, #ffffff 50%, #ffffff 60%, #ededec 100%); background-image: -webkit-linear-gradient(top,#ededec 0%, #ffffff 40%, #ffffff 50%, #ffffff 60%, #ededec 100%); background-image: linear-gradient(to bottom,#ededec 0%, #ffffff 40%, #ffffff 50%, #ffffff 60%, #ededec 100%); border: 1px solid #dfdfde; } @media (min-width: 64.1em) { .ssl-zertifikat-footer { display: block; } } .ssl-zertifikat-footer .reviewBadgeTitle { background-image: url(../img/ssl.png); background-repeat: no-repeat; background-size: 80px 80px; width: 80px; height: 80px; margin: 0 auto; margin-bottom: 0px; } .ssl-zertifikat-footer .note { border-top: 1px solid #d2d2d2; padding-top: 5px; margin-top: 10px; } .ssl-zertifikat-footer .note p { text-align: center; font-size: 0.8em; line-height: 1.4; } .ssl-zertifikat-hover { position: fixed; right: 20px; bottom: 180px; box-shadow: 0 0 10px rgba(51, 51, 51, 0.55); -webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 0.55); -moz-box-shadow: 0 0 10px rgba(51, 51, 51, 0.55); -ms-box-shadow: 0 0 10px rgba(51, 51, 51, 0.55); -o-box-shadow: 0 0 10px rgba(51, 51, 51, 0.55); border: 1px solid #d3d4d3; background-color: white; width: 500px; cursor: default; } .ssl-zertifikat-hover .header { background: #f3f3f3; border-bottom: 1px solid #d3d4d3; height: 60px; } .ssl-zertifikat-hover .header .logo { background-image: url("../img/ssl.png"); background-repeat: no-repeat; background-size: 50px 50px; display: inline-block; height: 50px; left: 10px; position: absolute; top: 5px; width: 50px; } .ssl-zertifikat-hover .header .inside { padding: 11px 10px 5px; margin-left: 60px; } .ssl-zertifikat-hover .header .inside p { font-size: 1.1em; font-weight: 700; line-height: 1; color: black; cursor: text; } .ssl-zertifikat-hover .header .inside p.sub { font-size: 0.8em; font-weight: 500; } .ssl-zertifikat-hover .bodyssl .inside { padding: 5px 10px; } .ssl-zertifikat-hover .bodyssl .inside h2 { margin-top: 10px; margin-bottom: 10px; font-size: 1.3em; cursor: text; } .ssl-zertifikat-hover .bodyssl .inside p { cursor: text; } .ssl-zertifikat-hover .bodyssl .inside figure { margin: 15px 0 7px; } .ssl-zertifikat-hover .bodyssl .inside figcaption { font-size: 0.7em; } .ssl-zertifikat-hover .footerssl { background: #f3f3f3; border-top: 1px solid #d3d4d3; } .ssl-zertifikat-hover .footerssl .inside { padding: 5px 10px; } .ssl-zertifikat-hover .footerssl .inside p { font-size: 0.8em; line-height: 1.4; cursor: text; } .ssl-zertifikat-hover::before { border-color: #bbbbbb transparent; -o-border-image: none; border-image: none; border-style: solid; border-width: 12px 12px 0px; content: ""; right: 18px; position: absolute; bottom: -13px; z-index: 99; } .ssl-zertifikat-hover::after { border-color: #f3f3f3 transparent; -o-border-image: none; border-image: none; border-style: solid; border-width: 12px 12px 0px; content: ""; right: 18px; position: absolute; bottom: -12px; z-index: 99; } /*.ssl-zertifikat-footer:hover + .ssl-zertifikat-hover, .ssl-zertifikat-hover:hover { display: block; opacity: 1; }*/ .ssl-zertifikat-phone { background: #ffda00; padding-left: 16px; padding-right: 16px; height: 65px; position: fixed; left: 0; bottom: 0; z-index: 500; display: none; width: 100%; } @media (min-width: 20em) and (max-width: 64em) { .ssl-zertifikat-phone { display: block; } } .ssl-zertifikat-phone .reviewBadgeTitle { display: inline-block; position: absolute; left: 16px; top: 7px; background-image: url(../img/ssl.png); background-repeat: no-repeat; background-size: 50px 50px; width: 50px; height: 50px; } .ssl-zertifikat-phone .note { display: inline-block; padding-top: 15px; margin-left: 60px; } .ssl-zertifikat-phone .note p { font-size: 1.1em; line-height: 1; font-weight: 700; color: black; } .ssl-zertifikat-phone .note p.sub { font-size: 0.8em; font-weight: 500; } .ssl-zertifikat-phone .blockclose { display: inline-block; position: absolute; right: 16px; border-left: 1px solid black; padding-left: 10px; margin-top: 15px; text-decoration: none; } .ssl-zertifikat-phone .blockclose span::before { color: black; content: '\f00d'; font-family: "FontAwesome"; font-size: 1.5em; } /** start section slideupbanner **/ .slideupbanner { border: 2px solid rgba(0, 0, 0, 0.25); box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.35); width: 100%; display: none; z-index: 1337; /** responsive width go in here **/ /** end responsive width definition **/ position: fixed; bottom: 0; left: 0; background: #fff; } @media (min-width: 48.1em) { .slideupbanner { width: 300px; } } .slideupbanner .header { padding: 0; } .slideupbanner .header .panel { position: relative; background: #eee; padding-left: 1em; border-bottom: 1px solid #d3d4d3; } .slideupbanner .header .panel h2.windowtitle { font-size: 1em; line-height: 1; margin: 0; padding: 15px 0 13px; } .slideupbanner .header .panel .controls a { position: absolute; top: 0; right: 0; text-decoration: none; padding: 9px 15px 11px; background: #345f8d; color: white; font-size: 1em; vertical-align: top; } .slideupbanner .header .panel .controls a:hover, .slideupbanner .header .panel .controls a:focus, .slideupbanner .header .panel .controls a:active { text-decoration: none; border: none; } .slideupbanner .header .panel .controls a .minimize { vertical-align: middle; } .slideupbanner .body { padding: 0.5em 1em 0.1em 1em; } .slideupbanner .body h2 { font-size: 1em; line-height: 1.4; } .slideupbanner .body p { font-size: 0.9em; } /** end section slideupbanenr **/ #main .mod_newslist h1, #main .mod_newsarchive h1 { margin-top: 20px; color: black; } #main .mod_newslist .layout_latest, #main .mod_newsarchive .layout_latest { border-bottom: 1px solid #d2d2d2; margin-bottom: 20px; } #main .mod_newslist .layout_latest:first-child, #main .mod_newsarchive .layout_latest:first-child { margin-top: 18px; } #main .mod_newslist .layout_latest .meta, #main .mod_newsarchive .layout_latest .meta { line-height: 1; display: inline-block; } #main .mod_newslist .layout_latest .meta span, #main .mod_newsarchive .layout_latest .meta span { color: #696969; font-size: 1.2em; } #main .mod_newslist .layout_latest figure, #main .mod_newsarchive .layout_latest figure { margin: 0; } #main .mod_newslist .layout_latest figure.alignleft, #main .mod_newsarchive .layout_latest figure.alignleft { margin-right: 1.5em; } #main .mod_newslist .layout_latest figure.alignleft figcaption.wp-caption-text, #main .mod_newsarchive .layout_latest figure.alignleft figcaption.wp-caption-text { text-align: left; } #main .mod_newslist .layout_latest figcaption.wp-caption-text, #main .mod_newsarchive .layout_latest figcaption.wp-caption-text { font-size: 0.8em; font-style: italic; } #main .mod_newslist .layout_latest h2.prehmh2, #main .mod_newsarchive .layout_latest h2.prehmh2 { font-size: 1.2em; line-height: 1.4; display: inline; } #main .mod_newslist .layout_latest a, #main .mod_newsarchive .layout_latest a { text-decoration: none; } #main .mod_newslist .layout_latest a:hover, #main .mod_newsarchive .layout_latest a:hover { text-decoration: underline; } #main .mod_newslist .layout_latest .entry-meta .byline, #main .mod_newsarchive .layout_latest .entry-meta .byline { display: none; } #main .mod_newslist .layout_latest .entry-header a h2, #main .mod_newsarchive .layout_latest .entry-header a h2 { text-decoration: none; margin: 2px 0 3px; line-height: 1.2; } #main .mod_newslist .layout_latest .entry-header a h2:hover, #main .mod_newsarchive .layout_latest .entry-header a h2:hover { text-decoration: underline; } #main .mod_newslist .layout_latest .entry-header h1, #main .mod_newsarchive .layout_latest .entry-header h1 { margin-bottom: 5px; } #main .mod_newslist .layout_latest .entry-content a, #main .mod_newsarchive .layout_latest .entry-content a { text-decoration: underline; } #main .mod_newslist .layout_latest .entry-content a:hover, #main .mod_newsarchive .layout_latest .entry-content a:hover { text-decoration: none; } #main .mod_newslist .layout_latest .more, #main .mod_newsarchive .layout_latest .more { margin-top: 10px; } #main .mod_newslist .layout_latest .more a, #main .mod_newsarchive .layout_latest .more a { text-decoration: underline; } #main .mod_newslist .layout_latest .more a:hover, #main .mod_newsarchive .layout_latest .more a:hover { text-decoration: none; } #main .mod_newslist .layout_latest .more-link, #main .mod_newsarchive .layout_latest .more-link { text-decoration: underline; font-size: 1.2em; } #main .mod_newslist .layout_latest .more-link:hover, #main .mod_newsarchive .layout_latest .more-link:hover { text-decoration: none; } #main .mod_newslist .layout_latest .entry-footer, #main .mod_newsarchive .layout_latest .entry-footer { margin-top: 10px; font-size: 0.8em; } #main .mod_newslist .layout_latest .entry-footer .post-ratings, #main .mod_newsarchive .layout_latest .entry-footer .post-ratings { height: 40px; } #main .mod_newslist .layout_latest .entry-footer .cat-links, #main .mod_newsarchive .layout_latest .entry-footer .cat-links { float: left; margin-right: 10px; border-right: 1px solid #b9b8b8; padding-right: 10px; line-height: 2; } #main .mod_newslist .layout_latest .entry-footer .tags-links span, #main .mod_newsarchive .layout_latest .entry-footer .tags-links span { float: left; line-height: 2; } #main .mod_newslist .layout_latest .entry-footer .tags-links ul, #main .mod_newsarchive .layout_latest .entry-footer .tags-links ul { list-style: none; margin-left: 0; padding-left: 0; } #main .mod_newslist .layout_latest .entry-footer .tags-links ul li, #main .mod_newsarchive .layout_latest .entry-footer .tags-links ul li { display: inline-block; } #main .mod_newslist .layout_latest .entry-footer .tags-links ul li a, #main .mod_newsarchive .layout_latest .entry-footer .tags-links ul li a { background: #ececec; padding: 2px 5px; border-radius: 5px; color: #333; line-height: 2; } #main .mod_newslist .layout_latest .entry-footer .tags-links ul li a:first-child, #main .mod_newsarchive .layout_latest .entry-footer .tags-links ul li a:first-child { margin-left: 5px; } #main .mod_newslist .layout_latest .entry-footer .tags-links ul li a:hover, #main .mod_newsarchive .layout_latest .entry-footer .tags-links ul li a:hover { background: #d2d2d2; text-decoration: none; } #main .mod_newslist .post-navigation, #main .mod_newsarchive .post-navigation { margin-bottom: 30px; } #main .mod_newslist .post-navigation .nav-links .nav-previous, #main .mod_newsarchive .post-navigation .nav-links .nav-previous { display: inline-block; float: none; } #main .mod_newslist .post-navigation .nav-links .nav-next, #main .mod_newsarchive .post-navigation .nav-links .nav-next { display: inline-block; } #main .mod_newsreader .layout_full { border-bottom: 1px solid #d2d2d2; padding-bottom: 20px; margin-bottom: 20px; } #main .mod_newsreader .layout_full .meta { line-height: 1; display: inline-block; } #main .mod_newsreader .layout_full .meta span { color: #696969; font-size: 1.2em; } #main .mod_newsreader .layout_full h1 { margin: 0px 0 0px; line-height: 1.2; text-decoration: none; } #main .mod_newsreader .layout_full h1 span { color: #76a800; } .mod_newsmenu ul { margin: 0; padding: 0; border: 1px solid #d2d2d2; } .mod_newsmenu ul li { list-style-type: none; } .mod_newsmenu ul li a, .mod_newsmenu ul li span { display: block; background: #eee; padding: 15px 10px 15px 17px; border-bottom: 1px solid #d2d2d2; font-size: 1em; line-height: 1; font-weight: 700; text-decoration: none; margin: 0; } .mod_newsmenu ul li a:hover, .mod_newsmenu ul li span:hover { background: #e1e1e1; color: #345f8d; } .mod_newsmenu ul li a::before, .mod_newsmenu ul li span::before { color: #345f8d; content: '\f105'; font-family: "FontAwesome"; font-size: 1em; padding-right: 14px; } .mod_newsmenu ul li h3 { clear: left; margin: 0; margin-bottom: 1px; } .mod_newsmenu ul li h3 a { width: 100%; display: block; padding-left: 45px; } .mod_newsmenu ul li h3 i { float: left; background: #e1e1e1; padding: 15px 8px 11px 10px; color: #345f8d; line-height: 1.2; cursor: pointer; } .mod_newsmenu ul li h3 i:hover { background: #d5d5d5; } .mod_newsmenu ul li span { background: #345f8d; color: white; } .mod_newsmenu ul li span:hover { background: #345f8d; } .mod_newsmenu ul li span::before { color: white; } .mod_newsmenu ul li.last a, .mod_newsmenu ul li.last span { border-bottom: none; } .mod_newsmenu ul li ul { border: none; } .mod_newsmenu ul li:last-child h3 { margin-bottom: 0; border-bottom: 0; } .pagination p { float: right; margin: 0; padding-top: 20px; display: none; } @media (min-width: 35.6em) { .pagination p { display: block; } } .pagination ul { list-style: none; text-align: left; padding: 0; margin: 0; } .pagination ul li { display: inline-block; height: auto; margin-right: 5px; margin-top: 10px; } .pagination ul li a, .pagination ul li span { background: #eee; display: block; padding: 10px 20px; text-decoration: none; font-weight: 700; } .pagination ul li a:hover, .pagination ul li span:hover { background: #e1e1e1; } .pagination ul li span { background: #345f8d; color: white; } .pagination ul li span:hover { background: #345f8d; color: white; } :-moz-ui-invalid:not(output) { box-shadow: none; } main section h1.angebot { display: block; line-height: 1.2; margin-bottom: 0; } main section h1.angebot span { display: block; font-size: 0.7em; font-weight: 500; line-height: 1.2; } .ce_form span.error { font-size: .9em; position: absolute; top: 53px; left: -5px; color: red; border: 1px solid white; padding: 0.4em 0.7em 0.3em; background: white; z-index: 98; overflow: visible; display: block; box-shadow: rgba(0, 0, 0, 0.3) 0 2px 8px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 8px); filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 8px); } .ce_form span.error:before { border: solid; border-color: white transparent; border-width: 0 12px 12px 12px; top: -12px; content: ""; left: 11px; position: absolute; z-index: 99; } .ce_form p { box-sizing: border-box; position: relative; width: 100%; display: inline-block; width: 99%; margin-top: 0.4em; display: block; padding: 1em 1.65em 0em 2em; margin: 0; } .ce_form p input[type="color"], .ce_form p input[type="date"], .ce_form p input[type="datetime"], .ce_form p input[type="datetime-local"], .ce_form p input[type="email"], .ce_form p input[type="month"], .ce_form p input[type="number"], .ce_form p input[type="password"], .ce_form p input[type="search"], .ce_form p input[type="tel"], .ce_form p input[type="text"], .ce_form p input[type="time"], .ce_form p input[type="url"], .ce_form p input[type="week"], .ce_form p input:not([type]), .ce_form p textarea { border: 1px solid #c6c5c5; box-sizing: border-box; border-radius: 0; font-size: 1em; width: 100%; padding: 15px; -webkit-appearance: none; -moz-appearance: none; } .ce_form p input[type="color"]:focus, .ce_form p input[type="date"]:focus, .ce_form p input[type="datetime"]:focus, .ce_form p input[type="datetime-local"]:focus, .ce_form p input[type="email"]:focus, .ce_form p input[type="month"]:focus, .ce_form p input[type="number"]:focus, .ce_form p input[type="password"]:focus, .ce_form p input[type="search"]:focus, .ce_form p input[type="tel"]:focus, .ce_form p input[type="text"]:focus, .ce_form p input[type="time"]:focus, .ce_form p input[type="url"]:focus, .ce_form p input[type="week"]:focus, .ce_form p input:not([type]):focus, .ce_form p textarea:focus { border: 1px solid #345f8d; outline: none; } .ce_form p input[type="color"].isvalid, .ce_form p input[type="date"].isvalid, .ce_form p input[type="datetime"].isvalid, .ce_form p input[type="datetime-local"].isvalid, .ce_form p input[type="email"].isvalid, .ce_form p input[type="month"].isvalid, .ce_form p input[type="number"].isvalid, .ce_form p input[type="password"].isvalid, .ce_form p input[type="search"].isvalid, .ce_form p input[type="tel"].isvalid, .ce_form p input[type="text"].isvalid, .ce_form p input[type="time"].isvalid, .ce_form p input[type="url"].isvalid, .ce_form p input[type="week"].isvalid, .ce_form p input:not([type]).isvalid, .ce_form p textarea.isvalid { border-color: #76a800 !important; } .ce_form p input[type="color"].error, .ce_form p input[type="date"].error, .ce_form p input[type="datetime"].error, .ce_form p input[type="datetime-local"].error, .ce_form p input[type="email"].error, .ce_form p input[type="month"].error, .ce_form p input[type="number"].error, .ce_form p input[type="password"].error, .ce_form p input[type="search"].error, .ce_form p input[type="tel"].error, .ce_form p input[type="text"].error, .ce_form p input[type="time"].error, .ce_form p input[type="url"].error, .ce_form p input[type="week"].error, .ce_form p input:not([type]).error, .ce_form p textarea.error { border-color: red !important; } .ce_form p label { color: #939292; /*@include transition(all 0.2s ease-in-out);*/ width: 100%; /*padding: 12px;*/ left: 12px; top: 11px; z-index: 1; } .ce_form p label.active { color: #345f8d; padding-bottom: 0px; } .ce_form p input, .ce_form p textarea { box-shadow: none !important; } .ce_form p .text, .ce_form p .textarea { border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; width: 100%; } .ce_form button[type="submit"] { overflow: hidden; font-size: 1.4em; } .ce_form button[type="submit"] i { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 1s cubic-bezier(0.33, 0, 1, 0.33); transition: all 1s cubic-bezier(0.33, 0, 1, 0.33); } .ce_form button[type="submit"]:hover i { -webkit-transform: translate(200%, -175%); transform: translate(200%, -175%); } @media (max-width: 35.5em) { .ce_form { font-size: 0.85em; } } .ce_form h3 { background: #345f8d; border-left: 1px solid #345f8d; border-right: 1px solid #345f8d; border-top: 1px solid #345f8d; color: white; cursor: pointer; display: block; padding: 0.5em 0.5em 0.5em 2em; margin: 0.5em -1px 0 -1px; width: calc(100% + 2px); border-bottom: none; cursor: default; } .ce_form h3::before { content: '\f05a'; font-family: "FontAwesome"; padding-right: 0.33em; position: relative; top: 1px; } .ce_form form { border: 1px solid #c0c0c0; border-top: 0; margin-top: 0em; padding-bottom: 0; width: calc(100% - 1px); padding: 0; background: #eee; } /** end form **/ #comments h3.reply-title { clear: both; } html.js .fancy-form .widget-text label, html.js .fancy-form .widget-textarea label { pointer-events: none; position: absolute; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 0.5s; transition: all 0.5s; } html.js .fancy-form .widget-text label.active, html.js .fancy-form .widget-textarea label.active { -webkit-transform: translate(-12px, -145%) scale(0.75); transform: translate(-12px, -145%) scale(0.75); -webkit-transform-origin: left bottom 0; transform-origin: left bottom 0; } html.js .fancy-form .widget-text[class*="widget--"] label, html.js .fancy-form .widget-textarea[class*="widget--"] label { top: 7px; } .footer-inner { background: white; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; table-layout: auto; -webkit-flex-direction: row; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: center; -ms-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-align-items: flex-start; -ms-align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc(100% + 60px); margin-left: -30px; margin-right: -30px; padding-left: 0; padding-right: 0; margin: 0 auto; margin-bottom: 3em; max-width: 68.75em; padding: 1.5em 0 1.88em; } .footer-inner > * { display: inline-block; } .footer-inner > * { vertical-align: top; } .footer-inner > * { padding-left: 30px; padding-right: 30px; } @media (max-width: 68.65em) { .footer-inner { margin-left: 0; margin-right: 0; width: 100%; } } .footer-inner > .flex-column { font-size: 0.9em; line-height: 1.75; } .footer-inner h1, .footer-inner h2, .footer-inner h3 { font-family: "Roboto Slab", sans-serif; } .footer-inner h1 { font-size: 1.67em; } .footer-inner p, .footer-inner ul { color: #696969; } .footer-inner .news-footer .layout_latest_footer { border-top: 1px solid #eee; padding: 0.5em 0; } .footer-inner .news-footer .layout_latest_footer p + p { margin-top: 0; } .footer-inner .news-footer .layout_latest_footer p.info { color: #1a1a1a; } .footer-inner .news-footer .layout_latest_footer:first-child { border-top: none; padding-top: 0; } .footer-inner .news-footer .layout_latest_footer:last-child { padding-bottom: 0; } .footer-inner .footer-form form input[type="color"], .footer-inner .footer-form form input[type="date"], .footer-inner .footer-form form input[type="datetime"], .footer-inner .footer-form form input[type="datetime-local"], .footer-inner .footer-form form input[type="email"], .footer-inner .footer-form form input[type="month"], .footer-inner .footer-form form input[type="number"], .footer-inner .footer-form form input[type="password"], .footer-inner .footer-form form input[type="search"], .footer-inner .footer-form form input[type="tel"], .footer-inner .footer-form form input[type="text"], .footer-inner .footer-form form input[type="time"], .footer-inner .footer-form form input[type="url"], .footer-inner .footer-form form input[type="week"], .footer-inner .footer-form form input:not([type]), .footer-inner .footer-form form textarea { font-size: 1.1em; width: 100%; } .footer-inner .footer-form form .widget { margin: 0.5em 0; } .footer-inner .footer-form form .button-submit { margin: 0 0 0.5em 0; width: 100%; padding: 0.3em 1.33em; } @media (max-width: 47.9em) { .footer-inner .footer-form form .button-submit { padding: 0.7em 1.33em; } } .footer-inner .footer-form form .error-message, .footer-inner .footer-form form .success-message { background: #8d3434; border-radius: 5px; color: white; line-height: 1.25; margin-top: 1em; padding: 0.5em; } .footer-inner .footer-form form .success-message { background: #76a800; } .footer-inner .footer-links ul { list-style-type: none; margin: 0; padding: 0; } .footer-inner .footer-links ul li { border-bottom: 1px solid #eee; padding: 0.5em 0; } .footer-bottom { margin-top: 40px; background: #1a1a1a; width: 100%; height: 100%; } @media (max-width: 68.65em) { .footer-bottom { padding-left: 1em; } } .footer-bottom .bottom-inner { margin: 0 auto; max-width: 68.75em; } .footer-bottom .bottom-inner .mod_customnav ul { font-size: 0.8em; list-style-type: none; margin: 0; padding: 30px 0; } .footer-bottom .bottom-inner .mod_customnav ul li { display: inline-block; vertical-align: top; } .footer-bottom .bottom-inner .mod_customnav ul li a, .footer-bottom .bottom-inner .mod_customnav ul li span { border-left: 1px solid white; color: white; display: block; line-height: 1; margin-right: -5px; padding: 0 1.5em; text-decoration: none; } .footer-bottom .bottom-inner .mod_customnav ul li a:hover, .footer-bottom .bottom-inner .mod_customnav ul li span:hover { text-decoration: underline; } .footer-bottom .bottom-inner .mod_customnav ul li span { cursor: default; } .footer-bottom .bottom-inner .mod_customnav ul li span:hover { text-decoration: none; } .footer-bottom .bottom-inner .mod_customnav ul li:first-child a, .footer-bottom .bottom-inner .mod_customnav ul li:first-child span { border-left: none; padding-left: 0; } .statcounter { display: none; } .mod_article .ce_text:nth-child(1) h1 { margin-top: 0; } .mod_article .ce_text h1 { margin-top: 1em; } .mod_article .image_container { margin: 2em 0; } #right .box { padding: 0.625em; margin-bottom: 1.25em; border: 1px solid #d2d2d2; } #right .box h1 { font-size: 1.5em; } #right .box.--orange { border: 3px solid #ff9c00; } #right .box.--grey { border: 1px solid #d2d2d2; } .erstberatung { background: #eee; border: 1px solid #d2d2d2; padding: 0 1em 1.33em 0.67em; } @media (min-width: 20em) and (max-width: 480px) { .erstberatung { padding: 0em 0.2em 1em 0em; } .erstberatung p { padding-left: 10px !important; } } @media (min-width: 48em) and (max-width: 960px) { .erstberatung { padding: 0em 0.2em 1em 0em; } .erstberatung p { padding-left: 10px !important; } } .erstberatung h2 { font-size: 1.25em; margin-bottom: 0; } .erstberatung h2::before { color: #1a1a1a; float: none; font: 100%/1 "FontAwesome"; font-size: 1em; position: relative; } .erstberatung h2::before { content: '\f0e6'; padding-right: 0.33em; } .erstberatung h2 + p { font-family: "Roboto", sans-serif; } @media (min-width: 20em) and (max-width: 480px) { .erstberatung h2 { padding-left: 10px; } .erstberatung h2::before { display: none; } } @media (min-width: 48em) and (max-width: 960px) { .erstberatung h2 { padding-left: 10px; } .erstberatung h2::before { display: none; } } .erstberatung p { padding-left: 1.67em; } .erstberatung .green-link { color: #81b200; font-family: "Roboto", sans-serif; font-size: 1.125em; font-weight: bold; } .callme-cta { background: #eee; line-height: 1.875; margin: 2em 0; padding: 2em 2em 1em; text-align: center; } .callme-cta a { font-size: 1.0625em; font-weight: 700; padding: 0.7em 1.2em; text-transform: uppercase; } #main form .submit_container button { margin-bottom: 0; } .mod_article.angebote .column-wrap > .flex-column { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; } .mfp-container { position: relative; height: auto; } .mfp-container .white-popup { position: relative; overflow: scroll; background: #FFF; padding: 40px; width: auto; max-width: 80%; height: 600px; margin: 80px auto; } .mfp-container .white-popup .mfp-close { background: black; color: white; margin: 0; } @media (min-width: 20.1em) and (max-width: 47.9em) { .mfp-container .white-popup { margin-top: 20px; padding: 20px; max-width: 95%; height: auto; } .mfp-container .white-popup h1 { font-size: 1.2em; line-height: 1.4; } } .weitere-schritte { background: #eee; border: 1px solid #d2d2d2; padding: 1em 1em 0; } .weitere-schritte dl { counter-reset: my-counter; } .weitere-schritte dl dt { list-style-type: none; position: relative; font-size: 1.2em; padding: 4px 0 0px 0; font-weight: 700; color: black; } .weitere-schritte dl dt:before { content: counter(my-counter); counter-increment: my-counter; position: absolute; left: 0; top: 0; font-weight: 700; font-size: 3em; line-height: 1; color: #939292; } @media (max-width: 35.5em) { .weitere-schritte dl dt:before { font-size: 1.5em; line-height: 1.3; } } .weitere-schritte dl dt.first:before { color: #81b200; } .weitere-schritte dl dd { margin: 0 0 30px 0; color: #696969; } .weitere-schritte dl dt, .weitere-schritte dl dd { padding-left: 50px; } @media (max-width: 35.5em) { .weitere-schritte dl dt, .weitere-schritte dl dd { padding-left: 30px; } } .offer-box { background: white; border: 1px solid #c6c5c5; box-shadow: 0 0 10px rgba(51, 51, 51, 0.25); box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; overflow: hidden; margin-top: 20px; width: 100%; } #right .offer-box { padding: 0; } .offer-box.low .price-wrap .offer-button { background: #e8c073; } .offer-box.low .price-wrap .offer-button:hover { background: #e1ac47; } .offer-box.middle .price-wrap .offer-button { background: #ccd678; } .offer-box.middle .price-wrap .offer-button:hover { background: #bdca51; } .offer-box.high .price-wrap .offer-button { background: #6e9d00; } .offer-box.high .price-wrap .offer-button:hover { background: #4a6a00; } .offer-box .offer-headline { background: #345f8d; padding: 0.625rem 0.5rem 0.625rem 2.67rem; /** the headline min-height for all possible breakpoints **/ /*** end min-height blocks for all possible breakpoints **/ } .offer-box .offer-headline h1 { color: white; } @media (max-width: 68.65em) { .offer-box .offer-headline h1 { font-size: 1.125em; } } body.home .offer-box .offer-headline { background: #345f8d; } body.home .offer-box .offer-headline h1 { color: white; } .offer-box .content-wrap { padding: 0; } .offer-box .content-wrap ul { padding: 0.5rem; } .offer-box .content-wrap ul li strong { font-weight: 500; letter-spacing: 0.18em; } .offer-box h1 { font-size: 1.33em; margin-bottom: 0; position: relative; } .offer-box h1 small { font-size: 0.75em; font-weight: 400; } .offer-box h1.de::before { background: url("../img/flags/de.png") top left no-repeat; background-size: contain; content: ''; height: 0.75em; left: -1.2em; position: absolute; top: 2px; width: 0.75em; } .offer-box h1.eu::before { background: url("../img/flags/eu.png") top left no-repeat; background-size: contain; content: ''; height: 0.75em; left: -1.2em; position: absolute; top: 2px; width: 0.75em; } .offer-box h1.ir::before { background: url("../img/flags/ir.png") top left no-repeat; background-size: contain; content: ''; height: 0.75em; left: -1.2em; position: absolute; top: 2px; width: 0.75em; } .offer-box h1.us::before { background: url("../img/flags/us.png") top left no-repeat; background-size: contain; content: ''; height: 0.75em; left: -1.2em; position: absolute; top: 2px; width: 0.75em; } .offer-box h1.cn::before { background: url("../img/flags/cn.png") top left no-repeat; background-size: contain; content: ''; height: 0.75em; left: -1.2em; position: absolute; top: 2px; width: 0.75em; } .offer-box ul { margin-bottom: 0.5em; margin-top: 0.5em; } .offer-box .price-wrap { padding: 0 1rem 0.33rem; text-align: center; } .offer-box .offer-price { font-family: "Roboto", sans-serif; font-size: 2.25rem !important; font-weight: 700; } .offer-box .offer-info { color: #939292; font-family: "Roboto", sans-serif; font-size: 0.67rem; margin: 0; text-align: left; } .offer-box .offer-button { margin: 0.5em 0; margin-top: 0; } .offer-box.small .offer-headline { padding-bottom: 0.5rem; padding-top: 0.5rem; } .offer-box.small .offer-price { font-size: 1.75rem !important; margin-top: 0.25rem; } .explanation { color: #939292; font-size: 0.75em; margin: 1em 0 0 0; } .widget_links { margin-top: 20px; border: 1px solid #d2d2d2; padding: 0.625em; } .widget_links h2 { margin-top: 5px; font-size: 1.3em; } .widget_links ul { margin-left: 0; margin-bottom: 10px; } /*# sourceMappingURL=../sourcemaps/master.css.map */