@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic);

/* CSS */

/*
Theme Name: Bomenzorg-Troost.nl.
Description: Bomenzorg-Troost.nl
Version: 1.0
Author: Hugo Troost
Author URI: http://HugoTroost.nl.
*/


/* RESET -------------------------------------------------------------------------------- */ 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
		font-family: 'Droid Serif', serif;
        vertical-align: baseline;
        background: transparent;
}
body {
        line-height: 1;
        background: #fff;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

:focus {
        outline: 0;
}

img {
	width:100%;
}

a {
	text-decoration:none;
	color: #D28811;
}

h1, h2, h3 {
		color: #D28811;
}

/* SITE -------------------------------------------------------------------------------- */ 

html {
	width: 98%;
	height:100%;
	margin:0;
	padding: 2%;
	padding-right: 0%;
}

.left {
	float:left;
	width:33%;
	height:100%;
}

.left img {
	float:left;
	position:fixed;
	width:33%;
}

.right {
	float: right;
	width: 63%;
}

.right .content {
	padding-right:50px;
}


nav.nav ul li:first-child {
	margin-left:-20px;
}


nav.nav ul li {
	float:left;
	padding: 0px 0px 10px 2%;
}

nav.nav ul li.current a {
	border-bottom:1px solid #D28811;
	color: #D28811;
}

nav.nav ul li a {
	text-transform:uppercase;
	text-decoration: none;
	color:#000;
	font-size: 1.3rem;  
	border-bottom: 1px solid transparent;
  	transition: all ease-in-out 0.2s;

}

nav.nav ul li a:hover {
	color: rgba(210, 136, 17, 0.53);
	border-bottom: 1px solid rgba(210, 136, 17, 0.53);
}

/* TEXT -------------------------------------------------------------------------------- */ 

.text {
	border-top: 1px solid #D8D8D8;
	padding-top:25px;
	margin-top: 25px;
	clear: both;
}

.text p {
	line-height: 1.8rem;
	text-align: justify;
}

.text img {
	max-width:25%;
	/* padding:10px; */
}

.text img.align_right {
	float:right;
	padding-left:20px;
}

.text img.align_left {
	float:left;
	padding-top: 20px;
	padding-right: 20px;
}


/* MOBIEL EN TABLET */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

  	html {
  		padding:none;
  		margin:none;
  	}

  	.left {
  		width:100%;
  		display:none;
  	}

  	.left img {
  		width:100%;
  		position: relative;
  		float: none;
  		clear: both;
  	}

  	.right {
  		width:100%;
  		padding:1%;
  	}

  	nav.nav ul {
  		/* padding:20px; */
  		padding-top: 20px;
  		padding-bottom:30px;
  	}

  	nav.nav ul li {
  		padding-right:20px;
  	}

  	nav.nav ul li a{
		font-size: 1.6rem;
	}

	nav.nav {
	}

	.text p {
		font-size:1.4rem;
		line-height:1.5;
	}

	.right .content {
    	padding-right: 0px;
 	}

 	h3 {
 		font-size:1.5rem;
 	}

}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 1) {
  	
  	html {
  		padding:5%;
  		margin:none;
  	}

  	.left {
  		display:none
  	}

  	.right {
  		width:100%;
  		padding:1%;
  	}

  	nav.nav ul {
  		/* padding:20px; */
  		padding-top: 10px;
  		margin-bottom:30px;
  	}

  	nav.nav ul li {
  		width:100%;
  		border-bottom:1px solid #eee;
  		padding:20px 0px;
  	}

  	nav.nav ul li:first-child {
  		margin-left:0px;
  	}

  	nav.nav ul li a{
		font-size: 4rem;
	}

	nav.nav {
	}

	.text p {
		font-size:2.5rem;
		line-height:1.5;
	}

	.right .content {
    	padding-right: 0px;
 	}

 	h3 {
 		font-size:3rem;
 	}

 	img {
 		min-width:100%;
 		margin-bottom:20px;
 	}

 	.text p {
 	text-align:left;
	}

}