div {
    display: block;
}
body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}
.formh {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.border {
    position: absolute;
    left: 0;
    top: 0;
    border: none!important;
    box-sizing: border-box;
    z-index: 3;
}



img {
    vertical-align: middle;
    border-style: none;
}
#form_slots > div {
    background: url(../img/menu-heroes/lobby.png) no-repeat center -7px;
    background-size: 420px;
    width: 400px;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
    min-width: 400px;
}
.content .container {
    border: 3px solid #ca965d;
    border-radius: 10px;
    padding: 15px;
    color: #e9cfa2;
}

.name-ribbon-wrapper {
    padding-left: 75px;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: relative;
    z-index: 1;
    width: 340px;
    margin: 0 auto;
}


.name-ribbon-wrapper.ribbon-color-1 {
    background-image: url(../img/menu-heroes/grey-l.png);
    box-sizing: border-box;
}
.ribbon-color-1 div {
    background-image: url(../img/menu-heroes/grey-r.png);
}
.name-ribbon-wrapper.ribbon-color-2 {
    background-image: url(../img/menu-heroes/green-l.png);
    box-sizing: border-box;
}
.ribbon-color-2 div {
    background-image: url(../img/menu-heroes/green-r.png);
}
.name-ribbon-wrapper.ribbon-color-3 {
    background-image: url(../img/menu-heroes/blue-l.png);
    box-sizing: border-box;
}
.ribbon-color-3 div {
    background-image: url(../img/menu-heroes/blue-r.png);
}
.name-ribbon-wrapper.ribbon-color-4 {
    background-image: url(../img/menu-heroes/purple-l.png);
    box-sizing: border-box;
}
.ribbon-color-4 div {
    background-image: url(../img/menu-heroes/purple-r.png);
}
.name-ribbon-wrapper.ribbon-color-5 {
    background-image: url(../img/menu-heroes/gold-l.png);
    box-sizing: border-box;
}
.ribbon-color-5 div {
    background-image: url(../img/menu-heroes/gold-r.png);
}
.name-ribbon-wrapper.ribbon-color-6 {
    background-image: url(../img/menu-heroes/red-l.png);
    box-sizing: border-box;
}
.ribbon-color-6 div {
    background-image: url(../img/menu-heroes/red-r.png);
}





.name-ribbon-wrapper div {
    text-align: center;
    color: #fff;
    font-size: 21px;
    line-height: 42px;
    font-weight: 700;
    padding-right: 76px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: right 0;
}

#form_star div {
    width: 26px;
    height: 26px;
    display: inline-block;
    background: url(../img/menu-heroes/bigstarIcon.png);
    background-repeat: round;
    background-size: 26px 26px;
    margin-top: 3px;
    box-sizing: border-box;
}
#form_star {
    height: 32px;
    margin: 0 auto;
    margin-top: -12px;
    text-align: center;
}
.pet-slot-icon {
    display: inline-block;
    position: absolute;
    width: 74px;
    height: 69px;
    box-sizing: border-box;
}
.pet-slot-icon2 {
	display: inline-block;
    position: relative;
    width: 74px;
    height: 69px;
    box-sizing: border-box;
}
.image-frame-pet {
	position: absolute;
    margin-left: 4px;
    margin-top: 4px;
    width: 67px;
    height: 66px;
    overflow: hidden;
    text-align: center;
    border-radius: 17px;
    display: block;
    box-sizing: border-box;
    z-index: 2;
}
.pet-slot-icon .b_slots_plus {
    position: absolute;
    top: 25px;
    right: -8px;
    width: 20px;
    height: 22px;
    cursor: pointer;
    background-image: url(../img/menu-heroes/upIconGreen.png);
    background-size: 20px 22px;
    z-index: 7;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.pet-slot-icon2 .b_slots_plus {
	position: absolute;
	animation: spin 5s linear 0s infinite;

    top: -25px;
    right: -28px;
    width: 125px;
    height: 125px;
    background-image: url(../img/krug.png);
    background-repeat: no-repeat;
    z-index: 1;
}
.b_slots_plus222 {
	position: absolute;
	animation: spin 6s linear 0s infinite;

    top: -31px;
    right: -40px;
    width: 150px;
    height: 150px;
    background-image: url(../img/krug2.png);
    background-repeat: no-repeat;
    z-index: 1;
}
.pet {
	background-image: none;
    position: absolute;
    top: 95px;
    left: 140px;
}