/* ************************************* */
/*                                       */
/* Grid                                  */
/*                                       */
/* ************************************* */


/* ************************************* */
/* Generic flexbox classes               */
/* ************************************* */

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

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

.flex--inline {
  display: inline-flex;
}

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

.flex--vspace {
  align-content: space-between;
}

.flex--vstretch {
  align-items: stretch;
}

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

.flex--end {
  justify-content: flex-end;
}

.flex--center {
  justify-content: center;
}

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

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

.flex--gap {
  gap:20px;
}

/* Gutter */
.flex--gutter {
  margin-left: -20px;
}

.flex--gutter--wide {
  margin-left: -40px;
}

.flex--gutter .item{
  margin-left: 20px;
}

.flex--gutter .col{
  margin-left: 20px;
}

.flex--gutter--wide .col{
  margin-left: 40px;
}

/* Gap */
.flex--gap-wide {
	column-gap: 40px;
	-webkit-column-gap: 40px;
}




/* ************************************* */
/* Column count through outer class      */
/* ************************************* */

.flex--half > * {
  width:50%;
}

.flex--third > * {
  flex-basis:33.3333%;
  max-width:33.3333%;
}

.flex--quarter > * {
  width:25%;
}

.grid {
  display: flex;
  flex-wrap:wrap;
}

.grid > *{
  flex:1;
}

.grid--gutter {
  margin-left: -10px;
  margin-right: -10px;
}

.grid--gutter > *{
  margin-left: 10px;
  margin-right: 10px;
}

.grid--gutter--wide {
  margin-left: -20px;
  margin-right: -20px;
}

.grid--gutter--wide > *{
  margin-left: 20px;
  margin-right: 20px;
}


/* ************************************* */
/*                                       */
/* Columns                               */
/*                                       */
/* ************************************* */


.col--1 {
  flex-basis:8.33333%;
  max-width:8.33333%;
}

.grid--gutter--wide > .col--1 {
  flex-basis:calc(8.33333% - 40px);
  max-width:calc(8.33333% - 40px);
}

.grid--gutter > .col--1 {
  flex-basis:calc(8.33333% - 20px);
  max-width:calc(8.33333% - 20px);
}

.col--2 {
  flex-basis:16.6667%;
  max-width:16.6667%;
}

.grid--gutter--wide > .col--2 {
  flex-basis:calc(16.6667% - 40px);
  max-width:calc(16.6667% - 40px);
}

.grid--gutter > .col--2 {
  flex-basis:calc(16.6667% - 20px);
  max-width:calc(16.6667% - 20px);
}

.col--3 {
  flex-basis:25%;
  max-width:25%;
}

.grid--gutter--wide > .col--3 {
  flex-basis:calc(25% - 40px);
  max-width:calc(25% - 40px);
}

.grid--gutter > .col--3 {
  flex-basis:calc(25% - 20px);
  max-width:calc(25% - 20px);
}

.col--4 {
  flex-basis:33.3333%;
  max-width:33.3333%;
}

.grid--gutter--wide > .col--4 {
  flex-basis:calc(33.3333% - 40px);
  max-width:calc(33.3333% - 40px);
}

.grid--gutter > .col--4 {
  flex-basis:calc(33.3333% - 20px);
  max-width:calc(33.3333% - 20px);
}

.col--5 {
  flex-basis:41.6667%;
  max-width:41.6667%;
}

.grid--gutter--wide > .col--5 {
  flex-basis:calc(41.6667% - 40px);
  max-width:calc(41.6667% - 40px);
}

.grid--gutter > .col--5 {
  flex-basis:calc(41.6667% - 20px);
  max-width:calc(41.6667% - 20px);
}

.col--6 {
  flex-basis:50%;
  max-width:50%;
}

.grid--gutter--wide > .col--6 {
  flex-basis:calc(50% - 40px);
  max-width:calc(50% - 40px);
}

.grid--gutter > .col--6 {
  flex-basis:calc(50% - 20px);
  max-width:calc(50% - 20px);
}
.col--7 {
  flex-basis:58.3333%;
  max-width:58.3333%;
}

.grid--gutter--wide > .col--7 {
  flex-basis:calc(58.3333% - 40px);
  max-width:calc(58.3333% - 40px);
}

.grid--gutter > .col--7 {
  flex-basis:calc(58.3333% - 20px);
  max-width:calc(58.3333% - 20px);
}

.col--8 {
  flex-basis:66.6667%;
  max-width:66.6667%;
}

.grid--gutter--wide > .col--8 {
  flex-basis:calc(66.6667% - 40px);
  max-width:calc(66.6667% - 40px);
}

.grid--gutter > .col--8 {
  flex-basis:calc(66.6667% - 20px);
  max-width:calc(66.6667% - 20px);
}
.col--9 {
  flex-basis:75%;
  max-width:75%;
}

.grid--gutter--wide > .col--9 {
  flex-basis:calc(75% - 40px);
  max-width:calc(75% - 40px);
}

.grid--gutter > .col--9 {
  flex-basis:calc(75% - 20px);
  max-width:calc(75% - 20px);
}
.col--10 {
  flex-basis:83.3333%;
  max-width:83.3333%;
}

.grid--gutter--wide > .col--10 {
  flex-basis:calc(83.3333% - 40px);
  max-width:calc(83.3333% - 40px);
}

.grid--gutter > .col--10 {
  flex-basis:calc(83.3333% - 20px);
  max-width:calc(83.3333% - 20px);
}
.col--11 {
  flex-basis:91.6667%;
  max-width:91.6667%;
}

.grid--gutter--wide > .col--11 {
  flex-basis:calc(91.6667% - 40px);
  max-width:calc(91.6667% - 40px);
}

.grid--gutter > .col--11 {
  flex-basis:calc(91.6667% - 20px);
  max-width:calc(91.6667% - 20px);
}
.col--12 {
  flex-basis:100%;
  max-width:100%;
}
.grid--gutter--wide > .col--12 {
  flex-basis:calc(100% - 40px);
  max-width:calc(100% - 40px);
}

.grid--gutter > .col--12 {
  flex-basis:calc(100% - 20px);
  max-width:calc(100% - 20px);
}
/* ************************************* */
/*                                       */
/* Columns Tablet                        */
/*                                       */
/* ************************************* */

@media (max-width: 769px) {

  .grid--gutter > .col--3--tablet {
    flex-basis:calc(25% - 20px);
    max-width:calc(25% - 20px);
  }
  
  .grid--gutter--wide > .col--3--tablet {
    flex-basis:calc(25% - 40px);
    max-width:calc(25% - 40px);
  }

  .grid--gutter > .col--9--tablet {
    flex-basis:calc(75% - 20px);
    max-width:calc(75% - 20px);
  }
  
  .grid--gutter--wide > .col--9--tablet {
    flex-basis:calc(75% - 40px);
    max-width:calc(75% - 40px);
  }
  
  .grid--gutter > .col--12--tablet {
    flex-basis:calc(100% - 40px);
    max-width:calc(100% - 40px);
  }
  
  .grid--gutter--wide > .col--12--tablet {
    flex-basis:calc(100% - 40px);
    max-width:calc(100% - 40px);
  }
  
}
/* ************************************* */
/*                                       */
/* Columns Smart                         */
/*                                       */
/* ************************************* */

@media (max-width: 569px) {

  .grid--gutter {
    margin-left: 0px;
    margin-right: 0px;
  }

  .grid--gutter--wide {
    margin-left: -10px;
    margin-right: -10px;
  }

  .grid--gutter > .col--3--smart {
    flex-basis:calc(25% - 20px);
    max-width:calc(25% - 20px);
  }
  
  .grid--gutter--wide > .col--3--smart {
    flex-basis:calc(25% - 40px);
    max-width:calc(25% - 40px);
  }

  .grid--gutter > .col--9--smart {
    flex-basis:calc(75% - 20px);
    max-width:calc(75% - 20px);
  }
  
  .grid--gutter--wide > .col--9--smart {
    flex-basis:calc(75% - 40px);
    max-width:calc(75% - 40px);
  }
  
  .grid--gutter > .col--12--smart {
    flex-basis:calc(100% - 40px);
    max-width:calc(100% - 40px);
  }
  
  .grid--gutter--wide > .col--12--smart {
    flex-basis:calc(100% - 40px);
    max-width:calc(100% - 40px);
  }
  
}