/* responsive-nav.css */

/* ... available variables ...
-----------------------------------------------*
Variables                       	Datatype 	Default value         	Description

--mm-color-background           	color    	#f3f3f3               	The background-color for the menu.
--mm-color-background-emphasis  	color    	rgba(255,255,255,0.4) 	The background-color for emphasized listitems.
--mm-color-background-highlight 	color    	rgba(0,0,0,,0.05)     	The background-color for highlighted listitems.
--mm-color-border               	color    	rgba(0,0,0,0.1)       	The border-color for navbars, listitems, etc.
--mm-color-icon                 	color    	rgba(0,0,0,0.3)       	The color for buttons.
--mm-color-text                 	color    	rgba(0,0,0,0.75)      	The text-color for the menu.
--mm-color-text-dimmed          	color    	rgba(0,0,0,0.3)       	The text-color for dimmed out elements in the menu.
--mm-lineheight                 	pixels   	22px                  	The line-height for the menu.
--mm-listitem-size              	pixels   	50px                  	The height for the listitems.
--mm-navbar-size                	pixels   	50px                  	The height for the navbars.
--mm-toggle-size                	pixels   	34px                  	The height for toggles.

/* ... available variables ... END
-----------------------------------------------*/



/* ... theme-dark as example ...
-----------------------------------------------*
.mm-menu--theme-dark {
  --mm-color-background          : #333;
  --mm-color-border              : rgb(0, 0, 0, 0.4);
  --mm-color-icon                : rgb(255, 255, 255, 0.4);
  --mm-color-text                : rgb(255, 255, 255, 0.8);
  --mm-color-text-dimmed         : rgb(255, 255, 255, 0.4);
  --mm-color-background-highlight: rgb(255, 255, 255, 0.08);
  --mm-color-background-emphasis : rgb(0, 0, 0, 0.1);
  --mm-color-focusring           : #06c
}
/* ... theme-dark as example ... END
-----------------------------------------------*/



/* ... custom theme ...
-----------------------------------------------*
.mm-menu {
  --mm-color-background          : #F08A38;
  --mm-color-border              : rgb(255,255,255, 0.6);
  --mm-color-icon                : rgb(255, 255, 255, 0.4);
  --mm-color-text                : rgb(255, 255, 255, 0.9);
  --mm-color-text-dimmed         : rgb(255, 255, 255, 0.6);
  --mm-color-background-highlight: rgb(255, 255, 255, 0.08);
  --mm-color-background-emphasis : rgb(0, 0, 0, 0.1);
  --mm-color-focusring           : #06c;

  --mm-lineheight                 :	22px;
  --mm-listitem-size              :	50px;
  --mm-navbar-size                :	50px;
  --mm-toggle-size                :	34px;
}
/* ... custom theme ... END
-----------------------------------------------*/



/* ... misc ...
-----------------------------------------------*/
.mm-wrapper {
	overflow-x: visible;
}
.mm-menu li {
  line-height: var(--mm-lineheight);
}
.mm-listitem--vertical > .mm-panel {
  padding-top: 0;
  padding-bottom: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-width: 1px 0 0;
}
/* ... misc ... END
-----------------------------------------------*/



.hamburger {
	display: none;
	position: fixed;
	top: 5px;
	right: 5px;
	background-color: rgba(255, 255, 255, .75);
	z-index: 1;
	cursor: pointer;
	padding: 0;
}
.mm_toggle {
  display: block;
  position: relative;
	width: 32px;
	height: 32px;
	overflow: hidden;
	text-indent: 32px;
  white-space: nowrap;
  z-index: 1;
}
.hamburger::after,
.mm_toggle::before,
.mm_toggle::after {
  content: '';
	position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 28px;
  height: 4px;
  background-color: #57585E;
	border-radius: 1px;
	transition: all .5s ease 0s;
}
.hamburger::after {
	top: 0;
  bottom: 0;
}
.mm_toggle::before {
  top: 5px;
}
.mm_toggle::after {
  bottom: 5px;
  margin: auto;
}
.mm-wrapper--opened .hamburger::after {
  width: 0;
  height: 0;
}
.mm-wrapper--opened .mm_toggle::before {
  transform: rotate(45deg);
  top: 0;
  bottom: 0;
}
.mm-wrapper--opened .mm_toggle::after {
  transform: rotate(-45deg);
  top: 0;
  bottom: 0;
}


#nav_mmenu {
	margin-bottom: 0;
}
#nav_mmenu a.instagram::before {
	left: auto;
	padding-right: .7em;
}



/* ... 959px width and less ...
-----------------------------------------------*/
@media(max-width: 959px) {
  .hamburger {
    display: block;
  }
  #mainnav {
    display: none;
  }
  header .servicenav,
  #mainnav_1,
  #mainnav_2 {
    display: none;
  }
  :is(#mainnav, #mainnav_1) .hide_in_menu {
    display: block;
  }
}
/* ... 959px width and less ... END
-----------------------------------------------*/



.slider-wrapper > div {
	background-color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slider-wrapper > div::after {
	content: '';
	background-image: linear-gradient(to bottom, transparent, rgba(0 0 0 / .8));
	inset: 0;
	position: absolute;
	z-index: 0;
  transition: all .5s;
}
.slider-wrapper > div:hover::after {
	transform: translateY(100%);
}
.slider-wrapper figure {
  margin: 0;
  display: block;
}
.slider-wrapper h2 {
	position: absolute;
	bottom: auto;
	top: unset;
	font-size: 3rem;
	color: white;
	margin: 0;
	z-index: 1;
}
.slider-wrapper p {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	color: white;
	z-index: 1;
}