*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

nav a {}

nav a:hover,
nav a:focus {
	outline: none;
}

/* Effect Menu nav: Brackets */
.cl-effect-menu a::before,
.cl-effect-menu a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-menu a::before {
	font-family: 'Font-Oj';
	content: "\e60d";
	font-size: 21px;
	margin-right: 10px;
	top:0;
	position: absolute;
	transform: translateX(-40px);
}

.cl-effect-menu a:hover::before,
.cl-effect-menu a:hover::after,
.cl-effect-menu a:focus::before,
.cl-effect-menu a:focus::after {
	font-weight: bold;
	opacity: 1;
	-webkit-transform: translateX(-24px);
	-moz-transform: translateX(-24px);
	transform: translateX(-24px);
}

/* Effect Buttons : reveal, push out */
button.button, a.button  {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding:0;
}

.effect1 span span, a.button > span {
	display: block;
	padding: 8px 14px 7px;
	background: #E6ECEF;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.effect1 > span::before, a.button.effect1::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	padding: 8px 14px 7px;
	width: 100%;
	height: 100%;
	background: #333;
	color: #fff;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-25%);
}

.effect1:hover span span,
.effect1:focus span span,
a.button.effect1:hover span,
a.button.effect1:focus span
{
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.effect1:hover > span::before,
.effect1:focus > span::before,
a.button.effect1:hover::before,
a.button.effect1:focus::before{
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
}


/* Effect normal link */
a.normalink {
	color: #000;
	text-shadow: none;
	text-decoration: none;
	position: relative;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
	padding: 2px 0;
	display: inline-block!important;
	width: auto;
	height: auto;
}
a.normalink span { padding:0; display: block;}

a.normalink::before {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 0;
	border-bottom: 1px solid #000;
	color: #969696;
	content: attr(data-hover);
	-webkit-transition: max-width 0.5s;
	-moz-transition: max-width 0.5s;
	transition: max-width 0.5s;
	padding: 2px 0;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	text-align: inherit;
	font-family: inherit;
	text-rendering: optimizeLegibility;
}
.header .quick-access .links a.normalink { color:#fff}
.header .quick-access .links a.normalink::before { border-bottom:1px solid #fff}

a.normalink:hover,
a.normalink:focus{
}

a.normalink:hover::before,
a.normalink:focus::before {
	max-width: 100%;
}

/* footer variante **/

.graybg a.normalink::before {
	color: #fff;
	border-bottom: 1px solid #fff;
}


/* mobile **/
a.mobile-link {
	color: #000;
	text-shadow: none;
	text-decoration: none;
	position: relative;
	padding: 2px 0;
	display: inline-block!important;
	width: auto;
	height: auto;
}

.graybg a.mobile-link {
	display: block;
	overflow: hidden;
	padding: 8px 2px;
	position: relative;
	text-decoration: none;
	z-index: 1;
	text-transform: uppercase;
	font-size: 14px;
}

.graybg a.mobile-link::before {
	background: #444;
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 100%;
	top: 0;
	-webkit-transition: right 0.4s;
	transition: right 0.4s;
	z-index: -1;
}

.graybg a.mobile-link::after {
	/*content: attr(href);*/
	color: #fff;
	float: right;
	opacity: 0;
	-webkit-transition: opacity 0.8s, -webkit-transform 0.4s;
	transition: opacity 0.8s, transform 0.4s;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}

.graybg a.mobile-link.touchevent::before { right: 0; }

.graybg a.mobile-link.touchevent::after {
	opacity: 0.5;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.footer .graybg a.mobile-link { width:100%; display: inline-block}