@media only screen and (max-width: 400px) {
    #template > .header .information-test .top-section .info-tag > .tag {
        font-size: 13px;
    }
}

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

    #template h2 {
        font-size: 24px;
        font-weight: 900;
        color: #334155;
        border-bottom: 2px solid #D7D7D7;
        margin: 10px 0 20px 0;
        line-height: 48px;
    }

    #template h3 {
        font-size: 22px;
        font-weight: 900;
        color: #334155;
        margin: 10px 0 20px 0;
        line-height: 44px;
    }

    #template h4 {
        font-size: 20px;
        font-weight: 900;
        color: #334155;
        /*border-right: 4px solid #FF8917;*/
        padding-right: 5px;
        margin: 10px 0 20px 0;
        line-height: 40px;
    }

    #template h5 {
        font-size: 18px;
        font-weight: 900;
        color: #334155;
        margin: 10px 0 20px 0;
        line-height: 36px;
    }

    #template p, #template p > span, #template ul > li > span {
        font-size: 16px;
        line-height: 32px;
        font-weight: 500;
        color: #505050;
        margin: 10px 0;
    }

    #template .card-gray {
        padding: 10px !important;
    }

    #template {
        padding: 5px;
    }

    #template > .header {
        flex-direction: column;
        padding: 15px 30px !important;
    }

    #template > .header .information-test {
        height: unset !important;
    }

    #template > .header .information-test .top-section {
        flex-direction: column;
        text-align: center;
    }

    #template > .header .information-test .top-section .title {
        margin: 10px 0;
    }

    #template > .header .information-test .bottom-section {
        flex-direction: column;
    }

    #template > .header .information-test .bottom-section .advance-box {
        width: 100%;
        margin: 10px 0;
    }

    #template > .header .information-test .bottom-section div#tools {
        width: 100%;
        margin: 5px 0;
    }

    #template .toggle-catalog {
        display: none;
    }

    #template .tools-box-mobile {
        display: flex;
        position: fixed;
        top: -100%;
        right: 0px;
        width: 100%;
        flex-direction: row-reverse;
        background: #334155;
        color: white;
        border-bottom: 1px solid #fff;
        z-index: 1000;
    }

    #template .tools-box-mobile span {
        color: white;
    }

    #template .tools-box-mobile.active {
        top: 0;
    }

    #template .tools-box-mobile > div {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        cursor: pointer;
    }

    #template .tools-box-mobile > div {
        border-right: 1px solid #ccc;
    }

    #template .tools-box-mobile > div:last-child {
        border-right: none;
    }

    #template .advance-box-mobile {
        position: fixed;
        bottom: -100%;
        background: white;
        right: 0;
        width: 100%;
        display: block;
    }

    #template .advance-box-mobile .header {
        border-bottom: 1px solid #ccc;
        padding: 10px;
        position: relative;
    }

    #template .advance-box-mobile .header .title {
        font-size: 18px
    }

    #template .advance-box-mobile .header .close {
        position: absolute;
        left: 10px;
        top: 10px;
        cursor: pointer;
    }

    #template .advance-box-mobile > .content {
        list-style: none;
        padding: 0 10px;
        margin: 0;
    }

    #template .advance-box-mobile > .content li {
        border-bottom: 1px solid #e4e4e4;
        padding: 10px 0;
        position: relative;
    }

    #template .advance-box-mobile > .content li div {
        font-size: 16px;
    }

    #template .advance-box-mobile.active {
        bottom: 0;
        z-index: 1000;
    }

    #template .advance-box-background {
        position: fixed;
        width: 100%;
        height: calc(100% - 141px);
        top: -100%;right: 0;
        backdrop-filter: blur(6px);
        background: #3a3a3a3b;
        z-index: 999;
    }

    #template .advance-box-background.active {
        top: 0;
    }

    #template .advance-box-mobile > .content li.active {
        color: green;
    }

    #template .advance-box-mobile > .content li.active:before {
        content: url(../icons/checked-g.svg);
        width: 20px;
        height: 20px;
        position: absolute;
        left: 7px;
    }

    #template .image-suggest {
        margin: 10px;
    }

    #template .card-white, #template .card-green, #template .card-gray, #template .card-shadow , #template .box-123 {
        margin: 10px;
    }


    #template .book-suggest .buttons-group{
        flex-direction: column;
    }
    #template .book-suggest .buttons-group a{
        font-size: 20px;
    }


    #template .tags > .tag {
        padding: 4px 10px;
        margin: 4px;
        font-size: 16px;
    }

    #template .box-downloads {
        flex-direction: column;
    }
    #template a.card-download strong {
        color: #888;
        font-size: 16px !important;
        font-weight: 700;
    }

    #template .card-player > .img{
        display: none;
    }
    #template .card-player .info > span {
        font-size: 14px;
    }
    #template .card-player .info > .audio-player {
        margin-top:8px
    }

    #template .book-suggest{
        flex-direction: column;
    }
    #template .book-suggest > .img{
        width: 100%;
        text-align: center;
    }
    #template .book-suggest > .img img{
        max-height: 200px;
        width: auto;
        display: inline-block;
    }

    #template  .flex-sm-column{
        flex-direction: column;
    }
    /********************************************************************************/
    /********************************************************************************/
    /*************************** Special Test Style *********************************/
    /********************************************************************************/
    /********************************************************************************/
    /* card-sports-exercises */
    #template .card-sports-exercises{
        flex-direction: column-reverse;
    }
    #template .card-sports-exercises .img{
        display: block;
        width: 100%;
        text-align: center;
        margin:0 !important;;
    }
    #template .card-sports-exercises .img img{
        margin: 0 auto !important;
        display: block;
        max-height: 200px;
        width: unset;
    }

    /* image-suggest */
    #template .image-suggest{
        flex-direction: column-reverse;
    }
    #template .image-suggest img {
        margin: 0 auto !important;
        display: block;
        max-height: 200px;
        width: unset;
    }

    #template  #sec_1 {
        padding: 5px !important;
    }
    #template > .header > .image img{
        margin-left: 0px !important;
    }
}