/** * ANG Timeline — Content Slider Module for WP, exclusively on Envato Market: http://codecanyon.net/user/aklare * @encoding UTF-8 * @version 1.0 * @copyright Copyright (C) 2015 Aklare (http://aklare.com). All rights reserved. * @license GNU General Public License version 2 or later, see http://www.gnu.org/licenses/gpl-2.0.html * @author Aleksandr Glovatskyy */ .ang-timeline-entry{ position:relative; margin-top: 25px; } .ang-timeline-entry::before { content: ""; position: absolute; top: 0px; left: 50%; margin-left: -1px; background-color: #e8e8e8; height: 100%; width: 2px; border-radius: 2px; display: block; } .feed-timeline-vertical::before{ content: ""; position: absolute; top: 0px; left: 50%; margin-left: -5px; background-color:#e8e8e8; width: 10px; height: 10px; border-radius: 50%; display: block; box-sizing:border-box; } .feed-timeline-vertical::after{ content: ""; position: absolute; bottom: 0px; left: 50%; margin-left: -5px; background-color: #e8e8e8; width: 10px; height: 10px; border-radius: 50%; display: block; box-sizing:border-box; } .feed-timeline-vertical { position: relative; margin: 0px; padding: 20px 0px; overflow:hidden; list-style: none; } .feed-timeline-vertical li .entry .panel-body h5{ margin-bottom:15px; } .feed-timeline-vertical li .entry .panel-body p{ margin-bottom:15px; } .feed-timeline-vertical li, .feed-timeline-vertical li.even { display: block; position: relative; width: 50%; /*background: transparent url("../images/timeline-middle.png") repeat-x scroll center center;*/ transition: all 0.5s ease 0s; clear: right; float: right; margin-top: 90px; margin-bottom: 15px; margin-right:0; margin-left: 0px; } .feed-timeline-vertical li:nth-child(2n+1), .feed-timeline-vertical li.odd { clear: both; float: left; margin-top: 15px; margin-bottom: 80px; margin-left:0; } .feed-timeline-vertical li .entry-wrapp{ position: relative; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp::before { content: ""; position: absolute; top: 50%; right: 0px; height: 2px; width: 100%; margin-top:-1px; background-color: #e8e8e8; z-index: -1; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp { padding-left: 20%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp { padding-right: 20%; padding-left: 0; } .feed-timeline-vertical li .entry-wrapp:hover { padding-left: 18%; margin-right:2%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp:hover { padding-right: 18%; margin-left:2%; padding-left: 0; margin-right:0; } .feed-timeline-vertical li .entry-wrapp:hover::before { background-color: #6aa0f1; } .feed-timeline-vertical .entry{ display: block; padding: 6%; position: relative; border: 1px solid #e6e6e6; border-bottom-width:3px; font-size: 14px; color:#a7a7a7; background-color: #fff; background-image: -moz-linear-gradient(center top , #FFF, #EEE); } .feed-timeline-vertical li .entry { margin-bottom: 0px; margin-left:0; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp:hover .entry{ border-color: #6aa0f1; } .tm-timeline-thumb { display: block; padding: 2px 2px; position: relative; border-radius: 3px; border: 1px solid #e6e6e6; background-color: #fff; } /* */ .feed-timeline-vertical li .entry .timeline-time{ text-align: right; margin-right: 20px; margin-left: 20px; position: absolute; top: 0; right: 0; margin-top: 2px; font-size: 12px; } .feed-timeline-vertical li div .timeline-year{ position: absolute; top: 50%; background:none; overflow: hidden; z-index: 100; margin-top: -7px; right: auto; left: -57px; line-height:1; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-year{ right: -57px; left:auto; } .feed-timeline-vertical li div .timeline-year time{ transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp:hover .timeline-year{ color: #6aa0f1; } .feed-timeline-vertical li div .timeline-icon-wrapp{ position: absolute; top: 50%; background:none; text-align: center; overflow: hidden; z-index: 100; margin-top: -15px; right: auto; left: -15px; padding:5px; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-icon-wrapp{ right: -15px; left:auto; } .feed-timeline-vertical li div .timeline-icon-wrapp .timeline-icon{ border:2px solid #e8e8e8; width: 20px; height: 20px; border-radius: 50%; background-color: #FFF; box-sizing: border-box; transition: all 0.5s ease 0s; } .feed-timeline-vertical li .entry-wrapp:hover .timeline-icon{ border:2px solid #6aa0f1; background-color: #6aa0f1; } .feed-timeline-vertical li div .timeline-content { margin: 0px; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-content { margin: 0px; } .feed-timeline-vertical li div .timeline-content .panel-body { overflow:hidden; } /* media */ @media (max-width:959px){ } @media (max-width:767px){ .ang-timeline-entry::before{ left: 20%; } .feed-timeline-vertical::before{ left: 20%; } .feed-timeline-vertical::after{ left: 20%; } .feed-timeline-vertical li .entry-wrapp{ padding-left: 10%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp { padding-left: 10%; } .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp{ padding-right:0; } .feed-timeline-vertical li .entry-wrapp:hover , .feed-timeline-vertical li:nth-child(2n+1) .entry-wrapp:hover { padding-left: 9%; margin-right:1%; padding-right:0; margin-left: 0; } .feed-timeline-vertical li, .feed-timeline-vertical li.even, .feed-timeline-vertical li:nth-child(2n+1), .feed-timeline-vertical li.odd { width:80%; clear: both; float: right; margin-top: 20px; margin-bottom:30px; margin-left:0; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-icon-wrapp{ right: auto; left: -15px; } .feed-timeline-vertical li:nth-child(2n+1) div .timeline-year{ right: auto; left: -57px; } } @media (max-width:479px){ }