/* Kokushi-Pack Layout Styles */

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Grid System */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
  justify-content: space-evenly;
}

.col {
  flex: 1;
  padding: 0 1rem;
}

.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-6 { flex: 0 0 50%; max-width: 50%; }
.col-8 { flex: 0 0 66.66%; max-width: 66.66%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Layout Utilities */
.kokushi-flex {
  display: flex;
}

.kokushi-flex-center {
  justify-content: center;
  align-items: center;
}

.kokushi-flex-between {
  justify-content: space-between;
}

.kokushi-flex-around {
  justify-content: space-around;
}

.kokushi-flex-wrap {
  flex-wrap: wrap;
}

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

.color-accent {
  color: #f38d22!important;
  border: 1px solid #f38d22!important;
}

.color-accent:hover {
  background-color: #f38d22!important;
  color: #fff!important;
}

.color-accent-fff {
  color: #fff!important;
  border: 1px solid #fff!important;
}

.color-accent-fff:hover {
  background-color: #f38d22!important;
  color: #fff!important;
  border: 1px solid #f38d22!important;
}

/* Spacing */
.kokushi-mt-1 { margin-top: 0.5rem; }
.kokushi-mt-2 { margin-top: 1rem; }
.kokushi-mt-3 { margin-top: 1.5rem; }
.kokushi-mt-4 { margin-top: 2rem; }
.kokushi-mt-5 { margin-top: 3rem; }

.kokushi-mb-1 { margin-bottom: 0.5rem; }
.kokushi-mb-2 { margin-bottom: 1rem; }
.kokushi-mb-3 { margin-bottom: 1.5rem; }
.kokushi-mb-4 { margin-bottom: 2rem; }
.kokushi-mb-5 { margin-bottom: 3rem; }

.kokushi-ml-1 { margin-left: 0.5rem; }
.kokushi-ml-2 { margin-left: 1rem; }
.kokushi-ml-3 { margin-left: 1.5rem; }
.kokushi-ml-4 { margin-left: 2rem; }
.kokushi-ml-5 { margin-left: 3rem; }

.kokushi-mr-1 { margin-right: 0.5rem; }
.kokushi-mr-2 { margin-right: 1rem; }
.kokushi-mr-3 { margin-right: 1.5rem; }
.kokushi-mr-4 { margin-right: 2rem; }
.kokushi-mr-5 { margin-right: 3rem; }

.kokushi-pt-1 { padding-top: 0.5rem; }
.kokushi-pt-2 { padding-top: 1rem; }
.kokushi-pt-3 { padding-top: 1.5rem; }
.kokushi-pt-4 { padding-top: 2rem; }
.kokushi-pt-5 { padding-top: 3rem; }

.kokushi-pb-1 { padding-bottom: 0.5rem; }
.kokushi-pb-2 { padding-bottom: 1rem; }
.kokushi-pb-3 { padding-bottom: 1.5rem; }
.kokushi-pb-4 { padding-bottom: 2rem; }
.kokushi-pb-5 { padding-bottom: 3rem; }

.kokushi-pl-1 { padding-left: 0.5rem; }
.kokushi-pl-2 { padding-left: 1rem; }
.kokushi-pl-3 { padding-left: 1.5rem; }
.kokushi-pl-4 { padding-left: 2rem; }
.kokushi-pl-5 { padding-left: 3rem; }

.kokushi-pr-1 { padding-right: 0.5rem; }
.kokushi-pr-2 { padding-right: 1rem; }
.kokushi-pr-3 { padding-right: 1.5rem; }
.kokushi-pr-4 { padding-right: 2rem; }
.kokushi-pr-5 { padding-right: 3rem; }

/* Text alignment */
.kokushi-text-center { text-align: center; }
.kokushi-text-left { text-align: left; }
.kokushi-text-right { text-align: right; }
.kokushi-text-justify { text-align: justify; }

/* Display */
.kokushi-d-block { display: block; }
.kokushi-d-inline { display: inline; }
.kokushi-d-inline-block { display: inline-block; }
.kokushi-d-none { display: none; }

/* Responsive layout */
@media (max-width: 1200px) {
  .container {
    max-width: 992px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 768px;
  }

  .col-md-4 { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 768px) {
  .container {
    max-width: 576px;
  }

  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }

  .kokushi-d-sm-none { display: none; }
  .kokushi-d-sm-block { display: block; }
}

@media (max-width: 576px) {
  .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Clear fix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}