/*--------------------------------------------------------------
!!!!! IMPORTANT NOTES !!!!!!!!!!

Breakpoints 

phones: max-width: 599px
lg phones and small tablets: max-width: 767px
tablets: max-width: 992px
laptops & desktops: min-width: 993px;

#e40707 = link colours
#cd1d1d = button background
#fa7c7c = button border
#622 = button border

*/


  /* Navigation
--------------------------------------------- */

.fa-bars {display: inline-block !important; padding: 0 1rem 0 0; }


#menubar {display: flex; flex-wrap: wrap; width: 100%; justify-content: flex-end;} 
#menubar #searchform {max-width: 40%;  margin: -3em 0 1em 0;}
		form.search-form {width: 100%;}

		
@media screen and (max-width: 767px) {
	#menubar #searchform {max-width: 100%; width: 100%;}
	form.search-form {display: flex; flex-wrap: wrap;}
	form.search-form input.search-field {width: 100%;}
	
}


.megamenu-container {position: relative; width: 92%; margin: -3px 4% 0 4% !important; z-index: 10;
 text-align: left;}
button.menu-toggle {width: 100%; background-color: #f5f5f5; color: #AD0505; border: none; 
		padding: 1em; 
		margin: 0;
		-webkit-box-shadow: 2px 2px 2px 0px #cfcfcf;
    	-moz-box-shadow: 2px 2px 2px 0px #cfcfcf;
   		box-shadow: 2px 2px 2px 0px #cfcfcf;
		flex-basis: 100; text-shadow: none;
		cursor: grab;
		text-decoration: underline; text-underline-offset: 2px; 
		position: relative;
		z-index: 100;}

button.menu-toggle:hover {background-color: #f1f1f1;
		-webkit-box-shadow: 2px 2px 2px 0px #bfbfbf;
    	-moz-box-shadow: 2px 2px 2px 0px #bfbfbf;
   		box-shadow: 2px 2px 2px 0px #bfbfbf; }
button.menu-toggle:active {background-color: #f1f1f1; 
		-webkit-box-shadow: -2px -2px 2px 0px #bfbfbf;
    	-moz-box-shadow: -2px -2px 2px 0px #bfbfbf;
   		box-shadow: -2px -2px 2px 0px #bfbfbf; }


nav.main-navigation {display: block; width: 100%; font-size: 85%; text-align: left; border: solid 0px transparent; cursor:grab; }
nav.main-navigation.toggled div { display: flex; flex-wrap: wrap; }
nav.main-navigation.toggled ul { display: flex;  }
nav.main-navigation ul {list-style: none; margin: 0; padding-left: 0;}
nav.main-navigation div {display: none; list-style: none; margin: 0; padding-left: 0;}
.menu-other-pages-container {box-shadow: 3px 3px 3px #cfcfcf}
.menu-archive-container ul.menu ul li.menu-more-button a:link, .menu-archive-container ul.menu ul li.menu-more-button a:active, .menu-archive-container ul.menu ul li.menu-more-button a:hover, .menu-archive-container ul.menu ul li.menu-more-button a:visited {
    color: #fff; }
.menu-archive-container ul.menu>li ul.sub-menu li.menu-more-button {
	border: 1px solid;
	border-color: #fa7c7c #622 #622 #fa7c7c;
	border-radius: 3px;
	background: #cd1d1d;
	box-shadow: 
		inset 0 -5px 12px rgba(0, 0, 0, 0.05);
	color: #fff;
	font-size: 14px;
	font-size: 1rem;

        font-weight: normal;
        font-family: Lato;
	line-height: 1;
        /*text-transform: uppercase;*/
	margin: 1em 0; 
    padding: .6em 1em;
    text-shadow: 0 1px 0 rgba(250, 124, 124, 0.8);
	text-align: center;

	}

/* Exhibition Menu */
/* Also see exhibition.css for more styles */

#exhibition-menu-area h2 {font-size: 1.25rem; font-weight: bold; width: 100%; padding: .5rem 0; margin: 0; }
#exhibition-menu-area h2 a {text-decoration: none;}
#exhibition-menu-area h2 a:hover {text-decoration: underline;}

#exhibition-menu-area {display: flex; flex-wrap: wrap !important; }
.exhibition1 {width: 25%;}
.exhibition2 {width: 25%;}
.exhibition3 {width: 25%;}
.exhibition4 {width: 25%;}

/* Archival Material Menu */
#archival-materials-area {display:flex; flex-wrap: wrap;	
	padding: 1em 1em;
	justify-content: space-between;
	background-color: #eeeeee;
	margin-top: -3px;
	box-shadow: 3px 3px 3px #cfcfcf;
}
#archival-materials-area h2 {font-size: 1.25rem; font-weight: bold; width: 100%; padding: .5rem 0; margin: 0; }

nav.main-navigation.toggled .menu-archive-container ul.menu {display: flex;
 flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; background-color: #eeeeee;}

.menu-archive-container ul.menu>li {display: flex;
		 flex-basis: 12em; flex-grow: 1;  padding: 1em; flex-wrap: wrap;
		font-weight: bold;
		 }
		 .menu-archive-container ul.menu a:link {	text-decoration: none; color: #444;}
		 .menu-archive-container ul.menu a:visited {color: #666;}
		 .menu-archive-container ul.menu a:hover {color: #AD0505;  text-decoration: underline;}
			 
		
.menu-archive-container ul.menu>li ul.sub-menu {display: flex;  flex-wrap: wrap;
		 padding: 1em 0;
		font-weight: normal;
	width: 100%;
}
		
		.menu-archive-container ul.menu ul a:link {	text-decoration: none; color: #AD0505;}
		.menu-archive-container ul.menu ul a:visited {color: #640003;}
		.menu-archive-container ul.menu ul a:hover {text-decoration: underline !important;}

.menu-archive-container ul.menu>li ul.sub-menu li {padding: .25em 0; width: 100%;}

.menu-archival-materials ul.submenu  {display:flex; align-items: space-between;}
	
/* Other Pages Menu */
	
nav.main-navigation.toggled .menu-other-pages-container ul.menu {display: flex;
	flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly;
		 background-color: #f5f5f5; padding: 2em 0 1em 2em;  }


		.menu-other-pages-container ul.menu>li {display: flex;
			padding: 1em; flex-wrap: wrap; width: 33%; min-width: 12em;
		   font-weight: bold;
			}
			
			.menu-other-pages-container ul.menu li.menu-socials {display: flex; }
			.menu-other-pages-container ul.menu>li ul.sub-menu li.menu-social-link {padding: 0 .5em; width: 25%; flex-wrap: none; }
			.menu-other-pages-container ul.menu a:link {	text-decoration: none; color: #444;}
			.menu-other-pages-container ul.menu a:visited {color: #666;}
			.menu-other-pages-container ul.menu a:hover {color: #AD0505;}
				
		   
   .menu-other-pages-container ul.menu>li ul.sub-menu {display: flex;  flex-wrap: wrap;
			padding: 0em 0;
			width: 100%;
		   font-weight: normal;}
		   
		   .menu-other-pages-container ul.menu ul a:link {	text-decoration: none; color: #AD0505;}
		   .menu-other-pages-container ul.menu ul a:visited {color: #640003;}
		   .menu-other-pages-container ul.menu ul a:hover {text-decoration: underline !important;}
   
   .menu-other-pages-container ul.menu>li ul.sub-menu li {padding: .25em 0; margin: 0; width: 100%;}
	
   .menu-other span {height: 0;line-height: 0;}
   .menu-other-pages-container ul.menu>li ul.sub-menu li.menu-news {padding: 0 0 .25em 0; margin: 0; width: 100%;}



   	/* FOOTER Menu */	
   ul#footer {display: flex; flex-wrap: wrap; font-size: .9em; justify-content: center; }
   .footer-nav ul.nav-menu li {display: flex; flex-wrap: wrap; width: auto;}
   
   .footer-archival {background-color: #ededed; padding: .5em !important; border: none; }
   
   .footer-other {background-color: #f9f9f9; padding: .5em !important; margin: 0em; border: none; }
   
   .footer-archival a:link, .footer-other a:link { text-decoration: none;}
   .footer-archival a:hover, .footer-other a:hover { text-decoration: underline;}