.cloud-platform{
  background:#f2f2f2;
  padding:80px 0;
}
.cloud-platform .title{
  margin-top:0;
  margin-bottom:0;
  text-align: center;
}
.cloud-platform-animation{
  width:100%;
}
.cloudMain{
  width:100%;
  overflow:hidden;
  position:relative;
  background:transparent;
      padding-top: 100px;
  transition:background 2s ease 0s;
}
.cloudMainInner{
     width: 650px;
     height: 650px;
     border-radius: 10px;
     margin: 20px auto;
     position:relative;
     transition:background 2s ease 0s;
 }
 svg.mainCloud{
   position: relative;
   z-index: 10;
 }
 .cloud{
   transition:all 2s ease 0s;
   z-index: 100;
   position: relative;
 }
 .cloudMask{
   position:absolute;
    z-index: 100;
   width:100%;
   height:50%;
   left:0;
   top:0;
   background:#f2f2f2;
   transition: width 1s linear 0s;
 }
  .cloudMask.maskToRight{
    top:50%;
    left:auto;
    right:0;
  }
 .cloudMask.isActive{
   width:0;
 }
/*.cloud1{
  position: absolute;
    top: 0;
}
.cloud2{
  position: absolute;
  bottom: -72px;
}*/
.cloudMainLine{
  position:absolute;
  left:0;
  top:0;
  margin:0 auto;
}
 .isActive.cloudMainInner .cloudLine{
   fill:#68b4ef!important;
 }
 .isActive.cloudMainInner use{
   fill-opacity: 1 !important;
 }
 .cloudSvgInner{
   width:650px;
   height:530px;
 }
.cloudSvgInner,
 .smallCloud path,
 .cloudLines{
   transform: scale(0.5);
   transform-origin: center center;
   /*transition:transform 1s ease 0s;*/

 }

 .smallCloud{
     width: 350px;
     position: absolute;
     height: 200px;
     left: 0;
     top: 0;
 }


 .studioBlock{
    position: absolute;
    bottom: 290px;
    left: 50%;
    transform: translateX(-50%);
 }
 .studioHeadSection {
     /* background: #000; */
     width: 380px;
     color: #fff;
     transition: transform 0.5s ease 0s;
     transform: scale(1,0);
     height: 100px;
     transform-origin: bottom;
     /*overflow: hidden;*/
     display: flex;
     align-items: flex-end;
 }
 .studioHeadSection > span{
    /*transform:translateY(-40px);*/
        transition: transform 0.1s linear 0s;
 }
  .studioBlock.isActive  .studioHeadSection{
    transform: scale(1);
  }

 .studioHeadSection > span{
   padding:0;
   display:block;
   width:100%;
 }

 .studioContent {
     position: absolute;
     left: 0;
     display: BLOCK;
     bottom: 12px;
     display: block;
     padding: 9px 14px;
     /* justify-content: center; */
     /* align-items: center; */
 }
.studioContent .studioTitle {
    text-align: center;
    padding-top: 16px;
    font-size: 14px;
    font-weight: 600;
    width: 150px;
    float: left;
}
.studioContent .studioSubTitle {
    width: calc( 100% - 150px );
    padding-bottom: 10px;
    float: left;
    font-size: 13px;
}
 /*****************users ***********/


 .users {
    position: absolute;
    top: 50%;
        z-index: 100;
    /*transform: scale(0);*/
    opacity:0;
        padding: 0px;
    margin-top: -25px;
    transition: transform 0.5s ease 0s;
    /* opacity: 0; */
}
.userIcon{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
font-size: 0;
      /*background: #fff;*/
}
.userLabel {
    color: #68b4ef;
    font-size: 16px;
    font-weight: 600;
    display: block;
    padding-top: 10px;
    border-bottom: 1px solid #fff;
    margin-bottom: 6px;
}
/*.designer .userIcon{
  background:url(../img/Designer.svg)
}*/
/***********designer *************/
 .designer{
   left: -100px;
   transform:translateX(-100px);

 }

 .designer .arrow {
    content: "";
    position: absolute;
    left: 100%;
    top: 25px;
    height: 1px;
    background: #68b4ef;
    width: 250px;
    z-index: 1000;
    width:0;
    transition:width 0.5s ease 0s;
}
 .designer.active .arrow{
       width: 150px;
 }

 .designer .arrow:after {
    background: url(../img/right-arrow.png) no-repeat right center transparent;
    width: 8px;
    height: 14px;
    display:none;
    content: "";
    position: ABSOLUTE;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
 .designer.active .arrow:after{
   display:block;
 }


 .developer{
   right: -110px;
   transform:translateX(100px);
   /*transition: transform 1s ease 1s;*/
 }

 .developer .arrow {
    content: "";
    position: absolute;
    right: 100%;
    top: 25px;
    height: 1px;
    background: #68b4ef;
    width: 250px;
    z-index: 1000;
    width:0;
    transition:width 0.5s ease 0s;
}
.developer .arrow:after {
   background: url(../img/left-arrow.png) no-repeat right center transparent;
   width: 8px;
   height: 14px;
   display:none;
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
}
 .developer.active .arrow{
       width: 150px;
 }
 .developer.active .arrow:after{
       display:block;
 }


.userRoles{
    position: absolute;
    top: 100%;
    width: 150px;
    margin-top: 10px;
    left: 0;
    /*transform:scale(1,0);*/
    /*transform-origin: top;*/
    /*transition:transform 0.5s ease 0s;*/
}
.userRoles li{
  opacity:0;
  /*transform:translateY(-150px);*/
  transition-property: all;
  color: #fff;
  font-size: 12px;
      font-weight: 300;


}
.userRoles ul{
  list-style-type:none;
  padding:0;
}




/*****************studion bottom section ***************/

.studioBottomBlock{
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
        margin-top: 0;
}

.studioBottomBlock .listingBlock{
  transform:scale(1);
  overflow:hidden;
      transform-origin: top;
  transition: all 1s ease 0s;
}
.studioBottomBlock .listingBlock.active{
  transform:scale(1,1);
}
.studioBottomBlock ul{
  list-style-type:none;
  padding:0;
  width:100%;
  margin:0;
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
align-items: center;
}
.studioBottomBlock li {
    float: left;
    padding:0;
    width: 25%;
    margin-right: 0;
    color:#fff;
    opacity:0;
    position:relative;
    /*border-right: 1px solid #d6d6d6;*/
    transition:all 0.3s linear 0s;
}

.studioBottomBlock li:not(:last-child):after {
    position: absolute;
    content: "";
    background: #777777;
    height: 14px;
    width: 1px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.studioBottomBlock ul li:nth-child(2){
  transition-delay:0.6s;
}
.studioBottomBlock ul li:nth-child(3){
  transition-delay:0.9s;
}
.studioBottomBlock ul li:nth-child(4){
  transition-delay:1.2s;
}
.studioBottomBlock .listingBlock.active li{
  opacity:1;
}



.studioBottomBlock li:last-child{
  padding-right:0;
  border:none;
  margin-right:0;
}
.studioBottomBlock li > span {
    display: block;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
.listingBlock .lbl{
      font-size: 12px;
    padding-left: 10px;
}
.halfWidth{
  width:50%;
  position:relative;
    float:left;
}
.dataFlowDiagrams{
  width:100%;
      display: flex;
  position:relative;
  margin-top: 10px;
}
.diagramsInner > .icon{
  width:60px;
  display:block;
}
.diagramsInner{
    text-align: center;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
    transform-origin: center;
transform: scale(0);
transition: transform 0.5s ease 1s;

}

.dataFlowDiagrams.isActive  .diagramsInner{
    transform: scale(1);
}
.dataStoreDiagram .diagramsInner{
  float:left;
}
.servicesDiagram .diagramsInner {
    float: right;
    padding-left: 80px;
}
.servicesDiagram .diagramsInner > .icon{
  width:110px;
}

.dataFlowDiagrams > .line{
    height: 0;
    background: #68b4ef;
    width: 0px;
    border-right:1px solid #68b4ef;
    display: block;
    position: absolute;
    left: 50%;
        margin-left: -1px;
    transition:height 0.5s ease 0s;
    /*transform: translateX(-50%);*/
    top: -10px;
}
.dataFlowDiagrams.isActive > .line{
    height: 51px;
}
.diagrams > .line{
    width: 0;
    height: 1px;
    background: #68b4ef;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transition:width 0.5s ease 0.5s;
}

.dataFlowDiagrams.isActive .diagrams > .line{
    width: 60px;
}

.diagrams > .line.toRight{
  left:0;
  right:auto;
}

.diagramsInner .label {
    font-size: 16px;
    margin-top: 5px;
    font-weight: 600;
    display: block;
    text-align: center;
    padding: 0;
    width: 100%;
}

.dataStoreDiagrams .diagramsInner{
  padding-right:40px;
}

.line.toLeft:after {
    background: url(../img/left-arrow.png) no-repeat right center transparent;
    width: 8px;
    height: 14px;
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: calc( 50% - 7px );
    opacity:0;
    transition:opacity 0s ease 0.5s;
    /* transform: translateY(-50%); */
}
.line.toRight:after {
    background: url(../img/right-arrow.png) no-repeat right center transparent;
    width: 8px;
    height: 14px;
    display: block;
    content: "";
    position: absolute;
    right: 0;
    top: calc( 50% - 7px );
    opacity:0;
    transition:opacity 0s ease 0.5s;
    /* transform: translateY(-50%); */
}

.dataFlowDiagrams.isActive .diagrams > .line:after{
    opacity:1;
}

/************** build ship deploy *****************/
.studioTopBlock{
    width: 380px;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 16px;
    justify-content: center;
    opacity:1;
    transition:all 1s ease 0s;
}
.studioTopBlock.isActive{
  opacity:1;
}
.studioTopBlock ul{
  margin:0;
  padding:0;
  list-style-type:none;
}
.studioTopBlock ul li {
    float: left;
    color: #fff;
    padding-right: 20px;
    margin-right: 20px;
    position:relative;
    transition:all 1s linear 0s;
    opacity:0;
}
.studioTopBlock ul li:nth-child(2){
  transition-delay:1s;
}
.studioTopBlock ul li:nth-child(3){
  transition-delay:1.5s;
}
.studioTopBlock.isActive li{
  opacity:1;
}
.studioTopBlock ul li:last-child{
  margin-right:0;
  padding-right:0;
}
.studioTopBlock .rightArrow {
    width: 18px;
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
}




/************* apps ******************/
.appsBlock {
    width: 380px;
    opacity:0;
    position:relative;
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(1,0);
        transform-origin: bottom;
    transition: all 0.5s ease 0s;
    margin-bottom: 12px;
}
.appsBlock.isActive{
  opacity:1;
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.appsBlock:after {
    content: "";
    width: 200px;
    height: 100%;
    background: #333;
    left: 0;
    /* z-index: 1000; */
    top: 0;
    position: absolute;
    right: 0;
    margin: 0 auto;
    transition: all 1s ease 0.5s;
      height: 0;
}
.appsBlock.isActive:after{

}
.appsInners{
   width: 200px;
   margin: 0 auto;
}

.appsLabel{
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    display: block;
    margin-bottom: 3px;
    line-height: 16px;
}

/**************** enduser ****************/
.endUsersBlock{
    width: 380px;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}
.endUsersBlock img{
    width: 55px;
}

.endUserLabel{
    width: 100%;
    display: block;
    color: #68b4ef;
    font-weight: 600;
    font-size: 16px;
}

.endUsersBlock .upArrow{
    height: 0;
    margin-top: 12px;
    background: #68b4ef;
    width: 0px;
      transition:height 1s ease 0s;
    border-right: 1px solid #68b4ef;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -51px;
}
.endUsersBlock.isActive .upArrow{
  height:43px;
}
.endUsersBlock .upArrow:after {
    background: url(../img/up-arrow.png) no-repeat right center transparent;
    width: 15px;
    height: 9px;
    display: none;
    content: "";
    position: ABSOLUTE;
    left: calc( 50% - 7px );
    top: 2px;
    transform: translateY(-50%);
}
.endUsersBlock.isActive .upArrow:after{
      display: block;
}

.endUsersBlockInner{
  transform:scale(0);
  transition:transform 1s ease 1s;
}
.endUsersBlock.isActive .endUsersBlockInner{
  transform:scale(1);
}

/*****************rightServicespath**************/
.leftServiesBlockPath,
.rightServiesBlockPath{
  stroke:transparent!important;
}
.leftServiesBlock,
.rightServiesBlock{
  display:none;
}
.dataFlowDiagrams.pathsActive .leftServiesBlock,
.dataFlowDiagrams.pathsActive .rightServiesBlock{
  display:block;
}

.rightServiesBlock{
  position: absolute;
  bottom: 80px;
  right: -24px;
}

.rightServiesBlock .serviesMovingImg {
    right: 0;
    top: -12px;
    margin-right: 41px;
    width: 30px;
    right: 26px;
    /*width: 50px;*/
    position: absolute;
}


.leftServiesBlock{
    position: absolute;
    bottom: 86px;
    left: -68px;
}

.leftServiesBlock .serviesMovingImg {
    left: 0;
    top: -12px;
    margin-right: 41px;
    width: 30px;
    /*height:30px;*/
    right: 10px;
    position: absolute;
}
.movingItems > span{
   width:7px;
   height:7px;
   background:#fff;
   border-radius:50%;
   display:block;
   float:left;
   margin-right:5px;
}


/*.movingItems1{
  opacity:1;
}
.movingItems2{
  opacity:0.8;
}
.movingItems3{
  opacity:0.6;
}
.movingItems4{
  opacity:0.4;
}
.movingItems5{
  opacity:0.2;
}
.movingItems6{
  opacity:0.1;
}*/

.cloud-platform .defaultImgC {
  text-align:center;
  margin-top: 50px;
}
.cloud-platform-animation{
    display:none!important;
}