@media only screen and (min-width: 150px) AND (max-width: 700px) {


    .mobile_show{
        display: block;
    }
    .mobile_hide{
        display: none;
    }

    #navCapela{
        width: 100% !important;
    }

    #navCapela_div{
        height: 100vh !important;
        display: none;
        top: 0px !important;
        margin: 0px !important;
        width: 100% !important;
    }

    .escolhaAqui{
        margin-bottom: -10px !important;
    }


    .container{
        margin-top: 0px;
        background-position: 49% 0%;
        background-size: 390%;
    }


    #cp_degraus{
        bottom: 0px !important;
    }
    #cp_peregrina{
        top: auto !important;
        bottom: -4% !important;
        left: -30% !important;
    }
    #cp_velario{
        bottom: 1% !important;
        top: auto !important;
        right: -17% !important;
    }
    #cp_altar{
        top:  auto !important;
        bottom: 0% !important;
        left: 6% !important;
    }


    #cp_meu_santuario, #cp_intencao_na_missa,#cp_santissimo_sacramento,#cp_intencao_no_terco, #cp_acender_vela,#cp_doar,#cp_sair {
        width: 100%;
        float: none !important;
        padding: 10px 20px !important;
        text-align: left;
    }

    #modal_principal{
        width: 100% !important;
        height: 100% !important;

        bottom: 0px !important;
        border: 0px !important;
        zoom: 0.8;
        position: fixed !important;
        top: 0px !important;
        margin: 0px !important;
        padding: 20px !important;
        border-radius: 0px !important;
        max-width: 100% !important;
        overflow: auto !important;
        max-height: 100vh;
        padding: 70px 20px !important;
        overflow: scroll !important;
        padding-bottom: 1500px !important;


    }

    .modal_principal_fechar{
        margin-right: 5px !important;
        z-index: 999999999 !important;

    }
    .modal_principal_fechar img{
        width: 32px !important;
        height: 32px !important;
    }

    #modal_principal .cp_button_1{
        width: fit-content !important;
        float: right !important;
    }

    .html {
        height: 90vh;
        width: 100%;
        border: 0px !important;
    }

    .html .col-md-12{
        max-height: 100% !important;
        overflow: hidden !important;

    }

    #cs_entrar_icone{
        display: none;
    }

    #cs_entrar{
        width: 100%;
        background-color: #00000080 !important;
        padding: 10px 20px !important;
        text-align: center;
        display: block !important;
        position: relative;
        margin-top: 54%;
        float: none !important;

    }
    #navCapela li{
        float: none !important;
        width: 100% !important;
        margin-top: 12px;
    }
    .cp_button_1{
        width: 100% !important;
    }
    #navCapela{
        position: relative !important;
        left: auto !important;
        border-radius: 20px !important;
        padding: 14px 19px 18px 20px;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    iframe{
        width: 100% !important;
    }

    #modal_principal .html{
        height: fit-content !important;
        margin-bottom: 120px !important;
    }


    .filtrar_velas{
        width: 48%;
        margin:  0px !important;
    }
    .filtrar_velas:first-child{
        margin-right: 4% !important;
    }

    .velas_div_,.velas_div_2{
        margin-left: 0px !important;
        margin-right: 0px !important;

    }
    .velas_div_ .col-lg-2{
        height: 210px !important;
        margin-bottom: 5px;
        font-size: 20px !important;
    }
    #acender_velas_div .holder{
        margin: 3rem auto 0 !important;
        zoom: 0.4 !important;

    }

    .velas_div_2 .holder{
        height: 140px !important;
    }

    label{
        margin-top: 20px;
    }

    #dia_da_semana{
        margin-left: 20px;
    }

    .col-lg-12, .col-lg-6, .col-md-4{
        margin-top: 0px !important;
    }
    .velas_div_, .velas_div_2{
        margin-top: 80px;
    }
}