/* custom css for home page home.php */

/* 04d - Homepage ----------- (original version of this content taken out of style.css) */

/* bg img */
		#roof_background {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1440px; /*image width */
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			right: 0;
		}
		
		@media screen and (max-width: 1440px){ /*image width */
			#roof_background {
				right: 50%;
				margin-right: -720px; } /*half image width */
		}
/* end of bg img */

.not_front_page {
  display: none !important;
}

#about,
#involved,
#presence,
#news {
	clear: both;
	overflow: hidden;
}

#about,
#news {
	background-color: #222; /* rgba(18,18,18,0.7); */
}

#about,
#news {
	padding: 8px 0; /* was 64px 0; */
	padding: 0.5rem 0; /* was 4rem 0; */
}

#involved,
#presence {
	padding: 64px 0 16px;
	padding: 4rem 0 1rem;
}

#footer {
  display: none;
}

#header_wrapper,
#header_overlay {
  display: none;
}

/* add positioning and size for this block for front page */
#content-sidebar-wrap {
  position: absolute;
  top: 50%;
  width: 100%;
}

/* we're including the nav menu in here too */
#nav {
  background-color: #222;
  width: 100%;
}

/* make menu narrower */
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
  padding: 8px 15px 2px 15px !important; /* basic.css of Ubermenu has 12px 15px */
  padding: 0.5rem 15px 0.125rem 15px !important;
}

/* reduce space in widget images in drop-down menus */
#megaMenu .wpmega-widgetarea ul.um-sidebar li.widget {
  margin-bottom: 0;
}
#megaMenu .wpmega-widgetarea ul.wpmega-postlist li {
  max-height: 48px;
  max-height: 3rem;
  overflow: hidden;
}

/* stop it jumping when full width is full viewport width -- only on front page, so why? */
#megaMenu.wpmega-nojs li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu.megaFullWidthSubs li.menu-item.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
#megaMenu li.menu-item.ss-nav-menu-mega.ss-nav-menu-mega-fullWidth ul.sub-menu.sub-menu-1 {
  /* Menu Item option */
  left: 0.5%;
  width: 98%;
  /* I greyed this to change it 
  width: 100%;
  left: -1px;
  /* this was greyed in basic.css
  left:0px; 
	box-sizing:border-box;*/
}


/* make featured posts, etc show horizontally instead of vertically */
#about div.post,
#about div.page,
#about div.widget_sp_image,
#news div.post,
#news div.page,
#news div.widget_sp_image {
	float: left;
	width: 18%;
	margin: 0 1%;
}

#about img,
#news img {
  width: 100% !important;
  padding-right: 4px; 
  padding-right: 0.25rem;
} 

/* we don't need to display titles unless the screen is so small that the menu is hidden */
#about .page h2,
#about .post h2,
#news .page h2,
#news .post h2 {
  display: none;
  white-space: nowrap;
  overflow: hidden;
}

/* we don't want to display widget titles at all */
#about h4.widgettitle,
#news h4.widgettitle {
  display: none;
}

/* remove excess bottom padding from featured items in the about/news bars */
#about .entry,
#about .single .entry,
#about .page .post-entry,
#news .entry,
#news .single .entry,
#news .page .post-entry {
  padding: 0 0 4px 0;
  padding: 0 0 0.5rem 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {

  /* let images start stacking once ubermenu has changed to mobile version */
  #about div.post,
  #about div.page,
  #about div.widget_sp_image,
  #news div.post,
  #news div.page,
  #news div.widget_sp_image {
    width: 46%;
    margin: 0 2%;
  }
  
  /* and centre images in their containers now there are no menu items to line up with */
  #about img,
  #news img {
    margin: 4px auto;
    margin: 0.5rem auto;
  }
  
  /* display titles when the menu is hidden */
  #about .page h2,
  #about .post h2,
  #news .page h2,
  #news .post h2 {
    display: block;
  }

}

@media only screen and (max-width: 390px) {

  /* one photo per row for very small screens */
  #about div.post,
  #about div.page,
  #about div.widget_sp_image,
  #news div.post,
  #news div.page,
  #news div.widget_sp_image {
    width: 96%;
    margin: 0 2%;
  }
  
}