/* ============================= */
/*  JONGERENNUMEROLOGIE WEBSITE  */
/*  VERSIE 4.0.00                */
/*  2025 KW 2                    */
/* ============================= */
/*  (c) 2025 LuSaneT             */
/*  www.lusanet.nl               */
/* ============================= */

@font-face {
	font-family: 'TheoJeukens';
	src: url('theojeukens.eot');
	src: local('☺'),
		 url('theojeukens.woff') format('woff'),
		 url('theojeukens.ttf') format('truetype'),
		 url('theojeukens.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@keyframes slidein {
    from { margin-bottom: 150px; margin-top: -150px; opacity: 0; }
    to   { margin-bottom: 0px;margin-top: 0px; opacity: 1; }
}

@keyframes fadein {
    from { padding-left: 100px; opacity: 0; }
    to   { padding-left: 0px; opacity: 1; }
}

html, body {
	min-height: 99.9%;
}

body {
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #FFFFFF;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	text-align: left;
}

.floatBreak {
	clear: both;
	float: none;
}

/* === HEADER === */
	header {
		position: fixed;
		z-index: 5;
		left: 0px;
		top: 0px;
		right: 0px;
		width: 110%;
		height: 100px;
		margin-left: -5%;
		background: #ffffff; /* Old browsers */
		background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.97) 70%, rgba(255, 255, 255, 0.8) 100%);
		animation: slidein 1s;
	}

	header .wrapper {
		display: grid;
		grid-template-columns: 286px auto;
		gap: 50px;
		width: 90%;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	
	header .logo {
		width: 286px;
		height: 80px;
		margin-top: 10px;
		background-image: url('../images/header_logo.jpg');
		background-position: center center;
		background-repeat: no-repeat;
	}

	header nav ul, header nav li {
		display: inline-block;
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	
	header nav a {
		display: inline-block;
		padding-left: 9px;
		padding-right: 9px;
		color: #443c70;
		font-size: 16px;
		text-decoration: none;
		line-height: 25px;
		white-space: nowrap;
	}
	header nav a:hover {
		color: #22afe2;
		text-decoration: underline;
	}
	
	header nav a:first-of-type  {
		padding-top: 35px;
	}

/* === PAGINAS === */
	.pageBox {
		display: block;
		margin-top: 150px;
	}

	.pageBox > div {
		position: relative;
		width: 90%;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 40px;
		padding-top: 40px;
		line-height: 22px;
		transition: opacity 0.3s;
		animation: fadein 1s;
	}
	.pageBox > div:nth-child(odd) {
		color: #e1e8eb;
	}

	.pageBox > div:nth-child(odd)::before {
		z-index: -1;
		display: block;
		position: absolute;
		left: calc(-0.5 * (100vw - 100%) - 20px);
		right: calc(-0.5 * (100vw - 100%) - 20px);
		top: 0px;
		bottom: 0px;
		background-color: #443c70;
		box-shadow: 0px 0px 10px #182024;
		transform: rotate(-1deg);
		content: "";
	}

	.blockCI picture, .blockCI img {
		width: 100%;
	}

	.blockLIL {
		width: 100%;
		display: grid;
		grid-template-columns: 35% 65%;
		gap: 35px;
	}

	.blockLIR {
		width: 100%;
		display: grid;
		grid-template-columns: 65% 35%;
		gap: 35px;
	}

	.pageBox h2 {
		color: #443c70;
		font-family: Tahoma;
		font-size: 24px;
		font-weight: normal;
		letter-spacing: 1px;
	}
	.pageBox > div:nth-child(odd) h2 {
		color: #FFFFFF;
	}

	.pageBox h3 {
		margin-top: 30px;
		color: #443c70;
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 18px;
		font-weight: normal;
		letter-spacing: 1px;
	}
	.pageBox div:nth-child(odd) h3 {
		color: #FFFFFF;
	}
	
	.pageBox div:nth-child(odd) strong {
		color: #FFFFFF;
	}

	.pageBox a {
		color: #443c70;
		text-decoration: underline;
	}
	.pageBox > div:nth-child(odd) a {
		color: #FFFFFF;
		text-decoration: underline;
	}
	.pageBox a:hover {
		color: #22b0e2;
	}

	.pageBox a.promoButton {
		display: inline-block;
		padding: 7px 15px;
		background-color: #443c70;
		border: 2px solid #FFFFFF;
		border-radius: 25px;
		box-shadow: 0px 0px 5px #443c70;
		color: #FFFFFF;
		font-size: 15px;
		font-weight: bold;
		text-decoration: none;
		transition: all 0.2s ease;
	}
	.pageBox a.promoButton:hover, .pageBox div:nth-child(odd) a.promoButton:hover {
		background-color: #22b0e2;
		box-shadow: 0px 0px 5px #22b0e2;
	}
	.pageBox div:nth-child(odd) a.promoButton {
		background-color: #FFFFFF;
		border: 2px solid #443c70;
		box-shadow: 0px 0px 5px #FFFFFF;
		color: #443c70;
		text-decoration: none;
	}

	/* === TAB BLOCK === */
		.tabLabels {
			display: inline-block;
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		
		.tabLabels li {
			display: inline-block;
			overflow: hidden;
			width: 35px;
			height: 25px;
			margin: 0px;
			margin-right: 5px;
			margin-bottom: 1px;
			padding: 0px;
			border: 1px solid #b1add3;
			border-bottom: 1px solid #564f93;
			border-top-left-radius: 7px;
			border-top-right-radius: 7px;
			background-color: rgba(255, 255, 255, 0.8);
			color: #808080;
			text-align: center;
			cursor: pointer;
		}
		.tabLabels li.active {
			border: 1px solid #564f93;
			border-bottom: 0px;
			background-color: #FFFFFF;
			color: #000000;
		}
		
		.tabBox {
			width: 90%;
			max-width: 1000px;
			height: auto;
			margin-top: -7px;
			padding: 20px;
			border: 1px solid #564f93;
			border-bottom-left-radius: 7px;
			border-bottom-right-radius: 7px;
			border-top-right-radius: 7px;
			background-color: #FFFFFF;
			color: #000000;
		}
		
		.tabBox article {
			display: none;
			width: 100%;
			height: auto;
			min-height: 340px;
		}
		
		.tabBox article h3 {
			margin-top: 0px;
			color: #443c70;
			font-family: Tahoma;
			font-size: 24px;
			font-weight: normal;
			text-shadow: 1px 1px 1px rgba(30, 30, 30, 0.6);
		}
		.tabBox article h3:first-line {
			font-size: 18px;
		}

		.tabBox article img {
			float: right;
			width: 600px;
			height: 336px;
			margin-top: -65px;
			background-image: url('../images/animals_cards.jpg');
			background-repeat: no-repeat;
			background-size: 600px auto;
		}
		
		.tabBox article img.lion {
			background-position: 0px 0px;
		}		
		.tabBox article img.wolf {
			background-position: 0px -336px;
		}
		.tabBox article img.rabbit {
			background-position: 0px -672px;
		}
		.tabBox article img.bee {
			background-position: 0px -1008px;
		}
		.tabBox article img.swallow {
			background-position: 0px -1344px;
		}
		.tabBox article img.dog {
			background-position: 0px -1680px;
		}
		.tabBox article img.owl {
			background-position: 0px -2016px;
		}
		.tabBox article img.elephant {
			background-position: 0px -2352px;
		}
		.tabBox article img.dolphin {
			background-position: 0px -2688px;
		}
		.tabBox article img.frog {
			background-position: 0px -3024px;
		}

	/* === SIGNUP FORM === */
		form label {
			display: inline-block;
			width: 42%;
			margin-right: 5%;
			margin-top: 15px;
			padding-left: 5px;
			color: #443c70;
			font-size: 11px;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
		}
		section:nth-child(2n) form label {
			color: #e1e8eb;
		}
	
		form input, form select {
			display: inline-block;
			width: 42%;
			height: 24px;
			margin: 2px;
			margin-right: 5%;
			border: 1px solid #564f93;
			border-radius: 3px;
			background-color: #FFFFFF;
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
			box-sizing: border-box;
		}
		
		form input[type=submit], form input[type=button] {
			float: right;
			width: auto;
			height: 30px;
			margin-top: 30px;
			margin-right: 10%;
			padding-left: 15px;
			padding-right: 15px;
			background: #534c8c; /* Old browsers */
			background: linear-gradient(to bottom, #534c8c 0%,#625aa6 0%,#443f75 100%);
			color: #FFFFFF;
		}
		form input[type=button] {
			border: 1px solid #717171;
			background: #534c8c; /* Old browsers */
			background: linear-gradient(to bottom, #6C6C6C 0%,#E4E4E4 0%,#BEBEBE 100%);
			color: #303030;		
		}
		section:nth-child(even) form input[type=submit] {
			background: #6C6C6C; /* Old browsers */
			background: linear-gradient(to bottom, #6C6C6C 0%,#808080 0%,#5A5A5A 100%);
		}
		form input[type=radio] {
			width: auto;
			margin: 0px;
			margin-right: 3px;
			vertical-align: bottom;
		}
		
		form input[readonly=readonly], form select[disabled] {
			border: 0px;
			background-color: transparent;	
		}
		section:nth-child(2n) form input[readonly=readonly], section:nth-child(2n) form select[disabled=disabled] {
			color: #FFFFFF;
		}

		form .paymentMethod {
			display: inline-block;
			width: 42%;
			margin-right: 5%;
			margin-top: 15px;
			padding: 6px 12px;
			border: 1px solid #564f93;
			border-radius: 3px;
			font-size: 12px;
			font-style: italic;
			line-height: 24px;
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
			box-sizing: border-box;
			cursor: pointer;
		}
		form .paymentMethod:has(input:checked) {
			background-color: #e1deee;
		}
		form .paymentMethod.disabled {
			border: 0px;
			background: #FFFFFF;
			cursor: default;
		}

		form .paymentMethod input[type=radio] {
			display: none;
		}

		form .paymentMethod label {
			display: block;
			width: 100%;
			margin-top: 0px;
			margin-bottom: 5px;
			padding-left: 0px;
			color: #443c70;
			font-size: 11px;
			font-style: normal;
			font-weight: bold;
			text-transform: uppercase;
			cursor: inherit;
		}

		form .paymentMethod label::before {
			display: inline-block;
			width: 24px;
			height: 21px;
			margin-right: 7px;
			background-image: url('../images/paymentmethods.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
			content: "";
			vertical-align: middle;
		}
		form .paymentMethod.bank label::before {
			background-position: 0px -21px;
		}

	/* === ORDER TABEL === */
		ul.errorMessage {
			width: 80%;
			margin-left: 10%;
			margin-right: 10%;
			padding: 10px;
			border: 2px solid #800000;
			border-radius: 3px;
			background-color: #C00000;
			color: #FFFFFF;
		}
		
		ul.errorMessage li {
			margin-left: 20px;
			padding: 2px;
			padding-left: 5px;
		}
	
		.orderTable {
			width: 90%;
			border: 0px;
		}
		
		.orderTable td {
			border-top: 1px solid #443c70;
			padding: 8px;
		}
		section:nth-child(even) .orderTable td {
			border-top: 1px solid #e1e8eb;
		}
		
		.orderTable .header td, .orderTable .header td.product:first-line {
			border: 0px;
			color: #443c70;
			font-size: 11px;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
		}
		section:nth-child(even) .orderTable .header td, section:nth-child(even) .orderTable .header td.product:first-line {
			border: 0px;
			color: #e1e8eb;
		}
		
		.orderTable td.quantity {
			width: 10%;
		}
		.orderTable td.product {
			width: 60%;
			font-size: 12px;
			font-style: italic;
		}
		.orderTable td.product:first-line {
			font-size: 11pt;
			font-style: normal;
		}
		.orderTable td.price {
			width: 15%;
			text-align: right;
		}
		
		.orderTable tr.total td, .numerologyCalcTable .result {
			padding-bottom: 6px;
			padding-top: 6px;
			background-color: #e1deee;
			color: #423c70;
			font-weight: bold;
		}
		.numerologyCalcTable .result {
			text-align: center;
		}

	/* === REVIEWS === */
		.reviewBox .review {
			position: relative;
			width: 100%;
			min-height: 150px;
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 1px solid #6158a4;
		}

		.reviewBox .review .photo {
			clear: none;
			float: left;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			box-shadow: 0px 0px 10px #182024;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.reviewBox .review:nth-child(2n-1) .photo {
			float: right;
		}

		.reviewBox .review blockquote {
			width: 100%;
			margin: 0px;
			padding-top: 40px;
			font-size: 15px;
			font-style: italic;
			letter-spacing: 1px;
			text-align: center;
		}
		section:nth-child(2n) .reviewBox .review blockquote {
			color: #FFFFFF;
		}

		.reviewBox .review .details {
			width: 100%;
			color: #afaad2;
			font-size: 13px;
			text-align: center;
		}