body{
    margin: 0;
  }
  .nature  img{
    width:100%;
  }
  .carousel-img{
    width: 100%;
    height: 40em;
    object-fit:cover;
    object-position:center;
  }

  .nature  span{
    color:#1565c0;
  }
 a .button, .btn{
    border: 1px solid transparent;
    padding: 0.5rem .5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    display: block !important;
    color:white !important;
    border: 1px solid white !important;
  }
 a:hover,a:hover .btn, a:hover .button{
    color: #474747 !important;
    background-color: white !important;
    border:none !important;
    cursor:pointer;
  }
 .text{
    font-size: 5.1vw; 
    margin-bottom: 3.5vw;
}
 .text-second{
    font-size: 1.15vw;
    color:white;
    padding: 1vw ;
    margin-bottom: 3.3vw;
}
 h5 p {
    margin-top: .25vw;
}
  .mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
  }

  .modal{
    font-size: 15px;
    text-align: justify;
  }
  .modal-header{
    color: white;
    background-color: #1565c0;
  }
  .modal-body ul li:hover{
    cursor: pointer;
    color:#c0c0c0;
  }
  .modal-body ul.ul-certificado li{
    list-style-type: none;
  }
  .modal-body ul.ul-certificado-home li{
    list-style-type: none;
    transform: translateX(0) !important;
  }
  .btn-close{
    position: relative;
    left: -.6em !important;
    width: 2em !important;
  }
  .btn-close:hover,  .btn-close:active, .btn-close:focus{
    outline: none !important;
    border: none !important;
  }
  .modal-footer button{
    position: relative;
    left: -1em !important;
    top: 0em !important;
    padding: .2em 0em !important;
    background-color:white !important;
    color:#1565c0 !important;
    border: 1px solid #1565c0 !important;
    width: 5em;
  }
  .modal-footer button:hover{
    background-color:#1565c0 !important;
    color:white !important;
  }
  .container-contacto{
    /*margin-top: 5vh;*/
    width: 100%;
    /*background-color:#c0c0c0; /*var( --global-color-principal);*/
    color:black !important;
  }
  .form-control:focus,select:focus {
    border: .14em solid #5ea1ed !important;
    outline: 0;
    box-shadow:none !important;
  }

  .contacto-gride-info a{
    text-decoration: none;
  }
  .contacto-gride-info  b {
    color: #c0c0c0;/* var( --global-color-secondary)/* #c0c0c0;*/
   }
   .contacto-gride-info h1{
      margin-bottom: 2.5vw;
   }
   .contacto-gride-info h3{
        font-weight: 600 !important;
   }
   .contacto-gride-whatsaap{
    margin-left: 2vw;
   }
  .icon-contacto{
    color:#c0c0c0 !important;
  }
  
  .contacto-gride-whatsaap button{
    transform:translateY(.5vh);
    padding: .5vw .3vw;
    background-color: #0069cc;
    color:white;
    width: 35%;
    font-size: 15px;
  }
  
  .contacto-gride-whatsaap button:hover{
    background-color:#1565c0!important; /* #146c43;*/
    color:white;
  }
  .contacto-gride-whatsaap input, .contacto-gride-whatsaap textarea{
    width: 100%;
    font-size: 14px;
  }
  .contacto-gride-whatsaap textarea{
    height: 13vh;
  }

  .modal-body .col:nth-of-type(2){
    width: 70%;
  } 
  .modal-body .form-name input, .modal-body .form-email input{
    width:49%;
  }
  .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
  .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
  .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2),
  .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2){
   position: relative;
   left: 50%;
   top:-9.8vh;
  }
  .form-email{
    margin-top: -3.5em;
    margin-bottom: -3.5em !important;
  }
  #service-1, #service-2,#service-3,
  #service-4,#service-5,#service-6,
  #service-7{
    display: none;
  }

  .dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color:  #d9d9d9;
    border-radius: 50%;
    display: inline-block;
    margin-top: 1.2em;
    transition: background 0.6s ease;
  }
  
  .active, .dot:hover,.dot:focus,.dot:visited, .dot:active {
    background-color: #ffffff !important;
  }

  @media (max-width:320px) {
    .nature img{
      width: 100% !important;
    }
    .nature  a .button,div.nature a.btn{
      padding: .4em .1em !important;
      font-size: .65em;
      line-height: 1em;
      border-radius: 0.5em;
      width:9em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 6em;
      left: .5em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 6em;
      left: .5em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 6em;
      left:6.3em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 5.2em;
      left: .4em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:6.3em;
      left:.3em;
    }
    .modal-dialog {
      width: 100% !important;
      margin: 0 !important;
    }
    h1{
      font-size: 20px !important;
    }
    h5{
      font-size: 16px !important;
    }
    p,label{
      font-size: 13.5px !important;
    }
    .nature .row .col{
      min-width: 100% !important;
      padding: 0;
    }
    .modal-body .col:nth-of-type(2) .form-name input,
    .modal-body .col:nth-of-type(2) .form-email input{
      width:100%;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2){
     position: relative;
     left: 0;
     top:0;
    }
    .form-email{
      margin-top: 0;
      margin-bottom: .8em !important;
    }
    .nature span:before{
       margin-bottom: -1em;
    }
    .nature p{
     padding-bottom: 0 !important;
    }
    .contacto-gride-whatsaap button{
      transform:translateY(.5vh);
      padding: .5em 0;
      text-align: center;
      width: 48%;
      font-size: 13.5px;
    }
    .modal-footer button{
      font-size: 13.5px;
      padding: .2em 0em !important;
      background-color:white !important;
      color:#1565c0 !important;
      border: 1px solid #1565c0 !important;
      width: 5em;
    }
    .dot {
      display: none;
    }
  }
  @media  (min-width: 321px) and (max-width: 399px) {
    .nature img{
      width: 100% !important;
    }
    .nature  a .button,div.nature a.btn{
      padding: .4em .1em !important;
      font-size: .65em;
      line-height: 1em;
      border-radius: 0.5em;
      width:9em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 6.9em;
      left: .5em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 6.9em;
      left: .5em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 6.9em;
      left:7.6em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 6.1em;
      left: .4em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:7em;
      left:.3em;
    }
    .modal-dialog {
      width: 100% !important;
      margin: 0 !important;
    }
    h1{
      font-size: 20px !important;
    }
    h5{
      font-size: 16px !important;
    }
    p,label{
      font-size: 13.5px !important;
    }
    .nature .row .col{
      min-width: 100% !important;
      padding: 0;
    }
    .modal-body .col:nth-of-type(2) .form-name input,
    .modal-body .col:nth-of-type(2) .form-email input{
      width:100% ;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2){
     position: relative;
     left: 0;
     top:0;
    }
    .form-email{
      margin-top: 0;
      margin-bottom: .8em !important;
    }
    .nature span:before{
       margin-bottom: -1em;
    }
    .nature p{
     padding-bottom: 0 !important;
    }
    .contacto-gride-whatsaap button{
      transform:translateY(.5vh);
      padding: .5em .3vw;
      background-color: #0069cc;
      color:white;
      width:43%;
      font-size: 13.6px;
    }
    .dot {
      height: 10px;
      width: 10px;
      margin: 0 1px;
      margin-top: 0;
    }
  }

  @media (min-width: 400px) and (max-width: 575px) {
    .nature img{
      width: 100% !important;
    }
    .nature  a .button,div.nature a.btn{
      padding: .4em .3em !important;
      font-size: .8em;
      line-height: .7;
      border-radius: 0.5em;
      width:8em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 8.1em;
      left: .9em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 8.1em;
      left:.9em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 8em;
      left:8.8em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 7em;
      left: .4em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:8.7em;
      left:.5em;
    }
    .modal-dialog {
      max-width: 100%;
      margin: 0;
    }
    h1{
      font-size: 20px !important;
    }
    h5{
      font-size: 16px !important;
    }
    p,label{
      font-size: 13.5px !important;
    }
    .nature .row .col{
      min-width: 100% !important;
      padding: 0%;
    }
    .contacto-gride-whatsaap input, .contacto-gride-whatsaap textarea, .form-select{
      width: 80%;
      font-size: 14px;
    }
    .contacto-gride-whatsaap textarea{
      height: 13vh;
    }
    .modal-body .col:nth-of-type(2) .form-name input{
      width:80%;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2){
     position: relative;
     left: 0;
     top:0;
    }
    .form-email{
      margin-top: 0;
    }
    .nature span:before{
       margin-bottom: -1em;
    }
    .nature p{
     padding-bottom: 0 !important;
    }
    .contacto-gride-whatsaap button{
      transform:translateY(.5vh);
      padding: .6em .3vw;
      background-color: #0069cc;
      color:white;
      width: 39%;
      font-size: 13.5px;
    }
    .dot {
      display: none;
    }

  }
  @media (min-width: 576px) and (max-width: 767px) {
    .nature img{
      width: 100% !important;
    }
    .nature  a .button,div.nature a.btn{
      padding: .57em .4em !important;
      font-size: .8em;
      line-height: .7;
      border-radius: 0.5em;
      width:8em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 11em;
      left: .9em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 11em;
      left:.9em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 11em;
      left:12.8em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 9em;
      left: .4em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:11em;
      left:.5em;
    }
    .modal-dialog {
      max-width: 100%;
      margin: 0;
    }
    h1{
      font-size: 20px !important;
    }
    h5{
      font-size: 16px !important;
    }
    p,label{
      font-size: 13.5px !important;
    }
    .nature .row .col{
      min-width: 100% !important;
      padding: 0% 12%;
    }
    .nature .row .col:nth-of-type(2){
      padding: 0% 16%;
    }
    .contacto-gride-whatsaap input, .contacto-gride-whatsaap textarea, .form-select{
      width: 92% !important;
      font-size: 14px;
    }
    .contacto-gride-whatsaap textarea{
      height: 13vh;
    }
    .modal-body .col:nth-of-type(2) .form-name input{
      width:92%;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2){
     position: relative;
     left: 0;
     top:0;
    }
    .form-email{
      margin-top: 0;
      margin-bottom: 1em !important;
    }
    .nature span:before{
       margin-bottom: -1em;
    }
    .nature p{
     padding-bottom: 0 !important;
    }
    .contacto-gride-whatsaap button{
      transform:translateY(.5vh);
      padding: .6em .3vw;
      background-color: #0069cc;
      color:white;
      width: 33%;
      font-size: 13.5px;
    }
    .dot {
      height: 10px;
      width: 10px;
      margin: 0 1px;
      margin-top: 0;
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .nature img{
      width: 100% !important;
    }
    .nature  a .button,div.nature a.btn{
      padding: .6em .3em !important;
      font-size: .85em;
      line-height: .7;
      border-radius: 0.5em;
      width:8em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 14.5em;
      left: 1.5em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 14.5em;
      left: 1.2em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 14.5em;
      left:15.4em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 12.5em;
      left: .8em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:15em;
      left:1em;
    }
    .modal-dialog {
      max-width: 100%;
      margin: 0;
    }
    
    p,label{
      font-size: 14px !important;
    }
    
    .contacto-gride-whatsaap input, .contacto-gride-whatsaap textarea, .form-select{
      width: 90% !important;
      font-size: 14px;
    }
    .contacto-gride-whatsaap textarea{
      height: 5em !important;
    }
    .modal-body .col:nth-of-type(2) .form-name input{
      width:90%;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2){
     position: relative;
     left: 0;
     top:0;
    }
    .form-email{
      margin-top: 0;
      margin-bottom: .8em !important;
    }
    .nature span:before{
       margin-bottom: -1em;
    }
    .nature p{
     padding-bottom: 0 !important;
    }
    .contacto-gride-whatsaap button{
      transform:translateY(.5vh);
      padding: .6em .3vw;
      background-color: #0069cc;
      color:white;
      width: 39%;
      font-size: 13.5px;
    }
    .dot {
      height: 11px;
      width: 11px;
      margin: 0 2px;
      margin-top:0em;
    }

  }
  @media (min-width: 992px) and (max-width:1023px){
    .nature img{
      width: 100% !important;
    }
    .nature  a .button,div.nature a.btn{
      padding: .7em .37em !important;
      font-size: .96em;
      line-height: .7;
      border-radius: 0.5em;
      width:8em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 18.8em;
      left: 2em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 18.8em;
      left: 1.7em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 18.5em;
      left:20em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 15.7em;
      left: 1em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:19em;
      left:1em;
    }
    .modal-dialog {
      max-width: 90%;
    }
    .contacto-gride-whatsaap textarea{ /* .modal-body .form-email input*/
      height: 15vh;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2){
     position: relative;
     left: 50%;
     top:-14.2vh;
    }
    .modal-footer button{
      padding: .2em 0em !important;
      width: 5em;
    }
    
  }
    @media (min-width: 1024px) and (max-width:1200px)  {
      .nature img{
        width: 100% !important;
      }
      .nature  a .button,div.nature a.btn{
        padding: .56em .35em !important;
        font-size: .98em;
        line-height: 1;
        border-radius: 0.5em;
        width:9em !important;
      }
      .carousel-caption-1 {
        position: absolute;
        top: 19.5em;
        left: 2em;
      }
     
      .carousel-caption-2 {
        position: absolute;
        top: 19.5em;
        left: 1.7em;
      }
      .carousel-caption-3 {
        position: absolute;
        top: 19.2em;
        left:21em;
      }
      .carousel-caption-4 {
        position: absolute;
        top: 16.2em;
        left: 1em;
      }
      .carousel-caption-5 {
        position: absolute;
        top:20em;
        left:1em;
      }
      .modal-dialog {
        max-width: 85%;
      }
      .contacto-gride-whatsaap textarea{
        height: 15vh;
      }
      .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
      .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
      .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2), 
      .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2){
       position: relative;
       left: 50%;/**/
       top:-13.5vh;/*-16vh*/
      }
      .modal-footer button{
        padding: .2em 0em !important;
        width: 5em;
      }
  }

  @media (min-width: 1200px) and (max-width:1299px)  {
    .nature  a .button,div.nature a.btn{
      padding: .7em .5em !important;
      font-size: .9em;
      line-height: 1;
      border-radius: 0.5em;
      width:9em !important;
    }
    .carousel-caption-1 {
      position: absolute;
      top: 23.7em;
      left: 3em;
    }
   
    .carousel-caption-2 {
      position: absolute;
      top: 23.7em;
      left: 2em;
    }
    .carousel-caption-3 {
      position: absolute;
      top: 23em;
      left:24em;
    }
    .carousel-caption-4 {
      position: absolute;
      top: 20em;
      left: 1em;
    }
    .carousel-caption-5 {
      position: absolute;
      top:24.9em;
      left:1.8em;
    }
    .modal-dialog {
      max-width: 85%;
    }
    .contacto-gride-whatsaap button{
      width: 31%;
    }
    .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
    .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2), 
    .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2){
      position: relative;
      left: 50%;/**/
      top:-12vh;/*-16vh*/
    }
}
@media (min-width: 1300px) and (max-width:1399px)  {
  .nature  a .button,div.nature a.btn{
    padding: .7em .5em !important;
    font-size: .9em;
    line-height: 1;
    border-radius: 0.5em;
    width:9em !important;
  }
  .carousel-caption-1 {
    position: absolute;
    top: 25em;
    left: 3em;
  }
 
  .carousel-caption-2 {
    position: absolute;
    top: 25em;
    left: 2em;
  }
  .carousel-caption-3 {
    position: absolute;
    top: 25em;
    left:27em;
  }
  .carousel-caption-4 {
    position: absolute;
    top: 22em;
    left: 1em;
  }
  .carousel-caption-5 {
    position: absolute;
    top:25.9em;
    left:1.8em;
  }
  .modal-dialog {
    max-width: 85%;
  }
  .contacto-gride-whatsaap button{
    width: 31%;
  }
  .modal-body .col:nth-of-type(2) .form-name input:nth-of-type(2), 
  .modal-body .col:nth-of-type(2) .form-name label:nth-of-type(2),
  .modal-body .col:nth-of-type(2) .form-email input:nth-of-type(2), 
  .modal-body .col:nth-of-type(2) .form-email label:nth-of-type(2){
    position: relative;
    left: 50%;/**/
    top:-11.2vh;/*-16vh*/
  }
}
@media(min-width:1400px){
  .carousel-caption-1 {
    position: absolute;
    top: 31.8em;
    left: 3.3em;
  }
 
  .carousel-caption-2 {
    position: absolute;
    top: 31.8em;
    left: 2em;
  }
  .carousel-caption-3 {
    position: absolute;
    top: 31.3em;
    left:33.5em;
  }
  .carousel-caption-4 {
    position: absolute;
    top: 27em;
    left: 1em;
  }
  .carousel-caption-5 {
    position: absolute;
    top:34.5em;
    left:2em;
  }
  .modal-dialog {
    max-width: 60%;
  }
}