*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
}

:host {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  display: block;
  flex: 1 0 auto;
  width: 100%;
}

:host(.duet-middle) .duet-layout {
  padding: 36px 28px !important;
}
@media (min-width: 36em) {
  :host(.duet-middle) .duet-layout {
    padding: 48px 36px !important;
  }
}
@media (min-width: 62em) {
  :host(.duet-middle) .duet-layout {
    padding: 56px !important;
  }
}

:host(.duet-ie) {
  height: 100%;
}

:host(.duet-middle.duet-ie) {
  height: auto;
}

.duet-layout-wrapper {
  display: block;
  margin: 48px 0 36px;
  overflow-x: clip;
}
@media (min-width: 36em) {
  .duet-layout-wrapper {
    margin-top: 72px;
  }
}
@media (min-width: 62em) {
  .duet-layout-wrapper {
    margin-bottom: 48px;
  }
}
.duet-layout-wrapper.duet-m-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.duet-layout-wrapper > * {
  width: 100%;
}

.duet-layout {
  position: relative;
  padding: 0 16px;
  margin: 0 auto;
}
@media (max-width: 20.5em) {
  .duet-layout.padding-xxx-small {
    padding: 0;
  }
}
@media (max-width: 22.5em) {
  .duet-layout.padding-xx-small {
    padding: 0;
  }
}
@media (max-width: 35.9375em) {
  .duet-layout.padding-x-small {
    padding: 0;
  }
}
@media (min-width: 36em) {
  .duet-layout.padding-small {
    padding: 0;
  }
}
@media (min-width: 48em) {
  .duet-layout.padding-medium {
    padding: 0;
  }
}
@media (min-width: 62em) {
  .duet-layout.padding-large {
    padding: 0;
  }
}
@media (min-width: 64.0625em) {
  .duet-layout.padding-x-large {
    padding: 0;
  }
}
@media (min-width: 76.25em) {
  .duet-layout.padding-xx-large {
    padding: 0;
  }
}
@media (min-width: 106.25em) {
  .duet-layout.padding-xxx-large {
    padding: 0;
  }
}
@media (min-width: 36em) {
  .duet-layout {
    padding: 0 28px;
  }
}
@media (min-width: 62em) {
  .duet-layout {
    display: flex;
    flex-direction: row;
    padding: 0 56px;
  }
}
@media (min-width: 76.25em) {
  .duet-layout {
    max-width: 1110px;
    padding: 0;
  }
}

.duet-main {
  display: block;
  width: 100%;
}
@media (min-width: 62em) {
  .duet-main {
    min-width: 600px;
    margin: 0 auto;
  }
}