body {  /*-- gray gradient background --*/
	/*background: url(img/gradient.svg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; */
	background-color:gray;
	font-family: "Arial";
	font-weight: normal;
	color: white;
}

#loading  {
	position:fixed;
	visibility:visible;
	z-index:998;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:white;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

#loadingVideo {
	position:fixed;
	visibility:visible;
	z-index:999;
	top:45%;
	left:50%;
	margin:-80px 0 0 -144px;
	height:160px;
	width:280px;
	background-color:white;
}

header{
	width:100%;
	height:75px;
	background-color:white;
	border-top: 5px solid #FF6633;
	position:fixed;
	top:0;
	left:0;
	z-index:150;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.headerHide {
	top:-80px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

header img{ /*-- YWCA100 logo and link to homepage--*/
	height:100%;
}

.socialIcon { /*-- Applies to social media icons on the right side of the header --*/
	float: right;
	height:32px;
	width: 32px;
	padding: 40px 5px 2px 5px;
}

#wrapper {
	width:100%;
	padding:0 0 30px 0;
	margin:0 0 0 0;
	z-index:50;
	background-color:gray;
}

#top { /*-- Gives space to the top of the page so that the header doesn't initially cover it up --*/
	padding-top: 77px;
}

.slice{ /*-- this is the div that goes accross the mobile screen --*/
	width:100%;
}

/*-- Clearfix .slice so we can display "+" and make sure the last images of the year align --*/
.slice:after {
	content: "";
	display: table;
	clear: both;
}

.slice {
	color:white;
	text-shadow:none;
}

/*-- Use :before to add a "+". ":after" is taken by clearfix --*/
.slice div:before, .fullWidth:before {
	content: "+";
	position:absolute;
	z-index:98; 
	right: 10px;
	bottom: 0;
	pointer-events: none;
	font-size: 2.5em;
}

.orange:before {
	color:#FF6633;
}

.slice div { /*-- Hides the excess of the wider image so as to allow for both images in a .slice to have the same height. --*/
	overflow: hidden;
	position: relative;
}

.slice div img{
	max-width:100%;
}

.slice p{ /*-- This p is the displayed year. This is in here for the auto-height Javascript --*/
	height:auto;
}

.yearLabel{ /*-- This is the title of each decade. --*/
	font-size: 1.6em;
	color:#FFFFFF;
	margin: 0;
	padding-bottom:0;
}

.fullWidth{ /*-- Div that spans 100% of the screen --*/
	width:100%;
	padding-top:0;
	padding-bottom: .7%;
	position: relative;
}

.fullWidth img{ /*-- This is an img that spans 100% of the screen. --*/
	float:left;
	max-width: 100%; 
}

.r30percent{ /*-- Div spans 30% from right of screen --*/
	float:right;
	width:29%;
	padding-top: 1%; 
	padding-left:0;
	padding-bottom: 0;
	
}

.l70percent{ /*-- Div spans 70% from left of screen --*/
	float:left;
	width: 69%;
	padding-top: 1%; 
	padding-bottom: 0;
}

.r70percent{ /*-- Divspans 70% from right of screen --*/
	float:right;
	width: 69%;
	padding-top: 1%; 
	padding-left:0;
	padding-bottom: 0;
}

.l30percent{ /*-- Div spans 30% from left of screen --*/
	float:left;
	width: 29%;
	padding-top: 1%; 
	padding-bottom: 0;
}

.fancybox-skin { /*-- fancybox styles --*/
  background-color:rgba(71,71,71,.8) !important; /* or whatever */
}