body{background: #0f1414; color:#cfcfcf}
#intro {padding:50px 100px;}
#intro .title,#event-detail .title{background-image: linear-gradient(180deg, #a5d421, #eee);  background-clip: text;color: transparent; margin-bottom:50px;}
#intro p{font-size:24px;}
#intro .block-mkt{ background: #0f0f0f; color:#bfbfbf;margin-top:30px;}
#intro .block-mkt h5{font-size: 30px; color:#fff;}
#events{background-color: #cbfb45; padding:50px;}
#events h1{color:#000}
#event-detail .block-mkt{ background:rgba(203,251,69,.2); color:#bfbfbf;margin-top:30px;}

h1,h2,h3,h4,h5{font-family: "Kanit", sans-serif;}
.leftnav ul{width:100%; display: block;}
.leftnav ul li a{color:#fff; font-family: "Roboto", sans-serif; font-size: 22px;}
.leftnav ul li a:hover{color:#cbfb45}
.leftnav ul li {border-bottom: 1px #343434 solid;}
.leftnav ul{width:100%;}
.leftnav hr{border:1px #fff solid; width:100%}
.ve_button {background: #0f0f0f; color:#fff; width:100%; border-radius:20px;}

#menu i{width:35px;}

.pointer-cursor { cursor: pointer;  }
a, a:hover, a:visited, a:active{color:#cbfb45; text-decoration: none;}
.inner{padding:20px;}
.img-50{width:50%;}
.img-35{width:35%;}
.img-25{width:25%;}

div#lang-selector{position:fixed; bottom:10px;}
div#lang-selector a{text-transform:uppercase;}
div#lang-selector a.active{font-weight:bold;}
div#lang-selector a:nth-child(1){padding-right:20px;}

/* form */
form .form-group label{display: block; width: 100%; color:#fff; margin:15px 0px;}
.form-check label{color:#cbfb45;cursor: pointer;}
/* form input[type="text"], form input[type="password"], form input[type="email"],form input[type="file"] {background-color: #121212; box-shadow: inset 0 0 0 1px #878787;color: #f4f4f4; border:none; border-radius: 3px!important; padding:10px;width:100%;} */
button[type="submit"]{background: #cbfb45; color:#252525; border:none;}
button[type="submit"]:hover,button[type="submit"]:active{background: #749122;}
form.login{margin:0 auto; margin-top:70px; width:70%}
form.login h2{text-align:center; margin-bottom:30px;}
form.login .card-body{padding:2rem 2rem;}

/* brand */
a.btn.vise, a.btn.vise:hover,a.btn.vise:active{background: #cbfb45; color:#252525; border:none;}
a.btn.vise:hover,a.btn.vise:active{background: #749122;}

/* modal */
/* .modal-footer{background: #0f1414; color:#cfcfcf} */

/* all events */
div#all-events, div#event-detail, .main-block{padding: 50px 100px;}
.card.latestevent{background:#121212;border:none; position:relative; margin:15px 0px;box-shadow: -1px 5px 8px 0px #494949;}
.card.latestevent .card-body{padding:30px; min-height: 170px;}
.card.latestevent .eventlogo{position:absolute; top:20px; right:20px; border-radius: 20px;}
div#all-events .card{box-shadow:none!important}
div#all-events .card span.tags{background:rgba(203,251,69,.2); color:#CBFB45; display:inline-block; padding:5px 10px; position:absolute; left:30px; border-radius: 8px;}
div#all-events .card span.tags.participants{top:30px;}
div#all-events .card span.tags.pic{top:80px;}
.step-links{padding:20px 0px;}
.step-links a {
    padding: 5px 10px;
    border-radius: 8px;
    background:rgba(203,251,69,.2); color:#CBFB45;
}

#event-detail .thumbnail-container{margin:5px;  width: 180px; height: 180px; overflow: hidden; float:left;}
.thumbnail-container{margin:5px;  width: 250px; height: 250px; overflow: hidden; float:left;}
.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    }

a.facematch{display:block;    display: block;float: left;background: #0a0a0a; padding: 10px 20px;border-radius: 10px;}
a.facematch img{width:60px; height:60px;}

/* detail event */
#event-detail h2{ padding:0; margin-bottom:20px!important}
span.runlogo{display:inline-block; height:100px; width:100px; border-radius:50px; overflow:hidden;}
span.runlogo img{height:100px; width:100px;}
form.selfieform i, form.bibform i{font-size:45px; color:#CBFB45}
form.selfieform button[type="submit"], form.bibform button[type="submit"]{width: 100%;}
p.event-site{display: inline-block;text-overflow: ellipsis; width: 100%; overflow: hidden;}

/* responsiveness */
@media screen and (max-width: 1200px) {
    .leftnav {
        width: 100%;
        height: auto;
        position: relative;
        display:block!important;
    }

    .leftnav ul.nav{align-items: stretch!important; padding: 0!important; margin-top:30px;}
    .leftnav ul.nav li{padding:0px 15px!important;}
    .leftnav a {float: left;}
    div.content {margin-left: 0;}

    .flex-nowrap{
        display:block!important;
    }

    .leftnav .d-flex{min-height: auto!important;}

    .leftnav .flex-column {
        flex-direction: row!important;
    }

    div.content{width:100%!important}
    .leftnav ul li{border:none;}
    .leftnav ul.nav li{padding:0px 10px!important; display: inline-block;}

    div#all-events, div#event-detail, .main-block{padding: 25px 50px;}
    div#lang-selector{position: inherit!important; margin-top:45px!important; width:100px;}
}

@media (max-width: 767px){
    img.logo{max-width: 200px!important;}
    #intro{padding:10px!important}
    .col-md-6 {
        flex: 0 0 auto;
        width: 100%!important;
    }
    .leftnav ul.nav{margin-top:0px!important; text-align: right;}
    
    div#all-events, div#event-detail, .main-block{padding: 25px 50px;}

    #event-detail .thumbnail-container{width:100%!important; margin:0px!important; height: auto!important; margin-bottom:10px!important}
    div#lang-selector{margin:0px!important; width: auto!important;}
    div#lang-selector a.active{display:none!important}
}

@media screen and (max-width: 400px) {
    .leftnav a {
        text-align: center;
        float: none;
    }
    .leftnav ul.nav li{padding:0px 5px!important;}
    div#all-events, div#event-detail, .main-block{padding: 25px 15px;}
    div#lang-selector {display:none!important} /*TODO: fix hide language selector when too small*/
}

@media screen and (max-width: 1500px) {
    span.runlogo{display:none!important;}
}


/* cookie bar */
body.with-cookie-bar {
    padding-top: 35px;
}

.cookie-bar {
    position: fixed;
    width: 100%;
    bottom:0;
    text-align:center;
    /* height:25px; */
    /* line-height: 25px; */
    background: #fff;color:#000;
}

/* gallery download button */
.blueimp-gallery > .gallery-download {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 30px;
    height: 30px;
    display: none;
    cursor: pointer;
    opacity: 0.8;
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}
.blueimp-gallery-controls > .gallery-download {
    display: block;
}
.blueimp-gallery > .gallery-download:hover {
    opacity: 1;
    color: #cbfb45;
}