.left {
    float: left;
}
.right {
    float: right;
}
.container {
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    padding: 20px;
    padding-top: 0px;

    max-width: 1300px;
}
.container div {
    padding: 20px 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
    font-size: 1.15rem;
    font-weight: 100;
    font-family: Arial, Helvetica, sans-serif;
    flex-wrap: wrap;
}
.container div img {
    width: 90%;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 1px 2px 5px rgba(255,255,255,0.3);
    border-radius: 5px;
}
.container div.text {
    margin: auto;
    width: 90%;
    padding: 7px;
    /* background-color: #ccc; */
    color: white;
    line-height: 1.5rem;
    border-radius: 5px;
    /* border: 2px dashed blue;
    box-shadow: 1px 2px 5px rgba(255,255,255,0.3); */
}
.container h1 {
    width: 100%;
    text-align: center;
}
.container .header4,
.container .header2,
.container .header3,
.container .header1 {
    width: 100% !important;
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(82,82,82,1) 100%);
    color:white;
    font-family: 'Summerfriday', sans-serif;
}
.header4 h1,
.header2 h1,
.header3 h1{
    font-size: 2.5rem;
}
.header4 p,
.header2 p,
.header3 p {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
}

.header4 img,
.header2 img,
.header3 img {
    width: 90%;
    max-width: 600px;
    margin: 20px 5% 20px 5%;
}
.header4 button,
.header2 button,
.header3 button {
    cursor: pointer;
    font-family: 'Summerfriday', sans-serif;
    padding: 6px 15px 3px;
    border-radius: 10px;
    border: 3px solid rgb(55, 189, 246);
    margin: 30px 0px 0px 0;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.container .header4,
.container .header3,
.container .header2 {
    background: transparent;
}
.container .header1 h1 {
    font-size: 3.6rem;
    margin: 5px;
}
.container .header1 h2 {
    font-size: 1.6rem;
    font-weight: 100;
    margin: 5px;
}
span.thin-line {
    width: 100%;
    height: 2px;
    background-color: #fff;
    margin: 30px 0px 36px;
}

.go-now {
    width: 100% !important;
    grid-column-start: 1;
    grid-column-end: 3;
}
.go-now a {
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 1px 2px 5px rgba(255,255,255,0.3);
    padding: 7px 13px 5px 13px;
    margin: 5px;
    border-top: 4px inset grey;
    transition: all ease-in-out 0.3s;
    white-space: nowrap;

    font-size: 1.3rem;
    font-family: 'Summerfriday', sans-serif;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: black;
}
.go-now a:hover,
.go-now a:active {
    transform: scale(1.05);
}
.go-now a#shop {
    background-color: #ccc;
    border: 3px solid rgb(128, 255, 128);
    color: black;
}
.go-now a#contact {
    background-color: #ccc;
    border: 3px solid rgb(55, 189, 246);
    color: black;
}


@media only screen and (max-width: 810px) {
    .container {
        grid-template-areas: 
        'header1 header1'
        'header header'
        'header4 header4'
        'header2 header2'
        'header3 header3'
        'item1 item1'
        'item2 item2'
        'item3 item3'
        'item4 item4'
        'item5 item5'
        'item6 item6'
        'item7 item7'
        'item8 item8'
        'item9 item9'
        'item10 item10'
        'footer footer'
        ;
        padding: 0px;
        grid-gap: 20px;
    }
    .container .header4{
        grid-area: header4;
    }
    .container .header2{
        grid-area: header2;
    }
    .container .header1{
        grid-area: header1;
    }
    .title1 {
        grid-area: title1;
    }
    .item1 {
        grid-area: item1;
    }
    .item2 {
        grid-area: item2;
    }
    .item3 {
        grid-area: item3;
    }
    .item4 {
        grid-area: item4;
    }
    .item5 {
        grid-area: item5;
    }
    .item6 {
        grid-area: item6;
    }
    .item7 {
        grid-area: item7;
    }
    .item8 {
        grid-area: item8;
    }
    .item9 {
        grid-area: item9;
    }
    .item10 {
        grid-area: item10;
    }
    .go-now {
        grid-row-end: 1;
        grid-area: header;
    }
    .footer {
        grid-area: footer !important;
    }
    .go-now a {
        padding: 5px 13px;
        font-size: 1.2rem;
    }
}