@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./roboto.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url();

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

ol, ul {
    list-style-type: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    border:none;
    background-color: white;
    font-family: "Roboto", "MS PGothic", sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: rgb(34, 34, 34);
}

.filter-container {
	display:none;
	align-items:center;
	float:left;
	margin-left: 1%;
	padding-right: 1%;
	margin-top: 32px;
	margin-bottom: 32px;
	
	-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),
						0 1px 2px 0 rgba(0,0,0,.24);
	-moz-box-shadow:    0 1px 3px 0 rgba(0,0,0,.12),
						0 1px 2px 0 rgba(0,0,0,.24);
	box-shadow:         0 1px 3px 0 rgba(0,0,0,.12),
						0 1px 2px 0 rgba(0,0,0,.24); 
}

#filter-image {
	display:none;
	margin-left: 10px;
	float:left;
	height:24px;
}

.dropdown-container {
    position: relative;
	margin-left: 20px;
	
}

.dropdown-btn {
    color: rgb(34, 34, 34);
    cursor: pointer;
    display: none;
    font-family: "Roboto", "MS PGothic", sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 24px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    border-width: 0;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    padding: 12px 30px 10px 0;
    background-color: unset;
}

.dropdown-btn .is-open {
    color: #ff0090;
}

.dropdown-btn::after {
    background-image: url("./images/Arrow-Down.png");
    background-repeat: no-repeat;
    background-position: center;
    content: "";
    display: inline-block;
    height: 24px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 24px;
}

.dropdown-btn.is-open::after {
    background-image: url("./images/Arrow-Up.png");
}

.dropdown-container .dropdown {
    box-sizing: border-box;
    display: none;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    transition: height .1s ease-out;
    width: 260px;
    z-index: 9;
}

.dropdown-container .dropdown-list {
    margin: 0;
    padding: 0;
}

.dropdown-container .inputwrapper {
    margin: 0;
    position: relative;
}
.inputwrapper {
    box-sizing: border-box;
    clear: both;
    position: relative;
}

.custom-input:not(#foo)[type=radio] {
    height: 16px;
    width: 16px;
}

.custom-input:not(#foo)[type=radio]:checked+.label::after {
    background: #222;
    border-radius: 50%;
    content: "";
    height: 12px;
    margin: 0 10px 0 0;
    pointer-events: none;
    position: absolute;
    top: 5px;
    width: 12px;
}

.dropdown-sortby .custom-input:not(#foo)[type=radio]+.label {
    white-space: nowrap;
}
.inputwrapper .custom-input:not(#foo)+.label {
    margin-bottom: 0;
    text-align: left;
}

.dropdown-list .custom-input:not(#foo):checked+.label, .level-list .custom-input:not(#foo):checked+.label, .dropdown-list .custom-input:not(#foo):hover+.label, .level-list .custom-input:not(#foo):hover+.label {
    background: #ffb7e0;
}
.dropdown-list .custom-input:not(#foo)+.label, .level-list .custom-input:not(#foo)+.label {
    padding: 13.5px 0 13.5px 62px;
}
.custom-input:not(#foo)[type=radio]+.label {
    display: block;
    margin: 0;
}
.custom-input:not(#foo)+.label {
    cursor: pointer;
    margin-bottom: 4px;
    padding: 13.5px 0 13.5px 38px;
}
.custom-input:not(#foo)+.label {
    display: block;
    margin: 0;
    padding: 6px 0 6px 30px;
}
input[type=checkbox]+label, input[type=radio]+label {
    display: inline-block;
    margin: 0 0 0 5px;
}
.label, .form-label {
    font-size: 13px;
    line-height: 20px;
    clear: both;
    color: #222;
    display: block;
    margin: 6px 0 7px;
    text-transform: none;
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    vertical-align: middle;
}
input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
}

.custom-input:not(#foo)[type=radio] {
    height: 16px;
    width: 16px;
}
.custom-input:not(#foo) {
    height: 20px;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 20px;
}
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    vertical-align: middle;
}
input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
}
html, button, input, select, textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

input {
    font-size: 100%;
}

input[type="radio"] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 3px 0px 5px;
    padding: initial;
    border: initial;
}

.dropdown-sortby .custom-input:not(#foo)[type=radio]+.label::before {
    left: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.dropdown-container .inputwrapper .custom-input:not(#foo)[type=radio]+.label::before {
    border: 1px solid #222;
}
.custom-input:not(#foo)[type=radio]:checked+.label::before {
    background: none;
}
.dropdown-list .custom-input:not(#foo)+.label::before, .level-list .custom-input:not(#foo)+.label::before {
    left: 14px;
}
.custom-input:not(#foo)[type=radio]+.label::before {
    border-radius: 50%;
    height: 16px;
    width: 16px;
}
.custom-input:not(#foo):checked+.label::before, .custom-input:not(#foo):checked:hover+.label::before {
    background-image: none;
}
.custom-input:not(#foo)[type=radio]+.label::before {
    background-image: none;
    border: 1px solid #222;
}
.custom-input:not(#foo)+.label::before, .dropdown-color.color .inputwrapper .custom-input:not(#foo)+.label::after, .dropdown-color .inputwrapper .custom-input:not(#foo)+.label::after, .filter-levels .drawer-color .custom-input:not(#foo):checked+.label::before, .filter-levels .drawer-color .custom-input:not(#foo):hover+.label::before {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EFoundation%20%2F%20Icon%20%2F%2024%20%2F%20Control%20%2F%20Checkbox%20%2F%2000%20Inactive%3C%2Ftitle%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20d%3D%22M4.87%202.833A2.037%202.037%200%200%200%202.833%204.87v14.26c0%201.125.912%202.037%202.037%202.037h14.26a2.037%202.037%200%200%200%202.037-2.037V4.87a2.037%202.037%200%200%200-2.037-2.037H4.87zM5%202h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3V5a3%203%200%200%201%203-3z%22%20fill%3D%22%23222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
}
.custom-input:not(#foo)+.label::before, .custom-input:not(#foo)+.label::after {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.custom-input:not(#foo)+.label::before {
    background-position: center;
    background-size: 24px;
    border-radius: 3px;
    content: "";
    height: 24px;
    left: 0;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 14px;
    width: 24px;
}

.dropdown-sortby .custom-input:not(#foo)[type=radio]+.label {
    white-space: nowrap;
}
.inputwrapper .custom-input:not(#foo)+.label {
    margin-bottom: 0;
    text-align: left;
}
.dropdown-container .inputwrapper .custom-input:not(#foo)+.label {
    font-size: 13px;
    line-height: 20px;
    color: #222;
    cursor: pointer;
    padding: 12px 24px 12px 57px;
}
.custom-input:not(#foo)+.label {
    cursor: pointer;
    margin-bottom: 4px;
    padding: 13.5px 0 13.5px 38px;
}
.label, .form-label {
    font-size: 13px;
    line-height: 20px;
    clear: both;
    color: #222;
    display: block;
    margin: 6px 0 7px;
    text-transform: none;
    font-family: "Roboto";
}
legend, label {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: top;
}

.dropdown-sortby .custom-input:not(#foo)[type=radio]+.label::after {
    left: 28px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.dropdown-container .inputwrapper .custom-input:not(#foo)+.label::after {
    border-color: #222;
}
.custom-input:not(#foo)[type=radio]:checked+.label::after, .custom-input:not(#foo)[type=radio]:hover+.label::after {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.icon-check, .icon-check:before, .icon-check-small, .custom-input:not(#foo):checked+.label::after, .custom-input:not(#foo):hover+.label::after {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EFoundation%20%2F%20Icon%20%2F%2024%20%2F%20Control%20%2F%20Checkbox%20%2F%2001%20Active%3C%2Ftitle%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20d%3D%22M9.296%2016.518L5.295%2013.05l.655-.755%204.032%203.494%207.997-8.496.728.686-8.686%209.228-.728-.686.003-.003zM5%203a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2H5zm0-1h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3V5a3%203%200%200%201%203-3z%22%20fill%3D%22%23222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
}
.dropdown-list .custom-input:not(#foo)+.label::after, .dropdown-list .custom-input:not(#foo)+.label:hover::after, .level-list .custom-input:not(#foo)+.label::after, .level-list .custom-input:not(#foo)+.label:hover::after {
    left: 24px;
}

.dropdown-container .inputwrapper .custom-input:not(#foo)+.label::after {
    border-color: #222;
}
.custom-input:not(#foo)[type=radio]:checked+.label::after, .custom-input:not(#foo)[type=radio]:hover+.label::after {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.icon-check, .icon-check:before, .icon-check-small, .custom-input:not(#foo):checked+.label::after, .custom-input:not(#foo):hover+.label::after {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EFoundation%20%2F%20Icon%20%2F%2024%20%2F%20Control%20%2F%20Checkbox%20%2F%2001%20Active%3C%2Ftitle%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20d%3D%22M9.296%2016.518L5.295%2013.05l.655-.755%204.032%203.494%207.997-8.496.728.686-8.686%209.228-.728-.686.003-.003zM5%203a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2H5zm0-1h14a3%203%200%200%201%203%203v14a3%203%200%200%201-3%203H5a3%203%200%200%201-3-3V5a3%203%200%200%201%203-3z%22%20fill%3D%22%23222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
}
.dropdown-list .custom-input:not(#foo)+.label::after, .dropdown-list .custom-input:not(#foo)+.label:hover::after, .level-list .custom-input:not(#foo)+.label::after, .level-list .custom-input:not(#foo)+.label:hover::after {
    left: 24px;
}
.custom-input:not(#foo):checked+.label::after, .custom-input:not(#foo):checked:hover+.label::after {
    background-position: center;
    background-size: 24px;
    content: "";
    display: block;
    position: absolute;
    z-index: 100;
}

.dropdown-sortby .custom-input:not(#foo)[type=radio]+.label::after {
    left: 17px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slide-bottom {
	-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media screen and (min-width: 768px) {

    fieldset {
        float: left;
        margin: 7px 0;
    }

    .dropdown-btn {
        display: inline-block;
        line-height: 28px;
        margin: 0 22px 0 0;
        padding: 0 30px 0 0;
    }

    .dropdown-btn::after {
        top: 0;
    }

    .dropdown-container .dropdown {
        background-color: #fff;
    }

    .dropdown-container .is-open+.dropdown {
        display: block;
        animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
	
	.filter-container {
	display:flex;
	}
	
	#filter-image {
	display:block;	
		
	}
}

@-webkit-keyframes slide-bottom {
    0% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
    }
  }
  @keyframes slide-bottom {
    0% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);              
              opacity: 0;

    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
    }
  }