/* Additional CSS by Robin Bodegom for Bodegom.com */


/* menu Algemeen */
.navbar {margin-top: 0em;  position: relative; z-index: 1000; }
.navbar-nav {width: 100%; text-align: center; }  

/*actual { color: white !important; text-decoration: none; border-bottom: 3px solid #f06; } */


@media screen and (min-width: 1024px) {
/* menu groot overige pagina's */
.navbar-brand img { max-width: 80px; margin: -16px 0px -13px -17px;}
.navbar-robin {background-color: white; border: none;}
.navbar-nav li a:link, .navbar-nav li a:visited {  font-size: large; background-color: white !important; color: black !important; margin-top: 5px; border-bottom: 3px solid transparent; padding-left: 10px;  }
.navbar-nav li a:focus,.navbar-nav li a:hover { font-size: large; background-color: white !important; color: black !important; margin-top: 5px; text-decoration: none; border-bottom: 3px solid #f06; }

/* menu groot homepage */
.body-index .navbar-brand img { max-width: 80px; margin: -16px 0px -13px -17px;}
.body-index .navbar-robin {background-color: transparent; border: none;}
.body-index .navbar-nav li a:link, .body-index .navbar-nav li a:visited { font-size: large; background-color: transparent !important; color: white !important; margin-top: 5px; border-bottom: 3px solid transparent; padding-left: 10px; }
.body-index .navbar-nav li a:focus, .body-index .navbar-nav li a:hover { font-size: large; background-color: transparent !important; color: white !important; margin-top: 5px; text-decoration: none; border-bottom: 3px solid #f06; }

.body-index .dropdown-menu { background-color: #404040; border: 1px solid white;}


}

@media screen and (max-width: 1023px) {
/* menu klein alle pagina's.. let op index heeft een ander hert */
.navbar-brand img { max-width: 80px;  margin: -16px 0px 15px -20px;}
.fa-bars {color: black;}
.body-index .navbar-robin {background-color: transparent; border: none; height: 100px; }
.navbar-nav li a:link, .navbar-nav li a:visited { font-size: medium; background-color: white !important; color: black !important; margin-top: 0px; argin-left: 50px; }
.navbar-nav li a:focus,.navbar-nav li a:hover { font-size: medium; background-color: white !important; color: black !important; text-decoration: none; border-bottom: 3px solid #f06; }

.navbar-collapse { border: 2px solid #666666; !important; margin-bottom: 1em; }

}


body { width: 100%; height: 100%; background-color: white; color: #323232;  margin-bottom: 30px; font-family: 'Raleway', Verdana, Arial, sans-serif; font-size: 1em; }

/* Letterwerk Algemeen */

.balkje {display: block;  width: 130px; height: 4px;  background-color: #f06; margin: 20px auto; float: left;}
.onderkast { text-transform: lowercase; }

h3 {font-weight: 500; font-size: large; margin-top: 2em; margin-bottom: 0px;}
h4 {font-weight: 500; font-size: large; margin-top: 3em; margin-bottom: 0px;}


.tekst-h1 { margin-top: 2em;  font-weight: 300; font-size: xx-large; border-left: 3px solid #f06; padding: 5px 5px 5px 30px; margin-bottom: 1em; }
.tekst-h2 {font-weight: 300; margin-left: 18px; font-size: x-large; }
.tekst-h2-b {font-weight: 300;}

.tekst-1 {font-weight: 500; font-size: medium; }
.tekst-2 {font-weight: 300; font-size: medium; margin-top: 2em; }
.subkop-tekst-2 {font-weight: 300; font-size: medium; }
.tekst-5 {font-weight: 300; font-size: medium; margin-bottom: 1em; }
.tekst-6 {font-weight: 300; font-size: medium; font-style:italic; margin-bottom: 1em; }


.tekst-3 {font-weight: 500; font-size: medium; color: white; margin-top: 200px;}
.tekst-4 {font-weight: 300; font-size: medium; margin-top: 2em; color: white; }
.subkop-tekst-4 {font-weight: 300; font-size: medium; color: white;}





/* Linkstyles en en Knoppen */
a {color:  #f06; background-color: white; text-decoration: none;}

a.links-index:visited, a.links-index:link { background-color: transparent !important; color: white !important;  }
a.links-index:focus, a.links-index:hover {  background-color: transparent !important; color: white !important; text-decoration: none; border-bottom: 2px solid #f06; }

a.knop-1:link, a.knop-1:visited {  display: inline-block;  background-color: white; color: #f06; font-weight: 300; font-size: medium; padding: 14px 25px; text-align: center; text-decoration: none; border: 1px solid #f06; margin-top: 25px;}
a.knop-1:hover, a.knop-1:active {  background-color: #f06; color: white; }

input.knop-3 { margin-top: 5px; margin-left: 15px; display: inline-block;  
background-color: transparent; color: black; font-weight: 300; font-size: large; padding: 10px 15px; text-align: center; text-decoration: none; border: 2px solid #d6d6d6; }
input.knop-3:hover, input.knop-3:active {  background-color: #f06; color: white; }






/* teaser  zie ook MEMO info verderop */

.teaser { display: inline-block;  margin-left: 2em; margin-right: 2em; background-color: #f06; color: white; font-weight: 300; font-size: medium; padding: 14px 25px; text-align: center; text-decoration: none; border: 1px solid #f06; margin-top: 25px;}

a.knop-5:link, a.knop-5:visited { margin-top: 10px; display: block; background-color: transparent; color: white; font-weight: 300; font-size: -large; padding: 5px px; text-align: center; text-decoration: none; border: 2px solid white; }
a.knop-5:hover, a.knop-5:active {  background-color: white; color: black; }


/* Diversen */
.noloc-klein {margin-top: 25px;}
div#preload { display: none; }


/* Block quotes extra */
blockquote { background: #dee6e4; border-left: 10px solid #688982;  margin: 1.5em 10px; padding: 0.5em 10px;quotes: "\201C""\201D""\2018""\2019";}
blockquote:before { color: #688982; content: open-quote; font-size: 3em; line-height: 0.1em;   vertical-align: -0.4em; }
blockquote:after { color: #688982; content: close-quote; font-size: 3em; line-height: 0.1em;   vertical-align: -0.4em; }
blockquote p { display: inline; font-size: .8em; }


/* headers */
.blok-header { margin-top: -10px; height: 32em;  background-repeat: no-repeat; background-size: cover; color: transparent; background-color: #f2f2f2;   display: block; filter: grayscale(30%); z-index: 2; }

/* Achtergronden pagina headers  */
.bg-branding {background-image: url("../img/klazina-oldenhuis.png"); background-position: center; }
.bg-klazina {background-image: url("../img/klazina-oldenhuis.png"); background-position: center; }
.bg-contact {background-image: url("../img/klazina-oldenhuis.png"); background-position: center; }
.bg-boek {background-image: url("../img/boek-orienteren-netwerken-en-solliciteren-klazina-oldenhuis.jpg"); background-position: center; }


/* teksten headers */
.tekst-klazina {text-align: left; color: white; text-shadow: 2px 2px 4px #000000; }
.tekst-contact {text-align: left; color: white; text-shadow: 2px 2px 4px #000000;}
.header-tekst { display: inline-block; max-width: 750px;  padding: 8em 0em 0em 6em; font-weight: 300; line-height: 1.3em; font-size: xx-large; }


/* footer */
#bodegom { color: #7f7f7f; width: 100%; text-align: center; padding-top: 100px; }
.p-bodegom {font-size: x-small;}	





/*************************** Pagina specifiek ************/


/* Index */

.startpagina-tekst {display: inline-block; text-align: left; max-width: 600px; position: fixed; left:8em; top: 14em;  }
.ul-index {list-style: none; margin-left: -3em;}
.balkje {margin-top: 25px; width: 140px; height: 8px; background-color: #f06;  }
.teeser { padding-top:55px; font-size: 1.5em; color: white; font-weight: 500; }

a.knop-2:link, a.knop-2:visited { margin-top: 25px;display: inline-block;  
background-color: transparent; color: white; font-weight: 300; font-size: x-large; padding: 14px 20px; text-align: center; text-decoration: none; border: 2px solid white; }
a.knop-2:hover, a.knop-2:active {  background-color: #f06; color: white; }

.boek-voorpagina { background-color: white; color: black; border: 3px solid #f06; padding: 20px; }



/*Praktijkvoorbeelden */
.ul-branding {font-weight: 300; font-size: medium; list-style-type: square; }


/* contact */
ul.adres {list-style: none; margin-left: -40px; margin-top: 1em;}

.top {display: inline-block; vertical-align: top; float: none;}

/* Formulier contact */
.groen {font-size: large; background-color: green; color: white;	padding: 10px; border: 1px solid white;}
.rood {font-size: large;  background-color: red; color: white;	padding: 10px;	border: 1px solid white;}
.basic-grey {margin-left: auto;	margin-right: auto;	max-width: 500px; border-right: 1px solid #b1c3bf; }
.basic-grey input[type="text"], 
.basic-grey input[type="email"], 
.basic-grey textarea, 
.basic-grey select {border: 1px solid #d6d6d6; color: black; height: 30px; margin: 15px 6px 0px 15px; outline: 0 none; padding: 3px 3px 3px 5px; width: 90%; font-size: small; line-height: 15px; box-shadow: inset 0px 1px 4px #ECECEC; }

.basic-grey textarea { height: 100px; padding: 5px 3px 3px 5px; }

/* 404 pagina */
.afbeelding-404 { margin-bottom: -4em; }


/* Media queries */


@media screen and (max-width: 480px) {
.tekst-h1 { margin-top: 2em;  font-weight: 300; font-size: x-large; border-left: 3px solid #f06; padding: 5px 5px 5px 30px; margin-bottom: 1em; }
}


@media screen and (max-width: 768px) { 

/* Achtergronden pagina headers  kleine schermen */
.bg-branding {background-image: url("../img/klazina-2.png"); background-position: center; }
.bg-klazina {background-image: url("../img/klazina-2.png"); background-position: center; }
.bg-contact {background-image: url("../img/klazina-2.png"); background-position: center; }

.header-tekst { display: none;}

}

   

@media screen and (max-width: 1023px) {


a.knop-2:link, a.knop-2:visited { margin-top: 25px;display: inline-block; background-color: transparent; color: #f06; font-weight: 300; font-size: large; padding: 14px 20px; 
    text-align: center; text-decoration: none; border: 2px solid #f06; }
a.knop-2:hover, a.knop-2:active {  background-color: #f06; color: white; border: 2px solid #666666; }

.body-index { font-family: 'Raleway', Verdana, Arial, sans-serif;  background-color: white; color: black; font-size: 1em; }

.startpagina-foto {height: 200px; margin-top: 10px; width: 100%;  background-image: url("../img/klazina-2.png"); background-position: center; }

.startpagina-tekst { display: block; position: initial; margin: 1em 1em 0em 1em; max-width: 100%;}

.blok-header { margin-top: -8px; height: 18em;  background-repeat: no-repeat; background-size: cover; color: transparent; background-color: #f2f2f2;   display: block; filter: grayscale(30%); z-index: 2; }

.header-tekst { display: none;}

a.links-index:visited, a.links-index:link { background-color: transparent !important; color: black !important;  }
a.links-index:focus, a.links-index:hover {  background-color: transparent !important; color: black !important; text-decoration: none; border-bottom: 2px solid #f06; }


.balkje {margin-top: 25px; width: 140px; height: 8px; background-color: #f06;  }
.teeser { padding-top:55px; font-size: 1.5em; color: black; font-weight: 500; }

.basic-grey {margin-left: auto;	margin-right: auto;	max-width: 500px; border-right: 1px solid white; }

/* List styles */
.dot, .dot-2 { font-weight: 300; list-style: none; padding-left: 0; }
.dot li, .dot-2 li { position: relative; padding-left: 28px; }
.dot li:before  { content: ''; width: 15px; height: 15px; position: absolute; background-image: url('../css/DOT-donkergroen.png'); background-size: cover; background-position: center; left: 0; top: 30%;     transform: translateY(-50%); }

.dot-2 li:before { content: ''; width: 15px; height: 15px; position: absolute; background-image: url('../css/DOT-donkergroen.png'); background-size: cover; background-position: center; left: 0; top: 30%;     transform: translateY(-50%); }


.form-kantlijn {display: none;}


}


@media screen and (min-width: 1024px) {

.body-index { background: url("../img/index-a.png") no-repeat center center fixed; background-size: cover; font-family: 'Raleway', Verdana, Arial, sans-serif;  width: 100%; height: 100%; background-color: transparent; color: white; font-size: 1em; }

.startpagina-tekst {display: inline-block; text-align: left; max-width: 600px; position: fixed; left:8em; top: 14em;  }
.startpagina-foto {display: none;}

.logo-contact {margin-top: -25px;}


/* List styles */
.dot, .dot-2 { font-weight: 300; list-style: none; padding-left: 0; }
.dot li, .dot-2 li { position: relative; padding-left: 28px; }
.dot li:before  { content: ''; width: 15px; height: 15px; position: absolute; background-image: url('../css/DOT-donkergroen.png'); background-size: cover; background-position: center; left: 0; top: 40%;     transform: translateY(-50%); }

.dot-2 li:before { content: ''; width: 15px; height: 15px; position: absolute; background-image: url('../css/DOT-wit-transparant.png'); background-size: cover; background-position: center; left: 0; top: 40%;     transform: translateY(-50%); }


}