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/10/img/banner/BannerTxt1.png'), url('/macaoparade/10/img/banner/BannerTxt2.png'), url('/macaoparade/10/img/banner/BannerTxt3.png'),url('/macaoparade/10/img/banner/BannerTxt4.png'), url('/macaoparade/10/img/banner/BannerTxt5.png') ;
}

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

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



#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;
}

#crowd {
    background-image: url(/macaoparade/10/img/bg/crowdDeco3.png), url(/macaoparade/10/img/bg/crowdDeco2.png), url(/macaoparade/10/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-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;
}

    #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: 200px;
    /*background-image: url(/macaoparade/10/img/bg/Dragon.png);*/
    background-image: url(/macaoparade/10/img/bg/introDeco5.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    /*background-color: #003f99;*/
    background-color: #82e367;
    padding-top: 0px;
    /*color: #ffffff;*/
    background-size: auto;
}

#introDesc {
    /*padding-bottom: 280px;
    background-image: url(/macaoparade/10/img/bg/introDeco1.png), url(/macaoparade/10/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;
}

#maps {
    /*background-image: url(/macaoparade/10/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: #00d5ff;
}

    #news h2 {
        //color: #012933;
        color: #ffffff;
        -webkit-text-stroke: 1px #37b1c9;
    }


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

#participation {
    padding-bottom: 240px;
    /*background-color: #002736;*/
    background-color: #0000a2;
    background-image: url(/macaoparade/10/img/bg/participationDeco1.png), url(/macaoparade/10/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;
    }

    #participation a {
        color: #ffffff;
    }

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

        #participation a:visited {
            color: #ffee00;
        }

        #participation a:hover {
            color: #ffee00;
        }

        #participation a:active {
            color: #ffee00;
        }

        .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 a {
            font-size: clamp(12px, 0.7vw, 16px);
        }


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

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

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

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

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

#activities {
    display: block;
    background-color: #ffb4d2;
    color: #003f9a;
    background-image: url(/macaoparade/10/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
    }

#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;
    }

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

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

    #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(20px, 1.2vw, 30px);
}

#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: 22vh;
    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: #1483e6;
    /*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;
}

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

@media (max-width: 767px) {

    section {
        height: auto;
    }

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

@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: 55px;
        /*background-image: url(/macaoparade/10/img/bg/Dragon.png);*/
        background-image: url(/macaoparade/10/img/bg/introDeco5.png);
        background-size: 50%;
    }

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

    #maps
    {
        background-image: none;
    }

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

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

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

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

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

    .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;
    }
}

@media (min-width: 576px) {
    .participationContainer {
        max-width: 540px;
    }
}

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

    #introDesc {
        /*background-image: url(/macaoparade/10/img/bg/introDeco1.png), url(/macaoparade/10/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/10/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) {
    .participationContainer {
        max-width: 960px;
    }

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

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

    #introDesc {
        /*background-image: url(/macaoparade/10/img/bg/introDeco1.png), url(/macaoparade/10/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/10/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: 1920px) {
    .participationContainer {
        max-width: 1600px;
    }
}