@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700");
html {
font-size: 16px;
}
@media screen and (max-width: 700px) {
html {
font-size: 14px;
}
}
body {
font-family: 'PT Sans', sans-serif;
color: #646363;
overflow-x: hidden;
}
h1 {
font-size: 4.5rem;
font-weight: 100;
}
@media (max-width: 950px) {
h1 {
font-size: 3.5rem;
}
}
@media screen and (max-width: 700px) {
h1 {
font-size: 2.5rem;
}
}
h2 {
color: #fdc300;
font-size: 3.5rem;
font-weight: 100;
}
@media screen and (max-width: 700px) {
h2 {
font-size: 2.5rem;
}
}
p, a {
font-size: 1.25rem;
}
ul {
font-size: 1.25rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
text-align: left;
}
table {
margin-left: auto;
margin-right: auto;
font-size: 1.25rem;
}
#site-navigation {
position: fixed;
width: 100%;
top: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
left: 0;
z-index: 1000;
background-color: #646363;
padding: 4rem 0 4rem 0;
transition: .4s ease;
}
#site-navigation .logo {
width: 15%;
position: absolute;
top: 1rem;
right: 2rem;
}
#site-navigation .logo img {
width: 100%;
}
#site-navigation .shop-icon {
position: absolute;
top: .5rem;
left: 8px;
}
#site-navigation .shop-icon img {
height: 36px;
}
#site-navigation #primary-menu {
display: -ms-flexbox;
display: flex;
list-style: none;
padding: 0;
margin: 0;
transition: .3s ease;
margin-left: auto;
margin-right: auto;
width: 100%;
-ms-flex-pack: distribute;
justify-content: space-around;
}
#site-navigation #primary-menu > li {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
#site-navigation #primary-menu > li > a {
font-size: 1.4rem;
font-weight: 400;
}
#site-navigation #primary-menu li, #site-navigation #primary-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#site-navigation #primary-menu a {
color: white;
}
#site-navigation #menu-toggle {
width: 150px;
height: 150px;
position: absolute;
right: 0;
border: solid 1px white;
cursor: pointer;
top: calc(100% - 4rem);
cursor: pointer;
z-index: 99;
-webkit-transform: scale(0.75);
transform: scale(0.75);
opacity: 1;
background-color: #fdc300;
border-radius: 100%;
transition: .25s ease-in-out all;
}
#site-navigation #menu-toggle * {
transition: .25s ease-in-out;
}
#site-navigation #menu-toggle #hamburger {
position: absolute;
height: 100%;
width: 100%;
top: 3rem;
}
#site-navigation #menu-toggle #hamburger span {
background-color: white;
display: block;
border-radius: 2px;
width: 60px;
height: 4px;
position: relative;
top: 24px;
margin: 10px 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#site-navigation #menu-toggle #hamburger span:nth-child(1) {
width: 8rem;
transition-delay: .5s;
}
#site-navigation #menu-toggle #hamburger span:nth-child(2) {
width: 6rem;
transition-delay: .625s;
}
#site-navigation #menu-toggle #hamburger span:nth-child(3) {
transition-delay: .75s;
width: 4rem;
}
#site-navigation #menu-toggle #cross {
position: absolute;
height: 100%;
width: 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#site-navigation #menu-toggle #cross span {
background-color: white;
display: block;
border-radius: 2px;
}
#site-navigation #menu-toggle #cross span:nth-child(1) {
height: 0%;
width: 4px;
position: absolute;
top: 26%;
left: 80px;
transition-delay: 0s;
}
#site-navigation #menu-toggle #cross span:nth-child(2) {
width: 0%;
height: 4px;
position: absolute;
left: 26%;
top: 80px;
transition-delay: .25s;
}
#site-navigation #menu-toggle .text {
color: white;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
font-size: 1.25rem;
opacity: 0;
transition: all ease .3s;
}
body.menu-open #site-navigation #menu-toggle {
background-color: #646363;
}
body.menu-open #site-navigation #menu-toggle #hamburger span {
width: 0%;
}
body.menu-open #site-navigation #menu-toggle #hamburger span:nth-child(1) {
transition-delay: 0s;
}
body.menu-open #site-navigation #menu-toggle #hamburger span:nth-child(2) {
transition-delay: .125s;
}
body.menu-open #site-navigation #menu-toggle #hamburger span:nth-child(3) {
transition-delay: .25s;
}
body.menu-open #site-navigation #menu-toggle #cross span:nth-child(1) {
height: 60%;
transition-delay: .625s;
}
body.menu-open #site-navigation #menu-toggle #cross span:nth-child(2) {
width: 60%;
transition-delay: .375s;
}
body.in_main #menu-toggle .text, body.in_main #mobile-toggle .text {
opacity: 0 !important;
}
@media screen and (max-width: 850px) {
#site-navigation {
display: none;
}
}
#menu_mobile {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 100%;
opacity: 0;
background-color: #fdc300;
z-index: 10000;
color: white;
padding: 7rem 1rem 1rem 1rem;
transition: .4s all ease;
pointer-events: none;
}
#menu_mobile ul, #menu_mobile li {
margin: 0;
padding: 0;
color: white;
list-style-type: none;
}
#menu_mobile ul a, #menu_mobile li a {
color: white;
display: block !important;
}
#menu_mobile ul a:hover, #menu_mobile li a:hover {
color: white;
}
#menu_mobile .menu {
width: auto;
}
#menu_mobile .menu > li {
position: relative;
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
#menu_mobile .menu > li > a {
font-size: 1.4rem;
text-align: center;
padding: 1rem;
}
#menu_mobile .menu > li .sub-menu {
display: none;
width: 100%;
background-color: rgba(255, 255, 255, 0.05);
}
#menu_mobile .menu > li .sub-menu a {
padding: .5rem;
border-top: solid 1px rgba(255, 255, 255, 0.4);
}
#menu_mobile .menu .menu-item-has-children .toggle {
display: block !important;
position: absolute;
right: 0;
top: 0;
width: 4rem;
height: 4rem;
}
#menu_mobile .menu .menu-item-has-children .toggle::after {
position: absolute;
width: 1rem;
height: 1rem;
content: '';
top: 50%;
left: 50%;
border-right: 1px solid white;
border-bottom: 1px solid white;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
transition: .3s ease;
}
#menu_mobile .menu .menu-item-has-children.open .toggle::after {
-webkit-transform: translate(-50%, -50%) rotate(225deg);
transform: translate(-50%, -50%) rotate(225deg);
}
#menu_mobile .logo {
width: 35%;
position: absolute;
bottom: 1rem;
right: 1rem;
}
#menu_mobile .logo img {
width: 100%;
}
#mobile-toggle {
width: 140px;
height: 140px;
position: fixed;
right: -20px;
top: -5rem;
cursor: pointer;
z-index: 999999;
opacity: 0;
-webkit-transform: scale(0.75);
transform: scale(0.75);
background-color: #fdc300;
border-radius: 100%;
}
#mobile-toggle * {
transition: .25s ease-in-out;
}
#mobile-toggle #hamburger {
position: absolute;
height: 100%;
width: 100%;
top: 4rem;
}
#mobile-toggle #hamburger span {
background-color: white;
display: block;
border-radius: 2px;
width: 60px;
height: 4px;
position: relative;
top: 24px;
margin: 10px 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#mobile-toggle #hamburger span:nth-child(1) {
width: 8rem;
transition-delay: .5s;
}
#mobile-toggle #hamburger span:nth-child(2) {
width: 4rem;
transition-delay: .625s;
}
#mobile-toggle #hamburger span:nth-child(3) {
transition-delay: .75s;
width: 1rem;
}
#mobile-toggle #cross {
position: absolute;
height: 100%;
width: 100%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 1.5rem;
}
#mobile-toggle #cross span {
background-color: white;
display: block;
border-radius: 2px;
}
#mobile-toggle #cross span:nth-child(1) {
height: 0%;
width: 4px;
position: absolute;
top: 34%;
left: 80px;
transition-delay: 0s;
}
#mobile-toggle #cross span:nth-child(2) {
width: 0%;
height: 4px;
position: absolute;
left: 34%;
top: 80px;
transition-delay: .25s;
}
#mobile-toggle .text {
color: white;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
font-size: 1.25rem;
opacity: 0;
}
#mobile-toggle.open #hamburger span {
width: 0%;
}
#mobile-toggle.open #hamburger span:nth-child(1) {
transition-delay: 0s;
}
#mobile-toggle.open #hamburger span:nth-child(2) {
transition-delay: .125s;
}
#mobile-toggle.open #hamburger span:nth-child(3) {
transition-delay: .25s;
}
#mobile-toggle.open #cross span:nth-child(1) {
height: 50%;
transition-delay: .625s;
}
#mobile-toggle.open #cross span:nth-child(2) {
width: 50%;
transition-delay: .375s;
}
@media screen and (max-width: 850px) {
#mobile-toggle {
opacity: 1;
}
}
@media screen and (min-width: 850px) {
#menu_mobile, #mobile-toggle {
display: none;
}
}
body.menu-open #site-navigation {
top: 0;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
body.menu-open #menu_mobile {
bottom: 0;
opacity: 1;
pointer-events: auto;
}
#masthead {
background-color: #fdc300;
position: relative;
margin-bottom: 3rem;
height: calc(100vh - 18rem); }
#masthead .content {
display: -ms-flexbox;
display: flex;
height: 100%;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
#masthead .content > * {
margin: 0 1rem;
}
#masthead .image {
height: 40vh;
width: 40vh;
border-radius: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#masthead .image .parallax-container {
height: 100%;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 700px) {
#masthead .image .parallax-container {
opacity: 0;
}
}
#masthead .text-container {
width: 45vw;
}
#masthead .text-container .text {
color: white;
font-size: calc(1.5vw + 2rem);
word-break: break-word;
line-height: calc(2vw + 3rem);
}
#masthead .text-container .logo img {
height: calc(2vw + 3rem);
}
#masthead .scroll {
background-color: #fdc300;
position: absolute;
bottom: -2rem;
width: 3rem;
height: 3rem;
border-radius: 100%;
left: 50%;
z-index: 1000;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#masthead .scroll img {
height: 60%;
position: absolute;
top: 55%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (max-width: 1550px) {
#masthead .image {
background-position: center;
}
}
@media screen and (max-width: 1150px) {
#masthead .image {
height: 40vh;
width: 40vh;
background-position: center;
}
}
@media screen and (max-width: 850px) {
#masthead .content {
-ms-flex-direction: column;
flex-direction: column;
height: calc(100% - 9rem);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
#masthead .image {
width: 100%;
height: 25vh;
border-radius: 0;
background-position: center;
}
#masthead .text-container {
width: 85vw;
}
}
#masthead .not_front_header {
background-size: cover;
height: 100%;
}
#masthead .not_front_header .parallax-container {
height: 100%;
position: relative;
overflow: hidden;
}
#masthead .not_front_header .logo-block {
width: 100%;
padding: .5rem;
background-color: #fdc300;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
position: absolute;
bottom: 0;
z-index: 100;
}
#masthead .not_front_header .logo-block .logo img {
height: 5rem;
width: auto;
}
.parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.parallax img {
display: none;
position: absolute;
left: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.parallax {
display: none;
}
}
}
article.page, .taxonomy-page {
padding-top: 2rem;
text-align: center;
}
article.page .entry-header, .taxonomy-page .entry-header {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 900px) {
article.page .entry-header, .taxonomy-page .entry-header {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 1600px) {
article.page .entry-header, .taxonomy-page .entry-header {
max-width: 1200px;
}
}
@media screen and (min-width: 2000px) {
article.page .entry-header, .taxonomy-page .entry-header {
max-width: 1600px;
}
}
article.page .entry-header > *, .taxonomy-page .entry-header > * {
text-align: center;
}
article.page .entry-header a, .taxonomy-page .entry-header a {
color: white;
text-decoration: none;
}
article.page .entry-header h1, .taxonomy-page .entry-header h1 {
color: #fdc300;
}
article.page .entry-content > p, .taxonomy-page .entry-content > p {
text-align: center;
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 900px) {
article.page .entry-content > p, .taxonomy-page .entry-content > p {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 1600px) {
article.page .entry-content > p, .taxonomy-page .entry-content > p {
max-width: 1200px;
}
}
@media screen and (min-width: 2000px) {
article.page .entry-content > p, .taxonomy-page .entry-content > p {
max-width: 1600px;
}
}
article.page .entry-content > ul, .taxonomy-page .entry-content > ul {
list-style: none;
display: -ms-flexbox;
display: flex;
padding: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (min-width: 2000px) {
article.page .entry-content > ul, .taxonomy-page .entry-content > ul {
max-width: 1600px;
}
}
article.page .entry-content > ul > li, .taxonomy-page .entry-content > ul > li {
padding: .5rem;
background-color: #fdc300;
color: white;
margin: .5rem;
white-space: nowrap;
}
.schema-farbig article.page, .schema-farbig .taxonomy-page {
background-color: #fdc300;
}
.schema-farbig article.page .entry-header > *, .schema-farbig .taxonomy-page .entry-header > * {
color: white;
}
.schema-farbig article.page .entry-content > p, .schema-farbig .taxonomy-page .entry-content > p {
color: white;
}
article.page a, .taxonomy-page a {
color: #fdc300;
}
article.page a:hover, .taxonomy-page a:hover {
color: #fdc300;
text-decoration: none;
}
.sticker-block {
background-color: white;
width: 15rem;
height: 15rem;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: #fdc300;
border-radius: 50%;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
padding: 2rem;
cursor: pointer;
transition: .5s ease;
-webkit-animation: sticker-fade-in 1s ease-out;
animation: sticker-fade-in 1s ease-out;
}
@-webkit-keyframes sticker-fade-in {
0% {
opacity: 0;
-webkit-transform: translateY(50%) rotate(-45deg);
transform: translateY(50%) rotate(-45deg);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) rotate(-15deg);
transform: translateY(0) rotate(-15deg);
}
}
@keyframes sticker-fade-in {
0% {
opacity: 0;
-webkit-transform: translateY(50%) rotate(-45deg);
transform: translateY(50%) rotate(-45deg);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) rotate(-15deg);
transform: translateY(0) rotate(-15deg);
}
}
.sticker-block > .title {
font-size: 1.5rem;
text-align: center;
}
.sticker-block > svg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.sticker-block > svg circle {
fill: transparent;
stroke: #fdc300;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 0, 9;
}
.sticker-block:hover {
-webkit-transform: rotate(0) scale(1.1);
transform: rotate(0) scale(1.1);
}
.sticker-block:hover > svg {
-webkit-animation: svg-rotate 35s linear infinite;
animation: svg-rotate 35s linear infinite;
}
@-webkit-keyframes svg-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.sticker-block a {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.kp-site-header {
min-height: calc(100vh - 15rem);
background-color: #fdc300;
position: relative;
overflow: hidden;
padding: 2rem 5vw;
-ms-grid-rows: auto 2rem auto;
grid-template-areas: "image text" "image logo";
-ms-grid-columns: 1fr 2rem 2fr;
grid-template-columns: 1fr 2fr;
display: -ms-grid;
display: grid;
grid-gap: 2rem;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.kp-site-header > .text {
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: text;
color: white;
line-height: 1.2;
font-size: calc(3rem + 3vw);
}
.kp-site-header > .image {
-ms-grid-row: 1;
-ms-grid-row-span: 3;
-ms-grid-column: 1;
grid-area: image;
}
.kp-site-header > .image .image_bg {
background-size: cover;
background-position: center;
padding-bottom: 100%;
border-radius: 50%;
}
.kp-site-header > .sticker-block {
position: absolute;
right: 1.2rem;
bottom: 4rem;
}
@media (max-width: 1200px) {
.kp-site-header > .sticker-block {
display: none !important;
}
}
.kp-site-header > .logo {
-ms-grid-row: 3;
-ms-grid-column: 3;
grid-area: logo;
}
.kp-site-header > .logo img {
max-width: 100%;
max-height: calc(3rem + 5vw);
}
@media (max-width: 1200px) {
.kp-site-header {
min-height: calc(100vh - 18rem);
padding: 1rem 5vw;
-ms-grid-columns: 1fr 2rem 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto 2rem auto;
grid-template-areas: "image text" "logo logo";
}
.kp-site-header > .logo {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.kp-site-header > .logo img {
max-height: 6rem;
}
.kp-site-header > .text {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.kp-site-header > .image {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
}
.kp-site-header > .logo {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
@media (max-width: 900px) {
.kp-site-header {
height: auto;
-ms-grid-rows: auto 2rem auto;
grid-template-areas: "image" "logo";
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.kp-site-header > .text {
display: none;
}
.kp-site-header > .image {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
}
.kp-site-header > .logo {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
}
@media (max-width: 900px) and (orientation: landscape) {
.kp-site-header {
-ms-grid-rows: auto 2rem auto;
grid-template-areas: "image text" "image logo";
-ms-grid-columns: 1fr 2rem 1fr;
grid-template-columns: 1fr 1fr;
}
.kp-site-header > .text {
display: block;
font-size: 3rem;
}
.kp-site-header > .text {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.kp-site-header > .image {
-ms-grid-row: 1;
-ms-grid-row-span: 3;
-ms-grid-column: 1;
}
.kp-site-header > .logo {
-ms-grid-row: 3;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
}
}
body:not(.front) .kp-site-header {
grid-template-areas: "image" "logo";
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
padding: 0;
-ms-grid-rows: 1fr 0 4rem;
grid-template-rows: 1fr 4rem;
grid-gap: 0;
}
body:not(.front) .kp-site-header > .text {
display: none;
}
body:not(.front) .kp-site-header > .logo {
justify-self: flex-end;
background-color: #fdc300;
padding: .5rem 1rem;
}
body:not(.front) .kp-site-header > .logo img {
height: 3rem;
}
body:not(.front) .kp-site-header > .image {
width: 100%;
height: 100%;
min-height: 380px;
}
body:not(.front) .kp-site-header > .image .image_bg {
padding: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
#kontakt h2 {
color: white;
}
#kontakt .inspirationen-galerie {
position: relative;
}
#kontakt .inspirationen-galerie h2 {
position: absolute;
color: white;
z-index: 2;
top: 2.75rem;
font-size: 2.5rem;
left: 51%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#kontakt .inspirationen-galerie .inspirationen {
height: 70vh;
}
#kontakt .inspirationen-galerie .inspirationen .bild {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#kontakt .inspirationen-galerie .inspirationen .bild .parallax-container {
height: 70vh;
}
#kontakt .inspirationen-galerie .inspirationen .parallax-container {
position: relative;
overflow: hidden;
height: 500px;
}
@media (max-width: 768px) {
#kontakt .inspirationen-galerie .inspirationen {
height: 40vh;
}
#kontakt .inspirationen-galerie .inspirationen .bild .parallax-container {
opacity: 0;
height: 40vh;
}
}
#kontakt .inspirationen-galerie .inspirationen .parallax-container .parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#kontakt .inspirationen-galerie .inspirationen .parallax-container .parallax img {
display: none;
position: absolute;
left: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#kontakt .inspirationen-galerie .arrow-container {
position: absolute;
width: 15rem;
height: 100%;
top: 0;
z-index: 1;
transition: all ease .6s;
cursor: pointer;
}
#kontakt .inspirationen-galerie .arrow-container.cont-left {
left: -50%;
background: linear-gradient(to right, rgba(100, 99, 99, 0.8) 0%, rgba(100, 99, 99, 0) 100%);
}
#kontakt .inspirationen-galerie .arrow-container.cont-right {
right: -50%;
background: linear-gradient(to right, rgba(100, 99, 99, 0) 0%, rgba(100, 99, 99, 0.01) 1%, rgba(100, 99, 99, 0.8) 100%);
}
#kontakt .inspirationen-galerie .arrow-container .custom {
display: block !important;
position: absolute;
right: 0;
top: 50%;
width: 5rem;
height: 5rem;
}
#kontakt .inspirationen-galerie .arrow-container .custom::after {
position: absolute;
width: 2rem;
height: 2rem;
content: "";
top: 50%;
left: 50%;
border-right: 3px solid #fdc300;
border-bottom: 3px solid #fdc300;
transition: 0.3s ease;
}
#kontakt .inspirationen-galerie .arrow-container .custom.custom-next::after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
#kontakt .inspirationen-galerie .arrow-container .custom.custom-prev {
z-index: 1;
left: 0;
right: auto;
}
#kontakt .inspirationen-galerie .arrow-container .custom.custom-prev::after {
-webkit-transform: translate(-50%, -50%) rotate(135deg);
transform: translate(-50%, -50%) rotate(135deg);
}
#kontakt .inspirationen-galerie:hover .arrow-container.cont-left {
left: 0;
}
#kontakt .inspirationen-galerie:hover .arrow-container.cont-right {
right: 0;
}
#kontakt .partner {
background-color: #fdc300;
color: white;
text-align: center;
padding: 2rem 1rem;
}
#kontakt .partner .content {
margin-bottom: 2rem;
}
#kontakt .partner .content .reihe {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 3rem;
padding: 0 20vw;
-ms-flex-align: end;
align-items: flex-end;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#kontakt .partner .content .reihe {
display: -ms-flexbox;
display: flex;
}
#kontakt .partner .content .reihe > * {
margin: 0 1.5rem;
}
}
#kontakt .partner .content .reihe > a img {
width: 100%;
}
@media (max-width: 800px) {
#kontakt .partner .content .reihe {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
grid-gap: 2rem;
}
#kontakt .partner .content .reihe > * {
padding: 2rem 0 0 0 !important;
}
}
#kontakt .footer {
background-color: #646363;
color: white;
text-align: center;
padding: 3rem 0;
}
#kontakt .footer .kontakt {
margin-top: 2rem;
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 900px) {
#kontakt .footer .kontakt {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 1600px) {
#kontakt .footer .kontakt {
max-width: 1200px;
}
}
@media screen and (min-width: 2000px) {
#kontakt .footer .kontakt {
max-width: 1600px;
}
}
#kontakt .footer .facebook {
margin-top: 2rem;
}
#kontakt .footer .facebook a {
height: 100%;
width: 100%;
}
#kontakt .footer .facebook a img {
height: 3rem;
}
#kontakt .footer a {
color: white;
}
#kontakt .footer a:hover {
color: white;
}
#kontakt .bottom {
background-color: #646363;
border-top: 1px solid white;
}
#kontakt .bottom ul {
list-style-type: none;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 0;
padding: 1.5rem 0;
}
#kontakt .bottom ul li::after {
content: '|';
color: white;
padding: 0 .25rem;
}
#kontakt .bottom ul li:last-of-type::after {
display: none;
}
#kontakt .bottom ul li a {
color: white;
}
#kontakt .bottom ul li a:hover {
color: white;
}
.modal-event .modal-dialog .modal-content {
background-color: transparent;
border: none;
}
.modal-event .modal-dialog .modal-content .modal-body {
padding: 0;
}
.modal-event .modal-dialog .modal-content .modal-body .top {
background-color: #fdc300;
color: white;
padding: 1rem;
margin-bottom: .5rem;
position: relative;
}
.modal-event .modal-dialog .modal-content .modal-body .top h4 {
font-size: 1.75rem;
}
.modal-event .modal-dialog .modal-content .modal-body .top .datum {
font-size: 1.25rem;
}
.modal-event .modal-dialog .modal-content .modal-body .top .close {
position: absolute;
top: 1rem;
right: 1rem;
color: white;
}
.modal-event .modal-dialog .modal-content .modal-body .bild {
margin-bottom: .5rem;
}
.modal-event .modal-dialog .modal-content .modal-body .bild img {
width: 100%;
}
.modal-event .modal-dialog .modal-content .modal-body .middle {
padding: 1rem;
margin-bottom: .5rem;
background-color: white;
}
.modal-event .modal-dialog .modal-content .modal-body .middle p, .modal-event .modal-dialog .modal-content .modal-body .middle a, .modal-event .modal-dialog .modal-content .modal-body .middle ul {
font-size: 1rem;
}
.modal-event .modal-dialog .modal-content .modal-body .middle a {
color: #fdc300;
}
.modal-event .modal-dialog .modal-content .modal-body .middle a:hover {
color: #fdc300;
}
.modal-event .modal-dialog .modal-content .modal-body .anmeldung {
padding: 1rem;
background-color: white;
margin-bottom: .5rem;
}
.modal-event .modal-dialog .modal-content .modal-body .anmeldung input:focus, .modal-event .modal-dialog .modal-content .modal-body .anmeldung select:focus {
border-color: #ffd031;
box-shadow: 0 0 0 0.2rem rgba(253, 195, 0, 0.25);
}
.modal-event .modal-dialog .modal-content .modal-footer {
border: none;
padding: 0;
}
.modal-event .button {
background-color: #fdc300;
color: white;
border: none;
padding: .2rem 1rem;
cursor: pointer;
transition: .3s ease all;
}
.modal-event .button:hover {
background-color: #646363;
}