.tabbox
{
    position: relative;
    margin:0px 0px 0px 0px;
}
.tabbox>h5
{
    font-weight: bolder;
    margin: 0px;
    padding: 0px 5px;
}
.tabbox>.tabbuttons
{
display: flex;
align-items: stretch;
} 
.tabbox>.tabbuttons>a
{
    
    flex-grow: 1;
    display: inline-table;
}
.tabbox>.tabbuttons>a>div
{
    margin:10px 0px 0px 0px;
    text-align:center;
    color:#fff;
    cursor:pointer;
    padding:5px 0px;
    font-size: 14px;
    line-height: 20px;
    border:1px solid #eee;
    background-color: #311;
    margin-right:5px;
    width: auto;
    
}  
.tabbox>.tabbuttons>a>div:last-child
{
    margin-right:0px;
} 
.tabbox>.tabbuttons>a>.active
{
    background-color: darkred;
    }
.tabbox .tabdatacontainer
{
    width:100%;
    padding:0px 20px 20px 20px;
    border:1px solid #eee;
    border-width: 0px 1px 1px 1px;
    z-index:20;
    background: #fff;
    margin:0px 0px 10px 0px;
    overflow:auto;
}
.tabbox .tabdatacontainer>div
{    
    display:none;
    padding: 20px 10px;
}
.tabbox .tabdatacontainer>div.active
{    
    display:block;
}

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

.tabbox>.tabbuttons
{
    width: 100%;
    text-align: center;
  margin: 15px -7px;
} 
.tabbox>.tabbuttons>a>.active
{
   background-color: darkred;
    
} 
.tabbox>.tabbuttons
{
display: inline-block;
} 

    .tabbox>.tabdatacontainer
    {
        
    }
    .tabbox>.tabbuttons>a>div
{
    padding:5px 7px;
    font-size:12px;
    margin:1px;
    }
 

    .photo
{
    margin:0px;
    width: 100%;
}
}
.str
{
    font-weight: bolder;
}
dd
{margin-bottom: 10px;}
.photo
{
    margin:5px;
}