/** * Theme: Stefan Schäfer Landschaftspflege by 78media * * Bootstrap breakpoints * --------------------- * sm = 576+ px * md = 768+ px * lg = 992+ px * xl = 1200+ px * * colors * ------ * * @white = #fff rgba(255,255,255, 1) * @red = #ca0009 rgba(202,0,9) * @dk-red = #820000 rgba(130,0,0); * @brown = #6b3900 rgba(107,57,0) * @lime = #49aa26 rgba(73,170,38) * @green = #2e7f1b rgba(46,127,27) * @dark = #353535 rgba(53,53,53) * **/ /* define colors */ @font-color: #222; @green: rgba(46,127,27, 1); @lime: rgba(73,170,38, 1); @red: rgba(202,0,9, 1); @red-50: rgba(202,0,9, .7); @dk-red: rgba(130,0,0, 1); @brown: rgba(107,57,0, 1); @white: rgba(255,255,255, 1); @light: #f0f0f0; @grey: #ddd; @dark: rgba(53,53,53, 1); .white { color: @white; } .green { color: @green; } .lime { color: @lime; } .red { color: @red; } .red-50 { color: rgba(202,0,9, .5); } .bg-default { background-color: @white; color: @font-color; } .bg-grey { background-color: @grey; } .bg-green { background-color: @green; color: @white; } .bg-lime { background-color: @lime; color: @white; } .bg-red { background-color: @red; color: @font-color; } .bg-brown { background-color: @brown; color: @white; } .bg-dark { background-color: @dark !important; color: @white; } .bg-transparent { background-color: rgba(0,0,0, .5) !important; } .bg-boxed { border-radius: 8px; padding: 15px; } .text-shadow { text-shadow: 1px 1px 5px rgba(0,0,0,.9); } /* fonts */ @font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; src: url('../fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'); } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); } @font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; src: url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); } @font-face { font-family: "Open Sans Condensed"; font-weight: 500; font-style: normal; src: url('../fonts/Open_Sans_Condensed/OpenSansCondensed-Bold.ttf') format('truetype'); } @font-face { font-family: "PT Serif"; font-weight: 400; font-style: normal; src: url('../fonts/PT_Serif/PTSerif-Regular.ttf') format('truetype'); } @font-face { font-family: "PT Serif"; font-weight: 700; font-style: normal; src: url('../fonts/PT_Serif/PTSerif-Bold.ttf') format('truetype'); } @font-face { font-family: 'LigatureSymbols'; src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot'); src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.woff') format('woff'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'), url('../fonts/LigatureSymbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg'); src: url('../fonts/LigatureSymbols/LigatureSymbols-2.11.ttf') format('truetype'); font-weight: normal; font-style: normal; } .lsf, .lsf-icon:before { font-family: 'LigatureSymbols'; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; } .lsf-icon:before { content: attr(title); margin-right: 0.3em; font-size: 130%; } .lsf-icon.favorite:before { content: '\E121'; } /* defaults */ .clearfix { overflow: auto; } html, body { width: 100%; height: 100%; background-color: @white; } body { font-family: "Open Sans", Helvetica, Sans-serif; font-weight: 300; font-size: 18px; color: @font-color; } body { position: relative; background: transparent; /* make bg transparent for bg-image */ padding-bottom: 100px; /* spacing fixed footer bar */ } .serif { font-family: "PT Serif"; font-weight: bold; } .headline-condensed { font-family: "Open Sans Condensed"; font-weight: bold; } .document-header { position: absolute; z-index: 9; min-width: 200px; margin-top: -40px; padding: 1rem 2rem .5rem; text-align:center; } .document-header .headline-condensed { text-transform: uppercase; } @media (max-width:576px) { h1 { font-family: "Open Sans Condensed"; font-size: 2rem; } h1 .small { display: inline-block; font-family: "Open Sans"; line-height: 1.2em; margin-top: .5rem; font-size: 1.65rem; } h2 { font-size: 1.65rem; } .headline-condensed { word-break: break-all; } .document-header .headline-condensed { font-size: 1.65rem; } } /* lists */ ul {} /* links */ a, a:link, a:visited { color: @font-color; text-decoration: none; transition: all linear .3s; } a:hover, a:active { color: @red; text-decoration: none; transition: all linear .3s; } .bg-green a, .bg-green a:link, .bg-green a:visited { color: @white; } /* buttons */ .btn { border-radius: 8px; padding: .65rem 1rem; } .btn-red, .btn-red:link, .btn-red:visited { background: linear-gradient(0deg, @red 100%, @red 100%); color: @white; box-shadow: 1px 1px 4px rgba(0,0,0, .5); transition: all linear .3s; } .btn-red:hover, .btn-red:active { background: linear-gradient(0deg, @red 30%, #f00 100%); color: @white; box-shadow: 1px 1px 4px rgba(0,0,0, 0); } .btn-lime, .btn-lime:link, .btn-lime:visited { background: @lime; box-shadow: 1px 1px 6px rgba(0,0,0, .7); } .btn-lime:hover { box-shadow: 1px 1px 6px rgba(0,0,0, 0); } .btn-outline { background-color: transparent; border: solid 1px @white; color: @white; border-radius: 0; padding: 10px 15px; text-align: center; transition: all ease-in .3s; } .btn-outline:hover { border: solid 1px #000; color: #000 !important; } /* img */ img { max-width: 100%; /* no over-sizing */ } .image-margin { min-width: 200px; min-height: 150px; } @media (max-width:1200px) { .image-margin { display: inline-block; margin-bottom: 3rem; } } /* body backgrounds */ .body-bg-image { position: absolute; z-index: -1; overflow: hidden; } .body-bg-image img { max-width: 100%; } .no-top-padding { padding-top: 0 !important; } .no-bottom-padding { padding-bottom: 0 !important; } /* topbar */ .topbar { position: absolute; top: 0; right: 0; left: 0; z-index: 99999; } .topbar .topbar-left, .topbar .topbar-right { display: inline-block; font-size: .8rem; padding: .5rem 1rem; color: @white; } .topbar a { color: @white !important; } @media (max-width:576px) { .topbar .topbar-right { display: block; width: 100%; float: none !important; text-align: center; } } /* header */ header { background-color: rgba(255,255,255,.7); position: relative; top: 0; left: 0; right: 0; min-height: 100px; z-index: 999; } .navbar-brand { display: block; width: 100%; padding-top: 15px; padding-left: 0; margin-top: 2rem; margin-bottom: 0rem; } .navbar-brand img { width: auto; height: auto; max-width: 180px; } @media (min-width:768px) { .navbar-brand { display: inline-block; width: auto; text-align: left; padding-top: 0; padding-bottom: 0; } .navbar-brand img { max-width: 240px; } } @media (min-width:1920px) { header { min-height: 80px; } .navbar-brand { padding-top: 1rem; margin-bottom: 1rem; } } /* nav icon */ #nav-icon { width: 28px; height: 28px; position: relative; margin: 8px auto 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon span { display: block; position: absolute; height: 2px; width: 100%; background: @red; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { top: 10px; } #nav-icon span:nth-child(4) { top: 20px; } #nav-icon.open span:nth-child(1) { top: 10px; width: 0%; left: 50%; } #nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } @media (min-width:1200px) { #nav-icon { width: 36px; height: 36px; } #nav-icon span { height: 3px; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { top: 13px; } #nav-icon span:nth-child(4) { top: 27px; } #nav-icon.open span:nth-child(1) { top: 10px; width: 0%; left: 50%; } } /* navbar */ .navbar { background: transparent; } /* navbar togler */ .navbar-toggler, .navbar-toggler:focus, .navbar-toggler-icon { outline: unset !important; } .navbar-toggler { width: 50px; height: 50px; position: fixed; top: 50px; right: 15px; z-index: 999990; color: @red; } .navbar-toggler-icon { font-size: 40px; color: @red; transition: all ease-in .3s; width: 1em; } .navbar-toggler-icon:hover { color: @red; } .toggler-icon-active { color: @white; transform: rotate(90deg); } .scrolling-toggler { top: 15px; background-color: @white; border-radius: 50%; padding-top: 0; padding-left: 4px; box-shadow: 0 0 8px rgba(0,0,0,.2); } /* navbar layer */ .navbar-layer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background: rgba(0,0,0,.8); padding-top: 6em; } /* navbar */ .navbar-collapse { z-index: 9999; } .navbar-layer .navbar-nav { width: 100%; font-size: 1.2em; font-weight: normal; } .navbar-layer .navbar-nav .nav-item { text-align: center; } .navbar-layer .navbar-nav .nav-item .nav-link, .navbar-layer .navbar-nav .nav-item .nav-link:link, .navbar-layer .navbar-nav .nav-item .nav-link:visited, .navbar-layer .navbar-nav .nav-item .nav-link:active { color: @white; } .navbar-layer .navbar-nav .nav-item.active .nav-link, .navbar-layer .navbar-nav .nav-item .nav-link:hover { color: @red; font-weight: bold; } .navbar-layer .navbar-nav .nav-item .submenu { /* DELETE */ display: none; } .navbar-layer .navbar-nav .nav-item.active .submenu { /* DELETE */ display: block; } .navbar-layer .navbar-nav .nav-item.active .submenu .nav-link, .navbar-layer .navbar-nav .nav-item.active .submenu .nav-link:link, .navbar-layer .navbar-nav .nav-item.active .submenu .nav-link:visited, .navbar-layer .navbar-nav .nav-item.active .submenu .nav-link:active { color: @white; font-size: .8em; font-weight: normal; } .navbar-layer .navbar-nav .nav-item.active .submenu .nav-link:hover { color: @red; font-size: .8em; } /* bootstrap navbar dropdown */ .dropdown-menu { color: @white; text-align: center; list-style: none; background-color: transparent; border: none; } .dropdown-item:focus, .dropdown-item:hover { color: @white; background-color: transparent; } .dropdown-menu a, .dropdown-menu a:link, a:visited { color: @white; } a:hover, a:active { color: @white; } @media (min-width:768px) { .navbar-toggler { top: 60px; right: 30px; } .navbar-layer .navbar-nav { padding-top: 3%; font-size: 1.2em; } } @media (min-width:1920px) { .navbar-toggler { top: 60px; width: 60px; height: 60px; } .navbar-toggler-icon { font-size: 50px; } } /* document inline navbar */ .document-navbar { padding-left: 1rem; padding-right: 1rem; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .document-navbar .navbar-inline { list-style-type: none; width: 100%; margin-left: -40px; margin-bottom: 0; } .document-navbar .navbar-inline .nav-item { display: inline-block; width: auto; } .document-navbar .navbar-inline .nav-item .nav-link { display: inline-block; padding: .75rem 1rem .75rem 0; } .active-inline { background-color: @red; color: @white !important; } .scrolling-navbar { position: fixed; z-index: 99; top: 1rem; left: 15px; width: 75%; background-color: @white; border-radius: 1rem; padding-left: .5rem; box-shadow: 0 0 8px rgba(0,0,0,.2); } @media (max-width:992px) { .document-navbar { scrollbar-visibility: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-left: 1rem; padding-right: 1rem; } .document-navbar .navbar-inline .nav-item .nav-link { padding: .75 .5rem .75 0; font-size: .9em; } } @media (min-width:1200px) { .scrolling-navbar { top: 60px; left: 30px; width: 80%; } .document-navbar .navbar-inline .nav-item .nav-link { padding: 1rem 1rem; } } /* Scroll down */ .scroll-down { display: block; width: 24px; height: 53px; margin: 0 auto; cursor: pointer; background: transparent url('../img/icons/scroll-down.png') center no-repeat; background-size: 100% 100%; position: absolute; z-index: 999; bottom: 3%; left: 47%; right: 47%; } .scroll-down:hover { bottom: -2%; } @media (min-width:768px) { .scroll-down { bottom: 3%; } .scroll-down:hover { bottom: 1.5%; } } /* sections */ .home-section, .content-section, .section-padding { padding-top: 60px; padding-bottom: 60px; } .header-section { padding-top: 2rem; padding-bottom: 1rem; } .header-welcome { padding-bottom: 50px; } .header-welcome h1 { font-size: 2rem; } .header-welcome h4 { font-size: 1rem; } .header-welcome h5 { font-size: 1rem; } .header-welcome .highlighted { display: inline; background-color: @red-50 !important; } /* header topics, topic boxes */ .header-topics {} .header-topics .topic { padding: 1rem 1rem; text-align: center; } .header-topics .topic .topic-text { text-align: center; } .header-topics .topic .topic-link, .header-topics .topic .topic-link:link, .header-topics .topic .topic-link:visited { display: block; padding: .5rem 1rem; color: @white; text-align: center; } .header-topics .topic .topic-link:hover, .header-topics .topic .topic-link:active { padding: .5rem 1rem; box-shadow: 0px 0px 2px rgba(255,255,255,1); } @media (min-width:768px) { .header-section { padding-top: 100px; } .header-welcome { padding-bottom: 350px; } } @media (min-width:768px) and (orientation:landscape) { .header-section { padding-top: 60px; } .header-welcome { padding-bottom: 60px; } } @media (min-width:1200px) { .home-section, .content-section, .section-padding { padding-top: 100px; padding-bottom: 100px; } .header-section { padding-top: 50px; } .header-welcome { padding-bottom: 100px; } } @media (min-width:1920px) { .home-section, .content-section, .section-padding { padding-top: 100px; padding-bottom: 100px; } .header-section { padding-top: 100px; } .header-welcome { padding-top: 80px; padding-bottom: 200px; } .header-welcome h1 { font-size: 3rem; } .header-welcome h4 { font-size: 1.5rem; } .header-welcome h5 { font-size: 1.5rem; } .header-topics .topic-wrapper { transition: all linear .3s; } .header-topics .topic-wrapper:hover { position: relative; margin-top: -20px; height: calc(~"100%" + "20px"); box-shadow: 0 0 5px rgba(0,0,0,.75); } .header-topics .topic { padding: 3rem 1rem; } } /* content header spacing */ .content-header-spacing { position: relative; overflow-y: hidden; height: 300px; } @media (min-width:768px) { .content-header-spacing { height: 360px; } } @media (min-width:768px) and (orientation:landscape) { .content-header-spacing { height: 320px; } } @media (min-width:1200px) { .content-header-spacing { height: 480px; } } @media (min-width:1920px) { .content-header-spacing { height: 720px; } } /* content elements */ .content-box { padding: 50px 30px; margin-bottom: 30px; } .content-box-header { background-color: @red; color: @white; margin: -50px -30px 10px; padding: 1.5rem 2rem; } .content-box-text {} /* features */ .features-box { margin-top: 1rem; } .features-box .features-header { font-size: 1.75rem; margin-top: 2rem; } .features-box .features-list ul { list-style-type: none; margin-left: -40px; } .features-box .features-list ul li { display: block; background-color: @grey; /* color: @white; */ padding: .75rem 1.5rem; margin-bottom: .5rem; margin-right: 10px; } .features-box .features-list ul li span { display: inline-block; margin-right: .5rem; } @media (min-width:576px) { .features-box .features-list ul li { display: inline-block; } } @media (min-width:1200px) { .content-box { padding: 80px 30px 50px !important; } .content-box-header { position: absolute; z-index: 9; min-width: 1100px; margin: 0 0; padding: 1.5rem 2rem; } .header-right { right: 0; text-align: left; } .header-left { left: 0; text-align: right; } .content-box-text { padding-top: 100px; } } /* image galleries */ .gallery {} .gallery-inline {} .gallery-image { background: #000; } .gallery-image img { opacity: 1; transition: all ease-in .3s; height: auto; } .gallery-image img:hover { opacity: .6; } /* inline galleries*/ .gallery-inline .gallery-description { background: #bbaaa7; font-size: .9em; padding: 15px; } @media (max-width:768px) { .gallery-inline .gallery-image {} } @media (min-width:576px) { .content-box { padding: 30px; margin-bottom: 30px; } } /* forms */ ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ccc !important; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ccc !important; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #ccc !important; } ::-moz-placeholder { /* Firefox 19+ */ color: #ccc !important; } input:focus, textarea:focus { background-color: @red !important; } #customer-email { display: none; } /* pre footer */ .pre-footer { position: relative; } .pre-footer .pre-footer-header { text-shadow: 1px 1px 5px rgba(0,0,0, .8); } .pre-footer .pre-footer-contact { position: absolute; bottom: 3rem; right: 10%; left: 10%; text-align: center; color: @white; z-index: 999; } @media (max-width:576px) { .pre-footer .pre-footer-header { font-size: 1.5rem; } .pre-footer .pre-footer-contact { bottom: 2.5rem; } } @media (min-width:1200px) { .pre-footer .pre-footer-header { margin-bottom: 1.5rem; } } /* footer */ footer { width: 100%; background: @red; color: @white !important; padding: 1em 15px; font-size: .7em; line-height: 1.5em; text-transform: uppercase; } footer a, footer a:link, footer a:active, footer a:visited { color: @white; } footer a:hover { color: @white; } @media (min-width:992px) { footer { padding: 2em 15px; } } /* Cookie consent policy */ .cookie-consent-layer { background: rgba(0,0,0,.8); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99995; display: none; } .cookie-consent { position: fixed; background: #fff; padding: 30px; width: 100%; margin: 0 0; top: 0; right: 0; bottom: 0; left: 0; } .cookie-consent .cp-options .cookie-consent-btn { margin-bottom: 1em; } .cookie-consent .cookie-consent-btn { background: #BB9765; color: #fff; cursor: pointer; } .cookie-consent .cp-info { margin-bottom: 1.5em; } .cookie-consent .cp-settings { display: none; min-height: 400px; height: 400px; overflow-y: auto; overflow-x: hidden !important; } .cookie-consent .settings-option { margin-bottom: 1.5em; } .cookie-consent .cp-setting-header { border-bottom: solid 1px #6d6d6d; padding-bottom: 6px; margin-bottom: 6px; } .cookie-consent .cp-footer { margin-top: 2em; font-size: .85em; } @media (max-width:576px) { .cookie-consent .cp-settings { overflow-y: auto; } .cookie-consent .settings-option { font-size: .8em; } } @media (min-width:992px) { .cookie-consent { border-radius: 5px; width: 60%; height: auto; margin: 5% 20%; left: auto; right: auto; bottom: 0; } } @media (min-width:1200px) { .cookie-consent { width: 40%; height: auto; margin: 10% 30%; } .cookie-consent .cp-options .cookie-consent-btn { margin-bottom: auto; } } /* animated.css init */ .animate-inview-element { opacity: 0; /* important for smooth animation */ }