@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
/* =================================================================== 
   @imports go above
   =================================================================== */

* {
	box-sizing: border-box;
}
::-moz-selection { background: #e2e2e2; color: #fff;}
::selection { background: #e2e2e2; color: #fff;}

/* =================================================================== 
   Clearfix
   =================================================================== */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}

/* =================================================================== 
   General Styles
   =================================================================== */
html {
	font-size: 18px;
}
body {
	background: #f2f2f2;
	font: 1rem/1.66666666666667rem 'Lato', Helvetica, Arial, sans-serif;
	color: #666d89;
}
	h1, h2, h3 { font-weight: 700; line-height: 1rem;}
	h2 { font-size: 1.66666666666667rem; }
	h3 { font-size: 1rem; }
	h4 { font-weight: 100; font-size: 1rem; line-height: 30px; }
	p { font-weight: 400; font-size: 0.66666666666667rem; line-height: 1.2rem; }
	a { text-decoration: none; color: #666d89;}
		nav > ul > li { display: inline; }
			nav > ul > li > a {	font-size: 0.66666666666667rem; }
	img, embed, object, video { width: 100%; }
	
	.container {
		max-width: 53.125%;
		margin: 0 auto;
		padding: 40px 3.43137254902% 20px;
	}

/* =================================================================== 
   Begin Header Section Styles
   =================================================================== */
header.top-header {
	background: #2d303a;
	border-bottom: 6px solid #323746;
	min-height: 96px;
	max-width: 100%;
	color: #fff;

}
	header.top-header nav {
			float: right;
			position: relative;
			top: -5px;
		}
		header.top-header nav > ul > li:before {
			content: '\2027';
			position: relative;
			top: 2px;
			margin: 0 0.83333333333333rem;
			color: #494e62;
		}
		header.top-header nav > ul > li:first-child:before {
			content: '';
			margin: 0;
		}
			header.top-header nav > ul > li > a {
				color: #fff;
				text-transform: uppercase;
				line-height: 0.5rem;
				transition: all 0.25s ease;
			}
				header.top-header nav > ul > li > a:hover {
					color: #f06c64;
				}
				header.top-header nav > ul > li > a.active {
					color: #f06c64;
				}
	.logo-section {
		float: left;
		text-align: center;
	}
		.logo-section .logo {
			display: inline-block;
			height: 20px;
			background: url(../img/logo.png) center center no-repeat;
			background-size: 100%;
			text-indent: -9999rem;
		}

/* =================================================================== 
   Begin Main Section Styles
   =================================================================== */
main {}
	section{ max-width: 100%; }
		section h2 {
			margin-bottom: 33px;
		}
		section h3 {
			margin-bottom: 14px;
		}
		section .container {
			padding: 66px 2.084% 71px 2.084%;
		}

	/* =================================================================== 
	   Begin Top Slider Section
	   =================================================================== */
		section.top-slider-section {
			max-width: 100%;
			background: #f06c64;
			border-bottom: 6px solid #ea676b;
		}
			section .top-slider {
				max-width: 100%;
			}
				.top-slider img {
					max-width: 100%;
				}

	/* =================================================================== 
	   Begin Services Section
	   =================================================================== */
		section.services-section {
			background: #f2f2f2;
			border-bottom: 6px solid #fff;
		}
			.services-row {}
				.services-row ul {
					max-width: 100%;
					list-style: none;
				}
					.services-row ul > li {
						width: 33.332779255319%; /* calc(100% / 3) */
						display: inline;
						float: left;
						margin: 40px 0 0 0;
					}
						.services-row article {
							position: relative;
						}
							div.service-icon {
								display: inline-block;
								width: 59px;
								height: 59px;
								background: transparent url(../img/icons-sprite.png) top left no-repeat;
								background-size: 177px 118px;
								float: left;
							}
								.services-row li:nth-child(2) div.service-icon {
									background-position: -59px 0;
								}
								.services-row li:nth-child(3) div.service-icon {
									background-position: -118px 0;
								}
								.services-row li:nth-child(4) div.service-icon {
									background-position: 0 -59px;
								}
								.services-row li:nth-child(5) div.service-icon {
									background-position: -59px -59px;
								}
								.services-row li:nth-child(6) div.service-icon {
									background-position: -118px -59px;
								}
							div.service-info {
								display: inline-block;
								width: calc(100% - 79px);
								float: left;
								margin: 0 0 0 20px;
							}

	/* =================================================================== 
	   Begin Portfolio Section
	   =================================================================== */
		section.portfolio-section {
			background: #2d303a;
			border-bottom: 6px solid #323746;
		}
			.portfolio-row nav {
				margin: 20px 0 30px 0;
			}
			.portfolio-row nav > ul > li {
				margin: 0 1.063829787234% 0 0;
			}
				.portfolio-row nav > ul > li:last-child {
					margin-right: 0;
				}
				.portfolio-row nav > ul > li > a {
					line-height: 2em;
					transition: all 0.25s ease;
					border: 1px solid #666d89;
					border-radius: 6px;
					padding: 6px 10px;
				}
					.portfolio-row nav > ul > li > a:hover {
						color: #dedede;
						border-color: #dedede;
						cursor: pointer;
					}
					.portfolio-row nav > ul > li > a.active {
						color: #dedede;
						border-color: #dedede;
					}
			.portfolio-images {
				margin: 0;
			}
			.portfolio-images ul {
				max-width: 100%;
				list-style: none;
				font-size: 0; /* Necessary to remove inherent spacing from li in html */
			}
				.portfolio-images ul > li {
					float: left; /* Necessary to remove inherent spacing from li in html */
					width: 23.404255319149%; /* 220px */
					margin: 0 2.127659574468% 2.127659574468% 0; /* 20px */
					transition: all .25s ease;
				}
				.portfolio-images ul > li:hover {
					position: relative;
					z-index: 1;
					-webkit-transform: scale(1.5);
					        transform: scale(1.5);
				}
					.portfolio-images ul > li:nth-child(4n) {
						margin: 0;						
					}
				.dim {
					opacity: 0.1;
				}
				.portfolio-images ul > li.dim:hover {
					-webkit-transform: scale(1.0);
					        transform: scale(1.0);
				}
				.portfolio-images ul > li > img {
					vertical-align: middle;
				}

	/* =================================================================== 
	   Begin About Styles
	   =================================================================== */
		section.about-section {
			background: #f2f2f2;
			border-bottom: 6px solid #fff;
		}
			.about-row {
				margin: 40px 0 0 0;
			}
				.about-row ul.about-list {
					max-width: 100%;
					list-style: none;
					font-size: 0;
				}
					.about-row ul.about-list > li {
						float: left;
						width: 31.914893617021%; /* 300px */
						margin: 0 2.127659574468% 0 0; /* 20px */
					}
					.about-row ul.about-list > li:last-child {
						margin: 0;
					}
						.social-icons ul.social-list {
							margin: 30px 0 0 0;
							font-size: 0.88888888888889rem;
						}
							.social-icons ul.social-list > li {
								display: inline-block;
								float: left;
								margin: 0 6.666666666667% 0 0; /* 20px */
							}
								.social-icons ul.social-list > li:last-child {
									margin: 0;
								}
								.social-icons ul.social-list > li > a {
									display: block;
									text-align: center;
									width: 32px;
									height: 32px;
									border: 1px solid #666d89;
									border-radius: 50%;
									transition: all 0.25s ease;
								}
								.social-icons ul.social-list > li > a.facebook-icon:hover{
									color: #3b5998;
									border: 1px solid #3b5998;
									-webkit-transform: scale(1.25);
									        transform: scale(1.25);
								}
								.social-icons ul.social-list > li > a.google-icon:hover{
									color: #dd4b39;
									border: 1px solid #dd4b39;
									-webkit-transform: scale(1.25);
									        transform: scale(1.25);
								}
								.social-icons ul.social-list > li > a.twitter-icon:hover{
									color: #00aced;
									border: 1px solid #00aced;
									-webkit-transform: scale(1.25);
									        transform: scale(1.25);
								}
								.social-icons ul.social-list > li > a.linkedin-icon:hover{
									color: #007bb6;
									border: 1px solid #007bb6;
									-webkit-transform: scale(1.25);
									        transform: scale(1.25);
								}

	/* =================================================================== 
	   Begin Contact Section
	   =================================================================== */
		section.contact-section {
			max-width: 100%;
			background: #f06c64;
			border-bottom: 6px solid #ea676b;
			color: #f0d8d9;
		}
			.contact-row {
				margin: 40px 0 0 0;
			}
				.contact-form {
					width: calc((100% * (2/3)) - 2.127659574468%);
					display: inline-block;
					float: left;
					margin: 0 20px 0 0;
					font-weight: 400;
					font-size: 0.66666666666667rem;
					line-height: 2rem;
				}
					.contact-form input.input,
					.contact-form textarea.input {
						display: block;
						width: 100%;
						margin: 0 0 16px 0;
						padding: 13px 15px;
						background: #d6564f;
						border: 0;
						border-radius: 6px;
						line-height: normal;
						transition: all 0.35s ease;
					}
					.contact-form input.input:focus,
					.contact-form textarea.input:focus {
						outline: 0px;
						-webkit-transform: scale(1.025);
						        transform: scale(1.025);
						position: relative;
						z-index: 1;
					}

					/* =================================================================== 
					   Placeholder text vendor prefixes
					   =================================================================== */
						.contact-form .input::-webkit-input-placeholder { color: #f48c8f; font-weight: 400; }
						.contact-form .input::-moz-placeholder { color: #f48c8f; font-weight: 400; }
						.contact-form input.input:-moz-placeholder { color: #f48c8f; font-weight: 400; }
						.contact-form .input:-ms-input-placeholder { color: #f48c8f; font-weight: 400; }
					/* =================================================================== 
					   End placeholder text vendor prefixes
					   =================================================================== */

						.contact-form .input:last-child {
							margin: 0;
						}
					.contact-form input.input {
						height: 38px;
					}
					.contact-form textarea.input {
						height: 200px;
						resize: none;
					}
				.contact-sidebar {
					width: calc(100% * (1/3) - 2.127659574468%);
					display: inline-block;
					float: left;
				}
					.contact-sidebar ul {
						max-width: 100%;
						list-style: none;
					}
						.contact-sidebar ul > li > div {
							display: inline-block;
							width: 12px;
							margin: 0 3.409151440899% 0 0; /* 10px */
							text-align: center;
						}
						.contact-sidebar ul > li:nth-child(1) > div > i {
							position: relative;
							left: 2px;
						}
						.contact-sidebar ul > li:nth-child(2) > div > i {
							position: relative;
							left: 1px;
						}
						.contact-sidebar p {
							display: inline-block;
						}
	
	/* =================================================================== 
	   Begin Footer Section
	   =================================================================== */
		footer.bottom-footer {
			max-width: 100%;
			background: #2d303a;
			color: #666d89;
		}
			.bottom-footer .container {
				padding: 32px 1.8235%;
			}
				.bottom-footer .copyright {
					display: inline-block;
					width: 80%;
					float: left;
				}
				.bottom-footer .social-icons {
					display: inline-block;
					width: 20%;
					float: right;
				}
				.bottom-footer p {
					font-size: 0.66666666666667rem;
				}
				.bottom-footer .social-icons {
					display: inline;
					float: right;
				}
					.bottom-footer .social-icons ul.social-list {
						margin: 0;
					}

	/* =================================================================== 
	   Begin Responsive Styling
	   =================================================================== */

	/* Responsive Visibilty Classes */

	.visible-phone {
	    display: none !important;
	}

	.visible-tablet {
	    display: none !important;
	}

	.hidden-desktop {
	    display: none !important;
	}

	@media (max-width: 767px) {
	    .visible-phone {
	        display: inherit !important;
	    }

	    .hidden-phone {
	        display: none !important;
	    }

	    .hidden-desktop {
	        display: inherit !important;
	    }

	    .visible-desktop {
	        display: none !important;
	    }
	}

	@media (min-width: 768px) and (max-width: 1139px) {
	    .visible-tablet {
	        display: inherit !important;
	    }

	    .hidden-tablet {
	        display: none !important;
	    }

	    .hidden-desktop {
	        display: inherit !important;
	    }

	    .visible-desktop {
	        display: none !important ;
	    }
	}

	@media 	only screen and (-webkit-min-device-pixel-ratio: 1.5),
    		only screen and (-o-min-device-pixel-ratio: 3/2),
    		only screen and (min--moz-device-pixel-ratio: 1.5),
    		only screen and (min-device-pixel-ratio: 1.5) {
				div.service-icon {
					background: transparent url(../img/icons-sprite@2x.png) top left no-repeat;
					background-size: 177px 118px;
				}
    		}
	@media (min-width: 1280px) {
		.class {
			margin: 0;
		}
	}

	@media (min-width: 768px) and (max-width: 1139px) {
		html {
			font-size: 24px;
		}
		.portfolio-images ul > li > img,
		.contact-sidebar,
		.contact-form,
		.bottom-footer .copyright,
		.bottom-footer .social-icons {
			width: 100%;
		}
		.portfolio-images ul > li,
		.contact-form {
			margin: 0;
		}
		.contact-form,
		.contact-sidebar,
		.bottom-footer .social-icons {
			display: block;
		}
		.bottom-footer .copyright,
		.bottom-footer .social-icons {
			text-align: center;
		}
		h1, h2, h3 { font-weight: 700; line-height: 1em;}
		h3, h4 { font-size: 1rem; }
		h2 { font-size: 1.66666666666667rem; }
		h4 { font-weight: 400; line-height: 1.66666666666667rem; }
		p { font-weight: 400; font-size: 0.66666666666667rem; line-height: 1.2rem; }
		a { text-decoration: none; color: #666d89;}
		.container {
			max-width: 100%;
		}
		.portfolio-images ul > li {
			width: 25%;
		}
		.about-row ul.about-list > li {
			width: calc((100% - 40px) / 3);
			margin: 0 10px 0 0;
		}
		.services-row ul > li {
			width: 50%;
		}
		.social-icons ul.social-list > li > a {
			position: relative;
			height: 42px;
			width: 42px;
		}
		.social-icons ul.social-list > li > a > i {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			        transform: translate(-50%, -50%);
		}
		.contact-form input.input, .contact-form textarea.input {
			font-size: 0.66666666666667rem;
		}
		.contact-sidebar {
			margin: 40px 0 0 0;
		}
		.bottom-footer .copyright {
			margin: 0 0 30px 0;
		}
		.bottom-footer .social-icons {
			position: static;
		}
		.bottom-footer .social-icons ul > li {
			float: none;
		}
	}

	@media (max-width: 767px) {
		html {
			font-size: 24px;
		}
		header.top-header nav.top-nav ul > li,
		.services-row ul > li,
		.portfolio-row nav > ul > li,
		.portfolio-row nav > ul > li > a,
		.portfolio-images ul > li,
		.about-row ul.about-list > li,
		.contact-form,
		.contact-sidebar,
		.bottom-footer .social-icons {
			display: block;
			width: 100%;
		}
		.portfolio-images ul > li > img,
		.bottom-footer .copyright {
			width: 100%;
		}
		header.top-header nav.top-nav ul > li,
		header.top-header nav > ul > li:before,
		.portfolio-images ul > li,
		.about-row ul.about-list > li,
		.about-item:last-child .about-info,
		.contact-form,
		.bottom-footer .copyright {
			margin: 0;
		}
		.services-row ul > li,
		.contact-sidebar {
			margin: 40px 0 0 0;
		}
		header.top-header nav,
		.bottom-footer .copyright,
		.bottom-footer .social-icons {
			text-align: center;
		}
		header.top-header h1,
		header.top-header nav {
			position: static;
			float: none;
		}
		h1, h2, h3 { font-weight: 700; line-height: 1rem;}
		h2 { font-size: 1.66666666666667rem; }
		h3 { font-size: 1rem; }
		h4 { font-weight: 400; font-size: 1rem; line-height: 1.66666666666667rem; }
		p { font-weight: 400; font-size: 0.66666666666667rem; line-height: 1.2rem; }
		a { text-decoration: none; color: #666d89;}
		.container {
			max-width: 100%;
			padding: 40px 6.86274509804% 20px;
		}
		section .container {
			padding: 66px 6.252% 71px 6.252%;
		}
		.logo-section .logo {
			margin: 0 auto;
		}
		header.top-header nav {
			margin: 20px 0 0 0;
		}
		header.top-header nav > ul > li:before {
			content: '';
		}
		.services-row ul > li {
			float: left;
		}
		.portfolio-images ul > li {
			height: 100%;
		}
		.about-item .about-info {
			margin: 0 0 40px 0;
		}
		.social-icons ul.social-list > li > a {
			position: relative;
			height: 42px;
			width: 42px;
		}
		.social-icons ul.social-list > li > a > i {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			        transform: translate(-50%, -50%);
		}
		.contact-form input.input, .contact-form textarea.input {
			font-size: 0.66666666666667rem;
		}
		.bottom-footer .social-icons {
			position: static;
		}
		.bottom-footer .social-icons ul {
			display: -webkit-inline-flex;
			display: -ms-inline-flexbox;
			display: inline-flex;
		}

	}