/* HTML5 RESET */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body { line-height:1; }

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

ul { list-style:none; padding: 0; margin: 0; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
	cursor: pointer;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* MAIN */

body {
	background: #f1f1f1;
	width: 100%;
	max-width: 995px;
	margin: 10px auto;
	padding: 0 20px;
	font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	line-height: 14px;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5 { font-weight: normal; }
em { font-style: normal; }
strong { font-weight: normal; }

.h1, .h2, .h3 {
	font-weight: bold;
}

.h1 {
	font-size: 18px;
	line-height: 28px;
	color: #e60000;
	margin: 0 0 10px;
}

.h3 {
	font-size: 13px;
	line-height: 33px;
}

p { margin-bottom: 15px; }

address, cite { font-style: normal; }

.page-intro {
	display: block;
	font-weight: normal;
	font-size: 14px;
	line-height: 22px;
	margin: 5px 0 20px;
}

dt { font-weight: bold; margin-bottom: 10px; }

.big { font-size: 14px; }
.bigger { font-size: 16px; }
.huge { font-size: 18px; }

/* HEADER */

.header {
	font-family: 'Tahoma', 'Helvetica', sans-serif;
}

.header address {
	font-size: 15px;
	margin: 30px 0 0 15px;
	float: left;
}
.header address .tel {
	color: black;
	font-size: 25px;
	font-weight: bold;
	line-height: 35px;
}

#site-title > a {
	display: block;
	float:left;
}

#tagline {
	text-align: center;
	width: 200px;
	padding-top: 12px;
	background-color: black;
	background-image: -webkit-gradient(
	 linear,
	 left bottom,
	 left top,
	 color-stop(0.1, #A82424),
	 color-stop(0.35, #B34A4A),
	 color-stop(0.65, #B34A4A),
	 color-stop(0.9, #A82424)
	 );
	background-image: -moz-linear-gradient(
	 center bottom,
	 #A82424 10%,
	 #B34A4A 35%,
	 #B34A4A 65%,
	 #A82424 90%
	 );
	border-radius: 9px;
	color: white;
	font: 25px Tahoma, Geneva, sans-serif;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	-webkit-box-shadow: 2px 5px 12px #555;
	-moz-box-shadow: 2px 5px 12px #555;
	box-shadow: 2px 5px 12px #555;
}


/* NAV */

.header nav {
	clear: both;
	overflow: hidden;
	padding-top: 15px;
	margin-bottom: 20px;
}
.header nav li {
	float: left;
	width: 11.111%;
	height: 38px;
}
.header nav a {
	display: block;
	background-color: #C00;
	background-image: -webkit-gradient(
	 linear,
	 left bottom,
	 left top,
	 color-stop(0.14, #C00),
	 color-stop(0.7, #EB4444),
	 color-stop(0.79, #F24141)
	 );
	background-image: -moz-linear-gradient(
	 center bottom,
	 #C00 14%,
	 #EB4444 70%,
	 #F24141 79%
	 );
	 font: 13px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	text-align: center;
	color: white;
	height: 100%;
	line-height: 38px;
	
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: silver;
}

.header nav a.two-line-item { line-height: inherit; padding-top: 5px; }
.header nav a:hover { background: #e60000; }
.header nav .current a {
	background-color: #800 !important;
	background-image: -webkit-gradient(
	 linear,
	 left bottom,
	 left top,
	 color-stop(0.3, #992020),
	 color-stop(0.68, #A66666),
	 color-stop(0.92, #C26161)
	 );
	background-image: -moz-linear-gradient(
	 center bottom,
	 #992020 30%,
	 #A66666 68%,
	 #C26161 92%
	 );
}

footer {
	color: #222929;
	background-color: white;
	background-image: -webkit-gradient(
	 linear,
	 left bottom,
	 left top,
	 color-stop(0, #F1F1F1),
	 color-stop(1, white)
	 );
	background-image: -moz-linear-gradient(
	 center bottom,
	 #F1F1F1 0%,
	 white 100%
	 );
}
footer a, .read-more { color: #222929; }


/* CONTENT */

#content {
    border: 1px solid #BBBBBB;
    border-radius:5px;
    padding: 20px;
    background: white;
    font-size: 13px;
    overflow: hidden;
	clear: both; width: 100%; 
	max-width: 995px;
}

.hide { display: none; }
#about {
	padding: 30px 60px;
	background: white;
	border: solid 1px #BBB;
	border-radius: 10px;
}


/* UTILITY BELT */
.block { display: block; }
.fl { float: left;}
.fr { float: right; }
.pad10 { padding: 10px; }
.pad20 { padding: 20px; }
.red { color: #e60000 !important; }
.round { border-radius: 10px; }
.centertext { text-align: center; }
.righttext { text-align: right; }
.i { font-style: italic; }
.b { font-weight: bold; }
.cap { text-transform: uppercase; }

/* lists */
.list { margin: 0 0 20px 20px; }
.bullet { list-style: disc; }
.dash.list li:before { content: "- "; }
.dash.list { margin-left: 0; }
.circle { list-style: circle; }

/* style for responsive */
img {max-width:100%;}
* {box-sizing: border-box;}
#main { clear:both;}
.mobile_menu {display:none;}
.bars {display:none;}
#main h1 {font-size:18px; margin-bottom: 10px; line-height: 26px;}
#additional-services section .spec_r_ser h3 {height:auto !important;}
.mobile_logo {display:none;}

.hidden-xs{display:block;}
.hidden-md{display:none;}

.select-dropdown-sizes {text-align:center;}
#space_sizes {
  width: 250px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color:#CC0000;
  color:#fff;
  background-image: url("./img/white-arrow.png");
  background-position: right 50%;
  background-repeat: no-repeat;
}

/* CAUTION: IE hackery ahead */
#space_sizes::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    #space_sizes {
        background:none\9;
        padding: 5px\9;
    } 
}


/* for 800 */
@media (max-width: 999px) {
	#tagline {clear:both; width: 100%; margin: 10px 0 0; height: auto; padding: 5px 10px 10px;}
	#security section {padding: 0 15px; min-height: 400px;}
	#packing-tips #left {width:40%;}
	#packing-tips #right {width:60%;}
	#contact-us #left {width:100%; margin: 0 0 20px;}
	#contact-us #right {width:100%;}
	#contact-us #map_canvas {width:100%;}
	.mobile_menu {display:block;}
	.bars {display:block; position:fixed; background: #DE0C0B; padding: 10px 0 8px 20px; color: #ffffff; font-size: 24px; text-transform: uppercase; left: 0; right: 0;}
	.bars a {color:#ffffff;}
	.pc_menu {display:none;}
	body { margin: 0 auto;}
	#site-title {padding-top:47px;}
	.header address {margin:84px 0 0 15px;}
	#main {padding: 20px 0 0;}
	#tagline {display:none;}
	.header { border-bottom: 1px solid #DE0C0B; padding-bottom: 20px; overflow: hidden;}
	.spec_r_ser {width: calc(100% - 167px) !important;}
	.hidden-xs{display:block;}
	.hidden-md{display:none;}
	
	
}


/* for 768 */
@media (max-width: 799px) {
	.hidden-xs{display:block;}
	.hidden-md{display:none;}
	
}


/* for 600 */
@media (max-width: 767px) {
	.header address .tel {display:inline-block; padding-right:10px;}
	.header address {margin:10px 0 0; width: 100%; text-align: center;}
	.header.header-inner address {width: 60%; margin:40px 0 0;}
	#site-title > a {width:100%; text-align: center;}
	#locker-sizes #left-col {width:100%;}
	#locker-sizes .right-col {clear:both; width: 100% !important; margin: 20px 0 0;}
	#security section {width: 50%;padding: 0 20px;}
	#security section:nth-child(3) h3 { border-top: 1px solid #dddddd !important; padding:20px 0 0 !important; }
	#faq #left {width:100%; padding: 0 0 30px;}
	#faq #right {width:100%;}
	.hidden-xs{display:none;}
	.hidden-md{display:block;}
	#spaceImageContainerL2_sizes {padding-top: 10px;}
	#spaceImageContainer_sizes{width: 100% !important;}
	
}
	


/* for 480 */
@media (max-width: 599px) {	
	.fl {width:100%;}
	.header-inner .fl{width:40%;}
	#site-title a {width:100%;}
	#security section {width: 100% ; padding: 0; min-height: inherit; padding-bottom: 40px;}
	#security section:nth-child(2) h3 { border-top: 1px solid #dddddd !important; padding:20px 0 0 !important;  }
	#packing-tips #left {width:100%; padding: 0 0 30px;}
	#packing-tips #right {width:100%;}
	#contact-us #left address {width:100%; padding: 0 0 30px}
	#contact-us #left dl {width:100%;}
	#additional-services figure {width:100% !important; text-align: center; margin-bottom: 30px;} 
	.spec_r_ser {width:100% !important; text-align: center; padding: 0 !important;}
	.desktop_logo {display:none;}
	.mobile_logo {display:block;}
	.hidden-xs{display:none;}	
	.hidden-md{display:block;}
	#spaceImageContainerL2_sizes {padding-top: 10px;}
	#spaceImageContainer_sizes{width: 100% !important;}
	
	
	

}


/* for 360 */
@media (max-width: 479px) {
	.header address .tel {display:block;}
	#locker-sizes #content { padding:20px 0;}
	.hidden-xs{display:none;}
	.hidden-md{display:block;}	
	#spaceImageContainerL2_sizes {padding-top: 10px;}
	#spaceImageContainer_sizes{width: 100% !important;}
	
}



/* for 320 */
@media (max-width: 339px) {
	.hidden-xs{display:none;}
	.hidden-md{display:block;}
	#spaceImageContainerL2_sizes {padding-top: 10px;}
	#spaceImageContainer_sizes{width: 100% !important;}
}