﻿
input:focus, select:focus {outline: 2px solid #0081C5;}
html, body {height:100%;}
/**test fixed footer**/
body {padding: 0;min-width: 240px;font-family: LatoWeb;font-size: 16px;display: flex;flex-direction: column;}

.b-lazy {-webkit-transition: opacity 500ms ease-in-out;-moz-transition: opacity 500ms ease-in-out;-o-transition: opacity 500ms ease-in-out;transition: opacity 500ms ease-in-out;max-width: 100%;opacity: 0;}
.b-lazy.b-loaded {opacity: 1;}
.tco-hidden {display: none;}
body, h1, h2, h3, h4, h5, h6 {font-family: LatoWeb, arial, 'Open Sans';/*color: #5a6771;*/color:#333;}
body { padding: 0; min-width:240px !important; }
a:hover {text-decoration:none;}
.container {width:100%;max-width:1200px;}
.navbar > .container {padding: 0;max-width: 1200px;display: flex;flex-direction: row;align-items: center;align-content: center;flex-wrap: wrap;justify-content: space-between;}
.glyphicon {color: #f88A3c;}
.breadcrumb-container {display:inline-block;font-size:14px;}
.breadcrumb-parent {color: #4e4e55;cursor:pointer;}
.breadcrumb-current {text-decoration: none;color: #0081c5;font-weight: bold;cursor: pointer;}
.glyphicon-parent {color: #7a7d81;}
/*.breadcrumb-parent:hover, .breadcrumb-current:hover {text-decoration: none;}*/
.main {width:100%;max-width:1200px;margin:0 auto;}
.view-container {display: flex;flex-direction: column;flex-grow: 1;/*padding:0 20px;*/padding: 0; overflow:hidden;}
.view-parent {display: flex;flex-direction: column;}

.btn-add-basket {color: #ffffff;padding: 5px 0;width: 100%;max-width: 170px;margin: 0 auto 5px;opacity: 0.7;background-color: #f88a3c;}
.btn-add-basket:hover {opacity: 1;}

@media screen and (min-width:450px) {
    .breadcrumb-parent:first-child {margin-left: 10px;}
}

@media screen and (min-width:950px) {
    .view-parent {flex-direction: row;}
}

#BackToTop {padding-left: 7px;width: 40px;height: 40px;background: #FFFFFF;position: fixed;bottom: 100px;right: 0;display: none;opacity: 1;border-radius: 5px 0 0 5px;z-index: 1;cursor: pointer;border-top: 1px solid #0081c5;border-bottom: 1px solid #0081c5;border-left: 1px solid #0081c5;}
#BackToTop.glyphicon {top: initial;font-size: 30px;}
.stick-bottom {position:fixed;bottom:0;}
.ffx-header {color: #5a6771;}

/* The Modal (background) */
.modal {display: none;position: fixed;z-index: 5;padding-top: 100px;padding-bottom: 200px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.2);min-width:340px;}
#GeneralModalPopup {z-index:10;}
/* Modal Content */
.modal-content {background-color: #ffffff;border: 1px solid #888;margin: auto;padding: 20px;top: 70px;width: 97%;}

@media screen and (min-width: 768px) {
    .modal-content {box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);}
}

@media screen and (min-width: 47.6em) {
    .modal-content {width: 100%;max-width: 750px;}
}

/* The Close Button */
.close {background-color: #f88a3c;border-radius: 50%;box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75);color: #ffffff;float: right;font-size: 28px;font-weight: bold;height: 30px;line-height: 28px;margin-right: -30px;margin-top: -30px;opacity: 1;text-align: center;width: 30px;}
.close:hover, .close:focus {color: #000;text-decoration: none;cursor: pointer;opacity:1;}

/**general modal styling**/
.modal-content.general-modal {max-width:400px;min-height:150px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.geneal-modal-content {padding:10px 20px 20px 20px;text-align:center;}
.general-modal-buttons {bottom: 0;clear: both;margin-left: auto;margin-right: auto;text-align: center;display:flex;}
.general-ok, .general-cancel {padding: 5px;color: #ffffff;border-radius: 5px;max-width: 165px;width: 50%;margin:5px auto;}
.general-ok {background: linear-gradient(#0197da, #0081c5);border: 2px solid #00496a;}
.general-cancel {background: linear-gradient(#fd9149, #fb6400);border: 2px solid #a14000;}
.general-ok:hover, .general-cancel:hover {box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);}

/**preloaders **/
.preloader, .coverpreloader {width: 64px;height: 80px;position:relative;}
.preloader {margin-left: auto;margin-right: auto;}
.coverpreloader {display: inline-block;}
    .preloader:after, .coverpreloader:after {content: " ";display: block;width: 64px;height: 64px;margin: 1px;border-radius: 50%;border: 5px solid #0081c5;border-color: #ffa500 transparent #0081c5 transparent;animation: preloader 1.2s linear infinite;}

.coverpreloader {left:49%;top:30%;}
    .coverpreloader:after {border: 5px solid #0081c5;border-color: #ffa500 transparent #0081c5 transparent;animation: coverpreloader 1.2s linear infinite;}
.loadingText {bottom: 0;left: 0;position: absolute;text-align: center;top: 70px;width: 64px;}

@keyframes preloader {
    0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes coverpreloader {
    0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


#customer-reg-password-strength {display: flex;padding: 4px 0 0 4px;visibility: hidden;}
#customer-new-password-strength {display: block;padding: 4px 0 0 4px;visibility: hidden;}
#cust-reg-pass-strength-description {font-size: 12px;font-weight: bold;margin: 0;}
#cust-reg-pass-strength-display {margin:5px 0 10px 10px;padding-bottom: 4px;width: 123px;background-color: #ff0000;height:4px;}

.btn-orange {color: #ffffff;background-color: #f88a3c;text-transform: uppercase;border: none;border-radius: 3px;cursor: pointer;font-weight: bold;padding: 6px 6px;border: 1px solid rgba(0,0,0,0.3);border-bottom: 3px solid rgba(0,0,0,0.3);font-size: 14px;width:80%;}
    .btn-orange:hover {border: 1px solid rgba(0,0,0,0.5);border-bottom: 3px solid rgba(0,0,0,0.5);}


/**added to basket modal**/
#addedbasketpanel {position:fixed;top:0%;left:0%;width:100%;max-height:100%;overflow-y:auto;max-width:679px;z-index:10020;}
.AddedClear {clear:both;margin-bottom:5px;}
#AddedBasketTop {padding-bottom:5px;height:54px;}
#ItemAdded {background-color:#ffffff;border:1px solid #d1d1d1;color:#019500;float:left;font-size:1.2em;font-weight:bold;height:54px;line-height:40px;padding:5px;text-align:left;width:100%;align-items:flex-end}
#AddedBasket {background-color:#f3f3f3;border:1px solid #d1d1d1;float:left;font-size:1.2em;font-weight:bold;font-size:1.2em;font-weight:bold;line-height:23px;margin-top:-1px;padding:5px;text-align:left;width:100%}
.AddedBasketImage {float:left;padding:0px;height: 40px; width: 44px; border: 2px solid green;}

#AddedBasket span {font-size:.9em;}
.Add_To_basket_Buttons {width:100%;text-align:right;}
.Add_To_basket_Buttons #continue, .Add_To_basket_Buttons #continue1, .Add_To_basket_Buttons #checkout, .Add_To_basket_Buttons #checkout1 {border:0;color:#ffffff;font-size:1.2em;font-weight:bold;height:30px;text-transform:uppercase;width:100%}
.Add_To_basket_Buttons #continue, .Add_To_basket_Buttons #continue1 {background-color:#238d00;}
.Add_To_basket_Buttons #checkout, .Add_To_basket_Buttons #checkout1 {background-color:#ff9012;}
#AddedAlso {color:#000000;font-size:1.2em;font-weight:bold;margin-top:15px;text-align:left;width:100%;}
#AddedAlso span {font-size:0.7em;}
#AddedAlternatives {display:block;margin-bottom:10px;}
#AddedAlternatives .PromotionListing {background: rgb(255, 255, 255) none repeat scroll 0 0;cursor: pointer;float: left;font-size: 11px;height: auto;margin: 0px 0px 2px 2px;position: relative;max-width:120px;width: 100%;height:240px;}
#AddedAlternatives .PromotionListing {border:1px solid #d1d1d1;background-color:#ffffff;text-decoration:none;}
#AddedAlternatives .PromotionListing a {text-decoration:none;}
#AddedAlternatives .PromotionListing:hover {border:1px solid #4e4e55;background-color:#ffffff;}
#AddedAlternatives .PromotionListing .ImageListing {float: left;height: 90px;left: 0;margin: 0;overflow: hidden;position: relative;top: 0;width: 100%;}
#AddedAlternatives .PromotionListing .ImageListing img {display:block !important;border: 0 none;float: none;margin: 0;position: relative;width: 120px;height:90px;}
#AddedAlternatives .PromotionListing .ProductListing {float: left;left: 0;position: relative;top: 0;width: 100%;height:60px;}
#AddedAlternatives .PromotionListing .ProductListing .ProductName h2 {color: #333;float: left;font-family:LatoWeb;font-size: 10px;font-weight: lighter;line-height: 15px;margin: 0 !important;padding: 0 !important;text-align: center;width:100%;}
#AddedAlternatives .PromotionListing .ProductPrice p {text-decoration:none;vertical-align:text-bottom;height:190px;color: #ee4224;float: none;font-size: 28px;font-weight: bold;margin: 0 !important;padding: 0 !important;text-align: center;width: 100%;}
#AddedAlternatives .PromotionListing .AddToBasket {display:none;float: none;left:0;right: 20px;position: absolute;top: 170px;width: 95%;background-color:#ff9012;height:40px;}
#AddedAlternatives .PromotionListing a span abbr {border: 0 none;color: #009800;display: block !important;font-size: 11px;font-weight: normal;line-height: 11px;text-align: center;text-decoration: none;text-transform: uppercase;bottom:0;width: 100%;}

#AddedBasket #baskQty {float:left;margin-left:0;}
@media screen and (max-width: 600px) {
#AddedAlternatives .PromotionListing b {font-weight:bold;background: #ff9012 none repeat scroll 0 0;bottom: 5px;color: #ffffff;display: block !important;font-size: 13px;font-weight: normal;height: 40px;line-height: 40px;margin: 0 5px 0 5px;max-width: 110px;position: absolute;text-align:center;text-transform: uppercase; width: 100%;}

}

@media screen and (min-width: 600px) {
    #addedbasketpanel {top:30%;left:30%;margin-left:-15%;margin-top:-15%;}
	#ItemAdded {width:45%;}
	#AddedBasket {height:54px;margin-top:0;margin-left:-1px;padding-left:5px;width:55%}
	.Add_To_basket_Buttons #continue, .Add_To_basket_Buttons #continue1 {max-width:240px}
	.Add_To_basket_Buttons #checkout, .Add_To_basket_Buttons #checkout1 {max-width:150px}
	#AddedAlternatives .PromotionListing {background: rgb(255, 255, 255) none repeat scroll 0 0;cursor: pointer;float: left;font-size: 11px;height: auto;margin: 5px 0px 15px 5px;position: relative;max-width:120px;width: 100%;height:200px;}
	#AddedAlternatives .PromotionListing {border:1px solid #d1d1d1;background-color:#ffffff;text-decoration:none;}
	#AddedAlternatives .PromotionListing:hover {border:1px solid #4e4e55;background-color:#ffffff;}
	#AddedAlternatives .PromotionListing .ImageListing {float: left;height: 90px;left: 0;margin: 0;overflow: hidden;position: relative;top: 0;width: 100%;}
	#AddedAlternatives .PromotionListing .ImageListing img {display:block !important;border: 0 none;float: none;margin: 0;position: relative;width: 120px;height:90px;}
	#AddedAlternatives .PromotionListing .ProductListing {float: left;left: 0;position: relative;top: 0;width: 100%;height:60px;}
	#AddedAlternatives .PromotionListing .ProductListing .ProductName h2 {color: #333;float: left;font-family:LatoWeb;font-size: 10px;font-weight: lighter;line-height: 15px;margin: 0 !important;padding: 0 !important;text-align: center;width:100%;}
	#AddedAlternatives .PromotionListing .ProductPrice p {text-decoration:none;vertical-align:text-bottom;height:190px;color: #ee4224;float: none;font-size: 28px;font-weight: bold;margin: 0 !important;padding: 0 !important;text-align: center;width: 100%;}
	#AddedAlternatives .PromotionListing .AddToBasket {display:none;float: none;left:0;right: 20px;position: absolute;top: 170px;width: 95%;background-color:#ff9012;height:40px;}
	#AddedAlternatives .PromotionListing a span abbr {border: 0 none;color: #009800;display: block !important;font-size: 11px;font-weight: normal;line-height: 11px;text-align: center;text-decoration: none;text-transform: uppercase;bottom:0;width: 100%;}
	#AddedAlternatives .PromotionListing b {display:none;}
	#AddedAlternatives .PromotionListing:hover b {font-weight:bold;background: #ff9012 none repeat scroll 0 0;bottom: 5px;color: #ffffff;display: block !important;font-size: 13px;font-weight: normal;height: 40px;line-height: 40px;margin: 0 5px 0 5px;max-width: 110px;position: absolute;text-align:center;text-transform: uppercase; width: 100%;}
}
@media screen and (min-width: 56.3125em) {
#addedbasketpanel {top:30%;left:30%;margin-left:0%;margin-top:0%;}
}

/**USP's**/
.USP {display: none;}
.marquee {max-width: 550px;width: 100%;height: 75px;margin: 0 auto;overflow: hidden;position: relative;}
    .marquee p {position: absolute;font-family: Tahoma, Arial, sans-serif;width: 100%;height: 100%;margin: 0;line-height: 75px;text-align: center;font-size: 14px;color: #fff;text-shadow: 1px 1px 0 #000000;filter: dropshadow(color=#000000, offx=1, offy=1);}
    .marquee p {transform: translateX(100%);}

@keyframes left-one {
    0% {transform: translateX(100%);}
    10% {transform: translateX(0);}
    20% {transform: translateX(0);}
    30% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}

@keyframes left-two {
    0% {transform: translateX(100%);}
    30% {transform: translateX(100%);}
    40% {transform: translateX(0);}
    50% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}

@keyframes left-three {
    0% {transform: translateX(100%);}
    50% {transform: translateX(100%);}
    60% {transform: translateX(0);}
    70% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}

@keyframes left-four {
    0% {transform: translateX(100%);}
    70% {transform: translateX(100%);}
    80% {transform: translateX(0);}
    90% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}

.marquee p:nth-child(1) {animation: left-one 20s ease infinite;}
.marquee p:nth-child(2) {animation: left-two 20s ease infinite;}
.marquee p:nth-child(3) {animation: left-three 20s ease infinite;}
.marquee p:nth-child(4) {animation: left-four 20s ease infinite;}

@media screen and (min-width:796px) {
    .USP {display: inline-block;}
        .USP p {float: left;margin: 0 0;}
        .USP img {width: 100%;max-width: 1028px;}
    .USPMob {display: none;}
}


.btn-find-address {background-color: #f88a3c;color: #ffffff;border: none;border-radius: 2px;border: 1px solid rgba(0,0,0,0.3);border-bottom-color: rgba(0, 0, 0, 0.3);border-bottom-style: solid;border-bottom-width: 1px;border-bottom: 2px solid rgba(0,0,0,0.3);cursor: pointer;padding: 4px 5px;}
.btn-find-address:hover {border: 1px solid rgba(0,0,0,0.5);border-bottom: 2px solid rgba(0,0,0,0.5);}

.validation-summary-errors {font-weight: bold;color: #f00}
.validation-summary-errors ul li {list-style-type:none;text-align:center;}

.show-more-specifications {color: #f88A3c;margin-left:2px;font-size: 15px;line-height: 15px;cursor: pointer;}
.limit-spec-height.limit {max-height: 70px;}

/* Links should always use cursor pointer for optimal UX */
a {cursor:pointer;}

#screenOverlay {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.6);}


/** Cookie Bar **/
#cookieBar {
    z-index: 10001;
    position: sticky;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 10px 20px;
    width: 100%;
    color: #fff;
    background: #5a6771;
}

#cbinner {
    margin: 0 auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
}

.cbinnerhead p {
    display: inline-block;
    color: #fff;
    font-size: 20px;
}

.cbinnertext p {
    font-size: 12px;
    margin-top: 0;
}

.cbinnerlist {
    display: flex;
    flex-flow: row wrap;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 20px;
}

    .cbinnerlist a {
        display: inline-block;
        color: #FF9016;
        font-weight: 700;
        margin-bottom: 3px;
        text-align: center;
        text-decoration: none;
    }

        .cbinnerlist a:hover {
            color: #fff;
        }

@media (min-width: 480px) {
    #cbinner {
        flex-flow: row nowrap;
    }

    .cbinnerhead {
        width: 20%;
    }

    .cbinnerhead h2 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cbinnertext {
        width: 50%;
    }

    .cbinnertext p {
        margin-bottom: 0;
    }

    .cbinnerlist {
        min-width: 140px;
        width: 25%;
        flex-flow: column nowrap;
        padding: 0 0 0 20px;
    }

    .cbinnerlist a {
        text-align: left;
    }
}