.cpe-wrapper{
    width:100%;
}

:root{

    --cpe-blue:#5C88E3;

    --cpe-blue-hover:#2868FF;

    --cpe-border:#E4E7EC;

    --cpe-border-light:#EEF2F6;

    --cpe-text:#2F343C;

    --cpe-text-light:#707784;

    --cpe-bg:#FFFFFF;

    --cpe-bg-light:#F8FAFC;

}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.cpe-header{
    margin-bottom:30px;
}

.cpe-title{

    display:flex;

    align-items:baseline;

    gap:10px;

    margin:0;
	
	font-family: 'Source Sans 3';

    font-size:21px;

    font-weight:600;

    flex-wrap:wrap;

}

.cpe-divider{

    font-family: 'Source Sans 3';

    font-size:21px;

    color:#aeaeae;

    font-weight:400;

}

.cpe-count{
    color:#aeaeae;
    font-family: 'Source Sans 3';
	font-size:21px;
	font-weight: 600;
}

/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/

.cpe-search{
    position:relative;
    margin:30px 0;
}

.cpe-search-button{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:20px;

    height:20px;

    border:0;

    padding:0;

    background:#7d8794 !important;

    cursor:pointer;

    -webkit-mask:url("../icons/search.svg") center/contain no-repeat;

    mask:url("../icons/search.svg") center/contain no-repeat;

    transition:.2s;

}

.cpe-search-button:hover{

    background:#2868ff;

}

.cpe-chip-search{

    display:inline-block;

    width:16px;

    height:16px;

    flex:none;

    background:#7d8794;

    -webkit-mask:url("../icons/search.svg") center/contain no-repeat;

    mask:url("../icons/search.svg") center/contain no-repeat;

}

.cpe-chip-close{

    display:inline-block;

    width:12px;

    height:12px;

    flex:none;

    background:#7d8794;

    -webkit-mask:url("../icons/close.svg") center/contain no-repeat;

    mask:url("../icons/close.svg") center/contain no-repeat;

    transition:.2s;

}

.cpe-chip:hover .cpe-chip-close{

    background:#2868ff;

}

#cpe-search{

    width:100%;

    height:46px;

    padding:0 18px 0 52px;

    font-size:17px;

    font-family:'Source Sans 3';

    color:var(--cpe-text);

    background:#fff;

    border:1px solid var(--cpe-border);

    border-radius:6px;

    transition:.2s;

    box-sizing:border-box;

}

#cpe-search:focus{

    outline:none;

    border-color:var(--cpe-blue-hover);

    box-shadow:0 0 0 3px rgba(40,104,255,.12);

}

#cpe-search::-webkit-search-cancel-button{

    -webkit-appearance:none;

    appearance:none;

    display:none;

}

.cpe-search-clear{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    width:16px;

    height:16px;

    border:0;

    padding:0;

    cursor:pointer;

    background:#7d8794 !important;

    display:none;

    -webkit-mask:url("../icons/close.svg") center/contain no-repeat;

    mask:url("../icons/close.svg") center/contain no-repeat;

    transition:.2s;

}

.cpe-search-clear:hover{

    background:#2868ff !important;

}

.cpe-search.has-value .cpe-search-clear{

    display:block;

}


/*--------------------------------------------------------------
# Tabs
--------------------------------------------------------------*/

#cpe-tabs{
    display:flex;
    gap:20px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    margin-bottom:10px;
    padding-bottom:5px;

    scrollbar-width:none;
}

#cpe-tabs::-webkit-scrollbar{
    display:none;
}

.cpe-tab{

    flex:0 0 auto;

    padding:11px 18px;

    border:1px solid var(--cpe-border);

    border-radius:6px;
	
	background-color: var(--cpe-border);
	
	font-family: 'Source Sans 3';

    font-size:15px;

    font-weight:600;

    color:var(--cpe-text);

    text-transform:uppercase;

    letter-spacing:.04em;

    cursor:pointer;

    transition:.2s;

}

.cpe-tab:hover{

    border-color:var(--cpe-blue-hover);

    color:var(--cpe-blue-hover);
	
	background-color: var(--cpe-border-light);

}

.cpe-tab.active{

    background:var(--cpe-blue);

    border-color:var(--cpe-blue);

    color:#fff;

}

.cpe-tab.active:hover{

    background:var(--cpe-blue);

    border-color:var(--cpe-blue);

    color:#fff;

}



.cpe-dropdown.open .cpe-dropdown-menu{

    display:block;

}

/*--------------------------------------------------------------
# Checkbox
--------------------------------------------------------------*/

.cpe-dropdown-menu .cpe-checkbox{

    display:flex;

    align-items:center;

    width:100%;

    gap:10px;

    padding:8px 0;

    margin:0;

}

.cpe-dropdown-menu .cpe-checkbox input{

    margin:0;

    position:relative;

    top:1px;

}

.cpe-dropdown-menu .cpe-filter-name{

    flex:1;

}

.cpe-dropdown-menu .cpe-count{

    margin-left:auto;

    white-space:nowrap;

}

.cpe-checkbox input{

    margin:0;

}

.cpe-filter-name{

    font-family: 'Source Sans 3';
	font-size:13px;
    line-height:1.4;

}

.cpe-checkbox .cpe-count{

    margin-left:2px;

    color:#999;
    font-size:13px;
    line-height:1.4;

}

#cpe-active-filters{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:12px 0 22px;

}

.cpe-chip{

    display:flex;

    align-items:center;

    gap:8px;

    padding:5px 10px;

    border:1px solid var(--cpe-border);

    border-radius:6px;

    background:#eaeaea;

    color:var(--cpe-text);

    cursor:pointer;

    transition:.2s;
	font-family: 'Source Sans 3';

}

.cpe-chip:hover{

    border-color:var(--cpe-blue-hover);

    color:var(--cpe-blue-hover);

}

.cpe-clear{

    margin-left:auto;

    color:var(--cpe-blue);

    cursor:pointer;
	
	font-family: 'Source Sans 3';

    font-weight:600;

    transition:.2s;

}

.cpe-clear:hover{

    color:#aeaeae;

}

/*--------------------------------------------------------------
# Results
--------------------------------------------------------------*/

#cpe-results{
    position:relative;
    min-height:400px;
}

.cpe-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:24px;
}

.cpe-card img{

    width:100%;
    display:block;

    aspect-ratio:5/4;
    object-fit:cover;
	transition:transform .3s ease;

}

.cpe-card:hover img{

    transform:scale(1.03);

}

.cpe-card-image{

    overflow:hidden;
	border-radius:0px;

}

.cpe-card h3{

    margin:10px 0 0;
    font-family: 'Source Sans 3';
	font-size:14px;
    line-height:1.35;
	transition:color .25s ease;

}

.cpe-card:hover h3{

    color:var(--cpe-blue);

}

.cpe-card a{

    display: block;
	color:inherit;
    text-decoration:none;

}

/*--------------------------------------------------------------
# Loading
--------------------------------------------------------------*/

#cpe-results.loading{

    opacity:.45;
    pointer-events:none;

}

#cpe-results.loading::after{

    content:"";

    position:absolute;

    width:42px;
    height:42px;

    top:50%;
    left:50%;

    margin-left:-21px;
    margin-top:-21px;

    border:3px solid #ddd;
    border-top-color:var(--cpe-blue);
    border-radius:50%;

    animation:cpe-spin .8s linear infinite;

}

@keyframes cpe-spin{

    to{
        transform:rotate(360deg);
    }

}

.cpe-country{

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.cpe-country-flag{

    width:24px;

    height:18px;

    display:block;

    border-radius:3px;

    box-shadow:0 0 0 1px rgba(0,0,0,.08);

}

.cpe-checkbox.is-disabled{
    opacity:.5;
}

.cpe-filter-bar{

    display:flex;
    flex-wrap:wrap;
    gap:16px;

    margin-top:24px;
    padding-top:20px;

    border-top:1px solid #ececec;

}

.cpe-dropdown-menu{

    display:none;

    position:absolute;

    top:calc(100% + 8px);

    left:0;

    min-width:100%;

    width:max-content;

    max-width:340px;

    max-height:320px;

    overflow-y:auto;

    background:#fff;

    border:1px solid var(--cpe-border);

    border-radius:6px !important;

    box-shadow:0 12px 30px rgba(17,24,39,.12);

    padding:14px;

    z-index:999;

}

.cpe-dropdown-menu .cpe-checkbox{

    border-radius:6px;

    transition:.15s;

}

.cpe-dropdown-menu .cpe-checkbox:hover{

    background:var(--cpe-bg-light);

}

.cpe-dropdown.open .cpe-dropdown-menu{

    display:block;

}

button.cpe-dropdown-toggle {
	border-radius: 6px !important;
}

.cpe-dropdown-toggle{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    min-width:160px;

    padding:12px 18px;

    border:1px solid #aeaeae !important;

    border-radius:8px;

    background:#fff;

    color:#aeaeae !important;
	
	font-family: 'Source Sans 3';

    font-size:15px;

    font-weight:500;

    cursor:pointer;

    transition:.2s;

}

.cpe-dropdown{

    position:relative;

}

.cpe-dropdown-toggle:hover{

    border-color:var(--cpe-blue-hover) !important;
    color:var(--cpe-blue-hover) !important;
	background-color: transparent !important;

}

.cpe-dropdown.active .cpe-dropdown-toggle{

    border-color:var(--cpe-blue) !important;
    color:var(--cpe-blue) !important;
	background-color: transparent !important;

}

.cpe-dropdown.active .cpe-dropdown-arrow{

    color:var(--cpe-blue) !important;

}

.cpe-dropdown-arrow{

    width:12px;

    height:12px;

    flex:none;

    background:currentColor;

    -webkit-mask:url("../icons/chevron-down.svg") center/contain no-repeat;

    mask:url("../icons/chevron-down.svg") center/contain no-repeat;

    transition:transform .2s ease;

}

.cpe-dropdown.open .cpe-dropdown-arrow{

    transform:rotate(180deg);

}

.cpe-card{

    opacity:0;

    transform:translateY(10px);

    animation:cpeCardIn .28s ease forwards;

}

@keyframes cpeCardIn{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.cpe-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:80px 20px;

}

.cpe-empty-icon{

    font-size:48px;

    line-height:1;

    margin-bottom:20px;

    opacity:.55;

}

.cpe-empty h3{

    margin:0;
	
	font-family: 'Source Sans 3';

    font-size:20px;

    font-weight:600;

}

.cpe-empty p{

    margin:5px 0 10px;

    max-width:520px;
	
	font-family: 'Source Sans 3';
	
	font-size: 14px;

    color:#666;

    line-height:1.7;

}

.cpe-empty-clear{

    background:#5c88e3;

    color:#fff;

    border:none;

    border-radius:6px;

    padding:7px 14px;

    cursor:pointer;

    font-family: 'Source Sans 3';
	
	font-size:14px;

    font-weight:600;

    transition:.25s;

}

.cpe-empty-clear:hover{

    opacity:.9;

    transform:translateY(-1px);
	
	background:#aeaeae;

}

.cpe-empty-icon .cpe-search-icon{

    display:inline-block;

    width:52px;

    height:52px;
	
	background:#7d8794 !important;
	
	-webkit-mask:url("../icons/search.svg") center/contain no-repeat;

    mask:url("../icons/search.svg") center/contain no-repeat;

}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media(max-width:1600px){
    .cpe-grid{
        grid-template-columns:repeat(5,1fr);
    }
}

@media (max-width:1024px){

    .cpe-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .cpe-filters-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

}

@media (max-width:767px){

    .cpe-grid{

        grid-template-columns:repeat(2,1fr);

    }

}