@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 200;
src: url(//www.webgaroo.de/wp-content/themes/generatepresschild/fonts/poppins-v21-latin-200.woff2) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url(//www.webgaroo.de/wp-content/themes/generatepresschild/fonts/poppins-v21-latin-300.woff2) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url(//www.webgaroo.de/wp-content/themes/generatepresschild/fonts/poppins-v21-latin-regular.woff2) format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url(//www.webgaroo.de/wp-content/themes/generatepresschild/fonts/poppins-v21-latin-700.woff2) format('woff2');
}
body {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
color: #000;
font-size: 18px;
line-height: 1.5;
font-weight: 300;
background-image:
linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-neuss-duesseldorf-bg.jpg);
background-position: center top !important;
background-attachment: fixed !important;
}
blockquote {
border: none;
font-style: normal;
background-color: transparent;
padding: 0;
font-size: 18px;
line-height: 1.5 !important;
margin-bottom: 10px;
}
pre {
max-width: 100%;
white-space: pre-wrap;
line-height: 1.5;
padding: 50px;
text-align: center;
}
sub,
sup {
font-size: 13px;
font-weight: 300;
color:#ccc;
}
hr {
background-image: url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/bar.png);
}
a,
a:visited {
color: #333;
text-decoration: none !important;
}
strong {
font-weight: 300;
}
em {
font-style: normal;
font-weight: 700;
}
h1 {
font-size: 60px;
line-height: 1.5;
font-weight:200;
}
h2 {
font-size: 60px;
line-height: 1.5;
text-align: center;
padding-bottom: 50px;
font-weight:200;
}
h2 strong {
font-size: 18px;
}
h3 {
line-height: 1.5;
font-weight: 700;
font-size: 20px;
}
h4 {
font-size: 25px;
line-height: 1.5;
}
.grey h4 {
color: #fdc20c;
font-weight: 300;
margin-bottom: 0;
}
.grey h3::first-letter,
.white h3::first-letter { }
h5 {
text-align: center;
padding-bottom: 30px;
}
h5 em {
color: #fdc20c;
font-size: 30px;
font-weight: 300;
} .site-header {
background: transparent;
}
.header-image {
max-width: 140px;
} .site-content a {
color: #7e5401;
}
.site-content a:hover {
color: #999;
}
.site-content ul {
margin-left: 0;
}
.site-content ol {
margin-left: 20px;
}
.site-content ul li {
background-image: url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/list.png);
background-repeat: no-repeat;
background-size: 21px 18px;
list-style-type: none;
padding-left: 30px;
background-position: left top;
}
.site-content ol li {
background-image: url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/pfeil.png);
background-repeat: no-repeat;
background-size: 16px 5px;
list-style-type: none;
padding: 0 0 20px 25px;
background-position: left 15px;
} .main-navigation {
background-color: transparent;
}
.main-nav ul li a {
font-size: 16px;
color: #333;
text-transform: uppercase;
}
.main-navigation .main-nav ul li a {
font-size: 16px !important;
line-height: 1.5;
text-transform: none;
}
.main-nav ul li ul li a {
font-size: 15px !important;
text-transform: none;
}
.main-navigation .main-nav ul li a:hover {
color: #fdc20c !important;
}
.main-navigation.is_stuck {
background-color: #fff;
}
.main-navigation.is_stuck ul {
padding-top: 15px;
}
.main-navigation.is_stuck a {
color: #333 !important;
} .main-navigation .menu-bar-item > a {
font-size: 25px;
background: #333;
color: #fff;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.main-navigation .menu-bar-item > a:hover {
background: #fdc20c;
color: #333;
border: solid 1px #333;
} .main-navigation.has-menu-bar-items button.menu-toggle {
flex-grow: 1;
}
.menu-toggle {
color: #333 !important;
font-size: 30px;
margin-top: 15px;
} .slideout-navigation.main-navigation {
background-color: rgba(10, 10, 10, 0.8) !important;
}
.slideout-navigation.main-navigation ul li a {
line-height: 1.5 !important;
color: #fff !important;
font-weight: 200 !important;
}
.slideout-navigation.main-navigation ul li {
margin-bottom: 30px !important;
}
.slideout-navigation.main-navigation ul li a {
font-size: 30px !important;
}
.slideout-navigation ul li[class*="current-menu-"] > a {
color: #fdc20c !important;
font-weight: normal;
}
.slideout-navigation.do-overlay .slideout-exit {
position: relative !important;
font-size: 40px !important;
color: #fdc20c !important;
} li.current_page_item a {
color: #fdc20c !important;
} .footer-widgets {
color: #fff;
background-image:
linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-neuss-duesseldorf-bg.jpg);
background-position: center top !important;
background-attachment: fixed !important;
}
.footer-widgets ul li {
line-height: 1.5;
display: inline;
font-size: 16px;
}
.menu li {
display: block !important;
line-height: 1.5 !important;
}
.footer-widgets ul em {
color: #fdc20c;
font-weight: 300;
}
.footer-widgets a,
.footer-widgets a:visited {
color: #ccc;
}
.footer-widgets a:hover {
color: #999;
}
.footer-widgets strong {
color: #fff;
text-transform: uppercase;
font-weight: normal;
}
.textwidget ul li {
font-size: 13px;
}
.textwidget ul li a {
font-size: 16px !important;
border-bottom: dashed 1px #fdc20c;
}
.site-info {
background-color: transparent;
}
.site-info a,
.site-info a:visited {
color: #333;
}
.site-info a:hover {
color: #666;
}
.copyright-bar ul {
margin-left: 0;
}
.copyright-bar li {
background-image: none;
display: inline;
list-style-type: none;
margin-right: 10px;
}
.footer-bar-align-right .copyright-bar {
float: none;
} .gallery-caption {
padding-bottom: 40px;
}
.gallery {
text-align: center;
}
.center {
text-align: center;
}
.none {
display: none;
}
.rechts {
text-align: right;
}
.rechts h2 {text-align:right;}
.links h2 {
text-align: left;
}
.abstand {
margin-bottom: 10px;
} .su-spoiler-title {
min-height: 20px;
line-height: 1.5;
padding: 10px 7px 10px 70px !important;
color: #fff;
font-weight: 200 !important;
font-size: 16px !important;
background-color: #333;
}
.su-spoiler-icon {
padding-top: 3px;
margin-left: 30px;
text-align: left !important;
}
.spler .su-spoiler-title {
padding: 10px 7px 10px 70px !important;
color: #a37f0e;
font-weight: 400 !important;
font-size: 16px !important;
background-color: #fff;
max-width: 200px;
} table {
text-align: left;
}
#cv {
border: none;
padding: 1px;
}
#cv td {
font-size: 15px;
padding: 5px;
} .formular p {
line-height: 1.5;
font-size: 14px;
margin-bottom: 2px;
}
.accept {
font-size: 12px !important;
}
.zstm {
margin-left: -14px;
}
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
textarea,
select {
border: solid 1px #ccc;
width: 100%;
background-color: transparent;
color: #fff;
}
input[type="submit"] {
background-color: #333;
border-radius: 5px;
font-size: 14px;
margin-top: 20px;
} .page-id-4234 input[type="text"],
.page-id-4234 input[type="url"],
.page-id-4234 input[type="email"],
.page-id-4234 input[type="tel"],
.page-id-4234 textarea,
.page-id-4234 select {
color: #000;
} .fa-solid,
.fas {
font-size: 30px;
}
*:focus-visible {
outline-color: currentColor;
outline-style: solid;
outline-offset: 0.25rem;
outline-width: 0.1rem;
}
.grey *:focus-visible {
outline-color: #fff !important;
} .whitetop img,
.shape img {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.shape img {
text-align: center;
} .generate-sections-container {
background-position: center top !important;
background-attachment: fixed !important;
}
.white,
.grey,
.hell,
.yellow,
.portfolio {
padding-top: 200px;
padding-bottom: 200px;
}
.portfolio {
background-color: #f8f8f8;
} .white {
background-image:
linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-neuss-duesseldorf-bg.jpg);
}
.white h2 em, .hell h2 em,
.portfolio h2 em, .h2-rot h2 em, .h2-green h2 em {
position: relative;
}
.white h2 em::before, .hell h2 em::before,
.portfolio h2 em::before, .h2-rot h2 em::before, .h2-green h2 em::before {
background-color: #fdc20c;
content: "";
position: absolute;
width: calc(100% + 4px);
height: 60%;
left: -2px;
bottom: 0;
z-index: -1;
transform: rotate(-2deg);
}
.h2-rot h2 em::before {
background-color: #fd1f1f;
}
.h2-green h2 em::before {
background-color: #6d983b;
} .whitebottom {
padding-top: 100px;
padding-bottom: 100px;
background-image:
linear-gradient(rgba(253, 194, 12, 0.9), rgba(253, 194, 12, 0.9)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-neuss-duesseldorf-bg.jpg);
}
.whitebottom p {
font-size: 13px;
line-height: 1.5;
border-top: solid 1px #000;
border-style: dotted;
padding: 20px;
} .grey h2 em {
color: #fdc20c;
}
.grey h3 {
font-weight: 200;
color: #fdc20c !important;
}
.grey a {
color: #fdc20c;
}
.grey,
.whitetop {
color: #fff;
background-image:
linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-neuss-duesseldorf-bg.jpg);
} .yellow {
background-image:
linear-gradient(rgba(253, 194, 12, 0.6), rgba(253, 194, 12, 0.6)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-neuss-duesseldorf-bg.jpg);
}
.yellow ul li {
filter: brightness(0.0);
} .whitetop {
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%, 0% 38%);
text-align: center;
padding-top: 100px;
padding-bottom: 200px;
}
.whitetop h1 strong {
color: #fff;
font-size: 18px;
font-weight:200;
}
.whitetop h1 em {
font-style: normal;
font-weight: 700;
color: #fdc20c;
}
.whitetop h2 {
font-size: 18px !important;
font-weight: 200;
line-height:1.5;
padding-top:10px;
padding-bottom:30px;
}
.topright {
padding-top:20px;
}
.grey img, .whitetop img, .hell img {
max-width: 80% !important;
}
.whitetop p {
margin-bottom: 30px;
} .slogan {
font-size: 60px;
line-height: 1.5;
}
.slogan em {
font-style: normal;
font-weight: 700;
color: #fdc20c;
} .btn-1,
.btn-2,
.btn-3 {
text-align: center;
padding-top: 60px;
font-size:14px;
}
.btn-1 a, .btn-2 a, .btn-3 a {
text-align: center;
position: relative;
padding: 15px 15px;
color: white !important;
background: linear-gradient(
135deg,
#333,
#000,
#333,
red
);
background-size: 300% 300%;
border-radius: 5px;
animation: gradient 8s linear infinite;
transition: transform 0.3s;
}
.btn-2 a {
background: linear-gradient(
135deg,
#333,
#000,
#333,
#fdc109
);
background-size: 300% 300%;
}
.btn-3 a {
background: linear-gradient(
135deg,
#333,
#000,
#333,
#7ca404
);
background-size: 300% 300%;
}
.btn-1 a:hover,
.btn-2 a:hover {
color: #ccc !important;
}
.btn {
border-color: transparent !important;
}
.btnrund {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
text-align: center;
}
.pbig {
font-size: 70px !important;
line-height: 1.5 !important;
font-weight: 700;
margin-bottom: 20px !important;
}
.su-button-style-ghost span {
border: none !important;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 300% 50%;
}
} .info-grid {
font-size:14px;
display: grid;
gap: 16px;
}
.info-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.info-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
} .info-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: 20px 10px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
} .info-card i {
display: block;
flex-shrink: 0;
width: 100%;
height: 34px;
margin: 0 0 8px;
text-align: center;
font-size: 1.5rem;
line-height: 24px;
color: #fdc20c;
} .info-card a {
color: #fff;
text-align: center;
text-decoration: none;
}
.info-card a:hover {
text-decoration: underline;
}
.info-card strong {
font-weight:700;
letter-spacing:2px;
}  .box {
margin: 100px 0 0 -200px !important;
background: rgb(253 194 12 / 80%);
padding: 60px;
}
.boxes {
padding-bottom: 70px;
padding-left: 200px;
}
.boximg img {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
max-width: 400px !important;
}
.boximg {
text-align: center;
} .boximg-2 img {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
padding: 50px;
margin-top: 20px;
background: #333;
}
.boxes a {
color:#000;
font-size:16px;
text-transform:uppercase;
}
.boxes a:hover {
color:#666;
}
.grey img,
.hell img {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
} .angebot2 ul,
.angebot3 ul {
padding: 10%;
font-size: 16px;
min-height: 650px;
background: rgba(0, 0, 0, 0.4);
border-radius: 2%;
}
.angebot2 ul li,
.angebot3 ul li {
background-size: 10px 9px;
background-position: left 10px;
padding-left: 20px;
}
.angebot2 .su-column,
.angebot3 .su-column {
padding: 0 5%;
}
.angebot2 strong,
.angebot3 strong {
font-weight: 300;
font-size: 30px;
color: #fdc20c;
}
li.liextra,
li.liextra2 {
text-align: center !important;
border-bottom: none !important;
background-image: none !important;
padding-left: 0 !important;
margin-bottom: 10%;
}
li.liextra2 {
background: #333;
color: #ccc;
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
width: 150px;
height: 150px;
padding: 15% 0 10% 0 !important;
margin-left: 25%;
}
li.liextra2 strong {
color: #fdc20c;
font-weight: 700;
font-size: 30px;
}
.angebot3 .su-column {
padding: 0;
} .menuangebote li {
line-height: 1.5 !important;
background-image: none !important;
padding-left: 0 !important;
}
.menuangebote a,
.menuangebote a:visited {
color: #000 !important;
border-bottom: dotted 3px #fff;
text-transform: uppercase;
}
.menuangebote a:hover {
color: #fff !important;
}
.menuangebote ul {
background: #fdc20c !important;
text-align: center;
padding: 40px 60px 60px 20px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
} .infos {
text-align: center;
}
.infos ul li {
background-image: none;
padding-left: 0;
}
.infos a {
color: #333 !important;
font-weight: 700;
}
.infos a:hover {
color: #666 !important;
}
.infowhite {
display: none;
} .emgelb em {
font-weight: 300;
color: #fdc20c;
}
.emgelb li {
margin-bottom: 20px !important;
}
.farbe .su-column {
padding: 30px 30px 5px 30px;
min-height: 400px;
background-color: #e9aa11;
background: rgba(0, 0, 0, 0.4);
border-radius: 2%;
}
.ablauf em {
position: relative;
color: #333 !important;
font-weight: normal;
}
.ablauf em::before {
background-color: #fdc20c;
content: "";
position: absolute;
width: calc(100% + 4px);
height: 60%;
left: -2px;
bottom: 0;
z-index: -1;
transform: rotate(-2deg);
}
.ablauf2 em {
position: relative;
color: #fdc20c !important;
font-weight: normal;
}
.ablauf img,
.ablauf2 img {
max-width: 300px !important;
} .erfahrung em {
font-size: 40px;
line-height: 1.2;
}
.faq details {
border: 1px solid #999;
border-radius: 6px;
padding: 10px;
margin-bottom: 10px;
}
.faq summary {
list-style: none;
cursor: pointer;
}
.faq summary::before {
content: "+";
margin-right: 10px;
}
.faq details[open] summary::before {
content: "-";
} .page-id-5162 .info-card a {
padding-top:20px;
padding-bottom:10px;
}  .pakete.su-row {
margin-top: 100px !important;
}
.pakete .su-column {
padding: 40px 30px;
box-sizing: border-box;
font-size: 15px;
border-radius: 15px;
box-shadow: 0 -10px 20px -4px rgba(0, 0, 0, 0.1);
text-align:center;
}
.pakete strong {
font-weight:700;
}
.pakete img {
border-radius: 0;
}
.pakete h3 {
font-size: 15px;
letter-spacing:1px;
font-weight: 700;
}
.pakete .btn-2 {
padding: 15px 0;
}
.pakete ul li {
padding-bottom: 10px;
background-size: 10px;
position: relative;
padding-left: 20px;
text-align:left;
filter: brightness(0.3);
background-position: left 5px;
}
.pricing-icon {
font-size: 30px;
color: transparent;
-webkit-text-stroke: 1.2px #333;
margin-bottom: 20px;
} .karte1 em {
font-size: 50px;
}
.karte1 { text-align: center;
}
.karte1 em, .karte1-business em {
position: relative;
}
.karte1 em::before, .karte1-business em::before  {
background-color: #fdc20c;
content: "";
position: absolute;
width: calc(100% + 4px);
height: 60%;
left: -2px;
bottom: 0;
z-index: -1;
transform: rotate(-2deg);
}
.karte1-business {
position: relative; text-align: center;
}
.karte1-business em {
font-size: 50px;
}
.karte1-business::before {
content: "Empfehlung";
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
border-radius: 20px;
font-size: 14px;
letter-spacing: 1px;
white-space: nowrap;
background: #333;
color: #fff;
}
} .page-id-2742 h2 {
font-size: 18px;
font-weight: 700;
line-height: 1.5;
text-align: left;
padding-bottom: 0;
}
.page-id-2742 p {
margin-bottom: 17px;
}
pre a {
background-color: #fdc20c;
color: #333 !important;
font-weight: normal !important;
padding: 30px !important;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
box-shadow:
rgba(64, 64, 64, 0.4) -5px 5px,
rgba(0, 0, 0, 0.3) -10px 10px,
rgba(7, 7, 7, 0.2) -15px 15px,
rgba(20, 20, 20, 0.1) -20px 20px,
rgba(30, 30, 30, 0.05) -25px 25px;
border: solid 2px #fff;
}
pre a:hover {
background-color: #333;
color: #fff !important;
border-color: #666 !important;
}  .page-id-431 h2 {
font-size: 40px;
line-height: 1.5;
padding-bottom: 0;
text-align: left;
}
.page-id-431 .grey h2 {
color: #fdc20c;
} .referenzen h2 {
text-align: left;
font-size: 50px;
padding-bottom: 0;
}
.img-radius-no img {
border-radius: 5% !important;
}
.img-ref {
box-shadow:
rgba(0, 0, 0, 0.15) 0px 15px 25px,
rgba(0, 0, 0, 0.01) 0px 5px 10px;
}
.karten-ref .su-column {
font-size: 14px;
padding: 20px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
min-height: 250px;
margin-top: 50px !important;
}
.karten-ref img {
width: 70px;
height: auto;
margin-top: -45px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
}  .karten .su-column, .karten-rot .su-column, .karten-green .su-column  {
box-shadow: 0 -10px 20px -4px rgba(0, 0, 0, 0.1);
}
.karten .fa-solid {
color: #fdc20c;
}
.karten-green .fa-solid {
color: #6d983b;
}
.karten-rot .fa-solid {
color: #fd1f1f;
}
.karte {
font-size:16px;
padding: 30px;  border-radius: 10px;
margin-bottom:20px!important;
margin-top:20px!important;
text-align:center;
} .karten-grey .karte {
font-size:14px;
line-height:1.7;
border: 1px solid #999;
} .timeline {
position: relative;
max-width: 720px;
margin: 40px auto;
padding-left: 80px;
}
.timeline::before {
content: "";
position: absolute;
left: 25px;
top: 0;
bottom: 0;
width: 2px;
background: #ccc;
}
.timeline .timeline-item {
position: relative;
margin-bottom: 60px;
}
.timeline .timeline-item:last-child {
margin-bottom: 0;
}
.timeline-number {
position: absolute;
left: -80px;
top: 0;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
background: #222;
color: #fff;
font-size: 16px;
font-weight: 700;
}
.timeline-item h3 {
margin: 0;
font-size: 18px;
line-height: 2.5;
}
.timeline-item p {
margin: 0;
line-height: 1.7;
} @media screen and (max-width: 1510px) {
h1,
h2,
.slogan {
font-size: 40px;
padding-bottom: 0;
}
.rechts h2, .links h2 {
text-align:center;
padding-bottom:20px;
} @media screen and (max-width: 1100px) {
.grey img, .whitetop img, .hell img {
max-width: 50% !important;
}
h3 {
margin-top: 20px !important;
}
.su-column-size-1-2,
.su-column-size-1-4 {
width: 100% !important;
margin-left: 0 !important;
}
.whitetop .su-row,
.ablauf2 {
display: flex;
flex-direction: column-reverse;
}
.boxes.su-row {
padding: 0 100px 50px;
}
.box {
margin: 0!important;
padding: 0!important;
}
.boximg-2 img {
border-radius: initial;
padding: 20px;
background: transparent;
filter: brightness(0);
}
.whitetop h1 strong {
font-size:14px!important;
}
.whitetop h2 {
font-size:14px!important;
}
.topleft {
padding-bottom:20px;
}
.topright {
padding:0 0 30px;;
}
.btn-2 {
margin-top:10px;
}	
.grey,
.hell,
.white,
.whitetop,
.whitebottom,
.portfolio {
padding: 100px 0 40px 0 !important;
}
.farbe .su-column {
min-height: auto;
padding: 20px 15px !important;
font-size: 16px;
text-align: center;
}
.farbe h3 {
font-size: 16px;
}
.angebot2 ul,
.angebot3 ul {
padding: 5%;
font-size: 15px;
}
li.liextra2 {
padding: 25% 0 10% 0 !important;
margin-left: 10%;
}
.menuangebote a {
color: #000;
}
.menuangebote ul {
padding: 25px 30px 35px;
border-radius: 2%;
}
.boxes {
text-align: center;
}
.boxes.su-row {
padding: 0 20px 10px;
}
.boxes img {
max-width: 200px !important;
}
.box {
background-color: transparent;
padding: 10px 0;
}
}
@media (max-width: 900px) {
.info-grid--3,
.info-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-grid {
grid-template-columns: repeat(2, 1fr);
}
.trust-grid {
grid-template-columns: repeat(2, 1fr);
margin-top: 20px;
}
.karten, .karten-rot, .karten-green  {
margin-top:30px!important;
}
} @media screen and (max-width: 768px) {
body,
blockquote,
button,
input,
select,
textarea,
.sidebar .widget,
.footer-widgets .widget,
.footer-widgets .widget-title,
.site-info {
font-size: 16px;
}
h1,
h2,
.slogan {
font-size: 27px !important;
}
h2 strong {
font-size: 14px !important;
}
h3 {
font-size: 16px;
} .site-logo {
flex-basis: 100%;
text-align: center;
padding-bottom: 60px;
}
button.menu-toggle {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0%);
}
.gp-icon svg {
height: 0.9em;
width: 0.9em;
color: #fff !important;
}
.mobile-menu-control-wrapper .menu-toggle {
background-color: rgba(0, 0, 0, 0);
}
.site-header {
background-attachment: fixed;
background-image:
linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)),
url(//www.webgaroo.de/wp-content/themes/generatepresschild/images/webdesign-bg.jpg);
background-position: center top;
}
.header-image {
max-width: 140px;
filter:
brightness(0)
saturate(100%)
invert(72%)
sepia(87%)
saturate(624%)
hue-rotate(351deg)
brightness(100%)
contrast(99%);
} .ablauf img,
.ablauf2 img {
max-width: 150px !important;
}
.ablauf h4,
.ablauf2 h4 {
text-align: center;
} .grey,
.white,
.whitetop,
.whitebottom,
.portfolio,
.yellow {
clip-path: none;
padding: 60px 0 !important;
}
.whitetop {
padding-top: 0 !important;
} .gallery-caption {
font-size: 12px !important;
padding-bottom: 15px;
line-height: 1.5;
} .angebot2 ul,
.angebot3 ul {
min-height: auto;
padding: 10%;
}
li.liextra2 {
padding: 21% 0 10% 0 !important;
margin-left: 15% !important;
} .footer-widgets {
text-align: center;
}
.copyright-bar ul {
margin: 0;
}
.copyright-bar ul li {
display: block;
padding: 0;
margin: 10px 0;
} .rechts {
text-align: left;
}
.rechts h2, .links h2 {
padding-bottom:0;
} textarea {
resize: horizontal;
max-width: 100% !important;
}
input[type="submit"] {
padding: 10px 5px;
} .su-spoiler {
text-align: left;
}
.su-spoiler-content {
padding-left: 10px !important;
}
.su-spoiler-title {
font-size: 14px !important;
} .farbe .su-column {
min-height: auto;
padding: 20px 15px !important;
font-size: 16px;
text-align: center;
}
.farbe h3 {
font-size: 16px;
} .page-id-2742 {
text-align: left;
}
.page-id-2742 h2 {
font-size: 18px !important;
line-height: 1.5 !important;
} .page-id-431 h2 {
text-align: center;
margin-top: 30px !important;
} .contact-grid {
grid-template-columns: 1fr;
}
.trust-grid {
grid-template-columns: 1fr;
}
.karten-ref .su-column {
min-height: auto;
margin-top: 45px !important;
} .timeline {
padding-left: 0;
max-width: 100%;
}
.timeline::before {
display: none;
}
.timeline .timeline-item {
position: relative;
margin-bottom: 40px;
text-align: center;
}
.timeline-number {
position: relative;
left: auto;
top: auto;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin: 0 auto 18px;
border-radius: 50%;
background: #222;
color: #fff;
font-size: 16px;
font-weight: 700;
}
.timeline-item h3 {
text-align: center;
}
.hell {
padding-top: 40px !important;
} summary {
text-align: center;
}
.links h2 {
text-align: center;
} .fm-round.fm-side-space {
margin-top: -300px;
}
.fm-item-1-0 .fm-icon,
.fm-item-1-1 .fm-icon {
background-size: 20px 20px;
margin-right: 5px;
margin-bottom: 10px;
} .su-row {
padding-left: 20px;
padding-right: 20px;
} .generate-sections-container {
background-size: auto;
} .info-grid--3,
.info-grid--4 {
grid-template-columns: 1fr;
} .pakete.su-row {
margin-top: 0!important;
}
.karte1 em, .karte1-business em  {
font-size: 40px;
}
.pakete ul li {
text-align:left;
}
.info-card i {
margin: 0 0 0;
} .grey img,.whitetop img, .hell img {
max-width: 80% !important;
}
}