.mod_dlh_googlemaps img { max-width: none; } @charset "UTF-8"; /** * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework * * (en) YAML core stylesheet * (de) YAML Basis-Stylesheet * * Don't make any changes in this file! * Your changes should be placed in any css-file in your own stylesheet folder. * * @copyright Copyright 2005-2009, Dirk Jesse * @license CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/), * YAML-C (http://www.yaml.de/en/license/license-conditions.html) * @link http://www.yaml.de * @package yaml * @version 3.2 * @revision $Revision:426 $ * @lastmodified $Date:2009-10-21 21:12:11 +0200 (Mi, 21. Okt 2009) $ */ /** * Contao Extension * @copyright Felix Pfeiffer : Neue Medien 2007 - 2012 * @author Felix Pfeiffer * @package Subcolumns */ @media screen{.subcolumns{width:100%;overflow:hidden}.subcolumns_oldgecko{width:100%;float:left}.c20l,.c20r{width:20%}.c40l,.c40r{width:40%}.c60l,.c60r{width:60%}.c80l,.c80r{width:80%}.c25l,.c25r{width:25%}.c33l,.c33r{width:33.333%}.c50l,.c50r{width:50%}.c66l,.c66r{width:66.666%}.c75l,.c75r{width:75%}.c38l,.c38r{width:38.2%}.c62l,.c62r{width:61.8%}.c15l,.c15r{width:15%}.c16l,.c16r{width:16.666%}.c30l,.c30r{width:30%}.c45l,.c45r{width:45%}.c55l,.c55r{width:55%}.c70l,.c70r{width:70%}.c85l,.c85r{width:85%}.subc{padding:0 .5em}.subcl{padding:0 1em 0 0}.subcr{padding:0 0 0 1em}.equalize,.equalize .subcolumns{overflow:visible;display:table;table-layout:fixed}.equalize > div{display:table-cell;float:none;overflow:hidden;vertical-align:top;margin:0}.c20l,.c25l,.c33l,.c40l,.c38l,.c50l,.c60l,.c62l,.c66l,.c75l,.c80l,.c15l,.c16l,.c30l,.c45l,.c55l,.c70l,.c85l{float:left}.c20r,.c25r,.c33r,.c40r,.c38r,.c50r,.c60r,.c66r,.c62r,.c75r,.c80r,.c15r,.c16r,.c30r,.c45r,.c55r,.c70r,.c85r{float:right;margin-left:-5px}}@media print{.subcolumns > div{display:table;overflow:visible}} /** * cookiebar extension for Contao Open Source CMS * * Copyright (C) 2013 Codefog * * @package cookiebar * @author Codefog * @author Kamil Kuzminski * @license LGPL */ #cookiebar{position:fixed;left:0;width:100%;background-color:#4b4b4b;padding:8px 16px;text-align:center;font-size:13px;color:#fff;line-height:2;z-index:10}#cookiebar.top{top:0}#cookiebar.bottom{bottom:0}#cookiebar span{margin-right:1em}#cookiebar button{height:26px;padding:0 12px;border:0;background-color:#4ea55e;color:#fff;cursor:pointer;font-weight:bold;line-height:26px}#cookiebar a{margin-left:1em;color:#fff;text-decoration:underline}#cookiebar a:hover{text-decoration:none} /* ============================================================================= * reset & defaults * ========================================================================== */ /* reset ------------------------------------------------- */ * { margin: 0; padding: 0; border: 0; outline: 0; background-repeat: no-repeat; } #wrapper *, #styler-panel *, #cookiebar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #colorbox *, #wrapper .mejs-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } ol, ul { list-style: none; } table { border-spacing: 0; width: 100%; } /* float classes ------------------------------------------------- */ .float-left { float: left; } .float-right { float: right; } /* lightbox link height ------------------------------------------------- */ .image_container a { line-height: 0; } .image_container a[target="_blank"]::before { display: none !important; } /* lightbox width ------------------------------------------------- */ #mbCenter img { width: auto; max-width: 100%; height: auto; vertical-align: middle; } /* clearings + defaults ------------------------------------------------- */ .inside { position:relative; text-align:left; } .block { overflow:hidden; } .clear, #clear { height:0.1px; font-size:0.1px; line-height:0.1px; clear:both; } .invisible { width:0; height:0; left:-1000px; top:-1000px; position:absolute; overflow:hidden; display:inline; } .custom { display:block; text-align:left; } .custom:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } *+html #main { position:static; } header, footer, nav,section, aside, article, figure, figcaption { display:block; } #container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* icon-font ------------------------------------------------- */ body[class^="icon-"]:before, body[class*="icon-"]:before, .ce_list[class^="icon-"]:before, .ce_list[class*="icon-"]:before, .mod_navigation li[class^="icon-"]:before, .mod_navigation li[class*="icon-"]:before { content: ''; } .i-code { display: none; } /* ============================================================================= * general styles & page setup * ========================================================================== */ a { text-decoration: underline; color: inherit; } p { margin-bottom: 15px; } blockquote { font-style: italic; font-size: 16px; margin-bottom: 20px; } blockquote p { line-height: 22px; } iframe { max-width: 100%; } .image_container img { max-width: 100%; display: block; height: auto; margin: 0 auto; } code, pre { font-family: monospace; } hr { padding: 0; border: none; border-top: medium double #ddd; color: #ccc; text-align: center; height: 1px; margin: 25px 0; } strong { font-weight: 600; /* neuen Schriftschnitt anlegen */ } /* divider/border for ce_elements ------------------------------------------------- */ .border-top { border-top: 1px solid #ccc; padding-top: 20px; } .border-bottom { border-bottom: 1px solid #ccc; padding-bottom: 20px !important; } /* headlines ------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { padding: 0.75em 0 0.2em; margin-bottom: 0.4em; line-height: 1.4; font-family: 'ClanWeb-Book', sans; color: #386169; font-weight: 300; } h1 { font-size: 34px; font-size: 2.125rem; margin-top: 30px; } h2 { font-size: 22px; font-size: 1.375rem; font-family: 'PMNCaeciliaETW08-Roman', sans; } h3 { font-size: 18px; font-size: 1.125rem; color: #a9a275; } h3 a { color: #a9a275; text-decoration: none; } h4 { font-size: 16px; font-size: 1rem; } h5 { font-size: 14px; font-size: 0.875rem; line-height: 1; } h6 { font-size: 30px; font-size: 1.875rem; text-transform: uppercase; padding: 0; margin-bottom: 0; } /* body ------------------------------------------------- */ body { color: #555; overflow-x: hidden; background-repeat: repeat; -webkit-font-smoothing: subpixel-antialiased; } /* list ------------------------------------------------- */ .ce_text ul, .ce_list ul, .ce_text ol, .ce_list ol {margin-bottom: 15px;} .ce_text li, .ce_list li, .ce_text ol, .ce_list ol {line-height: 1.5em;} .ce_text ol, .ce_list ol {list-style: decimal; padding-left: 25px;} .ce_text ol ol, .ce_list ol ol {list-style: upper-alpha;} .ce_text ol ol ol, .ce_list ol ol ol {list-style: lower-roman;} /* ============================================================================= global ========================================================================== */ @-webkit-viewport{width:device-width;} @-moz-viewport{width:device-width;} @-ms-viewport{width:device-width;} /* ie10 fix scrollbar "width:auto !important" */ @-o-viewport{width:device-width;} @viewport{width:device-width;} html { font-size: 100%; } /* columns for better content separation -responsive ------------------------------------------------- */ .full { overflow: hidden; margin-left: 0; width:100%; position:relative; } .one_half, .one_half_2 { overflow: hidden; margin-left: 2%; width:49%; float:left; position:relative; } .one_half_4 { overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative; } .one_half_8 { overflow: hidden; margin-left: 8%; width:46%; float:left; position:relative; } .one_third, .one_third_2 { overflow: hidden; margin-left: 2%; width:32%; float:left; position:relative; } .one_third_4 { overflow: hidden; margin-left: 4%; width:30.66666667%; float:left; position:relative; } .one_third_8 { overflow: hidden; margin-left: 8%; width:28%; float:left; position:relative; } .two_third, .two_third_2 { overflow: hidden; margin-left: 2%; width:66%; float:left; position:relative; } .two_third_4 { overflow: hidden; margin-left: 4%; width:65.33333333%; float:left; position:relative; } .two_third_8 { overflow: hidden; margin-left: 8%; width:64%; float:left; position:relative; } .one_fourth, .one_fourth_2 { overflow: hidden; margin-left: 2%; width:23.5%; float:left; position:relative; } .one_fourth_4 { overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative; } .one_fourth_8 { overflow: hidden; margin-left: 8%; width:19%; float:left; position:relative; } .two_fourth, .two_fourth_2 { overflow: hidden; margin-left: 2%; width:49%; float:left; position:relative; } .two_fourth_4 { overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative; } .two_fourth_8 { overflow: hidden; margin-left: 8%; width:46%; float:left; position:relative; } .three_fourth, .three_fourth_2 { overflow: hidden; margin-left: 2%; width:74.5%; float:left; position:relative; } .three_fourth_4 { overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative; } .three_fourth_8 { overflow: hidden; margin-left: 8%; width:73%; float:left; position:relative; } .one_fifth, .one_fifth_2 { overflow: hidden; margin-left: 2%; width:18.4%; float:left; position:relative; } .one_fifth_4 { overflow: hidden; margin-left: 4%; width:16.8%; float:left; position:relative; } .one_fifth_8 { overflow: hidden; margin-left: 8%; width:13.6%; float:left; position:relative; } .two_fifth, .two_fifth_2 { overflow: hidden; margin-left: 2%; width:38.8%; float:left; position:relative; } .two_fifth_4 { overflow: hidden; margin-left: 4%; width:37.6%; float:left; position:relative; } .two_fifth_8 { overflow: hidden; margin-left: 8%; width:35.2%; float:left; position:relative; } .three_fifth, .three_fifth_2 { overflow: hidden; margin-left: 2%; width:59.2%; float:left; position:relative; } .three_fifth_4 { overflow: hidden; margin-left: 4%; width:58.4%; float:left; position:relative; } .three_fifth_8 { overflow: hidden; margin-left: 8%; width:56.8%; float:left; position:relative; } .four_fifth, .four_fifth_2 { overflow: hidden; margin-left: 2%; width:79.6%; float:left; position:relative; } .four_fifth_4 { overflow: hidden; margin-left: 4%; width:79.2%; float:left; position:relative; } .four_fifth_8 { overflow: hidden; margin-left: 8%; width:78.4%; float:left; position:relative; } .full, *[class^="one_"].first, *[class*="one_"].first, *[class^="two_"].first, *[class*="two_"].first, *[class^="three_"].first, *[class*="three_"].first, *[class^="four_"].first, *[class*="four_"].first { margin-left: 0!important; clear: left; } .offset_one_half.first { margin-left: 52% !important; } .offset_one_third.first { margin-left: 35% !important; } .offset_two_third.first { margin-left: 70% !important; } .offset_one_fourth.first { margin-left: 26% !important; } .offset_two_fourth.first { margin-left: 52% !important; } .offset_three_fourth.first { margin-left: 78% !important; } .offset_one_fifth.first { margin-left: 21% !important; } .offset_two_fifth.first { margin-left: 41% !important; } .offset_three_fifth.first { margin-left: 61% !important; } .offset_four_fifth.first { margin-left: 83% !important; } .offset_one_half { margin-left: 56% !important; } .offset_one_third { margin-left: 40% !important; } .offset_two_third { margin-left: 75% !important; } .offset_one_fourth { margin-left: 30% !important; } .offset_two_fourth { margin-left: 56% !important; } .offset_three_fourth { margin-left: 82% !important; } .offset_one_fifth { margin-left: 26% !important; } .offset_two_fifth { margin-left: 45% !important; } .offset_three_fifth { margin-left: 65% !important; } .offset_four_fifth { margin-left: 87% !important; } .center { text-align: center; } /* wrapper ------------------------------------------------- */ #wrapper { opacity: 1; overflow: hidden; transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; } .small-screen.sidebar-active #wrapper { opacity: 0.3; } /* header ------------------------------------------------- */ #header { background-color: rgba(255, 255, 255, 0.96); position: fixed; width: 100%; z-index: 999; } #header .inside { height: 130px; } .small-header #header { background-image: none; } #header .ce_gallery, #header .mod_article { overflow: visible; } /* custom ------------------------------------------------- */ .custom { padding-top: 130px; /* Höhe von header .inside */ } .custom #subheader { position: relative; background-size: cover; } #sidebar { display: none; position: fixed; padding-top: 100px; height: 100%; width: 320px; z-index: 9990; top: 0; left: -320px; background-color: #A9A275; transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .sidebar-active #sidebar { left: 0; } /* subheader ------------------------------------------------- */ .big-header #subheader .inside, .big-header #subheader .article_inside { width: 100%; margin: 0 auto; } /* container ------------------------------------------------- */ #container { clear: both; margin: 0 auto; position: relative; overflow: visible; } .small-header #container { background-image: none; } .no-subheader #container { border-top: 1px solid #a9a275; } #container-inside { padding: 0; } #container-inside:after { clear: both; content: " "; display: block; height: 0; visibility: hidden; } .home #container { background: url("../../files/media/headerimages/higru_startseite_small.jpg") no-repeat; background-size: cover; } /* footer ------------------------------------------------- */ #footer { font-size: 13px; font-size: 0.875rem; line-height: 1.9; } #footer .inside { padding: 1%; overflow: hidden; } /* container colors ------------------------------------------------- */ #container-inside { background-color: rgba(255,255,255,1); } .home #container-inside { background-color: rgba(255,255,255,0.7) } #footer { border-top: 7px solid #386169; background-color: #333; color: #fff; } /* Logo ------------------------------------------------- */ #logo { width: 200px; top: 15px; left: 30px; position: absolute; } /* Hide on desktop */ .hidedesktop { display: none; } /* ============================================================================= end global styles ========================================================================== */ /* ============================================================================= Desktop | 1140 Pixel ========================================================================== */ @media only screen and (min-width: 1140px) { /* page-width layout_full ------------------------------------------------- */ #header .inside, .article_inside, #footer .inside { width: 1140px; margin: 0 auto; } .small-header #subheader .inside { min-height: 300px; } .big-header #subheader .inside { min-height: 500px; } .slider-header #subheader .inside { min-height: 300px; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet landscape | 960 Pixel ========================================================================== */ } @media only screen and (min-width: 960px) and (max-width: 1139px) { html { font-size: 90%; } /* page-width layout_full ------------------------------------------------- */ #header .inside, .article_inside, #footer .inside { width: 960px; margin: 0 auto; } .small-header #subheader .inside { min-height: 300px; } .big-header #subheader .inside { min-height: 500px; } .slider-header #subheader .inside { min-height: 300px; } /* footer ------------------------------------------------- */ #footer { font-size: 15px; font-size: 0.9375rem; line-height: 1.9; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet portrait | 768 Pixel ========================================================================== */ } @media only screen and (min-width: 768px) and (max-width: 959px) { html { font-size: 80%; } /* Logo ------------------------------------------------- */ #logo { width: 200px; position: static; margin: 0 auto 0 auto; padding-top: 20px; } /* custom ------------------------------------------------- */ #sidebar { display: block; } /* page-width layout_full ------------------------------------------------- */ #header .inside, .article_inside, #footer .inside { width: 728px; margin: 0 auto; } .small-header #subheader .inside, .big-header #subheader .inside { min-height: 250px; } .slider-header #subheader .inside { min-height: 250px; } /* footer ------------------------------------------------- */ #footer { font-size: 14px; font-size: 0.875rem; line-height: 1.9; } /* ============================================================================= end tablet portrait ========================================================================== */ /* ============================================================================= Phone landscape | 480 Pixel ========================================================================== */ } @media only screen and (min-width: 480px) and (max-width: 767px) { html { font-size: 80%; } /* page-width layout_full ------------------------------------------------- */ #header { position: static; } #header .inside, .article_inside, #footer .inside { width: 456px; margin: 0 auto; } .small-header #subheader .inside, .big-header #subheader .inside { min-height: 200px; } .slider-header #subheader .inside { min-height: 200px; } /* ============================================================================= end phone landscape ========================================================================== */ /* ============================================================================= Phone portrait | 300 Pixel ========================================================================== */ } @media only screen and (max-width: 479px) { html { font-size: 80%; } /* page-width layout_full ------------------------------------------------- */ #header { position: static; } #header .inside, .article_inside, #footer .inside { width: 300px; margin: 0 auto; } .small-header #subheader .inside, .big-header #subheader .inside { min-height: 200px; } .slider-header #subheader .inside { min-height: 150px; } /* ============================================================================= end phone portrait ========================================================================== */ /* ========================================================================== global phone styles ========================================================================== */ } @media only screen and (max-width: 767px) { html { font-size: 80%; } /* Logo ------------------------------------------------- */ #logo { width: 200px; position: static; margin: 0 auto 0 auto; padding-top: 20px; } /* custom ------------------------------------------------- */ #sidebar { display: block; position: absolute; } .custom { padding-top: 0; /* Höhe von header .inside */ } /* footer ------------------------------------------------- */ #footer { font-size: 14px; font-size: 0.875rem; line-height: 1.9; } /* css-framework */ .full, *[class^="one_"], *[class*="one_"], *[class^="two_"], *[class*="two_"], *[class^="three_"], *[class*="three_"], *[class^="four_"], *[class*="four_"] {width: 100%; margin: 0 0 15px 0;} /* extension subcolumns */ .c20r, .c25r, .c33r, .c40r, .c38r, .c50r, .c60r, .c66r, .c62r, .c75r, .c80r, .c15r, .c16r, .c30r, .c45r, .c55r, .c70r, .c85r, .c20l, .c25l, .c33l, .c40l, .c38l, .c50l, .c60l, .c66l, .c62l, .c75l, .c80l, .c15l, .c16l, .c30l, .c45l, .c55l, .c70l, .c85l {float: none; width: 100%; padding: 0; margin: 0;} .subcr, .subcl, .subc {padding: 0!important;} /* ce_gallery */ .ce_gallery .row2, .ce_gallery .row3, .ce_gallery .row4, .ce_gallery .row5, .ce_gallery .row6, .ce_gallery .row7, .ce_gallery .row8, .ce_gallery .row9, .ce_gallery .row10, .ce_gallery .row11, .ce_gallery .row12 { width: 100%; margin-left: 0;} /* Offset */ .offset_one_half, .offset_one_half.first { margin-left: 0 !important; } .offset_one_third, .offset_one_third.first { margin-left: 0 !important; } .offset_two_third, .offset_two_third.first { margin-left: 0 !important; } .offset_one_fourth, .offset_one_fourth.first { margin-left: 0 !important; } .offset_two_fourth, .offset_two_fourth.first { margin-left: 0 !important; } .offset_three_fourth, .offset_three_fourth.first{ margin-left: 0 !important; } .offset_one_fifth, .offset_one_fifth.first { margin-left: 0 !important; } .offset_two_fifth, .offset_two_fifth.first { margin-left: 0 !important; } .offset_three_fifth, .offset_three_fifth.first { margin-left: 0 !important; } .offset_four_fifth, .offset_four_fifth.first { margin-left: 0 !important; } /* Hide on mobile */ li.hide, .hidelink a { display: none !important; } /* Hide on desktop */ .hidedesktop { display: block; } /* ========================================================================== global phone styles ========================================================================== */ } /* first for IE 4–8 */ @font-face { font-family: ClanWeb-Book; src: url("../../files/layout/font/ClanWeb-Book.eot"); } /* then for WOFF-capable browsers */ @font-face { font-family: ClanWeb-Book; src: url("../../files/layout/font/ClanWeb-Book.woff") format("woff"); } /* first for IE 4–8 */ @font-face { font-family: ClanWeb-News; src: url("../../files/layout/font/ClanWeb-News.eot"); } /* then for WOFF-capable browsers */ @font-face { font-family: ClanWeb-News; src: url("../../files/layout/font/ClanWeb-News.woff") format("woff"); } @import url("http://fast.fonts.com/t/1.css?apiType=css&projectid=0caf7c45-5c12-4c3e-8217-7eb43b2803a6"); @font-face{ font-family:"PMNCaeciliaW01-55Roman"; src:url("../../files/layout/font/3097ee5d-c6ed-4941-9255-50eca8b30bd8.eot?#iefix"); src:url("../../files/layout/font/3097ee5d-c6ed-4941-9255-50eca8b30bd8.eot?#iefix") format("eot"),url("../../files/layout/font/dc28a9c2-3c69-451a-98e3-6dcdae1343d8.woff") format("woff"),url("../../files/layout/font/a2885a75-2fe7-425f-a2cb-7f24f10d47b1.ttf") format("truetype"),url("../../files/layout/font/ec258d3d-dfc5-4901-b2c4-47a827761655.svg#ec258d3d-dfc5-4901-b2c4-47a827761655") format("svg"); } @font-face{ font-family:"PMNCaeciliaW01-55Roman"; src:url("../../files/layout/font/e9938f19-f9be-4b47-9f5a-c3441c7b84a2.eot?#iefix"); src:url("../../files/layout/font/e9938f19-f9be-4b47-9f5a-c3441c7b84a2.eot?#iefix") format("eot"),url("../../files/layout/font/57d0d8b3-dd92-4639-bc73-f54734f54f3d.woff") format("woff"),url("../../files/layout/font/e8f97b23-e117-4d0a-abc8-4a6112d9794f.ttf") format("truetype"),url("../../files/layout/font/f97046a6-1405-40e5-80e8-282eccce10b8.svg#f97046a6-1405-40e5-80e8-282eccce10b8") format("svg"); } @font-face{ font-family:"PMNCaeciliaETW08-Roman"; src:url("../../files/layout/font/7e910f17-1d7c-48f3-9064-24841f12e644.eot?#iefix"); src:url("../../files/layout/font/7e910f17-1d7c-48f3-9064-24841f12e644.eot?#iefix") format("eot"),url("../../files/layout/font/913ed0c7-e086-4f49-b5da-b136df1ba7f6.woff") format("woff"),url("../../files/layout/font/0d895a55-2ddc-4dae-a946-3b5394891f7a.ttf") format("truetype"),url("../../files/layout/font/07297f82-4027-4574-a059-1bb131dedd99.svg#07297f82-4027-4574-a059-1bb131dedd99") format("svg"); } @font-face { font-family: 'icons'; src: url('../../files/layout/font/icons.eot?17758405'); src: url('../../files/layout/font/icons.eot?17758405#iefix') format('embedded-opentype'), url('../../files/layout/font/icons.woff?17758405') format('woff'), url('../../files/layout/font/icons.ttf?17758405') format('truetype'), url('../../files/layout/font/icons.svg?17758405#icons') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*="icon-"]:before, .show-menu-button:before, .checkbox_container label:before, .radio_container label:before { border-radius: 100%; display: inline-block; font-family: 'icons'; font-style: normal; font-weight: normal; line-height: 25px; margin-right: 0.5em; text-align: center; text-decoration: inherit; width: 25px; } .icon-ok:before { content: '\e800'; } /* '?' */ .icon-menu:before { content: '\e801'; } /* '?' */ .icon-left-open:before { content: '\e803'; } /* '?' */ .icon-right-open:before { content: '\e802'; } /* '?' */ /* ============================================================================= global ========================================================================== */ /* all boxes ------------------------------------------------- */ .box.round,.box_round, .box.round img, .box_round img { border-radius: 50%;-webkit-background-clip: padding-box; } .box a { opacity: 1 !important; color: #fff !important; } .box h3, .box h4 { font-family: 'ClanWeb-News', sans; font-size: 18px; font-size: 1.125rem; } .box p, .box .teaser { top: 0; margin-bottom: 0 !important; } /* Box effects ------------------------------------------------- */ .box { margin-bottom: 20px; position: relative; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .box * { text-decoration: none; transform: translateZ(0); } .box .image_container { margin-bottom: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .box .text_inside { position: absolute; z-index: 9; width: 100%; height: 100%; color: #fff; opacity: 0; text-align: center; padding: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .box a.boxlink { position: absolute; z-index: 8; top: 0; display: block; height: 100%; width: 100%; } /* effect 1 */ .box.hover_effect_1 .image_container { opacity: 1; } .box.hover_effect_1 .text_inside { opacity: 0; top: 0; } .touch .box.hover_effect_1 .text_inside { top: -100%; } /* Hover */ .box.hover_effect_1.cs-hover .image_container { opacity: 0.1; } .box.hover_effect_1.cs-hover .text_inside { opacity: 1; top: 0; padding-top: 20%; } .box.hover_effect_1.cs-hover a.boxlink { z-index: 10; } /* effect 2 */ .box.hover_effect_2 { border: 0 solid transparent; } .box.hover_effect_2 .image_container { opacity: 1; } .safari .box.hover_effect_2 .image_container { opacity: 1; padding: 0; } .box.hover_effect_2 .text_inside { opacity: 0; top: 0; } .touch .box.hover_effect_2 .text_inside { top: -100%; } /* Hover */ .box.hover_effect_2.cs-hover { border: 0px solid rgba(255,255,255,0.5); } .box.hover_effect_2.cs-hover .image_container { opacity: 0.1; } .box.hover_effect_2.cs-hover .text_inside { opacity: 1; top: 0; padding-top: 20%; } .box.hover_effect_2.cs-hover a.boxlink { z-index: 10; } .safari .box.hover_effect_2.cs-hover .image_container { padding: 1px; /* Safari fix for image-size */ } /* Contact box ------------------------------------------------- */ #contact_box { position: fixed; z-index: 999; cursor: pointer; width: 300px; height: 230px; padding: 20px 10px 20px 50px; right: -270px; top: 50%; margin-top: -115px; background: #333 url("../../files/layout/images/contact_box.png") no-repeat left center; border-radius: 3px 0 0 3px; webkit-border-radius: 3px 0 0 3px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #contact_box * { color: #fff; } #contact_box p.link { margin-bottom: 0; } #contact_box p.social { margin-top: 10px; display: inline-block; } #contact_box .link a { line-height: 32px; display: block; padding-left: 30px; background: url("../../files/layout/images/icon_kontakt.png") no-repeat left center; background-size: 24px 24px; } #contact_box.active { right: 0; } .touch #contact_box { display: none; } /* Isotope ------------------------------------------------- */ #isotope, #isotope > .ce_image { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } #isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } #isotope > .ce_image { z-index: 2; background-color: #ccc; } #isotope > .ce_image .image_container { margin: 0; width: 100%; height: 100%; } #isotope > .ce_image img { width: 100%; height: 100%; } .isotope-hidden.ce_image { pointer-events: none; z-index: 1; } /* ============================================================================= end global styles ========================================================================== */ /* ============================================================================= Desktop | 1140 Pixel ========================================================================== */ @media only screen and (min-width: 1140px) { /* Inner margin ------------------------------------------------- */ .side_margin_10 { margin: 0 10%; } .side_margin_20 { margin: 0 20%; } .side_margin_30 { margin: 0 30%; } /* Isotope ------------------------------------------------- */ #isotope > .normal { width: 270px; height: 169px; margin: 5px; } #isotope > .vertical { width: 270px; height: 348px; margin: 5px; } #isotope > .horizontal { width: 555px; height: 169px; margin: 5px; } #isotope > .double { width: 555px; height: 348px; margin: 5px; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet landscape | 960 Pixel ========================================================================== */ } @media only screen and (min-width: 960px) and (max-width: 1139px) { /* Inner margin ------------------------------------------------- */ .side_margin_10 { margin: 0 10%; } .side_margin_20 { margin: 0 20%; } .side_margin_30 { margin: 0 30%; } /* Isotope ------------------------------------------------- */ #isotope > .normal { width: 225px; height: 140px; margin: 5px; } #isotope > .vertical { width: 225px; height: 290px; margin: 5px; } #isotope > .horizontal { width: 465px; height: 140px; margin: 5px; } #isotope > .double { width: 465px; height: 290px; margin: 5px; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet portrait | 768 Pixel ========================================================================== */ } @media only screen and (min-width: 768px) and (max-width: 959px) { .box p, .box .teaser { font-size: 10px; } /* Inner margin ------------------------------------------------- */ .side_margin_10 { margin: 0 10%; } .side_margin_20 { margin: 0 20%; } .side_margin_30 { margin: 0 30%; } /* Isotope ------------------------------------------------- */ #isotope > .normal { width: 167px; height: 104px; margin: 5px; } #isotope > .vertical { width: 167px; height: 218px; margin: 5px; } #isotope > .horizontal { width: 349px; height: 104px; margin: 5px; } #isotope > .double { width: 349px; height: 218px; margin: 5px; } /* ============================================================================= end tablet portrait ========================================================================== */ /* ============================================================================= Phone landscape | 480 Pixel ========================================================================== */ } @media only screen and (min-width: 480px) and (max-width: 767px) { .box h4 { font-size: 24px; font-size: 1.5rem; } .box p { font-size: 14px; } /* Isotope ------------------------------------------------- */ #isotope > .normal { width: 208px; height: 130px; margin: 5px; } #isotope > .vertical { width: 208px; height: 270px; margin: 5px; } #isotope > .horizontal { width: 436px; height: 130px; margin: 5px; } #isotope > .double { width: 436px; height: 270px; margin: 5px; } /* ============================================================================= end phone landscape ========================================================================== */ /* ============================================================================= Phone landscape | 300 Pixel ========================================================================== */ } @media only screen and (max-width: 479px) { .box h4 { font-size: 22px; font-size: 1.375rem; } .box p { font-size: 14px; } .box .image_container { width: 100% !important; opacity: 1 !important; padding-top: 0; } .box.round .image_container { width: 100% !important; opacity: 1 !important; padding: 0 50px !important; } .box .text_inside { position: relative !important; width: 100% !important; left: 0 !important; opacity: 1 !important; padding: 20px 10px !important; } /* Isotope ------------------------------------------------- */ #isotope > .normal { width: 290px; height: 181px; margin: 5px; } #isotope > .vertical { width: 290px; height: 372px; margin: 5px; } #isotope > .horizontal { width: 290px; height: 181px; margin: 5px; } #isotope > .double { width: 290px; height: 181px; margin: 5px; } /* ============================================================================= end phone landscape ========================================================================== */ /* ========================================================================== global mobile styles ========================================================================== */ } @media only screen and (max-width: 767px) { #contact_box { display: none; } .box.round,.box_round { border-radius: 0; -webkit-background-clip: padding-box; } .box.round img, .box_round img { border-radius: 50%;-webkit-background-clip: padding-box; } .box.round { background-color: transparent !important; } .box .image_container { width: 50%; opacity: 1 !important; padding-top: 0; } .box .text_inside { width: 50%; top: 0; left: 50%; opacity: 1 !important; padding: 5% 10px 20px 10px !important; } .box .text_inside * { width: 100%; } /* effect 1 */ .box.hover_effect_1.cs-hover .image_container { opacity: 1; } .box.hover_effect_1.cs-hover .text_inside { opacity: 1; } /* effect 2 */ .box.hover_effect_2.cs-hover { border: 0 solid rgba(255,255,255,0.5); } .box.hover_effect_2.cs-hover .image_container { opacity: 1; } .box.hover_effect_2.cs-hover .text_inside { opacity: 1; } /* ========================================================================== global mobile styles ========================================================================== */ } /* ============================================================================= global ========================================================================== */ /* Offer article ------------------------------------------------- */ .mod_article.offer .article_inside div.ce_text:first-child { padding-left: 107px; } .offer h6 { line-height: 42px; vertical-align: middle; padding: 0 0 0 50px; } .offer .icon_home h6 { background: url("../../files/layout/images/icon_home.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_kontakt h6 { background: url("../../files/layout/images/icon_kontakt.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_portfolio h6 { background: url("../../files/layout/images/icon_portfolio.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_profil h6 { background: url("../../files/layout/images/icon_profil.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_arbeiten h6 { background: url("../../files/layout/images/icon_arbeiten.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_referenzen h6 { background: url("../../files/layout/images/icon_referenzen.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_unternehmen h6 { background: url("../../files/layout/images/icon_unternehmen.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_impressum h6 { background: url("../../files/layout/images/icon_home.png") no-repeat left top; background-size: 42px 42px; } .offer .icon_services h6, .offer .icon_newsletter h6 { background: url("../../files/layout/images/icon_home.png") no-repeat left top; background-size: 42px 42px; } .scrollup { width:40px; height:40px; opacity:1; position:fixed; z-index: 999; bottom:50px; right:50px; display:none; text-indent:-9999px; background: url("../../files/layout/images/icon_up.png") no-repeat; background-size: 40px 40px; } /* Image blocks ------------------------------------------------- */ .image_one_half { overflow: hidden; margin-left: 0; width:50%; float:left; position:relative; } .image_one_fourth { overflow: hidden; margin-left: 0; width:25%; float:left; position:relative; } .image_two_fourth { overflow: hidden; margin-left: 0; width:50%; float:left; position:relative; } .image_three_fourth { overflow: hidden; margin-left: 0; width:75%; float:left; position:relative; } .image_one_half img, .image_one_fourth img, .image_two_fourth img, .image_three_fourth img { display: block; height: auto; width: 100%; } .image_one_fourth.first, .image_two_fourth.first, .image_three_fourth.first, .image_one_half.first { margin-left: 0!important; clear: left;} /* Accordion ------------------------------------------------- */ .ce_accordion { margin-bottom: 5px; } .ce_accordion .toggler { background: #316065 url("../../files/layout/images/acc_plus.png") no-repeat right center; color: #fff; padding: 10px 10px; cursor: pointer; } .ce_accordion .toggler.ui-state-active { background: #316065 url("../../files/layout/images/acc_minus.png") no-repeat right center; } .ce_accordion .accordion > div { padding: 20px; } /* article teaser ------------------------------------------------- */ .ce_teaser h1 { display: none; } /* camera slider ------------------------------------------------- */ .camera_caption { top: 0; left: 0px; display: block; position: absolute; width: 100%; color: #fff; } .camera_caption > div { position: relative; width: 1140px; margin: 0 auto; background: none!important; } .camera_wrap { margin-bottom: 0!important; } .camera_pag_ul { text-align: center!important; } .camera_pag_ul li { margin: 20px 2px 0 2px!important; } .camera_wrap .button { padding: 12px 32px; font-size: 17px; margin-top: 10px; } .camera_wrap h3 { position: absolute; top: 100px; left: 50px; padding: 0; opacity: 0.5; } .camera_wrap h4 { position: absolute; top: 180px; left: 150px; padding: 0; } /* image_container ------------------------------------------------- */ .image_container { position: relative; padding: 0; margin-bottom: 12px; } /* CarouFredSel ------------------------------------------------- */ .ce_caroufredsel_gallery { position: relative; } .caroufredsel_controls { position: absolute; top: 50%; margin-top: -15px; width: 100%; z-index: 99; } .caroufredsel_prev { float: left; margin-left: 10px; } .caroufredsel_next { float: right; margin-right: 10px; } .caroufredsel_prev span { display: block; height: 30px; width: 30px; background: url("../../files/layout/images/icon_back.png") no-repeat center center; background-size: 30px 30px; } .caroufredsel_next span { display: block; height: 30px; width: 30px; background: url("../../files/layout/images/icon_next.png") no-repeat center center; background-size: 30px 30px; } /* CarouFredSel Image/Text Slider ------------------------------------------------- */ .image_text_slider .text_slider { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5); padding: 20px 30px; position: absolute; right: 50px; bottom: 62px; width: 60%; z-index: 999; font-size: 18px; line-height: 1.2; } /* CarouFredSel Full width ------------------------------------------------- */ .full .caroufredsel_wrapper img { width: 100%; } /* menu slider item ------------------------------------------------- */ .slider_item { position: relative; bottom: -30px; opacity:0; background-color: rgba(255,255,255,0.9); -moz-box-shadow: 0 0 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3); box-shadow: 0 0 3px rgba(0,0,0,0.3); padding:2%; overflow: visible !important; } .slider_item:after { position: absolute; bottom: -40px; left: 50px; width: 34px; height: 40px; content: ""; background: transparent url("../../files/layout/images/slide_item_arrow_left.png") left top no-repeat; display: inline-block; } .slider_item.active { opacity:1; } /* more / back links ------------------------------------------------- */ p.more, p.back { position: relative; height: 30px; display: inline-block; } p.more { text-align: right; } p.back { text-align: left; float: right; } p.more { background: url("../../files/layout/images/icon_next.png") no-repeat right center; background-size: 30px 30px; } p.back { background: url("../../files/layout/images/icon_back.png") no-repeat left center; background-size: 30px 30px; } p.more a, p.back a { display: block; color: #386169; line-height: 30px; height: 30px; font-family: 'ClanWeb-News',sans; } p.more a { padding: 0 40px 0 0; } p.back a { padding: 0 0 0 40px; } /* Lists ------------------------------------------------- */ .ce_text.logolist { min-height: 242px; margin-left: 40px; padding: 10px 0 0 40px; background: transparent url("../../files/layout/images/logo_list.png") left 30px no-repeat; } .ce_text.logolist li { border-bottom: 1px solid #ccc; padding:5px 10px; } .ce_text.inlinelist li { border-bottom: 1px solid #ccc; padding:5px 10px; display: inline-block; } #footer li { line-height: 1.9; } /* Galerie ------------------------------------------------- */ .ce_gallery .row1 { overflow: hidden; margin-bottom: 15px; margin-left: 0; width:100%; float:none; position:relative; } .ce_gallery .row2 { overflow: hidden; margin-bottom: 15px; margin-left: 4%; width:48%; float:left; position:relative; } .ce_gallery .row3 { overflow: hidden; margin-bottom: 15px; margin-left: 5%; width:30%; float:left; position:relative; } .ce_gallery .row4 { overflow: hidden; margin-bottom: 15px; margin-left: 4%; width:22%; float:left; position:relative; } .ce_gallery .row5 { overflow: hidden; margin-bottom: 15px; margin-left: 5%; width:16%; float:left; position:relative; } .ce_gallery .row2.col_first, .ce_gallery .row3.col_first, .ce_gallery .row4.col_first, .ce_gallery .row5.col_first { margin-left: 0!important; clear: left; } .ce_gallery ul li.row1 { display: none; } .ce_gallery ul li.row1:first-child { display: inline; } /* Googlemap ------------------------------------------------- */ .big-header #subheader .mod_dlh_googlemaps .dlh_googlemap { height: 500px !important; /* subheader height */ } /* Revolution Slider styles ------------------------------------------------- */ .ce_revolutionslider h5 { font-family: 'ClanWeb-Book', sans; font-size: 50px; font-size: 3.125rem; color: #fff; color: rgba(255,255,255,1); } .ce_text.tp-caption { position: relative; white-space: normal !important; } .tp-leftarrow.round { background: url("../../files/layout/images/icon_back.png") no-repeat scroll left top rgba(0, 0, 0, 0); background-size: 30px; height: 30px; width: 30px; margin-right: 10px; } .tp-rightarrow.round { background: url("../../files/layout/images/icon_next.png") no-repeat scroll left top rgba(0, 0, 0, 0); background-size: 30px; height: 30px; width: 30px; margin-left: 10px; } .tp-bullets.simplebullets.round .bullet { margin-right: 10px; margin-top: 0; } /* Scroll to anchor ------------------------------------------------- */ .ce_hyperlink.scroll { text-align: center; padding-top: 40px; font-size: 18px; } .ce_hyperlink.scroll a { text-decoration: none; background: url(../../files/layout/images/icon_down.png) no-repeat center bottom; display: block; text-align: center; background-size: 50px; padding-bottom: 60px; } /* Video ------------------------------------------------- */ .ce_ytvideo iframe { width: 100%; z-index: -100; } /* Footer Columns ------------------------------------------------- */ #footer h4 { font-size: 16px !important; } /* Kundenwebsites ------------------------------------------------- */ #clientList.ce_table { font-family: 'ClanWeb-Book', sans; font-size: 13px; line-height: 1; } #clientList.ce_table thead th { background-color: #386169; color: #fff; padding: 5px 20px; } #clientList.ce_table tbody tr.odd { background-color: #eee; -webkit-transition: all 0.3s ease 0.0s; -moz-transition: all 0.3s ease 0.0s; -o-transition: all 0.3s ease 0.0s; transition: all 0.3s ease 0.0s; } #clientList.ce_table tbody tr:hover { background-color: rgba(56, 97, 105,0.5); color: #fff; } #clientList table td { padding: 0 20px; } #clientList .single_record { font-family: 'ClanWeb-Book', sans; } #clientList .single_record .label { font-family: 'ClanWeb-News', sans; } #clientList .single_record tr td:first-child { width: 25%; } #clientList .single_record td { padding: 5px 20px; } #clientList .single_record tr:first-child { font-size: 24px; font-family: 'ClanWeb-News', sans; } #clientList .single_record tr:nth-child(2n+0) { background-color: #eee; } /* Pinterest Button ------------------------------------------------- */ .btn_pinterest { position: absolute; top: 5px; right: 0; } .side_btn_pinterest { position: absolute; top: 10px; left: 10px; } /* ============================================================================= end global styles ========================================================================== */ /* ============================================================================= Desktop | 1140 Pixel ========================================================================== */ @media only screen and (min-width: 1140px) { /* Footer Columns ------------------------------------------------- */ .footer_contact { overflow: hidden; margin-left: 0!important; width:23.5%; float:left; position:relative; clear: left; } .footer_links, .footer_response { overflow: hidden; margin-left: 2%; width:23.5%; float:left; position:relative; } /* Revolution Slider styles ------------------------------------------------- */ .ce_text.tp-caption { width: 1140px !important; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet landscape | 960 Pixel ========================================================================== */ } @media only screen and (min-width: 960px) and (max-width: 1139px) { /* Footer Columns ------------------------------------------------- */ .footer_contact { overflow: hidden; margin-left: 0!important; width:23.5%; float:left; position:relative; clear: left; } .footer_links, .footer_response { overflow: hidden; margin-left: 2%; width:23.5%; float:left; position:relative; } /* Revolution Slider styles ------------------------------------------------- */ .ce_text.tp-caption { width: 960px !important; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet portrait | 768 Pixel ========================================================================== */ } @media only screen and (min-width: 768px) and (max-width: 959px) { /* Footer Columns ------------------------------------------------- */ .footer_contact { font-size: 16px; overflow: hidden; margin-left: 0!important; width:49%; float:left; position:relative; clear: left; } .footer_links { display: none; } .footer_response { overflow: hidden; margin-left: 2%; width:49%; float:left; position:relative; } /* Revolution Slider styles ------------------------------------------------- */ .ce_text.tp-caption { width: 728px !important; } /* Pinterest Button ------------------------------------------------- */ .btn_pinterest { position: fixed; right: 20px; top: 35px; } /* ============================================================================= end tablet portrait ========================================================================== */ /* ============================================================================= Phone landscape | 480 Pixel ========================================================================== */ } @media only screen and (min-width: 480px) and (max-width: 767px) { /* Image blocks ------------------------------------------------- */ .image_one_half,.image_one_fourth, .image_two_fourth,.image_three_fourth { width: 100%; margin: 0 0 20px 0; } /* Revolution Slider styles ------------------------------------------------- */ .ce_text.tp-caption { width: 456px !important; } /* ============================================================================= end phone landscape ========================================================================== */ /* ============================================================================= Phone landscape | 300 Pixel ========================================================================== */ } @media only screen and (max-width: 479px) { /* Image blocks ------------------------------------------------- */ .image_one_half,.image_one_fourth, .image_two_fourth,.image_three_fourth { width: 100%; margin: 0 0 20px 0; } /* Revolution Slider styles ------------------------------------------------- */ .ce_text.tp-caption { width: 300px !important; } /* ============================================================================= end phone landscape ========================================================================== */ /* ========================================================================== global mobile styles ========================================================================== */ } @media only screen and (max-width: 767px) { /* Offer article ------------------------------------------------- */ .mod_article.offer .article_inside div:first-child { padding-left: 0 !important; } .image_container.float_right, .image_container.float_left { float: none; width: 100%; text-align: center; } .image_container.float_right img, .image_container.float_left img { float: none; text-align: center; } /* Footer Columns ------------------------------------------------- */ .footer_contact { font-size: 16px; } .footer_links { display: none; } .scrollup { width: 40px; height: 40px; opacity: 1; position: fixed; bottom: 40px; right: 5px; display:none; text-indent:-9999px; background: url("../../files/layout/images/icon_up.png") no-repeat; background-size: 40px 40px; } /* CarouFredSel Image/Text Slider ------------------------------------------------- */ .image_text_slider .text_slider { background: none repeat scroll 0 0 transparent; padding: 0; position: relative; top: 0; right: 0; width: 100%; z-index: 999; line-height: 1.2; font-size: inherit; } /* Revolution Slider styles ------------------------------------------------- */ .ce_revolutionslider h5 { font-size: 30px; font-size: 1.875rem; } /* Pinterest Button ------------------------------------------------- */ .btn_pinterest { position: fixed; right: 20px; top: 35px; } /* ========================================================================== global mobile styles ========================================================================== */ } /* ============================================================================= global styles ========================================================================== */ /* --input-wrapper ------------------------------------------------- */ .input-wrapper { position:inherit!important } .input-wrapper * { width: 99.9%!important; margin-left: 0!important; } .ce_form .full { width: 99.9%; } /* --label ------------------------------------------------- */ label { display: none; padding-bottom: 5px; font-weight: 600; } .ie7 label, .ie8 label, .ie9 label, .captcha label, fieldset label { display: block; padding-bottom: 0; } fieldset label { font-weight: 400; } /* --fieldset+legend ------------------------------------------------- */ fieldset { border: none; padding: 0.5em; margin-bottom: 10px; } legend { display: none; } /* --input, select, textarea ------------------------------------------------- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea { font-family: 'PMNCaeciliaW01-55Roman',sans-serif; padding: 10px; margin-bottom: 20px; border: 1px solid #a9a275; color: #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus { border: 1px solid #386169; } input[type="search"] { -webkit-appearance: none; border-radius: 0; } input[type="submit"], input.submit { color: #fff; } select { padding: 9px; height: 40px; } textarea { height: 200px; } /* --select options ------------------------------------------------- */ select option { padding: 10px; } /* --radio-buttons ------------------------------------------------- */ .radio_container { margin-top: 1px; } .radio_container span { margin: 0 20px 5px 0; display: inline-block; position: relative; } .radio_container label { float: none; } .radio_container input { display: none; } .radio_container label:before { content: '\e800'; color: #fff; border: 1px solid #ccc; background-color: transparent; width: 25px; height: 25px; line-height: 25px; } .radio_container input:checked + label:before { content: '\e800'; color: #fff; border: 1px solid #386169; background-color: #386169; } .radio_container legend { display: block; overflow: hidden; } .ie8 .radio_container label:before, .ie9 .radio_container label:before { display: none !important; } .ie8 .radio_container input, .ie9 .radio_container input, .ie8 .radio_container label, .ie9 .radio_container label { display: inline-block; } /* --checkboxes ------------------------------------------------- */ .checkbox_container { margin-top: 1px; } .checkbox_container legend { display: block; overflow: hidden; font-weight: 600; margin-bottom: 10px; } .checkbox_container span { margin: 0 20px 5px 0; display: inline-block; position: relative; } .checkbox_container label { float: none; } .checkbox_container label:before { content: '\e800'; color: #fff; border: 1px solid #ccc; background-color: transparent; width: 25px; height: 25px; line-height: 25px; -webkit-border-radius: 0; border-radius: 0; } .checkbox_container input:checked + label:before { content: '\e800'; color: #fff; border: 1px solid #386169; background-color: #386169; } .checkbox_container input { display: none; } .ie8 .checkbox_container label:before, .ie9 .checkbox_container label:before { display:none !important; } .ie8 .checkbox_container input, .ie9 .checkbox_container input, .ie8 .checkbox_container label, .ie9 .checkbox_container label { display: inline-block; } /* --submit-button ------------------------------------------------- */ .submit_container { margin-top: 20px; } .submit_container input[type="submit"], .mod_search input[type="submit"] { cursor: pointer; padding: 10px 20px; width: auto!important; -webkit-border-radius: 3px; border-radius: 3px; background-color: #386169; color: #fff; text-transform: uppercase; } .submit { -webkit-appearance:none; } /* --errors ------------------------------------------------- */ label.error { color: red; } input.error { border: 1px solid red; } p.error { color: red; clear: both; } /* --captcha ------------------------------------------------- */ .ce_form .captcha label { width: auto !important; } .ce_form .captcha { width: 20%; display: inline; margin-right: 2%; } .ce_form .captcha_text { width: 70%; display: inline; line-height: 33px; } /* Footer form ------------------------------------------------- */ #footer .ce_form .input-wrapper { margin-bottom: 0; } #footer .ce_form input { margin-bottom: 5px; } /* Footer Newsletter ------------------------------------------------- #mc-embedded-subscribe-form input[type="email"], #mc-embedded-subscribe-form input[type="text"], #mc-embedded-subscribe-form .submit_container { margin: 0 0 10px 0; } #mc-embedded-subscribe-form label { padding: 5px 10px; } #mc-embedded-subscribe-form label.valid, #mc-embedded-subscribe-form label.error { display: block; font-family: 'ClanWeb-Book',sans; border-radius: 3px; color: #fff; } #mc-embedded-subscribe-form label a { color: #fff; } #mc-embedded-subscribe-form label.valid { background-color: #4DAF49; } #mc-embedded-subscribe-form label.error { background-color: #FF0000; }*/ /* Form fields ------------------------------------------------- */ #contactform div.mail { display: none; } /* ============================================================================= global ========================================================================== */ /* mainmenue ------------------------------------------------- */ /* neccassary for IE6 */ * html #mainNavigation { zoom: 0; } * html #mainNavigation { z\oom: 1; } nav#mainNavigation { overflow: visible!important; line-height: 0; padding-top:50px; padding-left:30%; font-family: 'ClanWeb-News', sans; } nav#mainNavigation * { transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } /* level 1 */ nav#mainNavigation ul { position: relative; display: inline-table; width: 100%; white-space:nowrap; } nav#mainNavigation ul:after { content: ""; clear: both; display: block; } nav#mainNavigation ul > li { float: left; margin-right: 20px; } nav#mainNavigation ul a.trail, nav#mainNavigation ul span, nav#mainNavigation ul a:hover { color: #a9a275; } nav#mainNavigation ul li a, nav#mainNavigation ul li span { display: block; color: #386169; text-decoration: none; text-transform: uppercase; position: relative; font-size: 16px; padding-left: 40px; line-height: 32px; } nav#mainNavigation ul li a:hover, nav#mainNavigation ul li span, nav#mainNavigation ul li a.trail { color: #a9a275; } /* level 2 */ nav#mainNavigation ul ul, *:first-child+html #mainNavigation ul.level_1 li ul { display: block; width: auto; opacity: 0; padding: 0; visibility: hidden; position: absolute; top: 100%; z-index: 999; } nav#mainNavigation ul li:hover > ul { opacity: 1; visibility: visible; margin-left: 25px; } nav#mainNavigation ul ul > li { float: left; position: relative; background-color: #fff; } .touch nav#mainNavigation ul ul, nav#mainNavigation ul li:hover > ul { display: none; } nav#mainNavigation ul ul a.trail, nav#mainNavigation ul ul > li a, nav#mainNavigation ul ul > li span { display: block; padding: 5px 0 5px 40px; font-size: 13px; } /* level 3 */ nav#mainNavigation ul ul ul { position: absolute; left: 100%; top: 0; z-index: 999; } /* icons */ #mainNavigation li.active.icon_portfolio, #mainNavigation li.trail.icon_portfolio { background: url("../../files/layout/images/icon_portfolio_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_portfolio { background: url("../../files/layout/images/icon_portfolio.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.trail.icon_referenzen, #mainNavigation li.active.icon_referenzen { background: url("../../files/layout/images/icon_referenzen_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_referenzen { background: url("../../files/layout/images/icon_referenzen.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.active.icon_profil, #mainNavigation li.trail.icon_profil { background: url("../../files/layout/images/icon_profil_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_profil { background: url("../../files/layout/images/icon_profil.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.active.icon_projekte, #mainNavigation li.trail.icon_projekte { background: url("../../files/layout/images/icon_arbeiten_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_projekte { background: url("../../files/layout/images/icon_arbeiten.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.active.icon_service, #mainNavigation li.trail.icon_service { background: url("../../files/layout/images/icon_service_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_service { background: url("../../files/layout/images/icon_service.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_portfolio li { background: url("../../files/layout/images/icon_portfolio_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_referenzen li { background: url("../../files/layout/images/icon_referenzen_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_profil li { background: url("../../files/layout/images/icon_profil_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_projekte li { background: url("../../files/layout/images/icon_arbeiten_braun.png") no-repeat left center; background-size: 32px 32px; } #mainNavigation li.icon_service li { background: url("../../files/layout/images/icon_service_braun.png") no-repeat left center; background-size: 32px 32px; } /* submenue ------------------------------------------------- */ nav#subNavigation { padding: 30px 0; overflow: visible!important; line-height: 0; font-family: 'ClanWeb-News', sans; text-align: center; } nav#subNavigation * { transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } /* level 1 */ nav#subNavigation ul { position: relative; display: inline-block; white-space: nowrap; } nav#subNavigation ul:after { content: ""; clear: both; display: block; } nav#subNavigation ul > li { float: left; margin-right: 20px; height: 32px; line-height: 32px; } nav#subNavigation ul a.trail, nav#subNavigation ul span, nav#subNavigation ul a:hover { color: #a9a275; } nav#subNavigation ul li a, nav#subNavigation ul li span { position: relative; display: inline-block; padding: 3px 0 3px 40px;; color: #fff !important; line-height: 32px; text-decoration: none; text-transform: uppercase; font-size: 14px; } nav#subNavigation ul li a:hover, nav#subNavigation ul li span, nav#subNavigation ul li a.trail { color: #A9A175 !important; } #subNavigation li a.icon_portfolio, #subNavigation li span.icon_portfolio { background: url("../../files/layout/images/icon_portfolio_braun.png") no-repeat left center; background-size: 32px 32px; } /* submenue neu ------------------------------------------------- */ #subNavigation2 { width: 1140px; margin: 0 auto; padding: 60px 0 20px 0; font-family: 'ClanWeb-News', sans; } #subNavigation2 * { -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; transition: all 150ms ease-out; } #subNavigation2 li { float: left; padding: 10px; } #subNavigation2.item_count_2 li { width: 50%; } #subNavigation2.item_count_3 li { width: 33.33333333333333%; } #subNavigation2.item_count_4 li { width: 25%; } #subNavigation2.item_count_5 li { width: 20%; } #subNavigation2.item_count_6 li { width: 16.66666666666667%; } #subNavigation2 li a { display: block; text-align: center; text-decoration: none; font-size: 12px; } #subNavigation2 li a:before { position: relative; left: 50%; margin-left: -48px; content: ''; display: block; width: 96px; height: 96px; background-repeat: no-repeat; background-position: center center; background-size: 96px; border: 1px solid #316066; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #subNavigation2.icon_big li a:before { width: 150px; height: 150px; margin-left: -75px; background-size: 150px; } #subNavigation2 li a span { position: relative; display: block; margin-top: 20px; width: 100%; padding: 10px 5px; border: 1px solid #316066; text-transform: uppercase; } #subNavigation2 li a span:before { content: " "; position: absolute; top: -20px; left: 50%; margin-left: -10px; right: auto; width: 0; height: 0; border: solid transparent; pointer-events: none; border-right-color: transparent; border-bottom-color: #316066; border-width: 10px; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -ms-transition: all 150ms ease-out; transition: all 150ms ease-out; } #subNavigation2 li a:hover span { background-color: #316066; border-color: #316066; color: #fff; } #subNavigation2 li a:hover span:before { border-bottom-color: #316066; } #subNavigation2 li a.active span:before { border-bottom-color: #A9A275; } #subNavigation2 li a.active span { background-color: #A9A275; border-color: #A9A275; color: #fff; } #subNavigation2 li.sub_01 a:before { background-image: url('../../files/layout/images/sub_01.png'); } #subNavigation2 li.sub_02 a:before { background-image: url('../../files/layout/images/sub_02.png'); } #subNavigation2 li.sub_03 a:before { background-image: url('../../files/layout/images/sub_03.png'); } #subNavigation2 li.sub_04 a:before { background-image: url('../../files/layout/images/sub_04.png'); } #subNavigation2 li.sub_05 a:before { background-image: url('../../files/layout/images/sub_05.png'); } #subNavigation2 li.sub_06 a:before { background-image: url('../../files/layout/images/sub_06.png'); } /* topmenue ------------------------------------------------- */ #topNavigation { position: absolute; top: 5px; right: 80px; } #topNavigation ul { text-align: right; } #topNavigation li { float: left; margin-left: 10px !important; } #topNavigation a, #topNavigation a.trail, #topNavigation span.active, #topNavigation a:hover { font-family: 'ClanWeb-News',sans; font-size: 13px; text-transform: uppercase; display: block; padding:5px 0 5px 10px; color: #A9A275; text-decoration: none; } #topNavigation a { color: #777; } /* Show menu button ------------------------------------------------- */ .show-menu { z-index: 9999; display: none; } /* Off Canvas Navigation ------------------------------------------------- */ /* Off Canvas 1 */ .off-canvas-navigation { display: none; border-top: 1px solid #BAB289; } .off-canvas-navigation .level_1 > li { text-align: right; border-bottom: 1px solid #BAB289; border-right: 5px solid #A9A275; background-color: #A9A275; } .off-canvas-navigation .level_1 > li:hover, .off-canvas-navigation .level_1 > li.trail, .off-canvas-navigation .level_1 > li.active { border-right: 5px solid #fff; background-color: #B2AA7C; } .off-canvas-navigation .level_1 > li.submenu { height: auto; } .off-canvas-navigation .level_1 > li > a, .off-canvas-navigation .level_1 > li > span { display: block; line-height: 50px; vertical-align: middle; padding: 0 30px 0 10px; text-transform: uppercase; font-family: 'ClanWeb-News', sans; color: #fff; text-decoration: none; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .off-canvas-navigation .level_2 > li > a, .off-canvas-navigation .level_2 > li > span { display: block; line-height: 30px; padding: 0 30px 0 10px; vertical-align: middle; font-family: 'ClanWeb-News', sans; color: #fff; text-decoration: none; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .off-canvas-navigation .level_2 > li > a.last, .off-canvas-navigation .level_2 > li > span.last { padding-bottom: 10px; } .off-canvas-navigation .level_2 > li > a:hover, .off-canvas-navigation .level_2 > li > a.trail, .off-canvas-navigation .level_2 > li > span { text-decoration: underline; } /* Off Canvas 2 */ .off-canvas-navigation2 { border-top: none;} .off-canvas-navigation2 .level_1 > li > a, .off-canvas-navigation2 .level_1 > li > span { text-transform: uppercase; } .off-canvas-navigation2 .level_1 > li.kontakt { background-color: #386169; border-right: 5px solid #386169; border-bottom: 1px solid #43727A; } .off-canvas-navigation2 .level_1 > li.kontakt:hover { border-right: 5px solid #fff; background-color: #43727A; } /* ============================================================================= end global styles ========================================================================== */ /* ============================================================================= Desktop | 1140 Pixel ========================================================================== */ @media only screen and (min-width: 1140px) { /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet landscape | 960 Pixel ========================================================================== */ } @media only screen and (min-width: 960px) and (max-width: 1139px) { /* submenue ------------------------------------------------- */ /* level 1 */ nav#subNavigation ul > li { margin-right: 10px; } nav#subNavigation ul li a, nav#subNavigation ul li span { font-size: 13px; } #subNavigation2 { width: 960px; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet portrait | 768 Pixel ========================================================================== */ } @media only screen and (min-width: 768px) and (max-width: 959px) { /* submenue ------------------------------------------------- */ nav#subNavigation ul { width: 728px; margin: 0 auto; } #subNavigation2 { width: 728px; } #subNavigation2.item_count_2 li { width: 50%; } #subNavigation2.item_count_3 li { width: 33.33333333333333%; } #subNavigation2.item_count_4 li { width: 25%; } #subNavigation2.item_count_5 li { width: 20%; } #subNavigation2.item_count_6 li { width: 33.33333333333333%; } #subNavigation2 li a { font-size: 14px; } /* ============================================================================= end tablet portrait ========================================================================== */ /* ============================================================================= Phone landscape | 480 Pixel ========================================================================== */ } @media only screen and (min-width: 480px) and (max-width: 767px) { /* submenue ------------------------------------------------- */ nav#subNavigation ul { width: 480px; margin: 0 auto; } #subNavigation2 { width: 480px; padding: 20px 0px 20px; } #subNavigation2 li { width: 50%; } #subNavigation2.item_count_2 li { width: 50%; } #subNavigation2.item_count_3 li { width: 33.33333333333333%; } #subNavigation2.item_count_4 li { width: 50%; } #subNavigation2.item_count_5 li { width: 50%; } #subNavigation2.item_count_6 li { width: 50%; } #subNavigation2 li a { font-size: 14px; } body[class*=" sub_"].small-screen #subNavigation2, body[class^="sub_"].small-screen #subNavigation2 { display: none; } /* ============================================================================= end phone landscape ========================================================================== */ /* ============================================================================= Phone landscape | 300 Pixel ========================================================================== */ } @media only screen and (max-width: 479px) { /* submenue ------------------------------------------------- */ nav#subNavigation ul { width: 300px; margin: 0 auto; } #subNavigation2 { width: 300px; padding: 20px 0px 20px; } #subNavigation2[class^='item_count_'] li, #subNavigation2[class*='item_count_'] li { width: 100%; } #subNavigation2 li a { font-size: 14px; } body[class*=" sub_"].small-screen #subNavigation2, body[class^="sub_"].small-screen #subNavigation2 { display: none; } /* ============================================================================= end phone landscape ========================================================================== */ /* ========================================================================== global mobile styles ========================================================================== */ } @media only screen and (max-width: 959px) { /* mainmenue ------------------------------------------------- */ nav#mainNavigation, nav#topNavigation { display: none; } /* submenue ------------------------------------------------- */ /* level 1 */ nav#subNavigation ul > li { float: none; text-align: center; height: auto; margin-right: 0; border-bottom: 1px solid #518C96; } #subNavigation li a.icon_portfolio, #subNavigation li span.icon_portfolio { background: none; padding: 3px 0; display: block; } /* Off Canvas Navigation ------------------------------------------------- */ .off-canvas-navigation { display: block; } /* Off Canvas Button ------------------------------------------------- */ .show-menu { display: block; position: absolute; top: 25px; left: 350px; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .sidebar-active .show-menu { left: 255px; } .show-menu a.show-menu-btn { margin: 0; padding: 0; width: 50px; height: 50px; line-height: 50px; vertical-align: middle; display: block; font-size: 2.7rem; color: #A9A275; text-decoration: none; transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .sidebar-active .show-menu a.show-menu-btn { color: #fff; } /* ========================================================================== global mobile styles ========================================================================== */ } /* ============================================================================= global ========================================================================== */ #cookiebar { background-color: #A9A275; color: #000000; } #cookiebar span { display: inline-block; } #cookiebar button { background-color: #386169; } #cookiebar a { color: #a84204; } .mod_article .article_inside { position: relative; } .fb_iframe_widget { display: inline-flex !important; margin-right: 10px; } .twitter-share-button { width: 100px !important; } /* Background colors ------------------------------------------------- */ .mod_article { padding: 30px 0; } #subheader .mod_article { padding: 0; } /* Page title ------------------------------------------------- */ .no_page_titles #page_titles { display: none; } #page_titles { position: absolute; bottom: 60px; width: 100%; padding: 0; text-align: center; background-color: rgba(255,255,255,0.7); overflow: hidden; z-index: 900; } #page_titles h5 { font-size: 2.125rem; } #page_titles span.mainTitle { display: block; width: 100%; padding: 20px 0 10px 0; text-transform: lowercase; text-align: center; font-size: 1.5625rem; line-height: 1.4; font-family: 'ClanWeb-News', sans; color: #386169; } #page_titles span.icon_home:before, #page_titles span.icon_kontakt:before, #page_titles span.icon_portfolio:before, #page_titles span.icon_profil:before, #page_titles span.icon_arbeiten:before, #page_titles span.icon_referenzen:before, #page_titles span.icon_unternehmen:before, #page_titles span.icon_impressum:before, #page_titles span.icon_services:before, #page_titles span.icon_newsletter:before { display: block; height: 80px; width: 100%; content: ''; } #page_titles span.icon_home:before { background: url("../../files/layout/images/icon_home.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_kontakt:before { background: url("../../files/layout/images/icon_kontakt.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_portfolio:before { background: url("../../files/layout/images/icon_portfolio.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_profil:before { background: url("../../files/layout/images/icon_profil.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_arbeiten:before { background: url("../../files/layout/images/icon_arbeiten.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_referenzen:before { background: url("../../files/layout/images/icon_referenzen.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_unternehmen:before { background: url("../../files/layout/images/icon_unternehmen.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_impressum:before { background: url("../../files/layout/images/icon_home.png") no-repeat center center; background-size: 80px 80px; } #page_titles span.icon_services:before, #page_titles span.icon_newsletter:before { background: url("../../files/layout/images/icon_home.png") no-repeat center center; background-size: 80px 80px; } #page_titles p { font-size: 2.125rem; padding: 0; margin-bottom: 30px; text-align: center; line-height: 1.4; } #page_titles p span { padding: 10px 20px; font-family: 'PMNCaeciliaW01-55Roman', sans-serif; color: #386169; } /* Article Border ------------------------------------------------- */ .image_border_01 { border-width: 8px 0; border-style: solid; -moz-border-image: url(../../files/layout/images/border_image_01.png) 12 0 12 0 repeat; /* Old Firefox */ -webkit-border-image: url(../../files/layout/images/border_image_01.png) 12 0 12 0 repeat; /* Safari */ -o-border-image: url(../../files/layout/images/border_image_01.png) 12 0 12 0 repeat; /* Opera */ border-image: url(../../files/layout/images/border_image_01.png) 12 0 12 0 repeat; } /* Panorama ------------------------------------------------- */ div#tourDIV { height:800px; position:relative; overflow:hidden; } div#panoDIV { height:100%; position:relative; overflow:hidden; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } div#thumbnailsDIV { width: 100%; height: 180px; overflow: auto; overflow-y: hidden; margin: 0 auto; white-space: nowrap } div.pano-image { display: none; } @media only screen and (min-width: 960px) and (max-width: 1139px) { div#tourDIV { height:600px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { div#tourDIV { height:450px; } } @media only screen and (max-width: 767px) { div#tourDIV { display: none; } div.pano-image { display: block; } } /* newsliste Startseite ------------------------------------------------- */ #news-start { border: 5px solid #fff; background-color: #f6f6f6; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } #news-start > * { padding-left: 10px; padding-right: 10px; } #news-start h3 { background-color: #ff7701; color: #fff; padding:0.3em 10px; } #news-start h4 { margin-bottom:0.3em; font-size:16px; } /* newsliste Spalten ------------------------------------------------- .layout_latest.one_third, .layout_latest.one_third.first { overflow: hidden; margin-left: 1% !important; margin-right: 1% !important; width:31%; float:left; position:relative; } .layout_latest.one_fourth, .layout_latest.one_fourth.first { overflow: hidden; margin-left: 1% !important; margin-right: 1% !important; width:23%; float:left; position:relative; } .layout_latest.one_fifth, .layout_latest.one_fifth.first { overflow: hidden; margin-left: 1% !important; margin-right: 1% !important; width:18%; float:left; position:relative; }*/ .mod_newslist div.one_third_2:nth-child(3n+1) { margin-left: 0!important; clear: left; } .mod_newslist div..one_fourth_2:nth-child(4n+1) { margin-left: 0!important; clear: left; } .mod_newslist.image_border > * { overflow: visible !important; } .mod_newslist.news-archiv { margin-top: 50px; } /* Newsreader ------------------------------------------------- */ .mod_newsreader h1 { font-size: 38px; } .mod_newsreader h2 { font-size: 28px; } /* Google Map ------------------------------------------------- */ .dlh_googlemap { width: 100% !important; height: 560px !important; } /* Isotope ------------------------------------------------- */ div.isotope_project_item .project_item_inside { position: relative; } div.isotope_project_item .box * { transform: none !important; } div.isotope_project_item { overflow: hidden; float: left; position: relative; } div.isotope_project_item .cs-hover .text_inside { opacity: 1; top: 0; padding-top: 10% !important; } ul#filter { margin-bottom: 30px; } ul#filter li { display: inline-block; border: 1px solid #eee; } ul#filter a { display: block; padding: 5px 10px; text-decoration: none; font-family: 'ClanWeb-Book',sans; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } ul#filter a:hover, ul#filter a.selected { color: #fff; background-color: #2B6066; } #isotope_projects .pagination { display: none; } #infscr-loading { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9); bottom: 30px; color: #222222; font-size: 15px; font-weight: bold; left: 42%; padding: 20px; position: fixed; text-align: center; z-index: 100; } /* ============================================================================= end global styles ========================================================================== */ /* ============================================================================= Desktop | 1140 Pixel ========================================================================== */ @media only screen and (min-width: 1140px) { /* Isotope ------------------------------------------------- */ div.isotope_project_item { overflow: hidden; margin: 0 10px; width: 265px; height: 219px; float: none; position: relative; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet landscape | 960 Pixel ========================================================================== */ } @media only screen and (min-width: 960px) and (max-width: 1139px) { /* Isotope ------------------------------------------------- */ div.isotope_project_item { overflow: hidden; margin: 0 10px; width: 220px; float: none; position: relative; } div.isotope_project_item h3 { font-size: 1.0625rem; } /* ============================================================================= end tablet landscape ========================================================================== */ /* ============================================================================= Tablet portrait | 768 Pixel ========================================================================== */ } @media only screen and (min-width: 768px) and (max-width: 959px) { /* Page title ------------------------------------------------- */ #page_titles { bottom: 30px; } #page_titles p { font-size: 1.875rem; margin-bottom: 10px; } #page_titles span.mainTitle { padding: 10px 0 0 0; } #page_titles span[class*='icon_']:before { background-size: 60px 60px; } /* Isotope ------------------------------------------------- */ div.isotope_project_item { overflow: hidden; margin: 0 10px; width: 344px; float: none; position: relative; } /* ============================================================================= end tablet portrait ========================================================================== */ /* ============================================================================= Phone landscape | 480 Pixel ========================================================================== */ } @media only screen and (min-width: 480px) and (max-width: 767px) { /* Page title ------------------------------------------------- */ #page_titles { bottom: 10px; } #page_titles p { font-size: 1.5rem; margin-bottom: 10px; } #page_titles span.mainTitle { padding: 10px 0 0 0; } #page_titles span[class*='icon_']:before { background-size: 60px 60px; } /* Isotope ------------------------------------------------- */ div.isotope_project_item { overflow: hidden; margin: 0; width: 100%; float: left; position: relative; } /* ============================================================================= end phone landscape ========================================================================== */ /* ============================================================================= Phone landscape | 300 Pixel ========================================================================== */ } @media only screen and (max-width: 479px) { /* Page title ------------------------------------------------- */ #page_titles { bottom: 10px; } #page_titles p { font-size: 1.5rem; margin-bottom: 10px; } #page_titles span.mainTitle { padding: 10px 0 0 0; } #page_titles span[class*='icon_']:before { background-size: 60px 60px; } /* Isotope ------------------------------------------------- */ div.isotope_project_item { overflow: hidden; margin: 0; width: 100%; float: none; position: relative; } /* ============================================================================= end phone landscape ========================================================================== */ /* ========================================================================== global mobile styles ========================================================================== */ } @media only screen and (max-width: 767px) { .mod_newslist.news-archiv { margin-top: 0; } /* ========================================================================== global mobile styles ========================================================================== */ } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.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(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.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(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* * Liquid Slider v2 * Copyright 2012 Kevin Batdorf * http://liquidslider.com * MIT license */ .no-js .liquid-slider { height:350px; overflow:scroll; } .ls-preloader { background: url(../../files/layout/files/layout/scripts/images/loading.gif) #f2f2f2 no-repeat center 50%; opacity:1; width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; } /*** Containers ***/ .ls-wrapper { clear: both; overflow: auto; position: relative; } .liquid-slider { background: #f2f2f2; width: 600px; margin: 0 auto; float: left; overflow: hidden; position: relative; } .arrows .liquid-slider { /* Margin between slider and arrows */ margin: 0 10px; } .ls-responsive .liquid-slider { width: 100%; margin: 0; } .panel-container { position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; /* from http://davidwalsh.name/translate3d */ } .liquid-slider .panel-container .fade { width:100%; opacity: 0; position: absolute; top: 0; left: 0; display: block; } /*** Panels ***/ .liquid-slider .ls-panel { width: 600px; display: block; float: left; } .panel-wrapper { padding: 15px 40px; position:relative; } /*** Tabbed Navigation ***/ .ls-nav { overflow:hidden; clear:both; } .ls-nav a { background: #d8d8d8; color: #333333; margin-right: 1px; padding: 10px 15px; outline:0; } .ls-nav a:hover { background: #f2f2f2; color: #333333; text-shadow: none; } .ls-nav .current a { background: #f2f2f2; } .currentCrossLink { font-weight: bold; } .ls-nav ul { padding:0; clear: both; display: block; margin: auto; overflow: hidden; } .ls-nav ul li { display: inline; } .ls-nav ul li a { display: block; float: left; text-decoration: none; } /*** Mobile Navigation ***/ .ls-select-box { width: 100%; height: 35px; overflow: hidden; background: url(../../files/layout/files/layout/scripts/images/menu.png) no-repeat right #ddd; } .ls-select-box select { width: 150%; -webkit-appearance: none; -moz-appearance: none; appearance:none; background: transparent; padding: 5px; font-size: 110%; border: none; height: 35px; cursor:pointer; outline: 0; } /*** Arrow Navigation (non-graphical) ***/ .ls-nav-left, .ls-nav-right { top:0; float: left; clear:both; } .ls-nav-left a, .ls-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px; display: block; text-align: center; text-decoration: none; } .ls-responsive .ls-nav-left { position: absolute; left: 0; z-index: 2; } .ls-responsive .ls-nav-left a { background: #9A9A9A; width: 80px; } .ls-responsive .ls-nav-left a:hover { background: #747474; } .ls-responsive .ls-nav-right { position: absolute; right: 0; z-index: 2; } .ls-responsive .ls-nav-right a { background: #9A9A9A; width: 80px; } .ls-responsive .ls-nav-right a:hover { background: #747474; } /*** Arrow Navigation (graphical) ***/ .ls-nav-left-arrow, .ls-nav-right-arrow { cursor: pointer; float: left; clear: both; } .ls-nav-left-arrow a, .ls-nav-right-arrow a { display: block; } [class$="-arrow"] { width: 25px; height: 25px; background-image: url(../../files/layout/files/layout/scripts/images/arrow.png); background-repeat: no-repeat; margin-top: 50px; position:relative; } .ls-nav-right-arrow { background-position: top right; margin-right: 5px; } .ls-nav-left-arrow { background-position: top left; margin-left: 5px; } .ls-nav-left-arrow:hover { background-position: bottom left; } .ls-nav-right-arrow:hover { background-position: bottom right; } .ls-responsive .ls-nav-left-arrow { position: absolute; left: 0; z-index: 2; } .ls-responsive .ls-nav-right-arrow { position: absolute; right: 0; z-index: 2; } /* Background colors ------------------------------------------------- */ .bgcolor_brown_20 { background-color: rgba(169, 162, 117, 0.2); } .bgcolor_brown_40 { background-color: rgba(169, 162, 117, 0.4); } .bgcolor_brown_60 { background-color: rgba(169, 162, 117, 0.6); } .bgcolor_brown_80 { background-color: rgba(169, 162, 117, 0.8); } .bgcolor_brown_100 { background-color: rgb(169, 162, 117); } .bgcolor_blue_20 { background-color: rgba(56, 97, 105, 0.2); } .bgcolor_blue_40 { background-color: rgba(56, 97, 105, 0.4); } .bgcolor_blue_60 { background-color: rgba(56, 97, 105, 0.6); } .bgcolor_blue_80 { background-color: rgba(56, 97, 105, 0.8); } .bgcolor_blue_100 { background-color: rgb(56, 97, 105); } .bgcolor_blue_60 *, .bgcolor_blue_80 *, .bgcolor_blue_100 * { color: #fff !important; } .bgcolor_brown_80 *, .bgcolor_brown_100 *, .bgcolor_blue_80 *, .bgcolor_blue_100 * { color: #fff !important; } /* Background overlays ------------------------------------------------- */ .bg_overlay_01 { background-image: url("../../files/media/backgrounds/overlays/bg_overlay01.jpg"); background-repeat: repeat; } .bg_overlay_02 { background-image: url("../../files/media/backgrounds/overlays/bg_overlay02.png"); background-repeat: repeat; } .bg_overlay_03 { background-image: url("../../files/media/backgrounds/overlays/bg_overlay03.png"); background-repeat: repeat; } .bg_overlay_04 { background-image: url("../../files/media/backgrounds/overlays/bg_overlay04.png"); background-repeat: repeat; } /* Background images ------------------------------------------------- */ .article_image { height: 500px; padding: 0; background-attachment: fixed; background-position: center center; background-size: cover; -webkit-background-size: cover; height: 400px; position: relative; } .article_image .article_inside { width: 100% !important; } .article_image .image_container { margin: 0; } .bg_image_01 { background-image: url("../../files/media/backgrounds/bgimages/background01.jpg"); } .bg_image_02 { background-image: url("../../files/media/backgrounds/bgimages/background02.jpg"); } .bg_image_03 { background-image: url("../../files/media/backgrounds/bgimages/background03.jpg"); } .bg_image_04 { background-image: url("../../files/media/backgrounds/bgimages/background04.jpg"); } /* Box border sytles ------------------------------------------------- */ .box.border { border: 10px solid rgba(255,255,255,0.5); } /* Revolution Slider ------------------------------------------------- */ .ce_revolutionslider .tp-loader { display: none; } /* LiquidSlider 2 ------------------------------------------------- */ .mod_article#slider { background-color: rgba(255,255,255,0.0); } .ls-wrapper { max-width: 100% !important; } .liquid-slider { background-color: transparent; } .liquid-slider .ce_text { font-family: 'ClanWeb-Book', sans; font-size: 50px; color: #A9A275; } .panel-wrapper { text-align: center; padding: 0; } .panel-wrapper .text_inside { padding-top: 50px; } /* ============================================================================= * camera slider headlines * ========================================================================== */ .camera_wrap h3 { font-size: 50px; line-height: 1.2; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .camera_wrap h4 { font-size: 36px; line-height: 1.2; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .camera_prev, .camera_next, .camera_commands { color:#fff; } .camera_prev, .camera_next, .camera_commands { top: 45%; opacity: 0.8; } /* ============================================================================= * liquid slider * ========================================================================== .liquid-slider-wrapper .liquid-slider { background-color: #000; } .liquid-responsive .liquid-slider .panel .panel-wrapper { border: 20px solid #000; padding:0; background-color: #fff; } .liquid-responsive .liquid-slider .ce_text.panel .panel-wrapper { padding:20px; }*/ /* ============================================================================= * background/image * ========================================================================== */ /* ============================================================================= * background-full-size * ========================================================================== */ /* uncomment the following lines if you want use this option */ /* body {background-image: url(../../files/layout/img/bg_full_default.jpg)!important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-position: center top; background-repeat: repeat;} */ /* body.ie8 {background-repeat: no-repeat; background-position: top center;} */ /* ============================================================================= * body fonts * ========================================================================== */ body { font-family: 'PMNCaeciliaETW08-Roman', sans-serif; line-height: 1.5; } /* ============================================================================= * header fonts + color * ========================================================================== */ #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer p, #footer a { color: #fff; } /* ============================================================================= * social icons top - color * ========================================================================== */ #socials a {color: #959595;} /* ============================================================================= * buttons + submit buttons + hyperlinks - color * ========================================================================== */ .button, input[type="submit"], input.submit {background: #657383;} /* ============================================================================= * servicebox - background color * ========================================================================== */ .servicebox[class^="icon-"]:before, .servicebox[class*="icon-"]:before {background: #657383;} /* ============================================================================= * mainmenu - activ + hover * ========================================================================== */ #dropdown li a:hover, #dropdown li a.active, #dropdown li a.trail, #dropdown ul li a:hover, #dropdown ul li a.trail, #dropdown ul li a.active, #dropdown ul li.active a {background: #657383;} /* ============================================================================= * list icons * ========================================================================== */ .ce_list ul li, .ce_text ul li { list-style: disc; margin-left: 33px; } /* ============================================================================= * default menu icon * ========================================================================== */ /* overwrite all other icon definition in the page setup */ /* info: for icon-code look into the file icons.css */ /* uncomment the following line if you want use this option !! */ /* .mod_navigation li a:before {content:'\e912';} */ /* ============================================================================= * tiny CSS-Classes * ========================================================================== */ .code { display: inline; line-height: 2.2; font-size: 14px; padding: 5px 10px; border-radius: 5px; border: 1px solid #aaa; background-color: #eee; font-family: "Courier New", Courier, monospace; color: #666; } .hinweis { display: inline-block; font-size: 14px; padding: 10px 20px; border: 1px solid #78A019; background-color: #fff; color: #78A019; } /* ===================================================== tablet portrait styles | width 768 ===================================================== */ @media only screen and (min-width: 768px) and (max-width: 1139px) { /* Background images ------------------------------------------------- */ .article_image { background-attachment: scroll; background-size: 150% auto; } /* ===================================================== end tablet portrait styles ===================================================== */ /* ========================================================================== global mobile styles ========================================================================== */ } @media only screen and (max-width: 767px) { /* Background images ------------------------------------------------- */ .article_image { height: auto; background: none; } .round * { color: #555 !important; } .box.round h4 { color: #386169 !important; } .bgcolor_brown_80 .box.round *, .bgcolor_brown_100 .box.round *, .bgcolor_blue_80 .box.round *, .bgcolor_blue_100 .box.round * { color: #fff !important; } .iphone .bgcolor_brown_80 .box.round *, .iphone .bgcolor_brown_100 .box.round *, .iphone .bgcolor_blue_80 .box.round *, .iphone .bgcolor_blue_100 .box.round * { color: #fff !important; } .liquid-slider .ce_text { font-size: 30px; color: #A9A275; } .panel-wrapper .text_inside { padding-top: 20px; } /* ========================================================================== global mobile styles ========================================================================== */ }