
@import 'https://www.flo.com/wp-content/themes/flo/css/components/_cta-panel.css';
@import 'https://www.flo.com/wp-content/themes/flo/css/components/_resource-banner.css';

.resources-page-bg{position: relative; z-index: 2;}
.resources-page-bg:after{width: 100%;height: calc(100% - 190px); top: 190px; left: 0; content: ""; display: block; background-color: rgba(99, 181, 216, 0.1); position: absolute; z-index: -1;}
.resources .icon-btn { color:  #115E67; margin-bottom: 15px;}
.resource-list-item{display: block; background: #fff; border-radius: 8px; overflow: hidden;}
.resource-list-item .fs-img{height: auto;}

.resources .cl-left { width: 238px; }
.resources .cl-right { flex:1; padding:0 0 88px 90px; }
.resources .category-list-inner { padding:80px 0 0; }
.resources .load-more-btn { margin: 7px 0 0; }
.resources .load-more-btn:before { content:""; position: absolute; left:0; width:100%; top:50%; transform: translateY(-50%); height:2px; background: #63B5D8; z-index:-1;}
.resources .load-btn-wrap { display:inline-block; padding:0 8px; background:#eff7fb; }
.resources .load-btn-wrap .btn:hover { border-color: #00a3e3; }

.cat-menu-header { color: #0061A0; font-size: 24px; font-family: 'Lexend'; line-height: 28px; font-weight: 700; margin: 0 0 22px; }
ul.cat-list { margin:0; padding:0; }
ul.cat-list li:before { display:none; }
ul.cat-list li  { font-size: 16px; font-family: 'Lexend'; line-height: 20px; margin: 0 0 14px; padding:0; }
ul.cat-list li a { font-weight: 700; color: #353535; }
ul.cat-list li a span { font-weight: 400; padding:0 0 0 5px; }
ul.cat-list li a:hover, ul.cat-list li.active a { color:  #63B5D8; }
.menu-divider { height:2px; background:#63B5D8; width:100%; margin:38px 0;}
.cat-dropdown { display: none; }
.blog-list-item{display: block; background: #fff; border-radius: 8px; overflow: hidden;}


/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .sticky_header .logo{width: 148px;}
    .fixed_header .logo{width: 118px;}
    .resource-list-main{gap: 31px;flex-wrap: wrap;}
    .resource-list-item{flex-basis: calc(33.3333% - 21px);}

    .blog-list-wrap{gap: 31px; flex-wrap: wrap; margin-bottom: 40px; }
    .blog-list-item{flex-basis: calc(33.3333% - 21px);}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .blog-list-wrap{gap: 30px;}
    .blog-list-item{flex-basis: calc(50% - 30px);}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .resource-list-main{gap: 31px; flex-wrap: wrap;}
    .resource-list-item{flex-basis: calc(50% - 16px);}
    .resource-list-item:last-child{display: none;}

    .blog-list-wrap{gap: 30px; flex-wrap: wrap; width: 100%; margin-bottom: 40px;}
    .blog-list-item{flex-basis: calc(50% - 15px);}

    .resources .category-list-inner {display: block;}
    .cat-dropdown {display:block; }
    ul.cat-list { display: none; }
    .resources .cl-left { display: flex; width:100%; padding:0 0 24px; }
    .resources .cl-left .menu-divider {display: none; }
    .resources .cl-right { padding:0 0 48px; }
    .resources .cl-left .cat-menu { width:280px; padding:0 20px 0 0; }
    .cat-menu-header { font-size:16px; line-height:20px; color:#002942; margin:0 0 10px; }
}

@media only screen and (max-width: 767px) and (min-width: 200px){
    .resources-page-bg:after{height: calc(100% - 95px); top: 95px; }
    .resource-list-main{padding-bottom: 40px; display: block; position: relative;}
    .resource-list-main::after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 2px solid #63B5D8; }
    .resource-list-item:nth-child(n+2){display: none;}

    .resources .category-list-inner {display: block; padding: 40px 0 0;}
    .cat-dropdown {display:block; }
    ul.cat-list { display: none; }
    .resources .cl-left {  display: block; width:100%; padding:0 0 24px; }
    .resources .cl-left .menu-divider {display: none; }
    .resources .cl-right { padding:0 0 48px; }
    .resources .cl-left .cat-menu { width:100%; padding-bottom: 15px;}
    .cat-menu-header { font-size:16px; line-height:20px; color:#002942; margin:0 0 10px; }
    .resources .load-more-btn { margin:0; }

    .blog-list-wrap{display: block;}
    .blog-list-item{margin-bottom: 32px;}
}