@charset "UTF-8";
/* CSS Global Styles */

/* Branding Colours 
	
Dark Blue #1E4397
Med Blue #1C75BC
Light Blue #29ABE2
	
*/

/* Resets */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, hr, form, input, img, fieldset, button, table {margin: 0; padding: 0; border: 0; -webkit-text-size-adjust:none}

/* Makes sure that everything is 100% height */ 
html, body {height: 100%}

body {font-family: open-sans, sans-serif; font-weight: 400; font-style: normal; color: #707070; background-color: #F8F8F8}

h1, h2, h3 {font-weight: normal}

h1 {font-size: 2.0em; border-bottom: solid 1px #d0d0d0; padding-bottom: 7px; margin-bottom: 1.0em}
h2 {font-size: 1.8em}
h3 {font-size: 1.5em}

h1 div {display: inline-block}

a {color: #29ABE2; text-decoration: none}
a:hover {text-decoration: underline}

.clear {clear: both}

header {position: fixed; z-index: 20; left: 0; width: 100%; box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); vertical-align: middle; background-color: #FFF}
header #block-sunderlandstorage-branding a {display: block; width: 100%; height: auto}

header nav {width: 60%}
header nav ul.menu {display: flex; flex-direction: row; margin: 0; padding: 0}
header nav ul.menu li {list-style: none; flex-grow: 1; text-align: center}
header nav ul.menu li a {display: block; padding: 26px 40px 26px 16px; text-decoration: none; white-space: nowrap; color: #707070; background-image: url(sunderland-sprite@1x.png); background-repeat: no-repeat; background-position: right -10px top 0}
header #block-sunderlandstorage-main-menu ul.menu li a:hover {background-color: #f1f1f1}
header #block-sunderlandstorage-main-menu ul.menu li a.is-active {color: #000; background-position: right -10px top -76px}
header #block-sunderlandstorage-main-menu ul.menu li a.is-active:hover {background-color: transparent; cursor: default}

header ul.user-menu {float: right}
header ul.user-menu li {display: inline-block}
header ul.user-menu li a {display: block; text-decoration: none; color: #707070}
header ul.user-menu li.icon a {background-image: url(sunderland-sprite@1x.png); background-repeat: no-repeat}
header ul.user-menu li.icon a:hover {background-color: #f1f1f1}
header ul.user-menu li.account a {background-position: right -18px top -152px}
header ul.user-menu li.account a:hover {background-position: right -18px top -228px}
header ul.user-menu li.cart a {background-position: right -18px top -306px}
header ul.user-menu li.cart a:hover {background-position: right -18px top -382px}
header ul.user-menu li a:hover {color: #000}
header ul.user-menu li.storage a {background: rgb(30,67,151); background: linear-gradient(0deg, rgba(30,67,151,1) 0%, rgba(28,117,188,1) 50%, rgba(41,171,226,1) 100%); color: #FFF; text-transform: uppercase}
header ul.user-menu li.storage a:hover {color: #FFF; background: rgb(41,171,226); background: linear-gradient(0deg, rgba(41,171,226,1) 0%, rgba(28,117,188,1) 50%, rgba(30,67,151,1) 100%)}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#block-map .map-responsive {overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0}
#block-map .map-responsive iframe {left: 0; top: 0; width: 100%; height: 100%; position: absolute}

#block-sunderlandstorage-local-tasks {z-index: 1}
#block-sunderlandstorage-local-tasks ul {float: right; list-style: none}
#block-sunderlandstorage-local-tasks ul li {display: inline-block}
#block-sunderlandstorage-local-tasks ul li a {display: block; padding: 10px}

#block-sunderlandstorage-breadcrumbs {margin-bottom: 1.0em}
#block-sunderlandstorage-breadcrumbs ol li {list-style: none}
#block-sunderlandstorage-breadcrumbs ol li a {display: block; padding: 10px 40px 10px 0}

#main .wrapper {padding-top: 100px; padding-bottom: 80px}
#main .wrapper h2.front {text-align: center; margin-bottom: 2.0em}

#hero {text-align: center}
#hero ul.slide-show {list-style: none; margin: auto}
#hero ul.slide-show li {box-sizing: border-box}
#hero ul.slide-show li.slides {background-color: #d5f6ff}
#hero ul.slide-show li.slides .owl-stage, #hero ul li.slides .owl-stage-outer, #hero ul li.slides .owl-item, #hero ul li.slides .owl-item {height: 100% !important}
#hero ul.slide-show li.slides .slide {background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100% !important}
#hero ul.slide-show li.slides .slide-0 {background-image: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/281A4219.jpg)}
#hero ul.slide-show li.slides .slide-1 {background-image: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/281A4231.jpg)}
#hero ul.slide-show li.slides .slide-2 {background-image: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/281A4227.jpg)}
#hero ul.slide-show li.slides .slide-3 {background-image: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/281A4251.jpg)}
#hero ul.slide-show li.slides .slide-4 {background-image: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/281A4243.jpg)}
#hero ul.slide-show li.slides .slide-5 {background-image: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/281A4249.jpg)}
#hero ul.slide-show li.slides .owl-dots {position: absolute; z-index: 10; bottom: 2.0em; left: 0; right: 0; margin-left: auto; margin-right: auto}
#hero ul.slide-show li.slides .owl-dots .owl-dot {display: inline-block; margin: 0 10px}
#hero ul.slide-show li.slides .owl-dots .owl-dot span {display: block; width: 12px; height: 12px; border-radius: 6px; background-color: rgba(255,255,255,0.3)}
#hero ul.slide-show li.slides .owl-dots .owl-dot.active span {background-color: rgba(255,255,255,1.0)}

#hero ul.slide-show li.headline {background-color: #FFF; text-align: left; padding: 5%}
#hero ul.slide-show li.headline h1 {font-size: 2.6em; line-height: 1.2em; margin-bottom: 0.5em}
#hero ul.slide-show li.headline p {margin-bottom: 1.0em}
#hero ul.slide-show li.headline .actions {text-align: right; margin-top: 2.0em}
#hero ul.slide-show li.headline .opening {text-transform: uppercase; text-align: center; margin-bottom: 1.0em; background-color: #d5f6ff; padding: 10px; font-size: 1.3em; font-weight: bold}

#hero .views-element-container {margin-top: 80px}
#hero .carousel {padding-top: 60px; padding-bottom: 40px}
#hero .carousel .owl-stage {display: flex; flex-wrap: wrap}
#hero .carousel .owl-stage .owl-item {display: flex; height: auto !important}
#hero .carousel .views-row {text-align: left; background-color: #FFF; padding-bottom: 2.0em; border-radius: 4px; overflow: hidden}
#hero .carousel .views-row img {display: block; width: 100%; height: auto; margin-bottom: 1.0em}
#hero .carousel .views-row h3 {margin: 0 5% 0.5em 5%; border-bottom: solid 1px #d0d0d0; padding-bottom: 7px}
#hero .carousel .views-row h3 a {color: #707070}
#hero .carousel .views-row:hover h3 a {color: #29ABE2; text-decoration: none}
#hero .carousel .views-row p {margin: 0 5% 1.0em 5%}
#hero .carousel .views-row .features-grid .views-row p {margin: 0 5% 1.0em 5%}
#hero .carousel .views-row .actions {text-align: right; margin-right: 5%}
#hero .carousel .owl-nav .owl-prev {position: absolute; top: 50%; transform: translateY(-50%); background: rgb(30,67,151); background: linear-gradient(0deg, rgba(30,67,151,1) 0%, rgba(28,117,188,1) 50%, rgba(41,171,226,1) 100%)}
#hero .carousel .owl-nav .owl-next {position: absolute; top: 50%; transform: translateY(-50%); background: rgb(30,67,151); background: linear-gradient(0deg, rgba(30,67,151,1) 0%, rgba(28,117,188,1) 50%, rgba(41,171,226,1) 100%)}

#highlights {clear: both}
#highlights .wrapper h2 {text-align: center; margin-bottom: 2.0em}

.features-grid {}
.features-grid .views-row {background-color: #FFF; padding-bottom: 2.0em; margin-bottom: 3.0em; border-radius: 4px; overflow: hidden}
.features-grid .views-row img {display: block; width: 100%; height: auto; margin-bottom: 1.0em}
.features-grid .views-row h3 {margin: 0 5% 0.5em 5%; border-bottom: solid 1px #d0d0d0; padding-bottom: 7px}
.features-grid .views-row h3 a {color: #707070}
.features-grid .views-row:hover h3 a {color: #29ABE2; text-decoration: none}
.features-grid .views-row p {margin: 0 5% 1.0em 5%}
.features-grid .views-row .actions {text-align: right; margin-right: 5%}

.solutions-grid {}
.solutions-grid .views-row {background-color: #FFF; padding-bottom: 2.0em; margin-bottom: 3.0em; border-radius: 4px; overflow: hidden}
.solutions-grid .views-row img {display: block; width: 100%; height: auto; margin-bottom: 1.0em}
.solutions-grid .views-row h3 {margin: 0 5% 0.5em 5%; border-bottom: solid 1px #d0d0d0; padding-bottom: 7px}
.solutions-grid .views-row h3 a {color: #707070;}
.solutions-grid .views-row:hover h3 a {color: #29ABE2; text-decoration: none}
.solutions-grid .views-row p {margin: 0 5% 1.0em 5%}
.solutions-grid .views-row .actions {text-align: right !important; margin-right: 5%}

.front.form-actions {text-align: center; padding: 2.0em 0}
#highlights {padding-bottom: 80px}
#highlights .actions.clear {text-align: center; padding: 2.0em 0}

/* Body content */
#block-sunderlandstorage-content {margin-top: 2.0em}
#block-sunderlandstorage-content article ul, #block-sunderlandstorage-content article ol {margin-left: 50px; margin-bottom: 2.0em}
#block-sunderlandstorage-content article ul li, #block-sunderlandstorage-content article ol li {line-height: 2.0em}
#block-sunderlandstorage-content article p {line-height: 1.6em; margin-bottom: 2.0em}
#block-sunderlandstorage-content article img {display: block; width: 100%; height: auto; margin-bottom: 2.0em}
#block-sunderlandstorage-content .actions {text-align: center; padding: 2.0em 0}

/* Product */
#block-sunderlandstorage-content article .left img, #block-sunderlandstorage-content article .right img {display: block; float: none !important; margin: 0 0 1.0em 0 !important; width: 100% !important}
#block-sunderlandstorage-content article .left h2, #block-sunderlandstorage-content article .right h2 {margin-bottom: 0.5em}

.slide .image {position: relative; border-radius: 4px; overflow: hidden}
.slide .image img {border-radius: 4px}
.slide .image a, .slides .slide a {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; overflow: hidden; text-indent: -9999px}
.slide .image .slice, .slides .slide .slice {position: absolute; background: rgb(30,67,151); background: linear-gradient(0deg, rgba(30,67,151,1) 0%, rgba(28,117,188,1) 50%, rgba(41,171,226,1) 100%); color: #FFF; top: 0; padding: 6px 20px 8px 20px; z-index: 1; border-bottom-right-radius: 4px; box-sizing: border-box; width: 128px}
.slide .image .slice span, .slides .slide .slice span {display: block; text-align: center}
.slide .image .slice .type, .slides .slide .slice .type {}
.slide .image .slice .price, .slides .slide .slice .price {font-size: 1.8em}
.slide .image .slice .term, .slides .slide .slice .term {font-size: 0.8em; text-transform: uppercase}

.product p {margin-bottom: 2.0em}
.product .views-row {margin-bottom: 2.0em}
.product .views-row div {margin-bottom: 0.5em}
.product .left, .product .right {padding-bottom: 2.0em}
.product .left img {display: block; width: 100%; height: auto; margin-bottom: 1.0em}
.product .left ul {margin-left: 50px; margin-bottom: 2.0em}
.product .left ul li {line-height: 2.0em}
.product .views-row .views-field-title, .product .views-row article div:first-child {font-weight: bold}
.product .views-row .views-field-price__number {margin-bottom: 1.0em}
.product .views-row .views-field-commerce-add-to-cart-link {margin-bottom: 1.0em}
.product .views-row .form-actions {margin-top: 0.5em; margin-bottom: 2.0em}

/* Profile */
.profile .address {}

.captcha {margin-top: 1.0em}

/* Forms */
.form-item {margin: 1em 0}
.form-item label {display: block; margin-bottom: 6px}
.form-item .form-text, .form-item .form-email, .form-item .form-textarea, .form-item .form-tel {font-size: 16px; padding: 10px; box-sizing: border-box; outline: none; border: none; width: 100%; max-width: 400px}
.form-item .description {font-size: 0.9em; margin-top: 6px}
.form-item select {font-size: 16px; padding: 10px; box-sizing: border-box; outline: none; border: none; width: 100%; max-width: 250px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #FFF; color: #707070; background-image: url(sunderland-sprite@1x.png); background-repeat: no-repeat; background-position: right -10px top -17px; cursor: pointer}
.form-item .form-email:focus::placeholder, .form-item .form-text:focus::placeholder {color: transparent}

.button, .views-field-commerce-add-to-cart-link a {background: rgb(30,67,151); background: linear-gradient(0deg, rgba(30,67,151,1) 0%, rgba(28,117,188,1) 50%, rgba(41,171,226,1) 100%); padding: 16px 36px; color: #FFF; font-size: 16px; cursor: pointer; text-transform: uppercase; text-decoration: none; box-sizing: border-box; display: inline-block; border-radius: 4px}
.form-actions {margin-top: 2.0em}
.form-actions .button, .form-actions a.button {padding: 16px 36px; color: #FFF; font-size: 16px; cursor: pointer; text-transform: uppercase; text-decoration: none; box-sizing: border-box}
.button:hover, .form-actions.button:hover, .form-actions a.button:hover, .views-field-commerce-add-to-cart-link a:hover {background: rgb(41,171,226); background: linear-gradient(0deg, rgba(41,171,226,1) 0%, rgba(28,117,188,1) 50%, rgba(30,67,151,1) 100%); text-decoration: none}
input {-webkit-border-radius: 0px}

.address-book-edit-button.button {display: none}

footer {background: rgb(30,67,151); background: linear-gradient(0deg, rgba(30,67,151,1) 0%, rgba(28,117,188,1) 50%, rgba(41,171,226,1) 100%)}
footer .wrapper {text-align: center; color: #FFF; padding-top: 3em; padding-bottom: 10em}
footer .wrapper a {color: #FFF; text-decoration: none}
footer .wrapper h2 {font-size: 1.0em}
footer .wrapper .form-item .form-email {max-width: 300px; text-align: center}
footer .wrapper .captcha {margin-bottom: 1.0em}
footer .wrapper .captcha .g-recaptcha {display: inline-block}
footer .wrapper .form-actions {margin-bottom: 4.0em}
footer .wrapper .form-actions .button {background: #000}
footer .wrapper .logo {display: inline-block; width: 230px; height: auto}
footer .wrapper .address, footer .wrapper .copyright {margin-top: 3em; line-height: 1.6em; font-size: 0.9em}
footer .wrapper .phone-line {margin-top: 1.0em; line-height: 1.6em; font-size: 0.9em}
footer .wrapper nav {width: 100%}
footer .wrapper .menu li a {display: block; padding: 10px}
footer .wrapper .menu li a.is-active {text-decoration: underline}

/* Checkout */
.cart-form table, .checkout-order-summary table {width: 100%}
.cart-form table tr td {text-align: center}
.cart-form table .views-field-total-price__number {text-align: right}
.checkout-order-summary table tr td:nth-child(3) {text-align: right; padding: 0 10px}

.checkout-pane .fieldset-legend, .checkout-pane .label {font-weight: bold; margin-bottom: 0.5em}
.checkout-pane .fieldset-wrapper {margin-bottom: 1.0em}
.checkout-pane .access-code {margin: 1.0em 0}
.checkout-pane .fieldset-wrapper p {margin-bottom: 1.0em}

.link--previous {margin-left: 10px}

.checkout-pane .js-form-type-checkbox {margin-left: 2.0em}
.checkout-pane .js-form-type-checkbox input {display: inline-block; margin-right: 10px}
.checkout-pane .js-form-type-checkbox label {display: inline-block}

.order .customer-information div div:first-child {font-weight: bold}
.order .customer-information .customer-billing p {font-weight: normal}
.order .customer-information .customer-billing {margin-top: 1.0em; margin-bottom: 1.0em}
.order .customer-information .customer-billing .field__label {font-weight: bold}
.order .customer-information .customer-billing .address {margin-bottom: 1.0em}

.order .order-information {}
.order .order-information div div:nth-child(1) {font-weight: bold}
.order .order-information div div:nth-child(2) {font-weight: normal; margin-bottom: 1.0em}

/* User account */
.user-actions div {text-align: center; padding-top: 2.0em}
.user-actions div.cancel .button {background-color: #cccbcb; color: #707070}
.user-actions div.cancel .button:hover {background-color: #c2c2c2}

.path-user article, .path-user table, .path-user .order, .path-user .user-login-form, .path-user .user-pass {margin-bottom: 4.0em}
.path-user article .label {font-weight: bold; margin-bottom: 0.5em}
.path-user article .number {font-size: 4.0em}
.path-user table {text-align: center}
.path-user aside ul li {border-bottom: solid 1px #d0d0d0; list-style: none}
.path-user aside ul li a {display: block; padding: 20px 10px; text-align: center; text-decoration: none}
.path-user aside ul li a:hover {background-color: #f1f1f1}

.access-code {margin-bottom: 1em}
.access-code .code {font-size: 3em}

/* Messages */
div[aria-label="Status message"], .webform-confirmation__message, div[role="contentinfo"] {background-color: #f3faef; color: #325e1c; border: #c9e1bd solid 1px; margin: 1.0em 0; padding: 10px; text-align: center}
div[aria-label="Error message"] {background-color: #fde1e1; border: 1px solid #ec0f1a; padding: 10px 15px; margin: 1.0em 0; text-align: center}
div[aria-label="Status message"] ul {list-style: none}

/* Mobile menu */
/* Add animation for all transitions to the elements that need it */ 
#drawer-toggle-label, header, #drawer, #site-wrapper, #drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header, #drawer-toggle:checked ~ #site-wrapper {-webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out}

/* Get the actual input element out of the way; we're going to style the label instead */ 
#drawer-toggle {position: absolute; opacity: 0; z-index: 101}

#drawer-toggle-label {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; left: 0px; height: 100%; width: 50px; display: block; position: fixed; background: none; z-index: 110; cursor: pointer} 

#drawer-toggle-label:before {content: url(/sites/sunderlandstorage.com.au/themes/sunderlandstorage/images/logo.svg); display: block; position: absolute; height: auto; width: 155px; left: 10px; top: 5px}

/* Add the "hamburger" menu icon  
#drawer-toggle-label:before {content: ''; display: block; position: absolute; height: 2px; width: 20px; background: #000; left: 10px; top: 15px; box-shadow: 0 6px 0 #000, 0 12px 0 #000} */

/* drawer menu pane  */ 
#drawer {position: fixed; top: 0; left:-250px; height: 100%; width: 250px; background: #191919; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch}

#drawer {padding: 15px 0}
#drawer p {margin: 0 20px 20px 20px; color: #ebebeb; line-height: 1.6em}
#drawer a {display: block; padding: 10px; outline: none; color: #ebebeb}
#drawer a:hover {color: #FFF}
#drawer .heading {padding: 7px 10px; color: #ebebeb; outline: none; cursor: pointer}
#drawer .heading:hover {color: #FFF}
#drawer .heading.link-only {padding: 0}
#drawer .link-only, #drawer #accordion {margin-left: 10px}
#drawer #accordion ul {margin-left: 10px; list-style: none}

/* actual page content pane */ 
#site-wrapper {margin-left: 0px; width: 100%; overflow-x: hidden}

/* checked styles (menu open state) */ 
#drawer-toggle:checked ~ #drawer-toggle-label {height: 100%; width: calc(100% - 250px); background: rgba(0, 0, 0, 0.6)} 

#drawer-toggle:checked ~ #drawer-toggle-label, 
#drawer-toggle:checked ~ header {left: 250px}

#drawer-toggle:checked ~ #drawer {left: 0px} 

#drawer-toggle:checked ~ #site-wrapper {margin-left: 250px}

/* reCAPTCHA */
.grecaptcha-badge { visibility: hidden}