/*
Theme Name: Favetti
Description: Semantic, SEO Optimised, Custom Wordpress Theme for Favetti
Author: Hopping Mad Design
Author URI: http://www.hoppingmad.com.au/
*/

/* Reset */
a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite,
code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4,
h5, h6, hr, html, i, images, ins, kbd, label, legend, li, map, object, ol, p, param, pre,
q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
tr, tt, ul, var {margin:0;padding:0;vertical-align:baseline}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }

input[type=number] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none;  margin: 0; }
input[type="search"] {	-webkit-appearance: textfield; -moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
input[type=submit]{-webkit-appearance: none;}

/* Defaults */
html,body{min-height:100%;margin:0; }
body{
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	color:#000000; 
	background: url(images/bg-internal.jpg) no-repeat center top;
	font: 13px/18px 'Roboto', sans-serif;
	position:relative;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
body.home{
	background: url(images/bg.jpg) no-repeat center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.internal{
	/*background: url(images/light.png) no-repeat left top;*/
}
img{border-style:none}
a{text-decoration:none;color:#741348;}
a:hover{color:#858584;}
input,textarea,select{font:100% 'Roboto', sans-serif; vertical-align:middle}
form,fieldset{border-style:none;margin:0;padding:0;font:100% 'Roboto', sans-serif;}

img.alignleft {margin: 0 10px 10px 0;}
.alignleft {float: left;}
img.alignright {margin: 0 0 10px 10px;}
.alignright {float: right;}
.aligncenter {margin:10px auto;}


.clear{clear: both;}

h1, h2, h3, h4, h5, h6{
    margin: 0 0 0.7em;
    padding: 0;
}
.entry-content p, .entry-content ul{
	margin:0 0 1em;
}
.entry-content img{
	max-width:100%;
	height:auto;
}
h1{
	font-size:26px;
}
h2{
	font-size:22px;
}
h3{
	font-size:18px;
}
h4{
	font-size:15px;
}

/* =====================
Header
======================== */
.site-logo{
	display:block;
	width:283px;
	height:50px;
	background:url(images/logo.png) no-repeat;
	background-size:100% 100%;
}	
.header-left{
	display:inline-block;
	float:left;
	margin-top:10px;
}
.header-right{
	width:600px;
	float:right;
	text-align:right;
}
#masthead{
	margin:0 40px;
	padding:25px 0 0;
}
#header-wrapper{
	position:relative;
}
.navigation li{
	list-style:none;
	display:inline-block;
	margin:0 15px;
	padding: 0 5px 7px;
	border-bottom:2px solid transparent;
}
.navigation li a{
	color:#fff;
	font-size:15px;
	font-weight:500;
}
.navigation li:hover a,.navigation .current-menu-item  a{
	color:#a5a4a2;
}
.navigation li:hover,.navigation .current-menu-item{
	border-bottom:2px solid #a5a4a2;
}	
#header-portfolio{
	position:absolute;
	left:0;
	bottom:-247px;
	overflow:hidden;
	width:0;
	height:0;
	text-align:center;
	z-index:20;
}
#header-portfolio .project-wrapper{
	margin-left:0;
	
}
#header-portfolio.active{
	width:100%;
	height:247px;
}
.site-content.active{
	opacity:0.5;
}
.social-header a{
	display:inline-block;
	width:30px;
	height:30px;
	margin:0 0 0 7px;
}
.social-header a:hover{
	background-position:right center;
}
.fb{
	background:url(images/fb.png) no-repeat;
	background-size:60px 30px;
}
.linkedin{
	background:url(images/linkedin.png) no-repeat;
	background-size:60px 30px;
}
.social-header{
	width:600px;
	float:right;
	text-align:right;
	margin-bottom:5px;
}

/* =====================
Home
======================== */
.home-content{
	margin:0 40px;
}
.mission-content{
	margin:178px 0 0 25px;
	font-size:26px;
	line-height:30px;
	width:550px;
}	
.mission-content header{
	color:#005655;
	font-size:28px;
	font-weight:900;
	margin:55px 0 0;
}
.see-project{
	color:#fff;
	font:700 22px/60px 'Roboto';
	width:265px;
	background: -webkit-linear-gradient(#7d2d5a, #661643); 
	background: -o-linear-gradient(#7d2d5a, #661643); 
	background: -moz-linear-gradient(#7d2d5a, #661643); 
	background: linear-gradient(#7d2d5a, #661643); 
	cursor:pointer;
	text-align:center;
	border-radius:5px; 
	-moz-border-radius:5px; 
	-webkit-border-radius:5px;
}
#h-open-projects{
	margin:40px 0 0 25px;
}
.h-contact-us{
	color:#fff;
	font:700 22px/55px 'Roboto';
	width:265px;
	background: -webkit-linear-gradient(#196766, #035050); 
	background: -o-linear-gradient(#196766, #035050); 
	background: -moz-linear-gradient(#196766, #035050); 
	background: linear-gradient(#196766, #035050); 
	cursor:pointer;
	text-align:center;
	border-radius:5px 5px 0 0; 
	-moz-border-radius:5px 5px 0 0; 
	-webkit-border-radius:5px 5px 0 0;
	display:block;
	height:55px;
}
.btn:hover{
	color:#fff;
	background: -webkit-linear-gradient(#404040, #2b2b2b); 
	background: -o-linear-gradient(#404040, #2b2b2b); 
	background: -moz-linear-gradient(#404040, #2b2b2b); 
	background: linear-gradient(#404040, #2b2b2b); 
}
#home-contact{
	position:fixed;
	bottom:0;
	right:40px;
	z-index:20;
}
.line-dec span{
	display:block;
	height:44px;
	margin-bottom:22px;
}
.line-dec {
	width:170px;
	float:right;
	margin-left:22px;
}
.line-dec span:nth-child(1){
	background:#741348;
}
.line-dec span:nth-child(2){
	background:#a4a3a1;
}
.line-dec span:nth-child(3){
	background:#005755;
	margin-bottom:0;
}
.testimonial{
	max-width:1050px;
	min-height:176px;
	background:#fff;
	float:right;
	padding:11px 0;
}
#testimonial-wrapper{
	margin-bottom:105px;
}
.testimonial .logo{
	float:left;
	width:230px;
	height:180px;
	border-right:1px solid #c4c3c2;
	text-align:right;
	padding-right:12px;
	margin-right:22px;
}
.testimonial .logo:before{
	content: " ";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.testimonial .logo img{
	max-width:100%;
	height:auto;
	vertical-align: middle
}	
.testimonial .content{
	font:300 20px/25px 'Roboto';
	padding:11px 20px 0 0;
}
.testimonial header{
	font:300 20px/25px 'Roboto';
	padding:0 0 0 25px;
	margin:15px 0 0;
}
.testimonial header .arrow{
	display:inline-block;
	width:25px;
	height:25px;
	background:url(images/arrow.png) no-repeat left center;
	background-size:10px 11px;
	vertical-align:top;
}
.testimonial header strong{
	font-weight:700;
}
.project{
	width:185px;
	height:185px;
	display:block;
	float:left;
	position:relative;
	margin-right:10px;
}
.project img{
	display:block;
	width:100%;
	height:100%;
	filter: gray; /* IE6-9 */
	filter: grayscale(1); /* Firefox 35+ */
	-webkit-filter: grayscale(1);
}
.project:hover img{
	filter: none;
	-webkit-filter: grayscale(0);
}
.project header{
	position:absolute;
	left:8px;
	top:120px;
	color:#fff;
	font:500 17px/18px 'Roboto';
	border-top:2px solid #afa8ac;
	width:169px;
	padding:4px 4px 0;
}
.project-layout{
	overflow:hidden;
	height:247px;
	background:#000;
}
.project-wrapper{
	margin:25px 0 0 65px;
	position:relative;
	padding:0 25px;
	display:block;
}
.arrow-left{
	position:absolute;
	z-index:1;
	left:0;
	top:50%;
	margin-top:-10px;
	height:20px;
	width:20px;
	background:url(images/prev.png) no-repeat center center;
	background-size:11px 18px;
	cursor:pointer;
}
.arrow-right{
	position:absolute;
	z-index:1;
	right:10px;
	top:50%;
	margin-top:-10px;
	height:20px;
	width:20px;
	background:url(images/next.png) no-repeat center center;
	background-size:11px 18px;
	cursor:pointer;
}
#home-portfolio{
	overflow:hidden;
	width:0;
	height:0;
}
#home-portfolio.active{
	width:100%;
	height:247px;
	margin:28px 0 100px;
}
.hide{
	display:none !important;
}

/* =====================
Footer
======================== */
.copyright{
	text-transform:uppercase;
	font-weight:700;
	font-size:13px;
	margin:0 0 0 40px;
	padding-top:22px;
	color:#fff;
}
#colophon{
	min-height:55px;
	position:fixed;
	bottom:0;
	width:100%;
	left:0;
}	
.design-by a{
	color:#fff;
}
.design-by{
	font-size:10px;
	font-weight:700;
	padding:0 0 10px 40px;
	color:#fff;
}

/* =====================
Contact
======================== */
.content-area{
	max-width:1020px;
	margin:50px auto 110px;
	background:#fff;
	padding:1px 30px 0;
	min-height:570px;
	position:relative;
}
.page-title{
	text-transform:uppercase;
	font-weight:500;
	position:relative;
	margin:100px 0 20px;
}
.page-title span{
	display:inline-block;
	position:relative;
	z-index:2;
	background:#fff;
	padding-right:12px;
}	
.page-title:before{
	content:' ';
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:2px;
	background:#d5d5d4;
	margin-top:-1px;
}
.contact-block{
	width:300px;
	margin:0 30px 25px 0 ;
}
.left{
	float:left;
}
.contact-block.right{
	margin-right:0;
	margin-left:30px;
}
.right{
	float:right;
}
.contact-block h3{
	font-weight:500;
	margin:10px 0 7px;
}
.entry-content table{
	width:100%;
	height:auto !important;
	border-collapse:collapse;
	border-spacing: 0;
}
.entry-content table td{
	border-top:1px solid #b6b5b4;
	border-bottom:1px solid #b6b5b4;
	vertical-align:top;
	padding:7px 0;
}
#map{
	width:630px;
	min-height:270px;
	margin:0 0 5px;
}
.contact-block.right .entry-content{
	border-top:1px solid #b6b5b4;
	border-bottom:1px solid #b6b5b4;
	padding:5px 0;
}
.contact-block.right .entry-content p{
	margin:0
}

/* =====================
About Us
======================== */
.page-title.about{
	margin-top:30px;
}
.sub-menu li{
	list-style:none;
	display:inline-block;
	margin:0 40px 0 0;
}
.sub-menu li a{
	font-size:15px;
	color:#741348;
}
.sub-menu li:hover a, .sub-menu .current-menu-item a{
	color:#858584;
}
#sub-menu{
	border-bottom:3px solid #741348;
	padding:0 0 15px 20px;
	margin:30px 0 0;
}
.about-col{
	width:31.25%;
	margin-right:3.125%;
	float:left;
}
.about-col.last{
	margin-right:0;
}
.about-col.hide{
	display:none;
}
.about-content.entry-content table td{
	border:none;
	padding:5px 0;
}
.about-content.entry-content table tr td:first-child{
	padding-right:15px;
}
.more{
	position:absolute;
	right:2px;
	bottom:3px;	
	font-weight:300;
	font-size:12px;
	line-height:38px;
	color:#751347;
	border-top:1px dotted #595757;
	padding-left:10px;
}
.more span{
	background:url(images/more.png) no-repeat center center;
	background-size:14px 11px;
	display:inline-block;
	width:35px;
	height:38px;
	vertical-align:top;
}
.more:hover{
	color:#a5a4a2;
}
.more:hover span{
	opacity:0.5;
}
.client-left{
	width:67.19%;
	float:left;
	border-right:1px solid #d2d1d0;
}
.client-right{
	width:32.8%;
	float:left;
}
#clients-logo img{
	margin:0 35px 20px 0;
}
#clients-logo{
	padding-top:10px;
}	
.client-testimonial{
	padding-left:15px;
	font-size:15px;
	font-weight:300;
	margin-bottom:15px;
}
.client-testimonial .content{
	margin-bottom:12px;
}
.client-testimonial strong{
	font-weight:700;
}	
.client-testimonial header .arrow {
    background: rgba(0, 0, 0, 0) url("images/arrow.png") no-repeat scroll left center / 10px 11px;
    display: inline-block;
    height: 18px;
    vertical-align: top;
    width: 18px;
}
.heading-text{
	border-top:1px solid #a4a3a1;
	border-bottom:1px solid #a4a3a1;
	padding:4px 0 6px;
	margin:15px 0 10px;
}
.heading-text h3,.heading-text h1,.heading-text h2,.heading-text h4{
	margin:0;
	font-weight:500;
}

/* =====================
Single Project
======================== */
.sp-info{
	width:330px;
	float:left;
	padding-right:30px;
}
.sp-image{
	float:right;
	width:660px;
}
.sp-info h2{
	font-weight:500;
	line-height:28px;
	text-transform:uppercase;
	margin:100px 0 0;
}
.sp-image img{
	width:100%;
	height:auto;
	display:block;
}
.info{
	border-bottom:1px solid #cacaca;
	padding:7px 0;
}
.info span{
	display:inline-block;
	width:85px;
}
.single-more{
	right:665px;
}
.entry-content li{
	margin:0 0 5px 25px;
}
.entry-content ul, .entry-content ol{
	margin-bottom:10px;
}

/* =====================
News
======================== */
.first-new.news-post {
	float:left;
	width:600px;
	margin-right:30px;
}
.first-new .thumbnail{
	width:300px;
	min-height:300px;
	float:left;
	margin-right:30px;
}
.first-new .thumbnail img{
	display:block;
	width:100%;
	height:auto;
}
.news-post h3{
	font-weight:500;
	margin-bottom:10px;
}
.date{
	font-size:13px;
	font-weight:500;
	margin-bottom:10px;
}
.excerpt{
	font-size:15px;
	line-height:20px;
}
.first-new.news-post .excerpt{
	float:right;
	width:270px;
}
.more-new{
	font-size:11px;
	display:inline-block;
	border-top:1px dotted #595757;
	line-height:30px;
	padding:0 22px 0 10px;
	margin:17px 0 0;
}
.news-post{
	float:right;
	width:300px;
	margin-bottom:18px;
}
.page-numbers.current{
	color:#a5a4a2;
}
.page-numbers{
	display:inline-block;
	margin-left:5px;
}
#news-pagination{
	text-align:right;
	padding-bottom:15px;
}
.ar-cat{
	display:inline-block;
	position:relative;
	padding:0 20px;
}
.ar-cat header{
	display:inline-block;
	color:#751347;
	font-size:15px;
	cursor:pointer;
}
.ar-cat header span{
	display:inline-block;
	width:20px;
	background:url(images/dropdown.png) no-repeat center top 8px;
	background-size:9px 6px;
	height:18px;
	vertical-align:top;
}
.ar-cat header.active,.ar-cat:hover header{
	color:#858584;
}
.ar-cat header.active span{
	background:url(images/dropdown-a.png) no-repeat center top 8px;
	background-size:9px 6px;
}
.ar-cat-list-wrapper{
	position:absolute;
	top:18px;
	left:0;
	width:150px;
	background:#fff;
	padding: 20px 20px 20px;
	z-index:10;
	display:none;
}
.ar-cat-list-wrapper li{
	list-style:none;
	border-bottom:1px solid #b6b5b4;
	padding:6px 0;
	font-size:15px;
}
.ar-cat-list-wrapper.active{
	display:block;
}
.single-new-thumbnail img{
	display:block;
	width:100%;
	height:auto;
}

/* =====================
Slide menu defautl style
======================== */
.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:320px;overflow-x:none;overflow-y:auto;background:#000;padding-top:80px;}
.sidr .sidr-inner{padding:0 0 15px}
.sidr.right{left:auto;right:-320px}
.sidr.left{left:-320px;right:auto}

#tablet-portfolio{
	height:0;
	overflow:hidden;
	width:0;
}
#open-tablet-menu,#hm-open-projects,.line-dec.tablet, .logo.tablet,
#sub-menu-mobile,#map-mobile,.social-footer{
	display:none;
}



@media screen and (max-width:1400px){
	#colophon{
		left:auto;
		bottom:auto;
		position:relative;
	}
	body.home{
		background-image: url(images/bg-tablet.jpg) ;
	}
}
@media screen and (max-width:1024px){
	.social-header{
		width:300px;
		margin:20px 0 0 0;
	}
	.header-right{
		float:left;
		width:100%;
		padding:30px 0 0;
		text-align:center;
	}	
	#desktop-menu{
		display:inline-block;
		background:#000;
		padding:7px 20px 0;
	}	
	.navigation li:hover, .navigation .current-menu-item{
		border:none;
	}
	.mission-content{
		margin-top:55px;
		font-size:24px;
		line-height:28px;
	}
	.mission-content header{
		margin-top:25px;
		font-size:24px;
	}
	.see-project{
		font-size:15px;
		line-height:40px;
		width:180px;
	}
	#h-open-projects{
		margin-top:33px;
	}
	.line-dec{
		display:none;
	}
	.line-dec.tablet{
		margin:20px 0 0;
		width:200px;
		display:block;
	}
	#testimonial-wrapper{
		margin:80px 0 0;
	}
	.h-contact-us{
		font-size:15px;
		line-height:40px;
		height:40px;
		width:200px;
	}
	.line-dec span{
		height:50px;
	}
	.testimonial .content{
		font-size:18px;
		line-height:23px;
	}	
	.testimonial header{
		font-size:18px;
		line-height:23px;
		margin-bottom:5px;
	}
	#tablet-portfolio.active, #header-portfolio.active{
		width:100%;
		height:430px;
	}
	#header-portfolio.active{
		top:150px;
	}
	#tablet-portfolio{
		text-align:center;
		margin:32px 0 35px;
	}
	#ht-project-slider div,#header-project-slider div {
		width:585px;
		height:390px;
		float:left;
	}
	.project{
		margin-bottom:10px;
	}
	.arrow-right{
		right:5px;
	}
	.arrow-left{
		left:-5px;
	}
	.content-area{
		margin:45px 35px 0;
		padding-bottom:15px;
		min-height:760px;
	}
	.about-col{
		width:46.8%;
	}
	#single-new .about-col{
		float:none;
	}	
	.client-left{
		width:100%;
		border-right:none;
		border-bottom:1px solid #d2d1d0;
		margin-bottom:20px;
	}
	.client-right{
		width:100%;
	}
	#map{
		width:47.7%;
	}
	
	#map iframe{
		width:100%;
		height:415px;
	}
	.contact-block.right{
		float:left;
		margin-left:0 ; 
	}	
	.tablet-hide{
		display:none;
	}
	.first-new.news-post{
		width:47.7%;
		margin-right:0;
	}
	.first-new .thumbnail{
		float:none;
		width:100%;
		margin-top:15px;
	}
	.first-new.news-post .excerpt{
		float:none;
	}
	.news-post{
		width:47.7%;
	}
	.sp-image{
		width:50%;
	}
	.sp-info{
		width:100%;
		margin-bottom:20px;
	}
	.sp-info .entry-content{
		max-width:300px;
	}
	.single-more{
		right:0;
	}
}

@media screen and (max-width:700px){
	.header-right{
		display:none;
	}
	#open-tablet-menu{
		display:block;
		width:40px;
		background:#000;
		padding:5px 5px;
		float:right;
	}
	#open-tablet-menu span{
		display:block;
		background:#fff;
		height:5px;
		margin:4px;
	}
	.header-left{
		width:auto;
	}
	.site-logo{
		width:223px;
		height:39px;
	}
	#masthead,.home-content{
		margin:0 20px;
	}	
	.mobile-menu a{
		display:block;
		color:#fff;
		font-weight:500;
		font-size:15px;
	}
	.mobile-menu li{
		padding:0 25px;
		margin-bottom:20px;
	}
	body.home{
		background-position:left top;
	}
	.mission-content{
		width:100%;
		margin:40px 0 0;
		font-size:20px;
		line-height:24px;
	}
	.mission-content header{
		font-size:20px;
		margin-top:15px;
	}
	#h-open-projects{
		display:none;
	}
	#hm-open-projects{
		margin:30px 0 0;
		width:100%;
		display:block;
	}
	#testimonial-wrapper{
		margin:30px 0 0;
	}
	.testimonial{
		padding:11px 20px;
	}
	.testimonial .content{
		font-size:18px;
		line-height:23px;
	}
	.testimonial header{
		font-size:18px;
		line-height:23px;
		padding-left:0;
		margin:12px 0 0;
	}
	.test-right{
		border-bottom:2px solid #c4c3c2;
		margin-bottom:20px;
		padding-bottom:15px;
	}
	.testimonial .logo{
		display:none;
	}
	.testimonial .logo.tablet{
		float:none;
		border:none;
		text-align:center;
		width:100%;
		padding:0;
		margin:0;
		min-height:150px;
		display:block;
	}
	.line-dec.tablet{
		display:none;
	}
	#home-contact{
		position:relative;
		right:auto;
		bottom:auto;
		margin:30px 0 0;
		width:100%;
		border-radius:5px;
		-moz-border-radius:5px ;
		-webkit-border-radius:5px ;
	}	
	.about-col{
		width:100%;
		margin:0 !important;
		float:none;
	}
	#sub-menu{
		display:none;
	}
	#news-page #sub-menu{
		display:block; 
	}
	#sub-menu-mobile{
		display:block;
		border-bottom:3px solid #741348;
		padding:10px 0 15px;
		position:relative;
	}
	#sub-menu-mobile header{
		font-size:15px;
		color:#858584;
	}
	.content-area{
		margin:40px 20px 0;
		padding: 1px 20px 15px;
	}
	#open-mobile-menu{
		display:block;
		width:20px;
		padding:4px 0 1px;
		position:absolute;
		right:0;
		top:10px;
		z-index:2;
	}
	#open-mobile-menu span{
		display:block;
		height:2px;
		background:#858584;
		margin-bottom:3px;
	}
	#map{
		display:none;
	}
	#map-mobile{
		display:block;
		width:100%;
		margin-bottom:30px;
	}
	#map-mobile iframe{
		width:100%;
		height:280px;
	}
	.first-new.news-post{
		width:100%;
		margin-bottom:20px;
	}
	.news-post{
		width:100%;
		margin-bottom:20px;
	}
	#mobile-portfolio{
		margin:0 auto;
		width:300px;
	}
	#mobile-project-slider div{
		width:185px;
		height:1190px;
	}
	#mobile-project-slider .project{
		margin-bottom:15px;
	}
	#mobile-portfolio .arrow-left{
		top:auto;
		bottom:0;
		margin-top:0;
	}
	#mobile-portfolio .arrow-right{
		bottom:0;
		top:auto;
		margin-top:0;
		right:-5px;
	}
	#mobile-portfolio .project-wrapper{
		margin-left:35px;
	}
	.sp-info h2{
		margin-top:30px;
	}
	.sp-info .entry-content{
		max-width:100%;
	}
	.sp-info{
		padding-right:20px;
		float:none;
	}
	.sp-image{
		width:100%;
		padding-right:20px;
		float:none;
		margin-bottom:60px;
	}
	.social-header{
		display:none;
	}
	.social-footer{
		display:block;
		text-align:center;
		padding:10px 0;
	}
	.social-footer a{
		display:inline-block;
		margin:0 5px;
		width:30px;
		height:30px;
	}
	.social-footer a:hover{
		background-position:right center;
	}
}

@media screen and (max-width:500px){
	#clients-logo img{
		margin-right:5px;
	}
	#contact-page .page-title{
		margin-top:20px;
	}
	
}











