@supports (-webkit-overflow-scrolling: touch) {

    header {
        background-attachment: scroll;
    }
}

/*big tablet to 1200px: widths smaller than the 1140px row*/
@media only screen and (max-width: 1200px) {
    .hero-text-box {
        width: 100%;
        padding: 0 5%;
    }

    .row {
        padding: 0 5%;
    }

    .buch-informationen {
        font-size: 85%;
    }

    .bild-information .beschriftung {
        width: 32vw;
        font-size: 90%;
    }
}

/* Small tablet to big tablet: from 767 to 1023px*/
@media only screen and (max-width: 1023px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 180%;
    }

    section {
        padding: 60px 0;
    }

    .long-copy {
        width: 80%;
        margin-left: 10%;
    }

    .buch {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column
    }

    .ud_book_box {
        margin: 30px;
    }

    .bilder__liste {
        -webkit-column-count: 3;
        column-count: 3;
    }

    
    .contact-form {
        width: 80%;
    }

    .profilbild {
        height: 300px;
    }

    .bild-information .beschriftung {
        font-size: 80%;
    }

    .slider-nav button {
        font-size: 2.5vw;
        padding: 0.1filevw 0.1vw;
    }
}


/* small phones to small tablets: from 481 to 767px*/
@media only screen and (max-width: 767px) {
    body {
        font-size: 16px;
    }

    section {
        padding: 30px 0;
    }

    .row,
    .hero-text-box {
        padding: 0 4%;
    }

    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }

    .logo {
        height: 30px;
        margin: 5px 0px;
    }

    .mobile-nav-icon {
        display: inline-block;
        font-size: 80%;
        margin: 8px 20px;
        float: right;
        position: absolute;
        top: 0;
        right: 0;
    }

    .main-nav {
        display: none;
        margin: 10px 0;
    }

    .main-nav li {
        display: block;
        padding-bottom: 0;
        margin-left: 20px;
        margin-right: 40px;
    }

    .logo-text {
        font-size: 150%;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding-top: 4px;
        font-size: 90%;
    }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding-top: 4px;
    }

    .sticky .mobile-nav-icon i {
        color: #555;
    }

    h1 {
        font-size: 150%;
    }

    h2 {
        font-size: 130%
    }

    section {
        padding: 50px 0;
    }

    .hero-text-box span {
        font-size: 300%;
    }

    .section-buecher h3 {
        font-size: 110%;
    }

    .long-copy {
        width: 100%;
        margin-left: 0%;
    }

    .buch-informationen {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        font-size: 100%;
        line-height: 160%;
        margin-top: 10px;
    }

    iframe {
        transform: scale(0.8);
        height: 115%;
        width: 115%;
        position: absolute;
    }

    .bilder__liste {
        -webkit-column-count: 2;
        column-count: 2;
    }

    .thumbnail p {
        display: none;
    }

    .bild-information .beschriftung {
        width: 34vw;
        font-size: 65%;
        top: -30vw;
    }
    
    .close {
    position: absolute;
    top:-1%;
    right: 0;
    padding: 3px 20px;
    font-size: 300%;
}

}

/* Small phones: from 392 to 480px*/
@media only screen and (max-width: 480px) {

    .contact-form {
        width: 100%;
    }

    .profilbild {
        height: 200px;
    }

    .beschriftung {
        padding: 10px
    }

    iframe {
        transform: scale(0.55);
        height: 150%;
        width: 175%;
        position: absolute;
    }

    .bild-information .beschriftung {
        width: 34vw;
        font-size: 50%;
        top: -30vw;
    }
}

/* Small phones: from 0 to 420px*/
@media only screen and (max-width: 420px) {

    h1 {
        font-size: 120%
    }

    .btn:link,
    .btn:visited,
    input[type=submit] {
        padding: 10px 13px;
    }

    .ueber_mich__content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-flow: column-reverse;
        flex-flow: column-reverse
    }

    .profilbild {
        height: 200px;
        margin-bottom: 30px;
    }

    .bilder__liste {
        -webkit-column-count: 1;
        column-count: 1;
    }

    .beschriftung {
        font-size: 85%;
        right: 2%;
        left: 2%;
    }

}

@media only screen and (max-height: 768px) {

    .hero-text-box {
        top: 40%;
    }
}

@media only screen and (max-height: 560px) {

    .hero-text-box {
        top: 50%;
    }
}