/*
Theme Name: Folino 
Author: Zozothemes w/edits by 4CDesignWorks
Version: 1.0
Template: metal 
*/

/* *** Defaults *** */

h1, h2, h3, h4, h5, h6{}
h3{ text-transform: none;}

/*Replace Orange*/
body .btn, body .btn[disabled], body .btn.btn-default, body .vc_general.vc_btn3.vc_btn3-color-primary-bg, body .vc_btn.vc_btn-primary-bg, body .vc_general.vc_btn3.vc_btn3-color-juicy-pink, body .colorbtn, body .btn-modal.btn-primary, body .btn-modal.btn-primary:active, body .btn-modal.btn-primary:focus{
	color: #fff;
}

/*Buttons*/
body .btn, body .vc_btn3, body button,
body .vc_general.vc_btn3, body .vc_general.vc_btn3.vc_btn3-style-default.vc_btn3-color-primary-bg{
	color: #fff; 
    font-weight: normal;  outline: none;
	font-size: 18px !important;
	line-height: 22px !important;
    padding: 9px 30px 9px 12px !important;
	border-bottom: 0 !important;
	border-radius: 0 !important; 
}
	body .vc_general.vc_btn3{ color: #fff !important; font-family: 'Rokkitt', serif; text-transform: uppercase; font-size: 20px;} 
	
	body .vc_btn3:before, body .vc_btn3:after,
	body #header #header-main ul.nav > li.active > a:after, body #header #header-main ul.nav > li.active > a:hover:after /*apply to current page link*/{
		background-color: #000; content: ""; display: block;
		position: absolute;  top:-1px; right: -10px; height: 102%; width: 20px;
		-ms-transform: skewX(10deg);
		-webkit-transform: skewX(10deg);
		transform: skewX(10deg);
		transition: none;
	}
		body .vc_btn3:after{ left: -6px; width: 10px; }
		body .vc_btn3:before{ right:-10px;}
		
	/*Primary Color Button Applications*/
	body .vc_general.vc_btn3.vc_btn3-style-default.vc_btn3-color-primary-bg:before, body .vc_btn3-color-primary-bg.vc_btn3-style-outline:hover:before,
	body .vc_btn3-color-primary-bg.vc_btn3-style-outline:focus:before, body .vc_btn3-color-primary-bg.vc_btn3-style-outline:active:before,
	body .vc_general.vc_btn3.vc_btn3-style-default.vc_btn3-color-primary-bg:after, body .vc_btn3-color-primary-bg.vc_btn3-style-outline:hover:after,
	body .vc_btn3-color-primary-bg.vc_btn3-style-outline:focus:after, body .vc_btn3-color-primary-bg.vc_btn3-style-outline:active:after{
		background-color: #e86c1f/*Folino Orange*/; height: 100%; top: 0;
	}
	body .vc_general.vc_btn3.vc_btn3-style-default.vc_btn3-color-primary-bg {padding-right: 12px !important;}
	
		body .vc_general.vc_btn3.vc_btn3-style-default.vc_btn3-color-primary-bg:hover, 
		body .vc_general.vc_btn3.vc_btn3-color-primary-bg:hover:before, body .vc_general.vc_btn3.vc_btn3-color-primary-bg:hover:after{
			background-color: #ea9d3a/*Folino Light Orange*/; transition: none !important; color: #000;
		} 
	/*Black Button Applications*/
	body .vc_general.vc_btn3.vc_btn3-color-black{ background: #000;}
		body .vc_general.vc_btn3.vc_btn3-color-black:before{ background: #e86c1f/*Folino Orange*/; transition: none;}
	
		body .vc_general.vc_btn3.vc_btn3-color-black:hover, 
		body .vc_general.vc_btn3.vc_btn3-color-black:hover:after{ background-color: #e86c1f/*Folino Orange*/;  transition: none;}
			body .vc_general.vc_btn3.vc_btn3-color-black:hover:before{ background: #000; transition: none;}

/*default main section*/
body .main-section {border-top: none;}


/*Page Titles*/
body .page-title-section{ 
	padding: 0; height: 115px;
	border: none; background: #666;
}
body .page-title-wrapper{}
body .page-title-container{}
	body .page-title-section .page-title-captions h1.entry-title {margin: 0; color: #fff;}

/* *** Navigation *** */
#header {}
#header #header-main{ background:#e86c1f/*Folino Orange*/;}

#header { 
	background: #d6d6d6; /* Old browsers */
	background: -moz-linear-gradient(top,  #d6d6d6 0%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #d6d6d6 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #d6d6d6 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
/*Top Header Bar*/
#header #header-top-bar { margin-bottom: -50px; width: 100%; position: absolute; z-index: 5; }
	#header #header-top-bar .top-bar-item, .header-section .header-top-section .top-bar-item { line-height: 1.5em; padding-top: 25px;}
	
	#header #header-top-bar .zozo-top-left:before, #header #header-top-bar .zozo-top-right:before{
		content:""; display: inline-block; float: left; width: 30px; height: 30px; 
		background: transparent url(imgs/office-headerIcon.png) center no-repeat; background-size: contain;
		position: relative; top: 35px; margin: 0 10px;
	}
	#header #header-top-bar .zozo-top-left:before{ margin-left: 0;}
	#header #header-top-bar .zozo-top-right:before{ float: right; background-image: url(imgs/phone-headerIcon.png); margin-right: 0;}
	
	#header #header-top-bar .top-title{ font-family: 'Rokkitt', serif; color: #000; font-weight: bold; font-size: 20px; clear: both; display: block;}	

	/*Header Logo Bar*/
#header #header-top-bar, #header #header-logo-bar {border: none; background: transparent;}
#header #header-logo-bar { text-align: center;}
#header #header-logo-bar #zozo-logo { left: 50%; margin-left: -145px;}

	#header #header-logo-bar #zozo-logo a{ position: relative; z-index: 10;}

#header #header-main ul#main-menu {}
#header #header-main ul.nav{}

body .header-section.header-fullwidth-menu .header-main-section .zozo-main-nav > li > a { line-height: 40px; height: 50px;}

body #header #header-main ul.nav > li > a, .zozo-main-nav > li > a{ 
	color: #fff; font-size: 20px; font-weight: normal; letter-spacing:.5px;
}
	body #header #header-main ul.nav > li { border-top: 5px solid #e86c1f/*Folino Orange*/; margin-bottom: -5px;}
	body #header #header-main ul.nav > li > a:hover{ color: #000;}

#header #header-main { border-bottom: 5px solid #000;}

body #header #header-main ul.nav > li.active > a, body #header #header-main ul.nav > li.active > a:hover{
	background: #000; padding-left: 15px; padding-right:15px; margin-right: 10px;
}
	body #header #header-main ul.nav > li.active > a:after, body #header #header-main ul.nav > li.active > a:hover:after {
		height: 99%; top: 0;
	}

/*Drop-down Navigation*/
body #header #header-main #main-menu .dropdown-menu{
	margin-top: -5px; background: rgba(0,0,0,0.85) !important; border-top: 0;
}
	body #header #header-main #main-menu .dropdown-menu li{ background: transparent; }
		body #header #header-main #main-menu .dropdown-menu li:before {border-color: #000;}
		body #header #header-main #main-menu .dropdown-menu > li > a{ color: #fff;}
		body #header #header-main #main-menu .dropdown-menu > li > a:hover{ color: #ea9d3a/*Folino Light Orange*/;}
/*Sticky Navigation*/
body #header .header-sticky.is-sticky { }
body #header .header-sticky.is-sticky #header-main ul.nav > li{ border-top: 0;}

body #header .header-sticky.is-sticky #header-main { margin-top: -3px;/*hide construction bar*/}

/*Navigation Search*/
.main-bar-item.item-search-toggle { 
	margin-top: -5px;/*account for border*/
}
.search-trigger{
	color: #fff; padding: 22px 15px 16px 15px;
	background: #ce5911 /*Dark Orange*/;
	border-bottom: 5px solid #bb510f; 
}
	.search-trigger:hover{
		background: #000; border-color: #ce5911 /*Dark Orange*/;
	} 
		.search-trigger:hover, .search-trigger:hover:before { color: #fff;}

/* *** Content *** */

/*default dash divder - Section Title*/

body .parallax-title {margin-bottom: 30px}
body .parallax-title:after {
	background: transparent url(imgs/dash-divide.png) left repeat-x; width: 100%; height: 3;
}

/*Folino Logo Icon Divider*/ 
.f-divider, /*All separator elements*/.vc_separator .vc_sep_holder .vc_sep_line{
	border: none !important; border-color: transparent !important; height: 35px !important;
	background: transparent url(imgs/divider-F.png) center no-repeat !important;
} 
/*separator element*/.vc_separator { height: 15px; margin-bottom: 60px !important;}

/*Lead-in*/
.lead-in{ font-family: 'Rokkitt', serif; color: #e86c1f/*Folino Orange*/;}
	body .lead-in p{ font-size: 2em; color: #e86c1f/*Folino Orange*/;}

/*Contact*/
ul.contact-info{}
ul.contact-info li{
	margin-bottom: 15px;
	line-height: 1.2em;
}
ul.contact-info li i.fa{
	background: rgba(0,0,0,0.5);
	border-radius: 100%; margin: 0 8px 8px 0;
	padding: 11px; width: 30px; height: 30px; line-height:10px;
	float: left; display: inline-block; 
	font-size: 15px; color: #666;
}
	ul.contact-info li i.fa.fa-envelope-o{ padding-left: 8px;}

/*Image Captions*/
body .vc_figure .vc_figure-caption{
	background: #ddd; margin-top: 0; padding: 15px 20px; line-height: 1.8em;
}

/*Testimonials*/
body .testimonial-item.tstyle-border .testimonial-content, 
body .testimonial-item.tstyle-no-border .testimonial-content{
	border: 3px solid #e86c1f/*Folino Orange*/; border-radius: 0; margin-bottom: 25px;
}

body .testimonial-item.tstyle-border .testimonial-content:after{ 
	border-color: #e86c1f/*Folino Orange*/ transparent transparent;
	border-width: 20px; bottom: -40px;
}

body .testimonial-item .testimonial-content{}

body .testimonial-item .testimonial-img > img, body .testimonial-carousel-slider .owl-item .testimonial-img img{
	border-radius: 0; border: 3px solid #e86c1f/*Folino Orange*/;
	/*Rotate*/
	-ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
    transform: rotate(-12deg);
}

.testimonial-carousel-slider .testimonial-item .testimonial-content{}

/* *** Specialty Pages *** */
/* ** Home ** */
body.home #content.site-content{ padding-top: 0; padding-bottom: 0;}

/*body.home #content{ margin-top: -100px;} /*pull up content*/

/*Feature*/
body.home #feature-area {}
body.home #feature-area .intro-msg{
	text-align: right;
}

body.home #feature-area .intro-msg:before{
	display: block; position: absolute; z-index: -1;top: -65px;
	content:""; width: 800px; height: 800px;  
	/*Rotate*/
	-ms-transform: rotate(-15deg); /* IE 9 */
    -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
    transform: rotate(-15deg);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e86c1f+0,e86c1f+100&0.8+0,0.01+100 */
	background: -moz-linear-gradient(left,  rgba(232,108,31,0.8) 0%, rgba(232,108,31,0.01) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(232,108,31,0.8) 0%,rgba(232,108,31,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(232,108,31,0.8) 0%,rgba(232,108,31,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cce86c1f', endColorstr='#03e86c1f',GradientType=1 ); /* IE6-9 */

}

body.home #feature-area .intro-msg h1{
	margin: 0; font-size: 75px; line-height: 58px;
}

body.home #feature-area .vc_general.vc_btn3{ background-color: rgba(0,0,0,0.8); color: #fff;}
	body.home #feature-area .vc_btn3:before { background: #000;}
		body.home #feature-area .vc_general.vc_btn3:hover{ background: #000;}
		body.home #feature-area .vc_btn3:before { background: #000;}
			body.home #feature-area .vc_btn3:hover:before { background: #e86c1f/*Folino Orange*/;}
	body.home #feature-area .vc_btn3:after{ display: none;	}

/*Feature Projects - Home*/
body.home #recent-projects .zozo-parallax-header { margin: 0;}
body.home #recent-projects .parallax-title:after {display: none;}

body .zozo-portfolio .portfolio-title { }
	body .zozo-portfolio .portfolio-title h4{ text-transform: none;}

body.home #recent-projects .zozo-portfolio .portfolio-bottom{
	background: #424242; border-top: 5px solid #2b2b2b;
} 
body .zozo-portfolio .portfolio-bottom .portfolio-excerpts {  
}
body .zozo-portfolio .portfolio-bottom .portfolio-excerpts p{ color: #aeaeae; }

body .zozo-portfolio .portfolio-mask a{
	padding: 15px; height: 65px; width: 65px; font-size: 20px;
    line-height:26px;  margin: 0 5px; border-width: 3px;
}



/*Recent News - Home*/
body .zozo-portfolio .portfolio-title h4,
body.home #recent-news .home-news .vc_grid .vc_custom_heading h4{ text-transform: none; line-height: 1.1em;}

body .zozo-portfolio .portfolio-title h4 a,
body.home #recent-news .home-news .vc_grid .vc_custom_heading h4 a{
	color: #e86c1f/*Folino Orange*/;
}
	body .zozo-portfolio .portfolio-title h4 a:hover, body.home #recent-news .home-news .vc_grid .vc_custom_heading h4 a:hover{
		opacity: .5; color: #e86c1f/*Folino Orange*/;
	}


/*Services - Home*/
body.home #services {overflow: visible;}/*show negative margin row*/
/*Feature Box - Single Service Item*/
body.home #highlight-services .feature-box-style.folino-service {}
body.home #highlight-services .feature-box-style.folino-service .grid-box-inner{ margin-bottom: 35px;}
body.home #highlight-services .feature-box-style.folino-service .grid-content-wrapper { height: 200px; vertical-align: top;}
body.home #highlight-services .feature-box-style.folino-service .grid-title { line-height: .9em;}
body.home #highlight-services .feature-box-style.folino-service h2.grid-title{ font-size: 30px; font-weight: normal; margin-bottom: 8px;}
body.home #highlight-services .feature-box-style.folino-service .grid-image-wrapper{ max-width: 70px;}
	body.home #highlight-services .feature-box-style.folino-service .grid-image-wrapper img{ width: 100%; max-width: 100%;}
/* ** END Home ** */

/* *** Footer *** */
body #footer, body .page-title-section { 
	background: #484848; /* Old browsers */
	background: -moz-linear-gradient(top,  #484848 0%, #242424 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #484848 0%,#242424 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #484848 0%,#242424 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484848', endColorstr='#242424',GradientType=0 ); /* IE6-9 */ 
}
	body #footer{}
	
body #footer, body #footer .widget, body #footer .footer-widgets p {color: #ccc;}

body #footer .widget h3.widget-title{ 
	border-bottom: 2px solid #fff; color: #e86c1f/*Folino Orange*/; text-transform: none; letter-spacing: 0; font-size: 25px;
	overflow: visible; line-height: 50px; margin-bottom: 15px;
}
body #footer .footer-widgets .widget h3:before {
	background: transparent url(imgs/office-footerIcon.png) center no-repeat; background-size: contain;
	content: ""; display: inline-block; float: left; width: 50px; height: 65px; margin: 0 8px -6px 0;
}
	body #footer #footer-widgets-4.footer-widgets .widget h3:before{
		background-image: url(imgs/links-footerIcon.png);
	}

/*Footer Contact Info & Social*/
/*Social Links*/
body #footer .zozo-social-icons li a{ width: 45px; height: 45px;}
	body #footer .zozo-social-icons li i{font-size: 20px; line-height: 45px;} /*social icons*/
	/*background color - social links, contact info icons, and footer menu link hover*/
	ul.contact-info li i.fa, body #footer .zozo-social-icons li a, body #footer .widget_nav_menu .menu li a:hover{ 
		background: rgba(0,0,0,0.5);
	}
	body #footer .zozo-social-icons li a:hover{
		background: #e86c1f/*Folino Orange*/;
		/*Rotate*/
		-ms-transform: rotate(-12deg); /* IE 9 */
		-webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
		transform: rotate(-12deg);
	}
/*Footer links*/
body #footer a{ color: #ea9d3a/*Folino Light Orange*/;}
	body #footer a:hover{ color: #fff;}

/*Footer Testimonials*/
body #footer .testimonial-item .testimonial-content {background: #000;}
	body #footer .testimonial-item .testimonial-content blockquote p{ font-size: 1.1em;}
/*Footer Menu*/
body #footer .widget_nav_menu .menu { padding: 0; margin: 0;}
body #footer .widget_nav_menu .menu li{ margin: 0;}
body #footer .widget_nav_menu .menu li a{ display: block; padding: 8px 16px; border-bottom: 1px solid #5c5c5c;}

/*Footer Logo*/
body #footer .widget #footer-logo { width: 110px; height: auto; margin: 0 0 15px 0;}
/*Footer - Copyright*/
body #footer-copyright-container{ background: #000;}
body #footer-copyright-container, body #footer-copyright-container p, #copyright-text, #copyright-text p{ color: #7a7a7a;}

body #footer-copyright-container a#footer-login-link {float: right;}