#hero {
	background: #000 url(../images/development2.jpg) no-repeat center;
	min-height: 450px;
	height: 450px;
}

#hero-slider {
	margin: 60px 0 54px;
}

/* #hero-slider .slides .flex-caption {
	margin: 0 40% 0 30px;
} */

#hero-slider .slides .flex-caption h1,
#hero-slider .slides .flex-caption h2 {
	font: 40px/1.3 "molot-regular", sans-serif !important;
}

#hero-slider .slides .flex-caption h3 {
	font: 18px/1.8 "russia", sans-serif;
}

#services a.more {
	float: right;
	margin-top: 10px;
	margin-bottom: 20px;
	font: 16px/45px "molot-regular", sans-serif;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-decoration: none;
	display: block;
	height: 45px;
	width: 160px;
	border-radius: 3px;
	background: #5a3221;#823D1E;#5E66A3;#D3321B;#e64e04;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	-moz-transition: all 0.4s ease-on-out;
	-o-transition: all 0.4s ease-on-out;
	-webkit-transition: all 0.4s ease-on-out;
	-ms-transition: all 0.4s ease-on-out;
	transition: all 0.4s ease-on-out;
}

#services a.more:hover {
	background: #edc128;
	color: #000000;
}

#services a.more i {
	margin-left: 6px;
	position: relative;
	right: -5px;
}

/* #portfolio {
	border-bottom: 0px solid #edc128;  
} */

.service-list .bgrid {
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-radius: 5px;
}

.service-list .bgrid:nth-child(odd) {
	background: rgba(0,0,0, 0.04);
}

#portfolio.bgColor {
	background-color: #151212;  
}

@media only screen and (max-width:1024px) {
	
	#hero {
		min-height: 500px;
		height: 500px;
		background-position: bottom;
	}
	
}

@media only screen and (max-width:768px) {
	
	#hero {
		min-height: 500px;
		height: 500px;
		background-position: bottom;
		background-position: 60% 100%;
	}

}

@media only screen and (max-width:600px) {
	
	#hero {
		min-height: 670px;
		height: 670px;
		background-position: 63% 100%;
		background-size: cover;
	}
	.backgr {
		background-color: rgba(0,0,0,0.6);
	}

}

@media only screen and (max-width:480px) {
	

}

@media only screen and (max-width:400px) {
	

}

@media only screen and (max-width:321px) {
	
	#hero-slider .slides .flex-caption h1 {
		font: 36px/1.3 "molot-regular", sans-serif !important;
	}
}

#portfolio .dev_serv {
	padding-top: 20px;
	padding-bottom: 30px;
	margin-bottom: 70px;
	border-radius: 5px;
	color:white;
	text-align: center;
	background-color: rgba(169,76,66, 0.5);
}

#portfolio .dev_serv.mobile_apps {
	background-color: rgba(175,85,148, 0.5);
}
#portfolio .dev_serv.websites {
	background-color: rgba(95,69,95, 0.8);
}

#portfolio .dev_serv h1,
#portfolio .dev_serv h2 {
	margin-bottom: 0;
}
#portfolio .dev_serv span {
	color: rgba(255,255,255,0.5);
}
#portfolio .dev_serv h1 ~ span,
#portfolio .dev_serv h2 ~ span {
	margin-top: -20px;
}
#portfolio .dev_serv p {
	width: 100%;
	color: white;
	margin-bottom: 0;
}

#portfolio .dev_serv .price {
	background-color: rgba(0,0,0,0.5);
}

#portfolio .dev_serv .dev_serv_p {
	width: 70%;
	margin: 0 auto;
	padding-top: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(0,0,0,0.3);
}

#portfolio .dev_serv .dev_serv_p a {
	color: #fff;
}
#portfolio .dev_serv .dev_serv_p a:hover,
#portfolio .dev_serv .dev_serv_p a:focus,
#portfolio .dev_serv .dev_serv_p a.selected {
	color: #edc128;
}

@media only screen and (max-width:768px) {

	#portfolio .dev_serv {
		margin-bottom: 10px;
	}

}