#wrapper{
    position: relative;
    display: block;
}

#wrapper:before{
    position: fixed;
    top: 0;
    right: 0;
    width: 54%;
    height: 600px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAOv3374T3UBBgYGAN+GEuQvG3S5AAAAAElFTkSuQmCC);
    content: "";
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
}
#wrapper.full:before{width: 100%;}
#wrapper > *{position: relative;}
#body{background-color: transparent;}


.fix-container{margin:0 auto;max-width:1420px;width:100%;padding:0 10px;position:relative;}
#header .fix-container{position: static;} 
.themeBtn{background:#ff4b00;border-radius:3px;color:#fff;display:inline-block;font-size:24px;padding:12px 26px;font-weight: 300;position: relative;z-index:9}
.themeBtn:hover{background:#fff;color:#ff3957;}
.pull_left{float:left}
.pull_rght{float:right}
.greenTxt{color:#89c53f}
.grayBg {background-color: #f2f2f2;}
.comn-space{padding:50px 0; }
.blueBg{background-color:#001c40}

.themeBtn.blue:hover{color:#fff;background-color:#ff4b00;}

/*Header css*/

.header{background-color:#001c40}
.header-graphic{position:relative}
.clip-masking svg{opacity:.5;margin:0 auto;width:100%;height:702px;display:block;}
.hand_icon svg{display:inline-block;vertical-align:middle;width:20px;height:20px}
.hand_icon svg path{fill:#fff}
.themeBtn:hover .hand_icon svg path{fill:#ff4b00;transition:all .5s ease-in-out 0;-webkit-transition:all .5s ease-in-out 0}
.clip-masking{position:relative}
.logo{display:inline-block}
.header-text > span{color:#fff;font-size:28px;font-weight:300;padding-bottom:15px;display:block}
.header-text .btn{padding:10px 0 0;margin:0 auto;display:table}
.header-text{left:50%;position:absolute;top:50%;text-align:center;width:100%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);max-width:800px}
.header-text h1{color:#fff;font-family:Montserrat;font-size:48px;padding-bottom:10px}
.clip-masking::after{background-color:#001c40;content:"";height:100%;left:0;opacity:.75;position:absolute;top:0;width:100%}
.clip-text{text-align:center}
.clip_img{display:block;background-repeat:no-repeat;background-size:70% auto;background-position:center center}
.clip_img path{fill:#001c40}
.clip_img{background:url(../../img2/header-img.jpg);-webkit-animation:20s linear 0s normal none infinite running animate_background;animation:20s linear 0s normal none infinite running animate_background}
.downwrd-icon svg {
    display: block;
    margin:10px auto 0;
    width:15px;
    height:15px;
}

.clip-masking::before {
    background-color: #001c40;
    content: "";
    height: 100%;
    position: absolute;
    right: -1px;
    width: 2px;
    z-index: 9;
}

@-webkit-keyframes animate_background { 
  
	0%{
		 background-position: 0 center;
		}
	25%{
		 background-position:-100px center;
		}
	50%{
		 background-position:-150px center;
		}
	75%{
		 background-position:-100px center;
		}
	100%{
		background-position: 0 center;
		}
}
@keyframes animate_background { 
  0%{
		 background-position: 0 center;
		}
	25%{
		 background-position:-100px center;
		}
	50%{
		 background-position:-150px center;
		}
	75%{
		 background-position:-100px center;
		}
	100%{
		background-position: 0 center;
		}
}

.descriptn{display: none;}


.crcl_btn {background-color: #ff4b00;border-radius: 50%;color: #ffffff;height: 80px;position: absolute;text-align: center;text-transform: uppercase;width: 80px;bottom:-40px;left:0;
	right:0;margin:0 auto;box-shadow:8px 10px 20px rgba(0, 0, 0, 0.2);-webkit-box-shadow:8px 10px 20px rgba(0, 0, 0, 0.2);cursor:pointer;	transition: all 0.5s ease-in-out 0s;-webkit-transition: all 0.5s ease-in-out 0s;z-index:9; transform: scale(1); -webkit-transform: scale(1);opacity:1}
.crcl_btn:hover{background-color: #0c54b3;}
.crcl_btn span{font-size: 14px;padding:22px 0 0 0;display:block;}

.crcl_btn.scroll {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
}


.downwrd-icon svg polygon {
    fill: #ffffff;
}
.slideItem h3{	
	font-size:48px;
	display:inline-block;
	color:#fff;
	font-family:Montserrat;
    white-space: nowrap;
    overflow: hidden;
	width:100%;
    animation: type 4s steps(60, end); 
}

.slideItem h3:nth-child(2){
  animation: type2 8s steps(60, end);
}


@keyframes type{ 
  from { width:0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width:100%; } 
} 



/*Header css*/


.two-colm{display:table;width:100%;}
.two-colm .col {display: table-cell;width: 50%;vertical-align:middle;}
.qt_icon {padding-bottom: 45px;}

.testimonial {max-width: 300px;}
.testimonial p {color: #ffffff;font-size: 18px;padding-bottom:15px;}
.listingBox .box {background-color: rgba(15, 39, 71, 0.5);height: 230px;width: 328px;position:relative;margin:10px;display: inline-block;}
.mid_box {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
.authr h2 {color: #29cc57;font-family: Montserrat;font-size: 29px;font-weight: 700;}
.brand_name {color: #ffffff;font-size: 24px;font-weight: 300;font-weight:300;}
.listingBox .cell{display:table-cell;vertical-align: middle;width:50%;}
.authr {padding: 20px 0 0;}


.infoBlock h2 {color: #041c3b;font-family: Montserrat;font-size: 56px;font-weight: 700;}
.infoBlock h3 {color: #ff4b00;font-size: 24px;font-weight: 300;}
.cta .grid {display: table-cell;padding: 0 10px;vertical-align: middle;width: 60%;}
.cta {display: table;margin:5px auto 25px;max-width: 940px;width: 100%;}
.cta .grid:last-child {text-align: right;width:40%;}
.themeBtn.blue {background-color: #0c54b3;font-weight: 300;}
.smallTxt {display: inline-block;font-size: 14px;padding: 0 0 5px 6px;vertical-align: middle;}
.align_center{text-align:center;}
.effectiveness{position:relative;padding:10px 0;}








/*Work*/
.work-process{margin:0 0 0;position:relative;}


svg .cls-1 {fill: #fff;}
svg .cls-2 {fill: #ced2d9;}
.midBox svg{width:75px;height:75px;}
.bublbg{}
.titleBlock{font-size:15px;color:#96999f;text-transform:uppercase;}
.launch-icon .cls-2 {stroke: #ced2d9;stroke-linejoin: round;stroke-width: 1px;} 
.beginbtn {padding: 20px 0 0;}
.crcl_list {text-align: center;margin:0 -44px;position:relative;-webkit-transition: 0.5s all ease-in-out;transition: 0.5s all ease-in-out;/*background-image:url(../images/bubl.png);background-repeat: no-repeat; background-position: 40px 120px;*/ padding: 0 0 95px;}

.crcle {background-color: #f2f4f7;border-radius: 50%;display: inline-block;height: 156px;text-align: center;vertical-align: middle; width: 156px;position:relative;-webkit-transition: 0.5s all ease-in-out;
	transition: 0.5s all ease-in-out;margin:0 44px;transform:scale(1);-webkit-transform:scale(1);}

.crcle a {display: block;height: 100%;width: 100%;}


.crcle::after {
	background: #f2f4f7;
	border-radius: 50%;
	content: "";
	height: 100%;
	padding: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: -1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.midBox{left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);z-index:9;}
.crcle .textBlock{left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);z-index:99; height:0;
	width:0;-webkit-transition: 0.5s all ease-in-out;transition: 0.5s all ease-in-out;border-radius: 50%;opacity:0;padding:20px;}
.crcle .textBlock p{color: #ffffff;display: none;font-size: 15px;line-height:30px;}
/*.midAlign {
    display: table-cell;
    height: 260px;
    vertical-align: middle;
}*/
.midAlign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
/*.crcle.search-i::after {height: 172px;width: 172px;}
.crcle.strategize-i::after {height:208px;width:208px;}
.crcle.design-i::after {height: 170px;width: 170px;}
.crcle.produce-i::after {height: 270px;width:270px;}
.crcle.evaluate-i::after {height: 184px;width: 184px;}
.crcle.launch-i::after {height: 156px;width: 156px;}*/





.crcle:after{animation :11s linear 1s normal none infinite zoominout}
.crcle.strategize-i::after {animation:11s linear 3s normal none infinite running zoominout;}
.crcle.design-i::after {animation:11s linear 4s normal none infinite running zoominout;}
.crcle.produce-i::after {animation:11s linear 5s normal none infinite running zoominout;}
.crcle.evaluate-i::after {animation:11s linear 3s normal none infinite running zoominout;}
.crcle.launch-i::after {animation:11s linear 2s normal none infinite running zoominout;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .crcle::after {left:0;top: 0;}
}



@keyframes zoominout{
	0%{
		transform:translate(-50%, -50%) scale(1);
		-webkit-transform:translate(-50%, -50%) scale(1);
		}
	25%{
		transform:translate(-50%, -50%) scale(1.4);
		-webkit-transform:translate(-50%, -50%) scale(1.4);
		}
	50%{
		transform:translate(-50%, -50%) scale(1.8);
		-webkit-transform:translate(-50%, -50%) scale(1.8);
		}
	75%{
		transform:translate(-50%, -50%) scale(1.4);
		-webkit-transform:translate(-50%, -50%) scale(1.4);
		}
	100%{
		transform:translate(-50%, -50%) scale(1);
		-webkit-transform:translate(-50%, -50%) scale(1);
		}
}
@-webkit-keyframes zoominout{
	0%{
		transform:translate(-50%, -50%) scale(1);
		-webkit-transform:translate(-50%, -50%) scale(1);
		}
	25%{
		transform:translate(-50%, -50%) scale(1.4);
		-webkit-transform:translate(-50%, -50%) scale(1.4);
		}
	50%{
		transform:translate(-50%, -50%) scale(1.8);
		-webkit-transform:translate(-50%, -50%) scale(1.8);
		}
	75%{
		transform:translate(-50%, -50%) scale(1.4);
		-webkit-transform:translate(-50%, -50%) scale(1.4);
		}
	100%{
		transform:translate(-50%, -50%) scale(1);
		-webkit-transform:translate(-50%, -50%) scale(1);
		}
}


/*Hover effect*/

/*.crcle:hover svg .cls-1 {fill: #ff4b00;}
.crcle:hover svg .cls-2 {fill: #ffffff;}
.crcle:hover .titleBlock {color: #ffffff;}*/
.crcle:hover::after {background-color: #ebedf0;z-index: 2;}





/*straight css */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
 .straight .crcle::after {left:50%;top:50%;}
}

.straight .crcle:hover{background-color: #0c54b3;z-index:2;}
.straight .crcle:hover::after {background-color: #efefef;z-index: 2;}
.straight .crcle{margin:0 10px !important;animation:none;}/*
.straight .crcle.strategize-i::after {height: 204px;width: 204px;}
.straight .crcle.produce-i::after {height: 230px;width: 230px;}
.straight .crcle.evaluate-i::after {height: 172px;width: 172px;}
.straight .crcle.launch-i::after {height: 214px;width: 214px;}*/

.straight .crcle:hover .textBlock p{display:block;}

.crcl_list.straight{padding-top:118px;margin-top:100px;background:none;}
.straight .crcle:hover .textBlock .titleBlock {color: #ffffff;font-size: 25px;font-weight: 700;text-transform: capitalize;}
.straight .crcle:hover .midBox svg {display: none;}

/*.straight .crcle:hover .textBlock {left: 50%;position: relative;top: 50%;}*/
.straight .crcle:hover .textBlock {
	background-color: #0c54b3;    
	position: absolute;
	width:300px;
	height:300px;
	opacity: 1;
}

.straight .crcle.strategize-i::before,.straight .crcle.evaluate-i::before{position:absolute;content:"";height:120px;width:3px;bottom:100%;background-color:#f2f4f7;margin:0 0 0 -4px;left:50%;}
.straight .crcle.strategize-i::before {
    margin: 0 0 0 2px;
}
.crcl_list.straight::before{background-color:#f2f4f7;bottom:100%;content:"";height:3px;left:0;margin:0 auto;position:absolute;right:0;width:36%;display:block;}
.crcl_list.straight::after{border:16px solid transparent;border-right:25px solid #f2f4f7;content:"";left:50%;position:absolute;top:-18px;margin:0 0 0 -25px;}



.straight .crcle::after {
		animation: none !important;
		-webkit-animation: none !important;
	}


/**.straight .crcle a::before {
    background-color: #f2f4f7;
    content: "";
    height: 3px;
    left: 100%;
    position: absolute;
    top: 50%;
    width:25px;
}
**/

.straight .crcle:last-child a::before {
   display:none;
}

/*straight css */



/*#peternBg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAOv3374T3UBBgYGAN+GEuQvG3S5AAAAAElFTkSuQmCC) repeat;position:fixed;}*/





/*humanize*/


.humanize{ margin: 0 0 0;
	position:relative;	
	overflow:hidden;}

.humanize:before{content:"";background-color:#fff;height: 100%;width:46%;position: absolute;top:0;}



.ux-type li {color: #041c3b;font-size: 27px;padding:15px 0;position: relative;text-transform: uppercase;}
.ux-type li:after{position: absolute;content:"";right:100%;top:50%;height: 4px;width:100%;background-color:#f0f2f5;}
.ux-type li span{display: inline-block;left: 0;position: relative;top: 50%;vertical-align: middle;margin-right:30px;}
.ux-type li span::before {background-color: #f0f2f5;content: "";height: 4px;position: absolute;right: 50%;top: 50%;width: 50%;}


.crle_path {height: 72px;width: 72px;}
.crle_path svg path{fill:#f0f2f5;}
.square{height: 72px;width: 72px;}
.square svg path{ fill: #fff;stroke: #f0f2f5;stroke-width:75;}

/*.hexagon { width: 100px; height: 55px; background: red; position: relative; }
.hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } .hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }}*/

.ux-type li span.hexagon {height: 82px;width: 82px;z-index: 9;margin-left:-6px;}
.hexagon path {fill: #f0f2f5;stroke: #f0f2f5;stroke-width:6;}
.hexagon svg {transform: rotate(90deg);-webkit-transform: rotate(90deg);}

.ux-type {margin: 60px 0 0;}







/*Why fatbit*/

.its-design > p{color:#041c3b;font-size:17px;margin-bottom:20px;line-height:28px}
.its-design{max-width:320px;margin:30px 0 0;padding:30px 0 0;position:relative}
.its-design::before{background-color:#f0f2f5;border-radius:50%;content:"";height:24px;left:65px;position:absolute;top:-12px;width:24px}
.its-design::after{background-color:#f0f2f5;content:"";height:4px;position:absolute;right:75%;right:calc(100% - 65px);top:-2px;width:100%}
.its-design .themeBtn.blue{display:block;text-align:center}
.text-block p{color:#041c3b;font-size:15px;line-height:30px;max-width:320px}
.fr_cell > p{float:right}
.why-fatbit{margin:0;position:relative;overflow:hidden}

/*.ptrnBg{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAOv3374T3UBBgYGAN+GEuQvG3S5AAAAAElFTkSuQmCC) repeat;}*/

.why-fatbit:before{content:"";background-color:#fff;height: 100%;width:46%;position: absolute;top:0;}
.text-block{padding:20px;position:relative}
/**
 * .text-block::after{background-image:url(../../img2/retina/graphic-bg.svg);background-position:center top;background-repeat:no-repeat;content:"";height:100%;left:0;position:absolute;top:0;width:100%}
 * .text-block::before{position:absolute;content:"";background-image:url(../../img2/hex.png);background-repeat:no-repeat;height:260px;position:absolute;top:45%;width:260px}
 */
.text_row{position:relative;z-index:9}

/*
*/








/*What we do section css*/

.architecture-icon .cls-1 {fill: #fff;}
.architecture-icon .cls-2 {fill: #992e00;}
.layout-icon .cls-1 {fill: #fff;}
.layout-icon .cls-2 {fill: #073066;}
.visual-icon .cls-1 {fill: #fff;}
.visual-icon .cls-2 {fill: #1c8c3c;}
.interaction-icon .cls-1 {fill: #fff;stroke: #fff;}
.interaction-icon .cls-2 { fill: #997800;stroke: #b28c00;}
.interaction-icon .cls-1,.interaction-icon .cls-2  {stroke-linejoin: round;stroke-width: 1px;fill-rule: evenodd;}


.svgIcon svg{width:100px;height:100px}
.svgIcon svg.architecture-icon{width:75px}
.svgIcon svg.layout-icon{width:75px}
.svgIcon svg.interaction-icon{height:80px}
.infoBox span{display:inline-block;padding:0px;vertical-align:middle}
.infoBox{padding:10px;border-radius:5px;text-align:center;height:120px;line-height:98px}
.orangeBg{background-color:#ff4b00}
.blue-Bg{background-color:#0c54b3}
.greenBg{background-color:#29cc57}
.ylowBg{background-color:#ffc800}
.boxTitle{color:#fff;font-size:18px;text-transform:uppercase}
.box-list{display:flex;display:-webkit-flex;flex-direction:row;-webkit-flex-direction:row;justify-content:center;-webkit-justify-content:center;margin:60px 0;padding:0;position:relative;}

.box{flex:1;-webkit-flex:1;padding:0 15px;}
.box-list .box:first-child{padding-left:0;}
.box-list .box:last-child{padding-right:0;}


.ux_box_slider .box{animation:10s linear 1s normal none infinite}

/*
@keyframes hr-overlay{
	from{
		animation:10s linear 1s normal none infinite hr-overlay;
		}
	to{
		animation:10s linear 1s normal none infinite hr-overlay;
		}
	
}
*/




/*Slider effect*/
.workSlider {
    float: right;
	margin:50px 0;
    width:82%;
}
.workSlider .infoBox {
    display: inline-block;
	width:140px;
}
.workSlider .infoBox .boxTitle{display: none;}
.workSlider .textBlock {
	vertical-align:middle;
	padding:0 100px 0 0px;
}
.workSlider .box{flex: none;padding:0;}

.text-Block > p {
    color: #041c3b;
    font-size: 15px;
	padding-top:10px;
    line-height: 30px;
}
.workSlider .slick-dots button {
    border: 4px solid #dcdfe5;
    border-radius: 50%;
	background-color:#fff;
    font-size: 0;
    height: 25px;
    width: 25px;
	padding:0;
	display: block;
	outline:none;
	margin:5px 0;
	cursor:pointer;
}
.workSlider .slick-dots .slick-active button{border-color:#041c3b;background-color:#29cc57;}

.workSlider .slide_text:focus,.workSlider .slick-dots button:focus{outline:none!important}
.workSlider .slick-dots {position: absolute;right: 0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}


.ux-work {
    background-color: #f2f4f7;
    margin: 50px 0 0;
    padding:90px 0;
	position:relative;
}
.ux-work:after{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAOv3374T3UBBgYGAN+GEuQvG3S5AAAAAElFTkSuQmCC) repeat;position:absolute;height:25px;top:100%;left:0;content:"";width:100%;}
.ux-work:before{background:#e4e7ed;position:absolute;height:30px;top:0%;left:0;content:"";width:80%;}

/*Slide behavr*/

.box-list.ux_box_slider{display:inline-block;}
.ux_box_slider .box {
    left: 0;
    padding: 0;
    position: absolute;
    top: 0;
	z-index:5;
	width:130px;
}
.ux_box_slider .infoBox span.boxTitle{display:none;}
.ux_box_slider .box:nth-child(2) {
    left: 10px;
    top: 10px;
	z-index:4;
}
.ux_box_slider .box:nth-child(3) {
    left: 20px;
    top: 20px;
	z-index:3;
}
.ux_box_slider .box:nth-child(4) {
    left: 30px;
    top: 30px;
	z-index:2;
}






/*Footer css*/

.main_footer{padding:40px 0}
.footer_cell{display:table-cell;padding:20px;vertical-align:middle;text-align:center}
.count_num{color:#fff;display:block;font-family:Montserrat;font-size:88px;font-weight:700;line-height:74px}
.count_box > h2{color:#fff;font-family:lato;font-size:22px}
.count_box{background-image:url(../../img2/retina/crown-bg.svg);background-position:center center;background-repeat:no-repeat;background-size:100% auto;max-width:300px;min-width:300px;padding:30px 70px}
.main_footer{display:table;margin:0 auto;text-align:center}
.orange .count_num{color:#ff4b00}
.green .count_num{color:#29cc57}
.ylow .count_num{color:#ffc800}
.main_footer .orange{background-color: transparent;}



/***********Mani****************/
.ux-prac{
    position: relative;
    margin-top: 0;
    padding: 30px;
    min-height:420px;
    background-color: transparent;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    overflow: hidden;
}
.ux-prac:before{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 30px;
    background-color: #e4e7ed;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
    content: " ";
}
.ux-boxs-list{
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    display: block;
}
.ux-box{
    position: absolute;
    top: 0;
    min-width: 25%;
    padding: 0 15px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
	height:320px;
}
.ux-box:nth-child(1){left: 0; z-index: 4;}
.ux-box:nth-child(2){left: 25%; z-index: 3;}
.ux-box:nth-child(3){left: 50%; z-index: 2;}
.ux-box:nth-child(4){left: 75%; z-index: 1;}
.ux-box-icon{
    text-align: center;
    padding: 20px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	height:100%;
}

.ux-box-icon.orange-bg{background-color: #ff4b00;}
.ux-box-icon.blue-bg{background-color: #0c54b3;}
.ux-box-icon.green-bg{background-color: #29cc57;}
.ux-box-icon.yellow-bg{background-color: #ffc800;}
.ux-box-icon .ux-box-svg,
.ux-box-icon .ux-box-title{
    display:block;
    vertical-align: middle;
}
.ux-box-icon .ux-box-svg svg{
    display: inline-block;
    width:160px;
}
.ux-box-icon .ux-box-title {
    color: #ffffff;
    font-size: 24px;
    margin:15px auto 0;
}
.ux-box-info h2{
    color: #041c3b;
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}
.ux-box-info h3{
    color: #ff4b00;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 10px;
}
.ux-box-info{display: none;}
.ux-box-icon:target + .ux-box-info{display: block;}

/**Next State***/
.ux-prac-animate-1 .ux-prac{
    margin-top: 50px;
    background-color: #f2f4f7;
}
.ux-prac-animate-1 .ux-prac:before{
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.ux-prac-animate-1{}
.ux-prac-animate-1 .ux-box:nth-child(1),
.ux-prac-animate-1 .ux-box:nth-child(2),
.ux-prac-animate-1 .ux-box:nth-child(3),
.ux-prac-animate-1 .ux-box:nth-child(4){
    top: 0;
    left: 0;
    min-width: 0; 
    padding: 0;
}
.ux-prac-animate-1 .ux-box-icon .ux-box-title{display: none;}

.ux-prac-animate-2{}
.ux-prac-animate-2 .ux-box:nth-child(1){top: 0; left: 0;}
.ux-prac-animate-2 .ux-box:nth-child(2){top: 10px; left: 10px;}
.ux-prac-animate-2 .ux-box:nth-child(3){top: 20px; left: 20px;}
.ux-prac-animate-2 .ux-box:nth-child(4){top: 30px; left: 30px;}

.ux-prac .ux-prac-slider{
    position: absolute;
    top: 50px; 
    left: 0;
    right: 0;
    margin: 0;
    display: block!important;	
    padding-left:500px;
    padding-right: 50px;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.ux-prac-slider .slick-dots{
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0 , -50%);
    transform: translate(0 , -50%);
    right: 0;
	z-index:9;
}
.ux-prac-slider .slick-dots button[type="button"]{
    background-color: #ffffff;
    width: 25px;
    height: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    border: 4px solid #041c3b;
    font-size: 0;
    line-height:0;
    text-indent: -999;
    cursor: pointer;
}
.ux-prac-slider .slick-dots li.slick-active:nth-child(1) button[type="button"]{background-color:#ff4b00;}
.ux-prac-slider .slick-dots li.slick-active:nth-child(2) button[type="button"]{background-color: #0c54b3;}
.ux-prac-slider .slick-dots li.slick-active:nth-child(3) button[type="button"]{background-color: #29cc57;}
.ux-prac-slider .slick-dots li.slick-active:nth-child(4) button[type="button"]{background-color: #ffc800;}
.ux-prac-animate-1 .ux-prac-slider{opacity: 1;}






.ux-prac-animate-1 .ux-box{width:400px;height:400px;}
.ux-prac-animate-1 .ux-prac{min-height:580px;}

.ux-prac-animate-1 .ux-prac-slider{min-height:300px;}
.ux-prac-animate-1 .ux-box-icon .ux-box-svg{position:relative;top:50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}


.ux-prac-animate-1  .ux-box-icon .ux-box-svg svg {
    width: 240px;
}

.slide_text .text-Block {
    /**background-color: #f2f4f7;**/
    display: table-cell;
    height:440px !important;
    max-width: 720px;
    vertical-align: middle;
    width: 100%;
}
.slide_text .text-Block > p{font-size:18px;}

@media(max-width:1200px){
    .ux-boxs-list,
    .ux-boxs-list .ux-box {
    	position: relative;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	display: inline-block;
    	width: auto;
    	text-align: center;
    }
    
    .ux-boxs-list .ux-box {
    	margin-bottom: 30px;
    	display: inline-block;
    	height: auto;
    }
    
    .ux-box-icon {
    	display: inline-block;
    	min-width: 270px;
    	margin-bottom: 20px;
    	height: auto;
    }
    
    .ux-prac-animate-1 .ux-box-icon .ux-box-title {
    	display: block;
		margin:0;
    }
    
    .ux-box-icon .ux-box-svg,
    .ux-box-icon .ux-box-title {
    	display: block;
    	vertical-align: top;
    }
    
    .ux-prac-animate-1 .ux-box-icon .ux-box-svg svg {
    	width: 110px;
    }
    
    .ux-box-info {
    	display: block;
    }
    
    .ux-prac-slider {
    	display: none;
    }
    
    .ux-prac-animate-1 .ux-box {
    	width: auto;
    	height: auto;
    }
    
    .ux-prac .ux-prac-slider {
    	display: none !important;
    }
    
    .ux-prac-animate-1 .ux-box-icon .ux-box-svg {
    	transform: none;
    	-webkit-transform: none;
    	left: 0;
    	top: 0;
    }
	.ux-prac-animate-1 .ux-prac::before{display:none;}
	.crcle .textBlock {
		border-radius: 0;
		
		height: auto;
		left: 0;
		opacity: 1;
		padding: 20px;
		padding-top:0;
		position: relative;
		top: 0;
		transform: none;
		-webkit-transform: none;
		width: auto;
		background-color: #f2f4f7;
		min-height:140px;
	}
	
	.midAlign .titleBlock {
		display: none;
	}
	
	.midAlign {
		height: auto;
        transform:none;
        -webkit-transform:none;
        top:0;
	}
	
	.crcle .textBlock p {
    color: #4a4949;
    display: block;
    font-size: 15px;
		line-height:normal;
}
.clip-masking svg{height:100%;}
}








@media screen and (max-width: 1200px) {
	.crcl_list {
		padding: 0;
	}
	.crcle {
		margin: 0px !important;
		width: 33.33%;
		height: auto;
		border-radius: 0;
		float: left;
		background-color: #fff;
	}
	.crcl_list.straight::before,
	.crcl_list.straight::after {
		display: none;
	}
	.straight .crcle.strategize-i::before,
	.straight .crcle.evaluate-i::before {
		display: none;
	}
	.crcle::after {
		display: none;
	}
	.infoBox {
		height: auto;
		display: inline-block;
		line-height: inherit;
		width: 30%;
		vertical-align: top;
	}
	.infoBox span {
		display: block;
		min-width: 160px;
	}
	.infoBox span.svgIcon {
		min-height: 100px;
	}
	.midBox,
	.straight .crcle:hover .textBlock {
		left: 0;
		position: relative;
		top: 0;
		transform: none;
		-webkit-transform: none;
	}
	.crcl_list {
		padding: 0;
		margin: 20px 0 0;
	}
	.midBox p {
		display: block;
		color: #222;
	}
	.titleBlock {
		color: #000000;
	}
	.crcle a {
		padding: 15px;
	}
	.midBox {
		padding: 20px;
		background-color: #f2f4f7;
	}
	.two-colm {
		padding: 0 20px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 990px) {
	.why_fatbit {
		padding: 20px;
	}
	.comn-space {
		padding: 30px 0;
	}
	.cta {
		padding: 0 10px;
		margin: 10px 0;
	}
	.crcle {
		border-radius: 0;
		height: auto;
		margin: 0 !important;
		padding: 0;
		width: 50%;
		float: left;
		background-color: #fff;
	}
	.straight .crcle:hover .midBox {
		background-color: #f2f4f7;
	}
	.straight .crcle:hover .midBox {
		background-color: #0c54b3;
		border-radius: 0;
		padding: 20px;
	}
	.crcle::after {
		border-radius: 0;
	}
	.crcle:hover::after {
		background-color: transparent;
		border-radius: 0;
	}
	.straight .crcle:hover .midBox {
		width: auto;
		height: auto;
	}
	.midBox p {
		display: block;
		color: #222;
	}
	.titleBlock {
		color: #000000;
	}
	.count_box {
		max-width: 203px;
		min-width: inherit;
		padding: 30px 50px;
	}
	.count_box > h2 {
		font-size: 16px;
	}
	.count_num {
		font-size: 65px;
		line-height: 64px;
	}
	.two-colm .col {
		display: block;
		width: auto;
	}
	.testimonial {
		max-width: inherit;
		padding: 20px;
	}
	.ux-type {
		margin: 10px 0 0;
	}
	.humanize::before {
		width: 100%;
	}
	.main_footer {
		padding: 20px 0;
	}
	.infoBox {
		height: auto;
		display: inline-block;
		line-height: inherit;
		width: 30%;
		vertical-align: top;
	}
	.infoBox span {
		display: block;
		min-width: 160px;
	}
	.infoBox span.svgIcon {
		min-height: 100px;
	}
	.descriptn {
		display: inline-block;
		padding: 0 0 0 20px;
		text-align: left;
		width: 69%;
	}
	.box-list {
		display: block;
	}
	.box-list .box {
		padding: 20px !important;
		text-align: center;
		border-bottom: 1px solid #dddddd;
	}
	.text-Block > p {
		padding-top: 0;
	}
		.ux-box-icon .ux-box-svg svg {
		width: 80px;
	}
	.ux-box-icon .ux-box-title {
		margin: 0;
	}
	.ux-box-icon {
    display: inline-block;
    min-width: 270px;
		height: auto;
}
}

@media only screen and (min-width: 991px) and (max-width: 1050px) {
	.two-colm {
		padding: 0 20px;
	}
    .count_box{max-width: 275px;min-width: 275px;}
}
/*@media only screen and (min-width:1025px) and (max-width:1200px) {
	.infoBlock h2 {
    font-size: 26px;
}
}*/
@media only screen and (min-width: 1201px) and (max-width: 1500px) {
	.crcle {
		margin: 0 20px;
	}
	.crcl_list.straight::before,
	.crcl_list.straight::after,
	.straight .crcle.strategize-i::before,
	.straight .crcle.evaluate-i::before {
		display: none;
	}
	.crcl_list.straight {
		margin: 0;
	}
	.two-colm {
		padding: 0 20px;
	}
	.infoBlock h2 {
    font-size:52px;
}
.ux-box-icon .ux-box-title {
    max-width: 125px;
}
	
}
@media screen and (max-width: 1200px) {
	.crcl_list {
		padding: 0;
	}
	.crcle {
		margin: 0px !important;
		width: 33.33%;
		height: auto;
		border-radius: 0;
		float: left;
		background-color: #fff;
	}
	.crcl_list.straight::before,
	.crcl_list.straight::after {
		display: none;
	}
	.straight .crcle.strategize-i::before,
	.straight .crcle.evaluate-i::before {
		display: none;
	}
	.crcle::after {
		display: none;
	}
	.infoBox {
		height: auto;
		display: inline-block;
		line-height: inherit;
		width: 30%;
		vertical-align: top;
	}
	.infoBox span {
		display: block;
		min-width: 160px;
	}
	.infoBox span.svgIcon {
		min-height: 100px;
	}
	.midBox,
	.straight .crcle:hover .textBlock {
		left: 0;
		position: relative;
		top: 0;
		transform: none;
		-webkit-transform: none;
	}
	.crcl_list {
		padding: 0;
		margin: 20px 0 0;
	}
	.midBox p {
		display: block;
		color: #222;
	}
	.titleBlock {
		color: #000000;
	}
	.crcle a {
		padding: 15px;
	}
	.midBox {
		padding: 20px;
		background-color: #f2f4f7;
	}
	.two-colm {
		padding: 0 20px;
	}
}

@media screen and (max-width: 767px) {
	.clip-masking {
		display: none;
	}
	.crcl_list.straight::before,
	.crcl_list.straight::after {
		display: none;
	}
	.straight .crcle.strategize-i::before,
	.straight .crcle.evaluate-i::before {
		display: none;
	}
	.crcle {
		display: block;
		height: auto;
		width: auto;
		border-radius: 0;
		float: none;
	}
	.header-text {
		left: 0;
		top: 0;
		transform: none;
		-webkit-transform: none;
		position: relative;
		padding: 30px 0;
	}
	.infoBlock {
		text-align: center;
	}
	.header-text h1 {
		font-size: 18px;
	}
	.header-text > span {
		font-size: 16px;
	}
	.crcl_btn {
		display: none;
	}
	.two-colm .col {
		display: block;
		width: auto;
	}
	.testimonial {
		max-width: inherit;
		text-align: center;
	}
	.ux-type {
		margin: 10px 0 0;
		text-align: center;
	}
	.ux-type li span {
		display: none;
	}
	.humanize::before {
		width: 100%;
	}
	.ux-type li {
		font-size: 20px;
		padding: 5px 0;
	}
	.fr_cell > p {
		float: none;
	}
	.text_row {
		padding: 10px 0;
	}
	.text-block p {
		max-width: inherit;
	}
	.infoBlock h2 {
		font-size: 28px;
	}
	.infoBlock h3 {
		font-size: 18px;
	}
	.text-block {
		text-align: center;
		padding: 10px;
	}
	.cta .grid {
		display: block;
		padding: 10px 0;
		text-align: center;
		width: auto;
	}
	.cta .grid:last-child {
		text-align: center;
		width: auto;
	}
	.comn-space {
		padding: 20px 0;
	}
	.cta {
		margin: 0 auto;
	}
	.its-design {
		margin: 30px auto;
		text-align: center;
	}
	.qt_icon {
		padding-bottom: 10px;
		display: inline-block;
	}
	.listingBox .cell {
		display: block;
		width: auto;
		text-align: center;
	}
	.listingBox .box {
		width: 270px;
	}
	.footer_cell {
		display: block
	}
	.count_box {
		min-width: inherit;
        max-width:260px;
	}
    .count_num{font-size: 70px;}
	.main_footer {
		padding: 10px 0;
	}
	.authr {
		padding: 10px 0 20px;
	}
	.clip-masking::after {
		opacity: 0;
	}
	.crcle::after {
		animation: none !important;
		-webkit-animation: none !important;
	}
	.midBox {
		left: 0;
		position: relative;
		top: 0;
		transform: none;
		-webkit-transform: none;
		padding: 20px;
	}
	.crcle::after {
		border-radius: 0;
	}
	.midBox p {
		color: #222222;
		line-height: normal;
		display: block;
	}
	.titleBlock {
		color: #000000;
		font-weight: 600;
	}
	.box-list {
		display: block;
		margin: 0;
	}
	.box-list .box {
		padding: 0 0 10px;
	}
	.infoBox {
		height: auto;
		display: inline-block;
		line-height: inherit;
	}
	.infoBox span {
		display: block;
		min-width: 160px;
	}
	.add-work .workSlider {
		display: block;
	}
	.two-colm {
		padding: 0;
	}
	.descriptn {
		display: block;
		padding: 10px 0 0 0;
	}
	.box-list {
		display: block;
	}
	.box-list .box {
		padding: 20px !important;
		text-align: center;
		border-bottom: 1px solid #dddddd;
	}
	.crcle:hover::after {
		background-color: #f2f4f7;
	}
	.ux-prac {
		padding: 20px 0 0;
	}
	.ux-box-icon .ux-box-svg svg {
		width: 80px;
	}
	.ux-box-icon .ux-box-title {
		margin: 0;
	}
	.ux-box-icon {
		height: auto;
	}
	.crcle .textBlock{min-height:inherit;}
}




@media only screen and (min-width: 768px) and (max-width: 990px) {
	.why_fatbit {
		padding: 20px;
	}
	.comn-space {
		padding: 30px 0;
	}
	.cta {
		padding: 0 10px;
		margin: 10px 0;
	}
	.crcle {
		border-radius: 0;
		height: auto;
		margin: 0 !important;
		padding: 0;
		width: 50%;
		float: left;
		background-color: #fff;
	}
	.straight .crcle:hover .midBox {
		background-color: #f2f4f7;
	}
	.straight .crcle:hover .midBox {
		background-color: #0c54b3;
		border-radius: 0;
		padding: 20px;
	}
	.crcle::after {
		border-radius: 0;
	}
	.crcle:hover::after {
		background-color: transparent;
		border-radius: 0;
	}
	.straight .crcle:hover .midBox {
		width: auto;
		height: auto;
	}
	.midBox p {
		display: block;
		color: #222;
	}
	.titleBlock {
		color: #000000;
	}
	.count_box {
		max-width: 203px;
		min-width: inherit;
		padding: 30px 50px;
	}
	.count_box > h2 {
		font-size: 16px;
	}
	.count_num {
		font-size: 65px;
		line-height: 64px;
	}
	.two-colm .col {
		display: block;
		width: auto;
	}
	.testimonial {
		max-width: inherit;
		padding: 20px;
	}
	.ux-type {
		margin: 10px 0 0;
	}
	.humanize::before {
		width: 100%;
	}
	.main_footer {
		padding: 20px 0;
	}
	.infoBox {
		height: auto;
		display: inline-block;
		line-height: inherit;
		width: 30%;
		vertical-align: top;
	}
	.infoBox span {
		display: block;
		min-width: 160px;
	}
	.infoBox span.svgIcon {
		min-height: 100px;
	}
	.descriptn {
		display: inline-block;
		padding: 0 0 0 20px;
		text-align: left;
		width: 69%;
	}
	.box-list {
		display: block;
	}
	.box-list .box {
		padding: 20px !important;
		text-align: center;
		border-bottom: 1px solid #dddddd;
	}
	.text-Block > p {
		padding-top: 0;
	}
		.ux-box-icon .ux-box-svg svg {
		width: 80px;
	}
	.ux-box-icon .ux-box-title {
		margin: 0;
	}
	.ux-box-icon {
    display: inline-block;
    min-width: 270px;
		height: auto;
}
}

@media only screen and (min-width: 991px) and (max-width: 1050px) {
	.two-colm {
		padding: 0 20px;
	}
    .count_box{max-width: 275px;min-width: 275px;}
}
/*@media only screen and (min-width:1025px) and (max-width:1200px) {
	.infoBlock h2 {
    font-size: 26px;
}
}*/
@media only screen and (min-width: 1201px) and (max-width: 1500px) {
	.crcle {
		margin: 0 20px;
	}
	.crcl_list.straight::before,
	.crcl_list.straight::after,
	.straight .crcle.strategize-i::before,
	.straight .crcle.evaluate-i::before {
		display: none;
	}
	.crcl_list.straight {
		margin: 0;
	}
	.two-colm {
		padding: 0 20px;
	}
	.infoBlock h2 {
    font-size:52px;
}
.ux-box-icon .ux-box-title {
    max-width: 125px;
}
	
}