/************************************************************************************** 
 * tour.css (alleen van toepassing op product tour pagina als aanvulling op de teqa.css)
 **************************************************************************************/

p.section-title {
	border-bottom:1px solid rgba(255,255,255,0.5);
	padding-bottom:0.5em;
	margin-bottom:40px;
	opacity:0.75;
	}
	.grey p.section-title,
	.white p.section-title {
		border-bottom:1px solid rgba(0,0,0,0.3);
		opacity:0.5;
		}
p.intro {
	font-size:16px;
	}
	@media (min-width:1200px) { /*LG Devices*/
		p.intro.center  {
			padding:0 100px;
			}
	}
	@media (min-width:992px) and (max-width:1199px) { /*MD Devices*/
		p.intro.center  {
			padding:0 50px;
			}
	}
/* for all Balloon Sections: no padding-bottom hide carousel indicators & controls if only one slide is used */
.carousel.one-image-only {
	padding-bottom:0!important;
	}
	.carousel.one-image-only .carousel-indicators,
	.carousel.one-image-only .carousel-control {
		display:none!important;
		}
		
/* if present, make enlarge image button clickable (preventy the carousel-control div laying on top of this button) */
.carousel-control.bottom-position {
	bottom:39px;
	}
	.carousel-control.bottom-position.enlarge {
		bottom:71px;
		}
/* set margin for paragraph containing the enlarge button */		
.item p.enlarge-btn {
		margin-top:10px;
		margin-bottom:0;
		}
/* custom link settings for link in oneliner small-text */
.oneliner a,
.oneliner a:link,
.oneliner a:visited {
	color:#555555;
	text-decoration:underline;
	}
	.oneliner a:hover,
	.oneliner a:focus {
		color:#000000;
		text-decoration:underline;
		}

/*------------------------------
	  SECTION 01
------------------------------*/
#section-01 {
	background-color:#3BA7C2;
	color:#ffffff;
	padding: 40px 0px;
	text-align:center;
	}
	/* SM MD LG DEVICES */
	/* vertical balloons also used for other sections using this vertical balloon lay-out (section-04) */
	.balloons {
		text-align:left;
		margin-top:35px;
		}		
		.balloons a.toggle_balloon,
		.balloons a.toggle_balloon:link {
			color:#555555;
			}
			.balloons a.toggle_balloon h3,
			.balloons a.toggle_balloon:link h3 {
				color:#3BA7C2;
				}
		.balloons a.toggle_balloon[aria-expanded=true],
		.balloons a.toggle_balloon[aria-expanded=true]:link,
		.balloons a.toggle_balloon[aria-expanded=true] h3,
		.balloons a.toggle_balloon[aria-expanded=true]:link h3 {
			color:#ffffff;
			}
			
			.toggle_balloon .arrow_box {
				position:relative;
				background-color:#ffffff;
				border:1px solid #ffffff;
				box-shadow:none;
				}
				.toggle_balloon[aria-expanded=true] .arrow_box {
					background-color:#2f859b;
					border-color:#2f859b;
					}					
					.toggle_balloon[aria-expanded=true] .arrow_box:after, 
					.toggle_balloon[aria-expanded=true] .arrow_box:before {
						left: 100%;
						top: 50%;
						border: solid transparent;
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						}
						.toggle_balloon[aria-expanded=true] .arrow_box:after {
							border-color: rgba(47,133,155,0);
							border-left-color:#2f859b;
							border-width: 10px;
							margin-top: -10px;
							}
						.toggle_balloon[aria-expanded=true] .arrow_box:before {
							border-color:rgba(47,133,155,0);
							border-left-color:transparent;
							border-width:16px;
							margin-top:-16px;
							}
							
				.toggle_balloon .arrow_box h3 {
					margin-top:0;
					font-size:22px;
					}
					.toggle_balloon .arrow_box h3 .fa {
						float:right;
						}
						.toggle_balloon[aria-expanded=true] .arrow_box h3 .fa {
							display:none;
							}
				.toggle_balloon .arrow_box p {
					margin-bottom:0;
					}
					@media (min-width:768px) and (max-width:991px) {
						.toggle_balloon .arrow_box p {
							font-size:12px;
							}
					}
				
				.ballooncontent .ContentAnimation {
					animation-delay: 0.35s;
						}
						.ballooncontent .ContentAnimation .PaddingAnimation {
							padding:15px;
							background-color:rgba(255,255,255,0.25);
							color:#333333;
							border-radius:5px;
							}
							.ballooncontent .ContentAnimation .img-container {
								margin-bottom:15px;
								}							
				
	/* XS DEVICES */
	/* also used for other sections using the 'vertical balloon lay-out' (section 04) */	
	.panel-default {
		border-color: #3BA7C2;
		box-shadow:none;
		}
	.panel-default a .panel-heading {
		color:#3BA7C2;
		background-color:#ffffff;
		border-color:#3BA7C2;
		}
		.panel-default a[aria-expanded=true] .panel-heading {
			color:#ffffff;
			background-color:#2f859b;
			border-color:#2f859b;
			}
			.panel-default a[aria-expanded=false] .fa-myCollapse:before {
				content: "\f078";
				}
			.panel-default a[aria-expanded=true] .fa-myCollapse:before {
				content: "\f077";
				}
	.panel-default .panel-title {
		font-weight:bold;
		}
	.panel-default .panel-body {
		color:#555555;
		}
		.panel-default .panel-body p.intro-panel {
			font-weight:bold;
			margin-bottom:15px;
			}
		.panel-default .panel-body .img-container {
			margin-bottom:15px;
			}
	/* images set as carousel-item */		
	#section-01 .carousel {
		padding-bottom:39px;
		}
	
	#section-01 .carousel-control.right,
	#section-01 .carousel-control.left {
			background-image: none;
			}
		/* HIDE CONTROLS, we use next button defined per slide
		/* you still can click/touch the left or right side to go to the prev/next slide but you don't see the glyphicon icons left and right!
		/* uncomment if you want to show the left and right aroows */
		#section-01 .carousel-control .glyphicon {
			display:none;
			}
	#section-01 .carousel-indicators {
		bottom:-15px;
		}
		#section-01 .carousel-indicators li {
			width:34px;
			height:34px;
			border-color:transparent;
			background-color:transparent;
			text-indent:0;
			}
			#section-01 .carousel-indicators li .btn-indicator {
				width:34px;
				height:34px;
				border-radius:50%;
				border:1px solid #555555;
				background-color:transparent;
				color:#555555;
				text-indent:0;
				}
				#section-01 .carousel-indicators li.active .btn-indicator{
					background-color:#3BA7C2;
					border-color:#3BA7C2;
					color:#ffffff;
					outline: 0px none;
					}
/*------------------------------
	  SECTION QUOTES
------------------------------*/		
#section-quotes {
	padding:20px 0;
	background-color:#f0f0f0;
	}
	/* quotes carousel */
	#section-quotes .carousel-control.left, 
	#section-quotes .carousel-control.right {
		background-image:none !important;
		}
		#section-quotes .carousel-control {
			font-size:16px;
			background:transparent;
			padding: 2px 0;
			width:20px;
			top:auto;	
			left:auto;
			bottom:0;
			opacity:1;
			text-shadow:none;
			}
			#section-quotes .carousel-control,
			#section-quotes .carousel-control:hover,
			#section-quotes .carousel-control:focus,
			#section-quotes .carousel-control a,
			#section-quotes .carousel-control a:link,
			#section-quotes .carousel-control a:hover,
			#section-quotes .carousel-control a:focus,
			#section-quotes .carousel-control:focus {
				color:#ffffff;
				background-color:#aaaaaa;
				}
			#section-quotes .carousel-control.right {
				right:10px;
				}		 
			#section-quotes .carousel-control.left {
				right: 40px;
				}
	#section-quotes blockquote {
		background-color:transparent;
		border-left-color:#aaaaaa;		
		margin:0;
		padding:20px 20px 30px;
		}		
		#section-quotes blockquote i {
			color:#aaaaaa;
			font-size:30px;
			margin-bottom:10px;
			}
		#section-quotes blockquote p {
			color:#666666;
			font-style:italic;
			font-weight:300;
			font-size:16px;
			}
		#section-quotes blockquote footer {
			color:#777777;
			font-style:italic;
			}
/*------------------------------
	  SECTION 02
------------------------------*/
#section-02 {
	background-color:#ffffff;
	color:#555555;
	padding: 40px 0px;
	text-align:center;
	}
	/* SM MD LG DEVICES */
	/* horizontal balloons, see vertical balloons for common balloon setting (here we use just overrides) */
	.balloons-horizontal {
		background-color:#ffffff;
		}
		.balloons-horizontal a.toggle_balloon,
		.balloons-horizontal a.toggle_balloon:link {
			color:#999999;
			}
			.balloons-horizontal a.toggle_balloon h3,
			.balloons-horizontal a.toggle_balloon:link h3 {
				color:#888888;
				}
		.balloons-horizontal a.toggle_balloon[aria-expanded=true],
		.balloons-horizontal a.toggle_balloon[aria-expanded=true]:link,
		.balloons-horizontal a.toggle_balloon[aria-expanded=true] h3,
		.balloons-horizontal a.toggle_balloon[aria-expanded=true]:link h3 {
			color:#ffffff;
			}
		.balloons-horizontal .toggle_balloon .arrow_box {
			border-color:#aaaaaa;
			}
			.balloons-horizontal .toggle_balloon[aria-expanded=true] .arrow_box {
				border-color:#3BA7C2;
				background-color:#3BA7C2;
				}					
				.balloons-horizontal .toggle_balloon[aria-expanded=true] .arrow_box:after, 
				.balloons-horizontal .toggle_balloon[aria-expanded=true] .arrow_box:before {				
					top: 100%;
					left: 50%;
					}
					.balloons-horizontal .toggle_balloon[aria-expanded=true] .arrow_box:after {
						border-color: rgba(59,167,194,0);
						border-top-color: #3BA7C2;
						border-width: 20px;
						margin-left: -20px;
						}
					.balloons-horizontal .toggle_balloon[aria-expanded=true] .arrow_box:before {
						border-color: rgba(59,167,194,0);
						border-top-color: #3BA7C2;
						border-width: 26px;
						margin-left: -26px;
						}
				
				.balloons-horizontal  .toggle_balloon .arrow_box p {
					line-height:20px;
					min-height:40px; /* (max aantal regels: 2) * line-height */
					}
					@media (min-width:768px) and (max-width:1199px) {
						.balloons-horizontal  .toggle_balloon .arrow_box p {
							min-height:60px; /* (max aantal regels: 3) * line-height */
							}
					}
				.balloons-horizontal  .ballooncontent .ContentAnimation .PaddingAnimation {
					background-color:#f0f0f0;
					}
					
	/*XS Devices - different panel colors for this section, all basic setting are used from the section optimalisering */
	#section-02 .panel-default {
		border-color: #aaaaaa;
		}
	#section-02 .panel-default a .panel-heading {
		color:#aaaaaa;
		border-color:#aaaaaa;
		}
		#section-02 .panel-default a[aria-expanded=true] .panel-heading {
			color:#ffffff;
			background-color:#3BA7C2;
			border-color:#3BA7C2;
			}
	/* images set as carousel-item */		
	#section-02 .carousel {
		padding-bottom:39px;
		}
	#section-02 .carousel-control.right,
	#section-02 .carousel-control.left {
			background-image: none;
			}
		/* HIDE CONTROLS, we use next button defined per slide
		/* you still can click/touch the left or right side to go to the prev/next slide but you don't see the glyphicon icons left and right!
		/* uncomment if you want to show the left and right aroows */
		#section-02 .carousel-control .glyphicon {
			display:none;
			}
	#section-02 .carousel-indicators {
		bottom:-15px;
		}
		#section-02 .carousel-indicators li {
			width:34px;
			height:34px;
			border-color:transparent;
			background-color:transparent;
			text-indent:0;
			}
			#section-02 .carousel-indicators li .btn-indicator {
				width:34px;
				height:34px;
				border-radius:50%;
				border:1px solid #555555;
				background-color:transparent;
				color:#555555;
				text-indent:0;
				}
				#section-02 .carousel-indicators li.active .btn-indicator{
					background-color:#999999;
					border-color:#999999;
					color:#ffffff;
					outline: 0px none;
					}
					
/*------------------------------
	  SECTION 03
------------------------------*/			
#section-03 {
	padding:40px 0 20px;
	background-color:#f0f0f0;
	color:#777777;
	}
	#section-03 .well {
		background-color: #ffffff;
		box-shadow: none;
		border: 1px solid #E5E5E5;
		text-align: center;
		}
		#section-03 .well p {
			line-height:20px;
			}
		@media (min-width:768px) and (max-width:991px) {
			#section-03 .well p {
				min-height:120px; /* (max aantal regels: 6) * line-height */
				}
		}
		@media (min-width:992px) and (max-width:1199px) {
			#section-03 .well p {
				min-height:80px; /* (max aantal regels: 4) * line-height */
				}
		}
		@media (min-width:1200px) {
			#section-03 .well p {
				min-height:60px; /* (max aantal regels: 3) * line-height */
				}
		}
		#section-03 .fa,
		#section-03 .glyphicon {
			display: block;
			float: none;
			margin: auto;
			width: 90px;
			height: 90px;
			border: 2px solid #cecece;
			border-radius: 50%;
			font-size: 40px;
			color: #ffffff;
			background-color:#cecece;
			padding-top: 25px;
			}
/*------------------------------
	  SECTION 04
------------------------------*/
#section-04 {
	background-color:#3BA7C2;
	color:#ffffff;
	padding: 40px 0px;
	text-align:center;
	}
	/* images set as carousel-item */
	#section-04 .carousel {
		padding-bottom:39px;
		}
	#section-04 .carousel-control.right,
	#section-04 .carousel-control.left {
			background-image: none;
			}
		/* HIDE CONTROLS, we use next button defined per slide
		/* you still can click/touch the left or right side to go to the prev/next slide but you don't see the glyphicon icons left and right!
		/* uncomment if you want to show the left and right aroows */
		#section-04 .carousel-control .glyphicon {
			display:none;
			}
	#section-04 .carousel-indicators {
		bottom:-15px;
		}
		#section-04 .carousel-indicators li {
			width:34px;
			height:34px;
			border-color:transparent;
			background-color:transparent;
			text-indent:0;
			}
			#section-04 .carousel-indicators li .btn-indicator {
				width:34px;
				height:34px;
				border-radius:50%;
				border:1px solid #555555;
				background-color:transparent;
				color:#555555;
				text-indent:0;
				}
				#section-04 .carousel-indicators li.active .btn-indicator{
					background-color:#3BA7C2;
					border-color:#3BA7C2;
					color:#ffffff;
					outline: 0px none;
					}
/*------------------------------
	  SECTION 05
------------------------------*/				
#section-05 {
	background-color:#ffffff;
	color:#555555;
	padding: 40px 0px;
	}
	#section-05 .image-container {
		padding-top:20px;
		}
/*------------------------------
	  SECTION 06
------------------------------*/	
#section-06 {
	background-color:#f0f0f0;
	color:#666666;
	padding: 40px 0px;
	}
	#section-06 .slide-container {
		padding-top:20px;
		}
		#section-06 #carousel-devices .carousel-indicators {
			bottom: -15px;
			left:42%;
			}
			#section-06 #carousel-devices .carousel-indicators li {
				background-color:rgba(0,0,0,0);
				border-color:rgba(0,0,0,0.5);
				}		
				#section-06 #carousel-devices .carousel-indicators .active {
					margin:1px;
					width:10px;
					height:10px;
					background-color:rgba(0,0,0,0.5);
					border-color:rgba(59,167,194,0);
					}				
				
		#section-06 #carousel-devices .carousel-control.right,
		#section-06 #carousel-devices .carousel-control.left {
				background-image: none;
				}
			/* HIDE CONTROLS, we use next button defined per slide
			/* you still can click/touch the left or right side to go to the prev/next slide but you don't see the glyphicon icons left and right!
			/* uncomment if you want to show the left and right aroows */
			#section-06 #carousel-devices .carousel-control .glyphicon {
				display:none;
				}
/*------------------------------
	  SECTION 07
------------------------------*/
#section-07 {
	padding:40px 0;
	background-color:#ffffff;
	color:#777777;
	text-align:center;
	}
	#section-07 .media {
		text-align:left;
		margin-top:25px;
		margin-bottom:35px;
		}
		#section-07 .media-left {
			padding-right:20px;
			}