/* * {
	border: 1px solid #F00;
}
*/
html {
  scroll-behavior: smooth;
}
body {
	font-family: "Quicksand", sans-serif;
	margin: 0;
	color: #639;
	background-color: #E8DCF3;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	}
a {
	text-decoration: none;
	color: #609;
	}
	a:hover {
	color: #66C;
	}
.barra {
	height: 10px;
	width: 100%;
	background-color: #660099;
	}
	.barra_topo {
	width: 100%;
	background-color: #663366;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF;
	text-decoration: none;
	}
	.barra_topo a{
	font-size: small;
	font-weight: 200;
	color: #000;
	}
.site {
  display: grid;
  grid-template-columns: 1fr; 
  width: 1200px;
  grid-gap: 10px;
  margin:auto auto;
}
.grade_cabecalho {
  display: grid;
  grid-template-columns: 5fr 3fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.redes_sociais {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* define 3 colunas de tamanho igual */
  grid-gap: 4px; /* define o espaço entre as colunas */
  text-align:left;
  width:98%;
}
.conteudo {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.conteudo img {
	max-width:50%;
	float:left;
	padding:10px;
}
.cursos{
	display: grid;
	grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	grid-gap: 10px; /* define o espaço entre as colunas */
	border: 1px dashed #F96;
	border-radius:25px;
	margin:10px;
	padding:10px;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
}
.colunas2{
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 3 colunas de tamanho igual */
  padding:10px;
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-container1 {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-container2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 2 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-container3 {
  display: grid;
  grid-template-columns: 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.colunas42 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.colunas3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.colunas51 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.colunas52 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.colunas6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-rodape{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.lista_documentos {
  display: grid;
  grid-template-columns: 1fr 7fr; /* define 1 colunas de tamanho igual */
  grid-gap: 5px; /* define o espaço entre as colunas */
}
.colunas24 {
	  display: grid;
  grid-template-columns: 2fr 4fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.icone {
	border: 1px dashed #ccc;
	padding:10px;
	text-align:center;
}
.documento {
	border: 1px dashed #ccc;
	padding:10px;
}
h1 {
	color:#014c72;	
	 position: relative;
}

h3 {
	color:#000;	
	 position: relative;
}
h3::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 20%;
  height: 3px;
  background: #f0f0f0;
  border-radius:5px;
}
.rodape {
	margin: auto auto;
	width:1200px;
}
footer {
	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
	background-attachment:cover;
	color:#000;
	width:100%;
	left: 0;
	bottom: 0;
}
.linkedin{
  color: #0077B5; /* cor do linkedin */
}

.facebook {
  color: #3B5998; /* cor do facebook */
}

.instagram {
  color: #C13584; /* cor do instagram */
}

.youtube{
  color: #FF0000; /* cor do youtube */
}
.btn-link {
	display: inline-block;
	padding: 5px 10px;
	border: none;
	background-color: #666666; /* cor do botão */
	color: #fff;
	transition: background-color 0.3s ease; /* transição suave */
}

.btn-link:hover {
	background-color: #006666; /* cor do botão quando o mouse passa sobre ele */
}
.btn-topo {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	background-color: #006699;
	color: white;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 24px;
	cursor: pointer;
	z-index: 1000;
	cursor: pointer;
	transition: opacity 0.2s ease-in-out;
}

.btn-topo:hover {
  opacity: 0.8;
}
.slide-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Para suportar rolagem suave no iOS */
}

.slide-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  margin-right: 10px;
}

.slide-item img {
  width: 100%;
}
.logo {
	padding-top:10px;
	max-width:50%;
}
.links_rodape a {
	display:block;
	margin:2px;
}
  button {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
	  margin:5px;
	  cursor:pointer;
    }

    button:hover {
      background-color: #45a049;
    }
	#slideshow {
            margin: 5px auto;
			position:relative;
            width: 100%;
			height:100%;
           overflow: hidden;
        }
        
       		.box {
	padding: 10px;
		 box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
		 background-color:#FFF;
    border-radius: 0px 20px 20px 20px;
background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
		}
	.box img {
		max-width:100%;
	}
	.box::hover{
		background-color:##f7f7f7;
	}
	.slider {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.slide {
  display: none;
  width: 100%;
  height: auto; /* Altura ajustada automaticamente para manter a proporção da imagem */
  transition: opacity 1s ease-in-out;
}

.slide.active {
  display: block;
}
.btn_redondo {
	border-radius: 25px;
	background-color: #FFF;
	border: 1px solid #014c72;
	font-size: 1.2em;
	text-align: center;
	padding: 5px;
	font-weight: 800;
	margin-bottom: 20px;
}
.neve {
	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}
.blue {
	background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
	color:#FFF;
}
.desktop {
	display:block;
}
.mobile {
		display:none;
	}
	.thin {
		font-weight:200;
		line-height:1.5em;
	}
	.medicos {
		border-radius:25px;
	}
	.resultados {
	border-radius: 10px;
	border: 1px solid #000;
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
	}
	.contador {
	padding: 5px;
	border-radius: 10px;
	border: 1px solid #CCC;
	float: left;
	text-align: center;
	margin: 5px;
	 box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
}
.numeros {
	font-size:1.8em;
	font-weight:900;
}
#regressivo {
	margin-right: auto;
	margin-left: auto;
}
hr{
	width:80%;
	color:#CCC;
}

.centralizar {
	display: flex;
  justify-content: center;
  align-items: center;
}
.maiusculas {
	text-transform:uppercase;
}
.tabela-lotes {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
		overflow:auto;
    }
    
    .tabela-lotes thead {
        background-color: #2c3e50;
        color: white;
    }
    
    .tabela-lotes th, .tabela-lotes td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Efeito zebrado ignorando a primeira linha (thead) */
    .tabela-lotes tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .tabela-lotes tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }
    
    /* Manter o hover effect */
    .tabela-lotes tbody tr:hover {
        background-color: #f5f5f5;
    }
    
    .lote-vigente {
        background-color: #e3f2fd !important; /* !important para sobrescrever o zebrado */
        font-weight: bold;
        position: relative;
    }
    
    .lote-vigente::after {
        content: "VIGENTE";
        position: absolute;
        top: 2px;
        right: 5px;
        background-color: #2196F3;
        color: white;
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 3px;
    }
    
    .valor-lote {
        font-weight: bold;
        color: #2e7d32;
    }
    
    .periodo-lote {
        font-size: 0.9em;
        color: #666;
    }
    
    .curso-titulo {
        font-weight: bold;
        color: #2c3e50;
        /* Removido o background-color para não conflitar com o zebrado */
    }
        .floating-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #25D366;
            color: white;
            cursor: pointer;
            padding: 10px 15px;
            border-radius: 50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        
        .floating-button:hover {
            background-color: #128C7E;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        
        .floating-button .icon {
            margin-right: 8px;
            font-size: 18px;
        }
        
        .floating-button .text {
            display: none;
        }
        
        @media (min-width: 768px) {
            .floating-button .text {
                display: inline;
            }
        }
        
        /* Efeito de onda ao clicar */
        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        
        .ripple-effect {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.2); }
            50% { transform: scale(0.8); }
            75% { transform: scale(1.2); }
        }
	@media screen and (max-width: 768px) {
		body {
		}
	.desktop {
		display:none;
	}
	.mobile {
		display:block;
	}
	 .slide {
    height: auto; /* Altura responsiva */
  }
	.site {
		width:96%;
	}
	.logo {
	  text-align:center;
	  max-width:80%;
	}
	.grade_cabecalho {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-container1 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
		.colunas2{
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-container2 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-container3 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
		.colunas42 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 3 colunas de tamanho igual */
	}
			.colunas24 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
.colunas3 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.colunas2 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
			.colunas51 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 3 colunas de tamanho igual */
	}
	.colunas6 {
		display: grid;
  grid-template-columns: 1fr 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-rodape {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.rodape {
		width:100%;
	}
	.redessociais {
		display:none;
	}
	.webmail {
		display:none;
	}
	.contatos {
		display:none;
	}
	.conteudo {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
}
.conteudo img {
	max-width:100%;
	padding:2px;
	float:none;
}
.2colunas {
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
}
#slideshow {
            width: 100%;
        }
}