@keyframes jumpInfinite {

    0% {

        padding-bottom: 0px;

    }

    50% {

        padding-bottom: 20px;

    }

    100% {

        padding-bottom: 0px;

    }

}



@keyframes jumpInfiniteMobile {

    0% {

        padding-bottom: 0px;

    }

    50% {

        padding-bottom: 20px;

    }

    100% {

        padding-bottom: 0px;

    }

}



html{

    overflow-x: hidden;

}



.main-div{

    width: 100%;

    height: 100%;

    min-height: 100vh;

    background-image: url(../images/bg_img.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    justify-content: center;

}



.main-inner{

    padding-top: 3%;

    display: flex;

    flex: 1;

    flex-direction: column;

    align-items: center;

}



.main-banner{

    max-width: 50vw;

}



.main-info, .archive-info{

    text-align: center;

    font-size: 2em;

}



.main-info p{

    margin-bottom: 0rem;

    color: #595857;

    font-size: 25pt;

}



.main-info .middle{

    font-size: 24.5pt;

}



.archive-info p{

    margin-bottom: 0rem;

    color: #231815;

    font-size: 17pt;

}



.archive-info{

    display: flex;

    flex-direction: column;

    flex: 1;

    justify-content: flex-end;

    padding-bottom: 2%;

}



.noto-sans{

    font-family: "NOTO-SANS-TC";

}



.futura-pt{

    font-family: "Futura-PT";

}



.Arial-Unicode-MS-Regular{

    font-family: "Arial-Unicode-MS-Regular";

}



.font-light{

    font-weight: 300;

}



.font-bold{

    font-weight: 700;

}



.font-letter-spacing{

    letter-spacing: 3px;

}



img{

    width: 100%;

}



.flex{

    display: flex;

}



.lang-functions-div .lagre-font,

.mobile-functions-div .lagre-font{

    font-size: 1.2em;

}



.lang-functions-div .default-font,

.mobile-functions-div .default-font{

    font-size: 1em;

}



.lang-functions-div .small-font,

.mobile-functions-div .small-font{

    font-size: 0.8em;

}



.function-inners .fonts{

    margin-right: 10px;

    cursor: pointer;

}



.header-main-logo{

    width: 10em;

}



.header-background-div{

    background-color: white;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    /* height: 10vh; */

    position: relative;

    z-index: 5;

    /* min-height: 5em; */

}



.header-background-div .header-items .items{

    display: flex;

    justify-content: center;

    align-self: center;

    position: relative;

    color: black;

    text-decoration: none;

	width: 14%;

}



.header-background-div .header-items .items .header-title{

    font-family: "Montserrat";

	font-weight: bold;

    background-color: #CC177C;

}



.hover-image{

    display: none;

    width: auto;

    height: 100%;

    position: absolute;

}



.header-background-div .header-items .items .hover-image.active{

    display: block;

}



.header-background-div span{

    letter-spacing: 1.5px;

    color: white;

}



.header-background-div span:hover{

    color: #ef8fcf;

}



/* .header-background-div span:active{

    color: #ce1c82;

} */



.header-background-div .header-title{

    z-index: 1;

}



.header-background-div .inner,

.function-inners{

	display: flex;

	justify-content: center;

}



.function-inners{

    align-items: baseline;

}



.function-icons{

	width: 25px;

	height: 25px;

	margin-left: 5%;

    cursor: pointer;

}



.function-icons:hover,

.function-icons:active{

    opacity: 0.5;

}



.footer-div{

    background-color: #ce007b;

    padding: 2% 7%;

    color: white;



}



.footer-links a {

	font-weight: bold;

	padding-right: 3%;

}



.footer-div .items{

    margin-top: 1%;

    margin-bottom: 1%;

    font-family: "Montserrat";

    font-weight: 300;

}



.footer-div .items a{

    color: white;

    text-decoration: none;

}



.footer-div .items p:hover,

.footer-div .items p:active,

.footer-div .items a:hover,

.footer-div .items a:active{

    color: #ecb5d3;

    font-weight: normal;

}



.footer-div .footer-logos{

    max-width: 200px;

}



.copyright-div{

    margin-top: 0%;

}



.site-links {

	padding-bottom: 8px;

}



.copyright-div p,

.site-links a{

    text-decoration: none;

    margin-bottom: 0;

    color: white;

    font-family: "Montserrat";

    font-weight: 300;

    font-size: 14px;

}



.site-links a:first-child{

    padding-left: 0;

}



.site-links a{

    padding: 0 1%;

    letter-spacing: 1px;

}



/* .footer-div .function-icons{

	margin-left: 1%;

    margin-right: 15%;

} */



.header-background-div .row{

	padding-top: 1%;

    padding-bottom: 1%;

	text-align: center;

    width: 100%;

}



.programme-div{

    background-color: #F9B62F;

    /* #f9b62f */

    min-height: 80vh;

    background-image: url(../images/common/bg.png);

    background-repeat: repeat;

}



.programme-div.messages-div,

.programme-div.ticket-infos-div{

    background-color: #fc9d56;



}



.lang-functions-div{

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 50px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    padding: 13px 16px;

    z-index: 1;

}

  

.lang-functions-div:hover .dropdown-content {

    display: block;

}



.lang-functions-div .dropdown-content p{

    margin-bottom: 0;

    cursor: pointer;

}



.programme-inner{

    min-height: 80vh;

    padding: 0 5%;

}



.inner-background{

    padding: 8em 0 5% 0;

}



.programme-div .main-title{

    text-align: left;

    font-size: 4em;

    color: #c92f05;

    font-family: "bebas";

}



.programme-div .main-title-prog{

    text-align: center;

    font-size: 4em;

    color:#223980;

    /* #c92f05 */

    font-family: "bebas";

}



.programme-div.messages-div .main-title{

    color:#223980;

    font-size: 6em;

}



.programme-div.ticket-infos-div .main-title{

    color:#223980;

    font-size: 4em;

    text-align: left;

    line-height: 1.2;

}



.content-results .items .item-image-div{

    position: relative;

}



.content-results .items .image-frame-div{

    overflow: hidden;

    margin: 0 auto;

    width: 100%;

}



.content-results .items .image-frame-div img{

    width: 100%;

    transition: 0.5s all ease-in-out;

    cursor: pointer;

}



.content-results .items .image-frame-div:hover img{

    transform: scale(1.3);

}



.content-results .items .image-frame-div .img_mask{

	background: #000;

    opacity: .7;

    z-index: 2;

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    color: #FFF;

}



.content-results .items .image-frame-div .completed_msg{

	position: absolute;

    left: 0;

    top: 50%;

    color: #FFF;

    z-index: 2;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -o-box-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 100%;

    padding-left: 5%;

    padding-right: 5%;

    text-align: center;

}



.prog-item-spec-title-left-bottom,

.prog-item-spec-title-left-top{

    position: absolute;

    left: -2%;

    bottom: -2%;

    padding: 1% 5%;

    background-color: #7311D4;

    color: white;

    font-family: "Franklin";

	z-index: 3;

}



.prog-item-spec-title-left-top{

    top: -2%;

    bottom: unset;

    z-index: 3;

}



.prog-item-spec-title-left-bottom.Dance-specTag{

    background-color: #0f5b27;

}



.prog-item-spec-title-left-bottom.Exhibition-specTag{

    background-color: #c60071;

}



.prog-item-spec-title-left-bottom.Exhibitions_Film_Screenings-specTag{

    background-color: #c60071;

}



.programme-div .content-inner .items{

    padding: 2%;

}



.programme-div .content-inner .items .items-info{

    margin: 5% 0;

    font-family: "Franklin";

}



.programme-div .content-inner .items .items-info .items-title{

    font-weight: bold;

    font-size: 1.5em;

}



.programme-div .content-inner .items .items-info .items-admission{

    border: 1px solid #223980;

    width: -moz-fit-content;

    width: fit-content;

    padding: 0% 2%;

    color: #223980;

    font-size: 1.2em;

}



.programme-div .content-inner .items .items-info .items-admission a{

    color: #223980;

    font-size: 1em;

    text-decoration: none;

}



.programme-div .content-inner .items .items-info .items-date{

    color: #242424;

    font-size: 1.2em;

}



.programme-div .content-inner .items .items-info p{

    margin-bottom: 0.4rem;

}



.programme-div .content-inner .content-title .row{

    padding: 2% 13%;

}



.programme-div .content-inner .content-title .title-img{

    width: 25px;

}



.programme-div .content-inner .content-title .title-img-div{

    text-align: center;

}



.programme-div .content-inner .content-title{

    margin-bottom: 5%;

}



.programme-div.messages-div .content-inner .content-title,

.programme-div.contact-div .content-inner .content-title,

.programme-div.archive-div .content-inner .content-title{

    margin-bottom: 0;

}



.programme-div .top-banner-div{

    position: relative;

}



.programme-div .swiper-progress-bar{

    position: absolute;

    left: 2%;

    top: 3%;

    margin: auto;

    width: 3em;

    height: 65%;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: white;

    font-family: "Montserrat-SemiBold";

    background-color: rgba(0,0, 0, 0.5);

    border-radius: 30px;

    padding: 18px 6px;

}



.programme-div .swiper-progress-bar .main-bar{

    height: 80%;

    width: 1em;

    margin: 1em 0%;

    position: relative;

    left: 0;

    right: 0;

}



.programme-div .swiper-progress-bar .main-bar:before,

.programme-div .swiper-progress-bar .main-bar-inner{

    content: "";

    position: absolute;

    background: white;

    left: 0;

    right: 0;

    margin: auto;

}



.programme-div .swiper-progress-bar .main-bar:before{

    width: 1.3px;

    height: 100%;

}



.programme-div .swiper-progress-bar .main-bar .main-bar-inner{

    width: 5px;

    height: 20%;

    

}



.social-items-div{

    display: flex;

    flex-direction: column;

    align-items: center;   

    height: 100%;

}



.social-items-div img{

    width: 25px;

}



.social-items-div .items{

    margin-bottom: 4em;

    cursor: pointer;

}



.social-float-div{

    position: fixed;

    display: grid;

    top: 0;

    bottom: 0;

    margin: auto;

    right: 5%;

    height: fit-content;

    z-index: 2;

}



.main-top-div{

    position: absolute;

    bottom: -10vh;

    /*min-height: 344px;*/

    width: 100%;

    z-index: 1;

    display: flex;

    align-items: end;

    justify-content: center;

	/*clip-path: polygon(50% 70%, 100% 40%, 100% 100%, 0 100%, 0 40%);

    background-color: #f9b62f;

    background-image: url(../images/common/bg.png);

    background-repeat: repeat;*/

}



.main-top-div .arrow,

.inner-background .arrow{

    width: 4em;

    cursor: pointer;

}



.main-top-div .arrow{

    animation: jumpInfinite 1.5s infinite;

}





.inner-background .arrow{

    position: absolute;

    animation: jumpInfinite 1.5s infinite;

    top: 0;

    bottom: 0;

    margin: auto;

}





.mobile-menu{

    display: none;

}



.overlay {

    height: 0;

    width: 100%;

    position: fixed;

    z-index: 4;

    left: 0;

    top: 0;

    background-color: #ce007b;

    background-size: 50%;

    background-image: url(../images/common/bg.png);

    background-repeat: repeat;

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay-content {

    position: relative;

    top: 9%;

    width: 100%;

    padding-left: 10%;

    margin-top: 30px; 

}



.overlay a {

    padding: 7px;

    text-decoration: none;

    font-size: 1.2em;

    color: white;

    font-family: 'Montserrat';

    display: block;

    font-weight: bold;

    transition: 0.3s;

}



.overlay .other-div{

    display: none;

    min-height: 100vh;

    padding: 5%;

}



.overlay .other-div.active{

    display: block;

}



.overlay .other-div a{

    padding: 4px;

    padding-left: 2%;

    font-family: "Montserrat";

    font-weight: 300;

    font-size: 0.9em;

    color: #d89ec9;

    padding-bottom: 5%;

}

/* 

.overlay a:hover, .overlay a:focus {

    color: gray;

} */



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



.menu-btn-v1{

    -webkit-user-select: none;

	user-select: none;

	border: none;

	cursor: pointer;

	background-color: transparent;

    position: absolute;

    right: 10%;

    top: 0;

    bottom: 10%;

    margin: auto 0;

}



.menu-span, .menu-span::before, .menu-span::after{

	width: 2rem;

	height: 3px;

	background-color: black;

}





.menu-span{

	width: 2rem;

}



.menu-span::before{

	width: 1.1rem;

}



.menu-span::after{

	width: 1.6rem;

}



.menu-span{

	text-align: right;

	position: absolute;

	top: 50%;

	left: 0px;

	right: 0px;

	margin: 0px auto;

	transform: translateY(-1px);

	display: inline-block;

	cursor: pointer;

	user-select: none;

    -webkit-user-select: none;

	transition: all 300ms ease 0s;

}



.menu-span::before, .menu-span::after{

	content: "";

	display: inline-block;

	position: absolute;

	right: 0px;

	transform-origin: 50% 50%;

	transition: top 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms, transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s, background-color 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;

}



.menu-btn-v1.active .menu-span{

	background: transparent;

}



.menu-btn-v1.active .menu-span:before{

	transform: rotate3d(0, 0, 1, 45deg) scale(1.1);

}



.menu-btn-v1.active .menu-span:after{

	transform: rotate3d(0, 0, 1, -45deg) scale(1.1);

}



.menu-btn-v1.active .menu-span:before, .menu-btn-v1.active .menu-span:after{

	transition: top 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s, transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;

	top: 0px;

	width: 1.7rem;

}



.menu-span::before{

	top: 0.8rem;

}



.menu-span::after{

	top: -0.8rem;

}



.overlay .main-content{

    margin-top: 12%;

    color: white;

    font-family: 'Montserrat';

}



.overlay .main-content p,

.overlay .main-content a{

    margin-bottom: 5%;

    letter-spacing: 1px;

    font-size: 1.1em;

}



.mobile-bar-div{

    text-align: center;

}



.mobile-bar-div{

    display: none;

}



.programme-div .swiper-progress-bar-mobile{

    /* position: absolute;

    left: 2%;

    top: 3%; */

    margin: auto;

    /* width: 3em;

    height: 65%; */

    /* z-index: 2; */

    display: flex;

    /* flex-direction: column;

    align-items: center; */

    color: black;

    font-family: "Montserrat-SemiBold";

    align-items: center;

    justify-content: space-around;

}



.programme-div .main-bar-mobile{

    width: 80%;

    height: 1em;

    margin: 1em 0%;

    position: relative;

    left: 0;

    right: 0;

}



.programme-div .main-bar-mobile:before,

.programme-div .main-bar-inner-mobile{

    content: "";

    position: absolute;

    background: black;

    left: 0;

    top: 0;

    bottom: 0;

    margin: auto;

}



.programme-div .main-bar-mobile:before{

    height: 1.3px;

    width: 100%;

}



.programme-div .main-bar-mobile .main-bar-inner-mobile{

    height: 3px;

    width: 20%;

    

}



.mobile-bar-div-mobile{

    text-align: center;

    display: none;

}



.mobile-menu-dropdown .dropdown-icon{

    width: 25px;

    height: 25px;  

}



.mobile-menu-dropdown{

    align-items: center;

    padding-right: 10%;

    justify-content: space-between;

}



.menu-other-icon{

    width: 20px;

    height: 20px;

}



.mobile-menu-dropdown .other-title-div{

    align-items: center;

}



.mobile-menu-dropdown .other-title-div a:hover{

    opacity: 0.6;

}



.mobile-social-div{

    display: none;

    position: fixed;

    width: 100%;

    padding: 8% 4%;

    bottom: 0;

    text-align: center;

    background-color: #b3096e;

}



.web-menus{

    align-self: center;

}



.mobile-arrow-frame-div{

    position: relative;

    display: flex;

    justify-content: center;

    padding: 8% 0;

}



.accordion-button:not(.collapsed){

    background-color: unset;

    color: black;

    box-shadow: unset;

}



.accordion-item{

    margin-bottom: 2%;

    border-radius: 15px;

    border-color: black;

    background-color: #f7d7c6;

}



.accordion-button{

    background-color: #f7d7c6;

    padding: 2% 4%;

    font-size: 0.7em;

    font-family: 'Montserrat';

}



.accordion-body{

    padding-left: 4%;

    padding-right: 4%;

}



.accordion-button,

.accordion-item:first-of-type,

.accordion-item:first-of-type .accordion-button,

.accordion-item:last-of-type,

.accordion-item:last-of-type .accordion-button.collapsed{

    border-radius: 15px;

}



.accordion-button::after,

.accordion-button:not(.collapsed)::after{

    background-image: url("../images/common/arrow02.png");

    width: 35px;

    height: 35px;

    background-size: 100%;

}





.accordion-item:has(.accordion-button:not(.collapsed)){

    box-shadow: #223980 5px 5px;

}



.accordion-item:not(:first-of-type){

    border: 1px solid black;

}

/*

.messages-photo{

    width: 90%;

}

*/

.messages-info{

    font-family: "GenSenRounded";

    text-align: justify;

}



.programme-div.contact-div .main-title ,

.programme-div.explore-hk-div .main-title{

    color: #263C82;

    font-size: 4em;

    text-align: left;

}



.page-content-info-div{

    background-color: #ffdfc5;

    padding: 5%;

    border-radius: 20px;

    border: 1px solid black;

    box-shadow: #223980 5px 5px;

}



.programme-div.contact-div,

.programme-div.ticket-infos-div{

    position: relative;

    overflow-x: hidden;

}



.contact-bg-img{

    width: 38vw;

    position: absolute;

    z-index: -1;

    right: -11%;

    top: 3%;

}



.contact-icons{

    width: 35px;

}



.contact-table .name-div{

    align-items: center;

}



.contact-table .name-div span{

    font-size: 1.4em;

    font-family: "Montserrat";

}



.contact-table .name-div .contact-icons{

    margin-right: 10%;

}



.contact-table{

    width: 100%;

}



.contact-table tr td:first-child{

    width: 30%;

}





.contact-table tr td{

    vertical-align: top;

    padding-bottom: 3%;

}



.contact-table .t-info-div{

    font-family: "GenSenRounded";

}



/* .contact-table .name-div.web-div span {



} */



.contact-table .name-div.mobile-div span{

    display: none;    

}



.programme-div.ticket-infos-div .inner-background{

    padding-top: 9em;

}



.ticket-infos-img{

    width: 38vw;

    position: absolute;

    left: 55%;

    top: 10em;

}



.ticket-infos-img-two{

    width: 25vw;

    position: absolute;

    right: -12%;

    bottom: 35%;

    z-index: -1;

}



.grp-info-div{

    border-bottom: 1px solid #606060;

    padding-bottom: 2%;

    font-family: "Montserrat";

    color: #444142;

}



.grp-info-div:not(:nth-child(-n + 2)){

    padding-top: 3%;

}



.grp-info-div .organisations-title{

    font-weight: bold;

}



.grp-info-div a{

    color: #223983;

}



.font-GenSenRounded{

    font-family: "GenSenRounded";

}



.grp-info-div:nth-last-child(-n + 2){

    border-bottom: unset;

}



.mobile-functions-div{

    padding-top: 10%;

    padding-left: 3%;

    color: white;

}



.mobile-functions-div{

    display: none;

}





.programme-div.archive-div .main-title{

    color: #263C82;

    font-size: 4em;

}



.programme-div.archive-div .content-results .cover-img{

    box-shadow: #e4007f 7px 7px;

}



.programme-div.archive-div .cover-img{

    width: 100%;

    object-fit: fill;

}



.programme-div.archive-div .item-title{

    margin-top: 8%;

    text-align: center;

    font-family: "Montserrat";

    font-size: 1em;

}



.comming-soon-div p{

    font-size: 1.5em;

    font-family: "bebas";

}



.programme-div.explore-hk-div .accordion-body a{

    color: #0a8985;

    text-decoration: none;

}



.programme-div.explore-hk-div .accordion-item,

.programme-div.explore-hk-div .accordion-button{

    background-color: #e2f4d3;

}



.programme-div.explore-hk-div .accordion-item:has(.accordion-button:not(.collapsed)){

    box-shadow: rgb(225, 123, 3) 4px 5px 1px, rgb(225, 123, 3) 0px 7px 13px -10px, rgb(225, 123, 3) 0px 0px 0px inset;

}



.programme-div .prog-remarks{

    margin-top: 5%;

}



.programme-div .prog-remarks p{

    margin-bottom: 0;

}



.prog-page .prog-page-inner .performers-list table td:first-of-type.light-date,

.prog-page .prog-page-inner .performers-list table .light-date.red{

    color: #CD1338;

}

.header-top-menu{

    background-image: url("../images/common/header_menu_background.png");

    background-size: 100% 100%;

    width: 85%;

    height: 13vh;

    position: absolute;

    top: 0;

    right: 0;

    display: flex;

    padding-left: 10%;

    min-height: 120px;

}



.site-map-div .page-content-info-div a,

.site-map-div .page-content-info-div{

    text-decoration: none;

    font-size: 1.1em;

    font-family: "Montserrat";

    color: #444142;

}



.explore-hk-items{

    background-color: #ffdfc5;

    padding: 5%;

    border-radius: 20px;

    border: 1px solid black;

    box-shadow: rgb(0, 160, 57) 4px 5px 1px, rgb(0, 160, 57) 0px 7px 13px -10px, rgb(0, 160, 57) 0px 0px 0px inset;

    aspect-ratio: 1 / 1;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    place-content: center;

}



.explore-hk-bg-img{

    width: 25vw;

    position: absolute;

    z-index: -1;

    right: -7%;

    top: 4%;

}



.explore-hk-bg-img-two{

    width: 35vw;

    position: absolute;

    z-index: -1;

    left: -5%;

    bottom: 5%;

}



.explore-hk-icons{

    width: 65px;

}



.programme-div.explore-hk-div .content-inner {

    padding: 0 5%;

}



.programme-div.explore-hk-div .content-inner .items{

    padding: 3% 5%;

}



.explore-hk-items a{

    color: black;

    text-decoration: none;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    place-content: center;

}



.programme-div.explore-hk-div .inner-background{

    padding-top: 9em;

}



html[lang="tc"] .programme-div.explore-hk-div .inner-background,

html[lang="th"] .programme-div.explore-hk-div .inner-background {

    padding-top: 9em;

}





.explore-hk-items p{

    font-size: 1.2em;

    font-family: "Montserrat";

}



.programme-div.explore-hk-div .media-coverage-inner .main-title{

    font-size: 4em;

    line-height: 1;

    padding: 0 3%;

}



.flex-wrap{

    flex-wrap: wrap;

}



.mobile-logo-bottom{

    width: 25%;

}



.center-spec-table{

    width: 100%;

}



.programme-div.explore-hk-div .content-results{

    margin-top: 14%;

}



.disable-event{

    pointer-events: none;

}



.w3c-hidden{

    display: none;

}



.link-color-tag{

    color: blue;

}



.programme-div.archive-div,

.programme-div.contact-div,

.programme-div.partners-div{

    background-color: #F89B4D;

}



.messages-photo{

    padding: 0 10%;

}



.throwback-gallery{

    margin-top: 5%;

}



.throwback-gallery .gallery-item{

    width: 25%;

    float: left;

    display: block;

    padding: 0 5px 10px 5px;

}



img.mfp-img {

    border-top: 15px solid #fff;

    border-right: 20px solid #fff;

    border-bottom: 70px solid #fff;

    border-left: 20px solid #fff;

    padding: 0;

}



.mfp-image-holder .mfp-close {

    right: -25px;

    padding-right: 0;

}



.custom-iframe-container {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

}



.custom-iframe-container iframe{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    margin-bottom: 5%;

}



.mfp-bottom-bar {

    /* margin: 0; */

    padding-left: 20px;

    top: 98%;

}



.mfp-title{

    color: black;

}



.mfp-counter{

    right: 20px;

    color: black;

}