.uk-text-tiny  { font-size: 0.75em; line-height: 1.35 }
h1, h2, h3, .sh1, .sh2, .sh3 { 
       font-weight: 600 
}
.t600 { font-weight: 600 !important  }
.t700 { font-weight: 700 !important  }


@media (max-width: 399px) {

       #logo img { width: 9rem;  }
       .resources .arow { margin: 1.15% ; width: 21%; padding: 2.5% 0 0 0; height: 6%; }
       .resources .arow p  { padding-top: 5%; line-height: 1.05rem }
       .resources .arow div img  { width: 30%; height: auto}
       .resources .arow p b { font-size: 0.825rem !important; line-height: 0.5 !important }

}

@media (max-width: 599px) {

        p, dd, li, td, div, .jassmenu a, .uk-navbar-nav>li>a, .uk-navbar-toggle {
          font-size: 1rem; line-height: 1.5
        }
        #logo img { width: 110px !important; }
        #logo     { padding-top: 0.15rem; padding-bottom: 0.15rem; }  

       .resources .arow { margin: 1.15% ; width: 21%; padding: 2.5% 0 0 0; height: 6%; }
       .resources .arow p  { padding-top: 12%; line-height: 1.05rem }
       .resources .arow div img  { width: 38%; height: auto}
       .resources .arow p b { font-size: 0.77rem !important; line-height: 0.35 !important; font-weight: 500 }

} 

@media (min-width: 600px) {

        #logo img { width: 125px ; }
        #logo     { padding-top: 0.6rem; padding-bottom: 0.6rem; margin-left: 10px }  /** Only need this one, and it works for all above **/

       .resources .arow { margin: 1.25%; width: 15%; padding: 14px 3px 0px  3px; }
       .resources .arow p  { padding-top: 9%; line-height: 1.1rem; font-weight: 500 }
       .resources .arow div img  { width: 37%; height: 37px }
       .resources .arow p b { font-size: 0.85rem; line-height: 1.1; font-weight: 500  }

} 


@media (min-width: 740px) {

       .resources .arow { margin: 1%; width: 15.5%; height: 3% }
       .resources .arow p  { padding: 5% 7% 0 7%; line-height: 1.1rem }
       .resources .arow div img  { width: 25%; height: auto}
       .resources .arow p b { font-size: 0.925rem; font-weight: 500  }

}

/* Tablet landscape */
@media (min-width: 960px) {

        #logo img { width: 125px; }
        #logo     { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-left: 10px }  /** Only need this one, and it works for all above **/

       .resources .arow { margin: 1%; width: 15.5%; height: 6% }
       .resources .arow p  { padding: 6% 7% 0 7%; line-height: 1.1rem line-height: 1.1rem }
       .resources .arow div img  { width: 28%; height: auto}
       .resources .arow p b { font-size: 0.96rem }


} /* End of tablet landscap and bigger */


@media (min-width: 1010px) {

      .resources .arow { margin: 0.7%; width: 8%; padding: 17px 0px 3px  3px; }
      .resources .arow p  { padding: 10% 3% 0 3%; line-height: 1.15rem }
      .resources .arow div img  { width: 45%; height: auto }
      .resources .arow p b { font-size: 0.9rem }

}

@media (min-width: 1200px) {

        #logo img { width: 135px !important; }
        #logo     { padding-top: 15px; padding-bottom: 15px; margin-left: 10px }  /** Only need this one, and it works for all above **/

        .resources .arow { margin: 0.6%; width: 8%; height: 6% }
        .resources .arow p  { padding: 15% 2% 0 2%; line-height: 1.125rem }
        .resources .arow div img  { width: 38%; height: 38% }
        .resources .arow p b { font-size: 0.88rem; line-height: 1.1 }

} 


@media (min-width: 1599px) {

       #logo img { width: 225px; margin-top: 5px}
       #logo     { padding-top: 1rem !important; padding-bottom: 1rem; margin-left: 20px }

       .resources .arow { margin: 0.6%; width: 7.25%; }
       .resources .arow p  { padding-top: 6%; }
       .resources .arow div img  { width: 45%; height: auto }
       .resources .arow p b { font-size: 0.9rem; line-height: 1.1 }


}