.of-container {
    width: 100%;
    display: flex;
}

.of-feedback {
    width: 16em;
    margin-right: 1em;
}

.of-header {
    display: flex;
}

.of-rating {
    width: 2.4em;
    height: 2.4em;
    margin-right: .5em;
}

.of-rating img {
    width: 2.4em;
    height: 2.4em;
}

.of-title {
    height: 2.4em;
    line-height: 1.2em;
}

.of-customer {
    font-weight: bold;
    line-height: 1.2em;
    height: 1.2em;
}

.of-date {
    line-height: 1.2em;
    height: 1.2em;
    font-style: italic;
    font-size: .8em;
}

.of-text {
    width: 12em;
    margin: .5em 0 .5em 2.64em;
    font-size: 1.1em;
    white-space: normal;
}

.of-container-scroll-horizontal {
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 1em;
}

.of-container-grid {
    flex-wrap: wrap;
}

.of-container-grid .of-feedback {
    margin-right: 0;
    margin-bottom: 1.5em;
}

.of-spinner {
    margin: 1em auto;
    width: 3em;
    height: 3em;
    position: relative;
    text-align: center;

    -webkit-animation: of-rotate 2.0s infinite linear;
    animation: of-rotate 2.0s infinite linear;
}

.of-dot1,
.of-dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #333;
    border-radius: 100%;

    -webkit-animation: of-bounce 2.0s infinite ease-in-out;
    animation: of-bounce 2.0s infinite ease-in-out;
}

.of-spinner .dot2 {
    top: auto;
    bottom: 0;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes of-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes of-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes of-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes of-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}