/*===================================================
                      GENERAL
===================================================*/



.contenedor-gridflex{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.filas{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}



.grid{
    display: grid;
}
.gap-5{ gap: 5px; }
.gap-10{ gap: 10px; }
.gap-20{ gap: 20px; }
.gap-30{ gap: 30px; }
.gap-40{ gap: 40px; }
.gap-50{ gap: 50px; }
.gap-60{ gap: 60px; }
.gap-70{ gap: 70px; }
.gap-80{ gap: 80px; }
.gap-90{ gap: 90px; }
.gap-100{ gap: 100px; }





/* Desktop */
@media(min-width:1200px){
    .desktop-col-1{ grid-template-columns: repeat(1, 1fr); }
    .desktop-col-2{ grid-template-columns: repeat(2, 1fr); }
    .desktop-col-3{ grid-template-columns: repeat(3, 1fr); }
    .desktop-col-4{ grid-template-columns: repeat(4, 1fr); }
    .desktop-col-5{ grid-template-columns: repeat(5, 1fr); }
    .desktop-col-6{ grid-template-columns: repeat(6, 1fr); }
    .desktop-col-7{ grid-template-columns: repeat(7, 1fr); }
    .desktop-col-8{ grid-template-columns: repeat(8, 1fr); }
    .desktop-col-9{ grid-template-columns: repeat(9, 1fr); }
    .desktop-col-10{ grid-template-columns: repeat(10, 1fr); }
    .desktop-col-11{ grid-template-columns: repeat(11, 1fr); }
    .desktop-col-12{ grid-template-columns: repeat(12, 1fr); }

    .desktop-span-1{ grid-column: span 1;}
    .desktop-span-2{ grid-column: span 2;}
    .desktop-span-3{ grid-column: span 3;}
    .desktop-span-4{ grid-column: span 4;}
    .desktop-span-5{ grid-column: span 5;}
    .desktop-span-6{ grid-column: span 6;}
    .desktop-span-7{ grid-column: span 7;}
    .desktop-span-8{ grid-column: span 8;}
    .desktop-span-9{ grid-column: span 9;}
    .desktop-span-10{ grid-column: span 10;}
    .desktop-span-11{ grid-column: span 11;}
    .desktop-span-12{ grid-column: span 12;}
}
/* Desktop */


/* Lapto */
@media(max-width:1199px) and (min-width:992px){
    .lapto-col-1{ grid-template-columns: repeat(1, 1fr); }
    .lapto-col-2{ grid-template-columns: repeat(2, 1fr); }
    .lapto-col-3{ grid-template-columns: repeat(3, 1fr); }
    .lapto-col-4{ grid-template-columns: repeat(4, 1fr); }
    .lapto-col-5{ grid-template-columns: repeat(5, 1fr); }
    .lapto-col-6{ grid-template-columns: repeat(6, 1fr); }
    .lapto-col-7{ grid-template-columns: repeat(7, 1fr); }
    .lapto-col-8{ grid-template-columns: repeat(8, 1fr); }
    .lapto-col-9{ grid-template-columns: repeat(9, 1fr); }
    .lapto-col-10{ grid-template-columns: repeat(10, 1fr); }
    .lapto-col-11{ grid-template-columns: repeat(11, 1fr); }
    .lapto-col-12{ grid-template-columns: repeat(12, 1fr); }

    .lapto-span-1{ grid-column: span 1;}
    .lapto-span-2{ grid-column: span 2;}
    .lapto-span-3{ grid-column: span 3;}
    .lapto-span-4{ grid-column: span 4;}
    .lapto-span-5{ grid-column: span 5;}
    .lapto-span-6{ grid-column: span 6;}
    .lapto-span-7{ grid-column: span 7;}
    .lapto-span-8{ grid-column: span 8;}
    .lapto-span-9{ grid-column: span 9;}
    .lapto-span-10{ grid-column: span 10;}
    .lapto-span-11{ grid-column: span 11;}
    .lapto-span-12{ grid-column: span 12;}
  
}
/* Lapto */


/* Tablet */
@media(max-width:991px) and (min-width:768px){
    .tablet-col-1{ grid-template-columns: repeat(1, 1fr); }
    .tablet-col-2{ grid-template-columns: repeat(2, 1fr); }
    .tablet-col-3{ grid-template-columns: repeat(3, 1fr); }
    .tablet-col-4{ grid-template-columns: repeat(4, 1fr); }
    .tablet-col-5{ grid-template-columns: repeat(5, 1fr); }
    .tablet-col-6{ grid-template-columns: repeat(6, 1fr); }
    .tablet-col-7{ grid-template-columns: repeat(7, 1fr); }
    .tablet-col-8{ grid-template-columns: repeat(8, 1fr); }
    .tablet-col-9{ grid-template-columns: repeat(9, 1fr); }
    .tablet-col-10{ grid-template-columns: repeat(10, 1fr); }
    .tablet-col-11{ grid-template-columns: repeat(11, 1fr); }
    .tablet-col-12{ grid-template-columns: repeat(12, 1fr); }

    .tablet-span-1{ grid-column: span 1;}
    .tablet-span-2{ grid-column: span 2;}
    .tablet-span-3{ grid-column: span 3;}
    .tablet-span-4{ grid-column: span 4;}
    .tablet-span-5{ grid-column: span 5;}
    .tablet-span-6{ grid-column: span 6;}
    .tablet-span-7{ grid-column: span 7;}
    .tablet-span-8{ grid-column: span 8;}
    .tablet-span-9{ grid-column: span 9;}
    .tablet-span-10{ grid-column: span 10;}
    .tablet-span-11{ grid-column: span 11;}
    .tablet-span-12{ grid-column: span 12;}
}
/* Tablet */


/* Mobil */
@media(max-width:767px){
    .mobil-col-1{ grid-template-columns: repeat(1, 1fr); }
    .mobil-col-2{ grid-template-columns: repeat(2, 1fr); }
    .mobil-col-3{ grid-template-columns: repeat(3, 1fr); }
    .mobil-col-4{ grid-template-columns: repeat(4, 1fr); }
    .mobil-col-5{ grid-template-columns: repeat(5, 1fr); }
    .mobil-col-6{ grid-template-columns: repeat(6, 1fr); }
    .mobil-col-7{ grid-template-columns: repeat(7, 1fr); }
    .mobil-col-8{ grid-template-columns: repeat(8, 1fr); }
    .mobil-col-9{ grid-template-columns: repeat(9, 1fr); }
    .mobil-col-10{ grid-template-columns: repeat(10, 1fr); }
    .mobil-col-11{ grid-template-columns: repeat(11, 1fr); }
    .mobil-col-12{ grid-template-columns: repeat(12, 1fr); }

    .mobil-span-1{ grid-column: span 1;}
    .mobil-span-2{ grid-column: span 2;}
    .mobil-span-3{ grid-column: span 3;}
    .mobil-span-4{ grid-column: span 4;}
    .mobil-span-5{ grid-column: span 5;}
    .mobil-span-6{ grid-column: span 6;}
    .mobil-span-7{ grid-column: span 7;}
    .mobil-span-8{ grid-column: span 8;}
    .mobil-span-9{ grid-column: span 9;}
    .mobil-span-10{ grid-column: span 10;}
    .mobil-span-11{ grid-column: span 11;}
    .mobil-span-12{ grid-column: span 12;}
    
}
/* Mobil */








/*===================================================
                      DESKTOP
===================================================*/
@media(min-width:1200px){
    
    .desktop-12{
        position: relative;
        float: left;
        width: 100%;
        height: auto;
    }
    
    .desktop-11{
        position: relative;
        float: left;
        width: 91.66666667%;
        height: auto;
    }
    
    .desktop-10{
        position: relative;
        float: left;
        width: 83.33333333%;
        height: auto;
    }
    
    .desktop-9{
        position: relative;
        float: left;
        width: 75%;
        height: auto;
    }
    
    .desktop-8{
        position: relative;
        float: left;
        width: 66.66666667%;
        height: auto;
    }
    
    .desktop-7{
        position: relative;
        float: left;
        width: 58.33333333%;
        height: auto;
    }
    
    .desktop-6{
        position: relative;
        float: left;
        width: 50%;
        height: auto;
    }
    
    .desktop-5{
        position: relative;
        float: left;
        width: 41.66666667%;
        height: auto;
    }
    
    .desktop-4{
        position: relative;
        float: left;
        width: 33.33333333%;
        height: auto;
    }
    
    .desktop-3{
        position: relative;
        float: left;
        width: 25%;
        height: auto;
    }
    
    .desktop-2{
        position: relative;
        float: left;
        width: 16.66666667%;
        height: auto;
    }
    
    .desktop-1{
        position: relative;
        float: left;
        width: 8.33333333%;
        height: auto;
    }
    
}

/*================= FIN DESKTOP ===================*/





/*===================================================
                       LAPTO
===================================================*/
@media(max-width:1199px) and (min-width:992px){
    
    .lapto-12{
        position: relative;
        float: left;
        width: 100%;
        height: auto;
    }
    
    .lapto-11{
        position: relative;
        float: left;
        width: 91.66666667%;
        height: auto;
    }
    
    .lapto-10{
        position: relative;
        float: left;
        width: 83.33333333%;
        height: auto;
    }
    
    .lapto-9{
        position: relative;
        float: left;
        width: 75%;
        height: auto;
    }
    
    .lapto-8{
        position: relative;
        float: left;
        width: 66.66666667%;
        height: auto;
    }
    
    .lapto-7{
        position: relative;
        float: left;
        width: 58.33333333%;
        height: auto;
    }
    
    .lapto-6{
        position: relative;
        float: left;
        width: 50%;
        height: auto;
    }
    
    .lapto-5{
        position: relative;
        float: left;
        width: 41.66666667%;
        height: auto;
    }
    
    .lapto-4{
        position: relative;
        float: left;
        width: 33.33333333%;
        height: auto;
    }
    
    .lapto-3{
        position: relative;
        float: left;
        width: 25%;
        height: auto;
    }
    
    .lapto-2{
        position: relative;
        float: left;
        width: 16.66666667%;
        height: auto;
    }
    
    .lapto-1{
        position: relative;
        float: left;
        width: 8.33333333%;
        height: auto;
    }
    
}

/*=================== FIN LAPTO ===================*/





/*===================================================
                        TABLET
===================================================*/
@media(max-width:991px) and (min-width:768px){
    
    .tablet-12{
        position: relative;
        float: left;
        width: 100%;
        height: auto;
    }
    
    .tablet-11{
        position: relative;
        float: left;
        width: 91.66666667%;
        height: auto;
    }
    
    .tablet-10{
        position: relative;
        float: left;
        width: 83.33333333%;
        height: auto;
    }
    
    .tablet-9{
        position: relative;
        float: left;
        width: 75%;
        height: auto;
    }
    
    .tablet-8{
        position: relative;
        float: left;
        width: 66.66666667%;
        height: auto;
    }
    
    .tablet-7{
        position: relative;
        float: left;
        width: 58.33333333%;
        height: auto;
    }
    
    .tablet-6{
        position: relative;
        float: left;
        width: 50%;
        height: auto;
    }
    
    .tablet-5{
        position: relative;
        float: left;
        width: 41.66666667%;
        height: auto;
    }
    
    .tablet-4{
        position: relative;
        float: left;
        width: 33.33333333%;
        height: auto;
    }
    
    .tablet-3{
        position: relative;
        float: left;
        width: 25%;
        height: auto;
    }
    
    .tablet-2{
        position: relative;
        float: left;
        width: 16.66666667%;
        height: auto;
    }
    
    .tablet-1{
        position: relative;
        float: left;
        width: 8.33333333%;
        height: auto;
    }
    
}

/*=================== FIN TABLET ==================*/





/*===================================================
                         MOBIL
===================================================*/
@media(max-width:767px){
    
    .mobil-12{
        position: relative;
        float: left;
        width: 100%;
        height: auto;
    }
    
    .mobil-11{
        position: relative;
        float: left;
        width: 91.66666667%;
        height: auto;
    }
    
    .mobil-10{
        position: relative;
        float: left;
        width: 83.33333333%;
        height: auto;
    }
    
    .mobil-9{
        position: relative;
        float: left;
        width: 75%;
        height: auto;
    }
    
    .mobil-8{
        position: relative;
        float: left;
        width: 66.66666667%;
        height: auto;
    }
    
    .mobil-7{
        position: relative;
        float: left;
        width: 58.33333333%;
        height: auto;
    }
    
    .mobil-6{
        position: relative;
        float: left;
        width: 50%;
        height: auto;
    }
    
    .mobil-5{
        position: relative;
        float: left;
        width: 41.66666667%;
        height: auto;
    }
    
    .mobil-4{
        position: relative;
        float: left;
        width: 33.33333333%;
        height: auto;
    }
    
    .mobil-3{
        position: relative;
        float: left;
        width: 25%;
        height: auto;
    }
    
    .mobil-2{
        position: relative;
        float: left;
        width: 16.66666667%;
        height: auto;
    }
    
    .mobil-1{
        position: relative;
        float: left;
        width: 8.33333333%;
        height: auto;
    }
    
}

/*==================== FIN MOBIL ==================*/