* {
	margin: 0;
	padding: 0;
}

body {
	background: white;
	font-family: Georgia, serif;
	color: #fff;
	font-size: 14px;
	min-width: 320px;
}

a {
	color: #ffffcc;
	text-decoration: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
	a:hover,
	a.selected {
		color: #ffcc00;
	}

h1,h2,h4,h5,h6 {
	text-align: center;
	color: #ccc;
	text-shadow: none;
	margin-bottom: 5px;
}
	h1 {
		font-size: 18px;
		padding-top: 0px;
	}
	h2 {
		font-size: 14px;
	}

header {
	margin: 0;
	width:101%;
}

#capBug {
	background: url('../images/capBug.png') no-repeat;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	background-size: contain;
	padding-bottom: 30px;

}

#headContainer {
	width: 100%;
	background-color: white;
	
}

#timelineContainer {
	background-color: #B3B3B3;
	margin: 0;
	width: 101%;
}

.imageContainer {
	margin: auto;
	z-index: 1;
}

.issueText {
	margin: 0 auto!important;
	padding-bottom: 0px !important;
}

.sourceText {
	font-size: 9px !important;
	line-height: 10px !important;
	font-family: din-condensed, sans-serif !important;
	color: black;
	padding-top: 5px;
	margin: 0 auto !important;
	word-break: break-all; 
	word-wrap: break-word;
	width: 98%;
	font-style: normal !important;
	font-weight: 300 !important;
}

.imageContainer img {
	height: 75px;
	width: 75px;
	padding-top: 18px;
}

img {
	display: block !important;
	margin: auto;
}

.rippedPage {
	height: 150px;
	
	margin: 0px;
}

#section1 {
	background-color: #B3B3B3;
	margin-top: -5px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 101%;
    margin-bottom: -1px;
}

#roundedRect {
	border-radius: 20px;
	background: #999999;
	width: 90%;
	margin: auto;
	max-width: 600px
}

.clickPanel {
	width: 90%;
}

.btnIconStatement {
	width: 16px;
	height: 16px;
	padding: 2px;
	display: inline-block;
	
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 20px;
}

.btnIconStatement i {
	font-size: 22px;
    margin-top: -3px;
    margin-left: -5px;
}


.btnText {
	font-size: 16px;
	font-family: din-2014;
	font-weight: 500;
	color: white;
	text-align: center;
	display: inline-block;
    position: relative;
    margin-top: 0px;

}

.issueButton {
	background-color: #999999;
	border-radius: 10px;
	padding: 10px;
	width: 90%;
	max-width: 300px;
	text-align: center;
	margin: 0 auto;
}


#titleText {
	font-size: 28px;
	font-family: din-2014;
	text-transform: uppercase;
	font-weight: 100;
	width: 95%;
	color: black;
	margin: 0 auto;
    max-width: 500px;
    padding-top: 1em;
    padding-bottom: .6em;
    line-height: 30px;
}

#textBoxTitleContainer {
	width: 300px;
	margin: auto;
}

#textBoxTitle {
	font-family: din-2014;
	text-transform: uppercase;
	text-shadow: none;
	color: #fff;
	font-weight: 600;
	padding-top: 44px;
	font-size: 22px;
	line-height: 26px;
	margin: auto;
	letter-spacing: 1.5px;
}

#textBoxQuoteContainer {
	margin: auto;
	width: 80%;
	padding-top: 10px;
}

#textBoxQuote {
	color: #FBCF3B;
	font-size: 13px;
	font-family: din-2014;
	font-weight: 400;
	padding-bottom: 20px;
	text-align: center;
}

#circleBG {
	background: #999999;
	height: 115px;
	width: 115px;
	border-radius: 150px;
	margin: auto;
	margin-bottom: -55px;
	margin-top: -50px;
}

#link5 {
	width: 96%;
    margin: auto;
}

div#sectionTwo {
	background: white !important;
	background-color: white !important;
	width: 100%;
	margin: 0;
}

.sociales {
	text-align: center;
	margin-bottom: 20px;
}

.sectionLink {
	padding-bottom: 5px;
	border-bottom: solid #FBCF3B 2px;
	margin-bottom: 5px;
	padding-top: 5px;
}

.sectionLink a{
	color: #666666;
	font-size: 14px;
	font-family: din-2014;

}

#column1 {
	width: 48%;
	vertical-align: top;
	display: inline-block;
	background-color: white;
	padding-left: 5px;
}

#column2 {
	width: 46%;
	vertical-align: top;
	display: inline-block;
	background-color: white;
	padding-left: 3%;
	margin-right: -10px
}

#linksRow {
	background-color: white;
	max-width: 600px;
	margin: auto;
}

#columnContainer {
	width: 95%;
	margin: auto;
	padding-bottom: 20px;
	padding-top: 10px;
}

#rip1 {
	background-image: url('../images/rip_top.png'); 
	background-position: center;
	background-size: cover;
	margin-top: -50px;
}

.sectionLink {
	cursor: pointer;
}

.ui-loader{
	display: none;
}

#rip2 {
	background-image: url('../images/rip_top.png'); 
	background-position: center;
	background-size: cover;
	transform:scaleY(-1);
	margin-top: -22px;
    width: 101%;
}

	#timeline {
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		height: 600px;
		overflow: hidden;
		margin: auto;
		margin-left: 1%;
		margin-bottom: 20px;
		position: relative;
		background: url('../images/dot_black.png') 19px top repeat-y;
		background-color: #B3B3B3;
	}
		#dates {
			width: 10%;
			height: 600px;
			overflow: hidden;
			float: left;
		}
			#dates li {
				background: url('../images/biggerdot_black_1.png') center no-repeat;
				list-style: none;
				width: 60px;
				height: 100px;
				line-height: 100px;
				font-size: 24px;
				padding-left: 0px;
				text-align: center;
				margin-left: -10px;
				transform: scale(.7);
			}
				#dates a {
					
					padding-bottom: 10px;
					font-family: din-2014;
					font-weight: 600;
					width: 60px;
				}
		
		#issues {
			width: 90%;
			height: 600px;
			overflow: hidden;
			float: left;
		}	
			#issues li {
				width: 90%;
				height: 600px;
				list-style: none;
				margin-left: 20px;
				display: flex;
  				flex-direction: column;
  				justify-content: center;
			}
				#dates li .selected {
				    
				 
				}

				#dates a .selected {
					transform: scale(1.2);
					
				}

				
				#issues li h1 {
					color: black;
					font-size: 20px;
					text-align: center;
					font-family: din-2014;
					text-transform: uppercase;
					text-shadow: none;

				}
				#issues li p {
					font-size: 14px;
					margin: 10px 20px;
					font-weight: normal;
					line-height: 16px;
					font-family: din-2014;
					color: black;
					width: 98%;
					padding-bottom: 10px;
				}

				a.clickPanel {
					color: black;
					margin: 0 auto;
				}

				.clickPanel i {
					color: #FBCF3B !important;
				}

				a.clickPanel: hover {
					color: #FBCF3B !important;
				}
		
		#grad_top,
		#grad_bottom {
			width: 500px;
			height: 80px;
			position: absolute;
			pointer-events: none;
		}
			#grad_top {
		        top: 0;
		        background: url('../images/grad_top_grey.png') repeat-x;
			}
			#grad_bottom {
		        bottom: 0;
		        background: url('../images/grad_bottom_grey.png') repeat-x;
			}
		
		#next,
		#prev {
			position: absolute;
			left: 44%;
			font-size: 70px;
			width: 38px;
			height: 22px;
			background-position: 0 -44px;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next:hover,
			#prev:hover {
				background-position:  0 0;
			}
			#next {
				bottom: 3px;
				background-image: url('../images/next_v_bw.png');
			}
			#prev {
				top: 3px;
				background-image: url('../images/prev_v_bw.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}

@media screen and (min-width: 780px) {
	#timeline {
		width: 50%;
		margin: 0 auto;
	}
	#timelineWidth {
		margin: 0 auto;
	}
	#next {
		bottom: 30px;
	}
	#prev {
		top: 30px;
	}
}

@media screen and (min-width: 1000px) {
	#titleText {
		padding-bottom: 2em;
	}
	#headContainer {
		background-color: #F7F7F7;
	}
	#section2 {
		background-color: #F7F7F7;
	}
	#columnContainer, #linksRow, .sectionLink, #column1, #column2 {
		background-color: #F7F7F7;
	}
}