.wrap-box{overflow: hidden;}
#banner_box {min-height: 765px; padding-top: 220px;  position: relative; 
	background: #0f2627 url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30090614/socio_banner_building.png)no-repeat bottom center/contain; z-index: 1;
}
#banner_box .col-sm-5{z-index: -2}
#banner_box .media-icons{margin-bottom: 230px;}
@media all and (min-width: 768px){
	#banner_box {-webkit-animation: pulse 15s ease-in-out infinite alternate ;animation: pulse 15s ease-in-out infinite alternate;}
	#banner_box:after{position: absolute; content: ''; background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30090619/socio_banner_pattern.png) no-repeat left bottom; width: 100%; height: 600px; left: 0; top: 0; z-index: -3}
	.cloud{background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30090621/socio_cloud.png) repeat-x top left /contain; width: 100%; height:100%; position: absolute; top: -50px; left: 0; z-index: -1; }
	.socio-banner-screen{position: absolute;top: 15px; right: 0; left: 0; margin: auto; z-index: -2}
}
 @-webkit-keyframes pulse{
	0% {background-color: #fdb853;} 
	25% {background-color: #16c7d1;}
	 50% {background-color: #19858b;}
	 75% {background-color: #135053;}
	100% {background-color: #0f2627;}
}
@keyframes pulse{
	0% {background-color: #fdb853;} 
	25% {background-color: #16c7d1;}
	 50% {background-color: #19858b;}
	 75% {background-color: #135053;}
	100% {background-color: #0f2627;}
}

#banner_box h1{text-shadow:2.5px 1px 1px rgba(0,0,0,0.5);}
#banner_box h5{color: #ffffff; font-weight: 500;}
#banner_box .banner-btn{margin:20px 0 50px;}
#banner_box .banner-btn .learn_more{background:#e04d5c;}
#banner_box .banner-btn .learn_more:before{background:#c62737; }
#banner_box .banner-btn .contact_us{color: #2a2828;}
#banner_box .banner-btn .contact_us:before{background: #e9e9e9;}
#banner_box  .media h5,
#banner_box .media .fa{color: #fff;}
#banner_box .media  p{color: #f02b3f;}


#features{padding: 120px 0 50px; background: #fff;}
h3{color: #171616; font-weight: 500;}
h3 span{color: #f05456; font-weight: 600;}
#features h5,
#screenshot h5{color: #171616; font-weight: 500; margin: 0 0 25px;}

#features .col-sm-4 .icon{position: relative;width: 127px;	height: 127px;	display: inline-block;}
#features .col-sm-4 .icon i{
	width: 127px;
	height: 127px;
	border-radius: 100%;
	background: #f04e51;
	text-align: center;
	transition:all 0.4s ; 
	-webkit-transition:all 0.4s ; 
  line-height: 127px;
  color: #f04e51;
  position: absolute;
  z-index: 1;
}
#features .col-sm-4:nth-child(1) .icon i{right: 0; bottom: 0;}
#features .col-sm-4:nth-child(2) .icon i{left: 0; top: 0;}
#features .col-sm-4:nth-child(3) .icon i{right: 0; top: 0;}
#features .col-sm-4 .icon i:after,
#features .col-sm-4 .icon small:after{position: absolute; content: ''; width:97px; height:97px; background: #171616; border-radius: 100%; right: 0; left: 0; top: 0; bottom: 0;
 margin: auto;z-index: -1; transition:all 0.4s ; -webkit-transition:all 0.4s ; }
#features .col-sm-4 .icon small{
	width: 40px;
	height: 40px;
	background: #fbc23d;
	position: absolute;
	border-radius: 100%;
	font-size: 20px;
	font-weight: 700;
	color: #07263b; 
	line-height: 40px;
	transition:all 0.4s ;
	-webkit-transition:all 0.4s ; 
	z-index: 2;
}
#features .col-sm-4 .icon small:after{width: 0; height: 0;}

#features .col-sm-4:nth-child(1) .icon small{right: 0px; bottom: 5px;}
#features .col-sm-4:nth-child(2) .icon small{left: 0px; top: -5px;}
#features .col-sm-4:nth-child(3) .icon small{right: 0px; top: 5px;}

#features .col-sm-4 h5{color: #f04e51; font-weight: 600; margin: 20px 0 15px;transition: all 0.3s;}
#features .col-sm-4 p{color: #171616;}
#features .col-sm-4:hover h5{color: #171616;}

/*#features .col-sm-4:hover small{
	width: 127px;
	height: 127px;
	background: #fbc23d;
	font-size: 40px;
	line-height: 125px;
	color: #fbc23d;
	bottom: 0;
	right: 0;
	z-index: 1;	
}
#features .col-sm-4:hover small:after{width: 97px; height: 97px;}
#features .col-sm-4:hover .icon i{
	width: 40px;
	height: 40px;
	font-size: 1.5em;
	line-height: 40px;
	background: #f04e51;
	z-index: 2;
	border: 0;
	color: #171616;
}
#features .col-sm-4:hover .icon i:after{width: 0; height: 0;}
#features .col-sm-4:nth-child(1):hover .icon i{right: 0px; bottom: 5px;}
#features .col-sm-4:nth-child(2):hover .icon i{left: 0px; top: -5px;}
#features .col-sm-4:nth-child(3):hover .icon i{right: 0px; top: 5px;}*/

#screenshot{padding-bottom: 20px;}
.screenshot-list{ padding: 45px 0;}
.screenshot-list li{padding: 0 1px;  -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s; position: relative;}
.screenshot-list li:hover{z-index: 1; -webkit-transform: scale(1.2) rotate(0.01deg);transform: scale(1.2) rotate(0.01deg);}

#feature{background: #e04d5c; position: relative; padding-bottom: 60px; z-index: 1; margin: -25px 0 0;}
#feature:before{position: absolute; content: ''; width: 100%; background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30090623/socio_feature_bg_pattern.png)no-repeat right top; top: -39px; height: 583px; right: 0; z-index: -1}
#feature h3,
#feature h5{color: #fff;}
#feature h4{color: #fff; font-weight: 500;-webkit-transition: all 0.4s;transition: all 0.4s; }
#feature .col-xs-12{margin-bottom: 50px;-webkit-transition: all 0.4s;transition: all 0.4s; }
#feature .feature-box .col-sm-6{background: rgba(252,125,138,0.54); border: 1px solid #d03d4c; padding: 15px; min-height: 300px; display: flex; align-content: center;position:relative; overflow: hidden;}
#feature .feature-box .col-sm-6:hover:after{position: absolute;content: ''; width: 50px; height: 50px; box-shadow:0 0 0 3px #322534, 0 0 0 10px #fdb853; border-radius: 100%; border: 3px solid #fff;
-webkit-transition: all 1s ease 0s;transition: all 1s ease 0s;}
#feature .feature-box .col-sm-6:nth-child(1):hover:after{right: -25px; bottom: -25px;}
#feature .feature-box .col-sm-6:nth-child(2):hover:after{ left: -25px; bottom: -25px; }
#feature .feature-box .col-sm-6:nth-child(3):hover:after{ top: -25px; right: -25px; }
#feature .feature-box .col-sm-6:nth-child(4):hover:after{top: -25px; left: -25px;}



#feature .feature-box span{width: 70px; height: 70px; border-radius: 100%; background: #e04d5c; display: inline-block;-webkit-transition: all 0.4s;transition: all 0.4s;}
#feature .feature-box span .fa{line-height: 70px; color: #fff;}
#feature .feature-box .col-sm-6:hover{background: #322534;}
#feature .feature-box .col-sm-6:hover span{background: #fdb853;}
#feature .feature-box .col-sm-6:hover h4{color: #fdb853;}
#feature .feature-box .col-sm-6 p{color: #fff;}
#feature .feature-box .col-sm-6:hover span .fa{animation-duration: 1s; animation-iteration-count: 1; animation-name: hvr-icon-wobble-vertical; animation-timing-function: ease-in-out; color: #322534;}

#tech{background: #322534; padding-top: 55px;}
#tech h3,
#delivery h3{color: #fff; font-weight: 500;}
#tech h3 span,
#delivery h3 span{color: #fdb853; font-weight: 600}
#tech h5,
#delivery h5{color: #806d83;}
#tech .tech-icon{margin: 35px 0 50px; padding: 25px 0; position: relative; }
#tech .tech-icon:after,
#tech .tech-icon:before,
#delivery ul:before,
#delivery ul:after{position: absolute; content: ''; background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30071158/feastbeast_tech_border.png) no-repeat center center; width: 100%; height: 2px; top: 0; left: 0;}
#tech .tech-icon:before,
#delivery ul:before{top: auto; bottom: 0;}

#tech li{margin: 0 15px;}



#delivery{padding-bottom: 40px; background: #322534;}
#delivery h5+h5{color: #fff;}
#delivery h4{color: #fff; margin: 40px 0 13px;}
#delivery ul{padding: 10px 0; margin: 0 0 25px; position: relative;}
#delivery ul:before{top: auto; bottom: 0;}
#delivery li{font-size: 16px; line-height: 18px; color: #fff; padding-right: 55px;}
#delivery li span{ width: 15px; height: 15px; display: inline-block;margin-right: 10px;}

#delivery li:nth-child(1) span{ background: #fff;}
#delivery li:nth-child(2) span{ background: #e6b41c;}
#delivery li:nth-child(3) span{ background: #29cef1;}
#delivery li:nth-child(4) span{ background: #4ee751;}
#delivery li:nth-child(5) span{ background: #e04d5c;}

#contact{background: #fdb853; padding: 55px 0 45px;}
#contact p{color: #1d1c1c;}
#contact .btn{color: #fff; margin-top: 25px; background: #e04d5c;}
#contact .btn:before{background: #d83444;}

@media all and (max-width: 1400px){
	#features{padding-top: 95px;}
#features .col-sm-4 .icon{position: relative;width: 100px;	height: 100px;}
#features .col-sm-4 .icon i{
	width: 100px;
	height: 100px;
	/*border: 10px solid #f04e51;*/
  line-height: 100px;
}
#features .col-sm-4 .icon small{
	width: 35px;
	height: 35px;
	font-size: 18px;
	font-weight: 600; 
	line-height: 35px;
}
/*#features .col-sm-4:hover small{
	width: 100px;
	height: 100px;
	border: 10px solid #fbc23d;
	font-size: 35px;
	line-height: 100px;
	color: #fbc23d;

}
#features .col-sm-4:hover .icon i{
	width: 35px;
	height: 35px;
	line-height: 35px;
}*/


	#delivery li{padding-right: 35px;}
	#tech li { margin: 0 10px;}
}
@media all and (max-width: 992px){
	#feature:before{position: absolute; content: ''; width: 100%; background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30090625/socio-feature_bg_pattern.png)no-repeat right top; top: -39px; height: 583px; right: 0; z-index: -1}
	#feature .col-sm-4{padding-top: 120px}
	.screenshot-list li{width: 165px;}
	#banner_box{padding-top: 125px; min-height: 600px;}
	#banner_box .media-icons {margin-bottom: 125px;}
	.socio-banner-screen{position: static;}
	#banner_box::after{display: none;}
	.cloud{top: 65px;}
	#features {padding-top: 45px;}
}

@media all and (min-width: 640px) and (max-width: 767px){
	.screenshot-list li {width: 155px;}
}