@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import url(http://fonts.googleapis.com/css?family=Calibri:400,300,700); body { background-color: #D32F2F; font-family: 'Calibri', sans-serif !important } fieldset, label { margin: 0; padding: 0 } body { margin: 20px } h1 { font-size: 1.5em; margin: 10px } .rating { border: none; margin-right: 49px } .myratings { font-size: 85px; color: green } .rating>[id^="star"] { display: none } .rating>label:before { margin: 5px; font-size: 2.25em; font-family: FontAwesome; display: inline-block; content: "\f005" } .rating>.half:before { content: "\f089"; position: absolute } .rating>label { color: #ddd; float: right } .rating>[id^="star"]:checked~label, .rating:not(:checked)>label:hover, .rating:not(:checked)>label:hover~label { color: #FFD700 } .rating>[id^="star"]:checked+label:hover, .rating>[id^="star"]:checked~label:hover, .rating>label:hover~[id^="star"]:checked~label, .rating>[id^="star"]:checked~label:hover~label { color: #FFED85 } .reset-option { display: none } .reset-button { margin: 6px 12px; background-color: rgb(255, 255, 255); text-transform: uppercase } .mt-100 { margin-top: 100px } .card { position: relative; display: flex; width: 350px; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid #d2d2dc; border-radius: 11px; -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250); -moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1); box-shadow: 0px 0px 5px 0px rgb(161, 163, 164) } .card .card-body { padding: 1rem 1rem } .card-body { flex: 1 1 auto; padding: 1.25rem } p { font-size: 14px } h4 { margin-top: 18px } .btn:focus { outline: none } .btn { border-radius: 22px; text-transform: capitalize; font-size: 13px; padding: 8px 19px; cursor: pointer; color: #fff; background-color: #D50000 } .btn:hover { background-color: #D32F2F !important }