.ai-element{
	--uiaiElementDisplay: var(--aiElementDisplay, inline-flex);	
	--uiaiElementPadding: var(--aiElementPadding, var(--aiElementPaddingTop, 0) var(--aiElementPaddingRight, 0) var(--aiElementPaddingBottom, 0) var(--aiElementPaddingLeft, 0));
	--uiaiElementColor: var(--aiElementColor);

	display: var(--uiaiElementDisplay);
	position: relative;
	overflow: hidden;
}

a.ai-element{
	padding: var(--uiaiElementPadding);
}

button.ai-element{
	--rButtonPadding: var(--uiaiElementPadding);	
}

.ai-element__label{
	color: var(--uiaiElementColor);
}


.ai-element_type3 {
	--uiaiElementLineColor: var(--aiElementLineColor, #000);	
	--uiaiElementPadding: var(--aiElementPadding, 10px);
	transition: color .3s ease-out;
	z-index: 1;
}

.ai-element_type3::before, 
.ai-element_type3::after{
	content: "";
	background-color: var(--uiaiElementLineColor);	
	opacity: 1;
	position: absolute;
	z-index: -1;

	transition: transform .35s ease-out, opacity .35s ease-out .03s;
}




/*
=====
EFFECTS
=====
*/

/* effect 1 */

.ai-element1::before,
.ai-element1::after,
.ai-element1 .ai-element__label::before,
.ai-element1 .ai-element__label::after{
	transform: translate3d(0, 0, 0);
	transition-timing-function: ease-out;
	transition-duration: .2s, .15s;
}



/* effect 7 */

.ai-element7::before,
.ai-element7::after{
	width: 100%;
	height: 50%;
	left: 0;
	transform: translate3d(0, 0, 0);
}

.ai-element7::before{
	top: 0;
}

.ai-element7::after{
	bottom: 0;
}

.ai-element7:hover::before{
	transform: translate3d(0, -50%, 0);
}

.ai-element7:hover::after{
	transform: translate3d(0, 50%, 0); 
}

/* effect 8 */

.ai-element8::before,
.ai-element8::after{
	width: 51%;
	height: 100%;
	transform: rotate(0);
	top: 0;
}

.ai-element8::before{
	left: 0;
}

.ai-element8::after{
	right: 0;
}

.ai-element8:hover::before,
.ai-element8:hover::after{
	transform: rotate(360deg);
}

/* effect 9 */

.ai-element9::before,
.ai-element9::after{
	width: 51%;
	height: 100%;
	top: 0; 
	transform: translate3d(0, 0, 0);
}

.ai-element9::before{
	left: 0;
}

.ai-element9::after{
	right: 0;
}

.ai-element9:hover::before{
	transform: translate3d(-100%, 0, 0) rotate(-45deg);
}

.ai-element9:hover::after{
	transform: translate3d(100%, 0, 0) rotate(-45deg);	
}

/*
=====
DEMO STYLES
=====
*/




.section{
  display: flex;
  min-height: 300px;	
  text-align: center;
	
  font-size: 17px;
  font-weight: 700;
}

.section:nth-child(2n+1){
  background-color: #f1f4fa;
}

.section__item{
  margin: auto;
}

.section__box:nth-child(n+2){
  margin-top: 40px;
}

.ai-element:hover .ai-element__label{
	color: var(--uiaiElementColorHover);
}

/*
=====
SETTINGS
=====
*/

.ai-element{
	--aiElementLineWeight: 5px;
	--aiElementLineColor: #243aab;
	--aiElementColor: #1b255a;
	--aiElementColorHover: #243aab;
}

.ai-element_type1,
.ai-element_type3{
	--aiElementPadding: 10px 15px;
}

.ai-element_type3{
	--aiElementColor: #fff;
}