/* 'Red Hat Display', sans-serif; for bolder text */
html, body { font-family: 'Red Hat Text', sans-serif; }
body { margin-top: 10rem; }

h1,h2,h3,h4,h5,h6 { font-family: 'Red Hat Display', sans-serif; font-weight: 800; }

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.btn-cta { font-weight: bold; }

header > nav { display: flex !important; justify-content: center !important;}
header > nav img { height: 25px;}
header > nav .navbar-brand, header > nav > .cta-menu > .navbar-text, header > nav > .cta-menu { text-align: center; justify-content: center;}

header > nav > .cta-menu > .btn { margin: 0.75rem auto; }

.navbar.bg-light { background-color: #fff !important; }
.fa-nav-icon { font-size: 1.25rem; margin-right: 0.5rem; align-items: center; vertical-align: middle;}

section { margin-bottom: 1rem;}
.page-intro p { padding: 1rem; font-weight: bold; font-style: italic; text-align: center; }


.plx-img-01 { background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent), url("../img/firearms_training-sspn1007558491.jpg"); background-position: 50% 0; }
.plx-img-02 { background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent), url("../img/personal_training-sspn120816583.jpg"); background-position: 50% 0; }
.plx-img-03 { background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent), url("../img/security_consulting-sspn1080584180.jpg"); background-position: 30% 0; }
.plx-img-04 { background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent), url("../img/breakin-sspn10542865.jpg"); background-position: 40% 0; }
.plx-img-05 { background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent), url("../img/concealcarry-sspn387173050.jpg"); background-position: 60% 0; }

.parallax {
	min-height: 32rem;/* 1024px 64rem */
  padding: 1rem;
  background-color: #000;
  background-size: cover;
  /*
				Size: 			##px  OR  XXpx XXpx     OR     XX%  OR  XX% XX%
										By provding 1 dimension it is the width and height is automatically calculated to keep the aspect ratio. However, if you
										have a value of 100%, when you get to smaller screens, the aesthetics is not pleasing. By doing a width and height, you 
										end up skewing the image which doesn't look good either.
										
				Cover: 			This allows for the image to remain filling the element it is in and keep its aspect ratio, regardless of the screen size.
				Contain: 		This will fill the element to whichever comes first, height or width. If the size of the image fills the height first, you
										will have white space to the right. If the size of the image fills the width first, you will have white space underneath.
	*/
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-origin: border-box;
	/*background-clip: border-box;*/
	background-attachment: scroll;
	/*
				background-attachment: 		fixed | scroll | local | unset | intial | inherit
																	This defines how scrolling happens with the image
																	
																	fixed: 			the image would be fixed to the viewport instead of the container.
																	scroll: 		the image would stay in place and content scrolls over it
																	local: 			scrolls with the content of the container
																	unset: 			
																	initial: 		
																	inherit: 		
				
	BORDER WAS ONLY USED FOR DEMO PURPOSES 
	border: 4px dashed #f00;
	*/

}
.parallax:last-child {
	margin-bottom: 0;
}


.parallax-content {
	color: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.parallax h2 { color: #ddd; font-weight: 700; }
.parallax-content a.btn { margin-top: 1rem; margin-bottom: 2rem; }


.parallax-content .collapse .card,
.parallax-content .collapsing .card { background-color: transparent; }

main.payments { margin: 7rem auto 3rem; }
main.payments > section > article { display: block; text-align: center; margin: 0 1rem; }

footer {
	background-color: #0a3161;
	color: #fff;
	margin-bottom: 0;
	padding: 1rem;
	text-align: center;
}
footer a, footer a:visited, footer a:active, footer a:focus { color: #fff; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

@media (min-width: 323px) {
	header > nav > .cta-menu > .navbar-text { display: block; }
}
@media (min-width: 472px) {
	header > nav > .cta-menu > .navbar-text { display: inline; margin-left: 1.5rem; }
	body { margin-top: 7rem; }
}

@media (min-width: 576px) {
  .container {
    max-width: 33rem;
  }
  header > nav > .cta-menu > .navbar-text { margin-left: 1.5rem;}
}

@media (min-width: 643px) {
	body { margin-top: 4rem; }
}

@media (min-width: 768px) {
	header > nav { display: flex !important; justify-content: space-between !important;}
  .container {
    max-width: 40rem;
  }
  h1 { font-size: 3.5rem; }
	h2 { font-size: 3rem; }
	h3 { font-size: 2.5rem; }
	h4 { font-size: 2rem; }
	h5 { font-size: 1.5rem; }
	h6 { font-size: 1rem; }
  h1.display { font-size: 6.25rem; }
	h2.display { font-size: 5.75rem; }
	h3.display { font-size: 5.25rem; }
	h4.display { font-size: 4.75rem; }
	h5.display { font-size: 4.25rem; }
	h6.display { font-size: 3.75rem; }
}

@media (min-width: 992px) {
  .container {
    max-width: 50rem;
  }
  .parallax { padding: 4rem; background-attachment: fixed;}
}

@media (min-width: 1200px) {
  .container {
    max-width: 60rem;
  }
}