/*
 * Icons
 */

@font-face {
  font-family: 'fx-resources';
  src:  url('../icons/fx-resources.eot?cowhrr');
  src:  url('../icons/fx-resources.eot?cowhrr#iefix') format('embedded-opentype'),
    url('../icons/fx-resources.ttf?cowhrr') format('truetype'),
    url('../icons/fx-resources.woff?cowhrr') format('woff'),
    url('../icons/fx-resources.svg?cowhrr#fx-resources') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fx-resources' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.resource-listing__item-icon.icon-video:before { content: "\e900"; }

.resource-listing__item-icon.icon-doc:before { content: "\e901"; }

.resource-listing__item-icon.icon-image:before { content: "\e902"; }

.resource-listing__item-icon.icon-pdf:before { content: "\e903"; }




/*
 * Filters
 */

.resource-filters {
    background-color: #efefef;
    padding: 30px;
    margin-bottom: 30px;
}

.resource-filter__item {
    margin-top: 20px;
}

.resource-filter__item:first-child { margin-top: 0; }

.resource-filter__item input,
.resource-filter__item select,
.resource-filter__item .choices {
    flex-grow: 1;
}

@media (min-width: 1025px) {
    
    .resource-filters form,
    .resource-filter__item {
        display: flex;
        align-items: center;
    }
    
    .resource-filters form {
        flex-wrap: wrap;
    }
    
    .resource-filter__item {
        float: left;
        margin-left: 2%;
        margin-top: 0;
        width: 32%;
    }
    
    .resource-filter__item:first-child {
        margin-left: 0;
    }
    
    .resource-filter__item label {
        margin-right: 5px;
    }
    
}
 


/*
 * Results
 */

.resource-listing {
    list-style: none;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}
 
.resource-listing__item {
    border-top: 1px solid #ddd;
    width: 100%;
}

.resource-listing__item:first-child {
    border-top: 0;
}
 
.resource-listing__item:nth-child(4n+4) {
    margin-right: 0;
}

.resource-listing__item-link {
    display: flex;
    align-items: center;
    padding: 20px;
    width: 100%;
    text-decoration: none;
    position: relative;
}

.resource-listing__item--featured .resource-listing__item-link {
    padding: 30px;
}

.resource-listing__item--no-result {
    padding: 20px;
    width: 100%;
    text-align: center;
}

.resource-listing__item--featured,
.resource-listing__item--featured:first-child {
    border: 1px solid #ddd;
    margin-bottom: 30px;
}

.resource-listing__featured-label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 5px;
    background-color: #ddd;
    font-size: .7em;
}

.resource-listing__item-icon {
    color: #bbb;
    font-size: 20px;
    margin-right: 20px;
}

.resource-listing__item-thumb {
    max-width: 70px;
    height: auto;
    display: block;
    margin-right: 20px;
}

.resource-listing__item--featured .resource-listing__item-thumb {
    max-width: 100px;
}
 
.resource-info h4 {
    margin-bottom: 10px;
    color: #fff;
}
 
.resource-info p {
    margin-bottom: 0;
    color: #fff;
    font-size: 13px;
}
 
.resource-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    transition: all .3s;
}
 
.resource-info * {
    width: 100%;
    display: block;
}


.span.page-numbers.current {
    color: unset;
}


.resources-popup  {
    background-color: #fff;
    padding: 30px;
    margin: 20px auto;
    position: relative;
    width: auto;
    text-align: center;
    max-width: 800px;
}

.resources-popup h2 {
margin-top: 0;
}