/* Default custom select styles */
div.cs-select {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: left;
	z-index: 100;
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cs-select:focus {
	outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
	display: none !important;
}

.cs-select span {
	display: block;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Placeholder and selected option */

div.cs-active {
	z-index: 200;
}

/* Options */
.cs-select .cs-options {
	position: absolute;
	overflow: hidden;
	margin-left: -12px;
	width: 100%;
	visibility: hidden;
	box-sizing: content-box;
}

.cs-select.cs-active .cs-options {
	visibility: visible;
}
.cs-placeholder {
	text-indent: 5px;
	margin-bottom: 7px;
}
.cs-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.cs-select ul li {
	position: relative;
	box-sizing: content-box;
	width: 100%;
	border: 2px solid #e5e5e5;
	border-top: 0;
	background-color: #fff;
}
.cs-select ul li.cs-selected,
.cs-select ul li.cs-focus {background-color: #f2f2f2;}
.cs-select ul li:hover {background-color: #f9f9f9;}

.cs-select ul li span {
	padding: 15px 15px 15px 65px;
	text-transform: capitalize;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 40px;
	color: #1B1A1B;
}
.cs-select ul li:before {
	position: absolute;
	left: 15px;
	top: 15px;
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	height: 40px;
	background: inherit;
	background-color: inherit;
	color: inherit;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup > span {
	cursor: default;
}

div.cs-skin-elastic {
	display: block;
	width: 100%;
	height: 42px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
	background-color: #FFF;
	padding: 5px 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: #1B1A1B;
	border: 2px solid #e5e5e5;
    text-indent: 0.01px;
    text-overflow:'';
    background: #FFF url('../../../images/sprite-select.jpg') center right no-repeat;
    background-size: 42px 42px;
    cursor: pointer;
}
div.cs-skin-elastic::-ms-expand {display:none;}

@media screen and (max-width: 30em) {
	div.cs-skin-elastic { font-size: 1em; }
}

.cs-skin-elastic > span {
	z-index: 100;
}

.cs-skin-elastic .cs-options {
	overflow: visible;
	background: transparent;
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

.cs-skin-elastic.cs-active .cs-options {
	pointer-events: auto;
}

.cs-skin-elastic .cs-options > ul::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-transform: scale3d(1,0,1);
	transform: scale3d(1,0,1);
	background: #fff;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.cs-skin-elastic.cs-active .cs-options > ul::before {
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition: none;
	transition: none;
	-webkit-animation: expand 0.6s ease-out;
  	animation: expand 0.6s ease-out;
}

.cs-skin-elastic .cs-options ul li {
	opacity: 0;
	-webkit-transform: translate3d(0,-25px,0);
	transform: translate3d(0,-25px,0);
	-webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
	transition: opacity 0.15s, transform 0.15s;
}

.cs-skin-elastic.cs-active .cs-options ul li {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 1;
	-webkit-transition: none;
	transition: none;
	-webkit-animation: bounce 0.6s ease-out;
  	animation: bounce 0.6s ease-out;
}

@-webkit-keyframes expand {
	0% { -webkit-transform: scale3d(1,0,1); }
	25% { -webkit-transform: scale3d(1,1.2,1); }
	50% { -webkit-transform: scale3d(1,0.85,1); }
	75% { -webkit-transform: scale3d(1,1.05,1) }
	100% { -webkit-transform: scale3d(1,1,1); }
}

@keyframes expand {
	0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); }
	25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); }
	50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); }
	75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); }
	100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}


@-webkit-keyframes bounce {
	0% { -webkit-transform: translate3d(0,-25px,0); opacity:0; }
	25% { -webkit-transform: translate3d(0,10px,0); }
	50% { -webkit-transform: translate3d(0,-6px,0); }
	75% { -webkit-transform: translate3d(0,2px,0); }
	100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes bounce {
	0% { -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); opacity:0; }
	25% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
	50% { -webkit-transform: translate3d(0,-6px,0); transform: translate3d(0,-6px,0); }
	75% { -webkit-transform: translate3d(0,2px,0); transform: translate3d(0,2px,0); }
	100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; }
}

/* COLORS */
.cs-select ul li.blue:before {background-color: #00F;}
.cs-select ul li.red:before {background-color: #F00;}
.cs-select ul li.green:before {background-color: #0F0;}
.cs-select ul li.yellow:before {background-color: #FF0;}
.cs-select ul li.magenta:before {background-color: #F0F;}
.cs-select ul li.light-blue:before {background-color: #0FF;}
.cs-select ul li.black:before {background-color: black;}