/**
 * 1.0 Customized Framework CSS Rules
 *
 * CSS rules that override the default framework CSS rules.
 */

* {
	font-family: 'Roboto', sans-serif;
	color: #ababab;
	font-size: 20px;
	font-size-adjust: none;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	font-weight: 700;
	text-transform: uppercase;
	font-style: normal;
	font-variant: normal;
	zoom: 1;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
}
body {

	/*background-size: auto 100%;*/
	background-color: #56524d;
}

/**
 * 2.0 General CSS Rules
 *
 * CSS rules used by all pages.
 */

.website-wrapper {
	background-image: url(../images/background/background-03A.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 54px;
	min-width: 990px;
}
.page-wrapper {
	max-width: 960px;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.white {
	color: #ffffff;
}
.mustard {
	color: #ada68d;
}
.cyan {
	color: #87b2ac;
}
.green {
	color: #13afa0;
}
.yellow {
	color: #fcff00;
}
.blue {
	color: #00c0ff;
}
.pink {
	color: #ff0060;
}
.dark {
	color: #fafafa
	;
}
.underline {
	text-decoration: underline;
}

/**
 * 3.0 Header CSS Rules
 *
 * CSS rules used for the header.
 */

.header-wrapper {
	margin-bottom: 51px;
}
.main-logo {
	height: auto;
	width: 266px;
	float: left;
	display: block;
}
.main-logo > img {
	height: auto;
	width: 266px;
}
.header-details {
	float: right;
}
.header-column {
	min-width: 144px;
	float: left;
	margin-right: 40px;
	margin-top: 14px;
}
.header-details > .header-column > p {
	text-align: right;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 12px;
	margin-bottom: 0;
	line-height: 18px;
}
p.header-phone a {
	color: #ababab;
}

/**
 * 4.0 Videos CSS Rules
 *
 * CSS rules used for the videos.
 */

.videos-wrapper {
	margin-bottom: 275px;
}
.video-wrapper {

}
.player-wrapper > iframe {
	width: 100%;
	height: 540px;
}
.video-details-wrapper {
	background: url(../images/video-details-background.png) left bottom no-repeat;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 32px;
	padding-bottom: 40px;
}
.video-details-left {
	float: left;
	width: 50%;
}
.video-details-right {
	float: left;
	width: 50%;
}
.video-details-wrapper .video-details-left > p, .video-details-wrapper .video-details-right > p {
	text-align: left;
	font-size: 16px;
	line-height: 18px;
	margin-bottom: 0;
}

/**
 * 4.0 Biography CSS Rules
 *
 * CSS rules used for the biography.
 */

.biography-wrapper {
	margin-bottom: 240px;
	position: relative;
}
.biography {
	padding-left: 15px;
	padding-right: 450px;
	padding-top: 15px;
	padding-bottom: 22px;
	max-width: 960px;
	box-sizing: border-box;
}
.avatar2 {
	position: absolute;
	top: -55px;
	right: 0;
	z-index: 90;
	max-width: 420px;
	height: auto;
}
.biography > p {
	font-size: 16px;
	margin-bottom: 22px;
	line-height: 18px;
}
.biography > .biography-title {
	font-size: 20px;
	margin-bottom: 27px;
}
.biography > p:last-child {
	margin-bottom: 0;
}
.biography > p > a {
	color: #ababab;
	text-decoration: underline;
}

/**
 * 5.0 Footer CSS Rules
 *
 * CSS rules used for the footer.
 */

.footer-wrapper {
	margin-bottom: 200px;
}
.footer-column {
	 width: 30%;
	 float: left;
}
.footer-column:nth-child(2) {
	width: 40%;
}
.footer-column p {
	 color: #000000; /* too dark mate! */
}
.footer-wrapper > .footer-column:nth-child(3) {
	margin-right: 0;
}
.footer-column a {
	color: #ababab;
	color: #000000; /* too dark mate! */
	text-decoration: underline;
}
.footer-column a.footer-phone {
	text-decoration: none;
}
.footer-column > p:last-child {
	margin-bottom: 0;
}

/**
 * 4.0 Banner CSS Rules
 *
 * CSS rules used for the banner.
 */

.banner-wrapper {
	margin-bottom: 85px;
	position: relative;
}
.banner {
	padding-left: 15px;
	padding-right: 450px;
	padding-top: 15px;
	padding-bottom: 22px;
	max-width: 960px;
	box-sizing: border-box;
}
.avatar {
	position: absolute;
    	top: -50px;
    	right: 0;
    	z-index: 90;
    	max-width: 100%;
    	height: auto;
}
.banner > img {
	height: auto;
	max-width: 44%;
}
.banner > p {
	font-size: 16px;
	margin-bottom: 22px;
	line-height: 18px;
}
.banner > .banner-title {
	font-size: 20px;
	margin-bottom: 27px;
}
.banner > p:last-child {
	margin-bottom: 0;
}
.banner > p > a {
	color: #ababab;
	text-decoration: underline;
}

.column-container {
	display: flex;
}

.extra-1 {
  	flex: 1;
}
.extra-2 {
     	flex: 1;
}
.extra-3 {
	flex: 1;
}
.extra-4 {
	flex: 1;
	height: 540px;
}