/*
 *
 * Project:  stangl-technik.pl
 * Created:  26/11/2018
 *
*/


/* ----------> reset CSS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; /*font: inherit;*/ vertical-align: baseline; background: transparent
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } /* HTML5 display-role reset for older browsers */
body { line-height: 1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }
table { border-collapse: collapse; border-spacing: 0 }
:focus { outline: none }

.clearfix:before, .clearfix:after { content: ""; display: table; line-height: 0 }
.clearfix:after { clear:both }



/* ----------> base CSS */

body { font: 105%/1.6 Arial, sans-serif }
body { color: #000; position: relative; background-color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
h1, h2, h3, h4, h5, h6 { color: #000; line-height: normal; letter-spacing: normal; font-weight: bold; font-family: Arial, sans-serif }
h1 { font-size: 230%; margin: 0 0 .7em; line-height: 1.2; letter-spacing: -1px; clear: both; position: relative; flex-basis: 100% }
h2 { font-size: 210%; margin: 0 0 .7em; line-height: 1.1; letter-spacing: -.5px; position: relative }
h3 { font-size: 150%; margin: 0 0 .5em; line-height: 1.1; letter-spacing: -.3px }
h4 { font-size: 120%; margin: 0 0 .3em; line-height: 1.2; letter-spacing: normal }
input, select, textarea { font-size: 100% }
a { color: #101e8e; outline: none; transition: .4s }
a:link { color: #101e8e }
a:hover { color: #000; text-decoration: none }
p { margin: .5em 0 2.5em 0; line-height: 1.5 }
ul, ol { margin: 1em auto 2.5em; line-height: 1.3 }
small { font-size: 90% }
big { font-size: 120%; line-height: 1.4; margin: 0; display: inline-block }
blockquote { line-height: 1.4; font-size: 120%; margin: 1.5em auto; text-align: center }
blockquote p { line-height: 1.4; margin: 1.4em 0 0 }
blockquote p:first-child { margin-top: 0 }
/* Google webfont */
em, i { font-style: italic }
strong, b { font-weight: bold; font-weight: bold }
sup { vertical-align: super }
sub { vertical-align: sub }



/* ----------> default CLASS */

.tal { text-align: left !important }
.tac { text-align: center !important }
.tar { text-align: right !important }
.vat { vertical-align: top }
.vam { vertical-align: middle }
.fl { float: left }
.fr { float: right }
.fli { float: left; margin: 0 1.3em 1em 0 }
.fri { float: right; margin: 0 0 1em 1.3em }
.hidden { display: none }
.small { font-size: 90% }

.cover { background-size: cover !important; background-position: 50% 50% !important; background-repeat: no-repeat !important }

.btn, .btn:link, input[type="submit"], button[type='submit'] { display: inline-block; font-weight: bold; font-size: 90%; font-family: Arial, sans-serif; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; margin: .5em .25em; padding: .6em 2em .7em; min-height: 25px; line-height: normal; color: #fff; border: 0; border-radius: 155px; box-sizing: border-box; cursor: pointer; text-align: center; text-decoration: none; position: relative; z-index: 1; transition: .4s; background-color: #101e8e }
.btn::before, button[type='submit']::before { content: ''; border-radius: inherit; opacity: .3; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; background-color: #101e8e; transition: .2s }
.btn:hover::before, input[type="submit"]:hover::before { filter: blur(15px) }
.btn:hover, input[type="submit"]:hover { color: #fff }
.btn.b2 { color: #101e8e; border: 2px solid #101e8e; background: none }
.btn.b2::before { display: none }
.btn.b2:hover { color: #fff; background-color: #101e8e }
.btn.b3 { background: none; border: 2px solid #fff }
.btn.b3::before { display: none }
.btn.b3:hover { color: #101e8e; background-color: #fff }

.a-more { text-decoration: none; font-family: Arial, sans-serif; padding-right: 20px; background: url(../img/arrow-right-blue.svg) no-repeat right 50%; background-size: 12px }
.a-download { padding-right: 24px; background: url(../img/download.svg) no-repeat right 50%; background-size: 16px }
.a-more.white { background: url(../img/arrow-right-white.svg) no-repeat right 50%; background-size: 12px }
.a-more:hover { padding-right: 24px }
.a-more.small { font-size: 90% }



/* ----------> project LAYOUT */

#main { text-align: left; position: relative; overflow-x: hidden }
#header { width: 100%; height: 110px; position: absolute; left: 0; top: 0; z-index: 10; background-color: #fff; box-shadow: 0 0 25px rgba(0,0,0,.4) }
#footer { padding: 30px 0; background-color: #101e8e }

.content-wrapper { margin: 0 auto; padding: 0 22px; max-width: 1366px; box-sizing: border-box; position: relative }
.content-wrapper--padding { padding-top: 80px; padding-bottom: 80px }
.content-wrapper--text {}

.page-child #layout-wrapper,
.tax-tax_reference #layout-wrapper,
.single-_kariera #layout-wrapper
{
  max-width: 1366px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start
}
#content { flex-basis: 1030px; margin: 44px 0; order: 1 }
#sidebar { flex-basis: 314px; margin: 44px 0 44px 22px }
#content > .content-wrapper--padding { padding-top: 0; padding-bottom: 0 }



/* ----------> project CSS */

/* header */

#logo { align-self: center; width: 155px; height: 65px; text-indent: -999em; position: relative; left: 0; top: -18px; transition: none; margin-right: auto; }
#logo span { display: block; height: 100%; background: url(../img/logo-spie.svg) no-repeat 0 50%; background-size: contain }

.header-wrapper { height: calc(100% - 30px); display: flex; flex-flow: row wrap; max-width: none }

.header-menu { margin: 0; height: 100%; display: flex; flex-flow: row wrap }
.header-menu li a { font-size: 100%; font-weight: bold; font-family: Arial, sans-serif; letter-spacing: -.3px; padding: 0 18px; text-decoration: none; position: relative; display: flex; align-items: center; height: 100%; overflow: hidden }
.header-menu li a:hover { color: #101e8e; background-color: #eee; border-radius: 6px 6px 0 0 !important }
.header-menu .current-menu-item a { color: #000 }
.header-menu > li { display: inline-block; height: 100%; border-right: 1px solid #eee; position: relative }
.header-menu > li:first-child { display: none }

.header-menu ul { display: none; margin: 0; position: absolute; top: 100%; z-index: 9; min-width: 260px; background: #eee; border-radius: 0 0 6px 6px; box-shadow: 0 20px 20px rgba(0,0,0,.2) }
.header-menu ul li:not(:last-child) { border-bottom: 1px solid #ddd }
.header-menu ul a { height: auto; font-size: 90%; font-weight: normal; flex: none; display: block; padding: 10px 18px }
.header-menu ul a:hover { background-color: #ddd }
.header-menu ul li:last-child a { border-radius: 0 0 6px 6px }
.header-menu .menu-item-has-children:hover { background-color: #eee; border-radius: 6px 6px 0 0 !important }
.header-menu .menu-item-has-children:hover ul { display: block }

.header-langs { align-self: center; margin-left: 18px; padding: 0 18px 0 0; position: relative; overflow: hidden }
.header-langs select { position: relative; z-index: 1; width: calc(100% + 40px); font-size: 90%; text-align: left; text-transform: uppercase; font-family: Arial, sans-serif; height: 30px; padding: 0; border: 0; background: none; -webkit-appearance: none }
.header-langs:before { content: ''; position: absolute; right: 0; top: 50%; width: 10px; height: 6px; background: url(../img/chevron-down-blue.svg) no-repeat right 50%; background-size: 100%; transform: translateY(-50%) }

#header.fixed { position: fixed; top: 0; z-index: 1000; box-shadow: 0 0 10px rgba(0,0,0,.1) }

.header-top-wrapper { height: 30px }
.header-top-wrapper > div { max-width: none; height: 100%; display: flex; align-items: center; justify-content: flex-end; font-size: 70% }
.header-top-wrapper a { color: #df0000; font-weight: bold; text-decoration: none }
.header-top-wrapper a:not(:first-child):before { content: '|'; color: #aaa; margin: 0 1em }
.header-top-wrapper a:hover { color: #000 }

.admin-bar #header.fixed { top: 32px }
@media screen and (max-width: 782px) { .admin-bar #header.fixed { top: 46px } }



/* footer */

.footer-wrapper { display: flex; flex-flow: row wrap; align-items: center }
.footer-wrapper > div { color: #fff; margin-right: auto }
.footer-wrapper small { font-size: 90%; display: block; margin-top: .5em }
.footer-wrapper a { color: #fff; font-size: 90%; text-decoration: none }
.footer-wrapper a:hover { opacity: .7 }
.footer-menu { margin: 0 }
.footer-menu li { display: inline-block; margin: 0 0 0 20px }
.footer-menu li:first-child { display: none }



/* page-header */

.page-header { width: 100%; overflow: hidden; position: relative; background-color: #101e8e }
.page-header .content-wrapper { color: #fff; display: flex; flex-flow: column; justify-content: center; min-height: 190px; box-sizing: border-box; padding-top: 140px; padding-bottom: 35px; position: relative; z-index: 3 }

.page-header h1 { color: #fff; margin: 0 }

.home .page-header .content-wrapper { min-height: 480px; padding-top: 0; padding-bottom: 0; display: flex; flex-flow: row wrap }
.home .page-header h1 { font-size: 340%; line-height: 1.1 }
.page-header .summary { flex-basis: 60%; padding-top: 210px; padding-bottom: 100px; align-self: center }
.page-header figure { flex-basis: 40%; align-self: flex-end; line-height: 0 }
.page-header figure img { margin: 0 auto; display: block }
.page-header p { margin: 1em 0 1.5em }
.page-header .btn { align-self: flex-start }



/* home */

.home-sluzby { background: #f0f0f0 url(../img/sluzby-bg.png) no-repeat 100% 50% }
.home-sluzby .content-wrapper { display: flex; flex-flow: row wrap }
.home-sluzby h2 { margin: 0 auto 0 0; flex-basis: 314px; align-self: center }
.home-sluzby-wrapper { flex-basis: calc(100% - 336px); max-width: calc(100% - 336px) }
.home-sluzby .slick-wrapper { display: none; margin-right: -22px; position: relative }
.home-sluzby .slick-wrapper.slick-initialized { display: block }

.home-sluzby .slick-arrow { cursor: pointer; border: 0; display: inline-block; width: 30px; height: 30px; padding: 0; border-radius: 50%; position: absolute; top: 50%; z-index: 100; background-size: 33% !important; transform: translateY(-50%); transition: .4s }
.home-sluzby .slick-prev { left: -15px; background: #101e8e url(../img/chevron-left-white.svg) no-repeat 50% 50% }
.home-sluzby .slick-next { right: 8px; background: #101e8e url(../img/chevron-right-white.svg) no-repeat 50% 50% }
.home-sluzby .slick-arrow:hover { background-color: #2132b5 }

.home-sluzby article { margin: 0; height: 100%; max-width: calc(100% - 22px); border-radius: 6px; background-color: #fff; position: relative }
.home-sluzby article .summary { padding: 22px 22px 44px }
.home-sluzby article h4 { color: #101e8e; font-size: 100%; margin: 0 }
.home-sluzby article p { margin: 1em 0; font-size: 90% }
.home-sluzby article a { position: absolute; left: 22px; bottom: 22px }
/* same height fix */
.home-sluzby .slick-track { display: flex }
.home-sluzby .slick-slide { display: flex; height: auto }

.home-rozcestnik { background-color: #f0f0f0 }
.home-rozcestnik .content-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between }
.home-rozcestnik .content-wrapper > div { flex-basis: 426px }
.home-rozcestnik h2 { margin: 0 0 1em }

.r-dodavky ul { margin: 0 }
.r-dodavky li { border-bottom: 1px solid #fff }
.r-dodavky a { font-size: 110%; display: block; padding: 1em 45px 1em 0; text-decoration: none; background: url(../img/arrow-right-blue.svg) no-repeat 95% 50%; background-size: 12px }
.r-dodavky a:hover { background-color: rgba(255,255,255,.3) }

.r-skupiny article { padding: 1em 22px 0 134px; min-height: 110px }
.r-skupiny p { margin: 0 }
.r-skupiny .skupina-vs { background: url(../img/public-space.svg) no-repeat 0 1.4em; background-size: 110px }
.r-skupiny .skupina-ss { background: url(../img/private-space.svg) no-repeat 0 1.4em; background-size: 110px }

.r-kariera ul { margin: 0 }
.r-kariera li { border-bottom: 1px solid #fff; background: url(../img/character-gray.svg) no-repeat 5px 50%; background-size: 38px }
.r-kariera a { font-size: 110%; display: block; padding: 1em 45px 1em 60px; text-decoration: none; background: url(../img/arrow-right-blue.svg) no-repeat 95% 50%; background-size: 12px }
.r-kariera a:hover { background-color: rgba(255,255,255,.3) }
.r-kariera li:last-child { background: none }
.r-kariera li:last-child a { padding: 1em 0 1em 10px }



/* pages */

.page-skupiny { display: flex; flex-flow: row wrap; justify-content: space-between }
.page-skupiny article { flex-basis: 650px }
.page-skupiny article h2 { color: #101e8e; min-height: 100px; padding-left: 130px; display: flex; align-items: center }
.skupina-vs h2 { background: url(../img/public-space.svg) no-repeat 0 50%; background-size: contain }
.skupina-ss h2 { background: url(../img/private-space.svg) no-repeat 0 50%; background-size: contain }

.page-kontakt { display: flex; flex-flow: row wrap; justify-content: space-between }
.page-kontakt article { width: 100%; max-width: 650px }
.page-kontakt article:nth-child(n + 3) { margin-top: 66px }
.page-kontakt .p-mapa { margin: 0 0 1.5em }
.page-kontakt .p-mapa iframe { width: 100%; height: 250px }
.page-kontakt ul { margin: 1.5em 0 0 }
.page-kontakt li { min-height: 24px; margin: .8em 0; padding: 0 0 0 45px }
.page-kontakt .p-adresa { background: url(../img/pin-black.svg) no-repeat 0 50%; background-size: 24px }
.page-kontakt .p-email { background: url(../img/email-black.svg) no-repeat 0 50%; background-size: 24px }
.page-kontakt .p-telefon { background: url(../img/phone-black.svg) no-repeat 0 50%; background-size: 24px }
.page-kontakt .p-ostatni { margin-top: 1em }
.page-kontakt article h3 { margin: 0 }



/* archive */

.home .cpt-reference > a { margin: 22px 0 0 22px }

.cpt-reference { display: flex; flex-flow: row wrap; margin: 0 0 44px -22px }
.cpt-reference > a { min-height: 314px; flex-basis: calc(100% * (1/4) - 22px); margin: 0 0 22px 22px; border-radius: 6px; overflow: hidden; position: relative }
.cpt-reference > a, .cpt-reference > a:link { color: inherit; text-decoration: none }
.cpt-reference a:before { content: ''; opacity: .7; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity .4s; background-color: #101e8e }
.cpt-reference a:hover:before { opacity: .85 }
.cpt-reference a:hover article { padding-bottom: 54px }
.cpt-reference article { display: flex; flex-flow: column wrap; box-sizing: border-box; height: 100%; padding: 22px 22px 44px; color: #fff; position: relative; z-index: 1; text-align: left; transition: .4s }
.cpt-reference .tax { margin-bottom: auto; font-size: 80%; font-family: Arial, sans-serif; text-transform: uppercase }
.cpt-reference h3 { color: #fff; font-size: 120% }
.cpt-reference .a-more { align-self: flex-start }

.cpt-kariera { display: flex; flex-flow: row wrap; margin: 0 0 0 -22px }
.cpt-kariera > a { flex-basis: calc(100% * (1/4) - 22px); max-width: calc(100% * (1/4) - 22px); margin: 0 0 0 22px; border-radius: 6px; background-color: #eee }
.cpt-kariera > a, .cpt-kariera > a:link { color: inherit; text-decoration: none }
.cpt-kariera > a:nth-child(n + 5) { margin-top: 22px }
.cpt-kariera a:hover { box-shadow: 0 0 22px rgba(0,0,0,.1) }
.cpt-kariera a:hover h4, .cpt-kariera a:hover .a-more { color: #101e8e; transition: .4s }
.cpt-kariera article { display: flex; flex-flow: column; box-sizing: border-box; height: 100%; padding: 22px }
.cpt-kariera h4 { margin: 0 0 1em }
.cpt-kariera span { margin-top: auto; align-self: flex-start }




/* single */

/* sidebar */

#sidebar ul { margin: 0; padding: 22px 0; border-radius: 6px; background-color: #f0f0f0 }
#sidebar li { padding: 0 22px }
#sidebar li a { display: block; font-size: 90%; font-family: Arial, sans-serif; letter-spacing: -.5px; padding: 1em 44px 1em 0; text-decoration: none; background: url(../img/arrow-right-blue.svg) no-repeat right 50%; background-size: 12px }
#sidebar li a:hover { background-color: rgba(255,255,255,.3) }
#sidebar .current_page_item, #sidebar .current-cat { padding-right: 0 }
#sidebar .current_page_item a, #sidebar .current-cat a { padding: 1em 44px 1em 22px; background: rgba(255,255,255,1) }
#sidebar li:not(:last-child) a { border-bottom: 1px solid #fff }

#sidebar h4 { margin-top: 2em }



/* FORMS (CF7) */

div.wpcf7 { max-width: 770px; padding: 22px 22px 12px; border-radius: 6px; box-sizing: border-box; background: #f0f0f0 }
div.wpcf7 p { margin: 0; display: flex; flex-flow: row wrap; justify-content: space-between }
div.wpcf7 p br { display: none }
div.wpcf7 label { font-size: 80%; flex-basis: calc(50% - 11px) }
div.wpcf7 .wpcf7-form-control-wrap { display: block; margin: 0 0 10px }
div.wpcf7-validation-errors { border: 0; padding: 0; font-size: 90%; color: #df0000 }
div.wpcf7-mail-sent-ok { border: 0; padding: 0; font-size: 90%; color: #398f14 }
span.wpcf7-not-valid-tip { color: #df0000 }
div.wpcf7 label .button { display: block; background-color: #fff; border-radius: 4px; height: 40px; line-height: 30px; padding: 5px; box-sizing: border-box; position: relative; overflow: hidden }
div.wpcf7 label .button span { cursor: pointer; display: inline-block; height: 30px; line-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; color: #000; background-color: #c2c2c2; transition: .4s; position: absolute; right: 5px; top: 5px }
div.wpcf7 label .button span:hover { background-color: #a0a0a0 }
div.wpcf7 label.file .wpcf7-form-control-wrap input { display: none }
.wpcf7-form.sent .button b { display: none }
div.wpcf7 .k-subject { display: none } /* custom hidden field = subject */

form input:not([type='submit']), form textarea, form select { width: 100%; height: 40px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 1px solid #fff; border-radius: 4px; background: #fff; transition: .4s }
form input:not([type='submit']):focus, form textarea:focus { border: 1px solid #ddd }
form textarea { height: 100px; padding: 8px 12px }
form input[type='checkbox'] { margin-right: .5em; width: auto; vertical-align: middle; position: relative; top: 2px }

p.error { font-size: 120%; font-weight: bold; color: #df0000; margin: 0; padding: 2em 0 }
p.success { font-size: 120%; font-weight: bold; color: #a0c13c; margin: 0; padding: 2em 0 }



/* 404 */

.error404 { overflow-y: hidden; display: flex; flex-flow: column; justify-content: center; min-height: 100vh; background: #fff }
.error404.logged-in { top: -32px !important }
.error404 #main { max-width: 50%; margin: 0 auto; padding: 4em; box-sizing: border-box; text-align: center; color: #000; background-color: #fff }
.error404 .url, .error404 a {}
.error404 h1 { color: #000; margin: 0; font-size: 800%; font-family: 'arial', 'sans-serif' }
.error404 a, .error404 a:link, .error404 a:hover { color: #000 }

@media screen and (max-width: 736px) {

	.error404 h1 { font-size: 200% }
	.error404 #main { max-width: 100% }

}



/* galerie */

.gallery { display: flex; flex-wrap: wrap; padding: 0; width: 100%; max-width: 100%; margin: 3em 0; position: relative; box-sizing: border-box }
.gallery img { height: 100%; max-width: 100%; background-color: #fff; box-sizing: border-box }
.gallery-item { flex-basis: calc(100% * (1/6)); margin: 0; line-height: normal; font-size: 0 }
.gallery a { display: block; position: relative; overflow: hidden }
.gallery a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: .6s; background-color: rgba(0,0,0,.2) }
.gallery a:hover:before { opacity: 1 }
.gallery-caption { display: none; font-size: 90%; color: #000; line-height: normal }
.gallery br { display: none }



/* pagination */

.nav-posts { padding-top: 0; text-align: center; flex-basis: 100%; order: 999999 }
.nav-posts li { display: inline-block; margin: 0 .3em .3em }



/* fulltext */

/* other */

.content-wrapper:not(.footer-wrapper) img { max-width: 100%; height: auto }

img.alignright, img.fri, img[align="right"] { float: right; margin: 2em 0 2em 4em }
img.alignleft, img.fli, img[align="left"] { float: left; margin: 2em 4em 2em 0 }
img.aligncenter, img.alignnone, div.aligncenter, div.alignnone { max-width: 100%; width: auto !important; display: block; margin: 0 auto 2.5em; text-align: center }
.content-wrapper--text img.aligncenter:not(:first-child), .content-wrapper--text img.alignnone:not(:first-child) { margin: 2.5em auto }

div.wp-caption p { font-size: 90% }

.content-wrapper blockquote:first-of-type { margin-top: 0 }
.content-wrapper blockquote:first-of-type:last-child { margin-bottom: 0 }
.content-wrapper--text p:first-child:last-child, .content-wrapper p:first-child:last-child { margin: 0 }
.content-wrapper--text p:last-child, .content-wrapper p:last-child { margin-bottom: 0 }

.content-wrapper--text li { position: relative; padding: 0 0 .75em 14px; text-align: left }
.content-wrapper--text li:before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #101e8e }

.content-wrapper--text ol { list-style: none; counter-reset: i 0; display: flex; flex-wrap: wrap; justify-content: space-around }
.content-wrapper--text ol li { flex-basis: 100%; max-width: 100%; box-sizing: border-box; position: relative; padding: .5em 0 .5em 30px; line-height: normal }
.content-wrapper--text ol li:before { content: counter(i); counter-increment: i; display: inline-block; position: absolute; width: 22px; height: 22px; line-height: 22px; font-weight: bold; vertical-align: middle; text-align: center; left: 0; top: 7px; color: #fff; font-size: 70%; border: 1px solid #101e8e; background-color: #101e8e; border-radius: 50% }
.content-wrapper--text .w-100 li { flex-basis: 100%; max-width: 100% }

/*
.content-wrapper table { margin: 1em 0 2.5em }
.content-wrapper th { line-height: normal; padding: 1em; border: 1px solid rgba(0,0,0,.1); background: #f7f7f7 }
.content-wrapper td { font-size: 90%; line-height: normal; padding: .3em 1em; border: 1px solid rgba(0,0,0,.1); vertical-align: middle }
*/

.wp { visibility: hidden }
.animated { visibility: visible; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.d0 { animation-delay: .3s; -webkit-animation-delay: .3s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s }
.d1 { animation-delay: .6s; -webkit-animation-delay: .6s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s }
.d2 { animation-delay: .9s; -webkit-animation-delay: .9s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s }

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown }

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(15%, 0, 0);
    transform: translate3d(15%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(15%, 0, 0);
    transform: translate3d(15%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 7%, 0);
    transform: translate3d(0, 7%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 7%, 0);
    transform: translate3d(0, 7%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}