@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'Orbitron';
	src: url(../Fonts/Orbitron/Orbitron-Regular.ttf) format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Orbitron';
	src: url(../Fonts/Orbitron/Orbitron-Medium.ttf) format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Orbitron';
	src: url(../Fonts/Orbitron/Orbitron-Bold.ttf) format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Orbitron';
	src: url(../Fonts/Orbitron/Orbitron-Black.ttf) format('truetype');
	font-weight: 800;
	font-style: normal;
}



/**********************************************************************/
/***************************** Page Top *******************************/
/**********************************************************************/


#content {
	padding: 0rem 1rem;
}

.subtitle {
	letter-spacing: 2px !important; /* was 4px */
	text-transform: uppercase;
}

.titleDivider {
	max-width: 90%;
	border: none;
	height: 1px;
	background: #222;
	box-shadow: 0 0 8px rgba(0, 210, 255, 0.9);
	margin: 0 auto;
	margin-top: 1.5rem;

}

.subtitle2 {
	color: #555;
	max-width: 90%;
	font-size: 80% !important;
	font-style: italic;
	margin-top: 1rem;
}



/**********************************************************************/
/**************************** Main Section ****************************/
/**********************************************************************/


.gear-list {
	background-color: #12121290;
	border: 2px solid #222222;
	border-radius: 50px;
	padding: 1rem;  /* was 2rem */
	padding-bottom: 4rem;
	margin-top: 2rem !important;
	/*max-width: 80%;*/
	margin: 0 auto;
	margin-bottom: 12rem;
	display: block;
}

.section-title {
	font-family: orbitron;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-align: center;
	font-size: 2rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.section-description {
	font-size: 1.5rem;
	font-weight: 300;
	color: #999;
}

.gear-type-title {
	font-family: 'Orbitron';
	color: #777;
	margin-top: 2rem;
	margin-bottom: 1rem;
	letter-spacing: 4px;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.gear-list ul {
	list-style: none;
	margin-left: 1rem; /* was 2rem */
	line-height: 2rem;
}

.gear-list p {
	padding-left: 1rem; /* was 2rem */
	padding-right: 1rem; /* was 2rem */
}

.gear-list li {
	font-size: 1rem;
	line-height: 2.5rem;
}

.gear-list hr {
	background-color: #111;
	margin-top: 4rem;
	margin-bottom: 4rem;
	width: calc(100% + 2rem) !important; /* to extend the hr to edges inside a div that has 2rem of left and right padding */
	margin-left: -1rem; /* compensating for the left padding */
	margin-right: -1rem; /* compensating for the right padding */
	opacity: 1;
	border: none; /* reset the hr border in order to apply a box shadow */
	height: 2px; /* give the hr some height */
	background-color: #222;
	box-shadow: 0 0 15px 5px rgba(135,206,250, 0.1);
	/*box-shadow: 0 0 15px 5px rgba(135,206,250, 0.1), inset 0 0 15px 3px rgba(135,206,250, 0.1);*/
}

.gear-name {
	/*font-family: 'Orbitron';*/
	color: #777;
	padding-left: 1rem; /* was 2rem */
	padding-top: 4rem;
	padding-bottom: 1rem;
	/*letter-spacing: 2px;*/
}

.diagram-name {
	/*font-family: 'Orbitron';*/
	color: #777;
	padding-left: 2rem;
	padding-top: 4rem;
	padding-bottom: 1rem;
	/*letter-spacing: 2px;*/
}


.elaboration-text {
	margin-top: 3rem;
}



/**********************************************************************/
/**************************** AUDIO PLAYER ****************************/
/**********************************************************************/

#myAudio {
	display: none;
}

#playButton {
	cursor: pointer;
	border: 2px solid #444;
	border-radius: 50px;
	opacity: .3;
	transition: opacity 2s;
	display: ;
}

#playButton:hover {
	border: 2px solid #555;
	opacity: 1;
}

.page-play-button {
	cursor: pointer;
	border: 2px solid #444;
	border-radius: 50px;
	opacity: .3;
	transition: opacity 2s;
	width: 30px;
	height: auto;
}

#timeDisplay {
	color: #222;
	display: none;
}

/*  Play Button Undulates After Page Loads */

@keyframes singleFade {
  0% { opacity: .3; border-color: #444;}
  50% { opacity: .7; border-color: #777;} 
  100% { opacity: .3; border-color: #444} 
}

.fade-button {
  /* Takes 2 seconds per cycle, repeats 2 times */
  animation: singleFade 2s ease-in-out 1; 
  /* Waits 1 second after page load before starting */
  animation-delay: 2s; 
  /* Ensures the button keeps its default styling during the delay */
  animation-fill-mode: backwards; 
}



/************************************************************************/
/***************************** MEDIA QUERIES ****************************/
/************************************************************************/

@media (min-width: 480px) {  

}

@media (min-width: 576px) {  
	
}

@media (min-width: 768px) {
	.subtitle {
		letter-spacing: 10px !important;
	}

	.subtitle2 {
		color: #555;
		max-width: 85%;
		font-size: 95% !important;
		font-style: italic;
		margin-top: 1rem;
	}

	.titleDivider {
		max-width: 85%;
		border: none;
		height: 2px;
		background: #222;
		box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
		margin: 0 auto;
		margin-top: 1.5rem;
	}

	.gear-list {
		background-color: #12121290;
		border: 2px solid #222222;
		border-radius: 50px;
		padding: 2rem;
		padding-bottom: 4rem;
		margin-top: 2rem !important;
		/*max-width: 80%;*/
		margin: 0 auto;
		margin-bottom: 12rem;
		display: block;
	}

	.gear-list li {
		font-size: 1.25rem;
		line-height: 2.5rem;
	}

	.gear-list p {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.section-title {
		font-family: orbitron;
		text-transform: uppercase;
		letter-spacing: 8px;
		text-align: center;
		font-size: 2.5rem;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.gear-list hr {
		background-color: #111;
		margin-top: 4rem;
		margin-bottom: 4rem;
		width: calc(100% + 4rem) !important; /* to extend the hr to edges inside a div that has 2rem of left and right padding */
		margin-left: -2rem; /* compensating for the left padding */
		margin-right: -2rem; /* compensating for the right padding */
		opacity: 1;
		border: none; /* reset the hr border in order to apply a box shadow */
		height: 2px; /* give the hr some height */
		background-color: #222;
		box-shadow: 0 0 15px 5px rgba(135,206,250, 0.1);
		/*box-shadow: 0 0 15px 5px rgba(135,206,250, 0.1), inset 0 0 15px 3px rgba(135,206,250, 0.1);*/
	}

	.gear-name {
		/*font-family: 'Orbitron';*/
		color: #777;
		padding-left: 2rem;
		padding-top: 4rem;
		padding-bottom: 1rem;
		/*letter-spacing: 2px;*/
	}

	.mobile-break {
		display: none;
	}

}

@media (min-width: 992px) { 

}

@media (min-width: 1200px) {  

}