﻿/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

html {scroll-behavior: smooth;}
ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {font-family: proxima-nova, sans-serif !important;}
p {font-family: proxima-nova, sans-serif !important;font-size: 16px !important;line-height: 1.5 !important;}
h1,h2,h3,h4,h5,h6{font-family: interstate, sans-serif !important;}

#request,#units,#log-style,#rough-cut,#outdoor-poly {
  scroll-margin-top: 180px;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:none;height: 1px; background: #f1f1f1;}
/* Icon Spin */
.hvr-icon-spin {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-icon-spin .hvr-icon {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.hvr-icon-spin:hover .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Icon Drop */
/*-------- HEADER STYLES --------*/
header {position: absolute; top: 0;left:0;right:0;z-index: 1;}

header.sub {position: unset;background: #111;}
.top-head .flex-container {font-size: 16px;justify-content: flex-end;gap: 30px;padding: 10px 0;align-items: center;}
.head-map,.head-phone {font-family: interstate, sans-serif !important;text-transform: uppercase;font-weight: 600;}
.top-head a {color: #fff;font-size: 16px;}

.head-socials,.foot-socials {
    display: flex;
    gap: 15px;
}

.head-socials a,.foot-socials a {color: #fff;transition:.3s all;font-size: 16px;height: 22px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 90px;
    padding: 5px;}
.head-socials a:hover,.foot-socials a:hover{opacity: 1;}
.main-header {transition: 0.4s;box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;background: #fff;}
.main-header .flex-container {align-items: center;justify-content: space-between;}
.nav-wrap {display:flex;align-items: center;gap: 10px;}
.logo img {max-width: 100%;width: 120px;}
.logo a {display: flex;}
.head-socials a {}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;z-index: 99;
}

.sticky + .content {
  padding-top: 60px;
}

.sticky .logo img {width: 90px;}

.sticky nav.primary ul li a {line-height: 5;}
/*---BODY--------------------------------*/
.page-wid {max-width: 1400px;}
.wid90{width: 90%;margin: 0 auto;}
.flex-container {display: flex;}
.grid-container {display: grid;}
.red-txt {color: #eb1610;}
.center {text-align: center;}
.grey-bg {background: #f6f6f6;}
.pagepush {height: 175px;}
#pad-xl {padding-top: clamp(50px, 5%, 75px);padding-bottom: clamp(50px, 5%, 75px);}
#pad-l {padding-top: clamp(20px, 5%, 40px);padding-bottom: clamp(20px, 5%, 40px);}
/*---HERO--------------------------------*/
.hero {background:linear-gradient(90deg, rgba(21,21,21,.6) 0%, rgba(21,21,21,.6) 100%),url("/siteart/hero-img.jpg") no-repeat;background-size: cover;background-position: center center;height: 60vh;display:flex;justify-content: flex-end;text-align: right;color: #fff;align-items: center;min-height:500px;}
.herotxt.wid90 {max-width: 950px;width: 90%;margin-right: 5% !important;margin: 0;	
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);}
.herotxt h1 {font-size: 48px;font-weight: 800;line-height: 1;margin-bottom: 15px;}
.herotxt h2{font-family: interstate, sans-serif !important;font-size: 22px !important;font-weight:500 !important;}
.herotxt button {margin-top: 30px;}
/*---HOME STYLES--------------------------------*/
.grid-cats {grid-template-columns: repeat(3, 1fr);gap: 40px;grid-auto-rows: minmax(100px, auto);text-align: center;}
.img-section {max-height: 250px;}
.img-section img {
height: 100%;
width: 100%;
object-fit: cover;
}
.grid-cats a {
display: flex;
flex-direction: column;border-radius: 5px;overflow: hidden;
}
.grid-cats button.red-btn {
width: 100% !important;
padding: 10px !important;
font-size: 15px;
}
.grid-cats a:hover button.red-btn {background: #000;border-color: #000;}
.grid-cats a:hover h3 {letter-spacing: 2px;} 

.grid-cats a {color:#fff !important;}
.grid-cats a h3 {margin-top: 5px;background: #eb1610;color:#fff !important;}
.grid-cats a h3,.brand-box h2 {
text-transform: uppercase;font-weight: 700;
font-size: 18px;
color: #000;
padding: 10px 0;transition: .3s all;}

.inventory-categories h2,.home-txt h2 {
font-weight: 900;
margin-bottom: 20px;
font-size: 32px;
}
.home-txt h2  {text-transform: uppercase;}
span.small-txt {
display: block;
font-size: 28px;
font-weight: 700;text-transform: none;
}

.home-box {
flex-basis: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;color: #fff;overflow: hidden;max-height: 500px;min-height: 300px;
}


.home-box h3 {
font-size: 32px;
text-transform: uppercase;
font-weight: 900;
margin-bottom: 10px;    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.parts-box,.service-box {position: relative;}
.home-box img {height: 100%;width:100%;object-fit: cover;filter: brightness(.3);transition: transform .8s ease;}
.box-text {
    max-width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

a.home-box:hover img { transform: scale(1.5);}
a.home-box:hover .box-text .red-btn {background: #000;border-color: #000;}
.home-box p {font-family: interstate, sans-serif !important;font-size: 22px !important;font-weight:500 !important;margin-bottom: 30px;}
/*----PARTS DEPARTMENT---*/
/*----PARTS DEPARTMENT---*/
.grid-container.flex-parts {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}
a.partsbook {
    text-align: center;background: #fff;
    border: 1px solid #f1f1f1;
    color: #000;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 15px 10px;
    transition: .3s all;
	border-radius: 5px;
}
a.partsbook:hover {box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;}

/*--MANU SLIDE*/
.manu-wrap {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    background: #fff;
    padding: 40px 0;
    position: relative;
}

.manu-slide img {
        max-width: 100%;
    margin: 0 auto !important;
	width: 160px;
}
button.next-slide {right: 0 !important;}
button.back-slide {left: 0 !important;}
button.next-slide,button.back-slide {
    position: absolute;
    top: 0;
    bottom: 0;
    background: transparent;
    border: transparent;
    font-size: 28px;
    opacity: .25;
    padding: 0 15px;transition:.3s all;
}

button.next-slide:hover,button.back-slide:hover{opacity: 1;}
/*---RENTAL RATES---*/
.storage-pg table {text-align: left !important;background: #fff !important;}
.storage-pg table tr:first-of-type {background: #000;letter-spacing: 1px;
    color: #fff;
    line-height: 2 !important;
    text-transform: uppercase;
    font-weight: 900;}
.storage-pg table tr td:first-of-type{font-weight: 800;}
.storage-pg table td {border: 1px solid #e8e8e8;padding: 5px 10px;}

.rent-title {font-weight: 800;}
/*---CONTACT---*/
.page-wid h1 {
    font-size: 38px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.page-wid h1 span.small {
    display: block;
    font-size: 26px;
    font-weight: 800;
    margin-top: 5px;
    text-transform: none;
}

span.contact-flex {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

span.contact-flex a {color: #000;}
.flex-page {gap: 5%;align-items: baseline;}
.half-page {
    flex: 1;
}
a.red-btn {
	padding: 10px 0;
    display: block;
    margin-top: 10px;
    color: #00000087;
    font-weight: 700;
    letter-spacing: 1px;transition:.3s all;
    font-family: interstate, sans-serif !important;
}
a.red-btn:hover {color: #000;letter-spacing: 2px;}


.page-wid h2 {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 20px;
}
.form-title {
    padding: 20px 0 10px 0;
    text-transform: uppercase;
}

.halfimg img {max-width: 100%;width: 100%;}

.page-wid a {color: #000;transition:.3s all;}
.page-wid a:hover {color:#eb1610}
.grid-container.grid-rentals {grid-template-columns: repeat(3, 1fr);gap: 20px;grid-auto-rows: minmax(100px, auto);margin-top: 30px;}
.grid-container.grid-furniture {grid-template-columns: repeat(4, 1fr);gap: 20px;grid-auto-rows: minmax(100px, auto);margin-top: 30px;}
.page-wid h3 {
    text-transform: uppercase;
    font-size: 28px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.furniture-option {
    text-align: center;
    padding: 10px;
    border: 1px solid #e8e8e8;transition:.3s all;
}

.furniture-option:hover {box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;}
.furniture-option img {max-width: 100%;width: 100%;}
.furn-title h3{
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 5px;
	margin-top: 10px;
	color: #000;
}

.furn-title .red-txt {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 5px;
    display: block;
}

.furn-img a {position: relative;display: flex;}

.furn-img img {vertical-align: top;width: 100%;}

.furn-img a:after {
    content: '\A';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all .5s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: interstate, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
}

.furn-img a:hover:after {content:'View More Images';opacity: 1;}

.supplypg h2 {
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 700;
    color: #222;
}
/*---TEAM PAGE--*/
.staff-pg hr {margin: 40px 0;}
.team h3 {font-size: 18px;margin-bottom: 5px;}
.team h4 {margin-bottom: 5px;}
.team img {max-width: 100%;width: 100%;}
.staff-pg .grid-container {margin-top: 10px;}
.team {    text-align: center;
    padding: 10px;
    border: 1px solid #e8e8e8;}
/*---SELF STORAGE--*/
.storage-pg .page-logo img {max-width: 200px !important;}
.storage-pg {align-items: unset;}
.storage-pg .half-page img {width: 100%;
    height: 100%;
    object-fit: cover !important;}
.storage-pg .button-wrap{margin: 0;max-width: fit-content;}
.storage-pg .button-wrap button {width: 100%;}
/*---MILWAUKEE TOOLS--*/
.page-logo img {
    width: 100%;
    max-width: 175px !important;
}
h2.mobile {
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 600;
}
.tool-pg {align-items: flex-start;}
.tool-wrap {display: flex;margin-top: 20px;gap: 5px;}
.tool-wrap img {max-width: 100%;width: 100%;}
/*--------BUTTON STYLES--------------------*/
button{cursor: pointer;    font-family: proxima-nova, sans-serif !important;font-size: 16px;letter-spacing: 1px;}
button.red-btn {
    background: #eb1610;
    font-weight: 600;
    border: 1px solid #eb1610;
   padding: 15px;
    color: #fff;
    border-radius: 4px;
	transition:.3s all;
}
button.red-btn:hover {background: #000;border-color: #000;}
button.black-btn {
    background: #000;
    font-weight: 600;
    border: 1px solid #000;
    padding: 15px;
    color: #fff;
    border-radius: 4px;
	transition:.3s all;
}
button.black-btn:hover {background: #151515;border-color: #151515;}
.main-header .red-btn {min-width: 150px;font-family: interstate, sans-serif !important;text-transform: uppercase;letter-spacing: 0;}
button.link-btn {
    font-size: 16px;
    background: transparent;
    font-weight: 600;
    border: 1px solid transparent;
    padding: 15px 0;
    color: #000;
    transition: .3s all;
}
button.link-btn:hover {letter-spacing: 2px;}
.button-wrap{display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;}
.button-wrap button {
    min-width: 150px;
}
.button-wrap a {
    min-width: 200px;    text-align: center;
}

.flex-container.flex-btn {gap: 20px;margin-bottom: 20px;}
.flex-container.flex-btn button {
    width: 100%;
}
.flex-container.flex-btn a {
    flex-basis: 25%;
}

.flex-container.flex-btn a button:hover {color:#eb1610 }
/*-------- FOOTER STYLES ----------------*/
footer{}
.top-footer {background: #151515;    border-bottom: 1px solid #333;}
.wid90.foot-logos.flex-container {
    gap: 10%;
    justify-content: center;padding:40px 0;
}
.foot-logos img {max-width: 100%;height: 90px;}
.main-footer {background: #000;color: #fff;}
.foot-title {display:block;font-family: interstate, sans-serif !important;text-transform: uppercase;font-weight: 900;margin-bottom: 10px;}
.main-footer .flex-container {justify-content: space-between;gap:5%;padding: 40px 0;}
.main-footer .flex-container a {color: #fff;}
.foot-col {flex-basis: 20%;}
ul.foot-nav {
    display: flex;
    gap: 60px;
}
.foot-col li {
    line-height: 1.75;
}

.foot-list ul {
  --icon-space: 2em;
  list-style: none;
  padding: 0;
}

.foot-list li {
  padding-left: var(--icon-space);margin-bottom: 15px;
}

.foot-list li.foot-address:before {
  content: "\f015"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc( var(--icon-space) * -1 );
  width: var(--icon-space);color:#eb1610
}
.foot-list li.foot-phone:before {
  content: "\f095"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc( var(--icon-space) * -1 );
  width: var(--icon-space);color:#eb1610
}

.hours-list li {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid rgba(238,238,238,0.25);
    justify-content: space-between;
}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/
.mobile-btn {display: none;}
@media only screen and (max-width: 1300px) {
	.herotxt h2 {font-size: 18px !important;}
	.grid-cats {gap: 20px;}
	.grid-brands,.grid-container.grid-furniture{grid-template-columns: repeat(3, 1fr);}
}
@media only screen and (max-width: 1200px) {
	.box-text {
    max-width: 85%;
    position: absolute;
    top: unset;
    left: unset;
    transform: unset;
    right: unset;
}
	.flex-container.flex-btn a {flex: 1;}
	.grid-container.flex-parts {grid-template-columns: repeat(2, 1fr);}
	
}
@media only screen and (max-width: 1100px) {
	.flex-page {flex-wrap:wrap;gap: 40px;}
	.half-page {flex-basis:100%;}	
	.shop-info {flex-wrap:nowrap;}
}
@media only screen and (max-width: 1000px) {
	.grid-cats a h3{font-size: 16px;}
	.home-box p {font-size: 18px !important;}
	.grid-container.grid-furniture{grid-template-columns: repeat(2, 1fr);}
	.furn-title h4,.furn-title h3 {font-size: 16px;}
	.flex-container.flex-btn {flex-wrap:wrap;}
	
}
@media only screen and (max-width: 920px) {
		.herotxt h1 {
    font-size:34px;
}
	.page-wid h1 {font-size: 32px !important;}
	.grid-cats {gap: 10px;}
	.grid-cats a h3{font-size: 15px;}
	.grid-brands {grid-template-columns: repeat(2, 1fr);}
	.shop-info {flex-wrap:wrap;}
	.flex-container.flex-btn a {flex-basis: 100%;}
}

@media only screen and (max-width: 830px) { 
	.main-footer .flex-container {flex-wrap:wrap;gap:40px;}
	.foot-col {flex-basis: 46%;}
}

@media only screen and (max-width:780px) {
.grid-cats {grid-template-columns: repeat(1, 1fr);}
	.img-section {max-height: 100px;}
	.hero{height: 40vh;min-height: 300px;}
	.head-socials,.head-map, .head-phone {display: none;}
	header {position: unset}
	.top-head {background: #eb1610;}
	.head-search,.search-wrap input {width: 100% !important;}
	.search-wrap input {line-height: 2.5;font-size: 18px;}
	.search-wrap {display: flex;align-items: center;}
	.pagepush {display: none;}
	.herotxt.wid90 {margin: 0 auto !important;}
	.logo img {max-width: 100%;width: 100%;height: auto;width: 90px;}
	.home-box h3 {font-size: 24px;}
	.end-col {flex-basis: 100%;}
	.brand-box h2 {font-size: 15px;}
	a.partsbook {font-size: 16px;}
}

@media only screen and (max-width:630px) {
	.herotxt h1 {font-size: 32px;}
	section.parts-service {flex-wrap:wrap;}
	.home-box {flex-basis: 100%;max-height: 350px;}
		.mobile-btn {display: block !important;}
	a.mobile-btn button {
    width: 100%;
    border-radius: 0;
}
	.desktop-btn {display: none;}
	.hero {
    height: 30vh;
    min-height: 325px;
}
.grid-container.flex-parts {grid-template-columns: repeat(1, 1fr) !important;gap:10px;}
}

@media only screen and (max-width:550px) {
.foot-col {flex-basis: 100%;}
	.grid-brands {grid-template-columns: repeat(1, 1fr);}
	}
@media only screen and (max-width:500px) {
.grid-cats {grid-template-columns: repeat(1, 1fr);}
	.button-wrap{flex-wrap:wrap;}
	.page-wid h1 {
    font-size: 28px !important;text-align: center;
	}
	.page-logo img {max-width: 120px !important;}
	.page-wid h3 {font-size: 22px;}
	.page-wid h2{font-size: 28px;}
	.grey-bg.storage-pg,.rental-pg {text-align: center;}
	.storage-pg table {
		text-align: center !important;
}
	.storage-pg table td {padding: 5px 10px;}
	span.contact-flex {justify-content: center;text-align: center;display: block;}
	

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		font-weight:900;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	.storage-pg table tr td:first-of-type {text-transform: uppercase;background: #000 !important;color: #fff !important;}
	
	td:nth-of-type(2):before { content: "Daily Rates:"; }
	td:nth-of-type(3):before { content: "Weekend Rates:"; }
	td:nth-of-type(4):before { content: "Weekly Rates:"; }
	.storage-pg table tr:first-of-type {display: none !important;}
}


@media only screen and (max-width:400px) {
	ul.foot-nav {flex-wrap:wrap;gap:0}
	ul.foot-nav span {flex-basis: 100%;}
	
		.page-wid h1,.herotxt h1 {
    font-size: 26px !important;
	}
	
	
	
	.foot-logos img {height: auto !important;}
	.page-wid h2 {font-size: 22px;}
	.page-wid h1 span.small {font-size:22px;}
	.herotxt.wid90 {text-align: center;}
	.inventory-categories h2, .home-txt h2 {font-size: 28px;text-align: center;}
	.page-wid h3 {font-size: 20px;}
}






