.wrapper_box{overflow: hidden;}
#banner_box{background: url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104358/was_banner_bg.jpg)no-repeat center bottom/ cover; position:relative; min-height: 700px; margin-bottom: 30px;}
#banner_box .container{position: static;}
#banner_box h5{color: #fff; margin: 20px 0 90px;}
#banner_box figure{position: absolute; bottom: -31px; left: 0; right: 0;}

.smart-art img{position: absolute;bottom: -10px; margin: auto;}
img.left-block{left:46.01%;}
img.right-block{right:46.01%;}
h1{letter-spacing: 0; font-weight: 600;}
#attractive_feature{padding: 30px 0;}
#attractive_feature h1{color: #3145b3;}
#attractive_feature h5{color:#7081d8; font-weight: 600; margin-bottom: 30px;}
#attractive_feature p{color: #4f5050;}

#creative_points{padding: 20px 0;}
#creative_points h1{color: #e72222;}
#creative_points h5{color: #ee5353; font-weight: 600;}
.creative-screen {margin-top: 35px;}
.creative-media-box{margin-top: 70px;}
.creative-media-box h5{color: #e94141; font-weight: 600;}
.creative-media-box .media{margin-bottom: 30px;}
.creative-media-box .media-body{color: #4f5050; font-size: 18px;}
.creative-media-box .media span{width: 82px; height: 82px; border-radius: 100%; border:2px solid #e94141; display: block; text-align:center; position: relative;}
.creative-media-box .media span>*{transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s;}
.creative-media-box .media span .fa{line-height: 82px; color: #4f5050; }
.creative-media-box .media:hover span{background: #e94141;}
.creative-media-box .media:hover span .fa{color: #fff;}

#process{background: #1e1c3a; padding: 30px 0 60px; position: relative; z-index: 1}
#process:after{position: absolute; content: ''; background: url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104431/was_process_bar.png) no-repeat center center/contain; width: 100%; height: 410px; left: 0; bottom: 45px; margin: auto; z-index: -1}
#process h5{color: #fff;}
#process .process-list{ margin-top: 70px;}
#process .process-list li{width: calc(100%/6); margin: 0 10px;}
#process .process-list h5{color: #e94141;}
#process .process-list p{color: #fff;}
#process .process-list span{width: 183px; height: 182px;display:inline-block; text-align: center; position: relative; z-index: 1;}
#process .process-list span:after{position: absolute; content: ''; width: 183px; height: 182px; background: url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104433/was_process_bg.png) no-repeat; left: -10px; top:-10px; z-index: -1; }
#process .process-list .fa{color: #fff; line-height: 182px;}
#process .process-list li span:after{transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s;}
#process .process-list li:nth-child(2) span:after,
#process .process-list li:nth-child(4) span:after{transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); top: 0;}

#process .process-list li:hover .fa{
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-name: hvr-icon-wobble-vertical;
	animation-timing-function: ease-in-out;
}
/*#process .process-list li:nth-child(1):hover span:after{transform: rotate(-45deg); top: 0;}
#process .process-list li:nth-child(2):hover span:after{transform: rotate(45deg); top: -10px; left: 0;}
#process .process-list li:nth-child(3):hover span:after{transform: rotate(-45deg); top: 0;}
#process .process-list li:nth-child(4):hover span:after{transform: rotate(45deg); top: -10px; left: 0}
#process .process-list li:nth-child(5):hover span:after{transform: rotate(-45deg); top: 0;}*/

#p_pages{padding: 100px 0; background: #fff;}

.right-media{ padding-left: 25px;}
.left-media{padding-right: 25px;}

.nexticon-wrap{position: relative; height: 43px; margin-bottom: 50px;}
.icon-next{width: 43px; height: 43px; border-radius: 100%;position: absolute; left: 0; right: 0; margin: auto; display:block;}

#p_pages h1{margin: 0;}
#p_pages h5{color: #1e1e1e; font-weight: 500; margin: 0;}
#p_pages p{color: #4f5050;margin: 25px 0 20px;}
#p_pages .media{margin-bottom:20px;}
#p_pages .media-body{color: #4f5050; font-size: 18px;}
#p_pages .media span{width: 50px; height: 50px; border:4px solid #edc17c; border-radius: 100%; text-align: center; display:block;}
#p_pages .media span .fa{line-height: 42px; }
#p_pages section{position: relative;z-index: 2;padding: 0 0 80px; }
#p_pages section:after{position: absolute; content: ''; width: 2px; height: 100%; background: #dfe3e6; top: 0; left: 0; right: 0; margin: auto; z-index: -1}


.circle-box{position: relative;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
.circle-box:after{position: absolute; content: ''; width: 6px; height: 6px; border-radius: 100%; background: #dfe3e6;}
.circle-box:hover:before{position: absolute; content: ''; width:12px; height:12px; border-radius: 100%; border:3px solid #6e4435;}

.right-media .circle-box:after{ left: -28px; top: 5px;}
.right-media .circle-box:before{left: -31px; top:2px;}
.left-media .circle-box:after{ right: -28px; top: 5px;}
.left-media .circle-box:before{right: -31px; top:2px;}
.page-screen-right,
.page-screen-left{position: absolute; top: 0; bottom: 0; margin: auto; height: 500px;}
.page-screen-right{right: 0;}
.page-screen-left{left: 0;}

#j2e .circle-box:hover:before{border-color:#6e4435;}
#j2e .icon-next{background:#6e4435 url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104411/was_java_icon.png) no-repeat center center;}
#j2e h1{color: #9b604b; }
#j2e .j2e-screen{position: absolute; left: -200px; width: 750px; height: 500px; bottom: 0; top: 0; margin: auto;}
#j2e .media span .fa{color:#edc17c;}

.btn_box{margin: 35px 0 0;}
.btn_box .btn {
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  height: 43px;
  line-height: 39px;
  margin-right: 2%;
  padding: 0;
  transition: all 0.6s ease 0s;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  width: 143px;
  color: #fff;
  border: 2px solid #fff;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}
.btn_box .btn:after{
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
  position: absolute;
  content: '';
  z-index: -1;
  transition:all 0.4s ease 0s; 
  -webkit-transition:all 0.4s ease 0s;
  -moz-transition:all 0.4s ease 0s;
  -ms-transition:all 0.4s ease 0s;
}
.btn_box .btn:hover:after{width: 100%;}

#j2e .btn_box .btn{color: #6e4435; border-color: #6e4435;}
#j2e .btn_box .btn:hover:after{background: #6e4435;}
#j2e .btn_box .btn:hover{color: #fff;}


#net .icon-next{background:#008bcc url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104422/was_net_icon.png) no-repeat center center;}
#net .circle-box:hover:before{border-color:#008bcc;}
#net h1{color: #008bcc}
#net .media span{border-color: #008bcc}
#net .media span .fa{color:#008bcc;}
#net .btn_box .btn{color: #008bcc; border-color: #008bcc;}
#net .btn_box .btn:hover:after{background: #008bcc;}
#net .btn_box .btn:hover{color: #fff;}

#ruby_rail .icon-next{background:#e53935 url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104435/was_ruby_icon.png) no-repeat center center;}
#ruby_rail .circle-box:hover:before{border-color:#e53935;}
#ruby_rail h1{color: #e53935}
#ruby_rail .media span{border-color: #e53935}
#ruby_rail .media span .fa{color:#e53935;}
#ruby_rail .btn_box .btn{color: #e53935; border-color: #e53935;}
#ruby_rail .btn_box .btn:hover:after{background: #e53935;}
#ruby_rail .btn_box .btn:hover{color: #fff;}

#scala .icon-next{background:#22b9c4 url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104439/was_scala_icon.png) no-repeat center center;}
#scala .circle-box:hover:before{border-color:#22b9c4;}
#scala h1{color: #22b9c4}
#scala .media span{border-color: #22b9c4}
#scala .media span .fa{color:#22b9c4;}
#scala .btn_box .btn{color: #22b9c4; border-color: #22b9c4;}
#scala .btn_box .btn:hover:after{background: #22b9c4;}
#scala .btn_box .btn:hover{color: #fff;}

#php .icon-next{background:url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104427/was_php_icon.jpg) no-repeat center center;}
#php .circle-box:hover:before{border-color:#3e5fad;}
#php h1{color: #3e5fad}
#php .media span{border-color: #3e5fad}
#php .media span .fa{color:#3e5fad;}
#php .btn_box .btn{color: #3e5fad; border-color: #3e5fad;}
#php .btn_box .btn:hover:after{background: #3e5fad;}
#php .btn_box .btn:hover{color: #fff;}

#mean .icon-next{background: #3891a5 url(http://algoworksupload.s3.amazonaws.com/new-algoworks/wp-content/uploads/2016/03/18104417/was_mean_icon.png) no-repeat center center;}
#mean .circle-box:hover:before{border-color:#3891a5;}
#mean h1{color: #3891a5}
#mean .media span{border-color: #3891a5}
#mean .media span .fa{color:#3891a5;}
#mean .btn_box .btn{color: #3891a5; border-color: #3891a5;}
#mean .btn_box .btn:hover:after{background: #3891a5;}
#mean .btn_box .btn:hover{color: #fff;}

@media all and (max-width:1400px){
	#j2e .j2e-screen{width: 700px;}
}
@media all and (max-width:1279px){
	#process .process-list span::after{width: 150px; height: 150px; background-size: cover;}
	#process .process-list span{width: 150px; height: 150px;}
	#process .process-list span .fa{line-height: 150px;}
}
@media all and (max-width:992px){
	.creative-screen{text-align: center;}
	.creative-screen img{display: inline-block;}
	#process .process-list li{width: calc(100%/3); margin-bottom: 30px;}
	#process::after{transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); bottom: 0; top: 0; margin: auto;}
	.page-screen-right,
	.page-screen-left,
	#j2e .j2e-screen{position: static; text-align: center; height: auto; margin-top: 30px;}
	.page-screen-right img,
	.page-screen-left img{display: inline-block;}
	.circle-box::after,
	.circle-box::before{display: none;}
	.left-media,
	.right-media{background: #fff;}
	.fa-5x {font-size: 4em;}
}
@media all and (max-width:767px){
	#banner_box{min-height: inherit;}
	#banner_box figure{position: static;}
	.smart-art{display: none;}
	.creative-media-box .media span{width: 50px; height: 50px;}
	.creative-media-box .media span .fa{line-height: 50px;}
	.fa-3x {font-size: 2em;}
	#process::after{display: none;}
	#process .process-list li{width: 100%; margin: 0 0 30px;}
	#j2e .j2e-screen{width: auto;}
	.right-media{padding-left:inherit;}
	.left-media {padding-right:inherit;}
}