﻿
#GridPage { float: none; width: 100%; }

.HomePage .packItems { margin: 0; }
.HomePage .packItem { width: 25%; color: #fff; text-align: left; direction: ltr; float: left; position: relative; }
    .HomePage .packItem .item { width: 100%; float: left; position: relative;  }
.HomePage .packItem .item:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; opacity: 0; transition: all 800ms ease-out; -webkit-transition: all 800ms ease-out; z-index: 1; }
.HomePage .packItem .itemContent { max-width: 220px; position: absolute; bottom: 21px; left: 20px; z-index: 2; }
    .HomePage .packItem .itemLink { color: #823817; text-decoration: underline; font-size: 60%; font-family: 'AvenirNextLTPro'; }
.HomePage .packItem .itemTitle { font-size: 82.5%; font-family: CalvertMTPro; letter-spacing: 0.5px; margin-bottom: 7px; }
.HomePage .packItem .item-bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: cover; }


@media(max-width:991px) {
    .HomePage .packItem .item { }
    .HomePage .packItem { width: 50%; height: auto; }
}

#SiteFooterContainer { display: none; }
#UnderSiteFooterContainer { display: none; }

#GridContent { width: 100vw; position: relative; }
#SiteGrid { max-width: 100%; }
#GridFooter { display: none; }



/****   1   ****/
.gridOne .packItems:hover .itemTitle { color: #fff; }
.gridOne .packItems:hover .itemLink { color: #000; }
.gridOne .packItems:hover .item:before { opacity: 0.3; }
.gridOne .packItems { margin: 0; width: 100%; background-size: cover; float: left; }

@media(min-width:992px) {
    .gridOne .packItem .itemContent { left: auto; right: 20px; }
}



/****   5   ****/
.gridFive .packItem.hover .itemTitle { color: #fff; }
.gridFive .packItem.hover .itemLink { color: #000; }
.gridFive .packItem.hover .item:before { opacity: 0.3; }

@media(min-width:992px) {
    .gridFive .packItem2 { width: 50%; }
    .gridFive .packItem5 { width: 50%; }
    .gridFive .packItem6 { width: 75%; }
    .gridFive .packItem1 .itemContent { left: auto; right: 77px; z-index: 1; }
    .gridFive .packItem3 .itemContent, .HomePage .packItem5 .itemContent { }
    .gridFive .packItem2 .item { width: 50%; }
    .gridFive .packItem5 .item { width: 50%; }
    .gridFive .packItem6 .item { width: 33.33%; }
}

@media(max-width:991px) {
    .gridFive .packItem { width: 50%; height: auto; }
    .gridFive .packItem7 { width: 100%; }
    .gridFive .packItem11 { width: 100%; }
    .gridFive .packItem14 { width: 100%; }
    .gridFive .packItem7 .item { width: 50%; }
    .gridFive .packItem11 .item { width: 50%; }
    .gridFive .packItem14 .item { width: 50%; }
}


/****   8   ****/
.gridEight .packItem.hover .itemTitle { color: #fff; }
.gridEight .packItem.hover .itemLink { color: #000; }
.gridEight .packItem.hover .item:before { opacity: 0.3; }

.gridEight .column { float: left; width: 25%; }
    .gridEight .column.column8 { width: 50%; }
.gridEight .packItem { width: 100%; }

@media(min-width:992px) {
    .gridEight .packItem7, .gridEight .packItem8 { width: 50%; }
    .gridEight .packItem5 .item { width: 50%; }
    .gridEight .packItem6 .item { width: 50%; }
    .gridEight .packItem2 .itemContent { right: 77px; left: auto; }
}

@media(max-width:991px) {
    .gridEight .packItem { width: 50%; }
    .gridEight .packItem9, .gridEight .packItem10 { width: 100% }
    .gridEight .packItem9 .item { width: 50%; }
    .gridEight .packItem10 .item { width: 50%; }
    .gridEight .packItem .item8 .itemContent, .HomePage .packItem .item12 .itemContent, .HomePage .packItem .item15 .itemContent { text-align: right; left: auto; right: 20px; }
}


/****   16   ****/
.gridSixteen .packItem.hover .itemTitle { color: #fff; }
.gridSixteen .packItem.hover .itemLink { color: #000; }
.gridSixteen .packItem.hover .item:before { opacity: 0.3; }
.gridSixteen .packItem { width: 25%; }
.gridSixteen .packItem .itemContent { opacity: 0; transition: all 800ms ease-out; -webkit-transition: all 800ms ease-out; }
.gridSixteen .packItem.hover .itemContent { opacity: 1; }

@media(max-width:991px) {
    .gridSixteen .packItem { width: 50%; }
}