/* ======== RESPONSIVE CSS ========= */


/* ===================================================
		MIN WIDTH 
=================================================== */

@media screen and (min-width: 600px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    .overlapping-img {
        position: absolute;
        z-index: 1;
        transform: rotate(-2deg);
        max-width: 350px;
    }

    #oler-family {
        right: -50px;
    }

    .desktop-spacer {
        height: 150px;
    }

    .card-section {
        min-height: 900px;
    }

    .card-container {
        position: absolute;
        top: -100px;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    /* #oler-family {
        top: -50px;
    } */
}

@media screen and (min-width: 1500px) {}



/* ===================================================
		MAX WIDTH 
=================================================== */
/* mobile displays that are shown under the large breakpoint (992px) */
@media screen and (max-width: 1199px) {

    h1,
    .h1 {
        font-size: 75px;
    }

    .book-contents .h2 {
        font-size: 24px;
    }

    .book-contents h3 {
        font-size: 22px;
    }
}

@media screen and (max-width: 991px) {
    .book-contents .header-logo {
        width: 120px;
    }

    .book-contents .form-box p {
        font-size: 16px;
        margin-block-end: 5px;
    }
}

/* mobile displays that are shown under the medium breakpoint (768px) */
@media screen and (max-width: 767px) {

    .splash,
    .right-page-mobile-size,
    .book-cover {
        height: 140vw;
        min-height: 630px;
    }

    .scene {
        width: 100%;
        margin: 0 0 0 0;
    }

    .right-page .book-photo {
        width: 40%;
    }

    .book-contents h3 {
        font-size: 20px;
        max-width: 350px;
        width: 85%;
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    h2 {
        font-size: 24px;
    }
}


@media screen and (max-width: 500px) {
    h1 {
        font-size: 45px;
    }
}

@media screen and (max-width: 400px) {
    h2 {
        font-size: 20px;
    }
}

@media screen and (max-width: 350px) {}

@media screen and (max-width: 300px) {}




/* ===================================================
		MIN - MAX WIDTH 
=================================================== */
@media (min-width: 351px) and (max-width: 500px) {}

/* 501px - 991px LARGE size */
@media (min-width: 501px) and (max-width: 991px) {}

/* 768px - 991px MEDIUM Size */
@media (min-width: 768px) and (max-width: 991px) {}

/* 768px - 1200px MEDIUM AND LARGE Size */
@media (min-width: 768px) and (max-width: 1199px) {}

/* 992px - 1199px LARGE size */
@media (min-width: 992px) and (max-width: 1199px) {}