#categories-modal {}
.categories-open #categories-modal {
	background-color: rgba(0,0,0,.5);
	clip-path: inset(0 0 0 0);
	
	pointer-events: auto;
	visibility: visible;
	
	transition:
		clip-path  .6s cubic-bezier(0.38, 0.005, 0.215, 1),
		visibility  0s 0s;
}

/*--------------------------------------------------------------------------------------------------------------------*/

#categories-modal > .modal-wrapper {
	position: fixed; top: 0; right: 0;
	height: 100%; width: 100%; max-width: 700px; overflow: auto;
	
	background-color: #FF640B;
	clip-path: inset(0 0 0 100%);
}
@media (min-width: 782px)	 { .customize-support #categories-modal > .modal-wrapper { top: 32px; } }
@media (max-width: 781.99px) { .customize-support #categories-modal > .modal-wrapper { top: 46px; } }
.loaded #categories-modal > .modal-wrapper {
	transition: clip-path 0s linear .6s;
}
.categories-open #categories-modal > .modal-wrapper {
	clip-path: inset(0 0 0 0);
	transition: clip-path .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
}
@media (min-width: 900px)	 { #categories-modal > .modal-wrapper { padding: 150px 0 100px; } }
@media (max-width: 899.99px) { #categories-modal > .modal-wrapper { padding: 125px 0  25px; } }

/*--------------------------------------------------------------------------------------------------------------------*/

#categories-modal > .modal-wrapper > .categories-wrapper {
	position: relative; top: 50px;
	opacity: 0;
	
	color: #FFF;
}
.loaded #categories-modal > .modal-wrapper > .categories-wrapper {
	transition:
		top 	0s linear .6s,
		opacity 0s linear .6s;
}
.categories-open #categories-modal > .modal-wrapper > .categories-wrapper {
	top: 0;
	opacity: 1;
	transition:
		top 	.6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s,
		opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
}
@media (min-width: 900px)	 { #categories-modal > .modal-wrapper > .categories-wrapper { padding: 0 75px; } }
@media (max-width: 899.99px) { #categories-modal > .modal-wrapper > .categories-wrapper { padding: 0 25px; } }

/*--------------------------------------------------------------------------------------------------------------------*/

#categories-modal > .modal-wrapper > .categories-wrapper > .title {
	margin-bottom: 50px;
	
	text-transform: uppercase;
	font-family: 'Stretch Pro';
}
@media (min-width: 900px)	 { #categories-modal > .modal-wrapper > .categories-wrapper > .title { font-size: 24px; } }
@media (max-width: 899.99px) { #categories-modal > .modal-wrapper > .categories-wrapper > .title { font-size: 18px; } }

/*--------------------------------------------------------------------------------------------------------------------*/

#categories-modal > .modal-wrapper > .categories-wrapper > .categories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 15px;
}
#categories-modal > .modal-wrapper > .categories-wrapper > .categories > .category {
	position: relative;
	display: block;
	padding: 10px 35px 10px 60px;
	
	background-color: transparent;
	border: solid 1px #FFF;
	border-radius: 100px;
	
	color: #FFF;
	
	transition:
		background-color .4s ease-out,
		color			 .4s ease-out;
}
#categories-modal > .modal-wrapper > .categories-wrapper > .categories > .category:hover {
	background-color: #FFF;
	color: #FF640B;
}
#categories-modal > .modal-wrapper > .categories-wrapper > .categories > .category > .icon {
	position: absolute; top: 50%; left: 30px; transform: translateY(-50%);
	height: 20px; width: 20px;
}
#categories-modal > .modal-wrapper > .categories-wrapper > .categories > .category > .icon > img {
	height: 100%; width: 100%;
	
	object-fit: contain;
	object-position: center;
}
#categories-modal > .modal-wrapper > .categories-wrapper > .categories > .category > .label {
	line-height: 40px;
	font-size: 14px;
	font-weight: 700;
}