@charset "UTF-8";

@media all {

	.modal {
		z-index: 6;
		display: none;
		position: fixed;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		overflow:auto;
		background-color:rgba(0,0,0,0.8);
	}
	.modal .modal-close {
		z-index: 8;
		position: fixed;
		padding: 0 1rem;
		right: 0;
		top: 0;
		font-size: 3rem;
		color: white;
		cursor: pointer;
		text-shadow: 0.1rem 0.1rem 0.2rem #000000;
		user-select: none;
	}
	.modal .modal-close:hover{
		color: lightGray;
	}
	.modal .modal-close:active{
		color: gray;
	}
	.popup-modal-content {
		margin: 10vh auto 0 auto;
		position: relative;
		display: block;
		text-align: center;
	}
	.popup-modal-content img {
		padding: 1vh;
		width: auto;
		min-width: 50vw;
		max-width: 80vw;
		height: auto;
		max-height: 80vh;
		background-color: white;
	}
	#galeria-modal #galeria-container{
		position:relative;
		display: inline-block;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	#galeria-modal #galeria-modal-content {
		height: 96vh;
		width: auto;
		max-height: 96vh;
		max-width: 90vw;
		cursor: zoom-out;
		background-color: white;
	}
	.conteudo #galeria-modal #galeria-modal-content{
		border: 0.2vw solid white;
	}
	#galeria-modal #slide-marca{
		z-index: 8;
		position: absolute;
		right: 1vw;
		top: 1vh;
		width: 5vw;
	}
	.conteudo #galeria-modal #slide-marca{
		filter: drop-shadow(0.2vh 0.2vh .2vh #777);
		opacity: 0.5;
	}
	#galeria-modal #slide-modal-video {
		z-index: 10;
		position: fixed;
		display: none;
		right: 0.5vw;
		top: 11vh;
		width: 6vw;
		height: 6vw;
		cursor: pointer;
		background-image: url('/images/ico_modal_play.png');
		background-size: contain;
		filter: drop-shadow(0 0 0.3vh #000);
	}
	#galeria-modal #slide-modal-balao {
		z-index: 10;
		position: fixed;
		display: none;
		right: 7vw;
		top: 11vh;
		width: 25vw;
		height: auto;
	}
	#galeria-modal #slide-modal-info1{
		z-index: 8;
		position: absolute;
		right: 1vw;
		bottom: 3vh;
		font-size: 2rem;
		color: gray;
	}
	#galeria-modal #slide-modal-info2{
		z-index: 8;
		position: absolute;
		right: 1vw;
		bottom: 1vh;
		color: gray;
	}
	.conteudo  #galeria-modal #slide-modal-info1{
		font-size: 2rem;
		color: white;
		text-shadow: 0.1rem 0.1rem 0.2rem #000000;
	}
	.conteudo  #galeria-modal #slide-modal-info2{
		color: white;
		text-shadow: 0.1rem 0.1rem 0.2rem #000000;
	}
	#galeria-modal .slide-next{
		z-index: 7;
		position: absolute;
		width: 20vw !important;
		font-size: 5rem;
		line-height: 99vh;
		color: white;
		text-shadow: 0.1rem 0.1rem 0.2rem #000000;
		cursor: pointer;
		user-select: none;
	}
	#galeria-modal .slide-next:nth-child(2){
		left: 0;
		text-align: left;
		cursor: w-resize;
	}
	#galeria-modal .slide-next:nth-child(3){
		right: 0;
		text-align: right;
		cursor: e-resize;
	}
	#galeria-modal .slide-next:hover{
		color: lightGray;
	}
	#galeria-modal .slide-next:active{
		color: gray;
	}
	#imagem-video-close {
		display: none;
	}
} /* fim @media all */

@media screen and (min-width: 1px) and (max-width: 767px)  {
	.modal {
		display: none;
	}
	.popup-modal-content img {		
		width: auto;
		min-width: 50vw;
		max-width: 100vw;
	}
	#imagem-video-close {
		z-index: 8;
		position: fixed;
		padding: 0 1.5vmax;
		top: 1vw;
		right: 1vw;
		display: none;
		font-size: 3rem;
	}
	#imagem-video-mobile {
		z-index: 6;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		width: 100vw;
		min-height: 64vw;
		max-height: 100vh;
		text-align: center;
		background-color: white;
		box-shadow: 0 1vh 2vh 0 rgba(0, 0, 0, 0.3);
		transition: top .4s ease-in;
	}
	#imagem-video-mobile video {
		max-width: 100vw;
		max-height: 100vh;
	}	
}

@media screen and (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) { /* Default w3c: 769x992 e 993x1200*/
	.modal .modal-close {
		padding: 0 1vmax;
	}
	#galeria-modal #galeria-modal-content {
		height: auto;
		width: auto;
		max-width: 85vw;
	}
	#galeria-modal #slide-marca{
		width: 8vw;
	}
}

@media screen and (min-width: 1201px) and (max-width: 1440px) and (orientation: landscape) {
	#galeria-modal #galeria-modal-content {
		height: auto;
		width: auto;
	}
	#galeria-modal #slide-marca{
		width: 8vw;
	}
}

@media screen and (min-width: 768px) and (orientation: portrait) {
	#galeria-modal #galeria-modal-content {
		height: auto;
		max-width: 100vw;
	}
	#galeria-modal #slide-modal-video {
		right: 40vw;
		top: 6vh;
		width: 20vw;
		height: 20vw;
	}
}