/* CSS Document 
  ____  _                  _  ___        _     ____           _                      
 / ___|| |_ __ _ _ __   __| |/ _ \ _   _| |_  |  _ \ ___  ___| | __ _ _ __ ___   ___      
 \___ \| __/ _` | '_ \ / _` | | | | | | | __| | |_) / _ \/ __| |/ _` | '_ ` _ \ / _ \      
  ___) | || (_| | | | | (_| | |_| | |_| | |_  |  _ <  __/ (__| | (_| | | | | | |  __/
 |____/ \__\__,_|_| |_|\__,_|\___/ \__,_|\__| |_| \_\___|\___|_|\__,_|_| |_| |_|\___|
 	
 	Stylesheet for JTCA
 	
	http://www.standoutreclame.nl
	
	0. Image align WP
	1. Basics
	2. Hoofdmenu
	
	5. Footer
	6. Sitemap

/*-----------------------------------------------------------------------
0. IMAGE ALIGN WP
-----------------------------------------------------------------------*/
/*		IMAGE ALIGN 	----------------------------------------------------- */

.alignnone{
	margin:15px 0px 15px 15px;
	background-color:#FFF;
	padding:5px;
	box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50);
}
.alignright{
	float:right;
	margin:15px 0px 15px 15px;
	background-color:#FFF;
	padding:5px;
	box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50);
}
.alignleft{
	float:left;
	margin:15px 15px 15px 0;
	background-color:#FFF;
	padding:5px;
	box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50);
}
@media all and (max-width: 767px) {
	.alignnone{
		margin:15px 0px 15px 0;
		background-color:#FFF;
		padding:5px;
		box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50);
		width: auto;
		max-width: 100%;
		display: block;
	}
	.alignright{
		float:none;
		margin:15px 0;
		background-color:#FFF;
		padding:5px;
		box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50);
		width: auto;
		max-width: 100%;
		display: block;
	}
	.alignleft{
		float:none;
		margin:15px 0;
		background-color:#FFF;
		padding:5px;
		box-shadow:0px 2px 4px 0px rgba(0,0,0,0.50);
		width: auto;
		max-width: 100%;
		display: block;
	}
}

/*-----------------------------------------------------------------------
1. BASICS
-----------------------------------------------------------------------*/
/* html / body ------------------------------------------------------- */

html,body {
	background: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #39516F;
	-webkit-font-smoothing: antialiased;
}

.vcenter {
	display: inline-block;
	float: none;
	margin-right: -4px;
	vertical-align: middle;
}

/* Typography	------------------------------------------------------ */

h1,h2,h3,h4,h5,h6 {
	font-family: 'Roboto', sans-serif;
	color: #5B6060;
	text-transform: uppercase;
	font-weight: 400;
}

p {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #5A5A5A;
	letter-spacing: 0px;
	line-height: 25px;
}

/* Links	---------------------------------------------------------- */

a {
	transition: all 0.3s ease-in-out;
	-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;
}

a:focus, a:active {
	text-decoration: none;
	color: inherit;
}
a:hover {
	text-decoration: none;
	color: #EE980A;
}

.lgrijs_bg {
	background: #F2F2F2;
}

/*-----------------------------------------------------------------------
1. Top
-----------------------------------------------------------------------*/
/* Top					---------------------------------------------- */

.top_bar {
	padding: 35px 0;
}

@media all and (max-width: 992px) {
	.logo_container img {
		margin: 0 auto
	}
}


/*-----------------------------------------------------------------------
2. HOOFDMENU
-----------------------------------------------------------------------*/
/* Hoofdmenu - 1200px	---------------------------------------------- */

.navbar {
	min-height: auto;
	margin-top: 0;
}

.navbar-collapse {
	padding: 0;
}

.navbar-default {
	background: none;
	border: none;
	margin-bottom: -24px;
	padding: 0 0 15px 0;
	border-radius: 0;
}

	.navbar-default ul {
		margin: 0 0 -16px 0;
		padding: 20px 0 0 0;
		list-style: none;
		text-align: justify;
	    -moz-text-align-last: justify;
		-webkit-text-align-last: justify; /* not implemented yet, and will not be */
		text-align-last: justify; /* IE */
	}
	
	.navbar-default ul:after {
		content: "";
		display: inline-block;
		width: 100%;
	}
	
		.navbar-default ul li {
			display: inline-block;
			position: relative;
			padding-bottom: 20px;
		}
		
			.navbar-default ul li a {
				padding-bottom: 8px;
				color: #5A5A5A;
				font-size: 16px;
				text-transform: uppercase;
				font-weight: 400;
			}
			
			.navbar-default ul li a:hover,
			.navbar-default ul li.current_page_item a,
			.navbar-default ul li.current-page-ancestor a {
				color: #EE980A;
			}


@media all and (max-width: 992px) and (min-width: 767px) {
	.navbar-default ul {
		margin-bottom: -40px;
	}
}

/*		HEADER - HOOFDMENU 767px 	--------------------------------------- */

@media all and (max-width: 767px) {
	
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		border: none;
	}
	
	.navbar-collapse{
		-webkit-box-shadow:none;
		box-shadow: none;
		position: absolute;
		width: 100%;
		z-index: 100;
	}
	
		.navbar-collapse.in {
			overflow-y: visible;
		}
	
	/*		NAVBAR-DEFAULT 	--------------------------------------- */
	
	.navbar-default {
		padding: 0;
		margin-bottom: 25px;
	}
	
		.navbar-default {
			position: relative;
			min-height: auto;
			border-bottom: 0;
		}

			/*		TOGGLE BAR 	--------------------------------------- */
			
			.navbar-default .navbar-toggle {
				border-color: #EE980A;
				background: #EE980A;
				width: 100%;
				margin: 10px auto ;
				border: none!important;
				position: absolute;
				z-index: 1000;
				padding-left: 15px;
				padding-right: 15px;
			}
			
				.navbar-default .navbar-toggle .icons-bar {
					float: right;
					margin-top: 3px;
				}
				
				.navbar-default .navbar-toggle .icon-bar {
					background-color: #fff;
				}
				
					.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
						
					}
					
					.navbar-toggle:hover .icon-bar,.navbar-toggle:focus .icon-bar,.navbar-toggle:active .icon-bar {
						
					}

				.nav_noemer {
					float: left;
					
				}
				
				.navbar-toggle:hover .nav_noemer,.navbar-toggle:focus .nav_noemer,.navbar-toggle:active .nav_noemer {
					
				}
	
	/*		Menu 	--------------------------------------- */
	
	.navbar-default ul {
		display: block;
		height: auto;
		background: #eee;
		margin-top: 35px;
		padding: 10px 15px;
		text-align: left;
		text-align: left;
		-moz-text-align-last: left;
		-webkit-text-align-last: left; /* not implemented yet, and will not be */
		text-align-last: left; /* IE */
		position: relative;
		z-index: 10;
	}
	
		.navbar-default ul:after {
			margin-left: 0;
			width: 0;
			display: none;
		}
		
			.navbar-default ul li {
				display: block;
				border-bottom: 1px solid #fff;
				padding: 5px 0;
			}

			.navbar-default ul li:first-child {
				margin-top: 10px;
			}
			
				.navbar-default ul li a {
					color: #5B6060;
					text-transform: uppercase;
					font-weight: 400;
					line-height: 28px;
				}
				
				.navbar-default ul li a:hover, .navbar-default ul li.current-menu-item a, .navbar-default ul li.current-page-ancestor a {
					color: #EE980A;
				}
	
}

/*		HEADER - HOOFDMENU DROPDOWN 	------------------------------- */

.navbar-default ul li ul {
	visibility: hidden; 
    opacity: 0;
    position: absolute;
    top: 150%;
    left: 0;
    transform: translateZ(0);
    transform: translateY(10%);
    transition: all 0.5s ease 0s, visibility 0s linear 0.5s; 
    z-index: 10000;
    background: #ededed;
	margin: 0;
	padding: 0;
	min-width: 200px;
	max-width: 250px;
	text-align: left;
	-moz-text-align-last: left;
    -webkit-text-align-last: left;
    text-align-last: left;
}

	.navbar-default ul li ul:after {
		margin-left: 0;
		width: 0;
		display: none;
	}

	.navbar-default ul li:hover ul {
		visibility: visible; 
	    opacity: 1;
	    transform: translateX(0%);
	    transition-delay: 0s;
	    top: 43px;
	}

	.navbar-default ul li ul li:first-child {
		padding-left: 8px;
	}
	
	.navbar-default ul li:last-child ul {
		right: 0;
		left: auto;
	}

	.navbar-default ul li ul li.current_page_item {
		background: #E20617;
	}

	.navbar-default ul li ul li {
		border-bottom: 1px solid #fff;
		padding: 4px 8px;
		width: 100%;
	}
	
	.navbar-default ul li ul li:last-child {
		border-bottom: 0;
	}
	
	.navbar-default ul li ul li:hover {
		background: #E20617;
		color: #fff;
	}

		.navbar-default ul li ul li a {
			color: #333!important;
			text-transform: none;
			font-weight: 400;
			line-height: 28px;
			font-size: 14px;
			text-transform: uppercase;
			display: block;
			padding-bottom: 0;
		}
		
		.navbar-default ul li ul li.current_page_item a {
			color: #fff!important;
		}
		
		.navbar-default ul li ul li:hover a {
			color: #fff!important;
			border-bottom: none;
		}

/*		HEADER - HOOFDMENU DROPDOWN - 767px	------------------------------- */

@media all and (max-width: 767px) {
	
	.navbar-default ul li ul {
		position: relative;
		top: 0;
		opacity: 1;
		visibility: visible;
		transform: translateX(0%);
		width: 100%;
		max-width: 100%;
		border: none;
		text-align: left;
		-moz-text-align-last: left;
		-webkit-text-align-last: left; 
		text-align-last: left; 
	}
	
		.navbar-default ul li ul li {
			padding: 0 8px;
		}
	
		.navbar-default ul li:hover ul {
			top: 0;
		}
	
		.navbar-default ul li ul li:first-child {
			margin-top: 3px;
		}
		
			.navbar-default ul li ul li a:before {
				content: '- ';
			}
			
}

/*		HEADER - HOOFDMENU DROPDOWN - IPAD	------------------------------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
	.navbar-default ul li ul {
		display: none;	
	}
	.navbar-default ul li:hover ul {
		display: block;
	}
}

/*-----------------------------------------------------------------------
3. HEADERS
-----------------------------------------------------------------------*/
/* HEADER - default		---------------------------------------------- */

header {
	width: 100%;
	position: relative;
}

header.front_header {
}

	header.front_header img {
		width: 100%;
		top: 0;
		left: 0;
		height: auto;
		position: relative;
	}

header.default_header {
}

	header .header_content {
		margin-top: -80px;
		text-align: right
	}

		
		header .header_content .header_inner p {
			font-size: 18px;
			text-transform: uppercase;
			margin-top: 20px;
			font-weight: 700;
		}
		
		.header_content_mobile .header_inner p{
			font-size: 16px;
			text-transform: uppercase;
			margin-top: 20px;
			font-weight: 700;
			text-align: center;
		}
		
		@media all and (min-width: 992px) {
			
			header .header_content .header_inner p {
				font-size: 21px;	
			}	
			
		}
		
		@media all and (min-width: 1200px) {
				
			header .header_content .header_inner p {
				font-size: 24px;	
			}	
			
			
			header .header_content .header_inner.front_page_header p {
				font-size: 28px;	
			}	
			
		}
		
		
	
	
/*-----------------------------------------------------------------------
4. SECTIONS
-----------------------------------------------------------------------*/
/* SECTION				---------------------------------------------- */

section {
	padding: 60px 0;
}

	section h1:first-child,
	section h2:first-child {
		margin-top: 0;
	}
	
	section h1.page_title {
		margin-bottom: 40px;
		word-break: break-word
	}
	
	.oranje_bg {
		background: #EE980A;
	}
	
	.page_list {
		margin: -20px 0 0 0;
		padding: 0;
		list-style: none;
		text-align: justify;
	    -moz-text-align-last: justify;
		-webkit-text-align-last: justify; /* not implemented yet, and will not be */
		text-align-last: justify; /* IE */
	}
	
	.page_list:after {
		content: "";
		display: inline-block;
		width: 100%;
	}
	
	.page_list li {
		display: inline-block;
		border: 1px solid #EE980A;
		padding: 10px;
		margin: 0 0 10px 0;
	}
	
		.page_list li a {
			color: #5A5A5A!important;
			text-transform: uppercase;
			font-weight: 700;
			font-size: 14px;
		}
		
		.page_list li.current_page_item a {
			color: #EE980A!important;
		}
		
	@media all and (max-width: 767px) {
		.page_list {
			-moz-text-align-last: left;
		    -webkit-text-align-last: left;
		    text-align-last: left;
		    text-align: left
		}

		.page_list{
			margin-top: -40px;
			text-align: center;
		}
		
		.page_list li {
			margin: 0 0 10px 0;
			width: 100%;
		}
		
		.page_list li a{
			text-align: center;
			display: block;
		}

	}
	
	section.content a {
		color: #EE980A;
	}
	
	section.content ul li {
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		color: #5A5A5A;
		letter-spacing: 0px;
		line-height: 25px;
	}
	
	section.content .text-left{
		text-align: left;
	}
	
	section.content .text-left h1,
	section.content .text-left h2,
	section.content .text-left h3{
		text-transform: none;
		font-size: 21px;
		font-weight: 700;
		margin-bottom: 10px;
	}
	
	section.content .text-center ul {
		list-style-position: inside;
	}
	
	section.content span.spacer {
		width: 30px;
		display: inline-block;
	}
	
	section.content table{
		margin: 20px auto 30px auto;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		color: #5A5A5A;
		line-height: 25px;
	}
	
/* SECTION - wordcloud	---------------------------------------------- */

section.wordcloud {
	padding: 30px;
}

	section.wordcloud ul {
		text-align: justify;
	    -moz-text-align-last: justify;
		-webkit-text-align-last: justify; /* not implemented yet, and will not be */
		text-align-last: justify; /* IE */
		margin: 0 0 -20px 0;
		padding: 0;
	}
	
	section.wordcloud ul:after {
		content: "";
		display: inline-block;
		width: 100%;
	}
	
		section.wordcloud ul li {
			display: inline-block;
		}
		
			section.wordcloud ul li a {
				color: #fff;
				font-size: 16px;
				font-weight: 700;
				text-transform: uppercase;
			}
			
			@media all and (max-width: 1200px) {
				section.wordcloud ul li a {
					font-size: 13px;
				}
			}
			@media all and (max-width: 992px) {
				section.wordcloud {
					display: none;
				}
			}
			
/* SECTION - klanten	---------------------------------------------- */

.klanten {
	margin: 40px 0 5px 0;	
}

.klant_logo {
	text-align: center;
	margin-bottom: 15px;
}

	.klant_logo img {
		margin: 0 auto;
	}
			
/* SECTION - contactformulier	--------------------------------------- */

section.contactformulier {
	
}
	
	section.contactformulier h3 {
		font-size: 20px;
		text-transform: uppercase;
	}
	
	section.contactformulier p {
		font-size: 14px;
		font-style: italic;
	}
	
	section.contactformulier p.bevestiging{
		font-style: normal;
	}


	section.contactformulier form {
		margin-top: 20px;
	}
		section.contactformulier form input,
		section.contactformulier form textarea {
			width: 100%;
			border-radius: 2px;
			border: 1px solid #EE980A;
			background: transparent;
			box-shadow: none;
			outline: none;
			padding: 10px 20px;
			margin-bottom: 15px;
		}
		
		section.contactformulier form textarea {
			height: 208px;
		}
		
		section.contactformulier form input[type=submit] {
			font-size: 16px;
			font-style: italic;
			color: #fff;
			text-transform: uppercase;
			background: #ee980a
		}
		
.control-group {
	display: inline-block;
	width: 200px;
	height: 210px;
	margin: 10px;
	padding: 30px;
	text-align: left;
	vertical-align: top;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.control {
	font-size: 14px;
	font-weight: 400;
	color: #5A5A5A;
	position: relative;
	margin-bottom: 15px;
	margin-right: 25px;
	padding-left: 30px;
	cursor: pointer;
	padding-top: 2px;
}

.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #e6e6e6;
}

.control--radio .control__indicator {
	border-radius: 8px;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
	background: #ccc;
}

/* Checked state */
.control input:checked ~ .control__indicator {
	background: #EE980A;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
	background: #EE980A;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
	pointer-events: none;
	opacity: .6;
	background: #e6e6e6;
}

/* Check mark */
.control__indicator:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
	display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
	top: 4px;
	left: 8px;
	width: 3px;
	height: 8px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}

/* Radio button inner circle */
.control--radio .control__indicator:after {
	
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator:after {
	background: #7b7b7b;
}


/*-----------------------------------------------------------------------
5. Footer
-----------------------------------------------------------------------*/
/* Footer				---------------------------------------------- */			
footer {
	padding: 30px 0 0 0;
	background: #5A5A5A;
}

	footer h3 {
		margin: 0 0 25px 0;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3em;
	}
	
	@media all and (min-width: 992px) {
		
		footer h3 {
			font-size: 18px;
		}
		
	}
	
	@media all and (min-width: 1200px) {
		
		footer h3 {
			font-size: 21px;
		}
		
	}
	

	footer p,
	footer a {
		color: #fff;
		font-size: 16px;
		text-transform: uppercase;
	}
	
	footer ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	footer ul li {
		padding: 0 0 10px 0;
	}
	
	footer .copyright {
		margin-top: 30px;
	}
	
	footer .copyright p,
	footer .copyright a {
		font-size: 14px;
		text-transform: none;
	}
	footer .copyright a {
		display: inline-block;
	}
	
	footer .social .linkedin {
		display: inline-block;
		width: 33px;
		height: 33px;
		background: url('images/linkedin.png') no-repeat;
		content: '';
		margin-right: 5px;
	}
	
	footer .social .youtube {
		display: inline-block;
		width: 33px;
		height: 33px;
		background: url('images/youtube.png') no-repeat;
		content: '';
	}
	
	
	@media all and (max-width: 991px) {
		footer h3 {
			margin-bottom: 10px;	
		}
		
		footer ul, footer p{
			margin-bottom: 25px;
		}
	}
/*-----------------------------------------------------------------------
6. Sitemap
-----------------------------------------------------------------------*/
/* Sitemap				---------------------------------------------- */	

section.content.sitemap h1{
	text-align: left;
}

section.content.sitemap ul li{
	text-align: left;
	font-size: 18px;
}
	
section.content.sitemap ul li ul{
	padding-left: 20px;
}	

section.content.sitemap ul li ul li{
	font-size: 16px;
}

.verborgen {
	position: fixed;
	top: -100px;
}