#history {
 padding-bottom: 1rem!important;
}

.history-leaders-title {
font-size: 1.2rem;
font-weight: bold;
color: #458bff;
border-top: 1px solid #0a58ca;
margin-bottom: 1rem;
padding-top: 1rem;
}

.history-leader-block {
 text-align: center;
 flex:0 0 auto;
 width:100%;
 background-color: #fff;
 border: 1px solid #f0f8ff;
 margin-bottom: 1rem;
}

.history-leader-header {
font-family:monospace;
font-size: 1.8rem;
font-weight: bold;
color: #ff0000;
/*border-top: 1px dotted #eee;*/
border-bottom: 0.1rem solid #f00;
background-color: #fff;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.history-leader-photo {
height: auto;
width: 90%;
max-width: 255px;
}

.history-leader-name {
font-size: 1.2rem;
font-weight: bold;
color: #000;
margin-top: 0.5rem;
margin-bottom: 1rem;
}

.history-leader-name span {
font-size: 1.5rem;
}

.history-leader-name span::after {
content: "\A";
white-space: pre-wrap;
}

.history-leader-desc {
 transition: display 600ms easy-out;
 word-wrap: break-word;
}


#history-stages p {
 text-align: justify;
}

.history-attention {
 font-weight:bold !important;
 color: #f00;
}

#history-stages img {height:180px;min-width:240px;border: 1rem solid white;}

@media {
.history-leader-photo {width: 221px}
}


@media (min-width:768px){
.history-leader-block {flex:0 0 auto;width:33.3333333333%}
.history-leaders-title {font-size: 1.4rem;}

.history-leader-name {font-size: 1rem}
.history-leader-name span {font-size: 1.2rem}

.history-leader-photo {min-height: 224px;width: 170px}

#history-stages img {height:300px;min-width:400px}
}

@media (min-width:1200px){
.history-leader-block {flex:0 0 auto;width:16.6666666667%}
.history-leaders-title {font-size: 1.6rem;}

#history-stages img {height:525px;min-width:700px}
.history-leader-photo {min-height: 224px;width: 170px}
}

@media (min-width:1400px){

}