@gps-burg:           rgba(182, 15, 97, 0.9);
@gps-orange:         rgba(242, 112, 45, 0.9);
@gps-skyblue:        rgba(45, 181, 167, 0.9);
@gps-purple:         rgba(190, 61, 244, 0.9);
@gps-green:          rgba(180, 224, 67, 0.9);
@gps-yellow:         rgba(242, 194, 58, 0.9);

.faixa{
    background: white;
    display: block;
    width: 45%;
    height: auto;
    position: fixed;
    top: 200px;
    padding:10px 0 0 10px;
    text-align: center;
    border: 10px solid transparent;
    -webkit-border-image: url(../img/border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../img/border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(../img/border.png) 30 stretch;

}

.destacar{
    color: #1A6337;
    font-weight: 600;
    letter-spacing: 0.08em; 
    font-size: 1.3em; /* This adds a hover effect */
}
.fechar{
    z-index: 300;
    display: block;
    margin-right: 10px;
    font-size: 36px;
}


.niver-msg{
    display: table-cell;
    vertical-align: bottom;  
}

.niver-nome {
    color: #1A6337;
    font-weight: 600;
    display: table-cell;
    vertical-align: bottom;
    height: 60px;
    letter-spacing: 0.08em; 
    font-size: 1.3em; /* This adds a hover effect */
    line-height: 1em;
    transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);
}

.aniversario{
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200; 
    width: 60%;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;

}
.aniversariante{
    padding: 2px;
}
.balloon { 
    margin: 0 auto;
    padding-top: 30px;

}
.balloon > div {
    width:104px;
    height:140px; 
    background: @gps-burg;
    border-radius:0;
    border-radius:80% 80% 80% 80%;
    margin: 0 auto;
    position: absolute;
    padding:10px;
    box-shadow:inset 17px 7px 10px @gps-burg; 
    -webkit-transform-origin: bottom center; 
}
.balloon > div:nth-child(1){
    background: @gps-burg;
    left: 0; 
    box-shadow:inset 10px 10px 10px darken(@gps-burg, 10%);
    -webkit-animation:balloon1 6s ease-in-out infinite;
    -moz-animation:balloon1 6s ease-in-out infinite;
    -o-animation:balloon1 6s ease-in-out infinite;
    animation:balloon1 6s ease-in-out infinite;
    &:before { 
        color: @gps-burg ;
    }

}
.balloon > div:nth-child(2){
    background: @gps-orange;
    left: 12%; 
    box-shadow:inset 10px 10px 10px darken(@gps-orange, 10%);
    -webkit-animation:balloon2 6s ease-in-out infinite;
    -moz-animation:balloon2 6s ease-in-out infinite;
    -o-animation:balloon2 6s ease-in-out infinite;
    animation:balloon2 6s ease-in-out infinite;
    &:before { 
        color: @gps-orange ;
    }

}
.balloon > div:nth-child(3){
    background: @gps-skyblue;
    left: 24%; 
    box-shadow:inset 10px 10px 10px darken(@gps-skyblue, 10%);
    -webkit-animation:balloon4 6s ease-in-out infinite;
    -moz-animation:balloon4 6s ease-in-out infinite;
    -o-animation:balloon4 6s ease-in-out infinite;
    animation:balloon4 6s ease-in-out infinite;
    &:before { 
        color: @gps-skyblue ;
    }

}
.balloon > div:nth-child(4){
    background: @gps-purple;
    left: 36%; 
    box-shadow:inset 10px 10px 10px darken(@gps-purple, 10%); 
    -webkit-animation:balloon1 5s ease-in-out infinite;
    -moz-animation:balloon1 5s ease-in-out infinite;
    -o-animation:balloon1 5s ease-in-out infinite;
    animation:balloon1 5s ease-in-out infinite;
    &:before { 
        color: @gps-purple ;
    }

}
.balloon > div:nth-child(5){
    background: @gps-green;
    left: 48%; 
    box-shadow:inset 10px 10px 10px darken(@gps-green, 10%);
    -webkit-animation:balloon3 5s ease-in-out infinite;
    -moz-animation:balloon3 5s ease-in-out infinite;
    -o-animation:balloon3 5s ease-in-out infinite;
    animation:balloon3 5s ease-in-out infinite;
    &:before { 
        color: @gps-green ;
    }

}
.balloon > div:nth-child(6){
    background: @gps-yellow;
    left: 60%; 
    box-shadow:inset 10px 10px 10px darken(@gps-yellow, 10%);
    -webkit-animation:balloon2 3s ease-in-out infinite;
    -moz-animation:balloon2 3s ease-in-out infinite;
    -o-animation:balloon2 3s ease-in-out infinite;
    animation:balloon2 3s ease-in-out infinite;
    &:before { 
        color: @gps-yellow ; 
    }

}
.balloon > div:before {
    color:@gps-burg;
    position:absolute;
    bottom:-11px;
    left: 52px;  
    content:"▲";
    font-size:1em;
}

.balloon > div > span {
    font-size: 4.8em;
    color: white;
    position: relative;
    top: 30px;
    left: 50%;
    margin-left: -27px; 
} 
#title span {
    color: #1A6337;
    display:block;
    margin-top: -30px;
    background: white;
    font-weight: 600;
    letter-spacing: 0.08em; 
    font-size: 2.5em; /* This adds a hover effect */
    line-height: 1em;
    transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);
    border: 10px solid transparent;
    -webkit-border-image: url(../img/border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(../img/border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(../img/border.png) 30 stretch;
}



/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
    0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);}
    50%{ -webkit-transform:translateY(-20px) rotate(8deg); }
}
@-moz-keyframes balloon1 {
    0%,100%{ -moz-transform:translateY(0) rotate(-6deg);}
    50%{ -moz-transform:translateY(-20px) rotate(8deg); }
}
@-o-keyframes balloon1 {
    0%,100%{ -o-transform:translateY(0) rotate(-6deg);}
    50%{ -o-transform:translateY(-20px) rotate(8deg); }
}
@keyframes balloon1 {
    0%,100%{ transform:translateY(0) rotate(-6deg);}
    50%{ transform:translateY(-20px) rotate(8deg); }
}

/* BAllOON 2 5*/
@-webkit-keyframes balloon2 {
    0%,100%{ -webkit-transform:translateY(0) rotate(6eg);}
    50%{ -webkit-transform:translateY(-30px) rotate(-8deg); }
}
@-moz-keyframes balloon2 {
    0%,100%{ -moz-transform:translateY(0) rotate(6deg);}
    50%{ -moz-transform:translateY(-30px) rotate(-8deg); }
}
@-o-keyframes balloon2 {
    0%,100%{ -o-transform:translateY(0) rotate(6deg);}
    50%{ -o-transform:translateY(-30px) rotate(-8deg); }
}
@keyframes balloon2 {
    0%,100%{ transform:translateY(0) rotate(6deg);}
    50%{ transform:translateY(-30px) rotate(-8deg); }
}


/* BAllOON 0*/
@-webkit-keyframes balloon3 {
    0%,100%{ -webkit-transform:translate(0, -10px) rotate(6eg);}
    50%{ -webkit-transform:translate(-20px, 30px) rotate(-8deg); }
}
@-moz-keyframes balloon3 {
    0%,100%{ -moz-transform:translate(0, -10px) rotate(6eg);}
    50%{ -moz-transform:translate(-20px, 30px) rotate(-8deg); }
}
@-o-keyframes balloon3 {
    0%,100%{ -o-transform:translate(0, -10px) rotate(6eg);}
    50%{ -o-transform:translate(-20px, 30px) rotate(-8deg); }
}
@keyframes balloon3 {
    0%,100%{ transform:translate(0, -10px) rotate(6eg);}
    50%{ transform:translate(-20px, 30px) rotate(-8deg); }
}

/* BAllOON 3*/
@-webkit-keyframes balloon4 {
    0%,100%{ -webkit-transform:translate(10px, -10px) rotate(-8eg);}
    50%{ -webkit-transform:translate(-15px, 20px) rotate(10deg); }
} 
@-moz-keyframes balloon4 {
    0%,100%{ -moz-transform:translate(10px, -10px) rotate(-8eg);}
    50%{ -moz-transform:translate(-15px, 10px) rotate(10deg); }
}
@-o-keyframes balloon4 {
    0%,100%{ -o-transform:translate(10px, -10px) rotate(-8eg);}
    50%{ -o-transform:translate(-15px, 10px) rotate(10deg); }
}
@keyframes balloon4 {
    0%,100%{ transform:translate(10px, -10px) rotate(-8eg);}
    50%{ transform:translate(-15px, 10px) rotate(10deg); }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}