.page-wrapper *{box-sizing:border-box;}
.sjnt{margin-bottom: 4px;}
.sjn{color: #666;  font-size: 14px;}
h1,h2,h3,h4{font-family:'gilroybold';}
p{line-height:1.7;}
.inline-block{display:inline-block;}
.flex-wrap{display:flex;align-items: center;}
section#block-panels-mini-product-menu {background: #000;}
.banner {background: #000 url(/sites/default/files/creator/images/paas-bg.png) no-repeat;color: #fff;background-size: contain;background-position: center bottom;} 
#mini-panel-product_menu .expanded.dropdown .caret{background-position: -168px  -6px;}
.page-wrapper .content-wrap { padding: 90px 0; } 
.bnr-cont { padding-right: 120px; } 
.flex-wrap > div { width: 50%; } 
.bnr-cont p { margin: 20px 0 30px; }
.one-col {text-align: center;max-width: 1040px;margin: auto;}
.desc {max-width: 760px;margin: auto;text-align: center;}
.img-wrap{position:relative;}
.bnr-img{position:relative;}
img.bnrimg1 {position: relative;z-index: 1;animation:move1 20s linear 1s infinite}
img.bnrimg2 {position: absolute;left: 7%;max-width: 85%;top: 9%;animation:move2 20s linear 1s infinite}

@keyframes move1 {
    0% {transform: translate(0, 0);}
    25% {transform: translate(-30px, -14px);}
    50% {transform: translate(-10px, 20px);}
    75% {transform: translate(30px, 0px);}
    100% {transform: translate(0, 0);}
}

@keyframes move2 {
    0% {transform: translate(0, 0);transform: scale(1)}
    25% {transform: translate(50px, 14px);transform: scale(.9)}
    50% {transform: translate(0px, 0px);transform: scale(1)}
    75% {transform: translate(-50px, 14px);transform: scale(1.1)}
    100% {transform: translate(0, 0);transform: scale(1)}
}


.section1 .flex-wrap {margin-top: 60px;}
.section1 h4 {margin-top: 60px;}
.section1 .one-col:nth-child(2) {margin-top: 90px;}
.one-col .flex-item {text-align: left;}
.one-col .flex-item:first-child {padding-right: 90px;}
.one-col .flex-item:last-child {padding-left: 90px;}
.section1 h3:before {display: block;width: 60px;height: 60px;content: '';background: lightblue;margin-bottom: 20px;}
.section2 {background: #000;color: #fff;}
ul.paas-features {display: flex;flex-flow: row wrap;align-items: flex-start;max-width: 800px;margin: auto;}
.paas-features li {width: 29%;padding:30px;max-width: 280px;margin: 10px 2% 30px;background: #E5F8FF;border-radius: 5px;color: #000;font-family: gilroybold;font-size: 20px;}
.paas-features + p {max-width: 740px;margin: 10px auto 0;}
.paas-soln ul {text-align: left;margin: 30px auto 0;max-width: 620px;}
.paas-soln li {position: relative;padding: 0 0 0 70px;font-size: 20px;margin: 0 0 40px 0;vertical-align: top;}
.paas-soln li:before {position: absolute;width: 50px;height: 50px;background: lightblue;left: 0;content: '';top: 6px;}
.paas-soln {max-width: 800px;margin: 60px auto 0;}


/*speed comparioson*/
.speed-comparison {border: 1px solid #c7c7c7;padding:70px 50px 90px;text-align: left;max-width: 980px;margin: 60px auto 0 auto;position: relative;}
.speed-comparison h5{font-size:24px;display: inline-block;width:20%;}
.process-segment span {padding: 25px 5px;float: left;color: #fff;font-size: 14px;transform: translateX(-50px);opacity:0;transition: all 700ms ease;height: 60px;width:30px;}
.process-segment.in-view  span{transform: translateX(0px);opacity:1;}

.process-segment {display: inline-block;width: 79%;margin: 0px;vertical-align: middle;}
.other-tool .process-segment {margin-top: 0px;}
.process-segment span:first-child{background-color: #3962b4;transition-delay: 100ms;width:90px;}
.process-segment span:nth-child(2){background-color: #00c3d7;transition-delay: 300ms;width: 150px;}
.process-segment span:nth-child(3){background-color: #01e3cf;transition-delay: 500ms;width:90px}
.process-segment span:nth-child(4){background-color: #befbf6;transition-delay: 700ms;width: 180px;}
.other-tool .process-segment span label {color: #000;position: relative;top: 40px;text-align: center;display: inherit;}

.creator-tool {margin: 10px 0 90px 0;}
.creator-tool .process-segment > span{text-indent:-9999em;padding: 15px 15px;width:20px;}
.creator-tool .process-segment > span:last-child{width:80px;}
.speed-comparison > h4{color: #2c66ba; position: absolute; top: -19px; left: 50%; width: 280px; text-align: center; margin-left: -140px; background: #fff;}
.colr-detail {display: inline-block;width: 60%;margin: 0px;vertical-align: middle;background: #fefdf8;padding: 10px 10px;border: 1px dotted #ddd;box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.07);}
.creator-colr {display: inline-block;width: 15%;vertical-align: middle;}
.creator-tool .colr-detail span{background-color:#fefdf8;color:#000;padding: 10px 10px;width: auto;font-size: 16px;}
.creator-tool .colr-detail span:before{content:'';width:8px;height:8px;display:inline-block;vertical-align: middle;margin-right: 10px;}
.creator-tool .colr-detail span:first-child:before{background-color:#3962b4;}
.creator-tool .colr-detail span:nth-child(2):before{background-color:#00c3d7;}
.creator-tool .colr-detail span:nth-child(3):before{background-color:#01e3cf;}
.creator-tool .colr-detail span:nth-child(4):before{background-color:#befbf6;}

span.tool-note {position: absolute;bottom: -10px;background: #fff;width: 310px;text-align: center;left: 50%;margin-left: -155px;font-size: 16px;color:#666;}
.creator-tool .process-segment .creator-colr span:first-child{width:10px;background: #3962b4;}
.creator-tool .process-segment .creator-colr span:nth-child(2){width:20px;background: #00c3d7;}
.creator-tool .process-segment .creator-colr span:nth-child(3){width:10px;background: #01e3cf;}
.creator-tool .process-segment .creator-colr span:nth-child(4){width:10px;background: #befbf6;}
.features4 .content-wrap{padding-top: 10px;}
.bottom-cta .content-wrap {text-align: center;padding-top: 10px;}
.paas-features li:before{content:'';display: block;}
.section1 h3:before,.paas-features li:before,.paas-soln li:before{background:url(/sites/default/files/creator/images/paas-sprite-2x.png) no-repeat;background-size: 750px auto;}
.icon1 h3:before{background-position: 0 0;width: 70px;height: 65px;}
.icon2 h3:before{background-position: -75px 0;width: 54px;height: 67px;;}
.icon3 h3:before{background-position: -151px -1px;width: 73px;height: 64px;;}
.icon4 h3:before{background-position: -228px 0;width: 39px;height: 66px;;}
.paas-features li:before{margin: 0 auto 20px;min-height: 90px;position: relative}
.paas-features li:nth-child(1):before{background-position:0 -83px;width: 110px;height: 65px;top:15px}
.paas-features li:nth-child(2):before{background-position: -118px -76px;width: 97px;height: 90px;}
.paas-features li:nth-child(3):before{background-position: -224px -75px;width: 103px;height: 88px;}
.paas-features li:nth-child(4):before{background-position: -336px -75px;width: 113px;height: 96px;}
.paas-features li:nth-child(5):before{background-position: -455px -75px;width: 109px;height: 104px;}
.paas-features li:nth-child(6):before{background-position: -575px -79px;width: 94px;height: 92px;}
.paas-soln li:first-child:before{background-position: -275px -1px;width: 55px;height: 49px;}
.paas-soln li:nth-child(2):before{background-position: -333px -2px;width: 44px;height: 46px;}
.paas-soln li:nth-child(3):before{background-position: -381px 0;width: 34px;height: 51px;left: 3px;}
.paas-soln li:nth-child(4):before{background-position: -420px -1px;width: 42px;height: 49px;left: 4px;}
.paas-soln li:nth-child(5):before{background-position: -466px -3px;width: 53px;height: 45px;left: -4px;}
.paas-soln li:nth-child(6):before{background-position: -526px -5px;width: 55px;height: 42px;left: -4px;}

@media all and (min-width:1200px){
    .page-wrapper .content-wrap{max-width:1170px;}
    .bottom-cta .content-wrap{max-width:600px;}
    .fadeinup1{transform:translateY(70px);opacity:0;transition: all 1300ms cubic-bezier(0.11, 0.16, 0.43, 0.86);}
    .in-view .fadeinup1{transform:translateY(0);opacity: 1;}
    .inup1,.inup2,.inup3,.inup4,.inup5,.inup6,.inup7{transform:translateY(60px);transition: all 1300ms cubic-bezier(0.11, 0.16, 0.43, 0.86);}
    .in-view .inup1,.in-view.inup1,.in-view .inup2,.in-view.inup2,.in-view .inup3,.in-view.inup3,.in-view .inup4,.in-view.inup4,.in-view .inup5,.in-view.inup5,.in-view .inup6,.in-view.inup6,.in-view .inup7,.in-view.inup7{transform:translateY(0px);}
    .fadeinup1,.inup1{transition-delay:200ms;}
    .fadeinup2,.inup2{transition-delay:400ms;}
    .fadeinup3,.inup3{transition-delay:600ms;}
    .fadeinup4,.inup4{transition-delay:800ms;}
    .fadeinup5,.inup5{transition-delay:1000ms;}
    .fadeinup6,.inup6{transition-delay:1200ms;}
    .fadeinup7,.inup7{transition-delay:1200ms;}

}
@media all and (min-width:1400px){
    h1 { font-size: 66px;} 
    h2 { font-size: 46px;} 
    .cta-btn{padding:12px 30px;}
}

@media all and (min-width:768px) and (max-width:991px){
    .page-wrapper .content-wrap {padding: 60px 0;width:90%;}
    .section1 .one-col:nth-child(2) {margin-top: 60px;}
    .features4 .content-wrap,.bottom-cta .content-wrap{padding-top: 10px;}
    h1{font-size:36px}
    .bnr-cont {padding-right: 20px;}
    .one-col .flex-item:last-child {padding-left: 40px;}
    .one-col .flex-item:first-child {padding-right: 40px;}
    .process-segment span{height:auto;}
    .speed-comparison{padding: 40px 20px 80px;}
    .speed-comparison h5{font-size:18px;}
    .process-segment span:first-child{width:60px;}
    .process-segment span:nth-child(2){width:130px}
    .process-segment span:nth-child(3){width:70px;}
    .process-segment span:nth-child(4){with:160px}
    .creator-tool .colr-detail span{width:100%;}
}

@media all and (max-width:767px){
    .bnr-cont{margin-bottom: 30px;}
    .one-col p{line-height: 1.7 !important}
    .main-container-wrapper #mini-panel-product_menu .menu-icon-help-header .product-title a{color:#fff;}
    .page-wrapper .content-wrap{padding:60px 0;width:85%;text-align: center;}
    .features4 .content-wrap,.bottom-cta .content-wrap{padding-top: 0px;}
    .section1 .one-col:nth-child(2) {margin-top: 60px;}
    .one-col .flex-item:first-child {padding-right: 0;}
    .one-col .flex-item:last-child{padding-left: 0px;}
    .one-col .flex-item{text-align:center;margin-bottom: 40px;}
    .one-col .flex-item.icon4{margin-bottom: 0px;}
    .section1 h3:before{margin: 0 auto 15px;}
    .section1 .flex-wrap{margin-top: 0px;}
    .flex-wrap{flex-flow:column;}
    .flex-wrap > div{width:100%;padding:0;}
    ul.paas-features{flex-flow:column;}
    .paas-features li{width:100%;margin:10px auto 30px;}
    .paas-soln li{font-size:16px;}
    .speed-comparison{padding: 20px 10px 60px;}
    .colr-detail,.creator-colr,.process-segment,.speed-comparison h5{width:100%;}
    .process-segment span{height:auto;}
    .colr-detail{margin-top: 30px;}
    .creator-tool{margin: 10px 0 40px 0;}
    .process-segment span:first-child{width:35px;}
    .process-segment span:nth-child(2){width:60px;}
    .process-segment span:nth-child(3){width:30px;}
    .process-segment span:nth-child(4){width:120px;}
    .creator-tool .colr-detail span{width:auto;}
    .process-segment span{font-size:12px;}
    span.tool-note{font-size: 12px;width: 240px;margin-left: -120px;}
    
    
}