header.masthead
{
            text-align:center;
            color: white;
            background-image: url('img/00bg.jpg');
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: center center;
            background-size: cover;
			padding-top: 10px;
            padding-bottom: 10px;
}
.topcara{
			height:300px;
			background-color:#FFFFFF;
			margin-top:90px;
			background-attachment: scroll;
            background-position: center center;
            background-size: cover;
			}
			
.mySquare{
			border-width: thick;
            width: 100px;
            height: 100px;
            margin: 30px 0;
			
        }
.myimg{
		width:64px;
		}
.mysmallBox{
        width: 100%;
        height: 250px;
		/* overflow auto is echt een super belangrijke attribute */
        overflow: auto;
        padding-left: 5px;
		}

    @media (min-width: 300px) {
          #mainNav {
            padding-top: 25px;
            padding-bottom: 25px;
            -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
            -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
            transition: padding-top 0.3s, padding-bottom 0.3s;
            border: none;
            background-color: transparent;
			background-color: darkblue;    /* change background color */
          }
		  #mainNav.navbar-shrink {
            padding-top: 0;
            padding-bottom: 0;
            background-color: darkblue;   /* change background color */
          }
          #mainNav .navbar-brand {
            font-size: 1.75em;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
          }
		  #mainNav.navbar-shrink .navbar-brand {
            font-size: 1.25em;
            padding: 12px 0;
          }
          #mainNav .navbar-nav .nav-item .nav-link {
            padding: 1.1em 1em !important;
          }
          
        
	}

@media(max-width: 576px){
	body{
	background-color: lightblue; }
    .xl, .lg, .md, .sm, .xs{
        display: none;
    }
    
    .xs{
        display: block;
    }
}
      
@media(min-width: 576px){
    body{
		background-color: lightblue; }
     .xl, .lg, .md, .sm, .xs{
        display: none;
    }
    
    .sm{
        display: block;
    }
}
        
@media(min-width: 768px){
    body{
		background-color: lightblue; }
    .xl, .lg, .md, .sm, .xs{
        display: none;
    }
    
    .md{
        display: block;
    }
}
        
@media(min-width: 992px){
    body{
		background-color: lightblue; }
    .xl, .lg, .md, .sm, .xs{
        display: none;
    }
    
    .lg{
        display: block;
    }
}
        
@media(min-width: 1200px){
    body{
		background-color: lightblue; }
    .xl, .lg, .md, .sm, .xs{
        display: none;
    }
    
    .xl{
        display: block;
    }
}

/* change the brand and text color */
	.navbar .navbar-brand,
	.navbar .navbar-text {color: white;}
		
/* change the link color */
	.navbar-nav .nav-item .nav-link {color: white;}
		
/* change the color of active or hovered links */
	.navbar-nav .nav-item.active .nav-link,
	.navbar-nav .nav-item:hover .nav-link {color: darkblueblue;}


 h3{
    background-color: black;
    color:white !important;
     padding:3px;
     text-align: center;
     border-radius: 20px;
}       
h4.blauw{
    background-color: blue;
    color:white !important;
     padding:3px;
     text-align: center;
     border-radius: 20px;
}       

section.midden 
{ 
	background-color:#00008B; 
	color:black; 
	text-align:center;
	border-width:5px;
	border-style:dotted solid; 	
}
		
.heightAdder
{
	height: 1000px;
}

.container {
	max-width: 90em;
		}

.foot 
{
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
   
}

.foot2 
{
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   padding: 20px;
   color: white;
   text-align: center;
}


.buttontest {
		}
.sticky {
	position: -webkit-sticky;
	position: sticky;
	top:0;
	
	padding: 80px;
	font-size: 20px;
}
.imgDiv img{
            width: 200px;
        }
		
img.imgtest {
			width: 200px;
			height: 200px;
			display: block;
		}
		
div.face {
			height: 60px;
			text-align:center;
		}
div.rood {
	background-color:red; 
	width:100px; 
	float:right;
	}
div.blauw {
	background-color:blue; 
	float:left;
	color:white; 
	}
	
div.klein {
	color:darkblue; 
	font-size:12px; 
	text-align: center;
	}
	
li.klein {
	background-color:lightblue; 
	font-size:8px;
	}