body {
    box-sizing: border-box;
    font-family: 'Lato', Helvetica, sans-serif;
    background-image: 
        linear-gradient(
            rgba(30, 131, 238, 0.5), 
            rgba(30, 131, 238, 0.2)
        ),
        url("water-background-2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0%;
    padding: 0%;
}

#wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: minmax(5vw, auto) auto minmax(5vw, auto);
    grid-template-areas: 
        'topbar topbar topbar topbar topbar topbar topbar'
        'sidebar mainbar mainbar mainbar mainbar mainbar mainbar'
        'footer footer footer footer footer footer footer';
    max-width: 100%;
    overflow-x: hidden;
}

#topbar {
    /*background-color: pink;*/
    grid-area: topbar;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: minmax(5vw, auto) minmax(5vw, auto);
    grid-template-areas: 
        'logo social social social social'
        'logo menu menu menu menu';
    margin-bottom: 1vw;
}

    #logo {
        grid-area: logo;
        background-color: white;
        /*border: solid 1px red;*/
    }

    #social {
        grid-area: social;
        /*border: solid 1px red;*/
        display: flex;
        justify-content: space-around;
        background-color: rgb(207, 239, 247);
        color: #1E83EE;
        font-size: 1.2em;
        font-weight: 900;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    }

    .social-item {
        box-sizing: border-box;
        width: 20%;
        display: table;
        height: 100%;
        margin-top: -2px;
        margin: 0 5px;
    }

    .social-item:hover {
        color: navy;
        border-bottom: 10px solid navy;
    }

    .child {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .child i {
        padding: 0;
        margin: 0;
        height: 1em;
        margin-right: 0.4em;
        font-size: 1.5em;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    }

    #menu {
        grid-area: menu;
        /*border: solid 1px red;*/
        display: flex;
        justify-content: space-around;
        background-color: navy;
        color: rgb(207, 239, 247);
        font-size: 1.2em;
        font-weight: 900;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    }

    .menu-item {
        box-sizing: border-box;
        width: 33%;
        display: table;
        height: 100%;
        margin-top: -2px;
    }

    .menu-item:hover {
        color: #1E83EE;
        border-bottom: 10px solid #1E83EE;
    }

#sidebar {
    /*background-color: saddlebrown;*/
    /*border: 1px solid white;*/
    grid-area: sidebar;
    display: flex;
    justify-content: center;
    background-color: navy;
    color: rgb(207, 239, 247);
    border-radius: 10px;
    margin-top: 20px;
}

    #sidebar ul {
        padding: 0px;
        width: 90%;
    }

    #sidebar li {
        list-style: none;
    }

    #sidebar li > button {
        /*margin-bottom: 40px;
        background-color: rgb(207, 239, 247);
        color: navy;
        font-size: 1.25em;
        font-weight: 900;
        padding: 12px;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: 'Lato', Helvetica, sans-serif;
        width: 100%;
        border-radius: 5px;*/
        width: 100%;
        height: 80px;    
        background: linear-gradient(to bottom, #4eb5e5 0%,#389ef5 100%);
        border: none;
        border-radius: 5px;
        /*position: relative;*/
        border-bottom: 4px solid #2b8bc6;
        color: #fbfbfb;
        font-weight: 700;
        font-family: 'Open Sans', sans-serif;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        /*font-size: 15px;*/
        /*text-align: left;*/
        /*text-indent: 5px;*/
        box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        /*padding: 0;*/
      
      /* Just for presentation */  
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    #sidebar li > button:hover {
        background-color: #1E83EE;
        color: rgb(207, 239, 247);
    }

    #subbtwrapper {
        margin-top: 0px;
    }

    #subbtwrapper ul {
        width: 70%;
        margin: auto;
    }

    #subbtwrapper ul li {
        width: 100%;
    }

    .bticemachinestype {
        margin-bottom: 20px !important;
        margin-top: 20px !important;
        background: none !important;
        background-color: #77CC44 !important;
        color: white !important;
        /*font-size: 1.1em !important;*/
        padding: 8px !important;
        border: none !important;
        cursor: pointer !important;
        border-radius: 10px !important;
        /*font-family: 'Lato', Helvetica, sans-serif !important;*/
        width: 100% !important;
        height: 3em !important;
        border-bottom: 4px solid #207837 !important;
        /*margin-left: 15px !important;*/
    }
    
    /* Set the size of the div element that contains the map */
    #map {
        height: auto; /* The height is 200 pixels */
        width: 100%; /* The width is the width of the web page */
    }

#mainbar {
    /*background-color: lime;*/
    grid-area: mainbar;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: minmax(11vw, auto) minmax(11vw, auto) minmax(5vw, auto) auto;
    grid-template-areas: 
        'whatsapp whatsapp icemachine icemachine'
        'whatsapp whatsapp filter maintenance'
        'carrousel carrousel carrousel carrousel'
        'products products products products ';
    grid-gap: 20px;
    padding: 20px;
}

    #whatsapp {
        grid-area: whatsapp;
        /*border: solid 1px orange;*/
        border-radius: 30px;
        overflow: hidden;
        border: 8px solid white;
        background-color: white;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #whatsapp a {
        text-decoration: none;
    }

    .whatsapp-text-1 {
        text-align: center;
        font-weight: 900;
        color: rgb(255, 255, 255);
        /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
        --darkreader-inline-color:#b9b6b1;
        --darkreader-inline-bgimage: initial;
        --darkreader-inline-bgcolor:#202122;*/
        font-size: 2.5em;
        padding-top: 10%;
        margin-top: 100px;
        margin-bottom: 0;
        text-shadow: 1px 2px 2px rgba(0,0,0,.5);
    }

    .whatsapp-text-2 {
        text-align: center;
        font-weight: 900;
        color: rgb(255, 255, 255);
        /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
        --darkreader-inline-color:#b9b6b1;
        --darkreader-inline-bgimage: initial;
        --darkreader-inline-bgcolor:#202122;*/
        font-size: 1.5em;
        padding-top: 2%;
        margin-top: 0;
        text-shadow: 1px 3px 2px rgba(0,0,0,.6);
    }

    #icemachine {
        grid-area: icemachine;
        /*border: solid 1px orange;*/
        border-radius: 30px;
        overflow: hidden;
        border: 6px solid white;
        background-color: white;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #filter {
        grid-area: filter;
        /*border: solid 1px orange;*/
        border-radius: 30px;
        overflow: hidden;
        border: 6px solid white;
        background-image: url('filtro3.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    #maintenance {
        grid-area: maintenance;
        /*border: solid 1px orange;*/
        background-color: white;
        background-image: url('Assistência-Técnica-Mairless.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        border-radius: 30px;
        overflow: hidden;
        border: 6px solid white;
    }

    #carrousel {
        grid-area: carrousel;
        /*border: solid 1px orange;*/
        display: flex;            /* new */
        align-items: center;      /* new */
        justify-content: center;  /* new */
        font-size: 18px;
        background-color: rgb(207, 239, 247);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        color: navy;
        font-weight: 700;
        border-radius: 10px;
    }

    #products {
        grid-area: products;
        /*border: solid 1px orange;*/
        display: grid;
        padding: 10px;
        padding-bottom: 5%;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
        grid-gap: 1%;
        grid-row-gap: 4%;
    }

        #item {
            border: solid 1px blue;
        }

        /*#item::before {
            content: "";
            padding-bottom: 100%;
            display: inline-block;
            vertical-align: top;
        }*/

#footer {
    /*background-color: navy;*/
    grid-area: footer;
    margin-top: 1em;
    border-radius: 0.5em;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: auto minmax(5vw, auto) minmax(5vw, auto) minmax(5vw, auto) minmax(5vw, auto);
    grid-template-areas: 
        'bar bar bar bar bar bar bar bar bar'
        'side ice ice ice ice ice ice ice ice'
        'side ice ice ice ice ice ice ice ice'
        'side filt filt filt filt filt filt filt filt'
        'side filt filt filt filt filt filt filt filt';
        grid-gap: 5px;
        /*padding: 10px;*/
}

#bar {
    grid-area: bar;
    background-color: navy;
    border-radius: 5px;
}

#bar ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color:white;
    font-size: 0.9em;
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#bar ul li {
    
}

#side {
    grid-area: side;
    border: 1px solid white;
    background-color: rgba(30, 131, 238, 0.75)
}

#side ul {
    list-style: none;
    padding: 1em;
}

#side ul li {
    padding: 1em 0;
    text-align: center;
    font-size: 0.75em;
    font-weight: 900;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#ice {
    grid-area: ice;
    border: 1px solid lightblue;
    background-color: rgba(30, 131, 238, 0.5);
}

.p-title-footer {
    margin-left: 2em;
    font-weight: 700;
    letter-spacing: 2.25px;
}

.btn-class-footer {
    background-color: rgb(0, 74, 121);
    border: none;
    padding: 0.5em;
    margin-right: 1em;
    border-radius: 5px;
}

.btn-class-footer p {
    margin: 0;
}

.btn-p-title {
    font-size: 0.8em;
    color: rgb(192, 192, 192);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.btn-p-text {
    font-size: 0.9em;
    font-weight: 900;
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#ice ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#filt {
    grid-area: filt;
    background-color: rgba(30, 131, 238, 0.5);
}

#filt ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 calc(40px - 1em);
}

#filt ul li {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0 1em;
}

#filt img {
    border-radius: 8px;
}

/* página do contato/orçamento */
#wrapper-1 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: minmax(10vw, auto) auto minmax(10vw, auto);
    grid-template-areas: 
        'topbar topbar topbar topbar topbar topbar topbar'
        'sidebar mainbar-1 mainbar-1 mainbar-1 mainbar-1 mainbar-1 mainbar-1 '
        'footer footer footer footer footer footer footer';
}

#mainbar-1 {
    display: grid;
    grid-area: mainbar-1;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(0vw, auto) minmax(0vw, auto) minmax(75vw, auto); 
    grid-template-areas: 
        'ice ice'
        'filter maintenance'
        'contact contact';
    /*background-color: aqua;*/
}

#icemachine-1 {
    grid-area: ice;
    /*border: 1px solid palevioletred;*/
}

    #icemachine-1 img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

#filter-1 {
    grid-area: filter;
    /*border: 1px solid wheat;*/
}

#maintenance-1 {
    grid-area: maintenance;
    /*border: 1px solid goldenrod;*/
}

#contact {
    grid-area: contact;
}

    #contact h2 {
        text-align: center;
    }

    #contact form {
        width: 60%;
        margin: auto;
        background-color: rgba(30, 131, 238, 0.3);
        padding: 5% 0;  
    }

    #contact input[type=text] {
        display: block;
        margin: 0.5em auto;
        width: 80%;
        height: 1.5em;
    }

    #contact #span_button {
        box-sizing: content-box;
        display: block;
        margin: 0.5em auto;
        width: 80%;
        height: 1.5em;
        background-color: #1E83EE;
        padding-bottom: 0.5em;
        padding-top: 0.5em;
        border: none;
        color: navy;
        font-size: 1.25em;
        font-weight: 700;
        border-radius: 7px;
        margin-top: 15px;
        text-align: center;
        line-height: 1.5em;
    }
    
    #contact #span_button:hover {
        background-color: orange;
        color: #006400;
    }

    #contact #service {
        display: block;
        margin: 0.5em auto;
        width: 80%;
        height: 2.5em;
    }

    #contact label {
        font-size: 1.25em;
        font-weight: 900;
        color: navy;
        margin-left: 10%;
    }

/* Página de categoria de produtos */
#wrapper-2 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: minmax(10vw, auto) minmax(10vw, auto)  minmax(10vw, auto);
    grid-template-areas: 
        'topbar topbar topbar topbar topbar topbar topbar'
        'sidebar mainbar-2 mainbar-2 mainbar-2 mainbar-2 mainbar-2 mainbar-2'
        'footer footer footer footer footer footer footer';
    border: solid 1px khaki;
}

#mainbar-2 {
    display: grid;
    grid-area: mainbar-2;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(5vw, auto) minmax(35vw, auto); 
    grid-template-areas: 
        'whatsapp-1 budget-1'
        'products-1 products-1';
    /*background-color: aqua;*/
}

#whatsapp-1 {
    grid-area: whatsapp-1;
    border-radius: 30px;
    overflow: hidden;
    border: 8px solid white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 1em;
}

#budget-1 {
    grid-area: budget-1;
    /*border: solid 1px hotpink;*/
    background-image: url("bt-representante.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-color: rgb(9, 67, 108);
    border-radius: 30px;
    overflow: hidden;
    border: 8px solid white;
    margin: 1em;
}

#products-1 {
    grid-area: products-1;
    /*border: solid 1px greenyellow;*/
    display: grid;
    padding: 3%;
    padding-bottom: 10%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    row-gap: 10%;
    column-gap: 1%;
    margin: 1em;
}

/* product-page */

#wrapper-3 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 10vw auto minmax(10vw, auto);
    grid-template-areas: 
        'topbar topbar topbar topbar topbar topbar topbar'
        'sidebar mainbar-3 mainbar-3 mainbar-3 mainbar-3 mainbar-3 mainbar-3'
        'footer footer footer footer footer footer footer';
    /*border: solid 1px khaki;
    background-color: blueviolet;*/
}

#mainbar-3 {
    grid-area: mainbar-3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        'model model'
        'image data'
        'features features';
    padding-top: 10px;
    padding-left: 150px;
    padding-right: 150px;
    /*background-color: aqua;*/
}

#model {
    grid-area: model;
    background-color: navy;
    /*border: 1px solid lightgray;*/
    margin: 10px 10px 0px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image-filter {
    grid-area: image;
    padding: 10px;
    padding-bottom: 0px;
    margin: 10px;
    margin-bottom: 0px;
    /*background-color: maroon;
    border: 1px solid lightgray;*/
    border-radius: 20px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#image-icemachine {
    grid-area: image;
    padding: 10px;
    margin: 10px;
    /*background-color: maroon;
    border: 1px solid lightgray;*/
    border-radius: 20px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#data {
    grid-area: data;
    background-color: navy;
    /*border: 1px solid lightgray;*/
    padding-left: 10%;
    padding-top: 10%;
    /*padding-bottom: 10%;*/
    margin: 10px 10px 12px 0px;
    border-radius: 12px;
    margin-bottom: 0px;
}

.strong {
    font-weight: bold;
    font-size: 18px;
    color: #8C9A93
}

.normal {
    font-size: 14px;
    color: #8C9A93
}

#features {
    grid-area: features;
    background-color: rgb(29, 34, 38);
    margin: 10px;
    padding-left: 20%;
    padding-top: 1%;
    border-radius: 15px;
    /*border: 1px solid lightgray;*/
}

/* Product card */
.item {
    position: relative;
    width: 100%;
    min-width: 0px;
    min-height: 0px;
}

.product-image {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    width: 100%;
    height: 100%;
    /*transform: translateY(-7%);*/
}

.product-button {
    /*position: absolute;*/
    width: 100%;
    /*top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    background-color: #1E83EE;
    color: rgb(207, 239, 247);
    font-size: 18px;
    padding: 12px;
    border: none;
    cursor: pointer;
    border-radius: 0px 0px 20px 20px;
    font-family: 'Lato', Helvetica, sans-serif;
    transform: translateY(-40%);
}

.model-button {
    /*position: absolute;*/
    width: 100%;
    /*top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    background-color: navy;
    color: rgb(207, 239, 247);
    font-size: 18px;
    padding: 12px;
    border: none;
    cursor: pointer;
    border-radius: 0px 0px 1px 1px;
    font-family: 'Lato', Helvetica, sans-serif;
    transform: translateY(-40%);
}

.product-button:hover {
    background-color: #77CC44;
    font-weight: 900;
}

@media only screen and (max-width : 1024px) {
    #wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(5vw, auto) auto minmax(5vw, auto);
        grid-template-areas: 
            'topbar topbar topbar topbar topbar'
            'mainbar mainbar mainbar mainbar mainbar'
            'footer footer footer footer footer ';
    }

    #sidebar {
        display: none;
    }

    #maintenance {
        grid-area: maintenance;
        /*border: solid 1px orange;*/
        background-color: white;
        background-image: url('Assistência-Técnica-Mairless.png');
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 0px;
        overflow: hidden;
        border: 6px solid white;
    }

    #icemachine {
        grid-area: icemachine;
        /*border: solid 1px orange;*/
        border-radius: 0px;
        overflow: hidden;
        border: 6px solid white;
        background-color: white;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }

    #filter {
        grid-area: filter;
        /*border: solid 1px orange;*/
        border-radius: 0px;
        overflow: hidden;
        border: 6px solid white;
        background-image: url('filtro3.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        background-color: white;
    }
}

@media only screen and (max-width : 768px) {
    #wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(5vw, auto) auto minmax(5vw, auto);
        grid-template-areas: 
        'topbar topbar topbar topbar topbar'
        'mainbar mainbar mainbar mainbar mainbar'
        'footer footer footer footer footer';
    }

    #topbar {
        /*background-color: pink;*/
        grid-area: topbar;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(5vw, auto) minmax(5vw, auto);
        grid-template-areas: 
            'logo social social social social'
            'logo menu menu menu menu';
        margin-bottom: 1vw;
    }

        #logo {
            grid-area: logo;
            /*border: solid 1px red;*/
        }
    
        #social {
            grid-area: social;
            /*border: solid 1px red;*/
            display: flex;
            justify-content: space-around;
            background-color: rgb(207, 239, 247);
            color: #1E83EE;
            font-size: 1em;
            font-weight: 700;
        }
    
        .social-item {
            box-sizing: border-box;
            width: 20%;
            display: table;
            height: 100%;
            margin-top: -2px;
            margin: 0 5px;
        }
    
        .social-item:hover {
            color: navy;
            border-bottom: 10px solid navy;
        }
    
        .child {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    
        .child i {
            padding: 0;
            margin: 0;
            height: 1em;
            margin-right: 0.4em;
        }
    
        #menu {
            grid-area: menu;
            /*border: solid 1px red;*/
            display: flex;
            justify-content: space-around;
            background-color: navy;
            color: rgb(207, 239, 247);
            font-size: 1em;
            font-weight: 700;
        }
    
        .menu-item {
            box-sizing: border-box;
            width: 33%;
            display: table;
            height: 100%;
            margin-top: -2px;
        }
    
        .menu-item:hover {
            color: #1E83EE;
            border-bottom: 10px solid #1E83EE;
        }

        #sidebar {
            display: none;
            grid-area: sidebar;
            justify-content: center;
            background-color: navy;
            color: rgb(207, 239, 247);
            border-radius: 10px;
            margin-top: 10px;
            width: 0;
        }

        #mainbar {
            /*background-color: lime;*/
            grid-area: mainbar;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) auto;
            grid-template-areas: 
                'whatsapp'
                'whatsapp'
                'icemachine'
                'icemachine'
                'maintenance'
                'maintenance'
                'products';
            grid-gap: 20px;
            padding: 10px;
        }

        #whatsapp {
            grid-area: whatsapp;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 8px solid white;
            background-color: white;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 7%;
        }

        #whatsapp a {
            text-decoration: none;
        }

        .whatsapp-text-1 {
            text-align: center;
            font-weight: 900;
            color: rgb(255, 255, 255);
            /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
            --darkreader-inline-color:#b9b6b1;
            --darkreader-inline-bgimage: initial;
            --darkreader-inline-bgcolor:#202122;*/
            font-size: 2.5em;
            padding-top: 10%;
            margin-top: 100px;
            margin-bottom: 0;
        }

        .whatsapp-text-2 {
            text-align: center;
            font-weight: 900;
            color: rgb(255, 255, 255);
            /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
            --darkreader-inline-color:#b9b6b1;
            --darkreader-inline-bgimage: initial;
            --darkreader-inline-bgcolor:#202122;*/
            font-size: 1.5em;
            padding-top: 2%;
            margin-top: 0;
        }

        #icemachine {
            grid-area: icemachine;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            background-color: white;
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 7%;
        }

        #filter {
            grid-area: filter;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            background-image: url('filtro3.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }

        #maintenance {
            grid-area: maintenance;
            /*border: solid 1px orange;*/
            background-color: white;
            background-image: url('assistencia-3.jpg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            margin-left: 7%;
        }

        #carrousel {
            display: none;
        }

        #products {
            margin-left: 7%;
            grid-template-columns: repeat(4, 1fr);
        }

        #products button {
            font-size: 1rem;
        }

        #footer #ice #cubes ul li {
            margin-bottom: 1rem;
        }

        #footer #filt ul li {
            margin-bottom: 1rem;
        }
}

@media only screen and (max-width : 767px) {
    #wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(5vw, auto) auto minmax(5vw, auto);
        grid-template-areas: 
        'topbar topbar topbar topbar topbar'
        'mainbar mainbar mainbar mainbar mainbar'
        'footer footer footer footer footer';
    }

    #topbar {
        /*background-color: pink;*/
        grid-area: topbar;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(5vw, auto) minmax(5vw, auto);
        grid-template-areas: 
            'logo social social social social'
            'logo menu menu menu menu';
        margin-bottom: 1vw;
    }

        #logo {
            grid-area: logo;
            /*border: solid 1px red;*/
        }
    
        #social {
            grid-area: social;
            /*border: solid 1px red;*/
            display: flex;
            justify-content: space-around;
            background-color: rgb(207, 239, 247);
            color: #1E83EE;
            font-size: 0.65rem;
            font-weight: 700;
        }
    
        .social-item {
            box-sizing: border-box;
            width: 20%;
            display: table;
            height: 100%;
            margin-top: -2px;
            margin: 0 5px;
        }
    
        .social-item:hover {
            color: navy;
            border-bottom: 10px solid navy;
        }
    
        .child {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    
        .child i {
            padding: 0;
            margin: 0;
            height: 1em;
            margin-right: 0.4em;
        }
    
        #menu {
            grid-area: menu;
            /*border: solid 1px red;*/
            display: flex;
            justify-content: space-around;
            background-color: navy;
            color: rgb(207, 239, 247);
            font-size: 0.65rem;
            font-weight: 700;
        }
    
        .menu-item {
            box-sizing: border-box;
            width: 33%;
            display: table;
            height: 100%;
            margin-top: -2px;
        }
    
        .menu-item:hover {
            color: #1E83EE;
            border-bottom: 10px solid #1E83EE;
        }

        #sidebar {
            display: none;
            grid-area: sidebar;
            justify-content: center;
            background-color: navy;
            color: rgb(207, 239, 247);
            border-radius: 10px;
            margin-top: 10px;
            width: 0;
        }

        #mainbar {
            /*background-color: lime;*/
            grid-area: mainbar;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) minmax(11vw, auto) auto;
            grid-template-areas: 
                'icemachine'
                'icemachine'
                'whatsapp'
                'whatsapp'
                'maintenance'
                'maintenance'
                'products';
            grid-gap: 20px;
            padding: 10px;
        }

        #whatsapp {
            grid-area: whatsapp;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 8px solid white;
            background-color: white;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 7%;
        }

        #whatsapp a {
            text-decoration: none;
        }

        .whatsapp-text-1 {
            text-align: center;
            font-weight: 900;
            color: rgb(255, 255, 255);
            /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
            --darkreader-inline-color:#b9b6b1;
            --darkreader-inline-bgimage: initial;
            --darkreader-inline-bgcolor:#202122;*/
            font-size: 2.5em;
            padding-top: 10%;
            margin-top: 100px;
            margin-bottom: 0;
        }

        .whatsapp-text-2 {
            text-align: center;
            font-weight: 900;
            color: rgb(255, 255, 255);
            /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
            --darkreader-inline-color:#b9b6b1;
            --darkreader-inline-bgimage: initial;
            --darkreader-inline-bgcolor:#202122;*/
            font-size: 1.5em;
            padding-top: 2%;
            margin-top: 0;
        }

        #icemachine {
            grid-area: icemachine;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            background-color: white;
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 7%;
        }

        #filter {
            grid-area: filter;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            background-image: url('filtro3.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }

        #maintenance {
            grid-area: maintenance;
            /*border: solid 1px orange;*/
            background-color: white;
            background-image: url('assistencia-3.jpg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            margin-left: 7%;
        }

        .maint-link {
            text-decoration: none; /*remove underline of a href link:*/
            display:inline-block;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            color: unset;
        }

        #carrousel {
            display: none;
        }

        #products {
            margin-left: 7%;
            grid-area: products;
            display: grid;
            padding: 5px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            grid-gap: 5px;
        }

        #products button {
            font-size: 0.85rem;
        }

        #cubes ul li {
            margin-bottom: 0.5rem;
        }

        #footer #bar {
            font-size: 0.75rem;
        }

        #footer #filt ul li {
            margin-bottom: 0.75rem;
        }
}

@media only screen and (max-width : 525px) {
    #wrapper {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: minmax(5vw, auto) auto minmax(5vw, auto);
        grid-template-areas: 
        'topbar topbar topbar topbar topbar'
        'mainbar mainbar mainbar mainbar mainbar'
        'footer footer footer footer footer';
    }

    #topbar {
        /*background-color: pink;*/
        grid-area: topbar;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(5vw, auto) minmax(5vw, auto) minmax(5vw, auto) minmax(5vw, auto) minmax(5vw, auto) minmax(5vw, auto);
        grid-template-areas: 
            'logo logo'
            'logo logo'
            'social social'
            'social social'
            'menu menu'
            'menu menu';
        margin-bottom: 1vw;
    }

        #logo {
            grid-area: logo;
            /*border: solid 1px red;*/
        }

        #social {
            grid-area: social;
            /*border: solid 1px red;*/
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
            background-color: rgb(207, 239, 247);
            color: #1E83EE;
            font-size: 0.5rem;
            font-weight: 700;
        }
    
        .social-item {
            box-sizing: border-box;
            width: 20%;
            display: table;
            height: 100%;
            margin-top: -2px;
            margin: 0 5px;
            padding: 10px;
        }
    
        .social-item:hover {
            color: navy;
            border-bottom: 10px solid navy;
        }
    
        .child {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    
        .child i {
            padding: 0;
            margin: 0;
            height: 1em;
            margin-right: 0.4em;
        }
    
        #menu {
            grid-area: menu;
            /*border: solid 1px red;*/
            display: flex;
            justify-content: space-around;
            align-content: center;
            background-color: navy;
            color: rgb(207, 239, 247);
            font-size: 0.5rem;
            font-weight: 700;
            padding: 5px;
        }
    
        .menu-item {
            box-sizing: border-box;
            width: 50%;
            display: table;
            height: 100%;
            margin-top: -2px;
        }

        .child {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    
        .menu-item:hover {
            color: #1E83EE;
            border-bottom: 10px solid #1E83EE;
        }

        #sidebar {
            display: none;
            grid-area: sidebar;
            justify-content: center;
            background-color: navy;
            color: rgb(207, 239, 247);
            border-radius: 10px;
            margin-top: 10px;
            width: 0;
        }

        #mainbar {
            /*background-color: lime;*/
            grid-area: mainbar;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: minmax(9vw, auto) minmax(9vw, auto) minmax(22vw, auto) minmax(30vw, auto) minmax(11vw, auto) minmax(11vw, auto) auto;
            grid-template-areas: 
                'icemachine'
                'icemachine'
                'whatsapp'
                'whatsapp'
                'maintenance'
                'maintenance'
                'products';
            grid-gap: 20px;
            padding: 10px;
            margin: auto;
            margin-top: 1em;
            padding: 0%;
        }

        #whatsapp {
            grid-area: whatsapp;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 0px solid white;
            border-top: 12px solid white;
            border-bottom: 12px solid white;
            background-color: white;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 7%;
        }

        #whatsapp a {
            text-decoration: none;
        }

        .whatsapp-text-1 {
            display: none;
            text-align: center;
            font-weight: 900;
            color: rgb(255, 255, 255);
            /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
            --darkreader-inline-color:#b9b6b1;
            --darkreader-inline-bgimage: initial;
            --darkreader-inline-bgcolor:#202122;*/
            font-size: 1.5em;
            padding-top: 10%;
            margin-top: 100px;
            margin-bottom: 0;
        }

        .whatsapp-text-2 {
            display: none;
            text-align: center;
            font-weight: 900;
            color: rgb(255, 255, 255);
            /*text-shadow: rgb(122, 122, 122) 4px 3px 0px;
            --darkreader-inline-color:#b9b6b1;
            --darkreader-inline-bgimage: initial;
            --darkreader-inline-bgcolor:#202122;*/
            font-size: 0.75em;
            padding-top: 2%;
            margin-top: 0;
        }

        #icemachine {
            grid-area: icemachine;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 0px solid white;
            border-top: 0px solid white;
            border-bottom: 0px solid white;
            background-color: white;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            margin-left: 7%;
        }

        #filter {
            grid-area: filter;
            /*border: solid 1px orange;*/
            border-radius: 0px;
            overflow: hidden;
            border: 6px solid white;
            background-image: url('filtro3.jpg');
            background-repeat: no-repeat;
            background-size: cover;
        }

        #maintenance {
            grid-area: maintenance;
            /*border: solid 1px orange;*/
            background-color: white;
            background-image: url('assistencia-3.jpg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            border-radius: 0px;
            border: 0px solid white;
            overflow: hidden;
            border: 6px solid white;
            margin-left: 7%;
        }

        #carrousel {
            display: none;
        }

        #products {
            grid-area: products;
            display: grid;
            padding: 5px;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: auto;
            grid-gap: 15px;
            border-radius: 0px;
        }

        #products button {
            font-size: 1rem;
        }
}

@media only screen and (max-width : 430px) {
    #footer #ice #scales ul li {
        margin-bottom: 0.75rem;
    }

    #mainbar {
        margin: auto;
        margin-top: 1em;
        margin-left: 0rem;
        margin-right: -1.2rem;
    }

    #products {
        grid-area: products;
        display: grid;
        padding: 5px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto;
        grid-gap: 15px;
        border-radius: 0px;
    }

    #products button {
        font-size: 2rem;
    }

    #menu {
        font-size: 0.6rem;
    }

    #social {
        font-size: 0.6rem;
    }
}

@media only screen and (max-width: 320px) {
    #products button {
        font-size: 1.5rem;
    }
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

.table-wrapper h2 {
    margin: auto;
    text-align: center;
}

.table-wrapper table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    width: 85%;
    height: 2vw;
    text-align: left;
    vertical-align: middle;
    padding: 1rem;
    margin: auto;
}