/*
Theme Name:   STATTWERK Stuttgart 2020
Author:       Volker Stegmaier
Author URI:   https://volkerstegmaier.de
Description:  Child-Theme für das WordPress-Standardtheme Twenty Twenty 
Template:     twentytwenty 
Version:      1.0 (2019-11-18)
*/ 

/* grün: #94c147 */

html {
    background: #ffffff;
}


button::-moz-focus-inner {
  border: 0;
}


.vanta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.swiper-slide-bg {
    background-blend-mode: darken;
    background-color: transparent !important;
}

/* Header */
#site-header {
    margin-bottom: 60px;
}

.elementor-widget-archive-posts .elementor-post__title a {
	font-weight: 300 !important;
	font-size: 130%
}

.header-titles .site-title, .header-titles .site-logo, .header-titles .site-description {
    margin: 2rem 0 0 1rem;
}


/* maps */

.gm-style .gm-style-iw-c {
    background-color: white;
    border-radius: 0 !important;
    padding: 10px !important;
    box-shadow: 0 0px 5px rgba(0,0,0,0.1) !important;
}

.egm-marker-iw .alignnone {
	margin: 10px 0 0 !important;
}

.egm-marker-iw p {
	margin: 0 !important;
}

/* Navigation + HG */

#bg {
	width: 100vw;
	height: 100vh;
	position: fixed;
	opacity: 1;
}

.bg-left {
	width: calc(100vw / 10);
	height: 100%;
	background-color: white;
}

.bg-right {
    height: calc(100vw / 10);
    position: absolute;
    background-color: white;
    width: calc(100vw / 10);
    top: calc(100vw / 10);
    right: 0;
}

.bg-bottom {
	height: calc(100vw / 10);
    width: 40%;
    background-color: white;
    bottom: 0;
    position: absolute;
}

.bg-top {
    width: 20%;
    position: absolute;
    background-color: white;
    height: calc(100vw / 10);
    right: 0;
    top: 0;
}

body.custom-background{
    background-color: #f6f6f6 !important;
}

#site-header {
	background-color: transparent !important;
	z-index: 9;
}

ul.primary-menu {
	font-size: 17px;
	letter-spacing: 0.05em;
}

.header-navigation-wrapper {
    align-items: center;
    position: fixed;
    transform: rotate(-90deg);
	left: -117px;
    top: 45vh;
}

#site-footer {
	background-color: transparent !important;
	position: relative;
	margin-top: 100px;
	font-size: 1.1rem !important;
}

.footer-credits {
	opacity: 0.3;
}

.header-titles {
    align-items: center;
    position: fixed;
    left: 58px;
    top: 15px;
    z-index: 99
}


/* Burger Menu*/

.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
    font-size: 6.4rem;
    font-weight: 300;
    text-align: center;
}

.ancestor-wrapper > a:hover {
	color: grey !important;
}

.menu-modal nav * {
	border: none;
}

.header-inner .toggle path {
    fill: #94c147;
}

body:not(.overlay-header) .toggle-inner .toggle-text {
    color: #94c147 !important;
}

.header-inner .toggle {
    position: fixed;
    right: 34px;
    height: 120px;
}

.menu-modal {
	z-index: 9;
}

button.close-nav-toggle {
    font-size: 1.8rem;
    padding: 6rem 18px 0;
}

/* mobil menu */

.mobile-menu {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    position: relative;
    text-align: center;
    height: calc(100vh - 200px);
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
}

.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a:before {
    content: "+" !important;
    bottom: 0.8em;
    position: relative;
    font-weight: 400;
    color: transparent;
    margin-left: -11px;
}

.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a:hover:before {
    color: #94c147;
}

.menu-modal.active {
    opacity: 0.95;
}

.menu-modal .toggle {
    color: #797979 !important;
}

/* Slider */

.swiper-slide-bg {
	background-blend-mode: darken;
	background-color: #f9f9f9 !important;
}

/* General */

.elementor {
	padding: 0 5vw;
}

.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
	padding: 0 !important;
}

.primary-menu-wrapper + .header-toggles {
	display: none;
}

.site-logo img {
	width: 230px
}

.site-description {
	display: none;
}

body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: #94c147 !important;
}

section {
    padding: 0 !important;
}

/* Navigation */

.primary-menu > li > a:before {
	content: "+" !important;
    bottom: 0.8em;
    position: relative;
    font-weight: 400;
    color: transparent;
    margin-left: -11px;
}

.primary-menu > li > a:hover:before, .primary-menu > li.current_page_item > a:before {
    color: #94c147;
}

.primary-menu a {
	margin-left: 20px;
}

.primary-menu li.highlight {
	font-weight: inherit;
}

/* Typografie */

body {
    font-size: 1.8rem;
    letter-spacing: 0;
    line-height: 2.5rem;
}

p {
	line-height: 1.8;
	font-weight: 300;
}

b, strong {
	font-weight: 400;
}

h2:before, .heading-size-2:before, h3:before, .heading-size-3:before {
    content: "+" !important;
    bottom: 0.8em;
    position: relative;
    font-weight: 400;
    color: #94c147;
}

h1, .heading-size-1 {
    font-weight: 200;
    font-size: 5.4rem;
}

h2, .heading-size-2 {
    font-size: 2.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 300;
}

a {
	text-decoration: none !important;
}

.elementor-inner a {
	color: #94c147 !important;
}

.elementor-inner a:hover {
	text-decoration: none !important;
	color: grey !important;
}

a:hover {
	color: grey !important;
}

/* Footer */

.footer-copyright {
    font-weight: 300;
    }

.elementor-widget-text-editor {
    color: #3d3b3e !important;
    }
    
@media only screen and (max-width: 750px) {
	.elementor-widget-slides .elementor-slide-heading {
    font-size: 40px !important;
	}
	.elementor-widget-slides .elementor-slide-description {
    font-size: 18px !important;
	}
	.swiper-slide-contents {
	max-width: 100vw !important;
	}
	.swiper-slide-bg {
    background-size: cover !important;
	}
	.site-logo img {
    width: 174px !important;
	}
	.header-titles {
	left: 16px !important;
	}
	.modal-menu a {
    font-size: 30px !important;
	}
	.modal-menu {
    left: 0% !important;
	}
	.elementor {
    padding: 0 8vw !important;
	}
	h1, .heading-size-1 {
    font-size: 4rem;
	}

}