.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; }

.dropdown { position: relative;  cursor: pointer; font-weight: 200; /*background: #f8f8f8;*/
	
-webkit-user-select: none; -moz-user-select: none; user-select: none; border: 1px solid #fff; background-image: url(../img/reservation/arrow.png); background-repeat: no-repeat; background-position: right; }
.dropdown.open { z-index: 2; }
.dropdown:hover { /*background: #f4f4f4;*/
}
.dropdown:after { content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent; }
.dropdown.focus:after { /*background: #0180d1;*/
}

.dropdown .carat, .dropdown .carat:after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; /*	border: 8px solid transparent;
	border-top: 8px 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: -10px; right: -8px;/*	border-top-color: #f8f8f8;*/ }
/*.dropdown:hover .carat:after{
	border-top-color: #f4f4f4;
}
*/
.dropdown.focus .carat { /*	border-top-color: #f8f8f8;*/
}
.dropdown.focus .carat:after { /*	border-top-color: #0180d1;*/
}
.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; }

.dropdown .selected, .dropdown li { display: block; font-size: 18px; line-height: 1; color: #fff; padding: 9px 12px; overflow: hidden; white-space: nowrap;  text-align:center;}
.dropdown .selected { color: #fff;  } 
.dropdown .selected::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px;/*border-radius: 0 2px 2px 0;
	box-shadow: inset -55px 0 25px -20px #f8f8f8;*/ }
.dropdown:hover .selected::after { /*box-shadow: inset -55px 0 25px -20px #f4f4f4;*/
}
/* DROP DOWN WRAPPER */

.dropdown div { position: absolute; left: 0; right: 0; top: 100%; margin-top: -1px;  overflow:  hidden; opacity: 0; }
.dropdown:hover div { }
/* Height is adjusted by JS on open */

.dropdown.open div { opacity: 1; z-index: 2; border: 1px solid #fff; }

.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; }

.dropdown ul { position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden;  background-image: url(../img/background/generalBg.png);}
.dropdown.scrollable.open ul { overflow-y: auto; }

.dropdown li { list-style: none; padding: 8px 12px; }

.dropdown li.focus {  position: relative; z-index: 3; color: #000; background-color:#FFF; }
