/* ------ MODAL CSS -----------*/
.modal{
    display: none;
    /* display: block; */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5)
}
.modal-content {
    margin: 100px auto;
    padding: 0 0% 0% 0%;
    max-width: 40%;  /*- centraliza --*/
    box-shadow: 
        0 5px 8px rgba(0,0,0,0.2),
        0 7px 20px 0 rgba(0,0,0,0.2);
    animation-name: modalopen;
    animation-duration: 1s;
}

.modal-body {
    background-color: #fff;
    text-align: justify;
    padding: 10px 25px 30px 25px;
}


.modal-header{
    background: #1f5a57;
    padding: 20px;
    color: #fff;
}
.modal-header h2,
.modal-header h3{
    margin: 0;
}

.modal-footer{
    background: #1f5a57;
    padding: 01px;
    color: #fff;
    text-align: center;
    line-height: 1;
}

.closeBtn1,
.closeBtn2,
.closeBtn3,
.closeBtn4,
.closeBtn5,
.closeBtn6,
.closeBtn7,
.closeBtn8,
.closeBtn9,
.closeBtn10,
.closeBtn11,
.closeBtn12,
.closeBtn13,
.closeBtn14,
.closeBtn15,
.closeBtn16 {
    color: #f4f4f4;
    float: right;
    font-size: 40px;
    line-height: 1;
    margin-top: -6px;
    cursor: pointer;
}
.closeBottomBtn1,
.closeBottomBtn2,
.closeBottomBtn3,
.closeBottomBtn4,
.closeBottomBtn5,
.closeBottomBtn6,
.closeBottomBtn7,
.closeBottomBtn8,
.closeBottomBtn9,
.closeBottomBtn10,
.closeBottomBtn11,
.closeBottomBtn12,
.closeBottomBtn13,
.closeBottomBtn14,
.closeBottomBtn15,
.closeBottomBtn16 {
    color: #f4f4f4;
    float: right;
    font-size: 30px;
    line-height: 1.2; /* -- use here to adjust vertical position --*/
    margin-top: 9px;
    margin-right: 17px;
}

.closeBtn1:hover, .closeBtn1:focus,
.closeBtn2:hover, .closeBtn2:focus,
.closeBtn3:hover, .closeBtn3:focus,
.closeBtn4:hover, .closeBtn4:focus,
.closeBtn5:hover, .closeBtn5:focus,
.closeBtn6:hover, .closeBtn6:focus,
.closeBtn7:hover, .closeBtn7:focus,
.closeBtn8:hover, .closeBtn8:focus,
.closeBtn9:hover, .closeBtn9:focus,
.closeBtn10:hover, .closeBtn10:focus,
.closeBtn11:hover, .closeBtn11:focus,
.closeBtn12:hover, .closeBtn12:focus,
.closeBtn13:hover, .closeBtn13:focus,
.closeBtn14:hover, .closeBtn14:focus,
.closeBtn15:hover, .closeBtn15:focus,
.closeBtn16:hover, .closeBtn16:focus,
.closeBottomBtn1:hover, .closeBottomBtn1:focus,
.closeBottomBtn2:hover, .closeBottomBtn2:focus,
.closeBottomBtn3:hover, .closeBottomBtn3:focus,
.closeBottomBtn4:hover, .closeBottomBtn4:focus,
.closeBottomBtn5:hover, .closeBottomBtn5:focus,
.closeBottomBtn6:hover, .closeBottomBtn6:focus,
.closeBottomBtn7:hover, .closeBottomBtn7:focus,
.closeBottomBtn8:hover, .closeBottomBtn8:focus,
.closeBottomBtn9:hover, .closeBottomBtn9:focus,
.closeBottomBtn10:hover, .closeBottomBtn10:focus,
.closeBottomBtn11:hover, .closeBottomBtn11:focus,
.closeBottomBtn12:hover, .closeBottomBtn12:focus,
.closeBottomBtn13:hover, .closeBottomBtn13:focus,
.closeBottomBtn14:hover, .closeBottomBtn14:focus,
.closeBottomBtn15:hover, .closeBottomBtn15:focus,
.closeBottomBtn16:hover, .closeBottomBtn16:focus {
    color: #34b0a9;
    text-decoration: none;
    cursor: pointer;
}


.modal-content h1{ font-size: 21px; font-weight: 400; line-height: 1.6; }
.modal-content h2{ font-size: 19px; font-weight: 400; line-height: 1.6; }
.modal-content h3 { font-size: 16px; font-weight: 500; line-height: 1.6; color: #1f5a57; }
.modal-content h4 { font-size: 19px; font-weight: 400; line-height: 1.6; margin: 0;}
.modal-content h5,
.modal-content h6 { font-size: 11px; font-weight: 400; line-height: 1.6; }
.modal-content p { font-size: 13px; font-weight: 400; line-height: 1.6; }
.modal-content li { font-size: 13px; font-weight: 400; line-height: 1.6; }
.modal-content .first-indent ul,
.modal-content .first-indent li { line-height:1.6; text-align: left; }
.modal-content .second-indent li { font-size: 12px; font-weight: 400; line-height: 1.6; text-align: left; }

/*--- styling the bullets ----*/
.modal-content ul { list-style: none; }/* Remove default bullets */
.modal-content ul li::before {
  content: "\25CF";  /* Add content: \2022 is the CSS Code/unicode for a bullet, changed to bigger dot 25CF */
  color: #34b0a9; /* Change the color */
  /*font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.3em; /* Also needed for space (tweak if needed) */
  margin-left: -1.3em; /* Also needed for space (tweak if needed) */
}

@keyframes modalopen{
    from{opacity: 0}
    to {opacity: 1}
}
/* banner */
.modal-img-container{
    margin-top: 10px;
    padding: 0;
}
.modal-img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.first-indent{ margin-left: 0px; padding-left: 20px;  }
.second-indent{ margin-left: 0px; padding-left: 20px; }

/* ------ END MODAL CSS -----------*/
/* -- MEDIA QUERIES --*/
/* -- media query tip.. to test breakpoint use body{display:none;} and test size of screen. 
      A blank page will be displayed until breaking point is reached --*/

/* -- body{display:none;} --*/

/* -- MQ 1 -- Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 599px) {

    .modal-content {
        max-width: 84%;  /*- centraliza --*/
    /*    margin: 100px auto;
        padding: 0 0% 0% 0%; 
        box-shadow: 
            0 5px 8px rgba(0,0,0,0.2),
            0 7px 20px 0 rgba(0,0,0,0.2);
        animation-name: modalopen;
        animation-duration: 1s; */
    }

    .modal-body {
        /*ackground-color: #fff;
        text-align: justify;
         padding: 10px 25px 30px 25px; */
        padding: 8px 20px 25px 20px;
    }
    
    /*
    .modal-header{
        background: #1f5a57;
        padding: 20px;
        color: #fff;
    }
    .modal-header h2,
    .modal-header h3{
        margin: 0;
    }

    .modal-footer{
        background: #1f5a57;
        padding: 01px;
        color: #fff;
        text-align: center;
        line-height: 1;
    }
*/
    
    #brief-seguros .modal-content h1{ font-size: 21px; font-weight: 400; line-height: 1.6; }
    #brief-seguros .modal-content h2{ font-size: 19px; font-weight: 400; line-height: 1.6; }
    #brief-seguros .modal-content h3 { font-size: 16px; font-weight: 500; line-height: 1.6; color: #1f5a57; }
    #brief-seguros .modal-content h4 { font-size: 17px; font-weight: 400; line-height: 1.6; margin: 0;}
    #brief-seguros .modal-content h5,
    #brief-seguros .modal-content h6 { font-size: 11px; font-weight: 400; line-height: 1.6; }
    #brief-seguros .modal-content p { font-size: 12px; font-weight: 400; line-height: 1.6; }
    #brief-seguros .modal-content li { font-size: 13px; font-weight: 400; line-height: 1.6; }
    #brief-seguros .modal-content .first-indent ul,
    #brief-seguros .modal-content .first-indent li { line-height:1.6; text-align: left; }
    #brief-seguros .modal-content .second-indent li { font-size: 12px; font-weight: 400; line-height: 1.6; text-align: left; }

    /*--- styling the bullets ----*/
     #brief-seguros .modal-content ul { list-style: none; }/* Remove default bullets */
     #brief-seguros .modal-content ul li::before {
      content: "\25CF";  /* Add content: \2022 is the CSS Code/unicode for a bullet, changed to bigger dot 25CF */
      color: #34b0a9; /* Change the color */
      /*font-weight: bold; /* If you want it to be bold */
       display: inline-block; /* Needed to add space between the bullet and the text */
       width: 1.3em; /* Also needed for space (tweak if needed) */
       margin-left: -1.3em;  /* Also needed for space (tweak if needed) */
     }
    /*
    #brief-seguros .modal-content ul li ul li::before { margin-left: -5em; } 
      */  

    .closeBtn1,
    .closeBtn2 {
        color: #f4f4f4;
        float: right;
        font-size: 40px;
        line-height: 1;
        margin-top: -6px;
        cursor: pointer;
    }


}
/* -- MQ 2 -- Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
    .modal-content { max-width: 70%; } /*- centraliza --*/
    .modal-body { padding: 8px 20px 25px 20px; }
     #brief-seguros .modal-content ul li::before {
         content: "\25CF"; } /* Add content: \2022 is the CSS Code/unicode for a bullet, changed to bigger dot 25CF */
    
}

/* -- MQ 3 -- Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    
    .modal-content { max-width: 50%; } /*- centraliza --*/
}

/* -- MQ 4 -- Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
    .modal-content { max-width: 50%; } /*- centraliza --*/
}

/* -- MQ 5 -- Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
    .modal-content { max-width: 40%; margin: 130px auto; } /*- centraliza --*/
}

/* -- MQ 6 -- Very wide devices (large monitors, 1920px and up) */
@media only screen and (min-width: 1920px) {
    
    .modal-content { max-width: 33%; margin: 130px auto; } /*- centraliza --*/
    
}