body { font-family: 'Poppins', sans-serif; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { margin-bottom: 0px; font-size: 14px; font-weight: 300; color: #4a4a4a; line-height: 24px; } a { text-decoration: none!important; } ul { padding: 0; margin: 0; list-style: none; } h1,h2,h3,h4,h5,h6 { margin: 0px; } ul.social-icons li { display: inline-block; margin-right: 3px; } ul.social-icons li:last-child { margin-right: 0px; } ul.social-icons li a { width: 50px; height: 50px; display: inline-block; line-height: 50px; background-color: #eee; color: #121212; font-size: 18px; text-align: center; transition: all .3s; } ul.social-icons li a:hover { background-color: #f33f3f; color: #fff; } a.filled-button { background-color: #f33f3f; color: #fff; font-size: 14px; text-transform: capitalize; font-weight: 300; padding: 10px 20px; border-radius: 5px; display: inline-block; transition: all 0.3s; } a.filled-button:hover { background-color: #121212; color: #fff; } .section-heading { text-align: left; margin-bottom: 60px; border-bottom: 1px solid #eee; } .section-heading h2 { font-size: 28px; font-weight: 400; color: #1e1e1e; margin-bottom: 15px; } .products-heading { background-image: url(../img/products-heading.jpg); } .about-heading { background-image: url(../img/about-heading.jpg); } .contact-heading { background-image: url(../img/contact-heading.jpg); } .page-heading { padding: 210px 0px 130px 0px; text-align: center; background-position: center center; background-repeat: no-repeat; background-size: cover; } .page-heading .text-content h4 { color: #f33f3f; font-size: 22px; text-transform: uppercase; font-weight: 700; margin-bottom: 15px; } .page-heading .text-content h2 { color: #fff; font-size: 62px; text-transform: uppercase; letter-spacing: 5px; } #preloader { overflow: hidden; background: #f33f3f; left: 0; right: 0; top: 0; bottom: 0; position: fixed; z-index: 9999999; color: #fff; } #preloader .jumper { left: 0; top: 0; right: 0; bottom: 0; display: block; position: absolute; margin: auto; width: 50px; height: 50px; } #preloader .jumper > div { background-color: #fff; width: 10px; height: 10px; border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; width: 50px; height: 50px; -webkit-animation: jumper 1s 0s linear infinite; animation: jumper 1s 0s linear infinite; } #preloader .jumper > div:nth-child(2) { -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s; } #preloader .jumper > div:nth-child(3) { -webkit-animation-delay: 0.66666s; animation-delay: 0.66666s; } @-webkit-keyframes jumper { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes jumper { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 5% { opacity: 1; } 100% { opacity: 0; } } /* Header Style */ header { position: absolute; z-index: 99999; width: 100%; height: 80px; background-color: #232323; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } header .navbar { padding: 17px 0px; } .background-header .navbar { padding: 17px 0px; } .background-header { top: 0; position: fixed; background-color: #fff!important; box-shadow: 0px 1px 10px rgba(0,0,0,0.1); } .background-header .navbar-brand h2 { color: #121212!important; } .background-header .navbar-nav a.nav-link { color: #1e1e1e!important; } .background-header .navbar-nav .nav-link:hover, .background-header .navbar-nav .active>.nav-link, .background-header .navbar-nav .nav-link.active, .background-header .navbar-nav .nav-link.show, .background-header .navbar-nav .show>.nav-link { color: #f33f3f!important; } .navbar .navbar-brand { float: left; margin-top: -12px; outline: none; } .navbar .navbar-brand h2 { color: #fff; text-transform: uppercase; font-size: 24px; font-weight: 700; -webkit-transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s; } .navbar .navbar-brand h2 em { font-style: normal; color: #f33f3f; } #navbarResponsive { z-index: 999; } .navbar-collapse { text-align: center; } .navbar .navbar-nav .nav-item { margin: 0px 15px; } .navbar .navbar-nav a.nav-link { text-transform: capitalize; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; color: #fff; transition: all 0.5s; margin-top: 5px; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .active>.nav-link, .navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-link.show, .navbar .navbar-nav .show>.nav-link { color: #fff; padding-bottom: 25px; border-bottom: 3px solid #f33f3f; } .navbar .navbar-toggler-icon { background-image: none; } .navbar .navbar-toggler { border-color: #fff; background-color: #fff; height: 36px; outline: none; border-radius: 0px; position: absolute; right: 30px; top: 20px; } .navbar .navbar-toggler-icon:after { content: '\f0c9'; color: #f33f3f; font-size: 18px; line-height: 26px; font-family: 'FontAwesome'; } /* Banner Style */ .banner { position: relative; text-align: center; padding-top: 80px; } .banner-item-01 { padding: 300px 0px; background-image: url(../img/slide_01.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } .banner-item-02 { padding: 300px 0px; background-image: url(../img/slide_02.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } .banner-item-03 { padding: 300px 0px; background-image: url(../img/slide_03.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } .banner .banner-item { max-height: 600px; } .banner .text-content { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width: 100%; } .banner .text-content h4 { color: #f33f3f; font-size: 22px; text-transform: uppercase; font-weight: 700; margin-bottom: 15px; } .banner .text-content h2 { color: #fff; font-size: 62px; text-transform: uppercase; letter-spacing: 5px; } .owl-banner .owl-dots .owl-dot { border-radius: 3px; } .owl-banner .owl-dots { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; } .owl-banner .owl-dots .owl-dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 10px; background-color: #fff; opacity: 0.5; } .owl-banner .owl-dots .owl-dot:focus { outline: none } .owl-banner .owl-dots .owl-dot.active { background-color: #fff; opacity: 1; } /* Latest Produtcs */ .latest-products { margin-top: 100px; } .latest-products .section-heading a { float: right; margin-top: -35px; text-transform: uppercase; font-size: 13px; font-weight: 700; color: #f33f3f; } .product-item { border: 1px solid #eee; margin-bottom: 30px; } .product-item .down-content { padding: 30px; position: relative; } .product-item img { width: 100%; overflow: hidden; } .product-item .down-content h4 { font-size: 17px; color: #1a6692; margin-bottom: 20px; } .product-item .down-content h6 { position: absolute; top: 30px; right: 30px; font-size: 18px; color: #121212; } .product-item .down-content p { margin-bottom: 20px; } .product-item .down-content ul li { display: inline-block; } .product-item .down-content ul li i { color: #f33f3f; font-size: 14px; } .product-item .down-content span { position: absolute; right: 30px; bottom: 30px; font-size: 13px; color: #f33f3f; font-weight: 500; } /* Best Features - über uns section */ .best-features { margin-top: 50px; } .best-features .container .row { border-bottom: 1px solid #eee; padding-bottom: 60px; } .best-features img { width: 100%; overflow: hidden; } .best-features h4 { font-size: 17px; color: #1a6692; margin-bottom: 20px; } .best-features ul.featured-list li { display: block; margin-bottom: 10px; } .best-features p { margin-bottom: 25px; } .best-features ul.featured-list li a { font-size: 14px; color: #4a4a4a; font-weight: 300; transition: all .3s; position: relative; padding-left: 13px; } .best-features ul.featured-list li a:before { content: ''; width: 5px; height: 5px; display: inline-block; background-color: #4a4a4a; position: absolute; left: 0; transition: all .3s; top: 8px; } .best-features ul.featured-list li a:hover { color: #f33f3f; } .best-features ul.featured-list li a:hover::before { background-color: #f33f3f; } .best-features .filled-button { margin-top: 20px; } /* Footer */ #footer { background: #eee; padding: 30px 0; color: #fff; font-size: 14px; width: 100% } #footer a { color: #000; } #footer p { padding: 10px 0 10px 0; } #footer .copyright { text-align: center; } /* Send Message */ .send-message { margin-top: 100px; } .contact-form input { font-size: 14px; width: 100%; height: 44px; display: inline-block; line-height: 42px; border: 1px solid #eee; border-radius: 0px; margin-bottom: 30px; } .contact-form input:focus { box-shadow: none; border: 1px solid #eee; } .contact-form textarea { font-size: 14px; width: 100%; min-width: 100%; min-height: 120px; height: 120px; max-height: 180px; border: 1px solid #eee; border-radius: 0px; margin-bottom: 30px; } .contact-form textarea:focus { box-shadow: none; border: 1px solid #eee; } .contact-form button.filled-button { background-color: #f33f3f; color: #fff; font-size: 14px; text-transform: capitalize; font-weight: 300; padding: 10px 20px; border-radius: 5px; display: inline-block; transition: all 0.3s; border: none; outline: none; cursor: pointer; } .contact-form button.filled-button:hover { background-color: #121212; color: #fff; } .accordion { margin-left: 30px; } .accordion a { cursor: pointer; font-size: 17px; color: #1a6692!important; margin-bottom: 20px; transition: all .3s; } .accordion a:hover { color: #f33f3f!important; } .accordion a.active { color: #f33f3f!important; } .accordion li .content { display: none; margin-top: 10px; } .accordion li:first-child { border-top: 1px solid #eee; } .accordion li { border-bottom: 1px solid #eee; padding: 15px 0px; } /* Responsive Style */ @media (max-width: 768px) { .banner .text-content { width: 90%; margin-left: 5%; } .banner .text-content h4 { font-size: 22px; } .banner .text-content h2 { font-size: 36px; letter-spacing: 0.5px; } .banner-item-01, .banner-item-02, .banner-item-03 { padding: 180px 0px; } .page-heading .text-content h4 { font-size: 22px; } .page-heading .text-content h2 { font-size: 36px; letter-spacing: 0.5px; } .latest-products .section-heading a { float: none; margin-top: 0px; display: block; margin-bottom: 20px; } .product-item .down-content h4 { margin-bottom: 20px!important; } .product-item .down-content h6 { position: absolute!important; top: 30px!important; right: 30px!important; } .product-item .down-content span { position: absolute!important; right: 30px!important; bottom: 30px!important; } .best-features .left-content { margin-bottom: 30px; } .about-features img { margin-bottom: 30px; } .service-item { margin-bottom: 30px; } .find-us #map { margin-bottom: 30px; } .find-us .left-content { margin-left: 0px; } .send-message .accordion { margin-top: 30px; margin-left: 0px; } } @media (max-width: 992px) { .navbar .navbar-brand { position: absolute; left: 30px; top: 32px; } .navbar .navbar-brand { width: auto; } .navbar:after { display: none; } #navbarResponsive { z-index: 99999; position: absolute; top: 80px; left: 0; width: 100%; text-align: center; background-color: #fff; box-shadow: 0px 10px 10px rgba(0,0,0,0.1); } .navbar .navbar-nav .nav-item { border-bottom: 1px solid #eee; } .navbar .navbar-nav .nav-item:last-child { border-bottom: none; } .navbar .navbar-nav a.nav-link { padding: 15px 0px; color: #1e1e1e!important; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .active>.nav-link, .navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-link.show, .navbar .navbar-nav .show>.nav-link { color: #f33f3f!important; border-bottom: none!important; padding-bottom: 15px; } .product-item .down-content h4 { margin-bottom: 10px; } .product-item .down-content h6 { position: relative; top: 0; right: 0; margin-bottom: 20px; } .product-item .down-content span { position: relative; right: 0; bottom: 0; } } .standardpage { padding-top: 120px; } .spacemiddle { padding: 20px 20px 20px 20px; text-align: center; align-content: center; } .formfield { padding: 5px; } .is-large { width: 250px; max-width: 90%; } .hidden { display: none; } .margintop{ padding-top: 20px; } .margindown{ padding-bottom: 20px; } /*-------------------------------*/ .produktcontainer { max-width: 1200px; margin: 0 auto; padding: 15px; display: flex; padding-bottom: 100px; } /* Columns */ .left-column { width: 65%; position: relative; } .right-column { width: 35%; padding: 30px; } /* Left Column */ .left-column img { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.3s ease; } .left-column img.active { opacity: 1; } /* Right Column */ /* Product Description */ .product-description { border-bottom: 1px solid #E1E8EE; margin-bottom: 20px; } .product-description span { font-size: 12px; color: #f33f3f; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .product-description h1 { font-weight: 300; font-size: 52px; color: #43484D; letter-spacing: -2px; } .product-description p { font-size: 16px; font-weight: 300; color: #86939E; line-height: 24px; } /* Product Price */ .product-price { display: flex; align-items: center; } .product-price span { font-size: 26px; font-weight: 300; color: #43474D; margin-right: 20px; } .cart-btn { display: inline-block; background-color: #f33f3f; border-radius: 6px; font-size: 16px; color: #FFFFFF; text-decoration: none; padding: 12px 30px; transition: all .5s; } .cart-btn:hover { background-color: #f21616; } /* Responsive */ @media (max-width: 940px) { .produktcontainer { flex-direction: column; margin-top: 60px; } .left-column, .right-column { width: 100%; } .left-column img { width: 300px; right: 0; top: -65px; left: initial; } } @media (max-width: 535px) { .left-column img { width: 220px; top: -85px; } } /*-------------------------------*/ .clearfix { content: ""; display: table; clear: both; } #cart { width: 100%; } #cart h1 { font-weight: 300; } #cart a { color: #f33f3f; text-decoration: none; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear; } #cart a:hover { color: #f21616; } .product.removed { margin-left: 980px !important; opacity: 0; } .product { border: 1px solid #eee; margin: 20px 0; width: 100%; height: 195px; position: relative; -webkit-transition: margin .2s linear, opacity .2s linear; -moz-transition: margin .2s linear, opacity .2s linear; -ms-transition: margin .2s linear, opacity .2s linear; -o-transition: margin .2s linear, opacity .2s linear; transition: margin .2s linear, opacity .2s linear; } .product img { width: 100%; height: 100%; } .product header, .product .content { background-color: #fff; border: 1px solid #ccc; border-style: none none solid none; float: left; } .product header { background: #000; margin: 0 1% 20px 0; overflow: hidden; padding: 0; position: relative; width: 24%; height: 195px; } .product header:hover img { opacity: .7; } .product header:hover h3 { bottom: 73px; } .product header h3 { background: #f33f3f; color: #fff; font-size: 22px; font-weight: 300; line-height: 49px; margin: 0; padding: 0 30px; position: absolute; bottom: -50px; right: 0; left: 0; -webkit-transition: bottom .2s linear; -moz-transition: bottom .2s linear; -ms-transition: bottom .2s linear; -o-transition: bottom .2s linear; transition: bottom .2s linear; } .remove { cursor: pointer; } .product .content { box-sizing: border-box; -moz-box-sizing: border-box; height: 140px; padding: 0 20px; width: 75%; } .product h1 { color: #53b5aa; font-size: 25px; font-weight: 300; margin: 17px 0 20px 0; } .product footer.content { height: 50px; margin: 6px 0 0 0; padding: 0; } .product footer .price { background: #f33f3f; color: #000; float: right; font-size: 15px; font-weight: 300; line-height: 49px; margin: 0; padding: 0 30px; } .product footer .full-price { background: #f33f3f; color: #fff; float: right; font-size: 22px; font-weight: 300; line-height: 49px; margin: 0; padding: 0 30px; -webkit-transition: margin .15s linear; -moz-transition: margin .15s linear; -ms-transition: margin .15s linear; -o-transition: margin .15s linear; transition: margin .15s linear; } .qt, .qt-plus, .qt-minus { display: block; float: left; } .qt { font-size: 19px; line-height: 50px; width: 70px; text-align: center; } .qt-plus, .qt-minus { background: #f33f3f; border: none; font-size: 30px; font-weight: 300; height: 100%; padding: 0 20px; -webkit-transition: background .2s linear; -moz-transition: background .2s linear; -ms-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear; } .qt-plus:hover, .qt-minus:hover { background: #f33f3f; color: #fff; cursor: pointer; } .qt-plus { line-height: 50px; } .qt-minus { line-height: 47px; } #site-footer { margin: 30px 0 0 0; } #site-footer { padding: 40px; } #site-footer h1 { background: #f33f3f; border: 1px solid #ccc; border-style: none none solid none; font-size: 24px; font-weight: 300; margin: 0 0 7px 0; padding: 14px 40px; text-align: center; } #site-footer h2 { font-size: 24px; font-weight: 300; margin: 10px 0 0 0; } #site-footer h3 { font-size: 19px; font-weight: 300; margin: 15px 0; } .left { float: left; } .right { float: right; } .btn { background: #f33f3f; border: 1px solid #999; border-style: none none solid none; cursor: pointer; display: block; color: #fff; font-size: 20px; font-weight: 300; padding: 16px 0; width: 290px; text-align: center; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .btn:hover { color: #fff; background: #f21616; } .minused { margin: 0 50px 0 0 !important; } .added { margin: 0 -50px 0 0 !important; } .text-font{ font-weight: 700; letter-spacing: .156rem; font-size: 1.125rem; } .text-price{ padding: 0 .625rem; font-style: normal; font-size: .75rem; font-weight: 700; line-height: .813rem; letter-spacing: 1.6px; } .text-descriptions{ font-style: normal; font-size: .75rem; font-weight: 400; line-height: 1.125rem; margin: .313rem 0 .938rem; padding: 0 .625rem; } .button-color{ color: #4e4e4e ; border-color: #4e4e4e ; } .button-order{ font-style: normal; font-size: .75rem; font-weight: 700; background-color: hsl(90, 40%, 50%); color: white; }