:root {
    --site-background-color: #65a84a;
    --site-font-family: "Playpen Sans", cursive;
    --site-font-weight: 400;
    --site-font-weight-bold: 800;
    --navbar-background-color: #43b3ff;
    --navbar-border-color: #004aad;
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    background-color: var(--site-background-color);

    font-family: var(--site-font-family);
    font-optical-sizing: auto;
    font-weight: var(--site-font-weight);

    height: 100%;
    margin: 0;
    padding: 0;
    padding-top: 80px;
}

.font-bold {
    font-weight: var(--site-font-weight-bold);
}



/* ---------------------------- */
/*            NAVBAR            */
/* ---------------------------- */

.navbar {
    background-color: var(--navbar-background-color);
    border-bottom: 1px solid var(--navbar-border-color);
}

.navbar-brand {
    margin-right: 0px;
 }

.navbar-brand-logo {
    content:url(../img/header-logo.png);
    width: 265px;
    height: 55px;
    padding-right: 15px;
    padding-top: 5px;
    border-right: 1px solid var(--navbar-border-color);
}

.navbar-logo-activity {
    content: url(../img/category-activity-logo.png);
    width: 60px;
    height: 60px;
}

.navbar-logo-coloring {
    content: url(../img/category-coloring-logo.png);
    width: 60px;
    height: 60px;
}

.navbar-logo-tales {
    content: url(../img/category-tales-logo.png);
    width: 85px;
    height: 60px;
    padding-right: 25px;
    border-right: 1px solid var(--navbar-border-color);
}


.navbar-logo-tiktok {
    content: url(../img/logo-tiktok.png);
    width: 60px;
    height: 60px;
}

.navbar-logo-instagram {
    content: url(../img/logo-instagram.png);
    width: 60px;
    height: 60px;
}

.navbar-logo-facebook {
    content: url(../img/logo-facebook.png);
    width: 60px;
    height: 60px;
}

.navbar-nav .nav-item {
/*    border-left: 1px solid var(--navbar-border-color);*/
    padding: 0px 15px;
    height: 60px;
    cursor: pointer;
}

    .navbar-nav .nav-item:hover {
        font-weight: var(--site-font-weight-bold);
    }

    .navbar-nav .nav-item .nav-link {
        padding-top: 18px;
    }


/* ---------------------------- */
/*          ANIMAZIONI          */
/* ---------------------------- */

@keyframes animation-logo-bouncing {
    0% {
        transform: scale(1) translateY(0);
    }

    10% {
        transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, .9)) translateY(0);
    }

    30% {
        transform: scale(var(--fa-bounce-jump-scale-x, .9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -.5em));
    }

    50% {
        transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, .95)) translateY(0);
    }

    57% {
        transform: scale(1) translateY(var(--fa-bounce-rebound, -.125em));
    }

    64% {
        transform: scale(1) translateY(0);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes animation-appear-top {
    to {
        top: 0px;
        opacity: 1;
    }
}

@keyframes animation-appear-left {
    to {
        left: 0px;
        opacity: 1;
    }
}

@keyframes animation-appear-right {
    to {
        right: 0px;
        opacity: 1;
    }
}

@keyframes animation-fade-in {
    to {
        opacity: 1;
    }
}



/* ---------------------------- */
/*          PAGINA HOME         */
/* ---------------------------- */

.home-logo-container {
    position: relative;
    top: -200%;
    opacity: 0;
    animation: animation-appear-top 1s ease forwards, animation-logo-bouncing 2s ease 1s;
    height: 100%;
}

.home-logo {
    content: url(../img/home_logo.png);
    width: 100%;
    height: 100%;
    margin: auto;

    /*left: 0;
    right: 0;
    bottom: 0;*/
    /*margin: auto;
    margin-top: 80px;*/
    /*animation-name: home-logo-loading;
    animation-delay: 0s;
    animation-direction: normal;
    animation-duration: 8s;
    animation-iteration-count: 1;*/
    /*animation-timing-function: cubic-bezier(.28,.84,.42,1);*/
}




/* ---------------------------- */
/*        PAGINA CATEGORIE      */
/* ---------------------------- */

.categories-page {
    padding: 50px 0
}

h4 {
    color: #444
}

.categoriesTable {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: 650px;
    transition: all .3s ease 0s;
    cursor: pointer;
}

    .categoriesTable.red {
        left: -200%;
        animation: animation-appear-left 1s ease forwards;
    }

    .categoriesTable.blue {
        top: -200%;
        animation: animation-appear-top 1s ease forwards;
    }

    .categoriesTable.green {
        right: -200%;
        animation: animation-appear-right 1s ease forwards;
    }

    .categoriesTable:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, .8) inset, 0 0 10px rgba(0, 0, 0, .8)
}

    .categoriesTable svg {
        display: block;
        margin-left: -1px
    }

    .categoriesTable .title {
        font-size: 35px;
        font-weight: 600;
        color: #ae003d;
        text-transform: uppercase;
        margin: 0 0 10px
    }

    .categoriesTable .category-content {
        padding: 50px 0 30px;
        position: relative
    }

    .categoriesTable .category-content-description {
        padding: 15px 25px 0px 25px;
        margin: 0 0 30px;
        list-style: none;
    }

    .categoriesTable .categoriesTable-signup {
        display: inline-block;
        padding: 8px 50px;
        background: #ae003d;
        border-radius: 20px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        position: relative;
        transition: all .3s ease 0s;
        text-decoration: none;
    }

    .categoriesTable.blue .title {
        color: #004aad
    }

    .categoriesTable.blue .categoriesTable-signup {
        background: #004aad
    }

        .categoriesTable.blue .categoriesTable-signup:hover {
            box-shadow: 0 0 10px #004aad
        }

    .categoriesTable.blue .categoriesTable-signup:hover {
        /*box-shadow: 0 0 10px #004aad, 0 0 10px #000 inset*/
    }


    .categoriesTable.red .title {
        color: #ff3131
    }

    .categoriesTable.red .categoriesTable-signup {
        background: #ff3131
    }

        .categoriesTable.red .categoriesTable-signup:hover {
            box-shadow: 0 0 10px #ff3131
        }

    .categoriesTable.red .categoriesTable-signup:hover {
        /*box-shadow: 0 0 10px #ff3131, 0 0 10px #000 inset*/
    }


    .categoriesTable.green .title {
        color: #ffbd59
    }

    .categoriesTable.green .categoriesTable-signup {
        background: #ffbd59
    }

        .categoriesTable.green .categoriesTable-signup:hover {
            box-shadow: 0 0 10px #ffbd59
        }

    .categoriesTable.green .categoriesTable-signup:hover {
        /*box-shadow: 0 0 10px #ffbd59, 0 0 10px #000 inset*/
    }

@media only screen and (max-width:990px) {
    .categoriesTable {
        margin-bottom: 30px
    }
}



/* ---------------------------- */
/*          PAGINA LIBRI        */
/* ---------------------------- */

.books-page {
    padding: 50px 15px;
}

.coming-soon-logo-container {
    position: relative;
    top: -200%;
    opacity: 0;
    animation: animation-appear-top 1s ease forwards;
    height: 100%;
}

.coming-soon-logo {
    content: url(../img/coming-soon-logo.png);
    width: 100%;
    height: 100%;
    margin: auto;
}


.BookRow {
    padding: 25px 0px 25px 15px;
    background-color: white;
    border: 1px solid white;
    border-radius: 15px;
    margin-bottom: 50px;
    box-shadow: 0 .5rem 1rem #000000;
    position: relative;
}

.BookRowWithCarousel {
    /* padding-bottom: 55px; */
}

    .BookRow.slide-left {
        left: -200%;
        animation: animation-appear-left 1s ease forwards;
    }

    .BookRow.slide-right {
        right: -200%;
        animation: animation-appear-right 1s ease forwards;
    }

.BookPicture {
    max-height: 400px;
    max-width: 300px;
    border: 1px solid #000;
}

.BookTitleRow {
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 20px 0px;
    border-bottom: 1px dashed var(--navbar-border-color);
}

.BookTitle {
    font-size: 3em;
}

.BookDescriptionRow {
    margin: 20px 0px 15px 0px;
    padding: 0px;
    min-height: 140px;
}

.BookDescription {
    white-space: pre-wrap;
}

.BookAmazonButton {
    background-color: #ffd814;
    color: #000;
    margin-right: 15px;
    width: 120px;
}

    .BookAmazonButton i {
        font-size: 1.5em;
        color: #000;
    }

    .BookAmazonButton:hover {
        background-color: #ffd814;
        color: #000;
        box-shadow: 0px 0px 20px #ffa41c;
    }

.BookYearLogo {
    width: 80px;
    height: 80px;
    margin-right: 25px;
}

    .BookYearLogo.Year-3 {
        content: url(../img/year-logo-3.png);
    }

    .BookYearLogo.Year-5 {
        content: url(../img/year-logo-5.png);
    }

    .BookYearLogo.Year-10 {
        content: url(../img/year-logo-10.png);
    }


.carousel {
    width: 50%;
    margin-bottom: 25px;
}

@media (min-width: 576px) {
    .carousel {
        width: 100%;
        margin-bottom: 0px;
    }
}

.carousel-control-next, .carousel-control-prev {
    /*top: 350px;*/  /* 410 */
    top: 90%;
    opacity: 1;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-size: 50%;
    background-color: #004aad;
    border-radius: 5px;
    opacity: 1;
    width: 1.5rem;
    height: 1.5rem;
}

.carousel-indicators {
    bottom: 0px;  /* -42 */
}

    .carousel-indicators [data-bs-target] {
        border: 1px solid #004aad;
        border-radius: 5px;
    }

    .carousel-indicators .active {
        opacity: 1;
        background-color: #004aad;
    }


/* ---------------------------- */
/*         PAGINA CONTATTI      */
/* ---------------------------- */

.contact-page {
padding: 50px 15px;
}

.contact-page a {
    text-decoration: none !important;
    color: #000;
    font-weight: var(--site-font-weight-bold);
}

.contactTable {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    /*height: 480px;
    width: 430px;*/
    padding: 15px;
    margin-bottom: 25px;
    transition: all .3s ease 0s;
}

    .contactTable:hover {
        box-shadow: 0px 0px 20px #000;
    }

    .contactTable.facebook {
        top: -200%;
        animation: animation-appear-top 1s ease forwards;
    }

        .contactTable.facebook img {
            width: 100%;
            height: 100%;
            content: url("../img/contact-us-facebook.png");
        }


    .contactTable.mail {
        top: -200%;
        animation: animation-appear-top 1s ease forwards;
    }

        .contactTable.mail img {
            width: 100%;
            height: 100%;
            content: url("../img/contact-us-mail.png");
        }


    .contactTable.instagram {
        top: -200%;
        animation: animation-appear-top 1s ease forwards;
    }

        .contactTable.instagram img {
            width: 100%;
            height: 100%;
            content: url("../img/contact-us-instagram.png");
        }

    .contactTable.tiktok {
        top: -200%;
        animation: animation-appear-top 1s ease forwards;
    }

        .contactTable.tiktok img {
            width: 100%;
            height: 100%;
            content: url("../img/contact-us-tiktok.png");
        }

    .contactTable div {
        border-top: 1px solid var(--navbar-border-color);
        padding-top: 15px;
    }


/* ---------------------------- */
/*      PAGINA CHI SIAMO        */
/* ---------------------------- */

.about-page {
    padding: 10px 0;
}

.about-text {

}

.about-stripe {
    opacity: 0;
}

    .about-stripe svg {
        width: 600px;
    }

    .about-stripe.stripe-1 {
        animation: animation-fade-in 2s ease forwards;
    }

    .about-stripe.stripe-2 {
        margin-top: 60px;
        animation: animation-fade-in 2s ease forwards 1s;
    }

    .about-stripe.stripe-3 {
        margin-top: 0px;
        animation: animation-fade-in 2s ease forwards 2s;
    }

    .about-stripe.stripe-4 {
        margin-top: 50px;
        animation: animation-fade-in 2s ease forwards 3s;
    }

    .about-stripe.stripe-5 {
        margin-top: 50px;
        marign-left: 0px;
        animation: animation-fade-in 2s ease forwards 4s;
    }

    .about-stripe.stripe-6 {
        margin-top: 50px;
        animation: animation-fade-in 2s ease forwards 5s;
    }