/********** Setting the fonts section ***************/
/*  font-family: 'Roboto Slab', serif; */

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



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

.jflatTimeline{
	width : 100%;
	margin : 10px 0;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
	line-height: initial;
}

/********** Style for the month year bar ***************/
.jflatTimeline .next, .jflatTimeline .prev{
	color:#000 !important;
}
.jflatTimeline .dates-bar .next i, .jflatTimeline .dates-bar .prev i{
	font-size: 70px;
}
.jflatTimeline .month-year-bar{
	display : table;
	width : 100%;
	color : #000;
	font-weight : 300;
	padding : 5px 9px;
	-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;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 15px;
}

.jflatTimeline .month-year-bar .prev, 
.jflatTimeline .month-year-bar .next{
	padding :  0 22px;
	font-size : 30px;
	cursor : pointer;
	color:#000;
}
.jflatTimeline .month-year-bar .year{
	max-width: 40%;
	float : left;
}
.jflatTimeline .month-year-bar .month{
	float : right;
	max-width: 60%;
}

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

.jflatTimeline .dates-bar{
	display : block;
	width : 100%;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
	padding : 0 70px;
	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: 130px;
	width: 166px;
	color : #8d8d8d;
	text-align : center;
	display : inline-block;
	-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;
	background:#cdcdcd;
	border:3px solid #fff;
	position:relative;
}

.jflatTimeline .dates-bar a:hover{
	color : #fff;
	text-decoration:none;
	background:#006199;
}

.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: #7B7B7B;
    font-size: 19px;
    line-height: 70px;
}

.jflatTimeline .dates-bar a.selected{
	color : #fff;
	background:#006199;
}

.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 : 70px;
	min-width : 0;
	font-size : 20px;
	background-color : white;
	font-size : 30px;
	line-height : 130px;
	z-index : 2;
	display : inline-block;
	color : #0d181c !Important;
}

.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;
}

.jflatTimeline .dates-bar a span.date{
	display : block;
	font-size : 30px;
	font-weight:bold;
	font-family: 'Conv_AltoCon-Black';
	font-size:70px;
	padding-top:8px;
	line-height: 86px;
	position:relative;
}


.jflatTimeline .dates-bar a span.month{
	font-size: 16px;
    font-weight: bold;
    top: -1px;
    position: relative;
}

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

.jflatTimeline .timeline-wrap{
	width : 100%;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;
	padding-top:15px;
}

.jflatTimeline .timeline-wrap .event{
	overflow : auto;
	display: none;
}

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

.jflatTimeline .timeline-wrap .event .date{
	display: block;
	color: #006199;
	border-bottom: 1px solid #000;
	padding: 30px 3px 10px 3px;
	font-size: 24px;
	font-weight:bold;
	text-transform: uppercase;
	/*
    display: block;
    line-height:23px;
    color: #fff;
    font-size: 24px;
    background: #e30613;
    padding: 15px;
    font-weight:bold;
    */
    /*font-family: 'Conv_AltoCon-Black';*/
}

.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;
	padding : 15px 0;
	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 : 10px 0 0 10px;
}



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

.jflatTimeline .timeline-wrap .event .layout1 div.right h3{
	font-size : 20px;
	margin : 5px 0 ;
	color : #3E3E3E;
	font-family: 'Conv_AltoCon-Black';
}
.jflatTimeline .timeline-wrap .event .layout1 div.right h3:after,
.jflatTimeline .timeline-wrap .event .layout2 div.right h3:after{
	display:none;
}

.jflatTimeline .timeline-wrap .event .layout1 div.right p,
.jflatTimeline .timeline-wrap .event .layout1 div.right{
	font-size : 14px;
	color : #343434;
	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{
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	color : #3E3E3E;
}

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

.jflatTimeline .timeline-wrap .event h3{
	font-size : 20px;
	text-transform : uppercase;
	margin : 5px 0 ;
	font-weight:400;
	color : #3E3E3E;
	font-family: 'Roboto Slab', serif;
	margin-top:0;
}

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

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

.remark{
	margin-bottom:15px;
}


.layout1 .btn_more{
	font-size:18px;
	text-transform:uppercase;
	padding:0;
}
.layout1 .more a{
	color:#fff;
	background:#e30613;
	display:block;
	width:50%;
	text-align:center;
	padding:20px 0;
}
.layout1 .companyName{
	font-weight:bold;
	color:#3c3c3c;
	padding:12px 3px;
	font-size:18px;
}

/********** 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 (min-width:481px) {
	.jflatTimeline .timeline-wrap .event div.right{
		padding : 15px 0 0 15px;
	}
}
@media screen and (min-width:769px) {
	.jflatTimeline .timeline-wrap .event div.layout1{
		display: flex;
		align-items: flex-end;
	}
	.jflatTimeline .timeline-wrap .event div.layout1>div{
		flex-grow: 1;
		width : 50%;
	}
	.jflatTimeline .timeline-wrap .event div.right{
		padding: 0 0 0 30px;
	}
}

@media screen and (max-width:768px) {
	/********** Style for the bar containing dates ***************/
	
	.jflatTimeline .dates-bar{	
		padding : 0 50px;
	}
	.jflatTimeline .dates-bar a{
		height: 90px;
		width: 130px;
		border:2px solid #fff;
	}
	.jflatTimeline .dates-bar a.prev,
	.jflatTimeline .dates-bar a.next{
		width : 50px;
		line-height: 105px; 
	}
	.jflatTimeline .dates-bar .next i, .jflatTimeline .dates-bar .prev i {
    	font-size: 60px;
	}
	.jflatTimeline .dates-bar a span.date{
		font-size:52px;
		line-height: 66px;
		padding-top:5px;
	}
	.jflatTimeline .dates-bar a span.month{
		font-size: 15px;
		top: -12px;
	}
	.jflatTimeline .timeline-wrap .event .date{
		font-size: 22px;
	}
	.jflatTimeline .timeline-wrap .event div.right{
		padding:10px 0 0 0;
	}
	.layout1 .companyName {
	    padding: 6px 3px;
	    font-size: 16px;
	}
}
@media screen and (max-width:480px) {
	/********** Style for the bar containing dates ***************/
	.jflatTimeline .month-year-bar{
		padding : 5px 0;
	    font-size: 18px;
	    margin-bottom: 0;
	}
	.jflatTimeline .month-year-bar .prev, .jflatTimeline .month-year-bar .next {
	    padding: 0 10px;
	    font-size: 24px;
	}
	.jflatTimeline .dates-bar{	
		padding : 0 30px;
		width: auto !important;
		margin: 0 -15px;
	}
	.jflatTimeline .dates-bar a{
		height: 65px;
		width: 85px;
	}
	.jflatTimeline .dates-bar a.prev,
	.jflatTimeline .dates-bar a.next{
		width : 30px;
		line-height: 65px; 
	}
	.jflatTimeline .dates-bar .next i, .jflatTimeline .dates-bar .prev i {
    	font-size: 40px;
	}
	.jflatTimeline .dates-bar a span.date{
		font-size:34px;
		line-height: 42px;
		padding-top:7px;
	}
	.jflatTimeline .dates-bar a span.month{
		font-size: 12px;
		top: -10px;
	}

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


}