/*timeline*/

.spacer{
    background: #309091;
    height: 2em;
}
.push{
    height:20%;
}



/*horizontal bar with dates*/
#dates{
	position: fixed;
	width: 100%;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 1.2em;
	list-style-type: none;
    text-align: center;
    color:white!important;
  	background-color:#602043;
  	padding-top:10px;
	padding-bottom: 10px;
	z-index:999;
}

#dates li{
	background-color: #862D61;
	display: inline;
	padding:.3%;
	line-height: 1.8em;
	cursor: pointer;
	
}

#dates li:hover {
	color:#EDC9E0;
	background-color: #EDC9E0;
	border:none!important;

}

#dates a:hover{
	color:#602043;	
	border:none!important;
}



.selected{
background-color:#EDC9E0;
color:#602043;
border:none!important;
}


/*timeline elements*/

/*elements container*/
.dateContent{
	margin-top:2%;
	margin-bottom:0;
	margin-left: 6.6%;
	margin-right: 6.6%;
	height:auto;
}

#date1{
	margin-top:6.6%;
}


.dateContentEmpty{
	margin-left:6.6%;
	margin-right:6.6%;
	height:28%;
}

/*timeline date*/
.date, .copyrightTop{
	height:auto
	-moz-border-radius-topright: 30px 0px;
	-moz-border-radius-topleft: 30px 0px;
	padding-bottom: 1%;
	
}
.date{
	border-bottom: 1px dotted #602043;
}
.date h2{
	font-size: 2.5em;
	line-height: 1em;
	color:#602043;
	background-color: #D98CC2; 
	padding:1%;
}

/*subtitle*/

.subTitle {
	margin-left: 0;
	margin-top: 2%;
	font-size: 1.4em;

}

.subTitle h3{
	font-size: 1.5em;
	line-height: 1em;
	color:#602043!important;

}

/*copyright*/

.copyright p{
	border-top: 1px dotted #602043;
	padding-bottom: 1%;
	font-size: .8em;
	line-height: 1.5em;
	color:#333;
	

}
.copyrightRight {
	text-align: right;
}

.copyrightLeft {
	
	text-align: left;
}



/*timeline text*/


.text p{
	font-family:'Noto Serif', sans-serif!important;
	font-size: 1.2em;
	line-height: 1.4em;
	margin-right: 2%;
	color:#333;
	
}

.textLeft {
	
	text-align:left;
	margin-right: 2%;

}

.textRight {
	
	text-align:right;
	margin-right: 2%;
}
/*timeline image*/

img{
	width:100%;
	height:auto;
}


/*media queries*/

@media only screen and (max-width: 1280px){
header{

		height:auto;
	}

.dateContentEmpty{
	margin-left:6.6%;
	margin-right:6.6%;
	height:35%;
}


}



@media only screen and (max-width: 1024px){
	header{

		height:10%;
	}
	.timelineContainer{

		margin-top: 8%;
	}


#dates{

	font-size: 1em;
}



.dateContent{

	margin-top: 3%;
}


.text p{

	font-size: 1em;
}


.date h2{
	font-size: 1.8em;
	
}


.subTitle h3{
	font-size: .9em;
	}


img{

	width:95%;
	height:auto;
}

}

@media only screen and (max-width: 768px){
	header{

		height:10%;
	}

		.timelineContainer{

		margin-top: 9.5%;
	}

	.dateContent{

	margin-top: 3%;
}

#date1{
	margin-top:9%;
}

.date h2{
	font-size: 2em;
	
}

#dates{
		padding-top:12px;
	padding-bottom: 12px;
}
}

@media only screen and (max-width: 560px){

#dates{
	display:none;
}

header{

	height:22%;
}
 
}