/**
 * @file
 * Is the responsive layout composition.
 *
 * Is intented to set basic layout rules to regions and global blocks.
 * Also add grid common rules.
 */



/**
 * Layout content
 */


.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.layout-content {
  padding-top: 84px;
}
.main__content {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}
.layout__region--content,
.layout__region {
  display: flex;
  flex-direction: column;
}
.node {
  overflow-x: hidden;
}
@media all and (min-width: 1000px) {
  .layout-content {
    padding-top: 39px;
  }
}

/**
 * Grid row
 */


.grid-row {
	padding: 0 1.5rem;
}
.grid-row--100{
  padding: 0;
}
@media all and (min-width: 700px) {
  .grid-row {
  	padding: 0;
    width: 90%;
    margin: 0 auto;
  }
  .grid-row--100{
    width: 100%;
    max-width: 1408px;
  }
  .grid-row--12{
    max-width: 1408px;
  }
  .grid-row--10{
    max-width: 1168px;
  }
  .grid-row--8{
    max-width: 928px;
  }
  .grid-row--6{
    max-width: 688px;
  }
}


/**
 * Vertical spacing
 */

.top-spacing--xs {
 margin-top: .25rem;
}
.top-spacing--s{
 margin-top: .5rem;
}
.top-spacing--m {
 margin-top: 1rem;
}
.top-spacing--l {
 margin-top: 2rem;
}
.top-spacing--xl {
 margin-top: 4rem;
}
.bottom-spacing--xs {
 margin-bottom: .25rem;
}
.bottom-spacing--s {
 margin-bottom: .5rem;
}
.bottom-spacing--m {
 margin-bottom: 1rem;
}
.bottom-spacing--l {
 margin-bottom: 2rem;
}
.bottom-spacing--xl{
 margin-bottom: 4rem;
}
@media all and (min-width: 1300px) {
  .top-spacing--xs {
    margin-top: .33rem;
  }
  .bottom-spacing--xs {
    margin-bottom: .33rem;
  }
}

.top-internal-spacing--xs {
 padding-top: .25rem;
}
.top-internal-spacing--s{
 padding-top: .5rem;
}
.top-internal-spacing--m {
 padding-top: 1rem;
}
.top-internal-spacing--l {
 padding-top: 2rem;
}
.top-internal-spacing--xl {
 padding-top: 4rem;
}
.bottom-internal-spacing--xs {
 padding-bottom: .25rem;
}
.bottom-internal-spacing--s {
 padding-bottom: .5rem;
}
.bottom-internal-spacing--m {
 padding-bottom: 1rem;
}
.bottom-internal-spacing--l {
 padding-bottom: 2rem;
}
.bottom-internal-spacing--xl{
 padding-bottom: 4rem;
}
@media all and (min-width: 1300px) {
  .top-internal-spacing--xs {
    padding-top: .33rem;
  }
  .bottom-internal-spacing--xs {
    padding-bottom: .33rem;
  }
}


/*
 * Layouts
 */

.layout--threecol-33-34-33,
.layout--threecol_25_25_50,
.layout--threecol_50_25_25,
.layout--kw-threecol-25-50-25,
.layout--fourcol {
  padding: 0 1.5rem;
}
.grid-row .layout--threecol-33-34-33,
.grid-row .layout--threecol_25_25_50,
.grid-row .layout--kw-threecol-25-50-25,
.grid-row .layout--threecol_50_25_25,
.grid-row .layout--fourcol {
  padding: 0;
}
@media screen and (min-width: 500px) {
  .layout--fourcol {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
  }
}
@media screen and (min-width: 550px) {
  .layout--threecol_25_25_50,
  .layout--threecol_50_25_25,
  .layout--kw-threecol-25-50-25  {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    grid-template-areas: "a b" "c c";
    gap: 1.5rem;
  }
  .layout--threecol_50_25_25 {
    grid-template-areas: "a a" "b c";
  }
  .layout--threecol_25_25_50 .layout__region--first,
  .layout--kw-threecol-25-50-25 .layout__region--first,
  .layout--threecol_50_25_25 .layout__region--first {
    grid-area: a;
  }
  .layout--threecol_25_25_50 .layout__region--second,
  .layout--kw-threecol-25-50-25 .layout__region--third,
  .layout--threecol_50_25_25 .layout__region--second {
    grid-area: b;
  }
  .layout--threecol_25_25_50 .layout__region--third,
  .layout--kw-threecol-25-50-25 .layout__region--second,
  .layout--threecol_50_25_25 .layout__region--third {
    grid-area: c;
  }
}
@media screen and (min-width: 640px) {
  .layout--threecol-33-34-33{
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
    grid-column: span 2;
  }
  .layout--threecol-33-34-33 .layout__region--third{
    grid-column: 1 / span 2;
    width: calc(50% - 0.75rem);
    justify-self: center;
  }
}
@media screen and (min-width: 900px) {
  .layout--threecol-33-34-33{
    display: grid;
    grid-template-columns: calc(33.333% - 1rem) calc(33.333% - 1rem) calc(33.333% - 1rem);
  }
  .layout--threecol-33-34-33 .layout__region--third{
    grid-column: initial;
    width: initial;
    justify-self: initial;
  }
}
@media screen and (min-width: 1000px) {
  .layout--threecol_25_25_50 {
    grid-template-columns: calc(25% - 1.5rem) calc(25% - 1.5rem) 50%;
    grid-template-areas: "a b c";
  }
  .layout--threecol_50_25_25 {
    grid-template-columns: 50% calc(25% - 1.5rem) calc(25% - 1.5rem);
    grid-template-areas: "a b c";
  }
  .layout--fourcol {
    grid-template-columns: repeat(4, calc(25% - 1.5rem));
  }
}
@media screen and (min-width: 1024px) {
  .layout--kw-threecol-25-50-25 {
    grid-template-columns: calc(25% - 1.5rem) 50% calc(25% - 1.5rem);
    grid-template-areas: "a b c";
  }
  .layout--kw-threecol-25-50-25 .layout__region--third {
    grid-area: c;
  }
  .layout--kw-threecol-25-50-25 .layout__region--second {
    grid-area: b;
  }
}

/**
 * Layout TwoCol
 */


@media screen and (min-width: 900px) {
  .layout--twocol {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .layout--twocol-75-25,
  .layout--twocol-25-75 {
    display: grid;
    gap: 1.5rem;
  }
  .layout--twocol-75-25 {
    grid-template-columns: calc(75% - 0.75rem) calc(25% - 0.75rem);
  }
  .layout--twocol-25-75 {
    grid-template-columns: calc(25% - 0.75rem) calc(75% - 0.75rem);
  }
}
@media screen and (min-width: 1300px) {
  .layout--twocol,
  .layout--twocol-75-25,
  .layout--twocol-25-75 {
    gap: 2rem;
  }
  .layout--twocol {
    grid-template-columns: repeat(2, calc(50% - 1rem));
    gap: 2rem;
  }
  .layout--twocol-75-25 {
    grid-template-columns: calc(75% - 1rem) calc(25% - 1rem);
  }
  .layout--twocol-25-75 {
    grid-template-columns: calc(25% - 1rem) calc(75% - 1rem);
  }
}