/** * @license * MyFonts Webfont Build ID 3749045, 2019-04-18T04:08:40-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: ProximaNova-Light by Mark Simonson * URL: https://www.myfonts.com/fonts/marksimonson/proxima-nova/light/ * * Webfont: ProximaNova-Extrabld by Mark Simonson * URL: https://www.myfonts.com/fonts/marksimonson/proxima-nova/extrabld/ * * Webfont: ProximaNova-Regular by Mark Simonson * URL: https://www.myfonts.com/fonts/marksimonson/proxima-nova/regular/ * * * License: https://www.myfonts.com/viewlicense?type=web&buildid=3749045 * Licensed pageviews: 1,000,000 * Webfonts copyright: Copyright (c) Mark Simonson, 2005. All rights reserved. * * © 2019 MyFonts Inc */ /* @import d146ed3164924aa6b63bc957f3b20dfe.css be at top of file, otherwise CSS will not work */ /*@import url("//hello.myfonts.net/count/3934b5");*/ @font-face { font-family: 'ProximaNova-Light'; src: url('../webfonts/3934B5_0_0.eot'); src: url('../fonts/3934b5_0_0.eot') format('embedded-opentype'), url('../fonts/3934b5_0_0.woff2') format('woff2'), url('../fonts/3934b5_0_0.woff') format('woff'), url('../fonts/3934b5_0_0.ttf') format('truetype'), url('../fonts/3934b5_0_0.svg#wf') format('svg');} @font-face { font-family: 'ProximaNova-Extrabld'; src: url('../fonts/3934b5_1_0.eot'); src: url('../fonts/3934b5_1_0.eot') format('embedded-opentype'), url('../fonts/3934b5_1_0.woff2') format('woff2'), url('../fonts/3934b5_1_0.woff') format('woff'), url('../fonts/3934b5_1_0.ttf') format('truetype'), url('../fonts/3934b5_1_0.svg#wf') format('svg');} @font-face { font-family: 'ProximaNova-Regular'; src: url('../fonts/3934b5_2_0.eot'); src: url('../fonts/3934b5_2_0.eot') format('embedded-opentype'), url('../fonts/3934b5_2_0.woff2') format('woff2'), url('../fonts/3934b5_2_0.woff') format('woff'), url('../fonts/3934b5_2_0.ttf') format('truetype'), url('../fonts/3934b5_2_0.svg#wf') format('svg');} @font-face { font-family: 'TENSANS'; src: url('../fonts/TENSANS-BOLD-2.eot'); src: url('../fonts/TENSANS-BOLD-2.eot') format('embedded-opentype'), url('../fonts/TENSANS-BOLD-2.woff2') format('woff2'), url('../fonts/TENSANS-BOLD-2.woff') format('woff'), url('../fonts/TENSANS-BOLD-2.ttf') format('truetype'), url('../fonts/TENSANS-BOLD-2.svg#wf') format('svg');} } #mfPreviewBar {display:none;} /* Icons */ @font-face{font-family:'icomoon';src:url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.svg') format('svg');font-weight:normal;font-style:normal}[class^="icomoon-"],[class*=" icomoon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .icomoon-cart:before{content:"\e622"}.icomoon-chevron-right:before{content:"\f054"}.icomoon-chevron-left:before{content:"\f053"}.icomoon-share:before{content:"\e60a"}.icomoon-share-alt:before{content:"\e900"}.icomoon-feed:before{content:"\e60b"}.icomoon-flickr:before{content:"\e60c"}.icomoon-vimeo:before{content:"\e60d"}.icomoon-twitter:before{content:"\e60e"}.icomoon-facebook:before{content:"\e60f"}.icomoon-google-plus:before{content:"\e610"}.icomoon-pinterest:before{content:"\e611"}.icomoon-tumblr:before{content:"\e612"}.icomoon-linkedin:before{content:"\e613"}.icomoon-dribbble:before{content:"\e614"}.icomoon-stumbleupon:before{content:"\e615"}.icomoon-lastfm:before{content:"\e616"}.icomoon-instagram:before{content:"\e617"}.icomoon-skype:before{content:"\e618"}.icomoon-picasa:before{content:"\e619"}.icomoon-soundcloud:before{content:"\e61a"}.icomoon-behance:before{content:"\e61b"}.icomoon-heart:before{content:"\e802"}.icomoon-comments:before{content:"\e801"}.icomoon-heart-outline:before{content:"\e800"}.icomoon-close:before{content:"\e607"}.icomoon-arrow-right:before{content:"\e608"}.icomoon-arrow-left:before{content:"\e609"}.icomoon-quotes-right:before{content:"\e605"}.icomoon-quotes-left:before{content:"\e61c"}.icomoon-sphere:before{content:"\e606"}.icomoon-bloglovin:before{content:"\e621"}.icomoon-youtube:before{content:"\e604"}.icomoon-search:before{content:"\f002"}.icomoon-star:before{content:"\f005"}.icomoon-trash-o:before{content:"\f014"}.icomoon-pencil:before{content:"\f040"}.icomoon-remove-sign:before{content:"\f057"}.icomoon-warning:before{content:"\f071"}.icomoon-camera-retro:before{content:"\f083"}.icomoon-video-camera:before{content:"\e901"}.icomoon-envelope:before{content:"\f0e0"}.icomoon-app-net:before{content:"\f170"}.icomoon-apple:before{content:"\f179"}.icomoon-windows:before{content:"\f17a"}.icomoon-android:before{content:"\f17b"} *{ font-family: 'ProximaNova-Regular'; font-weight: normal; font-style: normal; box-sizing: border-box; margin:0; padding:0; } html { line-height: 1.15; } body { font-size: 16px; font-size: 1rem; line-height: 1.4; font-weight: 300; overflow-x: hidden; background-color: #222; } /* 本例子css */ .indexbanner1{ width:100%; overflow:hidden; position:relative; } .indexbanner1 *{font-family: 'TENSANS';} .indexbanner1 .hd{ width:100% !important; position:absolute; bottom:15px; z-index:1; height:20px; overflow:hidden } .indexbanner1 .hd ul{ overflow:hidden; zoom:1; text-align:center; } .indexbanner1 .hd ul li{ cursor:pointer; display:inline-block; *display:inline; zoom:1; margin:0 5px; width:10px; height:10px; background:#000; filter:alpha(opacity=40);opacity:0.4; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } .indexbanner1 .hd ul li.on{ background:#ff1c8e; } .indexbanner1 .bd{ position:relative; z-index:0; } .indexbanner1 .bd ul{ width:100% !important } .indexbanner1 .bd li{ width:100% !important; height:100vh; position:relative; zoom:1; vertical-align:middle; color:#fff; font:normal 22px/200% 'TENSANS'; } .indexbanner1 .bd dd{ position:absolute; display:none } /* 下面是前/后按钮代码，如果不需要删除即可 */ .indexbanner1 .prev, .indexbanner1 .next{ position:absolute; left:3%; top:50%; margin-top:-35px; display:block; width:32px; height:70px; line-height:70px; background:#000; filter:alpha(opacity=40);opacity:0.4; color:#fff; font-size:18px; text-align:center; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .indexbanner1 .next{ left:auto; right:3%; background-position:8px 5px; } .indexbanner1 .prev:hover, .indexbanner1 .next:hover{ filter:alpha(opacity=60);opacity:0.6; } .indexbanner1 .prevStop{ display:none; } .indexbanner1 .nextStop{ display:none; } /* 这里的定位需与dd的playOut属性一致 */ .indexbanner1 .bd .item1 .dd1{ top:40%; right:340px; font-size:50px; line-height:150%; color: #ff1c8e;} .indexbanner1 .bd .item1 .dd2{ top:50%; right:340px; } .indexbanner1 .bd .item1 .dd3{ top:55%; right:340px; } .indexbanner1 .bd .item2 .dd1{ top:40%; left:340px; font-size:50px; line-height:150%; color: #ff1c8e; } .indexbanner1 .bd .item2 .dd2{ top:50%; left:340px; } .indexbanner1 .bd .item2 .dd3{ top:55%; left:340px; } .indexbanner1 .bd .item3 .dd1{ top:0; left:25%; font-size:50px; line-height:150%; color: #ff1c8e; } .indexbanner1 .bd .item3 .dd2{ top:0; left:25%; } .indexbanner1 .bd .item3 .dd3{ top:0; left:25%; } .indexbanner1 .bd .item4 .dd1{ bottom:0; right:25%; font-size:50px; line-height:150%; color: #ff1c8e; } .indexbanner1 .bd .item4 .dd2{ bottom:0; right:25%; } .indexbanner1 .bd .item4 .dd3{ bottom:0; right:25%; } .indexbanner1 .bd .item5 .dd1{ top:0; left:25%; font-size:50px; line-height:150%; color: #ff1c8e; } .indexbanner1 .bd .item5 .dd2{ bottom:0; left:25%; } /* Costume * --------------------------------------- */ .indexnav{ width: 100%; margin: 0 auto; height: 100px; line-height: 100px;background-color: rgba(0,0,0,0.4); position: fixed; top: 0; left: 0; z-index: 991; } .indextop{height: 30px; line-height: 30px; position: relative; float: right; margin-top: 20px;} .indextop .lang{ float: right; font-size: 14px; margin-right: 23px; background: url(../images/l.png) right no-repeat; line-height: 30px;font-size:0px;} .indextop .lang img{ border: 0; } .indextop .lang .accordion-toggle{ padding: 0 30px 0 0; background-color: rgba(102,102,102,0);background-position: right 15px top 13px; height: 30px; font-size: 14px; color:#fff;background-image: url(../images/arrow-down.svg);} .indextop .lang #sprachen{ margin-bottom: 0; border-bottom: none;} .indextop .lang .accordion-content ul{ padding-left: 40px;} .indextop .lang .accordion-content{ background: #fff;} .indextop .lang .accordion-content li a{ font-size: 14px;} .indextop .search{ float: right; margin-right: 40px;background: url(../images/l.png) right no-repeat; color: #fff;} .indextop .search input::-webkit-input-placeholder{ color:#fff; } .indextop .search input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#fff; } .indextop .search input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#fff; } .indextop .search input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#fff; } .indextop .search #Sidenav-Suche input{ background-color: rgba(102,102,102,0);width: 8.5rem; color: #fff;} .indextop .search #Sidenav-Suche #suche-btn{background-color: rgba(102,102,102,0); background-image: url(../images/lupe3.svg);} .indextop .search #Sidenav-Suche #suche-btn:hover{background-image: url(../images/lupe2.svg);} .indextop .search #Sidenav-Suche{ height: 30px; padding: 0 0 0 0; margin: 0 0 0 0;border-bottom: none;} .indextop #Sidenav-Suche input{ padding: 0 0 0 0; height: 30px;} .indextop .wenzi{ color: #fff; float: right; margin-right: 20px; line-height: 30px;} .indextop .wenzi a{ color: #fff; font-size: 14px;} .indextop .wenzi a:hover{color: #ff1c8e;} .indextop .share{ float: right; margin-right: 20px;background: url(../images/l.png) right no-repeat; padding: 0 10px; height: 30px; } .indextop #social-media{ padding: 0 0 0 0;} .indextop #social-media a{ width: 20px; height: 20px; margin: 5px 2px;} input:focus{ outline:none; } .fullSlide{ position:absolute; left:0; top:0; width:100%; height:100%; background:#000 } .fullSlide ul{ height:100% !important; width:100% !important; } .fullSlide li{ height:100% !important; width:100% !important; } .fullSlide .prev, .fullSlide .next{ position:absolute; z-index:1; display:block; width:30px; height:50px; top:50%; left:20px; background:url(../images/icons.png) 0 0 no-repeat; cursor:pointer; filter:alpha(opacity=60);opacity:0.6; } .fullSlide .next{ left:auto; right:30px; background-position:-51px 0; } .fullSlide .prev:hover, .fullSlide .next:hover{ filter:alpha(opacity=100);opacity:1; } .fullSlide .playState{ display:block; position:absolute; z-index:1; right:30px; top:50%; margin-top:-20px; width:51px; height:51px; overflow:hidden; background:url(../images/icons.png) 23px -132px #000 no-repeat; filter:alpha(opacity=60);opacity:0.6; } .fullSlide .pauseState{ background-position:23px -201px; } .fullSlide .playState:hover{ filter:alpha(opacity=100);opacity:1; } .indexnav1{ width: 100px; float: left;margin-left:50px; margin-top: 5px;} .indexnav1 img{ max-width: 100%;} .indexnav2{ float: right;clear: right; } .indexnav2 ul li{ float: left; padding: 0 20px; background: url(../images/l.png) right no-repeat; text-align: center; height: 50px; line-height: 50px; margin-top: 5px;} .indexnav2 ul li:last-child{ background: none;} .indexnav2 ul li a{ color: #fff; text-transform: uppercase; font-weight: normal; } .indexnav2 ul li a:hover,.indexnav2 ul li a.on{ color: #ff1c8e;} .container { max-width: 1260px; max-width: 78.75rem; width: 100%; margin: 0 auto; padding: 0 20px; padding: 0 1.25rem; } .bannern{ width: 100%; height: auto; margin: 0 auto; overflow: hidden;} .bannern img{ max-width: 100%; display: block;} .video{ width:120px; margin-left:-60px;} .videolist:hover{ cursor: pointer; } .videoed { display:none; width:50px; height:50px; position: absolute; left:45%; top:45%; z-index:99; border-radius:100%; } .videos{ display:none;position:fixed; margin:auto;left:0;right:0;top:20%;bottom:0;z-index:100; width:80%; height:auto; max-width:1000px; } .vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; } .videos img{ max-width:100% !important; width:auto !important;} .clearfix::before, .clearfix::after { content: " "; display: table; clear: both; } .huibg2{ background: #fff;width: 100%; margin: 0 auto; height: auto; overflow: hidden;} .textny { width: 100%; margin: 0 auto; height: auto; overflow: hidden;} .textny p{ color: #000; line-height: 2;} .full-sort{ background-color: #f7f7f7; border-bottom: 1px solid #DDDDDD; width:100%; margin:0 auto; } .full-sort-list{ position: relative; text-align: center; } .full-sort-list ul{ text-align:center; } .full-sort-list ul li{ display: inline-block; *display: inline; text-align: center; position: relative; margin: 10px 8px 10px 8px; padding: 0 0; } .full-sort-list ul li:before{ position: absolute; content: ''; width: 1px; height: 12px; top: 8px; left: -10px; border-left: 1px solid #DDDDDD;} .full-sort-list ul li:first-child:before { border: none;} .full-sort-list ul li a{ padding: 10px 10px; color:#333; width:100%; margin: 0 auto; } .full-sort-list ul li a:hover, .full-sort-list ul li a.active{ color: #ff1c8e; text-decoration:none; } .white-box-wrap{ background-color: #FFFFFF; padding: 20px 5px; } .full-sort-title{ color: #000000; font-size: 30px; text-align: center; line-height:37px; } .full-line{ height: 0; border-top: 1px solid #DDDDDD; margin: 25px 0; } .full-content{ margin-top: 25px; line-height: 2; min-height:300px; } .full-content img{ max-width: 100%; margin: 0 auto; display: block; } .full-content-title{ text-align: center; color: #333; font-size: 20px; } .full-contact-title{ color: #333333; font-size: 16px; color: #333; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .full-contact-title:after{ width: 30px; height: 1px; background-color: #ED1B24; position: absolute; left: 0; bottom: 0; } .full-iframe{ margin-bottom: 20px; } .full-iframe iframe{ width: 100%; height: 450px; border: none; } .full-contact-content{ color: #565656; font-size: 14px; line-height: 2; margin-bottom: 20px; } .white-box-wrap { background-color: #FFFFFF; padding: 20px 5px; } .ce-textpic {overflow: visible;} #content .ce-textpic {overflow: hidden;} .xianzhi1{overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} .baibg{ width: 100%; margin: 0 auto; height: auto; overflow: hidden; background: #fff;} .heibg{ width: 100%; margin: 0 auto; height: auto; overflow: hidden; background: #000;} .huibg{ width: 100%; margin: 0 auto; height: auto; overflow: hidden; background: #666;} .baibg p{ color: #333;} .biaoti{font-family: 'TENSANS'; font-size: 24px; font-size: 4rem; line-height: 120%; color: #fff; font-weight: normal; margin: 0; padding: 0; text-align: center; width: 100%; padding: 4rem 0; color: #666; position: relative; } .newstitle{ font-size: 1.2rem;} .bai{ color: #fff;} .biaoti2 { display: block; margin: 0 auto; margin-top: 15px; width: 100%; height: 31px; background: url(../pic/title.png) center no-repeat;} .more{ position: absolute; left: 60%; top: 100px; width: 60px; text-align: center; height: 26px; line-height: 22px; background: #fff; color: #666; font-size: 16px; border: 1px solid #fff; margin-left: 50px; border-radius: 20px; padding: 0;} .more2{ position: absolute; left: 60%; top: 100px; width: 60px; text-align: center; height: 26px; line-height: 22px; background: #666; color: #fff; font-size: 16px; border: 1px solid #666; margin-left: 50px; border-radius: 20px; padding: 0;} .more3{position: absolute; left: 65%; top: 100px; width: 60px; text-align: center; height: 26px; line-height: 22px; background: #fff; color: #666; font-size: 16px; border: 1px solid #fff; margin-left: 50px; border-radius: 20px; padding: 0;} .more4{position: absolute; left: 60%; top: 100px; width: 60px; text-align: center; height: 26px; line-height: 22px; background: #666; color: #fff; font-size: 16px; border: 1px solid #666; margin-left: 50px; border-radius: 20px; padding: 0;} .more5{position: absolute; left: 70%; top: 100px; width: 60px; text-align: center; height: 26px; line-height: 22px; background: #666; color: #fff; font-size: 16px; border: 1px solid #666; margin-left: 50px; border-radius: 20px; padding: 0;} .indexk1{ width: 100%; margin: 0 auto; height: auto; overflow: hidden; margin-bottom: 4rem; } .indexk1 ul li{ float: left; width: 25%; position: relative; text-align: center;} .indexk1 ul li img{max-width: 100%; display: block;} .indexk1 ul li p{ position: absolute; z-index: 99; line-height: 100%; vertical-align: middle; top: 45%; left: 0; right: 0; font-weight: bold; font-size: 18px; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; color: #fff;} .indexk1 ul li span{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 1; display: block; opacity: 0;transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk1 ul li:hover span{ opacity: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk1 ul li:hover p{ top: 35%; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk1 ul li em{content: ''; width:0; height:1px; position: absolute; margin:0 auto; top: 50%;left: 0; right:0; background:#fff; z-index: 1; transition:width 0.5s linear;} .indexk1 ul li:hover em{ width: 70%; } .indexk2{ width: 100%; margin: 0 auto; height: auto; overflow: hidden; margin-bottom: 4rem;} .indexk2 ul li{ float: left; width: 25%; position: relative; text-align: center; color: #000;} .indexk2 ul li img{max-width: 100%; display: block;} .indexk2 ul li p{ position: absolute; z-index: 99; line-height: 100%; vertical-align: middle; top: 45%; left: 0; right: 0; font-weight: bold; font-size: 18px; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; opacity: 0; color: #fff;} .indexk2 ul li span{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 1; display: block; opacity: 0;transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk2 ul li:hover span{ opacity: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk2 ul li:hover p{opacity: 1; top: 35%; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk2 ul li em{content: ''; width:100px; height:40px; border: 1px solid #000; border-radius: 5px; position: absolute; margin:0 auto; top: 50%;left: 0; right:0; z-index: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; opacity: 0; line-height: 40px; text-transform: uppercase;} .indexk2 ul li:hover em{ transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;opacity: 1;background:#000; color: #fff; } .pro_main{ width: 100%; margin: 0 auto; padding-top: 150px;} .indexk22{ width: 100%; margin: 0 auto; height: auto; overflow: hidden; margin-bottom: 4rem;} .indexk22 ul li{ float: left; width: 25%; position: relative; text-align: center; color: #000; margin-bottom: 30px;} .indexk22 ul li img{max-width: 100%; display: block;} .indexk22 ul li p{ position: relative; z-index: 99; line-height: 100%; vertical-align: middle; font-weight: bold; font-size: 18px; line-height: 35px; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; opacity: 1; color: #fff;} .indexk22 ul li span{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 1; display: block; opacity: 0;transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk22 ul li:hover span{ opacity: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .indexk22 ul li em{content: ''; width:100px; height:40px; border: 1px solid #000; border-radius: 5px; position: absolute; margin:0 auto; top: 50%;left: 0; right:0; z-index: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; opacity: 0; line-height: 40px; text-transform: uppercase;} .indexk22 ul li:hover em{ transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;opacity: 1;background:#000; color: #fff; } .indexk3{background: url(../images/hintergrund_pjurlove.jpg); background-size: cover; width: 100%; margin: 0 auto; height: 900px;} .indexk3 .slideBox{ width:1000px; height:600px; position:relative;margin: 0 auto;} .indexk3 .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; } .indexk3 .slideBox .hd ul{ overflow:hidden; zoom:1; float:left; } .indexk3 .slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; } .indexk3 .slideBox .hd ul li.on{ background:#f00; color:#fff; } .indexk3 .slideBox .bd{ position:relative; height:100%; z-index:0; } .indexk3 .slideBox .bd li{ zoom:1; vertical-align:middle; } .indexk3 .slideBox .bd img{ width:1000px; height:600px; display:block; } .indexk3 .slideBox .prev{ position:absolute; left:-20%; top:30%; margin-top:-25px; display:block; width:100px; height:203px; background:url(../images/l1.png) no-repeat; filter:alpha(opacity=50);opacity:0.5; } .indexk3 .slideBox .next{ position:absolute; right:-20%; top:30%; margin-top:-25px; display:block; width:100px; height:203px; background:url(../images/l2.png) no-repeat; filter:alpha(opacity=50);opacity:0.5; } .indexk3 .slideBox .prev:hover, .indexk3 .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; } .indexk3 .slideBox .prevStop{ display:none; } .indexk3 .slideBox .nextStop{ display:none; } .indexk4{} .indexk4 ul li{ width: 23%; margin: 0 1%; float: left; margin-bottom: 2rem;} .indexk4 ul li img{ max-width: 90%; margin: 0 auto; display:block;transform: scale(1); transition: all 0.5s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 0.5s ease 0s;} .indexk4 ul li p{ color: #333; text-align: center; position: relative; z-index: 990; line-height: 25px; margin-top:10px;} .indexk4 ul li:hover p{ color: #ff1c8e;} .indexk4 ul li:hover img{ transform: scale(1.1); transition: all 0.5s ease 0s; -webkit-transform: scale(1.1); -webkit-transform: all 0.5s ease 0s;} .indexk5{ width: 80%; margin: 0 auto;padding-bottom: 8rem;} .indexk5 ul{ display: flex;} .indexk5 ul li{ width: 16.66%;text-align: center;} .indexk5 ul li img{ max-width: 70%; margin: 0 auto; display: block;} .indexk5 ul li p{ text-align: center;} .indexk5 ul li:hover p{ color: #ff1c8e} .indexk6{ width: 90%; margin: 0 auto; padding-bottom: 4rem; height: auto ; overflow: hidden;} .indexk6_zi h3{font-family: 'TENSANS'; font-size: 64px; font-size: 4rem; line-height: 120%; color: #fff; font-weight: normal; margin: 0; padding: 0; margin-bottom: 40px; margin-bottom: 2.5rem; text-align: center; width: 100%; color: #fff; position: relative; text-align: left; } .indexk6_zi{ width: 50%; float: left;} .indexk6_zi p{ line-height: 200%;} .indexk6_img{ width: 45%; float: right;} .indexk6_img img{ max-width: 100%;} .fenxiang2 a{ display:inline-block; width:35px; height:35px; float:left;margin-right:5px; margin-top: 5px; color: #fff;} .facebook{ display:inline-block; width:35px; height:35px; border-radius:7px; margin-right:3px;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s; background:#fff url(../images/facebook.svg) no-repeat center;background-size:20px;} .facebook:hover{ margin-top:-5px; opacity:0.8;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s;} .youtube{ display:inline-block; width:35px; height:35px; border-radius:7px; margin-right:3px;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s; background:#fff url(../images/youtube.svg) no-repeat 7px 7px;background-size:20px;} .youtube:hover{ margin-top:-5px; opacity:0.8;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s;} .instagram{ display:inline-block; width:35px; height:35px; border-radius:7px; margin-right:3px;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s; background:#fff url(../images/instagram.svg) no-repeat 7px 7px;background-size:20px;} .instagram:hover{ margin-top:-5px; opacity:0.8;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s;} .twitter{ display:inline-block; width:35px; height:35px; border-radius:7px; margin-right:3px;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s; background:#fff url(../images/twitter.svg) no-repeat center;background-size:20px;} .twitter:hover{ margin-top:-5px; opacity:0.8;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s;} .pinterest{ display:inline-block; width:35px; height:35px; border-radius:7px; margin-right:3px;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s; background:#fff url(../images/pinterest.svg) no-repeat center;background-size:20px;} .pinterest:hover{ margin-top:-5px; opacity:0.8;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s;} .linkedin{ display:inline-block; width:35px; height:35px; border-radius:7px; margin-right:0;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s; background:#fff url(../images/linkedin.svg) no-repeat center;background-size:20px;} .linkedin:hover{ margin-top:-5px; opacity:0.8;transition: all 0.8s ease 0s;-webkit-transform: all 0.8s ease 0s;} .r { float: right; } .l{ float:left;} .indexk7{ padding-bottom: 4rem; width: 100%; margin: 0 auto; height: auto; overflow: hidden;} .news_lone{ width:19%; height:433px; overflow:hidden;border:1px solid #e7e7e7; margin-top:2px; margin-right:0.5%;margin-left:0.5%;} .news_lone_img{ position:relative; width:100%; height:220px;} .news_lone_img img{ display:block; width:100%; height:220px;} .news_lone_infor{ padding:11px 0px 0 13px; height:200px; overflow:hidden;} .news_lone .blog_infTop{ height:auto; overflow:hidden; padding-bottom:10px;} .news_lone .blog_time{ width:20%; height:78px; background-color:#ff1c8e; z-index:10;} .news_lone .blog_time span{ display:block; font-family:Arial; color:#FFF; width:100%; text-align:center;} .news_lone .blog_y{ font-size:37.6px;height:46px; line-height:46px; font-weight:bold; letter-spacing:2px; } .news_lone .blog_day{ background-color:#686868; height:32px; line-height:32px; font-size:14px;} .news_lone .blog_infR{ width:70%; margin-right:5%;} .news_lone .blog_title{ padding:6px 0 8px; text-align:left;} .news_lone .blog_title a{ display:block; height:30px; line-height:30px;color:#000; font-size:16px; font-weight:bold; display:block;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .news_lone:hover{border: 1px solid #ff1c8e;} .blog_intro a{ font-size:12px;} .news_lone .blog_intro{ color:#818181; line-height:26px; height:104px; overflow:hidden; margin-bottom:6px; width:100%;text-align:left; font-size:12px;} #startseite h1, .con-left h1, .con-right h1, .slider-con-right h1, .slider-con-left h1, .slider-con-right h1 span, .slider-con-left h1 span { font-family: 'TENSANS'; font-size: 64px; font-size: 4rem; line-height: 120%; color: #fff; font-weight: normal; margin: 0; padding: 0; margin-bottom: 40px; margin-bottom: 2.5rem; text-transform: capitalize; } .slider-con-right h1 span, .slider-con-left h1 span { font-family: 'ProximaNova-Extrabld'; display: block; font-size: 60px; font-size: 3.75rem; } #section0 h1, #section0 h2 /* Produktseite*/ { font-family: 'ProximaNova-Regular'; font-size: 64px; font-size: 4rem; line-height: 120%; color: #fff; font-weight: normal; margin: 0; padding: 0; margin-bottom: 10px; margin-bottom: 0.625rem; display: inline-block; } #section0 h2 /* Produktseite*/ { font-family: 'ProximaNova-Extrabld'; color: #ff1c8e; margin-left: 15px; margin-left: 0.9375rem; font-variant:small-caps; text-shadow: 0px -1px 0.5px rgba(0,0,0,0.7); text-shadow: 0px -0.0625rem 0.03125rem rgba(0,0,0,0.7); } #startseite h1{ margin-bottom: -10px; margin-bottom: -0.625rem; font-size: 80px; font-size: 1.5rem; line-height: 100%; color: #666; } .sousuo{ width:280px; height:29px; margin: 0 auto;background:url(../images/sousuo.png) no-repeat; } .sousuo input{ height:29px; line-height:29px; border:none; float:left; background:none; text-indent:10px; color:#4b4b4b; width:245px;} .sousuo input[type="submit"]{ float:right; background:url(../images/ss.png) no-repeat; width:29px; height:29px; margin-right:5px; cursor: pointer;} .tags{width: 260px; text-align: right; margin: 0 auto; margin-bottom:30px; font-size: 12px;} .tags a{ display: inline-block; margin:0 3px; font-size: 12px;} .w70{ width: 68%; float: left; margin-left: 2%;} .w30{ width: 20%;float: left; margin-left: 2%;} .tj_news h3{ line-height: 3; font-size: 1.3rem; font-family: 'TENSANS'; border-bottom: 1px solid #333;} .tj_news ul li{ line-height: 2; border-bottom: 1px solid #eee; font-size: 14px;} .tj_news ul li span{ text-align: right; float: right;} #startseite h2{ font-family: 'TENSANS'; font-weight: normal; font-size: 80px; font-size: 4rem; line-height: 95%; color: #ff1c8e; font-variant:small-caps; margin: 0; padding: 0; margin-left: 50px; margin-left: 3.125rem; } .con-left h2, .con-right h2, .slider-con-right h2, .slider-con-left h2, #content h2, #content h3 { font-family: 'ProximaNova-Extrabld'; font-weight: normal; font-size: 35px; font-size: 2.1875rem; line-height: 120%; color: #ff1c8e; text-transform: none; margin: 0; padding: 0; padding-bottom: 20px; padding-bottom: 1.25rem; } #content h2 { font-family: 'ProximaNova-Regular'; margin: 20px 0; margin: 1.25rem 0; line-height: 100%; padding: 0; } #content h2 span { color: #ff1c8e; display: block; } .slider-con-right h1, .slider-con-left h1 { font-family: 'ProximaNova-Regular'; font-weight: normal; font-size: 75px; font-size: 4.6875rem; line-height: 120%; color: #fff; margin: 0; padding: 0; margin-bottom: 40px; margin-bottom: 2.5rem; } .slider-con-right h2, .slider-con-left h2 { text-transform:uppercase; color: #fff; margin-bottom:5%; } .slider-con-right h3, .slider-con-left h3 { font-family: 'ProximaNova-Extrabld'; font-weight: normal; font-size: 60px; font-size: 3.75rem; line-height: 90%; color: #fff; margin: 0; padding: 0; margin-bottom: 40px; margin-bottom: 2.5rem; margin-top: -40px; margin-top: -2.5rem; } #content h3 { font-family: 'ProximaNova-Extrabld'; font-weight: normal; margin: 20px 0 10px 0; line-height: 100%; color: #fff; font-size: 25px; padding: 0; } #newsletter h3{ font-family: 'ProximaNova-Extrabld'; font-weight: normal; font-size: 1.56rem; font-size: 25px; color: #000; margin: 0; padding: 40px 0px 20px 0; } h4{ font-family: 'ProximaNova-Extrabld'; font-weight: normal; font-size: 1.56rem; font-size: 25px; color: #fff; margin: 0; padding: 20px 0; line-height: 120%; } p{ color: #fff; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; word-break: break-all; overflow: hidden; } .align-center {text-align: center;} .align-right {text-align: right;} b, .panel-wrapper p strong {font-weight: bold;} #start-kat-text h3{ display: block; font-weight: normal; font-style: italic; font-size: 20px; font-size: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; } #start-kat-text h3:after{ content: " "; width: 100px; width: 6.25rem; height: 2px; height: 0.125rem; display: block; background: #ff1c8e; margin: 0 auto; margin-top: 8px; margin-top: 0.5rem; } #startseite #section0 p{ font-size: 16px !important; font-size: 1rem !important; max-width: 700px; max-width: 43.75rem; margin:0 auto; } #startseite #section0 h4{padding:0 !important;} a { text-decoration: none; color: #333; transition: 0.3s; } a:hover { color: #ff1c8e; } .detail { color: #ccc; font-size: 14px; font-size: 0.875rem; line-height: 18px; line-height: 1.125rem; } .row3 { width: 30%; float: left; } .row7 { width: 65%; float: right; } .clear:after { content: ""; display: table; clear: both; } .ce-gallery img { max-width: 100%; height: auto; } /* Menu - Sidenav * --------------------------------------- */ /* Fullpage-Nav * --------------------------------------- */ #fp-nav ul li a span { background: #969696 !important;} .fp-slidesNav ul li a span { background: #646464 !important;} #fp-nav ul li a.active span { background-color: #ff1c8e !important;} #fp-nav ul li a span:hover { background: #969696 !important;} .fp-slidesNav ul li a span:hover { background: #969696 !important;} .fp-slidesNav ul li a.active span {background: #969696 !important;} /* Header * --------------------------------------- */ header {display: block;} #logo { width: 150px; width: 9.375rem; height: 150px; height: 9.375rem; position: absolute; z-index: 1000; left: 0; top: 20px; top: 1.25rem; background: #fff; text-align: center; } #startseite #logo { left:50%; margin-left: -100px; margin-left: -5.25rem; width:168px; width:10.5rem; height: 168px; height:10.5rem; top:130px; display: none; } #logo img { height: 100%; width: auto; } .logo-25years { height: 120px; height: 7.5rem; float: left; padding: 10px; padding: 0.625rem; } #p67 .logo-25years { display: none; } /* Störer Startseite * --------------------------------------- */ .pjur-highlights-stoerer { position: absolute; z-index: 5; max-width: 300px; max-width: 18.75rem; top: -10px; top: -0.625rem; left: -10px; left: -0.625rem; } .pjur-highlights-stoerer img { width: 100%; height: auto; } .toy-stoerer { position: absolute; z-index: 5; max-width: 340px; max-width: 21.25rem; top: 260px; top: 16.25rem; left: 10px; } .toy-stoerer img { width: 100%; height: auto; } /* Sections * --------------------------------------- */ .section{ background-color: #222; overflow: hidden; } #section0 { color: #fff; text-align: center; background-color: #000; background-size: cover; background-repeat:no-repeat; background-attachment:scroll; background-position: center; z-index: 2; } #start-kat-text{ bottom:0; position: absolute; width: 100%; padding-bottom: 60px; } .bl-cnt { background: rgba(0,0,0,0.5); padding: 20px 40px 60px 20px; padding: 1.25rem 2.5rem 3.75rem 1.25rem; } #kat1 #section0 .fp-tableCell { display: table-cell; vertical-align: middle; } .con-right, .con-left{ width: 50%; height: 100%; position: absolute; background-size: 400px auto; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding-top: 10%; padding-bottom: 10%; padding-left: 5%; padding-right: 5%; display: flex; display: -ms-flexbox; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-align: start; align-items: flex-start; overflow: hidden; top:0; } .w100{ width: 100%;} .con-left{left:0;} .con-right{right:0;} #startseite .con-right{ padding-left: 11%; padding-right: 3%; } #startseite .con-left{ padding-left: 8%; padding-right: 5%; } #startseite #section-text { z-index: 10; } .bg-left, .bg-right{ background-position: 50%; background-repeat: no-repeat; background-size: cover; width: 50%; height: 100%; position: absolute; top: 0; transition-delay: 0.5s; background-color: #191919; } .bg-left {left:0;} .bg-right {right:0;} .bg-left, .bg-right { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: right center; transform-origin: right center; } .con-left p, .con-right p { color: #fff; font-size: 15px; padding: 20px 0; } #startseite .con-left p, #startseite .con-right p { color: #fff; font-size: 26px; font-size: 1.625rem; padding-top: 40px; padding-top: 2.5rem; padding-bottom:30px; padding-bottom:1.875rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } #startseite .con-left span, #startseite .con-right span { font-size: 60px; } #startseite .con-left span b, #startseite .con-right span b{ font-family: 'ProximaNova-Extrabld'; } /* Buttons */ #btn-startseite { font-size: 20px; font-size: 1.25rem; padding: 10px 35px 10px 15px; padding: 0.625rem 2.1875rem 0.625rem 0.9375rem; text-decoration: none; color: #000; background: #ff1c8e; display: inline-block; vertical-align: middle; box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; font-weight: 600; transition: background 0.3s; } #btn-startseite:hover { background:#ffcc00; } #btn-startseite:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffca00; color: #000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #btn-startseite:after { content: ' '; background-image: url(../fonts/arrow-right.svg); background-repeat: no-repeat; background-position: center; width: 35px; width: 2.1875rem; height: 30px; height: 1.875rem; background-size: 8px 20px; background-size: 0.5rem 1.25rem; position: absolute; } #btn-startseite:before { -webkit-transform: scaleX(1); transform: scaleX(1); } /* Slider Content Kategorien * --------------------------------------- */ li{list-style-type:none;} .con-center{ padding-left: 8%; padding-right: 5%; width: 100%; height: 100%; position: absolute; background-size: 400px auto; background-position: center; background-attachment: fixed; background-repeat: no-repeat; padding-top: 10%; padding-bottom: 10%; padding-left: 5%; padding-right: 5%; display: flex; display: -ms-flexbox; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-align: start; align-items: flex-start; overflow: hidden; top: 0;} .index1{ width: 90%; margin: 0 auto;} .index1 h3 { text-align: center; font-size: 40px;line-height: 80px; color: #fff; text-transform: uppercase; margin-bottom: 3%; } .index1 h3 span{ color: #ff1c8e;} .fenlei3{width: 100%; margin: 0 auto;height: auto; overflow: hidden;} .fenlei3 ul li{ width: 33.3%; float: left; overflow: hidden; position: relative;} .fenlei3 ul li img{ max-width: 100%;transform: scale(1); transition: all 0.8s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 0.8s ease 0s; display: block; padding: 2px;} .fenlei3 ul li p{ color: #fff; font-size: 26px; font-size: 1.625rem; padding-top: 40px; padding-top: 2.5rem; padding-bottom: 30px; padding-bottom: 1.875rem; position: absolute;left: 0;display: table-cell;display: -ms-flexbox; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-align: start; align-items: flex-start; overflow: hidden; top: 0; text-align: center; width: 100%; height: 100%; background: rgba(0,0,0,0.5); line-height: 100%; vertical-align: middle; padding-top: 50%;} .fenlei3 ul li p span{ font-size: 16px; color: #D5D5D5; line-height: 30px; margin-top: 50px; display: block;} .fenlei3 ul li:hover img{transform: scale(1.1); transition: all 0.8s ease 0s; -webkit-transform: scale(1.1); -webkit-transform: all 0.8s ease 0s;} .fenlei3 ul li:hover p{background: rgba(0,0,0,0);} .index-image{max-width: 1050px; height: auto; margin: 0 auto; position: relative;} .index-image img{ max-width: 100%;transition: all 0.3s ease;} .index-image:hover img { transition: all 0.3s ease; -webkit-filter: brightness(0.6) contrast(1.3); filter: brightness(0.6) contrast(1.3); } .icomoon-camera-retro { font-size: 24px; position: absolute; left: 50%; top: 50%; z-index: 3; width: 80px; height: 80px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); line-height: 80px; color: #fff; background: #000; border-radius: 50%; opacity: 0.5; text-align: center; transition: opacity 0.1s ease; } .icomoon-camera-retro:hover{ opacity: 1;} .index-image-header { position: absolute; z-index: 3; width: 80%; left: 10%; bottom: 60px; } .index-image-title a{ font-size: 20px;} .fenlei10{width: 100%; margin: 0 auto;height: auto; overflow: hidden;} .fenlei10 ul li{ width: 20%; float: left; overflow: hidden; position: relative; height: 100%;} .fenlei10 ul li img{ max-width: 100%;transform: scale(1); transition: all 0.8s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 0.8s ease 0s; display: block; padding: 2px;} .fenlei10 ul li p{ color: #fff; font-size: 26px; font-size: 1.625rem; padding-top: 40px; padding-top: 2.5rem; padding-bottom: 30px; padding-bottom: 1.875rem; position: absolute;left: 0;display: table-cell;display: -ms-flexbox; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-align: start; align-items: flex-start; overflow: hidden; top: 0; text-align: center; width: 100%; height: 100%; background: rgba(0,0,0,0.5); line-height: 100%; vertical-align: middle; padding-top: 50%;} .fenlei10 ul li:hover img{transform: scale(1.1); transition: all 0.8s ease 0s; -webkit-transform: scale(1.1); -webkit-transform: all 0.8s ease 0s;} .fenlei10 ul li:hover p{background: rgba(0,0,0,0);} .fenlei4{width: 100%; margin: 0 auto;height: auto; overflow: hidden;} .fenlei4 ul li{ width: 48%; float: left; overflow: hidden; position: relative; height: 100%; margin:5px;} .fenlei4 ul li a{ display: flex;} .fenlei4 ul li img{ transform: scale(1); transition: all 0.8s ease 0s; -webkit-transform: scale(1); -webkit-transform: all 0.8s ease 0s; display: block; float: left; width: 40%;} .fenlei4 ul li p{ color: #fff;float: left;width: 60%; font-size: 18px; padding-left: 2%; padding-top: 15px; font-size: 1.625rem; background: rgba(0,0,0,1); line-height: 100%; vertical-align: middle; } .fenlei4 ul li p span{ font-size: 14px; color: #D5D5D5; line-height: 30px; margin-top: 20px; display: block;} .fenlei4 ul li:hover p{ color: #ff1c8e; transition: 0.5s;} .slider-con-right, .slider-con-left { width: 50%; height: 100%; position: absolute; padding:0 80px; padding:0 5rem; z-index:5; top: -40px; top: -2.5rem; padding-top: 40px; padding-top: 2.5rem; } .slider-con-right {right:0;} .slider-con-right ul, .slider-con-left ul { margin: 3% 0 5% 0; padding-left:0; } .slider-con-right li, .slider-con-left li { color: #ff1c8e; background: url(../fonts/check-icon3.svg) no-repeat center left; background-size: 20px 20px; background-size: 1.25rem 1.25rem; padding: 2px 0px 2px 30px; padding: 0.125rem 0rem 0.125rem 1.875rem; list-style-type: none; font-weight: bold; font-size: 20px; font-size: 1.25rem; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .slide-start p{ max-width: 650px; max-width: 40.625rem; } .slide-start .ce-gallery figure { margin-right: 10px; margin-right: 0.625rem; } .slide-start .ce-gallery figcaption { text-transform: uppercase; text-align: center; width:100%; font-style: normal; font-weight: bold; font-size: 14px; font-size: 0.875rem; line-height: 16px; line-height: 1rem; padding-top: 0px; max-width: 140px; max-width: 8.75rem; } .slide-start .ce-gallery figcaption::before { content: " "; background-image: url("../fonts/pjurlove_webseite_icons_linie.svg"); background-repeat: no-repeat; background-position: center; background-size: 140px auto; background-size: 8.75rem auto; height: 30px; height: 1.875rem; width: 100%; display: block; max-width: 140px; max-width: 8.75rem; } .slide-start .ce-gallery img { display: block; margin-top:20%; padding: 0 20px; padding: 0 1.25rem; width: 140px; width: 8.75rem; } /* Navigation */ #section1 .fp-slidesNav, #section2 .fp-slidesNav, #section3 .fp-slidesNav, #section4 .fp-slidesNav, #section5 .fp-slidesNav, #section6 .fp-slidesNav, #section7 .fp-slidesNav, #section8 .fp-slidesNav, #section9 .fp-slidesNav, #section10 .fp-slidesNav, #section11 .fp-slidesNav, #section12 .fp-slidesNav, #section13 .fp-slidesNav, #section14 .fp-slidesNav { position: absolute; z-index: 4; opacity: 1; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); margin: 0 auto !important; width: 50%; text-align: center; } #section1 .fp-slidesNav, #section3 .fp-slidesNav, #section5 .fp-slidesNav, #section7 .fp-slidesNav, #section9 .fp-slidesNav, #section11 .fp-slidesNav, #section13 .fp-slidesNav { right: 0; } #section2 .fp-slidesNav, #section4 .fp-slidesNav, #section6 .fp-slidesNav, #section8 .fp-slidesNav, #section10 .fp-slidesNav, #section12 .fp-slidesNav, #section14 .fp-slidesNav { left: 0; } .fp-controlArrow { bottom: -20px; bottom: -1.25rem; z-index: 1000 !important; } .fp-controlArrow.fp-next { right:0; left:140px; left:8.75rem; } .fp-controlArrow.fp-prev { left: 80px !important; left: 5rem !important; } .fp-controlArrow.fp-prev, .fp-controlArrow.fp-next{ width: 50px; width: 3.125rem; height: 50px; height: 3.125rem; border: 1px solid #969696; border: 0.0625rem solid #969696; background-color: #646464; border-radius: 50%; background-repeat: no-repeat; background-size: 35% auto; background-position: center; z-index: 1000 !important; position: absolute; transition: background 0.3s; } .fp-controlArrow.fp-prev { left: 0; background-image:url(../fonts/pfeil-rechts-grau.svg); } .fp-controlArrow.fp-next { right: 0; background-image:url(../fonts/pfeil-links-grau.svg); } .fp-controlArrow.fp-prev:hover { background-image:url(../fonts/pfeil-rechts-grau.svg); background-repeat: no-repeat; background-size: 50% auto; background-position: center; } .fp-controlArrow.fp-next:hover { background-image:url(../fonts/pfeil-links-grau.svg); background-repeat: no-repeat; background-size: 50% auto; background-position: center; } /* Produkte-Navigation #section0 * --------------------------------------- */ #produkte-nav{ padding: 25px 0 10px 20px; padding: 1.5625rem 0 0.625rem 1.25rem; } #produkte-nav a{ display: inline-block; margin: 0 5px; margin: 0 0.3125rem; } #produkte-nav a img{ height: 160px; height: 10rem; width: auto; } #kat4 #produkte-nav a:nth-child(2) img{height: 180px; height: 11.25rem;} /*Produkte Störer - NEU!*/ #kat1 #prod15-kl::before, #kat3 #prod9-kl::before { content: ''; width: 30px; width: 1.875rem; height: 30px; height: 1.875rem; background-image: url(../fonts/10e23e39021a40b0bbfcb5efb8d9b932.svg); background-repeat: no-repeat; background-position: center 18px; background-position: center 1.125rem; background-size: 15px 10px; background-size: 0.9375rem 0.625rem; border:none; } /* Scroll-Down * --------------------------------------- */ #scroll-btn, .scroll-btn { display: inline-block; z-index: 1000; position: absolute; bottom: 20px; bottom: 1.25rem; left: 50%; width: 40px; width: 2.5rem; height: 40px; height: 2.5rem; background: #ff1c8e; border-radius: 50%; margin-left: -20px; margin-left: -1.25rem; background-image:url(../images/arrow-down.svg); background-repeat: no-repeat; background-position: center 18px; background-position: center 1.125rem; background-size: 15px 10px; background-size: 0.9375rem 0.625rem; border:none; } #scroll-btn-start-wrap {} #scroll-btn-start { padding: 15px; padding: 0.9375rem; border: 2px solid #ff1c8e; border: 0.125rem solid #ff1c8e; display: inline-block; text-decoration: none; font-weight: 600; color: #ff1c8e; } .pulse { display: block; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 rgba(181,36,139, 0.4); animation: pulse 2s infinite; } @keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(181,36,139,0.4); -moz-box-shadow: 0 0 0 0 rgba(181,36,139,0.4); box-shadow: 0 0 0 0 rgba(181,36,139, 0.4); } 70% { -webkit-box-shadow: 0 0 0 20px rgba(181,36,139,0); -webkit-box-shadow: 0 0 0 1.25rem rgba(181,36,139,0); -moz-box-shadow: 0 0 0 20px rgba(181,36,139,0); -moz-box-shadow: 0 0 0 1.25rem rgba(181,36,139,0); box-shadow: 0 0 0 20px rgba(181,36,139,0); box-shadow: 0 0 0 1.25rem rgba(181,36,139,0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255,221,0 0); -moz-box-shadow: 0 0 0 0 rgba(181,36,139,0); box-shadow: 0 0 0 0 rgba(181,36,139,0); } } #scroll-btn-top{ position: fixed; bottom: 0; right: 20px; right: 1.25rem; width: 40px; width: 2.5rem; height: 40px; height: 2.5rem; background: #ff1c8e; background-image:url(../images/arrow-up.svg); background-repeat: no-repeat; background-position: center 18px; background-position: center 1.125rem; background-size: 40% auto; z-index: 1000; display: none; } #scroll-btn-top:hover{ cursor: pointer; } /* Section Kategorie Farben * --------------------------------------- */ /* Kategorie 5 - SPA */ #kat5 #logo {background: none;} #kat5 .fp-slidesNav {background: linear-gradient(to left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0) 100%);} #kat5 .fp-slidesNav ul li a.active span { background: #fff !important; opacity: 1; } #kat5 .fp-slidesNav ul li a span, #kat5 #fp-nav ul li a span { background: #fff !important; opacity: 0.5; } #kat5 #fp-nav ul li a.active span { background-color: #ff1c8e !important; opacity: 1; } #kat5 .fp-controlArrow.fp-next { right: 0; background-image: url(../fonts/pfeil-links-weiss.svg); } #kat5 .fp-controlArrow.fp-prev { right: 0; background-image: url(../fonts/pfeil-rechts-weiss.svg); } #kat5 #section1 .fp-controlArrow.fp-prev, #kat5 #section1 .fp-controlArrow.fp-next { background-color: #8C1C59; border: none; } #kat5 #section2 .fp-controlArrow.fp-prev, #kat5 #section2 .fp-controlArrow.fp-next { background-color: #C14B58; border: none; } #kat5 #section3 .fp-controlArrow.fp-prev, #kat5 #section3 .fp-controlArrow.fp-next { background-color: #BA9B37; border: none; } #kat5 #section4 .fp-controlArrow.fp-prev, #kat5 #section4 .fp-controlArrow.fp-next { background-color: #6C995A; border: none; } #kat5 #section5 .fp-controlArrow.fp-prev, #kat5 #section5 .fp-controlArrow.fp-next { background-color: #8A8D8F; border: none; } #kat5 #section0 {background-position: bottom;} #kat5 #section1 #icon-bg-wrap-right, #kat5 #section1 {background-color: #560934;} #kat5 #section1 h1 span {color: #8C1C59;} #kat5 #section2 #icon-bg-wrap-left, #kat5 #section2 {background-color: #96212d;} #kat5 #section2 h1 span {color: #C14B58;} #kat5 #section3 #icon-bg-wrap-right, #kat5 #section3 {background-color: #926f2c;} #kat5 #section3 h1 span {color: #BA9B37;} #kat5 #section4 #icon-bg-wrap-left, #kat5 #section4 {background-color: #39682c;} #kat5 #section4 h1 span {color: #6C995A;} #kat5 #section5 #icon-bg-wrap-right, #kat5 #section5 {background-color: #545454;} #kat5 #section5 h1 span {color: #8A8D8F;} /* Kategorie 6 & 7 - med #kat6 #logo, #kat7 #logo {background: #fff; padding: 0px 10px;} #kat7 .bl-cnt, #kat6 .bl-cnt { background: rgba(255,255,255,0.6); } #kat7 #section0 h1, #kat6 #section0 h1 { color: #585858; } #kat7 .bl-cnt p, #kat6 .bl-cnt p{ color: #585858; } #kat7 #section0, #kat6 #section0 { color: #585858; } #kat7 .section, #kat7 #icon-bg-wrap-right, #kat7 #icon-bg-wrap-left, #kat6 .section, #kat6 #icon-bg-wrap-right, #kat6 #icon-bg-wrap-left {background-color: #fff;} #kat7 .slide-start .ce-gallery figcaption, #kat6 .slide-start .ce-gallery figcaption { color: #000; } #kat7 .slider-con-right p, #kat7 .slider-con-left p, #kat6 .slider-con-right p, #kat6 .slider-con-left p {color:#585858;} #kat7 .slider-con-right h1, #kat7 .slider-con-left h1, #kat7 .slider-con-right h1 span, #kat7 .slider-con-left h1 span, #kat6 .slider-con-right h1, #kat6 .slider-con-left h1, #kat6 .slider-con-right h1 span, #kat6 .slider-con-left h1 span {color:#585858;} #kat7 .slider-con-right .panel-wrapper h1, #kat7 .slider-con-left .panel-wrapper h1, #kat7 .slider-con-right .panel-wrapper h1 span, #kat7 .slider-con-left .panel-wrapper h1 span, #kat6 .slider-con-right .panel-wrapper h1, #kat6 .slider-con-left .panel-wrapper h1, #kat6 .slider-con-right .panel-wrapper h1 span, #kat6 .slider-con-left .panel-wrapper h1 span {color:#fff;} #kat7 .slider-con-right h3, #kat7 .slider-con-left h3, #kat6 .slider-con-right h3, #kat6 .slider-con-left h3 {color:#585858;} #kat7 .panel-wrapper .detail, #kat6 .panel-wrapper .detail {color:#fff;} #kat7 .panel-wrapper .detail, #kat6 .panel-wrapper .detail {color:#fff;} #kat7 .slider-con-right li, #kat7 .slider-con-left li, #kat6 .slider-con-right li, #kat6 .slider-con-left li{ color:#585858; background: url(../fonts/check-icon3-grau.svg) no-repeat center left; padding: 2px 0 2px 26px; list-style-type: none; background-size: 17px 17px; font-weight: bold; } #kat7 .slider-con-right .panel-wrapper li, #kat7 .slider-con-left .panel-wrapper li, #kat6 .slider-con-right .panel-wrapper li, #kat6 .slider-con-left .panel-wrapper li{ color:#ff1c8e; background: url(../fonts/check-icon3.svg) no-repeat center left; padding: 2px 0 2px 26px; list-style-type: none; background-size: 17px 17px; font-weight: bold; } #kat7 .fp-slidesNav, #kat6 .fp-slidesNav {background: linear-gradient(to left, rgba(25,25,25,0) 0%,rgba(25,25,25,0.1) 50%,rgba(25,25,25,0) 100%);} #kat7 .fp-controlArrow.fp-prev, #kat7 .fp-controlArrow.fp-next, #kat6 .fp-controlArrow.fp-prev, #kat6 .fp-controlArrow.fp-next{ border:none; background-color: #969696; } #kat7 .fp-controlArrow.fp-prev, #kat6 .fp-controlArrow.fp-prev { background-image: url(../fonts/pfeil-rechts-grau2.svg); } #kat7 .fp-controlArrow.fp-next, #kat6 .fp-controlArrow.fp-next { background-image: url(../fonts/pfeil-links-grau2.svg); } #kat7 .liquid-slider, #kat6 .liquid-slider {background:#585858;} #kat7 .liquid-slider p, #kat6 .liquid-slider p {color:#fff;} #kat7 .ls-nav .current a, #kat6 .ls-nav .current a {color: #fff; background: #585858;} #kat7 .ls-nav ul li, #kat6 .ls-nav ul li {background:none;} #kat7 .ls-nav a, #kat6 .ls-nav a {color: #585858;} #kat7 #produkt-kat { width: 30%; } #kat6 #content-slider-btn, #kat7 #content-slider-btn { color: #585858; background: none !important; border: 2px solid #585858 !important; } #kat6 #content-slider-btn:hover, #kat7 #content-slider-btn:hover { color: #fff; } #kat6 #content-slider-btn::before, #kat7 #content-slider-btn::before { background: #585858; } #kat6 .slider-con-right a, #kat6 .slider-con-left a, #kat7 .slider-con-right a, #kat7 .slider-con-left a { color:#585858; } #kat6 .panel-wrapper a, #kat7 .panel-wrapper a { color: #fff; } #kat6 .panel-wrapper a:hover, #kat7 .panel-wrapper a:hover { color: #ff1c8e; } #kat6 .slider-con-right a::after, #kat6 .slider-con-left a::after, #kat7 .slider-con-right a::after, #kat7 .slider-con-left a::after { background-image: url(../fonts/arrow-right-grau.svg); }*/ /* Pressestimmen * --------------------------------------- */ #presse { background: #efefef; color: #000; width: 100%; background-image: url(../images/hintergrund_pjurlove-hell.jpg); } #presse h3 { font-size: 36px; font-size: 2.25rem; font-weight: normal; font-family: 'ProximaNova-Extrabld'; color: #000; margin: 0; padding: 40px 20px; padding: 2.5rem 1.25rem; text-align: center; text-transform:none; max-width: 1170px; max-width: 73.125rem; width:100%; margin: 0 auto; } #presse-box { padding: 40px; padding: 2.5rem; text-align: center; transition: 0.3s; display: inline-block; } #presse-box img { width: 100%; height: auto; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1); } #presse-box:hover {cursor: pointer;} #presse-box:hover img { transition: 0.3s; filter: none; } #presse .owl-next span, #presse .owl-prev span {display: none;} /* Footer * --------------------------------------- */ footer { background:#4d4d4d; color: #fff; text-align: center; } #footer-nav1 ul { width:50%; float: left; margin:0; padding:0; } #footer-nav1 { width: 30%; float: left;} #footer-nav2 { width: 70%; float: left;} #footer-nav2 ul {padding:0;} #social-media { margin: 0 auto; padding: 25px 0px 5px 0px; text-align: center; } #social-media a { margin: 5px 7px; width: 40px; height: 40px; border-radius: 360px; background: #fff; display: inline-block; transition: 0.3s; background-repeat: no-repeat; background-size: 70% auto; background-position: center; } #social-media a:hover { background: #ff1c8e; background-repeat: no-repeat; background-size: 70% auto; background-position: center; } #facebook, #facebook:hover {background-image:url(../images/facebook.svg) !important;} #twitter, #twitter:hover {background-image:url(../images/twitter.svg) !important;} #google, #google:hover {background-image:url(../images/google.svg) !important;} #instagram, #instagram:hover {background-image:url(../images/instagram.svg) !important;} #youtube, #youtube:hover {background-image:url(../images/youtube.svg) !important;} #copyright{ padding-bottom: 20px; } #copyright p{ padding: 0; margin: 0; font-size: 14px; } #copyright a{ float: right; width: 40px; height: 40px; background: #ff1c8e; background-image:url(../fonts/arrow-up.svg); background-repeat: no-repeat; background-position: center 18px; background-size: 40% auto; margin-top: -20px; } /* Start Text Animation * --------------------------------------- */ .type-wrap{ margin:10px auto; padding:20px; } #type { font-family: 'TENSANS'; font-size: 5rem; font-weight: 500; color: #fff; margin:0; padding:0; font-weight: normal; } #typed3 { font-size: 5rem; font-weight: normal; font-variant: small-caps; color: #ff1c8e; font-family: 'TENSANS'; margin:0; padding:0; margin-left:20px; } /* Display Rotate */ /* STYLEN!!!!!!!!*/ #test { display: none; width:100%; height: 100vh; background: #ff1c8e; } /* Rootline * --------------------------------------- */ #rootline {padding-top: 20px; margin-bottom: -20px;} #rootline img {width: 20px; height: 20px;} #rootline a { color: #ccc; font-weight: bold; font-size: 14px; font-size: 0.875rem; text-decoration:none; padding: 0 10px; padding: 0 0.625rem; vertical-align: middle; display: inline-block; border-right: 2px solid #3c3c3c; border-right: 0.125rem solid #3c3c3c; } #rootline a:last-child { border-right: none; } #rootline a:hover { color: #fff; } /* Contentseite * --------------------------------------- */ #content-wrapper { width: 100%; background-color: #111; } .container-content { max-width: 1260px; max-width: 78.75rem; width: 100%; margin: 0 auto; padding: 0 20px; padding: 0 1.25rem; } #content { padding: 60px 0 60px 0; padding: 3.75rem 0 3.75rem 0; } #content-wrapper { background-image:url(../images/hintergrund_pjurlove.jpg); background-attachment: fixed; background-repeat: repeat; background-position: 0 0; } #sidebar { width: 240px; width: 14rem; width: 23.7705%; float: left; } #content-outer{ margin-left: 300px; margin-left: 18.75rem; margin-left: 28.6885%; } #content-main { width: 100%; float: left; } #content-main p { padding-bottom: 15px; padding-bottom: 0.9375rem; } #content-main .ce-bodytext ul li { color:#ff1c8e; list-style: inside; } #content h1 { font-family: 'ProximaNova-Extrabld'; color: #fff; font-weight: normal; margin-bottom: 20px; margin-bottom: 1.25rem; font-size: 40px; font-size: 2.5rem; text-transform: uppercase; } #zwei-Spalter .column { width:50%; float: left; } #drei-Spalter .column { width:33.333%; float: left; padding-right: 10px; padding-right: 0.625rem; } .c-left { padding-right: 20px; padding-right: 1.25rem; } .c-right { padding-left: 20px; padding-left: 1.25rem; } /* Sidebar * --------------------------------------- */ #sidebar h3 { font-family: 'ProximaNova-Extrabld'; padding-bottom: 10px; padding-bottom: 0.9375rem; font-size: 20px; font-size: 1.25rem; margin: 0 0 10px; margin: 0 0 0.9375rem; border-bottom: 1px solid #ccc; border-bottom: 0.0625rem solid #ccc; color: #fff; font-weight: normal; padding-top: 0px; } #p24 #sidebar #content-nav, #p26 #sidebar #content-nav, #p27 #sidebar #content-nav, #p36 #sidebar #content-nav, #p46 #sidebar #content-nav, #p48 #sidebar #content-nav, #p85 #sidebar #content-nav {display: none;} #content-nav-mobile {display: none;} #p36 #content-outer, #p26 #content-outer, #p27 #content-outer, #p46 #content-outer, #p48 #content-outer, #p85 #content-outer {margin-left: 0;} #sidebar ul { margin:0; padding:0; padding: 20px; padding: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; border: 2px solid #fff; border: 0.125rem solid #fff; } #sidebar li {list-style: none;} #sidebar li.active:before { content: " "; width: 10px; height: 10px; border-radius: 360px; background: #ff1c8e; position: absolute; margin-left: -20px; margin-top: 14px; } #sidebar li.active { margin-left: 20px; margin-left: 1.25rem; } #sidebar a{ color: #fff; text-decoration: none; font-weight: bold; font-family: 'ProximaNova-Regular'; font-size: 16px; padding: 7px 0; display: inline-block; width: 100%; transition: 0.3s; } #sidebar a:hover{ color: #ff1c8e; } #sidebar p a{ display: inline; } #sidebar-contact { margin-top: 20px; text-align: center; } #sidebar-contact h4 { font-size: 18px; font-weight: 500; padding:0; } #sidebar-contact p { color: #ccc !important; } .ce-gallery figcaption { color: #ccc; font-size: 12px; font-style: italic; padding: 10px 0; text-align: center; } #sidebar-btn a { background: #ff1c8e; color: #000 !important; text-transform: uppercase; width: 100%; display: inline-block !important; padding: 15px !important; padding: 0.9375rem !important; text-align: center; font-family: 'ProximaNova-Extrabld' !important; font-weight: normal !important; margin-bottom: 10px; margin-bottom: 0.625rem; } #sidebar-btn a:hover { cursor: pointer; background:#ffcc00; } header.cnt { width: 100%; background: #000; } #logo.cnt { position: relative; top: 0; width: 120px; height: 120px; float: left; } .prolist { -webkit-background-size: cover; background-size: cover; text-align: center; width: 100%; margin-top: 100px; position: relative; font-size: 18px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100vh; } .listClass { position: absolute; top: 45px; right: 140px; } .listClass ul { width: 100%; display: table; } .listClass ul.ul3 { padding-left: 280px; } .listClass ul.ul3 li { float: right; } .listClass ul.ul4 li { float: right; } .listClass ul li { float: left; width: 280px; height: 215px; overflow: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; position: relative; } .listClass ul li p{ position: absolute; z-index: 99; line-height: 100%; vertical-align: middle; top: 45%; left: 0; right: 0; font-weight: bold; font-size: 18px; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; opacity: 0; color: #fff;} .listClass ul li span{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 1; display: block; opacity: 0;transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .listClass ul li:hover span{ opacity: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .listClass ul li:hover p{opacity: 1; top: 35%; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;} .listClass ul li em{content: ''; width:100px; height:40px; border: 1px solid #000; border-radius: 5px; position: absolute; margin:0 auto; top: 50%;left: 0; right:0; z-index: 1; transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s; opacity: 0; line-height: 40px; text-transform: uppercase;} .listClass ul li:hover em{ transition: all 0.5s ease 0s;-webkit-transform: all 0.5s ease 0s;opacity: 1;background:#000; color: #fff; } .listClass ul li:hover { z-index: 2; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 2px 18px rgba(0,0,0,0.88); box-shadow: 0 2px 18px rgba(0,0,0,0.88); -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .listClass ul li a { width: 100%; height: 100%; display: block; } .listClass ul li a img { width: 100%; min-height: 100%; } @media screen and (max-width: 1375px) { .listClass { top: 100px; right: 60px; } .listClass ul.ul3 { padding-left: 220px; } .listClass ul li { width: 220px; height: 200px; } } @media screen and (max-width: 750px) { .prolist{ margin-top: 0;} .listClass { top: 50%; right: 50%; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); width: 100%; } .listClass ul.ul3 { padding-left: 0; } .listClass ul li { width: 33.333%; height: 120px; } } #pages { text-align: center; margin: 20px 0 30px } #pages a { font-family: Arial; font-size: 14px; display: inline-block; width: auto; padding:0 10px; height: 33px; line-height: 33px; border: 1px solid #e6e6e6; background: #fff; color: #646464; margin-right: 8px; text-align: center } #pages span:first-child{ margin-right:5px;} #pages a:hover{ color:#ff1c8e;} #pages a.page-num-current { color:#ff1c8e; } #pages a.a1 { display: none; width: 108px; font-size: 12px; float: left; text-align: left; border: none; background: 0 0; color: #646464 } #pages a.a1 font { color: #fead0f; padding: 0 3px } .product--info .biaoti{ text-align: left; font-size: 24px;} /* Suche * --------------------------------------- */ #suche { padding-top:40px; text-align: right; } #suche input { background-color: #333; border: 1px solid #333; padding: 10px 15px; color: #fff; font-size: 14px; text-align: left; } #suche-btn{ background-image: url(../images/lupe.svg) ; background-size: 19px 19px; background-repeat: no-repeat; background-position: center; width: 40px; height: 42px; border:none; background-color: #333; float:right; border-left: 1px solid #3f3f3f !important; } #suche-btn:hover{ background-image: url(../images/lupe2.svg) ; cursor: pointer; background-size: 19px 19px; background-repeat: no-repeat; background-position: center; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #888; font-size: 14px; opacity: 1; } ::-moz-placeholder { /* Firefox 19+ */ color: #888; font-size: 14px; opacity: 1; } :-ms-input-placeholder { /* IE 10+ */ color: #888; font-size: 14px; opacity: 1; } :-moz-placeholder { /* Firefox 18- */ color: #888; font-size: 14px; opacity: 1; } #Sidenav-Suche { border-bottom: 2px solid #333; border-bottom: 0.125rem solid #333; margin: 0px 30px; margin: 0rem 1.875rem; margin-top:15px; margin-top:0.9375rem; margin-bottom: 60px; margin-bottom: 3.75rem; } #Sidenav-Suche input { background-color: #fff; border: none; padding: 10px 0px 5px 0px; color: #000; font-size: 14px; font-size: 0.875rem; text-align: left; width: 200px; width: 12.5rem; float:left; } #Sidenav-Suche #suche-btn { background-color:#fff; float: none; border-left: none !important; height: 30px; height: 1.875rem; position: absolute; } /* tt_news * --------------------------------------- */ /*Liste - Übersicht */ .news-list-item { background: #000; width: 31%; float: left; margin: 0 1% 20px 1%; margin: 0 1% 1.25rem 1%; min-height: 500px; min-height: 31.25rem; max-height: 500px; max-height: 31.25rem;; transition: 0.3s; overflow: hidden; padding-bottom: 20px; padding-bottom: 1.25rem; border: 1px solid #222; border: 0.0625rem solid #222; } .news-list-item:hover { cursor:pointer; } .news-list-container img{ float: none; margin:0; height: auto !important; width: 100% !important; transition: 0.5s; } #news-list-item-img-wrap { width: 100%; height: auto; min-height: 120px; background: #000; overflow: hidden; background-image: url(../fonts/pjur-love_logo_de.svg); background-size: 70px 70px; background-repeat: no-repeat; background-position: center; text-align: center; } .news-list-date{ color: #555; float: none; font-size: 12px; font-weight:700; padding: 15px; } .news-list-item h2 {margin-top:0px !important;} .news-list-item h2 a { margin-top: 0px !important; text-decoration: none; color: #fff; font-size: 18px; display: inline-block; margin: 0 15px; line-height: 120%; transition: 0.3s; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .news-list-item h2 a span { color:#ff1c8e; font-size: 16px; display: block; margin-bottom: 5px; } .news-list-item p{ padding: 0 15px 0 15px; margin:0 !important; color: #ccc !important; } .news-list-morelink { background: #ff1c8e; width: 20px; height: 20px; float: right; border-radius: 360px; } .news-list-container .news-list-category, .showResultsWrap, .news-list-morelink{ display: none; } .news-list-browse { font-size: 14px; color: #fff; } .news-list-browse a { font-weight: 700; text-decoration: none; color: #fff; } .news-list-item:hover h2 a { color:#ff1c8e; transition: 0.3s; } .news-list-item:hover img { transition: 0.5s; transform: scale(1.1); } .news-list-item #news-list-item-img-wrap { transition: background 0.5s; } .news-list-item:hover #news-list-item-img-wrap { background-size: 90px 90px; } .tx-ttnews-browsebox { clear: both; text-align: center; } .tx-ttnews-browsebox p { display: none; } .tx-ttnews-browsebox ul li { display: inline-block; font-size: 18px; margin: 0 2px; } .tx-ttnews-browsebox ul li strong { color: #ff1c8e; text-decoration: underline; } .textny embed, .textny video, .textny iframe { display: block; margin: 0 auto; max-width: 100%; height: auto; border: none; } /* Single - Detailansicht */ #p29 .news-single-item p{ padding-bottom: 15px; } #p22 .news-list-date{display:none} .news-single-item { padding:0; margin:0; margin-top: -20px; } .news-single-item a { color:#ff1c8e; } .news-single-item a:hover { color:#fff; } .news-single-item h2 { text-align: center; color: #fff !important; } #news-single-item-img .news-single-img { float:none; margin:0; margin-bottom: 20px; } #news-single-item-img{} #news-single-item-img .news-single-img{ text-align: center; } #news-single-item-img .news-single-img a:first-child { display: block ; width: 100%; height: auto; float: none ; margin-top: 20px; } #news-single-item-img .news-single-img a:first-child img { width: 100%; height: auto; } #news-single-item-img .news-single-img a { display: none; } #news-single-item-img-gallery { margin-top:20px; padding-top: 20px; border-top: 2px solid #ff1c8e; } #news-single-item-img-gallery #news-single-item-img .news-single-img a { display: inline-block; margin-right: 10px; width: auto; float:left !important; padding: 0; margin: 0; } #news-single-item-img-gallery #news-single-item-img .news-single-img a img { max-width: 150px !important; height: auto; margin-right: 5px; } .news-single-imgcaption {padding:0;margin: 0;} #back-btn { color: #ff1c8e; text-decoration: none; margin-top: 20px; display: inline-block; transition: background 0.3s; float:right; } #back-btn::before{ content:" "; display: inline-block; background-image: url(../fonts/back-btn.svg); background-position: left center; background-repeat: no-repeat; background-size: 20px 20px; background-size: 1.25rem 1.25rem; transform: none; height: 20px; width: 20px; margin-right: 5px; float:left; } #back-btn:hover { color:#fff; } /* Presse Detailansicht */ #p37 #news-single-item-img {display: none;} #p37 #news-single-item-img-gallery #news-single-item-img {display: block;} #p37 #news-single-item-img-gallery #news-single-item-img a:first-child {display: none;} /* Footer * --------------------------------------- */ #headline {background: #fff; width: 100%; padding: 10px 0;transition: background 0.3s;} #headline:hover {background: #ff1c8e; cursor:pointer;} #box1, #box2, #box3 { text-align: left; float: left; padding-bottom: 20px; padding-top: 10px; } #box1{width: 15%; text-align: center; float: left;} #box2{width: 50%;} #box3{width: 33%; margin-right: 2%;} /* Footer pjur goup */ #box1 img{ float: left; max-width: 100%; height: auto; } .col-md-6 { width: 50%;float: left; } .foot-gp .row .col-md-6 { padding-left: 4px; padding-right: 4px; } .foot-form{ margin-top: 20px; position: relative; } .foot-gp{ margin-bottom: 10px; } .foot-gp .row{ margin-left: -4px; margin-right: -4px; } .foot-gp .row .col-md-6{ padding-left: 4px; padding-right: 4px; } .foot-gp-input input{ display: block; width: 100%; height: 34px; line-height: 34px; padding: 0 5px; border: none; color: #000; font-size: 12px;text-indent: 10px; background-color: #a7a7a7; } .foot-gp-input textarea{ display: block; width: 100%; padding: 5px; border: none; color: #000; font-size: 12px; background-color: #a7a7a7; text-indent: 10px;padding: 0.75rem 0 0.75rem 0; } .foot-gp-btm{ position: relative; } .foot-gp-btm input{ display: block; text-align: center; height: 42px; line-height: 42px; color: #FFFFFF; background-color: #ff1c8e; text-transform: uppercase; width: 100%; border: none; cursor: pointer; font-size: 16px; } /* Footer-Nav */ #footer-nav1, #footer-nav2 { width:30%; float:left; margin:0; } #footer-nav3 { width:40%; float:left; margin:0; padding:0 5px; } #footer .container{max-width:96%;} #footer-nav1 li, #footer-nav2 li, #footer-nav3 li { list-style:none; line-height: 30px; position: relative; } #footer-nav2 li img { max-width: 23px; height: auto; line-height: 30px; vertical-align: middle; margin-right: 3px; } #box2 a{color: #ccc; font-weight: normal;} .dalei{ margin: 13px 0 3px 0;} .dalei a{ font-weight: bold !important; color: #fff !important;} .dalei:after{ content: ""; width: 100px; height: 1px; background: #fff; position: absolute; left: 0; bottom: -2px;} #box2 a:hover{color: #ff1c8e;} .dalei a:hover{ color: #ff1c8e;} /* Newsletter */ #box3 a { background:#ff1c8e; color:#000; padding: 15px; display: inline-block; width:100%; margin-top: 15px; text-align: center; } /* Accordion */ #accordion-header-content h1 { color: #fff; font-size: 16px; line-height: 20px; text-align: center; margin: 0; padding: 0; padding: 10px 20px 10px 25px; transition: 0.3s; display: block; text-transform: none; } #accordion-header-content h1:before, #accordion-header-content h1:after { content:" "; margin: 0 !important; padding: 0 !important; height: 0px !important; width: 0px !important; } #accordion-header-content { width: 100%; border-bottom: 2px solid #ff1c8e; cursor:pointer; display: block; } #accordion-header-content:hover h1{ background: #ff1c8e; color: #000 !important; transition: 0.3s; } .trigger_active h1{ background: #ff1c8e; color: #000 !important; } #accordion-content h2 { padding: 0; margin: 0; font-size: 20px; margin-bottom: 5px; } #accordion-content { padding: 25px 0; } #accordion-content blockquote { border-left: 6px solid #232323; padding-left: 20px; font-style: italic; margin-bottom: 10px !important; } ccordion-content blockquote p{ padding:0; } .trigger:before { content: "+"; font-size: 20px; color: #fff; float: left; font-weight: bold; padding-top: 7px; padding-left: 10px; } #accordion-header-content:hover.trigger:before {color:#000;} .trigger_active:before { content: "-"; font-size: 20px; color: #000; float: left; font-weight: bold; padding-top: 5px; padding-left: 14px; } #accordion-content table { color: #fff; border-collapse: collapse; width: 100%; } #accordion-content table tr { border-bottom: 1px solid #fff; text-align: center; } #accordion-content table tr:first-child { border-bottom: 2px solid #fff; } #accordion-content table th { font-weight: bold; padding: 10px; } #accordion-content table td { padding: 10px; font-size: 15px; line-height: 1.3; } #accordion-content table td:nth-child(even) { background: rgba(0,0,0,0.3); } #accordion-content table td:last-child { text-align: left; } /*Accordion Slider #slider-accordion #accordion-header-content h1 { font-size:24px; padding: 23px 0px 15px 60px; text-align:left; line-height:25px; color:#ff1c8e; position:absolute; width:auto !important; max-width:650px; } #slider-accordion #accordion-header-content h1:hover, #slider-accordion #accordion-header-content:hover { background:none !important; } #slider-accordion #accordion-header-content h1:hover{ color:#fff !important; } #slider-accordion #accordion-content { background:#000; padding:30px 40px; margin-top:-45px; margin-bottom:40px; } #slider-accordion #accordion-header-content { border-bottom: none; height:120px; max-width: 650px !important; max-width: 40.625rem !important; width: auto !important; } #slider-accordion .trigger_active h1 { background: none; color: #fff!important; } #slider-accordion .trigger::before { content: ' '; background-image: url(../fonts/fragen.svg); background-repeat: no-repeat; background-position: center; width: 90px; height: 90px; background-size: 90px 90px; display:inline-block; position:absolute; } .float-right {float: right;}*/ /* Liquid-Slider / TabContainer * --------------------------------------- */ /* ... */ .liquid-slider .panel-wrapper p a { background: none; padding: 7px 10px 7px 25px; padding: 0.4375rem 0.625rem 0.4375rem 1.5625rem; color: #fff; display: block; margin-bottom: 20px; margin-bottom: 1.25rem; } .liquid-slider .panel-wrapper p a:hover { color: #ff1c8e; } .liquid-slider .panel-wrapper p a::after { display: none; } .liquid-slider .panel-wrapper p a::before { background: none; display: inline-block; background-image:url(../fonts/fragen.svg); background-position: center; background-repeat: no-repeat; background-size: 40px 40px; background-size: 2.5rem 2.5rem; transform: none; width: 40px; width: 2.5rem; height: 40px; height: 2.5rem; } /*Button */ .slider-con-right a, .slider-con-left a { font-size: 16px; font-size: 1rem; padding: 10px 30px 10px 15px; padding: 0.625rem 1.875rem 0.625rem 0.9375rem; text-decoration: none; color: #000; background: #ff1c8e; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; font-weight: bold; margin-right: 2px; margin-right: 0.125rem; margin-top: 5px; margin-top: 0.3125rem; } .slider-con-right a:before, .slider-con-left a:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ffca00; color: #000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .slider-con-right a::after, .slider-con-left a::after { content: ' '; background-image:url(../fonts/arrow-right.svg); background-repeat: no-repeat; background-position: center; width: 25px; width: 1.5625rem; height: 22px; height: 1.375rem; background-size: 27% auto; position: absolute; } .slider-con-right a:hover:before, .slider-con-left a:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } #content-slider-btn { font-size: 16px; font-size: 1rem; padding: 8px 15px; padding: 0.5rem 0.9375rem; text-decoration: none; color: #ff1c8e; background: none !important; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; font-weight: bold; margin-right: 2px; margin-top: 5px; width: auto; top:0; left:0; position: relative; border-radius: 0; border: 2px solid #ff1c8e !important; border: 0.125rem solid #ff1c8e !important; height: auto; } #content-slider-btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #ff1c8e; color: #000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #content-slider-btn::after { content: ''; background-image:none; width: 0px; height: 0px; display: none; } #content-slider-btn:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); } #content-slider-btn:hover { color: #000; } #c177 .ce-column a, #c179 .ce-column a, #c1235 .ce-column a, #c1232 .ce-column a{ background: none; } #c177 .ce-column a::before, #c177 .ce-column a::after, #c179 .ce-column a::before, #c179 .ce-column a::after, #c1235 .ce-column a::before, #c1235 .ce-column a::after, #c1232 .ce-column a::before, #c1232 .ce-column a::after{ content: none; } /* Display drehen */ #display-rotate { display: none; background: #ff1c8e; width: 100%; height: 100%; position: absolute; z-index: 1000; background-image:url(../fonts/rotate-smartphone.svg); background-position: center; background-repeat: no-repeat; background-size: 250px auto; background-size: 15.625rem auto; } /* Formulare * --------------------------------------- */ .tx-powermail { background: #000; color:#fff; padding: 20px; padding: 1.25rem; border: 1px solid #222; border: 0.0625rem solid #222; } .tx-powermail input, .tx-powermail textarea, .tx-powermail select { width:100%; background:#222; border: 1px solid #000; border: 0.0625rem solid #000; color: #fff; padding: 10px 15px; padding: 0.625rem 0.9375rem; font-size: 16px; font-size: 1rem; } .tx-powermail select { width: auto; } .tx-powermail option { font-size: 16px; font-size: 1rem; } .tx-powermail input:focus, .tx-powermail textarea:focus, .tx-powermail select:focus{ border: 1px solid #ff1c8e; border: 0.0625rem solid #ff1c8e; } .tx-powermail input.parsley-error { border: 1px solid red; border: 0.0625rem solid red; } .parsley-required { color:red; list-style: none; } .powermail_label { margin-top: 15px; margin-top: 0.9375rem; color: #ccc; } .powermail_legend { font-size: 20px; font-size: 1.25rem; color: #ff1c8e; } .powermail_fieldset { border:none; } .powermail_fieldset_2 { margin-top: 20px; margin-top: 1.25rem; } .powermail_fieldwrap { margin-top:15px; margin-top:0.9375rem; } .tx-powermail .powermail_submit { background: #ff1c8e; color: #000; padding: 10px 15px 10px 15px; padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; float: right; font-weight: bold; display: inline-block; width: auto; font-size: 16px; font-size: 1rem; } .tx-powermail .powermail_submit:hover { cursor:pointer; background:#ffcc00; } .powermail_field::after { content: " "; clear: both; display: block; } .nolabel legend {display: none;} .powermail_fieldwrap_type_html {margin-bottom: 30px;} /* Feedback */ .powermail_fieldset_15 .radio { width: 20%; float: left; font-size: 14px; font-size: 0.875rem; padding-left: 20px; padding-left: 1.25rem; } .powermail_fieldset_15 .powermail_radio { width: 20px; width: 1.25rem; float: left; margin-top: 3px; margin-top: 0.1875rem; margin-left: -20px; margin-left: -1.25rem; } .powermail_fieldset_15 .powermail_fieldwrap_type_radio { margin-bottom: 40px; margin-bottom: 2.5rem; padding-bottom: 20px; padding-bottom: 1.25rem; } .powermail_fieldwrap_geschlecht { width: 30%; float: left; } .powermail_fieldwrap_altersgruppe, .powermail_fieldwrap_wohnland { width: 35%; float: left; } .powermail_fieldwrap_taetigkeit { width: 100%; clear: both; } .powermail_fieldwrap_geschlecht .radio {width: 50%;} .powermail_fieldset_15 .powermail_fieldwrap_type_radio .powermail_label { color: #ffdd00; } .powermail_fieldwrap_geschlecht .powermail_label, .powermail_fieldwrap_altersgruppe .powermail_label, .powermail_fieldwrap_wohnland .powermail_label, .powermail_fieldwrap_taetigkeit .powermail_label{ color: #ccc !important; display: block; margin-bottom: 5px; margin-bottom: 0.3125rem; } .powermail_fieldwrap_frage1 .powermail_label, .powermail_fieldwrap_frage2 .powermail_label, .powermail_fieldwrap_frage3 .powermail_label, .powermail_fieldwrap_frage4 .powermail_label, .powermail_fieldwrap_frage5 .powermail_label, .powermail_fieldwrap_frage6 .powermail_label, .powermail_fieldwrap_frage7 .powermail_label, .powermail_fieldwrap_frage8 .powermail_label { display: block; margin-bottom: 20px; margin-bottom: 1.25rem; font-size: 18px; font-size: 1.125rem; } .powermail_fieldwrap_frage1, .powermail_fieldwrap_frage2, .powermail_fieldwrap_frage3, .powermail_fieldwrap_frage4, .powermail_fieldwrap_frage5, .powermail_fieldwrap_frage6, .powermail_fieldwrap_frage7, .powermail_fieldwrap_frage8{ border-bottom: 2px solid rgba(255,255,255,0.1); border-bottom: 0.125rem solid rgba(255,255,255,0.1); } .powermail_fieldwrap_frage8{ border-bottom: 6px solid rgba(255,255,255,0.1); border-bottom: 0.375rem solid rgba(255,255,255,0.1); } .powermail_fieldwrap_frage3 .powermail_radio, .powermail_fieldwrap_frage4 .powermail_radio, .powermail_fieldwrap_frage5 .powermail_radio, .powermail_fieldwrap_frage6 .powermail_radio, .powermail_fieldwrap_frage7 .powermail_radio, .powermail_fieldwrap_frage8 .powermail_radio{ width: 100%; float: none; margin-top: 0px; margin-left: 0px; text-align: center; } .powermail_fieldwrap_frage3 .radio, .powermail_fieldwrap_frage4 .radio, .powermail_fieldwrap_frage5 .radio, .powermail_fieldwrap_frage6 .radio, .powermail_fieldwrap_frage7 .radio, .powermail_fieldwrap_frage8 .radio{ text-align: center; padding: 0 10px; padding: 0 0.625rem; } #p66 .powermail_form.powermail_form_9.nolabel h3, .powermail_fieldwrap_captcha label {display: none !important;} .powermail_message_error { padding: 20px; padding: 1.25rem; color: #fff; background: #f50e2f; } .powermail_message_error li {list-style: none;} @media screen and (max-width: 860px) { .powermail_fieldwrap_geschlecht .radio {width: 100%;} .powermail_fieldwrap_geschlecht {width:20%;} .powermail_fieldwrap_altersgruppe, .powermail_fieldwrap_wohnland {width: 40%;} .indexbanner1 .bd .item1 .dd1{font-size:25px; } .indexbanner1 .bd .item2 .dd1{font-size:25px; } .indexbanner1 .bd li{ font-size: 14px;} } @media screen and (max-width: 600px) { .powermail_fieldset_15 .radio { width: 100%; line-height: 20px; height: 20px; display: block; vertical-align: middle; } .powermail_fieldwrap_frage1 .powermail_label, .powermail_fieldwrap_frage2 .powermail_label, .powermail_fieldwrap_frage3 .powermail_label, .powermail_fieldwrap_frage4 .powermail_label, .powermail_fieldwrap_frage5 .powermail_label, .powermail_fieldwrap_frage6 .powermail_label, .powermail_fieldwrap_frage7 .powermail_label, .powermail_fieldwrap_frage8 .powermail_label {font-size: 16px;} .powermail_fieldwrap_frage3 .powermail_radio, .powermail_fieldwrap_frage4 .powermail_radio, .powermail_fieldwrap_frage5 .powermail_radio, .powermail_fieldwrap_frage6 .powermail_radio, .powermail_fieldwrap_frage7 .powermail_radio, .powermail_fieldwrap_frage8 .powermail_radio{ width: 20px; float: left; margin-top: 3px; margin-left: 0px; text-align: left; } .powermail_fieldwrap_frage3 .radio, .powermail_fieldwrap_frage4 .radio, .powermail_fieldwrap_frage5 .radio, .powermail_fieldwrap_frage6 .radio, .powermail_fieldwrap_frage7 .radio, .powermail_fieldwrap_frage8 .radio{ text-align: left; padding: 0; } .powermail_fieldwrap_geschlecht, .powermail_fieldwrap_altersgruppe, .powermail_fieldwrap_wohnland { width: 100%; clear: both; margin: 0px !important; padding: 0px !important; } .powermail_fieldwrap.powermail_fieldwrap_type_radio.powermail_fieldwrap_taetigkeit {padding-top: 20px;} } #p23 iframe, #p104 iframe{ border: none; } /* Suche * --------------------------------------- */ .tx-indexedsearch-searchbox, .tx-indexedsearch-rules, .tx-indexedsearch-info, .tx-indexedsearch-percent {display: none;} .tx-indexedsearch {color: #fff;} .tx-indexedsearch-browsebox {margin-bottom: 20px;} .tx-indexedsearch-res table{border: 1px solid #222; margin-bottom: -15px; padding: 20px 20px 0 20px; transition: 0.3s;} .tx-indexedsearch-res table:hover {background: #222; transition: 0.3s;} .tx-indexedsearch-title {font-size: 18px;} .tx-indexedsearch .tx-indexedsearch-res TD.tx-indexedsearch-descr {font-style: normal;} .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-descr .tx-indexedsearch-redMarkup {color: #ff1c8e;} .browsebox{text-align: right;} .browsebox a{color: #ccc;} .browsebox a:hover{color: #ff1c8e;} .tx-indexedsearch-icon {position: absolute;} .tx-indexedsearch-title a{margin-left: 10px; margin-top: -5px; display: block;} /* Teaserboxen * --------------------------------------- */ .row1, .row2{width: 100%} .row1 .t-box{width: 25%; float: left; height: 150px; height: 9.375rem;} .row2 .t-box{width: 33.333%; float: left; height: 150px; height: 9.375rem;} .t-box { background-size: cover; background-repeat: no-repeat; background-position: center; padding: 0px 0px 0px 0px; text-align: center; padding-top: 90px; padding-top: 5.625rem; overflow: hidden; } #t-box1 {background-image: url(../images/teaser-kat1.jpg);} #t-box2 {background-image: url(../images/teaser-kat2.jpg);} #t-box3 {background-image: url(../images/teaser-kat3.jpg);} #t-box4 {background-image: url(../images/teaser-kat4.jpg);} #t-box5 {background-image: url(../images/teaser-kat5.jpg);} #t-box6 {background-image: url(../images/teaser-kat6.jpg);} #t-box7 {background-image: url(../images/teaser-kat7.jpg);} .t-box:hover {cursor:pointer;} .t-box p{padding: 0 !important;} .t-box p b{ color:#ff1c8e; text-shadow: 0px -1px 0.5px rgba(0,0,0,0.7); text-shadow: 0px -0.0625rem 0.03125rem rgba(0,0,0,0.7); } .t-box p span{ height: 60px; height: 3.75rem; background:#ff1c8e; color:#000; padding: 40px 20px; padding: 2.5rem 1.25rem; height: 150px; height: 9.375rem; margin-top: -90px; margin-top: -5.625rem; background: rgba(181,36,139,0.9); font-size: 20px; font-size: 1.25rem; opacity: 0; display: block; } .t-box:hover p span { opacity: 1; } .t-box a { margin: 0; padding:0; background: rgba(0,0,0,0.5); padding: 20px; padding: 1.25rem; display: block; height: 60px; height: 3.75rem; font-weight: normal; font-size: 18px; font-size: 1.125rem; } .t-box:hover a {display: none;} /* Storelocator AU * --------------------------------------- */ /* Filter #tx-locationmanager-2733-tag-container, .location-manager__tag.location-manager__tag_regular { display: block !important; }*/ #p46 #c4813 a, #p85 #c4814 a{ background: #ff1c8e; color:#000; font-weight: bold; padding: 7px 15px 10px 15px; display: inline-block; } #p46 #c4813 a:hover, #p85 #c4814 a:hover { background: #fc0; } #tx-locationmanager-2733-map p { pointer-events: none; } #tx-locationmanager-2733-map p a{ font-weight: normal; } .store-loc-btn { font-family: 'ProximaNova-Extrabld'; display: inline-block; padding: 7px 15px; padding: 0.4375rem 0.9375rem; background: #ff1c8e; color: #000; font-weight: normal; text-transform: uppercase; font-size: 14px; font-size: 0.875rem; margin-bottom: 10px; margin-bottom: 0.625rem; } .store-loc-btn:hover { color: #000; background: #ccc; } .location-manager__tag.location-manager__tag_reset { font-size: 0; } .location-manager__tag.location-manager__tag_reset::before { content:'Reset'; font-size: 1rem; } .gm-style .gm-style-iw-c a { color: #000; } .location-manager__map-wrapper { height: 450px; height: 28.125rem; border: 1px solid #222; border: 0.0625rem solid #222; } #tx-locationmanager-2733-map p, #tx-locationmanager-4811-map p, #tx-locationmanager-2733-map h3, #tx-locationmanager-4811-map h3 {color:#000; padding: 10px; padding: 0.625rem; margin: 0;} #tx-locationmanager-2733-map h3, #tx-locationmanager-4811-map h3{font-size: 18px; font-size: 1.125rem; } #tx-locationmanager-2733-search-form, #tx-locationmanager-4811-search-form { width:100%; background:#000; padding: 20px; padding: 1.25rem; border: 1px solid #222; border: 0.0625rem solid #222; color:#ccc; text-align: center; margin-bottom: 20px; margin-bottom: 1.25rem; } #p85 #c4811 .location-manager__map-wrapper, #p85 #c4811 #tx-locationmanager-4811-search-form { display: none; } .location-manager__search{ width: 100%; max-width: 650px; background: #222; border: 1px solid #000; color: #fff; padding: 10px 15px; font-size: 16px; font-size: 1rem; margin-left: 15px; } .location-manager__button, .location-manager__button:hover{ color:#000; background:#ff1c8e; border:none; border-radius:0; padding: 10px 15px; padding: 0.625rem 0.9375rem; font-size: 16px; font-size: 1rem; font-weight: bold; font-family: 'ProximaNova-Regular'; } .location-manager__button:hover{ background:#ffcc00; } .location-manager__location { float: left; width: calc(25% - 0px); border: 1px solid #aaa; min-height: 280px; min-height: 17.5rem; margin: 0px; border: 1px solid #222; border: 0.0625rem solid #222; background: #0e0e0e; color:#fff; } .location-manager__location li { list-style: none; } .location-manager__location__name { background: #000; color: #fff; padding: 10px; padding: 0.625rem; line-height: 1; } .location-manager__location__name h3{ padding:0 !important; margin:0 !important; font-size: 18px !important; font-size: 1.125rem !important; font-family: 'ProximaNova-Regular'!important; font-weight: normal!important; color:#ff1c8e !important; } .location-manager__location__content { } .location-manager__button.location-manager__location__show { font-size: 16px; font-size: 1rem; padding:0px; background: none; color:#ff1c8e; } .location-manager__button.location-manager__location__show:hover {color:#fff;} .location-manager__location__show::before { content: ' '; background-image: url(../images/auge.svg); background-repeat: no-repeat; background-position: center; width: 30px; width: 1.875rem; height: 20px; height: 1.25rem; background-size: 30px 20px; background-size: 1.875rem 1.25rem; display: inline-block; margin-right: 5px; margin-right: 0.3125rem; float: left; } .location-manager__location__content .sub-menu li {margin-bottom: 10px; margin-bottom: 0.625rem;} @media screen and (max-width: 440px) { #tx-locationmanager-2733-tag-container, #tx-locationmanager-2733-tags-reset, .location-manager__tag.location-manager__tag_regular{display: block !important;} #tx-locationmanager-2733-tags-reset {margin-bottom: 5px;} } /* Bestseller Formular LInk*/ #p65 #c4225 {margin: 0 0 20px 0; margin: 0 0 1.25rem 0;} #p65 #c4225 p {padding: 0;} #p65 #c4225 p a::before { content: ''; width: 20px; width: 1.25rem; height: 15px; height: 0.9375rem; background-image: url(../fonts/eu-flag.svg); background-repeat: no-repeat; background-size: 20px 15px; background-size: 1.25rem 0.9375rem; display: inline-block; margin-right: 5px; margin-right: 0.3125rem; } #p65 #c4225 p:last-child a::before { content: ''; width: 20px; width: 1.25rem; height: 15px; height: 0.9375rem; background-image: url(../fonts/e37032429f484bf8b80efca9e86ff991.svg); background-repeat: no-repeat; background-position: center right 15px; background-size: 15px 15px; height: 45px; } .filter43 table tr:hover .download, #content .filter43 table tr:hover .download { background-color: #ff1c8e; } .filter43 .download:hover, #content .filter43 .download:hover { background-color: #fc0 !important; cursor: pointer; } .filter43 td .files { padding-left: 22px; margin: 0; margin-top: 2px; } .filter43 .download a { margin: 0; height: 22px; font-family: 'Proxima Nova Extrabold'; font-weight: normal; background-image: none; width: 100%; } .filter43 .download a::before { content: 'Download'; display: inline-block; color: #000; padding-right: 20px; text-align: center; } .filter43 table td:before, #content .filter43 table td:before { content: none !important; } /* nav */ .filter43 .pagination li.active a, #content .filter43 .pagination li.active a { background: #ff1c8e; color: #000; } .filter43 .pagination li.active, #content .filter43 .pagination li.active { border-color: #ff1c8e; } .filter43 .pagination li.active a:hover, #content .filter43 .pagination li.active a:hover { background-color: #fc0; } .filter43 .pagination a:hover, #content .filter43 .pagination a:hover { background:#ddd; } @media screen and (max-width: 780px) { .filter43 table tr, #content .filter43 table tr { width: 32.3%; } .filter43 .item-image, #content .filter43 .item-image { height: 180px; } .filter43 .item-title, #content .filter43 .item-title { font-size: 13px; } .filter43 .row.chk-box { width: 100%; margin-left: 0; } .w70{ width: 96%; margin-left: 2%;} .w30{ display: none;} } @media screen and (max-width: 640px) { .filter43 table tr, #content .filter43 table tr { width: 49%; } } @media screen and (max-width: 400px) { .filter43 table tr, #content .filter43 table tr { width: 100%; margin: 2px 0; } .filter43 .item-title, #content .filter43 .item-title { height: auto; padding-bottom: 10px; } } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* Coming Soon * --------------------------------------- */ #p84 header, #p84 #rootline, #p84 #sidebar, #p84 #footer { display: none; } #p84 #content { padding: 0; } #p84 #content-outer { margin: 0; } #p84 .container-content { max-width: 100%; padding: 0; } #p84 .main { width: 100%; height: 100%; min-height: 100vh; padding: 7% 20px; padding: 7% 1.25rem; text-align: center; background: url(../images/image.jpg) no-repeat center/cover; position: relative; } #p84 .logo { max-width: 300px; max-width: 18.75rem; margin: 0 auto; } #p84 .logo svg { height: 307px; height: 19.1875rem; width: 300px; width: 18.75rem; object-fit: contain; } #p84 h1 { font-size: 70px; font-size: 4.375rem; text-transform: uppercase; margin: 0; margin-top: 120px; margin-top: 7.5rem; } #p84 h2 { color: #ff1c8e; font-size: 24px; font-size: 1.5rem; margin: 0; } /* Dealer Lounge US/Canada * --------------------------------------- */ #content-nav #menu-link87, #content-nav-mobile #menu-link87 { display: none; } #p87 #content-nav #menu-link87, #p88 #content-nav #menu-link87, #p89 #content-nav #menu-link87, #p90 #content-nav #menu-link87, #p91 #content-nav #menu-link87, #p92 #content-nav #menu-link87, #p93 #content-nav #menu-link87, #p94 #content-nav #menu-link87, #p95 #content-nav #menu-link87, #p96 #content-nav #menu-link87, #p87 #content-nav-mobile #menu-link87, #p88 #content-nav-mobile #menu-link87, #p89 #content-nav-mobile #menu-link87, #p90 #content-nav-mobile #menu-link87, #p91 #content-nav-mobile #menu-link87, #p92 #content-nav-mobile #menu-link87, #p93 #content-nav-mobile#menu-link87, #p94 #content-nav-mobile #menu-link87, #p95 #content-nav-mobile #menu-link87, #p96 #content-nav-mobile #menu-link87{ display: block; } #p87 #content-nav #menu-link97, #p88 #content-nav #menu-link97, #p89 #content-nav #menu-link97, #p90 #content-nav #menu-link97, #p91 #content-nav #menu-link97, #p92 #content-nav #menu-link97, #p93 #content-nav #menu-link97, #p94 #content-nav #menu-link97, #p95 #content-nav #menu-link97, #p96 #content-nav #menu-link97, /*#p87 #content-nav #menu-link68, #p88 #content-nav #menu-link68, #p89 #content-nav #menu-link68, #p90 #content-nav #menu-link68, #p91 #content-nav #menu-link68, #p92 #content-nav #menu-link68, #p93 #content-nav #menu-link68, #p94 #content-nav #menu-link68, #p95 #content-nav #menu-link68, #p96 #content-nav #menu-link68,*/ #p87 #content-nav #menu-link69, #p88 #content-nav #menu-link69, #p89 #content-nav #menu-link69, #p90 #content-nav #menu-link69, #p91 #content-nav #menu-link69, #p92 #content-nav #menu-link69, #p93 #content-nav #menu-link69, #p94 #content-nav #menu-link69, #p95 #content-nav #menu-link69, #p96 #content-nav #menu-link69, #p87 #content-nav-mobile #menu-link97, #p88 #content-nav-mobile #menu-link97, #p89 #content-nav-mobile #menu-link97, #p90 #content-nav-mobile #menu-link97, #p91 #content-nav-mobile #menu-link97, #p92 #content-nav-mobile #menu-link97, #p93 #content-nav-mobile #menu-link97, #p94 #content-nav-mobile #menu-link97, #p95 #content-nav-mobile #menu-link97, #p96 #content-nav-mobile #menu-link97, #p87 #content-nav-mobile #menu-link68, #p88 #content-nav-mobile #menu-link68, #p89 #content-nav-mobile #menu-link68, #p90 #content-nav-mobile #menu-link68, #p91 #content-nav-mobile #menu-link68, #p92 #content-nav-mobile #menu-link68, #p93 #content-nav-mobile #menu-link68, #p94 #content-nav-mobile #menu-link68, #p95 #content-nav-mobile #menu-link68, #p96 #content-nav-mobile #menu-link68, #p87 #content-nav-mobile #menu-link69, #p88 #content-nav-mobile #menu-link69, #p89 #content-nav-mobile #menu-link69, #p90 #content-nav-mobile #menu-link69, #p91 #content-nav-mobile #menu-link69, #p92 #content-nav-mobile #menu-link69, #p93 #content-nav-mobile #menu-link69, #p94 #content-nav-mobile #menu-link69, #p95 #content-nav-mobile #menu-link69, #p96 #content-nav-mobile #menu-link69 { display: none; } .liquid-slider .panel-wrapper .mdr-link { color: #ff1c8e; background: none; font-weight: bold; padding: 0 0 0 35px; padding: 0 0 0 2.1875rem; margin: 15px 0 0 0; margin: 0.9375rem 0 0 0; } .liquid-slider .panel-wrapper .mdr-link:hover { color: #fff; } .liquid-slider .panel-wrapper .mdr-link::before, .liquid-slider .panel-wrapper .mdr-link::after { content: none; } .liquid-slider .panel-wrapper .mdr-link::before { content: ''; width: 25px; width: 1.5625rem; height: 20px; height: 1.25rem; background: url(../images/arrow-right-gelb.svg) no-repeat center/100% auto; position: absolute; } /* Responsive * --------------------------------------- */ @media screen and (min-width: 2560px) { html { font-size: 125%; } } @media screen and (max-width: 1400px) { #suche {margin-right: 90px;} #Sidenav-Suche #suche {margin-right: 0px;} #suche input {margin-right: 0px !important;} } @media screen and (max-width: 1170px) { #box1 {width: 15%;} #box2 {width: 60%;} #footer-nav1, #footer-nav2, #footer-nav3 {width: 33.333%;} } @media screen and (max-width: 1100px) { .row1 .t-box, .row2 .t-box {height: 180px;} .row1 .t-box span, .row2 .t-box span {height: 180px;} .row1 .t-box a, .row2 .t-box a {height: 90px;} .location-manager__location {width: calc(33.333% - 0px);} } @media screen and (max-width: 1280px) { .pjur-highlights-stoerer { max-width: 200px; max-width: 12.5rem; } .toy-stoerer { top: 5px; top: 0.3125rem; left: 180px; left: 11.25rem; max-width: 135px; max-width: 8.4375rem; } } @media screen and (max-width: 990px) { .logo-25years {display: none;} } @media screen and (max-width: 920px) { #box1 {width: 25%;} #box2 {width: 75%;} #box3 { width: 100%; float: none; clear: both; text-align: center; border-top: 2px solid #111; } #box3 a {max-width: 300px;} } @media screen and (max-width: 960px) { /* News */ .news-list-item { min-height: 550px; max-height: 550px; } .pjur-highlights-stoerer { max-width: 110px; max-width: 6.875rem; top: 0; left: 0; } .toy-stoerer { left: 110px; left: 6.875rem; } } @media screen and (max-width: 910px) { .indexnav2 ul li{ padding: 0 5px;} .indexnav1{ margin-left: 0px;} } @media screen and (max-width: 900px) { .location-manager__search{max-width:400px;} } @media screen and (max-width: 890px) { .row1 .t-box {width:50%;height: 150px;} .row1 .t-box span {height: 150px;} .row1 .t-box a {height: 60px;} } @media screen and (max-width: 860px) { .logo-25years {display: block;} } /* Unterseiten */ @media screen and (max-width: 769px) { .indexnav{ display: none;} .indexk2 ul li{ width: 50%;} .indexk2 ul li p{ position: relative; color: #000; opacity: 1; font-size: 16px;} .indexk22 ul li{ width: 50%;} .biaoti{ font-size: 30px; padding: 2rem 0;} .newstitle{ font-size: 20px;} .newstitle p{ font-size: 14px !important;} .indexk1 ul li{ width: 50%;} .indexk1 ul li p{ font-size: 16px; font-weight: normal;} .indexk3{ height: 400px;} .indexk3 .slideBox{ width: 100%; height: auto;} .indexk3 .slideBox .bd img{ width: 100%; height: auto;} .indexk3 .slideBox .prev{-webkit-transform: scale(0.3); left:0; top: 20%;} .indexk3 .slideBox .next{-webkit-transform: scale(0.3);right:0; top: 20%;} .indexk4 ul li{ width: 48%;} .indexk5{ width: 100%;} .indexk5 ul{ display: block;} .indexk5 ul li{ width: 33.33%; float: left; margin-bottom: 1rem;} .more{display: none; position: relative; margin-left: 0; top: auto; left: auto; width: 60px; margin: 0 auto; text-align: center; height: 26px; line-height: 22px; background: #fff; color: #666; font-size: 16px; border: 1px solid #fff;border-radius: 20px; padding: 0;} .more2,.more3,.more4,.more5{display: none;position: relative; margin-left: 0;top: auto; left: auto; width: 60px;margin: 0 auto; text-align: center; height: 26px; line-height: 22px; background: #666; color: #fff; font-size: 16px; border: 1px solid #666;border-radius: 20px; padding: 0;} .indexk6_zi{ width: 100%;} .indexk6_img{ width: 100%;} .indexk6_zi h3{ font-size: 30px;margin-bottom:0; margin-top: 1.5rem; text-align: center;} .news_lone{ width: 49%;} .news_lone .blog_time{ display: none;} .news_lone .blog_infR{ width: 100%; margin-right: 0;} .blog_wel{ display: none;} .news_lone{ height: auto;} .indexk7 .news_lone:last-child{ display: none;} .news_lone_img{ height: 100px;} .news_lone_img img{ height: 100px;} .logo-25years {display: none;} #content h1 {font-size: 35px; margin-bottom: 20px;} #accordion-header-content h1 {font-size: 16px; margin: 0;} #content h2 {font-size: 25px; margin-bottom: 10px;} #content h3 {font-size: 20px; margin-bottom: 10px;} #content h5 {font-size: 20px; margin-bottom: 10px;} #sidebar{display: none;} #content-outer {margin-left: 0;} #haendlerlounge #content-nav-mobile, #p34 #content-nav-mobile, #p35 #content-nav-mobile, #p60 #content-nav-mobile {display: block;} #haendlerlounge #content, #p34 #content, #p35 #content, #p60 #content {padding-top: 20px;} /* News */ .news-list-item { min-height: 500px; max-height: 500px; } /* Footer */ #box1, #box2, #box3 {width:100%; text-align: center;} #box1 img {float:none;} #box2 {border-top: 2px solid #111; display: none;} #box1::before, #box2::before, h4 {font-size: 20px;} #headline::after {font-size: 20px;padding: 10px 0;} #headline {padding: 0px 20px;} } @media screen and (max-width: 680px) { .toy-stoerer { max-width: 80px; max-width: 5rem; } } @media screen and (max-width: 660px) { /* News */ .news-list-item {width: 48%;} /* Storelocator */ #tx-locationmanager-2733-search-form .location-manager__button { width:100%; display: block; max-width: 250px; margin: 0 auto; margin-top:10px; } .location-manager__search { width: 100%; max-width: auto; margin-left: 0px; } } @media screen and (max-width: 620px) { .logo-25years {display: block;} } @media screen and (max-width: 600px) { #p84 .logo { max-width: 200px; max-width: 12.5rem; } #p84 .logo svg { height: 207px; height: 12.9375rem; width: 200px; width: 12.5rem; } } @media screen and (max-width: 600px) { /* Unterseiten Bilder */ .ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery {float: none; text-align: center;} .ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery .ce-column {float: none;} .ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery img {max-width: 400px; height:auto; margin:0 auto;} #content h1 {font-size: 30px;margin-bottom: 15px;} #accordion-header-content h1 {font-size: 16px; margin: 0;} #zwei-Spalter .column, #drei-Spalter .column{width:100%} .c-left {padding-right: 0px;} .c-right {padding-left: 0px;} #drei-Spalter .column{padding:0;} .row2 .t-box {width:50%; height: 150px;} .row2 .t-box span {height: 150px;} .row2 .t-box a {height: 60px;} #t-box7 {width:100%;} .row1 .t-box a, .row2 .t-box a {font-size: 16px; padding: 10px;} .location-manager__location {width: calc(100% - 0px); min-height: auto;} .location-manager__map-wrapper{height: 300px;} } @media screen and (max-width: 580px) { #footer-nav1, #footer-nav2, #footer-nav3 {width:100%;} } @media screen and (max-width: 480px) { #content h1 {font-size: 25px;margin-bottom: 10px;} #accordion-header-content h1 {font-size: 16px; margin: 0;} /* News */ .news-list-item { width: 100%; height: auto; min-height: auto; max-height: auto; } .pjur-highlights-stoerer { left: 90px; left: 5.625rem; top: 15px; top: 0.9375rem; } .toy-stoerer { left: 200px; left: 12.5rem; top: 20px; top: 1.25rem; } } @media screen and (max-width: 470px) { #suche, #rootline {display: none;} #Sidenav-Suche input {display:block;} .container-content #logo {width:80px; height: 80px; padding: 10px;} .logo-25years {height: 80px;} #content-nav-mobile {margin-top: 0px;} #haendlerlounge #content-wrapper, #p34 #content-wrapper, #p35 #content-wrapper, #p60 #content-wrapper { padding-top: 100px;} } @media screen and (max-width: 400px) { .row1 .t-box, .row2 .t-box {width:100%; height: 120px; padding-top: 80px; margin-bottom: 5px;} .row2 .t-box a, .row2 .t-box a {font-size:16px; height: 40px;} .row1 .t-box span, .row2 .t-box span {height: 130px;} } /*************************************************************************************/ /* Fancybox */ .compensate-for-scrollbar { margin-right: 0px !important; } #us-dealerlounge { width: 100%; height: auto; } /*************************************************************************************/ /* PopUP - Neue Produkte #popup-new { width: 100%; height: 100%; position: fixed; top: 0; padding: 20px; padding: 1.25rem; } .popup-new-products { position: relative; width: 100%; max-width: 680px; max-width: 42.5rem; height: 400px; height: 25rem; margin: 0 auto; width: 100%; margin-left: auto; margin-right: auto; position: relative; top: 50%; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } .popup-new-products .content { z-index: 1; background: #fff; height: 100%; background: url(../images/stoerer-bg.jpg) no-repeat center/cover; padding: 40px; padding: 2.5rem; border: 5px solid #fff; border: 0.3125rem solid #fff; border-radius: 3px; border-radius: 0.1875rem; -webkit-box-shadow: 0 25px 50px rgba(0,0,0,0.9); box-shadow: 0 25px 50px rgba(0,0,0,0.9); -webkit-box-shadow: 0 1.5625rem 3.125rem rgba(0,0,0,0.9); box-shadow: 0 1.5625rem 3.125rem rgba(0,0,0,0.9); } .popup-new-products .content .label-new { color: #fff; font-family: 'ProximaNova-Extrabld'; font-size: 80px; font-size: 5rem; position: relative; display: inline-block; z-index: 1; padding: 0 40px; padding: 0 2.5rem; line-height: 0px; line-height: 5rem; margin: 0 0 60px -40px; margin: 0 0 3.75rem -2.5rem; } .popup-new-products .content .label-new::after { content: ''; position: absolute; z-index: -1; left: 0; width: 100%; height: 100px; height: 6.25rem; background: #000; -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } .popup-new-products .content p { font-size: 30px; font-size: 1.875rem; margin-bottom: 15px; margin-bottom: 0.9375rem; text-shadow: 0 3px 3px rgba(0,0,0,0.5); text-shadow: 0 0.1875rem 0.1875rem rgba(0,0,0,0.5); } .popup-new-products .content .yellow-bg { color: #000; position: relative; display: inline-block; z-index: 1; padding: 0 40px; padding: 0 2.5rem; margin-left: 20px; margin-left: 1.25rem; text-shadow: none; } .popup-new-products .content .yellow-bg::after { content: ''; background: #ff1c8e; position: absolute; z-index: -1; left: 0; width: 100%; height: 45px; height: 2.8125rem; -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.8); box-shadow: 0 5px 5px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.5); box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.5); } .popup-new-products .content .link { width: 100px; width: 6.25rem; position: absolute; bottom: 20px; bottom: 1.25rem; margin-left: -20px; margin-left: -1.25rem; z-index: 1; } .popup-new-products .content .l-link img { width: 100%; height: auto; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .popup-new-products .content .l-link:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .popup-new-products .content .link .icon { position: absolute; right: -180px; top: 100px; z-index: -1; } .popup-new-products .content .link .icon img { width: 200px; } .popup-new-products .close { position: absolute; z-index: 2; width: 60px; width: 3.75rem; height: 60px; height: 3.75rem; border-radius: 50%; background: #ff1c8e; color: #000; font-size: 37px; font-size: 2.3125rem; text-align: center; cursor: pointer; right: -20px; right: -1.25rem; top: 20px; top: 1.25rem; -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5); box-shadow: 0 5px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.5); box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.5); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .popup-new-products .close:hover { box-shadow: none; } .popup-new-products .icons { position: absolute; right: 20px; right: 1.25rem; top: 80px; top: 5rem; } .popup-new-products .icons img { max-width: 150px; width: 100%; height: auto; display: block; margin-bottom: 5px; margin-bottom: 0.3125rem; } .popup-overlay { width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); }*/ /* PopUp Umfrage */ .overlay-popup-umfrage { display: none; width: 100%; height:100%; background:rgba(0,0,0,0.875); position: fixed; top:0; left: 0; z-index: 10000; } .overlay-popup-umfrage .inner { width:100%; max-width: 560px; max-width: 35rem; max-height: 560px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 20px; padding: 1.25rem; border-radius: 100%; } .overlay-popup-umfrage .inner img { width: 100%; height: 100%; object-fit: contain; border-radius: 100%; box-shadow: 0 0 20px #000; } .overlay-popup-umfrage .inner .close { position: absolute; width: 26px; width: 1.625rem; height: 26px; height: 1.625rem; cursor: pointer; right: 20px; right: 1.25rem; top: 30%; } .overlay-popup-umfrage .inner .close svg { width: 26px; width: 1.625rem; height: 26px; height: 1.625rem; } #rabatt-stoerer { width: 80px; height: 80px; position: fixed; right: 10px; top: 95px; z-index: 10; } #rabatt-stoerer img { width: 100%; height: auto; } #rabatt-stoerer .ce-intext.ce-right .ce-gallery { margin: 0 !important; } /* MDR - Icons */ #kat1 #section12 .slide-start .ce-gallery a, #kat3 #section1 .slide-start .ce-gallery a{ background: none; display: inline-block; padding: none; margin: 15px 0 0 0; margin: 0.9375rem 0 0 0; padding: 0; } #kat1 #section12 .slide-start .ce-gallery a::before, #kat3 #section1 .slide-start .ce-gallery a::before{ content: none; } #kat1 #section12 .slide-start .ce-gallery a::after, #kat3 #section1 .slide-start .ce-gallery a::after{ content: none; } #kat1 #section12 .slide-start .ce-gallery a img, #kat3 #section1 .slide-start .ce-gallery a img{ margin: 0; padding: 0; } #kat1 #section12 .slide-start .ce-gallery .ce-column:last-child figcaption::before, #kat3 #section1 .slide-start .ce-gallery .ce-column:last-child figcaption::before{ content: none; } #kat1 #section12 .slide-start .ce-gallery .ce-column img, #kat3 #section1 .slide-start .ce-gallery .ce-column img{ width: 140px; width: 8.75rem; } #kat1 #section12 .slide-start .ce-gallery .ce-column:last-child img, #kat3 #section1 .slide-start .ce-gallery .ce-column:last-child img { width: 200px; width: 12.5rem; max-width: 200px; max-width: 12.5rem; } #kat1 #section12 .slide-start .ce-gallery .ce-column:last-child figcaption, #kat3 #section1 .slide-start .ce-gallery .ce-column:last-child figcaption{ width: 200px; width: 12.5rem; max-width: 200px; max-width: 12.5rem; text-align: center; } /*************************************************************************************/ #icons-test { width: 50%; padding: 40px; position: absolute; } #section2 #icons-test, #section4 #icons-test, #section6 #icons-test, #section8 #icons-test, #section10 #icons-test, #section12 #icons-test, #section14 #icons-test{ right: 0; } #icons-test .ce-gallery figcaption { caption-side: left; width: 300px; background: #000; color: #fff; font-style: normal; text-align: right; font-size: 14px; padding: 15px; opacity: 0; margin-right: 10px; transition: all 0.5s; } #section2 #icons-test .ce-gallery figcaption, #section4 #icons-test .ce-gallery figcaption, #section6 #icons-test .ce-gallery figcaption, #section8 #icons-test .ce-gallery figcaption, #section10 #icons-test .ce-gallery figcaption, #section12 #icons-test .ce-gallery figcaption, #section14 #icons-test .ce-gallery figcaption { caption-side: right; text-align: left; margin-left: 10px; } #icons-test figure:hover figcaption {opacity: 1;} /* #kat1 #section12 #icons-test .ce-gallery figcaption, #kat3 #section1 #icons-test .ce-gallery figcaption{ opacity: 1; caption-side: bottom; text-align: center; width: auto; padding: 5px; background: none; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.85); }*/ #c5236, #c5237, #c5240, #c5235, #c5238, #c5239{ position: absolute; z-index: 10; right: 100px; right: 6.25rem; margin-top: 20px; margin-top: 1.25rem; } #c5235, #c5238, #c5239{ right: 40px; right: 2.5rem; } #c5236 img, #c5237 img, #c5240 img, #c5235 img, #c5238 img, #c5239 img{ max-width: 200px; max-width: 12.5rem; } #c5236 a, #c5237 a, #c5240 a, #c5235 a, #c5238 a, #c5239 a{ padding: 0; margin: 0; background: none; } #c5236 a::after, #c5236 a::before, #c5237 a::after, #c5237 a::before, #c5240 a::after, #c5240 a::before, #c5235 a::after, #c5235 a::before, #c5238 a::after, #c5238 a::before, #c5239 a::after, #c5239 a::before { content: none; } #c5236 figcaption, #c5237 figcaption, #c5240 figcaption, #c5235 figcaption, #c5238 figcaption, #c5239 figcaption { color: #fff; font-style: normal; font-weight: bold; letter-spacing: 1px; letter-spacing: 0.0625rem; text-transform: uppercase; padding: 0; font-size: 10px; font-size: 0.625rem; text-shadow: 0 1px 2px rgba(0,0,0,0.85); } .inquireStep { padding: 60px 0; } .inquireStep .top { width: 100%; margin-bottom: 45px; } .inquireStep .top img { max-width: 100%; margin: 0 auto; text-align: center; display: block; } .inquireStep .inputBox { text-align: center; } .inquireStep .inputBox p { font-size: 33px; color: #333; line-height: 1.6; margin-bottom: 10px; } .inquireStep .inputBox form input[type="text"] { width: 400px; height: 50px; display: block; margin: 0 auto 15px; text-align: center; font-size: 20px; } .inquireStep .inputBox form input[type="submit"] { min-width: 100px; height: 40px; line-height: 40px; -webkit-border-radius: 30px; border-radius: 30px; background: #333; font-size: 18px; color: #fff; cursor: pointer; margin-bottom: 35px; } .inquireStep .inputBox form input[type="submit"]:hover { opacity: 0.85; } .inquireStep .inputBox .showCode { width: 58%; height: 200px; -webkit-border-radius: 20px; border-radius: 20px; margin: 0 auto; padding: 20px; font-size: 18px; line-height: 1.6; border: 1px dashed #333; } @media screen and (max-width: 1800px){ #c5236 img, #c5237 img, #c5240 img, #c5235 img, #c5238 img, #c5239 img { max-width: 100px; max-width: 6.25rem; } } @media screen and (max-width: 1200px) and (orientation: landscape){ #c5236, #c5237, #c5240, #c5235, #c5238, #c5239 { margin-top: -20px; } #kat3 #section1 .ls-wrapper, #kat1 #section12 .ls-wrapper { margin-top: 65px; } } @media screen and (max-height: 560px) and (orientation: landscape){ #c5236, #c5237, #c5240, #c5235, #c5238, #c5239 { margin-top: 0; } } @media screen and (max-height: 520px) and (orientation: landscape){ #c5236, #c5237, #c5240 { right: 70px; margin-top: -13px; } #c5235, #c5238, #c5239 { margin-top: -13px; } } @media screen and (max-width: 980px) and (orientation: portrait){ #c5236, #c5237, #c5240, #c5235, #c5238, #c5239 { margin-top: -150px; right: auto; left: 20px; } } @media screen and (max-width: 480px) and (orientation: portrait){ #c5236, #c5237, #c5240, #c5235, #c5238, #c5239 { margin-top: -100px; } } @media screen and (max-width: 430px) and (orientation: portrait){ #c5236, #c5237, #c5240, #c5235, #c5238, #c5239 { /*display: none;*/ margin: 0; bottom: 40%; z-index: 0; } } @media screen and (max-width: 1200px) and (orientation: landscape){ #icons-test {width: 35%; padding: 20px;} #icons-test .ce-gallery img {max-width: 100px; height: auto;} #icons-test .ce-gallery figcaption {font-size: 12px; width: 200px;} .indexnav2 ul li{padding: 0 8px;} } @media screen and (max-height: 560px) and (orientation: landscape){ #icons-test {display: none;} } @media screen and (max-width: 980px) and (orientation: portrait){ #icons-test {display: none;} } #p23 .tx-powermail h3 {display: none;} @media only screen and (min-width: 768px){ .textny embed, .textny video, .textny iframe { display: block; margin: 0 auto; max-width: 100%; height: auto; border: none; max-width: 1000px; height: auto; } } .inquiry{ max-width: 80%; margin: 0 auto; padding-bottom: 50px;} .proanniu{ margin-top:10px;} .proanniu a{ padding:8px 20px; border:1px solid #333 !important; display:block; float:left; color:#333 !important; margin:10px 10px 10px 0; text-decoration:none !important; border-radius:5px;} .proanniu a:hover{ background:#ff1c8e; border-color:#ff1c8e; color:#fff !important; opacity:1 !important;} @media (max-width: 1080px) { .proanniu a{ width:21%; text-align:center; margin:10px 2%; padding:10px 0;} } @media only screen and (max-width: 767px){ .full-sort-list{ padding:20px 0;} .full-sort-list ul li{ padding:0 0; margin:10px 0;} .full-sort-list ul li a{ padding:10px; border:none; display:block;border: 1px solid #DDDDDD;} .full-sort-list ul li:before { border: none;} .textny { width: 96%; margin: 0 auto; height: auto; overflow: hidden;} .inquiry{ max-width: 100%;} .proanniu a{ width:46%; text-align:center; margin:10px 2%; padding:10px 0;} } @media screen and (max-width: 1774px) .wp1534 { width: auto; margin: 0 110px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wp1534 { max-width: 1534px; margin: 0 auto } @media screen and (max-width: 1774px) { .wp1534 { width: auto; margin: 0 110px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } } @media screen and (max-width: 1440px) { .wp1534 { margin: 0 90px } } @media screen and (max-width: 1200px) { .wp1534 { margin:0 .15rem } } .contact-con { padding:4rem 0; background-color: #f5f5f5; background-image: url(../images/inside_bg.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto } .contact-box { background: #fff; -webkit-box-shadow: 0 10px 20px #e9e9e9; box-shadow: 0 10px 20px #e9e9e9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:4rem; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; background-image: url(../images/contact_bg.jpg); background-position: center left; background-repeat: no-repeat; background-size: cover } .contact-box .flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .contact-box .box { width: 410px; max-width: 100%; color: #666; line-height: 28px; font-size: 16px } .contact-box .box p { margin-bottom: 14px; font-size: 18px; color: #000; } .contact-box .box img { max-width: 100%; height: auto !important } .contact-box .box ul { list-style: disc } .contact-box .box ul li { list-style: disc } .contact-box .box ol { list-style: decimal } .contact-box .box ol li { list-style: decimal } .contact-box .box .item { margin-bottom: 20px } .contact-box .box .t { font-size: 32px; color: #000; margin-bottom:35px; } .contact-box .box .t .en { text-transform: uppercase; font-family: 'TENSANS'; } .contact-box .box .word { float: left; font-size: 18px; color: #000; margin-right: 5px } .contact-box .box .word img { display: inline-block; vertical-align: middle; margin-right: 4px } .contact-box .box .p { overflow: hidden } @media screen and (max-width: 1250px) { .contact-box { display: block; padding: 1rem; } .contact-box .flex-1 { -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start } .contact-box .box { width: 100% } } @media screen and (max-width: 750px) { .contact-box .box .t { font-size: 22px } .contact-box .box .word { font-size: 14px } .contact-box .box .item { margin-bottom: 10px } } .contact-map-box { width: 860px; overflow: hidden } .contact-map-box .map { position: relative; width: 100%; height: 100%; overflow: hidden } @media screen and (max-width: 1440px) { .contact-map-box { width: 660px } } @media screen and (max-width: 1250px) { .contact-map-box { width: 100% } }