@charset "UTF-8";
/* CSS Document */

main {
	padding-top: 50px;
	padding-bottom: 50px;
}
main h1 {
    font-size: 1.2rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--steel);
    margin-bottom: 20px;
}
main h2 {
	margin-bottom: 15px;
	color: var(--steel);
}

main .lead {
	font-size: 1.3rem;
	line-height: 1.4;
}
main .lead p {
}

main h1 a.back-link {
}
main h1 a.back-link i {
	display: block;
	position: relative;
	font-size:   25px;
	line-height: 25px;
	width:       25px;
	height:      25px;
	margin: 0 0 -25px 0;
	left: -0.2em; top: -0.15em;
	border-radius: 25px;
	transition: all 0.3s ease;
}
main h1 a.back-link i:before { content:"\e932"; }
main h1 a.back-link:hover i {
	background-color: var(--steel);
	color: white;
}
main h1 a.back-link em {
	display: block;
	position: relative;
	margin: 0 0 0 25px;
	font-family: inherit;
}




/* agents */

	main .agent {
	}

	main .agent {
		padding-top:     0px;
		padding-bottom: 25px;
	}
	main .agent figure {
		display: block;
		position: relative;
		width:  320px;
		height: 320px;
		border-radius:15px 0 15px 0;
		background-repeat: no-repeat;
		background-size: cover;
	}
	main .agent figcaption {
		position: relative;
		margin-left: 25px;
	}
	main .agent figcaption.additional:before {
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		left: -25px;
		top: 0;
		bottom: 0;
		background-color: var(--steel_extralight);
	}
	main .agent h3 {
		font-family: Prata;
		font-size: 2.4rem;
		line-height: 1.2;
		margin-top:    15px;
		margin-bottom:  5px;
		color: var(--steel);
	}
	main .agent p.title {
		font-size:   1.0rem;
		line-height: 1.2;
		text-transform: uppercase;
		letter-spacing: 1.5pt;
		padding-bottom:  25px;
		color: var(--steel);
	}
	main .agent .about {
		margin-bottom: 25px;
		font-size: 1.4rem;
		line-height: 1.3;
	}
	main .agent p.email,
	main .agent p.mobile {
		display: inline-block;
		margin-right: 10px;
	}
	main .agent p.email  i,
	main .agent p.mobile i {
		display: block;
		position: relative;
		font-size:      20px;
		line-height:    20px;
		width:          20px;
		height:         20px;
		margin-bottom: -20px;
		top:-1px;
		color: var(--highlight);
	}
	main .agent p.email  em,
	main .agent p.mobile em {
		display: block;
		margin-left: 25px;
		color: var(--steel);
	}
	
	main .agent p.email  {}
	main .agent p.mobile {}
	main .agent p.email  i:before { content:"\e911"; }
	main .agent p.mobile i:before { content:"\e92c"; }
	
	
	main .agent a.inline-button {
		display: inline-block;
		position: relative;
		margin-top: 7px;
		background-color: transparent;
		color: var(--highlight);
		padding: 5px 15px;
		margin-left: -15px;
		border-radius: 15px;
		transition: all .3s ease;	
	}
	main .agent a.inline-button:hover {
		background-color: var(--steel);
		color: white;
	}

	main .agent figure {
		margin-bottom: -320px;
	}
	main .agent figcaption.main {
		margin-left:360px; 
		height: 320px;
	}
	main .agent figcaption.main .copies {
		position: relative;
		top: 50%;
		transform:translateY(-50%);
	}
	
	main .agent figcaption.main:before { display: none; }
	main .agent figcaption.additional {}


	/* desktop */	@media screen and (min-width:960px){
	}
	/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
	}
	/* mobile */	@media screen and (max-width:699px){
		main .agent figure {
			width: 160px;
			height: 160px;
			margin: 0 0 10px 0;
			left: 50%;
			transform:translateX(-50%);
		}
		main .agent figcaption.main {
			margin-left: 0px;
			height: auto;
			text-align: center;
		}
		main .agent figcaption.main .copies {
			top: 0%;
			transform: translateY(0%);
			text-align: inherit;
		}
		main .agent figcaption.main .copies * {
			text-align: inherit;
		}
		main .agent figcaption.additional {
			margin-top: 45px;
		}
		
	}