@charset "utf-8";
@import url("reset.css");
/*------------------------------------------------------------------------- FONTS 
*/
@font-face {
    font-family: 'pt-sans-narrow';
    src: url('font/pt-sans-narrow.woff') format('woff');
    font-weight: 				normal;
    font-style: 				normal;
}
@font-face {
    font-family: 'pt-sans-narrow-bold';
    src: url('font/pt-sans-narrow-bold.woff') format('woff');
    font-weight: 				normal;
    font-style: 				normal;
}


/*------------------------------------------------------------------------- CORE 
*/
body {
	font-family: 				'pt-sans-narrow', sans-serif;
	text-align:					left;
	background:					#000;
	margin:						0;
	color:						#fff;
	overflow-x:					hidden;
}
a {
	color:						#444;
	text-decoration:			none;
	transition:					0.2s linear color;
	font-weight:				600;
}
a:hover {
	color:						#000;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 				'pt-sans-narrow-bold', sans-serif;
    font-weight: 				normal;
    font-style: 				normal;	
} 
strong, b {
    font-weight: 				600;
    font-style: 				normal;	
	font-family: 				'pt-sans-narrow-bold', sans-serif;	
}
div#page {
	width:						100%;
	height:						100%;
	position:					relative;
	min-width:					320px;
	overflow:					hidden;
	margin:						0 auto;
}

@media screen and (max-width: 320px)
{
	body {
		overflow-x:				hidden;
	}
	div#page {
		position:				relative;
		width:					320px;	
		left: 					50%;
		margin-left: 			-160px; /* Negative margin half of the element width */
	}
}
.xdebug-error, .xe-warning {
	font-size:					16px;
	color:						#000;
}

/*------------------------------------------------------------------------- CSS STEPPED ANIMATIONS
*/
.animated:nth-child(n+1) {
	animation-delay: 			0s;
}
.animated:nth-child(n+2) {
	animation-delay: 			0.125s;
}
.animated:nth-child(n+3) {
	animation-delay: 			0.25s;
}
.animated:nth-child(n+4) {
	animation-delay: 			0.375s;
}
.animated:nth-child(n+5) {
	animation-delay: 			0.5s;
}
.animated:nth-child(n+6) {
	animation-delay: 			0.625s;
}
.animated:nth-child(n+7) {
	animation-delay: 			0.75s;
}
.animated:nth-child(n+8) {
	animation-delay: 			0.875s;
}
.animated {
	animation-duration: 		1.5s;
}
/*------------------------------------------------------------------------- DEFAULT LAYOUT BEHAVIOURS
*/
div.wrapper {
	position:					relative;
	width:						100%;
	box-sizing:					border-box;
	background: 				#fff;
}
div.container {
	width:						100%;
	max-width:					960px;
	margin:						0 auto;
	box-sizing:					border-box;
	position:					relative;
}
/*------------------------------------------------------------------------- HEADER BANNER
*/
div.header {
	background:					#fff url(../images/header-bg.jpg) right top no-repeat;
	height:						480px;
	transition: 				0.3s ease-out;
}
div.header div.column {
	max-width: 					400px;
	padding: 					40px 20px;
}
div.header h1 {
	width:						345px;
	height:						180px;
	margin:						40px auto;
	text-indent:				-9999px;
	transition:					0.2s ease-in;
}
div.header h1 a {
	background:					url(../images/belverdere-ravenscroft-associates-logo.svg) center center no-repeat;
	background-size:			100%;
	display:					block;
	width:						100%;
	height:						100%;
}
div.header h2 {
	color:						#444;
	font-size:					23px;
	text-align:					center;
	text-transform:				uppercase;
}
div.header h4.telephone {
	font-size:					20px;
	color:						#444;
	padding:					0;
	background:					url(../images/mobile-icon.svg) left top no-repeat;
	height:						30px;
	line-height:				30px;
	padding-left:				25px;
	width:						150px;
	margin: 					0 auto;
}
div.header img {
	width:						150%;
	max-width:					450px;
}

@media (max-width: 1160px)
{
	div.header h1 {
		width:					280px;
		height:					144px;
		margin: 				30px auto;
	}
	div.header {
		background-position: 	calc(100% + 200px) top;
		height: 				340px;
	}
	div.header h2 {
		font-size:				21px;
	}	
}

@media (max-width: 860px)
{
	div.header {
		background-position: 	calc(100% + 300px) top;
		height: 				300px;
	}
	div.header h1 {
		width:					260px;
		height:					134px;
		margin: 				20px auto;
	}
	div.header h2 {
		font-size:				19px;
	}
}
@media (max-width: 760px)
{
		div.header {
		background-position: 	calc(100% + 200px) top;
		background-size: 		auto 100%;
	}
}

@media (max-width: 580px)
{
	div.header {
		background-position: 	calc(100% + 450px) top;
	}
	div.header div.column {
		margin: 				0 auto;
	}
}

/*------------------------------------------------------------------------- INTRO
*/
div.intro {
	background:					#f0f url(../images/intro-gradient.jpg) left center repeat-x;
	background-size:			auto 100%;
	color:						#fff;
}
div.intro div.container {
	background:					#141216 url(../images/intro-bg.jpg) right center no-repeat;
	background-size:			auto 100%;	
}
div.intro div.column {
	max-width: 					480px;
	padding: 					80px 40px;
	width: 						100%;
	position: 					relative;
	margin: 					0;
	box-sizing: 				border-box;
}
div.intro p {
	line-height:				1.4em;
	color:						#fff;
	font-size:					18px;
	margin:						0 0 20px;
}

@media (max-width: 800px)
{
	div.intro div.column {
		max-width: 				100%;
	}
}

/*------------------------------------------------------------------------- CONTENT
*/
div.content {
	background:					#3c4262;
	color:						#fff;
}
div.content div.container {
	font-size:					0;
}
div.content div.column {
	display:					inline-block;
	width:						50%;
	position:					relative;
	box-sizing:					border-box;
	vertical-align: 			top;
}
div.content div.text {
		padding: 				80px 40px;
}
div.content p {
	line-height:				1.4em;
	color:						#fff;
	font-size:					18px;
	margin:						0 0 20px;	
}
div.content p a {
	color:						#fff;
}
div.photo img {
	width:						calc(((100vw - 960px) / 2) + 480px);
	display:					block;
}
	
@media (max-width: 1930px)
{
	div.photo img {
		width: 					auto;
	}
}

@media (max-width: 800px)
{
	div.content div.column {
		display: 				block;
		width: 					100%;
		overflow:				hidden;
	}	
	div.photo {
		height:					400px;
	}	
	div.photo img {
		position:				absolute;
		width:					auto;
		display:				block;
		left: 					50%;
		top: 					50%;
		transform: 				translate(-50%,-50%);
		margin:					auto;
		width:					100%;		
	}
}

@media (max-width: 600px)
{
	div.photo img {
		width: 					auto;
		height: 				100%;
	}
}

/*------------------------------------------------------------------------- FOOTER
*/
div.footer {
	background:					#000;
	padding:					0 20px;
	height:						60px;
	text-align:					center;
}
div.footer p {
	font-size:					16px;
	color:						#fff;
	margin:						0 auto;
	text-transform:				uppercase;
	line-height:				60px;
}