/*logo*/

* {
    box-sizing: border-box;
    list-style-type: none;
}

.pera-logo {
    pointer-events: none;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.0);
    width: auto;
    position: relative;    
    height: 65px;        
    }

    .pera-logo .rectangle {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 1.0);
        top: 0%;
        height: 100%;
        width: 100%;
        position: absolute;
        margin: 0;
        left: 0%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        top: 25.00%;
        height: 46.25%;
        width: 5.80%;
        position: absolute;
        margin: 0;
        left: 0.60%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape1 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        top: 25.00%;
        height: 46.25%;
        width: 6.20%;
        position: absolute;
        margin: 0;
        left: 8.40%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape2 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        top: 25.00%;
        height: 46.25%;
        width: 6.80%;
        position: absolute;
        margin: 0;
        left: 16.80%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape3 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        top: 23.75%;
        height: 47.50%;
        width: 6.80%;
        position: absolute;
        margin: 0;
        left: 25.00%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape4 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 38.40%;
        top: 25.00%;
        height: 46.25%;
        width: 8.40%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape5 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 29.00%;
        top: 13.75%;
        height: 58.75%;
        width: 7.60%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape6 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 21.60%;
        top: 25.00%;
        height: 46.25%;
        width: 5.80%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape7 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 13.00%;
        top: 25.00%;
        height: 46.25%;
        width: 6.20%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape8 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 5.60%;
        top: 23.75%;
        height: 48.75%;
        width: 4.80%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape9 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 1.40%;
        top: 13.75%;
        height: 6.25%;
        width: 1.00%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .shape10 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        right: 0.40%;
        top: 25.00%;
        height: 46.25%;
        width: 3.00%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .flower {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.0);
        top: 14.38%;
        height: 71.25%;
        width: 11.40%;
        position: absolute;
        margin: 0;
        left: 37.20%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

        .pera-logo .flower .background {
            pointer-events: none;
            background-color: rgba(255, 255, 255, 0.0);
            top: 0px;
            height: 57px;
            width: 57px;
            position: absolute;
            margin: 0;
            left: 0px;
            -ms-transform: rotate(0deg);
            /* IE 9 */
            -webkit-transform: rotate(0deg);
            /* Chrome, Safari, Opera */
            transform: rotate(0deg);
        }

        .pera-logo .flower .group {
            pointer-events: none;
            background-color: rgba(255, 255, 255, 0.0);
            top: 0px;
            height: 57px;
            width: 57px;
            position: absolute;
            margin: 0;
            left: 0px;
            -ms-transform: rotate(0deg);
            /* IE 9 */
            -webkit-transform: rotate(0deg);
            /* Chrome, Safari, Opera */
            transform: rotate(0deg);
        }

            .pera-logo .flower .group .shape11 {
                pointer-events: none;
                background-color: rgba(255, 255, 255, 0.0);
                top: 0%;
                height: 100%;
                width: 100%;
                position: absolute;
                margin: 0;
                left: 0%;
                -ms-transform: rotate(0deg);
                /* IE 9 */
                -webkit-transform: rotate(0deg);
                /* Chrome, Safari, Opera */
                transform: rotate(0deg);
            }

        .pera-logo .flower.state1-to-state2 .group {
            transition: all 2.8s ease-in-out 0.0s;
            transform: rotate(360deg);
        }

    .pera-logo .rectangle1 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 1.0);
        right: 0%;
        top: 0%;
        height: 100%;
        width: 49.20%;
        position: absolute;
        margin: 0;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo .rectangle2 {
        pointer-events: none;
        background-color: rgba(255, 255, 255, 1.0);
        top: 0%;
        height: 100%;
        width: 33.40%;
        position: absolute;
        margin: 0;
        left: 0%;
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

    .pera-logo.state1-to-state2 .rectangle2 {
        transition: all 2.0s ease-in-out 0.4s;
        opacity: 0;
    }

    .pera-logo.state1-to-state2 .rectangle1 {
        transition: all 2.0s ease-in-out 0.4s;
        opacity: 0;
    }

    .pera-logo.state2-to-state3 .rectangle2 {
        transition: all 0.2s ease-in-out 0.0s;
    }

    .pera-logo.state2-to-state3 .rectangle1 {
        transition: all 0.2s ease-in-out 0.0s;
    }

    .pera-logo.state2-to-state3 .flower {
        transition: all 1.8s ease-in-out 0.0s;
        transform: rotate(360deg);
    }

    .pera-logo.state3-to-state2 .rectangle2 {
        transition: all 0.2s ease-in-out 0.0s;
    }

    .pera-logo.state3-to-state2 .rectangle1 {
        transition: all 0.2s ease-in-out 0.0s;
    }

    .pera-logo.state3-to-state2 .flower {
        transition: all 1.8s ease-in-out 0.0s;
        transform: rotate(0deg);
    }

    .pera-logo.state0 {
    }

    .pera-logo.state2 .rectangle1 {
        opacity: 0.0;
    }

    .pera-logo.state2 .rectangle2 {
        opacity: 0.0;
    }

    .pera-logo.state3 .rectangle1 {
        opacity: 0.0;
    }

    .pera-logo.state3 .flower {
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -webkit-transform: rotate(360deg);
        /* Chrome, Safari, Opera */
        transform: rotate(360deg);
    }

    .pera-logo.state3 .rectangle2 {
        opacity: 0.0;
    }

    .pera-logo .flower.state2 .group {
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -webkit-transform: rotate(360deg);
        /* Chrome, Safari, Opera */
        transform: rotate(360deg);
    }