@charset "UTF-8"; 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%;vertical-align: baseline;}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;}caption,th,td {font-weight: normal;text-align: left;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display: block;}audio,canvas,video {display: inline-block;}audio:not([controls]) {display: none;}del {color: #333;}ins {background: #fff9c0;text-decoration: none;}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}small {font-size: smaller;}img {border: 0;-ms-interpolation-mode: bicubic;} @font-face { font-family: 'RobotoCondensedLight'; src: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/RobotoCondensedLight.eot); src: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/RobotoCondensedLight.eot) format('embedded-opentype'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/RobotoCondensedLight.woff2) format('woff2'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/RobotoCondensedLight.woff) format('woff'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/RobotoCondensedLight.ttf) format('truetype'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/RobotoCondensedLight.svg#RobotoCondensedLight) format('svg'); } @font-face { font-family: 'DINProRegular'; src: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/DINProRegular.eot); src: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/DINProRegular.eot) format('embedded-opentype'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/DINProRegular.woff2) format('woff2'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/DINProRegular.woff) format('woff'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/DINProRegular.ttf) format('truetype'), url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/fonts/DINProRegular.svg#DINProRegular) format('svg'); } * {box-sizing: border-box; outline:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;-o-transition:all 400ms ease;transition:all 400ms ease;} .master-slider-parent {-webkit-transition: none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none; z-index: 100; padding-bottom: 15px;} html { overflow-y: scroll;} body {font-family:'RobotoCondensedLight', 'Lucida Grande',Verdana, Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5em;font-weight: 300; color: #333;} body { background: #dce1e5; } a, a:visited {color:#383837;text-decoration:underline;} a:focus a:hover, a:active, img:hover {color:#999;} a img {opacity:1;} a:hover img {opacity:0.75;} #post a[href*=".pdf"],#post a.external[href*=".pdf"] {background-image:url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/PDF.png) !important; background-repeat: no-repeat; background-position: left 2px !important;padding:0 0 0 30px;line-height:22px;display:inline-block; margin: 5px 0;} [id] {scroll-margin-top: 40px ; } #post a[href*=".ppt"],#post a[href*=".pptx"], #post a.external[href*=".ppt"] {background-image:url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/ppt.png) !important; background-repeat: no-repeat; background-position: left 2px !important;padding:0 0 0 30px;line-height:22px;display:inline-block; margin: 5px 0;} .frm_checkbox a.external_icon { padding-right: 25px; background: 0 !important;} #post form a { display: inline !important; text-decoration: underline; padding: 0 3px;} a[href*="tel"] { text-decoration: none;} .more-link {padding:7px 0 0 0; text-decoration: underline !important;} td .more-link {padding: 0;} hr { background: #fff;border:2px dotted #ddd; border-width:0 0 2px 0;height: 1px;margin:15px 0; clear: both;} hr.bar { border: 3px double #ddd; border-width: 0 0 3px 0; } hr.trenner { border: 0; background: #eee; height: 10px; margin: 30px 0; } h2,h3,h4,h5,h6 {margin:0 0 10px 0;color:#004073; font-weight:400; line-height:1.3em; font-weight: bold; letter-spacing: .01em;} h2,h3,h4,h5,h6, h1, #navi a { font-family: 'DINProRegular','RobotoCondensedLight', 'Lucida Grande',Verdana, Arial, Helvetica, sans-serif; font-weight: normal; letter-spacing: normal;} h2, h3, h4 {font-size:1.5em;margin-bottom:20px; line-height: 1.4em;} h2 {font-size:1.6em; text-transform: uppercase;letter-spacing: 1px;} h4 {} h2.page-title .red, h3.archiv-title .red { display: block; font-weight: 700;} .page-template-page-patienten-glossar h2.page-title .red { display: inline;} h2 span.grey { display: block;} h2 small { font-size:.85em;color: inherit;} h3 {font-size:1.2em;margin:20px 0 1em 0; font-weight: bold;} h3.pre-headline { margin-bottom: 0; font-size: 1em;} h3.pre-headline + h3 { margin-top: 0;} h3 a, h3 a:visited, a hr, a:visited h3 {text-decoration:none !important; color:#004073;} h3 a:hover, h3 a:active, a:hover h3, a:active h3 {color:#999 !important;} h4 {font-size:1.2em; margin-bottom:0; line-height: 1.4em; padding-bottom: 10px;} h5 { text-transform: none;} p {margin-bottom:1.1em;} blockquote { padding:0 0 20px 0; margin-bottom: 20px; border-bottom: 1px dotted #ccc;} small {font-size:.8em;color:#999;} .skiplink {position:absolute;left:-99999px;top:-20em;} .container {position:relative;width:100%; display: block;} .content {position:relative;width:96%;min-width:300px;max-width:1200px; margin: 0 auto;} #header { background: #fff; margin: 0; padding-bottom: 15px; padding-top: 70px; } h1 {position:relative; width: 100%; font-weight: 300; padding: 35px 75px 0 0; } h1 .logo { width: 40%; padding: 0 15px 0 0; } h1 a {text-decoration: none;display:table; z-index:2; font-size: 1.25em; } h1 a .headline {color: #004073 ;} h1 a .headline span { color: #09c; text-transform: uppercase; font-size: 12px !important; display: block; line-height: 16px; padding-bottom: 3px; } h1 .headline { padding-bottom: 5px;display: table-cell; vertical-align: bottom;} h1 .logo { display: table-cell; vertical-align: top;} #flags { position: absolute; right:90px; top: 3px; z-index: 9; text-transform: uppercase;margin-top: -70px;}} .wpml-ls { height: 38px !important; margin: 0 !important; width: auto !important; padding: 0 !important; line-height: 38px !important; border:0 !important; } .wpml-ls-item a { width: auto !important; height: 40px !important;padding: 0 !important; line-height: 40px !important; border:0 !important; overflow: hidden; white-space: nowrap;filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);-webkit-filter: grayscale(1); opacity: .7;} .wpml-ls-current-language a, .wpml-ls-item a:hover {cursor: default !important;filter: grayscale(0%);-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%);-webkit-filter: grayscale(0); opacity: 1; } .wpml-ls-item a:hover {cursor: pointer !important; color: #000 !important} .wpml-ls-item img { margin:0 10px 0 0 !important; } .wpml-ls-item span {padding-right: 20px !important; } #headerbuttons { position: relative; z-index: 2; width: 100%; padding: 15px 0 0 0; border-top:2px dotted #ddd; text-align: center; display: block; margin-top: 15px;} #headerbuttons img {min-width: 100%;width: 200px !important;} #spenden {opacity: 1; text-align: center;background: #fff; font-size: 11px; line-height: 15px; width: 150px; height: auto; padding: 0; } #spenden:hover { opacity: .7;} #scroll-down { position: fixed; bottom: 0; z-index: 2; padding: 20px; background: #fff; } .mobilheadersearch { position: absolute; left:4%; top: 15px;width: 55px; z-index: 1; height: 55px; background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/search-header-rmobile.png); background-position: center; background-repeat: no-repeat; background-size: auto 50%; -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.2); box-shadow: 0 1px 2px 1px rgba(0,0,0,.2);z-index: 20000;} .mobilheadersearch:focus, .mobilheadersearch:active { width: 100%; } .mobilheadersearch input { height:55px; width: 55px; line-height: 50px; font-size: 0; background: 0; border-color:#004073; } .mobilheadersearch input:focus,.mobilheadersearch input:active { padding: .3em 12px; font-size: 1.1em; line-height: 1.6em; height: 60px; border-width: 1px; top: 150px; padding: 0 10px; background: #fff; color: #333; width:100%; min-width: 350px; padding: 0 10px; max-width: 450px; -webkit-box-shadow: 10px 10px 150px 150px rgba(0,0,0,.2); box-shadow: 10px 10px 150px 150px rgba(0,0,0,.2); position: absolute; } .headerlogin {position: absolute; top: -50px; left: 80px; text-transform: uppercase;} .headerlogin a { text-decoration: none; font-weight: bold; color: #999;} .headerlogin a:hover, .logged-in .headerlogin a { color:#004073; } .logged-in .headerlogin a:hover { color:#666; } .headerlogin .loginsymbol { background-image:url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/locked64.png) ; background-repeat: no-repeat; background-size:cover; width: 18px; height: 18px; margin-right: 10px; display: inline-block; margin-bottom: -1px; filter:grayscale(100%);} v .headerlogin:hover .loginsymbol, .headerlogin:active .loginsymbol { filter:grayscale(0); } .logged-in .headerlogin .loginsymbol {background-image:url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/unlocked64.png) ; filter:grayscale(0);} #navi {background: #004073; z-index: 10; position: sticky; position: -webkit-sticky; top: 0; min-height: 10px; font-size: .8em; display: none; } #navi a, #navi a:visited {text-decoration:none; color: #fff; display:block; text-transform: uppercase;} #navi a:hover, #navi a:active {color:#c90;} #navi .current-menu-item a, #navi .sub-menu .current-menu-item a {color:#09c ;cursor:default; } #navi .current-menu-item .sub-menu a { cursor: pointer; color: #333 ;} #navi .current-menu-parent a { color: #09c;} #navi .current-menu-parent a:hover, #navi .current-menu-item .sub-menu a:hover { color: #999;} #navi ul { height: 40px; line-height: 40px; } #navi #menu { z-index: 5; padding-right: 50px;} #navi li {position:relative; display:inline-block; line-height: 1.1em; height: 40px;padding-right: 10px; } #navi li a { padding:10px 7px 4px 0 ;text-transform: uppercase; display: block;} #navi .menu-item-has-children a:after { content: "\f107"; font-family: 'FontAwesome'; font-size: .8em; font-weight: bold; padding-left: 5px; margin-right: 5px;} #navi .menu-item-has-children a:hover:after { color:#666;} #navi .menu-item-has-children .sub-menu a:after {content: ""; } #navi ul.sub-menu { position:absolute; top:39px; text-align: left; height: 0; overflow: hidden; visibility: hidden; opacity: 0; margin: -20px 0 0 -15px; border:1px solid #004073; border-width:0 1px 1px 1px; background:#dce1e5; padding-bottom: 8px; } #navi li:hover ul.sub-menu { height: auto; visibility: visible; opacity: 1; -webkit-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px; min-width: 110%; width: auto; margin:0 0 0 -15px; } #navi .sub-menu li, #navi .menu_item_has_children:hover .sub-menu .menu_item_has_children {border-width:0 0 1px 0 ; border-bottom-color: #fff;float:none;font-size: .8em; text-transform: none; margin: 0; padding: 0 15px; -webkit-border-radius:0;border-radius: 0; display: block; height: auto; line-height: 1.6em; border-bottom: 1px dotted #fff; white-space: nowrap; } #navi .sub-menu li:last-child {-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px; border-bottom: 0;} #navi .menu_item_has_children .sub-menu a {height: auto;} #navi ul.sub-menu li { height: auto; line-height: 1.4em; } #navi ul.sub-menu a, #navi .current-menu-item ul a,#navi .current_page_ancestor ul a { color: #333 ; text-transform: none; letter-spacing: normal;} #navi ul.sub-menu a:hover, #navi .current-menu-item ul a:hover,#navi .current_page_ancestor ul a:hover { color: #999 ;} #navi .sub-menu .current-menu-item a {color:#666 !important;cursor:default; } #navi ul.sub-menu li.small a {padding-left: 15px !important; font-style: italic;} #navi .headersearch { position: absolute; right:0; top: 0; z-index: 200;width: 50px; z-index: 1;} #navi .headersearch:focus, #navi .headersearch:active { z-index: 10; } #navi .headersearch input { background-color: #004073; height:40px; width: 40px; border-color:#004073; background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/search-header-fixed.png); background-position: left; background-repeat: no-repeat; background-size: auto 50%; line-height: 40px; z-index: 2; font-size: 14px; text-indent: -999999px; position: absolute; right: 0; } #navi .headersearch input:focus,#navi .headersearch input:active { padding: .3em 12px; font-size: 1.1em; line-height: 1.6em; height: 33px; border-width: 1px; top: 43px; padding: 0 10px; background: #fff; color: #333; text-indent: 0;z-index: 3; min-width:300px;width:25%; max-width: 350px; padding: 0 10px; max-width: 450px; -webkit-box-shadow: 4px 4px 35px 25px rgba(0,0,0,.3); box-shadow: 4px 4px 35px 25px rgba(0,0,0,.3); right: 100px; } #content { background: #fff; } #post {border-top: 2px dotted #ddd; padding: 25px 0 25px 10px;} .infobar {padding: 18px 18px 8px 18px; margin: 20px 0; background-color: #dce1e5;} .breadcrumb { padding:0; margin:0 0 15px 0; font-size:0.8em; color:#999; left: 0;} .breadcrumb a { color:#999} .breadcrumb a:hover { color:#333;} img, .wp-caption {max-width:100%;height:auto;} #storycontent img {-webkit-border-radius: 3px; border-radius:3px;} .alignright {margin:0 0 15px 3%;display:inline;float:right;} .alignleft {margin:0 3% 15px 0;display:inline;float:left;} .aligncenter { margin: 0 auto 10px auto !important; text-align: center !important; position: relative;} .alignnone {display: inline-block; margin: 0 15px 10px 0;} #storycontent .alignleft, #storycontent .alignright { max-width:48%;} #content a img {opacity:1;} #content a:hover img {opacity:.8} #storycontent img.alignnone { margin: 0 15px 10px 0;} .video-wrapper { max-width: 800px !important; } .video-container { position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; margin-bottom:10px; max-width: 100%;} .video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .picscolumn { margin: 0 0 20px 0; font-size: .8em; line-height: 1.4em; } .wp-caption { margin-bottom:10px; } .wp-caption .wp-caption-text, .gallery-caption, .entry-caption { white-space: normal; } .wp-caption-text { font-size: .8em;} .wp-gallery:before {content: ""; display: table; height: 1px;} .wp-gallery {margin: auto; overflow: hidden; width: 100%;} #storycontent .wp-gallery ul {margin: 0; padding: 0;} #storycontent .wp-gallery li {float: left; display: inline; list-style: none; margin: 0 10px 10px 0; padding: 0; float: left; position: relative; width: 125px; border: 1px solid #333; padding: 0; -webkit-box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, .3); box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, .3); -webkit-border-radius: 2px; border-radius: 2px;} #storycontent .wp-gallery li:hover {border-color: #fff !important; } .tos-caption {opacity: 1 !important; height: auto !important; max-width: 100%; white-space: normal; bottom: 25px !important;} .tos-caption>div { white-space: normal; text-overflow: inherit; height: auto; } li { position: relative;} #storycontent ul,#storycontent ol,#storycontent dl, .maintitle ul, #fullwidthheader ul {margin: 0 0 10px 0; padding: 0;} #storycontent ul ul {margin: 10px 0;} #storycontent ul li, .maintitle ul li, #fullwidthheader ul li, .startbox ul li {margin: 0 0 3px 20px; list-style: disc;} .startbox ul li { list-style-type: "- "; margin: 0 0 1px 3px; padding-left: 3px; } #storycontent ol li {margin: 0 0 3px 30px; list-style: decimal; padding-left: 3px;} #storycontent ol li li {list-style: lower-latin !important;} #storycontent ol li li li {list-style: circle !important;} #storycontent ol ul { margin:7px 0;} #storycontent ol ul li, #storycontent ul ul li {list-style: circle !important;} #storycontent dt {font-weight: bold; margin: 0 7px 7px 0; float: left; width: 200px; clear: left; height: auto;} #storycontent dd {margin: 0 7px 0 0; width: auto; height: auto; } #storycontent ol.comment-list li {margin: 0 0 15px 0; list-style: none; } .comment-body { padding: 0 0 10px 0; border-bottom: 1px dotted #ccc; display: block; padding-bottom: 10px; position: relative;} .comment-author img { position: absolute; left: 0; top: 10px;} .comment-metadata a { text-decoration: none !important; cursor: default !important; font-size: .8em; color: #999 !important; padding-bottom: 12px;} .comment-author .fn { text-transform: uppercase; color:#004073; margin-right: 5px; } #storycontent ol.comment-list ol.children li {margin-left: 10px;list-style: none !important; padding-top: 17px; border-left: 10px solid #fff; } #storycontent ol.comment-list ol.children img { top: 15px; } #storycontent ol.comment-list ol.children li .comment-body { padding-left:25px; background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/arrow_down-right.png); background-repeat: no-repeat; background-position: left top;} .comment-reply-link { background: #fff ; padding: 3px; border:1px solid #ccc; text-decoration: none; } .comment-reply-link:hover, .comment-reply-link:focus {border-color:#fc0;} .comment-respond .logged-in-as { display: none;} #comment {min-height: 250px;} .form-submit input { width: auto; text-transform: uppercase; padding: 3px 15px;} table {border-spacing: 0; margin: 0 0 10px 0; overflow: auto;} td,th {padding: 2px 15px 2px 0; border-bottom: 1px dotted #ddd; vertical-align: top;} th {text-align: left; font-weight: bold; border-bottom: 2px solid #ebebed; padding-top: 15px; color: #004073; font-size: 1.1em;} .td65 {width: 65px;} .td100 {width: 100px;} .td150 {width: 150px;} .td200 {width: 200px;} .td250 {width: 250px;} td.border-top, tr.border-top td {padding-top: 15px; border-top: 1px solid #ebebed;} .eventstable td {padding: 8px 15px 8px 0;} .eventstable img {height: 55px !important; width: auto !important;} .partnertabelle {width: 100%;} .partnertabelle td {width: 33.33%; text-align: center !important; vertical-align: middle; border: 0 none !important; padding: 3px 0; font-weight: bold;} .partnertabelle img { max-width: 95%;} .adressbox { display: table; width: auto;} .adressbox .table_td {display:table-cell;vertical-align: top;} .adressbox .portraet { width: 25%; padding: 8px 15px 0 0; } .adressbox .adresse { width: 75%;line-height: 140%; } .studien-zentrentabelle { } .studienmeta td {border: 1px solid #ebebed; border-width: 3px 0; padding: 15px 0;} .studienmeta h4 {padding-bottom: 3px;} .studienmeta .alignleft {margin-top: 6px;} .studienmeta tr td:first-child {line-height: 1.2em; padding-right: 20px;} .studienmeta tr td:first-child img {margin-bottom: 3px; z-index: 2; display: block; width: 95px; height: auto; opacity: 1;} .studienmeta-public {width: auto; clear: both;} .studienmeta-public td {padding-right: 15px; border: 0 none !important; white-space: nowrap;} .studienmeta-public td.design {padding-left: 25px; padding-right: 0;} .studienmeta-public tr td:first-child {font-weight: bold;} .studienmeta-public tr td:first-child em {font-weight: normal;} h2.zentrumstitle { line-height: 1.3em;} .editor_only { border:2px solid #c36 !important; padding: 18px;} .termin-tabelle {margin: 0;} h3.termineh3 {padding: 15px 0 20px 0;display: block;border-top: 1px solid #ebebed;} .termin-tabelle h4 {padding-bottom: 2px;border-bottom: 1px dotted #ccc; position: relative;} .termin-tabelle h4 span { position: absolute; top: -50px; left: 0; } .search.termin-tabelle h4, .single-post .termin-tabelle h4 { border: 0 !important;} .termin-tabelle img {width: 150px !important;height: auto;position:absolute; right: 0; top: 0;padding: 0 0 10px 15px;background: #fff; z-index: 2; } .termin-tabelle td,.termin-tabelle tr:last-child td {border: 0 none !important; position: relative;} .termin-tabelle tr td:first-child {font-weight: bold; min-width: 105px; padding-right: 7px;} .termin-tabelle td .more-link { display: block;} body.category-416 #post-11081 .table_termine { display:none;} h3.protected {background:url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/Lock_closed.png) left 5px no-repeat; padding-left:25px; color:#f00;} .single h3.protected {background:url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/Lock_closed.png) left 15px no-repeat; } .post-password-form input {display: block;} .page-template-page-dataport-php .post-password-form p:first-child, .page-template-page-dataport-php .post-password-form label {color:#fff !important; } textarea, input, select {width:100%;border:1px solid #ddd;padding:3px 5px;-webkit-border-radius:2px;border-radius:2px;margin-bottom: 2px; line-height: 1.2em; } textarea:focus, input:focus, textarea:active, input:active, select:focus, select:active {border-color: #fbc500;} form td,form th,form table tr:last-child td {border: 0 none;} #post .button { width: auto;} #post .frm_form_field a[href*=".pdf"] { background-repeat: no-repeat; background-position: left center !important;padding:0 0 0 0;line-height:auto; background-size: 0 !important} #post .frm_form_field .su-accordion, #post .frm_form_field .su-spoiler {margin: 0 !important; padding: 0 !important; } #post .frm_form_field .su-accordion .su-spoiler-title { font-size:1.1em !important; color:#004073 !important; text-transform: uppercase; outline:none !important; background: #fff !important; border: 1px solid #fff !important; padding-left: 20px !important; text-decoration: underline;} #post .frm_form_field .su-spoiler-icon { left: -5px !important; padding-left: 0; margin-left: -3px;} #post .frm_form_field .su-accordion .su-spoiler-content { padding: 12px 0 0 0 !important; } .frm_field_1886_container #field_80gpz2-0 { display: block !important; width: auto;} .hilite { background-color:#ff3; } .searchform input {width:100%; background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/search-header.png); background-position: center right; background-repeat: no-repeat; color:#999; max-width: 300px; background-size: auto 70% } .searchform input:focus, #header .searchform input:active {color:#333; border-color:#fbc500 !important ; font-size: 1em; font-weight: bold;} .searchform .button {display:none;} .button-link {border:2px solid; padding: 0 25px; height: 36px; line-height: 36px; white-space: nowrap; -webkit-border-radius:18px;border-radius:18px; text-transform: uppercase; display: inline-block; border-color:#004073; text-decoration:none ; color: #004073; display: table-cell; vertical-align: middle;} #storycontent .button-link {background-color:#dce1e5; } .button-link:hover, .button-link:active, #storycontent .button-link:hover, #storycontent .button-link:active { color: #fff; border-color: #fff; background: #a8bfd2 ;} .download-button, .download-button:visited {border:2px solid #004073; border-width: 10px; height: auto; font-weight: bold;display: inline-block; background-color:#004073; text-decoration:none ; color: #fff; border-radius: 3px; } .download-button:focus, .download-button:hover, .download-button:active {color: #ccc;} .download-button-jt2023 {border-color: #0D5F8E !important;background-color:#0D5F8E !important; } .wp-pagenavi {text-align:center;padding:20px 0;display:block;margin:20px 0;border-top:2px dotted #ddd;} .wp-pagenavi .pages {margin-right:10px;line-height:2em;} .wp-pagenavi a, .wp-pagenavi .current, .wp-pagenavi .extend {text-decoration:none;display:inline;margin-right:5px;} .wp-pagenavi .current {background:#a8bfd2 !important;color:#000; border-color: #004073 !important; color: #fff;} .newsintro { padding-top:10px;border-top:2px dotted #ddd; margin-top: 15px;} .newsintro a { text-decoration: none; display: block; width: 100%; height: 100%;} .newsintro:hover a {color:#999;} .newsintro img.wp-post-image { max-width: 214px !important;} .newsintro table tr:last-child td {border-bottom:0; padding-bottom: 0;} .su-accordion .su-spoiler { border: 0;} .su-accordion .su-spoiler-title { font-size: 1.2em !important; color:#004073 !important; text-transform: uppercase; outline:none !important; background: #f0f0f0 !important; border: 1px solid #ccc !important; padding-left: 40px !important;} .su-spoiler-icon { left: 10px !important;} .su-accordion .su-spoiler-closed .su-spoiler-title { color: #999;} .su-accordion .su-spoiler-closed .su-spoiler-title:hover { color: #999;} .su-accordion .su-spoiler-content { padding: 35px 35px 25px 35px !important; background-color: #fff; } .su-accordion .su-spoiler-closed .su-spoiler-content { padding: 0 !important;} .su-spoiler-title, .su-spoiler-content { border-radius: 0 !important; -webkit-border-radius: 0 !important;} .single .hidetitle .page-title, .single .hidedate .the_date, .single .hidecomplete .the_date,.single .hidecomplete .page-title, .category .hidetitle .archiv-title, .category .hidedate .small, .category .hidecomplete small,.category .hidecomplete .archiv-title, .category .hidecomplete .more-link, .category .hidecomplete .postimage, .hidemorelink .more-link { display: none;} .category hidecomplete a { color: #333 !important; cursor: default;} .page-template-page-startseite #content { padding-top:0; background: 0; } #banner_veranstaltung { padding: 15px 0;} #banner_veranstaltung h3 { margin-bottom: 0; display: inline-block; padding-right: 10px;} #banner_veranstaltung h3, #banner_veranstaltung a { line-height: 20px; display: table-cell; } #fullwidthheader { background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #fff; padding-top: 20px; } #fullwidthheader_content { position: relative; } .maintitle { position: relative; z-index: 3; color: #fff; padding-bottom: 25px; background: 0 none;} .maintitle h2 { font-size: 1.15em; padding-top: 20px;letter-spacing: .01em;} .motivbild_startseite { position: relative; background: 0; width: 100%; } .motivbild_startseite a { display: block; width: 100%; height: 100%;} .motivbild_startseite img { z-index: 2; max-width: 100%; display: block; } .motivbild_startseite .more-link, .motivbild_startseite .introtext_startseite { position: absolute;display: inline-block; padding: 10px 20px 10px 10px; color: #fff;background-color: #004073; left: 20px; bottom: 20px; z-index: 20; text-decoration: none !important; max-width: 90%;} .motivbild_startseite a .more-link {bottom: 30px;visibility: hidden; opacity: 0; } .motivbild_startseite:hover a .more-link { visibility: visible; opacity: 1;bottom: 20px;} .motivbild_startseite .introtext_startseite { bottom:40px;} .ms-info { padding: 10px 20px 10px 10px; color: #fff;background-color: #004073; font-size: .8em; position: absolute; bottom: 60px;} .ms-thumb { z-index: 10;} .motivbild_fullimage {padding-bottom: 25px !important;} .motivbild_fullimage a { position: relative; } .motivbild_fullimage img { -webkit-box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05); box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05); -webkit-border-radius: 3px; border-radius: 3px; max-width: 100%; } .motivbild_fullimage img[src*=".png"] {-webkit-box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0); box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.0); } #fullwidthheader_content .img_border img { border:2px solid #fff;} #fullwidthheader_content .img_border img:hover { border-color: #dce1e5;} .table_td_50, .table_td_25 { margin-top: 20px; border: 1px solid #f9f9f9; background: #fff; } .table_td h2 { margin-bottom: 5px; line-height: 1.2em;} .cols {display: flex; flex-direction: row; flex-wrap:wrap;align-items:stretch; justify-content: space-between;padding: 0 ; } #section_start_01 {margin-top: 20px;} .cols .content_textbox { padding: 20px; margin-bottom: 15px; width: 100%;} .cols .startbox { margin-bottom: 15px; width: 100%;} .startbox { background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;} .startbox h2 {font-size:1.25em;margin:0 0 0 0; display: inline-block; padding: 15px; color: #fff;background-color: #004073;} .startbox a { display: block; width: 100%; height: 100%;text-decoration: none; padding: 20px; background: 0; color: #fff;} .startbox a:hover, startbox a:focus, .startbox a:active, startbox:active { color:#fff !important; background-color: rgba(0, 64, 115, .9);} .startbox del { color: #fff;} .startbox:hover h2, .startbox:focus h2 { background: 0; padding-left: 0;} .startbox .td_content { width: 100%;opacity: 0; visibility: hidden;} .startbox:hover .td_content, startbox:focus .td_content { visibility: visible; opacity: 1; } .startbox .more-link { display: block;} .startbox .more-link:hover { color: #ddd;} .textboxen {display: flex; padding: 20px 0 0 0; text-align: center; } .textbox { width: 50%; } .textbox_content {height:100%; border: 1px solid #fff; padding: 10px;margin: 0 10px; text-align: center;} .greybox { background: #dce1e5;border-color: #dce1e5;} .bluebox { background: #004073; color: #fff;border-color: #004073;} .bluebox h2, .bluebox h3, .bluebox h4, .bluebox h5, .bluebox h6, .bluebox a { color: #fff !important;} .bluebox a:hover { color: #ddd !important;} .page-template-page-startseite .before_shariff { border-color: #fff;} #sidebar {position:relative; color:#004073; } #sidebar .sidebarcontent {padding: 18px ; margin-bottom: 20px; background-color: #dce1e5; border:2px solid #dce1e5;-webkit-box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05); box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.05); -webkit-border-radius: 3px; border-radius: 3px;} #sidebar h3, #sidebar h4, #sidebar h2, #sidebar h5, #sidebar h6, .inhaltsverzeichnis h3, .inhaltsverzeichnis h4, .inhaltsverzeichnis h2 { margin-top:0; font-size:1.25em; margin-bottom:15px; line-height:1.25em; letter-spacing: normal;} #sidebar h4 {font-size: 1.15em;} .sidebartitle { font-weight: bold ;} #sidebar ul , #sidebar ul li, .inhaltsverzeichnis ul, .inhaltsverzeichnis ul li {margin:0 0 10px 7px; list-style: none !important; padding: 0;} #sidebar a, #sidebar a:visited {color: #004073;} #sidebar a:hover, #sidebar a:active {color: #999;} #sidebar p {margin-bottom:10px;} #sidebar .current_page_item a {color:#999 !important;cursor:default !important; text-decoration:none;} #sidebar input, #sidebar select { max-width: 100%;} .sidebarcontent a, .inhaltsverzeichnis a, .inhaltsverzeichnis a small {text-decoration: none; display: inline-block;} .sidebarcontent sup { display: none;} .sidebarcontent a:hover, .inhaltsverzeichnis a:hover, .inhaltsverzeichnis a:hover small {text-decoration: underline; } .sidebarcontent ul, .inhaltsverzeichnis ul {padding: 7px 0 10px 5px; } .sidebarcontent li, .inhaltsverzeichnis li {margin: 0 0 7px 2px; padding: 0 0 0 6px; list-style: none; } .sidebarcontent li a small { display: block;} .sidebarcontent li ul {padding: 5px 10px; margin: 5px 0;} .sidebarcontent .inlinelist, .sidebarcontent .inlinelist li { margin: 0 !important; padding: 0 !important; display: inline-block; } .sidebarcontent .inlinelist li { width: 23%; } .sidebarcontent .inlinelist li a { padding: 0 10px 0 0; } .stellenangebote {border-color: #0099cc !important;} .stellenangebote a { color: #333; text-decoration: underline ;} .stellenangebote a:hover {color:#999;} .studynurse-jobs {border-color: #EC8C55 !important; } .studynurse-jobs h4 a, .studynurse-jobs h4 { color: #EC8C55; border-bottom: 2px dotted #ccc; padding: 0 0 10px 0 !important; margin-bottom: 10px !important; text-decoration: none !important;} .studynurse-jobs ul a { text-decoration: underline; background-position: right 7px;} .studynurse-jobs ul a:hover {color:#999;} .rss-widget-feed .rss-widget-icon, .rss-widget-feed { display: none !important; height: 0 !important; overflow: hidden;} .rss-widget-title { background: 0 !important; margin-top: 0 !important; padding-top: 0 !important } #sidebar .active_category,#sidebar .current-cat a,#sidebar .current_page_item a {color: #666; text-decoration: none; cursor: pointer;} #sidebar .current_page_item highlights a, body.parent-pageid-5018 .page-item-5018 a {cursor: default; color: #333;text-decoration: none; font-weight: bold;} #sidebar .active_category:hover,#sidebar .current-cat a:hover {color: #999; text-decoration: underline;} #sidebar .current-cat ul a, #sidebar .current_page_item ul a {color: #333 !important; font-weight: normal; cursor: pointer !important;} #sidebar .current-cat ul a:hover, #sidebar .current_page_item ul a:hover {color: #333;cursor: pointer; text-decoration: underline;} #sidebar ul ul,#sidebar .current_page_item ul ul,#sidebar .current_page_ancestor ul ul,#sidebar .current_page_ancestor .current_page_item ul ul,#sidebar .current_page_ancestor .current_page_ancestor ul ul { display: none; } #sidebar .current_page_item ul,#sidebar .current_page_ancestor ul,#sidebar .current_page_ancestor .current_page_item ul,#sidebar .current_page_ancestor .current_page_ancestor ul,#sidebar .current_page_ancestor .current_page_ancestor .current_page_item ul,#sidebar .current_page_ancestor .current_page_ancestor .current_page_ancestor ul { display: block; border: 1px dotted #999; border-width: 2px 0; padding: 10px 0 3px 8px; font-size: .9em; margin: 10px 0 0 0; line-height: 1.3em;} #sidebar ul ul ul { border: 0 !important;} .pageinfobox { font-size: .85em;} .pageinfobox small { font-size: .85em;} .inhaltsverzeichnis {border: 3px solid #ebebed; z-index: 2; background: #fff; padding: 0 0 25px 0; border-width: 0 0 3px 0; margin: 0 0 15px 0 !important; -webkit-border-radius: 3px; border-radius: 3px; display: block;} #auto-quicklinks {position: relative; padding: 0;}#auto-quicklinks label { padding: 0 0 0 15px; font-size: 1.1em; }#auto-quicklinks .show-quicklinks { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/menu-sidebar.png);background-position: right center;background-repeat: no-repeat;background-color: #F0EEEF;line-height: 38px; text-decoration: none;height: 38px;}#auto-quicklinks .show-quicklinks {display: block ;}#auto-quicklinks .show-quicklinks:hover {cursor: pointer;color:#999 !important;}input#show-quicklinks {display: none;}#quicklinklist {display: none ;height: 0;border-top: 1px dotted #eee;padding-top: 10px;margin: 0 12px;}input#show-quicklinks:checked ~ #quicklinklist{display: block ; height: auto;}input#show-quicklinks:checked ~ .show-quicklinks {background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/sidebar-close.png);color: #999;} .logged-in .memberslogin { border: 2px solid #fc0 !important;} .page-template-page-login .membershome, .page-id-26688 #sidebar .memberslogin, .members_only { display: none;} .quiz-link, a.button-link { padding: 4px 15px; border:1px solid #fc0; background: #f0f0f0; display: inline-block; text-decoration: none;font-weight: bold; margin: 15px 0; border-radius: 2px; font-size: 1.2em; line-height: 1.6em;} .quiz-link:hover, a.button-link:hover { background: #fff; border-color:#004073; color: #004073;} .logged-in .members_only { display: block;} .verweise_rubriken hr {border-width:0 0 1px 0; } .bannerbox { margin: 20px 0; } .banner-jt {background-image: url(https://www.abcsg.org/wp/wp-content/uploads/2024/08/ABCSG_34JT_Reg_ON_1400_sRGB.png) ; background-repeat: no-repeat; background-position: center center;text-decoration: none !important; width:100%; height: 170px; display: block; position: relative; text-indent: -9999px; background-size:100% auto; opacity: 1;} .banner-jt:hover { opacity: .8; background-image: url(https://www.abcsg.org/wp/wp-content/uploads/2024/08/ABCSG_34JT_Reg_OFF_1400_sRGB.png) ;} .postid-36215 .bannerbox, .postid-34180 .bannerbox {display: none;} form_table tr td label { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;} .jt_anmeldung { max-width: 100% !important;} .jt_anmeldung tr td { padding: 4px 15px 4px 0;} .jt_anmeldung tr td:first-child label{white-space:nowrap!important; width: 200px; } #footer { padding:25px 0; background-color: #dce1e5; color: #004073; line-height: 1.3em; } #footer a, #footer a:visited {color: #004073;} #footer a:hover, #footer a:active {color: #666;} #footercontent .footersection { padding:0 3% 25px 0;} #footercontent .footersection h6 { margin: 0 0 15px 0; text-transform: uppercase; color:#004073; font-size: 1.1em; } #footer ul li { margin: 0 0 12px 0; list-style: none;} .scroll-to-top-button { position: fixed;left: 10px;bottom: 0;margin: 0;padding: 0;width: 50px;height: 50px;z-index: 9999; cursor: pointer; line-height: 50px; border-radius: 2px; background: none; color: #333;} .scroll-to-top-button:hover {color: #004073;} .scroll-to-top-button:after {display: inline-block;margin-left: 2px;content: '\f062';vertical-align: top;font-size: 32px;font-family: 'FontAwesome';line-height: 1; } #channels {position: fixed; right: 0; top: 175px; width: 40px; z-index: 20; } #channels li { position: relative; width: 40px; height: 40px; margin-bottom: 7px; display:block; background: #f7a02c;-webkit-border-radius: 50%;border-radius: 50%; margin-left: 15px; } #channels li:hover {margin-left: -2px;} #channels li.socialmedia {margin-top: 25px;} #channels li a {position:absolute;left:0;top:0;width:100%;height:100%;display:block; text-indent:-99999px;z-index:2; font-size: 0;background-color: #0099cc; background-position: center; background-repeat: no-repeat; background-size: 55% auto; -webkit-border-radius: 3px;border-radius: 3px; -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.2); box-shadow: 0 1px 2px 1px rgba(0,0,0,.2);} #channels li.login, #channels li.loggedin {margin-bottom: 20px;} body.logged-in #channels li.login { display: none;} #channels li.login a { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/locked64.png); } #channels li.loggedin a { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/unlocked64.png);} #channels li.loggedin {display: none; } body.logged-in #channels li.loggedin { display: block;} #channels li a[href*="facebook"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/facebook.png);} #channels li a[href*="twitter"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/x.png);} #channels li a[href*="pinterest"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/pinterest.png);} #channels li a[href*="feed"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/rss.png); } #channels li a[href*="youtube"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/youtube.png); } #channels li a[href*="plus.google"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/google.png); } #channels li a[href*="instagram"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/instagram.png); } #channels li a[href*="linkedin"] { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/linkedin.png); } #channels li.eot a { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/eot.jpg);background-color: #fff;background-size: 75% auto; } #channels li.fsn a { background-image: url(//www.abcsg.org/wp/wp-content/themes/ABCSG_DE_6.6/pics/fsn.png); background-color: #a5c8e1; background-size: 75% auto; } .red, .red a {color:#f00;font-weight:bold;} .blue, .blue a {color:#004073; font-weight:bold;} .experts, .experts a {color: #c36 ; } .forum, .forum a { color: #EC8C55 ;} .bold, strong, b { font-weight:700;} .bolder { font-weight: bolder;} .lightgrey { color: #999;} .grey { color: #666;} .noborder, tr.noborder td {border: 0 !important;} .uppercase { text-transform: uppercase;} .hide { display: none !important; opacity: 0;} .nowrap { white-space: nowrap;} .link { text-decoration: underline !important;} #navi ul:after, .wp-pagenavi:before, #header:after, #navi:after, .clear, hr:before, .clear:before,.responsive-tabs-wrapper:before,.responsive-tabs-wrapper:after {content: " "; height: 0; clear: both; visibility: hidden;font-size: 0; display:table;} .button, .wp-pagenavi a, button, input[type="submit"], input[type="button"], input[type="reset"], .wp-pagenavi .current, .frm_logout_link, .frm_logout_link:visited{-webkit-border-radius: 2px;border-radius: 2px;border:1px solid #999;letter-spacing:1px;padding:5px 7px;font-weight:bold;line-height:1.6em; background-color: #e6e6e6; text-decoration: none !important;} .button:hover, input[type="submit"]:hover, .wp-pagenavi a:hover, input[type="button"]:hover, input[type="reset"]:hover, .frm_logout_link:hover, .frm_logout_link:focus, .frm_logout_link:active {border-color: #fbc500;cursor:pointer;color:#000; background-color: #ebebeb; } .shadow, .shadowlink {-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.05); box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.05);-webkit-border-radius: 3px; border-radius: 3px; } .shadowlink:hover { -webkit-box-shadow: inset 3px 3px 6px 0 rgba(0, 0, 0, 0); box-shadow: inset 3px 3px 6px 0 rgba(0, 0, 0, 0);} .more-link:before, .termin-tabelle td a[href*="abcsg.at"]:before, .termin-tabelle td a[href*="abcsg.org"]:before, .sidebarcontent li:before, .inhaltsverzeichnis li:before, .phone:before, .mailto:before, .adresse:before, #footer ul li:before, .cellphone:before, #quicklinklist li:before, .sp-head:before, .quiz-link:before, .termin-tabelle td .more-link-wrapper a:before {font-family: 'FontAwesome'; display: inline-block; width: 15px; } .more-link:before, .termin-tabelle td a[href*="abcsg.at"]:before, .termin-tabelle td a[href*="abcsg.org"]:before, .quiz-link:before, a.button-link:before, .termin-tabelle td .more-link a:before, .termin-tabelle td .more-link-wrapper a:before {content: "\f061"; font-size: .9em; width: 20px; display: inline-block;} .sidebarcontent li:before, .inhaltsverzeichnis li:before,#quicklinklist li:before {content: "\f0da"; position: absolute; left: -13px; top: 0; display: block; font-size: 1em; color: #999;} .more-link:before { width: 30px;} .phone:before {content: "\f095"; width: 25px;} .adresse:before {content: "\f041"; width: 25px; } .mailto:before {content: "\f0e0"; width: 22px;} .cellphone:before {content: "\f10b"; width: 25px; } #footer ul li:before, .sidebarcontent ul li li:before {content: "- ";font-weight: bold;} .inlinelist li:before, .termin-tabelle td a[href*=".pdf"]:before { content: ""; width: 0; } @media screen and (min-width:400px) { .pageinfobox { background:#fff; padding:0 0 25px 20px; float: right; display: inline; width: 30%; position: relative;} .inhaltsverzeichnis { border-width: 3px;padding: 15px 6.5% 0 6.5%; margin: 0; } } @media screen and (min-width:480px) { h1 .logo { width: 30%; max-width: 150px;} #channels { top: 85px;} .fourcols .content_textbox { width: 50%;} } @media screen and (max-width:499px) { h1 { padding-right: 25px;} #flags {right:70px;} table { overflow-x: auto; display: block; padding-bottom: 20px; width: 100%;} #banner_veranstaltung { padding: 0 3%;} #banner_veranstaltung h3 { display: block; padding: 0 0 7px 0;} .responsivetable { overflow: hidden; width: 100% !important;} .responsivetable thead th { display: none;} .responsivetable td { display: block; width: 100% !important; padding: 3px; white-space: nowrap;} .responsivetable tr td:first-child { font-weight: bold; border-top:1px solid #ddd; padding-top: 10px;} .responsivetable tr:last-child td { border-bottom: 1px dotted #ddd; padding-bottom: 3px;} .responsivetable tr:last-child td:last-child { border-bottom: 0;} .desktop_only { display: none; height: 0; overflow: hidden;} #storycontent img.alignleft, #storycontent img.alignright { max-width:100%; float: none; display: block; margin: 10px 0;} } @media screen and (min-width:500px) { .headerlogin {left: 95px;} .mobilheadersearch input:focus, .mobilheadersearch input:active { max-width: 500px; width: 450px; } #footercontent .footersection { display: inline; float: left; width: 50%;} .verweise_rubriken { display: table;} .verweise_rubriken h3 { margin-top: 0;} .verweise_rubriken .table_td_50 { display: table-cell; width: 60% !important; padding: 20px 0 10px 20px; border:0; border-top: 2px dotted #ddd; } .verweise_rubriken .table_td_first { padding-left: 0; width:40% !important;} .picscolumn {float: right; width: auto; height: auto; margin: 0 0 20px 20px; max-width:35%; font-size: .8em; line-height: 1.4em; } } @media screen and (max-width:600px) { .breadcrumb, .wpml-ls-native { display: none;} .studien-quicklinks { width: 100% !important; margin-left: 0; padding-left: 0;} #storycontent .alignright, #storycontent .alignleft { display: block; margin: 10px 0; max-width: 100%;} } @media screen and (min-width:699px) { .mobilheadersearch input:focus, .mobilheadersearch input:active { max-width: 600px; width: 600px; } .maintitle { text-align: left; vertical-align: middle; padding: 0; } .maintitle h2 { font-size: 1.2em; padding: 0; } .motivbild_startseite { margin: 5px 0 0 0; padding: 0 0 0 0; } .textbox { width: 33.333333333333333333333%;} } @media screen and (max-width:749px) { body { font-size:17px;line-height:1.5em;} .teaser { display: none !important:} } @media screen and (min-width:480px) and (max-width:749px) { .table_table .table_td_25 { width: 49%; display: inline-block; float: left; margin-right: .5%;margin-left:.5%; } } @media screen and (min-width:750px) { .picscolumn { max-width: 45%;} #footercontent .section50 { width: 50%;} #footercontent .section25 { width: 25%; padding-top: 55px;} .table_table { display: table; width: 100%; padding-top: 20px;} .table_td { display:table-cell; margin: 0; vertical-align:top; padding: 0;} .table_td_50 {width: 49%; } .table_td_spacer { width: 2%;} .table_td_25 { width: 23.5%; float: none;} .twocols .startbox, .twocols .introbox { width: 49.5%;} .fourcols .content_textbox { width: 24%;} .twocols .introbox {display: table-cell; vertical-align: middle; min-height:300px;} .maintitle_content { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);} .startbox {height: 350px; } .startbox h2 { font-size: 1.5em;} .startbox .td_content { width: 100%; position: absolute; left: 0; opacity: 0 ; bottom: 0; visibility: hidden; padding: 20px; } #storycontent {min-height: 450px; width: 75%; float: right; padding:0 0 0 2.5%;} .page-template-page-startseite #storycontent, .page-template-page-portal #storycontent { width: 100%; float: none;} #sidebar {width:25%; float: left; } } @media screen and (min-width:851px) { h1 { width: 75%; font-size: 1.2em; padding-top: 15px; } h1 .logo { vertical-align: bottom;} #headerbuttons { margin: 0; padding: 0; border: 0; } #spenden { position: absolute; right:0; bottom: 0; margin: 0; width: 200px; } .maintitle { font-size: 1.2em; } .gallery-item { width: 18%; } #channels li { margin-left: 15px; } .scroll-to-top-button { position: fixed;left:auto;bottom: 40px; right: 40px;} .textbox { width: 25%;} } @media screen and (max-width:870px) { .pageinfobox { max-width:100%; float: none; display: block; margin: 10px 0;} .pageinfobox { width: 100%; padding-left: 0 !important;} } @media screen and (min-width:901px) { #header { padding-top: 0;} .headerlogin { top: 20px; left: auto; right: 0; } #flags { right:110px; margin-top: 0; z-index: 10;} #navi { display: block; } .mobilheadersearch { display: none;} #post {border-top:0;} } @media screen and (min-width:950px) { #channels { top: 40%; width: 60px; } #channels li { margin-left:20px; margin-right: auto; } #channels li:hover {margin-left: 0;} } @media screen and (min-width:1000px) { h1 { font-size: 1.4em; } .colon-header,.abcsgzentren-header, .research-header { background-color:#E5F2F8; background-image: url(https://www.abcsg.org/wp/wp-content/uploads/2012/08/CB_BOX_214x95.jpg);background-repeat: no-repeat;background-position: right center;height: 95px;}.abcsgzentren-header {background-color:#fff; background-image: url(https://www.abcsg.org/wp/wp-content/uploads/2015/12/abcsg_logo_214-95.jpg);}.research-header {background-color:#fff; background-image: url(https://www.abcsg.org/wp/wp-content/uploads/2016/01/abcsg.research-214x74.jpg);height: 73px;} } @media screen and (min-width:1200px) { #fullwidthheader_content { padding: 50px 0;} .page-template-page-startseite #fullwidthheader_content { padding: 20px 0;} .ms-info { font-size: 1em;} h1 { font-size: 1.6em; } h1 a .logo { padding-right: 25px;} h1 a .headline span { padding-bottom: 7px;} #section_start_singlenews .table_td_25 a .teaser h3 { font-size: 1em; font-weight: bold;} #section_start_singlenews .table_td_25:hover a .teaser h3 { font-size: .8em;} .maintitle h2 { font-size: 2em; line-height: 1.25em; letter-spacing: normal; } .page-template-page-startseite #content, .page-template-page-portal #content { background: #fff;} #content { padding-right: 0;} #channels { width: 65px; top: 30%; margin-right:0;} #channels li { width: 55px; height: 55px; margin:0 0 7px 10px; } } @media screen and (min-width:1200px) { #navi { font-size: .85em;} } .animated { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animatedSlow { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } .animatedFast { -webkit-animation-duration: 1s; animation-duration: 1s; } .animatedDelayed { animation-delay: .5s; -webkit-animation-delay: .5s; } .animatedDelayed2 { animation-delay: 1s; -webkit-animation-delay: 1s; } .animatedDelayed3 { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; } .animatedDelayed4 { animation-delay: 2s; -webkit-animation-delay: 2s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 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 fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 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 fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 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 fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; }