html.fssopen, html.fssopen 
body{ 
/* class added to HTML element when full screen slider is open to hide potential body scrollbars */

	width: 550px;

	height: 100%;

	top: 0;
	left: 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;
  padding: 0;
  margin: 0;

	position: fixed;

	top: 50%;
 /* vertically center menu */

	right: 10px; 
/* 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: 14px;
 /* dimensions of nav links */

  height: 14px;
  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 */

	padding: 20px;
	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;

  box-sizing: border-box;

	z-index: 1000;
  background: #f6f6f6;

	-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: #f6f6f6;

}


section.dd_fullscreenslider article.slide:nth-of-type(2){
 /* 2nd demo slide bgcolor */

	background: #f6f6f6;

}


section.dd_fullscreenslider article.slide:nth-of-type(3){
 /* 3rd demo slide bgcolor */

	background: #f6f6f6;

}


section.dd_fullscreenslider article.slide:nth-of-type(4){
 /* 4th demo slide bgcolor */

	background: #f6f6f6;

}



section.dd_fullscreenslider article.slide:nth-of-type(5){
 /* 5th demo slide bgcolor */

	background: #f6f6f6;

}



section.dd_fullscreenslider article.slide:nth-of-type(6){
 /* 6th demo slide bgcolor */

	background: #f6f6f6;

}


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);

}