/* SLIDESHOW STYLES */
/* essential styles to make the slideshow work */
/* Div containing all slides; needed to make tooltips work */

/* Div to contain and show/hide the slide overlay text */
.show
{
	overflow: hidden;
	position: relative;
}

.center
{
	margin: auto;
	text-align: center;
}


/* Div for play, pause, and skip buttons */

div.controlButtons
{
	margin: auto;
	width: 500px;
	height: 70px;
	padding: 0px 20px;
	margin-top: 6px;
	position: relative;
	margin-top: -60px;
}

/* Div containing the actual slides */

div.slideContainer
{
	margin: auto;
	width: 608px;
	height: 460px;
	background-color: #cbcfcf;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* slide markup */

#slides
{
	position: relative;
	height: 412px;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.slide
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	-webkit-transition: opacity 2s;
	-moz-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
}

.showing
{
	opacity: 1;
	z-index: 2;
}

.slide
{
	font-size: 1em;
	padding: 4px;
	box-sizing: border-box;
	/* background: #333;
	color: #fff; */
}

/* slide backgrounds */


/* purple */
.slide:nth-of-type(1)
{
	background: #e47aff;
	background: -webkit-linear-gradient(#e47aff, #cbcfcf);
	background: -o-linear-gradient(#e47aff, #cbcfcf);
	background: -moz-linear-gradient(#e47aff, #cbcfcf);
	background: linear-gradient(#e47aff, #cbcfcf);
}


/* yellow */
.slide:nth-of-type(2)
{
	background: #f8e96b;
	background: -webkit-linear-gradient(#f8e96b, #cbcfcf);
	background: -o-linear-gradient(#f8e96b, #cbcfcf);
	background: -moz-linear-gradient(#f8e96b, #cbcfcf);
	background: linear-gradient(#f8e96b, #cbcfcf);
}

/* pink */
.slide:nth-of-type(3)
{
	background: #f0bad4;
	background: -webkit-linear-gradient(#f0bad4, #cbcfcf);
	background: -o-linear-gradient(#f0bad4, #cbcfcf);
	background: -moz-linear-gradient(#f0bad4, #cbcfcf);
	background: linear-gradient(#f0bad4, #cbcfcf);
}

/* black */
.slide:nth-of-type(4)
{
	background: #000000;
	background: -webkit-linear-gradient(#000000 , #cbcfcf);
	background: -o-linear-gradient(#000000 , #cbcfcf);
	background: -moz-linear-gradient(#000000 , #cbcfcf);
	background: linear-gradient(#000000 , #cbcfcf);
}

/* orange */
.slide:nth-of-type(5)
{
	background: #ec511b;
	background: -webkit-linear-gradient(#ec511b , #cbcfcf);
	background: -o-linear-gradient(#ec511b , #cbcfcf);
	background: -moz-linear-gradient(#ec511b , #cbcfcf);
	background: linear-gradient(#ec511b , #cbcfcf);
}

/* silver */
.slide:nth-of-type(6)
{
	background: #000000;
	background: -webkit-linear-gradient(#d5d5d5 , #cbcfcf);
	background: -o-linear-gradient(#d5d5d5 , #cbcfcf);
	background: -moz-linear-gradient(#d5d5d5 , #cbcfcf);
	background: linear-gradient(#d5d5d5 , #cbcfcf);
}

/* blue */
.slide:nth-of-type(7)
{
	background: #01b3e3;
	background: -webkit-linear-gradient(#01b3e3, #cbcfcf);
	background: -o-linear-gradient(#01b3e3, #cbcfcf);
	background: -moz-linear-gradient(#01b3e3, #cbcfcf);
	background: linear-gradient(#01b3e3, #cbcfcf);
}

/* green */
.slide:nth-of-type(8)
{
	background: #00db7a;
	background: -webkit-linear-gradient(#00db7a, #cbcfcf);
	background: -o-linear-gradient(#00db7a, #cbcfcf);
	background: -moz-linear-gradient(#00db7a, #cbcfcf);
	background: linear-gradient(#00db7a, #cbcfcf);
}

/* purple */
.slide:nth-of-type(9)
{
	background: #e47aff;
	background: -webkit-linear-gradient(#e47aff, #cbcfcf);
	background: -o-linear-gradient(#e47aff, #cbcfcf);
	background: -moz-linear-gradient(#e47aff, #cbcfcf);
	background: linear-gradient(#e47aff, #cbcfcf);
}

/* gold */
.slide:nth-of-type(10)
{
	background: #a8a676;
	background: -webkit-linear-gradient(#a8a676, #cbcfcf);
	background: -o-linear-gradient(#a8a676, #cbcfcf);
	background: -moz-linear-gradient(#a8a676, #cbcfcf);
	background: linear-gradient(#a8a676, #cbcfcf);
}

/* gray */
.slide:nth-of-type(11)
{
	background: #01b3e3;
	background: -webkit-linear-gradient(#6e6e6e, #cbcfcf);
	background: -o-linear-gradient(#6e6e6e, #cbcfcf);
	background: -moz-linear-gradient(#6e6e6e, #cbcfcf);
	background: linear-gradient(#6e6e6e, #cbcfcf);
}

/* red */
.slide:nth-of-type(12)
{
	background: #a50b0d;
	background: -webkit-linear-gradient(#a50b0d, #cbcfcf);
	background: -o-linear-gradient(#a50b0d, #cbcfcf);
	background: -moz-linear-gradient(#a50b0d, #cbcfcf);
	background: linear-gradient(#a50b0d, #cbcfcf);
}

/* orange */
.slide:nth-of-type(13)
{
	background: #ec511b;
	background: -webkit-linear-gradient(#ec511b , #cbcfcf);
	background: -o-linear-gradient(#ec511b , #cbcfcf);
	background: -moz-linear-gradient(#ec511b , #cbcfcf);
	background: linear-gradient(#ec511b , #cbcfcf);
}

/* play, pause, and skip buttons */

.controls
{
	background: #333;
	color: #fff;
	border: none;
	padding: 10px;
	font-size: 16px;
	line-height: 12px;
	cursor: pointer;
	border: 2px solid #fff;
	margin: 10px 10px 10px 10px;
	width: 70px;
	height: 35px;
}

.controls:hover,
.controls:focus
{
	background: #eee;
	color: #333;
}

.container
{
	position: relative;
}

.buttons
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
	font-size: 0px;
}

/* overlay with sliding tooltip */

.show .tooltip
{
	background: rgba(0,0,0,0.6);
	width: 400px;
	height: 45px;
	position: relative;
	bottom: 75px;
	left: 0px;
	/*
	left: -406px;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	*/
}

.show .tooltip h1
{
	font-family: sans-serif;
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 45px;
	padding: 0 0 0 20px;
}

.show li#first:hover .tooltip,
.show li#second:hover .tooltip,
.show li#third:hover .tooltip,
.show li#fourth:hover .tooltip,
.show li#fifth:hover .tooltip,
.show li#sixth:hover .tooltip,
.show li#seventh:hover .tooltip,
.show li#eighth:hover .tooltip,
.show li#ninth:hover .tooltip,
.show li#tenth:hover .tooltip,
.show li#eleventh:hover .tooltip
.show li#twelfth:hover .tooltip
.show li#thirteenth:hover .tooltip
{
	left: 0px;
}


@media only screen and (max-width: 747px)
{
	div.controlButtons
	{
		width: 300px;
		height: 60px;
		padding: 0px 10px;
		margin-top: 6px;
		margin-top: -35px;
	}

	/* Div containing the actual slides */

	div.slideContainer
	{
		width: 456px;
		height: 345px;
	}
	
	.slide img
	{
		height: 309px;
		width: 448px;
	}

	/* slide markup */

	#slides
	{
		height: 309px;
		width: 456px;
	}
	
	.controls
	{
		padding: 6px;
		font-size: 12px;
		line-height: 8px;
		border: 1px solid #fff;
		margin: 6px 6px 6px 6px;
		width: 45px;
		height: 25px;
	}
}