#timeline {

	width: 100%;

	height: auto;

	overflow: hidden;

	margin: 10px auto;

	position: relative;

	background: url('../images/dot.gif') left 45px repeat-x;

}

#dates {

	width: 800px;

	height: 60px;

	overflow: hidden;

}

#dates li {

	list-style: none;

	float: left;

	width: 96px;

	height: 50px;

	font-size: 24px;

	text-align: center;

	background: url('../images/biggerdot.png') center bottom no-repeat;

}

#dates a {

	line-height: 38px;

	padding-bottom: 10px;

	font-size: 16px;

	color: #6f6f6f;

    position: relative;

}

#dates .selected:after {

	position: absolute;

	width: 9px;

	height: 9px;

	border-radius: 50%;

	background: #D43540;

	content: "";

	bottom: 6px;

	left: 0;

	right: 0;

	margin: 0 auto;

}

#dates .selected {

	font-size: 38px;

	font-family: 'Open Sans', sans-serif;

	font-weight: bold;

	    color: #ec0202 !important

}

#issues {

	height: auto;

	overflow: hidden;

	margin-top: 0px;

	z-index: 9999;

	position: relative;

}


	.time-outerdiv{
    overflow: hidden;
    z-index: 9999;
    position: relative;
    margin-top: -47px;
}

ul#issues {

	width: 100%;

}

#issues li {

	max-width: 1170px;

	width: 100%;

	height: auto;

	list-style: none;

	float: left;

}

#issues li.selected img {

	-webkit-transform: scale(1.1, 1.1);

	-moz-transform: scale(1.1, 1.1);

	-o-transform: scale(1.1, 1.1);

	-ms-transform: scale(1.1, 1.1);

	transform: scale(1.1, 1.1);

}

#issues li img {

	float: left;

	margin: 10px 30px 10px 50px;

	background: transparent;

	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);/* IE 6 & 7 */

	zoom: 1;

	-webkit-transition: all 2s ease-in-out;

	-moz-transition: all 2s ease-in-out;

	-o-transition: all 2s ease-in-out;

	-ms-transition: all 2s ease-in-out;

	transition: all 2s ease-in-out;

	-webkit-transform: scale(0.7, 0.7);

	-moz-transform: scale(0.7, 0.7);

	-o-transform: scale(0.7, 0.7);

	-ms-transform: scale(0.7, 0.7);

	transform: scale(0.7, 0.7);

}

#issues li h1 {

    font-size: 16px !important;

    font-family: 'Open Sans', sans-serif;

    font-weight: 600 !important;

    color: #000;

    line-height: 1.2;

    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.91);

    display: inline-block !important;

    width: auto !important;

    float: left;

    clear: both;

    padding: 14px 15px;

    text-align: center;

    margin: 0 auto 20px;

    /* position: relative; */

    z-index: 99999;

    

}

#issues li p {

	color: #5a5a5a;

	clear: both;

	font-size: 13px;

	margin: 0 auto;

	text-align: left;

	padding: 0 0 !important;

	width: 100% !important;

	max-width: 1170px;

	margin-bottom: 30px;

}

#grad_left,  #grad_right {

	width: 100px;

	height: 350px;

	position: absolute;

	top: 0;

}

#grad_left {

	left: 0;

	background: url('../images/grad_left.png') repeat-y;

}

#grad_right {

	right: 0;

	background: url('../images/grad_right.png') repeat-y;

}

.custom-navin {

    position: relative;

    z-index: 99999;

    top: -134px;

}

#next,  #prev {

	position: absolute;

	top: 0;

	font-size: 0px;

	top: 170px;

	width: 22px;

	height: 41px;

	background-position: 0 0;

	background-repeat: no-repeat;

	text-indent: -9999px;

	overflow: hidden;

}

/*#next:hover,

			#prev:hover {

				background-position: 0 -76px;

			}*/

#next {

	right: -15px;

	background-image: url(../images/right-time.png);

}

#prev {

	left: -35px;

	background-image: url(../images/left-time.png);

}

#next.disabled,  #prev.disabled {

	opacity: 0.2;

}

@media(max-width:1200px) {

	

	.custom-navin {

       overflow: hidden;

    top: -45px;

}

#prev {

	left: 0px;}

	

	#issues {

	

	margin-top: 0px;}

	

.time-line {

	/*overflow: hidden !important;*/

}

#issues li {

	max-width: 1000px;

	overflow: hidden;

}

}

 @media(max-width:1000px) {

#issues li {

	max-width: 700px;

	overflow: hidden;

}

}

 @media(max-width:767px) {

	 .custom-navin {

   

    top: 0px;

}

	 

.time-line {

	overflow: hidden !important;

	max-width: 700px !important;

	width: 100% !important;

}

#issues li {

	max-width: 600px;

	overflow: hidden;

}
#next, #prev {
    top: 35px;
}

}

 @media(max-width:718px) {

.time-line {

	overflow: hidden !important;

	max-width: 600px !important;

	width: 100% !important;

}

#issues li {

	max-width: 500px;

	overflow: hidden;

}

}



@media(max-width:618px) {

.time-line {

	overflow: hidden !important;

	max-width: 500px !important;

	width: 100% !important;

}

#issues li {

	max-width: 450px;

	overflow: hidden;

}

}



@media(max-width:518px) {

.time-line {

	overflow: hidden !important;

	max-width: 400px !important;

	width: 100% !important;

}

#issues li {

	max-width: 350px;

	overflow: hidden;

}

#next, #prev {

    top: 265px;

}

}



@media(max-width:418px) {

.time-line {

	overflow: hidden !important;

	max-width: 320px !important;

	width: 100% !important;

}

#issues li {

	max-width: 250px;

	overflow: hidden;

}

#next, #prev {

    top: 325px;

}

}



@media(max-width:340px) {

.time-line {

	overflow: hidden !important;

	max-width: 300px !important;

	width: 100% !important;

}

#issues li {

/*	max-width: 200px;*/

	overflow: hidden;

}

#next, #prev {

    top: 405px;

}

}

