/*********************/
/*** OUR PORTFOLIO ***/
/*********************/
.minglebody.our-portfolio
{
    padding: 0;
    width:100%;
    border-top: none;
}
.our-portfolio .ourportfolio-slider
{
    position: relative;    
}
.our-portfolio .ourportfolio-slider .ourportfolio-bk
{
    width: 100%;     
}
.our-portfolio .ourportfolio-carousel-bk
{
    position: absolute;
    bottom: 0px;
    z-index: 5;
    width:100%;
    height: 100%;
}
.our-portfolio .ourportfolio-carousel-bk h1
{
    color: #333;
    font-size: 3em;
    text-align: center;
    font-weight: 100;
    font-family: 'Helvetica-Neue',Helvetica, Arial;
    width: 100%;
}
.our-portfolio .ourportfolio-carousel-bk img
{
    width: 100%;
    position: absolute;
    bottom: 0;
}
.our-portfolio .horizontal-tabs .ui-tabs-nav
{
    padding-bottom: 0px !important;
    margin-left: 300px !important;
}
.our-portfolio .horizontal-tabs .ui-tabs-nav li
{
    max-width: 57px;
    margin-right: 2px!important;
    padding-bottom: 0
}
.our-portfolio .horizontal-tabs .ui-tabs-nav li a
{
    text-align: center;
    font-size: 10px;
    padding: 6px !important;
    width: 46px;
}
.our-portfolio .horizontal-tabs .ui-tabs-nav li a img
{
    height: 28px;
    width: 28px;
    margin: 0 0 2px;
}
.our-portfolio .ourportfolio-box
{
    padding: 30px;
    min-height: 375px;   
}
.our-portfolio .app-image
{
    float: left;
    margin-right: 30px;
    margin-top: -145px;
    position: relative;
    z-index: 9;
}
.our-portfolio .app-image img.app-image-bk
{
    width: 255px;
    height: 516px;
}
.our-portfolio .app-image img.app-image-img
{
    width: 221px;
    height: 394px;
    position: absolute;
    top: 63px;
    left: 17px;
}
.our-portfolio .app-title
{
    font-family: 'Helvetica-NeueLight',Helvetica,Arial,sans-serif;
    font-weight: 100;
    color:#0079c1;
    font-size:22px; 
}
.our-portfolio .app-category
{
    font-family:Arial,Helvetica,sans-serif;
    color:#292929;
    font-size:14px;    
}
.our-portfolio .app-by
{
    font-family:Arial,Helvetica,sans-serif;
    color:#666;
    font-size:12px;
    line-height:28px;   
}
.our-portfolio .app-description
{
    margin: 20px 0 0 0;
    font-family:Arial,Helvetica,sans-serif;
    color:#595959;
    font-size:12px;
    line-height:20px;
}
.our-portfolio .line-divide-center {
    background: url(/images/section-divider.png) center top no-repeat;
    margin: 0;
    padding-top: 44px;
    background-size: 750px;
    opacity: 0.4;
}

/********************/
/*** HOW IT WORKS ***/
/********************/
.prew-box{position: relative;}
.swiper-container {padding:77px 0 0; width:450px;}
.swiper-slide {
    height:225px !important;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    border-radius:3px;
    -webkit-box-shadow: inset 0px 0px 1px 0px #aaa;
    -moz-box-shadow: inset 0px 0px 1px 0px #aaa;
    box-shadow: inset 0px 0px 4px 0px #aaa;
}
    
.simulator-prew{
    background: url(../images/howitworks/simulator-prew.png) center no-repeat;
    background-size: 182px 350px;
    width:200px;
    height:360px;
    margin: auto;
    left:-3px;
    right:0;
    position:absolute;
    z-index:2;
}
    
.publish
{
    position: absolute;
    left: 166px;
    bottom: 18px;
    z-index: 5;
}
.build
{
    position: absolute;
    left: 204px;
    bottom: 18px;
    z-index: 5;
}
.gear-box
{
    position: absolute;
    top: 136px;
    left: 193px;
    height: 60px;
    width: 80px;
}
.gear-innerbox{position: relative}
.gear-box .gear{position: absolute}
.gear-box .gear1{left: 8px; top: 30px;}
.gear-box .gear2{left: 28px; top: 14px;}
.gear-box .gear3{left: 29px; top: 33px;}
.gear-box .gear4{left: 45px; top: 23px;}
    
.cursor, .cursorright
{
    position: absolute;
    left:245px;
    bottom: 5px;
    z-index: 6;
    display: none;
}
.cursor img, .cursorright img{height: 32px;}
.cursorright
{
    left:225px; 
}
    
.swiper-slide a {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:2
}
.zoomin
{
    -webkit-animation: blink 0.2s linear;
	-moz-animation: blink 0.2s linear;
	-ms-animation: blink 0.2s linear;
	-o-animation: blink 0.2s linear;
	animation: blink 0.2s linear;
}
.animation-container {padding: 0 0 15px 0; min-height: 57px; position: relative}
.animation-container .appicon
{
    visibility: hidden;
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: 2;
    -webkit-box-shadow: inset 0px 0px 1px 0px #ccc;
    -moz-box-shadow: inset 0px 0px 1px 0px #ccc;
    box-shadow:  0px 0px 4px 0px #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.animation-container .miniclouds{position: relative; top: 10px; left: 20px; z-index: 1}
.animation-container .brand-logo{height:82px; position: relative; z-index: 4; left:-50px}
.animation-container .badge-logo{height:60px; position: absolute; z-index: 4; top: 18px; right:0}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.hinge {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}
.rotate{
    -webkit-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}
.rotateinv{
    -webkit-animation: rotatinginverse 1s linear infinite;
    animation: rotatinginverse 1s linear infinite;
}
.rotateinv4{
    -webkit-animation: rotatinginverse 4s linear infinite;
    animation: rotatinginverse 4s linear infinite;
}
.type-wrap
{
    position: absolute;
    width: 145px;
    bottom: 100px;
    left: 30px;
    text-align: left;
    padding-left: 10px;
    font-size: 11px;
}
.typed-cursor{
	opacity: 1;
	font-weight: 100;
	-webkit-animation: blink 0.7s linear infinite;
	-moz-animation: blink 0.7s linear infinite;
	-ms-animation: blink 0.7s linear infinite;
	-o-animation: blink 0.7s linear infinite;
	animation: blink 0.7s linear infinite;
}
@-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-ms-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-o-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes slideOutRight {
    0% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    }
          
    100% {
    opacity: 0;
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
    }
}

@keyframes slideOutRight {
    0% {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
    }
          
    100% {
    opacity: 0;
    -webkit-transform: translateX(250px);
    -ms-transform: translateX(250px);
    transform: translateX(250px);
    }
}
    
@-webkit-keyframes rotating {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
    
@-webkit-keyframes rotatinginverse {
    0% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes rotatinginverse {
    0% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/******************/
/*** WHITELABEL ***/
/******************/
.cloud-sync
{
    position:relative;
    margin:20px auto 0;
    width:364px;
	zoom: .8;
    -ms-zoom: .8;
    -webkit-zoom: .8;
    -moz-transform: scale(.8,.8);
}
.cloud-anim{
    -webkit-animation: WheelAnim 10s 0s ease-in-out infinite alternate;
    -moz-animation: WheelAnim 10s 0s ease-in-out infinite alternate;
    -ms-animation: WheelAnim 10s 0s ease-in-out infinite alternate;
    animation: WheelAnim 10s ease-in-out infinite alternate;
    position:absolute;
}
.cloud-anim-back{
    -webkit-animation: WheelAnimBack 10s 0s ease-in-out infinite alternate;
    -moz-animation: WheelAnimBack 10s 0s ease-in-out infinite alternate;
    -ms-animation: WheelAnimBack 10s 0s ease-in-out infinite alternate;
    animation: WheelAnimBack 10s 0s ease-in-out infinite alternate;
    position:absolute;
    }   
.cloud-gear1{
    background:url("/images/cloud-gear1.png") no-repeat;
    height: 110px;
    width:110px;
    bottom:13px;
    right: 13px;
}
.cloud-gear2{
    background:url("/images/cloud-gear2.png") no-repeat;
    height: 94px;
    width:94px;
    bottom:10px;
    left: 70px;
    z-index:2;
}
.cloud-gear3{
    background:url("/images/cloud-gear3.png") no-repeat;
    height: 124px;
    width:124px;
    bottom:10px;
    left: 10px;
}
.cloud-gear4{
    background:url("/images/cloud-gear4.png") no-repeat;
    height: 200px;
    width:200px;
    bottom:5px;
    left: 120px;
}
        
@-webkit-keyframes WheelAnim {
5%,10% {-webkit-transform:rotate(10deg);}
15%,20% {-webkit-transform:rotate(20deg);}
25%,30% {-webkit-transform:rotate(30deg);}
35%,40% {-webkit-transform:rotate(40deg);}
45%,50% {-webkit-transform:rotate(50deg);}
55%,60% {-webkit-transform:rotate(60deg);}
65%,70% {-webkit-transform:rotate(70deg);}
75%,80% {-webkit-transform:rotate(80deg);}
85%,90% {-webkit-transform:rotate(90deg);}
95%,100% {-webkit-transform:rotate(100deg);}
}
@-moz-keyframes WheelAnim {
5%,10% {-webkit-transform:rotate(10deg);}
15%,20% {-webkit-transform:rotate(20deg);}
25%,30% {-webkit-transform:rotate(30deg);}
35%,40% {-webkit-transform:rotate(40deg);}
45%,50% {-webkit-transform:rotate(50deg);}
55%,60% {-webkit-transform:rotate(60deg);}
65%,70% {-webkit-transform:rotate(70deg);}
75%,80% {-webkit-transform:rotate(80deg);}
85%,90% {-webkit-transform:rotate(90deg);}
95%,100% {-webkit-transform:rotate(100deg);}
}
@-o-keyframes WheelAnim {
5%,10% {-webkit-transform:rotate(10deg);}
15%,20% {-webkit-transform:rotate(20deg);}
25%,30% {-webkit-transform:rotate(30deg);}
35%,40% {-webkit-transform:rotate(40deg);}
45%,50% {-webkit-transform:rotate(50deg);}
55%,60% {-webkit-transform:rotate(60deg);}
65%,70% {-webkit-transform:rotate(70deg);}
75%,80% {-webkit-transform:rotate(80deg);}
85%,90% {-webkit-transform:rotate(90deg);}
95%,100% {-webkit-transform:rotate(100deg);}
}
@keyframes WheelAnim {
5%,10% {-webkit-transform:rotate(10deg);}
15%,20% {-webkit-transform:rotate(20deg);}
25%,30% {-webkit-transform:rotate(30deg);}
35%,40% {-webkit-transform:rotate(40deg);}
45%,50% {-webkit-transform:rotate(50deg);}
55%,60% {-webkit-transform:rotate(60deg);}
65%,70% {-webkit-transform:rotate(70deg);}
75%,80% {-webkit-transform:rotate(80deg);}
85%,90% {-webkit-transform:rotate(90deg);}
95%,100% {-webkit-transform:rotate(100deg);}
}
        
@-webkit-keyframes WheelAnimBack {
5%,10% {-webkit-transform:rotate(100deg);}
15%,20% {-webkit-transform:rotate(90deg);}
25%,30% {-webkit-transform:rotate(80deg);}
35%,40% {-webkit-transform:rotate(70deg);}
45%,50% {-webkit-transform:rotate(60deg);}
55%,60% {-webkit-transform:rotate(50deg);}
65%,70% {-webkit-transform:rotate(40deg);}
75%,80% {-webkit-transform:rotate(30deg);}
85%,90% {-webkit-transform:rotate(20deg);}
95%,100%{-webkit-transform:rotate(10deg);}
}
@-moz-keyframes WheelAnimBack {
5%,10% {-webkit-transform:rotate(100deg);}
15%,20% {-webkit-transform:rotate(90deg);}
25%,30% {-webkit-transform:rotate(80deg);}
35%,40% {-webkit-transform:rotate(70deg);}
45%,50% {-webkit-transform:rotate(60deg);}
55%,60% {-webkit-transform:rotate(50deg);}
65%,70% {-webkit-transform:rotate(40deg);}
75%,80% {-webkit-transform:rotate(30deg);}
85%,90% {-webkit-transform:rotate(20deg);}
95%,100%{-webkit-transform:rotate(10deg);}
}
@-o-keyframes WheelAnimBack {
5%,10% {-webkit-transform:rotate(100deg);}
15%,20% {-webkit-transform:rotate(90deg);}
25%,30% {-webkit-transform:rotate(80deg);}
35%,40% {-webkit-transform:rotate(70deg);}
45%,50% {-webkit-transform:rotate(60deg);}
55%,60% {-webkit-transform:rotate(50deg);}
65%,70% {-webkit-transform:rotate(40deg);}
75%,80% {-webkit-transform:rotate(30deg);}
85%,90% {-webkit-transform:rotate(20deg);}
95%,100%{-webkit-transform:rotate(10deg);}
}
@keyframes WheelAnimBack {
5%,10% {-webkit-transform:rotate(100deg);}
15%,20% {-webkit-transform:rotate(90deg);}
25%,30% {-webkit-transform:rotate(80deg);}
35%,40% {-webkit-transform:rotate(70deg);}
45%,50% {-webkit-transform:rotate(60deg);}
55%,60% {-webkit-transform:rotate(50deg);}
65%,70% {-webkit-transform:rotate(40deg);}
75%,80% {-webkit-transform:rotate(30deg);}
85%,90% {-webkit-transform:rotate(20deg);}
95%,100%{-webkit-transform:rotate(10deg);}
}

/******************/
/***    ABOUT   ***/
/******************/
.zoombk{
    -webkit-animation: zoomimg 7s 0s linear alternate;
    -moz-animation: zoomimg 7s 0s linear alternate;
    -ms-animation: zoomimg 7s 0s linear alternate;
    animation: zoomimg 7s linear alternate;
}

@-webkit-keyframes zoomimg {
0% {background-size: 100%;}
100% {background-size: 150%;}
}
@-moz-keyframes zoomimg {
0% {background-size: 100%;}
100% {background-size: 150%;}
}
@-o-keyframes zoomimg {
0% {background-size: 100%;}
100% {background-size: 150%;}
}
@keyframes zoomimg {
0% {background-size: 100%;}
100% {background-size: 150%;}
}