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: #0460a9;
    border-color: #0460a9;
}
.btn-eventy{

    background-color: #0460a9;
    color: white;
    margin-top: 20px;
    border-left: 5px solid #f69222;
    border-right: 5px solid #f69222;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
    float: right;
}

.btn-eventy2{
    background-color: #0460a9;
    color: white;
    margin-top: 20px;
    border-left: 5px solid #f69222;
    border-right: 5px solid #f69222;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
}
.btn-eventy:hover,.btn-eventy2:hover{

    background-color: #f69222;
    color: black;
    margin-top: 20px;
    border-left: 5px solid #0460a9;
    border-right: 5px solid #0460a9;

}
.splash_screen{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
}
.btn-eventy3{
    background-color: #f69222;
    color: black;
    margin-top: 20px;
    border-left: 5px solid #0460a9;
    border-right: 5px solid #0460a9;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
}
.btn-eventy3:hover{

    background-color: #0460a9;
    color: white;
    margin-top: 20px;
    border-left: 5px solid #f69222;
    border-right: 5px solid #f69222;

}
.alert-eventy{
    background-color: #f69222;
    color: black;
    margin-top: 20px;
    border-left: 15px solid #0460a9;
    border-right: 15px solid #0460a9;
    padding: 10px 50px;
    border-radius: 25px;
    font-size: 20px;
    font-weight: bold;
    user-select: none;
    cursor: pointer;
}
.alert-eventy.selected{
    background-color: #0460a9;
    color: white;
    margin-top: 20px;
    border-left: 15px solid #f69222;
    border-right: 15px solid #f69222;
}
.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: #0460a9;
    color: white;
    border-left: 4px solid #f69222;
    border-right: 3px solid #f69222;
    border-radius: 18px;
    padding: 5px 20px;
}
.btn-back{
    background-color: #f69222;
    color: white;
    border-left: 4px solid #0460a9;
    border-right: 3px solid #0460a9;
    border-radius: 18px;
    padding: 5px 20px;
    display: none;
}
.btn-back:hover{
    background-color: #f69222;
    color: white;
    border-left: 4px solid #000;
    border-right: 3px solid #000;
}
.progress-bar{
    background-color: #f69222;
}
input[type="range"]::-moz-range-progress {
    background-color: #0460a9;
}
input[type="range"]::-moz-range-track {
    background-color: #0460a9;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
    background-color: #0460a9;
}
input[type="range"]::-ms-fill-upper {
    background-color: #0460a9;
}
.hidden{
    display: none;
}
.form-control{
    border-left: 5px solid #0460a9;
    border-right: 5px solid #0460a9;
    border-radius: 25px;
}
h1{
    color: #0460a9;
    font-size: 3rem;
}
h2{
    color: #0460a9;
    font-size: 2.5rem;
}
.fa-star{
    color:#0460a9;
}
.thankyou_circle {
        background-color: #0a53be;
        width: 400px;
        height: 400px;
        color: white;
        font-size: 80px;
        text-align: center;
        padding-top: 120px;
        line-height: 75px;
        text-transform: uppercase;
        margin: auto;
}
.activeStar{
    color:#f69222;
}
.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;
}
footer .container{
    border-top: 1px solid #0a53be;
}
@media (max-width: 678px) {
    .form_holder{
        width: 80%;
    }
    .loader > div{
        width: 50%;
    }
}