/*
==  THEME DETAILS  ============================================================
    Theme Name: GJ Glasproducten
	Theme URI: https://gjglasproducten.nl/
    Description: Stylesheet voor GJ Glasproducten
    Version: 1.0
   	Author: Kracht Internet Marketing
	Author URI: https://www.krachtinternetmarketing.nl

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

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

	body {
     	font-family: 'Open Sans', sans-serif;
		font-size: 1rem;
	  	line-height: 1.76rem;
		font-weight: 400;
		color: #FFF;
		background: #121212; 
		-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: #0693FA; 
	}

	a:hover {
		color: #FFF;
	}

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

	h1 {
		
		font-size: 2.25rem;
	}

	h2 {
		font-size: 2rem;
	}	

	h3 {
		font-size: 1.25rem;
	}

	h4 {
		font-size: 1rem;
	}

	.bold {
		font-weight: 700;
	}

	.light {
		font-weight: 300;
	}
	
	.bg-cover {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.full-height {
		height: calc(100vh);
		min-height: 100vh;
		overflow: hidden;
	}

	span.subtitle {
		font-size: 1rem;
		font-weight: 400;
	}

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

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

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

	@media all and (max-width: 767px) {
		html {
			font-size: 15px;
		}
    	.full-height {
			height: 700px;
			min-height: inherit;
			overflow: hidden;
		}
		span.subtitle {
			display: block;
			margin-top: 0.25rem;
		}
	}

/* Buttons -------------------------------------- */
	.btn-primary, 
	.btn-primary:active {
		background: rgba(255, 255, 255, 0.75) !important;
    	color: #1E2452;
    	border: none;
	}
	
	.btn-primary:hover {
		background: rgba(255, 255, 255, 1) !important;
		color: #1E2452;
		border: none;
	}

	.btn-secondary {
		background: #B2292E;
		color: #FFF;
		border: none;
	}

	.btn-secondary:hover {
		background: #FFF;
		color: #B2292E;
	}

	.btn {
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 1;
		padding: 0.7rem 0.8rem;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

    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 h3 {
		font-size: 1.5rem;
		font-weight: 400;
		color: #B2292E;
		margin-bottom: 0.5rem;
	}

	.content-block ul {
		list-style: none;
	  	padding: 0;
	}
	
	.content-block li {
  		position: relative;
		padding-left: 30px;
	}

	.content-block ul li:before {
		content: "\f45c";
		font-family: 'Font Awesome 5 Pro';
		font-size: 0.6rem;
		font-weight: 900;
		position: absolute;
    	left: 0;
		color: #0693FA;
	}

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

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

/*---------------------------------------------- 
	1.3 Colors 
------------------------------------------------*/
	.bg-grey {
		background: #1E1E1E !important;
	}

	.bg-black {
		background: #000 !important;
	}

	.bg-blue {
		background: #0693FA !important;
	}

	.text-blue {
		color: #0693FA !important;
	}

	.text-red {
		color: #B2292E !important;
	}

/*---------------------------------------------- 
	1.4 Spacing 
------------------------------------------------*/
	.padding-section-lg {
		padding: 3.5rem 0;
	}

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

	.padding-section-top {
		padding-top: 2.75rem;
	}

	.padding-section-bottom {
		padding-bottom: 2.75rem;
	}

	.devider {
		border-top: 1px dashed #FFF;
		width: 100%;
		display: block;
		height: 1px;
		margin: 2.75rem 0;
	}

/*---------------------------------------------- 
	1.5 Item Nieuws / Projecten 
------------------------------------------------*/
	.item-nieuws {
		position: relative;
		overflow: hidden;
	}

	.item-nieuws .overlay {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(30, 36, 82, 0.65) !important;
	}

	.item-nieuws .overlay span {
		font-size: 1.25rem;
		line-height: 1.5rem;
		font-weight: 400;
		color: #FFF;
		display: block;
		padding: 1.5rem;
	}

	.item-nieuws .overlay:before {
		content: "";
		position: absolute;
		top: 1rem;
		left: 1rem;
		bottom: 1rem;
		right: 1rem;
		border: 1px solid #FFF;
	}

	.item-nieuws:hover .overlay {
		opacity: 1;
	}

	@media all and (max-width: 1200px) {
    	.item-nieuws .overlay {
			opacity: 1;
		}
	}

/*---------------------------------------------- 
	1.5 Item Diensten 
------------------------------------------------*/
	.item-overzicht {
		position: relative;
		overflow: hidden;
	}

	.item-overzicht .overlay {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(30, 36, 82, 0.65) !important;
	}

	.item-overzicht .overlay span {
		font-size: 2rem;
		line-height: 1;
		font-weight: 400;
		color: #FFF;
		display: block;
		padding-bottom: 1rem;
	}

	.item-overzicht .overlay i {
		font-size: 2rem;
		color: #FFF;
	}

	.item-overzicht .overlay:before {
		content: "";
		position: absolute;
		top: 1rem;
		left: 1rem;
		bottom: 1rem;
		right: 1rem;
		border: 1px solid #FFF;
	}

	.item-overzicht:hover .overlay {
		opacity: 1;
	}

	@media all and (max-width: 1200px) {
    	.item-overzicht .overlay {
			opacity: 1;
		}
	}
	
/*---------------------------------------------- 
	2.2 Header
------------------------------------------------*/
	#header {
		padding: 1rem 0 1.5rem 0;
		background: rgba(0, 0, 0, 0.8) !important;
	}

	#header .brand {
		position: absolute;
	}

	#header .brand img {
		max-height: 7rem;
	}

	#header .phone a {
		font-size: 1.24rem;
	}

	@media all and (max-width: 1200px) {
		#header {
			padding: 1rem 0;
		}	
		#header .brand img {
			max-height: 6rem;
		}
		#header .phone a {
			font-size: 1.1rem;
		}#header .phone a {
			font-size: 1.1rem;
		}
	}

	@media all and (max-width: 992px) {
		#header .brand {
			position: relative;
		}	
		#header .brand img {
			max-height: inherit;
		}
		#header .phone a {
			font-size: 1rem;
		}
	}

/*---------------------------------------------- 
	3.1 Navigation
------------------------------------------------*/
	#navigation #hoofdmenu li a {
		font-size: 0.85rem;
		color: #FFF;
		line-height: 1;
		padding: 0;
		background: none;
		display: inline-block;
	}

	#navigation #hoofdmenu li:after {
		font-size: 1.1rem;
		content: "|";
		color: #394D66;
		padding: 0 0.5rem;
		display: inline-block;
	}

	#navigation #hoofdmenu li:last-child:after {
		content: "";	
		padding: 0;
	}

	#navigation #hoofdmenu li a:hover ,
	#navigation #hoofdmenu li.active a {
		color: #0693FA !important;
	}

	@media all and (max-width: 1200px) {
		#navigation #hoofdmenu li a {
			font-size: 0.8rem;
		}
		#navigation #hoofdmenu li:after {
			padding: 0 0.25rem;	
		}
	}


/*---------------------------------------------- 
	3.2 Navigation Mobile
------------------------------------------------*/
	#navigation-mobile .cd-dropdown-trigger {
		display: block;
    	position: relative;
    	padding: 0;
		font-size: 1.25rem;
		line-height: 2.5rem;
		height: 2.5rem;
		width: 2.5rem;
		background: #0693FA;
		color: #FFF;	
		border: none;	
    	border-radius: 0;
		text-align: center;
		margin: 0;
		z-index: 99;
	}

	#navigation-mobile .cd-dropdown-trigger i {
		margin: 0;	
	}
	
	#navigation-mobile .cd-dropdown-content a,
	#navigation-mobile .cd-dropdown-content ul a {
    	color: #FFF;
		font-size: 1rem;	
		text-align: left !important;
	}

	#navigation-mobile .current_page_item a {
		color: #0693FA;
	}

	#navigation-mobile .cd-dropdown {
		background: #1E1E1E; 
		z-index: 999;
	}
	
	#navigation-mobile .cd-dropdown-wrapper {
		height: auto;
		margin: 0 !important;
	}
	
	#navigation-mobile ul {
		padding-left: 0;
	}
	
	#navigation-mobile .cd-dropdown-content a, 
	#navigation-mobile .cd-dropdown-content ul a {
		border-top-width: 1px;
    	border-bottom-width: 0;
    	border-left-width: 0;
    	border-right-width: 0;
    	border-color: #FFF;
    	border-style: solid;	
	}
	
	#navigation-mobile .cd-dropdown-content .go-back a {
		color: #0693FA;
	}

	.go-back a::before, .go-back a::after {
		background: #FFF !important;	
	}
	
	#navigation-mobile .cd-secondary-dropdown > a,
	#navigation-mobile .cd-secondary-dropdown > .go-back a {
  		display: none !important;
		background: #FFF;
	}

	#navigation-mobile .has-children > a::before, 
	#navigation-mobile .has-children > a::after, 
	#navigation-mobile .go-back a::before, .go-back a::after ,
	.cd-dropdown .cd-close::after, 
	.cd-dropdown .cd-close::before {
		background: #0693FA !important;
	}

	#navigation-mobile .cd-secondary-dropdown > .go-back a + a {
		display: block !important;
	}

/*---------------------------------------------- 
	4.1 Page Intro
------------------------------------------------*/
	#page-intro.standard {
		padding-top: 12.5rem;
	}
	
	#page-intro.image-text {
		padding-top: 7rem;
	}

	#page-intro .image img {
		max-width: 41.5rem;
	}

	#page-intro .content {
		padding-bottom: 2.75rem;
	}

/*---------------------------------------------- 
	4.2 Page Modules
------------------------------------------------*/
	#page-modules {
		padding: 2rem 0;
	}

	#page-modules .module {
		padding: 0.75rem 0;
	}

	#page-modules .module span.devider {
		margin-top: 0.75rem;
		margin-bottom: 2.5rem;
	}

/*---------------------------------------------- 
	4.2.1 Module Contactformulier
------------------------------------------------*/
	form .form-group {
		width: 100%;
		margin-bottom: 0;
		margin-bottom: 1rem;
	}
	
	form .form-control {
    	background-color: #EAE7E7 !important;
		height: 55px;
    	font-size: 16px;
    	line-height: 1.5;
    	background-image: none;
		padding-left: 1rem;
		padding-right: 1rem;
    	border: none;
		margin: 0;
		box-shadow: none;
    	border-radius: 0;
	}
	
	form textarea.form-control {
		height: auto;
		max-height: 10.25rem;
		padding-top: 1rem;
	}
		
	form .btn input {
		background: none !important;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		border: none;
		text-align: center !important;
		cursor: pointer;
		font-weight: 400;
		color: #FFF !important;
	}

	form .btn {
		font-size: 1rem;
		line-height: 1.25rem;
		width: 100%;
		padding: 0.75rem;
		border-radius: 0;
	}

	form .btn:hover input {
		color: #121212 !important;
	}
	
	.wpcf7-spinner {
		display: none;
		width: 0 !important;
	}
	
	div.wpcf7-mail-sent-ok {
		border: none !important;
	}
	
	div.wpcf7-validation-errors {
		border: none !important;
	}
	
	div.wpcf7-response-output {
		margin: 0;
		padding: 0;
	}

	.wpcf7-list-item {
		margin: 0 1rem 0 0;
	}

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


/*---------------------------------------------- 
	4.3 Page Projecten
------------------------------------------------*/
	#overzicht-projecten {
		padding-bottom: 3rem;
	}

	#overzicht-projecten span.devider {
		margin-top: 0;
	}

/*---------------------------------------------- 
	5.1 Footer
------------------------------------------------*/
	#footer .brand img {
		max-width: 260px;
	}

	#footer h4 {
		line-height: 2rem;
	}

	#footer ul li ,
	#footer ul li a {
		font-size: 1rem;
		line-height: 2rem;
		color: #FFF;
		padding: 0;
		background: none;
	}

	#footer ul li a:hover {
		color: #B2292E;
	}

	#footer span.quote {
		font-size: 2rem;
		line-height: 2.5rem;
	}

	
/*---------------------------------------------- 
	6.2 Footer Bottom
------------------------------------------------*/
	#footer-bottom {
		padding: 1rem 0;
	}

	#footer-bottom span {
		color: #707070;
	}

	#footer-bottom span a {
		color: #707070;
	}

	#footer-bottom a:hover {
		color: #0693FA !important;
	}

	#footer-bottom #menu-footer-bottom li a {
		color: #B2292E;
		padding: 0;
		background: none;
		display: inline-block;
	}

	#footer-bottom li:after {
		content: "-";
		color: #B2292E;
		padding: 0 0.75rem;
		display: inline-block;
	}

	#footer-bottom li:last-child:after {
		content: none;
	}