@charset "UTF-8";
/* CSS Document */


/* Mobile Portrait Layout: 320px and below. */

.wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	padding-left: 2.5%;
	padding-right: 2.5%;
}

#block-sunderlandstorage-breadcrumbs ol li {display: none}
#block-sunderlandstorage-breadcrumbs ol li:first-child, #block-sunderlandstorage-breadcrumbs ol li:last-child {display: inline-block}

header nav {display: none}
header #block-sunderlandstorage-branding {display: none}
header ul.user-menu li.icon {display: none}
header ul.user-menu li.icon a, header ul.user-menu li.cart a {text-indent: -9999px}
header ul.user-menu li a {padding: 10px}
header ul.user-menu li.storage a {padding: 10px; font-size: 0.9em}

#hero {padding-top: 45px}
#hero ul.slide-show li.slides {height: 50vh; min-height: 400px}
#hero .carousel .owl-nav {display: none}
#hero .carousel .owl-nav .owl-prev, #hero .carousel .owl-nav .owl-next {width: 40px; height: 40px; border-radius: 20px}
#hero .carousel .owl-nav .owl-prev {left: 3px}
#hero .carousel .owl-nav .owl-next {right: 3px}

footer .wrapper ul.menu {list-style: none; margin-bottom: 3em}
footer .wrapper .menu li {display: inline-block}

footer .wrapper .copyright span.rights {display: block}

.path-user article, .path-user table, .path-user .order, .path-user .user-login-form, .path-user .user-pass {width: 100%}

/* Mobile Landscape Layout: 321px to 480px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 321px) {

.wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	padding-left: 2.5%;
	padding-right: 2.5%;
}

}


/* Tablet Portrait Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.wrapper {
	margin: auto;
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
}

#block-sunderlandstorage-breadcrumbs ol li {display: inline-block}

header ul.user-menu li.icon {display: inline-block}
header ul.user-menu li.icon a, header ul.user-menu li.cart a {text-indent: inherit}

#hero ul.slide-show {display: flex; flex-direction: row-reverse}
#hero ul.slide-show li {width: 50%}
#hero ul.slide-show li.slides {height: auto}
#hero .carousel .owl-nav .owl-prev {left: 10px}
#hero .carousel .owl-nav .owl-next {right: 10px}

.features-grid {display: flex; justify-content: space-between}
.features-grid .views-row {width: 47.5%}

.solutions-grid {display: flex; justify-content: space-between; flex-wrap: wrap}
.solutions-grid .views-row {width: 47.5%}

.left {width: 45%; float: left}
.right {width: 45%; margin-left: 55%}

footer .wrapper ul.menu {display: flex; flex-direction: row; margin-bottom: 5em; padding: 0}
footer .wrapper .menu li {flex-grow: 1; text-align: center}
footer .wrapper .copyright span.rights {display: inline}

}


/* Tablet Landscape Layout: 769px to a max of 1024px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.wrapper {
	margin: auto;
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
}

#hero {padding-top: 100px}

#drawer-toggle-label {display: none; visibility: hidden}

header #block-sunderlandstorage-branding {display: block; float: left; width: 230px; margin: 15px 1% 0 0.625%}
header nav {display: block}
header ul.user-menu li a {padding: 26px 40px 26px 16px}
header ul.user-menu li.storage a {padding: 26px; font-size: 1em}

.solutions-grid {display: flex; justify-content: space-between; flex-wrap: wrap}
.solutions-grid .views-row {width: 30%}

#block-sunderlandstorage-content article img {width: 50%; float: right; margin-left: 5%}

.path-user article, .path-user table, .path-user .order, .path-user .user-login-form, .path-user .user-pass {width: 70%; float: left}
.path-user aside {margin-left: 70%}

}


/* Desktop Layout: 1025px to a max of 1120px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1025px) {

.wrapper {
	margin: auto;
	width: 88.75%;
	max-width: 1120px;
	padding-left: 0.625%;
	padding-right: 0.625%;
}

#hero {padding-top: 120px}
#hero ul.slide-show {width: 90%}
#hero .carousel .owl-nav {display: block}
#hero .carousel .owl-nav .owl-prev, #hero .carousel .owl-nav .owl-next {width: 50px; height: 50px; border-radius: 25px}

}


/* Desktop Layout: 1120px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1232px) {

.wrapper {
	margin: auto;
	width: 88.75%;
	max-width: 1232px;
	padding-left: 0.625%;
	padding-right: 0.625%;
}

#hero {padding-top: 150px}
#hero ul.slide-show {width: 80%}

}


/* Retina display */

@media only screen and (-webkit-min-device-pixel-ratio:2),
@media only screen and (-moz-min-device-pixel-ratio:2),
@media only screen and (min-device-pixel-ratio:2) {



}