body.page-template-page-empty .cbond-th-palette { margin-bottom:30px; }
.filters { display:flex; border-bottom:1px solid #cedcdd; padding:10px 0; margin-bottom:30px; }
.filter-wrapper { padding:0 80px 0 0; width:auto; position: relative; }
.filter-wrapper::after { 
    right:90px;
    bottom: 17px;
    display:block;
    clear: both;
    background-image:url('/wp-content/themes/Divi-child/shortcode/th-colourbond-palette/images/select-arrow.svg');
    background-repeat: no-repeat;
    content: '';
    height: 12px;
    width: 24px;
    position: absolute;
}
.filter-title { text-transform:uppercase; }
.palette-filter { 
    border:0; 
    display:inline-block;
    padding:10px 44px 10px 10px; 
    font-size:20px; 
    color:#ea5022;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.palette-filter:focus { color:#ea5022; }
.palette-empty { display:none; margin-bottom:30px; }
.btn_palette { cursor: pointer; }

.palette-instruction { font-weight:bold; text-align:center; margin-bottom:25px; }
.palette-content { display:flex; flex-wrap:wrap; }
.palette-item { display:none; width:216px; margin-bottom:30px; cursor:pointer; }
.palette-item-colour { display:block; width:150px; height:150px; border-radius:50%; margin:0 auto 10px; transition: all .5s ease-in-out;}
.palette-item-colour:hover {transform:scale(1.15); transform-origin:center center;}
.palette-item-name { text-align:center; color:#002855; }

.palette-note { display:none; margin-bottom:30px; }

.palette-detail { padding:30px; background-color:#e4e2d5; display:none;}
.palette-detail-colour { display:block; width:200px; min-width:200px; height:200px; border-radius:50%; margin-right:60px; background-color:rgb(249,251,241); }
.palette-detail-title { font-size:36px; line-height:1.2; font-weight:bold; color:#002855; margin-bottom:15px;}
.palette-detail-row { display:flex; }
.palette-detail-col { padding:0 50px 0 30px; margin-bottom:30px; position: relative;}
.palette-detail-col::before { content:''; height:24px; left:0; position:absolute; top:2px; width:21px; background-repeat:no-repeat; background-size:contain;}
.palette-detail-col.colour::before { background-image:url('/wp-content/themes/Divi-child/shortcode/th-colourbond-palette/images/colour-values-icon-black.svg'); }
.palette-detail-col.nominal::before { background-image:url('/wp-content/themes/Divi-child/shortcode/th-colourbond-palette/images/nominal-thermal-values-icon-black.svg'); }

.palette-detail-col .palette-detail-col-div { display:flex; }
.palette-detail-col.colour .palette-detail-col-div span:nth-of-type(1) { width:75px;}
.palette-detail-col.nominal .palette-detail-col-div span:nth-of-type(1) { width:200px;}

.palette-detail-note p { padding-bottom:0.75em; line-height:1.2; font-size:14px; color:#5d8087 }
.palette-detail-note p.noPadding { padding-bottom:0; }
.palette-detail-note ul { padding-bottom:0.75em; }
.palette-detail-note ul li { line-height:1.2; font-size:14px; }

@media (max-width:990px) {
    .palette-detail-colour { width:180px; min-width:180px; height:180px; }
    .palette-detail-row { flex-direction:column; }

    .palette-item { width:200px;}
    .palette-item-colour { width:180px; height:180px;}
}

@media (max-width:767px) {
    .filter-wrapper { padding:0 40px 0 0;}
    .filter-wrapper::after { right:50px; }
    
    .palette-item { width:192px;}
    .palette-item-colour { width:150px; height:150px;}

    .palette-detail { padding:15px; flex-direction:column; }
    .palette-detail-colour { width:200px; min-width:200px; height:200px; margin:0 auto 30px; }
    .palette-detail-col { padding: 0 0 0 30px; }
}

@media (max-width:479px) {
    .filters {flex-direction: column;}
    .palette-filter { width:100%;}

    .palette-item { width:144px;}
    .palette-item-colour { width:110px; height:110px;}
}