/*
 Theme Name:   IKOS
 Description:  Mein Child Theme
 Author:       Atseesite
 Author URI:   httpw://www.atseesite.de
 Template:     astra
 Version:      1.0
 Text Domain:  IKOS
*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700&display=swap');
:root {
    --green: #005756;
    --grey: #202020;
    --blue: #005756;
}

body {
    font-family: "Rubik", sans-serif;
    color: var(--grey);
    font-weight:300;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* legacy properties */
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;  /* current proposal */
    -moz-hyphenate-limit-chars: 6 3 2;     /* not yet supported */
    -webkit-hyphenate-limit-chars: 6 3 2;  /* not yet supported */
    -ms-hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-chars: 6 3 2;
}


header#masthead {
    background-color: #fff;
}
header#masthead .container {
    width:100%;
    max-width: 100%;
}

#page {
    background-image: url("images/holz_15.svg");
    background-repeat: no-repeat;
    background-position: 120%  50vw;
}

#primary {
    max-width: 100%;
    flex: 1;
}
#content {
    padding-left: 80px;
    padding-right: 80px;
    background-image: url("images/holz_15.svg");
    background-repeat: no-repeat;
    background-position: -250px  50% ;
}
.navbar-brand img {
    height: 60px;
}
.navbar-expand-xl .navbar-collapse {
    display: block;
}

@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse {
        flex-basis: auto;
    }
}
.collapse:not(.show) {
    display: none;
}

body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a, body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
    color: #2B608E !important;
    font-size: 18px;
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    text-transform: uppercase;
}
body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover {
    color: #2B608E;
    font-size: 18px;
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    text-decoration: underline;
    text-transform: uppercase;
}

/************* Menu *************/
.sub-menu {
    padding:15px;
    background-color: #fff;
    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.1);
}
.sub-menu li {
    list-style: none;
    margin-bottom: 10px;
    font-weight: 500;
}
@media all and (min-width: 1200px) {
    .navbar .menu-item-has-children .sub-menu{
        display: none;
        position:absolute;
    }
    .navbar .menu-item-has-children .show {
        display: block;
    }
}
@media all and (max-width: 1199px) {
    .sub-menu {
        padding:5px 15px 15px 15px;
        background-color: #fff;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .sub-menu li {
        margin-bottom: 5px;
    }
    #main-nav {
        padding-top: 25px;
        text-align: center;
    }
    #main-nav > ul > li {
        magin-bottom:10px;
        background-color: #dae2f5;
    }
    #menu-menu-1 > li {
        margin-bottom: 10px;
    }
    .sub-menu .menu-item{
        font-size: 14px;
    }
}

/************* header ************/

.header_image{
    width:100%;
    height: 620px;
    background-size: cover;
    background-position: 0% 75%;
    margin-bottom: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.header_headline {
    color:#fff;
    font-size: 5vw;
    font-family: 'Rubik', serif;
    font-weight: 700;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}
.header_subheadline {
    color:#fff;
    font-size: 2vw;
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
    width: 75%;
    text-align: center;
    margin:0 auto;
}
#content.site-content {
    padding-top: 150px;
}

/* TYPO */
blockquote {
    padding:0;
    margin: 0;
}
a {
    color: #2B608E;
    text-decoration: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: var(--green);
}
.wp-block-image {
    border-radius: 20px;
}
.deco_right:before{
    content:'';
    width:150px;
    height:150px;
    display: block;
    position: absolute;
    background-image: url("images/holz_60.svg");
    background-repeat: no-repeat;
    background-size: cover;
    right:-90px;
    z-index:-1;
}
.deco_right:after {
    content:'';
    width:250px;
    height:250px;
    display: block;
    position: relative;
    background-image: url("images/holz_35.svg");
    background-repeat: no-repeat;
    background-size: cover;
    right: 70px;
    top: -100px;
    z-index:-1;
}
.wp-block-image figcaption {
    text-align: center;
    font-size: 12px;
}
h1.entry-title {
    font-size:3.4vw;
    font-weight: 700;
    font-family: 'Rubik', serif;
    color: #2B608E;
    text-transform: uppercase;
    border-bottom: none;
    margin-left:-77px;
    margin-bottom:5vw;
    text-align: center;
}
h1.entry-title:after {
    content: '';
    display: block;
    width:122px;
    height:2px;
    background-color: #2B608E;
    margin:40px auto 60px auto;
}
.entry-content p, .entry-content li {
    font-family: "Rubik", sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--grey);

}

.site_name {
    display: inline-block;
    font-size: 18px;
    font-family: 'Rubik', serif;
    font-weight: 700;
    margin-left: 10px;
}
.navbar-brand > a {
    color: #2B608E;
}

.entry-content .ikos_explanation {
    font-size: 20px;
    font-weight: 300;
}

.entry-content .ikos_explanation span {
    color:#2B608E;
    font-weight: 700;
}

/****************** Gutenberg *************/
.content-area h2 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 3vw;
}

.content-area h3 {
    font-weight: 500;
    font-size: 1.6vw;
    margin-bottom: 20px;
    color:var(--green);
}
.text_links_bild_rechts .wp-block-column .wp-block-image {
    padding-top:20px;

}
.text_links_bild_rechts .wp-block-column .wp-block-image img {
    border-radius: 25px;
    overflow: hidden;
    -webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.1);
}

.text_links_bild_rechts .wp-block-column:first-child {
    padding-right:6vw;
}

.wp-block-separator {
    width: 100%;
    color: var(--green);
    border: solid 1px var(--green);
    margin-top: 5vw;
    margin-bottom: 5vw;
    max-width:60%;
}

/****************** Tabs *****************/
.info_tabs {
    margin-top:50px;
}

.tab-content {
    padding:3vw;
    border: 1px solid #ccc;
    border-top-color: #f8fbfb;
    border-right-color: rgb(222, 226, 230);
    border-bottom-color: rgb(222, 226, 230);
    border-left-color: rgb(222, 226, 230);
    background-color: #f8fbfb;
}

.nav-tabs .nav-link.active  {
    background-color: #f8fbfb;
    border-bottom-color: #f8fbfb;
}

/***************  Cards *****************/
.cards_wrapper {
    margin-top: 5vw;
}

.cards {
    display:flex;
    flex-wrap: wrap;
}
.card {
    width: 350px;
    height:350px;
    margin:10px;
    padding:30px;
    color:#fff;
    border-radius: 38px;
}
.card h2.headline_cards {
    font-size: 30px;
    text-transform: none;
}
.card a, .card p {
    color:#fff;
}

.cards_read_more {
    position: absolute;
    bottom: 0px;
    margin-bottom: 30px;
    text-align: right;
    right: 30px;
    text-decoration: underline;
}