* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	padding: 0;
	margin: 0;
}

/* don't include border measurements in any elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
	color: #339ffb;
	text-decoration: underline;
}

body {
	padding: 0;
	margin: 0;
	border: 0;
	color: #333;
	background:#fff;
	font-family: 'Museo';
}

h2{
	color:#ff00ff;
	margin-bottom:5px;
}

h3{
	margin:10px 0px;
}


/* ############################################################################# */
/*                           @FONT FACE DECLARATIONS                             */
/* ############################################################################# */

@font-face {
	font-family: 'Museo';
	src: url('../../fonts/Museo/Museo_Slab_500.otf');
	font-weight: normal;
	font-style: normal;
}

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


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


.alignCenter{
	text-align:center;
}

.alignLeft{
	text-align:left;
}

.alignRight{
	text-align:right;
}

ul, li {
	padding: 0px;
}

#intro{
	margin-top:25px;
	margin-left:5%;
	margin-right:5%;
	width:90%;
	height:400px;
	background:#aa00aa url(../images/icon-timeline.png) no-repeat center center;
	background-size:280px 100px;
	color:#ff00ff;
	padding:20px;
	border-radius:10px;
}

.transparentGrey{
	color:rgba(66,0,66,0.6);
}

#intro .bottom{
	position:absolute;
	left:10%;
	width:80%;
	top:370px;
	color:rgba(255,255,255,0.7);
}

#loader{
	margin:2% 5%;
}

.loaderIcon{
	background:transparent url(../../images/icon-loader.png) 0 0;
	background-size:40px 40px;
	width:40px;
	height:40px;
	
	-webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
	
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}


.timeline{
	display:none;
	width:100%;
	height:100%; /* set this in JS ... */
}

.timeline .line{
	top:450px;
	position:absolute;
	right:15%;
	width:2px;
	height:inherit;
	background:#000;
}

.timeline .dottedLine{
	position:absolute;
	right:15%;
	width:2px;
	height:150px;
	background:#c0c0c0;
}


.timeline .node{
	position:absolute;
	width:20px;
	height:20px;
	border:2px solid #000;
	border-radius:20px;
	background:#fff;
}

.timeline .node .comments{
	font-family:"OpenSans-Light";
	width:120px;
	background:#fff;
	font-size:14px;
	margin-left:30px;
	overflow:hidden;
}

.timeline .node .comments.personal{
	font-family:"OpenSans-LightItalic";
}

.timeline .node .comments span.textHighlight{
	color:#ff00ff;
}

.textHighlight{
	color:#ff00ff;
}


.timeline .nodeContent{
	position:absolute;
	top:inherit;
	left:5%;
	width:75%;
	height:auto;
}

.timeline .nodeContent .annotation{
	font-size:14px;
	margin-bottom:3%;
	color:#666;
	font-family:"OpenSans-Light";
	overflow:hidden;
}

.timeline .nodeContent .statementBlock{
	margin-bottom:1.5%;
	background:#ff00ff;
	color:#fff;
	border-radius:10px;
	padding:10px;
	font-size:20px;
}


.timeline .nodeContent .image img{
	position:relative;
	left:25%;
	width:50%;
}

.border{
	border:1px #c0c0c0 solid;
}


.timeline .nodeContent .image.floatLeft50 img{
	float:left;
	position:relative;
	left:0%;
	margin-right:1%;
	margin-bottom:1%;
	width:49%;
}

.timeline .nodeContent .image.floatLeft50.b img{
	float:left;
	position:relative;
	left:0%;
	margin-right:0;
	margin-left:1%;
	margin-bottom:1%;
	width:49%;
}


.timeline .nodeContent .image.floatLeft75 img{
	float:left;
	position:relative;
	left:0%;
	width:75%;
}

.timeline .nodeContent .image.floatLeft25 img{
	float:left;
	position:relative;
	left:0%;
	margin-left:0%;
	margin-right:1%;
	width:24%;
}

.timeline .nodeContent .image.floatLeft60 img{
	float:left;
	position:relative;
	left:0%;
	width:60%;
}

.timeline .nodeContent .image.floatLeft40 img{
	float:left;
	position:relative;
	left:0%;
	width:40%;
}

.timeline .nodeContent .image.floatLeft65 img{
	float:left;
	position:relative;
	left:0%;
	width:65%;
}

.timeline .nodeContent .image.floatLeft35 img{
	float:left;
	position:relative;
	left:0%;
	width:35%;
}


.timeline .nodeContent .image.floatLeft33 img{
	float:left;
	position:relative;
	left:0%;
	margin-right:3%;
	width:30%;
}

.timeline .nodeContent .image.floatLeft20 img{
	float:left;
	position:relative;
	left:0%;
	margin-left:0%;
	margin-right:2%;
	width:18%;
}

.timeline .nodeContent .image.fullWidth img{
	position:relative;
	left:0%;
	width:100%;
}




/** used for short summary grid at end **/
.float.twenty{
	clear:both;
	float:left;
	position:relative;
	left:0%;
	margin-right:1%;
	width:19%;
}

.float.twentyFive{
	float:left;
	position:relative;
	left:0%;
	margin-right:1%;
	width:24%;
}

.float.seventyFive{
	float:left;
	position:relative;
	left:0%;
	margin-right:1%;
	width:74%;
}

.float.thirty{
	float:left;
	position:relative;
	left:0%;
	margin-right:1%;
	width:29%;
}

.float.thirtyThree{
	float:left;
	position:relative;
	left:0%;
	margin-right:0%;
	margin-left:0%;
	width:33%;
}

.float.fifty{
	float:left;
	position:relative;
	left:0%;
	margin-right:1%;
	width:49%;
}

.timeline .nodeContent.fullWidth{
	margin-top:20px;
	left:5%;
	width:90%;
}

.credits{
	font-size:13px;
}


#lightBox{
	display:none;
	top:0px;
	left:0px;
	position:fixed;
	width:100%;
	height:auto;
	z-index:200;
}

#lightBox .bg{
	position:fixed;
	background:rgba(0,0,0,0.7);
	width:100%;
	height:inherit;
}

#lightBox .panel{
	position:fixed;
	left:10%;
	top:15%;
	width:80%;
	height:80%;
	background:rgba(255,255,255,1);
	padding:10px;
}

/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/* Phone & Phablet specific : < 1024 */
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
@media all and (max-width : 1023px)  {
	
	.timeline .line{
		right:35%;
	}
	
	.timeline .dottedLine{
		right:35%;
	}
	
	.timeline .nodeContent{
		position:absolute;
		top:inherit;
		left:2.5%;
		width:55%;
		height:auto;
	}
	
	.timeline .nodeContent.fullWidth{
		left:2.5%;
		width:95%;
	}
}

/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/* Phone & Phablet specific : < 800 */
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
@media all and (max-width : 799px)  {
	
	.timeline .node .comments{
		font-size:11px;
	}
	
}


/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
/* iPhone specific : <= 568 */
/***********************************************************************************/
/***********************************************************************************/
/***********************************************************************************/
@media all and (max-width:568px){
	
	
	
	.timeline .line{
		right:10%;
	}
	
	.timeline .dottedLine{
		right:10%;
	}
	
	.timeline .nodeContent{
		left:2.5%;
		width:80%;
	}
	
	.timeline .node .comments{
		display:none;
	}
	
	
	.timeline .nodeContent .image img{
		position:relative;
		left:0%;
		width:100%;
	}
	
	.phoneComments{
		font-size:13px;
		font-family: 'OpenSans-Light';
	}
	
	
	/** used for short summary grid at end **/
	.float{
		font-size:12px;
	}
	
	.timeline .nodeContent .statementBlock{
		font-size:16px;
	}
	
}