/****** 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; margin-bottom:20px; } 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; padding:60px 0; display: block; position: relative; min-width: 777px; background: -moz-linear-gradient(top, rgba(254,240,228,1) 0%, rgba(255,255,255,0) 25%); background: -webkit-linear-gradient(top, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%); background: linear-gradient(to bottom, rgba(254,240,228,1) 0%,rgba(255,255,255,0) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', endColorstr='#00ffffff',GradientType=0 ); } .product-detail .row.content { margin-top:118px; padding-top:35px; } .row::before { width:120px; height:20px; background: #a24033; display: block; content: ""; position: absolute; top: -10px; left: 0; z-index:10001; } .row::after { width:120px; height:20px; background: #a24033; display: block; content: ""; position: absolute; top: -10px; right: 0; z-index:10001; } .col-777 { max-width:777px; margin:0 auto; } .col-1040 { max-width:1040px; margin:0 auto; } .col-1055 { max-width: 1055px; margin:0 auto; } .col-1-3 { width:36%; float:left; position: relative; } .col-2-3 { width:62%; margin-right:20px; float:left; position: relative; } .col-1-4 { width:22%; margin-right:20px; float:left; position: relative; min-height: 250px; } .col-1-4-fixed { width:245px; margin-right:20px; float:left; position: relative; min-height: 250px; } .col-1-4-fixed:nth-child(4) { margin-right:0; } .col-1-5 { width:20%; float:left; position: relative; } /****** 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; } /****** SEARCHBAR ******/ .searchbar { position:fixed; top:65px; width:100%; padding:6px 0; background: rgba(252, 212, 177, 0.7); z-index:10000; } .searchbar form { margin:0; } .searchbar .searchfield { width:390px; position: relative; float:left; } .searchbar .searchfield input[type="text"] { border:2px #a14032 solid; border-radius: 7px; font-size:100%; padding:6px 40px 6px 10px; color:#002b3e; width: 100%; margin:4px; } .searchbar .searchfield input[type="text"]:focus { border:3px #a14032 solid; outline:none; margin:3px; } .searchbar button { position: absolute; color:#a14032; top:4px; right:-3px; border:0; font-size: 140%; cursor: pointer; padding:7px 10px 6px 10px; background: transparent; border-bottom-right-radius: 6px; border-top-right-radius: 7px; border-left:1px #a14032 solid; } .searchbar button:hover { color:#fff; background:#a14032; } .searchbar select { position: relative; display: block; border:2px #a14032 solid; background: #fff; width: 120px; padding: 5px; font-size: 100%; line-height: 1; border-radius: 7px; height: 32px; -webkit-appearance: none; float: left; margin: 4px 10px 4px 0; } .searchbar select:last-of-type { margin-right: 0; } .searchbar select:focus { outline:none; } .searchbar 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; } .searchbar .search-filter-important { width:auto; float:right; } /****** 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: 7px; 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: 7px; 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 Variante 3 ******/ .search-results-variante3-item { position: absolute; top:0; left: 0; width: 100%; z-index:999; } .search-results-variante3-item:hover { top:-10px; left: -16px; width:278px; z-index:1000; border:1px #002b3e solid; border-radius: 7px; -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-variante3-item .search-results-variante3-item-img { border-top-left-radius: 7px; border-top-right-radius: 7px; } .search-results-variante3-item .search-results-variante3-item-img img { -webkit-clip-path: inset(33px 0 33px 0); clip-path: inset(33px 0 33px 0); width:245px; margin:-33px 0; } .search-results-variante3-item:hover .search-results-variante3-item-img img { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); width:278px; margin:0 0; border-top-left-radius: 6px; border-top-right-radius: 6px; } .search-results-variante3-item .search-results-variante3-item-info { background: #fef0e4; padding:10px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; } .search-results-variante3-item:hover .search-results-variante3-item-info { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .search-results-variante3-item .search-results-variante3-item-info h2 { margin:0; padding:0; } .search-results-variante3-item .search-results-variante3-item-description { display:none; margin:0; } .search-results-variante3-item:hover .search-results-variante3-item-description { display:block; } .search-results-variante3-item .search-results-variante3-item-meta { padding: 5px; background:#fff; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; font-size: 11px; } .search-results-variante3-item:hover .search-results-variante3-item-meta { padding: 5px 10px; } .search-results-variante3-item .search-results-variante3-item-meta p { margin:0; } .search-results-variante3-item .search-results-variante3-item-meta ul { margin:0; padding:0; width:180px; } .search-results-variante3-item .search-results-variante3-item-meta li { list-style: none; margin:0; padding:2px 11px; float:left; border-right:1px #002b3e solid; height:16px; } .search-results-variante3-item .search-results-variante3-item-meta li { } .search-results-variante3-item .search-results-variante3-item-meta li.cert svg { width: 16px; } .search-results-variante3-item .search-results-variante3-item-meta li.din svg { margin-top:-2px; width: 20px; } .search-results-variante3-item .search-results-variante3-item-meta li svg path { fill: #296178 !important; } .search-results-variante3-item:hover .search-results-variante3-item-meta li { padding:2px 11px; } .search-results-variante3-item .search-results-variante3-item-meta li i { font-size:13px; color:#296178; } .search-results-variante3-item .search-results-variante3-item-meta li:first-child { padding-left:0; } .search-results-variante3-item .search-results-variante3-item-meta li:last-child { border-right:0; padding-right:0; } .search-results-variante3-item:hover .search-results-variante3-item-meta li:last-child { padding-left:10px; } .search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl { width:180px; float:left; margin-bottom:6px; } .search-results-variante3-item:hover .search-results-variante3-item-meta .search-results-variante3-item-meta-compl { width:205px; } .search-results-variante3-item .search-results-variante3-item-meta-status { width:35px; padding:0 0 3px 5px; float:right; border-left:1px #002b3e solid; text-align: center; } .search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl-bar { background:#c9d7dd; width:100%; height:7px; } .search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-compl-bar span { background:#296178; height:7px; display: block; } .search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date { display:none; margin-top:3px; } .search-results-variante3-item:hover .search-results-variante3-item-meta .search-results-variante3-item-meta-date { display:block; } .search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released { float:right; } .search-results-variante3 .search-results-variante3-item-meta-status svg { transform: rotate(-90deg); stroke-dasharray: 251; /* (2PI * 40px) */ stroke-dashoffset: 251; animation: offsettozero 1s linear forwards; } @keyframes offsettozero { to { stroke-dashoffset: 200; } } /****** PRODUCT DETAIL PAGE ******/ .product-detail .row img.product-img { width: 100%; border-radius: 7px; } .product-detail table.product-meta { width: 100%; background:#fef0e4; padding:20px; position: relative; border-radius: 7px; } .product-detail table.product-meta a { color:#db513d; } .product-detail table.product-meta th { text-align: left; padding:10px 0 0 0; } .product-detail table.product-meta td { vertical-align: top; } .product-detail table.product-meta h3 { font-weight:normal; font-size: 11px; border-top:1px #296178 solid; margin:0; display: block; } .product-detail table.product-meta h3:first-child { margin-top:0; } .product-detail table.product-meta ul { padding:0 0 0 20px; margin:-3px 0 0 0; } .product-detail table.product-meta li { list-style-type: circle; } .product-detail table.product-meta svg { transform: rotate(-90deg); stroke-dasharray: 502; /* (2PI * 40px) */ stroke-dashoffset: 502; animation: offsettozero 1s linear forwards; } .product-detail table.product-meta @keyframes offsettozero { to { stroke-dashoffset: 180; } } /****** ELEMENTS ******/ .profile-completed { width:100%; } .profile-completed p { width:auto; float:right; margin:0; color:#db513d; } .profile-completed-bar { display: block; background:#c9d7dd; width:86%; height:20px; float:left; } .profile-completed-bar span { background:#296178; height:20px; display: block; }