:root {
	--brown:#beb0a8;
	--dark-brown:#683719;
	--medium-brown:#655955;
	--light-brown:#dfd6cd;
	--blue:#8099bc;
	--yellow:#fec464;
	--white:#fff;
	--black:#000;
	--dark-yellow:#e7a435;
	--footer-brown:#3a291a;
}
.form-floating>label {font-size:1rem;}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fade-in {opacity: 1;transition: opacity 0.5s ease-out;}
.zero-height {height: 0;overflow:hidden;opacity:0;}
.auto-height {height: auto;}
:focus {outline: none;}
body,html {font-family: 'Open Sans', sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family: 'Onest', sans-serif;}
#menu-toggle {display:none;}
#menu-toggle:checked ~ .menu {right: 0;overflow: auto;z-index:101;}
.menu {position: fixed;top: 0;right: -100%;height: 100%;width: 320px;background-color: var(--medium-brown);opacity: 0.95;overflow-x: hidden;transition: right 0.5s;display: flex;flex-direction: column;padding-top:140px;padding-left:40px}
.menu a {text-transform:uppercase;display: block;padding: 20px;font-size: 1.2em;color: #fff;text-decoration: none;transition:color 0.5s;}
.menu a:hover {color: var(--yellow);}
header {opacity:0.95;height:96px;background:var(--medium-brown);padding:15px;position:fixed !important;width:100%;z-index:100;transition: height 1s ease;}
header .logo-mark {position:absolute;height:70px;transition: height 1s ease;}
header .header-content {display:grid;max-width:100%;margin:0 auto;width:100%;}
header .button {position:absolute;color:#fff;padding: 5px;text-transform:uppercase;font-size:23px;text-decoration: none;font-weight: 900;font-family: 'Onest',sans-serif;width: auto;background: var(--yellow);border: 2px solid var(--white);top: 30px;justify-self: center;transition: all 0.3s ease-in-out;}
header .button:hover {background-color:var(--dark-yellow);}
@media all and (max-width: 768px) {
	header .logo-mark {height: 50px;margin-top:10px;}
	header .button {font-size:16px;top:35px;}
}
.page-id-1 header #header-rent-button {opacity:0;}
.page-id-1 header #header-rent-button.fade-in {opacity:1;}
.hamburger {position:fixed;right:20px;top:30px;z-index:102;transition: right 1s,top 1s;}
.hamburger .line {width: 50px;height: 5px;background-color: #ecf0f1;display: block;margin: 8px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.hamburger:hover {cursor: pointer;}
.hamburger.is-active .line:nth-child(2) {opacity: 0;}
.hamburger.is-active .line:nth-child(1) {-webkit-transform: translateY(13px) rotate(45deg);-ms-transform: translateY(13px) rotate(45deg);-o-transform: translateY(13px) rotate(45deg);transform: translateY(13px) rotate(45deg);}
.hamburger.is-active .line:nth-child(3) {-webkit-transform: translateY(-13px) rotate(-45deg);-ms-transform: translateY(-13px) rotate(-45deg);-o-transform: translateY(-13px) rotate(-45deg);transform: translateY(-13px) rotate(-45deg);}

footer {width:100%;padding:50px 0;background:var(--footer-brown);}
footer .footer-content {display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;max-width:1000px;margin:0 auto;color:var(--light-brown);}
footer .footer-content a {color:var(--light-brown);text-decoration:none;display:block;}
footer .footer-content a:hover {text-decoration:underline;}
.page-id-137 header #header-rent-button {display:none !important;}
.page-id-151 header #header-rent-button {display:none !important;}
@media all and (max-width: 768px) {
	footer .footer-content {grid-template-columns:1fr;grid-gap:1em;width:calc(100% - 4em);margin-left:4em;}
}

.btn.btn-success {background:#b1d576;border:1px solid #fff;border-radius:0;}
.btn.btn-secondary {border:1px solid #fff;border-radius:0;}
.form-control,textarea,input {border-radius:0;}
#newSignature {border-radius:0;position: relative; margin: 0; padding: 0; border: 1px solid #ced4da;}
#newSignature.is-invalid {border-color: #dc3545;}
#newSignature.is-valid {border-color: #28a745;}


#AcknowledgeDivText::-webkit-scrollbar {-webkit-appearance: none;width: 10px;}
#AcknowledgeDivText::-webkit-scrollbar-thumb {border-radius: 2px;height:50px;background-color: rgba(0,0,0,.5);-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);}
#AcknowledgeDiv::-webkit-scrollbar {-webkit-appearance: none;width: 10px;}
#AcknowledgeDiv::-webkit-scrollbar-thumb {border-radius: 2px;height:50px;background-color: rgba(0,0,0,.5);-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);}
form label {margin-left:0.75rem;}
.input-group-append {cursor: pointer;}
.form-floating>label {color:#888;}
.dropdownInput {box-sizing: border-box;width:100%;background-image: url('https://www.w3schools.com/howto/searchicon.png');background-position: 14px 12px;background-repeat: no-repeat;font-size: 16px;padding: 14px 20px 12px 45px;border: none;border-bottom: 1px solid #ddd;}
.dropdownInput::-webkit-input-placeholder {font-size: 13px}
.dropdownInput:focus {outline: 3px solid #ddd;}
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #f6f6f6;min-width: 350px;overflow: auto;border: 1px solid #ddd;z-index: 1;}
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}
.dropdown a:hover {background-color: #ddd;cursor:pointer;}
textarea.form-control {min-height:150px;}


.form-check-input {clear: left;}
.form-switch.form-switch {margin-bottom: 1.5rem;}
.form-switch.form-switch .form-check-input {height: 2rem;width: calc(3rem + 0.75rem);border-radius: 4rem;}
.form-switch.form-switch label {margin-top:0.5rem;}
.form-switch.form-switch {display:grid;grid-template-columns:min-content 1fr;}
.form-switch.form-switch .form-check-input {grid-row:1/2;align-self:center;}
.form-switch.form-switch label {grid-row:1/2;}


.template-storage-unit-rental-form .storage-unit {display:grid;grid-template-columns: 1fr 15px 1fr 15px 2fr;margin:0 auto;max-width:768px;align-items:center;}
.template-storage-unit-rental-form .storage-unit img {grid-column:1/2;max-height:200px;}
.template-storage-unit-rental-form .storage-unit h3.size {grid-column:3/4;text-transform:uppercase;}
.template-storage-unit-rental-form .storage-unit h3.price {grid-column:5/6;font-size:35px;}
.template-storage-unit-rental-form .storage-unit h3 {font-size:1.2rem;font-weight:900;margin-bottom:0;}

@media all and (max-width: 768px) {
	.template-storage-unit-rental-form .storage-unit img {max-height:150px;}
	.template-storage-unit-rental-form .storage-unit h3.price {font-size:28px;}
}

.printable-contract {font-size:16px;max-width: 1200px;margin: 0 auto;}
.printable-contract h2 {margin-top:2em;text-align:center;text-transform:uppercase;font-size:12px;font-weight:900;}
.printable-contract h3 {margin-top:2em;text-align:center;text-transform:uppercase;font-size:11px;font-weight:900;}
.printable-contract h4 {margin-top:2em;font-size:10px;font-weight:300;line-height:10px;}
.printable-contract h4 strong {font-weight:900;}
#Printable-Acknowledgement {margin-top:15px;margin-bottom:15px;border:1px solid #ccc;padding:10px;width: 100%;height: 300px;overflow: scroll;font-size:0.8em}
#Printable-Protection {margin-top:15px;margin-bottom:15px;border:1px solid #ccc;padding:10px;width: 100%;height: 300px;overflow: scroll;font-size:0.8em;}
@media print {
	#Printable-Acknowledgement {height:auto;}
	#Printable-Protection {height: auto;}
	.printable-contract {font-size:16px;max-width: 1200px;margin: 10px auto;}
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left;}
	.col-md-12 {width: 100%;}
	.col-md-11 {width: 91.66666667%;}
	.col-md-10 {width: 83.33333333%;}
	.col-md-9 {width: 75%;}
	.col-md-8 {width: 66.66666667%;}
	.col-md-7 {width: 58.33333333%;}
	.col-md-6 {width: 50%;}
	.col-md-5 {width: 41.66666667%;}
	.col-md-4 {width: 33.33333333%;}
	.col-md-3 {width: 25%;}
	.col-md-2 {width: 16.66666667%;}
	.col-md-1 {width: 8.33333333%;}
}
body.page-id-1 .template-custom-html-section a {position:absolute;top:0;margin-left:50vw;top:150px;grid-column:1/2;grid-row:1/2;z-index:2;align-self:center;justify-self:center;text-align:center;background-color: var(--yellow);padding: 0.5em;font-size: 50px;text-decoration: none;text-transform: uppercase;color: white;font-weight: 900;border: 4px solid white;font-family: 'Onest',sans-serif;}
body.page-id-1 .template-custom-html-section a:hover {background-color:#e7a435;color:#fff;}
@media all and (max-width: 768px) {
	body.page-id-1 .template-custom-html-section a {top:120px;font-size:16px;border: 2px solid white;margin-left:44vw;}
}
@media all and (max-width: 600px) {
	body.page-id-1 .template-image-section h2 {width:calc(100% - 1em);font-size:40px;line-height:40px;}
	body.page-id-1 .template-image-section h3 {width:calc(100% - 1em);font-size:40px;line-height:40px;}
	body.page-id-1 .template-image-section .box-of-copy-h3 {bottom:-31px;}
	body.page-id-1 .template-image-section {margin-bottom:4em;}
}
.template-rental-list .storage-unit {display:grid;grid-template-columns: 1fr 15px 1fr 15px 1.5fr;grid-template-rows:min-content min-content;border-bottom:1px solid #eee;margin:0 auto;max-width:var(--narrow-width);align-items:center;}
.template-rental-list .storage-unit img {grid-column:1/2;grid-row:1/3;max-height:200px;}
.template-rental-list .storage-unit h3 {font-size:1.2rem;font-weight:900;margin-bottom:0;}
.template-rental-list .storage-unit h3.size {grid-column:3/4;grid-row:1/3;text-transform:uppercase;}
.template-rental-list .storage-unit h3.price {grid-column:5/6;grid-row:1/2;align-self:end;font-size:35px;}
.template-rental-list .storage-unit a.button {grid-column:5/6;grid-row:2/3;align-self:start;display:block;width:min-content;padding:10px 20px;background:var(--yellow);color:var(--black);text-decoration:none;text-transform:uppercase;font-weight:700;font-size:24px;font-family:'Onest', sans-serif;}
.template-rental-list .storage-unit a.button:hover {background:var(--dark-yellow);}
.template-rental-list {margin-bottom:6em;}
@media all and (max-width: 768px) {
	.template-rental-list .storage-unit {grid-template-columns: 15px 1fr 15px 2fr 15px;}
	.template-rental-list .storage-unit img {grid-column:2/3;grid-row:1/4;max-height:150px;}
	.template-rental-list .storage-unit h3.size {grid-column:4/5;grid-row:1/2;align-self:end;}
	.template-rental-list .storage-unit h3.price {grid-column:4/5;grid-row:2/3;align-self:center;}
	.template-rental-list .storage-unit a.button {grid-column:4/5;grid-row:3/4;padding:5px 10px;font-size:16px}
		

}