body {
    background-color: hsl(30, 40%, 80%);
    font-family: Cambria;
    color: hsl(30, 10%, 30%);
    min-width: 700px;
    max-width: 1200px;
    margin: 0px auto;
}

div.page {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    background-color: hsl(50, 70%, 95%);
    min-width: 700px;
    max-width: 1200px;
    height: 660px;
    margin: auto;
}

div.main {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    background-color: hsl(50, 70%, 95%);
    min-width: 550px;
    width: 1050px;
    height: 660px;
}

div.photoright {
    background-color: hsl(30, 40%, 80%);
    padding: 5px;
    width: 140px;
    height: 650px;
    opacity: 1.0;
}

div.header {
    display: -webkit-flex;
    display: flex;
    min-width: 550px;
    max-width: 850px;
    height: 100px;
}

.monogram {
    width: 60px;
    height: 60px;
    margin: 20px;
    float: left;
}

img#chryslogo {
    width: 300px;
    margin: -80px 0px -30px 30px;
    float: right;
    display: inline;
}

div.dropdown {
    display: none;
}

div.buttonbar {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    min-width: 550px;
    max-width: 1050px;
    height: auto;
}

a.button {
    text-decoration: none;
    color: hsl(30, 10%, 30%);
    display: inline-block;
    background-color: hsl(50, 70%, 95%);
    min-width: 90px;
    height: 25px;
    border-bottom: 2px solid hsl(30, 10%, 30%);
    text-align: center;
    font-size: 20px;
    padding: 4px 5px 6px 5px;
}

a.buttonactive {
    margin: 0;
    text-decoration: none;
    color: hsl(30, 10%, 30%);
    display: inline-block;
    background-color: hsl(50, 70%, 95%);
    min-width: 90px;
    height: 25px;
    border-bottom: 2px solid hsl(30, 40%, 80%);
    text-align: center;
    font-size: 20px;
    padding: 4px 5px 6px 5px;
    color: hsl(30, 40%, 60%);
}

a.button:hover {
    border-bottom: 2px solid hsl(30, 40%, 80%);
    color: hsl(30, 40%, 60%);
}

a.returnbutton {
    text-decoration: none;
    color: hsl(30, 10%, 30%);
    display: block;
    width: 23px;
}

a.returnbutton:hover {
    color: grey;
}

p.returnbutton {
    font-size: 25px;
    outline: solid hsl(30, 40%, 80%) 2px;
    width: 23px;
    padding: 0px 0px 5px 10px;
    margin: 2px 0px 10px 2px;
}

a.shopbutton {
    text-decoration: none;
    color: hsl(30, 10%, 30%);
}

a.shopbuttonactive {
    text-decoration: none;
    color: hsl(30, 10%, 30%);
    border-bottom: 2px solid hsl(30, 40%, 80%);
}

a.shopbutton:hover {
    opacity: 80%;
}

a.contactbutton {
    text-decoration: none;
    color: black;
    padding: 5px;
    width: 130px;
    border: 2px solid hsl(30, 40%, 80%);
}

div.content {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    max-width: 998px;
    min-width: 448px;
    height: max;
    margin: 50px 0px 30px 30px;
    padding: 0px 0px 0px 15px;
    border-left: 2px solid hsl(30, 40%, 80%);
    overflow: auto;
}

div.shopbuttonbar {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    width: 95px;
    min-width: 95px;
    height: 482px;
    margin: 20px;
    padding: 0px 0px 0px 10px;
    border-right: 2px solid hsl(30, 40%, 80%);
}

div.gallerycontent {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    max-width: 998px;
    min-width: 448px;
    height: max;
    margin: auto;
    padding: 0px 0px 0px 10px;
}

div.photo {
    float: left;
    width: 350px;
    min-width: 350px;
    height: 410px;
    padding: 10px;
    border: 3px solid hsl(30, 40%, 80%);
}

div#caption {
    width: 340px;
    padding: 5px;
}

img#expanded {
    display: block;
    width: 350px;
}

div.thumbnails {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    max-width: 450px;
    min-width: 130px;
    height: 426px;
    overflow: auto;
    margin: auto 50px;
}

div.shopthumbs {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    min-width: 313px;
    width: max;
    height: 452px;
    overflow: auto;
    margin: 20px;
    float: left;
}

img.shopthumb {
    border: 1px solid hsl(30, 40%, 80%);
    width: 188px;
    height: 188px;
    margin: 0px;
}

div.disclaimer {
    display: block;
    min-width: 313px;
    max-width: 860px;
    height: 482px;
    padding: 20px 20px 0px 0px;
}

div.shopthumb {
    width: 190px;
    height: 190px;
    margin: 10px;
}

img.thumb {
    border: 1px solid hsl(30, 40%, 80%);
    margin: 5px;
    width: 130px;
    height: 130px;
}

img.thumb:hover {
    opacity: .8;
}

.addtocart {
    background-color: hsl(50, 70%, 95%);
    border-top: solid hsl(50, 70%, 95%) 2px;
    border-right: solid hsl(50, 70%, 95%) 2px;
    border-bottom: solid hsl(50, 70%, 95%) 2px;
    border-left: solid hsl(30, 40%, 80%) 2px;
    color: hsl(30, 10%, 30%);
    padding: 5px;
    display: inline-block;
    font-size: 14px;
    margin: 10px 0px;
    font-family: Cambria;
    font-weight: bold;
}

.addtocart:hover {
    border: solid hsl(30, 40%, 80%) 2px;
    background-color: hsl(30, 40%, 80%);
    color: grey;
}

.submit {
    background-color: hsl(30, 40%, 80%);
    border: solid hsl(30, 40%, 80%) 2px;
    font-family: Cambria;
    color: grey;
    font-weight: bold;
}

.submit:hover {
    background-color: hsl(50, 70%, 95%);
    border: solid hsl(50, 70%, 95%) 2px;
}

.addtocart:enabled {
    outline: none;
}

#blog {
    height: 75%;
}

img#socials {
    width: 30px;
    margin: 0px 5px -4px 0px;
}

div.dummy {
    display: none;
}

div.description {
    max-width: 300px;
    margin: 0px 50px 0px 0px;
}

img.shoplargehori {
    width: 400px;
    float: right;
    margin: auto 0px;
    border: solid hsl(30, 40%, 80%) 10px;
}

img.shoplargevert {
    height: 400px;
    float: right;
    margin: 0px auto;
    border: solid hsl(30, 40%, 80%) 10px;
}

div.contactcontent {
    flex-direction: row;
    overflow: auto;
}

div.contactsubcontent1 {
    float: left;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 320px;
    height: max;
    margin: 40px 20px 0px 40px;
    padding: 0px 0px 0px 10px;
    border-left: 2px solid hsl(30, 40%, 80%);
}

div.contactsubcontent2 {
    float: right;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 320px;
    height: max;
    margin: 40px 40px 0px 20px;
    text-align: right;
}

@media screen and (max-aspect-ratio:1/1) {

    body {
        width: 100%;
        Font-family: Georgia;
    }

    div.page {
        min-width: 300px;
        max-width: 1080px;
        height: 1600px;
        margin: auto;
    }

    div.main {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        min-width: 150px;
        width: 1080px;
        height: 1600px;
    }

    div.photoright {
        display: none;
    }

    div.header {
        display: -webkit-flex;
        display: flex;
        min-width: 450px;
        max-width: 1080px;
        height: 160px;
        font-size: 30px;
    }

    .monogram {
        width: 120px;
        height: 120px;
        margin: auto 20px;
        float: left;
    }

    img#chryslogo {
        width: 400px;
        display: block;
        float: none;
        margin: -50px auto 0px auto;
    }

    div.dropdown {
        display: block;
        position: relative;
        float: right;
        width: 60px;
        height: 60px;
        margin: 50px 50px 50px auto;
    }

    div#dropdownmenu {
        display: none;
        position: absolute;
        right: 0;
        width: 220px;
        height: auto;
        outline: 2px solid hsl(30, 10%, 30%);
    }

    div.buttonbar {
        display: none;
    }

    a.button {
        display: block;
        min-width: 180px;
        height: 65px;
        text-align: center;
        font-size: 55px;
        padding: 4px 5px 6px 5px;
    }

    a.buttonactive {
        margin: 0;
        display: block;
        min-width: 180px;
        height: 65px;
        text-align: center;
        font-size: 55px;
        padding: 4px 5px 6px 5px;
    }

    a.button:hover {
        border-bottom: 2px solid hsl(30, 40%, 80%);
    }

    a.returnbutton {
        display: block;
        width: 46px;
    }

    p.returnbutton {
        font-size: 40px;
        outline: solid hsl(30, 40%, 80%) 4px;
        width: 38px;
        padding: 0px 0px 5px 12px;
        margin: 6px 0px 10px 6px;
    }

    a.contactbutton {
        text-decoration: none;
        color: black;
        width: 230px;
        padding: 5px;
        border: 4px solid hsl(30, 40%, 80%);
    }

    div.content {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        max-width: 970px;
        font-size: 35px;
        height: max;
        margin: 50px;
        padding: 0px 0px 0px 10px;
    }

    div.shopbuttonbar {
        min-width: 170px;
        padding: 0px 0px 0px 10px;
        border-right: 2px solid hsl(30, 40%, 80%);
        font-size: 25px;
    }

    div.gallerycontent {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        max-width: 1030px;
        min-width: 400px;
        height: max;
        margin: 50px 20px 20px 20px;
        padding: 0px 0px 0px 10px;
    }

    div.photo {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        width: 600px;
        height: auto;
        padding: 10px;
        margin: 0px auto;
        border: 3px solid hsl(30, 40%, 80%);
        font-size: 30px;
    }

    img#expanded {
        display: block;
        width: 600px;
    }

    div#caption {
        width: auto;
        padding: 5px;
        height: max;
        text-align: center;
    }

    div.thumbnailsxxx {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        width: 800px;
        min-width: 130px;
        height: 450px;
        padding: 5px;
        overflow-y: scroll;
        margin: 20px auto;
    }

    div.thumbnails {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        min-width: 600px;
        max-width: 800px;
        height: 400px;
        padding: 5px;
        overflow-x: auto;
        margin: 20px auto;
    }

    div.shopsubmenu {
        display: block;
        float: left;
        width: max;
        height: 50px;
        margin: 20px;
        padding: 0px 0px 0px 10px;
        font-size: 30px;
    }

    div.shopthumbs {
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        min-width: 230px;
        width: auto;
        max-height: 1200px;
        min-height: 190px;
        height: auto;
        overflow-y: auto;
        margin: 10px 0px;
        float: right;
    }

    div.shopthumb {
        width: 300px;
        height: 300px;
        margin: 10px;
    }

    img.shopthumb {
        border: 1px solid hsl(30, 40%, 80%);
        width: 298px;
        height: 298px;
        margin: 0px;
    }

    div.disclaimer {
        display: block;
        min-width: 313px;
        max-width: 660px;
        height: 1370px;
        font-size: 30px;
        padding: 40px 40px 0px 0px;
    }

    img.thumb {
        margin: 20px 10px;
        width: 310px;
        height: 310px;
        display: inline;
        float: left;
    }

    img.thumb:hover {
        opacity: .8;
    }

    .addtocart {
        background-color: hsl(50, 70%, 95%);
        border-top: solid hsl(50, 70%, 95%) 2px;
        border-right: solid hsl(50, 70%, 95%) 2px;
        border-bottom: solid hsl(50, 70%, 95%) 2px;
        border-left: solid hsl(30, 40%, 80%) 4px;
        color: hsl(30, 10%, 30%);
        padding: 5px;
        display: inline-block;
        font-size: 25px;
        margin: 20px 0px;
        font-family: Georgia;
        font-weight: bold;
    }

    .addtocart:hover {
        border: solid hsl(30, 40%, 80%) 2px;
        background-color: hsl(30, 40%, 80%);
        color: grey;
    }

    .addtocart:enabled {
        outline: none;
    }

    #blog {
        height: 90%;
    }


    div.dummy {
        display: block;
        width: 190px;
        height: 190px;
        margin: 10px;
    }

    div.description {
        max-width: 700px;
        font-size: 30px;
    }

    img.shoplargehori {
        width: inherit;
        height: 450px;
        float: right;
        margin: 10px;
        border: solid hsl(30, 40%, 80%) 10px;
    }

    img.shoplargevert {
        width: inherit;
        height: 850px;
        float: right;
        margin: 10px;
        border: solid hsl(30, 40%, 80%) 10px;
    }

    div.contactcontent {
        font-size: 30px;
        flex-direction: column;
        overflow: auto;
    }

    div.contactsubcontent1 {
        float: left;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        min-width: 400px;
        max-width: 520px;
        height: max;
        margin: 40px 20px 0px 40px;
        padding: 0px 0px 0px 10px;
        border-left: 2px solid hsl(30, 40%, 80%);
    }

    div.contactsubcontent2 {
        float: left;
        text-align: left;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        min-width: 400px;
        max-width: 520px;
        height: max;
        margin: 0px 20px 0px 40px;
        padding: 0px 0px 0px 10px;
        border-left: 2px solid hsl(30, 40%, 80%);
    }

    #maillist {
        font-size: 30px;
        margin: 1px;
    }
}