@import url("reset.less");

body {
	color:@black;
	font-size:15px;
	line-height:25px;
	font-family:Helvetica, Arial;
	background:#EAF6FF;
}

/*.topbar {
	background:#000;
	
	a {
		padding:12px 12px 13px 12px;
		display:inline-block;
		color:@graydark;
		
		&:hover {
			color:#fff;
		}
		
		span {
			width:25px;
			display:inline-block;
			text-align:left;
		}
	}
	
	.cart-contents-div {
		margin:5px 0 0 20px;
		display:inline-block;
		position:relative;
		vertical-align:top;
	
		.cart-contents {
			margin:5px 0 0 0;
			display:inline-block;
			position:relative;
			color:@graydark;
			font-size:24px;
			
			span {
				width:10px;
				height:10px;
				padding:5px;
				position:absolute;
				top:-8px;
				right:-11px;
				font-size:11px;
				line-height:11px;
				font-weight:bold;
				color:#fff;
				text-align:center;
				background:@blue;
				-webkit-border-radius:30px;
			  -moz-border-radius:30px;
			  border-radius:30px;
			}
		}
		
		.cart-contents-minicart {
			display:none;
			width:280px;
			padding:15px;
			position:absolute;
			right:0;
			top:46px;
			text-align:left;
			z-index:1000;
			background:#fff;
			-webkit-box-shadow:0 12px 10px 0 rgba(0,0,0,0.2);
			box-shadow:0 12px 10px 0 rgba(0,0,0,0.2);
			
			&.active {
				display:block;
			}
			
			ul {
				margin:0;
				padding:0;
				list-style:none;
				
				li {
					margin:0 0 15px 0;
					padding:0;
					
					&:before {
				    content: ' ';
				    display: table;
			    }
					
					a {
						display:inline-block;
						color:@blue;
					}
					
					.remove_from_cart_button {
				    height: 1em;
				    width: 1em;
				    display:inline-block;
						font-size: 1.5em;
				    text-align: center;
				    line-height: 1;
				    border-radius: 100%;
				    color:red!important;
				    text-decoration: none;
				    font-weight: 700;
				    border: 0;
					}
					
					img {
						display:none;
					}
				}
			}
			
			.woocommerce-mini-cart__total {
				margin:0 0 20px 0;
				padding:15px 0;
				border-top:1px solid #ededed;
				border-bottom:1px solid #ededed;
			}
			
			.button {
				margin:5px 2px;
				padding:6px 50px 6px 15px !important;
				font-size:14px;
				
				&:after {
					padding:6px 15px;
				}
			}
		}
	}
}*/

header {
	width:100%;
	position:fixed;
	top:0;
	z-index:10000;
	background:@blue;
	
	.logo {
		width:58px;
		padding:5px 8px;
		display:inline-block;
		vertical-align:top;
		background:@black;
	}
	
	.menu-hoofdmenu-container {
		display:inline-block;
		vertical-align:top;
		background:@blue;
		border-radius:0px 15px 0px 0px;
		
		ul {
			margin:0;
			padding:0;
			list-style:none;
			
			li {
				margin:9px 15px;
				padding:0;
				display:inline-block;
				
				a {
					color:#fff;
					font-size:15px;
					line-height:22px;
					font-weight:bold;
					
					&:hover {
						text-decoration:underline;
					}
				}
			}
		}
	}
	
	.menu_toggle {
		display:none;
	}
}

.front_slider {
	height:450px;
	padding:250px 0 0 0;
	position:relative;
	.backgroundcover;
	
	&:after {
		content:'';
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		background:rgba(0, 0, 0, 0.6);
	}
	
	.row {
		position:relative;
		z-index:10;
	}
	
	h1 {
		color:#fff;
		font-size:45px;
		line-height:55px;
	}
}

.front_intro {
	
	.intro_div {
		margin:-75px 0 0 0;
		display:flex;
		position:relative;
		z-index:100;
		
		.intro_div_inner {
			flex:1;
			padding:30px 30px 50px 30px;
			background:#fff;
			
			&.first {
				border-radius:0 0 0 15px;
			}
			
			&.second {
				border-radius:0px 15px 0px 0px;
				.backgroundcover;
			}
		}
	}
}

.front_usps {
	padding:75px 0;
	
	ul {
		list-style:none;
		margin:20px 0;
		padding:0;
		
		li {
			margin:0 0 10px 0;
			padding:0;
			font-size:20px;
			line-height:32px;
			
			&:before {
			  content: "\f00c";
				font-family:Fontawesome;
			  padding: 0 10px 0 0;
			}
		}
	}
}

.page_header {
	margin:70px 0 36px 0;
		
	h1 {
		margin:0;
		font-size:35px;
		line-height:45px;
	}
}

.page_content {
	min-height:500px;
	padding:60px 0 50px 0;
	display:flex;
	gap:20px;
	
	.navigation {
		flex:1;
		max-width:250px;
		vertical-align:top;
		background:#fff;
		
		ul.head_nav {
			width:100%;
			max-width:249px;
			position:fixed;
			margin:0;
			padding:0;
			list-style:none;
			
			li {
				margin:0;
				padding:0;
				border-bottom:1px solid #eee;
			}
			
			.first_item {
				margin:0;
				padding:0;
				position:relative;
				cursor:pointer;
				background:#fff;
				.transition;
				
				&:after {
					content:"\f054";
					position:absolute;
					font-size:10px;
					top:5px;
					right:10px;
					font-family:Fontawesome;
				}
				
				&.hover {
					color:#fff;
					background:@blue;
				}
				
				&.show {
					color:#fff;
					background:@blue;
					
					&:after {
						.transform(rotate(90deg));
					}
					
					.first_item_ul {
						display:block;
						list-style:none;
						color:#000;
						background:#fff;
					}
				}
				
				span {
					padding:5px 0 5px 5px;
					font-size:12px;
				}
				
				h3 {
					margin:0;
					padding:8px 5px;
					display:inline-block;
					font-size:13px;
					line-height:20px;
				}
				
				small {
					font-size:70%;
				}
				
				.first_item_ul {
					display:none;
					margin:0;
					
					li {
						
						&.second_item {
							margin:0 0 0 10px;
							padding:0;
							position:relative;
							cursor:pointer;
							background:#fff;
							.transition;
							
							&:after {
								content:"\f054";
								position:absolute;
								font-size:10px;
								top:5px;
								right:10px;
								font-family:Fontawesome;
							}
							
							&.show {
								
								&:after {
									.transform(rotate(90deg));
								}
								
								.second_item_ul {
									display:block;
								}
							}
							
							.second_item_ul {
								display:none;
								list-style-type: none;
								
								li {
								}
							}
						}
						
						a {
							padding:8px 5px;
							display:flex;
							align-items: flex-start;
							gap:5px;
							color:#000;
							font-size:12px;
							line-height:15px;
							
							&:hover, &.show {
								color:@blue;
								background:#dbdbdb;
							}
							
							span {
								width:30px;
								display:inline-block;
								padding:0;
							}
						}
					}
				}
				
				.second_item_ul {
					margin:0 0 0 10px;
				}
			}
		}
	}
	
	.content_div {
		flex:3;
	}
	
	.content {
		width:100%;
		overflow:scroll;
		left:0;
		.transition;
		
		h2 {
			margin:20px 0 20px 20px;
			font-size:25px;
			line-height:30px;
			.transition;
			
			img {
				width:30px;
				margin:0 10px 0 0;
				border-radius:100px;
				-webkit-border-radius:100px;
			}
		}
		
		.content_block {
			background:#fff;
			
			.context_block_info {
				padding:20px 0 0 0;
				text-align:center;
			}
			
			.content_block_inner {
				min-height:75px;
				padding:20px;
				display:flex;
				gap:30px;
				font-size:13px;
				line-height:22px;
				
				.content_block_text {
					flex:1;
					vertical-align:top;
				
					h4 {
						margin:0 0 10px 0;
						font-size:15px;
						line-height:22px;
						
						span {
							width:40px;
							display:inline-block;
							font-weight:normal;
						}
						
						small {
							font-weight:normal;
						}
					}
					
					a {
						color:@blue;
						
						&:hover {
							color:@graydark;
						}
					}
					
					.content_blok_intro {
						margin:0 0 20px 0;
					}
					
					.content_block_text_inner {
					}
				}				
			}
		}
		
		.buttons {
			margin:20px 0;
			text-align:center;
			
			a {
				margin:0 5px;
				padding:1px 20px;
				display:inline-block;
				color:#fff;
				text-align:center;
				font-weight:bold;
				background:@blue;
				border-radius:30px;
				-webkit-border-radius:30px;
				
				&:hover {
					color:#fff;
					background:#000;
				}
			}
		}
					
		.extra_info {
			
			div {
				display:none;
				position:relative;
				margin:20px 0;
				padding:20px;
				font-size:13px;
				line-height:22px;
				background:#fff;
				
				&.show {
					display:block;
				}
				
				.close_div {
					position:absolute;
					display:inline-block;
					top:11px;
					right:15px;
					margin:0;
					padding:0;
					color:@blue;
					font-size:20px;
					line-height:20px;
					cursor:pointer;
					background:none;
					
					&:hover {
						color:#000;
					}
				}
				
				.extra_info_inner_divs {
					max-height:200px;
					overflow:scroll;
					position:relative;
					display:flex;
					gap:30px;
					
					.extra_info_inner {		
						flex:1;
						display:block;
						margin:0;
						padding:0;
					}
				}
			}
		}
	}
}

footer {
	padding:50px 0;
	color:#fff;
	background:#000;
	
	.grid_10 {
		display:flex;
		
		.footer_div {
			flex:1;
			
			h3 {
				margin:0 0 20px 0;
			}
			
			ul {
				margin:0;
				padding:0;
				list-style:none;
				
				li {
					margin:0 0 10px 0;
					padding:0;
					
					span {
						width:30px;
						display:inline-block;
					}
					
					a {
						color:#fff;
						
						&:hover {
							text-decoration:underline;
						}
					}
				}
			}
		}
	}
}

.footer_bottom {
	padding:30px 0;
	color:#fff;
	background:#000;
}

/*=================================================================== Global ===================================================================*/

input[type=text], input[type=email], input[type=tel], textarea {
	width:100% !important;
	margin:0 0 15px 0;
	padding:8px !important;
	font-size:14px;
	font-family:Helvetica, Arial;
	background:#fff;
	border:1px solid #000;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	.transition;
	
	&:focus {
		border:1px solid @blue;
		
		&::placeholder {
			opacity:0;
		}
		
		&:-ms-input-placeholder {
			opacity:0;
		}
		
		&::-ms-input-placeholder {
			opacity:0;
		}
	}
}

input[type="radio"] {
  -webkit-appearance:radio;
}

input[type="checkbox"] {
	-webkit-appearance:checkbox;
}

select {
	width:100%;
	height:40px;
	margin:0 0 15px 0;
}

input[type=submit] {
	width:auto;
	padding:10px;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	border:none;
	text-transform:uppercase;
	background:@blue;
	
	&:hover { 
		background:#000;
	}
}

.button {
	display:inline-block;
	position:relative;
	overflow:hidden;
	padding:12px 80px 12px 30px !important;
	color:#fff !important;
	font-size:20px;
	line-height:30px;
	font-weight:bold;
	background:@blue !important;
	border-radius:0 15px 0 15px;
	
	&:after {
	  content: "\f054";
	  position:absolute;
	  top:0;
	  right:0;
		padding:12px 20px;
		color:#fff;
		font-family:Fontawesome;
		background:@bluedark;
	}
	
	&.white {
		color:#000;
		background:#fff;
	}
	
	&:hover {
		color:#fff;
		cursor:pointer;
		background:#000 !important;
		.transform(translateY(-5px));
	}
}