/* Column Styles */

@media (min-width: 1081px) {
  /* General Styles */
  .column-row                           { margin-bottom: 30px; }
  .column-row:last-of-type              { margin-bottom: 0px; }
  .column-row:after                     { content: ""; display: block; clear: both; }
  .column-row > .column:first-child     { margin-left: 0; }
  .column-row-border                    { padding: 0px 0px 30px 0px; border-bottom: 1px solid #CCCCCC; }
  .column-row-border-dashed             { border-bottom: 1px dashed #CCCCCC; }
  .column-row-border-dotted             { border-bottom: 1px dotted #CCCCCC; }
  .column-row-zebra                     { margin: 0px; padding: 20px 15px; background: #EFEFEF; }
  .column-row-zebra:nth-child(odd)      { background: #FFFFFF; }

  /* Normal Margin */
  .column         { float: left; margin-left: 4%; }
  .column-one     { width: 4.66666666667%; }
  .column-two     { width: 13.3333333333%; }
  .column-three   { width: 22%; }
  .column-four    { width: 30.6666666667%; }
  .column-five    { width: 39.3333333333%; }
  .column-six     { width: 48%; }
  .column-seven   { width: 56.6666666667%; }
  .column-eight   { width: 65.3333333333%; }
  .column-nine    { width: 74.0%; }
  .column-ten     { width: 82.6666666667%; }
  .column-eleven  { width: 91.3333333333%; }
  .column-twelve  { width: 100%; margin-left: 0; }

  /* Double Margin */
  .column-row-double-margin > .column         { margin-left: 8%; }
  .column-row-double-margin > .column-one     { width: 1%; }
  .column-row-double-margin > .column-two     { width: 10%; }
  .column-row-double-margin > .column-three   { width: 19%; }
  .column-row-double-margin > .column-four    { width: 28%; }
  .column-row-double-margin > .column-five    { width: 37%; }
  .column-row-double-margin > .column-six     { width: 46%; }
  .column-row-double-margin > .column-seven   { width: 55%; }
  .column-row-double-margin > .column-eight   { width: 64%; }
  .column-row-double-margin > .column-nine    { width: 73%; }
  .column-row-double-margin > .column-ten     { width: 82%; }
  .column-row-double-margin > .column-eleven  { width: 91%; }

  /* Half Margin */
  .column-row-half-margin > .column         { margin-left: 2%; }
  .column-row-half-margin > .column-one     { width: 6.5%; }
  .column-row-half-margin > .column-two     { width: 15%; }
  .column-row-half-margin > .column-three   { width: 23.5%; }
  .column-row-half-margin > .column-four    { width: 32%; }
  .column-row-half-margin > .column-five    { width: 40.5%; }
  .column-row-half-margin > .column-six     { width: 49%; }
  .column-row-half-margin > .column-seven   { width: 57.5%; }
  .column-row-half-margin > .column-eight   { width: 66%; }
  .column-row-half-margin > .column-nine    { width: 74.5%; }
  .column-row-half-margin > .column-ten     { width: 83%; }
  .column-row-half-margin > .column-eleven  { width: 91.5%; }

  /* Quarter Margin */
  .column-row-quarter-margin > .column          { margin-left: 1%; }
  .column-row-quarter-margin > .column-one      { width: 7.4166666666667%; }
  .column-row-quarter-margin > .column-two      { width: 15.833333333333%; }
  .column-row-quarter-margin > .column-three    { width: 24.25%; }
  .column-row-quarter-margin > .column-four     { width: 32.666666666667%; }
  .column-row-quarter-margin > .column-five     { width: 41.083333333333%; }
  .column-row-quarter-margin > .column-six      { width: 49.5%; }
  .column-row-quarter-margin > .column-seven    { width: 57.916666666667%; }
  .column-row-quarter-margin > .column-eight    { width: 66.333333333333%; }
  .column-row-quarter-margin > .column-nine     { width: 74.75%; }
  .column-row-quarter-margin > .column-ten      { width: 83.166666666667%; }
  .column-row-quarter-margin > .column-eleven   { width: 91.583333333333%; }

  /* No Margin */
  .column-row-no-margin > .column         { margin-left: 0; }
  .column-row-no-margin > .column-one     { width: 8.3333333333333%; }
  .column-row-no-margin > .column-two     { width: 16.666666666667%; }
  .column-row-no-margin > .column-three   { width: 25%; }
  .column-row-no-margin > .column-four    { width: 33.333333333333%; }
  .column-row-no-margin > .column-five    { width: 41.666666666667%; }
  .column-row-no-margin > .column-six     { width: 50%; }
  .column-row-no-margin > .column-seven   { width: 58.333333333333%; }
  .column-row-no-margin > .column-eight   { width: 66.666666666667%; }
  .column-row-no-margin > .column-nine    { width: 75%; }
  .column-row-no-margin > .column-ten     { width: 83.333333333333%; }
  .column-row-no-margin > .column-eleven  { width: 91.666666666667%; }

  /* RTL Columns */
  .column-row-rtl > .column:first-child                 { margin-left: 0 !important; margin-right: 0 !important; }
  .column-row-rtl > .column                             { float: right; margin-left: 0; margin-right: 4%; }
  .column-row-rtl > .column-twelve                      { margin-left: 0; margin-right: 0; }
  .column-row-rtl.column-row-double-margin > .column    { margin-left: 0; margin-right: 8%; }
  .column-row-rtl.column-row-half-margin > .column      { margin-left: 0; margin-right: 2%; }
  .column-row-rtl.column-row-quarter-margin > .column   { margin-left: 0; margin-right: 1%; }
  .column-row-rtl.column-row-no-margin > .column        { margin-left: 0; margin-right: 0; }
}

@media (max-width: 810px) {
  .column { margin-bottom: 15px; }
}

/* Flex Styles */

@media (min-width: 1081px) {
  /* General Styles */
  .flex-row                 { display: flex; margin-bottom: 30px; justify-content: space-between; }
  .flex-row:last-of-type    { margin-bottom: 0px; }

  /* Normal Margin */
  .flex-column        {  }
  .flex-column-one    { width: 4.66666666667%; }
  .flex-column-two    { width: 13.3333333333%; }
  .flex-column-three  { width: 22%; }
  .flex-column-four   { width: 30.6666666667%; }
  .flex-column-five   { width: 39.3333333333%; }
  .flex-column-six    { width: 48%; }
  .flex-column-seven  { width: 56.6666666667%; }
  .flex-column-eight  { width: 65.3333333333%; }
  .flex-column-nine   { width: 74.0%; }
  .flex-column-ten    { width: 82.6666666667%; }
  .flex-column-eleven { width: 91.3333333333%; }
  .flex-column-twelve { width: 100%; margin-left: 0; }

  /* Double Margin */
  .flex-row-double-margin > .flex-column          {  }
  .flex-row-double-margin > .flex-column-one      { width: 1%; }
  .flex-row-double-margin > .flex-column-two      { width: 10%; }
  .flex-row-double-margin > .flex-column-three    { width: 19%; }
  .flex-row-double-margin > .flex-column-four     { width: 28%; }
  .flex-row-double-margin > .flex-column-five     { width: 37%; }
  .flex-row-double-margin > .flex-column-six      { width: 46%; }
  .flex-row-double-margin > .flex-column-seven    { width: 55%; }
  .flex-row-double-margin > .flex-column-eight    { width: 64%; }
  .flex-row-double-margin > .flex-column-nine     { width: 73%; }
  .flex-row-double-margin > .flex-column-ten      { width: 82%; }
  .flex-row-double-margin > .flex-column-eleven   { width: 91%; }

  /* Half Margin */
  .flex-row-half-margin > .flex-column          {  }
  .flex-row-half-margin > .flex-column-one      { width: 6.5%; }
  .flex-row-half-margin > .flex-column-two      { width: 15%; }
  .flex-row-half-margin > .flex-column-three    { width: 23.5%; }
  .flex-row-half-margin > .flex-column-four     { width: 32%; }
  .flex-row-half-margin > .flex-column-five     { width: 40.5%; }
  .flex-row-half-margin > .flex-column-six      { width: 49%; }
  .flex-row-half-margin > .flex-column-seven    { width: 57.5%; }
  .flex-row-half-margin > .flex-column-eight    { width: 66%; }
  .flex-row-half-margin > .flex-column-nine     { width: 74.5%; }
  .flex-row-half-margin > .flex-column-ten      { width: 83%; }
  .flex-row-half-margin > .flex-column-eleven   { width: 91.5%; }

  /* No Margin */
  .flex-row-no-margin > .flex-column          { margin-left: 0; }
  .flex-row-no-margin > .flex-column-one      { width: 8.3333333333333%; }
  .flex-row-no-margin > .flex-column-two      { width: 16.666666666667%; }
  .flex-row-no-margin > .flex-column-three    { width: 25%; }
  .flex-row-no-margin > .flex-column-four     { width: 33.333333333333%; }
  .flex-row-no-margin > .flex-column-five     { width: 41.666666666667%; }
  .flex-row-no-margin > .flex-column-six      { width: 50%; }
  .flex-row-no-margin > .flex-column-seven    { width: 58.333333333333%; }
  .flex-row-no-margin > .flex-column-eight    { width: 66.666666666667%; }
  .flex-row-no-margin > .flex-column-nine     { width: 75%; }
  .flex-row-no-margin > .flex-column-ten      { width: 83.333333333333%; }
  .flex-row-no-margin > .flex-column-eleven   { width: 91.666666666667%; }

  /* RTL Columns */
  .flex-row-rtl { flex-direction: row-reverse; }

  /* Flex Column Separator */
  .flex-column-separator          { position: relative; }
  .flex-column-separator::after   { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-right: 1px solid #CCCCCC; }
}

@media (max-width: 810px) {
  .flex-column                    { margin-bottom: 15px; }
  .flex-column-separator          { margin: 0px !important; }
  .flex-column-separator::after   { content: ""; display: block; width: 100%; border-bottom: 1px solid #CCCCCC; }
}

/* Grid Styles */

@media (min-width: 1081px) {
  .grid-row           { display: grid; gap: 30px; margin-bottom: 30px; }
  .grid-row-one       { grid-template-columns: repeat(1, 1fr); }
  .grid-row-two       { grid-template-columns: repeat(2, 1fr); }
  .grid-row-three     { grid-template-columns: repeat(3, 1fr); }
  .grid-row-four      { grid-template-columns: repeat(4, 1fr); }
  .grid-row-five      { grid-template-columns: repeat(5, 1fr); }
  .grid-row-six       { grid-template-columns: repeat(6, 1fr); }
  .grid-row-seven     { grid-template-columns: repeat(7, 1fr); }
  .grid-row-eight     { grid-template-columns: repeat(8, 1fr); }
  .grid-row-nine      { grid-template-columns: repeat(9, 1fr); }
  .grid-row-ten       { grid-template-columns: repeat(10, 1fr); }
  .grid-row-eleven    { grid-template-columns: repeat(11, 1fr); }
  .grid-row-twelve    { grid-template-columns: repeat(12, 1fr); }

  .grid-row > .grid-column    { height: 100%; }
}

@media (max-width: 1280px) {
  .grid-row           { display: grid; gap: 30px; margin-bottom: 30px; }
  .grid-row-three     { grid-template-columns: repeat(2, 1fr); }
  .grid-row-four      { grid-template-columns: repeat(2, 1fr); }
  .grid-row-five      { grid-template-columns: repeat(2, 1fr); }
  .grid-row-six       { grid-template-columns: repeat(2, 1fr); }
  .grid-row-seven     { grid-template-columns: repeat(2, 1fr); }
  .grid-row-eight     { grid-template-columns: repeat(2, 1fr); }
  .grid-row-nine      { grid-template-columns: repeat(2, 1fr); }
  .grid-row-ten       { grid-template-columns: repeat(2, 1fr); }
  .grid-row-eleven    { grid-template-columns: repeat(2, 1fr); }
  .grid-row-twelve    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 810px) {
  .grid-row           { display: grid; gap: 30px; margin-bottom: 30px; }
  .grid-row-one       { grid-template-columns: repeat(1, 1fr); }
  .grid-row-two       { grid-template-columns: repeat(1, 1fr); }
  .grid-row-three     { grid-template-columns: repeat(1, 1fr); }
  .grid-row-four      { grid-template-columns: repeat(1, 1fr); }
  .grid-row-five      { grid-template-columns: repeat(1, 1fr); }
  .grid-row-six       { grid-template-columns: repeat(1, 1fr); }
  .grid-row-seven     { grid-template-columns: repeat(1, 1fr); }
  .grid-row-eight     { grid-template-columns: repeat(1, 1fr); }
  .grid-row-nine      { grid-template-columns: repeat(1, 1fr); }
  .grid-row-ten       { grid-template-columns: repeat(1, 1fr); }
  .grid-row-eleven    { grid-template-columns: repeat(1, 1fr); }
  .grid-row-twelve    { grid-template-columns: repeat(1, 1fr); }
}