/* Container used for styling the custom select, the buttom class below adds the
 * bg gradient, corners, etc. */

 .custom-select {
    position: relative;
    display: block;
}
/* This is the native select, we're making everything but the text invisible so
 * we can see the button styles in the wrapper */

.custom-select select {
    width: 100%;
    margin: 0;
    outline: none;
    padding-left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Font size must be 16px to prevent iOS page zoom on focus */
    
    font-size: 1rem;
}
@media only all and (min-width: 40em) {
    .custom-select select {
        font-size: 1.25rem;
    }
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font,
 * etc. or the arrow could just baked into the bg image on the select. */

.custom-select::after {
    content: '';
    display: block;
    top: -webkit-calc(50% - 3px);
    top: calc(50% - 3px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #b2b2b2 transparent transparent transparent;
    position: absolute;
    right: 1em;
    z-index: 2;
    /* These hacks make the select behind the arrow clickable in some browsers */
    
    pointer-events: none;
}
/* Firefox <= 34 has a false positive on @supports( -moz-appearance: none )
 * @supports ( mask-type: alpha ) is Firefox 35+
 */

@supports (appearance: none) or (-moz-appearance: none) and (mask-type: alpha) {
    /* Show custom arrow */
    
    .custom-select::after {
        display: block;
    }
    /* Remove select styling */
    
    .custom-select select {
        padding-right: 2em;
        /* Match-01 */
        /* inside @supports so that iOS <= 8 display the native arrow */
        
        background: none;
        /* Match-04 */
        /* inside @supports so that Android <= 4.3 display the native arrow */
        
        border: 1px solid transparent;
        /* Match-05 */
        
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}