/*==============================================  Flexbox  ==========================================*/

.divider { margin: 15px 0px; border: 1px solid black; }

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

.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-around { justify-content: space-around; }
.justify-content-between { justify-content: space-between; }

.flex-direction-column { flex-direction: column; }

/*==============================================  12 Column System  ==========================================*/

[class*="col-"] { box-sizing: border-box; }
[class*="col-"]:not(.col-fluid):not([class*="-0"]), .col:not(.col-fluid) { padding: 2.5px 5px; } 
.col-fluid {}
.row, .row-no-wrap { display: flex; }
.row { flex-wrap: wrap; }
.row-no-warp { flex-wrap: nowrap; }

/*==============================================  Responsive Design  ==========================================*/

.display-flex { display: flex; }
.display-block { display: block; }
.display-inline-block { display: inline-block; }
.display-none, .hidden { display: none; }

.flex-1 { flex: 1 1 auto; }
.flex-0 { flex: 0 0 auto; }
.flex-auto { flex: auto; }
.flex-1-0 { flex: 1 1 0; }

.col { flex-basis: 0; flex-grow: 1; }

/* Large devices (desktops, less than 1200px) */
.col-0 { flex: 0 0 0%; max-width: 0%; padding: 0px; }
.col-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.col-2 { flex: 0 0 16.66%; max-width: 16.66%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.col-5 { flex: 0 0 41.66%; max-width: 41.66%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.33%; max-width: 58.33%; }
.col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.col-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

.offset-1 { margin-left: 8.33%; }
.offset-2 { margin-left: 16.66%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.33%; }
.offset-5 { margin-left: 41.66%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.33%; }
.offset-8 { margin-left: 66.66%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.33%; }
.offset-11 { margin-left: 91.66%; }
.offset-12 { margin-left: 100%; }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .width-100-lg { width: 100%; }
    .width-100vw-lg { width: 100vw; }
    .height-100-lg { height: 100%; }
    .height-100vh-lg { height: 100vh; }

    .display-flex-lg { display: flex; } 
    .display-block-lg { display: block; } 
    .display-none-lg, .hidden-lg { display: none; }

    .position-absolute-lg { position: absolute; }
    .position-relative-lg { position: relative; }
    .position-static-lg { position: static; }

    .col-lg-0 { flex: 0 0 0%; max-width: 0%; padding: 0px; }
    .col-lg-1 { flex: 0 0 8.33%; max-width: 8.33%; } 
    .col-lg-2 { flex: 0 0 16.66%; max-width: 16.66%; } 
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; } 
    .col-lg-4 { flex: 0 0 33.33%; max-width: 33.33%; } 
    .col-lg-5 { flex: 0 0 41.66%; max-width: 41.66%; } 
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; } 
    .col-lg-7 { flex: 0 0 58.33%; max-width: 58.33%; } 
    .col-lg-8 { flex: 0 0 66.66%; max-width: 66.66%; } 
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; } 
    .col-lg-10 { flex: 0 0 83.33%; max-width: 83.33%; } 
    .col-lg-11 { flex: 0 0 91.66%; max-width: 91.66%; } 
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .width-100-md { width: 100%; }
    .width-100vw-md { width: 100vw; }
    .height-100-md { height: 100%; }
    .height-100vh-md { height: 100vh; }

    .display-flex-md { display: flex; } 
    .display-block-md { display: block; } 
    .display-none-md, .hidden-md { display: none; }

    .position-absolute-md { position: absolute; }
    .position-relative-md { position: relative; }
    .position-static-md { position: static; }

    .col-md-0 { flex: 0 0 0%; max-width: 0%; padding: 0px; } 
    .col-md-1 { flex: 0 0 8.33%; max-width: 8.33%; } 
    .col-md-2 { flex: 0 0 16.66%; max-width: 16.66%; } 
    .col-md-3 { flex: 0 0 25%; max-width: 25%; } 
    .col-md-4 { flex: 0 0 33.33%; max-width: 33.33%; } 
    .col-md-5 { flex: 0 0 41.66%; max-width: 41.66%; } 
    .col-md-6 { flex: 0 0 50%; max-width: 50%; } 
    .col-md-7 { flex: 0 0 58.33%; max-width: 58.33%; } 
    .col-md-8 { flex: 0 0 66.66%; max-width: 66.66%; } 
    .col-md-9 { flex: 0 0 75%; max-width: 75%; } 
    .col-md-10 { flex: 0 0 83.33%; max-width: 83.33%; } 
    .col-md-11 { flex: 0 0 91.66%; max-width: 91.66%; } 
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .width-100-sm { width: 100%; }
    .width-100vw-sm { width: 100vw; }
    .height-100-sm { height: 100%; }
    .height-100vh-sm { height: 100vh; }

    .display-flex-sm { display: flex; } 
    .display-block-sm { display: block; } 
    .display-none-sm, .hidden-sm { display: none; }

    .position-absolute-sm { position: absolute; }
    .position-relative-sm { position: relative; }
    .position-static-sm { position: static; }

    .col-sm-0 { flex: 0 0 0%; max-width: 0%; padding: 0px; } 
    .col-sm-1 { flex: 0 0 8.33%; max-width: 8.33%; } 
    .col-sm-2 { flex: 0 0 16.66%; max-width: 16.66%; } 
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; } 
    .col-sm-4 { flex: 0 0 33.33%; max-width: 33.33%; } 
    .col-sm-5 { flex: 0 0 41.66%; max-width: 41.66%; } 
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; } 
    .col-sm-7 { flex: 0 0 58.33%; max-width: 58.33%; } 
    .col-sm-8 { flex: 0 0 66.66%; max-width: 66.66%; } 
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; } 
    .col-sm-10 { flex: 0 0 83.33%; max-width: 83.33%; } 
    .col-sm-11 { flex: 0 0 91.66%; max-width: 91.66%; } 
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .width-100-xs { width: 100%; }
    .width-100vw-xs { width: 100vw; }
    .height-100-xs { height: 100%; }
    .height-100vh-xs { height: 100vh; }

    .display-flex-xs { display: flex; } 
    .display-block-xs { display: block; } 
    .display-none-xs, .hidden-xs { display: none; }

    .position-absolute-xs { position: absolute; }
    .position-relative-xs { position: relative; }
    .position-static-xs { position: static; }

    .col-xs-0 { flex: 0 0 0%; max-width: 0%; padding: 0px; } 
    .col-xs-1 { flex: 0 0 8.33%; max-width: 8.33%; } 
    .col-xs-2 { flex: 0 0 16.66%; max-width: 16.66%; } 
    .col-xs-3 { flex: 0 0 25%; max-width: 25%; } 
    .col-xs-4 { flex: 0 0 33.33%; max-width: 33.33%; } 
    .col-xs-5 { flex: 0 0 41.66%; max-width: 41.66%; } 
    .col-xs-6 { flex: 0 0 50%; max-width: 50%; } 
    .col-xs-7 { flex: 0 0 58.33%; max-width: 58.33%; } 
    .col-xs-8 { flex: 0 0 66.66%; max-width: 66.66%; } 
    .col-xs-9 { flex: 0 0 75%; max-width: 75%; } 
    .col-xs-10 { flex: 0 0 83.33%; max-width: 83.33%; } 
    .col-xs-11 { flex: 0 0 91.66%; max-width: 91.66%; } 
    .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}