/* Dokument von Patrick Altmann // www.art-workx.com // Erstellt: 05/2017 */ /* frank-ruhl-libre-300 - latin */ @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 300; src: url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-300.eot'); /* IE9 Compat Modes */ src: local('Frank Ruhl Libre Light'), local('FrankRuhlLibre-Light'), url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-300.svg#FrankRuhlLibre') format('svg'); /* Legacy iOS */ } /* frank-ruhl-libre-regular - latin */ @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 400; src: url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Frank Ruhl Libre Regular'), local('FrankRuhlLibre-Regular'), url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-regular.svg#FrankRuhlLibre') format('svg'); /* Legacy iOS */ } /* frank-ruhl-libre-700 - latin */ @font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 700; src: url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-700.eot'); /* IE9 Compat Modes */ src: local('Frank Ruhl Libre Bold'), local('FrankRuhlLibre-Bold'), url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/frank-ruhl/frank-ruhl-libre-v3-latin-700.svg#FrankRuhlLibre') format('svg'); /* Legacy iOS */ } /* font-family: 'Frank Ruhl Libre', serif; */ /* +----------------------------------------------------------------------- */ /* | /* +----------------------------------------------------------------------- */ body { font-family: 'Frank Ruhl Libre', serif; color:rgb(60,60,60);} a { color: #000000; text-decoration: none; } a:hover { text-decoration: underline; } a:focus { outline: #000000; } a:visited { color: #000000; } strong { font-weight:bold; } em { font-style: normal; font-size:1.2em; color:rgba(0,100,175,1);} body.home img { vertical-align: middle; width:100%; height:auto; } textarea { resize: vertical; } article, aside, figure, footer, header, menu, nav, section { display: block; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #CCCCCC; margin: 1em 0; padding: 0; } img {width:100%; height:auto;} /* +----------------------------------------------------------------------- */ /* | Helper classes /* +----------------------------------------------------------------------- */ .clear { clear: both; } .pull-left { float: left; } .pull-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { display:none;} .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .uppercase { text-transform: uppercase;} /*.block { overflow:visible; }*/ .mime_icon { width:18px;} .sticky-wrapper { z-index: 9999; } .marginbottom {margin-bottom:30px;} .margintop {margin-top:20px;} .mb20 {margin-bottom:20px;} .align-center, .content .align-center p, .content .align-center h1, .content .align-center h2 {text-align:center;} .float-right { float:right; } .space {display:block; width:100%; height:50px;} .block { overflow: visible; } .webdata { display:none; } /* +----------------------------------------------------------------------------------------------------------------------------------- */ /* Header /* +----------------------------------------------------------------------------------------------------------------------------------- */ #header { height:100vh; background:url(../img/header/home/header.jpg) no-repeat center; background-size:cover;} body.collection #header { background:url(../img/header/collection/andersd-classic-hpheader.jpg) no-repeat center; background-size:cover;} body.collection-haute-couture #header { background:url(../img/header/haute-couture/header-andersdTracht.jpg) no-repeat center; background-size:cover;} body.hochzeitsdirndl #header { background:url(../img/header/kontakt/header.jpg) no-repeat center; background-size:cover;} body.welcome #header { height: auto; background:none;} body.store #header { background:url(../img/header/store/store.jpg) no-repeat center; background-size:cover;} body.datenschutz #header { background:url(../img/header/datenschutz/header.jpg) no-repeat center; background-size:cover;} body.impressum #header { background:url(../img/header/impressum/header.jpg) no-repeat center; background-size:cover;} body.designer #header { background:url(../img/header/designer/header.jpg) no-repeat center; background-size:cover;} body.kontakt #header { background:url(../img/header/kontakt/header.jpg) no-repeat center; background-size:cover;} body.press #header { background:url(../img/header/press/header.jpg) no-repeat center; background-size:cover;} body.hochzeitsdirndl #header { background:url(../img/header/kontakt/header.jpg) no-repeat center; background-size:cover;} #header #logo a { display:block; background: url(../gfx/logo/logo.svg) no-repeat center center; width: 100%; height:50px;} body.collection #header-logo { display:none;} #header-logo { display:block; position:absolute; top:50%; margin-top:-175px; left:0; right:0; text-align:center;} #header-logo a.logo { display:block; background: url(../gfx/logo/logo.png) no-repeat center center; background-size:100% auto; width: 750px; height:315px; animation-delay:1s; animation-duration: 2s; margin:0 auto; } #header-logo span { display:inline-block; text-shadow:rgba(0,0,0,0.8) 3px 3px 3px; color:#fff; font-size:80pt; padding:5px 10px; margin-top: -7px; background: url(../gfx/border-left.svg), url(../gfx/border-right.svg); background-repeat:no-repeat; background-size:auto 100%; background-position:right, left;} #header #topbar { padding:20px 0;} body.collection #header #topbar, #topbar-sticky-wrapper.is-sticky #topbar { background: rgba(0,0,0,0.80); width: 100%; z-index: 9995; position: relative;} #mobile-topbar-sticky-wrapper { display:none; padding:10px 0; } #mobile-topbar-sticky-wrapper #mobile-topbar { background: rgba(0,0,0,0.50); padding:10px 0; position: fixed; top:0; right:0; left:0;z-index: 9995; } #mobile-topbar-sticky-wrapper.is-sticky #mobile-topbar { background: rgba(0,0,0,0.80); position: fixed; top:0; right:0; left:0; z-index: 9995; padding:10px 0; } #mobile-topbar p { width:50%; float:left; margin:0; line-height:25px;} #mobile-topbar p, #mobile-topbar a { color:#fff; font-weight:300;} #header #mobile-topbar #social-nav ul li a { display:block; width: 30px; height:30px; color:#000;} #header #main-navigation ul {margin:12px 0; padding:0 30px; display:flex; justify-content: space-between; border-right:1px solid #fff; border-left:1px solid #fff; } #header #main-navigation ul li {margin:0px 20px 0px 0px; padding:0; text-align: center;} #header #main-navigation ul li a, #header #main-navigation ul li.active span { color:#fff; font-weight:300; text-transform: uppercase; font-size:1.5rem; line-height:26px; height:26px; text-shadow: #000 3px 3px 3px } #header #main-navigation ul li.active span, #header #main-navigation ul li:hover a { color: rgb(224,200,233); text-decoration: none; } #header #social-nav ul { margin:0; padding:0; } #header #social-nav ul li { display:inline-block; margin:0 5px; padding:0; } #header #social-nav ul li a { display:block; width: 35px; height:35px; color:#000;} #header #social-nav ul li.facebook a { background:url(../gfx/socialmedia/facebook.svg) no-repeat; font-size:1px; } #header #social-nav ul li.instagram a { background:url(../gfx/socialmedia/instagram.svg) no-repeat; font-size:1px; } #body #slider-nav { } #body #slider-nav .caroufredsel_wrapper { height: auto; } #body #slider-nav .caroufredsel_wrapper .ce_text { margin:0 2px; position: relative;} #body #slider-nav .caroufredsel_wrapper .ce_text .image_container {position:absolute; z-index: -900; } #body #slider-nav .caroufredsel_wrapper .ce_text h2 { margin-top:190%; } #body #slider-nav .caroufredsel_wrapper .ce_text h2 a { color: #fff; font-size:1.3rem; background: rgba(51,51,51,0.95); padding:10px; display:block; float:right; width: 85%; line-height:1.1; font-weight:300; } #body #slider-nav .caroufredsel_wrapper .ce_text h2 a:hover, #body #slider-nav .caroufredsel_wrapper .ce_text h2 a:hover strong { color: rgb(224,200,233); text-decoration: none; } #body #slider-nav .caroufredsel_wrapper .ce_text h2 a strong { display:block; color:#fff; font-weight: 300; text-transform: uppercase; letter-spacing: 2px;} #body #slider-nav .caroufredsel_controls { } #body #slider-nav .caroufredsel_controls a span { display:none; } #body #slider-nav .caroufredsel_controls .caroufredsel_navi a { display:block; width:40px; height:40px; position: absolute; top:50%; margin-top:-20px; z-index: 9990;} #body #slider-nav .caroufredsel_controls a.caroufredsel_prev { background: url(../gfx/prev.svg) no-repeat center center; left: 10px; } #body #slider-nav .caroufredsel_controls a.caroufredsel_next { background: url(../gfx/next.svg) no-repeat center center; right: 10px; }/* +----------------------------------------------------------------------- */ /* | Bildergalerie /* +----------------------------------------------------------------------- */ #main .ce_gallery ul { list-style: none; margin:0; padding:0;} #main .ce_gallery ul.cols_3 li { width:31%; float:left; margin:0 10px 20px; padding: 0; } body.home #body { padding:0; height:100vh; overflow: hidden; position: relative; z-index: -500;} body.home .col { width:25%; float:left;} body.home .col .w50 { width:50%; float:left;} body.home #header-logo span { font-size:40pt; text-shadow: rgba(0,0,0,1) 5px 5px 5px; } /* fluid 5 columns */ .grid-sizer, .grid-item { width: 19.8%; padding:0.1%; } /* 2 columns */ .grid-item--width2 { width: 40%; } .layout_latest.grid-item { width:46%; padding:0 2% 20px; position: relative;} .layout_latest.grid-item .inside {padding:20px 25px 10px; border-right:2px solid #000; border-left:2px solid #000; background: url(../gfx/border_news.jpg), url(../gfx/border_news.jpg), url(../gfx/border_news.jpg), url(../gfx/border_news.jpg); background-repeat:no-repeat; background-position:right top, right bottom, left top, left bottom;} .layout_latest.grid-item p.info { background:none;position: absolute; width:100px; text-align:center; left:50%; margin-left:-50px; top:-23px;} .layout_latest.grid-item p.more, .layout_full p.back { text-transform: lowercase; margin:0; text-align: center;} .layout_latest.grid-item .caption { display:none; } body.artikel #teaser-nav { display:none;} /* +----------------------------------------------------------------------- */ /* | Body /* +----------------------------------------------------------------------- */ #teaser-nav { margin-top:-7vw;} #teaser-nav ul { margin:0; padding:0; display:flex; justify-content: center;} #teaser-nav ul li { margin:0 1.5vw; padding:0; box-shadow: rgba(0,0,0,0.2) 5px 5px 5px; overflow:hidden; transition-duration: 1s;} #teaser-nav ul li a, #teaser-nav ul li span { display:table-cell; width:20vw; text-align: center; vertical-align: middle; height:18vw; color:#fff; text-transform: lowercase; font-size:2.5rem;letter-spacing: 2px; text-shadow: #000 3px 3px 3px; line-height:2vw; background: url(../gfx/border-left.svg), url(../gfx/border-right.svg); background-repeat:no-repeat; background-size:auto 100%; background-position:right, left;} #teaser-nav ul li.boutique { background: url(../img/aktuelles/2019/1.jpg) no-repeat; background-size: 100% 100%;} #teaser-nav ul li.collection-haute-couture { background: url(../gfx/teasernav/haute-couture.jpg) no-repeat; background-size: 100% 100%;} #teaser-nav ul li.collection { background: url(../gfx/teasernav/collection.jpg) no-repeat; background-size: 100% 100%;} #teaser-nav ul li.designer { background: url(../gfx/teasernav/designer.jpg) no-repeat; background-size: 100% 100%;} #teaser-nav ul li.hochzeitsdirndl { background: url(../gfx/teasernav/hochzeitsdirndl.jpg) no-repeat; background-size: 100% 100%;} #teaser-nav ul li a:hover { text-decoration: none; } #teaser-nav ul li:hover { transform: scale(1.1); transition-duration: 1s;} section#body { padding:40px 0;} #boutique-details p.col_first { width:170px; display:inline-block; vertical-align: top; margin-bottom:0;} #boutique-details p.col_last { width:auto; display:inline-block; margin-bottom:0;} body.collection.overview #book-nav { display:none; } #book-nav .mod_booknav ul { list-style:none; margin:0; padding:0; } #book-nav .mod_booknav ul li.up { display:none;} #book-nav .mod_booknav ul li {display:inline-block; } #book-nav .mod_booknav ul li a { font-size:12pt; color:#333; background:#fff; padding:5px 10px;} #book-nav .mod_booknav ul li a:hover { color:#fff; background:#333; text-decoration:none; } #book-nav .mod_booknav ul li.prev { float:left; } #book-nav .mod_booknav ul li.next { float:right; } .height300 div.columns { height:300px; overflow:hidden; margin-bottom:20px; } /* +----------------------------------------------------------------------- */ /* | Footer /* +----------------------------------------------------------------------- */ /*#exfooter {visibility: hidden !important;} */ body.home #exfooter {position: relative;} #exfooter {position: fixed; left:0; right:0; bottom:0;} #footer { background: #000; padding:50px 0 100px;} body.home #footer { background: #000; padding:50px 0;} #footer .logo a { display:block; background: url(../gfx/logo/logo.svg) no-repeat center center; width: 220px; height:50px;} #footer .col.adress { width:33%; float:left; padding: 0 2%;} #footer .col.nav { width:17%; float:left; padding: 0 2%;} #footer .col.socialnav { width:13%; float:left; padding: 0 2%;} #footer .col { width:20%; float:left; padding: 0 2%; border-right:1px solid #fff;} #footer .col:last-of-type { border-right:none;} #footer p, #footer a, #footer li { color:#fff; font-size:13pt; font-weight: 300; line-height:22px;} #footer p { margin-bottom:10px;} #foo-nav ul { padding:0 0 5px;} #foo-nav ul li:before {content: 'ยป '; margin-right:10px; } #foo-nav ul li {margin:0 10px 10px 0; } #footer #socialmedianav ul { margin:0; padding:0; text-align: center; } #footer #socialmedianav ul:before { content: 'follow.'; color:#fff; font-size:13pt; font-weight: 300; line-height:22px; text-align: center; display:block; margin-bottom:20px;} #footer #socialmedianav ul li { display:inline-block; margin:0 5px; padding:0; } #footer #socialmedianav ul li a { display:block; width: 50px; height:50px; color:#000;} #footer #socialmedianav ul li.facebook a { background:url(../gfx/socialmedia/facebook.svg) no-repeat; font-size:1px; } #footer #socialmedianav ul li.instagram a { background:url(../gfx/socialmedia/instagram.svg) no-repeat; font-size:1px; } /* +----------------------------------------------------------------------- */ /* | Styling Content /* +----------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color:rgb(60,60,60); } #headline {padding:60px 0 0;} #headline h1 { font-size:8rem; text-align:center; color:#ebebeb; text-transform: none; line-height: 1;} #headline h2 { font-size:3.5rem; text-align:center; position: relative; top:-150px; line-height: 1;} #hl_collection { text-align:center; padding:40px 0 60px 0;} #hl_collection h1 { display:inline-block; font-size:3.5rem; letter-spacing: 3px;} #hl_collection h2 { display:inline-block; font-size:3.0rem; color:#ebebeb; } #header p, #sidebar p {margin:0;} .content h1 { font-size:28pt; text-align:left; font-weight: 400; line-height:45px; padding:0; margin: 0; text-transform: uppercase; } .content h2 { font-size:22pt; letter-spacing:1px; margin:0 0 10px 0; line-height:1.3;} .content h3 { font-size:19pt; width:100%; text-align:left; letter-spacing:1px;} .content h4 { font-size:10pt; width:100%; text-align:left; letter-spacing:1px; margin:0;} .content p { font-size:15pt; line-height:28px; text-align:left;} .content .mod_article.small-text p { width:90%; } .content p.last { margin-bottom: 0; } .content .tiny-text p { font-size: 15px; } .content .section p {text-align: left;} .content a { text-decoration: none;} .content a:hover { text-decoration: underline; } .content a:focus { outline: none; } .content a:visited { } .content table { font-size:12pt; line-height:25px; letter-spacing: 0.5px; text-align:left; color:#000; hyphens: auto; margin-bottom:20px;} .content table td, .content table th { } .content table th { } .content table th.actions { width: 20%; } /*.content .mod_article .ce_text ul { list-style: disc ; padding: 0; margin: 0 0 0 14px; float:left; width:42%;}*/ .content #babyklappe.mod_article .ce_text ul { list-style: disc ; padding: 0; margin: 0 0 0 14px; float:none; width:auto;} .content ul { list-style: circle; padding: 0; margin: 0 0 20px 18px;} .content ul li { font-size:15pt; line-height:28px; margin: 0 0 8px 0; padding: 0 10px 0 0; hyphens: auto;} .content ul li ul { } .content ul.unstyled { list-style: none; padding: 0; } .content ol { } .content ol li { } .content ol li ol { } .content .glyphicons:before { font-size: 1.0rem; } .info { background-color: #F6F6F6; padding: 10px 0; font-weight: normal; font-size: 0.9rem; color: #333333; margin-bottom: 20px; } .alert { padding: 5px 10px; margin: 20px 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .alert .heading { font-weight: 700; } .alert.alert-info { background-color: #D9EDF7; border: 1px solid #BCE8F1; color: #31708F; } .alert.alert-success { background-color: #DFF0D8; border: 1px solid #D6E9C6; color: #3C763D; } .alert.alert-error { background-color: #F2DEDE; border: 1px solid #EBCCD1; color: #A94442; } .alert.alert-warning { background-color: #FCF8E3; border: 1px solid #FAEBCC; color: #8A6D3B; } .alert.alert-grey { background-color: #F6F6F6; border: none; color: #333333; } .text-muted { color: #999999; } .text-warning { color: #C09853; } .text-error { color: #B94A48; } .text-info { color: #3A87AD; } .text-success { color: #468847; } .btn { background-color: #C8D315; color: #FFFFFF; display: block; padding: 10px 20px; font-size: 1.0rem; text-transform: uppercase; -webkit-box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.5); outline: none; border: none; } .btn:hover { color: #FFFFFF; } .btn-grey { background-color: #707173; } /* +----------------------------------------------------------------------- */ /* | Forms /* +----------------------------------------------------------------------- */ .content .ce_form h1 { text-align:center; } .content div.formbody { width:75%; margin:0 auto; font-family: 'Frank Ruhl Libre', serif; } .content div.formbody td, .content div.formbody table, div.formbody input, div.formbody textarea { border: none; } .content div.formbody input, .content div.formbody textarea, .content div.formbody select { padding: 5px 7px; border-bottom: 1px solid #ccc; font-size: 15pt; color: #58585A; } .content div.formbody td { } .content div.formbody input { width: 90%; font-family: 'Frank Ruhl Libre', serif; } .content div.formbody input.submit { width: 120px; } .content div.formbody textarea { height: 120px; width: 90%; font-family: 'Frank Ruhl Libre', serif; } .content div.formbody select { width: 93%; } .content div.formbody label {width:130px; float:left; display:block; font-size: 18pt; line-height:33px;} .content div.formbody.suche label {width:100%;} .content div.formbody .widget {line-height:50px; margin:10px 0;} .content div.formbody .widget-checkbox {border: 1px solid #ccc; padding:10px 20px 10px 20px; width:85.5%; margin:20px 0;} .content div.formbody .widget-checkbox legend { background: #fff; margin-top:-30px; padding:0 5px;} .content div.formbody .widget-checkbox input { float:left; width:13px; margin-top:4px; } .content div.formbody .widget-checkbox label { width: auto; font-size: 13pt; line-height:23px !important; } .content div.formbody .widget-checkbox label a { text-decoration:underline; } .content div.formbody select option { } .content div.formbody select option:first-child { padding: 0; } .content div.formbody p.error { color: #B94A48 !important; margin: 5px 0 2px 0; padding: 3px 0 3px 0; font-size: 10px; } .content div.formbody p { margin: 0 0 15px 0; } .content div.formbody td.col_first { width: 140px; vertical-align:top;} .content div.formbody td {height:45px;} .content div.formbody .checkbox_container legend { margin-bottom: 5px; } .content div.formbody .checkbox_container input { width: auto; margin-right: 5px; } .content div.formbody .submit_container input, .content div.formbody .submit input { border: 1px solid #949496; cursor: pointer; background-color: #F1F1F1; width: 150px; font-size: 1em; margin:15px 0 0 0;} .content div.formbody .submit_container input:hover { background-color: #112945; color: #FFFFFF; } .content div.formbody input.captcha { margin-right: 5px; } .content div.formbody .captcha_text { display:block; } .content div.formbody fieldset.radio_container span { display: block; float: none; } .content div.formbody fieldset.radio_container legend span { float: none; display: inline-block; } .content div.formbody fieldset.radio_container input.radio { width: 20px !important; float: left !important; } .content div.formbody fieldset.radio_container input.radio { } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { } /* +----------------------------------------------------------------------- */ /* | Media Queries /* +----------------------------------------------------------------------- */ /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 1279px) { #exfooter {visibility: visible !important;} } @media only screen and (min-width: 768px) and (max-width: 1024px) { #headline h1 { font-size:5rem;} #headline h2 { top: -110px; } #exfooter {visibility: visible !important;} } @media only screen and (min-width: 960px) and (max-width: 1024px) { #exfooter {visibility: visible !important;} } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 1024px) { #header #social-nav ul li a { width: 35px; height:35px; } #exfooter {visibility: visible !important;} } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { #exfooter {visibility: visible !important;} #topbar-sticky-wrapper { display:none;} #mobile-topbar-sticky-wrapper { display:block;} .layout_latest.grid-item { width:96%; padding:0 2% 20px; position: relative;} .layout_latest.grid-item .inside {padding:20px 25px 10px; border-right:2px solid #000; border-left:2px solid #000; background: url(../gfx/border_news.jpg), url(../gfx/border_news.jpg), url(../gfx/border_news.jpg), url(../gfx/border_news.jpg); background-repeat:no-repeat; background-position:right top, right bottom, left top, left bottom;} .layout_latest.grid-item .inside .image_container { width:35%; float:left; margin:0 10px; } .layout_latest.grid-item .inside h2 { font-size:1.4rem; font-weight:bold;} #slider-nav { margin-top:70px;} } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { #exfooter {visibility: visible !important;} #header { height:60vh; } #teaser-nav ul li a, #teaser-nav ul li span { width:30vw; height: 30vw;} #header-logo { top:10%; margin-top:0; } #header { background:url(../img/header/home/header_tablet.jpg) no-repeat center; background-size:cover;} body.boutique #header { background:url(../img/header/boutique/header_tablet.jpg) no-repeat center; background-size:cover;} body.collection-haute-couture #header { background:url(../img/header/haute-couture/header-andersdTracht.jpg) no-repeat center; background-size:cover;} body.datenschutz #header { background:url(../img/header/datenschutz/header_tablet.jpg) no-repeat center; background-size:cover;} body.impressum #header { background:url(../img/header/impressum/header_tablet.jpg) no-repeat center; background-size:cover;} body.designer #header { background:url(../img/header/designer/header_tablet.jpg) no-repeat center; background-size:cover;} body.impressum #header { background:url(../img/header/impressum/header_tablet.jpg) no-repeat center; background-size:cover;} body.kontakt #header { background:url(../img/header/kontakt/header_tablet.jpg) no-repeat center; background-size:cover;} body.press #header { background:url(../img/header/press/header_tablet.jpg) no-repeat center; background-size:cover;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #exfooter {visibility: visible !important;} #header { height: 50vh; } #header #header-logo, #teaser-nav { display:none; } #headline { padding: 0 !important; margin-bottom:20px; } .layout_latest.grid-item .inside .image_container { width: 100%; } #mobile-topbar #contact { display:none;} #headline {padding:60px 0 0;} #headline h1 { font-size:3rem; text-align:center; color:#ebebeb; text-transform: none; line-height: 1;} #headline h2 { font-size:2rem; text-align:center; position: relative; top:0; line-height: 1;} #hl_collection { text-align:center; padding:40px 0 60px 0;} #hl_collection h1 { display:inline-block; font-size:3.5rem; letter-spacing: 3px;} #hl_collection h2 { display:inline-block; font-size:3.0rem; color:#ebebeb; line-height:1; } #main .ce_gallery ul.cols_3 li { width:100%; float:none; margin:0 0 20px; padding: 0; } #main .ce_gallery ul.cols_3 li a { pointer-events: none; } #book-nav .mod_booknav ul li.prev, #book-nav .mod_booknav ul li.next { display:block; width: 100%; text-align:center; } #footer .col { width: 100% !important; padding: 0; border:none;} #footer .nav ul {margin:10px 0;} #body #slider-nav .caroufredsel_wrapper .ce_text h2 a { color: #fff; font-size:1.0rem; background: rgba(51,51,51,0.95); padding:10px; display:block; float:right; width: 85%; line-height:1.1; font-weight:300; } body.collection #slider-nav { margin-top: 0;} #header { background:url(../img/header/home/header_phone.jpg) no-repeat center; background-size:cover;} body.store #header { background:url(../img/header/store/store.jpg) no-repeat center; background-size:cover;} body.datenschutz #header { background:url(../img/header/datenschutz/header_phone.jpg) no-repeat center; background-size:cover;} body.impressum #header { background:url(../img/header/impressum/header_phone.jpg) no-repeat center; background-size:cover;} body.designer #header { background:url(../img/header/designer/header_phone.jpg) no-repeat center; background-size:cover;} body.impressum #header { background:url(../img/header/impressum/header_phone.jpg) no-repeat center; background-size:cover;} body.kontakt #header { background:url(../img/header/kontakt/header_phone.jpg) no-repeat center; background-size:cover;} body.press #header { background:url(../img/header/press/header_phone.jpg) no-repeat center; background-size:cover;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { #exfooter {visibility: visible !important;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #exfooter {visibility: visible !important;} } @media only screen and (max-width: 1000px) { #exfooter {visibility: visible !important;} }