@import url('mobile.css');

body {
	font-family: 'PT Sans', sans-serif;
	color: #555; }
 
	body * { line-height: 1.5; }

#container {
	position: relative;
	z-index: 3;
	max-width: 960px;
	margin: 0 auto;
}
 
nav#main-menu { background: url('images/grid.png'); }
nav#main-menu ul ul li { overflow:hidden; }
nav#main-menu select { display: none; }
 
	nav#main-menu ul {
		text-align: center;
		margin: 0;
		padding: 0; }
 
	nav#main-menu li {
		list-style: none;
		display: inline-block; }
 
		nav#main-menu li:after {
			content: '•';
			color: #aaa; }
 
		nav#main-menu li:last-child:after { content: ''; }
 
	nav#main-menu a:link, nav#main-menu a:visited {
		color: #666;
		display: inline-block;
		padding: 15px; }
 
	nav#main-menu a:hover {
		color: #222;
		display: inline-block;
		padding: 15px;
		text-decoration: none; }
 
footer .widgets {
	background: url('images/grid_light.png');
	border-top: 1px solid #eee;
	padding: 20px 0; }
 
footer .copy-contact {
	background: url('images/grid_dark.png');
	color: #eee !important;
	padding: 20px 0 10px;
	border-top: 1px #888 solid; }
 
	footer .copy-contact a:link, footer .copy-contact a:visited { color: #ccc; }
 
h1#site-name {
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
	margin: 60px 0 0;
	font-size: 48px; }
 
.round {
	background-color: #70ccd8;
	border-radius: 300px;
	padding: 15px 20px 10px;
	line-height: 1;
	color: #fff;
	font-size: 60px; }
 
	.round:hover {
		-webkit-transition: background 600ms ease;
		-moz-transition: background 600ms ease;
		-ms-transition: background 600ms ease;
		-o-transition: background 600ms ease;
		transition: background 600ms ease;
		background: #e069a9; }
		
.arrow_box { position: relative; background: #70CCD8; } .arrow_box:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(112, 204, 216, 0); border-top-color: #70CCD8; border-width: 10px; left: 50%; top:96%; margin-left: -10px; }
.arrow_box:hover:after { 
		-webkit-transition: border-color 600ms ease;
		-moz-transition: border-color 600ms ease;
		-ms-transition: border-color 600ms ease;
		-o-transition: border-color 600ms ease;
		transition: border-color 600ms ease;
		border-top-color:#e069a9; }
 
h1#site-name a:link, h1#site-name a:visited { color: #222; }
 
h1#site-name a:hover {
	color: #222;
	text-decoration: none; }
 
h2.separator {
	border-bottom: 1px solid #ccc;
	text-align: center;
	margin: 20px 0 30px; }
 
header h2.tagline { margin: 0 0 20px; }
 
h2.separator span {
	font-size: 18px;
	color: #666;
	font-weight: 400;
	font-style: italic;
	display: inline-block;
	background: #fff;
	position: relative;
	top: 14px;
	padding: 0 20px; }
 
#slider { margin: 40px 0 0; }
 
.slide { background: #fff; }

.icon-container { text-align: center; }
 
	.what-i-offer h3 { margin-top: 25px; text-align: center; }
 
	.what-i-offer .row { margin-top: 60px; }
 
.button {
	background: #d34976;
	border: 1px solid #d34976; }
 
	.button:hover { background: #ee81a4; }
 
h1, h2, h3, h4, h5, h6 { color: #444; }
h2, h3, h4, h5, h6 { font-weight:600; }
 
.call-now {
	background: url('images/grid.png');
	padding: 20px 0;
	margin: 40px auto;
	text-align: center; }
 
footer#main-footer {
	display: block;
	margin-top: 20px; }
 
.quiet { opacity: .5; }
 
footer#main-footer .social {
	text-align: right;
	font-size: 250%; }
 
#contact {
	position: fixed;
	left: 0;
	top: 80px;
	z-index: 1; }
 
	#contact ul {
		margin: 0;
		padding: 0;
		list-style: none; }
 
	#contact li {
		display: inline-block;
		margin-bottom: 20px;
		position: relative; }
 
		#contact li.search .info { padding: 15px 10px; }
 
		#contact li .info a { border-radius: 0; }
 
		#contact li a, #contact button.btn-link {
			background: #a586c5;
			padding: 10px;
			border-radius: 0 5px 5px 0;
			text-decoration: none;
			color: #fff;
			border: 0;
			line-height:1;}
 
	#contact button.btn-link {
		position: relative;
		top: -1px;
		padding: 13px 10px; }
 
	#contact input { margin-bottom: 4px; }
 
	#contact li .info {
		background: #a586c5;
		color: #fff; }
 
	#contact a span { color: #fff; }
 
#content a:link, #contact a:visited { color: #fff; }
 
h2.page-title {
	background: url('images/grid_light.png');
	text-align: center;
	padding: 20px 0;
	margin-bottom: 20px; }
 
	h2.page-title span {
		background: #fff;
		padding: 0 20px;
		position: relative;
		top: 21px; }
 
#main img {
	border: 1px solid #ddd;
	padding: 5px; }
 
#main .border-img {
	border: 0;
	padding: 0; }
 
.carousel-control.left {
	background: url('images/left-arrow.png');
	display: inline-block;
	width: 39px;
	height: 50px; }
 
.carousel-control.right {
	background: url('images/right-arrow.png');
	display: inline-block;
	width: 39px;
	height: 50px; }
 
.portfolio img { background: url('images/placeholders/220x173.html'); }
 
#main-menu li ul {
	background: rgba(0,0,0,.65) !important;
	display: block;
	list-style: none;
	border: #666 1px solid;
	position: absolute;
	padding: 10px;
	margin: -1px 0 0;
	width: 150px;
	z-index: 99;
	font-size: 1em;
	text-align: left !important;
	left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none) */ }
 
	#main-menu li ul li {
		display: block !important;
		margin: 0;
		padding: 5px 0;
		font-weight: 400; }
 
	#main-menu li ul a:link, #main-menu li ul a:visited {
		padding: 2px 0;
		color: #fff; }
 
	#main-menu li ul li:after { content: ''; }
 
#main-menu ul ul li:hover > ul {
	left: 170px;
	margin-top: -20px; }
 
#main-menu ul li:hover > ul { left: auto; }
 
#main-menu li:hover ul a {
	text-decoration: none; /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	color: #fff; }
 
#main-menu li:hover ul li a:hover {
	background: none; /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	color: #e069a9; }
 
blockquote p { font-size: 14px; }
 
p.sort {
	text-align: center;
	margin: 0 0 15px;
	color: #888; }
 
	p.sort a {
		margin: 0 5px 0 0;
		color: #666; }
 
		p.sort a.active {
			background: #eee;
			padding: 3px 8px;
			border-radius: 3px; }
 
p.muted a {
	color: #666;
	font-weight: 700; }
 
h2 a:hover { text-decoration: none; }
 
.portfolio-grid a { opacity: .5; }
 
.portfolio-grid a {
	opacity: 0.5;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	-ms-transition: opacity 300ms ease-out;
	-o-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out; }
 
	.portfolio-grid a:hover {
		-webkit-transition: opacity 300ms ease-in;
		-moz-transition: opacity 300ms ease-in;
		-ms-transition: opacity 300ms ease-in;
		-o-transition: opacity 300ms ease-in;
		transition: opacity 300ms ease-in;
		opacity: 1; }
 
.clients img:hover {
	position: relative;
	top: 2px;
	left: 2px; }
 
footer .copy-contact a:hover { text-decoration: none; }
 
footer .copy-contact .twitter:hover { color: #68c8f8; }
 
footer .copy-contact .facebook:hover { color: #3f8cff; }
 
footer .copy-contact .linkedin:hover { color: #fff; }
 
footer .copy-contact .pinterest:hover { color: #cd2026; }
 
footer .copy-contact .google-plus:hover { color: #f5c736; }
 
a {
	padding: 3px 0;
	-o-transition: 300ms;
	-ms-transition: 300ms;
	-moz-transition: 300ms;
	-webkit-transition: 300ms;
	transition: 300ms; /* ...and now for the proper property */}
 
	a:hover { text-decoration: none; }