/*
 * StyleName:		timeline.responsive.css
 * Email:		trung.styles@gmail.com
 *
 */

@media (max-width: 1200px) {
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
	body {
		width: 550px;
	}

	#timeline {
		width: 95vw;
		width: 550px;
	}
	#timeline .entry {
		margin-left: 35px;
		padding: 0 35px;
	}
	#timeline .entry + .entry {
		margin-top: 40px;
	}
	#timeline .entry.break {
		margin-top: 30px;
	}
	#timeline .content:before {
		top: 25px;
		transform: translateY(25px);
	}
	#timeline .entry.break .content:before {
		top: 10px;
		transform: translateY(30px);
	}
	#timeline .entry:not(.great) .content:before {
		top: 10px;
		transform: translateY(25px);
	}
	#timeline .entry:last-child .content:before {
		top: 0;
		transform: translateY(-35px);
	}
	#timeline .entry:first-child .content:after {
		bottom: 5px;
		transform: translateY(30px);
	}
	#timeline .date {
		font-size: 18px;
	}
	#timeline .entry:first-child .date,
	#timeline .entry:last-child .date,
	#timeline .entry.great .date {
		font-size: 28px;
	}
	#timeline .desc {
		font-size: 14px;
	}
	#timeline .entry:first-child .desc,
	#timeline .entry:last-child .desc,
	#timeline .entry.great .desc {
		font-size: 20px;
	}
	#timeline .caption {
		font-size: 12px;
	}
	#timeline .logo {
		padding: 5px 0;
	}
	#timeline .event-circle {
		margin: 20px 0;
		width: 15px;
		height: 15px;
		top: -15px;
		left: -21px;
		box-shadow: none;
	}
	#timeline .entry:not(.great):not(:first-child):not(:last-child) .event-circle {
		width: 12px;
		height: 12px;
		left: -20px;
		box-shadow: none;
	}
	#timeline .entry:first-child .event-circle,
	#timeline .entry:last-child .event-circle,
	#timeline .entry.great .event-circle {
		top: -5px;
	}
	#timeline .event-circle:before,
	#timeline .event-circle:after {
		width: 40px;
		height: 40px;
	}
	#timeline .event-circle:before {
		width: 30px;
		height: 30px;
	}
	#timeline .entry.break .event-circle:before,
	#timeline .entry.break .event-circle:after {
		width: 26px;
		height: 26px;
	}
	#timeline .entry.break .event-circle:after {
		width: 30px;
		height: 30px;
	}
	#timeline .link {
		padding: 5px 10px;
		font-size: 16px;
		min-width: 150px;
	}
}
@media (max-width: 550px) {
	#timeline {
		margin: 2.5vw auto;
	}
}