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

.clearfix {
    clear: both;
}

.text-center {
    text-align: center;
}

a {
    color: tomato;
    text-decoration: none;
}

    a:hover {
        color: #2196f3;
    }

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    border-radius: 4px;
}

.header {
    padding: 20px 0;
    position: relative;
    margin-bottom: 10px;
}

    .header:after {
        content: "";
        display: block;
        height: 1px;
        background: #eee;
        position: absolute;
        left: 30%;
        right: 30%;
    }

    .header h2 {
        font-size: 3em;
        font-weight: 300;
        margin-bottom: 0.2em;
    }

    .header p {
        font-size: 14px;
    }



#a-footer {
    margin: 20px 0;
}

.new-react-version {
    padding: 20px 20px;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

    .new-react-version .react-svg-logo {
        text-align: center;
        max-width: 60px;
        margin: 20px auto;
        margin-top: 0;
    }





.success-box {
    margin: 50px 0;
    padding: 10px 10px;
    border: 1px solid #eee;
    background: #f9f9f9;
}

    .success-box img {
        margin-right: 10px;
        display: inline-block;
        vertical-align: top;
    }

    .success-box > div {
        vertical-align: top;
        display: inline-block;
        color: #888;
    }



/* Rating Star Widgets Style */
.rating-stars ul {
    list-style-type: none;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .rating-stars ul > li.star {
        display: inline-block;
    }

        /* Idle State of the stars */
        .rating-stars ul > li.star > i.fa {
            font-size: 2.5em; /* Change the size of the stars */
            color: #ccc; /* Color on idle state */
        }

        /* Hover state of the stars */
        .rating-stars ul > li.star.hover > i.fa {
            color: #FFCC36;
        }

        /* Selected state of the stars */
        .rating-stars ul > li.star.selected > i.fa {
            color: #FF912C;
        }


.star-ratings-sprite {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
    font-size: 0;
    height: 21px;
    line-height: 0;
    overflow: hidden;
    text-indent: -999em;
    width: 110px;

}

.star-ratings-sprite-rating {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
    background-position: 0 100%;
    float: left;
    height: 21px;
    display: block;
}

 /*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); body {
    margin: 50px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    background: #f2fbff;
}

em {
    font-style: italic;
}

h1 {
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    font-size: 16px;
    margin-bottom: 15px;
}*/