*{
    box-sizing: border-box;
}

body{
    margin:0px;
    border:0px;
    background-image: linear-gradient(to bottom, #e6f7ff, #ffffff);
    overflow:hidden;
}

.clear{
    clear:both;
}

.ctn-cloud{
    position: fixed;
    top:calc(50% - 100px);
    left:calc(50% - 125px);
    width:250px;
    height:160px;
    z-index:1;
}

.cloud-1{
    position: absolute;
    bottom:0px;
    width:250px;
    height:80px;
    background: #525bff;
    border-radius:40px 20px 60px 40px;
}
.cloud-2{
    position: absolute;
    bottom:0px;
    right:0px;
    width:120px;
    height:120px;
    background: #525bff;
    border-radius:60px;
}
.cloud-3{
    position: absolute;
    bottom:10px;
    left:40px;
    width:150px;
    height:150px;
    background: #525bff;
    border-radius:50%;
}

.bg-server{
    position: absolute;
    bottom:0px;
    left:calc(50% - 60px);
    width:120px;
    height:100px;
    background: rgba(0,0,0,0.4);
}
.bg-server-top{
    position: absolute;
    bottom:85px;
    left:calc(50% - 60px);
    width:120px;
    height:30px;
    background: rgba(0,0,0,0.4);
    border-radius:50%;
}

.server-1{
    position: absolute;
    bottom:0px;
    left:calc(50% - 50px);
    width:100px;
    height:30px;
    background: #dae3ed;
}
.server-2{
    position: absolute;
    bottom:15px;
    left:calc(50% - 50px);
    width:100px;
    height:30px;
    background: #eef0f5;
    border-radius:50%;
}
.server-3{
    position: absolute;
    bottom:-15px;
    left:calc(50% - 50px);
    width:100px;
    height:30px;
    background: #dae3ed;
    border-radius:50%;
}

.server-4{
    position: absolute;
    bottom:50px;
    left:calc(50% - 50px);
    width:100px;
    height:30px;
    background: #dae3ed;
}
.server-5{
    position: absolute;
    bottom:65px;
    left:calc(50% - 50px);
    width:100px;
    height:30px;
    background: #eef0f5;
    border-radius:50%;
}
.server-6{
    position: absolute;
    bottom:35px;
    left:calc(50% - 50px);
    width:100px;
    height:30px;
    background: #dae3ed;
    border-radius:50%;
}

.net-1{
    position: fixed;
    top:calc(50% + 50px);
    left:0px;
    width:calc(50% - 30px);
    height:50px;
    border:0px;
    border-right:5px solid #1775aa;
    border-bottom:5px solid #1775aa;
    z-index:0;
}

.net-2{
    position: fixed;
    top:calc(50% + 50px);
    right:0px;
    width:calc(50% - 30px);
    height:50px;
    border:0px;
    border-left:5px solid #1775aa;
    border-bottom:5px solid #1775aa;
    z-index:0;
}

.net-3{
    position: fixed;
    top:calc(50% + 70px);
    left:0px;
    width:calc(50% - 10px);
    height:calc(50% - 70px);
    border:0px;
    border-right:5px solid #1775aa;
    z-index:0;
}
.net-4{
    position: fixed;
    top:calc(50% + 70px);
    right:0px;
    width:calc(50% - 10px);
    height:calc(50% - 70px);
    border:0px;
    border-left:5px solid #1775aa;
    z-index:0;
}

.model-1{
    width:15px;
    height:15px;
    background: #00cec8;
    border-radius:5px;
}
.model-2{
    width:15px;
    height:15px;
    background: #fdf401;
    border-radius:5px;
}
.model-3{
    width:15px;
    height:15px;
    background: #fe4d5c;
    border-radius:5px;
}
.model-4{
    width:15px;
    height:15px;
    background: #4dd4f7;
    border-radius:5px;
}

.data-1{
    position: absolute;
    left:0px;
    top:40px;
    animation: send-data-1 4s ease infinite;
}
.data-2{
    position: absolute;
    right:-20px;
    top:40px;
    animation: send-data-2 5s ease infinite 2s;
}

.data-3{
    position: absolute;
    right:-10px;
    bottom:-20px;
    animation: send-data-3 5s ease infinite;
}

.data-4{
    position: absolute;
    left:-10px;
    bottom:-20px;
    animation: send-data-4 3s ease infinite 4s;
}

.certificate{
    position: fixed;
    bottom:10px;
    right:20px;
    z-index:1;
}

/** Animation **/
@keyframes send-data-1 {
  0% {
    left:0px;
    top:40px;
  }
  50% {
    left:calc(100% - 5px);
    top:40px; 
  }
  100% {
    left:calc(100% - 5px);
    top:0px; 
  }
}

@keyframes send-data-2 {
  0% {
    right:-20px;
    top:40px;
  }
  50% {
    right:calc(100% - 5px);
    top:40px; 
  }
  100% {
    right:calc(100% - 5px);
    top:0px; 
  }
}

@keyframes send-data-3 {
  0% {
    right:-10px;
    bottom:-20px;
  }
  100% {
    right:-10px;
    bottom:calc(100% - 5px); 
  }
}

@keyframes send-data-4 {
  0% {
    left:-10px;
    bottom:-20px;
  }
  100% {
    left:-10px;
    bottom:calc(100% - 5px); 
  }
}