/*一般都写到了style.css中间去了*/
/*这里做style.boundle.css的增补*/
.text-red {
    color: #ab3542 !important;
}

a.text-red:hover, a.text-red:focus {
    color: #5f1d25 !important;
}

.text-break-all {
    word-break:break-all !important;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.symbol .symbol-btn {
    position: absolute;
    top: 50%;
    right: 50%;
}
.symbol .symbol-btn-4x {
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -2rem;
    margin-right: -2rem;
    width: 4rem;
    height: 4rem;
    display: block;
    text-align: center;
}
.spinner-border-5s
{
    animation-duration: 5s;
}
.filter-grayscale-100
{
    filter: grayscale(100%);
}
.hover-filter-grayscale-0:hover, .hover-filter-grayscale-0:focus {
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    filter: grayscale(0%);
}
.bg-hover-light-light:hover  .hover-filter-grayscale-0
{
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    filter: grayscale(0%);
}
.bg-hover-light-light:focus  .hover-filter-grayscale-0
{
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    filter: grayscale(0%);
}

/*文章展示的内联样式调整*/
blockquote{
    background: #e7e7e7ba;
    padding: 10px;
    border-radius: 10px;
}

:not(pre)>code[class*=language-], pre[class*=language-] {
    background: #f3f3f3;
    border: 1px solid #c0c0c0;
}

code
{
    background: none;
}

.text-lc-2,.text-lc-2 *
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-lc-1,.text-lc-1 *
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*控制显示*/
.display-none
{
    display: none;
}
@media (max-width: 900px) {
    .display-none-900 {
        display: none;
    }
    body
    {
        background-size: auto 350px;
    }
}
@media (max-width: 600px) {
    .display-none-600 {
        display: none;
    }


}
@media (max-width: 400px) {
    .display-none-400 {
        display: none;
    }
}

.card:hover >.card-paper
{
    opacity: 0;
}
.card-paper {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: 0.4;
    transition: opacity 0.2s, visibility 2s;
}

.transform-scale:hover{
    transform: scale(1.1);
}
.transform-scale{
    transition: transform  0.2s;
}
.transform-opacity-0{
    opacity:0;
    transition:opacity 0.5s;
}
.transform-opacity-100{
    opacity:1
}





#slides {
    position: relative;
    width: 100%;
    height: 100%;
}
#slides .slide {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
#slides .slide .title {
    position: absolute;
    top: calc(50% - 0.5em);
    left: 20px;
    z-index: 2;
    padding-top: 5px;
    font-family: "Reem Kufi", sans-serif;
    font-size: 5em;
    color: white;
    overflow: hidden;
}
#slides .slide .title .title-text {
    display: block;
    transform: translateY(1.2em);
    transition: transform 1s ease-in-out;
}
#slides .slide .slide-partial {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 1s ease-in-out;
}
#slides .slide .slide-partial img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform 1s ease-in-out;
}
#slides .slide .slide-left {
    top: 0;
    left: 0;
    transform: translateX(-100%);
}
#slides .slide .slide-left img {
    top: 0;
    right: 0;
    -o-object-position: 100% 50%;
    object-position: 100% 50%;
    transform: translateX(50%);
}
#slides .slide .slide-right {
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition-delay: 0.2s;
}
#slides .slide .slide-right img {
    top: 0;
    left: 0;
    -o-object-position: 0% 50%;
    object-position: 0% 50%;
    transition-delay: 0.2s;
    transform: translateX(-50%);
}
#slides .slide.active .title .title-text {
    transform: translate(0);
    transition-delay: 0.3s;
}
#slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
    transform: translateX(0);
}

#slide-select {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-family: "Reem Kufi", sans-serif;
    font-size: 1.5em;
    font-weight: lighter;
    color: white;
}
#slide-select li {
    position: relative;
    cursor: pointer;
    margin: 0 5px;
}
#slide-select li.prev:hover {
    transform: translateX(-2px);
}
#slide-select li.next:hover {
    transform: translateX(2px);
}
#slide-select .selector {
    height: 14px;
    width: 14px;
    border: 2px solid white;
    background-color: transparent;
    transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
    background-color: white;
}

.codepen-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 40px;
    width: 40px;
    z-index: 10;
    border-radius: 50%;
    box-sizing: border-box;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
    background-position: center center;
    background-size: cover;
    opacity: 0.5;
    transition: all 0.25s;
}
.codepen-link:hover {
    opacity: 0.8;
    box-shadow: 0 2px 6px #0c0c0c;
}