﻿
/* Make it looks good on CodePen */
/*html {
    background-color: #cef;
}*/

html, body, .sonar-wrapper {
    height: 100%;
}

/* Prevent scrollbars to appear when waves go out of bound */
.sonar-wrapper {
    position: relative;
    z-index: 0;
    /*overflow: hidden;
    padding: 8rem 0;*/
    margin-right: 5em;
}

/* The circle */
.sonar-emitter {
    position: relative;
    margin: 0 auto;
    width: 1px;
    /*height: 1px;*/
    /*border-radius: 9999px;
    background-color: HSL(45,100%,50%);*/
}

/* the 'wave', same shape and size as its parent */
.sonar-wave {
    font-size: 1.5em !important;
    font-weight: 500;
    /*color: green !important;*/
    color: #F03C02 !important;
    position: relative;
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    border-radius: 9999px;
    /*background-color: HSL(45,100%,50%);*/
    /*opacity: 0;
    z-index: -1;
    pointer-events: none;*/
    text-decoration: none;
}

.sonar-wave-bdg {
    font-size: 1em !important;
    font-weight: 100;
    /*color: green !important;*/
    /*color: #F03C02 !important;*/
    position: relative;
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    border-radius: 9999px;
    /*background-color: HSL(45,100%,50%);*/
    /*opacity: 0;
    z-index: -1;
    pointer-events: none;*/
    text-decoration: none;
}

/*
  Animate!
  NOTE: add browser prefixes where needed.
*/
.sonar-wave {
    animation: sonarWave 2s linear infinite;
}

.sonar-wave-bdg {
    animation: sonarWave 1.3s linear infinite;
}

@keyframes sonarWave {
    from {
        opacity: 0.4;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}

.voce-sabia {
    /*color: green !important;*/
    text-decoration: none !important;
}
