.header{
    grid-area: header;
}
.menu{
    grid-area: menu;
}
.contentgrid{
    grid-area: contentgrid;
}
.footer{
    grid-area: footer;
}
.social{
    grid-area: social;
}
.copyright{
    grid-area: copyright;
}

.main{
    display: grid;
    grid-template-areas: "header" "menu" "contentgrid" "footer" "social" "copyright";
}

.main{
    color:              #364049;
    font-family: open-sans, sans-serif;
    font-feature-settings:  'liga' 1;
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
}
.contentgrid{
    background-color:   #999999;
    width: 100%;
}

html,
body{
    margin:     0px;
    padding:    0px;
}

@media only screen and (min-width: 960px){
    .main{
        grid-template-columns: min-content;
        grid-template-areas:
        "header   menu"
        "contentgrid  contentgrid"
        "footer social"
        "copyright   copyright";
    }
}

.header,
.menu,
.footer,
.social,
.copyright{
    background-color: #364049;
    color: #DCDCDC;
}
a {
  color:inherit;
  text-decoration: none;
 }

.header,
.menu{
    /*lock somehow*/
}

.menu{
    color:      #FFFFFF;
    text-align: right;
}

.content{
    clear: left;
    margin: auto;
    width: 100%;
    max-width: 800px;
    overflow: auto;
    word-wrap: break-word;
    margin-top: 20px;
    margin-bottom: 20px;
}

.footer{
    color:   #8C8C8C;
    text-align:     center;
}
.social{
    text-align: center;
    padding: 8px;
}

.copyright{
    text-align: center;
    color:   #8C8C8C;
    padding:    8px;
    font-size:  12px;
}

.menuholder{
    display: table;
    float:    right;
    margin-right:  150px;
    height:     100%;    
}

.menulink{
    display:        table-cell;
    padding: 10px;
    text-align:     right;
    vertical-align: middle;
}

.logoimg{
     width:         190px;
     height:        67px;
     margin-left:   76px;
     margin-right:  76px;
     margin-top:    20px; 
     margin-bottom: 20px;
}

.socialbutton{
    display:    inline-block;
    width:      59px;
    height:     59px;
    margin:     10px;
    border-style:   solid;
    border-width:   2px;
    border-radius:  200px;
    border-color:   #8C8C8C;
    overflow:   hidden;
}

.socialimage{
    width:      59px;
    -webkit-transition: margin-top .5s;
}
.socialimage:hover{
    margin-top: -59px;
}
.productheader{
    height: 160px;
}
.productlogodiv{
    float:left;
}
.productlogoimg{
    height: 160px
}
.productspec{
    height:100%;
    float: right;
}
.productbody{
    clear:left;
}
.productsheet{
    display:table;
}
.productsheetlink{
    display: table-cell;
    vertical-align: middle;
}
.productimage{
    height:90%;
    width: 90%;
    margin: 5%;
}