/* ajuste header */

@media screen and (max-height: 768px) {
    .header-full {
    }
}

/* imagens que vem do lado */

.img-esquerda-saindo {
    float: left;
    padding: 10px 20px 0px 0px;
    width: 330px;
    margin-left: -320px;
    position: absolute;
}

.img-direita-saindo {
    float: right;
    padding: 10px 0px 0px 20px;
    margin-left: 420px;
    width: 330px;
    position: absolute;
}

/*.img-direita-saindo .figcaption {
    text-align: right;
    float: right;
    padding-right: 1.3rem;
}*/

.placeholder-esquerda-saindo {
    /* background-color: red; */
    width: 300px;
    height: 225px;
    float: left;
    margin: 10px 20px 30px 0px;
    margin-left: -190px;
}

.placeholder-direita-saindo {
    /* background-color: red; */
    width: 300px;
    height: 225px;
    float: right;
    margin: 10px 20px 30px 20px;
    margin-right: -120px;
}

@media screen and (max-width: 1040px) {
    .img-esquerda-saindo {
        float: left;
        padding: 10px 20px 0px 0px;
        margin-left: 0px;
        position: relative;
        margin-left: 0 !important;
        float: none;
        padding: 10px 0px 0px 0px;
    }
    .img-direita-saindo {
        float: none;
        margin-right: 0px;
        margin-left: 0px !important;
        position: relative;
        padding: 10px 0px 0px 0px;
    }
    .placeholder-esquerda-saindo, .placeholder-direita-saindo {
        display: none;
    }
    #conteudo p img {
        width: 100%;
        max-width: 700px;
    }
    .figcaption {
        margin-bottom: 2rem;
    }
}

/* backgrounds - headers */

#full-1 {
    position: absolute;
    width: 101%;
    bottom: 0;
    left: -1px;
}

#full-2 {
    position: absolute;
    width: 102%;
    bottom: 0;
    left: -1%;
}

#full-3 {
    position: absolute;
    width: 101%;
    bottom: 0;
    left: -1%;
}

#full-4 {
    position: absolute;
    width: 101%;
    bottom: 0;
    left: -1px;
}

/* header 1 */

.header-full {
    margin: 0 auto;
    width: 100%;
    height: 560px;
    /* background-color: green; */
    overflow: hidden;
    position: relative;
    margin-top: 56px;
}

#char-a {
    position: absolute;
    width: 100%;
    bottom: 0
}

#char-b {
    position: absolute;
    width: 40%;
    bottom: 10%;
    right: 0;
}

/* header 2 */

#char-a-2 {
    position: absolute;
    width: 90%;
    bottom: -15%;
    right: 3%;
}

#char-b-2 {
    position: absolute;
    width: 39%;
    bottom: 35%;
    right: 44%;
}

/* header 3 */

#char-a-3 {
    position: absolute;
    width: 44%;
    right: -6%;
    bottom: -8%;
}

#char-b-3 {
    position: absolute;
    width: 46%;
    bottom: 0%;
    right: 28%;
}

/* header 4 */

#char-a-4 {
    position: absolute;
    width: 100%;
    left: 0%;
    bottom: -10%;
}

/* ilustra cap 1 - reunidos no bar */

#ilustra-bg {
    width: 100%;
    position: absolute;
}

#ilustra-a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
}

#ilustra-b {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
}

/* ilustra cap 3 - policial contando dinheiro */

#ilustra-cap-3-bg {
    position: absolute;
    width: 100%;
}

#mesa {
    position: absolute;
    width: 100%;
    bottom: 0;
}

#policial {
    position: absolute;
    width: 42%;
    right: 2%;
    bottom: 20%;
}

/* ilustra cap 2 - dinheiro sobre a mesa */

#bg-sala {
    position: absolute;
    width: 100%;
}

#personagens {
    position: absolute;
    width: 70%;
    bottom: 35%;
    right: 14%;
}

#mesa {
    position: absolute;
    bottom: -20%;
    width: 120%;
    margin-left: -3%;
}

/* imagem normal com skrollr */

.skrollr-img {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

#bg-cartao {
    width: 100%;
    position: absolute;
}

#cartao {
    position: absolute;
    bottom: 0;
    width: 90%;
}

.t {
    width: 200px;
    height: 200px;
    background-color: blue;
}