@font-face{font-family:Pluto Sans;src:url(assets/fonts/PlutoSansRegular.eot);src:url(assets/fonts/PlutoSansRegular.eot?#iefix) format("embedded-opentype"),url(assets/fonts/PlutoSansRegular.woff2) format("woff2"),url(assets/fonts/PlutoSansRegular.woff) format("woff"),url(assets/fonts/PlutoSansRegular.ttf) format("truetype"),url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSAiLi9hc3NldHMvZm9udHMvUGx1dG9TYW5zUmVndWxhci5zdmciOw==#PlutoSansRegular) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Pluto Sans Bold;src:url(assets/fonts/PlutoSansBold.eot);src:url(assets/fonts/PlutoSansBold.eot?#iefix) format("embedded-opentype"),url(assets/fonts/PlutoSansBold.woff2) format("woff2"),url(assets/fonts/PlutoSansBold.woff) format("woff"),url(assets/fonts/PlutoSansBold.ttf) format("truetype"),url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSAiLi9hc3NldHMvZm9udHMvUGx1dG9TYW5zQm9sZC5zdmciOw==#PlutoSansBold) format("svg");font-weight:700;font-style:normal}body,html{width:100%;height:100%}body{background:#fff;font-family:Pluto Sans;font-size:11px;line-height:1.3;color:#fff;margin:0;-moz-osx-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%}.container{width:100%;height:100%;position:relative;overflow:hidden}.intro-screen{position:relative;margin:0 auto;height:1080px;width:1920px;-webkit-animation:fadeOut 4.4s ease-in-out;animation:fadeOut 4.4s ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;z-index:2}.intro-screen-content{position:relative;z-index:2;width:100%;height:100%}.main-screen{position:absolute;top:0;left:0;margin:0 auto;width:100%;height:100%}h1{font-family:LaPolice BP;font-size:115px;line-height:110px;font-weight:400;text-align:center;margin:auto}h1 strong{font-family:Pluto Sans}h2{font-family:LaPolice BP;font-size:60px;line-height:65px;font-weight:400;text-align:center;margin-top:15px}.logo{padding-top:35px;padding-left:35px;text-align:left}.main-screen .logo{position:absolute;top:0;left:0;width:130px;height:auto;z-index:10}.logo img{width:300px}#map{height:100%;width:100%}#map .bug-connect-line{top:64px;left:-60px;position:relative;display:inline-block;-webkit-transform:rotate(56deg);transform:rotate(56deg);width:290px;height:10px;background:transparent;background-image:radial-gradient(#fff 45%,transparent 0),radial-gradient(#fff 45%,transparent 0);background-size:10px 10px;background-position:0 0,0 0;background-repeat:repeat}#controlPanel{background-color:#fff;box-shadow:0 1px 3px 0 hsla(0,0%,60%,.5);padding:10px;position:absolute;right:60px;top:10px;z-index:100000000;max-width:200px;text-align:right}#deviceInput{font:400 11px Roboto,Arial,sans-serif}#log{color:red}.gm-style-iw-a{top:-20px}.gm-style-iw-t{margin-bottom:20px}.gm-style-iw-d{margin-bottom:-5px}.gm-style-iw b.ago{display:inline-block;margin-top:5px;color:#666}.gm-style-iw i.address{display:inline-block;width:200px;max-width:50vw}.gm-style-iw i.address:not(.expanded){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}.gm-style .gm-style-iw-c{padding:10px}.gm-style .gm-style-iw-c .gm-ui-hover-effect{display:none!important}.gm-style .gm-style-iw-t:after{height:24px;width:24px;border-bottom-left-radius:8px}.custom-gm-style-iw__avatar img{max-width:68px;margin:0 10px 0 0}.custom-gm-style-iw__name{font-size:12px;line-height:1.2;color:#244926;text-transform:uppercase;font-family:Pluto Sans;border-bottom:1px solid #244926;margin-bottom:5px;padding-bottom:5px}.custom-gm-style-iw__name img{position:relative;-webkit-transform:rotate(180deg) scale(.9);transform:rotate(180deg) scale(.9);vertical-align:middle;top:-2px}.custom-gm-style-iw__info{position:relative;display:inline-block;width:100%;font-family:Pluto Sans;color:#5d8d38;margin:0;line-height:1.2;font-size:18px}.custom-gm-style-iw__info .weaker{opacity:.57}.custom-gm-style-iw__info .text-right{text-align:right}.map-bgr{width:calc(100% - 300px);height:100%;background-size:cover;z-index:3;overflow:hidden}.cow-icon,.map-bgr{position:relative;display:inline-block}.cow-icon{text-align:center}.cow-icon,.cow-icon img{width:110px}.wifi-symbol{top:50%;right:0;margin:-130px auto 0;width:66px;height:66px;ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.wifi-circle,.wifi-symbol{display:block;position:absolute;left:0}.wifi-circle{box-sizing:border-box;-moz-box-sizing:border-box;width:100%;height:100%;bottom:0;border-color:#fff;border-style:solid;border-width:7px 7px 0 0;border-radius:0 100% 0 0;opacity:0;-webkit-animation:wifianimation 1.5s infinite;animation:wifianimation 1.5s infinite}.wifi-circle.first{width:44px;height:44px;-webkit-animation-delay:.6s;animation-delay:.6s}.wifi-circle.second{width:32px;height:32px;-webkit-animation-delay:.3s;animation-delay:.3s}.wifi-circle.third{width:20px;height:20px}.wifi-circle.fourth{width:9px;height:9px;opacity:1;background-color:#fff;-webkit-animation:none;animation:none}.text-fadeInUp{display:block;-webkit-animation:fadeInUp .6s ease;animation:fadeInUp .6s ease-out;opacity:0;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:.4s;animation-delay:.4s}.text-fadeInUp-2{-webkit-animation-delay:.5s;animation-delay:.5s}.text-fadeInUp-3{-webkit-animation-delay:.8s;animation-delay:.8s}.text-fadeInUp-4{-webkit-animation-delay:4.5s;animation-delay:4.5s}.main-screen_popup-layer{position:absolute;display:-webkit-box;display:flex;padding:15px;margin:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:center;align-items:center;background-color:#fff;border-radius:6px;z-index:11;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);top:50%}.main-screen_popup-layer:after{content:"";position:absolute;top:calc(100% - 30px);left:calc(50% - 20px);width:38px;height:38px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:7px;background-color:#fff;z-index:-1}.main-screen_popup-layer .avatar{width:68px;height:68px;border-radius:50%;overflow:hidden}.main-screen_popup-layer .avatar img{display:inline-block;width:100%;height:100%}.main-screen_popup-layer .bug-detail-info{padding-left:20px;width:calc(100% - 88px);display:inline-block}.main-screen_popup-layer .bug-detail-info .headline{font-size:12px;line-height:1.2;color:#244926;text-transform:uppercase;font-family:Pluto Sans;border-bottom:1px solid #244926;margin-bottom:5px;padding-bottom:5px}.main-screen_popup-layer .bug-detail-info .headline img{position:relative;-webkit-transform:rotate(180deg) scale(.9);transform:rotate(180deg) scale(.9);vertical-align:middle;top:-2px}.main-screen_popup-layer .bug-detail-info .info{position:relative;display:inline-block;width:100%;margin:0;font-family:Pluto Sans;color:#5d8d38}.main-screen_popup-layer .bug-detail-info .info p{margin:0;line-height:1.2;font-size:18px}.main-screen_popup-layer .bug-detail-info .info p.weaker{opacity:.57}.main-screen_popup-layer .bug-detail-info .left{display:inline-block;padding-right:20px}.main-screen_popup-layer .bug-detail-info .right{display:inline-block;text-align:right}.map-pos-icon{top:200px;width:21px;height:29px;z-index:10}.map-pos-icon,.route{position:absolute;bottom:0;left:0;right:0;margin:auto}.route{width:60%;height:60%;top:0;z-index:9}.route-lines{height:auto}.route-lines,.route-lines img{position:relative;display:inline-block;width:100%}.route-lines img{height:100%}.bug-loca{position:absolute;left:105px;top:250px}.bug-loca img{width:99px}iframe{border:none}.right-bar{position:absolute;right:0;top:0;width:300px;height:100%;padding:25px;background-color:#244926;color:#fff;box-sizing:border-box}.right-bar .cow-icon{position:absolute;top:30px;left:0;-webkit-transform:scale(.4);transform:scale(.4)}.cow-info{position:relative;display:inline-block;width:100%;border-bottom:1px solid #fff;padding:20px 0}.cow-info-number{position:relative;display:-webkit-box;display:flex;margin-top:50px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap;-webkit-box-align:end;align-items:flex-end;margin-bottom:10px}.cow-info-number .cow-avt{position:relative;align-content:flex-end;margin-right:auto;right:0;width:80px;height:80px;border-radius:100%;overflow:hidden}.cow-info-number label{width:calc(100% - 80px)}.cow-number{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.cow-info-number label .position-icon-rotate{position:relative;vertical-align:middle;-webkit-transform:rotate(180deg);transform:rotate(180deg);width:13px;margin-right:5px}.cow-info-number label span{font-size:14px;text-transform:uppercase}.cow-info-number label strong{font-size:30px;line-height:1;font-weight:400;margin-top:5px;display:block}.cow-info-desc{margin:5px 0 0;font-size:14px;color:#7db254}.cow-pos,.friland-man{position:relative;width:100%;padding:20px 0 15px;border-bottom:1px solid #fff}.cow-pos{padding:20px 0}.cow-pos dl{position:relative;display:inline-block;width:100%;margin:0}.cow-pos dl dt{font-size:16px;text-transform:uppercase;line-height:28px;text-align:left}.cow-pos-today{color:#fff}.cow-pos dl dd{font-size:42px;line-height:1;margin:0}.cow-pos dl.cow-pos-yesterday{margin-top:15px;color:#6c986f}.right-bar h6{position:relative;display:inline-block;width:100%;margin:0;text-align:left;text-transform:uppercase;color:#fff;font-size:14px;line-height:1;font-weight:400}.right-bar h6 img{width:18px;position:absolute;left:0;bottom:2px}.friland-man p{color:#7db254;font-size:14px;margin:5px 0 0}.friland-man h6{padding-left:25px}.othercows{position:relative;display:inline-block;width:100%;padding:25px 0}.othercows h6{font-size:15px;margin-bottom:5px}.othercows ul{position:relative;display:-webkit-box;display:flex;width:100%;padding:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;list-style-type:none}.othercows ul li{position:relative;margin-right:40px;text-align:center}.othercows ul li:last-child{margin-right:0}.othercows ul li p{margin-bottom:3px}.othercows ul li p>img{position:relative;vertical-align:middle;-webkit-transform:rotate(180deg);transform:rotate(180deg);width:14px;margin-right:5px}.othercows ul li p>span{font-size:14px;text-transform:uppercase}.othercows ul li strong{position:relative;width:100%;text-align:left;font-size:20px;font-weight:400;color:#7db254;line-height:1;display:block;margin-top:5px}.othercows ul li img{width:80px}.other-cow-item:hover{cursor:pointer}@-webkit-keyframes wifianimation{0%{opacity:.4}30%{opacity:1}60%{opacity:.4}to{opacity:.1}}.error-popup-wr{position:fixed;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:50%;z-index:999}.error-popup-wr .logo{width:130px;height:auto}.error-popup-container{position:absolute;width:65%;min-width:500px;max-width:1000px;height:68vh;min-height:300px;max-height:750px;top:0;left:0;right:0;bottom:0;margin:auto;background-color:rgba(116,185,89,.8);-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;border-radius:10px;z-index:10;display:none;-webkit-transform:translateX(-150px);transform:translateX(-150px)}.error-popup-container>p{margin-top:30px;margin-bottom:15px;font-size:36px;text-transform:uppercase;color:#114827;font-weight:800;line-height:1.2;font-family:Pluto Sans Bold;text-align:center;letter-spacing:1px}.error-popup-container>p>.white{color:#fff}.error-popup-container>small{font-size:18px;color:#fff}.error-popup-ban-icon{position:relative;display:-webkit-box;display:flex;width:120px;height:120px;text-align:center;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.error-popup-ban-icon .ban-circle{position:absolute;width:100%;height:100%;top:0;left:0}.unavailable-cow{position:relative;display:inline-block;top:13px;-webkit-transform:scale(.7);transform:scale(.7)}.unavailable-cow .wifi-symbol{margin:-109px auto 0;-webkit-transform:scale(.9) rotate(-45deg);transform:scale(.9) rotate(-45deg)}.unavailable-cow .wifi-symbol .wifi-circle{-webkit-animation:none;animation:none;opacity:1;border-color:#539149}.unavailable-cow .wifi-symbol .fourth{background-color:#539149}.load-icon{position:absolute;left:0;top:0;z-index:6;right:0;display:none;width:100%;height:100%;background-color:rgba(36,73,38,.4);-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.load-icon img{-webkit-transform:translateX(-150px);transform:translateX(-150px)}@keyframes wifianimation{0%{opacity:.4}30%{opacity:1}60%{opacity:.4}to{opacity:.1}}
	
@media screen and (max-height:900px) and (min-height:761px) {
    .right-bar-inner {
        transform: scale(0.7) translateY(-4%);
    transform-origin: top left;
        position: absolute;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .right-bar{
        width: 240px;
        padding: 20px;
    }
    .map-bgr{
        width: calc(100% - 240px);
    }
    .cow-pos dl dt{
        font-size: 14px;
    }
}

@media screen and (max-height:740px) {
    /* .right-bar-inner {
        transform: scale(0.7) translateY(-4%);
        transform-origin: top left;
        position: absolute;
        width: 100%;
    } */
    .right-bar{
        width: 200px;
    }
    .map-bgr{
        width: calc(100% - 200px);
    }
    .logo img {
        width: 100px;
    }
    .cow-pos dl dt{
        font-size: 14px;
    }
}
@media screen and (max-width:1000px) {
    .right-bar-inner {
        transform: scale(0.7) translateY(-4%);
        transform-origin: top left;
        position: absolute;
        width: 100%;
    }
    .right-bar{
        width: 240px;
        padding: 20px;
    }
    .map-bgr{
        width: calc(100% - 240px);
    }
    .cow-pos dl dt{
        font-size: 14px;
    }
}
@media screen and (max-width:991px) {
    .right-bar-inner {
        transform: scale(1) translateY(0);
        transform-origin: top left;
        position: absolute;
    }
    .map-bgr {
        width: calc(100% - 240px);
    }
    .right-bar {
        width: 240px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .main-screen .logo {
        width: 70px;
        padding-left: 15px;
        padding-top: 15px;
    }
    .logo  img {
        width: 70px;
    }
    .right-bar{
        width: 240px;
        min-height: 100vh;
        height: auto;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 15px;
    }
    .right-bar-inner {
        width: 210px;
    }
    .logo img {
        width: 100px;
    }
    .right-bar .cow-icon {
        top: 0;
        left: -20px;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }
    .cow-pos {
        padding: 15px 0;
    }
    .cow-pos dl dt,
    .cow-info-number label span,
    .cow-info-desc   {
        font-size: 13px;
    }
    .cow-info-number label strong {
        font-size: 25px;
    }
    .cow-pos dl dd {
        font-size: 25px;
    }
    .right-bar h6 {
        font-size: 13px;
        padding-left: 20px;
    }
    .right-bar h6 img {
        width: 15px;
    }
    .othercows ul li p > span {
        font-size: 13px;
    }
    .cow-info-number label .position-icon-rotate {
        width: 11px;    
    }
    .othercows ul li p > img {
        width: 11px;
        top: -2px;
    }
    .custom-gm-style-iw__info {
        font-size: 14px;
    }
}
@media screen and (max-width:767px) {
    /* .right-bar-inner {
        transform: scale(0.7) translateY(-4%);
        transform-origin: top left;
        position: absolute;
    } */
    .main-screen .logo {
        width: 70px;
        padding-left: 15px;
        padding-top: 15px;
    }
    .right-bar {
        padding: 15px;
        -webkit-overflow-scrolling: touch;
    }
    .logo  img {
        width: 70px;
    }
    .cow-info-number label strong {
        font-size: 25px;
    }
    .right-bar .cow-icon {
        top: 15px;
        left: -15px;
    }
    .cow-info-number .cow-avt {
        width: 60px;
        height: 60px;
    }
    .cow-info-number label {
        width: calc(100% - 60px);
    }
    .cow-info-number label .position-icon-rotate {
        width: 11px;
    }
    .cow-info-number label span {
        font-size: 12px;
    }
    .cow-info-number label strong {
        font-size: 20px;
    }
    .cow-info-desc {
        font-size: 12px;
    }
    .cow-pos {
        padding: 10px 0;
    }
    .cow-pos dl dt{
        font-size: 12px;
    }
    .cow-pos dl dd {
        font-size: 25px;
    }
    .cow-pos dl.cow-pos-yesterday {
        margin-top: 10px;
    }
    .friland-man h6 {
        font-size: 12px;
        padding-left: 20px;
    }
    .right-bar h6 img {
        width: 14px;
    }
    .friland-man p {
        font-size: 12px;
        margin: 3px 0 0;
    }
    .friland-man {
        padding: 13px 0 10px;
    }
    .othercows {
        padding: 15px 0;
    }
    .othercows h6 {
        font-size: 12px;
    }
    .othercows ul li img {
        width: 60px;
    }
    .othercows ul li p > img {
        width: 11px;
    }
    .othercows ul li p > span {
        font-size: 12px;
    }
    .othercows ul li strong {
        margin-top: 1px;
    }
    .custom-gm-style-iw__avatar img {
        max-width: 60px;
    }
    .custom-gm-style-iw__name {
        font-size: 12px;
    }
    .custom-gm-style-iw__info {
        font-size: 13px;
    }
    .gm-style .gm-style-iw-c {
        min-width: 260px;
        box-sizing: border-box;
    }
    .gm-style .gm-style-iw-d {
        min-width: 245px;
    }
}
@media screen and (min-width:500px) {
    .cow-mobile .cow-pos,
    .cow-mobile .othercows{
        display: none;
    }
   
}
@media screen and (max-width:499px) {
    .load-icon img {
        -webkit-transform: translateX(-150px);
        transform: translateX(-50%);
        margin-left: 50%;
        margin-top: 50%;
        position: absolute;
    }
    .load-icon {
        -webkit-box-align: unset;
        align-items: unset;
        -webkit-box-pack: unset;
        justify-content: unset;
    }
    .map-bgr {
        width: 100%;
        height: calc(100vh - 120px);
        top: 0;
        left: 0;
        position: absolute;
    }
    .right-bar {
        width: 100%;
        height: 285px;
        min-height: auto;
        top: calc(100vh - 285px);
        padding: 15px 15px;
        z-index: 999;
        overflow-y: auto;
         -webkit-overflow-scrolling: touch;
    }
    .right-bar-inner {
        width: calc(100% - 30px);
        height: auto;
    }
    .right-bar .cow-icon {
        top: -30px;
        left: -45px;
        transform: scale(0.2);
    }
    .cow-info-number {
        margin-top: 0;
    }
    .cow-info-desc {
        display: none;
    }
    .friland-man p  {
        font-size: 11px;
    }
    .cow-pos,
    .friland-man  {
        display: none;
    }
    .cow-mobile {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .cow-mobile .cow-pos{
        display: flex;
         width: 45%;
         flex-direction: column;
         padding-left: 10px;
         box-sizing: border-box;
         border-bottom: 0;
    }
    .cow-mobile .friland-man {
        display: inline-block;
        margin-bottom: 15px;
    }
    .cow-mobile .friland-man p {
        height: 25px;
    }
    .cow-mobile .cow-info {
        width: 55%;
        box-sizing: border-box;
        padding: 5px 0 20px 0;
        border-bottom: 0;
    }
    .cow-mobile  .cow-info-number label {
        width: 95px;
    }
    .cow-mobile .cow-info-number label span {
        font-size: 10px;
    }
    .cow-mobile .cow-info-number label .position-icon-rotate {
        width: 9px;
    }
    .cow-mobile .cow-info-number label strong {
        font-size: 17px;
    }
    .cow-mobile .cow-info-number .cow-avt {
        width: 60px;
        height: 60px;
        right: 10px;
    }
    .cow-mobile .cow-pos dl dt {
        font-size: 10px;
        line-height: 20px;
        white-space:nowrap;
    }
    .cow-mobile .cow-pos dl dd {
        font-size: 18px;
        margin-top: 2px;
    }
    .cow-mobile .cow-pos dl.cow-pos-yesterday {
        margin-top: 15px;
    }
    .othercows {
        display: none;
    }
    .cow-mobile .othercows {
        display: inline-block;
        padding-top: 0;
    }
    .cow-mobile  .othercows ul {
        margin-top: 5px;
    }
    .othercows ul li p {
        margin-top: 0px;
    }
    .othercows ul li p > img {
        width: 9px;
        margin-right: 3px;
    }
    .friland-man h6 {
        font-size: 11px;
        padding-left: 18px;
    }
    .right-bar h6 img {
        width: 12px;
    }
    .othercows ul li {
        margin-right: 35px;
    }
    .othercows ul li p > span {
        font-size: 10px;
    }
    .othercows ul li strong {
        font-size: 17px;
        margin-top:0;
    }
    .othercows h6 {
        font-size: 11px;
        padding-left: 0;
    }
    .othercows ul li img {
        width: 50px;
    }


}