/*
Theme Name:		Fossil Storage 2026
Theme URI:		
Author:			Jumaqu.io
Author URI:		n/a
Version:		1.0
*/

	
:root{
	--Orange: #D26500;
	--LtGray: #F5F3EE;
	--Gray: #7e7e7e;
	--Dark: #000;
	--Light: #F1F1F1;
	--White: #FFF;
}


html * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing: antialiased; }
html, body {padding: 0; margin: 0;}
body { font-size:18px; color: var(--Dark); background: var(--White); font-family: 'Roboto', sans-serif; overflow-x:hidden; letter-spacing:0; font-weight:400; }
input, textarea { border-radius:0; }
input, textarea, select, label { font-family: 'Open Sans', sans-serif; outline:0; }
input:focus, input:hover { outline:0; }
::-webkit-input-placeholder { color:#D8D8D8; opacity:1; }
:-moz-placeholder { color:#D8D8D8; opacity:1; }
::-moz-placeholder { color:#D8D8D8; opacity:1; }
:-ms-input-placeholder { color:#D8D8D8; opacity:1; }

h1, h2, h3, h4, h5, h6 { padding:0; margin:0; letter-spacing:0; outline:0; }
h1 {letter-spacing: -1px; color: var(--White); font-weight: 500;}
h2, h3 { font-size: 50px; font-weight: 400; line-height:1.2; margin: 0;}
h2.eyebrow, h3.eyebrow {text-transform: uppercase; font-size: 15px; letter-spacing: 1.5px; font-weight: 700;}

img { display:block; max-width:100%; height:auto; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active, input[type=submit] { text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
a:focus, a:hover { text-decoration:none; outline:0; }
:focus, :hover { text-decoration:none; outline:0; }
svg path { transition:all .3s ease-out; }
p { margin:0 0 25px 0; line-height:1.2; }
.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
.no-animate { transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; }
strong { font-weight:600; }

.button {
	display: inline-block;      
	padding: 0 20px; margin: 0 10px 10px 0;           
	cursor: pointer;
	background: var(--Orange); border: solid 1px var(--Orange); border-radius: 5px; white-space: nowrap; 
	font-size: 16px; font-weight: 600; color: var(--White); line-height: 40px; 
	min-width: 208px; text-align: center;
}
	.button:hover {background: var(--Dark); border-color: var(--Dark);}
.button-outline {background: transparent; border-color: var(--White);}
	.button-outline:hover {background: var(--Orange); border-color: var(--Orange);}

.gradient {
	position: absolute; z-index: 5; width: 100%; height: 242px;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.grecaptcha-badge, .grecaptcha-logo {display: none !important;}


/*-----------------------------------------------------------------------------------*/
/* Structure
/*-----------------------------------------------------------------------------------*/

.container { display: flex; flex-wrap: wrap; margin:0 auto; width: 100%; padding-left: 60px; padding-right: 60px; max-width: 1480px; }
.column-left {width: calc(50% - 70px); margin-right: 70px;}
.column-right {width: calc(50% - 70px); margin-left: 70px;}


/*-----------------------------------------------------------------------------------*/
/* Header styling
/*-----------------------------------------------------------------------------------*/

#header { padding: 0; margin: 0; width:100%; position: absolute; top: 0; left: 0; z-index: 1000;}

	#header .header-left {display:flex; align-items:center; width: 221px;}
		#header .header-left .logo { margin: 20px 0; display:flex; align-items:center; }
			#header .header-left .logo:hover { opacity: 0.8 }
	#header .header-right { display:flex; justify-content: flex-end; align-items: center; width: calc(100% - 221px);}
		#header .header-right nav {  }
			#header .header-right nav ul { margin:0 25px 0 0; display:flex; align-items:center; justify-content: flex-end; }
				#header .header-right nav ul li { margin:0 0 0 25px; }
					#header .header-right nav a { color:var(--White); }
						#header .header-right nav a:hover {color: var(--White); border-bottom: solid 1px var(--White);}
		#header .header-right .button { min-width: 152px; padding: 0; margin: 0; }
			#header .header-right .button:hover {background: transparent; border-color: var(--White);}


/*-----------------------------------------------------------------------------------*/
/* Footer styling
/*-----------------------------------------------------------------------------------*/

#footer {padding: 50px 0 30px 0; background: var(--Dark); color: var(--White);}		

	#footer-top {}
		#footer-top-left {width: calc(50% - 30px); margin-right: 30px;}
			#footer-top-left h2.eyebrow {margin-bottom: 10px;}
			#footer-top-left h3 {color: var(--Gray); margin-bottom: 30px; max-width: 530px;}
		#contact {width: calc(50% - 30px); margin-right: 30px;}
			#contact h3.eyebrow {margin: 0 0 10px 0;}
			#contact p {color: var(--Gray);}
			#contact a {color: var(--Gray);}

			#contact form input[type="email"] {
				display: inline-block;      
				padding: 0 20px; margin: 0 10px 0 0; width: calc(100% - 154px);         
				cursor: pointer;
				background: var(--White); border: solid 1px var(--White); border-radius: 5px; 
				font-size: 16px; line-height: 40px; 
			}
				#contact form input[type="email"]::placeholder {color: var(--Gray);}
			#contact form .button {min-width: 134px; margin-right: 0;}
				#contact form .button:hover {background: transparent; border-color: var(--White);}

	#footer hr {margin-top: 100px; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.38);}
	
	#footer-bottom {}
		#footer-bottom p {padding: 15px 0 0 0; margin: 0; font-size: 12px;}

   
/*-----------------------------------------------------------------------------------*/
/* Shared Page styling
/*-----------------------------------------------------------------------------------*/

#page-hero { width: 100%; background: url("images/fs-hero-1.jpg") center center / cover; position: relative;}
	#page-hero .container {height: 320px; align-items: flex-end; position: relative;}
		#page-hero h1 {font-size: 64px; bottom: 60px; position: absolute; z-index: 500;}

.content ol, .content ul {padding: 0 0 20px 0; margin: 0;}
 	.content ol li, .content ul li {margin: 0 0 0 15px; padding: 3px 0 0 10px;}
    .content ol li {list-style: decimal;}
    .content ul li {list-style: disc;}


/*-----------------------------------------------------------------------------------*/
/* Home Page styling
/*-----------------------------------------------------------------------------------*/

#home-hero { z-index: 1; width: 100%; height: 100vh; background: var(--Dark); position: relative;}
	#home-hero .gradient { position: absolute; z-index: 2000; top: 0; left: 0;}
	#home-hero .foreground { height: 100vh; width: 100%; position: absolute; z-index: 2000; top: 0; left: 0; background: rgba(0,0,0,0.4);}
	#home-hero .container { position: relative; height: 100vh; min-height: 480px; display: flex; flex-wrap: wrap; align-items: flex-end;}
		#home-hero .inner-content {position: relative; z-index: 2500; bottom: 85px;}
			#home-hero h1.hero-title, #home-hero div.hero-title {margin: 0 0 45px 0; padding: 0; line-height: 1; width: 100%; font-size: 109px; color: var(--White); }
		#home-hero .slider {position: relative; width: 100%; z-index: 1; height: 100vh;}
			#home-hero .slider ul.slides { width: 100%; height: 507px;}
				#home-hero .slider ul.slides li {display:none; background-size: cover; position: relative;}

			/* nav */
			#home-hero .slider .flex-control-nav {
				position: absolute; z-index: 3000; bottom: 85px; left: 50%; transform:translateX(-50%);
				margin:0 auto; width: 100%; padding-left: 60px; padding-right: 60px; max-width: 1480px;
				display: flex; justify-content: flex-end;
			}
				#home-hero .slider .flex-control-nav li { display:inline-block; margin:0 7px 0 0; }
					#home-hero .slider .flex-control-nav li a { 
						background:var(--White); width:15px; height:15px; border-radius:50%; text-indent:-9999px; display:block; 
					}
				#home-hero .slider .flex-control-nav li .flex-active { background:var(--Orange); }
			#home-hero .slider .flex-direction-nav { display:none; }



#about {padding: 60px 0 30px 0;}
	#about h2 {padding: 0 0 20px 0; color: var(--Gray);}
	#about h3 {padding: 0 0 20px 0;}
	#about ul {}
		#about ul li {
			background: var(--LtGray) url(images/icon-md-checkmark-circle.svg) no-repeat 25px center / 19px 19px;
			list-style: none; border-radius: 5px; font-size: 24px; font-weight: 600;
			padding: 25px 25px 25px 60px; margin: 0 0 10px 0;
		}

#gallery {padding: 30px 0 60px 0;}
	#gallery ul {display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin: 0 -15px;}
		#gallery ul li {width: calc(33.333% - 30px); margin: 15px;}
			#gallery ul li p {color: var(--Gray); padding: 0; margin: 25px 0 10px 0;}

#pricing {padding: 60px 0;}
	#pricing .container .inner-content {display: flex; flex-wrap: wrap; width: 100%; padding: 25px; border-radius: 5px; background: var(--LtGray);}
		#pricing .column-right .button {float: right;}

			#pricing h2 {color: var(--Gray); margin-bottom: 10px;}

		#pricing table {border-collapse: collapse; width: 100%; padding: 0; margin: 50px auto 25px auto;}
			#pricing table th {
				text-align: left; text-transform: uppercase; font-size: 15px; letter-spacing: 1.5px; font-weight: 700;
				padding: 0 0 20px 0; color: var(--Gray);
				border-bottom: solid 2px var(--Gray); 
			}
			#pricing table td { padding: 15px 0; vertical-align: top; border-bottom: solid 1px var(--Gray); }
			#pricing table tr:last-of-type td { border-bottom: none; }
				#pricing table td:nth-child(1) {width: 25%;} /* type */ 
				#pricing table td:nth-child(2) {width: 15%; font-weight: bold;} /* size */ 
				#pricing table td:nth-child(3) {width: 20%; padding-right: 25px; color: var(--Gray);} /* pricing label */
				#pricing table td:nth-child(4) {width: 15%; font-weight: bold;} /* price amt */
				#pricing table td:nth-child(5) {width: 25%;} /* avail */

#reviews {position: relative;}
	#reviews .gradient {height: 206px; background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);}
	#reviews .container {padding-top: 60px; padding-bottom: 60px; position: relative; z-index: 2000; display: flex; flex-wrap: wrap; justify-content: center;}
		#reviews h2 {text-align: center; margin: 0 auto 5px auto; width: 100%; color: var(--Gray);}
		#reviews h3 {text-align: center; margin: 0 auto 30px auto; width: 100%;}
		#reviews ul {display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin: 0 -15px;}
			#reviews ul li {
				width: calc(33.333% - 30px); background: var(--White); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.09);
				padding: 25px; margin: 15px; border-radius: 5px;
				text-align: center;
			}
				.pic {margin: 10px auto; width: 60px; height: 60px; border-radius: 50%;}
				.stars {margin: 10px auto;}
				#reviews ul li p {margin: 15px auto 30px auto;}
				.name {font-weight: bold; margin: 15px auto;}
				.stars {margin: 0 auto; color: var(--Gray);}

/*-----------------------------------------------------------------------------------*/
/* Book a Unit
/*-----------------------------------------------------------------------------------*/

#book-unit-form {padding: 60px 0;}
	#book-unit-form .container {justify-content: center; width: 100%;}
		#book-unit-form .container > p {width: 100%; text-align: center; font-size: 24px;}
		#book-unit-form form {width: 100%; min-width: 600px; max-width: 600px; background: var(--LtGray); margin: auto; padding: 20px; border-radius: 5px; }
			#book-unit-form form .field { margin:0 0 20px 0; width: 100%; }
			#book-unit-form form .field p { margin: 0; padding: 0; }
				#book-unit-form form input[type=text],
					#book-unit-form form input[type=url],
					#book-unit-form form input[type=email] { 
						font-size: 14px; width:100%; border:1px solid #C4C4C4; height:40px; line-height:40px; background:var(--White); padding:0 15px; border-radius: 5px; 
					}
					#book-unit-form form textarea { 
						font-size: 14px; width:100%; border:1px solid #C4C4C4; height:120px; background:var(--White); padding:15px 15px; border-radius: 5px; 
					}
					#book-unit-form form input[type=submit] { 
						transition:all 0.3s ease 0s; display:inline-block; color:var(--White); background: var(--Orange);
						height:44px; width:166px; text-align:center; cursor:pointer; border:none; border-radius: 5px; 
						font-size: 16px; font-weight: 600;
					} 
						#book-unit-form form input[type=submit]:hover { background: var(--Dark); color:var(--White); }
					#book-unit-form form .submit-field { margin:15px 0 0 0; }
						#book-unit-form form .submit-field p { margin: 0 !important;}