html, body {
    height: 100%;
    font-size: 12pt;
}

body {
    align-items: center;
    /*font-family: 'FIMM32Font';*/
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

.container-fluid {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

section {
    display: block;
    align-items: center;
    justify-content: center;
}

h2 {
    color: #8b6148;
}

footer {
    /*background-color: #012935;*/
    background-color: #808080;
    background-repeat: no-repeat;
    background-position: center center;
    color: #ffffff;
    font-size: 12pt;
    padding-top: 100px;
    padding-bottom: 100px;
}

    footer a {
        color: #ffffff;
    }

        footer a:link {
            color: #ffffff;
        }

        footer a:visited {
            color: #ffffff;
        }

        footer a:hover {
            color: #ffffff;
        }

        footer a:active {
            color: #ffffff;
        }

#footerIClogo {
    margin-bottom: 30px;
}

#COVER {
    /*height: 100vh;*/
    align-items: center;
    justify-content: center;
    /*background-color: #003d8e;*/
}

    #COVER .layer {
        
    }

    #coverVideo {
        position:relative;
        top: 0px;
        left: 0px;
        
        min-height: 100vh;
        z-index: 10;
        min-width:100%;
        overflow:hidden;
    }


#coverText {
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 20;
    width:100vw;
    height: 100vh;
    background-position: center center,center center,center center,center center,center center;
    background-size: contain,contain,contain,contain,contain;
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-image: url('/macaoparade/11/img/banner/BannerTxt1.png'), url('/macaoparade/11/img/banner/BannerTxt2.png'), url('/macaoparade/11/img/banner/BannerTxt3.png'),url('/macaoparade/11/img/banner/BannerTxt4.png'), url('/macaoparade/11/img/banner/BannerTxt5.png') ;
}

#coverImg {
    /*height: 100vh;*/
    overflow: hidden;
    margin-top: 40px;
}

@media only screen and (min-width: 768px) {
    #coverImg {
        margin-top: 100px;
    }
}



#canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.lang {
    margin: 0px;
    padding: 0px;
    border: 0px solid red;
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20px;
}

    .lang a {
        color: #000000;
    }

        .lang a:link {
            color: #000000;
        }

        .lang a:visited {
            color: #000000;
        }

        .lang a:hover {
            color: #000000;
        }

        .lang a:active {
            color: #000000;
        }

a.darkLink {
    color: #93705d;
}

    a.darkLink:link {
        color: #93705d;
    }

    a.darkLink:visited {
        color: #93705d;
    }

    a.darkLink:hover {
        color: #93705d;
    }

    a.darkLink:active {
        color: #93705d;
    }

#arrowDownBtn {
    margin: 0px;
    padding: 0px;
    border: 0px solid red;
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 20px;
    left: 0px;
}

#arrowDownBtn2 {
    margin: 0px;
    padding: 0px;
    border: 0px solid red;
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 40px;
    left: 0px;
}

#sectionInscription {
    display: block;
    height: calc(100vh - 140px);
    background-color: #ffffff;
    background-position-y: 0px;
    background-size: cover;
    border: 0px solid red;
    padding-top: auto;
    position: relative;
}

    #sectionInscription .height20vh {
        height: 10vh;
    }

.section-video{
    /*height: 100vh;*/
    align-items: center;
    justify-content: center;
    /*background-color: #003d8e;*/
    background: radial-gradient(circle, #ebebeb 70%, #b2b2b2);
}

#video {
    background-position: center center;
    background-size: cover;
    padding-top: 0px;
    padding-bottom: 0px;
}

.mainVideo
{
    padding-top: 40px;
    padding-bottom: 40px;
}

#crowd {
    /*background-image: url(/macaoparade/11/img/bg/crowdDeco3.png), url(/macaoparade/11/img/bg/crowdDeco2.png), url(/macaoparade/11/img/bg/crowdDeco1.png);
    background-position: calc(100% + 500px) calc(100% + 400px), calc(50% + 50px) calc(100% + 500px), calc(50% - 50px) top;
    background-repeat: no-repeat;*/
    /*background-color: #00aba2;*/
    /*background-color: #ffc95c;*/
    background-color: #E9E9E9;
    /*background-size: 18%, 18%, auto;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #ffffff;
    min-height: 815px;
    -webkit-transition: all 600ms ease-in;
    -ms-transition: all 600ms ease-in;
    transition: all 600ms ease-in;*/
    min-height: 42.5vw;
    position: relative;
}

    #crowd:hover {
        /*background-position: calc(70% + 150px) calc(40% + 100px), calc(50% + 50px) bottom, calc(50% - 50px) top;
        -webkit-transition: all 900ms ease-in;
        -ms-transition: all 900ms ease-in;
        transition: all 900ms ease-in;*/
    }


    #crowd h2 {
        /*color: #ffffff;*/
        color: #000000;
    }

    #crowd h2:hover
    {
        text-decoration: underline;
    }

#intro {
    padding-bottom: 100px;
    /*background-image: url(/macaoparade/11/img/bg/Dragon.png);*/
    /*background-image: url(/macaoparade/11/img/bg/decoboxes.png), ;
    background-position: top 8vw right 8vw;
    background-repeat: no-repeat;*/
    /*background-color: #003f99;*/
    background-color: #80E167;
    padding-top: 0px;
    /*color: #ffffff;*/
    /*background-size: 12vw;*/
    position: relative;
}

#introDesc {
    /*padding-bottom: 280px;
    background-image: url(/macaoparade/11/img/bg/introDeco1.png), url(/macaoparade/11/img/bg/introDeco2.png);
    background-color: #ff5311;
    background-color: #82e367;
    background-repeat: no-repeat, no-repeat;
    background-position: 5% 60%, 95% bottom;
    background-size: 15%, 20%;*/
    /*-webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in;*/
}

#introDesc:hover {
    /*background-position: left 400px, right 400px ;
    -webkit-transition: all 500ms linear;
    -ms-transition:  all 500ms linear;
    transition: all 500ms linear;*/
}

#intro canvas {
    background: transparent;
}

#intro .vivaIcon {
    display: block;
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
}

    #intro .vivaIcon img:hover {
        transition: 0.30s;
        -webkit-transition: 0.30s;
        -moz-transition: 0.30s;
        -ms-transition: 0.30s;
        -o-transition: 0.30s;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }

#intro h2 {
    /*color: #ffffff;*/
    color: #000000;
    z-index: 10;
    position: relative;
}

#maps {
    /*background-image: url(/macaoparade/11/img/bg/introDeco3.png);
    background-repeat: no-repeat;
    background-position: 5% 50%;
    background-size: 20%;
    -webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in;*/
}

#news {
    display: block;
    background-color: #FFBE2D;
}

    #news h2 {
        /*color: #012933;*/
        color: #ffffff;
        /*-webkit-text-stroke: 1px #8A8A8A;*/
    }

#roadMap
{
    margin-left: 3vw;
    margin-right: 3vw;
}

#intro .contentHtml
{
    position: relative;
    z-index: 10;
    font-size: clamp(16px, 0.95vw, 20px);
}

#events {
    display: block;
    background-image: url(/fimm/32/img/frame/03program_bg.png);
    background-position-y: -350px;
    background-position-x: center;
}

#participation {
    padding-bottom: 8vw;
    /*background-color: #002736;*/
    /*background-color: #0000a2;*/
    background-color: #FF9119;
    position: relative;
    /*background-image: url(/macaoparade/11/img/bg/participationDeco1.png), url(/macaoparade/11/img/bg/participationDeco2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: -250px bottom, calc(100% + 300px) bottom;
    -webkit-transition: all 600ms ease-in;
    -ms-transition: all 600ms ease-in;
    transition: all 600ms ease-in;*/
}

#participation:hover {
    background-position: bottom 40px left 40vw, bottom 10px right 30vw;
     -webkit-transition: all 900ms linear;
     -ms-transition: all 900ms linear;
     transition: all 900ms linear;
}
    #participation h2 {
        color: #ffffff;
        /*-webkit-text-stroke: 1px #8A8A8A;*/
    }

    #participation a {
        color: #ffffff;
    }

        #participation a:link {
            color: #ffffff;
        }

        #participation a:visited {
            /*color: #ffee00;*/
            color: #B20000;
        }

        #participation a:hover {
            /*color: #ffee00;*/
            color: #B20000;
        }

        #participation a:active {
            /*color: #ffee00;*/
            color: #B20000;
        }

        .nav-tabs {
            border-bottom: 0px solid #dee2e6;
        }

li marquee {
    height: 1.5em;
}

#participation ol {
    list-style: decimal;
    color: #ffffff;
}


    #participation ol li {
        float: left;
        display: list-item;
        width: calc(99.6%/3);
        margin: 0;
        padding: 0px 60px 0px 0px;
        white-space: nowrap;
        height: 3em;
    }

        #participation ol li:hover {
            color: #B20000;
        }

        #participation ol li:hover a {
            color: #B20000;
        }

        #participation ol li a {
            font-size: clamp(14px, 0.95vw, 20px);
        }


            #participation ol li a:link {
                /*color: #ffffff;*/
                color: #B20000;
            }

            #participation ol li a:visited {
                /*color: #ffffff;*/
                color: #B20000;
            }

            #participation ol li a:hover {
                /*color: #ffffff;*/
                color: #B20000;
            }

            #participation ol li a:active {
                /*color: #ffffff;*/
                color: #B20000;
            }

#home-tab {
    background-color: transparent;
    border-radius: 0px;
    border: 0px;
    border-right: 0px solid #ffffff;
    font-size: clamp(20px, 2.6vw, 1.75rem);
    padding-left: 4vw;
    padding-right: 4vw;
}

#profile-tab {
    background-color: transparent;
    border-radius: 0px;
    border: 0px;
    font-size: clamp(20px, 2.6vw, 1.75rem);
    padding-left: 4vw;
    padding-right: 4vw;
}

#special-tab {
    background-color: transparent;
    border-radius: 0px;
    border: 0px;
    font-size: clamp(20px, 2.6vw, 1.75rem);
    padding-left: 4vw;
    padding-right: 4vw;
}

#grouping3
{
    color: #ffffff
}

#grouping3 h3
{
    font-weight: 700;
}

#grouping3 p
{
    font-size: 20px;
}

.participationContainer
{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#activities {
    display: block;
    //background-color: #ffb4d2;
    //color: #003f9a;
    background-color: #67E1FE;
    background-image: url(/macaoparade/11/img/bg/ActivitiesImage.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

    #activities h2 {
        color: #003f9a;
    }

    #activities .actConten h2 {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #ea028c;
    }


    #activities a {
        color: #fffdfc;
    }

        #activities a:link {
            color: #fffdfc;
        }

        #activities a:visited {
            color: #fffdfc;
        }

        #activities a:hover {
            color: #fffdfc;
        }

        #activities a:active {
            color: #fffdfc;
        }

    #activities .actConten p {
        width: 01369e
    }

.outreachEvent
{
    max-width: 70%;
    padding-bottom: 40px;
}

#timetable {
    display: block;
    background-color: #ffffff;
    background-image: url(/fimm/32/img/frame/03time_table_bg.png);
    background-position-y: -500px;
    background-position-x: center;
    color: #8e614a;
}


#ticket {
    display: block;
    background-image: url(/fimm/32/img/frame/06ticket_bg.png);
    background-position-x: center;
    background-position-y: -400px;
}

    #ticket .contentHtml {
        column-count: 2;
        column-gap: 5em;
    }

#crowd .bgDeco:hover h2
{
    text-decoration: underline;
}

#moreInfo {
    display: block;
    /*background-color: #fff001;*/
    /*background-color: #ffa300;*/
    background-color: #FFB500;
    background-position-x: center;
    background-repeat: no-repeat;
    /*color: #012935;*/
    position: relative;
    z-index: 10;
}

    #moreInfo h2 {
        /*color: #012935;*/
        color: #ffffff;
        /*-webkit-text-stroke: 1px #8A8A8A;*/
    }

    #moreInfo a {
        /*color: #012935;*/
        color: #ffffff;
    }

        #moreInfo a:link {
            /*color: #012935;*/
            color: #ffffff;
        }

        #moreInfo a:visited {
            /*color: #012935;*/
            color: #ffffff;
        }

        #moreInfo a:hover {
            /*color: #012935;*/
            color: #ffffff;
        }

        #moreInfo a:active {
            /*color: #012935;*/
            color: #ffffff;
        }

.moreInfoIcon {
    height: auto;
    width: auto;
    max-height: 114px;
    max-width: 101px;
    /*padding-top: 20px;*/
    padding-bottom: 20px;
}

.moreInfoText
{
    font-size: clamp(24px, 1.4vw, 36px);
}

#album span:hover {
    text-decoration-line: underline;
}

#prelaunchMSG {
    background-image: url(/macaoparade/8/img/bg/moreInfo.jpg);
    background-position: top center;
    background-color: #259e52;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #ffffff;
}


    #prelaunchMSG h2 {
        color: #ffffff;
    }

        #prelaunchMSG h2 a {
            color: #ffffff;
        }

#quere {
    display: block;
    background-image: url(/fimm/32/img/frame/08_mail_bg.png);
    background-position-y: -200px;
    background-position-x: center;
}

.height20vh {
    /* min-height: 20vh !important; */
    height: 20vh;
    align-items: center;
    justify-content: center;
}

.height10vh {
    height: 10vh;
    align-items: center;
    justify-content: center;
}

.height5vh {
    height: 5vh;
    align-items: center;
    justify-content: center;
}

#partners {
    /*background-color: #ffffff;*/
    background-color: #8a8a8a;
    /*padding-top: 150px;*/
    padding-bottom: 60px;
    width: 100%;
    text-align: center;
    color: #ffffff;
}

    #partners .row {
        margin-bottom: 30px;
        align-items: center;
        justify-content: center;
    }

.partner {
    margin-right: 40px;
    height: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
}



.event {
    background-size: cover;
    width: 33.3333vw;
    height: 33.3333vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eventTitle h5 {
    margin-top: 5px;
    padding: 5px;
    margin-bottom: 3px;
    line-height: 1em;
}

.eventTitle {
    background-color: #8B624A;
    color: #ffffff;
    padding: 5px;
    text-align: center;
}

a.eventTitle:link {
    background-color: #8B624A;
    color: #ffffff;
}

a.eventTitle:visited {
    background-color: #8B624A;
    color: #ffffff;
}

a.eventTitle:hover {
    background-color: #8B624A;
    color: #ffffff;
    text-decoration: none;
}

a.eventTitle:active {
    background-color: #8B624A;
    color: #ffffff;
}

.green {
    color: #03a550;
}

.mainTitle {
    font-size: 31px;
}

.contentHtml {
    font-size: 19px;
}

@media (max-width: 992px)
{
    #participation ol li {
        width: calc(100%/2);
        padding: 0 45px 0 0;
    }
}

@media (max-width: 767px) {

    section {
        height: auto;
    }

    #participation ol li {
        width: calc(100%);
        height: 2.5em;
    }
}

@media (max-width: 575px) {

    #COVER {
        height: auto;
        align-items: center;
        justify-content: center;
        background-color: #003f99;
        margin-top: 30px;
    }

    #coverVideo {
        display: none;
        height:0px;
    }

    #coverText {
        display: none;
        height:0px;
    }

    #coverImg {
    height: auto;
}

    #intro {
        padding-bottom: 30px;
        /*background-image: url(/macaoparade/11/img/bg/Dragon.png);*/
        /*background-image: url(/macaoparade/11/img/bg/decoboxes.png);
        background-size: 50%;*/
    }

    #introDesc {
         /*padding-bottom: 80px;
         background-image: url(/macaoparade/11/img/bg/image1.png), url(/macaoparade/11/img/bg/ImportantInfoImage3.png);
         background-size: 30%, 30%;*/
         background-image: none;
    }

    #maps
    {
        background-image: none;
    }

    .bgDeco {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
    }

    .bg4 {
        background-image: url('/macaoparade/11/img/bg/deco2.png');
        animation: bg4Animation 5s infinite alternate;
        width: 100px;
        height: 80px;
        bottom: 1%;
        left: 32%;
        position: absolute;
    }

    @keyframes bg4Animation {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(10vw, 1.5vw);
        }
    }

    #participation {
        /*background-image: url(/macaoparade/11/img/bg/participationDeco2.png);
        background-position: center bottom;
        background-size: 30%;*/
        padding-bottom: 30px;
    }

        #participation:hover {
            /*background-position: center bottom;*/
        }

    #grouping3 p {
        font-size: 18px;
    }

    .groupbg1 {
        background-image: url('/macaoparade/11/img/bg/decoshow1.png');
        animation: groupbg1Animation 3s infinite alternate;
        width: 100px;
        height: 80px;
        bottom: 1%;
        left: 8%;
        position: absolute;
    }

    @keyframes groupbg1Animation {
        from {
            transform: rotate(-15deg);
        }

        to {
            transform: rotate(120deg);
        }
    }

    .groupbg2 {
        background-image: url('/macaoparade/11/img/bg/decoshow2.png');
        animation: groupbg2Animation 6s infinite alternate;
        width: 100px;
        height: 120px;
        bottom: 0.5%;
        left: 35%;
        position: absolute;
    }

    @keyframes groupbg2Animation {
        from {
            transform: rotate(45deg);
        }

        to {
            transform: rotate(-30deg);
        }
    }

    .groupbg3 {
        background-image: url('/macaoparade/11/img/bg/decoshow3.png');
        animation: groupbg3Animation 3s infinite alternate;
        width: 70px;
        height: 70px;
        bottom: 1.5%;
        left: 70%;
        position: absolute;
    }

    @keyframes groupbg3Animation {
        from {
            transform: rotate(15deg);
        }

        to {
            transform: rotate(45deg);
        }
    }

        #participation ol li {
            width: calc(100%);
            height: 2.8em;
        }

    .outreachEvent {
        max-width: 80%;
        padding-bottom: 15px;
    }

    #crowd {
        /*background-position: 95% 70%, 40% bottom, 42% 10%;
        background-size: 25%, 25%, 85%;
        padding-top: 0;*/
        /*padding-bottom: 60px;*/
        min-height: 70vw;
    }

        #crowd:hover {
            /*background-position: 95% 70%, 40% bottom, 42% 10%;*/
        }

    .crowdbg2 {
        background-image: url('/macaoparade/11/img/bg/deco6.png');
        animation: crowdbg2Animation 0.75s infinite alternate;
        width: 45vw;
        height: 36vw;
        bottom: -5%;
        left: -16.5%;
    }

    @keyframes crowdbg2Animation {
        from {
            transform: translate(0, 0) rotate(0deg);
        }

        to {
            transform: translate(2vw, -3vw) rotate(-5deg);
        }
    }

    .crowdbg3 {
        background-image: url('/macaoparade/11/img/bg/deco7.png');
        animation: crowdbg3Animation 5s infinite alternate;
        width: 35vw;
        height: 50vw;
        bottom: -15%;
        left: 29.5%;
    }

    @keyframes crowdbg3Animation {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(0, 25%);
        }
    }

    .crowdbg4 {
        background-image: url('/macaoparade/11/img/bg/deco8.png');
        animation: crowdbg4Animation 3s infinite alternate;
        width: 35vw;
        height: 50vw;
        bottom: -4.5%;
        left: 59%;
    }

    @keyframes crowdbg4Animation {
        from {
            transform: translate(0, 0) rotate(20deg);
        }

        to {
            transform: translate(3vw, -10%) rotate(-10deg);
        }
    }

    .moreInfoIcon {
        padding-top: 20px;
    }

    .moreInfoText {
        font-size: clamp(18px, 1.4vw, 24px);
    }

    .height20vh {
        /*padding-top: 40px;*/
        min-height: 10vh;
        height: auto;
    }

    .dont-break-out {
        /* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;
        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .partner {
        height: auto;
    }

    #footer {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #footer .col-12 {
            margin-bottom: 14px;
        }

    #ticket .contentHtml {
        column-count: 1;
        column-gap: 5em;
    }

    footer {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (min-width: 576px) {
    .mainVideo {
        padding-top: 10vh;
        padding-bottom: 10vh;
    }

    .bgDeco {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
    }

    .bg1 {
        background-image: url('/macaoparade/11/img/bg/decoboxes.png');
        animation: bg1Animation 2s infinite alternate;
        width: 12vw;
        height: 9.5vw;
        top: 6%;
        right: 5%;
    }

    @keyframes bg1Animation {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(2.75vw, -2.75vw);
        }
    }

    .bg2 {
        background-image: url('/macaoparade/11/img/bg/deco1.png');
        animation: bg2Animation 3s infinite alternate;
        width: 9vw;
        height: 22vw;
        top: 55%;
        left: 4%;
    }

    @keyframes bg2Animation {
        from {
            transform: translate(0, 0) rotate(-10deg);
        }

        to {
            transform: translate(1vw, 3vw) rotate(-30deg);
        }
    }

    .bg3 {
        background-image: url('/macaoparade/11/img/bg/deco3.png');
        animation: bg3Animation 2s infinite alternate;
        width: 12vw;
        height: 10vw;
        bottom: 8%;
        right: 6%;
    }

    @keyframes bg3Animation {
        from {
            transform: rotate(-10deg);
        }

        to {
            transform: rotate(5deg);
        }
    }

    .bg4 {
        background-image: url('/macaoparade/11/img/bg/deco2.png');
        animation: bg4Animation 5s infinite alternate;
        width: 10vw;
        height: 8vw;
        bottom: 1%;
        left: 35%;
    }

    @keyframes bg4Animation {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(5vw, 0.75vw);
        }
    }

    .bg5 {
        background-image: url('/macaoparade/11/img/bg/deco4.png');
        width: 2.5vw;
        height: 3.5vw;
        top: 66.5%;
        left: 14.5%;
    }

    .bg6 {
        background-image: url('/macaoparade/11/img/bg/deco4.png');
        width: 3.5vw;
        height: 4.5vw;
        bottom: 15%;
        right: 12%;
    }

    .groupbg1 {
        background-image: url('/macaoparade/11/img/bg/decoshow1.png');
        animation: groupbg1Animation 3s infinite alternate;
        width: 50px;
        height: 100px;
        bottom: 2%;
        left: 25%;
        position: absolute;
    }

    @keyframes groupbg1Animation {
        from {
            transform: rotate(-15deg);
        }

        to {
            transform: rotate(120deg);
        }
    }

    .groupbg2 {
        background-image: url('/macaoparade/11/img/bg/decoshow2.png');
        animation: groupbg2Animation 6s infinite alternate;
        width: 60px;
        height: 150px;
        bottom: 2%;
        left: 45%;
        position: absolute;
    }

    @keyframes groupbg2Animation {
        from {
            transform: rotate(45deg);
        }

        to {
            transform: rotate(-30deg);
        }
    }

    .groupbg3 {
        background-image: url('/macaoparade/11/img/bg/decoshow3.png');
        animation: groupbg3Animation 3s infinite alternate;
        width: 80px;
        height: 80px;
        bottom: 3%;
        left: 65%;
        position: absolute;
    }

    @keyframes groupbg3Animation {
        from {
            transform: rotate(15deg);
        }

        to {
            transform: rotate(45deg);
        }
    }

    .crowdbg1 {
        background-image: url('/macaoparade/11/img/bg/deco5.png');
        animation: crowdbg1Animation 3s infinite alternate;
        width: 16vw;
        height: 20vw;
        top: 3%;
        left: 3%;
    }

    @keyframes crowdbg1Animation {
        from {
            transform: translate(0, 0) rotate(-15deg);
        }

        to {
            transform: translate(3vw, 1vw) rotate(15deg);
        }
    }

    .crowdbg2 {
        background-image: url('/macaoparade/11/img/bg/deco6.png');
        animation: crowdbg2Animation 0.75s infinite alternate;
        width: 25vw;
        height: 20vw;
        bottom: -5%;
        left: 12%;
    }

    @keyframes crowdbg2Animation {
        from {
            transform: translate(0, 0) rotate(0deg);
        }

        to {
            transform: translate(2vw, -3vw) rotate(-5deg);
        }
    }

    .crowdbg3 {
        background-image: url('/macaoparade/11/img/bg/deco7.png');
        animation: crowdbg3Animation 5s infinite alternate;
        width: 20vw;
        height: 31vw;
        bottom: -15%;
        left: 40%;
    }

    @keyframes crowdbg3Animation {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(0, 25%);
        }
    }

    .crowdbg4 {
        background-image: url('/macaoparade/11/img/bg/deco8.png');
        animation: crowdbg4Animation 3s infinite alternate;
        width: 20vw;
        height: 31vw;
        bottom: -6%;
        left: 58%;
    }

    @keyframes crowdbg4Animation {
        from {
            transform: translate(0, 0) rotate(20deg);
        }

        to {
            transform: translate(3vw, -10%) rotate(-10deg);
        }
    }

    .crowdbg5 {
        background-image: url('/macaoparade/11/img/bg/deco9.png');
        animation: crowdbg5Animation 5s infinite alternate;
        width: 15vw;
        height: 19vw;
        top: 42%;
        left: 83%;
    }

    @keyframes crowdbg5Animation {
        0% {
            transform: translate(0, 0);
        }

        25% {
            transform: translate(0.3vw, -0.5vw);
        }

        50% {
            transform: translate(0.6vw, 0);
        }

        100% {
            transform: translate(1vw, -0.5vw);
        }
    }

    .participationContainer {
        max-width: 540px;
    }
}

@media (min-width: 640px) {
    .participationContainer {
        max-width: 600px;
    }
}

@media (min-width: 768px) {
    .participationContainer {
        max-width: 720px;
    }

    #introDesc {
        /*background-image: url(/macaoparade/11/img/bg/introDeco1.png), url(/macaoparade/11/img/bg/introDeco2.png);
        background-color: #ff5311;
        background-color: #82e367;
        background-repeat: no-repeat, no-repeat;
        background-position: 5% 60%, 95% bottom;
        background-size: 10%, 10%;*/
    }

    #maps {
        /*background-image: url(/macaoparade/11/img/bg/introDeco3.png);
        background-repeat: no-repeat;
        background-position: 5% 60%;
        background-size: 15%;
        -webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in;*/
    }
}

@media (min-width: 992px) {
    #participation ol li {
        height: 4em;
    }

    .participationContainer {
        max-width: 960px;
    }

    .tab-content {
        padding-left: 5vw;
    }

    #myTab {
        padding-right: 2.5vw
    }

    #SpecialGuests
    {
        padding-right: 5vw;
    }
}

@media (min-width: 1200px) {
    .participationContainer {
        max-width: 1140px;
    }

    .groupbg1 {
        left: 30%;
    }

    .groupbg2 {
        left: 45%;
    }

    .groupbg3 {
        left: 60%;
    }

    #introDesc {
        /*background-image: url(/macaoparade/11/img/bg/introDeco1.png), url(/macaoparade/11/img/bg/introDeco2.png);
        background-color: #ff5311;
        background-color: #82e367;
        background-repeat: no-repeat, no-repeat;
        background-position: 5% 60%, 95% bottom;
        background-size: 7.5%, 7.5%;*/
    }

    #maps {
        /*background-image: url(/macaoparade/11/img/bg/introDeco3.png);
        background-repeat: no-repeat;
        background-position: 5% 66.6%;
        background-size: 15%;
        -webkit-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in;*/
    }
}

@media (min-width: 1600px) {
    .bg1
    {
        top: 7%;
        right: 8%;
    }

    .bg5 {
        background-image: url('/macaoparade/11/img/bg/deco4.png');
        top: 72%;
        left: 15%;
    }

    .bg6 {
        bottom: 18%;
        right: 12%;
    }

    .groupbg1 {
        left: 35%;
    }

    .groupbg2 {
        left: 47.5%;
    }

    .groupbg3 {
        left: 60%;
    }

    .participationContainer {
        max-width: 1440px;
    }
}

@media (min-width: 1920px) {
    .participationContainer {
        max-width: 1600px;
    }
}