/* Client CSS goes here */






/* Youtube Responsive embed */

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }





/* WHSmith Special Review for PDP CSS */



.whsreviewtitle {
    color: #989898;
    line-height: 26px;
    margin-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    font: normal 600 1.25rem Gotham-Medium,Arial,sans-serif;
}

.pdpdescitalic {
    font-style: italic;
    font-size: .875rem;
    line-height: 20px;
    margin-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.publisherdescriptiontitle {
    line-height: 18px;
    margin-bottom: 15px;
    margin-top: 65px;
    font: normal 600 .875rem Gotham-Medium,Arial,sans-serif;
}

.publisherdescriptiontext {
    font-size: .875rem;
margin-bottom: 15px;
}

@media only screen and (max-width: 767px) {
	.whsreviewtitle {
margin-top: 30px;
padding-left: 0px;
padding-right: 0px;
}

.pdpdescitalic {
    padding-left: 0px;
    padding-right: 0px;
}

.publisherdescriptiontitle {
    font: normal 600 .775rem Gotham-Medium,Arial,sans-serif;
}

.publisherdescriptiontext {
    font-size: .775rem;
}
}


/* Show Hide Functionality For List Pages */


.light-touch-standard-text-header {
	font: normal 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
	line-height: 1.4rem;
}

.light-touch-standard-text {
	font-size: .875rem;
	margin-bottom: 15px;
	line-height: 1.4rem;
}

.shcontent {
	display:none;
	width:100%;
}

.shclick {
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
.light-touch-standard-text-header, .light-touch-standard-text {
font-size: .775rem;
}

}


/* Feature text for cat landing pages */

.catlandingtextcontainer {
    background-color: #ffffff;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}



@media only screen and (max-width: 800px) {
.catlandinginternal-1 {
column-count: 1;
}
}



/* HTML Additions to lead banners */


.text-container-banner-left {
    position: absolute;
    top: 45%;
    left: 0px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 55%;
    color: #000000;
    text-align: center;
    padding: 0 1.27%;
}


.leading-text-banner-left {
    display: block;
    font-size: 1rem;
    margin-bottom: 0px;
    font: normal 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
}


.trailing-text-banner-left {
    display: block;
    font-size: 1rem;
    margin-bottom: 0px;
    font: normal 400 1.175rem Gotham-Bold,tahoma,Arial,sans-serif;
}


.main-text-banner-left {
    width: 80%;
    margin: 0 auto 0;
    font: normal 400 4.875rem Gotham-Medium,tahoma,Arial,sans-serif;
}

.btn-banner-bottom {
    position: absolute;
    left: 50%;
    bottom: 3%;
    margin-top: 10px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    -webkit-box-shadow: 0 1px 2px #aeaeae;
    box-shadow: 0 1px 2px #aeaeae;
    padding: 12px 60px;
    text-align: center;
    font: normal 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
}



@media only screen and (max-width: 900px) {
.trailing-text-banner-left {
    font: normal 400 1.0rem Gotham-Bold,tahoma,Arial,sans-serif;
}

.main-text-banner-left {
    font: normal 400 2.875rem Gotham-Medium,tahoma,Arial,sans-serif;
}

.btn-banner-bottom {
    position: absolute;
    left: 50%;
    margin-top: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    -webkit-box-shadow: 0 1px 2px #aeaeae;
    box-shadow: 0 1px 2px #aeaeae;
    padding: 10px 30px;
    text-align: center;
    font: normal 400 .675rem Gotham-Bold,tahoma,Arial,sans-serif;
}

}

@media only screen and (max-width: 540px) {
.trailing-text-banner-left {
    font: normal 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
}

.main-text-banner-left {
    font: normal 400 2.175rem Gotham-Medium,tahoma,Arial,sans-serif;
}

.btn-banner-bottom {
display:none;
}

}



@media only screen and (max-width: 414px) {
.text-container-banner-left {
    top: 30%;
    left: 0;
    -webkit-transform: translateY(-80%);
    transform: translateY(-80%);
    width: 100%;
}

.main-text-banner-left {
    font: normal 400 2.8rem Gotham-Medium,tahoma,Arial,sans-serif;
}

.btn-banner-bottom {
display:block;
}

}



.text-container-banner-centmid {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    color: #000000;
    text-align: center;
    padding: 0 1.27%;
}

.main-text-banner-centmid {
    width: 80%;
    margin: 0 auto 0;
    font: normal 400 7.875rem Gotham-Medium,tahoma,Arial,sans-serif;
}

.leading-text-banner-centmid {
    display: block;
    font-size: 1rem;
    margin-bottom: 0px;
    font: normal 400 1.175rem Gotham-Bold,tahoma,Arial,sans-serif;
}

.trailing-text-banner-centmid {
    display: block;
    font-size: 1rem;
    margin-bottom: 0px;
    font: normal 400 2.175rem Gotham-Bold,tahoma,Arial,sans-serif;
}

@media only screen and (max-width: 900px) {
.trailing-text-banner-centmid {
    font: normal 400 1.2rem Gotham-Bold,tahoma,Arial,sans-serif;
}

.main-text-banner-centmid {
    font: normal 400 3.275rem Gotham-Medium,tahoma,Arial,sans-serif;
}

}

@media only screen and (max-width: 540px) {
.trailing-text-banner-centmid {
    font: normal 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
}

.main-text-banner-centmid {
    font: normal 400 2.175rem Gotham-Medium,tahoma,Arial,sans-serif;
}


}



@media only screen and (max-width: 414px) {
.text-container-banner-centmid {
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.main-text-banner-centmid {
    font: normal 400 2.8rem Gotham-Medium,tahoma,Arial,sans-serif;
}


}


.btn-banner-in-txt-container {
    position: absolute;
    left: 50%;
    margin-top: 10px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    -webkit-box-shadow: 0 1px 2px #aeaeae;
    box-shadow: 0 1px 2px #aeaeae;
    padding: 12px 60px;
    text-align: center;
    font: 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
}


@media only screen and (max-width: 900px) {

.btn-banner-in-txt-container {
    position: absolute;
    left: 50%;
    margin-top: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    -webkit-box-shadow: 0 1px 2px #aeaeae;
    box-shadow: 0 1px 2px #aeaeae;
    padding: 10px 30px;
    text-align: center;
    font: normal 400 .675rem Gotham-Bold,tahoma,Arial,sans-serif;
}

}


@media only screen and (max-width: 540px) {

.btn-banner-in-txt-container {
display:none;
}

}



@media only screen and (max-width: 414px) {

.btn-banner-in-txt-container {
display:block;
}

}




/* HOTFIX TEMPORARY HIDING CERTAIN CATEGORIES FROM SEARCH DROPDOWN. CHRISTMAS IS SECOND ITEM ON LIST, SALE AND OFFERS IS LAST */


.header-search .selectric-scroll ul li:nth-child(11) {
    display: none;
}




/* KOBO DESCRIPTION TWEAKS */

.strap-line {
    height: 60px;
    position: relative;
}

.strap-line p {
    line-height: 30px;
}

.rakutenlogoreplacement {
    background: url(https://assets.whsmith.co.uk/content-image/default/rakutenkobologo.jpg);
    position: absolute;
    width: 105px;
    height: 30px;
    color: transparent;
    margin-left: 8px;
}



/* OVERWRITE TO STYLES ON PROMOTIONAL MESSAGES ON PLP AND SLP ONLY. NOT PDP */
.promotional-message {
    background-color: #eb3323;
    color: #ffffff;
    border-left: 4px solid #9a9a9a;
}

.product-details-all .product-promo .promotional-message {
    border-left: 4px solid #eb3323;
    background-color: #ffffff;
    color: #000000;
}

.product-details-all .product-promo .promotional-message {
    border-left: 4px solid #eb3323;
    background-color: #ffffff;
    color: #000000;
}

.cart-summary .promotional-message {
    border-left: 4px solid #eb3323;
    background-color: #ffffff;
    color: #000000;
}



/* OVERWRITE TO STYLES ON CHECKOUT PROCESS BUTTONS. NOT CREATE ACCOUNT BUTTON */
.js-checkout-next-step {
    background-color: #167f1e;
}

.js-checkout-next-step:hover {
    background-color: #289e31;
}


/* hiding the text 'availability' on PDPs */
.availability-label {
    display: none;
}


/* Asset update overlay 2021 START */

/* Sitewide and fallback styles */
.catlanding {
    background: #ffffff !important;
}

div#main {
    background: #ffffff;
}

body {
    font: normal 400 .75rem Gotham-Book,Arial,sans-serif;
}

.h1, h1 {
    font: normal 400 28px Gotham-Bold,tahoma,Arial,sans-serif;
}

h1.cat-title {
    font: normal 400 28px Gotham-Bold,tahoma,Arial,sans-serif;
    margin-bottom: 20px;
}

.hp-banner-article {
    background: #ffffff;
}

.catlanding-header .btn-blue {
	margin-top: 0px;
}

.h4, h4 {
    font: 400 1.2rem Gotham-medium,Arial,sans-serif;
}

.popup-sub-title {
    font: 400 .875rem Gotham-Bold,tahoma,Arial,sans-serif;
}

.mini-cart-name .name {
    color: #000;
    font: normal 400 .85rem Gotham-Bold,Arial,sans-serif;
}

.navigation-info-title {
font: 400 1.2rem Gotham-medium,Arial,sans-serif;
}

.mini-cart-header {
    font: normal 400 1.3rem Gotham-Bold,Arial,sans-serif;
}

.product-item-details .product-name {
    font: normal 400 0.8rem Gotham-medium,Arial,sans-serif;
}

.checkout-message {
    font-size: .75rem;
}

h2.h2.main-error-title {
    font: normal 400 16px Gotham-Bold,tahoma,Arial,sans-serif;
}

.promotional-message.checkout-message.main-error {
    font-size: .75rem;
}

h3.h3.confirmation-login-title {
    font: 400 25px Gotham-Bold,Arial,sans-serif;
}

.refinement-title {
    font-size: 14px;
}

/* Styling for content tiles */

.h2, h2 {
    font: normal 400 24px Gotham-Bold,tahoma,Arial,sans-serif;
}

h2.h2.offers-title {
    font: normal 400 1.2rem Gotham-Bold,tahoma,Arial,sans-serif;
}


.catlanding .offers .banners-grid-link {
    font: 400 .75rem Gotham-Bold,Arial,sans-serif;
}



.banners-grid-3item {
    width: 32.5%;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #ddd;
	padding-bottom: 5px;
}

a.banners-grid-3itemlink {
    font: 400 1.02rem Gotham-Medium,Arial,sans-serif;
    padding: 20px 40px 15px 20px;
    color: #666;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

p.article-description-3item {
    line-height: 1.125rem;
    padding: 0px 20px 20px 20px;
	color: #666;
}

a.link-seemore-3item {
    padding: 0px 20px 20px 20px;
    font-weight: bold;
    text-decoration: none;
}

.catlanding .categories-article-text {
	line-height: 1.225rem;
}

.catlanding .categories-row .banners-grid-link {
	background: #ffffff;
}

.hp-banner-article-overview {
		background: #ffffff;
}

@media only screen and (max-width: 1040px) {
li.banners-grid-3item {
    width: 49%;
}

#firstslot-threeitem-li {
    width: 100%;
    flex-direction: row;
	padding-bottom: 0;
}

.firstslot-threeitem-div {
    width: 50%;
}

}

@media only screen and (max-width: 700px) {
li.banners-grid-3item {
    width: 100%;
}

#firstslot-threeitem-li {
    width: 100%;
    flex-direction: column;
	padding-bottom: 20px;
}

.firstslot-threeitem-div {
    width: 100%;
}

}


.banners-grid-link {
    padding: 20px 40px 20px 20px;
    color: #000;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font: 400 13px Gotham-Bold,Arial,sans-serif;
    background-color: #ffffff;
}

.banners-grid-link span .icon-arrow {
    display: none;
}

.banners-grid-link span svg.icon-arrow {
    display: none;
}

.banners-grid-link .icon-arrow {
    display: none;
}

.banners-grid-item {
    background: #ffffff;
}

a.banners-grid-3itemlink {
    font: 400 15px Gotham-Bold,Arial,sans-serif;
    padding: 20px 40px 15px 20px;
    color: #666;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

p.article-description-3item {
    font: 400 11px Gotham-Book,Arial,sans-serif;
    line-height: 17px;
    padding: 0px 20px 20px 20px;
    color: #666;
}

.three-col-singleblock-title {
    font: 400 15px Gotham-Bold,Arial,sans-serif;
    color: #666;
    margin: 0;
    padding: 15px;
    font-weight: bold;
}

a.link-seemore-3item {
    font: 400 11px Gotham-Medium,Arial,sans-serif;
    line-height: 17px;
    padding: 0px 20px 20px 20px;
    text-decoration: none;
}

.three-col-singleblock-text {
    font: 400 11px Gotham-Medium,Arial,sans-serif;
    line-height: 17px;
    padding: 0px 15px 15px 15px;
    margin: 0;
    color: #666;
}

.catlanding .categories-description {
	background: #ffffff;
}

/* Styling for Product Tiles */

.carousel-content h2.h2.carousel-title {
    font: 400 1.2rem Gotham-medium,Arial,sans-serif;
    font-weight: bold;
    color: #000000;
}

.link-more {
    font: normal 400 .75rem Gotham-Book,tahoma,Arial,sans-serif;
}

.product-tile .name-link {
    display: block;
    color: #000;
    line-height: 18px;
    text-decoration: none;
    font: 400 12px Gotham-Bold,Arial,sans-serif;
}

.product-tile .tile-attribute {
    font: normal 400 12px Gotham-Book,Arial,sans-serif;
}

.availability-msg, .product-availability-list {
    font: normal 400 12px Gotham-Medium,tahoma,Arial,sans-serif;
}

.product-sales-price {
    font: normal 400 15px Gotham-Bold,Arial,sans-serif;
}

.product-price-value {
    font: normal 400 12px Gotham-Book,tahoma,Arial,sans-serif;
}


.product-tile .product-pricing {
    border-top: 5px solid #ffffff;
	margin-top: 1px;
}


.product-promo .promotional-message {
    font: normal 400 11px Gotham-Medium,tahoma,Arial,sans-serif;
    border: 0;
}


/* Styling for Copy text */

.light-touch-standard-text {
    font: 400 13px Gotham-Book,Arial,sans-serif;
	line-height: 1.4rem;
}

.light-touch-standard-text-header {
    font: 400 13px Gotham-Bold,Arial,sans-serif;
	line-height: 1.4rem;
}

/* Styling for Features */

.hp-banner-item-text {
    font: normal 400 12px Gotham-Book,Arial,sans-serif;
	line-height: 18px;
}

.bold-primary {
    font-weight: 400;
}



/* Styling for Post Article */

.h3, h3 {
	font: 400 13px Gotham-Bold,Arial,sans-serif;
}

.hp-banner-article-title {
	font-size: 15px;
    font: 400 15px Gotham-Bold,Arial,sans-serif;
}

.hp-banner .large-article .hp-banner-article-title {
    font-size: 18px;
}


/* Styling for help or content pages */

.content-page h3 {
    font: 400 19px Gotham-Bold,Arial,sans-serif;
    margin-bottom: 5px;
    margin-top: 5px;
}

.login-box .login-benefit {
    font: normal 400 24px Gotham-Bold,tahoma,Arial,sans-serif;
}

/* Asset update overlay 2021 END */