/*
==  THEME DETAILS  ============================================================
    Theme Name: Onder Ons De Krim
    Theme URI: http://www.onderonsdekrim.nl/
    Description: Stylesheet voor Onder Ons De Krim
    Version: 1.0
    Author: Alfabet Reclame
    Author URI: https://www.alfabetreclame.nl/
===============================================================================
*/

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

	1.  	Basics 
	2.1		Header
	2.2 	Navigation 
	3.1 	Frontpage Presentation
	3.2 	Frontpage Intro
	4.1 	Subpage
	4.2 	Subpage Projecten
	4.2.1 	Subpage Projecten Single
	5.1 	Module Contact
	5.2 	Module Call to Action
	6.  	Footer
	
-----------------------------------------------------------------------------------*/

/*---------------------------------------------- 
	1. Basics
------------------------------------------------*/
	body {
		font-family: 'PT Sans', sans-serif;
		font-size: 17px;
	  	line-height: 30px;
		background: #FFF;	
		color: #1e1a1a;
	}
	
	a, a:hover, .btn, .btn:hover, i {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		text-decoration:none;	
	}
	
	p {
		margin: 0;	
	}
	
	p + p ,
	p + h3 {
		margin-top: 35px;	
	}

	a {
		color: #ce4242;
	}

	a:hover {
		color: #1e1a1a;
	}
	
	h1, h2, h3, h4 {
		font-family: 'Exo 2', sans-serif;
		font-weight: 500;
		color: #ce4242;
		line-height:1;
		margin: 0;
		padding: 0;
	}
	
	h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 35px;
	}
	
	h3 {
		font-size: 30px;
		margin-bottom: 15px;
	}
	
	h4 {
		font-size: 25px;
	}
	
	ul {
		margin: 0;
		padding: 0;
	}
	
	@media (max-width : 767px) {
		h1 {
			font-size: 36px;
		}
	
		h2 {
			font-size: 31px;
		}
		
		h3 {
			font-size: 26px;
		}
		
		h4 {
			font-size: 22px;
		}
	}
	
	@media (max-width : 350px) {
		h1 {
			font-size: 32px;
		}
	
		h2 {
			font-size: 25px;
		}
		
		h3 {
			font-size: 21px;
		}
		
		h4 {
			font-size: 18px;
		}
	}
	
/* Buttons -------------------------------------- */
	.btn-primary {
		background: #ce4242;
		color: #FFF;	
		border: none;	
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;	
	}
	
	.btn-primary:hover {
		background: #df3b3b;
		color: #FFF;
		border: none;
		text-decoration:none;
	}
	
	.btn-primary i {
		color: #1e1a1a;
	}
	
	.btn-secondary {
		background: #1e1a1a;
		color: #FFF;
		border: none;	
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
	.btn-secondary i {
		color: #ce4242;
	}
	
	.btn-secondary:hover {
		background: #0c0b0b;
		color: #FFF;
		text-decoration:none;
	}
	
	.btn-lg {
		font-family: 'Exo 2', sans-serif;
	  	padding: 15px 30px;
	  	font-size: 22px;
		line-height: 24px;
	  	font-weight: 400;
	  	line-height: 1;
	}
	
	.btn-lg i {
		font-size: 22px;
		margin-right: 20px;
	}
	
	.btn-md {
		font-family: 'Exo 2', sans-serif;
	  	padding: 12px 20px;
	  	font-size: 16px;
	  	font-weight:normal;
	  	line-height: 1;
	}
	
	.btn-md i {
		font-size: 15px;
		margin-right: 10px;
	}
	
	@media (max-width : 350px) {
		.btn-lg {
		 	padding: 15px 20px;
	  		font-size: 20px;
		}	
		.btn-md {
			padding: 12px 18px;
			font-size: 16px;
		}
	}
	
/* Lightbox -------------------------------------- */
	@media (min-width : 1600px) { 
		.lightbox {
			position: absolute;
			top: 50% !important;
			left: 50% !important; 
			-webkit-transform: translate3d(-50%,-50%,0);
			transform: translate3d(-50%,-50%,0);
		}
	}

/*---------------------------------------------- 
	2.1 Header
------------------------------------------------*/
	#header {
		position: absolute;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
    	z-index: 999;
		padding: 35px 0;
		background: rgba(255, 255, 255, 0.8);		
	}
	
	#header.subpage {
		position: relative !important;
		background: #FFF !important;
		border-bottom: 10px solid #ce4242;
	}

	#header .brand img {
		margin: 0;
	}
	
/*---------------------------------------------- 
	2.2 Navigation 
------------------------------------------------*/	
	#navigation button {
		font-family: 'Exo 2', sans-serif;
		font-size: 26px;	
		color: #1e1a1a;
		line-height: 46px;
		background: none;
		padding: 0;
		border: none;
		margin-top: 18px;
		float: right;
	}
	
	#navigation button i {
		color: #ce4242;
		font-size: 28px;
		margin-left: 20px;
	}
	
/* Overlay style */
	#navigation .overlay {
		position: fixed;
		width: 100%;
		z-index:9999;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(206, 66, 66, 0.9);
	}
	
/* Overlay closing cross */
	#navigation .overlay .overlay-close {
		width: 40px;
		height: 40px;
		position: absolute;
		right: 25px;
		top: 25px;
		overflow: hidden;
		border: none;
		background: url(../images/cross.png) no-repeat center center;
		text-indent: 200%;
		color: transparent;
		outline: none;
		z-index: 9999;
	}
	
	/* Menu style */
	.overlay #hoofdmenu {
		text-align: center;
		position: relative;
		top: 55%;
		height: auto;
		width: 100%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.overlay ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		display: inline-block;
		height: 100%;
		position: relative;
	}
	
	.overlay li {
		display: block !important;
		width: 100%;
		margin-bottom: 7%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
	.overlay ul li a { 
		display: block;
		font-size: 36px;
		color: #FFF;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		padding: 0 !important;
		border: none !important;
	}
	
	.overlay ul li.active a ,
	.overlay .current_page_item a {
		color: #1e1a1a;	
	}
	
	.overlay ul li a:hover,
	.overlay ul li a:focus {
		background: none;
		color: #1e1a1a;
	}
	
	@media (max-width : 992px) {
		.overlay #hoofdmenu {
			top: 50%;
		}
		.overlay #hoofdmenu li {
			margin-bottom: 70px;	
		}
		
	}
	
	@media (max-width : 767px) {
		.overlay #hoofdmenu {
			top: 50%;	
		}
		.overlay ul li {
			margin-bottom:30px;	
		}
		.overlay ul li a { 
			font-size: 24px;
		}
	}
	
/* Effects */
	.overlay-scale {
		visibility: hidden;
		opacity: 0;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
		-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
		transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	}
	
	.overlay-scale.open {
		visibility: visible;
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);	
		-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
		transition: transform 0.2s, opacity 0.2s;
	}
	
/*---------------------------------------------- 
	3.1 Frontpage Presentation
------------------------------------------------*/		
	#frontpage-presentation {
		max-height: 650px;
		z-index:99;
	}
	
	#frontpage-presentation #owl-slider .item {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;	
		height: 730px;
	}
	
	#frontpage-presentation #owl-slider .item .text-overlay {
		top: 260px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;	
		background: rgba(30, 26, 26, 0.8);	
		padding: 50px;
	}
	
	#frontpage-presentation #owl-slider .item .text-overlay h2 {
		color: #FFF;
		line-height: 52px;	
	}
	
	#frontpage-presentation #owl-slider .item .text-overlay .btn {
		margin-top: 40px;
	}
	
	@media (max-width : 1200px) {
		#frontpage-presentation #owl-slider .item .text-overlay h2 {
			font-size: 28px;
			line-height: 40px;			
		}
	}
	
	@media (max-width : 767px) {
		#frontpage-presentation {
			max-height: 550px;
		}
		#frontpage-presentation #owl-slider .item .text-overlay {
			top: 200px;
			text-align: center;
			border-radius: 0;
			padding: 50px 20px;
		}
		#frontpage-presentation #owl-slider .item .text-overlay h2 {
			font-size: 24px;	
		}
	}
	
	@media (max-width : 350px) {
		#frontpage-presentation #owl-slider .item .text-overlay h2 {
			font-size: 22px;	
		}
	}
	
/*---------------------------------------------- 
	3.2 Frontpage Intro
------------------------------------------------*/	
	#frontpage-intro .content {
		background: #ce4242;
		color: #FFF;
		padding: 60px 100px 70px 0;	
		z-index: 99;
	}
	
	#frontpage-intro .content h1 {
		color: #FFF;
		margin-bottom: 50px;
	}
	
	#frontpage-intro .content:before {
		content: "";
		display: block;
		width: 300%;
		background: #ce4242;
		position: absolute;
		left: -300%;
		height: 100%;
		padding: 0px;
		top: 0;	
	}
	
	#frontpage-intro .content a {
		color: #FFF !important;
		text-decoration: underline !important;	
	}
	
	@media (max-width : 992px) {
		#frontpage-intro .content {
			padding: 60px 25px;
			display: block;	
		}
		#frontpage-intro .content:before {
			display: none;
		}
	}
	
	@media (max-width : 767px) {
		#frontpage-intro .content {
			padding: 50px 15px;
		}
	}
	
/* Buttons -------------------------------------- */
	#frontpage-intro .buttons {
		margin-top: 175px;
		text-align: center;		
	}
	
	#frontpage-intro .buttons .btn {
		width: 270px;
		
	}
	
	#frontpage-intro .buttons .btn + .btn {
		margin-top: 35px;
	}
	
	@media (max-width : 992px) {
		#frontpage-intro .buttons {
			margin-top: 40px;
		}
		#frontpage-intro .buttons .btn + .btn {
		margin: 0 0 0 15px;
		}
	}
	
	@media (max-width : 767px) {
		#frontpage-intro .buttons .btn + .btn {
			margin: 20px 0 0 0;
		}
	}

/*---------------------------------------------- 
	4.1 Subpage 
------------------------------------------------*/
	#page-content {
		padding: 70px 0;	
	}
	
	#page-content h1 {
		margin-bottom: 50px;	
	}

/* Modulaire Blokken */	
	#page-content .blok {
		margin-top: 35px;
	}
	
	#module-fotogalerij .background {
		background: #FFF;
		padding: 30px 15px 10px 15px;
	}
	
/* Modulaire Blok Galerij -------------------------------------- */
	a.thumbnail-gallery {
		position: relative;
		display: block;
		margin: 10px 0;
	}
	
	a.thumbnail-gallery img {
		width: 100%;
	}
	
	a.thumbnail-gallery:after{
		font-family: "FontAwesome";
  		position: absolute;
  		font-size: 18px;
  		right: 20px;
  		bottom: 15px;
  		content: '\f002';
  		color: white;
  		z-index: 2;
	}
	
	@media (max-width : 767px) { 
		a.thumbnail-gallery:after{
			display: none;
		}
	}
	
	
/*---------------------------------------------- 
	4.2 Subpage Projecten
------------------------------------------------*/
	#projecten-overzicht {
		padding-bottom: 50px;	
	}
	
	#projecten-overzicht #filters {
		text-align: center;
		margin-bottom: 50px;
	}
	
	#projecten-overzicht #filters li a {
		font-family: 'Exo 2', sans-serif;
		width: 190px;
		font-size: 22px;
		line-height: 30px;
		color: #ce4242;
		border: 1px solid #ce4242;
		display: inline-block;
		padding-top: 22px;
		text-decoration: none !important;
		padding-bottom: 22px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;	
	}
	
	#projecten-overzicht #filters li a:hover {
		background: #1e1a1a;
		border: 1px solid #1e1a1a;
		color: #FFF;
	}
	
	#projecten-overzicht #filters li.active a {
		background: #1e1a1a;
		border: 1px solid #1e1a1a;
		color: #FFF;
	}
	
	@media (max-width : 767px) {
		#projecten-overzicht #filters li + li {
			margin-top: 25px;	
		}
	}
	
/* Items -------------------------------------- */
	#projecten-overzicht .item .content {
		background: #efefef;
		padding: 30px 20px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;		
	}
	
	#projecten-overzicht .item {
		margin-bottom: 25px;	
	}
	
	#projecten-overzicht .item .content img {
		width: 100%;	
	}
	
	#projecten-overzicht .item .content h4 {
		font-size: 17px;
		font-weight: 600;	
		margin-top: 20px;
		margin-bottom: 10px;
	}
	
	#projecten-overzicht .item .content span.category {
		font-size: 15px;
		font-style: italic;
		line-height: 1;
		display: block;
	}	
	
	#projecten-overzicht .item .content .btn {
		margin-top: 20px;	
	}

/* Image Hover Scale -------------------------------------- */	
	figure.scale-image {
		overflow: hidden;
		position: relative;
		display: block;
		cursor: pointer;
	}
		
	figure.scale-image img  {
		-webkit-transition: all 0.4s linear;
		transition: all 0.4s linear;
		-ms-transition: all 0.4s linear;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
	}
		
	figure.scale-image:hover img{
		-webkit-transform: scale3d(1.05, 1.05, 1);
		transform: scale3d(1.05, 1.05, 1);
		-ms-transform: scale3d(1.05, 1.05, 1);
	}
		
	@media (max-width : 1200px) {
		figure.scale-image:hover img {
			-webkit-transform: none;
			transform: none;
			-ms-transform: none;
		}	
	}
	
/*---------------------------------------------- 
	4.2.1 Subpage Projecten Single
------------------------------------------------*/
	#project-content {
		padding: 70px 0;	
	}
	
	#project-content #sync2 {
		margin-bottom: 50px;	
	}
	
	#project-content #sync2 .item {
		cursor: pointer;
		padding: 0 5px;
	}
	
	#project-content #sync2 .item img {
		border: 1px solid #878585;
	}
	
	#project-content h1 {
		margin-bottom: 40px;	
	}
	
/* Buttons -------------------------------------- */
	#project-content .buttons {
		margin-top: 80px;
		text-align: center;		
	}
	
	#project-content .buttons .btn {
		width: 270px;
		
	}
	
	#project-content .buttons .btn + .btn {
		margin-top: 35px;
	}
	
	@media (max-width : 992px) {
		#project-content .buttons {
			margin-top: 50px;
		}
		#project-content .buttons .btn + .btn {
		margin: 0 0 0 15px;
		}
	}
	
	@media (max-width : 767px) {
		#project-content .buttons .btn + .btn {
			margin: 20px 0 0 0;
		}
	}
	
/*---------------------------------------------- 
	4.3 Subpage Enquêteformulier
------------------------------------------------*/
	#enqueteformulier {
		background: #ce4242;
		padding-top: 25px;	
		padding-bottom: 60px;
	}
	
	#enqueteformulier label {
		color: #FFF;
	}
	
	#enqueteformulier form .form-control {
		background-color: #FFF;
	}
	
	#enqueteformulier form span {
		color: #FFF;
		text-align: left;
	}
	
	#enqueteformulier form span.wpcf7-list-item {
		display: block;
	}
	
	#enqueteformulier form input[type="checkbox"] {
		margin-right: 5px;
	}
	
/*---------------------------------------------- 
	5.1 Module Contact
------------------------------------------------*/
	form .form-group {
		margin-top: 40px;
		width: 100%;
	}
	
	form label {
		color: #1e1a1a;
		font-size: 20px;
		font-weight: 700;
		margin-bottom: 15px;	
	}
	
	form .form-control {
		color: #1e1a1a;
    	background-color: #f1f1f1;
		height: 55px;
    	font-size: 16px;
    	line-height: 1.5;
    	background-image: none;
    	border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	
	form textarea.form-control {
		height: auto;
	}
		
	form .button input {
		background: none;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		border: none;
		text-align: center !important;
	}
	
	form .btn {
		margin-top: 20px;
	}

/*---------------------------------------------- 
	5.2 Module Call to Action
------------------------------------------------*/
	#module-call-to-action {
		padding: 70px 0;
	}
	
	#module-call-to-action h3 {
		margin-bottom: 30px;	
		font-size: 30px;
	}
	
	#module-call-to-action.wit {
		background: #FFF;	
	}
	
	#module-call-to-action.rood {
		background: #ce4242;	
	}
	
	#module-call-to-action.wit h3 {
		color: #1e1a1a;
	}
	
	#module-call-to-action.rood h3 {
		color: #FFF;
	}
	
	#module-call-to-action button {
		float: none;	
	}
	
	@media (max-width : 420px) {
		#module-call-to-action h3 {	
			font-size: 26px;
			line-height: 40px;
		}
	}
	
/* Form -------------------------------------- */
	#module-call-to-action .formulier{
		position: relative;
		display: none;
	}
	
	#module-call-to-action form .form-group {
		margin-top: 40px;
		width: 100%;
	}
	
	#module-call-to-action form label {
		font-size: 20px;
		font-weight: 700;
		margin-bottom: 15px;	
	}
	
	#module-call-to-action form .form-control {
		height: 55px;
    	font-size: 16px;
    	line-height: 1.5;
    	background-image: none;
    	border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	
	#module-call-to-action form .selecteer {
		-webkit-appearance: none;
		appearance:none;
		-moz-appearance: none;
		background-image:url(../images/dropdown-select.svg) !important;
		background-repeat:no-repeat;
		background-position:right;
	}
	
	#module-call-to-action form select::-ms-expand {
   		display: none;
	}
	
	#module-call-to-action form textarea.form-control {
		height: auto;
	}
		
	#module-call-to-action form .button input {
		background: none;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		border: none;
		text-align: center !important;
	}
	
	#module-call-to-action form .btn {
		margin-top: 20px;
	}
	
	div.wpcf7 img.ajax-loader {
		display: none;
	}
	
	div.wpcf7-mail-sent-ok {
		border: none;	
	}
	
	div.wpcf7-response-output {
		margin: 0;
		padding: 0;
	}

/* Form Colors -------------------------------------- */
	#module-call-to-action.wit form label {
		color: #1e1a1a;
	}
	
	#module-call-to-action.wit form .form-control {
		color: #1e1a1a;
    	background-color: #f1f1f1;
	}
	
	#module-call-to-action.wit form .selecteer {
		background-image:url(../images/dropdown-select.svg) !important;
	}
	
	#module-call-to-action.rood form label {
		color: #FFF;
	}
	
	#module-call-to-action.rood form .form-control {
    	background-color: #FFF;
	}
	
	#module-call-to-action.rood form .selecteer {
		background-image:url(../images/dropdown-select-black.svg) !important;
	}
	
/*---------------------------------------------- 
	6. Footer
------------------------------------------------*/
	#footer {
		background: #1e1a1a;
		padding: 50px 0;
	}

	#footer #footer-menu li a {
		font-family: 'Exo 2', sans-serif;
		font-weight: 500;
		font-size: 22px;
		line-height:1;
		color: #FFF;
		padding: 0 16px;
		background: none;
	}
	
	#footer #footer-menu li a:hover {
		color: #ce4242;
	}
	
	#footer .navbar-nav {
		width: 100%;
    	text-align: center;
    	margin: 0;
	}
	
	#footer .navbar-nav > li {
    	float: none;
    	display: inline-block;
  	}
	
	@media (max-width : 767px) {
		#footer #footer-menu li a {
			font-size: 16px;	
			padding: 0 12px;
		}
	}
	
	@media (max-width : 350px) {
		#footer #footer-menu li a {
			font-size: 15px;	
			padding: 0 6px;
		}
	}