/* /////////////////// FORMAT BASIC LAYOUT ////////////////// */ html { font-family: 'Quattrocento', serif; font-size:0.890em; font-weight:300; letter-spacing:0.022em; } .container { max-width:1280px; } /* NAVIGATION */ nav { font-family: 'Quattrocento', serif; font-size:108%; margin-bottom:32px; width:100%;} nav .container ul { padding:6px 0 7px 0; display:block !important; text-align:center !important; width:100%; } nav .container ul li { text-align:center; display:inline-block; border-left: 6px solid rgba(0,0,0,0); border-right: 6px solid rgba(0,0,0,0); } nav .container ul li.actual { border-left: 6px solid rgba(255,0,0,1); } nav .container ul li a { padding:0px 12px 0px 10px; text-transform:uppercase; line-height:0.9em; } nav .container ul li.actual a { opacity:1; } .tausendvierundzwanzig { display:block; width:100%; text-align:center !important;} nav ul li ul div.tausendvierundzwanzig { padding:0px 0px; } /* HEADER */ header { font-family: 'Nixie One', cursive; font-size:124%; } header .container { background-repeat:no-repeat; background-position:center; padding-top:118px; margin-top:0px; background-size:122px; text-align:center; margin-bottom:12px; } header .container span { opacity:0; font-size:90%; min-width:30px; display:inline-block;} header .container:after { content:""; display:block; margin:16px auto 4px auto; height:1px; width:100%; max-width:1280px; } /* Start ZOOM mod */ header#scrollZoom { font-size:190%; } header#scrollZoom .container { padding-top:240px; background-size:220px; background-position:center 65%; margin-bottom:24px; } header#scrollZoom, header#scrollZoom .container { -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; } header#scrollZoom.regular { font-size:124%; } header#scrollZoom.regular .container { padding-top:118px; background-size:122px; margin-bottom:12px; } /* MAIN */ main { padding-bottom:90px; } main .container { padding-top:1px; overflow:hidden !important; min-height:400px; min-height:62vh; height:auto; padding-bottom: 36px; } /* Höhe Definieren für Aufklappfenster */ main.Home .container { max-height:1280px; } /* Aufklappanaimation: */ main.Home .container.open { -webkit-animation-name: openUp; -webkit-animation-duration: 1.67s; -webkit-animation-delay: 0.76s; -moz-animation-name: openUp; -moz-animation-duration: 1.67s; -moz-animation-delay: 0.76s; -o-animation-name: openUp; -o-animation-duration: 1.67s; -o-animation-delay: 0.76s; animation-name: openUp; animation-duration: 1.67s; animation-delay: 0.76s; max-height:1280px; } main.Home .container.open.fixheight { -webkit-animation-name: none !important; -webkit-animation-duration: 0s; -webkit-animation-delay: 0s; -moz-animation-name: none !important; -moz-animation-duration: 0s; -moz-animation-delay: 0s; -o-animation-name: none !important; -o-animation-duration: 0s; -o-animation-delay: 0s; animation-name:none !important;animation-duration: 0s;animation-delay: 0s; max-height:none !important; height:auto !important; } @-webkit-keyframes openUp { 0%{max-height:1280px} 100%{max-height:2650px} } @-moz-keyframes openUp { 0%{max-height:1280px} 100%{max-height:2650px} } @-o-keyframes openUp { 0%{max-height:1280px} 100%{max-height:2650px} } @keyframes openUp { 0%{max-height:1280px} 100%{max-height:2650px} } main.Home .container.open.endheight { max-height:none !important; height:auto !important; min-height:2650 !important;} main .container.open div#seemore { /* background-image: url(pic/simpleloading.gif); */ background-image: url(../../../default.svg); background-position:center; background-repeat:no-repeat; background-color:rgba(255,255,255,0.90); opacity:1; overflow:hidden; color:rgba(255,255,255,0.00) !important; background-size:128px !important; } main .container.open.endheight div#seemore { display:none; width:0px !important; height:0px !important; padding:0px !important; overflow:hidden !important;} footer { font-size:90%; margin-top:40px; } footer .container { min-height:9.2vh; /* border-top:solid rgba(220,190,36,1) 0.67px; */ padding-top:8px; padding-bottom: 67px; } footer ul.footermainnav { float:left; font-size:112%; } ul.breadcrumb { width:100%; text-align:left; display:block; margin-bottom:12px; margin-top:-38px; } ul.breadcrumb li a { border-bottom:rgba(0,0,0,0) 0.67px solid; font-size:85%; } ul.breadcrumb li a:hover { border-bottom:rgba(220,190,36,0.33) 0.67px solid; } nav a.actual, footer ul li a.actual { opacity:0.57; } h1, h2, h3, h4, h5, h6, h7, h8, h9, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a, h8 a, h9 a { font-weight:300; } /* /////////////////// FORMAT CONTENT ////////////////// */ /* Zeilen von Startseite */ /* FLEX CONTAINER */ div.products, div.blogposts, div.images { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-around; align-items:flex-end; position:relative; } /* FLEX ITEMS */ div.product, article.blogpost, div.image { flex-grow:1; flex-shrink:1; flex-basis:auto; align-self:flex-end; flex-wrap: nowrap; } /* Container */ div.products, div.blogposts, div.images { width:100%; z-index:10; padding:12px 1.25%; margin:0px; border-top:1px solid rgba(0,0,0,0.33); } div.products.flexbox:nth-child(3) { border-top:0px; } /* Items (auch container) */ div.product, article.blogpost, div.image { display: inline-block; margin: 12px auto; position: relative !important; z-index: 10; box-sizing: border-box; padding: 0px 6px; } div.images > div.image { margin: 5px 5px 5px 5px; } /* PRODUCTS */ div.product img, div.product div { position:relative; margin:auto; } div.product img { display:block; max-width:100%; width:auto; min-height:240px; /* was max-height */ min-width:400px !important; } div.product > div { display:flex; width:98%; margin-left:1%; padding:0px 9px; margin-top:16px; border-left: 2px solid rgba(0,0,0,0.20); border-bottom: 1px solid rgba(0,0,0,0.33); -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.15); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.15); height:82px; overflow:hidden; } a div.product > div { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } a:hover div.product > div { -webkit-box-shadow: 1px 1px 7px 0 rgba(0,0,0,0.70); box-shadow: 1px 1px 7px 0 rgba(0,0,0,0.70); } div.product > div span, div.product > div p { display:inline-block; margin-bottom:5px; line-height:normal; float:left; } /* Box mit Preisen: */ div.product > div span { font-weight: bold; min-width: 80px; min-height:67px; padding: 2px 12px 4px 5px; margin-top:10px; border-left: 2px solid rgba(0,0,0,0.20); border-bottom: 1px solid rgba(0,0,0,0.33); -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.23); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.23); -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } /* Preis */ div.product > div p { float:right; margin-top:17px; margin-left:7px; } /* Name */ div.product > div p h7 { font-weight:bold; } /* Need javascript - deactivated */ div.product > div span.flip { animation-name:fliparound; animation-duration:333ms; } @keyframes fliparound { 0% {transform:scaleY(1);} 50% {transform:scaleY(0.15); background:rgba(0,0,0,0);} 100% {transform:scaleY(1);} } /* Gedrehte Spans */ div.product > div span > .durchgestrichen, .durchgestrichen { text-decoration:line-through !important; font-size:90% !important; } div.product > div span > .sale { background-color: transparent !important; } small { font-size: 76%; } strong { font-size: 150%; font-weight:bold; } /* BLOG Vorschau */ article.blogpost { padding:12px; align-self:flex-start; height:310px; overflow:hidden;} article.blogpost.Full header { position:relative; margin:auto 0%; width:100%; padding:12px; overflow:hidden; } article.blogpost header { position:relative; margin:auto 0%; width:100%; padding:2px 12px; overflow:hidden; } article.blogpost p { position:relative; margin:auto 2.5%; width:60%; padding:12px; overflow:hidden; float:left; } article.blogpost img { position:relative; margin:auto 4px auto 12px; max-width:30%; overflow:hidden; float:left; max-height:360px; margin-top:12px } article.blogpost header h1, article.blogpost header h2, article.blogpost header span { display:inline-block; width:100%; } article.blogpost header h1, article.blogpost header h2 { font-size:125%; font-weight:bold; margin-bottom:12px; hyphens:auto !important; } article.blogpost header h2 { font-size:125%; font-weight:bold; margin-bottom:0px; hyphens:auto !important; } article.blogpost header span { font-size:10px; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align:right; padding-top:4px; border-top:rgba(85,85,85,1.00) 1px solid; } article.blogpost p { text-align:justify; text-align:left; display:block; overflow:hidden; font-size:1.1rem !important; z-index:10; } article.blogpost div { position:absolute; width:100%; padding:12px 0px 12px 0px; bottom:0px; right:-4%; z-index:999999999999; } article.blogpost div { display:inline-block; text-align:center; margin-top:8px; margin-right:4%; text-transform:uppercase; font-size:130%; } article.blogpost div:hover { cursor:pointer; } /* UPDATE */ article.blogpost header h2 { color:rgba(255,255,255,1.00) !important; background:rgb(28,28,28); display:inline-block; padding: 4px 36px 3px 8px; width:auto; } article.blogpost:hover header h2 { background: rgb(0,0,0); } /* IMAGES */ div.image { align-self: stretch; text-align:center; margin-bottom:12px;} div.image img { max-height: 92px; height:100%; height:auto; } div#seemore { display: block; width: 100%; text-align: center; padding-top: 24px; padding-bottom: 72px; font-size: 21px; text-transform: uppercase; background-repeat: no-repeat; background-position: center bottom; position: absolute; bottom: 0px; z-index: 101; min-height: 128px; box-sizing: border-box; background-color: rgba(255,255,255,0.9); background-image: url(pic/arrow3.svg); background-size: 180px; border-top: 2px solid rgba(0,0,0,0.65); } div#seemore:hover { cursor:pointer; background-color: white; } /* BLOGPAGE */ article.blogpost.Full { height:auto; display:block; position:relative; float:left; width:96%; margin-left:1.75%; margin-bottom:12px; max-height: 860px !important; } article.blogpost.Full:after { content:''; display:block; position: absolute; width:96%; bottom:10px; height:1px !important; } article.blogpost.Full p { font-size:112%; line-height:normal; margin-bottom:28px; max-height:570px !important; /*war 300*/} article.blogpost.Full img { margin-top:12px; border:solid 1px rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.25); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.25); margin-bottom:4px; } article.blogpost.Full:nth-child(even) p { float:left; } article.blogpost.Full:nth-child(even) img { float:right; } article.blogpost.Full:nth-child(odd) p { float:right; } article.blogpost.Full:nth-child(odd) img { float:left; } div.halfBlog { position:relative; display:block; float:left; width:50%; } article.locationPage.Full { height:auto; display:block; position:relative; float:left; width:96%; margin-left:2%; margin-bottom:12px; } article.locationPage.Full span.location { display: block; float: left; width: auto; height: 480px; position: relative; margin-left: 2%; margin-top: 10px; font-size: 1.25rem; line-height: 1.45; } div.contentHolder p.innerP { display: inline-block; width: 100%; margin-bottom: 58px; padding-bottom: 9px; padding-top: 2px; max-width: 620px; box-sizing: border-box; float: left; clear: both; font-size: 1.2rem !important; line-height: 1.67rem !important; background: rgba(243,243,243,0.00) !important; } article.locationPage.Full figure { display:block; max-width:700px; width:80%; min-width:200px; margin:2%; float:left; height:492px; border: solid 6px rgba(73,73,73,1.00); } #googleMapFrame { display:block; width:100%; height:480px; margin:0px; } /* SHOPPAGE */ article.blogpost.Full.shop { width:46.5%; min-height: 360px;} article.blogpost.Full.shop.SingleItem { width: 96.5%; min-height: 480px; max-height: none !important;} article.blogpost.Full.shop p { font-size: 100%; line-height: 1.45; font-size: 1.1rem !important; font-weight: 400; } article.blogpost.Full.shop.SingleItem p { height:auto !important; max-height: 49vh !important; overflow-y: auto; } /* article.blogpost.Full.shop span.shopPrice { display:block; float:left; position:relative; width:100%; text-align:right; font-size:2rem; font-weight:bold; padding-top:7px; border-top:none; line-height:normal;} */ article.blogpost.Full.shop span.shopPrice { align-content: baseline; display: flex; float: left; position: relative; width: 100%; text-align: right; font-size: 1.75rem; font-weight: bold; border-top: none; box-sizing: border-box; line-height: normal; background: transparent; margin: 0px 0px 0px 0px; align-items: center; padding: 8px 12px 12px 4px; flex-direction: row; flex-wrap: wrap; border: 1px solid rgba(0,0,0,0.2); border-radius: 0px 8px 8px 8px !important; } article.blogpost.Full.shop span.shopPrice small { font-size: 100%; display: inline-flex; box-sizing: border-box; padding: 0px 8px; justify-content: flex-start; align-items: baseline; min-height: 28px; line-height: normal; } a.buyButton, article.blogpost.Full.shop span.shopPrice a { /* display:block; float:right; padding:4px 12px 4px 32px; margin-top:-7px; margin-left:24px; background-image:url(pic/tasche-b.svg); font-weight:100; background-position:left center; background-repeat:no-repeat; font-size:90%; color:rgba(0,0,0,0.76) !important; background-color:rgba(255,255,255,1.00) !important; background-size:contain; border:rgba(0,0,0,0.45) 1px solid; */ display: block; padding: 8px 16px 7px 44px; margin-top: 4px; background-position: 8px center; background-repeat: no-repeat; font-size: 1.35rem; color: white; background-color: black; border: 0px; line-height: normal; font-weight: 400; background-size: 2rem; border-radius: 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'%3E%3Cpath d='M252.31-100Q222-100 201-121q-21-21-21-51.31v-455.38Q180-658 201-679q21-21 51.31-21H330v-10q0-62.15 43.92-106.08Q417.85-860 480-860t106.08 43.92Q630-772.15 630-710v10h77.69Q738-700 759-679q21 21 21 51.31v455.38Q780-142 759-121q-21 21-51.31 21H252.31Zm0-60h455.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-455.38q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H630v90q0 12.77-8.62 21.38Q612.77-520 600-520t-21.38-8.62Q570-537.23 570-550v-90H390v90q0 12.77-8.62 21.38Q372.77-520 360-520t-21.38-8.62Q330-537.23 330-550v-90h-77.69q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v455.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85ZM390-700h180v-10q0-37.61-26.19-63.81Q517.62-800 480-800q-37.62 0-63.81 26.19Q390-747.61 390-710v10ZM240-160v-480 480Z'/%3E%3C/svg%3E"); box-shadow: 0px 0px 6px 0px black; top: -36px; right: -7px; opacity: 0.65; box-sizing: border-box; margin-left: auto; } article.blogpost.Full.shop span.shopPrice a:hover { cursor: pointer; opacity:0.9; } article.blogpost.Full.shop span.shopPrice:hover a { opacity:0.9; background-color: seagreen; } article.blogpost.Full.shop span:nth-child(3), article.blogpost.Full.shop:after { display: none; } article.blogpost.Full.shop header { margin:auto 0%; width:100%; min-height:90px; } article.blogpost.Full.shop:nth-child(even) p { float:right;} article.blogpost.Full.shop:nth-child(even) img { float:left;} div.erased { opacity:0.33; } div.editItems { } div.editItem { display:block; float:left; position:relative; margin:12px 1.75%; width:96.5%; padding:12px 24px; } /* Form : Neues Produkt anlegen: */ div.editItem h1, div.editItem h2 { display:inline-block; float:left; width:100%; text-align:center; margin:0px 0px 6px 0px; line-height:1.67;} div.editItem h8 { display:inline-block; float:left; width:100%; text-align:center; margin:4px 0px 32px 0px; line-height:1.5;} div.editItem form { width:99%; position:relative; display:inline-block; float:left; margin-left: 0.5%; padding:22px; border-bottom:rgba(0,0,0,1.00) 2px solid} div.editItem form button[type='submit'] { width:256px; display:inline-block; float:right; font-size:140%; border:rgba(0,0,0,1.00) 2px solid; line-height:1.5; padding-top:12px;} div.editItem form input[type='text'] { font-size:145%; width:48%; float:left; display:inline-block; margin-bottom:12px; } div.editItem form input[type='text']:first-child { float:left; } div.editItem form input[type='checkbox']:nth-child(2) { float:right; } div.editItem form input[type='text']#price { float:left; border: solid 2px rgba(57,130,0,1.00);} div.editItem form input[type='text']#sale { float:right; border: solid 2px rgba(255,0,255,1);} div.editItem form input[type='text'].fullwidth { width:90%; } div.editItem form input[type='checkbox'] {float:left; width:24px; margin-right:2px; } div.editItem form span.checkbox { line-height:24px; padding-top:14px; margin-left:16px; display:block; float:right; font-size:150%; } div.editItem form textarea { width:100%; } div.editItems table { padding:12px 36px; } div.editItems table thead tr { border-bottom:18px rgb(24,24,24) solid; border-top:18px rgb(24,24,24) solid; } div.editItems table thead tr th { text-align:center; font-size:110%; font-weight:bold; } div.editItems table tbody tr { border-bottom:rgb(190,190,190) 2px solid; padding:12px 0px 12px 0px; } div.editItems table tbody tr td img { max-width:90%; } div.editItems table tbody tr.sold { background-image: url(pic/sold-01.svg); background-size:36px; } div.editItems table tbody tr td:nth-child(1) { width:10%; text-align:center;} div.editItems table tbody tr td:nth-child(2) { width:15%; } div.editItems table tbody tr td:nth-child(3) { width:20%; padding:12px; font-size:122%; font-weight:bold; text-align:center; } div.editItems table tbody tr td:nth-child(4) { width:25%; padding:12px; align-self:flex-start; } div.editItems table tbody tr td:nth-child(5) { width:10%; text-align:center; font-size:122%; font-weight:bold; } div.editItems table tbody tr td:nth-child(6) { width:10%; text-align:center; } div.editItems table tbody tr td:nth-child(6) form a, div.editItems table tbody tr td:nth-child(6) form input[type='submit'] { display:inline-block; width:90%; text-align:center; } div.editItems table tbody tr td:nth-child(6) form a { line-height:36px; } form.dropzone { display:block; float:left; width:90%; margin:5%; border-radius:4px; min-height:112px; border-top:1px rgba(255,255,255,1.00) solid; border-left:1px rgba(255,255,255,1.00) solid; border-right:1px rgba(0,0,0,0.30) solid; border-bottom:1px rgba(0,0,0,0.50) solid; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */ color: rgba(15,15,15,1.00); background:url(pic/folder.svg), #ffd65e; background:url(pic/folder.svg), -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); background:url(pic/folder.svg), -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); background:url(pic/folder.svg), linear-gradient(to bottom, #ffd65e 0%,#febf04 100%); background-size:100%; background-position:top; background-repeat:no-repeat; } .dropzone .dz-message { margin:24px 0; } div.monoDropzone { max-width:480px; display:block; margin:auto; height:320px; } div.monoDropzone form.dropzone { height:320px; } div.monoDropzone form.dropzone .dz-message { margin:140px 0; font-size:150%; } div.imgEdit { display:block; position:relative; float:left; width:30%; margin:1.5%; text-align:center; border-radius:12px; } div.imgEdit img { width:80%; margin:5% 10% 1% 10%; } div.imgEdit form { width:80%; margin:0px 10% 5% 10%; } div.imgEdit form a { display:block; width:98%; height:32px; text-align:center; color:rgba(255,255,255,1.00); background-color:rgba(0,59,197,1.00); line-height:32px;} form.admin, form.email { display:block; position:relative; margin:90px auto; width:100%; max-width: 670px; padding:32px 12px 12px 12px; text-align:center; border:rgba(0,0,0,0.33) solid 1px; background-position:center top; background-repeat:no-repeat; background-size:80px;} form.email input, form.email textarea, form.email button, form.admin input, form.email input:focus, form.admin input:focus { line-height:28px; font-size:120%; text-align:center; width:100%; } div.copyrightFooter { font-size:10px; position:absolute; right:0px; top:-24px; } section.imprint { width:90%; margin:12px 5%; padding:80px; display:inline-block; position:relative; font-size:125%; height:auto; max-height:none; } section.imprint:first-child { margin-top:67px; } section.imprint:last-child { margin-bottom:67px; } section.imprint table { font-size:120%; } section.imprint table tr td img { max-width:48px; max-height:48px; opacity:0.67; } section.imprint table tr td:first-child { width:56px; } section.imprint table tr { border-bottom:rgba(233,233,233,1.00) 1px solid; } section.imprint p { text-align:justify; } p.solo { display:inline-block; width:100%; text-align:center; padding:12px 0px; margin:0px; } div.shopButton { position:relative; margin:auto; display:block; height:auto; float:left; } div.newButton { position:absolute; right:12px; display:block; } div.shopButton, div.newButton { padding: 12px 32px; cursor: pointer; font-size: 1.2rem; border-radius: 3px; font-weight: 400; line-height: normal; box-shadow: 0px 0px 4px 0px black; text-transform: uppercase; word-spacing: 12px; padding-left: 20px; display: flex; align-content: center; justify-content: center; align-items: baseline; } span.shopPrice.sold > span { border-top:none !important;} /* Blogpost slider Mod wegen IE - geht noch nicht !!!! */ section#bslide-slides { height:420px !important; } section#bslide-slides div.bslide-slides-container { height:410px !important; } section#bslide-slides { display:block !important; position:relative !important; width:100% !important; } section#bslide-slides div.bslide-slides-container { display:inline-block !important; overflow:hidden !important; padding-top:30px !important} /* inline width ! */ section#bslide-slides div.bslide-slides-container div.bslide-slide.blogposts { display:block !important; position:relative !important; padding:0px 0px 0px 0px !important; text-align:center !important;} /* inline width ! */ section#bslide-slides div.bslide-slides-container div.bslide-slide article.blogpost { display:block !important; height:340px !important; width:40% !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide article.blogpost:nth-child(1) { margin:12px 2% 12px 8% !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide article.blogpost:nth-child(2) { margin:12px 8% 12px 2% !important; } /* ////// Responsive Design /////// */ @media only screen and (max-width: 1280px) { /* Im Shop Bereich --> Ein Artikel pro Zeile */ article.blogpost.Full.shop { width:96%;} /* No Slider-Funktion ab jetzt --> nur Zwei Blockbeiträge anzeigen */ section#bslide-slides { height:400px !important; } section#bslide-slides div.bslide-slides-container { height:360px !important; } section#bslide-slides { background-color:rgba(210,210,210,1.00) !important; display:block !important; position:relative !important; width:100% !important; } section#bslide-slides div.bslide-prev-next { display:none !important; visibility:hidden !important; width:0px !important; height:0px !important; overflow:hidden !important; opacity:0 !important; } section#bslide-slides div.bslide-slides-container { position:relative !important; display:block !important; width:100% !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide { display:none !important; width:0px !important; height: 0px !important; overflow:hidden !important; visibility:hidden !important;} section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) { display:block !important; width:98% !important; height: 320px !important; overflow:hidden !important; visibility:visible !important; position:relative !important; float:left !important; padding:0px 0px 0px 0px !important; margin:1% !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost { display:block !important;float:left !important;height:100% !important;min-height:300px !important;width:48% !important;margin:1% !important;} section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost div { bottom:9px; } } @media only screen and (max-width: 1200px) { div.image { max-width: 8vw !important; height: 5vw !important; overflow: hidden; } article.blogpost.Full.shop { width:96%;} } /* //// iPad Landscape : ONLY NAVI Größer --> besser für Touch //// */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 1040px) { html { font-size:0.85em; } main .container , footer .container { width:96%; } /* NAVIGATION */ nav { font-size:120%; } nav .container ul { padding:15px 0 11px 0; } nav .container ul li a { line-height:1em; } /* Set Content down */ div#page > header { margin-top:42px; } div.product img { max-height:320px; min-width:32px !important; min-height: auto; } div.product > div > p { text-align:left !important; text-wrap:normal !important; } div.blogposts { padding:12px 2.5% 12px 2.5%; } article.blogpost.Full.shop p { font-size:120%; } article.locationPage.Full figure { width:65%; height:408px; border: solid 4px rgba(73,73,73,1.00); } #googleMapFrame { height:400px; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost div { bottom:5px; } /* Lücke unter Button schliessen */ div.infopopup.open { width: 90vw !important; height: 80vh !important; top: 10vh !important; left: 5vw !important; box-shadow: 1px 1px 100px 12px rgba(0,0,0,0.8) !important; padding: 58px 16px 12px 16px !important; border-radius:7px !important; } div.infopopup.open > button { top: 2px !important; height: 47px !important; font-weight: lighter !important; padding: 0px 0px 3px 0px !important; border-radius: 5px !important; background: black !important; color: white !important; } div.infopopup.open > p > b { font-size: 1.1rem !important; } /* MOBILE Admin Article */ div.editItem { display: block; float: left; position: relative; margin: 1px 0%; width: 96.5%; padding: 6px 2px; } div.editItems table { padding: 3px 2px; max-width: 100% !important; } div.editItems table thead tr th:nth-child(1), div.editItems table tbody tr td:nth-child(1) { width: 75px !important; min-width: 75px !important; max-width: 75px !important; padding: 0px 0px !important; } div.editItems table thead tr th:nth-child(2), div.editItems table tbody tr td:nth-child(2) { width: 75px !important; min-width: 75px !important; max-width: 75px !important; padding: 0px 0px !important; } div.editItems table thead tr th:nth-child(3), div.editItems table tbody tr td:nth-child(3) { width: 75px !important; min-width: 75px !important; max-width: 75px !important; padding: 0px 0px !important; word-wrap: break-word; font-size: 13px; } div.editItems table thead tr th:nth-child(4), div.editItems table tbody tr td:nth-child(4) { width: 25%; width: 75px !important; min-width: 75px !important; max-width: 75px !important; padding: 0px 0px !important; word-wrap: break-word; font-size: 10px; display: none; } div.editItems table thead tr th:nth-child(5), div.editItems table tbody tr td:nth-child(5) { width: 10%; width: 60px !important; min-width: 60px !important; max-width: 60px !important; padding: 0px 0px !important; word-wrap: break-word; font-size: 15px; } div.editItems table thead tr th:nth-child(6), div.editItems table tbody tr td:nth-child(6) { width: 75px !important; min-width: 75px !important; max-width: 75px !important; padding: 0px 0px !important; word-wrap: break-word; font-size: 13px; } div.editItems table tbody tr td:nth-child(2) form.dropzone { width: 99%; margin: 0.5%; border-radius: 4px; min-height: 90px; padding: 0px 0px !important } } /* //// iPad Portrait //// */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 765px) { /* Start ZOOM mod */ header#scrollZoom { font-size:150%; } header#scrollZoom .container { padding-top:174px; background-size:178px; margin-bottom:2px; } header#scrollZoom.regular { font-size:110%; } header#scrollZoom.regular .container { padding-top:105px; background-size:96px; margin-bottom:2px; } /* Blog Section Home */ section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost:nth-child(1) { width:98% !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost:nth-child(2) { display:none !important; height:0px !important; min-height:0px !important; width:0px !important; margin:0px !important; overflow:hidden !important; visibility:hidden !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost { font-size:120%;} div#page > header { margin-top:0px; } nav { font-size:125% !important; } footer ul { float:left; clear:both; } header { font-size:120%; } header .container { margin-top:7px; background-size:102px; } header .container span { font-size:90%; min-width:28px; } div.products, div.images { padding:12px 2% 12px 2%; } div.product img { max-height:none; min-width:450px !important; max-width:530px; } div.product > div p { font-size:145%;} div.products { flex-direction: column; align-items: center; position: relative; width: 100%; box-sizing: border-box; padding: 0px 0px !important; } div.products > a { width:100%; box-sizing: border-box; } div.products div.product { align-items: center; position: relative; width: 100%; margin: 0px 0px; box-sizing: border-box; padding: 4px 4px !important; flex-direction: row !important; display: inline-flex !important; align-items: stretch; justify-content: space-between; } div.products div.product img, div.products div.product div { min-width: 45% !important; margin:0px 0px !important; } div.products div.product div { min-width: 55% !important; flex-direction: column; max-height: 400px; height: auto; padding: 2px 2px !important; border: 0px !important; border-left: 2px solid transparent !important; box-shadow: none; } div.products div.product div > span { padding: 7px 2px 4px 5px; margin-top: 2px; min-height: 24px; } div.products div.product div > p { min-height: 60px; background: transparent; width: 100%; margin: auto 0px 0px 0px; padding: 2px 0px 16px 2px; display: block; box-sizing: border-box; word-break: auto-phrase; word-wrap: break-word; line-height: 1; letter-spacing: 0.5px; } div.container > span > div.asideButtons > button { font-size: 12px !important; margin: 6px 0px 6px 8px !important; padding: 0px 8px 0px 22px !important; border: 1px solid rgba(255,255,255,0.25) !important; } footer { padding-bottom:80px; } nav .container ul li a { font-size:133%; line-height:1.5em;} article.locationPage.Full { width:98%; margin-left:1%; } article.locationPage.Full span.location { width:90%; height:auto; position:relative; margin-left:5%; margin-top:12px;} article.locationPage.Full figure { width:96%; margin:2%; height:244px; border: solid 2px rgba(73,73,73,1.00); } #googleMapFrame { height:240px; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost div { bottom:3px; } /* Lücke unter Button schliessen */ /* div.halfBlog { position:relative; display:block; float:left; width:100%; } */ article.blogpost p.blogsite, article.blogpost img.blogsite { width:90%; max-width:none; max-height:none;} div#page > header { margin-top: 0px; background-size: 1300px !important; } } /* //// iPhone Landscape //// */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 690px) { nav { font-size:115% !important; } main .container , footer .container { width:100%; } header { } header .container { padding-top:90px; margin-top:5px; background-size:92px; font-size:70%;} header .container span { font-size:100%; min-width:18px;} div.product img, div.product div { min-width:360px !important; max-width:390px; min-height: auto; } /*////////////////////////////////////////////////// OLD BROWSER FIXES ////////////////////////////////////////*/ .flexbox-fix.images { height:200px; } .flexitem-fix.product { width:97% !important; } .flexitem-fix.product img { max-height:360px !important; width:auto !important; min-width:24px !important;} .flexitem-fix.product > div { display:block !important; width:96% !important; margin-left:2% !important; max-width:none !important; } article.flexitem-fix.blogpost { width:90% !important; position:relative; margin:20px 5% 20px 5% !important; } article.flexitem-fix.blogpost:nth-child(2) { display:none; } } /* //// iPhone Portrait //// */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 420px) { div.product, article.blogpost, div.image { margin: 8px 0px; } nav { font-size:110% !important; } div#page > header { background-position: center 0px !important; } /* Start ZOOM mod */ header#scrollZoom { font-size:110%; } header#scrollZoom .container { padding-top:260px; background-size:160px; margin-bottom:2px; } header#scrollZoom.regular { font-size:110%; } header#scrollZoom.regular .container { padding-top:105px; background-size:82px; margin-bottom:2px; } footer .container ul, ul.footermainnav { display:block; width:100%; text-align:center; } ul.footermainnav li a { padding:13px 4px 12px 4px !important; } header { } header .container { padding-top:61px; margin-top:5px; background-size:55px; font-size:75%;} header .container span { font-size:50%; min-width:13px;} div.product img, div.product div { min-width:260px !important; max-width:100%; width:100%; } div.product img { width: 100% !important; max-width: 100%; min-height: 160px; } div.product > div > p > h7 { font-size:70% !important;} div.product > div > p { text-align:left !important; text-wrap:normal !important; } article.blogpost.Full { padding:0px !important; } article.blogpost.Full.shop header h1, article.blogpost.Full.shop header h2 { font-size:133%; } article.blogpost.Full.shop header span.shopPrice { padding-top:0px; } article.blogpost.Full.shop header span.shopPrice a { margin-top:2px; margin-left:0px; width:100%; display:inline-block; } article.blogpost.Full.shop img { width:93%; max-width:none !important; max-height:none !important;margin-top:2px; margin-bottom:10px;} article.blogpost.Full.shop p { width:95%; font-size:110%; } div#page main .container { background-color:rgba(224,224,224,1.00);} div.copyrightFooter { right:12px; } article.blogpost p { font-size:80%; } article.blogpost div { font-size:100%;} article.blogpost header span.sold { color: rgb(200,0,0) !important; } nav .container ul { padding:2px 0px 11px 0px; } article.locationPage.Full figure { display:none; } section.imprint { padding:32px 20px 32px 20px; } div.product div span.sale div.durchgestrichen, div.product div span.sale div.salePrice { min-width:40px !important; max-width:none !important; } article.blogpost.Full header { padding: 2px !important; } article.blogpost.Full p { margin: auto 0%; width: 100% !important; padding: 12px 12px 40px 12px !important; font-size: 1rem !important; line-height: 1.2 !important; box-sizing: border-box; } article.blogpost.Full img { margin: 2px 2% 0px 2% !important; width: 96% !important; } } /* iPhone 5 FIXES */ @media only screen and (max-device-width : 568px) { .images.flexbox { height:80px !important; display:block !important; position:relative !important; float:left !important; width:100% !important; padding:0px 0px 0px 0px !important; margin:0px !important; } .image.flexitem { width:18% !important; position:relative !important; padding:0px !important; text-align:center !important; overflow:hidden !important; background-color:rgba(14,14,14,1.00); height:50px !important; margin: 15px 1% 15px 1% !important; display:block !important; float:left !important;} .image.flexitem img { width:auto !important; max-width:90px !important; min-width:10px !important; height:50px !important; max-height:50px !important; min-height:50px !important; } div.product > div { overflow:auto !important;} div.product > div > p { text-align:left !important; text-wrap:normal !important; } div.product > div > p > h7 { font-size:70% !important; } div#page > header { margin-top: 0px; background-size: 1100px !important; } } /* iPhone 5 Fix addition */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px), only screen and (max-width: 320px) { section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost:nth-child(1) { display:block !important; z-index:2 !important; position:relative !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost div { padding:18px 0px 18px 0px !important; z-index:5 !important; bottom:0px !important; margin-top:0px; } /* Button unten */ section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost p { max-height: 112px; overflow:hidden; float:right !important; width:57%; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(1) article.blogpost:nth-child(2) { display:none !important; width:0px !important; height:0px !important; overflow:hidden !important; z-index:1 !important; } section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(2), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(3), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(4), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(5), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(6), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(7), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(8), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(9), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(10), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(11), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(12), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(13), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(14), section#bslide-slides div.bslide-slides-container div.bslide-slide:nth-child(15) { height:0px !important; width:0px !important; display:none !important; z-index:1 !important; overflow:hidden !important; } article.blogpost header h1, article.blogpost header h2 { font-size:95%; font-weight:bold; margin-bottom:12px; margin-right:0px; padding-right:2px; } } a.buyButton { display: inline-block; float: right; position: relative; clear: both; margin-right: 20px; margin-top: 12px; margin-bottom: 20px; text-decoration: none; cursor:pointer; } .eb-icon-socialmedia { display: block; width: 32px; height: 32px; background-size: 75%; background-position: center; background-repeat: no-repeat; background-color: rgba(250,249,248,1.00); -webkit-border-radius: 5px; border-radius: 5px; /* top:20px; */ bottom: 42px; left: 50%; position:absolute; } .instagram { margin-left: calc(35vw - 100px); } .facebook { margin-left: calc(35vw - 60px); } .facebook { background-image: url('data:image/svg+xml;utf8,') !important; } .instagram { background-image: url('data:image/svg+xml;utf8,') !important; } @media only screen and (max-width: 1600px) { .instagram { margin-left: calc(42vw - 100px); } .facebook { margin-left: calc(42vw - 60px); } } @media only screen and (max-width: 1200px) { .instagram { margin-left: calc(50vw - 100px); } .facebook { margin-left: calc(50vw - 60px); } } @media only screen and (max-width: 768px) { .eb-icon-socialmedia { bottom: 174px; } } body div#page > header { background-size: 100% !important; } @media only screen and (max-width:1920px) { body div#page > header { background-size: 1920px !important; } }