/*@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');*/

*, *::after, *::before{
    box-sizing:border-box;
}

/*body {
    background-color: #fff;
    color: #ffffff;
    font-family:Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin:0;
}*/

.modal{
    position: fixed;
    background-color: #ffffff;
    color: saddlebrown;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: 200ms ease-in-out ;
    -moz-transition: 200ms ease-in-out ;
    transition: 200ms ease-in-out ;
    border:1px solid black ;
    border-radius:10px ;
    z-index: 10;
    margin: 0 10% ;
    padding: 0 30%;
    max-width: 80%;
    width: 600px;
    
    max-height: 60%;    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);       
 
}

.modal.active {
    transform: translate(-50%, -50%) scale(1);
}
.modal-header {
    background-color: url(assets/images/LentsweRamotsei_LoftProfile3.jpg);
    color: #ffffff;
    padding: 10px 15px;
    display: inline-flex;
    justify-content: space-between;
    text-align: center;
    border-bottom: 1px solid black;
}
/*img {
    width: 50px;
}*/
.modal-header .title {
    width: 100%;
    font-size: 1.25rem;
    font-weight: bold;
}
.modal-header .close-button {
    cursor: pointer;
    font-weight: bold;
}
.modal-body {
    cursor: pointer;
    font-weight: bold;
    font-size: 4rem;
    line-height: 5rem;
    padding: 0 10%;
    opacity: 1;
    background-color: saddlebrown;
}
#overlay {
    position: fixed;
    opacity: 1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    /*background-color: rgba(0, 0, 0, 0.8);*/
    -webkit-transition: 200ms ease-in-out ;
    -moz-transition: 200ms ease-in-out ;
    transition: 200ms ease-in-out ;
    pointer-events: none;
}

#overlay.active {
    opacity: 1;
    pointer-events: all;
}
.modal_content{
    padding: 0 20px ;
}
.shape{
    width: 100%;
    height: 400px;
    background: linear-gradient(to bottom, #272727, #ed528d);
    
    position:absolute;
    clip-path:ellipse(150px 150px);
}

/*button #close_lentswe #close_moroka {
    width: 300px;
    height: 50px;
    background-color: #e99c2e;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    padding: 10px 25px;
    margin: 3px;

}*/


/*#modal_container_lentswe, .modal_container, #modal_container_moroka
.modal_content{
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;

    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family:Arial, Helvetica, sans-serif;
    min-height: 100vh;
    margin:0;

    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;

}*/
/*#modal_container_morokal,*/
/*modal_container.show{
    pointer-events: auto;
    opacity: 1;
}*/