.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

.w100 {width:100%;}

.bn-cont, .bn-cont * {
    padding:0; margin:0;
    box-sizing: border-box;
}
.bn-cont {
    height:300px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    background:black;
}

.bn-back {
    z-index: 0;
    position: absolute;
    background:#eee url(back2.jpg) no-repeat 50% 50%;
    background-size:cover;
    left:-15px;top:-15px;
    bottom:-15px;right:-15px;
}
.bn-photo {
    position: absolute;
    left:0;
    width:30%;
    top:0;
    height:100%;
    background:url(person.jpg) no-repeat 50% 0%;
    background-size:cover;
    box-sizing: border-box;
    display: none;
}
.bn-text > span {position:absolute; display: none;}

.bn-text {
    position: absolute;
    display: none;
    color:black;
    transition: all 500ms;
}

.border-radius {border-radius: 50%;}

.cover {background-size:cover;}
.fuxy {color:#C4195B;}
.red {color:#c72718;}
.white {color:white;}

.font0 {font-family: Roboto, Arial, sans-serif;}
.font1 {font-family: Roboto, Arial, sans-serif;}
.font2 {font-family: Roboto, Arial, sans-serif;}
.font3 {font-family: Roboto, Arial, sans-serif;}

.fw-light {font-weight:200;}
.fw-normal {font-weight:300;}
.fw-bold {font-weight:400;}
.fw-heavy {font-weight:900;}

.fs-large {font-size:200%;}
.fs-middle {font-size:150%;}
.fs-normal {font-size:100%;}
.fs-small {font-size:80%;}

.rotate {
    transform: rotate(-25deg);
    position: absolute;
    white-space: nowrap;
}
.bold {font-weight: bold;}

.blur {filter: blur(18px); transform: scaleX(-1); opacity: 0.5;}

.back0 {color:#c72718; text-shadow: 0 2px 5px white; background:white; padding:10px 20px;}

.highlight {
    padding:0.3em 1em;
    border-radius: 0.5em;
}
.highlight-bottom {
    padding:0.3em 1em;
    border-radius: 0.5em 0.5em 0 0;
}


.back-red,
.back1 {background:#c72718; color:white;}
.back-fuxy {background:#C4195B; color:white;}
.back-white {background:white; color:#c72718;}

.tshadow-yellow {text-shadow: 1px 0 0 yellow;}

@keyframes blurin {
    from {}
    to {filter: blur(15px); opacity: 0.7;}
}
@keyframes blurout {
    from {filter: blur(15px); opacity: 0.7;}
    to {filter: blur(0px);}
}

@keyframes fadeinleft {
    from {margin-left:-500px;}
    to {}
}
@keyframes fadeoutleft {
    from {}
    to {margin-left:-500px;}
}
@keyframes fadein {
    from { opacity: 0; margin-top:30px; margin-bottom:-30px;}
    to {opacity: 1;}
}
@keyframes fadeout {
    from {opacity: 1;}
    to { opacity: 0; margin-top:-30px;}
}
@keyframes border {
    from {border:1px solid #c72718;}
    to {border:30px solid #c72718;}
}
@keyframes zoom {
    from {transform: scale(1);}
    to {transform: scale(1.2);}
}
@keyframes zoomin {
    from {transform: scale(1);}
    to {transform: scale(1.2);}
}
@keyframes zoomout {
    from {transform: scale(1.2);}
    to {transform: scale(1); opacity: 0;}
}
@keyframes opacityin {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes opacityout {
    from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes backdown {
    from {background-position:50% 0;}
    to {background-position:50% 20%;}
}
@keyframes backup {
    from {background-position:50% 20%;}
    to {background-position:50% 0;}
}

@media (max-width: 479px) {
    .bn-cont {height:400px;}
}