.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/01113528/phone_banner_bg.jpg) no-repeat center top/cover; position: relative; }
.banner-screen{z-index: 2; position: relative;}
.mobile-banner .vertical-phone{position: absolute; right: 0; left: 0; bottom:-100px; margin:auto; z-index: 1}
.mobile-banner .pyramid{position: absolute; right: -25px;  bottom:-155px; margin:auto; z-index: 2}
#banner_box h1{color: #24b4e9; font-weight: 600;}
#banner_box h5{color: #fff;}
#banner_box .banner-btn{margin: 30px 0 40px;}
#banner_box .banner-btn .learn_more{color: #1d1c1c;}
#banner_box .banner-btn .learn_more:before{background: #e9e9e9;}
#banner_box .banner-btn .contact_us{background: #24b4e9; color: #fff;}
#banner_box .banner-btn .contact_us:before{background: #149acb;}
#banner_box .media {margin-top: 20px}
#banner_box .media h5{color: #fff; font-weight: 600;}
#banner_box .media .fa{color: #fff;}
#banner_box .media p{color: #24b4e9;}

.pulseParent,
.pulseParent2,
.pulseParent3,
.pulseParent4 {
  bottom: 0;
  float: left;
  height: 100px;
  left: -136px;
  margin: auto;
  position: absolute;
  right: 0;
  top: -204px;
  width: 100px;
}
.pulseParent2{right: auto; left: 200px;}
.pulseParent3{right: auto; left: 225px; top: auto; bottom: 200px;}
.pulseParent4{top: auto; bottom: 155px;}
.pulse {
  background-color: #14a6de;
  border-radius: 100%;
  bottom: 0;
  box-shadow: 0 0 0 10px #11618e;
  height: 11px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  z-index: 1;
}
.pulse:after{position: absolute;content: ''; width: 5px; height: 5px; background: #fff; border-radius: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.dot { border: 20px solid rgb(15,60,99);  background: transparent; -webkit-border-radius: 50%;  -moz-border-radius: 50%;  border-radius: 50%;  height: 100px;  width: 100px; 
 -webkit-animation: pulse 3s ease-out;  -moz-animation: pulse 3s ease-out;  animation: pulse 3s ease-out; -webkit-animation-iteration-count: infinite;  
 -moz-animation-iteration-count: infinite;  animation-iteration-count: infinite;  position: absolute;top:0;  left:0; margin:auto;  z-index: 1;  opacity: 0;}
.pulseParent3 .pulse,
.pulseParent4 .pulse{background: #d66e7e; box-shadow: 0 0 0 10px #694762;}	
.pulseParent3 .dot{ border: 20px solid rgb(46,50,82); }
.pulseParent4 .dot { border: 20px solid rgb(46,50,82); }
.pulseParent2 .dot,
.pulseParent4 .dot{-webkit-animation: pulse 2s ease-out;  -moz-animation: pulse 2s ease-out;  animation: pulse 2s ease-out;-webkit-animation-iteration-count: infinite;  
 -moz-animation-iteration-count: infinite;  animation-iteration-count: infinite; }


@-moz-keyframes pulse {
  0% { -moz-transform: scale(0); opacity: 0.0;} 
  25% { -moz-transform: scale(0); opacity: 0.2;} 
  50% { -moz-transform: scale(0.1); opacity: 0.5;} 
  75% { -moz-transform: scale(0.5); opacity: 0.8;} 
  100% { -moz-transform: scale(1); opacity: 0.0;}
}
@-webkit-keyframes pulse { 
  0% { -webkit-transform: scale(0); opacity: 0.0;} 
  25% { -webkit-transform: scale(0); opacity: 0.2;} 
  50% { -webkit-transform: scale(0.1); opacity: 0.5;} 
  75% { -webkit-transform: scale(0.5); opacity: 0.8;} 
  100% { -webkit-transform: scale(1); opacity: 0.0;}
}
@keyframes pulse { 
  0% { transform: scale(0); opacity: 0.0;} 
  25% { transform: scale(0); opacity: 0.2;} 
  50% { transform: scale(0.1); opacity: 0.5;} 
  75% { transform: scale(0.5); opacity: 0.8;} 
  100% { transform: scale(1); opacity: 0.0;}
}



#keyFeature {background:#fff; padding-bottom: 20px; position: relative; z-index: 1;}
#keyFeature:after{position: absolute; content: ''; width: 150%; height: 100%; background: #fff; top: -35px; margin: 0 -50px; transform: rotate(5deg); z-index: -1;}
#keyFeature h3 {color: #112745; font-weight: 600;}
#keyFeature h3+h5{color: #58595a; position: relative; padding-bottom: 15px; margin-bottom: 30px;}
#keyFeature h3+h5:after{position: absolute;content: ''; width: 60px; height: 5px; background: #112745; left: 0; bottom: 0;}
#keyFeature .media h5{color: #172f52; font-weight: 600;}
#keyFeature .media p{color: #6e6a6a;}
#keyFeature .media,
#keyFeature .media-left,
#moreFeature .media-left,
#moreFeature .media{overflow: visible;}
#keyFeature .media  .f-icon{width: 45px; height: 45px; border-radius: 100%; background: #0d2649; text-align: center; position: relative;}
#keyFeature .media .f-icon:after,
#moreFeature .media .f-icon:after {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
   border-top: 32px solid #0d2649;
  bottom: 0px;
  content: "";
  height: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 15px;
  z-index: -1;
}
#keyFeature .media .fa{color: #4ac1ef; line-height: 45px;}
#keyFeature .media h5,
#keyFeature .media .f-icon,
#keyFeature .media .f-icon:after,
#keyFeature .media .fa,
#moreFeature .media h5,
#moreFeature .media .f-icon,
#moreFeature .media .fa,
#moreFeature .media .f-icon:after{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 h5{color: #34bcee;}
#keyFeature .media:hover .f-icon{background: #34bcee;}
#keyFeature .media:hover .fa{color: #0d2649;}
#keyFeature .media:hover .f-icon:after,
#moreFeature .media:hover .f-icon:after{bottom: -18px;}

.feature-screens{position: relative;}
.screen02{position: absolute; left: 100px; top: 0; bottom: 0; margin: auto;}
 
#moreFeature{background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01113547/phone_more_feature_bg.jpg)no-repeat center bottom/cover; position: relative;z-index: 1; padding-bottom: 170px}
#moreFeature h3{color: #00bdf0; font-weight: 600; margin-bottom: 0px;}
#moreFeature h3+h5{color: #c8cfd9; margin-bottom: 30px;}
#moreFeature .media h5{color: #00bdf0;}
#moreFeature .media p{color: #d9d9df;}
#moreFeature .f-icon{width: 40px; height: 40px; border-radius: 100%; background: #00bdf0;  text-align: center; position: relative; transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s;}
#moreFeature .f-icon .fa{line-height: 40px; color: #082146;}
#moreFeature .media:first-child{margin-top: 50px;}
#moreFeature .media-center{margin: 50px 0;}
#moreFeature .media-form{margin: 104px 0 70px;}
#moreFeature .media-form form{ position: relative; }
#moreFeature .media-form input[type="text"]{width: 100%; background: none; padding: 10px 130px 10px 20px; border-radius: 50px; border: 2px solid #fff; color: #dedfe2;}
#moreFeature .media-form input[type="submit"]{width: 120px; border-radius: 50px; background: #00bdf0; color: #061934; height: 40px; border: none; font-weight: 600; font-size: 16px; line-height: 40px;
	transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s;
	position: absolute; right: 2px; top: 0; bottom: 0; margin: auto;
}
#moreFeature .media-form input[type="submit"]:hover{background: #f4d214;}
.media-box{position: relative;}
.media-box:after{position: absolute;content: ''; background:url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01113552/phone_more_feature_shadow_bg.png)no-repeat center center/100% 100%; top: 0; bottom: 0; right: 0;left: 0;  margin: auto; width: 100%; height: 130px; z-index: -1;}

#moreFeature .h1{font-weight: normal; margin: 0;}
#moreFeature .h1 span{color: #00bdf0;}

#moreFeature .media .f-icon:after{border-top-color: #f4d214;border-left: 16px solid transparent;  border-right: 16px solid transparent;}
#moreFeature .media:hover .f-icon{box-shadow:inset 0 0 0 4px #f4d214, 0 0 2px 0 #f4d214; background: #061d3c; }
#moreFeature .media:hover .fa{color: #fff;}
#moreFeature .media:hover h5{color: #f8d722;}
#moreFeature .media:hover .f-icon:after{bottom: -22px;}

#screenshot{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01113614/phone_screenshot_bg.jpg) no-repeat center top/cover;z-index: 2; position: relative;}
#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: 343px;
  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/01113618/phone_screenshot_screen.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%; background: #23b8bf;
  margin: 5px 55px 10px;
  position: relative;
  box-shadow: 0 0 0 6px #061e41 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: #23b8bf;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 #061e41;
  left: -70px; top: 1px;
}
.dg-container nav div.dg-prev:after{
	border-bottom: 27px solid rgba(0, 0, 0, 0);
border-left: 60px solid rgb(6, 30, 65);
border-top: 27px solid rgba(0, 0, 0, 0);
right: -70px; top: 1px;
}


#tech,
#delivery{background: #061e41; position: relative; z-index: 2; padding-top: 30px;}
#tech h3,
#delivery h3{color: #24b4e9; 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: 5px; background: #fff; bottom: 0; right: 0; left: 0; margin: auto;}
#tech .tech-icon {margin: 35px 0;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%;
}
#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: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/01113537/phone_del_process.png)no-repeat center top /contain; min-height: 310px; margin-top: 30px;}
#delivery .del-process-graph h5{color: #fff;  margin-top: 20px;}
#delivery .del-process-graph h5+h5{color: #01d3e2; margin-top: 10px;}

#contact {background: #24b4e9;  padding: 35px 0 45px;}
#contact h3{color: #fff; font-weight: 600;}
#contact p{color: #292a2f;}
#contact .btn{margin-top: 20px;}
#contact .btn{color: #302f30; background: #fff;}
#contact .btn:before{background: #d6d6d6;}

@media all and (max-width: 1400px){
	#moreFeature .media-center {margin: 80px 0;}
	#moreFeature .media-form input[type="submit"]{width: 100px;}
	#moreFeature .media-form input[type="text"]{padding-right: 110px;}
	.media-box::after{height: 100px; top: -10px;}
	#moreFeature{padding-bottom: 120px;}
	#screenshot h2 {margin: -50px 0 0;}
}

@media all and (max-width: 992px){
	.screen02{width: 210px; left: 0;}
	.screen02+img{width: 300px;}
	#moreFeature .media-center {margin: 50px 0;}
	#moreFeature .media-form {margin: 60px 0 50px;}
	.media-box::after {height: 85px;top: 10px;}
	#moreFeature .media:first-child{margin-top: 0;}
	#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;}
	.feature-screens{text-align: center;}
	.feature-screens img{float: none !important;}
	#keyFeature::after,
	.media-box::after{display: none;}
	.del-process-graph{background-position: center bottom;}
	.dg-wrapper{width: 285px; height: 485px;}
	.dg-wrapper div{width: 219px; padding: 39px 0 0;}
	.dg-container nav div{margin: 5px 40px 10px;}
}