body {
  background: #fff;
  color: #222;
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
}

.main-content2{
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: center;*/
  text-align: center;
}

h1 {
  width: 100%;
  margin: 0 auto 0.5em;
  font-size: 30px;
  small {
    text-transform: none;
    display: block;
    margin: 16px 0;
    font: 300 20px 'QuickSand', sans-serif;
    color: #999;
  }
}

.wrapper3 {
  /*max-width: calc(100% / 4);*/
  max-width: calc(100% / 0);
  min-width: 10em;
}
.book {
  height: 250px;
  width: 175px;
  position: relative;
  transition: .4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  margin: 32px;
  perspective: 800px;
  &:hover {
    // Change to make others effects
    transform: rotateZ(-8deg);
    .book_cover {
      transform: rotateY(-40deg);
      z-index: 999;
      box-shadow: 20px 10px 50px rgba(0,0,0,0.2);
    }
  }
  

  
  .book_cover {
    height: 250px;
    width: 175px;
    position: absolute;
    border-radius: 5px 15px 15px 5px;
    box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: .5s linear;
    transform-style: preserve-3d;
    transform-origin: left center 0px;
    background-size: 180px 255px;
  }
  
  .book_detail {
    background-color: rgba(51, 51, 51, 0.8);
    margin-top: 185px;
    padding: 15px;
    font-size: 12px;
    font-weight: 800;
    position: relative;
    z-index: 10;
    color: #fff;
    text-align: left;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }
  
  .book_page {
    height: 100%;
    width: 175px;
    position: absolute;
    background-color: #fbfae8;
    z-index: 0;
    box-shadow: 0 0 5px 1.5px rgba(0, 0, 0, 0.25);
    border-radius: 5px 16px 16px 5px;
    overflow: hidden;
    &.ruled {
      background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
      background-size: 100% 10px;
    }
    &.squared {
          background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
      background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
    }
    &.dotted {
          background: linear-gradient(90deg, #fbfae8 10px, transparent 1%) center, linear-gradient(#fbfae8 10px, transparent 1%) center, #999;
      background-size: 11px 11px;
    }
  }
  
}

.ebook-list-result .grid-ebooks {
    /* grid-template-columns: repeat(3, 33.3333333333%); */
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

@media (max-width: 500px) {
/*@media screen and (max-width: 500px) {*/
    .ebook-list-result .grid-ebooks {
        /* grid-template-columns: repeat(1, 100%); */
        /*grid-template-columns: repeat(2, 50%);*/
		justify-content: center;
        text-align: center;
        display: grid;
        grid-gap: 0;
        grid-template-columns: 1fr 1fr;
    }
	
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    min-height: 1px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    position: relative;
	padding: 6px 15px;
	}
}

@media (max-width: 600px) {
/*@media screen and (max-width: 600px) {*/
    .ebook-list-result .grid-ebooks {
        /* grid-template-columns: repeat(1, 100%); */
        /*grid-template-columns: repeat(2, 50%);*/
		justify-content: center;
        text-align: center;
        display: grid;
        grid-gap: 0;
        grid-template-columns: 1fr 1fr;
    }
	
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    min-height: 1px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    position: relative;
	padding: 6px 15px;
	}
}

@media (min-width: 320px) and (max-width: 380px) {
    .ebook-list-result .grid-ebooks {
        /* grid-template-columns: repeat(1, 100%); */
        grid-template-columns: repeat(1, 100%);
		/*margin-left: -3%;
        margin-right: 17%;*/
    }
	
	.main-content2 {
		display: grid;
        grid-template-columns: 1fr;
        padding: 1em;
        grid-row-gap: 100px;
	}
	
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    min-height: 1px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    position: relative;
	padding: 6px 15px;
	}
}

@media (min-width: 400px) and (max-width: 480px) {
    .ebook-list-result .grid-ebooks {
        /* grid-template-columns: repeat(1, 100%); */
        /*grid-template-columns: repeat(2, 50%);*/
		margin-right: 10%;
        margin-left: 10px;
        display: grid;
        justify-content: center;
        text-align: center;
        display: grid;
        grid-gap: 0;
        grid-template-columns: 1fr 1fr;
    }
	
	.main-content2 {
		display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-gap: 10px;
        width: 50vw;
        justify-items: center;
        position: relative;
        left: 33%;
        transform: translate(0, -50%);
        top: 50%;
	}
	
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    min-height: 1px;
    /*padding-left: 15px;
    padding-right: 15px;*/
    position: relative;
	padding: 6px 15px;
	}
	

}

/*...a.button{
  display:inline-block;
  
  font:normal normal 300 1em 'Open Sans';
  text-decoration:none;  
  /*color:rgba(28, 190, 131, 1);*/
/*...  color:#fff;
  /*background-color:#e3310d !important;*/
/*...  background-color:#ff0039 !important;
  /*border: .1875em solid #e3310d;*/
/*...  border-radius:100px;  
  padding: 10px 20px;
  /*margin:-68px 0 0 240px;*/
/*...  margin:0;
  position: relative;
  /*left: 45%;
  top: 53%;
  transform: translate(50%, 50%);*/
      
/*...  background-size: 200% 100%; 
  background-image: linear-gradient(to right, transparent 50%, #e30d3d 50%);
  transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .1), 4px 4px 15px -5px rgb(50 61 91 / 38%) !important;
}

a.button:hover{
  /*color:rgba(255, 255, 255, 1);*/
/*...  color:#fff;
  text-decoration:none; 
  background-color:#8f204f;
  background-position: -100% 100%;
}*/

a.button  {
  font:normal normal 300 1em 'Open Sans';
  background: #A6713F;
  color:#fff;
  border-radius:100px;
  padding: 10px 20px;
  margin:0;
  box-shadow: 8px 10px 24px -8px #bd844e;
  transition: all .4s ease-out;
  text-align: center;
  touch-action: manipulation;
  /*left: 50%;
  top: 50%;
  transform: translate(-50%, 20%);*/
  display:inline-block;
  position: relative;
}

a.button:hover:hover {
  background: #bd844e;
  color:#fff;
  background-position: -100% 100%;
  text-decoration:none; 
}

button#myBtn {
	background: transparent;
}

.ebook-image .ebook-ribbon {
    position: absolute;
    right: 0px;
    top: 10px;
    z-index: 2;
}

.ebook-image .ebook-ribbon>li .ribbon {
    color: #fff;
    display: block;
    float: right;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 10px;
    padding: 4px 5px 3px;
    position: relative;
}

.bg-green {
    background: rgba(55, 188, 155, .9);
}


.btn2.btn-icon.btn-icon-mini.btn-round.btn-primary {
	/*background: #ff9640;*/
	background: #3fb618;
    border-color: #3fb618;
    color: #fff;

}

.btn2.btn-icon.btn-icon-mini.btn-round.btn-primary:hover {
	/*background: #ff9640;*/
	background: #369b14;
    border-color: #329213;
    color: #fff;

}
 
.btn2.btn-icon.btn-icon-mini.btn-round.btn-primary {
    border: 1px solid;
    border-radius: 3px;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    letter-spacing: .2px;
    outline: 0 !important;
    transition: .2s ease-in-out;
	
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    line-height: 1.42857143;
    margin-bottom: 0;
    padding: 6px 10px;
    text-align: center;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.btn3.btn-icon.btn-icon-mini.btn-round.btn-danger {
	background: #ff0039;
    border-color: #ff0039;
    color: #fff;

}

.btn3.btn-icon.btn-icon-mini.btn-round.btn-danger:hover {
	background: #d90030;
    border-color: #cc002e;
    color: #fff;

}
 
.btn3 {
    border: 1px solid;
    border-radius: 3px;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    letter-spacing: .2px;
    outline: 0 !important;
    transition: .2s ease-in-out;
	
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    line-height: 1.42857143;
    margin-bottom: 0;
    padding: 6px 10px;
    text-align: center;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
	/*position: absolute;
	bottom: 113px;
	left: 60px;*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.theme-violet .pagination > .active {
  background: #A6713F;
  border-color: #A6713F;
}

.theme-violet .pagination > .active:hover {
  background: #bd844e;;
}