/* Grid system */
.container
    {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    }
.flex
    {
    display: flex;
    flex-wrap: wrap;
    }
    .col-1  { width: 8.33%   }
    .col-2  { width: 16.67%  }
    .col-3  { width: 25%     }
    .col-4  { width: 33.33%  }
    .col-5  { width: 41.67%  }
    .col-6  { width: 50%     }
    .col-7  { width: 58.33%  }
    .col-8  { width: 66.67%  }
    .col-9  { width: 75%     }
    .col-10 { width: 83.33%  }
    .col-11 { width: 91.67%  }
    .col-12 { width: 100%    }

    .offset-1  { margin-left: 8.33%   }
    .offset-2  { margin-left: 16.67%  }
    .offset-3  { margin-left: 25%     }
    .offset-4  { margin-left: 33.33%  }
    .offset-5  { margin-left: 41.67%  }
    .offset-6  { margin-left: 50%     }
    .offset-7  { margin-left: 58.33%  }
    .offset-8  { margin-left: 66.67%  }
    .offset-9  { margin-left: 75%     }
    .offset-10 { margin-left: 83.33%  }
    .offset-11 { margin-left: 91.67%  }
    .offset-12 { margin-left: 100%    }

    
    .text-center
        {
        text-align: center;
        }

    .p-15  ,  
    .py-15 ,
    .px-15 
        {
        box-sizing: border-box;
        }

    .p-15  { padding: 15px   }
    .py-15 { padding: 15px 0 }
    .px-15 { padding: 0 15px }

    .col-1  ,
    .col-2  ,
    .col-3  ,
    .col-4  ,
    .col-5  ,
    .col-6  ,
    .col-7  ,
    .col-8  ,
    .col-9  ,
    .col-10 ,
    .col-11 ,
    .col-12 
        {
        }


.desktop-hidden
    {
    display: none !important;
    }

/* ============================================================================ */
/* Планшет - меньше 1200px  =================================================== */
/* ============================================================================ */
@media (max-width: 1200px) {
    
    header,
    footer,
    section
        {
        padding: 0;
        }
    .container
        {
        width: 100%;
        padding: 0 15px;
        }
    .col-1-tab  { width: 8.33%   }
    .col-2-tab  { width: 16.67%  }
    .col-3-tab  { width: 25%     }
    .col-4-tab  { width: 33.33%  }
    .col-5-tab  { width: 41.67%  }
    .col-6-tab  { width: 50%     }
    .col-7-tab  { width: 58.33%  }
    .col-8-tab  { width: 66.67%  }
    .col-9-tab  { width: 75%     }
    .col-10-tab { width: 83.33%  }
    .col-11-tab { width: 91.67%  }
    .col-12-tab { width: 100%    }


}


/* ============================================================================ */
/* Телефон - меньше 768px   =================================================== */
/* ============================================================================ */
@media (max-width: 768px) {

.offset-0-mob  { margin-left: 0       }
.offset-1-mob  { margin-left: 8.33%   }
.offset-2-mob  { margin-left: 16.67%  }
.offset-3-mob  { margin-left: 25%     }
.offset-4-mob  { margin-left: 33.33%  }
.offset-5-mob  { margin-left: 41.67%  }
.offset-6-mob  { margin-left: 50%     }
.offset-7-mob  { margin-left: 58.33%  }
.offset-8-mob  { margin-left: 66.67%  }
.offset-9-mob  { margin-left: 75%     }
.offset-10-mob { margin-left: 83.33%  }
.offset-11-mob { margin-left: 91.67%  }
.offset-12-mob { margin-left: 100%    }

.col-1-mob  { width: 8.33%   }
.col-2-mob  { width: 16.67%  }
.col-3-mob  { width: 25%     }
.col-4-mob  { width: 33.33%  }
.col-5-mob  { width: 41.67%  }
.col-6-mob  { width: 50%     }
.col-7-mob  { width: 58.33%  }
.col-8-mob  { width: 66.67%  }
.col-9-mob  { width: 75%     }
.col-10-mob { width: 83.33%  }
.col-11-mob { width: 91.67%  }
.col-12-mob { width: 100%    }


.mobile-hidden
    {
    display: none !important;
    }
.desktop-hidden
    {
    display: block !important;
    }
    .desktop-hidden.flex
        {
        display: flex !important;
        }


}