.titulo-pag {
    display: table;
    width: 80%;
    margin: 0 auto;
    padding: 4% 0;
}

.titulo-pag p {
    font-family: gothic-regular;
    text-align: center;
    font-size: 1.3em;
}

.bloco-peca {
    display: table;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 4%;
}

.banner {
    display: block;
    width: 100%;
}

.titulo {
    display: table;
    width: 100%;
    padding: 10px 0;
}

.titulo p {
    text-align: left;
    font-family: gothic-bold;
    font-size: 2em;
    display: inline-block;
}

.icone-classif {
    display: inline-block;
    float: right;
}

.sinopse {
    display: table;
    width: 100%;
    padding: 2% 0;
}

.sinopse p {
    font-family: gothic-regular;
    font-size: 1.2em;
    text-align: justify;
}

.botao-mais {
    display: table;
    width: 100%;
}

.botao-mais a {
    display: block;
    text-align: center;
    font-family: gothic-bold;
    color: #000;
    height: 60px;
    line-height: 60px;
    font-size: 1.5em;
    width: 300px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fc0;
}

.botao-mais a:hover {
    background-color: #ff0;
}

/*Botões Classificação*/
.classificacao {
    display: table;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 100px;
}

.texto-classif {
    display: table;
    width: 100%;
    padding: 2px 0;
}

.texto-classif p {
    font-family: gothic-regular;
    font-size: 1.2em;
    text-align: center;
}

.icones-mob {display: none;}

.botao-classif {
    display: table;
    width: 100%;
    margin: 0 auto;
    padding-top: 40px;
}

.botao-classif ul {
    display: inline-block;
    width: 100%;
}

.botao-classif li {
    display: inline-block;
    width: 10.7%;
}

.botao-classif img {
    display: block;
    margin: 0 auto;
}

/**balões de dica**/
.tooltip1, .tooltip2, .tooltip3, .tooltip4, .tooltip5, .tooltip6, .tooltip7 {
    display:block;
    position:relative;
    text-decoration: none;
}

.tooltip1:hover:after, .tooltip2:hover:after, .tooltip3:hover:after, .tooltip4:hover:after, .tooltip5:hover:after, .tooltip6:hover:after, .tooltip7:hover:after {
    border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
	opacity: 0.9;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	-webkit-opacity:0.9;		
	padding: 5px;
    bottom: -70px;
    left: -45px;
	content: attr(tooltip); /* O macete */
	display: block;
    width: 200px;
    height: 40px;
    position: absolute;
	z-index: 98;
	font-family: gothic-regular;
	font-size: 14px;
    text-align: center;
    
}

.tooltip1:hover:after{
    background: #096;		
   	color: #fff;
}

.tooltip2:hover:after{
    background: #09f;		
   	color: #fff;
}

.tooltip3:hover:after{
    background: #fc0;		
   	color: #000;
}

.tooltip4:hover:after{
    background: #f60;		
   	color: #fff;
}

.tooltip5:hover:after{
    background: #f00;		
   	color: #fff;
}

.tooltip6:hover:after{
    background: #000;		
   	color: #fff;
}

.tooltip7:hover:after{
    background: #ddd;		
   	color: #000;
    border: 2px #000 solid;
}

/*Telas até 1100px*/
@media (max-width:1100px) {
    .titulo-pag, .bloco-peca, .classificacao {
        width: 90%;
    }
}

/*Telas até 900px*/
@media (max-width:900px) {
    .titulo-pag, .bloco-peca, .classificacao {
        width: 96%;
    }
    
    .botao-classif {
        display: none;
    }
    
    .icones-mob {
        display: table;
        margin: 0 auto;
        width: 100%;
        padding-top: 30px;
    }
    
    .icones-mob img {
        display: block;
        margin: 0 auto;
        max-width: 400px;
        min-width: 300px;
        width: 50%;
    }
    
    .classificacao {
        margin-bottom: 50px;
    }
    
}

/*Telas até 800px */
@media (max-width:800px) {
    .titulo-pag p, .sinopse p {
        font-size: 1em;
    }
    
    .bloco-peca {
        width: 94%;
    }
    
    .texto-classif {
        width: 60%;
        margin: 0 auto;
    }
}

/*Telas até 680px */
@media (max-width:680px) {
    .titulo-pag {
        width: 94%;
        padding: 50px 0;
    }
    
    .titulo p {
        width: 100%;
    }
    
    .icone-classif {
        float: left;
        padding: 20px 0 5px 0;
    }
    
    .botao-mais {
        padding: 30px 0;
    }
}

/*Telas até 480px*/
@media (max-width:480px) {
    .icones-mob img {
        width:80%;
    }
    
    .titulo p {
        font-size: 1.8em;
    }
}

/*Telas até 330px*/
@media (max-width:330px) {
    .titulo-pag {
        width:90%;
    }
    
    .titulo p {
        font-size: 1.3em;
    }
    
    .sinopse p {
        font-size: 1em;
    }
    
    .botao-mais a {
        width: 290px;
    }
    
    .texto-classif {
        width: 90%;
    }
}


