.rating-badge[data-v-330c0908] {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0 2px 2px gray;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url(../images/rating-badge.DfCBbCLr.png);
    color: #000;
    text-align: center;
    font-size: 11px;
    padding-top: 30px;
    font-weight: 700
}

.badge {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-block!important;
    border-radius: 50%;
    box-shadow: 0 2px 2px gray;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%
}

.badge.large {
    width: 50px;
    height: 50px
}

.badge.new-camera-icon {
    background-image: url(../images/new-camera-badge.Bl3uikcs.png)
}

.badge.top-camera {
    background-image: url(../images/top-camera-badge.Bdevtxs9.png)
}

.camera-list-item {
    max-width: 33%;
    flex-basis: 33%;
    font-family: Public Sans,sans-serif;
    font-size: .875rem;
    background: #fff;
    color: #000;
    margin-bottom: 30px;
    position: relative
}

.camera-list-item.online:not(.free-chat):before {
    content: "";
    top: -10px;
    left: 10px;
    display: block;
    position: absolute;
    width: 61px;
    height: 18px;
    z-index: 1;
    background: url(../images/camera-online-icon.CJy8EkNg.png?v=11) no-repeat center
}

.camera-list-item .camera-profile-link {
    display: block;
    position: relative
}

.camera-list-item .camera-profile-link .free-chat-label {
    display: none;
    position: absolute;
    top: -13px;
    left: 10px;
    z-index: 2;
    width: 106px;
    height: 24px;
    background: url(../images/camera-freechat-icon.72RVu7_1.png?v=1) no-repeat center;
    background-size: contain;
    pointer-events: none
}

.camera-list-item .camera-profile-link:hover .free-chat-label {
    display: none!important
}

.camera-list-item .camera-profile-link .camera-thumbnail {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.camera-list-item .camera-profile-link .camera-thumbnail .carousel {
    height: 218px;
    touch-action: pan-y
}

.camera-list-item .camera-profile-link .camera-thumbnail .carousel .carousel__slide {
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: top
}

.camera-list-item .camera-profile-link .camera-thumbnail .carousel .carousel__slide img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    transition: all 2s ease-out
}

.camera-list-item .camera-profile-link .camera-thumbnail .carousel .carousel__slide:hover img {
    transform: scale(1.1)
}

.camera-list-item .camera-profile-link .camera-thumbnail .no-camera-thumb {
    height: 100%;
    width: 100%;
    background-image: url(../images/no_camera_thumb.D0gp4595.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%
}

.camera-list-item .camera-profile-link .camera-thumbnail .badges {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 20px;
    width: 100%
}

.camera-list-item .camera-profile-link .camera-thumbnail .badges .tooltip-box,.camera-list-item .camera-profile-link .camera-thumbnail .badges .rating-badge {
    display: inline-block;
    vertical-align: top;
    margin-left: -10px
}

.camera-list-item .camera-profile-link .camera-thumbnail .badges .rating-badge {
    margin-bottom: 7px
}

.camera-list-item .camera-profile-link .camera-thumbnail .badges .tooltip-box .badge.top-camera+.tooltip {
    width: auto!important;
    font-family: Recursive,sans-serif
}

.camera-list-item .camera-profile-link .camera-thumbnail .favourite-action-camera {
    margin-left: 10px;
    margin-top: 10px;
    position: absolute;
    z-index: 2
}

.camera-list-item .camera-profile-link:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 20px;
    width: 100%;
    background: url(../images/camera-bottom-border.DIC1KcmN.png) no-repeat bottom;
    background-size: 100% 100%;
    z-index: 1
}

.camera-list-item.free-chat:before {
    border: 3px solid #35bd48;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    z-index: 2;
    pointer-events: none
}

.camera-list-item.free-chat .camera-profile-link .free-chat-label {
    display: block
}

@keyframes handAnim {
    0% {
        left: 80%;
        opacity: 0
    }

    50% {
        left: 70%;
        opacity: 1
    }

    to {
        left: 80%;
        opacity: 0
    }
}

.camera-list-item.free-chat.with-hint .camera-profile-link:before {
    pointer-events: none;
    background: url(../images/hand_icon.B4pOWlGm.svg) no-repeat;
    background-size: contain;
    z-index: 3;
    top: 35%;
    height: 90px;
    width: 50%;
    max-width: 270px;
    position: absolute;
    animation: handAnim 1.5s infinite;
    content: " "
}

.camera-list-item.free-chat.with-hint .camera-profile-link:after {
    background: url(../images/cloud.znBVpC0R.svg) no-repeat;
    background-size: contain;
    z-index: 3;
    top: -5%;
    left: 90%;
    height: 180px;
    width: 100%;
    max-width: 270px;
    position: absolute;
    padding: 20% 10% 15% 13%;
    font-size: 1.275rem;
    color: #333;
    line-height: 1em;
    font-weight: 700;
    font-family: Open Sans,sans-serif;
    content: "Try our \a free cams now! \aWe hope you like it";
    white-space: pre
}

.camera-list-item.simple {
    margin-bottom: 0
}

.camera-list-item.simple.online:not(.free-chat):before {
    display: none
}

.camera-list-item.simple .camera-profile-link .free-chat-label {
    display: none
}

.camera-list-item .camera-details {
    padding: 0 10px 10px;
    color: #333;
    position: relative;
    min-height: 40px
}

.camera-list-item .camera-details .name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #337ab7;
    font-size: 1.25rem;
    font-family: Recursive,sans-serif
}

.camera-list-item .camera-details .age,.camera-list-item .camera-details .job {
    color: #d968a3
}

.camera-list-item .camera-details .description {
    font-family: Recursive,sans-serif;
    display: inline-block;
    /* 或 block */
    width: 100%;
    /* 设置一个固定宽度 */
    /* max-width: 200px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* border: 1px solid #ccc; */
    padding: 5px;
    text-decoration: none;
    /* color: blue; */
}

.camera-list-item .camera-details .see-full-profile {
    color: #888e8e;
    position: absolute;
    bottom: 0;
    right: 10px;
    font-family: Recursive,sans-serif
}

.camera-list-item.offline .camera-details .name {
    color: #666
}

.camera-list-item.offline .camera-details .age,.camera-list-item.offline .camera-details .job {
    color: #888e8e
}

@media only screen and (max-width: 991px) {
    .camera-list-item {
        max-width:49%;
        min-width: 49%
    }
}

@media only screen and (max-width: 767px) {
    .camera-list-item .camera-profile-link .camera-thumbnail .carousel__slide {
        height:auto
    }
}

@media only screen and (max-width: 479px) {
    .camera-list-item {
        max-width:310px;
        min-width: 310px;
        width: 100%;
        margin: 0 auto 30px
    }

    .camera-list-item .camera-profile-link .camera-thumbnail .carousel__slide {
        height: 233px
    }
}

@media only screen and (max-width: 375px) {
    .camera-list-item {
        max-width:270px;
        min-width: 270px
    }

    .camera-list-item .camera-profile-link .camera-thumbnail .carousel__slide {
        height: 203px
    }
}