/*

* Author: Patrick Cleiren
* URL: http://www.pp-company.nl
*
* Project Name: Kublo Vastgoed dynamiek
* Version: 1.0
* Date: 14-03-2014
* URL: http://www.kublo.nl/

*/

/* ==========================================================================
Base Styles and Bootstrap Modifications
========================================================================== */

html, button, input, select, textarea {
	color: #4f4e47;
	-webkit-font-smoothing: antialiased !important;
}

/* Animated Elements Entrance Animation */

.animatedElement {
	visibility: hidden;
}

body {
	color: #4f4e47;
	font-family:"Adelle Sans", Arial, Helvetica, Geneva, sans-serif;
	line-height: 25px;
	font-size: 13px;
}

::-moz-selection {
	background: #e6007d;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #e6007d;
	color: #fff;
	text-shadow: none;
}

a {
	color: #e6007d;
	-o-transition:color .2s ease-out, background .2s ease-in;
	-ms-transition:color .2s ease-out, background .2s ease-in;
	-moz-transition:color .2s ease-out, background .2s ease-in;
	-webkit-transition:color .2s ease-out, background .2s ease-in;
	/* ...and now override with proper CSS property */
	transition:color .2s ease-out, background .2s ease-in;
}

h1,
h1.head {
	font-size: 30px;
	line-height: 40px;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;	
}

/* A better looking default horizontal rule */
 hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #f1f0ee;
	background: #f1f0ee;
	margin: 1em 0;
	padding: 0;
}

/* @group Navigation */

.btn-primary {
	color: #fff;
	background-color: #e6007d;
	border-color: #e6007d;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;	
	padding: 10px 20px;
	margin: 0 0 20px 0;
}

.btn-primary:hover {
	color: #fff;
	background-color: #4f4e47;
	border-color: #4f4e47;
}


#beeldmerk-xs {
	margin: 0;
	padding: 20px;
	position: absolute;
	top: 50px;
}

/* Navigation */
 .navbar {
	background-color: rgba(20, 4, 1, 0.8);
}

.navbar-nav {
	min-height: 100px;
}

	.navbar-nav li {
		margin-top: 25px;
	}
	
	.navbar-inverse .navbar-nav>li>a {
		color: #d1c3ab;
		font-size: 15px;
		font-weight: normal;
		
		-o-transition:color .2s ease-out, background .2s ease-in;
		-ms-transition:color .2s ease-out, background .2s ease-in;
		-moz-transition:color .2s ease-out, background .2s ease-in;
		-webkit-transition:color .2s ease-out, background .2s ease-in;
		/* ...and now override with proper CSS property */
		transition:color .2s ease-out, background .2s ease-in;
	}
	
		.navbar .btn-danger {
			margin: 0 0 0 25px;
			background: #e6007f;
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			color: #fff !important;
			padding: 13px 20px 10px 20px !important;
			border: 1px solid #e6007f;
		}
		
		.navbar-inverse .navbar-nav>li>a.btn-danger:hover, 
		.navbar-inverse .navbar-nav>li>a.btn-danger:focus {
			border: 1px solid #e6007f;
		}

/* Active tijdens scrollen */
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
	color: #e6007d;
	background: transparent;
}

.navbar-toggle {
	margin-right: 15px;
	padding: 9px 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	background-color: #e6007f;
	border: 1px solid #e6007f;
	border-radius: 0px;
}

	.navbar-toggle:hover {
		background-color: #8d004c;
		border: 1px solid #8d004c;
	}

/* @end */

/* Formulier */

.modal-content {
	border-radius: 0px;
	padding: 20px;
}

.modal {
	z-index: 9999;
}

.modal h1 {
	font-size: 30px;
	line-height: 30px;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;	
	margin-bottom: 20px;
	margin-top: 0;
}


.modal .btn-danger {
	display: block;
	text-align: right;
	margin: 20px 0 0 auto;
	background: #e6007f;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #fff !important;
	padding: 13px 20px 10px 20px !important;
}

.navbar-inverse .navbar-nav>li>a.btn-danger:hover, 
.navbar-inverse .navbar-nav>li>a.btn-danger:focus {
	border: 1px solid #e6007f;
}

/* Intro text "vastgoed dynamiek" */
#kubloheader h1.intro {
	position: relative;
	margin: -20px auto 0 auto;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	border: 2px solid #cbbba0;
	padding: 25px;
	font-size: 26px;
	color: #cbbba0;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 7px;
	max-width: 425px;
	
	-webkit-animation-delay: 0.75s;
	-moz-animation-delay: 0.75s;
	-o-animation-delay: 0.75s;
	-ms-animation-delay: 0.75s;
	animation-delay: 0.75s;
	
	text-shadow: 1px 1px 2px rgb(0, 0, 0);	
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}

/* Logo */
#logowrap {
	margin-top: 90px;
}

	#logowrap #logo {
		display: block;
	}
	
	#logowrap #beeldmerk {
		position: relative;
		display: block;
		z-index: 5000;
	}

/* Bewegende arrow beneden */

#kubloheader #arrow {
	position: absolute;
	bottom: 30px;
	margin: 0 auto;
	text-align: center;
	display: block;
	width: 100%;
}

	#kubloheader #arrow a i {
		color: #cbbba0 !important;
		text-shadow: 1px 1px 2px rgb(0, 0, 0);	
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	#kubloheader #arrow .fa-2x {
		font-size: 50px;
	}
	
	#kubloheader #arrow a:hover i {
		color: #e6007f !important;
		-o-transition:color .2s ease-out, background .2s ease-in;
		-ms-transition:color .2s ease-out, background .2s ease-in;
		-moz-transition:color .2s ease-out, background .2s ease-in;
		-webkit-transition:color .2s ease-out, background .2s ease-in;
		/* ...and now override with proper CSS property */
		transition:color .2s ease-out, background .2s ease-in;
	}
	

/* Sections */

/* Over Kublo sectie */

#OverKublo {
	background: url('../img/header-arrow-bottom.png') center top no-repeat transparent;
	padding-top: 60px;
}

	#OverKublo h1 {
		font-size: 30px;
		line-height: 40px;
		font-family: "adelle-sans",sans-serif;
		font-style: normal;
		font-weight: 100;	
		margin-bottom: 30px;
		margin-top: 0;
	}
	
	#OverKublo h2 {
		font-size: 20px;
		font-weight: 100;
		line-height: 30px;
		color: #777772;
		font-family: "adelle-sans",sans-serif;
		font-style: normal;
		font-weight: 100;
		margin-bottom: 30px;
	}
	
	#OverKublo p {
		margin: 15px 0;
	}
	
	
	#OverKublo img#img-partner {
		position: relative;
		margin: 15px auto 37px auto;
		width: 100%;
		height: 100%;
	}
	
		#OverKublo figure { 
			display: block; 
			position: relative; 
		}
		
		#OverKublo figcaption { 
			position: absolute;
			bottom:  5%; 
			left: 0;
			background: transparent; 
			text-align: right;
			color: #fff; 
			font-family: "adelle-sans",sans-serif;
			font-style: normal;
			font-weight: 100;
			line-height: 40px;
			font-size: 30px;
			padding: 10px 30px; 
			
			text-shadow: 1px 1px 2px rgb(0, 0, 0);	
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
		}


/* Citaat sectie */

#Citaat {
	position: relative;
	margin: 40px 0 30px 0;
	padding: 50px 0;
	color: #fff;
	text-align: center;
	
	background: url('../img/kublo-citaat.jpg') no-repeat center top;

	background-attachment: relative;
	background-position: center center;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    -moz-box-shadow: inset 0 0 3px #000000;
    -webkit-box-shadow: inset 0 0 3px #000000;
    box-shadow: inset 0 0 3px #000000;
    }

	#Citaat h1 {
		font-size: 28px;
		line-height: 45px;
		font-family: "adelle-sans",sans-serif;
		font-style: normal;
		font-weight: 100;	
		
		width: 75%;
		margin: 0 auto;
		
		text-shadow: 1px 1px 3px rgb(0, 0, 0);	
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	}

/* Team sectie */

#Team {
	padding: 0;
}

/* PasFoto sectie */

#Team h1.head {
	font-size: 30px;
	line-height: 40px;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;
	margin-bottom: 10px;
}

#Team #PasFoto {
	min-height: 250px;
	padding: 50px 0 0 0;
	margin-bottom: 20px;
	background: url('../img/team-patroon.jpg');
	
	-moz-box-shadow: inset 0 0 3px #c4c1c0;
	-webkit-box-shadow: inset 0 0 3px #c4c1c0;
	box-shadow: inset 0 0 3px #c4c1c0;
}

#Team #PasFoto .pasfotoElement {
	margin-left: 100px;
}

#Team #PasFoto a.linkedin {
	position: absolute;
	left: 15px;
	bottom: 20px;	
	width: 40px;
	height: 40px;
	background: url(../img/socialicons.png) no-repeat;
	display: block;
	text-decoration: none;
}

	#Team #PasFoto a.linkedin:hover {
		background: url(../img/socialicons.png) 0px -40px no-repeat;
		text-decoration: none;	
	}

#Team #PasFoto a.mail {
	position: absolute;
	left: 65px;
	bottom: 20px;	
	width: 40px;
	height: 40px;
	background: url(../img/socialicons.png) -40px 0 no-repeat;
	display: block;	
	text-decoration: none;	
}

	#Team #PasFoto a.mail:hover {
		background: url(../img/socialicons.png) -40px -40px no-repeat;
		text-decoration: none;
	}
	
#Team h1 {
	font-size: 22px;
	line-height: 30px;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;	
	margin-bottom: 0px;
}

#Team h2 {
	font-size: 18px;
	font-weight: 100;
	line-height: 30px;
	color: #777772;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;
	margin-bottom: 40px;
}

#Team h3 {
	font-size: 14px;
	font-weight: bold;
}

#Team ul {
	font-size: 13px;
	padding: 0;
	margin: 0 0 30px 0;
	list-style-position: inside;
    list-style-image: url(../img/opsomming.png);
    line-height: 30px;
}

/* Projecten sectie */

.projecten {
	min-height: 250px;
	padding: 40px 0 20px 0;
	margin-bottom: 20px;
	background: url('../img/team-patroon.jpg');
	-moz-box-shadow: inset 0 0 3px #c4c1c0;
	-webkit-box-shadow: inset 0 0 3px #c4c1c0;
	box-shadow: inset 0 0 3px #c4c1c0;
}

.projecten h1.head {
	font-size: 30px;
	margin: 0;
	padding: 0;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;
}

.projecten h2 {
	font-size: 18px;
	font-family: "adelle-sans",sans-serif;
	font-style: normal;
	font-weight: 100;
	margin: 0;
	padding: 10px 0 40px 0;
}

	.projecten .thumbnail {
		min-width: 360px;
		border: none;
		padding: 0;
		margin-bottom: 30px;
		
		/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-webkit-border-radius: 0px; 
		
		/* Firefox 1-3.6 */
		-moz-border-radius: 0px; 
		
		/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
		border-radius: 0px; 	  
	}

	.projecten .thumbnail figcaption {
		background: #2e2c22;
		height: 170px;		
		padding: 15px;
		color: #bbb8b4;
		font-size: 12px;
		overflow: hidden;
		line-height: 25px;
	}
	
		.projecten .thumbnail:hover {
			text-decoration: none;
		}

		.projecten .thumbnail figcaption h3 {
			font-size: 20px;
			line-height: 25px;
			padding: 0;
			margin: 0 0 5px 0;
		}

	.projecten .projectHover {
		position: absolute;
		min-width: 360px;
		display: none;
		height: 440px;
		padding-top: 80px;
		background: rgba(141, 0, 76, 0.8);
		font-size: 64px;
		text-align: center;
		color: #c5af99;
		text-shadow: 0 1px 2px rgba(0,0,0,.65);	
	}
	

.projecten .modal h1 {
	margin: 0;
	padding: 10px 0;
}

.projecten .modal h2 {
	margin: 0;
	padding: 10px 0 30px 0;
	line-height: 25px;
}

.projecten .modal p {
	margin-top: 20px;
}

.progress {
	overflow: hidden;
	height: 30px;
	margin: 20px 0;
	background-color: #e1e1e1;
	border-radius: 0px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progress-bar {
	font-size: 12px;
	font-weight: bold;
	line-height: 30px;
	color: #fff;
	text-align: center;
	background-color: #e1e1e1;
	}

.progress-bar-success {
	background-color: #e6007d;
}	

/* Opdrachtgevers sectie */

#Opdrachtgevers {
	padding: 10px 0 0 0;
	margin-bottom: 20px;
}

	#Opdrachtgevers h1.head {
		font-size: 30px;
		margin: 0 0 20px 0;
		padding: 0;
		font-family: "adelle-sans",sans-serif;
		font-style: normal;
		background: transparent;
		font-weight: 100;
	}

/* Contact sectie */

#Contact {
	min-height: 250px;
	padding: 50px 0 50px 0;
	background: #e6007d;
	color: #fff;
	-moz-box-shadow: inset 0 0 3px #c4c1c0;
	-webkit-box-shadow: inset 0 0 3px #c4c1c0;
	box-shadow: inset 0 0 3px #c4c1c0;
}

	#contactWrap {
		background: #8d004c;
		padding: 20px 0;
	}
	
		#contactWrap h1.head {
			font-size: 30px;
			margin: 20px 0 10px 0;
			padding: 0;
			font-family: "adelle-sans",sans-serif;
			font-style: normal;
			background: transparent;
			font-weight: 100;
		}
		
		#contactWrap h2 {
			font-size: 18px;
			line-height: 30px;
			font-family: "adelle-sans",sans-serif;
			font-style: normal;
			font-weight: 100;
			margin: 0;
			padding: 0 0 20px 0;
		}
		
		#contactWrap .btn-danger {			
			background: transparent;			
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			color: #fff !important;
			padding: 13px 20px 10px 20px !important;
			margin-top: 10px;
			border: 1px solid #fff;
		}
		
		#contactWrap a.btn-danger:hover, 
		#contactWrap a.btn-danger:focus {
			background: #2e2c22;
			border: 1px solid #fff;
		}
		
		#contactWrap #map {
			width: 100%;
			height: 340px;
			background: black;
		}
		
		.footerInfo {
			margin: 10px 0;
		}
		
.embed-container { 
	position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; 
	}

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	}

/* Footer sectie */

#Footer {
	padding: 15px 0 15px 0;
	text-align: center;	
}

/**
 * BootstrapValidator v0.2.2-dev (http://github.com/nghuuphuoc/bootstrapvalidator)
 *
 * A jQuery plugin to validate form fields. Use with Bootstrap 3
 *
 * @author      Nguyen Huu Phuoc <phuoc@huuphuoc.me>
 * @copyright   (c) 2013 Nguyen Huu Phuoc
 * @license     MIT
 */


.bootstrap-validator-form .help-block{margin-bottom:0}

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.2
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background: url('../img/ui.totop.png') no-repeat left top;
}

#toTopHover {
	background: url('../img/ui.totop.png') no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

/* @group ##RESPONSIVE TWEAKS */

/* Large desktop */
@media (min-width: 1200px) {

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) { 


	#Projecten .thumbnail {
		min-width: 455px;  
	}

	#Projecten .thumbnail figcaption {
		background: #2e2c22;
		height: 170px;		
		padding: 15px;
		color: #bbb8b4;
		font-size: 12px;
		overflow: hidden;
		line-height: 25px;
	}
	
		#Projecten .thumbnail:hover {
			text-decoration: none;
		}

	#Projecten .projectHover {
		position: absolute;
		min-width: 455px;
		display: none;
		height: 512px;
		padding-top: 80px;
		font-size: 64px;
		text-align: center;
		color: #c5af99;
		text-shadow: 0 1px 2px rgba(0,0,0,.65);	
	}

}

/* Landscape phone to portrait tablet */
@media (max-width: 991px) { 

	#beeldmerk {
		margin-top: 5px;
		height: 80px;
	}
	
	.projectHover {
		display: none;
		visibility: hidden;
	}
	
	
}

/* Landscape phones and down */
@media (max-width: 768px) {

	#logowrap {
		display: none;
	}
	
	#OverKublo figcaption { 
		position: absolute;
		bottom:  5%; 
		left: 0;
		background: transparent; 
		text-align: right;
		color: #fff; 
		font-family: "adelle-sans",sans-serif;
		font-style: normal;
		font-weight: 100;
		line-height: 30px;
		font-size: 20px;
		padding: 10px 30px; 
		
		text-shadow: 1px 1px 2px rgb(0, 0, 0);	
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	}
	
	#Citaat h1 {
		font-size: 22px;
		line-height: 35px;
		font-family: "adelle-sans",sans-serif;
		font-style: normal;
		font-weight: 100;	
		
		width: 75%;
		margin: 0 auto;
		
		text-shadow: 1px 1px 3px rgb(0, 0, 0);	
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	}
	
	
	#kubloheader h1.intro {
		margin: 0 20px;	
	}
	
	.navbar-nav .btn-danger {			
		margin: 0px;
		padding: 15px;
	}
	
	#Projecten .thumbnail {
		min-width: 150px;  
	}
	
	
	.projectHover {
		display: none;
		visibility: hidden;
	}	


}

/* @end */