/* 
filename: [style.css] 
author: [owen] 
created: [15/08/2019] 
last modified: [28/08/2019] 
description: [index.html, topic.html, quiz.html] 
*/

figure {
	padding-top: 25px;
	text-align: center;
}

#contact-blurb {
	padding-top: 25px;
}

#about-blurb {
	padding-top: 25px;
}

#mobile {
	color: black;
}

.card-title {
	font-size: 28px;
}

#con-int {
	padding-top: 15px;
}

#con-para {
	text-align: center;
	background-color: white;
}

.work-headings {
	padding: 20px;
	text-decoration: underline;
}

.header-breaker {
	margin-bottom: 18px;
}

.sub-headings::before {
	display: block; 
	content: " "; 
	margin-top: -122px; 
	height: 122px; 
	visibility: hidden; 
	pointer-events: none;
}

.main-headings::before {
	display: block; 
	content: " "; 
	margin-top: -295px; 
	height: 295px; 
	visibility: hidden; 
	pointer-events: none;	
}

.frpara br {
	margin-bottom: 12px;
}

.main-headings {
	text-decoration: underline;
	padding-bottom: 10px;
	color: black;
}

.footimgmid {
	padding-top: 3.5px;
	padding-bottom: 3.5px;
	padding-left: 30x;
	padding-right: 30px;
}


.footimg {
	padding: 3.5px;
}

#numJumbo {
	padding: 2rem 2rem;
	background-color: darkorange;
	border-top: solid 2px black;	
}

#numbers {
	text-align: center;
	font-size: 64px;
	color: black;
}

.jumbotron {
	padding: 3rem 2rem;
	background-color: darkorange;
	border-top: solid 2px black;
}

.headingicon {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Style the navbar */
.stickyNavbar {
	border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    padding-top:8px;
	padding-bottom:8px;
    text-align:center;	
	padding-left: 0px;
	padding-right: 0px;
	background-color: white;
}

 .stickyNavbar li {
	display: inline;
}

/* Navbar links */
.stickyNavbar a {
	display: inline-block;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	color: black;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	width: 110px;
}

.stickyNavbar a:hover {
	color: orange;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
	position: fixed;
	top: 50px;
	width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
	padding-top: 60px;
}

p {
	font-weight: bold;
}

#blurb {
	padding-top: 20px;
	color: black;
}

#paddedhead {
	padding-top: 10px;
}

#email {
	color: black;
	font-weight: bold;
}

#emailfoot {
	color: black;
}

.paras {
	text-align: center;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 15px;
}

#serlogo {
	text-align: center;
	background-color: darkorange;
	border-bottom: 5px solid black;
}

#srpghd {
	background-color: darkorange;
	border-bottom: 3px solid black;
}

.frpara {
	background-color: white;
}

footer {
	text-align: center;
	padding: 10px;
	
}

.rectangle {
	background-color: darkorange;
	max-height:100%;
	max-width:100%;
	text-align: center;  
	border-bottom-right-radius:30px;
	padding-bottom: 5px;
	padding-top: 10px;
	padding-left: 2.5px;
	padding-right: 2.5px;
	border-style: dashed;
	border-color: black;
}

hr {
	height: 1.5px;
	background: black;
	width: 80%;
}

.lgwr {
	font-size: medium;
}

.pdimg {
	padding-right: 20px;
}

a {
	color: darkorange;
}

.jumbotron-fluid {
	text-align: center;
	margin: 0px;
	background-color: darkorange;
	padding-top: 0px;
	padding-bottom: 0px;	
}

#HeaderLogo {
	height: 100%;
	max-width: 100%;
}

#hc1 {
	max-width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

#l2 {
	max-width: 100%;
    text-align: center;
    margin: 0px;
    background-color: #FFA500;
}

h1, h2 {
	text-align: center;
	font-weight: bold;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
} 

.active {
	color: white;
	text-decoration: underline;
}

.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-top: 25px;
}

.card:hover {
	border: 2px solid gray;
	box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

footer {
	background-color: #e6e3e3;
}

#l1 {
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 15px;
}

.navbar-collapse {
	text-align: right;
	margin-top: 15px;
}

#mimg {
	margin-bottom: 10px;
}

.mob-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/mbimg.jpg");
	height: 50%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;	
}

#hmpgbg {
	background-color: darkorange;
}

body, html {
	height: 100%;
} 

#hero-hd { 
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: white;
	margin-bottom: 15px;
	margin-left: 5px;
	margin-right: 5px;
	text-decoration: underline;
}

#hero-text {
	text-align: center;
	color: white;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin-top: 45px;
	font-size: 1.25em;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
	.column {
		flex: 100%;
		max-width: 100%;
	}
}