@charset "utf-8";
/* CSS Document */

.timeline {
	
}


.timeline .spine {
	width: 100%;
	position: relative;
	padding-top: 30px;
	/* bottom: 100%; */
    background: -webkit-linear-gradient(left, rgba(134,251,0,0) 49.5%, rgba(43,26,76,1) 49.5%, rgba(43,26,76,1) 50.5%, rgba(134,251,0,0) 50.5%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(134,251,0,0) 49.5%, rgba(43,26,76,1) 49.5%, rgba(43,26,76,1) 50.5%, rgba(134,251,0,0) 50.5%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(134,251,0,0) 49.5%, rgba(43,26,76,1) 49.5%, rgba(43,26,76,1) 50.5%, rgba(134,251,0,0) 50.5%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(134,251,0,0) 49.5%, rgba(43,26,76,1) 49.5%, rgba(43,26,76,1) 50.5%, rgba(134,251,0,0) 50.5%); /* Standard syntax (must be last) */
	background-clip: content-box;
}
.timeline .timestamp {
	background: rgba(51,102,204,0);
	margin-top: -10px;
	margin-bottom: 70px;
}


.timedot {
	position: relative;
	width: 7%;		/* desired width */
	margin: 0 auto;
	border-radius: 50%;
    background: -webkit-radial-gradient(circle, rgba(250,250,250,1) 45%, rgba(43,26,76,1) 45%); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, rgba(250,250,250,1) 35%, rgba(43,26,76,1) 45%); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(circle, rgba(250,250,250,1) 35%, rgba(43,26,76,1) 45%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(circle, rgba(250,250,250,1) 35%, rgba(43,26,76,1) 35%); /* Standard syntax (must be last) */
}
.timedot:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}


.leftwing {
	margin-right: 48.25%;
	text-align: right;
}
.leftwing .stampbox {
	margin-right: 10%;
}
.leftwing .stampbox .date {
	color: rgba(43,26,76,1);
}

.leftwing .timedot {
	float: right;
}

.rightwing {
	margin-left: 48.25%;
	text-align: left;
	background: rgba(51,153,153,1);
}
.rightwing .stampbox {
	margin-left: 7%;
}
.rightwing .stampbox .date {
	color: rgba(43,26,76,1);
}


.rightwing .timedot {
	float: left;
}





.leftwing .stampbox {
    -webkit-animation-name: timestampL; /* Chrome, Safari, Opera */
    -webkit-animation-duration: .5s; /* Chrome, Safari, Opera */
    animation-name: timestampL;
    animation-duration: .5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes timestampL {
    0%   {margin-left: 100%; margin-right: -50%}
    25%  {margin-left: 75%; margin-right: -25%}
    50%  {margin-left: 50%; margin-right: 0%}
    75%  {margin-left: 25%; margin-right: 25%}
    100% {margin-left: 0%; margin-right: 50%}
}

/* Standard syntax */
@keyframes timestampL {
    0%   {margin-left: 100%; margin-right: -50%}
    25%  {margin-left: 75%; margin-right: -25%}
    50%  {margin-left: 50%; margin-right: 0%}
    75%  {margin-left: 25%; margin-right: 25%}
    100% {margin-left: 0%; margin-right: 50%}
}
.rightwing .stampbox {
    -webkit-animation-name: timestampR; /* Chrome, Safari, Opera */
    -webkit-animation-duration: .5s; /* Chrome, Safari, Opera */
    animation-name: timestampR;
    animation-duration: .5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes timestampR {
    0%   {margin-left: -50%; margin-right: 100%}
    25%  {margin-left: -25%; margin-right: 75%}
    50%  {margin-left: 0%; margin-right: 50%}
    75%  {margin-left: 25%; margin-right: 25%}
    100% {margin-left: 50%; margin-right: 0%}
}

/* Standard syntax */
@keyframes timestampR {
    0%   {margin-left: -50%; margin-right: 100%}
    25%  {margin-left: -25%; margin-right: 75%}
    50%  {margin-left: 0%; margin-right: 50%}
    75%  {margin-left: 25%; margin-right: 25%}
    100% {margin-left: 50%; margin-right: 0%}
}