/*
Theme Name: 100 Women PEI Theme
Description: Custom designed theme specially for 100 Women PEI
Version: 0.9
Author: Rob Williams, Results Marketing & Advertising <web@resultsinc.ca>
Tags: custom template
*/

/* Default Styles */

html, body {
    width:                  100%;
    font-family:            'Lato', 'Arial', sans-serif;
    line-height:            1.4em;
    background:             white;
}
body { height: 100%; }

p { padding: 0 0 1em 0; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.textleft { text-align: left; }
.textcenter { text-align: center; }
.textright { text-align: right; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }

img.centered {
	display: block;
	margin: 0 auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 1em 1em;
	display: inline;
}

img.alignleft {
	display: inline;
}

img.aligncenter {
    display: block;
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { margin: 0 auto; }


/* Basic styles */

a { text-decoration: none; color: #50a19b; font-weight: 800; transition: 0.5s all; display: inline-block; position: relative; z-index: 2; }
a:after { content: ''; position: absolute; bottom: -1px; left: -0.25rem; width: calc( 100% + 0.5rem ); height: 2px; background: #4b4b4b; transform: scaleX(0); transition: 0.5s all; }
a:hover { color: #4b4b4b; }
a:hover:after { transform: scaleX(1); }

h1 {}
h2 { font-size: 3em; margin-bottom: 1rem; line-height: 1.6em; }
h3 { font-size: 1.5em; margin-bottom: 0.75rem; line-height: 1.4em; }
h4 { font-size: 1.25em; margin-bottom: 0.5rem; }

ul + h3 { margin-top: 1rem; }

.margin_top { margin-top: 3rem; }
.margin_bottom { margin-bottom: 3rem; }

header { background: #4b4b4b; padding: 2rem 0; position: relative; }
footer { background: #4a4a4a; color: white; font-size: 0.8em; padding: 1rem 0; position: relative; z-index: 3; }
footer p { padding: 0; margin: 0; text-align: center; }
.main { display: flex; align-items: stretch; gap: 2rem; }

nav { flex-basis: 15%; background: #84c9c4; color: #4b4b4b; padding: 2rem 1rem; box-shadow: rgba(0,0,0,0.5) 0 0 10px; }
nav a { color: #4b4b4b; font-weight: bold; transition: 0.5s all; display: block; padding: 0.25rem 1rem; position: relative; z-index: 2; }
nav a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #4b4b4b; transform: scaleX(0); transform-origin: left center; transition: 0.5s all; z-index: -1; }
nav a:after { display: none; }
nav a:hover { color: white; }
nav a:hover:before { transform: scaleX(1); }

nav figure { width: fit-content !important; text-align: center; }
nav figure a:before { display: none; }
nav img { max-width: 70% !important; }
main { flex-basis: 85%; padding: 2rem; }

.header_bar { list-style: none outside; text-align: center; }
.header_bar img { max-width: 90% !important; }
.sidebar { list-style: none outside; }
.sidebar li { margin-bottom: 0.5rem; }
.sidebar ul { list-style: none outside; margin-bottom: 3rem; }
.sidebar #block-9 p { margin: 3rem 0 0; padding-bottom: 0; }
.sidebar #block-12 { margin: 5rem 0 0; padding: 2rem 0; background: #4a4a4a; }

.footer_bar { list-style: none outside;}

main ul { list-style: disc outside; padding-left: 2rem; }
main ul li { margin-bottom: 0.75rem; }

.next_meeting { background: #bdf3ef; border: 2px #4b4b4b solid; border-left: 0; border-right: 0; padding: 0.5rem 1rem; width: 100%; position: relative; left: -1rem; text-align: center; box-shadow: #0000002f 0 5px 3px; }
.next_meeting p:last-child { margin: 0; padding: 0; }
.next_meeting a { display: inline-block; padding: 0; margin: 0 0 0 0.25rem; color: #4b4b4b !important; }
.next_meeting a:before { display: none; }
.next_meeting a:after { display: block; }

#mobile_menu_icon { display: none; }

@media screen and ( max-width: 1300px ) {
	nav { flex-basis: 20%; }
	main { flex-basis: 80%; }
}

@media screen and ( max-width: 1024px ) {
	nav { flex-basis: 25%; }
	main { flex-basis: 75%; }
}

@media screen and ( max-width: 850px ) {
	nav { flex-basis: 35%; }
	main { flex-basis: 65%; }
}

@media screen and ( max-width: 720px ) {
	#mobile_menu_icon { display: block; position: absolute; top: 0.5rem; right: 0.5rem; color: white; z-index: 10; }
	#mobile_menu_icon span { font-size: 48px; height: 48px; width: 48px; }
	nav { position: absolute; left: -100%; width: 80%; z-index: 20; transition: 0.5s all; }
	main { flex-basis: 100%; }
	.menu_visible nav { left: 0; }
	h2 { font-size: 1.5em; line-height: 1.4em; }

}