@import url('/Portals/_default/Skins/Paperback/ResponsiveNav/nav.css');
/*@charset "UTF-8";*/

/***************** DNN specific *************************/
.DNNEmptyPane { display: none!important }
.paneOutline { border: 1px dashed #ccc }
.dnnEditState .adpane {	position: static;}

/*********************  BROWSER WARNING ****************/

.buorg {background-color: rgb(149,149,211)!important; box-shadow:none!important; border-bottom-color: transparent!important} /* background colour*/
.buorg-mainmsg, .buorg-moremsg {color:white!important} /* text colour */
#buorgul {background-color: rgb(168,199,0)!important} /* button colour */
#buorgig {background-color:white!important; color:black!important} /* button colour */

/*********************** Generic **********************/

body {font-size: 18px!important;}
html {font-size:18px} /* USED FOR RESPONSIVE TEXT */

p {margin-bottom:0; line-height:1.5!important}
a {line-height:1.5; cursor: pointer; }
h2 a {font-size:inherit}
b, strong {font-weight: 700;}
img {max-width:100%}

.Help {background-color: transparent;  padding: 0;    border: 0;    font-size: inherit;    color: inherit;    font-weight: inherit;} /* Overwrites DNN default.css for help page */
	
.card {border:0px}

.ImgHover {text-align:center}
.normal-image {opacity:1}
.hover-image {display:none; opacity:0}
.ImgHover:hover .hover-image {display:inline; opacity:1}
.ImgHover:hover .normal-image {display:none; opacity:0}
.block {display:block; overflow:hidden}

.ImgHover1 img {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.ImgHover1 img.top:hover {opacity:0;}

/******************  COLOURS ************************/

:root {
  --logo-purple: 149,149,211;   /* PBS Logo Purple */
  --logo-green: 168,199,0;  	/* PBS Logo Green */
  --orange: 237,94,54;	
  --footer-grey: 53,51,51; 		/* Dark Grey used in PBS footer */
  --light-grey: 243,243,243;	/* #f3f3f3 - Light grey - Product ImgBG & Nav hover */ 
  --grey-text: 86,86,86;        /* #565656 - Gray used for text */
  --alpha: 1;					/* Opacity 1 */
  --beta: 0.6;					/* Opacity 0.6 */
  --gamma: 0.3;					/* Opacity 0.3 */
  --black-text: #252525;
}

.TopNav {background-color: rgba(var(--logo-purple), var(--alpha)); align-items:center}
.TopNav * {color:white}
.TopNav a:visited {color:white!important}

.Breadcrumb {background-color: rgba(var(--logo-purple), var(--gamma)); display: none;}

footer {background-color: rgba(var(--footer-grey), var(--alpha));}
footer * {color:white!important}
.footer-upper {background-color: rgba(var(--logo-purple), var(--alpha));}
.mobile-footer, #dnn_MobFooterOne, #dnn_MobFooterThree {background-color: rgba(var(--logo-purple), var(--alpha)); z-index:999; height:60px; padding-top:5px; padding-bottom:5px }
/*.mob-bg {z-index: 9999; background-color: rgba(var(--logo-purple), var(--alpha));}*/

.adpane {background-color: rgba(var(--logo-green), var(--alpha));}
.adpane * {color:white; font-weight:700}

.PurpleText {color: rgba(var(--logo-purple), var(--alpha))!important }
.GreenText {color: rgba(var(--logo-green), var(--alpha))!important}
.RedText {color: red!important}
.GreyBG {background-color: rgba(var(--light-grey), var(--alpha))!important;}

.InnerNav{ background-color: rgba(var(--light-grey), var(--alpha));}
#dnn_innernav2 {background-color:white;}


.cc-btn {background-color: rgba(var(--logo-purple), var(--alpha))!important; color:white!important}

/**************************************  GENERIC *************************************************************/

h1, h2 {font-family: 'Playfair Display', serif; font-weight:700; color: rgba(var(--grey-text), var(--alpha)); line-height:1.2}
h3, h4, h5 {font-family:montserrat,sans-serif; color: rgba(var(--grey-text), var(--alpha)); font-weight:bold; line-height:1.2}
h6, p {font-family: montserrat,sans-serif; color: rgba(var(--grey-text), var(--alpha));}

h1 {font-size: 2.2rem}
h2 {font-size:2rem}
h3 {font-size:1.75rem}
h4 {font-size:1.5rem}
h5 {font-size:1.25rem}
h6 {font-size:1rem; margin-bottom:0}
p {font-size:1rem}
li { font-family: montserrat,sans-serif; font-weight:400; font-size:1rem;}
a, a:visited { font-family:inherit; text-decoration:none; color:inherit; /*font-size:1rem;*/}
.underline {text-decoration:underline}
input {font-family: montserrat,sans-serif; font-size:16px}

.Desktop {display:none!important}

.Width50 {width:100%; margin:0 auto;}
.Width70 {width:100%; margin:0 auto;}
.Width80 {width:100%; margin:0 auto;}
.Width90 {width:100%; margin:0 auto;}

.BannerPane img {width:100%}

.AlignCenter {display: flex;    flex-direction: column;    justify-content: center;} /* Add to Inner Row Divs to align center and 100% height */

/********************************************  CONTAINERS  *************************************************************/
/* BUTTONS */
.button {padding: 5px 25px; border-radius: 0px; color:white;    display: inline-block; font-family: montserrat,sans-serif;
    transition: background-color linear 0.2s;
    -webkit-transition: background-color linear 0.2s;
	background-color:transparent;
	margin:10px; border: 1px solid; text-align:center;
	line-height: 1.5; /* needs to match line height for buttons created using a tags*/}
.button:hover {cursor: pointer}
.btn-clear {background-color: transparent; color:white!important;  border-color: white; }
.btn-clear:hover {background-color: white; color: black!important }
.btn-white {background-color: white; color: rgba(var(--grey-text), var(--alpha))!important;  border-color: rgba(var(--grey-text), var(--alpha)); }
.btn-white:hover {background-color: rgba(var(--logo-purple), var(--alpha)); color: white!important; border-color: rgba(var(--logo-purple), var(--alpha)); }
.btn-orange {background-color: transparent; color: rgba(var(--orange), var(--alpha));  border-color: rgba(var(--orange), var(--alpha)); }
.btn-orange:hover {background-color: rgba(var(--orange), var(--alpha)); color: white!important }
.btn-purple {background-color: rgba(var(--logo-purple), var(--alpha)); color: white!important;  border-color: rgba(var(--logo-purple), var(--alpha)); }
.btn-purple:hover {background-color: white; color: rgba(var(--logo-purple), var(--alpha))!important }
.btn-green {background-color: rgba(var(--logo-green), var(--alpha)); color: white!important;  border-color: rgba(var(--logo-green), var(--alpha)); }
.btn-green:hover {background-color: white; color: rgba(var(--logo-green), var(--alpha))!important }
.btn-green-border {background-color: white; color: rgba(var(--logo-green), var(--alpha));  border-color: rgba(var(--logo-green), var(--alpha)); }
.btn-green:hover {background-color: white; color: rgba(var(--logo-green), var(--alpha))!important }
.btn-basket {background-color: transparent; color:white!important;  border-color: white; }
.btn-basket:hover {background-color: rgba(var(--logo-green), var(--alpha));  color: white!important }
.btn-blackborder {border: 1px solid rgb(54,54,54);    background: #fff;    color: rgb(54,54,54)}

.btn-left {margin-left:0}
.btn-right {margin-right:0}
.btn-top {margin-top:0}
.btn-zero {margin:0}

.btn-tab {margin-left:0; margin-right:0; border: 0; margin-bottom: 0px; color: rgba(var(--grey-text), var(--alpha));}
.btn-tab-active {color: rgba(var(--logo-green), var(--alpha)); background-image: url("/Portals/0/Tab-bg.png"); background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 0;
    border: 0;}

.ButtonContainer {display: flex; padding-top: 10px;     padding-bottom: 10px;}

/*.SNbutton {
	border: solid black 2px;
	width: 10.4rem;
	height: 2.8rem;
	padding-top: 0.5rem;
	text-align: center;
	margin: 0 auto;
}*/

.CategoryTopText {padding: 15px;}
.CategoryGalleryTitle h2 {padding-left:20px} /* same padding as .ProductBox .ImgBG */

.CampaignTitle {padding-left:15px} /* Also used in Container */
.New-Releases #lnkCampainName, .Bestsellers #lnkCampainName {display:none}
#dnn_innernav2 .CategoryMenu ul{display:none}
#dnn_innernav2 .CategoryMenu h4{padding-left:15px; color: rgba(var(--grey-text), var(--alpha))!important; font-size: 2.2rem; font-family: 'Playfair Display', serif;
    font-weight: 700;    line-height: 1.2; padding-bottom:30px;}

.CategoryMenu {padding-top:23px}
.CategoryMenu ul {list-style: none; margin:0}
.CategoryMenu .ProductTitle {color:rgba(var(--grey-text), var(--alpha)); padding-top:5px; padding-bottom:5px; font-family: montserrat,sans-serif; }
.CategoryMenu .ProductTitle:hover {color: rgba(var(--logo-green), var(--alpha));}
.CategoryMenu h4 {font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 10px;}


.ThankYou {text-align:center}
.ThankYou h2 {margin: 0; color: white;    padding: 10px;}
/* LOGIN PAGE */
.ModAuthenticationC {width: 100%; padding-right: 0px;  float: none;    margin: 0;}
.PBSLogin {background-color: rgba(var(--light-grey), var(--alpha));  padding: 20px; margin:50px 0}
.PBSLogin .LoginPanel {width: 100%;    padding-right: 0;}
.PBSLogin .dnnLabel {text-align:left; padding-bottom:5px}
.PBSLogin .dnnFormItem > label.dnnFormLabel, .dnnFormItem > span.dnnFormLabel {display:none}
.PBSLogin .dnnActions {padding-top:0}
.PBSLogin input {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;  border-radius:0; border: 1px solid rgb(118,118,118);}

/* PASSWORD RESET */

.PasswordReset {background-color: rgba(var(--light-grey), var(--alpha));  padding: 20px; margin:50px auto; width:100%}
.dnnPasswordResetContent {width:auto} 
.password-strength-container { width: 100%; max-width: auto;}
.password-strength-container input {width:100%!important;}
.password-confirm {width: 100%!important; max-width: auto;}



/*********************************** HEADER & NAVIGATION ****************************************************/
/*.HeaderWrapper #dnn_dnnLOGO_imgLogo {max-height:90px; transition: max-height 0.2s}*/
.HeaderWrapper.sticky {position: sticky; top: 0; z-index: 999; background-color: white;
	/*box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;*/
    /* -webkit-box-shadow: 0 -6px 0 #fff, 0 1px 6px rgb(0 0 0 / 35%); */
    box-shadow: 0 -6px 0 #fff, 0 1px 6px rgb(0 0 0 / 35%);
    /* box-shadow: rgb(51 51 51 / 30%) 0px 5px, rgb(51 51 51 / 20%) 0px 10px, rgb(51 51 51 / 10%) 0px 15px, rgb(51 51 51 / 5%) 0px 20px;}*/
	}
.dnnEditState .HeaderWrapper.sticky  {position:static}
.HeaderWrapper .nonstickylogo {opacity:1; max-height:100px; transition: max-height 500ms linear}
.HeaderWrapper .stickylogo  {opacity:0; display:none}
.HeaderWrapper.sticky .stickylogo {display:block; opacity:1; max-height:85px; transition: max-height 500ms linear; }
.HeaderWrapper.sticky .nonstickylogo {opacity:0; display:none;}
.searchrow {padding-top: 15px}
.logo {padding:5px 0}

.MainNav {overflow:hidden; min-height:20px; max-height:140px; transition: 1s; }
.sticky .MainNav {overflow:visible; min-height:20px; max-height:105px; /* Don't drop below this without changing rest of row */ transition: 1s; overflow:visible; }

/* Purple Top Nav*/
.TopNav {flex-wrap: nowrap; padding:0px }
.TopNav * {text-align:right}

/*.TopNav   .dropbtn {font-size: 16px; padding-left:15px; padding-right:15px; background-color: transparent; border:0; background-image: url(/Portals/0/Icon-Dropdown.png);   background-repeat: no-repeat;    background-position: 97% center; margin:0;}*/
.TopNav   .dropbtn {font-size: 16px; padding-left:15px; padding-right:15px; background-color: transparent; border:0;  margin:0; position:relative; min-width: 100px;}
.TopNav   .dropbtn a:hover {color: rgba(var(--logo-green), var(--alpha))!important;}
.TopNav   .dropbtn:after {	content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(/Portals/0/Icon-Dropdown.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 34%;
    right: 0;}
/*.TopNav   .dropdown {position: relative;  display: inline-block;}*/
.TopNav   .dropdown-content {display: none;  position: absolute;  background-color: white;  min-width: 110px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; right: 10px; padding: 10px;}
.TopNav   .dropdown-content a {color: #565656!important;  padding: 0px;  text-decoration: none;  display: block; font-size:14px!important}
.TopNav   .dropdown-content a:hover {color: rgba(var(--logo-green), var(--alpha))!important;  /*background-color: rgba(var(--light-grey), var(--beta));*/}
.TopNav   .dropdown:hover .dropdown-content {display: block; z-index:9999}

.TopNav .currency {height: 34px; display: flex;    justify-content: flex-end; position:relative; margin-right: 0px;}
.TopNav .currency:after {	content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(/Portals/0/Icon-Dropdown.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 34%;
    right: 15px;}
/*.TopNav .currency .form-control {font-size:16px; background-color: white;  border: 0;    -webkit-appearance: none;    -moz-appearance: none;    background: transparent;    }
.TopNav .currency .form-control:focus {color:white!important}
.TopNav .currency option {padding: 10px;	color: #565656; font-size:14px; border:0px; outline: 0px }*/
/*.TopNav .currency select:focus{border-color: white; outline:none;}*/
/*.TopNav .currency option:hover{   box-shadow: 0 0 20px 20px #e1358f inset;}*/

/*.currencyDrop {font-size:16px; background-color: white;  border: 0;    -webkit-appearance: none;    -moz-appearance: none;    background: transparent;    
background-image: url(/Portals/0/Icon-Dropdown.png);    background-repeat: no-repeat;    background-position: 97% center; padding-right:10px; padding-left:10px}*/
.TopNav .currencyDrop {font-size:16px; background-color: white;  border: 0;    -webkit-appearance: none;    -moz-appearance: none;    background: transparent;    
padding-right:25px; padding-left:10px; z-index:995;}
.TopNav .currencyDrop:focus {color:white!important; border-color: white; outline:none;}
.TopNav .currencyDrop option {padding: 10px;	color: #565656; font-size:14px; border:0px; outline: 0px }
.TopNav .currencyDrop option:hover{   box-shadow: 0 0 20px 20px #e1358f inset;}

#dnn_location {display:none}

/*Main Category Nav Section */


.MainNav, .Breadcrumb {padding:0 10px}


#dnn_favourites img, #dnn_basket img, #dnn_user img {max-height:40px}
#dnn_basket, #dnn_MobFooterThree {position:relative;}
.notification{background: rgba(var(--logo-green), var(--alpha)); color: white;  border-radius: 50%;  width: 20px;    height: 20px;    text-align: center;    font-size: 14px;
    line-height: 1rem!important;    padding: 2px;    z-index: 995;    position: absolute;    bottom: 0;left: 50%;}

/*.adpane {position: absolute;	z-index: 1;}*/
.adpane .marquee {height: 50px; overflow: hidden; position: relative; white-space: nowrap; box-sizing: border-box; line-height: 50px; }
.adpane .marquee p span {padding-left:30px; padding-right:30px}
.marquee p {
    display: inline-block;
	line-height: 50px;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.dnnEditState .MainNav{max-height: none;}

.gallerywrap {	position: relative;}

/*Breadcrumbs*/
.home .Breadcrumb {display:none}
.bcrumb {display:flex; margin: 0;  padding: 0; list-style-type: none; text-align: center;     align-items: center;   }
.bcrumb li {display: inline-block; max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.bcrumb a {padding: 5px 10px;  text-decoration: none;      display: inline-block;      width: 100%;  font-size:12px;  }

/*#dnn_Box3 {display:none}*/


/*********************************** FOOTER **********************************************************************/

footer * {font-family: montserrat,sans-serif; }
footer ul { list-style-type: none;   margin: 0;  padding: 0;}
footer li, footer p, footer a {font-size:16px}
footer span, footer span a {color: rgba(var(--logo-green), var(--alpha))!important}
footer i {font-size:25px; padding-right:10px;   padding-top: 6px;}
.mobile-footer {width:100%; position:fixed; bottom:0; height:70px; z-index: 10000 }
footer h5 {padding-bottom:15px; font-weight:normal;font-size: 20px;}
footer a:hover, footer i:hover {color: rgba(var(--logo-purple), var(--alpha))!important}
.cc-window.cc-floating { z-index: 10001; }


/************************************* MAIN CONTENT ************************************************************/

/*main {padding-top:50px; padding-bottom:50px}*/


/******************************  PRODUCT GALLERY ****************************/

/*.ProductBox {position: relative; display: inline-block;}*/
.ProductBox .ImgBG {position: relative; background-color: rgba(var(--light-grey), var(--alpha)); margin: 20px;  display: flex;    justify-content: center;}
.ProductBox img {height:300px; /*margin:0 auto;*/ /*margin:20px 0px;*/ box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; object-fit:contain}
.ProductBox .Overlay {display:none}
.ProductBox:hover .Overlay {
    transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
    position: absolute;
    top:0; left:0; 
	width: 100%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
    background-color: rgba(51, 51, 51, 0.7);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
	/*padding:20px;*/
}

.ProductBox .OverlayText {
	padding:5px;
	 display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to bottom */
    height: 100%;
	}
.ProductTitle {color:white; font-family: 'Playfair Display', serif; font-size:20px; margin-bottom:5px; line-height:1.1 }
.ProductAuthor {color:white; font-family: montserrat,sans-serif; font-size:16px; margin-bottom:15px}
.ProductPrice {color:white; font-family: montserrat,sans-serif; font-weight: bold; color: rgba(var(--logo-green), var(--alpha));}

.slick-dots {display:none!important}
.slick-track {margin-left: initial!important; margin-right: initial!important;}

.slick-prev:before, .slick-next:before{
	content:'';
	display:block;
	width: 100%;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
}
.slick-prev, .slick-next {width:8.3333333%!important; height:50px!important }
.slick-prev {left: -8.3333333%!important;}
.slick-next {right: -8.3333333%!important;}
.slick-prev::before {content:''!important;  background-image: url(/Portals/0/arrow-prev.png); background-position: left; }
.slick-next::before {content:''!important;  background-image: url(/Portals/0/arrow-next.png); background-position: right;}




/******************** PRODUCT DETAIL PAGE *****************************************************/

.productdetail {display: flex; flex-wrap: wrap; flex-direction: row;   z-index: 987;    position: relative;    margin: 0 auto; width:100%}
.ProductCard  {display: flex;  flex-direction: column;  padding: 20px 0 ;  }
.ProductCard.Tablet {padding-top:0}

.ProductBox1  {flex-basis: 100%; background-color: rgba(var(--light-grey), var(--alpha)); }
.ProductBox1 > div { display: flex; justify-content: center;  flex-direction: row;}
.ProductBox2  {flex-basis: 100%; }
.ProductBox3  {flex-basis: 100%; }
.ProductBox4  {flex-basis: 100%; }

.ProductBox1 img {box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;}
.ProductCard .price {align-items:center}
.ProductCard .price * {font-family: montserrat; font-weight:normal}

.ProductBox2 .TopSection * {margin-top:0; margin-bottom:0}
/*.ProductBox2 .Desktop.price {display:none!important}*/
.ProductBox2 .price {align-items:center}
.ProductBox2 .price * {font-family: montserrat; font-weight:normal}

.ProductBox2 .product-description {height:auto; }
.ProductBox2 .product-description p {max-height:78px; height:auto; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden; line-height:26px!important; 
 transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);}
.ProductBox2 .read-more-state {display: none;}
.ProductBox2 .read-more-trigger {color: rgba(var(--logo-green), var(--alpha)); font-family: montserrat,sans-serif;}
.ProductBox2 .read-more-state:checked ~ p {-webkit-line-clamp: unset; height:auto; max-height:350px;  transition: max-height 1s ease-in-out; overflow:auto; }

.ProductBox2 .read-more-state ~ .read-more-trigger:before {content: 'see more';}
.ProductBox2 .read-more-state:checked ~ .read-more-trigger:before {content: 'see less';}

.accordion-button {border-radius:0; border:0; color: rgba(var(--grey-text), var(--alpha));    background-color: white; font-weight: bold; font-family: montserrat,sans-serif;}
.accordion-button::after { background-image: url(/Portals/0/buttonclosed.png); width:9px; height:9px; background-size:9px}
.accordion-button:focus {border-color: transparent; box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 0%);}

.accordion-button.collapsed {border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb}

.accordion-button:not(.collapsed) {color: rgba(var(--logo-purple), var(--alpha))!important ;  background-color: white; }
.accordion-button:not(.collapsed)::after { background-image: url(/Portals/0/buttonopen.png);}

.accordion-collapse {border:0}

#OtherBookByAuhtor .slick-track {width:100%!important}
#OtherBookByAuhtor .slick-slide {width:100%!important}




/******************************  SEARCH ********************************************************************************/

.autocomplete #mySearch {width:600px}
.ui-autocomplete.ui-front {list-style:none; width:640px!important}
.ui-autocomplete.ui-front .ui-menu-item-wrapper {padding: 5px; background-color:white; z-index:999;     position: relative; font-size:16px}
.ui-autocomplete.ui-front .ui-menu-item-wrapper:hover {color:rgba(var(--logo-green), var(--alpha))!important; cursor: default;} 



/****************************************************  SEARCH FILTER **************************************************************/
.DnnModule-PaperBackBook_Filter {padding-top:20px; padding-bottom:20px}
.ModPaperBackBookSearchC input[type=submit] {
    background: url(/Portals/0/Icon-Search.png) no-repeat center;
    background-color: #ebebeb;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    width: 40px;
}

#filterPanel #accordionfilter {padding-left:20px; padding-right:20px}
#filterPanel h4 {font-weight:normal}
#filterPanel label {padding:5px 0; font-size:14px; font-family: montserrat,sans-serif; }
#filterPanel .jumbotron .row {padding-top:10px; padding-bottom:10px}
#filterPanel .ActiveFilters h4 {font-family: 'Playfair Display', serif; font-size: 2rem;  margin-bottom: 10px; margin-right:10px; font-weight:bold}
#filterPanel .FilterSort h4 {font-size:20px}
#filterPanel .accordion-button {padding: 0; font-size: inherit; font-family: inherit; background-color:transparent; font-weight:normal; font-size: 20px }
#filterPanel .accordion-button:not(.collapsed) {color: rgba(var(--logo-purple), var(--alpha))!important;    background-color: transparent;}
#filterPanel .collapse {max-height:200px; overflow-y:auto;}
#filterPanel .collapse.show {max-height:200px; overflow-y:auto;}
#filterPanel .accordion-body {max-height:200px; overflow-y:auto ; padding:0; padding-top:10px}
#filterPanel .collapsed {border:0}
#filterPanel .accordion-body > input {height: 13px; width: 13px;-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;  border: 1px solid rgb(118,118,118);
    border-radius: 0px; outline: none; transition-duration: 0.3s; cursor: pointer;	padding:0;	background-color:white;	position:relative; }
#filterPanel .accordion-body > input:checked:before {left: 1px; bottom: -2px;content: '\2713'; display: block; text-align: center; color: rgba(var(--logo-purple), var(--alpha)); position: absolute;}
#filterPanel .accordion-button::after {background-image: url(/Portals/0/Icon-Plus.png);}
#filterPanel .accordion-button:not(.collapsed)::after { background-image: url(/Portals/0/Icon-Minus.png);}
	
.ActiveFilters	{align-items: center; justify-content: space-between;display: flex; flex-wrap:wrap}
.ActiveFilters	h4 {display:inline-block}
#FiltersBox i {display:none}
#FiltersBox .tag_related {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; background-color: rgba(var(--logo-purple), var(--gamma));
    color: rgba(var(--grey-text), var(--alpha))!important;
    border-radius: 8px;
    padding: 4px 15px;
    font-size: 12px;
    line-height: 1em;
	border-color: #c5c5cf; 
    outline: none;     display: inline-flex;
    margin-right: 10px;
    margin-top: 10px;
    align-items: center;}

	
/**********************************************  SEARCH RESULTS PAGE **************************************************/

.SearchResultsTop {align-items: center; padding-top: 20px;}
.SearchResultsTop .LHS {padding-left:35px; padding-bottom:10px}
.SearchResultsTop .RHS {display:flex; align-items: center; padding-right:35px; padding-left: 35px;}
.SearchResultsTop .RHS label {padding-right:10px; }
.SearchResultsTop .form-control {width:200px; border-radius:0; -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url(/Portals/0/Icon-Dropdown.png);
    background-repeat: no-repeat;
    background-position: 97% center;}
/*.SearchResultsTop .form-control:before {content: '';
    display: block;
    width: 9px;
    height: 9px;
    background-image: url(/Portals/0/Icon-Dropdown.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 41%;
    right: 40px;}*/
/*.SearchResultsTop select  {-webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url(/Portals/0/Icon-Dropdown.png);
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;}*/

.form-control:focus {border-color: rgba(var(--logo-purple), var(--alpha))!important; outline:none}
input:focus {border-color: rgba(var(--logo-purple), var(--alpha))!important; outline:none}

.SearchResultsTop span {color: rgba(var(--logo-purple), var(--alpha))!important; font-weight:bold; font-size:larger}

.progress { background-color:transparent!important; height:30px;margin-top:20px}
.progress p {color:white}

#CA_sortBy {margin-top:10px; border-radius:0; -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url(/Portals/0/Icon-Dropdown.png);
    background-repeat: no-repeat;
    background-position: 97% center;}

.pagination{margin:0!important; justify-content: center; }
.pagination .page-link {padding: .375rem 8px; color: rgba(var(--logo-purple), var(--alpha))!important; font-size: 0.8rem;}
.page-item.active .page-link {background-color: rgba(var(--light-grey), var(--alpha))!important;  border-color: #dee2e6!important;}

#filterbtn {display:block}
#filtertest {display:none}



/*******************************  Your Favourites Wishlist Section ******************************/

#myfavitems .ProductBox:hover .Overlay, .ModPaperBackBookSearchResultC .ProductBox:hover .Overlay {align-items: center; justify-content: center;}
.BelowImg {margin: 20px; padding: 20px; text-align:left; padding-top:0; margin-top:0}
.BelowImg .ProductTitle {color:#565656; /*line-height:1.5; font-weight:bold; font-size: 22px; margin-bottom: 5px;*/}
.BelowImg .ProductAuthor {color:#565656; /*line-height:1.5; margin-bottom: 5px;*/}
/*.BelowImg .ProductPrice {color:rgba(var(--logo-purple), var(--alpha)); line-height:1.5}*/
.BelowImg .format {color:#565656; font-family: montserrat,sans-serif; font-size: 16px; }


.RemoveFav {position:absolute; bottom:0; right:50px; width:50px; height:50px!important;     margin: 0!important;
    border-radius: 50%;     padding: 5px;     z-index: 998;    background-color: white;}
.RemoveFav:hover {cursor:pointer}
 
  
  /*******************************************************  DASHBOARD **************************************************/
  
  .SuccessMessage {background-color: rgba(var(--logo-green), var(--alpha));  color: white!important; border-radius:0 }
  .WarningMessage {background-color: rgba(var(--logo-purple), var(--alpha));  color: white!important; border-radius:0 }
  
  hr {border-top: 1px solid #d9d9d9; margin-top: 20px;   margin-bottom: 20px;    border: 0;}
  
  /*.DashboardHome .list-group.row {flex-direction:row}
  .DashboardHome .list-group-item {border:0px; height: 100px; align-items: center!important;    display: flex;}
  
  .drilldownlist {display: flex; flex-wrap: wrap; margin: 0 auto;  padding: 50px;}
  .drilldownitem {width: 50%;    float: left;    margin: 0; background-color: rgba(var(--light-grey), var(--alpha));}*/
  
  .DashBoardGrid {	display: grid; grid-template-columns: repeat(1, 1fr); 	grid-auto-rows: 1fr;  grid-column-gap: 30px;  grid-row-gap: 30px;     padding-bottom: 50px;}
  .DashBoardItem {background-color: rgba(var(--light-grey), var(--alpha));}
  .DashBoardItem > div {height:100%}
  .YourAreabox {padding:15px; align-items: center; justify-content: center; height:100%}
  .Iconimage {text-align:center}
  
  .AccountDetails {background-color: rgba(var(--light-grey), var(--alpha)); padding:40px}
  .AccountDetails .row {padding-bottom:15px}
  .AccountDetails label {padding-bottom:5px}
  .AccountDetails input[type="text"] {background-color:white; }
  .AccountDetails input[type="text"], .AccountDetails .form-control {width:90%; border-radius:0}
  
  
  .dnnFormItem input[type="text"], .dnnFormItem select, .dnnFormItem textarea, .dnnFormItem input[type="email"], .dnnFormItem input[type="search"], .dnnFormItem input[type="password"] {
  font-size:16px; font-family: montserrat,sans-serif; width:90%}
  
  .AddAddress {background-color: rgba(var(--light-grey), var(--alpha)); padding:40px; margin-bottom:40px}
  .AddAddress .dnnFormItem input[type="checkbox"] {width: 15px; height: 15px; border-radius: 0px;    margin-top: 5px;    margin-bottom: 5px;}
  .AddAddress input[type=checkbox]:checked {width: 15px; height: 15px; content: '✔';  background-color:white;}
  /*
  .AddAddress #result {position: absolute; border: 1px solid #ccc; background-color: rgba(var(--logo-green), var(--alpha)); color: white;    width: 100%;       max-height: 200px;        overflow: auto;        display: none}
  .AddAddress #result2 {position: absolute; border: 1px solid #ccc; background-color: rgba(var(--logo-green), var(--alpha)); color: white;   width: 100%;    max-height: 200px;        overflow: auto;        display: none}
  */
  
  /* .AddAddress input[type="checkbox"] {
    display: none;
}*/
/*
 .AddAddress input[type="checkbox"] + .AddAddress label {
    display: inline-block;
    border: 1px solid #000;
    width: 30px;
    height: 30px;
    position: relative;
}
 .AddAddress input[type="checkbox"]:checked + .AddAddress label:after {
    content: '✔';
    display: inline-block;
    font-size: 1.6em;
}*/
  
  /*#myAddress {padding-bottom:50px}*/
  .AddressHeader {background-color: rgba(var(--light-grey), var(--alpha)); padding: 10px 40px; border-bottom: 1px solid rgba(var(--grey-text), var(--alpha))}
  .AddressCard {background-color: rgba(var(--light-grey), var(--alpha)); padding:40px; border-bottom: 1px solid rgba(var(--grey-text), var(--alpha))}
  
.InProcess .ProductImage .ImgBG {background-color:white; padding:20px; text-align:center}
.InProcess .ProductImage img  {box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; max-height: 150px;}
.InProcess .col1, .InProcess .col2, .InProcess .col3 {width:33.333333%}




/***************************************** CHECKOUT ****************************************************/

.OrderSummaryCol1 {width:100%}
.OrderSummaryCol2 {width:100%; padding-top:20px}
.OrderSummaryCol3 {width:100%}
.OrderSummaryCol4 {width:100%; }

.OrderSummary ul, .InProcess ul {margin-left:0; padding-left:0}
.OrderSummary li, .InProcess li {background-color: rgba(var(--light-grey), var(--alpha)); list-style:none;    margin-bottom: 20px; padding: 20px;}
	
.OrderSummary .ProductImage .ImgBG {background-color:white; padding:20px; text-align:center}
#orderSummary .ProductImage .ImgBG {padding:0px; margin-top:10px; text-align:center}
.OrderSummary .ProductImage img  {box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; max-height: 150px;}

.QtyContainer {display:flex; flex-direction: row;    align-items: center;}
.Qty {padding-right:5px}
.OrderSummary .button-quantity {border:1px solid silver; border-radius:0; padding:0; width:20px; height:30px}
.OrderSummary .button-quantity i {font-size: 10px;  line-height: 30px;}
.OrderSummary input::-webkit-outer-spin-button, .OrderSummary input::-webkit-inner-spin-button {-webkit-appearance: none;  margin: 0;}
.OrderSummary input[type=number] {-moz-appearance: textfield; text-align:center; background-color: white; padding:0; height:30px; width:40px; font-size: 14px;
    line-height: 30px;   border-top: 1px solid silver;    border-radius: 0;    border-bottom: 1px solid silver;}


.CheckoutContainer {padding:20px; background-color: rgba(var(--light-grey), var(--alpha)); margin-bottom:20px}

.CheckoutContainer label {line-height:1.2}
.CheckoutContainer .control-label {font-weight:bold}
.CheckoutContainer .label-heading {font-weight:bold; font-size:1.25rem}
.Checkout .form-group {padding-bottom:5px; padding-top:5px}
.Checkout .form-group input { background-color: white; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;  border-radius:0; width:100% }

.CheckoutRegister {width:100%; margin:0 auto}
.CheckoutRegister label {padding-bottom:5px; padding-top:5px; width:100%}
.CheckoutRegister input {max-width:100%!important; margin-bottom: 0!important;}
.CheckoutRegister span {padding-left: 10px; text-align: left; font-size:14px; margin: 0!important;}
.CheckoutRegister span a {font-size:14px; text-decoration:underline}
.iti {display:block!important; margin-bottom: 16px;}
.CheckoutRegister .dnnFormItem input[type="checkbox"] {height:18px}

#btnPlace {display:none}		

#ulBillingAddress, #ulDeliveryAddress {list-style:none; margin:0;     margin-bottom: 10px;}
#ulBillingAddress li, #ulDeliveryAddress li {padding-bottom:10px; line-height:1.2}
#DeliveryAddress, #BillingAddress {width:100%}

.jconfirm-box {border-radius: 0!important;
    display: inline-flex;
    justify-content: center;
    align-items: center!important;
    padding: 20px!important;
    flex-wrap: wrap;
    flex-direction: column;}
.jconfirm-title-c {display:none!important}
.jconfirm-content-pane {/*width:80%!important;*/ margin-bottom: 0!important;}
.jconfirm-content {overflow:hidden!important}
.jconfirm-buttons {width: 100%!important;    padding-bottom: 0!important;    padding-top: 20px; text-align: center;}
											   
.jconfirm-buttons button {margin: 0!important; 
 border-radius:0!important; background-color: rgba(var(--logo-green), var(--alpha))!important; color: white!important;  border-color: rgba(var(--logo-green), var(--alpha))!important;}

/* Voucher Code Admin Popup */

.VoucherAdd input, .VoucherEdit input {width: 100%; margin-bottom: 10px;    padding: 5px;    line-height: 1;    margin-top: 5px;    font-size: 14px;    border: 1px solid #ced4da;    border-radius: 0;}
.VoucherAdd label, .VoucherEdit label {line-height:20px}
.VoucherAdd .form-control:focus, .VoucherEdit .form-control:focus {box-shadow:none}
.jconfirm-buttons button {margin-left: 5px!important;    margin-right: 5px!important;}


#ddCountryPopUp {width: 95%; height: 36px; font-size: 20px; padding: 5px; margin-top: 10px; }


																				  

/*************************************   FAQ PANE *************************************/

.FAQs {padding-top:50px; padding-bottom:50px}
.FAQs h2 {text-align:center}
.FAQs .Subtitle {/*width:50%;*/ margin:0 auto; padding-bottom:20px;  font-family: 'Playfair Display', serif; color: rgba(var(--logo-purple), var(--alpha))}
.FAQs .PurpleText {font-weight:700; font-family: 'Playfair Display', serif; padding-bottom: 5px;}
.FAQs p {padding-bottom:20px}
.FAQs a {font-size:inherit; color: rgba(var(--logo-purple), var(--alpha))}
.FAQs a:hover {color: rgba(var(--logo-green), var(--alpha)); }


/***********************  PRIVACY, T&Cs, COOKIES ****************************************/

.Privacy ul {padding-left: 70px; margin-bottom: 0px!important; padding-top:10px; margin-left: 0;     list-style-type: disc;}
.Privacy ul li { position: relative; padding-bottom: 10px; padding-left:10px}
.Privacy ul li span {display: block;    text-align: left;  line-height: 1.5;}
.Privacy ol {padding-left: 70px; margin-bottom: 0px!important; padding-top:10px; margin-left: 0;}
.Privacy ol li { position: relative; padding-bottom: 10px; padding-left:10px}
.Privacy ol li span {display: block;    text-align: left; line-height: 1.5;}
.Privacy h5 {padding-top:10px; padding-bottom:10px}
.Terms h5 {padding-top:20px; padding-bottom:20px}
.Terms ol li {padding-bottom:20px}
.Terms ol li:last-child {padding-bottom:0px}
.Privacy a:hover {color: rgba(var(--logo-green), var(--alpha)); }


 /************************************************************* ANIMATIONS *************************************************************************************/
 
 /* Sweep To Right */
.color-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.color-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--logo-green), var(--alpha));
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.color-right:hover *, .color-right:focus *, .color-right:active * {
  color: white;
}
.color-right:hover:before, .color-right:focus:before, .color-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
  
  /* Navigation small browser */
   #dnn_navbar {display: none;}
	/*#dnn_MobFooterOne, #dnn_MobFooterThree {opacity:0}*/
    .menu-icon2 { font-style: normal; content: ''; position: absolute; height: 70px; width: 70px; cursor: pointer; text-align: center; display: block; float: right; top:0; left:0; right:0; margin:auto;}
	.menu-icon2:before { transition: transform .3s;  font-size: 30px; color: white; z-index:999; width: 70px; height: 70px; line-height: 70px;  position: absolute; top: 0px; left: 0px; font-weight:900; font-family: 'Font Awesome 5 Free'; content: '\f0c9'; text-align: center; display: inline-block;    text-rendering: auto;    -webkit-font-smoothing: antialiased;   }
	.menu-icon2.open:before {content: '\f00d';  transition: transform .3s; transform: rotate(-180deg);		}
	.hidden{display: none;/*  opacity: 0!important; z-index:-1!important; height:0;*/ }
	/*.hidden * {z-index:-1!important;*/ /*height:0; padding:0!important}*/
	.navmob {position: fixed; bottom: 70px; top:37px; left: 0; background: rgba(255,255,255,1); width: 100%;     opacity: 1;
   /* -webkit-transition: opacity .5s ease-in;    transition: opacity .5s ease-in;*/ z-index:995;  }
	/*.navmob {position: absolute; width: 100%; bottom: 70px; top:37px; z-index: 999; right: 0%;
		transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; overflow: hidden;  height: 0px;    z-index: 23;    opacity: 0;
	max-height: 0px;     left: 0px;	border-bottom: 2px solid transparent;}*/
	.navmob ul li { display: block;}
	.HeaderWrapper.sticky .navmob {   top: 0px;}
	
	.navmob ul li.dropdown > ul {padding-left:10px; padding-right:10px}
	.navmob ul li.dropdown ul li { width: 50%;}
	.navmob ul li.dropdown ul li a {padding: 5px; line-height: 14px; font-size:14px}
	/*.catlink {bottom:-34px; padding:5px}
	.catlink a:before {height: 24px;    line-height: 24px;    position: absolute;    bottom: 0px;}*/
	/*.navmob ul li.dropdown a:hover {background-color: white!important;}*/
	.navmob ul li.dropdown:hover > ul {max-height:600px}
	.navmob ul li a {z-index:994}
	.navmob ul li.dropdown:hover > ul {margin-top: 0px!important;  padding-top: 0px;}
	/* End */
	


     
  /******************************************************  MEDIA  QUERIES ********************************************************************************************/
/* Normal devices*/
@media (hover: hover) {
/*.mobile-footer {display:block}*/
.Mobile {display:none}
/*.dnnEditState .mobile-footer {display:block; position: static;}*/
.dnnEditState .menu-icon2 {position: static;}

 .mobile-footer {display:block;}
 #dnn_navbar {display: none;}
  
 #dnn_favourites{ display: none; }
 #dnn_user{ display: none; }
 #dnn_basket{ display: none }
 #dnn_BottomHeaderPane{ display: none;}
 
 /*.catlink {bottom:-20px!important}
 .catlink a:before {height: 24px;    line-height: 24px;}*/
 
 .nav ul li:first-child {display:none} /* Hide HELP on desktop for now */
 .nav ul li.dropdown ul li:first-child {display:block} /* Hide HELP on desktop for now */

}
/* Touchsceen devices*/
@media (hover: none) {
	
	/**********************************  MOBILE NAVIGATION ****************************************************************************************/
	
	#dnn_MobFooterOne, #dnn_MobFooterThree {opacity:1}											   
	.menu-icon2 { font-style: normal; content: ''; position: absolute; height: 70px; width: 70px; cursor: pointer; text-align: center; display: block; float: right; top:0; left:0; right:0; margin:auto;}
	.menu-icon2:before { transition: transform .3s;  font-size: 30px; color: white; z-index:999; width: 70px; height: 70px; line-height: 70px;  position: absolute; top: 0px; left: 0px; font-weight:900; font-family: 'Font Awesome 5 Free'; content: '\f0c9'; text-align: center; display: inline-block;    text-rendering: auto;    -webkit-font-smoothing: antialiased;   }
	.menu-icon2.open:before {content: '\f00d';  transition: transform .3s; transform: rotate(-180deg);		}
	.hidden{display: none;/*  opacity: 0!important; z-index:-1!important; height:0;*/ }
	/*.hidden * {z-index:-1!important;*/ /*height:0; padding:0!important}*/
	.navmob {position: fixed; bottom: 70px; top:37px; left: 0; background: rgba(255,255,255,1); width: 100%;     opacity: 1;
   /* -webkit-transition: opacity .5s ease-in;    transition: opacity .5s ease-in;*/ z-index:995;  }
	/*.navmob {position: absolute; width: 100%; bottom: 70px; top:37px; z-index: 999; right: 0%;
		transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; overflow: hidden;  height: 0px;    z-index: 23;    opacity: 0;
	max-height: 0px;     left: 0px;	border-bottom: 2px solid transparent;}*/
	.navmob ul li { display: block;}
	/*.nav ul li:first-child {float:none}*/
	.HeaderWrapper.sticky .navmob {   top: 0px;}
	
	.navmob ul li.dropdown > ul {padding-left:10px; padding-right:10px}
	.navmob ul li.dropdown ul li { width: 50%;}
	.navmob ul li.dropdown ul li a {padding: 5px; line-height: 14px; font-size:14px}
	.catlink {bottom:-34px; padding:5px}
	.catlink a:before {height: 24px;    line-height: 24px;    position: absolute;    bottom: 0px;}
	/*.navmob ul li.dropdown a:hover {background-color: white!important;}*/
	.navmob ul li.dropdown:hover > ul {max-height:600px}
	.navmob ul li a {z-index:994}
	.navmob ul li.dropdown:hover > ul {margin-top: 0px!important;  padding-top: 0px;}
	.sticky .navmob ul li.dropdown:hover > ul {padding-top: 0px;}
	.navmob ul li:hover a {background-color:transparent!important}										  
															   
	
	/*********************************** MOBILE NAVIGATION END ****************************************************/


.ProductBox:hover .Overlay { display: none;}

	.TopNav   .dropbtn:after {content: none}
	.TopNav   .dropdown:hover .dropdown-content {display:none}
	
	footer {margin-bottom:70px}
	.menu-icon {display:none}
	.logo {padding:10px 0!important}
	#dnn_favourites, #dnn_basket, #dnn_user{display:none!important}
	#dnn_BottomHeaderPane{ display: none;}
	.MainNav {padding-right:0px}
	#dnn_boxsearch {width: 100%!important;}
	.autocomplete #mySearch {width:100%}
	.ui-autocomplete.ui-front {width: 100%!important;   left: 0!important;    right: 0!important;    margin: 0;    padding: 0 10px;}
	 
	 /*.slick-arrow {display:none!important}*/

	.Slider .ProductBox .ImgBG {margin:20px 0}
	.slick-prev {left:-5%!important; z-index:990}
	.slick-next {right:-5%!important}
	.slick-dotted.slick-slider {margin-bottom:0!important}
	.slick-prev, .slick-next {top:30%!important}
	

	.MobileText {margin: 0 30px}
	.MobileText * {color: rgba(var(--footer-grey), var(--alpha))}
	.MobileText .btn-green {color:white}
	#dnn_navbar{ display: none;}
	.ProductBox:hover .OverlayText {display:none}
	.price h2, .price h4  {font-size:1.4rem}
}
/* END TOUCHSCREEN DEVICES */


/* Extra small devices (portrait phones, less than 576px)
 No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up)  .col-sm-*/
@media (min-width: 576px) { 
#filtertest, #categorysub {display:block!important}
#filterbtn,  #categorybtn {display:none}


.Breadcrumb {display: none;}

 }

/* Medium devices (tablets, 768px and up) .col-md-*/
@media (min-width: 768px) { 
  
	#filterPanel #accordionfilter {padding:0; }

  #OtherBookByAuhtor .slick-slide {width:50%!important}
  .ProductBox img {/*margin:20px*/}
  .SearchResultsTop .RHS {justify-content: flex-end;  padding-left: 0;}

  .PBSLogin {padding: 50px;}
  
							   
  .OrderSummaryCol1 {width:20%}
  .OrderSummaryCol2 {width:50%; padding-top:20px}
  .OrderSummaryCol3 {width:5%}
  .OrderSummaryCol4 {width:25%;  padding-top:20px}											 
							  
	
  
 }
 
 
 @media (min-width: 920px) and  (hover: hover) {
 
 .mobile-footer {display:none;}
 #dnn_navbar {display: block;}
 .Breadcrumb {display: block;}
  #dnn_favourites{ display: block; }
  #dnn_BottomHeaderPane{ display: block;}
 #dnn_user{ display: block; }
 #dnn_basket{ display: block; }
 
 
 }


/* Large devices (desktops, 992px and up) .col-lg-*/
@media (min-width: 992px) { 
.bcrumb li {max-width: 250px;}
.Tablet {display:none!important}
.Desktop {display:block!important}

.Width50 {width:50%; margin:0 auto;}
.Width70 {width:70%; margin:0 auto;}
.Width80 {width:80%; margin:0 auto;}
.Width90 {width:90%; margin:0 auto;}


/*#dnn_Box3 {display:block}*/

.ModAuthenticationC  {width: 50%; padding-right: 0px;  float: none;    margin: 50px auto;}
.PasswordReset {width:50%}

/* Search Page*/   
#dnn_innernav  {width: calc(16.6666666667% + 85px); padding-left:20px; padding-right:20px}
#dnn_innernav2 {width: calc(83.3333333333% - 85px); }
#filterPanel #accordionfilter {padding-left: 20px;    padding-right: 20px;}


/* Product Detail*/
.ProductBox1  {flex-basis: 35%;}
.ProductBox2  {flex-basis: 65%; padding-left:60px  }
.ProductBox3  {flex-basis: 35%; }
.ProductBox4  {flex-basis: 64%; padding-left:60px }

	.DashBoardGrid {grid-template-columns: repeat(2, 1fr);}

#btnPlace {display:block}

.pagination .page-link {padding: .375rem 8px; }												   

.OrderSummaryCol1 {width:20%}
.OrderSummaryCol2 {width:50%; padding-top:20px}
.OrderSummaryCol3 {width:20%}
.OrderSummaryCol4 {width:10%;  padding-top:20px}

 }
 
  @media (min-width: 1010px) { 
	/*#dnn_boxsearch {width:75%!important}*/
	/*#dnn_favourites{ display: block!important; }
	#dnn_user{ display: block!important; }
	#dnn_basket{ display: block!important; }*/
	.normal-image{ opacity: 1; }
 }


/* Extra large devices (large desktops, 1200px and up) .col-xl-*/
@media (min-width: 1200px) {
	
.TopNav {padding:0px 100px;  }
.MainNav, .Breadcrumb {padding:0 100px}
/*.TopNav   .dropbtn {padding-left:25px; margin-right:25px;}*/
/*#dnn_favourites, #dnn_basket, #dnn_user {text-align:right; width:5%!important}*/
/*#dnn_boxsearch {width:85%!important}*/
							  
.CheckoutRegister {max-width:70%}
	
}


/* Extra large devices (large desktops, 1400px and up) .col-xxl-*/
@media (min-width: 1400px) {
	
	
	
	
	
	
}

.ModPaperBackBookSliderC{ position: relative;}
.DnnModule-PaperBackBook_Product{position: static;}
.loading {
	text-align: center;
    background: #fff;
    width: 100%;
    line-height: 600px;
    height: 600px;
    position: absolute;
    left: 0;
    z-index: 999;
	transition: opacity 2s;
}

.loading-sml{
	text-align: center;
    background: #fff;
    width: 100%;
    line-height: 450px;
    height: 450px;
    position: absolute;
    left: 0;
    z-index: 999;
	transition: opacity 2s;
}

.loading-cart-item{
	text-align: center;
    background: #fff;
    width: 100%;
    line-height: 190px;
    height: 190px;
    position: absolute;
    left: 0;
    z-index: 999;
	transition: opacity 2s;
	top:0;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(168,199,0);
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.address-dropdown{
	list-style: none;
	padding: 0;
	height: 150px;
	overflow-y: scroll;
	background: #fff;
	border: 1px solid #ced4da;
	margin: 0;
	width: 90%;
	max-width: 445px;
}
.address-dropdown li{
	padding: 10px 5px;
	text-align: left;
}