.riven-mobile-nav{
	display:none;
}

@media(max-width:767px){

	body{
		padding-bottom:100px;
	}

	.riven-mobile-nav{

		--active-left:50%;

		position:fixed;

		left:50%;
		bottom:20px;

		transform:translateX(-50%);

		width:calc(100% - 35px);
		max-width:430px;

		height:70px;

		display:flex;

		align-items:center;
		justify-content:space-between;

		padding-left:35px;
		padding-right:35px;

		background:#fff;

		border-radius:16px;

		box-shadow:
			0 20px 40px rgba(0,0,0,.18);

		z-index:99999;

		overflow:visible;
	}

	/*
	|--------------------------------------------------------------------------
	| Indicator
	|--------------------------------------------------------------------------
	*/

	.riven-mobile-nav-indicator{

		position:absolute;

		left:var(--active-left);

		top:-42px;

		width:70px;
		height:70px;

		transform:translateX(-50%);

		background:transparent;

		z-index:5;

		transition:left .35s cubic-bezier(.68,-.55,.27,1.55);

	}

	.riven-indicator-circle{

		position:absolute;

		inset:0;

		background:#9b35ef;

		border-radius:50%;

		border:8px solid #fff;

		z-index:3;

	}

	.riven-mobile-nav-indicator:before{

		content:"";

		position:absolute;

		top:25%;
		left:-24px;

		width:26px;
		height:26px;

		background:transparent;

		border-bottom-right-radius:25px;

		box-shadow:8px 8px 0 0 #fff;

	}

	.riven-mobile-nav-indicator:after{

		content:"";

		position:absolute;

		top:25%;
		right:-24px;

		width:26px;
		height:26px;

		background:transparent;

		border-bottom-left-radius:25px;

		box-shadow:-8px 8px 0 0 #fff;

	}

	/*
	|--------------------------------------------------------------------------
	| Nav Items
	|--------------------------------------------------------------------------
	*/

	.riven-mobile-nav-item{

		position:relative;

		flex:1;

		height:70px;

		display:flex;

		flex-direction:column;

		align-items:center;

		justify-content:center;

		text-decoration:none;

		color:#222;

		z-index:10;

	}

	.riven-nav-icon{

		display:flex;

		align-items:center;

		justify-content:center;

		transition:.35s ease;

	}

	.riven-nav-icon svg{

		width:26px;
		height:26px;

	}

	.riven-mobile-nav-item.active .riven-nav-icon{

		transform:translateY(-42px);

		color:#fff;

		z-index:20;

	}

	.riven-nav-label{

		position:absolute;

		bottom:20px;

		font-size:12px;

		font-weight:500;

		opacity:0;

		transform:translateY(10px);

		transition:.35s ease;

	}

	.riven-mobile-nav-item.active .riven-nav-label{

		opacity:1;

		transform:translateY(0);

	}

	/*
	|--------------------------------------------------------------------------
	| Badge
	|--------------------------------------------------------------------------
	*/

	.riven-nav-count{

		position:absolute;

		top:8px;

		right:14px;

		min-width:18px;

		height:18px;

		display:flex;

		align-items:center;

		justify-content:center;

		background:#dfff3c;

		color:#111;

		font-size:11px;

		font-weight:600;

		border-radius:20px;

		z-index:30;

	}

	.riven-mobile-nav-item.active .riven-nav-count{

		top:-35px;

		right:8px;

	}

}

/*
|--------------------------------------------------------------------------
| Panel Base
|--------------------------------------------------------------------------
*/

.riven-mobile-panel{

	position:fixed;

	display:flex;

	flex-direction:column;

	background:#fff;

	box-sizing:border-box;

	overflow:hidden;

	z-index:9998;

	transition:
		transform .35s cubic-bezier(.4,0,.2,1),
		opacity .3s ease;

	will-change:transform;

}

.riven-mobile-panel::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 5px;
    background: #ddd;
    border-radius: 20px;
}

.riven-mobile-panel .e-con>.e-con-inner {
	gap: 0px !important;
}

/*
|--------------------------------------------------------------------------
| Panel Header
|--------------------------------------------------------------------------
*/

.riven-panel-header{

	position:relative;

	padding: 32px 28px 20px;

	flex-shrink:0;

}


.riven-panel-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #777;
    margin-bottom: 5px;
}

.riven-panel-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #000;
}

.riven-panel-divider{

	height:1px;

	background:#ececec;

	flex-shrink:0;

}

/*
|--------------------------------------------------------------------------
| Panel Content
|--------------------------------------------------------------------------
*/

.riven-panel-content{

	flex:1;

	overflow-y:auto;

	-webkit-overflow-scrolling:touch;

	box-sizing:border-box;

	padding:32px 24px 120px;

}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.riven-panel-overlay{

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.45);

	opacity:0;

	visibility:hidden;

	z-index:9997;

	transition:.3s;

}

.riven-panel-overlay.active{

	opacity:1;

	visibility:visible;

}


/*
|--------------------------------------------------------------------------
| Bottom Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-bottom{

	left:0;

	right:0;

	bottom:0;

	transform:translateY(100%);

}

.riven-mobile-panel.animation-bottom.active{

	transform:translateY(0);

}

/*
|--------------------------------------------------------------------------
| Top Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-top{

	left:0;

	right:0;

	top:0;

	transform:translateY(-100%);

}

.riven-mobile-panel.animation-top.active{

	transform:translateY(0);

}

/*
|--------------------------------------------------------------------------
| Left Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-left{

	left:0;

	top:0;

	bottom:0;

	transform:translateX(-100%);

}

.riven-mobile-panel.animation-left.active{

	transform:translateX(0);

}

/*
|--------------------------------------------------------------------------
| Right Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-right{

	right:0;

	top:0;

	bottom:0;

	transform:translateX(100%);

}

.riven-mobile-panel.animation-right.active{

	transform:translateX(0);

}

/*
|--------------------------------------------------------------------------
| Fade Animation
|--------------------------------------------------------------------------
*/

.riven-mobile-panel.animation-fade{

	left:50%;

	top:50%;

	transform:
		translate(-50%,-50%)
		scale(.9);

	opacity:0;

}

.riven-mobile-panel.animation-fade.active{

	transform:
		translate(-50%,-50%)
		scale(1);

	opacity:1;

}

/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/

.riven-panel-close{

	position:absolute;

	top:20px;

	right:20px;

	z-index:20;

	display:flex;

	align-items:center;

	justify-content:center;

	width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
    aspect-ratio: 1 / 1;

	border:1px solid #ececec;

	border-radius:50%;

	background:#f8f8f8;

	cursor:pointer;

	color:#111;

	transition:
		background .25s ease,
		border-color .25s ease,
		transform .25s ease;

}


.riven-panel-close:hover{

	background:#efefef;

	border-color:#dcdcdc;

	transform:rotate(90deg);

}

.riven-panel-close svg{

	width:20px;

	height:20px;

}

.riven-panel-close svg path{

	fill:none;

	stroke:currentColor;

	stroke-width:2;

	stroke-linecap:round;

	stroke-linejoin:round;

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:767px){

	.riven-panel-handle{

		padding:12px 0 4px;

	}

	.riven-panel-handle span{

		width:64px;

		height:5px;

	}

	.riven-panel-header{

		padding:20px;

	}

	.riven-panel-subtitle{

		font-size:12px;

		letter-spacing:.14em;

	}

	.riven-panel-title{

		font-size:22px;

	}

	.riven-panel-content{

		padding:24px 20px 120px;

	}

	.riven-panel-close{

		top:16px;

		right:16px;

		width:42px;

		height:42px;

	}

	.riven-panel-close svg{

		width:18px;

		height:18px;

	}

}