@charset "utf-8";
/* CSS Document */

body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif; /* Typefaces from Google Fonts */
	font-size: 125%;
	font-weight: 500;
	color: white;
}

@media (max-width: 720px) {
	body {
		font-size: 4vw;
	}
}

#outer-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	text-shadow: 2px 2px 4px black;
}

#nav-menu {
	position: absolute;
	z-index: 10;
	top: 6%;
	left: 0; right: 0;
	text-align: center;
	text-shadow: 2px 2px 4px black;
}

#nav-menu h1 {
	font-weight: 500;
	font-size: 250%;
	margin-bottom: 0.6em;
}
#nav-menu nav {
	font-size: 120%;
	cursor: default;
}
#nav-menu nav a {
	display: inline-block;
	width: 17%;
	text-decoration: inherit;
	color: inherit;
	position: relative;
	vertical-align: middle;
}
#nav-menu nav a + a {
	margin-left: 2%;
}
#nav-menu nav a:hover {
	font-weight: 600;
}

#nav-left, #nav-right {
	position: absolute;
	top: 0;
	bottom: 0;
	font-size: 340%;
	font-weight: 600;
	z-index: 12;
	padding: 20px;
	line-height: 0;
}
#nav-left {
	left: 0;
}
#nav-right {
	right: 0;
}

#nav-left *, #nav-right * {
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 0;
	cursor: pointer;
	opacity: 0.333;
	transition: opacity 0.333s;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#nav-left *:hover, #nav-right *:hover {
	opacity: 1;
}

#nav-indicator {
	position: absolute;
	z-index: 10;
	bottom: 6%;
	left: 0; right: 0;
	font-size: 250%;
	text-align: center;
	line-height: 0;
	cursor: default;
}

#nav-indicator * {
	opacity: 0.333;
	transition: opacity 0.5s;
	cursor: pointer;
}

#slides-container {
	width: 400%; /*  100% × total number of slides  */
	height: 100%;
	position: relative;
	transition: left 0.75s ease-in-out;
}

*.slide {
	width: 25%; /*  100% ÷ total number of slides  */
	height: 100%;
	float: left;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
}

#home {
	background-image: url('img/slide1.jpg');
}
#what {
	background-image: url('img/slide2.jpg');
}
#which {
	background-image: url('img/slide3.jpg');
}
#when {
	background-image: url('img/slide4.jpg');
}

*.slide-content {
	/* just centre the slide contents - 
		you could do more if you want */
	position: relative;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

/*
	each slide is revealed by progressively
	offsetting the container one full slide to the left
*/
#slides-container.slide1 {
	left: 0;
}
#slides-container.slide2 {
	left: -100%;
}
#slides-container.slide3 {
	left: -200%;
}
#slides-container.slide4 {
	left: -300%;
}

/*
	This next bit looks weird, right?
	It's not that complicated once you break it down.
	There's four selectors here, one for each bullet
	point. To take the first selector as an example:
	
	  *.slide1 refers to the class name currently
	      applied to the slide-container.
	  ~ is the 'general sibling selector'. It's like
	      the + selector but the elements need not
		  be right next to each other.
	  #nav-indicator is our container for the bullets
	      - it has the same parent as slide-container.
	  > is the direct descendant selector you should know
	  *:nth-child(1) refers to item number 'n' in the parent
	      - in this case the first item, i.e. the 1st bullet
	
	So, the rules will be applied to the 1st bullet point in
	the div provided the slider element has the correct
	class applied. This is repeated for each bullet.
*/
*.slide1 ~ #nav-indicator > *:nth-child(1),
*.slide2 ~ #nav-indicator > *:nth-child(2),
*.slide3 ~ #nav-indicator > *:nth-child(3),
*.slide4 ~ #nav-indicator > *:nth-child(4)
{
	opacity: 1;
}


a {
	color: inherit;
	text-decoration: inherit;
	/*don't do this*/
}