/*.page-banner canvas{
	background-size: 100vw !important;
}
*/
#main-wrapper{
	background-color: #000;
}

.page-banner {
    margin-bottom: 20px;
}

.page-banner:before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    opacity: .50;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

.page-banner .page-title .titlewrapper .entry-title:before,
.center-heading .entry-title:before {
	content: 'Meet';
}

.agent-items{
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px 50px;
}
	.agent-items .agent-item{
		width: 16.66%;
		padding: 10px;
	}
		.agent-items .agent-item .agent-content{
			display: block;
			position: relative;
			text-align: center;
			text-transform: uppercase;
			transition: all .3s linear;
		}
			.agent-items .agent-item .agent-content:hover{
				/*box-shadow: 0 0 7px 0 rgba(0,0,0,.7);*/
				/*transform: translateY(-3%);*/
			}
			.agent-items .agent-item .agent-content span.agent-profile{
				display: block;
				position: relative;
				z-index: 2;
			}
				.agent-items .agent-item .agent-content span.agent-profile::before{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: #000000;
					opacity: 0;
					z-index: 2;
					transition: all .3s linear;
				}
					.agent-items .agent-item .agent-content:hover span.agent-profile::before{
						opacity: 0.7;
					}

				.agent-items .agent-item .agent-content span.agent-profile::after{
					content: "\a1";
					font-family: 'altman-font' !important;
					speak: none;
					font-style: normal;
					font-weight: normal;
					font-variant: normal;
					text-transform: none;
					line-height: 1;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					position: absolute;
					z-index: 3;
					font-size: 104px;
					color: #d2b66c;
					opacity: 0;
					transition: all .3s linear;
					display: block;
					width: 171px;
					height: 104px;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}

					.agent-items .agent-item .agent-content:hover span.agent-profile::after{
						opacity: 1;
					}

				.agent-items .agent-item .agent-content span.agent-profile canvas {
					display: block;
					position: relative;
					z-index: 1;
					width: 100%;
					background-image: url("../../images/agent-no-image.png");
					background-color: #727272;
					background-size: cover;
					background-position: top center;
				}
				
				.agent-items .agent-item .agent-content span.agent-profile canvas:not([style]) {
					background-image: url(../../images/agent-placeholder-photo.png);
					background-position: center;
					background-repeat: no-repeat;
					background-color: #3c3c3c;				
				}

			.agent-items .agent-item .agent-content span.agent-detail {
				display: block;
				left: 0px;
				bottom: 0px;
				right: 0px;
				z-index: 3;
				position: relative;
				padding: 25px 0;
			}
				.agent-items .agent-item .agent-content span.agent-detail h3 {
					position: relative;
					z-index: 4;
					font-weight: 500;
					font-size: 1.250vw;
					color: #fff;
					font-family: 'Barlow Semi Condensed', sans-serif;
					letter-spacing: .030em;
				}
				.agent-items .agent-item .agent-content span.agent-detail h4{
					position: relative;
					z-index: 4;
					padding-top: 8px;
					padding-bottom: 10px;
					font-family: 'Raleway', Sans-serif, serif;
					font-size: 1vw;
					color: #898989;
				}
.agent-bottom-photo {
	padding: 0 15px;
	margin-bottom: 50px;
	text-align: center;
}
	.agent-bottom-photo img {
		max-width: 100%;
		margin: 0 auto;
	}
@media only screen and (min-width: 1601px) {
	.agent-items .agent-item .agent-content span.agent-profile::after {
		font-size: 127px;
		width: 213px;
		height: 127px;
	}
}
@media only screen and (max-width: 1199px) {
	.agent-items .agent-item .agent-content span.agent-profile::after {
		font-size: 70px;
		height: 70px;
		width: 120px;
		bottom: 2px;
	}
	.agent-items .agent-item {
		padding: 15px;
	}
		.agent-items .agent-item .agent-content span.agent-detail h3 {
			font-size: 12px;
		}
		.agent-items .agent-item .agent-content span.agent-detail h4 {
			font-size: 11px;
		}
}			

@media only screen and (max-width: 991px) {
	.agent-items{
		padding: 20px;
	}
		.agent-items .agent-item{
			width: 50%;
		}

	.agent-items .agent-item .agent-content span.agent-detail h3 {
		font-size: 22px;
	}
	.agent-items .agent-item .agent-content span.agent-detail h4 {
		font-size: 16px;
	}

	.agent-items .agent-item .agent-content span.agent-profile::after {
		bottom: 66px;
	}
}

@media only screen and (max-width: 767px) {
	.agent-items{
		padding: 0;
	}
		.agent-items .agent-item{
			width: 100%;
		}
}