/* menu with images */
#maincol .pagemenu-img {display:flex; flex-wrap:wrap; gap:2%; padding:0; margin:15px 0 0 0; list-style-type: none;}
#maincol .pagemenu-img li {width:23.5%; margin-bottom:25px;}
#maincol .pagemenu-img h3 {padding:0 5px; margin-top:6px; font-size: 2rem; line-height:1.2; margin-bottom: 5px; color:#008850;}
#maincol .pagemenu-img h3 a {color:#008850;}
#maincol .pagemenu-img p {}
#maincol .pagemenu-img a {display:block; position: relative; overflow:hidden;}
#maincol .pagemenu-img li > a::before {content:""; background-color:rgba(0,0,0,.4); transition: background 1s; position: absolute; top:0; width:100%; height:100%;}
#maincol .pagemenu-img li > a:hover::before {background-color:rgba(0,0,0,.2);}
#maincol .pagemenu-img img {display:block; width:100%; height:auto; line-height: 0; margin-bottom: 0;}

@media only screen and (max-width:1280px) {
  #maincol .pagemenu-img li {width:32%;}
  .layout-70-30 > .col-3,
  .layout-33-33-33 > .col-3,
  #rightcol {width:100%; padding:0;}
  .layout-70-30 #maincol,
  .layout-70-30 > .col-9,
  .layout-33-33-33 > .col-6 {width:100%; padding:0; margin-bottom: 10px;}
  .col-3 .frame-layout-2, .col-3 .frame-layout-3 {margin-bottom:20px;}
}

@media only screen and (max-width: 991px) {
 #maincol .pagemenu-img h3 {font-size:1.8rem;}
}

@media only screen and (max-width: 800px) {
 #maincol .pagemenu-img li {width: 49%;}
 .tab-nav li {width:50%; text-align: center; margin:0;}
}

@media only screen and (max-width:480px) {
 #maincol .pagemenu-img li {width: 100%;}
 .tab-nav a:hover, .tab-nav a {font-size:1.8rem;}
}

@media only screen and (max-width:360px) {
 .tab-nav a:hover, .tab-nav a {font-size:1.6rem;}
}