:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #FFD333;
    --secondary: #F5F5F5;
    --success: #28a745 !important;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #FFFFFF;
    --dark: #3D464D;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Roboto", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }


body{
    font-family: 'Roboto' !important;
    }

.bg-verde{
    background-color: #fff;
} 
.text-d{
    color: black !important;
} 

.bg-purple{
    background-color: var(--purple);
}  
.text-verde{
    
    color:green;
}    

.sinboton
{
    border: none;
    background-color: transparent;

}


.txtcon{
  position: relative;
  display: inline-block;
  /*text-align: center;*/
}
.txt-sub{
  --triangle-shape: polygon(0% 0, 100% 0%, 0 13%);
  --gradient: linear-gradient(#163479, indigo);
  /*163479 indigo*/
  background: var(--gradient);
  width:90px;
  height: 300px;
  clip-path: var(--triangle-shape);
  border-radius:5px;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 2px 0 0 5px;
  text-align: left;
  font-size: 14px;
  color:#fff;
  /*background-color: #28a745;*/
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: #194376;
}



/* carusel*/





.carousel-indicators .active {
  width: 30px !important;
  /*background: #2b2b2a ;*/
}

.carousel-indicators .active {
  opacity: 1;
}
.carousel-indicators li {
  width: 15px !important;
  height: 15px !important;
  border: 0px solid #ffffff !important;
  background: #019149 !important ;
  transition: .5s;
/*  margin: 0 3px 12px 3px;*/
}






 .position-absolutea {
    position: absolute;
    background-image: url("img/aa.jpg");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .position-absoluteb {
    position: absolute;
    background-image: url("img/bb.jpg");
    background-size: cover;
  }



  .position-absolutec {
    position: absolute;
    background-image: url("img/cc.jpg");
    background-size: cover;
  }


  .carousel-item{

    height: 370px;
  }


  


.texta{
    font-family:verdana;
  font-size:40px;
  color:white;
  text-shadow: 1px  2px 0px GREEN,
               2px  1px 0px GREEN,
              -1px  0px 0px GREEN,
               0px -1px 0px GREEN;
}

.textb{
    font-family:verdana;
  font-size:50px;
  color:white;
  text-shadow: 1.2px  0px 0px green,
               0px  1.2px 0px green,
              -1.2px  0px 0px green,
               0px -1.2px 0px green;
}




/* fin carusel*/



.bw{
    position:fixed;
    width:50px;
    height:50px;
    line-height: 50px;
    bottom:20px;
    right:20px;
    background:green;
    color:#FFFFFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.7);
    z-index: 1;
}






/*    Galeria    */

h1 {
    color:#003366;
    font-size: 30px;
    font-size:3rem;
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
}

.hh {
    color:#003366 !important;
    
    
}

a {
    text-decoration: none;
    /*color:#036;*/
    color:#000 !important;
}


.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    grid-auto-rows: 360px;
    max-width:960px;

    margin: 1rem auto;
    padding:20px 10px 20px 10px;
    box-sizing: border-box;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    
  }



.columna {
    background:#fff;
    border-radius:5px;
    border:1px solid #ccc;
    margin:0 0 20px 0;
    text-align: center;
    max-width: 100%;
    height: 350px;
    

    
    box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.0),
          0 0  0 2px rgb(255,255,255),
          0.5em 0.5em 1em rgba(0,0,0,0.2);
}



/* este codigo cambio para la imagen*/
.columna #img {
    width:100%;
    height: 100% !important;
}


.columna:hover {
    transition: .0s ease;
    filter: opacity(100%);
    transform: scale(1.1);
    
}



figure {
    padding:1rem;
    box-sizing: border-box;
    
}
.nombre{
   /* background-color: red;*/
    height: 58px;
    font-size: 17px !important;
}
.precio{
    padding: 0px 0 5px 0;
    font-weight:900;
    font-size: 20px !important;
 }

figcaption{
    height:100px;
    
}




.testimonial-item{
  padding: 20px 0px 0px 5px;

}


.columnar {
  background:#fff;
  border-radius:5px;
  border:1px solid #ccc;
  margin:0 0 20px 0;
  text-align: center;
  max-width: 400px;
  height: 395px;


      
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.0),
    0 0  0 2px rgb(255,255,255),
    0.5em 0.5em 1em rgba(0,0,0,0.2);
}


.columnar #img {
  width:80%;
  height: 120% !important;
}


/*   fim galeria   */

/* inicia footer */

.foot{
    /*background-color: #163479;*/
    background-color: #163479;
}

.botonimagen{
    /*all: unset;*/
  border: none;
  background-image:url(img/banner1.jpg);
  background-repeat:no-repeat;
  height:220px;
  width:100%;
  background-size: 100% 100%;
  background-position:center;
}




/* fin footer */
@media (max-width: 512px) {

    .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        grid-auto-rows: 270px;
        column-gap: 15px;
        
        
      }
      .columna {

        height: 265px;

    }

    #galeria {

        column-count: 2;
        /*background-color: red;*/
        
    }
    figure {
        padding:.5rem;
        box-sizing: border-box;
        height:140px;
        
    }
    .nombre{
        font-size: 14px !important;
    }
    .precio{
      
      
        font-size: 16px !important;
     }

    figcaption{
        height:100px;
        
    }


    




    .testimonial-item{
      padding: 0px 0px 0px 5px;
      width:300px;
      align-items: center !important;
      justify-content: center !important;  
      text-align: center !important; 
      
  }
  
  .wrapperr {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-gap: 10px;
      grid-auto-rows: 270px;
      column-gap: 15px;
      max-width:200px;
      
  
      margin: 1rem auto;
      padding:5px 10px 20px 10px;
      box-sizing: border-box;
      -moz-column-gap: 20px;
      -webkit-column-gap: 20px;
      column-gap: 20px;
      
    }
    .columnar {
      background:#fff;
      border-radius:5px;
      border:1px solid #ccc;
      margin:0 0 20px 0;
      text-align: center;
      max-width: 400px;
      height: 295px;
  
  
          
  box-shadow:
  inset 0 -3em 3em rgba(0,0,0,0.0),
        0 0  0 2px rgb(255,255,255),
        0.5em 0.5em 1em rgba(0,0,0,0.2);
  }
  
  
  .columnar #img {
      width:100%;
      height: 120% !important;
  }
  



























}
  /*tablet vertical*/
  @media only screen and (min-width: 400px) and (max-width: 512px) {

    
    
    .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
        grid-auto-rows: 330px;
        max-width:960px;
    
        margin: 1rem auto;
        padding:20px 10px 20px 10px;
        box-sizing: border-box;
        -moz-column-gap: 20pxss;
        -webkit-column-gap: 20px;
        column-gap: 30px;
        
      }

      .columna {

        height: 320px;

    }
    figure {
        height:180px;
        
        }

  }

/*celular horizontal*/
  @media only screen and (min-width: 513px) and (max-width: 750px) {

    
  
    
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        grid-auto-rows: 335px;
        max-width:960px;
    
        margin: 1rem auto;
        padding:20px 10px 20px 10px;
        box-sizing: border-box;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        column-gap: 30px;
        
      }
      .nombre{
   
    font-size: 14px !important;
}

      .columna {

        height: 325px;

    }
    figure {
        height: 180px;
        }
        .botonimagen{

            height:350px !important;
          
          }

          .testimonial-item{
            padding: 0px 0px 0px 90px;
            width:430px;
            align-items: center !important;
            justify-content: center !important;  
            text-align: center !important; 
            
            height: 380px;
            
        }
.wrapperr {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    grid-auto-rows: 270px;
    column-gap: 15px;
    max-width:900px;
    
    

    margin: 1rem auto;
    padding:5px 10px 20px 10px;
    box-sizing: border-box;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    
  }
  .columnar {
    background:#fff;
    border-radius:5px;
    border:1px solid #ccc;
    margin:0 0 20px 0;
    text-align: center;
    max-width: 400px;
    height: 370px;


        
box-shadow:
inset 0 -3em 3em rgba(0,0,0,0.0),
      0 0  0 2px rgb(255,255,255),
      0.5em 0.5em 1em rgba(0,0,0,0.2);
}


.columnar #img {
    width:100%;
    height: 140% !important;
}





    
  }
/*tablet horizontal*/
  @media only screen and (min-width: 751px) and (max-width: 820px) {


 

    
    
    .wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        grid-auto-rows: 300px;
        max-width:960px;
    
        
        
        
        column-gap: 30px;
        
      }
.nombre{
   
    font-size: 14px !important;
}
      .columna {

        height: 285px;

    }
    figure {
    height: 150px;
    }
 .botonimagen{

            height:220px !important;
          
          }
  }
@media (min-width: 992px) {
    .d-nones {
      display: none !important;    
    }
    .bg-verde{
        background-color: green !important;
    }
    .text-d{
        color: white !important;
    } 
    figure {
    height: 218px;
    }
    .botonimagen{

        height:360px !important;
      
      }
}

@media (max-width: 1250px) {
  .position-absolutea {
    position: absolute!important;
    background-image: url("img/a.jpg");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
     border: 2px solid #019149 !important;
  }
  .position-absoluteb {
    position: absolute!important;
    background-image: url("img/b.jpg");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #163479 !important;
  }
  .position-absolutec {
    position: absolute!important;
    background-image: url("img/c.jpg");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #e47b04 !important;
  }

  .carousel-item{

    height: 270px;
  }
    /* … */
  }


  @media only screen and (min-width: 1000px) and (max-width: 1200px) {

    .carousel-item{

      height: 300px !important;
    }

  }




  @media only screen and (min-width: 1000px) and (max-width: 1250px) {


    .position-absolutea {
      position: absolute;
      background-image: url("img/aa.jpg") !important;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
    }
  
  
    .position-absoluteb {
      position: absolute;
      background-image: url("img/bb.jpg") !important;
      background-size: cover;
    }
  
  
  
    .position-absolutec {
      position: absolute;
      background-image: url("img/cc.jpg") !important;
      background-size: cover;
    }


  .carousel-item{

    height: 350px;
  }




    .botonimagen{

        height:350px !important;
      
      }

}

.testimonial-carousel .owl-dots {
    margin-top: 30px;
    text-align: center;
  }
  
  .testimonial-carousel .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 10px;
    background: #dddddd;
  }
  
  .testimonial-carousel .owl-dot.active {
    background: #28a745;
    ;
  }