body{
    font-family: "Kanit", sans-serif;
}
.loader > div{
    width: 20%;
}
.loader  img{
    animation: scaling 5s ease-in-out infinite;
    display:block;
}
@keyframes  scaling{
    0%{ transform: scale(1)}
    50%{ transform: scale(1.2) }
}
.loader{
    animation-fill-mode: forwards
}

section{
    height: calc(100vh - 100px);
    overflow: auto;
    display: table;
    width: 100%;
}
section .holder{
    display: table-cell;
    vertical-align: middle;
}
.fadder{
    animation:hiding 1s ease-in-out 1 6s  ;
    animation-fill-mode: forwards
}
button{
    border: none;
    transition: background-color 0.5s , color 0.5s ,border 0.5s;
    user-select: none;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: #221f69;
    border-color: #221f69;
}
.btn-eventy{

    background-color: #221f69;
    color: white;
    margin-top: 20px;
    /* border-left: 5px solid #e95b47; */
    /* border-right: 5px solid #e95b47; */
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
    /* float: right; */
}

.btn-eventy2{
    background-color: #221f69;
    color: white;
    margin-top: 20px;
    border-left: 5px solid #e95b47;
    border-right: 5px solid #e95b47;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
}
.bg-orange{
    background-color: #ffa79b !important;
    color:#221f69 !important;
}
.bg-light-orange{
    background-color: #f76c5a !important;
    color:white !important;
}
.btn-eventy:hover,.btn-eventy2:hover{

    background-color: #e95b47;
    color: black;
    margin-top: 20px;
    /* border-left: 5px solid #221f69; */
    /* border-right: 5px solid #221f69; */

}
.splash_screen{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
}
.btn-eventy3{
    background-color: #e95b47;
    color: black;
    margin-top: 20px;
    border-left: 5px solid #221f69;
    border-right: 5px solid #221f69;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
}
.btn-eventy3:hover{

    background-color: #221f69;
    color: white;
    margin-top: 20px;
    border-left: 5px solid #e95b47;
    border-right: 5px solid #e95b47;

}
.alert-eventy{
    background-color: #f5f5f5;
    /* background-color: #e95b47; */
    color: black;
    margin-top: 20px;
    border: 2px solid #221f69;
    /* border-right: 15px solid #221f69; */
    padding: 10px 40px;
    border-radius: 25px;
    font-size: 18px;
    /* font-weight: bold; */
    user-select: none;
    cursor: pointer;
    width: 80%;
}
.alert-eventy.selected{
    background-color: #221f69;
    color: white;
    margin-top: 20px;
    /* border-left: 15px solid #e95b47; */
    /* border-right: 15px solid #e95b47; */
}
.form_holder{
    width: 50%;
}
.video_hloder{
    width: 80%;
    position: relative;
}
.btn_holders{
    position: absolute;
    bottom:-55px;
    left:10px;
}
.video_hloder .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.7;
    cursor: pointer;
}
.video_screen .progress{
    bottom: 4px;
}
.btn_holders button,.next_play,.next_play2{
    background-color: #221f69;
    color: white;
    border-left: 4px solid #e95b47;
    border-right: 3px solid #e95b47;
    border-radius: 18px;
    padding: 5px 20px;
}
.btn-back{
    background-color: #e1e1e1;
    color: #333;
    margin-top: 20px;
    /* border-left: 5px solid #e95b47; */
    /* border-right: 5px solid #e95b47; */
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
    /* float: right; */
    display: none;
}
.btn-back:hover{
    background-color: #221f69;
    color: white;
    /* border-left: 4px solid #000;
    border-right: 3px solid #000; */
}
.progress-bar{
    background-color: #e95b47;
}
input[type="range"]::-moz-range-progress {
    background-color: #221f69;
}
input[type="range"]::-moz-range-track {
    background-color: #221f69;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
    background-color: #221f69;
}
input[type="range"]::-ms-fill-upper {
    background-color: #221f69;
}
.hidden{
    display: none;
}
.form-control{
    border: 2px solid #221f69;
    /* border-right: 5px solid #221f69; */
    border-radius: 25px;
}
h1{
    color: #221f69;
    font-size: 3rem;
}
h2{
    color: #221f69;
    
}
/* @media screen and (min-width: 1200px) {
    h2{
        font-size: 2.5rem;
    }
} */
.fa-star{
    color:#221f69;
}
.thankyou_circle {
        color: #221f69;
        width: 400px;
        height: 400px;
        font-size: 80px;
        text-align: center;
        padding-top: 120px;
        line-height: 75px;
        text-transform: uppercase;
        margin: auto;
}
.activeStar{
    color:#e95b47;
}
.questions{
    position: absolute;
    left: 0;
    right: 0;
    background-color: #281149ed;
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
    color:white;
}
.q1,.q2{
    display: none;
    vertical-align: middle;
}
.q_holder{
    width: 60%;
    margin: auto;
    background-color: white;
    padding: 30px;
    border-radius: 30px;
}
.ui-slider-range {
    background:green;
 }
 .percent {
   color:red;
   font-weight:bold;
   text-align:center;
   width:100%;
   border:none;
 }
 table{
    min-width: 600px;
 }
/* footer .container{
    border-top: 1px solid #0a53be;
} */
@media (max-width: 1200px) {
    .alert-eventy{
        font-size: 18px;
        padding: 10px 30px;
        width: 90%;

    }
}
@media (max-width: 678px) {
    .form_holder{
        width: 80%;
    }
    .loader > div{
        width: 50%;
    }
    h2{
        font-size: 1.5em;
    }
    p{
        font-size: 0.8em;
    }
    .alert-eventy{
        padding: 8px 25px;
        font-size: 16px;
        width: 100%;
    }
    .thankyou_circle {
        color: #221f69;
        width: 300px;
        height: 300px;
        
        font-size: 60px;
        
        padding-top: 80px;
        
    }
    h1{
        font-size: 2.5rem;
    }
    .btn-back{
        padding: 10px 45px;
    }
 
}


select.form-control{
    -webkit-appearance: menulist!important;
    -moz-appearance: menulist!important;
    -ms-appearance: menulist!important;
    -o-appearance: menulist!important;
    appearance: menulist!important;
}