html, body {
    margin:0;
    background-color: #cfcbcb24;
}
main {
    overflow:hidden;
}
img {
    width:100%
}
.background-container {
    position: relative;
    background-size: contain;
    background-color:#fff;
    background-repeat: no-repeat;
}
.background-container img{
    visibility: hidden;
    width:100%;
}
.videobtn{
	position: absolute;
    top: 63%;
    left: 23%;
}
.videobtn a{
    background-color: #F7212A;
    color: #fff;
    border-color: #333;
    border-style: solid;
    border-width: 1px;
    border-radius: 50px;
    padding: 10px 20px;
    text-decoration: none;
}


@media only screen and (max-width: 1200px) {
    .videobtn{
		left: 20%;
	}
}
@media only screen and (max-width: 1000px) {
    .videobtn{
		left: 18%;
	}
}
@media only screen and (max-width: 600px) {
    .videobtn{
		left: 15%;
	}
}

.organiser {
    width:40%;
}
.co_organiser {
    width:30%;
}

.strategic{
    width: 45%;
}
.strategic img {
    width:95px;
    margin-top:10px;
	margin-right:15px;
    vertical-align: top;
}

.knowledge {
    width:30%;
}
.knowledge img {
    width:125px;
}

.sponsor img {
    width:120px;
    margin-top:15px;
    margin-right:15px;
}

.support img{
	margin-top:15px;
    margin-right:15px;
}

.background-info{
    position:absolute;
    z-index:2;
    margin-left: 10%;
    margin-right: 10%;
    top: 0;
    left: 0;
    right: 0;
    width:80%;
}
.logo {
    width:50%;
}
.menu-item {
    display:flex;
    margin-top:5%;
    margin-bottom:5%;
    background-color:#e5fde7;
}
.menu-item a{
    text-decoration: none;
    font-weight:500;
    color: #000;
    padding:1%;
    margin-left:1%
}
.menu-left{
    width:50%;
}
.menu-right{
    width:50%;
}
.index-event-date {
    font-weight:800;
    font-size:13rem;
}
.index-category {
    margin-top: 8%;
    margin-left: 10%;
}
.index-category img {
    visibility: visible;
    width: 28%;
    margin-bottom: 2%;
}
.index-info-container {
    width:40%;
    line-height: 2.5rem;;
}
.index-venue-container p {
    font-size:1.8rem;
}
.apply_button {
    background-color: #00783e;
    border: none;
    color: #fff;
    padding:10px;
    margin-left:3%;
    animation: zoom-in-zoom-out 2s ease-out infinite;

}
@keyframes zoom-in-zoom-out {
    0% {
        background-color: #00783e;
    }
    50% {
        background-color: #00c566;
    }
    100% {
        background-color: #00783e;
    }
    }
.judges-image-container img{
    visibility: visible;
    width:50%;
}
.judges-info-container {
    width: 45%;
}
.judges-logo-container img{
    width: 20%;
    margin-right: 4%;
}
.judges-info-container{
    background-color: #00783e;
    padding-top: 1%;
    padding-left: 1%;
    color: #fff;
    transform: scaleX(2);
    transform-origin: 0 0;
    line-height: 1.6rem;
}
.judges-info-container div{
    transform:scaleX(0.5);
    transform-origin: 5% 0;
}
.awards-category-container {
    margin-top: 2%;
    margin-bottom: 5%;
}
.award-p {
    margin-top:2%;
    line-height:1.8rem;
}
.awards-bar{
    display:flex;
    background-color:#e5fde7;
    margin-top:1%;
    height: 80px;
}
.awards-benefit {
    font-size: 14px;
}
.awards-bar .icon{
    width:10%;
}
.awards-bar .icon img{
    visibility: visible;
    width: 70px;
    height: 70px;
}
.awards-bar .title{
    width:80%;
    font-weight: 600;
    margin-top:2%;
    margin-left:5%;
}
.awards-bar .arrow{
    width:10%;
}
.member {
    display: inline-block;
    margin: 10px 10px 30px 10px;
    position: relative;
    width:22%;
    margin-top: 5%;
}
.sponsors-container img{
    visibility: visible;
}
.triangle-left{
    display: inline;
    width: 0;
    float: right;
    height: 0;
    margin: 30px auto;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid green;
    margin-right:20%;
}
.triangle-right{
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid green;
	margin-right:3px;
}
.footer-container {
    position:relative;
    display:flex;
    width:80%;
    margin-left:10%;
    margin-top:2%;
    padding-bottom: 5%;
}
.footer-share-text {
    width:70%;
    display:flex;
    margin-top:2%;
}
.footer-share-text a, .footer-share-text span{
    text-decoration: none;
    font-weight:800;
    color: #000;
}

.footer-share-icon {
    width: 75%;
    margin-top:2%;
}
.footer-share-icon a {
    width: 20%;
}
.footer-share-icon img {
    width: 65%;
}
.bottom-p {
    width:80%;
    margin-left:10%;
}

.member_text_container {
    background-color: white;
    position: absolute;
    font-family: 'Poppins';
    padding: 10px;
    width: 80%;
    /*margin: 0 7% 5% 7%;*/
    top: 80%;
    left: -10px;
    text-align: left;
    line-height: 1;
}

.advisor_text_container {
    background-color: #00783e;
    color: #fff;
    position: absolute;
    font-family: 'Poppins';
    padding: 10px;
    width: 80%;
    /*margin: 0 7% 5% 7%;*/
    top: 80%;
    left: -10px;
    text-align: left;
    line-height: 1;
}
.winner-main-container {
		padding-bottom: 92%;
        background-size: cover;
}
.highlight-category-container {
    margin-top: 2%;
    margin-bottom: 5%;
}

.highlight-category-container span{
	font-size:20px;
}

.modal-container .row {
	display:flex;
	background-color:#059975;
}
.modal-container .row .column{
    padding: 5px;
}
.modal-container .row img{
	visibility: visible;
	cursor: pointer;
}
.modal-container .prev,.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #059975;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.modal-container  .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
#highlight-img{
	visibility: visible;
    margin: 5%;
	width:90%;
}
.modal-container .video-wrapper{
	width:97%;
	height:auto;
	min-height:270px;
}
.modal-container .video-wrapper .iframe{
	width:100%;
	height:100%;
	min-height:270px;
}

.card {
  padding: 1rem;
  height: 100%;
}

.cards {
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
}



@media only screen and (max-width: 1800px) {
    .index-event-img {
        padding-bottom:5%;
    }
    .award-main-container {
		padding-bottom: 20%;
        background-size: cover;
    }
	.winner-main-container {
		padding-bottom: 140%;
        background-size: cover;
    }


}


@media only screen and (max-width: 1650px) {
    .award-main-container img{
        padding-bottom: 30%;
    }
    .sponsors-container img{
        padding-bottom: 10%;
    }

}

@media only screen and (max-width: 1550px) {
   
    .sponsors-container img{
        padding-bottom: 20%;
    }
	.strategic{
		width: 60%;
	}
	.sponsor {
        width: 100%;
    }
}

@media only screen and (max-width: 1280px) {
	.winner-main-container {
		padding-bottom: 280%;
        background-size: cover;
    }
    .index-info-container {
        width:45%;
        line-height: 1rem;
        font-size:8px;
    }
    .awards-bar .icon img{
        width: 100%;
        padding-bottom: 0%;
    }
    .award-main-container img {
        padding-bottom: 80%;
    }
    .sponsors-container img{
        padding-bottom: 40%;
    }
    .judges-info-container {
        width: 50%;
        margin-top: -8%;
        padding-top: 0%;
        padding-bottom: 0%;
        line-height: 1.1rem;
    }
    .index-event-img {
        padding-bottom:10%;
    }
    .index-event-date {
        font-size:7rem;
    }
    .index-venue-container p {
        font-size: 1.3rem;
    }
    .index-venue-container button {
        margin-top: -10px;
    }
    .footer-share-icon {
        width: 50%
    }
    .menu-left{
        width:50%;
    }
    .menu-right{
        width:50%;
    }
    .menu-item a{
        font-size:10px;
    }
    .judges-info-container {
        width: 60%;
    }
    .judges-bottom {
        padding-bottom: 30%
    }
    .sponsors-bottom {
        padding-bottom: 10%
    }
    .sponsors-continer {
        font-size: 12px;
    }
    .awards-benefit {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1000px) {
    .index-event-title {
        font-size: 20px;
    }
    .member_text_container {
        background-color: white;
        position: absolute;
        font-family: 'Poppins';
        font-size: 8px;
        width: 85%;
        /*margin: -25px 7% 5% -7%;*/
        top: 95px;
        left: -15px;
        text-align: left;
        line-height: 1;
    }
    .judges-logo-container{
        width: 20%;
        margin-right: 4%;
    }
    .judges-logo-container .member {
        margin: 5% 0px 0px 0px;
    }
    .strategic {
        width: 51%;
        margin: 0px;
    }
    .strategic img {
        margin-top: 25px;
    }
    .sponsor img {
        margin-top: 40px;
    }
}

#LightboxWrapper{width:100%; height:100vh; position:fixed; inset:0; overflow-x:hidden; overflow-y:scroll; z-index:999999; background-color:rgba(22,47,78,0.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; justify-content:center; align-items:flex-start;  opacity:0; transition:opacity 0.3s ease-out;}
#LightboxWrapper, #LightboxWrapper *{box-sizing:border-box;}
#LightboxContainer{opacity:1; flex:1 1 100%; width:100%; max-width:1200px; background-color:#e9fce9; box-shadow:rgba(6, 22, 22, 0.7) 0px 13px 27px -5px, rgba(6, 22, 22, 0.85) 0px 8px 16px -8px;}
#LightboxHeader{width:100%; height:auto; position:relative; padding:30px 0; background: rgba(63,169,245,1); background:-moz-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:-webkit-gradient(left top, right top, color-stop(0%, rgba(63,169,245,1)), color-stop(50%, rgba(0,232,205,1)), color-stop(100%, rgba(0,232,162,1))); background:-webkit-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:-o-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:-ms-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:linear-gradient(to right, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fa9f5', endColorstr='#00e8a2', GradientType=1 );}
#LightboxLogo{width:400px; max-width:70vw; position:relative; margin:0 auto; display:flex; justify-content:center;}
#LightboxLogo img{width:100%; margin:auto; display:block;}
#LightboxContent{width:100%; height:auto; position:relative; padding:calc(10px + 2vw) calc(30px + 3vw); background-color:#FFFFFF;}
#LightboxContent h2{font-size:19px; text-align:center; color:#004fad; font-family:'poppins', "Helvetica Neue", Helvetica, Arial, "sans-serif";}
#LightboxContent p{font-size:14px; text-align:justify; font-weight:normal; color:#3c3c3b; font-family:'poppins', "Helvetica Neue", Helvetica, Arial, "sans-serif";}
#LightboxButtonWrapper{width:100%; display:flex; justify-content:center; padding:20px 0px;}
#LightboxButtonWrapper a{display:block; width:auto; padding:20px 30px; border:0; border-radius:300px; box-shadow:rgba(0,232,205, 0.4) 0px 13px 32px -5px, rgba(0,232,162, 0.7) 0px 8px 22px -8px, rgba(8,55,75, 0.7) 0px 12px 12px -6px; color:#FFFFFF; font-size:20px; text-decoration:none; position:relative; overflow:hidden; z-index:2; transition:0.2s ease-in; white-space:nowrap; font-family:'poppins', "Helvetica Neue", Helvetica, Arial, "sans-serif";}
#LightboxButtonWrapper a::before{content:""; position:absolute; inset:-1%; width:102%; height:102%; background:#004fad; z-index:-2;}
#LightboxButtonWrapper a::after{content:""; position:absolute; inset:-1%; width:102%; height:102%; background: rgba(63,169,245,1); background:-moz-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:-webkit-gradient(left top, right top, color-stop(0%, rgba(63,169,245,1)), color-stop(50%, rgba(0,232,205,1)), color-stop(100%, rgba(0,232,162,1))); background:-webkit-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:-o-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:-ms-linear-gradient(left, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); background:linear-gradient(to right, rgba(63,169,245,1) 0%, rgba(0,232,205,1) 50%, rgba(0,232,162,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fa9f5', endColorstr='#00e8a2', GradientType=1 ); z-index:-1; opacity:0; transition:0.2s ease-in;}
#LightboxButtonWrapper a:hover::after{opacity:1; transition:0.2s ease-out;}
#LightboxButtonWrapper a:hover{box-shadow:rgba(0,232,205, 0.7) 0px 6px 12px -5px, rgba(0,232,162, 0.9) 0px 4px 8px -4px, rgba(8,55,75, 0.7) 0px 6px 6px -3px; color:#FFFFFF; transition:0.2s ease-out;}
#LightboxContent p.Remark{text-align:center; margin:0;}
#LightboxContent p.Remark span{margin:0 4px;}
#LightboxClose{width:50px; height:50px; position:absolute; top:0px; right:0px; overflow:hidden; z-index:100; display:block; font-size:50px; line-height:100%; color:#FFFFFF; font-weight:normal; text-align:center; cursor:pointer; user-select:none;}

#LightboxWrapper.Show{opacity:1; transition:opacity 0.3s ease-in;}
#LightboxWrapper.Hide{opacity:0; transition:opacity 0.3s ease-out;}