/* To Navigation Style */
section.link_effect {
	margin: 0 auto;
	padding: 0em 0em;
	text-align: left;
}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}

section.link_effect > nav a {
	position: relative;
	display: inline-block;
	margin: 0px 0px;
	outline: none;
	color: #40b0db;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1em;
}

section.link_effect > nav a:hover,
section.link_effect > nav a:focus {
	outline: none;
}

/* Effect 21: borders slight translate */
nav.cl-effect-0 {
	width:100%;
}

.cl-effect-0 a {
	padding: 10px 0px;
	font-weight: 700;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	display:block;
	width:100%;
	margin:0px 0px;
	font-size:1em;
}

.cl-effect-0 a::before,
.cl-effect-0 a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #66CCCC;
	
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(8px);
	-moz-transform: translateY(8px);
	transform: translateY(8px);
}

.cl-effect-0 a::before {
	top: 0;
	-webkit-transform: translateY(8px);
	-moz-transform: translateY(8px);
	transform: translateY(8px);
}

.cl-effect-0 a::after {
	bottom: 0;
	-webkit-transform: translateY(-8px);
	-moz-transform: translateY(-8px);
	transform: translateY(-8x);
}


.cl-effect-0 a:hover::before,
.cl-effect-0 a:focus::before,
.cl-effect-0 a:hover::after,
.cl-effect-0 a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}



/* Effect 1: borders slight translate */
nav.cl-effect-1 {
	width:100%;
}

.cl-effect-1 a {
	padding: 10px 0px;
	color: #333!important;
	color:#333!important;
	font-weight: normal!important;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	display:block;
	width:100%;
	margin:0px 0px;
	font-size:1em;
}

.cl-effect-1 a::before {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #f7f7f7;
	content: '';
}

.cl-effect-1 a span {
	margin-left:10px;
}

.cl-effect-1 a:last-child::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #f7f7f7;
	content: '';
}

.cl-effect-1 a:first-child{
	margin-top:0px;
}

.cl-effect-1 a:last-child{
	padding-bottom:10px;
	margin-bottom:0px;
}

.cl-effect-1 a::before {
	top: 0;
}

.cl-effect-1 a::after {
	bottom: 0;
}

.cl-effect-1 a:hover,
.cl-effect-1 a:focus {
	background: #f7f7f7;
	color:#000!important;
}


/* Effect 1: borders slight translate */
nav.cl-effect-2 {
	width:100%;
}

.cl-effect-2 a {
	padding: 10px 0px;
	color: #333!important;
	color:#000!important;
	font-weight: 700;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
	display:block;
	width:100%;
	margin:0px 0px;
	font-size:1em;
}

.cl-effect-2 a.thumbnail {
	letter-spacing:normal;
	height:60px;
}

.cl-effect-2 a::before {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #e3e3e3;
	content: '';
}

.cl-effect-2 a span {
	margin-left:0px;
}

.cl-effect-2 a span.icon {
	margin-right:0px;
	float:right;
	font-size:1em;
	color:#aaa;
}

.cl-effect-2 a:hover span.icon {
	color:#000;
}

.cl-effect-2 a:last-child::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 0px;
	background: #e3e3e3;
	content: '';
}

.cl-effect-2 a:first-child::before {
	position: absolute;
	left: 0;
	width: 100%;
	height: 0px;
	background: #e3e3e3;
	content: '';
}

.cl-effect-2 a:first-child {
	margin-top:0px;
}

.cl-effect-2 a:last-child{
	padding-bottom:10px;
	margin-bottom:0px;
}

.cl-effect-2 a::before {
	top: 0;
}

.cl-effect-2 a::after {
	bottom: 0;
}

.cl-effect-2 a:hover,
.cl-effect-2 a:focus {
	color:#000!important;
	color:#3CB5B5!important;
	text-decoration:none;
}