/* triangle design */
.strategy, .creative , .social_media, .media_plan, .analytics{
    position: relative;
}
.label-wp{
    position: absolute;
    top: 62px;
    left: 27px;
    color: rgb(255, 255, 255);
}
.trianglee{
width: 0px;
    height: 0px;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 112px solid #A1D4F7;
}
.trapezoid {
    border-bottom: 70px solid rgb(255, 0, 0);
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    height: 0px;
    width: 200px;
    margin-top: 36px;
    margin-left: -40px;
}
.trapezoid.one{
border-bottom: 70px solid #70ABF2;

}
.trapezoid.two-x{
    width: 280px;
    margin-left: -80px;
    border-bottom: 70px solid #4285F4;
	
}
.trapezoid.three-x{
    width: 359px;
    margin-left: -120px;
    border-bottom: 70px solid #287CBB;
}
.trapezoid.four-x{
    width: 441px;
    margin-left: -162px;
	border-bottom: 70px solid #03519B;
	
}

.rotated-bar{
    min-width: 25px;
    min-height: 35px;
    width: 126px;
    position: absolute;
    transform: rotate(32deg);
    z-index: -99;
}
.rotated-bar.one{
    background: #7AB4DC none repeat scroll 0% 0%;
}
.rotated-bar.two-x{
    width: 201px;
    transform: rotate(19deg) skew(-11deg);
    margin-left: -37px;
    background: #5996EF none repeat scroll 0% 0%;
	
}
.rotated-bar.three-x{
width: 275px;
    transform: rotate(14deg) skew(-19deg);
    margin-left: -74px;
    background: #4283E2 none repeat scroll 0% 0%;
}
.rotated-bar.four-x{
    width: 351px;
    transform: rotate(11deg) skew(-26deg);
    margin-left: -112px;
    background: #146EB2 none repeat scroll 0% 0%;
}
.label-wp-x{
    position: absolute;
    top: 22px;
    left: 25px;
    color: rgb(255, 255, 255);
}
.label-wp-two-x{
position: absolute;
    top: 24px;
    left: -47px;
    color: rgb(255, 255, 255);
    font-size: 16px;
}
.label-wp-three-x{
    position: absolute;
    top: 20px;
    left: -47px;
    color: rgb(255, 255, 255);
}
.label-wp-four-x{
    position: absolute;
    top: 20px;
    left: 20px;
    color: rgb(255, 255, 255);
}
.firsttext, .firsttext-x, .firsttext-two-x, .firsttext-three-x, .firsttext-four-x{
display: none;
}
.label-wp:hover, .strategy:hover, .creative:hover, .social_media:hover, .media_plan:hover, .analytics:hover, .label-wp-x:hover, .label-wp-two-x:hover, .label-wp-three-x:hover , .label-wp-four-x:hover, .plink  {
color: #A1D4F7;
cursor:pointer
}
.label-wp a:hover, .label-wp-x a:hover, .label-wp-two-x a:hover, .label-wp-three-x a:hover , .label-wp-four-x a:hover  {
color: #A1D4F7;
}
.cross img:hover{
cursor:pointer
}
.trianglee.color{
border-bottom: 112px solid #F9F9F9;
}
.strategy.active .trianglee{
border-bottom: 112px solid #F9F9F9;
}
.trapezoid.one.color, .trapezoid.two-x.color, .trapezoid.three-x.color, .trapezoid.four-x.color{
    border-bottom: 70px solid #F9F9F9;
}
.creative.active .trapezoid.one, .social_media.active .trapezoid.two-x, .media_plan.active .trapezoid.three-x, .analytics.active .trapezoid.four-x{
    border-bottom: 70px solid #F9F9F9;
}
.strategy.active .label-wp, .creative.active .label-wp-x, .social_media.active .label-wp-two-x, .analytics.active .label-wp-four-x, .media_plan.active .label-wp-three-x{
    color: #A1D4F7;
}
.strategy.active .label-wp a, .creative.active .label-wp-x a, .social_media.active .label-wp-two-x a, .analytics.active .label-wp-four-x a, .media_plan.active .label-wp-three-x a{
    color: #A1D4F7;
}
.plansection h2.white{
    width: 95%;
	float: left;
}
.plansection .cross{
    float: right;
    margin-top: 19px;
}
.plansection .cross img{
    width: 20px;
}
.working_process_area.text-center{
    padding: 35px 0 0 0;
min-height: 500px;
}

.firsttext.hide, .firsttext-x.hide, .firsttext-two-x.hide, .firsttext-three-x.hide, .firsttext-four-x.hide{
display: none;
}
.firsttext, .firsttext-x, .firsttext-two-x, .firsttext-three-x, .firsttext-four-x{

}


.firsttext.display, .firsttext-x.display, .firsttext-two-x.display, .firsttext-three-x.display, .firsttext-four-x.display{
display: block!important;
}
@media (max-width: 600px) {
.trianglee.color {
    border-bottom: 65px solid #F9F9F9;
}
.working_process.pull-right{
float: none!important;
}
.trianglee{
width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 65px solid #A1D4F7;
}
.trapezoid.one{
    width: 100%;
    border-left: 0;
    border-right: 0;
    margin-top: 0px;
    margin-left: 0;
}
.trapezoid.two-x{
width: 100%;
    border-left: 0;
    border-right: 0;
    margin-top: 0px;
    margin-left: 0;
}
.trapezoid.three-x{
width: 100%;
    border-left: 0;
    border-right: 0;
    margin-top: 0px;
    margin-left: 0;
}
.trapezoid.four-x{
width: 100%;
    border-left: 0;
    border-right: 0;
    margin-top: 0px;
    margin-left: 0;
}
.label-wp-four-x, .label-wp, .label-wp-x, .label-wp-two-x, .label-wp-three-x{
width: 100%;
top: 18px;
left: 0;
}
.rotated-bar{
display: none!important;
}
.working_process_area.text-center {
    min-height: 415px;
}
.trianglee,{
    border-bottom: 65px solid #a1d4f7;
	}
	.strategy.active .trianglee{
	border-bottom: 65px solid #f9f9f9;
	}

.mobile-pi{
    position: absolute;
    margin-top: 32px;
    z-index: 999;
    background: #fff;
    margin-top: 0;
}
.mobile-pi-x{
    position: relative;
}
.mobile-pi h2.white{
width: 90%;
font-size: 20px;
}
.firsttext-x, .firsttext-two-x, .firsttext-four-x, .firsttext-three-x, .firsttext-four-x{
margin-top:0;
font-size: 20px;
}

}