/* ========================================= */
/* BUTTONS */
/* ========================================= */

.scooter-layer-buttons{
	display:flex;
	gap:20px;
	justify-content:center;
	margin:60px 0;
	flex-wrap:wrap;
}

.scooter-layer-buttons button{
	background:#b30000;
	color:#fff;
	border:none;
	padding:16px 28px;
	font-size:18px;
	cursor:pointer;
	transition:0.3s;
}

.scooter-layer-buttons button:hover{
	background:#000;
}

/* ========================================= */
/* LAYER */
/* ========================================= */

.scooter-layer{
	position:fixed;

	top:49px;
	left:-100%;

	width:100%;
	height:calc(100vh - 49px);

	background:#fff;

	z-index:9;

	transition:left 0.6s ease;

	display:flex;
	flex-direction:column;
}

.scooter-layer.active{
	left:0;
}

/* ===================================== */
/* TOP BAR */
/* ===================================== */

.layer-topbar{
	height:60px;

	background:#E9222D;

	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding:0 24px;

	flex-shrink:0;

	position:sticky;
	top:0;
	z-index:2;
}

/* ===================================== */
/* BUTTON */
/* ===================================== */

.close-layer{
	background:none;
	border:none;

	color:#fff;

	font-size:18px;
	font-family:'Oswald';

	cursor:pointer;
}

/* ===================================== */
/* IFRAME WRAPPER */
/* ===================================== */

.iframe-wrapper{
	height:100%;
	padding-top:60px;
	box-sizing:border-box;
}

/* ===================================== */
/* IFRAME */
/* ===================================== */

.scooter-layer iframe{
	width:100%;
	height:100%;

	border:none;

	display:block;
}
@media (max-width: 710px) {
	.scooter-layer{
		top: 39px;
		height:calc(100vh - 39px);
	}
}