/* Autor: [Seu nome] */
/* ==========================================================================
 * Reset
 * ========================================================================== */
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
select,textarea, input{
    font-size: inherit;
}
/* ==========================================================================
 * @Font-face
 * ========================================================================== */
 

@font-face {
    font-family: 'HouseMovementsSign';
    src: url('../fonts/mplus-2p-medium.eot');
    src: url('../fonts/mplus-2p-medium.woff') format('woff'),
         url('../fonts/mplus-2p-medium.ttf') format('truetype'),
         url('../fonts/mplus-2p-medium.svg') format('svg');
}

.mobile {
    display: none;
}

/* ==========================================================================
 * Helpers
 * ========================================================================== */

/* Image replacement */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    text-indent: -9999px;
}

/* A better looking default horizontal rule  */

.clear {
    clear: both;
}

.hidden {

    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: visibility 0.2s linear, opacity 0.2s linear; 
    -moz-transition: visibility 0.2s linear, opacity 0.2s linear; 
    -o-transition: visibility 0.2s linear, opacity 0.2s linear;
}


.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
 * Sprite
 * ========================================================================== */
 .sprite-btns {
    background: transparent url(../img/sprite_btns.png) 0 0 no-repeat;
 }

/* ==========================================================================
 * Style
 * ========================================================================== */

body {
    color: #737373;
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;   
    line-height: auto; 
}

a {
    text-decoration: none;
    color: #000;
}


a:hover {
    color: #808080;
}

.container {
    min-height: 400px;
    background-color: #eeede8;
}
.center {
    width: 960px;
    margin: 0 auto;   
    position: relative; 
    z-index: 30;
}


#header {
    width: 100%;
    height: 81px;
    transition: height 0.3s;
    -webkit-transition: height 0.3s;
    background: #eeede8; /* Safari */
}

.logo-graac {
    width: 127px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 21px;
    background: url('../img/logo-graac.png') no-repeat;
    
}

#header .txt {
    position: absolute;
    left: 158px;
    top: 37px;
    font-size: 10px;
}

.logo-carequinhas {
    width: 278px;
    height: 193px;    
    position: absolute;
    left: 0px;
    top: -3px;
    background: url('../img/logo-carequinhas.png') no-repeat;
}

#nav {
    position: relative;
    left: 405px;
    top: 17px;
    width: 321px;
    height: 50px;
    
}

#nav li {
    float: left;
    height: 16px;
    background: url('../img/dot-nav.png') no-repeat 196px 11px;
    padding: 15px 20px
}

#nav .last {
    background: none;
}


#nav a {
    font: 16px/15px 'HouseMovementsSign';
    text-transform: uppercase;
    color: #515151;;;
}

#join {
    margin-top: 100px;
}

#social {
    left: 720px;
    top: 31px;
    width: 250px;
    position: absolute;
}

#social li {
    float: left;
    margin-right: 20px;
}

#social .last {
    float: left;
    margin-right: 0px;
}

#banner {
    width: 100%;
    height: 318px;

}
.bg-banner{
    width: 100%;
    height: 318px;
    position: absolute; 
    -webkit-transition: opacity 0.9s ease-in-out;
    -moz-transition: opacity 0.9s ease-in-out;
    -o-transition: opacity 0.9s ease-in-out;
    transition: opacity 0.9s ease-in-out;
}
.animationtransparent {
    opacity:0;
}
#bg_bottom{
    z-index: 10;
}
#bg_top {
    z-index: 20;
}

#txt-destaque {
    position: absolute;
    left:0px;
    width:330px;
    height:50px;
    top:241px;

}

#txt-destaque h1{
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 10px;
    color: #737373;
    font-weight: bold;
    width: 245px;
    padding: 60px 0 0px 47px;
    text-align: center;
}

#txt-destaque #share {
    width: 114px;
    height: 40px;
}

#avatar-facebook {
    position: absolute;
    height: 126px;
    width: 264px;
    left:660px;
    top:131px;
}

#avatar-facebook img{
    float: left;
    margin-right: 20px;
}

#avatar-facebook h3{
    float: left;
    font: 26px/30px 'HouseMovementsSign';
    color: #000;
    margin-bottom: 10px;
}

#avatar-facebook a{
    float: left;
    background: url('../img/btn-download.png') no-repeat;
    height: 39px;
    width: 92px;
}

#share span {
    color: #515151;
    font-size: 10px;
}

#share a {
    float: left;
    width: 29px;
    height: 29px;
    background: url('../img/sprite-share.png') no-repeat;
    margin-right: 9px;
    margin-top: 4px;
}

#share .twitter {
    background-position: -35px 0;    
}

#share .google {
    background-position: -73px 0;      
}

#content {
    width: 100%;
    background: url('../img/bg-content.png') repeat-x #EEEDE8;
    border-bottom:#000 3px solid;
    padding:15px 0 20px 0;
    min-height: 500px;
}

#content .center {
    width: 980px;
}
#footer {
    width: 100%;
    height: 505px;
    background: url('../img/bg-footer.png') repeat-x;
}

#footer h2 {
    font: 32px/15px 'HouseMovementsSign';
    color: #000;
    padding: 61px 0 27px;
    letter-spacing: 1px;
}

#ajude {
    width: 960px;
    height: 373px;
    float: left;
    position: relative;
    padding-top: 47px;
}

#ajude h3 {
    width: 212px;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
}

#ajude p {
    font-size: 12px;
    line-height: 20px;
    text-align: justify;
    padding-top: 19px;
}


#ajude a {
    width: 237px;
    height: 48px;
    margin-bottom: 56px;
    float: left;
    background: transparent url(../img/sprite_btns.png) -63px -862px no-repeat;
}

#ajude a:hover {
    background-position: -312px -862px ;
}

#ajude a:active {
    background-position: -563px -860px ;
}

#personagem-footer {
    position: absolute;
    width: 701px;
    height: 220px;
    background: url('../img/destaque_participe.jpg') no-repeat;
    top:50px;
    right: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.3);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.3);        
}

#lojinha {
    width: 644px;
    padding-left: 6px;
    float: left;
    margin-bottom: 65px;
}

#lojinha ul {
    width: 540px;
    float: left;
}

#lojinha li {
    width: 140px;
    float: left;
    margin-right: 50px;
}

#lojinha li.last {
    margin-right: 0px;
}

#lojinha p {
    font-size: 14px;
    margin-bottom: 9px;
}

#lojinha img {
    width: 140px;
    height: 140px;
    margin-bottom: 15px;
}


#lojinha span {
    font-size: 25px;
    display: block;
    margin-bottom: 21px;
    font-weight: bold;
}

#lojinha a {
    width: 113px;
    height: 47px;
    float: left;
    background: url('../img/comprar.png');
}

#links-footer {
    position: relative;
    width: 960px;
    height: 50px;
    background: url('../img/hr-footer.png') top center no-repeat;
    float: left;
}

#links-footer li {
    float: left;
    height: 46px;
    padding: 36px 30px 0 0
}

#links-footer a {
    font: 18px/15px 'HouseMovementsSign';
    text-transform: uppercase;
}

#presented{
    position: absolute;
    right: 0;
    top: 37px;
}


#presented em{
    float: left;
    font-size: 12px;
    padding-top: 10px;
}

#presented img{
    float: left;
    padding: 0 15px;
}


/* ==========================================================================
 * Slider
 * ========================================================================== */

#slider {
    height: 85px;
    margin-bottom: 20px;
}

.next, .prev {
    width: 32px;
    height: 54px;
    background: transparent url(../img/sprite_btns.png) -111px -434px no-repeat;
    position: absolute;
    overflow: hidden;
    text-indent: -999px;
    top: 17px;
    cursor: pointer;
}

.next {
    right: 30px;
    background-position: -118px -536px;
}

#modal .next {
    right: 67px;
    top:575px;
}

.next:hover {
    background-position: -119px -536px;
}

.next:active {
    background-position:-622px -533px;
}

.next.inactive {
    background-position: -231px -536px;
    cursor: default;
}

.prev {
    left: 0;
}

#modal .prev {
    left: 8px;  
    top:575px; 
}
.prev:hover {
    background-position: -360px -434px
}
.prev:active {
    background-position: -614px -432px
}
.prev.inactive {
    background-position: -224px -434px;
    cursor: default;
}

#modal .jcarousel-wrapper-image .next, #modal .jcarousel-wrapper-image .prev{
    top: 405px;
    width: 153px;
    height: 51px;
}

#modal .jcarousel-wrapper-image .prev{
    background-position: -67px -638px;
    left: 0;
    z-index: 10;
}

#modal .jcarousel-wrapper-image .next{
    background-position: -67px -746px;
    right: 0;
    z-index: 10;
}

#modal .jcarousel-wrapper-image .prev:hover{

    background-position: -316px -638px;
}

#modal .jcarousel-wrapper-image .next:hover{

    background-position: -317px -746px;
}

#modal .jcarousel-wrapper-image .prev:active{

    background-position: -569px -636px;
}

#modal .jcarousel-wrapper-image .next:active{

    background-position: -575px -745px;
}

.balaoBanner{
    width: 340px;
    height: 200px;
    background: transparent url(../img/balao-destaque.png) no-repeat;
    position: absolute;
    top: 100px;
}
.balaoBanner h2{
    color: #3b3b3b;
    width: 259px;
    margin: 0 auto;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    margin-top: 32px;
}
.balaoBanner #share{
    position: absolute;
    left: 148px;
    width: 200px;
    bottom: 27px;
}

.table {
    position: absolute;
    top: -45px;
    width: 891px;
    overflow: hidden;
    left:33px
}


#slider ul {
    list-style: none;
    text-align: center;  
    height: 85px;
    overflow: hidden;
    padding-top: 40px;
    width: 20000em;
    position: relative;
}

#slider ul li {
    float: left;
    cursor: pointer;
    height: 100px;
    width: 99px;
    position: relative;
}

#slider ul li:first-child {
    display: none;
}

#slider img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;    
}


#paginate {
    display: none;
}

#slider .top:hover {
    opacity: 0;  
}

#slider .tooltip {
    position: fixed;
    width: 81px;
    height: 58px;
    top: 382px;
    background: url('../img/balao.png') no-repeat;
    opacity: 0;
    transition: opacity 0.3s, right 0.5s;
    z-index: 999
}

#slider ul span {
    display: none;
}


#slider .tooltip p {
    width: 75px;
    height: 50px;
    font: 9px/11px 'HouseMovementsSign';
    color: #000;
    opacity: 1;
    transition: opacity 0.2s, right 0.5s;
    text-transform: uppercase;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}


#slider .hover {
    opacity: 1;  
}

#slider .active .top {
    opacity: 0;
}
#slider .active span {
    opacity: 1;
    right: -56px;
}


/* ==========================================================================
 * Grid
 * ========================================================================== */

.grupo-a {
    width: 476px;
    float: left;
    min-height: 480px;
}
.grupo-a li a, .grupo-b li a, .grupo-c li a  {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.grupo-b {
    width: 240px;
    float: left;
}

.grupo-c {
    width: 240px;
    float: left;
}

#lista li {
    float: left;
    margin:8px;
    position: relative;
    cursor: pointer;
    opacity: 0;
    
}

.lt-ie9 #lista li {
    opacity: 1;
}

#lista li.seguencia0{
    -webkit-animation: teste 1s ease 0s forwards; 
     -moz-animation: teste 1s ease 0s forwards; 
     animation: teste 1s ease 0s forwards; 
}

#lista li.seguencia1{
    -webkit-animation: teste 1s ease 0.1s forwards;     
     -moz-animation: teste 1s ease 0.1s forwards;     
     animation: teste 1s ease 0.1s forwards;     
}

#lista li.seguencia2{
    -webkit-animation: teste 1s ease 0.2s forwards;     
     -moz-animation: teste 1s ease 0.2s forwards;     
     animation: teste 1s ease 0.2s forwards;     
}

#lista li.seguencia3{
    -webkit-animation: teste 1s ease 0.3s forwards;     
     -moz-animation: teste 1s ease 0.3s forwards;     
     animation: teste 1s ease 0.3s forwards;     
}

#lista li.seguencia4{
    -webkit-animation: teste 1s ease 0.4s forwards; 
     -moz-animation: teste 1s ease 0.4s forwards; 
     animation: teste 1s ease 0.4s forwards; 
}

#lista li.seguencia5{
    -webkit-animation: teste 1s ease 0.5s forwards;     
     -moz-animation: teste 1s ease 0.5s forwards;     
     animation: teste 1s ease 0.5s forwards;     
}

#lista li.seguencia6{
    -webkit-animation: teste 1s ease 0.6s forwards;     
     -moz-animation: teste 1s ease 0.6s forwards;     
     animation: teste 1s ease 0.6s forwards;     
}

#lista li.seguencia7{
    -webkit-animation: teste 1s ease 0.7s forwards;     
     -moz-animation: teste 1s ease 0.7s forwards;     
     animation: teste 1s ease 0.7s forwards;     
}

#lista li.seguencia8{
    -webkit-animation: teste 1s ease 0.8s forwards;     
     -moz-animation: teste 1s ease 0.8s forwards;     
     animation: teste 1s ease 0.8s forwards;     
}

#lista li.seguencia9{
    -webkit-animation: teste 1s ease 0.9s forwards;     
     -moz-animation: teste 1s ease 0.9s forwards;     
     animation: teste 1s ease 0.9s forwards;     
}

#lista li.seguencia10{
    -webkit-animation: teste 1s ease 1s forwards;     
     -moz-animation: teste 1s ease 1s forwards;     
     animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia11{
    -webkit-animation: teste 1s ease 1.1s forwards;     
     -moz-animation: teste 1s ease 1.1s forwards;     
     animation: teste 1s ease 1.1s forwards;     
}

#lista li.seguencia12{
    -webkit-animation: teste 1s ease 1.2s forwards;     
     -moz-animation: teste 1s ease 1.2s forwards;     
     animation: teste 1s ease 1.2s forwards;     
}

#lista li.seguencia13{
    -webkit-animation: teste 1s ease 1.3s forwards;     
     -moz-animation: teste 1s ease 1.3s forwards;     
     animation: teste 1s ease 1.3s forwards;     
}

#lista li.seguencia14{
    -webkit-animation: teste 1s ease 1.4s forwards;     
     -moz-animation: teste 1s ease 1.4s forwards;     
     animation: teste 1s ease 1.4s forwards;     
}

#lista li.seguencia15{
    -webkit-animation: teste 1s ease 1.5s forwards;     
     -moz-animation: teste 1s ease 1.5s forwards;     
     animation: teste 1s ease 1.5s forwards;     
}

#lista li.seguencia16{
    -webkit-animation: teste 1s ease 1.6s forwards;     
     -moz-animation: teste 1s ease 1.6s forwards;     
     animation: teste 1s ease 1.6s forwards;     
}

#lista li.seguencia17{
    -webkit-animation: teste 1s ease 1.7s forwards;     
    -moz-animation: teste 1s ease 1.7s forwards;     
    animation: teste 1s ease 1.7s forwards;     
}

#lista li.seguencia18{
    -webkit-animation: teste 1s ease 1.8s forwards;     
    -moz-animation: teste 1s ease 1.8s forwards;     
    animation: teste 1s ease 1.8s forwards;     
}

#lista li.seguencia19{
    -webkit-animation: teste 1s ease 1.9s forwards;     
    -moz-animation: teste 1s ease 1.9s forwards;     
    animation: teste 1s ease 1.9s forwards;     
}

#lista li.seguencia20{
    -webkit-animation: teste 1s ease 2s forwards;     
    -moz-animation: teste 1s ease 2s forwards;     
    animation: teste 1s ease 2s forwards;     
}

#lista li.seguencia21{
    -webkit-animation: teste 1s ease 2.1s forwards;     
    -moz-animation: teste 1s ease 2.1s forwards;     
    animation: teste 1s ease 2.1s forwards;     
}

#lista li.seguencia22{
    -webkit-animation: teste 1s ease 2.2s forwards;     
    -moz-animation: teste 1s ease 2.2s forwards;     
    animation: teste 1s ease 2.2s forwards;     
}

#lista li.seguencia23{
    -webkit-animation: teste 1s ease 2.3s forwards;     
    -moz-animation: teste 1s ease 2.3s forwards;     
    animation: teste 1s ease 2.3s forwards;     
}

#lista li.seguencia24{
    -webkit-animation: teste 1s ease 2.4s forwards;     
    -moz-animation: teste 1s ease 2.4s forwards;     
    animation: teste 1s ease 2.4s forwards;     
}

#lista li.seguencia25{
    -webkit-animation: teste 1s ease 2.5s forwards;     
    -moz-animation: teste 1s ease 2.5s forwards;     
    animation: teste 1s ease 2.5s forwards;     
}

#lista li.seguencia26{
    -webkit-animation: teste 1s ease 2.6s forwards;     
    -moz-animation: teste 1s ease 2.6s forwards;     
    animation: teste 1s ease 2.6s forwards;     
}

#lista li.seguencia27{
    -webkit-animation: teste 1s ease 2.7s forwards;     
    -moz-animation: teste 1s ease 2.7s forwards;     
    animation: teste 1s ease 2.7s forwards;     
}

#lista li.seguencia28{
    -webkit-animation: teste 1s ease 2.8s forwards;     
    -moz-animation: teste 1s ease 2.8s forwards;     
    animation: teste 1s ease 2.8s forwards;     
}

#lista li.seguencia29{
    -webkit-animation: teste 1s ease 2.9s forwards;     
    -moz-animation: teste 1s ease 2.9s forwards;     
    animation: teste 1s ease 2.9s forwards;     
}

#lista li.seguencia30{
    -webkit-animation: teste 1s ease 3s forwards;     
    -moz-animation: teste 1s ease 3s forwards;     
    animation: teste 1s ease 3s forwards;     
}

#lista li.seguencia31{
    -webkit-animation: teste 1s ease 0.1s forwards;     
    -moz-animation: teste 1s ease 0.1s forwards;     
    animation: teste 1s ease 0.1s forwards;     
}

#lista li.seguencia32{
    -webkit-animation: teste 1s ease 0.2s forwards;     
    -moz-animation: teste 1s ease 0.2s forwards;     
    animation: teste 1s ease 0.2s forwards;     
}

#lista li.seguencia33{
    -webkit-animation: teste 1s ease 0.3s forwards;     
    -moz-animation: teste 1s ease 0.3s forwards;     
    animation: teste 1s ease 0.3s forwards;     
}

#lista li.seguencia34{
    -webkit-animation: teste 1s ease 0.4s forwards; 
    -moz-animation: teste 1s ease 0.4s forwards; 
    animation: teste 1s ease 0.4s forwards; 
}

#lista li.seguencia35{
    -webkit-animation: teste 1s ease 0.5s forwards;     
    -moz-animation: teste 1s ease 0.5s forwards;     
    animation: teste 1s ease 0.5s forwards;     
}

#lista li.seguencia36{
    -webkit-animation: teste 1s ease 0.6s forwards;     
    -moz-animation: teste 1s ease 0.6s forwards;     
    animation: teste 1s ease 0.6s forwards;     
}

#lista li.seguencia37{
    -webkit-animation: teste 1s ease 0.7s forwards;     
    -moz-animation: teste 1s ease 0.7s forwards;     
    animation: teste 1s ease 0.7s forwards;     
}

#lista li.seguencia38{
    -webkit-animation: teste 1s ease 0.8s forwards;     
    -moz-animation: teste 1s ease 0.8s forwards;     
    animation: teste 1s ease 0.8s forwards;     
}

#lista li.seguencia39{
    -webkit-animation: teste 1s ease 0.9s forwards;     
    -moz-animation: teste 1s ease 0.9s forwards;     
    animation: teste 1s ease 0.9s forwards;     
}

#lista li.seguencia40{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia41{
    -webkit-animation: teste 1s ease 0.1s forwards;     
    -moz-animation: teste 1s ease 0.1s forwards;     
    animation: teste 1s ease 0.1s forwards;     
}

#lista li.seguencia42{
    -webkit-animation: teste 1s ease 0.2s forwards;     
    -moz-animation: teste 1s ease 0.2s forwards;     
    animation: teste 1s ease 0.2s forwards;     
}

#lista li.seguencia43{
    -webkit-animation: teste 1s ease 0.3s forwards;     
    -moz-animation: teste 1s ease 0.3s forwards;     
    animation: teste 1s ease 0.3s forwards;     
}

#lista li.seguencia44{
    -webkit-animation: teste 1s ease 0.4s forwards; 
    -moz-animation: teste 1s ease 0.4s forwards; 
    animation: teste 1s ease 0.4s forwards; 
}

#lista li.seguencia45{
    -webkit-animation: teste 1s ease 0.5s forwards;     
    -moz-animation: teste 1s ease 0.5s forwards;     
    animation: teste 1s ease 0.5s forwards;     
}

#lista li.seguencia46{
    -webkit-animation: teste 1s ease 0.6s forwards;     
    -moz-animation: teste 1s ease 0.6s forwards;     
    animation: teste 1s ease 0.6s forwards;     
}

#lista li.seguencia47{
    -webkit-animation: teste 1s ease 0.7s forwards;     
    -moz-animation: teste 1s ease 0.7s forwards;     
    animation: teste 1s ease 0.7s forwards;     
}

#lista li.seguencia48{
    -webkit-animation: teste 1s ease 0.8s forwards;     
    -moz-animation: teste 1s ease 0.8s forwards;     
    animation: teste 1s ease 0.8s forwards;     
}

#lista li.seguencia49{
    -webkit-animation: teste 1s ease 0.9s forwards;     
    -moz-animation: teste 1s ease 0.9s forwards;     
    animation: teste 1s ease 0.9s forwards;     
}

#lista li.seguencia50{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia51{
    -webkit-animation: teste 1s ease 0.1s forwards;     
    -moz-animation: teste 1s ease 0.1s forwards;     
    animation: teste 1s ease 0.1s forwards;     
}

#lista li.seguencia52{
    -webkit-animation: teste 1s ease 0.2s forwards;     
    -moz-animation: teste 1s ease 0.2s forwards;     
    animation: teste 1s ease 0.2s forwards;     
}

#lista li.seguencia53{
    -webkit-animation: teste 1s ease 0.3s forwards;     
    -moz-animation: teste 1s ease 0.3s forwards;     
    animation: teste 1s ease 0.3s forwards;     
}

#lista li.seguencia54{
    -webkit-animation: teste 1s ease 0.4s forwards; 
    -moz-animation: teste 1s ease 0.4s forwards; 
    animation: teste 1s ease 0.4s forwards; 
}

#lista li.seguencia55{
    -webkit-animation: teste 1s ease 0.5s forwards;     
    -moz-animation: teste 1s ease 0.5s forwards;     
    animation: teste 1s ease 0.5s forwards;     
}

#lista li.seguencia56{
    -webkit-animation: teste 1s ease 0.6s forwards;     
    -moz-animation: teste 1s ease 0.6s forwards;     
    animation: teste 1s ease 0.6s forwards;     
}

#lista li.seguencia57{
    -webkit-animation: teste 1s ease 0.7s forwards;     
    -moz-animation: teste 1s ease 0.7s forwards;     
    animation: teste 1s ease 0.7s forwards;     
}

#lista li.seguencia58{
    -webkit-animation: teste 1s ease 0.8s forwards;     
    -moz-animation: teste 1s ease 0.8s forwards;     
    animation: teste 1s ease 0.8s forwards;     
}

#lista li.seguencia59{
    -webkit-animation: teste 1s ease 0.9s forwards;     
    -moz-animation: teste 1s ease 0.9s forwards;     
    animation: teste 1s ease 0.9s forwards;     
}

#lista li.seguencia60{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia61{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia62{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia63{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia64{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia65{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia66{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia67{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia68{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia69{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia70{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia71{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia72{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia73{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia74{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia75{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia76{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia77{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia78{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia79{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia80{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia81{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia82{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia83{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia84{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia85{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia86{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia87{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia88{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}

#lista li.seguencia89 {
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;  
}

#lista li.seguencia90{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}


#lista li.seguencia91{
    -webkit-animation: teste 1s ease 1s forwards;     
    -moz-animation: teste 1s ease 1s forwards;     
    animation: teste 1s ease 1s forwards;     
}






@-webkit-keyframes teste /* Safari and Chrome */
{
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes teste /* Safari and Chrome */
{
    from {opacity: 0;}
    to {opacity: 1;}
}

#lista .fade.seguencia0{
    -webkit-animation: fade 0s forwards;     
    -moz-animation: fade 0s forwards;     
    animation: fade 0s forwards;     
}

#lista .fade.seguencia1{
    -webkit-animation: fade 0.1s forwards;     
    -moz-animation: fade 0.1s forwards;     
    animation: fade 0.1s forwards;     
}

#lista .fade.seguencia2{
    -webkit-animation: fade 0.2s forwards;     
    -moz-animation: fade 0.2s forwards;     
    animation: fade 0.2s forwards;     
}

#lista .fade.seguencia3{
    -webkit-animation: fade 0.3s forwards;     
    -moz-animation: fade 0.3s forwards;     
    animation: fade 0.3s forwards;     
}

#lista .fade.seguencia4{
    -webkit-animation: fade 0.4s forwards; 
    -moz-animation: fade 0.4s forwards; 
    animation: fade 0.4s forwards; 
}

#lista .fade.seguencia5{
    -webkit-animation: fade 0.5s forwards;     
    -moz-animation: fade 0.5s forwards;     
    animation: fade 0.5s forwards;     
}

#lista .fade.seguencia6{
    -webkit-animation: fade 0.6s forwards;     
    -moz-animation: fade 0.6s forwards;     
    animation: fade 0.6s forwards;     
}

#lista .fade.seguencia7{
    -webkit-animation: fade 0.7s forwards;     
    -moz-animation: fade 0.7s forwards;     
    animation: fade 0.7s forwards;     
}

#lista .fade.seguencia8{
    -webkit-animation: fade 0.8s forwards;     
    -moz-animation: fade 0.8s forwards;     
    animation: fade 0.8s forwards;     
}

#lista .fade.seguencia9{
    -webkit-animation: fade 0.9s forwards;     
    -moz-animation: fade 0.9s forwards;     
    animation: fade 0.9s forwards;     
}

#lista .fade.seguencia10{
    -webkit-animation: fade 1s forwards;     
    -moz-animation: fade 1s forwards;     
    animation: fade 1s forwards;     
}

#lista .fade.seguencia11{
    -webkit-animation: fade 1.1s forwards;     
    -moz-animation: fade 1.1s forwards;     
    animation: fade 1.1s forwards;     
}

#lista .fade.seguencia12{
    -webkit-animation: fade 1.2s forwards;     
    -moz-animation: fade 1.2s forwards;     
    animation: fade 1.2s forwards;     
}

#lista .fade.seguencia13{
    -webkit-animation: fade 1.3s forwards;     
    -moz-animation: fade 1.3s forwards;     
    animation: fade 1.3s forwards;     
}

#lista .fade.seguencia14{
    -webkit-animation: fade 1.4s forwards;     
    -moz-animation: fade 1.4s forwards;     
    animation: fade 1.4s forwards;     
}

#lista .fade.seguencia15{
    -webkit-animation: fade 1.5s forwards;     
    -moz-animation: fade 1.5s forwards;     
    animation: fade 1.5s forwards;     
}

#lista .fade.seguencia16{
    -webkit-animation: fade 1.6s forwards;     
    -moz-animation: fade 1.6s forwards;     
    animation: fade 1.6s forwards;     
}

#lista .fade.seguencia17{
    -webkit-animation: fade 1.7s forwards;     
    -moz-animation: fade 1.7s forwards;     
    animation: fade 1.7s forwards;     
}

#lista .fade.seguencia18{
    -webkit-animation: fade 1.8s forwards;     
    -moz-animation: fade 1.8s forwards;     
    animation: fade 1.8s forwards;     
}

#lista .fade.seguencia19{
    -webkit-animation: fade 1.9s forwards;     
    -moz-animation: fade 1.9s forwards;     
    animation: fade 1.9s forwards;     
}

#lista .fade.seguencia20{
    -webkit-animation: fade 2s forwards;     
    -moz-animation: fade 2s forwards;     
    animation: fade 2s forwards;     
}

#lista .fade.seguencia21{
    -webkit-animation: fade 2.1s forwards;     
    -moz-animation: fade 2.1s forwards;     
    animation: fade 2.1s forwards;     
}

#lista .fade.seguencia22{
    -webkit-animation: fade 2.2s forwards;     
    -moz-animation: fade 2.2s forwards;     
    animation: fade 2.2s forwards;     
}

#lista .fade.seguencia23{
    -webkit-animation: fade 2.3s forwards;     
    -moz-animation: fade 2.3s forwards;     
    animation: fade 2.3s forwards;     
}

#lista .fade.seguencia24{
    -webkit-animation: fade 2.4s forwards;     
    -moz-animation: fade 2.4s forwards;     
    animation: fade 2.4s forwards;     
}

#lista .fade.seguencia25{
    -webkit-animation: fade 2.5s forwards;     
    -moz-animation: fade 2.5s forwards;     
    animation: fade 2.5s forwards;     
}

#lista .fade.seguencia26{
    -webkit-animation: fade 2.6s forwards;     
    -moz-animation: fade 2.6s forwards;     
    animation: fade 2.6s forwards;     
}

#lista .fade.seguencia27{
    -webkit-animation: fade 2.7s forwards;     
    -moz-animation: fade 2.7s forwards;     
    animation: fade 2.7s forwards;     
}

#lista .fade.seguencia28{
    -webkit-animation: fade 2.8s forwards;     
    -moz-animation: fade 2.8s forwards;     
    animation: fade 2.8s forwards;     
}

#lista .fade.seguencia29{
    -webkit-animation: fade 2.9s forwards;     
    -moz-animation: fade 2.9s forwards;     
    animation: fade 2.9s forwards;     
}

#lista .fade.seguencia30{
    -webkit-animation: fade 3s forwards;     
    -moz-animation: fade 3s forwards;     
    animation: fade 3s forwards;     
}

@-webkit-keyframes fade /* Safari and Chrome */
{
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fade /* Safari and Chrome */
{
    from {opacity: 1;}
    to {opacity: 0;}
}

#lista li.splash {
    background: none;
}

#lista img {
    opacity: 1;
    transition: opacity 0.2s;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.3);
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.3);    
}

#lista img:hover {
    opacity: 0.6;
}

#lista h4 {
    position: absolute;
    width: 150px;
    height: 44px;
    background: url('../img/bg-nome-personagem.png') no-repeat;
    font: 11px 'HouseMovementsSign';
    text-align: center;
    bottom: -18px;
    left: -25px;
    padding-top: 13px;
    color: #000;
    opacity: 0;
    transition: opacity 0.2s, left 0.5s;
    text-transform: uppercase; 
}

#lista  img:hover + h4 {
    opacity: 1;
    left: -16px;
}

#lista li.splash img:hover + h4 {
    opacity: 0;
    left: -16px;
}

/*#lista .avatar img {
    width: 220px;
    height: 220px;
}

#lista .download img {
    width: 220px;
    height: 460px;
}

#lista .video img{
    width: 460px;
    height: 220px;
}*/

#lista div.icone {
    position: absolute;
    width: 39px;
    height: 41px;
    background: transparent url(../img/sprite_btns.png) -750px -10px no-repeat;
    bottom: 12px;
    right: 11px;
    cursor: pointer;
}

#lista div.tira {
    background-position: -869px -8px;
    width: 45px;
    height: 43px;
}

#lista div.download {
    background-position: -993px -9px;
    width: 38px;
    height: 44px;
}

#lista li.splash-filmes, #lista li.splash-quadrinhos, #lista li.splash-download {
    width: 220px;
    height: 220px;
}

#lista div.splash-filmes, #lista div.splash-quadrinhos, #lista div.splash-download {
    background: none;
}

#lista li.splash-filmes h4, #lista li.splash-quadrinhos h4, #lista li.splash-download h4 {
    display: none;
}

#lista li.splash-filmes {
    background: transparent url(../img/splash-filmes.png) no-repeat;
}

#lista li.splash-filmes:hover{
    background-position: -260px 0;
}

#lista li.splash-quadrinhos:hover{
    background-position: -272px 0;
}

#lista li.splash-download:hover {
    background-position: -270px 0;
}


#lista li.splash-quadrinhos {
    background: transparent url(../img/splash-quadrinhos.png) -4px 0 no-repeat;
}

#lista li.splash-quadrinhos img {
    display: none;
}

#lista li.splash-download {
    background: transparent url(../img/splash-download.png) no-repeat;
}

#lista li.splash-download img {
    display: none;
}

#lista div.avatar {
    background: transparent url(../img/facebook-avatar.png) 0 0 no-repeat;;
}

#lista li.splash-filmes img {
    display: none;
}


/* ==========================================================================
 * Lightbox
 * ========================================================================== */

.md-modal {
    position: absolute;
    top: 60%;
    left: 50%;
    max-width: 685px;
    min-width: 882px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-60%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
}

.vd-modal {
    position: absolute;
    top: 60%;
    left: 50%;
    max-width: 685px;
    min-width: 882px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
}

.md-show {
    visibility: visible;
    opacity: 1;
}


.md-show-interno {
    visibility: visible;
    opacity: 1;
}

.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

.md-show-interno ~ .md-overlay {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;    
}

/* Content styles */
.md-content {
    width: 882px;
    height: 685px;
    background: url('../img/bg-lightbox.png') no-repeat;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
}

/* Individual modal styles with animations/transitions */


/* Effect 8: 3D flip horizontal */


.md-effect.md-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.md-effect .md-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    -moz-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

.md-show-interno.md-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.md-show-interno .md-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
    opacity: 0;
}

.md-show.md-effect .md-content {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}

.md-show-interno.md-effect .md-content {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}



#fechar {
    position: absolute;
    width: 55px;
    height: 53px;
    right: 2px;
    top: 0px;
    cursor: pointer;
    background: transparent url(../img/sprite_btns.png) -108px -321px no-repeat;
}

#fechar:hover {
    background-position: -358px -321px;
}

#fechar:active {
    background-position: -615px -319px;
}


.md-content h4 {
    position: absolute;
    left: 50px;
    top: 25px;
    font: 12px 'HouseMovementsSign';
    color: #000;
}

.md-content h5 {
    position: absolute;
    left: 50px;
    top: 49px;
    font: 22px/15px 'HouseMovementsSign';
    color: #000;
    text-transform: uppercase;
    width: 542px;
}

#lightbox-share {
    position: absolute;
    left: 597px;
    top: 35px;
    width: 200px;
}

#lightbox-share span {
    position: absolute;
    left: 35px;
    font-size: 10px;
    top: 7px;
}

#lightbox-share ul {
    position: absolute;
    left: 70px;
    width: 150px;
}

#lightbox-share a {
    float: left;
    width: 35px;
    height: 35px;
    background: url('../img/sprite-share.png') no-repeat;
    margin-right: 2px;
}

#lightbox-share .twitter {
    background-position: -35px 0;    
}

#lightbox-share .google {
    background-position: -73px 0;      
}

.md-content #content-modal {
    position: absolute;
    left: 47px;
    top: 80px;
    background-color: #fff;
    width: 721px;
    height: 396px;
    border: #000 solid 4px;
    -webkit-border-radius: 4px;
            border-radius: 4px;
}

.md-content #content-modal.video {
    height: 438px;
}

.md-content #content-modal.hq {
    border:none;
    background: none;
}

#lightbox-nav {
    position: relative;
    list-style: none;
    height: 113px;
    overflow: hidden;
    width: 20000em;
}

#lightbox-nav li {
    float: left;
    width: 113px;
    height: 114px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}

#lightbox-nav a {
    float: left;
    width: 113px;
    height: 114px;
    position: relative;
}

#lightbox-nav li.first {
    border: 3px solid #000;
    border-bottom: 4px solid #000;
    width: 107px;
    height: 107px;
    position: relative;
}
#lightbox-nav li.first img {
    width: 107px;
    height: 107px;
}
#modal .jcarousel-modal {
    width: 729px;
    overflow: hidden;
    bottom: 29px;
    height: 113px;
    position: absolute;
    left: 48px
}

#lightbox-nav li .video{
    background: hugo;
}



#lightbox-nav li .icone {
    position: absolute;
    width: 28px;
    height: 25px;
    bottom: 7px;
    right: 3px; 
}

#lightbox-nav li.first .icone {
    right: 8px;
    bottom: 11px;
}


#lightbox-nav li .avatar {
    width: 22px;
    bottom: 4px;
    height: 22px;
    background: url('../img/avatar-modal.png') no-repeat;
}

#lightbox-nav li .tira {
    background: url('../img/tira-modal.png') no-repeat;
}

#lightbox-nav li .quadrinho {
    background: url('../img/tira-modal.png') no-repeat;
    width: 23px;
    height: 21px;
}

#lightbox-nav li .video {
    background: url('../img/video-modal.png') no-repeat;
}

#lightbox-nav li .download {
    background: url('../img/download-modal.png') no-repeat;
    width: 22px;

}






.light-logo-carequinhas {
    position: absolute;
    width: 281px;
    height: 143px;
    bottom: 18px;
    right: 75px;
}


#col-left {
    width: 390px;
    float: left;
    text-align: center;
}

#col-left img {
    width: 343px;
    padding-top: 25px;
}

.poster #col-left img {
    width: 240px;
}
.tira-modal img {
    width: 696px;
    margin: 0 auto;
    display: block;
}



#col-right {
    width: 295px;
    float: left;
    padding-top: 38px;
}

#col-right p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 15px;
}

#col-right .download {
    background: transparent url(../img/sprite_btns.png) -73px -15px no-repeat;
    width: 118px;
    height: 47px;
    float: left;
}

#col-right .download:hover {
    background-position: -320px -15px;
}

#col-right .download:active {
    background-position: -580px -13px;
}
.content-hq {
    width: 716px;
    position: absolute;
    left: 47px;
    top: 80px;
}
.jcarousel-wrapper-image {

}

.jcarousel-image {
    position: relative;
    width: 715px;
    overflow: hidden;
}

.jcarousel-image ul {
    list-style: none;
    text-align: center;
    height: 439px;
    overflow: hidden;
    width: 20000em;
    position: relative;
}

.jcarousel-image ul li {
    float: left;
    height: 396px;
    width: 716px;
}
.hq-page {
    width: 10px;
    height: 11px;
    background-color: #00b6ff;
    display: block;
    border-radius: 50%;
    float: left;
    cursor: pointer;
    margin-right: 10px;
}
.hq-page.active {
    background-color: #707070;
}
.wrap-pagination {
    text-align: center;
    position: relative;
    top: -25px;
    z-index: 1;
}
.jcarousel-pagination-image {
    display: inline-block;
}

/* ==========================================================================
 * AJUDE
 * ========================================================================== */

#banner-ajude {
    width: 100%;
    height: 318px;
    background: url('../img/ajude-banner.jpg') center 0 no-repeat;
 }

#texto-ajude {
    width: 710px;
    padding: 10px 0;
}

#texto-ajude h2{
    font: 40px/15px 'HouseMovementsSign';
    padding: 40px 0 40px 0;
    color: #000;
}

#texto-ajude p{
    font-size: 14px;
    line-height: 25px;
}

.personagem {
    position: absolute;
    width: 197px;
    height: 383px;
    background: url('../img/personagem.png') no-repeat;
    top:-99px;
    right: 50px;
}

.doacao {
    position: absolute;
    right: 20px;
    bottom: 0px;
    background: transparent url(../img/sprite_btns.png) -259px -834px no-repeat;
    width: 239px;
    height: 99px;
}

.doacao:hover {
    background-position: -10px -834px;
}

.doacao:active {
    background-position: -501px -834px;
}


#formulario {
    height: 365px;
}

#formulario div {
    float: left;
}

#formulario label {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

#formulario input {
    border: solid 1px #616161;
    background-color: #fff;
    height: 31px;
    padding: 4px 5px 5px 15px;
    float: left;
    margin-bottom: 30px;
    font-family: inherit;
    color: #737373;    
    
}

#formulario .custom_a {
    width: 366px;
    margin-right: 13px;
}

#formulario .custom_b {
    width: 202px;
    margin-right: 13px;
}

#formulario .custom_c {
    height: 42px;
    width: 305px;
    background: transparent url(../img/sprite-form.png) -637px -5px no-repeat;
    padding: 0 0 0 10px;
    margin-bottom: 30px;
    border:none;
    outline:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    cursor:pointer;
    text-indent: 0.01px;
    text-overflow: '';
    font-family: inherit;
    color: #737373;        
}

@-moz-document url-prefix() {
    
    #formulario .custom_c {
        padding: 12px 0 0 10px;
    }
}

#formulario option {
    padding: 5px 0 5px 10px;
    font-family:  inherit;
    color: #737373;        
}

#formulario .custom_d {
    padding: 15px 5px 5px 15px;
    width: 920px;
    height: 137px;
    margin-bottom: 25px;
    border: solid 1px #616161;
    background-color: #fff;    
    font-family: inherit;
    color: #737373;        

    
}

#formulario input.error {
    border: solid 1px red;
}

#formulario .custom_b.error {
    background-position: -403px -49px;
}

#formulario .custom_c.error {
    background-position: -637px -54px;
    color: #000;
}

#formulario .custom_d.error {
    border: solid 1px red;
}

#formulario span {
    font-size: 10px;
    float: left;
    display: block;
    width: 600px;
}

#formulario span.sucesso {
    font-size: 18px;
    color: #5bc25b;
}

#formulario span.erro {
    font-size: 18px;
    color: #ff0000;
}
#formulario span.enviando {
    font-size: 18px;
    color: #000;
}
#formulario .enviar{
    width: 152px;
    height: 62px;
    cursor: pointer;
    background: transparent url(../img/sprite_btns.png) -304px -1098px no-repeat;
    float: right;
    margin-right: 36px;
    border: none;
}

#formulario .enviar:hover{
    background-position: -55px -1098px;
}

#formulario .enviar:disabled{
    opacity: 0.5;
    background-position: -304px -1098px;
    
}

#formulario .enviar:active{
    background-position: -566px -1093px;
}


#video-link a{
    position: absolute;
    /*background: transparent url(../img/play-video.png) -10px -10px no-repeat;*/
    width: 145px;
    height: 145px;
    z-index: 21;
    left:50%;
  /* top: 200px;
    margin-left: -40px;
    left: 50%;*/
    top: 178px;
    margin-left: -48px;
    text-indent: -200px;
    text-indent: -200px;
    overflow: hidden;
}

#videoArea {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
 * Phone
 * ========================================================================== */

@media only screen and (max-width: 480px) {


    #video-link a{
        top: 120px;
    }


    /*ESCONDER ELEMENTOS*/
    .expanmenu,#lojinha, #links-footer ul, #avatar-facebook, #share span, #nav, #social, #lightbox, #overlay, .md-overlay, .md-modal, #txt-destaque .text, .next, .prev {
        display: none;    
     }
    /*ESCONDER ELEMENTOS*/

    .center, #links-footer, #content .center {
        width: 320px;
    }

    #header {
        height: 57px;
    }
     #header {
        height: 57px;
    }
    .balaoBanner{display: none}

    .logo-graac {
        left: 9px;
        top: 18px;
        -webkit-background-size: 90px;
             -o-background-size: 90px;
                background-size: 90px;
        
    }

    .logo-carequinhas {
        left: 0px;
        top: 0px;
        -webkit-background-size: 95%;
             -o-background-size: 95%;
                background-size: 95%;
        width: 170px;
        height: 110px;
    }

    #header .txt {
        left: 106px;
        top: 24px;
    }    

    .expanmenu {
        display: block;
        background: url('../img/phone/bg-menu.png');
        width: 38px;
        height: 27px;
        position: absolute;
        right: 10px;
        top:15px;
        cursor: pointer
    }

    #wrap {
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        transition: all .25s ease-out;
    }

    .open .container {
        border-right:#000 3px solid;
    }

    .open {
        position: absolute;
        right: 114px;
    }

    #nav {
        position: relative;
        left: 332px;
        top: 17px;
        width: 110px;
        display: block;
        display: none;
    }

    .open #nav, .open #social {
        display: block;        
    }

    #nav li {
        height: 78px;
        background: none;
        padding: 10px 0 10px 0;
        width: 85px;
        text-align: center;
        background: url('../img/phone/dot-nav.png') no-repeat bottom center;
    }

    #nav a {
        line-height: 23px;
    }    

    #nav .last {
        padding: 20px 0 0 0;
        height: 44px;
    }    

    #social {
        left: 330px;
        top: 177px;
        width: 104px;
        position: absolute;
        display: block;
        display: none;
    }

    .open #social {
        display: block;        
    }

    #social li {
        float: left;
        margin-right: 0 0 15px 0;
        height: 37px;
    }

    #social .last {
        padding-left: 0;
    }

    #content {
        padding-top: 0;
        padding-bottom: 15px;
    }

    #banner {
        height: 189px;
        background: url('../img/personagens/monica/phone-cenario.jpg') center 0 no-repeat;
     }    

    #txt-destaque h1{
        font-size: 10px;
        line-height: 14px;
        margin-bottom: 10px;
        color: #000;
        font-weight: bold;
        width: 157px;
        padding: 0;
        text-align:left;
        margin-bottom: 1px;
    }

    #txt-destaque #share {
        width: 114px;
        height: 40px;
        padding-left: 0px;
    }

    #txt-destaque {
        display: none;
    }

     #txt-destaque img {
         width: 50px;
     }

       #txt-destaque .mobile {
        display: block;
     }   

    #footer {
        height: 745px;
        background: #e0e0e0;
    }

    #footer h2 {
        font-size: 28px;
        padding: 18px 0 16px;
    }

    #ajude {
        padding: 20px;
        margin-bottom: -57px;
        width: 260px;
        height: 670px;
    }

    #ajude p{
        padding-top: 0px;
    }    

    #ajude h3 {
        font-size: 12px;
        width: 280px;
    }

    #personagem-footer {
        display: none;        
    }

    #links-footer em {
        top:28px;
        left:23px;
    } 

 

/* ==========================================================================
 * Slider
 * ========================================================================== */


#paginate {
    width: 96px;
    margin: 0 auto;
    display: block;
}

#paginate a {
    width: 8px;
    height: 8px;
    background-color: #00b6ff;
    display: block;
    border-radius: 50%;
    float: left;
    cursor: pointer;
    margin-right: 7px;
    text-indent: -999px;
    overflow: hidden;
}
#paginate a.active {
    background-color: #707070;
}


    #slider {
        background-color: #FFF;
        height: 125px;
        padding:5px 0;
        margin-bottom: 3px;
    }    

    #slider img {
        width: 65px;
    }

    #slider ul span {
        display: block;
    }

    #slider span {
        position: absolute;
        width: 60px;
        height: 35px;
        top: 65px;
        left: 0px;
        font: 13px/13px 'HouseMovementsSign';
        opacity: 1;
        background: none;
        display: block;
    }

    #slider .hover {
        display: none;
    }

    #slider p {
        right: -1px;
    }


    #slider ul li {
        width: 80px;
    }


    #slider ul {
        height: 100px;
        list-style: none outside none;
        margin-left: 10px;
        overflow: hidden;
        padding-top: 0;
        text-align: center;
        width: 1900px;
    }

    .table {
        width: 320px;
        height: 105px;
        overflow: hidden;
        display: block;
        position: static;
    }

    .table ul {
        width: 900px;
    }



/* ==========================================================================
 * Grid
 * ========================================================================== */

    .grupo-a {
        width: 320px;
        float: left;
        transition: width 0.5s;
        -webkit-transition: width 0.5s; /* Safari */
        min-height: inherit;
    }

    .grupo-b {
        width: 320px;
        float: left;
        transition: width 0.5s;
        -webkit-transition: width 0.5s; /* Safari */
    }

    .grupo-c {
        width: 320px;
        float: left;
        transition: width 0.5s;
        -webkit-transition: width 0.5s; /* Safari */
    }

    #lista li {
        margin:8px;
    }

    #lista img:hover {
        opacity: 1;
    }    

    #lista li.splash-filmes, #lista li.splash-quadrinhos, #lista li.splash-download {
        width: 142px;
        height: 142px;
        -webkit-background-size: 225%;
             -o-background-size: 225%;
                background-size: 225%;
    }

    #lista li.splash-filmes img, #lista li.splash-quadrinhos img, #lista li.splash-download img {
        display: none;
    }


    #lista li.splash-filmes:hover{
        background-position: 0 0;
    }

    #lista li.splash-quadrinhos:hover{
        background-position: -4px 0;
    }

    #lista li.splash-download:hover {
        background-position: 0 0;
    }


    #lista .w142 {
        width: 142px;
    }

    #lista img {
        width: 100%;
    }

    #lista h4 {
        position: absolute;
        width: 120px;
        height: 22px;
        bottom: 1px;
        left: -6px;
        padding-top: 8px;
        opacity: 1;
        text-transform: none;
        -webkit-background-size: 117px;
             -o-background-size: 117px;
                background-size: 117px;
    }

    #lista img:hover + h4 {
        opacity: 1;
        left: -6px;
    }

    #lista .icone {
        width: 34px;
        height: 32px;
        bottom: 2px;
        right: -4px;
        background-position:  -526px 1px;
        -webkit-background-size: 752px;
             -o-background-size: 752px;
                background-size: 752px;
    }

    #lista .tira {
        background-position:  -618px 1px;
    }

    #lista .jogo {
        background-position:  -752px 0px;
        width: 320px;
    }



#lista div.icone {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 8px;
    right: 3px;
     -o-background-size: 680px;
     background-size: 680px;
     -webkit-background-size: 680px;    
}

#lista div.tira {
    background-position: -567px -2px;
}

#lista div.avatar {
     -webkit-background-size: 23px;
          -o-background-size: 23px;
             background-size: 23px;
             width: 23px;
             height: 23px;
}

#lista div.video {
    background-position: -483px -2px;
}

#lista div.download {
    background-position: -639px -5px;

}


    /* ==========================================================================
     * AJUDE
     * ========================================================================== */

    #banner-ajude {
        height: 154px;
        -webkit-background-size: 407%;
             -o-background-size: 407%;
                background-size: 407%;
        background-position: -537px 0;
    }

    #texto-ajude {
        width: 290px;
        padding-left: 5px;
    }

    #texto-ajude h2{
        font: 28px/15px 'HouseMovementsSign';
        padding: 25px 0 25px 0;
    }

    #texto-ajude p{
        font-size: 12px;
        line-height: 20px;
    }

    #texto-ajude .first{
        width: 310px;
    }


    .personagem {
        position: absolute;
        width: 84px;
        height: 187px;
        -webkit-background-size: 100%;
             -o-background-size: 100%;
                background-size: 100%;
        top:-23px;
        right: 22px;
        display: none;
    }

    .doacao {
        float: left;
        background: transparent url(../img/phone/faca-sua-doacao.png) no-repeat;
        width: 253px;
        height: 48px;
        margin: 0px 0 20px 40px;
        position: relative;
        bottom: 0;
        right: 10px;
    }

    .doacao:hover {
        background-position: 0 0;
    }


    /* ==========================================================================
     * FORM
     * ========================================================================== */



    #formulario {
        height: 500px;
        padding-left: 5px;
    }


    #formulario span {
        width: 320px;
    }

    #formulario div {
        width: 308px;
    }

    #formulario label {
        font-size: 13px;
        margin-bottom: 3px;
    }

    #formulario input {
        float: left;
        margin-bottom: 8px;
        width: 278px;
        height: 27px;
    }

    #formulario .custom_a {
        width: 286px;
        margin-right: 0;
    }

    #formulario .custom_b {
        background-position: 0 0;
        width: 286px;
        margin-right: 0;
    }

    #formulario .custom_c {
        height: 42px;
        width: 305px;
        margin-bottom: 8px;
        background-position: -637px -4px;
    }

    #formulario .custom_d {
        padding: 15px 5px 5px 15px;
        width: 288px;
        height: 137px;
        margin-bottom: 25px;
        
    }

    #formulario .enviar{
        float: left;
        border: none;
        width: 152px;
        height: 62px;
        margin-right: 0px;
    }

    #formulario input.error {
        border: solid 1px red;
    }

    #formulario .custom_b.error {
        border: solid 1px red;
    }

    #formulario .custom_c.error {
        background-position: -637px -53px;
    }

    #formulario .custom_d.error {
        border: solid 1px red;
    }

    #formulario span.erro {
        font-size: 11px;
        color: #ff0000;
        margin: 2px 0;
    }

    #formulario span.enviando {
        font-size: 11px;
        color: #000;
        margin: 2px 0;
    }

    #formulario span.sucesso {
        font-size: 11px;
        color: #5bc25b;
        margin: 2px 0;
    }


}




/* TABLET */

@media only screen and (min-device-width : 768px)  and (max-device-width : 1024px)  {

    .center, #links-footer, #content .center {
        width: 1024px;
    }

   #lista h4 {
        opacity: 1;
        left: -16px;
    }

    #lista img:hover {
        opacity: 1;
    }    
    
    #slider {
        height: 120px;    
    }

    #slider ul{
        height: 130px;
    }

    #slider ul span {
        display: block;
    }


    #slider span {
        position: absolute;
        width: 60px;
        height: 35px;
        top: 90px;
        left: 20px;
        font: 13px/13px 'HouseMovementsSign';
        opacity: 1;
        background: none;
        display: block;
    }

    #slider .hover {
        display: none;
    }

    #lista li.splash-filmes:hover{
        background-position: 0 0;
    }

    #lista li.splash-quadrinhos:hover{
        background-position: -4px 0;
    }

    #lista li.splash-download:hover {
        background-position: 0 0;
    }


}