@charset "utf-8";
/* CSS Document */
/* typography */
.ContentArea h1, .ContentArea h2, .ContentArea h3 {
    font-family: "Questrial", Arial, Helvetica ,sans-serif !important;
}
.ContentArea h1 {
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.ContentArea h2 {
    margin: 20px 0 10px;
    letter-spacing: 1px;
}
.NavBarBottom h2, .NavBarBottom h2 a {
    font-family: "Questrial", Helvetica, Arial, sans-serif !important;
    text-transform: uppercase;
    margin-bottom: 10px;
	font-weight: bold;
}
.NavBarBottom h2 a:hover {
	font-weight: bold;
}
.fal, .far {
    font-family: "Font Awesome 5 Pro" !important;
    font-style: normal !important;
}
.fa, .fas {
    font-family: "Font Awesome 5 Pro" !important;
    font-style: normal !important;
}
.fa-ul {
    margin-left: 1.75em !important;
    padding-left: 0 !important;
}
.ContentArea .BreadcrumbItem:hover, .ContentArea .BreadcrumbItem, .ContentArea .BreadcrumbLastItem {
    font-size: 16px;
}
.btn.btn-blue {
    background: #35a3dc none no-repeat;
    font-family: "Questrial", sans serif !important;
    font-size: 16px;
    letter-spacing: 1px;
    color: white;
    padding: 10px 20px;
	border-radius: 0;
	border: 2px solid #231f20;
	text-transform: uppercase;
}
.btn.btn-blue:hover {
    background: #231f20 none no-repeat;
	color: white;
}
.homepageIntro .btn.btn-blue {
    font-size: 18px;
}
hr {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}
/* layout */
html.IsEditor, body {
    background: url(/WebRoot/ecshared01/Shops/theoutdoorshop/MediaGallery/TheShadeSailShop/images/outdoor-shop-bg.jpg) no-repeat transparent bottom right;
    background-size: cover;
	background-attachment: scroll;
}
.Middle, .NavBarRoof .PropertyContainer, .Header .PropertyContainer, .NavBarTop .PropertyContainer, .NavBarBottom .PropertyContainer, .Footer .PropertyContainer {
    margin: 0 auto;
    max-width: 1140px;
    width: 100%;
}
.Div .Middle {
    max-width: 1140px;
}
/* navbarroof */
.NavBarRoof .PropertyContainer {
    border-bottom: none;
}
.NavBarRoof .freeDelivery {
    line-height: 27px;
}
.NavBarRoof .freeDelivery a {
    color: #231f20;
}
/* header */
.Header {
    border-top: 1px solid #dddddd;
}
.Header .ShopLogo {
    margin: 0;
}
.Header .topLinksContainer {
    margin-left: 40px;
}
.Header .topPhone {
    margin-bottom: 10px;
}
.Header .topPhone a {
    font-size: 22px;
    font-family: "Carter One", Helvetica, Arial, cursive !important;
    letter-spacing: 1px;
	color: #35a3dc;
}
.Header .topPhone a:hover {
    color: #231f20;
}
.topPhone i.fas {
    font-size: 26px;
}
.Header .topLinks a:first-of-type {
    margin-right: 10px;
}
html body .GeneralLayout .Header.HorizontalNavBar .BasketBox.NavElementIcon span {
    top: 25px;
}
.Header .BasketBox.NavElementIcon span::before {
    background: transparent none no-repeat scroll 0 0;
}
.Header .BasketBox.NavElementIcon span:first-of-type {
	display: none;
}
.Header .BasketBox.NavElementIcon span::before {
    content: "\f07a";
    font-family: 'Font Awesome 5 Pro' !important;
    display: inline-block;
    color: #231f20;
    font-size: 26px;
    font-weight: 900;
}
.Header .SearchElement {
    padding-top: 0;
    position: absolute;
    right: 0px;
    bottom: 20px;
}
.Header .SearchElement div.Entry {
    height: 40px;
    width: 100%;
    min-width: 295px;
}
.Header .InputField.SearchForm {
    height: 40px;
    line-height: 40px;
	width: 100%;
}
.Header .SearchForm.horizontal-search > input {
    height: 36px;
	width: 95%;
}
.Header .InputField.SearchForm > button {
    padding: 10px;
	float: right;
}
.Header .SearchForm.horizontal-search .SearchIcon {
    background: transparent none no-repeat scroll 0 0 !important;
    margin: 0 auto;
    width: auto;
    height: auto;
}
.Header .SearchForm.horizontal-search .SearchIcon::before {
    content: "\f002";
    font-family: 'Font Awesome 5 Pro' !important;
    display: inline-block;
    font-size: 24px;
    position: relative;
    color: #231f20;
    font-weight: 900;
    line-height: 14px;
}
/* navbartop */
.NavBarTop {
    border-top: 1px solid #dddddd;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.NavBarTop ul.DropDownList li {
    height: 50px;
    line-height: 50px;
    padding: 0;
    border-left: 1px solid #ffffff;
}
.NavBarTop ul.DropDownList li:first-of-type {
    border-left: none;
}
.NavBarTop ul.DropDownList li a {
    padding: 0 15px;
    line-height: 50px;
    height: 50px;
}
.NavBarTop ul.DropDownList li:hover, .NavBarTop ul.DropDownList li.Active {
    background-color: white;
	border-left: 1px solid #cccccc;
}
.GeneralLayout .NavBarTop ul.DropDownList li ul {
    width: 270px;
}
.GeneralLayout .NavBarTop ul.DropDownList li ul li {
    width: auto;
}
.GeneralLayout .NavBarTop  ul.DropDownList li ul li {
    padding: 9px 20px 2px 7px;
    min-height: 50px;
    height: 100%;
	line-height: 1.8;
}
.NavBarTop ul.DropDownList li ul li a {
    font-size: 14px !important;
	padding: 0;
}
.NavBarTop ul.DropDownList span {
    line-height: 35px !important;
    font-size: 16px !important;
}
/* navbarbottom */
.navbarbottomLinks .col-md-3.col-sm-6.col-12 {
    margin-bottom: 20px;
}
/* slick slider */
.homepageSlider-slide {
  overflow: hidden;
  position: relative;
  /*height: 450px;
  width: 100%;*/
}
.homepageSlider-slide .DesktopImage {
    /*height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);*/
}
.homepageSlider-slide .sliderTextContainer {
    bottom: 0;
    color: #fff;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    vertical-align: middle;
	text-align: center;
}
.homepageSlider-slide .sliderText {
    left: 50%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
	max-width: 500px;
    background: rgb(0,0,0,0.6);
    padding: 15px;
}
.start-page .ContentArea .homepageSlider h2 {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}
.start-page .ContentArea .homepageSlider h3 {
    color: white;
    font-size: 24px;
	font-weight: normal;
}
.slick-prev:before, .slick-next:before {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    font-size: 24px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev:before {
	content: "\f191";
}
.slick-next:before {
	content: "\f152";
}
.slick-prev {
    left: 25px;
	font-size: 0 !important;
	z-index: 1;
}
.slick-next {
    right: 25px;
	font-size: 0 !important;
	z-index: 1;
}
/* homepage content */
.homepageIntro, .homepageCategories {
    margin: 30px auto;
}
.homepageCategories .col.col-sm-6.col-md-3 {
    padding-left: 10px;
    padding-right: 10px;
}
.homepageCategories .card-img-overlay {
    padding: 0.75rem;
}
.homepageCategoryButton {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
}
/* product boxes */
/* make 4 and 3 column product layout responsive */
table.ProductListImageBox.four-colums-product-list, table.ProductListImageBox.four-colums-product-list tbody, table.ProductListImageBox.four-colums-product-list tr {
    max-width: 100% !important;
    width: 100% !important;
}
table.ProductListImageBox.three-colums-product-list, table.ProductListImageBox.three-colums-product-list tbody, table.ProductListImageBox.three-colums-product-list tr {
    max-width: 100% !important;
    width: 100% !important;
}
.three-colums-product-list .ImageArea img, .four-colums-product-list .ImageArea img {
    max-height: 100%;
    max-width: 100%;
}
.ProductListImageBox div.InfoArea {
    border: 1px solid #dddddd;
}
.ProductListImageBox.three-colums-product-list .Description {
    display: none;
}
.ContentArea button.AddToBasketButton:hover {
    background: #231f20;
}
.AddToBasketForm span.BasketIcon {
    background: transparent none no-repeat !important;
    height: auto;
    width: auto;
}
.AddToBasketForm span.BasketIcon::before {
    content: "\f07a";
    font-family: 'Font Awesome 5 Pro' !important;
    display: inline-block;
    color: #ffffff;
    font-size: 26px;
    font-weight: 900;
}
/* category boxes */
.ListItemCategoryTable {
    border-spacing: 20px;
}
.ListItemCategoryTable tr td {
    border: 2px solid #35a3dc;
    padding: 10px;
    background-color: white;
    text-align: center;
}
.ListItemCategoryTable td.MediumColumn.AlignTop:empty {
    /*display: none;*/
	border: none;
}
.ListItemCategory .InfoArea, .ListItemCategory .InfoArea h3, .ListItemCategory .InfoArea p, .ListItemCategory .Links, .ListItemCategory .Links h3 {
}
.ListItemCategory .InfoArea {
}
.ListItemCategory .InfoArea h3 {
    text-transform: uppercase;
}
.ListItemCategory h3 a {
    font-size: 16px;
    background: #35a3dc none no-repeat;
    padding: 10px;
    border: 1px solid #231f20;
    margin: 10px auto;
    display: inline-block;
}
.ListItemCategory h3 a:hover {
    color: #ffffff;
	background: #231f20 none no-repeat;
}
.ListItemCategory .InfoArea p, .ListItemCategory .InfoArea span, .ListItemCategory .InfoArea strong {
    font-size: 15px !important;
}
.ListItemCategory .ImageArea {
    height: 150px;
	width: 100%;
}
.ListItemCategory .ImageArea img {
    max-height: 100%;
    max-width: auto;
}
/* product page */
.ProductDetails.ImgLeft .ProductImage {
    margin: 0 50% 20px 0;
}
.ProductDetails.ImgLeft .InfoArea {
    width: 48%;
}
.ContentArea .ProductDetails h1 {
    font-size: 24px;
}
table.VariationsTable th.SeparateColumn {
    background: #dddddd;
    padding: 10px;
}
table.VariationsTable td {
    border-right: 1px solid #cccccc !important;
    border-bottom: 1px solid #cccccc !important;
}
table.VariationsTable td:first-of-type {
    border-left: 1px solid #cccccc !important;
}
table.VariationsTable tr:last-of-type td {
    border: none !important;
}
img.productBasketImage, .productBasketImage .ThumbnailsInBasket {
    min-width: 55px;
}
table.VariationsTable .AddToBasketForm span.BasketIcon {
    padding: 5px;
}
table.VariationsTable .AddToBasketForm span.BasketIcon::before {
    content: "\f07a";
    font-family: 'Font Awesome 5 Pro' !important;
    display: inline-block;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}
/* custom made page */
.quote-forms:first-of-type {
    margin-top: 20px;
}
.quote-forms:last-of-type {
    margin-bottom: 20px;
}
.quote-forms img {
    margin: 10px 10px 0 0;
}
.fa-ul>li {
    padding: 5px 0;
}
ul.fa-ul i.fas {
    color: #35a3dc;
}
ul.fa-ul i.fas.fa-file-pdf {
    font-size: 1.25em;
}
/* forms */
input[type="text"], .ep-uiInput-text {
    padding: 5px;
}
input[type="password"] {
    padding: 5px;
}
/* Remote Search for mobile */
.RCCloseFacets {
  min-height: 30px;
}
.RCCloseFacets > span:before,
.RCCloseFacets > span:after {
  transform: rotate(-45deg);
  content: "";
  position: absolute;
  background: #000;
  display: block;
  height: 3px;
  pointer-events: none;
  width: 20px;
  top: 20px;
  right: 10px;
}
.RCCloseFacets > span:after {
  transform: rotate(45deg);
}
.RemoteSearchFacets ~ .RCFacetOverlay {
  display: none;
}
.RemoteSearchFiltersToggle,
.RCCloseFacets {
  display: none;
}
.RemoteSearchFacets {
  display: block;
}
.RemoteSearchFacetsRCOn,
.RemoteSearchFacetsRCOff {
  display: block;
}
/* content inline styling override */
.ContentArea .TermsAndConditions p, .ContentArea .TermsAndConditions span, .ContentArea .TermsAndConditions li {
    font-size: initial !important;
}
/********************* Media Queries only under here ****************/
@media (min-width: 576px) {
.card-deck .card {
    margin-right: 0;
    margin-left: 0;
	margin-bottom: 15px;
}
}
@media (min-width: 760px) {
.start-page .TextComplete:last-of-type {
    padding: 0 20px;
}
/* custom made page */
.quote-forms img {
    max-width: 300px !important;
}
}
@media (min-width: 1025px) {
nav {
    display: none;
}
.RemoteSearchFiltersToggle {
    display: none;
}
}
@media (max-width: 1024px) {
html.IsEditor, body {
    background-position: 0 0;
}
.NavBarRoof .freeDelivery {
    padding-left: 10px;
}
.Header {
    border-bottom: 1px solid #dddddd;
}
.MultipleStep-Container .Header {
    border-bottom: none;
}
.Header nav {
    display: block;
}
.Header .ShopLogo {
    margin-left: 45px;
}
.Header .PropertyContainer {
    height: 210px;
}
.Header.HorizontalNavBar .custom-left, .Header.HorizontalNavBar .custom-right {
    width: 100%;
}
.Header .SearchElement {
    right: auto;
    bottom: 10px;
    left: 10px;
}
label[for="drop-0"].toggle {
    background: transparent;
    float: left;
    position: absolute;
    top: 50px;
    border-left: none;
    left: 0px;
    color: #231f20;
    padding: 10px;
    font-size: 32px;
}
.NavBarTop {
    display: none;
}
/* Search filter */
 .RemoteSearchFacets.RemoteSearchFacetsRCOn ~ div.RCFacetOverlay {
    display: block;
  }
  .RemoteSearchFacets.RemoteSearchFacetsRCOff ~ div.RCFacetOverlay {
    display: none;
  }
  .RemoteSearchFiltersToggle,
  .RCCloseFacets  {
    display: block;
  }
  .RemoteSearchFacets {
    display: none;
  }
  .RemoteSearchFacets .ui-slider {
    display: none;
  }
  .RemoteSearchFacetsRCOn {
    display: block;
  }
  .RemoteSearchFacetsRCOff {
    display: none;
  }
  .RemoteSearchFacets {
    min-width: 280px;
    max-width: 560px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 501;
    overflow-y: scroll;
  }
}

}
@media only screen and (max-width: 896px) {
.Header .BasketBox.NavElementIcon {
    right: 10px;
    top: auto;
    bottom: 30px;
}
.homepageIntro .col {
    margin-bottom: 10px;
}
}
@media only screen and (max-width: 823px) {
.Header .PropertyContainer {
    height: 175px;
}
.Header .ShopLogo img {
    max-width: 200px;
}
nav ul.menu {
    top: 190px !important;
}
}
@media only screen and (max-width: 768px) {
/* slick slider */
.homepageSlider-slide.slick-slide {
    text-align: center;
    height: 450px;
}
.homepageSlider-slide .MobileImage {
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
}
/* product boxes */
table.ProductListImageBox.four-colums-product-list, table.ProductListImageBox.four-colums-product-list tbody, table.ProductListImageBox.four-colums-product-list tr {
    display: block;
}
.ProductListImageBox tr td {
    display: inline-block;
	width: 32%;
}
}
@media only screen and (max-width: 760px) {
.Header.HorizontalNavBar .custom-right {
    padding-right: 0;
}
Div .Header .ShopLogo {
    /*margin-left: 0;*/
}
.Header .topLinksContainer {
    margin-left: 30px;
}
.Header .SearchElement {
    top: auto;
    width: 90% !important;
}
.Header .SearchElement div.Entry {
    width: 80%;
}
/* checkout */
ul.CheckOutNav {
    height: 60px;
}
.CheckOutNav li {
    height: 60px;
    line-height: 60px;
    vertical-align: top;
}
}
@media only screen and (max-width: 667px) {
.Header .PropertyContainer {
    height: 255px;
}
nav ul.menu {
    top: 265px !important;
}
}
@media only screen and (max-width: 568px) {
.NavBarRoof .PropertyContainer {
    height: 60px;
}
.NavBarRoof.HorizontalNavBar .custom-right {
    text-align: left;
    float: left;
}
.Header .PropertyContainer {
    height: 275px;
}
nav ul.menu {
    top: 275px !important;
}
/* product box */
.ProductListImageBox tr td {
    width: 48%;
}
}
@media only screen and (max-width: 480px) {
/* header */
.Header .PropertyContainer {
    height: 280px;
}
.Header .topLinksContainer {
    margin-left: 0;
}
.Header .topLinksContainer .btn.btn-blue {
    padding: 10px;
}
label[for="drop-0"].toggle {
    top: 30px;
}
.Header .SearchForm.horizontal-search > input {
    width: 90%;
}
nav ul.menu {
    top: 280px !important;
}
/* slick slider */
.homepageSlider-slide .sliderText {
	max-width: 95%;
}
.start-page .ContentArea .homepageSlider h2 {
    font-size: 24px;
}
.homepageSlider-slide .sliderText {
    top: 50%;
}
/* homepage content */
.homepageIntro .btn.btn-blue {
    font-size: 16px;
    white-space: normal;
    min-width: 300px;
    margin-bottom: 10px;
}
/* category pages */
table.ProductListImageBox.three-colums-product-list, table.ProductListImageBox.three-colums-product-list tbody, table.ProductListImageBox.three-colums-product-list tr {
    display: block;
}
table.ProductListImageBox.three-colums-product-list td {
    width: 100%;
    display: block;
}
table.ProductListImageBox.four-colums-product-list td {
    width: 100%;
    display: block;
}
}
@media only screen and (max-width: 414px) {
.Div .Header .ShopLogo {
    margin: 0;
}
}
@media only screen and (max-width: 375px) {
.Header .PropertyContainer {
    height: 325px;
}
.Header .topLinks a:first-of-type {
    margin-right: 3px;
    margin-bottom: 10px;
}
nav ul.menu {
    top: 335px !important;
}
}