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

.jflatTimeline, .jflatTimeline input, .jflatTimeline textarea {
	
}


/********** Normal Styles ***************/
.jflatTimeline {
	width : 70%;
	margin : 0 auto 10px auto;
	-moz-box-sizing : border-box;
	-webkit-box-sizing : border-box;
	box-sizing : border-box;	
	line-height: normal;
}

/********** Style for the month year bar ***************/
.jflatTimeline .month-year-bar {
	font-family :sans-serif;
	background-color : #01828b;
	display : table;
	width : 100%;
	color : #ffffff;
	font-size : 1.4em;
	font-weight : 300;
	padding : 0 3px 3px 3px;
	-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 a {
	color: #ffffff;
}
.jflatTimeline .month-year-bar a:hover {
	text-decoration: none;
}


.jflatTimeline .month-year-bar .prev, 
.jflatTimeline .month-year-bar .next{
	padding :  0 12px;
	font-size : 30px;
	cursor : pointer;
}


.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 40px;
	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: 50px;
	width: 60px;
	color : #686666;
	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 : #0a516d;
	text-decoration: none;
	background: url('../../../img/fletxa-blava-petita.gif') 4px 13px no-repeat;
}

.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: 1.2em;
    line-height: 70px;
}

.jflatTimeline .dates-bar a.selected {
	color : #0a516d;
	background: url('../../../img/fletxa-blava-petita.gif') 4px 13px no-repeat;
}
.jflatTimeline .dates-bar a.today {
	color : #0a516d;
	background-color: #e0f0fa;
}

.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 : 40px;
	min-width : 0;
	background : white;
	font-size : 28px;
	line-height : 50px;
	z-index : 2;
	display : inline-block;
}

.jflatTimeline .dates-bar .month span {
    display: inline-block;
    min-width: 50px;
    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{
	padding-top: 5px;
	display : block;
	font-size : 22px;
}

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

/********** 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-top : 0;
}

.jflatTimeline .timeline-wrap .event {
	overflow : auto;
	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;
	padding : 15px;
	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;
}


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

}

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


}



/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline;
}
/* increased font size for icon-large */
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
  display: inline-block;
  width: 1.1428571428571428em;
  text-align: right;
  padding-right: 0.2857142857142857em;
}
[class^="icon-"].icon-fixed-width.icon-large,
[class*=" icon-"].icon-fixed-width.icon-large {
  width: 1.4285714285714286em;
}
/* BOOTSTRAP SPECIFIC CLASSES
 * -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}

/* FONT AWESOME CORE
 * -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: -10%;
  font-size: 1.3333333333333333em;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline;
}
/* increased font size for icon-large */
[class^="icon-"].icon-fixed-width,
[class*=" icon-"].icon-fixed-width {
  display: inline-block;
  width: 1.1428571428571428em;
  text-align: right;
  padding-right: 0.2857142857142857em;
}
[class^="icon-"].icon-fixed-width.icon-large,
[class*=" icon-"].icon-fixed-width.icon-large {
  width: 1.4285714285714286em;
}