/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- keyframes ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @-webkit-keyframes pulse {50% {-webkit-transform: scale(1.25);transform: scale(1.25);}} @keyframes pulse {50% {-webkit-transform: scale(1.25);transform: scale(1.25);}} @media screen and (min-width: 0){ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- algemeen voor hele site ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ * {margin: 0; padding: 0; border: 0; outline: none;} html {font-size: 16px; width: 100vw; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%;} body {overflow-X: hidden; overflow-Y: auto; text-align: center; font-family: Roboto, Arial, sans-serif; cursor: default; color: #000000; width: 100%; height: 100%; background-color: #FFFFFF;} a {text-decoration: none; outline: none; border: none;} a:link {color: #000000;} a:visited {color: #000000;} a:hover {color: #000000;} a:active {color: #000000;} input, select, textarea {font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; border: 1px solid #000000;} .vertCenter {display: inline-block; vertical-align: middle; height: 100%;} .ED {position: relative; width: 100%; height: 2rem; line-height: 2rem; color: #444444; background-color: #CCCCCC; z-index: 1;} .ED a {color: #444444;} .ED a:hover {color: #000000;} .ED.toBottom {position: absolute; bottom: 0;} .active {cursor: pointer;} .block {position: relative; display: block; left: 0; top: 0; width: 100%;} .button {position: relative; display: inline-block; background-color: #FFCC00; color: rgba(0, 0, 0, 0.6) !important; padding: 1rem 2rem 1rem 2rem; text-transform: uppercase; cursor: pointer; font-weight: bold; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; outline: 1px solid transparent;} .button:not(.disabled):hover {background-color: #FFDD00; color: rgba(0, 0, 0, 1) !important; outline: 1px solid rgba(0, 0, 0, 0.4); outline-offset: -5px;} .button.disabled {cursor: default; opacity: 0.35;} .photo {position: relative; display: inline-block; width: 30rem; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); font-size: 0;} .photo.small {width: 20rem;} .photo.right {float: right; margin: 0 0 2rem 2rem;} .photo img {width: 100%;} .frame {position: absolute; left: 1rem; top: 1rem; right: 1rem; bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.25);} .frame span {display: block; font-size: 2vw;} .frame .text {display: inline-block; vertical-align: middle; max-width: 95%; line-height: 2.5vw;} .overlay {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); z-index: 99999;} .overlay .inputWindow {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; padding: 2rem 0 2rem 0; background-color: #FFFFFF;} .overlay .inputWindow .question {display: block; margin-bottom: 2rem;} .overlay .inputWindow label {display: inline-block; width: 5rem; margin-right: 0.5rem; text-align: right;} .overlay .inputWindow input {width: 25rem; line-height: 2rem; margin-bottom: 0.25rem; padding-left: 0.5rem;} .overlay .inputWindow .button {margin: 2rem 1rem 0 1rem;} .hidden {position: absolute; left: -9999px;} .moreToSee {position: fixed; right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; line-height: 2rem; border-radius: 0.5rem; z-index: 9999; border: 1px solid #000000; font-size: 1.5rem; cursor: pointer; opacity: 0.35;} .moreToSee:hover {background-color: #FFCC00; opacity: 1;} .moreToSee.up {background-color: #FFCC00;} .moreToSee.up:after {content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-top: 1rem; border-right: 2px solid #000000; border-top: 2px solid #000000; transform: rotate(-45deg);} .moreToSee.down:after {content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border-right: 2px solid #000000; border-bottom: 2px solid #000000; transform: rotate(45deg);} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- menu ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .menuBar {position: fixed; left: 0; top: 0; width: 100%; color: #FFFFFF; z-index: 100; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-size: 0;} .menuBar.home {top: 3rem;} .menuBar a {color: #FFFFFF;} .menuBar.fixed {top: 0; background-color: rgba(0, 0, 0, 0.85);} .logo {display: inline-block; vertical-align: middle; font-size: 2rem; padding: 0.75rem 0 0.5rem 0; margin-right: 10vw; font-family: "Amiri"; text-shadow: 0 0 3rem #000000;} .logo span:first-child {position: relative; display: inline-block; top: -1rem; width: 0.75rem;} .logo span:last-child {position: relative; bottom: -0.5rem;} .menuItem {position: relative; display: inline-block; vertical-align: middle; padding: 1rem; cursor: pointer; z-index: 1; font-size: 1rem; text-shadow: 0 0 2rem #000000;} .menuItem img {display: inline-block; vertical-align: middle; height: 1.5rem;} .menuItem.current {cursor: default;} .activeMenuItem {position: absolute; left: -900px; top: 3.25rem; border-bottom: 1px solid #FFCC00;} .placeHolder {position: relative; height: 9rem;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- cart-icon ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .cart {position: relative; display: inline-block; vertical-align: middle; margin-left: 5rem; font-size: 0.8rem;} .cart img {position: relative; cursor: pointer; z-index: 1;} .cart .content {position: absolute; left: 80%; top: 65%; height: 1rem; line-height: 0.9rem; padding: 0.1rem 0.5rem 0.1rem 0.5rem; background-color: #44DD00; color: #000000; font-size: 0.8rem; border-radius: 50%; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} .cart .content.add {-webkit-animation: pulse 0.35s;animation: pulse 0.35s;} .cart.empty img {cursor: default;} .cart.empty .content {background-color: #FF0000; color: #FFFFFF; cursor: default;} .cart .contentInfo {opacity: 0; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 0; background-color: #FFCC00; color: #000000; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; white-space: nowrap; padding: 0.25rem 0.5rem 0.25rem 0.5rem; cursor: default;} .cart:hover .contentInfo {opacity: 1; top: 2.5rem;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- home ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .top {left: 0; top: 0; width: 100vw; height: 75vh; color: #FFFFFF;} .inspiration {position: absolute; left: 0; top: 0; width: 100vw; height: 100%; background: no-repeat center / cover; text-shadow: 0 0 3rem #000000;} .top .button {top: 65%; width: 15rem; z-index: 99;} .top .button:after {content: "GRATIS verzending"; position: absolute; right: -3.5rem; top: -3.25rem; width: 5.5rem; height: 5.5rem; background-color: RED; color: #FFFFFF; border-radius: 50%; font-size: 0.9rem; padding-top: 1.65rem; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); text-transform: none; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); font-weight: bold;} .welcome {background-color: #FFFFFF; padding: 8rem 0 10rem 0;} .welcome:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../../inc/img/oldPaper1.jpg") no-repeat center / 100% 100%; z-index: 0; opacity: 0.25;} .welcome .photo {vertical-align: top; width: 20%; margin-right: 2vw;} .welcome .welcomeText {display: inline-block; vertical-align: top; width: 30%; text-align: left;} .slogan {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 1rem 2rem 1rem 1rem; background-color: rgba(0, 0, 0, 0.25);} .slogan:before {content: ""; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: url("../../inc/img/BG.jpg") no-repeat center / cover; z-index: -1;} .slogan .frame {position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; left: 0; top: 0; width: 100%; padding: 4rem 0 4rem 0; color: #FFFFFF; font-size: 2vw; line-height: 2.5vw;} .slogan span:nth-of-type(1) {margin-right: 20vw;} .slogan span:nth-of-type(2) {margin: 0 0 1vw 20vw;} .slogan span:nth-of-type(3) {margin-left: 5vw;} .slogan span:nth-of-type(4) {margin-right: 5vw;} .mostPopular {background-color: #FFFFFF; padding: 8rem 0 10rem 0;} .mostPopular:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../../inc/img/oldPaper2.jpg") no-repeat center / 100% 100%; z-index: 0; opacity: 0.25;} .subject {display: block; width: 95%; margin: 0 auto 3rem auto; font-size: 2rem; z-index: 1; text-shadow: 0 0 0.1rem rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 0.5);} .mostPopular .book {position: relative; display: inline-block; vertical-align: top; max-width: 25%; margin: 0 2vw 0 2vw; z-index: 1;} .mostPopular .book .cover {position: relative; display: inline-block; margin-bottom: 2rem; width: 15vw; height: 21.3vw; overflow: hidden; -webkit-box-shadow: 1px 2px 0.5rem black, 0 1rem 1rem rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 0.5rem black, 0 1rem 1rem rgba(0, 0, 0, 0.5);} .mostPopular .book .cover.expected:after {content: "binnenkort verwacht !"; position: absolute; right: -5vw; top: 3vw; background-color: #FF0000; padding: 0.5vw 5vw 0.5vw 5vw; color: white; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); font-size: 1rem; font-weight: bold;} .mostPopular .book .cover img{position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .mostPopular .book .cover .titleAuthor {position: relative; display: inline-block; vertical-align: middle; left: 0rem; width: 90%; border-top: 2px solid #000000; border-bottom: 2px solid #000000; padding: 0.5vw 0 0.5vw 0;} .mostPopular .book .title {font-weight: bold; margin-bottom: 1rem;} .mostPopular .book span {display: block; margin-bottom: 1rem;} .mostPopular .book a {color: #FFFFFF;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- uitgeverij, tekstproducties en afterPayment ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .textInfo {display: inline-block; width: 55%; text-align: left; padding-bottom: 4rem;} .textInfo.center {text-align: center;} .textInfo ul {margin-left: 1rem;} .textInfo a {text-decoration: underline;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- boeken ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .books {position: relative; display: inline-block; vertical-align: top; width: 70vw; text-align: left;} .books .horNavBar {display: block; width: 100%; background-color: #EEEEEE; padding: 0.25rem 0.5rem 0.25rem 0.5rem; margin-bottom: 0.5rem; -webkit-box-sizing: border-box; box-sizing: border-box;} .books .sortBy {display: inline-block; vertical-align: top; height: 2rem; line-height: 2rem; padding: 0 0.5rem 0 0.5rem; background-color: #FFFFFF; cursor: pointer;} .books .sortBy:before {content: "sorteren op ";} .books .sortBy:after {content: "▼"; font-size: 0.75rem; margin-left: 0.25rem;} .books .pullDown {position: absolute; border: 1px solid #CCCCCC; background-color: #FFFFFF; -webkit-box-shadow: 0 0.5rem 0.5rem -0.25rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 0.5rem -0.25rem rgba(0, 0, 0, 0.15); z-index: 1;} .books .pullDown span {display: block; padding: 0.25rem 1rem 0.25rem 1rem; cursor: pointer;} .books .pullDown span:hover {background-color: #FFDD00;} .books .pullDown span.current {background-color: #FFDD00;} .books .sortOrder {position: relative; display: inline-block; vertical-align: top; height: 2rem; line-height: 1.75rem; padding: 0 1.25rem 0 0.4rem; background-color: #FFFFFF; cursor: pointer; font-size: 1.25rem;} .books .sortOrder span:before {content: ""; position: absolute; left: 0; top: -0.25rem; width: 0.25rem; height: 2px; background-color: #000000;} .books .sortOrder span {position: absolute; left: 1.1rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 0.5rem; height: 2px; background-color: #000000;} .books .sortOrder span:after{content: ""; position: absolute; left: 0; top: 0.25rem; width: 0.75rem; height: 2px; background-color: #000000;} .books .sortOrder span#DESC {-webkit-transform: scaleY(-1);-ms-transform: scaleY(-1);transform: scaleY(-1);} .vertNavBar {display: none; position: fixed; left: 0.5rem; width: 12rem; border: 1px solid #EEEEEE; text-align: left; padding-bottom: 1rem;} .vertNavBar .bar {display: block; background-color: #EEEEEE; padding-left: 1rem; line-height: 2.45rem;} .vertNavBar .disableFilters {display: none; background-color: #EEEEEE; padding-left: 1rem; line-height: 2rem; font-size: 0.75rem; text-decoration: underline; cursor: pointer;} .vertNavBar .filterSubj {display: block; font-weight: bold; padding-left: 1rem; line-height: 2rem; margin-top: 1rem;} .vertNavBar label {display: block; padding-left: 1rem;} .vertNavBar label.disabled {color: #AAAAAA;} .vertNavBar label:not(.disabled):hover {background-color: #FFCC00;} .vertNavBar input {margin-right: 0.25rem;} .books .book {position: relative; display: inline-block; vertical-align: top; width: 38rem; min-height: 17rem; text-align: left; border: 1px solid #DDDDDD; padding: 1rem; margin: 0 3rem 3rem 0; box-sizing: border-box;} .books .book .button.expected {xmargin-bottom: 3rem; background-color: #000000; color: #FFCC00 !important;} .books .book .cover {float: right; position: relative; display: block; width: 10rem; height: 15rem; margin-left: 1rem; -webkit-box-shadow: 1px 2px 0.5rem black, 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 0.5rem black, 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5); -webkit-perspective-origin: 0 50%; perspective-origin: 0 50%; -webkit-perspective: 800px; perspective: 800px; -webkit-transform: translate3d(0,0,0); border: 1px solid #CCCCCC;} .books .book .toCome, .books .book .empty {position: relative; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); -webkit-transform-origin: 0 50% 0; -ms-transform-origin: 0 50% 0; transform-origin: 0 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: .5s cubic-bezier(0.25,1,.25,1); -o-transition: .5s cubic-bezier(0.25,1,.25,1); transition: .5s cubic-bezier(0.25,1,.25,1); overflow: hidden;} .books .book .toCome:after {content: "binnenkort verwacht !"; position: absolute; right: -4rem; top: 1rem; background-color: #FF0000; padding: 0.5rem 5rem 0.5rem 5rem; color: white; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); font-size: 0.8rem; font-weight: bold;} .books .book .toCome.hide, .books .book .empty.hide {display: none;} .books .book .toCome .titleAuthor, .books .book .empty .titleAuthor {position: relative; display: inline-block; vertical-align: middle; left: 0.4rem; width: 90%; border-top: 2px solid #000000; border-bottom: 2px solid #000000; padding: 0.5vw 0 0.5vw 0; font-size: 0.9rem; text-align: center;} .books .book img {position: absolute; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 1px 2px 0.5rem black, 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 0.5rem black, 0 0.5rem 0.5rem rgba(0, 0, 0, 0.5); -webkit-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); -webkit-transform-origin: 0 50% 0; -ms-transform-origin: 0 50% 0; transform-origin: 0 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: .5s cubic-bezier(0.25,1,.25,1); -o-transition: .5s cubic-bezier(0.25,1,.25,1); transition: .5s cubic-bezier(0.25,1,.25,1);} .books .book .title {font-size: 1.5rem; padding-bottom: 0.25rem;} .books .book .author {font-size: 1.25rem; font-weight: bold; padding-bottom: 0.5rem;} .books .book .desc {margin-bottom: 2rem;} .books .book .price {font-size: 1.5rem; margin-bottom: 0.5rem;} .books a:hover img {-webkit-transform: rotateY(-35deg);transform: rotateY(-35deg);} .books a:hover .toCome, .books a:hover .empty {-webkit-transform: rotateY(-35deg);transform: rotateY(-35deg);} .books .buttonGroup {xposition: absolute; xleft: 1rem; xbottom: 1rem;} .books .button {font-size: 0.8rem;} .books .button:not(.expected):after {content: "GRATIS verzending"; position: absolute; right: -3rem; top: -3rem; width: 4.5rem; height: 4.5rem; background-color: RED; color: #FFFFFF; border-radius: 50%; font-size: 0.75rem; padding-top: 1.35rem; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); text-transform: none; text-align: center; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); font-weight: bold;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- detailpagina boek ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .bookInfo {display: inline-block;} .bookInfo .back {display: inline-block; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; line-height: 2rem; margin-bottom: 4rem; color: #444444; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s;} .bookInfo .back:hover {color: #000000; border-color: #000000;} .bookCover {position: relative; display: inline-block; vertical-align: top; width: 20vw; height: 28.4vw; margin-right: 5vw; -webkit-box-shadow: 1px 2px 0.5rem black, 0 1rem 1rem rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 0.5rem black, 0 1rem 1rem rgba(0, 0, 0, 0.5); overflow: hidden;} .bookCover img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .bookCover.expected:after {content: "binnenkort verwacht !"; position: absolute; right: -5vw; top: 2.5vw; background-color: #FF0000; padding: 0.5vw 5vw 0.5vw 5vw; color: white; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); font-size: 1vw; font-weight: bold;} .bookCover.expected .titleAuthor, .bookCover.empty .titleAuthor {position: relative; display: inline-block; vertical-align: middle; left: 0.3vw; width: 90%; border-top: 2px solid #000000; border-bottom: 2px solid #000000; padding: 0.5vw 0 0.5vw 0; font-size: 1.5rem;} .bookCover.expected .titleAuthor.hide {display: none;} .bookDetails {display: inline-block; vertical-align: top; width: 45vw; text-align: left;} .bookDetails .title {font-size: 2rem; margin-bottom: 1rem;} .bookDetails .price {position: relative; display: inline-block; font-size: 3rem;} .bookDetails .price:after {content: "GRATIS verzending"; position: absolute; right: -6rem; top: -0.5rem; width: 5rem; height: 5rem; background-color: RED; color: #FFFFFF; border-radius: 50%; font-size: 0.8rem; padding-top: 1.5rem; -webkit-box-sizing: border-box; box-sizing: border-box; -xwebkit-transform: rotate(25deg); -xms-transform: rotate(25deg); xtransform: rotate(25deg); text-transform: none; text-align: center; -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); font-weight: bold;} .bookDetails .quote {float: right; background-color: #FAFAFA; padding: 1rem;} .bookDetails .line {width: 100%; height: 1px; background-color: #CCCCCC; margin: 2rem 0 2rem 0;} .bookDetails label {display: inline-block; width: 10rem;} .bookDetails .descr {display: block; margin-bottom: 3rem;} .bookDetails .descr span {font-size: 1.25rem;} .bookDetails .button {margin-bottom: 2rem;} .bookDetails .button:first-of-type {xmargin-left: 5rem; float: right;} .bookInfo .reviews {margin-top: 10rem; padding-top: 4rem; background-color: #FAFAFA;} .bookInfo .review {display: inline-block; width: 60%; padding-bottom: 4rem; text-align: left;} .bookInfo .review .by {display: block; font-weight: bold; margin-bottom: 1rem;} .bookInfo .next.review {border-top: 1px solid #CCCCCC; padding-top: 4rem;} .videoContainer {position: relative; display: block; margin: 4rem auto 2rem auto; width: 75vw; height: calc(75vw / 16 * 9 - 10.4vw); overflow: hidden;} #videoSRC {position: absolute; left: 0; top: -5.2vw; width: 75vw; height: calc(75vw / 16 * 9);} .videoCover {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .videoCover .sound {position: absolute; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; padding: 0.25rem 0.5rem; cursor: pointer; transition: 0.5s;} .videoCover .sound:hover {background-color: #000000;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- contact ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .contactForm {position: relative; left: 0; top: 0; width: 100%; padding-bottom: 7rem;} .contactForm:before {content: ""; position: absolute; left: 0; top: 0; width: 98%; height: 100%; z-index: -1; background: url("../img/chair.png") no-repeat right bottom / 40rem auto;} .contactForm .generalText {display: inline-block; background-color: rgba(255, 255, 255, 0.25); margin-bottom: 2rem;} .contactForm label {display: inline-block; width: 6rem; line-height: 1.5rem; margin-right: 0.25rem; background-color: rgba(255, 255, 255, 0.5);} .contactForm label.right {text-align: right;} .contactForm label.center {text-align: center;} .contactForm input {display: inline-block; width: 25rem; line-height: 1.5rem; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #AAAAAA; margin-bottom: 0.25rem;} .contactForm input.hidden {position: absolute; left: -9999px; top: -9999px;} .contactForm textarea {display: inline-block; width: 40rem; height: 10rem; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #AAAAAA;} .contactInfo {position: relative; display: inline-block; margin: 2rem 0 2rem 0;} .contactBlock {display: inline-block; vertical-align: top; padding-top: 2rem; margin: 0 4vw 0 4vw; text-align: left;} .contactBlock.address {background: url("../img/homeB.png") no-repeat top center / 1.5rem auto;} .contactBlock.mail {background: url("../img/contactB.png") no-repeat top center / 1.5rem auto;} .contactBlock span {display: inline-block; width: 3.5rem; line-height: 1.5rem;} .contactInfo .line {position: absolute; top: 0; display: inline-block; height: 100%; border-right: 1px solid #CCCCCC;} .contactInfo a.center {display: block; text-align: center; text-decoration: underline;} /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- cart ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .step {position: relative; display: inline-block; vertical-align: top; margin: 2rem 0 2rem 0; padding: 0 1rem 0 1rem;} .step.current {position: relative; font-weight: bold; cursor: default !important; text-decoration: none !important;} .step.current:before {content: "●"; top: -1.7rem; width: 1.4rem; height: 1.4rem; font-size: 1rem; background-color: #FFCC00; z-index: 1;} .step:before {content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: -1.5rem; width: 1rem; height: 1rem; background-color: #000000; border-radius: 50%; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; z-index: 1;} .step:after {content: ""; position: absolute; left: 0; top: -1rem; width: 100%; height: 1px; background-color: #000000;} .step:first-of-type:after {content: ""; left: 50%; width: 50%;} .step:last-of-type:after {content: ""; width: 50%;} .step.complete {cursor: pointer;} .step.complete:hover {text-decoration: underline;} .step .completed {display: inline-block; margin-left: 0.25rem; font-size: 1.5rem; line-height: 0.9rem; font-weight: bold; color: #AADD00;} .tabs {position: relative; left: 0; top: 0; width: 100vw; overflow: hidden;} .tabsContainer {position: relative; left: 0; top: 0; width: 400vw; text-align: left; font-size: 0;} .tab {-webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top; position: relative; display: inline-block; width: 100vw; text-align: center; padding: 2rem 0 4rem 0; font-size: 1rem;} .tab .title {font-size: 1.5rem; font-weight: bold; display: block;} .tabs.hidden {display: none;} .tab a:hover {text-decoration: underline;} .tab .small {width: 10rem; border-bottom: 1px solid #CCCCCC;} .tab .medium {width: 20rem; border-bottom: 1px solid #CCCCCC;} .tab .Details span {display: block; margin: 2rem 0 4rem 0; text-align: right; font-size: 0.8rem; color: #AAAAAA;} .fixed.button.prev {display: none; position: fixed; left: 1rem; top: 50%; z-index: 1;} .fixed.button.next {position: fixed; right: 1rem; top: 50%; z-index: 1;} .fixed.button.continueShopping {display: block; position: fixed; left: 1rem; top: 7rem; z-index: 1001;} .fixed.button.continueShopping:after{background-color: rgba(170, 221, 0, 0.25);} /*---------------------------------------------------------------------------------------------------- cart - inhoud ----------------------------------------------------------------------------------------------------*/ .products {display: inline-block; text-align: center;} .product {display: block; width: 100vw; padding: 0.25rem; margin: 0.5rem 0 0.5rem 0; font-size: 0;} .product:nth-child(odd) {background-color: rgba(0, 0, 0, 0.02);} .product a {display: inline-block; vertical-align: middle; color: #000000;} .product img {display: inline-block; vertical-align: middle; height: 8rem; margin: 0 2rem 0 2rem; -webkit-box-shadow: 1px 2px 0.25rem rgba(0, 0, 0, 0.5), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 0.25rem rgba(0, 0, 0, 0.5), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);} .product .authorTitle {display: inline-block; vertical-align: middle; font-size: 1rem;} .product .group {position: relative; display: inline-block; vertical-align: middle; margin-right: 2rem; font-size: 1rem;} .product .artName {display: inline-block; vertical-align: middle; width: 20rem; text-align: left; margin-right: 2rem;} .product a:hover + .group .artName, .product .artName:hover {text-decoration: underline;} .product span {display: inline-block;} .product .artPrice {display: inline-block; vertical-align: middle; width: 9rem; text-align: right; margin-right: 5vw;} .product .artAmount {display: inline-block; vertical-align: middle; margin-right: 5vw;} .product .artAmount select {position: absolute; top: 0.1rem; margin-left: 0.25rem; border: 1px solid grey;} .product .artAmount select:focus {z-index: 1;} .product .artTotal {display: inline-block; vertical-align: middle; width: 9rem; text-align: right; margin-right: 2rem;} .trashCan {position: relative; display: inline-block; vertical-align: middle; width: 1.75rem; height: 1.75rem; cursor: pointer;} .trashCan:hover .trash-lid {-webkit-transform: rotate(-30deg);-ms-transform: rotate(-30deg);transform: rotate(-30deg); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;} .trashCan .trash-lid {width: 62%; height: 10%; position: absolute; left: 50%; margin-left: -31%; top: 10.5%; background-color: #AAAAAA; border-top-left-radius: 80%; border-top-right-radius: 80%; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;} .trashCan .trash-lid:after {content: ""; width: 26%; height: 100%; position: absolute; left: 50%; margin-left: -13%; margin-top: -10%; background-color: inherit; border-top-left-radius: 30%; border-top-right-radius: 30%; -webkit-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg);} .trashCan .trash-container {width: 56%; height: 65%; position: absolute; left: 50%; margin-left: -28%; bottom: 10%; background-color: #AAAAAA; border-bottom-left-radius: 15%; border-bottom-right-radius: 15%;} .trashCan .trash-container:after{content: ""; width: 110%; height: 12%; position: absolute; left: 50%; margin-left: -55%; top: 0; background-color: inherit; border-bottom-left-radius: 45%; border-bottom-right-radius: 45%;} .trashCan .trash-lines {width: 4%; height: 50%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 17%; background-color: #FFFFFF;} .trashCan .trash-lines:before {content: ""; width: 100%; height: 100%; position: absolute; left: 0; -webkit-transform: translateX(-300%); -ms-transform: translateX(-300%); transform: translateX(-300%); bottom: 0; background-color: inherit;} .trashCan .trash-lines:after{content: ""; width: 100%; height: 100%; position: absolute; left: 0; -webkit-transform: translateX(300%); -ms-transform: translateX(300%); transform: translateX(300%);bottom: 0; background-color: inherit;} .prices {display: inline-block; width: 50vw; text-align: right; margin-top: 1rem; padding-top: 2rem; border-top: 3px double #CCCCCC; line-height: 2rem;} .prices label {display: inline-block; height: auto;} .prices .price {display: inline-block; width: 7rem; margin-right: 2.3rem;} .prices .cartVAT, .prices .cartExclVAT {color: #AAAAAA;} .prices .cartVAT {border-top: 1px solid #CCCCCC;} .prices .cartTotal {font-weight: bold; margin-top: 1rem;} .prices .button {margin: 0.5rem 2.3rem 2rem 0;} /*---------------------------------------------------------------------------------------------------- cart - verzending ----------------------------------------------------------------------------------------------------*/ .account {position: relative; display: inline-block; vertical-align: top; text-align: left;} .account div {display: inline-block; vertical-align: top; width: 6rem; line-height: 1.5rem; text-align: right; margin-right: 0.5rem;} .account label {display: inline-block; margin-right: 0.25rem;} .account input:not([type=radio]){display: inline-block; width: 25rem; line-height: 1.5rem; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #AAAAAA; margin-bottom: 0.25rem;} .account input[type=radio] {display: inline-block; vertical-align: middle; line-height: 1.5rem; margin: 0 0.25rem 0 0.25rem;} .account textarea {display: inline-block; width: 25rem; height: 10rem; background-color: rgba(255, 255, 255, 0.8); border: 1px solid #AAAAAA;} .account .errorMessage {position: absolute; left: 101%; width: 17rem; color: red; text-align: left; font-size: 0.8rem;} /*---------------------------------------------------------------------------------------------------- cart - overzicht en betaling ----------------------------------------------------------------------------------------------------*/ .tab .paymentChoice {position: relative; display: inline-block; vertical-align: top; border: 1px solid #AAAAAA; width: 11rem; height: 11rem; margin: 0.5rem 0.5rem 2rem 0.5rem; overflow: hidden; -webkit-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; cursor: pointer;} .tab .paymentChoice:hover {border: 1px solid #000000;} .tab .paymentChoice.selected {border: 1px solid #000000; background: rgba(255, 221, 0, 0.1);} .tab .paymentChoice img {width: 65%; margin-top: 1rem;} .tab .paymentChoice div {float: left; display: inline-block; width: 4rem; height: 2.5rem; border-radius: 0.5rem; border: 1px solid #AAAAAA; overflow: hidden; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); margin: 1rem 0.25rem 0 0.75rem; -webkit-box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.35); box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.35);} .tab .paymentChoice div:last-of-type {margin: 0.5rem 0 0 1.5rem;} .tab .paymentChoice div img {width: 100%;} .tab .paymentChoice span {position: absolute; left: 0; bottom: 0; width: 100%;} .tab .paymentChoice span:first-of-type {bottom: 1.5rem; font-weight: bold;} .tab .paymentChoice span:last-of-type {bottom: 0.25rem; color: #888888;} .tab .issuer {position: relative; display: inline-block; border: 1px solid #AAAAAA; width: 7rem; height: 6rem; margin: 0.5rem 0.5rem 0 0.5rem; -webkit-transition: 0.35s; -o-transition: 0.35s; transition: 0.35s; cursor: pointer;} .tab .issuer:hover {border: 1px solid #000000;} .tab .issuer.selected {border: 1px solid #000000; background: rgba(255, 221, 0, 0.1);} .tab .issuer img {height: 50%; margin-top: 1rem;} .tab .issuer span {position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5rem; font-weight: bold;} .tab .paymentDetails {display: none; margin-bottom: 2rem;} .tab .paymentDetails input {width: 15rem; line-height: 1.5rem;} } /*---------------------------------------------------------------------------------------------------- media queries ----------------------------------------------------------------------------------------------------*/ @media screen and (max-width: 1420px){ } @media screen and (max-width: 1300px){ } @media screen and (max-width: 1050px){ /*---------------------general--------------------------------------------------------*/ .button {padding: 0.5rem 1rem 0.5rem 1rem;} .frame span {font-size: 2rem;} .frame .text {line-height: 2.5rem;} .photo {position: relative; display: inline-block; width: 30rem; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); font-size: 0;} .photo.small {width: 20rem;} .photo.right {float: right; margin: 0 0 2rem 2rem;} .photo img {width: 100%;} /*---------------------menu-----------------------------------------------------------*/ .mobile {position: fixed; right: 1rem; top: 1rem; width: 1.5rem; height: 1.75rem; margin: auto; color: #FFFFFF; font-size: 0.8rem; cursor: pointer; z-index: 101;} .mobile span {position: absolute; left: 0; width: 100%; height: 0.15rem; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.5); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;} .mobile span:nth-child(1) {top: 0%;} .mobile span:nth-child(2) {top: 25%;} .mobile span:nth-child(3) {top: 50%;} .mobile div {display: none; position: absolute; bottom: -5px; width: 100%;} .mobile.open span {box-shadow: none; border: 0;} .mobile.open span:nth-child(1) {top: 25%; transform: translateY(-50%); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);} .mobile.open span:nth-child(2) {opacity: 0;} .mobile.open span:nth-child(3) {top: 25%; transform: translateY(-50%); -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);} .menuBar {display: none; top: 0 !important; background-color: #000000; !important; padding-bottom: 2rem;} .menuBar.fixed {background-color: #000000; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);} .logo {margin: 0;} .menuItem {display: block; width: 50%; padding: 0.5rem 0 0.25rem 0; margin: 0 auto 0.5rem auto;} .menuItem.current {border-bottom: 1px solid #FFCC00;} .activeMenuItem {display: none;} .cart {margin: 1rem 0 0 0;} .placeHolder {height: 2rem;} /*---------------------home-----------------------------------------------------------*/ .top .button {top: 80%;} .top .button:after {right: -3.5rem; top: -4rem;} .welcome .photo {width: 80%; max-width: 20rem; margin: 0 0 2rem 0;} .welcome .welcomeText {display: block; width: 95%; margin: auto;} .slogan:before {background-size: auto 100%;} .slogan .frame {font-size: 2rem; line-height: 2.5rem;} .mostPopular .book {max-width: 95%; margin: 0;} .mostPopular .book .cover {width: 50vw; max-width: 20rem; height: 71vw; max-height: 30rem;} .mostPopular .button {margin-bottom: 4rem;} /*---------------------uitgeverij, tekstproducties en afterPayment--------------------*/ .textInfo {display: inline-block; width: 95%; text-align: left; padding-bottom: 4rem;} .textInfo .photo.right {float: none; display: block; margin: 0 auto 2rem auto; max-width: 95%;} /*---------------------boeken---------------------------------------------------------*/ .books {width: 95vw;} .books .book {width: 100%; margin: 0 0 3rem 0;} .bookCover {display: block; width: 40vw; height: 56.8vw; margin: 0 auto 2rem auto;} .books .button:not(.expected):after {right: -3.5rem; top: -3rem; padding-top: 1.25rem;} .bookDetails {display: inline-block; vertical-align: top; width: 95vw; text-align: left;} .bookDetails .quote {margin: 1.5rem 0 1rem 0;} .bookInfo .reviews {margin-top: 4rem;} .bookInfo .review {width: 95%;} .videoContainer {width: 100vw; height: calc(100vw / 16 * 9 - 14vw);} #videoSRC {top: -7vw; width: 100vw; height: calc(100vw / 16 * 9);} /*---------------------contact--------------------------------------------------------*/ .contactForm {padding-bottom: 12rem;} .contactForm:before {background-size: 85% auto;} .contactForm label {text-align: center !important;} .contactForm input {width: 95%; line-height: 2.5rem;} .contactForm textarea {width: 95%;} .contactBlock {display: block; margin: 0 0 2rem 0; text-align: center;} .contactInfo .line {display: none;} /*---------------------cart-----------------------------------------------------------*/ .step {font-size: 0.55rem;} .fixed.button.prev {top: auto; bottom: 3rem;} .fixed.button.next {top: auto; bottom: 3rem;} .fixed.button.continueShopping {top: auto; bottom: 6rem;} .tab {padding-bottom: 8rem;} .product img {margin-bottom: 1rem;} .product .group {line-height: 2.5rem;} .prices {width: 100%;} .account input {line-height: 2.5rem;} .account .errorMessage {position: relative; left: 0; width: 17rem;} } @media screen and (max-width: 1050px) and (orientation: landscape){ } @media screen and (max-width: 700px){ } @media screen and (max-width: 600px){ } @media screen and (max-width: 400px){ } @media (hover: none){ }