@charset "utf-8";
/* CSS Document */
html, body {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; }

ol, ul {list-style: none; }

blockquote {quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup*/ 
table {border-collapse: collapse; border-spacing: 0; }
a img { border: none; }
.clearfix {overflow:auto;}

h1 {margin-bottom: 2px; margin-top: 10px; font-size:2.0em;line-height:1.6em; }
h2 {color: rgba(45,116,167,1.00); /*****Blue*****/	font-size:1.8em; line-height:1.5em; margin-bottom: 5px;}
h3 {color: rgba(45,116,167,1.00);/*****Blue*****/	font-size:1.2em; line-height:1.2em; margin-bottom: 5px;}
h4 {margin-bottom: 5px; margin-top: 3px; font-size:1.2em;line-height:1.3em; }
h5 {color: rgba(45,116,167,1.00);/*****Blue*****/	font-size:.85em; line-height:.90em; margin-bottom: 2px;}
h6 {color:lightgrey; line-height:.90em; margin-bottom: 2px;}
.bold {font-size:20px; font-weight: bold;}
p { margin-bottom: 3px; font-size:16px;}
p:last-child { margin-bottom: 0; }
	ul {
		list-style: disc;
		margin: 0 0 1em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}



/*******************************************
6px		0.375em	37.5%	5pt
7px		0.438em	43.8%	5pt
8px		0.500em	50.0%	6pt
9px		0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1.000em	100.0%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt
*************/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

ul.expanded {padding-left: 0; margin:  0;}

body {color: #505050; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height:1.8em;overflow-y: scroll;overflow-x: hidden;}
.container {max-width:1540px; width: 100%; height:100%; margin: 0 auto;padding: 0 20px; overflow: hidden;}

#main {max-width:1540px;  margin: 0 auto;background-color:/*#fff;*/rgba(255,255,255,.60);}

a {text-decoration: none; color: rgba(45,116,167,1.0); font-weight: 500;}
a:hover { color:rgba(77,139,107,0.70); } 
a:visited a:link a:active {color: rgba(45,116,167,.90);}

.article {float:left; width:100%;margin-top:10px; margin-left: 8px;}
.line {border-bottom:solid 1px #999;padding-bottom:5px;}
.dkblue {color: rgba(45,116,167,1.00);}
.green {color:rgba(77,139,107,1.00);}
.price {color:rgba(45,116,167,1.00); font-weight:bold; }
.grey {color:#C3c2c2; font-weight:400;}
.blue {color:rgba(45,116,167,1.00); font-weight:700;}
.error {width:100%;}
.fine-line {border-bottom:solid 1px #999;padding-bottom:5px;}

/***********************************************
Socials Icons
*******************************************/

/* Style all font awesome icons */
.fa { padding: 2px; font-size: 40px; width: 25px; text-align: center; text-decoration: none;
  margin: 2px 2px; border-radius: 20px;}

/* Add a hover effect if you want */
.fa:hover { opacity: 0.7;}

/* Set a specific color for each brand */

/* Social */
.fa-facebook { background: none ;  color: #7F7E7E; margin-right:10px;}
.fa-instagram { background: none;  color: #7F7E7E; margin-right: 30px;}
.fb-share-button {float: left; display:inline-block; margin-left:15px;}
.fb-like { float: left;  margin-left:20px;}
.social {float:right; position: relative; display: inline-block; margin-right: 40px;}

/* covid-safe */
.fas fa-people-arrows { background: none ;  color: #7F7E7E; margin-right:10px;}
.fas fa-handshake-alt-slash { background: none ;  color: #7F7E7E; margin-right:10px;}
.fas fa-hands-wash { background: none ;  color: #7F7E7E; margin-right:10px;}


/************************************
Overlay
***********************************/
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

/***********************************************************************************
HEADER logo section
*******************************************************************************/
header {height:255px;}
.logo {display: block; float: right; background-position: top;	background-repeat: no-repeat;	width: 272px; height: 200px; margin-right:20px; margin-top:30px; margin-bottom:20px; right: 0px; background-image: url(../images/BAC-logo-web.png); background-size: 100%;}

	

/********************************************
Video
*********************************************/

.single-video {float:left; width:100%; height:400px; background-color: #000000; margin:20px 0px 20px 0px; }
.double-video {float: left; width:50%; background-color: #000000;height: 250px; margin-top:5px; padding:0%; margin-bottom:5px; }
video {background-color: #000000;}
.multiple-video {float:left; margin-top:5px; background-color: #000000; width:33%; height: 200px; padding:1%; margin-bottom:5px;}


/********************************************
Image
********************************************/
.rounded {border-radius:9%; border:#B4B2B2 thin solid;}
.image img {display: block;	}
img {width: 100%}
.event-photo-gallery {float: left; width:33.33%; padding:0; }	
/*************
INDEX page

*********************/
.top {margin-top:300px;}/****This is applied to the Coming Events button on the index page***/
.margin-left {margin-left: 20px;}
.centre-text {float: left; text-align: center; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding:30px;}
.technical {}
.heading {border-bottom: solid 4px rgba(45,116,167,1.00);display: inline-block;padding: 0 0.25em 0.5em 0; font-size: 2.2em;}
.coming-events {max-width:1540px;flex-wrap: wrap;display: flex; justify-content: space-between;}
.onnext {text-align: center; flex:1; padding:2%;flex-basis: 33%; box-sizing: border-box;}

.onnext h1{color: #505050;font-size:1.4em;line-height:1.5em;}
.onnext p {color: #505050; font-size:1,0em; line-height:1em;}
.onnext h2 {color: #505050; font-size: 1.2em; } 
.onnext h3 {color: #505050; font-size: 1.3em;font-weight:bold; }
.ev-last {display: block;}

.christmas-pic {float:left;  height:100%; margin-top: 0px; margin-right:20px;}
.feature-pic {float:left; width:7%; height:30%; margin-top: 10px; margin-right:20px;}
.small-pic {float:right; width:22%; height:100%; margin-top: 10px; margin-left:30px;}
.large-pic {float:right; width:60%; height:100%;margin-left:10px; margin-top: 10px; margin-bottom:10px;}
.medium-pic {float:right; width:40%; height:100%; margin-left:20px; margin-top: 10px; margin-right:30px;}
.ayo-pic {float:right; width:70%; height:100%; margin-left:20px; margin-top: 10px; margin-right:30px;}

.hero-front-pic {float:right; width:28%; height:100%; margin-right:20px; margin-top: 10px; margin-right:30px;}
.stalls-pic {float:left;background-image: url("../images/stalls-view-pano-1920x731.jpg"); background-repeat: no-repeat; background-position: center;background-size:cover;height:730px; width: 100%;margin-top:0px;}
.stalls-pic h2 { color: #fff; font-size: 1.8em;}
.contact {float:left; width:48%; padding: 2%;}
.contactform {float:left; width:48%; padding: 2%;}
#more {display: none;}
#myBtn {font-weight: 500;}
#moremore {display: none;}
#myBttn {font-weight: 500;}
.double-image {float: left; width: 48%; margin:1%;}

.multi-col {
   -webkit-column-width: 400px;
     -moz-column-width: 400px;
          column-width: 400px;
       -moz-column-rule-color:  #ccc;
       -moz-column-rule-style:  solid;
       -moz-column-rule-width:  1px;
       -webkit-column-rule-color:  #ccc;
       -webkit-column-rule-style: solid ;
       -webkit-column-rule-width:  1px;
	   margin-top:10px;
	   padding-bottom:5px;}
/***********************************
Button
********************************/


	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 2em;
		border: 0;
		box-shadow: inset 0 0 0 2px rgba(45,116,167,1.00);
		color: #2d74a7;
		cursor: pointer;
		display: inline-block;
		font-family: "Montserrat", sans-serif;
		font-size: 1.0em;
		font-weight: 700;
		height: 3.5em;
		letter-spacing: 0.075em;
		line-height: 3.5em;
		padding: 0 2.25em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(77,139,107, 0.50);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(30, 105, 137, 0.15);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.6em;
			
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 1.1em;
			height: 3.65em;
			line-height: 3.65em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: rgba(45,116,167,1.00);
			box-shadow: none;
			color: #ffffff !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: rgba(30, 105, 137, 0.50);
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			button.primary:active,
			.button.primary:active {
				background-color: rgba(45,116,167,1.00);
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			opacity: 0.25;
		}

/******************************************
about us on index page
*********************************************/
.christmas-background {text-align: center; display:block;background-color:#947d00; color:#fff; width:100%; padding:0px 10px 10px 20px; margin: 10px 0px 10px 0px;}
.background-4 {text-align: center; display:block;background-color:rgba(255,99,71,0.70)/***orange***/; color:#fff; width:100%; padding:10px 10px 10px 20px; margin: 10px 0px 10px 0px;}
.background-blue3 {text-align: center; display:block;background-color:rgba(45,116,167,0.40)/***faith blue***/; color:#fff; width:100%; padding:10px 10px 10px 20px; margin: 10px 0px 10px 0px;}
.background-blue2 {text-align: center; display:block;background-color:rgba(0,61,165,0.40)/***faith blue***/; color:#fff; width:100%; padding:10px 10px 10px 20px; margin: 10px 0px 10px 0px;}
.background-blue {float: left; display:block;background-color:rgba(45,116,167,0.60); color:#fff; width:100%; padding:10px 10px 10px 20px; margin: 10px 0px 10px 0px;}
.heading2 {border-bottom: solid 4px #fff;display: inline-block;padding: 0 0.25em 0.5em 0; font-size: 2em;}
.hidden {display:none;}
/*****************************
  *archive page
******************************/

/**.archive {float:left; height:225px; margin-top:5px;text-align: center; width:20%;padding:1%; margin-bottom:5px;}**/

.archive {text-align: center; flex:1; padding:1%;flex-basis: 20%; box-sizing: border-box;}

.event-archive {max-width:1540px;flex-wrap: wrap;display: flex; justify-content: space-between;}

/********************************************
Music school 
 ********************************************/
.music-school {text-align: center; flex:1; padding:2%;flex-basis: 25%; box-sizing: border-box;}

.teacher-pic {max-width: inherit;}

.teachers {max-width:1540px;flex-wrap: wrap;display: flex; justify-content: space-between;}

/******************************************************************************
Form
******************************************************************************/
.contact, .enews {float:left; width:100%; margin-right:1%;}
.map {float:left; width: 100%; height:auto; margin-top: 20px; }
.event-iframe {float:left; width: 100%; height:100%; }
.seating {float:left; width: 50%;}
.campaign {line-height: 125%; margin: 5px;}
form {float:left; width: 100%; margin: auto; padding: 15px; background:#D1d0d0; border: #505050 thin solid; border-radius: 8px;}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select { background: rgba(255,255,255,0.1); border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 10px; width: 100%;  background-color:#ffffff; color: #D1D0D0: 0 1px 0 rgba(0,0,0,0.03) inset;  margin-bottom: 5px;}

input[type="radio"], input[type="checkbox"] {  margin: 0 4px 8px 0;}

select { padding: 6px; height: 25px; border-radius: 2px;}


fieldset { margin-bottom: 10px; border: none;}

legend { font-size: 1.4em; margin-bottom: 10px;}

label { display: block; margin-bottom: 8px;}

label.light { font-weight: 300; display: inline;}

.number { background-color: rgba(45,116,167,1.00); color: #fff; height: 30px; width: 30px; display: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 30px;  text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-radius: 100%;}


/****************************************************************************
FOOTER
******************************************************************************/
.main-footer { background-color: #CCCCCC;  margin:0 auto; margin-top:10px; }
.wrap {max-width: 100%; display: flex; justify-content: center; padding:20px;}
.address {float:left; text-align: left; padding-left: 20px;padding-top:10px;  border-left: #E1E0E0 medium solid;}
.bac-logo {max-width:200px; height: 160px;  margin-right: 20px; }

.socials {text-align: center; width: 100%; font-size: 14px; padding-bottom: 40px; }

/****************************************************************************
FOOTER MENU
******************************************************************************/
.footer {display: block; background-color:rgba(45,116,167,0.60); }
.footer h2{background-color:rgba(45,116,167,1.00); font-size: 1.2em; font-weight: 800;	color: #ffffff; }

.footer-menu ul {list-style-type: none; padding: 0px; text-align: center;}

.footer-menu li a{list-style-type: none; color: #ffffff;  text-decoration: none;}
.footer-menu li a:visited {list-style-type: none; color: rgba(45,116,167,0.60);  text-decoration: none;}
.footer-menu> ul li a:hover {text-decoration: none; color:rgba(45,116,167,1.00); }
.footer-menu {
    display: flex;
    flex-wrap: wrap;
       justify-content:center;
}
.footer-item {
 flex-basis: 1;
    padding: .5rem;
    min-width: 16rem /*200px*/;
	color:#ffffff; 
}





/* =Extras
-------------------------------------------------------------- */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
overflow: auto; }
/**/



/********************************************************************************
MAIN NAVIGATION - Trigger on Mobile devices****/
#nav-trigger {display: none; text-align: center; width:100%; }
#nav-trigger span { display: inline-block; width:100%; padding: 10px 30px; margin-bottom:0px;  margin-bottom:5px; background-color:rgba(45,116,167,1.00); color: white;  cursor: pointer; text-transform: uppercase;}
#nav-trigger span:after { display: inline-block; margin-left: 0px; width:20px; height: 10px; content: "";/*intentionally left blank*/ border-left: solid 10px transparent;     border-top: solid 10px #fff; border-right: solid 10px transparent; }
#nav-trigger span:hover { background-color:rgba(77,139,107,1.00); }
#nav-trigger span.open:after {border-left: solid 10px transparent; border-top: none; border-bottom: solid 10px #fff; border-right: solid 10px transparent; }

/********************************************************************************
MAIN NAVIGATION - Menu - BAC
*********/
nav {max-width:100%; background-color: #fff;}
.current {background-color: #C3C2C2; color: #000000;}
nav#nav-main {font-size:1.1em; background-color:#fff; color: rgba(45,116,167,1.00); position:relative;  left: 0px;}
nav#nav-main ul {list-style-type: none; margin: 0; padding: 0; text-align: left;}
nav#nav-main li { display: inline-block; z-index: 1; padding: 5px; margin: 5px;}
nav#nav-main a {padding-bottom: 15px;color: rgba(45,116,167,1.00);  }
nav#nav-main a:hover {color: rgba(77,139,107,.90); padding-bottom:  16px; border-bottom: solid 3px rgba(45,116,167,1.00); }

nav#nav-mobile {position: relative; display: none; z-index:1000;}
nav#nav-mobile ul {display: none; list-style-type: none; font-weight:600; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; border: solid 3px rgba(45,116,167,1.00); background-color: #ffffff; color:rgba(45,116,167,1.00);}
nav#nav-mobile li { display: block; padding: 3px 0; margin: 0 3px; border-bottom: solid 1px rgba(45,116,167,1.00);}
nav#nav-mobile li:last-child {border-bottom: none; }
nav#nav-mobile a {font-size:1.2em; display: block; color:rgba(45,116,167,1.00); padding: 10px 30px;}
nav#nav-mobile a:hover { background-color:rgba(77,139,107,.70); color: #fff; }



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

@media all and (max-width:1440px) {
.medium-pic {float:right; width:30%; height:100%; margin-left:20px; margin-top: 10px; margin-right:30px;}
.onnext {flex-basis: 33%;}
.last .third {display:none;}
.archive {width:25%; height:220px;}
.music-school {flex-basis: 33%;}
.ayo-pic {float:right; width:60%; height:100%; margin-left:20px; margin-top: 10px; margin-right:30px;}

@media all and (max-width: 1000px) {
#main {box-shadow: none;}
      .feature-pic {float:left; width:30%; height:100%;margin-right:10px;}
.small-pic {float:right; width:50%; height:100%; margin-left:10px; margin-top: 10px; margin-right:10px;}
.medium-pic {float:right; width:40%; height:100%;margin-left:20px; margin-top: 10px; margin-right:30px;}
.hero-front-pic {float:right; width:40%; height:100%; margin-left:20px; margin-top: 10px; margin-right:30px;}
.logo {float: none; text-align: center; margin: 20px auto 40px auto;}
#artslab {float: none; text-align: center; margin: 20px auto 40px auto;}
.archive {flex-basis: 25%;}
.heading {margin: .5em 0 .5em 0;padding: 0 0.75em 0em 0;}
.onnext {flex-basis:50%;}
.border-last {display: none; }
.music-school {flex-basis: 40%;}
    .last .third {display:none;}
.button { width: 60%; margin-left:0px;}
}

@media all and (max-width: 900px) {	
		#nav-trigger { display: block; z-index: 999;}
nav#nav-main { display: none; }
nav#nav-mobile { display: block; }
	.line {display: none;}
	.last {display:block;}
	}
	
	
@media all and (max-width: 768px) {
.footercontent-menu ul { width: 50%;}
.footercontent-menu p{font-size: 1.1em; color: #fff; }
.medium-pic {float:left; margin-left: 0px; width: 100%;}
.hero-front-pic {float:left; margin-left: 0px; width: 100%;}
    .ayo-pic {float:left; margin-left: 0px; width: 100%;}
.hero-front-pic {float:left; margin-left: 0px; width: 100%;}
.thanks {width:100%;}
.seating {float:left; margin-left: 0px;width: 100%;}
.event {width:49%; height:100%;}
.valley {width:28%;height:360px;}
.brenton-langbein-pic {width:30%; height:100%;}
.large-pic {float:left; width:100%; height:100%;margin-left:0px;}
.double-image {float:left; margin-left: 0px; width: 100%;}
.music-school {flex-basis: 50%;}
.multiple-video {float: left; width:100%; height: 250px; background-color: #000000; margin-top:5px; padding:0%; margin-bottom:5px; }
}

@media all and (max-width:660px) {
    .feature-pic {float:left; width:100%; height:100%;margin-right:0px;}
.small-pic {float:left; width: 100%; margin: 0; }
.double-video {float: left; width:100%; height: 250px; background-color: #000000; margin-top:5px; padding:0%; margin-bottom:5px; }
.footercontent {padding:5px;}
.wrap { display: block;  margin-bottom:20px;}
.address {float:left; width:100%; text-align: center; padding-left: 0px;Padding-top:20px;  border-left: none;margin-bottom:30px;}
.bac-logo {float:none; text-align: center; margin: 0 auto 0px auto;}
	.music-school {flex-basis: 100%;}
		.onnext {flex-basis: 100%;}
    .footer-menu {flex-direction: column; }
}

	
	
}	
@media all and (max-width: 600px) {
.archive {flex-basis: 33%;}
.single-video {height: 300px;}
.button {width: 100%; margin-left:0px; }
body {font-size:1.3em; line-height:1.6em; font-weight:300;}
.container {width: 100%; }
.footer-address {width: 100%;}
.footer-menu {width: 100%;}
.error {width:80%;}
.events-list {display:none;}
.rslides, .banner, .new-performance {display: none;} 
.example-image{width:6rem;}
.contact, .enews {width:100%;}
form {max-width: 100%; float:left;}
.map {width:100%;max-height:400px;}
iframe {max-height:400px;}
.medium-pic {max-width: 100%; height:100%;}
.double-video {float: left; width:100%; height: 250px; background-color: #000000; margin-top:5px; padding:0%; margin-bottom:5px; }
.footercontent-menu ul { width: 100%;}

}

@media all and (max-width: 470px){
	body {font-size:16px;}
.event-photo-gallery {width:100%; }
.single-video {height: 250px;}
form {  max-width: 100%;}
.second {display:none;}
body {font-size:1.0em; line-height:1.7em;}
.article {width:98%; padding:2%;}
.event {width:100%; height:100%;}
.centre-text {width: 90%;padding:5px; }
	h2 {}
.main-pic {width:100%; height:100%; float:left; margin-left: 0px;}
.thanks-pic {display:block;width: 100%; height:100%;}
.event-hero-pic {float: left; width:100%; height:100%;margin-top: 5px; margin-left:0px;}
.double-video {float: left; width:100%; height: 250px; background-color: #000000; margin-top:5px; padding:0%; margin-bottom:5px; }
.feature-pic {width:100%; height:100%;margin-right:0px;}
.archive {flex-basis: 50%;}
}

@media all and (max-width: 310px) {
.logo {	background-repeat: no-repeat;width: 98%; background-size:contain; margin-top:20px;	height:100%; top:-330px;}
.brenton-langbein-pic {float:left; width:100%; height:100%; margin-right:0px;}

}