/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */


/* #Font-Face
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

/* #Site Styles
================================================== */


/* ### general ### */

html,
body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #34315D;
}

body {
    background: #fff;
}

input,
select,
textarea {
    font-family: sans-serif;
    font-size: 12px;
    color: #000;
}

img {
    display: block;
    border: 0;
}

:focus {
    outline: none;
}

a {
    text-decoration: none;
    transition: all 0.5s ease;
}

input[type='search']::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type='search']::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
    display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    opacity: 0;
}

h1 {
    font-size: 32px;
}

h2 {
    margin: 0;
    padding-left: 67px;
    position: relative;
    font-size: 24px;
    font-weight: 500;
    line-height: 54px;
    color: #34315d;
}

h2:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #f2fbfd url('../images/icon-bookcase.svg') center center no-repeat;
    content: '';
}

p {
    margin: 0;
    font-size: 14px;
}

.bg-dark-blue {
    border-radius: 6px;
    background-color: #34315d;
}

.bg-light-gray {
    border: 1px solid #dfdeed;
    border-radius: 6px;
    background-color: #f9f8fb;
}

.left-space {
    margin-left: 15px;
}

.right-space {
    margin-right: 16px;
}

.button {
    padding: 8px 10px;
    position: relative;
    display: inline-block;
    color: #fff;
}

.button:hover {
    text-decoration: none;
    color: #fff;
    background-color: #a31a43;
}

.form-check {
    padding-left: 0;
}


/* ### global classes ### */

.clear {
    visibility: hidden;
    clear: both;
    height: 0;
    line-height: 0;
}

.center {
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
}

.centered {
    padding-right: calc((100% - 800px) / 2);
    padding-left: calc((100% - 800px) / 2);
}

.container {
    position: relative;
    max-width: 1170px;
}


/* ### wrapper ### */

#wrapper {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100%;
}


/* ### main container ### */

#mainCntr {
    width: 100%;
    min-height: 100%;
}


/* ### header container ### */

#headerCntr {
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    background-color: #a31a43;
}

#headerCntr .logo img {
    width: 156px;
}

#headerCntr .right ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#headerCntr .right li {
    padding: 21px 0 19px 25px;
    position: relative;
}

#headerCntr .right li a {
    font-size: 14px;
    color: #fff;
}

#headerCntr .right .form-inline {
    position: relative;
}

#headerCntr .right .form-control {
    padding: 1px 45px 0 15px;
    width: 234px;
    height: 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

#headerCntr .right input::placeholder {
    color: #fff;
}

#headerCntr .right li a:hover {
    text-decoration: none;
    color: #dcdcdc;
}

#headerCntr .btn-search {
    padding: 5px 4px 3px 8px;
    position: absolute;
    top: 4px;
    right: 0;
    border: 0;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.2);
}

#headerCntr .btn-search:before {
    font-family: 'icomoon', sans-serif;
    font-size: 16px;
    color: #fff;
    content: '\e90c';
}

#headerCntr .right .btn {
    padding: 9px 16px 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

#headerCntr .btn-bag {
    padding: 8px 13px 6px !important;
}

#headerCntr .btn-bag .icon-bag-icon {
    font-size: 22px;
}

#headerCntr .btn-login {
    position: relative;
}

#headerCntr .right li a.user {
    padding: 9px 7px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #34315d;
    border: 1px solid #34315d;
    background-color: rgba(255, 255, 255, 0.9);
}

#headerCntr .right li a.user img {
    margin-right: 5px;
}

#headerCntr .btn-login:before {
    position: absolute;
    top: 3px;
    left: -18px;
    width: 1px;
    height: 33px;
    background: rgba(220, 220, 220, 0.4);
    content: '';
}

#headerCntr .view {
    position: absolute;
    top: 71px;
    right: -169px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    width: 546px;
    border-radius: 6px;
    transition: all 0.4s;
    box-shadow: 0 1px 4px 0 rgba(52, 49, 93, 0.5), 0 4px 12px 0 rgba(52, 49, 93, 0.2);
}

#headerCntr .right .cartVisible .view {
    opacity: 1;
    visibility: visible;
}

#headerCntr .view:after {
    margin-left: 62px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 11px;
    border-bottom-color: #fff;
    content: '';
    pointer-events: none;
}

#headerCntr .right .title {
    padding: 29px 49px;
    width: 100%;
}

#headerCntr .right .title a {
    padding-left: 41px;
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #21d18c;
}

#headerCntr .right .title a:hover {
    color: #34315d;
}

#headerCntr .right .title a:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-family: 'icomoon', sans-serif;
    font-size: 19px;
    color: #21d18c;
    border: 1px solid #d3f8ea;
    border-radius: 50px;
    background-color: #f2fdf9;
    transform: translate(-25px, -13px);
    content: '\e902';
}

#headerCntr .bg-light-gray {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

#headerCntr .cart {
    padding: 15px 24px;
    position: relative;
}

#headerCntr .x_circle {
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: transparent;
    transform: translate(-23px, 14px);
}

#headerCntr .img {
    width: 74px;
}

#headerCntr .img img {
    width: 100%;
}

#headerCntr .text {
    padding-left: 17px;
}

#headerCntr .cart h3 {
    margin-top: -4px;
    padding-bottom: 3px;
    font-size: 18px;
    line-height: 1.5;
    color: #34315d;
}

#headerCntr .cart h3 a {
    color: #34315d;
}

#headerCntr .cart h3 a:hover {
    text-decoration: none;
    color: #d12156;
}

#headerCntr .cart h3 span {
    display: block;
    font-size: 12px;
    color: #21b4d1;
}

#headerCntr .cart h4 {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: #75729d;
}

#headerCntr .cart .discount {
    padding: 0 7px 1px;
    display: inline-block;
    font-size: 10px;
    color: #fff;
    border-radius: 8px;
    background-color: #d12156;
}

#headerCntr .cart .discount:hover {
    text-decoration: none;
}

#headerCntr .price {
    padding: 16px;
}

#headerCntr .total {
    padding-bottom: 7px;
    font-size: 12px;
    color: #34315d;
}

#headerCntr .total span {
    padding-left: 6px;
    display: inline-block;
    width: 45px;
    text-align: left;
}

#headerCntr .price .button {
    margin-top: 8px;
    padding: 7px 16px;
    display: inline-block;
    font-size: 12px;
}

#headerCntr .price .button:hover {
    color: #fff;
}

#headerCntr.email {
    padding: 13px 0 12px;
    position: inherit;
    width: 100%;
}

#headerCntr.email img {
    margin: auto;
    width: 156px;
}


/* ### menu box ### */

.menuBox {
    padding-right: 35px;
}

.menuBox ul {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.menuBox li {
    margin: 0;
}

.menuBox li a {
    padding: 8px 10px;
    display: block;
    font-size: 14px;
    color: #fff;
}

.menuBox li a:hover {
    text-decoration: none;
}


/* ### toggle menu ### */

.toggle_menu {
    margin-left: -46px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    display: none;
    width: 40px;
    height: 27px;
    transition: opacity 0.25s ease;
    cursor: pointer;
}

.toggle_menu span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border: none;
    border-radius: 50px;
    background-color: #fff;
    transition: all 0.35s ease;
    cursor: pointer;
}

.toggle_menu span:nth-of-type(2) {
    top: 12px;
}

.toggle_menu span:nth-of-type(3) {
    top: 23px;
}

.toggle_menu.active .top {
    width: 50px;
    background-color: #fff;
    transform: translateY(11px) translateX(0) rotate(45deg);
}

.toggle_menu.active .middle {
    opacity: 0;
    width: 50px;
    background-color: #fff;
}

.toggle_menu.active .bottom {
    width: 50px;
    background-color: #fff;
    transform: translateY(-11px) translateX(0) rotate(-45deg);
}


/* ### top box ### */

.topBox {
    padding: 9px 0;
    position: relative;
    width: 100%;
    background-color: #fef6f8;
}

.topBox .js-top-slider {
    width: 100%;
}

.topBox .item {
    padding: 0 0 0 32px;
    position: relative;
    display: flex;
    justify-content: center;
    width: 315px;
    font-size: 16px;
    font-weight: 500;
    color: #d12156;
}

.topBox span {
    position: relative;
}

.topBox span:before {
    position: absolute;
    top: -4px;
    left: -32px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 20px;
    color: #e47597;
    content: '\e906';
}

.topBox .icn1:before {
    font-size: 22px;
    content: '\e905';
}

.topBox .icn2:before {
    top: -6px;
    font-size: 26px;
    content: '\e904';
}

.topBox .icn3:before {
    top: -2px;
    font-size: 16px;
    content: '\e903';
}


/* ### banner co1ntainer ### */

#bannerCntr {
    margin-top: 123px;
    position: relative;
    width: 100%;
    min-height: 636px;
}

#bannerCntr.inner-page {
    min-height: 250px;
}

#bannerCntr .note {
    padding: 10px 14px 7px 15px;
    position: absolute;
    top: 13px;
    z-index: 1;
    width: calc(100% - 30px);
    border: 1px solid #d12156;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.9);
}

#bannerCntr .note:before {
    position: absolute;
    top: 3px;
    left: 15px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 21px;
    color: #d12156;
    content: '\e900';
}

#bannerCntr .note:after {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 15px;
    color: #d12156;
    content: '\e923';
}

#bannerCntr .note p {
    padding: 0 36px;
    position: relative;
    color: #d12156;
}

#bannerCntr .note p span {
    font-weight: 600;
}

#bannerCntr .box {
    position: absolute;
    top: 138px;
    left: 0;
    z-index: 1;
    width: 100%;
}

#bannerCntr .text {
    margin-top: -22px;
    padding: 16px 32px 19px;
}

#bannerCntr .text h1 {
    padding-bottom: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.2px;
    color: #fff;
}

#bannerCntr .text h1 span {
    display: block;
    font-size: 18px;
    letter-spacing: 1.2px;
    color: #dfdeed;
}

#bannerCntr .text form {
    margin: 0;
    padding: 0;
}

#bannerCntr .text .form-control {
    padding: 0 12px;
    width: 100%;
    height: 41px;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #34315d;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95) url('../images/down-arrow.svg') center right 15px no-repeat;
    -webkit-appearance: none;
    box-shadow: none;
    cursor: pointer;
}

#bannerCntr .list {
    width: 100%;
}

#bannerCntr .list ul {
    padding: 0;
    float: right;
    list-style: none;
}

#bannerCntr .list li {
    margin-bottom: 24px;
    position: relative;
    width: 100%;
}

#bannerCntr .list li a {
    display: block;
    padding: 26px 52px 23px 49px;
}

#bannerCntr .list li:hover {
    background-color: #a31a43;
}

#bannerCntr .list li:hover a {
    text-decoration: none;
}

#bannerCntr .list li h3 {
    font-size: 20px;
    color: #fff;
}

#bannerCntr .list li p {
    font-size: 16px;
    color: #fff;
}

#bannerCntr .list li:before {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #a7e5f1;
    border-radius: 50px;
    background: #f2fbfd url('../images/icon-bookcase.svg') center center no-repeat;
    transform: translate(-25px, 27px);
    content: '';
}

#bannerCntr .list li.ruler:before {
    border: solid 1px #f7d4df;
    background: #fdf2f5 url('../images/icon-ruler.svg') center center no-repeat;
    content: '';
}

#bannerCntr .list li.wallet:before {
    border: solid 1px #a6f2f0;
    background: #f2fdfd url('../images/icon-wallet.svg') center center no-repeat;
    content: '';
}

#bannerCntr .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#bannerCntr .image img {
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}


/* ### content container ### */

#contentCntr {
    width: 100%;
}


/* ### book box ### */

.bookBox {
    padding-top: 80px;
    position: relative;
    width: 100%;
}

.bookBox h2:before {
    border: solid 1px #a7e5f1;
    background-color: #f2fbfd;
}

.bookBox.supplies h2:before {
    border: 1px solid #f7d4df;
    background: #fdf2f5 url('../images/icon-ruler.svg') center center no-repeat;
    content: '';
}

.bookBox .zoeken {
    margin-top: 5px;
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 1;
}

.bookBox .form-control {
    padding: 0 10px 0 40px;
    float: right;
    width: 214px;
    height: 32px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1px;
    color: #fff;
    border: 0;
    border-radius: 6px;
    background-color: #34315d;
    background-clip: inherit;
    box-shadow: none;
}

.bookBox input::placeholder {
    color: #fff;
}

.bookBox .btn-search {
    position: absolute;
    top: 3px;
    left: 10px;
    border: 0;
    background: transparent;
}

.bookBox .btn-search:before {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 16px;
    height: 16px;
    background: url('../images/search-icon.svg') center center no-repeat;
    content: '';
}

.bookBox .js-book-slider {
    margin-top: 19px;
    position: relative;
}

.bookBox .js-book-slider:before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 200px;
    height: 172px;
    background-image: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
    content: '';
}

.bookBox .item {
    margin-right: 40px;
    padding: 15px 14px 15px 15px;
    width: 289px;
}

.bookBox .image,
.item .image img {
    width: 99px;
}

.bookBox .item a {
    display: block;
}

.bookBox .item a:hover {
    text-decoration: none;
}

.bookBox .item .bg-white {
    height: 140px;
    border-radius: 6px;
}

.bookBox .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 7px;
}

.bookBox .text {
    margin-left: -1px;
    padding-top: 2px;
    width: 60%;
}

.bookBox .item h3 {
    min-height: 80px;
    font-size: 14px;
    line-height: 1.5;
    color: #34315d;
    word-break: break-word;
}

.bookBox .item h3 span {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: #21b4d1;
}

.bookBox .order {
    margin-top: -5px;
    width: 100%;
}

.bookBox .order small {
    display: block;
    width: 100%;
    font-size: 12px;
    color: #21b4d1;
}

.bookBox .order del {
    padding-left: 8px;
    font-size: 10px;
    color: rgba(52, 49, 93, 0.5);
}

.bookBox .order .quantity,
.book_listBox .item .quantity {
    padding: 5px;
    width: 48px;
    height: 32px;
    font-size: 12px;
    color: #34315d;
    border: 1px solid #34315d;
    border-radius: 6px;
    background: url('../images/icon-setnumber.svg') 28px 6px no-repeat;
    background-color: #fff;
}

.bookBox .order .button {
    padding: 7px 8px;
    font-weight: 300;
    border: 0;
}

.bookBox .slick-arrow {
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    border: 0;
    background: transparent;
}

.bookBox .slick-prev {
    position: absolute;
    top: 34%;
    left: -37px;
    background: url('../images/prev-arrow.png') center no-repeat;
}

.bookBox .slick-next {
    position: absolute;
    top: 34%;
    right: -37px;
    z-index: 1;
    background: url('../images/next-arrow.png') center no-repeat;
}

.bookBox .slick-dots {
    margin: 40px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none;
}

.bookBox .slick-dots li {
    padding: 0 4px;
    height: 12px;
}

.bookBox .slick-dots button {
    padding: 0;
    opacity: 0.5;
    width: 10px;
    height: 10px;
    text-indent: -9999px;
    border: 0;
    border-radius: 50px;
    background-color: #b8b6d8;
    transition: all 0.5s ease;
}

.bookBox .slick-dots li.slick-active button {
    opacity: 1;
    width: 30px;
    height: 10px;
    border-radius: 50px;
    background: #34315d;
}

.bookBox .slick-disabled {
    opacity: 0;
}

.bookBox.supplies {
    margin-top: -2px;
}

.bookBox.supplies .form-control {
    width: 268px;
}


/* ### sales box  ### */

.salesBox {
    padding: 78px 0 79px;
    width: 100%;
}

.salesBox .left h2 {
    padding-bottom: 21px;
    line-height: 50px;
}

.salesBox .left h2:before {
    border: solid 1px #a6f2f0;
    background: #f2fdfd url('../images/icon-wallet.svg') center center no-repeat;
    content: '';
}

.salesBox .text {
    padding: 25px 20px 23px 23px;
    width: 99.5%;
}

.salesBox .text h3 {
    margin: 0;
    font-size: 16px;
    color: #34315d;
}

.salesBox .text p {
    padding: 15px 20px 0 0;
    min-height: 95px;
    line-height: 1.5;
    color: #34315d;
}

.salesBox .text img {
    margin: -43px auto;
    width: 295px;
}

.salesBox .box {
    float: right;
    width: 80.5%;
}

.salesBox .right .text {
    padding: 25px 20px 23px 23px;
    width: 100%;
}

.salesBox .right h2 {
    padding-bottom: 17px;
}

.salesBox .right h2:before {
    font-family: 'icomoon', sans-serif;
    font-size: 20px;
    color: #d12156;
    border: solid 1px #f7d4df;
    background-color: #fdf2f5;
    background-image: none;
    content: '\e906';
}

.salesBox .button {
    padding: 7px 15px;
    font-size: 12px;
}


/* ### book_list box ### */

.book_listBox {
    width: 100%;
}

.book_listBox .find {
    margin-top: -55px;
    padding: 21px 32px 24px;
    position: relative;
}

.book_listBox .gap-space {
    display: table;
    width: 99.2%;
}

.book_listBox h2 {
    margin: 0;
    padding: 0 0 9px;
    font-size: 32px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.23px;
    color: #fff;
}

.book_listBox h2:before {
    top: 0;
    left: -57px;
    border: solid 1px #a7e5f1;
    background: #f2fbfd url('../images/book-open.svg') center center no-repeat;
    content: '';
}

.book_listBox .clipboard h2:before {
    top: 0;
    left: -57px;
    border: solid 1px #a7e5f1;
    background: #f2fbfd url('../images/clipboard-list.svg') center center no-repeat;
    content: '';
}

.book_listBox .form-inline {
    position: relative;
}

.book_listBox .form-control {
    padding: 1px 45px 0 15px;
    width: 100%;
    height: 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1px;
    color: #34315d;
    border: 0;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: none;
}

.book_listBox .clipboard .form-control {
    background: rgba(255, 255, 255, 0.95) url('../images/down-arrow.svg') center right 15px no-repeat;
    -webkit-appearance: none;
}

.book_listBox input::placeholder {
    color: #34315d;
}

.book_listBox .btn-search {
    padding: 5px 4px 3px 8px;
    position: absolute;
    top: 4px;
    right: 0;
    border: 0 !important;
    border-radius: 6px;
    background-color: #dfdeed;
}

.book_listBox .btn-search:before {
    font-family: 'icomoon', sans-serif;
    font-size: 16px;
    color: #34315d;
    content: '\e90c';
}

.book_listBox .box {
    padding: 40px 0;
    width: 100%;
    overflow: hidden;
}

.book_listBox .left {
    padding: 18px 17px 18px 15px;
    width: 91.5%;
}

.book_listBox .left h3 {
    margin: 0;
    padding-bottom: 14px;
    font-size: 25px;
    color: #34315d;
}

.book_listBox .left h4 {
    margin: 0;
    padding-bottom: 9px;
    font-size: 16px;
    font-weight: 600;
    color: #34315d;
}

.book_listBox small {
    font-size: 10px;
}

.book_listBox .form-group {
    margin: 0;
    padding-bottom: 25px;
}

.book_listBox .form-check {
    padding-left: 0;
}

.book_listBox input[type='checkbox']+label {
    padding-left: 29px;
    display: block;
    font-size: 14px;
    line-height: 18px;
    color: #75729d;
    cursor: pointer;
}

.book_listBox input[type='checkbox'] {
    display: none;
}

.book_listBox input[type='checkbox']+label:before {
    margin-right: 5px;
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url('../images/check-box.svg') center center no-repeat;
    background-size: 20px;
    content: '';
}

.book_listBox input[type='checkbox']:checked+label:before {
    background: url('../images/check.svg') center center no-repeat;
    background-size: 20px;
}

.book_listBox .right {
    margin-left: -6px;
    width: auto;
}

.book_listBox .list {
    margin-bottom: 24px;
    padding: 15px 15px 15px 23px;
}

.book_listBox .list h3 {
    margin-top: -3px;
    font-size: 18px;
    line-height: 1.6;
    color: #34315d;
}

.book_listBox .list h3 a {
    color: #34315d;
}

.book_listBox .list h3 a:hover {
    text-decoration: none;
}

.book_listBox .list h3 span {
    display: block;
    font-size: 12px;
    color: #21b4d1;
}

.book_listBox .list h4 {
    margin: 0 0 2px;
    font-size: 10px;
    color: #75729d;
}

.book_listBox .list .discount {
    padding: 0 7px 1px;
    display: inline-block;
    font-size: 10px;
    color: #fff;
    border-radius: 8px;
    background-color: #d12156;
}

.book_listBox .list .discount:hover {
    text-decoration: none;
}

.book_listBox .price {
    max-width: 257px;
    min-height: 100px;
}

.book_listBox .list h5 {
    margin: 0;
    padding-top: 2px;
    font-size: 10px;
    letter-spacing: 0.3px;
    color: #75729d;
}

.book_listBox .new {
    border-bottom: 1px solid #dfdeed;
}

.book_listBox .new ul {
    margin: 0;
    padding: 9px 0 8px;
    max-width: 183px;
    list-style: none;
    overflow: hidden;
}

.book_listBox .new li {
    padding: 0;
    font-size: 14px;
    color: #75729d;
}

.book_listBox .new li span {
    font-size: 16px;
    color: #34315d;
}

.book_listBox .new li del {
    font-size: 12px;
}

.book_listBox .hand ul {
    margin: 0;
    padding: 9px 0 14px;
    max-width: 207px;
    list-style: none;
    overflow: hidden;
}

.book_listBox .hand li {
    position: relative;
    font-size: 12px;
    color: #34315d;
}

.book_listBox .hand .sec {
    font-size: 14px;
    color: #75729d;
}

.book_listBox .hand .sec:before {
    position: absolute;
    top: -1px;
    right: -22px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 16px;
    color: #75729d;
    content: '\e91c';
}

.book_listBox .list .button {
    padding: 7px 16px;
    font-size: 12px;
    color: #fff;
    border-radius: 6px;
    background-color: #34315d;
}

.book_listBox .list .button:hover {
    background-color: #a31a43;
}

.book_listBox .image {
    width: 99px;
}

.book_listBox .title {
    padding-left: 25px;
    width: 100%;
}

.book_listBox .slick-dots {
    margin: 40px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    list-style: none;
}

.book_listBox .slick-dots li {
    padding: 0 4px;
    height: 12px;
}

.book_listBox .slick-dots button {
    padding: 0;
    opacity: 0.5;
    width: 10px;
    height: 10px;
    text-indent: -9999px;
    border: 0;
    border-radius: 50px;
    background-color: #b8b6d8;
    transition: all 0.5s ease;
}

.book_listBox .slick-dots li.slick-active button {
    opacity: 1;
    width: 30px;
    height: 10px;
    border-radius: 50px;
    background: #34315d;
}

.book_listBox.selecting input[type='checkbox']+label:before {
    margin-right: 5px;
    margin-left: -20px;
    position: absolute;
    top: -2px;
    left: 100%;
}

.book_listBox.selecting input[type='checkbox']+label {
    padding-right: 28px;
    padding-left: 0;
    height: 16px;
    font-size: 12px;
    color: #34315d;
}


/* ### overview ### */

.overview .find {
    margin-top: -56px;
    padding: 21px 10px 15px 32px;
}

.overview .sell {
    width: 99%;
}

.overview h2 {
    letter-spacing: 0.2px;
}

.overview h2:before {
    border: solid 1px #a6f2f0;
    background: #f2fdfd url('../images/icon-wallet.svg') center center no-repeat;
    content: '';
}

.overview h2 small {
    display: block;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.1px;
}

.overview .form-control {
    color: #75729d;
}

.overview input::placeholder {
    color: #75729d;
}

.overview .button {
    padding: 9px 13px;
    font-size: 14px;
    color: #34315d;
    border: 0;
    border-radius: 6px;
    background-color: #dfdeed;
}

.overview .button:hover {
    color: #fff;
    background-color: #a31a43;
}

.overview .view {
    padding: 24px 10px 19px 23px;
    width: 99.2%;
}

.overview .view h3 {
    padding-bottom: 9px;
    font-size: 24px;
    color: #34315d;
}

.overview .view p {
    color: #34315d;
}

.overview .view img {
    margin: 15px auto;
    transition: all 0.5s ease;
}

.overview .view img:hover {
    transform: scale(1.02);
}

.overview .isbn .form-control {
    color: rgba(117, 114, 157, 0.5);
}

.overview .isbn input::placeholder {
    color: rgba(117, 114, 157, 0.5);
}

.overview .offer {
    padding: 3px 5px 25px;
    border-bottom: 1px solid #dfdeed;
}

.overview .img {
    width: 19.5%;
}

.overview .img img {
    margin: 0;
    width: 100%;
}

.overview .detail {
    padding-top: 2px;
    width: 77.3%;
}

.overview .detail a:hover {
    text-decoration: none;
}

.overview .detail span {
    display: block;
    font-size: 14px;
    color: #34315d;
}

.overview .detail h3 {
    margin: 0;
    padding-bottom: 6px;
    font-size: 18px;
}

.overview .detail h3:hover {
    color: #a31a43;
}

.overview .detail samp {
    padding-bottom: 3px;
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #21b4d1;
}

.overview .detail em {
    display: block;
    font-size: 10px;
    font-style: normal;
    color: #75729d;
}

.overview .detail ul {
    margin: 0;
    padding: 32px 0 0;
    list-style: none;
}

.overview .detail li {
    padding: 0 23px 0 43px;
    position: relative;
}

.overview .detail li:last-child {
    padding-right: 0;
}

.overview .detail a {
    font-size: 12px;
    color: #34315d;
    border: 0;
    background: transparent;
    padding: 1px 6px;
}

.overview .detail .trash:before {
    position: absolute;
    top: -6px;
    right: 2px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 20px;
    color: #d12156;
    content: '\e910';
}

.overview .detail .check {
    padding-right: 28px;
    background: url('../images/check.svg') center right 0 no-repeat;
    background-size: 20px;
}

.overview .detail button:hover {
    color: #a31a43;
}

.overview .dit span {
    position: relative;
}


/* 
.overview .dit span:before {
    position: absolute;
    top: -4px;
    right: 40px;
    font-family: 'icomoon', sans-serif;
    font-size: 18px;
    color: #34315d;
    content: '\e91c';
} */

.overview .ben {
    padding: 8px 16px 7px;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: #fff;
    transform: translate(0, 50px);
}

.overview .offer:nth-child(3n+3) {}

.overview .dit a h3 {
    opacity: 0.3;
}

.overview .dit samp {
    opacity: 0.3;
}

.overview .dit em {
    opacity: 0.3;
}


/* ### cart box ### */

.cartBox {
    margin-top: 80px;
    padding: 44px 0;
    width: 100%;
}

.cartBox ul {
    margin: 0 auto;
    padding: 0;
    max-width: 488px;
    list-style: none;
}

.cartBox li {
    margin: 0;
    padding: 0;
    position: relative;
}

.cartBox li:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: #e2e1ea;
    transform: translate(-32px, 9px);
    content: '';
}

.cartBox li h3 {
    margin: 0;
    position: relative;
    display: flex;
    font-size: 16px;
    color: #75729d;
}

.cartBox li h3 small {
    margin-right: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    font-size: 12px;
    color: #1ecb81;
    border-radius: 50px;
    background-color: #cdf7e7;
}

.cartBox li.is_active h3 {
    color: #34315d;
}

.cartBox li.is_active h3 small {
    color: #fff;
    background-color: #1ecb81;
}

.cartBox li:first-child:before {
    content: inherit;
}

.cartBox .product {
    margin: auto;
    padding: 83px 0;
    max-width: 786px;
}

.cartBox .product h4 {
    margin: 0;
    font-size: 14px;
    color: #75729d;
}

.cartBox .bg-light-gray {
    margin-top: 9px;
    padding: 15px 14px 9px 13px;
}

.cartBox .icon {
    width: 20px;
}

.cartBox .icon a {
    display: block;
}

.cartBox .info {
    padding-left: 36px;
    position: relative;
    width: 31%;
}

.cartBox .info .x-circle {
    position: absolute;
    top: 16px;
    left: 1px;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    border: 0;
    background: transparent;
}

.cartBox .img {
    width: 37px;
}

.cartBox .img img {
    width: 100%;
}

.cartBox .info .text {
    padding-left: 17px;
    width: calc(100% - 50px);
}

.cartBox .info .text>span {
    padding-bottom: 7px;
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #34315d;
}

.cartBox .info .text>span>span {
    display: block;
    font-size: 12px;
    color: #21b4d1;
}

.cartBox .info a:hover {
    text-decoration: none;
    color: #d12156;
}

.cartBox .info h5 {
    margin: 0 0 2px;
    font-size: 10px;
    font-weight: 300;
    color: #75729d;
}

.cartBox .new {
    width: 17%;
}

.cartBox .new a {
    padding: 2px 5px 0;
    display: block;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.6px;
    color: #fff;
    border-radius: 8px;
    background-color: #2c7fb6;
}

.cartBox .new a.bg-color {
    display: inline-block;
    background-color: #d12156;
}

.cartBox .new a:hover {
    text-decoration: none;
}

.cartBox .price {
    width: 12%;
}

.cartBox .price span {
    display: block;
    font-size: 14px;
    color: #34315d;
}

.cartBox .quantity {
    width: 17%;
}

.cartBox input.field {
    padding: 5px;
    width: 48px;
    height: 32px;
    font-size: 12px;
    color: #34315d;
    border: 1px solid #34315d;
    border-radius: 6px;
    background: url('../images/icon-setnumber.svg') 27px 5px no-repeat;
    background-color: #fff;
    -webkit-appearance: none;
}

.cartBox .subtotal {
    max-width: 340px;
}

.cartBox .subtotal .text {
    font-size: 14px;
    font-weight: 400;
    color: #75729d;
}

.cartBox .subtotal .text small {
    font-size: 14px;
    font-weight: 600;
    color: #34315d;
}

.cartBox .subtotal p {
    padding: 20px 0 17px;
    font-size: 10px;
    line-height: 1.92;
    text-align: left;
    color: #75729d;
    border-top: 1px solid #bebcdc;
}

.cartBox .continue a {
    margin: 0;
    padding: 7px 17px;
    display: block;
}

.cartBox .continue a.btn {
    padding: 6px 15px;
    color: #34315d;
}

.cartBox .continue a.btn:hover {
    color: #fff;
    border: 1px solid #a31a43;
}


/* ### complete ### */

.complete {
    padding: 67.5px 0 70px;
    width: 100%;
}

.complete .box {
    margin-bottom: 16px;
    padding: 17px 16px;
    width: 97.4%;
    border: 1px solid #dfdeed;
    border-radius: 0 0 6px 6px;
}

.complete .box.voor {
    padding: 17px 16px 13px;
    border-radius: 6px;
}

.complete .box.gap {
    padding: 12px 16px 6px;
}

.complete h3 {
    margin: 0;
    padding-bottom: 15px;
    font-size: 16px;
    color: #34315d;
}

.complete .box.voor cite {
    font-weight: 400;
}

.complete .box.voor a {
    font-size: 14px;
}

.complete .box .form-group {
    margin: 0;
}

.complete .box .form-check {
    padding-left: 0;
}

.complete input[type='checkbox']+label {
    padding-left: 28px;
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #34315d;
    cursor: pointer;
}

.complete input[type='checkbox'] {
    display: none;
}

.complete input[type='checkbox']+label:before {
    margin-right: 5px;
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url('../images/check-box.svg') center center no-repeat;
    background-size: 20px;
    content: '';
}

.complete input[type='checkbox']:checked+label:before {
    background: url('../images/check.svg') center center no-repeat;
    background-size: 20px;
}

.complete input[type='radio']+label {
    padding-left: 28px;
    display: block;
    font-size: 12px;
    line-height: 18px;
    color: #34315d;
    cursor: pointer;
}

.complete input[type='radio'] {
    display: none;
}

.complete input[type='radio']+label:before {
    margin-right: 5px;
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url('../images/check-box.svg') center center no-repeat;
    background-size: 20px;
    content: '';
}

.complete input[type='radio']:checked+label:before {
    background: url('../images/check.svg') center center no-repeat;
    background-size: 20px;
}

.complete .box label a {
    font-size: 12px;
    text-decoration: underline;
    color: #34315d;
}

.complete .box label a:hover {
    text-decoration: none;
}

.complete .box label small {
    font-size: 10px;
    color: #75729d;
}

.complete .box cite {
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: #34315d;
}

.complete .jouw {
    margin-bottom: 16px;
    padding: 17px 15px 9px 16px;
    width: 97.4%;
}

.complete .jouw h4 {
    margin: 0;
    padding: 0 32px 25px 0;
    font-size: 14px;
    color: #75729d;
}

.complete .jouw h4 samp {
    float: right;
    font-family: 'Poppins', sans-serif;
}

.complete .hog h5 {
    font-size: 14px;
    line-height: 1.4;
    color: #34315d;
}

.complete .hog h5 i {
    padding-left: 5px;
    font-style: normal;
    color: #75729d;
}

.complete .hog h5 small {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    color: #75729d;
}

.complete .hog dl {
    padding-right: 32px;
    font-size: 14px;
    color: #34315d;
    white-space: nowrap;
}

.complete .total {
    padding-right: 32px;
    font-size: 14px;
    color: #75729d;
    border-top: 1px solid #bebcdc;
}

.complete .line {
    margin-left: auto;
    max-width: 188px;
}

.complete .total b {
    float: right;
    width: 87px;
    font-weight: 500;
    color: #34315d;
}

.complete .form-control {
    padding: 1px 45px 0 15px;
    width: 100%;
    height: 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: #9e9bca;
    border: 1px solid #b8b6d8;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.95);
    background-clip: inherit;
    box-shadow: none;
}

.complete input::placeholder {
    color: #9e9bca;
}

.complete select {
    background: url('../images/down-arrow.svg') center right 15px no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.complete .invoice.bg-light-gray {
    margin-top: 0;
    padding: 17px 16px 12px 15px;
    width: 97.4%;
}

.complete .invoice label {
    font-size: 14px;
    color: #34315d;
}

.complete .een {
    width: 100%;
    border-top: 1px solid #bebcdc;
}

.complete .een label {
    font-size: 14px !important;
}

.complete .button {
    margin-top: 22px;
    padding: 7px 15px;
    display: block;
    border: 0;
}

.complete .voor h4 {
    font-size: 14px;
    color: #75729d;
}

.complete .textarea {
    border-bottom: 1px solid #bebcdc;
}

.complete textarea {
    margin-top: 2px;
    padding: 8px 8px 20px;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #34315d;
    border: 1px solid #dfdeed;
    border-radius: 6px;
    background-color: #f9f8fb;
    resize: none;
}

.complete textarea::placeholder {
    color: #34315d;
}

.complete .user_id {
    padding-top: 25px;
}

.complete .user_id h4 {
    padding-bottom: 7px;
}

.complete .user_id p {
    margin: 0;
    font-size: 14px;
    color: #75729d;
}

.complete .user_id small {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    color: #75729d;
}

.complete.agree .form-check label {
    padding-left: 15px;
    font-size: 14px;
    font-style: normal;
}

.complete .agree .een {
    padding-bottom: 15px;
    border-bottom: 1px solid #bebcdc;
}

.complete .agree .button {
    margin-top: 5px;
    margin-left: auto;
    padding: 6px 8px;
    display: block;
    font-size: 14px;
    font-weight: 300;
}


/* ### sign box ### */

.signBox {
    margin-top: -56px;
    padding-bottom: 40px;
}

.signBox .box {
    padding: 18px 23px 23px 31px;
    width: 98.5%;
}

.signBox h2 {
    margin: 0;
    padding-bottom: 14px;
    padding-left: 0;
    font-size: 32px;
    color: #34315d;
}

.signBox h2 span {
    float: right;
    font-size: 24px;
    font-style: italic;
    text-align: right;
    color: #d12156;
}

.signBox h2:before {
    content: inherit;
}

.signBox .form-row {
    display: block;
    height: 189px;
}

.signBox label {
    width: 100%;
    font-size: 14px;
    color: #34315d;
}

.signBox .form-control {
    padding: 0 13px;
    width: 100%;
    height: 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.2px;
    color: #9e9bca;
    border: 1px solid #b8b6d8;
    border-radius: 6px;
    box-shadow: none;
}

.signBox select {
    background: #fff url('../images/down-arrow.svg') center right 15px no-repeat;
    -webkit-appearance: none;
}

.signBox .field {
    color: #9e9bca;
}

.signBox .field::placeholder {
    color: #9e9bca;
}

.signBox .button {
    padding: 7px 16px;
    border: 0;
}

.signBox .show {
    padding: 5px 32px 0 0;
    position: relative;
    font-size: 12px;
    color: #22203c;
}

.signBox .show:before {
    position: absolute;
    top: 1px;
    right: 8px;
    font-family: 'icomoon', sans-serif;
    font-size: 18px;
    color: #34315d;
    content: '\e901';
}

.signBox .password {
    font-size: 12px;
    text-decoration: underline;
    color: #d12156;
}

.signBox .password:hover {
    text-decoration: none;
    color: #34315d;
}

.signBox .item {
    padding: 40px 0;
}

.signBox .benefit {
    padding: 14px 24px;
    width: 98.5%;
}

.signBox .benefit h2 {
    padding-bottom: 0;
    font-size: 24px;
    color: #fff;
}

.signBox .benefit ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.signBox .benefit li {
    padding: 6px 0 7px 35px;
    position: relative;
    font-size: 14px;
    color: #fff;
}

.signBox .benefit li:before {
    position: absolute;
    top: 1px;
    left: 0;
    font-family: 'icomoon', sans-serif;
    font-size: 19px;
    color: #21d18c;
    content: '\e902';
}

.signBox .image {
    padding-top: 40px;
}


/* ### contact box ### */

.contactBox {
    margin-top: -57px;
    padding-bottom: 150px;
    width: 100%;
}

.contactBox .box {
    padding: 27px 31px 5px;
}

.contactBox h1 {
    margin: 0;
    color: #34315d;
}

.contactBox p {
    font-size: 20px;
    line-height: 1.5;
    color: #34315d;
}

.contactBox .item {
    padding: 12px 0 0 66px;
    position: relative;
}

.contactBox a {
    margin-bottom: 8px;
    padding: 7px 16px;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: #fff;
}

.contactBox span {
    display: block;
    font-size: 12px;
    color: #34315d;
}

.contactBox h3 {
    font-size: 20px;
    color: #34315d;
}

.contactBox address {
    width: 100px;
    font-size: 12px;
    color: #34315d;
}

.contactBox small {
    font-size: 12px;
    font-style: italic;
    color: #75729d;
}

.contactBox .item:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #f7d4df;
    border-radius: 100%;
    background: #fdf2f5 url('../images/icon-mail.svg') center center no-repeat;
    transform: translate(0, 3px);
    content: '';
}

.contactBox .phone:before {
    background: #fdf2f5 url('../images/icon-phone.svg') center center no-repeat;
    content: '';
}

.contactBox .winkel:before {
    background: #fdf2f5 url('../images/icon-library.svg') center center no-repeat;
    content: '';
}

.contactBox .time:before {
    background: #fdf2f5 url('../images/icon-clock.svg') center center no-repeat;
    content: '';
}


/* ### questionBox box ### */

.questionBox {
    margin-top: -55px;
}

.questionBox .box {
    padding: 19px 15px 21px 23px;
}

.questionBox .title {
    width: 48%;
}

.questionBox .search {
    width: 45.8%;
}

.questionBox h3 {
    margin: 0;
    padding: 25px 0 19px;
    font-size: 24px;
    color: #d12156;
}

.questionBox .form-inline {
    margin-top: 2px;
    position: relative;
}

.questionBox .form-control {
    padding: 1px 45px 0 15px;
    width: 100%;
    height: 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1px;
    color: #34315d;
    border: 0;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.95);
    background-clip: inherit;
    box-shadow: none;
}

.questionBox input::placeholder {
    color: #34315d;
}

.questionBox .btn-search {
    padding: 5px 4px 3px 8px;
    position: absolute;
    top: 4px;
    right: 0;
    border: 0 !important;
    border-radius: 6px;
    background-color: #dfdeed;
}

.questionBox .btn-search:before {
    font-family: 'icomoon', sans-serif;
    font-size: 16px;
    color: #34315d;
    content: '\e90c';
}

.questionBox .card {
    margin-bottom: 15px;
    border: 0;
    box-shadow: none;
}

.questionBox .card-header {
    padding: 0;
    border: 1px solid #b8b6d8;
    border-radius: 6px !important;
    background-color: #fff;
}

.questionBox .accordion .card .card-header {
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.questionBox .card-header button {
    padding: 8px 15px;
    width: 100%;
    font-size: 14px;
    color: #34315d;
}

.questionBox .card-header button.active {
    background-color: #efeef6;
}

.questionBox .card-header button:before {
    position: absolute;
    top: 10px;
    right: 15px;
    font-family: 'icomoon', sans-serif;
    font-size: 14px;
    color: #34315d;
    transition: all 0.5s;
    content: '\e91f';
}

.questionBox .card-header button.active:before {
    transform: rotate(-180deg);
}

.questionBox .card-header button:focus {
    box-shadow: none;
    text-decoration: none;
}

.questionBox .card-header button:hover {
    text-decoration: none;
    color: #34315d;
}

.questionBox .card-body {
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    border-radius: 0 0 6px 6px;
    background-color: #34315d;
}

.questionBox .is_hide {
    position: relative;
    top: -5px;
}


/* ### breadcrumb box ### */

.breadcrumb {
    margin: 0;
    padding: 43px 0 0;
    display: block;
    width: 100%;
    background: transparent;
}

.breadcrumb h3 {
    padding-bottom: 12px;
    font-size: 24px;
    color: #34315d;
}

.breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li {
    padding: 0 23px 0 0;
    position: relative;
    font-size: 14px;
    color: #34315d;
}

.breadcrumb li:before {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 9px;
    color: #34315d;
    transform: rotate(-90deg);
    content: '\e91f';
}

.breadcrumb li a {
    display: block;
    color: #34315d;
}

.breadcrumb li a:hover {
    text-decoration: none;
    color: #a31a43;
}

.breadcrumb li:last-child:before {
    content: inherit;
}


/* ### registerBox box ### */

.registerBox {
    margin-top: -55px;
    padding-bottom: 80px;
    width: 100%;
}

.registerBox .box {
    padding: 19px 15px 15px 23px;
    width: calc(100% + 23px);
}

.registerBox h1 {
    margin: 0;
    padding-bottom: 10px;
    color: #34315d;
}

.registerBox p {
    display: block;
    font-size: 20px;
    letter-spacing: 0.15px;
    color: #34315d;
}

.registerBox .form-row {
    padding-top: 26px;
}

.registerBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.registerBox li {
    margin: 0;
    padding: 0 27px;
    position: relative;
    font-size: 12px;
    color: #22203c;
}

.registerBox li:before {
    position: absolute;
    top: -7px;
    left: 0;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 19px;
    color: #21d18c;
    content: '\e902';
}

.registerBox label {
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.15px;
    color: #34315d;
}

.registerBox .form-control {
    padding: 0 16px;
    width: 100%;
    height: 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: #34315d;
    border: 1px solid #b8b6d8;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.95);
    background-clip: inherit;
    box-shadow: none;
}

.registerBox select.form-control {
    padding: 0 15px;
    background: #fff url('../images/down-arrow.svg') center right 15px no-repeat;
    -webkit-appearance: none;
}

.registerBox input[type='checkbox']+label {
    margin-top: -10px;
    padding-left: 32px;
    display: block;
    cursor: pointer;
}

.registerBox input[type='checkbox'] {
    display: none;
}

.registerBox input[type='checkbox']+label:before {
    margin-right: 5px;
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url('../images/check-box.svg') center center no-repeat;
    background-size: 20px;
    content: '';
}

.registerBox input[type='checkbox']:checked+label:before {
    background: url('../images/check.svg') center center no-repeat;
    background-size: 20px;
}

.registerBox input::placeholder {
    color: #9e9bca;
}

.registerBox select::placeholder {
    color: #34315d;
}

.registerBox .en {
    font-size: 14px;
    text-decoration: underline;
    color: #a31a43;
}

.registerBox .en:hover {
    color: #34315d;
}

.registerBox .unline {
    margin: 12px auto 24px;
    width: 98%;
    height: 1px;
    background-color: #bebcdc;
}

.registerBox .alle {
    padding: 14px 24px 12px;
    display: table;
    width: 86.8%;
}

.registerBox .alle h2 {
    padding-bottom: 0;
    padding-left: 0;
    font-size: 24px;
    color: #fff;
}

.registerBox .alle h2:before {
    content: inherit;
}

.registerBox .alle ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.registerBox .alle li {
    padding: 6px 0 7px 35px;
    position: relative;
    font-size: 14px;
    color: #fff;
}

.registerBox .alle li:before {
    position: absolute;
    top: 2px;
    left: 0;
}

.registerBox .img {
    margin-top: 79px;
    display: block;
    width: 100%;
}

.registerBox .img img {
    margin-left: auto;
}

.registerBox .eyes {
    position: relative;
    float: right;
    font-size: 13px;
    color: #34315d;
    transform: translate(-20px, 2px);
}

.registerBox .eyes:before {
    position: absolute;
    top: -3px;
    right: -20px;
    font-family: 'icomoon', sans-serif;
    font-size: 18px;
    color: #34315d;
    content: '\e901';
}

.registerBox .eye_closed {
    position: relative;
    float: right;
    font-size: 12px;
    color: #34315d;
    transform: translate(-35px, 6px);
}

.registerBox .eye_closed:before {
    position: absolute;
    top: 0;
    right: -21px;
    z-index: 1;
    width: 20px;
    height: 18px;
    background: url('../images/eye-closed.svg') center right no-repeat;
    background-size: 18px;
    content: '';
}

.registerBox .button {
    margin-top: 3px;
    padding: 8px 15px 6px;
    border: 0;
}


/* ### profile box ### */

.profileBox {
    margin-top: 0;
    padding: 112px 0;
    width: 100%;
}

.profileBox h1 {
    padding-bottom: 28px;
    font-size: 24px;
    line-height: 1.8;
}

.profileBox h1 span {
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: #34315d;
}

.profileBox .box {
    padding: 18px 15px 15px 16px;
}

.profileBox h3 {
    font-size: 15px;
    letter-spacing: 0.6px;
    color: #34315d;
}

.profileBox .form-row {
    padding-top: 17px;
}

.input-locked {
    padding: 0 45px 0 13px;
    background: #f0f0f5 url('../images/icon-lock.svg') center right 15px no-repeat !important;
}


/* ### history box ### */

.history {
    margin-bottom: 35px;
    padding: 18px 8px 0 15px;
    display: table;
    float: right;
    width: 95%;
    border: 1px solid #dfdeed;
    border-radius: 6px;
    background-color: #fff;
}

.history h3 {
    padding-bottom: 18px;
}

.history .left {
    width: 70px;
}

.history .id {
    padding-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #75729d;
}

.history .left div {
    padding-bottom: 20px;
    font-size: 14px;
}

.history .left a {
    text-decoration: underline;
    color: #34315d;
}

.history .left a:hover {
    text-decoration: none;
}

.history .button {
    margin-bottom: 9px;
    padding: 5px 8px;
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: #34315d;
    border-radius: 6px;
    background-color: #dfdeed;
}

.history .button:hover {
    color: #fff;
    background-color: #34315d;
}

.history .right {
    width: calc(100% - 70px);
}

.history .gap .info {
    padding-bottom: 20px;
    font-size: 14px;
    text-align: center;
    color: #34315d;
    min-height: 41px;
}

.meerinfobtn {
    height: 38px;
}

.history .info a:hover {
    text-decoration: none;
    color: #0b2e13;
}

.history .info a:hover .icon-icon-cloud:before {
    color: #a31a43;
}

.history .info .icon-icon-cloud {
    margin: -2px auto;
    display: block;
    font-size: 25px;
}

.history .right .id {
    padding-bottom: 20px;
}

.history .meer .id {
    padding-bottom: 11px;
}

.history .gap .info:last-child {
    padding-bottom: 0;
}


/* ### listBox box ### */

.listBox .right {
    margin-left: 0;
    width: calc(100% + 2.7%);
}

.listBox input[type='checkbox']+label:before {
    margin-right: 0;
    right: -4px;
    left: inherit;
}

.listBox input[type='checkbox']+label {
    padding-right: 24px;
    padding-left: 0;
    text-align: right;
}

.listBox .form-check {
    margin-bottom: 26px;
}

.listBox .view {
    margin-top: 44px;
    padding: 12px 15px 68px;
    display: table;
    width: 88.2%;
    border: 1px solid #dfdeed;
    border-radius: 6px;
    overflow: hidden;
}

.listBox .view h3 {
    padding-bottom: 20px;
    font-size: 16px;
    color: #34315d;
}

.listBox .view h4 {
    font-size: 14px;
    color: #75729d;
}

.listBox .view h4 small {
    float: right;
    font-size: 14px;
}

.listBox .tol_list {
    margin-top: 17px;
    width: 100%;
    border-top: 1px solid #dfdeed;
    overflow: hidden;
}

.listBox .tol_list ul {
    margin: 0;
    padding: 24px 0 14px;
    float: right;
    list-style: none;
}

.listBox .tol_list li {
    padding-bottom: 6px;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    color: #75729d;
}

.listBox .tol_list li samp {
    display: inline-block;
    width: 76px;
    font-family: 'Poppins', sans-serif;
    text-align: right;
    color: #34315d;
}

.listBox .tol_list .child samp {
    width: 99px;
}

.listBox .tol_list .child:before {
    position: absolute;
    top: -2px;
    left: 132px;
    z-index: 1;
    font-family: 'icomoon', sans-serif;
    font-size: 16px;
    color: #75729d;
    content: '\e91c';
}

.listBox .button {
    padding: 7px 16px;
    float: right;
    border: 0;
}

.listBox .list {
    padding: 15px 15px 3px 23px;
}

.listBox .list label {
    font-size: 12px !important;
}

.listBox .price {
    min-height: 112px;
}


/* ### account box ### */

.accountBox {
    width: 100%;
}

.accountBox h1 {
    padding-bottom: 22px;
    color: #34315d;
}

.accountBox h1 span {
    font-size: 16px;
    color: #34315d;
}

.accountBox .button {
    padding: 7px 16px;
    font-size: 12px;
}


/* ### user_order box ### */

.user_order {
    margin-bottom: 16px;
    padding: 15px 58px 6px;
    position: relative;
    width: 97.4%;
    border: 1px solid #dfdeed;
    border-radius: 6px;
    overflow: hidden;
}

.user_order ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.user_order li {
    padding: 5px 0 4px;
    position: relative;
    font-size: 14px;
    text-align: left;
    color: #34315d;
}

.user_order li span {
    float: left;
    width: 178px;
    font-size: 14px;
    color: #75729d;
}

.user_order li a {
    text-decoration: underline;
    color: #34315d;
}

.user_order li a:hover {
    text-decoration: none;
}

.user_order li i {
    padding: 0 8px;
    font-size: 10px;
    font-style: normal;
    color: #fff;
    border-radius: 8px;
    background-color: #2c7fb6;
}

.user-status {
    padding: 0 8px;
    font-size: 10px;
    font-style: normal;
    color: #fff;
    border-radius: 8px;
    background-color: #2c7fb6;
}

.user_order h4 {
    font-size: 16px;
    color: #34315d;
}

.user_order address {
    margin: 0;
    /* width: 145px; */
    font-size: 14px;
    line-height: 1.7;
    color: #75729d;
}

.user_order em {
    display: block;
    /* width: 145px; */
    font-size: 14px;
    font-style: normal;
    color: #75729d;
}

.user_order .button {
    padding: 8px 15px;
    position: relative;
}

.user_order .button .icon-icon-cloud {
    padding-left: 18px;
    float: right;
    font-size: 18px;
}

.user_order p {
    color: #75729d;
    word-spacing: 5px;
}

.user_order p small {
    float: right;
    color: #75729d;
    word-spacing: normal;
}

.user_order.ont {
    padding: 14px 58px 9px;
}

.user_order .bet {
    padding: 8px 10px 8px 0;
}

.user_order .fact {
    padding: 0 10px 8px 0;
}

.user_order .pro {
    padding: 4px 15px 3px 0;
}

.user_order .pro small {
    padding-top: 4px;
    font-size: 10px;
}

.user_order .text:before {
    position: absolute;
    top: 21px;
    left: 17px;
    z-index: 1;
    width: 20px;
    height: 20px;
    background: url('../images/icon-tag.svg') center center no-repeat;
    content: '';
}

.user_order .ont:before {
    top: 15px;
    left: 15px;
    width: 24px;
    height: 24px;
    background: url('../images/icon-recipient.svg') center center no-repeat;
    content: '';
}

.user_order .bet:before {
    top: 24px;
    width: 20px;
    height: 16px;
    background: url('../images/icon-payment.svg') center center no-repeat;
    content: '';
}

.user_order .fact:before {
    top: 15px;
    left: 20px;
    width: 13px;
    height: 21px;
    background: url('../images/icon-packingslip.svg') center center no-repeat;
    content: '';
}

.user_order .pro:before {
    top: 15px;
    left: 15px;
    width: 24px;
    height: 24px;
    background: url('../images/icon-order-queued.svg') center center no-repeat;
    content: '';
}


/* ### product ### */

.accountBox .product {
    margin-bottom: 15px;
    padding: 17px 15px 15px;
    display: table;
    width: 97.2%;
    border: 1px solid #dfdeed;
    border-radius: 6px;
}

.accountBox .product h3 {
    margin: 0;
    padding-bottom: 16px;
    font-size: 16px;
    letter-spacing: normal;
    color: #34315d;
}

.accountBox .product .img {
    width: 99px;
}

.accountBox .product .text {
    width: 76%;
}

.accountBox .product h4 a {
    font-size: 18px;
    color: #34315d;
}

.accountBox .product h5 {
    margin: 0;
    padding: 1px 0 7px;
    font-size: 12px;
    font-weight: 300;
    color: #21b4d1;
}

.accountBox .product h6 {
    margin: 0;
    padding-bottom: 3px;
    font-size: 10px;
    color: #75729d;
}

.accountBox .product .discount {
    padding: 0 10px 1px;
    font-size: 10px;
    font-weight: normal;
    color: #fff;
    border-radius: 20px;
    background-color: #d12156;
}

.accountBox .product .btn-success {
    background-color: #21d18c;
}


/* ### email box ### */

.emailBox {
    padding: 43px 0 32px;
    width: 100%;
}

.emailBox h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0.2px;
    color: #34315d;
}

.emailBox p {
    padding: 10px 0 41px;
    color: #34315d;
}

.emailBox h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    color: #34315d;
    word-spacing: 2px;
}

.emailBox h3 a {
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #d12156;
}

.emailBox .link {
    margin-top: 18px;
    padding: 7px 16px;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
    border-radius: 6px;
    background-color: #d12156;
}

.emailBox .link:hover {
    text-decoration: none;
    background-color: #34315d;
}

.emailBox h4 {
    margin: 0;
    padding: 42px 0 26px;
    font-size: 14px;
    font-weight: 300;
    color: #34315d;
}

.emailBox .box {
    margin: auto;
    padding: 28px 57px 10px 31px;
    max-width: 600px;
}

.emailBox .item {
    padding: 12px 0 0 66px;
    position: relative;
}

.emailBox .item:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #f7d4df;
    border-radius: 100%;
    background: #fdf2f5 url('../images/icon-mail.svg') center center no-repeat;
    transform: translate(0, 3px);
    content: '';
}

.emailBox .phone:before {
    background: #fdf2f5 url('../images/icon-phone.svg') center center no-repeat;
    content: '';
}

.emailBox .box a {
    margin-bottom: 8px;
    padding: 7px 16px;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1px;
    color: #fff;
}

.emailBox .box a:hover {
    text-decoration: none;
    background-color: #a31a43;
}

.emailBox span {
    padding-right: 21px;
    display: block;
    opacity: 0.5;
    font-size: 10px;
    color: #34315d;
}

.emailBox address {
    width: 100px;
    font-size: 12px;
    color: #34315d;
}

.emailBox small {
    font-size: 12px;
    font-style: italic;
    color: #75729d;
}

.emailBox .content {
    margin: auto;
    padding-bottom: 12px;
    max-width: 590px;
}

.emailBox .content p {
    padding-bottom: 10px;
    line-height: 1.47;
}

.emailBox.gap h4 {
    padding-top: 26px;
}

.emailBox.gap .box {
    margin-bottom: 8px;
}


/* ### footer container ### */

#footerCntr {
    overflow: hidden;
    width: 100%;
}

#footerCntr.bg {
    padding: 24px 0 21px;
    background-color: #a31a43;
}

#footerCntr.bg p {
    font-size: 10px;
    font-weight: 300;
    color: #fff;
}

.footer {
    padding: 24px 0 45px;
    width: 100%;
    background: url('../images/footer-bg.jpg') center no-repeat;
    background-size: cover;
}

.footer .logo {
    padding-bottom: 12px;
    display: block;
}

.footer .logo img {
    width: 127px;
}

.footer h3 {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 13px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer li {
    padding: 4px 0 0;
}

.footer li a {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}


/* ### copyright box ### */

.copyrightBox {
    padding: 16px 0;
    width: 100%;
}

.copyrightBox p {
    margin: 0;
    font-size: 12px;
    color: #34315d;
}

.copyrightBox ul {
    margin: 0;
    padding: 0;
    float: right;
    list-style: none;
}

.copyrightBox li {
    padding: 0 0 0 25px;
}

.copyrightBox li a {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: #34315d;
}


/* #Media Queries
================================================== */

@media (max-width: 1199px) {
    #headerCntr .right li {
        padding: 21px 0 15px 10px;
    }
    #headerCntr .view {
        right: -137px;
    }
    #headerCntr .view:after {
        margin-left: 93px;
    }
    #headerCntr .btn-login:before {
        left: -7px;
    }
    .menuBox {
        padding-right: 0;
    }
    .menuBox li a {
        padding: 8px 7px;
    }
    #bannerCntr {
        margin-top: 118px;
    }
    #bannerCntr .note {
        top: 40px;
    }
    .bookBox .slick-next {
        right: 0;
    }
    .book_listBox .list a img {
        width: 85px;
    }
    .signBox h2 {
        font-size: 25px;
    }
    .signBox h2 span {
        font-size: 20px;
    }
    .signBox .image {
        padding-top: 0;
    }
    .overview {
        padding-bottom: 150px;
    }
    .history {
        float: none;
        width: 100%;
    }
    .registerBox .box {
        width: calc(100% + 0px);
    }
    .registerBox li {
        padding: 0 24px;
    }
    .overview .dit span:before {
        right: 0;
    }
    .overview .dit span {
        padding-right: 22px;
    }
}

@media (max-width: 991px) {
    .toggle_menu {
        display: block;
    }
    #headerCntr .overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: #a31a43;
        transform: translateX(100%);
        transition: 0.35s ease-in-out transform;
        overflow: hidden;
    }
    #headerCntr .overlay.open {
        transform: translateX(0);
    }
    #headerCntr .mobile_menu .logo {
        padding: 27px 20px;
    }
    .menuBox {
        margin: auto;
    }
    .menuBox ul {
        margin: auto;
        padding: 15px 0;
        width: 50%;
    }
    .mobile_menu {
        margin: 0 auto;
        padding: 30px 0;
        padding-bottom: 20px;
        max-width: 100%;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .mobile_menu .menuBox li {
        padding: 0;
        width: 100%;
    }
    .mobile_menu .menuBox li a {
        font-size: 20px;
    }
    #headerCntr .right li {
        margin: auto;
        width: 63%;
    }
    #headerCntr .right li img {
        margin: auto;
    }
    #headerCntr .right .form-control {
        width: 100%;
    }
    #headerCntr .right .btn {
        width: 100%;
    }
    #headerCntr .btn-login:before {
        content: inherit;
    }
    #headerCntr .logo {
        padding: 14px 0;
        display: block;
        width: 100%;
    }
    #headerCntr .right {
        display: none;
    }
    #headerCntr .right.mm_Box {
        display: block;
    }
    #headerCntr .right .title {
        padding: 29px 9px 29px 37px;
    }
    #headerCntr .right .title a {
        font-size: 13px;
    }
    #headerCntr .cart {
        padding: 15px 10px;
    }
    #headerCntr .text {
        padding-left: 10px;
        width: 75%;
    }
    #headerCntr .right a.mm_link {
        padding: 9px 16px 8px 15px;
        display: block;
        width: 100%;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.2);
    }
    #headerCntr .img {
        width: 44px;
    }
    #headerCntr .title a {
        display: block;
    }
    #headerCntr .view {
        display: none;
    }
    #bannerCntr {
        margin-top: 104px;
        min-height: 500px;
    }
    #bannerCntr .note {
        padding: 10px 50px;
    }
    #bannerCntr .note p {
        padding: 0;
    }
    #bannerCntr .text {
        margin-top: 0;
        padding: 15px;
    }
    #bannerCntr .text h1 {
        font-size: 25px;
        line-height: 1.2;
    }
    #bannerCntr .list li {
        padding: 20px 40px;
    }
    #bannerCntr .list li p {
        margin: 0;
        font-size: 14px;
    }
    #bannerCntr .list li:before {
        top: -11px;
    }
    .bookBox .slick-next {
        right: 0;
    }
    .bookBox .text {
        padding-left: 0;
        width: 55%;
    }
    .bookBox .js-book-slider:before {
        right: -30px;
    }
    .salesBox .text {
        padding: 15px;
        width: 100%;
    }
    .salesBox .text h3 {
        font-size: 15px;
    }
    .salesBox .text img {
        width: 100%;
    }
    .salesBox .box {
        width: 100%;
    }
    .salesBox .right .text {
        padding: 15px;
        width: 100%;
    }
    .book_listBox h2 {
        font-size: 25px;
    }
    .book_listBox .price {
        width: 100%;
    }
    .book_listBox .list a img {
        width: 85px;
    }
    .book_listBox .list h3 {
        font-size: 15px;
    }
    .book_listBox .title {
        padding-left: 4px;
    }
    .signBox .box {
        padding: 10px;
        width: 100%;
    }
    .signBox h2 {
        font-size: 20px;
    }
    .signBox h2 span {
        font-size: 17px;
    }
    .complete {
        padding: 40px 0;
    }
    .complete .box {
        width: 100%;
    }
    .complete .invoice.bg-light-gray {
        width: 100%;
    }
    .complete .jouw {
        width: 100%;
    }
    .complete .jouw h4 {
        padding-right: 0;
    }
    .complete .hog h5 {
        font-size: 13px;
    }
    .complete .total {
        padding-right: 0;
    }
    .complete .hog dl {
        padding-right: 0;
    }
    .overview .view {
        padding: 15px;
    }
    .overview .view h3 {
        font-size: 21px;
    }
    .overview .view a h3 {
        font-size: 15px;
    }
    .overview .offer {
        padding: 2px 5px 15px;
    }
    .overview .detail ul {
        padding: 18px 0 0;
    }
    .overview .detail li {
        padding: 0 20px;
    }
    .contactBox h1 {
        font-size: 25px;
    }
    .contactBox p {
        font-size: 16px;
    }
    .contactBox h3 {
        font-size: 18px;
    }
    .listBox .view {
        width: 96%;
    }
    .history {
        width: 100%;
    }
    .history .left {
        width: 100%;
    }
    .history .right {
        width: 100%;
    }
    .registerBox .eyes {
        transform: translate(-35px, 0);
    }
    .registerBox .img img {
        width: 100%;
    }
    .product .text {
        width: 62%;
    }
    .accountBox .product .text {
        width: 51%;
    }
    .registerBox li {
        margin: 0 0 13px;
        width: 100%;
    }
    .registerBox label {
        font-size: 12px;
    }
    .registerBox .en {
        font-size: 12px;
    }
    .cartBox .subtotal .text {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .topBox:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 50px;
        height: 100%;
        background-image: linear-gradient(270deg, rgba(254, 246, 248, 0) 0%, #fffbfc 100%);
        content: '';
    }
    .topBox:after {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 50px;
        height: 100%;
        background-image: linear-gradient(270deg, #fffbfc 0%, rgba(254, 246, 248, 0) 100%);
        content: '';
    }
    #headerCntr .right {
        display: none;
    }
    #bannerCntr {
        margin-top: 104px;
        min-height: 720px;
    }
    #bannerCntr .list ul {
        width: 100%;
    }
    #bannerCntr .note {
        display: none;
    }
    .bookBox {
        padding-top: 50px;
    }
    .bookBox .js-book-slider:before {
        right: -1px;
        width: 72px;
        height: 100%;
    }
    .bookBox .item {
        margin-right: 20px;
        width: 265px !important;
    }
    .bookBox .item h3 {
        min-height: 61px;
    }
    .bookBox .zoeken {
        margin: 20px auto;
        position: relative;
        right: 0;
        width: 216px;
    }
    .bookBox.supplies .zoeken {
        width: 270px;
    }
    .bookBox .form-control {
        float: none;
    }
    .bookBox .slick-next {
        right: 0;
    }
    .bookBox .text {
        padding-right: 5px;
        padding-left: 0;
        width: 60%;
    }
    .bookBox .image {
        width: 75px;
    }
    .salesBox .text {
        width: 100%;
    }
    .salesBox .text img {
        margin: 40px auto 0;
        width: auto;
    }
    .salesBox .text p {
        padding-bottom: 15px;
        min-height: inherit;
    }
    .salesBox .box {
        width: 100%;
    }
    .questionBox .card-header button {
        padding: 10px 40px 10px 10px;
    }
    .book_listBox {
        margin-top: -80px;
    }
    .book_listBox .find {
        margin-top: 0;
    }
    .book_listBox .gap-space {
        width: 100%;
    }
    .book_listBox h2 {
        font-size: 25px;
    }
    .book_listBox .form-control {
        font-size: 10px;
    }
    .book_listBox .left {
        width: 100%;
    }
    .book_listBox .right {
        margin-left: 0;
        width: 100%;
    }
    .book_listBox .list {
        padding: 15px;
    }
    .book_listBox .list h3 {
        overflow: hidden;
        font-size: 15px;
    }
    .overview .sell {
        width: 100%;
    }
    .overview h2 small {
        font-size: 12px;
    }
    .overview .view {
        padding: 15px;
    }
    .overview .view h3 {
        font-size: 20px;
    }
    .overview .view a h3 {
        font-size: 15px;
    }
    .overview .offer {
        padding: 0;
    }
    .overview .detail ul {
        padding: 20px 0;
    }
    .cartBox .info {
        padding-left: 30px;
        width: 33%;
    }
    .cartBox .img {
        width: 30px;
    }
    .cartBox .info a {
        font-size: 12px;
    }
    .cartBox .info a span {
        font-size: 10px;
    }
    .cartBox .price span {
        font-size: 12px;
    }
    .cartBox .info .text {
        padding-left: 10px;
    }
    .cartBox .quantity {
        width: 10%;
    }
    .signBox .box {
        padding: 10px;
        width: 100%;
    }
    .signBox .item {
        padding-bottom: 0;
    }
    .signBox h2 {
        font-size: 20px;
    }
    .signBox h2 span {
        font-size: 17px;
    }
    .signBox label {
        font-size: 13px;
    }
    .signBox .form-control {
        font-size: 13px;
    }
    .signBox .benefit {
        width: 100%;
    }
    .signBox .benefit li {
        font-size: 13px;
    }
    .signBox .image {
        margin: auto;
        padding-top: 40px;
    }
    .signBox .image img {
        margin: auto;
    }
    .complete .box.gap {
        padding: 10px;
    }
    .contactBox {
        padding-bottom: 20px;
    }
    .contactBox .box {
        padding: 15px;
    }
    .contactBox .item {
        padding-bottom: 15px;
    }
    .questionBox .title {
        padding-bottom: 10px;
        width: 100%;
    }
    .questionBox .search {
        width: 100%;
    }
    .questionBox h3 {
        padding-top: 10px;
    }
    .questionBox .form-control {
        font-size: 12px;
    }
    .registerBox .box {
        width: calc(100%);
    }
    .registerBox h1 {
        font-size: 25px;
    }
    .registerBox p {
        font-size: 16px;
    }
    .registerBox .alle {
        width: 100%;
    }
    .registerBox .img {
        margin-top: 30px;
    }
    .listBox input[type='checkbox']+label:before {
        right: 0;
    }
    .listBox .view {
        width: 100%;
    }
    .user_order {
        padding: 15px 10px 6px 45px;
    }
    .user_order li span {
        width: 55%;
    }
    .user_order.pro {
        padding: 15px 10px 6px 45px;
    }
    .user_order.ont {
        padding: 15px 10px 6px 45px;
    }
    .user_order.bet {
        padding: 15px 10px 6px 45px;
    }
    .user_order.fact {
        padding: 15px 10px 6px 45px;
    }
    .user_order p small {
        float: left;
    }
    .product {
        width: 100%;
    }
    .product .text {
        width: 50%;
    }
    .emailBox .content {
        padding: 0 15px;
    }
    .overview .detail .trash:before {
        top: -8px;
        right: -6px;
    }
    #footerCntr {
        text-align: center;
    }
    .footer {
        padding: 30px 0 0;
    }
    .footer .logo img {
        margin: auto;
        width: 155px;
    }
    .copyrightBox p {
        color: #e47597;
    }
    .copyrightBox ul {
        float: none;
    }
    .copyrightBox li a {
        color: #e47597;
    }
    .copyrightBox li {
        padding: 0 5px;
    }
}

@media (max-width: 575px) {
    #headerCntr .price .button {
        font-size: 10px;
    }
    #headerCntr .price {
        padding: 10px;
    }
    #headerCntr .total {
        font-size: 9px;
    }
    #bannerCntr {
        min-height: 820px;
    }
    #bannerCntr .note {
        display: none;
    }
    #bannerCntr .text h1 {
        font-size: 24px;
    }
    .bookBox .slick-dots {
        margin: 40px auto;
        width: fit-content;
        border-radius: 5px;
        background-color: #e1e0ee;
    }
    .bookBox .slick-dots button {
        background: transparent;
    }
    .bookBox .slick-dots li {
        padding: 0;
        height: 11px;
    }
    .bookBox .slick-prev {
        left: -12px;
        z-index: 1;
    }
    .bookBox .text {
        padding-right: 15px;
        padding-left: 15px;
        width: 68%;
    }
    .salesBox {
        padding: 25px 0;
    }
    .cartBox {
        padding: 0;
    }
    .cartBox .bg-light-gray {
        margin-top: 0;
        padding: 40px 14px 20px;
    }
    .cartBox li {
        padding-bottom: 15px;
        width: 100%;
    }
    .cartBox li:before {
        content: inherit;
    }
    .cartBox .info {
        padding-bottom: 35px;
        width: 100%;
    }
    .cartBox .info .text {
        width: 70% !important;
    }
    .cartBox .info:after {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15px;
        font-weight: 600;
        color: #75729d;
        transform: translate(0, -30px);
        content: 'Product';
    }
    .cartBox .new {
        padding-bottom: 2px;
        position: relative;
        width: 100%;
        text-align: left !important;
    }
    .cartBox .new:after {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15px;
        font-weight: 600;
        color: #75729d;
        transform: translate(0, -25px);
        content: 'Prijs';
    }
    .cartBox .new a {
        display: inline-block;
    }
    .cartBox .price {
        padding-bottom: 40px;
        width: 100%;
    }
    .cartBox .price.sub {
        padding-bottom: 0;
        position: relative;
    }
    .cartBox .price.sub:after {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15px;
        font-weight: 600;
        color: #75729d;
        transform: translate(0, -25px);
        content: 'Subtotaal';
    }
    .cartBox .quantity {
        padding-bottom: 50px;
        position: relative;
        width: 100%;
    }
    .cartBox .quantity:after {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15px;
        font-weight: 600;
        color: #75729d;
        transform: translate(0, -25px);
        content: 'Aantal';
    }
    .cartBox .price span {
        text-align: left;
    }
    .cartBox .product {
        padding: 30px 0;
    }
    .cartBox .subtotal {
        max-width: 100%;
    }
    .signBox .image img {
        width: 100%;
    }
    .history {
        width: 100%;
    }
    .history .left {
        width: 100%;
    }
    .history .right {
        width: 100%;
    }
    .history .gap .info {
        font-size: 12px;
    }
    .history .button {
        font-size: 12px;
    }
    .cartBox .product .text {
        width: 100%;
    }
    .product .text {
        width: 58%;
    }
    .accountBox .product .text {
        width: 54%;
    }
    .contactBox a {
        font-size: 11px;
    }
    .overview .view {
        width: 100%;
    }
    .overview .detail .trash:before {
        top: -8px;
        right: -6px;
    }
    .overview .view a h3 {
        font-size: 13px;
    }
    .footer h3 {
        font-size: 20px;
    }
    .footer li {
        padding: 10px 0 0;
    }
    .footer li a {
        font-size: 16px;
    }
}

.rendered-form label * {
    display: inline;
}

.rendered-form label br {
    display: none;
}

.book_listBox .list .packageContents h3 {
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 10px;
    line-height: 1.2;
}

.book_listBox .list .packageContents h3 span {
    display: block;
    margin: 0;
}

.bottomAlign {
    bottom: 0;
    position: absolute;
    right: 16px;
}

.comment {
    font-size: 12px;
    margin-top: 10px;
}

.discount.blue {
    background-color: #34315d !important;
}

.uitgebreidBtn {
    padding: 0 10px 0 40px;
    float: right;
    width: auto;
    height: 32px;
    line-height: 32px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1px;
    color: #fff;
    border: 0;
    border-radius: 6px;
    background: #34315d url('../images/search-icon.svg') left 15px center no-repeat;
    background-clip: inherit;
    box-shadow: none;
    transition: none;
}

.uitgebreidBtn:hover {
    background-color: #a31a43;
    color: white;
    text-decoration: none;
}

.booklist-btn {
    padding: 7px 16px;
    font-size: 16px;
    color: #fff;
    border-radius: 6px;
    background-color: #34315d;
    display: block;
    margin-top: 10px;
}

.booklist-btn:hover {
    color: #fff;
    background-color: #a31a43;
    text-decoration: none;
}

.btn-bag span {
    color: white;
    position: absolute;
    width: 24px;
    height: 24px;
    background: #34315d;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    right: 0;
    bottom: 10px;
}

.isbn {
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.hideImportant {
    display: none !important;
}

.pagination a {
    margin-bottom: 9px;
    padding: 5px 8px;
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: #34315d;
    border-radius: 6px;
    background-color: #dfdeed;
    margin: 0 5px;
    min-width: 24px;
    text-align: center;
}

.pagination span {
    margin-bottom: 9px;
    padding: 5px 8px;
    display: block;
    font-size: 14px;
    text-decoration: none;
    color: white;
    border-radius: 6px;
    background-color: #34315d;
    margin: 0 5px;
    min-width: 24px;
    text-align: center;
}

.pagination {
    margin: 0 -5px;
}

.mobile-cart {
    display: none;
}

#mobileNotification {
    position: absolute;
    opacity: 0;
}

@media (max-width:767px) {
    #bannerCntr .list li a {
        padding: 0;
    }
    h2 {
        line-height: 34px;
    }
    .salesBox>.container>.row {
        display: block;
    }
    .bookBox .zoeken {
        margin: 0 0 50px auto;
    }
    .bookBox .slick-dots {
        margin-bottom: 20px;
    }
    .salesBox .right .bg-light-gray {
        margin: 21px 0;
    }
    .book_listBox .title {
        padding-left: 10px;
    }
    .mobile-cart {
        margin-left: -46px;
        position: absolute;
        top: 5px;
        right: 80px;
        z-index: 100;
        display: block;
        width: 40px;
        height: 27px;
        transition: opacity 0.25s ease;
        cursor: pointer;
    }
    .mobile-cart img {
        height: 28px;
    }
    .mobile-cart .cartCount {
        right: -11px;
        bottom: -26px;
    }
    #mobileNotification {
        position: fixed;
        top: 105px;
        left: 0;
        right: 0;
        width: 100%;
        background: #34315d;
        /* background: #f9f8fb; */
        z-index: 2;
        padding: 8px 12px;
        opacity: 0;
        transition: all 0.4s;
    }
    #mobileNotification .titleAdded {
        color: white;
        /* color: #34315d; */
        font-size: 16px;
    }
    .cartVisible #mobileNotification {
        opacity: 100;
    }
    .cartBox .price {
        text-align: left !important;
    }
    .cartBox .price del,
    .cartBox .price span {
        display: inline-block;
    }
    .history .left {
        width: 20% !important;
    }
    .history .right {
        width: 75% !important;
    }
    .accountBox .product .text {
        width: 76% !important;
    }
}

.new.text-right .sec.secondhand {
    display: inline-block;
    max-width: 80px;
    text-align: center;
    float: right;
    clear: both;
}

#filterCollapse {
    float: right;
    margin-top: -49px;
    color: #34315d;
    font-size: 25px;
}

#filterCollapse:hover {
    text-decoration: none;
}

@media (max-width:767px) {
    #filterCollapse+div {
        display: none;
        padding-bottom: 0;
    }
    .book_listBox .left.bg-light-gray {
        padding-bottom: 0;
    }
}