/* KEYFRAMES */

@-webkit-keyframes topslider1 {
    0% {
        top:300px;
    }
    100% {
        top: 0px;
    }
}
@keyframes topslider1{
    0% {
        top:300px;
    }
    100% {
        top: 0px;
    }
}

@-webkit-keyframes topslider2 {
    0% {
        top:200px;
    }
    100% {
        top: 0px;
    }
}
@keyframes topslider2{
    0% {
        top:200px;
    }
    100% {
        top: 0px;
    }
}

@-webkit-keyframes topslider3 {
    0% {
        top:100px;
    }
    100% {
        top: 0px;
    }
}
@keyframes topslider3{
    0% {
        top:100px;
    }
    100% {
        top: 0px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes moveGradient {
    to {
        background-position: -300% center;
    }
}

html {
    scroll-behavior: auto !important;
}

/* BODY */
body {
	font-family: "Reddit Sans", sans-serif;
    background-color: #faf8f0;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

a{
	color:#333;
	text-decoration:none;
}

a:hover{
	color:#f60;
	text-decoration:none;
}

a.orange{
	color:#f60;
}

a.orange:hover{
	color:#f60;
	text-decoration:underline;
}

p{
	color:#333;
}

.bg-warning {
   background: #4c9bbe !important;
}

.bg-danger {
    background: #dc3545 !important;
}

.bg-success {
    background: #20a165 !important;
}

.error {
	color: #fff;
    background: #dc3545;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

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

.success {
	color: #fff;
    background: #20a165;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.notify {
	color: #fff;
    background: #fdd6b9b8;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    border: 2px solid #fdd6b9;
    font-weight: 600;
}


.form-control {
    height: 50px;
    border-radius: 20px;
    border: 2px solid #fce9d7;
    padding: .5rem 1rem;
    margin: 5px 0px 15px;
    line-height: 36px;
    padding: 6px 15px;
}

.form-control:focus {
    box-shadow:none;
	border-color: #fdd6b9;
}

.form-control:valid {
  background-color:  #fff!important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}


.form-control::placeholder {
   color:#ccc;
}

.form-select {
    height: 50px;
    border-radius: 20px;
    border: 2px solid #fce9d7;
	padding: .5rem 1rem;
	margin: 5px 0px 15px;
}

.form-select:focus {
    box-shadow:none;
	border-color: #fdd6b9;
}


textarea.form-control {
     min-height: 145px;
	 line-height: inherit;
}

.container {
    max-width: 1300px;
}

.button, .button:focus{
	display: inline-block;
    background-color: #f60;
    color: #fff;
    border-radius: 100px;
    padding: 12px 50px;
    font-weight: 700;
    font-size: 18px;
	border:2px solid #f60;
	transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
	cursor:pointer;
	outline: none !important;
	margin-bottom:8px;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
}

.button:hover{
    background-color: transparent !important;
	color: #f60 !important;
	border:2px solid #f60 !important;
	background-image: linear-gradient(-180deg, #ff893b00, #ff660017);
	box-shadow: rgb(255 102 0 / 25%) 0 3px 8px;
}

.button2, .button2:focus{
	background-color: transparent;
	color: #f60;
	border:2px solid #f60;
	transition: background-color 0.3s ease;
	background-image: linear-gradient(-180deg, #ff893b00, #ff660000);
}

.button3, .button3:focus{
	background-color: transparent;
	color: #dc3545;
	border:2px dashed #dc3545;
	background-image: linear-gradient(-180deg, #ff893b00, #ff660000);
	opacity: 0.8;
}

.button3:hover{
	color: #dc3545!important;
	border:2px solid #dc3545 !important;
	opacity: 1;
}

.button4, .button4:focus{
	background-color: transparent;
	color: #555;
    border: 2px solid #cfcfcf;
    background-image: linear-gradient(-180deg, #ffffff, #d5d5d526);
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
}

.button4:hover{
	color: #f60 !important;
	border:2px solid #f60 !important;
}

.button-whatsapp, .button-whatsapp:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #128c7e61;
    background-image: linear-gradient(-180deg, #25d366f2, #25d366);
}

.button-facebook, .button-facebook:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #1877F2;
    background-image: linear-gradient(-180deg, #1877f2d6, #1877F2);
}

.button-linkedin, .button-linkedin:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #0077B5;
    background-image: linear-gradient(-180deg, #0077b5cc, #0077B5);
}

.button-x, .button-x:focus {
    background-color: transparent;
    color: #fff;
    border: 2px solid #000000;
    background-image: linear-gradient(-180deg, #000000b3, #000000);
}

.button-threads, .button-threads:focus{
	background-color: transparent;
    color: #fff;
    border: 2px solid #000000;
    background-image: linear-gradient(-180deg, #000000b3, #000000);
}

.breadcrumb {
    font-weight: 600;
    font-size: 18px;
}

.breadcrumb a {
    color: #ff6600;
}


/* MODAL */
.modal-content{
	border-radius:30px;
	border:0px;
}

.modal-header .modal-title{
	font-weight: 700;
}

.modal-header .material-symbols-outlined{
	color: #333;
    font-size: 28px;
}

.modal-header .material-symbols-outlined:hover{
	color: #ff6600;
}

.modal-footer{
	justify-content: center;
}

.modal-footer .button {
    font-size: 16px;
    padding: 7px 35px;
	margin-bottom:0px !important;
	margin-top:0px !important;
}

.modal-body .form-label {
    margin-bottom: 0px;
    font-weight: 600;
}

.modal-body .loader img {
    max-height:90px;
	margin-bottom: 10px;
}

.modal-body .character-checkbox-list{
	border-radius: 20px;
    border: 2px solid #fce9d7;
	padding: 10px 15px;
	background: #faf8f0;
	margin-top:5px;
}

.modal-body .character-checkbox-list .form-check {
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #fce9d7;
}

.modal-body .character-checkbox-list .form-check:last-child {
  border-bottom: none;
  margin-bottom:0px;
  padding-bottom:0px;
}

.modal-body .character-checkbox-list .form-check label {
    cursor:pointer;
}

/* Lazy Loading */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-load.loaded {
     opacity: 1;
}

.loading .edit-image{
	display:none !important;
}

.loading img{
	max-width: 100px !important;
}

/* PAGINANATION */
.pagination{
	margin: 35px auto;
}

.pagination .page-link{
	color: #f56400;
    border: 2px solid #f56400;
    border-radius: 10px !important;
    font-size: 18px;
    font-weight: 700;
	margin:0px 4px;
}

.pagination .page-item.active .page-link{
	color: #fff;
    background-color: #f56400;
	border: 2px solid #f56400;
}

/* New page APP overlay*/
#inAppOverlay {
    display: none; /* standaard verborgen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #faf8f0 0%, #faf8f0 50%, transparent 100%);
    z-index: 10000;
	color: #333;
    text-align: center;
    padding-top: 30%;
}

#inAppOverlay h2 {
    font-size: 28px;
    margin-bottom: 5px;
    color: #333;
    font-weight: 800;
}

#inAppOverlay p {
    font-size: 18px;
    padding: 0px 15px;
}

#inAppOverlay a {
    display: block;
    color: #ff6600;
}

/* FAQ */
.homepage-faq .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	min-height:400px;
	margin-bottom:50px;
}

.homepage-faq h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 30px;
}

.custom-accordion-button, .custom-accordion-button:focus{
    background-color: transparent;
    border: none;
    color: #ff6600;
    padding: 10px 0px 20px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ddd;
	outline:none;
	font-size: 18px;
    font-weight: 500;
    transition: background-color 0.3s ease;
	width:100%;
	text-align:left;
}

.accordion .collapsed{
	color: #333;
}

.accordion .all-link{
	color: #ff6600;
	display: flex;
    align-items: center;
	margin-top:15px;
}

.accordion .all-link span{
	margin-left:2px;
}

.accordion .all-link:hover{
	color: #333;
}

.accordion-button:not(.collapsed) {
    color: #ff6600;;
    background-color: transparent;
    box-shadow: none;
}

.accordion{
    --bs-accordion-border-width: 0px;
}

.accordion-button:focus {
    box-shadow: none;
}

.custom-accordion-button:hover {
    color: #f56400;
}


.accordion-body {
    padding: 0px 0px 25px;
    color: #333;
	font-size:17px;
}

#faqImage {
    height: 572px;
    object-fit: cover;
    width: 100%;
    border-radius: 48px;
    opacity: 0.85;
}

.mobile-footer-new-book{
	position: fixed;
    bottom: -100px;
    width: 100%;
    background: #ffffffcf;
    z-index: 10;
    padding: 15px 0px;
    border-top: 1px solid #ffdcc4;
	transition: bottom 0.4s ease-in-out;
}

.mobile-footer-new-book.is-visible {
    /* Breng de footer in beeld */
    bottom: 0;
}

.mobile-footer-new-book .button{
	margin:0px;
	width:100%;
	text-align:center;
	padding: 10px 5px;
}

/* HEADER */

.topbar-action{
	background:#ff6600;
	height:40px;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	display: flex;
    align-items: center;
}

.topbar-action p{
	margin:0px;
	color:#fff;
	font-weight:600;
	font-size:15px;
	display: flex;
    align-items: center;
    justify-content: center;
}

.topbar-action .material-symbols-outlined{
    margin-right: 8px;
    font-size: 20px;
}

.topbar-action b{
	margin: 0px 15px;
}

.navbar {
    margin-bottom: 40px;
    background-color: #faf8f0f5;
    color: white;
	padding: 20px 0px 10px;
	transition: top 0.4s ease, box-shadow 0.3s ease;
	top:40px;
}

/* De 'sticky' staat, als de banner uit beeld is */
.navbar.navbar-fixed {
  position: fixed;
  /* De 'top' wordt hieronder bepaald door de 'hidden' state */
}

/* De 'verborgen' staat voor desktop, als je naar beneden scrolt */
.navbar.navbar-fixed.navbar-hidden {
  top: -100px; /* Een waarde groter dan de hoogte van je navbar */
}

/* De 'zichtbare sticky' staat. Hier definiëren we de schaduw. */
.navbar.navbar-fixed:not(.navbar-hidden) {
    top: 0;
    box-shadow: 0 2.65546px 95px #0000001a;
}

.nav-item{
	margin-top:-4px;
}

.navbar-light .navbar-nav .nav-link  {
    color:#333;
	font-weight: 700;
	padding:0px 0px 0px 28px;
	font-size:17px;
}

.navbar-light .navbar-nav .nav-link:hover{
	color:#ff6600;
}

.navbar img{
    height: 39px;
	margin-top: -15px;
}

.navbar img.pl{
    height: 37px;
    margin-top: -13px;
}

.navbar .fi{
    border-radius:100%;
}

.navbar .dropdown-divider{
	border-top: 1px dashed #dedede;
}

.navbar .dropdown-item{
	font-weight:600;
}

.navbar .dropdown-item:focus, .navbar .dropdown-item:hover {
    color:#fe6500;
    background-color: transparent;
}

.navbar .dropdown-toggle::after{
	display:none;
}

.navbar .menu2 ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

.navbar .menu2 ul li{
	float:left;
	color: #333;
    font-weight: 700;
}

.navbar .menu2 ul li.item{
    padding: 0px 0px 0px 18px;
	max-width: 50px;
}

.navbar .menu2 ul li.flag {
    margin-top: 1px;
    padding: 0px 3px;
}

.navbar .menu2 ul li:hover{
	color:#ff6600;
}

.navbar .menu2 .button{
	font-size: 1rem;
    color: #fff;
    padding: 4px 15px;
    font-weight: 600;
    margin-left: 20px;
	border-width:1px;
	margin-top: -2px;
}

.navbar .menu2 .button:hover{
	border-width:1px !important;
}

.navbar .menu2 .fi{
	height:20px;
	width:20px;
}

.navbar .menu2 .material-symbols-outlined{
	font-size:32px;
}

.navbar .menu2 .cart_items {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #fe6500;
    height: 18px;
    width: 18px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 13px;
}

.navbar .menu2 .dropdown-menu{
    border: 0px;
    padding: 10px 5px;
    border-radius: 20px;
    background: #fff;
    top: 38px;
	z-index: 2000;
	box-shadow: 0px 5px 20px -7px rgb(0 0 0 / 17%);
}

.navbar-space{
	height:79px;
}

/* HOMEPAGE TOP */
.homepage-top{
	padding: 0px;
    height: 500px;
	padding-top: 75px;

}

.homepage-top h1{
	font-size: 54px;
    font-weight: 800;
    max-width: 655px;
	opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 0.15s; /* Iets later laten starten voor een subtiele vertraging */
}

.homepage-top h1.long-title{
	font-size: 49px;
}

.homepage-top p{
	font-size: 22px;
	font-weight:300;
    max-width: 570px;
	opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
    animation-delay: 0.3s; /* Kortere vertraging zodat het sneller na de h1 komt */
	margin-bottom:20px;
}

.homepage-top .button {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: 0.4s; /* Sneller na de p laten komen */
	display:block;
	width:100%;
	max-width:330px;
	text-align:center;
    padding: 12px 15px;
}

.homepage-top span.cta-text {
    opacity: 0;
    transform: translateY(20px);
    display: block;
    font-size: 14px;
    width: 100%;
    max-width: 330px;
    font-weight: 300;
    text-align: center;
    color: #333;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% auto;
    background-image: linear-gradient(
        110deg,
        #E65100, /* Een diep, donker oranje */
        #ff6600, /* Jouw primaire, levendige oranje */
        #FFAB40, /* Een zachte, goud-oranje (niet te geel) */
        #E65100  /* Eindigt met donker oranje voor een naadloze loop */
    );
    animation:
        fadeInUp 0.6s ease-out 0.5s forwards,
        moveGradient 6s ease-in-out infinite;
}

.homepage-top span.cta-text b {
	font-weight:500;
}

.homepage-top p.ref{
	background: #ffd7ba70;
    border-radius: 100px;
    padding: 10px 20px;
    margin-top: -45px;
    font-size: 15px;
    font-weight: 600;
    color: #ff6600;
}

.homepage-top img{
	width:100%;
	border-radius: 3px;
}

.homepage-top .examples {
    display:block;
	margin-bottom:20px;
	position:relative;
	border-radius: 3px;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	opacity: 0.82;
	transform: perspective(1000px) rotateY(-5deg);
}

.homepage-top .examples .border-right {
    position: absolute;
    right: -4px;
    top: 50%;
    height: 98%;
    width: 4px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.homepage-top .examples::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
    border-radius: 3px 0px 0px 3px;
}

.homepage-top .examples::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    width: 6px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.homepage-top .examples:hover {
	transform: none;
	box-shadow: -7px 7px 15px rgb(0 0 0 / 40%); !important;
	opacity: 1;
}

.homepage-top .slider1{
	margin-top:120px;
	-webkit-animation: topslider1 2s normal ease-out;
    animation: topslider1 2s normal ease-out;
	position:relative;
}

.homepage-top .slider2{
	margin-top:40px;
	-webkit-animation: topslider2 1.5s normal ease-out;
    animation: topslider2 1.5s normal ease-out;
	position:relative;
}


.homepage-top .slider3{
	margin-top:-35px;
	-webkit-animation: topslider3 1s normal ease-out;
    animation: topslider3 1s normal ease-out;
	position:relative;
}

/* HOMEPAGE How it works */
.homepage-howitworks .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	min-height:400px;
	margin-bottom:50px;
	position:relative;
}

.homepage-howitworks h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 0px;
}

.homepage-howitworks h3 {
    font-weight: 700;
    font-size: 26px;
	display: flex;
    align-items: center;
}

.homepage-howitworks .info-title{
	margin-bottom:20px;
	display:flex;
}

.homepage-howitworks span {
    background: #ff6600;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    border: 2px solid #f60;
    display: flex;
    width: 43px;
    height: 43px;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
	font-weight: 700;
    font-size: 26px;
	flex-shrink: 0;
}

.homepage-howitworks p {
    font-size: 18px;
    font-weight: 300;
}

.homepage-howitworks p b{
    font-weight: 700;
}

.homepage-howitworks img.step {
   max-height: 310px;
}

.homepage-howitworks img.step2{
	 transform: scaleX(-1);
}

/* HOMEPAGE Links */
.homepage-links{
}

.homepage-links h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 30px;
}

.homepage-links .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px 50px 20px;
	margin-bottom:50px;
}


.homepage-links .link-wrapper{
	background:#faf8f0;
	padding:25px 35px;
	margin-bottom:30px;
	border-radius:20px;
}


.homepage-links h3{
	font-weight: 700;
    font-size: 20px;
}

.homepage-links ul{
	margin:0px;
	padding:0px;
	list-style:none;
}

.homepage-links ul li{
	padding:2px 0px;
}

.homepage-links ul li a{
	color:#333333c4;
}

.homepage-links ul li a:hover{
	color:#f60;
}

/* HOMEPAGE examples */
.homepage-examples{
}

.homepage-examples .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px 50px 20px;
	margin-bottom:50px;
}

.homepage-examples h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}

.homepage-examples p{
	font-weight: 300;
    font-size: 19px;
	margin-bottom: 35px;
}

.homepage-examples h3{
	font-weight: 700;
    font-size: 26px;
	margin-bottom: 15px;
	margin-top:70px;
}

.homepage-examples h4{
	font-size: 20px;
    font-weight: 700;
	border-bottom: 1px dashed #00000026;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.homepage-examples h5{
	font-size: 16px;
    font-weight: 600;
    border-bottom: 1px dashed #00000026;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.homepage-examples hr{
	margin: 0px 0px 35px;
    border-top: 2px dashed #c5c5c56e;
    opacity: 1;
}

.homepage-examples ul{
	margin: 0px;
   padding: 0px;
   list-style: none;
}

.homepage-examples ul li{
	margin-bottom: 12px;
    line-height: 20px;
}

.homepage-examples ul li:last-of-type{
	margin-bottom: 0px;
}

.homepage-examples ul li a{
	color:#ff6600;
	font-weight:700;
	display: flex;
    align-items: center;
}

.homepage-examples ul li a:hover{
	color:#ff883a;
}

.homepage-examples ul li a span{
	margin-left:3px;
}

.homepage-examples .box-wrapper{
    border-radius: 30px;
    padding: 38px 0px;
    margin-bottom: 38px;
}

.homepage-examples .box-wrapper1{
	background: #ffd7ba42;
}

.homepage-examples .box-wrapper2{
    background: #d8e2dc38;
}

.homepage-examples .box-wrapper3{
    background: #fcd5ce36;
}

.homepage-examples .example .box{
    margin: 0 auto;
    padding: 12px;
    border-radius: 20px;
}

.homepage-examples .example .box-info{
    padding:25px;
}

.homepage-examples .example .box-link{
    padding: 15px 25px;
    margin-top: 10px;
}

.homepage-examples .example .box-link a:hover {
    color:#333;
}

.homepage-examples .example .box-link a {
    color: #ff6600;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.homepage-examples .example .box-link a span{
    margin-left:2px;
}

.homepage-examples .example .box1{
    background: #ffd7ba75;
}

.homepage-examples .example .box2{
    background: #d8e2dc99;
}

.homepage-examples .example .box3{
    background: #fcd5ce73;
}

.homepage-examples .example .box1 .userphoto{
	border: 3px solid #D6B18F;
	margin-bottom:8px;
}

.homepage-examples .example .box2 .userphoto{
	border: 3px solid #B4BEB8;
	margin-bottom:8px;
}

.homepage-examples .example .box3 .userphoto{
	border: 3px solid #DBB0AD;
	margin-bottom:8px;
}

.homepage-examples .example span.arrow{
    font-size: 55px;
    margin-top: 112px;
    margin-right: -40px;
    text-align: right;
    display: block;
    transform: rotateZ(130deg) scaleX(-1);
    color: #ff6600cc;
}

.homepage-examples .example img{
	width:100%;
	border-radius:15px;
	opacity:0.9;
}

.homepage-examples .example a.cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
}

.homepage-examples .example a.cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.homepage-examples .example a.cover .border-right {
    position: absolute;
    right: -7px;
    top: 50%;
    height: 98%;
    width: 7px;
    background: #fff;
    border-right: 2px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.homepage-examples .example a.cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 7px;
    width: 7px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.homepage-examples .example a.cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 14px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.homepage-examples .example a.cover:hover{
	opacity:1;
	transform: none;
}

.homepage-examples .item {
    border-radius: 15px;
	padding:8px;
	border: 0px solid #e0e0e0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	flex: 0 0 200px; /* Elk item neemt 200px in */
    margin-right: 25px;
    text-align: center;
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000000 120%);
}

/* Eerste element */
.homepage-examples .item:nth-child(8n+1) {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.homepage-examples .item:nth-child(8n+2) {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.homepage-examples .item:nth-child(8n+3) {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.homepage-examples .item:nth-child(8n+4) {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.homepage-examples .item:nth-child(8n+5) {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.homepage-examples .item:nth-child(8n+6) {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zevende element */
.homepage-examples .item:nth-child(8n+7) {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

/* Achtste element */
.homepage-examples .item:nth-child(8n+8) {
    background-color: #FEC5BB;
    border-color: #E0A499; /* Iets donkerder */
}

/* Negende element (als er meer dan 8 zijn) */
.homepage-examples .item:nth-child(8n+9) {
    background-color: #FEC89A;
    border-color: #D6A17C; /* Iets donkerder */
}

/* Tiende element (als er meer dan 9 zijn) */
.homepage-examples .item:nth-child(8n+10) {
    background-color: #E8E8E4;
    border-color: #C2C2BF; /* Iets donkerder */
}


.homepage-examples .item:hover {
	box-shadow: 0 2px 8px rgb(0 0 0 / 25%)
}

.homepage-examples .item img{
	border-radius:8px;
	width:100%;
	height:100%;
	max-height:250px;
	object-fit:cover;
	margin-bottom:10px;
	opacity:0.85;
	width: 100%;
    height: auto;
}

.homepage-examples .item a:hover{
	color:#333;
}

.homepage-examples .item:hover img{
	opacity:1;
}

.homepage-examples .item h5{
	font-size:14px;
	text-align:center;
	margin-bottom:0px;
	padding:2px 20px 5px
}

.homepage-examples .slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
    border-radius: 20px;
    background: #faf8f0;
}

.homepage-examples .slider-track {
    display: flex;
    transition: transform 0.5s ease;
    width: max-content;
}

/* HOMEPAGE FORM */
.homepage-form .wrapper {
	border-radius: 48px;
	padding:50px;
	overflow: hidden;
	min-height: 380px;
    background: #f8f0e2;
}

.homepage-form h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}

.homepage-form p.top{
	font-weight: 300;
    font-size: 19px;
	margin-bottom: -35px;
}

.homepage-form h4{
	font-weight: 700;
    font-size: 26px;
	padding-top: 4rem;
	clear:both;
}

.homepage-form h5{
	display: flex;
    align-items: center;
	margin-bottom: 15px;
    font-weight: 600;
}

.homepage-form hr{
	margin: 30px 0px;
    border-top: 1px dashed #ff6600;
}

.homepage-form .custom-radio-block {
    cursor: pointer;
    margin-top: 15px;
    position: relative;
    font-size: 16px;
    color: #555;
	width:100%;
}

.homepage-form .custom-radio-block input[type="radio"] {
    display: none;
}

.homepage-form .radio-content {
    border: 2px solid #e0e0e0;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    background-color: #fdfdfd;
    cursor: pointer;
	float:left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
}

.homepage-form .illustrationstyle {
    padding: 20px 20px 10px;
}

/* Eerste element */
.form-group.row .col-12.col-md-4:nth-child(8n+1) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+1) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+1) .radio-content {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.form-group.row .col-12.col-md-4:nth-child(8n+2) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+2) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+2) .radio-content {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.form-group.row .col-12.col-md-4:nth-child(8n+3) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+3) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+3) .radio-content {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.form-group.row .col-12.col-md-4:nth-child(8n+4) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+4) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+4) .radio-content{
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.form-group.row .col-12.col-md-4:nth-child(8n+5) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+5) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+5) .radio-content {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.form-group.row .col-12.col-md-4:nth-child(8n+6) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+6) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+6) .radio-content  {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zevende element */
.form-group.row .col-12.col-md-4:nth-child(8n+7) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+7) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+7) .radio-content {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

/* Achtste element */
.form-group.row .col-12.col-md-4:nth-child(8n+8) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+8) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+8) .radio-content {
    background-color: #FEC5BB;
    border-color: #E0A499; /* Iets donkerder */
}

/* Negende element (als er meer dan 8 zijn) */
.form-group.row .col-12.col-md-4:nth-child(8n+9) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+9) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+9) .radio-content {
    background-color: #FEC89A;
    border-color: #D6A17C; /* Iets donkerder */
}

/* Tiende element (als er meer dan 9 zijn) */
.form-group.row .col-12.col-md-4:nth-child(8n+10) .radio-content,
.form-group.row .col-6.col-md-4.col-lg-3:nth-child(8n+10) .radio-content,
.form-group.row .col-6.col-lg-3:nth-child(8n+10) .radio-content {
    background-color: #E8E8E4;
    border-color: #C2C2BF; /* Iets donkerder */
}

.homepage-form .radio-content img {
    max-width: 90px;
    height: auto;
    margin: 0 auto 10px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)) sepia(10%) saturate(90%) brightness(1.05);
	transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1);
}

.homepage-form .radio-content:hover img {
    transform: scale(1.08);
	opacity:1;
}

.homepage-form .illustrationstyle img{
    filter: none;
    max-width: 100%;
    border-radius: 19px;
	margin-bottom: 10px;
}

.homepage-form .illustrationstyle:hover img {
    transform: scale(1.06) !important;
    opacity: 1;
    filter: none !important;
}


.homepage-form .big img {
    max-width: 110px;
    margin-bottom: 15px;
	opacity:0.9;
}

.homepage-form .big:hover img {
	opacity:0.9;
}

.homepage-form .radio-content span {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.homepage-form .radio-content span.font{
	font-size: 24px;
}

.homepage-form .radio-content span.font2{
	font-size: 22px;
    font-weight: 500;
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content {
    border-color: #f60 !important;
    box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
	background:#ff66000a;
	background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content img,
.homepage-form .radio-content:hover img,
.homepage-form .illustrationstyl img
 {
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))  sepia(10%) saturate(90%) brightness(1.05);
    transform: scale(1.09);
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .illustrationstyle img{
    transform: scale(1.09);
	opacity:1;
	filter: none;
}

.homepage-form .radio-content:hover {
    border-color: #f60 !important;
    box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
	background:#ff66000a;
	background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.homepage-form .radio-content:hover span{
	color: #ff6600;
}

.homepage-form .custom-radio-block input[type="radio"]:checked + .radio-content span{
    color: #ff6600;
}

.homepage-form .style-preview{
    background: #fcf7f1;
    padding: 8px;
    border: 2px solid #fdd6b9;
    text-align: center;
    border-radius: 20px;
    margin-top: -40px;
    padding-top: 35px;
}

.homepage-form .style-preview a{
   font-size: 14px;
   font-weight:500;
}

.homepage-form .style-preview:hover{
	background: #fff;
}

.homepage-form .style-preview:hover a{
	color: #ff6600;
}

.homepage-form .modal-body img{
    width: 100%;
    border-radius: 20px;
    margin-bottom: 20px;
}

.homepage-form .modal-body img.last{
    margin-bottom: 0px;
}

.homepage-form .modal-body .font-title{
    position: absolute;
    top: 40px;
    font-size: 54px;
	display: flex;
	width: 100%;
	padding: 0px 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
	font-weight:700;
	line-height: 120%;
    text-shadow: -1px 0 #00000096, 0 1px #000000e3, 1px 0 #00000096, 0 -1px #00000096, 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.homepage-form .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
}

.homepage-form .inputwrapper label{
	font-weight:600;
}

.homepage-form .inputwrapper label.form-check-label {
    font-weight: 300;
    margin-bottom: 5px;
	cursor:pointer;
}

.homepage-form .inputwrapper label.form-check-label b {
    font-weight: 600;
}

.homepage-form .button{
	margin-top:20px;
}

.homepage-form .button .spinner-border{
	color: #fff;
    margin: 0px;
    height: 21px;
    width: 21px;
}

.homepage-form .button.remove-character{
	font-size: 12px;
    padding: 3px 10px;
    margin: 0px 0px 0px 10px;
}

.homepage-form .final-step .inputwrapper2 .button{
	margin-top:12px;
}

.homepage-form #add-character .material-symbols-outlined {
    margin-right: 3px;
	vertical-align: sub;
}

.homepage-form .character-type-selector .btn{
	color: #f60;
	border: 2px solid #f60;
	border-radius: 100px;
  margin-right: 2px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
}

.homepage-form .character-type-selector .btn-check:checked+.btn{
	background-color: #f60;

  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
	color: #fff;
}

.homepage-form .notification{
	background: #fce9d7;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
	margin:-5px 0px 15px;
    color: #ff6600;
	font-weight: 600;
	display: flex;
}

.homepage-form .notification2{
	display: block;
}

.homepage-form .notification-error{
	color: #fff;
    background: #dc3545;
}

.homepage-form .notification .material-symbols-outlined {
    margin-right: 6px;
    margin-top: -2px;
    font-size: 24px;
}

.homepage-form .notification a{
    text-decoration: underline;
    color: #333333d1;
	 white-space: nowrap;
}

.homepage-form .notification a .material-symbols-outlined{
    font-size: 16px;
	margin-right: 0px;
    margin-top: 0px;
	margin-left: 2px;
	vertical-align: sub;
}

.homepage-form .upload-box {
	border: 2px dashed #aaa;
	border-radius: 20px;
	height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.3s, color 0.3s;
	color:#aaa;
}

.homepage-form .upload-box:hover {
	color:#ff6600;
}

.homepage-form .upload-box:hover {
	border-color: #ff6600;
}

.homepage-form .upload-box .material-symbols-outlined {
	font-size: 48px;
	margin-bottom: 8px;
}

.homepage-form .upload-box p {
	margin: 0;
	font-size: 16px;
	transition: color 0.3s;
	text-align: center;
	color:#aaa;
}

.homepage-form .upload-box:hover  p {
	color:#ff6600;
}

.homepage-form .croppedImagePreview{
	display: block;
    margin: 10px 0px 0px;
    border-radius: 20px;
	max-width: 250px;
	width: 100%;
	border: 2px solid #fdd6b9;
}

.cropper-container, #imageToCrop{
	max-height:60vh !important;
}

.homepage-form  .spinner-border{
	color:#ff6600;
	height:50px;
	width:50px;
	margin-bottom: 10px;
}

.homepage-form .generated-image-option{
    width: 100%;
	cursor:pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	border: 2px solid #fdd8bb;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
}

.homepage-form .generated-image-option img{
	width:100%;
	opacity: 0.9;
    transition: transform 400ms cubic-bezier(0.2, 0.6, 0.6, 1);
}

.homepage-form .generated-image-option:hover img, .homepage-form .generated-image-option:has(input[type="radio"]:checked) img{
    transform: scale(1.06);
}

.homepage-form .generated-image-option:has(input[type="radio"]:checked), .homepage-form .generated-image-option:hover{
	border: 2px solid #f60;
	box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
}

.homepage-form  .previewContainer .position-relative .delete-crop-btn {
    position: absolute;
    top: 0px; /* Iets boven de rand */
    right: 0px; /* Iets buiten de rand */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparante achtergrond */
    border-radius: 50%; /* Rond maken */
    padding: 2px;
    line-height: 1; /* Zorgt dat icoon goed past */
    cursor: pointer;
    text-decoration: none; /* Geen onderlijning */
    color: #dc3545; /* Rode kleur voor verwijderen */
    border: 1px solid #dc3545;
}

.homepage-form  .previewContainer .position-relative .delete-crop-btn:hover {
    background-color: #dc3545;
    color: white;
}

.homepage-form  .previewContainer .position-relative .delete-crop-btn .material-symbols-outlined {
    font-size: 18px; /* Grootte van het icoon */
    vertical-align: middle; /* Goed uitlijnen */
}

.homepage-form .final-step .inputwrapper{
	border-radius: 30px;
}

.homepage-form .final-step .inputwrapper2{
	background-color: #fafbf7;
	border: 2px solid #d8e2dc;
}

.homepage-form .final-step .inputwrapper2 h4{
	font-size:22px;
}

.homepage-form .final-step h5 {
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-weight: 700;
	color: #ff6600;
}

.homepage-form .final-step .magic-icon .material-symbols-outlined{
	margin-right: 19px;
    font-size: 24px;
    padding: 8px;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #fdd6b9;
    color: #ff6600;
	max-height: 44px;
}

.homepage-form .final-step #narrative-summary-text {
    line-height: 1.7;
	margin:0px;
}

.homepage-form .final-step #narrative-summary-text b{
    font-weight:700;
}

.homepage-form .final-step #toggle-details-link {
    color: #ff6600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
    font-weight: 600;
}

.homepage-form .final-step #toggle-details-link:hover {
    color: #e65c00;
    text-decoration: underline;
}

.homepage-form .final-step .summary-list {
    padding-left: 0;
    margin-bottom: 20px;
}

.homepage-form .final-step .summary-list hr{
   border:0px;
   margin: 20px 0px;
}

.homepage-form .final-step .summary-item {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #fdd3b5;
}

.homepage-form .final-step .summary-item-no-border{
	border-bottom:0px;
	margin: 0px;
    padding: 0px;
}

.homepage-form .final-step .summary-item strong {
    display: inline-block;
	min-width: 200px;
}

.homepage-form .final-step #summary-image{
	width: 150px;
    border-radius: 10px;
    border: 2px #fdd6b9 solid;
    margin-left: 200px;
    margin-top: -25px;
}

.homepage-form .final-step #summary-image-container {
    line-height: 1;
}

.homepage-form .final-step #editChoicesBtn {
    font-size: 0.95rem;
    padding: 8px 15px;
	width: 100%;
}

.homepage-form .final-step .usp li{
    display: flex;
    margin-bottom: 9px;
    font-weight: 600;
    padding-bottom: 9px;
    border-bottom: 1px dashed #dcdcdc;
}

.homepage-form .final-step .process-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.homepage-form .final-step .process-item .process-item-text {
    flex: 1;
}

.homepage-form .final-step .process-item .process-item-text b {
    font-weight: bold;
	display: block;
}

.homepage-form .final-step .product-feature-list li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}

.homepage-form .final-step .product-feature-list .feature-icon {
    margin-right: 19px;
    font-size: 24px;
    padding: 8px;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #fdd6b9;
    color: #ff6600;
}

.homepage-form .final-step .price-cta-wrapper .price-display {
	font-size: 1.8rem;
    font-weight: 800;
    color: #20a165;
    line-height: 1.1;
}

.homepage-form .final-step .price-cta-wrapper .price-display-discount{
	font-size: 14px;
    margin-bottom: 15px;
    font-style: italic;
}

.homepage-form .final-step .disclaimer{
	font-size:14px;
	font-weight:300;
}

.homepage-form .final-step .disclaimer a{
	color:#ff6600;
}

.homepage-form .final-step .disclaimer a:hover{
	text-decoration:underline;
}

.homepage-form .payment-wrapper span{
	display: block;
    font-size: 12px;
    font-weight: 300;
	margin: 3px 0px 2px;
}

.homepage-form .payment-wrapper img{
	width: 28px;
    margin-right: 10px;
}

/* REVIEWS */
.homepage-reviews .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	min-height:400px;
	margin-bottom:50px;
}

.homepage-reviews h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 20px;
}

.homepage-reviews h3{
	font-weight: 800;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.homepage-reviews .grid {
    column-count: 4;
    column-gap: 1rem;
}

.homepage-reviews .grid-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
}

.homepage-reviews .card{
	border-radius:20px;
	background: #f5f8f6;
    border: 0px;
	padding:10px;
}

.homepage-reviews .card2{
	background: #faf8f0;
}

.homepage-reviews .card3{

}

.homepage-reviews p{
	font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.homepage-reviews p.italic{
	font-style: italic;
	white-space:normal;
}

.homepage-reviews .card-title {
    font-size: 16px;
	font-weight: 600;
	margin-bottom:0px;
	color: #ff6600;
}

.homepage-reviews ul{
	list-style-type: none;
	margin:5px 0px;
	padding:0px;
}

.homepage-reviews ul li{
	margin-bottom:22px;
	position: relative;
	padding-left: 35px;
	font-size:17px;
	line-height:30px;
}

.homepage-reviews ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px; /* Breedte van je afbeelding */
  height: 20px; /* Hoogte van je afbeelding */
  background-image: url('/assets/images/list-icon.png');
  background-size: contain; /* Zorgt dat de afbeelding netjes past */
  background-repeat: no-repeat;
}

.homepage-reviews .item .card {
	background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%);
	background-color: #e2e9e5;
}

/* Eerste element */
.homepage-reviews .item:nth-child(10n+1) .card {
    background-color: #FFD7BA;
}

/* Tweede element */
.homepage-reviews .item:nth-child(10n+2) .card {
    background-color: #D8E2DC;
}

/* Derde element */
.homepage-reviews .item:nth-child(10n+3) .card {
    background-color: #FCD5CE;
}

/* Vierde element */
.homepage-reviews .item:nth-child(10n+4) .card {
    background-color: #FAE1DD;
}

/* Vijfde element */
.homepage-reviews .item:nth-child(10n+5) .card {
    background-color: #F8EDEB;
}

/* Zesde element */
.homepage-reviews .item:nth-child(10n+6) .card {
    background-color: #e2e9e5;
}

/* Zevende element */
.homepage-reviews .item:nth-child(10n+7) .card {
    background-color: #ECE4DB;
}

/* Achtste element */
.homepage-reviews .item:nth-child(10n+8) .card {
    background-color: #FEC5BB;
}

/* Negende element */
.homepage-reviews .item:nth-child(10n+9) .card {
    background-color: #FEC89A;
}

/* Tiende element */
.homepage-reviews .item:nth-child(10n+10) .card {
    background-color: #E8E8E4;
}

.homepage-reviews .item .hardcover {
	display: block;
    position: relative;
	border-radius: 10px;
	box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
	opacity:0.95;
}

.homepage-reviews .item .hardcover video{
	width: 100%;
    border-radius: 10px;
	margin-bottom: -8px;
}

.homepage-reviews .item .hardcover img{
	width:100%;
	border-radius: 10px;
	opacity:1;
}

.homepage-reviews .item .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
	margin:22px 22px 25px;
}

.homepage-reviews .item .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.homepage-reviews .item .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.homepage-reviews .item .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.homepage-reviews .item .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.homepage-reviews .item:hover .cover{
	opacity:1;
	transform: none;
}

.homepage-reviews .item .material-symbols-outlined{
	font-size:25px;
	color:#ff6600;
}

.homepage-reviews .item .fill{
	font-variation-settings:
	'FILL' 100,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.homepage-reviews .item hr{
	max-width:25px;
	border-top:1px solid #0000001f;
	opacity:1;
	margin:14px 0px
}

/* booklook */
.booklook .wrapper{
	background:#d8e2dc38;
	border-radius: 48px;
	padding:50px 30px;
	margin-bottom:50px;
}

.booklook h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom: 5px;
}

.booklook h3{
	font-size: 18px;
    font-weight: 700;
	margin-bottom: 15px;
	color: #ff6600;
}

.booklook p{
	font-weight: 300;
    font-size: 19px;
	margin-bottom: 25px;
}

.booklook .wrapper .box{
	background: #ffffff9c;
    padding: 30px 30px;
    border-radius: 20px;
}

.booklook ul.usp{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.booklook ul.usp li{
    display: inline-block;
    font-style: italic;
	margin: 0px 0px 12px;
    padding-bottom: 12px;
	font-weight:300;
	border-bottom: 1px dashed #fe660040;
}

.booklook ul.usp li strong{
    font-style: normal;
	font-weight:500;
}

.booklook ul.usp li span.material-symbols-outlined{
	color:#ff6600;
	vertical-align: sub;
}

.booklook .coverwrapper {
    padding-right: 35px;
    padding-bottom: 5px;
    max-width: 260px;
	margin: 0 auto;
}

.booklook .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.85;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 240px;
    margin: 5px 0px 20px;
}

.booklook .cover .booktitle{
	text-align: center;
    position: absolute;
    right: 0;
    top: 30px;
    max-width: 215px;
    padding: 0px 15px;
    font-size: 18px;
    color: #512000;
    font-weight: 700;
    text-shadow: 1px 1px #fff;
}

.booklook .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.booklook .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 15%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.booklook .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.booklook .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.booklook .wrapper:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.booklook .cover-border-right {
    position: absolute;
    top: 0;
	right: -12px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Breedte van de kolom waar de lijn in komt */
}

.booklook .cover-border-right::before {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px dashed #000; /* Verticale gestreepte lijn */
    left: 50%; /* Center de lijn binnen het element */
    transform: translateX(-50%);
}

.booklook .cover-border-right span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    transform: rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    font-weight: 700;
    right: -15px;
}

.booklook .cover-border-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px; /* Hoogte van de balk waar de lijn in komt */
}

.booklook .cover-border-bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    border-top: 2px dashed #000; /* Horizontale gestreepte lijn */
    top: 50%; /* Center de lijn binnen het element */
    transform: translateY(-50%);
}

.booklook .cover-border-bottom span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    font-weight: 700;
    top: 15px;
}

/* USP */
.usp .wrapper {
	background:#f8f0e2;
	border-radius: 48px;
	padding:50px 30px;
	margin-bottom:50px;
}

.usp h2{
	font-size:36px;
	font-weight:800;
	margin-bottom:35px;
}

.usp .usp-box{
	padding:35px 30px 10px;
	border-radius:30px;
	background-color: #faf8f0;
}

.usp .button{
	margin-top:0px;
	margin-bottom:0px;
}

.usp p{
	font-size:18px;
	display: flex;
	line-height: 24px;
    margin-bottom: 25px;
}

.usp b {
    display: contents;
}

.usp span{
	margin-right:10px;
	color:#20a165;
}

/* PAYMENT */
.payment-page {
	margin-top:50px;
}

.payment-page h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.payment-page .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px 30px;
	margin-bottom:50px;
}

.payment-page #loadingMessage{
	clear:both;
}

.payment-page #loadingMessage h4{
	font-weight:700;
}


.payment-page p{
	max-width: 800px;
	margin: 0 auto;
	font-size:18px;
}

.payment-page .button{
	 margin: 20px auto 0px;
}

.payment-page .spinner-border{
    border-color: #ff6600;
    border-right-color: transparent;
    width: 50px;
    height: 50px;
    border-width: 6px;
	margin: 45px auto 10px;
}

.payment-page .progress{
	border-radius: 50px;
	background-color: #ffd9bf;
	height: 25px;
	margin-bottom: 20px;
}

.payment-page .progress-bar {
    background-color: #ff6600;
}

.payment-page #progressText{
	font-size: 20px;
    font-weight: 600;
}

.payment-page h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.payment-page .referral-header h2{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	text-align: center;
}

.payment-page .referral-header p{
	font-size: 20px;
    font-weight: 300;
    max-width: 100%;
    margin-bottom: 1rem;
	text-align: center;
}

.payment-page .box{
    background:#ffd7ba54;
	border-radius: 30px;
    padding: 38px 20px;
}

.payment-page .box span.material-symbols-outlined{
    background: #ffd7ba;
    padding: 20px;
    border-radius: 100%;
    margin-bottom: 20px;
	color: #000000a3;
}

.payment-page .box h3{
    font-weight:700;
	font-size: 23px;
}

.payment-page .box2{
    background:#d8e2dc70;
}

.payment-page .box2 span.material-symbols-outlined{
   background:#d8e2dc;
}

.payment-page .box3{
    background:#fcd5ce5c;
}

.payment-page .box3 span.material-symbols-outlined{
   background:#fcd5ce;
}


/* BOOKS */
.books {
	margin-top:50px;
}

.books h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.books .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.books .wrapper2 {
    background: #f8f0e2;
	padding: 25px 50px;
    margin-bottom: 20px;
}

.books .notification{
	display: flex;
    color: #ff6600;
    font-weight: 600;
}

.books .notification span{
	margin-right: 8px;
    margin-top: -4px;
    font-size: 30px;
}

.books .new-item {
	margin-bottom: 25px;
    border-radius: 20px;
    padding: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    height: calc(100% - 25px);
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px dashed #fbcfad;
	min-height:400px;
}

.books .new-item:hover {
    border: 3px dashed #ff6600;
}

.books .new-item p{
	color: #ff6600;
    font-weight: 700;
    font-size: 20px;
	margin:5px 0px 0px;
}

.books .new-item .material-symbols-outlined{
	color: #ff6600;
    font-size: 44px;
	transition: font-size 0.3s ease;
}

.books .new-item:hover .material-symbols-outlined{
    font-size: 54px;
}

.books .item {
	margin-bottom: 25px;
    border-radius: 20px;
	padding:15px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background-color: #faf8f0;
}

.books .item .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 240px;
    margin: 5px auto 20px;
}

.books .item .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.books .item .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.books .item .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.books .item .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.books .item:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.books .item .button{
	font-size: 16px;
    padding: 8px 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    box-shadow: none;
    display: flex;
    justify-content: center;
	align-items: center;
}

.books .item .button2{
	font-weight:600;
	 padding: 7px 20px;
	 font-size:15px;
}


.books .item .button span{
	font-size:16px;
	margin-right:4px;
	margin-top:-1px;
}

.books .item h5 {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    height: 45px;
}

.books .item .info {
    margin-bottom: 8px;
    border-radius: 100px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 12px 20px;
    background: #4c9bbe;
    display: inline-block;
    color: #fff;
	font-weight:600;
}

/* BOOK EDIT */
.book-edit {
	margin-top:50px;
}

.book-edit .top-title{
	color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.book-edit h1{
	font-size: 38px;
    font-weight: 700;
    margin-bottom: 25px;
}

.book-edit h3{
	 font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.book-edit h5{
	font-size: 17px;
    font-weight: 600;
}

.book-edit hr{
	margin: 40px 0px;
    border-top: 2px dashed #eee;
	opacity: 1;
}

.book-edit .custom-radio-block{
	background:#faf8f0;
    padding: 10px;
    padding: 8px 18px;
    border-radius: 20px;
	border: 2px solid #fce9d7;
}

.book-edit .custom-radio-block input{
	display:none;
}

.book-edit span.font{
	font-size: 24px;
    font-weight: 700;
	cursor:pointer;
}

.book-edit .custom-radio-block:has(input[type="radio"]:checked) {
	border-color:#ff6600;
	background: #fcf7f1;
}

.book-edit .custom-radio-block input[type="radio"]:checked + span.font{
	color:#ff6600;
}

.book-edit a.edit-button{
	width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 10px;
	display: flex;
    justify-content: center;
    align-items: center;
}

.book-edit a.edit-button .material-symbols-outlined{
	margin-right:4px;
	font-size:18px;
}


.book-edit .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	margin-bottom:50px;
}

.book-edit .wrapper .edit-button-box{
	background: #ffffffc9;
}

.book-edit img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
	border: 2px solid #fdd6b9;
	    margin-bottom: 5px;
}

.book-edit .page-controls{
    margin-top:-10px;
}

.book-edit .page-controls span {
    font-size: 14px;
    font-weight: 600;
}

.book-edit .page-controls a {
    text-decoration: none;
    color: #f60;
    display: inline-block;
    padding: 2px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.book-edit .page-controls a:hover {

}

.book-edit .page-controls a .material-symbols-outlined {
    vertical-align: middle;
	font-size: 20px;
}

.book-edit .page-controls a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.editImageModal .notify{
	background:#f8f0e2;
	display: flex;
}

.editImageModal .notify p{
	margin:0px;
	color:#333;
}

.editImageModal .notify i{
	color: #ff6600;
    font-style: normal;
}

.editImageModal .notify span {
    margin-right: 10px;
    font-size: 24px;
	   color: #ff6600;
}

.editImageModal .btn-outline-primary{
    border: #ff6600 2px solid;
    color: #ff6600;
    border-radius:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}

.editImageModal .btn-outline-primary:hover{
  background: #ffffff;
  background-image: linear-gradient(-180deg, #fd813000, #ff66002e);
  border-color: #ff6600;
  color: #ff6600;
}

.editImageModal .btn-outline-primary .material-symbols-outlined{
    font-size:21px;
    margin-right: 5px;
}

.editImageModal .btn-check:checked+.btn{
  background: #fe6c0b;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
  border-color: #ff6600;
}

.editImageModal .btn-check:checked+.btn:hover{
  color: #fff;
}

.editImageModal #modalImagePreview{
  border-radius: 20px;
}

.editImageModal p.modalImagePreview-text{
  font-size:12px;
  font-style:italic;
  text-align: center;
}

/* BOOK */
.book {
	margin-top:50px;
}

.book .top-title{
	color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.book h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.book h2 {
    font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom:10px;
}

.book h4 {
    font-weight: 700;
    font-size: 24px;
	margin-bottom: 18px;
}

.book p.top {
    font-weight: 300;
    font-size: 19px;
    margin-bottom: 25px;
}

.book p.top strong{
    font-weight:600;
}

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

.book ul li{
	margin: 0px 0px 6px;
    padding-bottom: 6px;
    display: flex;
    border-bottom: 1px dashed #fe660040;
}

.book ul.info li:last-of-type{
    margin-bottom: 0px;
	border:0px;
	padding:0px;
}

.book ul li span.material-symbols-outlined{
   color: #20a165;
    font-weight: 800;
    vertical-align: bottom;
}

.book ul li .first {
    width: 100%;
    max-width: 30%;
	min-width: 120px;
    flex-shrink: 0;
    font-weight: bold;
}

.book .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:50px;
	margin-bottom:50px;
}

.book .wrapper2{
	padding:25px 50px;
	margin-top:-30px;
}

.book .wrapper3 {
    background: #f8f0e2;
}

.book .wrapper4{
	background: #f8f0e2;
	padding:25px 15px;
}

.book .wrapper5{
	padding:25px 50px;
	margin-bottom:20px;
	background: #f8f0e2;
}

.book .wrapper .box{
	padding: 20px;
    border-radius: 20px;
	margin-bottom:20px;
	background:#faf8f0;
}

.book .options .notification{
	display: flex;
    color: #ff6600;
    font-weight: 600;
}

.book .options .notification span{
	margin-right: 8px;
    margin-top: -4px;
    font-size: 30px;
}

.book .options .button{
	font-size: 15px;
    padding: 10px 22px;
    text-align: center;
	box-shadow:none;
	font-weight: 600;
	border-width: 1px;
	display: inline-flex;
	justify-content: center;
}

.book .options .button span{
	margin-right: 4px;
    font-size: 16px;
    margin-top: 3px;
}

.book .options .used-photo{
	width: 100%;
    border-radius: 15px;
    object-fit: cover;
	opacity: 0.9;
    margin-bottom: 8px;
	border: 3px solid #fdd6b9;
}

.book .options span.arrow {
    font-size: 70px;
    color: #ff6600cc;
    position: absolute;
    left: 40px;
    height: 110px;
    transform: rotateZ(155deg) scaleX(-1);
}

.book .options .button:hover, .book .options .button:focus{
	border-width: 1px  !important;
}

.book .delete{
    display: inline-block;
}

.book .pdf {
    height: 870px;
    width: 100%;
}

.book .toolbar{
	background-image: none !important;
    background: #33333326;
    border-radius: 20px;
    padding: 10px;
}

.book .toolbar a, .book .toolbar .cmd {
    color: #333;
}

.book .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
	margin-bottom:20px;
}

.book .inputwrapper h3{
	font-size: 20px;
    font-weight: 700;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #fbcfad;
}

.book .inputwrapper h5 {
    font-size: 18px;
    font-weight: 700;
    color: #ff6600;
}

.book .inputwrapper hr{
    opacity: 1;
    border-top: 1px dashed #fbcfad;
	margin: 10px 0 20px;
}

.book .inputwrapper label{
	font-weight:600;
}

.book .inputwrapper .warning{
    color: #333;
    background: #fdd6b9;
    padding:15px;
    border-radius: 20px;
    margin-bottom: 15px;
	margin-top:-5px;
    font-size: 14px;
    font-weight: 600;
}

.book .inputwrapper ul.usp li{
	font-size: 15px;
    display: inline-block;
    font-style: italic;
	margin: 0px 0px 8px;
    padding-bottom: 8px;
	font-weight:300;
}

.book .inputwrapper ul.usp li strong{
    font-style: normal;
	font-weight:500;
}

.book .inputwrapper ul.usp li span.material-symbols-outlined{
	font-weight: 300;
    margin-right: 5px;
    font-size: 19px;
    line-height: 24px;
}

.book .inputwrapper .coverwrapper {
    padding-right: 35px;
    padding-bottom: 5px;
    max-width: 260px;
	margin: 0 auto;
}

.book .inputwrapper .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 240px;
    margin: 5px 0px 20px;
}

.book .inputwrapper .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.book .inputwrapper .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.book .inputwrapper .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.book .inputwrapper .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.book .inputwrapper:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.book .inputwrapper .cover-border-right {
    position: absolute;
    top: 0;
	right: -12px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Breedte van de kolom waar de lijn in komt */
}

.book .inputwrapper .cover-border-right::before {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px dashed #000; /* Verticale gestreepte lijn */
    left: 50%; /* Center de lijn binnen het element */
    transform: translateX(-50%);
}

.book .inputwrapper .cover-border-right span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    transform: rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    font-weight: 700;
    right: -15px;
}

.book .inputwrapper .cover-border-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px; /* Hoogte van de balk waar de lijn in komt */
}

.book .inputwrapper .cover-border-bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    border-top: 2px dashed #000; /* Horizontale gestreepte lijn */
    top: 50%; /* Center de lijn binnen het element */
    transform: translateY(-50%);
}

.book .inputwrapper .cover-border-bottom span {
    position: relative;
    padding: 2px 5px;
    font-size: 18px;
    z-index: 1;
    font-weight: 700;
    top: 15px;
}

.book .inputwrapper .shipping-option{
	background: #fff;
    border-radius: 20px;
    border: 2px solid #fce9d7;
    padding: 15px 45px;
    margin: 5px 0px 10px;
}

.book .inputwrapper .shipping-option label{
	display: block;
    text-transform: lowercase;
    font-weight: 500;
	margin-left: 10px;
	cursor:pointer;
}

.book .inputwrapper .shipping-option label span.time{
	display: block;
    font-weight: 300;
}

.book .inputwrapper .shipping-option label::first-letter, .book .inputwrapper .shipping-option label span.time::first-letter{
    text-transform: uppercase;
}

.book .inputwrapper #showMoreOptions{
	color: #ff6600;
    display: flex;
}

.book .inputwrapper .controlebook label{
	cursor:pointer;
}

.book .inputwrapper .controlebook a{
	color: #ff6600;
}

.book .inputwrapper .controlebook {
    padding-left: 30px;
}

.book .inputwrapper .controlebook .form-check-input[type=checkbox]{
    margin-left: -30px;
	border: 1px #bbb solid;
}

.modal-controle ul{
	margin:0px;
	padding:0px;
	list-style:none;
}

.modal-controle ul li{
	display:flex;
	background: #fce9d7;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.modal-controle ul li span{
    margin-right: 12px;
    color: #ff6600;
    font-size: 21px;
    margin-top: 2px;
}

.book .form-footer{
	margin-top: 20px;
}

.book .form-footer .disclaimer{
	font-size:14px;
	font-weight:300;
}

.book .form-footer .disclaimer a{
	color:#ff6600;
}

.book .form-footer .disclaimer a:hover{
	text-decoration:underline;
}

.book .form-footer hr {
    margin: 25px 0px 20px;
    border-top: 1px dashed #ff6600;
}

.book .form-footer ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
	display: flex;
    align-items: center;
    justify-content: space-around;
}

.book .form-footer ul li {
    float: left;
    display: inline-block;
    margin-right: 25px;
    font-size: 15px;
    font-weight: 600;
	margin-bottom: 10px;
	border:0px;
}

.book .price-wrapper{
    max-width: max-content;
    background-image: linear-gradient(-180deg, #ffffff, #d5d5d526);
    border: 1px solid #cfcfcf;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    border-radius: 100px;
	display: flex;
    align-items: center;
}

.book .price-wrapper .button{
    margin:0px;
}

.book .price-wrapper span.original{
	text-decoration: line-through;
    color: #999;
	font-weight: 600;
    margin-right: 7px;
    font-size: 16px;
    margin-left: 20px;
}

.book .price-wrapper span.final-price{
	font-weight: 800;
    font-size: 21px;
    margin-right: 15px;
    color: #20a165;
}


.book .ebook-discount-explanation{
	font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
}

.book .payment-wrapper{
	display: inline-block;
	vertical-align: middle;
	 float: right;
    text-align: right;
}

.book .payment-wrapper span{
	display: block;
    font-size: 12px;
    font-weight: 300;
	margin: 3px 0px 2px;
}

.book .payment-wrapper img{
	width: 28px;
    margin-right: 10px;
}

.book #priceOriginal{
	text-decoration: line-through;
}

.book #priceDiscounted{
	color: #20a165;
    font-weight: 800;
    font-size: 32px;
    margin: 0px 8px 0px 5px;
}

.book #priceSale{
	background: #f56400;
    padding: 2px 11px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    position: absolute;
    margin-top: 14px;
	background-image: linear-gradient(-180deg, #ff893b, #ff6600);
}

.book .shipping{
	margin-bottom:0px;
	font-weight: 300;
    font-size: 15px;
}

.book .referral-code .form-control {
	margin-bottom:0px;
}

.book .referral-code .button{
	font-size: 14px;
    padding: 10px 20px;
    height: 49px;
    margin-top: 5px;
}

.book .referral-code a{
	font-weight: 300;
    font-size: 15px;
	color: #ff6600;
}

.book .referral-code a:hover{
	color: #333;
}

/* CART */
.cart {
	margin:50px 0px;
}

.cart h1 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.cart h2 {
    font-weight: 800;
    color: #ff6600;
    font-size: 34px;
	margin-bottom:10px;
}

.cart h3 {
    font-weight: 800;
    font-size: 28px;
	margin-bottom:10px;
}

.cart .wrapper {
	background:#fff;
	border-radius: 30px;
	padding:30px;
	margin-bottom:50px;
}

.cart .wrapper3 {
    background: #f8f0e2;
}

.cart .empty{
	padding:50px 0px 30px;
}

.cart .empty .material-symbols-outlined{
	font-size: 70px;
    border: 4px solid #fdd6b9;
    color: #ff6600;
    border-radius: 100px;
    padding: 25px;
    font-weight: 600;
    margin: 0px auto 35px;
    background: #fcf7f1;
    max-width: 128px;
}

.cart .empty h2{
	color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.cart .empty .button{
	padding: 10px 25px;
    font-size: 16px;
}

.cart .summary h3 {
    font-weight: 700;
    font-size: 24px;
	margin-bottom:8px;
}

.cart .summary p {
   margin:0px;
   font-size:14px;
   font-weight:300;
}

.cart .summary hr {
   margin:15px 0px;
   border-top: 1px dashed #fbcfad;
   opacity:1;
}

.cart .summary .button {
    width:100%;
	text-align:center;
	margin:0px 0px 10px;
}

.cart .summary .payment-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart .summary .payment-wrapper img {
    width: 28px;
    margin-right: 10px;
}

.cart .summary .free-shipping{
	color:#20a165;
}

.cart .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
	margin-bottom:20px;
}

.cart .inputwrapper h3{
	font-size: 20px;
    font-weight: 700;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #fbcfad;
}

.cart .inputwrapper h5 {
    font-size: 18px;
    font-weight: 700;
    color: #ff6600;
}

.cart .inputwrapper hr{
    opacity: 1;
    border-top: 1px dashed #fbcfad;
	margin: 10px 0 20px;
}

.cart .inputwrapper label{
	font-weight:600;
}

.cart .inputwrapper .warning {
    color: #333;
    background: #fdd6b9;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    margin-top: -5px;
    font-size: 14px;
    font-weight: 600;
}

.cart .form-footer .disclaimer {
    font-size: 14px;
    font-weight: 300;
	margin-bottom:0px;
}

.cart .form-footer .disclaimer a {
    color: #ff6600;
}

.cart .cart-item h5{
	font-size: 18px;
    font-weight: 600;
}

.cart .cart-item p{
	font-size: 16px;
	display: inline;
}

.cart .cart-item-link{
	font-size: 14px;
	color: #ff6600;
	display: inline;
}


.cart .cart-item hr{
	border-top: 1px dashed #ddd;
	opacity:1;
	margin: 10px 0px;
}

.cart .cart-item label{
	margin:0px;
	font-weight:600
}

.cart .cart-item .card-item {
	display:block;
	position:relative;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 15%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	max-width: 120px;
    margin: 0px auto;
	width: 100%;
}

.cart .cart-item:hover .card-item {
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 30%);
}

.cart .cart-item .cover {
	display:block;
	position:relative;
	border-radius: 4px;
	opacity:0.95;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
	transform: perspective(1000px) rotateY(-5deg);
	max-width: 120px;
    margin: 0px auto;
}

.cart .cart-item .cover .border-right {
    position: absolute;
    right: -3px;
    top: 50%;
    height: 98%;
    width: 3px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 3px 3px 0px;
}

.cart .cart-item .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 3px;
    width: 3px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.cart .cart-item .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    width: 3px;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
    pointer-events: none;
}

.cart .cart-item .cover img{
	border-radius: 4px;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top;
}

.cart .cart-item:hover .cover{
	opacity:1;
	box-shadow: -5px 5px 10px rgb(0 0 0 / 40%);
	transform:none;
}

.cart .cart-item-notification h3{
    font-size: 21px;
    font-weight: 700;
    color: #ff6600;
	display: flex;
    justify-content: center;
	align-items: center;
	margin-bottom:8px;
}

.cart .cart-item-notification span{
    margin-right: 10px;
    background-image: linear-gradient(-180deg, #ffffff, #ff66001a);
    border: 2px solid #fdc095;
    border-radius: 100%;
    padding: 6px;
    font-size: 26px;
}

.cart .cart-item-notification .button{
    padding: 8px 30px;
    font-size: 16px;
	margin:0px;
}

/* ORDERS */
.orders {
	margin-top:50px;
}

.orders h1{
	font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

.orders h2{
	font-size: 22px;
    font-weight: 700;
}


.orders .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.orders .card{
	border-radius: 20px;
    border-color: #f8f0e2;
}

.orders .card-header{
	background: #f8f0e2;
    border-color: #f8f0e2;
    border-radius: 20px 20px 0px 0px;
    padding: 10px 20px;
}

.orders .card-header h5{
	font-weight: 700;
	font-size: 18px;
}

.orders .card td, .orders .card .table>:not(caption)>*>*{
	padding: 0px;
	border:0px;
}

.orders .card .title-info{
	width:150px;
}

.orders .card .title-info-long{
	width:220px;
}

.orders .card tr{
	margin-bottom:10px;
	padding-bottom:10px;
	display:block;
	border-bottom:1px dashed #e6dfd3;
}

.orders .card .button{
	font-size: 14px;
    padding: 6px 22px;
    text-align: center;
    box-shadow: none;
    font-weight: 600;
    border-width: 1px;
}

.orders .card .button:hover {
    border-width: 1px !important;
}

/* EXAMPLES */
.examples h1{
	font-size: 38px;
    font-weight: 800;
}

.examples p{
	font-size: 20px;
    font-weight: 300;
}

/* PRICING */
.pricing-top h1{
	font-size: 38px;
    font-weight: 800;
}

.pricing-top p{
	font-size: 20px;
    font-weight: 300;
}

.pricing-top p b{
    font-weight: 700;
}


.pricing-top p.ref {
    background: #d8e2dc99;
    border-radius: 100px;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: 700;
}

.pricing .wrapper {
    background: #fff;
    border-radius: 48px;
    padding: 50px 50px;
    margin-bottom: 50px;
}

.pricing .wrapper .pricing-box {
	border-radius: 30px;
	padding: 25px;
    background-color: #ffd7ba42;
	border: 3px solid #ffd7ba;
}

.pricing .wrapper .pricing-box2{
    background-color:#d8e2dc38;
	border: 3px solid #d8e2dc;
}

.pricing .wrapper .pricing-title {
    font-size: 1.5rem;
	padding:12px 25px;
    margin-bottom: 10px;
    font-weight: bold;
	background: #ffd7ba75;
	border-radius: 20px;
}

.pricing .wrapper .pricing-box2 .pricing-title {
    background: #d8e2dc99;
}

.pricing .wrapper .pricing-price {
    font-size: 2.2rem;
    color: #ff6600;
    margin: 20px 0 15px;
    font-weight: 800;
    border-bottom: 2px dashed #ff660066;
    padding-bottom: 10px;
}

.pricing .wrapper .pricing-price .original {
    text-decoration: line-through;
	color:#333;
	font-weight:600;
	font-size: 18px;
    margin-right: 6px;
}

.pricing .wrapper .pricing-price .percentage {
    background: #f56400;
    padding: 2px 11px;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50px;
    position: absolute;
    margin-top: 18px;
    background-image: linear-gradient(-180deg, #ff893b, #ff6600);
	margin-left: 8px;
}

.pricing .wrapper .pricing-price .save-info{
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.pricing .wrapper .pricing-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 20px;
	border-bottom: 2px dashed #ff660066;
	padding: 5px 0px;
}

.pricing .wrapper .pricing-features li {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
	font-weight: 500;
    font-size: 17px;
}

.pricing .wrapper .pricing-arrow {
	font-size: 45px;
    color: #ff6600;
    margin: 30px 0;
    line-height: 65px;
    text-align: center;
    height: 65px;
    width: 65px;
    background: #f8f0e2;
    border-radius: 100%;
    border: 2px solid #ff6600ad;
}

.pricing .wrapper .check{
	color: #20a165;
    margin: 0px 15px 0px 0px;
}


/* IDEAS */
.ideas {
	margin-top:50px;
}

.ideas h1{
	font-size: 38px;
    font-weight: 800;
}

.ideas .top-title {
    color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.ideas .info{
    font-size: 20px;
    font-weight: 300;
}

.ideas .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.ideas ul.cats{
	list-style:none;
	margin:0px;
	padding:0px;
}

.ideas ul.cats li{
	float:left;
	margin-right:5px;
}

.ideas ul.cats li a {
  padding: 6px 15px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
  display: inline-block;
}

.ideas ul.cats li a:hover{
  border-color: #f60 !important;
}

.ideas ul.cats li:nth-child(8n+1) a {
  background-image: linear-gradient(-180deg, #FFDFC8, #F2CCB1);
  border: 1px solid #F2CCB1;
}

.ideas ul.cats li:nth-child(8n+2) a {
  background-image: linear-gradient(-180deg, #E0E8E3, #CDD7D1);
  border: 1px solid #CDD7D1;
}

.ideas ul.cats li:nth-child(8n+3) a {
  background-image: linear-gradient(-180deg, #FDDDD8, #EFCAC4);
  border: 1px solid #EFCAC4;
}

.ideas ul.cats li:nth-child(8n+4) a {
  background-image: linear-gradient(-180deg, #FBE7E4, #EED6D2);
  border: 1px solid #EED6D2;
}

.ideas ul.cats li:nth-child(8n+5) a {
  background-image: linear-gradient(-180deg, #F9F1EF, #ECE1DF);
  border: 1px solid #ECE1DF;
}

.ideas ul.cats li:nth-child(8n+6) a {
  background-image: linear-gradient(-180deg, #FFEAE1, #F2DACE);
  border: 1px solid #F2DACE;
}

.ideas ul.cats li:nth-child(8n+7) a {
  background-image: linear-gradient(-180deg, #F0E9E2, #E0D9D0);
  border: 1px solid #E0D9D0;
}

.ideas ul.cats li:nth-child(8n+8) a {
  background-image: linear-gradient(-180deg, #FED1C9, #F1BBB2);
  border: 1px solid #F1BBB2;
}

.ideas ul.cats li:nth-child(8n+9) a {
  background-image: linear-gradient(-180deg, #FED3AE, #F1BE92);
  border: 1px solid #F1BE92;
}

.ideas ul.cats li:nth-child(8n+10) a {
  background-image: linear-gradient(-180deg, #EDEDE9, #DCDCD9);
  border: 1px solid #DCDCD9;
}

.ideas hr{
	margin: 25px 0px 40px;
    border-top: 1px dashed #fe6500;
}

.ideas .card{
    border: 0px;
    padding:0px;
    border-radius: 20px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    background-color: #fdfdfd;
    cursor: pointer;
    float: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
	padding:17px;
}

.ideas .card h4{
   font-size: 16px;
   margin-top: 15px;
   font-weight: 600;
   line-height: 22px;
   margin-bottom:10px;
}

/* Eerste element */
.ideas .col:nth-child(8n+1) .card {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.ideas .col:nth-child(8n+2) .card {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.ideas .col:nth-child(8n+3) .card {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.ideas .col:nth-child(8n+4) .card {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.ideas .col:nth-child(8n+5) .card {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.ideas .col:nth-child(8n+6) .card {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zevende element */
.ideas .col:nth-child(8n+7) .card {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

/* Achtste element */
.ideas .col:nth-child(8n+8) .card {
    background-color: #FEC5BB;
    border-color: #E0A499; /* Iets donkerder */
}

/* Negende element (als er meer dan 8 zijn) */
.ideas .col:nth-child(8n+9) .card {
    background-color: #FEC89A;
    border-color: #D6A17C; /* Iets donkerder */
}

/* Tiende element (als er meer dan 9 zijn) */
.ideas .col:nth-child(8n+10) .card {
    background-color: #E8E8E4;
    border-color: #C2C2BF; /* Iets donkerder */
}

.ideas .card:hover {
    background: #ff66000a;
    background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.ideas .card span{
    font-size: 32px;
}

.ideas  .image-container {
    opacity: 0;
    transition: opacity 0.4s ease-in;
  }

.ideas  .image-container.loaded {
    opacity: 1;
 }

.ideas .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
	margin: 25px 25px 0px 25px;
}

.ideas .cover h5 {
	position: absolute;
    top: 23px;
    width: calc(100% - 15px);
    right: 0;
    text-align: center;
	font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-shadow: -1px 0 #00000096, 0 1px #000000e3, 1px 0 #00000096, 0 -1px #00000096;
}
.ideas .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.ideas .cover .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.ideas .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.ideas .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.ideas .cover:hover{
	opacity:1;
	transform: none;
}

/* IDEA */
.idea {
	margin-top:50px;
}

.idea h1{
	font-size: 38px;
    font-weight: 800;
	margin-bottom:25px;
}

.idea h2{
	font-size: 34px;
    margin-bottom: 15px;
	color: #ff6600;
	font-weight:800;
}

.idea h2.others {
    font-size: 34px;
    margin-bottom: 30px;
}

.idea h3{
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.idea p{
    font-size: 17px;
    line-height: 30px;
}

.idea .top-title {
    color: #ff6600;
    font-weight: 600;
    font-size: 18px;
    display: block;
}

.idea .info{
    font-size: 20px;
    font-weight: 300;
}

.idea .wrapper {
	background: #fff;
    border-radius: 48px;
    padding: 50px;
    margin-bottom: 50px;
}

.idea .box-story{
	border: 2px dashed #dcdcdc;
    padding: 20px 35px;
    border-radius: 20px;
	margin: 30px 0px;
}

.idea .box-story p{
	margin:0px;
	font-style:italic;
	font-weight:300;
	font-size: 17px;
}

.idea .box-img{
	background:#e8eeea;
	padding:35px;
	border-radius:20px;
}

.idea .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
}

.idea .cover h2 {
	position: absolute;
    top: 35px;
    width: calc(100% - 15px);
    right: 0;
    text-align: center;
    font-size: 35px;
	color: #fff;
    font-weight: 700;
    text-shadow: -1px 0 #00000096, 0 2px #000000e3, 2px 0 #00000096, 0 -1px #00000096;
}
.idea .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.idea .cover .border-right {
    position: absolute;
    right: -7px;
    top: 50%;
    height: 98%;
    width: 7px;
    background: #fff;
    border-right: 2px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.idea .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 7px;
    width: 7px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.idea .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 14px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.idea .cover:hover{
	opacity:1;
	transform: none;
}

.idea .gender-image{
	max-width: 160px;
    float: right;
    margin-top: -175px;
    margin-right: 15px;
    z-index: 1;
    position: relative;
}


.idea .gender-image img{
	width: 100%;
    border-radius: 20px;
    border: 4px solid #ff6600db;
	box-shadow: #00000080 0px 0px 20px;
}

.idea .arrow{
	font-size: 70px;
    transform: rotateZ(320deg);
    color: #ff6600db;
    float: right;
    margin-top: -73px;
    margin-right: 180px;
    text-shadow: #00000080 0px 0px 15px;
}

.idea .book-list {
    background: #faf8f0;
	border-radius: 20px;
    padding:30px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.idea .book-list h2{
    color:#333;
	margin-bottom: 20px;
	font-size:20px;
}

.idea .book-list ul {
    list-style-type: none;
    margin: 5px 0px;
    padding: 0px;
}

.idea .book-list ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 35px;
    font-size: 17px;
    border-bottom: 1px dashed #ff690666;
    padding-bottom: 10px;
}

.idea .book-list ul li:last-of-type {
    margin-bottom: 0px;
	padding-bottom:0px;
	border:0px;
}

.idea .book-list ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url(/assets/images/list-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.idea .box-buttons{
	background: #ffd7ba75;
	padding: 15px 35px 7px;
	border-radius:20px;
	margin-top:20px;
}

.idea .box-buttons h5{
	font-size: 20px;
	font-weight: 300;
    margin-bottom: 15px;
}

.idea .box-buttons h5 b{
	font-weight:800;
}

.idea .button {
    font-size: 16px;
    padding: 10px 22px;
    text-align: center;
    box-shadow: none;
    font-weight: 600;
	margin-right:5px;
	width:100%;
}

.idea .box-usp{
	padding: 13px 35px;
    border-radius: 20px;
    border: 1px solid #dcdcdc;
    margin-top: 20px;
}

.idea .box-usp ul{
	list-style:none;
	padding:0px;
	margin:0px;
}

.idea .box-usp ul li{
	color:#333;
	display: flex;
	margin-bottom: 9px;
    font-weight: 500;
    padding-bottom: 9px;
    border-bottom: 1px dashed #dcdcdc;
}

.idea .box-usp ul li:last-of-type{
	margin-bottom:0px;
	border-bottom:0px;
	padding-bottom:0px;
}

.idea .box-usp ul li span{
	margin-right: 13px;
}

.idea .card{
    border: 0px;
    padding: 0px;
    border-radius: 20px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    background-color: #fdfdfd;
    cursor: pointer;
    float: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
    padding: 17px;
}

.idea .card h5{
   font-size: 16px;
}

/* Eerste element */
.idea .col:nth-child(8n+1) .card {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.idea .col:nth-child(8n+2) .card {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.idea .col:nth-child(8n+3) .card {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.idea .col:nth-child(8n+4) .card {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.idea .col:nth-child(8n+5) .card {
    background-color: #ECE4DB;
    border-color: #C5B8AA; /* Iets donkerder */
}

.idea .card:hover {
    background: #ff66000a;
    background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.idea .card span{
    font-size: 32px;
}

.idea .card h4 {
    font-size: 16px;
    margin-top: 15px;
    font-weight: 600;
    line-height: 22px;
    margin-bottom: 10px;
}

.idea .image-container {
    opacity: 0;
    transition: opacity 0.4s ease-in;
  }

.idea .image-container.loaded {
    opacity: 1;
 }

.idea .cover2 {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.88;
	left: -3px;
	margin: 25px 25px 0px 25px;
}

.idea .cover2 h5 {
	position: absolute;
    top: 23px;
    width: calc(100% - 15px);
    right: 0;
    text-align: center;
	font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-shadow: -1px 0 #00000096, 0 1px #000000e3, 1px 0 #00000096, 0 -1px #00000096;
}
.idea .cover2 img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.idea .cover2 .border-right {
    position: absolute;
    right: -5px;
    top: 50%;
    height: 98%;
    width: 5px;
    background: #fff;
    border-right: 1px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.idea .cover2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.idea .cover2::after {
  content: '';
   position: absolute;
   top: 0;
   left: 10px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.idea .cover2:hover{
	opacity:1;
	transform: none;
}

.idea .how span {
    background: #ff6600;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    border: 2px solid #f60;
    display: flex;
    width: 43px;
    height: 43px;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    font-weight: 700;
    font-size: 26px;
    flex-shrink: 0;
}

.idea .how img{
	max-width:200px;
}

.idea .how h3 {
    font-size: 18px;
}

.idea .how p {
    font-size: 16px;
}

.idea hr {
    border-top: 1px dashed #ff690666;
    opacity: 1;
    margin: 30px 0px 15px;
}

.idea .how p b{
    font-weight:600;
}

/* --- CARD CREATOR STYLES (voor Bootstrap Grid) --- */
.card-creator-page {
    --primary-color: #f60;
    --primary-color-rgb: 255, 102, 0;
    --light-primary-color: #fff8f0;
    --background-color: #fcfbf8;
    --text-color: #333;
    --border-color: #e0e0e0;
    --border-radius: 16px;
    --box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --transition-speed: 0.3s;
	margin-top: 40px;
}
.card-creator-page #card-creator-app {
    margin-bottom: 40px;
}

.card-creator-page .top-page h1{
	font-size: 35px;
    font-weight: 800;
	margin-bottom: 35px;
}

.card-creator-page .top-page img{
	height: 90px;
    margin-right: 5px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.card-creator-page .wrapper {
    border-radius: 30px;
    padding: 30px;
    overflow: hidden;
    background: #f8f0e2;
}

.card-creator-page .button-cat{
	border-radius: 100px;
    color: #f60;
    border: 2px solid #f60;
    background: transparent;
    font-weight: 500;
    padding: 5px 16px;
    margin-bottom: 5px;
	transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
}

.card-creator-page .button-cat-active{
	color:#fff;
	background:#f60;
	background-image: linear-gradient(-180deg, #fd8130, #ff6600);
}

.card-creator-page .step h2{
    font-weight: 700;
    text-align: center;
    font-size: 21px;
	margin-bottom: 15px;
}

.card-creator-page .step .choice-name{
	display:block;
}

.card-creator-page .step .choice-extra{
	font-style: italic;
    font-weight: 300;
    font-size: 13px;
    display: block;
    margin: 0px 0px 7px;
}

.card-creator-page .step .choice-extra-price{
	display:block;
	font-size: 16px;
    font-weight: 600;
    color: #20a165;
    text-align: center;
	margin: 7px 0px 2px;
}

.card-creator-page .step .choice-extra-size{
	box-shadow: none !important;
    height: 40px !important;
    width: auto !important;
    margin: 5px auto;
}

/* Summary Box */
.card-creator-page #selection-summary {
    background: #f8f0e2;
    border-radius: 30px;
    padding: 20px 20px 15px;
    animation: fadeIn 0.5s;
}
.card-creator-page #summary-image {
    width: 100%;
    height: auto;
    flex-shrink: 0;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.10);
}
.card-creator-page #summary-details h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #ffd4b8;
    padding-bottom: 10px;
	font-weight:600;
}
.card-creator-page #summary-list {
    list-style: none;
    padding: 0;
    margin: 0px 0px 10px;
}
.card-creator-page #summary-list li {
    margin-bottom: 5px;
    color: #555;
}
.card-creator-page #summary-list li strong {
    color: #333;
    min-width: 80px;
    display: inline-block;
}

.card-creator-page #summary-actions .button {
    width: 100%;
    text-align: center;
}

.summary-actions-step2{
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-creator-page .button-change-design{
    background-color: transparent;
    color: #f60;
    border: 0px;
    padding: 0px;
    margin: 7px 0px 0px;
    font-size: 14px;
    display: flex;
}

.card-creator-page .button-change-design span{
	font-size: 21px;
    margin-right: 3px;
}

.card-creator-page .summary-actions-step2 .button-change-design{
    margin: 7px 7px 0px;
}

.card-creator-page .button-tool{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
	 padding: 10px;
    font-size: 15px;
}

.card-creator-page .button-tool .material-symbols-outlined{
	font-size:20px;
}

.card-creator-page #generate-ai-text-btn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
}


/* Stappen & Keuzes */

.card-creator-page #step-2-card-preview {
    animation: fadeIn 0.5s;
    background: #fff;
    padding: 35px 35px 15px;
}

.card-creator-page #step-2-preview-image {
    width: 100%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.12);
}

.card-creator-page .step { display: none; }
.card-creator-page .step.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.card-creator-page .step-header {
    text-align: center;
    margin-bottom: 35px;
}
.card-creator-page .choice-grid input[type="radio"] { display: none; }
.card-creator-page .choice-grid label {
    display: block;
    cursor: pointer;
    position: relative;
    height: 100%;
}

.card-creator-page .choice-grid .choice-content {
    border: 2px solid transparent;
    border-radius: 20px;
    transition: all var(--transition-speed) ease-in-out;
    background-color: #fff;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    height: 100%;
	border: 2px solid #ffd4b8;
}

.card-creator-page .choice-grid .choice-content2{
	border: 2px solid #fff;
	padding: 35px;
	border-radius: 30px;
}

.card-creator-page .choice-grid label:hover .choice-content {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}
.card-creator-page .choice-grid input[type="radio"]:checked + .choice-content {
    border-color: var(--primary-color);
}
.card-creator-page .choice-grid .choice-content img {
    width: 100%;
    height: auto;
    display: block;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.10);
}
.card-creator-page .choice-grid .choice-name { font-weight: bold; }

.card-creator-page .price-and-nav {
    text-align: center;
    margin-top: 40px;
}
.card-creator-page #go-to-step-3-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    background-image: none;
    border-color: #ccc;
}
.card-creator-page .form-actions {
    text-align: center;
    margin-top: 40px;
}

.card-creator-page .form-actions .button2{
	background-color: #ffffffde !important;
    background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
    position: fixed;
	bottom: 20px; /* Pas aan voor de gewenste afstand vanaf de onderkant */
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000; /* Zorgt dat de knop boven andere content blijft */
}

/* Editor & Toolbar */
.card-creator-page #card-editor-canvas-container {
    display: grid;
    place-items: center;
    min-width: 0;
}

.card-creator-page #card-editor-canvas {
    box-shadow: var(--box-shadow);
}
.card-creator-page .editor-toolbar {
    background: #f8f0e2;
    border-radius: 30px;
    padding: 20px;
	margin-bottom:20px;
}
.card-creator-page .toolbar-tabs {
    display: flex;
    border-bottom: 1px solid #ffd4b8;
    margin-bottom: 20px;
}
.card-creator-page .toolbar-tab {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-weight: 600;
}
.card-creator-page .toolbar-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.card-creator-page .toolbar-panel { display: none; }
.card-creator-page .toolbar-panel.active { display: block; animation: fadeIn 0.4s; }

.card-creator-page .tool-section { margin-top: 25px; }
.card-creator-page .tool-section h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ffd4b8;
    padding-bottom: 10px;
	font-weight:600;
}
.card-creator-page .tool-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.card-creator-page .tool-row label {
    flex-shrink: 0;
    width:90px;
    font-size: 0.9em;
}
.card-creator-page .tool-row select,
.card-creator-page .tool-row input {
    height: 40px;
    border-radius: 20px;
    border: 2px solid #ffd4b8;
    line-height: 36px;
    padding: 6px 15px;
	width: 100%;
}
.card-creator-page input[type="range"] { padding: 0; }
.card-creator-page .font-size-value {
    font-weight: bold;
    min-width: 45px;
    text-align: right;
	font-size: 0.9em;
}
.card-creator-page .button-group { display: flex; gap: 5px; }
.card-creator-page .button-group button {
    flex: 1;
    padding: 5px;
    background: #f9f9f9;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fff;
	background-image: linear-gradient(-180deg, #fd813000, #ff66000d);
    border: 2px solid #fce9d7;
    color: #f60;
    width: 36px;
    height: 38px;
}
.card-creator-page .button-group button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}


/* CSS — toepassen op beide sliders */
#font-size-slider,
#mobile-font-size {
  --percent: 50%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #f60 0%,
    #f60 var(--percent),
    #fce9d7 var(--percent),
    #fce9d7 100%
  );
  outline: none;
}

/* WebKit / Chrome / Edge thumbs */
#font-size-slider::-webkit-slider-thumb,
#mobile-font-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f60;
  margin-top: -2px;
  border: none;
}

/* Firefox track/progress/thumb */
#font-size-slider::-moz-range-track,
#mobile-font-size::-moz-range-track {
  background: #fce9d7;
  height: 10px;
  border-radius: 999px;
}
#font-size-slider::-moz-range-progress,
#mobile-font-size::-moz-range-progress {
  background: #f60;
  height: 10px;
  border-radius: 999px;
}
#font-size-slider::-moz-range-thumb,
#mobile-font-size::-moz-range-thumb {
  background: #f60;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* accent-color voor browsers die dat gebruiken */
#font-size-slider,
#mobile-font-size {
  accent-color: #f60;
}


.card-creator-page .color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.card-creator-page .color-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.card-creator-page .sticker-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}
.card-creator-page .sticker-item {
    background: #fff;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}
.card-creator-page .sticker-item:hover { transform: scale(1.05); }
.card-creator-page .sticker-item img {
    width: 100%;
    height: auto;
}
.card-creator-page .upload-area .button {
    width: 100%;
    text-align: center;
}
.card-creator-page #image-uploader { display: none; }


/* --- CARD CREATOR: MOBIEL-SPECIFIEKE STIJLEN --- */
@media (max-width: 991px) {
  .card-creator-page #card-creator-app {
    /* Zorg voor ruimte onderaan voor de toolbar */
    padding-bottom: 80px;
  }

  /* Verberg de desktop sidebar op mobiel */
  .card-creator-page #sidebar-step-3 .editor-toolbar {
    display: none;
  }

  /* De zwevende mobiele toolbar */
  #mobile-editor-toolbar {
    position: fixed;
    bottom: -100%; /* Start verborgen */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    border-top: 1px solid #e0e0e0;
    transition: bottom 0.3s ease-in-out;
    z-index: 1010;
  }

  #mobile-editor-toolbar.visible {
    bottom: 0; /* Schuif in beeld */
  }

  /* Geklapte staat: basisknoppen */
  #mobile-toolbar-collapsed {
    display: flex;
    justify-content: space-around;
    padding: 10px 5px;
    transition: opacity 0.3s, visibility 0.3s;
  }

  #mobile-toolbar-collapsed button {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /* Uitgeklapte staat: contextuele opties */
  #mobile-toolbar-expanded {
    display: none; /* Standaard verborgen */
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;
    gap: 10px;
    border-top: 1px solid #eee;
  }

  #mobile-toolbar-expanded .button-tool {
      padding: 8px 15px;
      font-size: 15px;
  }
  #mobile-toolbar-expanded select {
      flex-grow: 1;
  }

  /* Toon/verberg de juiste staat */
  #mobile-editor-toolbar.expanded #mobile-toolbar-collapsed {
    display: none;
  }
  #mobile-editor-toolbar.expanded #mobile-toolbar-expanded {
    display: flex;
  }

	/* Card Creator Mobile Toolbar Aanpassingen */
	#mobile-editor-toolbar.expanded #mobile-toolbar-collapsed {
		display: none;
	}

	#mobile-editor-toolbar.expanded #mobile-toolbar-expanded {
		display: block; /* Of flex, afhankelijk van de layout */
		padding: 10px;
	}

	#mobile-toolbar-expanded .mobile-text-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		justify-content: center;
	}

	#mobile-toolbar-expanded select {
		flex: 1 1 100px;
		height: 35px;
		border-radius: 20px;
        border: 2px solid #fce9d7;
		padding: 0 10px;
	}

	#mobile-toolbar-expanded .button-group {
		display: flex;
		gap: 5px;
	}

	#mobile-toolbar-expanded .color-palette {
		display: flex;
		gap: 8px;
		justify-content: center;
		flex-basis: 100%;
	}

	#mobile-toolbar-expanded .color-dot {
		width: 25px;
		height: 25px;
		border-radius: 50%;
	}

	#mobile-toolbar-expanded .button-tool {
		padding: 8px 12px;
		font-size: 14px;
	}

  /* Container voor de panelen die openen (als overlay) */
  #mobile-tool-panels-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }

  #mobile-tool-panels-container.visible {
    opacity: 1;
    visibility: visible;
  }

  #mobile-tool-panels .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5px 15px 5px;
      margin-bottom: 15px;
      border-bottom: 1px solid #e0e0e0;
  }

  #mobile-tool-panels .panel-header #mobile-panel-title {
      font-weight: 700;
      font-size: 18px;
      color: #333;
  }

  #mobile-tool-panels .panel-header #close-mobile-panel-btn {
      background: none;
      border: none;
      color: var(--primary-color);
  }

  #mobile-tool-panels-container #mobile-tool-panels {
    background-color: #faf8f0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
  }

  #mobile-tool-panels-container.visible #mobile-tool-panels {
    transform: translateY(0);
  }

  .mobile-toolbar-close-btn{
	padding: 0px;
    margin: 0px;
    border: 0px;
    position: absolute;
    top: -32px;
    right: 15px;
    color: #fff;
    background: #ff6600db;
    height: 28px;
    width: 28px;
    display: flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
  }

  /* Zorg dat de canvas container niet te breed wordt op kleine schermen */
  .card-creator-page #card-editor-canvas-container {
    padding: 0 5px;
  }
}

/* BLOG */
.blog{
	margin:50px auto;
}

.blog h1{
	font-size: 38px;
    font-weight: 800;
}

.blog h4{
	font-weight: 800;
    color: #ff6600;
    font-size: 34px;
    margin-bottom: 30px;
}

.blog .info{
    font-size: 20px;
    font-weight: 300;
}

.blog .card {
    border:0px;
	border-radius: 28px;
	padding-bottom:15px;
	overflow:hidden;
}

.blog .card h5{
   font-weight: 800;
   font-size: 24px;
   margin: 10px 0px;
}

.blog .card p {
    font-size: 17px;
    line-height: 30px;
}

.blog .card .read-more{
   font-weight: 700;
   color: #ff6600;
   display:flex;
}

.blog .card .read-more span{
   margin-left:5px;
}

.blog .card img{
  transition: transform 700ms cubic-bezier(0.2, 0.6, 0.6, 1);
  height: 300px;
  object-fit: cover;
}

.blog .card:hover img{
    transform: scale(1.05);
}

.blog .card:hover h5{
   color: #ff6600;
}

/* BLOG ITEM*/
.blog-item{
	margin-top:50px;
}

.blog-item h1{
	font-size: 38px;
    font-weight: 800;
	 margin-bottom: 25px;
}


.blog-item h5{
	font-weight:700;
	font-size:18px;
}

.blog-item .date{
	font-size: 16px;
    margin-bottom: 30px;
}

.blog-item img.featured{
	border-radius:28px;
	max-height:500px;
	width:100%;
	object-fit:cover;
}

.blog-item .wrapper{
	background:#fff;
	border-radius: 28px;
	padding:30px;
	margin-bottom:50px;
}

.blog-item .wrapper h2{
    font-weight: 800;
    color: #ff6600;
    font-size: 28px;
    margin-bottom: 15px;
    margin-top: 50px;
}

.blog-item .wrapper h3{
	font-weight: 800;
    font-size: 20px;
    margin-bottom: 6px;
    margin-top: 20px;
}

.blog-item .wrapper h4{
	font-weight: 800;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.blog-item .wrapper p{
    font-size: 17px;
    line-height: 30px;
}

.blog-item .wrapper p a{
    color: #ff6600;
}

.blog-item .wrapper ul, .blog-item .wrapper ol{
    padding:0px 20px;
}

.blog-item .wrapper ul li, .blog-item .wrapper ol li{
    font-size: 17px;
    line-height: 30px;
	margin-bottom:15px;
}


.blog-item .sticky-top{
	top: 80px;
    margin-bottom: 50px;
}

.blog-item .table-of-contents ul{
	padding: 0px;
    margin: 0px;
    list-style: none;
}

.blog-item .table-of-contents ul li{
	font-size:15px;
	margin-bottom:1px;
}

.blog-item .table-of-contents ul li:first-of-type{
	margin-top: 0px !important;
}

.blog-item .table-of-contents ul li.toc-level-2{
	margin-top: 15px;
}

.blog-item .table-of-contents ul li.toc-level-3{
	font-weight:300;
}

/* Coloring books*/
.coloring-books{
	margin-top:35px;
}

.coloring-books h1{
	font-size: 35px;
    font-weight: 800;
	display: flex;
    align-items: center;
    justify-content: center;
}

.coloring-books h1 img {
    height: 100px;
    margin-right: 15px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}

.coloring-books h1 i{
	font-style:normal;
    color: #ff6600;
}

.coloring-books .info{
    font-size: 20px;
    font-weight: 300;
    margin: 0 auto 1rem;
}

.coloring-books .info b{
    font-weight: 500;
}

.coloring-books .wrapper {
	background:#fff;
	border-radius: 30px;
	padding: 30px 40px 20px;
	overflow: hidden;
}

.coloring-books .ronde-sticker {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-image: linear-gradient(-180deg, #fd8130, #ff6600);
  border: 3px dashed #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transform: rotate(-10deg); /* De lichte rotatie */
  margin-bottom: -40px;
  margin-top: -80px;
  z-index: 2;
  position: relative;
}

.coloring-books .ronde-sticker p {
  line-height: 1.5;
  font-size: 15px;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
}

.coloring-books .cover {
	display: block;
    position: relative;
	border-radius: 5px;
	box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.25);
	transform: perspective(1000px) rotateY(-5deg);
	transition: transform 0.3s ease;
	opacity:0.96;
	left: -3px;
	max-width: 380px;
    margin: 0 auto 25px;
}

.coloring-books .cover img{
	width:100%;
	border-radius: 5px;
	opacity:1;
}

.coloring-books .cover .border-right {
    position: absolute;
    right: -6px;
    top: 50%;
    height: 98%;
    width: 6px;
    background: #fff;
    border-right: 2px solid #00000042;
    transform: translateY(-50%);
    border-radius: 0px 5px 5px 0px;
}

.coloring-books .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 0 0 / 25%), transparent);
    border-radius: 4px 0px 0px 4px;
}

.coloring-books .cover::after {
  content: '';
   position: absolute;
   top: 0;
   left: 9px;
    width: 10px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255 255 255 / 25%), transparent);
}

.coloring-books .cover:hover{
	opacity:1;
	transform: none;
}

.coloring-books h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}

.coloring-books p {
	font-size: 14px;
}

.coloring-books  hr{
    margin: 0px 0px 15px;
    border-top: 1px dashed #ff6600;
}

.coloring-books .price {
	font-size: 16px;
    font-weight: 600;
    color: #20a165;
    text-align: center;
	margin-bottom:7px;
}

.coloring-books .button2{
	background-color: #ffffffde !important;
    background-image: linear-gradient(-180deg, #ffffff61, #ff660026);
}

.coloring-books .btn-add-to-cart{
	padding:8px;
}

.coloring-books .product-details ul {
	list-style: none;
	padding-left: 0;
	margin:0px;
}

.coloring-books .product-details ul li {
	display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 16px;
}

.coloring-books .product-details ul .material-symbols-outlined {
	color: #f60;
    font-size: 24px;
    width: 26px;
    text-align: center;
}

.coloring-books .product-details a{
	color: #f60;
	font-weight:600;
}

.coloring-books .spinner-border{
	color: #f60;
}

/* Algemene stijl voor pijlen */
:root {
	--swiper-navigation-color: #000;
	--swiper-navigation-size: 30px;
}

.coloring-books  .swiper-button-next, .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.coloring-books  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Oplossing: positionering van de container */
.coloring-books  .main-book-slider, .product-info .swiper {
   position: relative;
}

/* Oplossing: afbeeldingshoogte */
.coloring-books  .swiper-slide .wrapper .cover {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.coloring-books  .swiper-slide .wrapper .cover img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Zorgt dat de hele afbeelding zichtbaar is */
}

.coloring-books  .product-info .swiper {
    height: 80px; /* Vaste, kleine hoogte voor thumbnail slider */
}

.coloring-books  .product-info .swiper-slide {
    height: 100%;
    max-width: 42px;
    margin-right: 15px;
}

.coloring-books  .product-info .swiper-slide img {
   width: 100%;
   object-fit: cover; /* Zorgt dat thumbnails de slide vullen */
}

 /* Oplossing: Verberg inactieve pijlen */
.coloring-books  .swiper-button-disabled {
   display: none !important;
}

/* --- CSS VOOR SLIDER --- */
.coloring-books  .swiper-container { margin-top: 1rem; }
.coloring-books  .swiper-slide { cursor: grab; height: auto; text-align: center; }
.coloring-books  .swiper-slide:active { cursor: grabbing; }
.coloring-books  .swiper-slide img { display: block; width: 100%; height: auto; max-height: 90px; object-fit: contain; border-radius: 5px; border: 1px solid #ddd; }

/* --- CSS VOOR FANCYBOX --- */
.fancybox__backdrop {
    background: rgba(24, 26, 27, 0.7);
}

/* PAGE */
.page {
	margin-top:50px;
}

.page h1{
	font-size: 38px;
    font-weight: 800;
}

.page h2{
	font-size: 22px;
    font-weight: 700;
    margin: 40px 0px 10px;
}

.page h3{
	font-size: 18px;
    font-weight: 600;
}

.page hr {
    border-top: 1px dashed #fe6500;
}

.page .info{
    font-size: 20px;
    font-weight: 300;
}

.page a{
	color: #ff6600;
}

.page .wrapper {
	background:#fff;
	border-radius: 48px;
	padding:30px;
	margin-bottom:50px;
}

.page .inputwrapper{
	background: #fcf7f1;
    padding: 30px 30px;
    border-radius: 20px;
    border: 2px solid #fdd6b9;
	margin-bottom:20px;
}

.page .inputwrapper label{
	font-weight:600;
}

.page .inputwrapper h4{
	font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
}

.page .inputwrapper hr {
    margin: 30px 0px;
}

.page .button3 {
	font-size: 14px;
    padding: 6px 25px;
}

/* CONTACT */
.contact .answer{

}

.contact .answer p{
	font-size: 17px;
    line-height: 30px;
}

.contact .answer .button{
	color:#fff;
	font-size: 17px;
    padding: 8px 24px;
	margin-right: 5px;
}

.contact .answer .button2{
	color: #f60;
}


/* Landing TOP */
.theme-top{
	padding: 0px;
	padding-top: 75px;

}

.theme-top h1{
	font-size: 48px;
    font-weight: 800;
    max-width: 655px;
	opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 0.15s; /* Iets later laten starten voor een subtiele vertraging */
}

.theme-top p{
	font-size: 21px;
	font-weight:300;
    max-width: 570px;
	opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
    animation-delay: 0.3s; /* Kortere vertraging zodat het sneller na de h1 komt */
}

.theme-top .button {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: 0.4s; /* Sneller na de p laten komen */
}

.theme-top img {
    max-height: 350px;
	max-width:100%;
}

.theme-content .wrapper {
    padding: 50px;
}

.theme-content h2{
	font-size: 34px;
	font-weight: 800;
	color: #ff6600;
	margin: 0px 0px 15px;
}

.theme-content p{
    font-size: 17px;
    line-height: 30px;
}

.theme-content .expandable-content .main-text-content {
    overflow: hidden;
    position: relative;
    line-height: 1.6em;
    max-height: 18.9em;
    transition: max-height 0.6s ease-in-out;
    margin-bottom: 0px;
}

.theme-content .expandable-content .main-text-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%); /* #faf8f0 */
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

.theme-content .expandable-content.expanded .main-text-content {
    max-height: 200em;
}

.theme-content .expandable-content.expanded .main-text-content::after {
    opacity: 0;
}

.theme-content .read-more-link {
    display: inline-flex;
    align-items: center;
    color: #ff6600;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-top: 5px;
}

.theme-content .read-more-link .link-text {
    margin-right: 4px;
}

.theme-content .read-more-link .read-more-icon {
    font-size: 20px;
}

.theme-content .read-more-link:hover {
    color: #e65c00;
}

/* THEME overview */
.theme-overview .wrapper {
	background:#e8eeea;
	border-radius: 48px;
	padding:50px 10px;
	margin-bottom:50px;
}

.theme-overview h2{
	font-size:36px;
	font-weight:800;
	margin-bottom:35px;
}

.theme-overview ul a{
    padding: 7px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    display: inline-block;
    background-image: linear-gradient(-180deg, #ffffff, #f5750014);
    border: 1px solid #c7c7c7;
	transition: background-color 0.5s ease, color 0.3s ease, border 0.3s ease;
}

.theme-overview ul a:hover{
    background-image: linear-gradient(-180deg, #ffffff, #00000005);
    border: 1px solid #f60;
}

.theme-overview ul a img {
    height: 24px;
    margin-right: 3px;
}

.theme-overview ul li:last-of-type a{
    background-color: #f60;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    color: #fff;
}

/* Features */
.features-page h2{
	font-weight: 700;
    font-size: 26px;
	margin:0px 0px 0.5rem;
	justify-content: flex-start;
    align-items: center;
	display:flex;
}

.features-page p {
    font-size: 18px;
    font-weight: 300;
	margin-bottom:0px
}

.features-page a{
    display: flex;
	align-items: center;
}

.features-page a span{
	margin-left:5px;
	font-size:20px;
}

.features-page .feature-icon{
    background: #ff6600;
    background-image: linear-gradient(-180deg, #fd8130, #ff6600);
    border: 2px solid #f60;
    width: 43px;
    height: 43px;
    text-align: center;
    display: flex;
    color: #fff;
    border-radius: 100%;
    margin-right: 30px;
    font-size: 26px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.features-page .imgbox {
	height: 230px;
    background: #FEF6F5;
    max-width: 230px;
    margin: 0 0 0 auto;
    border-radius: 40px;
	padding: 30px;
}

.features-page .imgbox img {
    height:100%;
	height: 100%;
    max-height: 180px;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35)) ;
	opacity: 0.95;
}

/* REVIEW */
.review .material-symbols-outlined{
	cursor:pointer;
	font-size: 34px;
	color:#ff6600;
	opacity:0.7;
}

.review .material-symbols-outlined:hover, .review #star-rating .selected{
	color:#ff6600;
	opacity:1;
}

.review #star-rating .selected {
  font-variation-settings:
  'FILL' 100,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.review .form-check-label{
	font-weight:400 !important;
	cursor:pointer;
}

/* HELP */
.help {
	margin-top:50px;
}

.help h2{
	margin: 0px 0px 15px;
}

.help .button{
	font-size: 15px;
    padding: 7px 25px;
}

.help .search{
	background:#fcf7f1;
    border: 2px solid #fdd6b9;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 25px;
}

.help .search input{
    margin: 0px;
}


.help .accordion-item{
	background-color: #ffd7ba42;
    border: 2px solid #ff66003b;
    border-radius: 15px !important;
	padding:20px;
	transition: border-color 0.3s ease;
}

.help .accordion-item:hover{
    border-color: #f60;
}

.help .accordion-item:hover .accordion-button{
	color:#f60 !important;
}

.help .accordion-button{
	background: transparent;
	font-weight: 600;
	padding:0px 0px 0px;
	font-size:17px;
}

.help .accordion-body{
	margin:10px 0px 0px;
	padding:0px;
}

.help .card{
	cursor: pointer;
    border-radius: 20px;
	padding:8px;
	border: 2px solid #e0e0e0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%);
}

/* Eerste element */
.help .col-md-6:nth-child(9n+1) .card {
    background-color: #FFD7BA;
    border-color: #D6B18F; /* Iets donkerder */
}

/* Tweede element */
.help  .col-md-6:nth-child(9n+2) .card {
    background-color: #D8E2DC;
    border-color: #B4BEB8; /* Iets donkerder */
}

/* Derde element */
.help  .col-md-6:nth-child(9n+3) .card {
    background-color: #FCD5CE;
    border-color: #DBB0AD; /* Iets donkerder */
}

/* Vierde element */
.help  .col-md-6:nth-child(9n+4) .card {
    background-color: #FAE1DD;
    border-color: #D6BFB9; /* Iets donkerder */
}

/* Vijfde element */
.help  .col-md-6:nth-child(9n+5) .card {
    background-color: #F8EDEB;
    border-color: #D5C9C7; /* Iets donkerder */
}

/* Zesde element */
.help  .col-md-6:nth-child(9n+6) .card {
    background-color: #FFE5D9;
    border-color: #DCC2B5; /* Iets donkerder */
}

/* Zesde element */
.help  .col-md-6:nth-child(9n+7) .card {
  background-color: #e0e8e359;
  border-color: #cfd8d3;
}

/* Zesde element */
.help  .col-md-6:nth-child(9n+8) .card {
  background-color: #faf8f1;
  border-color: #dfd6cf;
}


.help .card:hover {
     box-shadow: rgb(56 56 56 / 36%) 0 2px 8px;
	 border-color: #f60 !important;
	 background: linear-gradient(180deg, rgb(255 255 255 / 14%) 55%, #0000001f 120%);
}

.help .card h5{
    margin: 0px;
    padding: 20px 0px;
	  font-weight:600;
    color: #333;
}

.help .card:hover h5{
	 color: #f60;
}

/* assets/css/style.css */
.help #autocomplete-suggestions .list-group-item {
    cursor: pointer;
    border-top: none; /* Voorkom dubbele borders als het de eerste is */
	border:1px dashed #fdd6b9;
}
.help #autocomplete-suggestions .list-group-item:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
	border-top:1px dashed #fdd6b9;
}
.help #autocomplete-suggestions .list-group-item:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.help #autocomplete-suggestions .list-group-item:hover {
    background-color: #f8f9fa; /* Lichte hover kleur */
}

.help .search .form-control { /* Zorg dat de input boven de suggesties kan komen indien nodig */
    position: relative;
    z-index: 1001;
}

/* INVOICES */
.invoices-page{

}

.table>:not(caption)>*>*{
	border-color:#fdd6b9;
}

.invoices-page .table-striped>tbody>tr:nth-of-type(odd)>*{
	background:#fcf7f1;
	--bs-table-bg-type: none;
}

.invoices-page .button{
	padding: 5px 15px;
    font-size: 15px;
}

.invoices-page .material-symbols-outlined{
	vertical-align: middle;
	font-size: 20px;
}

/* COOKIE BANNER*/
#cookie-banner{
	display: none;
    position: fixed;
    bottom: 25px;
    left: 25px;
    right: 25px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 22%);
    z-index: 9999;
    max-width: 380px;
    padding: 20px;
    background: #fff;
}

#cookie-banner .button{
	display: inline-block;
    padding: 10px 25px;
}

#cookie-banner a{
	color:#ff6600;
}

/* FOOTER */
footer {
    padding: 0px 0 50px;
    font-size: 16px;
    width: 100%;
    bottom: 0;
}

footer p {
    margin: 0;
    font-size: 16px;
}

footer a {
    text-decoration: none;
    font-weight: bold;
}

footer .dropdown-toggle {
    border: 0px;
    background: #f8f0e2;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
	float:right;
	margin-top: -15px;
	color: #333;
}

footer .dropdown-menu{
	border-radius: 20px;
    border: 0px;
    margin-bottom: 5px !important;
    box-shadow: rgb(56 56 56 / 23%) 0 3px 10px;
}

footer .dropdown-item{
	padding: 8px 26px;
}

footer .dropdown-item.active, .dropdown-item:active {
    background-color: #ff6600;
}

/* MOBILE */
@media only screen and (max-width: 1110px) {

	.navbar-light .navbar-nav .nav-link {
		padding: 0px 0px 0px 15px;
		font-size: 15px;
	}

	.homepage-examples .example span.arrow {
		margin-top: 90px;
		font-size: 40px;
		margin-right: -30px;
	}

	.book .pdf {
		height: 640px;
	}
}

@media only screen and (max-width: 991px) {

	.homepage-top .examples, .homepage-examples .example a.cover, .idea .cover, .idea .cover2, .booklook .cover, .books .item .cover, .book .inputwrapper .cover, .ideas .cover, .custom-carousel-item .cover, .cart .cart-item .cover, .coloring-books .cover{
		transform: none;
	}

	.navbar {
		background-color: #faf8f0f0;
		position: fixed;
        top: 0;
        width: 100%;
		padding-top: 10px;
        padding-bottom: 10px;
	}
	.navbar-collapse{
		position: fixed;
        top: 69px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background-color: #faf8f0f0;
        z-index: 1050;
		padding-right: calc(var(--bs-gutter-x)* .5);
		padding-left: calc(var(--bs-gutter-x)* .5);
	}

	.navbar-light .navbar-nav{
		padding:20px 0px;
		min-height: calc(100vh - 123px);
	}

	.navbar .dropdown-menu {
		border-radius: 0px;
		border:0px;
		box-shadow: none;
		margin-top: 0px;
		border-bottom: 1px solid #f5640026;
		background: #ffffffc7;
	}

	.navbar-toggler:focus,
	.navbar-toggler:active,
	.navbar-toggler-icon:focus {
		outline: none;
		box-shadow: none;
	}

	.navbar-light .navbar-toggler{
		border:0px;
		padding: .25rem 0px;
		display: flex;
        flex-direction: column;
        align-items: flex-start;
	}

	.icon-bar {
	  display: block;
	  width: 26px;
	  height: 3px;
	  background-color: #333;
	  border-radius: 3px;
	  margin: 2px 4px;
	  transition: all 0.2s;
	}

	.middle-bar{
		width: 22px;
	}

	.bottom-bar{
		width: 18px;
	}

	 :has(#navbarNav.show) .top-bar {
	  transform: rotate(45deg);
	  transform-origin: 10% 10%;
	}

	 :has(#navbarNav.show) .middle-bar {
	  opacity: 0;
	}

	 :has(#navbarNav.show) .bottom-bar {
	  transform: rotate(-45deg);
	  transform-origin: 10% 90%;
	  width: 26px;
	}

	.navbar-light .navbar-nav .nav-link{
		padding: 14px 0px;
        border-bottom: 1px solid #f5640026;
        font-size: 20px;
	}

	.navbar-light .navbar-nav .button{
		width: 100%;
		text-align: center;
		margin: 14px 0px 0px;
		padding: 9px 0px;
		color:#fff;
	}

	.navbar img {
		margin-top: 0px;
	}

	.navbar .menu2 ul li.item {
		padding: 6px 0px 0px 18px;
	}

	.navbar .menu2 ul li.account {
		padding-left:0px !important;
	}

	.navbar .menu2 .cart_items {
		top: 2px;
	}

	.navbar .dropdown-item {
		font-weight: 700;
		font-size: 17px;
	}

	.navbar .menu2 ul li {
		padding: 2px 0px;
	}

	.homepage-top h1, .homepage-top h1.long-title {
		font-size: 45px;
	}

	.homepage-reviews .grid {
		column-count: 3;
	}

	.homepage-howitworks img.step {
		max-height: 235px;
		margin: 35px 0px;
	}

	.homepage-examples .example span.arrow {
        margin-top: 65px;
        margin-right: -20px;
        font-size: 35px;
	}

	footer .dropdown-toggle {
		float: inherit;
        margin-top: 10px;
	}

	.orders .card .title-info, .orders .card .title-info-long {
		width: 100%;
	}

}


@media only screen and (max-width: 767px) {

	.custom-accordion-button, .custom-accordion-button:focus {
		padding: 8px 0px 16px;
        margin-bottom: 10px;
        font-size: 16px;
	}

	.breadcrumb{
		font-size: 14px;
	}

	#faqImage {
		margin-bottom: 50px;
		height: 320px;
		border-radius: 30px;
		object-position: bottom;
	}

	.topbar-action {
		height:40px;
		line-height:40px;
	}

	.topbar-action p{
		font-size: 14px;
        line-height: 19px;
        margin: 6px auto;
	}

	.topbar-action .material-symbols-outlined {
		font-size: 18px;
	}

	.topbar-action b {
		margin: 0px 6px;
        color: transparent;
	}

	.navbar-collapse {
        top: 64px;
    }

	.nav-item {
		padding: 0px;
	}

	.icon-bar {
        width: 24px;
    }

	 .middle-bar {
        width: 20px;
    }

	.bottom-bar {
        width: 16px;
    }

	:has(#navbarNav.show) .top-bar {
        transform-origin: 5% 10%;
    }

	:has(#navbarNav.show) .bottom-bar {
        width: 24px;
    }

	.navbar img {
		height: 32px;
		margin-top: 0px;
	}

	.navbar img.pl {
		height: 28px;
		margin-top: 0px;
	}

	.navbar img.it {
		height: 29px;
		margin-top: 0px;
	}

	.navbar img.en {
		height: 31px;
		margin-top: 0px;
	}

	.navbar .menu2 ul li.item{
        padding: 6px 0px 0px 10px;
    }

	.navbar .menu2 .material-symbols-outlined {
		font-size: 27px;
	}

	.navbar .menu2 .cart_items {
		height: 16px;
		width: 16px;
		line-height: 16px;
		font-size: 12px;
	}

	.modal-footer .button {
		margin-bottom: 10px !important;
		width:100%;
	}

	.modal-header .modal-title {
		font-weight: 600;
		font-size: 16px;
		line-height: 120%;
	}

	.homepage-top {
		padding: 15px 0px;
		height:auto;
		margin-bottom: -910px;
	}

	.homepage-top h1, .homepage-top h1.long-title {
		font-size: 34px;
        margin-bottom: 5px;
        max-width: 100%;
		text-align:center;
	}

	.homepage-top p {
		font-size: 18px;
		text-align:center;
	}

	.homepage-top p.ref{
		margin-top: -15px;
		border-radius: 20px;
	}

	.homepage-top .button{
	   padding: 10px 30px;
	   margin:0px auto;
	}

	.homepage-top span.cta-text{
		margin: 5px auto 40px;
	}

	.homepage-top .slider1{
		margin: 80px -7.5px 0px 0px;
	}

	.homepage-top .slider2{
		margin-top:40px;
		margin:40px -7.5px 0px;
	}

	.homepage-top .slider3{
		margin:5px 0px 0px -7.5px;
	}

	.homepage-top .examples .border-right {
		right: -3px;
		width: 3px;
	}

	.homepage-howitworks .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-howitworks h2 {
		font-size: 26px;
		margin-bottom: 25px;
	}

	.homepage-howitworks h3 {
		font-size: 21px;
	}

	.homepage-howitworks span {
		width: 35px;
		height: 35px;
		margin-right: 15px;
		font-size: 21px;
	}

	.homepage-howitworks hr {
		max-width: 200px;
		margin: 50px auto;
		border-top: 1px dashed rgb(255 102 0 / 100%);
		opacity: 1;
	}

	.homepage-howitworks img.step {
		max-height: 200px;
		margin: 0px 0px 30px;
	}

	.homepage-examples .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-examples h2 {
		font-size: 26px;
	}

	.homepage-examples p {
		font-size: 18px;
		margin-bottom: 30px;
	}

	.homepage-examples .box-wrapper {
		border-radius: 20px;
		padding: 15px;
		margin-bottom: 25px;
	}

	.homepage-examples .example .box {
		padding: 6px;
		margin-bottom:10px;
		border-radius: 10px;
	}

	.homepage-examples .example img {
		border-radius: 10px;
	}

	.homepage-examples .example a.cover img {
		border-radius: 3px;
	}

	.homepage-examples .example a.cover{
		box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
		left:0;
		border-radius:3px;
	}

	.homepage-examples .example a.cover .border-right {
        right: -4px;
        width: 4px;
        border-radius: 0px 3px 3px 0px;
        border-right: 1px solid #00000042;
    }

	.homepage-examples .example a.cover::before {
		content: '';
		position: absolute;
		top: 0;
		left: 3px;
		width: 4px;
		height: 100%;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
		border-radius: 5px 0px 0px 5px;
	}

	.homepage-examples .example a.cover::after {
		content: '';
		position: absolute;
		top: 0;
		left: 7px;
		width: 6px;
		height: 100%;
		background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
		pointer-events: none;
	}

	.homepage-examples .example .box-info {
		padding: 20px;
		margin-bottom: 0px;
	}

	.homepage-examples .example .box-link {
		font-size: 14px;
        padding: 10px 20px;
	}

	.homepage-examples .example span.arrow {
        font-size: 30px;
        margin-top: 48px;
        margin-right: -15px;
    }

	.homepage-examples h4 {
		font-size: 18px;
	}

	.homepage-examples h5 {
		font-size: 12px;
	}

	.homepage-examples ul li {
		margin-bottom: 10px;
		line-height: 18px;
		font-size: 14px;
	}

	.homepage-examples .item {
		flex: 0 0 140px;
		margin-right:15px;
		padding:5px;
	}

	.homepage-examples .item h5{
		font-size:13px;
		padding: 5px 5px 5px 2px;
	}


	.homepage-links .wrapper{
		padding: 30px 20px 15px;
		border-radius:30px;
	}

	.homepage-links .link-wrapper {
		padding: 20px 25px;
		margin-bottom: 15px;
	}

	.homepage-links .button{
		padding: 12px 40px;
		margin-top:20px;
	}

	.homepage-links h3 {
		font-size: 18px;
	}

	.homepage-faq .wrapper{
		padding: 35px 20px;
		border-radius:30px;
		margin-bottom:20px;
	}

	.homepage-faq h2 {
		font-size: 26px;
		margin-bottom: 15px;
	}

	.homepage-form .wrapper {
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-form h2{
		font-size: 26px;
	}

	.homepage-form p.top {
		font-size: 18px;
		margin-bottom: -20px;
	}

	.homepage-form h4 {
		font-size: 22px;
		padding-top: 3.5rem;
	}

	.homepage-form .inputwrapper {
		padding: 25px 20px;
	}

	.homepage-form .custum-padding-start{
		padding-left: .5rem;
	}

	.homepage-form .custum-padding-end{
		padding-right: .5rem;
	}

	.homepage-form .custom-radio-block{
		margin-top:10px;
	}

	.homepage-form .radio-content span {
		font-size: 14px;
	}

	.homepage-form .big span {
        font-size: 16px;
    }

	.homepage-form .radio-content {
		padding: 20px 10px;
	}

	.homepage-form .illustrationstyle{
		padding:6px;
	}

	.homepage-form .radio-content img {
		max-width: 70px;
	}

	.homepage-form .big img {
		max-width: 85px;
	}

	.homepage-form .illustrationstyle img{
		max-width:100%;
		border-radius:14px;
	}

	.homepage-form .illustrationstyle:hover img {
		margin-bottom: 6px;
	}

	.homepage-form .button {
		width: 100%;
		text-align: center;
	}

	.homepage-form .button.remove-character{
		width: auto;
	}

	.homepage-form .final-step h5 {
		font-size: 18px;
	}

	.homepage-form .final-step .magic-icon .material-symbols-outlined{
		margin-right: 14px;
		font-size: 18px;
		max-height: 36px;
		padding: 7px;
	}

	.homepage-form .final-step .product-feature-list .feature-icon{
		margin-right: 14px;
		font-size: 18px;
		padding: 7px;
	}

	.homepage-form .final-step .summary-item strong {
		min-width: auto;
	}

	.homepage-form .final-step #summary-image{
		margin: 0px;
	}

	.homepage-form .final-step .inputwrapper2 h4{
		font-size: 18px;
	}

	.homepage-form .final-step .price-cta-wrapper .price-display {
		font-size: 1.5rem;
	}

	.homepage-form .final-step .price-cta-wrapper .price-display-discount {
		font-size: 13px;
	}

	.homepage-form .final-step .inputwrapper2 .button{
		padding: 10px 0px;
		font-size: 16px;
		margin-top: 12px;
	}

	.homepage-form .payment-wrapper img {
		width: 26px;
		margin-right: 8px;
	}

	.homepage-form .notification {
		padding: 10px;
	}

	.homepage-form .notification .material-symbols-outlined {
		margin-top: 0px;
	}

	.homepage-form .modal-body .font-title{
		top: 15px;
		font-size: 28px;
	}

	.homepage-reviews .wrapper{
		padding: 35px 20px;
		border-radius:30px;
	}

	.homepage-reviews h2 {
		font-size: 26px;
		margin-bottom: 15px;
	}

	.homepage-reviews .grid {
		column-count: 2;
		column-gap: 0.5rem;
	}

	.homepage-reviews .grid-item {
		margin-bottom: 0.5rem;
	}

	.homepage-reviews .card-body{
		padding: 11px 11px 14px;
	}

	.homepage-reviews .card3 {
		padding:0px;
	}

	.homepage-reviews .item .cover{
		margin: 14px 14px 18px;
	}

	.homepage-reviews .item .cover .border-right {
        right: -4px;
        width: 4px;
        border-radius: 0px 3px 3px 0px;
        border-right: 1px solid #00000042;
    }

	.homepage-reviews .item .cover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 3px;
        width: 4px;
        height: 100%;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
        border-radius: 5px 0px 0px 5px;
    }

	.homepage-reviews .item .cover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 7px;
        width: 6px;
        height: 100%;
        background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
        pointer-events: none;
    }

	.homepage-reviews .item .material-symbols-outlined {
		font-size: 19px;
	}

	.homepage-reviews .item p {
		line-height: 20px;
        font-size: 13px;
	}

	.homepage-reviews .card-title {
		font-size: 13px;
	}

	.homepage-reviews .item hr {
		max-width: 20px;
		margin: 10px 0px;
	}

	.theme-overview .wrapper {
        padding: 35px 8px 20px;
        border-radius: 30px;
    }

	.theme-overview .wrapper h2 {
		font-size: 26px;
		margin-bottom:20px;
	}

	.theme-overview li {
		margin-right:0px !important;
	}

	.theme-overview ul a {
		padding: 5px 10px;
        font-size: 14px;
		margin-bottom: 9px;
	}

	.theme-overview ul a img {
		height: 18px;
	}

	.usp .wrapper {
        padding: 35px 20px;
        border-radius: 30px;
    }

	.usp .usp-box {
		padding: 35px 20px 10px;
		border-radius: 20px;
	}

	.usp h2 {
		font-size: 26px;
	}

	.usp p {
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 23px;
	}

	.books {
		margin-top: 15px;
	}

	.books h1 {
		font-size: 28px;
		margin-bottom: 15px;
	}

	.books .wrapper {
		border-radius: 28px;
		padding: 15px;
		margin-bottom: 30px;
	}

	.books .wrapper2{
		margin-bottom: 15px;
		padding: 20px;

	}

	.books .notification span{
		margin-top: 0px;
	}

	.cart{
		margin-top: 15px;
	}

	.cart h1 {
		font-size: 28px;
		margin-bottom: 15px;
	}

	.cart h2 {
        font-size: 26px;
    }

	.cart h3 {
        font-size: 22px;
    }

	.cart .wrapper {
		border-radius: 28px;
		padding: 15px;
		margin-bottom: 30px;
	}

	.cart .wrapper3 {
        padding: 25px 20px;
    }

	.cart .inputwrapper {
        padding: 20px 15px;
    }

	.cart .empty h2 {
		color: #333;
		font-size: 18px;
		margin-bottom: 20px;
	}

	.cart .empty .button{
		width:100%;
	}

	.cart .empty .material-symbols-outlined {
		margin: 15px auto 25px;
	}

	.cart .cart-item-notification span {
		margin: 0 auto 5px;
	}

	.cart .cart-item-notification h3 {
		font-size: 18px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		align-content: center;
		flex-wrap: wrap;
	}

	.cart .cart-item-notification .button {
		padding: 8px 15px;
		font-size: 14px;
	}

	.cart .cart-item h5 {
		font-size: 16px;
	}

	.cart .cart-item p {
		font-size: 14px;
	}

	.cart .cart-item hr {
		margin: 10px 0px 5px;
	}

	.book {
		margin-top: 15px;
	}

	.book h1 {
		font-size: 28px;
		margin-bottom: 15px;
	}

	.book h2 {
		font-size: 26px;
	}

	.book h4 {
		font-size: 20px;
	}

	.book p.top {
		font-size: 17px;
		margin-bottom: 20px;
	}

	.book .top-title {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.book .pdf {
		height: 530px;
		width: 100%;
	}

	.book .wrapper {
		border-radius: 28px;
		padding: 15px;
		margin-bottom: 30px;
	}

	.book .wrapper2 {
		padding: 25px 20px;
		margin-top: -10px;
	}

	.book .wrapper3 {
		padding: 25px 20px;
	}

	.book .inputwrapper {
		padding: 20px 15px;
	}

	.book .button, .book .delete  {
		display:block;
		width: 100%;
	}

	.book .form-footer ul {
		display: inline-block;
		width: 100%;
	}

	.book #priceDiscounted {
		font-size: 28px;
	}

	.book .price-wrapper span{
		margin:0px;
	}

	.book .price-wrapper span.original{
		margin-left:15px;
	}

	.book #priceSale {
		margin-top: 10px;
	}

	.book .referral-code .button {
		padding: 10px;
	}
	.book .referral-code a {
		font-size: 14px;
	}

	.book .price-wrapper {
		border-radius: 35px;
        margin-right: 0px;
        text-align: center;
        padding-bottom: 0px;
        width: 100%;
        max-width: 100%;
        display: inline-block;
        padding-top: 10px
	}

	.book .payment-wrapper {
		margin-top: 20px;
		text-align: center;
		width: 100%;
		float: inherit;
	}

	.book .price-wrapper .button {
		padding: 12px 5px;
        margin: 7px 0px 0px;
	}

	.book .ebook-discount-explanation {
		text-align: center;
	}

	.book .inputwrapper .shipping-option{
		padding: 10px 35px;
		margin: 5px 0px 10px;
	}

	.book .inputwrapper .shipping-option label {
		margin-left: 5px;
		font-size: 14px;
    }

	.book .inputwrapper #showMoreOptions {
		font-size: 14px;
	}

	.book .options .notification span {
		margin-top: 0px;
	}

	.book-edit {
		margin-top: 15px;
	}

	.book-edit h1{
		font-size: 28px;
		margin-bottom: 15px;
	}

	.book-edit h3 {
		font-size: 21px;
		margin-bottom: 10px;
	}

	.book-edit .wrapper {
		padding: 35px 20px;
		border-radius:30px;
	}

	.book-edit textarea.form-control {
		min-height: 235px;
	}

	.book-edit .wrapper .edit-button-box .button{
		width: 100%;
		padding: 10px;
		margin-bottom: 0px;
	}

	.book-edit .buttons{
		display: flex;
		flex-direction: column-reverse;
	}

	.book-edit .buttons .button2{
		margin-top: 5px;
		padding: 5px 10px !important;
		font-size: 16px;
	}

  .editImageModal .btn-outline-primary{
    font-size: 14px;
    flex-wrap: wrap;
  }

	.editImageModal .notify {
		padding: 10px;
	}

	.editImageModal .notify p {
		font-size: 15px;
		font-weight: 500;
	}

	.editImageModal .notify span {
		font-size: 24px;
    margin-right: 6px;
	}

	.editImageModal .button{
		width: 100%;
		padding: 10px 10px;
        font-size: 16px;
	}

	.orders{
		margin-top: 15px;
	}

	.orders h1{
		font-size: 28px;
		margin-bottom: 15px;
	}

	.orders .wrapper {
		padding: 25px;
		border-radius: 28px;
	}

	.blog-item .breadcrumb-item {
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 300px;
		white-space: nowrap;
	}

	.blog, .blog-item {
		margin-top:15px;
	}

	.blog h1{
		font-size: 28px;
	}

	.blog h4{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.blog .info {
        font-size: 18px;
    }

	.blog-item h1{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.blog .card h5 {
		font-size: 22px;
	}

	.blog-item .button{
		width: 100%;
		font-size: 16px;
		padding: 6px;
		display: flex;
        justify-content: center;
	}

	.blog-item img.featured {
		max-height: 250px;
	}

	.blog-item h5 {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.blog-item .date {
		font-size: 14px;
	}

	.blog-item .wrapper {
		padding: 20px 15px;
		margin-bottom: 20px;
	}

	.blog-item .wrapper h2 {
		font-size: 25px;
	}

	.blog-item .table-of-contents ul a{
		color: #f60
	}

	.blog-item .table-of-contents ul li.toc-level-3{
		font-weight:400;
	}

	.blog-item .table-of-contents ul li.toc-level-2{
		font-weight:700;
	}

	.ideas, .idea {
		margin-top:15px;
	}

	.ideas h1{
		font-size: 28px;
	}

	.idea h1{
		font-size: 26px;
		margin-bottom: 15px;
	}

	.ideas .info, .idea .info{
		font-size: 18px;
	}

	.ideas .wrapper{
		border-radius: 28px;
	    padding: 15px;
	}

	.ideas ul.cats li a{
		font-size:14px;
	}

	.ideas .card, .idea .card {
		padding: 20px;
	}

	.ideas .cover h5, .idea .cover2 h5{
		font-size: 15px;
	}

	.ideas .card h4, .idea .card h4{
		font-size: 17px;
	}

	.idea .wrapper{
		border-radius: 28px;
	    padding: 25px 20px;
	}

	.idea .button {
		width: 100%;
	}

	.idea h2{
		font-size: 26px;
		margin-bottom: 8px;
	}

	.idea h2.others {
        font-size: 26px;
        margin-bottom: 15px;
    }

	.idea h3 {
		font-size: 18px;
	}

	.idea .box-buttons {
		padding: 15px 15px 7px;
	}

	.idea .box-usp {
		padding: 12px 15px;
	}

	.idea .box-story {
		padding: 20px;
	}

	.idea .book-list {
		padding: 20px;
	}

	.idea .book-list h2 {
		margin-bottom: 15px;
		font-size: 18px;
	}

	.idea .book-list ul li {
		font-size: 16px;
	}

	.idea .cover h2 {
		font-size: 25px;
		top: 25px;
		text-shadow: -1px 0 #00000096, 0 2px #000000e3, 1px 0 #00000096, 0 -1px #00000096;
	}

	.idea .gender-image {
		max-width: 115px;
		margin-top: -130px;
	}

	.idea .arrow {
		margin-right: 135px;
	}

	.examples h1{
		font-size: 28px;
	}

	.examples p{
		font-size: 18px;
	}

	.booklook .wrapper{
		padding: 35px 20px;
		border-radius: 28px;
	}

	.booklook h2{
		font-size: 26px;
	}

	.booklook p{
		font-size: 18px;
	}

	.booklook ul.usp li{
		font-size:15px;
	}

	.booklook ul.usp li span.material-symbols-outlined {
		margin-right: 5px;
	}

	.pricing .wrapper {
		padding: 15px 0px;
		border-radius: 28px;
	}

	.pricing .wrapper .button {
		padding: 12px 20px;
		width: 100%;
	}

	.pricing .wrapper .pricing-price .original {
		font-size: 14px;
		margin-right: 4px;
	}

	.pricing .wrapper .pricing-price .percentage {
		margin-left: 5px;
	}

	.pricing-top h1{
		font-size: 28px;
	}

	.pricing-top p{
		font-size: 18px;
	}

	.pricing-top p.ref{
		border-radius: 30px;
		font-size: 16px;
		line-height: 20px;
	}

	.card-creator-page{
		margin-top: 20px;
	}

	.card-creator-page .button-cat{
		padding: 4px 10px;
		margin-bottom: 5px;
		font-size: 14px;
	}

	.card-creator-page .top-page h1 {
		font-size: 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 25px;
        text-align: center;
	}

	.card-creator-page .top-page h1 img {
		height: 80px;
        margin-right: 0px;
        margin-bottom: 0px;
	}

	.card-creator-page .choice-grid .choice-content{
		padding: 8px;
	}

	.card-creator-page .choice-grid .choice-content2 {
		padding: 20px;
		border-radius: 15px;
	}

	.card-creator-page .price-and-nav, .card-creator-page .form-actions {
		margin-top: 20px;
	}

	.card-creator-page .step-header {
		margin-bottom: 15px;
	}

	.card-creator-page .step h2{
		font-size: 19px;
		margin-bottom: 15px;
	}

	.card-creator-page .step-header h2{
		font-size: 17px;
	}

	.card-creator-page #selection-summary{
		margin-top:20px;
	}

	.card-creator-page .editor-toolbar{
		margin-top:30px;
	}

	.card-creator-page .button{
		width:100%;
	}

	.card-creator-page .form-actions .button2 {
        bottom: 10px;
        padding: 10px;
        left: calc(var(--bs-gutter-x) * .5);
        right: calc(var(--bs-gutter-x) * .5);
        font-size: 15px;
		transform: none;
		width: auto;
    }

	.coloring-books {
		margin-top: 17px;
	}

	.coloring-books .custum-padding-end{
		padding-right: .5rem;
	}

	.coloring-books .custum-padding-start{
		padding-left: .5rem;
	}

	.coloring-books h1{
		font-size: 26px;
        flex-direction: column;
        margin-bottom: 25px;
	}

	.coloring-books h1 img {
		height: 90px;
        margin-right: 0px;
        margin-bottom: -7px;
	}

	.coloring-books .info{
		font-size: 17px;
        line-height: 26px;
	}

	.coloring-books .ronde-sticker{
		margin-top: -27px;
        margin-bottom: -38px;
		width: 90px;
		height: 90px;
		border: 2px dashed #fff;
	}

	.coloring-books .ronde-sticker p{
		font-size: 11px;
	}

	.coloring-books .wrapper{
		border-radius: 20px;
		padding: 20px 15px 10px;
	}

	.coloring-books h4 {
		font-size: 14px;
	}

	.coloring-books .cover img {
		border-radius: 3px;
	}

	.coloring-books .cover{
		box-shadow: -5px 5px 10px rgb(0 0 0 / 25%);
		left:0;
		border-radius:3px;
		margin-bottom:15px;
	}

	.coloring-books .cover .border-right {
        right: -4px;
        width: 4px;
        border-radius: 0px 3px 3px 0px;
        border-right: 1px solid #00000042;
    }

	.coloring-books .cover::before {
		content: '';
		position: absolute;
		top: 0;
		left: 3px;
		width: 4px;
		height: 100%;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
		border-radius: 5px 0px 0px 5px;
	}

	.coloring-books .cover::after {
		content: '';
		position: absolute;
		top: 0;
		left: 7px;
		width: 6px;
		height: 100%;
		background: linear-gradient(to right, rgb(255 255 255 / 20%), transparent);
		pointer-events: none;
	}

	.coloring-books .price{
		font-size:14px;
	}

	.coloring-books .btn-add-to-cart, .coloring-books .btn-add-to-cart:focus{
		padding: 6px;
		font-size: 15px;
	}

	.coloring-books .button2 {
		position: fixed;
		bottom: 10px;
		z-index: 1000;
		padding: 10px;
		left: calc(var(--bs-gutter-x) * .5);
		right: calc(var(--bs-gutter-x) * .5);
		font-size: 15px;
	}

	.coloring-books .button2:focus{
		padding: 10px 15px;
	}

	.coloring-books .product-details ul li{
		margin-bottom: 18px;
		font-size: 14px;
		line-height: 20px;
	}

	.page{
		margin-top: 15px;
	}

	.page h1{
		font-size: 28px;
	}

	.page .info{
		font-size: 18px;
	}

	.page .inputwrapper {
		padding: 20px 15px;
	}

	.page .wrapper {
		padding: 25px;
		border-radius: 28px;
	}

	.theme-top {
		padding: 15px 0px;
	}

	.theme-top h1 {
		font-size: 30px;
        margin-bottom: 5px;
	}

	.theme-top p {
		font-size: 17px
	}

	.theme-top .button{
	   padding: 10px 30px;
	}

	.theme-content h2{
		font-size: 26px;
	}

	.features-page h2 {
		font-size: 21px;
	}

	.features-page p {
		font-size: 16px;
	}

	.features-page .feature-icon {
		margin-right: 15px;
		width: 35px;
		height: 35px;
		font-size: 21px;
	}

	.features-page .imgbox {
		height: 160px;
        max-width: 100%;
        margin: 0 auto;
        padding: 20px;
        border-radius: 30px;
	}

	.review .button{
		width: 100%;
		padding: 12px 20px;
	}

	.help .search {
		border-radius: 20px;
		padding: 10px;
	}

	.help .card h5 {
		padding: 0px;
		font-size:16px;
	}

	.payment-page {
		margin-top: 15px;
	}

	.payment-page h1 {
		font-size: 28px;
	}

	.payment-page .referral-header h2 {
		font-size: 26px;
        margin-bottom: 15px;
    }

	.payment-page .referral-header p{
		font-size: 18px;
	}

	.payment-page .wrapper {
		padding: 25px;
		border-radius: 28px;
	}

	.payment-page .button{
		width:100%;
		padding: 12px 5px;
	}

}

@media only screen and (max-width: 560px) {

	.button, .button:focus{
		padding: 12px 30px;
	}

	/* reCAPTCHA */
    .recaptcha-wrapper {
        transform: scale(0.87);
		transform-origin: 0 0;
    }

	.homepage-top {
		padding: 15px 0px;
		height:auto;
		margin-bottom: -490px;
	}
}

@media only screen and (max-width: 360px) {
	.navbar .menu2 ul li.item {
        padding: 6px 0px 0px 7px;
    }

	.homepage-form .final-step .inputwrapper2 .button{
		font-size: 15px;
	}

}