/*------------------------------------------------------------------------ # solarwaerme.at - 16.12.2020 # ----------------------------------------------------------------- Theme Name: solarwaerme.at Author: plank. web | grafik | it-solutions Author URI: http://www.verenaplank.biz Description: Theme zur Webseite solarwaerme.at Version: 1.0 -------------------------------------------------------------------------- 1. Reset / Initiate Fonts 2. Common css (Link, button, margin class, text align class...) 3. Layout extend 4. Header 5. Startseite 6. Database Formatierung 7. Footer 8. Page --------------------------------------------------------------------------------*/ /* 1. Reset / Initiate Fonts --------------------------------------------------------------------------------*/ /*@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);*/ @font-face{ font-family: 'Ubuntu Condensed'; src: url('fonts/UbuntuCondensed-Regular.ttf') format('truetype'); font-weight:normal; font-display: auto; } @font-face{ font-family: 'OswaldSlider'; src: url('fonts/Oswald-Regular.ttf') format('truetype'); font-weight:normal; font-display: auto; } @font-face { font-family: 'FontAwesome'; src:url('fonts/fontawesome-webfont.eot'); src:url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff') format('woff'), url('fonts/fontawesome-webfont.ttf') format('truetype'), url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; font-display: auto; } @font-face { font-family: 'Simple-Line-Icons'; src:url('fonts/Simple-Line-Icons.eot'); src:url('fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'), url('fonts/Simple-Line-Icons.woff') format('woff'), url('fonts/Simple-Line-Icons.ttf') format('truetype'), url('fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg'); font-weight: normal; font-style: normal; font-display: auto; } @font-face{ font-family: 'MySliderfont'; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); font-weight:normal; font-display: auto; } body{ font-family:'Ubuntu Condensed', sans-serif; } img { max-width: 100%; height: auto; } /*--------------------------------------------------------------------------------*/ /* 2. Simple Line Icons --------------------------------------------------------------------------------*/ /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="icon-"] { */ .icon-user-female, .icon-user-follow, .icon-user-following, .icon-user-unfollow, .icon-trophy, .icon-screen-smartphone, .icon-screen-desktop, .icon-plane, .icon-notebook, .icon-moustache, .icon-mouse, .icon-magnet, .icon-energy, .icon-emoticon-smile, .icon-disc, .icon-cursor-move, .icon-crop, .icon-credit-card, .icon-chemistry, .icon-user, .icon-speedometer, .icon-social-youtube, .icon-social-twitter, .icon-social-tumblr, .icon-social-facebook, .icon-social-dropbox, .icon-social-dribbble, .icon-shield, .icon-screen-tablet, .icon-magic-wand, .icon-hourglass, .icon-graduation, .icon-ghost, .icon-game-controller, .icon-fire, .icon-eyeglasses, .icon-envelope-open, .icon-envelope-letter, .icon-bell, .icon-badge, .icon-anchor, .icon-wallet, .icon-vector, .icon-speech, .icon-puzzle, .icon-printer, .icon-present, .icon-playlist, .icon-pin, .icon-picture, .icon-map, .icon-layers, .icon-handbag, .icon-globe-alt, .icon-globe, .icon-frame, .icon-folder-alt, .icon-film, .icon-feed, .icon-earphones-alt, .icon-earphones, .icon-drop, .icon-drawer, .icon-docs, .icon-directions, .icon-direction, .icon-diamond, .icon-cup, .icon-compass, .icon-call-out, .icon-call-in, .icon-call-end, .icon-calculator, .icon-bubbles, .icon-briefcase, .icon-book-open, .icon-basket-loaded, .icon-basket, .icon-bag, .icon-action-undo, .icon-action-redo, .icon-wrench, .icon-umbrella, .icon-trash, .icon-tag, .icon-support, .icon-size-fullscreen, .icon-size-actual, .icon-shuffle, .icon-share-alt, .icon-share, .icon-rocket, .icon-question, .icon-pie-chart, .icon-pencil, .icon-note, .icon-music-tone-alt, .icon-music-tone, .icon-microphone, .icon-loop, .icon-logout, .icon-login, .icon-list, .icon-like, .icon-home, .icon-grid, .icon-graph, .icon-equalizer, .icon-dislike, .icon-cursor, .icon-control-start, .icon-control-rewind, .icon-control-play, .icon-control-pause, .icon-control-forward, .icon-control-end, .icon-calendar, .icon-bulb, .icon-bar-chart, .icon-arrow-up, .icon-arrow-right, .icon-arrow-left, .icon-arrow-down, .icon-ban, .icon-bubble, .icon-camcorder, .icon-camera, .icon-check, .icon-clock, .icon-close, .icon-cloud-download, .icon-cloud-upload, .icon-doc, .icon-envelope, .icon-eye, .icon-flag, .icon-folder, .icon-heart, .icon-info, .icon-key, .icon-link, .icon-lock, .icon-lock-open, .icon-magnifier, .icon-magnifier-add, .icon-magnifier-remove, .icon-paper-clip, .icon-paper-plane, .icon-plus, .icon-pointer, .icon-power, .icon-refresh, .icon-reload, .icon-settings, .icon-star, .icon-symbol-female, .icon-symbol-male, .icon-target, .icon-volume-1, .icon-volume-2, .icon-volume-off, .icon-users { font-family: 'Simple-Line-Icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 1.5em; } .icon-user-female:before { content: "\e000"; } .icon-user-follow:before { content: "\e002"; } .icon-user-following:before { content: "\e003"; } .icon-user-unfollow:before { content: "\e004"; } .icon-trophy:before { content: "\e006"; } .icon-screen-smartphone:before { content: "\e010"; } .icon-screen-desktop:before { content: "\e011"; } .icon-plane:before { content: "\e012"; } .icon-notebook:before { content: "\e013"; } .icon-moustache:before { content: "\e014"; } .icon-mouse:before { content: "\e015"; } .icon-magnet:before { content: "\e016"; } .icon-energy:before { content: "\e020"; } .icon-emoticon-smile:before { content: "\e021"; } .icon-disc:before { content: "\e022"; } .icon-cursor-move:before { content: "\e023"; } .icon-crop:before { content: "\e024"; } .icon-credit-card:before { content: "\e025"; } .icon-chemistry:before { content: "\e026"; } .icon-user:before { content: "\e005"; } .icon-speedometer:before { content: "\e007"; } .icon-social-youtube:before { content: "\e008"; } .icon-social-twitter:before { content: "\e009"; } .icon-social-tumblr:before { content: "\e00a"; } .icon-social-facebook:before { content: "\e00b"; } .icon-social-dropbox:before { content: "\e00c"; } .icon-social-dribbble:before { content: "\e00d"; } .icon-shield:before { content: "\e00e"; } .icon-screen-tablet:before { content: "\e00f"; } .icon-magic-wand:before { content: "\e017"; } .icon-hourglass:before { content: "\e018"; } .icon-graduation:before { content: "\e019"; } .icon-ghost:before { content: "\e01a"; } .icon-game-controller:before { content: "\e01b"; } .icon-fire:before { content: "\e01c"; } .icon-eyeglasses:before { content: "\e01d"; } .icon-envelope-open:before { content: "\e01e"; } .icon-envelope-letter:before { content: "\e01f"; } .icon-bell:before { content: "\e027"; } .icon-badge:before { content: "\e028"; } .icon-anchor:before { content: "\e029"; } .icon-wallet:before { content: "\e02a"; } .icon-vector:before { content: "\e02b"; } .icon-speech:before { content: "\e02c"; } .icon-puzzle:before { content: "\e02d"; } .icon-printer:before { content: "\e02e"; } .icon-present:before { content: "\e02f"; } .icon-playlist:before { content: "\e030"; } .icon-pin:before { content: "\e031"; } .icon-picture:before { content: "\e032"; } .icon-map:before { content: "\e033"; } .icon-layers:before { content: "\e034"; } .icon-handbag:before { content: "\e035"; } .icon-globe-alt:before { content: "\e036"; } .icon-globe:before { content: "\e037"; } .icon-frame:before { content: "\e038"; } .icon-folder-alt:before { content: "\e039"; } .icon-film:before { content: "\e03a"; } .icon-feed:before { content: "\e03b"; } .icon-earphones-alt:before { content: "\e03c"; } .icon-earphones:before { content: "\e03d"; } .icon-drop:before { content: "\e03e"; } .icon-drawer:before { content: "\e03f"; } .icon-docs:before { content: "\e040"; } .icon-directions:before { content: "\e041"; } .icon-direction:before { content: "\e042"; } .icon-diamond:before { content: "\e043"; } .icon-cup:before { content: "\e044"; } .icon-compass:before { content: "\e045"; } .icon-call-out:before { content: "\e046"; } .icon-call-in:before { content: "\e047"; } .icon-call-end:before { content: "\e048"; } .icon-calculator:before { content: "\e049"; } .icon-bubbles:before { content: "\e04a"; } .icon-briefcase:before { content: "\e04b"; } .icon-book-open:before { content: "\e04c"; } .icon-basket-loaded:before { content: "\e04d"; } .icon-basket:before { content: "\e04e"; } .icon-bag:before { content: "\e04f"; } .icon-action-undo:before { content: "\e050"; } .icon-action-redo:before { content: "\e051"; } .icon-wrench:before { content: "\e052"; } .icon-umbrella:before { content: "\e053"; } .icon-trash:before { content: "\e054"; } .icon-tag:before { content: "\e055"; } .icon-support:before { content: "\e056"; } .icon-size-fullscreen:before { content: "\e057"; } .icon-size-actual:before { content: "\e058"; } .icon-shuffle:before { content: "\e059"; } .icon-share-alt:before { content: "\e05a"; } .icon-share:before { content: "\e05b"; } .icon-rocket:before { content: "\e05c"; } .icon-question:before { content: "\e05d"; } .icon-pie-chart:before { content: "\e05e"; } .icon-pencil:before { content: "\e05f"; } .icon-note:before { content: "\e060"; } .icon-music-tone-alt:before { content: "\e061"; } .icon-music-tone:before { content: "\e062"; } .icon-microphone:before { content: "\e063"; } .icon-loop:before { content: "\e064"; } .icon-logout:before { content: "\e065"; } .icon-login:before { content: "\e066"; } .icon-list:before { content: "\e067"; } .icon-like:before { content: "\e068"; } .icon-home:before { content: "\e069"; } .icon-grid:before { content: "\e06a"; } .icon-graph:before { content: "\e06b"; } .icon-equalizer:before { content: "\e06c"; } .icon-dislike:before { content: "\e06d"; } .icon-cursor:before { content: "\e06e"; } .icon-control-start:before { content: "\e06f"; } .icon-control-rewind:before { content: "\e070"; } .icon-control-play:before { content: "\e071"; } .icon-control-pause:before { content: "\e072"; } .icon-control-forward:before { content: "\e073"; } .icon-control-end:before { content: "\e074"; } .icon-calendar:before { content: "\e075"; } .icon-bulb:before { content: "\e076"; } .icon-bar-chart:before { content: "\e077"; } .icon-arrow-up:before { content: "\e078"; } .icon-arrow-right:before { content: "\e079"; } .icon-arrow-left:before { content: "\e07a"; } .icon-arrow-down:before { content: "\e07b"; } .icon-ban:before { content: "\e07c"; } .icon-bubble:before { content: "\e07d"; } .icon-camcorder:before { content: "\e07e"; } .icon-camera:before { content: "\e07f"; } .icon-check:before { content: "\e080"; } .icon-clock:before { content: "\e081"; } .icon-close:before { content: "\e082"; } .icon-cloud-download:before { content: "\e083"; } .icon-cloud-upload:before { content: "\e084"; } .icon-doc:before { content: "\e085"; } .icon-envelope:before { content: "\e086"; } .icon-eye:before { content: "\e087"; } .icon-flag:before { content: "\e088"; } .icon-folder:before { content: "\e089"; } .icon-heart:before { content: "\e08a"; } .icon-info:before { content: "\e08b"; } .icon-key:before { content: "\e08c"; } .icon-link:before { content: "\e08d"; } .icon-lock:before { content: "\e08e"; } .icon-lock-open:before { content: "\e08f"; } .icon-magnifier:before { content: "\e090"; } .icon-magnifier-add:before { content: "\e091"; } .icon-magnifier-remove:before { content: "\e092"; } .icon-paper-clip:before { content: "\e093"; } .icon-paper-plane:before { content: "\e094"; } .icon-plus:before { content: "\e095"; } .icon-pointer:before { content: "\e096"; } .icon-power:before { content: "\e097"; } .icon-refresh:before { content: "\e098"; } .icon-reload:before { content: "\e099"; } .icon-settings:before { content: "\e09a"; } .icon-star:before { content: "\e09b"; } .icon-symbol-female:before { content: "\e09c"; } .icon-symbol-male:before { content: "\e09d"; } .icon-target:before { content: "\e09e"; } .icon-volume-1:before { content: "\e09f"; } .icon-volume-2:before { content: "\e0a0"; } .icon-volume-off:before { content: "\e0a1"; } .icon-users:before { content: "\e001"; } /*--------------------------------------------------------------------------------*/ /* 2. Common css --------------------------------------------------------------------------------*/ .headerMain{ height: 420px; background: no-repeat center center; background-size:cover; /*background-image: url('http://lorempixel.com/1500/700');*/ background-color:#293a4c; } .pagekopfbild .titelimage{ height: 375px; background-size: contain; } .socialitem{ margin-top:5px; margin-right:15px; } .socialitem a{ color:#868e96; } .socialitem a:hover{ color:white; } .tshirtitem{ color: #868e96; text-decoration: none; margin-right: 35px; padding-top: 10px; } .tshirtitem a{ color:#868e96; text-decoration: none; } .tshirtitem a:hover{ color:white; } .carousel-control-next, .carousel-control-prev { top: 120px!important; } @media (min-width: 768px) { .headerMain{ /*height: 515px;*/ } } @media (min-width: 992px) { .headerMain{ /*height: 600px;*/ } } @media (min-width: 1200px) { .headerMain{ /*height: 660px;*/ } } .headerMain .container-fluid{ padding-left:0px; padding-right:0px; height:100%; } .c-content{ font-size: 1.5rem; } .c-content span{ display:inline-block; background: rgba(0,0,0, 0.5); padding: 0.3rem; margin-bottom: 20px; margin-top: 10px;} .c-content span p{ padding:0; margin:0; } .carousel-item{ width:100%; height:auto; overflow:hidden; } .carousel-item .img-fluid { width:100%; height:100%; } .carouselholder{ position: absolute; top: 0; } .pholder{ width:100%; background:#293a4c; } .carouselholder .cslider{ padding-right:0px; -ms-flex: 1 0 75%; flex: 1 0 75%; } } .pagekopfholder{ max-height: 420px; position: relative; top: 0; width: 100%; } .cslider .pagekopf-inner { margin: 0 auto; width: 100%; height: 420px; } .pagekopfholder img { min-width: 100%; min-width: 100%; height: 420px; object-fit: cover;} .pagekopfholder .pagekopfitem{ max-height: 420px; position: relative; top: 0; width: 100%; } .addbanner{ flex-basis: 210px; -ms-flex: 0 0 195px; flex: 0 0 195px; margin-top: 241px!important; background:none; } .headerholder .addbanner{ flex-basis: 195px; -ms-flex: 0 0 195px; flex: 0 0 195px; margin-top: 225px!important; background:none; padding-right:0px; } .addbanner .g:first-child{ margin-bottom:0px; } @media screen and (max-width: 764px) { /*.carouselholder{ display:none; } .addholder{ position: relative; top: -20px; }*/ .addbanner { display:flex; flex-wrap:wrap; flex-basis: none; -ms-flex: none; flex: none; margin-top: 0px auto !important; background: #293a4c; } .addbanner .g:first-child{ margin-bottom:0px!important; } .carouselholder{ height: auto; } .carouselholder .cslider { padding-right: 0px; -ms-flex-grow: 1; flex-grow: 1!important; height:200px!important; } .headerholder .pagekopfbild{ padding-right:0px; -ms-flex: 1 0 50%; flex: 1 0 50%; } .headerMain{ background:#293a4c; } .suchpanel { margin-top:0px!important; } .carousel.startseite img { /* min-width: 100%; height: 700px;*/ min-width: 100%; height: 350px!important; object-fit: contain; object-position: 0% } .carousel.startseite .carousel-inner{ max-height: 350px!important; } .carousel-inner >.item >img{ margin:0 auto; width:100%; height:350px!important; } .carousel-caption{ bottom:0px!important; } } @media screen and (max-width: 740px) { .addbanner .g:first-child{ margin-bottom:5px!important; } .headerMain{ height:675px; } .carouselholder { top: 90px; } .carousel-caption { bottom: 10px !important; } .c-content { font-size: 1.1rem!important; } .c-content span { margin-top: 0px; margin-bottom: 15px; } .carousel-inner h2 { font-size: 2rem!important;} } @media screen and (max-width: 380px) { .headerholder .pagekopfbild{ padding-right:0px; -ms-flex: 1 0 20%; flex: 1 0 20%; } .addbanner{ margin-left: auto; padding:auto; } .tshirtitem{ margin-right: 5px; padding-top: 10px; } .topbar .btn-search { width: 100%; } } /* EXTRA GROSSE SCREENS*/ @media (min-width: 1370px) { .carousel-item { width: 1224px; height: auto; overflow: hidden; } } @media (min-width: 1420px) { .carousel-item { width: 1275px; height: auto; overflow: hidden; } } @media (min-width: 1620px) { .carousel-item { width: 1435px; height: auto; overflow: hidden; } } @media (min-width: 1920px) { .carousel.startseite img { min-width: 100%; height: 500px; object-fit: cover; } .headerMain { height: 420px; } .carousel-item { width: 1703px; height: auto; overflow: hidden; } } .carousel.startseite{ max-height: 420px; position: relative; top: 0; width: 100%; } .carousel.startseite img { /* min-width: 100%; height: 700px;*/ min-width: 100%; height: 420px; object-fit: cover; } .carousel.startseite .carousel-indicators li{ height: 8px; background: rgba(0,0,0,.4); } .carousel.startseite .carousel-indicators .active{ background: #5689c2; } .carousel-inner h2{ font-size: 2.5rem; text-shadow: black -1px -1px 1px; } .carousel.startseite .carousel-inner{ max-height: 420px; } .carousel-inner >.item >img{ margin:0 auto; width:100%; height:420px; } .carousel-caption{ position: absolute; right: 15%; bottom: 20px; left: 24%; text-align: left; } .carousel-indicators { } .addbanner{ max-height:700px; background:none; position: relative; padding-left: 0px; margin-top:185px; } .addbanner .g{ margin:auto auto; } .addbanner .a-single{ } .marginright-20{ margin-right:45px; margin-bottom: 20px; } .page-item a span{ display:inline-block!important; } @media (min-width: 768px) { .carousel-indicators { } } @media (min-width: 992px) { .carousel-indicators { } } @media (min-width: 1200px) { .carousel-indicators { }} .display-2{ text-shadow: 1px 1px 1px #777; } .nav-form-search{ background:transparent; border-color: rgba(255,255,255,.2); height: 30px; } .nav-form-search:focus{ background:transparent; border-color: rgba(255,255,255,.7); } .btn-search{ background:none; color: white; } .topbar .btn-search{ background:none; color: white; font-size: 0.8rem; } .topbar .btn-search:hover{ text-decoration: none; } .topbar .btn-search span:hover{ text-decoration: none; } .topbar{height:50px; position:relative; z-index:1000; padding:0.1rem 1rem;} .topbar .nav-link{ padding: .1rem 1rem; } .topbar .icon-book-open{ color:#868e96; font-size:1rem; padding-top: 12px; padding-left:10px; display: inline-block; } .topbar .icon-book-open:before{ margin-right:10px; } .topbar a .icon-book-open { color:#868e96; margin-right:20px; } .topbar a .icon-book-open span{ font-family:'Ubuntu Condensed', sans-serif; } .topbar a:hover .icon-book-open { color:white; text-decoration: none; } @media screen and (max-width: 420px) { .topbar{ height: 60px; } .btn { padding: 0.6rem 0.7rem; } .search-form .form-control{ width: 100px; } .searchfield { margin-left: 0px!important;} #AktuellesBranche h1 { width: 50%; } #wpsl-widget-form label{ margin-bottom:30px; display:block; } input#wpsl-widget-search { height: 45px; margin-right: 0px; display: block; margin-bottom: 30px; } #wpsl-widget-submit { dipslay:block; } #Installateursuche { background: url('images/sinstallateursuche.jpg') no-repeat bottom right, #5689c2!important;} } #Installateursuche h1 { margin-top: 20px!important; margin-bottom: 30px!important;} .hauptnav{ background-color: rgba(65, 65, 65, 0.5) !important; color:rgba(255,255,255,.9); height:130px; font-size: 1.1rem; z-index: 1000; /*menü on top*/ position: relative;/*menü on top*/ } .hauptnav .nav-link{ padding-right: 0.5rem!important; padding-left: 1rem!important; color: rgba(255,255,255,0.7)!important; } .navbar .dropdown-menu li { width: 100%; margin-left: 0 !important; } .navbar-nav{ margin-right: 10px; } .navbar-nav li:last-child ul{ left:-70px!important; } .collapse.show{ background:rgba(65, 65, 65, 0.9)!important; margin-top:50px; height: auto; } .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } .navbar-dark .navbar-nav .show > .nav-link span { padding-bottom:6px; border-bottom: 3px solid white; } .dropdown-menu{ margin: 0 0 0 0!important; left:18px; border-radius: 0; color: #878787; } #idNav .dropdown-item{ color:#878787; } .searchfield{ margin-left: 20px; } .search-form .form-control{ color:white; } .form-control{ width:auto; } .menu-hauptmenu li:last-child ul.dropdown-menu{ right: 0; left: auto; } @media (min-width: 992px) { .form-control{ width:100%; }} .btn-search:hover{ color:#f2ca30; } .navbar-brand{ margin-left: 10px; } .navbar-brand img{ height: 95px; width:auto; } /*Dropdown Sub*/ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: -17px; left: 100%; /*margin-top: -6px;*/ margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border: 5px solid transparent; border-right-width: 0; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .dropdown-submenu .dropdown-toggle{ color:#878787; text-decoration: none; } .dropdown-submenu .dropdown-item .nav-link{ color:#878787; } .dropdown-submenu .dropdown-item .nav-link:hover { color: #878787; } @media (max-width: 767px) { footer .last h3{ margin-top:20px; } .headerMain { height: 740px; } .headline h1 { top: -406px !important; } .headline .borderbottom { top: -415px !important; } } /*Ende: Dropdown Sub*/ /*Fix Navigation - scrollPosstyler.js*/ .sps { padding: 1em .5em; position: relative; top: 0; left: 0; transition: all 0.25s ease; width: 100%; } .sps--abv { } .sps--blw { background-color: rgba(65, 65, 65, 0.7) !important; height:90px; position:fixed; } .sps--blw .navbar-brand img{ height: 65px; width:auto; } .sps--blw #idNav.navbar-collapse { margin-top: 0px; } /*Ende: Fix Navigation - scrollPosstyler.js*/ #idNav .form-control::placeholder{ color:white; } #idNav .form-control{ color:white; } /*Slider*/ /*WPSL Widget+++++++++++++++*/ #Installateursuche{ background: url('images/sinstallateursuche.jpg') no-repeat right, #5689c2; } #Installateursuche h1{ margin-top:40px; color:white; } #wpsl-widget-form label{ color: white; margin-top: 20px; font-size: 1.3rem; display: inline-block; margin-right: 30px; position: relative; top: 15px; } #wpsl-widget-search{ text-align: center; } input#wpsl-widget-search{ height:45px; margin-right:30px; } #wpsl-widget-submit{ padding: 0.5rem 1rem; } .wpsl-store-location h3 a{ font-size:1.75rem; } .wpsl-directions{ display:none; } .wpsl-country{ display:none; } button.grau:hover{ background-color:#5a5858; } .isuche{ margin-bottom: 30px; border:none; height:40px; } .googlemaps{ background-color:white; } .halbpage{ min-height:200px; } .viertelpage{ min-height:400px; padding-bottom: 40px; } .halbpage{ min-height:800px; margin-top: 80px; display:inline-block; } .viertelpage h2{ margin-top: 40px; display:inline-block; } .sechzpage{ min-height: 200px; } .borderbottom{ width:70px; line-height: 0.5em; padding-bottom: 10px!important; border-bottom: 3px solid #f2ca30; border-width: 5px; height:0px; } .orange{ color:#f2ca30; } .btn{ padding: 0.6rem 1rem; font-size: 1.1rem; } .btn-primary{ border-radius: 0px; } .blau{ background:#5689c2; border: #5689c2; color:white; cursor: pointer; margin-top:20px; } .carousel .blau{ margin-top:0px; } .grau{ background:#5a5858; border:#5a5858; } .grau:hover{ background:#6b6968; } .nav-pills .nav-link.active, .show > .nav-pills .nav-link {background-color:#568ac2;} /* Abschnitt Daten und Fakten+++++++++++++++++++++++++++++++++++++ */ .googlemaps{ background: url(images/gmaps.jpg) no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%; height:100%; } .elbe{ color:white; background: linear-gradient( rgba(20,20,20, .7), rgba(20,20,20, .7)), url(images/Daten_Fakten_BG2.jpg) repeat-y center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 400px; } .dfanreisser{ margin-top: 15px; } #DatenundFakten h2{ margin-top: 15px; font-size:2.5rem; } #DatenundFakten h3{ font-size: 2rem; } .datenfaktenaimg{ margin-top: 20px; } .newsblock{ margin-top:40px; margin-bottom:40px; } .titlewrap{ position:relative; } .titlewrap a{ position: absolute; top: 10px; right: 15px; color: #343a40 ; padding: 15px; border: 1px solid #343a40;} .titlewrap a:hover{ text-decoration: none; color:black; border-color:black; } @media (max-width: 767px) { .elbe{ height:auto; } } @media (min-width: 992px) { .datenfaktenaimg{ margin-top: 0px; } } @media (min-width: 1200px) { #DatenundFakten h2{ margin-top: 40px; } } #AktuellesBranche{ background-color: #f7f6f6; } #AktuellesBranche h1{ } .card-body p{ text-align:justify; } .img-card-news{ max-width: 100%; height: 200px; object-fit: cover;} .card-title a{ color:#5a5858; } .card-title a:hover{ text-decoration: none; color: #3e3d3c; } .card-body{ min-height: 420px; } .card-body.mitarbeiter p{ text-align: center; } .card-subtitle span{ font-size: 1rem; } a.link_readmore{ color:#5a5858;; } a.link_readmore:hover{ text-decoration: none; color: #3e3d3c; } a.social-link{ color:#212529; } a.social-link:hover{ color:#f2ca30; text-decoration: none; } .bookleft{ float: left; width: 50%; margin-left: 40px; margin-bottom: 20px; } .bookcover{ width: 15%; float: left; } .videopraes{ padding-left:0px!important; } /*Twitter Stream*/ .socialbar span.icon-social-twitter{ font-size:2.4rem; } .socialbar { margin-top:0px; } .widget_latest_tweets_widget{ margin-top:10px; background:white; padding:5px; } .latest-tweets { /* style tweet list wrapper */ } .latest-tweets h3 { /* style whatever you did with the header */ } .latest-tweets ul { list-style-type: none; padding-left:0px; } @media (min-width: 576px) { .latest-tweets ul { list-style-type: none; padding-left: 20px; padding-right: 10px; }} .latest-tweets li { /* style tweet item */ } .latest-tweets .tweet-text{ font-size:0.9rem; margin-bottom: 0.7rem; } .latest-tweets .tweet-details:before{ content: '\f017'; font-family: FontAwesome; margin-right: 5px; color:gray; } .latest-tweets .tweet-text a { color:#f2ca30;} .latest-tweets .tweet-text .emoji { /* style embedded emoji image in tweet */ } .latest-tweets .tweet-details { font-size:0.9rem; } .latest-tweets .tweet-details a{ color:gray;} .cff-wrapper{ margin-left:0px; margin-bottom: 20px; margin-top:7px; } .socialbar .custom-html-widget{ background:none; } .cff-item{ font-size: 0.9rem; background:white; padding: 7px 10px 7px 30px !important; } .#cff .cff-author{ margin-bottom: 0px; } #cff.cff-fixed-height{ padding:0px!important; } .cff-header{ display:none;} @media (max-width: 767px) { #cff.cff-fixed-height{ height:auto!important;} .bookcover{ width:30%; } } @media (max-width: 940px){ .carousel.startseite img { object-position: 50% } } .facebook .social-link{ font-size:1.2rem; } .facebook .social-link span{ font-size: 2.2rem; } #Testimonials{ background-color: white; } #Testimonials .sechzpage{ padding-bottom:0px; } #Video .viertelpage{ padding-bottom:0px; } .carousel.testimonial{ max-height: 700px; position: absolute; top: 0; width: 100%; } .carousel.testimonial img { min-width: 100%; height: 700px; } .carousel.testimonial .carousel-indicators li{ height: 8px; background: rgba(0,0,0,.4); } .carousel-indicators{ } .carousel.testimonial .carousel-indicators .active{ background: #5689c2; } .carousel.testimonial .carousel-inner{ max-height: 700px; } #Foerderungen .container-fluid{ background: white; } #Foerderungen h2{ font-size: 2.5rem; } .foerderblock{ margin-top:40px; } @media (min-width: 950px) { #Foerderungen .container-fluid{ background: url(./images/forderanreisser.jpg) no-repeat top center; }} @media (min-width: 1024px) { #Foerderungen .container-fluid{ background: url(./images/forderanreisser.jpg) no-repeat top right; }} #Foerderungen p:first-child{ margin-top:20px; } #nextVeranstaltungen{ background-color: #5689c2; } #nextVeranstaltungen h2{ color:white; font-size: 2.5rem; } #nextVeranstaltungen{ color:white; } #nextWebinar{ padding: 40px 0px 0px 0px; background:#2a3b4c; font-size:1.5rem; } #nextWebinar a{ color:white; } #nextWebinar a:hover{ text-decoration: none; color:#5689c2; } #nextWebinar h2{ color:white; font-size: 2.5rem; } .veranst{ font-size: 1.5rem; } .vdatum{ font-size: 1.2rem; } #newsletterform{ background-color: #f2ca30; color:white; } #newsletterform h2{ margin-top:35px; font-size:2.5rem; } .newsletter{ margin-top: 50px; margin-bottom: 80px; } #newsletterform p { margin-bottom:2rem; } @media (min-width: 768px) { .newsletter{ margin-top: 75px; margin-bottom: 0px;} .newsletterform h2{ text-align: left; }} .newsletter form{ width:100%; } .newsletter .form-control{ background:white; border:1px white solid; height:50px; border-top-right-radius:0; border-bottom-right-radius:0; width:265px; } .newsletter .form-control::placeholder{ color: #868e96 ; font-family: 'Ubuntu Condensed', sans-serif; font-size: 1.2rem; font-weight: 400; } .newsletter button{ background: #5a5858; border:1px solid white; height:50px; border-top-right-radius:0.25rem; border-bottom-right-radius:0.25rem; } .newsletter button:hover{ color:white; background:#6b6968; border:white; border: 1px solid white; } .newsletter label{ color:white; } a.linkdsgvomailchimp{ color:white; font-weight:bold; } .nlbtn{ background: #5a5858; border:1px solid white; height:50px; border-top-right-radius:0.25rem; border-bottom-right-radius:0.25rem; } .videoContainer{ width:100%; height:200px; } footer { padding-top:70px; background-color: #414141; min-height: 350px; color:white; } footer p{ font-size:1.1rem;} footer span{ margin-right:10px; font-size: 0.9rem; } footer a{ color:white; margin-top:-5px; } footer a:hover{ text-decoration: none; color:#f2ca30; } footer .menu-footer-quicklinks-container{ font-size: 1.1rem; } footer .menu-footer-quicklinks-container ul{ margin:0px; padding:0px; text-decoration: none; list-style-type: none; } footer .menu-footer_middlemenu-container{ font-size: 1.1rem; } footer .menu-footer_middlemenu-container ul{ margin:0px; padding:0px; text-decoration: none; list-style-type: none; } footer h3{ margin-top: 10px; } footer .Firmenkopf h2{ font-size: 2.5rem; } /*Unterseiten++++++++++++++++++++++++++++++++++++*/ .titelimage{ width:100%; height: auto; } .standardcontent{ min-height:300px; padding:50px 0px 50px 15px; } .sonnenfakten{ width:100%; background-size:cover; background-position: bottom left; background-image: url('./images/Sonnenfakten_bg.jpg'); } #sf-1 .textwidget p{ font-size:1.1rem; } #sf-2 .textwidget p{ font-size:1.1rem; } #sf-3 .textwidget p{ font-size:1.1rem; } @media (max-width:1300px){ #sf-1 { text-shadow: 4px 4px 4px #212E3D; } #sf-2 { text-shadow: 4px 4px 4px #212E3D; } #sf-3 { text-shadow: 4px 4px 4px #212E3D; } } .headline h1{ position:relative; top:-125px; color:white; } .headline .borderbottom{ top: -125px; position: relative; } @media (min-width: 1024px) { .headline h1{ top: -120px; } .headline .borderbottom{ top: -120px; } } .standardcontent p a{ font-size: 1.2rem; color: #5689c2; } .standardcontent a{ font-size: 1rem; color: #5689c2; } .breadcrumb{ padding:0px; margin-bottom:40px; background:none; } .breadcrumb a{ font-size:1.75rem; padding-right: 10px; } .standardcontent a:hover{ text-decoration: none; color:#414141; } .standardcontent p a:hover{ text-decoration: none; color:#414141; } .standardcontent .Zwischentitel{ margin: 30px 0px;} .standardcontent li a{ color:#5689c2; } /*Förderübersicht++++++++++++++++++++++++++++++++++++*/ /*FAQ Styling++++++++++++++++++++++++++++++++++++*/ .Seitentitel-solo{ font-size: 2.5rem; } #foerder .hrf-faq-list{ margin: 20px 0px; } #foerder .hrf-title{ text-transform: uppercase; font-size: 1.5rem!important; } #foerder .hrf-title.close-faq span{ width:50px!important; height:50px!important; top:15px!important; } #foerder .hrf-title.open-faq span{ background-color:#f2ca30!important; } .hrf-content {font-size:1rem!important; padding-left:5px!important; padding-top:40px!important;} .hrf-content li{ padding-bottom: 10px; } .hrf-content a{ font-size: 1rem!important; } .hrf-content li a{ font-size: 1rem!important; color: #f2ca30!important; } .hrf-content li a:hover{ color:#fff; text-decoration: none; } .hrf-content h3{ margin:15px 0px; } /*Was leistet Solarwärme++++++++++++++++++++++++++++++++++++*/ .blockquotesolar{ background: #e4e3e3; position:relative; padding:30px; margin-top:30px; } .blockquotesolar:before{ content: ' '; position: absolute; width: 0; height: 0; left: 50px; top: -40px; border: 20px solid; border-color: transparent transparent #e4e3e3 transparent; } .smallimg{ width: 220px; height: auto; } .awardimg{ width:80%; height:auto; float:right; } @media screen and (max-width: 750px) { .awardimg{ margin-top:25px; width:65%; } } .tab-content{ margin-top: 100px; margin-bottom: 0px; } #wasleistetsolar h3{ margin-bottom: 30px; } .dundf{ margin-top:40px; margin-bottom: 110px; } h3.einsparung{ font-size: 1.5rem; margin-top:0px; color: white; margin-bottom:0px!important; margin-top:0px!important; padding:10px 10px 0px 0px; } h3.einsparung:before{ font-family:'FontAwesome'; content:'\f1fe'; padding-right:10px; color: white; font-size: 2.5rem; } p.einsparungp{ font-size: 1.3rem; margin-top: 5px; color: white; padding: 0 0 0 55px; font-family: 'Ubuntu Condensed'; } .einsparungdiv{ width:100%; margin-top:30px; border: 1px solid #568ac2; padding-left:25px; border-radius:5px; background-color: #568ac2; } .co2einsparungdiv{ width:100%; margin-top:30px; border: 1px solid #8cc256; padding-left:25px; border-radius:5px; background-color: #8cc256; margin-bottom:50px; } h3.co2einsparung{ font-size: 1.5rem; margin-top:0px; color: white; margin-bottom:0px!important; margin-top:0px!important; padding:10px 10px 0px 0px; } h3.co2einsparung:before{ font-family:'FontAwesome'; content:'\f06c'; padding-right:15px; color: white; font-size: 2.5rem; } #myTab a{ font-size:1.4rem; text-transform: uppercase; color:black; } #myTab a.active{ color:white; } #myTab .nav-item{ margin-right:0px; } /*a.lightboxhover:before{ display:block; font-family: FontAwesome; content:'\f00e'; color:rgba(255,255,255, 0.4); font-size: 4rem; position: absolute; top: 31%; left: 42%; }*/ /* Änderung laut Chatgpt*/ a.lightboxhover { position: relative; /* Stellt sicher, dass das Pseudoelement relativ zum Bild positioniert wird */ display: block; /* Stellt sicher, dass das a-Tag als Blockelement behandelt wird */ } a.lightboxhover::before { font-family: FontAwesome; content: '\f00e'; /* Unicode für eine Lupe, falls du Text verwendest; sonst leer lassen, wenn ein Icon per Hintergrundbild hinzugefügt wird */ position: absolute; top: 50%; /* Positioniert das Pseudoelement vertikal in der Mitte */ left: 50%; /* Positioniert das Pseudoelement horizontal in der Mitte */ transform: translate(-50%, -50%); /* Verschiebt das Pseudoelement, um es exakt in der Mitte zu zentrieren */ font-size: 48px; /* Größe der Lupe, falls als Text verwendet */ color: rgba(255, 255, 255, 0.7); /* Farbe der Lupe */ pointer-events: none; /* Stellt sicher, dass das Pseudoelement keine Klicks abfängt */ z-index: 10; /* Stellt sicher, dass das Pseudoelement über dem Bild liegt */ display: flex; /* Flexbox für eine eventuelle Innenzentrierung */ justify-content: center; /* Zentriert den Inhalt horizontal */ align-items: center; /* Zentriert den Inhalt vertikal */ } .guetesiegel a.lightboxhover::before{ top:50%; } @media screen and (max-width: 1200px) { .nav-pills .nav-link { border-radius: .25rem; background:aliceblue; /*border: 1px solid #5689c2;*/ margin-bottom: 10px; } } @media screen and (max-width: 740px){ #wasleistetsolar h3{ margin-top:30px; } .dundf { margin-top: 0px;} .smallimg { margin-top: 30px;} } @media (max-width:1024px) and (min-width:790px) { h3.einsparung{ font-size: 1.2rem; } h3.einsparung:before{ font-size: 2.0rem; } h3.co2einsparung{ font-size: 1.2rem; } h3.co2einsparung:before{ font-size: 2.0rem; } p.einsparungp{ font-size: 1rem; padding: 0 0 0 45px; } } /* * * ========================================== * WAS leistet Solar - Accordion * ========================================== * */ .collapsible-link { width: 100%; position: relative; text-align: left; } .collapsible-link::before { content: '\f107'; position: absolute; top: 50%; right: 0.8rem; transform: translateY(-50%); display: block; font-family: 'FontAwesome'; font-size: 1.1rem; } .collapsible-link[aria-expanded='true']::before { content: '\f106'; } #headingOne{ height:auto; background:#568ac2; } .accordion .card{ background:white; border:0px; margin-bottom:5px; } .accordion .card .img{ width:19%; height:auto; display:inline-block; } .accordion .card h2{ display:inline-block; width:65%; } .accordion .card-header{ padding:0px; } .accordion .card-body{ padding:0px; } .accordion .collapsible-link::before{ font-size:2.5rem; right:-5rem; } .accordion .collapse.show{ margin-top:50px; background:white!important; } .btn-wls{ background:none; color: white; font-size: 1.5rem; margin-left: 25px; } @media screen and (max-width: 740px){ .accordion .collapsible-link::before{ right:-2rem!important; } .btn-wls{ background:none; color: white; font-size: 1.2rem; margin-left: 10px; } } @media (max-width:1024px) and (min-width:790px) { .accordion .collapsible-link::before{ right:-4rem!important; } } /* /*Branchennews++++++++++++++++++++++++++++++++++++*/ #branchennews small span{ font-size: 0.9rem; } #branchennews small{ color:#868686; } #branchennews .posthead{ margin-bottom:20px; } .widget_archive ul{ list-style-type: none; padding:0px; } .widget_archive a{ color:black; } .widget_archive a:hover{ color:#f2ca30; text-decoration: none; } #branchennews article{ margin: 0px 0px 50px 0px; } .page-item.active .page-link{ background:#f2ca30; color:white; border-color:#ddd; } .postpagination{ margin:50px auto; } a.page-link{ color: #868e96; } @media screen and (max-width: 575px) { .ft-wpbs .page-link { font-size: .7rem; padding: .3rem .45rem; } } /*Gütesiegel++++++++++++++++++++++++++++++++++++*/ table.table-responsive{ margin-top:50px; } table.table-responsive a{ color:#868e96; } .tablepress td img{ width: auto; height:auto; margin-right:40px; } /*Mehr anzeigen show/hide++++++++++++++++++++++++++++++++++++*/ .sh-link{ margin:40px 0px 40px 0px; display:block; } .sh-link a{ color:white; background: #414141; padding:5px; } .sh-link a:hover{ text-decoration: none; background:#7b7b7b;;} .wp-caption{ float:left; margin: 10px 0px 10px 10px; } .wp-caption-text{ background: #568ac2; padding:3px; color:white; width:300px; } .ui-dialog-titlebar{ height:auto!important; min-height: 36px!important; } #bilderdownload img{ width: 100%; } #bilderdownload button{ width:100%; font-size: 1rem; } #bilderdownload .row{ margin-bottom:35px; } @media screen and (max-width: 1200px) { #bilderdownload button { width: 100%; font-size: 0.8rem; margin-bottom:20px; } } .bildcaption{ text-align:justify; background-color:#5689c2; color:white; padding:10px; } /*++++++++++++++++Sitemap++++++++++++++++++++++++++++*/ ul.simple-sitemap-page li a{ color:black; } ul.simple-sitemap-page li a:hover{ color:#f2ca30; } /*+++++Mitarbeiter+++++++*/ .mitarbeiterliste .card{ border:none; height: 370px; } .mitarbeiterliste .card a{ font-size: 1rem; } .mitarbeiterliste h2{ width:100%; display:block; margin:20px 0px 20px 20px; color:#f2ca30; } /* Responsive Videos */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bildanleitung .video-container iframe{ position:relative; width: 450px; height:700px; } /*QUICK CHECK######################*/ .quickcheck iframe{ height:1000px!important; } p.image-caption { font-size: 1em; /* Textgröße der Bildunterschrift */ color: #666; /* Farbe der Bildunterschrift */ text-align: left; /* Zentriert die Bildunterschrift unter dem Bild */ margin-top: 5px; /* Abstand zwischen dem Bild und der Bildunterschrift */ font-style: italic; /* Schrägschrift für die Bildunterschrift */ }