/* 
	template.css
	Copyright (c) 2018 by Donald Warren Muritz
	All Rights Reserved
	
	A website assignment using Bootstrap 4.1.3
	for course WEB125, HTML & CSS, at
	HACC - Central Pennsylvania's Community College
	Professor Carl R. Petersheim, M.S.
*/

/* 	Tag Selector Section......................................*/

body {
    width: 100%;
    height: auto;
    position:relative;
    background-color: black;
}

h1 {
    color: #ff8c1b;
    font-family: magistral, sans-serif;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 1em;
    font-size: 1.8em;
}

h2 {
    color: #ff8c1b;
    background-color: rgb(09,49,88); /* For IE and Edge */
    background-color: rgb(09,49,88, 0.3);
    font-family: magistral, sans-serif;
    font-weight: 400;
    font-size: 1.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    border-top: 0.1em solid rgb(163,99,36); /* For IE and Edge */
    border-bottom: 0.1em solid rgb(163,99,36); /* For IE and Edge */
    border-top: 0.08em solid rgb(163,99,36, 0.5); 
    border-bottom: 0.08em solid rgb(163,99,36, 0.5);
    margin-bottom: 1em;
    /* opacity: 0.4; For IE and Edge */
}

h3 {
    color: #ff8c1b;
    font-family: magistral, sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    margin-top: 2em;
}

p, ul, ol, td, form {
    color: #ecb783;
    font-family: magistral-condensed, sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    
}

ol{
    padding-left: 1.5em;
    /* list-style-image: url('../images/hex_bullet5.svg'); */
}

ul{
    padding-left: 2em;
    /* list-style-image: url('../images/hex_bullet5.svg'); */
}

li{
    padding-left: 0.5em;
}

a:link {
    color: #feecdc;
    text-decoration: none;
}

a:visited {
    color: #ffdfc3;
    color: #ffdfc3;
    text-decoration: none;
}

a:hover {
    color: #feecdc;
    text-decoration: underline;
}

a:active {
    color: #ffffff;
    text-decoration: underline;
}

b {
    color: #ff9b40;
}

table {
    width: 100%;
    margin-bottom: 1em;
    border-radius: 4px;
}

th {
    background-color: rgb(255,140,27);
    background-color: rgb(255,140,27,0.8);
    color: #141a2d;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 0.4em;
    padding-right: 0.4em;

}

td {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    background-color: rgb(05,26,46);
    background-color: rgb(05,26,46, 0.8);
}

legend {
    color: #ff8c1b;
    font-family: magistral, sans-serif;
    font-weight: 500;
    padding-top: 1em;
    font-size: 1em;
}

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-top: 3px solid rgb(09,49,88);
    border-top: 3px solid rgb(09,49,88, 0.3);
}

nav {
    width: 85%;
    display: flex;
    margin: auto;
    justify-content: space-between;
}

/*	Class Selector Section...................................*/

.nav-link {
    white-space: nowrap;
}

.howPlay {
    white-space: nowrap;
}

.container-fluid {
	/* background-color: rgba(255,255,204,1.0); */
	width: 90%;
}

.form-color {
    font-size: 0.8em;
}

.footer {
    margin-top: 4em;
    align-content: center;
}

.footerText {
    font-size: 0.9em;
    color: #7b7774;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    width: 80%;
    height: 80%;
    margin: auto;
}
			
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
}

.caption {
    font-size: 1.3em;
    padding-top: 1em;
    padding-bottom: 0em;
    margin-top: 0em;
    margin-bottom: 0.4em;
}

.gallery {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.navbar {
  
    width: 100%;
    margin: 0em auto;
    float: none;
    font-size: 1em;
    background-color: rgb(09,49,88);
    background-color: rgb(09,49,88, 0.3);
}

.ulNav {
    margin: 0em auto;
    float: none;
}

.liNav {
    margin: 0em 0.5em;
    font-size: 1em;
}


.navbar-brand.abs {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
}

.navbar-nav {
    text-align: left;
}

.navSub {
    text-align: left;
    position: fixed;
    float: left;
}


.imgBrand {
    width: 100%;
    height: auto;
    max-width: 250px;
    min-width: 180px;
}

.title {
    width: 100%;
    height: auto;
    max-width: 700px;
    min-width: 100px;
    margin-top: 0.5em;
    margin-bottom: 0em;    
}

.coming-soon {
    font-size: 1.0em;
    color: #91a5e2;
    margin-bottom: 4em;
}

.mainImage {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.8em;
    border-radius: 6px;
}

.container {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 6px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  border-radius: 6px;
  background-color: white;
}

.container:hover .overlay {
  opacity: 0.1;
}

.imageBG {
    background-color: white;
    border-radius: 6px;
    width: 100%;
}

.cards {
    margin-bottom: 2em;
    
}

.subImage {
    width: 100%;

    height: auto;
    margin-top: 3em;
    margin-bottom: 0em;
    border-radius: 4px;
    opacity: 1;
    display: block;
}

.subImage2 {
    width: 100%;

    height: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 4px;
    opacity: 1;
    display: block;
}


.imgTable {
    width: 100%;
    max-width: 66px;
    min-width: 40px;
    height: auto;
    border-radius: 4px;
}

.carousel {
    width: 80%;
    margin: auto;
}

.center {
    margin: auto;
    align-content: center;
    float: none;
}

.firstLegend {
    margin-top: 0em;
    padding-top: 0em;
}

/*	justify-content:center;......................................*/

.navbar-toggle {
    z-index:3;
}

/*	ID Selector Section......................................*/

@media only screen and (max-width: 1000px) {
    #hide {
        display: none;
    }
}

#bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    background-image: url("../images/scanlines.png"), radial-gradient(at 50% 20%, #093158, #000000);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed;
    float: inherit;

    -webkit-animation-name: pulse; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */

    animation-name: pulse;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; 
} 

/* Safari syntax */
@-webkit-keyframes pulse {
    0% {opacity: 0.6} 
    50% {opacity: 1}
    100% {opacity:0.6}
}

/* Standard syntax */
@keyframes pulse {
    0% {opacity: 0.6} 
    50% {opacity: 1}
    100% {opacity:0.6}
}