@charset "UTF-8";
@font-face{font-family:'Roboto'; src:url('../fonts/Roboto-Regular.ttf'); src:url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight:100; font-style:normal;}
@font-face{font-family:'Bienvenu'; src:url('../fonts/Bienvenu.ttf'); src:url('../fonts/Bienvenu.ttf') format('truetype'); font-weight:100; font-style:normal;}
@font-face{font-family:'NotoSerifHK-Bold'; src:url('../fonts/NotoSerifHK-Bold.ttf'); src:url('../fonts/NotoSerifHK-Bold.ttf') format('truetype'); font-weight:100; font-style:normal;}
@font-face{font-family:'NotoSansTC-Regular'; src:url('../fonts/NotoSansTC-Regular.ttf'); src:url('../fonts/NotoSansTC-Regular.ttf') format('truetype'); font-weight:100; font-style:normal;}

html, body {width:100%; min-width:375px; font-family:'Roboto','NotoSansTC-Regular'; font-weight:300; margin:0; padding:0; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; letter-spacing:1px; font-size:18px; line-height:1.5; background-color:#ffffff; color:#ffffff;scroll-behavior: smooth;}

*{box-sizing:border-box;}

img{border:none;}

section{position:relative;}

.Fixed{overflow:hidden;}
/* Body */
body {
    font-family: 'Roboto','Bienvenu','NotoSansTC-Regular';
	background-color: #fff;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 100;
    overflow-x: hidden;
    overflow-y: scroll;}

*{box-sizing:border-box;}

img{border:none;}

section{position:relative;}

.Fixed{overflow:hidden;}

/* Container */

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	background-color: #FFFFFF;position: relative;}

/* Navigation */
header {
	width: 100%;
	height: 150px;
	background-image: linear-gradient(to right, #385ca4, rgba(34, 127, 191, 1));
    top: 0px;
    z-index: 100;}

.logo {
    float:left;
    display: flex;
    width: 30%;
	height: 100%;
    align-content: center;
    align-items: center;}

.logo img{
    padding: 5%;
    max-height: 150px;
    width: auto;}

.Menubutton{
    width:100px;
    height:80px;
    float: right;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0px;
    display: none;}

.menu-icon{
    width:60%;
    height:50px;
    float: right;
    margin-right: 20%;
    background-image: url("../images/menu_icon.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;}

.menu-icon:hover{
   box-shadow:0 0 30px #fff, 0 0 50px #fff;
   height:50px;
   border-radius: 5px;}

.change{
    width:60%;
    height:80px;
    float: right;
    margin-right: 20%;
    background-image: url("../images/menu_icon_open.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;}

#navmenulist{
    width: 70%;
    height: 100%;
    float: right;
    display: flex;
    justify-content: flex-end;
    align-items:center;
    padding-right: 1%;}

#navmenulist a{
    font-size: 18px;
    display: flex;
	color: #FFFFFF;
	text-decoration: none;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    list-style: none;
    padding:2%;
	transition: all 0.5s linear;
    text-transform: uppercase;}

#navmenulist a:hover{
    color: #fff;
    text-decoration-line: underline;
    transition: 0.5s;
    text-underline-offset: 5px;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff;}



/* Hero Section */
.hero {
    background: linear-gradient(to top left, rgba(34, 127, 191, 0.1), rgba(34, 127, 191, 1), #385ca4), linear-gradient(to top right, #abc7ff, rgba(171, 188, 255, 0), rgba(171, 188, 255, 0)),linear-gradient(to right, rgba(255, 255, 255, 0),rgba(97, 192, 171, 0.7),rgba(97, 192, 171, 1));
    overflow: hidden;
	margin: 0;
	padding: 0;
    width: 100vw;
    height: calc(100vh - 120px);min-height: 800px;}

.slide{
    user-select: none;
    width: 100vw;
    height: calc(100vh - 120px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    margin-top: -80px;
    min-height: 800px;}


.blocHorizontal{
    display: flex;
    flex-direction: row;
    width: 200vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;}

.slide_container {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-x:hidden;
    -ms-overlow-style: none;
    scrollbar-width: none;}

::-webkit-scrollbar {
    display: none;}

.one{
    background-image: url("../images/key_visual.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    animation: 1s ease-out 0s 1 slideInFromLeft;}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.kv_cube_move{
    width: 47vw;
    transform: translateY(5%);}

.kv_cube_move img{
    width: 100%;
    animation: 2s ease-out 0s 1 slideInFromCube;}

.kv_cube_move_bg{
    width: 47vw;
    transform: translateY(5%);
    position: absolute;
    mix-blend-mode:soft-light;
    opacity: 30%;}

.kv_cube_move_bg img{
    width: 100%;
    animation: 2s ease-out 0s 1 slideInFromCube;}

@keyframes slideInFromCube {
  0% {
    transform: translate(-50%,0%);
  }
  100% {
    transform: translate(0,0%);
  }
}

.two {display:flex;
    flex-wrap: wrap;}

.square_background{
    position: absolute;
    width: 50%;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100vh;}

.light {
    position: absolute;
    width: 30px;
    height:30px;
    opacity: 0.5;
    background-color: white;
    box-shadow: #e9f1f1 0px 0px 20px 2px;
    margin: auto;
    top:0;
}

.x1{
  animation: floatUp 6s 4 forwards ease-in-out;
  transform: scale(0.8);
  top: 20%;
}

.x2{
  animation: floatUp 15s 5 forwards ease-in-out;
  transform: scale(1);
  top: 37%;
}

.x3{
  animation: floatUp 10s infinite ease-in-out;
  transform: scale(.5);
  top: 50%;
}

.x4{
  animation: floatUp 5s 5 forwards ease-in-out;
  transform: scale(1.5);
  top: 60%;
}

.x5{
  animation: floatUp 40s 6 forwards ease-in-out;
  transform: scale(0.8);
  top: 70%;
}

.x6{
  animation: floatUp 12s infinite ease-in-out;
  transform: scale(3);
  top: 80%;
}

.x7{
  animation: floatUp 3s infinite ease-in-out;
  transform: scale(1);
  top: 88%;
}

.x8{
  animation: floatUp 30s infinite ease-in-out;
  transform: scale(1.7);
  top: 97%;
}

@keyframes floatUp{
  0%{right: 100%; opacity: 0;box-shadow: #e9f1f1 0px 0px 20px 2px;}
  25%{opacity: 0.2;box-shadow: #e9f1f1 0px 0px 30px 1px;}
  50%{right: 0%; opacity: .1;box-shadow: #e9f1f1 0px 0px 10px 10px;}
  75%{opacity: 0.2;box-shadow: #e9f1f1 0px 0px 30px 1px;}
  100%{right: -100%; opacity: 0;box-shadow: #e9f1f1 0px 0px 20px 2px;}
}

.leadin_title{
    width: 100%;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    text-shadow: 0 0 0px #fff, 0 0 5px #fff;
    font-size: 50px;
    text-align: left;
    position: relative;
    margin-bottom: 5%;}


.leadin_details{
    position: relative;
    width: 100%;
    font-family:'Roboto','NotoSansTC-Regular';
    font-size: 16px;
    text-align: justify;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: -5%;
    animation: leadin 8s ease-out 0s 1 normal forwards;}


@keyframes leadin {
  0%    { transform: translateY(10em); opacity: 0; }
  70%   { transform: translateY(0em); opacity: 1; }
  100%  { transform: translateY(0em); opacity: 1; }
}

.apply_button_wrapper{display: flex;flex-wrap: wrap;justify-content: center}

.apply_button{
    margin-top: 5%;
    width:30vw;
    bottom: 10%;
    border-radius: 30px;
    text-align: center;
    background: linear-gradient(to top right, #3fa9f5, #d294ff);
    list-style: none;
}

.apply_button:hover{box-shadow: inset 0px 2px 10px rgba(167,246,134,0.1), 0px 2px 10px rgba(255,255,255,0.15);}

.apply_button_wrapper a{
    font-size: 30px;
	color: #FFFFFF;
	text-decoration: none;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    list-style: none;
	transition: all 0.5s linear;
    text-transform: uppercase;}

.scroll-downs{
  position: absolute;
  right: 0;
  bottom: 5%;
  left: 0;
  margin: auto;
  width :35px;
  height: 55px;}

.mousey{
  width: 3px;
  padding: 10px 15px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;}

.scroller{
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;}

@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0;}
}

.hero_mobile{display: none}

/* Award Section */
.awards{
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 5%;
    background: linear-gradient(to top left, rgba(126, 191, 158, 1), rgba(34, 127, 191, 0.5), #385ca4), linear-gradient(to top right, #227fbf, rgba(171, 188, 255, 0), rgba(255, 255, 255, 1));}

.sectiontitle{
    background-image:url("../images/section_title.svg");
    background-repeat: no-repeat;
    background-size:cover;
    width: 32%;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    font-size: 25px;
    padding-left: 2%;
    background-position: right;
    max-width: 350px;
    margin-bottom: 3%}

.reveal{
    position: relative;
    transform: translateX(-100%);
    opacity: 0;
    transition: 2s all ease;}

.reveal.active{
    transform: translateX(0%);
    opacity: 1;}

.awardscat_wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;}

.awardscat_box{
    width:33.3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content:center;
    padding: 2%;}

.awardscat_img{
    width:100%;
    display: flex;
    justify-content: center;}

.awardscat_img img{
    width:60%;
    filter: brightness(0.95);}

.awardscat_img img:hover{
    filter: brightness(1.15);
    transition-duration: 1.3s}

.awardscat_name{
    height:30px;
    text-align:center;
    font-size: 18px;
    margin-top: 5%;
    margin-bottom: 5%;}



/* Judges Section */

.judges{width: 100%;
    height: 100%;
    padding-top: 5%;
    position: relative;
    background: linear-gradient(to bottom left, rgba(126, 191, 158, 1), rgba(34, 127, 191, 0.5), #385ca4), linear-gradient(to bottom right, #227fbf, rgba(171, 188, 255, 0), rgba(255, 255, 255, 1));
}

.subtitle{width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 2%}

.judges_headofjudge_box_wrapper{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 5%;}

.judges_headofjudge_title{
    font-family:'Roboto','NotoSansTC-Regular';
    font-size: 18px;
    width: 100%;
    margin-bottom: 2%}

.judges_box{
    width: 60%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: rgba(171,199,255,0.3);
    border-radius: 20px;
	cursor: pointer;
    box-shadow: inset 0px 2px 10px rgba(167,246,134,0.1), 0px 2px 10px rgba(255,255,255,0.15);
}

.judge_photo{
    width: 30%;
    display:flex;
    align-self:flex-end;
}

.judge_photo img{width: 100%;border-radius: 0px 0px 0px 20px;}

.judge_text{
    width: 70%;
    padding: 2%
}

.judge_name{
    width: 100%;
    font-family:'Roboto','NotoSerifHK-Bold';
    font-size: 18px;
}

.judge_title{
    width: 100%;
    font-size: 16px;
}

.headofjudge_description_details{
    text-align: justify;
    font-size: 12px;
    display: none;
}

.judges_box:hover .headofjudge_description_details{display:block;}

.judges_box:hover{background: rgba(167,246,134,0.2);
    transition: 1s;
    box-shadow: 0px 2px 10px rgba(255,255,255,0.5)}

/* Panel of Judges */
.panelofjudges_wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
    align-content: center;
    padding-left:5%;
    padding-right:5%;
    padding-bottom: 5%;
}

.panelofjudges_table{
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.panelofjudges_box{
    width: 32%;
    display: flex;
    align-items: center;
    margin-top: 2%;
    margin-left: 1%;
    background: rgba(171,199,255,0.3);
    border-radius: 20px;
	cursor: pointer;
}

.panelofjudges_photo{
    width: 40%;
    display:flex;
    align-self:flex-end;
}

.panelofjudges_photo img{width: 100%;
    border-radius: 0px 0px 0px 20px;
    padding-bottom: 1%;
    padding-left: 1%;
}

.panelofjudges_text{
    width: 60%;
    padding: 2%;
}
.panelofjudges_name{
    font-family:'Roboto','NotoSerifHK-Bold';
    width: 100%;
    font-size: 18px;
    margin-top: 3%;
}
.panelofjudges_title{
    width: 100%;
    font-size: 14px;
    margin-top: 2%;
    display: none;
}

.panelofjudges_legaladvisor{
    font-family:'Roboto','NotoSerifHK-Bold';
    width: 100%;
    font-size: 14px;color: rgba(167,246,134,1);}


.panelofjudges_box:hover{
    background: rgba(167,246,134,0.2);
    transition: 1s;
    box-shadow: 0px 2px 10px rgba(255,255,255,0.5)
}
.panelofjudges_box:hover .panelofjudges_title{display: block;transition: 1s;}


.judging_criteria_table{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%}

.judging_criteria{
    width: 100%;
    position: relative;
    padding:2%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(97, 192, 171, 1));
    border-radius: 10px;
    background-position: center;
    box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.2);}

.judging_criteria_box{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: center;
    align-content: center;
    align-items: center;
    height:100%;
    margin-bottom: 2%;}

.judging_criteria_deco{
    width:10%;
    display:flex;
    flex-wrap: wrap;}

.judging_criteria_deco img{width: 100%}

.judging_criteria_name{
    width:80%;
    padding-left:2%;
    font-size: 18px;}

.judging_criteria_name p2{font-size: 12px;position: absolute}

.judging_criteria_percentage{
    width: 10%;
    font-size: 18px;
    text-align: center}

/* Winners */

.winners{
    width: 100%;
    height: 100%;
    padding-top: 5%;
    position: relative;
    overflow: auto;
    background: linear-gradient(to top left, rgba(126, 191, 158, 1), rgba(34, 127, 191, 0.5), #385ca4), linear-gradient(to top right, #227fbf, rgba(171, 188, 255, 0), rgba(255, 255, 255, 1));
}

.winners_wrapper{
    padding-left: 5%;padding-right: 5%;padding-bottom: 5%;padding-top:2%
}

.bookletqrcode{width:100%;
    position: relative;
    justify-content: center;
    text-align: center}

.bookletqrcode img{width:30%;}

.bookletqrcode img:hover{filter: brightness(1.1);}

.winner_filter{
    position: relative;
    width: 100%;
    margin-top: 2%;}

.dropbtn {
  width: 100%;
  background-image: linear-gradient(to left, rgba(126, 191, 158, 0.5), rgba(34, 127, 191, 1));
  color: #fff;
  font-size: 20px;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 3%;
  border: 0.1px solid rgba(126, 191, 158, 1);
  text-align: left;
  cursor: pointer;
  border-radius: 30px;
  font-family:'Bienvenu','NotoSerifHK-Bold';
  box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.2);
}

.dropbtn:hover, .dropbtn:focus {
  background:rgba(34, 127, 191, 1);
  box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.1);
}

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

.dropdown-content{
  width: 100%;
  position: absolute;
  background-image: linear-gradient(to left, rgba(126, 191, 158, 0.8), rgba(34, 127, 191, 1));
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 20px;
  z-index: 999;
  display:none;
  margin-top:0.5%;
}

.winner_categories_dropdown{color: #fff;
  padding: 3px 2%;
  text-decoration: none;
  display: block;
  border-bottom: 0.5px solid rgba(255,255,255,1);
  cursor: pointer;}

.winner_categories_dropdown:hover{background-color: rgba(255,255,255,0.8);color:rgba(34, 127, 191, 1)}
.winnershow{display: block;}


.winner_list_wrapper{
    padding: 2%;
    position: relative;
    width: 100%;
    height: 800px;
    overflow-y: auto;
    background-color: rgba(255,255,255,0.05);
    margin-top: 2%;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
    border-radius: 20px;}

.winner_list{
    width:100%;
    position: relative;
    align-content: center;}

.winner_categories{
    width:100%;
    display: flex;
    justify-content: center;
    align-content: center;
    border-bottom: 0.5px solid rgba(255,255,255,1);
    padding-top: 5%;
    padding-bottom: 5%;
    position:relative;
    margin-top:-2px;}

.winner_categories_icon{
    width:30%;
    display: flex;
    justify-content: center;}

.winner_categories_icon img{
    height:150px;
    z-index: 2}

.winner_categories_award{
    width:70%;
    justify-content: center;
    align-self: center}

.winner_categories_award_name{color:#fff;
    font-size: 20px;
    margin-bottom: 2%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(97, 192, 171, 1));
    padding:1%;
    border-radius: 20px;}

.winner_categories_winner{
    font-size: 18px;
    padding-left:1%;}

.winner_categories_winner_title{
    font-size: 14px;
    opacity: 90%;
    margin-bottom: 2%;
    padding-left:1%;}

#scrollbar::-webkit-scrollbar {width: 10px;}

#scrollbar::-webkit-scrollbar-track {
    background-image: linear-gradient(to right, rgba(126, 191, 158, 0.5), rgba(34, 127, 191, 1));
    border: 0.5px solid rgba(255,255,255,1);}

#scrollbar::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,1);}


/* Highlights */
.highlights{
    width: 100%;
    height: 100%;
    padding-top: 5%;
    position: relative;
    overflow: auto;
    background: linear-gradient(to bottom left, rgba(126, 191, 158, 1), rgba(34, 127, 191, 0.5), #385ca4), linear-gradient(to bottom right, #227fbf, rgba(171, 188, 255, 0), rgba(255, 255, 255, 1));
}

.highlights_wrapper{
    padding-left: 5%;padding-right: 5%;padding-bottom: 5%;padding-top:2%;align-content: center;align-items: center;
}

.tabs li {
  list-style:none;
  float:left;
  justify-content: center;
  padding-right: 2%;
  padding-left: 1%;
  width: 48%;
  cursor: pointer;
}

.tabs a {
  background-image: linear-gradient(to left, rgba(126, 191, 158, 0.5), rgba(34, 127, 191, 1));
  color: #fff;
  font-size: 26px;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 3%;
  border: 0.1px solid rgba(126, 191, 158, 1);
  text-align: left;
  cursor: pointer;
  border-radius: 20px;
  font-family:'Bienvenu','NotoSerifHK-Bold';
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}
.tabs a:hover,.tabs a.active {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(97, 192, 171, 1));
    color: #fff;
    border: 0.1px solid rgba(255,2550,255,1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.tabgroup {
  background-color: rgba(255,255,255,0.05);
  width: 100%;
  padding: 1%;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.highlights_photos_wrapper img{width:49.5%;padding: 1%;border-radius: 30px;}


.highlights_video_wrapper{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;}

.highlights_video_box{
    width:50%;
    padding: 1%;}

.highlights_video_box img{width:100%;border-radius: 20px;}

.highlights_video_box p{width:100%;}

.highlights_video_box:hover{
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    background-color: rgba(255,255,255,0.05);
    cursor: pointer;
    border-radius: 20px;
}

/* Exposures */
.exposures{
    width: 100%;
    height: 100%;
    padding-top: 5%;
    position: relative;
    overflow: auto;
    background: linear-gradient(to top left, rgba(126, 191, 158, 1), rgba(34, 127, 191, 0.5), #385ca4), linear-gradient(to top right, #227fbf, rgba(171, 188, 255, 0), rgba(255, 255, 255, 1));
}

.publication {width:100%;display: flex;flex-wrap:wrap;padding: 1%;justify-content: center;text-decoration: none}
.publication:hover{box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);background-color: rgba(255,255,255,0.05);border-radius: 20px;}
.publication img{width:20%;}
.publication_title{width:100%;text-align: center;color: #fff;font-size: 20px;text-decoration: none}
.publication_details{font-size: 14px;opacity: 80%;margin-top: -2%;color: #fff;text-decoration: none}
.articles{width:100%;text-align: center;color: #fff;font-size: 20px;text-decoration: none;}
.articles:hover{text-shadow: 0 0 10px #fff, 0 0 10px #fff;}

/* Past Event */
.past_event{
    width: 100%;
    height: 100%;
    padding-top: 5%;
    position: relative;
    background: linear-gradient(to bottom left, rgba(126, 191, 158, 1), rgba(34, 127, 191, 0.5), #385ca4), linear-gradient(to bottom right, #227fbf, rgba(171, 188, 255, 0), rgba(255, 255, 255, 1));
}
.past_event_wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 2%;}

.past_event_box{width:33.3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content:center;
    padding: 2%;}

.past_event_img{
    width:100%;
    display: flex;
    justify-content: center;}

.past_event_img img{width:80%;margin-bottom: 5%;}

.past_event_name{
    text-align:center;
    font-size:18px;
    margin-top: 5%;
    margin-bottom: 5%;}

.past_event_img img:hover{
    transform: translateY(-5%);
    transition: 2s;
    filter: brightness(1.1);}

/* Orgainiser */
.organiser_glass{
    position: relative;
    display: flex;
    width: 100%;
    padding:3%;
    border-radius: 10px;}

.organiser_logo{
    width: 100%;
    padding: 2%;}

.organisation_frame{
    width: 50%;
    position: relative;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    background:#fff;
    box-shadow: inset 0px 3px 5px rgba(255,255,255,1), 0px 0px 10px rgba(34, 127, 191, 0.5);
}

.organisation_frame p{
    font-family:'Roboto','NotoSerifHK-Bold';
    font-size: 16px;
    color:#000;
    margin-top: 3%;}

.organiser{
    width: 100%;
    padding-top:3%;}

.organiser img{height: 70px;}

.co_organiser{
    width: 100%;
    padding-top: 3%;}

.co_organiser img{height: 80px;}

.strategic_partner{width: 100%;
    padding-top: 3%;
    padding-bottom: 3%;}

.strategic_partner img{height: 80px;}

.supporting_organisations{
    padding-top: 3%;
    width: 100%;
    position: relative;
}

.supporting_organisations img{
    width: auto;
    height: 60px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 4%;
}

/* Footer */

.footer{
	background: linear-gradient(to left, #7acbb8, #019873);
	padding: 5%;
}

.footer_wrapper{
    display: flex;
    align-content: center;
    justify-content: center;}

.footer_logo{
    width: 20%;
    padding-top: 2%}

.footer_logo p{
    font-size: 10px;
    font-family:'Roboto','NotoSerifHK-Bold'}

.footer_logo img{width:80%}

.footer_pagemap{
    width: 25%;
    padding-left: 5%;}

.footer_pagemap p {
    width:100%;
    opacity: 50%;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    font-size: 18px;}

.footer_pagemap a{
    width:100%;
    line-height: 2;
    font-family:'Roboto','NotoSansTC-Regular';
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    padding-left: 2%;}

.footer_pagemap a:hover{
    color: #fff;
    text-decoration-line: underline;
    transition: 0.5s;
    text-underline-offset: 5px;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff;
}

.footer_contact_us{
    width: 25%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-right: 2%;
}

.footer_social_meida{
    width: 25%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-right: 2;}

.footer_contact_us ul{
    list-style: none;
    padding-left: 2%;}

.footer_social_meida ul{
    list-style: none;
    padding-left: 2%;}

.footer_contact_us p {
    width:100%;
    opacity: 50%;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    font-size: 18px;}

.footer_contact_us_phone{
    width:20%;
    padding: 2%;}

.footer_contact_us_phone img{width:100%}

.footer_contact_us_phone img:hover{
    box-shadow: 0px 0px 8px 8px rgba(97, 192, 171, 1);
    background-color: aquamarine;
    border-radius: 10%;
    transition: 0.5s}

.footer_contact_us_email{
    width:20%;
    padding: 2%;}

.footer_contact_us_email img:hover{
    box-shadow: 0px 0px 8px 8px rgba(97, 192, 171, 1);
    background-color: aquamarine;
    border-radius: 10%;
    transition: 0.5s
}

.footer_contact_us_email img{width:100%}

.footer_social_meida p {
    width:100%;
    opacity: 50%;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    font-size: 18px;}

.footer_social_meida_facebook{
    width:20%;
    padding: 3%;}

.footer_social_meida_facebook img:hover{
    box-shadow: 0px 0px 8px 8px rgba(97, 192, 171, 1);
    background-color:aquamarine;
    border-radius: 10%;
    transition: 0.5s}

.footer_social_meida_facebook img{width:100%}

.footer_social_meida_linkedin{
    width:20%;
    padding: 3%;}

.footer_social_meida_linkedin img:hover{
    box-shadow: 0px 0px 8px 8px rgba(97, 192, 171, 1);
    background-color: aquamarine;
    border-radius: 10%;
    transition: 0.5s}

.footer_social_meida_linkedin img{width:100%}

.footer_social_meida_weibo{
    width:20%;
    padding: 3%;}

.footer_social_meida_weibo img:hover{
    box-shadow: 0px 0px 8px 8px rgba(97, 192, 171, 1);
    background-color: aquamarine;
    border-radius: 10%;
    transition: 0.5s}

.footer_social_meida_weibo img{width:100%}



/*call for action end*/
#backtotop{
    position: fixed;
    z-index: 99999;
    right: 40px;
    bottom:230px;
    width: 60px;
    height: 60px;
}

.backtotopactions{
    cursor: pointer;
    width: 100%;
    height: 100%;
    background-image: url("../images/backtotop.png");
    background-position:center;
    border-width: 0px;
    background-size: contain;
    background-color:transparent;
    background-repeat: no-repeat;
    border-radius: 5px;
}

.backtotopactions:hover{
    filter: brightness(1.5);
    transition-duration: 3s;
    transform: translateY(-10%)
}



#newsAlert {
    position: fixed;
    z-index: 9999;
    right: 40px;
    width: 460px;
    padding-top:10px;
    padding-bottom:50px;
    background: linear-gradient(to right bottom, #7acbb8, #019873);
    box-shadow: -5px 5px 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    bottom:30px;
}

#newsAlert p {
    width: 100%;
    font-family:'Bienvenu','NotoSerifHK-Bold';
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    text-shadow: 0 0 1px #fff, 0 0 2px #fff;
    padding-bottom: 10px}


.newsactions{
    cursor: pointer;
    width: 40%;
    text-decoration: none;
    font-family:'Roboto','NotoSansTC-Regular';
    border-style: solid;
    border-width: 1px;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    padding: 12px 40px;
    background: linear-gradient(to top right, #3fa9f5, #d294ff);
    border-color: #fff;
    margin-right: 2%;
}

.newsactions:hover{
    cursor: pointer;
    border-color: transparent;
    color: #fff;
    box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.2s linear;}

.newslater{
    font-family:'Roboto','NotoSansTC-Regular';
    cursor: pointer;
    width: 40%;
    text-decoration: none;
    border-style: solid;
    border-width: 1px;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    padding: 12px 40px;
    border-color: #fff;
    background-color: transparent;
}

.newslater:hover{
    cursor: pointer;
    border-color: transparent;
    background-color: #019873;
    color: #fff;
     box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.2s linear;;
}
#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:24px; text-align:center; color:#004fad; font-family:'poppins', "Helvetica Neue", Helvetica, Arial, "sans-serif";}
#LightboxContent p{font-size:16px; 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;}


/* Normal Desktops */

@media(min-width: 1096px)and (max-width: 1300px){

.hero_mobile{display: none}

.leadin_details{margin-left: 10%;margin-right: 10%;}

.footer_contact_us_phone{width:30%;padding: 2%;}

.footer_contact_us_email{width:30%;padding: 2%;}

.footer_social_meida_facebook{width:30%;padding: 3%;}

.footer_social_meida_linkedin{width:30%;padding: 3%;}

.footer_social_meida_weibo{width:30%;padding: 3%;}

}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {

header{position: relative;}

.Menubutton{display:block;
    transition:0.5s;
    margin-top: 3%;
    margin-right: 2%}

#navmenulist{display:none;
    height: 0%;
    width: 100%;}

#navmenulist a{
    background-image: linear-gradient(to left bottom, #abc7ff, #385ca4);
    box-shadow: inset 0px 3px 5px rgba(255,255,255,0.5), 0px 0px 10px rgba(0,0,0,0.15);
    z-index: 10;
    position: relative;
    padding-top: 1%;
    padding-bottom: 1%;
	text-align: center;
	color: #FFFFFF;
	font-size: 18px;
	transition: all 0.3s linear;
    list-style: none;
    justify-content: center;
    border-radius: 10px;
    float: right;
    width: 50.1%;
}

#navmenulist a:hover{
    background-image: linear-gradient(to right bottom, #abc7ff, #385ca4);
    transition: 0.5s;}

.hero_mobile{display: none}

.one {
    background-image: url("../images/kv_mobile_bg2.png");
    background-repeat: no-repeat;
    background-position:right;
    background-size: 150%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    animation: none}

.kv_cube_move{
    width:100%;
    transform: translate(-60%,5%);}

.kv_cube_move img{animation: none}

.kv_cube_move_bg{
    width: 50%;
    transform: translate(-60%,5%);}

.kv_cube_move_bg img{animation: none}

.leadin_details{
    margin-left: 8%;
    margin-right: 8%;}

.leadin_title{font-size: 30px;
    margin-top: 50px;}

.awardscat_wrapper{
    padding-left: 2%;
    padding-right: 2%;}

.awardscat_name{
    height:50%;
    text-align:center;
    font-size: 16px;
    margin-top: 5%;
    margin-bottom: 5%;}

.judges_box{
    width: 70%;
}

.judge_photo{
    width: 30%;
}

.judge_text{
    width: 70%;
}

.panelofjudges_box{
    width: 48%;
}

.judging_criteria_table{
    padding-top: 5%;}

.bookletqrcode img{width:40%;}


.footer_supporting_organisations img{
    height: 60px;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 2%;}

.footer_contact_us_phone{
    width:30%;
    padding: 2%;}

.footer_contact_us_email{
    width:30%;
    padding: 2%;}

.footer_social_meida_facebook{
    width:30%;
    padding: 3%;}

.footer_social_meida_linkedin{
    width:30%;
    padding: 3%;}

.footer_social_meida_weibo{
    width:30%;
    padding: 3%;}


}

/* Small Tablets */
@media (max-width: 767px) {

header {
	height: 120px;}

.logo {
    float:left;
    display: flex;
    width: 60%;
	height: 120px;
    align-content: center;
    align-items: center;}

.logo img{
    padding: 0%;
    height: 100px;
    width: 276px;}


.Menubutton{
    display:block;
    margin-top: 3%;
    margin-right: 1%}

#navmenulist{
    display:none;
    height: 0%;
    width: 100%;}

#navmenulist a{
    background-image: linear-gradient(to left bottom, #abc7ff, #385ca4 );
    box-shadow: inset 0px 3px 5px rgba(255,255,255,0.5), 0px 0px 10px rgba(0,0,0,0.15);
    z-index: 10;
    position: relative;
    padding-top: 2%;
    padding-bottom: 2%;
	text-align: center;
	color: #FFFFFF;
	font-size: 18px;
	transition: all 0.3s linear;
    list-style: none;
    justify-content: center;
    border-radius: 10px;
    float: right;
    width: 100%;}

#navmenulist a:hover{
    background-image:linear-gradient(to right bottom, #abc7ff, #385ca4);
    transition: 0.5s;}

.hero_mobile{display: none}

.one {
    background-image: url("../images/kv_mobile_bg2.png");
    background-repeat: no-repeat;
    background-position:right;
    background-size: 210%;}

.kv_cube_move{
    width: 100%;
    transform: translate(-80%,5%);}

.kv_cube_move_bg{
    width: 50%;
    transform: translate(-80%,5%);}

.two{
    display: flex;
    flex-wrap: wrap;
    padding: 3%;}

.leadin_title{font-size: 30px;
    margin-top: 50px;}

.leadin_details{
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0%;
    font-size: 12px;}

.apply_button{
    width:50vw;
}

.sectiontitle{
    font-size: 20px;
    margin-top: 5%;width: 50%}

.awardscat_wrapper{
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 5%;
    padding-top: 10%;}

.awardscat_box{
    width:50%;}

.awardscat_name{
    height:50%;
    text-align:center;
    font-size: 14px;
    margin-top: 5%;
    margin-bottom: 5%;}

.judges_box{
    width: 100%;
}

.panelofjudges_box{
    width: 100%;
}

.judging_criteria_table{
    padding-top: 5%;}

.judging_criteria_name{
    font-size: 14px;}

.judging_criteria_name p2{font-size: 8px;position: absolute}

.judging_criteria_percentage{
    font-size: 14px;}

.winners_wrapper{padding: 2%;margin-top:5%}

.bookletqrcode img{width:60%;}

.winner_categories_icon{width:20%;}

.winner_categories_icon img{height: 80px;}

.winner_categories_award{width:80%;bjustify-content: center;align-self: center}

.winner_categories_award_name{font-size: 16px;}

.winner_categories_winner{font-size: 16px;}

.winner_categories_winner_title{font-size: 14px;opacity: 90%;margin-bottom: 4%;}


.highlights_wrapper{padding:2%;margin-top:5%}

.highlights_photos_wrapper img{width:100%;padding: 1%;border-radius: 30px;}

.highlights_video_box{width:100%;}


.past_event{padding-bottom: 5%;}

.past_event_wrapper{
    padding: 0%;
    margin-bottom: 5%;}

.past_event_box{
    width:50%;
    margin-bottom: 5%;
    padding-top: 5%;}

.past_event_name{
    font-size:14px;}

.organiser_glass{
    position: relative;
    display: block;
    width: 100%;
    padding:3%;
    border-radius: 10px;}

.organisation_frame{
    margin-top:-3%;
    width: 100%;
    box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.2);}

.tabs a {
    font-size: 21px; }

.footer_wrapper{display: block;}

.footer_logo{
    width: 50%;
    padding-top: 2%}

.footer_logo p{font-size: 10px;}

.footer_logo img{width:80%}

.footer_pagemap{
    width: 50%;
    padding-left: 0%;}

.footer_contact_us{width: 50%;}

.footer_social_meida{width: 50%;}

.footer_contact_us_phone{
    width:25%;
    padding: 2%;}

.footer_contact_us_email{
    width:25%;
    padding: 2%;}

.footer_contact_us_email img{width:100%}

.footer_social_meida_facebook{
    width:25%;
    padding: 3%;}

.footer_social_meida_facebook img{width:100%}

.footer_social_meida_linkedin{
    width:25%;
    padding: 3%;}

.footer_social_meida_linkedin img{width:100%}

.footer_social_meida_weibo{
    width:25%;
    padding: 3%;}

#newsAlert {
    width: calc( 100% - 50px);
    bottom:10px;
    right: 20px;
}
#backtotop{bottom:210px;right: 10px;}

}


@media (max-height: 800px){

.hero {display: none}

.hero_mobile{background: linear-gradient(to top left, rgba(34, 127, 191, 0.1), rgba(34, 127, 191, 1), #385ca4), linear-gradient(to top right, #abc7ff, rgba(171, 188, 255, 0), rgba(171, 188, 255, 0)),linear-gradient(to right, rgba(255, 255, 255, 0),rgba(97, 192, 171, 0.7),rgba(97, 192, 171, 1));display: block;}



.hero_mobile_one{
    background-image: url("../images/key_visual.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    animation: 1s ease-out 0s 1 slideInFromLeft;padding-top: 5%;}

.kv_cube_move{
    width:50%;
    transform: translate(-10%,0%);}

.kv_cube_move img{animation: none}

.kv_cube_move_bg{width:50%;transform: translate(-10%,0%);}

.kv_cube_move_bg img{animation: none}

.hero_mobile_two{
    padding-top: 10%;
    padding-bottom: 5%;
    display:flex;
    flex-wrap: wrap;
    width: 100vw;
    height: 100%;}

.square_background{
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100%;}

.scroll-downs{
  display: none;}

}