@font-face {
font-family: 'DejaVuSans';
src: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/fonts/DejaVuSans.ttf) format("truetype");
}
@font-face {
font-family: 'DejaVuSans-Bold';
src: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/fonts/DejaVuSans-Bold.ttf) format("truetype");
}
:root {
--text-color: #3C3C3C;
--navi-color: #2C68AB;
--rot-color: #D23731;
--black-color: #000;
--hover-color: rgba(147,15,15,0.9);
--layer-color: rgba(0,0,0,0.5);
--linker-color: #FFF;
--font-size-navi: 20px;
--font-size-base: 20px;
--font-size-base-mobile: 16px;
--font-size-kachel: 12px;
--font-size-klein: 14px;
--font-size-h1: 32px;
--font-size-h2: 32px;
--font-size-h2-lineheight: 38px;
--font-size-linker: 34px;
--font-size-linker-mobile: 24px;
--font-size-linker-lineheight-mobile: 28px;
--font-lineheight: normal;
--font-primary: 'DejaVuSans';
--font-primary-bold: 'DejaVuSans-Bold';
--font-weight-base: 400;
--font-weight-bold: 900;
--base-logo: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/images/logo.png);
--border-radius: 30px;
--font-size-big: 56px;
--font-size-big-lineheight: 64px;
}
.clearfix {
clear: both;
float: none;
}
html,body {
overflow-x: hidden;
font-family: var(--font-primary) !important;
font-size: var(--font-size-base-mobile) !important;
line-height: var(--font-lineheight) !important;
min-width: 380px;
}
header#masthead {
height: 80px;
}
a:focus {
outline: none !important;
}
#content .content_text .textwidget a {
color: var(--text-color);
text-decoration: underline;
}
#content .content_text.blau .textwidget a {
color: var(--linker-color);
}
#content .content_text.content_kachel .textwidget a {
color: var(--linker-color);
}
#masthead.site-header {
padding: 0;
margin-bottom: 0;
}
footer.site-footer,
footer.site-footer .corp-container,
#content .content_text,
#content .corp-container,
#masthead .corp-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0;
}
footer.site-footer,
#content .corp-container {
max-width: 1600px;
}
@media only screen and (max-width: 1024px) {
#content .content_testimonials,
#content .content_partner {
overflow-y: hidden;
}
#content .textwidget a {
color: var(--black-color);
text-decoration: underline;
}
footer.site-footer .corp-container {
padding: 0 15px;
}
}
@media only screen and (min-width: 1024px) {
html,body {
font-size: var(--font-size-base) !important;
}
#masthead.site-header {
margin-bottom: 20px;
}
#site-navigation.main-navigation {
position: relative;
top: 38px;
}
}
#masthead.site-header .site-branding .site-title a {
background-image: var(--base-logo);
display: block;
width: 125px;
height: 60px;
text-indent: -1000ex;
background-size: 100%;
font-size: 0;
margin: 7px 15px;
}
p.kleiner {
font-size: var(--font-size-klein);
}
@media only screen and (min-width: 1024px) {
header#masthead {
height: 132px;
}
#masthead.site-header {
padding: 15px 0;
}
#masthead.site-header .site-branding .site-title a {
width: 200px;
height: 97px;
margin: 0 0 0 15px;
}
#site-navigation.main-navigation {
padding-right: 15px;
}
#content .content_text.content_kachel {
padding: 0 15px;
}
#content .content_text.content_kachel .panel-grid-cell {
padding: 0;
}
}
header #mobile-navigation ul li a {
font-family: var(--font-primary);
font-size: var(--font-size-base);
color: var(--navi-color);
background-color: var(--linker-color);
border-color: var(--navi-color);
}
header #mobile-navigation ul li {
text-align: center;
}
@media only screen and (min-width: 1200px) {
#masthead.site-header .site-branding .site-title a {
margin: 0;
}
#site-navigation.main-navigation {
padding-right: 0;
}
}
#site-navigation.main-navigation ul li {
padding: 0;
}
#site-navigation.main-navigation ul li a {
font-family: var(--font-primary-bold);
color: var(--navi-color);
font-size: var(--font-size-navi);
text-transform: none;
}
.content_kachel .panel-grid-cell,
.headervideo {
position: relative;
}
.content_kachel .panel-grid-cell .panel-last-child {
position: absolute;
bottom: 40px;
left: auto;
width: 100%;
width: calc(100% - 15px);
}
#content .content_kachel.funfer .panel-grid-cell .panel-last-child {
bottom: 40px;
}
#content .content_kachel.funfer .panel-grid-cell .so-panel:nth-child(2) {
opacity: 0;
position: absolute;
left: 0;
top: 0;
margin: 30px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
background-color: rgba(147,15,15,0.5);
font-size: 15px;
border-radius: var(--border-radius) !important;
color: var(--linker-color);
}
#content .content_kachel.funfer .panel-grid-cell:hover .so-panel:nth-child(2) {
opacity: 1;
}
@media only screen and (min-width: 1024px) {
#content .content_kachel.funfer .panel-grid-cell .panel-last-child a.linker {
font-size: var(--font-size-kachel);
}
#content .content_kachel.funfer .panel-grid-cell .panel-last-child {
bottom: 10px;
}
#content .content_kachel.funfer .panel-grid-cell .so-panel:nth-child(2) {
margin: 10px;
}
}
.content_kachel.velux .panel-grid-cell:last-child .panel-last-child {
position: relative;
bottom: 0;
}
@media only screen and (min-width: 600px) and (max-width: 1023px) {
#content .content_text.content_dach,
#content .content_text.content_kachel {
display: block;
}
#content .content_text.content_dach .panel-grid-cell,
#content .content_text.content_kachel .panel-grid-cell {
width: 50%;
float: left;
}
}
.content_text.content_testimonials .textwidget {
text-align: center;
font-family: var(--font-primary);
}
.headervideo.wirsind .panel-layout .panel-grid .textwidget h2 {
margin: 25px 0;
}
@media only screen and (min-width: 1024px) {
.content_kachel .panel-grid-cell .panel-last-child {
width: 100% !important;
}
.content_text.content_testimonials .textwidget,
.content_text .sow-testimonial .sow-testimonial-text,
.content_text.content_response .textwidget {
padding: 40px 20px !important;
}
.headervideo .panel-layout .panel-grid:last-child {
position: absolute;
bottom: 10px;
width: 100%;
z-index: 100;
}
#content .headervideo .panel-grid-cell .layer .textwidget {
background: var(--layer-color);
padding: 35px;
border-radius: 50px;
}
.headervideo .panel-layout .panel-grid:last-child {
display: table;
}
.headervideo .panel-layout .panel-grid:last-child .panel-grid-cell {
display: table-cell;
width: 60% !important;
vertical-align: bottom;
}
.headervideo .panel-layout .panel-grid:last-child .panel-grid-cell:last-child .textwidget {
padding-bottom: 0 !important;
}
.headervideo .panel-layout .panel-grid:last-child .panel-grid-cell:last-child {
width: 40% !important;
}
.headervideo .panel-layout .panel-grid:last-child a {
text-decoration: underline;
}
#content .content_text.content_dach .textwidget {
padding-right: 15px;
}
#content .content_text.blau,
#content .content_text.wirsind, {
padding: 0 15px;
}
.headervideo.wirsind .panel-layout .panel-grid .textwidget h2 {
margin: 0 0 40px;
}
}
@media only screen and (min-width: 1200px) {
.headervideo .panel-layout .panel-grid:last-child {
left: 50px;
}
.headervideo .panel-layout .panel-grid:last-child {
bottom: 50px;
}
.headervideo .panel-layout .panel-grid .textwidget p {
font-size: var(--font-size-navi);
}
#content .content_text.content_unterseite .so-widget-sow-slider,
#content .content_text .textwidget,
#content .content_text.wirsind .panel-layout .panel-grid-cell,
#content .content_text.content_response .panel-grid-cell,
#content .content_text.content_kachel .panel-grid-cell {
padding: 0;
}
}
#content .content_kachel .panel-grid-cell p a.linker {
font-family: var(--font-primary-bold);
font-size: var(--font-size-base);
text-decoration: none;
}
.headervideo .panel-layout .panel-grid .textwidget p {
color: var(--black-color);
}
.headervideo .panel-layout .panel-grid .textwidget h2 {
margin: 0 0 20px;
} #content .content_text.content_unterseite .so-widget-sow-slider,
#content .content_dach .textwidget,
#content .content_dach .sow-image-container,
#content .headervideo .textwidget,
#content .content_text .textwidget,
#content .content_text.wirsind .panel-layout .panel-grid-cell,
#content .content_text.content_response .panel-grid-cell {
padding: 15px;
}
@media only screen and (max-width: 800px) {
#content .content_text.content_kachel .panel-grid-cell {
padding: 15px;
}
}
#content .content_text.content_kachel .panel-grid-cell .panel-last-child .textwidget {
padding: 0;
}
#content .content_partner .slick-slide {
margin: 0 20px;
}
@media only screen and (min-width: 1024px) {
.headervideo .panel-layout .panel-grid .textwidget h2 {
margin: 0;
}
.headervideo .panel-layout .panel-grid .textwidget p {
color: var(--linker-color);
}
}
.content_text .sow-testimonials .sow-testimonial-wrapper .sow-testimonial-text {
display: block !important;
}
.content_text.content_testimonials .panel-grid-cell {
position: relative;
}
.content_text.content_testimonials .textwidget,
.content_text .sow-testimonial .sow-testimonial-text,
.content_response .textwidget {
border: 4px solid var(--navi-color);
border-radius: var(--border-radius) !important;
padding: 30px !important;
min-height: 300px;
position: relative;
margin: 0 15px;
}
@media only screen and (min-width: 1024px) {
.content_text.content_testimonials .textwidget,
.content_text .sow-testimonial .sow-testimonial-text,
.content_response .textwidget {
margin: 0 15px 120px;
}
}
.content_text .sow-testimonials .sow-image-wrapper-shape-square,
.content_response .textwidget img {
max-width: 200px;
position: relative;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: var(--border-radius);
}
.content_text.content_testimonials .panel-grid-cell {
position: relative;
min-height: 500px;
}
@media only screen and (min-width: 1024px) {
.content_text.content_testimonials .panel-last-child img,
.content_text .sow-testimonials .sow-image-wrapper-shape-square,
.content_response .textwidget img {
max-width: 200px !important;
height: auto !important;
width: 100% !important;
position: absolute;
left: 50%;
bottom: -120px;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: var(--border-radius);
}
}
#content .wirsind .textwidget h2 a {
text-transform: uppercase;
border-radius: var(--border-radius);
background-color: var(--rot-color);
font-size: var(--font-size-big);
color: var(--linker-color);
text-decoration: none;
padding: 15px 20px;
}
#content .content_text.content_response {
margin-bottom: 120px;
}
#content .content_text.content_logo ul li {
list-style: none;
float: left;
width: 50%;
max-height: 162px;
}
.blauer {
background-color:  var(--navi-color);
padding: 50px 15px;
}
@media only screen and (min-width: 1024px) {
#content .content_text.content_logo ul li {
list-style: none;
float: left;
width: auto;
max-height: 100%;
}
.blauer {
padding: 50px 0 20px;
}
}
footer.site-footer aside#sow-slider-2 .sow-slider-base .sow-slider-pagination li a,
#content .sow-slider-base .sow-slider-pagination li a {
width: 20px;
height: 20px;
border-radius: var(--border-radius);
}
footer.site-footer aside:first-child ul li,
#content .blauer .content_text.blau .textwidget li,
#content .blauer .content_text.blau .textwidget p,
#content .blauer .content_text.blau .textwidget h2 {
color: var(--linker-color);
}
footer.site-footer aside h2,
#content .blauer .content_text.blau .textwidget h2 {
font-size: var(--font-size-big);
line-height: var(--font-size-big-lineheight);
}
#content .content_text.content_reden .textwidget p:first-child,
footer.site-footer aside p:first-child,
#content .blauer .content_text.blau .textwidget p:first-child {
font-size: var(--font-size-h2);
}
#content .blauer .content_text.blau img {
margin: 20px;
}
footer.site-footer aside:first-child ul,
#content .blauer .content_text.blau .textwidget ul {
margin: 10px 0 0 0;
padding: 0;
}
footer.site-footer aside:first-child ul li,
#content .blauer .content_text.blau .textwidget li {
padding: 25px 0 15px 60px;
list-style: none;
position: relative;
}
footer.site-footer aside:first-child ul li:before,
#content .blauer .content_text.blau .textwidget li:before {
content: "";
background-image: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/images/Icon_Telefon_weiss.png);
width: 46px;
height: 46px;
display: block;
position: absolute;
left: 0;
top: 12px;
background-size: 100%;
}
footer.site-footer aside:first-child ul li:nth-child(2):before,
#content .blauer .content_text.blau .textwidget li:nth-child(2):before {
background-image: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/images/Icon_Mail_weiss.png);
}
footer.site-footer aside:first-child ul li:nth-child(3):before,
#content .blauer .content_text.blau .textwidget li:nth-child(3):before {
background-image: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/images/Icon_IG_weiss.png);
}
footer.site-footer aside:first-child ul li:nth-child(4):before,
#content .blauer .content_text.blau .textwidget li:nth-child(4):before {
background-image: url(https://roof-tec.de/wp-content/themes/siteorigin-corp-child/images/Icon_FB_weiss.png);
}
#content .content_text.content_unterseite a.linker{
top: -160px;
display: inline-block;
position: relative;
z-index: 1000;
font-family: var(--font-primary-bold);
color: var(--linker-color);
}
.trenner {
clear: both;
float: none;
}
@media only screen and (min-width: 1024px) {
footer.site-footer aside#sow-editor-2 {
width: 60%;
margin-right: 0;
}
footer.site-footer aside#sow-slider-2 {
width: 40%;
}
.trenner {
padding: 20px 0;
}
}
@media only screen and (min-width: 1200px) {
#reden .panel-grid-cell:first-child .textwidget {
padding-top: 40px;
}
}
form fieldset {
border: 0;
margin: 0;
padding: 0;
}
form fieldset.nebeneinander fieldset {
width: 50%;
width: calc(50% - 15px);
float: left;
margin-right: 15px;
}
form fieldset.nebeneinander fieldset:last-child {
margin-right: 0;
margin-left: 15px;
}
form fieldset input[type="tel"],
form fieldset input[type="email"],
form fieldset input[type="text"] {
width: 100%;
border: 1px solid #000;
background: transparent;
border-radius: 5px;
font-size: var(--font-size-base);
}
form fieldset input[type="file"],
form fieldset select {
padding: 10px;
border: 1px solid #000;
background: transparent;
border-radius: 5px;
font-size: var(--font-size-base);
}
form fieldset .dscf7_refresh_captcha {
font-size: 0;
text-indent: -1000ex;
}
form fieldset input[type="submit"] {
background-color: var(--navi-color);
width: auto;
margin-top: 15px;
display: block;
}
form fieldset label {
padding: 10px 0 25px;
display: block;
font-size: var(--font-size-base);
}
form fieldset .dscf7captcha label {
display: none;
}
form fieldset.daten label {
padding: 10px 0;
display: block;
}
form fieldset .captcha {
margin-top: 15px;
}
.textwidget .slick-prev::before,
.textwidget .slick-next::before,
.textwidget .wpsisac-slick-slider .slick-arrow svg,
.textwidget .wpsisac-slick-carousal .slick-arrow svg {
display: none;
}
.headervideo img,
footer.site-footer aside#sow-slider-2 .sow-slider-base ul.sow-slider-images li.sow-slider-image > img,
#content .sow-slider-base ul.sow-slider-images li.sow-slider-image > img,
#content .content_text .sow-image-container img,
#content .content_text.content_kachel img {
border-radius: var(--border-radius)
}
#content h1, #content h2, #content h3, #content h4, #content h5 {
font-family: var(--font-primary-bold);
text-transform: uppercase;
font-size: var(--font-size-h2);
}
#content #jobs h2 {
text-transform: none;
}
#content h1 {
font-size: var(--font-size-h1);
color: var(--navi-color);
}
#content .headervideo h2 {
font-size: var(--font-size-linker-mobile);
color: var(--black-color);
line-height: var(--font-size-linker-lineheight-mobile);
}
#page a:focus-visible {
outline: 2px solid var(--navi-color) !important;
transition: none !important;
}
#page .blau a:focus-visible,
#page footer a:focus-visible {
outline: 2px solid var(--linker-color) !important;
} @media only screen and (min-width: 1024px) {
#content .headervideo h2 {
font-size: var(--font-size-linker);
color: var(--linker-color);
line-height: var(--font-size-h2-lineheight);
margin-bottom: 20px;
} }
#content .content_text.content_dach p,
#content .content_text.content_dach h2 {
font-size: var(--font-size-linker);
color: var(--black-color);
}
#content .content_text.content_dach a.linker {
display: inline-block;
width: 100%;
max-width: 380px;
margin: 0 auto 15px;
color: var(--linker-color);
font-family: var(--font-primary-bold);
}
#content .content_text.content_dach h2  {
font-family: var(--font-primary-bold);
}
#content h1,
#content h2 {
color: var(--navi-color);
}
.burger span {
display: block;
width: 38px;
height: 4px;
border-radius: 50px;
margin: 5px 0 6px 0;
background-color: var(--navi-color);
-webkit-transition: all .225s cubic-bezier(.25,.8,.25,1) 0s;
transition: all .225s cubic-bezier(.25,.8,.25,1) 0s;
}
#masthead #mobile-menu-button {
line-height: 0;
padding: 5px;
position: absolute;
right: 20px;
top: 20px;
}
#mobile-menu-button.to-close{
padding: 8px;
}
#mobile-menu-button.to-close span:first-child {
-webkit-transform: translate(-3px,4px) rotate(45deg);
transform: translate(-3px,4px) rotate(45deg);
width: 31px;
margin-left: 0;
top: 3px;
position: relative;
}
#mobile-menu-button.to-close span:nth-child(2) {
-webkit-transform: translate(-4px,-2px) rotate(-45deg);
transform: translate(-4px,-2px) rotate(-45deg);
width: 31px;
margin-left: 0;
margin-top: -1px;
}
#mobile-menu-button.to-close span:nth-child(3){
display: none !important;
}
#content a.linker {
background-color: var(--rot-color);
font-size: var(--font-size-linker-mobile);
padding: 15px 20px;
border-radius: var(--border-radius);
color: var(--linker-color);
text-align: center;
text-transform: uppercase;
text-decoration: none !important;
display: inline-block;
}
#content .content_kachel a.linker {
padding: 15px;
}
@media only screen and (min-width: 600px) {
#content a.linker {
display: inline-block;
}
}
@media only screen and (min-width: 1024px) {
#jobs .textwidget {
margin-left: 50px;
}
#content a.linker {
font-size: var(--font-size-linker);
}
#content .wirsind .textwidget h2 a,
#content .headervideo a.linker {
padding: 20px 40px;
font-family: var(--font-primary-bold);
}
}
#content .content_text ul {
margin-top: 15px;
} footer.site-footer {
margin-top: 0;
}
footer.site-footer aside.widget {
margin: 50px 0 0;
}
footer.site-footer a,
footer.site-footer p,
footer.site-footer h2 {
color: var(--linker-color);
}
footer.site-footer h2 {
margin-top: 0;
}
.content_text.content_hover .textwidget p,
.bottom-bar p,
footer.site-footer aside p {
font-size: var(--font-size-base);
}
footer.site-footer .footer-left,
footer.site-footer .footer-right {
float: left;
width: 50%;
}
footer.site-footer .footer-right aside:first-child,
footer.site-footer .footer-left aside:first-child {
width: 67%;
float: left;
}
footer.site-footer .footer-right aside:last-child,
footer.site-footer .footer-left aside:last-child {
width: 33%;
float: left;
}
footer.site-footer aside p {
padding: 0;
}
.bottom-bar p {
text-align: center;
padding: 15px 0;
margin-bottom: 0;
color: var(--navi-color);
}
.content_text.content_hover .textwidget p,
.content_text.content_hover .textwidget h3 {
color: var(--linker-color);
font-weight: var(--font-weight-bold);
}
.content_text.content_hover .panel-grid-cell {
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.content_text.content_hover .panel-last-child {
position: absolute;
bottom: -155px;
background-color: var(--hover-color);
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.content_text.content_hover:last-child .panel-grid-cell:nth-child(3):hover .panel-last-child,
.content_text.content_hover:last-child .panel-grid-cell:nth-child(2):hover .panel-last-child,
.content_text.content_hover:last-child .panel-grid-cell:first-child:hover .panel-last-child ,
.content_text.content_hover:first-child .panel-grid-cell:nth-child(3):hover .panel-last-child,
.content_text.content_hover:first-child .panel-grid-cell:nth-child(2):hover .panel-last-child,
.content_text.content_hover:first-child .panel-grid-cell:first-child:hover .panel-last-child {
bottom: 0;
}
.content_text.content_hover .panel-last-child .textwidget {
padding: 0 15px 15px;
}
.content_layer {
position: relative;
padding: 50px 0;
}
.content_layer::before {
content: "";
position: absolute;
top: 0;
left: 0;
background-color: var(--layer-color);
width: 100%;
height: 100%;
z-index: 0;
}
#content .content_layer .panel-grid-cell {
position: relative;
z-index: 1;
}
#content .content_text.weiss .panel-grid-cell .textwidget,
#content .content_layer .panel-grid-cell .textwidget {
width: 100%;
max-width: 846px;
margin: 0 auto;
}
#content .content_layer p,
#content .content_layer h2 {
color: var(--linker-color);
}
.content_text.rot {
color: var(--navi-color);
}
.page-id-132 footer .corp-container {
display: none;
}
.content_slider {
position: absolute;
bottom: 5%;
left: 5%;
background-color: var(--navi-color);
padding: 20px 40px;
color: var(--linker-color);
border-radius: var(--border-radius);
}
.content_slider p {
font-size: var(--font-size-h2);
font-family: var(--font-primary-bold);
}
#content .wpsisac-slick-slider .slick-dots li button {
width: 25px !important;
height: 25px !important;
border-color: var(--navi-color) !important;
}
#content .wpsisac-slick-slider .slick-dots li.slick-active button {
background: var(--navi-color) !important;
border-color: var(--navi-color) !important;
}
#content .wpsisac-slick-slider.design-1 .slick-dots {
bottom: 30px !important;
}
#content .content_text.content_reden {
background-color: var(--navi-color);
}