/* Stylesheet for index.html */

.logo-animation
{
    width: 50%;
    position: relative;
    left: 30vw;
    top: 37vh;
}

@media only screen and (max-width: 650px) {
    .logo-animation {
        width: 80%;
        left: 24vw;
        top: 37vh;
    }
}

#logo path:nth-child(2)
{
    stroke-dasharray: 802;
    stroke-dashoffset: 801.3139038085938;
    animation-delay: 0.5s;
    animation: lineDraw 1.5s ease forwards;
}

#logo path:nth-child(3)
{
    stroke-dasharray: 452;
    stroke-dashoffset: 451.5810852050781;
    animation-delay: 0.5s;
    animation: lineDraw 1.5s ease forwards;
}

#logo path:nth-child(4)
{
    stroke-dasharray: 375;
    stroke-dashoffset: 374.9039306640625;
    animation-delay: 0.5s;
    animation: lineDraw 1.5s ease forwards;
}

#logo path:nth-child(5)
{
    stroke-dasharray: 500;
    stroke-dashoffset: 499.50390625;
    animation-delay: 0.5s;
    animation: lineDraw 1.5s ease forwards;
}

#logo path:nth-child(6)
{
    stroke-dasharray: 460;
    stroke-dashoffset: 459.5672607421875;
    animation-delay: 0.5s;
    animation: lineDraw 1.5s ease forwards;
}

#logo path:nth-child(7)
{
    stroke-dasharray: 399;
    stroke-dashoffset: 398.18359375;
    animation-delay: 0.5s;
    animation: lineDraw 1.5s ease forwards;
}

#logo path:nth-child(8)
{
    stroke-dasharray: 394;
    stroke-dashoffset: 393.3783264160156;
    animation-delay: 0.5s;
    animation: lineDraw 2s ease forwards;
}

#logo {
    -webkit-animation: fadein 3s;
    -moz-animation: fadein 3s;
    -ms-animation: fadein 3s;
    -o-animation: fadein 3s;
    width: 50vw;
    max-width: 80%;
    animation: fadeinout 3s, fillLogo 0.5s ease forwards 1.5s;
}

@keyframes lineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeinout
{
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fillLogo {
    from {
        fill: transparent;
    }

    to {
        fill: #8C1515;
    }
}