@charset "UTF-8";

@font-face {
    font-family: "tele-grotesk-nor";
    src: url("../fonts/TeleGroteskNormal.eot");
    src: url("../fonts/TeleGroteskNormal.eot?#iefix") format("embedded-opentype"), url("../fonts/TeleGroteskNormal.woff") format("woff"), url("../fonts/TeleGroteskNormal.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "tele-grotesk-hal";
    src: url("../fonts/TeleGroteskHalbfett.eot");
    src: url("../fonts/TeleGroteskHalbfett.eot?#iefix") format("embedded-opentype"), url("../fonts/TeleGroteskHalbfett.woff") format("woff"), url("../fonts/TeleGroteskHalbfett.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "tele-grotesk-fet";
    src: url("../fonts/TeleGroteskFett.eot");
    src: url("../fonts/TeleGroteskFett.eot?#iefix") format("embedded-opentype"), url("../fonts/TeleGroteskFett.woff") format("woff"), url("../fonts/TeleGroteskFett.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "tele-grotesk-ult";
    src: url("../fonts/TeleGroteskUltra.eot");
    src: url("../fonts/TeleGroteskUltra.eot?#iefix") format("embedded-opentype"), url("../fonts/TeleGroteskUltra.woff") format("woff"), url("../fonts/TeleGroteskUltra.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "tele-grotesk-head-ult";
    src: url("../fonts/TeleGroteskHeadline-Ultra.eot");
    src: url("../fonts/TeleGroteskHeadline-Ultra.eot?#iefix") format("embedded-opentype"), url("../fonts/TeleGroteskHeadline-Ultra.woff") format("woff"), url("../fonts/TeleGroteskHeadline-Ultra.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "tele-grotesk-head-reg";
    src: url("../fonts/TeleGroteskHeadline-Regular.eot");
    src: url("../fonts/TeleGroteskHeadline-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/TeleGroteskHeadline-Regular.woff") format("woff"), url("../fonts/TeleGroteskHeadline-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

body, html {
    margin: 0px;
    padding: 0px;
    font-family: "tele-grotesk-fet";
}

#fireprobe {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#fireprobe .middle {
    display: table-cell;
    vertical-align: middle;
}

@media screen and (min-width: 889px) {

    #fireprobe .inner {
        width: 888px;
        height: 660px;
        position: relative;
        z-index: 1000;
        margin: 0px auto;
    }

    #fireprobe #loading-stage {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    #fireprobe .searching {
        padding: 130px 60px;
        background: #f1f1f1;
        font-size: 37px;
    }

    #fireprobe .searching span {
        color: #e20074;
    }

    #fireprobe #meter-stage {
        display: none;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    #fireprobe .download {
        width: 202px;
        height: 245px;
        position: absolute;
        top: 0px;
        left: 8px;
        background: url("../images/dp.png") top center no-repeat;
        z-index: 1000;
    }

    #fireprobe .main {
        width: 288px;
        height: 288px;
        position: absolute;
        top: 0px;
        left: 302px;
        background: url("../images/mp.png") top center no-repeat;
        z-index: 1000;
    }

    #fireprobe .upload {
        width: 202px;
        height: 245px;
        position: absolute;
        top: 0px;
        right: 8px;
        background: url("../images/up.png") top center no-repeat;
        z-index: 1000;
    }

    #fireprobe #download-act {
        display: none;
        width: 218px;
        height: 218px;
        position: absolute;
        top: 35px;
        left: 0px;
        background: url("../images/ps.png") top center no-repeat;
        z-index: 999;
    }

    #fireprobe #main-act {
        display: none;
        width: 82px;
        height: 82px;
        position: absolute;
        top: 181px;
        left: 405px;
        background: url("../images/pm.png") top center no-repeat;
        z-index: 999;
    }

    #fireprobe #upload-act {
        display: none;
        width: 218px;
        height: 218px;
        position: absolute;
        top: 35px;
        right: 0px;
        background: url("../images/ps.png") top center no-repeat;
        z-index: 999;
    }

    #fireprobe .download-ind {
        width: 20px;
        height: 56px;
        position: absolute;
        top: 98px;
        left: 92px;
        background: url("../images/is.png?nc=1") top center no-repeat;
        z-index: 1000;
        transform: rotate(-120deg);
        transform-origin: 10px 45px;
    }

    #fireprobe .upload-ind {
        width: 20px;
        height: 56px;
        position: absolute;
        top: 98px;
        left: 92px;
        background: url("../images/is.png?nc=1") top center no-repeat;
        z-index: 1000;
        transform: rotate(120deg);
        transform-origin: 10px 45px;
    }

    #fireprobe .main-ind {
        width: 28px;
        height: 79px;
        position: absolute;
        top: 77px;
        left: 131px;
        background: url("../images/im.png?nc=1") top center no-repeat;
        z-index: 1000;
        transform: rotate(-120deg);
        transform-origin: 14px 65px;
    }

    #fireprobe .download-value, #fireprobe .upload-value {
        width: 80px;
        height: 20px;
        text-align: center;
        color: #e20074;
        position: absolute;
        top: 177px;
        left: 63px;
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
    }

    #fireprobe .main-value {
        width: 80px;
        height: 16px;
        text-align: center;
        color: #e20074;
        position: absolute;
        top: 201px;
        left: 103px;
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
    }

    #fireprobe .ico {
        height: 21px;
    }

    #fireprobe .ping-box {
        width: 96px;
        height: 112px;
        position: absolute;
        top: 320px;
        left: 400px;
    }

    #fireprobe .download-box {
        width: 193px;
        height: 112px;
        position: absolute;
        top: 320px;
        left: 14px;
    }

    #fireprobe .upload-box {
        width: 193px;
        height: 112px;
        position: absolute;
        top: 320px;
        right: 14px;
    }

    #fireprobe .box-title {
        text-align: center;
        color: #121212;
        font-size: 18px;
        margin-bottom: 4px;
    }

    #fireprobe .box-title span {
        font-size: 13px;
        font-family: "tele-grotesk-hal";
    }

    #fireprobe .box-value {
        text-align: center;
        font-size: 21px;
        color: #e20074;
        font-family: "tele-grotesk-hal";
    }

    #fireprobe .box-value span {
        font-size: 27px;
        color: #121212;
    }

    #fireprobe .box-graph {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        text-align: center;
    }

    #fireprobe .box-graph .graph-bar {
        background: #e20074;
        width: 3px;
        height: 1px;
        margin: 0px 1px;
        display: inline-block;
    }

    #fireprobe .start {
        width: 228px;
        height: 64px;
        background: url("../images/s.png") top center no-repeat;
        z-index: 1000;
        position: absolute;
        top: 458px;
        left: 336px;
        cursor: pointer;
        opacity: 0.9;
    }

    #fireprobe .start:hover {
        opacity: 1;
    }

    #fireprobe .restart {
        display: none;
        width: 228px;
        height: 64px;
        background: url("../images/r.png") top center no-repeat;
        z-index: 1000;
        position: absolute;
        top: 458px;
        left: 336px;
        cursor: pointer;
        opacity: 0.9;
    }

    #fireprobe .restart:hover {
        opacity: 1;
    }

    #fireprobe .ip-label {
        width: 330px;
        position: absolute;
        top: 580px;
        left: 0px;
        text-align: left;
        font-size: 16px;
        font-family: "tele-grotesk-fet";
        font-weight: bold;
    }

    #fireprobe .ip-label span {
        font-family: "tele-grotesk-hal";
        font-weight: normal;
    }

    #fireprobe .server-label {
        font-weight: bold;
        width: 330px;
        position: absolute;
        top: 580px;
        right: 0px;
        text-align: right;
        font-size: 16px;
        font-family: "tele-grotesk-fet";
    }

    #fireprobe .server-label span {
        font-family: "tele-grotesk-hal";
        font-weight: normal;
    }

    #fireprobe .powered {
        width: 193px;
        height: 100px;
        position: absolute;
        top: 556px;
        left: 354px;
    }

    #fireprobe #mobileview {
        display: none;
    }

    #fireprobe #results-stage {
        display: none;
    }

}

@media screen and (max-width: 888px) {

    #fireprobe .inner {
        min-width: 350px;
        height: 660px;
        position: relative;
        z-index: 1000;
        margin: 0px auto;
    }

    #fireprobe #loading-stage {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    #fireprobe .searching {
        padding: 30px 30px;
        background: #f1f1f1;
        font-size: 37px;
        text-align: center;
    }

    #fireprobe .searching span {
        color: #e20074;
    }

    #fireprobe #meter-stage {
        display: none;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    #fireprobe .download {
        display: none;
    }

    #fireprobe .main {
        width: 288px;
        height: 288px;
        margin: 0px auto;
        position: relative;
        background: url("../images/mp.png") top center no-repeat;
        z-index: 1000;
    }

    #fireprobe .upload {
        display: none;
    }

    #fireprobe #download-act {
        display: none;
    }

    #fireprobe #main-act {
        display: none;
    }

    #fireprobe #upload-act {
        display: none;
    }

    #fireprobe .download-ind {
        display: none;
    }

    #fireprobe .upload-ind {
        display: none;
    }

    #fireprobe .main-ind {
        width: 28px;
        height: 79px;
        position: absolute;
        top: 77px;
        left: 131px;
        background: url("../images/im.png?nc=1") top center no-repeat;
        z-index: 1000;
        transform: rotate(-120deg);
        transform-origin: 14px 65px;
    }

    #fireprobe .download-value, #fireprobe .upload-value {
        display: none;
    }

    #fireprobe .main-value {
        width: 80px;
        height: 16px;
        text-align: center;
        color: #e20074;
        position: absolute;
        top: 201px;
        left: 103px;
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
    }

    #fireprobe .ico {
        height: 21px;
    }

    #fireprobe .ping-box {
        width: 96px;
        height: 112px;
        position: relative;
        margin: 20px auto;
        display: none;
    }

    #fireprobe .download-box {
        width: 193px;
        height: 112px;
        position: relative;
        margin: 20px auto;
        display: none;
    }

    #fireprobe .upload-box {
        width: 193px;
        height: 112px;
        position: relative;
        margin: 20px auto;
        display: none;
    }

    #fireprobe .box-title {
        text-align: center;
        color: #121212;
        font-size: 18px;
        margin-bottom: 4px;
    }

    #fireprobe .box-title span {
        font-size: 13px;
        font-family: "tele-grotesk-hal";
    }

    #fireprobe .box-value {
        text-align: center;
        font-size: 21px;
        color: #e20074;
        font-family: "tele-grotesk-hal";
    }

    #fireprobe .box-value span {
        font-size: 27px;
        color: #121212;
    }

    #fireprobe .box-graph {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        text-align: center;
    }

    #fireprobe .box-graph .graph-bar {
        background: #e20074;
        width: 3px;
        height: 1px;
        margin: 0px 1px;
        display: inline-block;
    }

    #fireprobe .start {
        width: 228px;
        height: 64px;
        background: url("../images/s.png") top center no-repeat;
        z-index: 1000;
        position: relative;
        margin: 40px auto 0px auto;
        cursor: pointer;
        opacity: 0.9;
    }

    #fireprobe .start:hover {
        opacity: 1;
    }

    #fireprobe .restart {
        display: none;
        width: 228px;
        height: 64px;
        background: url("../images/r.png") top center no-repeat;
        z-index: 1000;
        position: relative;
        margin: 45px auto 0px auto;
        cursor: pointer;
        opacity: 0.9;
    }

    #fireprobe .restart:hover {
        opacity: 1;
    }

    #fireprobe .ip-label {
        width: 100%;
        position: absolute;
        bottom: 187px;
        text-align: center;
        font-size: 16px;
        font-family: "tele-grotesk-fet";
        font-weight: bold;
    }

    #fireprobe .ip-label span {
        font-family: "tele-grotesk-hal";
        font-weight: normal;
    }

    #fireprobe .server-label {
        font-weight: bold;
        width: 100%;
        position: absolute;
        bottom: 139px;
        text-align: center;
        font-size: 16px;
        font-family: "tele-grotesk-fet";
    }

    #fireprobe .server-label span {
        font-family: "tele-grotesk-hal";
        font-weight: normal;
    }

    #fireprobe .powered {
        width: 100%;
        height: 100px;
        position: absolute;
        bottom: 0px;
        text-align: center;
    }

    #fireprobe #mobileview {
        display: block;
    }

    #fireprobe #results-stage {
        display: none;
    }

    #fireprobe .result-field {
        height: 69px;
        margin: 30px 20px;
        position: relative;
        background: url("../images/rp.png") no-repeat left 55px bottom 0px;
    }

    #fireprobe .result-left {
        display: inline-block;
        float: left;
        margin: 4px 0px 0px 14px;
        font-family: "tele-grotesk-fet";
        font-size: 22px;
    }

    #fireprobe .result-left span {
        font-family: "tele-grotesk-hal";
        font-size: 16px;
    }

    #fireprobe .result-right {
        display: inline-block;
        float: right;
        margin: 25px 0px 0px 0px;
        font-family: "tele-grotesk-hal";
        font-size: 25px;
        text-align: right;
    }

    #fireprobe .result-right .sub {
        color: #e20074;
        font-size: 18px;
    }

    #fireprobe .result-right2 {
        display: inline-block;
        float: right;
        margin: 22px 0px 0px 0px;
        font-family: "tele-grotesk-hal";
        font-size: 30px;
        text-align: right;
    }

    #fireprobe .result-right2 .sub {
        color: #e20074;
        font-size: 20px;
    }

    #fireprobe .icor {
        position: relative;
        top: 10px;
        float: left;
        width: 40px;
    }

}