<style>

    body.modal-open {
  overflow: hidden;
}
   
    .btn-modal {
      background-color: #0c4b75;
      color: white;
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    } 
    .modal-root {
        position: fixed; 
        width: 0px; 
        height : 0px;
        overflow: hidden;
        left : 0;
        top: 0;
        opacity: 0;
        transition: opacity 0.15s ease-out, width 0s linear 0.15s, height 0s linear 0.15s;
        background-color: rgba(0, 0, 0, 0.4);
        }

    .modal-root.visible { 
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: opacity 0.7s ease-out;
        z-index: 1000
        }
        /* Esse background  MODAL */
    .modal {
        margin: 0 auto; 
        padding:  0px;
        border-radius: 5px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        height: -moz-calc(100% - (20px + 30px));
        height: -webkit-calc(100% - (20px + 30px));
        height: calc(100% - (20px + 30px));
        overflow-y: auto;
         background-color: white;
        }
 
  
    .modal-content {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    .modal-todos { 
        width: 91%; 
    }
    .modal-header {
        padding: 0;
        margin: 0;

        margin-top:0px;
        padding-top: 0px;
        width: 100%;
        height:7%; 

        background-image :linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%); 
         }

   .menu_titulo {
        margin-top:0px;
        font-size: 2.4vh; 
        height: 100%;
        line-height: auto%;
        text-align: center; 

         }

    .img_header_modal {
        width:13%;
    }
    
    .span_modal_title {
        margin-top: 2%; 
        width:85%;
        position:relative; 
        float:left;
    }

    .modal{
        display: block !important;
    }
    .modal-dialog{
      overflow-y: initial !important
    }
    .modal-body{  
     width: 100%;
      height: 86%;
      overflow-y: auto; 
    }
     
    .modal{
        display: block !important;
    }

    .modal-dialog{
      overflow-y: initial !important
    } 
 
    .modal_content_body{
        width:100%;
        margin-left:0%;
        margin-top: 30px; 
        text-align: left; 
     }


    .modal_text {
        width:90%;
        margin-left:5%;
        margin-top: 30px; 
        text-align: left; 
     }


 

    .modal_content_body {
        width:90%;
        margin-left:5%;
        margin-top: 30px; 
        text-align: left; 
     }





 .modal-footer  {
        text-align: left;
        position: relative;
        float: left;
        width:100%;
        margin-bottom: 0px;
        height: 7%;  
        background-image :linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%); 
    }

    
    .modal_closer_bottom {
        visibility: visible;
        width: 35%;
        position: relative; float: left;
        margin-top: 0px;
        visibility: hidden;
        z-index: 1001;}

        .vermas_mostrador {
        line-height: auto;
        padding-top: 10px;
        margin-top: 0px;
        width: 65%;  
        position: relative; float: left;
        vertical-align: text-bottom;}

    .modal-topic h5{ font-size: 3.5vh;}
    
    .modal-topic p{ text-align:left; width:90%; margin-left:5%; }





 @media screen and (min-width: 1000px)
 { 


     .img_principal_modal {
        width:25%;
        height: auto;
        margin-top: 30px; 
        content:url(img/img_about_land.jpg);
        position:fixed;
        float:left;
        top:10%;
        left: 10%; 
        padding-left:10px;
    }
 
 .modal_content_body { 
        width:65%; 
        margin-top: 5%;  
        padding-left:10%; 
        height:1000px;
     }   


 .modal_text { 
        width:65%; 
        margin-top: 5%;  
        padding-left:10%; 
        height:1000px;
     }   
    

    .span_about_end { height: 270px; position: relative; float: left;  }


    .modal-root {
        position: fixed; 
        width: 0px; 
        height : 0px;
        overflow: hidden;
        left : 0;
        top: 0;
        opacity: 0;
        transition: opacity 0.15s ease-out, width 0s linear 0.15s, height 0s linear 0.15s;
        background-color: rgba(0, 0, 0, 0.4);
        }

    .modal-root.visible { 
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: opacity 0.7s ease-out;
        z-index: 1000
        }
        /* Esse background  MODAL */
    .modal {
        margin: 0 auto; 
        padding:  0px;
        border-radius: 5px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        height: -moz-calc(90% - (20px + 30px));
        height: -webkit-calc(90% - (20px + 30px));
        height: calc(90% - (20px + 30px));
        overflow-y: auto;
         background-color: white;
        }
 
  
    .modal-content {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    .modal-todos { 
        width: 91%; 
    }
   


    

    .modal{
        display: block !important;
    }
    .modal-dialog{
      overflow-y: initial !important
    }

     .modal-header {
        padding: 0;
        margin: 0;

        margin-top:0px;
        padding-top: 0px;
        width: 100%;
        height:10%; 

        background-image :linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%); 
         }

    .modal-body{

     width: 100%;
      height: 84%;
      overflow-y: auto; 
    }
     

 .modal-footer  {
        text-align: left;
        position: relative;
        float: left;
        width:100%;
        margin-bottom: 0px;
        height: 6%;  
        background-image :linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%); 
    }

    .modal{
        display: block !important;
    }

    .modal-dialog{
      overflow-y: initial !important
    } 
 
    


    
    

    .modal-topic h5{ font-size: 3.5vh;}
    
    .modal-topic p{ text-align:left; width:90%; margin-left:5%; }
}







  </style>