@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700,700italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic);

/*font-family: 'Roboto' ,sans-serif;
font-family: 'Roboto Condensed', sans-serif;*/

@import url("generic.css");
@import url("font-awesome.css");
@import url("hover.css");


	.main_container {
		width:1020px;
		margin:0px auto;
		position:relative;
	}
	
	/******************************
			TOP BAR INCLUDE
	******************************/
	#top_header {padding-top:15px;}
	
	#top_header .main_container { border-top:3px solid #d2ac67;}
	
	#logo {
		float:left;
		margin:-3px 0px 0px 0px;
	}
	
	#callus {
		font-weight:400;
		font-size:14px;
		float:right;
		color:#006d81;
		text-transform:uppercase;
	}
	#callus span {
		color:#000;
		font-size:20px;
	}
	
	#top_slogan {
		/*background:url(../images/repeat1.png) repeat;*/
		width:100%;
		background:rgba(210,172,103,.25);
		padding:30px 0px;
		border-top:1px solid #fff;
		border-bottom:1px solid #fff;
		margin:20px 0px 0px 0px;
		font-size:16px;
		color:#555;
		font-style:italic;
	}
	#top_slogan h1 {
		font-family:'Roboto', sans-serif;
		background:none;
		margin:0px 0px 10px 0px;
		padding:0;
		border:none;
		font-size:24px;
		color:#000;
		line-height:26px;
		text-transform:uppercase;
		font-style:normal;
	}
	#top_slogan h1 span {
		font-weight:500;
		background:none;
	}
	#top_slogan .TextBlue { border-bottom:2px solid #008da9;}
	#top_slogan .TextGold { border-bottom:2px solid #d2ac67;}
	
	#top_slogan img {
		float:right;
		margin:5px 0px 0px 0px;
	}
	
	.dropdown .hvr-rectangle-out { background:#008da9;}
	.dropdown .hvr-rectangle-out:before { background:#d2ac67;}
	
	.dropdown .hvr-rectangle-out,
	.dropdown .hvr-rectangle-out:before {
			-moz-transition-duration: 0.2s;
			-ms-transition-duration: 0.2s;
			-o-transition-duration: 0.2s;
			-webkit-transition-duration: 0.2s;
		transition-duration: 0.2s;
	}
	
	.objblink {
			-webkit-transition: all 1s ease-in-out;
			-moz-transition: all 1s ease-in-out;
			-o-transition: all 1s ease-in-out;
			-ms-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
		
			-webkit-animation-direction: normal;
			-webkit-animation-duration: 5s;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-name: blink;
		-webkit-animation-timing-function: ease-in-out;
		
			-moz-animation-direction: normal;
			-moz-animation-duration: 1s;
			-moz-animation-iteration-count: infinite;
			-moz-animation-name: blink;
		-moz-animation-timing-function: ease-in-out;    
	}
	@-webkit-keyframes blink {
		0% {opacity:1;}
		50% {opacity:0;}
		100% {opacity:1;}
	}
	@-moz-keyframes blink {
		0% {opacity:1;}
		50% {opacity:0;}
		100% {opacity:1;}
	}
	
	
	/******************************
			CONTENTS
	******************************/
	#home_header {
		background:rgba(210,172,103,.12);
		width:100%;
		border-top:1px solid #e9d2a5;
		padding:30px 0px;
	}
	
	.bg_grey {
		background:#f4e8cf;
		border:1px solid #fff;
		border-radius:6px;
			-moz-border-radius:6px;
				-webkit-border-radius:6px;
		behavior:url(css/PIE.htc);
		position:relative;
	}
	.bg_border {
		background:#f4e8cf;
		border:1px solid #e9d2a5;
		width:100%;
		position:relative;
	}
	.bg_blue {
		background:#008da9;
		color:#fff;
		position:relative;
	}
	.bg_blue h2 {color:#fff;}
	
	.bg_gold {
		background:#d69a2d;
		color:#fff;
		position:relative;
	}
	
	.body_contents {
		width:100%;
		padding:50px 0px;
	}
	
	.home_contents {width:47.5%;}
	
	#bottom_buttons {
		position:absolute;
		right:20px;
		bottom:-18px;
	}
	
	#home_services img {
		margin:0px 0px -5px 0px;
	}
	#home_services a {
		background:#d69a2d;
		font-size:16px;
		text-transform:uppercase;
		font-weight:bold;
		margin:0px;
		padding:12px 0px 9px 0px;
		color:#fff;
		display:block;
	}
	#home_services a:hover {
		background:#008da9;
	}
	
	.left_contents {
		width:670px;
	}
	
	.right_sidebar {
		width:300px;
	}
	.right_sidebar h2 {
		background:#008da9;
		color:#fff;
		padding:10px 10px 8px 10px;
		text-transform:uppercase;
		font-size:15px;
	}
	
	h1.TitleStyle {
		font-weight:300;
		background:#008da9;
		color:#fff;
		margin:40px 0 60px 0;
		padding:10px 15px;
		border:none;
		position:relative;
	}
	h1.TitleStyle strong {
		color:#fff;
		font-weight:400;
	}
	h1.TitleStyle img {
		position:absolute;
		top:-44px;
		right:-20px;
	}
	
	
	/*===== Haxagon Style ==*/
	.clr:after{
		content:"";
		display:block;
		clear:both;
	}
	
	#categories_home{
		overflow:hidden;
		width:90%;
		margin:0 auto;
	}
	
	#categories_home ul {
		margin:0px;
		padding:0px;
	}
	#categories_home li {
		border:none;
		position:relative;
		list-style-type:none;
		width:27.85714285714286%; /* = (100-2.5) / 3.5 */
		margin:0px;
		padding:0;
		padding-bottom: 32.16760145166612%; /* =  width /0.866 */
		float:left;
		overflow:hidden;
		visibility:hidden;
			-webkit-transform: rotate(-60deg) skewY(30deg);
			-ms-transform: rotate(-60deg) skewY(30deg);
		transform: rotate(-60deg) skewY(30deg);
	}
	
	#categories_home li {
		width: 206px;
		padding-bottom: 237px;
		margin-bottom: 10px;
		margin-right: 10px;
	}
	
	#categories_home li:nth-child(3n) {
		margin-right: 50px;
		margin-left: 4px;
		margin-top: -61px;
		-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
		-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
		transform: translateX(50%) rotate(-60deg) skewY(30deg);
	}
	
	#categories_home li * {
		position:absolute;
		visibility:visible;
	}
	
	#categories_home li > div{
		width:100%;
		height:100%;
		text-align:center;
		color:#fff;
		overflow:hidden;
		
		-webkit-transform: skewY(-30deg) rotate(60deg);
		-ms-transform: skewY(-30deg) rotate(60deg);
		transform: skewY(-30deg) rotate(60deg);
		
		-webkit-backface-visibility:hidden;
	}
	
	/* HEX CONTENT */
	#categories_home li img{
		left:-100%;
		right:-100%;
		width: auto;
		height:100%;
		margin:0 auto;   
	}
	
	#categories_home div h1,
	#categories_home div p {
		background-color:rgba(0,140,170,.7);
		width:100%;
		padding:0;
		text-align:center;
			-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
			-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
		transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
	}
	
	#categories_home li h1 {
		font-family: 'Roboto' ,sans-serif;
		font-size:23px;
		color:#fff;
		font-weight:400;
		text-transform:capitalize;
		bottom:110%;
		margin:0;
		padding:0;
		padding-top:100%;
		padding-bottom:100%;
	}
	
	#categories_home li h1:after {
		content:'';
		display:block;
		position:absolute;
		bottom:-1px;
		left:45%;
		width:10%;
		text-align:center;
		z-index:1;
		border-bottom:3px solid #000;
	}
	
	#categories_home li p {
		padding-top:50%;
		top:110%;
		padding-bottom:50%;
	}
	
	
	/* HOVER EFFECT  */
	#categories_home li div:hover h1 {
		bottom:50%;
		padding-bottom:10%;
	}
	
	#categories_home li div:hover p {
		top:50%;
		padding-top:10%;
	}
	#categories_home li div:hover p button {
		left:36px;
	}
	
	
	/** Portfolio */
	#categories{
		overflow:hidden;
		width:90%;
		margin:0 auto;
	}
	
	#categories ul {
		margin:0px;
		padding:0px;
	}
	#categories li {
		border:none;
		position:relative;
		list-style-type:none;
		width:27.85714285714286%; /* = (100-2.5) / 3.5 */
		margin:0px;
		padding:0;
		padding-bottom: 32.16760145166612%; /* =  width /0.866 */
		float:left;
		overflow:hidden;
		visibility:hidden;
		
		-webkit-transform: rotate(-60deg) skewY(30deg);
		-ms-transform: rotate(-60deg) skewY(30deg);
		transform: rotate(-60deg) skewY(30deg);
	}
	#categories li:nth-child(3n+2){margin:0 1%;}
	#categories li:nth-child(6n+4){margin-left:0.5%;}
	
	#categories li:nth-child(6n+4), 
	#categories li:nth-child(6n+5), 
	#categories li:nth-child(6n+6) {
		margin-top: -6.9285714285%;
		margin-bottom: -6.9285714285%;
		
		-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
		-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
		transform: translateX(50%) rotate(-60deg) skewY(30deg);
	}
	
	#categories li:nth-child(6n+4):last-child, 
	#categories li:nth-child(6n+5):last-child, 
	#categories li:nth-child(6n+6):last-child {
		margin-bottom:0%;
	}
	
	#categories li * {
		position:absolute;
		visibility:visible;
	}
	
	#categories li > div{
		width:100%;
		height:100%;
		text-align:center;
		color:#fff;
		overflow:hidden;
		
		-webkit-transform: skewY(-30deg) rotate(60deg);
		-ms-transform: skewY(-30deg) rotate(60deg);
		transform: skewY(-30deg) rotate(60deg);
		
		-webkit-backface-visibility:hidden;
	}
	
	/* HEX CONTENT */
	#categories li img{
		left:-100%;
		right:-100%;
		width: auto;
		height:100%;
		margin:0 auto;   
	}
	
	#categories div h1, 
	#categories div p {
		background-color:rgba(0,140,170,.7);
		width:100%;
		padding:0;
		text-align:center;
			-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
			-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
		transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
	}
	
	#categories li h1 {
		font-family: 'Roboto' ,sans-serif;
		font-size:23px;
		color:#fff;
		font-weight:400;
		text-transform:capitalize;
		bottom:110%;
		margin:0;
		padding:0;
		padding-top:100%;
		padding-bottom:100%;
	}
	
	#categories li h1:after {
		content:'';
		display:block;
		position:absolute;
		bottom:-1px;
		left:45%;
		width:10%;
		text-align:center;
		z-index:1;
		border-bottom:3px solid #000;
	}
	
	#categories li p{
		padding-top:50%;
		top:110%;
		padding-bottom:50%;
	}
	
	
	/* HOVER EFFECT  */
	#categories li div:hover h1 {
		bottom:50%;
		padding-bottom:10%;
	}
	
	#categories li div:hover p {
		top:50%;
		padding-top:10%;
	}
	
	#categories li div:hover p button {
		left:21%;
	}
	
	.PortfolioThumb {
		width:100%;
		height:100%;
		background-repeat:no-repeat;
		background-position:top center;
		-moz-background-size:cover;
		-ms-background-size:cover;
		-o-background-size:cover;
		-background-size:cover;
		background-size:cover;
	}
	
	.IconZoomIn img {
		width:52px !important;
		height:60px !important;
		max-width:none;
		margin:10px 0 0 -25px !important;
		padding:0;
		left:0 !important;
		right:0 !important;
	}
	
	

	/******************************
			FOOTER
	******************************/
	#footer {
		background: rgba(210,172,103,.25);
		width:100%;
		font-size:14px;
		color:#000;
		padding:0px 0px 30px 0px;
	}
	#footer p {
		margin:10px 0px 0px 0px;
		padding:0px;
		text-align:right;
		text-transform:uppercase;
	}
	
	#footer_logo {
		float:left;
		margin:15px 0px 0px 0px;
	}
	
	#footer_links {
		background:rgba(0,0,0,.1);
		width:830px;
		float:right;
		height:80px;
		color:#fff;
		line-height:15px;
	}
	#footer_links a {margin:0px 11px 0px 6px;}
	
	#footer_links a.moreInfo {color:#000;}
	#footer_links a.moreInfo span {border-bottom: 1px solid #000;}

	#pagination {
		float:left;
		margin:33px 0px 0px 15px;
	}
	
	/***** Social Navigation *****/
	#socialNav {
		float:right;
		display:block;
		margin:30px 20px 0px 0px;
		padding:0px 0px 0px 0px;
	}
	#socialNav li {
		float:left;
		list-style:none;
		margin:0px !important;
		padding:0px !important;
		border:none;
		background:none;
		z-index:1000;
	}
	#socialNav li a {
		display:block;
		margin:0px 0px 0px 8px;
		padding:0px;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		background:url(../images/icon_social.png) no-repeat;
		height:21px;
	}
	
	#icon_facebook {
		width:11px;
		background-position:0px 0px !important;
	}
	#icon_facebook:hover {background-position:0px -21px !important;}
	
	#icon_twitter {
		width:22px;
		background-position:-21px 0px !important;
	}
	#icon_twitter:hover {background-position:-21px -21px !important;}