body.post-type-archive-personagens{
padding-top: 80px;
background: #272126 url(//www.storyland.com.br/wp-content/themes/storyland2015/images/personagens/personagens-bg.jpg) no-repeat center top fixed;
}
#personagens-wrapper{
overflow: hidden;
position: relative;
}
#personagens-wrapper .elemento{
position: absolute;
z-index: 9;
}
#personagens-wrapper #elemento-balao{
top: 2600px;
right: 2%;
}
#personagens-wrapper #elemento-pipa{
top: 250px;
left: 5%;
}
#personagens-wrapper #elemento-superrapaz{
top: 2500px;
right: 1%;
}
#personagens-wrapper #elemento-zeppelin{
top: 800px;
right: 0%;
}
#personagens-wrapper #elemento-aviao{
top: 1480px;
left: 15%;
} #personagens-wrapper #personagens-header{
max-width: 1000px;
margin: 0 auto;
position: relative;
padding: 130px 0 60px 0;
}
@media (max-width: 600px){
#personagens-wrapper #personagens-header{
padding: 70px 0 240px 0;
}
}
#personagens-wrapper #personagens-header #personagens-header-content{
padding: 30px 40px;
position: relative;
z-index: 1;
}
@media (max-width: 600px){
#personagens-wrapper #personagens-header #personagens-header-content{
text-align: center;
}
}
#personagens-wrapper #personagens-header #personagens-header-content h2{
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
color: #efab1e;
position: relative;
left: -2px;
margin-bottom: 5px;
}
@media (max-width: 710px){
#personagens-wrapper #personagens-header #personagens-header-content h2{
font-size: 40px;
}
}
@media (max-width: 600px){
#personagens-wrapper #personagens-header #personagens-header-content h2{
font-size: 50px;
}	
}
#personagens-wrapper #personagens-header #personagens-header-content p{
font-size: 15px;
line-height: 20px;
max-width: 300px;
color: #fffbd4;
}
@media (max-width: 600px){
#personagens-wrapper #personagens-header #personagens-header-content p{
margin: 0 auto;
}	
}
#personagens-wrapper #personagens-header img{
height: auto;
width: 500px;
position: absolute;
bottom: 0;
right: -20px;
}
@media (max-width: 710px){
#personagens-wrapper #personagens-header img{
width: 450px;
}
}
@media (max-width: 600px){
#personagens-wrapper #personagens-header img{
width: 500px;
left: 50%;
margin-left: -290px;
right: auto;
}
} #personagens-wrapper #personagens{
margin: 0 auto;
overflow: hidden;
}
#personagens .personagem{
width: 100%;
overflow: hidden;
float: left;
position: relative;
}
@media (min-width: 600px){
#personagens .personagem{
width: 50%;
}	
}
@media (min-width: 900px){
#personagens .personagem{
width: 33.3333%;
}
}
@media (min-width: 1100px){
#personagens .personagem{
width: 25%;
}
}
@media (min-width: 1450px){
#personagens .personagem{
width: 20%;
}
}
#personagens .personagem .personagem-foto-wrapper{
width: 300%;
height: 320px;
position: relative;
background: #272126;
}
#personagens .personagem .personagem-foto{
width: 33.333333333%;
height: 320px;
display: block;
float: left;
position: relative;
bottom: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-transition: all 300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition: all 300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition: all 300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition: all 300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
@media (min-width: 600px){
html.mobile #personagens .personagem .personagem-foto,
html.touch #personagens .personagem .personagem-foto,
#personagens .personagem:hover .personagem-foto{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
bottom: 30px;
}
}
@media (max-width: 600px){
#personagens .personagem .personagem-foto{
height: 400px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;		
}
}
#personagens .personagem .personagem-info{
padding: 5%;
width: 90%;
background: #57375b;
position: static;
float: left;
-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
@media ( min-width: 600px ){
#personagens .personagem .personagem-info{
float: none;
width: auto;
padding: 20px;
position: absolute;
left: 0px;
right: 0px;
bottom: -200px;
}
html.mobile #personagens .personagem .personagem-info,
html.touch #personagens .personagem .personagem-info,
#personagens .personagem:hover .personagem-info{
bottom: 0px;
}
}
#personagens .personagem .personagem-info h3{
font-size: 16px;
text-transform: uppercase;
font-weight: 900;
color: #fffbd4;
}
#personagens .personagem .personagem-info hr{
width: 30px;
height: 3px;
border: none;
background: #efab1e;
margin: 20px 0 10px 0;
}
#personagens .personagem .personagem-info p{
font-size: 14px;
line-height: 18px;
font-style: italic;
color: #fffbd4;
margin-bottom: 10px;
}
#personagens .personagem .personagem-info a{
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
color: #efab1e;
letter-spacing: 1px;
}