@charset "utf-8";

.staff{
/*border: 2px solid #231711;*/
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
display: table;
width: 100%;
box-sizing: border-box;
}

.staff img{
width: 30%;
height: auto;
float: left;
margin-right: 20px;
}

.staff p{
margin-bottom: 10px;
float: left;
width:65%;
}


.staff p:nth-of-type(1){
line-height: 1.5em;
font-size: 1.5em;
}

.staff p:nth-of-type(1) span{
font-size: 0.6em;
}

.staff p:nth-of-type(1) strong{
background:#f77d19;
color: #FFF;
border-radius: 5px;
font-size: 0.7em;
padding: 3px 10px;
}

.staff h3 {
    font-size: x-large;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: solid 4px #f77d19;
    margin-bottom: 15px;
}

@media screen and (max-width:767px){
.staff{
padding: 15px;
}

.staff img{
margin-bottom: 15px;
margin-right: 15px;
width: 35%;
height: auto;
}

.staff p{
font-size: 0.9em;
line-height: 1.3em;
width: 60%;
}

.staff p:nth-of-type(1){
line-height: 1.7em;
font-size: 1.3em;
font-weight: bold;
}

.staff p:nth-of-type(1) strong{
font-size: 0.8em;
padding: 3px 10px;
margin-right: 10px;
}


}
@media screen and (max-width:414px){
.staff h3 {
    font-size: medium;
}
.staff img {
    margin-bottom: 15px;
    margin-right: 20%;
    margin-left: 20%;
    float: none;
    width: 60%;
    height: auto;
}
.staff p {
    width: 100%;
}
.staff p:nth-of-type(1) {
    font-size: 1em;
}
}

@media screen and (max-width:360px){
.staff img{
width: 30%;
}
}