/*Fonts */
.kanit-thin {font-family: "Kanit", sans-serif;font-weight: 100;font-style: normal;}
.kanit-extralight {font-family: "Kanit", sans-serif;font-weight: 200;font-style: normal;}
.kanit-light {font-family: "Kanit", sans-serif;font-weight: 300;font-style: normal;}
.kanit-regular {font-family: "Kanit", sans-serif;font-weight: 400;font-style: normal;}
.kanit-medium {font-family: "Kanit", sans-serif;font-weight: 500;font-style: normal;}
.kanit-semibold {font-family: "Kanit", sans-serif;font-weight: 600;font-style: normal;}
.kanit-bold {font-family: "Kanit", sans-serif;font-weight: 700;font-style: normal;}
.kanit-extrabold {font-family: "Kanit", sans-serif;font-weight: 800;font-style: normal;}
.kanit-black {font-family: "Kanit", sans-serif;font-weight: 900;font-style: normal;}
.kanit-thin-italic {font-family: "Kanit", sans-serif;font-weight: 100;font-style: italic;}
.kanit-extralight-italic {font-family: "Kanit", sans-serif;font-weight: 200;font-style: italic;}
.kanit-light-italic {font-family: "Kanit", sans-serif;font-weight: 300;font-style: italic;}
.kanit-regular-italic {font-family: "Kanit", sans-serif;font-weight: 400;font-style: italic;}
.kanit-medium-italic {font-family: "Kanit", sans-serif;font-weight: 500;font-style: italic;}
.kanit-semibold-italic {font-family: "Kanit", sans-serif;font-weight: 600;font-style: italic;}
.kanit-bold-italic {font-family: "Kanit", sans-serif;font-weight: 700;font-style: italic;}
.kanit-extrabold-italic {font-family: "Kanit", sans-serif;font-weight: 800;font-style: italic;}
.kanit-black-italic {font-family: "Kanit", sans-serif;font-weight: 900;font-style: italic;}


:root {
  --primary-dark-color: #0e0a17;
  --primary-light-color: #f8f3e3;
  --secondary-dark-color: #04000a;

  --primary-accent-color:  rgba(148, 22, 80, 1);
  --secondary-accent-color: rgba(115, 70, 128, 1);

  --light-gradient:  linear-gradient(180deg, rgba(242, 145, 138, 1) 0%, rgba(249, 239, 203, 1) 100%);

  --primary-gradient: linear-gradient(180deg, rgba(244, 166, 91, 1) 0%, rgba(148, 22, 80, 1) 50%, rgba(115, 70, 128, 1) 100%);
  --onetwo-gradient:  linear-gradient(180deg, rgba(244, 166, 91, 1) 0%, rgba(148, 22, 80, 1) 100%);
  --twothree-gradient:  linear-gradient(180deg, rgba(148, 22, 80, 1) 0%, rgba(115, 70, 128, 1) 100%);
  --onethree-gradient:  linear-gradient(180deg, rgba(244, 166, 91, 1) 0%, rgba(115, 70, 128, 1) 100%);



}


body {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  color:  #f8f3e3;
  background:  #0e0a17;
  font-size: 1.2rem;
  margin-top: -60px;
}


h1, h2, h3 {font-family: "Kanit", sans-serif;font-weight: 800;font-style: normal;}
p, a, ul, ol { font-family: "Kanit", sans-serif; font-weight: 300; font-style: normal; }
strong { font-weight: 600; }

.link-light { color: #f8f3e3; }
.link-dark { color: #0e0a17; }

.bg-light { background: var(--primary-light-color); color: var(--primary-dark-color); }
.bg-xtradark { background: var(--secondary-dark-color); }

.bg-primary-gradient {
  background: rgba(115, 70, 128, 1);
  background: var(--primary-gradient);
}

.bg-onetwo-gradient { 
  background: rgba(115, 70, 128, 1);
  background: var(--onetwo-gradient); 
}
.bg-twothree-gradient {
  background: rgba(115, 70, 128, 1);
  background: var(--twothree-gradient);
}
.bg-onethree-gradient {
  background: rgba(115, 70, 128, 1);
  background: var(--onethree-gradient);
}


/*---------- MARGIN/PADDINGS--------- */

.spadding { padding-top: 100px; padding-bottom: 100px; }


/*---------- NAV --------- */

.navbar-brand {
  font-weight: 700;
  text-transform: uppercase;
}

.nav-link { color:  rgba(255,255,255,.85); text-shadow:  0 0 5px rgba(140,80,30,.5); }
.nav-link:hover { color: rgba(255,255,255,1); }
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color:  #f5e4b0;} 
.nav-link.scrolled { text-shadow: none; }

.navbar.bg-dark {
  background: transparent;
  transition: .5s ease-in;
  --bs-bg-opacity:  0;
}

.navbar.bg-dark.scrolled {
  --bs-bg-opacity:  1;
  background: var(--secondary-dark-color);
}



/*---------- BTNS --------- */

.btn {
    padding: 17px 30px;
    border-radius: 30px;
    transition: 0.4s ease-in-out;    
    position: relative;
    border:  none;
    letter-spacing: 2px;
    font-weight: 600;
    font-size:  1.05em;
}

.btn-primary { background: linear-gradient(90deg, rgba(148, 22, 80, 1) 0%, rgba(115, 70, 128, 1) 100%); transition:  background .5s; }
.btn-primary:before, .btn-secondary:before { 
  content: ""; 
  position: absolute; 
  top: 0px; left: 0px; right: 0px; bottom: 0px; 
  border-radius: 30px; border-width: 3px; 
  border-style: solid; border-color: transparent; 
  border-image: initial; background: linear-gradient(90deg, rgb(148, 22, 80), rgb(115, 70, 128)) border-box border-box; 
  mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) padding-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); 
  transition: 500ms; }
.btn-secondary { transition: all .4s ease-in-out; background: transparent; }
.btn-secondary:hover { background: linear-gradient(90deg, rgba(148, 22, 80, 1) 0%, rgba(115, 70, 128, 1) 100%); }


/*---------- HERO --------- */
.hero:before { background: url("../images/hero-img.png") no-repeat top center; z-index: -1; content: ""; position: absolute; width: 100%; height: 100%;  }

.hero { position: relative; z-index: 0; padding-bottom: 40px; overflow: hidden;}
.hero .row:first-child { padding: 180px 0 80px 0; }
.row.clockrow { margin-bottom:  -20px; z-index: 1; }


.hero p { font-size: 1.5em; font-weight: bold; text-shadow: 0px 0px 10px #3a103a; letter-spacing: 2px; }
.logo-img { 
  -webkit-filter: drop-shadow(0px 0px 10px #3a103a);
  filter: drop-shadow(0px 0px 10px #3a103a); 
  width:  500px;
  max-width: 100%;
}

#clockdiv { display: flex; flex-wrap: nowrap; }
#clockdiv .ci span { font-size: 1.5em; font-weight: 600; display:  block; color: #561a56; }
#clockdiv .ci { flex: 0 0 25%; text-align: center; padding:  5px; }

.wave { z-index: -1; width: calc(100% + 1.3px); left: 50%; bottom:  -2px; transform: translateX(-50%); position: absolute;  overflow: hidden;}
.wave svg { position: relative; }
.elementor-shape-fill { fill: #0e0a17; transform-origin: center; transform: rotateY(0deg) scaleY(.6) translateY(-20px); }


/*---------- FLEx /  BOX & BOX LIST --------- */

ul.box-list {
  padding: 0; margin: 0 0 20px 0; list-style-type: none;
  display: flex; flex-wrap: wrap; justify-content: space-around;
}
.box-list li {
  flex:  0 0 100%;
  padding:  30px;
  margin-bottom:  30px;
  border-radius: 30px;
  position: relative;
  font-size:  1.2em;
  display:  flex;
  flex-wrap:  no-wrap;
  
}
.box-list li:last-child { margin-bottom: 0; }

.box-list li:before {
  content: ""; 
  position: absolute; 
  top: 0px; left: 0px; right: 0px; bottom: 0px; 
  border-radius: 30px; border-width: 3px; 
  border-style: solid; border-color: transparent; 
  border-image: initial; background: linear-gradient(90deg, rgb(148, 22, 80), rgb(115, 70, 128)) border-box border-box; 
  mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) padding-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); 
  transition: 500ms; 
}

.box-list li .icon { flex: 0 0 45px; margin-right: 25px;  }
.box-list li span { flex: 0 1 auto; align-self: center; }

.program { display: flex; flex-wrap: wrap; text-align: left; }
.pr-item { display: flex; flex:  0 0 100%; flex-wrap:  nowrap; margin-bottom:  20px; 
  align-items: center;
  justify-content: center;
  background:  #1A1623;
  border-radius:  30px;
  }
.pr-item:last-child { margin-bottom: none; }
.pr-time { flex: 0 0 155px; border-radius:  30px 0 0 30px; text-align: center; }
.pr-desc { flex: 1 1 auto; padding:  20px; border-radius:   0 30px 30px 0; background: #0E0A17; font-size:  1.2em; font-weight:  600; }
.pr-desc span { font-size: 1em; font-weight: 300; display: block; }

/*---------- TRACK --------- */
.track { border-radius: 30px; }
.track .tr-title { padding: 20px 30px; border-radius:  30px 30px 0 0;  background:  rgba(148, 22, 80, 1); background: linear-gradient(90deg, rgba(148, 22, 80, 1) 0%, rgba(244, 166, 91, 1) 100%); color: var(--primary-light-color); }
.track .tr-desc { padding: 15px 30px; background: var(--primary-dark-color); color: var(--primary-light-color); }
.track .tr-exp { padding: 20px 30px; border-radius:  0 0 30px 30px; background: #1A1623; }
.track .tr-title h3 { font-weight: 600; }
.track .tr-desc p:last-child { margin-bottom: 0; }

.accordion { background: none; border: none; }
.accordion-item { margin-bottom: 20px; border-radius: 30px; background: none; border: none; }
.accordion-item:first-of-type { border-radius: 30px; }
.accordion-header { border-radius:  30px 30px 0 0; }
.accordion-button:not(.collapsed), .accordion-button { padding: 20px 50px 20px 30px; border-radius:  30px 30px 0 0;  background:  rgba(148, 22, 80, 1); background: linear-gradient(90deg, rgba(148, 22, 80, 1) 0%, rgba(244, 166, 91, 1) 100%); color: var(--primary-light-color); margin: 0; border: none; box-shadow: none; display:  block; color: var(--primary-light-color); position: relative; }
.accordion-button, .accordion-item:first-of-type>.accordion-header .accordion-button, .accordion-item:last-of-type>.accordion-header .accordion-button { border-radius: 30px 30px 0 0; }
.accordion-button.collapsed, .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed, .accordion-item:first-of-type>.accordion-header .accordion-button.collapsed { border-radius: 30px; }
.accordion-button::after { position: absolute; right: 20px; transform: translateY(-50%); top: 50%; height: 15px; }
.accordion-button h3, .accordion-button p { display:block; }

.accordion-body { padding: 20px 30px; border-radius:  0 0 30px 30px; background: #1A1623; color: var(--primary-light-color); }


/* Speaker list */
ul.speaker-list { list-style: none; }
ul.speaker-list li { display: inline-block; padding:  30px;  margin-bottom:  10px; border-radius: 30px; position: relative; font-size:  1.1em; }
ul.speaker-list li:first-child { margin-left: 0; } ul.speaker-list li:last-child { margin-right: 0; }

ul.speaker-list li:before {
    content: ""; 
  position: absolute; 
  top: 0px; left: 0px; right: 0px; bottom: 0px; 
  border-radius: 30px; border-width: 3px; 
  border-style: solid; border-color: transparent; 
  border-image: initial; background: linear-gradient(90deg, rgb(148, 22, 80), rgb(115, 70, 128)) border-box border-box; 
  mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) padding-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); 
  transition: 500ms; 
}

.speaker-company { font-weight: 600;  }
.speaker-name { color: rgba(244, 166, 91, 1); }
.speasker-title {font-style:  italic; }
.speaker-title:before { content: ", "  }


/* Speaker boxes */
.speaker-wrap { display: flex; flex: wrap; justify-content: space-between; }
.speaker { flex: 0 0 30%; position: relative; border-radius: 30px; padding: 20px; overflow: hidden; }
.speaker:before {
  content: ""; 
  position: absolute; 
  top: 0px; left: 0px; right: 0px; bottom: 0px; 
  border-radius: 30px; border-width: 3px; 
  border-style: solid; border-color: transparent; 
  border-image: initial; background: linear-gradient(90deg, rgb(148, 22, 80), rgb(115, 70, 128)) border-box border-box; 
  mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) padding-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); 
}
.sp-img { max-width: 100%; width: auto; }
.sp-name {}
.sp-title {}
.sp-company {}

/*---------- ELEMENTS --------- */

.icon { width: 45px; }

.img-fit { max-width: 100%; width: 100%; }

.datetime { font-size: 1.1em; letter-spacing: 2px; font-weight: 600 }
.hero p.powered { font-size: 0.7em; font-weight: 200; }
.lightbox {
  background: var(--light-gradient);
  color: var(--primary-dark-color);
}

.bs {
  box-shadow:  0 0 15px 0 rgba(0, 0, 0, .1);
}

.h-topper { 
  display: inline-block;
  font-size:  1.2em;
  font-weight: 200;
  margin-bottom:  0;
  text-transform:  uppercase;
  background: linear-gradient(90deg, rgba(244, 166, 91, 1) 0%, rgba(148, 22, 80, 1) 50%, rgba(115, 70, 128, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100%;
 }

.footer img { max-width: 100%; width: 70px; margin-left: 5px; }
.footer a { color: #fff; }
.footer a:hover { color: #fff; }

/* ---------- Partners ---------- */

.partners { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: flex-start;  align-items:  flex: start;}
.partners a { 
  flex: 0 0 40%; 
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: var(--secondary-dark-color); 
  border: solid 1px var(--primary-dark-color);
  border-radius:  30px;
  box-shadow: 0 0 8px 7px rgba(0,0,0,.4);
  display:  flex; justify-content:  center; align-items:  center;
  
}
.partners.main-partner a { flex: 0 0 75%; margin-bottom: 50px; border: solid 1px #7e633b; }
.partners a:hover { border:  solid 1px var(--primary-accent-color);}
.partners.main-partner a:hover { border:  solid 1px #C28F2C; }
.partners img { /*filter: grayscale(30%);*/ width: 100%; height: auto; flex:  0 0 auto; }
.partners a:hover img { /*filter: none;*/ }

.partner-placeholder img { opacity: .8; }
.partner-placeholder:hover img { opacity: 1; }

/* ---------- Photos ---------- */

.img-collage { display: flex;  justify-content: space-between; flex-wrap: wrap; }
.img-wrapper { flex: 0 0 46%; overflow: hidden; height: 100%;  border-radius: 30px; border: solid 6px #261E36; margin-bottom: 15px; }
.img-wrapper img {  width: 100%;  height: auto;  display: block;  transition: scale .4s ease;  }
.img-wrapper:hover img { scale: 1.1; }
.img-wrapper:hover { border: solid 6px #483c60;  }

.modal-content { background: #261E36; }

/* ---------- LOADER ---------- */
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 2000;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  top:  50%;
  left:  50%;
  transform:  translate(-50%,-50%);
  border: 4px solid rgba(232,31,137,1);
  border-radius: 8px;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: rgba(232,31,137,1);
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(180deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loader-inner {
  0% { height: 0%; }
  25% { height: 0%; }
  50% { height: 100%; }
  75% { height: 100%; }
  100% { height: 0%; }
}



/*------------------- MEDIA QUERIES -------------------*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  .img-wrapper { flex: 0 0 23%; }
  #clockdiv .ci span { font-size: 2em; }
  #clockdiv .ci { padding: 20px; }
  .partners a { flex: 0 0 27%; }
  .partners.main-partner a { flex: 0 0 30%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .hero .row:first-child { padding: 180px 0 80px 0; }
  .row.clockrow { margin-bottom: -20px; }
  .partners a { flex: 0 0 16%; }
  .partners.main-partner a { flex: 0 0 25%; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .hero .row:first-child { padding: 180px 0 100px 0; }
  .row.clockrow { margin-bottom: -10px; }
  .partners a { flex: 0 0 16%; }
  .partners.main-partner a { flex: 0 0 30%; }

  .img-collage { display: flex;  height:  100%; justify-content: space-between; flex-wrap: wrap; }
  .img-wrapper { height: 100%;  border-radius: 30px; border: solid 6px #261E36; margin-bottom: 0px; position: relative; transition:  border .4s; }
  .img-wrapper img { height: 100%; width: auto; position: absolute; left: 50%; translate: -50% 0; }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
 }