/*
Theme Name: Nice Letters
Author: Wemessage
Author URI: http://www.wemessage.nl
Description: Nice Letters Wordpress Theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nice
Tags:
*/
.grecaptcha-badge { display:none; }
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: 'Ubuntu', sans-serif;
	letter-spacing:2px;
	line-height:36px;
}

body {
	margin: 0;
	overflow-x:hidden;
}

a,
a:active,
a:visited,
a:hover,
a:focus {
	outline: 0;
	text-decoration:none;
	color:inherit;
}

.page-content .half a {
	color:#f00000;
	font-weight:600;
}

b,
strong {
	font-weight: 700;
}

img {
	border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	margin:0;
	padding-bottom:20px 0;
}

p, li {
	margin:0;
	font-size:12px;
	font-family:'Open Sans', sans-serif;
}

.page-content p {
	margin-bottom:30px;
}
.page-content li {
	letter-spacing:1px;
	margin-left:20px;
}

ul,
ol {
	margin: 0;
	padding:0;
	list-style-type:disc;
	margin-bottom:30px;
}

img {
	height: auto;
	max-width: 100%;
}

.wrap {
	position:relative;
	width:95%;
	max-width:1170px;
	margin:0 auto;
}

.site-header .bel {
	display:none;
}

.site-header .bel:hover {
	color:#F00000;
	font-weight:300;
}

.site-header .wrap {
	width:100%;
	height:1px;
}

.main-navigation {
	width:262px;
}

.main-navigation li a {
	color:#ffffff;
	text-decoration:none;
}

.button {
	display:inline-block;
	border-radius:100px;
	padding:10px 40px;
	text-decoration:none;
	font-size:12px;
	border:1px solid #ffffff;
	transition:0.6s;
}
.button:hover {
	border:1px solid #000000;
}

/* ----------------------- */

.site-header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
}

.menu-button {
	position:fixed;
	top:0;
	right:0;
	color:#ffffff;
	text-transform:uppercase;
	cursor:pointer;
	z-index:999999;
	background:#F00000;
	padding:10px;
}

.menu-button img {
	display:inline-block;
	vertical-align:middle;
	position:relative;
	top:-3px;
	max-width:25px;
	transition:1s;
}

.active.menu-button img {
	transform:rotate(2250deg);
	-webkit-transform:rotate(225deg);
}
.logged-in .site-header {
	top:32px;
}

.logo {
	width:170px;
	position:relative;
	display:inline-block;
	margin-left:-30px;
}

.logo-background {
	position:relative;
	width:210px;
	overflow:hidden;
}

.logo-background img {
	margin-top:-680px;
	transition:1s;
	-webkit-transition:1s;
	top:-100px;
	position:relative;
}

.main-navigation {
    position: absolute;
    top: -500px;
    left: 18px;
	transition:1s;
}

.menu-open .main-navigation {
	top:120px;
}

.main-navigation ul ul {
	display:none;
}

.menu-open .logo-background img {
	margin-top:0;
	top:0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 100%;
    left: 0;
    background: #272727;
    opacity: 0;
	transition:0.8s;
}

.menu-open .menu-overlay {
	right:0;
	opacity:0.9;
}

.logo a {
    position: absolute;
    top: 15px;
    left: 38px;
}

.page-head {
	position:relative;
	max-height:500px;
	overflow:hidden;
}

.page-head img {
	display:block;
	width:100%;
}

.banner-slider .slick-slide {
	height:100vh;
	max-height:500px;
	position:relative;
}

.page-head h1 {
	text-align:center;
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	color:#ffffff;
}
.page-head .scroll p {
	padding-bottom:20px;
}
.page-head .scroll {
	position:absolute;
	bottom:30px;
	left:50%;
	width:100%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	color:#ffffff;
	text-align:center;
}
.page-head .overlay {
	background:#000000;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	opacity:0.5;
}
.page-content {
	position:relative;
	padding:30px 0;
}
.page-template-page-home .page-content {
	text-align:center;
	background:#efefef;
	padding:30px 0;
}

.page-content .button {
	background:#ffffff;
	color:#505050;
}

.page-content h1 {
	font-size:16px;
}

.diensten {
	position:relative;
	clear:both;
	overflow-x:hidden;
}

.dienst {
	width:100%;
	height:150px;
	position:relative;
	text-align:center;
	overflow:hidden;
	margin-bottom:2px;
}

.dienst img {
	display:block;
	width:100%;
	visibility:hidden;
}

.dienst .background {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

.dienst .overlay {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:#000000;
	opacity:0.6;
	z-index:1;
	transition:1s;
}

.dienst:hover .overlay {
	background:url(inc/img/dienst-gradient.png);
	background-repeat:repeat-x;
	background-size:auto 100%;
	opacity:1;
}

.dienst h2 {
	position:absolute;
	top:20px;
	width:100%;
	color:#ffffff;
	font-size:14px;
	z-index:3;
}

.dienst h2 img {
	visibility:visible;
	width:auto;
	margin:0 auto;
	transition:0.6s;
	display:inline-block;
	vertical-align:middle;
	margin-left:40px;
	opacity:0;
}

.dienst:hover h2 img {
	opacity:1;
}

.cta {
	background:url(inc/img/cta.png);
	background-repeat:repeat-x;
	background-size:auto 100%;
	clear:both;
	padding:30px 0;
	text-align:center;
	color:#ffffff;
	font-weight:300;
	position:relative;
}

.cta h4 {
	font-weight:300;
}

.cta * {
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
}

.cta .button {
	background:#efefef;
	text-decoration:none;
	color:#4f4f4f;
}

.site-footer {
	background:#232425;
	color:#ffffff;
	padding:5px;
	text-align:center;
	clear:both;
}

.site-footer a {
	color:#ffffff;
	transition:0.6s;
}

.site-footer a:hover {
	color:#f00000;
}

.bel {
	color:#ffffff;
	text-decoration:none;
}

.bel img {
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
}

.wemessage {
	position:relative;
	margin-top:30px;
	display:block;
	text-align:center;
}
.gallery {
	overflow-x:hidden;
}
.main-navigation > div > ul > li > a {
	text-transform:uppercase;
}

.sub-diensten {
	background:#3a3a3a;
	color:#cecece;
	padding-bottom:20px;
}

.sub-diensten h4 {
	color:#ffffff;
	padding:10px;
	background:#202020;
	margin:0;
	padding-left:30px;
}
.sub-diensten a {
	text-decoration:none;
	color:#cecece;
	padding-left:30px;
	display:block;
	position:relative;
	padding:10px 0 10px 50px;
	transition:0.6s;
	background:#3a3a3a;
	z-index:9;
}

.sub-dienst a.active {
	background:#f00000;
	color:#ffffff;
}

.sub-diensten a::before {
	display:block;
	content:" ";
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	left:30px;
	width:8px;
	height:12px;
	background:url(inc/img/sub-diensten-arrow.png);
	transition:0.6s;
}
.sub-diensten a:hover {
	padding:10px 0 10px 60px;
}
.sub-diensten a:hover::before {
	left:40px;
}

.form {
	padding:30px 0;
	background:#efefef;
	position:relative;
}

.form .wpcf7 {
	max-width:800px;
}

.form input, .form textarea {
	background:#ffffff;
	color:#bbbbbb;
	border:#bbbbbb;
	padding:10px;
	letter-spacing:1px;
	width:100%;
	margin:10px 0;
	outline:0;
}

.form input[type=submit] {
	border-radius:100px;
	color:#505050;
	background-image:url(inc/img/button-arrow.png);
	background-size:8px 12px;
	background-repeat:no-repeat;
	background-position:right 20px center;
	max-width:160px;
	padding:14px 0;
	cursor:pointer;
	transition:0.6s;
	border:1px solid #ffffff;
}

.form input[type=submit]:hover {
	border:1px solid #505050;
}

hr {
	max-width:60px;
	border-top:2px solid #f00000;
	margin:20px 0;
}

.content-block {
	padding:30px;
}

.map {
	padding:0;
	height:300px;
	overflow:hidden;
}

.flxmap-container {
	height:120%!important;
	top:-10%;
	position:relative;
}

.category-menu {
	background:#e4e4e4;
	padding:30px 0;
	display:block;
}

.category-menu li {
	display:inline-block;
	padding:0 10px;
}

.category-menu .current-menu-item {
	border-bottom:2px solid #f00000;
}

.werkwijze-block {
	text-align:center;
	padding:30px 0;
}

.werkwijze-block:nth-child(1), .werkwijze-block:nth-child(3) {
	color:#dedede;
}

.werkwijze-block p {
	width:80%;
	padding:30px 0;
	max-width:420px;
	margin:0 auto;
}

.page-template-page-werkwijze .page-content, .page-template-page-contact .page-content, .archive .page-content {
	padding:0;
}

.werkwijze-block img {
	height:100px;
	width:auto;
	margin:20px;
}

select {
    width: 260px;
    border: 0;
    background: #ffffff;
    height: 36px;
    padding: 0;
	outline:0;
	margin:0 auto;
}
.social a {
	font-size:18px;
	margin:10px 5px 0 0;
	padding:0 2px 4px;
	display:inline-block;
	width:30px;
	height:30px;
	border-radius:50%;
	border:1px solid #000000;
	text-align:center;
}
.social a:hover {
	color:#f00000;
	border:1px solid #f00000;
}
.social a span {
	display:inline-block;
	vertical-align:middle;
}
@media screen and (min-width: 481px) {
	.dienst {
	width:66%;
	height:auto;
	float:left;
	position:relative;
	text-align:center;
	transform:skew(-37deg);
	-webkit-transform:skew(-37deg);
	overflow:hidden;
	margin-bottom:2px;
}
.dienst img {
	display:block;
	width:100%;
	transform:skew(37deg);
	-webkit-transform:skew(37deg);
	visibility:hidden;
}
.dienst .background {
	position:absolute;
	top:0;
	right:-30%;
	bottom:0;
	left:-30%;
	transform:skew(37deg) scale(1.2, 1.2);
	-webkit-transform:skew(37deg) scale(1.2, 1.2);
	transition:8s;
}
.dienst:hover .background {
	transform:skew(37deg) scale(1,1);
	-webkit-transform:skew(37deg) scale(1,1);
}
.dienst .overlay {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:#000000;
	opacity:0.6;
	z-index:1;
	transition:2s;
}
.dienst:hover .overlay {
	background:url(inc/img/dienst-gradient.png);
	background-repeat:repeat-x;
	background-size:auto 100%;
	opacity:1;
}
.dienst:nth-child(odd) {
	margin-left:-16%;
}
.dienst:nth-child(even) {
	margin-right:-16%;
}
.dienst:nth-child(even) h2 {
	margin-left:-10%;
}
.dienst:nth-child(odd) h2 {
	margin-left:10%;
}
.dienst h2 {
	position:absolute;
	top:30px;
	width:100%;
	color:#ffffff;
	font-size:16px;
	z-index:3;
	transform:skew(37deg);
	-webkit-transform:skew(37deg);
}
.dienst h2 img {
	transform:none;
	-webkit-transform:none;
}
.dienst .right {
	position:absolute;
	height:2px;
	width:200%;
	background:#ffffff;
    z-index: 3;top: 0;
    right: 0;
	bottom:0;
	height:5px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}
}

@media screen and (min-width: 768px) {
	.logo,
	.logo-background {
		width:262px;
		transition:0.6s;
	}
	.wrap.small p, .wrap.small h2, .wrap.small li {
	width:55%;
	max-width:800px;
}
	.logo a {
		transition:1s;
	}
	.scrolled-header .logo-background {
		margin-top:-103%;
	}
	.scrolled-header .logo a {
		top:6px;
		width:100px;
	}

	.logo-background img {
		top:0;
	}
	.dienst h2 {
		font-size:18px;
	}
	p, li {
		font-size:14px;
		letter-spacing:1px;
	}
	.page-content .button {
		margin:20px 0;
	}
	.page-content h1 {
		font-size:22px;
	}

	.page-template-page-home .page-content {
		padding:60px 0;
	}
	.sub-diensten {
		max-width:415px;
		position:absolute;
		top:0;
		right:0;
		width:40%;
	}
	.sub-diensten::after {
		display:block;
		content:" ";
		background:#3a3a3a;
		width:600px;
		height:600px;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		position:absolute;
		bottom: -299px;
   		left: 124px;
		z-index:-1;
	}
	.links {
		padding-bottom:60px;
	}

	.content-block {
		width:50%;
		float:left;
		padding:30px 0;
	}

	.map {
		padding:0;
		height:500px;
	}

	.content-block .wrap {
		width:75%;
		max-width:500px;
	}

	.cta {
		padding:50px 0;
	}
	.banner-slider .slick-slide {

	max-height:500px;
}
.home .page-content p, .home .page-content ul {
	max-width:800px;
	margin:30px auto;
}
.home .page-content ul {
	text-align:left;
}
}

@media screen and (min-width: 1030px) {
	.site-header {
		height:60px;
		transition:1s;
	}
	.inline-block-input span {
		display:inline-block;
		width:32%;
		vertical-align:top;
		overflow:hidden;
	}
	.form input, .form textarea {
		padding-top:20px;
		padding-bottom:20px;
	}
	.text-area {
		overflow:hidden;
	}
	.inline-block-input span:first-child, .inline-block-input span:nth-child(2) {
		margin-right:2%;
	}

	.sub-diensten.is_stuck {
	padding-top:60px;
}
	.dienst {
		text-align:left;
	}
	.dienst h2 {
		padding-left:50px;
	}
	.dark-header {
		background:rgba(0,0,0,0.8);
	}
	.menu-button {
		display: none;
	}

	.main-navigation {
	display: inline-block;
	vertical-align:top;
	top:10px;
	left:240px;
	width:auto;
}

.main-navigation ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation > div > ul > li > a {
	font-size:14px;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	padding:0 20px;
	font-weight:300;
	font-size:12px;
}

.main-navigation ul ul {
    box-shadow: none;
    float: left;
    position: absolute;
    top: 36px;
	left: -999em;
    z-index: 99999;
    display: block;
    padding: 20px 0;
    background: #232324;
}

.main-navigation .producten ul {
	width:560px;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width:280px;
}

.main-navigation .producten li {
	width: 50%;
}

.main-navigation .producten li {
	float:left;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

.main-navigation > div > ul > li > a:hover {
	color:#F00000;
}

.main-navigation ul ul a:hover {
	padding-left:30px;
	width:220px;
}

.main-navigation ul ul a:hover::before {
	display:block;
	content:" ";
	width:15px;
	height:7px;
	background:url(inc/img/menu-arrow.png);
	position:absolute;
	left:10px;
	top:50%;
	transform:translateY(-50%) rotate(-90deg);
	-webkit-transform:translateY(-50%) rotate(-90deg);
}

.main-navigation > div > ul > .menu-item-has-children::after {
	display:block;
	content:" ";
	width:15px;
	height:7px;
	background:url(inc/img/menu-arrow.png);
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}

.werkwijze-block {
	width:33.33%;
	float:left;
	min-height:660px;
}

.dienst {
	width:29%;
}
.dienst:nth-child(odd) {
	margin-left:auto;
}
.dienst:nth-child(even) {
	margin-right:auto;
}
.dienst:nth-child(1), .dienst:nth-child(4n) + .dienst {
	margin-left:-8%;
}
.dienst:nth-child(4n) {
	margin-right:-8%;
}
.dienst:nth-child(even) h2 {
	margin-left:0;
}
.dienst:nth-child(odd) h2 {
	margin-left:12%;
}
}

@media screen and (min-width: 1200px) {
	.site-header .bel {
	top:10px;
	right:0;
	position:absolute;
	display:block;
}

.wemessage {
	position:absolute;
	top:60%;
	transform:translateY(-50%);
	padding-right:0;
	right:-147px;
	margin:0;
	transition:0.6s
}
.wemessage:hover {
	right:0;
}
.site-footer {
	padding:30px 0;
	position:relative;
}
}