* {
    transition: all 0.3s ease-out;
}

a {
    text-decoration: none;
}

h2 {
    color: #ffffff;
}

.template {
    width: 0px;
    height: 0px;
    overflow: hidden;
    display: none;
}

#scrollUp {
    bottom: 25px;
    right: 30px;
    height: 80px;
    width: 50px;
    background: url(/micaf/2/img/frame/MICAFtop.png) no-repeat;
    background-size: contain;
}

#popUpNew {
    display: none;
    text-align: center;
    background-color: #ffffff;
    padding: 20px;
}

.moboDeco {
    display: none;
}

/*---------------*/
/***** Sadie *****/
/*---------------*/
figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.8));
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
    position: absolute;
    font-weight: bolder;
    top: 50%;
    left: 0;
    width: 100%;
    color: black;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    opacity: 0;
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
    text-align: left;
    color: white;
}

figure.effect-sadie:hover img {
    /*opacity: 0.7;*/
    background-color: white;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /*filter: blur(8px);*/
}


figure.effect-sadie:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    opacity: 1;
}

figure.effect-sadie:hover figcaption::before,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


/*            header           */
header {
    background-image: url("/micaf/2/img/frame/web/theme.png");
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 1078px;
    height: auto;
    background-color: #F9F5B6;
}

.remarks {
    color: white;
    max-width:960px;
}

#RemarksBtn {
    cursor: pointer;
}

@media only screen and (max-width: 1600px) {
    header {
        min-height: 893px;
    }
}

@media only screen and (max-width: 1280px) {
    header {
        min-height: 714px;
    }
}

@media only screen and (max-width: 1024px) {
    header {
        min-height: 572px;
    }
}

#banner {
    margin-top: 67px;
}

@media only screen and (max-width: 1024px) {

    #banner {
        margin-top: 57px;
    }
}

/*             intro              */
#intro {
    background-color: #00d887;
    padding-bottom: 7vw;
    position: relative;
    background-image: url(/micaf/2/img/frame/deco1_5.png);
    background-repeat: no-repeat;
    background-position-x: 21.51vw;
}

.introTitle {
    padding-top: 2vw;
    padding-bottom: 2vw;
    letter-spacing: 4px;
    padding-left: 26%;
}

    .introTitle h1 {
        font-weight: bold;
    }

.introText {
    text-align: justify;
    padding-bottom: 2vw;
    font-size: clamp(18px, 1.1vw, 28px);
    letter-spacing: 4px;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    padding-left: 26%;
}

.readAllText {
    text-align: right;
    padding-bottom: 4vw;
    text-decoration: underline;
    text-decoration-color: #939393;
    letter-spacing: 4px;
    font-size: clamp(18px, 1.1vw, 28px);
    font-weight: bold;
    position: relative;
    z-index: 2;
}

    .readAllText a {
        color: #939393;
    }

.introDeco1 {
    /*padding-top: 100px;
    background-image: url("/micaf/2/img/frame/deco1.png");
    background-repeat: no-repeat;
    background-size: 15%;
    background-position: left 12% top;*/
}

/*    .introDeco1::before {
        content: "";
        position: absolute;
        background-image: url("/micaf/2/img/frame/deco1.png");
        background-repeat: no-repeat;
        width: 418px;
        height: 435px;
        background-size: 16vw;
        background-position: top left;
        left: 8vw;
        margin-top: -9vw;
    }

    .introDeco1::after {
        content: "";
        position: absolute;
        background-image: url("/micaf/2/img/frame/deco2.png");
        background-repeat: no-repeat;
        width: 468px;
        height: 502px;
        background-size: 15vw;
        background-position: top right;
        right: 8vw;
        margin-top: -12vw;
        z-index: 1;
    }*/

#introDeco1 {
    top: 2%;
    left: 2%;
    width: 7.96vw;
}

#introDeco2 {
    top: 15%;
    left: 9%;
    width: 10.52vw;
}

#introDeco3 {
    top: 17%;
    left: 22%;
    width: 9.01vw;
}

#introDeco4 {
    top: 14%;
    right: 7%;
    width: 3.28vw;
}

#introDeco6 {
    bottom: 30%;
    left: 3%;
    width: 2.44vw;
}

#introDeco7 {
    bottom: 20%;
    right: 3%;
    width: 4.27vw;
}

#introDeco8 {
    right: 8%;
    width: 2.86%;
}

@media only screen and (max-width: 1600px) {
    .introDeco1::before {
        left: 2vw;
    }

    .introDeco1::after {
        right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .deco {
        display: none;
    }

    .moboDeco {
        display: block;
        position: absolute;
    }

    #moboIntroDeco1 {
        top: 4.11%;
        left: 39.35%;
        width: 44.35%;
    }

    #intro {
        padding-top: 28vw;
        background: url('/micaf/2/img/frame/mob/deco1_1.png');
        background-repeat: no-repeat;
        background-position-y: 0;
        background-position-x: 4.6vw;
        background-size: 69.44vw;
        background-color: white;
    }

    .introTitle {
        padding-left: 2vw;
        padding-right: 2vw;
        padding-bottom: 2vw;
    }

    .introText {
        padding-left: 2vw;
        padding-right: 2vw;
        letter-spacing: 2px;
    }

    .introDeco1::before {
        width: 104px;
        height: 109px;
        transform: rotate(60deg);
        background-size: 20vw;
        left: 15vw;
    }

    .introDeco1::after {
        right: 0;
    }
}

/*           news                  */
#newsSection {
    display: block;
    width: 100%;
    height: 100%;
    background: url(/micaf/2/img/frame/deco2_1.png) no-repeat;
    background-color: #ffffff;
    padding-bottom: 12vw;
    position: relative;
}

    #newsSection h2 {
        /*        background-image: url("/micaf/2/img/frame/header1.png");
        background-repeat: no-repeat;
        background-size: cover;*/
        margin-left: 2em;
        padding: 0.5em;
        text-align: right;
    }

/*        #newsSection h2::before {
            content: "";
            position: absolute;
            background-image: url("/micaf/2/img/frame/deco4.png");
            background-repeat: no-repeat;
            width: 107px;
            height: 101px;
            background-size: 5vw;
            background-position: top left;
            margin-left: -35vw;
            margin-top: -3vw;
        }*/

.newsPosition {
}

.deco {
    position: absolute;
}

.newstitle {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: clamp(20px, 1.1vw, 30px);
    color: #000000;
    font-weight: bold;
}

.newsTitle {
    margin-top: 1%;
    margin-bottom: 3%;
}

.newsDate {
    font-size: clamp(16px, 1vw, 24px);
}

#newsDeco1::after {
    /*    content: "";
    position: absolute;
    background-image: url("/micaf/2/img/frame/deco5.png");
    background-repeat: no-repeat;
    width: 170px;
    height: 119px;
    background-size: 8vw;
    background-position: top left;
    left: 24vw;
    margin-top: 2vw;*/
}

#newDeco1 {
    top: 4%;
    left: 5%;
    width: 4.2vw;
}

#newDeco2 {
    top: 4%;
    right: 0%;
    width: 13.22vw;
}

#newDeco3 {
    right: 5%;
    top: 50%;
    width: 3.28vw;
}

#newDeco4 {
    bottom: 2%;
    left: 5%;
    width: 10.15vw;
}

#newDeco5 {
    bottom: 15%;
    left: 40%;
    width: 2.86vw;
}

#newDeco6 {
    bottom: 10%;
    left: 58%;
    width: 5.52vw;
}

#newDeco7 {
    right: 5%;
    bottom: 2%;
    width: 13.12vw;
}

@media only screen and (max-width: 768px) {
    .newsTitle {
        padding-top: 1.3%;
        padding-right: 29.25%;
    }

    #newsSection {
        background: url(/micaf/2/img/frame/mob/deco2_1.png) no-repeat;
        background-size: contain;
        padding-bottom: 23vw;
    }

        #newsSection h2 {
            margin-left: 0;
            width: initial;
        }

            #newsSection h2::before {
                background-size: 10vw;
                margin-left: -25vw;
                margin-top: -7vw
            }

    .newsPosition {
    }

    #newsDeco1::after {
        background-position: bottom center;
        transform: rotate(180deg);
    }

    .catalog ul {
        padding-left: 10px;
    }

    img#moboNewDeco1 {
        width: 23.33vw;
        left: 24.07%;
        bottom: 1%;
    }
}

/*           events                  */
#events {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 200px;
    /*        background: url("/micaf/2/img/frame/BG2.png"), url("/micaf/2/img/frame/deco6.png") 62.5% calc(100% - 1vw);
        background-repeat: repeat-x, no-repeat;
*/ background-color: #7f30fe;
    /*background-size: auto, 15vw;*/
    background-image: url(/micaf/2/img/frame/deco3_1.png);
    background-repeat: no-repeat;
    background-position-x: 3vw;
}

    #events h2 {
        /*        background-image: url("/micaf/2/img/frame/header2.png");
*/ background-repeat: no-repeat;
        background-size: cover;
        /*        margin-left: 2em;
        width: calc( 100vw - 4em);
        padding: 0.5em;*/
    }

.eventsTitle h2 {
    margin-left: 7%;
    margin-top: 1%;
}

#events h2::after {
    /*            content: "";
            position: absolute;
            background-image: url("/micaf/2/img/frame/deco3.png");
            background-repeat: no-repeat;
            background-size: 15vw;
            background-position: top right;
            width: 365px;
            height: 477px;
            z-index: 0;
            margin-top: -12vw;
            margin-left: 20vw;*/
}

.eventGribRowTitle h3 {
    color: white;
}

.eventGribRowTitle h5 {
    color: white;
}

/*.catalog {*/
    /*    margin-top: 20px;
    margin-bottom: 3vw;*/
    /*position: relative;
    z-index: 1;
    margin-left: 5%;
    margin-bottom: 8%;
}

    .catalog ul {
        list-style: none;
        line-height: 36px;
        font-size: clamp(16px, 1.2vw, 28px);
        color: #ffffff;
        margin-left: 0;
        padding: 0;
        display: flex;
    }

    .catalog li {
        display: inline-block;*/
        /*        margin-left: 20px;
        margin-right: 20px;*/
    /*}

        .catalog li a {
            color: #ffffff;
            display: flex;
        }

            .catalog li a::before {
                content: "|";
                font-size: 18px;
                margin-left: 7px;
                margin-right: 7px;
            }

        .catalog li:first-child a::before {
            content: "";
            font-size: 18px;
            margin-left: 0px;
            margin-right: 0px;
        }*/

    .catalog ul {
        list-style: none;
        line-height: 36px;
        font-size: clamp(16px, 1.2vw, 28px);
        color: #ffffff;
        margin-left: 0;
        padding: 0;
        /*        display: flex;
        align-items: center;
        justify-content: center;*/
    }



    .catalog li {
        display: inline-block;
        /*        margin-left: 20px;
        margin-right: 20px;*/
    }

        .catalog li a {
            color: #ffffff;
            display: flex;
        }

            .catalog li a::after {
                content: "|";
                font-size: 18px;
                margin-left: 7px;
                margin-right: 7px;
            }

        .catalog li:last-child a::after {
            content: "";
            font-size: 18px;
            margin-left: 0px;
            margin-right: 0px;
        }


        .catalog li div {
            color: #ffffff;
            display: flex;
        }

            .catalog li div::after {
                content: "|";
                font-size: 18px;
                margin-left: 7px;
                margin-right: 7px;
            }

        .catalog li:last-child div::after {
            content: "";
            font-size: 18px;
            margin-left: 0px;
            margin-right: 0px;
        }




#eventDeco1 {
    top: 1%;
    right: 2%;
    width: 6.82vw;
}

#eventDeco2 {
    bottom: 2.5%;
    left: 17%;
    width: 2.44vw;
}

#eventDeco3 {
    bottom: 4%;
    left: 45%;
    width: 2.86vw;
}

#eventDeco4 {
    right: 4%;
    bottom: 3%;
    width: 4.27vw;
}

.endDeco {
    position: relative;
    min-height: 10vh;
}

    .endDeco img {
        position: relative;
        z-index: 10;
    }

.lineDeco {
    width: 100%;
    border-bottom: solid 1px #ff46c8;
    position: absolute;
    bottom: 20%;
    width: 95%;
}

@media only screen and (max-width: 1440px) {
    #events h2::after {
        margin-left: 5vw;
    }
}

@media only screen and (max-width: 768px) {
    #events {
        background: url(/micaf/2/img/frame/mob/deco3_1.png),url(/micaf/2/img/frame/mob/deco3_2.png);
        background-repeat: no-repeat;
        background-position-y: top, bottom;
        background-position-x: 0, 23.7%;
        background-size: contain,36.57%;
        background-color: #7f30fe;
    }

    .eventsTitle {
        padding-left: 0;
        padding-right: 0;
    }

    #events h2 {
        /*        background-color: #EB4793;
*/ margin-left: 0;
        width: initial;
        text-align: center;
        margin-top: 3%;
    }

        #events h2::after {
            width: 25vw;
            height: 30vw;
            background-size: 22vw;
            margin-top: -18vw;
        }

/*    .catalog ul {
        margin-left: 5px;
    }

    .catalog li {
        margin-left: 10px;
        margin-right: 10px;
    }*/

    .catalog {
        margin-top: 0px;
        margin-bottom: 0;
    }

        .catalog ul {
            margin-left: 5px;
        }

        .catalog li {
            margin-left: 0px;
            margin-right: 0px;
        }

    #eventsInCat h3 {
        font-size: clamp(18px, 4.5vw, 24px);
    }

    #eventsInCat h5 {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .eventContentDeco {
        display:none;
    }
}

@media only screen and (max-width: 576px) {
    .catalog {
        margin-top: 0px;
    }

        .catalog ul {
            line-height: 30px;
        }

}

.eventGribRowTitle {
    padding-left: 1.4vw;
    margin-left: 1.4vw;
    margin-right: 1.4vw;
    color: #000000;
    padding-top:20px;
}

    .eventGribRowTitle h3 {
        font-size: clamp(20px, 1.5vw, 32px);
    }

    .eventGribRowTitle h5 {
        font-size: clamp(16px, 1vw, 24px);
    }

.event-item {
    z-index: 99;
    font-weight: 600;
    display: inline-grid;
    margin: 0px;
    margin-bottom: 2.8vw;
}

    .event-item figure {
        margin-left: 1.4vw;
        margin-right: 1.4vw;
    }


.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    height: auto;
    /* background: #3085a3; */
    /* text-align: center; */
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    .eventGribRowTitle {
        padding-left: 0;
    }

    .eventDateSmall {
        font-size: clamp(12px, 3vw, 14px);
        font-weight: lighter;
    }
}

/*           events                  */
#outreach {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 200px;
    /*        background: url("/micaf/2/img/frame/BG2.png"), url("/micaf/2/img/frame/deco6.png") 62.5% calc(100% - 1vw);
        background-repeat: repeat-x, no-repeat;
*/ background-color: #fe45c7;
    /*background-size: auto, 15vw;*/
    background-image: url(/micaf/2/img/frame/deco4_3.png);
    background-repeat: no-repeat;
    background-position-x: center;
}

    #outreach .eventDateSmall{
        color:white;
    }

    #outreach h2 {
        /*        background-image: url("/micaf/2/img/frame/header2.png");
*/ background-repeat: no-repeat;
        background-size: cover;
        /*        margin-left: 2em;
        width: calc( 100vw - 4em);
        padding: 0.5em;*/
    }

.outreachTitle h2 {
    margin-left: 7%;
    margin-top: 1%;
}

#outreach h2::after {
    /*            content: "";
            position: absolute;
            background-image: url("/micaf/2/img/frame/deco3.png");
            background-repeat: no-repeat;
            background-size: 15vw;
            background-position: top right;
            width: 365px;
            height: 477px;
            z-index: 0;
            margin-top: -12vw;
            margin-left: 20vw;*/
}

.outreachGribRowTitle h3 {
    color: white;
}

.outreachGribRowTitle h5 {
    color: white;
}

.outReachcatalog {
    /*    margin-top: 20px;
    margin-bottom: 3vw;*/
    position: relative;
    z-index: 1;
    margin-bottom: 8%;
}

    .outReachcatalog ul {
        list-style: none;
        line-height: 36px;
        font-size: clamp(16px, 1.2vw, 28px);
        color: #ffffff;
        margin-left: 0;
        padding: 0;
/*        display: flex;
        align-items: center;
        justify-content: center;*/
    }



    .outReachcatalog li {
        display: inline-block;
        /*        margin-left: 20px;
        margin-right: 20px;*/
    }

        .outReachcatalog li a {
            color: #ffffff;
            display: flex;
        }

            .outReachcatalog li a::after {
                content: "|";
                font-size: 18px;
                margin-left: 7px;
                margin-right: 7px;
            }

        .outReachcatalog li:last-child a::after {
            content: "";
            font-size: 18px;
            margin-left: 0px;
            margin-right: 0px;
        }


        .outReachcatalog li div {
            color: #ffffff;
            display: flex;
        }

            .outReachcatalog li div::after {
                content: "|";
                font-size: 18px;
                margin-left: 7px;
                margin-right: 7px;
            }

        .outReachcatalog li:last-child div::after {
            content: "";
            font-size: 18px;
            margin-left: 0px;
            margin-right: 0px;
        }


#outreachDeco1 {
    top: 1%;
    right: 2%;
}

#ageBtn {
    cursor: pointer;
}

#myModal .modal-content {
    background-color: rgba(0,216,134,0.8);
    color: white;
}

#myModal .modal-header {
    border-bottom: none;
}

#myModal .modal-footer {
    border-top: none;
}


#outDeco1 {
    left: 2%;
    top: -1.5%;
}

#outDeco2 {
    left: 20%;
    top: -1.5%;
}

.ageInput {
    display: inline-block;
    width: 18%;
}

.elfDeco{

}

@media only screen and (max-width: 1440px) {
    #outreach h2::after {
        margin-left: 5vw;
    }
}

@media only screen and (max-width: 1130px) {
    #myModal .modal-content {
        height:auto!important;
    }
    #myModal .modal-dialog {
        height: auto !important;
    }
}

@media only screen and (max-width: 768px) {
    #outreach {
        display: block;
        width: 100%;
        min-height: 100vh;
        padding-top: 56px;
        padding-bottom: 40px;
        background: url("/micaf/2/img/frame/mob/deco4_2.png");
        background-repeat: no-repeat;
        background-size: 65.83vw;
        background-position-x: center;
        background-position-y: top;
        background-color: #fe4eca;
    }

    .outReachcatalog {
        margin-top: 0px;
        margin-bottom: 0;
    }

    .outreachTitle {
        padding-left: 0;
        padding-right: 0;
    }

    #outreach h2 {
        margin-left: 0;
        width: initial;
    }

        #outreach h2::after {
            width: 25vw;
            height: 30vw;
            background-size: 22vw;
            margin-top: -18vw;
        }

    .outReachcatalog ul {
        margin-left: 5px;
    }

    .outReachcatalog li {
        margin-left: 0px;
        margin-right: 0px;
    }

    #outreachInCat h3 {
        font-size: clamp(18px, 4.5vw, 24px);
    }

    #outreachInCat h5 {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    #moboOutDeco1 {
        width: 12.12vw;
        margin-bottom: 8vw;
        position: relative;
    }
    #moboOutDeco2 {
        width: 14.14vw;
        top:0;
        left:24.46%;
    }
    .elfDeco {
        width: 30%;
        margin-bottom: 4vw;
    }
    #moboOutreachContentDeco1 {
        display: none !important;
    }
}

@media only screen and (max-width: 576px) {


    .outReachcatalog ul {
        line-height: 30px;
    }
}

.outreachGribRowTitle {
    padding-left: 1.4vw;
    margin-left: 1.4vw;
    margin-right: 1.4vw;
    color: #000000;
}

    .outreachGribRowTitle h3 {
        font-size: clamp(20px, 1.5vw, 32px);
    }

    .outreachGribRowTitle h5 {
        font-size: clamp(16px, 1vw, 24px);
    }

.outreach-item {
    z-index: 99;
    font-weight: 600;
    display: inline-grid;
    margin: 0px;
    margin-bottom: 2.8vw;
}

    .outreach-item figure {
        margin-left: 1.4vw;
        margin-right: 1.4vw;
    }


.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    height: auto;
    /* background: #3085a3; */
    /* text-align: center; */
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    .outreachGribRowTitle {
        padding-left: 0;
    }

    .outreachDateSmall {
        font-size: clamp(12px, 3vw, 14px);
        font-weight: lighter;
    }
}


/*           timetable                  */
#timetable {
    display: block;
    width: 100%;
    min-height: 80vw;
    /*    background-image: url("/micaf/2/img/frame/BG3.png");
    background-repeat: repeat-x;
*/
    background: #fff;
    position: relative;
    background: url(/micaf/2/img/frame/deco5_2.png);
    background-size: 55.52vw;
    background-repeat: no-repeat;
    background-position-x: 18vw;
}

    #timetable h2 {
        /*        background-image: url("/micaf/2/img/frame/header3.png");
        background-repeat: no-repeat;
        background-size: cover;*/
        margin-left: 2em;
        width: calc( 100vw - 4em);
        padding: 0.5em;
        text-align: center;
    }

/*        #timetable h2::before {
            content: "";
            position: absolute;
            background-image: url("/micaf/2/img/frame/deco7.png");
            background-repeat: no-repeat;
            background-size: 15vw 15vw;
            width: 368px;
            height: 369px;
            z-index: 10;
            margin-top: -9vw;
            margin-left: -31vw;
        }*/

.calendar {
    margin-top: 7vw;
}

.monthNum {
    text-decoration: underline;
    color: #7726ff;
    font-size: clamp(36px, 6vw, 6vw);
}

.table th {
    background-color: transparent;
    border-bottom-color: #9EA09F;
    font-size: clamp(18px, 1vw, 24px);
    color: #7f7f7f;
}

.table td {
    background-color: transparent;
    border-bottom: 1px #50D7E4 solid;
    color: #c5c5c5;
    font-size: clamp(18px, 2.25vw, 48px);
    font-weight: bold;
    line-height: normal;
    padding: 0.25rem 0.25rem;
}

    .table td a {
        color: #ff45c6;
    }

.calendar-event-item {
    z-index: 99;
    font-weight: 600;
    display: inline-grid;
    margin: 0px;
    margin-bottom: 2vw;
}

    .calendar-event-item figure {
        margin-left: 1vw;
        margin-right: 1vw;
    }

#eventsOfDate {
    height: auto;
    min-height: 300px;
    padding-top: 3vw;
    margin-bottom: 50px;
}

    #eventsOfDate h5 {
        font-size: clamp(16px, 1vw, 24px);
        color: #1B88CB;
    }

.calendarEventTitle {
    margin-left: 1.4vw;
    margin-right: 1.4vw;
    color: #000000;
}

/*.calendarDeco1::before {
    content: "";
    position: absolute;
    background-image: url("/micaf/2/img/frame/deco8.png");
    background-repeat: no-repeat;
    background-size: 3.5vw;
    width: 69px;
    height: 101px;
    margin-top: 20vw;
    margin-left: -1vw;
}*/

#calDeco1 {
    top: 4%;
    left: 4%;
    width: 11.19vw;
}

#calDeco2 {
    right: 13%;
    top: -7%;
    width: 11.3vw;
}

#calDeco3 {
    top: 4%;
    right: 4%;
    width: 8.69vw;
}

#calDeco4 {
    top: 24%;
    left: 3%;
    width: 4.27vw;
}

#calDeco5 {
    top: 33%;
    left: 22%;
    width: 3.28vw;
}

#calDeco6 {
    top: 31%;
    right: 9.5%;
    width: 2.86vw;
}

#calDeco7 {
    top: 48%;
    right: 6%;
    width: 5.52vw;
}

#calDeco8 {
    top: 67%;
    right: 9%;
    width: 2.45vw;
}

#calDeco9 {
    top: 52%;
    left: 6%;
    width: 13.12vw;
}

#calDeco10 {
    bottom: 2%;
    right: 5%;
    width: 15.15vw;
}

@media only screen and (max-width: 768px) {
    #timetable {
        min-height: 80vh;
        background-image: url(/micaf/2/img/frame/mob/deco5_1.png), url(/micaf/2/img/frame/mob/deco5_3.png);
        background-size: 90.27%,80.18%;
        background-position-x: 3vw,16.11vw;
        background-position-y: top,bottom;
    }

    .calendarTitle {
        padding-left: 0;
        padding-right: 0;
    }

    #timetable h2 {
        padding-top: 2%;
        margin-left: 0;
        width: initial;
    }

    .calendarDeco1 {
        padding-bottom: 20%;
    }

        .calendarDeco1::after {
            content: "";
            position: absolute;
            background-image: url("/micaf/2/img/frame/deco11.png");
            background-repeat: no-repeat;
            background-size: 5vw;
            width: 67px;
            height: 101px;
            margin-top: -8vw;
            margin-left: 24vw;
        }

    .eventDateSmall {
        font-size: clamp(12px, 3vw, 14px);
        font-weight: lighter;
        color: white;
    }

    #timetable h2::before {
        background-size: 25vw;
        width: 184px;
        height: 185px;
        margin-top: -15vw;
        margin-left: -30vw;
    }

    #eventsOfDate {
        min-height: 100px;
    }

        #eventsOfDate h5 {
            font-size: clamp(14px, 3.5vw, 18px);
        }

    .calendarEventDate {
        color: #000000;
        font-size: clamp(12px, 3vw, 14px);
        font-weight: lighter;
        margin-left: 1.4vw;
        margin-right: 1.4vw;
    }
}

/*               moreInfo               */
#moreInfo {
    display: block;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 50px;
    position: relative;
    background: url(/micaf/2/img/frame/deco6_1.png), url(/micaf/2/img/frame/deco6_9.png);
    background-color: white;
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: right;
}

    #moreInfo h2 {
        /*        background-image: url("/micaf/2/img/frame/header4.png");
        background-repeat: no-repeat;
        background-size: cover;*/
        padding: 0.5em;
        position: relative;
        z-index: 2;
        text-align: center;
    }

        /*        #moreInfo h2::after {
            content: "";
            position: absolute;
            background-image: url("/micaf/2/img/frame/deco9.png");
            background-repeat: no-repeat;
            background-size: 16vw;
            background-position: top right;
            width: 385px;
            height: 407px;
            z-index: -1;
            margin-top: -12vw;
            margin-right: 2vw;
            right: 0;
        }*/

        #moreInfo h2 ul {
            list-style: none;
        }

        #moreInfo h2 li {
            list-style: none;
            display: inline-flex;
            cursor: pointer;
            margin-left: 0.5em;
            padding-left: 0.5em;
            border-left: 1px solid #ffffff;
        }

            #moreInfo h2 li:first-child {
                margin-left: 0;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0;
                border-left: none;
            }

            #moreInfo h2 li:last-child {

            }

.infoActive {
    text-decoration: underline;
    text-underline-position: under;
}

#ticketContainer {
    display: none;
}

    #ticketContainer .row {
        position: relative;
        z-index: 99;
    }

#pressContainer {
    display: none;
}

#contactContainer {
    display: none;
}

#reviewContainer {
    display: none;
}

.showMoreInfo {
    display: block !important;
}

.infoContent {
    padding-top: 2.5vw;
}

    .infoContent h3 {
        color: #7825ff;
        padding-top: 0.5vw;
    }

    .infoContent h4 {
        color: #1B88CB;
        font-size: clamp(16px, 1.1vw, 24px);
    }

    .infoContent h5 strong {
        color: #1B88CB;
        font-size: clamp(14px, 1vw, 22px);
    }

    .infoContent h6 {
        font-size: clamp(12px, 0.8vw, 18px);
    }

.infoContent {
    font-size: clamp(14px, 0.85vw, 20px);
}

    .infoContent ol {
        list-style-position: inside;
    }

    .infoContent hr {
        opacity: 1;
        color: #3150A4;
        margin-top: 2vw;
    }

#infoDeco1 {
    top: 0.5%;
    left: 4%;
    width: 8.64vw;
}

#infoDeco2 {
    top: 2%;
    right: 25%;
    width: 2.86vw;
}

#infoDeco3 {
    top: 2%;
    right: 3%;
    width: 4.27vw;
}

#infoDeco4 {
    top: 18%;
    right: 9%;
    width: 2.44vw;
}

#infoDeco5 {
    top: 22%;
    left: 4%;
    width: 3.28vw;
}

#infoDeco6 {
    top: 38%;
    left: 4%;
    width: 5.52vw;
}

#infoDeco7 {
    bottom: 47%;
    right: 9%;
    width: 14.53vw;
}

#infoDeco8 {
    bottom: 45%;
    right: 30%;
    width: 2.86vw;
}

#infoDeco9 {
    bottom: 38%;
    right: 5%;
    width: 25.67vw;
}


#infoDeco10 {
    bottom: 35%;
    right: 20%;
    width: 3.28vw;
}

#ticketTitle {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 4vw;
}

#pressTitle {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 4vw;
}

#contactTitle {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 4vw;
}

#reviewTitle {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
    margin-bottom: 4vw;
}
.reviewItem {
    text-align: center;
}

.review img{
    width:150px;
}

a.review {
    color: #7825ff;
    
}

@media only screen and (max-width: 1440px) {
    #moreInfo {
        display: block;
        width: 100%;
        min-height: 100vh;
        padding-bottom: 50px;
        background: url("/micaf/2/img/frame/deco12.png") 90% 80%, url("/micaf/2/img/frame/deco10.png") -7% 40%, url("/micaf/2/img/frame/deco13.png") 104.5% calc(100% + 3.5vw), url("/micaf/2/img/frame/deco21.png") 92.5% 15%, url("/micaf/2/img/frame/deco11.png") 85% 65%, url("/micaf/2/img/frame/BG4.png");
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
        background-color: #F4F6FB;
        background-size: 20vw, 10vw, 10vw, 5vw, 5vw, auto;
    }
}

@media only screen and (max-width: 768px) {
    #moreInfo {
        background: url("/micaf/2/img/frame/mob/deco6_1.png"), url("/micaf/2/img/frame/mob/deco6_2.png");
        background-repeat: no-repeat;
        background-size: contain,13.51%;
        background-color: #fab418;
        background-position-x: 0,85%;
        background-position-y: 0,10vw;
        color: #4d4d4e;
    }



    .infoTitle {
        padding-left: 0;
        padding-right: 0;
    }

    #moreInfo h2 {
        margin-left: 0;
        width: initial;
        padding-left: 0;
        padding-right: 0;
    }

        #moreInfo h2 ul {
            padding-left: 0;
            margin-bottom: 0;
        }

            #moreInfo h2 ul li {
                font-size: clamp(20px, 4vw, 28px);
            }

        #moreInfo h2::after {
            width: 193px;
            height: 204px;
            background-size: 25vw;
            margin-top: -35vw;
        }

    .infoContent h4 {
        color: #7825ff;
    }

    .infoContent h5 {
        color: #7825ff;
    }

        .infoContent h5 strong {
            color: #7825ff;
        }

    .infoContent {
        padding-top: 5vw;
    }
}

/*           MENU              */
#hamburger {
    display: none;
}

#menuBar {
    background-color: #ff46c8;
    padding: 2.5vw;
    padding-top: 16px;
    padding-bottom: 16px;
    position: fixed;
    z-index: 999;
    top: 0;
}

    #menuBar a {
        color: white;
        text-decoration: none;
        font-size: clamp(14px, 0.9vw, 20px);
        font-weight: bolder;
    }

        #menuBar a:hover {
            color: white;
            text-decoration: none;
            /*                font-size: 16px;
*/
        }

.langbar a {
    border: solid 1px white;
    padding: 1px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 10px;
}

.activeLang {
    background-color: white;
    color: rgba(44,44,44,0.75) !important;
}

.oneBtn {
    padding-left: 10px;
    padding-right: 10px;
}

@media only screen and (max-width: 1130px) {
    #menuBar {
        display: none;
    }

    #hamburger {
        display: block;
        z-index: 100;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #ff46c8;
        padding: 10px;
        padding-left: 5vw;
        padding-right: 5vw;
        width: 100vw;
    }

    .menuItem_mobile {
        font-size: 19px;
        margin: 22px;
        margin-left: 15px;
    }

        .menuItem_mobile a {
            color: white;
            text-decoration: none;
        }

            .menuItem_mobile a:hover {
                color: white;
                text-decoration: none;
            }

    .modal {
        --bs-modal-bg: rgba(0, 0, 0, 0.7);
    }

    .modal-dialog {
        margin: 0;
    }

    .menuItem_mobile {
        color: white;
        overflow: hidden;
    }

    .modal-dialog {
        height: 100% !important;
        width: 100% !important;
        --bs-modal-width: 100%;
        margin: 0;
    }

    #menuModal .modal-body .menuTop .closeBtnOuter .btn-close {
        background: transparent url(/fimm/34/img/frame/icomenucross.png) center no-repeat;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
    }

    .closeBtnOuter {
        display: flex;
        justify-content: flex-end;
    }

    #menuModal .modal-dialog .modal-content .modal-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #menuModal {
        padding-right: 0px !important;
    }

    .menuArrow {
        display: none;
    }

    a.scroll-link.oneBtn.active {
        color: #cef446;
    }

        a.scroll-link.oneBtn.active .col {
            display: flex;
            align-content: center;
        }

            a.scroll-link.oneBtn.active .col span {
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                padding-right: 10px;
                /*flex-basis: min-content;*/
            }

            a.scroll-link.oneBtn.active .col .menuArrow {
                display: block;
                flex: 1 1 auto;
                background-image: url(/fimm/34/img/frame/icoleft.png);
                background-repeat: no-repeat;
                background-position-x: 0;
                background-position-y: center;
            }

    .modal-content {
        height: 100% !important;
    }

    .menuItem_mobile a.langBtn {
        /*        color: #0078ff;
*/ padding: 4px;
        /*        border: 1px solid #0078ff;
*/ margin-right: 14px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 768px) {
    #hamburger {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/*          ENQUIRY             */
#enquiry {
    background-color: #7925ff;
    position: relative;
}

#contact {
    padding-top: 75px;
    padding-bottom: 50px;
    background-image: url('/micaf/2/img/frame/deco7_1.png');
    background-repeat: no-repeat;
}

.enquiryTitle h2 {
    text-align: right;
    padding-right: 30px;
}

.enquiryTitle h2 {
    text-align: right;
    padding-right: 30px;
}

.refreshBtn {
    margin-left: 20px;
    height: 100%;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
}

.contactSumbitBtn {
    height: 100%;
    width: 100%;
    color: #ffffff;
    border: 1px solid white;
    font-weight: bold;
    font-size: clamp(14px, 1vw, 28px);
}

    .contactSumbitBtn:hover {
        border-color: #000000 !important;
    }

#enquiryDeco1 {
    top: 25%;
    left: 8%;
    width: 5.52vw
}

#enquiryDeco2 {
    top: 35%;
    left: 20%;
    width: 5.62vw;
}

#enquiryDeco3 {
    top: 60%;
    left: 12%;
    width: 3.9vw;
}

#enquiryDeco4 {
    top: 73%;
    right: 11%;
    width: 2.55vw;
}

#enquiryDeco5 {
    bottom: -12%;
    left: 10%;
    width: 13.12vw;
}

@media only screen and (max-width: 768px) {
    #contact {
        padding-top: 22px;
        background-image: url('/micaf/2/img/frame/mob/deco7_2.png'),url('/micaf/2/img/frame/mob/deco7_1.png'),url('/micaf/2/img/frame/mob/deco7_3.png');
        background-size: 75%, 43.14%,4.53%;
        background-position-x: 12.68%,14.16%,85.74%;
        background-position-y: top,top,93%;
    }

    .enquiryTitle h2 {
        text-align: left;
        margin-left: 20vw;
    }
}

/*           FOOTER              */
#footer {
    background-color: #808080;
    color: #ffffff;
    font-size: clamp(12px, 0.75vw, 18px);
    padding-top: 50px;
    padding-bottom: 50px;
}

    #footer a {
        color: #ffffff;
    }

        #footer a:hover {
            color: #ffd800;
        }

/*          EVENT DETAIL            */
#eventDetail {
    background-image: url(/micaf/2/img/frame/Prg_deco1.png), linear-gradient(to bottom, #00d887 50vw, #FFFFFF 50vw);
    background-repeat: no-repeat;
    background-position: top left, top;
    padding-top: 120px;
    padding-bottom: 7vw;
    z-index: 8;
    position: relative;
}

#eventTitle {
    font-weight: bolder;
    color: #fff;
}

#eventSubTitle {
    margin-bottom: 2vw;
    color: #fff;
    text-align: left;
}

.eventDesc {
    margin-bottom: 40px;
}

#eventDateDesc {
    color: #fff;
    position: relative;
    z-index: 3;
}

#mainSlide {
    padding-bottom: 1vw;
    position: relative;
    z-index: 2;
}

.mainSlideItem {
    display: none;
}

.activateSlide {
    display: block;
}

#slideShow {
    padding-bottom: 4vw;
    position: relative;
    z-index: 2;
}

#mainSlide::before {
    content: "";
    background: url(/micaf/2/img/frame/deco15.png) no-repeat top center;
    background-size: 18vw;
    height: 435px;
    width: 418px;
    position: absolute;
    margin-left: -200px;
    margin-top: -5vw;
    z-index: -1;
}

.eventSlide {
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(var(--bs-gutter-x)* .25);
    margin-right: calc(var(--bs-gutter-x)* .25);
}

    .eventSlide:hover {
        cursor: pointer;
    }

.eventButton {
    justify-content: flex-end;
}

.eventIcon {
    text-align: center;
}

.eventButtonText {
    font-size: 0.7em;
    color: #4072B9;
}

.videoThumbnail {
    position: relative;
    display: inline-block;
}

    .videoThumbnail::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border: solid red;
        border-width: 0.9vw 1vw 0.9vw 1.2vw;
    }

    .videoThumbnail::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-top: 0.5vw solid transparent;
        border-bottom: 0.5vw solid transparent;
        border-left: 1.0vw solid white;
    }

#desc {
    position: relative;
    margin-bottom: 2vw;
    font-size: clamp(20px, 1.4vw, 32px);
    font-weight: bold;
    color: black;
    z-index: 2;
}

    #desc::after {
        content: "";
        background: url(/micaf/2/img/frame/deco18.png) no-repeat top right;
        background-size: 15vw;
        height: 356px;
        width: 348px;
        position: absolute;
        right: 10vw;
        margin-top: -5vw;
    }

#content {
    font-size: clamp(16px, 1vw, 24px);
    position: relative;
    z-index: 2;
}

    #content::after {
        /*content: "";
        position: absolute;
        border-bottom: 1px solid red;
        width: inherit;
        height: 183px;
        background: url(/micaf/2/img/frame/deco19.png) no-repeat bottom right;
        background-size: contain;*/
    }

    #content hr {
        border: 1px solid red;
    }

.endMargin {
    margin-bottom: 40px;
    height: 10vw;
/*    background-image: url(/micaf/2/img/frame/deco19.png), linear-gradient(to bottom, red, red);
    background-repeat: no-repeat;
    background-position: bottom right, bottom left -4vw;
    background-size: contain, auto 1px;
*/}

#inputBirthday {
    /*display: inline-flex;*/
    align-content: center;
}

    #inputBirthday input {
        height: 36px;
        width: auto;
    }

    #inputBirthday img {
        height: 64px;
        width: auto;
        margin-left: 20px;
    }

        #inputBirthday img:hover {
            cursor: pointer;
        }

.inputInvalid {
    border: 2px solid red;
}

#workshopTable {
    margin-bottom: 50px;
    font-size: clamp(14px, 0.8vw, 20px);
}

    #workshopTable table {
        border: 2px solid #000000;
    }

    #workshopTable tr {
        border: 1px solid #000000;
    }

    #workshopTable th {
        border: 1px solid #000000;
        padding: 2px 4px 2px 2px;
    }

    #workshopTable td {
        border: 1px solid #000000;
        padding: 2px 4px 2px 2px;
    }

#freeWorkshopTable {
    margin-bottom: 30px;
    font-size: clamp(14px, 0.8vw, 20px);
}

    #freeWorkshopTable table {
        border: 2px solid #000000;
    }

    #freeWorkshopTable tr {
        border: 1px solid #000000;
    }

    #freeWorkshopTable th {
        border: 1px solid #000000;
        padding: 2px 4px 2px 2px;
    }

    #freeWorkshopTable td {
        border: 1px solid #000000;
        padding: 2px 4px 2px 2px;
    }

.workshopHeader {
    background-color: #9ECC45;
}

.workshopA {
    background-color: #FFF78F;
}

.workshopB {
    background-color: #FECD87;
}

.workshopC {
    background-color: #BCE6FB;
}

.workshopD {
    background-color: #D3BDDC;
}

.eventContentDeco {
    position: absolute;
}

#eventContentDeco1 {
    top: 34vw;
    left: 5.2vw;
}

#eventContentDeco2 {
    top: 38.22vw;
    right: 6.71vw;
}

#eventContentDeco3 {
    top: 55vw;
    left: 5.2vw;
}

#eventContentDeco4 {
    top: 55vw;
    right: 14.84vw;
}

#eventContentDeco5 {
    bottom: 4vw;
    right: 0;
}

#eventContentDeco6 {
    bottom: 13.12vw;
    left: 3.6vw;
}

@media only screen and (max-width: 768px) {
    #eventDetail {
        background-image: url(/micaf/2/img/frame/mob/Prg_deco1.png), linear-gradient(to bottom, #00d887 120vw, #FFFFFF 120vw);
        background-size: 66.29vw, auto ;
        background-position: top 11vw left 2.5vw, center;
        padding-top: 80px;
    }

    .eventDesc {
        margin-top: 0;
    }

    .eventDetail {
        padding-left: 24px;
        padding-right: 24px;
    }

    .eventButton {
        justify-content: flex-start;
        padding: 0;
        margin-top: 15px;
    }

    .eventIcon img {
        height: 8vw;
        width: auto;
    }

    .eventButtonText {
        font-size: 1rem;
        margin-bottom: 0;
    }

    #mainSlide::before {
        content: "";
        background: none;
    }

    .mainSlide {
        padding-left: calc(var(--bs-gutter-x)* .125);
        padding-right: calc(var(--bs-gutter-x)* .125);
    }

    .eventSlide {
        margin-left: calc(var(--bs-gutter-x)* .125);
        margin-right: calc(var(--bs-gutter-x)* .125);
    }

    #desc::after {
        background: url(/micaf/2/img/frame/deco18.png) no-repeat top right;
        background-size: 25vw;
        height: 178px;
        width: 174px;
        transform: rotate(-15deg);
        right: 5vw;
        margin-top: -20vw;
    }

    #content {
        padding-bottom: 5vw;
    }

        #content::after {
            content: "";
            background: url(/micaf/2/img/frame/deco17.png) no-repeat top right;
            background-size: 5vw;
            height: 101px;
            width: 67px;
            position: absolute;
        }

    .endMargin {
        margin-bottom: 40px;
        height: 15vw;
/*        background-image: url('/micaf/2/img/frame/mob/Workshop_deco7.png'), linear-gradient(to bottom, red, red);
        background-repeat: no-repeat;
        background-position: bottom right, bottom left -4vw;
        background-size: contain, auto 1px;*/
    }

    .endDeco {
        position: relative;
        min-height: 10vh;
    }

        .endDeco img {
            position: relative;
            z-index: 10;
        }

    .lineDeco {
        width: 100%;
        border-bottom: solid 1px #ff46c8;
        position: absolute;
        bottom: 20%;
        width: 95%;
    }

    #inputBirthday input {
        height: 30px;
        width: auto;
    }

    #inputBirthday img {
        height: 56px;
        width: auto;
        margin-left: 10px;
    }

    #moboEventContentDeco1 {
        width: 85.18vw;
        left: 0vw;
        top: 25.46vw;
        display:none;
    }


    #moboEventContentDeco2 {
        width: 41.48vw;
        left:12.22vw;
        bottom: 20.37vw;
    }
}

/*  Intro Detail Page   */
#introDetail {
    background-image: url(/micaf/2/img/frame/intro_deco1.png), url(/micaf/2/img/frame/intro_deco2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top, bottom;
    background-position: top 5vw left 0, bottom;
    padding-top: 200px;
    padding-bottom: 300px;
    z-index: 8;
    font-size: clamp(16px, 1vw, 24px);
    line-height: 30px;
}

.introDetail {
    padding-bottom: 4vw;
    padding-left: 4vw;
    padding-right: 4vw;
}

    .introDetail h1 {
        font-weight: bold;
        text-align: center;
        padding-bottom: 4vw;
    }

@media only screen and (max-width: 768px) {
    #introDetail {
        /*background-image: url(/micaf/2/img/frame/deco14.png), linear-gradient(to bottom, #FFFFFF, #FCF173), linear-gradient(to bottom, #FCF173 50vw, #FFFFFF 50vw);*/
        background-image: url(/micaf/2/img/frame/mob/intro_deco1.png), url(/micaf/2/img/frame/mob/intro_deco2.png);
        background-position: top 20vw left 0, bottom;
        padding-top: 150px;
        padding-bottom: 350px;
    }

    .introDetail {
        padding-left: 8vw;
        padding-right: 8vw;
        padding-bottom: 8vw;
    }
}

/*  News Detail Page   */
#newsDetail {
    background-image: url(/micaf/2/img/frame/intro_deco1.png), url(/micaf/2/img/frame/intro_deco2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top, bottom;
    background-position: top 5vw left 0, bottom;
    padding-top: 200px;
    padding-bottom: 300px;
    z-index: 8;
    font-size: clamp(16px, 1vw, 24px);
    line-height: 30px;
}

@media only screen and (max-width: 768px) {
    #newsDetail {
        /*background-image: url(/micaf/2/img/frame/deco14.png), linear-gradient(to bottom, #FFFFFF, #FCF173), linear-gradient(to bottom, #FCF173 50vw, #FFFFFF 50vw);*/
        background-image: url(/micaf/2/img/frame/mob/intro_deco1.png), url(/micaf/2/img/frame/mob/intro_deco2.png);
        background-position: top 20vw left 0, bottom;
        padding-top: 150px;
        padding-bottom: 350px;
    }
}

@keyframes borderShadowing {
    0% {
        filter: drop-shadow(0 0rem 0.25rem rgba(148, 0, 211, 0.8));
    }

    16% {
        filter: drop-shadow(0 0rem 0.25rem rgba(75, 0, 130, 0.8));
    }

    32% {
        filter: drop-shadow(0 0rem 0.25rem rgba(0, 0, 255, 0.8));
    }

    48% {
        filter: drop-shadow(0 0rem 0.25rem rgba(0, 255, 0, 0.8));
    }

    64% {
        filter: drop-shadow(0 0rem 0.25rem rgba(255, 255, 0, 0.8));
    }

    80% {
        filter: drop-shadow(0 0rem 0.25rem rgba(255, 127, 0, 0.8));
    }

    100% {
        filter: drop-shadow(0 0rem 0.25rem rgba(255, 0, 0, 0.8));
    }
}

#checkBtn {
    animation: 2.1s infinite alternate borderShadowing;
}

#rundown1 {
    margin-right: 30px;
    margin-bottom: 30px;
    animation: 2.1s infinite alternate borderShadowing;
    height: 150px;
    width: auto;
}

#rundown2 {
    margin-right: 30px;
    margin-bottom: 30px;
    animation: 3.3s infinite alternate borderShadowing;
    height: 150px;
    width: auto;
}

#foamParty {
    margin-right: 30px;
    margin-bottom: 30px;
    animation: 2.7s infinite alternate borderShadowing;
    height: 150px;
    width: auto;
}

#waterParty {
    margin-right: 30px;
    margin-bottom: 30px;
    animation: 1.5s infinite alternate borderShadowing;
    height: 150px;
    width: auto;
}

.loader {
    border: 8px solid #f3f3f3; /* Light gray border */
    border-top: 8px solid #3498db; /* Blue top border for spinner effect */
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
    margin: 50px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}