/* 
S T Y L E S H E E T  B Y  A M P H E B I A  
D O  N O T  M O D I F Y 
*/


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	#wrap { padding-bottom: 110px; }
	.subfooter { padding-top: 5px; padding-bottom: 5px; }
	.subfooter .row > div > a { display: inline-block; margin-right: 30px; width: auto; }
	.signoff { max-width: 300px; }
	footer { position: fixed; }
	.upperpart { background-image: url('../images/rian-staand-trans.png');background-size: 282px 500px; }
	a.jumpto { display: block; }
	.shadow { margin-bottom: 100px; }
	.col-xs-12:nth-child(1) .overview-item,
	.col-xs-12:nth-child(4) .overview-item,
	.col-xs-12:nth-child(5) .overview-item {
		background-color: #a59700;
	}	
	.show-rian { background-image: none; }	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	#wrap { padding-bottom: 50px; }
	.slogan { display: block; }
	.topbar img { float: right; margin-right: 0px; }
	div#tree { left: -220px; display: block;}
	div#follow-up div#tree { left: -220px;  }
	.upperpart { padding-left: 150px; padding-right: 0px; }
	h1.slogan { font-size: 60px; line-height: 55px; }
	.footer-content { padding: 0px 45px; }
	.logo-wh { 	background-image: url('../images/doerian-logo-wh.png'); background-size: 235px 57px; width: 235px; height: 57px;	top: 14px;left: 165px; }
	.shadow { background-image: none; }
	.content.with-image {
		background-image: url('../images/rian-staand-trans.png');
		background-position: 97% 100%;
		background-repeat: no-repeat; 	
		background-size: auto;	
	}	
}

/* Large devices (desktops, 992px and up), breakpoint for nav */
@media (min-width: 992px) { 
	html.no-image body { background-position: 0px 138px; }
	.offset-md-4 { margin-left: auto; }
	.topbar img { width: 240px; float: right; margin-right: 35px; }
	.nav-item { height: 25px;background-color: transparent; }
	.navbar-collapse {  box-shadow: none; }
	.nav-item.active .nav-link, .nav-link.active, .nav-item:hover .nav-link { border-bottom: 2px solid #c21700; }
	.nav-item:first-of-type { padding-top: 0px; margin-left: 0px; margin-top: 0px; }
	.nav-link { line-height: 25px; border-bottom: 2px solid transparent; }
	h1 { font-size: 37px; }
	h2 { font-size: 28px; }
	.leftside h2 { font-size: 23px; }
	.cont-items h2 { font-size: 35px; }
	.content { padding: 80px 150px 80px 15px; }
	.upperpart { padding-top: 80px; }
	.upperpart.rian { background-image: url(../images/rian-staand.png); }
	footer { text-align: center; }
	footer .footer .col-lg:first-of-type { padding-left: 0; text-align: left; }
	footer .footer .col-lg:last-of-type { padding-right: 0; text-align: right; }
	.contact-form { max-width: 60%;margin-top: 40px; }	
	div#tree { left: -150px; }
	div#follow-up div#tree { left: -150px;  }
	.logo-wh { display: none; }
	.footer-content { padding: 0px 60px; }
	.dropdown:hover>.dropdown-menu { display: block; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.topbar img { float: right; margin-right: 160px; }
	div#tree { left: -100px; }
	div#follow-up div#tree { left: -100px;  }
	.leftside div { display: block; }
	.leftside h2 { font-size: 40px; }
	.first-part { padding-right: 40px; }
	/*.menubar { padding-right: 50px; }*/
	.footer-content { padding: 0px 15px; }
	h2 { margin-top: 20px; margin-bottom: 30px; }
	.content.with-image.img-phone {
		background-image: url('../images/rian-telefoon.png');
		background-position: 99% 100%;
	}		
	.upperpart { background-image: url('../images/rian-staand.png'); }
	.nav-item { margin: 0 5px; }
}

/* custom */
@media (min-width: 1500px) { 
	html { background-position: -400px 0%; background-size: auto; }
	div#tree { left:-50px; }
	div#follow-up div#tree { left: -50px;  }
	/*#upperpart .content { padding-right: 110px; }*/
	.upperpart { background-size: auto !important; }
	
	.logo-wh { left: 25px; display: block; }
	.leftside a.logo-part { left: 420px; }
}

/* custom */
@media (min-width: 1800px) { 
	html { background-position: -300px 50px; }
	.upperpart { background-position: 95% 100%; background-size: auto; }
	.leftside a.logo-part { left: 460px; }
	.nav-item { margin: 0 15px; }
}
@media (min-width: 2100px) { 
	.leftside a.logo-part { left: 560px; }
}