.wrap-box{overflow: hidden;}
h1,.h1,.h2,h2{letter-spacing: 0;}
#banner_box{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/18093948/bfs-banner-bg.jpg) no-repeat center bottom/cover; position: relative; padding-bottom: 70px;}
.banner-screen{z-index: 2; position: relative;}
.banner-android,
.banner-brush{position: absolute; right: 90px; top: 0; bottom: 0; margin: auto;}
.banner-brush{right: 55px; z-index: -1;}
#banner_box h1{ font-weight: 600; margin-top: 70px;}
#banner_box h5{color: #fff;}
#banner_box .banner-btn{margin: 35px 0 45px;}
#banner_box .banner-btn .learn_more{color: #1d1c1c;}
#banner_box .banner-btn .learn_more:before{background: #e9e9e9;}
#banner_box .banner-btn .contact_us{background: #f1345d; color: #fff;}
#banner_box .banner-btn .contact_us:before{background: #c8153c;}
#banner_box .media h5{color: #ff4069; font-weight: 600;}
#banner_box .media .f-icon{width: 65px; height: 65px; border-radius: 100%; border:1px solid #ff4069; text-align: center;}
#banner_box .media .fa{color: #fff; line-height: 65px;}
#banner_box .media p{color: #ffffff;}


#keyFeature {background:#16171d; padding-bottom: 40px; position: relative; z-index: 1;}
#keyFeature h3 {color: #f1345d; font-weight: 600;}
#keyFeature h3+h5{color: #fff; margin-bottom: 40px;}
#keyFeature .media{padding: 15px 20px 15px 15px;}
#keyFeature .media h5{color: #a1a1a1; font-weight: 600;}
#keyFeature .media p{color: #e4e4e4; padding: 0; margin: 0;}
#keyFeature .media,
#keyFeature .media-left,
#moreFeature .media-left,
#moreFeature .media{overflow: visible;}
#keyFeature .media  .f-icon{width: 65px; height: 65px; border-radius: 100%;  text-align: center; box-shadow: inset 0 0 0 5px #282930;}
#keyFeature .media .fa{color: #fff; line-height: 65px;}
#keyFeature .media,
#keyFeature .media h5,
#keyFeature .media .f-icon,
#keyFeature .media .fa{transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s;}
#keyFeature .media:hover{background: #17181e;box-shadow: 2px 2px 11px 0 rgb(0, 0, 0); cursor: default;}
#keyFeature .media:hover h5{color: #f1345d;}
#keyFeature .media:hover .f-icon{box-shadow:inset 0 0 0 5px #f1345d;}

.feature-screens{position: relative; z-index: 1;}
.feature-screens .circle-bg{
  background: #af284a; border:1px solid #ff3161; position: absolute; right: 0; left: 0; bottom: 0; top: 0; margin: auto;
  width: 384px; height: 384px; border-radius: 100%; box-shadow:inset 0 0 0 25px #371b27; z-index: -1;
}
.feature-screens .circle-bg:after{position: absolute; content: ''; width: 335px; height: 335px; border-radius: 100%; border:1px solid #ff3161; right:0; left: 0; top: 0; bottom: 0; margin: auto;
}
.feature-screens:after{  background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/18094039/bfs-feature-btm-bg.png) no-repeat center center; z-index: -1;
  width: 434px; height: 82px; bottom: -35px; left: 0; right: 0; margin: auto; position: absolute; content: '';}
 
.feather{position: absolute; width: 100%; height: 100%; top: 0; right: 0; left:0; bottom: 0; margin: auto;}
.feather .feather-up{z-index: 1; right:0; position: absolute; bottom: 0;}
.feather .down-feather{position: absolute;z-index: -1; top: 50px;}

#screenshot{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/18094010/bfs-screenshot-bg.jpg) no-repeat center bottom/cover; position: relative; padding: 40px 0 70px; z-index: 1}
#screenshot:after{background: #af284a; border:1px solid #ff3161; position: absolute; content: ''; right: 0; left: 0; top: 0; margin: auto; width: 255px; height: 255px; border-radius: 100%; 
  box-shadow:inset 0 0 0 15px #371b27; z-index: -1;}
#screenshot:before{position: absolute; content: ''; width: 215px; height: 215px; border-radius: 100%; border:1px solid #ff3161; right:0; left: 0; top: 15px; margin: auto;}
#screenshot h2{color: #fff; margin: 0;}
#screenshot h5{color: #092245; margin-bottom: 30px;}

.dg-wrapper{
  /*width: 266px;
  height: 474px;*/
  /* width: 327px;
  height: 666px;*/
  height: 586px;
  width: 342px;
  margin: 0 auto;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
  background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/18093023/phone_screenshot_screen1.png)no-repeat center center/contain;
}
.dg-wrapper div{
 /* width: 266px;
  height: 474px;*/
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 265px;
  height: 468px;
  right: 0; margin: auto; padding: 47px 0 0 ;
  
}
/*.dg-wrapper div img{padding:75px 0 0 18px}*/
.dg-wrapper div.dg-transition{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.dg-container nav div{
  display: inline-block;
  cursor:pointer;
  width: 57px;
  height: 57px;
  border-radius: 100%; 
  margin: 5px 55px 10px;
  position: relative;
  box-shadow: 0 0 0 6px #af284a inset;
}
.dg-container nav div .fa{line-height: 57px; color: #fff; font-weight: 600;}
.dg-container nav div.dg-next{margin-left: 10px;}
.dg-container nav div:hover{background: #1176bc;}

.dg-container nav div:after,
.dg-container nav div:before {
  content: "";
  height: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 15px;
  z-index: -2;
}
.dg-container nav div:before{width: 51px; height: 51px; border-radius: 100%; background: #371b27;top: 0; bottom: 0; margin: auto;z-index: -1}
.dg-container nav div.dg-next:after{
	border-top: 27px solid transparent;
  border-bottom: 27px solid transparent;
   border-right: 60px solid #af284a;
  left: -70px; top: 1px;
}
.dg-container nav div.dg-prev:after{
	border-bottom: 27px solid rgba(0, 0, 0, 0);
border-left: 60px solid #af284a;
border-top: 27px solid rgba(0, 0, 0, 0);
right: -70px; top: 1px;
}

#contact {background: #cf103c; padding: 50px 0; position: relative; z-index: 1;}
.contact-us{background: #fe3463; padding: 10px 100px; margin: -110px 0 60px; box-shadow:10px 10px 15px 0 rgba(0, 0, 0,0.6); border-radius: 4px;display: flex; display: -webkit-flex; flex-wrap: wrap;align-content: center;}
.contact-us h3{color: #fff; font-weight:600;}
.contact-us p{color: #fff; }
#contact .col-sm-3{display: flex; display: -webkit-flex; flex-wrap: wrap;align-content: center;}
#contact .btn{color: #302f30; background: #fff; margin: auto;}
#contact .btn:before{background: #d6d6d6;}
.feature-box .col-sm-6{padding: 5px;}
.feature-box .f-box {
  background: #16171d;
  border-radius: 5px;
  min-height: 300px;
  padding: 20px 10px;
  position: relative;
  transition: all 0.6s ease 0s;
  -webkit-transition: all 0.6s ease 0s;
  vertical-align: middle;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-content: center;
}
.feature-box .f-box span{width: 77px; height: 77px; border-radius: 100%; box-shadow: 0 0 0 6px #cf103c inset; display:inline-block; margin: auto;}
.feature-box .f-box span .fa{line-height: 77px;color: #fff;}
.feature-box .f-box h5{color: #f8305f; font-weight: 600; margin:20px 0; width: 100%;
  transition: all 0.6s ease 0s;
  -webkit-transition: all 0.6s ease 0s;}
.feature-box .f-box p{color: #fff; width: 100%;}
.feature-box .f-box:hover span,
.feature-box .f-box.active span{background: #1c1b1b;}
.feature-box .f-box:hover,
.feature-box .f-box.active{background: #b50b32; box-shadow: 2px 2px 5px 0 #000; cursor: default;}
.feature-box .f-box:hover h5,
.feature-box .f-box.active h5{color: #fff;}

.bullet{position: absolute; top: 0; bottom: 0; margin: auto; height: 100px; left: 0;}
.bullet li {margin: 5px 0;}
.bullet li a{display: block; width: 20px ;height: 20px; border-radius: 100%; border:2px solid #fff; transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s;}
.bullet li.active a{background: #fff;}

#contact figure{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/18093023/phone_screenshot_screen1.png)no-repeat center center; width: 300px; height: 588px; display: inline-block; }
#contact figure img{position: absolute; right: 0px; left: 0; top: -28px; bottom: 0; margin: auto; display: none;}





#tech,
#delivery{background: #16171d; position: relative; z-index: 2; padding-top: 30px;}
#tech h3,
#delivery h3{color: #e72b56; font-weight: 600;}
#tech h4,
#delivery h4{color: #fff; position: relative; padding-bottom: 15px;}
#tech h4:after,
#delivery h4:after{position: absolute; content: ''; width: 70px; height: 4px; background: #fff; bottom: 0; right: 0; left: 0; margin: auto;}
#tech .tech-icon {margin: 35px 0;padding: 10px 0; position: relative;}
#tech .tech-icon li{vertical-align: middle;}
#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%;
}
#tech .diamond-shape,
#tech .border:after,
#tech .border:before,
#delivery .diamond-shape,
#delivery .border:after,
#delivery .border:before{background: #fbb040;}
#tech .tech-icon::before, #delivery ul::before {bottom: 0;  top: auto;}
#tech li {margin: 0 15px;}
#tech .border,
#delivery .border{margin-bottom: 20px;}
#delivery{padding-bottom: 40px;}
#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;}

.del-process-graph{background: #1b1c24; min-height: 310px; margin-top: 30px; border-radius: 20px;}
#delivery .del-process-graph h5{color: #fff;  margin: 20px 0;}
#delivery .del-process-graph h5+h5{color: #da365b; margin-top: 10px;}





@media all and (max-width: 992px){
	#banner_box .media{margin-top: 20px; }
  #banner_box h1{margin-top: 0;}
  #banner_box .banner-btn {margin: 35px 0 25px;}
  #banner_box figure img{width: 220px;}
  #banner_box  .banner-android{width: 280px; right: 5px;}
  #banner_box  .banner-brush{right:-15px; width: 95px;}

  .feature-screens .circle-bg{width: 313px; height: 313px; box-shadow: 0 0 0 20px rgb(55, 27, 39) inset}
  .feature-screens .circle-bg::after{width: 270px; height: 270px;}
  .feather .down-feather{left: -30px;}
  .feather .feather-up{right: -50px;}

  .contact-us{margin: -70px 0 0px;}
  .bullet{width: 100px; height: 50px; right: 0; top: auto; bottom: -55px;}
  .bullet li{display: inline-block;}
  .feature-box{margin-top: 50px;}

  .feature-screens::after{width: 320px; background-size: contain;}
	#delivery{padding-top: 0;}
	.del-process-graph{margin-top: 0; min-height: 230px;}
	#contact{padding: 15px 0 25px;}

}
@media all and (max-width: 767px){
	#banner_box{padding-bottom: 20px;}
	#screenshot::after{width: 215px; height: 215px;}
  #screenshot::before{width: 170px; height: 170px;}
  .contact-us{padding: 10px 15px 30px;}
  #contact .pull-right{float: none !important;}
  #tech li {margin: 5px 0;}
	.dg-wrapper{width: 285px; height: 485px;}
	.dg-wrapper div{width: 219px; padding: 39px 0 0;}
	.dg-container nav div{margin: 5px 40px 10px;}
}