.logo {
    width: 100%;
    text-align: -webkit-center;
    text-align: -moz-center;
}

.logo-container {
    width: 400px;
    height: 300px;
    background-color: transparent;
    position: relative;
}

.logo-center-shape {
    width: 133px;
    height: 164px;
    border-radius: 50%;
    top: -64px;
    left: 134px;
}

.logo-center {
    position: absolute;
    background-color: #444444;
    clip-path: polygon(50% 53%, 117% 108%, 0 96%);
}

.logo-center-white {
    background-color: white;
}

.logo-center-shadow {
    position: absolute;
    background-color: #FFFFFF;
    clip-path: polygon(50% 53%, 50% 108%, 0 96%);
    opacity: 0.2;
}

.logo-center-shadow-black {
    background-color: black;
    opacity: 0.3;
}

.logo-arc {
    border: 40px solid #F3901D;
    border-radius: 50%;
    position: absolute;
}

.logo-arc-white {
    border-color: white;
}

.logo-arc-shadow {
    border: 50px solid #FFFFFF;
    border-radius: 50%;
    opacity: 0.2;
    position: absolute;
}

.logo-arc-shadow-black {
    border-color: black;
    opacity: 0.3;
}

.logo-arc1-shape {
    width: 326px;
    height: 466px;
    top: -311px;
    left: 38px;
}

.logo-arc1 {
    clip-path: polygon(50% 72%, 92% 100%, 0 106%)
}

.logo-arc1-shadow {
    border-width: 40px;
    clip-path: polygon(50% 72%, 50% 100%, 0 106%);
}

.logo-arc2-shape {
    width: 391px;
    height: 390px;
    top: -177px;
    left: 5px;
}

.logo-arc2 {
    clip-path: polygon(52% 50%, 100% 101%, 0 100%);
}

.logo-arc2-shadow {
    border-width:40px;
    clip-path: polygon(52% 50%, 50% 101%, 0 100%);
}

.logo-arc3-shape {
    width: 522px;
    height: 530px;
    top: -255px;
    left: -59px;
    border-width:43px;
}

.logo-arc3 {
    clip-path: polygon(50% 54%, 100% 100%, 0 100%);
}

.logo-arc3-shadow {
    clip-path: polygon(50% 54%, 50% 100%, 0 100%);
}

.logo-animation {
    opacity: 0;
    -o-animation: wifianimation 2.5s infinite;
    -moz-animation: wifianimation 2.5s infinite;
    -webkit-animation: wifianimation 2.5s infinite;
    animation: wifianimation 2.5s infinite;
}

.logo-center-animation {
    opacity: 0.1;
    -o-animation: wifianimation 2.5s infinite;
    -moz-animation: wifianimation 2.5s infinite;
    -webkit-animation: wifianimation 2.5s infinite;
    animation: wifianimation 2.5s infinite;
}

@-o-keyframes wifianimation {
    0% {
        opacity: 1
    }

    50% {
        opactiy: 1
    }

    80% {
        opactiy: 1
    }

    100% {
        opactiy: 0.1;
    }
}

@-moz-keyframes wifianimation {
    0% {
        opacity: 1
    }

    50% {
        opactiy: 1
    }

    80% {
        opactiy: 1
    }

    100% {
        opactiy: 0.1;
    }
}

@-webkit-keyframes wifianimation {
    0% {
        opacity: 1
    }

    50% {
        opactiy: 1
    }

    80% {
        opactiy: 1
    }

    100% {
        opactiy: 0.1;
    }
}

.arc3 {
    -o-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}

.arc2 {
    -o-animation-delay: 200ms;
    -moz-animation-delay: 200ms;
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}

.arc1 {
    -o-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}