*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }


a {
	color: #1e6fa4;
	text-decoration: none;
	outline: none;
}

a:hover, a:focus {
	color: #125480;
	outline: none;
}

/* Demo themes */
.color-2 { background: #bbc7c8; color: #fff; }
.color-2 a { color: #566473; }
.color-2 a:hover, .color-2 a:focus { color: #34495e; }
.color-3 { background: #00b6ad; color: #fff; }
.color-3 a { color: #04706b; }
.color-3 a:hover, .color-3 a:focus { color: #03514d; }
.color-4 { background: #3b3f45; color: #f9f9f9; }
.color-4 a { color: #eb7e7f; }
.color-4 a:hover, .color-4 a:focus { color: #c56667; }
.color-5 { background: #f06d54; color: #fff; }
.color-5 a { color: #a35749; }
.color-5 a:hover, .color-5 a:focus { color: #6d3126; }
.color-6 { background: #f9f9f9; border-color: #f9f9f9; color: #62706c; }
.color-6::before, .color-6::after { background: #f9f9f9; }
.color-6 a { color: #1ecd97; }
.color-6 a:hover, .color-6 a:focus { color: #1ab585; }
.color-7 { background: #fffed8; color: #6bccb4; }
.color-7 a { color: #eb7e7f; }
.color-7 a:hover, .color-6 a:focus { color: #c36263; }
.color-8 { background: #415c71; color: #fefef8; }
.color-8 a { color: #7ad7ee; }
.color-8 a:hover, .color-8 a:focus { color: #539eb1; }

section {
	padding: 4% 1em 10%;
	text-align: center;
}

div.cs-skin-underline {
	background: transparent;
	font-size: 1em;
	max-width: 500px;
}

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

.cs-skin-underline > span {
	padding: 0.5em 3em 0.5em 0.5em;
	border-bottom: 3px solid #000;
	border-color: inherit;
	font-weight: bold;
}

.cs-skin-underline > span::after {
	font-family: 'fontawesome';
	content: '\f013';
	right: 0.25em;
	-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
	transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.cs-skin-underline.cs-active > span::after {
	-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg);
	transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg);
}

.cs-skin-underline .cs-options {
	background: #33b5e5;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.4s, visibility 0s 0.7s;
	transition: opacity 0.3s 0.4s, visibility 0s 0.7s;
}

.cs-skin-underline.cs-active .cs-options {
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.cs-skin-underline ul li{
		list-style: none;
}
.cs-skin-underline ul span {
	display: block;
	position: relative;
	text-transform: capitalize;
	font-size: 60%;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 1.2em 0.8em;
	opacity: 0;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	color: white;
}

.cs-select ul span::after {
	content: '';
	opacity: 0;
}

.cs-select .cs-selected span::after {
	font-family: 'fontawesome';
	content: '\f00c';
	font-size: 1.5em;
	opacity: 1;
	-webkit-transition: opacity 0.3s 0.7s;
	transition: opacity 0.3s 0.7s;
}

.cs-skin-underline ul span::before {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 0;
	height: 3px;
	width: 100%;
	background-color: #fff;
	-webkit-transform: translate3d(-200%,0,0);
	transform: translate3d(-200%,0,0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.cs-skin-underline.cs-active ul span,
.cs-skin-underline.cs-active ul span::before {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.cs-skin-underline li:nth-child(5) span,
.cs-skin-underline li:nth-child(5) span::before,
.cs-skin-underline.cs-active li:first-child span,
.cs-skin-underline.cs-active li:first-child span::before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.cs-skin-underline li:nth-child(4) span,
.cs-skin-underline li:nth-child(4) span::before,
.cs-skin-underline.cs-active li:nth-child(2) span,
.cs-skin-underline.cs-active li:nth-child(2) span::before {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.cs-skin-underline li:nth-child(3) span,
.cs-skin-underline li:nth-child(3) span::before {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.cs-skin-underline li:nth-child(2) span,
.cs-skin-underline li:nth-child(2) span::before,
.cs-skin-underline.cs-active li:nth-child(4) span,
.cs-skin-underline.cs-active li:nth-child(4) span::before {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.cs-skin-underline li:first-child span,
.cs-skin-underline li:first-child span::before,
.cs-skin-underline.cs-active li:nth-child(5) span,
.cs-skin-underline.cs-active li:nth-child(5) span::before {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
} /* more items require more delay declarations */

.cs-skin-underline .cs-options li span:hover,
.cs-skin-underline .cs-options li.cs-focus span,
.cs-skin-underline li.cs-selected span {
	
	background: transparent;
	background-color: #0099cc;
	text-shadow: black 0.1em 0.1em 0.2em;
}
ul.cs-skin-underline {
	list-style: none;
}
li.cs-skin-underline {
	list-style: none;
	font-size: 1em;
}
ul.cs-skin-underline li:before{
	content: none;
}