/* slant variables */
:root {
                 --slant-height:   7vw;
         --padding-inside-slant:  12vw;
  --mobile-padding-inside-slant:   12vw;
}

header {
  height: unset;
}

@supports(-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {


header {
  height: 100px;
}

/* this clears the gap between to slanted sections */
section ~ section.top-slant-up-and-no-bottom-slant,
section ~ section.top-slant-down-and-no-bottom-slant,
section ~ section.top-slant-down-and-bottom-slant-up,
section ~ section.top-slant-up-and-bottom-slant-up,
section ~ section.top-slant-down-and-bottom-slant-down,
section ~ section.top-slant-up-and-bottom-slant-down {
  margin-top: calc(-1 * var(--slant-height) - 1px);
}

section ~ section.no-top-slant-and-no-bottom-slant {
  margin-top:-10px;
}

.no-top-slant-and-no-bottom-slant {
  padding-top: var(--padding-inside-slant)/3;
  padding-bottom: var(--padding-inside-slant)/3;
}

.top-slant-up-and-no-bottom-slant {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 var(--slant-height));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 var(--slant-height));
  padding-top: var(--padding-inside-slant);
  /* padding-bottom: var(--padding-inside-slant)/3; */
}

@media screen and (max-width: 768px) {
  .top-slant-up-and-no-bottom-slant {
    padding-top: var(--mobile-padding-inside-slant);
    padding-bottom: var(--mobile-padding-inside-slant);
  }
}

.top-slant-down-and-no-bottom-slant {
  clip-path: polygon(0 100%, 100% 100%, 100% var(--slant-height), 0 0);
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% var(--slant-height), 0 0);
  padding-top: var(--padding-inside-slant);
  /* padding-bottom: var(--padding-inside-slant)/3; */
}
@media screen and (max-width: 768px) {
  .top-slant-down-and-no-bottom-slant {
    padding-top:var(--mobile-padding-inside-slant);
    padding-bottom:var(--mobile-padding-inside-slant);
  }
}

.no-top-slant-and-bottom-slant-up {
  clip-path: polygon(0 100%, 100% calc(100% - var(--slant-height)), 100% 0, 0 0);
  -webkit-clip-path: polygon(0 100%, 100% calc(100% - var(--slant-height)), 100% 0, 0 0);
  /* padding-top: var(--padding-inside-slant)/3; */
  padding-bottom: var(--padding-inside-slant);
}
@media screen and (max-width: 768px) {
  .no-top-slant-and-bottom-slant-up {
    padding-top: var(--mobile-padding-inside-slant);
    padding-bottom: var(--mobile-padding-inside-slant);
  }
}

.no-top-slant-and-bottom-slant-down {
  clip-path: polygon(0 calc(100% - var(--slant-height)), 100% 100%, 100% 0, 0 0);
  -webkit-clip-path: polygon(0 calc(100% - var(--slant-height)), 100% 100%, 100% 0, 0 0);
  /* padding-top: var(--padding-inside-slant)/3; */
  padding-bottom: var(--padding-inside-slant);
}

@media screen and (max-width: 768px) {
  .no-top-slant-and-bottom-slant-down {
    padding-top: var(--mobile-padding-inside-slant);
    padding-bottom: var(--mobile-padding-inside-slant);
  }
}

.top-slant-down-and-bottom-slant-up {
  clip-path: polygon(0 100%, 100% calc(100% - var(--slant-height)), 100% var(--slant-height), 0 0);
  -webkit-clip-path: polygon(0 100%, 100% calc(100% - var(--slant-height)), 100% var(--slant-height), 0 0);
  padding: var(--padding-inside-slant) 0;
}
@media screen and (max-width: 768px) {
  .top-slant-down-and-bottom-slant-up { padding: var(--mobile-padding-inside-slant) 0; }
}

.top-slant-down-and-bottom-slant-down {
  clip-path: polygon(0 calc(100% - var(--slant-height)), 100% 100%, 100% var(--slant-height), 0 0);
  -webkit-clip-path: polygon(0 calc(100% - var(--slant-height)), 100% 100%, 100% var(--slant-height), 0 0);
  padding: var(--padding-inside-slant) 0;
}
@media screen and (max-width: 768px) {
  .top-slant-down-and-bottom-slant-down { padding: var(--mobile-padding-inside-slant) 0; }
}

.top-slant-up-and-bottom-slant-up {
  clip-path: polygon(0 100%, 100% calc(100% - var(--slant-height)), 100% 0, 0 var(--slant-height));
  -webkit-clip-path: polygon(0 100%, 100% calc(100% - var(--slant-height)), 100% 0, 0 var(--slant-height));
  padding: var(--padding-inside-slant) 0;
}
@media screen and (max-width: 768px) {
  .top-slant-up-and-bottom-slant-up { padding: var(--mobile-padding-inside-slant) 0; }
}

.top-slant-up-and-bottom-slant-down {
  clip-path: polygon(0 calc(100% - var(--slant-height)), 100% 100%, 100% 0, 0 var(--slant-height));
  -webkit-clip-path: polygon(0 calc(100% - var(--slant-height)), 100% 100%, 100% 0, 0 var(--slant-height));
  padding: var(--padding-inside-slant) 0;
}
@media screen and (max-width: 768px) {
  .top-slant-up-and-bottom-slant-down { padding: var(--mobile-padding-inside-slant) 0; }
}

}