html * { max-height: 1000000px; }
body { font-family: 'Roboto', sans-serif; font-size:13px; font-weight:300; line-height:26px; background-color:#1E1C19; }
ul { padding:0; }
p { margin-bottom:30px; }

h1, h2 { font-family: 'Playfair Display', sans-serif; font-size:30px; color:#968757; margin:0 0 35px 0; }

a, span, p, strong { color:#FFF; }
a:hover, a:focus { color:#FFF; text-decoration:none; }

.font_open_sans { font-family: 'Open Sans', sans-serif; }
.font_playfair { font-family: 'Playfair Display', sans-serif; }
.font_roboto { font-family: 'Roboto', sans-serif; }

.hide { display:none; }
.show { display:block; }

.center { text-align:center; }
.left { float:left; }
.right { float:right; }
.no_spacing { margin:0 !important; padding: 0 !important; }

.center_block { padding:0; margin: 0 auto; max-width:1200px; }

#main-navigation { height:62px; background:url('img/bg_main_menu.png') repeat-x; border-bottom:2px solid #FFF; }
	#main-navigation .navbar-header { height:62px; }
		#main-navigation .navbar-header .navbar-toggle .icon-bar { background-color:#FFF; }
	#main-navigation #navbar { border:none; width:100%; }
		#main-navigation #navbar ul#main-menu { padding:0; margin:0; float:right; }
			#main-navigation #navbar ul#main-menu > li { overflow:hidden; }
			#main-navigation #navbar ul#main-menu > li > a { display:inline-block; font-family: 'Open Sans', sans-serif; font-weight:300; margin: 0 35px; padding:0; height:60px; line-height:60px; text-shadow:none; }
			#main-navigation #navbar ul#main-menu > li > a:hover, #main-navigation #navbar ul#main-menu > li > a:focus { background-color:inherit; }
			#main-navigation #navbar ul#main-menu > li.active > a { border-bottom:4px solid #FFF; font-weight:600; }
		
			#main-navigation #navbar ul#main-menu > li#fb-text { margin-right:-35px; }
				#main-navigation #navbar ul#main-menu > li#fb-text > a { color:#6A5A32; font-weight:600; }
				#main-navigation #navbar ul#main-menu > li#fb-text:before { content:"|"; color:#FFF; margin-right:35px; }

#header { position:relative; overflow:hidden; }
	#header #logo { position:absolute; max-width:1200px; left:0; right:0; top:150px; z-index:1; }
		#header #logo > img { width:20%; }
	#header #quotes { position:absolute; width:100%; height:52px; overflow:hidden; bottom:0; z-index:1; background:url('img/bg_quotes.png') repeat-x; border-top:2px solid #FFF; }
		#header #quotes #quote-list { height:50px; }
			#header #quotes #quote-list div.slick-slide { text-align:center; height:50px; line-height:50px; font-family: 'Open Sans', sans-serif; font-style:italic; color:#FFF; }
			
#content { position:relative; padding:80px 0 0 0; margin-bottom:65px; }
	#content > div { margin-left:20px !important; }
	#content #main-content { padding-right:120px !important; }
	#content #contact { z-index:1;  }
		#content #contact div.contact_row { display:table; margin-bottom:28px; line-height:2.5em; }
			#content #contact .contact_cell { position:relative; display:table-cell; font-family: 'Open Sans', sans-serif; font-size:0.9em; }
			#content #contact .contact_cell.icon { width:50px; }
			
			#content #contact .contact_cell > i { position:absolute; top:50%; transform: translateY(-50%); background: url('img/icons/icons_sprite.png') no-repeat; }
				#content #contact .contact_cell > i.icon_address { background-position:0 0; height:18px; width:20px; }
				#content #contact .contact_cell > i.icon_telephone { background-position:0 -18px; height:21px; width:20px; margin-left:2px; }
				#content #contact .contact_cell > i.icon_mail { background-position:0 -39px; height:16px; width:24px; }
				#content #contact .contact_cell > i.icon_facebook { background-position:0 -55px; height:20px; width:11px; margin-left:6px; }

#content #home { position:relative; z-index:-1; margin-top:50px !important; overflow:hidden; }
	#content #home > div { margin-bottom:15px !important; }
	#content #home .image_circle { height:180px; width:180px; overflow:hidden; margin:0 auto; }
	#content #home .image_circle:before { content:""; position:absolute; height:100%; width:100%; background-repeat:no-repeat; }
	#content #home .image_circle.first:before { background-image:url('img/home_circle_1.png'); }
	#content #home .image_circle.second:before { background-image:url('img/home_circle_2.png'); }
	#content #home .image_circle.third:before { background-image:url('img/home_circle_3.png'); }
		#content #home .image_circle > img { position:relative; z-index:-1; }
		
#content #behandelingen { }
	#content #behandelingen > div { padding-left:0; margin: 0 0 15px 0; }
		#content #behandelingen > div > div.behandeling { position:relative; height:170px; overflow:hidden; }
			#content #behandelingen > div > div.behandeling:before { content:""; display:block; position:absolute; width:100%; height:100%; z-index:1; border:1px solid #FFF; }
			#content #behandelingen > div > div.behandeling > div.title { position:absolute; line-height:32px; height:32px; width:100%; background: url('img/behandeling_hover_title.png') repeat-x; font-weight:500; text-align:center; color:#FFF; }
			#content #behandelingen > div > div.behandeling > img { width:100%; }
			#content #behandelingen > div > div.behandeling > div.info { display:none; position:absolute; left:0; top:0; height:100%; width:100%; background: url('img/bg_behandeling_hover.png') repeat; }
				#content #behandelingen > div > div.behandeling > div.info > div.info_text { color:#FFF; font-size:0.9em; font-weight:500; line-height:24px; text-align:center; padding:0 10px; }
			
		#content #behandelingen > div > div.behandeling:hover { cursor:pointer; }
			#content #behandelingen > div > div.behandeling:hover > div.title { display:none; }
			#content #behandelingen > div > div.behandeling:hover > div.info { display:block !important; } 

#content #prijzen { margin-bottom:15px; }
	#content #prijzen > table { width:100%; margin-bottom:35px; }
		#content #prijzen > table tr { border:1px solid #FFF; }
		#content #prijzen > table th, #content #prijzen > table td { padding:0 25px; color:#FFF; height:40px; line-height:40px; }
		#content #prijzen > table th { background-color: #463D29; }
		#content #prijzen > table th.behandeling_head { width:67%; }
		#content #prijzen > table th.prijs_head { width:33%; }
		#content #prijzen > table td { position:relative; }
		#content #prijzen > table td:first-child { border-right:1px solid #FFF; }
			#content #prijzen > table td span { display:inline-block; }
			#content #prijzen > table td button.btn_treatment_info { border:none; padding:0; height:15px; width:5px; background:url('img/icons/treatment_info_icon.png') no-repeat; outline:none; position:absolute; top:10px; top: calc(50% - 8px); right:10px; }
			
	.treatment_info { position:relative; background-color:#FFF; width:80%; max-width:600px; margin:0 auto; padding:20px 35px 20px 20px; }
	
	#content #prijzen > p { margin-bottom:0; }
	
#fb-button { z-index:2; display:inline-block; height:48px; width:51px; background: url('img/icons/icons_sprite.png') 0 -75px no-repeat; position:fixed; left:0; bottom:116px; }
		
footer { position:relative; height:48px; line-height:48px; background:url('img/bg_footer.png') repeat-x; text-align:center; }
	footer > #brush { position:absolute; left:0; bottom:0; z-index:-1; width:40%; }
		footer > div { position:relative; }
			footer div#nail-polish { position:absolute !important; bottom:-48px; right:0; z-index:-1; }
	footer > span { margin-right:16px; }
	footer > a { color:#6A5A32; font-weight:500; }
    	footer > a:first-of-type { margin-right:16px; }
		footer > a:hover, footer > a:focus { color:#6A5A32; }	
		footer > a:before { content:"|"; color:#FFF; margin-right:16px; font-weight:300; }
	
@media (max-width: 767px) {
	#main-navigation .navbar-header .navbar-toggle { margin-top:13px; }
	#main-navigation #navbar ul#main-menu { width:100%; }
		#main-navigation #navbar ul#main-menu > li { background-color:#000; opacity:0.95; border-bottom:1px solid #FFF; }
			#main-navigation #navbar ul#main-menu > li > a { display:block; }
			#main-navigation #navbar ul#main-menu > li.active > a { border:none; }
		
		#main-navigation #navbar ul#main-menu > li#fb-text { margin:0;}
			#main-navigation #navbar ul#main-menu > li#fb-text:before { display:none; }
			
	#header { margin-top:62px; }	
		#header #logo { top:50px; left:20px; }
			#header #logo > img { width:20%; }
		#header #quotes { position:static; background:none; background-color:#554926; }
			#header #quotes #quote-list div.slick-slide { font-size:0.9em; }

	#content { padding-top:30px; min-height:inherit; }
		#content > div > #main-content { padding-right:20px !important; }
		#content #contact { margin-top:35px !important; }
		
	#content #behandelingen > div { padding-right:0; }
		#content #behandelingen > div > div.behandeling > div.info > div.info_text { font-size:1.2em; padding:0 40px; }
	
	#content #prijzen > table th, #content #prijzen > table td { font-size:0.9em; padding: 5px 20px; line-height:24px; }
		
	#fb-button { left:inherit; right:0; background-position: 0 -123px }
	
	footer { font-size:0.9em; }
		footer div#nail-polish > img { margin:0 auto; }
}

@media (min-width: 768px) {
	#header #logo { top:100px; left:50px }
		#header #logo > img { width:15%; }
		
	#content #behandelingen > div > div.behandeling > div.info > div.info_text { line-height:16px; font-size:0.8em; }
		
	footer > #brush { width:40%; }
}

@media (min-width: 992px) {
	#header #logo { top:120px; }
		#header #logo > img { width:15%; }
	
	footer > #brush { width:35%; }
}
@media (min-width: 1200px) {
	#header #logo { top:125px; }
		#header #logo > img { width:20%; }
		
	#content #behandelingen > div > div.behandeling > div.info > div.info_text { line-height:20px; font-size:0.9em; }	
	
	footer > #brush { width:30%; }
}

@media (min-width: 1500px) {
	#header #logo { top:150px; left:0; }
		#header #logo > img { width:20%; }
	
	#content > div { margin-left:0px !important; }
	
	#content #behandelingen > div > div.behandeling > div.info > div.info_text { line-height:24px; font-size:0.9em; }
	
	footer > #brush { width:25%; }
}

@media (min-width: 1700px) {
	#header #logo { top:200px; }
		#header #logo > img { width:25%; }
		
	footer > #brush { width:20%; }
}