/*
 Theme Name: AMB24
 Description:  Twentytwentyone Child Theme
 Author:       Nele Protze
 Author URI:   httpw://www.designerist.de
 Template:     twentytwentyone
 Version:      1.0
 Text Domain:  amb24
*/

:root {
    --heading--font-family: "Roboto Slab" !important;
    --heading--font-size-h1: 2rem !important;
    --heading--font-size-h2: 1.7rem !important;
    --heading--font-size-h3: 1.2rem !important;
    --heading--font-size-h4: 1rem !important;
    --heading--font-weight: 600 !important;
    --global--spacing-unit: 0 !important;
    --global--spacing-vertical: 1em !important;
    --global--spacing-horizontal: 0 !important;
    --font-base: "Open Sans";
    --font-headings: "Open Sans";
}

@media only screen and (max-width: 900px) {
    :root {
        --global--font-size-page-title: 2.2rem !important;
    }
}

@media only screen and (min-width: 900px) {
    :root {
        --responsive--aligndefault-width: 100% !important;
        --global--font-size-page-title: 3.8rem !important;
    }
}

/* roboto-slab-200 - latin */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 200;
    src: local(''),
         url('assets/fonts/roboto-slab-v13-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('assets/fonts/roboto-slab-v13-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* roboto-slab-regular - latin */
  @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('assets/fonts/roboto-slab-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('assets/fonts/roboto-slab-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* roboto-slab-600 - latin */
  @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 600;
    src: local(''),
         url('assets/fonts/roboto-slab-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('assets/fonts/roboto-slab-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  

  /* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local(''),
         url('assets/fonts/open-sans-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('assets/fonts/open-sans-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* open-sans-regular - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('assets/fonts/open-sans-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('assets/fonts/open-sans-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local(''),
         url('assets/fonts/open-sans-v20-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('assets/fonts/open-sans-v20-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }


/** 
*    G E N E R A L / D E S I G N
 **/

body {
    font-size: 16px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #494e4e;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Slab", serif;
    color: #5a2130;
    font-weight: 600 !important;
}
h3, h4, h5, h6 {
    padding-top: 1em !important;
}
h1 .subheader, h2 .subheader, h3 .subheader, h4 .subheader, h5 .subheader, h6 .subheader {
    font-family: "Roboto Slab", serif;
    color: #5a2130;
    font-weight: 200 !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #5a2130;
    font-family: "Roboto Slab";
}

.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover h4, .wp-block-cover h5 {
    color: #5a2130 !important;
}

.wp-block-cover p, .wp-block-cover li {
    color: #494e4e;
}

/* h1 overlay hero */
header {
    position: relative;
}
header.entry-header {
    border-bottom: 0 !important;
    display: inline !important;
}
h1 {
    position: absolute !important;
    top: -4em;
    padding: .2em .4em !important;
    background-color: rgba(255, 255, 255, 0.35);
    color: #5a2130 !important;
    font-weight: 500 !important;
    display: block;
    white-space: nowrap;
}
@media only screen and (max-width: 900px) {
    h1 {
        font-weight: 700 !important;
        top: -5.5em;
        padding-left: .75em !important;
        display: inline;
        white-space: normal;    
    }
}
hr.wp-block-separator:not(.is-style-dots):not(.alignwide) {
    border-bottom: dotted 2px #55b0c2;
    margin: 3em 0 2.5em 0;
}
.wp-block-separator:not(.is-style-wide) {
  width: 100% !important;
  border-bottom: dotted 1.5px #55b0c2 !important;
}


/* Textboxes */
.textbox {
	background-color:  rgba(85,176,194, .05) !important;
	border: 1px solid #55b0c2;
    border-radius: 3px;
	text-align: center;
	transition: all .2s ease;
}
.textbox h5 {
	padding: 2px !important;
	letter-spacing: -.01em
}
.textbox img {
	padding: 2px !important;
}
.textbox-text, .textbox-link {
	margin: 30px 0 0 0  !important;
	padding: 2px !important;
	line-height: 1.4em !important;
	color: black !important;
}
.textbox:hover {
	background-color: #55b0c2 !important;
	box-shadow: 0 1rem 2rem rgba(178,132,81,.4);	
}
.textbox:hover p {
	color: white !important;
}
.textbox:hover h5 {
	color: white !important;
}



/* Textboxes Home - jobs*/
.jobs {
    background-color:  rgba(85,176,194, .05) !important;
	border: 1px solid #55b0c2;
    border-radius: 3px;
	transition: all .2s ease;
    padding: 1.3em 2em 2em 2em;
}
.jobs:hover {
    background-color: #55b0c2 !important;
	box-shadow: 0 1rem 2rem rgba(178,132,81,.4);
}
.jobs p {
    font-size: .9em !important;
}
.jobs:hover * {
    color: white !important;
}

    /* Textboxes Job Specs */
.jobs-specs {
	background-color:  rgba(85,176,194, .05) !important;
	border: 1px solid #55b0c2;
    border-radius: 3px;
	transition: all .2s ease;
}
.jobs-specs h4 {
	padding: 2px !important;
	letter-spacing: -.01em;
}   
.jobs-specs p {
	margin: 30px 0 0 0  !important;
	padding: 2px !important;
	line-height: 1.4em !important;
	color: black !important;
}
.jobs-specs:hover {
	background-color: #55b0c2 !important;
	box-shadow: 0 1rem 2rem rgba(178,132,81,.4);	
}
.jobs-specs:hover * {
	color: white !important;
}

  
/** 
*     S T R U C T U R E
**/

header, 
#content,
.site-footer {
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px !important;
}

@media(max-width: 1560px) {
    header, 
    #content,
    .site-footer {
        max-width: calc(100vw - 60px) !important;
    }
}

@media(max-width: 1560px) {
    header, 
    #content,
    .site-footer {
        max-width: calc(100vw - 30px) !important;
    }
}

/** 
*     H E A D E R 
**/

.site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #fff;
    position: relative !important;
    margin-top: 15px;
    /* Adds extra white space to the bottom of the header */
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 900px) {
    header #logo {
        margin: 0 auto;
    }
    header #logo img {
        margin-top: 85px !important;
        height: 150px !important;
    }
}
@media only screen and (min-width: 900px) {
    header #logo img {
        margin-left: 1rem;
        margin-top: 20px !important;
        height: 150px !important;
    }
}
/* Moves the navigation bar underneath the logo on smaller screens */
@media only screen and (max-width: 900px) {
	header {
		height: 240px;
	}
}
@media only screen and (min-width: 900px) and (max-width: 1100px) {
	header {
		height: 240px;
	}
}

.site-header .primary-menu-container {
    padding: 175px 30px 0 0 !important;
}

.site-header #primary-menu-list>li a {
    padding: 5px 0px !important;
}

.site-header #primary-menu-list>li:not(:last-child):after {
    content: "|";
    border-bottom: none;
    padding: 5px 10px;
    
}

.primary-navigation .current-menu-item > a:first-child, .primary-navigation .current_page_item > a:first-child {
    border-bottom: 2px solid #55b0c2;
    text-decoration: none !important;
}

header #contact {
    position: absolute;
    right: 10px;
    top: 0px;
    z-index: 2;
}

/* Nav align bottom within header */
nav.primary-navigation {
	position: absolute;
	bottom: 5px;
	top: unset;
}

/* Mobile burger menu position adjustments */
@media only screen and (max-width: 900px) {
    ul#mega-menu-primary {
        top: 223px !important;
        border-bottom: solid 5px #55b0c2 !important;
        box-shadow: 0 8px 6px 0px gray !important;
    }
    header #contact {
        top: 10px;
        left: 20px !important;
    }
    nav.primary-navigation {
        top: 17px !important;
        right: 12px;
        z-index: 3;
    }
    #mega-menu-wrap-primary .mega-menu-toggle {
        background: transparent;
    }
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
        background-color: #55b0c2;
    }
}

header #contact a.mail, 
header #contact a.phone {
    font-family: 'Roboto Slab', serif;
    text-decoration: none;
    font-size: 1.35rem;
    color: #55b0c2 !important;
/*    padding: 0 10px; */
}

header #contact a.phone i, 
header #contact a.mail i,
header #contact a.mail span, 
header #contact a.phone span  {
    color: #55b0c2 !important;
}

/* Top menu items and separators: mobile */
@media only screen and (max-width: 900px) {
    header #contact a.mail, 
    header #contact a.phone {
        font-size: 2rem;
    }
    header #contact a:after {
        content: ' ';
        display: inline-block;
        font-size: 2rem;
        width: 3px;
    }
    header #contact form:after {
        content: ' ';
        display: inline-block;
        font-size: 2rem;
        width: 2px;

    }

}
/* Top menu items and separators: desktop */
@media only screen and (min-width: 900px) {
    header #contact a:after {
        content: ' | ';
        color: #999;
        font-size: 2rem;
        letter-spacing: 5px;
    }
    header #contact form:after {
        content: ' ';
        display: inline-block;
        font-size: 2rem;
        width: 10px;
    }
}

header #contact .separator {
    font-family: 'Roboto Slab', serif;
    font-size: 2rem;
    color: #999;
    display: none;
}

header #contact .login {
    font-size: 2rem;
    transform: translateY(-2px);
/*    border-left: 1px dotted #666; */
/*    border-right: 1px dotted #666; */
    display: inline-block;
    padding: 0.2rem 0 5px;
    text-decoration: none;
}

@media only screen and (max-width: 900px) {
    header #contact .login span {
        display: none !important;
        font-size: 0.9rem !important;
        display: inline-block;
        transform: translateY(-4px);

    }
    header #contact .login i {
        font-size: 1.6rem;
        transform: translateY(0px);

    }
    header .menu-button-container {
        display: none !important;
    }
}
@media only screen and (min-width: 900px) {
    header #contact .login span {
        font-size: 0.9rem !important;
        display: inline-block;
        transform: translateY(-2px);
    }
    header #contact .login i {
        font-size: 1.6rem;
        transform: translateY(2px);
    }
}

@media (max-width: 1000px) {
    header #contact a span {
        display: none;
    }
}

header form {
    display: inline;
    margin: 0;
    padding: 0;
}

header form input {
    border: none !important;
    width: 0;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s;
    
}

header form:hover input, header form input:focus {
    width: 100px;
    border-bottom: 1px solid #999 !important;
}

header form input:focus {
    outline: none !important;
    border-bottom: 1px solid #000 !important;
}

header form button {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: transparent !important;
    border: none;
    padding: 0;
    transform: scaleX(-1);
    transform: translateY(-3px);
}
@media only screen and (max-width: 900px) {
    header form button {
        transform: translateY(-6px);
    }
}

/* login and search icon color in nav */
.login span, .login i, #search i {
	color: #888 !important;
}

#hero {
    height: 500px;
    background-image: url(assets/images/hero.jpg);
    background-size: cover;
    background-position: center;
}
@media only screen and (max-width: 900px) {
  #hero {
      height: 240px;
  }
}

/** 
*      C O N T E N T
 **/

#content {
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    padding: 30px 50px 30px 100px;
}

@media (max-width: 1000px) {
    #content {
        padding: 15px 15px 15px 15px;
    }
}

/**
*      F O O T E R
**/

.site-footer {
    padding: 30px 50px;
    background-image: url(assets/images/wasser.png);
    background-size: contain;
    background-repeat: no-repeat;

}

.no-widgets .site-footer {
    margin-top: 0 !important;
}

.site-info {
    border-top: none !important;
}

#family {
    width: 100%;
    text-align: center;
}

#family-claim {
    font-size: 2rem;
    letter-spacing: 12px;
    color: #117080;
}

#family-members img {
    width: 200px;
}
@media (min-width: 641px) {
    #family-members img {
        margin: 0 50px;
    }
}
  
@media (max-width: 640px) {
    #family-claim {
        font-size: 2rem;
        letter-spacing: 6px;
    }
}

footer .widget-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
}
footer aside h2 {
    padding-top: 0 !important;
    font-weight: 700 !important;
}
@media (max-width: 640px) {
  footer .widget-area {
      grid-template-columns: 100% !important;
      text-align: center;
  } 
}
@media (min-width: 641px) and (max-width: 1000px) {
    footer .widget-area {
        grid-template-columns: 20% 30% 30% !important;
    } 
}
@media (min-width: 1001px) {
    footer .widget-area {
        grid-template-columns: 17% 22% 33% 10% !important;
    }
    footer aside h2 {
      padding-right: 1em;
    }
}
@media (min-width: 1201px) {
    footer aside h2 {
      text-align: right;
    }
}


.site-footer .widget-area .widget .widget-title {
    font-weight: normal;
    line-height: var(--widget--line-height-list);
    color: #fff;
    font-size: 1rem;
}

.site-footer .widget-area .widget nav ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

@media (min-width: 1200px) {
    .site-footer .widget-area .widget {
        display: flex;
        column-gap: calc(var(--global--spacing-horizontal));
    }

    .site-footer .widget-area .widget nav {
        margin-top: 0;
    }

    .site-footer .widget-area .widget .widget-title {
        font-weight: normal;
        line-height: var(--widget--line-height-list);
        color: #fff;
        font-size: 1rem;
    }
}

#popup-menu {
    position: fixed;
    top: 350px;
    background-color: #fff;
    transition: 0.3s all;
    left: 0;
    transform: translateX(-100%);
    margin-left: 40px;
    z-index: 999;
}

#popup-menu:hover {
    transform: translateX(0);
    margin-left: 0;
}

#popup-menu a {
    display: block;
    text-align: right;
    padding: 6px 12px 6px 30px;
    text-decoration: none;
    white-space: pre;
    font-size: larger;
}

#popup-menu a i {
    display: inline-block;
    margin-left: 15px;
}

#popup-menu a:hover,
#popup-menu a:hover i {
        background-color: #55b0c2;
    color: #fff;
}