:root {
    --flat-red-1: #E6B0AA;
    --flat-red-2: #F58781;
    --flat-purple-1: #D7D8E2;
    --flat-purple-2: #D284DE;
    --flat-blue-1: #A9CCE3;
    --flat-blue-2: #aed6f1;
    --flat-turquoise-1: #a3e4d7;
    --flat-turquoise-2: #a2d9ce;
    --flat-green-1: #a9dfbf;
    --flat-green-2: #abebc6;
    --flat-yellow-1: #f9e79f;
    --flat-yellow-2: #fad7a0;
    --flat-orange-1: #f5cba7;
    --flat-orange-2: #edbb99;
    --adrel-blue: #0d253b;
    --adrel-lightblue: #0c79d9;
    --adrel-orange: #fb7620;
    --fa-fork-knife: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUxMS42MjdweCIgaGVpZ2h0PSI1MTEuNjI3cHgiIHZpZXdCb3g9IjAgMCA1MTEuNjI3IDUxMS42MjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMS42MjcgNTExLjYyNzsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yMTkuMjc3LDAuMDAzYy00Ljk1MiwwLTkuMjM1LDEuODA5LTEyLjg1LDUuNDI0QzIwMi44MDksOS4wNDUsMjAxLDEzLjMyNiwyMDEsMTguMjc0djExOC43NzENCgkJCWMwLDQuOTQ4LTEuODA5LDkuMjMxLTUuNDI0LDEyLjg0N2MtMy42MjEsMy42MTctNy44OTgsNS40MjYtMTIuODUsNS40MjZjLTQuOTUyLDAtOS4yMzUtMS44MDktMTIuODUxLTUuNDI2DQoJCQljLTMuNjE3LTMuNjE2LTUuNDI0LTcuODk4LTUuNDI0LTEyLjg0N1YxOC4yNzRjMC00Ljk0OC0xLjgwOS05LjIyOS01LjQyNi0xMi44NDdjLTMuNjE5LTMuNjE2LTcuOTAyLTUuNDI0LTEyLjg1MS01LjQyNA0KCQkJYy00Ljk0NiwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNGMtMy42MTUsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3djExOC43NzFjMCw0Ljk0OC0xLjgwOSw5LjIzMS01LjQyNCwxMi44NDcNCgkJCWMtMy42MTcsMy42MTctNy44OTgsNS40MjYtMTIuODQ3LDUuNDI2Yy00Ljk1MiwwLTkuMjM1LTEuODA5LTEyLjg1LTUuNDI2Yy0zLjYxOC0zLjYxNi01LjQyNi03Ljg5OC01LjQyNi0xMi44NDdWMTguMjc0DQoJCQljMC00Ljk0OC0xLjgwNy05LjIyOS01LjQyNC0xMi44NDdjLTMuNjE2LTMuNjE2LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNGMtNC45NTIsMC05LjIzMywxLjgwOS0xMi44NSw1LjQyNA0KCQkJYy0zLjYxNSwzLjYxNy01LjQyNCw3Ljg5OC01LjQyNCwxMi44NDd2MTgyLjcyNWMwLDExLjYwOSwzLjM3NCwyMi4xNzIsMTAuMTM1LDMxLjY4OWM2Ljc1OSw5LjUxOSwxNS41NjIsMTYuMTgsMjYuNDEsMTkuOTg1DQoJCQl2MjIyLjQxMWMwLDkuODk2LDMuNjE3LDE4LjQ1NiwxMC44NSwyNS42OTNjNy4yMzMsNy4yMzQsMTUuOCwxMC44NDksMjUuNjk3LDEwLjg0OWgzNi41NDNjOS44OTgsMCwxOC40NjItMy42MjEsMjUuNjk3LTEwLjg1NQ0KCQkJYzcuMjMzLTcuMjMsMTAuODQ4LTE1Ljc5NywxMC44NDgtMjUuNjkzVjI1Mi42N2MxMC44NS0zLjgwNSwxOS42NDgtMTAuNDcsMjYuNDA5LTE5Ljk4NWM2Ljc1OS05LjUxNCwxMC4xMzgtMjAuMDc5LDEwLjEzOC0zMS42ODkNCgkJCVYxOC4yNzFjMC00Ljk0OC0xLjgwOS05LjIyOS01LjQxNy0xMi44NDNDMjI4LjUwNiwxLjgxMiwyMjQuMjI3LDAuMDAzLDIxOS4yNzcsMC4wMDN6Ii8+DQoJCTxwYXRoIGQ9Ik00NTEuMzgzLDUuNDI0QzQ0Ny43NjYsMS44MDksNDQzLjQ4NCwwLDQzOC41MzYsMGgtNzMuMDg3Yy0yNS4xMjUsMC00Ni42MzQsOC45NTEtNjQuNTIxLDI2Ljg0DQoJCQljLTE3Ljg5MSwxNy44OS0yNi44NDQsMzkuMzk4LTI2Ljg0NCw2NC41MjV2MjI4LjQwMWMwLDIuNDc4LDAuOTEsNC42MTMsMi43MTQsNi40MjdjMS44MTEsMS44MDcsMy45NTMsMi43MTEsNi40MiwyLjcxMWg2My45NTQNCgkJCXYxNDYuMTgxYzAsOS44OTYsMy42MiwxOC40NTYsMTAuODUyLDI1LjY5M2M3LjIzLDcuMjMxLDE1LjgwMywxMC44NDksMjUuNywxMC44NDloMzYuNTM4YzkuOSwwLDE4LjQ2My0zLjYxNCwyNS42OTctMTAuODQ5DQoJCQljNy4yMzQtNy4yMzcsMTAuODU1LTE1Ljc5NywxMC44NTUtMjUuNjkzVjE4LjI3MUM0NTYuODA3LDEzLjMyMyw0NTUsOS4wNDIsNDUxLjM4Myw1LjQyNHoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
    --fa-camera: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjU0OC4xNjVweCIgaGVpZ2h0PSI1NDguMTY1cHgiIHZpZXdCb3g9IjAgMCA1NDguMTY1IDU0OC4xNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU0OC4xNjUgNTQ4LjE2NTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik01MjYuNzYsMTMxLjA0NWMtMTQuMjc3LTE0LjI3NC0zMS40OTgtMjEuNDEzLTUxLjY3NS0yMS40MTNoLTYzLjk1M2wtMTQuNTU4LTM4LjgyNg0KCQkJYy0zLjYxOC05LjMyNS0xMC4yMjktMTcuMzY4LTE5Ljg0Ni0yNC4xMjhjLTkuNjEzLTYuNzU3LTE5LjQ2Mi0xMC4xMzgtMjkuNTUxLTEwLjEzOEgyMDAuOTk2DQoJCQljLTEwLjA4OCwwLTE5LjkzOSwzLjM4MS0yOS41NTIsMTAuMTM4Yy05LjYxMyw2Ljc2LTE2LjIyNSwxNC44MDMtMTkuODQyLDI0LjEyOGwtMTQuNTYsMzguODI2SDczLjA4OQ0KCQkJYy0yMC4xNzksMC0zNy40MDEsNy4xMzktNTEuNjc4LDIxLjQxM0M3LjEzNywxNDUuMzIsMCwxNjIuNTQ0LDAsMTgyLjcyMXYyNTUuODEzYzAsMjAuMTc4LDcuMTM3LDM3LjQwNCwyMS40MTEsNTEuNjc1DQoJCQljMTQuMjc3LDE0LjI3NywzMS41LDIxLjQxNiw1MS42NzgsMjEuNDE2aDQwMS45ODljMjAuMTc3LDAsMzcuMzk3LTcuMTM5LDUxLjY3NS0yMS40MTYNCgkJCWMxNC4yNzMtMTQuMjcxLDIxLjQxMi0zMS40OTcsMjEuNDEyLTUxLjY3NVYxODIuNzIxQzU0OC4xNjksMTYyLjU0NCw1NDEuMDMsMTQ1LjMyLDUyNi43NiwxMzEuMDQ1eiBNMzY0LjQ0Niw0MDAuOTkzDQoJCQljLTI1LjAyOSwyNS4wMy01NS4xNDcsMzcuNTQ4LTkwLjM2MiwzNy41NDhzLTY1LjMzMS0xMi41MTgtOTAuMzYyLTM3LjU0OGMtMjUuMDMxLTI1LjAyNi0zNy41NDQtNTUuMTUxLTM3LjU0NC05MC4zNTgNCgkJCWMwLTM1LjIxOCwxMi41MTctNjUuMzMzLDM3LjU0NC05MC4zNjRjMjUuMDI4LTI1LjAzMSw1NS4xNDgtMzcuNTQ0LDkwLjM2Mi0zNy41NDRzNjUuMzMzLDEyLjUxNiw5MC4zNjIsMzcuNTQ0DQoJCQljMjUuMDMsMjUuMDI4LDM3LjU0NSw1NS4xNDYsMzcuNTQ1LDkwLjM2NEM0MDEuOTkxLDM0NS44NDIsMzg5LjQ3NywzNzUuOTY0LDM2NC40NDYsNDAwLjk5M3oiLz4NCgkJPHBhdGggZD0iTTI3NC4wODQsMjI4LjQwM2MtMjIuNjUxLDAtNDIuMDE4LDguMDQyLTU4LjEwMiwyNC4xMjhjLTE2LjA4NCwxNi4wODQtMjQuMTI2LDM1LjQ0OC0yNC4xMjYsNTguMTA0DQoJCQljMCwyMi42NDcsOC4wNDIsNDIuMDE0LDI0LjEyNiw1OC4wOThjMTYuMDg0LDE2LjA4MSwzNS40NSwyNC4xMjMsNTguMTAyLDI0LjEyM2MyMi42NDgsMCw0Mi4wMTctOC4wNDIsNTguMTAxLTI0LjEyMw0KCQkJYzE2LjA4NC0xNi4wODQsMjQuMTI3LTM1LjQ1LDI0LjEyNy01OC4wOThjMC0yMi42NTUtOC4wNDMtNDIuMDE5LTI0LjEyNy01OC4xMDRDMzE2LjEwMiwyMzYuNDQ2LDI5Ni43MzIsMjI4LjQwMywyNzQuMDg0LDIyOC40MDMNCgkJCXoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
    --fa-briefcase: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUxMS42MjZweCIgaGVpZ2h0PSI1MTEuNjI3cHgiIHZpZXdCb3g9IjAgMCA1MTEuNjI2IDUxMS42MjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMS42MjYgNTExLjYyNzsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0zMTkuNzcsMzM4LjAzOWMwLDQuOTQ5LTEuODExLDkuMjM2LTUuNDI0LDEyLjg0N2MtMy42MTcsMy42MjEtNy45MDIsNS40MjgtMTIuODUxLDUuNDI4aC05MS4zNjENCgkJCWMtNC45NTIsMC05LjIzMy0xLjgwNy0xMi44NS01LjQyOGMtMy42MTYtMy42MS01LjQyNC03Ljg5Ny01LjQyNC0xMi44NDdWMjkyLjM2SDB2MTM3LjA0NGMwLDEyLjU2LDQuNDcxLDIzLjMxMiwxMy40MTgsMzIuMjU3DQoJCQljOC45NDUsOC45NDYsMTkuNzAxLDEzLjQxOSwzMi4yNjQsMTMuNDE5aDQyMC4yNjZjMTIuNTYsMCwyMy4zMTUtNC40NzMsMzIuMjYxLTEzLjQxOWM4Ljk0OS04Ljk0NSwxMy40MTgtMTkuNjk3LDEzLjQxOC0zMi4yNTcNCgkJCVYyOTIuMzZIMzE5Ljc3VjMzOC4wMzlMMzE5Ljc3LDMzOC4wMzl6Ii8+DQoJCTxyZWN0IHg9IjIxOS4yNjYiIHk9IjI5Mi4zNiIgd2lkdGg9IjczLjA5NiIgaGVpZ2h0PSIzNi41NDUiLz4NCgkJPHBhdGggZD0iTTQ5OC4yMDgsMTIzLjA1NGMtOC45NDUtOC45NDctMTkuNzAxLTEzLjQxOC0zMi4yNjEtMTMuNDE4SDM2NS40NDZWNjMuOTUzYzAtNy42MTQtMi42NjMtMTQuMDg0LTcuOTk0LTE5LjQxNA0KCQkJYy01LjMyNS01LjMyNy0xMS44LTcuOTkzLTE5LjQxMS03Ljk5M0gxNzMuNTg5Yy03LjYxMiwwLTE0LjA4MywyLjY2Ni0xOS40MTQsNy45OTNzLTcuOTk0LDExLjc5OS03Ljk5NCwxOS40MTR2NDUuNjgzSDQ1LjY4Mg0KCQkJYy0xMi41NjIsMC0yMy4zMTgsNC40NzEtMzIuMjY0LDEzLjQxOEM0LjQ3MSwxMzIsMCwxNDIuNzUsMCwxNTUuMzEzdjEwOS42MzZoNTExLjYyNlYxNTUuMzEzDQoJCQlDNTExLjYyNiwxNDIuNzUsNTA3LjE1OCwxMzIsNDk4LjIwOCwxMjMuMDU0eiBNMzI4LjkwNCwxMDkuNjM2SDE4Mi43MjVWNzMuMDg5aDE0Ni4xNzlWMTA5LjYzNnoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
    --fa-home-white: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDYwLjI5OCA0NjAuMjk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NjAuMjk4IDQ2MC4yOTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjMwLjE0OSwxMjAuOTM5TDY1Ljk4NiwyNTYuMjc0YzAsMC4xOTEtMC4wNDgsMC40NzItMC4xNDQsMC44NTVjLTAuMDk0LDAuMzgtMC4xNDQsMC42NTYtMC4xNDQsMC44NTJ2MTM3LjA0MSAgICBjMCw0Ljk0OCwxLjgwOSw5LjIzNiw1LjQyNiwxMi44NDdjMy42MTYsMy42MTMsNy44OTgsNS40MzEsMTIuODQ3LDUuNDMxaDEwOS42M1YzMDMuNjY0aDczLjA5N3YxMDkuNjRoMTA5LjYyOSAgICBjNC45NDgsMCw5LjIzNi0xLjgxNCwxMi44NDctNS40MzVjMy42MTctMy42MDcsNS40MzItNy44OTgsNS40MzItMTIuODQ3VjI1Ny45ODFjMC0wLjc2LTAuMTA0LTEuMzM0LTAuMjg4LTEuNzA3TDIzMC4xNDksMTIwLjkzOSAgICB6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTQ1Ny4xMjIsMjI1LjQzOEwzOTQuNiwxNzMuNDc2VjU2Ljk4OWMwLTIuNjYzLTAuODU2LTQuODUzLTIuNTc0LTYuNTY3Yy0xLjcwNC0xLjcxMi0zLjg5NC0yLjU2OC02LjU2My0yLjU2OGgtNTQuODE2ICAgIGMtMi42NjYsMC00Ljg1NSwwLjg1Ni02LjU3LDIuNTY4Yy0xLjcxMSwxLjcxNC0yLjU2NiwzLjkwNS0yLjU2Niw2LjU2N3Y1NS42NzNsLTY5LjY2Mi01OC4yNDUgICAgYy02LjA4NC00Ljk0OS0xMy4zMTgtNy40MjMtMjEuNjk0LTcuNDIzYy04LjM3NSwwLTE1LjYwOCwyLjQ3NC0yMS42OTgsNy40MjNMMy4xNzIsMjI1LjQzOGMtMS45MDMsMS41Mi0yLjk0NiwzLjU2Ni0zLjE0LDYuMTM2ICAgIGMtMC4xOTMsMi41NjgsMC40NzIsNC44MTEsMS45OTcsNi43MTNsMTcuNzAxLDIxLjEyOGMxLjUyNSwxLjcxMiwzLjUyMSwyLjc1OSw1Ljk5NiwzLjE0MmMyLjI4NSwwLjE5Miw0LjU3LTAuNDc2LDYuODU1LTEuOTk4ICAgIEwyMzAuMTQ5LDk1LjgxN2wxOTcuNTcsMTY0Ljc0MWMxLjUyNiwxLjMyOCwzLjUyMSwxLjk5MSw1Ljk5NiwxLjk5MWgwLjg1OGMyLjQ3MS0wLjM3Niw0LjQ2My0xLjQzLDUuOTk2LTMuMTM4bDE3LjcwMy0yMS4xMjUgICAgYzEuNTIyLTEuOTA2LDIuMTg5LTQuMTQ1LDEuOTkxLTYuNzE2QzQ2MC4wNjgsMjI5LjAwNyw0NTkuMDIxLDIyNi45NjEsNDU3LjEyMiwyMjUuNDM4eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    --header-height: 80px;
}

html {
    overflow-y: scroll;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    height: 100%;
    min-height: 100%;
}

body { background-color: whitesmoke; padding-top: var(--header-height); }

h1, h2, h3 {
    margin-bottom: 20px;
    padding: 0 10px;
    /*font-weight: normal;*/
}


h1 {
    text-align: center;
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 15px;
}

h1::after {
    content: attr(data-suffix);
    display: block;
    font-size: 14px;
    line-height: 14px;
}

h2 {
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 20px;
    font-weight: normal;
    padding: 0 10px;
}

h3 {
    font-size: 17px;
    line-height: 25px;
    font-weight: bold;
    margin-bottom: 0;
}

/* HEADER */

header { position: fixed; top: 0; left: 0; height: var(--header-height); width: 100%; background-color: var(--adrel-blue); z-index: 99; box-sizing: border-box; }
header > div { width: 100%; height: 100%; position: relative; box-sizing: border-box; /*background-color: rgba(255, 255, 255, 0.25);*/ }
@media (min-width: 1000px) {
    header > div { width: 1200px; margin: 0 auto; }
}

header input[type="radio"] { position: absolute; bottom: 100%; right: 100%; }

header label { width: 40px; height: 40px; border: 2px solid white; display: none; position: absolute; border-radius: 50%; box-sizing: border-box; top: 20px; }
header label::after,
header label::before { position: absolute; box-sizing: border-box; content: ''; }
header input#rb-closed:checked ~ label { display: block; }
header input#rb-closed:checked ~ label[for="rb-closed"] { display: none; }
header input#rb-closed:not(:checked) ~ label[for="rb-closed"] { display: block; }

header label[for="rb-search"] { right: 60px; }
header label[for="rb-search"]::before { display: block; width: 50%; height: 50%; border: 2px solid white; right: 30%; bottom: 30%; border-radius: 50%; }
header label[for="rb-search"]::after { display: block; width: 2px; height: 20%; background-color: white; top: calc(60% + 1px); left: 60%; transform-origin: left top; transform: rotate(-45deg); }

header label[for="rb-facets"] { right: 10px; }
header label[for="rb-facets"]::before { left: 25%; bottom: 50%; width: 50%; height: 20%; border-top: 2px solid white; border-bottom: 1px solid white; }
header label[for="rb-facets"]::after { left: 25%; top: 50%; width: 50%; height: 20%; border-top: 1px solid white; border-bottom: 2px solid white; }

header label[for="rb-closed"] { right: 10px; }
header label[for="rb-closed"]::before { left: 25%; top: calc(50% - 1px); width: 50%; height: 2px; background-color: white; content: ''; transform: rotate(-45deg); transform-origin: center; }
header label[for="rb-closed"]::after { left: 25%; top: calc(50% - 1px); width: 50%; height: 2px; background-color: white; content: ''; transform: rotate(45deg); transform-origin: center; }

header label[for="rb-global"] { right: 110px; }
header label[for="rb-global"]::before { left: 25%; top: -2px; width: 50%; height: calc(100% + 4px); border: 2px solid white; border-radius: 50%; }
header label[for="rb-global"]::after { left: 0; top: 30%; width: 100%; height: 40%; border-top: 2px solid white; border-bottom: 2px solid white; }

@media (min-width: 1000px) {
    header label,
    header input#rb-closed:checked ~ label { display: none; }
    header input#rb-closed:checked ~ label[for="rb-global"] { display: block; }
    header label[for="rb-global"] { right: 75%; }
    header label[for="rb-closed"] { right: 75%; }
}

header nav.global { position: absolute; top: 100%; right: 0; background-color: white; transition: width ease .25s; overflow: hidden; height: calc(100vh - var(--header-height)); width: 0; }
header input#rb-global:checked ~ nav.global { width: 100%; height: calc(100vh - var(--header-height)); }
header nav.global ul { list-style: none; padding: 0; margin: 0; }
header nav ul > li > a { display: block; color: white; text-decoration: none; line-height: 40px; font-size: 16px; padding: 0 10px; }
header nav ul > li > a:hover { /*text-decoration: underline;*/ background-color: var(--adrel-lightblue); }

@media (min-width: 1000px) {
    header nav.facets { top: 0; right: 0; left: auto; background-color: transparent; overflow: visible; height: auto; width: auto; }
    header nav.facets ul > li { float: left; }
    header nav.facets ul > li > a { color: white; line-height: 80px; border-bottom: none; }
}

header form { display: block; position: absolute; right: 0; top: 100%; margin: 0 auto; background-color: white; width: 0; overflow: hidden; box-sizing: border-box; transition: width ease .25s; }
header input#rb-search:checked ~ form { height: calc(100vh - var(--header-height)); width: 100%; }
header form > fieldset { display: block; overflow: hidden; border: 1px solid silver; padding: 0; margin: 10px; height: 40px; border-radius: 20px; box-sizing: border-box; position: relative; background-color: white; }
header input#query { display: block; width: calc(100% - 38px); height: 100%; line-height: 38px; padding: 9px; box-sizing: border-box; border: none; float: left; }
header form button { --size: 38px;
    display: block;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    height: var(--size);
    width: var(--size);
    box-sizing: border-box;
    border: none;
    /*background-color: var(--adrel-orange);*/
    background-color: white;
}

header form button::before {
    content: '';
    display: block;
    border: 2px solid var(--adrel-orange);
    box-sizing: border-box;
    width: 40%;
    height: 40%;
    position: absolute;
    top: 25%;
    left: 25%;
    border-radius: 50%;
}

header form button::after {
    content: '';
    display: block;
    width: 20%;
    height: 20%;
    border-left: 2px solid var(--adrel-orange);
    box-sizing: border-box;
    position: absolute;
    top: 60%;
    left: calc(60% - 1px);
    /*background-color: red;*/
    transform: rotate(-45deg);
    transform-origin: left top;
}

@media (min-width: 1000px) {
    header form { display: block; position: absolute; left: 30%; width: 40%; top: 20px; background-color: transparent; height: auto; margin: 0; overflow: hidden; box-sizing: border-box; }
    header form > fieldset { margin: 0; }
}

header nav.facets { position: absolute; top: 100%; right: 0; background-color: white; transition: width ease .25s; overflow: hidden; height: calc(100vh - var(--header-height)); width: 0; }
header input#rb-facets:checked ~ nav.facets { width: 100%; }
header nav.facets ul { list-style: none; padding: 0; margin: 0; }
header nav ul > li > a { display: block; color: black; text-decoration: none; font-size: 16px; padding: 0 10px; line-height: 40px; border-bottom: 1px solid gainsboro; }
header nav ul > li > a:hover { /*text-decoration: underline;*/ background-color: var(--adrel-lightblue); }

@media (min-width: 1000px) {
    header nav.facets { top: 0; right: 0; left: auto; background-color: transparent; overflow: visible; height: auto; width: auto; }
    header nav.facets ul > li { float: left; }
    header nav.facets ul > li > a { color: white; line-height: 80px; border-bottom: none; }
}



header > div > a#logo { position: absolute; top: 0; left: 0; color: white; padding: 20px 10px; line-height: 40px; text-decoration: none; white-space: nowrap; font-size: 24px; display: block;
    letter-spacing: -1px;
    font-weight: bold;
}

header > div > a#logo:hover {
    background-color: var(--adrel-lightblue);
}





header form > input[type="checkbox"] { position: absolute; bottom: 100%; right: 0; width: 10px; height: 10px; overflow: hidden; }
header form > input[type="checkbox"] ~ fieldset { width: 10px; margin-top: 20px; }
header form > input[type="checkbox"]:checked ~ fieldset { width: 100vw; overflow: hidden; }








#language {
    display: block;
    position: absolute;
    top: 0px;
    left: 200px;
    line-height: 40px;
    color: white;
    padding-left: 25px;
}

#language:hover {
    background-color: var(--adrel-lightblue);
    cursor: pointer;
}

header label {  }
header label span { position: absolute; left:0; top: 100%; display: block; background-color: gainsboro; line-height: 25px; font-size: 15px; border-radius: 5px; transition: opacity .25s ease; }
header label span a { display: block; padding: 0 10px; border-top: 1px solid silver; }
header label span a:first-child { border-top: none; }
header label input[type="checkbox"] { visibility: hidden; width: 0; height: 0; overflow: hidden; }
header label input[type="checkbox"] + span { opacity: 0; height: 0; overflow: hidden; }
header label input[type="checkbox"]:checked + span { height: auto; opacity:1; }







section {
    width: 80%;
    float: left;
}


ul.products {
    /*width: 1200px;*/
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

li.product {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 10px;
}


@media (max-width: 1000px) {
    li.product {
        width: 50%;
    }
}

a.product-card {
    text-decoration: none;
    overflow: hidden;
    background-color: white;
    box-sizing: border-box;
    display: block;
    padding: 15px;
    color: black;
    border-bottom: 1px solid gainsboro;
    border-radius: 5px;
    /*border: 1px solid gainsboro;*/
    /*border-radius: 10px;*/
    box-shadow: 0 0 5px gainsboro;
    transition: background-color ease .5s, transform ease .5s;
    position: relative;
}

a.product-card:hover {
    background-color: ivory;
    /*transform: scale(1.05);*/
}

a.product-card > .image {
    display: block;
    background-size: contain;
    background-image: var(--img);
    /*background-color: gainsboro;*/
    background-repeat: no-repeat;
    background-position: center center;
    /*border: 1px solid gainsboro;*/
    transition: background-size ease .5s;
    padding-top: 100%;
    width: 90%;
    height: 0;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 20px;
}
/*li.product > a:hover > .image {
            background-size: 90%;
        }*/
a.product-card > .brand,
a.product-card > .name,
a.product-card > .price,
a.product-card > .store,
a.product-card > .button {
    display: block;
    white-space: nowrap;
    /*text-align: center;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

a.product-card > .brand {
    --line-height: 19px;
    font-weight: bold;
    font-size: 15px;
    line-height: var(--line-height);
    height: var(--line-height);
}

a.product-card > .name {
    --line-height: 17px;
    /*display: none;*/
    font-size: 13px;
    line-height: var(--line-height);
    /*height: calc(var(--line-height) * 2);*/
    overflow: hidden;
    color: dimgray;
    white-space: nowrap;
    margin-bottom: 5px;
}

a.product-card > .price {
    font-size: 15px;
    /*color: var(--adrel-orange);*/
    line-height: 21px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

a.product-card > .compare {
    font-size: 11px;
    line-height: 15px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid gainsboro;
    margin: 0 -15px -5px -15px;
    padding: 10px 0 0 15px;
    color: var(--adrel-lightblue);
    float: left;
    width: calc(50% + 15px);
}

a.product-card > .store {
    font-size: 11px;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    border-top: 1px solid gainsboro;
    margin: 0 -15px -5px -15px;
    padding: 10px 15px 0 0;
    color: var(--adrel-lightblue);
}

a.product-card > .compare + .store {
    float: left;
    width: calc(50% + 15px);
}

a.product-card > .compare:hover,
a.product-card > .store:hover {
    text-decoration: underline;
}

.grid-4 {
    overflow: hidden;
}

.grid-4 > * {
    float: left;
    width: 25%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
}


#breadcrumb {
    margin: 0 auto;
    overflow: hidden;
    background-color: whitesmoke;
    height: 40px;
}

#breadcrumb > ul {
    width: 1200px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 20px;
    box-sizing: border-box;
    padding: 10px 10px;
    list-style: none;
    overflow: hidden;
}
#breadcrumb > ul > li {
    float: left;
    position: relative;
}

#breadcrumb > ul > li:not(:first-child) {
    padding-left: 25px;
    margin-left: 5px;
}

/*#breadcrumb > ul > li:not(:first-child)::before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: silver;
}*/

#breadcrumb > ul > li:not(:first-child)::after {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    top: 6px;
    left: 9px;
    border-color: slategray;
    border-top-style: solid;
    border-right-style: solid;
    border-top-width: 2px;
    border-right-width: 2px;
    /*background-color: black;*/
    box-sizing: border-box;
    transform: rotate(45deg);
    transform-origin: left top;
}




#breadcrumb > ul > li > a {
    color: slategray;
    float: left;
    text-decoration: none;
    font-weight: bold;
    display: block;
}


/*#breadcrumb > ul > li:first-child > a::after {
    transform: rotate(-45deg);
    left: 6px;
    top: 12px;
    width: 9px;
    height: 9px;
}

#breadcrumb > ul > li:first-child > a::before {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    top: 12px;
    left: 8px;
    border-radius: 0;
    background-color: inherit;
    border: 2px solid slategray;
    border-top: none;

}*/


ul.categories-start {
    list-style: none;
    overflow: hidden;
    width: 1200px;
    padding: 0;
    margin: 0 auto;
}

ul.categories-start > li {
    float: left;
    width: 20%;
    padding: 5px;
    box-sizing: border-box;
}

ul.categories-start > li > a {
    --h: 25px;
    text-decoration: none;
    display: block;
    font-size: 15px;
    line-height: var(--h);
    position: relative;
    margin-left: 25px;
    padding-left: 5px;
}

ul.categories-start > li > a::before {
    content: '';
    background-image: var(--icon);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--h);
    height: var(--h);
    display: block;
    background-color: silver;
    border-radius: 50%;
    position: absolute;
    right: 100%;
}


ul.category-spotlight {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
}

ul.category-spotlight > li {
    float: left;
    width: 50%;
    padding: 0 10px 5px 10px;
    box-sizing: border-box;
    font-size: 13px;
}

@media (min-width: 1000px) {
    ul.category-spotlight > li {
        float: left;
        width: 20%;
    }
}

ul.category-spotlight > li > a {
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
    color: var(--adrel-lightblue);
    position: relative;
    padding-left: 25px;
}

ul.category-spotlight > li > a::before {
    content: '';
    position: absolute;
    display: block;
    /*display: none;*/
    left: 0;
    top: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    box-sizing: border-box;
    border: 2px solid gainsboro;
}


ul.category-spotlight > li > a:hover {
    /*background-color: ivory;*/
    color: var(--adrel-blue);
    text-decoration: underline;
    /*transform: scale(1.05);*/
}

ul.category-spotlight > li > a::after {
    /*content: '(' var(--count) ')';*/
    content: var(--count) ' products';
    /*position: absolute;*/
    /*display: block;*/
    display: none;
    /*right: 10px;*/
    /*bottom: 5px;*/
    font-size: 11px;
    line-height: 15px;
    color: slategray;
}

ul.category-tree {
    list-style: none;
    margin: 0;
    padding: 10px;
}

ul.category-tree a {
    display: block;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 50px;
    overflow: hidden;
    border-bottom: 1px solid gainsboro;
}

ul.category-tree a::after {
    content: var(--count);
    position: absolute;
    right: 0;
    top: 0;
}


ul.categories-main {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.categories-main > li {
    float: left;
    width: 20%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 12px;
    line-height: 16px;
}

ul.categories-main > li > a {
    display: block;
    /*border-top: 5px solid var(--color, blue);*/
    /*text-align: center;*/
    /*color: var(--color, blue);*/
    color: var(--adrel-lightblue);
    font-size: 16px;
    line-height: 30px;
}

ul.grid-list-4,
ul.grid-list-5 {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.grid-list-4 > li,
ul.grid-list-5 > li {
    float: left;
    box-sizing: border-box;
    padding: 10px;
}

ul.grid-list-4 > li {
    width: 25%;
}

ul.grid-list-5 > li {
    width: 20%;
}


ul.filters {
    list-style: none;
    margin: 10px;
    padding: 0;
}

ul.filters > li {
    padding: 0;
    margin: 0;
    font-size: 13px;
    /*margin-right: 40px;*/
}

ul.filters > li > a {
    font-size: 15px;
    line-height: 25px;
    color: blue;
    color: var(--adrel-lightblue);
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    padding-left: 25px;
    position: relative;
}

ul.filters > li > a.selected {
    background-color: white;
    color: dimgray;
    border-radius: 5px;
}

ul.filters > li > a::before {
    position: absolute;
    left: 0;
    left: 5px;
    top: 5px;
    height: 15px;
    width: 15px;
    content: '';
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid gainsboro;
    background-color: white;
}

ul.filters > li > a.selected::before {
    /*border-color: white;*/
    background-color: var(--adrel-orange);
}

ul.filters > li > a:hover {
    background-color: white;
    text-decoration: underline;
}

ul.filters > li > a::after {
    float: right;
    content: var(--count);
    /*display: none;*/
    /*background-color: white;*/
    font-size: 11px;
    border-radius: 7px;
    line-height: 19px;
    color: silver;
}

ul.filters > li > span {
    /*text-transform: uppercase;*/
    font-weight: bold;
    font-size: 17px;
    line-height: 25px;
    margin-top: 20px;
    display: block;
    margin-bottom: 5px;
}

a.text-card {
    text-decoration: none;
    /*color: var(--adrel-lightblue);*/
    color: blue;
    /*background-color: white;*/
    display: block;
    /*border-radius: 5px;*/
    /*padding: 0 10px;*/
    /*transition: all ease .25s;*/
}

a.text-card:hover {
    background-color: ivory;gr
    color: blue;
}

a.text-card::after {
    content: attr(data-extra);
    display: block;
    font-size: 13px;
    line-height: 15px;
    color: dimgray;
}

a.merchant-row {
    display: flex;
    margin-top: 5px;
    overflow: hidden;
    justify-content: space-between;
    text-decoration: none;
}

a.merchant-row:hover {
    background-color: white;
}

a.merchant-row > * {
    display: block;
    overflow: hidden;
    line-height: 25px;
    font-size: 17px;
    white-space: nowrap;
}

a.merchant-row > .merchant-name {
    flex: 2 2 0;
}

a.merchant-row > .merchant-stock {
    flex: 1 1 0;
}