html.fssopen, html.fssopen body{ /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  margin: 0;
	overflow: hidden;
}

section.dd_fullscreenslider{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
  z-index: 2000;
	font-size: 16px; /* base font size */
	visibility: visible;
	overflow: hidden;
}

div.slidewrapper{ /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
	-moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

ul.fssnav{ /* UL list dynamically added by script for Slider navigation */
  list-style: none;
  display: none;
  padding: 0;
  margin: 0;
	position: fixed;
	top: 50%; /* vertically center menu */
	right: 20px; /* distance from right edge of screen */
	transform: translateY(-50%); /* vertically center menu */
}

ul.fssnav li{
  margin-bottom: 15px;
}

ul.fssnav li a{
  text-decoration: none;
  border: 5px solid white; /* border color of nav links */
  border-radius: 50%;
  width: 10px; /* dimensions of nav links */
  height: 10px;
  display: block;
	position: relative;
  text-indent: -500px;
	outline: none;
  overflow: hidden;
}

ul.fssnav li a::after{ /* create "fill" element inside A */
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  background: white; /* color of "fill" element */
  transition: top 0.5s; /* transition for "fill up" effect */
}

ul.fssnav li.selected a::after{
  top: 0; /* fill up selected A element from bottom to top */
}


section.dd_fullscreenslider article.slide{ /* CSS for each slide */
  width: 100%;
  height: 100%;
	display: block;
	font-family: 'Lato', sans-serif; /* Use google font */
	font-size: 1.2em;
	line-height: 2em;
	color: white;
	overflow: hidden;
  -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
  -moz-box-sizing: border-box;
	z-index: 1000;
	-webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
}

section.dd_fullscreenslider article.slide h2{ /* H2 Header inside each slide */
	font-size: 3em;
	margin: 0;
	line-height: 1.1em;
	letter-spacing: 3px;
}

section.dd_fullscreenslider article.slide .scrollable{ /* Assign this class to elements within a slide that should be scrollable */
	overflow: auto;
}

section.dd_fullscreenslider article.slide a{
	color: yellow;
}

section.dd_fullscreenslider article.slide:nth-of-type(2){ /* 2nd demo slide bgcolor */
	background: #22AFE2;
}

section.dd_fullscreenslider article.slide:nth-of-type(3){ /* 3rd demo slide bgcolor */
	background: #88D332;
}

section.dd_fullscreenslider article.slide:nth-of-type(4){ /* 4th demo slide bgcolor */
	background: #A36400;
}

section.dd_fullscreenslider div.closex{ /* Large x close button inside Slider */
  width: 50px;
  height: 50px;
	overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
	text-indent: -1000px;
	opacity: 0.8;
  z-index: 1001;
  top: 5px;
  right: 3px;
}

section.dd_fullscreenslider div.closex::before, section.dd_fullscreenslider div.closex::after{ /* render large x inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: white; /* color of x button */
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

section.dd_fullscreenslider div.closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}