html,body {
    height:100%;
    padding:0;
    margin:0;
}
body{
    font-family: 'Prompt', sans-serif !important;
    font-size: 20px;
}

.small, small{
    font-size: 75%;
}
.modal-footer {
    text-align: center !important;
}

.btn-tvi{
    background: #026937;
    color:white;
}
.container, .container-fluid{
    padding: 0px;
}

.color-white{
    color: white;
    line-height: 1.2;
}
.color-yellow{
    color: #FFD681;
}

.logo{
    position: absolute;
    top: 12px;
    margin-left: 12px;
    width: 75px;
}


.keyword{
    background: linear-gradient(180deg, #FFFFFF 82.5%, #E5E5E5 100%);
}
.keyword , .footer{
    position: relative;
}

.keyword > .box{
    position: absolute;
    top: 4em;
    text-align: center;
    color: white;
    width: 100%;
    font-size: 1em;
}

.keyword > .box > h2{
    font-size: 2.5em;
    line-height: 1.5em;
    color: #00A251;
}

.keyword > .box > p{
    padding: 0px 2em;
    max-width: 650px;
    margin: auto;
    margin-top: 1em;

}

.privilege > h2{
    text-align: center;
    margin: 1em auto;
    text-decoration: underline;
}
.sub-box{
    /*text-align: center;*/
    color: #000000;
    padding: 2em 0px;
}
.color-green{
    color: #219653 !important;

}
.sub-box > div > img{
    height: 163px;
    margin-left: 0px;
}
.sub-box > div > h3{
    font-weight: bold !important;
    font-size: calc(1em + 0.4em);
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    line-height: 1.3;
}
.sub-box > h5{
    font-size: 0.9em;
}

.group{
    margin: 2em auto;
}
.group > h2{
    text-align: center;
    margin: 1em auto;
}

.promotion{
    padding: 1em;
    text-align: center;
    background: #026937;
    /*margin-bottom: 6px;*/
}
.promotion > div > h2{
    color: white;
    margin: 1em;
}

.promotion > div > img{
    width: 80%;
    max-width: 520px;
    margin-bottom: 2em;
}
.font-thin{
    font-weight: 200 !important;
}

.footer{
    background: #026937;
    padding: 1em 0;
}
.footer > div > img{
    margin-right: 2em;
    text-align: right;
    width: 45%;
    max-width: 250px;
    padding-bottom: 1em;
}
/*.footer > div{*/
/*    position: absolute;*/
/*    top: 0px;*/
/*    padding-top: 12px;*/
/*    right: 17px;*/
/*    text-align: right;*/
/*}*/
.footer > div > div > a{
    display: inline-block;
}
.footer > div > div > a > img{
    height: 1.5em;
    margin-left: 12px;
    display: inline-block;

}


.modal-dialog{
    margin-top: 3em;
}

ul{
    margin-left: 20px;

}

.btn-how-to{
    border: 1px solid #FFF200;
    box-sizing: border-box;
    border-radius: 40px;
    background: transparent !important;
    color: #FFF200;
    padding: 6px 2em;
    margin-top: .5em;
    font-size: 1.1em;
}


.btn-scan-qr{
    border: 1px solid #026937;
    box-sizing: border-box;
    border-radius: 40px;
    background: transparent !important;
    color: #026937;
    padding: 6px 2em;
    margin-top: 1em;
    font-size: 1.1em;
    display: block;
    margin-bottom: 1em;
}


.btn-warning{
    background: #FFF200 !important;
    /*border: 2px solid #FFCB05;*/
    box-shadow: 0px 3px 2px #FFCB05;
    border-radius: 22px;
    padding: 10px 0em;
    font-size: 1.1em;
    border: none;
    margin-bottom: 2em;
}
.btn-warning:hover{
    color: #000000 !important;

}


.gym-scan > div{
    padding: 7.5px;
}

.gym-scan > div > div {
    border: 1px solid #D9DEDC;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 0px;

    height: 94px;
    line-height: 94px;
}
.box-middle{
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    width: calc(100% - 140px);

}
.box-middle > label{
    font-size: 1em;
    font-weight: 500;
    color: black;

}
.box-middle > p{
    font-size: .7em;
    font-weight: normal !important;
}

.partner-scan{
    display: inline-block;
    float: left;
    margin: 12px;
    width: 72px;
}

.s-download{
    background: url(../images/bn-download.png);
    background-position: center;
    background-size: cover;
    height: 512px;
    padding-left: 15px;
}

.s-download > .container > div{
    height: 512px;
    vertical-align: middle;
    line-height: 1;
    display: table-cell;
}

.text-download{
    font-size: calc(100% + 1.5em);
    margin: 7px 0px 1em;
}

.search-app{
    vertical-align: middle;
    display: table-cell;
    height: 40vw;
}

h4{
    margin-bottom: 6px;
}

.gang-partner{
    padding: 0.5em 0px;
    margin: 0px;
}

.img-device{
    width: 28vw;
    margin-top: 0em;
}



h1{
    text-align: center;
    color: #000000;

}

p{
    font-size: 1.15em;
    color: #000000;
}

.break-line{
    position: relative;
    top: 20px;
    height: 3px;
    background: #1AA383;
    width: 40%;
    margin: auto;
    max-width: 450px;
    min-width: 130px;
}

.text-left{
    text-align: left !important;
}
.promotion > div > div > img{
    margin-bottom: 1em;
}

.text-project{
    position: absolute;
    top: 2em;
    width: 35vw;
    max-width: 580px;
    right: 25%;
}

.women-project{
    position: relative;
    float: left;
    height: 28vw;
    top: 7vw;
    left: -5vw;
}
.bg-top{
    background: url(../images/bg-top.jpg);
    background-position: center;
    background-size: cover;
    height: 35vw;
}
.bg-burger{
    display: inline-block !important;
    height: 20vw;
    max-height: 250px;
    width: auto;
    margin-right: 2em;
}
.text-burger{
    display: inline-block; vertical-align: middle; line-height: normal; text-align: center;
}

.social{
    text-align: right;
}

.bg-gradient{
    height: 53vw;
}

@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}


@media (max-width: 1200px){


}

@media only screen and (max-width: 992px) {

    body{
        font-size: 18px;
    }
    .logo{
        width: 55px;
    }
    .keyword{
        /*height: 76vh;*/
    }
    .keyword > .box{
        top: 3em;
    }
    .keyword > .box > h2{
        font-size: 1.5em;
        line-height: 1.5em;
    }
    .sub-box > div {
        text-align: center;
    }

    .promotion > div > img{
        width: 95%;
        margin-bottom: 2em;
    }

    h1{
        font-size: 1.5em;
    }
    h2{
        font-size: 1.3em;
    }
    h3{
        font-size: 1.2em;
    }

    .sub-box > div > img{
        width: 100px;
        height: auto;
        margin: auto;
    }

    .bg-burger {
        height: 26vw;
    }
    /*.bg-top{*/
    /*    height: 55vh;*/
    /*}*/
    /*.women-project {*/
    /*    height: 39vh;*/
    /*    top: 16vh;*/
    /*}*/

}

@media only screen and (max-width: 755px) {

    body{
        font-size: 14px;
    }
    .logo{
        width: 35px;
    }
    .keyword{
        /*height: 70vh;*/
    }
    .keyword > .box{
        top: 3em;
    }
    .keyword > .box > h2{
        font-size: 1.8em;
        line-height: 1.4em;
    }
    .keyword > .box > p{
        font-size: 1.3em;
        max-width: 499px;
    }
    /*.sub-box{*/
    /*    border-top: 2px solid;*/
    /*}*/

    .footer{
        background: #026937;
    }

    .footer > .col-md-12{
        padding-top: 1%;
        right: 8px;
    }
    .footer > .col-md-12 > a > img{
        height: 1em;
        margin-right: 6px;
    }

    .search-app{
        /*padding: 7% 0 !important;*/
    }

    .search-app > img{
        width: 50%;
    }

    h1{
        font-size: 1.5em;
    }
    h2{
        font-size: 1.2em;
    }
    h3{
        font-size: 1.1em;
    }
    h4{
        font-size: 0.9em;
    }
    h5{
        font-size: 0.8em;
    }

    .social, .address{
        text-align: center;
        margin-top: 1em;
    }

    .bg-gradient{
        height: 61vw;
    }

    .bg-burger{
        height: 25vw;
    }

    .text-burger{
        width: 100%;
        margin: 2em 0px;
    }

    .box-middle > label{
        /*font-size: 1em;*/
        font-weight: 600;

    }
    .box-middle > p{
        font-size: .9em;
    }

}

@media only screen and (max-width: 559px) {
    .search-app{
        /*padding: 5% 0 !important;*/
    }

    .gang-partner{
        padding: 0.2em 0px;
    }

    p{
        font-size: 0.95em;
    }


    .search-app > img{
        width: 42%;
        margin-top: 0.5em !important;
        margin-bottom: 0.5em !important;
    }

    .s-download{
        background: url(../images/bn-download.png);
        background-position: center;
        background-size: cover;
        height: 312px;
    }

    .s-download > .container >div{
        height: 312px;
        vertical-align: middle;
        line-height: 1;
        display: table-cell;
        padding: 0 3%;
    }

    .text-download{
        font-size: calc(100% + 0.5em);
        margin: 7px 0px 1em;
    }



    small {
        font-size: 64%;
    }

    .sub-box > div > h3{
        font-size: calc(1em + 0.2em);
    }

    .bg-burger{
        width: 31%;
        height: auto;
        max-height: unset;
        margin-left: -15px;
        margin-right: 1em;
    }



}

@media only screen and (max-width: 368px) {
    .keyword > .box{
        top: 1em;
    }
    .keyword > .box > h2{
        font-size: 1.8em;
        line-height: 1.4em;
    }
    .keyword > .box > p{
        font-size: 1.2em;
    }

    .footer > .col-md-12{
        padding-top: 2px;
        right: 2px;
    }
    .footer > .col-md-12 > a > img{
        height: 12px;
        margin-right: 6px;
    }


    h1{
        font-size: 1.4em;
    }
    h2{
        font-size: 1em;
    }
    h3{
        font-size: 0.9em;
    }
    h4{
        font-size: 0.7em;
        margin-bottom: 4px;
    }
    h5{
        font-size: 0.6em;
    }


    p{
        font-size: 0.8em;
    }

    .sub-box > div > h3{
        font-size: calc(1em + 0.4em);
        margin-bottom: 6px;
    }

    small {
        font-size: 56%;
    }
    .bg-burger {
        width: 32%;
    }

}