/* INÍCIO CSS */


body {
	background-color:#000000;
}

a.standard:link {color: #333333;text-decoration: none;}
a.standard:visited {color: #666666;}
a.standard:hover {color: #000000;text-decoration: underline;}

a.outro:link {color: #ff0000;}
a.outro:visited {color: #0000ff;}
a.outro:hover {font-size: 150%;}

.text-justify-01 {
	text-align: justify;
	text-justify: inter-word;
}

.fade-in-07 {
	opacity: 0; /* Inicia invisível */
	animation: fadeIn 7s forwards; /* Aplica a animação */
}

.fade-in-14 {
	opacity: 0; /* Inicia invisível */
	animation: fadeIn 14s forwards; /* Aplica a animação */
}

.fade-in-21 {
	opacity: 0; /* Inicia invisível */
	animation: fadeIn 21s forwards; /* Aplica a animação */
}

@keyframes fadeIn {
	to {
	opacity: 1; /* Torna o texto completamente visível */
	}
}




/*	TABLES	*/

.tableshad01 {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: 10px 10px 5px #888888;
}

.tableshad02 {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: 5px 5px 2px #DBDBDB;
}

.tableshad03 { 
	-moz-box-shadow:    1px 3px 5px gray;
	-webkit-box-shadow: 1px 3px 5px gray;
	box-shadow:         1px 3px 5px gray;
}

table.colorowcinza tr:nth-child(even){background-color: #DDDDDD;}

.background-table {
	width: 100%;
	height: 100vh; /* ou ajuste para a altura desejada */
    background-image: url('https://www.jorgepintovox.com/files/X5wstarcIJ3f6GMuQYW.jpg');
    background-size: cover; /* Faz a imagem cobrir toda a tabela */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
}

.background-table td {
	height: 100%;
}



.background-table-02 {
	width: 100%;
	height: 100vh; /* ou ajuste para a altura desejada */
    background-image: url('https://www.jorgepintovox.com/files/t48EJk3Um5bYFnYm2dm.jpeg');
    background-size: cover; /* Faz a imagem cobrir toda a tabela */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
}

.background-table-02 td {
	height: 100%;
}



.background-table-03 {
	width: 100%;
	height: 84vh; /* ou ajuste para a altura desejada */
    background-image: url('https://www.jorgepintovox.com/files/VxdSalgEKwG7DyvPkEo.jpg');
    background-size: cover; /* Faz a imagem cobrir toda a tabela */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
}

.background-table-03 td {
	height: 100%;
}



.audio-player {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	outline: none;
	margin-bottom: 20px;
		width: 70%;
	}

.audio-controls {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.audio-controls button {
	width: 50px;
	height: 50px;
	background-color: transparent;
	border: 2px solid #FFD659;
	color: #FFD659;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 5px;
}

.audio-controls button:hover {
	background-color: #FFD659;
	color: white;
}

.play-icon {
	width: 0;
	height: 0;
	border-left: 10px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 3px;
}

.pause-icon {
	display: flex;
	gap: 5px;
}

.pause-icon div {
	width: 4px;
	height: 14px;
	background-color: currentColor;
}

.audio-controls input[type="range"] {
	flex: 4;
	margin: 0 10px;
	cursor: pointer;
	background-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.audio-controls input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	background-color: #FFD659;
	border-radius: 4px;
}

.audio-controls input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	background-color: #FFD659;
	border-radius: 50%;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
        
.audio-list {
	list-style: none;
	padding: 0;
		width: 50%;
	}

.audio-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.audio-list button {
	background-color: transparent;
	border: none;
	color: #FFD659;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	font-size: 15px;
	font-weight: normal;
	transition: color 0.3s;
}

.audio-list button:hover {
	color: #FFFFFF;
}

.audio-list a {
	background-color: transparent;
	border: none;
	color: #FFFFFF;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font-size: 27px;
	transition: color 0.3s;
}

.audio-list a:hover {
	color: #FFD659;
}
        
.audio-list hr {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, white, transparent);
	margin: 7px 0;
}

/* Estilo para a faixa ativa */
.audio-list li.active button {
    color: #000000; /* Cor de destaque para a faixa ativa */
    background-color: #FFD659;
}




.styled-button-03 {
	border: 2px solid #000000; /* Rebordo preto de 2px */
	border-radius: 10px; /* Cantos arredondados */
	background-color: transparent; /* Fundo transparente */
	color: #000000; /* Letras em preto */
	padding: 10px 20px; /* Espaçamento interno */
	font-size: 16px; /* Tamanho da fonte */
	cursor: pointer; /* Cursor de mãozinha ao passar o mouse */
	transition: background-color 0.3s ease; /* Transição suave para a mudança de fundo */
}

.styled-button-03:hover {
	background-color: #ffffff; /* Fundo branco ao passar o mouse */
}






/* ESTILO DO FORMULÁRIO */
.contact-form {
	background-color: transparent;
	border: 2px solid white;
	padding: 20px;
	border-radius: 10px;
		width: 425px;
		box-sizing: border-box;
	}

.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form input[type="text"],
.contact-form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 2px solid white;
	border-radius: 5px;
	background-color: transparent;
	color: white;
	font-size: 16px;
	box-sizing: border-box;
	}
	
.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #FFD659;
	opacity: 1;
	}

.contact-form input[type="submit"] {
	width: 100%;
	padding: 10px;
	border: 2px solid white;
	border-radius: 5px;
	background-color: transparent;
	color: white;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
	}

.contact-form input[type="submit"]:hover {
	background-color: #FFD659;
	color: black;
	}




































































.imgshad01{border:0px;box-shadow: 10px 10px 5px #ccc; -moz-box-shadow: 10px 10px 5px #ccc; -webkit-box-shadow: 10px 10px 5px #ccc; -khtml-box-shadow: 10px 10px 5px #ccc;}
.imgshad02{border:0px;-moz-box-shadow: 10px 10px 5px #ccc; -webkit-box-shadow: 10px 10px 5px #ccc; box-shadow: 10px 10px 5px #ccc; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;}
.imgshad03{border:0px;-moz-box-shadow: 4px 4px 2px #ccc; -webkit-box-shadow: 4px 4px 2px #ccc; box-shadow: 4px 4px 2px #ccc; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}





/* GRILL FOTOS */


.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 4px;
  background-color: #080808;
}

.column {
  -ms-flex: 25%;
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  object-fit:cover;height:225px;
}

.column img:hover {

  -webkit-filter: brightness(120%);
}

@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}






/* GRILL VIDEOS */


.row2 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column2 {
  -ms-flex: 25%;
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column2 img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  object-fit:cover;height:215px;
}

@media screen and (max-width: 800px) {
  .column2 {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column2 {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}






.video_thumbs {
  position: relative;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered:hover {
  z-index: 999;
  cursor: pointer;
  -webkit-filter: opacity(50%);
}









.tableshad01{width: 100%;height: 100%;background-color: #FFFFFF;box-shadow: 10px 10px 5px #888888;}
.tableshad02{width: 100%;height: 100%;background-color: #FFFFFF;box-shadow: 5px 5px 2px #DBDBDB;}
.tableshad03{-moz-box-shadow: 1px 3px 5px gray;-webkit-box-shadow: 1px 3px 5px gray;box-shadow:1px 3px 5px gray;}










/* CAIXAS DE ALERTA, ERRO, INFO, ETC */

.alertERRO {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}.alertERRO a {color: #E5E5E5;}.alertERRO a:hover {color: white;}

.alertINFO {
  padding: 20px;
  background-color: #4B7AA9;
  color: white;
  margin-bottom: 15px;
}.alertINFO a {color: #E5E5E5;}.alertINFO a:hover {color: white;}

.alertOK {
  padding: 20px;
  background-color: #009B00;
  color: white;
  margin-bottom: 15px;
}.alertOK a {color: #E5E5E5;}.alertINFO a:hover {color: white;}

.alertWARN {
  padding: 20px;
  background-color: #FFCC00;
  color: #333333;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}.closebtn:hover {color: black;}














/* PLAYER 2024 */


.button-play {
  appearance: none;
  background-color: transparent;
  border: 2px solid #666666;
  border-radius: 15px;
  box-sizing: border-box;
  color: #3B3B3B;
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
}

.button-play:disabled {
  pointer-events: none;
}

.button-play:hover {
  color: #fff;
  background-color: #333333;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-play:active {
  box-shadow: none;
  transform: translateY(0);
}