$(document).ready(function() {
    var delayCrossGroup = 1350;
    var delayGroup = 4500;
    // Group01
    function inGroup01() {
        $('.Group01 *').css('display', 'block');

        $('.Group01 img').css({
            position : 'absolute',
            top : -200,
            left : -30,
            opacity : 0
        }).animate({
                top : 10,
                opacity : 1
            }, 1500);

        $('.Group01 .sabores').css({
            opacity : 0,
            right : -50,
            top: -10
        }).animate({
                opacity : 1,
                right : 290
            }, 1000);

        $('.Group01 .productos').css({
            opacity : 0,
            top: 90,
            left: 450
        }).delay(250).animate({
                opacity : 1,
                left: 490
            }, 1000);

        $('.Group01 .mexicanos').css({
            opacity : 0,
            top: 145,
            right : -40
        }).delay(500).animate({
                opacity : 1,
                right : 90
            }, 1000);
        setTimeout(outGroup01, delayGroup);
    }

    function outGroup01() {
        $('.Group01 img').animate({
            top : 250,
            opacity : 0
        }, 1000);

        $('.Group01 .sabores').animate({
            opacity : 0,
            right : 630
        }, 1000);

        $('.Group01 .productos').delay(250).animate({
            opacity : 0,
            left: 550
        }, 1000);

        $('.Group01 .mexicanos').delay(500).animate({
            opacity : 0,
            right : 290
        }, 1000);
        setTimeout(function() {
            $('.Group01 *').css('display', 'none');
            inGroup02();
        }, delayCrossGroup);
    }

    // Group02
    function inGroup02() {
        $('.Group02 *').css('display', 'block');

        $('.Group02 img').css({
            position : 'absolute',
            top : -200,
            left : -10,
            opacity : 0
        }).animate({
                top : -20,
                opacity : 1
            }, 1500);

        $('.Group02 .al').css({
            opacity : 0,
            top: 30,
            left: 350
        }).animate({
                opacity : 1,
                left: 450
            }, 1000);

        $('.Group02 .estilo').css({
            opacity : 0,
            right : -50,
            top: 50
        }).delay(250).animate({
                opacity : 1,
                right : 150
            }, 1000);

        $('.Group02 .mexicano').css({
            opacity : 0,
            top: 130,
            right : -40
        }).delay(500).animate({
                opacity : 1,
                right : 90
            }, 1000);
        setTimeout(outGroup02, delayGroup);
    }

    function outGroup02() {
        $('.Group02 img').animate({
            top : 250,
            opacity : 0
        }, 1000);

        $('.Group02 .al').animate({
            opacity : 0,
            left: 550
        }, 1000);

        $('.Group02 .estilo').delay(250).animate({
            opacity : 0,
            right : 630
        }, 1000);

        $('.Group02 .mexicano').delay(500).animate({
            opacity : 0,
            right : 290
        }, 1000);
        setTimeout(function() {
            $('.Group02 *').css('display', 'none');
            inGroup03();
        }, delayCrossGroup);
    }

    // Group03
    function inGroup03() {
        $('.Group03 *').css('display', 'block');

        $('.Group03 img').css({
            position : 'absolute',
            bottom : -200,
            left : 30,
            opacity : 0
        }).animate({
                bottom : 0,
                opacity : 1
            }, 1500);

        $('.Group03 .botana').css({
            opacity : 0,
            top: 25,
            left: 100
        }).animate({
                opacity : 1,
                left: 350
            }, 1000);

        $('.Group03 .de').css({
            opacity : 0,
            right : -50,
            top: 75
        }).delay(250).animate({
                opacity : 1,
                right : 165
            }, 1000);

        $('.Group03 .tradicion').css({
            opacity : 0,
            top: 125,
            right : -40
        }).delay(500).animate({
                opacity : 1,
                right : 50
            }, 1000);
        setTimeout(outGroup03, delayGroup);
    }

    function outGroup03() {
        $('.Group03 img').animate({
            bottom: 250,
            opacity: 0
        }, 1000);
        $('.Group03 .botana').animate({
            opacity: 0,
            left: 550
        }, 1000);
        $('.Group03 .de').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group03 .tradicion').delay(500).animate({
            opacity: 0,
            right: 290
        }, 1000);
        setTimeout(function() {
            $('.Group03 *').css('display', 'none');
            inGroup04();
        }, delayCrossGroup);
    }

    // Group04
    function inGroup04() {
        $('.Group04 *').css('display', 'block');

        $('.Group04 img').css({
            position : 'absolute',
            top : -200,
            right : 0,
            opacity : 0
        }).animate({
                top: 0,
                opacity : 1
            }, 1500);

        $('.Group04 .para').css({
            opacity : 0,
            top: 15,
            left: -50
        }).animate({
                opacity : 1,
                left: 155
            }, 1000);

        $('.Group04 .comidas').css({
            opacity : 0,
            right : 250,
            top: 45
        }).delay(250).animate({
                opacity : 1,
                right : 420
            }, 1000);

        $('.Group04 .tipicas').css({
            opacity : 0,
            top: 125,
            left: -40
        }).delay(500).animate({
                opacity : 1,
                left : 350
            }, 1000);
        setTimeout(outGroup04, delayGroup);
    }

    function outGroup04() {
        $('.Group04 img').animate({
            top: 250,
            opacity: 0
        }, 1000);
        $('.Group04 .para').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group04 .comidas').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group04 .tipicas').delay(500).animate({
            opacity: 0,
            left: 290
        }, 1000);
        setTimeout(function() {
            $('.Group04 *').css('display', 'none');
            inGroup05();
        }, delayCrossGroup);
    }

    // Group05
    function inGroup05() {
        $('.Group05 *').css('display', 'block');

        $('.Group05 img').css({
            position : 'absolute',
            top : -200,
            right : 0,
            opacity : 0
        }).animate({
                top: 0,
                opacity : 1
            }, 1500);

        $('.Group05 .sabores').css({
            opacity : 0,
            top: 15,
            left: -50
        }).animate({
                opacity : 1,
                left: 245
            }, 1000);

        $('.Group05 .que').css({
            opacity : 0,
            right : 280,
            top: 90
        }).delay(250).animate({
                opacity : 1,
                right : 465
            }, 1000);

        $('.Group05 .gustan').css({
            opacity : 0,
            top: 125,
            left: 0
        }).delay(500).animate({
                opacity : 1,
                left : 190
            }, 1000);
        setTimeout(outGroup05, delayGroup);
    }

    function outGroup05() {
        $('.Group05 img').animate({
            top: 250,
            opacity: 0
        }, 1000);
        $('.Group05 .sabores').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group05 .que').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group05 .gustan').delay(500).animate({
            opacity: 0,
            left: 290
        }, 1000);
        setTimeout(function() {
            $('.Group05 *').css('display', 'none');
            inGroup06();
        }, delayCrossGroup);
    }

    // Group06
    function inGroup06() {
        $('.Group06 *').css('display', 'block');

        $('.Group06 img').css({
            position : 'absolute',
            bottom : -200,
            left : 30,
            opacity : 0
        }).animate({
                bottom : 30,
                opacity : 1
            }, 1500);

        $('.Group06 .chiles').css({
            opacity : 0,
            top: 25,
            left: 100
        }).animate({
                opacity : 1,
                left: 350
            }, 1000);

        $('.Group06 .mexicanos').css({
            opacity : 0,
            right : -50,
            top: 130
        }).delay(250).animate({
                opacity : 1,
                right : 195
            }, 1000);
        setTimeout(outGroup06, delayGroup);
    }

    function outGroup06() {
        $('.Group06 img').animate({
            bottom: 250,
            opacity: 0
        }, 1000);
        $('.Group06 .chiles').animate({
            opacity: 0,
            left: 550
        }, 1000);
        $('.Group06 .mexicanos').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        setTimeout(function() {
            $('.Group06 *').css('display', 'none');
            inGroup07();
        }, delayCrossGroup);
    }

    // Group07
    function inGroup07() {
        $('.Group07 *').css('display', 'block');

        $('.Group07 img').css({
            position : 'absolute',
            top : -130,
            right : 0,
            opacity : 0
        }).animate({
                top: 0,
                opacity : 1
            }, 1500);

        $('.Group07 .paradarle').css({
            opacity : 0,
            top: 10,
            left: -50
        }).animate({
                opacity : 1,
                left: 125
            }, 1000);

        $('.Group07 .el').css({
            opacity : 0,
            top: 70,
            left: 50
        }).animate({
                opacity : 1,
                left: 270
            }, 1000);
        
        $('.Group07 .toque').css({
            opacity : 0,
            right : 230,
            top: 55
        }).delay(250).animate({
                opacity : 1,
                right : 345
            }, 1000);

        $('.Group07 .perfecto').css({
            opacity : 0,
            top: 135,
            left: 40
        }).delay(500).animate({
                opacity : 1,
                left : 235
            }, 1000);
        setTimeout(outGroup07, delayGroup);
    }

    function outGroup07() {
        $('.Group07 img').animate({
            top: 250,
            opacity: 0
        }, 1000);
        $('.Group07 .paradarle').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group07 .el').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group07 .toque').delay(150).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group07 .perfecto').delay(500).animate({
            opacity: 0,
            left: 290
        }, 1000);
        setTimeout(function() {
            $('.Group07 *').css('display', 'none');
            inGroup08();
        }, delayCrossGroup);
    }

    // Group08
    function inGroup08() {
        $('.Group08 *').css('display', 'block');

        $('.Group08 img').css({
            position : 'absolute',
            top : -200,
            right : 0,
            opacity : 0
        }).animate({
                top: 0,
                opacity : 1
            }, 1500);

        $('.Group08 .llenos').css({
            opacity : 0,
            top: 15,
            left: -50
        }).animate({
                opacity : 1,
                left: 215
            }, 1000);

        $('.Group08 .de').css({
            opacity : 0,
            right : 350,
            top: 80
        }).delay(250).animate({
                opacity : 1,
                right : 515
            }, 1000);

        $('.Group08 .sabor').css({
            opacity : 0,
            top: 140,
            left: 0,
            width: 265
        }).delay(500).animate({
                opacity : 1,
                left : 203
            }, 1000);
        setTimeout(outGroup08, delayGroup);
    }

    function outGroup08() {
        $('.Group08 img').animate({
            top: 250,
            opacity: 0
        }, 1000);
        $('.Group08 .llenos').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group08 .de').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group08 .sabor').delay(500).animate({
            opacity: 0,
            left: 290
        }, 1000);
        setTimeout(function() {
            $('.Group08 *').css('display', 'none');
            inGroup09();
        }, delayCrossGroup);
    }

    // Group09
    function inGroup09() {
        $('.Group09 *').css('display', 'block');

        $('.Group09 img').css({
            position : 'absolute',
            top : -130,
            right : 0,
            opacity : 0
        }).animate({
                top: 0,
                opacity : 1
            }, 1500);

        $('.Group09 .gran').css({
            opacity : 0,
            top: 0,
            left: -50
        }).animate({
                opacity : 1,
                left: 45
            }, 1000);

        $('.Group09 .variedad').css({
            opacity : 0,
            top: 70,
            left: 50,
            width: 465
        }).animate({
                opacity : 1,
                left: 140
            }, 1000);

        $('.Group09 .de').css({
            opacity : 0,
            right : 200,
            top: 95
        }).delay(250).animate({
                opacity : 1,
                right : 435
            }, 1000);

        $('.Group09 .hierbas').css({
            opacity : 0,
            top: 155,
            left: 40
        }).delay(500).animate({
                opacity : 1,
                left : 380
            }, 1000);
        setTimeout(outGroup09, delayGroup);
    }

    function outGroup09() {
        $('.Group09 img').animate({
            top: 250,
            opacity: 0
        }, 1000);
        $('.Group09 .gran').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group09 .variedad').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group09 .de').delay(150).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group09 .hierbas').delay(500).animate({
            opacity: 0,
            left: 290
        }, 1000);
        setTimeout(function() {
            $('.Group09 *').css('display', 'none');
            inGroup10();
        }, delayCrossGroup);
    }

    // Group10
    function inGroup10() {
        $('.Group10 *').css('display', 'block');

        $('.Group10 img').css({
            position : 'absolute',
            bottom : -200,
            left : -20,
            opacity : 0
        }).animate({
                bottom : 0,
                opacity : 1
            }, 1500);

        $('.Group10 .variedad').css({
            opacity : 0,
            top:10,
            left: 100,
            width: 390
        }).animate({
                opacity : 1,
                left: 430
            }, 1000);

        $('.Group10 .de').css({
            opacity : 0,
            right : -50,
            top: 85
        }).delay(250).animate({
                opacity : 1,
                right : 145
            }, 1000);

        $('.Group10 .marinados').css({
            opacity : 0,
            top: 150,
            right : -40
        }).delay(500).animate({
                opacity : 1,
                right : 30
            }, 1000);
        setTimeout(outGroup10, delayGroup);
    }

    function outGroup10() {
        $('.Group10 img').animate({
            bottom: 250,
            opacity: 0
        }, 1000);
        $('.Group10 .variedad').animate({
            opacity: 0,
            left: 550
        }, 1000);
        $('.Group10 .de').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group10 .marinados').delay(500).animate({
            opacity: 0,
            right: 290
        }, 1000);
        setTimeout(function() {
            $('.Group10 *').css('display', 'none');
            inGroup11();
        }, delayCrossGroup);
    }

    // Group11
    function inGroup11() {
        $('.Group11 *').css('display', 'block');

        $('.Group11 img').css({
            position : 'absolute',
            bottom : -200,
            left : 40,
            opacity : 0
        }).animate({
                bottom : 0,
                opacity : 1
            }, 1500);

        $('.Group11 .para').css({
            opacity : 0,
            top:10,
            left: 250,
            width: 390
        }).animate({
                opacity : 1,
                left: 390
            }, 1000);

        $('.Group11 .sazonar').css({
            opacity : 0,
            right : -50,
            top: 20
        }).delay(250).animate({
                opacity : 1,
                right : 95
            }, 1000);

        $('.Group11 .asu').css({
            opacity : 0,
            top: 80,
            right : -40
        }).delay(500).animate({
                opacity : 1,
                right : 330
            }, 1000);
        $('.Group11 .gusto').css({
            opacity : 0,
            top: 150,
            right : -40
        }).delay(500).animate({
                opacity : 1,
                right : 130
            }, 1000);
        setTimeout(outGroup11, delayGroup);
    }

    function outGroup11() {
        $('.Group11 img').animate({
            bottom: 250,
            opacity: 0
        }, 1000);
        $('.Group11 .para').animate({
            opacity: 0,
            left: 550
        }, 1000);
        $('.Group11 .sazonar').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group11 .asu').delay(375).animate({
            opacity: 0,
            right: 290
        }, 1000);
        $('.Group11 .gusto').delay(500).animate({
            opacity: 0,
            right: 290
        }, 1000);
        setTimeout(function() {
            $('.Group11 *').css('display', 'none');
            inGroup12();
        }, delayCrossGroup);
    }

    // Group12
    function inGroup12() {
        $('.Group12 *').css('display', 'block');

        $('.Group12 img').css({
            position : 'absolute',
            top : -200,
            right : 40,
            opacity : 0
        }).animate({
                top: 0,
                opacity : 1
            }, 1500);

        $('.Group12 .quesos').css({
            opacity : 0,
            top: 10,
            left: -50
        }).animate({
                opacity : 1,
                left: 85
            }, 1000);

        $('.Group12 .finos').css({
            opacity : 0,
            right : 250,
            top: 65
        }).delay(250).animate({
                opacity : 1,
                right : 415
            }, 1000);

        $('.Group12 .mexicanos').css({
            opacity : 0,
            top: 125,
            left: -40
        }).delay(500).animate({
                opacity : 1,
                left : 100
            }, 1000);
        setTimeout(outGroup12, delayGroup);
    }

    function outGroup12() {
        $('.Group12 img').animate({
            top: 250,
            opacity: 0
        }, 1000);
        $('.Group12 .quesos').animate({
            opacity: 0,
            left: 150
        }, 1000);
        $('.Group12 .finos').delay(250).animate({
            opacity: 0,
            right: 630
        }, 1000);
        $('.Group12 .mexicanos').delay(500).animate({
            opacity: 0,
            left: 290
        }, 1000);
        setTimeout(function() {
            $('.Group12 *').css('display', 'none');
            inGroup01();
        }, delayCrossGroup);
    }
    inGroup12();
});