@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
    background: #4CB6DE;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.quote {
    position: relative;
    margin-top: 90px;
    padding: 0 30px;
}

p {
    position: relative;
    z-index: 1;
    font-size: 24px;
    line-height: 35px;
    margin: 20px 0;
}

.quote:before {
     display: block;
     position: absolute;
     z-index: 0;
     content: '„';
     font-size: 250px;
     color: #6AC2E3;
     line-height: 35px;
     top: -100px;
    font-family: Arial;
     left: 7px;
    opacity: 0.7;
 }

.author {
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
}

.tooltip {
    position: relative;
    display: inline-block;
    background: #286F8A;
    padding: 0px 8px 5px 8px;
    margin: -10px 0;
    cursor: pointer;
}
.tooltip:hover .info,
.tooltip:focus .info {
     visibility: visible;
     opacity: 1;
     transform: translate3d(0,0,0);
 }

.info {
    box-sizing: border-box;
    position: absolute;
    bottom: 53px;
    left: -85px;
    display: block;
    background: #286F8A;
    width: 300px;
    font-size: 16px;
    line-height: 24px;
    cursor: text;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -20px, 0);
    transition: all .5s ease-out;
}
.info:before {
     position: absolute;
     content: '';
     width: 100%;
     height: 14px;
     bottom: -14px;
     left: 0;
 }

.info:after {
     position: absolute;
     content: '';
     width: 10px;
     height: 10px;
     transform: rotate(45deg);
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
     background: #286F8A;
 }

.pronounce {
    display: block;
    background: #fff;
    color: #286F8A;
    padding: 8px 17px 10px 17px;
    line-height: 16px;
}
.fa {
    position: relative;
    margin-left: 10px;
    top: 1px;
    cursor: pointer;
    transition: all .2s ease-out;
}
.fa:hover {
     transform: scale(1.15) translate3d(0,0,0);
     /*backface-visibility: none;*/
 }


.text {
    display: block;
    padding: 13px 17px;
}