.full-width{float: left;width: 100%;}
.wrapper_box{ overflow: hidden; }
img{ max-width: 100%; }

ul{ padding-left:0; }
 
#banner_box { padding-top: 115px;}
a:focus{outline:none; outline-color:none; outline-style:none;}
#banner_box{background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115920/portfolio_shophub_banner.jpg) no-repeat center bottom/cover;  position: relative; padding-bottom:50px;  }
#banner_box::before {
  border: 150px solid #ff4d3d;
  border-radius: 50%;
  content: "";
  display: block;
  height: 1198px;
  left: -16%;
  position: absolute;
  top: -563px;
  width:1198px;
  z-index: 1;
}
#banner_box .banner-detail-box{margin-top: 105px;}
#banner_box .img-box{position: relative; z-index: 99; width: 323px; height:649px; overflow: hidden; margin: 0 auto;}
#banner_box h1{ color:#fff;  margin-top: 0;}
#banner_box h5{color: #fff;}
#banner_box .banner_btn .btn{ background:#fff; border-color:#fff;color: #3b3635;}
#banner_box .banner_btn .btn::after{ background:#ff4d3d;}
#banner_box .banner_btn .btn:hover{ border-color:#ff4d3d; color: #fff;}
#banner_box .banner_btn{ margin:40px 0; }
#banner_box .media-icons .media-left .fa{color: #ff4d3d;}
#banner_box .media-icons{margin-top: 20px;}
#banner_box .media-icons .media-body p{color: #fff;}
#banner_box .mobile-bg {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top:70px;
  height:85%;
  width:89%;
  display: table;
  background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115253/portfolio_shophub_banner_mobile_bg.jpg) repeat 50%/cover;
    -webkit-animation: animate_background 15s linear 0s    infinite  alternate;
    -moz-animation: animate_background 15s linear 0s   infinite  alternate;
    -o-animation: animate_background 15s linear 0s   infinite  alternate;
    animation: animate_background 15s linear 0s   infinite  alternate;
    border-radius: 30px;
    -webkit-border-radius: 30px;

}
#banner_box .img-box figure{position: relative; z-index: 9;}
#banner_box .img-box  .text-box h2{ margin-top: 55px; position: relative; display: inline-block; }
#banner_box .img-box  .text-box h2:before{content: '';  background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115255/portfolio_shophub_banner_mobile_carrot_icon.png) no-repeat center center/cover;
display: inline-block; width: 16px; height: 41px;
position: absolute; left:23px; top:-20px;

}
#banner_box .img-box  .text-box {
  background:rgba(28,28,27,0.3);
  display: table-cell;
  height: 196px;
  vertical-align: middle;
  color: #fff;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
z-index: 99;

}


#key_feature{background: #352e2c; padding: 25px 0 120px;}
#key_feature h3{color: #f95546; font-weight: 600;}
#key_feature h5{color: #fff;}
#key_feature .detail-box h5{ margin: 15px 0 20px; font-weight: 600;}
#key_feature .detail-box p{color: #8a7d79; transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s;}
#key_feature .fa{color: #fff; font-size: 40px;}
#key_feature  .content-box{ border: 1px solid #4e4341;}
#key_feature .key-feature-list li{display: table;}
#key_feature .detail-box {
  display: table-cell;
  height: 440px;
  padding: 69px 15px;
  position: relative;
  transition: all 0.5s ease-in-out 0s;
  vertical-align: middle;
  z-index: 9;
  background: #352e2c;
}

#key_feature .key-feature-list { margin-top: 125px;

}




#key_feature .key-feature-list  .bag-icon-box .bag-icon{ 
	display: block; height:129px;  width: 133px;
 background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115304/portfolio_shophub_key_feature_icon.png) no-repeat center center/cover;
	position: absolute; left: 0; top:-80px;right: 0; margin: auto;
	z-index: 9;
	transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s;
 }

.bag-icon-box { position: relative;}
.bag-icon-box::before {
  border: 1px solid #4e4341;
  border-radius: 50%;
  content: "";
  display: block;
  height: 45px;
  left: -107px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 22px;
  width: 45px;
  z-index:99;
   transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s;
}

.bag-icon-box::after {
  border: 1px solid #4e4341;
  border-radius: 50%;
  content: "";
  display: block;
  height: 45px;
  left: 0;
  margin: auto;
  position: absolute;
  right: -100px;
  top: 22px;
  width: 45px;
  z-index: 99;
   transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s;
}
#key_feature .key-feature-list .bag-icon-box .hover-bag-icon{
	background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115307/portfolio_shophub_key_feature_icon_hover.png) no-repeat;
	content: '';
	display: block;
	height: 129px;
	width: 133px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top:-70px;
	z-index: 9999;
opacity: 0;
	  transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s;
}


#key_feature .content-box:hover .detail-box{background:#ff4d3d;}
#key_feature .key-feature-list li .content-box:hover .bag-icon-box::after,#key_feature .key-feature-list li .content-box:hover .bag-icon-box::before{background:#e74335; border-color: #e74335;}
#key_feature .content-box:hover .hover-bag-icon{ opacity: 1; top: -80px; }
#key_feature .key-feature-list  .content-box:hover .bag-icon{opacity: 0;}
#key_feature .key-feature-list  .content-box:hover p{color: #fff;}
#key_feature .app-heading-box {
  background: #3b3331 none repeat scroll 0 0;
  bottom: -180px;
  box-shadow: 0 10px 10px -4px #25201e;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 0 52px 15px;
}
#key_feature .app-heading-box h2{color: #fff;}
#key_feature .app-heading-box h2 span{color:#fe5748 }

#key_feature .app-heading-box p{color: #fff;}
#key_feature .app-heading-box .banner-btn .btn{background: #ff4d3d;}
#key_feature .app-heading-box .banner-btn .btn:before{background: #f33e2e;}
#key_feature .app-heading-box .banner-btn { margin-top: 40px;}



#screenshot{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115314/portfolio_shophub_screenshot_bg.jpg)repeat center center; min-height: 500px; padding: 105px 0 20px; position: relative; overflow: hidden; z-index: 1}
#screenshot:after{ width: 900px; height: 900px; position: absolute; content: ''; border-radius: 100%; border: 160px solid #ff4d3d; right: -158px; top: -450px;z-index: -1}
#screenshot figure{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115312/portfolio_shophub_screen_phone.png)no-repeat center center/contain; width: 397px; height: 685px; display: block; float: right;}
.screenshot-detail{display: flex; display: -webkit-flex; min-height: 685px; flex-wrap: wrap; -webkit-flex-wrap: wrap; align-items: center;}
.screenshot-detail .h1{color: #fff; font-size: 68px; font-weight: 600; margin: 0 0 20px;}
.screenshot-detail .h1 span{color: #fc5243;}
.screenshot-detail  h4{color: #fff;}
.screenshot-slider{margin: 54px 44px 0 0 ; width: 307px;}
.direction-nav{position: absolute; left: 0; height: 150px; top:150px; margin: auto; display: flex; display: -webkit-flex;}
.slider-container{position: relative;}
.direction-nav h5{transform: rotate(-90deg); color: #fff; margin-bottom: 30px;}
.direction-nav a{width: 65px; height: 65px; border-radius: 100%; background: #ff4d3d; display: block; position: absolute; left: 20px; text-align: center;margin: 0 0 15px 0 ;
  transition: all 0.6s; -webkit-transition: all 0.6s;
}
.direction-nav a:hover{background: #c31607;}
.direction-nav a+a{bottom: 0;}
.direction-nav a .fa{color: #fff; line-height: 65px;}
.direction-nav.onoff{bottom:0px;  left:20px;height: 126px; background: #2a2422; border: 1px solid #2a2422; width: 65px; border-radius: 67px;}
.direction-nav.onoff a{width: 60px;background: #3f3634; height: 60px; left: 1px; font-size: 16px; color: #fff; line-height: 60px; text-transform: uppercase; text-decoration: none; bottom: 1px;margin: 0;}
.direction-nav.onoff a.off{ top: 1px; bottom: auto;}
.direction-nav.onoff a.active{box-shadow: inset 0 0 0 30px #ff4d3d}
.direction-nav.onoff h5{margin-left: -47px;}


#more_feature_shophub{ min-height: 600px;padding:0 0px 50px;background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01115314/portfolio_shophub_screenshot_bg.jpg) repeat center center; position:relative;z-index: 2;}
#more_feature_shophub::before {
  border: 160px solid #ff4d3d;
  border-radius: 50%;
  content: "";
  display: block;
  height: 971px;
  left: -15%;
  position: absolute;
  top: -157px;
  width: 971px;
}
#more_feature_shophub h3{color: #f95546;}
#more_feature_shophub  h5{color: #fff;}
#more_feature_shophub .media-icons h5{color: #f95546;}
#more_feature_shophub .media-icons p{color: #fff;}
#more_feature_shophub .feature-screens .iphone {
  left: 0;
  margin: auto;
  position: absolute;
  top: 28px;
}
#more_feature_shophub .heading-box{margin-bottom: 40px;}
#more_feature_shophub .f-icon .fa{color: #fff; font-size: 28px;}
#more_feature_shophub .f-icon {
  border-radius: 50%;
  /*box-shadow: 0 0 0 70px #ff4d3d inset;*/
  -webkit-box-shadow: 0 0 0 70px #ff4d3d inset;
  display: block;
  height: 70px;
  width: 70px;
  text-align: center;
  line-height: 5;
  transition: all 0.9s;
  -webkit-transition: all 0.9s;
  background:#ff4d3d; 
}
#more_feature_shophub .media:hover .f-icon {box-shadow: 0 0 0 70px #fff inset;}
#more_feature_shophub .media:hover .f-icon .fa{color:#ff4d3d }
#more_feature_shophub .media:hover h5{color: #fff;}

#more_feature_shophub .media .media-body {position: relative; top:15px;}




/*----------------------------------------Delivery  Tech -------------- */
#tech{padding-top: 35px;background: #302a28; position: relative; z-index: 3;}
#tech h5,
#delivery h5{color: #1cb4ea;}
#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{background: rgba(0, 0, 0, 0) url("https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/05/30071158/feastbeast_tech_border.png") no-repeat scroll center center;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#delivery .h3,#tech .h3{color: #f44545; font-weight: 600;}
#tech .tech-icon::before, #delivery ul::before {bottom: 0;  top: auto;}
#tech li {margin: 0 15px;}

#delivery{background: #302a28; padding-bottom: 80px; position: relative;}
#delivery h4{color: #fff;}
#delivery ul {margin: 0 0 25px;padding: 10px 0; position: relative;}
#delivery li {color: rgb(255, 255, 255);font-size: 16px; line-height: 18px;padding-right: 55px;}
#delivery li span {display: inline-block;height: 15px; margin-right: 10px; width: 15px;}
#delivery li:nth-child(1) span {background: #fff;}
#delivery li:nth-child(2) span {background: #ffc000;}
#delivery li:nth-child(3) span { background: #29cef1;}
#delivery li:nth-child(4) span{background: #4ee751;}

#delivery h5,#tech h5{color: #fff;display: block;  font-size: 22px;  line-height: 28px; position: relative; margin-bottom:45px;}
#delivery h5:after,#tech h5:after{content: ''; background: #fff; height: 3px; display:inline-block; width:70px; position: absolute; right: 0; left: 0; margin: auto; bottom: -17px;}

#delivery span.team-member {color: #fff;display: block;  font-size: 22px;  line-height: 28px;  margin-bottom: 15px;}
#delivery .timeline-box { background: #403835 ;  padding:25px 25px; position: relative; z-index: 99;}
#delivery .timeline-box img{display: inline-block;}
#delivery::after {
  background: #2e2726 none repeat scroll 0 0;
  border-radius: 50%;
  bottom: -400px;
  content: "";
  display: block;
  height: 740px;
  position: absolute;
  right: -12%;
  width: 740px;
}

/*------------------------Banner Mobile bg animation------------------- */

@-webkit-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
       background-position:-500px -100px;
    } 
}
@-moz-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
         background-position:-500px -100px;
    } 
}
@-o-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
         background-position:-500px -100px;
    } 
}
@keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position:-700px 0px;
    } 
}




/* ------------------Responsive CSS------------------ */

@media only screen and (max-width:1600px) {
#banner_box .img-box{ width: 268px; height:545px;}
#banner_box .mobile-bg { height: 88%;  top: 20px;}
#banner_box::before {height: 1040px; left: -25%;top: -480px;  width: 70%}
#more_feature_shophub::before {
  height: 825px;
  left: -20%;
  top: 10px;
  width: 825px;
}
#screenshot::after{ right: -25%; }
#banner_box .img-box .text-box{ height: 150px; }
#banner_box .img-box .text-box h2{margin:40px 0 0;}
#screenshot figure { height:520px; width: 310px;}
.screenshot-slider { margin:40px 35px 0 0; width: 240px;}
.screenshot-detail{ min-height: 540px; }
.screenshot-detail .h1 {font-size:60px;}
.direction-nav a{ height: 55px; width: 55px;  margin-bottom: 25px;}
.direction-nav a .fa {line-height: 50px;  font-size: 40px;}
.direction-nav.onoff{ width: 60px; bottom: -40px;}
.direction-nav.onoff a{ font-size: 14px; height: 55px; width: 55px; }
#more_feature_shophub::before {height: 903px;top: -85px;  width: 903px;}
.direction-nav{ top: 85px; }
}

@media only screen and (max-width:1400px) {

	#banner_box::before { height: 1040px; left: -30%;  top: -445px;  width: 75%;}
	#tech li { margin: 0 5px;  width: 15%;}

#more_feature_shophub .feature-screens .img-box{ width:280px;  margin: 0 auto}
#more_feature_shophub .feature-screens .iphone {
  left: 0;
  margin: auto;
  position: absolute;
  top: 24px;
  width: 247px;
}
.screenshot-detail .h1{ font-size: 55px; }
#more_feature_shophub .heading-box { margin-bottom: 15px;}
.direction-nav{top:120px;}
#more_feature_shophub::before{ left: -22%; }


}
@media only screen and (max-width:1169px) {
	#banner_box::before {height: 960px;left: -40%;  top: -415px;  width: 90%;}
#more_feature_shophub::before { height: 750px;  left: -28%;  top: 0;  width: 750px;}
  #screenshot::after {  right: -45%;}


}



@media only screen and (max-width:992px) {
	#banner_box::before {height: 778px;left: -49%;  top: -311px;  width: 100%;}
	#banner_box h1{font-size: 26px;}
	#banner_box h5{font-size: 16px;}
	#key_feature .detail-box{padding: 80px 15px 30px;}

	#tech li {margin: 0 3px;}
	#delivery::after{ bottom: -470px; right: -39%;}
    #screenshot::after {  right: -65%;}
.screenshot-detail .h1 {font-size: 50px;}
.direction-nav.onoff {height: 110px; width: 55px;}
#screenshot figure { height: 625px;  width: 285px;}
.screenshot-slider { margin: 105px 32px 0 0;  width: 220px;}
.direction-nav.onoff a.off {  bottom: auto;  top: 1px;}

.direction-nav.onoff a {bottom: 1px;height: 50px; left: 1px;   margin: 0;   width: 50px;}
.direction-nav a {height: 55px;left: 20px;     width: 55px;}
.direction-nav a .fa {line-height: 55px;}
.screenshot-detail { min-height: 608px;}
#screenshot{ padding-bottom: 0; }
#more_feature_shophub h3{ margin-top: 0; }
.screenshot-detail .h1 { font-size: 35px;}
.direction-nav {top: 175px;}
.screenshot-detail h4{ font-size: 17px; line-height: 22px; }
#more_feature_shophub::before{ left: -50%; }


}


@media only screen and (max-width:767px) {
	#banner_box::before{ content: none; }
	#banner_box .banner-detail-box {margin-top: 0;}
#banner_box .img-box {  height: 585px;}
#banner_box .mobile-bg{ height: 87%; }
#key_feature .key-feature-list li {margin-bottom: 110px;}
#key_feature .key-feature-list li:last-child{margin-bottom: 20px;}
#key_feature .app-heading-box >div{ text-align: center; }
#key_feature .app-heading-box .banner-btn { margin-top: 15px;}
#more_feature_shophub::before,#delivery::after,#screenshot::after{content: none;}
#more_feature_shophub{padding-bottom: 40px;}
#delivery h5, #tech h5,#delivery span.team-member{ font-size: 16px; line-height: 20px; }
.screenshot-detail {min-height: auto; display: inline-block; text-align: center;}
#screenshot figure {float: none !important;  display: inline-block; margin-top: -40px;}
.slider-container{ text-align: center; }
.direction-nav a {height: 30px;  left: 20px;  width: 30px; margin-left: 10px;}
.direction-nav a .fa{ font-size: 25px; line-height: 30px;}
.direction-nav { height: 103px;  left: 5px;}
.screenshot-detail .h1 { font-size: 33px;}
#more_feature_shophub{ margin-top: -40px; }


}


@media only screen and (max-width:479px) {
	#banner_box h1 { font-size: 20px;}
	#banner_box h5 {  font-size: 15px;}
  .direction-nav h5{display: none;}
  .direction-nav a{margin-left: 0;}
  .direction-nav{ left: -10px; }
 

}