/********************** DEFAULT STYLES **********************/

* { margin:0; padding:0; }

.carousel-control-prev-icon {
	background-image: url('../images/arrowLeft.svg') !important;
}

.carousel-control-next-icon {
	background-image: url('../images/arrowRight.svg') !important;
}

.historyBox .closed {
    background-color: #999999 !important;
    border: 0px !important;
    background-image: url('../images/icon_plus.svg') !important;
    background-repeat: no-repeat;
}

.historyBox .closedBlack {
    background-color: #000 !important;
    border: 0px !important;
    background-image: url('../images/icon_plus.svg') !important;
    background-repeat: no-repeat;
}

.historyBox .open {
    background-color: #0468B0 !important;
    border: 0px !important;
    background-image: url('../images/icon_minus.svg') !important;
    background-repeat: no-repeat;
}

.open02 {
    background-color: #0468B0 !important;
    border: 0px !important;
    background-image: url('../images/icon_minus.svg') !important;
    background-repeat: no-repeat;
}

.shadeBox a {
	color: #0468B0;
}

/************************************************************/

@media screen and (min-width: 320px)  {


			.contentSection h2 {
				font-size: 0.94em;
				font-family: 'Poppins', sans-serif;
				font-weight: 900;
				margin: 10px auto 20px auto;
			}

			.shadeBox {
				width: 100%;
				height: auto;
			}

				.shadeBox button {
					width: 100%;
					height: auto;
					padding: 10px 5px 10px 30px;
					border-radius: 0 !important;
					background-size: auto 55%;
					background-position: 2% 50%;
					margin-bottom: 10px;
				}

					.shadeBox button h3 {
						font-size: 0.65em;
						margin: 0 !important;
						text-align: left !important;
					}

				.shadeBox h1 {
					display: inline-block;
					font-family: 'Poppins', sans-serif;
					font-weight: 900;
					font-size: 2em;
					text-transform: uppercase;
					letter-spacing: 1px;
					padding: 1px 0 1px 20px;
					margin: 10px 0 30px 0px;
					border-left: 10px solid #0468B0;
					width: 100%;
				}

				.shadeImage {
					width: 100%;
					height: auto;
				}

				.imageCaption {
					font-size: 0.65em;
					font-family: 'Lato', sans-serif;
					font-weight: 700;
					margin: 5px auto 15px auto;
				}

				.shadeText {
					font-size: 0.85em;
					font-family: 'Lato', sans-serif;
					font-weight: 400;
					width: auto;
				}

					.shadeBox .shadeText {
						width: auto;
						float: none;
					}

					.shadeBox div h2 {
						display: inline-block;
					font-family: 'Poppins', sans-serif;
					font-weight: 900;
					
						width: auto;
						float: none;
					}

					.shadeBox .imageFloat {
						width: 100%;
						float: none;
						margin-bottom: 10px;
					}

}

/************************************************************/

@media screen and (min-width: 375px)  {

	

	.contentSection h2 {
		font-size: 1.08em;
		margin: 10px auto 20px auto;
	}

	.shadeBox h1 {
		font-size: 2em;
		margin: 20px 0 30px 0px;
		border-left: 10px solid #0468B0;
		width: 100%;
	}

	.shadeBox button {
		padding: 12px 5px 12px 40px;
		background-size: auto 55%;
		background-position: 3% 50%;
	}

		.shadeBox button h3 {
			font-size: 0.78em;
		}



}

/************************************************************/

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

    
   
	.contentSection h2 {
		font-size: 1.08em;
		margin: 10px auto 20px auto;
	}

	.shadeBox h1 {
		font-size: 2em;
		margin: 20px 0 30px 0px;
		border-left: 10px solid #0468B0;
		width: 100%;
	}

	.shadeBox button {
		padding: 12px 5px 12px 40px;
		background-size: auto 55%;
		background-position: 3% 50%;
	}

		.shadeBox button h3 {
			font-size: 0.78em;
		}		

}

/************************************************************/

@media screen and (min-width: 414px)  {



	.contentSection h2 {
		font-size: 1.08em;
		margin: 10px auto 20px auto;
	}

	.shadeBox h1 {
		font-size: 2em;
		margin: 20px 0 30px 0px;
		border-left: 10px solid #0468B0;
		width: 100%;
	}

	.shadeBox button {
		padding: 12px 5px 12px 40px;
		background-size: auto 55%;
		background-position: 3% 50%;
	}

		.shadeBox button h3 {
			font-size: 0.9em;
		}

		.imageCaption {
			font-size: 0.75em;
			margin: 5px auto 15px auto;
		}

		.shadeText {
			font-size: 1em;
		}



}

/************************************************************/

@media screen and (min-width: 480px)  {

	

}

/************************************************************/

@media screen and (min-width: 568px) {


	.contentSection h2 {
		font-size: 1.25em;
		margin: 10px auto 20px auto;
	}

	.shadeBox button {
		padding: 12px 5px 12px 45px;
		background-size: auto 55%;
		background-position: 2% 50%;
	}

		.shadeBox button h3 {
			font-size: 1em;
		}

		.imageCaption {
			font-size: 0.75em;
			margin: 5px auto 15px auto;
		}

		.shadeText {
			font-size: 1em;
		}

			/*.shadeBox .shadeText {
					width: 66%;
					float: right;
					padding-left: 20px;
					padding-right: 10px;
				}

			.shadeBox .imageFloat {
					width: 33%;
					float: left;
				}*/

			.shadeBox div h2 {
				font-size: 1.25em;
				width: 51%;
				float: right;
				padding-left: 20px;
				padding-right: 10px;
			}

			.shadeBox .shadeText {
					width: 51%;
					float: right;
					padding-left: 20px;
					padding-right: 10px;
				}

			.shadeBox .imageFloat {
					width: 49%;
					float: left;
				}

	

}

/************************************************************/

@media screen and (min-width: 667px) {

	

}

/************************************************************/

@media screen and (min-width: 736px)  {

}

/************************************************************/

@media screen and (min-width: 768px)  {




	.contentSection h2 {
		font-size: 1.5em;
		margin: 10px auto 20px auto;
	}

	.shadeBox button {
		padding: 12px 5px 12px 45px;
		background-size: auto 45%;
		background-position: 1.75% 50%;
	}

		.shadeBox button h3 {
			font-size: 1em;
		}

		.imageCaption {
			font-size: 0.75em;
			margin: 5px auto 15px auto;
		}

		.shadeText {
			font-size: 1em;
		}


}

/************************************************************/

@media only screen 
    and (device-width : 812px) 
    and (device-height : 375px) 
    and (-webkit-device-pixel-ratio : 3) {



}

/************************************************************/

@media screen and (min-width: 992px)  {


		.contentSection h2 {
			font-size: 1.75em;
			margin: 30px auto 30px auto;
		}

			.shadeBox .shadeText {
					width: 51%;
					float: right;
					padding-left: 30px;
					padding-right: 10px;
				}

			.shadeBox div h2 {
				width: 51%;
				float: right;
				padding-left: 30px;
				padding-right: 10px;
			}


			.shadeBox .imageFloat {
					width: 49%;
					float: left;
					margin-bottom: 50px;
				}

			#birth02 {
				margin-top: -400px;
			}

			#birth03 {
				margin-top: -400px;
			}

	

}

/************************************************************/

@media screen and (min-width: 1024px)  {

	

}

/************************************************************/

@media screen and (min-width: 1266px)  {

}

/************************************************************/

@media screen and (min-width: 1280px)  {

	

	.contentSection h2 {
		font-size: 1.75em;
		margin: 20px auto 30px auto;
	}

	.shadeBox button {
		padding: 12px 5px 12px 55px;
		background-size: auto 45%;
		background-position: 1.5% 50%;
	}

		.shadeBox button h3 {
			font-size: 1em;
		}

		.imageCaption {
			font-size: 0.75em;
			margin: 5px auto 15px auto;
		}

		.shadeText {
			font-size: 1em;
		}


}

/************************************************************/

@media screen and (min-width: 1281px)  {



}

/************************************************************/

@media screen and (min-width: 1366px)  {

}

/************************************************************/


@media screen and (min-width: 1600px)  {

}

/************************************************************/

@media screen and (min-width: 1920px)  {

}

/************************************************************/