.page.experiences{
    justify-content: flex-start;
    align-items: center;
}

    .page.experiences > main{
        width: 80%;
        max-width: 1020px;
        padding: 100px 0;
    }

        .page.experiences > main > .subtitle{
            margin-top: 10px;
            transform: translateX(-100px);
            transition: 500ms ease;
        }

        .page.experiences > main > h1{
            transform: translateX(-100px);
            transition: 500ms ease;
        }

        .page.experiences.v > main > .subtitle, .page.experiences.v > main > h1{
            transform: translateX(0px);
            transition: 500ms ease 500ms;
        }

    .page.experiences section{
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 100px;
    }

        .page.experiences section .dots{
            flex: none;
            width: 20px;
            box-sizing: content-box;
            padding: 0 20px;

            /* background-color: violet; */
            display: flex;
            flex-direction: column;
            align-items: center;
            /* justify-content: flex-end; */
        }

            .page.experiences .dots .dot{
                flex: none;
                width: 12px;
                height: 12px;
                margin: 5px 0;

                border-radius: 50%;
                border: 2px solid var(--color-main);
                background-color: transparent;

                transition: 600ms linear;
            }

            .page.experiences .dots .dot.v{
                width: 18px;
                height: 18px;

                background-color: var(--color-main);
            }

            .page.experiences .dots .dot.v2{
                width: 0px;
                height: 0px;
                margin: 0px;
                border: 0px solid var(--color-main);
            }

            .page.experiences .dots .line{
                flex: 0 1 auto;
                width: 2px;
                height: 0px;
                margin: 0px 0px 0px 0px;

                background-color: var(--color-0);
                transition: 600ms cubic-bezier(1,-0.5,.4,1);
            }

            .page.experiences .dots .line.v{
                height: 74px;
                margin: 0px 0px 20px 0px;
            }
            
            .page.experiences .dots .line.v2{
                height: 180px;
                margin: 20px 0px 10px 0px;
            }

        .page.experiences section article{
            flex: 1 0 auto;
            width: 200px;
            max-width: 400px;

            /* background-color: red; */

            display: flex;
            flex-direction: column;
        }

            .page.experiences section article{
                transform: translateY(0px);
                opacity: 1;
                transition: 150ms ease;
            }
            
            .page.experiences section article.o0{
                transform: translateY(-80px);
                opacity: 0;
                transition: 400ms cubic-bezier(1,-0.5,.4,1);
            }

            .page.experiences section article.o0.o1{
                transform: translateY(80px);
                opacity: 0;
                transition: none;
            }

            .page.experiences section article > *{
                margin-left: 65px;
            }

            .page.experiences section article h3{
                font-family: var(--philosopher);
                font-weight: var(--bold);
                font-size: 3.4rem;
                height: 70px;
            }

            .page.experiences section .subtitle{
                margin: 30px 0;
                padding-left: 0;
            }

            .page.experiences section article .p{
                margin-bottom: 30px;
            }

            .page.experiences section article footer{
                display: flex;
                align-items: center;
            }

                .page.experiences section article .button-next.replay{
                    display: none;
                    margin-right: 20px;
                    padding: 0;
                    width: 50px;
                }

                .page.experiences section article.end .button-next.replay{
                    display: flex;
                }

                .page.experiences section article .button-next.replay svg{
                    margin: 0;
                }

        .page.experiences section .shadow{
            flex: none;
            width: 300px;
            height: 400px;
            margin-left: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            /* background-color: rgb(190, 233, 226); */
            transform: translateX(100px);
            transition: 500ms ease;
        }

        .page.experiences.v section .shadow{
            transform: translateX(0px);
            transition: 500ms ease 500ms;
        }

            .page.experiences section .shadow .img{
                width: 100%;
                height: 400px;

                background-size: auto 400px;
                background-repeat: no-repeat;
                background-position: center;

                border: 2px solid var(--color-0);
            }

            .page.experiences section .shadow .rect{
                position: absolute;
                bottom: 40px;
                z-index: -1;

                width: 380px;
                height: 260px;

                border: 2px solid var(--color-main);
            }

            .page.experiences section .shadow .circle{
                position: absolute;
                right: -80px;
                top: -80px;
                z-index: -1;

                width: 320px;
                height: 320px;

                border-radius: 50%;
                border: 2px solid var(--color-main);
            }

/* media */

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

    .page.experiences > main{
        width: 90%;
        max-width: 300px;
        /* border: 1px solid purple; */
    }

    .page.experiences section{
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .page.experiences section .dots{
        display: none;
    }

    .page.experiences section article{
        width: 100%;
        order: 2;
        align-items: center;
    }
        .page.experiences section article > *{
            margin-left: 0;
        }
        .page.experiences section article h3{
            text-align: center;
            height: auto;
            font-size: 2.4rem;
        }
        .page.experiences section article .subtitle{
            flex-direction: column;
            align-items: center;
            margin: 15px 0 0 0;
        }
            .page.experiences section article .subtitle p{
                margin-top: 15px;
            }

        .page.experiences section article .p{
            margin: 50px 0;
        }    
        
    .page.experiences section .shadow{
        margin: 0 0 30px 0;
    }
        .page.experiences section .shadow div{
            display: none;
        }

}