@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width: 100%;
}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;

*/

.section-1 {
    background-color: #424a56;
    position: relative;
	z-index: 1;
    overflow: hidden;
	background: url(/img/services/hero-services.jpg) no-repeat left bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.section-1 .section-heading {
	padding: 50% 0% 60% 0%;
	color: #FFFFFF;
	text-align: center;
	
	-webkit-transition: padding 400ms ease-in-out;
	transition: padding 400ms ease-in-out;
}
.section-1 .section-heading h1, .section-1 .section-heading p {
	margin: 0px;
	text-transform: uppercase;
}
.section-1 .section-heading h1 {
	font-size: 50px;
	line-height: 55px;
	padding-bottom: 15px;
}
.section-1 .section-heading p {
    font-size: 25px;
    line-height: 35px;
}
.section-1 .hero-bg {
    background: url(/img/services/hero-services-16.svg) no-repeat;
    background-size: 600px;
    background-position: center 50px;
	height: 275px;
	position: absolute;
	max-width: 800px;
	margin: auto;
	left: 0px;
	right: 0px;
	width: 100%;
	bottom: 0%;
	
	-webkit-transition: height 400ms ease-in-out;
	transition: height 400ms ease-in-out;
}
.section-2 {
    background-color: #FFFFFF;
    padding: 50px 0px 50px 0px;
	margin: auto;
    display: table;
    width: 100%;
    max-width: 1300px;
	position: relative;
	z-index: 2;
}
.section-2 .section-heading {
	width: 98%;
	margin: 0px 0px 50px auto;
}
.section-2 h1 {
	font-size: 40px;
	line-height: 45px;
	margin-bottom: 0px;
}
.section-2 .section-heading h1 {
	color: #323232;
}
.section-2 .section-container {
    width: 88%;
    margin-right: auto;
    position: relative;
    max-width: 630px;
}
#laptop {
    width: 100%;
    height: 400px;
    background: url(/img/services/macbook-pro.jpg) no-repeat left bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: 100%;
}
#mobile {
    width: 100%;
    position: absolute;
    height: 290px;
    background: url(/img/services/iphone6.png) no-repeat right bottom;
    right: 0px;
    background-position: 20%;
    background-size: 140px;
    bottom: 0px;
    z-index: 1;
}
.services-column {
    float: left;
    width: 100%;
}
.service-info .icons {
    display: table;
    width: 100%;
    padding: 30px 0px 18px 0px;  
}
.service-details {
    float: left;
}
.icons-column {
    width: 25%;
}
.service-info-container {
    width: 95%;
    margin: auto;
	padding: 50px 0px 50px 0px;
}
.icons-column .icon-buffer {
    width: 95%;
    max-width: 80px;
}
.service-info-column {
    width: 75%;
}
.section-2 .service-info-column h1, .section-2 .service-info-column p {
    margin: 0px;
}
.section-2 .service-info-column h1 {
	color: #4390EE;
}
.section-2 .service-info-column p {
	color: #323232;
}
.services-wrapper img {
    width: 90%;
    background-size: contain;
    border: 2px solid #323232;
    border-radius: 100px;
    padding: 5px;
	opacity: .85;
}

@media only screen and (min-width: 375px) {
	
.section-1 .hero-bg {
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

}

@media only screen and (min-width: 468px) {

.section-1 .section-heading {
    padding: 270px 0px 250px 0px;
}
.section-1 .hero-bg {
	height: 345px;
}
	
}

@media only screen and (min-width: 650px) {

.icons-column .icon-buffer {
	margin: auto;
}
	
}

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

.section-1 .section-heading {
    padding: 225px 0px 300px 0px;
}
.section-1 .hero-bg {
	height: 375px;
}
.section-2 .section-container {
    width: 50%;
}
.section-2 .service-info {
    width: 50%;
}
.section-2 .service-info-container {
	padding-top: 0px;
    width: 85%;
    margin: 0px 0px 0px auto;
	padding-right: 10px;
}

}