.wrap-box{overflow: hidden; background-color: #a8002c;}
h1,.h1,.h2,h2{letter-spacing: 0;}
#banner_box{background-color: #a8002c; position: relative;padding-bottom: 45px;}
#banner_box h1{margin-top: 65px;}
#banner_box .banner-text p{color:#fff;}
#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: #46b2f6; color: #fff;}
#banner_box .banner-btn .contact_us:before{background: #3997d2;}
#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-color: #a8002c;}
#character h3{color: #fff; font-weight: 600;}
#character h3+h5{color: #fff; margin-bottom: 85px;}
#character .char-points{min-height: 355px;}
.char-points h5{color: #fff; font-weight: 600; width: 100%;}
.char-points p{color: #fff; width: 100%;}
.char-points .f-box {align-content: center; background: #b3153f; 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 #a8002c; 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 { bottom: -90px; content: ""; height: 90px; left: 0; position: absolute; width: 100%;}
.char-points .char-icon { background: #b3153f; border: 10px solid #a8002c; 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: #0e1525}
@media all and (min-width: 768px) {
  .char-points .f-box:hover { background: #820526;box-shadow: 25px 0 25px -25px #820526 inset, -25px 0 25px -25px #820526 inset; top: 25px;}
  .char-points .f-box:hover h5{color: #fff;}
  .char-points .f-box:hover .fa{color: #fff;}
  .char-points .f-box:hover:before{border-top-color: #fff;}
  .char-points .f-box:hover .char-icon{border-color:#fff; background: #820526}
  .char-points .f-box:hover:after{background-position: 0 -98px;}
}

#screenshot{background-color:#a8002c ; padding: 40px 0 0;}
#screenshot h3{color: #fff;  font-weight: 600;}
#screenshot h5{color: #fff;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: 90px; top: 0;bottom: 0; margin: auto;}
.dg-container nav div.dg-next{right: 90px; top: 0;bottom: 0; margin: auto;}
.dg-container nav div:hover{box-shadow:inset 0 0 0 40px #1685c5;}
#hallmark{ background: #a8002c; 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: #fff; 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: #fff;}
#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: #a8002c; position: relative;  padding-top: 30px;}
#tech h3,
#delivery h3{color: #fff; 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: 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: #b3153f; 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){
  #banner_box h1{margin-top: 25px;}
  .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;}
}