/* Theme Name: Taramis Theme 
Theme Description: Taramis Theme for Wordpress
Theme URI: secret;
Version: 1.0
License: GNU General Public License v2 or later
License URI: all rights to absolut.online Web-Entwicklung  
Author: secret;
Author URI: secret;
Tags: theme,responsive;
*/
@import url('bootstrap/css/bootstrap.min.css');

img {
    max-width: 100%;
    height: auto;
}
a, a:hover {
    color: black;
    text-decoration: none;
}
p {
    margin-bottom: 10px;
}
.wp-block-columns{
    margin-bottom: 0;
}


ul.inline-nav {
    padding: 0;
    margin: 0;
}
ul.inline-nav li {
    display: inline-block;
    list-style-type: none;
    margin-right: -5px;
}

header {
    position: fixed;
    z-index: 2;
    width: 100%;
    background-color: white;
}
header .row {
    text-align: center;
}
header .row.navigation {
    background-color: rgb(184, 163, 98);
}
header .logo {
    height: 200px;
    width: auto;
    transition: height 0.2s;
}
header .mainnavigation {
    padding: 10px 0;
}
header .mainnavigation li {
    min-width: 150px;
    border: 1px solid black;
    border-right: none;
    transition: background-color 0.2s;
}
header .mainnavigation li:last-of-type {
    border-right: 1px solid black;
}
header .mainnavigation li:hover, header .mainnavigation li.active {
    background-color: #f6f3e4;
}

header ~ section:first-of-type {
    padding-top: 246px;
}

section {
    background-color: #f6f3e4;
}
section .headline-image {
    position: relative;
}
section .headline-image h1, section .headline-image h2 {
    font-size: 5em;
    top: 50px;
    left: 70px;
}
section .headline-image h3 {
    font-size: 2em;
    top: 175px;
    left: 70px;
}
section .headline-image h1, section .headline-image h2, section .headline-image h3 {
    color: white;
    position: absolute;
}
section .headline-image .child-image {
    position: absolute;
    top: 0;
    right: 50px;
    height: 100%;
}
section .content {
    min-height: 55vh;
    padding: 20px 0;
}
section .content h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}
section .content ul {
    padding-left: 18px;
}
section .kontaktdaten a:hover {
    text-decoration: underline;
}
section .kontaktformular input, section .kontaktformular textarea {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid white;
    background-color: white;
    padding: 5px 10px;
    color: black;
}
section .kontaktformular ::placeholder {
    color: rgb(184, 163, 98);
    opacity: 1;
}
section .kontaktformular :-ms-input-placeholder {
    color: rgb(184, 163, 98);
}
section .kontaktformular ::-ms-input-placeholder {
    color: rgb(184, 163, 98);
}
section .kontaktformular .button-submit {
    float: right;
    background-color: rgb(184, 163, 98);
    color: white;
    padding: 5px 10px;
    border: none;
    transition: background-color 0.2s;
}
section .kontaktformular .button-submit:hover {
    background-color: rgba(184, 163, 98, 0.8);
}

#unternehmen .container .content, #seminare .container .content , #kontakt .container .content {
    padding-top: 100px;
}

.error-404 {
    padding-top: 300px;
    padding-bottom: 50px;
}
.error-404 a, .error-404 a:hover {
    color: rgb(184, 163, 98);
}


footer .footer-nav, footer .flyer {
    background-color: rgb(184, 163, 98);
    text-align: right;
}
footer .footernavigation li {
    padding: 5px 10px;
}
footer .footernavigation li a, footer .footernavigation li a:hover, footer .flyer a, footer .flyer a:hover {
    color: white;
}
footer .flyer a {
    padding: 5px 10px;
    float: left;
}

.content p a
{
    color:rgb(184, 163, 98);
    text-decoration:underline;
}

@media (max-width: 900px){
    section .headline-image h1, section .headline-image h2, section .headline-image h3 {
        color: black;
        position: static;
    }
    section .headline-image {
        position: static;
    }
    section .headline-image .images {
        position: relative;
    }
    section .headline-image .headlines {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        max-width: 720px;
    }
    #unternehmen .container .content, #seminare .container .content, #kontakt .container .content {
        padding-top: 20px;
    }
    section .headline-image h1, section .headline-image h2 {
        font-size: 4em;
    }
    section .headline-image h3 {
        font-size: 2em
    }
}
@media (max-width: 800px){
    header .mainnavigation li {
        min-width: 125px;
    }
}
@media (min-width: 768px){
    header .toggle {
        display: none;
    }
}
@media (max-width: 767px){
    header .row.identity {
        text-align: left;
        position: relative;
    }
    header .toggle {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        font-size: 2em;
        color: rgb(184, 163, 98);
        cursor: pointer;
    }
    header .row.navigation {
        display: none;
    }
    header .logo {
        height: 150px;
    }
    header .mainnavigation li {
        display: block;
        border: 1px solid black;
        border-bottom: none;
    }
    header .mainnavigation li:last-of-type {
        border-bottom: 1px solid black;
    }
    header ~ section:first-of-type {
        padding-top: 150px;
    }
    .row.kontaktdaten > div {
        margin-bottom: 20px;
    }
    section .headline-image .headlines {
        max-width: 540px;
    }
}
@media (max-width: 575px){
    section .headline-image .headlines {
        max-width: 100%;
    }
    footer .flyer a {
        float: right;
    }
}
@media (max-width: 500px){
    section .headline-image h1, section .headline-image h2 {
        font-size: 2.5em;
    }
    section .headline-image h3 {
        font-size: 1.5em
    }
}