/*
Theme Name: WPFRT Compatible Theme
Theme URI: https://i-tul.com/
Description: Custom Theme
Author: Ryan Holden
Version: 0.3.4

This file no longer in use for front-end in favor of assets/less/wpfrt.less

wpfrt.less can include regular css syntax, does NOT need to be LESS format.

wpfrt.less is compressed into the compressed.cssgz file on every page load when logged in as a admin.. thus changes made to wpfrt.less won't take affect until you login as admin and refresh the front-end page

No need to add a seperate css file when modifiying this theme.

*/


body {
	min-width:303px;
}
img.alignright, img.alignleft {max-width:50%;}


/* homepage banner */
#abanner {max-width:1400px;margin:auto;height:550px;overflow:hidden;}
#abanner a {color:#ddcb9d;}

#abanner .project-name, #abanner .project-location {
	line-height: 1;
    font-family: 'Magra', sans-serif;
    color: #e9dbc4;
}
#abanner .project-name {font-size:26px;
    margin-bottom: 10px;
}
#abanner .project-location {font-size:16px;margin-bottom:40px;}

#abanner {position:relative;}
#abanner .slide {width:100%;height:550px;}
#abanner #projects .bx-controls {position:absolute;z-index:99;}

#abanner #projects > .bx-wrapper > .bx-controls,
#abanner .project-content,
#abanner .project .bx-controls {
	width:600px;
	right:0;
}

#abanner #projects > .bx-wrapper > .bx-controls {
	display:none;
	/*padding:10px 20px;
	background: rgba(40, 38, 35, 0.7);
	top:390px;*/
}
#abanner #projects > .bx-wrapper > .bx-controls a {
	color:#b4d8f9;
	margin-right:20px;
}
#abanner #projects > .bx-wrapper > .bx-controls a.disabled {
	display:none;
}
#abanner #projects > .bx-wrapper > .bx-controls:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 20px 40px 0;
    border-color: transparent rgba(40, 38, 35, 0.7) transparent transparent;
    left: 0;
    top: 0;
    margin-left: -20px;
}

#abanner .project-content {
	position: absolute;
	color:#ffffff;
    background: rgba(0, 0, 0, 0.7);
    top: 70px;
    height: 300px;
    visibility: hidden;
}
#abanner .project-content > .padded {
	padding:20px;
}
#abanner .project-content:before {
content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 0 300px 20px;
    border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
    top: 0;
    left: -20px;
}
#abanner .kontrols {
	position: absolute;
    bottom: 0;
    margin-bottom: -60px;
    background: rgba(40, 38, 35, 0.7);
    width: 100%;
    /*padding: 10px 10px 10px 20px;*/
    /*margin-left: -20px;*/
}
#abanner .kontrol-prev, #abanner .kontrol-next {
	margin:0 5px;
}
#abanner .kontrols > .padded {
	padding:10px 10px 10px 20px;
}
#abanner .kontrols:before {
	    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 20px 40px 0;
    border-color: transparent rgba(40, 38, 35, 0.7) transparent transparent;
    left: 0;
    top: 0;
    margin-left: -20px;
}
#abanner .kontrols > span {
	margin-right:15px;
}
#abanner #projects .project.first .kontrol-prev,
#abanner #projects .project.last .kontrol-next {
	display:none;
}
#abanner .project .bx-controls {
	position: absolute;
    top: 150px;
    /*padding:0 20px;*/
}
#abanner .project .bx-controls .bx-pager {
	padding:0 20px;
}
#abanner .project .bx-controls .bx-pager-item {
	display:inline-block;
    margin-right:10px;
}
#abanner .project .bx-controls .bx-pager-link {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #705a0b;
    border-radius: 20px;
    font-size: 0;
}
#abanner .project .bx-controls .bx-pager-link.active {
    background: #ceba7d;
}
#abanner .project-details {margin-bottom:20px;}

.homepage #abanner .bx-controls, .homepage #abanner .bx-controls-direction {display:block;}

.blog #imain {
    max-width: 980px;
}

#page-container, #project-gallery {
	margin-top:-210px !important;
}
#page-container {width: 100%; box-sizing: border-box; padding-right: 40px !important;}
#page-container .span9 {padding-right:2%;}

#asideOuter.span4 {max-width:215px;float:right;}

.category #articleOuter,
.archive #articleOuter,
.single #articleOuter,
.blog #articleOuter {
	margin-left:0 !important;
}

#asideOuter aside {margin-right:-10px;}
#asideOuter aside,
.category #articleOuter>#asideOuter>.span3>ul,
.archive #articleOuter>#asideOuter>.span3>ul,
.single #articleOuter>#asideOuter>.span3>ul,
.blog #articleOuter>#asideOuter>.span3>ul {
	float:right;
}

#project-gallery .span12 h2 {margin-bottom:10px;}
.tiled-gallery {margin-bottom:30px;}

.navbar .btn-navbar {margin-top:30px;}




.personThumb{
	display:block;
	width:100%;
	height:0;
	position:relative;
	padding-top:100%;
	overflow:hidden;
	cursor:pointer;
	margin: 15px 0;
}
.personThumb .nameOverlay{
	display:none;
	width:100%;
	height:100%;
	position: absolute;
	left:0;
	top:0;
	background: rgba(0,0,0,0.25);
}
.personThumb:hover .nameOverlay{
	display:block;
}
.personThumb .nameOverlay p{
	color:#fff;
	width:100%;
	position: absolute;
	bottom:0;
	text-align:center;
}
.personThumb .nameOverlay p strong{
	color:#fff;
	display:block;
	position:relative;
}
.personThumb .nameOverlay p strong:after{
	content: '+';
	border-radius: 50%;
	width:22px;
	height:22px;
	display:block;
	background: #fff;
	color:#666;
	position: absolute;
	right:10px;
	top:0;
}
.overlay{
	display:none;
	background: rgba(0,0,0,0.5);
	width:100%;
	height:100%;
	position: fixed;
	left:0;
	top:0;
	z-index:5000;
}
.bioModule{
	display:none;
	width: 700px;
	background: rgba(255,255,255,0.8);
	padding: 20px;
	border-top: 30px solid #555;
	position: fixed;
	top:120px;
	left:50%;
	margin: 0 0 0 -350px;
	z-index:10000;
}
.bioModule .dashicons{
	position: absolute;
	right:5px;
	top:-26px;
	color:#fff;
	font-size: 22px;
	font-family:dashicons;
	cursor:pointer;
}
.bioModule .popupImage{
	float:right;
	width:300px;
	max-width:100%;
	margin: 0 0 10px 20px;
}



@media (max-width: 980px) {
	.category #articleOuter, .archive #articleOuter, .single #articleOuter, .blog
#articleOuter,

	#page-container, #project-gallery {
		margin-top:0px !important;
	}
}
@media (max-width: 940px) {
	#page-container .span9 {padding-right:4%;}
}
@media (max-width: 900px) {
	#page-container .span9 {padding-right:6%;}
}
@media (max-width: 860px) {
	#page-container .span9 {padding-right:8%;}
}
@media (max-width: 800px) {
	#page-container .span9 {padding-right:10%;}
}
@media (max-width: 767px) {
	body {
		padding-left:0;
		padding-right:0;
	}

	#abanner {height:auto;}
	#abanner .mobile-image {height:300px;}
	#abanner .project-content {position:static;width:100%;}
	#abanner .slide {position:static !important;background-image:none !important;width:100% !important;}
	#abanner .project-content {background:#ffffff;color:#333333;height:auto;}
	#abanner .project-name, #abanner .project-location, #abanner a {color:#7a6843;}
	#abanner .slide {height:auto;}
	#abanner .project-location {margin-bottom:20px;}
	#abanner #projects .bx-controls {left: 0; top: 270px;width:160px; }
	#abanner .kontrols {top: 260px; bottom: auto; text-align: right; }
	#abanner #projects .bx-viewport {height:auto !important;}
	#abanner .kontrols a {
		color:#ffffff;
	}
	#abanner .kontrol-prev span, #abanner .kontrol-next span {display:none;}


	img.alignright, img.alignleft {display:block;}

	#page-container .span9 {padding-right:0;}
	#articleOuter>article {
	    width: 100%!important;
	}

	#asideOuter {display:none !important;}

	.category #articleOuter > #asideOuter,
	.archive #articleOuter > #asideOuter,
	.single #articleOuter > #asideOuter,
	.blog #articleOuter>#asideOuter {
	    width: 40%!important;
	}

	.blogPost .articleHolder {
	    width: 100% !important;
	    padding:0 !important;
	}


	.blogPost .thumbHolder {
		width:80%;
	}

	#personnel img {margin-bottom:20px;}
}
@media (max-width: 924px) {
	#ibanner {
		height: 290px !important;
	}
}
@media (max-width: 764px) {
	#ibanner {
		height: 237px !important;
	}
}
@media (max-width: 640px) {
	#banner {height:100px !important;}
	#banner #ibanner {
		background-size:cover !important;
	}

	#page-container, #project-gallery {
		margin-top:0 !important;
	}

	img.alignright, img.alignleft {max-width:100%;display:block;float:none;margin:0 auto 30px;}

	.category #articleOuter>article,
	.archive #articleOuter>article,
	.single #articleOuter>article,
	.blog #articleOuter>article {
		padding:30px 15px;
	}
	
	#ibanner {
		height: 107px !important;
	}
}

@media (max-width: 480px) {

}
.callouts img {
    filter: grayscale(100%)brightness(100%);
    mix-blend-mode: screen;
}
#project-gallery .span12 .load-slider {
    margin-right: 19px;
}