|
|
@@ -0,0 +1,4552 @@
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FONTS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+/* roboto-condensed-regular - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-500 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-600 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-700 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-800 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 800;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-900 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 900;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FONTWEIGHTS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+$font-weight-base: 500; // regular
|
|
|
+$font-weight-medium: 600; //medium
|
|
|
+$font-weight-semibold: 700; // semibold
|
|
|
+$font-weight-bold: 800; //bold
|
|
|
+$font-weight-black: 900; //extrabold
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FONTSIZES
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+@mixin font-size-base {
|
|
|
+ --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
|
|
|
+ font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important;
|
|
|
+}
|
|
|
+
|
|
|
+@mixin h1-font-size {
|
|
|
+ --min-size: 40;
|
|
|
+ --max-size: 100;
|
|
|
+}
|
|
|
+@mixin h2-font-size {
|
|
|
+ --min-size: 37;
|
|
|
+ --max-size: 48;
|
|
|
+}
|
|
|
+@mixin h3-font-size {
|
|
|
+ --min-size: 21;
|
|
|
+ --max-size: 26;
|
|
|
+}
|
|
|
+@mixin h4-font-size {
|
|
|
+ --min-size: 18;
|
|
|
+ --max-size: 24;
|
|
|
+}
|
|
|
+@mixin h5-font-size {
|
|
|
+ --min-size: 17;
|
|
|
+ --max-size: 22;
|
|
|
+}
|
|
|
+@mixin font-size-small {
|
|
|
+ --min-size: 13;
|
|
|
+ --max-size: 14;
|
|
|
+}
|
|
|
+@mixin font-size {
|
|
|
+ --min-size: 17;
|
|
|
+ --max-size: 19;
|
|
|
+}
|
|
|
+
|
|
|
+$h3-font-size: 26;
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// ROOT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+:root {
|
|
|
+ --swiper-theme-color: $color_brand;
|
|
|
+ // FÜR BUGFIX APPLE DEVICES 100vh
|
|
|
+ --app-height: 100%;
|
|
|
+
|
|
|
+ // FÜR SCHRIFTGRÖSSEN Breakpoints
|
|
|
+ --min-size: 16;
|
|
|
+ --max-size: 20;
|
|
|
+ --container-min: 320;
|
|
|
+ --container-max: 1600;
|
|
|
+ --viewport-min: 320;
|
|
|
+ --viewport-max: 1600;
|
|
|
+}
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// COLOURS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+$color_basic: #000000; // z.B. Schriftfarbe
|
|
|
+$color_brand: #F12C8C; // Unternehmens Farbe
|
|
|
+$color_brand_dark: #c92976; // Unternehmens Farbe
|
|
|
+$color_brand_light: #135B3F; // Unternehmens Farbe
|
|
|
+
|
|
|
+$color_transparent: rgba(0, 0, 0, 0);
|
|
|
+
|
|
|
+$color_lightgrey: #EFEFF0;
|
|
|
+$color_white: #ffffff;
|
|
|
+$color_darkgrey: #606060;
|
|
|
+$color_grey: #808080;
|
|
|
+$color_red: #ff0000;
|
|
|
+
|
|
|
+
|
|
|
+.color-white, .color_white,
|
|
|
+.text-light {
|
|
|
+ color: $color_white;
|
|
|
+ *, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
|
|
|
+ color: $color_white;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// HEADLINES // TEXT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+body {
|
|
|
+ overflow-x: hidden;
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-weight: $font-weight-base;
|
|
|
+ @include font-size-base;
|
|
|
+ @include font-size;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: $color_basic;
|
|
|
+ text-wrap: pretty;
|
|
|
+ letter-spacing: 0.1rem;
|
|
|
+ background-color: #EFEFF0;
|
|
|
+}
|
|
|
+
|
|
|
+@mixin headlinebasic {
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ color: $color_brand;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ display: block;
|
|
|
+ text-wrap: balance;
|
|
|
+ @include font-size-base;
|
|
|
+ letter-spacing: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
|
|
|
+ text-shadow: none;
|
|
|
+ @include headlinebasic();
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+h1, .h1 {
|
|
|
+ @include h1-font-size;
|
|
|
+
|
|
|
+}
|
|
|
+h2, .h2 {
|
|
|
+ @include h2-font-size;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ text-shadow: none;
|
|
|
+}
|
|
|
+h3, .h3 {
|
|
|
+ @include h3-font-size;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $color_brand;
|
|
|
+}
|
|
|
+h4, .h4 {
|
|
|
+ @include h4-font-size;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+}
|
|
|
+h5, .h5 {
|
|
|
+ @include h5-font-size;
|
|
|
+ line-height: 1.3;
|
|
|
+
|
|
|
+}
|
|
|
+.subline {
|
|
|
+ margin-bottom: 0;
|
|
|
+ color: $color_brand;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+@mixin icon {
|
|
|
+ font-family: bootstrap-icons !important;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal !important;
|
|
|
+ font-variant: normal;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+i, em {
|
|
|
+ &.bi {
|
|
|
+ @include icon;
|
|
|
+ }
|
|
|
+ font-style: italic;
|
|
|
+}
|
|
|
+
|
|
|
+b, strong {
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+}
|
|
|
+a {
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+small, .small, .text-small {
|
|
|
+ @include font-size-small;
|
|
|
+}
|
|
|
+$letter-spacing: .25rem;
|
|
|
+
|
|
|
+.letter-spacing {
|
|
|
+ letter-spacing: $letter-spacing;
|
|
|
+}
|
|
|
+$text-shadow: 0 0 20px rgba($color_basic, .2);
|
|
|
+.text-shadow {
|
|
|
+ text-shadow: $text-shadow;
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// COSTUM MIXINS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+@mixin vendor-prefix($name, $value){
|
|
|
+ @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', ''){
|
|
|
+ #{$vendor}#{$name}: #{$value};
|
|
|
+ }
|
|
|
+}
|
|
|
+@mixin masterfloat {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+@mixin center{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ @include vendor-prefix('transform', 'translate(-50%,-50%)');
|
|
|
+}
|
|
|
+@mixin vertical-center{
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ @include vendor-prefix('transform', 'translateY(-50%)');
|
|
|
+}
|
|
|
+@mixin horizontal-center{
|
|
|
+ position: relative;
|
|
|
+ left: 50%;
|
|
|
+ @include vendor-prefix('transform', 'translateX(-50%)');
|
|
|
+}
|
|
|
+
|
|
|
+@mixin fade {
|
|
|
+ @include vendor-prefix('transition', 'all 0.5s ease-in-out');
|
|
|
+}
|
|
|
+@mixin fade-fast {
|
|
|
+ @include vendor-prefix('transition', 'all 0.25s ease-in-out');
|
|
|
+}
|
|
|
+
|
|
|
+$border-radius: 50px;
|
|
|
+$box-shadow: 0 0 20px rgba($color_basic, .2);
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// BASIC RESETS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+// Scrollbars
|
|
|
+* {
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: $color_brand transparent;
|
|
|
+}
|
|
|
+// Schreibweise Firefox // Webkit-Browser – getrennte Schreibweise erforderlich!!!
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: $color_brand;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: $color_brand;
|
|
|
+}
|
|
|
+// Close Scrollbars
|
|
|
+
|
|
|
+.container {
|
|
|
+ @media (min-width: 1700px) {
|
|
|
+ max-width: 1640px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ padding-left: 15px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.container-fluid{
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ padding-left: 0px;
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+body, table, tr, td {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+* {
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+}
|
|
|
+a {
|
|
|
+ color: $color_brand;
|
|
|
+ //text-decoration: underline;
|
|
|
+ * {
|
|
|
+ color: $color_brand;
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active,
|
|
|
+ &:link {
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+ &:active,
|
|
|
+ &:link {
|
|
|
+ color: $color_brand;
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ color: $color_brand_dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:focus {
|
|
|
+ outline: 0 !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+p, .p {
|
|
|
+ font-weight: 500 !important;
|
|
|
+ line-height: 1.6 !important;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ &:last-child, &:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ }
|
|
|
+ + .btn {
|
|
|
+ margin-top: 2rem;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+::selection {
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+*::selection {
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+::-moz-selection{
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+*::-moz-selection {
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// NAVIGATION
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.navbar {
|
|
|
+ @include fade;
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ padding: 0 !important;
|
|
|
+
|
|
|
+ .container {
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ max-width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-collapse {
|
|
|
+ padding-top: 23px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding-top: 25px;
|
|
|
+ padding-bottom: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-link {
|
|
|
+ color: #000000;
|
|
|
+ background: transparent !important;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin-top: 18px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:hover {
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ &:active,
|
|
|
+ .active {
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navi {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-brand {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ img,
|
|
|
+ .svg {
|
|
|
+ height: 100%;
|
|
|
+ @include fade;
|
|
|
+
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ height: 45.5px;
|
|
|
+ }
|
|
|
+ @media (max-width: 425.98px) {
|
|
|
+ height: 39.5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone {
|
|
|
+ color: #000000;
|
|
|
+ padding-left: 10px;
|
|
|
+ height: 25px;
|
|
|
+ width: auto;
|
|
|
+
|
|
|
+ @media (max-width: 425.98px) {
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-toggler {
|
|
|
+ background-color: #f12b8c;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 13px;
|
|
|
+ border-radius: 0;
|
|
|
+
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding: 11px;
|
|
|
+ }
|
|
|
+ @media (max-width: 425.98px) {
|
|
|
+ padding: 8px 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ svg path {
|
|
|
+ fill: #000 !important;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-nav {
|
|
|
+ .nav-item {
|
|
|
+ .social-button {
|
|
|
+ .phone {
|
|
|
+ margin-top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link {
|
|
|
+ color: #000 !important;
|
|
|
+ position: relative;
|
|
|
+ letter-spacing: 0.8px;
|
|
|
+ font-size: 20px;
|
|
|
+ padding-right: 13px;
|
|
|
+ padding-left: 13px;
|
|
|
+
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #f12b8c !important;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #f12b8c !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.shrink {
|
|
|
+ @include fade;
|
|
|
+
|
|
|
+ & * {
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.navbar {
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ box-shadow: $box-shadow;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+
|
|
|
+ .navbar-brand {
|
|
|
+ img,
|
|
|
+ .svg {
|
|
|
+ height: 99px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ svg {
|
|
|
+ height: 99px;
|
|
|
+
|
|
|
+ path {
|
|
|
+ fill: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-top {
|
|
|
+ opacity: 0;
|
|
|
+ max-height: 0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-link {
|
|
|
+ background: transparent !important;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ form {
|
|
|
+ button {
|
|
|
+ .nav-icon {
|
|
|
+ background-color: transparent;
|
|
|
+ color: $color_brand;
|
|
|
+
|
|
|
+ * {
|
|
|
+ color: $color_brand;
|
|
|
+ }
|
|
|
+
|
|
|
+ svg path {
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ form {
|
|
|
+ input {
|
|
|
+ border: 1px solid rgba($color_brand, .5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-open {
|
|
|
+ .btn-link {
|
|
|
+ .bi-list {
|
|
|
+ &::before {
|
|
|
+ content: '\F659';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-fullscreen {
|
|
|
+ margin: 1.5rem auto;
|
|
|
+ width: calc(100vw - 3rem);
|
|
|
+ height: calc(100% - 3rem);
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FOOTER
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.footer {
|
|
|
+ .container {
|
|
|
+ @media (max-width: 1099.98px) {
|
|
|
+ padding-left: 25px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding-left: 20px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-da {
|
|
|
+ height: 100%;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-phone {
|
|
|
+ height: 20px !important;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-at {
|
|
|
+ height: 20px !important;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-weight: $font-weight-medium;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ position: absolute;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ width: 130vw;
|
|
|
+ height: 130vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ a,
|
|
|
+ a:link,
|
|
|
+ a:active {
|
|
|
+ color: rgba($color_white, 1);
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: $color_white !important;
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
+ height: 65px;
|
|
|
+ width: auto;
|
|
|
+
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ @media (max-width: 425.98px) {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ @media (max-width: 229.98px) {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ &.big {
|
|
|
+ @include headlinebasic;
|
|
|
+ @include h2-font-size;
|
|
|
+ line-height: 1.2;
|
|
|
+
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ @include h3-font-size;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .quicknav {
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0.25rem 0;
|
|
|
+
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .subfooter {
|
|
|
+ padding-top: 0px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+
|
|
|
+ @media (min-width: 1700.98px) {
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-links {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ @media (max-width: 1399.98px) {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 85%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ border-color: $color_white !important;
|
|
|
+
|
|
|
+ .text-light {
|
|
|
+ span {
|
|
|
+ letter-spacing: 0px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ &:hover {
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ color: $color_brand_light !important;
|
|
|
+ background-color: #fff;
|
|
|
+ border: #fff solid 1px;
|
|
|
+ }
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ letter-spacing: 0px !important;
|
|
|
+
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ display: block;
|
|
|
+ padding: 0.75rem;
|
|
|
+ border: 1px solid;
|
|
|
+ margin-top: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ @media (min-width: 768px) {
|
|
|
+ content: '';
|
|
|
+ padding-left: 2rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.backtotop {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 1rem;
|
|
|
+ z-index: 5;
|
|
|
+ right: 0;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ background-color: $color_brand;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .subfooterlinks {
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ margin-top: 1.5rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ &::before {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .socialiconwrapper {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ margin-top: 10px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ margin-top: 0px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 580.98px) {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .socialicon {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 2px solid $color_white;
|
|
|
+ margin-top: 0 !important;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
+ width: auto;
|
|
|
+ height: 25px;
|
|
|
+ @include center;
|
|
|
+
|
|
|
+ path {
|
|
|
+ fill: $color_white !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: $color_white;
|
|
|
+
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & + .socialicon {
|
|
|
+ margin-left: 0.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// CONTENT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+// Effekte
|
|
|
+.blur {
|
|
|
+ @include vendor-prefix(backdrop-filter, blur(10px));
|
|
|
+}
|
|
|
+.hyphens {
|
|
|
+ @include vendor-prefix('hyphens', 'auto');
|
|
|
+}
|
|
|
+.color_brand {
|
|
|
+ color: $color_brand !important;
|
|
|
+}
|
|
|
+.bg_brand {
|
|
|
+ background-color: $color_brand !important;
|
|
|
+ color: $color_white;
|
|
|
+}
|
|
|
+.bg_secondary, .bg-secondary {
|
|
|
+ background-color:#ffffff;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_footer {
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ p{
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bg_grey {
|
|
|
+ background-color: $color_lightgrey !important;
|
|
|
+}
|
|
|
+
|
|
|
+// Buttons
|
|
|
+.btn {
|
|
|
+ border: none;
|
|
|
+ @include font-size-base;
|
|
|
+ @include font-size;
|
|
|
+ font-weight: $font-weight-base;
|
|
|
+ padding: 1rem 2rem;
|
|
|
+ margin-top: 2rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+
|
|
|
+ &:focus,
|
|
|
+ &:active,
|
|
|
+ &.show {
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.btn-primary, .btn-default {
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ border-radius: 0px !important;
|
|
|
+ color: #fff !important;
|
|
|
+ border:3px solid $color_brand_light;
|
|
|
+ padding: 8px 43px 8px 43px;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 8px 23px 8px 23px;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: $color_transparent !important;
|
|
|
+ border:3px solid $color_brand_light !important;
|
|
|
+ color: $color_brand_light !important;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background-color: $color_transparent;
|
|
|
+ border:3px solid $color_brand_light;
|
|
|
+ color: $color_brand_light !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-outline-light {
|
|
|
+ border: 2px solid $color_white;
|
|
|
+}
|
|
|
+.btn-outline-default {
|
|
|
+ border: 2px solid $color_brand;
|
|
|
+}
|
|
|
+.btn-link {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+// Dropdowns
|
|
|
+.dropdown-toggle {
|
|
|
+ &::after {
|
|
|
+ @include icon();
|
|
|
+ content: '\F282';
|
|
|
+ border: none;
|
|
|
+ vertical-align: baseline;
|
|
|
+ font-size: 65%;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dropdown-item {
|
|
|
+ color: $color_basic;
|
|
|
+ &:focus,
|
|
|
+ &:hover {
|
|
|
+ color: $color_brand;
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Content
|
|
|
+
|
|
|
+section, .section,
|
|
|
+footer {
|
|
|
+ @include masterfloat();
|
|
|
+}
|
|
|
+section,
|
|
|
+.section {
|
|
|
+ padding-top: 150px;
|
|
|
+ padding-bottom: 150px;
|
|
|
+ @media (max-width: 1099.98px) {
|
|
|
+ padding-top: 120px;
|
|
|
+ padding-bottom: 120px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+ ul, ol {
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ color: $color_brand;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // unorderd
|
|
|
+ ul {
|
|
|
+ padding-left: 1.75rem;
|
|
|
+ li {
|
|
|
+ &::before {
|
|
|
+ @include icon;
|
|
|
+ content: "\F633";
|
|
|
+ left: -1.75rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ top: 0.2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // orderd
|
|
|
+ ol {
|
|
|
+ counter-reset: section; /* Creates a new instance of the section counter with each ol element */
|
|
|
+ padding-left: 1.5rem;
|
|
|
+ li {
|
|
|
+ margin-left: 0rem;
|
|
|
+ &::before {
|
|
|
+ counter-increment: section; /* Increments only this instance of the section counter */
|
|
|
+ content: counters(section, ".") ". "; /* Combines the values of all instances of the section counter, separated by a period */
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ //margin-left: calc(-40px - 0.5rem);
|
|
|
+ //width: 40px;
|
|
|
+ text-align: right;
|
|
|
+ color: $color_brand;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.two-column {
|
|
|
+ column-count: 2;
|
|
|
+ column-gap: 45px;
|
|
|
+ @include vendor-prefix('hyphens', 'auto');
|
|
|
+ @media (max-width: 1099.98px) {
|
|
|
+ column-count: 1 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.titlearea {
|
|
|
+ &.small{
|
|
|
+ height: 60vh !important;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ height: 70vh !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ height: 100vh !important;
|
|
|
+ }
|
|
|
+ .textwrapper{
|
|
|
+ margin-left: 12px;
|
|
|
+ margin-right: 12px;
|
|
|
+ padding: 15px 25px !important;
|
|
|
+ background: rgba(241,43,140,0.70);
|
|
|
+ width: auto !important;
|
|
|
+ margin-bottom: 4rem;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ margin-left: 17px;
|
|
|
+ margin-right: 17px;
|
|
|
+ }
|
|
|
+ .h1{
|
|
|
+ letter-spacing: 1px;
|
|
|
+ line-height: 1.2;
|
|
|
+ text-shadow: none;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ font-size: 60px !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ display: flex;
|
|
|
+ text-transform: none !important;
|
|
|
+ align-items: center;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 50px !important;
|
|
|
+ line-height: 1.1;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 35px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ padding-right: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 23px;
|
|
|
+ line-height: 1.6;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ padding-right: 18px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .openingtimes{
|
|
|
+ padding: 0px !important;
|
|
|
+ background: rgba(241,43,140,0.55);
|
|
|
+ .h1{
|
|
|
+ text-shadow: none;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ font-size: 50px !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 30px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #fff;
|
|
|
+ text-shadow: none;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ font-size: 30px !important;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 27px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 40px !important;
|
|
|
+ margin-right: 20px;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 35px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 29px !important;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.bottom-0 {
|
|
|
+ bottom: 70px !important;
|
|
|
+ }
|
|
|
+ .openingtimeswrapper{
|
|
|
+ padding: 25px;
|
|
|
+ }
|
|
|
+ .phonewrapper{
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 10px 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .h1{
|
|
|
+ text-shadow: 0px 0px 25px #000;
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ text-shadow: 0px 0px 15px #000;
|
|
|
+ }
|
|
|
+ @include masterfloat();
|
|
|
+ //height: 100vh;
|
|
|
+ height: var(--app-height);
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 0 !important;
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+ &.half {
|
|
|
+ height: 650px;
|
|
|
+ max-height: 75vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ picture {
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ @include center;
|
|
|
+ background-color: rgba($color_basic,.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
+ //height: 100vh;
|
|
|
+ height: var(--app-height);
|
|
|
+
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.text-image {
|
|
|
+ background-image: url(https://www.emsa.com/fileadmin/media/inspirationen/drink2go/eco/teaser-emsa-drink2go-auswahlhilfe.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .container {
|
|
|
+ .row {
|
|
|
+
|
|
|
+ //&:nth-child(odd),
|
|
|
+ &.flex-row-reverse {
|
|
|
+ flex-direction: row-reverse!important;
|
|
|
+
|
|
|
+ .textwrapper {
|
|
|
+ padding-right: 1.5rem;
|
|
|
+ padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.section {
|
|
|
+ float: none;
|
|
|
+ width: auto;
|
|
|
+ &:first-of-type,
|
|
|
+ + .section {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.text-image-background {
|
|
|
+ background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .container {
|
|
|
+ .row {
|
|
|
+
|
|
|
+ //&:nth-child(odd),
|
|
|
+ &.flex-row-reverse {
|
|
|
+ flex-direction: row-reverse!important;
|
|
|
+
|
|
|
+ .textwrapper {
|
|
|
+ padding-right: 1.5rem;
|
|
|
+ padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.section {
|
|
|
+ float: none;
|
|
|
+ width: auto;
|
|
|
+ &:first-of-type,
|
|
|
+ + .section {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.teasergrid {
|
|
|
+ .teaser {
|
|
|
+ &.square {
|
|
|
+ .squarewrapper {
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba($color_brand,.28);
|
|
|
+ //background: $color_brand;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ //mix-blend-mode: multiply;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ padding-top: 100%;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ object-fit: cover;
|
|
|
+ @include center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.jobs {
|
|
|
+ border-radius: 0;
|
|
|
+ * {
|
|
|
+ color: $color_white;
|
|
|
+ }
|
|
|
+ .job {
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ border: none;
|
|
|
+ padding: 2rem;
|
|
|
+ position: relative;
|
|
|
+ &:hover {
|
|
|
+ text-shadow: 0 0 20px rgba($color_basic, .4);
|
|
|
+ }
|
|
|
+
|
|
|
+ + .job {
|
|
|
+ &::before {
|
|
|
+ border-top: 2px solid #fff;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% - 4rem);
|
|
|
+ display: inline-block;
|
|
|
+ top: 0;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.bigicon {
|
|
|
+ svg {
|
|
|
+ max-width: 100px;
|
|
|
+ max-height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ filter: drop-shadow(0 0 20px rgba($color_basic, .2));
|
|
|
+ }
|
|
|
+}
|
|
|
+code {
|
|
|
+ color: $color_brand_dark;
|
|
|
+}
|
|
|
+.accordion {
|
|
|
+
|
|
|
+
|
|
|
+ &.career{
|
|
|
+ p{
|
|
|
+ margin-bottom: 5px !important;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ strong{
|
|
|
+ font-size: 22px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ padding-left: 5px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+ .downloadimg{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .download{
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ margin-top: 30px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .downloadwrapper{
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background-color: $color_brand_dark;
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 25px;
|
|
|
+ margin-right: 10px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ --bs-accordion-border-radius: 0;
|
|
|
+ --bs-accordion-inner-border-radius: 0;
|
|
|
+ --bs-accordion-active-color: $color_brand;
|
|
|
+ --bs-accordion-active-bg: rgba($color_brand, .05);
|
|
|
+ border-top: 2px solid #000;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ margin-top: 40px;
|
|
|
+ .accordion-body{
|
|
|
+ padding: 0px 100px 20px 0px;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 0px 60px 20px 0px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding: 0px 30px 20px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-item{
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: solid #000 1px;
|
|
|
+ border-bottom: solid #000 2px;
|
|
|
+ border-left: none;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-button {
|
|
|
+ font-size: 25px;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: $font-weight-semibold;
|
|
|
+ padding: 20px 20px 20px 0px;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding: 17px 20px 17px 0px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ &.collapsed{
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '\F282';
|
|
|
+ @include icon;
|
|
|
+ color: $color_brand;
|
|
|
+ position: absolute;
|
|
|
+ right: 1rem;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ font-size: 1.25rem;
|
|
|
+ background-image: none;
|
|
|
+ }
|
|
|
+ &:not(.collapsed) {
|
|
|
+ box-shadow: none;
|
|
|
+ background-color: transparent;
|
|
|
+ &::after {
|
|
|
+ content: '\F282';
|
|
|
+ transform: rotate(-180deg) translate(15%,30%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.socialmedia {
|
|
|
+ .socialicon {
|
|
|
+ @media (max-width:767.98px) {
|
|
|
+ display: block !important;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
+ margin: 0 .5rem;
|
|
|
+ background: $color_brand;
|
|
|
+ @media (max-width:991.98px) {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ @media (max-width:575.98px) {
|
|
|
+ height: 70px;
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*@media (max-width:767.98px) {
|
|
|
+ padding: 2rem 0;
|
|
|
+ display: inline-block;
|
|
|
+ }*/
|
|
|
+ img, svg {
|
|
|
+ color: $color_white;
|
|
|
+ height: 65px;
|
|
|
+ width: auto;
|
|
|
+ @include center;
|
|
|
+
|
|
|
+ @media (max-width:991.98px) {
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ @media (max-width:575.98px) {
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ path {
|
|
|
+ fill: $color_white;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: $color_white;
|
|
|
+ border: 2px solid $color_brand;
|
|
|
+ img, svg {
|
|
|
+ path, polygon {
|
|
|
+ fill: $color_brand;
|
|
|
+ @include fade();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ background: #444;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ color: #135b3f;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .btn-link svg path {
|
|
|
+ &:hover{
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.careertext{
|
|
|
+ .contact{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ @media (max-width: 1199.98px){
|
|
|
+ align-items: unset;
|
|
|
+ flex-direction: unset;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ padding-left: 15px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contactimg{
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .contact{
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size: 25px !important;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ letter-spacing: 0.3px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconwrapper{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ width: 75px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ @media (max-width: 1599.98px) {
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 60px;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ width: 65px;
|
|
|
+ }
|
|
|
+ @media (max-width: 460.98px) {
|
|
|
+ width: 55px;
|
|
|
+ }
|
|
|
+ @media (max-width: 370.98px) {
|
|
|
+ width: 45px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contactwrapper{
|
|
|
+ width: 70%;
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 25px;
|
|
|
+ margin-right: 10px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icongrid{
|
|
|
+ margin-top: 70px;
|
|
|
+ .subline{
|
|
|
+ color: #000 !important;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 21px !important;
|
|
|
+ @media (max-width: 1599.98px) {
|
|
|
+ font-size: 20px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ font-size: 21px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 460.98px) {
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 370.98px) {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.grey-bg-section{
|
|
|
+ padding-top: 0px !important;
|
|
|
+ padding-bottom: 0px !important;
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .h2{
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .imgwrapper{
|
|
|
+ padding-right: 0px !important;
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+ .textwrapper{
|
|
|
+ padding-right: 30px !important;
|
|
|
+ padding-left: 30px !important;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ order: 1;
|
|
|
+ padding-top: 40px !important;
|
|
|
+ padding-bottom: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding-right: 20px !important;
|
|
|
+ padding-left: 15px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ padding-left: 1.75rem;
|
|
|
+
|
|
|
+ li {
|
|
|
+ font-weight: 500 !important;
|
|
|
+ line-height: 1.4;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ letter-spacing: normal;
|
|
|
+ &::before {
|
|
|
+ @include icon;
|
|
|
+ content: "\F285";
|
|
|
+ left: -1.75rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ul-long{
|
|
|
+ column-count: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.pink-bg-section{
|
|
|
+ padding-top: 0px !important;
|
|
|
+ padding-bottom: 0px !important;
|
|
|
+ background-color: $color_brand;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ border: #fff solid 2px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ &:hover{
|
|
|
+ border: #fff solid 2px;
|
|
|
+ background-color: #fff !important;
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .h2{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .imgwrapper{
|
|
|
+ padding-right: 0px !important;
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+ .textwrapper{
|
|
|
+ padding-right: 30px !important;
|
|
|
+ padding-left: 30px !important;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding-top: 40px !important;
|
|
|
+ padding-bottom: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding-right: 20px !important;
|
|
|
+ padding-left: 25px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.square-hover{
|
|
|
+ .image {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ transition: .5s ease;
|
|
|
+ background-color: #008CBA;
|
|
|
+ }
|
|
|
+ .container:hover .overlay {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ -ms-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.benefits-new{
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .card-wrapper{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+ .card{
|
|
|
+ width: 300px;
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+ .card-inner{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ padding-bottom: 100%;
|
|
|
+ transition: transform 0.6s;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+ .card:hover .card-inner{
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+ .card-front, .card-back{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ backface-visibility: hidden;
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .card-front{
|
|
|
+ background: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .card-back{
|
|
|
+ background: #587a9a;
|
|
|
+ color: #fff;
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ text-align: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: bottom 10px right 10px;
|
|
|
+ background-size: 50%;
|
|
|
+ }
|
|
|
+ .benefiticon{
|
|
|
+ width: 85px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .iconTile{
|
|
|
+ margin: 0px !important;
|
|
|
+ border: 5px #fff solid;
|
|
|
+ padding: 50px 30px 24px 30px !important;
|
|
|
+ }
|
|
|
+ picture{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .col-5{
|
|
|
+ flex: 0 0 20%;
|
|
|
+ max-width: 20%;
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ flex: 0 0 25%;
|
|
|
+ max-width: 25%;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ flex: 0 0 33%;
|
|
|
+ max-width: 33%;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ flex: 0 0 50%;
|
|
|
+ max-width: 50%;
|
|
|
+ }
|
|
|
+ @media (max-width: 450.98px) {
|
|
|
+ flex: 0 0 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ line-height: 1.35rem;
|
|
|
+ }
|
|
|
+ h2, .h2{
|
|
|
+ margin-bottom: 0.9rem;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ &.text{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.1rem;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .col-xl-3, .col-lg-3, .col-md-4, .col-sm-6, .col-12{
|
|
|
+ padding-right: 6px;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// CONTACT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.contact-teaser {
|
|
|
+ .anfahrt-textwrapper{
|
|
|
+ padding-top: 5%;
|
|
|
+ padding-bottom: 5%;
|
|
|
+ padding-right: 5%;
|
|
|
+
|
|
|
+ @media (min-width: 320px){
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 768px){
|
|
|
+ padding-left: 35px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1024px){
|
|
|
+ padding-left: 40px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1440px){
|
|
|
+ padding-left: 80px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2250px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2560px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.ml-0{
|
|
|
+ margin-left: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.textwrapper-teaser{
|
|
|
+
|
|
|
+ padding-right: 5%;
|
|
|
+
|
|
|
+ @media (min-width: 320px){
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 768px){
|
|
|
+ padding-left: 35px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1024px){
|
|
|
+ padding-left: 40px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1440px){
|
|
|
+ padding-left: 80px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2250px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2560px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.textwrapper-leistungen{
|
|
|
+
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ padding: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.teaser-info{
|
|
|
+
|
|
|
+
|
|
|
+ .teaser-text{
|
|
|
+ margin: 0px !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-wrapper{
|
|
|
+ color:#fff !important;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .teaser-icon{
|
|
|
+ height: 20px !important;
|
|
|
+ color: #fff !important;
|
|
|
+ padding-right: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .teaser-image-container{
|
|
|
+ position: relative;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ margin-bottom:0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .image{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-right: -15px;
|
|
|
+ margin-left: -15px;
|
|
|
+ }
|
|
|
+ .teaser-hover {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .hideshow {
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 95%;
|
|
|
+ top: 0;
|
|
|
+ text-align: left;
|
|
|
+ background-position-x: -15rem;
|
|
|
+ background: rgba(20, 91, 63, 0.90);
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex !important;
|
|
|
+ padding: 35px;
|
|
|
+ align-items: end;
|
|
|
+ justify-content: left;
|
|
|
+
|
|
|
+ @media (max-width: 1699.98px){
|
|
|
+ height:94%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1399.98px){
|
|
|
+ height:96%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ height:94.5%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ height:96.5%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ opacity: 1;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 320.98px){
|
|
|
+ padding: 35px 35px 20px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover{
|
|
|
+ opacity: 1;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.link-teaser-hover{
|
|
|
+ fill:#ffffff !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.link-teaser-contact{
|
|
|
+ fill:#000000 !important;
|
|
|
+ color: #000000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// SWIPER
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.swiper-horizontal>.swiper-pagination-progressbar,
|
|
|
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
|
|
|
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
|
|
|
+.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
|
|
+ top:inherit;
|
|
|
+ bottom: 0;
|
|
|
+ height: 3px;
|
|
|
+}
|
|
|
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
|
+ background: $color_brand;
|
|
|
+}
|
|
|
+@import 'default_navigation';
|
|
|
+@import 'default_form_powermail';
|
|
|
+@import 'default_form_formframework';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FONTS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+/* roboto-condensed-regular - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-500 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-600 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-700 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 700;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-800 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 800;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+/* roboto-condensed-900 - latin */
|
|
|
+@font-face {
|
|
|
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 900;
|
|
|
+ src: url('../Webfonts/roboto-condensed-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FONTWEIGHTS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+$font-weight-base: 500; // regular
|
|
|
+$font-weight-medium: 600; //medium
|
|
|
+$font-weight-semibold: 700; // semibold
|
|
|
+$font-weight-bold: 800; //bold
|
|
|
+$font-weight-black: 900; //extrabold
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FONTSIZES
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+@mixin font-size-base {
|
|
|
+ --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
|
|
|
+ font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important;
|
|
|
+}
|
|
|
+
|
|
|
+@mixin h1-font-size {
|
|
|
+ --min-size: 40;
|
|
|
+ --max-size: 100;
|
|
|
+}
|
|
|
+@mixin h2-font-size {
|
|
|
+ --min-size: 37;
|
|
|
+ --max-size: 48;
|
|
|
+}
|
|
|
+@mixin h3-font-size {
|
|
|
+ --min-size: 21;
|
|
|
+ --max-size: 26;
|
|
|
+}
|
|
|
+@mixin h4-font-size {
|
|
|
+ --min-size: 18;
|
|
|
+ --max-size: 24;
|
|
|
+}
|
|
|
+@mixin h5-font-size {
|
|
|
+ --min-size: 17;
|
|
|
+ --max-size: 22;
|
|
|
+}
|
|
|
+@mixin font-size-small {
|
|
|
+ --min-size: 13;
|
|
|
+ --max-size: 14;
|
|
|
+}
|
|
|
+@mixin font-size {
|
|
|
+ --min-size: 17;
|
|
|
+ --max-size: 19;
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// ROOT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+:root {
|
|
|
+ --swiper-theme-color: $color_brand;
|
|
|
+ // FÜR BUGFIX APPLE DEVICES 100vh
|
|
|
+ --app-height: 100%;
|
|
|
+
|
|
|
+ // FÜR SCHRIFTGRÖSSEN Breakpoints
|
|
|
+ --min-size: 16;
|
|
|
+ --max-size: 20;
|
|
|
+ --container-min: 320;
|
|
|
+ --container-max: 1600;
|
|
|
+ --viewport-min: 320;
|
|
|
+ --viewport-max: 1600;
|
|
|
+}
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// COLOURS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+$color_basic: #000000; // z.B. Schriftfarbe
|
|
|
+$color_brand: #F12C8C; // Unternehmens Farbe
|
|
|
+$color_brand_dark: #c92976; // Unternehmens Farbe
|
|
|
+$color_brand_light: #135B3F; // Unternehmens Farbe
|
|
|
+
|
|
|
+$color_transparent: rgba(0, 0, 0, 0);
|
|
|
+
|
|
|
+$color_lightgrey: #EFEFF0;
|
|
|
+$color_white: #ffffff;
|
|
|
+
|
|
|
+
|
|
|
+.color-white, .color_white,
|
|
|
+.text-light {
|
|
|
+ color: $color_white;
|
|
|
+ *, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
|
|
|
+ color: $color_white;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// HEADLINES // TEXT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+body {
|
|
|
+ overflow-x: hidden;
|
|
|
+ font-family: 'Roboto Condensed';
|
|
|
+ font-weight: $font-weight-base;
|
|
|
+ @include font-size-base;
|
|
|
+ @include font-size;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: $color_basic;
|
|
|
+ text-wrap: balance;
|
|
|
+ text-wrap: pretty;
|
|
|
+ letter-spacing: .1rem;
|
|
|
+ background-color: #EFEFF0;
|
|
|
+}
|
|
|
+
|
|
|
+@mixin headlinebasic {
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ color: $color_brand;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ display: block;
|
|
|
+ text-wrap: balance;
|
|
|
+ @include font-size-base;
|
|
|
+ letter-spacing: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
|
|
|
+ text-shadow: none;
|
|
|
+ @include headlinebasic();
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+h1, .h1 {
|
|
|
+ @include h1-font-size;
|
|
|
+
|
|
|
+}
|
|
|
+h2, .h2 {
|
|
|
+ @include h2-font-size;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ text-shadow: none;
|
|
|
+}
|
|
|
+h3, .h3 {
|
|
|
+ @include h3-font-size;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $color_brand;
|
|
|
+}
|
|
|
+h4, .h4 {
|
|
|
+ @include h4-font-size;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+}
|
|
|
+h5, .h5 {
|
|
|
+ @include h5-font-size;
|
|
|
+ line-height: 1.3;
|
|
|
+
|
|
|
+}
|
|
|
+.subline {
|
|
|
+ margin-bottom: 0;
|
|
|
+ color: $color_brand;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+@mixin icon {
|
|
|
+ font-family: bootstrap-icons !important;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal !important;
|
|
|
+ font-variant: normal;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+i, em {
|
|
|
+ &.bi {
|
|
|
+ @include icon;
|
|
|
+ }
|
|
|
+ font-style: italic;
|
|
|
+}
|
|
|
+
|
|
|
+b, strong {
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+}
|
|
|
+a {
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+small, .small, .text-small {
|
|
|
+ @include font-size-small;
|
|
|
+}
|
|
|
+$letter-spacing: .25rem;
|
|
|
+
|
|
|
+.letter-spacing {
|
|
|
+ letter-spacing: $letter-spacing;
|
|
|
+}
|
|
|
+$text-shadow: 0 0 20px rgba($color_basic, .2);
|
|
|
+.text-shadow {
|
|
|
+ text-shadow: $text-shadow;
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// COSTUM MIXINS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+@mixin vendor-prefix($name, $value){
|
|
|
+ @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', ''){
|
|
|
+ #{$vendor}#{$name}: #{$value};
|
|
|
+ }
|
|
|
+}
|
|
|
+@mixin masterfloat {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+@mixin center{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ @include vendor-prefix('transform', 'translate(-50%,-50%)');
|
|
|
+}
|
|
|
+@mixin vertical-center{
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ @include vendor-prefix('transform', 'translateY(-50%)');
|
|
|
+}
|
|
|
+@mixin horizontal-center{
|
|
|
+ position: relative;
|
|
|
+ left: 50%;
|
|
|
+ @include vendor-prefix('transform', 'translateX(-50%)');
|
|
|
+}
|
|
|
+
|
|
|
+@mixin fade {
|
|
|
+ @include vendor-prefix('transition', 'all 0.5s ease-in-out');
|
|
|
+}
|
|
|
+@mixin fade-fast {
|
|
|
+ @include vendor-prefix('transition', 'all 0.25s ease-in-out');
|
|
|
+}
|
|
|
+
|
|
|
+$border-radius: 50px;
|
|
|
+$box-shadow: 0 0 20px rgba($color_basic, .2);
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// BASIC RESETS
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+// Scrollbars
|
|
|
+* {
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: $color_brand transparent;
|
|
|
+}
|
|
|
+// Schreibweise Firefox // Webkit-Browser – getrennte Schreibweise erforderlich!!!
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: $color_brand;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-border-radius: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: $color_brand;
|
|
|
+}
|
|
|
+// Close Scrollbars
|
|
|
+
|
|
|
+.container {
|
|
|
+ @media (min-width: 1700px) {
|
|
|
+ max-width: 1640px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ padding-left: 15px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.container-fluid{
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ padding-left: 0px;
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+body, table, tr, td {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+* {
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active {
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+}
|
|
|
+a {
|
|
|
+ color: $color_brand;
|
|
|
+ //text-decoration: underline;
|
|
|
+ * {
|
|
|
+ color: $color_brand;
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ &:focus,
|
|
|
+ &:active,
|
|
|
+ &:link {
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+ &:active,
|
|
|
+ &:link {
|
|
|
+ color: $color_brand;
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ color: $color_brand_dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:focus {
|
|
|
+ outline: 0 !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+p, .p {
|
|
|
+ font-weight: 500 !important;
|
|
|
+ line-height: 1.6 !important;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ &:last-child, &:last-of-type {
|
|
|
+ margin-bottom: 0;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ }
|
|
|
+ + .btn {
|
|
|
+ margin-top: 2rem;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+::selection {
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+*::selection {
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+::-moz-selection{
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+*::-moz-selection {
|
|
|
+ background: $color_brand !important;
|
|
|
+ color: white !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// NAVIGATION
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.navbar {
|
|
|
+ @include fade;
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ padding: 0px !important;
|
|
|
+ .container{
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ max-width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-collapse{
|
|
|
+ padding-top: 23px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ padding-top: 25px;
|
|
|
+ padding-bottom: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-link {
|
|
|
+ color: #000000;
|
|
|
+ background: transparent !important;
|
|
|
+ &.active{
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ margin-top: 18px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ @media (max-width: 1199.98px){
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ &:hover{
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ &:active, .active{
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navi{
|
|
|
+ color:#000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-brand {
|
|
|
+ padding: 0px;
|
|
|
+ img,
|
|
|
+ .svg {
|
|
|
+ height: 100%;
|
|
|
+ @include fade;
|
|
|
+ @media (max-width: 1199.98px){
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ @media (max-width: 1099.98px){
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ height: 45.5px;
|
|
|
+ }
|
|
|
+ @media (max-width: 425.98px){
|
|
|
+ height: 39.5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .phone {
|
|
|
+ color: #000000;
|
|
|
+ padding-left: 10px;
|
|
|
+ height: 25px;
|
|
|
+ width: auto;
|
|
|
+ @media (max-width:425.98px){
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-toggler{
|
|
|
+ background-color: #f12b8c;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 13px;
|
|
|
+ border-radius: 0px;
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ padding: 11px;
|
|
|
+ }
|
|
|
+ @media (max-width: 425.98px){
|
|
|
+ padding: 8px 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wrapper{
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ svg path {
|
|
|
+ fill: #000 !important;
|
|
|
+ &:hover{
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-nav {
|
|
|
+ .nav-item {
|
|
|
+ .social-button{
|
|
|
+ .phone{
|
|
|
+ margin-top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-link {
|
|
|
+ color: #000 !important;
|
|
|
+ position: relative;
|
|
|
+ letter-spacing: 0.8px;
|
|
|
+ font-size: 20px;
|
|
|
+ padding-right: 13px;
|
|
|
+ padding-left: 13px;
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ color: #f12b8c !important;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #f12b8c !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.shrink {
|
|
|
+ @include fade;
|
|
|
+
|
|
|
+ & * {
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+ &.navbar {
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ box-shadow: $box-shadow;
|
|
|
+ padding-top: 0px;
|
|
|
+ padding-bottom: 0px;
|
|
|
+ .navbar-brand {
|
|
|
+ img,
|
|
|
+ .svg {
|
|
|
+ height: 99px !important;
|
|
|
+ }
|
|
|
+ svg {
|
|
|
+ height: 99px;
|
|
|
+ path {
|
|
|
+ fill: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-top {
|
|
|
+ opacity: 0;
|
|
|
+ max-height: 0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .btn-link {
|
|
|
+ background: transparent !important;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .search {
|
|
|
+ form {
|
|
|
+ button {
|
|
|
+ .nav-icon {
|
|
|
+ background-color: transparent;
|
|
|
+ color: $color_brand;
|
|
|
+ * {
|
|
|
+ color: $color_brand;
|
|
|
+ }
|
|
|
+ svg path {
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ form {
|
|
|
+ input {
|
|
|
+ border: 1px solid rgba($color_brand, .5);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.modal-open {
|
|
|
+ .btn-link {
|
|
|
+ .bi-list {
|
|
|
+ &::before {
|
|
|
+ content: '\F659';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.modal-fullscreen {
|
|
|
+ margin: 1.5rem auto;
|
|
|
+ width: calc(100vw - 3rem);
|
|
|
+ height: calc(100% - 3rem);
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// FOOTER
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+footer {
|
|
|
+
|
|
|
+ .container{
|
|
|
+ @media (max-width: 1099.98px) {
|
|
|
+ padding-left: 25px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding-left: 20px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-da{
|
|
|
+ height: 100%;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-phone {
|
|
|
+ height: 20px !important;
|
|
|
+ color:#ffffff;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-at {
|
|
|
+ height: 20px !important;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-weight: $font-weight-medium;
|
|
|
+ overflow: hidden;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ position: absolute;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ width: 130vw;
|
|
|
+ height: 130vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ a, a:link, a:active {
|
|
|
+ color: rgba($color_white,1);
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ img,
|
|
|
+ svg {
|
|
|
+ path {
|
|
|
+ fill: $color_white !important;
|
|
|
+ @include fade;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address {
|
|
|
+ img, svg {
|
|
|
+ height: 65px;
|
|
|
+ width: auto;
|
|
|
+
|
|
|
+ @media (max-width:991.98px){
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+ @media (max-width:767.98px){
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width:575.98px){
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ @media (max-width:425.98px){
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ @media (max-width:229.98px){
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ &.big {
|
|
|
+ @include headlinebasic;
|
|
|
+ @include h2-font-size;
|
|
|
+ line-height: 1.2;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ @include h3-font-size;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .quicknav {
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0.25rem 0;
|
|
|
+ @media (max-width:767.98px){
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .subfooter {
|
|
|
+
|
|
|
+ padding-top: 0px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+
|
|
|
+ @media (min-width:1700.98px){
|
|
|
+ padding-top: 30px;;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width:1199.98px){
|
|
|
+ padding-top: 30px;;
|
|
|
+ }
|
|
|
+ .footer-links{
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ @media (max-width:1399.98px){
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ @media (max-width:767.98px){
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ @media (max-width:575.98px){
|
|
|
+ width: 85%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ border-color: $color_white !important;
|
|
|
+
|
|
|
+ .text-light {
|
|
|
+ span{
|
|
|
+ letter-spacing: 0px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ &:hover {
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ color: $color_brand_light !important;
|
|
|
+ background-color:#fff;
|
|
|
+ border: #fff solid 1px;
|
|
|
+ }
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+ letter-spacing: 0px !important;
|
|
|
+ @media (max-width:767.98px){
|
|
|
+ display: block;
|
|
|
+ padding: .75rem;
|
|
|
+ border: 1px solid;
|
|
|
+ margin-top: 1rem;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ @media (min-width:768px){
|
|
|
+ content: '';
|
|
|
+ padding-left: 2rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.backtotop {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 1rem;
|
|
|
+ z-index: 5;
|
|
|
+ right: 0;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ background-color: $color_brand;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .subfooterlinks {
|
|
|
+ @media (max-width:991.98px) {
|
|
|
+ margin-top: 1.5rem !important;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ &::before {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .socialiconwrapper {
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ @media (max-width:1199.98px) {
|
|
|
+ margin-top: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width:991.98px) {
|
|
|
+ margin-top: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width:580.98px) {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .socialicon {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 2px solid $color_white;
|
|
|
+ margin-top: 0 !important;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ img, svg {
|
|
|
+ width: auto;
|
|
|
+ height: 25px;
|
|
|
+ @include center;
|
|
|
+
|
|
|
+ path {
|
|
|
+ fill: $color_white !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: $color_white;
|
|
|
+ img, svg {
|
|
|
+ path {
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & + .socialicon {
|
|
|
+ margin-left: 0.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// CONTENT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+
|
|
|
+// Effekte
|
|
|
+.blur {
|
|
|
+ @include vendor-prefix(backdrop-filter, blur(10px));
|
|
|
+}
|
|
|
+.hyphens {
|
|
|
+ @include vendor-prefix('hyphens', 'auto');
|
|
|
+}
|
|
|
+.color_brand {
|
|
|
+ color: $color_brand !important;
|
|
|
+}
|
|
|
+.bg_brand {
|
|
|
+ background-color: $color_brand !important;
|
|
|
+ color: $color_white;
|
|
|
+}
|
|
|
+.bg_secondary, .bg-secondary {
|
|
|
+ background-color:#ffffff;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_footer {
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ p{
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bg_grey {
|
|
|
+ background-color: $color_lightgrey !important;
|
|
|
+}
|
|
|
+
|
|
|
+// Buttons
|
|
|
+.btn {
|
|
|
+ border: none;
|
|
|
+ @include font-size-base;
|
|
|
+ @include font-size;
|
|
|
+ font-weight: $font-weight-base;
|
|
|
+ padding: 1rem 2rem;
|
|
|
+ margin-top: 2rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+
|
|
|
+ &:focus,
|
|
|
+ &:active,
|
|
|
+ &.show {
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.btn-primary, .btn-default {
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ border-radius: 0px !important;
|
|
|
+ color: #fff !important;
|
|
|
+ border:3px solid $color_brand_light;
|
|
|
+ padding: 8px 43px 8px 43px;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 8px 23px 8px 23px;
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: $color_transparent !important;
|
|
|
+ border:3px solid $color_brand_light !important;
|
|
|
+ color: $color_brand_light !important;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background-color: $color_transparent;
|
|
|
+ border:3px solid $color_brand_light;
|
|
|
+ color: $color_brand_light !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-outline-light {
|
|
|
+ border: 2px solid $color_white;
|
|
|
+}
|
|
|
+.btn-outline-default {
|
|
|
+ border: 2px solid $color_brand;
|
|
|
+}
|
|
|
+.btn-link {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+// Dropdowns
|
|
|
+.dropdown-toggle {
|
|
|
+ &::after {
|
|
|
+ @include icon();
|
|
|
+ content: '\F282';
|
|
|
+ border: none;
|
|
|
+ vertical-align: baseline;
|
|
|
+ font-size: 65%;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dropdown-item {
|
|
|
+ color: $color_basic;
|
|
|
+ &:focus,
|
|
|
+ &:hover {
|
|
|
+ color: $color_brand;
|
|
|
+ background-color: $color_brand_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Content
|
|
|
+
|
|
|
+section, .section,
|
|
|
+footer {
|
|
|
+ @include masterfloat();
|
|
|
+}
|
|
|
+section,
|
|
|
+.section {
|
|
|
+ padding-top: 150px;
|
|
|
+ padding-bottom: 150px;
|
|
|
+ @media (max-width: 1099.98px) {
|
|
|
+ padding-top: 120px;
|
|
|
+ padding-bottom: 120px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+ ul, ol {
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ color: $color_brand;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // unorderd
|
|
|
+ ul {
|
|
|
+ padding-left: 1.75rem;
|
|
|
+ li {
|
|
|
+ &::before {
|
|
|
+ @include icon;
|
|
|
+ content: "\F633";
|
|
|
+ left: -1.75rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ top: 0.2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // orderd
|
|
|
+ ol {
|
|
|
+ counter-reset: section; /* Creates a new instance of the section counter with each ol element */
|
|
|
+ padding-left: 1.5rem;
|
|
|
+ li {
|
|
|
+ margin-left: 0rem;
|
|
|
+ &::before {
|
|
|
+ counter-increment: section; /* Increments only this instance of the section counter */
|
|
|
+ content: counters(section, ".") ". "; /* Combines the values of all instances of the section counter, separated by a period */
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ //margin-left: calc(-40px - 0.5rem);
|
|
|
+ //width: 40px;
|
|
|
+ text-align: right;
|
|
|
+ color: $color_brand;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.two-column {
|
|
|
+ column-count: 2;
|
|
|
+ column-gap: 45px;
|
|
|
+ @include vendor-prefix('hyphens', 'auto');
|
|
|
+ @media (max-width: 1099.98px) {
|
|
|
+ column-count: 1 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.titlearea {
|
|
|
+ &.small{
|
|
|
+ height: 60vh !important;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ height: 70vh !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ height: 100vh !important;
|
|
|
+ }
|
|
|
+ .textwrapper{
|
|
|
+ margin-left: 12px;
|
|
|
+ margin-right: 12px;
|
|
|
+ padding: 15px 25px !important;
|
|
|
+ background: rgba(241,43,140,0.70);
|
|
|
+ width: auto !important;
|
|
|
+ margin-bottom: 4rem;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ margin-left: 17px;
|
|
|
+ margin-right: 17px;
|
|
|
+ }
|
|
|
+ .h1{
|
|
|
+ letter-spacing: 1px;
|
|
|
+ line-height: 1.2;
|
|
|
+ text-shadow: none;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ font-size: 60px !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ display: flex;
|
|
|
+ text-transform: none !important;
|
|
|
+ align-items: center;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 50px !important;
|
|
|
+ line-height: 1.1;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 35px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ padding-right: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 23px;
|
|
|
+ line-height: 1.6;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ padding-right: 18px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .openingtimes{
|
|
|
+ padding: 0px !important;
|
|
|
+ background: rgba(241,43,140,0.55);
|
|
|
+ .h1{
|
|
|
+ text-shadow: none;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ font-size: 50px !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 30px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #fff;
|
|
|
+ text-shadow: none;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ font-size: 30px !important;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 27px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 40px !important;
|
|
|
+ margin-right: 20px;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 35px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 29px !important;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.bottom-0 {
|
|
|
+ bottom: 70px !important;
|
|
|
+ }
|
|
|
+ .openingtimeswrapper{
|
|
|
+ padding: 25px;
|
|
|
+ }
|
|
|
+ .phonewrapper{
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 10px 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .h1{
|
|
|
+ text-shadow: 0px 0px 25px #000;
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ text-shadow: 0px 0px 15px #000;
|
|
|
+ }
|
|
|
+ @include masterfloat();
|
|
|
+ //height: 100vh;
|
|
|
+ height: var(--app-height);
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 0 !important;
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+ &.half {
|
|
|
+ height: 650px;
|
|
|
+ max-height: 75vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ picture {
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ @include center;
|
|
|
+ background-color: rgba($color_basic,.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
+ //height: 100vh;
|
|
|
+ height: var(--app-height);
|
|
|
+
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.text-image {
|
|
|
+ background-image: url(https://www.emsa.com/fileadmin/media/inspirationen/drink2go/eco/teaser-emsa-drink2go-auswahlhilfe.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .container {
|
|
|
+ .row {
|
|
|
+
|
|
|
+ //&:nth-child(odd),
|
|
|
+ &.flex-row-reverse {
|
|
|
+ flex-direction: row-reverse!important;
|
|
|
+
|
|
|
+ .textwrapper {
|
|
|
+ padding-right: 1.5rem;
|
|
|
+ padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.section {
|
|
|
+ float: none;
|
|
|
+ width: auto;
|
|
|
+ &:first-of-type,
|
|
|
+ + .section {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.text-image-background {
|
|
|
+ background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .container {
|
|
|
+ .row {
|
|
|
+
|
|
|
+ //&:nth-child(odd),
|
|
|
+ &.flex-row-reverse {
|
|
|
+ flex-direction: row-reverse!important;
|
|
|
+
|
|
|
+ .textwrapper {
|
|
|
+ padding-right: 1.5rem;
|
|
|
+ padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.section {
|
|
|
+ float: none;
|
|
|
+ width: auto;
|
|
|
+ &:first-of-type,
|
|
|
+ + .section {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.teasergrid {
|
|
|
+ .teaser {
|
|
|
+ &.square {
|
|
|
+ .squarewrapper {
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba($color_brand,.28);
|
|
|
+ //background: $color_brand;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ //mix-blend-mode: multiply;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ padding-top: 100%;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ object-fit: cover;
|
|
|
+ @include center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.jobs {
|
|
|
+ border-radius: 0;
|
|
|
+ * {
|
|
|
+ color: $color_white;
|
|
|
+ }
|
|
|
+ .job {
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ border: none;
|
|
|
+ padding: 2rem;
|
|
|
+ position: relative;
|
|
|
+ &:hover {
|
|
|
+ text-shadow: 0 0 20px rgba($color_basic, .4);
|
|
|
+ }
|
|
|
+
|
|
|
+ + .job {
|
|
|
+ &::before {
|
|
|
+ border-top: 2px solid #fff;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% - 4rem);
|
|
|
+ display: inline-block;
|
|
|
+ top: 0;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.bigicon {
|
|
|
+ svg {
|
|
|
+ max-width: 100px;
|
|
|
+ max-height: 100px;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ filter: drop-shadow(0 0 20px rgba($color_basic, .2));
|
|
|
+ }
|
|
|
+}
|
|
|
+code {
|
|
|
+ color: $color_brand_dark;
|
|
|
+}
|
|
|
+.accordion {
|
|
|
+
|
|
|
+
|
|
|
+ &.career{
|
|
|
+ p{
|
|
|
+ margin-bottom: 5px !important;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ strong{
|
|
|
+ font-size: 22px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ padding-left: 5px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+ .downloadimg{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .download{
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ margin-top: 30px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .downloadwrapper{
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background-color: $color_brand_dark;
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 25px;
|
|
|
+ margin-right: 10px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ --bs-accordion-border-radius: 0;
|
|
|
+ --bs-accordion-inner-border-radius: 0;
|
|
|
+ --bs-accordion-active-color: $color_brand;
|
|
|
+ --bs-accordion-active-bg: rgba($color_brand, .05);
|
|
|
+ border-top: 2px solid #000;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ margin-top: 40px;
|
|
|
+ .accordion-body{
|
|
|
+ padding: 0px 100px 20px 0px;
|
|
|
+ letter-spacing: normal !important;
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ padding: 0px 60px 20px 0px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding: 0px 30px 20px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .accordion-item{
|
|
|
+ background-color: transparent;
|
|
|
+ border-top: solid #000 1px;
|
|
|
+ border-bottom: solid #000 2px;
|
|
|
+ border-left: none;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ .optik{
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ color: #000;
|
|
|
+ text-transform: uppercase;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 7px;
|
|
|
+ }
|
|
|
+ .accordion-button {
|
|
|
+ font-size: 25px;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: $font-weight-semibold;
|
|
|
+ padding: 20px 20px 20px 0px;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding: 17px 20px 17px 0px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ &.collapsed{
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '\F282';
|
|
|
+ @include icon;
|
|
|
+ color: $color_brand;
|
|
|
+ position: absolute;
|
|
|
+ right: 1rem;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ font-size: $h3-font-size;
|
|
|
+ background-image: none;
|
|
|
+ }
|
|
|
+ &:not(.collapsed) {
|
|
|
+ box-shadow: none;
|
|
|
+ background-color: transparent;
|
|
|
+ &::after {
|
|
|
+ content: '\F282';
|
|
|
+ transform: rotate(-180deg) translate(15%,30%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.socialmedia {
|
|
|
+ .socialicon {
|
|
|
+ @media (max-width:767.98px) {
|
|
|
+ display: block !important;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
+ margin: 0 .5rem;
|
|
|
+ background: $color_brand;
|
|
|
+ @media (max-width:991.98px) {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ @media (max-width:575.98px) {
|
|
|
+ height: 70px;
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*@media (max-width:767.98px) {
|
|
|
+ padding: 2rem 0;
|
|
|
+ display: inline-block;
|
|
|
+ }*/
|
|
|
+ img, svg {
|
|
|
+ color: $color_white;
|
|
|
+ height: 65px;
|
|
|
+ width: auto;
|
|
|
+ @include center;
|
|
|
+
|
|
|
+ @media (max-width:991.98px) {
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ @media (max-width:575.98px) {
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ path {
|
|
|
+ fill: $color_white;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: $color_white;
|
|
|
+ border: 2px solid $color_brand;
|
|
|
+ img, svg {
|
|
|
+ path, polygon {
|
|
|
+ fill: $color_brand;
|
|
|
+ @include fade();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ background: #444;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ color: #135b3f;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .btn-link svg path {
|
|
|
+ &:hover{
|
|
|
+ fill: $color_brand !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.careertext{
|
|
|
+
|
|
|
+ .container{
|
|
|
+ @media (max-width: 575.98px)
|
|
|
+ {
|
|
|
+ padding-left: 15px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contactimg{
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .contact{
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size: 25px !important;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ letter-spacing: 0.3px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconwrapper{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ width: 75px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ @media (max-width: 1599.98px) {
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 60px;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ width: 65px;
|
|
|
+ }
|
|
|
+ @media (max-width: 460.98px) {
|
|
|
+ width: 55px;
|
|
|
+ }
|
|
|
+ @media (max-width: 370.98px) {
|
|
|
+ width: 45px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contactwrapper{
|
|
|
+ width: 70%;
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 25px;
|
|
|
+ margin-right: 10px;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icongrid{
|
|
|
+ margin-top: 70px;
|
|
|
+ .subline{
|
|
|
+ color: #000 !important;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 21px !important;
|
|
|
+ @media (max-width: 1599.98px) {
|
|
|
+ font-size: 20px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ font-size: 21px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 460.98px) {
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 370.98px) {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.grey-bg-section{
|
|
|
+ padding-top: 0px !important;
|
|
|
+ padding-bottom: 0px !important;
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .h2{
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .imgwrapper{
|
|
|
+ padding-right: 0px !important;
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+ .textwrapper{
|
|
|
+ padding-right: 30px !important;
|
|
|
+ padding-left: 30px !important;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ order: 1;
|
|
|
+ padding-top: 40px !important;
|
|
|
+ padding-bottom: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding-right: 20px !important;
|
|
|
+ padding-left: 15px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ padding-left: 1.75rem;
|
|
|
+
|
|
|
+ li {
|
|
|
+ font-weight: 500 !important;
|
|
|
+ line-height: 1.4;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ letter-spacing: normal;
|
|
|
+ &::before {
|
|
|
+ @include icon;
|
|
|
+ content: "\F285";
|
|
|
+ left: -1.75rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ul-long{
|
|
|
+ column-count: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.pink-bg-section{
|
|
|
+ padding-top: 0px !important;
|
|
|
+ padding-bottom: 0px !important;
|
|
|
+ background-color: $color_brand;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ border: #fff solid 2px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ &:hover{
|
|
|
+ border: #fff solid 2px !important;
|
|
|
+ background-color: #fff !important;
|
|
|
+ color: $color_brand !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .h2{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .imgwrapper{
|
|
|
+ padding-right: 0px !important;
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+ .textwrapper{
|
|
|
+ padding-right: 30px !important;
|
|
|
+ padding-left: 30px !important;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ padding-top: 40px !important;
|
|
|
+ padding-bottom: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ padding-right: 20px !important;
|
|
|
+ padding-left: 25px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.square-hover{
|
|
|
+ .image {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ transition: .5s ease;
|
|
|
+ background-color: #008CBA;
|
|
|
+ }
|
|
|
+ .container:hover .overlay {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: white;
|
|
|
+ font-size: 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ -ms-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.benefits-new{
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .card-wrapper{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+ .card{
|
|
|
+ width: 300px;
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+ .card-inner{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ padding-bottom: 100%;
|
|
|
+ transition: transform 0.6s;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+ .card:hover .card-inner{
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+ .card-front, .card-back{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ backface-visibility: hidden;
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .card-front{
|
|
|
+ background: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .card-back{
|
|
|
+ background: #587a9a;
|
|
|
+ color: #fff;
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ text-align: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: bottom 10px right 10px;
|
|
|
+ background-size: 50%;
|
|
|
+ }
|
|
|
+ .benefiticon{
|
|
|
+ width: 85px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .iconTile{
|
|
|
+ margin: 0px !important;
|
|
|
+ border: 5px #fff solid;
|
|
|
+ padding: 50px 30px 24px 30px !important;
|
|
|
+ }
|
|
|
+ picture{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .col-5{
|
|
|
+ flex: 0 0 20%;
|
|
|
+ max-width: 20%;
|
|
|
+ @media (max-width: 1199.98px) {
|
|
|
+ flex: 0 0 25%;
|
|
|
+ max-width: 25%;
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ flex: 0 0 33%;
|
|
|
+ max-width: 33%;
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ flex: 0 0 50%;
|
|
|
+ max-width: 50%;
|
|
|
+ }
|
|
|
+ @media (max-width: 450.98px) {
|
|
|
+ flex: 0 0 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ line-height: 1.35rem;
|
|
|
+ }
|
|
|
+ h2, .h2{
|
|
|
+ margin-bottom: 0.9rem;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ &.text{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0.1rem;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ padding-left: 15px;
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .col-xl-3, .col-lg-3, .col-md-4, .col-sm-6, .col-12{
|
|
|
+ padding-right: 6px;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// CONTACT
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.contact-teaser {
|
|
|
+ padding-left:0px !important;
|
|
|
+ padding-top: 0px !important;
|
|
|
+ padding-bottom: 0px !important;
|
|
|
+
|
|
|
+ .icon-phone-contact {
|
|
|
+ height: 20px !important;
|
|
|
+ color:#000000 !important;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-at-contact {
|
|
|
+ height: 20px !important;
|
|
|
+ padding-right: 5px;
|
|
|
+ color:#000000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-img{
|
|
|
+ padding-right: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ table {
|
|
|
+ border:0px;
|
|
|
+ letter-spacing:normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ td{
|
|
|
+ text-align: left;
|
|
|
+ padding-top:2px;
|
|
|
+ padding-bottom:2px;
|
|
|
+ padding-right:25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openingtimes{
|
|
|
+ &.col-xl-6{
|
|
|
+ @media (max-width: 1299.98px) {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ background-color: $color_brand;
|
|
|
+ color:#ffffff;
|
|
|
+ padding-left:0px !important;
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openingtimes-wrapper{
|
|
|
+ padding:3rem;
|
|
|
+ @media (min-width: 320px){
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 768px){
|
|
|
+ padding-left: 35px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-person {
|
|
|
+ padding-right: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact {
|
|
|
+ @media (max-width: 1199.98px){
|
|
|
+ width: 50%
|
|
|
+ }
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ width: 50%
|
|
|
+ }
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ width: 100%
|
|
|
+ }
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ color:#000000;
|
|
|
+ padding-right:0px;
|
|
|
+ padding-left: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-wrapper{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ padding-top: 50px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ padding-left: 15px;
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ background-color: $color_lightgrey;
|
|
|
+ padding: 20px !important;
|
|
|
+ padding-left: 15px !important;
|
|
|
+ position: relative !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .anfahrt-textwrapper{
|
|
|
+ padding-top: 5%;
|
|
|
+ padding-bottom: 5%;
|
|
|
+ padding-right: 5%;
|
|
|
+
|
|
|
+ @media (min-width: 320px){
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 768px){
|
|
|
+ padding-left: 35px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1024px){
|
|
|
+ padding-left: 40px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1440px){
|
|
|
+ padding-left: 80px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2250px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2560px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ background-image: url(http://dummy.cybob.com//10360_Hehmann/dummy_hehmann/packages/default_site_package/Resources/Public/Images/hehmann-karte.jpg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .container {
|
|
|
+ .row {
|
|
|
+
|
|
|
+ //&:nth-child(odd),
|
|
|
+ &.flex-row-reverse {
|
|
|
+ flex-direction: row-reverse!important;
|
|
|
+
|
|
|
+ .textwrapper {
|
|
|
+ padding-right: 1.5rem;
|
|
|
+ padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.section {
|
|
|
+ float: none;
|
|
|
+ width: auto;
|
|
|
+ &:first-of-type,
|
|
|
+ + .section {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ml-0{
|
|
|
+ margin-left: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.textwrapper-teaser{
|
|
|
+
|
|
|
+ padding-right: 5%;
|
|
|
+
|
|
|
+ @media (min-width: 320px){
|
|
|
+ padding-left: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 768px){
|
|
|
+ padding-left: 35px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1024px){
|
|
|
+ padding-left: 40px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1440px){
|
|
|
+ padding-left: 80px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2250px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 2560px){
|
|
|
+ padding-left: 460px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.textwrapper-leistungen{
|
|
|
+
|
|
|
+ @media (min-width: 992px) {
|
|
|
+ padding: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.teaser-info{
|
|
|
+
|
|
|
+
|
|
|
+ .teaser-text{
|
|
|
+ margin: 0px !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-wrapper{
|
|
|
+ color:#fff !important;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .teaser-icon{
|
|
|
+ height: 20px !important;
|
|
|
+ color: #fff !important;
|
|
|
+ padding-right: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .teaser-image-container{
|
|
|
+ position: relative;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ margin-bottom:0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .image{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-right: -15px;
|
|
|
+ margin-left: -15px;
|
|
|
+ }
|
|
|
+ .teaser-hover {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .hideshow {
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 95%;
|
|
|
+ top: 0;
|
|
|
+ text-align: left;
|
|
|
+ background-position-x: -15rem;
|
|
|
+ background: rgba(20, 91, 63, 0.90);
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex !important;
|
|
|
+ padding: 35px;
|
|
|
+ align-items: end;
|
|
|
+ justify-content: left;
|
|
|
+
|
|
|
+ @media (max-width: 1699.98px){
|
|
|
+ height:94%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1399.98px){
|
|
|
+ height:96%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 991.98px){
|
|
|
+ height:94.5%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 767.98px){
|
|
|
+ height:96.5%
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 575.98px){
|
|
|
+ opacity: 1;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 320.98px){
|
|
|
+ padding: 35px 35px 20px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover{
|
|
|
+ opacity: 1;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.link-teaser-hover{
|
|
|
+ fill:#ffffff !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.link-teaser-contact{
|
|
|
+ fill:#000000 !important;
|
|
|
+ color: #000000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+// SWIPER
|
|
|
+/////////////////////////////////////////////////////
|
|
|
+.swiper-horizontal>.swiper-pagination-progressbar,
|
|
|
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
|
|
|
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
|
|
|
+.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
|
|
|
+ top:inherit;
|
|
|
+ bottom: 0;
|
|
|
+ height: 3px;
|
|
|
+}
|
|
|
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
|
|
+ background: $color_brand;
|
|
|
+}
|
|
|
+@import 'default_navigation';
|
|
|
+@import 'default_form_powermail';
|
|
|
+@import 'default_form_formframework';
|
|
|
+
|
|
|
+
|
|
|
+.swiper-button-next,
|
|
|
+.swiper-button-prev {
|
|
|
+ color: $color_brand;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-button-next:after,
|
|
|
+.swiper-button-prev:after {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-button-prev {
|
|
|
+ left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-button-next {
|
|
|
+ right: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination-bullet{
|
|
|
+ background-color: #ffffff;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination-bullet-active{
|
|
|
+ background-color:$color_brand !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.headslider{
|
|
|
+ padding: 0px !important;
|
|
|
+ .openingtimes{
|
|
|
+ z-index: 9;
|
|
|
+ bottom: 100px;
|
|
|
+ position: absolute;
|
|
|
+ padding: 0px !important;
|
|
|
+ background: rgba(241,43,140,0.55);
|
|
|
+ .h1{
|
|
|
+ text-shadow: none;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ font-size: 50px !important;
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ font-size: 40px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 30px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .subline{
|
|
|
+ color: #fff;
|
|
|
+ text-shadow: none;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ font-size: 30px !important;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 27px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tr, td{
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .svg{
|
|
|
+ width: 40px !important;
|
|
|
+ margin-right: 20px;
|
|
|
+ @media (max-width: 991.98px) {
|
|
|
+ width: 35px !important;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ width: 29px !important;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.bottom-0 {
|
|
|
+ bottom: 70px !important;
|
|
|
+ }
|
|
|
+ .openingtimeswrapper{
|
|
|
+ padding: 25px;
|
|
|
+ }
|
|
|
+ .phonewrapper{
|
|
|
+ background-color: $color_brand;
|
|
|
+ padding: 10px 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-slide{
|
|
|
+ img{
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ td{
|
|
|
+ padding-right: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 23px;
|
|
|
+ line-height: 1.6;
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ font-size: 20px;
|
|
|
+ padding-right: 18px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-prev{
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-next{
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ right: 30px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-pagination-bullet{
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ margin: 0px 6px 20px 6px !important;
|
|
|
+ border-radius: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.referenzslider{
|
|
|
+ background-color: #fff !important;
|
|
|
+ .swiper-button-prev{
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-next{
|
|
|
+ @media (max-width: 767.98px) {
|
|
|
+ right: 30px;
|
|
|
+ }
|
|
|
+ @media (max-width: 575.98px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+span{
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
