@font-face {
    font-family: Sahel;
    src: url('../../../fonts/Sahel/Sahel.eot');
    src: url('../../../fonts/Sahel/Sahel.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/Sahel/Sahel.woff') format('woff'),
    url('../../../fonts/Sahel/Sahel.ttf') format('truetype');
    font-weight: normal;
}
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100vh!important;
    font-family: Sahel !important;
    
}
html,body {
    box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;}

.container {
    height: 100% !important;
    background-color: #1C335D!important;   
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    max-height: 100vh!important;
    overflow: hidden;
    max-width:420px!important;

}
.row {
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1C335D;
    border: 0;
}
img {
    width: 100%;
    height: 100%;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.butn {
    background-color: #3d409f !important;
    color: #ffffff !important;
    border-radius: 42px !important;
    overflow: hidden !important;
    border: 0;
    text-align: center;
    cursor: pointer;
    padding: 0.7% 0.7%;
    font-family: Sahel;
}
.butn:focus{
    outline: 0!important;
}
.butn:active{
    background-color: #800000!important;
}
h1,h2,h3,h4,h5,h6{
    margin: 0!important;
    padding: 0;
}
#titr {
    color: #ffffff !important;
    text-align: center!important;
    background: transparent !important;
    font-size: 16px!important;
    font-family: Sahel;
}
::-webkit-input-placeholder {
    text-align: center;
    font-size: 0.9rem;
}

:-moz-placeholder {
    text-align: center;
    font-size: 0.9rem;
}

::-moz-placeholder {
    text-align: center;
    font-size: 0.9rem;
}

:-ms-input-placeholder {
    text-align: center;
    font-size: 0.9rem;
}

input.input_style {
    text-align: center;
    color: black;
    margin: 0 auto;
    border: none;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    padding: 0;
}

/*////////////////// Media Query //////////////////*/

@media screen and (orientation: landscape) {
    .container {
        margin-right: auto !important;
        margin-left: auto !important;
        background-color: #1C335D!important;
        height: 100vh!important;
        overflow: visible;
        padding: 0 !important;
        margin: 0 !important;
        border: 0;
       max-width:420px;
    }
    .butn{
        padding: 0.5% 0!important;
    }
}
/*//////////////////////////////////*/
@media (max-width:320px) {

    #header_img{
        height: 50px!important;
    }
    
    .butn{
        font-size: 1.3rem!important;
        padding: 0.9% 0!important;
    }
}
/*//////////////////////////////////////*/
@media (min-width:321px) and (max-width:360px) {
    #header_img{
        max-height: 115px!important;
    }
   
    .butn{
        font-size: 1.3rem!important;
        padding: 0.9% 0!important;
    }
}
/*//////////////////////////////////////*/
@media (min-width:361px) and (max-width:768px) {

   
    .butn{
        font-size: 1.5rem!important;
        padding: 0.3% 0!important;
    }
}
@media (min-width:769px) {
    .container{
        max-width: 420px!important;
        max-height: 100vh!important;
        overflow: hidden!important;
    }
    .butn{
        padding: 0.9% 0!important;
    }
}