div#container
{
   width: 1010px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #FDF5E6;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
#wb_FerrisWheel1
{
   height: auto !important;
}
#FerrisWheel1
{
   width: 100%;
   border-radius: 100%;
   position: relative;
   padding: 100% 0 0 0;
   height: 0;
   display: block;
   overflow: hidden
}
#FerrisWheel1 .nav
{ 
   width: 100%;
   height: 100%;
   position: absolute;
   margin: auto; top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 100%;
   pointer-events: none;
   z-index: 9;
}
#FerrisWheel1 .nav .nav-item
{ 
   display: flex;
   justify-content: center;
   align-items: center;
   width: 170px;
   height: 170px;
   position: absolute;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 50%;
   text-align: center; 
   z-index: 3;
   cursor: pointer;
   border: 1px solid #FF0000;
   transition: all 600ms ease-in;
   pointer-events: all;
}
#FerrisWheel1 .circle
{ 
   position: absolute;
   left: 10%;
   top: 10%;
   width: 80%;
   height: 80%;
   box-sizing: border-box;
   border: 4px dotted #FF0000;
   border-radius: 100%; 
   animation: rotation 100s infinite linear; 
}
#FerrisWheel1 .nav .nav-item:hover, #FerrisWheel1 .nav .nav-item.active
{
   border: 1px solid #CCCCCC; 
}
#FerrisWheel1 .content
{
   border-radius: 100%;
   position: absolute;
   top: 35%;
   left: 35%;
   height: 30%;
   width: 30%;
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
}
#FerrisWheel1 .content .content-item
{
   border-radius: 100%;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   color: #333333;
   position: absolute;
   text-align: center;
   bottom: 0;
   left: 0;
   opacity: 0;
   transform: scale(0);
   transition: all 600ms ease-in;
   font-family: Arial;
   font-weight: normal;
   font-size: 27px;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   align-items: center;
}
#FerrisWheel1 .content-item.active
{
   z-index: 1;
   opacity: 1;
   transform: scale(1);
   transition: all 600ms ease-in;
}
#FerrisWheel1 .content .content-item .svg-icon
{
   position: absolute;   width: 100%;
   height: 100%;
   left: 0%;
   top: 0%;
   fill: currentColor;
   opacity: 0.1;
   pointer-events: none;
}
#FerrisWheel1 .content-item-overlay
{
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,1.00);
   border-radius: 100%;
   z-index: -1;
}
#FerrisWheel1 .content-item .title
{
   font-weight: bold;
   letter-spacing: 2px;
   position: relative;
   z-index: -1;
   color: #333333;
   font-size: 27px;
}
#FerrisWheel1 .content-item p
{
   font-size: 11px;
   margin: 8px 0;
}
#FerrisWheel1 .content-item a
{ 
   color: inherit;
   font-weight: bold;
   text-decoration: inherit;
}
#FerrisWheel1 .content-item-1, #FerrisWheel1 .nav-item-1
{
   background-image: url("images/Gros%2c%20André.jpg");
}
#FerrisWheel1 .content-item-2, #FerrisWheel1 .nav-item-2
{
   background-image: url("images/Nanjing.jpg");
}
#FerrisWheel1 .content-item-3, #FerrisWheel1 .nav-item-3
{
   background-image: url("images/gerestaureerd%20I.jpg");
}
#FerrisWheel1 .content-item-4, #FerrisWheel1 .nav-item-4
{
   background-image: url("images/Wapen%20Amsterdam.jpg");
}
#FerrisWheel1 .content-item-5, #FerrisWheel1 .nav-item-5
{
   background-image: url("images/Stamboom%20plaatje.png");
}
#FerrisWheel1 .content-item-6, #FerrisWheel1 .nav-item-6
{
   background-image: url("images/267%20LOT%20Plaatje001.jpg");
}
#FerrisWheel1 .content-item-7, #FerrisWheel1 .nav-item-7
{
   background-image: url("");
}