@font-face {
    font-family: 'Soberana Sans';
    src: url('../fonts/SoberanaSans-Regular.eot');
    src: url('../fonts/SoberanaSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SoberanaSans-Regular.woff2') format('woff2'),
        url('../fonts/SoberanaSans-Regular.woff') format('woff'),
        url('../fonts/SoberanaSans-Regular.ttf') format('truetype'),
        url('../fonts/SoberanaSans-Regular.svg#SoberanaSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.slide
{
    font-family: 'Soberana Sans', sans-serif;
}

#foobar
{
	width: 366px;
	height: 250px;
	position: relative;
}

#foobar .navigation
{
	position: absolute;
	display: block;
	z-index: 100;
	color: #000000;
	bottom: 50%;
	margin: 0px;
	padding: 0px;
	background-color: none;
	opacity: 0;
	transition: 0.5s;
}

#foobar:hover .navigation {
	opacity: 1;
	transition: 0.5s
}

#foobar .navigation a
{
	color: #000000;
	text-decoration: none;
	outline: none;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
}

#foobar .navigation img {
	width: 40px;
	height: 40px;
}

#foobar .navigation .previous {
	position: relative;
	left: 0%;
}

#foobar .navigation .next {
	position: relative;
	left: 285px;
}

#foobar .viewer
{
	width: 366px;
	height: 250px;
}

#foobar .viewer .reel .slide
{
	position: relative;
	width: 366px;
	height: 250px;
	z-index: 0;
}

#foobar .viewer .reel .slide span
{
	position: absolute;
	display: block;
	width: 366px;
	opacity: 0.80;
	padding: 10px;
	background-color: #404040;
	color: #ffffff;
	bottom: 0px;
	left: 0px;
}

.overlay {
	background-color: black;
	opacity: 0.8;
	position: absolute;
	left: 0; 
	bottom: -100%;
	height: 250px; 
	width: 366px;
	transition: 0.5s;
}

.overlay p {
	color: white;
	padding: 10px;
	text-align: center;
	font-size: 10pt;
}

.sistema-overlay:hover .overlay {
	transition: 0.5s;
	bottom: -50%;
}