.byNetromOnline {
    color: #FFF;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 99;
    bottom: 0;
}

.byNetromOnline a {
    color: #FFF;
    text-align: center;
}

.byOverlayTop {
    position: fixed;
    top: 0px;
    background: #000;
    height: 70%;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: hidden;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    z-index: 1;
    display: none;
}

.byOverlayTop.animated {
    animation: overlayTop 2.4s;
    -webkit-animation: overlayTop 2.4s;
}

.byOverlayBottom {
    position: fixed;
    bottom: 0px;
    background: #000;
    height: 30%;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    overflow: hidden;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    display: none;
}

.byOverlayBottom.animated {
    animation: overlayBottom 2.4s;
    -webkit-animation: overlayBottom 2.4s;
}

.line {
    position: absolute;
    width: 70%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0%;
}

.line.animated {
    animation: widthExpand 2.4s cubic-bezier(0, 0.045, 0.355, 1);
    -webkit-animation: widthExpand 2.4s cubic-bezier(0, 0.045, 0.355, 1);
}

.svg-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40%;
}

.svg-wrapper.animated {
    animation: netrom 2.4s;
    -webkit-animation: netrom 2.4s;
}

.svg-wrapper svg {
    padding: 10px;
}

.shape {
    stroke-width: 2px;
    stroke-dashoffset: 0;
    stroke-dasharray: 0;
    fill: transparent;
    stroke: #FFFFFF;
    -webkit-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
    transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.shape.animated {
    animation: draw 2.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-animation: draw 2.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes overlayTop {
    from {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: -70%;
    }

    15% {
        top: 0%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    to {
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    }
}

@-webkit-keyframes overlayTop {
    from {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        top: -70%;
    }

    15% {
        top: 0%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    to {
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    }
}

@keyframes overlayBottom {
    from {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: -30%;
    }

    15% {
        bottom: 0%;
        width: 100%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    to {
        width: 100%;
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    }
}

@-webkit-keyframes overlayBottom {
    from {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        bottom: -30%;
    }

    15% {
        bottom: 0%;
        width: 100%;
    }

    90% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    to {
        width: 100%;
        opacity: 0.95;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    }
}

@-webkit-keyframes widthExpand {
    from, 15% {
        width: 0%;
    }

    40% {
        width: 70%;
    }
}

@keyframes widthExpand {
    from, 15% {
        width: 0%;
    }

    40% {
        width: 70%;
    }
}

@-webkit-keyframes netrom {
    from, 30% {
        top: 100%;
        width: 10%;
    }

    40% {
        top: 50%;
        width: 20%;
    }

    80%, to {
        width: 40%;
    }

    90% {
        width: 30%;
    }
}

@keyframes netrom {
    from, 30% {
        top: 100%;
        width: 10%;
    }

    40% {
        top: 50%;
        width: 20%;
    }

    80%, to {
        width: 40%;
    }

    90% {
        width: 30%;
    }
}

@keyframes draw {
    from, to {
        stroke-width: 2px;
        stroke-dashoffset: 0;
        stroke-dasharray: 0;
    }

    80% {
        stroke-width: 4px;
        stroke-dasharray: 10 240;
        stroke-dashoffset: -130;
    }
}

@-webkit-keyframes draw {
    from, to {
        stroke-width: 2px;
        stroke-dashoffset: 0;
        stroke-dasharray: 0;
    }

    80% {
        stroke-width: 4px;
        stroke-dasharray: 10 240;
        stroke-dashoffset: -130;
    }
}