/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline-wrapper{
	 overflow:hidden;
	 height:;
	 margin-top:2px;
  /*margin-left:80px;*/
  /*border-left:1px solid #E5E5E5;*/
  min-height:500px;
}
#timeline {
	list-style: none;
	margin: 206px 0 0 60px;
	padding: 0;
	/*border-top:56px solid transparent;
	border-image:url('../images/timelinecontour.png');
	border-image-slice: 56 0 0 0;
	border-image-repeat: repeat; 
	border-image-outset: 0px 349px 0px 0px ;*/
	display: table;
	/*border-spacing: 81px 0;*/
	 background-image:url('../images/timelinecontour.png');
	background-repeat:repeat-x;
	background-position:left top;
	
}
li.work .ps-container > .ps-scrollbar-x-rail, li.work  .ps-container > .ps-scrollbar-y-rail{
	opacity:0.6;
}
li.work .fa-arrows-v{
	position:absolute;
	z-index:999;
	top:40%;
	right:-25px;
}
.bounce {
  display: inline-block;
  -moz-animation: bounce 1s infinite linear;
  -o-animation: bounce 1s infinite linear;
  -webkit-animation: bounce 1s infinite linear;
  animation: bounce 1s infinite linear;
  color:000;
}
@-webkit-keyframes bounce {
    0% { top: 76px; }
    50% { top: 80px; }
    70% { top: 86px; }
    100% { top: 76px; }
}
@-moz-keyframes bounce {
   0% { top: 86px; }
    50% { top: 80px; }
    70% { top: 76px; }
    100% { top: 86px; }
}
@-o-keyframes bounce {
   0% { top: 86px; }
    50% { top: 80px; }
    70% { top: 76px; }
    100% { top: 86px; }
}
@-ms-keyframes bounce {
   0% { top: 86px; }
    50% { top: 80px; }
    70% { top: 76px; }
    100% { top: 86px; }
}
@keyframes bounce {
   0% { top: 86px; }
    50% { top: 80px; }
    70% { top: 76px; }
    100% { top: 86px; }
}
#timeline li {
  display: table-cell;
}
#timeline li .relative {
  position: relative;
}
#timeline p {
  margin: 0px;
}
.date {
  text-align: center;
  top: -40px;
  left: 0;
  right: 0;
  font-family:'Scada';
  font-size: 24px;
  line-height: 120%;
  position: absolute;
  font-weight:500;
  color:#0064B6;
  letter-spacing:-0.05em;
}
.date.top{
	top: 68px;
	margin:0;
	padding:0;
}
.circle {
  margin: 0 auto;
  top: -39px;
  left: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  background-image:url('../images/timelinedot.png');
  background-position:center;
  background-repeat:no-repeat;
}
.circle.top{
	top:101px;
	margin-top:0;
	padding:0;
}
.activedot{
	background-image:url('../images/timelinedot-active.png');
}
.startcircle {
 width: 38px;
  height: 38px;
  line-height: 0;
  font-size: 22px;
  text-align: center;
  position: absolute;
  bottom: 120px;
  margin:0;
  left: -52px;
  background-color: #F6F6F6;
  border: 1px solid #E5E5E5;
  z-index: 100;
  border-radius:5px;
}
.startcircle i{
	width:30px;
	height:31px;
	background-color:#fff;
	border-radius:5px;
	font-size:18px;
	color:#333;
	line-height:120%;
	margin-top:3px;
	padding-top:4px;
}
.relative.margina{
	margin-left:155px;
}
.work .content {
	width:292px;
	height:192px;
	vertical-align: top;
	transition: width 0.4s linear, max-height 0.4s linear;
	/*border-width: 2px;
	border-style: solid;*/
	position: relative;
	background-color:#F6F6F6;
	border-radius:10px;
	margin-left:24.5px;
	top:13px;
	margin-top:0px;
	/*overflow:hidden;*/
}
.work .content.first{
	position:absolute;
	top:85px;
	left:-48px;
	width:62px;
	font-family:'Scada';
	font-size:10px;
	color:#333;
	line-height:130%;
	letter-spacing:-0.03em;
	text-align:center;
	padding:0;
	background-color:#FFF;
	border-radius:0;
	margin:0;
}
.work .content.margina{
	margin-left:155px;
}
.work .content p{
	margin-top:21px !important;
	padding: 0px 17px 21px 17px !important;
	float:left;
	font-family:'Scada';
	font-size:12px;
	font-weight:300;
	color:#666666;
	line-height:180%;
	text-decoration:none;
	text-align:left;
	/*word-break: keep-all !important;
	hyphens: auto;*/
	/*overflow: hidden;*/
	height:150px;
	position:relative;
}
.work .content p b{
	color:#333333;
}
/*.work .content:before, .work .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  bottom: 100%;
}
.work .content.top:before, .work .content.top:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  bottom: -30px;
  transform:rotate(180deg);
}
.work .content:before {
  border-bottom-color: inherit;
  border-width: 15px;
  left: 50%;
  margin-left: -15px;
}
.work .content:after {
  border-bottom-color: #1371b7;
  border-width: 12px;
  left: 50%;
  margin-left: -12px;
}
.work .content.top:before {
  border-bottom-color: inherit;
  border-width: 15px;
  left: 50%;
  margin-left: -15px;
}
.work .content.top:after {
  border-bottom-color: #1371b7;
  border-width: 12px;
  left: 50%;
  margin-left: -12px;
  margin-bottom: 6px;
}*/
.work .content.top {
  top:-150px;
}
#timeline label {
  font-size: 1.3em;
  position: absolute;
  z-index: 100;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  top: 60px;
  padding:0px 10px;
  text-align:center;
}
.label2{
  top:-202px;
  position: absolute;
  z-index: 100;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  padding:0px 10px;
  text-align:center;
}
.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  width: 400px;
  transition: width 0.3s linear 0.2s;
}
.work:hover .circle {
	background-image:url('../images/timelinedot-active.png');
}
/*.radio:checked ~ .work .content {
  max-height: 180px;
  border-color: #eee9dc;
  width: 400px;
}
.radio.top:checked ~ .work .content.top {
  max-height: 180px;
  border-color: #eee9dc;
  width: 400px;
}
.radio:checked ~ .work .content p {
  max-height: 200px;
  color: #FFF;
  transition: color 0.3s linear 0.3s;
}*/

/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */