@charset "UTF-8";
/* CSS Document */

@import url("//hello.myfonts.net/count/314dda");

  
@font-face {font-family: 'BrandonGrotesqueWeb-Bold';src: url('webfonts/314DDA_0_0.eot');src: url('webfonts/314DDA_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/314DDA_0_0.woff2') format('woff2'),url('webfonts/314DDA_0_0.woff') format('woff'),url('webfonts/314DDA_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesqueWeb-Regular';src: url('webfonts/314DDA_1_0.eot');src: url('webfonts/314DDA_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/314DDA_1_0.woff2') format('woff2'),url('webfonts/314DDA_1_0.woff') format('woff'),url('webfonts/314DDA_1_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesqueWeb-Medium';src: url('webfonts/314DDA_2_0.eot');src: url('webfonts/314DDA_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/314DDA_2_0.woff2') format('woff2'),url('webfonts/314DDA_2_0.woff') format('woff'),url('webfonts/314DDA_2_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'BrandonGrotesqueWeb-Thin';src: url('webfonts/314DDA_3_0.eot');src: url('webfonts/314DDA_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/314DDA_3_0.woff2') format('woff2'),url('webfonts/314DDA_3_0.woff') format('woff'),url('webfonts/314DDA_3_0.ttf') format('truetype');}


/***************NETWORK GAME*/
.fade-in.in-view{opacity:1;-webkit-transition:opacity 1s ease-in-out;-moz-transition:opacity 1s ease-in-out;-o-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out; -webkit-transition-delay: 1s;transition-delay: 0.5s;}
.fade-in {opacity:0;}

#network-game {background:#eff0f0;overflow:hidden;display:block;width:100%;}
#network-game img {margin:0}

.network-game {position:relative;}
.network-game img {margin:0 !important}


.net-content {margin:0 auto 20px auto;padding:0 5%;position:relative;width:90%;}
.net-content div {position:absolute;opacity:0;display:block;width:100%;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.net-content div.active {opacity:1}
.net-content div.hide {opacity:0;}

.net-content h3 {text-align:center;padding-bottom:20px;text-transform:uppercase;font-family:BrandonGrotesqueWeb-Regular,"Source Sans Pro","Open Sans", sans-serif;font-weight:400;font-size:55px;color:#00a1df;line-height:100%;margin:0;padding:5px 0 0;}
.net-content p {text-align:center;max-width:900px;/*color:#49c3d9;*/padding-bottom:0px;min-height:70px;font-family:BrandonGrotesqueWeb-Regular,"Source Sans Pro","Open Sans", sans-serif;font-weight:400;font-size:22px;color:#000;line-height:100%;margin:0 auto;padding:0;}

.network-right{width:66%;float:right;max-width:750px;position:relative;z-index:10;}
.network-left{width:29.1%;float:left;padding-right:3.3%;position:relative;z-index:20;}
.network-left ul {list-style:none;display:block;width:100%;padding:0;}
.network-left ul li img {cursor:pointer;opacity:1;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;border:#eff0f0 1px solid;margin:0;width:100%;height:auto;}
.network-left ul li img:hover {opacity:0.7;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;}
.network-left ul li img.active {border:#49c3d9 1px solid;}
.network-left ul li img.disabled {cursor:default;opacity:0.5;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;}
.network-left ul li img.disabled:hover {cursor:default;box-shadow:none}

#scale-wrap {display:block;position:relative; height:390px;}

#scale-top-wrap{position:absolute;width:750px;height:370px;bottom:106px;left:0;z-index:6;opacity:1;;
}
#scale-bottom{position:absolute;width:147px;height: 110px;bottom:0;left:302px;z-index:6;opacity:1}

#scale-top{position:absolute;bottom:-10px;left:0;z-index:1;height:auto;width:750px;
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;}
#costs{position:absolute;right:20px;z-index:1;width:200px;height:auto;opacity:0;}
#loadlora, #loadsigfox {position:absolute;left:40px;z-index:1;width:200px;height:auto;opacity:0;}
#loadrpma{position:absolute;left:40px;z-index:1;width:230px;height:auto;opacity:0;}

#scale-wrap .item {
	-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;
	bottom:60px;
	opacity:0;
}
#scale-wrap #loadlora.item, #scale-wrap #loadsigfox.item {
	-webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s;
}
#scale-wrap .item.item-on {
	-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;
	bottom:31px;
	opacity:1 !important;
}

@media all and (max-width:960px) and (min-width: 0px) {
.net-content {margin-bottom:20px;width:100%;padding:0;}

.network-left{width:100%;float:none;padding-right:0;min-height:90px;}
.network-right{width:100%;float:none;max-width:none;clear:both;}
.network-left ul {text-align:center;margin:0 auto;}
.network-left ul li {float:none;display:inline-block;width:30%;padding:0 2% 10px 0;}
.network-left ul li:last-child {padding-right:0}

#scale-wrap {height:440px}

#scale-top-wrap{width:740px;height: 320px;bottom: 83px;}
#scale-bottom{width:auto;height:90px;bottom:0;left:309px;}

#scale-top{width:740px;}
#costs{width:30%;}
#loadlora, #loadsigfox {width:22%;left:20px;}
#loadrpma{width:30%;left:30px;}

#scale-wrap .item {bottom:50px;}
#scale-wrap .item.item-on{bottom:30px;}

}
@media all and (max-width:768px) and (min-width: 0px) {
.network-left {min-height: 40px;}
#scale-wrap {height:270px}

#scale-top-wrap {width:440px;height:220px;bottom:50px;}
#scale-bottom{width:auto;height:55px;bottom:0;left:183px;}

#scale-top{width:440px;bottom:0px;}

#scale-wrap .item {bottom:40px;}
#scale-wrap .item.item-on{bottom:23px;}

.net-content h3 {font-size:40px;padding-bottom:8px;}

}
@media all and (max-width:479px) and (min-width: 0px) {
	
#scale-wrap {height:200px}

#scale-top-wrap{width:300px;height:180px;bottom:40px;}
#scale-bottom{width:auto;height:45px;bottom:0;left:120px;}
#scale-top{width:300px;bottom:0px;}


#costs{width:30%;}

#scale-wrap .item {bottom:30px;}
#scale-wrap .item.item-on {bottom:16px;}


.net-content h3 {font-size:30px;}


}