/* 
    Created on : 26/nov/2018, 22:55:57
    Author     : fernandasousa
*/

.button{
    background-color: coral;
    padding: 1em 2em;
    color:#fff;
    border:0;
}
.button:hover{
    background-color: #333;
}

.w-div{
    width:100%; 
    height:auto
}
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 100%;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 0;
    margin-left: 0;
}
/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
/* ------------------------------------------------------- */
/* VER MAIS...                                             */
/* ------------------------------------------------------- */
.modal{
    display: none;
    position:fixed;
    z-index:1;
    left:0; 
    top:0;
    height:100%;
    width:100%;
    overflow:auto;
    background-color: rgba(0,0,0,0.5);
    overflow-x:hidden;
    overflow-y:auto;
}

.modalBtn{
    color: #4CAF50;
}

.modal-content{
    background-color: #f4f4f4;
    margin:20% auto;
    padding:20px;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17);
    animation-name: modalopen;
    animation-duration: 1s;
}
.modal-header{
    background-color: #4CAF50;
    color:#fff;
}
.modal-header h2, .modal-footer h3{
    margin:0;
}
.modal-boby{
    padding:10px 20px;
}
.modal-footer{
    background-color: #4CAF50;
    color:#fff;
}
.closeBtn1{
    color:#fff;
    float:right;
    font-size:30px;
    padding-right: 10px;
}
.closeBtn1:hover,.closeBtn1:focus{
    color:#000;
    text-decoration:none;
    cursor:pointer;
}
.show{
    display: block;
}
@keyframes modalopen{
    from{ opacity: 0}
    to {opacity:1}
}