.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/28062756/acs-banner-bg.jpg) repeat center top; position: relative;padding-bottom: 45px;}
#banner_box h1{margin-top: 65px;}
#banner_box h5{color: #28a5f4;}
#banner_box .banner-btn{margin: 35px 0 15px;}
#banner_box .banner-btn .learn_more{color: #3b3635; background: #fff;}
#banner_box .banner-btn .learn_more:before{background: #bdbcbc;}
#banner_box .banner-btn .contact_us{background: #24bc70; color: #fff;}
#banner_box .banner-btn .contact_us:before{background: #13a75d;}
#banner_box .media{margin-top: 20px;}
#banner_box .media .f-icon{border:1px solid #169fee; width: 40px; height: 40px; border-radius: 5px; text-align: center;}
#banner_box .media h5{color: #46b2f6; font-weight: 600;}
#banner_box .media p{color: #fff;}
.banner-screen{position: relative; z-index: 1;}
.banner-screen .globe,
.banner-screen .stone{position: absolute;top: 0; bottom: 0; right: 0; left: 0; margin: auto;z-index: -1}
.banner-screen .stone{left: -100%; right: -100%; top: -50px;}

#character{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/28062756/acs-banner-bg.jpg) repeat center top;}
#character h3{color: #fff; font-weight: 600;}
#character h3+h5{color: #24bc70; margin-bottom: 85px;}
#character .char-points{min-height: 355px;}
.char-points h5{color: #25c574; font-weight: 600; width: 100%;}
.char-points p{color: #fff; width: 100%;}
.char-points .f-box {
  align-content: center;
  background: #131b2d;
  display: flex;
  flex-wrap: wrap;
  min-height: 275px;
  padding: 0 15px;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.6s ease 0s;
  width: 100%;
}
.char-points .f-box::before {
  border-left: 35px solid rgba(0, 0, 0, 0);
  border-right: 35px solid rgba(0, 0, 0, 0);
  border-top: 35px solid #25c574;
  content: "";
  height: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s;
}
.char-points .f-box:after {
  background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/28062802/acs-char-border.png) no-repeat scroll 0 0/ cover ;
  bottom: -90px;
  content: "";
  height: 90px;
  left: 0;
  position: absolute;
  width: 100%;/*
  transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s;*/
}
.char-points .char-icon {
  background: #131b2d;
  border: 10px solid #25c574;
  border-radius: 100%;
  text-align: center;
  bottom: -90px;
  display: inline-block;
  height: 126px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 126px;
  z-index: 1;
  transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s;
}
.char-points .char-icon .fa{line-height: 106px; color: #25c574}
@media all and (min-width: 768px) {
.char-points .f-box:hover { background: #24bc70;box-shadow: 25px 0 25px -25px #199864 inset, -25px 0 25px -25px #199864 inset; top: 25px;}
.char-points .f-box:hover h5{color: #011936;}
.char-points .f-box:hover .fa{color: #0e1525;}
.char-points .f-box:hover:before{border-top-color: #0e1525;}
.char-points .f-box:hover .char-icon{border-color:#0e1525; background: #25c574}
.char-points .f-box:hover:after{background-position: 0 -98px;}
}


#screenshot{background: url(https://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/07/28062756/acs-banner-bg.jpg) repeat center top;padding: 40px 0 0;}
#screenshot h3{color: #fff;  font-weight: 600;}
#screenshot h5{color: #1db6e2;margin: 0 0 30px;}
.dg-wrapper{
  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{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 265px;
  height: 468px;
  right: 0; margin: auto; padding: 47px 0 0 ;
  
}
.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: 40px;
  height: 40px;
  border-radius: 100%; 
  margin: 5px 5px 10px;
  background:#1cabd5;
  position: absolute;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
}
.dg-container nav div .fa{line-height: 40px; color: #fff; font-weight: 600;}
.dg-container nav div.dg-prev{left: 100px; top: 0;bottom: 0; margin: auto;}
.dg-container nav div.dg-next{right: 100px; top: 0;bottom: 0; margin: auto;}
.dg-container nav div:hover{box-shadow:inset 0 0 0 40px #1685c5;}



#hallmark{ background: #0e1423; position: relative; z-index: 1; padding: 50px 0;}
#hallmark figure img{position: absolute; right: 0; left: 0; margin: auto;}
#hallmark figure .screenshot-stone{z-index: 2; top:-280px}
#hallmark .screenshot-wave{top: -180px; z-index: -1;width: 100%;}
#hallmark h3{color: #fff; font-weight: 600;margin-top: 0;}
#hallmark h3+h5{color: #1db6e2; margin-bottom: 45px;}
.hallmark-screen{position: relative; z-index: 1;}
.ios-hallmark{position: absolute; right: 60px; top: 0; bottom: 0; margin: auto; z-index: 1;}
.jupitar{position: absolute;left: -30px; bottom:50px;z-index: 1}
.rocket{position: absolute; right: 0; top: -125px;}
#hallmark .media h5{font-weight: 600; color: #1db6e2;}
#hallmark .media p{color: #fff;}
#hallmark .media .h-icon{display: block; position: relative; width: 64px; height: 64px; border-radius: 100%; background: #00beeb; text-align: center; transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s;z-index: 1;}
#hallmark .media .h-icon:after{position: absolute;content: ''; width: 0; height:0; border-radius: 100%; background: #24bc70; right: 0; left: 0; top: 0; bottom: 0; margin: auto;z-index: -1;transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transition: all 0.6s;}
#hallmark .media .h-icon .fa{line-height: 64px; color: #fff;}
#hallmark .media:hover .h-icon{box-shadow: 0 0 0 32px #1b7951 inset;}
#hallmark .media:hover .h-icon:after{width: 47px; height: 47px;}
#hallmark .media:hover .fa{animation-duration: 1s;animation-iteration-count: 1; animation-timing-function: ease-in-out;}
#hallmark .media:nth-child(1):hover .fa{animation-name: horz-wobble;}
#hallmark .media:nth-child(2):hover .fa{animation-name:spinAround;animation-iteration-count: infinite;animation-timing-function: linear;}
#hallmark .media:nth-child(3):hover .fa{animation-name:hvr-icon-wobble-vertical;}


#tech,
#delivery{background: #0e1423; position: relative;  padding-top: 30px;}
#tech h3,
#delivery h3{color: #fff; font-weight: 600;}
#tech h4,
#delivery h4{color: #1db6e2; position: relative; padding-bottom: 15px;}
#tech h4:after,
#delivery h4:after{position: absolute; content: ''; width: 70px; height: 3px; 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 /{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 .tech-icon::before, #delivery ul::before {bottom: 0;  top: auto;}
#tech li {margin: 0 15px;}
#delivery{padding-bottom: 40px;}
.del-process-graph{background: #101729; min-height: 310px; margin: 30px 0 10px; padding-bottom: 10px; border-radius: 20px;}
#delivery .del-process-graph h5{color: #fff;  margin: 30px 0 20px;}
#delivery .del-process-graph ~ div h5{color: #fff;}

@media all and (max-width: 1400px){
.char-points .f-box::after{height: 80px; bottom: -80px;}
.banner-screen .stone {left: -50%;right: -80%;}
 #screenshot{padding: 50px 0 30px;}
 .del-process-graph{min-height: 240px;}
 #delivery .del-process-graph h5{margin: 35px 0;}
  #tech li {margin: 0 5px; padding: 0;}
  #tech .tech-icon{margin-bottom: 0;}
}



@media all and (max-width: 992px){
  .banner-screen .stone {left: -15%;right: -15%;}
  .char-points .f-box::after{bottom: -60px; height: 60px;}
  #mainFeature .h1 {font-size: 24px;}
  .char-points .char-icon{width: 100px; height: 100px; border-width: 8px;}
  .char-points .char-icon .fa{line-height:100px;}
  #screenshot {padding: 10px 0 20px;}
	#delivery{padding-top: 0;}
  #tech li{margin: 5px;}
	.del-process-graph{margin-top: 0; min-height: 230px;}

}
@media all and (max-width: 767px){
  .char-points .f-box{position: relative; margin-bottom: 140px;}
  .char-points .char-icon{width: 80px; height: 80px; border-width: 5px;}
  .char-points .char-icon .fa{line-height: 80px;}
  .char-points .f-box::after {bottom: -70px;height: 70px;}
  .dg-container nav div {margin: 5px 2px 10px; position: static;}
  #tech li {margin: 5px 0;}
	.dg-wrapper{width: 285px; height: 485px;}
	.dg-wrapper div{width: 219px; padding: 39px 0 0;}
}