@charset "utf-8";

/* -----------------------------------------------------

* Filename: styles.css
* Description: master external style sheet for 3aselfstorage web site
* Version: 2
* Website: https://3aselfstorage.com
* Author: Automatit, Inc.

== ANCHOR =========================================

	@reset				Standard Reset

-------------------------------------------------------*/

/* @reset
-------------------------------------------------------*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {margin: 0; padding: 0;}
html {height: 100%; overflow-y: scroll;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img {border: 0; -ms-interpolation-mode: bicubic;}
a {outline: none;}

/* @general
------------------------------------------------------*/	
body {margin: 0; padding: 0; background: #1c1c1c url(../images/bg.jpg) repeat fixed; height: 100%;}
body, select, input {font: 13px Tahoma, sans-serif; color: #000;}

/* @typography
------------------------------------------------------*/
a, visited {text-decoration: underline; color: #B51F1F;}
a:hover {text-decoration: none;}

h1 {max-width: 950px; width: 95%; margin: 30px auto; color: #fff; font: bold 36px Tahoma, serif; text-shadow: 1px 1px 5px #B51F1F;}
h2 {font: bold 20px Tahoma, serif; color: #404041;}
h3 {color: #B51F1F; font: bold 20px Tahoma, serif; margin-bottom: 5px;}
p, address {text-align:left; padding: 0 0 16px;}
/* dl {padding: 0 0 10px 0;}
   dt {clear: left; float: left; font-weight: bold;}
   dd {padding: 0 0 5px 70px;} */
ul, ol {margin:0; padding: 3px 0 5px 0;}
li {display:list-item; margin: 0 0 10px 20px;}

/* @defined classes
------------------------------------------------------*/	
.clearFloat {clear:both; height:0; font-size:1px;}
.wrap {width: 950px; margin: 0 auto;}
.headwrap{width: 950px; margin: 0 auto;}
.btnRed {background-image: url(../images/btn-red.png); width: 182px; height: 27px; color: #fff; text-decoration: none; display: inline-block; font-size: 16px; margin: 0 5px; padding: 5px 0 0 11px; font-weight: normal; transition: text-shadow 0.5s;}
	.btnRed strong {font-size: 18px; margin-right: 7px;}
	.btnRed:hover {text-shadow: 0 0 5px #fff;}

/* @defined ids
------------------------------------------------------*/
header {background-color: #fff; width: 100%; box-shadow: 0 0 20px #4D4D4D; padding-top: 15px;}
header #mobilenavpay {display: none; width: 110px; float: right; margin: 10px 10px 10px 0;}
header .mobile_nav {text-decoration: none; margin-top: 5px; display: block; color:#003b76; font-size: 20px; font-weight: 400; text-align: center;}
	header .mobile_nav:before {content: "\2261"; font-size: 28px; margin-right: 5px; font-weight: 600;}
	header #logo {float: left; width: 121px; height: 65px; margin-left: 40px;}
	header #giveCall {float: right; width: auto; color: #EB1C24; font: bold 21px Tahoma, serif; margin-right: 50px;}
header #giveCall a {color: #EB1C24; text-decoration:none;}
nav {float: right; text-transform: uppercase; width: auto; margin: 18px 20px 0 0; padding: 7px 0; font-size: 14px; position: relative;}
	nav li {list-style: none; display: inline; margin: 0 15px; letter-spacing: 2px;}
	nav a {text-decoration: none; transition: text-shadow 0.5s;}
		nav a:hover {text-shadow: 0 0 3px #EB1C24;}
	nav .btnLogin {background-color: #B51F1F; background: -webkit-radial-gradient(circle, #D60000, #B90F0F); background: -moz-radial-gradient(circle, #D60000, #B90F0F); background: -ms-radial-gradient(circle, #D60000, #B90F0F); color: #fff; text-transform: none; padding: 7px 15px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
		nav .btnLogin:hover {text-shadow: 0 0 3px #fff;}
	nav ul {display: none; margin: 0; padding: 0; position: absolute; width: 150px; font: normal 14px Arial, sans-serif; z-index: 8; left: 90px;}
	nav li:hover ul {display: block;}
	nav ul li {letter-spacing: 0; margin: 0;}
	nav ul li a {background: #fff; color: #B51F1F; display: block; font-size: 11px; height: auto; margin: 0; padding: 15px; text-decoration: none; width: 150px;}
#contentTop {background: url(../images/bg-content-top.png) repeat-x; width: 100%; height: 7px;}
#content {background: #fff; width: 100%; min-height: 500px; padding: 30px 0;}

/* Home Page */
.arrow-right {float: right; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #2a91d3; margin-right: 20px;}
.rotate-arrow {transform: rotate(90deg);}
#homeTop {padding: 0 10px; width: auto; max-width: 950px; margin: 10px auto; min-height: 300px;}
	#homeTop .premiereService {float: left; width: 320px; color: #fff; font-size: 14px; margin-top: 30px;}
		#homeTop .premiereService a {text-decoration: none; color: #fff;}
	#homeTop #slideshow {float: right; width: 630px; margin-top: 20px;}
#discountBanner {background-image: url(../images/bg-discount.png); width: 192px; height: 455px;  position: absolute; z-index: 5; margin: -140px 0 0 5px; color: #fff; text-align: center; padding-top: 25px; font-size: 16px; float: left;}
#homeContent {background: #fff url(../images/bg-content.jpg) repeat-x; width: 100%; min-height: 425px;}
#mobilelocations{display: none; overflow: hidden; width: auto; height: 160px; background-color: rgb(211, 211, 211);}
#mobilepickLocation{display: none;}
#mobilepickLocation .facilityDiv {background-image: url(../images/btn-red.png); width: 182px; height: 27px; color: #fff; text-decoration: none; display: inline-block; font-size: 16px; margin: 0 5px; padding: 5px 0 0 11px; font-weight: normal; transition: text-shadow 0.5s; float: none;}
	#mobilepickLocation .facilityDiv strong {font-size: 18px; margin-right: 7px;}
	#mobilepickLocation .facilityDiv:hover {text-shadow: 0 0 5px #fff;}
#pickLocation {float: left; color: #808083; font-weight: bold; font-size: 17px; margin: 15px 0 0px 210px; position: absolute;}
	#pickLocation .facilityDiv {background-image: url(../images/btn-red.png); width: 182px; height: 27px; color: #fff; text-decoration: none; display: inline-block; font-size: 16px; margin: 0 5px; padding: 5px 0 0 11px; font-weight: normal; transition: text-shadow 0.5s; float: none;}
		#pickLocation .facilityDiv strong {font-size: 18px; margin-right: 7px;}
		#pickLocation .facilityDiv:hover {text-shadow: 0 0 5px #fff;}
#mobilebackground{display: none; height: 40px; width: 100%; background: #1c1c1c url(../images/bg.jpg) repeat fixed; background-position: 0px 20px;}
#mobspecicont{margin-top: 2px; display: none; background-color: #c90505; color: #fff; padding: 20px 0px; overflow: hidden;}
#mobilespecials{margin-left: auto; margin-right: auto; width: 282px;}
.special1{float: left; text-align: center;}
	.leftspecialline1{font-size: 72px; font-weight: 700;}
	.leftspecialline2{font-size: 26px;}
	.leftspecialline3{font-size: 42px; font-weight: 700; text-decoration: underline;}
.vertline{margin: 0 20px; float: left; width: 2px; background-color: #fff; height: 180px; display: none;}
.special2{font-size: 14px; text-align: center; float: right;}
	.rightspecialine1{font-size: 50px; font-weight: 700; line-height: 82px;}
	.rightspecialine2{font-size: 34px; line-height: 20px;}
	.rightspecialine3{display: block; line-height: 50px; font-size: 15px; margin-bottom: -13px;}
.aboutmobile{display: none; overflow: hidden; width: 100%; font-size: 20px; font-weight: 700; color: #2a91d3; background-color: rgb(211, 211, 211); padding: 5px 10px;}
#intro {float: left; width: 655px; height: 350px; overflow: hidden; margin: 70px 0px 0 210px; font-size: 16px; position: relative; z-index: 1;}
	#intro .features {color: #919396; text-transform: uppercase; font-size: 20px; display: inline-block; margin: 5px 7px;}
		#intro .features img {float: left; margin: -5px 10px 0 0;}
#mapTab {float: right; margin-top: 65px; position: relative; z-index: 2;}
#greybar{float: left; margin: 10px 0px; display: none; height: 20px; width: 100%; background-color: rgb(211, 211, 211);}
#map {width: 100%; height: 300px; border-radius: 15px; border: 2px solid #B51F1F; margin-top: 10px;}
.facilityDiv {text-decoration: none; float: left; display: block; width: 45%; margin-bottom: 30px; color: #fff; background-color: #B51F1F; padding: 20px; border-radius: 15px;}
	.facilityDiv h2 {color: #fff;}
	.facilityDiv:hover {background-color: #3093d4;}
	.facilityDiv img {float: left; width: 150px; height: 100px; border: 1px solid #fff; border-radius: 10px; margin-right: 25px;}
.facilityDivright {text-decoration: none; float: right; display: block; width: 45%; margin-bottom: 30px; color: #fff; background-color: #B51F1F; padding: 20px; border-radius: 15px;}
	.facilityDivright h2 {color: #fff;}
	.facilityDivright:hover {background-color: #3093d4;}
	.facilityDivright img {float: left; width: 150px; height: 100px; border: 1px solid #fff; border-radius: 10px; margin-right: 25px;}
/* INTERNAL PAGES */
#locationbox{background-color: #54afe9; color: #fff; font-size: 15px; padding: 20px; border-radius: 15px;}
	#locationbox img{float: left; margin-right: 40px; border-radius: 15px; border: 2px solid #fff;}
#locationtext{font-size: 15px;}
#packingtipssection{float: right; max-width: 620px; width: auto;}

footer {color: #fff; text-align: center; width: 950px; margin: 30px auto;}
	footer a {color: #fff; text-decoration: none; text-transform: uppercase; margin: 0 30px; font-weight: bold;}
	footer a:hover {text-decoration: underline;}

#map_phone {display: none;}
	#map_phone .btnLine {float: left;}
	#map_phone img {float: left;}
.mapCallBtns {width: 80%; display: block; overflow: hidden; margin-left: auto; margin-right: auto;}

#contact-wrap {width: 100%; float: left; display: block; clear: both; margin-bottom: 20px;}
div.location {width: 100%; float: left;}
#locationbox2 {background-color: #54afe9; color: #fff; font-size: 15px; border-radius: 15px; width: 45%; padding: 3%; float: left;}
#locationbox2 img {max-width: 100%; height: auto; margin-bottom: 20px;}
#contact {width: 37%; float: right; border: 2px solid #2B90D2; padding: 3%; border-radius: 15px;}
.form-group {margin-bottom: 20px; float: left; display: block; width: 100%;}
.form-group input {width: 96%; float: left; padding: 2%;}
button.btn.btn-primary {background-color: red; border: 1px solid red; color: #fff; font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 10px 40px;}

@media screen and (max-width: 767px) {
div.location {width: 100%; margin: 0px;}
#locationbox2, #contact {width: 90%; margin-bottom: 20px; padding: 5%;}
}