.resource-header{padding: 40px 20px; display: flex; align-items: stretch;}
.resource-header .button-wrap{display: flex; align-items: center;}
.resource-header .filter-trigger{cursor: pointer;}
.resource-header .filter-trigger:not(.link){margin: 0px; margin-right: 20px; border-radius: 50px;}
.resource-header .filter-details-area{display: flex;align-items: center;border-left: 1px solid #bbbbbb;padding-left: 20px;height: auto; width: 100%;}
.resource-header .filter-details{margin-left: 7px; }

.resource-filter{position: absolute;top: 0px;left: 0px;height: calc(100% - 275px);margin-top: 275px;z-index: 10; width: 0%; transition: width .8s; overflow: hidden;}
.resource-filter.active{width: 100%;}
.resource-filter *{color: white;}
.resource-filter:before{content:''; display: inline-block; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: black; transition: opacity .8s; opacity: 0; z-index: -1;}
.resource-filter.active:before{opacity: .7;}
.resource-filter .filter-form{background: #353535; width: 475px; height: 100%; overflow-y: auto;}
.resource-filter .filter-form > .title-area{background: #04a6db;display: flex;justify-content: space-between;align-items: center;padding-left: 20px;}
.resource-filter .filter-form > .title-area .title{display: flex;align-items: center; font-size: 20pt;}
.resource-filter .filter-form > .title-area .image-wrap:not(.close){height: 22px;position: relative;margin-right: 10px;width: 45px;}
.resource-filter .filter-form > .title-area .image-wrap:not(.close) img{position: absolute; top: 0px; left: 0px;}
.resource-filter .filter-form > .title-area .image-wrap.close{cursor: pointer; background-color: #4dc3e9; height: 80px; width: 80px; display: flex; align-items: center; justify-content: center;}
.resource-filter .filter-form > .title-area .image-wrap.close img{width: 25px; height: 25px;}
.resource-filter .filter-type{padding: 10px 20px; position: relative;}
.resource-filter .filter-type:after{content:''; width: 90%; left: 5%; position: absolute; bottom: 0px; background: #7a7a7a; height: 1px;}
.resource-filter .filter-type .accordion li:last-of-type{margin-bottom: 10px;}

.resource-list{text-align: center; min-height: 700px; display: flex; justify-content: center;}
.resource-list:before{content: ''; position: absolute; margin-top: 100px;display: inline-block; width: 50px; height: 50px; background-image: url('/wp-content/themes/StratixCustom/images/loadIcon.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-animation:spin 4s linear infinite;-moz-animation:spin 4s linear infinite;animation:spin 4s linear infinite;}
.resource-list.active:before{display: none;}

/*.resource-list.featured-posts{min-height: 900px;}*/
.resource-list.featured-posts{flex-wrap: wrap;}
.resource-list.featured-posts.active{justify-content: flex-start; padding: 0px 20px; flex-wrap: wrap; align-items: stretch; position: relative; }
.resource-list.featured-posts.active .post{opacity: 1; max-width: calc(100% * (1/3) - 20px);}
.resource-list.featured-posts .post{margin-right: 30px; margin-bottom: 30px; width: calc(100% * (1/3) - 20px); opacity: 0; transition: opacity .2;}
.resource-list.featured-posts .post:nth-of-type(3n){margin-right: 0px;}
.resource-list.featured-posts .post:nth-child(n){background: #ededed; text-align: left;}

.resource-filter .filter-accordion-trigger{padding: 20px 0px; font-weight: 900; font-size: 20pt; padding-top: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;}
.resource-filter .filter-accordion-trigger:after{content: '+'; display: inline-block;width: 30px; height: 20px; font-size: 40px; text-align: center; position: relative; bottom: 15px;}
.resource-filter .filter-accordion-trigger.active:after{bottom: 33px; content: '_';}
.resource-filter .filter-accordion-trigger p{margin: 0px; font-size: 30px; font-weight: 900;}

.filter-checks .check, .filter-radios .radio{cursor: pointer; display: flex; align-items: center; margin-bottom: 5px; font-size: 20pt; font-weight: 100;}
.filter-checks .check p, .filter-radios .radio p{margin: 0px;}
.filter-checks .check:before{content: ''; margin-right: 20px; display: inline-block; width: 40px; min-width: 40px; height: 40px; background-image: url('/wp-content/themes/StratixCustom/images/checkboxIcon.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}
.filter-checks .check.active:before{background-image: url('/wp-content/themes/StratixCustom/images/checkboxIconFilled.svg');}
.filter-radios .radio:before{content: ''; margin-right: 20px; display: inline-block; width: 40px; min-width: 40px; height: 40px; background-image: url('/wp-content/themes/StratixCustom/images/radioIcon.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}
.filter-radios .radio.active:before{background-image: url('/wp-content/themes/StratixCustom/images/radioIconFilled.svg');}

.filter-details-area.no-border{border-width: 0px; padding-left: 0px;}
.filter-details .filter-tags{display: flex; flex-wrap: wrap;}
.filter-details .filter-group{display: flex; text-transform: capitalize; font-weight: 700; color: #a4a4a4; margin-right: 20px;}
.filter-details .filter-clear{font-weight: 700; color: #a4a4a4; cursor: pointer;}
.filter-details .filter-applied{margin: 0px 5px;margin-right: 10px; cursor: pointer;}
.filter-details .filter-applied:after{content: ''; background-image: url('/wp-content/themes/StratixCustom/images/tagRemove.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 30px;background-color: #c9c9c9;color: #313131;display: inline-block;padding: 5px;width: 5px;height: 5px;font-size: 9px;line-height: 7px;text-align: center;position: relative;bottom: -2px;margin-left: 10px;}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.page-content form[role="search"]{display: flex;align-items: center;width: 500px;}
.page-content form[role="search"] .close{display: none;}
.page-content form[role="search"].active .search{display: none;}
.page-content form[role="search"].active .close{display: inline-block; }
.page-content .search-input-wrap{position: relative; width: 100%; cursor: pointer;}
.page-content .search-input-wrap input{border: 1px solid #c9c9c9;border-radius: 30px;height: 64px;padding: 10px 25px;width: 100%;font-size: 30px;padding-right: 60px;}
.page-content .search-input-wrap .image-wrap{position: absolute;top: 14px;right: 20px;height: 35px;width: 35px;}
.page-content .search-input-wrap .image-wrap.close{top: 17px;}

@media(max-width: 1920px){
	.filter-checks .check, .filter-radios .radio{font-size: 12pt;}
	.resource-filter .filter-form > .title-area .title{font-size: 12pt;}

	.resource-filter .filter-form > .title-area .image-wrap:not(.close){height: 12px;margin-right: 5px;width: 25px;}
	.resource-filter .filter-accordion-trigger p{font-size: 16pt;}
	.resource-filter .filter-form{width: 275px;}

	.resource-filter .filter-form > .title-area .image-wrap.close{height: 54px; width: 54px; }

	.resource-filter .filter-accordion-trigger:after{width: 20px; height: 20px; font-size: 20px;  bottom: 2px;}
	.resource-filter .filter-accordion-trigger.active:after{bottom: 12px; }

	.filter-checks .check:before{margin-right: 10px; width: 20px; min-width: 20px; height: 20px; }
	.filter-radios .radio:before{margin-right: 10px; width: 20px; min-width: 20px; height: 20px;}

	.resource-filter .filter-accordion-trigger{padding: 10px 0px; padding-top: 5px; font-size: 12pt;}

	.page-content form[role="search"]{width: 300px;}
	.page-content .search-input-wrap input{height: 30px;padding: 5px 10px;font-size: 20px;padding-right: 40px;}
	.page-content .search-input-wrap .image-wrap{top: 3px;right: 8px;height: 23px;width: 23px;}
	.page-content .search-input-wrap .image-wrap.close{top: 4px;}

}

@media(max-width: 1000px){
	.resource-header .filter-details-area{flex-wrap: wrap;}
	.resource-header .filter-details-area > p{width: 100%; margin-left: 0px;}
	.resource-list.featured-posts.active .post{max-width: calc(100% * (1/2) - 15px);}
}

@media(max-width: 640px){
	.resource-list.featured-posts.active .post{max-width: 100%;}
}

@media(max-width: 600px){
	.resource-header{flex-wrap: wrap;}
	.resource-header .button-wrap{margin-bottom: 20px;}
	.resource-header .filter-details-area{padding-left: 0px; border-width: 0px;}
}