@charset "utf-8";


@media screen and (min-width: 1901px){
  #sec-protection .sec-img{
    max-width: none;
  }
}


@media screen and (max-width: 1280px) {
  .pagination{
    flex-wrap: wrap;
    row-gap: 2.3em;
  }
  .page-filter-wrap{
    position: relative;
    top: auto;
    right: auto;
    min-height: 60px;
  }
  .pageNav{
    flex: 0 1 100%;
  }
  #footerBanner{
    padding: 4em 7em 4em 3.75em;
  }
  #footerMain {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 2em;
  }
  #footerLeft{
    flex: 0 1 100%;
  }
  #footerRight {
    flex: 0 1 100%;
    justify-content: flex-start;
  }
  #logoWrap a{
    width: 350px !important;
  }
  #mainNav>ul{
    gap: 1em;
  }
}


/* Large devices (Desktops, 995px and up) */
@media screen and (min-width: 992px) {
  html{ overflow: auto!important; overflow-x: hidden!important;}
  #mobileBgLayer, #mobileNavWrap, .showMMenu #mobileNavWrap{
    display: none;
  }  
  .tab-container .tab-menu .tabCtrls .tab-item.mobileSelected {
    display: none;
  }

  .tab-container .tab-menu .tabCtrls .tab-item:not(.mobileSelected) {
    display: block!important;
  }

  .tab-container .tab-menu .tabCtrls .tab-item a {
    text-decoration: none;
    font-size: 1.1em;
    color: #000;
  }

  .tab-container .tab-menu .tabCtrls .tab-item.selected a,
  .tab-container .tab-menu .tabCtrls .tab-item.selected a.focus,
  .tab-container .tab-menu .tabCtrls .tab-item:not(.mobileSelected) a:hover {
    color: var(--primary-blue);
  }

/*   .tab-container .tab-menu .tabCtrls .tab-item a:after {
    content: "";
    position: absolute;
    bottom: 14%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid var(--primary-yellow);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    z-index: 50;
    transform: translateX(-50%);
    opacity: 0;
    transition: transform 0.3s ease 0s, opacity .3s;
  }

  .tab-container .tab-menu .tabCtrls .tab-item a:hover:after,
  .tab-container .tab-menu .tabCtrls .tab-item.selected a:after {
    opacity: 1;
  } 

  .tab-container .tab-menu .tabCtrls .tab-item a:hover:after{
    animation: moveDown .8s ease infinite;
  }*/

}

/* Medium devices (Tablets, less than 992px) */
@media screen and (max-width: 991.98px) {
  #siteTools>ul>li, #mainNavWrap{display: none;}
  #siteTools>ul>li#toolSearch{display: block;}
  #siteTools>ul>li>a>span{
    transform: scale(1.25);
  }
  #siteTools>ul>li>a.header-popup-button>span:after{text-align: center;}
  /* .display-m, #mainNavWrap, #siteTools>ul>li#toolLangs, #siteTools>ul>li#toolLangs>a{ display:block;} */
  .display-m/* , #siteTools>ul>li#toolLangs, #siteTools>ul>li#toolLangs>a */{ display:block;}
  #mmenuCtrl {
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: 1.4em;
  }
  /* #siteTools>ul>li#toolLangs>a{
    background-color: var(--primary-blue);
  }
  #siteTools>ul>li#toolLangs nav{
    position: absolute;
    right: 0;
    top: 150%;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 15px;
    background-color: var(--white);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
  } */
  #siteTools>ul>li#toolLangs.active nav{
    pointer-events: visible;
    opacity: 1;
    transform: translateY(0px);
  }
  #headerZone .grid-content{
    padding: 0;
    column-gap: 10px;
    row-gap: 0;
    min-height: 68px;
  }
  #logoWrap{
    grid-row: 1 / 2;
  }
  #logoWrap a {
    width: auto !important;
    height: 44px;
  }
  #headerTop{
    padding: 0 0 0 1.111em;
  }
  #mainNav, #leftNavWrap, #toolShare{
    display: none;
  }

  #toolLangs.active .subnav,
  #toolShare.active .subnav {
    transform: translate(-50%, -10px);
  }
  #toolSearch.active .searchForm {
    opacity: 1;
    transform: translateY(0px);
  }
  #mainContent {
    width: 100%;
    padding-top: 0;
  }  
  
  #secTitle{
    padding: 0.4em;
  }

  .tab-container{
    margin-bottom: 2em;
  }

  .tab-container .tab-menu .tabCtrls {
    flex-wrap: wrap;
  }

  .tab-container .tab-menu .tabCtrls .tab-item {
    width: 100%;
    flex: 1 1 100%;
    min-height: 80px;
    place-content: center;
  }

  .tab-container .tab-menu .tabCtrls .tab-item:not(.mobileSelected) {
    min-height: 0;
    display: none;
  }

  .tab-container .tab-menu .tabCtrls .tab-item:not(.mobileSelected) a {
    padding-top: 19px;
    padding-bottom: 18px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-top: none;
    background-color: var(--white);
    font-size: 1.3em;
    justify-content: flex-start;
    height: auto;
    text-align: left;
  }

  .tab-container .tab-menu .tabCtrls .tab-item.mobileSelected a:before {
    background-color: #f4d628;
  }

  .tab-container .tab-menu .tabCtrls .tab-item.mobileSelected + li > a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .tab-container .tab-menu .tabCtrls .mobileSelected  + .tab-item > a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: 3px;
  }

  .tab-container .tab-menu .tabCtrls .tab-item:last-child > a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .tab-container .tab-menu .tabCtrls .tab-item:not(:last-child):before{
	  display: none;
  }

  .accordion-item{
    border-radius: 20px;
  }

  .accordion-item .accordion-title{
    font-size: 1.1em;
  }

  .photosWrap .photoItem {
    width: calc((99.99% - 60px)/3);
  } 

  /*transform table*/
  #content table.transform-table thead th, #content table.transform-table tbody th{
		display: none;
	}
	#content table.transform-table tr td{
		display: block;
		width: 100%;
		text-align: left;
		padding-top: 5px;
    padding-bottom: 2px;
		position: relative;
	}
  #content table.transform-table tr td[data-label]:before{
		content: attr(data-label)' :';
		display: inline-block;
		padding-right: 10px;
	}
  #content table.transform-table tr td:first-child{
		padding-top: 10px;
	}
	#content table.transform-table tr td:last-child{
		padding-bottom: 10px;
	}
  #breadcrumb a{
    display: none;
  }
  #breadcrumb h1{
    font-size: 2.2em;
  }
  .filter-wrap{
    font-size: 1.1em;
    gap: 20px;
    margin-top: 1em;
  }
  .select-items{
    max-height: 282px;
  }
  #content .news-tbl .tbl-row{
    font-size: 1.1em;
    grid-template-columns: 160px auto;
  }
  #content .news-tbl .tbl-row .tbl-col{
    padding: 1em 0.9em;
  }
  #content .news-tbl{
    margin-bottom: 2em;
  }
  .pagination{
    font-size: 1.1em;
    row-gap: 1.5em;
  }
  .pageNav a, .page-filter-wrap .btn-filter{
    height: 50px;
  }
  .page-filter-wrap{
    min-height: 50px;
    grid-template-columns: 85px 100px;
  }
  .page-filter-wrap .btn-filter{
    width: 50px;
  }
  .page-filter-wrap input#pageGoInput{
    padding: 10px 60px 10px 10px;
  }
  .select-selected:after{
    top: 20px;
  }
  .select-selected.select-arrow-active:after{
    top: 25px;
  }
  #content .btn-wrap.display-m{
    display: grid;
    justify-content: center;
    gap: 1em;
  }
  .blk-img + .btn-wrap.display-m{
    margin-top: 1em;
  }
  .btn-wrap.display-m a{
    background-color: var(--primary-blue);
    color: var(--white);
    border-radius: 25px;
    padding: 0.75em 2.5em 0.75em 1.5em;
    text-decoration: none;
    font-size: 1em;
  }
  #content h2{
    font-size: 1.8em;
  }
  #content h3{
    font-size: 1.4em;
  }
  .accordion-item + h2 {
    margin-top: 1.25em;
  }
  .accordion-item + h3 {
    margin-top: 1em;
  }
  #bannerWrap .grid-container{
    min-height: 270px;
  }
  .tab-container {
    min-height: 83px;
  }
  #content .two-col-wrap-w-gallery{
    gap: 1.5em;
    grid-template-columns: 1fr;
  }
  #content .three-col-wrap.gallery,
  #content .three-col-wrap.video{
    gap: 1.5em;
  }
  #content .three-col-wrap.video{
    grid-template-columns: repeat(2, 1fr);
  }
  #content .two-col-wrap-w-gallery .gallery{
    position: relative;
    top: auto;
    overflow: hidden;
  }
  #content .two-col-wrap-w-gallery .gallery div{
    max-height: none;
    gap: 1em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  #content .two-col-wrap-w-gallery .gallery div a{
    aspect-ratio: 16/9;
    margin-bottom: 0;
  }
  #content .two-col-wrap-w-gallery .gallery div a img{
    height: 100%;
    object-fit: cover;
  }
  #content .two-col-wrap-w-gallery .gallery:before, #content .two-col-wrap-w-gallery .gallery:after, #content .two-col-wrap-w-gallery .gallery > div:before, #content .two-col-wrap-w-gallery .gallery > div:after{
    display: none;
  }
  .lg-sub-html{
    padding: 10px 1em !important;
  }
  .lg-sub-html p{
    font-size: 1rem !important;
  }
  .searchForm#adsearchResultForm .form-row{
    gap: 1.5rem 2rem;
  }
  
  .searchForm .form-row{
    grid-template-columns: 1fr;
    row-gap: 1em;
  }
  .searchForm:not(#adsearchResultForm) .form-row .form-col:last-child{
    justify-self: flex-end;
  }
}

/*Between Tablets and Mobile */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
}

@media screen and (min-width: 768px) {
  footer .swiper-pagination{
    display: none;
  }

  .accordion-wrap.org-chart{
    display: none;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {
  /****** common starts******/
  body {
    font-size: 16px;
  }
  #content h2 {
    font-size: 1.625em;
  }

  #content h3 {
    font-size: 1.25em;
    margin-bottom: .5em;
  }
  /****** common ends******/
  /****** home starts******/
  /****** home ends******/
  /****** content starts******/
  .f-left-img,
  .f-right-img {
    float: none;
    margin: 0 auto 15px;
    max-width: 360px;
  }
  .swiper-wrap .swiper-arrow span {
    width: 14px;
    height: 14px;
  }
  #content>.btn-wrap{
    gap: 10px;
  }
  #content .common-btn{
    line-height: 1.5em;
  }
  #content .common-link{
    line-height: 1.5em;
    padding: 11px 25px;
  }
  .swiper-wrap .slider-ctrls{
    max-width: 160px;
    padding: 0 30px;
  }
  .swiper-wrap .slider-ctrls .swiper-arrow{
    width: 30px;
    height: 40px;
  }
  #content .flexbox.imgCols .item .caption{
    padding: 10px 20px 5px;
  }
  .pageNav .arrow:before, .pageNav .arrow:before{
    width: 14px;
    height: 14px;
  }
  .pagination {
    font-size: 1.25em;
  }
  .pageNav a{
    width: 30px;
  }
  .pageNav a:not(.arrow).selected span {
    font-size: 1.2em;
  }
  .hidden-m,
  .pageNav a.hidden-m{
    display: none;
  }
  .pageNav .arrow:before, .pageNav .arrow:before, .pageNav .first:after, .pageNav .last:after{
    width: 10px;
    height: 10px;
  }
  .pageNav .next_page:before, .pageNav .last:before, .pageNav .last:after{
    border-right-width: 2px;
    border-top-width: 2px;
  }
  .pageNav .first:before, .pageNav .first:after{
    border-right-width: 2px;
    border-bottom-width: 2px;
  }
  .pageNav .first:before {
    margin-left: -7px;
  }
  .pageNav .last:after {
    margin-left: -11px;
  }
  #content .input-wrap input[type="text"]{
	  padding: 14px 15px;
  }
  #content .input-wrap.finish input[type="text"],
	#content .input-wrap.focus input[type="text"]  {
    padding: 24px 15px 4px;
	}
	#content .input-wrap input[type="text"]+label{
		left: 15px;
	}
	#content #form-wrap .flexbox {
		margin-bottom: 20px;
	}
  #content{
    padding-bottom: 6em;
  }
	
  /****** content ends******/

  .swiper-button-next, .swiper-button-prev, .control-btn{
    width: 35px !important;
    height: 35px !important;
  }
  .swiper-button-next:before, .swiper-button-prev:before{
    width: 10px;
    height: 10px;
  }
  #footerBanner .control-btn.stop:before, .control-btn.stop:before, .control-btn.stop:after{
    width: 3px;
    height: 14px;
  }
  .control-btn.play:before{
    border-width: 8px;
    border-right-width: 0;
  }
  .swiper-pagination .swiper-pagination-bullet{
    height: 35px;
    width: 25px;
  }
  .swiper-pagination .swiper-pagination-bullet:before{
    width: 10px;
    height: 10px;
  }
  #breadcrumb{
    font-size: 1em;
  }
  #mainContent > .grid-container > .grid-content{
    padding-top: 2em;
  }
  .tab-container {
    margin-bottom: 1.5em;
    min-height: 53px;
  }
  .tab-container .tab-menu .tabCtrls .tab-item{
    min-height: 50px;    
  }
  .tab-container .tab-menu .tabCtrls .tab-item.mobileSelected a{
    text-align: left;
	font-size: 1.3em;
  }
  .tab-container .tab-menu .tabCtrls .tab-item:not(.mobileSelected) a{
    padding-top: 12px;
    padding-bottom: 11px;
	font-size: 1.3em;
  }
  .filter-wrap{
    font-size: 1.25em;
    margin-bottom: 1.125em;
    gap: 15px;
  }
  #content .news-tbl .tbl-row{
    font-size: 1.25em;
    grid-template-columns: 130px auto;
  }
  #content .news-tbl .tbl-row .tbl-col.date{
    padding-right: 0;
  }
  .select-selected:after{
    top: 18px;
  }
  .select-selected.select-arrow-active:after{
    top: 23px;
  }
  .page-filter-wrap{
    grid-template-columns: 65px 100px;
  }
  #mmenuCtrl-close{
    width: 24px;
    height: 24px;
  }
  #mainNav_m>ul>li>a{
    font-size: 1.25em;
  }
  #mainNav_m .hasSubnav>button{
    width: 30px;
    height: 30px;
  }
  #mainNav_m>ul>li.hasSubnav>button:before,
  #mainNav_m>ul>li.hasSubnav>button:after{
    width: 14px;
  }
  #mainNav_m li.hasSubnav li.hasSubnav>button:before{
    width: 12px;
    height: 12px;
  }
  #mainNav_m>ul>li>a,
  #mainNav_m>ul>li>.subnav>ul>li>a{
    padding-right: 50px;    
  }
  #mobileMenu .shareWrap{
    grid-template-columns: repeat(auto-fill, minmax(34px, 34px));
  }
  #mobileMenu .shareWrap a span{
    width: 24px;
    height: 24px;
  }
  #mainNav_m>ul>li>.subnav>ul>li>a:before{
    top: 1.1em;
  }
  .accordion-item {
      border-radius: 15px;
  }
  .accordion-item .accordion-title{
    padding: 1em 2.5em 1em 1em;
    column-gap: 10px;
  }
  .accordion-item .accordion-title:not(.btnOnly):before{
    width: 14px;
    height: 14px;
  }
  .accordion-item .accordion-content .accordion-main{
    padding: 0 1em;
  }
  .accordion-item.active .accordion-content .accordion-main {
    padding: 0 1em 1.25em;
  }
  .org-chart .accordion-item{
	  margin-bottom: 1px;
  }
  .org-chart .accordion-item .accordion-title{
	  text-align: center;
	  justify-content: center;	
	  padding-right: 1em;
  }
  .org-chart .accordion-item .accordion-title span span{
	  display: block;
	  font-weight: 300;
	  margin-top: 5px;
  }
  .org-chart .accordion-item .accordion-title.no-event{
	  pointer-events: none;
  }
  .org-chart > .accordion-item > .accordion-title.no-event{
	  background-color: var(--secondary-dark);
	  color: var(--white);
  }
  .org-chart .accordion-item .accordion-title.no-event:before{
	display: none;
  }
   .org-chart > .accordion-item > .accordion-title.no-event{
	  background-color: #1E7DD9;
	  color: var(--white);
  }
  .org-chart .accordion-item .accordion-title:not(.no-event){
	  padding-bottom: 2em;
	  background-color: #A8F4EA;
	  color: #173B5B;
  }
	.org-chart .accordion-item .accordion-title:not(.btnOnly):before{
		right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
    top: auto;
    bottom: 1em;
    border-color: #173B5B;
	}	
  .org-chart .accordion-item .accordion-content{
    background-color: #96DBF8;
    color: #173B5B;
  }
  .org-chart > .accordion-item.active > .accordion-content{
    border-top: 1px solid #fff;
  }
   .org-chart > .accordion-item .accordion-item{
	   border-radius: 0;
	   border: 0;
	   box-shadow: none;
   }
   .org-chart > .accordion-item .accordion-item .accordion-title{
	   background-color: transparent;
	   color: var(--black);
   }
   .org-chart > .accordion-item .accordion-item .accordion-title span{
      padding-left: 15px;
      position: relative;
   }
    .org-chart > .accordion-item .accordion-item .accordion-title span:before{
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--black);
        position: absolute;
        left: 0;
        top: .45em;
    }
   .org-chart .accordion-item .accordion-content .accordion-main{
	   padding: 0;
   }
  #content ul>li::before{
    width: 7px;
    height: 7px;
    top: .45em;
  }
  #content ul>li>ul>li::before{
    top: .45em;
  }
  #content ul>li>ul>li>ul>li::before{
    height: 2px;
    top: .6em;
  }
  .accordCtrls>a:before{
    width: 24px;
    height: 24px;
  }
  #footerBanner{
    text-align: center;
    padding: 3.125em 0;
  }
  #footerBanner .swiper-button-prev, #footerBanner .swiper-button-next, .swiper-pagination, #footerBanner .control-btn{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  #footerBanner .swiper-pagination{
    width: auto !important;
  }
  .swiper-pagination{
    margin: 0 20px;
  }
  #footerBanner .control-btn{
    margin-left: 10px;
  }
  #footerBanner .swiper{
    margin-bottom: 30px;
  }
  .select-items {
    max-height: 250px;
  }
  #content .three-col-wrap{
    grid-template-columns: 1fr;
    gap: .5em;
    margin-bottom: 3em;
  }
  #mmenuCtrl{
    width: 34px;
    margin-left: 1.142em;
  }
  #mmenuCtrl a>span, #mmenuCtrl a>span:before, #mmenuCtrl a>span:after{
    width: 28px;
  }
  .grid-container{
    grid-template-columns: minmax(1.25em, auto) minmax(84%, 1600px) minmax(1.25em, auto);
  }
  #bannerWrap .grid-container{
    min-height: 220px;
  }
  #bannerWrap{
    background-image: url("../images/sec-banner-bg-m.jpg");
  }
  .footerLogo{
    flex: 0 1 100% !important;
  }
  .footerLogo a img {
    flex: 0 1 75px;
    max-width: 75px;
  }
  #footerMain > div:nth-child(3) a img{
    max-width: 75px;
  }
  #mobileMenu-top{
    grid-template-columns: 62px auto repeat(3, 24px);
  }
  #mmenuCtrl-share span, #mmenuCtrl-search span{
	  width: 22px;
    height: 22px;
  }
  #mobileMenu-top nav a:not(:last-child):before{
    right: -10px;
  }
  #content .two-col-wrap-w-gallery{
    gap: 1.5em;
  }

  #sec-mainVisual{
    aspect-ratio: 750/1200;
  }
  
  #content .three-col-wrap.gallery{
    gap: 1.5em;
    grid-template-columns: 1fr 1fr;
  }
  #content .three-col-wrap.video{
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  #content .three-col-wrap.video a:after{
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 10px;
  }
  #content .two-col-wrap-w-gallery .gallery div{
    grid-template-columns: repeat(2, 1fr);
  }
  .accordion-wrap.org-chart{
    display: block;
  }
  #result-list .resultItem div.itemTitle{
    font-size: 1.1em;
  }
  #search-result-pagination a{
    min-width: 35px;
    height: 35px;
    padding: 5px;
  }
  #search-result-pagination a[aria-label="Previous"],
  #search-result-pagination a[aria-label="Next"]{
    font-size: 0;
    padding: 5px !important;
  }
  #search-result-pagination a[aria-label="Previous"]:before,
  #search-result-pagination a[aria-label="Next"]:before{
    width: 10px;
    height: 10px;
  }
  #search-result-pagination a[aria-label="Previous"]:before{
    left: 15px;
  }
  #search-result-pagination a[aria-label="Next"]:before{
    right: 15px;
  }
  .searchForm#adsearchResultForm .form-row{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .searchForm#adsearchResultForm .form-row .form-col{
    justify-self: auto;
  }
}

@media screen and (max-width: 575.98px) {
  #content .f-left-img, #content .f-right-img{
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
  }
}

@media screen and (max-width: 500px) {
	#toolSearch .searchForm{
		position: fixed;
		top: 68px;
		width: 100%;
	}
	#toolSearch .subnav:before {
		right: 143px;
	}
  .filter-wrap{
    grid-template-columns: 1fr 1fr;
  }
  .filter-wrap .btn-filter{
    height: 50px;
    grid-column: 1 / 3;
  }
  #content .news-tbl .tbl-row{
    grid-template-columns: 1fr;
  }
  #content .news-tbl .tbl-row .tbl-col.date{
    padding: 1em 0.9em 0;
  }
  #content .news-tbl .tbl-row .tbl-col.title{
    padding: 0.5em 0.9em 1em;
  }
  #content .two-col-wrap-w-gallery .gallery div{
    grid-template-columns: 1fr;
  }
  .searchForm .form-row .form-col:first-child{
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .searchForm .form-row .form-col:first-child label{
    flex: 0 1 100%;
  }
  .searchForm input{
    max-width: none;
  }
}


@media screen and (max-width: 359.98px) {
}


/** container query **/
@container content (600px < width  <= 700px) {
	#content .card-container,
	#content .flexbox.col-3{
		grid-template-columns: repeat(2, 1fr);
	}
	#content .card-container .card{
		display: grid;
		grid-template-columns: minmax(40%, 120px) auto;
	}
	#content .card-container .card .card-thumb{
		height: 100%;
		aspect-ratio: auto;
	}
	
}

@container content (400px < width  <= 600px) {
	#content .card-container,
	#content .flexbox.col-3{
		grid-template-columns: 100%;
	}
	#content .card-container .card{
		display: grid;
		grid-template-columns: minmax(120px, 160px) auto;
		border-radius: 10px;
	}
	#content .card-container .card .card-thumb{
		height: 100%;
		aspect-ratio: auto;
	}
	#content .flexbox.col-2{
	  grid-template-columns: 100%;
	}
}
@container content (width  <= 400px) {
	#content .card-container,
	#content .flexbox.col-3{
		grid-template-columns: 100%;
	}
	#content .card-container .card{
		border-radius: 10px;
	}
	.accordCtrls{
		flex-wrap: wrap;
		row-gap: 6px;
	}	
	#content .flexbox.col-2{
	  grid-template-columns: 100%;
	}
}
/** container query **/