@font-face{
font-family:	'Abel';
src:		url(../fonts/Abel-Regular.ttf);
font-weight:	normal;
font-style:	normal
}

.row>div{
padding-left:	10px;
padding-right:	10px
}
.row.narrowgutter>div{
padding-left:	5px;
padding-right:	5px
}

.yim-section-header{
position:		relative;
background-color:	#e6673d;
padding:		20px;
padding-left:		280px;
color:			#fff;
min-height:		130px;
-webkit-font-smoothing:	antialiased;
-moz-osx-font-smoothing:grayscale
}
.yim-section-header .h1-container{
position:	absolute;
left:		30px;
top:		20px;
bottom:		20px;
width:		234px;
vertical-align:	middle;
border-right:	2px solid #e9e7e6; 
padding-right:	2px
}

.yim-section-header .h1-container:before{
content:	'';
display:	inline-block;
height:		100%;
vertical-align:	middle}

.yim-section-header .h1-container h1,.yim-section-header .h1-container h2{
display:	inline-block;
text-align:	left;
vertical-align:	middle;
margin:		0}

.yim-section-header h1,.yim-section-header.individual h2{
font-family:	'Abel',Helvetica,sans-serif;
text-transform:	uppercase;
letter-spacing:	4px}

.yim-section-header.individual h1,.yim-section-header h3{
font-family:	'Lato',Helvetica,sans-serif;
text-transform:	none;
position:	absolute;
left:		300px;
top:		29px;
font-size:	24px;
width:		auto;
border:		none;
letter-spacing:	3px}

.yim-section-header.orange{background-color:#e6673d}
.yim-section-header.green{background-color:#919042}
.yim-section-header.red{background-color:#b45158}
.yim-section-header.mauve{background-color:#97669b}

.yim-body-text{
background-color:	#ebe4dc;
padding:		20px;
color:			#4e3629}

.yim-body-text h1{
-webkit-font-smoothing:	antialiased;
-moz-osx-font-smoothing:grayscale;
font-family:		"Abel";
font-size:		41px;
color:			#ab162b;
letter-spacing:		3.5px}

.yim-body-text h2{
-webkit-font-smoothing:	antialiased;
-moz-osx-font-smoothing:grayscale;
font-family:		"Abel";
font-size:		40px;
color:			#ab162b;
letter-spacing:		3.5px}

.yim-history-timeline
{
position:	relative;
overflow:	hidden}

/* Background div height */
.yim-history-timeline .yim-timeline-inner
{
height:		5000px;
position:	relative}


/* Centre line */
.yim-history-timeline .yim-timeline-inner .tl-main-spine
{
left:			456px;
top:			400px;
border-right:		8px solid #f66;
background-color:	#f66;
height:			4500px}

/* Start and end circles */
.yim-history-timeline .yim-timeline-inner .tl-badge
{
width:			226px;
height:			226px;
background-color:	#f66;
color:			#fff;
border-radius:		120px;
padding:		11px}

/* Position of text within Circle */
.yim-history-timeline .yim-timeline-inner .tl-badge h3
{
margin-top:	10px}

.tl-badge
{
left:		346px}

/* Text in circles and curved oblongs */
.yim-history-timeline .yim-timeline-inner .timeline-item
{
position:	absolute;
text-align:	center;
font-size:	16px}


/* Dates */
.yim-history-timeline .yim-timeline-inner .timeline-item h3
{
-webkit-font-smoothing:	antialiased;
-moz-osx-font-smoothing:grayscale;
font-family:	'Abel';
font-size:	35px;
text-transform:	uppercase;
letter-spacing:	3px;
margin-top:	0;
margin-bottom:	5px}

/* Position of LHS items in relation to centre line */
/* Higher than 50% moves the items left; lower moves them right */
.yim-history-timeline .yim-timeline-inner .tl-event.left-side
{
right:	60%;
left:	auto}

/* Makes sure LHS oblongs stay in position */
.yim-history-timeline .yim-timeline-inner .tl-event.left-side .tl-event-box-left
{
float:	none
}

/* Lines between LHS items and centre line */
/* left: 
/* right: how far right the line reaches to */
.yim-history-timeline .yim-timeline-inner .tl-event.left-side .tl-event-stalk-left
{
right:	-100px;
left:	350px}

/* Blobs on centre line connecting LHS items */
.yim-history-timeline .yim-timeline-inner .tl-event.left-side .tl-event-point-left
{
left:	auto;
right:	-107px}

/* Curved oblongs - Left */
.yim-history-timeline .yim-timeline-inner .tl-event .tl-event-box-left
{
position:relative;
left:		0;
top:		0;
float:		right;
width:		350px;
border-radius:	50px;
border:		2px solid #339966;
color:		#ab162b; 
padding:	10px}

/* lines between oblongs and centre line - Left */
.yim-history-timeline .yim-timeline-inner .tl-event .tl-event-stalk-left
{
top:		50%;
left:		0px;
right:		250px;
border-top:	2px solid #396}

/* Blobs on centre line - LHS */
.yim-history-timeline .yim-timeline-inner .tl-event .tl-event-point-left
{
border-radius:	20px;
width:		30px;
height:		30px;
left:		-15px;
top:		50%;
margin-top:	-15px;
background-color:#339966}

/* Position of RHS items in relation to centre line */
/* Higher than 50% moves the items right; lower moves them left */
/* Not sure width value does anything */
.yim-history-timeline .yim-timeline-inner .tl-event
{
left:		60%;
width:		200%;
transition:	width .2s}

/* Curved oblongs - Right */
.yim-history-timeline .yim-timeline-inner .tl-event .tl-event-box-right
{
position:	relative;
left:		0;
top:		0;
float:		right;
width:		350px;
border-radius:	50px;
border:		2px solid #6699ff;
color:		#333;
padding:	10px}

/* lines between oblongs and centre line - Right */
.yim-history-timeline .yim-timeline-inner .tl-event .tl-event-stalk-right
{
top:		50%;
left:		-95px;
right:		350px;
border-top:	2px solid #6699ff}

/* Blobs on centre line - RHS */
.yim-history-timeline .yim-timeline-inner .tl-event .tl-event-point-right
{
border-radius:		20px;
width:			30px;
height:			30px;
left:			-107px;
top:			50%;
margin-top:		-15px;
background-color:	#6699ff}