header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    background-image: -webkit-linear-gradient(#E0E0E0,#cfd8df);
    text-align: center;
    position: fixed;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    line-height: 1.5;
}
.logo {
    grid-column: 1;
}

.logo img {
    width: 5em;
    vertical-align: middle;
    padding: 4px 0;
}

.contact {
    grid-column: 2;
}

.button_switch {
    grid-column: 3;

    background: transparent;
    
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    padding-right: 2em;
    font: 1em "Arial";
    
    -webkit-box-shadow: 0 1em 0 #1b383b;
    -moz-box-shadow: 0 1em 0 #1b383b;
    box-shadow: 0 0 0 #1b383b;

}

main {
    padding: 1em 20%;
    padding-top: 4em;
}

ul {
    justify-items: center;
    align-items: center
}

wrapper {
    display: grid;
    grid-template-columns: repeat(1, [col-start] 1fr);
  }

  .item1 {
    grid-column: col-start  1 / span 3;
    grid-row: 1;
  }

  .item2 {
    grid-column: col-start  1 / span 3;
    grid-row: 2;
  }

  .item3 {
    grid-column: col-start 1 / span 3;
    grid-row: 3;
  }

  .item4 {
    grid-column: col-start 1 / span 3;
    grid-row: 5;
  }

  .item5 {
    grid-column: col-start 1 / span 3;
    grid-row: 6;
  }

  .item6 {
    grid-column: col-start 1 / span 3;
    grid-row: 7;
  }

  .item7 {
    grid-column: col-start 1 / span 3;
    grid-row: 8;
  }

 .item8 {
    grid-column: col-start 1 / span 3;
    grid-row: 9;
  }


#table  {
    border-collapse: collapse;    
}

#table td {
    padding: 0.5em 1em;
    grid-column: col-start 1 / span 1;
}

.wrapper_small {
    display: grid;
    grid-template-columns: repeat(2, [col-start] 1fr);
    grid-template-columns: 1em;

}

.item_image1 {
    grid-column: col-start 1 / span 1;
    grid-row: 1;
}

.item_text1{
    grid-column: col-start 2 / span 2;
    grid-row: 1;
}

.item_text2 {
    grid-column: col-start 1 / span 1;
    grid-row: 1;
}

.item_image2 {
    grid-column: col-start 2 / span 2;
    grid-row: 1;
}
  
h1 {
    padding-top: 1em;
    font-family:'Arial';
    color: #0a0a0a;
    position: center;
    text-align: center;
}

h2 {
    font-family: 'Arial';
    color: #666;
    position: center;
    padding-top: 3em;
    text-align: center;
}

h3 {
    padding-top: 1.5em;
    font-family: Arial;
    color: #0a0a0a;
}

.copyright {
    font-family: Arial;
    color: #666;
}


.contact-label {
    font-family: Arial;
    color: #666;
    font-weight: bold;
}

.activity {
    font-family: Arial;
    color: #0a0a0a;
    font-weight: bold;
}

.products-name {
    font-family: Arial;
    color: #0a0a0a;
    font-weight: bold;
}

.clients {
    font-family: Arial;
    color: #0a0a0a;
    font-weight: bold;
}

a {
    text-decoration: none;
    font-family: Arial;
    color: #666;
    text-underline-position: none; 
    max-width:fit-content;
    width: 100%;
}

a:hover {
    color: #f2f2f2;
}     


@media screen and (max-width: 375px) {
    header {
        font-size: 12pt;
    }
    .logo {
        font-size: 10pt;
    }
    main {
        padding: 4em 4px 0 1em;
    }
    body {
        font-size: 12pt;
    }
    #table td {
        padding: 0em 0em;
        font-size: 12pt;
        grid-column: col-start 1 / span 1;
    }
    .wrapper_small{
        display: table;
        text-align: center;
        grid-template-rows: 1em;
    }
    .item_image1 {
        padding-inline: 3em;
    }
    .item_image2 {
        padding-inline: 3em;
    }

    ul {
        justify-items: center;
        text-align: left;
    }
}

@media screen and (max-width: 330px) {
    header {
        font-size: 12pt;
    }
    .logo {
        font-size: 10pt;
    }
    main {
        padding: 10%;
        padding-top: 4em;
    }
    body {
        font-size: 12pt;
    }
    #table td {
        padding: 0em 0em;
        font-size: 12pt;
        grid-column: col-start 1 / span 1;
    }
    .wrapper_small {
        display: table;
        text-align: center;
        grid-template-rows: 0.5em;
        padding-inline: 10%;
    }
    .item_image1 {
        padding-inline: 10em;
    }
    .item_image2 {
        padding-inline: 10em;
    }
    .item_text1{
        padding-left: 0em;
    }
    ul {
        justify-items: center;
        text-align: left;
    }
}