iframe {
  max-width: 100%;
}

/*PUBLICO family*/

	/*publico black and black italic*/
	@font-face {
		font-family: Publico-Black;
		src: url('/css/fonts/Publico/Publico-Black.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Publico-Black;
		src: url('/css/fonts/Publico/Publico-BlackItalic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/*publico bold and bold italic */
	@font-face {
		font-family: Publico-Bold;
		src: url('/css/fonts/Publico/Publico-Bold.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Publico-Bold;
		src: url('/css/fonts/Publico/Publico-BoldItalic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/*publico extra bold & extra bold italic */
	@font-face {
		font-family: Publico-ExtraBold;
		src: url('/css/fonts/Publico/Publico-Extrabold.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Publico-ExtraBold;
		src: url('/css/fonts/Publico/Publico-ExtraboldItalic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/* publico roman and roman italic */
	@font-face {
		font-family: Publico;
		src: url('/css/fonts/Publico/Publico-Roman.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Publico;
		src: url('/css/fonts/Publico/Publico-Italic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/* publico Medium and medium italic*/
	@font-face {
		font-family: Publico-Medium;
		src: url('/css/fonts/Publico/Publico-Medium.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Publico-Medium;
		src: url('/css/fonts/Publico/Publico-MediumItalic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/* publico light and light italic */
	@font-face {
		font-family: Publico-Light;
		src: url('/css/fonts/Publico/Publico-Light.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Publico-Light;
		src: url('/css/fonts/Publico/Publico-LightItalic.otf');
		font-weight:normal;
		font-style:italic;
	}
	


	/* publico text roman */
	@font-face {
		font-family: PublicoText;
		src: url('/css/fonts/Publico/PublicoText-Roman.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: PublicoText;
		src: url('/css/fonts/Publico/PublicoText-Italic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/* publico text bold */
	@font-face {
		font-family: PublicoText-Bold;
		src: url('/css/fonts/Publico/PublicoText-Bold.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: PublicoText-Bold;
		src: url('/css/fonts/Publico/PublicoText-BoldItalic.otf');
		font-weight:normal;
		font-style:italic;
	}

	/* publico text roman */
	@font-face {
		font-family: PublicoText-Semibold;
		src: url('/css/fonts/Publico/PublicoText-Semibold.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: PublicoText-Semibold;
		src: url('/css/fonts/Publico/PublicoText-SemiboldItalic.otf');
		font-weight:normal;
		font-style:italic;
	}


/* Boomer family */

	/*Boomer Condensed*/
	/* Can use with bold weight, and italic style, both, or none */
	@font-face {
		font-family: BoomerCond;
		src: url('/css/fonts/Boomer/BoomerCond-Book.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: BoomerCond;
		src: url('/css/fonts/Boomer/BoomerCond-BookItalic.otf');
		font-weight:normal;
		font-style:italic;
	}
	@font-face {
		font-family: BoomerCond;
		src: url('/css/fonts/Boomer/BoomerCond-Bold.otf');
		font-weight:bold;
		font-style:normal;
	}
	@font-face {
		font-family: BoomerCond;
		src: url('/css/fonts/Boomer/BoomerCond-BoldItalic.otf');
		font-weight:bold;
		font-style:italic;
	}

	/*Boomer*/
	/* Can use with bold weight, and italic style, both, or none */
	@font-face {
		font-family: Boomer;
		src: url('/css/fonts/Boomer/Boomer-Book.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Boomer;
		src: url('/css/fonts/Boomer/Boomer-BookItalic.otf');
		font-weight:normal;
		font-style:italic;
	}
	@font-face {
		font-family: Boomer;
		src: url('/css/fonts/Boomer/Boomer-Bold.otf');
		font-weight:bold;
		font-style:normal;
	}
	@font-face {
		font-family: Boomer;
		src: url('/css/fonts/Boomer/Boomer-BoldItalic.otf');
		font-weight:bold;
		font-style:italic;
	}

	/*Boomer-Light*/
	/* Can use with italic style*/
	@font-face {
		font-family: Boomer-Light;
		src: url('/css/fonts/Boomer/Boomer-Light.otf');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Boomer-Light;
		src: url('/css/fonts/Boomer/Boomer-LightItalic.otf');
		font-weight:normal;
		font-style:italic;
	}

/* Scout family */

	/* Scout Condensed */
	/* Can use with bold weight, and italic style, both, or none */
	@font-face {
		font-family: ScoutCond-Black;
		src: url('/css/fonts/Scout/SCOUTCOND-BLACK.OTF');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: ScoutCond-Black;
		src: url('/css/fonts/Scout/SCOUNTCOND-BLACKITALIC.OTF');
		font-weight:normal;
		font-style:italic;
	}
	@font-face {
		font-family: ScoutCond;
		src: url('/css/fonts/Scout/SCOUTCOND-BOLD.OTF');
		font-weight:bold;
		font-style:normal;
	}
	@font-face {
		font-family: ScoutCond;
		src: url('/css/fonts/Scout/SCOUNTCOND-BOLDITALIC.OTF');
		font-weight:bold;
		font-style:italic;
	}
	@font-face {
		font-family: ScoutCond;
		src: url('/css/fonts/Scout/SCOUTCOND-EXTRALIGHT.OTF');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: ScoutCond;
		src: url('/css/fonts/Scout/SCOUTCOND-EXTRALIGHTITALIC.OTF');
		font-weight:normal;
		font-style:italic;
	}

	/* scout bold */
	@font-face {
		font-family: Scout-Bold;
		src: url('/css/fonts/Scout/SCOUT-BOLD.OTF');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Scout-Bold;
		src: url('/css/fonts/Scout/SCOUT-BOLDITALIC.OTF');
		font-weight:normal;
		font-style:italic;
	}
	/* scout regular */
	@font-face {
		font-family: Scout;
		src: url('/css/fonts/Scout/SCOUT-REGULAR.OTF');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Scout;
		src: url('/css/fonts/Scout/SCOUT-REGULARITALIC.OTF');
		font-weight:normal;
		font-style:italic;
	}
	/* scout light */
	@font-face {
		font-family: Scout-Light;
		src: url('/css/fonts/Scout/SCOUT-LIGHT.OTF');
		font-weight:normal;
		font-style:normal;
	}
	@font-face {
		font-family: Scout-Light;
		src: url('/css/fonts/Scout/SCOUT-LIGHTITALIC.OTF');
		font-weight:normal;
		font-style:italic;
	}








article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

#cannon-sound{
	display:none;
}
#sound-icon{
	position:fixed;
	left:50px;
	font-size:26px;
	color:#fff;
	z-index:1000;
}

body, h1, h2, h3, h4, h5, p{
	font-family:'Publico';
	color:#111;
}

body{
	height:100%;
	background-color:#fff;
}

p{
	font-family:'Publico-Light';
	font-size:22px;
	line-height:1.6em;
	margin-bottom:20px;
}

p b{
	font-family:'Publico-Bold';
}

section{
	padding-top:50px;
	padding-bottom:50px;
}

.img-slide{
	background-color:#000;
}

#title-img{
	background-image:url("/images/1.jpg");
	background-color:#000;
	background-size:130% auto;
	height:850px;
	box-shadow: inset 0 -240px 400px -40px rgba(0,0,0,1.0);
	text-align:center;
}

#title-img-2{
	background-image:url("/images/part2.jpg");
	background-color:#000;
	background-size:120% auto;
	height:900px;
	box-shadow: inset 0 -240px 400px -40px rgba(0,0,0,1.0);
	text-align:center;
}

#title-img-3{
	background-image:url("/images/title3.jpg");
	background-color:#000;
	background-size:120% auto;
	background-position:-20px -150px;
	height:800px;
	box-shadow: inset 0 -240px 400px -40px rgba(0,0,0,1.0);
	text-align:center;
}
#title-img-4{
	background-image:url("/images/title-img-4.jpg");
	background-color:#000;
	background-size:100% auto;
	background-position:0px -100px;
	height:800px;
	box-shadow: inset 0 -240px 400px -40px rgba(0,0,0,1.0);
	text-align:center;
}

#title-4-row{
	margin-top:50px;
}
#title-img-4 .quote-sign{
	margin-top:10px;
}
#title-img-4 .title-quote{
	font-size:42px;
}
#project-attr{
	font-family:'Publico';
	font-size:22px;
	font-style:italic;
	margin:0px auto;
}
#text1 {
	font-family:'Publico-Bold';
	font-size:72px;
	text-transform: uppercase;
}
#text2 {
	font-family:'Publico';
	font-size:28px;
	max-width:700px;
	margin:0px auto;
}

.text-row{
	border-top:1px solid #ccc;
/*	border-bottom:1px solid #ccc;*/
	padding:20px 0px 30px 0px;
}

#nav-bar{
	width:100%;
	background-color:#000;
	opacity:0.0;
	position:fixed;
	display:none;
	z-index:2000;
}
#mobile-nav-bar{
	width:100%;
	background-color:#000;
	position:fixed;
	display:none;
	z-index:2000;
}
#nav-bar-map{
	top:0;
	width:100%;
	background-color:#000;
	z-index:2000;
	position:fixed;
}
#nav-holder{
	display:none;
	z-index:0;
}

#nav{
	width:100%;
	font-size:14px;
	padding:10px;
	text-transform: uppercase;
	color:#fff;
	font-family:'Boomer-Light','Arial';
}

#nav .social a{
	color:#fff;
	font-size:25px;
	margin:5px;
	cursor:pointer;
	border:none;
}
#nav .social{
	text-align:right;
}

#nav .social a:hover{
	color:#bbb;
	text-decoration:none;
}

#nav img{
	height:40px;
	margin-right:10px;
}
#nav .col-sm-6{
	margin-top:10px;
	text-align:center;
}
#nav .col-sm-3:first-child{
	text-align:left;
}
#nav .col-sm-3:last-child{
	text-align:right;
}


.row{
/*	margin-top:50px;
	margin-bottom:50px;*/
}

.part-slide{
	color:#fff;
	background-color:#000;
	height:500px;
	padding-top:150px;
}
.part-slide h2{
	padding:20px 0px;
	text-align: center;
	font-size:62px;
	border-top:1px solid #555;
	border-bottom:1px solid #555;
	text-transform: uppercase;
	color:#fff;
}

.quote-box{
	padding:40px 20px;
	max-width:960px;
	background-color:rgba(20,20,20,0.6);
	color:#fff;
	font-family:'Publico-Light';
	letter-spacing:1px;
	font-style: italic;
	font-size:32px;
}
.quote-sign{
	font-size:200px;
	font-family:'Publico-Black';
	text-align:center;
	font-style:italic;
}
.quote-attr{
	font-size:20px;
	font-family:'Boomer-Light','Arial';
	font-style:normal;
	text-transform:uppercase;
	text-align: right;
}

.img-slide-quote {
	background-size:120% auto;
	/*padding:100px;*/
	margin:100px auto;
}


.text-slide{

}
.chapter-id{
	font-size:36px;
	color:#000;
}
.chapter-title{
	font-size:62px;
	color:#000;
}
.chapter-text{
	color:#000;
}
.text-slide p{
	color:#000;
}
.data-slide{
	margin-top:50px;
	margin-bottom:50px;
}
.map-slide{
	margin:0px auto;
	color:#fff;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.data-title span{
  font-family:'Publico';
  text-align: center;
  font-size:32px;
}
.data-title {
	margin: -10px auto 50px auto;
	height: 1em;
	text-align: center;
	font-size: 1.3em;
	line-height: 1.329em;
	border-bottom: 1px dotted #cccccc;
	width:85%;
	max-width:100%;
	text-transform: uppercase;
}
.data-title span {
  display: inline-block;
  padding: 5px 10px;
  background: #fff;
  letter-spacing: 1.5px;
}

.data-descrip {
	color:#000;
	font-size:16px;
	font-family:'Boomer-Light','Arial';
}

.data-section{
	font-family:'Boomer-Light','Arial';
}
.data-section h5{
	font-family:'Boomer-Light','Arial';
	font-size:18px;
}

#population-1860 .container{
	padding-top:0px;
	padding-bottom:20px;
}
#population-list{
	height:550px;
	margin:20px 0px;
	overflow:auto;
}
#population-list ul li{
	font-family:'Boomer-Light','Arial';
	font-size:16px;
	line-height:1.8em;
	list-style-type:none;
	cursor:pointer;
	padding:0px 5px;
}
#population-list ul li:hover{
	background-color:#aaa;
}
#population-list ul{
	padding-left:0px;
	margin-left:0px;
}
#population-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
#population-list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
#population-viz{
}
#population-viz #states path{
	fill:#888;
	stroke:#ccc;
	z-index:0;
}
#population-map circle{
	z-index:1000;
	fill-opacity:0.5;
	cursor:pointer;
}
#population-map circle:hover{
	fill-opacity:0.8;
}
#toggle-population{
	text-align:left; 
	float:left;
	font-family:'Boomer-Light','Arial';
	font-size:30px;
}
	
.pointer{
	font-size:25px;
	display:inline;
}
.pointer i{
	margin-top:5px;
	line-height:1.3em;
}
#tooltip {
	font-family:'Boomer-Light','Arial';
    position: absolute;
    padding: 5px;
    background-color: white;
	border:1px solid #aaa;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index:10000;
    display:none;
    max-width:400px;
}

.side-data{
	background-color:#ddd;
	padding:20px;
}
.side-data p{
	text-transform:uppercase;
	font-family:'Boomer-Light','Arial';
	margin-bottom:5px;
	margin-top:5px;
	border-bottom:1px solid #eee;
	font-size:14px;
}
#census1860 .side-data p:first-child,
#evacuation .side-data p:first-child{
	font-family:'Boomer','Arial';
	color:#b40411;
	font-size:19px;
}
.side-data p:last-child{
	border:none;
}

hr{
	border-color:#ddd;
}

.side-content img {
	margin-top:120px;
}
#side-content .video-div{
	margin-top:30px;
	color:#fff;
	text-align:center;
}

/*weird ie video width issue*/
.video-div span{
	width:100%;
}

.video{
	color:#fff;
	/*padding-top:20px;*/
	background-color:#000;
}

.image-slide .container{
	max-width:900px;
}
.image-slide img{
	width:100%;
}
.caption{
	font-family:'Publico-Light';
	font-style:italic;
	font-size:16px;
	margin-top:10px;
	padding:0px 0px 0px 10px;
	border-left:1px solid #ccc;
	margin-left:10%;
}

.right{
	text-align:right;
	float:right;
}

#nav-buttons{
	margin-top:8px;
}

#nav-buttons a{
	color:#fff;
	text-decoration: none;
	border-right:1px solid #fff;
	padding:0px 10px;
}
#nav a:last-child{
	border:none;
}

#nav .active{
	text-decoration: underline;

}

#nav a:hover{
	text-decoration: underline;
}


#filter-occupations p select option {
	font-family:'Boomer-Light','Arial';
	color:#000;
}

#filter-results{
	height:250px;
	margin:20px 0px;
	overflow:auto;
}
#filter-results ul li{
	font-family:'Boomer-Light','Arial';
	font-size:14px;
	line-height:1.5em;
	list-style-type:none;
	text-transform:uppercase;
}

#filter-results ul{
	padding-left:0px;
	margin-left:0px;
}
#filter-results::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
#filter-results::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


.side-content .side-data{
	padding:0px;
	background-color:#fff;
	font-size:12px;
	font-family:'Boomer','Arial';
}
tr td, th{
	font-family:'Boomer-Light','Arial';
	text-align:center;
}
tr td:first-child{
	text-align:right;
}
td{
	border:2px solid #fff;
}
.box-title p{
	font-family:'Boomer','Arial';
	font-size:24px;
	color:#333;
	margin:0px;
	
}
.box-title{
	text-align:center;
	border-bottom:none;
	text-transform:uppercase;
	margin-top:20px;
	margin-bottom:30px;
}

p#battle-legend{
	font-family:'Boomer-Light','Arial';
	margin:0px;
	font-size:18px;	
}

.winner{
	background-color:rgba(180, 4, 17, 0.5);
}
.shrunk-text{
	max-width:800px;
	margin:0px auto 50px auto;
}

.side-data.small p:last-child{
	border-bottom:none;
}

.battle-name{
	text-align: right;
}

.battle-row{
	padding-top:10px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}
.atlanta{
	background-color:#ddd;
}
.battle-row:last-child{
	border:none;

}
.battle-row p{
	font-family:'Boomer-Light','Arial';
	font-size:16px;
	margin-bottom:0px;
	text-transform: uppercase;
}
p.small{
	font-family:'Boomer-Light','Arial';
	font-size:12px;
	margin-bottom:10px;
}

.side-data.small p:first-child{
	font-size:14px;
	color:#b40411;
	font-family:'Boomer','Arial';
	font-weight:bold;
}
.gray {
	background-color:#ddd;
}

.caption{
	text-align:left;
}
.image{
	position:relative;
}
.image img{
	width:90%;
	margin-bottom:10px;
}
.side-image{
	margin-top:40px;
}
.side-image img{
	width:100%;
}

section:last-child{
	margin-bottom:0px;
}

.img-slide-quote{
	margin-bottom:0px;
	padding-top:80px;
	padding-bottom:80px;
}
#img-slide-pt3{
	background-position:-50px -100px;
	background-size:120% auto;
}

.title-quote{
	font-size:32px;
	text-align:left;
}
.title-attr{
	text-align:right;
	font-size:24px;
	margin-right:100px;
	letter-spacing: 1px;
	font-family:'Scout-Light','Arial';
	text-transform: uppercase;
}


footer {
	background-color:#000;
	padding:60px 0px;
	width:100%;
}
footer img:first-child{
	margin-right:20px;
	padding-right:20px;
	border-right:1px solid #fff;
}

footer .footer-logo{
	float:left;
	width:100%;
	margin-top:10px;
}

footer a p{
	color:#fff;
	font-size:36px;
	font-family:'Publico';
	text-transform: uppercase;
	text-decoration:none;
	margin-top:10px;
}
footer a:hover, footer a:hover p{
	text-decoration: none;
	color:#bbb;
}

footer .credits{
	float:left;
}

footer p{
	letter-spacing:1px;
}

footer .credits-title{
	color:#ddd;
	font-family:'Boomer','Arial';
	font-size:14px;
	margin-bottom:0px;
	text-transform: uppercase;
}
footer .credit{
	font-family:'Boomer-Light','Arial';
	text-transform:uppercase;
	color:#ddd;
	font-size:10px;
	margin-bottom:0px;
}

footer .next-part{
	float:right;
	text-align:right;
}


.down-arrow{
	width: 0; 
	height: 0; 
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-top: 40px solid #000;
	margin:10px auto 0px auto;
	opacity:0.8;
}

.quote-top-row{
	position:fixed;
	width:100%;
}
.quote-top-row .container{
	position:relative;
}

.fa-question-circle{
	cursor:pointer;
}

.container.aside {
	margin-bottom:50px;
	max-width:800px;
}
.aside:hover{
	background-color:#ddd;
}
.aside .title{
	font-family:'Publico-Bold';

	text-transform:lowercase;
	font-style:italic;
	font-size:30px;
	margin:10px auto;
	float:left;
}
.aside i{
	margin:10px auto;
	float:right;
	font-size:36px;
	color:#000;
	line-height:1.3em;
}
.aside p{
	font-size:20px;
	font-family:'Publico-Light';
	text-align:left;
	font-style:none;
}
.main{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding-top:20px;
	padding-bottom:20px;
	cursor:pointer;
}

.quote-top-row{
	opacity:0.0;
}

.aside-detail{
	display:none;
}

.aside .image img{
	width:100%;
}

g#battles path{
	display:none;
}
g#battles path#battle1{
	display:block;
}
#nav-battles{
	padding-top:10px;
	padding:10px 20px;
}
#nav-battles #back{
	float:left;
	display:none;
}

#nav-battles .pointer{
	float:right;
	margin-right:10px;
}
#compare-battles .pointer{
	float:right;
	margin-left:10px;
}

#nav-battles #next{
	float:right;
}
#death,#acres{
	float:right;
	margin-left:10px;
}

.btn {
	font-size:17px;
	font-family:'Boomer-Light','Arial';
	text-transform:uppercase;
}
#sherman-advance{
	margin-top:100px;
	margin-bottom:100px;
}
#sherman-advance svg{
	width:100%;
}
#sherman-advance path{
	stroke:#ccc;
}
.color-legend1,.color-legend2,.color-legend3{
	display:inline;
	font-family:'Boomer-Light','Arial';
	text-transform:uppercase;
	font-size:14px;
	float:left;
	margin-right:20px;
}
.color-legend1 i, .color-legend2 i, ..color-legend3 i{
	margin-top:0px;
}
.absolute{
	position:absolute;
	left:0;
	top:120px;
	left:0;
	width:100%;
	height:80%;
	z-index:1000;
}
#nav-progress{
	position:relative;
	margin-bottom:-5px;
}
#progress {
	height:5px;
	background:#b40411;
	/*top:60px;*/
	z-index:2000;
	opacity:0.9;
	/*position:fixed;*/
}

#march-details{
	border:1px solid #ccc;
	background-color:#eee;
	width:100%;
	margin:40px auto 0px auto;
	padding:20px;

}
#march-details p{
	margin-bottom:0px;
	font-size:16px;
	font-family:'Boomer-Light','Arial';
}
p#battle-descrip{
	font-size:24px;
	font-family:'Scout-Bold','Arial';
	text-transform: uppercase;
}

#sherman-image-atl{
	background-image:url('/images/sherman1.jpg');
	background-size:100% auto;
	background-position:0px -100px;
	width:100%;
	height:500px;
	position:relative;
	background-repeat:no-repeat;
}

.img-caption-click i{
	color:#fff;
	font-size:30px;
	position:absolute;
	bottom:170px;
	right:70px;
	opacity:1.0;
	cursor:pointer;
}

.mobile-total-shells p{
		font-size:18px;
		font-family:'Publico';
		text-align:center;
	}
	.mobile-total-shells p:first-child{
		font-size:24px;
		text-transform:uppercase;
	}


.img-slide-caption{
	display:none;
	position:absolute;
	bottom:200px;
	right:100px;
	background-color:rgba(250,250,250,0.8);
	width:300px;
	font-size:16px;
	font-family:'Publico';
	font-style:italic;
	padding:10px;
}

.img-caption-click-last i{
	color:#fff;
	font-size:30px;
	position:absolute;
	bottom:40px;
	right:30px;
	opacity:1.0;
	cursor:pointer;
}


.img-slide-caption-last {
	display:none;
	position:absolute;
	bottom:70px;
	right:55px;
	background-color:rgba(250,250,250,0.6);
	width:300px;
	font-size:16px;
	font-family:'Publico';
	font-style:italic;
	padding:10px;
}

.down{
	margin-top:70px;
}

.img-left img{
	width:49%;
	float:left;
	margin-bottom:10px;
}
.img-right img{
	width:49%;
	float:right;
	margin-right:0px;
}
.img-full img{
	width:100%;
}
section.img-slide{
	position:relative;
}
#title-img-5.img-slide {
	padding-top:0px;
	padding-bottom:0px;
}

#img-slide-pt2ch3{
	background-size:100% auto;
}

.quote-sign{
	line-height:0.7em;
	margin-top:50px;
}
.quote-text{
	font-size:36px;
	margin-top:50px;
	margin-bottom:20px;
}

.pie{
	padding:0px 20px;
}
#side-pies p{
	text-align:center;
}
.zoom, .zoomImg{
	cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
}

.nozoom{
	cursor:normal;
}

.data-row{
	margin-top:50px;
}


#slave-data{
	margin-top:100px;
	margin-bottom:100px;
}
#slave-data .pointer{
	text-align:left;
	font-size:30px;
}
#slave-data .pointer i{

	font-size:30px;
}

#slave-legend, #growth-legend{
	font-family:'Boomer-Light','Arial';
	border:1px solid #ccc;
	padding:10px;
	text-transform: uppercase;
	font-size:12px;
}

#slave-change, #growth-change{
	border-bottom:1px solid #ccc;
	padding-bottom:10px;
	margin-bottom:10px;
}


.pie-title-big{
	font-family:'Boomer','Arial';
	text-transform: uppercase;
	font-size:16px;
	text-align:center;
}
.pie-title, .label{
	font-family:'Boomer-Light','Arial';
	text-transform: uppercase;
	font-size:12px;
	text-align:center;
}
.pie-title{
	min-height:36px;
}
.label{
	font-family:'Boomer-Light','Arial';
	text-transform: uppercase;
	font-size:16px;
}
.legend-obj{
	display:block;
}
.legend-obj #dark-gray{
	color:#666;
	font-size:16px;
}
.legend-obj #light-gray{
	color:#bbb;
	font-size:16px;
}
.legend-obj .fa{
	font-size:16px;
}

.side-note{
	border:2px solid #ccc;
	padding:20px;
	margin-top:50px;
	font-size:18px;
	line-height: 1.5em;
	font-family:'Boomer-Light','Arial';
}
.side-note strong{
	font-family:'Boomer-Bold','Arial';
	font-weight:bold;
}

.slice{
	cursor:pointer;
	opacity:0.9;
}
.slice:hover{
	opacity:1.0;
}

.med-width{
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

.side-note p{
	font-family:'Publico-Light';
	font-size:18px;
}
.side-note p:first-child{
	font-family:'Publico';
	font-size:26px;
	text-transform: uppercase;
	margin-bottom:5px;
	text-align:center;
}

#shell-count{
	text-align:center;
	box-shadow: inset 0 -240px 400px -40px rgba(255,255,255,1.0);
	font-family:'Boomer','Arial';
	font-size:42px;
	text-transform:uppercase;
}
#shell-planes{
	text-align:center;
	font-family:'Boomer','Arial';
	font-size:28px;
	display:none;
}
#shell-radius{
	text-align:center;
	font-family:'Boomer','Arial';
	font-size:28px;
	display:none;
}

#shelling-viz{
	width:100%;
	padding-top:50px;
	padding-bottom:50px;
	position:relative;
}

#planes{
	max-width:900px;
	margin:10px auto;
}
.fa-plane{
	margin:5px 0px;
}

/* temp */
.map{
	background-color:#000;
	padding-top:100px;
	padding-bottom:100px;
	height:400px;
	font-family:'Boomer-Light','Arial';
	font-size:48px;
	color:#fff;
	text-align:center;
}

#burn-map{
	width:100%;
	height:500px;
}
#today-map{
	width:100%;
	height:600px;
	border:1px solid #ccc;
	z-index:990;
	position:relative;
}
#today-legend, .battle-map-legend{
	z-index:1000;
	background-color:#fff;
	padding:10px;
	position:absolute;
	top:10px;
	right:10px;
	border:1px solid #ccc;
}
#today-legend p{
	font-family:'Boomer-Light';
	font-size:12px;
	margin-bottom:0px;
}
#train-map{
	width:100%;
	height:400px;
	margin-bottom:20px;
}

#filters {
	font-size: 12px;
	padding-left: 10px;
	
}

.leaflet-control, .leaflet-top{
	z-index:10;
}
label{
	font-family:"Arial";
	font-weight:200;
	text-transform:uppercase;
	font-size:9px;
	color:#000;
	margin-bottom:0px;
}
#slave-change label{
	text-transform:uppercase;
	font-size:12px;
	color:#000;
	margin-bottom:0px;
	font-family:'Boomer-Light';
}
.filter-ui {
	background: #fff;
	position: absolute;
	bottom: 65px;
	right: 10px;
	z-index: 100;
	padding: 10px;
	border-radius: 3px;
	border:1px solid #999;
	display:none;
}

.legend-icon {
	margin-bottom: -30px;
	padding: 0 5px;
}

.today-popup-img img{
	max-width:200px;
}
.today-popup-img{
	text-align:center;
}
p.popup-title{
	font-family:'Boomer','Arial';
	text-transform:uppercase;
	font-size:14px;
	margin-bottom:0px;
}
p.popup-address{
	font-family:'Boomer-Light','Arial';
	text-transform:uppercase;
	font-size:11px;
	margin-bottom:5px;
}

p.popup-descrip{
	font-family:'Boomer-Light','Arial';
	font-size:12px;
}

p.casualties-descrip{
	font-family:'Boomer-Light','Arial';
	font-size:18px;
	text-transform:uppercase;
	text-align:left;
}

p.casualties-descrip .fa-male{
	padding:0px 11px;
}

p.casualties-descrip-bottom{
	font-family:'Boomer','Arial';
	font-size:22px;
	margin-top:10px;
	margin-bottom:0px;
	text-transform:uppercase;
	text-align:center;
}
.union{
	fill:#003894;
	color:#003894;
}
.confederate{
	fill:#b40411;
	color:#b40411;
}
.union .fa-male{
	color:#003894;
	font-size:22px;
}
.confederate .fa-male{
	color:#b40411;
	font-size:22px;
}
g.battle-icon path{
	display:none;
}

.battle-legend .fa-male, #battle-compare-row .fa-male{
	color:#333;
	font-size:18px;
	margin:0px 2px;
}
.confed{
	color:#b40411;
}
.fa-times{
	font-size:26px;
	color:#000;
}

.casualties-descrip .fa-times{
	margin-top:5px;
}

#p5ch3 .med-width{
	margin-top:50px;
	margin-bottom:50px;
}

#growth-chart text{
	font-family:'Boomer-Light','Arial';
	font-size:12px;
	fill:#000;
	stroke:none;
}

#growth-chart .line-label{
	display:none;
}

#growth-chart .line-label{
	display:none;
}
#growth-chart path{
	fill:none;
	stroke:#aaa;
	stroke-width:2pt;
	cursor:pointer;
	opacity:0.7;
}
#growth-chart path:hover{
	opacity:1.0;
}
#growth-chart .domain{
	stroke:#ccc;
	stroke-width:1px;
	fill:none;
}

.before-after{
	display:none;
	margin-top:50px;
	margin-bottom:50px;
}
.before-after.img-slide{
	margin-top:0px;
	margin-bottom:0px;
}
.twentytwenty-before-label, .twentytwenty-after-label{
	display:none;
}

#battle-table{
	border:1px solid #ccc;
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

#train-explosion{
	position:relative;
	width:100%;
	height:350px;
}
#train-icon{
	top:100px;
	left:-300px;
	position:absolute;
	z-index:0;
}
#blast-total{
	display:none;
}

#train-fall{
	position:absolute;
	width:100%;
}

#blast-total{
	position:absolute;
	bottom:0px;
	width:100%;
	text-align:center;
}

#train-text, #train-text-absolute{
	font-family:'Publico-Light';
	font-size:26px;
}
#buttondiv{
	text-align:center;
}

.image-zoom-overlay{
	position:absolute;
	top:10px;
	right:10px;
}

#train-calc{
	margin-bottom:50px;
	font-size:16px;
	text-align:center;
	font-family:'Boomer-Light','Arial';
	text-transform:uppercase;
}
#train-calc i{
	font-size:20px;
	margin-top:20px;
}
#train-calc #last{
	font-size:20px;
	margin-top:5px;
}
#center-button{
	text-align:center;
}
#train2-hide{
	/*display:none;*/
}
#blast{
	margin-top:20px;
	display:none;
	font-family:'Boomer-Bold','Arial';
	font-weight:bold;
}

circle.explosion{
	fill:none;
	stroke:#888;
	stroke-width:5px;
	z-index:1000;
}

.caption img{
	width:20px;
	height:20px;
}



#mobile-dropdown{
	float:right;
	display:inline;
}
.mobile-logos{
	display:inline;
}

#mobile-menu{
	background:none;
	background-color:#000;
	border:none;
}
#mobile-menu i{
	color:#fff;
	font-size:26px;
}

.dropdown-menu:after {
    left: auto;
    right: 13px;
}
.dropdown-menu {
    left: auto;
    right: 0;
}
#nav .dropdown-menu .social{
	text-align:center;
}
.dropdown-menu .social i{
	color:#000;
}
#nav-buttons a.past{
	color:#aaa;
	font-family:'Boomer-Light','Arial';
}
#nav-buttons a.current{
	color:#b40411;
	font-family:'Boomer','Arial';
}
.battle-map{
	height:500px;
}
.legend-icon {
	margin-bottom: -30px;
	padding: 0 5px;
}
.legend-icon.forts {
	margin: 0 -5px -30px -5px;
}
.red {
	background-color: #B40411;
}
.blue {
	background-color: #003894;
}
.trench {
	display: inline-block;
	width: 15px;
	height: 5px;
}
.rr {
	display: inline-block;
	width: 8px;
	height: 5px;
	margin-right: 4px;
	background-color: #555555;
}
.streets {
	display: inline-block;
	width: 33px;
	height: 2px;
	background-color: #555555;
}
.destroyed {
	display: inline-block;
	width: 33px;
	height: 10px;
	margin-right: 3px;
	border-radius: 5px;
}
.destroyed.red {
	background-color: #CE6B75;
}
.destroyed.blue {
	background-color: #6C87BD;
}
.battles {
	background-color: #ddd;
}
.troops {
	display: inline-block;
	width: 6px;
	height: 2px;
	border-radius: 5px;
	padding: 2px;
}
.attacks.red {
	color: #B40411;
}
.attacks.blue {
	color: #003894;
}
.attacks {
	background-color: #FFFFFF;
	font-size: 9px;
}

#map-title{
	font-family:'Publico';
	color:#fff;
	position:absolute;
	z-index:100;
	top:0;
	left:0;
	background-color:#000;
	width:100%;
	height:60px;
	font-size:32px;
}

#map {
/*	height: 700px;
	max-width: 960px;*/
	width: 100%;
	position:fixed;
	left:0;
	top:60px;
	height:100%;
	z-index:0;
}
body { 
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.leaflet-clickable {
	cursor: pointer;
}

#filters {
	font-size: 12px;
	display: none;
	border: 1px solid rgba(0, 0, 0, 0.4);
}

.legend-icon {
	margin-bottom: -30px;
	padding: 0 5px;
}
.legend-icon.forts {
	margin: 0 -5px -30px -5px;
}
.red {
	background-color: #B40411;
}
.blue {
	background-color: #003894;
}
.trench {
	display: inline-block;
	width: 15px;
	height: 5px;
}
.rr {
	display: inline-block;
	width: 8px;
	height: 5px;
	margin-right: 4px;
	background-color: #555555;
}
.streets {
	display: inline-block;
	width: 33px;
	height: 2px;
	background-color: #555555;
}
.destroyed {
	display: inline-block;
	width: 33px;
	height: 10px;
	margin-right: 3px;
	border-radius: 5px;
}
.destroyed.red {
	background-color: #CE6B75;
}
.destroyed.blue {
	background-color: #6C87BD;
}
.battles {
	background-color: #9A9A9A;
}
.troops {
	display: inline-block;
	width: 6px;
	height: 2px;
	border-radius: 5px;
	padding: 2px;
}
.attacks.red {
	color: #B40411;
}
.attacks.blue {
	color: #003894;
}
.attacks {
	background-color: #FFFFFF;
	font-size: 9px;
}
#info-box {
	display: none;
	position:relative;
	border: 1px solid #555555;
	max-width: 50%;
	margin: 20px auto;
	padding:10px;
	border-radius:3px;
	background:#fff;
	z-index:2000;
}

table {
	margin-bottom: 20px;
	max-width: 100%;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: transparent;
	margin-top: 5px;
}

table > thead > tr > th {
	border-bottom: 2px solid #ddd;
	vertical-align: bottom;
}
table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td {
    border-top: 1px solid #ddd;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}
table > caption + thead > tr:first-child > th, table > colgroup + thead > tr:first-child > th, table > thead:first-child > tr:first-child > th, table > caption + thead > tr:first-child > td, table > colgroup + thead > tr:first-child > td, table > thead:first-child > tr:first-child > td {
    border-top: 0 none;
}
th {
    text-align: left;
}

button {
	overflow: visible;
}
button.close {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 0 none;
	cursor: pointer;
	padding: 0;
}
.close {
	color: #000;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.2;
	text-shadow: 0 1px 0 #fff;
}
.sr-only {
	border: 0 none;
	clip: rect(0px, 0px, 0px, 0px);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.leaflet-control-layers-group{
}
.leaflet-control-layers-group-name{
	font-family:'Arial';
	text-transform:uppercase;
	font-size:11px;
}

.info p{
	font-size:14px;
}

#map-header{
	max-width:800px;
	margin:20px auto;
}
#map-header p{
	color:#fff;
	font-family:'Publico';
	font-size:20px;
	text-align:left;
	text-transform:none;
}
#scroll-prompt .down-arrow{
	width: 0; 
	height: 0; 
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-top: 40px solid #fff;
	margin:10px auto 20px auto;
	opacity:1.0;
}

#scroll-prompt{
	width:100%;
	position:absolute;
	top:0px;
	left:0;
	padding-top:100px;
	background-color:#000;
	z-index:500;
}

#overlay{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.7);
	position:fixed;
	top:0;
	left:0;
	z-index:100;
}

#howto{
	background-color:#fff;
	position:relative;
	margin:200px auto;
	max-width:500px;
	padding:10px;
	border-radius:5px;
	border:1px solid #bbb;
	text-align:center;
}
#howto p{
	text-align:left;
	font-size:18px;
}
#howto button{
	margin:10px auto;
}

#map-header p.map-title{
	text-align:left;
	font-size:32px;
	color:#fff;
	font-family:'Publico';
	letter-spacing:1px;
	text-transform:uppercase;
}

#ie-overlay{
	width:100%;
	height:100%;
	background-image:url('/images/ie_bg.png');
	background-repeat:repeat;
	position:fixed;
	top:0;
	left:0;
	z-index:3000;
}
#ie-overlay p{
	background-color:#fff;
	position:relative;
	margin:200px auto;
	max-width:500px;
	padding:10px;
	border-radius:5px;
	border:1px solid #bbb;
	text-align:center;
}

p#battle-prompt{
	display:inline;
	color:#fff;
	font-family:'Boomer-Light','Arial';
	text-transform: uppercase;
	font-size:16px;
}
#battle-nav{
	padding-top:10px;
	padding-bottom:10px;
	display:none;
	position:fixed;
	width:100%;
	bottom:0;
	left:0;
	background-color:#000;
}
#battle-nav button{
	margin-left:10px;
}
#battle-nav .btn{
	font-size:14px;
}
#bottom-button-group{
	margin:auto;
	text-align:center;
}
#pan-select{
	display:none;
}

#pan-select select option{
	font-family:'Boomer-Light';
	font-size:14px;
}
#pan-select select{
	width:100%;
}

#info table tr td{
	text-align:left;
}
