body {
   width:100%;
   margin:0;
   padding:0;
   font-family: var(--font);
   
}

#clear{clear: both;}

.titulo{
   font-family: var(--titulo-font);
   font-weight: var(--titulo-font-b);
   font-style: var(--titulo-font-i);
   text-decoration: var(--titulo-font-u);
   font-size: var(--titulo-font-size);
   color:var(--titulo-font-color);
   text-align: center;
   width: 100%;
   height: 30px;
   
}

.titulo a{
   color:#000000;
   text-decoration: none;
}

.titulo a:hover{
   color:#000000;
   text-decoration:underline;
}

.marqee {
   height: 30px;
   background-image: linear-gradient(to left, #EEBF47,#FEEB91, #A76621,#EEBF47);
   /*
   background: linear-gradient(top, red, gold);
   background: linear-gradient(top, red, gold);
   background: -webkit-linear-gradient(top, red, gold);
   background: -moz-linear-gradient(top, red, gold);
   background: -o-linear-gradient(top, red, gold);
   background: -ms-linear-gradient(top, red, gold);
   */
}

.marqee span {display: block;}

/*
   animation: example1 10s linear infinite;
   display: block;
   left: 0;
   min-width: 100%;
   position: absolute;
   top: 0;
   white-space: nowrap;


*/

.container-sup {
   overflow: hidden;
   white-space: nowrap;
   height: 30px;
   background-image: linear-gradient(to left, #EEBF47,#FEEB91, #A76621,#EEBF47);
   font-family: 'Lato', sans-serif !important;   
   color: aliceblue;
   width: 100%;
   font-size: 12px;
   font-weight: 400;
}

.scrolling {
  animation: marquee 6s linear infinite;
  display: inline-block;
  padding-right: 10px;
  margin-top:8px
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100%);
  }
}

.productos-galerias {
   display: block;
   margin: 20px 20px;
   position:relative;
}

.producto{
   float:left;
   position:relative;
   box-shadow: 0px 4px 8px 0px #8e8e8e;
   text-align:center;
}

.banner{
   width: calc(50% - 10px);
   float:left;
   position:relative;
   box-shadow: 0px 4px 8px 0px #8e8e8e;
}

.producto img {
   display: inline-block;
}

.producto a {
   display: block;
   text-align: left;
   background-color: #f9f9f9;
   padding: 15px;
   font-size: 16px;
   font-weight: 300;
   color: #333;
   min-height: 40px;   
}

.producto a:hover {
   background-color: #8a2830;
   color: #fff;
   
}

.producto a i {
   position: absolute;
   right: 30px;
   bottom: 20px;
}

/* para los productos */
.pro1{width: calc(25% - 15px);margin-left:20px;margin-top:0px;}
.pro2{width: calc(25% - 15px);margin-left:20px;margin-top:0px;}
.pro3{width: calc(25% - 15px);margin-left:0px;margin-top:20px;clear:both;}
.pro4{width: calc(25% - 15px);margin-left:20px;margin-top:20px;}
.pro5{width: calc(25% - 15px);margin-left:20px;margin-top:20px;}
.pro6{width: calc(25% - 15px);margin-left:20px;margin-top:20px;}


@media (max-width: 1400px) {
   .banner{
      width: calc(100% - 20px);
      float:left;
      position:relative;
      box-shadow: 0px 4px 8px 0px #8e8e8e;
   }

   .producto{
      width: calc(33% - 10px);
      margin-left:10px;
      margin-top:0px;
      float:left;
      position:relative;
      box-shadow: 0px 4px 8px 0px #8e8e8e;
      text-align:center;
   }

   .pro1{width: calc(33% - 15px);margin-left:0px;margin-top:10px;clear: none;}
   .pro2{width: calc(33% - 15px);margin-left:15px;margin-top:10px;clear: none;}
   .pro3{width: calc(33% - 15px);margin-left:15px;margin-top:10px;clear: none;}
   .pro4{width: calc(33% - 15px);margin-left:0px;margin-top:10px;clear: both;}
   .pro5{width: calc(33% - 15px);margin-left:15px;margin-top:10px;clear: none;}
   .pro6{width: calc(33% - 15px);margin-left:15px;margin-top:10px;clear: none;}

}

@media (max-width: 1024px) {
   .banner{
      width: calc(100% - 20px);
      float:left;
      position:relative;
      box-shadow: 0px 4px 8px 0px #8e8e8e;
   }

   .producto{
      width: calc(50% - 10px);
      margin-left:10px;
      margin-top:0px;
      float:left;
      position:relative;
      box-shadow: 0px 4px 8px 0px #8e8e8e;
      text-align:center;
      
   }

   .pro1{width: calc(50% - 10px);margin-left:0px;margin-top:10px;clear: none;}
   .pro2{width: calc(50% - 10px);margin-left:10px;margin-top:10px;clear: none;}
   .pro3{width: calc(50% - 10px);margin-left:0px;margin-top:10px;clear: both;}
   .pro4{width: calc(50% - 10px);margin-left:10px;margin-top:10px;clear: none;}
   .pro5{width: calc(50% - 10px);margin-left:0px;margin-top:10px;clear: both;}
   .pro6{width: calc(50% - 10px);margin-left:10px;margin-top:10px;clear: none;}

}

@media (max-width: 800px) {
   .banner{
      width: calc(100% - 20px);
      float:left;
      position:relative;
      box-shadow: 0px 4px 8px 0px #8e8e8e;
   }

   .producto{
      width: calc(50% - 10px);
      margin-left:10px;
      margin-top:0px;
      float:left;
      position:relative;
      box-shadow: 0px 4px 8px 0px #8e8e8e;
      text-align:center;
   }

   .pro1{width: calc(100% - 5px);margin-left:0px;margin-top:5px;clear: both;}
   .pro2{width: calc(100% - 5px);margin-left:5px;margin-top:5px;clear: both;}
   .pro3{width: calc(100% - 5px);margin-left:0px;margin-top:5px;clear: both;}
   .pro4{width: calc(100% - 5px);margin-left:5px;margin-top:5px;clear: both;}
   .pro5{width: calc(100% - 5px);margin-left:0px;margin-top:5px;clear: both;}
   .pro6{width: calc(100% - 5px);margin-left:5px;margin-top:5px;clear: both;}

}