body{background-color: #C7C7C7;}

#corpo{
   margin-top: 5px; 
}





@media (max-width: 800px){
   
  #sidebar{display: none;}
  #corpo{width: 99%;}
  .chamada img{max-height: 1.4vw;}
  
  
}

@media (min-width: 801px){
    
    #sidebar{width:13%; margin-left: 1px; margin-right: 2%}
		#sidebar img{max-width: 100%; height: auto; margin: 0;} 
    #posts{width: 84%;}
    #posts, #sidebar{display: inline-block; float: left;}
		.chamada img{max-height: 1.4vw;}
		.chamada span{font-size: 1.6vw; font-style: italic}
}

@media screen and (min-width: 1200px) {
  #corpo{width: 90%;}
}

#posts, #sidebar{margin-top: 0.5%}




.ms{padding:3px; border:1px solid #999; border-radius:2px; box-shadow:#333 0 0 2px;  font:bold 1em "Trebuchet MS", Arial, Helvetica, sans-serif; font-variant:small-caps; display: block; box-sizing: border-box; margin-bottom:5px; text-align: center;}
.no, .erro{background:#FFCACA; border-color:#900; color:#900;}

.chamada{display:block; width: 100%; background-color: white; border-bottom: 1px solid; padding: 0.3% 1.2%; text-align: left;}

.container {
    display: flex;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente os itens */
    align-items: center; /* Centraliza verticalmente os itens */
    width: 100%;
    flex-wrap: wrap;
		margin-bottom: 0.7%;
    background-color: hsla(0,0%,94%,1.00);
    text-align: center;
}
a.item, a.cenas, a.ator {color: #2E2E2E;}
.item, .cenas, .ator{
	border: 1px solid #C7C7C7; 
	background-color: white;
	margin: 0.8% 1%;
	text-align: center;
	display: inline-flex;
  flex-direction: column;
  align-items: left;
  text-decoration: none;    
  
}

.cenas:hover, .item:hover, a.ator{
   border-color: #7e7e7e; border-radius: 4px;
}

.item .image-container, .cenas .image-container , .ator .image-container{
    position: relative;
    overflow: hidden;
}

.item .image-container img {
    display: block;
    max-width: 100%; height: auto;
    max-height: 18.8vw; width: auto;
    transition: opacity 0.3s ease-in-out;
    margin: 0;
}
a.ator{width: 10%; }
.ator .image-container img {
    display: block;
    max-width: 100%; height: auto;
    max-height: 8vw; width: auto;
}
.cenas .image-container img {
    display: block;
	  max-height: 12vw; width: auto;
    max-width: 100%; height: auto;
    margin: 0;
}

.item .image-container img , .cenas .image-container img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0; /* Adicionado para remover a margem */
  }
  
  .item .image-container .image-hover, .cenas .image-container .image-hover {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .item .image-container:hover .image-normal , .cenas .image-container:hover .image-normal{
    opacity: 0;
  }
  
  .item .image-container:hover .image-hover, .cenas .image-container:hover .image-hover {
    opacity: 1;
  }

.item {
    flex-basis: calc(18%);
}

.cenas {
	flex-basis: calc(24% - 1%);
}

 h3, .ator p {
  height: 20px;
  line-height: 20px; /* Ajuste o valor da propriedade line-height conforme necessário */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: 1em;
  margin: 2px 0px;
  width: 100%;
}

.box{width: 100%; display: block; box-sizing: border-box; margin-bottom: 0.6%; background-color: hsla(0,0%,94%,1.00); border: 1px solid hsla(0,0%,73%,1.00) ; border-radius: 3px;}

.titulo{font-family: 'Roboto'; font-size: 1.8em; color:hsla(0,0%,30%,1.00); ; border-bottom: 1px solid hsla(0,0%,10%,1.00); margin-bottom: 1%; background-color: white;}

.corpoPost img{max-width: 8vw;}

@media(max-width: 414px){
  #Div1,#Div2,#Div3,#Div4, #video{border:1px solid hsla(0,0%,78%,1.00); height: 40vh; width: 100%;}   
}

@media (min-width: 415px) and (max-width: 800px){
   #Div1,#Div2,#Div3,#Div4, #video{border:1px solid hsla(0,0%,78%,1.00); height: 45vw; width: 100%;} 
}

@media (min-width: 801px){
    #Div1,#Div2,#Div3,#Div4, #video{border:1px solid hsla(0,0%,78%,1.00); height: 65vh; width: 65%;}
}

.sites a{background-color: white; color:hsla(0,0%,30%,1.00); display: inline-block; border:1px solid rgb(156, 155, 155); font-size:1.1em; padding: 2px 7px; margin: 2px 3px;}
.sites a:hover{border-radius: 2px; border-color: #333;color:#333}

.top-left {
  position:absolute;  top: 0%;  left: 0%;  color:white; background-color:hsla(359,100%,52%,0.75); font-size:0.8em; padding: 0px 3px; border-radius: 2px; display: block;}
.top-right {
    position:absolute;  top: 0%;  right: 0%;  color:white; background-color:hsla(359,100%,52%,0.75); font-size:0.8em; padding: 0px 3px; border-radius: 2px;  }
.baixo {
      position:absolute;  bottom: 0%;  left: 0%;  color:white; background-color:hsl(46, 94%, 42%); font-size:0.8em; padding: 0px 3px; border-radius: 2px; color:white  }    
.side{margin-bottom: 5%; display: block; width: 100%;}
.side h2{font-size:1em; font-weight: bold; text-align: center; background-color: white;}
.side a{color:hsla(0,0%,29%,1.00); display: block; padding:1% 0 1% 5%; border: 1px solid hsla(0,0%,86%,1.00);  background-color: white; text-align: left;}
.side a:hover{border-color: hsla(0,0%,55%,1.00); font-weight: bold;}

.paginator{display: block; width: 100%; text-align:center;  border:1px solid hsla(0,0%,70%,1); border-radius: 2px; margin-bottom: 2%; font-family: 'OpenSans-Semibold'; padding: 1%;  }
.paginator a{ 
	border-radius: 2px; background-color: white; display:inline-block;  padding: 3px 6px; border:1px solid hsla(0,1%,74%,1.00);margin-right: 0.5%;  }
.paginator span{ padding: 3px 6px; margin-right: 0.5%}
.disabled {pointer-events: none; cursor: default;}

.subchamadaSite{text-align: left; font-size: 1.2em; margin-left: 1%; border:1px solid var(--siForte); margin-bottom: 1%; padding:0% 0.3%; display: inline-block; color:var(--siForte);}


.subchamada{text-align: left; font-size: 1.2em; margin-left: 1%; }
.subchamada a{margin: 0.3%; padding:0% 0.3%; display: inline-block; color:white}
.subchamada a.site{color:var(--siForte); background-color: white;border:1px solid white; padding: 0.2% 1%;}
.subchamada a.site:hover{border-color: var(--siForte);}

.veja{display: inline-block;  color:white; right: 2px; float: right; overflow: auto;  border-radius: 2px; margin:0% 5%; font-size: 0.9em; padding: 0.3% 2.5%;}
.veja:hover{font-weight: bold; }

.rodape a {color:#333; border:1px solid rgb(184, 184, 184); padding:3px 5px; margin-left: 3px; min-width:10%; background-color: white;}
.rodape span{color:white; padding:2px 5px; margin-left:10px}
.rodape a, .rodape span{display: inline-block; margin-top: 2px;}
.rodape{margin-top: 5px; border-bottom: 1px solid #727272; background-color:rgb(235, 235, 235); width: 100%; padding:10px 0px; }
.rodape a:hover{border-color:#727272; border-radius: 4px; color:black }




.menu .home {border-color:var(--hoForte);}
.menu .menuPlay{border-color:#FF7F00;}
.menu .menuAtor{border-color:var(--atForte);}
.menu .menuSite{border-color:var(--siForte);}
.menu .menuTema{border-color:var(--teForte);}
.menu .menuCena{border-color:var(--ceForte);}
.menu .menuFilm{border-color:var(--coForte);}
.menu  a:hover.menuPlay, .menu  a:hover.menuAtor, .menu  a:hover.menuSite, .menu  a:hover.menuTema, .menu  a:hover.menuCena, .menu  a:hover.menuFilm{border-color:var(--hoForte)}

/*
.rodape{margin:5px 0;   
}








.rodape{margin:5px 0; border-bottom: 1px solid #727272; padding:10px 0px; background-color:rgb(235, 235, 235); width: 100%;
}
.rodape a {color:#333; border:1px solid rgb(184, 184, 184); padding:3px 5px; margin-left: 3px; width: 10%;}
.rodape a:hover{border-color:#727272; border-radius: 4px; background-color: white;}
.rodape span{color:white; padding:2px 5px; margin-left:7px}

.rodape a, .rodape span{display: inline-block;}

*/


.dropdown {border:1px solid hsla(0,0%,15%,0.10);}
.dropdown a{width: 100%; color:hsla(0,0%,15%,0.90);}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    width: 18%; font-size: 1em;
    background-color: white;
}

.dropbtn {
 
  padding: 5px; /* Espaçamento interno */
  border: none; /* Remover bordas */
  cursor: pointer; /* Mudar o cursor para pointer */
  border-radius: 5px; /* Bordas arredondadas (opcional) */
  width: 100%;
  font-size: 1.08em;
}


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}

/* Links inside the dropdown */
.dropdown-content a {
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    padding: 3% 3% 3% 5%;
    border: 1px solid #999999;
    width: 100%; 
    text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {font-weight: bold}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {font-weight: bold; }

.info{width: 90%; display: block; margin-top: 3px;}
.info p{
  text-align: justify; 
  text-indent: 1.5em;
  color:hsla(0,0%,30%,1.00);
}

.premium{border:2px solid rgb(236, 243, 131); border-radius: 2px;}
a.premium:hover{.premium{border:2px solid rgb(202, 209, 95);}}


.incluirCenas{border:1px solid hsla(265,79%,59%,1.00); margin-left: 1%; padding:3px 6px;}
.incluirCenas:hover{color:white; background-color: hsla(265,79%,59%,1.00); font-weight: bold;}