/*
	--- Versionamento ---
	23/02/2018 - Andrey - Primeira Versão
	26/12/2018 - Fabio - ajuste layout
	08/12/2021 - Karine - Reduzi a opacidade em .bolinha_esquerda, .bolinha_direita
	--- Fim Versionamento ---
*/
#todos_albums{
	float: left;
	display: inline-block;
}


#quadro_album {
	cursor: pointer;
	
	width: 24%;
	border: 1px solid #DDD;
	padding-left: 3%;	
	padding-right: 3%;	
	padding-top: 3%;	
	padding-bottom: 5%;
	float: left;	
	margin: 1%;	
	

	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 )


}

#quadro_album > span{
	text-align:center;
	display: block;
}

#quadro_album > div > img{
	width:100%;
	margin-bottom: 1px;
}

#quantidade_fotos{
	font-size: 12px;
	display: block;
}


.contenedorAlbum{
	position: relative;
}

@media (min-width: 1000px){

	.contenedorFotos{
		height: 500px;
		width: 100%;
	}

	.fotoExibicao{

		display: inline-block;
		height: 100%;
		width: 79%;
		text-align: center;
		position: relative;
		background:#29292a66;
		
	}

	.afotoexibicao{
		width: 100%;
		height: 100%;
		background-color: #DDD;
	}

	.afotoexibicao > img{
		max-width: 100%;
		max-height: 100%;
	}

	.textofotoexibicao{	

		width: 100%;
		height: 10%;
		position: absolute;
		background: #111;
		color: #fff;
		bottom: 0px;
		line-height: 30px;
		opacity: 0.5;
	}

	.listaMiniaturas{

		display: inline-block;
		height: 100%;
		width: 20%;
		float: right;
		overflow-y: scroll;
	}

	.listaMiniaturas > img{
		width: 100%;
		cursor: pointer;
		opacity: 0.7;
		filter: alpha(opacity=70); /* For IE8 and earlier */	
	}

	.listaMiniaturas > img:hover{
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */	
		transition: .1s;
	}

	.bolinha_esquerda, .bolinha_direita{		
		position: absolute;		
		height: 40px;
		opacity: 0.9;
		filter: alpha(opacity=20); /* For IE8 and earlier */		
		cursor: pointer;		
	}	
	
	.bolinha_esquerda:hover, .bolinha_direita:hover{
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */				
		/*transition: .5s;*/
	}

	.bolinha_esquerda{
		top: 50%;
		left: 2%;
	}

	.bolinha_direita{
		top: 50%;
		right:22%;
	}
}



@media (max-width: 999px){

	.contenedorFotos{
		height: 500px;
		width: 100%;
	}

	.fotoExibicao{

		display: block;
		height: 100%;
		width: 100%;
		text-align: center;
		position: relative;
		
	}

	.afotoexibicao{
		width: 100%;
		height: 100%;
		background-color: #DDD;
		background-size: contain !important;
	}

	.afotoexibicao > img{
		max-width: 100%;
		max-height: 100%;
	}

	.textofotoexibicao{	
		width: 100%;
		height: 10%;
	}

	.listaMiniaturas{
		display: none;
	}

	.bolinha_esquerda, .bolinha_direita{		
		position: absolute;		
		height: 40px;
		opacity: 0.2;
		filter: alpha(opacity=20); /* For IE8 and earlier */		
		/*transition: .1s;*/
		cursor: pointer;
		
	}	
	
	.bolinha_esquerda:hover, .bolinha_direita:hover{
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */				
		/*transition: .5s;*/
	}

	.bolinha_esquerda{
		top: 50%;
		left: 2%;
	}

	.bolinha_direita{
		top: 50%;
		right:2%;
	}
}