@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Cardo';
    src: url('../fonts/Cardo/Cardo-Regular.ttf') format('truetype');
}

* {
	font-family: 'Cardo', serif;
    color: #666;
}

body {
    background-color: #eee;
}

h1, h2 {
    color: #314e69;
    margin-left: -0.1rem;
    margin-bottom: 1.45rem;
    text-transform: uppercase;
    font-size: 2.2rem;
}

h2 {
    font-size: 1.5rem;
    margin-top: 3rem;
}

p {
    font-size:  1.2rem;
}

a {
	color: #bfc5cc;
}
a:hover {
	color: #314e69;
    text-decoration: none;
}

.zitat {
    color: #314e69;
}

td {
    border: 0 !important;
    padding: 0 0.75rem !important;
    width: 50%;
}

td:first-child {
    text-align: right;
}

.container {
    background-color: #fff;
    padding: 0;
    overflow-x: hidden;
    box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.41);
}

header {    
    background: linear-gradient(-2.95deg,transparent 49.5%,transparent 1%,#ffffff 50.3%);
    height: 15rem;
    z-index: 15;
    position: relative;
}

header img {
    position: absolute;
    top: 4.75rem;
    width: 25rem;
    left: 12rem;
}

.aufmacher {
    margin-top: -12rem;
}

.biografie {
    margin: 3rem 0 3rem 0;
    /*height: 360px;*/
    overflow: hidden;
}

.moreclick {
    font-size:  4rem;
    transform: rotate(180deg);
    cursor: pointer;
    color: #bfc5cc;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.moreclick:hover {
    color: #314e69;
}

.carousel-caption {
    right: auto;
    bottom: 0;
    left: 2rem;
    z-index: 10;
    padding: 0; 
}

.carousel-caption p {
    color: #fff;
    font-size: 0.9rem;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    transform: rotate(270deg);
    font-size: 8rem;
    height: 100px;
    width: auto;
    color: #bfc5cc;
    background: 0;
}

.carousel-control-prev,  .carousel-control-next {
    width: 5rem;
}

.carousel-control-next-icon {
    transform: rotate(90deg);
}

.werke .carousel-control-prev {
    bottom: 30%;
    right: 0;
    left: auto;
}

.werke .carousel-control-next {
    top: 0%;
}

.werke .carousel-control-prev-icon {
    transform: rotate(0deg);
    font-size: 4rem;
    height: 80px;
}

.werke .carousel-control-next-icon {
    transform: rotate(180deg);
    font-size: 4rem;
    height: 80px;
}

.carousel-indicators {
    bottom: -3rem;
}

.werke {
    margin: 3rem 0;
    height: 36rem;
}

.werke .nav {
    justify-content: center;
}

.werke .nav a {
    font-style: italic;
    margin-left: -0.1rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-size: 2.5rem;
    padding: 0 .5rem;
}

.werke .nav a.active {
    color: #314e69;
}

.vert .carousel-item {
    height: 31rem;
}

.vert .carousel-item img {
    width: 45%;
}

.vert .carousel-item-next.carousel-item-left, .vert .carousel-item-prev.carousel-item-right {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next, .vert .active.carousel-item-right {
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}

.vert .carousel-item-prev, .vert .active.carousel-item-left {
        -webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

.vert .carousel-control-prev, .vert .carousel-control-next {
    width: 5%;
}

.kontakt {
    text-align: center;
    background-color: #bfc5cc;
    padding: 1rem 0 0 0;
}

.kontakt a {
    color: #314e69;
}

.abbinder {
    background: linear-gradient(-2.95deg,transparent 49.5%,transparent 1%,#bfc5cc 50.3%);
    height: 11rem;
    position: relative;
}

.metanav {
    height: 8rem;
    text-align: center;
}

.metanav span {
    color: #bfc5cc;
    position: absolute;
    bottom: 3rem;
    left: 0;
    right: 0;
}

.metanav img {
    width: 8vH;
    padding-bottom: 1.5rem;
}

@media (max-width: 1199.98px) {
    header img {
        top: 4.55rem;
        left: 10.5rem;
    }
    .werke {
        height: 45rem;
    }
    .werke .carousel-control-prev {
        bottom: 40%;
    }
    .werke .carousel-control-next {
        top: -20%;
    }
    .vert  .carousel-item {
        height: 39rem;
    }
}

@media (max-width: 991.98px) {
    header {    
        height: 10rem;
    }
    header img {
        width: 15rem;
        top: 3.35rem;
        left: 8.4rem;
    }
    .aufmacher {
        margin-top: -8rem;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        font-size: 5rem;
    }
    .werke {
        height: 45rem;
    }
    .vert  .carousel-item {
        height: 50rem;
    }
    .vert .carousel-item img {
        width: 90%;
    }
}


@media (max-width: 575.98px) {
    h1, h2, .werke .nav a {
        font-size: 1.5rem;
    }
    header img {
        top: 8%;
        left: 12%;
        width: 12rem;
    }
    .carousel-caption {
        left: .5rem;
    }
    .werke {
        height: 40rem;
    }
    .werke p {
        font-size: 1rem;
        line-height: 1.25rem;
    }
    
    .werke .carousel-control-prev {
        bottom: 80%;
    }
    .werke .carousel-control-next {
        top: -65%;
    }
    .vert  .carousel-item {
        height: 55rem;
    }
}