.timelineFlat.timelineFlatPortfolio .item .read_more { margin-top:20px; } .timelineFlat.timelineFlatPortfolio .item, .timelineFlat.timelineFlatPortfolio .item_open { height: 427px; } .timelineFlat.timelineFlatBlog .item, .timelineFlat.timelineFlatBlog .item_open { height: 338px; } .timelineFlat.timelineFlatBlog .item .post_date { background: #dd5555; color: #ffffff; border-radius: 50%; width: 35px; height: 35px; padding: 15px; text-align: center; font-size: 24px; line-height: 24px; margin: -34px 18px 0 0; float: right; position: relative; z-index: 2; } .timelineFlat.timelineFlatBlog .item .post_date span { display: block; width: auto; height: auto; font-size: 12px; line-height: 12px; margin: 0; } .timelineFlat { display:none; } .timelineLoader { width:100%; text-align:center; padding:150px 0; } .timelineFlat .timeline_line { margin-top:10px; margin-bottom:10px; width:900px; } .timelineFlat .t_line_holder { padding: 10px 0 0 0; height:80px; background:url('https://www.ra-om.de/raomwireframe/images/timeline/light/line.jpg') repeat-x 0px 49px; } .timelineFlat .t_line_view { height:20px; width:900px; } .timelineFlat .t_line_m { margin-top:35px; height:10px; border-left:1px solid transparent; border-right:1px solid #b7b6b6; width:448px; } .timelineFlat .t_line_m.right { left:449px; width:449px; border-left:1px solid #b7b6b6; border-right:1px solid transparent; } .timelineFlat h4.t_line_month { font-size: 12px; margin:-30px 0 0; color:#b7b6b6; } .timelineFlat a.t_line_node { text-decoration:none; padding:38px 0 4px; height:10px; font-size:12px; top:-25px; position: relative; color:#b7b6b6; } .timelineFlat a.t_line_node:after { content: ""; border-radius: 22px; height: 10px; width: 10px; border: 2px solid #ffffff; position: absolute; top: 23px; left: 50%; margin: 0 0 0 -7px; background:#dd5555; } .timelineFlat a.t_line_node.active { color:#dd5555; } .timelineFlat a.t_line_node.active:after { border: 2px solid #b7b6b6; } .timelineFlat .t_node_desc { white-space: normal !important; top:-50px; opacity: 0; filter: alpha(opacity=0); left: 50%; color:#fff; display: inline-block !important; position: relative; transition:top 200ms, opacity 500ms; -webkit-transition:top 200ms, opacity 500ms; -moz-transition:top 200ms, opacity 500ms; } .timelineFlat a.t_line_node:hover .t_node_desc { top:0; opacity: 1; filter: alpha(opacity=100); } .timelineFlat .t_node_desc span { white-space: nowrap; margin-left: -50%; margin-right: 50%; margin-top: -16px; display: block !important; padding:8px; border-radius: 3px; background: #dd5555; position: relative; } .timelineFlat .t_node_desc span:after { content: ""; width: 0; height: 0; display: block; position: absolute; bottom: -10px; border:5px solid transparent; border-top:5px solid #dd5555; left:50%; margin-left: -5px; } .timelineFlat #t_line_left, .timelineFlat #t_line_right { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor:pointer; top:39px; width:14px; height:21px; font-size: 21px; color: #b7b6b6; position: relative; } .timelineFlat #t_line_left:hover, .timelineFlat #t_line_right:hover { color: #dd5555; } .timelineFlat #t_line_left { left:-30px; } .timelineFlat #t_line_left:after { content: "\f104"; position: absolute; right: 0; top:0; } .timelineFlat #t_line_right { right:-30px; } .timelineFlat #t_line_right:after { content: "\f105"; position: absolute; left: 0; top:0; } .timelineFlat { display:none; } .timeline_items_wrapper { position: relative; width: 100%; margin: 10px 0; } .timelineFlat .timeline_items { padding:0; } .timelineFlat .item { width:410px; height:410px; background:#eaeaea;  color:#777777; font-size:14px; line-height:14px; position: relative; } .timelineFlat .item.item_node_hover:before { content: ""; position: absolute; height: 4px; background: #dd5555; width: 100%; z-index: 2; top:0; left:0; } .timelineFlat .item.item_node_hover:after { content: ""; position: absolute; height: 0; width: 0; z-index: 2; top:0; left:50%; margin: 4px 0 0 -6px; border: 6px solid transparent; border-top: 6px solid #dd5555; } .timelineFlat .item img { margin-top:0; width:100%; } .timelineFlat .item h2 { padding: 20px 20px 10px; margin: 0; font-size:12px; line-height:12px; color: #dd5555; } .timelineFlat .item span{ display:block; margin:0px 20px 10px; height:75px; } .timelineFlat .item .read_more { padding:10px; font-size:12px; line-height:12px; float:left; color:#ffffff; cursor:pointer; margin: 0 20px 20px; border-radius: 3px; background:#dd5555; transition:background-color 300ms; -webkit-transition: background-color 300ms; -moz-transition: background-color 300ms; } .timelineFlat .item_open { width:410px; height:410px; background:#eaeaea;  position:relative; color:#777777; z-index:2;  } .timelineFlat .item_open h2 { margin:0 0 10px; padding-top:0; font-size:12px; line-height:12px; color: #dd5555; } .timelineFlat .item_open_cwrapper { width:410px; height:100%; } .timelineFlat .item_open_content { width:100%; height:100%; position:relative; } .timelineFlat .item_open_content .ajaxloader { position:absolute; top:50%; left:50%; margin:-10px 0 0 -100px; } .timelineFlat .timeline_open_content { padding:20px; } .timelineFlat .mCSB_container { margin-right: 16px; } .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar  { background: #dd5555; } .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { color:#f75f5f; } .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_draggerRail { background: #aaaaaa; } .timelineFlat .mCustomScrollBox > .mCSB_scrollTools { width: 8px; } .timelineFlat .item_open .t_close { position:absolute; top:20px; right:16px; padding:0 2px 2px 2px; width: 12px; height: 12px; font-size:16px; line-height: 12px; color: #dd5555; cursor:pointer; z-index:2; text-align: center; transition:color 300ms; -webkit-transition: color 300ms; -moz-transition: color 300ms; } .timelineFlat .item_open .t_close:hover { color:#f75f5f; } .timelineFlat .t_controles { margin:0; } .timelineTouch.timelineFlat .t_left, .timelineTouch.timelineFlat .t_right { display: none; } .timelineFlat:hover .t_left, .timelineFlat:hover .t_right { opacity: 1; filter: alpha(opacity=100);	 } .timelineFlat .t_left, .timelineFlat .t_right { position: absolute; display:block; height:100%; width:75px; margin:0; cursor:pointer; top:0; z-index: 10; opacity: 0; filter: alpha(opacity=0);	 transition:background-color 300ms, opacity 300ms; -webkit-transition: background-color 300ms, opacity 300ms; -moz-transition: background-color 300ms, opacity 300ms; } .timelineFlat .t_left,   .timelineFlat .t_left:hover:active { left:0; background: rgba(255,255,255, 0.5) url('https://www.ra-om.de/raomwireframe/images/timeline/clean/blck-arrow-left.png') no-repeat center center; } .timelineFlat .t_left:hover { background: rgba(255,255,255, 0.7) url('https://www.ra-om.de/raomwireframe/images/timeline/clean/blck-arrow-left.png') no-repeat center center; } .timelineFlat .t_right,  .timelineFlat .t_right:hover:active{ right:0; background: rgba(255,255,255, 0.5) url('https://www.ra-om.de/raomwireframe/images/timeline/clean/blck-arrow-right.png') no-repeat center center; } .timelineFlat .t_right:hover { background: rgba(255,255,255, 0.7) url('https://www.ra-om.de/raomwireframe/images/timeline/clean/blck-arrow-right.png') no-repeat center center; } @media screen and (max-width:980px) { .timelineFlat .timeline_line { width:680px; } .timelineFlat .t_line_view { width:680px; } .timelineFlat .t_line_m { width: 338px; } .timelineFlat .t_line_m.right { left: 339px; width: 339px; } } @media screen and (max-width:767px) { .timelineFlat .timeline_line { width:530px; } .timelineFlat .t_line_view { width:1060px; } .timelineFlat .t_line_m { width: 528px; } .timelineFlat .t_line_m.right { left: 530px; width: 528px; } .timelineFlat .t_line_node span { } .timelineFlat .t_node_desc { font-size:8px; } .timelineFlat .t_line_m.right .t_node_desc { right:auto; left:0; } } @media screen and (max-width:609px) { .timelineFlat .timeline_line { width:240px; } .timelineFlat .t_line_view { width:480px; } .timelineFlat .t_line_m { width: 238px; } .timelineFlat .t_line_m.right { left: 240px; width: 238px; } .timelineFlat .item_open { width:280px; height:390px; } .timelineFlat .item_open img { max-width:280px; }  .timelineFlat .item_open_cwrapper { width:280px; } }