@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

.jflatTimeline, .jflatTimeline input, .jflatTimeline, textarea{
	font-family : 'Open Sans';
}

body{
	margin: 0;
	background-color: #ffffff;
	font-family : 'Open Sans';
	color: #271d5c;
}

a{
 color: #271d5c;
}

a :hover{
	color: #fdd352;	
}

p{
	color: #271d5c;
}
h1{
	font-weight: 600;
	color: #271d5c;
}

.h1-span{
	font-weight: 200;
}

.button{
	color: #fdd352;
	background-color: #271d5c;
	padding: 8px 14px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 600;
}

.div-padd2{
	padding-top: 10px;
}

.div-padd3{
	padding-top: 30px;
	font-size: 14px;
}

h2{
	margin: 0;
	color: #271d5c;
}
.div-padd{
	padding-top: 30px;
}
.header-text{
	max-width: 750px;
	margin: 0 auto;
	padding: 20px;
}
.icon-f{
	font-size: 15px;
}

.toggleLink{color: #271d5c;text-decoration:none;font-size: 16px;font-weight: 600}
.toggleLink:hover{cursor:pointer}
.elaboration{display:none;font-size: 14px;padding-top: 25px;}

.footer{
	font-size: 11px;
	width: 80%;
	margin: 0 auto;
}

.hr-style{
	color:#271d5c;
	width: 80%;
	max-width: 750px;
}

.img-responsive{
	max-width: 100%; 
	height: auto; 
	display:block; 
	margin:0 auto;
}
.header-div{
	background-color:#271d5c;
}

/********** Normal Styles ***************/

.jflatTimeline{
	width : 700px;
	margin : 10px auto;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
}

/********** Style for the month year bar ***************/

.jflatTimeline .month-year-bar{
	background-color : #271d5c;
	display : table;
	width : 100%;
	color : #fdd352;
	font-size : 22px;
	font-weight : 300;
	padding : 5px;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor : default;
}

.jflatTimeline .month-year-bar .prev, 
.jflatTimeline .month-year-bar .next{
	padding :  10px 10px 10px 10px;
	font-size : 19px;
	cursor : pointer;
	color:#ffffff;
	font-weight: 200;
}


.jflatTimeline .month-year-bar .prev :hover, 
.jflatTimeline .month-year-bar .next :hover{
	
	color:#fdd352;
	
}

.jflatTimeline .month-year-bar .year{
	float : left;
}

.jflatTimeline .month-year-bar .month{
	float : right;
}

/********** Style for the bar containing dates ***************/

.jflatTimeline .dates-bar{
	/** border : solid 1px #e7e7e7; **/
	display : block;
	width : 100%;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
	padding : 0 30px;
	position : relative;
	font-size : 0;
	white-space : nowrap;
	overflow : hidden;
		-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.jflatTimeline .dates-bar a{
	display: block;
	height: 70px;
	width: 70px;
	color : #271d5c;
	text-align : center;
	display : inline-block;
	/* border-right : 1px solid #E7E7E7; */
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	cursor : pointer;
	transition : color .2s, transform .2s;
	-webkit-transition : color .2s, transform .2s;
	-moz-transition : color .2s, transform .2s;
	z-index : 0;
}

.jflatTimeline .dates-bar a:hover{
	color : #271d5c;
}

.jflatTimeline .dates-bar a span{
	transition : color .2s, transform .2s;
	-webkit-transition : color .2s, -webkit-transform .2s;
	-moz-transition : color .2s, -moz-transform .2s;
}

.jflatTimeline .dates-bar a.noevent{
	display : none;
	width : 100%;
	color: #271d5c;
    font-size: 19px;
    line-height: 70px;
}

.jflatTimeline .dates-bar a.selected{
	color : #271d5c;
}

.jflatTimeline .dates-bar a.selected>span.date{
	transform : scale(1.2, 1.2);
	-moz-transform : scale(1.2, 1.2);
	-webkit-transform : scale(1.2, 1.2);
}

.jflatTimeline .dates-bar a.prev,
.jflatTimeline .dates-bar a.next{
	position : absolute;
	top : 0;
	width : 30px;
	min-width : 0;
	font-size : 20px;
	background-color : white;
	font-size : 30px;
	line-height : 70px;
	z-index : 2;
	display : inline-block;
}

.jflatTimeline .dates-bar .month span{
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.jflatTimeline .dates-bar a.prev{
	left : 0;
}
.jflatTimeline .dates-bar a.next{
	right : 0;
	/** border-left : solid 1px #e7e7e7; **/
}

.jflatTimeline .dates-bar a span.date{
	display : block;
	font-size : 30px;
}


.jflatTimeline .dates-bar a span.month{
	font-size : 11px;
}

/********** Whole style for timeline-wrap ***************/

.jflatTimeline .timeline-wrap{
	width : 100%;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	/* border : solid 1px #e7e7e7; */
	border-top : 0;
}

.jflatTimeline .timeline-wrap .event{
	overflow : auto;
	/* border-bottom : solid 1px #e7e7e7; */
	display: none;
}

.jflatTimeline .timeline-wrap .event.selected{
	display : block;
}

.jflatTimeline .timeline-wrap .event .date{
    color: #3F3F3F;
    display: block;
    font-size: 14px;
    padding: 0 15px 15px;
}

.jflatTimeline .timeline-wrap .event .date i{
	padding : 0 10px 0 0;
}

.jflatTimeline .timeline-wrap .event>div{
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	width : 100%;
	display : table;
}

.jflatTimeline .timeline-wrap .event div.right{
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	padding : 15px;
	padding-right : 0;
}



.jflatTimeline .timeline-wrap .event div.layout1>div{
	float : left;
	width : 50%;
}

.jflatTimeline .timeline-wrap .event .layout1 div.left>img{
	width : 100%;
}

.jflatTimeline .timeline-wrap .event .layout1 div.right h3{
	text-align : center;
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

.jflatTimeline .timeline-wrap .event .layout1 div.right p{
	font-size : 13px;
	color : #271d5c;
	line-height : 21px;
}

.jflatTimeline .timeline-wrap .event div.layout2>div{
	float : left;
	width : 50%;
}

.jflatTimeline .timeline-wrap .event .layout2 div.right>img{
	width : 100%;
}

.jflatTimeline .timeline-wrap .event .layout2 div.right h3{
	text-align : center;
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

.jflatTimeline .timeline-wrap .event .layout2 div.right p{
	font-size : 13px;
	color : #271d5c;
	line-height : 21px;
}

.jflatTimeline .timeline-wrap .event h3{
	text-align : center;
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

.jflatTimeline .timeline-wrap .event p{
	font-size : 13px;
	color : #271d5c;
	line-height : 21px;
}

.jflatTimeline .timeline-wrap .event .layout3 img{
	width : 100%;
}

/********** Make it responsive ***************/



.jflatTimeline.s_screen .timeline-wrap .event div.layout1>div{
	float : none;
	width : 100%;
}


.jflatTimeline.s_screen .timeline-wrap .event div.layout2>div{
	float : none;
	width : 100%;
}

@media screen and (max-width:750px) {
	.jflatTimeline{
		width : 600px;
	}
}

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

	.jflatTimeline{
		width : 498px;
	}
}

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

	.jflatTimeline{
		width : 80%;
	}
}