.cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)} @charset "UTF-8"; /* Theme Name: Mohr-Villa Version: Version1 Author: Veronika Sattler Author URI: http://websache.de * /* -------------------------------------------------------------------------------------------- INHALT 1. BASICS 1.1. Farben 1.2. Maße 1.3. Mixins 1.4. Fonts 1.5. Reset 1.5. Reset 1.6. Media 1.7. Allgemeine Stile 1.8. Links 1.9. Reset 2. LAYOUT 2.1. Header 2.2. Footer 3. MODULE 3.1. Sprunglinks /* 1. BASICS -------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1. Farben -----------------------------------------------------------------------------------------------*/ /* 1.2. Maße -----------------------------------------------------------------------------------------------*/ /* 1.3. Mixins -----------------------------------------------------------------------------------------------*/ *:focus:not(:focus-visible) { outline: 0 !important; box-shadow: none !important; } /* 1.3.1. Mixins responsiv -----------------------------------------------------------------------------------------------*/ /* 1.4. Fonts -----------------------------------------------------------------------------------------------*/ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url("../../files/layout/css/fonts/roboto-v27-latin-regular.eot"); src: local(""), url("../../files/layout/css/fonts/roboto-v27-latin-regular.eot?#iefix") format("embedded-opentype"), url("../../files/layout/css/fonts/roboto-v27-latin-regular.woff2") format("woff2"), url("../../files/layout/css/fonts/roboto-v27-latin-regular.woff") format("woff"), /url("../../files/layout/css/fonts/roboto-v27-latin-regular.ttf") format("truetype"), url("../../files/layout/css/fonts/roboto-v27-latin-regular.svg#Roboto") format("svg"); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url("../../files/layout/css/fonts/roboto-v27-latin-italic.eot"); src: local(""), url("../../files/layout/css/fonts/roboto-v27-latin-italic.eot?#iefix") format("embedded-opentype"), url("../../files/layout/css/fonts/roboto-v27-latin-italic.woff2") format("woff2"), url("../../files/layout/css/fonts/roboto-v27-latin-italic.woff") format("woff"), url("../../files/layout/css/fonts/roboto-v27-latin-italic.svg#Roboto") format("svg"); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url("../../files/layout/css/fonts/roboto-v27-latin-700.eot"); src: local(""), url("../../files/layout/css/fonts/roboto-v27-latin-700.eot?#iefix") format("embedded-opentype"), url("../../files/layout/css/fonts/roboto-v27-latin-700.woff2") format("woff2"), url("../../files/layout/css/fonts/roboto-v27-latin-700.woff") format("woff"), url("../../files/layout/css/fonts/roboto-v27-latin-700.ttf") format("truetype"), url("../../files/layout/css/fonts/roboto-v27-latin-700.svg#Roboto") format("svg"); } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: url("../../files/layout/css/fonts/roboto-condensed-v19-latin-regular.eot"); src: local(""), url("../../files/layout/css/fonts/roboto-condensed-v19-latin-regular.eot?#iefix") format("embedded-opentype"), url("../../files/layout/css/fonts/roboto-condensed-v19-latin-regular.woff2") format("woff2"), url("../../files/layout/css/fonts/roboto-condensed-v19-latin-regular.woff") format("woff"), url("../../files/layout/css/fonts/roboto-condensed-v19-latin-regular.ttf") format("truetype"), url("../../files/layout/css/fonts/roboto-condensed-v19-latin-regular.svg#RobotoCondensed") format("svg"); } @font-face { font-family: 'Squada One'; font-style: normal; font-weight: 400; src: url("../../files/layout/css/fonts/squada-one-v9-latin-regular.eot"); src: local(""), url("../../files/layout/css/fonts/squada-one-v9-latin-regular.eot?#iefix") format("embedded-opentype"), url("../../files/layout/css/fonts/squada-one-v9-latin-regular.woff2") format("woff2"), url("../../files/layout/css/fonts/squada-one-v9-latin-regular.woff") format("woff"), url("../../files/layout/css/fonts/squada-one-v9-latin-regular.ttf") format("truetype"), url("../../files/layout/css/fonts/squada-one-v9-latin-regular.svg#SquadaOne") format("svg"); } /* 1.5. Reset -----------------------------------------------------------------------------------------------*/ html, body, body, header, footer, main, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, footer, main, hgroup, menu, nav, section, time, mark, audio, video, figcaption { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; box-sizing: border-box; } main, header, footer, article, aside { display: block; } /* 1.6. Media -----------------------------------------------------------------------------------------------*/ img { display: block; width: 100%; max-width: 100%; height: auto; } .bg_image { position: relative; height: 100%; background-position: center center; background-size: cover; } .bg_image figcaption { position: absolute; right: 0; bottom: 0; padding: 0.1rem; background: white; font-size: 82%; } a .bg_image { cursor: pointer; } @media only screen and (max-width: 1024px) { .border { margin-bottom: 1rem; } } .border figure { min-height: 500px; border: 12px solid #73b89c; } @media only screen and (max-width: 1024px) { .border figure { min-height: 400px; } } @media only screen and (max-width: 800px) { .border figure { border-width: 10px; min-height: 300px; } } .border.blue figure { border-color: #90c3d8; } .border.red figure { border-color: #ef8377; } .border.lavender figure { border-color: #C1C3D7; } .border.yellow figure { border-color: #FDE0A6; } /* 1.7. Allgemeine Stile -----------------------------------------------------------------------------------------------*/ html { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; } html em { font-style: italique; } html strong { font-weight: 700; } body { min-height: 100%; height: 100%; overflow-x: hidden; background-color: white; background-size: cover; color: #000; font-size: 100%; } body.scroll_no { overflow: hidden; } #wrapper { position: relative; min-height: 100vh; } .inside { position: relative; margin: auto; width: calc(100% - 100px); } @media only screen and (min-width: 1480px) { .inside { width: calc(100% - 200px); max-width: 1500px; } } @media only screen and (max-width: 1279px) { .inside { width: calc(100% - 40px); } } #main .inside { max-width: 1500px; } .invisible, .slick-sr-only { left: 50%; margin-left: -100px; position: fixed !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-justify, .flex-space { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } .flex-reverse { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; } .flex-start { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: start; } .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; } #main { padding-top: 120px; padding-bottom: 80px; } @media only screen and (max-width: 599px) { #main { padding-top: 100px; } } @media only screen and (max-width: 599px) { #main { padding-bottom: 30px; } } @media only screen and (max-width: 599px) { .start #main { padding-top: 80px; } } @media only screen and (max-width: 599px) { .archivpage #main { padding-top: 40px; } } /* 1.8 Abstände -----------------------------------------------------------------------------------------------*/ .pd_all { padding: 1.8rem; } @media only screen and (max-width: 1279px) { .pd_all { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .pd_all { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .pd_all { padding: 1.2rem; } } .mt_2 { margin-top: 2rem; } .mt_60 { margin-top: 60px; } .pd_main { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 800px) { .pd_main { padding-top: 80px; padding-bottom: 80px; } } .pd_150 { padding: 150px 0px; } @media only screen and (max-width: 800px) { .pd_150 { padding: 80px 0px; } } .pd_120 { padding: 100px 0px; } @media only screen and (max-width: 800px) { .pd_120 { padding: 60px 0px; } } .pd_100 { padding: 100px 0px; } @media only screen and (max-width: 800px) { .pd_100 { padding: 40px 0px; } } .pd_80 { padding: 80px 0px; } @media only screen and (max-width: 800px) { .pd_80 { padding: 30px 0px; } } .pd_60 { padding: 60px 0px; } @media only screen and (max-width: 800px) { .pd_60 { padding: 20px 0px; } } .ma_60 { margin: 60px 0px; } @media only screen and (max-width: 800px) { .ma_60 { margin: 20px 0px; } } .pd_40 { padding: 40px 0px; } @media only screen and (max-width: 800px) { .pd_40 { padding: 20px 0px; } } .ma_40 { margin: 40px 0px; } @media only screen and (max-width: 800px) { .ma_40 { margin: 20px 0px; } } .pd_20 { padding: 20px 0px; } @media only screen and (max-width: 800px) { .pd_20 { padding: 15px 0px; } } .ma_20 { margin: 20px 0px; } @media only screen and (max-width: 800px) { .ma_20 { margin: 15px 0px; } } .pt_160 { padding-top: 160px; } .pt_120 { padding-top: 120px; } .pt_40 { padding-top: 40px; } .pt_80 { padding-top: 80px; } .pb_40 { padding-bottom: 40px; } .pb_60 { padding-bottom: 60px; } .pb_80 { padding-bottom: 80px; } .pb_100 { padding-bottom: 100px; } .pb_120 { padding-bottom: 120px; } /* 1.9. Links -----------------------------------------------------------------------------------------------*/ a { text-decoration: none; color: #000; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } main p a, main .widget-checkbox a { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; position: relative; z-index: 2; text-decoration: underline; text-decoration-style: dotted; } main p a:hover, main p a:focus, main .widget-checkbox a:hover, main .widget-checkbox a:focus { text-decoration-style: solid; } .more-box { clear: both; display: flex; flex-direction: row-reverse; } .more-box.less { padding-top: 0; } .more-box a, .more-link, #main .submit, .addListData { display: block; overflow: hidden; position: relative; z-index: 0; border: 2px solid #000; padding: 12px; color: white; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; font-family: "Roboto Condensed", "Arial MT Condensed", "Arial Narrow", "sans-serif"; text-transform: uppercase; background: white; } .more-box a::before, .more-link::before, #main .submit::before, .addListData::before { content: ''; z-index: -1; position: absolute; width: calc(100% + 4px); height: 100%; left: 0px; background: #000; display: block; opacity: 1; bottom: 0px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .more-box a:hover, .more-box a:focus, .more-link:hover, .more-link:focus, #main .submit:hover, #main .submit:focus, .addListData:hover, .addListData:focus { color: #000; } .more-box a:hover::before, .more-box a:focus::before, .more-link:hover::before, .more-link:focus::before, #main .submit:hover::before, #main .submit:focus::before, .addListData:hover::before, .addListData:focus::before { height: 0%; opacity: 0; bottom: -40px; } .up a, .down a, .button-inverse { display: inline-block; overflow: hidden; position: relative; z-index: 0; border: 2px solid #000; padding: 8px; color: #000; margin-top: 1rem; text-decoration: none; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; font-family: "Roboto Condensed", "Arial MT Condensed", "Arial Narrow", "sans-serif"; text-transform: uppercase; font-size: 1rem; } .up a::before, .down a::before, .button-inverse::before { content: ''; z-index: -1; position: absolute; width: calc(100% + 4px); height: 0%; left: 0px; background: #000; display: block; opacity: 0; bottom: -40px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .up a:hover, .up a:focus, .down a:hover, .down a:focus, .button-inverse:hover, .button-inverse:focus { color: white; } .up a:hover::before, .up a:focus::before, .down a:hover::before, .down a:focus::before, .button-inverse:hover::before, .button-inverse:focus::before { height: 100%; opacity: 1; bottom: 0px; } /* 1.10. Typographie -----------------------------------------------------------------------------------------------*/ h1 { font-family: 'Squada One', 'sans-serif'; font-size: 3.8rem; margin-bottom: 3rem; margin-top: -80px; font-weight: 400; width: 100%; line-height: 1; } @media only screen and (max-width: 1024px) { h1 { font-size: 3.2rem; margin-bottom: 2rem; } } @media only screen and (max-width: 1024px) and (max-width: 800px) { h1 { margin-bottom: 1.5rem; } } @media only screen and (max-width: 1024px) and (max-width: 599px) { h1 { margin-bottom: 1rem; } } @media only screen and (max-width: 800px) { h1 { font-size: 2.7rem; margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { h1 { font-size: 2.4rem; margin-bottom: 1rem; } } h2 { font-family: 'Squada One', 'sans-serif'; font-size: 3rem; margin-bottom: 1.4rem; font-weight: 400; width: 100%; line-height: 1; } @media only screen and (max-width: 1279px) { h2 { font-size: 2.5rem; } } @media only screen and (max-width: 800px) { h2 { font-size: 2.2rem; margin-bottom: 1rem; } } @media only screen and (max-width: 599px) { h2 { font-size: 2rem; margin-bottom: 1rem; } } .textfeld h2 { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; font-size: 1.1rem; margin-bottom: 0.6rem; line-height: 1.1; font-weight: 700; } .textfeld h2 em { font-style: italique; } .textfeld h2 strong { font-weight: 700; } h3, .imprint h2 { font-family: 'Squada One', 'sans-serif'; font-size: 2.6rem; margin-bottom: 1rem; font-weight: 400; line-height: 1; } @media only screen and (max-width: 1279px) { h3, .imprint h2 { font-size: 2.4rem; } } @media only screen and (max-width: 800px) { h3, .imprint h2 { font-size: 2.1rem; } } .imprint h3 { font-size: 1.8rem; margin-bottom: 0.7rem; } @media only screen and (max-width: 1279px) { .imprint h3 { font-size: 1.6rem; } } @media only screen and (max-width: 800px) { .imprint h3 { font-size: 1.4rem; } } .textfeld h3 { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; font-size: 1rem; margin-bottom: 0.2rem; line-height: 1.1; font-weight: 700; } .textfeld h3 em { font-style: italique; } .textfeld h3 strong { font-weight: 700; } h4 { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; font-size: 1.1rem; margin-bottom: 0.6rem; line-height: 1.1; } h4 em { font-style: italique; } h4 strong { font-weight: 700; } p { padding-bottom: 20px; } main .ce_downloads ul { padding-left: 30px; } main .ce_downloads ul li { text-indent: -14px; } main ul { padding-left: 20px; padding-bottom: 15px; list-style: none; } main ul li { text-indent: -7px; } main ul li.opt { text-indent: 0; } main ul li.opt::before { display: none; } main ul li::before { display: inline-block; content: '■'; margin-right: 6px; vertical-align: 1px; } main ul li.download-element::before { content: url("../../files/layout/images/download.svg"); vertical-align: -2px; } main .check-list ul { padding-left: 25px; } main .check-list ul li { padding-bottom: 1rem; text-indent: -12px; } main .check-list ul li::before { margin-right: 10px; font-weight: bold; content: '✓'; } .intro p { font-size: 110%; } sup, sub { top: -0.4em; position: relative; vertical-align: baseline; } sub { top: 0.4em; } /* 1.11. Graphische Flächen -----------------------------------------------------------------------------------------------*/ body::before { content: ''; height: 920px; width: 100%; top: -300px; position: absolute; background: #FDE0A6; transform: skewY(14deg); } @media only screen and (max-width: 800px) { body::before { height: 750px; } } @media only screen and (max-width: 599px) { body::before { height: 550px; } } .green { background: #73b89c; } .blue { background: #90c3d8; } .yellow { background: #FDE0A6; } .red { background: #ef8377; } .lavender { background: #C1C3D7; } .up, .up_sans { position: relative; z-index: 1; margin: 250px 0px; } @media only screen and (max-width: 1024px) { .up, .up_sans { margin: 230px 0px; } } @media only screen and (max-width: 800px) { .up, .up_sans { margin: 220px 0px; } } @media only screen and (max-width: 599px) { .up, .up_sans { margin: 190px 0px; } } .up::before, .up_sans::before { content: ''; top: -140px; left: 0%; right: 0%; bottom: -150px; position: absolute; background: #73b89c; transform: skewY(-5deg); z-index: -1; } .up.yellow::before, .up_sans.yellow::before { background: #FDE0A6; } .up.blue::before, .up_sans.blue::before { background: #90c3d8; } .up.red::before, .up_sans.red::before { background: #ef8377; } .up.lavender::before, .up_sans.lavender::before { background: #C1C3D7; } .down { position: relative; z-index: 1; margin: 200px 0px; } .down::before { content: ''; top: -140px; left: 0; right: 0; bottom: -140px; position: absolute; background: #73b89c; transform: skewY(5deg); z-index: -1; } .down.yellow::before { background: #FDE0A6; } .down.yellow::after { background: #FDE0A6; } .down.blue::before { background: #90c3d8; } .down.blue::after { background: #90c3d8; } .down.red::before { background: #ef8377; } .down.red::after { background: #ef8377; } .up .inside, .down .inside, .swapper .inside { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; padding: 2rem 0; } .up .inside .textwrap, .down .inside .textwrap, .swapper .inside .textwrap { width: 40%; } @media only screen and (max-width: 1024px) { .up .inside .textwrap, .down .inside .textwrap, .swapper .inside .textwrap { width: 100%; margin-bottom: -100px; } } .up .inside figure, .down .inside figure, .swapper .inside figure { width: 53%; margin-top: -230px; margin-bottom: -230px; } @media only screen and (max-width: 1024px) { .up .inside figure, .down .inside figure, .swapper .inside figure { margin-top: -280px; padding: 0 4rem; width: 100%; margin-bottom: 2rem; } } @media only screen and (max-width: 1024px) and (max-width: 800px) { .up .inside figure, .down .inside figure, .swapper .inside figure { margin-bottom: 1.5rem; } } @media only screen and (max-width: 1024px) and (max-width: 599px) { .up .inside figure, .down .inside figure, .swapper .inside figure { margin-bottom: 1rem; } } @media only screen and (max-width: 1024px) { .up .inside figure, .down .inside figure, .swapper .inside figure { margin-top: -240px; padding: 0; } } .small_up { position: relative; z-index: 1; margin: 70px 0px; padding: 3rem; } /* 1.12. Weitere allgemeine Klassen -----------------------------------------------------------------------------------------------*/ .grid_large { width: 65%; } @media only screen and (max-width: 1024px) { .grid_large { width: 100%; } } .grid_large .teaser { padding: 1.8rem; margin-bottom: 2rem; } @media only screen and (max-width: 1279px) { .grid_large .teaser { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .grid_large .teaser { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .grid_large .teaser { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .grid_large .teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .grid_large .teaser { margin-bottom: 1rem; } } .grid_small { width: 32%; overflow: hidden; } @media only screen and (max-width: 1024px) { .grid_small { width: 100%; } } .grid_small h2 { font-size: 1.7rem; } .grid_small h3 { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; font-weight: 700; margin-bottom: 0px; } .grid_small h3 em { font-style: italique; } .grid_small h3 strong { font-weight: 700; } .grid_small .teaser { padding: 1.8rem; margin-bottom: 2rem; } @media only screen and (max-width: 1279px) { .grid_small .teaser { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .grid_small .teaser { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .grid_small .teaser { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .grid_small .teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .grid_small .teaser { margin-bottom: 1rem; } } /* 1.13. Sprunglinks -----------------------------------------------------------------------------------------------*/ .invisible:focus { display: block; font-size: 1.2rem; text-align: center; padding: 3rem !important; background: #000; border-color: #000; color: #ef8377; height: auto; width: 200px; clip: initial; z-index: 1000; } /* 1.14. Icons -----------------------------------------------------------------------------------------------*/ span.time, span.phone, span.mail, span.location, span.group, span.accessible, span.web, span.download, span.date, span.duration, span.tag, span.fax, span.format, span.quadrat { display: inline-block; width: 15px; height: 15px; overflow: hidden; white-space: nowrap; margin-right: 5px; vertical-align: -2px; line-height: 1; } h2.time::before, h2.phone::before, h2.mail::before, h2.location::before, h2.group::before, h2.accessible::before, h2.web::before, h2.download::before, h2.date::before, h2.duration::before, h2.tag::before { width: 30px; height: 30px; } .time::before { content: url("../../files/layout/images/clock2.svg"); display: inline-block; } .phone::before { content: url("../../files/layout/images/phone.svg"); display: inline-block; } #footer .phone::before { content: url("../../files/layout/images/white_phone.svg"); display: inline-block; } .mail::before { content: url("../../files/layout/images/mail.svg"); display: inline-block; } #footer .mail::before { content: url("../../files/layout/images/white_mail.svg"); } .location::before { content: url("../../files/layout/images/location.svg"); display: inline-block; } .group::before { content: url("../../files/layout/images/group.svg"); display: inline-block; } .accessible::before { content: url("../../files/layout/images/accessible.svg"); display: inline-block; } .web::before { content: url("../../files/layout/images/web.svg"); display: inline-block; } .download::before { content: url("../../files/layout/images/download.svg"); display: inline-block; } .date::before { content: url("../../files/layout/images/date.svg"); display: inline-block; } .duration::before { content: url("../../files/layout/images/duration.svg"); display: inline-block; } .tag::before { content: url("../../files/layout/images/tags.svg"); display: inline-block; } .fax::before { content: url("../../files/layout/images/fax.svg"); display: inline-block; } #footer .fax::before { content: url("../../files/layout/images/white_fax.svg"); } .format::before { content: url("../../files/layout/images/format.svg"); display: inline-block; } .quadrat::before { content: url("../../files/layout/images/quadrat.svg"); display: inline-block; } /* 1.15. Graphische Flächen -----------------------------------------------------------------------------------------------*/ #anfrage_1 { max-width: 1000px; height: 0px; overflow: hidden; max-height: 0px; margin: 40px 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } #anfrage_1.show { height: auto; max-height: 2000px; } .formbody { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } .widget { position: relative; width: 48%; padding-bottom: 15px; } @media only screen and (max-width: 800px) { .widget { width: 100%; } } .widget.long { width: 100%; } .widget legend { left: 50%; margin-left: -100px; position: fixed !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); } label { display: block; } input, textarea { width: 100%; border: 2px solid #000; height: 42px; padding: 4px; box-sizing: border-box; border-radius: 0; font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; } input em, textarea em { font-style: italique; } input strong, textarea strong { font-weight: 700; } input:focus, textarea:focus { box-shadow: 0 0 0 0.2rem #90c3d8; outline: transparent solid 0.2rem; } input.error, textarea.error { background-color: rgba(239, 131, 119, 0.2); border: 2px dashed #e4311d; } input.error:focus, textarea.error:focus { outline: 2px solid #ef8377; box-shadow: 1px 1px 8px 1px #ef8377; } fieldset.error { background-color: rgba(239, 131, 119, 0.2); border: 2px dashed #e4311d; } textarea { height: 120px; } .start-date input { background-image: url("../../files/layout/images/calendar.svg"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; } .clock input { background: url("../../files/layout/images/clock.svg") no-repeat calc(100% - 10px) center; } .widget-submit { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row-reverse; } p.error { background: white; padding: 0.4rem 0.2rem; position: absolute; font-size: 0.7rem; top: 60px; z-index: 1000; border-radius: 5px; border: solid #000 thin; } p.error::before { content: '!'; display: inline-block; background: #e4311d; color: white; width: 15px; height: 15px; text-align: center; font-weight: bold; margin-right: 5px; } .success { padding: 1.8rem; background: #73b89c; margin: 40px 0; } @media only screen and (max-width: 1279px) { .success { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .success { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .success { padding: 1.2rem; } } .widget-checkbox { width: 100%; } .widget-checkbox input[type="checkbox"] { position: absolute; opacity: 0; } .widget-checkbox label { position: relative; display: inline-block; padding-left: 28px; } .widget-checkbox label::before, .widget-checkbox label::after { position: absolute; content: ""; display: inline-block; } .widget-checkbox label::before { height: 16px; width: 16px; border: 2px solid #000; left: 0px; top: 3px; } .widget-checkbox label::after { height: 5px; width: 9px; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); left: 4px; top: 7px; } .widget-checkbox input[type="checkbox"] + label::after { content: none; } .widget-checkbox input[type="checkbox"]:checked + label::after { content: ""; } .widget-checkbox input[type="checkbox"]:checked + label::before { background: #90c3d8; } .widget-checkbox input[type="checkbox"]:focus + label::before { outline: #90c3d8 auto 5px; } /* 1.15.1. Sumo Select -----------------------------------------------------------------------------------------------*/ .SumoSelect { width: 100% !important; } .SumoSelect .CaptionCont { border: 2px solid #000 !important; height: 42px; } .SumoSelect .CaptionCont span { color: #000 !important; font-style: normal !important; display: inline !important; } .SumoSelect .CaptionCont label i { background: none; } .SumoSelect .CaptionCont label i::after { content: ''; position: absolute; top: 50%; margin-top: -4px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #000; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .SumoSelect.open .CaptionCont, .SumoSelect:focus .CaptionCont { background: white; } .SumoSelect.open .CaptionCont span, .SumoSelect:focus .CaptionCont span { color: #000 !important; } .SumoSelect.open .CaptionCont label i::after, .SumoSelect:focus .CaptionCont label i::after { border-top: 8px solid #000; } .SumoSelect.open .CaptionCont { background: white; } .SumoSelect.open .CaptionCont label i::after { transform: rotate(180deg); margin-top: -6px; } .optWrapper { border: 2px solid #000 !important; } .optWrapper label { text-transform: none; } .opt { text-indent: 0 !important; border-bottom: none; } .opt.sel, .opt:hover, .opt.selected { background-color: #90c3d8 !important; } .opt li::before { display: none !important; } .select-all.partial span i, .select-all.selected span i, .optWrapper.multiple .options li.opt.selected span i { background-color: #000 !important; } /* 2. Layout ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1. Header -----------------------------------------------------------------------------------------------*/ #header { background: #FDE0A6; } #logo { margin-top: 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } #logo img { width: 200px; } @media only screen and (max-width: 1279px) { #logo img { width: 160px; } } @media only screen and (max-width: 800px) { #logo img { width: 150px; } } /* 2.1.1. Servicenavigation -----------------------------------------------------------------------------------------------*/ .navi_service { font-family: "Roboto Condensed", "Arial MT Condensed", "Arial Narrow", "sans-serif"; background: #000; color: white; font-size: 0.82rem; text-align: right; } .navi_service ul { display: inline-block; } @media only screen and (max-width: 1024px) { .navi_service ul { display: none; } } .navi_service li { display: inline-block; margin-left: 0.8rem; padding: 10px 0px 10px 0px; } .navi_service a, .navi_service strong { color: white; padding: 4px; } .navi_service a:hover { color: #ef8377; } .navi_service a:focus { outline: solid 1px white; } .navi_service strong { font-weight: normal; } /* 2.1.2. Hauptnavigation -----------------------------------------------------------------------------------------------*/ .navi_main { font-family: "Roboto Condensed", "Arial MT Condensed", "Arial Narrow", "sans-serif"; font-size: 0.98rem; margin-top: 35px; width: 80%; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (min-width: 1480px) { .navi_main { width: 68%; } } @media only screen and (max-width: 1024px) { .navi_main { width: 100%; } } .navi_main ul { padding: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 1024px) { .navi_main { z-index: 1000; position: fixed; top: -36px; right: 0px; padding: 10vw; bottom: 0px; width: 0%; right: -100%; overflow-y: auto; background-color: black; display: flex; flex-direction: column; justify-content: center; } .navi_main.show { right: 0; width: 100%; } } @media only screen and (max-width: 599px) { .navi_main { justify-content: space-between; } } .navi_main li { list-style: none; vertical-align: middle; text-transform: uppercase; } @media only screen and (max-width: 1024px) { .navi_main li { position: relative; } } .navi_main li.mobile { display: none; } @media only screen and (max-width: 1024px) { .navi_main li.mobile { display: block; } } @media only screen and (max-width: 1024px) { .navi_main li { width: 100%; display: block; padding: 0.5rem 0; font-size: 1.5rem; } } @media only screen and (max-width: 599px) { .navi_main li { font-size: 1.5rem; } } .navi_main a, .navi_main strong, .navi_main a.trail { font-weight: normal; cursor: pointer; display: inline-block; position: relative; color: #000; padding: 4px 0; z-index: 1; } @media only screen and (max-width: 1024px) { .navi_main a, .navi_main strong, .navi_main a.trail { color: #ef8377; } } .navi_main a.button-link, .navi_main strong.button-link, .navi_main a.trail.button-link { border: 2px solid #000; padding: 4px 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 1024px) { .navi_main a.button-link, .navi_main strong.button-link, .navi_main a.trail.button-link { padding: 0px; border: none; } } .navi_main a.button-link::before, .navi_main strong.button-link::before, .navi_main a.trail.button-link::before { margin-top: -4px; width: calc(100% +4px); height: 0px; left: 0px; bottom: 0px; } @media only screen and (max-width: 1024px) { .navi_main a.button-link::before, .navi_main strong.button-link::before, .navi_main a.trail.button-link::before { display: none; } } .navi_main a.button-link:hover, .navi_main a.button-link:focus, .navi_main strong.button-link:hover, .navi_main strong.button-link:focus, .navi_main a.trail.button-link:hover, .navi_main a.trail.button-link:focus { color: white; } .navi_main a.button-link:hover::before, .navi_main a.button-link:focus::before, .navi_main strong.button-link:hover::before, .navi_main strong.button-link:focus::before, .navi_main a.trail.button-link:hover::before, .navi_main a.trail.button-link:focus::before { height: 100%; } .navi_main a:focus, .navi_main strong:focus, .navi_main a.trail:focus { outline: 2px solid #000; } .navi_main a::before, .navi_main strong::before, .navi_main a.trail::before { content: ''; z-index: -1; background: #000; display: block; width: 0%; height: 2px; position: absolute; opacity: 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; bottom: -2px; } @media only screen and (max-width: 1024px) { .navi_main a::before, .navi_main strong::before, .navi_main a.trail::before { background: #ef8377; bottom: 0px; height: 1px; } } .navi_main a:hover::before, .navi_main a:focus::before, .navi_main a .trail::before, .navi_main strong:hover::before, .navi_main strong:focus::before, .navi_main strong .trail::before, .navi_main a.trail:hover::before, .navi_main a.trail:focus::before, .navi_main a.trail .trail::before { opacity: 1; width: 100%; } @media only screen and (max-width: 1024px) { .navi_main a:hover::before, .navi_main a:focus::before, .navi_main a .trail::before, .navi_main strong:hover::before, .navi_main strong:focus::before, .navi_main strong .trail::before, .navi_main a.trail:hover::before, .navi_main a.trail:focus::before, .navi_main a.trail .trail::before { display: none; } } .navi_main .open_link:hover::before, .navi_main .open_link:focus::before { opacity: 0; width: 0; } .navi_main a.open_link::after, .navi_main strong.open_link::after { content: ''; display: inline-block; width: 6px; height: 6px; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); margin-left: 6px; top: -3px; position: relative; } @media only screen and (max-width: 1024px) { .navi_main a.open_link::after, .navi_main strong.open_link::after { border-color: #ef8377; transform: rotate(-135deg); } } .navi_main strong::before, .navi_main a.trail::before { opacity: 1; width: 100%; } .navi_main .level_2 { position: absolute; white-space: nowrap; overflow: hidden; background: #000; z-index: 1000; width: 0px; overflow: hidden; padding: 2rem; height: 0px; opacity: 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 1024px) { .navi_main .level_2 { padding: 0rem; top: 0px; left: 50%; } } @media only screen and (max-width: 599px) { .navi_main .level_2 { position: relative; left: 0%; } } .navi_main .level_2.show { width: 250px; height: auto; opacity: 1; } .navi_main .level_2 a { color: white; } @media only screen and (max-width: 1024px) { .navi_main .level_2 a { color: #ef8377; } } .navi_main .level_2 strong::after { content: '✓'; display: inline-block; position: relative; margin-left: 6px; width: auto; vertical-align: 1px; transform: rotate(0deg); top: auto; } .navi_main .level_2 a::before, .navi_main .level_2 strong::before, .navi_main .level_2 a.trail::before { display: none; } .navi_main .level_2 a:hover, .navi_main .level_2 a:focus, .navi_main .level_2 strong { color: #ef8377; } .navi_main .level_2 a:focus { outline: #ef8377 1px solid; } .navi_main .level_2 li { display: block; width: 100%; text-transform: none; } @media only screen and (max-width: 1024px) { .navi_main .level_2 li { font-size: 85%; padding: 0.3rem 0; } } @media only screen and (max-width: 599px) { .navi_main .level_2 li { font-size: 1rem; } } .navi_main li.active .level_2, .navi_main li.trail .level_2 { display: block; } /*2.1.3. Menue-Button -----------------------------------------------------------------------------------------------*/ .menu { display: none; position: absolute; right: 0; top: 20px; z-index: 100; padding: 0; width: 50px; height: 50px; border: none; background: none; z-index: 9990; } @media only screen and (max-width: 1024px) { .menu { display: block; } } .menu .menu-box { position: relative; display: block; cursor: pointer; } .menu .menu-box .menu-inner, .menu .menu-box .menu-inner::before, .menu .menu-box .menu-inner::after { display: block; position: absolute; background: #000; border-radius: 20px; height: 4px; width: 100%; transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .menu .menu-box .menu-inner::before { margin-top: -16px; content: ''; } .menu .menu-box .menu-inner::after { content: ''; margin-top: 16px; width: 70%; margin-left: 30%; } .menu.active { position: fixed; } .menu.active .menu-inner { background: none !important; } .menu.active .menu-inner::before { transform-origin: bottom; width: 60%; transform: rotatez(405deg); margin-top: 0; background: #ef8377; } .menu.active .menu-inner::after { transform-origin: top; transform: rotatez(-405deg); width: 60%; margin-top: 0; background: #ef8377; margin-left: 0%; } /* 2.2. Footer -----------------------------------------------------------------------------------------------*/ footer { background: #000; color: white; padding-top: 80px; line-height: 1.4; } @media only screen and (max-width: 800px) { footer { padding-top: 60px; } } @media only screen and (max-width: 599px) { footer { padding-top: 40px; } } footer a { color: white; } footer a:hover { color: #ef8377; } footer a:focus { outline: solid 1px white; outline-offset: 2px; } footer h2 { font-size: 1.8rem; color: #ef8377; } footer .inside { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } footer ul { list-style: none; } footer .quicklinks { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } @media only screen and (max-width: 1024px) { footer .quicklinks { width: 100%; margin-top: 1rem; } } footer .mod_customnav { width: 33.33%; } @media only screen and (max-width: 800px) { footer .mod_customnav { width: 50%; margin-bottom: 0.7rem; } } footer .more-link { border: 2px solid #ef8377; color: #000; margin-left: auto; } footer .more-link::before { background: #ef8377; } footer .more-link:hover, footer .more-link:focus { color: #ef8377; } .footer_sub { margin-top: 50px; border-top: solid 1px #DBD0D0; } @media only screen and (max-width: 599px) { .footer_sub { width: 100%; margin-top: 20px; } } .footer_sub figure { width: 150px; margin-left: 30px; margin-top: 1rem; } @media only screen and (min-width: 1480px) { .footer_sub figure { margin-left: 100px; } } @media only screen and (max-width: 1279px) { .footer_sub figure { margin-left: 25px; } } @media only screen and (max-width: 800px) { .footer_sub figure { margin-left: 15px; } } @media only screen and (max-width: 599px) { .footer_sub figure { margin-top: 0; padding-top: 1rem; padding-bottom: 1rem; } } @media only screen and (max-width: 599px) { .footer_sub .social { width: 100%; padding: 0.5rem 20px; } } .footer_sub .social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer_sub li { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; flex-direction: column; padding: 0 1rem; height: 100%; border-left: solid 1px #DBD0D0; line-height: 1; } @media only screen and (max-width: 599px) { .footer_sub li { width: 20%; border: none; margin-top: 0.5rem; } } .footer_sub li:first-child { border: none; } .footer_sub li a:hover .st0, .footer_sub li a:focus .st0, .footer_sub li .cookie_open .st0 { fill: #ef8377; } .footer_sub li .cookie_open { cursor: pointer; } .footer_sub li .cookie_open:hover .st0, .footer_sub li .cookie_open:focus .st0 { fill: white; } /* 3. Komponenten ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 3.1. MediaZone -----------------------------------------------------------------------------------------------*/ #mediazone .inside { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row-reverse; } #mediazone h2 { font-size: 3.8rem; margin-bottom: 3rem; } @media only screen and (max-width: 1024px) { #mediazone h2 { font-size: 3.2rem; margin-bottom: 2rem; } } @media only screen and (max-width: 1024px) and (max-width: 800px) { #mediazone h2 { margin-bottom: 1.5rem; } } @media only screen and (max-width: 1024px) and (max-width: 599px) { #mediazone h2 { margin-bottom: 1rem; } } @media only screen and (max-width: 800px) { #mediazone h2 { font-size: 2.7rem; margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { #mediazone h2 { font-size: 2.4rem; margin-bottom: 1rem; } } @media only screen and (max-width: 1024px) { #mediazone h2 { padding-top: 40px; } } #headline-ticker, #start-slider { width: 80%; } @media only screen and (min-width: 1480px) { #headline-ticker, #start-slider { width: 68%; } } @media only screen and (max-width: 1024px) { #headline-ticker, #start-slider { width: 100%; } } #start-slider { background: #73b89c; padding: 15px; position: relative; } @media only screen and (max-width: 800px) { #start-slider { padding: 10px; } } #start-slider .slick-arrow { position: absolute; right: -15px; padding: 0; bottom: -50px; width: 67px; height: 30px; opacity: 1; overflow: hidden; border: 2px solid #000; background: transparent; cursor: pointer; } #start-slider .slick-arrow.slick-prev { right: 98px; } #start-slider .slick-arrow.slick-prev::before { transform: rotate(180deg); } #start-slider .slick-arrow::before { padding: 6px 12px; font-size: 0px; display: block; content: url("../../files/layout/images/arrow-next.svg"); text-shadow: none; } #start-slider .slick-arrow:hover, #start-slider .slick-arrow:focus { background: #73b89c; } #start-slider .slick-autoplay-toggle-button { position: absolute; right: 60px; bottom: -50px; width: 30px; height: 30px; opacity: 1; overflow: hidden; border: 2px solid #000; background: #73b89c; cursor: pointer; padding: 6px; } #start-slider .slick-autoplay-toggle-button:hover, #start-slider .slick-autoplay-toggle-button:focus { background: white; } #start-slider .slick-autoplay-toggle-button .slick-pause-icon::before { content: ''; display: block; width: 14px; height: 14px; background: #000; } #start-slider .slick-autoplay-toggle-button .slick-play-icon::before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 14px; border-color: transparent transparent transparent #000; } .video_container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; } .video_container iframe, .video_container video { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } @keyframes triangle { 00% { transform: rotate(280deg); } 50% { transform: rotate(310deg); } 100% { transform: rotate(342deg); } } @keyframes triangle_small { 00% { transform: rotate(280deg); } 50% { transform: rotate(320deg); } 100% { transform: rotate(337deg); } } #mediazone::before { margin-top: 120px; margin-left: -50px; content: ''; position: absolute; width: 0px; height: 0px; transform: rotate(342deg); border-style: solid; border-width: 0 30vw 16vw 30vw; border-color: transparent transparent #90c3d8 transparent; animation: triangle 0.7s linear; } @media only screen and (max-width: 1024px) { #mediazone::before { margin-top: 50vw; margin-left: 0px; animation: triangle_small 0.7s linear; transform: rotate(347deg); border-width: 0 35vw 21vw 35vw; } } @media only screen and (max-width: 800px) { #mediazone::before { margin-top: 55vw; } } @media only screen and (max-width: 599px) { #mediazone::before { display: none; } } .red_triangle #mediazone::before { border-color: transparent transparent #ef8377 transparent; } .red_triangle #start-slider { background: #90c3d8; } .green_triangle #mediazone::before { border-color: transparent transparent #73b89c transparent; } .green_triangle #start-slider { background: #C1C3D7; } /* 3.2. Events -----------------------------------------------------------------------------------------------*/ /* 3.2.1. Startseite -----------------------------------------------------------------------------------------------*/ .event_start { margin-left: -2%; } .event_start h2 { margin-left: 2%; } .event_teaser { position: relative; width: 23%; margin-bottom: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: column; margin-left: 2%; background-position: top center; background-size: 100% auto; background-repeat: no-repeat; } @media only screen and (max-width: 800px) { .event_teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .event_teaser { margin-bottom: 1rem; } } @media only screen and (max-width: 1024px) { .event_teaser { width: 48%; } } @media only screen and (max-width: 599px) { .event_teaser { width: 98%; } } .event_teaser h3 { text-align: right; margin-top: -30px; } .event_teaser h3 a:hover { transform: translate(0px, 4px); } .event_teaser a { display: inline-block; color: #000; } .event_teaser a:focus { outline: 2px solid #000; } .event_teaser .info { padding-right: 80px; } .event_teaser .info a:hover { text-decoration: underline; } .event_teaser .storno { top: 40px; right: 0; } .event_teaser .box { margin-top: 240px; position: relative; width: 100%; flex-grow: 1; padding: 1.8rem; padding-bottom: 100px !important; z-index: 0; } @media only screen and (max-width: 1279px) { .event_teaser .box { margin-top: 220px; } } @media only screen and (max-width: 1279px) { .event_teaser .box { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .event_teaser .box { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .event_teaser .box { padding: 1.2rem; } } .event_teaser .box::before { content: ''; top: -38px; left: 0px; right: 0px; position: absolute; height: 80px; transform: skewY(-7deg); z-index: -1; } .event_teaser:nth-child(5n+1) .box { background: #ef8377; } .event_teaser:nth-child(5n+1) .box::before { background: #ef8377; } .event_teaser:nth-child(5n+2) .box { background: #73b89c; } .event_teaser:nth-child(5n+2) .box::before { background: #73b89c; } .event_teaser:nth-child(5n+3) .box { background: #FDE0A6; } .event_teaser:nth-child(5n+3) .box::before { background: #FDE0A6; } .event_teaser:nth-child(5n+4) .box { background: #90c3d8; } .event_teaser:nth-child(5n+4) .box::before { background: #90c3d8; } .event_teaser:nth-child(5n+5) .box { background: #C1C3D7; } .event_teaser:nth-child(5n+5) .box::before { background: #C1C3D7; } .event_teaser .info { position: absolute; bottom: 1.2rem; font-size: 0.97rem; font-weight: 700; } .event_teaser .categories { padding-bottom: 0 !important; } .event_teaser .more { width: 40px; height: 40px; overflow: hidden; position: absolute; right: 1rem; bottom: 1rem; } .event_teaser .more::before { content: url("../../files/layout/images/arrow.svg"); display: block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .event_teaser .more:hover::before, .event_teaser .more:focus::before { content: url("../../files/layout/images/arrow.svg"); transform: rotate(-41deg); } .storno { background: #ef8377; position: absolute; padding: 1rem; text-transform: uppercase; text-align: center; font-size: 110%; z-index: 10; } .plakat_teaser { position: relative; width: 23%; margin-bottom: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: column; margin-left: 2%; } @media only screen and (max-width: 800px) { .plakat_teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .plakat_teaser { margin-bottom: 1rem; } } @media only screen and (max-width: 1024px) { .plakat_teaser { width: 48%; } } @media only screen and (max-width: 599px) { .plakat_teaser { width: 98%; } } /* 3.2.2. Teaser -----------------------------------------------------------------------------------------------*/ .event_short { overflow: hidden; position: relative; width: 100%; margin-bottom: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } @media only screen and (max-width: 800px) { .event_short { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .event_short { margin-bottom: 1rem; } } .event_short .storno { top: 50px; left: 0; font-size: 1.3rem; } .event_short:nth-child(5n+1) { background: #90c3d8; } .event_short:nth-child(5n+1) figure::after { background: #90c3d8; } .event_short:nth-child(5n+1) .more::before, .event_short:nth-child(5n+1) .more::after { border-color: #90c3d8; } .event_short:nth-child(5n+2) { background: #ef8377; } .event_short:nth-child(5n+2) figure::after { background: #ef8377; } .event_short:nth-child(5n+2) .more::before, .event_short:nth-child(5n+2) .more::after { border-color: #ef8377; } .event_short:nth-child(5n+3) { background: #73b89c; } .event_short:nth-child(5n+3) figure::after { background: #73b89c; } .event_short:nth-child(5n+3) .more::before, .event_short:nth-child(5n+3) .more::after { border-color: #73b89c; } .event_short:nth-child(5n+4) { background: #FDE0A6; } .event_short:nth-child(5n+4) figure::after { background: #FDE0A6; } .event_short:nth-child(5n+4) .more::before, .event_short:nth-child(5n+4) .more::after { border-color: #FDE0A6; } .event_short:nth-child(5n+5) { background: #C1C3D7; } .event_short:nth-child(5n+5) figure::after { background: #C1C3D7; } .event_short:nth-child(5n+5) .more::before, .event_short:nth-child(5n+5) .more::after { border-color: #C1C3D7; } .event_short figure { position: relative; width: 27%; background-size: cover; background-position: center center; background-repeat: no-repeat; } @media only screen and (max-width: 800px) { .event_short figure { width: 100%; height: 300px; } } .event_short figure::after { content: ''; top: 0px; bottom: -40px; right: -60px; position: absolute; width: 140px; transform: rotate(15deg); z-index: 0; } @media only screen and (max-width: 800px) { .event_short figure::after { left: 0; top: auto; height: 120px; width: 100%; bottom: -60px; transform: skewY(-7deg); } } .event_short .content_holder { position: relative; z-index: 5; width: 73%; left: -60px; padding: 1.8rem; padding-bottom: 3rem !important; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 1279px) { .event_short .content_holder { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .event_short .content_holder { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .event_short .content_holder { padding: 1.2rem; } } @media only screen and (max-width: 1024px) { .event_short .content_holder { width: 68%; } } @media only screen and (max-width: 800px) { .event_short .content_holder { left: auto; width: 100%; padding-right: 60px; } } .event_short .more { width: 70px; height: 70px; padding: 20px; background: #000; overflow: hidden; position: absolute; right: 0rem; bottom: 0rem; box-sizing: border-box; z-index: 20; } .event_short .more::before { position: absolute; content: ''; display: block; width: 30px; height: 30px; border-bottom: 2px solid #90c3d8; border-right: 2px solid #90c3d8; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .event_short .more:hover::before { transform: rotate(-45deg); } .event_short .more::after { left: 18px; top: 34px; position: absolute; content: ''; display: block; width: 40px; height: 2px; border-bottom: 2px solid #90c3d8; transform: rotate(45deg); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .event_short .more:hover::after { transform: rotate(0deg); } .event_short .timezone { position: relative; z-index: 2; width: 35%; } @media only screen and (max-width: 599px) { .event_short .timezone { width: 100%; } } .event_short .timezone .day { font-weight: bold; display: block; padding-bottom: 0.4rem; } @media only screen and (max-width: 599px) { .event_short .timezone .day { padding-bottom: 0rem; } } .event_short .timezone .timeslot { display: block; } .event_short .timezone .loc { display: block; margin-top: 1rem; } @media only screen and (max-width: 599px) { .event_short .timezone .loc { margin-top: 0.2rem; } } .event_short .timezone .big_time { line-height: 1.2; font-family: 'Squada One', 'sans-serif'; display: block; font-size: 3rem; margin-bottom: 1.4rem; } @media only screen and (max-width: 1279px) { .event_short .timezone .big_time { font-size: 2.5rem; } } @media only screen and (max-width: 800px) { .event_short .timezone .big_time { font-size: 2.2rem; margin-bottom: 1rem; } } @media only screen and (max-width: 599px) { .event_short .timezone .big_time { font-size: 2rem; margin-bottom: 1rem; } } @media only screen and (max-width: 599px) { .event_short .timezone .big_time { margin-bottom: 0.2rem; } } .event_short .description { width: 65%; padding-left: 1rem; } @media only screen and (max-width: 599px) { .event_short .description { padding-left: 0; padding: 1rem 0; width: 100%; } } .event_short .more { position: absolute; right: 0px; } .event_short .social { position: absolute; bottom: 1rem; } .lavender .event_short:nth-child(5n+5) { background: #D8C0CD; } .lavender .event_short:nth-child(5n+5) figure::after { background: #D8C0CD; } .lavender .event_short:nth-child(5n+5) .more::before, .lavender .event_short:nth-child(5n+5) .more::after { border-color: #D8C0CD; } .blue .event_short:nth-child(5n+1) { background: #D8C0CD; } .blue .event_short:nth-child(5n+1) figure::after { background: #D8C0CD; } .blue .event_short:nth-child(5n+1) .more::before, .blue .event_short:nth-child(5n+1) .more::after { border-color: #D8C0CD; } .red .event_short:nth-child(5n+2) { background: #D8C0CD; } .red .event_short:nth-child(5n+2) figure::after { background: #D8C0CD; } .red .event_short:nth-child(5n+2) .more::before, .red .event_short:nth-child(5n+2) .more::after { border-color: #D8C0CD; } .green .event_short:nth-child(5n+3) { background: #D8C0CD; } .green .event_short:nth-child(5n+3) figure::after { background: #D8C0CD; } .green .event_short:nth-child(5n+3) .more::before, .green .event_short:nth-child(5n+3) .more::after { border-color: #D8C0CD; } .yellow .event_short:nth-child(5n+4) { background: #D8C0CD; } .yellow .event_short:nth-child(5n+4) figure::after { background: #D8C0CD; } .yellow .event_short:nth-child(5n+4) .more::before, .yellow .event_short:nth-child(5n+4) .more::after { border-color: #D8C0CD; } .yellow_label .event_short { background: #FDE0A6; } .yellow_label .event_short figure::after { background: #FDE0A6; } .yellow_label .event_short .more::before, .yellow_label .event_short .more::after { border-color: #FDE0A6; } #main .social { padding-left: 0; padding-top: 2rem; padding-bottom: 0px; } #main .social li { display: inline-block; text-indent: 0; margin-right: 10px; } #main .social li::before { display: none; } #main .social li a { display: block; width: 22px; height: 22px; overflow: hidden; } #main .social li a.mail { width: 26px; } #main .social li a::before { content: ''; display: block; } #main .social li a.twitter::before { content: url("../../files/layout/images/twitter_mo.svg"); } #main .social li a.facebook::before { content: url("../../files/layout/images/facebook_mo.svg"); } #main .social li a.wa::before { content: url("../../files/layout/images/whatsapp_mo.svg"); } #main .social li a.mail::before { content: url("../../files/layout/images/mail_mo.svg"); width: 26px; } #main .categories { font-weight: bold; padding-left: 0; padding-bottom: 0.4rem; } #main .categories li { display: inline-block; text-indent: 0; } #main .categories li::before { display: none; } #main .categories li::after { content: ', '; } #main .categories li:last-child::after { display: none; } /* 3.2.3. Eventdetail -----------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 1024px) { .event_detail { padding-top: 25px; } .event_detail #mediazone::before { margin-top: 26vh; } } .event_detail .storno { top: 120px; left: 12px; right: 12px; transform: skewY(-7deg); padding: 2rem; font-size: 1.3rem; } .formitems span { display: inline-block; } .formitems span::after { content: ', '; display: inline-block; } .formitems span:last-child::after { content: ''; } .event_info { width: 32%; overflow: hidden; } @media only screen and (max-width: 1024px) { .event_info { width: 100%; } } .event_info h2 { font-size: 1.7rem; } .event_info h3 { font-family: 'Roboto', sans-serif; font-size: 100%; line-height: 1.5; text-size-adjust: none; font-weight: 700; margin-bottom: 0px; } .event_info h3 em { font-style: italique; } .event_info h3 strong { font-weight: 700; } .event_info .teaser { padding: 1.8rem; margin-bottom: 2rem; } @media only screen and (max-width: 1279px) { .event_info .teaser { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .event_info .teaser { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .event_info .teaser { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .event_info .teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .event_info .teaser { margin-bottom: 1rem; } } .event_info .infoblock { padding-left: 0; } .event_info .infoblock li { position: relative; text-indent: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .event_info .infoblock li strong { width: 80px; } .event_info .infoblock li .column { display: block; width: calc(100% - 80px); } .event_info .infoblock li::before { display: none; } .event_info .infoblock li .komma:last-child { display: none; } .event_description { width: 65%; padding: 0px 20px; } @media only screen and (max-width: 1024px) { .event_description { width: 100%; } } .event_description .teaser { padding: 1.8rem; margin-bottom: 2rem; } @media only screen and (max-width: 1279px) { .event_description .teaser { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .event_description .teaser { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .event_description .teaser { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .event_description .teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .event_description .teaser { margin-bottom: 1rem; } } .event_description h1 { margin-top: 0; } .event_description .subtitle { margin-top: -20px; } @media only screen and (max-width: 800px) { .event_description { padding: 0; padding-bottom: 40px; } } .event_description h2 { font-size: 1.6rem; } .teaser_strong { font-weight: bold; } /* 3.3. Räume -----------------------------------------------------------------------------------------------*/ .rooms { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -2%; z-index: 5; } .rooms h2 { margin-left: 2%; } .rooms_up { padding-top: 40px; padding-bottom: 40px; } .raum_teaser { position: relative; width: 23%; margin-left: 2%; margin-bottom: 2rem; } @media only screen and (max-width: 800px) { .raum_teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .raum_teaser { margin-bottom: 1rem; } } .raum_teaser::before { position: absolute; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0); right: 0; bottom: 0; content: ''; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .raum_teaser.show::before { width: 0px; height: 0px; } @media only screen and (max-width: 1024px) { .raum_teaser { width: 48%; } } @media only screen and (max-width: 599px) { .raum_teaser { width: 98%; } } .raum_teaser:focus { outline: none; } .raum_teaser figure { position: relative; z-index: -1; } .raum_teaser figcaption { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background-color: rgba(239, 131, 119, 0.8); align-content: center; position: absolute; height: 0; width: 100%; left: 0; bottom: 0; opacity: 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .raum_teaser figcaption h3, .raum_teaser figcaption p { width: 100%; text-align: center; } .raum_teaser.show figcaption { height: 100%; opacity: 1; } .raum_teaser .more { margin-left: calc(100% - 60px); width: 60px; height: 60px; display: block; background: #ef8377; margin-top: -60px; } .raum_teaser .more::before { content: url("../../files/layout/images/arrow.svg"); display: block; padding: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .raum_teaser.show .more:hover::before { content: url("../../files/layout/images/arrow.svg"); transform: rotate(-41deg); } .raum_teaser .more:focus::before { content: url("../../files/layout/images/arrow.svg"); transform: rotate(-41deg); } main .gallery ul, main .ce_gallery ul { padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -2%; padding-bottom: 0; } main .gallery ul li, main .ce_gallery ul li { text-indent: 0; width: 23%; margin-left: 2%; margin-bottom: 1rem; } @media only screen and (max-width: 1024px) { main .gallery ul li, main .ce_gallery ul li { width: 31.333%; } } @media only screen and (max-width: 800px) { main .gallery ul li, main .ce_gallery ul li { width: 48%; } } @media only screen and (max-width: 599px) { main .gallery ul li, main .ce_gallery ul li { width: 98%; } } main .gallery ul li::before, main .ce_gallery ul li::before { display: none; } /* 3.4. Angebot -----------------------------------------------------------------------------------------------*/ .angebot { margin-left: -2%; font-size: 0; } .angebot::after { content: ""; clear: both; display: table; } .angebot h2 { margin-left: 2%; } .angebot.long_form.short .kurs_teaser { width: 23%; } @media only screen and (max-width: 1024px) { .angebot.long_form.short .kurs_teaser { width: 48%; } } @media only screen and (max-width: 800px) { .angebot.long_form.short .kurs_teaser { width: 98%; } } .angebot.long_form.short .kurs_teaser h2:before { height: 200px; } @media only screen and (max-width: 1024px) { .angebot.long_form.short .kurs_teaser h2:before { height: 160px; } } .angebot.long_form .kurs_teaser { width: 48%; padding: 0; min-height: 400px; } .angebot.long_form .kurs_teaser .headline { position: relative; overflow: hidden; z-index: 7; } .angebot.long_form .kurs_teaser h2 { position: relative; padding: 1.8rem; padding-bottom: 70px !important; margin-left: 0; } @media only screen and (max-width: 1279px) { .angebot.long_form .kurs_teaser h2 { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .angebot.long_form .kurs_teaser h2 { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .angebot.long_form .kurs_teaser h2 { padding: 1.2rem; } } .angebot.long_form .kurs_teaser h2::before { content: ''; top: -50px; left: 0px; right: 0px; position: absolute; height: 160px; transform: skewY(-6deg); z-index: -1; background: #73b89c; } .angebot.long_form .kurs_teaser .bg_image1 { position: absolute; top: 0; background-size: cover; background-position: center 0px; height: 100%; width: 100%; } @media only screen and (max-width: 800px) { .angebot.long_form .kurs_teaser { width: 98%; } } .angebot .kurs_teaser { display: inline-block; white-space: normal; position: relative; width: 23%; margin-left: 2%; padding: 1.8rem; min-height: 280px; vertical-align: middle; margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.2; } @media only screen and (max-width: 1279px) { .angebot .kurs_teaser { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .angebot .kurs_teaser { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .angebot .kurs_teaser { padding: 1.2rem; } } @media only screen and (max-width: 1024px) { .angebot .kurs_teaser { width: 48%; } } @media only screen and (max-width: 800px) { .angebot .kurs_teaser { width: 98%; min-height: 240px; } } .angebot .kurs_teaser .more { cursor: pointer; position: absolute; right: 0px; bottom: 0px; width: 60px; height: 60px; padding: 20px; display: block; background: black; border: none; overflow: hidden; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 800px) { .angebot .kurs_teaser .more { width: 45px; height: 45px; padding: 15px; } } .angebot .kurs_teaser .more:focus { outline: 2px; } .angebot .kurs_teaser .more.active { background: transparent; width: 0; height: 0; padding: 0; border-style: solid; border-width: 2rem 2rem 0 2rem; border-color: #000000 transparent transparent transparent; bottom: -2rem; right: 50%; margin-right: -2rem; } .angebot .kurs_teaser .more::before { position: absolute; content: ''; display: block; width: 20px; height: 4px; top: 50%; margin-top: -2px; } .angebot .kurs_teaser .more::after { position: absolute; content: ''; display: block; width: 20px; height: 4px; top: 50%; margin-top: -2px; transform: rotate(90deg); } .angebot .kurs_teaser:nth-child(5n+1) { background: #73b89c; } .angebot .kurs_teaser:nth-child(5n+1) .more::before, .angebot .kurs_teaser:nth-child(5n+1) .more::after { background: #73b89c; } .angebot .kurs_teaser:nth-child(5n+3) { background: #90c3d8; } .angebot .kurs_teaser:nth-child(5n+3) .more::before, .angebot .kurs_teaser:nth-child(5n+3) .more::after { background: #90c3d8; } .angebot .kurs_teaser:nth-child(5n+3) h2:before { background: #90c3d8; } .angebot .kurs_teaser:nth-child(5n+5) { background: #FDE0A6; } .angebot .kurs_teaser:nth-child(5n+5) .more::before, .angebot .kurs_teaser:nth-child(5n+5) .more::after { background: #FDE0A6; } .angebot .kurs_teaser:nth-child(5n+5) h2:before { background: #FDE0A6; } .angebot .kurs_teaser:nth-child(5n+7) { background: #ef8377; } .angebot .kurs_teaser:nth-child(5n+7) .more::before, .angebot .kurs_teaser:nth-child(5n+7) .more::after { background: #ef8377; } .angebot .kurs_teaser:nth-child(5n+7) h2:before { background: #ef8377; } .angebot .kurs_teaser:nth-child(5n+9) { background: #C1C3D7; } .angebot .kurs_teaser:nth-child(5n+9) .more::before, .angebot .kurs_teaser:nth-child(5n+9) .more::after { background: #C1C3D7; } .angebot .kurs_teaser:nth-child(5n+9) h2:before { background: #C1C3D7; } .angebot .kurs_teaser .info { position: absolute; bottom: 0.1rem; font-size: 0.97rem; font-weight: bold; } .kurs_popup { visibility: hidden; font-size: 0.95rem; max-height: 0px; overflow: hidden; position: relative; float: left; width: 97.5%; margin-left: 2.5%; white-space: normal; transition: all 0.6s linear; } .kurs_popup:nth-child(5n+2) { background: #73b89c; } .kurs_popup:nth-child(5n+2) .more::before, .kurs_popup:nth-child(5n+2) .more::after { background: #73b89c; } .kurs_popup:nth-child(5n+4) { background: #90c3d8; } .kurs_popup:nth-child(5n+4) .more::before, .kurs_popup:nth-child(5n+4) .more::after { background: #90c3d8; } .kurs_popup:nth-child(5n+6) { background: #FDE0A6; } .kurs_popup:nth-child(5n+6) .more::before, .kurs_popup:nth-child(5n+6) .more::after { background: #FDE0A6; } .kurs_popup:nth-child(5n+8) { background: #ef8377; } .kurs_popup:nth-child(5n+8) .more::before, .kurs_popup:nth-child(5n+8) .more::after { background: #ef8377; } .kurs_popup:nth-child(5n+10) { background: #C1C3D7; } .kurs_popup:nth-child(5n+10) .more::before, .kurs_popup:nth-child(5n+10) .more::after { background: #C1C3D7; } .kurs_popup .less { cursor: pointer; position: absolute; right: 2rem; top: 2rem; width: 30px; height: 30px; padding: 0px; display: block; background: none; border: none; } @media only screen and (max-width: 800px) { .kurs_popup .less { right: 1rem; top: 1rem; } } .kurs_popup .less::before { position: absolute; content: ''; display: block; width: 30px; height: 4px; top: 50%; margin-top: -2px; background: #000; transform: rotate(-45deg); } .kurs_popup .less::after { position: absolute; content: ''; display: block; width: 30px; height: 4px; top: 50%; margin-top: -2px; background: #000; transform: rotate(45deg); } .kurs_popup .contentholder { padding: 0rem 6rem 1rem 2rem; } @media only screen and (max-width: 800px) { .kurs_popup .contentholder { padding: 0rem 3rem 0.5rem 1.5rem; } } .kurs_popup .popholder { padding: 2rem 6rem 2rem 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } @media only screen and (max-width: 800px) { .kurs_popup .popholder { padding: 1.5rem 3rem 1.5rem 1.5rem; } } .kurs_popup .popholder figure { width: 20%; padding-right: 3rem; } @media only screen and (max-width: 1279px) { .kurs_popup .popholder figure { width: 33%; padding-right: 2rem; } } @media only screen and (max-width: 800px) { .kurs_popup .popholder figure { width: 50%; padding-right: 1.5rem; } } @media only screen and (max-width: 599px) { .kurs_popup .popholder figure { width: 100%; padding-bottom: 1rem; } } .kurs_popup .popholder .kontakt { width: auto; max-width: 40%; padding-left: 2rem; border-left: 2px solid #000; } @media only screen and (max-width: 1279px) { .kurs_popup .popholder .kontakt { max-width: none; width: 100%; padding: 1rem 0rem; margin-top: 2rem; border-top: 2px solid #000; border-bottom: 2px solid #000; border-left: none; } } .kurs_popup .popholder .infolist { width: 20%; flex-grow: 2; } .kurs_popup .popholder .infolist a:hover, .kurs_popup .popholder .infolist a:focus { text-decoration: underline; } .kurs_popup .popholder .infolist a::after { content: ', '; } .kurs_popup .popholder .infolist a:last-child::after { display: none; } @media only screen and (max-width: 1279px) { .kurs_popup .popholder .infolist { width: 33%; } } @media only screen and (max-width: 800px) { .kurs_popup .popholder .infolist { width: 50%; } } @media only screen and (max-width: 800px) { .kurs_popup .popholder .infolist { width: 100%; } } .kurs_popup .popholder .termine { width: 20%; padding-left: 2rem; padding-right: 2rem; flex-grow: 2; } @media only screen and (max-width: 1279px) { .kurs_popup .popholder .termine { width: 33%; } } @media only screen and (max-width: 800px) { .kurs_popup .popholder .termine { width: 100%; padding: 2rem 0 0 0; } } .kurs_popup.show { visibility: visible; opacity: 1; max-height: 2000px; margin-bottom: 2rem; } @media only screen and (max-width: 800px) { .kurs_popup.show { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .kurs_popup.show { margin-bottom: 1rem; } } /* 3.5. Team -----------------------------------------------------------------------------------------------*/ @keyframes pulse-green { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(115, 184, 156, 0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(115, 184, 156, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(115, 184, 156, 0); } } @keyframes pulse-blue { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(144, 195, 216, 0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(144, 195, 216, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(144, 195, 216, 0); } } @keyframes pulse-lavender { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(193, 195, 215, 0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(193, 195, 215, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(193, 195, 215, 0); } } @keyframes pulse-red { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(228, 49, 29, 0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(228, 49, 29, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(228, 49, 29, 0); } } @keyframes pulse-yellow { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 166, 15, 0.9); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(241, 166, 15, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 166, 15, 0); } } .team { margin-left: -2.5%; font-size: 0; } .team::after { content: ""; clear: both; display: table; } .team .profil { display: inline-block; white-space: normal; position: relative; width: 22.5%; margin-left: 2.5%; vertical-align: middle; margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.2; z-index: 1; } @media only screen and (max-width: 800px) { .team .profil { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .team .profil { margin-bottom: 1rem; } } .team .profil img { padding-right: 70px; } .team .profil .headline { padding: 1.8rem; padding-bottom: 0px; } @media only screen and (max-width: 1279px) { .team .profil .headline { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .team .profil .headline { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .team .profil .headline { padding: 1.2rem; } } @media only screen and (max-width: 1024px) { .team .profil { width: 47.5%; } } @media only screen and (max-width: 800px) { .team .profil { width: 97.5%; } } .team .profil .more { cursor: pointer; position: absolute; right: 20px; top: 210px; width: 70px; height: 60px; border-radius: 50%; border: none; background: #000; color: #73b89c; line-height: 60px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .team .profil .more.active { background: none; border-radius: 0; top: auto; padding: 0; width: 0px; height: 0px; width: 0px; line-height: 0; border-left: 17px solid transparent; border-right: 17px solid #000; border-top: 17px solid transparent; border-bottom: 17px solid #000; left: 20%; bottom: -33px; } .team .profil .more.active::before, .team .profil .more.active span { display: none; } .team .profil .more::before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 14px solid #000; border-right: 7px solid transparent; border-top: 7px solid #000; border-bottom: 12px solid transparent; left: -2px; bottom: -6px; transform: rotate(30deg); z-index: -1; } .team .profil .more span { display: inline-block; width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; } .team .profil:nth-child(5n+1) { background: #73b89c; } .team .profil:nth-child(5n+1) .more { color: #73b89c; } .team .profil:nth-child(5n+1) .more span { background: #73b89c; } .team .profil:nth-child(5n+1) .more span.b1 { animation: pulse-green 3s infinite ease-out; } .team .profil:nth-child(5n+1) .more span.b2 { animation: pulse-green 4s infinite ease-out 1.4s; } .team .profil:nth-child(5n+1) .more span.b3 { animation: pulse-green 4s infinite ease-out 2.4s; } .team .profil:nth-child(5n+3) { background: #90c3d8; } .team .profil:nth-child(5n+3) .more { color: #90c3d8; } .team .profil:nth-child(5n+3) .more span { background: #90c3d8; } .team .profil:nth-child(5n+3) .more span.b1 { animation: pulse-blue 4s infinite ease-out; } .team .profil:nth-child(5n+3) .more span.b2 { animation: pulse-blue 4s infinite ease-out 1.4s; } .team .profil:nth-child(5n+3) .more span.b3 { animation: pulse-blue 4s infinite ease-out 2.4s; } .team .profil:nth-child(5n+5) { background: #C1C3D7; } .team .profil:nth-child(5n+5) .more { color: #C1C3D7; } .team .profil:nth-child(5n+5) .more span { background: #C1C3D7; } .team .profil:nth-child(5n+5) .more span.b1 { animation: pulse-lavender 4s infinite ease-out; } .team .profil:nth-child(5n+5) .more span.b2 { animation: pulse-lavender 4s infinite ease-out 1.4s; } .team .profil:nth-child(5n+5) .more span.b3 { animation: pulse-lavender 4s infinite ease-out 2.4s; } .team .profil:nth-child(5n+7) { background: #ef8377; } .team .profil:nth-child(5n+7) .more { color: #ef8377; } .team .profil:nth-child(5n+7) .more span { background: #ef8377; } .team .profil:nth-child(5n+7) .more span.b1 { animation: pulse-red 4s infinite ease-out; } .team .profil:nth-child(5n+7) .more span.b2 { animation: pulse-red 4s infinite ease-out 1.4s; } .team .profil:nth-child(5n+7) .more span.b3 { animation: pulse-red 4s infinite ease-out 2.4s; } .team .profil:nth-child(5n+9) { background: #FDE0A6; } .team .profil:nth-child(5n+9) .more { color: #FDE0A6; } .team .profil:nth-child(5n+9) .more span { background: #FDE0A6; } .team .profil:nth-child(5n+9) .more span.b1 { animation: pulse-yellow 4s infinite ease-out; } .team .profil:nth-child(5n+9) .more span.b2 { animation: pulse-yellow 4s infinite ease-out 1.4s; } .team .profil:nth-child(5n+9) .more span.b3 { animation: pulse-yellow 4s infinite ease-out 2.4s; } .statement { visibility: hidden; max-height: 0px; overflow: hidden; position: relative; float: left; width: 97.5%; margin-left: 2.5%; white-space: normal; transition: all 0.6s linear; } .statement div { position: relative; font-size: 1.2rem; background: #000; width: 100%; border-radius: 40px; padding: 3rem 4rem 2rem 3rem; } .statement:nth-child(5n+2) div { color: #73b89c; } .statement:nth-child(5n+2) div .less::before, .statement:nth-child(5n+2) div .less::after { background: #73b89c; } .statement:nth-child(5n+4) div { color: #90c3d8; } .statement:nth-child(5n+4) div .less::before, .statement:nth-child(5n+4) div .less::after { background: #90c3d8; } .statement:nth-child(5n+6) div { color: #C1C3D7; } .statement:nth-child(5n+6) div .less::before, .statement:nth-child(5n+6) div .less::after { background: #C1C3D7; } .statement:nth-child(5n+8) { color: #ef8377; } .statement:nth-child(5n+8) .less::before, .statement:nth-child(5n+8) .less::after { background: #ef8377; } .statement:nth-child(5n+10) { color: #FDE0A6; } .statement:nth-child(5n+10) .less::before, .statement:nth-child(5n+10) .less::after { background: #FDE0A6; } .statement .less { cursor: pointer; position: absolute; right: 2.5rem; top: 2.5rem; width: 30px; height: 30px; padding: 0px; display: block; background: none; border: none; } @media only screen and (max-width: 800px) { .statement .less { right: 1.5rem; top: 1.5rem; } } .statement .less::before { position: absolute; content: ''; display: block; width: 30px; height: 4px; top: 50%; margin-top: -2px; transform: rotate(-45deg); } .statement .less::after { position: absolute; content: ''; display: block; width: 30px; height: 4px; top: 50%; margin-top: -2px; transform: rotate(45deg); } .statement.show { visibility: visible; opacity: 1; max-height: 2000px; margin-bottom: 2rem; } @media only screen and (max-width: 800px) { .statement.show { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .statement.show { margin-bottom: 1rem; } } .team_teaser { width: 48%; margin-bottom: 2rem; } @media only screen and (max-width: 800px) { .team_teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .team_teaser { margin-bottom: 1rem; } } .team_teaser .textwrap { padding: 1.8rem; } @media only screen and (max-width: 1279px) { .team_teaser .textwrap { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .team_teaser .textwrap { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .team_teaser .textwrap { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .team_teaser { width: 100%; } } /* 3.5. Filter -----------------------------------------------------------------------------------------------*/ .ce_catalogFilterForm { margin-bottom: 2rem; } .ce_catalogFilterForm label { font-family: "Roboto Condensed", "Arial MT Condensed", "Arial Narrow", "sans-serif"; text-transform: uppercase; display: block; } .ce_catalogFilterForm form { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } @media only screen and (max-width: 800px) { .ce_catalogFilterForm form { display: none; } .ce_catalogFilterForm form.show { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } } @media only screen and (max-width: 800px) { .ce_catalogFilterForm { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .ce_catalogFilterForm { margin-bottom: 1rem; } } .ce_catalogFilterForm .select { width: 34%; } @media only screen and (max-width: 800px) { .ce_catalogFilterForm .select { width: 100%; margin-bottom: 1rem; } } .ce_catalogFilterForm .submit_container { width: 10%; } @media only screen and (max-width: 800px) { .ce_catalogFilterForm .submit_container { width: auto; } } .ce_catalogFilterForm .date-field { width: 10%; } @media only screen and (max-width: 800px) { .ce_catalogFilterForm .date-field { width: 48%; margin-bottom: 1rem; } } .ce_catalogFilterForm input { border-color: #000; border-radius: 0px; background: #000; height: 42px; width: 100%; color: #ef8377; } .ce_catalogFilterForm .submit { height: 42px; } .ce_catalogFilterForm .SumoSelect .CaptionCont { background: #000; } .ce_catalogFilterForm .SumoSelect .CaptionCont span { color: #ef8377 !important; display: inline-block !important; padding-top: 2px; } .ce_catalogFilterForm .SumoSelect .CaptionCont label i::after { border-top: 8px solid #ef8377; } .ce_catalogFilterForm .SumoSelect.open .CaptionCont { background: #000; } .ce_catalogFilterForm .opt.sel, .ce_catalogFilterForm .opt:hover, .ce_catalogFilterForm .opt.selected { background-color: #ef8377 !important; } .ce_catalogFilterForm .opt::before { display: none; } .ce_catalogFilterForm .select-all.partial span i, .ce_catalogFilterForm .select-all.selected span i, .ce_catalogFilterForm .optWrapper.multiple .options li.opt.selected span i { background-color: #000 !important; } #main .filter-button .submit, .toggle-button { color: #ef8377; width: 100%; font-family: "Roboto Condensed", "Arial MT Condensed", "Arial Narrow", "sans-serif"; font-size: 100%; padding: 10px 12px; } #main .toggle-button { position: relative; text-align: left; margin-bottom: 20px; display: none; } @media only screen and (max-width: 800px) { #main .toggle-button { display: block; } } #main .toggle-button::after { position: absolute; right: 10px; content: url("../../files/layout/images/filter.svg"); display: inline-block; vertical-align: -2px; } .reset { display: block; text-align: right; margin-top: 10px; padding-bottom: 0px; margin-bottom: -26px; } @media only screen and (max-width: 800px) { .reset { margin-bottom: -10px; } } .reset a { position: relative; padding-left: 15px; } .reset a::before, .reset a::after { position: absolute; left: 0px; content: ' '; height: 14px; width: 2px; background-color: #000; margin-top: 6px; } .reset a::before { transform: rotate(45deg); } .reset a::after { transform: rotate(-45deg); } .filter_standard .select { width: 29%; } @media only screen and (max-width: 800px) { .filter_standard .select { width: 100%; margin-bottom: 1rem; } } /* 3.6. Publikationen -----------------------------------------------------------------------------------------------*/ .public { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; padding: 1.8rem; margin-bottom: 2rem; } @media only screen and (max-width: 1279px) { .public { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .public { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .public { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .public { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .public { margin-bottom: 1rem; } } .public figure { width: 25%; } @media only screen and (max-width: 599px) { .public figure { width: 100%; margin-bottom: 2rem; } } @media only screen and (max-width: 599px) and (max-width: 800px) { .public figure { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) and (max-width: 599px) { .public figure { margin-bottom: 1rem; } } .public .textwrap { width: 70%; } .public .textwrap h2 { font-size: 2.4rem; } @media only screen and (max-width: 599px) { .public .textwrap { width: 100%; } } /* 3.7. Toggler -----------------------------------------------------------------------------------------------*/ .action_toggler { width: 100%; } .action_toggler .toggler { background: #ef8377; font-size: 1.6rem; padding: 1.5rem 3rem 1.5rem; } /* 3.8. Archiv Digital -----------------------------------------------------------------------------------------------*/ .event_digital { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; width: 49%; background: #73b89c; margin-bottom: 2rem; min-height: 300px; overflow: hidden; } @media only screen and (max-width: 800px) { .event_digital { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .event_digital { margin-bottom: 1rem; } } @media only screen and (max-width: 1024px) { .event_digital { width: 100%; } } .event_digital .read-more { position: absolute; bottom: 1.5rem; padding-left: 26px; text-decoration: none; } .event_digital .read-more::before { left: 0; bottom: 6px; position: absolute; content: ''; display: block; width: 12px; height: 12px; border-bottom: 2px solid #000; border-right: 2px solid #000; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .event_digital .read-more:hover::before { transform: rotate(-45deg); } .event_digital .read-more::after { left: -3px; bottom: 12px; position: absolute; content: ''; display: block; width: 20px; height: 2px; border-bottom: 2px solid #000; transform: rotate(45deg); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .event_digital .read-more:hover::after { transform: rotate(0deg); } .event_digital .info { position: relative; width: 50%; padding: 2rem 2rem 2rem 1rem; z-index: 2; } @media only screen and (max-width: 599px) { .event_digital .info { width: 100%; } } .event_digital .info h2 { font-size: 2.6rem; } .event_digital .image { position: relative; width: 50%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .event_digital .image::after { content: ''; top: 0px; z-index: 1; background: #73b89c; top: -40px; bottom: -40px; right: -100px; position: absolute; width: 160px; transform: rotate(15deg); z-index: 0; } @media only screen and (max-width: 599px) { .event_digital .image::after { left: 0; top: auto; height: 120px; width: 100%; bottom: -60px; transform: skewY(-7deg); } } @media only screen and (max-width: 599px) { .event_digital .image { width: 100%; height: 240px; } } .event_digital .video_popup { position: fixed; top: 50%; left: 50%; width: 80%; max-width: 900px; transform: translate(-50%, -50%); text-align: center; z-index: 999; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.83); display: none; background: #73b89c; border: 12px solid #73b89c; } @media only screen and (max-width: 800px) { .event_digital .video_popup { border-width: 10px; } } .event_digital .video_popup.show { display: block; } .event_digital .more { width: 70px; height: 70px; overflow: hidden; padding: 0; position: absolute; right: 0rem; bottom: 0rem; box-sizing: border-box; border: none; background: #73b89c; z-index: 10; } .event_digital .more::before { content: url("../../files/layout/images/video.svg"); display: block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; transform: scale(1); } .event_digital .more:hover::before { transform: rotate(-10deg) scale(1.2); } .event_digital .close { position: absolute; width: 50px; height: 50px; right: -20px; background: none; border: none; top: -100px; } .event_digital .close::before, .event_digital .close::after { content: ''; position: absolute; height: 3px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #73b89c; } .event_digital .close::before { transform: rotate(45deg); } .event_digital .close::after { transform: rotate(-45deg); } .event_digital:nth-child(5n+2) { background: #C1C3D7; } .event_digital:nth-child(5n+2) .more { background: #C1C3D7; } .event_digital:nth-child(5n+2) .image::after { background: #C1C3D7; } .event_digital:nth-child(5n+2) .video_popup { border-color: #C1C3D7; background: #C1C3D7; } .event_digital:nth-child(5n+2) .close::before, .event_digital:nth-child(5n+2) .close::after { background: #C1C3D7; } .event_digital:nth-child(5n+3) { background: #FDE0A6; } .event_digital:nth-child(5n+3) .more { background: #FDE0A6; } .event_digital:nth-child(5n+3) .image::after { background: #FDE0A6; } .event_digital:nth-child(5n+3) .video_popup { border-color: #FDE0A6; background: #FDE0A6; } .event_digital:nth-child(5n+3) .close::before, .event_digital:nth-child(5n+3) .close::after { background: #FDE0A6; } .event_digital:nth-child(5n+4) { background: #90c3d8; } .event_digital:nth-child(5n+4) .more { background: #90c3d8; } .event_digital:nth-child(5n+4) .image::after { background: #90c3d8; } .event_digital:nth-child(5n+4) .video_popup { border-color: #90c3d8; background: #90c3d8; } .event_digital:nth-child(5n+4) .close::before, .event_digital:nth-child(5n+4) .close::after { background: #90c3d8; } .event_digital:nth-child(5n+5) { background: #ef8377; } .event_digital:nth-child(5n+5) .more { background: #ef8377; } .event_digital:nth-child(5n+5) .image::after { background: #ef8377; } .event_digital:nth-child(5n+5) .video_popup { border-color: #ef8377; background: #ef8377; } .event_digital:nth-child(5n+5) .close::before, .event_digital:nth-child(5n+5) .close::after { background: #ef8377; } /* 3.9. Timeline -----------------------------------------------------------------------------------------------*/ .timeline { position: relative; margin-bottom: 50px; } .timeline::before { content: ''; position: absolute; width: 3px; height: 100%; top: 140px; left: 350px; background: #000; } @media only screen and (max-width: 1024px) { .timeline::before { left: 300px; } } @media only screen and (max-width: 800px) { .timeline::before { left: 50%; } } .timeline .event { position: relative; margin-bottom: 50px; min-height: 260px; cursor: pointer; } @media only screen and (max-width: 800px) { .timeline .event { padding-bottom: 200px; } } .timeline .event h2 { font-size: 2.5rem; } @media only screen and (max-width: 1024px) { .timeline .event h2 { font-size: 2.1rem; } } @media only screen and (max-width: 800px) { .timeline .event h2 { font-size: 1.8rem; } } .timeline .event .radiobutton { text-align: center; width: 40px; height: 40px; border: 2px solid #000; border-radius: 50%; background: white; z-index: 100; position: absolute; left: 350px; margin-left: -20px; top: 115px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .timeline .event .radiobutton:focus { background: #000; } @media only screen and (max-width: 1024px) { .timeline .event .radiobutton { left: 300px; } } @media only screen and (max-width: 800px) { .timeline .event .radiobutton { left: 20px; margin-top: -20px; } .timeline .event .radiobutton::after { color: #000; position: absolute; display: inline-block; left: 50px; font-size: 150%; font-weight: bold; margin-top: 3px; top: 0; content: attr(aria-label); } } @media only screen and (max-width: 800px) and (max-width: 599px) { .timeline .event .radiobutton::after { left: 100vw; transform: translateX(-200%); } } .timeline .event .radiobutton::before { content: '✓'; font-size: 1.5rem; font-weight: bold; color: #ef8377; opacity: 0; } .timeline .event .content-perspective { padding-top: 40px; left: 430px; position: relative; width: calc(100% - 440px); } @media only screen and (max-width: 1024px) { .timeline .event .content-perspective { left: 380px; } } @media only screen and (max-width: 800px) { .timeline .event .content-perspective { left: 0px; top: 200px; } } @media only screen and (max-width: 1024px) { .timeline .event .content-perspective { width: calc(100% - 390px); } } @media only screen and (max-width: 800px) { .timeline .event .content-perspective { width: 100%; } } .timeline .event .content-perspective::before { content: ''; width: 100px; left: -60px; top: 135px; position: absolute; height: 3px; background: #000; } @media only screen and (max-width: 800px) { .timeline .event .content-perspective::before { display: none; } } .timeline .event .content { transform: skewX(-4deg); background: #90c3d8; } @media only screen and (max-width: 599px) { .timeline .event .content { transform: skewX(0deg); } } .timeline .event .content-inner { position: relative; padding: 3rem 2rem 2rem 2rem; transform: skewX(4deg); } @media only screen and (max-width: 599px) { .timeline .event .content-inner { transform: skewX(0deg); } } .timeline .event .text { max-height: 0px; overflow: hidden; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .timeline .event figure { position: absolute; width: 270px; } @media only screen and (max-width: 1024px) { .timeline .event figure { width: 220px; } } @media only screen and (max-width: 800px) { .timeline .event figure { left: 50%; transform: translate(-50%, 0px); } } .timeline .event figure img { border-radius: 50%; transform: scale(0.6) translateX(24px); border: 10px solid #90c3d8; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 1024px) { .timeline .event figure img { transform: scale(0.75); } } .timeline .event figure .caption { width: 100%; text-align: center; font-size: 1.2rem; text-transform: uppercase; position: absolute; bottom: 15px; font-weight: bold; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 1024px) { .timeline .event figure .caption { bottom: -10px; } } @media only screen and (max-width: 800px) { .timeline .event figure .caption { left: 50%; margin-left: -100px; position: fixed !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); } } .timeline .event figure::before { content: ''; position: absolute; height: 3px; background: #000; width: 100%; top: 50%; right: -70px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 1024px) { .timeline .event figure::before { top: 135px; } } @media only screen and (max-width: 800px) { .timeline .event figure::before { display: none; } } .timeline .event:nth-child(odd) .content { background: #73b89c; } .timeline .event:nth-child(odd) img { border-color: #73b89c; } .timeline .event.time_up .text, .timeline .event.time_up:nth-child(odd) .text { max-height: 1000px; } .timeline .event.time_up .content, .timeline .event.time_up:nth-child(odd) .content { background: #ef8377; } .timeline .event.time_up img, .timeline .event.time_up:nth-child(odd) img { transform: scale(0.95) translateX(0px); border-color: #ef8377; } .timeline .event.time_up .caption, .timeline .event.time_up:nth-child(odd) .caption { bottom: -40px; font-size: 1.4rem; } @media only screen and (max-width: 800px) { .timeline .event.time_up .caption, .timeline .event.time_up:nth-child(odd) .caption { right: -140px; } } .timeline .event.time_up .radiobutton, .timeline .event.time_up:nth-child(odd) .radiobutton { background: #000; } .timeline .event.time_up .radiobutton::before, .timeline .event.time_up:nth-child(odd) .radiobutton::before { opacity: 1; } /* 3.10. Quicklinks -----------------------------------------------------------------------------------------------*/ .link-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -1%; } .link-row h2 { margin-left: 2%; } .quicklink { width: 18%; margin-bottom: 2rem; min-height: 180px; display: flex; flex-direction: column; justify-content: center; margin-left: 2%; transform: skewX(-4deg); font-family: 'Squada One', 'sans-serif'; font-size: 1.8rem; padding: 1.8rem; box-sizing: border-box; line-height: 1; transform: skewX(-4deg); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } @media only screen and (max-width: 800px) { .quicklink { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .quicklink { margin-bottom: 1rem; } } @media only screen and (max-width: 1279px) { .quicklink { width: 31.33%; margin-bottom: 1rem; } } @media only screen and (max-width: 800px) { .quicklink { width: 48%; margin-bottom: 1rem; } } @media only screen and (max-width: 599px) { .quicklink { width: 98%; transform: skewX(0deg); min-height: none; } } @media only screen and (max-width: 1279px) { .quicklink { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .quicklink { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .quicklink { padding: 1.2rem; } } .quicklink:hover { transform: skewX(0deg); } .quicklink:focus { outline: 2px solid #000; } .quicklink .skew { display: inline-block; transform: skewX(4deg); } @media only screen and (max-width: 599px) { .quicklink .skew { transform: skewX(0deg); } } /* 3.11. Inhaltsteaser -----------------------------------------------------------------------------------------------*/ .theme_teaser { position: relative; width: 48%; height: auto; overflow: hidden; margin-bottom: 2rem; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; flex-direction: column; } @media only screen and (max-width: 800px) { .theme_teaser { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .theme_teaser { margin-bottom: 1rem; } } .theme_teaser .zoom { position: absolute; width: 20px; height: 20px; white-space: nowrap; overflow: hidden; background: #000; z-index: 200; left: 0px; bottom: 0; padding: 5px; } .theme_teaser .zoom::before { content: url("../../files/layout/images/search_small.svg"); display: inline-block; } .theme_teaser.long .bg_image1 { background-size: auto 100%; height: 100%; width: 100%; z-index: -1; } .theme_teaser.long .textwrap { margin-top: 0px; margin-left: 44%; width: 56%; } .theme_teaser.long .textwrap::before { top: 0px; left: -70px; right: auto; height: 100%; width: 100px; transform: skewX(-7deg); } @media only screen and (max-width: 800px) { .theme_teaser { width: 100%; } } .theme_teaser .bg_image1 { position: absolute; background-size: 100% auto; height: 100%; width: 100%; z-index: -1; background-repeat: none; } .theme_teaser .textwrap { flex-grow: 1; position: relative; background: #73b89c; margin-top: 400px; padding: 1.8rem; } @media only screen and (max-width: 800px) { .theme_teaser .textwrap { margin-top: 300px; } } @media only screen and (max-width: 1279px) { .theme_teaser .textwrap { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .theme_teaser .textwrap { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .theme_teaser .textwrap { padding: 1.2rem; } } .theme_teaser .textwrap::before { content: ''; top: -48px; left: 0px; right: 0px; position: absolute; height: 140px; transform: skewY(-7deg); z-index: -1; background: #73b89c; } .theme_teaser.blue_teaser .textwrap { background: #90c3d8; } .theme_teaser.blue_teaser .textwrap::before { background: #90c3d8; } .theme_teaser.yellow_teaser .textwrap { background: #FDE0A6; } .theme_teaser.yellow_teaser .textwrap::before { background: #FDE0A6; } .theme_teaser.red_teaser .textwrap { background: #ef8377; } .theme_teaser.red_teaser .textwrap::before { background: #ef8377; } /* 3.12. Akkordeon -----------------------------------------------------------------------------------------------*/ .toggler { cursor: pointer; position: relative; font-size: 1.8rem; border-bottom: 2px solid #000; padding-bottom: 6px; padding-right: 3rem; } @media only screen and (max-width: 599px) { .toggler { font-size: 1.6rem; } } .toggler::after, .toggler::before { position: absolute; right: 10px; content: ''; width: 20px; height: 3px; background: #000; top: 40%; margin-top: -1px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .toggler::before { transform: rotate(90deg); } .toggler.ui-state-active::before { transform: rotate(0deg); } .toggler2 { cursor: pointer; position: relative; font-size: 1.3rem; border-bottom: 2px solid #000; padding-bottom: 6px; padding-right: 3rem; } @media only screen and (max-width: 599px) { .toggler2 { font-size: 1.1rem; } } .toggler2::after, .toggler2::before { position: absolute; right: 10px; content: ''; width: 12px; height: 2px; background: #000; top: 40%; margin-top: -1px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .toggler2::before { transform: rotate(90deg); } .toggler2.ui-state-active::before { transform: rotate(0deg); } .accordion { padding: 10px 0; } .accordion2 div { padding: 10px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } .accordion2 div figure { width: 35%; } .accordion2 div figure img { border: 6px solid #ef8377; } @media only screen and (max-width: 800px) { .accordion2 div figure { width: 100%; margin-bottom: 1rem; } } .accordion2 div .textwrap { width: 60%; } @media only screen and (max-width: 800px) { .accordion2 div .textwrap { width: 100%; margin-bottom: 1rem; } } /* 3.13. Akkordeon -----------------------------------------------------------------------------------------------*/ .wrap { margin-left: -2%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .teaser_third { width: 31.33%; margin-bottom: 2rem; margin-left: 2%; transform: skewX(-4deg); padding: 1.8rem; } @media only screen and (max-width: 800px) { .teaser_third { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { .teaser_third { margin-bottom: 1rem; } } @media only screen and (max-width: 1024px) { .teaser_third { width: 48%; margin-bottom: 1rem; } } @media only screen and (max-width: 800px) { .teaser_third { width: 98%; margin-bottom: 1rem; transform: skewX(0deg); } } @media only screen and (max-width: 1279px) { .teaser_third { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .teaser_third { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .teaser_third { padding: 1.2rem; } } .teaser_third .textwrap { transform: skewX(4deg); } @media only screen and (max-width: 800px) { .teaser_third .textwrap { transform: skewX(0deg); } } /* 3.14. Cookie Banner -----------------------------------------------------------------------------------------------*/ .cookiebar_default .cc-inner { border: #ef8377 12px solid; border-radius: 0; } .cookiebar_default .cc-inner h2 { font-size: 2rem; } .cookiebar_default .cc-inner h2, .cookiebar_default .cc-inner p, .cookiebar_default .cc-inner .cc-group .cc-detail-btn { color: #000; } .cookiebar_default .cc-inner .cc-group { border: 2px solid #000; border-radius: 0; } .cookiebar_default .cc-inner .cc-footer .cc-btn { border: 2px solid #000; border-radius: 0; background: #000; color: white; } .cookiebar_default .cc-inner .cc-footer .cc-btn:hover, .cookiebar_default .cc-inner .cc-footer .cc-btn:focus { background: white; color: #000; } .cookiebar_default .cc-group > label { height: auto; } /* 3.15. Suche -----------------------------------------------------------------------------------------------*/ .search_container { position: absolute; width: 0px; overflow: hidden; right: 0; top: 0px; background: #000; z-index: 100; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .search_container.show { width: 360px; } .search_container label { left: 50%; margin-left: -100px; position: fixed !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); } .search_container input { position: relative; z-index: 10; margin-bottom: 0; height: 28px; border: 1px solid #000; margin-top: 5px; background: #ef8377; width: 250px; } .search_container input:focus { background: white; outline: 2px solid #ef8377; box-shadow: 1px 1px 8px 1px #ef8377; } .search_container .widget { width: calc(100% - 40px); padding-bottom: 0; } .search_container .widget-submit { width: 30px; position: absolute; right: 0; z-index: 1; } .search_container .widget-submit button { width: 30px; height: 30px; overflow: hidden; padding: 2px; border: none; margin-top: 5px; white-space: nowrap; background: #000; } .search_container .widget-submit button::before { content: url("../../files/layout/images/search_red.svg"); display: block; background: #000; } .search_button { display: inline-block; width: 16px; height: 16px; overflow: hidden; vertical-align: middle; margin-left: 5px; } .search_button:hover .st0 { fill: #ef8377; } .search_button:focus { outline: solid 1px white; } /* 3.16. Imprint -----------------------------------------------------------------------------------------------*/ .imprint { padding: 1.8rem; } @media only screen and (max-width: 1279px) { .imprint { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .imprint { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .imprint { padding: 1.2rem; } } /* 3.17. Videoplatzhalter -----------------------------------------------------------------------------------------------*/ .video_message { position: absolute; z-index: 100; top: 2rem; left: 2rem; } .video_message a { text-decoration: underline; text-decoration-style: dotted; } .video_message a::before { content: url("../../files/layout/images/cookie.svg"); display: inline-block; margin-right: 10px; } .video_message a:hover, .video_message a:focus { text-decoration-style: solid; } .video_message.none { display: none; } /* 3.18. Suche -----------------------------------------------------------------------------------------------*/ .showMoreItemsList { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; } .showMoreItemsList form { width: 100%; margin-bottom: 1rem; } .search_block { padding: 1.8rem; width: 49%; } @media only screen and (max-width: 1279px) { .search_block { padding: 1.6rem; } } @media only screen and (max-width: 800px) { .search_block { padding: 1.4rem; } } @media only screen and (max-width: 599px) { .search_block { padding: 1.2rem; } } @media only screen and (max-width: 800px) { .search_block { width: 100%; } } .search_block h3 { font-size: 180%; } .search_block .highlight { font-weight: bold; } .search_block .context { font-style: oblique; } .search_block .relevance { padding-top: 0.3rem; display: block; font-size: 90%; } #main .mod_search .header { background: #ef8377; padding: 1.8rem; margin-bottom: 2rem; width: 100%; } @media only screen and (max-width: 1279px) { #main .mod_search .header { padding: 1.6rem; } } @media only screen and (max-width: 800px) { #main .mod_search .header { padding: 1.4rem; } } @media only screen and (max-width: 599px) { #main .mod_search .header { padding: 1.2rem; } } @media only screen and (max-width: 800px) { #main .mod_search .header { margin-bottom: 1.5rem; } } @media only screen and (max-width: 599px) { #main .mod_search .header { margin-bottom: 1rem; } } #main .mod_search .widget-text { position: relative; width: 100%; } #main .mod_search .widget-submit { position: absolute; width: 42px; right: 0; } #main .mod_search .search_submit { width: 42px; height: 42px; padding: 5px; background: #000; border: 2px solid #000; } #main .mod_search .search_submit:hover, #main .mod_search .search_submit:focus { background: white; } #main .mod_search .search_submit:hover .st0, #main .mod_search .search_submit:focus .st0 { fill: #000; } /* 3.19. Pagination -----------------------------------------------------------------------------------------------*/ .pagination { margin-left: 2%; } .pagination ul { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .pagination li { text-indent: 0; margin-right: 6px; } .pagination li a, .pagination li strong { font-size: 0.9rem; background: #FDE0A6; line-height: 25px; font-weight: normal; text-align: center; display: inline-block; width: 30px; border: 1px solid #000; } .pagination li a:hover, .pagination li a:focus, .pagination li strong:hover, .pagination li strong:focus { background: #000; color: #FDE0A6; } .pagination li a:focus, .pagination li strong:focus { outline: black 2px solid; outline-offset: 2px; } .pagination li a.last, .pagination li a.first, .pagination li a.next, .pagination li a.prev, .pagination li strong.last, .pagination li strong.first, .pagination li strong.next, .pagination li strong.prev { font-size: 1.3rem; } .pagination li strong { background: #000; color: #FDE0A6; } .pagination li:before { display: none; } /* 4. Plugins ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 4.1. Fresco -----------------------------------------------------------------------------------------------*/ /* box-sizing */ .fr-window, .fr-window [class^="fr-"], .fr-overlay, .fr-overlay [class^="fr-"], .fr-spinner, .fr-spinner [class^="fr-"] { box-sizing: border-box; } .fr-window { position: fixed; width: 100%; height: 100%; top: 0; left: 0; font: 13px/20px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif; /* Chrome hack, this fixes a visual glitch when quickly toggling a video */ transform: translateZ(0px); } /* z-index */ .fr-overlay { z-index: 99998; } .fr-window { z-index: 99999; } .fr-spinner { z-index: 100000; } /* overlay */ .fr-overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; } .fr-overlay-background { float: left; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.97); } .fr-overlay-ui-fullclick .fr-overlay-background { background-color: rgba(0, 0, 0, 0.97); } /* mobile touch has position:absolute to allow zooming */ .fr-window.fr-mobile-touch, .fr-overlay.fr-mobile-touch { position: absolute; overflow: visible; } /* some properties on the window are used to toggle things * like margin and the fullclick mode, * we reset those properties after measuring them */ .fr-measured { margin: 0 !important; min-width: 0 !important; min-height: 0 !important; } .fr-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fr-pages { position: absolute; width: 100%; height: 100%; overflow: hidden; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fr-page { position: absolute; width: 100%; height: 100%; } .fr-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; text-align: center; } .fr-hovering-clickable .fr-container { cursor: pointer; } /* padding: youtube & vimeo always have buttons on the outside side button = 72 = 54 + (2 * 9 margin) close button = 48 */ /* padding ui:inside */ .fr-ui-inside .fr-container { padding: 20px 20px; } .fr-ui-inside.fr-no-sides .fr-container { padding: 20px; } /* padding ui:outside */ .fr-ui-outside .fr-container { padding: 20px 82px; } .fr-ui-outside.fr-no-sides .fr-container { padding: 20px 48px; } /* reduce padding on smaller screens */ @media all and (max-width: 700px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 700px) { /* padding ui:inside */ .fr-ui-inside .fr-container { padding: 12px 12px; } .fr-ui-inside.fr-no-sides .fr-container { padding: 12px; } /* padding ui:outside */ .fr-ui-outside .fr-container { padding: 12px 72px; } .fr-ui-outside.fr-no-sides .fr-container { padding: 12px 48px; } } @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 500px) { /* padding ui:inside */ .fr-ui-inside .fr-container { padding: 0px 0px; } .fr-ui-inside.fr-no-sides .fr-container { padding: 0px; } /* padding ui:outside */ .fr-ui-outside .fr-container { padding: 0px 72px; } .fr-ui-outside.fr-no-sides .fr-container { padding: 0px 48px; } } /* padding ui:fullclick */ .fr-ui-fullclick .fr-container { padding: 0; } .fr-ui-fullclick.fr-no-sides .fr-container { padding: 0; } /* video fullclick */ .fr-ui-fullclick.fr-type-video .fr-container { padding: 0px 62px; } .fr-ui-fullclick.fr-no-sides.fr-type-video .fr-container { padding: 48px 0px; } /* overflow-y should always have 0 padding top and bottom */ .fr-overflow-y .fr-container { padding-top: 0 !important; padding-bottom: 0 !important; } .fr-content, .fr-content-background { position: absolute; top: 50%; left: 50%; /* IE11 has a 1px blur bug on the edges of the caption (ui:inside) during animation with overflow:hidden */ overflow: visible; } /* img/iframe/error */ .fr-content-element { float: left; width: 100%; height: 100%; } .fr-content-background { background: #101010; } .fr-info { position: absolute; top: 0; left: 0; width: 100%; color: #efefef; font-size: 13px; line-height: 20px; text-align: left; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .fr-info-background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; line-height: 1%; filter: none; opacity: 1; } .fr-ui-inside .fr-info-background { filter: alpha(opacity=80); opacity: 0.8; zoom: 1; } /* ui:outside has a slightly lighter info background to break up from black page backgrounds */ .fr-ui-outside .fr-info-background { background: #0d0d0d; } /* info at the bottom for ui:inside */ .fr-content .fr-info { top: auto; bottom: 0; } .fr-info-padder { display: block; overflow: hidden; padding: 12px; position: relative; width: auto; } .fr-caption { width: auto; display: inline; } .fr-position { color: #b3b3b3; float: right; line-height: 21px; opacity: 0.99; position: relative; text-align: right; margin-left: 15px; white-space: nowrap; } /* positions not within the info bar for ui:outside/inside */ .fr-position-outside, .fr-position-inside { position: absolute; bottom: 0; right: 0; margin: 12px; width: auto; padding: 2px 8px; border-radius: 10px; font-size: 11px; line-height: 20px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); display: none; overflow: hidden; white-space: nowrap; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .fr-position-inside { border: 0; } .fr-position-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0d0d0d; filter: alpha(opacity=80); opacity: 0.8; zoom: 1; /* oldIE */ } .fr-position-text { color: #b3b3b3; } .fr-position-outside .fr-position-text, .fr-position-inside .fr-position-text { float: left; position: relative; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); opacity: 1; } /* display it for the outside ui, hide the caption inside */ .fr-ui-outside .fr-position-outside { display: block; } .fr-ui-outside .fr-info .fr-position { display: none; } .fr-ui-inside.fr-no-caption .fr-position-inside { display: block; } /* links */ .fr-info a, .fr-info a:hover { color: #ccc; border: 0; background: none; text-decoration: underline; } .fr-info a:hover { color: #eee; } /* no-caption */ .fr-ui-outside.fr-no-caption .fr-info { display: none; } .fr-ui-inside.fr-no-caption .fr-caption { display: none; } /* --- stroke */ .fr-stroke { position: absolute; top: 0; left: 0; width: 100%; height: 1px; } .fr-stroke-vertical { width: 1px; height: 100%; } .fr-stroke-horizontal { padding: 0 1px; } .fr-stroke-right { left: auto; right: 0; } .fr-stroke-bottom { top: auto; bottom: 0; } .fr-stroke-color { float: left; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.08); } /* the stroke is brighter inside the info box */ .fr-info .fr-stroke-color { background: rgba(80, 80, 80, 0.3); } /* remove the stroke when outside ui has a caption */ .fr-ui-outside.fr-has-caption .fr-content .fr-stroke-bottom { display: none; } /* remove stroke and shadow when ui:fullclick */ .fr-ui-fullclick .fr-stroke { display: none; } .fr-ui-fullclick .fr-content-background { box-shadow: none; } /* the info box never bas a top stroke */ .fr-info .fr-stroke-top { display: none; } /* < > */ .fr-side { position: absolute; top: 50%; width: 54px; height: 72px; margin: 0 9px; margin-top: -36px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; zoom: 1; } .fr-side-previous { left: 0; } .fr-side-next { right: 0; left: auto; } .fr-side-disabled { cursor: default; } .fr-side-hidden { display: none !important; } .fr-side-button { float: left; width: 100%; height: 100%; margin: 0; padding: 0; } .fr-side-button-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #101010; } .fr-side-button-icon { float: left; position: relative; height: 100%; width: 100%; zoom: 1; background-position: 50% 50%; background-repeat: no-repeat; } /* smaller side buttons */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-side { width: 54px; height: 60px; margin: 0; margin-top: -30px; } .fr-side-button { width: 48px; height: 60px; margin: 0 3px; } } /* X */ .fr-close { position: absolute; width: 48px; height: 48px; top: 0; right: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .fr-close-background, .fr-close-icon { position: absolute; top: 12px; left: 12px; height: 26px; width: 26px; background-position: 50% 50%; background-repeat: no-repeat; } .fr-close-background { background-color: #000; } /* Thumbnails */ .fr-thumbnails { position: absolute; overflow: hidden; } .fr-thumbnails-disabled .fr-thumbnails { display: none !important; } .fr-thumbnails-horizontal .fr-thumbnails { width: 100%; height: 12%; min-height: 74px; max-height: 160px; bottom: 0; } .fr-thumbnails-vertical .fr-thumbnails { height: 100%; width: 10%; min-width: 74px; max-width: 160px; left: 0; } .fr-thumbnails, .fr-thumbnails * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fr-thumbnails-wrapper { position: absolute; top: 0; left: 50%; height: 100%; } .fr-thumbnails-vertical .fr-thumbnails-wrapper { top: 50%; left: 0; } .fr-thumbnails-slider { position: relative; width: 100%; height: 100%; float: left; zoom: 1; } .fr-thumbnails-slider-slide { position: absolute; top: 0; left: 0; height: 100%; } .fr-thumbnails-thumbs { float: left; height: 100%; overflow: hidden; position: relative; top: 0; left: 0; } .fr-thumbnails-slide { position: absolute; top: 0; height: 100%; width: 100%; } .fr-thumbnail-frame { position: absolute; zoom: 1; overflow: hidden; } .fr-thumbnail { position: absolute; width: 30px; height: 100%; left: 50%; top: 50%; zoom: 1; cursor: pointer; margin: 0 10px; } .fr-ltIE9 .fr-thumbnail * { overflow: hidden; /* IE6(7) */ z-index: 1; zoom: 1; } .fr-thumbnail-wrapper { position: relative; background: #161616; width: 100%; height: 100%; float: left; overflow: hidden; display: inline; /* IE6(7) */ z-index: 0; /* IE8 */ } .fr-thumbnail-overlay { cursor: pointer; } .fr-thumbnail-active .fr-thumbnail-overlay { cursor: default; } .fr-thumbnail-overlay, .fr-thumbnail-overlay-background, .fr-thumbnail-overlay-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-width: 0; overflow: hidden; border-style: solid; border-color: transparent; } .fr-ltIE9 .fr-thumbnail-overlay-border { border-width: 0 !important; } .fr-thumbnail .fr-thumbnail-image { position: absolute; filter: alpha(opacity=85); opacity: 0.85; max-width: none; } .fr-thumbnail:hover .fr-thumbnail-image, .fr-thumbnail-active:hover .fr-thumbnail-image { filter: alpha(opacity=99); opacity: 0.99; } .fr-thumbnail-active .fr-thumbnail-image, .fr-thumbnail-active:hover .fr-thumbnail-image { filter: alpha(opacity=35); opacity: 0.35; } .fr-thumbnail-active { cursor: default; } /* Thumbnails loading */ .fr-thumbnail-loading, .fr-thumbnail-loading-background, .fr-thumbnail-loading-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fr-thumbnail-loading-background { background-color: #161616; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0.8; position: relative; float: left; } /* this element is there as an alternative to putting the loading image on the background */ .fr-thumbnail-loading-icon { display: none; } /* error on thumbnail */ .fr-thumbnail-error .fr-thumbnail-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #202020; } /* Thumbnail < > */ .fr-thumbnails-side { float: left; height: 100%; width: 28px; margin: 0 5px; position: relative; overflow: hidden; } .fr-thumbnails-side-previous { margin-left: 12px; } .fr-thumbnails-side-next { margin-right: 12px; } .fr-thumbnails-vertical .fr-thumbnails-side { height: 28px; width: 100%; margin: 10px 0; } .fr-thumbnails-vertical .fr-thumbnails-side-previous { margin-top: 20px; } .fr-thumbnails-vertical .fr-thumbnails-side-next { margin-bottom: 20px; } .fr-thumbnails-side-button { position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -14px; width: 28px; height: 28px; cursor: pointer; } .fr-thumbnails-side-button-background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; filter: alpha(opacity=80); opacity: 0.8; -moz-transition: background-color 0.2s ease-in; -webkit-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; background-color: #333; cursor: pointer; border-radius: 4px; } .fr-thumbnails-side-button:hover .fr-thumbnails-side-button-background { background-color: #3b3b3b; } .fr-thumbnails-side-button-disabled * { cursor: default; } .fr-thumbnails-side-button-disabled:hover .fr-thumbnails-side-button-background { background-color: #333; } .fr-thumbnails-side-button-icon { position: absolute; /*top: -7px; left: -7px;*/ top: 0; left: 0; width: 100%; height: 100%; } /* vertical thumbnails */ .fr-thumbnails-vertical .fr-thumbnails-side, .fr-thumbnails-vertical .fr-thumbnails-thumbs, .fr-thumbnails-vertical .fr-thumbnail-frame { clear: both; } /* ui:fullclick has a dark thumbnail background */ .fr-window-ui-fullclick .fr-thumbnails { background: #090909; } /* put a stroke on the connecting caption*/ .fr-window-ui-fullclick.fr-thumbnails-enabled.fr-thumbnails-horizontal .fr-info .fr-stroke-bottom { display: block !important; } /*({ box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); } */ .fr-window-ui-fullclick.fr-thumbnails-enabled.fr-thumbnails-vertical .fr-info .fr-stroke-left { display: block !important; } /* thumbnail spacing */ .fr-thumbnails-horizontal .fr-thumbnails-thumbs { padding: 12px 5px; } .fr-thumbnails-vertical .fr-thumbnails-thumbs { padding: 5px 12px; } .fr-thumbnails-measured .fr-thumbnails-thumbs { padding: 0 !important; } /* horizontal */ @media all and (min-height: 700px) { .fr-thumbnails-horizontal .fr-thumbnails-thumbs { padding: 16px 8px; } .fr-thumbnails-horizontal .fr-thumbnails-side { margin: 0 8px; } .fr-thumbnails-horizontal .fr-thumbnails-side-previous { margin-left: 16px; } .fr-thumbnails-horizontal .fr-thumbnails-side-next { margin-right: 16px; } } @media all and (min-height: 980px) { .fr-thumbnails-horizontal .fr-thumbnails-thumbs { padding: 20px 10px; } .fr-thumbnails-horizontal .fr-thumbnails-side { margin: 0 10px; } .fr-thumbnails-horizontal .fr-thumbnails-side-previous { margin-left: 20px; } .fr-thumbnails-horizontal .fr-thumbnails-side-next { margin-right: 20px; } } /* vertical */ @media all and (min-width: 1200px) { .fr-thumbnails-vertical .fr-thumbnails-thumbs { padding: 8px 16px; } .fr-thumbnails-vertical .fr-thumbnails-side { margin: 0 8px; } .fr-thumbnails-vertical .fr-thumbnails-side-previous { margin-top: 16px; } .fr-thumbnails-vertical .fr-thumbnails-side-next { margin-bottom: 16px; } } @media all and (min-width: 1800px) { .fr-thumbnails-vertical .fr-thumbnails-thumbs { padding: 10px 20px; } .fr-thumbnails-vertical .fr-thumbnails-side { margin: 10px 0; } .fr-thumbnails-vertical .fr-thumbnails-side-previous { margin-top: 20px; } .fr-thumbnails-vertical .fr-thumbnails-side-next { margin-bottom: 20px; } } /* hide thumbnails on smaller screens the js always hides them on touch based devices */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 500px) { .fr-thumbnails-horizontal .fr-thumbnails { display: none !important; } } @media all and (max-width: 700px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-thumbnails-vertical .fr-thumbnails { display: none !important; } } /* force fullClick: true and force overflow: false */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-page { min-width: 100%; } /* fullclick */ .fr-page { min-height: 100%; } /* overflow: false */ } /* switch between ui modes we force everything not in the current UI mode to hide */ .fr-window-ui-fullclick .fr-side-next-outside, .fr-window-ui-fullclick .fr-side-previous-outside, .fr-window-ui-fullclick .fr-close-outside, .fr-window-ui-fullclick .fr-content .fr-side-next, .fr-window-ui-fullclick .fr-content .fr-side-previous, .fr-window-ui-fullclick .fr-content .fr-close, .fr-window-ui-fullclick .fr-content .fr-info, .fr-window-ui-outside .fr-side-next-fullclick, .fr-window-ui-outside .fr-side-previous-fullclick, .fr-window-ui-outside .fr-close-fullclick, .fr-window-ui-outside .fr-content .fr-side-next, .fr-window-ui-outside .fr-content .fr-side-previous, .fr-window-ui-outside .fr-content .fr-close, .fr-window-ui-outside .fr-content .fr-info, .fr-window-ui-inside .fr-page > .fr-info, .fr-window-ui-inside .fr-side-next-fullclick, .fr-window-ui-inside .fr-side-previous-fullclick, .fr-window-ui-inside .fr-close-fullclick, .fr-window-ui-inside .fr-side-next-outside, .fr-window-ui-inside .fr-side-previous-outside, .fr-window-ui-inside .fr-close-outside { display: none !important; } /* some ui elements can be toggled on mousemove. filter:alpha(opacity) is bugged so we use display in oldIE */ .fr-toggle-ui { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .fr-visible-fullclick-ui .fr-box > .fr-toggle-ui, .fr-visible-inside-ui .fr-ui-inside .fr-toggle-ui { opacity: 1; } .fr-hidden-fullclick-ui .fr-box > .fr-toggle-ui, .fr-hidden-inside-ui .fr-ui-inside .fr-toggle-ui { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .fr-ltIE9.fr-hidden-fullclick-ui .fr-box > .fr-toggle-ui, .fr-ltIE9.fr-hidden-inside-ui .fr-ui-inside .fr-toggle-ui { display: none; } /* Spinner */ .fr-spinner { position: fixed; width: 52px; height: 52px; background: #101010; background: rgba(16, 16, 16, 0.85); border-radius: 5px; } .fr-spinner div { position: absolute; top: 0; left: 0; height: 64%; width: 64%; margin-left: 18%; margin-top: 18%; opacity: 1; -webkit-animation: fresco-12 1.2s infinite ease-in-out; animation: fresco-12 1.2s infinite ease-in-out; } .fr-spinner div::after { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 8px; margin-left: -1px; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* fixes rendering in Firefox */ } .fr-spinner div.fr-spin-1 { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .fr-spinner div.fr-spin-2 { -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-delay: -1s; animation-delay: -1s; } .fr-spinner div.fr-spin-3 { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .fr-spinner div.fr-spin-4 { -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .fr-spinner div.fr-spin-5 { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .fr-spinner div.fr-spin-6 { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .fr-spinner div.fr-spin-6 { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .fr-spinner div.fr-spin-7 { -ms-transform: rotate(210deg); -webkit-transform: rotate(210deg); transform: rotate(210deg); -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .fr-spinner div.fr-spin-8 { -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); transform: rotate(240deg); -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .fr-spinner div.fr-spin-9 { -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .fr-spinner div.fr-spin-10 { -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); transform: rotate(300deg); -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .fr-spinner div.fr-spin-11 { -ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg); -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .fr-spinner div.fr-spin-12 { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes fresco-12 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fresco-12 { 0% { opacity: 1; } 100% { opacity: 0; } } /* Thumbnail spinner */ .fr-thumbnail-spinner { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; } .fr-thumbnail-spinner-spin { position: relative; float: left; margin: 8px 0 0 8px; text-indent: -9999em; border-top: 2px solid rgba(255, 255, 255, 0.2); border-right: 2px solid rgba(255, 255, 255, 0.2); border-bottom: 2px solid rgba(255, 255, 255, 0.2); border-left: 2px solid #fff; -webkit-animation: fr-thumbnail-spin 1.1s infinite linear; animation: fr-thumbnail-spin 1.1s infinite linear; } .fr-thumbnail-spinner-spin, .fr-thumbnail-spinner-spin::after { border-radius: 50%; width: 24px; height: 24px; } @-webkit-keyframes fr-thumbnail-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fr-thumbnail-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Error */ .fr-error { float: left; position: relative; background-color: #ca3434; width: 160px; height: 160px; } .fr-error-icon { position: absolute; width: 42px; height: 42px; top: 50%; left: 50%; margin-left: -21px; margin-top: -21px; } /* skin: 'fresco' */ /* Sprite */ .fr-window-skin-fresco .fr-side-button-icon, .fr-window-skin-fresco .fr-close-icon, .fr-window-skin-fresco .fr-thumbnails-side-button-icon, .fr-window-skin-fresco .fr-error-icon { background-image: url("../../files/layout/images/sprite.svg"); } /* fallback png sprite */ .fr-window-skin-fresco.fr-no-svg .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-close-icon, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-button-icon, .fr-window-skin-fresco .fr-error-icon { background-image: url("../../files/layout/images/sprite.png"); } .fr-window-skin-fresco .fr-error-icon { background-position: -160px -126px; } .fr-window-skin-fresco .fr-content-background { background: #101010; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); } .fr-window-skin-fresco.fr-window-ui-fullclick .fr-content-background { box-shadow: none; } /* thumbnail shadow */ .fr-window-skin-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); } /* < > */ .fr-window-skin-fresco .fr-side-button-background { background-color: transparent; } .fr-window-skin-fresco .fr-side-previous .fr-side-button-icon { background-position: -13px -14px; } .fr-window-skin-fresco .fr-side-next .fr-side-button-icon { background-position: -93px -14px; } .fr-window-skin-fresco .fr-side-previous:hover .fr-side-button-icon { background-position: -13px -114px; } .fr-window-skin-fresco .fr-side-next:hover .fr-side-button-icon { background-position: -93px -114px; } /* transition (png) */ .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-previous .fr-side-button-icon { background-position: -13px -114px; } .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-next .fr-side-button-icon { background-position: -93px -114px; } /* disabled state (png) */ .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled:hover .fr-side-button-icon { background-position: -13px -214px; } .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled:hover .fr-side-button-icon { background-position: -93px -214px; } /* transition (svg) */ .fr-window-skin-fresco.fr-svg .fr-side-previous .fr-side-button-icon { background-position: -13px -114px; } .fr-window-skin-fresco.fr-svg .fr-side-next .fr-side-button-icon { background-position: -93px -114px; } .fr-window-skin-fresco.fr-svg .fr-side-button-icon { opacity: 0.5; } .fr-window-skin-fresco.fr-svg .fr-side:hover .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-previous .fr-side-previous .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-next .fr-side-next .fr-side-button-icon { opacity: 1; } .fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-side .fr-side-button-icon { opacity: 0.8; } /* touch always active but at lower opacity */ /* disabled (svg) */ .fr-window-skin-fresco.fr-svg .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-previous .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-hovering-next .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-side-disabled:hover .fr-side-button-icon, .fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-side-disabled .fr-side-button-icon { opacity: 0.2; } /* hide for ui:inside/fullclick, only for the image type */ .fr-window-skin-fresco.fr-window-ui-inside .fr-type-image .fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-window-ui-fullclick.fr-showing-type-image .fr-side-disabled .fr-side-button-icon { background-image: none; } /* < > responsive */ @media all and (max-width: 500px) and (orientation: portrait), all and (orientation: landscape) and (max-height: 414px) { .fr-window-skin-fresco .fr-side-previous .fr-side-button-icon { background-position: 0px -300px; } .fr-window-skin-fresco .fr-side-next .fr-side-button-icon { background-position: -48px -300px; } .fr-window-skin-fresco .fr-side-previous:hover .fr-side-button-icon { background-position: 0px -360px; } .fr-window-skin-fresco .fr-side-next:hover .fr-side-button-icon { background-position: -48px -360px; } /* transition (png) */ .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-previous .fr-side-button-icon { background-position: 0px -360px; } .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch .fr-side-next .fr-side-button-icon { background-position: -48px -360px; } /* transition (svg) */ .fr-window-skin-fresco.fr-svg .fr-side-previous .fr-side-button-icon { background-position: 0px -360px; } .fr-window-skin-fresco.fr-svg .fr-side-next .fr-side-button-icon { background-position: -48px -360px; } /* disabled state (png) */ .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-previous .fr-side-previous.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-previous.fr-side-disabled:hover .fr-side-button-icon { background-position: 0px -420px; } .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-hovering-next .fr-side-next.fr-side-disabled .fr-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-side-next.fr-side-disabled:hover .fr-side-button-icon { background-position: -48px -420px; } } /* X */ /* colors */ .fr-window-skin-fresco.fr-window-ui-outside .fr-close-background { background-color: #363636; } .fr-window-skin-fresco.fr-window-ui-outside .fr-close:hover .fr-close-background { background-color: #434343; } .fr-window-skin-fresco.fr-window-ui-inside .fr-close-background, .fr-window-skin-fresco.fr-window-ui-fullclick .fr-close-background { background-color: #131313; filter: alpha(opacity=80); opacity: 0.8; } .fr-window-skin-fresco.fr-window-ui-inside .fr-close:hover .fr-close-background, .fr-window-skin-fresco.fr-window-ui-fullclick .fr-close:hover .fr-close-background { background-color: #191919; } /* - image */ .fr-window-skin-fresco .fr-close .fr-close-icon { background-position: -168px -8px; } .fr-window-skin-fresco .fr-close:hover .fr-close-icon { background-position: -210px -8px; } /* - transition */ .fr-window-skin-fresco.fr-svg .fr-close .fr-close-icon { background-position: -210px -8px; opacity: 0.8; } .fr-window-skin-fresco .fr-close:hover .fr-close-icon { opacity: 1; } /* iOS 8.4.1 bug: when opacity changes it'll require 2 taps force a single opacity to fix this */ .fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-close .fr-close-icon, .fr-window-skin-fresco.fr-mobile-touch .fr-close:hover .fr-close-icon { opacity: 1; } /* Thumbnails */ .fr-window-skin-fresco .fr-thumbnail-wrapper { border-color: transparent; border-style: solid; border-width: 0; } .fr-window-skin-fresco .fr-thumbnail-wrapper { box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-wrapper { box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); } .fr-window-skin-fresco .fr-thumbnail-wrapper { box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3); } .fr-window-skin-fresco .fr-thumbnail-overlay-border { border-width: 1px; border-color: rgba(255, 255, 255, 0.08); /* should remain rgba */ } /* no inner border on active thumbnail */ .fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-overlay-border, .fr-window-skin-fresco .fr-thumbnail-active:hover .fr-thumbnail-overlay-border { border: 0; } /* Thumbnails < > */ .fr-window-skin-fresco .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -167px -49px; } .fr-window-skin-fresco .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -209px -49px; } .fr-window-skin-fresco .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -167px -91px; } .fr-window-skin-fresco .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -209px -91px; } /* vertical ^ (up/down) adjustments */ .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon { background-position: -293px -49px; } .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-icon { background-position: -335px -49px; } .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-icon { background-position: -293px -91px; } .fr-window-skin-fresco.fr-thumbnails-vertical .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-icon { background-position: -335px -91px; } /* Thumbnails < > transition */ .fr-window-skin-fresco.fr-svg .fr-thumbnails-side .fr-thumbnails-side-button-icon { -moz-transition: opacity 0.2s ease-in; -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; opacity: 0.8; } .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -167px -49px; } .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-next .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -209px -91px; } .fr-window-skin-fresco.fr-svg .fr-thumbnails-side:hover .fr-thumbnails-side-button-icon { opacity: 1; } /* vertical ^ (up/down) adjustments */ .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled { background-position: -293px -49px; } .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled { background-position: -335px -91px; } /* lower opacity on disabled states */ .fr-window-skin-fresco.fr-svg .fr-thumbnails-side .fr-thumbnails-side-button-disabled, .fr-window-skin-fresco.fr-svg .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled { opacity: 0.5; } /* lower opacity IE < 9 using images */ .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -251px -49px; } .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -251px -91px; } .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background, .fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-background { filter: alpha(opacity=50); } /* vertical ^ (up/down) adjustments */ .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-previous:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -377px -49px; } .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-next .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon, .fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical .fr-thumbnails-side-next:hover .fr-thumbnails-side-button-disabled .fr-thumbnails-side-button-icon { background-position: -377px -91px; } /* 4.2. Slickslider -----------------------------------------------------------------------------------------------*/ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* ==================================================================================================================== * RESPONSIVE * ====================================================================================================================*/ @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; } } /* 4.3. Select2 ---------------------------------------------------------------------------------------------*/ .SumoSelect p { margin: 0; } .SumoSelect { width: 200px; } .SelectBox { padding: 5px 8px; } .sumoStopScroll { overflow: hidden; } .SumoSelect .hidden { display: none; } .SumoSelect .search-txt { display: none; outline: 0; } .SumoSelect .no-match { display: none; padding: 6px; } .SumoSelect.open .search-txt { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 5px 8px; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; } .SumoSelect.open > .search > label, .SumoSelect.open > .search > span { visibility: hidden; } .SelectClass, .SumoUnder { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .SelectClass { z-index: 1; } .SumoSelect .select-all > label, .SumoSelect > .CaptionCont, .SumoSelect > .optWrapper > .options li.opt label { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } .SumoSelect { display: inline-block; position: relative; outline: 0; } .SumoSelect.open > .CaptionCont, .SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont { box-shadow: 0 0 2px #7799d0; border-color: #7799d0; } .SumoSelect > .CaptionCont { position: relative; border: 1px solid #a4a4a4; min-height: 14px; background-color: #fff; border-radius: 2px; margin: 0; } .SumoSelect > .CaptionCont > span { display: block; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: default; } .SumoSelect > .CaptionCont > span.placeholder { color: #ccc; font-style: italic; } .SumoSelect > .CaptionCont > label { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; } .SumoSelect > .CaptionCont > label > i { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII="); background-position: center center; width: 16px; height: 16px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-repeat: no-repeat; opacity: .8; } .SumoSelect > .optWrapper { display: none; z-index: 1000; top: 30px; width: 100%; position: absolute; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; border: 1px solid #ddd; box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.11); border-radius: 3px; overflow: hidden; } .SumoSelect.open > .optWrapper { top: 35px; display: block; } .SumoSelect.open > .optWrapper.up { top: auto; bottom: 100%; margin-bottom: 5px; } .SumoSelect > .optWrapper ul { list-style: none; display: block; padding: 0; margin: 0; overflow: auto; } .SumoSelect > .optWrapper > .options { border-radius: 2px; position: relative; max-height: 250px; } .SumoSelect > .optWrapper.okCancelInMulti > .options { border-radius: 2px 2px 0 0; } .SumoSelect > .optWrapper.selall > .options { border-radius: 0 0 2px 2px; } .SumoSelect > .optWrapper.selall.okCancelInMulti > .options { border-radius: 0; } .SumoSelect > .optWrapper > .options li.group.disabled > label { opacity: .5; } .SumoSelect > .optWrapper > .options li ul li.opt { padding-left: 22px; } .SumoSelect > .optWrapper.multiple > .options li ul li.opt { padding-left: 50px; } .SumoSelect > .optWrapper.isFloating > .options { max-height: 100%; box-shadow: 0 0 100px #595959; } .SumoSelect > .optWrapper > .options li.opt { padding: 6px 6px; position: relative; border-bottom: 1px solid #f5f5f5; } .SumoSelect > .optWrapper > .options > li.opt:first-child { border-radius: 2px 2px 0 0; } .SumoSelect > .optWrapper.selall > .options > li.opt:first-child { border-radius: 0; } .SumoSelect > .optWrapper > .options > li.opt:last-child { border-radius: 0 0 2px 2px; border-bottom: none; } .SumoSelect > .optWrapper.okCancelInMulti > .options > li.opt:last-child { border-radius: 0; } .SumoSelect > .optWrapper > .options li.opt:hover { background-color: #e4e4e4; } .SumoSelect .select-all.sel, .SumoSelect > .optWrapper > .options li.opt.sel { background-color: #a1c0e4; } .SumoSelect > .optWrapper > .options li label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; cursor: pointer; } .SumoSelect > .optWrapper > .options li span { display: none; } .SumoSelect > .optWrapper > .options li.group > label { cursor: default; padding: 8px 6px; font-weight: 700; } .SumoSelect > .optWrapper.isFloating { position: fixed; top: 0; left: 0; right: 0; width: 90%; bottom: 0; margin: auto; max-height: 90%; } .SumoSelect > .optWrapper > .options li.opt.disabled { background-color: inherit; pointer-events: none; } .SumoSelect > .optWrapper > .options li.opt.disabled * { -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: .5; } .SumoSelect > .optWrapper.multiple > .options li.opt { padding-left: 35px; cursor: pointer; } .SumoSelect .select-all > span, .SumoSelect > .optWrapper.multiple > .options li.opt span { position: absolute; display: block; width: 30px; top: 0; bottom: 0; margin-left: -35px; } .SumoSelect .select-all > span i, .SumoSelect > .optWrapper.multiple > .options li.opt span i { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 14px; height: 14px; border: 1px solid #aeaeae; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); background-color: #fff; } .SumoSelect > .optWrapper > .MultiControls { display: none; border-top: 1px solid #ddd; background-color: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.13); border-radius: 0 0 3px 3px; } .SumoSelect > .optWrapper.multiple.isFloating > .MultiControls { display: block; margin-top: 5px; position: absolute; bottom: 0; width: 100%; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls { display: block; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p { padding: 6px; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p:focus { box-shadow: 0 0 2px #a1c0e4; border-color: #a1c0e4; outline: 0; background-color: #a1c0e4; } .SumoSelect > .optWrapper.multiple > .MultiControls > p { display: inline-block; cursor: pointer; padding: 12px; width: 50%; box-sizing: border-box; text-align: center; } .SumoSelect > .optWrapper.multiple > .MultiControls > p:hover { background-color: #f1f1f1; } .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk { border-right: 1px solid #dbdbdb; border-radius: 0 0 0 3px; } .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnCancel { border-radius: 0 0 3px 0; } .SumoSelect > .optWrapper.isFloating > .options li.opt { padding: 12px 6px; } .SumoSelect > .optWrapper.multiple.isFloating > .options li.opt { padding-left: 35px; } .SumoSelect > .optWrapper.multiple.isFloating { padding-bottom: 43px; } .SumoSelect .select-all.partial > span i, .SumoSelect .select-all.selected > span i, .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i { background-color: #11a911; box-shadow: none; border-color: transparent; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: center center; } .SumoSelect.disabled { opacity: .7; cursor: not-allowed; } .SumoSelect.disabled > .CaptionCont { border-color: #ccc; box-shadow: none; } .SumoSelect .select-all { border-radius: 3px 3px 0 0; position: relative; border-bottom: 1px solid #ddd; background-color: #fff; padding: 8px 0 3px 35px; height: 20px; cursor: pointer; } .SumoSelect .select-all > label, .SumoSelect .select-all > span i { cursor: pointer; } .SumoSelect .select-all.partial > span i { background-color: #ccc; } .SumoSelect > .optWrapper > .options li.optGroup { padding-left: 5px; text-decoration: underline; } /* 4.4. DATEPICKER ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /*! * Datepicker v1.0.10 * https://fengyuanchen.github.io/datepicker * * Copyright 2014-present Chen Fengyuan * Released under the MIT license * * Date: 2020-09-29T14:46:09.037Z */ .datepicker-container { background-color: #fff; direction: ltr; font-size: 12px; left: 0; line-height: 30px; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; -ms-touch-action: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 210px; z-index: -1; } .datepicker-container::before, .datepicker-container::after { border: 5px solid transparent; content: " "; display: block; height: 0; position: absolute; width: 0; } .datepicker-dropdown { border: 1px solid #ccc; -webkit-box-shadow: 0 3px 6px #ccc; box-shadow: 0 3px 6px #ccc; -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; z-index: 1; } .datepicker-inline { position: static; } .datepicker-top-left, .datepicker-top-right { border-top-color: #39f; } .datepicker-top-left::before, .datepicker-top-left::after, .datepicker-top-right::before, .datepicker-top-right::after { border-top: 0; left: 10px; top: -5px; } .datepicker-top-left::before, .datepicker-top-right::before { border-bottom-color: #39f; } .datepicker-top-left::after, .datepicker-top-right::after { border-bottom-color: #fff; top: -4px; } .datepicker-bottom-left, .datepicker-bottom-right { border-bottom-color: #39f; } .datepicker-bottom-left::before, .datepicker-bottom-left::after, .datepicker-bottom-right::before, .datepicker-bottom-right::after { border-bottom: 0; bottom: -5px; left: 10px; } .datepicker-bottom-left::before, .datepicker-bottom-right::before { border-top-color: #39f; } .datepicker-bottom-left::after, .datepicker-bottom-right::after { border-top-color: #fff; bottom: -4px; } .datepicker-top-right::before, .datepicker-top-right::after, .datepicker-bottom-right::before, .datepicker-bottom-right::after { left: auto; right: 10px; } .datepicker-panel > ul { margin: 0; padding: 0; width: 102%; } .datepicker-panel > ul::before, .datepicker-panel > ul::after { content: " "; display: table; } .datepicker-panel > ul::after { clear: both; } .datepicker-panel > ul > li { background-color: #fff; cursor: pointer; float: left; height: 30px; list-style: none; margin: 0; padding: 0; text-align: center; width: 30px; } .datepicker-panel > ul > li:hover { background-color: #e5f2ff; } .datepicker-panel > ul > li.muted, .datepicker-panel > ul > li.muted:hover { color: #999; } .datepicker-panel > ul > li.highlighted { background-color: #e5f2ff; } .datepicker-panel > ul > li.highlighted:hover { background-color: #cce5ff; } .datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover { color: #39f; } .datepicker-panel > ul > li.disabled, .datepicker-panel > ul > li.disabled:hover { background-color: #fff; color: #ccc; cursor: default; } .datepicker-panel > ul > li.disabled.highlighted, .datepicker-panel > ul > li.disabled:hover.highlighted { background-color: #e5f2ff; } .datepicker-panel > ul > li[data-view="years prev"], .datepicker-panel > ul > li[data-view="year prev"], .datepicker-panel > ul > li[data-view="month prev"], .datepicker-panel > ul > li[data-view="years next"], .datepicker-panel > ul > li[data-view="year next"], .datepicker-panel > ul > li[data-view="month next"], .datepicker-panel > ul > li[data-view="next"] { font-size: 18px; } .datepicker-panel > ul > li[data-view="years current"], .datepicker-panel > ul > li[data-view="year current"], .datepicker-panel > ul > li[data-view="month current"] { width: 150px; } .datepicker-panel > ul[data-view="years"] > li, .datepicker-panel > ul[data-view="months"] > li { height: 52.5px; line-height: 52.5px; width: 52.5px; } .datepicker-panel > ul[data-view="week"] > li, .datepicker-panel > ul[data-view="week"] > li:hover { background-color: #fff; cursor: default; } .datepicker-hide { display: none; }