/*
==  THEME DETAILS  ============================================================
    Theme Name: JKM Investments
	Theme URI: https://www.jkminvestments.nl/
    Description: Stylesheet voor JKM Investments
    Version: 1.0
   	Author: Kracht Internet Marketing
	Author URI: https://www.krachtinternetmarketing.nl

===============================================================================
*/

/*---------------------------------------------- 
	1.1 Basics
------------------------------------------------*/
	html {
  		font-size: 20px;
	}

	body {
     	font-family: 'Zilla Slab', serif;
		font-size: 1.25rem;
	  	line-height: 2rem;
		font-weight: 400;
		color: #29235C;
		background: #EDF1F6; 
		-webkit-font-smoothing: antialiased;
  		-moz-osx-font-smoothing: grayscale;
	}
	
	a, a:hover, .btn, .btn:hover , .transition {
		-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 , figure , blockquote , ul {
		margin: 0 !important;
	}

	a {
		color: #36A9E1; 
	}

	a:hover {
		color: #29235C;
	}

	button:focus ,
	:focus {
		outline: 0 !important;
	}
	
	h1, h2, h3, h4 {
		font-weight: 700;
		line-height: 1.2;
		margin: 0;
		padding: 0;
	}

	h1 {
		font-size: 2.5rem;
	}

	.padding-section {
		padding: 3.5rem 0;
	}

	@media (min-width: 1400px) {
		.container {
			max-width: 1230px;
		}	
	}

	@media all and (max-width: 1500px) {
    	html {
			font-size: 18px;
		}
	}

	@media all and (max-width: 1200px) {
    	html {
			font-size: 16px;
		}
	}

	@media all and (max-width: 767px) {
    	html {
			font-size: 15px;
		}
		h1 {
			font-size: 2rem;
		}
	}

/* Buttons -------------------------------------- */
	.btn-primary, 
	.btn-primary:active {
		background: #36A9E1;
    	color: #FFF;
    	border: none;
	}
	
	.btn-primary:hover {
		background: #29235C;
		color: #FFF;
		border: none;
	}

	.btn {
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1;
		padding: 0.8rem 1.5rem;
		border-radius: 0;
	}

    button:focus ,
	.btn:focus {
		outline: 0 !important;
		box-shadow: none !important;
	}

/*---------------------------------------------- 
	1.2 Content Block 
------------------------------------------------*/
	.content-block p + p ,
	.content-block p + h2 ,
	.content-block p + h3 ,
	.content-block p + h4 ,
	.content-block ul + p ,
	.content-block ul + h3 {
		margin-top: 1.5rem !important;
	}

	.content-block h1 {
		margin-bottom: 2rem;
	}

	.content-block h3 {
		font-size: 1.5rem;
		color: #36A9E1;
		line-height: 1.5rem;
	}

	.content-block img.aligncenter {
		margin: 0 auto;
		 display: block;
	}

	.content-block .embed-responsive {
		margin: 1.5rem 0;
	}

/*---------------------------------------------- 
	1.2 Formulier  
------------------------------------------------*/
	form {
		margin-top: 1.5rem;
	}

	form .form-group {
		width: 100%;
		margin-bottom: 0;
		margin-bottom: 1.25rem;
	}
	
	form .form-control {
    	background-color: #FFF !important;
		color: #29235C !important;
		height: 60px;
    	font-size: 1.25rem;
    	line-height: 1.5;
    	background-image: none;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
    	border: none;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
	}
	
	form textarea.form-control {
		height: auto;
		padding: 1rem 1.5rem;
	}

	::placeholder { 
		color: #29235C !important;
	  	opacity: 1;
	}

	:-ms-input-placeholder { 
		color: #29235C !important;
	}

	::-ms-input-placeholder {
		color: #29235C !important;
	}
		
	.wpcf7-mail-sent-ok ,
	.wpcf7-validation-errors {
		border: none !important;
	}
	
	.wpcf7-not-valid-tip ,
	.wpcf7-response-output {
		font-size: 0.8rem;
		margin: 0;
		padding: 0 !important;
		border: none !important;
	}

	.grecaptcha-badge {
		display: none !important;
		visibility: hidden !important;
	}

/*---------------------------------------------- 
	2. Header
------------------------------------------------*/
	#header {
		padding: 2.25rem 0;
		height: 35.5rem;
		background-image: url('../images/header-bg.jpg');
		background-position: center bottom;
		background-size: cover;
		background-repeat: no-repeat;
	}

	#header .pay-off {
		margin-top: 5.25rem;
	}

	#header .pay-off span {
		font-size: 1.75rem;
	}
	
	@media all and (max-width: 1200px) {
    	#header {
			height: 30rem;
		}
		#header .pay-off {
			margin-top: 3rem;
		}
	}

	@media all and (max-width: 767px) {
    	#header .pay-off span {
			font-size: 1.5rem;
		}
	}

/*---------------------------------------------- 
	6. Footer
------------------------------------------------*/
	#footer {
		padding: 3rem 0 3.25rem 0;
	}

	#footer ul li a {
		color: #29235C;
		padding: 0;
	}

	#footer ul li a:hover {
		color: #36A9E1;
	}

	#footer ul.footer-menu li a::before {
		content: "\2022";
		padding-right: 0.5rem;
		display: inline-block;
	}