@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

/* reset */
* {  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 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, caption, article, aside, canvas, details, embed, table, tbody, tfoot, thead, tr, th, td, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: 100% 'Open Sans', Arial, sans-serif;  vertical-align: baseline; font-weight: 300; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { line-height: 1; }ol, ul { list-style: none; }blockquote, q {	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table {	border-collapse: collapse; border-spacing: 0; } *:focus {outline: 0;} input[type=submit] { -webkit-appearance: none; } input, textarea, button { outline:0; border: none; font-family: 'Open Sans', Arial, sans-serif; font-weight:300; }

/* body */
html { overflow-y: scroll; font-size: 1.125em; }
body { padding: 0; margin: 0; }
a { text-decoration:none; }
img { display:block; margin: 0; padding: 0; width: 100%; height: auto; }

/* text */
p { color:#222; }
p b , p strong { font-weight: bold; }
p em { font-style:italic; }
a { color:#1fa2cd; }
a:hover { color: #004f69; }
a.inactive { color:#b8b8b8; }

/* text colours */
.blue { color:#1fa2cd; }
.darkBlue { color: #004f69; }

/* font styles */
h1 { color:#1fa2cd; text-transform:uppercase; font-weight: 700; font-size: 1.333em; }
h2 { color:#004f69; font-weight: 700; margin-bottom: 20px; }
.inner p { margin: 0 0 20px; }
.inner p:last-child { margin: 0 0 0 0; }
.inner h3 { font-weight: 700; }
ul { list-style:inside disc; padding: 0 0 30px 20px; margin-left: 0; text-indent: -1em;}
ul li { margin: 0 0 10px; font-size: 1em; }

/* backgrounds */
.bgBlue { background:#1fa2cd; }
.bgDarkBlue , .selected { background: #004f69; }
.bgGrey { background:#f5f5f5; }

/* wraps */
.clear { width: 100%; height: 0px; margin: 0; padding: 0; clear:both; }
.full { width: 100%; padding: 30px 0; }
.inner { max-width: 1152px; width: 100%; margin: 0 auto; position:relative; }
.full:after { content: ''; display:block;clear:both; }
#titles { width: 100%; border-bottom: solid 1px #eee; margin: 0 0 20px; }
.left { float:left; width: 50%; padding: 0 15px 0 0; }
.right { float:right; width: 50%; padding: 0 0 0 15px; }
.full.noPad {  }

/* header */
header { position:relative; z-index: 0; }
.homeHeader { height: 670px; background: url('../images/headers/123selfstorage.jpg') no-repeat; background-size: cover; }
.pageHeader { height: 430px; }
.pageHeader.pricingbg { background: url('../images/headers/123selfstorage-pricing.jpg') no-repeat; background-size: cover; }
.pageHeader.sitesbg { background: url('../images/headers/123selfstorage-sites.jpg') no-repeat; background-size: cover; }
.pageHeader.containersbg { background: url('../images/headers/123selfstorage-containers.jpg') no-repeat; background-size: cover; }
.pageHeader.faqbg { background: url('../images/headers/123selfstorage-faq.jpg') no-repeat; background-size: cover; }
.pageHeader.classicbg { background: url('../images/headers/u-store-storage-classic-cars.jpg') no-repeat; background-size: cover; }
.mapSection { height: 670px; }

.navHeader { height: 235px; position:relative; background:#fff; box-shadow: 0px 0px 50px rgba(0,0,0,0.16); z-index: 100; }

/*
#selfstorage { display:block; background: url('../images/123selfstorage_long.svg') no-repeat; width: 600px; height: 80px; position:absolute; top: 45px; left: 30px; z-index: 10; background-size: contain; }
*/
#selfstorage { display:block; background: url('../images/123selfstorage.svg') no-repeat; width: 250px; height:150px; position:absolute; top: 20px; left: 30px; z-index: 10; background-size: contain; }

#strapline { position:absolute; text-align:center; bottom: 20px; width: 100%; padding: 0 30px; color:#fff; font-size: 1.2em; text-transform:uppercase; font-weight: bold; font-style: italic; text-shadow: 1px 1px 2px rgba(0,0,0,1); }

#contactUs { position:absolute; top: 30px; right:30px; height: 90px; }
#sites { display:block; list-style:none; font-size: 0.9em; text-indent: 0; }
#sites a { text-transform:uppercase; font-weight: bold; display:block; width: 100%; font-size: 0.800em; }
#sites li { display:block; border: solid 1px #eee; border-radius: 2px; padding: 20px; float:right; margin-left: 30px; width: 200px; height: 130px; position:relative;  }
#sites .tel { position:absolute; height: 50px; line-height: 50px; background: #1fa2cd; color:#fff; font-weight: bold; text-align:center; bottom: 0px; left: 0px; width: 100%; border-radius: 0 0 2px 2px; }

nav { width: 100%; position:absolute; bottom: 0; left: 0; height: 50px; }
nav a { transition: all .2s ease-in-out; display: block; padding: 0 20px; height: 50px; line-height: 50px; color: #fff; float:left; font-size: 0.8em; }
nav a:hover { background: #004f69; color:#fff; }

/* call to action */
.cta { background: url('../images/cta-bg2.jpg') no-repeat; background-size: cover; height: 310px; padding-top: 105px; }
.cta.alt { background: url('../images/cta-bg.jpg') no-repeat; background-size: cover; }
.ctaButton { transition: all .2s ease-in-out; width: 520px; height: 100px; border-radius: 100px; background:#1fa2cd; color:#fff; text-shadow: -1px -1px 2px #004f69; box-shadow: 0 0 20px rgba(0,0,0,.3); margin: 0 auto; display:block; text-align:center; line-height: 100px; font-size: 2em; font-weight: 700; }
.ctaButton:hover { background:#004f69; color:#fff; }

/* homepage */
.siteBox { background:#fff; box-shadow: 0 0 20px #e1e1e1; text-align:left; float:left; width: 360px; min-height: 170px; padding: 15px; cursor:pointer; position:relative; }
.siteBox.mid { margin: 0 30px; }
.siteBox.thin { min-height: 100px; }
.siteBox h3 { font-weight: 700; font-size: 1.333em; margin: 0 0 15px; }
.siteBox p { margin: 0 0 25px; }
.siteBox span { font-size: 0.777em; font-weight: bold; }
.siteBox .button { position:absolute; bottom: 0px; right: 0px; left: 0px; padding: 0 20px 20px; text-align:right; transition: all .2s ease-in-out; color:#1fa2cd; display:block; font-size: 0.8em; text-transform:uppercase; font-style:italic; font-weight:bold; }
.siteBox:hover .button { color: #004f69; }

/* page titles */
.pageTitle { color:#004f69; position:absolute; top: -98px; left: 0; background: #fff; padding: 0 30px; height: 68px; line-height: 68px; display:block; float: left; }
.pageTitle .siteTitle { color:#fff; font-weight: 700; position:absolute; top: 0; left: 100%; background: #1fa2cd; padding: 0 30px; height: 68px; line-height: 68px; display:block; width:auto; float: left; white-space: nowrap; }
.pageTitle.sitePage {  }
.pageTitle.sitePage span { color:#0080aa; }

.content.floated p { display:block; float:left; width: 50%; padding: 0 30px; }

/* storage site */
.pagePad { padding: 80px 0 0 0; }
#pageTargets { height: 68px; position:absolute; top: -30px; left: 0; }
#pageTargets .targ { transition: all .2s ease-in-out; background: #1fa2cd; float:left; padding: 0 30px; height: 68px; line-height: 68px; color:#fff; cursor:pointer; }
#pageTargets .targ:hover { background: #004f69; }

.pricingSection h3 { margin: 0 0 30px; }
.pricingTable { background: #fff; width: 100%; margin: 0 0 30px; }
.pricingTable td , .pricingTable th { border: solid 1px #f5f5f5; text-align:center; padding: 20px; font-weight: 700; }
.pricingTable th { font-weight: 700; color:#1fa2cd; }
.pricingTable td span { font-weight: 700; } 

.vatButton { height: 40px; margin: 0 0 30px; } 
.inner .vat , .inner .vat_swap { display:block; text-align:center; cursor:pointer; width: 300px; background: #fff; height: 40px; line-height: 40px; border-radius: 4px; }
.inner .vat:hover , .inner .vat_swap:hover { color:#1fa2cd; }
.inner .vat_swap { display:none; }

.bigBlueButton { transition: all .2s ease-in-out; width: 100%; max-width: 450px; height: 60px; border-radius: 100px; background:#1fa2cd; color:#fff; text-shadow: -1px -1px 2px #004f69; box-shadow: 0 0 20px rgba(0,0,0,.1); margin: 0 auto; display:block; text-align:center; line-height: 60px; font-size: 1em; font-weight: 700; }
.bigBlueButton:hover { background:#004f69; color:#fff; }

#map-canvas { height:440px; position:relative; } 

.full.tiny { padding:0; }
#siteAddress { width: 300px; height: auto; background:rgba(255,2552,255,0.9); padding: 20px; position:absolute; bottom: 30px; right: 30px; }
#siteAddress .hide { height: 30px; width: 30px; text-align:center; line-height: 30px; background:rgba(0,0,0,0.1); border-radius: 50%; position:absolute; bottom: 15px; right: 15px; cursor:pointer; } 

/* image galleries */
#photoGallery {  }
#photoGallery .photo { overflow:hidden; width: calc(33.333333% - 30px); height: 300px; float:left; background:#fff; border: solid 1px #eee; box-shadow: 0 0 20px rgba(0,0,0,0.1); margin: 0 15px 30px; position:relative; }
#photoGallery .photo img { position:absolute; top: 0px; left: 0px; height: 100%; width: auto; }

/* FAQ */
.faqs h3 { color:#000; }

.faq { width: 100%; margin: 0 0 30px; cursor:pointer; position:relative; display: table; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
.faq .question { transition: all .2s ease-in-out; color:#fff; background: #1fa2cd; min-height: 68px; padding: 0 80px 0 30px; }
.faq .question:hover { background:#004f69; }
.faq .question .title { height: 68px; font-size: 1.500em; display: table-cell; vertical-align:middle; }
.faq:last-child { margin: 0 0 0; }
.arrow { background: url('../images/faq_arrow.png') no-repeat left top; height: 45px; width: 45px; position:absolute; top: 12px; right: 12px; }
.answer { display:none; padding: 30px; background: #f2f2f2; font-size: 1.250em; }

.faq.open {  margin: 0 0 30px; }
.faq.open .question { background: #004f69; }
.faq.open .arrow { background: url('../images/faq_arrow.png') no-repeat right top; }
.faq.open .answer { display:block; }
    
/* contact page */    
#map { width: 100%; height :670px; position:absolute; top: 0; left: 0; z-index: 0; }
#cover { position:absolute; top: 0; left: 0; height: 670px; width: 100%; z-index: 10; }
#cover .coverClose { background: url('../images/hideCover.png') no-repeat left top; width: 59px; height: 59px; z-index: 20; position:absolute; bottom: 30px; right: 20%; cursor:pointer; }

.contactForm {  }
.contactForm input , .contactForm textarea { width: 100%; height: 60px; line-height: 60px; background: #f5f5f5; border: solid 1px #eee; font-size: 1.2em; color:#222; padding: 0 30px; margin: 0 0 30px; }
.contactForm textarea { font-size: 1em; height: 150px; }
.contactForm .send { width: 50%; background: #1fa2cd; color:#fff; border:none; border-radius: 5px; margin: 0 auto; transition: all .2s ease-in-out; }
.contactForm .send:hover { background:#004f69; color:#fff; }

.mailMessage { background:rgba(132,181,68,1.00); padding: 14px; margin: 0 0 15px; color:#fff; }
.mailMessage.oops { background:rgba(191,38,41,1.00); }

/* footer */
footer { padding: 30px 0; font-size: 0.777em; position:relative; }
footer .btt { position:absolute; right: 0; top: 30px; height: 52px; width: 52px; background: url('../images/top.png') no-repeat; cursor:pointer; }

@media all and (max-width : 1200px) { /* screens below this size will display these styles (this is 1024 break point really) */
	
    /*body { font-size: 85%; }*/
    .inner { max-width: 960px; }
    .homeHeader { height: 400px; }
    .siteBox { width: 300px; }
	
	#sites li { width: 180px; padding: 15px; margin-left: 15px; }

	}

@media all and (max-width : 980px) { 
	
    body { font-size: 90%; }
    .inner { max-width: 870px; }
    .homeHeader { height: 350px; }
    .siteBox { width: 270px; }
    
	#selfstorage { width: 200px; height: 100px; }
	
	#sites li { height: 90px; }
	#sites .tel { height:30px; line-height:30px; }
	
    .navHeader { height: 200px; }
	/*nav { height: 48px; }
    nav a { padding: 0 15px; height: 48px; line-height: 48px; }*/
    
	}

@media all and (min-width: 890px) and (max-width : 920px) {
	
   /* body { font-size: 84%; }*/
   .homeHeader { height: 350px; }
    
    }
    
@media all and (max-width : 920px) { 
	
    .inner { max-width: 100%; padding: 0 30px; }
    
    footer.inner { padding: 30px; }
	
    .siteBox { width: 100%; text-align:left; min-height: 100px; margin: 0 0 30px; position:relative; }
   	.siteBox.mid { margin: 0 0 30px; }
    .siteBox h3 { margin: 0; width: calc(100% - 95px); }
    .siteBox p { margin: 0; display:inline-block; width: calc(100% - 95px); }
    .siteBox span { margin: 0; display:none; }
    .siteBox .button { position:absolute; }

    }    

@media all and (max-width : 870px) { 
	
    /*body { font-size: 95%; }*/
    
    /*.navHeader { height: 170px; }*/
    
    nav { position:absolute; right: 30px; left: auto; top: 50px; z-index: 100; width: 50px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    nav.bgBlue { background:none; } 
    nav:before { border-radius: 50%; content: '\2261'; font-size: 2em; display: block; position: absolute; left: auto; right: 0; top: 0; text-align:center; line-height: 40px; width: 40px; height: 40px; cursor: pointer; color:#fff; background:#1fa2cd; }
    nav a { display:none; }
    
    nav.bgBlue.open { border-radius: 5px; width: 300px; background:#1fa2cd; padding: 15px; height: 310px; line-height: 100%; }
    nav.bgBlue.open a { display:block; color:#fff; width: 100%; float:none; height: 40px; line-height: 40px; padding: 0px 15px; border-radius: 5px; }
    nav.bgBlue.open:before { content: '\00d7'; }
	
}

@media all and (max-width : 768px) {
	
    .left { float:none; width: 100%; padding: 0 0 30px 0; }
	.right { float:right; width: 100%; padding: 0 0 0 0; }
    .content.floated p { float:none; width: 100%; padding: 0; }
    
    .cta { height: 200px; padding-top: 65px; }
	.ctaButton { width: 80%; height: 70px; line-height: 70px; font-size: 1em; }
    
    .navHeader { height: 150px; }
	
    nav { top: 15px; }
    
	#selfstorage { top: 15px; left: 0; width: 100%; background-position: center center; height: 120px; }

	#contactUs { display:none; }
    
    h1.pageTitle { position:relative; top: 0; padding: 0; height: auto; line-height: 140%; float: none; background: none; margin: 0 0 20px; }
	h1.pageTitle .siteTitle { color:#111; background: none; position:relative; left: auto; padding: 0; min-height: 100%; height: auto; margin: 0 0 20px; line-height: 140%; width:100%; display: block; clear:both; white-space:normal; }
	
    #pageTargets { height: auto; position:relative; top: 0; width: 100%; clear:both; }
    #pageTargets:after { content: ''; display:block;clear:both; }
    #pageTargets .targ { padding: 10px; height: auto; line-height: 100%; }
    
    .pagePad { padding: 30px 0 0 0; }

	.bigBlueButton { width: 100%; max-width: 100%; height: auto; padding: 20px 0; line-height:120%; }
	
    .faq .question { padding: 0 80px 0 15px; }
    .faq {  margin: 0 0 10px;  }
    .faq .question .title { padding: 10px 0; font-size: 1em; }
    .answer { font-size: 1em; padding: 15px; }

    
}

@media all and (max-width : 500px) { 
	
    nav { right: 20px; }
    
    h1.pageTitle { text-align:center; }
    #pageTargets .targ { width: 100%; text-align:center; }
    
    .sitesMenu .inner { cursor:pointer; width: auto; height: 60px; background: #fff; border: solid 1px #ccc; padding: 0; margin: 0 30px; z-index: 10; }
    .sitesMenu .inner:before { content:"Select a storage site"; z-index: 1; position:absolute; top: 0; left: 0; height: 60px; line-height: 60px; padding: 0 0 0 20px; }
    .sitesMenu .inner:after { content: '\00BB'; position:absolute; z-index: 2; top: 0; right: 0; width: 58px; height: 58px; line-height: 50px; transform:rotate(90deg); background: #333; color:#fff; font-size: 2em; text-indent: 25px; }
    
    .sitesMenu .siteBox { display:none; z-index: 3; box-shadow: none; width: calc(100% + 2px); min-height: 100%; margin: 0; position:relative; left: -1px; border-bottom: solid 1px #ccc; border-left: solid 1px #ccc; border-right: solid 1px #ccc; }
    .sitesMenu .siteBox.mid { margin: 0; }
    .sitesMenu .siteBox h3 { margin: 0; width: 100%; font-size: 1em; font-weight: 300; }
    .sitesMenu .siteBox p , .sitesMenu .siteBox span , .sitesMenu .siteBox .button { display:none; }
    .sitesMenu .siteBox:hover { background:#1fa2cd; color:#fff; }
    
    .sitesMenu .inner.open .siteBox { display:block; }
    
}

@media all and (max-width : 370px) { 

    .navHeader { height: 70px; }
    #selfstorage { width: 210px; top: 22px; }
    #strapline { display:none; }
    
}

@media print {
  
  
  
}