/* DEFAULT LAYOUT - SINGLE COLUMN */

.inner {
	width: 34rem;
}

#banner {
	width :90%;
	margin: 0 auto;
	
}

header .inner {
	position: relative;
	display: flex;
	justify-content: flex-end;
	background-color: lightgrey;
}

main {
	max-width: 34rem;
}


.sidebar {
	padding: 1em;
}

nav.primary {
	display: none;
}

footer .inner {
	padding: 2em 1em;
}

header .inner a {
	width: 10%;
}

.tabs {
	width: 25%;
	margin: 2em;
}

.tabs p {
	margin: 0 auto;
	text-align: center;
}





#menu-button {
    font-size: 2em;
    color: black;
    /* background-color: #d80000; */
    cursor: pointer;
	position: absolute;
	left: 0;

}

#about-main {
	display: flex;
}

#contact-info {
	display: flex;
	justify-content: space-evenly;
}

#contact-info ul {
	list-style-type: none;
}

.tab-wrap {
	margin: 1em;
	display: flex;
	justify-content: space-evenly;
}

.info {
	width: 80%;
	display: flex;
	justify-content: center;
	margin: 4em auto;
}

.info p {
	width: 100%;
	margin: auto;
}

#footer-links.lower-inner a {
	width: 6em;
	color: black;
	font-family: 'Asap', sans-serif;
	font-size: 1.25em;
	margin: 0.75em;
	display: flex;
	justify-content: space-evenly;
	text-decoration: none;
	transition: 0.25s;
}



#footer-links.lower-inner a:hover {
	color: white;
}


.fb {
	width: 35%;
	height: 100%;
	padding: 0.5em;

}
/* Full-width coloured header and footer */
header {
    background-color: lightgrey;
    color: black;
}

footer {
	background-color: lightgrey;
}

#lower-footer {
	padding: 1em;
	background-color: grey;
}

.lower-inner {
	width: 70%;
	margin: 0 auto;
}

.lower-inner p {
	text-align: center;
}






/* SMALL LAYOUT */


@media screen and (max-width: 52rem) {

#menu-button {
	left: 0;
	margin-top: 0.75em;
	font-size: 1em;
}

#logo {
	margin-right: 1em;
	width: 90%;
}

.page-head {
	
	font-size: 1.5em;
}

.inner {
	width: 90%;
	margin: 0 auto;
}

#about-main {
	flex-direction: column;
}

#banner {
	width :100%;
	margin: 0 auto;
	padding-bottom: 0.5em;
	padding-top: 0.5em; 
}



#about-main img {
	margin: 1em auto; 
}

#contact-info {
	flex-direction: column;
	text-align: center;
	margin: 1em auto;
}

.page-head {
	width: 100%;
	margin: 0 auto;
}

#content.inner main{
	margin: 0 auto;
}


.info {
	flex-direction: column;
}



.info img {
	width: 80%;
	margin: 1em auto;
}

#footer-links.inner {
	flex-direction: column;
}

.lower-inner {
	width: 100%;
	font-size: 0.75em;
	text-align: center;
}

#menu-button{
	left: 0.5em;
	top: 0.5em;
}

.tab-wrap {
	flex-direction: column;

}

.tabs {
	width: 95%;
	margin: 1em auto;
}
	
.tabs h1 {
	width: 50%;
}


#footer-links.lower-inner {
	flex-direction: column;
	width:50%;

}

#footer-links.lower-inner a {
	margin: 0.5em auto;
	font-size: 1.25em;
}


}



/* MEDIUM LAYOUT */
/* A two-column layout with a left-hand sidebar column and a central main column. The two sidebars are combined into one. */

@media screen and (min-width: 52rem) {
	
	/* Header is laid out horizontally */
	header .inner {
	    flex-direction: row;
	}
	
	#site-title, #tagline {
		text-align: left;
	}
	
	#site-title {
		font-size: 3rem;
    }
	/* @end header layout */

	/* Always make the footer stick to the bottom of the window */
	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
		

	

	#content {
		flex-grow: 1;
	}		

	#menu-button  {
		left: 0;
		top: 1em;
	}

	/* @end sticky footer */

	.inner {
		padding: 0;
		width: 52rem; /* Override the width set by the smaller layout */
		margin: 0 auto;
	}

	/* Create a two-column, two-row grid. The two asides will be put in the first column, with sidebar-one in the first row and sidebar-two in the second row. The height of the first row will be set by the content of sidebar-one. The height of the second row will be flexible, so that it can extend down if needed. The main element will be in the second column and will span the rows created by the asides. */
	#content {

	}

	main {
		/* Positioned in second column, spanning first two rows */		
		display: flex;
		flex-direction: column;
        max-width: 100%;
	}

	/* Left column, combining the nav and two sidebars */ 
	nav, #sidebar-one, #sidebar-two {
		grid-column-start: 1;
	}
    
    nav {
        grid-row-start: 1;
        padding: 1em;
        background-color: #80a1c1;
    }
	
	#sidebar-one {
		grid-row-start: 2;
	}
	
	#sidebar-two {
		grid-row-start: 3;
	}



	.sidebar > div {
		padding-left: 0;
		padding-right: 0;
	}

	nav.primary, form#SearchForm_SearchForm {
		display: none;
	}
	
	form#SearchForm_SearchForm {
		margin-top: 2rem;
	}
	

	header h1 {
		font-size: 2rem;
	}

	aside input[type=text], aside input[type=email], aside textarea {
		width: 100%;
	}
	
	/* Coloured header and footer */
	
	header, footer {
		background-color: transparent;
	}

	/* For a full-width coloured header, change this selector to just the header: */	
	header {   
		background-color: lightgrey;
		box-shadow: 0px 4px rgba(0, 0, 0, 0.3);
		position: relative;
	}
	
	/* For a full-width coloured footer, change this selector to just the footer: */
	footer {
		background-color: lightgrey;
	}

	
	
}


/* LARGE LAYOUT */

/* A three-column layout with a left-hand sidebar column, a central main column, and a right-hand sidebar column. */


@media screen and (min-width: 82rem) {	

	.inner {
		width: 80rem;
	}
	
	#content {
		grid-template-columns: 1fr 2fr 1fr; /* Column widths */
		/*display: flex;
		flex-direction: row;*/
	}
    
    #sidebar-two {
        grid-column-start: 3;
        grid-row-start: 1;
        grid-row-end: span 2;
	}
	
	#menu-button {
		top: 1.4em;
		left: 0;
	}

	header {
		background-color: lightgray;
	}

	footer {
		background-color: lightgray;
	}
}