
@media (max-width:350px) {
    .study{
        display: none;
    }

    #questionsholder{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }    
    #contentwrap{
        background-image: url(/assets/images/bg01m.jpg);
    }

}

@media (max-width:520px) {
    
    .loginlink{
        display: none;
    }
    .hbloginlink{
        display: block;
    }
    #questionsholder{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }    
    #contentwrap{
        background-image: url(/assets/images/bg01m.jpg);
    }  

}

@media (max-width:596px) {
    
    #marker::after{
        content: "max-width:596px";
    }  
    .app{
        display: none;
    }

    #contentwrap{
        background-size: 768px auto;
        background-position: top center;
        background-image: url(/assets/images/bg01m.jpg);
    }   
    #questionsholder{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }    


}

@media (min-width:596px) {

    #marker::after{
        content: "min-width:596px";
    }    
    
    #contentwrap{
        background-image: url(/assets/images/bg01m.jpg);
        background-size: 768px auto;
        background-position: top center;
    } 
    #questionsholder{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }    
  

}

/*
 * SEARCH BOX LAYOUT 
 */

@media (max-width: 520px)  {

    #navsearchr, #navsearchl{
        float: none;
    }
    #navsearchr {
        padding: 0 0 7px 0;
    }

    #searchbox #search, #searchbox #fsssearch {
        width: calc(100% - 80px);
    }

}


@media (min-width: 521px) and (max-width: 596px)  {
 
    .hbloginlink{
        display: none;
    }    
    
    #searchboxoutsm, #fsssearchboxoutsm {
        width: 205px;
    }
    #search, #fsssearch {
        width: 131px !important;
    }      
    
    
}

@media (min-width: 597px) and (max-width:671px){

    .hbloginlink{
        display: none;
    }    

    #searchboxoutsm, #fsssearchboxoutsm{
        width: 281px;
    }
    #search, #fsssearch {
        width: 209px !important;
    }
}

@media (min-width:672px){
    
    .hbloginlink{
        display: none;
    }    
    
    #searchboxoutsm, #fsssearchboxoutsm {
        width: 348px;
    }
    #search, #fsssearch {
        width: 275px !important;
    }    
}

/*
 * **********************
 */


/*
 * MENU LAYOUT
 */

@media (max-width: 320px)  {

    #menupad{
        padding-right: 60px;
        text-align: right;
    }
    #menupad ul{

        column-count: 1;

    }    
    .pagewhitebg{
        background: none;
    }    
}
@media (min-width: 321px) and (max-width: 776px)  {


    #menupad{
        padding-right: 0px;
        text-align: center;
    }
    #menupad ul{

        column-count: 2;

    }      
    
}


@media (min-width:777px){
 
    #menupad{
        padding-left: 60px;
        text-align: center;
    }
    
    #menupad ul{

        column-count: 4;

    }    
    
}



/*
 * **********************
 */

@media (min-width:768px) {
    
    #marker::after{
        content: "min-width:768px";
    }
    
    #contentpad {
        padding: 0 20px;
    }   
    
    #bookletlayout{
        display: flex;
        flex-direction: row-reverse;
        gap: 20px;
        
    }

    #bookletleft{
        width: 300px;
    }
    #bookletbody{
        flex: 1;
    }

    #articlebody, #bookletbody{
        margin: 0;
    }
    
    .pagenobg{
        padding: 0;
    }
    
    .pagewhitebg{
        padding: 20px 20px 100px 20px;
    }

    #toolpanelwrap{
        margin: 20px 0 0 0;
    }
    
    #toolpanelwrap{
        float: right;
        width: 340px;  
    }
    
    .qholder{
        /*margin-right: 360px;*/
    }
    
    #articlebody{
        margin-right: 360px;
    }
    
    #contentwrap{
        background-image: url(/assets/images/bg01.jpg);
        background-size: 1200px auto;
        background-position: top center;
        
    }   
    #questionsheader{
        padding-top: 20px;
        width: 60%;
    }
    #questionsholder{
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }    

    

    
}



@media (min-width:1200px) {
             
    #marker::after{
        content: "min-width:1200px";
    }
    
    .pagewhitebg{
        padding: 20px 20px 100px 20px;
    }    
    
    #nav, #menu, #navsearch, #content, #footer{
        width: 1200px;
    } 
    
    #searchresults{
        width: 1200px;
    } 

    #searchresultspad{
        padding: 20px 60px;
    }    
    
    #contentwrap{
        background-image: url(/assets/images/bg01.jpg);
        background-position: top center;        
        background-size: contain;
    }
    
    #questionsheader{
        padding-top: 20px;
        width: 60%;
    }
    #questionsholder{
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }    

    .modal-content {
      background-color: #fefefe;
      border: 1px solid #888;
      width: 1100px; /* Could be more or less, depending on screen size */
    }
    
}  

@media (max-width:275px) {
    
    #questionsholder{
        display: block;
    }
    .homeimage{
        padding: 10px;
    }
}

.mobile_x{
    display: none;
}
@media (min-width: 768px){
    .mobile_y{
        display: none;
    }
    .mobile_x{
       display: block;
    }

}


@media (max-width: 768px){
    
    .bkbuttweb a{
        margin-bottom: 20px;
    }
    
    .pagewhitebgarticle{
        padding: 20px 0 0 0;
        
    }
    
    #bookletleft{
        padding: 0 20px; 
    }
    
    .bqr{
        top: 24px;
        left: 24px;
    }
    
    
    .articleimg{
        padding: 10px 0 0 20px !important;
    }    
    .articleimg img{
        border-radius: 7px !important;
        width: 100% !important;
    }    
    
    #resourcewrapper{
        padding: 0 20px 20px 20px;
    }
}


@media (min-width:801px) {

    .wfull{
        width: calc(100% - 372px);
    }    
    .wfullta{
        width: calc(100% - 84px);
        height: 100px;
    }    
}

@media (max-width:800px) {
    .libeditform span, .libeditform label{
        display: block;
        
    }
    
    .libeditform label{
        width: auto;
        text-align: left;
    }
    
    .libeditform br{
        display: none;
    }
    
    .wfull, .wfullta{
        width: 100% !important;
    }
    .wfullta{
        height: 100px;
    }
    .libeditform button{
        float: none !important;
        width: calc(100% / 3.1) !important;
    }
    
}



/*
*  Booklets
*/

@media (min-width:767px) {
    
    .bookletholder{

        display: flex;

        justify-content: center; 
        align-items: stretch;    

        flex-flow: row wrap;
       
        gap: 15px;
        
    }    
    
    .bookletholder div{
        background: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 15px;
        width: 31%;
    }
}




ul.ui-autocomplete{
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}



#cquranwrapper{
    padding-left: 75px;
}

#cqurans{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;    
}

.cquran{
  color: white;
  padding: 1rem;
  height: 4rem;
  
}    

.qdesc{
    text-align: center;
}
.qname{
    text-align: center;
}

@media (min-width: 1050px) {
  #cqurans { grid-template-columns: repeat(3, 1fr);}
}

@media (min-width: 768px) and (max-width: 1049px) {
  #cqurans { grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 600px) and (max-width: 767px) {
  #cqurans { grid-template-columns: repeat(4, 1fr);}
}

@media (min-width: 500px) and (max-width: 599px) {
  #cqurans { grid-template-columns: repeat(3, 1fr);}
}

@media (min-width: 400px) and (max-width: 499px) {
  #cqurans { grid-template-columns: repeat(2, 1fr);}
}
  
@media (max-width: 399px) {
  #cqurans { grid-template-columns: repeat(1, 1fr);}
}


#dqpadding{
    padding-left: 75px;
}

.qdwrapperbg{
    
    background-color: #6666ff;
    padding: 20px;
    margin-bottom: 20px;
    background-image: url(/assets/images/diffs/bg.png);
    background-size: cover;    
}

.qdwrapper div{
    color: #fff;
}

.qdwrapper div ll{
    color: #1DD355 !important;
}

.qdwrapper div rr{
    color: #FFC000 !important;
}


.qd01{
    font-size: 20px;
    text-align: center;
    font-family: 'Pragati Narrow';
}

.qd02, .qd03{
    font-size: 23px;
}

.qd02, .qd05{
    color: #1DD355 !important;
}
.qd03, .qd07{
    color: #FFC000 !important;
}

/* --- With help from  --*/
/* --- https://cssgrid-generator.netlify.app/ --*/

.qdwrapper{
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    align-items: center;

}

.qd01 { grid-area: 1 / 1 / 2 / 5; }
.qd02 { grid-area: 2 / 1 / 3 / 3; }
.qd03 { grid-area: 2 / 3 / 3 / 5; }
.qd04 { grid-area: 3 / 1 / 4 / 2; }
.qd05 { grid-area: 3 / 2 / 4 / 3; }
.qd06 { grid-area: 3 / 3 / 4 / 4; }
.qd07 { grid-area: 3 / 4 / 4 / 5; }
.qd08 { grid-area: 4 / 1 / 5 / 3; }
.qd09 { grid-area: 4 / 3 / 5 / 5; }
.qd10 { grid-area: 5 / 1 / 6 / 3; }
.qd11 { grid-area: 5 / 3 / 6 / 5; }
.qd12 { grid-area: 6 / 1 / 7 / 5; }

@media (min-width:767px) {
    .promisestiles{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 0px;
        padding-bottom: 20px;
    }
    
    .promisestiles a{
        aspect-ratio: 1 / 1;
    }
    
    
}
@media (max-width:766px) {
    .promisestiles{
        
        
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        padding-bottom: 21px;        
        
        
    }
    .promisestiles a:last-of-type {
              grid-area: 2 / 3 / span 1 / span 2;
              aspect-ratio: 2;
    }
    
    
}

@media (min-width:920px) {
    
   .promisessectionbg{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        line-height: 1;
    }    
}
@media (max-width:919px) {
    
    .promisessectionbg{
        display: grid;
        grid-template-rows: auto;
        grid-row-gap: 20px;
        line-height: 1;
    }    
    
}


/*
        FAQ Card grid
 */

@media (min-width: 1050px) {
    .fsscardgrid{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1049px) {

    .fsscardgrid{
        grid-template-columns: auto auto;
    }

}






