/****** GENERAL ******/ body { margin:0; font-family: 'Open Sans', sans-serif; color:#002b3e; font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-weight: 900; line-height: 22px; } h1 { font-size: 18px; font-weight : bolder; color:#296178; border-bottom: 1px #a14032 solid; display:inline-block; } h2 { font-size: 100%; margin-bottom:-14px; font-weight: bold; } p { line-height: 22px; margin:18px 0; } a { color:#000; text-decoration: none; } a:hover { color: green; } .clearer { clear: both; height:0; line-height: 0; margin:0; padding:0; } .red { color: #db513d; } .row { clear: both; background: #fff; padding:60px 0; display: block; position: relative; min-width: 777px; } .row:nth-child(2n) { background: #fef0e4; } .row::before { width:120px; height:20px; background: #a24033; display: block; content: ""; position: absolute; top: -10px; left: 0; } .row::after { width:120px; height:20px; background: #a24033; display: block; content: ""; position: absolute; top: -10px; right: 0; } .col-777 { max-width:777px; margin:0 auto; } .col-1055 { max-width: 1055px; margin:0 auto; } .col-1-4 { width:22%; margin-right:20px; float:left; position: relative; min-height: 250px; } .col-1-5 { width:20%; float:left; position: relative; } /****** HEADER ******/ .header { background:#86bc24; margin:0; padding:5px; } .header .header-content { max-width:1024px; margin:0 auto; height:72px; } .header .header-content img { float:left; display: block; } .header .search { width:500px; margin:12px 0 0 12px; float:left; box-sizing: border-box; border-radius: 3px; display: block; position: relative; height: 2.8em; background-color: #fff; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 2px 3px rgba(0,0,0,0.06); } .header .search input.search-input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(0,0,0,0); font-size: 1.1em; font-weight: normal; color: #333; display: block; width: 100%; background: #fff; outline: none; border: none; padding: 4px; position: relative; height: 44px; } .header .search:hover button#submitButton { background:#A3C762; color:#fff; } .header .search:hover input#search-form-input-clear, .header .search search-input:focus input#search-form-input-clear { opacity: 1; } .header .search input#search-form-input-clear { position: absolute; top:5px; right:10px; background: transparent; outline: none; border: none; font-size:22px; opacity: 0; cursor: pointer; } .header .search button#submitButton { position: absolute; top:-1px; right:-48px; border-radius: 0 2px 2px 0; min-width: 26px; color: #999; font-size: 1.25em; padding: 0 .64em; height: 45px; line-height: 1.5; background-color: #fff; background-position: 50% 50%; background-repeat: no-repeat; -webkit-font-smoothing: subpixel-antialiased; cursor: pointer; } /****** HEADER BLACK ******/ .header-black { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10000; } .header-black ul { max-width:900px; margin:0 auto; } .header-black li { list-style: none; float:left; margin:0; } .header-black li a { color:#fcd4b1; font-size: 110%; padding:20px 15px 20px 15px; display: block; } .header-black li a:hover { background: #296178; } /****** FILTER HORIZONTAL ******/ .filter { background:#a24033; background: rgba(162, 64, 51, 0.7); margin:0; z-index:10000; } .filter.fixed { position: fixed; top:65px; } .filter.scroll { position: relative; top:0; } .filter .filter-content { max-width:1024px; margin:0 auto; color:#fff; } .filter .filter-content div { cursor: pointer; position: relative; border-right:1px #fff solid; } .filter .filter-content div.filter-category, .filter .filter-content div.filter-category ul { width:320px; float:left; } .filter .filter-content div.filter-release, .filter .filter-content div.filter-release ul { width:180px; float:left; } .filter .filter-content div div.filter-title, .filter .filter-content div ul.filter-selection li a { padding:5px 10px; } .filter .filter-content div div.filter-title .fa-angle-down { float:right; margin-top:5px; } .filter .filter-content div ul.filter-selection { position: absolute; top:29px; left:0; z-index:1001; margin:0; float:none; padding:0; } .filter .filter-content div ul.filter-selection li { background: rgba(162, 64, 51, 0.7); padding:5px 10px; list-style-type: none; display:none; position: relative; } .filter .filter-content div ul.filter-selection li.selected, .filter .filter-content .filter-category:hover ul.filter-selection li, .filter .filter-content .filter-release:hover ul.filter-selection li { display: block; } .filter .filter-content div ul.filter-selection li a { color:#fff; float:none; } .filter .filter-content div ul.filter-selection li:hover { color:#fff; background: rgba(162, 64, 51, 0.7); } .filter .filter-content div ul.filter-selection li.selected, .filter .filter-content div ul.filter-selection li.selected a, .filter .filter-content div ul.filter-selection li.selected a:hover { color:#BFFF4A; } /****** FILTER VERTIKAL ******/ .filter-vert { position:absolute; top:80px; left:20px; width:180px; min-height:400px; } .filter-vert h2 { background:#296178; color:#fff; font-size: 100%; margin:3px -10px; padding: 0 10px; } .filter-vert h3 { font-size: 100%; margin:0; cursor: pointer; } .filter-vert #accordion div, .filter-vert p { margin:0; } .filter-vert #accordion div { padding-left:15px; } /****** BANNER ******/ .banner { background: url(img/backgroun01.jpg) 0 0 no-repeat; padding: 100px 0 40px 0; } .banner img { width:392px; display: block; margin: 0 auto; } /****** HEADLINE ******/ .headline { text-align: center; font-family: 'Lora', serif; font-style: italic; font-size: 150%; line-height: 150%; } .headline p { line-height: 140%; } .headline form { position: relative; width:550px; margin:20px auto 40px auto; } .headline input.search-field-content { border:2px #a14032 solid; border-radius: 8px; font-size:100%; padding:10px 40px 10px 10px; color:#002b3e; width: 100%; margin:2px; } .headline input.search-field-content:focus { border:3px #a14032 solid; outline:none; margin:1px; } .headline .search-filter-quick { display: none; } .headline button { position: absolute; color:#a14032; top:0; right:0; border:0; font-size: 140%; cursor: pointer; padding:9px 9px 9px 11px; margin: 2px 0 0 0; background: transparent; border-bottom-right-radius: 8px; border-top-right-radius: 8px; } .headline button:hover { color:#fff; background:#a14032; } .search-filter-quick { text-align: left; padding:0 20px; } .search-filter-quick a { font-family: 'Open Sans', sans-serif; font-style: normal; color:#a14032; font-size: 70%; } .search-filter-quick a:last-of-type { float: right; } .headline select { position: relative; display: block; border:2px #a14032 solid; background: transparent; width: 150px; padding: 5px; font-size: 100%; line-height: 1; border-radius: 8px; height: 45px; -webkit-appearance: none; float: left; margin: 3px 30px 0 0; } .headline select:last-of-type { margin-right: 0; } .headline select:focus { outline:none; } .headline select::after { content:"\f0dc"; font-family: FontAwesome; color: #000; padding: 12px 8px; position: absolute; right: 0; top: 0; background: red; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; } /****** FOOTER ******/ .footer { background: url(img/backgroun02.jpg) 0 0 no-repeat; padding:60px 0; } .footer h3 { color:#fff; margin: 4px 0; } .footer a { color:#fcd4b1; } .footer a:hover { color:#a14032; } .footer ul { padding:0; margin: 0; } .footer li { list-style-type: none; padding: 2px 0; margin: 0; } /****** IMPRINT ******/ .imprint { background: #000; text-align: center; color:#fcd4b1; padding:10px 0; } .imprint a { color:#fcd4b1; } .imprint a:hover { color:#a14032; } .imprint img { margin:0 10px -3px 0; } /****** SEARCH RESULTS Anton ******/ .search-results-anton-item { width:100%; display: block; position: relative; } .search-results-anton-item:hover { border:1px #a14032 solid; -webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); } .search-results-anton-item h2 { position: absolute; top: 7px; left: 42px; margin:0; z-index: 1001; width:60%; } .search-results-anton-item h2 span { background:#fff; display:inline; padding:2px 5px; } .search-results-anton-item:hover h2 { top:175px; left: 5px; width:98%; } .search-results-anton-item { clip-path: inset(0 15% 0 15%); z-index: 999; margin-left: -20%; width:140%; } .search-results-anton-item:hover { position: absolute; top:-10px; clip-path: inset(0 0 0 0); z-index: 1000; border:1px #a14032 solid; -webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); transition: all 0.1s ease; } .search-results-anton-item .search-results-anton-item-info { background: #fef0e4; padding:0 10px; display: none; } .search-results-anton-item:hover .search-results-anton-item-info { display: block; } .search-results-anton-item .search-results-anton-item-info-tags { background: #fcd4b1; margin: 0 -10px; padding:10px; } /****** SEARCH RESULTS BMEN ******/ .search-results-bmen { max-width: 1024px; margin: 40px auto; } .search-results-bmen .search-results-bmen-grid { width:25%; float:left; position: relative; display: block; min-height: 350px; margin:20px 0; } .search-results-bmen .search-results-bmen-item { width: 90%; position: relative; } .search-results-bmen .search-results-bmen-item img { width:100%; } .search-results-bmen .search-results-bmen-item h3 { margin:4 0; } .search-results-bmen .search-results-bmen-item .language img { width:32px; margin-top:-3px; } .search-results-bmen .search-results-bmen-item .meta-infos div { float:left; margin:0 5px; } .search-results-bmen .search-results-bmen-item .recerpt { clear:both; } .search-results-bmen .search-results-bmen-item .short-infos { position: absolute; top:0; right:10px; padding:15px 20px 15px 50px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(255,255,255,0.31) 19%, rgba(255,255,255,0.65) 40%); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(255,255,255,0.31) 19%,rgba(255,255,255,0.65) 40%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.31) 19%,rgba(255,255,255,0.65) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6ffffff',GradientType=1 ); } .search-results-bmen .search-results-bmen-item .recerpt { display: none; } .search-results-bmen .search-results-bmen-item .short-infos { opacity:0; } .search-results-bmen .search-results-bmen-item .short-infos ul { padding:0; display: inline; } .search-results-bmen .search-results-bmen-item .short-infos li { margin: 10px -50px 10px 0; opacity: 0; padding:0; list-style-type: none; font-size: 140%; } .search-results-bmen .search-results-bmen-item:hover { width: 120%; position: absolute; top:-20px; left:-55px; cursor: pointer; z-index: 1000; padding:20px; background: #fff; border: 1px #999999 solid; border-radius: 10px; -webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75); } .search-results-bmen .search-results-bmen-item:hover .recerpt { display: block; } .search-results-bmen .search-results-bmen-item:hover .short-infos { opacity: 1; } .search-results-bmen .search-results-bmen-item:hover .short-infos li { opacity: 1; margin-right:0; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } /** https://codepen.io/chrisota/pen/rpaLw *, *:before, *:after { box-sizing: border-box; } .row{ background: #fff; padding: 20px; position: relative; margin: 0 0 1px 0; &:hover{ cursor: pointer; } &.selected{ background: #f3f3f3; } } label { cursor: pointer; &:before{ display: inline-block; content: "+"; margin: 0 10px 0 0; width: 35px; height: 35px; border: 3px solid $color; border-radius: 100%; vertical-align: middle; color: $color; font-size: 30px; text-align: center; font-weight: 700; line-height: 0.9em; transition: transform 0.2s ease-in-out; } } input[type=checkbox]:checked + label:before{ background: $color; color: #fff; transform:rotate(135deg); transform-origin: center center; } input[type=checkbox] { visibility: hidden; } */