* {
	margin: 0px;
	padding: 0px;
	border: none;
	box-sizing: border-box;
}

html, body {
	background: #000000;
	text-align: center;
}

body {
	background: url(../img/bg.jpg);
	background-repeat: no-repeat; 
	background-position: center bottom;
	background-size: cover;
	height: 100vh;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(222, 89, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(222, 89, 0);
} 

#logo span {
	background: #000000;
	color: #de5900;
	font-family: 'Allerta Stencil';
	font-weight: bold;
	margin: 0px 30px 0px 8px;
}

#navigation img {
	border-right: 1px solid #ffffff;
	margin: 0px 4px 0px 0px;
	width: 20px;
}

#navigation .nav-link {
	background: #000000;
	border: 1px solid #ffffff;
	border-bottom: 5px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
	font-family: 'Allerta Stencil';
	margin: 0px 4px 0px 4px;
	padding: 0px 4px 0px 0px;
}

#navigation .nav-link:hover {
	border-bottom: 5px solid #de5900;
}

#navigation .activeLink {
	border-bottom: 5px solid #de5900;
}

#content {
	border-color: #00588e;
	text-align: left;
}

#content .card-header {
	background: #d3eaf4;
	color: #000000;
	font-family: 'Allerta Stencil';	
}

#content .card-title {
	color: #de5900;
	font-style: italic;
}

#content .card-footer {
	background: #00588e;	
	color: #ffffff;
	font-family: 'Allerta Stencil';	
}

#content .card-footer a {
	color: #ffffff;
	font-family: 'Allerta Stencil';
}

#content .card-footer a:hover {
	color: #de5900;
	text-decoration: none;
}

#content .card-footer .btn {
	background: #000000;	
	box-shadow: none;
	color: #ffffff;
	font-family: 'Allerta Stencil';
}

#content .card-footer .btn:hover {	
	color: #de5900;
	font-family: 'Allerta Stencil';
}

#quizContent .card-footer .btn.focus, .btn:focus {
	border-style: none;
}

#quizContent img {
	width: 100%;
	max-width: 60px;
	height: auto;
}

#quizContent .btn {
	border: 3px solid #d3eaf4;
	box-shadow: none;
}

#quizContent .btn.focus, .btn:focus {
	border-style: none;
}

#quizContent .btn img {
	width: 100%;
	max-width: 40px;
	height: auto;
}

#quizContent .answerCorrect {	
	border: 3px solid green;
}

#quizContent .answerFalse {	
	border: 3px solid red;
}

#scoreContent .form-control {
	border: 1px solid #00588e;
	box-shadow: none;
}

#scoreContent th {
	background: #00588e;
	border: 1px solid #00588e;
	color: #ffffff;
	padding: 2px;
}

#scoreContent td {
	border: 1px solid #00588e;
	padding: 2px;
}

#sourcesContent a {
	color: #000000;
	text-decoration: underline dotted;
}

#sourcesContent a:hover {
	color: #de5900;
	text-decoration: none;
}

#contactContent .form-control {
	border: 1px solid #00588e;
	box-shadow: none;
	margin-bottom: 5px;
}

#contactContent #status {
	color: red;
	font-style: italic;
}

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
button {font-size:0.9rem;} /*1rem = 16px*/
h1 {font-size:1.2rem;} /*1rem = 16px*/
h2 {font-size:1.1rem;} /*1rem = 16px*/
#logo span {font-size:1.2rem;}
p {font-size:0.9rem;} /*1rem = 16px*/
span {font-size:0.9rem;} /*1rem = 16px*/

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
	button {font-size:0.9rem;} /*1rem = 16px*/
	h1 {font-size:1.2rem;} /*1rem = 16px*/
	h2 {font-size:1.1rem;} /*1rem = 16px*/
	#logo span {font-size:1.2rem;}
	p {font-size:0.9rem;} /*1rem = 16px*/
	span {font-size:0.9rem;} /*1rem = 16px*/
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
	button {font-size:1rem;}
	h1 {font-size:2rem;}
	h2 {font-size:1.8rem;}
	#logo span {font-size:2rem;}
	p {font-size:1rem;}
	span {font-size:1rem;}
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	button {font-size:1rem;}
	h1 {font-size:2.5rem;}
	h2 {font-size:2.2rem;}
	#logo span {font-size:2.5rem;}
	p {font-size:1rem;}
	span {font-size:1rem;}
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	button {font-size:1rem;}
	h1 {font-size:3rem;} 
	h2 {font-size:2.7rem;}   
	#logo span {font-size:3rem;}
	p {font-size:1rem;}
	span {font-size:1rem;}
}
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set width to make card deck cards 100% width */
@media (min-width: 950px) and (max-width:1100px) { 
	button {font-size:1rem;}
	h1 {font-size:2.75rem;} 
	h2 {font-size:2.45rem;} 
	#logo span {font-size:2.75rem;}
	p {font-size:1rem;}
	span {font-size:1rem;}
}