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: 10px;

}


ul.fssnav li a{

  text-decoration: none;
  border: 3px solid black;
 /* border color of nav links */
  border-radius: 50%;
  width: 12px;
 /* dimensions of nav links */
  height: 12px;
  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: 1em;
	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: #23579A;
	-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: #71B832;
}

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

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

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

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

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

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

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

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

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

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

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