html {
font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	color:#3E3E3E;
}

:root {
  --blauw: #30B6E9;
  --orange: #EA9A30;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--blauw);
}

::selection {
  color: white;
  background: var(--blauw);
}

a, div, img, span, p, input, img, section, button, :before, :after {
	transition:0.3s ease all;
}

h1, h2, h3, h4, h5 {
	font-family:brandon-grotesque, sans-serif;
	font-weight:600;
}

h1 {
	color:var(--blauw);
	font-size:4rem;
	margin:0;
}

.entry {margin-bottom:0}
.text-center {text-align:center;}

/* ============= BUTTONS =============  */

.contactbtn, input[type="submit"] {
	border:2px solid blue;
	border-color:var(--blauw);
   	padding: 1rem 3.5rem 1rem 1.5rem;
	transition: .2s all;
	cursor: pointer;
	position:relative;
	text-decoration:none;
	color:var(--blauw);
	box-shadow: -15px -12px 0px rgba(255,255,255,1), 0px 0px 0px rgba(255,255,255,0);
	border-radius: 0;
    background: transparent !important;
}

input[type="submit"] {
    position: relative;
    bottom: -31px;
	right:0;
	opacity:1 !important;
}
   
.contactbtn p {
      padding: 0;
      margin: 0;
}
.contactbtn:before{
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f1d8";
      position: absolute;
      right: 15px;
      opacity: 1;
	  transform: rotate(32deg);
	  top:5px;
   }
   
   
.contactbtn:hover, input[type="submit"]:hover {
    box-shadow: 14px 11px 0px rgba(255,255,255,1), 18px 15px 0px var(--blauw);
	border-color:transparent;
	color:#3e3e3e;
}
.contactbtn:hover:before{
	position: absolute;
	right: 5px;
	opacity: 1;
}

/* ============= HEADER =============  */
.site-header {
	box-shadow:none !important;
}

.site-header .wrap {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.wp-custom-logo .title-area img {
    width: 200px;
}
.genesis-nav-menu a:focus, .genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:focus, .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color:var(--blauw) !important;
}
.genesis-nav-menu a {
	font-size:3rem;
	padding-top:7px !important;
	font-weight:300;
}

/* ============== PORTFOLIO ================= */
.terug {
    top: -20px;
    position: absolute;
    font-size: 1.4rem;
}

.terug a{
	color:var(--blauw);
	text-decoration:none;
}

.vc_grid-filter.vc_grid-filter-right {
	width:100%;
}

.vc_grid-filter-item.vc_gitem-post-category-name {
	margin-right: -225px;
    transition: all 0.5s ease;
    background: var(--orange);
    color: #fff;
    border-right: 1px solid #fff;
    width: 100%;
    text-align: center;
	transition-delay:0.2s;
}
	.vc_gitem-row-position-middle .vc_col-sm-8{
		width: auto;
		max-width:100%;
	}
.vc_grid-filter-item.vc_gitem-post-category-name:nth-child(2) {
	transition-delay:0.4s;
}

.vc_grid-filter-item.vc_gitem-post-category-name span {
	padding:3px 5px;
}

.vc_is-hover .vc_grid-filter-item.vc_gitem-post-category-name {
    margin-right: -10px;
}

.vc_gitem_row .vc_custom_heading{
	font-weight:700 !important;
	background:var(--blauw);
	color:#fff;
	padding:5px 10px;
	left: -100%;
	position:relative;
}

.vc_gitem_row .vc_custom_heading h3{
	margin:0 0 0 10px;
	font-weight:600;
	font-size:4.5rem !important;
	font-weight:700;
	font-family:Roboto;
}
	.vc_gitem-row-position-top .vc_col-sm-4 {
		width: 20%;
	}
	.vc_gitem-row-position-top .vc_col-sm-4:last-child {
		width: 60%;
	}
.vc_gitem-post-category-name {font-size:2rem;}
.vc_is-hover .vc_gitem_row .vc_custom_heading{
	left: -10px;
}

.single-portfolio .vc-gitem-zone-height-mode-auto:before {
	background:rgba(0,0,0,0.5);
	opacity:0;
	height:100vh;
}

.vc_is-hover .vc-gitem-zone-height-mode-auto:before {
	opacity:1;
}

.portfolio-specs .wpb_content_element {margin-bottom:15px}
.portfolio-specs strong {
    color: var(--blauw);
}

.vc-gitem-zone-height-mode-auto:hover:before {
    background: rgba(0,0,0,0.5);
}

#alles:after {
    content: "Alles";
	display: block;
	font-weight:600;
    font-size: 1.5em;
    font-family:brandon-grotesque;
    color: #747474;
}

.Grafisch .animatie:after {
    content: "Grafisch ontwerp";
	display: block;
	font-weight:600;
    font-size: 1.5em;
	font-family:brandon-grotesque;
    color: #747474;
}

.Webdevelopment  .animatie:after {
    content: "Webdevelopment";
	display: block;
    font-size: 1.5em;
	font-weight:600;
	font-family:brandon-grotesque;
	color: #747474;
}

.Webdesign  .animatie:after {
    content: "Webdesign";
	display: block;
	font-weight:600;
    font-size: 1.5em;
	font-family:brandon-grotesque;
    color: #747474;
}

.Webdesign:hover .animatie:after, .Webdevelopment:hover  .animatie:after, .Grafisch:hover .animatie:after, #alles:hover:after  {
	color:var(--blauw);
}

.vc_active .animatie:after, .vc_active #alles:after {
	color:var(--blauw);
}
.vc_active {position:relative;}
.vc_active.Webdevelopment:after,  .vc_active.Webdesign:after, .vc_active.Grafisch:after, .vc_active:first-child:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 5px;
    height: 100%;
    width: 100%;
    background-image: url(/wp-content/uploads/2022/04/alles.jpg);
    background-repeat: no-repeat;
	z-index:3;
}
li.vc_grid-filter-item:hover:before {
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
}

.vc_active #Webdevelopment:after {
	background-image: url(/wp-content/uploads/2022/04/webdevelopment.jpg);
}
.vc_active #Webdesign:after {
	background-image: url(/wp-content/uploads/2022/04/webdesign.jpg);
}
.vc_active #Grafisch:after {
	background-image: url(/wp-content/uploads/2022/04/grafisch.jpg);
}

.vc_grid-filter-item {position:relative;}
li.vc_grid-filter-item:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    background: var(--blauw);
    border-radius: 500px;
    height: 65%;
    width: 70%;
    top: 15%;
    left: 15%;
    border: 6px solid #fff;
    box-shadow: 0 0 0px 5px var(--blauw);
	transition:0.6s ease;
}
li.vc_active.vc_grid-filter-item:before {display:none}

li.vc_grid-filter-item:hover:before {
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
}
/* ============== DIENSTEN =============  */

.ik a{
	color:var(--blauw);
	text-decoration:none;
}

.ik i {
    font-size: 2rem;
}
.ik .wpb_text_column  {
	text-align:right;
}

/*
.ik .wpb_text_column {
    border: 5px solid var(--blauw);
    padding: 10px 20px;
    border-radius: 40px;
    background: #fff;
    z-index: 2;
    position: relative;
    margin-right: -40px;
    text-align: center;
}

.ik .wpb_text_column:before {
    content: "";
    display: block;
    border: 5px solid var(--blauw);
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 0;
    right: -16px;
    top: 38%;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    background: #fff;
}

*/

.ik h3 {
	margin:0 0 10px;
	color:var(--blauw);
}



.ik img {
    border-radius: 500px;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 20%);
    border: 10px solid var(--blauw);
}
.intro a {
	text-decoration:none;
	color:#3e3e3e;
}

.vc_row-no-padding .wpb_content_element {
	margin-bottom:0;
}
.zhoog {
    z-index: 3;
}

.dienst .wpb_text_column {
    width: 65%;
    margin: 0 auto;
	padding:25px;
}

.dienst .txt-rechts {
    width: 65%;
    margin: 0 0 0 -10%;
    padding: 50px 25px;
    position: relative;
    background: #fff;
}

.dienst .txt-links {
    margin: 0 0 0 50%;
    position: absolute;
    background: #fff;
}

.dienst .wpb_wrapper {
    align-items: center;
    display: flex;
}

.dienst .wpb_wrapper .wpb_wrapper {
    display: block;
}

.dienst .wpb_single_image, .dienst .wpb_wrapper, .dienst .vc_single_image-wrapper {
    height: 100%;
}
.dienst .wpb_single_image img {
	height:100%;
	object-fit:cover;
}

.rand:before {
    content: "";
    background: var(--blauw);
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25%;
    height: 5px;
}

.rand:after {
    content: "";
    background: var(--blauw);
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 5px;
    height: 50%;
}

/* ============== FORM ================== */
.wpcf7 form {
    padding-top: 15px;
}

form input, form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #3e3e3e;
    padding: 10px;
}

form textarea  {
	height:100px;
}

.wpcf7 a{ 
	color:var(--blauw);
	text-decoration:none;
}

.wpcf7 input::placeholder, .wpcf7 textarea::placeholder {
	color:#ccc;
}

.wpcf7 form .wpcf7-response-output {
    margin: -60px 0 20px;
    padding: 0;
    height: 45px;
    display: none;
}


.Business {font-size:0 !important}
.grecaptcha-badge {z-index: 0;}

.single-portfolio .vc_gitem-zone-b a {
	  -webkit-animation: fadeinLoad 1s 5s forwards;
  animation: fadeinLoad 1s 5s forwards;
  opacity: 0;
}

@-webkit-keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============== RESPONSIVE =============  */

@media (max-width:1400px) {
	.vc_gitem_row .vc_custom_heading h3 {font-size:3.2rem !important}
}

@media (max-width:1200px) {
	.dienst .wpb_text_column {width: 75%;}
	body .vc_grid-filter-item {
		width: 25% !important;
		margin: 0 !important;
	}
	
	.vc_gitem_row .vc_custom_heading h3 {font-size:2rem !important}
}

@media (max-width:1024px) {
	.vc_active.Webdevelopment:before, .vc_active.Webdesign:before, .vc_active.Grafisch:before, .vc_active:first-child:before {
		top:-14%;
		left:0
	}
}

@media (max-width:992px) {
	.site-header .wrap {display:block;}
	.dienst .wpb_text_column {
		width:100%;
		padding:25px;
		margin:0;
		position:relative;
	}
	.menu-toggle:focus, .menu-toggle:hover, .sub-menu-toggle:focus, .sub-menu-toggle:hover {
		color:var(--blauw);
	}
	.type-portfolio .vc_row-fluid .vc_col-sm-6:last-child {padding-top:0;}
	
	.type-portfolio .vc_row-fluid .vc_col-sm-6:last-child p, .type-portfolio .vc_row-fluid .vc_col-sm-6:last-child .wpb_text_column {
		padding: 0 !important;
		margin: 0 !important;
	}
	.vc_gitem-row-position-top .vc_col-sm-4 {
		width: 0;
	}
	.vc_gitem-row-position-top .vc_col-sm-4:last-child {
		width: 100%;
		right: -20px;
	}
	
	body .vc_grid .vc_grid-filter-item {
		width:100% !important;
	}
	
	 .vc_gitem-zone-b .vc_gitem-row-position-middle {top:75%}
	.vc_active.Webdevelopment:after, .vc_active.Webdesign:after, .vc_active.Grafisch:after, .vc_active:first-child:after {
		background-size:contain;
		top:-10px;
	}
	.text-center {text-align:left;}
	

}


@media (max-width:768px) {
	.reverse {
    	flex-direction: column-reverse;
	}
	.vc_gitem_row .vc_custom_heading h3 {
		font-size:4rem !important;
		padding:30px 0;
		text-align:center !important;
	}
	.vc_gitem-row-position-top .vc_col-sm-4:last-child {
		right:inherit;
		margin:0 auto;
		top:-20px;
	}

	.ik .vc_column_container {
		width: 50%;
	}
	.ik .wpb_text_column {
		text-align: center;
		font-size: 2rem !important;
	}
	
}

@media (max-width:480px) {
		.vc_gitem-row-position-top .vc_col-sm-4:last-child {width:auto;}
		.pum-theme-2607 .pum-content+.pum-close, .pum-theme-standaard-thema .pum-content+.pum-close {
			right:0 !important;
			top:0 !important;
		}
	.text-center {text-align:left;}
}