/* iPad STYLES */
@media screen and (min-width: 600px) and (max-width: 992px) {
	#title-img{
		height:500px;
		background-size:150% auto;
		box-shadow: inset 0 -120px 200px -20px rgba(0,0,0,1.0);
		position:relative;
	}
	#title-img-2{
		background-color:#000;
		background-size:auto 130%;
		height:500px;
		box-shadow: inset 0 -120px 200px -20px rgba(0,0,0,1.0);
	}
	#title-img-3{
		background-color:#000;
		background-size:auto 120%;
		background-position:0px 0px;
		height:500px;
		box-shadow: inset 0 -120px 200px -20px rgba(0,0,0,1.0);
	}
	#title-img-4{
		background-color:#000;
		background-size:120% auto;
		background-position:0px 0px;
		height:500px;
		box-shadow: inset 0 -120px 200px -20px rgba(0,0,0,1.0);
		text-align:center;
	}
	.quote-sign{
		font-size:50px;
		margin-top:20px;
	}
	.title-quote{
		font-size:20px;
	}
	#title-img-4 .title-quote{
		font-size:36px;
	}
	.chapter-title{
		font-size:48px;
	}
	.chapter-id{
		font-size:32px;
	}
	.title-attr{
		font-size:13px;
		margin-right:0px;
	}

	#project-attr{
		font-size:18px;
		margin-bottom:0px;
	}
    #text1 {
		font-size:42px;
	}
	#text2{
		font-size:22px;
	}

	#population-list{
		height:300px;
	}
	.pointer{
		display:none;
	}
	#img-slide-pt1ch2{
		background-size:120% 120%;
		background-image:url('/images/pt1quote.jpg');
	}
	p{
		font-size:18px;
	}
	.aside:hover{
		background-color:#fff;
	}
	#sherman-image-atl{
		margin-bottom:0px;
		height:400px;
	}

	.mobile-total-shells p{
		text-align:center;
	}
	.mobile-total-shells{
		text-align:center;
	}
	.mobile-total-shells img{
		width:300px;
	}

	#img-slide-pt2ch3{
		background-size:100% 100%;
	}
	.quote-text{
		font-size:20px;
		margin-top:0px;
	}
	.quote-top-row{
		position:relative;
	}
	.quote-attr{
		font-size:14px;
	}
	p.casualties-descrip{
		font-size:14px;
	}

	p.casualties-descrip-bottom{
		font-family:'Boomer','Arial';
		font-size:14px;
		margin-top:10px;
		margin-bottom:-10px;
		text-transform:uppercase;
		text-align:center;
	}
	.casualties-descrip .fa-times{
		margin:0px 0px 0px 3px;
	}
	.col-md-6.confed{
		margin-top:50px;
	}

	#map{
		top:75px;
	}
}


/* MOBILE STYLES */
@media screen and (max-width: 600px) {
	.leaflet-control-layers-group-name{
		display:none;
	}
	#map{
		top:75px;
	}
	.aside:hover{
		background-color:#fff;;
	}
	section{
		padding-top:10px;
		padding-bottom:10px;
	}
	.img-caption-click, .img-caption-click-last{
		display:none;
	}
	#population-list ul li:hover{
		background:none;
		cursor:auto;
	}
	#title-img{
		height:300px;
		background-size:150% auto;
		background-image:url('/images/phone/title1.jpg');
		box-shadow: inset 0 -80px 80px -20px rgba(0,0,0,1.0);
		position:relative;
	}
	#title-img-2{
		background-image:url("/images/phone/title2.jpg");
		background-color:#000;
		background-size:auto 130%;
		height:370px;
		box-shadow: inset 0 -80px 80px -20px rgba(0,0,0,1.0);
	}
	#title-img-3{
		background-image:url("/images/phone/title3.jpg");
		background-color:#000;
		background-size:auto 140%;
		background-position:-100px 0px;
		height:320px;
		box-shadow: inset 0 -80px 80px -40px rgba(0,0,0,1.0);
	}
	#title-img-4{
		background-image:url("/images/phone/title4.jpg");
		background-color:#000;
		background-size:auto 100%;
		background-position:0px 0px;
		height:300px;
		box-shadow: inset 0 -80px 80px -40px rgba(0,0,0,1.0);
		text-align:center;
	}

	.quote-top-row{
		position:relative;
	}
	#title-4-row{
		margin-top:30px;
	}
	.down-arrow{
		display:none;
	}

	.quote-sign{
		font-size:50px;
		margin-top:20px;
	}
	.title-quote{
		font-size:14px;
	}
	.title-attr{
		font-size:13px;
		margin-right:0px;
	}

	#project-attr{
		font-size:14px;
		margin-bottom:0px;
	}
    #text1 {
		font-size:24px;
	}
	#text2{
		display:none;
	}
	.btn{
		font-size:14px;
	}
	.pointer{
		display:none;
	}

	.part-slide{
		height:auto;
		padding-top:30px;
		padding-bottom:30px;
	}
	.part-slide h2{
		font-size:24px;
	}

	.data-title{
		margin:5px auto;
		height:auto;
		width:100%;
		border-bottom:none;
		line-height:26px;
		font-size:20px;
	}
	.data-title span{
		font-size:20px;
	}

	p{
		font-size:16px;
	}

	#img-slide-pt1ch2{
		background-size:170% auto;
		background-image:url('/images/pt1quote.jpg');
	}
	.chapter-id{
		font-size:20px;
	}
	.chapter-title{
		font-size:26px;
	}
	.quote-text{
		font-size:16px;
		margin-top:0px;
	}
	.img-slide{
		box-shadow:0px;
		position:relative;
	}

	.img-slide-quote{
		padding-top:0px;
		padding-bottom:0px;
	}
	.quote-attr{
		font-size:10px;
	}
	#census1860 .side-data p,#evacuation .side-data p{
		font-size:11px;
	}
	#census1860 .side-data p:first-child, #evacuation .side-data p:first-child{
		font-size:16px;
	}
	#population-list{
		height:auto;
		overflow:auto;
	}
	.aside .title{
		font-size:20px;
	}
	.aside i{
		margin:0px auto;
	}
	#slave-data{
		margin-top:0px;
		margin-bottom:0px;
	}
	#slave-legend{
		margin-bottom:20px;
	}
	#pres-table{
		width:90%;
	}

	#sherman-route{
		margin-top:-80px;
		height:430px;
		overflow:hidden;
	}
	#march-details{
		z-index:1000;
		margin-top:10px;
	}

	#shelling-viz{
		height:auto;
		padding-bottom:0px;
	}

	#sherman-image-atl{
		background-position:0px 0px;
		height:200px;
		background-repeat:no-repeat;
		margin-bottom:0px;
	}

	#img-slide-pt2ch3{
		background-size:auto 100%;
	}
	#img-slide-pt3{
		background-position:-20px 0px;
		background-size:auto 140%;
	}

	.union .fa-male{
		color:#003894;
		font-size:14px;
	}
	.confed .fa-male{
		color:#b40411;
		font-size:14px;
	}
	.fa-times{
		font-size:16px;
		color:#000;
		margin-top:5px;
	}
	.union .fa-stack, .confed .fa-stack{
		width:1em;
	}
	.casualties-descrip .fa-times{
	}
	.confed{
		margin-top:50px;
	}
	p.casualties-descrip{
		font-family:'Boomer-Light';
		font-size:12px;
		text-transform:uppercase;
		text-align:left;
		margin-top:25px;
		margin-bottom:0px;
	}
	p.casualties-descrip-bottom{
		font-family:'Boomer';
		font-size:14px;
		margin-top:10px;
		margin-bottom:-10px;
		text-transform:uppercase;
		text-align:center;
	}
	p.casualties-descrip .fa-male{
		padding:0px;
	}

	#title-img-4 .title-quote{
		font-size:16px;
	}
	#title-img-4 .title-attr{
		font-size:14px;
		margin-right:0px;
	}

	.img-zoom{
		text-align:center;
		width:85%;
		margin-left:auto;
		margin-right:auto;
	}
	#train-map, #burn-map, #today-map, .zoom{
		width:90%;
		border:1px solid #ccc;
		margin-left:auto;
		margin-right:auto;
	}
	#train-map{
		height:400px;
	}
	#burn-map{
		height:400px;
	}
	#today-map{
		height:400px;
	}

	.battle-map{
		width:85%;
		margin:auto;
		border:1px solid #bbb;
	}
	.battle-name{
		text-align:left;
	}
	#acres{
		float:right;
	}
	#death{
		float:left;
	}
	.legend-obj .confed{
		margin-top:0px;
	}
	#growth-chart .line-label{
		fill:#fff;
	}
	#compare-battles .btn{
		font-size:12px;
	}
	#map-header{
		max-width:800px;
		margin:20px auto;
	}
	#map-header p{
		color:#fff;
		font-family:'Publico';
		font-size:14px;
		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:50px;
		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:100px auto;
		max-width:90%;
		padding:5px;
		border-radius:5px;
		border:1px solid #bbb;
		text-align:center;
	}
	#howto p{
		text-align:left;
		font-size:14px;
	}
	#howto button{
		margin:10px auto;
	}


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


}

@media only screen and (min-width: 780px) {
	#info-box {
		max-width: 50%;
		margin-top: 75px;
	}
}
@media only screen and (max-width: 768px){
	#info-box {
		margin: 10%;
		max-width: 100%;
		font-size: 1.2em;
	}
	.color-legend1,.color-legend2, .color-legend3{
		display:block;
		width:100%;
	}
	.color-legend1{
		margin-top:20px;
	}
	#sherman-advance svg{
		margin-top:-120px;
	}
}
@media only screen and (max-width: 400px){
	.close {
		font-size: 20px;
		opacity: 1;
	}
	#info-box {
		max-width: 100%;
		margin: 0;
	}
}