/*:root{
--aan-slag: rgb(247,208,47);
--vul:rgb(186,39,26);
--border:2px;
--bborder:4px;
}
*/
body{
  display:flex;
  justify-content: space-around;
}
/*=============================================*/
.BMB-wrap{
    padding-top:2em;
    background-color: var(--bridgekleed);
    
    display:flex; 
    flex-direction: row; 
    justify-content: space-around;
}
.top{position:fixed;width:100%;top:0; }

img.circle{border-radius:50%}
img.thumbnail {border:2px solid var(--red); height:50px; width:75px;float:right}
img.thumbnail:hover {cursor:pointer;}
img.bbo {border:0px solid var(--red); width:40px; height:20px;}
img.Q {border:0px solid var(--red); width:30px; height:20px;}


main{
  width:49%;
  display:flex; 
  flex-direction:column; 

}
main section{ 
  background-color: white; 
  border-radius: var(--small-radius); 
  padding: 1em 1em 1em 1em;
  margin-bottom:1em;
}   
section{
  padding:1em;
}
nav{
  width:21%;
  display:flex; 
  flex-direction: column;
}

nav.left section{
  color:white;
  background-color:var(--lightgreen);
  border-radius: var(--small-radius);
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  margin-bottom:1em;
}
nav.left section:before,nav.left section:after{
  content:"";display:table;clear:both
}
nav.right section{
  background-color: var(--background-hand);
  border-radius: var(--small-radius);
  margin-bottom:1em;
}
h1{
  color:white; 
  background-color: var(--bridgekleed);
  text-align: center; 
  font-size:1.8rem;
  padding: 0.2em 0.2em;
  margin-bottom:0.2em;
}
/* h1:hover{cursor:grab;background-color: #4CAF50} */
h2{
  text-align:center; 
  color:var(--bridgekleed); 
  font-size:1.4rem}

h3{
  color:white;
  text-align:center; 
  font-size:0.5rem;
}
nav.left section a{
  padding:0.5em 1em;

  border:none;
  display:block;
  outline:0;
  
  margin:0.25em;
  
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;

  cursor:grab;
  white-space:normal;
}

nav.left section a:hover{
    background-color: var(--bridgekleed);
}
nav.right section a{
  padding:0.5em 1em;
  float:left;
  width:auto;
  border:none;
  display:block;
  outline:0;
  
  margin:0.25em;
  
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:normal;
  border:var(--border-thin) solid var(--lightgreen);
}
nav.right section a:hover{
  color:var(--white);
  background-color: var(--bridgekleed);
}
nav.right button{
  overflow:hidden;
}
button{
  display:inline-block;
  padding:0.5em 1em;
  margin-bottom:1em;

  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:normal;
}

.Page{
  display:block;
  text-align: center;
  border:var(--border-thin) solid var(--aan-slag);
  height:1300px;
  width:1300px; 
  padding-top:50px;
  transform-origin: 0 0;
  overflow: hidden;
}
/* ============ mdeia queries ==================*/

@media (max-width:600px)
  {}
@media (max-width:768px)
  {}
@media (min-width:993px)
  {}
@media (max-width:992px)
  {}
/*================== smal modal pop-up=============================*/
/*.modal-wrapper {
  display:none;
  background: rgba(0, 0, 0, 0.508);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
}
.modal {
  display:none;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  max-width: 300px;
  width: 100%;
  background: wheat;
  padding: 20px;
  margin: 35vh auto;
  border-radius: 5px;
  position: relative;
  animation:animatezoom 0.6s
}

  @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}
}
.modal a {
  text-decoration: none;
  background: crimson;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 10px;
}
.modal-close {
  color: red;
  border: 1px solid black;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  width: 20px;
  border-radius: 5px;
}