/* parallax */

.receitas-after,
.receitas-before {
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    transform: scale(1.3);
    z-index: -1;
}
.receitas-before {
    background: url(../images/novo_site/flocos.webp) left top no-repeat;
    width: 160px;
    height: 753px;
    bottom: -375px;
    left: 0;
    z-index: 4;
    transform: rotate(180deg);
}
.receitas-after {
    background: url(../images/novo_site/flocos.webp) left top no-repeat;
    width: 160px;
    height: 753px;
    bottom: -400px;
    right: 28px;
    z-index: 4;
}

@media (max-width: 991px) {
    .receitas-after,
    .receitas-before {
        display: none;
    }
}

/* institucional */
.sociais img {
    transform: rotate(5deg);
}
.quem-somos img {
    transform: rotate(-4deg);
}
.institucional .container {
    position: relative;
}
.institucional .quem-somos {
    top: -521px;
    margin-top: 0px;
}

.institucional.animate .quem-somos {
    top: -693px;
    margin-top: -0px;
}

.institucional .sociais > div:nth-child(1) {
    left: 34px;
    position: relative;
    z-index: 2;
}
.institucional .quem-somos > div:nth-child(1) {
    left: -30px;
    position: relative;
    z-index: 2;
    -ms-grid-column: 3;
}

.institucional.rollback .quem-somos > div:nth-child(1) {
    left: -30px;
    position: relative;
    z-index: 2;
    -ms-grid-column: 3;
}
.institucional .sociais > div:nth-child(2),
.institucional .quem-somos > div:nth-child(2),
.institucional .sociais > div:nth-child(1)::after,
.institucional .sociais > div:nth-child(1)::before,
.institucional .quem-somos > div:nth-child(1)::after,
.institucional .quem-somos > div:nth-child(1)::before {
    opacity: 0;
}

.institucional.animate .sociais img {
    animation: rotateimg1 0.2s ease-in 1 forwards;
}
.institucional.animate .quem-somos {
    animation: rightanime 0.1s linear 1 0.2s forwards,
        bottomposition 0.2s ease-in 1 1s forwards;
}
.institucional.animate .quem-somos img {
    animation: rotateimg2 0.2s ease-in 1 forwards;
}
.institucional.animate .sociais > div:nth-child(1) {
    animation: shake 0.1s ease-in 1 forwards,
        leftposimg1 0.2s ease-in 1 0.2s forwards;
    -ms-grid-column: 1;
}
.institucional.animate .quem-somos > div:nth-child(1) {
    animation: shake 0.1s ease-in 1 forwards,
        leftposimg1 0.2s ease-in 1 0.2s forwards;
}
.institucional.animate .sociais > div.text-animate:nth-child(2) {
    left: -25%;
    z-index: 2;
    animation: show 0.2s ease-in 1 1.3s forwards,
        leftposimg1 0.2s ease-in 1 1.3s forwards;
    -ms-grid-column: 3;
}
.institucional.animate .quem-somos > div.text-animate:nth-child(2) {
    right: -25%;
    z-index: 2;
    animation: show 0.2s ease-in 1 1.3s forwards,
        move-right 0.2s ease-in 1 1.3s forwards;
    -ms-grid-column: 1;
}
.institucional.animate .sociais > div:nth-child(1)::after {
    animation: show 0.1s ease-in 1 0.3s forwards,
        flocos-right 0.4s ease-in 1 0.1s forwards;
}
.institucional.animate .sociais > div:nth-child(1)::before {
    animation: show 0.1s ease-in 1 0.3s forwards,
        flocos-left 0.4s ease-in 1 0.1s forwards;
}
.institucional.animate .quem-somos > div:nth-child(1)::after {
    animation: show 0.1s ease-in 1 0.3s forwards,
        flocos2-right 0.4s ease-in 1 0.1s forwards;
}
.institucional.animate .quem-somos > div:nth-child(1)::before {
    animation: show 0.1s ease-in 1 0.3s forwards,
        flocos2-left 0.4s ease-in 1 0.1s forwards;
}

/* SCROLL UP */
.institucional.rollback .quem-somos {
    animation: upposition 0.2s ease-in 1 both;
}
.institucional.rollback .quem-somos div:nth-child(2),
.institucional.rollback .sociais div:nth-child(2) {
    animation: hide 0.2s ease-in 1 forwards;
}
.institucional.rollback .quem-somos img {
    animation: rotatebackimg2 0.3s ease-in 1 forwards;
}
.institucional.rollback .sociais img {
    animation: rotatebackimg1 0.3s ease-in 1 forwards;
}

@keyframes shake {
    0% {
        transform: translate(10px, 10px);
    }
    10% {
        transform: translate(0px, 0px);
    }
    20% {
        transform: translate(10px, 10px);
    }
    30% {
        transform: translate(0px, 0px);
    }
    40% {
        transform: translate(10px, 10px);
    }
    50% {
        transform: translate(0px, 0px);
    }
    60% {
        transform: translate(10px, 10px);
    }
    70% {
        transform: translate(0px, 0px);
    }
    80% {
        transform: translate(10px, 10px);
    }
    90% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(10px, 10px);
    }
}
@keyframes flocos-right {
    0% {
        right: 20px;
    }
    100% {
        right: -42px;
    }
}
@keyframes flocos-left {
    0% {
        left: 0;
    }
    100% {
        left: -60px;
    }
}
@keyframes flocos2-right {
    0% {
        right: 0;
    }
    100% {
        right: -75px;
    }
}
@keyframes flocos2-left {
    0% {
        left: 0;
    }
    100% {
        left: -42px;
    }
}
@keyframes bottomposition {
    100% {
        top: -115px;
    }
}
@media (max-width: 480px) {
    @keyframes bottomposition {
        100% {
            top: 50px;
            left: 0;
        }
    }
}
@keyframes upposition {
    0% {
        top: -115px;
    }
    100% {
        top: -521px;
    }
}
@keyframes rightanime {
    0% {
        right: 0;
    }
    100% {
        right: -50px;
    }
}

@keyframes rotateimg1 {
    100% {
        transform: rotate(-3deg);
    }
}
@keyframes rotateimg2 {
    100% {
        transform: rotate(4deg);
    }
}
@keyframes rotatebackimg2 {
    0% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(-4deg);
    }
}
@keyframes rotatebackimg1 {
    0% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(5deg);
    }
}
@keyframes leftposimg1 {
    100% {
        left: 0;
    }
}
@keyframes move-right {
    100% {
        right: 0;
    }
}
@keyframes show {
    100% {
        opacity: 1;
    }
}
@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}