body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%} legend{width:100%;display:block;font-weight:700;border:0}input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input:not([type]),textarea{width:100%;display:inline-block;padding:3px 6px;background:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #eee;-webkit-box-shadow:inset 0 1px 1px #eee;box-shadow:inset 0 1px 1px #eee;-moz-transition:all .15s linear;-webkit-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=time]:focus,input[type=url]:focus,input:not([type]):focus,textarea:focus{outline:0;background:#fcfcfc;border-color:#bbb}input[type=file]{cursor:pointer}select,input[type=file]{display:block}form button,input[type=file],input[type=image],input[type=submit],input[type=reset],input[type=button],input[type=radio],input[type=checkbox]{width:auto}textarea,select[multiple],select[size]{height:auto}input[type=radio],input[type=checkbox]{margin:0 3px 0 0}input[type=radio],input[type=checkbox],label{vertical-align:middle}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background:#eee}input[type=radio][disabled],input[type=checkbox][disabled],input[type=radio][readonly],input[type=checkbox][readonly]{background:0 0}form button,input[type=submit],.button{display:inline-block;padding:4px 15px 4px 14px;margin-bottom:0;text-align:center;vertical-align:middle;line-height:16px;font-size:11px;color:#000;cursor:pointer;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#ececec;background-image:-moz-linear-gradient(top,#fff,#ececec);background-image:-webkit-linear-gradient(top,#fff,#ececec);background-image:-ms-linear-gradient(top,#fff,#ececec);background-image:-o-linear-gradient(top,#fff,#ececec);background-image:linear-gradient(to bottom,#fff,#ececec);background-repeat:repeat-x;-moz-transition:background .15s linear;-webkit-transition:background .15s linear;-o-transition:background .15s linear;transition:background .15s linear}form button:hover,input[type=submit]:hover,.button:hover{text-decoration:none;background-position:0 -15px!important}form button:active,input[type=submit]:active,.button:active{background-color:#e6e6e6;background-position:0 -30px!important}form button.blue,input[type=submit].blue,.button.blue{background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);border-color:#2f96b4;color:#fff}form button.blue:active,input[type=submit].blue:active,.button.blue:active{background-color:#2e95b3}form button.green,input[type=submit].green,.button.green{background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);border-color:#51a351;color:#fff}form button.green:active,input[type=submit].green:active,.button.green:active{background-color:#4f9f4f}form button.orange,input[type=submit].orange,.button.orange{background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);border-color:#f89406;color:#fff}form button.orange:active,input[type=submit].orange:active,.button.orange:active{background-color:#f28f04}form button.red,input[type=submit].red,.button.red{background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);border-color:#bd362f;color:#fff}form button.red:active,input[type=submit].red:active,.button.red:active{background-color:#be322b}.widget{margin-bottom:12px}.widget>label{display:block;margin-bottom:6px;font-weight:700}.inline-form .widget{display:inline-block;margin-bottom:0;vertical-align:middle}.horizontal-form .widget:after{content:"";display:table;clear:both}.horizontal-form .widget>label{width:20%;float:left;padding:3px 2% 0 0;text-align:right}.horizontal-form .widget>input,.horizontal-form .widget>textarea{width:78%;float:left}.horizontal-form .widget>fieldset{margin-left:20%} .download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)} .rs-columns { clear: both; display: inline-block; width: 100%; } .rs-column { float: left; width: 100%; margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: left; } .rs-column.-large-last { margin-right: -5px; } .rs-column.-large-first-row { margin-top: 0; } .rs-column.-large-col-1-1 { width: 100%; } .rs-column.-large-col-2-1 { width: 46.15385%; } .rs-column.-large-col-2-2 { width: 100%; } .rs-column.-large-col-3-1 { width: 28.20513%; } .rs-column.-large-col-3-2 { width: 64.10256%; } .rs-column.-large-col-3-3 { width: 100%; } .rs-column.-large-col-4-1 { width: 19.23077%; } .rs-column.-large-col-4-2 { width: 46.15385%; } .rs-column.-large-col-4-3 { width: 73.07692%; } .rs-column.-large-col-4-4 { width: 100%; } .rs-column.-large-col-5-1 { width: 13.84615%; } .rs-column.-large-col-5-2 { width: 35.38462%; } .rs-column.-large-col-5-3 { width: 56.92308%; } .rs-column.-large-col-5-4 { width: 78.46154%; } .rs-column.-large-col-5-5 { width: 100%; } .rs-column.-large-col-6-1 { width: 10.25641%; } .rs-column.-large-col-6-2 { width: 28.20513%; } .rs-column.-large-col-6-3 { width: 46.15385%; } .rs-column.-large-col-6-4 { width: 64.10256%; } .rs-column.-large-col-6-5 { width: 82.05128%; } .rs-column.-large-col-6-6 { width: 100%; } @media screen and (max-width: 900px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: none; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: left; } .rs-column.-medium-last { margin-right: -5px; } .rs-column.-medium-first-row { margin-top: 0; } .rs-column.-medium-col-1-1 { width: 100%; } .rs-column.-medium-col-2-1 { width: 46.15385%; } .rs-column.-medium-col-2-2 { width: 100%; } .rs-column.-medium-col-3-1 { width: 28.20513%; } .rs-column.-medium-col-3-2 { width: 64.10256%; } .rs-column.-medium-col-3-3 { width: 100%; } .rs-column.-medium-col-4-1 { width: 19.23077%; } .rs-column.-medium-col-4-2 { width: 46.15385%; } .rs-column.-medium-col-4-3 { width: 73.07692%; } .rs-column.-medium-col-4-4 { width: 100%; } .rs-column.-medium-col-5-1 { width: 13.84615%; } .rs-column.-medium-col-5-2 { width: 35.38462%; } .rs-column.-medium-col-5-3 { width: 56.92308%; } .rs-column.-medium-col-5-4 { width: 78.46154%; } .rs-column.-medium-col-5-5 { width: 100%; } .rs-column.-medium-col-6-1 { width: 10.25641%; } .rs-column.-medium-col-6-2 { width: 28.20513%; } .rs-column.-medium-col-6-3 { width: 46.15385%; } .rs-column.-medium-col-6-4 { width: 64.10256%; } .rs-column.-medium-col-6-5 { width: 82.05128%; } .rs-column.-medium-col-6-6 { width: 100%; } } @media screen and (max-width: 599px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: none; } .rs-column.-medium-last { margin-right: 7.69231%; } .rs-column.-medium-first-row { margin-top: 7.69231%; } .rs-column.-small-first { clear: left; } .rs-column.-small-last { margin-right: -5px; } .rs-column.-small-first-row { margin-top: 0; } .rs-column.-small-col-1-1 { width: 100%; } .rs-column.-small-col-2-1 { width: 46.15385%; } .rs-column.-small-col-2-2 { width: 100%; } .rs-column.-small-col-3-1 { width: 28.20513%; } .rs-column.-small-col-3-2 { width: 64.10256%; } .rs-column.-small-col-3-3 { width: 100%; } .rs-column.-small-col-4-1 { width: 19.23077%; } .rs-column.-small-col-4-2 { width: 46.15385%; } .rs-column.-small-col-4-3 { width: 73.07692%; } .rs-column.-small-col-4-4 { width: 100%; } .rs-column.-small-col-5-1 { width: 13.84615%; } .rs-column.-small-col-5-2 { width: 35.38462%; } .rs-column.-small-col-5-3 { width: 56.92308%; } .rs-column.-small-col-5-4 { width: 78.46154%; } .rs-column.-small-col-5-5 { width: 100%; } .rs-column.-small-col-6-1 { width: 10.25641%; } .rs-column.-small-col-6-2 { width: 28.20513%; } .rs-column.-small-col-6-3 { width: 46.15385%; } .rs-column.-small-col-6-4 { width: 64.10256%; } .rs-column.-small-col-6-5 { width: 82.05128%; } .rs-column.-small-col-6-6 { width: 100%; } } /** * stateART - Creative Design and Marketing * stateART - Contao Theme SPACE * */ /* **************** Variablen **************** */ :root { --main: #f2f2f2; --akzent: #ffcc00; --hintergrund: #fff; --linkfarbe: #2e2245; --body: #040404; } /** * stateART - Creative Design and Marketing * stateART - Contao Theme SPACE * */ /** * ============================================================================= * mainmenu * ========================================================================== */ #header .top ul li { display: inline; color:white; font-size: 14px; padding:0px 20px; } #header .top ul li a { color:white; } #header .top .content-text { padding: 0px; } /** * ============================================================================= * mainmenu * ========================================================================== */ #header .mod_navigation { transition: all 1s ease; } .mainmenu { display: block; margin:0 auto; text-align:left; margin:-25px -10px; } .mainmenu ul { float: left; margin: 0; padding-left:12px; } .mainmenu li { display: inline-block; } .mainmenu ul>li a, .mainmenu ul>li strong { display: block; position:relative; padding: 20px 15px; color: var(--body); text-decoration: none; font-size: 16px; line-height: 1.5; white-space: nowrap; letter-spacing: 1px; transition: All 0.4s ease; font-weight: 600; } .mainmenu>ul>li:hover>a:after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0px; height: 3px; background-color: var(--body); transform: scaleX(0); transition: transform 0.2s; } /* .mainmenu ul li.submenu a:after, .mainmenu ul li.submenu strong:after { content: "\f0d7"; margin-left: 5px; text-decoration: none; font-size: 12px; line-height: 1; font-family: "Font Awesome 5 Free"; font-weight: 900; } */ .mainmenu>ul>li:hover>a, .mainmenu>ul>li>a.trail, .mainmenu>ul li>a.active, .mainmenu>ul>li>strong { color: var(--body); text-decoration: underline; } .mainmenu > ul > li > strong span::after, .mainmenu > ul > li > a span::after { position: absolute; top: 100%; left: 12px; right: 12px; height: 2px; background: var(--body); content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .mainmenu ul li a.active span:after, .mainmenu > ul > li > strong span::after, .mainmenu > ul > li:hover > a span::after, .mainmenu > ul > li > a.trail span::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(-5px); } .mainmenu ul ul, .mainmenu ul ul ul { position: absolute; top: -32768px; left: -32768px; width: 0; height: 0; float: none; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } @keyframes fadeInUpNavi { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } } /* Unternavigation */ .mainmenu li:hover ul.level_2 { display: block; top: auto; left: auto; width: auto; min-width: 120px; height: auto; padding: 0; background-color: white; box-shadow: 0 0 3px rgba(0, 0, 0, .2); z-index: 1000; animation-duration: 0.2s; animation-fill-mode: both; animation-name: fadeInUpNavi; } .mainmenu ul ul li:hover ul.level_3, .mainmenu ul ul ul li:hover ul.level_4 { display: block; left: 100%; top: 0; width: auto; min-width: 120px; height: auto; background-color: var(--akzent); box-shadow: 0 0 3px rgba(0, 0, 0, .2); z-index: 1000; animation-duration: 0.2s; animation-fill-mode: both; animation-name: fadeInUpNavi; } .mainmenu ul li.last ul li:hover ul.level_3, .mainmenu ul li.last ul li:hover ul.level_4 { left: auto; right: 100% } .mainmenu ul ul li { display: block; position: relative; border-bottom: 1px solid var(--main); line-height: 30px; } .mainmenu ul ul li:last-child { border: none; } .mainmenu ul ul>li a, .mainmenu ul ul>li strong { padding: 8px 20px; font-size: 16px; color: var(--body); text-transform: none; } .mainmenu ul ul>li.submenu>a:after, .mainmenu ul ul>li.submenu>strong:after { display: block; position: absolute; right: 8px; top: 50%; transform: translateY(-9px); content: "\f105"; margin-left: 5px; margin-top: 1px; text-decoration: none; font-size: 12px; line-height: inherit; font-family: "Font Awesome 5 Free"; } .mainmenu ul li.last ul>li.submenu>a:after, .mainmenu ul li.last ul>li.submenu>strong:after { right: auto; left: 8px; margin-left: 0; content: "\f104"; } .mainmenu>ul ul li:hover>a, .mainmenu>ul ul li>a.trail, .mainmenu>ul ul li>a.active, .mainmenu>ul ul li>strong { background-color: var(--akzent); color: white; } .mainmenu ul ul li a:after, .mainmenu ul ul li strong:after { display: none; } @media screen and (min-width: 1205px) and (max-device-width: 1330px) { .mainmenu ul>li a, .mainmenu ul>li strong { padding: 20px 10px; font-size: 12px; } } @media screen and (min-width: 1000px) and (max-device-width: 1204px) { .mainmenu ul>li a, .mainmenu ul>li strong { padding: 20px 10px; font-size: 11px; } } @media (max-width: 1200px) { #header .mod_navigation.mainmenu { display: none; } } /** * ============================================================================= * Sticky * ========================================================================== */ .sticky .mod_navigation { padding-top: 5px !important; transition: all 1s ease; } .sticky .mainmenu { margin-top:-38px; } .sticky .mainmenu ul>li a, .sticky .mainmenu ul>li strong { font-size: 14px; } /** * ============================================================================= * Burger Menu * ========================================================================== */ .burger-menu { font-size: 20px; cursor: pointer; background-color: var(--akzent); color: white; padding: 10px 15px; border: none; position: absolute; right: 50px; top: 15px; } .burger-menu:hover { background-color: #444; } /** * ============================================================================= * Mobile Menu * ========================================================================== */ .mod_navigation.mobile-menu { padding-left: 30px; padding-top: 60px; } .sidebar { height: 100%; width: 0; position: fixed; z-index: 1000; top: 0; left: 0; background-color: var(--body); overflow-x: hidden; transition: 0.5s; max-width: 50%; } .sidebar a { text-decoration: none; font-size: 40px; color: white; display: block; transition: 0.3s; } .sidebar .active { text-decoration: none; font-size: 40px; color: var(--akzent); display: block; transition: 0.3s; font-weight:normal; } .sidebar ul.level_1 { list-style-type: none; padding: 0px; } .sidebar li.submenu { text-decoration: none; font-size: 25px; color: var(--akzent); display: block; font-weight:normal; } .sidebar strong.submenu { padding: 0px; font-weight: normal; } .sidebar a:hover { color: var(--akzent); text-decoration:none; } .sidebar ul.level_2 a, .sidebar ul.level_2 .active { font-size: 15px; padding:0px !important; } .sidebar ul.level_2 { list-style-type:circle; padding-left:60px } .sidebar .level_2 ::marker { font-size: 15px; } .sidebar .trail.submenu ul { font-size: 15px; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 30px; cursor: pointer; background-color: transparent; color: var(--body); padding: 0px 10px; border: 3px solid var(--body); transition:1s; } .openbtn:hover { border: 3px solid white; transition:1s; color: white; } #mm-menu { transition: margin-left .5s; padding: 16px; position: absolute; right: 7%; top: 35%; } .sticky #mm-menu { transition-delay: 1s right: 0%; top:0%; transition-property: top; transition-duration: 1s; transition-delay: 0s; } @media (max-width: 768px) { .sidebar a, .sidebar .active { font-size: 25px; } #mm-menu { transition: margin-left .5s; padding: 16px; position: absolute; right: 0%; top:5%; } .sidebar { max-width: 100%; } } @media (min-width: 1200px) { #mm-menu { display: none; } } /** * ============================================================================= * mod_breadcrumb * ========================================================================== */ #breadcrumb { border-bottom: 1px solid #ededed; } .mod_breadcrumb { padding: 15px 0px; margin-left:-20px; } .mod_breadcrumb ul { display: block; margin: 0 auto; font-size: 13px; } .mod_breadcrumb ul li { display: inline-block; } .mod_breadcrumb ul li.active { color: var(--akzent); } .mod_breadcrumb ul li a { color: var(--main); text-decoration: none; } .mod_breadcrumb ul li a:hover { text-decoration: underline; } .mod_breadcrumb ul li.first:before { display: none; } .mod_breadcrumb ul li:before { content: "\f30b"; margin-right: 6px; margin-left: 6px; font-family: "Font Awesome 5 Free"; font-weight: 900; } @media (max-width: 767px) { .mod_breadcrumb { margin-left: 15px; margin-right: 15px; } } /** * ============================================================================= * pagination * ========================================================================== */ .pagination ul {list-style: none; text-align:right; margin: 0; padding: 0; } .pagination ul li {display: inline-block; } .pagination ul li strong, .pagination ul li a { display: block; padding: 1px 12px; background: #eee; color: var(--main); font-size:24px !important; } .pagination p { font-size: 24px; } .pagination a { font-size: 25px !important; } .pagination .active { color: var(--akzent); } nav.pagination{ border-top: 1px solid #ccc; padding-top: 15px; padding-bottom: 15px; margin-bottom: 15px; } @media (max-width: 767px) { .pagination p { font-size: 16px; } .pagination ul li strong, .pagination ul li a { font-size: 16px !important; } } /** * Fix: Unternavigation laesst sich nicht erreichen * ----------------------------------------------------------------- * navigation.css bleibt UNVERAENDERT. Diese Datei danach einbinden. * * URSACHE (aus der Bildschirmaufnahme belegt): * .mainmenu hat "margin: -25px -10px". Der negative UNTERE Rand zieht * den nachfolgenden Seiteninhalt – den Slider – 25px nach oben, genau * ueber den unteren Rand der Menuelinks. * * Der Header ist "position: sticky" und bildet damit einen eigenen * Stapelkontext. Ohne z-index landet dieser hinter dem Slider, der im * Quelltext spaeter kommt. Das Untermenue blieb sichtbar, weil es * INNERHALB dieses Kontexts mit z-index:1000 nach vorn sortiert wird – * die unteren ~25px der Menuelinks lagen aber hinten. Die Maus traf * dort den Slider statt den Link, :hover fiel weg, das Menue klappte zu. * * Sobald der Header klebte, lag er ueber dem Inhalt – deshalb hat es * nach dem Scrollen funktioniert. */ /* ----------------------------------------------------------------- * 1. Kernfix: den Stapelkontext des Headers nach vorn holen * * WICHTIG: hier NUR z-index setzen, niemals "position". * Der Header ist bereits positioniert (sticky) – ein zusaetzliches * "position: relative" ueberschreibt das und Sticky faellt aus. * ----------------------------------------------------------------- */ #header { z-index: 100; } /* ----------------------------------------------------------------- * 2. Karenzzeit beim Ausblenden, damit kleine Mausabweichungen * das Menue nicht sofort schliessen * ----------------------------------------------------------------- */ /* Grundzustand. * * ACHTUNG, hier steckt die Tuecke: in navigation.css stehen Hintergrund, * Schatten, Innenabstand und z-index AUSSCHLIESSLICH in der * :hover-Regel. Sobald der Hover endet, faellt das Menue auf den * Grundzustand zurueck – und weil es dank Karenzzeit noch sichtbar ist, * blieb nackter Text ohne weisse Karte stehen und zog ueber die Seite. * Deshalb gehoert die komplette Optik hier herein, nicht nur in :hover. */ .mainmenu ul ul, .mainmenu ul ul ul { /* Geometrie – identisch zur Aufklapp-Regel in navigation.css */ top: auto; left: auto; width: auto; height: auto; min-width: 120px; /* Optik – gilt jetzt in BEIDEN Zustaenden */ padding: 0; background-color: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .2); z-index: 1000; visibility: hidden; opacity: 0; /* Ausblenden: 0.25s Karenzzeit, dann 0.18s ausblenden */ transition: opacity .18s ease .25s, visibility 0s linear .43s; } /* Ebene 3 und 4 – Position und Farbe ebenfalls im Grundzustand, damit beim Ausblenden nichts springt. Werte 1:1 wie im Original. */ .mainmenu ul ul ul { top: 0; left: 100%; background-color: var(--akzent); } .mainmenu ul li.last ul ul { left: auto; right: 100%; } /* Aufgeklappt: sofort, ohne Verzoegerung */ .mainmenu li:hover ul.level_2, .mainmenu li:focus-within ul.level_2, .mainmenu ul ul li:hover ul.level_3, .mainmenu ul ul li:focus-within ul.level_3, .mainmenu ul ul ul li:hover ul.level_4, .mainmenu ul ul ul li:focus-within ul.level_4 { visibility: visible; opacity: 1; transition: opacity .18s ease 0s, visibility 0s linear 0s; } /* Karenzzeit anpassen: erster Wert = Wartezeit, zweiter Wert * = Wartezeit + Ausblenddauer. Traeger z.B. .4s / .58s, * ganz ohne Nachlauf .01s / .19s. */ /* ----------------------------------------------------------------- * 3. Lesbarkeit: weisse Schrift auf ADAC-Gelb ist im Untermenue * praktisch nicht lesbar. Auf Gelb gehoert schwarze Schrift. * ----------------------------------------------------------------- */ .mainmenu > ul ul li:hover > a, .mainmenu > ul ul li > a.trail, .mainmenu > ul ul li > a.active, .mainmenu > ul ul li > strong { background-color: var(--akzent); color: var(--body); } /** * Variante D – "Vollbreite" * ----------------------------------------------------------------- * Weisse Leiste ueber die volle Breite, buendig an der Unterkante des * gelben Headers. Der Inhalt startet an der linken Kante des * Menuepunkts, unter dem er aufklappt. * * Einbinden nach: * 1. navigation.css * 2. navigation-fix.css * 3. nav-variante-d.css * * So funktioniert die Ausrichtung: * Die erste Menueebene wird auf "position: static" gesetzt, damit der * naechste positionierte Vorfahre der Header ist (#header ist sticky). * Dadurch gilt: * top: 100% -> exakt die Unterkante des Headers * left: auto -> die statische Position, also die linke Kante des * Menuepunkts * Beides zusammen in einer Regel – genau das, was gewuenscht war. * * Die weisse Flaeche kommt nicht vom Menue selbst, sondern von einem * Pseudo-Element dahinter, das nach links und rechts ueber den * Bildschirmrand hinauslaeuft. Deshalb ist der Inhalt buendig zum * Menuepunkt, die Flaeche aber trotzdem randlos. */ .mainmenu { --navd-gelb: var(--akzent, #ffcc00); --navd-tinte: var(--body, #1a1a1a); --navd-spalten: 4; /* Eintraege nebeneinander, dann Umbruch */ --navd-luecke: 30px; /* Abstand zwischen den Spalten */ --navd-rand: 18px; /* Luft oben/unten in der Leiste */ --navd-eintrag: 12px; /* Luft ober-/unterhalb eines Eintrags */ --navd-strich: 5px; /* Staerke des Balkens am Menuepunkt */ --navd-hoehe: 14px; /* Abstand Balken zur Unterkante des Links */ --navd-versatz: -3px; /* Leiste hoch/runter, normal */ --navd-versatz-sticky: -8px; /* dasselbe im Sticky-Zustand */ --navd-tempo: .16s; } /* Der Menuepunkt darf NICHT positioniert sein – sonst beziehen sich top/left auf das einzelne li statt auf den Header. */ .mainmenu > ul > li { position: static; } /* Im Sticky-Zustand schrumpft die Schrift der Hauptpunkte von 16px auf 14px, und die Navigation bekommt 5px Innenabstand oben. Dadurch verschiebt sich die Unterkante des Linkkastens gegenueber der Unterkante der gelben Flaeche – gemessen um 5px. Ein einziger Versatzwert kann deshalb nicht in beiden Zustaenden stimmen. */ .sticky .mainmenu { --navd-versatz: var(--navd-versatz-sticky); } /* Begrenzt die ueberstehende weisse Flaeche auf die Fensterbreite. Bewusst "clip" und nicht "hidden": clip erzeugt keinen Scrollcontainer und laesst damit position:sticky unangetastet. Die senkrechte Achse bleibt sichtbar, das Menue kann also weiterhin nach unten aus dem Header herausragen. */ #header { overflow-x: clip; overflow-y: visible; } /* ----------------------------------------------------------------- * 1. Die Leiste * ----------------------------------------------------------------- */ .mainmenu ul.level_2, .mainmenu li:hover ul.level_2 { /* top: auto = statische Position, also direkt unter dem Kasten des Menuepunkts. Das ist der stabile Bezug: das Padding der Links aendert sich weder beim Umschalten auf Sticky noch bei den Schriftgroessen der Media Queries. "top: 100%" waere die Unterkante des Headers gewesen – der Header ist hier aber kleiner als die sichtbare gelbe Flaeche (.mainmenu hat "margin: -25px", und die Menue-Liste floatet, traegt also nichts zur Hoehe bei). Deshalb ist die Leiste damit nach oben gerutscht und hat den gelben Block angeschnitten. */ top: auto; margin-top: var(--navd-versatz); left: auto; /* linke Kante des Menuepunkts */ right: auto; width: auto; min-width: 0; /* Eintraege nebeneinander, Umbruch nach --navd-spalten Stueck. Feste Spaltenzahl statt Flexbox: nur so fluchten die Spalten auch in der zweiten Zeile. Leere Spalten sind "max-content" breit, also 0 – ein Menue mit zwei Eintraegen bleibt schmal. */ display: grid; grid-template-columns: repeat(var(--navd-spalten), max-content); grid-auto-flow: row; column-gap: var(--navd-luecke); row-gap: 3px; justify-content: start; padding: var(--navd-rand) 0 calc(var(--navd-rand) + 4px); background-color: transparent; /* Flaeche kommt aus ::before */ border: 0; border-radius: 0; box-shadow: none; } /* Die randlose weisse Flaeche dahinter */ .mainmenu ul.level_2::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -1; background-color: #fff; box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .5); } /* ----------------------------------------------------------------- * 2. Eintraege * ----------------------------------------------------------------- */ .mainmenu ul.level_2 > li { display: block; position: relative; border: 0; line-height: 1.4; } .mainmenu ul.level_2 > li a, .mainmenu ul.level_2 > li strong { display: block; position: relative; /* 3px Rahmen + 12px Abstand = 15px, exakt das padding-left der Hauptmenuepunkte. Dadurch steht der Untertext buendig unter dem Text des Hauptpunkts, nicht nur unter dessen Kasten. */ padding: var(--navd-eintrag) 4px var(--navd-eintrag) 12px; font-size: 15px; font-weight: 500; letter-spacing: .2px; line-height: 1.45; white-space: nowrap; color: var(--navd-tinte); background-color: transparent; text-decoration: none; text-transform: none; border-left: 3px solid transparent; transition: border-color var(--navd-tempo) ease, background-color var(--navd-tempo) ease; } .mainmenu ul.level_2 > li:hover > a, .mainmenu ul.level_2 > li:focus-within > a, .mainmenu ul.level_2 > li > a.trail, .mainmenu ul.level_2 > li > a.active, .mainmenu ul.level_2 > li > strong { border-left-color: var(--navd-gelb); background-color: rgba(0, 0, 0, .04); color: var(--navd-tinte); } /* ----------------------------------------------------------------- * 3. Dritte Ebene bleibt ein normaler Kasten * ----------------------------------------------------------------- */ .mainmenu ul ul ul, .mainmenu ul ul li:hover ul.level_3, .mainmenu ul ul ul li:hover ul.level_4 { display: block; min-width: 230px; padding: 6px 0; background-color: #fff; border-top: 3px solid var(--navd-gelb); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .5); } .mainmenu ul ul ul > li a, .mainmenu ul ul ul > li strong { padding: 10px 20px; white-space: nowrap; border-left: 3px solid transparent; } .mainmenu ul ul > li.submenu > a::after, .mainmenu ul ul > li.submenu > strong::after { display: block; position: absolute; right: 6px; top: 50%; content: ""; width: 6px; height: 6px; margin: -4px 0 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .4; font-family: inherit; font-size: 0; } /* ----------------------------------------------------------------- * 4. Hauptebene: Balken an der Unterkante des Menuepunkts * ----------------------------------------------------------------- */ .mainmenu > ul > li:hover > a, .mainmenu > ul > li > a.trail, .mainmenu > ul > li > a.active, .mainmenu > ul > li > strong { color: var(--navd-tinte); text-decoration: none; } .mainmenu > ul > li > a::before, .mainmenu > ul > li > strong::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--navd-hoehe); height: var(--navd-strich); background: var(--navd-tinte); transform: scaleY(0); transform-origin: bottom center; transition: transform .2s cubic-bezier(.2, .8, .2, 1); } .mainmenu > ul > li:hover > a::before, .mainmenu > ul > li:focus-within > a::before, .mainmenu > ul > li > a.trail::before, .mainmenu > ul > li > a.active::before, .mainmenu > ul > li > strong::before { transform: scaleY(1); } .mainmenu > ul > li > a span::after, .mainmenu > ul > li > strong span::after { display: none; } /* ----------------------------------------------------------------- * 5. Feinjustierung * * --navd-hoehe Der Balken sitzt jetzt dicht unter dem Text statt an * der Unterkante des Linkkastens. Damit bleibt er in * jedem Zustand innerhalb der gelben Flaeche – im * Sticky-Zustand schrumpft der Header, eine feste * Verschiebung nach unten waere dort herausgelaufen. * * --navd-versatz Die Leiste sitzt jetzt an der Unterkante des * Menuepunkt-Kastens. Bleibt darunter noch ein gelber * Streifen stehen, hier einen negativen Wert eintragen * (z.B. -3px) – schneidet die Leiste ins Gelb hinein, * einen positiven. In den Entwicklerwerkzeugen den * Abstand zwischen Leistenoberkante und Unterkante der * gelben Flaeche ablesen und genau diesen Wert nehmen. * Beide Zustaende getrennt pruefen: --navd-versatz gilt * fuer die normale Ansicht, --navd-versatz-sticky fuer * die geschrumpfte Leiste nach dem Scrollen. * * Hoehe der Leiste: sie ergibt sich aus --navd-rand (Luft oben/unten), * --navd-eintrag (Luft je Eintrag) und der Zeilenzahl. Weniger Zeilen * gibt es ueber --navd-spalten: bei 8 Eintraegen ergeben 4 Spalten * zwei Zeilen, 8 Spalten eine einzige – dann wird die Leiste aber * entsprechend breit und laeuft bei rechten Menuepunkten leicht aus * dem Bild. * ----------------------------------------------------------------- */ /* Schmalere Fenster: die Hauptpunkte haben dort nur 10px Innenabstand, der Untertext zieht mit. */ @media screen and (min-width: 1000px) and (max-device-width: 1330px) { .mainmenu ul.level_2 > li a, .mainmenu ul.level_2 > li strong { padding-left: 7px; } } /* ----------------------------------------------------------------- * 6. Tastatur / Bewegungsreduktion * ----------------------------------------------------------------- */ .mainmenu a:focus-visible { outline: 3px solid var(--navd-tinte); outline-offset: -3px; } @media (prefers-reduced-motion: reduce) { .mainmenu ul.level_2 > li a, .mainmenu > ul > li > a::before, .mainmenu > ul > li > strong::before { transition-duration: .01ms; } } /** * Mobiles Menue – Variante 1 "Alles offen" * ----------------------------------------------------------------- * Alle Unterpunkte stehen dauerhaft sichtbar unter ihrem Hauptpunkt, * eingerueckt an einer gelben Leiste. Kein Auf- und Zuklappen, kein * Seitenwechsel noetig, kein JavaScript. * * Einbinden NACH navigation.css. Betrifft ausschliesslich .sidebar, * die Hauptnavigation bleibt unberuehrt. * * ============================================================ * VORAUSSETZUNG IM BACKEND * Im Contao-Navigationsmodul der mobilen Navigation muss * "Alle Ebenen anzeigen" aktiviert sein. Ohne diese Einstellung * rendert Contao die zweite Ebene nur fuer die gerade aktive * Seite – dann fehlt das Markup und kein CSS kann es einblenden. * Genau daher kommt das bisherige Verhalten: erst hinklicken, * Seite laedt neu, Menue schliesst sich. * ============================================================ */ .sidebar { --mob-gelb: var(--akzent, #ffcc00); --mob-linie: rgba(255, 255, 255, .09); --mob-matt: rgba(255, 255, 255, .72); /* Die Liste wird durch die offenen Unterpunkte laenger als der Bildschirm – ohne das hier laesst sie sich nicht scrollen. overscroll-behavior verhindert, dass die Seite darunter mitscrollt, wenn man am Ende der Liste weiterwischt. */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Platz fuer die Gestensteuerung auf randlosen Geraeten */ padding-bottom: env(safe-area-inset-bottom, 0px); } .mod_navigation.mobile-menu { padding-left: 0; /* Abstand sitzt jetzt an den Links, damit Trennlinien und Markierung bis an den Rand laufen koennen */ padding-top: 64px; padding-bottom: 40px; } /* ----------------------------------------------------------------- * 1. Schliessen * ----------------------------------------------------------------- */ .sidebar .closebtn { top: 10px; right: 16px; margin-left: 0; font-size: 34px; line-height: 1; padding: 6px 10px; color: #fff; } .sidebar .closebtn:hover { color: var(--mob-gelb); } /* ----------------------------------------------------------------- * 2. Erste Ebene * ----------------------------------------------------------------- */ .sidebar ul.level_1 { list-style: none; margin: 0; padding: 0; } .sidebar ul.level_1 > li { display: block; border-top: 1px solid var(--mob-linie); } .sidebar ul.level_1 > li:first-child { border-top: 0; } .sidebar ul.level_1 > li > a, .sidebar ul.level_1 > li > strong { display: block; position: relative; padding: 14px 22px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: .2px; color: #fff; text-decoration: none; } /* Aktive Seite und aktiver Pfad */ .sidebar ul.level_1 > li > strong, .sidebar ul.level_1 > li > a.active, .sidebar ul.level_1 > li > a.trail, .sidebar ul.level_1 > li > strong.trail { color: var(--mob-gelb); } .sidebar ul.level_1 > li > strong::before, .sidebar ul.level_1 > li > a.active::before, .sidebar ul.level_1 > li > a.trail::before, .sidebar ul.level_1 > li > strong.trail::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--mob-gelb); } /* Die alte Sonderbehandlung fuer Punkte mit Unterebene (25px, durchgaengig gelb) neutralisieren */ .sidebar li.submenu { font-size: inherit; color: inherit; font-weight: inherit; } .sidebar strong.submenu { font-weight: 600; } /* ----------------------------------------------------------------- * 3. Zweite Ebene – dauerhaft sichtbar * ----------------------------------------------------------------- */ .sidebar ul.level_2 { display: block; list-style: none; margin: 0 0 12px 22px; /* buendig unter dem Text der 1. Ebene */ padding: 2px 0 2px 0; border-left: 2px solid rgba(255, 204, 0, .38); font-size: inherit; } .sidebar ul.level_2 > li { display: block; } /* Das "!important" ist noetig, weil die alte Regel ".sidebar ul.level_2 a" ihr padding ebenfalls mit !important setzt. Gleiche Spezifitaet, spaeter in der Kaskade – damit gewinnt diese. */ .sidebar ul.level_2 a, .sidebar ul.level_2 strong { display: block; position: relative; padding: 9px 20px 9px 16px !important; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: .1px; color: var(--mob-matt); text-decoration: none; } .sidebar ul.level_2 strong, .sidebar ul.level_2 a.active, .sidebar ul.level_2 a.trail, .sidebar ul.level_2 .active { color: var(--mob-gelb); font-weight: 500; } /* Der gelbe Balken der aktiven Unterseite liegt genau auf der Einrueckungslinie, statt daneben */ .sidebar ul.level_2 strong::before, .sidebar ul.level_2 a.active::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--mob-gelb); } /* Aufzaehlungszeichen der alten Fassung entfernen */ .sidebar ul.level_2, .sidebar ul.level_2 > li { list-style-type: none; } .sidebar .level_2 ::marker { content: ""; font-size: 0; } .sidebar .trail.submenu ul { font-size: inherit; } /* ----------------------------------------------------------------- * 4. Dritte Ebene, falls sie irgendwann dazukommt * ----------------------------------------------------------------- */ .sidebar ul.level_3 { list-style: none; margin: 0 0 6px 16px; padding: 0; border-left: 1px solid rgba(255, 255, 255, .18); } .sidebar ul.level_3 a, .sidebar ul.level_3 strong { padding: 7px 20px 7px 14px !important; font-size: 14px; color: rgba(255, 255, 255, .6); } /* ----------------------------------------------------------------- * 5. Bedienung * ----------------------------------------------------------------- */ .sidebar a { -webkit-tap-highlight-color: rgba(255, 204, 0, .25); } .sidebar ul.level_1 > li > a:hover, .sidebar ul.level_2 a:hover { color: var(--mob-gelb); text-decoration: none; } .sidebar a:focus-visible { outline: 2px solid var(--mob-gelb); outline-offset: -2px; } /* ----------------------------------------------------------------- * 6. Kleine Geraete * Die alte Fassung setzte hier 25px fuer alles – das ergab * zusammen mit 15px in der zweiten Ebene einen Sprung, der die * beiden Ebenen nicht mehr als eine Liste lesbar machte. * ----------------------------------------------------------------- */ @media (max-width: 400px) { .sidebar ul.level_1 > li > a, .sidebar ul.level_1 > li > strong { font-size: 18px; padding: 13px 18px; } .sidebar ul.level_2 { margin-left: 18px; } .sidebar ul.level_2 a, .sidebar ul.level_2 strong { padding: 9px 18px 9px 14px !important; font-size: 14px; } .mod_navigation.mobile-menu { padding-top: 58px; } } /** * stateART - Creative Design and Marketing * stateART - Contao Theme SPACE * */ /* poppins-regular - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Poppins Regular'), local('Poppins-Regular'), url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-700 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-700.eot'); /* IE9 Compat Modes */ src: local('Poppins Bold'), local('Poppins-Bold'), url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-700.woff') format('woff'), /* Modern Browsers */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-900 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; src: url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-900.eot'); /* IE9 Compat Modes */ src: local('Poppins Black'), local('Poppins-Black'), url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-900.woff') format('woff'), /* Modern Browsers */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('/files/stateART-Template/fonts/poppins-v8-latin/poppins-v8-latin-900.svg#Poppins') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/files/stateART-Template/fonts/open-sans/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('/files/stateART-Template/fonts/open-sans/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* open-sans-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('/files/stateART-Template/fonts/open-sans/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /** * stateART - Creative Design and Marketing * stateART - Contao Theme SPACE * */ /* ============================================================================= * Layout * ========================================================================== */ #wrapper { width: 100%; margin: 0 auto; } .wrapper-boxed { max-width: 1490px; margin: 0 auto; } #header .top { width: 100%; height:40px; transition: height 1s; background-color: var(--body); } #header { width: 100%; height:160px; transition: height 1s; background-color: var(--akzent); } #header img { width: 556px; transition: width 1s; padding-top:15px; } .top-link { text-align: center; } .sticky { position: fixed; top: 0; width: 100%; z-index:1000; transition: height 1s; height:120px !important; background-color: var(--akzent); } .sticky img { width: 300px !important; transition: width 1s; } html { scroll-behavior: smooth; } #footer { background-color: var(--body); color: white; font-size:18px; } #footer ul li { list-style-type:none; line-height: 40px; } #copyright { background-color: var(--akzent); color: var(--body); font-size:18px; } .row { margin-right: 0px !important; margin-left: 0px !important; } #flex { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .line-clamp p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: 18px !important; } @media screen and (min-width: 768px) and (max-width: 1200px) { .hide-t { display: none; } #header img { padding-top:30px; } #header .top ul li { font-size: 12px; padding:0px 10px; } } @media (max-width: 767px) { .ce_text { margin-left: 15px; margin-right: 15px; } #header { height:90px; position:sticky; z-index:100; } #header #logo { padding: 15px 0px; max-width: 340px; } #header .top { display: none; } .hide-s { display: none; } .sticky { height:85px !important; } } /* ============================================================================= * Body * ========================================================================== */ body { font-family: 'Open Sans'; font-weight: 400; color: var(--body) !important; font-size: 20px !important; } .content-text { padding:20px; } @media (min-width: 767px) and (max-width: 1200px) { body { font-size: 22px !important; } } @media (max-width: 767px) { body { font-size: 18px !important; } } /* ============================================================================= * custom-table * ========================================================================== */ .table-wrap { width: 100%; overflow-x: auto; } .custom-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; background: #fff; } .custom-table th, .custom-table td { padding: 14px 16px; border: 1px solid #dcdcdc; text-align: left; vertical-align: top; } .custom-table .table-columns th { background: var(--body); color:#fff; } .custom-table tr:nth-child(even):not(.table-headline):not(.table-columns) { background: #fafafa; } .custom-table tr:hover:not(.table-headline):not(.table-columns) { background: var(--akzent); } /* Responsive */ @media (max-width: 768px) { .custom-table, .custom-table tbody, .custom-table tr, .custom-table td, .custom-table th { display: block; width: 100%; } .custom-table .table-headline, .custom-table .table-headline th { display: table; width: 100%; } .custom-table .table-columns { display: none; } .custom-table tr:not(.table-headline) { margin-bottom: 16px; border: 1px solid #dcdcdc; background: #fff; } .custom-table td { position: relative; padding: 12px 16px 12px 45%; border: none; border-bottom: 1px solid #eee; text-align: left; min-height: 24px; } .custom-table td::before { content: attr(data-label); position: absolute; left: 16px; top: 12px; width: 40%; font-weight: 700; color: #333; } .custom-table td:last-child { border-bottom: none; } } /* ============================================================================= * Headlines * ========================================================================== */ #main h1 { font-family: 'Open Sans'; font-weight: 600; color: var(--akzent); font-size: 60px; } #main h2 { font-family: 'Open Sans'; font-weight: 600; color: var(--body); font-size: 58px; padding-bottom: 20px; padding-top: 20px; } #main h3 { font-family: 'Open Sans'; font-weight: 600; color: var(--akzent); font-size: 40px; } #main h4 { font-family: 'Open Sans'; font-weight: 600; color: var(--body); font-size: 30px !important; } #main h5 { font-family: 'Open Sans'; font-weight: 600; color: var(--linkfarbe); font-size: 40px; } #footer h2 { font-family: 'Open Sans'; font-weight: 600; color: var(--akzent); font-size: 24px; padding-bottom: 25px; } .services li { font-size: 5rem; padding-left:70px; margin-left:70px; } .box2 h2, .box3 h2 { color: white; } .box1 h1 { font-size:52px; text-transform: uppercase; margin:0; padding:0; } .box1 h2 { font-size:50px !important; color: var(--body); } .box1 h3 { font-size:40px !important; color:white !important; } .box3 h1 { padding:2% 10%; } .box3 p { padding:0% 10%; font-size: 24px; color: var(--body); } .box3 h5 { color:white; padding:2% 10% 2% 10%; } .box4 h2 { font-size:34px !important; color: var(--akzent) !important; padding: 25px 0px; } .box4 h3 { font-size:22px; } @media (min-width: 767px) and (max-width: 1200px) { #main h1, #main h2 { font-size: 50px !important; } } @media (max-width: 767px) { .box2 h2 { font-size:28px; } .services li { font-size: 1.6rem; padding-left: 10px; margin-left: 0px; } #main h1, #main h2 { font-size: 32px !important; } .h3, h5 { font-size: 1.1rem !important; } } .bg1 h2 { color:white; } @media (min-width: 768px) and (max-width: 1080px) { .box1 h1 { font-size:40px; } .box1 h2 { font-size:28px; } .box2 h2 { font-size:38px; } .services li { font-size: 3.5rem; padding-left:50px; margin-left:50px; } } @media (max-width: 767px) { .box1 h1 { font-size:40px; } .box1 h2 { font-size:22px; } #footer h3, #footer h3 { line-height: 1.0 !important; } } /* ============================================================================= * Links & Buttons & Listen * ========================================================================== */ .ce_text a { color: var(--akzent); text-decoration:none; } .ce_text a:hover { color: var(--main); transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } #footer .btn1 { border: 2px solid var(--akzent); padding: 10px 20px; } #footer a { color: white; text-decoration:none; } #footer a:hover { color: var(--akzent); transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } #footer ul { padding: 0px; } #copyright a { color: var(--body); text-decoration:none; } #copyright a:hover { color: var(--body); text-decoration: underline; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } .btn1 a { color: var(--body) !important; text-decoration:none; padding:10px 30px; border:2px solid var(--akzent) !important; background-color: var(--akzent); border-radius: 10px; font-size:17px; font-weight: 600; } .btn1 a:hover { color: var(--body) !important; background-color: transparent; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; text-decoration: none; } .btn2 a { color: var(--body) !important; text-decoration:none; padding:10px 30px; border:2px solid var(--body) !important; background-color:transparent; border-radius: 10px; font-size:17px; font-weight: 600; } .btn2 a:hover { color: white !important; background-color: transparent; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; text-decoration: none; border:2px solid white !important; } .bg1 a { color: white; background-color: var(--linkfarbe); text-decoration: none; padding: 20px 40px; border-radius:10px; border: 3px solid var(--linkfarbe); margin-bottom:50px; } .bg1 a:hover { color: var(--akzent); } .box2 a, .content-text a { color: var(--akzent); } .box2 a:hover, #main .content-text a:hover{ color: var(--body) !important; } .link a { color: white; text-decoration:none; padding:10px 30px; background-color: var(--linkfarbe); border-radius:5px; font-size:15px; } .link a:hover { color: white; text-decoration:none; background-color: var(--main); transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } .link a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f061'; padding-left:8px; font-size:11px; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } .box2 a:after, #main .content-text a:after, .box4 a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f061'; padding-left:8px; font-size:16px; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } .link a:hover::after, .box2 a:hover::after, .content-text a:hover::after, .box4 a:hover::after { padding-left:15px; } #main ul { padding: 0px; } #main ul li { color: var(--body); list-style-type: none; line-height: 40px; } #main li:before { content: "\f054"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; padding-right:20px; color: var(--akzent); } .box3 ul li { color: white !important; } .submit { color: var(--akzent); text-decoration:none; padding:10px 20px; border:2px solid var(--akzent); background:none; margin:10px 0px; font-size: 1rem; font-weight: 400; line-height: 1.5; border-radius:5px; } .submit:hover { color: var(--akzent); border:2px solid var(--akzent); transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } hr.line { border: 1px solid var(--linkfarbe); border-radius: 5px; max-width:80%; } fieldset.Checkbox { padding: 20px; border: 2px solid var(--body); margin: 15px; } fieldset#ctrl_17 { display: grid; } @media (max-width: 1150px) { #footer ul { padding: 0px !important; } } /* ============================================================================= * Background & Boxen * ========================================================================== */ .box1 { background-color: var(--akzent); border:0; background-size: cover; } .box2 { background-color: #f2f2f2; border:0; color:#a5a4a4; } .box2 img { border-radius: 15px; } .box3 { background-color: #f2f2f2; color:white; min-height:fit-content; border-radius: 15px; } .box4 { padding:30px !important; background-color:#f2f2f2; } .kontakt a { border: none; color: #212529; padding: 0; } .kontakt2 a { border: none; color: #fff; padding: 0; } .box1 .telefon { color: white !important; background-color: var(--akzent) !important; border: none; } .bg1 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/files/mueller/bilder/allgemein/DSCF4831.jpg"); height: 50%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 150px; color: white; } @media (min-width: 768px) and (max-width: 1080px) { .box2 { padding: 0px 50px 100px 50px !important; } .bg1 { padding: 100px; } } @media (max-width: 767px) { .box1, .box2, .box3 { padding:20px !important; } .box2 { padding: 0px 25px 0px 25px !important; } .box2 .ce_text { margin-left: 0px; margin-right: 0px; } .bg1 { padding: 50px; } } /* ============================================================================= * Bilder Overlay * ========================================================================== */ .c-overlay { position: relative; width: 100%; } .c-overlay img { display: block; width: 100%; height: auto; } .c-overlay figure { margin:0px !important; } .overlay { position: absolute; bottom: 0; left: 100%; right: 0; background-color: #e0d9c4; overflow: hidden; width: 0; height: 100%; transition: .5s ease; } .c-overlay:hover .overlay { width: 100%; left: 0; } .overlay p { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; } /* ============================================================================= * Bilder Titel * ========================================================================== */ .image_container .caption { padding: 10px 20px; color: var(--akzent); } figcaption { position: absolute; background-color: rgba(0, 0, 0, 0.3); bottom: 16px; color: white; font-size: 1rem; padding: 5px; } /* ============================================================================= * Bilder Text * ========================================================================== */ * { box-sizing: border-box; } .bg-text-container { position: relative; max-width: 100%; margin: 0 auto; } .bg-text-container img {vertical-align: middle;width:100%} .bg-text-container .bg-text { position: absolute; bottom: 16px; background: rgb(0, 0, 0); /* Fallback color */ background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */ color: #f1f1f1; width: 80%; padding: 20px; } @media (max-width: 767px) { .bg-text-container .bg-text { font-size: 12px; } } /* ============================================================================= * Count-UP * ========================================================================== */ [data-countup] { font-size: 3rem; font-family:impact; } /* ============================================================================= * Formulare * ========================================================================== */ .ce_form.block { width: 100%; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea { width: 100%; display: inline-block; padding: 8px 6px; background: #fff; border: 2px solid var(--body) !important; -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; border-radius: 5px !important; color: #000 !important; -moz-transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -o-transition: all 0.15s linear; transition: all 0.15s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; } /* ============================================================================= * News * ========================================================================== */ .mod_newslist a { color: var(--akzent); text-decoration:none; font-size:35px; } .mod_newslist a:hover { color: var(--main); text-decoration:none; } .mod_newslist h4 { padding:15px 25px; } .mod_newslist p { padding: 0px 25px 25px 25px; margin-bottom: 80px; } .mod_newsreader h1 { font-size: 60px !important; } .mod_newsreader .info { display:none; } .mod_newslist .more a { color: white; text-decoration: none; padding: 10px 20px; text-transform:uppercase; font-size:16px; } .mod_newslist .more a:hover { color: white; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; } .layout_latest { margin-bottom: 100px; } .mod_newslist .newsbox { background-color:#f5f5f5; } .more { background-color: var(--linkfarbe); padding: 0px 20px 10px 20px !important; position: absolute; bottom: -80px; } .more:hover { background-color: var(--akzent); } @media (max-width: 1200px) { .more { padding: 5px 20px 10px 20px !important; } .mod_newslist .more a { font-size:13px; } } /* ============================================================================= * fontawesome icons * ========================================================================== */ .content-text .fa-solid { font-size: 50px !important; color: var(--body); } .infos .fa-solid { font-size: 50px !important; color: var(--body); } .infos .lni { font-size: 60px !important; color: var(--body); padding:0px; } .content-text .fa-regular { font-size: 50px !important; color: var(--body); } /* ============================================================================= * accordion * ========================================================================== */ .ce_accordion { border: 1px solid #ddd; margin-bottom:15px; } .ce_accordion .toggler, .ce_accordion .ui-accordion-content, .handorgel__header__button { padding: 15px; position:relative; } .ce_accordion .ui-accordion-header-active { border-bottom: 1px solid #ddd; } .ce_accordion .toggler::after, .ce_accordion .toggler::before, .handorgel__header__button::after, .handorgel__header__button::before { content: ""; position: absolute; right: 30px; width: 30px; height: 3px; background-color: white; top: 50%; transform: translateY(-50%); } .ce_accordion .toggler::before, .handorgel__header__button::before{ right: 43px; width: 3px; height: 30px; transition-duration:.3s; } .ce_accordion .ui-accordion-header-active::before, .handorgel__header--opened .handorgel__header__button::before{ height: 0; transition-duration:.3s; } .ce_accordion .toggler:hover { cursor: pointer; } .ce_accordion .toggler:not(.ui-accordion-header-active):hover { box-shadow: 0 0 5px #0001; } .handorgel__header__button { border: unset; border-bottom: 2px dashed white; background-color: var(--akzent); font-size: 24px; color:var(--body); font-weight: 600; } .handorgel__header--opened .handorgel__header__button { border-radius: 5px 5px 0 0; } .handorgel__content { border: unset; background: var(--akzent); border-radius: 0 0 5px 5px; } .content-accordion { border-bottom: unset; } .handorgel__content__inner { padding: 0px; font-size: 20px; } .handorgel__content__inner a { color:var(--body) !important; } .handorgel__header:not(:first-child) { margin-top: 15px; } @media only screen and (max-width: 768px) { .ce_accordion .toggler::after, .ce_accordion .toggler::before, .handorgel__header__button::after, .handorgel__header__button::before { right: 0px; } .ce_accordion .toggler::before, .handorgel__header__button::before{ right: 13px; } } /* ============================================================================= * Google Maps Blocker * ========================================================================== */ .ccb-element-blocker iframe { padding: 0% 0%; } /* ============================================================================= * Scroll Top * ========================================================================== */ #myBtn { position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: transparent; color: var(--main); cursor: pointer; border-radius: 50%; width: 50px; height: 50px; z-index: 100; border: 3px solid var(--main); z-index: 1000; transition: 1s; } #myBtn:hover { border: 3px solid var(--akzent); color: var(--akzent); transition: 1s; } @media (max-width: 768px) { #myBtn { display: none; } } /* **************** Aligns **************** */ .center { text-align:center; margin:0 auto; } /* **************** Paddings & Margins **************** */ .pt10 { padding-top:10px; } .pt20 { padding-top:20px; } .pt30 { padding-top:30px; } .pt40 { padding-top:40px; } .pt50 { padding-top:50px; } .pt60 { padding-top:60px; } .pt70 { padding-top:70px; } .pt80 { padding-top:80px; } .pb10 { padding-bottom:10px; } .pb20 { padding-bottom:20px; } .pb30 { padding-bottom:30px; } .pb40 { padding-bottom:40px; } .pb50 { padding-bottom:50px; } .pb60 { padding-bottom:60px; } .pb70 { padding-bottom:70px; } .pb80 { padding-bottom:80px; } .pl10 { padding-left:10px; } .pl20 { padding-left:20px; } .pl30 { padding-left:30px; } .pl40 { padding-left:40px; } .pl50 { padding-left:50px; } .pr10 { padding-right:10px; } .pr20 { padding-right:20px; } .pr30 { padding-right:30px; } .pr40 { padding-right:40px; } .pr50 { padding-right:50px; } .mt10 { margin-top:10px; } .mt20 { margin-top:20px; } .mt30 { margin-top:30px; } .mt40 { margin-top:40px; } .mt50 { margin-top:50px; } .mb10 { margin-bottom:10px; } .mb20 { margin-bottom:20px; } .mb30 { margin-bottom:30px; } .mb40 { margin-bottom:40px; } .mb50 { margin-bottom:50px; } .ml10 { margin-left:10px; } .ml20 { margin-left:20px; } .ml30 { margin-left:30px; } .ml40 { margin-left:40px; } .ml50 { margin-left:50px; } .mr10 { margin-right:10px; } .mr20 { margin-right:20px; } .mr30 { margin-right:30px; } .mr40 { margin-right:40px; } .mr50 { margin-right:50px; } /** * stateART - Creative Design and Marketing * stateART - Contao Theme SPACE * */ /** * ============================================================================= * Revolution slider * ========================================================================== */ .ce_revolutionslider { margin:0 auto; } .ce_revolutionslider_text { color: var(--body); background-color: white; padding: 0px 50px; } .ce_revolutionslider a { color: var(--body) !important; text-decoration:none; padding:10px 30px; background-color: var(--akzent); border-radius: 10px; font-size:17px; font-weight: 600; } .ce_revolutionslider a:hover { color: var(--body) !important; background-color: #ffae00; transition: All 0.6s ease; -webkit-transition: All 0.6s ease; text-decoration: none; } @media (max-width: 767px) { .ce_revolutionslider a { padding:5px 25px !important; font-size: 10px !important; } } /** * ============================================================================= * contao content slider * ========================================================================== */ .ce-slider img, .content-slider img { width: 100%; height:auto; object-fit: cover; } .ce-slider h1 { font-size: 45px; } .ce-slider h2 { font-size: 25px; } .ce-slider h1, .ce-slider h2 { color: white; padding:0px; margin:0px; } @media (max-width: 767px) { .ce-slider h1 { font-size: 25px; } .ce-slider h2 { font-size: 15px; } } .ce_sliderStart { position: relative; } .ce_sliderStart .ce_text { margin-left: 0px; margin-right: 0px; } .slider-control { position: static !important; height: 0 !important; } .slider-control a, .slider-control .slider-menu { position: absolute; top: 9px; display: inline-block; } .slider-control .slider-menu { font-size: 32px; line-height: 1; top: auto; bottom: 18px; display:none; } .slider-control .slider-menu b { margin: 0 4px; color: #000; } .slider-control .slider-menu b.active { color: var(--akzent); } .slider-control a { opacity: 1; text-decoration: none; font-size: 0; line-height: 1; transform: none; } .slider-control a { top: 50%; opacity: 0.7; text-decoration: none; font-size: 0; line-height: 1; transform: translateY(-50%); } .slider-control a:hover { opacity: 1; } .slider-control-bottom .slider-control .slider-prev { left: 0; transition: All 0.25s ease; } .slider-control-bottom .slider-control .slider-next { right: 0; transition: All 0.25s ease; } .slider-control .slider-next { right: -80px; transition: All 0.25s ease; } .ce_sliderStart:hover .slider-control .slider-next { right: 20px; transition: All 0.25s ease; } .slider-next:before { content: "\f054"; display: block; position: relative; color: var(--linkfarbe); text-align: center; font-size: 60px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .slider-control .slider-prev { left: -80px; transition: All 0.25s ease; } a.slider-prev, a.slider-next { border:none !important; } .ce_sliderStart:hover .slider-control .slider-prev { left: 20px; transition: All 0.25s ease; } .slider-prev:before { content: "\f053"; display: block; position: relative; color: var(--linkfarbe); text-align: center; font-size: 60px; font-family: "Font Awesome 5 Free"; font-weight: 900; } #main .mod_article .ce_sliderStart .ce_text, #main .mod_article .ce_sliderStart .ce_image, .ce_sliderStart .image_container, .ce_slider .inner .image_container { margin: 0; } .slider-wrapper .ce_image figcaption { width: 100%; height: 100%; position: absolute; top: 0%; font-size: 30px; line-height: 1.2; font-weight: bold; text-transform: uppercase; } .slider-wrapper .ce_image figcaption span { position: relative; top: 50%; max-width: 1240px; display: block; margin: 0 auto; padding: 0 30px; overflow: hidden; transform: translateY(-50%); } #main .slider-wrapper .image_container { display: block !important; line-height: 0; } .ce_text.ce-slider .slider-inner { width: 100%; height: 100%; position: absolute; top: 0%; padding: 20px; display: flex; align-items: center; } .ce_text.ce-slider .slider-text { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; overflow: hidden; } .ce_text.ce-slider .slider-text .textbox { background-color: rgba(0, 0, 0, 0.0); } .ce_text.textbox-right.ce-slider .slider-text .textbox { margin-left: auto; } .ce_text.ce-slider .slider-text p:last-child { margin-bottom: 0; } /*---------------------------------------------------*/ #main .mod_article .slider-wrapper .ce_text.text-slider { margin: 30px 0; } .slider-wrapper .ce_text.text-slider::before { position: absolute; top: 0; left: 0; font-size: 8em; line-height: 0.79; font-weight: bold; z-index: 2; } .slider-wrapper .ce_text.text-slider::before { -webkit-text-fill-color: rgba(0, 0, 0, 0.1); -webkit-text-stroke-color: $basecolor; -webkit-text-stroke-width: 1.00px; } .slider-wrapper .ce_text.text-slider:first-child::before { content: '01'; } .slider-wrapper .ce_text.text-slider:nth-of-type(2)::before { content: '02'; } .slider-wrapper .ce_text.text-slider:nth-of-type(3)::before { content: '03'; } .slider-wrapper .ce_text.text-slider:nth-of-type(4)::before { content: '04'; } .slider-wrapper .ce_text.text-slider:nth-of-type(5)::before { content: '05'; } .slider-wrapper .ce_text.text-slider:nth-of-type(6)::before { content: '06'; } .slider-wrapper .ce_text.text-slider:nth-of-type(7)::before { content: '07'; } .slider-wrapper .ce_text.text-slider:nth-of-type(8)::before { content: '08'; } .slider-wrapper .ce_text.text-slider:nth-of-type(9)::before { content: '09'; } .slider-wrapper .ce_text.text-slider:nth-of-type(10)::before { content: '10'; } .ce_text.text-slider .inner { display: flex; align-items: center; flex-direction: column; } .ce_text.text-slider .slider-inner { width: 100%; } .img-text .content-slider img { box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.15); } #main .slider-wrapper .ce_text.text-slider .image_container { padding: 20px; background-color: $image-background; margin-bottom: 20px; } .img-text .slider-control .slider-menu { bottom: -6px; } .ce_sliderStart.next-prev-top { padding-top: 30px; } .next-prev-top .slider-control .slider-prev { top: 20px; left: auto; right: 46px; padding: 10px 13px; border: 1px solid $basecolor; } .next-prev-top .slider-control .slider-next { top: 20px; right: 0; padding: 10px 13px; border: 1px solid $basecolor; } .next-prev-top .slider-control .slider-prev:hover, .next-prev-top .slider-control .slider-next:hover { border-color: $accentcolor; } .ce_sliderStart.next-prev-top:hover .slider-control .slider-next { right: 0; } .ce_sliderStart.next-prev-top:hover .slider-control .slider-prev { left: auto; } .next-prev-top .slider-control .slider-prev::before, .next-prev-top .slider-control .slider-next::before { content: "\f054"; display: block; position: relative; color: $basecolor; text-align: center; font-size: 14px; font-family: "Font Awesome 5 Free"; font-weight: 900; } .next-prev-top .slider-control .slider-prev::before { content: "\f053"; } .next-prev-top .slider-control .slider-next:hover::before { color: $accentcolor; } .next-prev-top .slider-control .slider-prev:hover::before { color: $accentcolor; } @media (min-width: 768px) { .ce_text.ce-slider .slider-text .textbox { max-width: 90%; } } @media (min-width: 992px) { .slider-wrapper .ce_text.text-slider::before { position: absolute; top: 25px; left: 45%; font-size: 8em; line-height: 0.79; font-weight: bold; z-index: 2; } #main .slider-wrapper .ce_text.text-slider .image_container { width: 50%; padding: 70px; margin-bottom: 0; } .ce_text.text-slider .slider-inner { width: 50%; padding: 0px 70px 0px 0; } .ce_text.text-slider .inner { flex-direction: row-reverse; } .slider-wrapper .ce_text.text-slider::before { position: absolute; top: 25px; left: 45%; font-size: 8em; line-height: 0.79; font-weight: bold; z-index: 2; } } @media (max-width: 767px) { .ce_text.ce-slider .slider-text .textbox { max-width: 90%; padding: 30px; } } /** * stateART - Creative Design and Marketing * stateART - Contao Theme SPACE * */ .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index:999; right:15px; } .icon-bar a { display: block; text-align: center; padding: 10px 0px 0px 0px; transition: all 0.3s ease; color: white; font-size: 20px; border-radius: 50%; width:50px; height:50px; background-color: var(--main); margin-bottom:10px; } .icon-bar a:hover { background-color: var(--akzent); color: white; } #footer .social ul { display: block ruby; } #footer .social ul li { padding: 0px 10px 0px 0px; } #footer .social .fa-brands { background-color: var(--linkfarbe); padding: 10px; color: white; border: 5px solid var(--linkfarbe); border-radius: 50px; } #footer .social .fa-brands:hover { background-color: var(--akzent); border: 5px solid var(--akzent); } @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.7.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2018 Daniel Eden */ @-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;-webkit-transform-origin:center bottom;animation-name:bounce;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.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)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.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)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(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%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-name:headShake;-webkit-animation-timing-function:ease-in-out;animation-name:headShake;animation-timing-function:ease-in-out}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-animation-name:swing;-webkit-transform-origin:top center;animation-name:swing;transform-origin:top center}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;-webkit-transform-origin:center;animation-name:jello;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-duration:1.3s;-webkit-animation-name:heartBeat;-webkit-animation-timing-function:ease-in-out;animation-duration:1.3s;animation-name:heartBeat;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;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%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;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%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;-webkit-animation-name:bounceIn;animation-duration:.75s;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(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%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;-webkit-animation-name:bounceOut;animation-duration:.75s;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity: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%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}@keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}.animated.flip{-webkit-animation-name:flip;-webkit-backface-visibility:visible;animation-name:flip;backface-visibility:visible}@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-animation-name:flipInX;-webkit-backface-visibility:visible!important;animation-name:flipInX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-animation-name:flipInY;-webkit-backface-visibility:visible!important;animation-name:flipInY;backface-visibility:visible!important}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}.flipOutX{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}.flipOutY{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutY;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutY;backface-visibility:visible!important}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-name:lightSpeedIn;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-name:lightSpeedOut;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}@keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}.hinge{-webkit-animation-duration:2s;-webkit-animation-name:hinge;animation-duration:2s;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}@keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}@keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}@keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}.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}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(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}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(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}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(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}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;-webkit-transition:none!important;animation:unset!important;transition:none!important}}