div.fancy-select,
#box .boxContent div.fancy-select {
    position: relative;
}

    div.fancy-select.disabled {
        opacity: 0.5;
    }

    div.fancy-select select:focus + div.trigger.open {
        box-shadow: none;
    }

    div.fancy-select div.trigger,
    #box .boxContent div.fancy-select div.trigger {
        cursor: pointer;
        padding: 10px 20px 9px 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        background: #fff;
        border: 1px solid #bababa;
        z-index: 2;
        font: normal 14px 'robotoregular', Arial, Helvetica, sans-serif;
        letter-spacing: 0;
        color: #242424;
        transition: all 240ms ease-out;
        -webkit-transition: all 240ms ease-out;
        -moz-transition: all 240ms ease-out;
        -ms-transition: all 240ms ease-out;
        -o-transition: all 240ms ease-out;
        margin-bottom: 10px;
        height: 41px;
    }

#panel div.fancy-select div.trigger {
    background: #1c65b2;
    border: 1px solid #6296ce;
    z-index: 2;
    color: #fff;
    font: normal 14px 'robotobold', Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
    padding: 9px 20px 9px 15px;
}

div.fancy-select div.trigger:after,
#box .boxContent div.fancy-select div.trigger:after {
    content: url(../images/selectarrow-grey.png);
    display: block;
    position: absolute;
    width: 13px;
    height: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
    line-height: 4px;
}

#panel div.fancy-select div.trigger:after {
    content: url(../images/selectarrow-white.png);
}

div.fancy-select ul.options,
#box .boxContent div.fancy-select ul.options {
    padding: 0;
    list-style: none;
    margin: 0;
    position: absolute;
    top: 95%;
    left: 0;
    visibility: hidden;
    opacity: 1;
    z-index: 99999;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    width: 100%;
    border: 1px solid #bababa;
    font: normal 14px 'robotoregular', Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    color: #242424;
    transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -webkit-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -moz-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -ms-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -o-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
}

#panel div.fancy-select ul.options {
    background: #1c65b2;
    color: #fff;
    font: normal 14px 'robotobold', Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
    border: 1px solid #6296ce;
}

div.fancy-select ul.options.open,
#box .boxContent div.fancy-select ul.options.open {
    top: 98%;
    visibility: visible;
    opacity: 1;
    max-height: 193px;
    /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
    /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
    transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -webkit-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -moz-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -ms-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
    -o-transition: max-height 300ms ease-out, top 300ms ease-out, visibility 500ms ease-out;
}

    div.fancy-select ul.options.open.nano,
    #box .boxContent div.fancy-select ul.options.open.nano {
        height: 193px;
    }

div.fancy-select ul.options.overflowing,
#box .boxContent div.fancy-select ul.options.overflowing {
    top: auto;
    bottom: 40px;
    transition: max-height 300ms ease-out, bottom 300ms ease-out, visibility 500ms ease-out;
    -webkit-transition: max-height 300ms ease-out, bottom 300ms ease-out, visibility 500ms ease-out;
    -moz-transition: max-height 300ms ease-out, bottom 300ms ease-out, visibility 500ms ease-out;
    -ms-transition: max-height 300ms ease-out, bottom 300ms ease-out, visibility 500ms ease-out;
    -o-transition: max-height 300ms ease-out, bottom 300ms ease-out, visibility 500ms ease-out;
}

    div.fancy-select ul.options.overflowing.open,
    #box .boxContent div.fancy-select ul.options.overflowing.open {
        top: auto;
        bottom: 50px;
        transition: max-height 300ms ease-out, bottom 300ms ease-out;
        -webkit-transition: max-height 300ms ease-out, bottom 300ms ease-out;
        -moz-transition: max-height 300ms ease-out, bottom 300ms ease-out;
        -ms-transition: max-height 300ms ease-out, bottom 300ms ease-out;
        -o-transition: max-height 300ms ease-out, bottom 300ms ease-out;
    }

div.fancy-select ul.options li,
#box .boxContent div.fancy-select ul.options li {
    padding: 3px 15px;
    cursor: pointer;
    white-space: normal;
    overflow: auto;
    margin: 0;
    transition: all 150ms ease-out;
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    -ms-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
}

#panel div.fancy-select ul.options li {
    color: #fff !important;
}

div.fancy-select ul.options li.hover {
    background: #f4f4f4;
}

#panel div.fancy-select ul.options li.hover {
    background: #0151a6;
}


div.fancy-select ul.options li.selected,
div.fancy-select ul.options li.selected.hover,
div.fancy-select ul.options li.selected:hover {
    background: #d4d4d4;
    color: #242424;
}

#panel div.fancy-select ul.options li.selected,
#panel div.fancy-select ul.options li.selected.hover,
#panel div.fancy-select ul.options li.selected:hover {
    background: #0151a6;
    color: #fff;
}

/** for wine filter **/
/*.winefilterpage div.fancy-select ul.options {
	background: #210c36;
	width: 100%;
	border:1px solid #cac19f;
	color: white;
	z-index: 1;
}

.winefilterpage div.fancy-select div.trigger {
	background: #210c36;
	border: 1px solid #cac19f;
	z-index: 2;
	color: white;
}

.winefilterpage div.fancy-select div.trigger:after {
	content: url(../images/icon_down.png);
}

.winefilterpage div.fancy-select ul.options li.hover {
	background: #341240;
}*/
