/**
* CSS Radar - an animated radar built entirely with CSS
*/

@media(min-width:1020px) {
    .radar-block{
        background: #4f5677; /* Old browsers */
        background: -moz-linear-gradient(top, rgba(79,86,119,0.75) 0%, rgba(98,157,217,0.75) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(79,86,119,0.75) 0%,rgba(98,157,217,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(79,86,119,0.75) 0%,rgba(98,157,217,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(79,86,119,0.75)', endColorstr='rgba(98,157,217,0.75)',GradientType=0 ); /* IE6-9 */
    }
    .radar-block h2{
        font-size: 42px !important;
        font-family: 'proxima_novabold';
        transform: translateY(140%);
        animation: titleUpanimation linear 0.8s forwards;
    }
}

@media(min-width:992px) and (max-width:1200px) {
    .screen{
        position: relative;
        top: -45px;
    }
    .radar-block h2{
        font-size: 42px !important;
        font-family: 'proxima_novabold';
        transform: translateY(140%);
        animation: titleUpanimation linear 0.8s forwards;
    }
}
@media(min-width:768px) and (max-width:991px){
    .screen{
        position: relative;
        top: -35px;
    }
    .radar-block h2{
        transform: translateY(140%);
        animation: titleUpanimation linear 0.8s forwards;
    }
}


.screen {
    padding-top: 20px;
    width:100%;
    height:100%;
}

.radar-block{
    position: relative;
    padding-top: 60px;

}

.radar-heading{
    height: 70px;
    overflow: hidden;
    position: relative;
}


.radar-block h2{
    text-align: center;
    color:#fff;
    font-size: 30px;
    animation-delay: 1s;
    padding: 0 15px;

}

.radar{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5677', endColorstr='#629dd9', GradientType=1 );
    border-radius: 50%;
    width: 300px;
    height:300px;
    margin: 0 auto;
    position: absolute;
    z-index: 1;
    background:
        /*radial-gradient(farthest-side circle, transparent 5%, green 6%, transparent 0),*/
        /*radial-gradient(farthest-side circle, transparent 15%, green 16%, transparent 0),*/
        radial-gradient(farthest-side circle, transparent 25%, white 26%, transparent 0);
    background-size: 350% 250%;
    background-position: 50% 50%;

    left:0;
    right: 0;

}

.strips{
    background-size:48px 48px;

    background-image:-moz-linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    background-image:-webkit-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    background-image:-webkit-linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    background-image:-o-linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    background-image:-ms-linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .5) 25%, rgba(255, 255, 255, .5) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .5) 76%, transparent 77%, transparent);
    height: 260px;
    width: 260px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 21px;
}

.blip {
    background: #fff;
    position: absolute;
    width: 4px;
    height: 4px;
    opacity: 0.3;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 3px 4px #538fcb;
    box-shadow: 0 0 3px 4px #538fcb;
    -webkit-animation: dot_pulse ease-out 5s infinite;
    animation: dot_pulse ease-out 1s infinite;
}

#one {
    left: 14%;
    top: 41%;
    animation-delay: 0s;
}
#two {
    right:20%;
    top: 24%;
    animation-delay: 0.5s;
}
#three {
    position: absolute;
    width: 4px;
    height: 4px;
    left: 50%;
    top: 50%;
    opacity: 1;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 3px 4px #538fcb;
    box-shadow: 0 0 3px 4px #538fcb;
    background: #fff;
}
#four {
    left: 20%;
    top: 77%;
    animation-delay: 1.5s;
}
#five {
    left: 50%;
    bottom: 8%;
    animation-delay: 2s;
}
#six {
    right: 21%;
    top: 68%;
    animation-delay: 2s;
}

.beam {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 50%;
    right: 50%;
    z-index: 9999;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-border-radius: 300px 0 0 0;
    border-radius: 300px 0 0 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    animation: clockwise 8s linear infinite;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.001) 0%, rgba(255, 255, 255, 0.001) 50%, #fff 100%);

}

/*radar extension animation*/

.animate-line{
    position: absolute;
    animation: lineanimation linear 2s forwards;
    /*-webkit-animation-fill-mode: forwards; !* Safari 4.0 - 8.0 *!*/
    /*animation-fill-mode: forwards;*/
    background-repeat: no-repeat;

}

.topest-right-to-left{
    top: 128px;
    height: 63px;
    right: 100%;
    background-position: right;
    animation-delay: 1.7s;
}


.top-right-to-left{
    /*width: 232px;*/
    left: 80.5%;
    top: 8%;
    height: 44px;
}

.bottom-left-to-right{
    left: 98%;
    bottom: 33%;
    /*width: 280px;*/
    height: 44px;
    animation-delay: 0.5s;

}

.bottom-left{
    bottom: -35px;
    height: 56px;
    left: 75%;
    /*width: 254px;*/
    animation-delay: 0.7s;

}

.bottom-right-to-left{
    /*width:269px;*/
    right: 69%;
    bottom: -13%;
    background-position: right;
    height:44px;
    animation-delay: 1.2s;
}



.top-left-to-right {
    /*width:224px;*/
    background-position: right;
    height: 44px;
    right: 98%;
    top: 19%;
    animation-delay: 2s;

}

/*radar extension title css*/


.title-block{
    position: absolute;
    width: 100%;
    text-transform: uppercase;
}

.title-block h4{
    margin:0;
    color:#fff;
    font-size: 15px;
    font-family:  'proxima_novaregular';
}

.topest-left{
    height: 32px;
    overflow: hidden;
    right: 83%;
    top: 6%;
    text-align: left;
}


.topest-left h4{
    animation: titleUpanimation linear 0.8s forwards;
    transform: translateY(120%);
    animation-delay: 3.6s;
}


.top-left{
    left: 70%;
    text-align: right;
    top: 8%;
    height: 37px;
    overflow: hidden;
}

.top-left h4{
    animation: titleUpanimation linear 0.8s forwards;
    transform: translateY(120%);
    animation-delay: 1s;
    /*transform: translateY(-100);*/
}

.bottom-left-title{
    left: 94%;
    bottom: 33%;
    text-align: right;
    height: 32px;
    overflow: hidden;

}

.bottom-left-title h4{
    animation: titleDownanimation ease-in 0.8s forwards;
    transform: translateY(-103%);
    animation-delay: 1.8s;
}

.bottom{
    bottom: -26px;
    left: 72%;
    height: 32px;
    overflow: hidden;
    text-align: right;
}
.bottom h4{
    animation: titleUpanimation linear 0.8s forwards;
    transform: translateY(120%);
    animation-delay: 1.8s;
}


.bottom-right{
    right: 71%;
    bottom: -8%;
    text-align: left;
    height: 16px;
    overflow: hidden;
}

.bottom-right h4{
    animation: titleUpanimation linear 0.8s forwards;
    transform: translateY(120%);
    animation-delay: 3s;

}

.top-right{
    height: 21px;
    overflow: hidden;
    right: 89%;
    top: 58%;
    text-align: left;
}

.top-right h4{
    animation: titleUpanimation linear 0.8s forwards;
    transform: translateY(130%);
    animation-delay: 3s;
}









/*keyframes*/


@-webkit-keyframes titleUpanimation {
    10% {
        transform: translateY(100%);
    }

    20%{
        transform: translateY(80%);
    }

    30%{
        transform: translateY(60%);
    }

    40%{
        transform: translateY(40%);
    }

    50%{
        transform: translateY(20%);
    }
    60%{
        transform: translateY(10%);
    }

    70%, 80%, 90%,100%{
        transform: translateY(0);
    }

}


@-webkit-keyframes titleUpanimation{
    10% {
        transform: translateY(100%);
    }

    20%{
        transform: translateY(80%);
    }

    30%{
        transform: translateY(60%);
    }

    40%{
        transform: translateY(40%);
    }

    50%{
        transform: translateY(20%);
    }
    60%{
        transform: translateY(10%);
    }

    60%, 70%, 80%, 90%,100%{
        transform: translateY(0);
    }
}

@-webkit-keyframes titleDownanimation {
    10% {
        transform: translateY(-100%);
    }

    20%{
        transform: translateY(-80%);
    }

    30%{
        transform: translateY(-60%);
    }

    40%{
        transform: translateY(-40%);
    }

    50%{
        transform: translateY(-20%);
    }
    60%{
        transform: translateY(-10%);
    }

    60%, 70%, 80%, 90%,100%{
        transform: translateY(0);
    }

}


@-webkit-keyframes titleDownanimation{
    10% {
        transform: translateY(-100%);
    }

    20%{
        transform: translateY(-80%);
    }

    30%{
        transform: translateY(-60%);
    }

    40%{
        transform: translateY(-40%);
    }

    50%{
        transform: translateY(-20%);
    }
    60%{
        transform: translateY(-10%);
    }

    60%, 70%, 80%, 90%,100%{
        transform: translateY(0);
    }
}

@-webkit-keyframes lineanimation {
    5%{
        width:0;
    }
    10%{
        width: 15px;
    }
    15%{
        width:30px
    }
    20%{
        width:45px
    }
    25%{
        width:60px
    }
    30%{
        width:75px;
    }
    35%{
        width:90px;
    }
    40%{
        width:105px;
    }
    45%{
        width:120px;
    }
    50%{
        width: 135px;
    }
    55%{
        width: 150px;
    }
    60%{
        width:165px;
    }
    70%, 80%, 90%,100%{
        width:269px;
    }

}


@-webkit-keyframes line {
    5%{
        width:0;
    }
    10%{
        width: 15px;
    }
    15%{
        width:30px
    }
    20%{
        width:45px
    }
    25%{
        width:60px
    }
    30%{
        width:75px;
    }
    35%{
        width:90px;
    }
    40%{
        width:105px;
    }
    45%{
        width:120px;
    }
    50%{
        width: 135px;
    }
    55%{
        width: 150px;
    }
    60%{
        width:165px;
    }
    70%, 80%, 90%,100%{
        width:269px;
    }
}

@-moz-keyframes dot_pulse {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 1;
    }
    70% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.1;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);

        opacity: 0.1;
    }
}
@-webkit-keyframes dot_pulse {
    0% {
        /*-webkit-transform: scale(0.1, 0.1);*/
        opacity: 1;
    }
    70% {
        /*-webkit-transform: scale(1.2, 1.2);*/
        opacity: 0.1;
    }
    100% {
        /*-webkit-transform: scale(1.3, 1.3);*/
        opacity: 0.1;
    }
}

@keyframes clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}