@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Federo);

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    position: relative; /* needed for the overlay to extend when you scroll */
    /* general styles */
}

/* overlay styles, all needed */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 10;
}

/* just some content with arbitrary styles for explanation purposes */
.modal {
    max-width: 700px;
    line-height: 200px;
    position: fixed;
    top: 50%; 
    left: 0;
    right: 0;
    margin: -200px auto 0;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}

.img-convite-pop {
    max-width: 700px;
    margin: 0 auto;
}

.img-convite-pop img {
    width: 100%
}


.close-icon {
    position: absolute;
    right: 0;
    top: -70px;
    font-size: 24px;
    color: #fff;
}

.close-icon i {
    color: #f00;
}


#close-to-popup {
    display: initial;
}
/*############################################*/