/*The container that holds the dropdown items*/
.mcs-container{
    	width:100%;
	    overflow:hidden;
        background:#222;
        box-sizing: border-box;
        display:none;
        position: relative;
        padding:10px;
        clear:both;
}

/*The menu items (options)*/
.mcs-open,
.mcs-item{
	box-sizing: border-box;
	background:#293b47;
	color:#FFF;    
	text-decoration: none;
	width:25%;
	float:left;
	height: 50px;
	line-height: 50px; 
	text-align: center;
	border:1px solid #111;
}

.mcs-item.multiline{
    line-height: initial;
    padding: 5px;
    padding-top:8px;
}

.mcs-open{
    line-height: 50px;
    border: 0;
    text-align: left;
    padding: 0 10px 0 40px;
	width:100%;
	margin-top:20px;
}

.mcs-open.open{
    background:#ffffff;
    color:#111;
}
.mcs-open.open:hover{
    background:#00ada9;
    color:#FFF;
}

.mcs-item.active{
	background:#e8e8e8;
	color:#222;
	border:1px solid #222;
}


.mcs-item:hover,
.mcs-open:hover{
background:#00ada9;
cursor:pointer;
}


/*Hide Select Form Control*/
.hidden{
	visibility: hidden;
	height: 0px;
	width:0px;
	position:absolute;
}

/*Clear class used to push float- can just point to an exsisting clear class*/
.clear{
	display:block;
	clear:both;
}
     

.mcs-item{
    font-size:1em;
        -moz-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(0.95) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transition: all 300ms ease;
        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
        -webkit-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
        text-shadow: -1px 1px 1px #141314;
        -webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
        box-shadow: 0 0 4px 1px rgba(0,0,0,0.4);
}
.mcs-item:hover{
        -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.mcs-item.active{
    text-shadow: 0 0 0 #FFF;
}
.mcs-item.active:hover{
    background:#FFF;
    text-shadow: 0 0 0 #FFF;
}