/* =========================================================
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0d0d0d;
    overflow-x:hidden;
    font-family:Arial, Helvetica, sans-serif;
}
========================================================= */

.transitions{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.transitions .tr{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

    padding:40px;
}

.transitions h2{
    font-family: 'CeraPro';
    font-weight: 400;
    font-size:min(8vw, 12rem);
    letter-spacing: -0.04em;
    line-height:.9;
    text-align:center;
    color:white;
    white-space: nowrap;
}

@media (max-width:960px){

    .tr-01 h2{
        font-size:12vw;
        white-space: normal;

        max-width: 320px;

        margin: 0 auto;

        line-height: .95;

    }

    .tr-03 h2{

        font-size:14vw;
        white-space: normal;

        max-width: 320px;

        margin: 0 auto;

        line-height: .95;

    }

    .tr-04 h2{

        font-size:12vw;
        white-space: normal;

        max-width: 320px;

        margin: 0 auto;

        line-height: .95;

    }

    .tr-05 h2{

        font-size:12vw;

        width:100%;

        line-height:.85;

        letter-spacing:-0.07em;

    }

}


.transitions p{
    color:white;
    font-size:1.2rem;
    margin-bottom:10px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.transitions h2 span {
    color: #ff4d6d;
}

.transitions .char{
    color:inherit;
}

.transitions .char{
    display:inline-block;
    opacity:0;

    will-change:
    transform,
    opacity,
    filter;
}

.transitions .mini{
    color:white;
    font-size:1.2rem;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:20px;

    opacity:0;
}