/*
			B.E.M Naming convention:
			(Block) .custom-dropdown			= The main component
			(Element) .custom-dropdown__select	= Descendant of .custom-dropdown
			(Modifier) .custom-dropdown--*		= Different state of .custom-dropdown
		*/

		
		.custom-dropdown--large {
			font-size: 1.2em;			
		}

		.custom-dropdown--small {
			font-size: .7em;
		}

		.custom-dropdown__select{
			font-size: inherit; /* inherit size from .custom-dropdown */
			padding: .5em; /* add some space*/
			margin: 0; /* remove default margins */
			width: 16em;
		}

		.custom-dropdown__select--white {
			background-color: #fff;
			color: #444;    
		}	
		
		.custom-dropdown__select--emerald {
			background-color: #85B135;
			color: #fff; 
			  
		}				

		.custom-dropdown__select--red {
			background-color: #d53a22;
			color: #fff;
		}

		@supports (pointer-events: none) and
				  ((-webkit-appearance: none) or
				  (-moz-appearance: none) or
				  (appearance: none)) {

			
			h2+p {
				color: #797979; /* Demo only */
			}

			.custom-dropdown {
				position: relative;
				display: inline-block;
				vertical-align: middle;
			}

			.custom-dropdown__select {
				padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */				
				border: 0;
				border-radius: 3px;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;    
			}

			.custom-dropdown::before,
			.custom-dropdown::after {
				content: "";
				position: absolute;
				pointer-events: none;
			}

			.custom-dropdown::after { /*  Custom dropdown arrow */
				content: "\25BC";
				height: 1em;
				font-size: .625em;
				line-height: 1;
				right: 1.2em;
				top: 50%; margin-top: -.5em;
			}

			.custom-dropdown::before { /*  Custom dropdown arrow cover */
				width: 2em;
				right: 0; top: 0; bottom: 0;
				border-radius: 0 3px 3px 0;
			}

			.custom-dropdown__select[disabled] {
				color: rgba(0,0,0,.3);
			}

			.custom-dropdown.custom-dropdown--disabled::after {
				color: rgba(0,0,0,.1);
			}

			/* White dropdown style */
			.custom-dropdown--white::before {
				top: .5em; bottom: .5em;
				background-color: #fff;
				border-left: 1px solid rgba(0,0,0,.1);
			}

			.custom-dropdown--white::after {
				color: rgba(0,0,0,.9);
			}					

			/* Emerald dropdown style */
			.custom-dropdown--emerald::before {
				background-color: #85B135;
			}

			.custom-dropdown--emerald::after {
				color: #fff;
			}


			/* Red dropdown style */
			.custom-dropdown--red::before {
				background-color: #d53a22;
			}

			.custom-dropdown--red::after {
				color: rgba(0,0,0,.4);
			}

			/* FF only temporary & ugly fixes */
			/* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */
			/* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
			@-moz-document url-prefix() {
				.custom-dropdown__select 						 { padding-right: .9em }
				.custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
				.custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
			}	

		}
     
	/* =====================================================================
                                Responsive Layout
======================================================================== */
@media (max-width: 479px) {
  .custom-dropdown--large {			
			font-size: 22px;					
  }
		.custom-dropdown__select{	
			width: auto;			
  }
}