/*Variables*/
:root {
    /*Fonts*/
    --font-family: "Poppins";
    --fs-50: clamp(0.25rem, 0.5rem + 0.25vw, 1.25rem);
    --fs-75: clamp(0.5rem, 0.75rem + 0.5vw, 1.5rem);
    --fs-100: 1rem;
    --fs-112: 1.125rem;
    --fs-125: 1.25rem;
    --fs-150: clamp(1.5rem, 1.25rem + 0.25vw, 2rem);
    --fs-200: clamp(1.75rem, 1.678rem + 0.36vw, 2.252rem);
    --fs-300: clamp(2rem, 1.858rem + 0.71vw, 2.997rem);
    --fs-400: clamp(2.25rem, 2.036rem + 1.07vw, 3.749rem);
    --fs-500: clamp(2.5rem, 2.072rem + 2.14vw, 5.498rem);
    --fs-600: clamp(2.75rem, 2.25rem + 2.5vw, 6.25rem);
    --fs-700: clamp(3rem, 2.428rem + 2.86vw, 7.002rem);
    --fs-800: clamp(3.25rem, 2.608rem + 3.21vw, 7.747rem);
    --fs-900: clamp(3.5rem, 2.786rem + 3.57vw, 8.499rem);
    --fs-1000: clamp(4rem, 2.964rem + 3.93vw, 9.251rem);
    --fs-1100: clamp(4.25rem, 3.464rem + 3.93vw, 9.751rem);
    --fs-1200: clamp(4.5rem, 3.642rem + 4.29vw, 10.503rem);
    --fs-1300: clamp(4.75rem, 3.822rem + 4.64vw, 11.248rem);
    --fs-1400: clamp(5rem, 4rem + 5vw, 12rem);
    --fs-1500: clamp(5.25rem, 4.178rem + 5.36vw, 12.752rem);
    --fs-1600: clamp(5.5rem, 4.358rem + 5.71vw, 13.479rem);
    --fs-1700: clamp(5.75rem, 4.536rem + 6.07vw, 14.249rem);
    --fs-1800: clamp(6.5rem, 5.214rem + 6.43vw, 15.501rem);
    --fs-1900: clamp(7rem, 5.572rem + 7.14vw, 16.998rem);
    --fs-2000: clamp(7.5rem, 5.928rem + 7.86vw, 18.502rem);
    --fs-2100: clamp(8rem, 6.286rem + 8.57vw, 19.999rem);
    --fs-2200: clamp(8.75rem, 6.964rem + 8.93vw, 21.251rem);
    --fs-2300: clamp(9.25rem, 7.322rem + 9.64vw, 22.748rem);
    --fs-2400: clamp(9.5rem, 7.6rem + 10vw, 24rem);
    /*Colors*/
    --color-scheme: light;
    --clr-bck-white-primary: hsl(210, 8%, 90%);
    --clr-bck-white-100: hsl(240, 20%, 98%);
    --clr-bck-white-200: hsl(240, 20%, 94%);
    --clr-bck-white-300: hsl(240, 20%, 90%);
    --clr-bck-white-400: hsl(240, 20%, 86%);
    --clr-bck-blue-300: hsl(219, 76%, 55%);
    --clr-bck-blue-400: hsl(219, 76%, 40%);
    --clr-bck-blue-500: hsl(219, 76%, 25%);
    --clr-bck-secondary-300: hsl(269, 75%, 55%);
    --clr-bck-secondary-300: hsl(269, 75%, 40%);
    --clr-bck-secondary-300: hsl(269, 75%, 25%);
    --clr-bck-accent-200: hsl(358, 76%, 80%);
    --clr-bck-accent-300: hsl(358, 76%, 65%);
    --clr-bck-accent-400: hsl(358, 76%, 50%);
    --clr-bck-accent-500: hsl(358, 76%, 35%);
    --clr-bdr-white-primary: hsl(0, 0%, 100%);
    --clr-primary__purple: hsl(290, 34%, 27%);
    --clr-primary__white: hsl(0, 0%, 100%);
    --clr-bck__pink: hsl(288, 13%, 85%);
    /*Spacing*/
    --sp-base: 0.25rem;
    --sp-8: min(var(--sp-base) * 2, var(--sp-base));
    --sp-12: calc(var(--sp-base) * 3);
    --sp-16: calc(var(--sp-base) * 4);
    --sp-20: calc(var(--sp-base) * 5);
    --sp-24: calc(var(--sp-base) * 6);
    --sp-28: calc(var(--sp-base) * 7);
    --sp-32: calc(var(--sp-base) * 8);
    --sp-36: calc(var(--sp-base) * 9);
    --sp-40: calc(var(--sp-base) * 10);
    --sp-44: calc(var(--sp-base) * 11);
    --sp-48: calc(var(--sp-base) * 12);
    --sp-52: calc(var(--sp-base) * 13);
    --sp-56: calc(var(--sp-base) * 14);
    --sp-60: calc(var(--sp-base) * 15);
    --sp-64: calc(var(--sp-base) * 16);
    --sp-68: calc(var(--sp-base) * 17);
    --sp-72: calc(var(--sp-base) * 18);
    --sp-76: calc(var(--sp-base) * 19);
    --sp-80: calc(var(--sp-base) * 20);
    --sp-96: calc(var(--sp-base) * 24);
    --sp-112: calc(var(--sp-base) * 28);
    --sp-120: calc(var(--sp-base) * 30);
    --sp-128: calc(var(--sp-base) * 32);
    --sp-240: calc(var(--sp-base) * 60);
    --sp-256: calc(var(--sp-base) * 64);
    --flow-space: var(--sp-base * 4);
    /*Percentage*/
    --percent-10: 10%;
    --percent-20: 20%;
    --percent-30: 30%;
    --percent-40: 40%;
    --percent-50: 50%;
    --percent-60: 60%;
    --percent-70: 70%;
    --percent-80: 80%;
    --percent-90: 90%;
    --percent-100: 100%;
    /*Sizes*/
    --max-width: 100%;
    --page-max-width: 100vw;
    --page-max-height: 100vh;
    --content-breakout-width: 1600px;
    --content-max-width: 1440px;
    --content-inner-max-width: 1280px;
    --content-max-height: 100%;
    /*Alignment*/
    --auto: auto;
    --center: center;
}
/*==================*/
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
    outline: none;
    scroll-behavior: smooth;
}
/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
    padding: 0;
    margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}
/* Set core body defaults */
body {
    line-height: 160%;
    font-family: var(--font-family);
    background-color: var(--clr-bck-white-primary);
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 160%;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}
/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select,
a {
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
}
/* No Button Backgrounds or Borders */
button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}
/*====================*/
/*Custom CSS Utilities*/
/*====================*/
/*Logical Properties*/
.margin-auto {
    margin-inline: auto;
}
.height-auto {
    height: auto;
}
.content-size__contained-inner {
    max-inline-size: var(--content-inner-max-width);
}
.content-size__contained {
    max-inline-size: var(--content-max-width);
}
.content-size__breakout {
    max-inline-size: var(--content-breakout-width);
}
.content-size__max {
    max-inline-size: var(--max-width);
}
.content-size__960 {
    max-inline-size: 960px;
}
.content-size__640 {
    max-inline-size: 640px;
}
.min-content {
    width: min-content;
}
.align-content__center {
    align-content: center;
}
.align-content__start {
    align-content: start;
}
.align-content__end {
    align-content: end;
}
.align-self__start {
    align-self: start;
}
.align-self__end {
    align-self: end;
}
/*Position Properties*/
.isolate {
    isolation: isolate;
}
/*Display Types*/
.none {
    display: none;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}
.flex {
    display: flex;
}
.grid {
    display: grid;
}
/*Visibility*/
.hidden {
    visibility: hidden;
}
.visible {
    visibility: visible;
}
/*Flex Properties*/
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.flex-gs__4 {
    flex: 1 1 4rem;
}
.flex-gs__8 {
    flex: 1 1 8rem;
}
.flex-gs__12 {
    flex: 1 1 12rem;
}
.flex-gs__16 {
    flex: 1 1 20rem;
}
.flex-gs__20 {
    flex: 1 1 20rem;
}
.flex-gs__24 {
    flex: 1 1 24rem;
}
.flex-gs__28 {
    flex: 1 1 28rem;
}
.flex-gs__32 {
    flex: 1 1 32rem;
}
.flex-gs__36 {
    flex: 1 1 36rem;
}
.flex-gs__40 {
    flex: 1 1 40rem;
}
.flex-basis__10 {
    flex-basis: 10%
}
.flex-basis__20 {
    flex-basis: 20%
}
.flex-basis__30 {
    flex-basis: 30%
}
.flex-basis__40 {
    flex-basis: 40%;
}
.flex-basis__50 {
    flex-basis: 50%;
}
.flex-basis__60 {
    flex-basis: 60%;
}
.flex-basis__70 {
    flex-basis: 70%;
}
.flex-basis__80 {
    flex-basis: 80%;
}
.flex-basis__90 {
    flex-basis: 90%;
}
.flex-basis__100 {
    flex-basis: 100%;
}
.flex-justify__center {
    justify-content: center;
}
.flex-justify__around {
    justify-content: space-around;
}
.flex-justify__between {
    justify-content: space-between;
}
.flex-justify__even {
    justify-content: space-evenly;
}
.flex-justify__start {
    justify-content: flex-start;
}
.flex-justify__end {
    justify-content: flex-end;
}
.flex-align__center {
    align-items: center;
}
.flex-direction__col {
    flex-direction: column;
}
.flex-direction__row {
    flex-direction: row;
}
/*Grid Styles*/
.auto-grid {
    --grid-column-size: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-column-size), 100%), 1fr));
}
/*Gaps*/
.gap__1 {
    gap: 1rem;
}
.gap__2 {
    gap: 2rem;
}
.gap__3 {
    gap: 3rem;
}
.gap__4 {
    gap: 4rem;
}
.gap__5 {
    gap: 5rem;
}
.gap__6 {
    gap: 6rem;
}
.gap__7 {
    gap: 7rem;
}
.gap__8 {
    gap: 8rem;
}
/*Blocks*/
.img-block__image {
    object-fit: cover;
    object-position: center;
}
.img-block__background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%
}
.min-height__400 {
    height:max(400px, 100%);
}
.divider {
    width:100%;
    border:0;
    height:1px;
    background-color: white;
}
/*Forms*/
form {
    width: 100%;
    max-width: 300px;
}

form > #channel {
    width: 100%;
    padding: 10px;
    background-color: var(--clr-primary__white);
    border: 1px solid var(--clr-primary__purple);
}
/*Positions*/
.position-relative {
    position: relative;
}
.position-absolute {
    position: absolute;
}
.dme_svg_1 {
    width: 100%;
    max-width: 250px;
    top:28%;
    left:75%;
}
.dme_svg_2 {
    width: 100%;
    max-width: 300px;
    top:52%;
    left:0;
}
/*Alignment*/
.text-align__center {
    text-align: center;
}
.text-align__left {
    text-align: left;
}
.text-align__right {
    text-align: right;
}
.margin__right {
    margin-left: auto;
    margin-right: 0;
}
.margin__left {
    margin-left: 0;
    margin-right: auto;
}
/*Backgrounds*/
.bg__primary {
    background-color: var(--clr-primary__purple);
}
.bg__primary-white {
    background-color: var(--clr-primary__white);
}
.bg__primary-pink {
    background-color: var(--clr-bck__pink);
}
.bg__primary-dark {
    background-color: black;
}
.bg__white-100 {
    background-color: var(--clr-bck-white-100);
}
.bg__primary-gradient {
    background: linear-gradient(to bottom, var(--clr-primary__purple) 0% 50%, var(--clr-primary__white) 50% 100%);
}
.bg__primary-gradient-reverse {
    background: linear-gradient(to bottom, var(--clr-primary__white) 0% 50%, var(--clr-primary__purple) 50% 100%);
}
.bg__pink-gradient {
    background: linear-gradient(to bottom, var(--clr-bck__pink) 0% 50%, var(--clr-primary__white) 50% 100%);
}
.bg__pink-gradient-reverse {
    background: linear-gradient(to bottom, var(--clr-primary__white) 0% 50%, var(--clr-bck__pink) 50% 100%);
}
.bg__pink-gradient-reverse-2 {
    background: linear-gradient(to bottom, var(--clr-primary__white) 0% 20%, var(--clr-bck__pink) 20% 100%);
}
/*Borders*/
.outliner {
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--clr-bdr-white-primary);;
}
/*Buttons*/
.btn {
    text-decoration: none;
}
.btn__fade-purple {
    background-color: var(--clr-primary__purple);
    color: var(--clr-primary__white);
    border:1px solid var(--clr-primary__white);
    transition: background-color .25s;
}
.btn__fade-purple:hover {
    background-color: var(--clr-primary__white);
    color: var(--clr-primary__purple);
    border:1px solid var(--clr-primary__purple);
}
.btn__fade-white {
    background-color: var(--clr-primary__white);
    color: var(--clr-primary__purple);
    border:1px solid var(--clr-primary__purple);
    transition: background-color .25s;
}
.btn__fade-white:hover {
    background-color: var(--clr-primary__purple);
    color: var(--clr-primary__white);
    border:1px solid var(--clr-primary__white);
}
.btn__modal-channel-submit {
    background-color: var(--clr-primary__purple);
    color: var(--clr-primary__white);
    border-radius: 0px 25px 25px 25px;
    border:1px solid var(--clr-primary__white);
    transition: background-color .25s;
}
.btn__modal-channel-submit:hover {
    background-color: var(--clr-primary__white);
    color: var(--clr-primary__purple);
    border:1px solid var(--clr-primary__purple);
}
.btn__border-radius-4 {
    border-radius: 4px;
}
.btn__border-radius-8 {
    border-radius: 8px;
}
.btn__border-radius-12 {
    border-radius: 12px;
}
.btn__border-radius-16 {
    border-radius: 16px;
}
.btn__border-radius-20 {
    border-radius: 20px;
}
/*Transitions*/
.title_design-made-easy > span:nth-child(1) {
    opacity: 0;
    animation: fadeIn-1 1s ease forwards;
}
@keyframes fadeIn-1 {
    to {
        opacity: 1;
    }
}
.title_design-made-easy > span:nth-child(3) {
    opacity: 0;
    animation: fadeIn-2 1s ease forwards;
    animation-delay: .5s;
}
@keyframes fadeIn-2 {
    to {
        opacity: 1;
    }
}
.title_design-made-easy > span:nth-child(5) {
    opacity: 0;
    animation: fadeIn-3 1s ease forwards;
    animation-delay: 1s;
}
@keyframes fadeIn-3 {
    to {
        opacity: 1;
    }
}
/*Spacers*/
.flow > * + * {
    margin-top: 20px;
}
.pad-v-2 {
    padding-block: calc(var(--sp-base) / 2);
}
.pad-v-4 {
    padding-block: var(--sp-base);
}
.pad-v-8 {
    padding-block: var(--sp-8);
}
.pad-v-12 {
    padding-block: var(--sp-12);
}
.pad-v-16 {
    padding-block: var(--sp-16);
}
.pad-v-20 {
    padding-block: var(--sp-20);
}
.pad-v-24 {
    padding-block: var(--sp-24);
}
.pad-v-28 {
    padding-block: var(--sp-28);
}
.pad-v-32 {
    padding-block: var(--sp-32);
}
.pad-v-36 {
    padding-block: var(--sp-36);
}
.pad-v-40 {
    padding-block: var(--sp-40);
}
.pad-v-44 {
    padding-block: var(--sp-44);
}
.pad-v-48 {
    padding-block: var(--sp-48);
}
.pad-v-52 {
    padding-block: var(--sp-52);
}
.pad-v-56 {
    padding-block: var(--sp-56);
}
.pad-v-60 {
    padding-block: var(--sp-60);
}
.pad-v-64 {
    padding-block: var(--sp-64);
}
.pad-v-68 {
    padding-block: var(--sp-68);
}
.pad-v-72 {
    padding-block: var(--sp-72);
}
.pad-v-76 {
    padding-block: var(--sp-76);
}
.pad-v-80 {
    padding-block: var(--sp-80);
}
.pad-v-120 {
    padding-block: var(--sp-120);
}
.pad-v-240 {
    padding-block: var(--sp-240);
}
.pad-h-2 {
    padding-inline: calc(var(--sp-base) / 2);
}
.pad-h-4 {
    padding-inline: var(--sp-base);
}
.pad-h-8 {
    padding-inline: var(--sp-8);
}
.pad-h-12 {
    padding-inline: var(--sp-12);
}
.pad-h-16 {
    padding-inline: min(var(--sp-16), 4vw);
}
.pad-h-20 {
    padding-inline: min(var(--sp-20), 5vw);
}
.pad-h-24 {
    padding-inline: var(--sp-24);
}
.pad-h-28 {
    padding-inline: var(--sp-28);
}
.pad-h-32 {
    padding-inline: var(--sp-32);
}
.pad-h-36 {
    padding-inline: var(--sp-36);
}
.pad-h-40 {
    padding-inline: min(var(--sp-40), 10vw);
}
.pad-h-44 {
    padding-inline: var(--sp-44);
}
.pad-h-48 {
    padding-inline: var(--sp-48);
}
.pad-h-52 {
    padding-inline: var(--sp-52);
}
.pad-h-56 {
    padding-inline: var(--sp-56);
}
.pad-h-60 {
    padding-inline: var(--sp-60);
}
.pad-h-64 {
    padding-inline: var(--sp-64);
}
.pad-h-68 {
    padding-inline: var(--sp-68);
}
.pad-h-72 {
    padding-inline: var(--sp-72);
}
.pad-h-76 {
    padding-inline: var(--sp-76);
}
.pad-h-80 {
    padding-inline: var(--sp-80);
}
.spacer {
    line-height:0;
    visibility: hidden;
    border: none;
}
/*=Sizing=*/
/*Text*/
.fs-50 {
    font-size: var(--fs-50);
}
.fs-75 {
    font-size: var(--fs-75);
}
.fs-100 {
    font-size: var(--fs-100);
}
.fs-112 {
    font-size: var(--fs-112);
}
.fs-125 {
    font-size: var(--fs-125);
}
.fs-150 {
    font-size: var(--fs-150);
}
.fs-200 {
    font-size: var(--fs-200);
}
.fs-300 {
    font-size: var(--fs-300);
}
.fs-400 {
    font-size: var(--fs-400);
}
.fs-500 {
    font-size: var(--fs-500);
}
.fs-600 {
    font-size: var(--fs-600);
}
.fs-700 {
    font-size: var(--fs-700);
}
.fs-800 {
    font-size: var(--fs-800);
}
.fs-900 {
    font-size: var(--fs-900);
}
.fs-1000 {
    font-size: var(--fs-1000);
}
.fs-1100 {
    font-size: var(--fs-1100);
}
.fs-1200 {
    font-size: var(--fs-1200);
}
.fs-1300 {
    font-size: var(--fs-1300);
}
.fs-1400 {
    font-size: var(--fs-1400);
}
.fs-1500 {
    font-size: var(--fs-1500);
}
.fs-1600 {
    font-size: var(--fs-1600);
}
.fs-1700 {
    font-size: var(--fs-1700);
}
.fs-1800 {
    font-size: var(--fs-1800);
}
.fs-1900 {
    font-size: var(--fs-1900);
}
.fs-2000 {
    font-size: var(--fs-2000);
}
.fs-2100 {
    font-size: var(--fs-2100);
}
.fs-2200 {
    font-size: var(--fs-2200);
}
.fs-2300 {
    font-size: var(--fs-2300);
}
.fs-2400 {
    font-size: var(--fs-2400);
}
.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}
.fc-white {
    color: var(--clr-primary__white);
}
.fc-purple {
    color: var(--clr-primary__purple);
}
.fst-italic {
    font-style: italic;
}
.line-height__normal {
    line-height: normal
}
.line-height__80 {
    line-height: 80%;
}
.line-height__100 {
    line-height: 100%;
}
.line-height__120 {
    line-height: 120%;
}
.line-height__140 {
    line-height: 140%;
}
.line-height__160 {
    line-height: 160%;
}
.line-height__180 {
    line-height: 180%;
}
.line-height__240 {
    line-height: 240%;
}
.line-height__280 {
    line-height: 280%;
}
.ls-4 {
    letter-spacing: 4%;
}
.ls-8 {
    letter-spacing: 8%;
}
.ls-12 {
    letter-spacing: 12%;
}
.ls-16 {
    letter-spacing: 16%;
}
.ls-20 {
    letter-spacing: 20%;
}
.max-width {
    width: var(--max-width);
}
.touppercase {
    text-transform: uppercase;
}
/*Content Widths*/
.width-fit {
    width: fit-content;
}
.width-1 {
    width: var(--percent-100);
    max-width: 320px;
}
.width-2 {
    width: var(--percent-100);
    max-width: 426.67px;
}
.width-3 {
    width: var(--percent-100);
    max-width: 512px;
}
.width-4 {
    width: var(--percent-100);
    max-width: 640px;
}
.width-5 {
    width: var(--percent-100);
    max-width: 800px;
}
.width-6 {
    width: var(--percent-100);
    max-width: 960px;
}
.width-7 {
    width: var(--percent-100);
    max-width: 1140px;
}
.width-8 {
    width: var(--percent-100);
    max-width: 1280px;
}
/*================*/
/*Body Elements*/
.main {
    width: var(--max-width);
    min-height: var(--page-max-height);
}
.header {
    background-color: white;
}
.overflow-hidden {
    overflow: hidden;
}
.content-block__overflow-clip {
    overflow-x: clip;
    overflow-clip-margin: 2rem;
}
.content-block__overflow-hide {
    overflow-x: clip;
    /*overflow-clip-margin: #*/
}
.brochure {
    margin: -200px 0;
}
.video-js .vjs-poster {
    background-color: transparent !important;
    background-size: cover !important;
}
/*Hides elements off-screen to save on resources*/
.content-block__overflow-paint {
    contain: paint;
}
.content-block__bck-img--pattern {
    background-image: url(assets/KM_K_Background.png);
}
.content-block__bck-img--wireframe-gif {
    background-image: url(assets/design_wireframe.gif);
}
.content-block__bck-img--logo {
    background-image: url(assets/KM-Logo_bck.png);
}
/*Text Carousel Styling*/
/*==================*/
.container-textcarouselbtn {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 4rem;
}
/* Slideshow container */
.slideshow-container {
   position: relative;
   background: var(--purple);
   max-width: 800px;
   margin-inline: auto;
   text-align: center;
}
/* Count */
#count-text {
    position: relative;
    top: 30px;
    z-index: 0;
}
 /* Slides */
.mySlides {
   display: none;
   text-align: center;
   color: var(--white);
}
/* Next & previous buttons */
.prev-text, .next-text {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -30px;
   padding: 16px;
   color: #888;
   font-weight: bold;
   font-size: 20px;
   border-radius: 0 3px 3px 0;
   user-select: none;
   z-index: 1;
}
/* Position the "next button" to the right */
.next {
   position: absolute;
   right: 0;
   border-radius: 3px 0 0 3px;
}
.arrow-left {
    width: 60px;
    filter: invert(100%) sepia(79%) saturate(0%) hue-rotate(360deg) brightness(1000%) contrast(100%);
}
.arrow-right {
    width: 60px;
    filter: invert(100%) sepia(79%) saturate(0%) hue-rotate(360deg) brightness(1000%) contrast(100%);
}
.arrow-left-white {
   width: 60px;
}
/*Modals*/
.modal-overlay {
    position: fixed;
    width: var(--page-max-width);
    height: var(--page-max-height);
    top: 0;
    left: 0;
    background-color: hsl(0, 0%, 0%, .4);
}
.modal-channel {
    position: fixed;
    width: var(--max-width);
    top: 25%;
}
.modal-select {
    padding: 10px;
    width: 100%;
}
/*Media Queries*/
/*=============*/
/*1600*/

/*1280px*/
@media screen and (width < 1280px) {

    .title_design-made-easy {
        font-size: 12rem;
        text-align: center !important;
    }
    .title_design-made-easy--easy {
       text-align: center !important;
    }
    .modal-channel {
        width: auto;
    }
    .form__container {
        width: auto;
        gap: 2rem;
    }
    .dme_svg_1 {
        width: 100%;
        max-width: 250px;
        top:15%;
        left:50%;
    }
    .dme_svg_2 {
        width: 100%;
        max-width: 300px;
        top:52%;
        left:0;
    }
    .brochure {
        margin: -120px 0;
    }
}
/*960px*/
@media screen and (width < 960px) {

    .title_design-made-easy {
        font-size: 10rem;
        text-align: center !important;
    }
     .title_design-made-easy--easy {
        text-align: center !important;
     }
     .modal-text {
        font-size: 1rem;
        padding: 20px 0px;
     }
     .text-wrapper {
         font-size: 6rem;
         text-align: center;
     }
}
@media screen and (width < 640px) {

    .title_design-made-easy {
        font-size: 7.5rem;
        text-align: center !important;
    }
    .title_design-made-easy--easy {
       text-align: center !important;
    }
    .dme_svg_1 {
        width: 100%;
        max-width: 250px;
        top:15%;
        left:0;
    }
    .dme_svg_2 {
        width: 100%;
        max-width: 300px;
        top:52%;
        left:0;
    }
    .brochure {
        margin: -40px 0;
    }
    .header-wrapper {
        justify-content: center;
    }
    .text-wrapper {
        font-size: 4rem;
        text-align: center;
    }
    .footer-nav {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-inner {
        justify-content: center;
    }
}
/*480*/
@media screen and (width < 480px) {

    .title_design-made-easy {
        font-size: 5rem;
        text-align: center !important;
    }
    .title_design-made-easy--easy {
       text-align: center !important;
    }
    .brochure {
        margin: 0;
    }
    .text-wrapper {
        font-size: 2rem;
        text-align: center;
    }
}
/*320*/
@media screen and (width < 320px) {

    .title_design-made-easy {
        font-size: 4rem;
        text-align: center !important;
    }
    .title_design-made-easy--easy {
       text-align: center !important;
    }
}
/*240*/
@media screen and (width < 320px) {

    .title_design-made-easy {
        font-size: 3rem;
        text-align: center !important;
    }
    .title_design-made-easy--easy {
       text-align: center !important;
    }
}
