/* Basic boilerplate */

*,
*::before,
*::after {
    box-sizing: border-box;
}



menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
    list-style: none;
}

menu,
ol,
ul {
    padding-left: 0;
    list-style: none;
}

article ol,
article ul {
    list-style-position: inside;
}


html {
    font-size: 87.5%;
    /* (87.5/100) * 16px = 14px */
}

img {
    display: block;
    max-width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


h1,
h2,
h3 {
    font-family: "Bebas Neue";
    font-weight: 300;
}

h2,h3 {
    color: #575757;
}
h2 {
    font-size: 2.0em;
}
h3 {
    font-size: 1.5em;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #575757;
}

li {
    padding-top: 1rem;
}
main.page-content {
    padding: 0 10rem;
    width: 100%;
}

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

article.item {
    flex-shrink: 0;
    padding: 0 2rem 2rem 1rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header > img {
    height: 48px; 
}

article.aside {
    color:#353535;
    background-color: rgb(239, 235, 229);
    border-radius: 8px;
    padding:1rem 2rem;
    margin: 1rem 0rem;
}
article.aside>h3 {
    color:#353535;
}
button.cta.header {
    position: absolute;
    right: 1rem;
    width: 10rem;
}

button.cta {
    padding: 8px;
    border-radius: 10px;
}
ul, ol {
    margin-top: 0.25rem;
}
li {
    padding-top: 0.5rem;
}
h3 {
    margin-bottom: 0.55rem;
}

@media screen and (max-width:414px) {
    main.page-content {
        padding: 2rem 2rem;
    }

    article.item {
        padding: 0 1rem;
        width: 100%;
    }
  ul, ol {
        margin-top: 0;
    }
    li {
        padding-top: 0.5rem;
    }
    h3 {
        margin-bottom: 0.25rem;
    }

    button.cta.header {
     display: none !important;
     position: absolute; 
     overflow: hidden; 
     clip: rect(0 0 0 0); 
     height: 1px; width: 1px; 
     margin: -1px; padding: 0; border: 0; 
    }

    header > img {
        height: auto; 
    }
   
    
}

@media screen and (min-width: 768px) {
    article.item {
        width: 49%;
    }
 
}

@media screen and (min-width: 960px) {
    article.item {
        width: 33.333%;
    }
}

@media screen and (min-width: 1024px) {
    article.item {
        width: 25%;
    }
}
form {
    clear: both;
}
label  {
    float:left;
    clear: both;
}
input[type=text],input[type=email]  {
    clear: both;
    padding:10px;
    margin-bottom:10px; 
    float:left;
  }
textarea {
    clear: both;
    resize: vertical;
    padding:1em;
    float:left;
    margin-bottom:10px; 
}
button {
    clear: both;
    float:left;
}

footer {
    height:100em;
}