/*
Theme Name: Local Business by Bob
Theme URI: http://www.bobdewebbouwer.nl/localbusiness/
Description: Wordpress theme voor lokale bedrijven door Bob de webbouwer
Author: Bob de webbouwer
Author URI: http://www.bobdewebbouwer.com
License: All rights reserved
License URI: http://www.bobdewebbouwer.com

Version: 19042018

LET OP : DIT IS DE STYLESHEET VAN DE TEMPLATE, HIER GEEN WIJZIGINGEN IN AANBRENGEN!

KLEUREN EN DERGELIJKE KUN JE AANPASSEN IN CUSTOM.CSS.

*/



/* Algemene instellingen */

html, body {margin:0 0 0 0px; padding:0 0 50px 0; font-family: Verdana, Geneva, sans-serif; font-size: 1em; color: #666;}
li {}
.clear {clear:both;}
iframe {max-width: 100%;}
input {max-width: 100%;}
.fa, .fas, .far {margin-right: 5px;}


/* Headings */

h1 {font-size:1.5em; padding: 15px 0 0px 0; margin:0 0 0 0px; font-weight: normal;}
h2 {font-size:1.3em; padding: 40px 0 0px 0; margin:0 0 0px 0; font-weight: normal;}
h3 {font-size:1.1em; padding: 20px 0 10px 0; margin:0 0 0px 0;}
h4 {padding:0; margin:0;}




/* Volledige website m.u.v. achtergrond */

#totaal {margin-left: auto; margin-right: auto; margin-top: 20px; width: 95%; max-width: 1200px;  height:auto; position:relative;}



/* Header */ 


#header {float: left; width:100%; margin: 0 auto 10px auto;}
		
		
		
			/* Logo */ 
		
		    #logo {float: left; margin: 0 30px 0 0px; min-width: 100px;}
			#logo img {border: 0px; width: auto; height: 150px;}
			
			
			
			/* Site title zoals opgegeven in de wordpress instellingen */ 
			
			#branding {position: relative; float: left; display: inline-block; margin: 0 0 0 5px; text-shadow: 1px 1px #fff;} 
			#site-title {margin:0; padding:0; font-size:0.8em; display: none;}
			#site-description {font-size:1.1em; margin: 7px 0 10px 0px;}

			
			/* Foto's in header */
			
			#fotoheader {position: absolute; top: 40px; left: 160px; float: left;}
			#fotoheader img {height: 100px; width: 160px; margin: 20px -20px 0 0px;}
			#fotoheader #fancybox-title {display: none;}
			#fotoheader h2 {display: none;}
			#fotoheader li {float: left; display: inline;}
			        
		
					#fotoheader li:nth-child(1) {-moz-transform: rotate(-7deg);
                           			    -webkit-transform: rotate(-7deg);
        								-o-transform: rotate(-7deg);
       									 -ms-transform: rotate(-7deg);}
										 
					#fotoheader li:nth-child(2) {-moz-transform: rotate(10deg);
                           			    -webkit-transform: rotate(10deg);
        								-o-transform: rotate(10deg);
       									 -ms-transform: rotate(10deg);}
										 
					
					#fotoheader li:nth-child(3) {-moz-transform: rotate(-9deg);
                           			    -webkit-transform: rotate(-9deg);
        								-o-transform: rotate(-9deg);
       									 -ms-transform: rotate(-9deg);}
										 
					
					#fotoheader li:nth-child(4) {-moz-transform: rotate(8deg);
                           			    -webkit-transform: rotate(8deg);
        								-o-transform: rotate(8deg);
       									 -ms-transform: rotate(8deg);}
																				 
			
			
			/* Widget header */
			
			#widgetheader {float: right; width: 320px; height: 150px; font-size: 0.8em;}
			#widgetheader ul {float: left; padding: 5px; margin: 2px 0 0 0;}
			#widgetheader li {list-style-type: none;}
			#widgetheader a {text-decoration: none;} 
			
			#widgetheader .widget_text {float: left; display: inline; width: 50%;}
			#widgetheader .widget_text ul {padding: 0 0 15px 5px;}
			
			#widgetheader ul.button li {display: block; margin: 0px 0 10px 0; padding: 10px 0 0 0; height: 26px; width: 135px;}
			#widgetheader ul.button li:hover {}
			#widgetheader ul.button li a {padding: 10px; text-decoration: none; font-weight: bold; font-size: 0.9em;}
			
									
						



/* Menu */

#menuboven {position: relative; float: left; z-index: 100; width: 100%; min-height: 46px; margin: 0px 0 0 0px; text-align: center; font-size: 0.8em; font-weight: bold;}
#menuboven a {text-decoration: none;}
#menuboven ul {padding: 0 0 0 0px; position:relative; z-index: 100!important; margin: 0 auto; text-align: left;}
#menuboven li {position: relative; float: left; top: 0px; margin: 0px 0px 0px 0px; padding-top: 15px; list-style-type:none; display:inline;}
#menuboven li a {margin: 0px; padding: 15px 16px 15px 16px;}
#menuboven li:hover {}

		
			
			/* Submenu */
			
			#menuboven li ul {display: none;}
			#menuboven li:hover ul {display: inline-block; position: absolute; left: 0px; top: 45px; border: 0px; padding: 5px 0px 10px 0; 
			margin: 0px 0 0px 0px; box-shadow: 0px 10px 15px 1px #666;}
			#menuboven li:hover li {display: block; float: none; border: 0px; margin: 0px 0px 0px 0; border-radius:0px;}
			#menuboven li:hover li a {display: block; padding: 10px 5px 7px 5px;}



			/* Styling geselecteerde pagina in menu */
			
			.current-menu-item > a,
			.current-menu-ancestor > a,
			.current_page_item > a,
			.current_page_ancestor > a {background: rgba(255, 255, 255, 0.7); padding: 17px 16px 16px 16px;}
			
			
			
			/* Styling geselecteerde parent pagina in menu (bijvoorbeeld "blog" of  "nieuws" bij individuele berichten) */
			
			.current_page_parent a {padding: 10px 10px 11px 10px; margin: -10px; text-decoration:none;}
			.current-page-ancestor a {padding: 10px 10px 11px 10px; margin: -10px;text-decoration:none;}
			
						
			
			/* Responsive menu - button verbergen bij desktop weergave */
			
			#menuboven #menu-icon {display: none;}
			
			
			/* Search */ 
			
			#search {float: right; display: inline-block; width: auto; margin: 0px 10px 0 0;}
			#search label {display: none;}
			#search input[type=text] {width: 240px; height: 25px; padding: 0 0px 0 5px; background: #fff; background: rgba(255, 255, 255, 0.9);}
			#search input[type=submit] {height: 29px;}
			#search img {position: absolute; top: 10px; left: 350px;}
			





/* Wrapper voor contentgedeelte (#inhoud + sitebars) */

#wrapper {float: left; width: 100%; background-color: #fff; background: rgba(255, 255, 255, 0.85); margin: 0 auto;} 





/* Contentvak */

#inhoud {float:left; display:inline-block; width:95%; min-height: 400px; padding: 10px 0 20px 2%; margin:0 0px 0 0px; font-size: 0.8em; color:#666;}

#inhoud p {padding: 10px 0 0 0px;}
	 
				 
				 
				 /* Breadcrumbs */
				 
				 #linkpad {padding: 10px 0; margin:0; color: #999; font-size: 0.8em;}
				 #linkpad li {display:inline;padding: 0 10px 0 0;}
				 #linkpad a {color: #999;}
				 #social {clear: both; padding: 20px 0 0 0;}
				 
				 
				/* Kolommen */
				
				.kolom2 {float: left; width: 46%; margin: 0 4% 20px 0; padding: 0%;}	
				.kolom3 {float: left; width: 27.3%; margin: 0 4% 20px 0; padding: 1%;}
				.kolom2 img, .kolom3 img {max-width: 95%;}
				
				.kolom2 .content {padding: 10px 2% 30px 0%;}		
				.kolom2 p:first-child, .kolom3 p:first-child {display: none;}
				.kolom2 h2 {padding: 40px 0 0 0;}
				 
				 
				 /* Paginanummering */
				 
				 .pagina {padding-left: 0px;
		 				  padding-top: 10px;
		 				  padding-bottom: 30px;
		 				  margin-top: 30px;
						  border-top: #000 solid 1px;} 
						  
						  
				 
				 /* Styling index.php */ 
				 
				 .listpost {clear: both; padding: 0 0 30px 0; border-bottom: #999 dotted 1px; min-height: 160px;}
				 .listpost h2 {padding: 40px 0 10px 0;}
				 .listpost h2 a {border: none!important;}
				 .listpost h2 a:hover {text-decoration: underline!important;}
				 .listpost p {margin-top: -5px;}
				 
				 .cat {font-size: 70%;}
				
				.more-link {border-bottom-color: #999!important;}
				
				
				
				/* CTA button header */
				
				li.cta {}
				
				
				
				
				/* CTA button #inhoud */
			
				#inhoud .cta {margin: 30px 0 30px 0; font-size: 100%; font-weight: 700;}
				#inhoud .cta a {padding: 10px; border-bottom: none!important; line-height: 30px;}
				#inhoud .cta a:hover {text-decoration: none!important; }
				
				

				/* Styling reacties */

				#respond {clear: both;}
				h3#reply-title {padding: 80px 0 0 0; margin:0 0 -10px 0;}
				h3#hulp {padding: 80px 0 0 0; margin:0 0 -10px 0;}

				label {display: block;}
				
				.comment {padding-bottom: 20px;
						  padding-top: 20px;
		  				  border-bottom: 1px solid #999;}
				.commentmetadata {color: #999;}
				.commentmetadata a:link {color: #666;
										 text-decoration: none;
										 font-style: italic;
										 font-size: 90%;
										 border: none;}
				.commentmetadata a:visited {color: #666;
											text-decoration: none;
						 					font-style: italic;
											 font-size: 90%;
										 border: none;}
				.nocomments {display: none;}
				.commentlist li {list-style-image: none;
				 				 list-style-type: none;}
				h3#comments-title {clear: both; padding: 80px 0 0 0!important;}
				
				
				
				
									/* Paginanummers */

									#paginanummers {margin-top: 10px; padding-top: 15px;}
									#paginanummers a {padding: 5px 10px; background: #ececec!important; text-decoration: none!important;}
									#paginanummers .current {padding: 5px 10px; background: #999!important;}
									
									
								
			


/* Contactformulier */

input[type=text] {margin: 10px 0 0px 0;}
input[type=email] {margin: 10px 0 0px 0;}
input[type=date] {margin: 10px 0 0px 0;}
input[type=submit] {border: none; padding: 5px;}
textarea {margin: 10px 0 0px 0; max-width: 98%;}
label {margin: -10px 0 0 0;}
p.opmerking {margin: 30px 0 0px 0;}

.wpcf7 input[type=submit] {padding: 10px 10px; font-size: 1.2em;}
									

/* Webshop */

.woocommerce #sidebar {display: none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {border-bottom: 0px !important;}
.woocommerce .related h2 {padding: 40px 0 20px 0;}
.woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {padding: 0 !important; margin: 0 0 10px 0 !important; height: 32px; overflow: hidden;}
.woocommerce ul.products li.product .price {margin-bottom: 10px !important; font-size: 1em;}
.woocommerce-product-gallery__image {margin-bottom: 20px;}
.woocommerce-breadcrumb {padding: 20px 0 10px 0 !important;}



/* Sidebar links (alleen op webshop pagina's, in WooCommerce.php */
				  
#sidebarlinks {float: left; width: 14%; min-width: 175px; font-size: 0.8em; padding: 0 2% 2% 2%; margin: 1% 3% 20px 1%;}
#sidebarlinks ul {margin: 0px; padding: 0px;}
#sidebarlinks li {list-style-type: none!important; margin: 0 0 5px 0;}
#sidebarlinks li.cat-item {padding: 10px 0 0px 0;}
#sidebarlinks li a {text-decoration: none!important;}
#sidebarlinks li a:hover {text-decoration: underline!important;}
#sidebarlinks ul.children {margin: 10px 0 20px 20px; font-style: italic;}
#sidebarlinks .price_label {clear: left!important; float: left!important;}



/* Footer */

#footer-wrapper {width:100%; display:inline-block; margin-top:0px; font-size: 0.8em;}
#footer-wrapper ul {margin: 0px; padding: 0px;}
#footer-wrapper li {list-style-type: none; margin: 0 0 10px 0;}

#footer-wrapper a {text-decoration: none;}
#footer-wrapper a:hover {text-decoration: underline;}

#footer-wrapper h2 {font-size:1.3em; padding: 20px 0 20px 0; margin:0 0 0px 0;}
#footer-wrapper h3 {margin: 0px 0 10px 0;}

#footer-wrapper .button {float: left; display: inline; margin: 10px 10px 0 0;}
#footer-wrapper .button img {height: 30px; width: 30px; padding: 10px;}

#footerkolom1 {float: left; width: 27.3%; min-height: 362px; min-width: 275px; margin: 2% 2% 0 0px; padding: 0 2% 20px 2%; background:#fff; background: rgba(255, 255, 255, 0.7); }
#footerkolom2 {float: left; width: 27.3%; min-height: 362px; min-width: 275px; margin: 2% 1% 0 1%; padding: 0 2% 20px 2%; background:#fff; background: rgba(255, 255, 255, 0.7); }
#footerkolom3 {float: left; width: 27.3%; min-height: 362px; min-width: 275px; margin: 2% 0 0 2%; padding: 0 2% 20px 2%; background:#fff; background: rgba(255, 255, 255, 0.7); }
#footerkolom3 li {float:left; display: inline; margin: 0 10px 20px 0;}
#footerkolom3 img {height: 40px; width: 40px;}

.buttonfooter {float: left; display: block; clear: left; height: 40px; margin: 5px 0 0 0;}
.buttonfooter a {padding:10px; text-decoration: none;}			
			



/* Afbeeldingen */

.size-thumbnail {} /* AFMETINGEN VOOR FOTO KLEIN */
.size-medium {clear: both; float: left;} /* FOTO MEDIUM (Afmetingen en kleur in custom.css) */
.size-large {clear: both; float: left; width: 100%; height: auto;} /* AFMETINGEN VOOR FOTO GROOT */
.size-full {float: left; width: auto; height: auto; max-width: 100%;}
.alignright {float: right; margin: 0 0 20px 20px;} /* Opmaak voor rechts uitgelijnde foto */
.alignleft {float: left; margin: 0 20px 20px 0;} /* Opmaak voor links uitgelijnde foto */
.aligncenter {float: none; text-align: center; margin: 0 auto; display: block; clear:both;} /*Opmaak voor gecentreerde foto */
.alignnone {} /*Opmaak voor niet uitgelijnde foto */
.noborder {border: none!important;} /*extra class voor foto zonder rand */
.wp-caption {} /* Onderschrift bij foto's achtergrond, rand etc */
.wp-caption-text {clear: left; text-align: left; font-size: 80%; margin: 0 0 20px 0;} /* Onderschrift bij foto's tekst */
.gallery-caption {} /* Onderschrift bij de standaard Wordpress gallery (shorttag [gallery] */
.attachment-post-thumbnail {float: left; margin: 5px 20px 20px 5px;}/* Styling uitgelichte afbeelding op berichtenpagina */



/* Overig */

.sticky {} /* Stijl voor sticky posts */
.bypostauthor {} 

.post-meta {font-size: 90%; color: #999; font-style: italic; margin: 20px 0 0 0;} /* styling post meta zoals datum, auteur enzovoorts */
.post-meta a:link {font-size: 100%!important; color:#999!important; border: none!important;}
.post-meta a:visited {font-size: 100%!important; color:#999!important; border: none!important;}
.post-meta a:hover {font-size: 100%!important; color:#5d14f2;}

.single-post .post-meta {float: left; width: 100%; margin: 10px 0 25px 0;}

li.widget {list-style-type:none;}

.form-allowed-tags {display: none;}

ul.overzicht {margin: 30px 0 0 0;}
ul.overzicht li {padding: 0px 0 15px 0;}

ul.vinkje {margin: 30px 0 30px 0px;}
ul.vinkje li {margin: 0 0 25px 0;}





/* ------ RESPONSIVE WEERGAVE ------- */


@media screen and (max-width: 1270px)

{

#branding {max-width: 45%;}
#fotoheader li:nth-child(4) {display: none;}
#usp {float: left; position: relative; top: 0px; padding: 15px 0 10px 0; width: 100%;}

#wrapper img {max-width: 95%!important; height: auto;}
#wrapper .wp-caption {max-width: 95%!important;}

}


@media screen and (max-width: 1160px)

{
	
#footerkolom1 {width: 45%; margin: 2% 2% 0 0px;}
#footerkolom2 {width: 45%; margin: 2% 0 0 0px;}
#footerkolom3 {width: 45%; margin: 2% 0 0 0px;}

}





@media screen and (max-width: 1090px)

{

#footerkolom3 {margin: 15px 0% 0 0px;}
#fotoheader li:nth-child(3) {display: none;}

}



@media screen and (max-width: 1020px)

{
	
#totaal {width:95%; min-height: 200px;} 
#header {width: 100%;}
#branding {margin: 15px 0 0 5px; min-width: 500px; max-width: 100%;}
#fotoheader {display: none;}

}


@media screen and (max-width: 900px)

{
	
#header {width: 100%; position: relative;}
}



@media screen and (max-width: 750px)

{

.kolom3 {width: 96%;}

#footerkolom1 {width: 96%; margin: 15px 0 0 0px;}
#footerkolom2 {width: 96%; margin: 15px 0 0 0px;}
#footerkolom3 {width: 96%; margin: 15px 0 0 0px;}

}

	

@media screen and (max-width: 650px)

{

.kolom2 {width: 96%;}

#footerkolom1 {width: 96%; margin: 15px 0 0 0px;}
#footerkolom2 {width: 96%; margin: 15px 0 0 0px;}
#footerkolom3 {width: 96%; margin: 15px 0 0 0px;}

}



@media screen and (max-width: 550px)

{
	
#widgetheader {float: left; width: 100%; margin: 20px 0 20px 0;}
#branding {margin: 0px 0 0 5px; min-width: 250px;}

}

	
	
@media screen and (max-width: 460px)

{
	
html, body {width: 100%;}
#totaal {width: 95%; min-height: 370px;}
#header {width: 100%;}
#logo img {max-height: 100px;} 

#menuboven {min-height: 100px;}
#menuboven #menu-icon {top: 50px;} /* toon menu button */
#menuboven ul {margin: 80px 0 0 0;}
#search {position: absolute; left: 2%; top: 0px; width: 90%;}
#search input[type=text] {float: left; width: 70%; height: 25px; padding: 0 0px 0 5px;}
#search input[type=submit] {margin: 9px 0 0 0;}

	
}