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

@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:12px;
	font-family:tahoma;
}

.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%;
	font-family:tahoma!important
}

.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;
}

.cl-effect-2 a.thumbnail div.img {
	float:left;
}

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


.cl-effect-2 a.thumbnail div.cont {
	float:left;margin-left:130px!important;line-height:18px;
	font-family:thaisansbold;
	font-size:1.3rem;
	line-height:1.3rem;
}

div.thumbnail-list {
	display: block;
	width: 80px!important;
	height: 80px!important;
	text-align:center;
	border-radius: 0px;
	border:solid 0px #ccc;
	background: #e7e7e7;
    background-position: center center!important;
    background-size: cover!important;
	background-size: auto, 100% 100%!important;
	background-repeat:no-repeat!important;
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cove!important;
	background-size: cover!important;
	position: absolute!important;
	margin: 0 0 0 0px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;	
}

.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:hover h2,
.cl-effect-2 a:focus {
	color:#3CB5B5!important;
	text-decoration:none;
}

.cl-effect-2 h2 {
	color:#000!important;
	text-decoration:none;
}