/* hero-content-start */



.hero-content-img {
    background-image: url(img/hero-content-0.png);
    background-size: cover;
    border-radius: 16px;
    height: 60vh;
    background-position: center;

}

section.hero-content .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

section.hero-content .content .title {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4rem;
    /* flex vermemin sebebi başlık hiyerarşisini bozmamak. Flex sayesinde html'de h1 h2'nin üstüne geldi. */
}
/* hero-content-end */



/* biography start */

section.biography .large-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16vh;
}

section.biography .title {
    display: flex;
    flex-direction: column-reverse;
    padding-right: 10px;
    gap: 0.4rem;
}

.biography-img-black {
    background-image: url(img/buster-keaton-5-black.png);
    background-size: cover;
    height: 20vh;
    width: 8vw;
    background-position: center;
    align-self: flex-end;

}

/* -------JS --------for dark theme */
.biography-img-white {
    background-image: url(img/buster-keaton-5-white.png);
    background-size: cover;
    height: 20vh;
    width: 8vw;
    background-position: center;
    align-self: flex-end;

}

/* -------JS --------for dark theme */

section.biography>div.small-side {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

}

/* biography end */





/* filmography-start */

section.filmography>.small-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10vh 2vw;
}

section.filmography>div.small-side>div.title>h2 {
    margin-bottom: 0.5rem;
}

section.filmography>div.small-side>div.title>h3 {
    margin-bottom: 4rem;
}

.filmography-img-black {
    background-image: url(img/buster-keaton-2-black.png);
    background-size: cover;
    height: 20vh;
    width: 8vw;
    background-position: center;
    align-self: flex-end;

}


/* -------JS --------for dark theme */

.filmography-img-white {
    background-image: url(img/buster-keaton-2-white.png);
    background-size: cover;
    height: 32vh;
    width: 8vw;
    background-position: center;
    align-self: flex-end;

}

/* -------JS --------for dark theme */



/* filmography-end */






/* legacy-start */



section.legacy>.large-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32vh;
}

section.legacy>div.large-side>div.title {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
}

.legacy-img-black {
    background-image: url(img/buster-keaton-1-black.png);
    background-size: cover;
    height: 32vh;
    width: 12vw;
    background-position: center;
    align-self: flex-end;

}

/* -------JS --------for dark theme */

.legacy-img-white {
    background-image: url(img/buster-keaton-1-white.png);
    background-size: cover;
    height: 32vh;
    width: 12vw;
    background-position: center;
    align-self: flex-end;

}

/* -------JS --------for dark theme */

section.legacy>div.small-side {

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}



/* legacy-end */







/* Blog-start */




section.blog div.blogs {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4vw;
    padding: 40px 8vw 40px 8vw;
    padding: 40px;
    border-bottom: 1px solid var(--black);
    margin: 0px 1vw 40px 1vw;
}

section.blog>div.blogs>a>div.blog-post {


    flex: 1 1 0;
    min-height: 30vh;
    min-width: 16rem;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column-reverse;

}

section.blog>div.blogs>a>div.blog-post>div.blog-featured-img {

    background-image: url(img/image-4.png);
    min-height: 30vh;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    margin-bottom: 2rem;
}

section.blog>a>div.blogs div.blog-post>div.post-info {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 0.5rem 0rem;
}

section.blog>div.blogs>a>div.blog-post>div.blog-featured-img>h5.excerpt {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--black-overlay);
    text-align: center;
    color: var(--white);
    border-radius: 1rem;

}

section.blog>div.blogs>a {
    width: 100%;
    min-height: 100%;
    flex: 1 1 0;
    min-height: 30vh;
    min-width: 16rem;
    padding: 0.5rem 1rem;
    display: flex;
    /* flex-direction: column-reverse; */
}

section.blog>div.blogs>a>div.blog-post:hover>div.blog-featured-img>h5.excerpt {


    opacity: 1;


}


/* blog-end */





/* gallery-start */
section.gallery {
    margin: 40px 1vw 40px 1vw;

    /* display: flex; */

    padding: 40px 8vw 40px 8vw;
    /* border: 1px solid red; */
    border-top: 1px solid black;
    border-bottom: 1px solid black;

}

div.gallery {

    overflow: hidden;
}

section.gallery div.slider-button {
    display: flex;
    justify-content: space-evenly;
    margin: 4vh 0px;
}

section.gallery div.slider-button .bi {
    border: 1px solid var(--black);
    border-radius: 100px;
    padding: 1rem;
    color: var(--black);
    font-size: 2rem;
}

section.gallery div.slider-button .bi:hover {
    background-color: var(--black);
    color: var(--white);
}

section.gallery div.slider-button .bi:active {
    background-color: var(--black-overlay);
}


div.grid {
    min-width: 240vw;
    min-height: 80vh;

    display: grid;
    grid-template-columns: 21fr 21fr 21fr 29fr 19fr 21fr 7fr 14fr 14fr 7fr 21fr 21fr 7fr 14fr 14fr 7fr 21fr 19fr 29fr 21fr 21fr 21fr;

    grid-template-rows: 40fr 27fr 70fr 70fr;
    gap: 1.5rem;
    transition: margin-left 0.5s ease-in-out;

    /*slide-1 */


    /* margin-left: calc(100vw - 180vw); */
    /* slide2  */

    /* margin-left: calc(100vw - 260vw); */
    /* slide3  */


}



.grid-item:nth-child(1) {
    grid-area: 1 / 1 / 4 / 4;
    background-image: url(img/gallery/buster-keaton-photo-gallery30.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(2) {
    grid-area: 4 / 1 / 5 / 2;
    background-image: url(img/gallery/buster-keaton-photo-gallery07.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(3) {
    grid-area: 4 / 2 / 5 / 3;
    background-image: url(img/gallery/buster-keaton-photo-gallery18.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(4) {
    grid-area: 4 / 3 / 5 / 4;
    background-image: url(img/gallery/buster-keaton-photo-gallery27.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(5) {
    grid-area: 1 / 4 / 3 / 5;
    background-image: url(img/gallery/buster-keaton-photo-gallery29.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(6) {
    grid-area: 3 / 4 / 4 / 5;
    background-image: url(img/gallery/buster-keaton-photo-gallery21.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(7) {
    grid-area: 4 / 4 / 5 / 5;
    background-image: url(img/gallery/buster-keaton-photo-gallery22.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(8) {
    grid-area: 1 / 5 / 4 / 6;
    background-image: url(img/gallery/buster-keaton-photo-gallery26.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(9) {
    grid-area: 4 / 5 / 5 / 6;
    background-image: url(img/gallery/buster-keaton-photo-gallery01.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(10) {
    grid-area: 2 / 6 / 4 / 7;
    background-image: url(img/gallery/buster-keaton-photo-gallery15.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(31) {
    grid-area: 1 / 6 / 2 / 18;
    /* background-image: url(/buster-keaton-web-site/img/gallery/buster-keaton-photo-gallery15.png); */
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(11) {
    grid-area: 4 / 6 / 5 / 8;
    background-image: url(img/gallery/buster-keaton-photo-gallery12.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(12) {
    grid-area: 2 / 7 / 4 / 9;
    background-image: url(img/gallery/buster-keaton-photo-gallery20.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(13) {
    grid-area: 2 / 9 / 4 / 11;
    background-image: url(img/gallery/buster-keaton-photo-gallery13.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(14) {
    grid-area: 2 / 11 / 4 / 12;
    background-image: url(img/gallery/buster-keaton-photo-gallery24.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(15) {
    grid-area: 4 / 8 / 5 / 10;
    background-image: url(img/gallery/buster-keaton-photo-gallery10.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(16) {
    grid-area: 4 / 10 / 5 / 12;
    background-image: url(img/gallery/buster-keaton-photo-gallery09.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(17) {
    grid-area: 4 / 10 / 5 / 12;
    background-image: url(img/gallery/buster-keaton-photo-gallery09.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(18) {
    grid-area: 2 / 12 / 4 / 13;
    background-image: url(img/gallery/buster-keaton-photo-gallery03.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(19) {
    grid-area: 2 / 13 / 4 / 15;
    background-image: url(img/gallery/buster-keaton-photo-gallery06.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(20) {
    grid-area: 2 / 15 / 4 / 17;
    background-image: url(img/gallery/buster-keaton-photo-gallery16.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(21) {
    grid-area: 4 / 12 / 5 / 14;
    background-image: url(img/gallery/buster-keaton-photo-gallery11.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(22) {
    grid-area: 4 / 14 / 5 / 16;
    background-image: url(img/gallery/buster-keaton-photo-gallery19.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(23) {
    grid-area: 4 / 16 / 5 / 18;
    background-image: url(img/gallery/buster-keaton-photo-gallery25.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(24) {
    grid-area: 2 / 17 / 4 / 18;
    background-image: url(img/gallery/buster-keaton-photo-gallery17.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(25) {
    grid-area: 1 / 18 / 4 / 19;
    background-image: url(img/gallery/buster-keaton-photo-gallery14.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(26) {
    grid-area: 4 / 18 / 5 / 19;
    background-image: url(img/gallery/buster-keaton-photo-gallery05.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(27) {
    grid-area: 1 / 19 / 3 / 20;
    background-image: url(img/gallery/buster-keaton-photo-gallery28.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(28) {
    grid-area: 3 / 19 / 4 / 20;
    background-image: url(img/gallery/buster-keaton-photo-gallery04.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(29) {
    grid-area: 3 / 19 / 4 / 20;
    background-image: url(img/gallery/buster-keaton-photo-gallery04.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(30) {
    grid-area: 4 / 19 / 5 / 20;
    background-image: url(img/gallery/buster-keaton-photo-gallery08.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(32) {
    grid-area: 1 / 20 / 4 / 23;
    background-image: url(img/gallery/buster-keaton-photo-gallery02.png);
    background-position: center;
    background-size: cover;
}

.grid-item:nth-child(33) {
    grid-area: 4 / 20 / 5 / 21;
    background-image: url(img/gallery/buster-keaton-photo-gallery23.png);
    background-position: center;
    background-size: cover;
}

/* galery-end */




/* contact-start */


section.contact {
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

section.contact div.contact-form {

    margin: 20px 10vw 40px 10vw;
}

.personal-information {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 20px;
}

.user-message {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    align-items: center;

}

label {
    display: flex;
    flex-direction: column;
    gap: 2px;

}

input {
    background-color: var(--white);
    border: none;
    border-bottom: 1px solid var(--black);
    min-height: 40px;
    min-width: 20vw;
}

textarea {
    background-color: var(--white);
    border: none;
    border-bottom: 1px solid var(--black);
    min-height: 40px;
    min-width: 20vw;
    margin-bottom: 20px;
}

/* contact-end */



@media only screen and (max-width: 750px) {




/* biography-start */

section.biography .large-side {
    gap: 4vh;
}

.biography-img-black {
    width: 40vw;
    height: 60vh;
    align-self: center;
}

/* biography-end */

/* filmography-start */


.filmography-img-black {
    width: 40vw;
    height: 60vh;
    align-self: center;
}

section.filmography>.small-side {
    flex-direction: column-reverse;
    padding-bottom: 2vh;
    margin-bottom: 4vh;
}
.border-button {
    align-self: center;
}

/* filmography-end */




    /* legacy-start */

    section.legacy>.large-side {
        gap: 4vh;
    }

    section.legacy>.small-side {
        gap: 4vh;
    }

    .legacy-img-black {
        width: 60vw;
        height: 60vh;
        align-self: center;
        padding-bottom: 4vh;

    }

    /* legacy-start */





    /* blog start */

    section.blog>div.blogs>div.blog-post {
        min-width: 20rem;
    }

    hr {
        display: none;
    }

    /* blog-end */

    /* gallery-start */


    div.grid {
        min-height: 35vh;
        gap: 0.5rem;


    }

    /* gallery-end */




    /* contact-start */

    .user-message {
        flex-direction: column;
    }

    .personal-information {
        flex-direction: column;
    }

    /* contact-end */
























}