/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, 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;
}

*{font-family: 'ABeeZee', sans-serif;
}

body {
padding-top:50px;
background-color: #fff8dc;
position:relative;
}

#aan-de-stamtafel, #aan-de-stamtafelmobiel, #diensten, #susanna, #contact {
padding:50px 0;
}

#aan-de-stamtafel h1, #aan-de-stamtafelmobiel h1, #diensten h1, h2, h3, h4, h5, #susanna h1, #contact h1 {
margin-left:50px;
}

p {
font-size: 16px;
font-weight: 300;
line-height: 30px;
margin: 12px 50px 28px;
padding: 3px;
}

#aan-de-stamtafel p {
margin-left: auto;
margin-right: auto;
width: 40em;
}

#aan-de-stamtafelmobiel p {
margin-left: auto;
margin-right: auto;
}

/*styling voor de header*/
header {
background-color: #b3ae9a;
padding:20px 10px;
}

header h1, header h2 {
color: #000000;
font-weight: bold;
margin: 40px 0 10px;
}

header img {
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
width:50%;
max-width:200px;
}

@media only screen and (max-width : 768px) {
header img {
width:80%;
max-width:200px;
}
}

@media only screen and (min-width : 1367px) {
header img {
width:50%;
}
}

/*einde styling voor de header*/

/*styling aan-de-stamtafel blok*/

#aan-de-stamtafel a:link, #aan-de-stamtafel a:active, #aan-de-stamtafel a:visited {
color: #000000;
text-decoration: underline;
}

#aan-de-stamtafel a:hover {
color:#b3ae9a;
}

#aan-de-stamtafelmobiel a:link, #aan-de-stamtafelmobiel a:active, #aan-de-stamtafelmobiel a:visited {
color: #000000;
text-decoration: underline;
}

#aan-de-stamtafelmobiel a:hover {
color:#b3ae9a;
}

@media screen and (max-width: 1040px){
#aan-de-stamtafel {
display:none;
}
}

@media screen and (min-width: 1041px){
#aan-de-stamtafelmobiel {
display:none;
}
}

/*einde styling aan-de-stamtafel blok */

/*styling diensten blok */
#diensten {
background-color: #cccccc;
color:#000000;
}

#diensten a:link, #diensten a:active, #diensten a:visited {
color: #000000;
text-decoration: underline;
}

#diensten a:hover {
color:#b3ae9a;
}

#diensten img {
float: left;
display:block;
margin:auto;
margin-bottom:20px;
margin-top:20px;
margin-left:50px;

}

#diensten ul{
font-size:16px;
float: left;
margin-top:0px;
margin-left:50px;
}


@media only screen and (max-width : 480px) {
#diensten p {
margin-left: 5px;
margin-right: 5px;
}
}

@media only screen and (max-width : 480px) {
#diensten h1, h2, h3, h4, h5 {
margin-left: 5px;
margin-right: 5px;
}
}

@media only screen and (max-width : 480px) {
#diensten img {
width:80%;
max-width:200px;
margin-right:280px;
margin-left:5px;
}
}


@media only screen and (max-width : 768px) {
#diensten img {
width:80%;
max-width:200px;
margin-right:568px;
}
}


@media only screen and (max-width : 1024px) {
#diensten img {
width:80%;
max-width:200px;
margin-right:824px;
}
}

@media only screen and (max-width : 1366px) {
#diensten img {
width:80%;
max-width:200px;
}
}


@media only screen and (max-width : 1920px) {
#diensten img {
width:80%;
max-width:300px;
}
}



/*einde styling diensten blok */

/*styling susanna blok */
#susanna {
background-color: #fff8dc;
color:#000000;
}

#susanna img {
display:block;
float:left;
margin:auto;
width:100%;
margin-bottom:50px;
margin-right:80px;
margin-top:50px;
}


@media only screen and (max-width : 480px) {
#susanna p {
margin-left: 5px;
margin-right: 5px;
}
}

@media only screen and (max-width : 480px) {
#susanna h1, h2 {
margin-left: 5px;
margin-right: 5px;
}
}

@media only screen and (max-width : 480px) {
#susanna img {
width:80%;
max-width:200px;
margin-right:280px;
margin-left:5px;
}
}

@media only screen and (max-width : 768px) {
#susanna img {
width:80%;
max-width:200px;
margin-right:568px;
}
}

@media only screen and (max-width : 1024px) {
#susanna img {
width:80%;
max-width:200px;
margin-right:824px;
}
}

@media only screen and (max-width : 1366px) {
#susanna img {
width:70%;
max-width:200px;
}
}

@media only screen and (max-width : 1920px) {
#susanna img {
width:60%;
max-width:150px;
}
}


#susanna a:link, #susanna a:active, #susanna a:visited {
color: #000000;
text-decoration: underline;
}

#susanna a:hover {
color:#b3ae9a;
}

/*einde styling susanna blok */

/*styling contact blok */
#contact {
background-color: #b3ae9a;
color:#000000;
}

#contact a:link, #contact a:active, #contact a:visited {
color: #000000;
text-decoration: underline;
}

#contact a:hover {
color:#fff8dc;
}

@media only screen and (max-width : 480px) {
#contact p {
margin-left: 5px;
margin-right: 5px;
}
}

@media only screen and (max-width : 480px) {
#contact h1 {
margin-left: 5px;
margin-right: 5px;
}
}


/*einde styling contact blok */

/*styling voor de footer*/
footer {
background-color: #fff8dc;
padding:20px 10px;
text-align:center;
}

footer a:link, footer a:active, footer a:visited {
color: #000000;
}

footer a:hover {
color:#b3ae9a;
}

/*einde styling voor de footer*/

/*styling navigatiebalk*/
.navbar-fixed-top {
background-color:#b3ae9a;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
color: #000000;
background:#fff8dc;
}

.navbar-default .navbar-nav > .active > a:hover {
background:#fff8dc;
color:#b3ae9a;
}

.navbar-default .navbar-nav > li > a {
color: #000000;
}

.navbar-default .navbar-nav > li > a:hover {
background:#cccccc;
color:#000000;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #b3ae9a;
border:solid 1px #b3ae9a;
}

.icon-bar {
background-color:#cccccc !important;
}

@media only screen and (max-width : 768px) {
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}

.navbar-default .navbar-nav > li > a:hover {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}

.navbar-default .navbar-nav > li > a {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}
}
/*einde styling navigatiebalk*/