/*-------------------------------------------------------*/
/*'About Paldea' page CSS--------------------------------*/
/*-------------------------------------------------------*/

/*-----------------------------------------------------------------*/
/*"About Paldea" timeline -----------------------------------------*/
/*-----------------------------------------------------------------*/

.timeline ul li {
    list-style-type: none;
    position: relative;
    width: 6px;
    margin: 0 auto;
    padding-top: 50px;
    background: var(--background-light);
}

.timeline ul li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) rotate(55deg);
    width: 20px;
    height: 20px;
    z-index: 1;
    background: var(--background-dark);
}

.timeline ul li div {
    position: relative;
    bottom: 0;
    width: 401px;
    padding: 19px;
    background: var(--almost-white);
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 7px;
    display: flex;
    align-items: center;
}

.timeline ul li div time {
    position: absolute;
    background: var(--light-grey);
    width: fit-content;
    padding: 5px;
    height: 31px;
    top: -15px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 3px;
}

/*Split the timeline element to left and right*/

.timeline ul li:nth-of-type(odd)>div {
    left: -439px;
}

.timeline ul li:nth-of-type(even)>div {
    left: 45px;
}

.timeline ul li div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease-in-out;
}

.timeline ul li:nth-of-type(odd) div {
    transform: translate3d(101px, -11px, 0) rotate(15deg);
}

.timeline ul li:nth-of-type(even) div {
    transform: translate3d(-99px, -11px, 0) rotate(15deg);
}

.timeline ul li.in-view div {
    transform: none;
    visibility: visible;
    opacity: 1;
}

/*---------------------------------------------------------------*/
/*'About Paldea': Desktop----------------------------------------*/
/*---------------------------------------------------------------*/


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

    /*--------------------------------------------------------------------*/
    /*Sticky navigation bar on desktop------------------------------------*/
    /*--------------------------------------------------------------------*/

    /*Remove the page header to increase the main content viewport space when the navigation bar becomes sticky*/
    .nav-bar.sticky .company-name-JSON {
        display: none;
    }

    /*---------------------------------------------------------------*/
    /*main grid------------------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*main page grid*/
    .paldea-grid-container {
        display: grid;
        gap: 10px;
        grid-template-columns: auto;
        grid-row-gap: 50px;
        margin-top: 1.5em;
        padding-left: 25%;
        padding-right: 25%;
        padding-bottom: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .paldea-grid-container>div {
        text-align: left;
        max-width: 100%;
    }

    .paldea-item1 {
        padding: 20px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    .paldea-item2 {
        padding: 20px;
    }

    .videoInsert {
        width: 100%;
        height: auto;
        z-index: -100;
        background-size: cover;
        overflow: hidden;
    }

    .paldea-item3 {
        margin: auto;
        justify-content: center;
        bottom: 0;
        width: 400px;
        padding: 20px;
        background: var(--almost-white);
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        display: flex;
        align-items: center;
    }

}

/*---------------------------------------------------------------*/
/*'About Paldea': Mobile-----------------------------------------*/
/*---------------------------------------------------------------*/
@media screen and (max-width: 700px) {

    /*---------------------------------------------------------------*/
    /*main grid------------------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*main page grid*/
    .paldea-grid-container {
        display: grid;
        gap: 10px;
        grid-template-columns: auto;
        grid-row-gap: 50px;
        margin-top: 1.5em;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .paldea-grid-container>div {
        text-align: left;
        max-width: 100%;
    }

    .paldea-item1 {
        padding: 20px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    .paldea-item2 {
        padding: 20px;
    }

    .videoInsert {
        width: 100%;
        height: auto;
        z-index: -100;
        background-size: cover;
        overflow: hidden;
    }

    .paldea-item3 {
        margin: auto;
        justify-content: center;
        bottom: 0;
        padding: 20px;
        background: var(--almost-white);
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        display: flex;
        align-items: center;
    }

    .timeline ul li {
        margin-left: 20px;

    }

    .timeline ul li div {
        width: calc(75vw - 150px);
    }

    .timeline ul li:nth-of-type(odd)>div {
        left: 45px;
    }
}

/*-------------------------------------------*/
/*'About Paldea': Tablet---------------------*/
/*-------------------------------------------*/

@media screen and (min-width: 700px) and (max-width: 1080px) {

    /*---------------------------------------------------------------*/
    /*main grid------------------------------------------------------*/
    /*---------------------------------------------------------------*/

    /*main page grid*/
    .paldea-grid-container {
        display: grid;
        gap: 10px;
        grid-template-columns: auto;
        grid-row-gap: 50px;
        margin-top: 1.5em;
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 50px;
        min-width: 0px;
    }

    /*border padding and grid width set up*/
    .paldea-grid-container>div {
        text-align: left;
        max-width: 100%;
    }

    .paldea-item1 {
        padding: 20px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    .paldea-item2 {
        padding: 20px;
    }

    .videoInsert {
        width: 100%;
        height: auto;
        z-index: -100;
        background-size: cover;
        overflow: hidden;
    }

    .paldea-item3 {
        margin: auto;
        justify-content: center;
        bottom: 0;
        width: 400px;
        padding: 20px;
        background: var(--almost-white);
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        display: flex;
        align-items: center;
    }


    .timeline ul li div {
        width: 200px;
        flex-direction: column;
    }

    .timeline ul li div div {
        width: 70%;
        margin: 8px;
    }

    .timeline ul li:nth-of-type(odd)>div {
        left: -289px;
    }

}