/*------------------------------
	4.1 Header
------------------------------*/
.site-header {
	padding: 30px 0px 0px 0px;
	//border-bottom: 1px solid $border;
	position: relative;
	z-index: 99;
	width: 100%;
	@include for(screens-large) {
		padding-top: 15px;
	}
	.site-branding {
		float: left;
		@include for(screens-large) {
			float: left;
			width: 100%;
		}
		@include for(screens-small) {
			float: left;
			max-width: 80%;
		}

		.site-title {
			margin-bottom: 0px;
			font-size: 27px;
			font-weight: bold;
			margin-top: 0;
		}
	}

	.header-right-wrap {
		float: right;
		@include for(screens-large) {
			float: none;
			width: 100%;
			padding: 0px 0px 30px;
		}
		@include for(screens-small) {
	    	padding: 0px 0px 30px;
	    }


		.header-widget {
			margin-bottom: 15px;
			margin-top: 0px;
			float: none;
			display: block;
			@include for(screens-large) {
				float: left;
				margin: 0px;
				display: none;
			}
		}
		
		

		.header-widget-mobile {
			@include for(screens-large) {
				display: block !important;
				position: absolute;
				width: 100%;
				left: 0;
				padding-left: 30px;
				background: #FFFFFF;
				border-top: 1px solid $border;
				padding: 10px 20px;
				.extract-element {
					margin: 0px 30px 0px 0px;
					float: left;
					.header-social  {
						a {
							margin: 0px 4px 0px 0px;
						}
					}
				}
			}
			@include for(screens-tiny) {
				.extract-element {
					margin: 0px 0px 0px 0px;
					float: left;
					.header-social  {
						a {
							margin: 0px 3px 0px 0px;
						}
					}
				}
			}
		}

		

		.extract-element {
			float: right;
			margin-left: 15px;
			font-size: 12px;
			@include for(screens-large) {
				margin-left: 0px;
				margin-right: 15px;
			}

			.phone-text {
				font-family: $font_heading;
				font-size: 15px;
				font-weight: normal;
				margin-left: 2px;
				letter-spacing: 0.5px;
				color: $primary;
			}
		}
		.header-social {
			a {
				margin-left: 3px;
				i {
					padding: 0;
				    border-radius: 50%;
				    font-size: 1.20em;
				    line-height: 1.6em;
				    height: 1.8em;
				    width: 1.8em;
				    text-align:center;
				    border: 1px solid #DDDDDD;
				    color: #999999;
				    &:hover {
				    	color: #222222;
				    	border-color: #222222;
				    }
				}
			}
		}
	}
}


.header-transparent {
	.site-header {
		//padding: 15px 0px 0px 0px;
		border-bottom: none;
		position: absolute;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px, transparent 95%);
		color: $text;
		.header-text {
			opacity: 0.7;
		}
	}
	@include for(large-screens){
		.header-right-wrap {
			color: #FFFFFF;
			.extract-element {
				.phone-text {
					//color: #FFFFFF;
					color: $primary;
				}
			}
			.header-social {
				a {
					i {
						border-color: #ffffff;
						color: #FFFFFF;
						&:hover {
							background: #FFFFFF;
							color: #222222;
							border-color: #ffffff;
						}
					}
				}
			}
		}
	}
	
	@include for(large-screens){
		.wpc-menu {
			a {
				&:hover {
					opacity: 1;
					color: #FFFFFF;
				}
			}
			> li > a {
				color: #ffffff;
				opacity: 0.7;
			}
			> li.current-menu-item, > li.current-menu-ancestor {
				> a {
					//border-top-color: $secondary;
					opacity: 1;
					color: #FFFFFF;
				}
			}
		}
		
		.page-header-wrap h1, .page-subtitle {
			text-shadow: 1px 1px 1px #000;
		}
	}
	#nav-toggle {
		color: #FFFFFF;
	}

	@include for(screens-large){
		.wpc-menu.wpc-menu-mobile {
			> li > a {
				//color: #999999;
				opacity: 1;
			}
		}
	}
} // END header-transparent.

/* Header Topbar
------------------------------*/
.header-topbar {
	.site-header {
		padding-top: 35px;
	}
	.wpc-menu > li > a {
		padding-bottom: 35px;
	}
	.site-header .site-branding {
		margin-top: 0px;
	}
	#nav-toggle {
		top: 4px;
	}
}

/* Header Centered
------------------------------*/
.header-centered {
	.site-header .container {
		
		@include for(large-screens) {
			max-width: 100%;
			width: 100%;
			padding: 0px;
		}
	}
	.site-header .header-right-wrap {
		float: none;
		width: 100%;
		display: block;
		text-align: center;
	}
	.site-header {
		padding-top: 35px;
	}
	
	.site-header .site-branding {
		margin-top: 0px;
		float: none;
		display: block;
		text-align: center;
		margin-bottom: 35px;
		@include for(screens-large) {
			margin-bottom: 0px;
			float: left;
			text-align: left;
		}
	}
	.wpc-menu {
		float: none;
		border-top: 1px solid #e9e9e9;
		ul li {
			text-align: left;
		}
	}
	.wpc-menu > li {
		float: none;
		display: inline-block;
	}
	#nav-toggle {
		top: 4px;
	}
	.wpc-menu > li > a {
		padding-bottom: 25px;
		padding-top: 23px;
	}
}


/* Top Bar
------------------------------*/
.site-topbar {
	font-size: 12px;
	font-family: $font_heading;
	background: #f8f9f9;
	border-bottom: 1px solid #e9e9e9;
	color: #888888;
	overflow: hidden;
	a {
		color: #888888;
		text-decoration: none;
		&:hover {
			color: $primary;
		}
	}
	.container {
		@include for(screens-medium) {
			padding: 0px;
		}
	}
	.widget {
		margin-bottom: 0px;
		a {
			color: #888888;
			&:hover {
				color: $primary;
			}
		}
		@include for(screens-medium) {
			display: block;
			width: 100%;
			text-align: center;
			border-top: 1px solid #e9e9e9;
			margin: 0px;
		}
		// @include for(medium-screens) {

		// }
		@include for(large-screens) {

		}
	}

	.topbar-highlight {
		letter-spacing: 0.5px;
	}

	.topbar-left {
		float: left;
		@include for(screens-medium) {
			float: none;
		}
		// @include for(screens-medium) {
		// 	float: none;
		// 	text-align: center;
		// 	width: 100%;
		// 	display: block;
		// 	.widget {
		// 		float: none;
		// 	}
		// }
		@include for(large-screens) {

		}
		ul li a {
			margin-right: 20px;
		}
		.topbar-widget {
			padding-right: 15px;
			margin-right: 15px;
			float: left;
			border-right: 1px solid #e9e9e9;
			&:first-child {
				border-left: 1px solid #e9e9e9;
				padding-left: 15px;
			}
		}
		.topbar-address, .topbar-phone, a.topbar-button {
			margin-right: 15px;
		}
	}
	.topbar-right {
		float: right;
		@include for(screens-medium) {
			float: none;
		}
		// @include for(screens-medium) {
			
		// }
		@include for(large-screens) {

		}
		ul li a {
			margin-left: 20px;
		}
		.topbar-widget {
			padding-left: 15px;
			margin-left: 15px;
			float: right;
			border-left: 1px solid #e9e9e9;
			&:first-child {
				border-right: 1px solid #e9e9e9;
				padding-right: 15px;
			}
		}
		.topbar-address, .topbar-phone, a.topbar-button {
			margin-left: 15px;
		}
	}

	.widgettitle {
		display: none;
	}

	.topbar-widget {
		padding: 12px 0px 12px;
		@include for(medium-screens) {
			float: none;
		}
		@include for(large-screens) {
			
		}
	}
	.widget.widget_nav_menu {
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			li {
				display: inline-block;
				margin: 0;
				padding: 0;
				a {

				}
			}
		}
	}

	.topbar-social {

		a {
			margin: 0px 7px;
			font-size: 15px;
			line-height: 1;
		}
	}

	.search-form {
		margin-bottom: 0px;
		.search-field {
			float: none;
			padding: 3px 7px 5px;
			font-size: 10px;
			margin: -6px 0px;
			width: auto;
			border-color: #e9e9e9;
		}
	}
	
	// Responsive
	@include for(small-screens) {

	}
	@include for(medium-screens) {

	}
	@include for(large-screens) {

	}

}


@include for(large-screens) {

	.site-header.fixed-on {
		width: 100%;
		z-index: 100;
	}
	
	.header-normal .site-header.fixed-on {
		background: rgba(255,255,255,0.99);
	}

	.site-header.header-fixed {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		transition: all 0.5s ease;
		z-index: 100;
		background: rgba(255,255,255,0.99);
		padding-top: 15px;
		.wpc-menu > li > a {
			padding-bottom: 15px;
			transition: all 0.5s ease;
		}
	}
	.header-transparent {
		.site-header.fixed-on {
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0px, transparent 95%);
		}
		.site-header.header-fixed {
			background: rgba(0,0,0,0.8);
		}
	}

	.header-topbar .site-header.header-fixed {
		padding-top: 22px;
		transition: all 0.5s ease;
		.wpc-menu > li > a {
			padding-bottom: 25px;
			transition: all 0.5s ease;
		}
	}

	.header-centered .site-header.header-fixed {
		padding-top: 0px;
		.site-branding {
			display: none;
		}
		.wpc-menu > li > a {
			padding-bottom: 25px;
			transition: all 0.5s ease;
		}
	}

}

@include for ( screens-large ) {
	.site-content {
		padding-top: 0px !important;
	}
}


/* Primary Navigation
------------------------------*/
.main-navigation {
	position: relative;
	z-index: 100;
	@include for(screens-large) {
		float: right;
	}
	@include for(screens-tiny) {
		float: none;
		#nav-toggle {
			display: block;
			text-align: center;
		}
	}
}
.wpc-menu, .wpc-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
// Essential Styles
.wpc-menu {
	float: right;
	@extend .clearfix;
	ul {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		z-index: 99;
	}
	ul ul {
		top: 0;
		left: 100%;
	}
	li {
		position: relative;
	}
	> li {
		float: left;
	}
	li:hover > ul,li.sfHover > ul {
		display: block;
	}
	a {
		display: block;
		position: relative;
	}
}
// Skin
.wpc-menu {
	ul {
		min-width: 12em; // allow long menu items to determine submenu width
		*width: 12em;    //no auto sub width for IE7, see white-space comment below
		box-shadow: 0 9px 14px rgba(0, 0, 0, 0.1);
	}
	li {
		white-space: nowrap;  // no need for Supersubs plugin
		*white-space: normal; // ...unless you support IE7 (let it wrap)
		-webkit-transition: background .2s;
		transition: background .2s;
	}
	li:hover,
	li.sfHover {
		// only transition out, not in
		-webkit-transition: none;
		transition: none;
	}
	
	a {
		color: #999999;
		font-family: $font_heading;
		padding: 0px 18px 30px;
		font-size: 14px;
		font-weight: 500;
		//text-transform: uppercase;
		text-decoration: none;
		zoom: 1;
		// border-top: 2px solid transparent;
		// border-bottom: 2px solid transparent;
		&:hover {
			color: $primary;
		}
	}
	ul li {
		//background: $primary;
		//border-top: 1px solid rgba(0,0,0,0.05);
		// &:hover a{
		// 	background: rgba(0,0,0,0.05);
		// }
		a {
			padding: 8px 18px;
			color: #999999;
			font-size: 13px;
			text-transform: none;
			background: #ffffff;
			&:hover {
				background: $primary;
				color: #ffffff;
			}
		}
	}
	
	ul li.current-menu-item > a {
		background: $primary;
		color: #ffffff;
	}

	// Hover & Active
	> li:last-child > a {
		padding-right: 0px;
	}
	> li:hover > a {
		//border-top-color: $secondary;
	}
	> li.current-menu-item, > li.current-menu-ancestor {
		> a {
			//border-top-color: $secondary;
			color: $primary;
		}
	}
	
}
// Arrows
@include for(large-screens){
.wpc-menu {
	ul li.menu-item-has-children > a {
		padding-right: 28px;
		*padding-right: 22px; // no CSS arrows for IE7 (lack pseudo-elements)
	}
	ul li.menu-item-has-children > a:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -14px;
		height: 0;
		width: 0;
		// order of following 3 rules important for fallbacks to work
		border: 4px solid transparent;
		border-top-color: #eeeeee; // edit this to suit design (no rgba in IE8)
		border-top-color: rgba(0,0,0,.3);
	}
	> li > li.menu-item-has-children > a:focus:after,
	> li:hover > li.menu-item-has-children > a:after,
	> .sfHover > li.menu-item-has-children > a:after {
		border-top-color: white; // IE8 fallback colour
	}
	ul li.menu-item-has-children > a:after {
		margin-top: -3px;
		margin-right: 0px;
		border-color: transparent;
		border-left-color: #dddddd; // edit this to suit design (no rgba in IE8)
		border-left-color: rgba(0,0,0,.2);
	}
	ul li > li.menu-item-has-children > a:focus:after,
	ul li:hover > li.menu-item-has-children > a:after,
	ul .sfHover > li.menu-item-has-children > a:after {
		border-left-color: white;
	}
}
}

/* Responsive Mobile Navigation
------------------------------*/
#nav-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: #222222;
    line-height: 1;
    margin-top: -1px;
    position: absolute;
    top: 23px;
    right: 30px;
}
.nav-toggle-subarrow {
    display: none;
}
@include for(screens-large) {
	.main-navigation {
		position: static;
	}
	.main-navigation .wpc-menu {
        width: 100% !important;
        display: none;
    }
	.wpc-menu.wpc-menu-mobile {
		display: block !important;
	    position: absolute;
	    right: 0;
	    width: 100%;
	    background: transparent;
	    z-index: 100;
	    border-bottom: 1px solid $border;
	    > li > a {
	    	padding: 12px 20px;
	    }
	    ul {
	    	box-shadow: none;
	    	padding-bottom: 0;
	    	position:static!important;
        	display: none!important;
	    	li:last-child {
	    		border-bottom: none;
	    	}
	    	li a {
	    		padding: 12px 35px;
	    		&:hover {
	    			background: transparent;
	    		}
	    	}
	    	li li a {
	    		padding: 12px 70px;
	    	}
	    	li li li a {
	    		padding: 12px 105px;
	    	}
	    }
	    > li > a {
			//padding-left: 20px;
		}
	    li {
	    	background: #FFFFFF;
			border-top: 1px solid $border;
			float: none!important;
	        display: block!important;
	        width: 100%!important;
		}
		li.current-menu-item {
			> a {
				color: #000000;
				background: #FFFFFF;
			}
		}
		a {
			color: $text;
			&:hover {
				color: #000000;
			}
		}
		.nav-toggle-subarrow{
	        display: block;
	        color: #999999;
	        font-weight: normal;
	        position: absolute;
	        top: 0;
	        right: 0;
	        cursor: pointer;
	        text-align: center;
	        padding: 6px 20px 7px;
	        z-index: 10;
	        font-size: 22px;
	    }
	    .nav-toggle-dropdown > .nav-toggle-subarrow .fa-angle-down:before {
	    	content:"\f106" !important;
	    }
	    .nav-toggle-dropdown > ul{
	    	display: block !important;
	    }
	}
	#nav-toggle {
        display: inline-block;
    }
    .nav-toggle-active i {
    	color: $primary;
    }
    .nav-toggle-active i.fa-bars:before {
    	content:"\f00d" !important;
    }
}

/*------------------------------
	4.2 Content
------------------------------*/

/* Content elements
------------------------------*/
.blog .hentry, .archive .hentry, .search .hentry {
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 1px solid $border;
}

.hentry.sticky {
	padding: 30px;
	background: $meta;
	@include border-radius(3px);
	.post-thumbnail img {
		@include border-radius(3px);
	}
}

.more-link {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	padding-top: 10px;
	&:hover {
		text-decoration: underline;
	}

}

.single .hentry {
	margin-bottom: $base;
}

.loop-pagination {
	display: inline-block;
	margin-bottom: 20px;
	a, span {
		padding: 6px 13px 7px;
		background: #BBBBBB;
		color: #FFFFFF !important;
		@include border-radius(2px);
		text-decoration: none;
		&:hover{
			background: $primary;
		}
	}
	a.current, span.current {
		background: $primary;
	}
}

/* Page & Archive Title */
.page-header .page-title, .archive-title {
	font-size: 25px;
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-bottom: 1px solid $border;
	text-transform: uppercase;
}

/*------------------------------
	4.3 Sidebar
------------------------------*/
.widget-area {
	ul {
		list-style: none;
		padding-left: 0;
	}
	a {
		text-decoration: none;
	}
}


/*------------------------------
	4.4 Footer
------------------------------*/
.site-footer {
	padding: 0px 0 0px;
	background: #111111;
	color: #999999;
	font-size: 13px;
	a, .widget a {
		color: #dddddd;
		&:hover {
			color: #FFFFFF;
			text-decoration: underline;
		}
	}
	.widget {
		font-size: 13px;
		line-height: 1.8;
	}
	table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td {
		border-color: rgba( 255,255,255,0.3);
	}
	textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
		border-color: rgba( 255,255,255,0.3);
	}
}

.footer-1-columns .footer-column {
	width: 100%;
}

.footer-2-columns {
	.footer-column {
		width: 100%;
	}
	@include for(medium-screens) {
		.footer-column {
			width: percentage( ( ( $width - $gutter ) / 2 ) / $width );
			float: left;
			margin-right: percentage($gutter / $width);
		}
		.footer-2 {
			margin-right: 0;
		}
	}
}

.footer-3-columns {
	.footer-column {
		width: 100%;
	}
	@include for(medium-screens) {
		.footer-column {
			width: percentage( ( ( $width - $gutter ) / 2 ) / $width );
			float: left;
			margin-right: percentage($gutter / $width);
		}
		.footer-2 {
			margin-right: 0;
		}
	}
	@include for(large-screens) {
		.footer-column {
			width: percentage( ( ( $width - $gutter*2 ) / 3 ) / $width );
			float: left;
			margin-right: percentage($gutter / $width);
		}
		.footer-3 {
			margin-right: 0;
		}
	}
}

.footer-4-columns {
	.footer-column {
		width: 100%;
	}
	@include for(medium-screens) {
		.footer-column {
			width: percentage( ( ( $width - $gutter ) / 2 ) / $width );
			float: left;
			margin-right: percentage($gutter / $width);
		}
		.footer-2, .footer-4 {
			margin-right: 0;
		}
	}
	@include for(large-screens) {
		.footer-column {
			width: percentage( ( ( $width - $gutter*3 ) / 4 ) / $width );
			float: left;
			margin-right: percentage($gutter / $width);
		}
		.footer-4 {
			margin-right: 0;
		}
	}
}

.site-footer .footer-columns {
	padding: 40px 0px;
	.footer-column .widget {
		padding-bottom: 0;
		margin-bottom: 30px;
		border: none;
		@include for(medium-screens) {
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0px;
			}
		}
		.widget-title {
			color: #eeeeee;
			font-size: 15px;
			text-transform: uppercase;
			margin-bottom: 20px;
			letter-spacing: -0.1px;
			font-weight: 500;
		}
	}
	.widget_nav_menu {
		ul ul, ul ul ul {
			padding: 0px;
		}
		ul li{
			padding: 0;
			
			a {
				display: block;
				padding: 5px 10px 9px 17px;
				position: relative;
				border-bottom: 1px dotted rgba(255, 255, 255, 0.1); 
				&:before {
					content: "\f105";
					font-family: FontAwesome;
					font-size: 10px;
					display: block;
					position: absolute;
					left: 0;
					top: 8px;

				}
			}
		}
	}
	.widget_nav_menu #menu-footer-widget-menu {

			margin-top: -7px;
			li {
				float: left;
			    margin-bottom: 0;
			    width: 50%;
			    padding: 8px 0px;
			    a {
			    	display: unset;
			    	padding: 0;
			    	border: none;
			    	&:before {
			    		content: none;
			    	}
			    }
			}

	}

	.widget_wpc_posts ul li {
		background: rgba(255, 255, 255, 0.03); 
	}
	.contact-info-item .contact-text {
		width: 30px;
		i {
			font-size: 16px;
		}
		i.fa-envelope {
			font-size: 12px;
			position: relative;
			top: -3px;
		}
		i.fa-fax {
			font-size: 14px;
			position: relative;
			top: -3px;
		}
	}

	.contact-info-item .contact-value {
		margin-left: 35px;
	}

	.contact-info-box img {
		margin-bottom: 30px;
	}
	ul.hours {
		li {
			border-top: 1px dotted rgba(255, 255, 255, 0.1);
		}
		li:first-child {
			border-top: none;
			//border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
		}
		span {
			float: right;
			font-weight: bold;
		}
	}
}

.site-info-wrapper {
	background: #222222;
	border-top: 1px solid #333333;
	padding: 20px 0px;
	font-size: 12px;
	.site-info {
		.copy_text {
			float: none;
			text-align: center;
			font-size: 13px;
			margin-bottom: 30px;
			@include for(medium-screens) {
				float: left;
				margin-bottom: 0px;
				text-align: left;
			}
			a {
				text-decoration: none;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.footer-menu {
			float: none;
			text-align: center;
			@include for(medium-screens) {
				float: right;
				text-align: left;
			}
			ul {
				padding: 0;
				margin: 0;
				list-style: none;
				li {
					padding: 0;
					margin: 0;
					display: inline-block;
					line-height: 1;
					a {
						float: left;
						margin-left: 15px;
						text-decoration: none;
						font-size: 12px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		
	}
}

.footer-social {
	float: left;
	padding: 10px 18.5px;
	color: #FFFFFF;
	background: $primary;
	margin-top: -16px;
	position: relative;
	label {
		font-size: 13px;
		margin-right: 10px;
		color: #222222;
	}
	&:after {
		border-right: 9px solid #777777;
	    border-top: 16px solid transparent;
	    content: "";
	    display: block;
	    height: 0;
	    left: -9px;
	    position: absolute;
	    top: 0;
	}
	a {
		margin-right: 3px;
		i {
			padding: 0;
		    border-radius: 50%;
		    font-size: 13px;
		    line-height: 1.6em;
		    height: 1.8em;
		    width: 1.8em;
		    text-align:center;
		    border: 1px solid #222222;
		    color: #222222;
		    &:hover {
		    	color: #FFFFFF;
		    	border-color: #FFFFFF;
		    }
		}
	}
}

/* Client Logo Grid
------------------------------*/
.client-logo img {
	border: 1px solid $border;
}
.client-table img {
	width: 100%;
	&:hover {
		opacity: 0.8;
	}
}

/* Back To Top
------------------------------*/
#btt {
    background: none repeat scroll #222222;
    opacity: 0.8;
    border: 1px solid #333333;
    border-radius: 2px;
    bottom: 21px;
    cursor: pointer;
    padding: 8px 15px;
    position: fixed;
    right: 20px;
    z-index: 50;
}

/* Browser Suppport
------------------------------*/
.ie9, .ie10, .ie11 {
	.site-header .header-right-wrap {
		float: none;
	}
}

