forked from markus/AMPERION_Webpage
2984 lines
74 KiB
Text
2984 lines
74 KiB
Text
@charset "UTF-8";
|
||
/*=== MEDIA QUERY ===*/
|
||
@font-face {
|
||
font-family: 'Open Sans';
|
||
src: local("Open Sans"), local("OpenSans"), url("/static/fonts/OpenSans-SemiboldItalic.woff2") format("woff2");
|
||
font-weight: normal;
|
||
font-style: normal; }
|
||
|
||
@font-face {
|
||
font-family: 'Open Sans Semibold';
|
||
src: local("Open Sans Semibold"), local("OpenSansSemibold"), url("/static/fonts/OpenSans-Semibold.woff2") format("woff2");
|
||
font-weight: normal;
|
||
font-style: normal; }
|
||
|
||
body {
|
||
line-height: 1.5;
|
||
font-family: "Open Sans", sans-serif;
|
||
-webkit-font-smoothing: antialiased; }
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-family: "Open Sans Semibold", sans-serif; }
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-weight: 400; }
|
||
|
||
h1 {
|
||
font-size: 80px; }
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 34px; } }
|
||
@media (max-width: 480px) {
|
||
h1 {
|
||
font-size: 28px; } }
|
||
@media (max-width: 400px) {
|
||
h1 {
|
||
font-size: 26px; } }
|
||
h2 {
|
||
font-size: 28px; }
|
||
@media (max-width: 480px) {
|
||
h2 {
|
||
font-size: 22px; } }
|
||
h3 {
|
||
font-size: 20px; }
|
||
|
||
h4 {
|
||
font-size: 25px; }
|
||
|
||
p {
|
||
color: #777777;
|
||
font-size: 15px;
|
||
font-family: "Open Sans Semibold", sans-serif; }
|
||
|
||
ul {
|
||
margin: 0;
|
||
padding-left: 0;
|
||
list-style-type: none; }
|
||
|
||
iframe {
|
||
border: 0; }
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto; }
|
||
|
||
a,
|
||
a:focus,
|
||
a:hover {
|
||
text-decoration: none;
|
||
outline: 0;
|
||
color: #185b63; }
|
||
|
||
blockquote {
|
||
font-size: 18px;
|
||
border-color: #185b63;
|
||
padding: 20px 40px;
|
||
text-align: left;
|
||
color: #737373; }
|
||
|
||
.navbar-toggle .icon-bar {
|
||
background: #185b63; }
|
||
|
||
input[type="email"],
|
||
input[type="password"],
|
||
input[type="text"],
|
||
input[type="tel"] {
|
||
box-shadow: none;
|
||
height: 45px;
|
||
outline: none;
|
||
font-size: 14px; }
|
||
input[type="email"]:focus,
|
||
input[type="password"]:focus,
|
||
input[type="text"]:focus,
|
||
input[type="tel"]:focus {
|
||
box-shadow: none;
|
||
border: 1px solid #185b63; }
|
||
|
||
.form-control {
|
||
box-shadow: none;
|
||
border-radius: 0; }
|
||
.form-control:focus {
|
||
box-shadow: none;
|
||
border: 1px solid #185b63; }
|
||
|
||
.slick-slide {
|
||
outline: 0; }
|
||
|
||
.btn-main, .btn-small, .btn-transparent {
|
||
background: #185b63;
|
||
color: #ffffff;
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
letter-spacing: 1px;
|
||
padding: 20px 20px;
|
||
text-transform: uppercase;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
-webkit-transition: all 0.2s ease;
|
||
-moz-transition: all 0.2s ease;
|
||
-ms-transition: all 0.2s ease;
|
||
-o-transition: all 0.2s ease;
|
||
transition: all 0.2s ease; }
|
||
.btn-main.btn-icon i, .btn-icon.btn-small i, .btn-icon.btn-transparent i {
|
||
font-size: 16px;
|
||
vertical-align: middle;
|
||
margin-right: 5px; }
|
||
.btn-main:hover, .btn-small:hover, .btn-transparent:hover {
|
||
background: black;
|
||
color: #ffffff; }
|
||
|
||
.btn-solid-border {
|
||
border: 2px solid #ffffff;
|
||
background: transparent;
|
||
color: #ffffff; }
|
||
.btn-solid-border:hover {
|
||
background: whitesmoke; }
|
||
|
||
.btn-transparent {
|
||
background: transparent;
|
||
padding: 0;
|
||
color: #185b63; }
|
||
.btn-transparent:hover {
|
||
background: transparent;
|
||
color: #185b63; }
|
||
|
||
.btn-large {
|
||
padding: 20px 45px; }
|
||
.btn-large.btn-icon i {
|
||
font-size: 16px;
|
||
vertical-align: middle;
|
||
margin-right: 5px; }
|
||
|
||
.btn-small {
|
||
padding: 10px 25px;
|
||
font-size: 12px; }
|
||
|
||
.btn-round {
|
||
border-radius: 2px; }
|
||
|
||
.btn-round-full {
|
||
border-radius: 50px; }
|
||
|
||
.btn.active:focus,
|
||
.btn:active:focus,
|
||
.btn:focus {
|
||
outline: 0; }
|
||
|
||
.mt-10 {
|
||
margin-top: 20px; }
|
||
|
||
.mt-20 {
|
||
margin-top: 20px; }
|
||
|
||
.mt-30 {
|
||
margin-top: 30px; }
|
||
|
||
.mt-40 {
|
||
margin-top: 40px; }
|
||
|
||
.mt-50 {
|
||
margin-top: 50px; }
|
||
|
||
.btn:focus {
|
||
color: #d9d9d9; }
|
||
|
||
.w-100 {
|
||
width: 100%; }
|
||
|
||
.margin-0 {
|
||
margin: 0 !important; }
|
||
|
||
/* preloader */
|
||
.preloader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ffffff;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center; }
|
||
|
||
.bg-shadow {
|
||
background-color: #ffffff;
|
||
box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
|
||
padding: 20px; }
|
||
|
||
.bg-gray {
|
||
background: #f5f5f5; }
|
||
|
||
.bg-primary {
|
||
background: #185b63; }
|
||
|
||
.bg-primary-dark {
|
||
background: #0e353a; }
|
||
|
||
.bg-primary-darker {
|
||
background: #041011; }
|
||
|
||
.bg-dark {
|
||
background: #202122; }
|
||
|
||
.section {
|
||
padding: 10px 0; }
|
||
@media (max-width: 768px) {
|
||
.section {
|
||
padding-top: 20px;
|
||
padding-bottom: 20px; } }
|
||
.section-sm {
|
||
padding: 70px 0; }
|
||
|
||
.title {
|
||
padding: 20px 0 30px; }
|
||
.title h2 {
|
||
font-size: 18px;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px; }
|
||
|
||
.section-title {
|
||
margin-bottom: 20px; }
|
||
@media (max-width: 768px) {
|
||
.section-title {
|
||
margin-bottom: 10px; } }
|
||
.section-title h2 {
|
||
text-transform: uppercase;
|
||
font-weight: 400;
|
||
margin: 0px;
|
||
padding: 10px 0px;
|
||
font-size: 3em;
|
||
/* Standard Schriftgröße für h2 */ }
|
||
@media (max-width: 768px) {
|
||
.section-title h2 {
|
||
font-size: 1.5em;
|
||
/* Kleinere Schriftgröße für mobile Geräte */ } }
|
||
@media (max-width: 480px) {
|
||
.section-title h2 {
|
||
font-size: 1.2em;
|
||
/* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
|
||
.section-title p {
|
||
font-style: italic;
|
||
color: #626262;
|
||
font-family: "Open Sans Semibold", sans-serif;
|
||
font-size: 1em;
|
||
/* Standard Schriftgröße für p */ }
|
||
@media (max-width: 768px) {
|
||
.section-title p {
|
||
font-size: 0.9em;
|
||
/* Kleinere Schriftgröße für mobile Geräte */ } }
|
||
@media (max-width: 480px) {
|
||
.section-title p {
|
||
font-size: 0.8em;
|
||
/* Noch kleinere Schriftgröße für sehr kleine Geräte */ } }
|
||
.section-subtitle {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 30px; }
|
||
@media (max-width: 400px) {
|
||
.section-subtitle {
|
||
font-size: 22px; } }
|
||
@media (max-width: 480px) {
|
||
.section-subtitle {
|
||
font-size: 20px; } }
|
||
.page-title {
|
||
height: auto;
|
||
/* Höhe basierend auf Inhalt */
|
||
padding: 85px 0; }
|
||
.page-title .block {
|
||
text-align: center; }
|
||
.page-title .block h1 {
|
||
color: #ffffff;
|
||
font-weight: 200;
|
||
letter-spacing: 0.5em;
|
||
margin-top: 20;
|
||
margin-bottom: 10;
|
||
text-transform: capitalize; }
|
||
.page-title .block p {
|
||
color: #ffffff; }
|
||
|
||
.heading {
|
||
padding-bottom: 60px;
|
||
text-align: center; }
|
||
.heading h2 {
|
||
color: #000000;
|
||
font-size: 30px;
|
||
line-height: 40px;
|
||
font-weight: 400; }
|
||
.heading p {
|
||
font-size: 18px;
|
||
line-height: 40px;
|
||
color: #292929;
|
||
font-weight: 300; }
|
||
|
||
.page-wrapper {
|
||
padding: 70px 0; }
|
||
@media (max-width: 768px) {
|
||
.page-wrapper {
|
||
padding-top: 20px;
|
||
padding-bottom: 20px; } }
|
||
.social-media-icons ul li {
|
||
display: inline-block; }
|
||
.social-media-icons ul li a {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
display: inline-block;
|
||
padding: 7px 12px;
|
||
color: #ffffff; }
|
||
.social-media-icons ul li .twitter {
|
||
background: #00aced; }
|
||
.social-media-icons ul li .facebook {
|
||
background: #3b5998;
|
||
padding: 7px 18px; }
|
||
.social-media-icons ul li .googleplus {
|
||
background: #dd4b39; }
|
||
.social-media-icons ul li .dribbble {
|
||
background: #ea4c89; }
|
||
.social-media-icons ul li .instagram {
|
||
background: #bc2a8d; }
|
||
|
||
.dropdown-slide {
|
||
position: static; }
|
||
.dropdown-slide .open > a,
|
||
.dropdown-slide .open > a:focus,
|
||
.dropdown-slide .open > a:hover {
|
||
background: transparent; }
|
||
.dropdown-slide.full-width .dropdown-menu {
|
||
left: 0 !important;
|
||
right: 0 !important; }
|
||
.dropdown-slide:hover .dropdown-menu {
|
||
display: none;
|
||
opacity: 1;
|
||
display: block;
|
||
transform: translate(0px, 0px);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
color: #737373;
|
||
transform: translateY(0px); }
|
||
.dropdown-slide .dropdown-menu {
|
||
border-radius: 0;
|
||
opacity: 1;
|
||
visibility: visible;
|
||
position: absolute;
|
||
padding: 15px;
|
||
border: 1px solid #ebebeb;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
position: absolute;
|
||
display: block;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99); }
|
||
@media (max-width: 480px) {
|
||
.dropdown-slide .dropdown-menu {
|
||
transform: none; } }
|
||
.commonSelect {
|
||
margin-left: 10px;
|
||
padding-right: 6px;
|
||
position: relative; }
|
||
.commonSelect:before {
|
||
content: '\f3d0';
|
||
font-family: "Font Awesome 5 Free";
|
||
position: absolute;
|
||
right: -4px;
|
||
top: 4px;
|
||
font-size: 10px; }
|
||
.commonSelect select {
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
cursor: pointer;
|
||
border: none;
|
||
padding: 0;
|
||
height: auto;
|
||
color: #555555; }
|
||
.commonSelect select:focus {
|
||
box-shadow: none;
|
||
border: none; }
|
||
|
||
.tabCommon .nav-tabs {
|
||
border-bottom: 0;
|
||
margin-bottom: 10px; }
|
||
.tabCommon .nav-tabs li {
|
||
margin-right: 5px; }
|
||
.tabCommon .nav-tabs li.active a {
|
||
background-color: #185b63;
|
||
border: 1px solid #185b63;
|
||
color: #ffffff; }
|
||
.tabCommon .nav-tabs a {
|
||
border-radius: 0;
|
||
background: #f5f5f5; }
|
||
.tabCommon .nav-tabs a:hover {
|
||
border: 1px solid transparent;
|
||
background: #185b63;
|
||
color: #ffffff; }
|
||
|
||
.tabCommon .tab-content {
|
||
padding: 20px;
|
||
border: 1px solid #004753; }
|
||
|
||
.commonAccordion .panel, .commonAccordion-2 .panel {
|
||
border-radius: 0;
|
||
box-shadow: none; }
|
||
.commonAccordion .panel .panel-heading, .commonAccordion-2 .panel .panel-heading {
|
||
background: transparent;
|
||
padding: 0; }
|
||
.commonAccordion .panel .panel-title, .commonAccordion-2 .panel .panel-title {
|
||
position: relative; }
|
||
.commonAccordion .panel .panel-title a, .commonAccordion-2 .panel .panel-title a {
|
||
display: block;
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
padding: 10px 10px; }
|
||
.commonAccordion .panel .panel-title a:before, .commonAccordion-2 .panel .panel-title a:before {
|
||
color: #555555;
|
||
content: "\f209";
|
||
position: absolute;
|
||
right: 25px;
|
||
font-family: "Font Awesome 5 Free"; }
|
||
.commonAccordion .panel .panel-title a.collapsed:before, .commonAccordion-2 .panel .panel-title a.collapsed:before {
|
||
content: "\f217"; }
|
||
|
||
.list-circle {
|
||
padding-left: 20px; }
|
||
.list-circle li {
|
||
list-style-type: circle; }
|
||
|
||
.play-icon {
|
||
border: 1px solid #004753;
|
||
display: inline-block;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50px;
|
||
font-size: 30px; }
|
||
.play-icon i {
|
||
line-height: 60px; }
|
||
|
||
.alert-common {
|
||
border-radius: 0;
|
||
border-width: 2px; }
|
||
.alert-common i {
|
||
margin: 0 5px;
|
||
font-size: 16px; }
|
||
|
||
.alert-solid {
|
||
background: transparent;
|
||
color: #185b63; }
|
||
|
||
@media (max-width: 480px) {
|
||
.buttonPart li {
|
||
margin-bottom: 8px; } }
|
||
|
||
@media (max-width: 768px) {
|
||
.buttonPart li {
|
||
margin-bottom: 8px; } }
|
||
|
||
.overly, .page-title {
|
||
position: relative; }
|
||
.overly:before, .page-title:before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(42, 68, 71, 0.5);
|
||
/* Helleres Overlay */
|
||
opacity: 0.3;
|
||
/* Weniger Opazität */ }
|
||
|
||
.owl-dots .owl-dot.active span,
|
||
.owl-theme .owl-dots .owl-dot:hover span {
|
||
background: #185b63 !important; }
|
||
|
||
#success,
|
||
#error {
|
||
display: none; }
|
||
|
||
.sticky-top {
|
||
position: sticky;
|
||
top: 0; }
|
||
@media (max-width: 992px) {
|
||
.sticky-top {
|
||
position: static; } }
|
||
span.cloaked-e-mail:before {
|
||
content: attr(data-domain) "@" attr(data-user);
|
||
unicode-bidi: bidi-override;
|
||
direction: rtl; }
|
||
|
||
@media (min-width: 992px) {
|
||
.row .no-float {
|
||
display: table-cell;
|
||
float: none; } }
|
||
|
||
/* copy from here */
|
||
.scrolldown {
|
||
--sizeX: 30px;
|
||
--sizeY: 50px;
|
||
position: relative;
|
||
width: var(--sizeX);
|
||
height: var(--sizeY);
|
||
margin-left: calc(50% - var(--sizeX) / 2);
|
||
margin-top: 100px;
|
||
border: calc(var(--sizeX) / 10) solid currentColor;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 16px;
|
||
color: white;
|
||
/* Anfangsfarbe */
|
||
transition: color 0.3s; }
|
||
|
||
.scrolldown::before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
width: 6px;
|
||
height: 6px;
|
||
margin-left: -3px;
|
||
background-color: currentColor;
|
||
border-radius: 100%;
|
||
animation: scrolldown-anim 2s infinite;
|
||
box-sizing: border-box;
|
||
box-shadow: 0px -5px 3px 1px #ffffff66; }
|
||
|
||
.scrolldown:hover {
|
||
color: #F5A623;
|
||
/* Neue Farbe beim Hover */ }
|
||
|
||
@keyframes scrolldown-anim {
|
||
0% {
|
||
opacity: 0;
|
||
height: 6px; }
|
||
40% {
|
||
opacity: 1;
|
||
height: 10px; }
|
||
80% {
|
||
transform: translate(0, 20px);
|
||
height: 10px;
|
||
opacity: 0; }
|
||
100% {
|
||
height: 3px;
|
||
opacity: 0; } }
|
||
|
||
.chevrons {
|
||
padding: 6px 0 0 0;
|
||
margin-left: -3px;
|
||
/* Überprüfen, ob dies benötigt wird */
|
||
margin-top: 48px;
|
||
width: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; }
|
||
|
||
.chevrondown {
|
||
margin-top: -6px;
|
||
position: relative;
|
||
border: solid currentColor;
|
||
border-width: 0 3px 3px 0;
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
transform: rotate(45deg); }
|
||
|
||
.chevrondown:hover {
|
||
color: #F5A623; }
|
||
|
||
.chevrondown:nth-child(odd) {
|
||
animation: pulse 500ms ease infinite alternate; }
|
||
|
||
.chevrondown:nth-child(even) {
|
||
animation: pulse 500ms ease infinite alternate 250ms; }
|
||
|
||
.scrolldown {
|
||
color: black;
|
||
transition: color 0.3s; }
|
||
|
||
.scrolldown:hover {
|
||
color: #F5A623; }
|
||
|
||
@keyframes pulse {
|
||
from {
|
||
opacity: 0; }
|
||
to {
|
||
opacity: 0.5; } }
|
||
|
||
/*copy until here */
|
||
.logo-up {
|
||
margin-top: -50px;
|
||
/* Adjust the value as needed */ }
|
||
|
||
.section-title1 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
/* Abstand zwischen Icon und Titel */ }
|
||
|
||
.title-icon1 {
|
||
width: 10px;
|
||
/* Breite des Icons */
|
||
height: 10px;
|
||
/* Höhe automatisch anpassen */ }
|
||
|
||
.why-title1 {
|
||
margin: 0;
|
||
/* Entfernt zusätzliche Ränder */ }
|
||
|
||
#wrapper-work {
|
||
overflow: hidden;
|
||
padding-top: 100px; }
|
||
#wrapper-work ul li {
|
||
width: 50%;
|
||
float: left;
|
||
position: relative; }
|
||
#wrapper-work ul li img {
|
||
width: 100%;
|
||
height: 100%; }
|
||
#wrapper-work ul li .items-text {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #ffffff;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
padding-left: 44px;
|
||
padding-top: 140px; }
|
||
#wrapper-work ul li .items-text h2 {
|
||
padding-bottom: 28px;
|
||
padding-top: 75px;
|
||
position: relative; }
|
||
#wrapper-work ul li .items-text h2:before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 75px;
|
||
height: 3px;
|
||
background: #ffffff; }
|
||
#wrapper-work ul li .items-text p {
|
||
padding-top: 30px;
|
||
font-size: 16px;
|
||
line-height: 27px;
|
||
font-weight: 300;
|
||
padding-right: 80px; }
|
||
|
||
/*--
|
||
features-work Start
|
||
--*/
|
||
#features-work {
|
||
padding-top: 50px;
|
||
padding-bottom: 75px; }
|
||
#features-work .block ul li {
|
||
width: 19%;
|
||
text-align: center;
|
||
display: inline-block;
|
||
padding: 40px 0px; }
|
||
|
||
/*--
|
||
Header Start
|
||
--*/
|
||
header {
|
||
min-height: 100px;
|
||
background: #ffffff;
|
||
padding: 20px 0; }
|
||
@media (max-width: 992px) {
|
||
header {
|
||
min-height: 90px; } }
|
||
header .navbar {
|
||
margin-bottom: 0px;
|
||
border: 0px; }
|
||
header .navbar-brand {
|
||
padding-top: 5px; }
|
||
header .navbar-default {
|
||
background: none;
|
||
border: 0px; }
|
||
header .navbar-default .navbar-nav {
|
||
padding-top: 10px; }
|
||
header .navbar-default .navbar-nav li a {
|
||
color: #333333;
|
||
padding: 10px 26px;
|
||
font-size: 15px; }
|
||
font
|
||
header .navbar-default .navbar-nav li a:hover {
|
||
color: #000000; }
|
||
|
||
.navigation {
|
||
background: #ffffff;
|
||
padding: 20px 0; }
|
||
.navigation .navbar {
|
||
margin-bottom: 0px;
|
||
border: 0px; }
|
||
.navigation .navbar-brand {
|
||
padding-top: 5px; }
|
||
.navigation .navbar {
|
||
background: none;
|
||
border: 0px; }
|
||
.navigation .navbar .navbar-nav {
|
||
padding-top: 5px;
|
||
padding-bottom: 5px; }
|
||
.navigation .navbar .navbar-nav a {
|
||
color: #000000;
|
||
padding: 10px 15px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
text-transform: uppercase; }
|
||
.navigation .navbar .navbar-nav a:hover, .navigation .navbar .navbar-nav a:focus {
|
||
color: #f5a623;
|
||
background: transparent; }
|
||
.navigation .navbar .navbar-nav a.current {
|
||
color: #000000;
|
||
pointer-events: none;
|
||
cursor: default; }
|
||
.navigation .navbar .navbar-nav a.current-parent {
|
||
color: #000000; }
|
||
.navigation .navbar .navbar-nav select {
|
||
margin: 10px 15px; }
|
||
.navigation .navbar .current > .dropdown-toggle {
|
||
color: #000000; }
|
||
.navigation .navbar .dropdown-menu {
|
||
border-radius: 0;
|
||
border: none;
|
||
left: -5px;
|
||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
|
||
width: 250px;
|
||
/* Setzen Sie hier die gewünschte Breite */ }
|
||
.navigation .navbar .dropdown-menu a {
|
||
text-transform: none;
|
||
font-weight: normal;
|
||
color: #7c7c7c;
|
||
padding: 10px 20px;
|
||
-webkit-transition: color 0.1s ease, padding 0.3s ease;
|
||
-moz-transition: color 0.1s ease, padding 0.3s ease;
|
||
-ms-transition: color 0.1s ease, padding 0.3s ease;
|
||
-o-transition: color 0.1s ease, padding 0.3s ease;
|
||
transition: color 0.1s ease, padding 0.3s ease; }
|
||
.navigation .navbar .dropdown-menu a:hover {
|
||
background: #185b63;
|
||
color: #ffffff;
|
||
padding-left: 25px; }
|
||
.navigation .navbar .dropdown-menu a.current {
|
||
padding-left: 25px;
|
||
color: #ffffff;
|
||
background: #185b63; }
|
||
|
||
.nav .open > a {
|
||
background: transparent; }
|
||
|
||
@media (max-width: 992px) {
|
||
.navbar-header {
|
||
float: none; }
|
||
.navbar-left,
|
||
.navbar-right {
|
||
float: none !important; }
|
||
.navbar-toggle {
|
||
display: block; }
|
||
.navbar-collapse {
|
||
border-top: 1px solid transparent;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
|
||
.navbar-fixed-top {
|
||
top: 0;
|
||
border-width: 0 0 1px; }
|
||
.navbar-collapse.collapse {
|
||
display: none !important; }
|
||
.navbar-nav {
|
||
float: none !important;
|
||
margin-top: 7.5px; }
|
||
.navbar-nav > li {
|
||
float: none; }
|
||
.navbar-nav > li > a {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px; }
|
||
.collapse {
|
||
clear: both; }
|
||
.collapse.in {
|
||
display: block !important; } }
|
||
|
||
#select-language {
|
||
border: none;
|
||
/* Kein Rahmen */
|
||
outline: none;
|
||
/* Kein Umriss */
|
||
box-shadow: none;
|
||
/* Kein Schatten */
|
||
background: transparent;
|
||
/* Hintergrund transparent, falls gewünscht */
|
||
-webkit-appearance: none;
|
||
/* Entfernt das Standard-Dropdown-Aussehen */
|
||
-moz-appearance: none;
|
||
/* Entfernt das Standard-Dropdown-Aussehen */
|
||
appearance: textfield;
|
||
/* Entfernt das Standard-Dropdown-Aussehen */
|
||
padding: 0px 2px;
|
||
/* Passen Sie das Padding an */
|
||
height: 100%;
|
||
/* Höhe anpassen */ }
|
||
|
||
.slider {
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-attachment: fixed;
|
||
background-position: center center;
|
||
padding: 170px 0 200px;
|
||
position: relative;
|
||
min-height: 1000px;
|
||
/* Adjust based on your design needs */ }
|
||
@media (max-width: 1200px) {
|
||
.slider {
|
||
background-attachment: unset;
|
||
padding: 150px 0; } }
|
||
.slider .block {
|
||
color: #e0e0e0;
|
||
text-align: center; }
|
||
.slider .block h1 {
|
||
font-weight: 100;
|
||
font-size: 45px;
|
||
line-height: 1.33em;
|
||
letter-spacing: 0.2em;
|
||
padding-bottom: 15px;
|
||
text-transform: uppercase; }
|
||
@media (max-width: 768px) {
|
||
.slider .block h1 {
|
||
font-size: 35px; } }
|
||
@media (max-width: 480px) {
|
||
.slider .block h1 {
|
||
font-size: 28px; } }
|
||
@media (max-width: 400px) {
|
||
.slider .block h1 {
|
||
font-size: 26px; } }
|
||
.slider .block p {
|
||
margin-bottom: 30px;
|
||
color: #030303;
|
||
font-size: 25px;
|
||
line-height: 1.5em;
|
||
font-weight: 300; }
|
||
@media (max-width: 480px) {
|
||
.slider .block p {
|
||
font-size: 14px; } }
|
||
@media (max-width: 480px) {
|
||
.slider .block .btn {
|
||
font-size: 12px; } }
|
||
.call-to-action {
|
||
position: relative;
|
||
text-align: center;
|
||
padding: 70px 10px;
|
||
background-size: cover;
|
||
background-position: center; }
|
||
@media (max-width: 768px) {
|
||
.call-to-action {
|
||
padding-top: 20px;
|
||
padding-bottom: 20px; } }
|
||
.call-to-action::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
/* Adjust the color and opacity as needed */
|
||
z-index: 1; }
|
||
.call-to-action .container, .call-to-action .row, .call-to-action .col-md-12, .call-to-action .block {
|
||
position: relative;
|
||
z-index: 2; }
|
||
.call-to-action h2 {
|
||
color: #ffffff;
|
||
margin: 0px;
|
||
padding: 20px 0px;
|
||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||
/* Black contour */ }
|
||
.call-to-action p {
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||
/* Black contour */ }
|
||
.call-to-action .btn-main, .call-to-action .btn-transparent, .call-to-action .btn-small {
|
||
padding: 15px 35px;
|
||
font-size: 20px;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||
/* Black contour */ }
|
||
|
||
.overlay-dark {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
z-index: 1; }
|
||
|
||
.call-to-action .container {
|
||
position: relative;
|
||
z-index: 2; }
|
||
|
||
.service {
|
||
text-align: center;
|
||
padding: 30px 0; }
|
||
@media (max-width: 768px) {
|
||
.service {
|
||
padding-top: 20px;
|
||
padding-bottom: 20px; } }
|
||
.service .service-item {
|
||
padding-bottom: 10px; }
|
||
.service .service-item i {
|
||
font-size: 50px;
|
||
color: #185b63; }
|
||
.service .service-item img.service-icon {
|
||
width: 100px;
|
||
height: 100px;
|
||
display: inline-block; }
|
||
.service .service-item h4 {
|
||
padding-top: 15px;
|
||
margin: 0;
|
||
margin-top: 10px;
|
||
font-weight: 500;
|
||
text-transform: uppercase; }
|
||
.service .service-item p {
|
||
padding-top: 10px;
|
||
margin: 0; }
|
||
|
||
.dark-service .title {
|
||
color: #ffffff; }
|
||
|
||
.dark-service .service-item {
|
||
padding-bottom: 30px;
|
||
text-align: center; }
|
||
.dark-service .service-item i {
|
||
color: #ffffff;
|
||
font-size: 40px;
|
||
margin-bottom: 10px; }
|
||
.dark-service .service-item img.service-icon {
|
||
width: 100px;
|
||
height: 100px;
|
||
display: inline-block; }
|
||
.dark-service .service-item h4 {
|
||
color: #ffffff;
|
||
padding-top: 15px;
|
||
margin: 0;
|
||
margin-top: 10px;
|
||
font-weight: 500;
|
||
text-transform: uppercase; }
|
||
.dark-service .service-item p {
|
||
padding-top: 10px;
|
||
margin: 0; }
|
||
|
||
.service-about p {
|
||
line-height: 28px; }
|
||
|
||
.service-arrow .block {
|
||
padding: 70px 30px; }
|
||
.service-arrow .block i {
|
||
font-size: 45px; }
|
||
.service-arrow .block p {
|
||
color: #000000; }
|
||
|
||
.service-list .block {
|
||
padding: 30px;
|
||
margin-bottom: 20px;
|
||
background: #ffffff; }
|
||
|
||
h2, h3 {
|
||
margin-bottom: 10px;
|
||
/* Passe den Wert nach Bedarf an */ }
|
||
|
||
.center-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center; }
|
||
|
||
.responsive-container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
display: block;
|
||
overflow: hidden; }
|
||
|
||
.responsive-image {
|
||
max-width: 100%;
|
||
height: auto; }
|
||
|
||
.page-title {
|
||
position: relative;
|
||
padding: 100px 0; }
|
||
.page-title .block {
|
||
text-align: center; }
|
||
.page-title .block h1 {
|
||
color: #5f5c5c;
|
||
/* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
|
||
font-weight: 200;
|
||
letter-spacing: 0.5em;
|
||
margin-top: 20px;
|
||
margin-bottom: -60px;
|
||
text-transform: capitalize; }
|
||
.page-title .block p {
|
||
color: #000;
|
||
/* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */ }
|
||
|
||
.page-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
/* Weiß als Hintergrundfarbe */
|
||
z-index: -1;
|
||
/* Sicherstellen, dass es hinter dem Inhalt liegt */ }
|
||
|
||
.service-arrow .block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: nowrap;
|
||
/* Keine Umbrüche, damit die Inhalte nebeneinander bleiben */ }
|
||
|
||
.service-arrow .service-image {
|
||
flex: 0 0 auto;
|
||
margin-left: 20px; }
|
||
|
||
.service-arrow .service-image img {
|
||
max-width: 600px;
|
||
/* Maximale Breite des Bildes */
|
||
width: 100%;
|
||
/* Bild soll sich an den Container anpassen */
|
||
height: auto;
|
||
display: block; }
|
||
|
||
.service-arrow .service-content {
|
||
flex: 1; }
|
||
|
||
@media (max-width: 768px) {
|
||
.service-arrow .block {
|
||
flex-direction: column;
|
||
text-align: center; }
|
||
.service-arrow .service-image {
|
||
margin-left: 0;
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
/* Bild auf volle Breite setzen bei kleinen Bildschirmen */ } }
|
||
|
||
.service-title {
|
||
color: #273544;
|
||
/* Setze die gewünschte Farbe für die Titel der Dienste */ }
|
||
|
||
.service-description {
|
||
color: #990505;
|
||
/* Setze die gewünschte Farbe für die Beschreibungen der Dienste */ }
|
||
|
||
.feature {
|
||
background: url("../img/feature-bg.jpg");
|
||
background-position: 50% 94px;
|
||
display: block;
|
||
position: relative;
|
||
background-attachment: fixed;
|
||
background-repeat: no-repeat;
|
||
background-position: center center;
|
||
background-size: cover;
|
||
padding: 100px 0; }
|
||
@media (max-width: 1200px) {
|
||
.feature {
|
||
padding-top: 20px;
|
||
padding-bottom: 20px;
|
||
background-attachment: unset; } }
|
||
.feature h2 {
|
||
margin: 0px;
|
||
padding-top: 30px;
|
||
padding-bottom: 30px; }
|
||
.feature p {
|
||
color: #8c8c8c;
|
||
margin-bottom: 20px; }
|
||
.feature .btn-view-works {
|
||
background: #6c6c6c;
|
||
color: #ffffff;
|
||
padding: 10px 20px;
|
||
margin-bottom: 30px; }
|
||
|
||
.portfolio-work {
|
||
padding: 80px 0; }
|
||
.portfolio-work .block .portfolio-menu {
|
||
text-align: center; }
|
||
.portfolio-work .block .portfolio-menu .btn-group {
|
||
margin-bottom: 40px; }
|
||
.portfolio-work .block .portfolio-menu .btn-group label {
|
||
display: inline-block;
|
||
border: 1px solid #004753;
|
||
padding: 8px 25px;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
color: #333333;
|
||
outline: 0;
|
||
background: #ffffff;
|
||
margin: 2px;
|
||
border-radius: 0;
|
||
-webkit-transition: all 0.3s ease;
|
||
-moz-transition: all 0.3s ease;
|
||
-ms-transition: all 0.3s ease;
|
||
-o-transition: all 0.3s ease;
|
||
transition: all 0.3s ease; }
|
||
|
||
.portfolio-item {
|
||
position: relative;
|
||
padding: 0; }
|
||
.portfolio-item img {
|
||
width: 100%;
|
||
height: auto; }
|
||
.portfolio-item:hover .portfolio-hover {
|
||
visibility: visible;
|
||
opacity: 1; }
|
||
.portfolio-item:hover .portfolio-content {
|
||
transform: translateY(-50%); }
|
||
|
||
.portfolio-hover {
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(60, 55, 55, 0.5);
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: .3s ease; }
|
||
|
||
.portfolio-content {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-40%);
|
||
text-align: center;
|
||
padding: 20px;
|
||
transition: inherit; }
|
||
.portfolio-content * {
|
||
color: #ffffff; }
|
||
.portfolio-content a {
|
||
display: block;
|
||
transition: .2s ease; }
|
||
.portfolio-content a i {
|
||
font-size: 30px; }
|
||
.portfolio-content a.h3 {
|
||
margin-top: 0; }
|
||
|
||
.portfolio-single-page .project-details h4 {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px dashed #004753; }
|
||
|
||
.portfolio-single-page .project-details span {
|
||
color: #838383;
|
||
width: 180px;
|
||
display: inline-block; }
|
||
|
||
.portfolio-single-page .project-details strong {
|
||
color: #313131;
|
||
font-weight: normal; }
|
||
|
||
.portfolio-single-page .project-details ul li {
|
||
margin-bottom: 10px; }
|
||
|
||
.testimonial {
|
||
padding: 100px 0; }
|
||
@media (max-width: 768px) {
|
||
.testimonial {
|
||
padding-top: 20px;
|
||
padding-bottom: 20px; } }
|
||
.testimonial .counter-box li {
|
||
width: 50%;
|
||
float: left;
|
||
text-align: center;
|
||
margin: 30px 0 30px; }
|
||
@media (max-width: 768px) {
|
||
.testimonial .counter-box li {
|
||
margin-top: 0px; } }
|
||
.testimonial .testimonial-carousel {
|
||
border: 1px solid #004753;
|
||
padding: 24px; }
|
||
.testimonial .testimonial-carousel i {
|
||
font-size: 35px;
|
||
margin-bottom: 20px; }
|
||
.testimonial .testimonial-carousel p {
|
||
font-family: "Open Sans Semibold", sans-serif;
|
||
line-height: 28px;
|
||
padding-bottom: 20px; }
|
||
.testimonial .testimonial-carousel .user img {
|
||
padding-bottom: 0px;
|
||
border-radius: 500px;
|
||
width: 80px;
|
||
display: inline-block; }
|
||
.testimonial .testimonial-carousel .user p {
|
||
font-family: "Open Sans", sans-serif;
|
||
padding-bottom: 0;
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
line-height: 20px; }
|
||
.testimonial .testimonial-carousel .user p span {
|
||
display: block;
|
||
color: #393939;
|
||
font-weight: 600; }
|
||
.testimonial .testimonial-carousel .owl-carousel .owl-pagination div {
|
||
border: 1px solid #1D1D1D;
|
||
border-radius: 500px;
|
||
display: inline-block;
|
||
height: 10px;
|
||
margin-right: 15px;
|
||
width: 10px; }
|
||
.testimonial .testimonial-carousel .owl-carousel .owl-pagination div.active {
|
||
background: #5c5c5c;
|
||
font-size: 30px;
|
||
display: inline-block;
|
||
border: 0px; }
|
||
|
||
.counter-box i {
|
||
font-size: 35px;
|
||
margin-bottom: 15px; }
|
||
|
||
.counter-box h4 {
|
||
font-size: 30px;
|
||
font-weight: bold; }
|
||
|
||
.counter-box span {
|
||
color: #555555; }
|
||
|
||
.contact-form {
|
||
padding-top: 70px;
|
||
padding-bottom: 35px; }
|
||
.contact-form .block .form-group {
|
||
padding-bottom: 15px;
|
||
margin: 0px; }
|
||
.contact-form .block .form-group .form-control {
|
||
background: #f4f4f4;
|
||
height: 60px;
|
||
border: 1px solid #EEF2F6;
|
||
box-shadow: none;
|
||
width: 100%; }
|
||
.contact-form .block .form-group-2 {
|
||
margin-bottom: 13px; }
|
||
.contact-form .block .form-group-2 textarea {
|
||
background: #f4f4f4;
|
||
height: 135px;
|
||
border: 1px solid #EEF2F6;
|
||
box-shadow: none;
|
||
width: 100%; }
|
||
.contact-form .block .form-group-h {
|
||
display: none; }
|
||
.contact-form .block button {
|
||
width: 100%;
|
||
height: 60px;
|
||
background: #474747;
|
||
border: none;
|
||
color: #ffffff;
|
||
font-size: 18px; }
|
||
|
||
.address-block {
|
||
margin-bottom: 20px; }
|
||
.address-block li {
|
||
position: relative;
|
||
padding-left: 0px;
|
||
margin-bottom: 10px; }
|
||
.address-block li i {
|
||
position: absolute;
|
||
left: 0;
|
||
font-size: 25px;
|
||
line-height: 20px; }
|
||
.address-block li div {
|
||
display: inline-block;
|
||
vertical-align: top; }
|
||
|
||
.social-icons {
|
||
margin-top: 40px; }
|
||
.social-icons li {
|
||
display: inline-block;
|
||
margin: 0 10px; }
|
||
.social-icons a {
|
||
display: inline-block; }
|
||
.social-icons i {
|
||
color: #2C2C2C;
|
||
margin-right: 25px;
|
||
font-size: 25px; }
|
||
|
||
.contact-box {
|
||
padding-top: 35px;
|
||
padding-bottom: 58px; }
|
||
.contact-box .block img {
|
||
width: 100%; }
|
||
.contact-box .block h2 {
|
||
font-weight: 300;
|
||
color: #000;
|
||
font-size: 28px;
|
||
padding-bottom: 30px; }
|
||
.contact-box .block p {
|
||
color: #5c5c5c;
|
||
display: block; }
|
||
|
||
/*=================================================================
|
||
Pricing section
|
||
==================================================================*/
|
||
.pricing-table .pricing-item {
|
||
padding: 40px 20px;
|
||
background: #ffffff;
|
||
box-shadow: 0 8px 15px 0 rgba(5, 57, 106, 0.06); }
|
||
.pricing-table .pricing-item a.btn-main, .pricing-table .pricing-item a.btn-transparent, .pricing-table .pricing-item a.btn-small {
|
||
text-transform: uppercase;
|
||
margin-top: 20px; }
|
||
.pricing-table .pricing-item li {
|
||
font-weight: 400;
|
||
padding: 6px 0;
|
||
color: #626262; }
|
||
.pricing-table .pricing-item li i {
|
||
margin-right: 6px;
|
||
color: #185b63; }
|
||
|
||
.pricing-table .price-title {
|
||
padding: 30px 0 20px; }
|
||
.pricing-table .price-title > h3 {
|
||
font-weight: 700;
|
||
margin: 0 0 5px;
|
||
font-size: 15px;
|
||
text-transform: uppercase; }
|
||
.pricing-table .price-title > p {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
margin-top: 5px; }
|
||
.pricing-table .price-title .value {
|
||
color: #185b63;
|
||
font-size: 50px;
|
||
padding: 10px 0; }
|
||
|
||
.product-item {
|
||
margin-bottom: 30px; }
|
||
.product-item .product-thumb {
|
||
position: relative; }
|
||
.product-item .product-thumb img {
|
||
width: 100%;
|
||
height: auto; }
|
||
.product-item .product-thumb .bage {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
background: #000000;
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
padding: 4px 12px;
|
||
font-weight: 300;
|
||
display: inline-block; }
|
||
.product-item .product-thumb:before {
|
||
transition: .3s all;
|
||
opacity: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0; }
|
||
.product-item .product-thumb .preview-meta {
|
||
position: absolute;
|
||
text-align: center;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
transition: 0.2s;
|
||
transform: translateY(10px); }
|
||
.product-item .product-thumb .preview-meta li {
|
||
display: inline-block; }
|
||
.product-item .product-thumb .preview-meta li a,
|
||
.product-item .product-thumb .preview-meta li span {
|
||
background: #ffffff;
|
||
padding: 10px 16px;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
font-size: 18px; }
|
||
.product-item .product-thumb .preview-meta li a:hover,
|
||
.product-item .product-thumb .preview-meta li span:hover {
|
||
background: #185b63;
|
||
color: #ffffff; }
|
||
.product-item:hover .product-thumb:before {
|
||
opacity: 1; }
|
||
.product-item:hover .preview-meta {
|
||
opacity: 1;
|
||
transform: translateY(-20px); }
|
||
.product-item .product-content {
|
||
text-align: center; }
|
||
.product-item .product-content h4 {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
margin-top: 15px;
|
||
margin-bottom: 6px; }
|
||
.product-item .product-content h4 a {
|
||
color: #000000; }
|
||
|
||
.product-modal {
|
||
background: rgba(255, 255, 255, 0.9);
|
||
text-align: center;
|
||
padding: 0 !important; }
|
||
.product-modal:before {
|
||
content: '';
|
||
display: inline-block;
|
||
height: 100%;
|
||
vertical-align: middle;
|
||
margin-right: -4px; }
|
||
.product-modal.fade .modal-dialog {
|
||
transform: translate(0, 0); }
|
||
.product-modal .close {
|
||
width: 50px;
|
||
float: none;
|
||
position: absolute;
|
||
right: 20px;
|
||
z-index: 9;
|
||
top: 20px;
|
||
font-size: 30px;
|
||
outline: none; }
|
||
.product-modal .modal-dialog {
|
||
width: 900px;
|
||
display: inline-block;
|
||
text-align: left;
|
||
vertical-align: middle; }
|
||
@media (max-width: 480px) {
|
||
.product-modal .modal-dialog {
|
||
width: 100%; } }
|
||
@media (max-width: 768px) {
|
||
.product-modal .modal-dialog {
|
||
width: 100%; } }
|
||
.product-modal .modal-content {
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
border: none; }
|
||
.product-modal .modal-content .modal-body {
|
||
padding: 30px; }
|
||
.product-modal .modal-content .modal-body .modal-image img {
|
||
width: 100%;
|
||
height: auto; }
|
||
.product-modal .modal-content .modal-body .product-short-details h2 {
|
||
margin-top: 0;
|
||
font-size: 22px;
|
||
font-weight: 400; }
|
||
.product-modal .modal-content .modal-body .product-short-details h2 a {
|
||
color: #000000; }
|
||
@media (max-width: 480px) {
|
||
.product-modal .modal-content .modal-body .product-short-details h2 {
|
||
margin-top: 15px; } }
|
||
@media (max-width: 768px) {
|
||
.product-modal .modal-content .modal-body .product-short-details h2 {
|
||
margin-top: 15px; } }
|
||
.product-modal .modal-content .modal-body .product-short-details .product-price {
|
||
font-size: 30px;
|
||
margin: 20px 0; }
|
||
@media (max-width: 480px) {
|
||
.product-modal .modal-content .modal-body .product-short-details .product-price {
|
||
margin: 10px 0; } }
|
||
.product-modal .modal-content .modal-body .product-short-details .btn-main, .product-modal .modal-content .modal-body .product-short-details .btn-transparent, .product-modal .modal-content .modal-body .product-short-details .btn-small {
|
||
margin-top: 20px; }
|
||
.product-modal .modal-content .modal-body .product-short-details .btn-transparent {
|
||
color: #444444;
|
||
border-bottom: 1px solid #004753; }
|
||
|
||
.product-shorting {
|
||
margin-bottom: 30px; }
|
||
.product-shorting span {
|
||
margin-right: 15px; }
|
||
|
||
.product-category ul {
|
||
padding-left: 15px; }
|
||
.product-category ul li {
|
||
margin-bottom: 4px; }
|
||
.product-category ul li a {
|
||
color: #626262; }
|
||
.product-category ul li a:hover {
|
||
color: #000000; }
|
||
|
||
.single-product {
|
||
padding: 60px 0 40px; }
|
||
.single-product .breadcrumb {
|
||
background: transparent; }
|
||
.single-product .breadcrumb li {
|
||
color: #000000;
|
||
font-weight: 200; }
|
||
.single-product .breadcrumb li a {
|
||
color: #000000;
|
||
font-weight: 200; }
|
||
.single-product .product-pagination li {
|
||
display: inline-block;
|
||
margin: 0 8px; }
|
||
.single-product .product-pagination li + li:before {
|
||
padding: 0 8px 0 0;
|
||
color: #ccc;
|
||
content: "/\00a0"; }
|
||
.single-product .product-pagination li a {
|
||
color: #000000;
|
||
font-weight: 200; }
|
||
.single-product .product-pagination li a i {
|
||
vertical-align: middle; }
|
||
|
||
.single-product-slider .carousel .carousel-inner .carousel-caption {
|
||
text-shadow: none;
|
||
text-align: left;
|
||
top: 20%;
|
||
bottom: auto; }
|
||
.single-product-slider .carousel .carousel-inner .carousel-caption h1 {
|
||
font-size: 50px;
|
||
font-weight: 100;
|
||
color: #000000; }
|
||
.single-product-slider .carousel .carousel-inner .carousel-caption p {
|
||
width: 50%;
|
||
font-weight: 200; }
|
||
.single-product-slider .carousel .carousel-inner .carousel-caption .btn-main, .single-product-slider .carousel .carousel-inner .carousel-caption .btn-transparent, .single-product-slider .carousel .carousel-inner .carousel-caption .btn-small {
|
||
margin-top: 20px; }
|
||
|
||
.single-product-slider .carousel .carousel-control {
|
||
bottom: auto;
|
||
background: #ffffff;
|
||
width: 6%;
|
||
padding: 10px 0; }
|
||
.single-product-slider .carousel .carousel-control i {
|
||
font-size: 40px;
|
||
text-shadow: none;
|
||
color: #555555; }
|
||
|
||
.single-product-slider .carousel .carousel-indicators li img {
|
||
height: auto;
|
||
width: 60px; }
|
||
|
||
.single-product-slider .carousel .carousel-control.right,
|
||
.single-product-slider .carousel .carousel-control.left {
|
||
background-image: none;
|
||
top: 40%; }
|
||
|
||
.single-product-slider .carousel-indicators {
|
||
margin: 10px 0 0;
|
||
overflow: auto;
|
||
position: static;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
overflow: hidden; }
|
||
.single-product-slider .carousel-indicators li {
|
||
background-color: transparent;
|
||
-webkit-border-radius: 0;
|
||
border-radius: 0;
|
||
display: inline-block;
|
||
height: auto;
|
||
margin: 0 !important;
|
||
width: auto; }
|
||
.single-product-slider .carousel-indicators li.active img {
|
||
opacity: 1; }
|
||
.single-product-slider .carousel-indicators li:hover img {
|
||
opacity: 0.75; }
|
||
.single-product-slider .carousel-indicators li img {
|
||
display: block;
|
||
opacity: 0.5; }
|
||
|
||
.single-product-details .color-swatches {
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
align-items: center; }
|
||
.single-product-details .color-swatches span {
|
||
width: 100px;
|
||
color: #000000;
|
||
font-size: 13px;
|
||
font-weight: 600; }
|
||
.single-product-details .color-swatches a {
|
||
display: inline-block;
|
||
width: 36px;
|
||
height: 36px;
|
||
margin-right: 5px; }
|
||
.single-product-details .color-swatches li {
|
||
display: inline-block; }
|
||
.single-product-details .color-swatches .swatch-violet {
|
||
background-color: #8da1cd; }
|
||
.single-product-details .color-swatches .swatch-black {
|
||
background-color: #000000; }
|
||
.single-product-details .color-swatches .swatch-cream {
|
||
background-color: #e6e2d6; }
|
||
|
||
.single-product-details .product-size {
|
||
margin-top: 20px;
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
align-items: center; }
|
||
.single-product-details .product-size span {
|
||
width: 100px;
|
||
color: #000000;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
display: inline-block; }
|
||
.single-product-details .product-size .form-control {
|
||
display: inline-block;
|
||
width: 130px;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
color: #000000;
|
||
font-size: 12px;
|
||
border: 1px solid #e1e1e1;
|
||
border-radius: 0px;
|
||
box-shadow: none; }
|
||
|
||
.single-product-details .product-category {
|
||
margin-top: 20px; }
|
||
.single-product-details .product-category > span {
|
||
width: 100px;
|
||
color: #000000;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
display: inline-block; }
|
||
.single-product-details .product-category ul {
|
||
width: 140px;
|
||
display: inline-block; }
|
||
.single-product-details .product-category ul li {
|
||
display: inline-block;
|
||
margin: 5px; }
|
||
|
||
.single-product-details .product-quantity {
|
||
margin-top: 20px;
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
align-items: center; }
|
||
.single-product-details .product-quantity > span {
|
||
width: 100px;
|
||
color: #000000;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
display: inline-block; }
|
||
.single-product-details .product-quantity .product-quantity-slider {
|
||
width: 140px;
|
||
display: inline-block; }
|
||
.single-product-details .product-quantity .product-quantity-slider input {
|
||
height: 34px; }
|
||
.single-product-details .product-quantity .product-quantity-slider .input-group-btn:first-child > .btn,
|
||
.single-product-details .product-quantity .product-quantity-slider .p-quantity .input-group-btn:first-child > .btn-group {
|
||
margin-right: -2px; }
|
||
.single-product-details .product-quantity .product-quantity-slider button {
|
||
border-radius: 0; }
|
||
|
||
.bootstrap-touchspin .input-group-btn-vertical {
|
||
position: relative;
|
||
white-space: nowrap;
|
||
width: 1%;
|
||
vertical-align: middle;
|
||
display: table-cell; }
|
||
|
||
.bootstrap-touchspin .input-group-btn-vertical > .btn {
|
||
display: block;
|
||
float: none;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
padding: 8px 10px;
|
||
margin-left: -1px;
|
||
position: relative; }
|
||
|
||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
|
||
border-radius: 0;
|
||
border-top-right-radius: 4px; }
|
||
|
||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
|
||
margin-top: -2px;
|
||
border-radius: 0;
|
||
border-bottom-right-radius: 4px; }
|
||
|
||
.bootstrap-touchspin .input-group-btn-vertical i {
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 5px;
|
||
font-size: 9px;
|
||
font-weight: normal; }
|
||
|
||
.clients-logo-section {
|
||
padding-top: 30px;
|
||
padding-bottom: 75px; }
|
||
.clients-logo-section .clients-logo-img {
|
||
padding: 0px 50px; }
|
||
|
||
.clients-logo img {
|
||
width: auto !important;
|
||
padding: 20px; }
|
||
|
||
.about .block h2 {
|
||
padding-top: 30px;
|
||
padding-bottom: 30px;
|
||
margin: 0; }
|
||
|
||
.about .block h3 {
|
||
padding-top: 30px;
|
||
padding-bottom: 50px;
|
||
margin: 0; }
|
||
|
||
.about .block p {
|
||
padding-top: 20px;
|
||
line-height: 28px; }
|
||
|
||
.about .block img {
|
||
width: 100%; }
|
||
|
||
.about .about-img {
|
||
position: relative;
|
||
overflow: hidden; }
|
||
.about .about-img img {
|
||
display: block;
|
||
width: 100%;
|
||
transition: opacity 0.5s ease-out; }
|
||
.about .about-img .hover-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease-out; }
|
||
.about .about-img:hover .hover-img {
|
||
opacity: 1; }
|
||
.about .about-img:hover img {
|
||
opacity: 0; }
|
||
|
||
.about .section-title {
|
||
margin-bottom: 0px; }
|
||
|
||
.instagram-feed a {
|
||
margin: 6px;
|
||
margin-right: 10px;
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
width: 23.5%; }
|
||
@media (max-width: 768px) {
|
||
.instagram-feed a {
|
||
width: 49%;
|
||
margin: 3px; } }
|
||
@media (max-width: 480px) {
|
||
.instagram-feed a {
|
||
width: 100%;
|
||
margin: 3px; } }
|
||
.instagram-feed a:hover img {
|
||
filter: grayscale(10); }
|
||
.instagram-feed a img {
|
||
width: 100%; }
|
||
|
||
.dashboard-menu .active {
|
||
background: #185b63;
|
||
color: #ffffff;
|
||
border: 1px solid #185b63; }
|
||
|
||
.dashboard-menu li {
|
||
padding: 0;
|
||
margin: 0 3px; }
|
||
.dashboard-menu li a {
|
||
padding: 10px 20px;
|
||
border: 1px solid #004753; }
|
||
@media (max-width: 768px) {
|
||
.dashboard-menu li a {
|
||
padding: 10px 15px; } }
|
||
@media (max-width: 480px) {
|
||
.dashboard-menu li a {
|
||
padding: 10px 5px; } }
|
||
@media (max-width: 400px) {
|
||
.dashboard-menu li a {
|
||
padding: 10px 5px;
|
||
font-size: 12px; } }
|
||
.dashboard-wrapper {
|
||
border: 1px solid #004753;
|
||
margin-top: 30px;
|
||
padding: 20px; }
|
||
.dashboard-wrapper h2 {
|
||
font-size: 18px; }
|
||
.dashboard-wrapper h4 {
|
||
font-size: 16px; }
|
||
.dashboard-wrapper .user-img {
|
||
width: 120px;
|
||
border-radius: 100px; }
|
||
|
||
.dashboard-user-profile .user-img {
|
||
width: 180px; }
|
||
|
||
.dashboard-user-profile .user-profile-list {
|
||
margin-top: 30px;
|
||
padding-left: 30px; }
|
||
.dashboard-user-profile .user-profile-list li {
|
||
margin-bottom: 8px; }
|
||
.dashboard-user-profile .user-profile-list span {
|
||
font-weight: bold;
|
||
margin-right: 5px;
|
||
width: 100px;
|
||
display: inline-block; }
|
||
|
||
/*=================================================================
|
||
Single Blog Page
|
||
==================================================================*/
|
||
.post.post-single {
|
||
border: none;
|
||
margin-bottom: 0px; }
|
||
.post.post-single .post-title {
|
||
margin-top: 0px; }
|
||
@media (max-width: 768px) {
|
||
.post.post-single .post-title {
|
||
margin-top: 20px; } }
|
||
.post.post-single .post-thumb {
|
||
margin-top: 30px; }
|
||
|
||
.post-sub-heading {
|
||
border-bottom: 1px solid #004753;
|
||
padding-bottom: 20px;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
font-size: 16px;
|
||
margin-bottom: 20px; }
|
||
|
||
.post-social-share {
|
||
margin-bottom: 50px; }
|
||
|
||
.post-comments {
|
||
margin: 30px 0; }
|
||
.post-comments .media {
|
||
margin-top: 20px; }
|
||
.post-comments .media > .pull-left {
|
||
padding-right: 20px; }
|
||
.post-comments .comment-author {
|
||
margin-top: 0;
|
||
margin-bottom: 0px;
|
||
font-weight: 500; }
|
||
.post-comments .comment-author a {
|
||
color: #185b63;
|
||
font-size: 14px;
|
||
text-transform: uppercase; }
|
||
.post-comments time {
|
||
margin: 0 0 5px;
|
||
display: inline-block;
|
||
color: #7c7c7c;
|
||
font-size: 12px; }
|
||
.post-comments .comment-button {
|
||
color: #185b63;
|
||
display: inline-block;
|
||
margin-left: 5px;
|
||
font-size: 12px; }
|
||
.post-comments .comment-button i {
|
||
margin-right: 5px;
|
||
display: inline-block; }
|
||
.post-comments .comment-button:hover {
|
||
color: #185b63; }
|
||
|
||
.post-excerpt h3 a {
|
||
color: #000000; }
|
||
|
||
.post-excerpt p {
|
||
margin: 0 0 30px; }
|
||
|
||
.post-excerpt blockquote.quote-post {
|
||
margin: 20px 0; }
|
||
.post-excerpt blockquote.quote-post p {
|
||
line-height: 30px;
|
||
font-size: 20px;
|
||
color: #185b63; }
|
||
|
||
.single-blog {
|
||
background-color: #fff;
|
||
margin-bottom: 50px;
|
||
padding: 20px; }
|
||
|
||
.blog-subtitle {
|
||
font-size: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #004753;
|
||
margin-bottom: 25px;
|
||
text-transform: uppercase; }
|
||
|
||
.next-prev {
|
||
border-bottom: 1px solid #004753;
|
||
border-top: 1px solid #004753;
|
||
margin: 20px 0;
|
||
padding: 25px 0; }
|
||
.next-prev a {
|
||
color: #000000; }
|
||
.next-prev a:hover {
|
||
color: #185b63; }
|
||
.next-prev .prev-post i {
|
||
margin-right: 10px; }
|
||
.next-prev .next-post i {
|
||
margin-left: 10px; }
|
||
|
||
.social-profile ul li {
|
||
margin: 0 10px 0 0;
|
||
display: inline-block; }
|
||
.social-profile ul li a {
|
||
color: #565656;
|
||
display: block;
|
||
font-size: 16px; }
|
||
.social-profile ul li a i:hover {
|
||
color: #185b63; }
|
||
|
||
.comments-section {
|
||
margin-top: 35px; }
|
||
|
||
.author-about {
|
||
margin-top: 40px; }
|
||
|
||
.post-author {
|
||
margin-right: 20px; }
|
||
|
||
.post-author > img {
|
||
border: 1px solid #004753;
|
||
max-width: 120px;
|
||
padding: 5px;
|
||
width: 100%; }
|
||
|
||
.comment-list ul {
|
||
margin-top: 20px; }
|
||
.comment-list ul li {
|
||
margin-bottom: 20px; }
|
||
|
||
.comment-wrap {
|
||
border: 1px solid #004753;
|
||
border-radius: 1px;
|
||
margin-left: 20px;
|
||
padding: 10px;
|
||
position: relative; }
|
||
.comment-wrap .author-avatar {
|
||
margin-right: 10px; }
|
||
.comment-wrap .media .media-heading {
|
||
font-size: 14px;
|
||
margin-bottom: 8px; }
|
||
.comment-wrap .media .media-heading a {
|
||
color: #185b63;
|
||
font-size: 13px; }
|
||
.comment-wrap .media .comment-meta {
|
||
font-size: 12px;
|
||
color: #888; }
|
||
.comment-wrap .media p {
|
||
margin-top: 15px; }
|
||
|
||
.comment-reply-form {
|
||
margin-top: 80px; }
|
||
.comment-reply-form input,
|
||
.comment-reply-form textarea {
|
||
height: 35px;
|
||
border-radius: 0;
|
||
box-shadow: none; }
|
||
.comment-reply-form input:focus,
|
||
.comment-reply-form textarea:focus {
|
||
box-shadow: none;
|
||
border: 1px solid #185b63; }
|
||
.comment-reply-form textarea,
|
||
.comment-reply-form .btn-main,
|
||
.comment-reply-form .btn-transparent,
|
||
.comment-reply-form .btn-small {
|
||
height: auto; }
|
||
|
||
.bg-1 {
|
||
position: relative;
|
||
background-size: contain;
|
||
/* Verkleinert das Bild, sodass es komplett sichtbar ist */
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed; }
|
||
@media (max-width: 1200px) {
|
||
.bg-1 {
|
||
background-attachment: unset; } }
|
||
.bg-1::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: inherit;
|
||
opacity: 0.2;
|
||
/* Setzt die Opazität, um das Bild blasser darzustellen */
|
||
z-index: -1;
|
||
/* Stellt sicher, dass der Inhalt vor dem Hintergrundbild liegt */ }
|
||
|
||
.bg-2 {
|
||
background-size: cover;
|
||
background-position: center center;
|
||
background-attachment: fixed;
|
||
background-color: #185b63; }
|
||
@media (max-width: 1200px) {
|
||
.bg-2 {
|
||
background-attachment: unset; } }
|
||
.widget {
|
||
margin-bottom: 65px; }
|
||
@media (max-width: 768px) {
|
||
.widget {
|
||
margin-bottom: 35px; } }
|
||
.widget .widget-title {
|
||
margin-top: 0px;
|
||
margin-bottom: 15px;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
border-bottom: 1px solid #004753; }
|
||
.widget.widget-latest-post .media .media-object {
|
||
width: 100px;
|
||
height: auto; }
|
||
.widget.widget-latest-post .media .media-heading a {
|
||
color: #000000;
|
||
font-size: 16px; }
|
||
.widget.widget-latest-post .media p {
|
||
font-size: 12px;
|
||
color: #7c7c7c; }
|
||
@media (max-width: 992px) {
|
||
.widget.widget-latest-post {
|
||
padding-top: 20px; } }
|
||
.widget.widget-category ul li {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px; }
|
||
.widget.widget-category ul li a {
|
||
color: gray;
|
||
padding: 10px;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
-webkit-transition: padding 0.3s ease, border 0.3s ease;
|
||
-moz-transition: padding 0.3s ease, border 0.3s ease;
|
||
-ms-transition: padding 0.3s ease, border 0.3s ease;
|
||
-o-transition: padding 0.3s ease, border 0.3s ease;
|
||
transition: padding 0.3s ease, border 0.3s ease; }
|
||
.widget.widget-category ul li a:before {
|
||
padding-right: 10px; }
|
||
.widget.widget-category ul li a:hover {
|
||
color: #185b63;
|
||
padding-left: 25px; }
|
||
.widget.widget-category ul li a:active {
|
||
padding-left: 24px;
|
||
border: 1px solid #185b63;
|
||
border-radius: 30px;
|
||
-webkit-transition: padding 0s ease-in-out;
|
||
-moz-transition: padding 0s ease-in-out;
|
||
-ms-transition: padding 0s ease-in-out;
|
||
-o-transition: padding 0s ease-in-out;
|
||
transition: padding 0s ease-in-out; }
|
||
.widget.widget-category ul li a.current {
|
||
color: #ffffff;
|
||
background: #185b63;
|
||
border: 1px solid #185b63;
|
||
border-radius: 30px;
|
||
pointer-events: none;
|
||
cursor: default; }
|
||
.widget.widget-tag ul li {
|
||
margin-bottom: 10px;
|
||
display: inline-block;
|
||
margin-right: 5px; }
|
||
.widget.widget-tag ul li a {
|
||
color: gray;
|
||
display: inline-block;
|
||
padding: 8px 15px;
|
||
border: 1px solid #004753;
|
||
border-radius: 30px;
|
||
font-size: 14px;
|
||
-webkit-transition: background-color 0.3s ease, border 0.3s ease, color 0.1s ease;
|
||
-moz-transition: background-color 0.3s ease, border 0.3s ease, color 0.1s ease;
|
||
-ms-transition: background-color 0.3s ease, border 0.3s ease, color 0.1s ease;
|
||
-o-transition: background-color 0.3s ease, border 0.3s ease, color 0.1s ease;
|
||
transition: background-color 0.3s ease, border 0.3s ease, color 0.1s ease; }
|
||
.widget.widget-tag ul li a:hover {
|
||
color: #185b63;
|
||
background: rgba(24, 91, 99, 0.3);
|
||
border: 1px solid rgba(24, 91, 99, 0.3); }
|
||
.widget.widget-tag ul li a:active {
|
||
color: #185b63;
|
||
border: 1px solid #185b63;
|
||
background: #ffffff;
|
||
-webkit-transition: background-color 0.1s ease;
|
||
-moz-transition: background-color 0.1s ease;
|
||
-ms-transition: background-color 0.1s ease;
|
||
-o-transition: background-color 0.1s ease;
|
||
transition: background-color 0.1s ease; }
|
||
.widget.widget-tag ul li a.current {
|
||
color: #ffffff;
|
||
background: #185b63;
|
||
border: 1px solid #185b63;
|
||
pointer-events: none;
|
||
cursor: default; }
|
||
|
||
/*=================================================================
|
||
Latest Posts
|
||
==================================================================*/
|
||
.blog {
|
||
background: #f2f2f2; }
|
||
|
||
.post {
|
||
background: #ffffff;
|
||
margin-bottom: 55px; }
|
||
@media (max-width: 768px) {
|
||
.post {
|
||
margin-bottom: 20px; } }
|
||
.post .post-media.post-thumb img {
|
||
width: 100%;
|
||
height: auto; }
|
||
.post .post-media.post-media-audio iframe {
|
||
width: 100%; }
|
||
.post .post-title {
|
||
margin-top: 25px;
|
||
text-transform: uppercase; }
|
||
.post .post-title a {
|
||
color: #185b63; }
|
||
.post .post-title a:hover {
|
||
color: #185b63; }
|
||
.post .post-meta {
|
||
font-size: 13px;
|
||
margin-top: 10px; }
|
||
.post .post-meta ul li {
|
||
display: inline-block;
|
||
color: #909090;
|
||
margin-right: 20px;
|
||
font-size: 12px;
|
||
letter-spacing: .5px; }
|
||
.post .post-meta ul li a {
|
||
color: #909090; }
|
||
.post .post-meta ul li a:hover {
|
||
color: #185b63; }
|
||
.post .post-meta .post-author {
|
||
color: #000000; }
|
||
.post .post-content {
|
||
margin-top: 20px; }
|
||
.post .post-content p {
|
||
line-height: 26px; }
|
||
.post .post-content ul {
|
||
font-size: 15px;
|
||
padding: 10px 20px;
|
||
font-family: "Open Sans", sans-serif;
|
||
list-style: circle; }
|
||
.post .post-content ol {
|
||
font-size: 15px;
|
||
padding: 10px 20px;
|
||
font-family: "Open Sans", sans-serif; }
|
||
.post .post-content blockquote {
|
||
margin-top: 20px;
|
||
font-size: 18px;
|
||
border-color: #185b63;
|
||
padding: 10px 20px;
|
||
text-align: left;
|
||
color: #737373; }
|
||
.post .post-content .btn-main, .post .post-content .btn-transparent, .post .post-content .btn-small {
|
||
padding: 10px 20px;
|
||
margin: 15px 0;
|
||
font-size: 12px; }
|
||
|
||
.post-pagination {
|
||
margin: 0px; }
|
||
@media (max-width: 992px) {
|
||
.post-pagination {
|
||
margin-bottom: 60px; } }
|
||
@media (max-width: 768px) {
|
||
.post-pagination {
|
||
margin-bottom: 25px; } }
|
||
.post-pagination > li {
|
||
margin: 0 2px;
|
||
display: inline-block;
|
||
font-size: 14px; }
|
||
.post-pagination > li > a {
|
||
color: #000000;
|
||
-webkit-transition: all 0.3s ease;
|
||
-moz-transition: all 0.3s ease;
|
||
-ms-transition: all 0.3s ease;
|
||
-o-transition: all 0.3s ease;
|
||
transition: all 0.3s ease; }
|
||
.post-pagination > li > a:hover {
|
||
color: #ffffff;
|
||
background: #185b63;
|
||
border: 1px solid #185b63; }
|
||
.post-pagination > li.active > a {
|
||
background: #185b63 !important;
|
||
border: 1px solid #185b63 !important; }
|
||
.post-pagination > li:first-child > a,
|
||
.post-pagination > li:last-child > a {
|
||
border-radius: 0; }
|
||
|
||
.coming-soon {
|
||
background: url("../images/backgrounds/coming-soon.jpg");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100vh; }
|
||
@media (max-width: 400px) {
|
||
.coming-soon {
|
||
padding: 50px 0; } }
|
||
@media (max-width: 480px) {
|
||
.coming-soon {
|
||
padding: 50px 0; } }
|
||
.coming-soon .block h1 {
|
||
line-height: 65px;
|
||
font-size: 55px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0; }
|
||
@media (max-width: 400px) {
|
||
.coming-soon .block h1 {
|
||
font-size: 40px;
|
||
line-height: 50px; } }
|
||
@media (max-width: 480px) {
|
||
.coming-soon .block h1 {
|
||
font-size: 40px;
|
||
line-height: 50px; } }
|
||
.coming-soon .block p {
|
||
color: #ffffff;
|
||
margin-top: 10px;
|
||
font-size: 16px; }
|
||
.coming-soon .block .count-down {
|
||
margin-top: 50px; }
|
||
.coming-soon .block .count-down .syotimer-cell {
|
||
width: 25%;
|
||
padding: 15px;
|
||
display: inline-block;
|
||
background: rgba(101, 94, 122, 0.48); }
|
||
@media (max-width: 400px) {
|
||
.coming-soon .block .count-down .syotimer-cell {
|
||
width: 50%;
|
||
margin-bottom: 10px; } }
|
||
@media (max-width: 480px) {
|
||
.coming-soon .block .count-down .syotimer-cell {
|
||
width: 50%; } }
|
||
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__value {
|
||
font-size: 80px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
position: relative;
|
||
font-weight: bold; }
|
||
@media (max-width: 400px) {
|
||
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__value {
|
||
font-size: 50px; } }
|
||
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__unit {
|
||
font-weight: normal; }
|
||
@media (max-width: 768px) {
|
||
.coming-soon .block .count-down ul li {
|
||
font-size: 50px; } }
|
||
@media (max-width: 480px) {
|
||
.coming-soon .block .count-down ul li {
|
||
font-size: 50px; } }
|
||
@media (max-width: 400px) {
|
||
.coming-soon .block .count-down ul li {
|
||
font-size: 40px; } }
|
||
.coming-soon .block .count-down ul li:before {
|
||
content: ":";
|
||
font-size: 20pt;
|
||
opacity: 0.7;
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 0px; }
|
||
.coming-soon .block .count-down ul li:last-child:before {
|
||
content: ''; }
|
||
.coming-soon .block .count-down div:after {
|
||
content: " " attr(data-interval-text);
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
text-transform: capitalize;
|
||
display: block; }
|
||
.coming-soon .block .copyright-text {
|
||
font-size: 12px; }
|
||
.coming-soon .block .copyright-text a {
|
||
color: #ffffff;
|
||
font-weight: 600; }
|
||
|
||
.shopping .widget-title {
|
||
font-weight: 400;
|
||
border-bottom: 1px solid #004753;
|
||
padding-bottom: 15px;
|
||
margin-bottom: 15px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-size: 16px; }
|
||
|
||
.checkout .block {
|
||
padding: 15px;
|
||
margin-bottom: 10px; }
|
||
|
||
.checkout-form .form-group {
|
||
position: relative;
|
||
margin-bottom: 8px; }
|
||
.checkout-form .form-group label {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 15px;
|
||
right: auto;
|
||
bottom: auto;
|
||
color: #888;
|
||
font-size: 10px;
|
||
font-weight: 400;
|
||
text-transform: uppercase;
|
||
opacity: 1 !important;
|
||
width: 85px; }
|
||
.checkout-form .form-group input {
|
||
border-radius: 0;
|
||
display: block;
|
||
padding: 6px 10px 5px 100px;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
height: 50px; }
|
||
|
||
.checkout-form .checkout-country-code .form-group {
|
||
float: left; }
|
||
|
||
.checkout-form .checkout-country-code .form-group:first-child {
|
||
width: calc(45% - 2px);
|
||
margin-right: 4px; }
|
||
|
||
.checkout-form .checkout-country-code .form-group:last-child {
|
||
width: calc(55% - 2px); }
|
||
|
||
.shopping.cart .product-list .table .cart-amount th {
|
||
background: #f5f5f5;
|
||
padding: 10px;
|
||
text-transform: uppercase; }
|
||
|
||
.shopping.cart .product-list .table > tbody > tr > td {
|
||
vertical-align: middle; }
|
||
|
||
.shopping.cart .product-list .product-info a {
|
||
margin-left: 10px;
|
||
color: #000000;
|
||
font-weight: 600; }
|
||
|
||
.shopping.cart .product-list .product-remove {
|
||
color: #c7254e; }
|
||
|
||
.shopping.cart .account-details {
|
||
margin-top: 30px; }
|
||
.shopping.cart .account-details legend {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
text-transform: uppercase; }
|
||
.shopping.cart .account-details .btn-pay {
|
||
margin: 20px 0; }
|
||
|
||
.product-checkout-details .product-card > a {
|
||
padding-right: 20px; }
|
||
|
||
.product-checkout-details .product-card .price {
|
||
margin-top: 15px; }
|
||
|
||
.product-checkout-details .product-card .media-object {
|
||
width: 80px; }
|
||
|
||
.product-checkout-details .product-card h4 {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #555555; }
|
||
|
||
.product-checkout-details .product-card .remove {
|
||
font-size: 12px;
|
||
cursor: pointer; }
|
||
|
||
.product-checkout-details .discount-code {
|
||
border-top: 1px solid #004753;
|
||
border-bottom: 1px solid #004753;
|
||
margin: 20px 0 10px;
|
||
padding: 10px 0; }
|
||
.product-checkout-details .discount-code p {
|
||
margin: 0; }
|
||
.product-checkout-details .discount-code p a {
|
||
font-weight: 400;
|
||
color: #555555; }
|
||
|
||
.product-checkout-details .summary-prices {
|
||
border-style: solid;
|
||
border-color: #004753;
|
||
border-width: 0px 0 1px 0;
|
||
padding-bottom: 10px; }
|
||
.product-checkout-details .summary-prices li {
|
||
padding: 5px 0; }
|
||
.product-checkout-details .summary-prices li span + span {
|
||
float: right; }
|
||
|
||
.product-checkout-details .summary-total {
|
||
margin-top: 5px; }
|
||
.product-checkout-details .summary-total > span {
|
||
font-weight: 500;
|
||
font-size: 18px; }
|
||
.product-checkout-details .summary-total span + span {
|
||
float: right; }
|
||
|
||
.product-checkout-details .verified-icon {
|
||
margin-top: 25px; }
|
||
.product-checkout-details .verified-icon img {
|
||
width: 100%; }
|
||
|
||
.purchase-confirmation .purchase-confirmation-details {
|
||
padding: 20px;
|
||
border: 1px solid #004753; }
|
||
.purchase-confirmation .purchase-confirmation-details .table {
|
||
margin: 0;
|
||
color: #444444; }
|
||
.purchase-confirmation .purchase-confirmation-details .table b,
|
||
.purchase-confirmation .purchase-confirmation-details .table strong {
|
||
font-weight: 400; }
|
||
|
||
.empty-cart .block i {
|
||
font-size: 50px; }
|
||
|
||
.success-msg .block i {
|
||
font-size: 40px;
|
||
background: #0AA8A7;
|
||
color: #ffffff;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 100px;
|
||
display: inline-block;
|
||
line-height: 60px; }
|
||
|
||
.page-404 {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: calc(100vh - (100px + 205px));
|
||
text-align: center; }
|
||
@media (max-width: 992px) {
|
||
.page-404 {
|
||
min-height: calc(100vh - (90px + 205px)); } }
|
||
.page-404 h1 {
|
||
font-size: 300px;
|
||
font-weight: bold; }
|
||
@media (max-width: 768px) {
|
||
.page-404 h1 {
|
||
font-size: 150px; } }
|
||
@media (max-width: 480px) {
|
||
.page-404 h1 {
|
||
font-size: 130px; } }
|
||
@media (max-width: 400px) {
|
||
.page-404 h1 {
|
||
font-size: 90px; } }
|
||
.page-404 h2 {
|
||
text-transform: uppercase;
|
||
font-size: 20px;
|
||
letter-spacing: 4px;
|
||
font-weight: bold;
|
||
margin-top: 30px; }
|
||
.page-404 .btn-main, .page-404 .btn-transparent, .page-404 .btn-small {
|
||
margin-top: 40px;
|
||
margin-bottom: 50px; }
|
||
|
||
.page-message-sent {
|
||
display: flex;
|
||
align-items: center;
|
||
min-height: calc(100vh - (100px + 205px));
|
||
text-align: center; }
|
||
@media (max-width: 992px) {
|
||
.page-message-sent {
|
||
min-height: calc(100vh - (90px + 205px)); } }
|
||
.page-message-sent h1 {
|
||
font-size: 50px;
|
||
font-weight: bold; }
|
||
@media (max-width: 480px) {
|
||
.page-message-sent h1 {
|
||
font-size: 40px; } }
|
||
@media (max-width: 400px) {
|
||
.page-message-sent h1 {
|
||
font-size: 30px; } }
|
||
.page-message-sent h2 {
|
||
text-transform: uppercase;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
margin-top: 30px; }
|
||
.page-message-sent .btn-main, .page-message-sent .btn-transparent, .page-message-sent .btn-small {
|
||
margin-top: 40px;
|
||
margin-bottom: 50px; }
|
||
.page-message-sent img {
|
||
width: 50%;
|
||
max-height: 200px;
|
||
margin-top: 40px;
|
||
margin-bottom: 40px; }
|
||
|
||
.footer {
|
||
background: #f1f1f1;
|
||
min-height: 205px;
|
||
text-align: center;
|
||
padding-top: 67px; }
|
||
.footer p {
|
||
font-size: 13px;
|
||
line-height: 25px;
|
||
color: #919191; }
|
||
.footer a {
|
||
color: #595959; }
|
||
.footer .footer-menu {
|
||
padding-bottom: 25px; }
|
||
.footer .footer-menu ul {
|
||
margin: 0px;
|
||
padding: 0px; }
|
||
.footer .footer-menu ul li {
|
||
display: inline-block;
|
||
padding: 0px 20px; }
|
||
.footer .footer-menu ul li a {
|
||
display: inline-block;
|
||
color: #494949; }
|
||
.footer .footer-menu ul li a:hover {
|
||
color: #000000; }
|
||
.footer .copyright a {
|
||
font-weight: 600; }
|
||
|
||
.title-custom {
|
||
color: #046e6e; }
|
||
|
||
.text-center {
|
||
text-align: center; }
|
||
|
||
.text-justify {
|
||
text-align: justify; }
|
||
|
||
/* Reduziert den Abstand zwischen den Sections */
|
||
section {
|
||
margin-bottom: 0px;
|
||
/* Anpassung nach Bedarf */ }
|
||
|
||
/* Zusätzliche optionale Stile für eine bessere Darstellung */
|
||
#welcome.section, #service.section {
|
||
padding-top: 90px;
|
||
/* Anpassung nach Bedarf */
|
||
padding-bottom: 4px;
|
||
/* Anpassung nach Bedarf */ }
|
||
|
||
.text-justify {
|
||
text-align: justify; }
|
||
|
||
.description {
|
||
font-size: 22px;
|
||
/* Standard Schriftgröße */
|
||
line-height: 1.5;
|
||
padding-top: 90px;
|
||
/* Anpassung nach Bedarf */
|
||
padding-bottom: 1px;
|
||
/* Anpassung nach Bedarf */ }
|
||
@media (max-width: 768px) {
|
||
.description {
|
||
font-size: 18px;
|
||
/* Kleinere Schriftgröße für Tablets */
|
||
padding-top: 70px;
|
||
/* Anpassung nach Bedarf */
|
||
padding-bottom: 1px;
|
||
/* Anpassung nach Bedarf */ } }
|
||
@media (max-width: 480px) {
|
||
.description {
|
||
font-size: 16px;
|
||
/* Noch kleinere Schriftgröße für Handys */
|
||
padding-top: 50px;
|
||
/* Anpassung nach Bedarf */
|
||
padding-bottom: 1px;
|
||
/* Anpassung nach Bedarf */ } }
|
||
.facts .fact-item {
|
||
padding: 15px;
|
||
/* Abstand um die Bilder */ }
|
||
|
||
.facts .fact-item {
|
||
padding: 15px;
|
||
/* Abstand um die Bilder */ }
|
||
|
||
.fact-image {
|
||
height: 250px;
|
||
/* Einheitliche Höhe für alle Bilder */
|
||
width: auto;
|
||
/* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
|
||
object-fit: contain;
|
||
/* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
|
||
border-radius: 8px;
|
||
/* Abgerundete Ecken für die Bilder */
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
/* Leichter Schatten */ }
|
||
|
||
.custom-background {
|
||
background-size: cover;
|
||
background-position: center center;
|
||
background-repeat: no-repeat; }
|
||
|
||
.service-arrow .block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between; }
|
||
|
||
.service-content {
|
||
flex: 1; }
|
||
|
||
.service-icon {
|
||
margin-right: 15px;
|
||
/* Abstand nach Bedarf anpassen */ }
|
||
|
||
.service-image {
|
||
margin-left: 15px;
|
||
/* Abstand nach Bedarf anpassen */ }
|
||
|
||
.service-image img {
|
||
max-width: 150px;
|
||
/* Maximale Breite des Bildes anpassen */
|
||
height: auto; }
|
||
|
||
.bg-service1 {
|
||
background-color: #8bcfd6;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service2 {
|
||
background-color: #6baeb5;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service3 {
|
||
background-color: #8bcfd6;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service4 {
|
||
background-color: #6baeb5;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service5 {
|
||
background-color: #8bcfd6;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service6 {
|
||
background-color: #6baeb5;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service7 {
|
||
background-color: #8bcfd6;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.bg-service8 {
|
||
background-color: #6baeb5;
|
||
/* Beispielhafte Farbe für primary-dark */ }
|
||
|
||
.fixed-width {
|
||
width: 1200px;
|
||
/* Feste Breite, die du anpassen kannst */
|
||
height: auto;
|
||
/* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */ }
|
||
|
||
.service-arrow .block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
/* Optional: Padding hinzufügen */
|
||
border-radius: 100px;
|
||
/* Optional: Abgerundete Ecken hinzufügen */
|
||
color: #8a0909;
|
||
/* Optional: Textfarbe auf Weiß setzen */ }
|
||
|
||
.service-icon {
|
||
margin-right: 0px;
|
||
/* Abstand nach Bedarf anpassen */ }
|
||
|
||
.service-content {
|
||
flex: 1; }
|
||
|
||
.service-image {
|
||
margin-left: 0px;
|
||
/* Abstand nach Bedarf anpassen */ }
|
||
|
||
.fixed-text {
|
||
width: 600px;
|
||
/* Feste Breite für den Text */
|
||
margin-right: 15px;
|
||
/* Optional: Abstand nach Bedarf anpassen */ }
|
||
|
||
.service-image img {
|
||
max-width: 600px;
|
||
/* Maximale Breite des Bildes anpassen */
|
||
height: auto;
|
||
margin: 0;
|
||
/* Entfernt zusätzliche Margins */
|
||
padding: 0;
|
||
/* Entfernt zusätzliches Padding */
|
||
border: none;
|
||
/* Entfernt jegliche Standardrahmen */
|
||
display: block;
|
||
/* Verhindert zusätzliche Ränder bei inline-block-Elementen */ }
|
||
|
||
.page-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
/* Weiß als Hintergrundfarbe */
|
||
z-index: -1;
|
||
/* Sicherstellen, dass es hinter dem Inhalt liegt */ }
|
||
|
||
.service-grid {
|
||
display: grid;
|
||
gap: 30px;
|
||
/* 40px Abstand sowohl horizontal als auch vertikal */
|
||
grid-template-columns: repeat(3, 1fr);
|
||
/* => Standard: 3 Spalten für größere Bildschirme */ }
|
||
|
||
@media (max-width: 992px) {
|
||
.service-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* => mittlere Screens: nur 2 Spalten */ } }
|
||
|
||
@media (max-width: 576px) {
|
||
.service-grid {
|
||
grid-template-columns: 1fr;
|
||
/* => kleine Screens: 1 Spalte */ } }
|
||
|
||
/* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
|
||
.service-item-fixed {
|
||
width: 100%;
|
||
height: auto;
|
||
/* Oder "auto" falls die Höhe flexibel sein soll */
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 10px;
|
||
/* Abgerundete Ecken */ }
|
||
|
||
.zoom-wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
transition: transform 0.3s ease; }
|
||
|
||
.service-item-fixed:hover .zoom-wrap {
|
||
transform: scale(1.06); }
|
||
|
||
.zoom-wrap a {
|
||
display: block;
|
||
/* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
|
||
text-decoration: none;
|
||
/* Entfernt die Unterstreichung des Links */
|
||
color: inherit;
|
||
/* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */ }
|
||
|
||
.zoom-wrap img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block; }
|
||
|
||
/* Das "dunkle Overlay" */
|
||
.zoom-wrap .overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
/* dunkler Schleier (30% schwarz) */
|
||
z-index: 1;
|
||
/* Overlay unter dem Text, aber über dem Bild */
|
||
pointer-events: auto;
|
||
/* Stellt sicher, dass das Overlay klickbar ist */ }
|
||
|
||
.overlay-text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #fff;
|
||
font-size: 2.3em;
|
||
font-weight: bold;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||
z-index: 2;
|
||
/* Höher als das Overlay */ }
|
||
|
||
.my-container {
|
||
width: 80%;
|
||
margin: 0 auto; }
|
||
|
||
.gif-background {
|
||
background-image: url("/images/BackgroundAnimation.svg");
|
||
/* Pfad zu Ihrem GIF */
|
||
background-size: cover;
|
||
/* Deckt den gesamten Hintergrund ab */
|
||
background-position: center -220px;
|
||
/* Positioniert das GIF oben in der Mitte */
|
||
background-repeat: no-repeat;
|
||
/* Verhindert die Wiederholung des GIFs */
|
||
position: relative;
|
||
/* Stellt sicher, dass das Overlay korrekt positioniert wird */ }
|
||
|
||
.gif-background::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
/* Weißer Overlay mit 70% Deckkraft */
|
||
pointer-events: none;
|
||
/* Stellt sicher, dass das Overlay keine Interaktionen blockiert */ }
|
||
|
||
.custom-image {
|
||
width: 100px;
|
||
height: auto;
|
||
max-width: 70%; }
|
||
|
||
.custom-title {
|
||
color: #046e6e;
|
||
/* Ersetze dies mit der Farbe deiner Wahl */ }
|
||
|
||
.hover-link {
|
||
transition: color 0.3s ease; }
|
||
|
||
.hover-link:hover {
|
||
color: #F5A623; }
|
||
|
||
html {
|
||
scroll-behavior: smooth; }
|
||
|
||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||
.logo-container {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
/* Zentriert sich, lässt links und rechts je 10% Platz */
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
/* Abstand zwischen Frame 1 & Frame 2 */ }
|
||
|
||
/* 2) Frame 1 (40%) und Frame 2 (60%) */
|
||
.frame1 {
|
||
flex: 0 0 40%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center; }
|
||
|
||
.frame2 {
|
||
flex: 0 0 60%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center; }
|
||
|
||
/* 3) Banner-Logos selbst: Standard erst auf opacity:0, Animation blendet sie ein */
|
||
.banner-logo {
|
||
max-width: 100%;
|
||
height: auto;
|
||
opacity: 0; }
|
||
|
||
/* 4) ANIMATIONEN */
|
||
/* Frame 1 – Move-In: Wir animieren gezielt das Bild */
|
||
.frame1 .banner-logo {
|
||
animation: moveIn 1s forwards; }
|
||
|
||
/* Frame 2 – Fade-In: Wir animieren gezielt das Bild */
|
||
.frame2 .banner-logo {
|
||
animation: moveIn 1s 0.5s forwards; }
|
||
|
||
/* Keyframes */
|
||
@keyframes moveIn {
|
||
from {
|
||
transform: translateX(50px);
|
||
opacity: 0; }
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1; } }
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0; }
|
||
to {
|
||
opacity: 1; } }
|
||
|
||
/* 5) TITEL-FADE-IN (optional) */
|
||
.fade-in-title {
|
||
opacity: 0;
|
||
animation: fadeTitle 1.5s forwards 1s; }
|
||
|
||
@keyframes fadeTitle {
|
||
to {
|
||
opacity: 1; } }
|
||
|
||
/* 6) (Optional) Responsive unter 768px => Frames untereinander */
|
||
@media (max-width: 768px) {
|
||
.logo-container {
|
||
flex-direction: column;
|
||
width: 90%;
|
||
/* Mehr Platz, Bilder untereinander */ }
|
||
.frame1, .frame2 {
|
||
flex: 0 0 auto;
|
||
width: 100%;
|
||
margin-bottom: 20px; } }
|
||
|
||
.custom-container {
|
||
max-width: 1800px;
|
||
/* oder was du möchtest */
|
||
margin: 0 auto;
|
||
padding-left: 30px;
|
||
padding-right: 30px; }
|
||
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
text-align: center;
|
||
background-color: #ffffff;
|
||
margin: 0;
|
||
padding: 20px; }
|
||
|
||
.services-title {
|
||
margin-top: 50px;
|
||
color: #046e6e; }
|
||
|
||
.services-description {
|
||
color: black;
|
||
margin-bottom: 50px; }
|
||
|
||
/* Standard-Desktop-Layout */
|
||
.services-section {
|
||
background-color: #f1f1f1;
|
||
/* Hintergrundfarbe der Sektion auf Schwarz setzen */
|
||
padding: 40px 0;
|
||
/* Padding für die Sektion */
|
||
width: 100%;
|
||
/* Volle Breite */
|
||
box-sizing: border-box;
|
||
/* Padding in der Breite berücksichtigen */ }
|
||
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
/* Drei Spalten für Desktop */
|
||
gap: 20px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
/* Zentriert das Raster */
|
||
padding: 0 20px;
|
||
/* Optional: Padding für kleinere Bildschirme */ }
|
||
|
||
.service-card {
|
||
background-color: #f1f1f1;
|
||
/* Hintergrundfarbe der Boxen auf Schwarz setzen */
|
||
color: white;
|
||
/* Textfarbe auf Weiß setzen für bessere Lesbarkeit */
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
|
||
padding: 20px;
|
||
box-sizing: border-box; }
|
||
|
||
.service-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-bottom: 15px; }
|
||
|
||
.service-card-title {
|
||
color: black;
|
||
/* Titel-Textfarbe auf Weiß setzen */
|
||
margin-bottom: 10px; }
|
||
|
||
.service-card-description {
|
||
color: black;
|
||
/* Hellgraue Farbe für den Beschreibungstext */
|
||
font-size: 14px; }
|
||
|
||
/* Anpassungen für Mobilgeräte */
|
||
@media (max-width: 768px) {
|
||
.services-grid {
|
||
grid-template-columns: 1fr;
|
||
/* Eine Spalte für Mobilgeräte */ } }
|