Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="header">
	<img class="header__logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/295139/kfmlogo.svg" alt="KFM">
	<div class="header__menubar">
		<nav class="optionsmenu">
			<button class="btn optionsmenu__toggle" type="button">Options <i class="fas fa-list-ul"></i></button>
			<ul class="optionsmenu__menu">
				<li><button class="btn optionsmenu__btn show-loadsave" type="button">Load/Save Plans <i class="far fa-save"></i></button></li>
				<li><button data-modal="pan360" class="btn optionsmenu__btn show-modal" type="button">Pan360&deg; <i class="fas fa-sync-alt"></i></button></li>
				<li><button class="btn optionsmenu__btn" type="button">Print <i class="fas fa-print"></i></button></li>
				<li><button class="btn optionsmenu__btn" type="button">My Account <i class="far fa-user"></i></button></li>
			</ul>					
		</nav>
		<nav class="primarymenu">
			<button class="btn primarymenu__btn show-breakdown" type="button">Item Breakdown <i class="fas fa-shopping-basket"></i></button>
			<button class="btn primarymenu__btn primarymenu__btn--main" type="button">Add to Basket <i class="fas fa-shopping-cart"></i></button>
		</nav>
	</div>
	
	<div class="header__menubar header__menubar--secondary">
		<div class="search">
			<button class="btn search__toggle" type="button">Search <i class="fas fa-search"></i></button>
			<div class="search__content">
				<label class="search__label" for="search">Search</label>
				<input placeholder="keyword" type="text" class="search__input" id="search"><button class="btn search__clear" data-ember-action="" data-ember-action-556="556"><i class="fas fa-times"></i></button>
				<input type="checkbox" id="exactmatch">
				<label for="exactmatch" class="search__label search__label--small">Exact Match?</label>
			</div>
		</div>
		<nav class="toolsmenu">
			<button class="btn toolsmenu__toggle" type="button">Tools <i class="fas fa-cog"></i></button>
			
			<ul class="toolsmenu__menu">
				<li><button class="btn toolsmenu__btn" type="button">Fit to Screen <i class="fas fa-expand"></i></button></li>
				<li><button class="btn toolsmenu__btn disable-pan" type="button">Disable Pan <i class="fas fa-arrows-alt"></i></button></li>
				<li><button class="btn toolsmenu__btn" type="button">Lock Walls <i class="fas fa-lock"></i></button></li>
				<li class="toolsmenu__zoom"><i class="fas fa-search-plus"></i><input name="zoom" type="range" /><i class="fas fa-search-minus"></i></li>
				<li><button class="btn toolsmenu__btn show-modal" data-modal="inserttext" type="button">Insert Text <i class="fas fa-text-height"></i></button></li>
				<li><button class="btn toolsmenu__btn" type="button">Draw Line <i class="fas fa-long-arrow-alt-up"></i></button></li>
				<li><button class="btn toolsmenu__btn" type="button">Undo <i class="fas fa-undo"></i></button></li>
				<li><button class="btn toolsmenu__btn" type="button">Redo <i class="fas fa-redo"></i></button></li>
			</ul>
		</nav>
	</div>
</header>

<aside class="sidemenu active">
	<nav class="rangemenu">
		<button class="btn rangemenu__toggle" type="button">Range / Colours <i class="fas fa-palette"></i><span><i class="fas fa-chevron-down"></i></span></button>
		<ul class="rangemenu__menu">
			<li>
				<label class="rangemenu__label">Range</label>
				<select class="rangemenu__select">
					<option value="41199">Boston</option>
					<option value="41201">Cambridge</option>
					<option value="41203">Cartmel</option>
					<option value="41206">Denton</option>
					<option selected value="41209">Lucente Gloss</option>
					<option value="41210">Lucente Hand Painted</option>
					<option value="41208">Lucente Matt</option>
					<option value="41211">Lusso</option>
					<option value="41212">Moda</option>
					<option value="41214">Oxford</option>
					<option value="41215">Portland</option>
					<option value="41217">Richmond</option>
					<option value="41219">Vivo Gloss</option>
					<option value="65958">Vivo Gloss for VERO System</option>
					<option value="41220">Vivo Matt</option>
					<option value="65959">Vivo Matt for VERO System</option>
					<option value="41221">Windsor</option>
				</select>
			</li>
			<li>
				<label class="rangemenu__label">Colour</label>
				<select class="rangemenu__select">
					<option value="218">Anthracite</option>
					<option value="219">Cashmere</option>
					<option value="48">Cream</option>
					<option value="51">Light Grey</option>
					<option value="214">Pavilion</option>
					<option value="220">Porcelain</option>
					<option value="37">Primed</option>
					<option value="215">Stone</option>
					<option selected value="47">White</option>
				</select>						
			</li>
			<li>
				<label class="rangemenu__label">Cabinet Colour</label>
				<select class="rangemenu__select">
					<option>White</option>
					<option>Ivory</option>
					<option>Stone Grey</option>
					<option>Oak</option>
				</select>						
			</li>
		</ul>
	</nav>
	<nav class="mainmenu">
		<ul>
			<li>
				<button class="btn mainmenu__step" type="button">Step 1: Plan Your Room <i class="fas fa-chevron-down"></i></button>
				<div class="mainmenu__options">
					<ul class="category">	
						<li>
							<img class="category__img" title="Custom Room Shape ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/is.png">
							<span class="category__label">Custom Room Shape</span>
						</li>
						<li>
							<img class="category__img" title="East Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/recess.png">
							<span class="category__label">East Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="East Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofeast.png">
							<span class="category__label">East Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="East Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeE.png">
							<span class="category__label">East Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagne.png">			<span class="category__label">NE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshape.png">
							<span class="category__label">NE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="North Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapenorth.png">
							<span class="category__label">North Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="North Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofnorth.png">
							<span class="category__label">North Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="North Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeN.png">
							<span class="category__label">North Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagnw.png">			<span class="category__label">NW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindnw.png">
							<span class="category__label">NW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="Rectangle Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/rectangle.png">
							<span class="category__label">Rectangle Space</span>
						</li>
						<li>
							<img class="category__img" title="SE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagse.png">			<span class="category__label">SE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindse.png">
							<span class="category__label">SE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="South Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapesouth.png">
							<span class="category__label">South Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="South Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofsouth.png">
							<span class="category__label">South Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="South Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeS.png">
							<span class="category__label">South Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="Square Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/square.png">
							<span class="category__label">Square Space</span>
						</li>
						<li>
							<img class="category__img" title="SW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagsw.png">			<span class="category__label">SW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindsw.png">
							<span class="category__label">SW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="West Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapeeast.png">
							<span class="category__label">West Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="West Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofwest.png">
							<span class="category__label">West Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="West Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeW.png">
							<span class="category__label">West Recess Space</span>
						</li>
					</ul>
				</div>
			</li>
			<li>
				<button class="btn mainmenu__step" type="button">Step 2: Build Your Kitchen <i class="fas fa-chevron-down"></i></button>
				<div class="mainmenu__options">
					<ul class="category">
						<li>
							<img class="category__img" title="East Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/recess.png">
							<span class="category__label">East Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="East Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofeast.png">
							<span class="category__label">East Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="East Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeE.png">
							<span class="category__label">East Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagne.png">			<span class="category__label">NE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshape.png">
							<span class="category__label">NE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="North Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapenorth.png">
							<span class="category__label">North Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="North Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofnorth.png">
							<span class="category__label">North Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="North Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeN.png">
							<span class="category__label">North Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagnw.png">			<span class="category__label">NW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindnw.png">
							<span class="category__label">NW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="Rectangle Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/rectangle.png">
							<span class="category__label">Rectangle Space</span>
						</li>
						<li>
							<img class="category__img" title="SE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagse.png">			<span class="category__label">SE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindse.png">
							<span class="category__label">SE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="South Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapesouth.png">
							<span class="category__label">South Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="South Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofsouth.png">
							<span class="category__label">South Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="South Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeS.png">
							<span class="category__label">South Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="Square Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/square.png">
							<span class="category__label">Square Space</span>
						</li>
						<li>
							<img class="category__img" title="SW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagsw.png">			<span class="category__label">SW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindsw.png">
							<span class="category__label">SW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="West Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapeeast.png">
							<span class="category__label">West Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="West Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofwest.png">
							<span class="category__label">West Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="West Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeW.png">
							<span class="category__label">West Recess Space</span>
						</li>
					</ul>
				</div>
			</li>
			<li>
				<button class="btn mainmenu__step" type="button">Step 3: Accessories <i class="fas fa-chevron-down"></i></button>
				<div class="mainmenu__options">
					<ul class="category">
						<li>
							<img class="category__img" title="East Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofeast.png">
							<span class="category__label">East Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="East Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeE.png">
							<span class="category__label">East Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagne.png">			<span class="category__label">NE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshape.png">
							<span class="category__label">NE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="North Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapenorth.png">
							<span class="category__label">North Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="North Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofnorth.png">
							<span class="category__label">North Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="North Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeN.png">
							<span class="category__label">North Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagnw.png">			<span class="category__label">NW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindnw.png">
							<span class="category__label">NW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="Rectangle Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/rectangle.png">
							<span class="category__label">Rectangle Space</span>
						</li>
						<li>
							<img class="category__img" title="SE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagse.png">			<span class="category__label">SE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindse.png">
							<span class="category__label">SE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="South Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapesouth.png">
							<span class="category__label">South Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="South Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofsouth.png">
							<span class="category__label">South Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="South Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeS.png">
							<span class="category__label">South Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="Square Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/square.png">
							<span class="category__label">Square Space</span>
						</li>
						<li>
							<img class="category__img" title="SW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagsw.png">			<span class="category__label">SW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindsw.png">
							<span class="category__label">SW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="West Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapeeast.png">
							<span class="category__label">West Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="West Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofwest.png">
							<span class="category__label">West Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="West Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeW.png">
							<span class="category__label">West Recess Space</span>
						</li>
					</ul>
				</div>
			</li>
			<li>
				<button class="btn mainmenu__step" type="button">Step 4: Finishing Touches <i class="fas fa-chevron-down"></i></button>
				<div class="mainmenu__options">
					<ul class="category">
						<li>
							<img class="category__img" title="East Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeE.png">
							<span class="category__label">East Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagne.png">			<span class="category__label">NE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshape.png">
							<span class="category__label">NE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="North Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapenorth.png">
							<span class="category__label">North Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="North Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofnorth.png">
							<span class="category__label">North Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="North Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeN.png">
							<span class="category__label">North Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="NW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagnw.png">			<span class="category__label">NW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="NW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindnw.png">
							<span class="category__label">NW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="Rectangle Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/rectangle.png">
							<span class="category__label">Rectangle Space</span>
						</li>
						<li>
							<img class="category__img" title="SE Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagse.png">			<span class="category__label">SE Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SE L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindse.png">
							<span class="category__label">SE L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="South Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapesouth.png">
							<span class="category__label">South Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="South Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofsouth.png">
							<span class="category__label">South Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="South Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeS.png">
							<span class="category__label">South Recess Space</span>
						</li>
						<li>
							<img class="category__img" title="Square Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/square.png">
							<span class="category__label">Square Space</span>
						</li>
						<li>
							<img class="category__img" title="SW Diagonal Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/diagsw.png">			<span class="category__label">SW Diagonal Space</span>
						</li>
						<li>
							<img class="category__img" title="SW L-Shape Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/lshapeindsw.png">
							<span class="category__label">SW L-Shape Space</span>
						</li>
						<li>
							<img class="category__img" title="West Buttress Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/tshapeeast.png">
							<span class="category__label">West Buttress Space</span>
						</li>
						<li>
							<img class="category__img" title="West Clipped Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/roofwest.png">
							<span class="category__label">West Clipped Space</span>
						</li>
						<li>
							<img class="category__img" title="West Recess Space ()" src="http://kfm.bbi.agency/roomviewer-tkc/assets/arp/page_images/common/3ds/roomshapes/ushapeW.png">
							<span class="category__label">West Recess Space</span>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</nav>
	
	<button class="btn sidemenu__toggle" type="button"><i class="fas fa-chevron-right"></i></button>
</aside>

<div class="item-breakdown full-page">
	<div class="full-page__wrap">
		<div class="full-page__container">
			<div class="full-page__head">
				<h2>Item Breakdown</h2>
				<span>28 Items</span>
				<span>Subtotal £1225.50</span>
				
				<div class="full-page__actions">
					<button type="button" class="btn btn--primary">Add to Basket <i class="fas fa-shopping-cart"></i></button>
					<button type="button" class="btn btn--secondary show-breakdown">Close</button>
				</div>
			</div>

			<table class="item-breakdown__table">
				<thead>
					<tr>
						<th>Qty</th>
						<th>Sku</th>
						<th>Description</th>
						<th>Item Price(£)</th>
						<th>Total Price(£)</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
					<tr>
						<td>1</td>
						<td>J218WBEL455</td>
						<td>455mm Belfast Sink Unit</td>
						<td>£225.50</td>
						<td>£225.50</td>
						<td><button type="button" class="btn btn--secondary">Delete</button></td>
					</tr>
				</tbody>
			</table>
			
			<div class="item-breakdown__options">
				
				<div class="item-breakdown__accessories">
					<h3>Add Your Accessories</h3>
					<p>
						<label>Cornices</label>
						<input type="number" value="0" min="0">
					</p>
					<p>
						<label>Plinths</label>
						<input type="number" value="0" min="0">
					</p>
					<p>
						<label>Pelmets</label>
						<input type="number" value="0" min="0">
					</p>
				</div>

				<div class="item-breakdown__totals">
					<h3>Subtotal<span>£1225.50</span></h3>
					
					<p>
						<label>Installation</label>
						<input type="tel" value="450.00">
					</p>
					<p>
						<label>Miscellaneous</label>
						<input type="tel" value="50.00">
					</p>
					<p>
						<label>Discount</label>
						<input type="tel" value="100.00">
					</p>
					<p class="item-breakdown__total">
						<label>Total</label>
						<span>£1625.00</span>
					</p>
				</div>

			</div>

		</div>
	</div>
</div>
		
<div class="loadsave full-page">
	<div class="full-page__wrap">
		<div class="full-page__container">
			<div class="full-page__head">
				<h2>Save Your Plan</h2>
				
				<div class="full-page__actions">
					<button type="button" class="btn btn--tertiary">Save <i class="far fa-save"></i></button>
					<button type="button" class="btn btn--secondary show-loadsave">Close</button>
				</div>
			</div>
			
			<div class="newplan">
				<div class="newplan__col">
					<label class="newplan__label">Plan Reference</label>
					<input class="newplan__select" type="text" placeholder="Your Reference">
				</div>

				<div class="newplan__col">
					<label class="newplan__label">Customer Name <span>(optional)</span></label>
					<input class="newplan__select" type="text" placeholder="E.g. Mrs Smith">
				</div>

				<div class="newplan__col">
					<label class="newplan__label">Customer Address <span>(optional)</span></label>
					<input class="newplan__select" type="text" placeholder="E.g. 123 Test Road">
				</div>

				<div class="newplan__col">
					<button type="button" class="btn btn--tertiary">Create New Plan</button>
				</div>
			</div>
			
			<div class="loadplan">
				<h2>Load Plan</h2>
				
				<table class="loadplan__table">
					<thead>
						<tr>
							<th>Plan Reference</th>
							<th>Customer Name</th>
							<th>Customer Address</th>
							<th>Plan ID</th>
							<th>Created Date</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
						<tr>
							<td>REF123</td>
							<td>Mrs Smith</td>
							<td>123 Test Road</td>
							<td>1</td>
							<td>01/05/18 16:00</td>
							<td><button type="button" class="btn btn--secondary">Delete</button></td>
						</tr>
					</tbody>
				</table>
			</div>
			
		</div>
	</div>
</div>


<main class="plan show-modal" data-modal="item"></main>

<div class="modalbg"></div>

<div class="modal modal--narrow modal--autosave">
	<button class="modal__close js-modal-close">X</button>
	<div class="modal__cols">
		<h2>Save Your Plan</h2>
		<p>Enter the plan details to automatically save your plan as you make changes.</p>
	</div>
	
	<div class="modal__cols">
		<label class="modal__label">Plan Reference</label>
		<input class="modal__select" type="text" placeholder="Your Reference">
	</div>
	
	<div class="modal__cols">
		<label class="modal__label">Customer Name <span>(optional)</span></label>
		<input class="modal__select" type="text" placeholder="E.g. Mrs Smith">
	</div>
	
	<div class="modal__cols">
		<label class="modal__label">Customer Address <span>(optional)</span></label>
		<input class="modal__select" type="text" placeholder="E.g. 123 Test Road">
	</div>
	
	<div class="modal__cols">
		<button type="button" class="btn btn--primary">Save</button>
		<button type="button" class="btn btn--secondary js-modal-close">Cancel</button>
	</div>
</div>

<div class="modal modal--pan360">
	<button class="modal__close js-modal-close">X</button>

	<div class="modal__cols">

		<div class="modal__col">
			<h2>Pan360&deg; <i class="fas fa-sync-alt"></i></h2>
		</div>

		<div class="modal__col">
			<span class="modal__label">Image Quality</span>
			<input checked="checked" id="imagequality1" name="imagequality" type="radio">
			<label for="imagequality1" class="modal__label modal__label--inline">High (Slow)</label>
			<input id="imagequality2" name="imagequality" type="radio">
			<label for="imagequality2" class="modal__label modal__label--inline">Low (Fast)</label>			
		</div>

	</div>

	<div class="modal__cols">
		
		<div class="modal__col">
			<label class="modal__label">Render Worktop</label>
			<select class="modal__select">
				<option>Andromeda Black</option>
				<option>White</option>
			</select>
		</div>
		
		<div class="modal__col">
			<label class="modal__label">Render Handles</label>
			<select class="modal__select">
				<option>Handleless</option>
				<option>White</option>
			</select>
		</div>

	</div>
	
	<div class="modal__cols pan360">
		<p>Panoramic image not generated.<br>
		Click Below to create panoramic image.</p>
	</div>
	
	<div class="modal__cols">
		<button type="button" class="btn btn--primary">Create Panoramic 360</button>
		<button type="button" class="btn btn--secondary js-modal-close">Cancel</button>
		<a href="#" class="btn btn--right btn--secondary js-modal-close">Open in New Window</a>
	</div>
	
	<div class="modal__cols">
    	<p class="modal__label">Share Panoramic 360</p>
		<button type="button" class="btn btn--secondary btn--first">Copy Link</button>
		<button type="button" class="btn btn--secondary">Email Link</button>
	</div>
</div>

<div class="modal item modal--item">
	<button class="modal__close js-modal-close">X</button>

	<div class="modal__cols">

		<div class="modal__col">
			<img class="item__imge" src="https://portal.kitchenfittersmate.co.uk/media/catalog/product/cache/2/image/1000x707/9df78eab33525d08d6e5fb8d27136e95/X/X/XXXBASE800_LARGE_50.jpg" alt="1000mm Base">
		</div>

		<div class="modal__col">
			<h2>1000mm Base</h2>
			
			<label class="modal__label">Ground Height</label>
			<input class="modal__select" type="text" value="0">
			
			<label class="modal__label">Start Distance</label>
			<input class="modal__select" type="text" value="3500">
			
			<label class="modal__label">Range</label>
			<select class="modal__select">
				<option>Lucente High Gloss</option>
			</select>

			<label class="modal__label">Colour</label>
			<select class="modal__select">
				<option>White</option>
			</select>
			
			<div class="modal__radio-group">
				<span class="modal__label">Include End Panel</span>
				<input id="endpanel1" name="endpanel" type="radio">
				<label for="endpanel1" class="modal__label modal__label--inline">Left</label>
				<input id="endpanel2" name="endpanel" type="radio">
				<label for="endpanel2" class="modal__label modal__label--inline">Right</label>
				<input id="endpanel3" name="endpanel" type="radio" checked="checked">
				<label for="endpanel3" class="modal__label modal__label--inline">None</label>
			</div>
			
			<div class="modal__radio-group">
				<span class="modal__label">Include Hinging</span>
				<input id="hinging1" name="hinging" type="radio" checked="checked">
				<label for="hinging1" class="modal__label modal__label--inline">Left</label>
				<input id="hinging2" name="hinging" type="radio">
				<label for="hinging2" class="modal__label modal__label--inline">Right</label>
			</div>
			
			<div class="modal__button-group">
			
				<button type="button" class="btn btn--primary">Apply</button>
				<button type="button" class="btn btn--secondary js-modal-close">Cancel</button>
				<button type="button" class="btn btn--secondary">Remove</button>
			</div>
		</div>

	</div>

</div>

<div class="modal modal--narrow modal--inserttext">
	<button class="modal__close js-modal-close">X</button>
	<div class="modal__cols">
		<h2>Insert Text</h2>
	</div>
	
	<div class="modal__cols">
		<div class="modal__col">
			<label class="modal__label">Font</label>
			<select class="modal__select">
				<option>Arial</option>
			</select>
		</div>
		<div class="modal__col">
			<label class="modal__label">Font Size</label>
			<select class="modal__select">
				<option>8px</option>
			</select>
		</div>
	</div>
	
	<div class="modal__cols">
		<label class="modal__label">Text To Add</label>
		<input class="modal__select" type="text" placeholder="Enter Your Text Here">
	</div>
	
	<div class="modal__cols">
		<button type="button" class="btn btn--primary">Add</button>
		<button type="button" class="btn btn--secondary js-modal-close">Cancel</button>
	</div>
</div>

<!--
	TODO:
	- "Exit Line drawing mode" button 
	- "Delete Line Drawing" button 
	- "New Plan when there's an existing prompt" 
-->
              
            
!

CSS

              
                $blue: #293138;
$orange: #F49C24;
$lightgrey: #EEE;
$midgrey: #DDD;

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

// Utilities
.btn {
	border: none;
	text-transform: uppercase;
	cursor: pointer;
	font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
	font-weight: 600;
	transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
	padding: 0;
	background: transparent;
	
	&--primary {
		background: $orange;
		color: #fff;
		padding: 1.5rem 2.5rem;
		font-size: 3rem;
		
		&:hover {
			background: $blue;
		}
	}
	
	&--secondary {
		background: transparent;
		color: $blue;
		padding: 1.5rem 2.5rem;
		font-size: 2rem;
		text-decoration: underline;
		
		&:hover {
			background: transparent;
			color: $orange;
		}
	}
	
	&--first {
		padding-left: 0;
	}
	
	&--right {
		margin-left: auto;
		padding-right: 0;
	}
	
	&--tertiary {
		background: $orange;
		color: #fff;
		padding: 1.5rem 2.5rem;
		font-size: 2rem;
		
		&:hover {
			background: $blue;
		}
	}
}

html {
	font-size: 2vw;
	font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
    font-weight: 400;
	
	@media (min-width: 280px) {
		font-size: 6px;
	}
	
	@media (min-width: 400px) {
		font-size: 7px;
	}
	
	@media (min-width: 768px) {
		font-size: 8px;
	}
	
	@media (min-width: 1024px) {
		font-size: 8px;
	}
	
	@media (min-width: 1920px) {
		font-size: 9px;
	}
}

.header {
	width: 100%;
	position: relative;
	
	&__logo {
		width: 13 * 0.75rem;
		height: 11 * 0.75rem;
		margin: 2rem;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		z-index: 9;
	}
	
	&__menubar {
		background: $blue;
		padding: 1.75rem;
		padding-left: 13 * 0.75rem + 1.75rem + 1.75rem; //to clear the logo
		width: 100%;
		display: block;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		z-index: 6;
		height: 6.35rem; //magic number to align with logo
		
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: $blue;
			z-index: -1;
		}
		
		&--secondary {
			background: #fff;
			z-index: 3;
			
			&:before {
				background: #fff;
			}
		}
	}
}

.optionsmenu {
	color: #fff;
	font-size: 2rem;
	text-transform: uppercase;
	padding-left: 2rem;
	
	&__toggle {
		color: #fff;
		font-size: 2rem;
		background: none;
		padding: 0;
		
		&:hover, .active & {
			color: $orange;
		}
		
		@media (min-width: 1440px) {
			display: none;	
		}
	}
	
	&__menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: -2;
		padding: 0.75rem 1.75rem;
    	padding-left: 13.25rem;
		transform: translate3d(0,-100%,0);
		transition: transform 0.3s ease;
		font-size: 2rem;
		
		.active & {
			transform: translate3d(0,0,0);
		}
		
		@media (min-width: 768px) {
			display: flex;
			justify-content: flex-end;
		}
		
		@media (min-width: 1440px) {
			position: static;
			width: auto;
			background: none;
			z-index: initial;
			padding: 0;
			transform: translate3d(0,0,0);
		}
	}
	
	&__btn  {
		padding: 1rem 0;
		font-size: 2rem;
		
		@media (min-width: 768px) {
			margin-left: 3rem;	
		}
		
		@media (min-width: 1440px) {
			padding: 0;
			color: #fff;
		}
		
		&:hover {
			color: $orange;
		}
	}	
}

.primarymenu {
	color: #fff;
	font-size: 2rem;
	text-transform: uppercase;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	display: flex;
	
	@media (min-width: 768px) {
		position: static;
		display: block;
		width: auto;
	}
	
	&__btn {
		color: #fff;
		font-size: 2rem;
		background: $blue;
		padding: 2rem;
		width: 50%;
		text-align: center;
		
		&:hover {
			color: $orange;
		}
		
		&--main {
			background: $orange;
			
			&:hover {
				color: $blue;
			}
		}
		
		@media (min-width: 768px) {
			background: none;
			margin-left: 3rem;
			padding: 0;
			width: auto;
			text-align: left;
			
			&--main {
				color: $orange;
			}
			
			&:hover {
				color: $orange;
			}
		}
	}
}

.toolsmenu {
	color: $blue;
	font-size: 2rem;
	text-transform: uppercase;
	padding-left: 2rem;
	
	&__toggle {
		color: $blue;
		font-size: 2rem;
		background: none;
		padding: 0;
		
		&:hover, .active & {
			color: $orange;
		}
		
		@media (min-width: 1440px) {
			display: none;
		}
	}
	
	&__menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: -2;
		padding: 0.75rem 1.75rem;
		transform: translate3d(0,-100%,0);
		transition: transform 0.3s ease;
		font-size: 2rem;
		
		.active & {
			transform: translate3d(0,0,0);
		}
		
		@media (min-width: 768px) {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		
		@media (min-width: 1440px) {
			position: static;
			width: auto;
			background: none;
			z-index: initial;
			padding: 0;
			transform: translate3d(0,0,0);
		}
	}

	&__zoom {
		display: flex;
		align-items: center;
		padding-left: 2.5rem;
		justify-content: flex-end;
		
		i {
			margin: 0 0.5rem;
		}
	}
	
	&__btn  {
		padding: 1rem 0;
		font-size: 2rem;
		
		@media (min-width: 768px) {
			margin-left: 3rem;	
		}
		
		@media (min-width: 1440px) {
			padding: 0;
		}
		
		&:hover, &.enabled {
			color: $orange;
		}
	}
}

.search {
	color: $blue;
	font-size: 2rem;
	text-transform: uppercase;
	padding-left: 2rem;
	
	&__toggle {
		color: $blue;
		font-size: 2rem;
		background: none;
		padding: 0;
		
		&:hover, .active & {
			color: $orange;
		}
		
		@media (min-width: 1550px) {
			display: none;
		}
	}
	
	&__label {
		
		&--small {
			font-size: 1rem;
			
			@media (min-width: 400px) {
				font-size: 1.5rem;
			}
		}
	}
	
	&__content {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: -2;
		padding: 0.75rem 1.75rem 1.75rem;
		transform: translate3d(0,-100%,0);
		transition: transform 0.3s ease;
		font-size: 2rem;
		display: flex;
    	align-items: center;
		justify-content: flex-end;
		
		.active & {
			transform: translate3d(0,0,0);
		}
		
		@media (min-width: 1550px) {
			position: relative;
			top: -33%;
			width: auto;
			background: none;
			z-index: initial;
			padding: 0;
			transform: translate3d(0,0,0);
		}
	}
	
	&__input {
		padding: 1rem;
		font-size: 2rem;
		border: 1px solid $lightgrey;
		font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
		font-weight: 400;		
		margin: 0 0 0 1rem;
		background: #fff;
		width: 25rem;
	}
	
	&__clear {
		padding: 1rem 1.5rem;
		font-size: 2rem;
		font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
		font-weight: 400;		
		margin: 0 1rem 0 0;
		background: $orange;
		color: #fff;
		border: 1px solid $orange;
		
		&:hover {
			background-color: $blue;
			border-color: $blue;
		}
	}
}

.rangemenu {
	color: $blue;
	font-size: 2rem;
	text-transform: uppercase;
	width: 100%;
	padding: 1.75rem;
	
	&__toggle {
		color: $blue;
		font-size: 2rem;
		background: none;
		padding: 0;
		width: 100%;
    	text-align: left;
		
		span {
			float: right;
			display: none; //clashes with caret on small screens
			
			@media (min-width: 768px) {
				display: block;
			}
		}
		
		&:hover, .active > & {
			color: $orange;
		}
	}

	&.active span i {
		transform: rotate(180deg);
	}
	
	&__menu {
		width: 100%;
		transition: max-height 0.3s ease;
		font-size: 2rem;
		max-height: 0;
		overflow: hidden;
		
		.active > & {
			max-height: 25rem; //magic number to show 3 select items
		}

		li {
			display: flex;
			align-items: baseline;
			
			@media (min-width: 768px) {
				display: block;
			}
		}
	}
	
	&__btn  {
		padding: 1rem 0;
		font-size: 2rem;
		
		@media (min-width: 768px) {
			margin-left: 3rem;	
		}
		
		@media (min-width: 1440px) {
			padding: 0;
		}
		
		&:hover {
			color: $orange;
		}
	}
	
	&__label {
		padding: 1rem;	
		width: 40%;
		display: block;
		text-align: right;
		
		@media (min-width: 768px) {
			width: 100%;
			text-align: left;
			padding: 0.5rem;	
			padding-left: 0;
			margin-top: 1rem;
			font-size: 1.5rem;
		}
		
		@media (min-width: 1024px) {
			font-size: 2rem;
		}
	}
	
	&__select {
		padding: 1rem;
		font-size: 2rem;
		border: 1px solid $lightgrey;
		font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
		font-weight: 400;		
		margin: 2rem 0 0;
		width: 60%;
		background: #fff;
		display: block;
		
		@media (min-width: 768px) {
			margin: 0;
			width: 100%;
			font-size: 1.5rem;
			padding: 0.5rem;
		}
		
		@media (min-width: 1024px) {
			font-size: 2rem;
		}
	}
}

.sidemenu {
	width: 100%;
	background: $lightgrey;
	height: calc(100vh - 13rem);
	position: absolute;
	left: 0;
	z-index: 2;
	transform: translate3d(-100%,0,0);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	
	&.active {
		transform: translate3d(0,0,0);
	}
	
	@media (min-width: 768px) {
		width: 40%;
	}
	
	@media (min-width: 1024px) {
		width: 30%;
		max-width: 50rem;
	}
	
	&__toggle {
		position: absolute;
		top: 0;
		right: 0;
		background: $blue;
		color: #fff;
		font-size: 2rem;
		transform: translate3d(100%,0,0);
		padding: 0.25rem 1rem;
		
		&:hover {
			color: $orange;
		}
		
		.active & {
			transform: rotate(180deg);
		}
		
		@media (min-width: 768px) {
			right: auto;
			left: 100%;
			transform: translate3d(0,0,0);
		}
	}
}

.mainmenu {
	
	&__step {
		background: $blue;
		color: #fff;
		font-size: 2rem;
		width: 100%;
		display: block;
		text-align: left;
		padding: 1.75rem;
		
		i {
			float: right;
		}		
		&.active i {
			transform: rotate(180deg);
		}
		
		&:hover, &.active {
			color: $orange;
		}
	}
	
	&__options {
		max-height: 0;
		overflow: hidden;
		
		.active + & {
			max-height: none;
		}
	}
	
	li {
		border-top: 1px solid $lightgrey;
	}
}

.category {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 51rem); //magic number based on 4 steps
	
	@media (min-width: 400px) {
		max-height: calc(100vh - 51rem); //magig number based on 4 steps
	}
	
	@media (min-width: 768px) {
		max-height: calc(100vh - 44rem); //magic number based on 4 steps
	}
	
	@media (min-width: 1024px) {
		max-height: calc(100vh - 44rem); //magic number based on 4 steps
	}
	
	li {
		width: 25%;
		text-align: center;
		padding: 1.75rem;
		border: none;
		
		@media (min-width: 768px) {
			width: 33.33%;	
		}
	}
	
	&__img {
		display: block;
		margin: 0 auto 1rem;
		max-width: 75%;
		height: auto;
		
		@media (min-width: 768px) {
			max-width: 90%;
		}
	}
	
	&__label {
		font-size: 2rem;
		
		@media (min-width: 768px) {
			font-size: 1.5rem;
		}
	}
}

.modalbg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	transition: opacity 0.3s ease;
	opacity: 0;
	z-index: 10;
	
	&.active {
		display: block;
		opacity: 1;
	}
}

.modal {
	display: none;
	position: absolute;
	width: calc(100vw - 10rem);
	top: 5rem;
	left: 5rem;
	margin-bottom: 5rem;
	background: #fff;
	transition: opacity 0.3s ease;
	opacity: 0;  
	color: $blue;
	text-align: left;
	padding: 2rem;
	z-index: 10;

	h2 {
		font-size: 3rem;
		line-height: 1.25;
		margin: 0 0 2rem;
		font-weight: 600;
		text-transform: uppercase;
		width: 100%;
	}
	
	p {
		font-size: 2rem;
		line-height: 1.25;
		margin: 0;
		width: 100%;
	}
	
	@media (min-width: 768px) {
		left: 50%;
		transform: translateX(-50%);
		padding: 4rem;
		max-width: 100rem;
	}
	
	@media (min-width: 1024px) {
		padding: 6rem;		
	}
	
	&--narrow {
		@media (min-width: 1024px) {
			max-width: 60rem;
		}
	}
	
	&.active {
		display: block;
		opacity: 1;
	}
	
	&__close {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate3d(50%,-50%,0);
		border: none;
		padding: 1rem;
		background: $blue;
		color: #fff;
		font-weight: 600;
		font-size: 2rem;
		cursor: pointer;
	
		&:hover {
			background: $orange;
		}
	}
	
	&__cols {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 2rem;
		align-items: center;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	&__col {
		width: 100%;
		padding-right: 2rem;
		
		@media (min-width: 768px) {
			width: 50%;
			
			&:last-child {
				padding-right: 0;
				padding-left: 2rem;
			}
		}
	}
	
	&__button-group {
		margin: 2rem 0 0;
	}
	
	&__label {
		font-size: 2rem;
		padding: 1rem;	
		display: block;
		text-transform: uppercase;
		width: 100%;
		
		@media (min-width: 768px) {
			padding: 0.5rem;	
			padding-left: 0;
			margin-top: 1rem;
			font-size: 1.5rem;
		}
		
		@media (min-width: 1024px) {
			font-size: 2rem;
		}
		
		&--inline {
			width: auto;
			display: inline-block;
		}
	}
	
	&__select {
		padding: 1rem;
		font-size: 2rem;
		border: 1px solid $midgrey;
		font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
		font-weight: 400;		
		margin: 2rem 0 0;
		width: 100%;
		background: #fff;
		display: block;
		
		@media (min-width: 768px) {
			margin: 0;
			font-size: 1.5rem;
			padding: 0.5rem;
		}
		
		@media (min-width: 1024px) {
			font-size: 2rem;
		}
	}
}

img {
	max-width: 100%;
	height: auto;
}

.pan360 {
	background: $midgrey;
	text-align: center;
	width: 100%;
	height: 40rem;
	font-size: 2rem;
	align-items: center;
	justify-content: center;
	
	p {
		width: 100%;
	}
}

.full-page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 3;
	display: none;
	border-top: 1px solid $midgrey;
	
	&.active {
		display: block;
	}
	
	&__wrap {
		margin: 12rem 0;
		border-top: 1px solid $midgrey;
		width: 100%;
	}
	
	&__container {
		margin: 0 auto;
		width: 100%;
		max-width: 160rem;
		padding: 2rem;
		font-size: 2rem;
		
		@media (min-width: 768px) {
			padding: 4rem;
		}

		@media (min-width: 1024px) {
			padding: 6rem;		
		}
	}
	
	h2 {
		font-size: 3rem;
		line-height: 1.25;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0;
	}
	
	h3 {
		font-size: 2rem;
		line-height: 1.25;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0;
	}

	p {
		font-size: 2rem;
		line-height: 1.25;
		margin: 0;
	}

	&__head {
		display: flex;
		align-items: center;
		margin: 0 0 4rem;
		text-transform: uppercase;
		
		span {
			margin-left: 2rem;
		}
	}
	
	&__actions {
		margin-left: auto;
	}
}

.item-breakdown {
	
	&__table {
		width: 100%;
		border-bottom: 1px solid $midgrey;
		
		.btn {
			padding: 0;
			margin-left: 2rem;
		}
		
		th {
			border-bottom: 1px solid $midgrey;
			text-transform: uppercase;
		}
		
		td, th {
			padding: 0.75rem;
			text-align: left;
			
			&:nth-child(1) {
				width: 5%;
				text-align: center;
			}
			&:nth-child(2) {
				width: 20%;
			}
			&:nth-child(3) {
				width: 25%;
			}
			&:nth-child(4) {
				width: 15%;
				text-align: right;
			}
			&:nth-child(5) {
				width: 15%;
				text-align: right;
			}
			&:nth-child(6) {
				width: 20%;
				text-align: right;
			}
		}
	}
	
	&__options {
		display: flex;
		margin-top: 2rem;
	}
	
	&__accessories {
		width: 20%;
		margin-right: 35%;
		
		p {
			display: flex;
			margin: 1rem 0;
		}
		
		label {
			width: 50%;
			display: block;
			padding: 1rem;
			font-size: 2rem;
			
			@media (min-width: 768px) {
				font-size: 1.5rem;
				padding: 0.5rem;
			}
			
			@media (min-width: 1024px) {
				font-size: 2rem;
			}
		}
		
		input {
			display: block;
			padding: 1rem;
			font-size: 2rem;
			border: 1px solid $lightgrey;
			font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
			font-weight: 400;		
			background: #fff;
			display: block;
			width: 8rem;

			@media (min-width: 768px) {
				font-size: 1.5rem;
				padding: 0.5rem;
			}

			@media (min-width: 1024px) {
				font-size: 2rem;
			}
		}
	}
	
	&__totals {
		width: 25%;
		
		h3 {
			display: flex;
			justify-content: space-between;
			padding: 0 0.75rem 0 0;
		}
		
		p {
			display: flex;
			margin: 1rem 0;
			justify-content: space-between;
		}
		
		label, span {
			width: 50%;
			display: block;
			padding: 1rem;
			font-size: 2rem;
			
			@media (min-width: 768px) {
				font-size: 1.5rem;
				padding: 0.5rem;
			}
			
			@media (min-width: 1024px) {
				font-size: 2rem;
			}
		}
		
		span {
			text-align: right;
		}
		
		input {
			display: block;
			padding: 1rem;
			font-size: 2rem;
			border: 1px solid $lightgrey;
			font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
			font-weight: 400;		
			background: #fff;
			display: block;
			width: 12rem;
			text-align: right;

			@media (min-width: 768px) {
				font-size: 1.5rem;
				padding: 0.5rem;
			}

			@media (min-width: 1024px) {
				font-size: 2rem;
			}
		}
	}
	
	h3 {
		border-bottom: 1px solid $midgrey;
		padding-bottom: 2rem;
	}
	
	&__total {
		color: $orange;
		font-weight: 600;
		text-transform: uppercase;
	}
}

.newplan {
	display: flex;
	align-items: flex-end;
	
	&__col {
		width: 25%;
		padding: 0 3rem 0 0;
		
		&:last-child {
			padding: 0;
		}
	}
	
	&__label {
		font-size: 2rem;
		padding: 1rem;	
		display: block;
		text-transform: uppercase;
		width: 100%;
		
		@media (min-width: 768px) {
			padding: 0.5rem;	
			padding-left: 0;
			margin-top: 1rem;
			font-size: 1.5rem;
		}
		
		@media (min-width: 1024px) {
			font-size: 2rem;
		}
		
		&--inline {
			width: auto;
			display: inline-block;
		}
	}
	
	&__select {
		padding: 1rem;
		font-size: 2rem;
		border: 1px solid $midgrey;
		font-family: "din-2014","Helvetica","Arial","Roboto",sans-serif;
		font-weight: 400;		
		margin: 2rem 0 0;
		width: 100%;
		background: #fff;
		display: block;
		
		@media (min-width: 768px) {
			margin: 0;
			font-size: 1.5rem;
			padding: 0.5rem;
		}
		
		@media (min-width: 1024px) {
			font-size: 2rem;
		}
	}
}

.loadplan {
	margin: 4rem 0 0;
	
	&__table {
		width: 100%;
		border-bottom: 1px solid $midgrey;
		
		.btn {
			padding: 0;
			margin-left: 2rem;
		}
		
		th {
			border-bottom: 1px solid $midgrey;
			text-transform: uppercase;
		}
		
		td, th {
			padding: 0.75rem;
			text-align: left;
			
			&:nth-child(1) {
				width: 15%;
			}
			&:nth-child(2) {
				width: 15%;
			}
			&:nth-child(3) {
				width: 25%;
			}
			&:nth-child(4) {
				width: 15%;
			}
			&:nth-child(5) {
				width: 15%;
			}
			&:nth-child(6) {
				width: 15%;
			}
		}
	}
}

/* Input type range */

$track-color: $midgrey !default;
$thumb-color: $orange !default;

$thumb-radius: 0 !default;
$thumb-height: 3rem !default;
$thumb-width: 3rem !default;
$thumb-shadow-size: 0rem !default;
$thumb-shadow-blur: 0rem !default;
$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
$thumb-border-width: 0rem !default;
$thumb-border-color: $midgrey !default;

$track-width: 10rem !default;
$track-height: 0.5rem !default;
$track-shadow-size: 0rem !default;
$track-shadow-blur: 0rem !default;
$track-shadow-color: rgba(0, 0, 0, .2) !default;
$track-border-width: 0rem !default;
$track-border-color: $midgrey !default;

$track-radius: 0 !default;
$contrast: 5% !default;

$ie-bottom-track-color: darken($track-color, $contrast) !default;

@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
}

@mixin track {
  cursor: default;
  height: $track-height;
  transition: all .2s ease;
  width: $track-width;
}

@mixin thumb($adjustment: 0) {
  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
  background: $thumb-color;
  border: $thumb-border-width solid $thumb-border-color;
  border-radius: $thumb-radius;
  cursor: default;
  height: $thumb-height + $adjustment;
  width: $thumb-width + $adjustment;
}

@mixin disabled {
  cursor: not-allowed;
}

[type='range'] {
  -webkit-appearance: none;
  background: transparent;
  margin: $thumb-height / 2 0;
  width: $track-width;

  &::-moz-focus-outer {
    border: 0;
  }

  &:focus {
    outline: 0;

    &::-webkit-slider-runnable-track {
      background: lighten($track-color, $contrast);
    }

    &::-ms-fill-lower {
      background: $track-color;
    }

    &::-ms-fill-upper {
      background: lighten($track-color, $contrast);
    }
  }

  &::-webkit-slider-runnable-track {
    @include track;
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
  }

  &::-webkit-slider-thumb {
    @include thumb;
    -webkit-appearance: none;
    margin-top: ((-$track-border-width * 2 + $track-height) / 2 - $thumb-height / 2);
  }

  &::-moz-range-track {
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    @include track;
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
    height: $track-height / 2;
  }

  &::-moz-range-thumb {
    @include thumb(-4);
  }

  &::-ms-track {
    @include track;
    background: transparent;
    border-color: transparent;
    border-width: ($thumb-height / 2) 0;
    color: transparent;
  }

  &::-ms-fill-lower {
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    background: $ie-bottom-track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: ($track-radius * 2);
  }

  &::-ms-fill-upper {
    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: ($track-radius * 2);
  }

  &::-ms-thumb {
    @include thumb(-4);
    margin-top: $track-height / 4;
  }

  &:disabled {
    &::-webkit-slider-thumb {
      @include disabled;
    }

    &::-moz-range-thumb {
      @include disabled;
    }

    &::-ms-thumb {
      @include disabled;
    }

    &::-webkit-slider-runnable-track {
      @include disabled;
    }

    &::-ms-fill-lower {
      @include disabled;
    }

    &::-ms-fill-upper {
      @include disabled;
    }
  }
}



.plan {
	width: 100%;
	background: $lightgrey;
	height: calc(100vh - 13rem);
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/295139/exampleplan.png) center center no-repeat;
	background-size: cover;
}
              
            
!

JS

              
                const sidemenuToggle = document.querySelector('.sidemenu__toggle');
const optionsmenuToggle = document.querySelector('.optionsmenu__toggle');
const toolsmenuToggle = document.querySelector('.toolsmenu__toggle');
const rangemenuToggle = document.querySelector('.rangemenu__toggle');
const searchToggle = document.querySelector('.search__toggle');
const sideMenu = document.querySelector('.sidemenu');
const optionsMenu = document.querySelector('.optionsmenu');
const toolsMenu = document.querySelector('.toolsmenu');
const rangeMenu = document.querySelector('.rangemenu');
const search = document.querySelector('.search');
const mainMenuSteps = document.querySelectorAll('.mainmenu__step');
const showModalButtons = document.querySelectorAll('.show-modal');
const showBreakdownButton = document.querySelectorAll('.show-breakdown');
const showLoadSaveButton = document.querySelectorAll('.show-loadsave');
const closeModalButton = document.querySelectorAll('.js-modal-close');
const disablePanButton = document.querySelector('.disable-pan');

function toggleSideMenu() {	
	if (!sideMenu.classList.contains("active")) {
		sideMenu.classList.add("active");
	}
	else {
		sideMenu.classList.remove("active");
	}
}

function toggleOptionsMenu() {
	if (toolsMenu.classList.contains("active")) {toolsMenu.classList.remove("active");}
	if (search.classList.contains("active")) {search.classList.remove("active");}
	if (!optionsMenu.classList.contains("active")) {
		optionsMenu.classList.add("active");
	}
	else {
		optionsMenu.classList.remove("active");
	}
}

function toggleToolsMenu() {
	if (optionsMenu.classList.contains("active")) {optionsMenu.classList.remove("active");}
	if (search.classList.contains("active")) {search.classList.remove("active");}
	if (!toolsMenu.classList.contains("active")) {
		toolsMenu.classList.add("active");
	}
	else {
		toolsMenu.classList.remove("active");
	}
}

function toggleRangeMenu() {
	if (!rangeMenu.classList.contains("active")) {
		rangeMenu.classList.add("active");
	}
	else {
		rangeMenu.classList.remove("active");
	}
}

function toggleSearch() {
	if (toolsMenu.classList.contains("active")) {toolsMenu.classList.remove("active");}
	if (optionsMenu.classList.contains("active")) {optionsMenu.classList.remove("active");}
	if (!search.classList.contains("active")) {
		search.classList.add("active");
	}
	else {
		search.classList.remove("active");
	}
}

function toggleStep(e) {
	const step = this;
	const activeStep = document.querySelector('.mainmenu__step.active');
	
	if (!step.classList.contains("active")) {
		step.classList.add("active");
	}
	else {
		step.classList.remove("active");
	}
	
	if (activeStep && activeStep.classList.contains("active")) {
		activeStep.classList.remove("active");
	}
}

function showModal(e) {
	const selector = ".modal--" + e.target.getAttribute('data-modal');
	const modal = document.querySelector(selector);
	const modalbg = document.querySelector('.modalbg');
	modalbg.classList.add("active");  
	modal.classList.add("active");
	positionModal();
}

function toggleEnabled(e) {
	const target = e.target;
	if (target.classList.contains("enabled")) {
		target.classList.remove("enabled");
	}
	else {
		target.classList.add("enabled");
	}
}

function closeModal() {
	const modalbg = document.querySelector('.modalbg');
	const modal = document.querySelector('.modal.active');
	modalbg.classList.remove("active");
	modal.classList.remove("active");
}

function positionModal() {
	const offset = window.pageYOffset;
	const modal = document.querySelector('.modal');
	modal.style.marginTop = offset + "px";
}

function showSaveModal() {
	const selector = ".modal--autosave";
	const modal = document.querySelector(selector);
	const modalbg = document.querySelector('.modalbg');
	modalbg.classList.add("active");  
	modal.classList.add("active");
	positionModal();
}

function showBreakdown() {
	const breakdown = document.querySelector(".item-breakdown");
	if (breakdown.classList.contains("active")) {
		breakdown.classList.remove("active");
	}
	else {
		breakdown.classList.add("active");
	}
}

function showLoadSave() {
	const loadsave = document.querySelector(".loadsave");
	if (loadsave.classList.contains("active")) {
		loadsave.classList.remove("active");
	}
	else {
		loadsave.classList.add("active");
	}
}

sidemenuToggle.addEventListener('click', toggleSideMenu);
optionsmenuToggle.addEventListener('click', toggleOptionsMenu);
toolsmenuToggle.addEventListener('click', toggleToolsMenu);
rangemenuToggle.addEventListener('click', toggleRangeMenu);
searchToggle.addEventListener('click', toggleSearch);
disablePanButton.addEventListener('click', toggleEnabled);
showBreakdownButton.forEach(button => button.addEventListener('click', showBreakdown));
showLoadSaveButton.forEach(button => button.addEventListener('click', showLoadSave));
mainMenuSteps.forEach(step => step.addEventListener('click', toggleStep));
showModalButtons.forEach(button => button.addEventListener('click', showModal));
closeModalButton.forEach(function (button) { button.addEventListener('click', closeModal) });

showSaveModal();
              
            
!
999px

Console