@charset "utf-8";
/* CSS Document */

.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after,
.dropdown .carat,
.dropdown .carat:after,
.dropdown .selected::after,
.dropdown:after{
	-webkit-transition: all 150ms ease-in-out;	-moz-transition: all 150ms ease-in-out;	-ms-transition: all 150ms ease-in-out;transition: all 150ms ease-in-out;
}
.dropdown .selected::after,
.dropdown.scrollable div::after{
	-webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none;
}

/* WRAPPER */
.dropdown{ position: relative; width: 30%; cursor: pointer; background:#FFF; color: #000; -webkit-user-select: none; -moz-user-select: none; user-select: none; border:1px solid #000; display:inline-block; margin-right:-4px}
.dropdown.open{ z-index: 2; }
.dropdown:hover{ }
.dropdown:after{ content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent; }
@media only screen and (max-width:800px) {
	.dropdown {width: 100%;}
	}
/* CARAT */    
.dropdown .carat,
.dropdown .carat:after{
	content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; border: 6px solid transparent;
	border-top: 6px solid #000 ;/* z-index: 2;*/
	-webkit-transform-origin: 50% 20%; -moz-transform-origin: 50% 20%; -ms-transform-origin: 50% 20%; transform-origin: 50% 20%;
}
.dropdown .carat:after{ margin-top: -8px; right: -6px; border-top-color: #FFF; }
.dropdown:hover .carat:after{ border-top-color:  #FFF;}
.dropdown.focus .carat{ border-top-color: #666; }
.dropdown.focus .carat:after{ border-top-color: #fFFF; }
.dropdown.open .carat{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);  }

/* OLD SELECT (HIDDEN) */
.dropdown .old{ position: absolute;left: 0;top: 0;height: 0;width: 0; overflow: hidden;}
.dropdown select{position: absolute; left: 0px;top: 0px;}
.dropdown.touch .old{width: 100%;height: 100%;}
.dropdown.touch select{width: 100%;height: 100%;opacity: 0;}

/* SELECTED FEEDBACK ITEM */ 
.dropdown .selected {  color: #000; } 
.dropdown li{  color: #fff; } 
.dropdown .selected, .dropdown li{
	display: block; line-height: 100%;  font-size: .8rem; padding:1em; overflow: hidden; white-space: nowrap; width:100%; text-transform: inherit; font-weight:bold; } 
.dropdown .selected::after{
	content: ''; position: absolute;right: 0;top: 0;bottom: 0; width: 60px; border-radius: 0 2px 2px 0; background:  }
/* DROP DOWN WRAPPER */
.dropdown div{ position: absolute; height: 0; left: 0;right: 0; top: 100%; margin-top: -1px; background: #333; overflow: hidden;opacity: 0;}
/* Height is adjusted by JS on open */
.dropdown.open div{ opacity: 1; z-index: 2;}
/* FADE OVERLAY FOR SCROLLING LISTS */
.dropdown.scrollable div::after{ content: ''; position: absolute; left: 0; right: 0;bottom: 0; height: 50px; box-shadow: inset 0 -50px 30px -35px #f8f8f8;}
.dropdown.scrollable:hover div::after{ box-shadow: inset 0 -50px 30px -35px #f4f4f4; }
.dropdown.scrollable.bottom div::after{ opacity: 0;}
/* DROP DOWN LIST */
.dropdown ul{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden;}
.dropdown.scrollable.open ul{ overflow-y: auto;}
/* DROP DOWN LIST ITEMS */
.dropdown li{ list-style: none; padding: .75em;}
/* .focus class is also added on hover */
.dropdown li.focus{ background: rgba(255,255,255,.1); position: relative; z-index: 3; }
.dropdown li.active{ background: rgba(255,255,255,.3) ; color: #fff; }