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

/**
 * Including the at-only style with the dialog CSS as it is required
 * to visually hide a dialog's heading if desired.
 */
.at-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; width: 1px;
}

/**
 * Trigger styling
 */

button[data-modal-open][hidden] {
	display: none;
}

/**
 * When a modal dialog is open, don't allow scrolling of content
 * beneath (on desktop). Also useful in negating instances of
 * double scroll bars.
 * (browser window + dialog if long enough content)
 */
body.modal-open {
	overflow: hidden;
}

/* body.modal-open.bag-open,
body.modal-open.notification-visible {
  overflow: auto;
} */

body.modal-open:after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background-color: rgba(0,0,0,0.5);
}

/**
 * Modal Dialog base styling
 */
.js [data-modal],
.a11y-modal {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	transform: translateY(0%);
	visibility: visible;
	z-index: 10; /* this should be more than enough... */
	max-height: 100%;
	/* overflow: initial; */
	margin: auto;
	opacity: 1;
	-webkit-overflow-scrolling: touch;
}

#menu-modal {
	left: 0;
	width: 100%;
	padding: 10.5rem 1.125rem 1.125rem;
	background-color: #F96300;
	color: #fff;
}

#menu-modal .logo {
	top: 1.125rem;
}

@media screen and ( min-height: 440px ) and ( min-width: 500px ) {
	.js [data-modal],
	.a11y-modal {
		width: auto;
		/* transition: opacity .3s ease-in-out, transform .3s ease-in-out; */
	}
}

@media screen and (min-width: 37.5em) {

	#menu-modal {
		padding: 10.5rem 1.5rem 1.5rem;
	}

	#menu-modal .logo {
		top: 1.5rem;
	}

}

@media screen and (min-width: 56.25em) {

	#menu-modal {
		padding: 10.5rem 3rem 3rem;
	}

	#menu-modal .logo {
		top: 2.25rem;
	}

}


/**
 * To allow for CSS animations, hidden modal dialogs are
 * not set to display: none, but rather the following rule
 * set, in combination with the dialog's default
 * position: fixed, will keep dialogs hidden from
 * all users until opened.
 *
 * This also solves an issue with iOS VO + Safari not allowing
 * modal dialogs to be focused, if the dialog is initially
 * set to "display: none".
 */
.js [data-modal][hidden],
.a11y-modal[hidden] {
	display: block;
	pointer-events: none;
	/* transform: translateY(15vh); WHAT IS THIS FOR?!? */
	opacity: 0;
	visibility: hidden;
}

[data-modal-open="menu-modal"],
#menu-modal .a11y-modal__close-btn {
	position: absolute;
	right: 0;
    top: 0;
	height: auto;
	margin: 0 !important;
	padding: .75rem 1.125rem;
}

@media screen and (min-width: 37.5em) {

	[data-modal-open="menu-modal"],
	#menu-modal .a11y-modal__close-btn {
		padding: 1.125rem 1.5rem;
	}

}

@media screen and (min-width: 56.25em) {

	[data-modal-open="menu-modal"],
	#menu-modal .a11y-modal__close-btn {
		padding: 2.25rem 3rem;
	}

}

.is-icon-btn:hover [data-modal-x],
.is-icon-btn:focus [data-modal-x] {
  color: #111;
}

[data-modal-x] {
	border-right: 4px solid;
    bottom: 0;
    display: block;
    height: 2em;
    left: 0;
    margin: auto;
    pointer-events: none;
    position: relative;
    right: 0;
    top: 0;
    transform: rotate(45deg);
    width: 4px;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    transition: color .2s;
}

[data-modal-x]:after {
	border-right: 4px solid;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: rotate(-90deg);
	width: 100%;
}

/**
 * Menu
 */

#menu-modal nav {
	margin-left: -1.125rem;
	margin-right: -1.125rem;
}

#menu-modal a {
	color: #fff;
}

#menu-modal nav .current-menu-item:after,
#menu-modal nav .current_page_item:after {
	border: 0;
}

#menu-modal nav a {
	padding: 0 1.125rem;
}

#menu-modal nav a:focus {
	color: #fff;
}

#menu-modal .social-media {
	display: flex;
}

#menu-modal .social-media svg {
	height: 1.5rem;
	fill: #fff;
}


/**
 * Icons
 */

#menu-modal .a11y-modal__close-btn svg {
	fill: #fff;
}