/* Default is RESPONSIVE FIRST, or phone mode. */

/* Default theme settings. Change as needed: */

	body { /* Default font. Make sure you know what you're doing here! */
		font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Neue Helvetica', 'Helvetica Neue', 'Segoe UI Variable', 'Segoe UI', 'Ubuntu', 'Roboto', 'Oxygen', 'Cantarell', sans-serif; /* Change as needed. Make sure you know what you're doing! */
	}

	a {
		color: #1b5faa; /* This is the primary brand color. Replace it with your own. */
	}

	.btn, header, footer, input[type=submit] {
		background-color: #1b5faa; /* This is the primary brand color. Replace it with your own. */
	}

	a:hover {
		color: #f05136; /* This is the secondary brand color. Replace it with your own. */
	}

	.btn:hover, input[type=submit]:hover {
		background-color: #f05136; /* This is the secondary brand color. Replace it with your own. */
	}
	
	input[type=email]:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus {
		border-color: #1b5faa; /* This is the primary brand color. Replace it with your own. */
	}

/* Rest of CSS follows. Make sure you know what you're doing or you WILL BREAK THE SITE. */

*, *:before, *:after { /* Hack that apparently makes height & width include everything except margins? */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@-ms-viewport { /* Hack that might fix Windows Phone 8 IE bug? Still needs to be tested on both mobile and desktop IE. */
	width: auto!important;
}

body, header, nav, footer, div, span, img, figure, article, section, aside { /* Resets margin, padding and border to 0. */
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-size: 16px; /* Easily readable on most, if not all, screens. */
	line-height: 1.5; /* Because different fonts have different defaults. Readable, aesthetically pleasing standard. */
	height: 100%; /*Needed to make footer fill to the bottom of the screen. */
}

h1, article h1 { /* Settings to make h1 tags look better and uniform. */
	font-size: 32px;
	margin-bottom: 0;
	font-weight: 300;
}

h2, h3, h4 {
	font-weight: normal; /* Recommended. Change only if needed. */
}

h6 {
	text-transform: uppercase; /* Recommended. Change only if needed. */
}

p, ol, ul {
	color: #656565; /* Recommended for good basic contrast. Change only if needed. */
}

.btn, input[type=submit] {
	display: inline-block; /* Makes banner buttons inline if space allows. */
	clear: both; /* Makes buttons clear other content. */
	margin: 0 12px 10px 0; /* Good spacing from other content. */
	padding: 8px 16px; /* Easier to press with fingers.*/
	color: white; /* Makes button text easily visible.*/
}

.btn, .btn a, .btn:hover, .btn a:hover {
	color: white; /* Makes button text easily visible.*/
}

.btn img {
	padding-right: 8px; /* Aesthetically necessary padding between logo and anything else. */
	height: 22px; /* A good size. */
	vertical-align: middle; /* Centers images and text to each other. */
}

a, a *, a:hover, a:hover *, .btn, .btn *, .btn:hover, .btn:hover *, input[type=submit], input[type=email], input[type=text], input[type=password], textarea {
	text-decoration: none; /* Removes underline from links. Looks cleaner. */
	transition: all 0.4s ease; /* Smooth hover effects. */
}

.warning { /* Aesthetics for warning concerning old versions of IE. See corrosponding HTML. */
	text-align: center; /* Creates aesthetically pleasing plook. */
	padding: 4px 8px; /* Creates aesthetically pleasing padding. */
	color: #fff; /* Creates pleasing contrast. */
	background-color: #ffa500; /* Change this color if it clashes with your brand/link color(s). */
}

header {
	font-size: 18px; /* Slightly larger than the default of 16. */
	overflow: auto; /* Fills out the area its children will occupy. */
}

header, header a, header a:hover {
	color: #fff; /* Creates pleasing contrast. */
}

header a:hover {
	text-shadow: 0 0 6px black; /* Pleasing shadow when mouse hovers. */
}

.headerbar {
	width: 100%; /* Makes it fill maximum allowed width. */
	max-width: 1024px;  /* Value must be equal to .page maximum width. */
	margin: 0 auto; /* Centers it. */
}

.logo {
	padding: 12px 8px; /* Less vertical padding creates a smaller header size. Currently 56px. */
	height: 100%; /* Fills height of header. */
	float: left; /* Keeps it left. */
}

.logo-img {
	display: inline-block; /* Fills background if needed. */
}

.logo-img img { /* Needed to size and center the logo image. */
	padding-right: 8px; /* Aesthetically necessary padding between logo and anything else. */
	height: 32px; /* Logo image height. If this changes, you will need to change values in .logo rules. */
	vertical-align: middle; /* Centers images and text to each other. */
}

.logo-text {
	padding-top: 2px; /* Pushes text down for better vertical centering. */
	vertical-align: middle;  /* Centers images and text to each other. */
}

nav {
	padding: 0; /* Removes desktop mode padding. */
	float: none; /* Removes float used in desktop mode. */
}

nav input {
	display: none; /* Sets navigation menu checkbox to hidden for CSS menu hack. */
}

.nav-btn { /* Only appears in RESPONSIVE mode. */
	display: block; /* Makes menu button appear in responsive mode. */
	padding: 12px 8px; /* First value must be equal to half the difference between current header height and .nav-btn height. */
	float: right; /* Moves menu button to right. */
}

.nav-btn img {
	max-height: 32px; /* Needed to size and center the menu image. */
	vertical-align: middle;  /* Needed to size and center the menu image. */
}

.nav-menu { /* This is what makes the RESPONSIVE menu work. */
	display: none; /* Hidden by default in RESPONSIVE mode. */

}

nav input:checked + .nav-menu {  /* This is what makes the RESPONSIVE menu work. Works well in older Android Webkit browsers.*/
	display: block; /* Display the RESPONSIVE menu when .nav-btn is pressed. */
	clear: both; /* Clear the headerbar. */
}

.nav-item {
	display: block; /* Each menu item on its own line in RESPONSIVE mode. */
	text-align: center; /* Easy on the eyes in RESPONSIVE mode. */
	padding: 4px 0; /* Vertical padding necessary in RESPONSIVE mode. */
	margin: 0; /* Removes margins used in desktop mode. */
	border-top: solid 1px #365294; /* Replace with a color slightly darker than your brand color, for RESPONSIVE mode. */
}

.page {
	padding: 0 8px; /* Creates necessary reading padding in RESPONSIVE and TABLET mode. */
}

.banner {
	background-size: cover; /* Makes the background image fill available space. */
	background-position: center; /* Sets the background image to center. */
	overflow: auto; /* Fills the entire area with the background image. */
	color: white; /* White text with a shadow over a image is nice and readable. */
	text-shadow: 0 0 6px black; /* White text with a shadow over a image is nice and readable. */
	padding: 12px 0 10px 0; /* Makes padding at top and bottom look good in RESPONSIVE mode. */
}

.banner h1 {
	margin: 0; /* Removes unnecessary margins from banner header. */
}

.banner a, .banner p {
	color: white; /* Makes links white too. Like headers and nav. */
}

.banner .btn { 
	text-shadow: none; /* Removes the contrast for the buttons until you hover. */
	background: none; /* Makes the button see-through. */
	border: solid 1px white;  /* Gives the button a simple border. */
	text-shadow: 0 0 6px black; /* White text with a shadow over a image is nice and readable. */
}

.banner .btn:hover {
	box-shadow: inset 0 0 3px #333, 0 0 6px #333; /* Creates pleasing and necessary contrast when you hover or press. */
}

.breadcrumbs {
	display: none; /* Do not display breadcrumbs in RESPONSIVE mode. */
}

.notification input {
	display: none; /* Sets checkbox to hidden for CSS hack. */
}

.notify-box {
	background-color: lightgray; /* So that you can see it's an ad. */
	padding: 0 4px; /* Necessary and pleasing padding. */
}

.notify-close {
	float: right; /* Moves menu button to right. */
}

.notify-close img {
	max-height: 32px; /* Needed to size and center the menu image. */
	vertical-align: middle;  /* Needed to size and center the close image. */
	padding: 0;
}

.notify-content { /* This is what makes the ad hiding work. */
	display: block; /* Shown by default. */

}

.notification input:checked + .notify-box {  /* This is what makes the ad hiding work. Works well in older Android Webkit browsers.*/
	display: none; /* Hide the ad when .notify-close is pressed. */
}

.container, article { /* Applies the clearfix hack to all these elements.*/
	content: "";
	display: table;
	clear: both;
}

.column {
}

article .social-item {
	padding: 6px; /* Aesthetically necessary padding. */
	margin-right: 4px; /* Easily readable space between items. */
	background-color: gray; /* Nice neutral background colour. For now. */
	color: white; /* Makes text readable. */
	font-size: 14px; /* Text needs to be a bit smaller. */
}

article .social-item img { /* Needed to size and center the social images. */
	padding-right: 6px; /* Aesthetically necessary padding between logo and anything else. */
	height: 16px; /* A good size. */
	vertical-align: middle; /* Centers images and text to each other. */
}

.post-details {
	color: inherit; /* Sets metadata apart from post content. */
}

figure {
	border: 1px solid red; /* Just for visualization purposes. Remove when done developing. */
}

figure img {
	width: 100%; /* Makes images their own width if they are in a figure tag. */
}

textarea, input, button, select {
	font-family: inherit; /* Makes form elements' fonts the same as the rest of the site's */
	font-size: inherit; /* Makes form elements' fonts the same as the rest of the site's */
}

input[type=email], input[type=text], input[type=password], textarea {
	border: 1px solid #656565; /* Sets form borders to the same value as text */
	border-radius: 0; /* Sets borders to be square or right-angled */
	padding: 8px 16px; /* Easier to press with fingers.*/
	display: block; /* Puts each form item on a line of its own in RESPONSIVE mode. */
	width: 100%; /* Makes each form item fill the width in RESPONSIVE mode. */
	-webkit-appearance: none; /* Makes webkit browsers comply with these settings. */
}

input[type=checkbox] {
	background-color: red; /* Puts each form item on a line of its own in RESPONSIVE mode. */
	border: 2px solid yellow;
}

textarea {
	vertical-align: top; /* Pretty obvious. Makes it in line with any text. */
	resize: none; /* Removes the ability to resize it. Just to make it easier - nothing else can be resized, after all. */
}

input[type=submit] {
	display: block; /* Puts each form item on a line of its own in RESPONSIVE mode. */
	border: none;
}

#catch22 {
	display: none;
}

.pagination-item, .pagination-inactive {
	float: left; /* Puts them all on one line. */
	width: 25%; /* Makes each one a quarter of the width of the screen. */
	text-align: center; /* Centers text inside each pagination link's area. */
	padding: 8px 0; /* Necessary padding to make easily clickable. */
}

.pagination-text {
	display: none; /* Removes unnecessary text in RESPONSIVE mode. */
}

.pagination-inactive {
	color: lightgray; /* So that you can understand the pagination better. */
}

footer {
	clear: both; /* Footer needs to clear all content. */
	overflow: auto; /* Fills the area its children will occupy. Aesthetically necessary. */
	padding: 8px 0; /* Necessary padding */
	margin-top: 8px; /* Necessary margin */
	min-height: 120px;
}

footer, footer a, footer a:hover {
	color: #fff; /* Creates good contrast. */
}

footer a:hover {
	text-shadow: 0 0 6px black; /* Good shadow when mouse hovers. */
}

.footerbar {
	padding: 0 8px; /* This padding is aesthetically necessary in TABLET and RESPONSIVE mode. */
}

.copyright {
	display: inline-block; /* Displays copyright information inline with social media links */
}

.social {
	margin-top: 16px; /* Necessary space between copyright and social areas in RESPONSIVE mode. */
}

.social .social-item {
	display: block; /* Displays each social link on its own line. */
	padding: 4px 0; /* Vertical padding necessary. */
	height: 100%; /* Fills padding out. Very necessary. */
}

.social .social-item img { /* Needed to size and center the social images. */
	padding-right: 8px; /* Aesthetically necessary padding between logo and anything else. */
	height: 22px; /* A good size. */
	vertical-align: middle; /* Centers images and text to each other. */
}

.video-container { /* This is to help Youtube iframes diplay properly on phones. */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.video-container iframe {  /* This is to help Youtube iframes diplay properly on phones. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* TABLET mode styles. To work, this must appear AFTER small screen styles and BEFORE desktop styles. */
@media screen and (min-width : 760px) {

.headerbar, .footerbar {
	padding: 0 8px; /* Creates necessary aesthetic padding. */
}

.logo {
	padding: 16px 0; /* Centers contents vertically by half the difference between header height and actual logo image height. 16+16+32=64px header height. */
}


nav {
	height: 100%; /* Expands to full size of header. */
	float: right; /* Creates nav menu on right-hand side. */
	padding: 19px 0 18px 0; /* Centers contents vertically. See difference between this value and the one in .logo. */
}

.nav-btn { 
	display: none; /* Only needed in RESPONSIVE mode. Hidden in DESKTOP and TABLET modes. */
}

.nav-menu { 
	display: block; /* Displays the nav menu in TABLET and DESKTOP modes. */
}

.nav-item {
	display: inline-block; /* Puts the nav items next to each other. */
	padding: 0 0 0 16px; /* Necessary padding. */
	border-top: none; /* Removes the border that appears in RESPONSIVE mode. */
}

#home {
	display: none; /* No need for "home" link in TABLET and DESKTOP modes due to breadcrumbs. */
}

.banner {
	padding: 24px 0 22px 0; /* Banner needs more padding in TABLET and DESKTOP modes. */
}

.page {
	width: 100%; /* Makes it fill maximum allowed width. */
	max-width: 1024px; /* This value dictates .headerbar, .footerbar and .copyright maximum width. */
	margin: 0 auto; /* Centers it. */
}

.breadcrumbs, .breadcrumbs * {
	display: inline-block; /* Displays the breadcrumbs in TABLET and DESKTOP modes. */
}

.breadcrumbs-item, .breadcrumbs-arrow {
	padding: 8px 8px 0 0; /* Good padding necessary. */
}

.column { 
	float: left; /* Sets columns to float. */
	padding-right: 16px; /* Enough space between columns, while keeping them left-aligned. */
}

.column.half {
	width: 50%; /* Makes two columns each take up 50% of the space. */
}

.column.third {
	width: 33.3%; /* Makes three columns each take up 33.3% of the space. */
}

.column.quarter {
	width: 25%; /* Makes four columns each take up 25% of the space. */
}

figure {
	display:inline-block; /*Makes figures not exceed their images' width in TABLET or DESKTOP modes.*/
}

form input[type=email], form input[type=text], form input[type=password] {
	width: 50%;
}

.pagination-item, .pagination-inactive { /* Settings more suited to a TABLET or DESKTOP environment. */
	width: auto;
	text-align: left;
	padding: 8px 16px 8px 0;
}

.pagination-text {
	display: inline-block; /* More space means you can show all the text in TABLET or DESKTOP modes. */
}

.footerbar {
	width: 100%; /* Fills maximum allowed width. */
	max-width: 1024px; /* Value is equal to article maximum width. */
	margin: 0 auto; /* Centers in page. */
}

.social {
	float: right; /* Displays the social menu on the right on TABLET and DESKTOP modes. */
	margin: 0; /*Removes unnecessary margins in TABLET and DESKTOP modes.*/
}

} /* END of TABLET mode styles. */

/* DESKTOP mode styles. To work, this must appear AFTER small screen styles and BEFORE desktop styles. */
@media screen and (min-width : 1044px) {

.headerbar, .footerbar, .page {
	padding: 0; /*Removes unnecessary padding in DESKTOP mode.*/
}

}