.wrapper {
    padding: 4% 4%;
    background: #e4e5d9;
    border: solid 2rem #fff;
}
/***iframe responsive*/
.iframe-container {
    position: relative;
    width: 80%;
    padding-bottom: 56.25%;
    height: 0;
}

    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .iframe-container div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.stars-ratings {
    font-size: 300%;
    position: relative;
    margin: 0 auto;
    width: 4.2em;
    height: 1.2em;
    overflow: hidden;
    /*margin-left: 0.3em;*/
}

.stars-inner-wrap > div {
    position: relative;
}

.stars {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    color: #fff;
    cursor: pointer;
}

span:last-of-type {
    text-shadow: #333 .02em .02em .1em;
}

.stars.active, .stars.current-rating.active {
    color: #ffdf00;
}

.stars.current-rating {
    /*//color: #feff99;*/
    color: #4285f4;
}

.user-current-rating {
    color: #4285f4;
}

.stars span {
    position: relative;
    line-height: 1;
    height: 100%;
}

.percent:before {
    text-shadow: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    line-height: 1.15em;
    content: '\2605';
    width: 30%;
    overflow: hidden;
    color: #feff99;
}

.has-user-rating .percent:before {
    color: #4285f4;
}

.active .percent:before {
    display: none;
}
@media only screen and (max-width: 1100px) {
    .stars-ratings {
        font-size: 150%;
        margin-left: 1.3em;
        width: 5em;
        margin: 0 auto;
    }
    
    }
@media only screen and (max-width: 768px) {
    .stars-ratings {
        font-size: 400%;
        margin-left: 2.01em;
        width: 5em;
    }
}
@media only screen and (max-width: 610px) {
    .stars-ratings {
        font-size: 400%;
        margin-left: 1.6em;
        width: 5em;
    }
}
@media only screen and (max-width: 550px) {
    .stars-ratings {
        font-size: 400%;
        margin-left: 1em;
        width: 5em;
    }
}
@media only screen and (max-width: 400px) {
    .stars-ratings {
        font-size: 400%;
        margin-left: .8rem;
        width: 5em;
    }
}
@media only screen (min-width:382)and (max-width: 470px) {
    .stars-ratings {
        font-size: 400%;
        margin-left: -0.5em;
        width: 5em;
    }
}
@media only screen and (max-width: 300px) {
    .stars-ratings {
        font-size: 250%;
        margin-left: 0.6em;
        width: 5em;
    }
}