* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}









body {
font-family: system-ui;
font-size: .9em;
margin: 0px auto;
    color: rgb(75, 0, 130);
}

input{padding:5px;margin:7px 0px;}

a{text-decoration:none;
color: white;
}

.float-left { float:left; }
.float-right { float:right; }
.float-clear { clear:both; }

.logo a{
	text-decoration:none;
	color: rgb(228, 142, 84);
	font-size: 2.2em;
}
#header {
    padding:0px;
    background-color: #e9c1ed;
}
.site-link a{
	color: rgb(75, 0, 130);
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 20px;
    letter-spacing: 1px;
    font-weight: bold;
}
.site-link a:hover{color: rgb(75, 0 ,130,  61%);}
.cart-info{padding-top:15px;font-size:0.85em;}
.content{overflow:auto;margin: 0 auto;padding:20px 0px;width:1197px;}
#navigation-menu{background:#F0F0F0;margin: 0 auto;font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
#navigation-menu .content{padding:0;}
#navigation-menu ul{
    padding: 0px;
    margin: 0px;
    overflow: auto;
}
#navigation-menu ul:first-child{
	border-left: #CCC 1px solid;
}
#navigation-menu li{
	color: #999;
    padding: 20px 20px;
    border-right: #CCC 1px solid;
    width: auto;
    list-style: none;
    float: left;
}
#navigation-menu li:hover {
    background: rgb(230, 141, 85);
    color: #FFFFFF;
}
.image-slider{width:920px;margin:10px 30px 30px 0px;overflow:auto;}
.ads-image{
	border: #CCC 1px solid;
    width: 235px;
    margin: 10px 0px 10px 0px;
    min-height: 408px;
	float:right;
}
.large-thumbnail {
	width: 475px;
	height: 550px;
	margin-bottom:10px;
}
.book-thumbnail {
    width: 300px;
    height: 300px;
    margin: 0px 0px 42px 42px;
	text-align:center;
}
.book-catalogue-thumbnail {
 width: 300px;
    height: 300px;
    margin: 15px 30px 30px 15px;
    text-align: center;
    border-radius: 3px;
    background-color: #FFFFFF;
    padding: 8px;
	box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.25);
}
.browse-all{
	text-align:right;	
    margin: 20px 0px;
}
#other-info{
	min-height:100px;
	border:#CCC 1px solid;
	padding: 10px;
}
.form-header{
	background:rgb(228, 142, 84);
	padding:5px;
	color:#FFF;
}
#footer{
	background: rgb(233 193 237);
    padding: 10px;
    border-top: #CCC 2px solid;
    text-align: center;
    margin-top: 60px;
}

.tab-list {
	overflow:auto;
	width:235px;
	margin-right:2px;
}
.tab-item {
	padding:8px 15px;
	    background: rgb(245, 230, 220);
	    color: indigo;
	margin-bottom:1px;
}
.tab-item  a{
	color:#999;
	text-decoration:none;
}
.tab-item:hover {
	padding:8px 15px;
	background: rgb(154 121 157);
	margin-bottom:1px;
}

.tab-item:hover a{
	color:rgb(255 255 255);
	
}

#product-catalogue{width:920px;}

#product-catalogue .title  {
	font-size:1.2em;
	padding-top: 5px;
	font-weight:bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#product-catalogue .author  {
	padding-top: 5px;
	color: rgb(75, 0, 130);
}

#product-catalogue .price  {
	padding-top: 5px;	
    font-size: 0.9em;
}

#product-catalogue a.btnAddtocart  {
	margin-top: 4px;
    padding: 10px 25px;
    background: rgb(154 121 157);
    border-radius: 40px;
    font-size: 0.85em;
	text-decoration:none;
}


#product-catalogue a.btnAddtocart :hover {

	background: rgb(154 121 157);
}

#product-catalogue .title a {
	text-decoration:none;
	color: rgb(75, 0, 130);
}

.btn {
        border-radius: 40px;
    padding: 10px 30px 10px 30px;
    border: 0;
    cursor: pointer;
    color: #282B2D;
    border-color: #9fe0f3;
    font-weight: 500;
    letter-spacing: 1px;
    -webkit-transition: all .1s linear;
    -webkit-user-select: none;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    -ms-transition: all .1s linear;
    transition: all .1s linear;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  
    margin-right: 4px;
    text-align: center;
}

.theme-color {
    background-color: rgb(154 121 157);
    color: white;
}

.login-box {
	background: #ffffff;
    margin: 50px;

    min-width: 340px;
    box-shadow: 0 .5px 1.1px rgb(159, 0, 0);
    border-radius: 4px;
	padding: 30px;
}
.form-login{
	padding: 10px;    
}
.form-login h1 {
	font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    color: #191919;
    font-weight: normal;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: .125rem;
    margin: 0;
	text-align:center;
	padding-bottom:20px;
}

a.link{text-decoration:none;color:rgb(228, 142, 84);}

.cart-list-header {
	padding:10px;text-align:left;background:rgb(245, 230, 220);
}
.total {
	padding:10px;border-top:rgb(245, 230, 220) 1px solid;
}
.cart-form-header {
	padding:10px;text-align:left;background:#F0F0F0;
}
.cart-form{margin:30px 60px 60px 60px;}
.cart-form td{padding:12px 0px 0px 12px;}

@media screen and (min-width: 1224px) {
	.content {
		width: 1197px;
	}
	#product-catalogue{width:920px;}
	.image-slider{width:920px;}
}
@media screen and (min-width: 1044px) and (max-width: 1224px) {
	.content {
		width: 1017px;
	}
	#product-catalogue{width:740px;}
	.image-slider{width:740px;}
}
@media screen and (min-width: 845px) and (max-width: 1044px) {
	.content {
		width: 817px;
	}
	#product-catalogue{width:540px;}
	.image-slider{width:540px;}
}



@media screen and (min-width: 715px) and (max-width: 845px) {
	#product-catalogue{width:400px;}
	.image-slider{width:400px;}
}

@media screen and (max-width: 715px) {
	#product-catalogue{width:200px;}
	.image-slider{width:200px;}
}

@media screen and (max-width: 845px) {
	.content {
		width: auto;
		margin-left: 15px;
	}
}