/* Here is your custom css styles. */
/* 底部Footer红心样式 */
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    display: inline-block;
    margin: 0 5px
}

@-moz-keyframes heartAnimate {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    10%,
    30% {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        -o-transform: scale(.9);
        transform: scale(.9)
    }

    20%,
    40%,
    50%,
    60%,
    70%,
    80% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@-webkit-keyframes heartAnimate {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    10%,
    30% {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        -o-transform: scale(.9);
        transform: scale(.9)
    }

    20%,
    40%,
    50%,
    60%,
    70%,
    80% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@-o-keyframes heartAnimate {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    10%,
    30% {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        -o-transform: scale(.9);
        transform: scale(.9)
    }

    20%,
    40%,
    50%,
    60%,
    70%,
    80% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes heartAnimate {

    0%,
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    10%,
    30% {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        -o-transform: scale(.9);
        transform: scale(.9)
    }

    20%,
    40%,
    50%,
    60%,
    70%,
    80% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@media screen and (min-width: 768px) {
    #he-plugin-simple {
        position: absolute;
        padding: 0px;
        top: 10px;
        left: 16px;
        z-index: 9999;
    }


    @-webkit-keyframes pulse {
        100% {
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2)
        }
    }

    @keyframes pulse {
        100% {
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2)
        }
    }

    #fa-TencentComment {
        max-width: 100vmin;
        max-height: 100vmin;
        display: block;
        margin: 0 auto;
        -webkit-animation: pulse 1s ease-in-out alternate infinite;
        animation: pulse 1s ease-in-out alternate infinite
    }

    #Div_tuxiaochao_main {
        position: fixed;
        bottom: 26%;
        right: 0px;
        cursor: pointer;
    }

    #Div_tuxiaochao {
        max-width: 100vmin;
        max-height: 100vmin;
        display: block;
        margin: 0 auto;
        -webkit-animation: pulse 1s ease-in-out alternate infinite;
        animation: pulse 1s ease-in-out alternate infinite
    }

    .fa-TencentComment {
        width: 60%;
    }


    :before,
    :after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .clearfix:before,
    .clearfix:after,
    .container:before,
    .container:after,
    .container-fluid:before,
    .container-fluid:after,
    .row:before,
    .row:after,
    .form-horizontal .form-group:before,
    .form-horizontal .form-group:after,
    .btn-toolbar:before,
    .btn-toolbar:after,
    .btn-group-vertical>.btn-group:before,
    .btn-group-vertical>.btn-group:after,
    .nav:before,
    .nav:after,
    .navbar:before,
    .navbar:after,
    .navbar-header:before,
    .navbar-header:after,
    .navbar-collapse:before,
    .navbar-collapse:after,
    .pager:before,
    .pager:after,
    .panel-body:before,
    .panel-body:after,
    .modal-footer:before,
    .modal-footer:after {
        content: " ";
        display: table
    }

    .clearfix:after,
    .container:after,
    .container-fluid:after,
    .row:after,
    .form-horizontal .form-group:after,
    .btn-toolbar:after,
    .btn-group-vertical>.btn-group:after,
    .nav:after,
    .navbar:after,
    .navbar-header:after,
    .navbar-collapse:after,
    .pager:after,
    .panel-body:after,
    .modal-footer:after {
        clear: both
    }

    .ih-item {
        position: relative;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    .ih-item,
    .ih-item * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ih-item a {
        color: rgba(26, 74, 114, 0);
    }

    .ih-item a:hover {
        text-decoration: none;
    }

    .ih-item img {
        width: 60%;
    }

    .ih-item.circle {
        position: relative;
        width: 220px;
        height: 220px;
        border-radius: 50%;
    }

    .ih-item.circle .fa-img {
        position: relative;
        width: 220px;
        height: 220px;
        border-radius: 50%;
    }

    .ih-item.circle .fa-img:before {
        position: absolute;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 50%;
        /*box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);*/
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    .ih-item.circle .fa-info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        border-radius: 50%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .ih-item.circle.effect19.colored .fa-info {
        background: #1a4a72;
        /* background: rgba(26, 74, 114, 0.6);*/
        background: rgba(26, 74, 114, 0);
    }

    .ih-item.circle.effect19 .fa-info {
        background: #333333;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    .ih-item.circle.effect19 .fa-info h3 {
        background-image: linear-gradient(-225deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 26px;
        margin: 0 0px;
        padding: 16px 0 0 0;
        height: 50px;
        /*color: #fff;
    	text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);*/
    }


    .ih-item.circle.effect19 .fa-info p {
        /*color: #bbb;*/
        font-weight: 800;
        background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 16px;
        border-top: 2px solid rgba(255, 255, 255, 0.5);
    }

    .ih-item.circle.effect19 a:hover .fa-info {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@media screen and (max-width: 768px) {
    @-webkit-keyframes pulse {
        100% {
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2)
        }
    }

    @keyframes pulse {
        100% {
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2)
        }
    }

    #fa-TencentComment {
        max-width: 100vmin;
        max-height: 100vmin;
        display: block;
        margin: 0 auto;
        -webkit-animation: pulse 1s ease-in-out alternate infinite;
        animation: pulse 1s ease-in-out alternate infinite
    }

    #Div_tuxiaochao_main {
        position: fixed;
        bottom: 26%;
        right: 0px;
        cursor: pointer;
    }

    .fa-TencentComment {
        /*width: 20%;*/
        width: 100%;

    }

    .ih-item.circle {
        position: relative;
        /*width: 160%;*/
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .ih-item .fa-info {
        visibility: hidden;
        width: 0px;
        height: 0px;
    }

}