i{
    font-style: italic;
}


#heroImgFinal,
.heroImgLoad {
    position: absolute;
    top: 0;
    left: 0
}

.homeCTAblockwrap,
.homeProductLinkWrap {
    text-align: center;
    position: relative
}

.homeContentWrap {
    width: 100%;
    background-color: #fff;
    overflow-x: hidden
}

#homeHero {
    position: relative;
    width: 100%;
    background: #000;
    line-height: 0
}

.heroCopy {
    text-align: center;
    padding: 20px 2%
}

.heroCopy h1 {
    color: #87ffff!important;
    font-size: 28px;
    font-weight: 300;
    line-height: 32px;
    padding-bottom: 15px;
}

.heroCopy h2 {
    color: #87ffff!important;
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
    padding-bottom: 0!important
}



.heroImgLoad {
    z-index: 9
}

#heroImgFinal {
    z-index: 10;
    opacity: 0;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in
}

#heroImgFinal.load {
    opacity: 1
}

.heroBlackSpace {
    display: none
}

@media only screen and (min-width:600px) {
    #homeHero {
        position: relative
    }
}

@media only screen and (min-width:850px) {
    #homeHero {
        position: relative
    }
    .heroCopy {
        position: absolute;
        left: 38%;
        top: 220px;
        width: 550px;
        z-index: 100
    }
    .heroCopy h1 {
        font-size: 32px;
        line-height: 38px
    }
    
    .heroCopy h2 {
        font-size: 24px;
        line-height: 28px;
    }
}

@media only screen and (min-width:950px) {
    .heroCopy {
        left: 45%
    }
}

@media only screen and (min-width:1200px) {
    #homeHero {
        position: relative
    }
    .heroCopy {
        position: absolute;
        left: 55%;
        width: 600px;
        top: 280px
    }
    .heroCopy h1 {
        font-size: 42px;
        line-height: 48px
    }
    
    .heroCopy h2 {
        font-size: 30px;
        line-height: 34px;
    }
}

.homeProductLinkWrap p {
    font-size: 18px;
    color: #253037;
    line-height: 26px
}

.homeProductLink {
    display: block;
    padding-bottom: 20px
}

.homeProductLinkWrap a h3 {
    color: #253037;
    font-weight: 600;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 24px
}

.homeProductLink img {
    width: 67%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 17px
}

@media only screen and (min-width:767px) {
    .homeProductLinkWrap {
        white-space: nowrap;
        display: inline-block
    }
    .homeProductLink {
        display: inline-block;
        vertical-align: top;
        width: 33.33%;
        white-space: normal;
        padding: 0
    }
    .homeProductLinkInnerWrap {
        padding: 0 5%;
        text-align: center
    }
    .homeProductLinkWrap,
    .width80 {
        width: 80%
    }
    .width80 {
        display: inline-block;
        margin: 0 auto
    }
    .homeProductLinkInnerWrap img {
        margin: 0 auto;
        width: 80%
    }
}

.hlandscapeCTAOuterWrap {
    width: 100%;
    position: relative;
    background: #e8edf1
}

.hlandscapeCTACopyWrap {
    display: block;
    width: 100%;
    padding: 20px 2%
}

.hlandscapeCTAImgWrap {
    display: block;
    width: 100%;
    padding: 0
}

.hlandscapeCTAImgWrap img {
    display: block
}

.hlandscapeCTAOuterWrap h2 {
    color: #253037;
    font-weight: 300;
    font-size: 28px;
    line-height: 36px
}

.hlandscapeCTABtn {
    display: inline-block;
    height: 56px;
    line-height: 56px;
    padding: 0 30px;
    background: #002d62;
    margin-top: 40px
}

.hlandscapeCTABtn a {
    color: #fff;
    text-decoration: none
}

.hlandscapeCTACat {
    color: #597698;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 22px;
    padding-bottom: 12px
}

.homeCTAblockwrap {
    width: 100%
}

.homeCTAblock {
    width: 100%;
    display: block;
    margin-bottom: 10%
}

.homeCTAitem {
    background: #eaebeb;
    width: 90%;
    display: inline-block;
    margin: 0 auto
}

.homeCTAimg {
    width: 100%;
    height: auto
}

.homeCTACopyWrap {
    display: inline-block;
    width: 90%;
    margin: 10px auto 0;
    text-align: left
}

.homeCTACopyWrap a h2 {
    font-weight: 300;
    color: #253037;
    font-size: 24px;
    line-height: 28px
}

.homeCTACategory {
    text-transform: uppercase;
    color: #78a22f;
    font-weight: 600;
    padding-bottom: 15px
}

@media only screen and (min-width:900px) {
    .hlandscapeCTAOuterWrap {
        white-space: nowrap
    }
    .hlandscapeCTACopyWrap,
    .hlandscapeCTAImgWrap {
        white-space: normal;
        vertical-align: middle;
        display: inline-block
    }
    .hlandscapeCTACopyWrap {
        width: 60%;
        padding: 20px 2% 20px 5%
    }
    .hlandscapeCTAImgWrap {
        width: 40%
    }
    .homeCTAblockwrap {
        white-space: nowrap
    }
    .homeCTAblock {
        width: 50%;
        display: inline-block;
        white-space: normal;
        vertical-align: top;
        position: relative;
        margin-bottom: 0
    }
    .homeCTACopyWrap {
        height: 180px;
        overflow-y: hidden
    }
    .homeCTACopyWrap a h2 {
        font-size: 30px;
        line-height: 36px
    }
}

@media only screen and (min-width:1300px) {
    .hlandscapeCTACopyWrap {
        width: 40%;
        padding: 0 2% 0 5%;
        margin-top: -25px
    }
    .hlandscapeCTAImgWrap {
        width: 60%
    }
    .hlandscapeCTAOuterWrap h2 {
        font-size: 36px;
        line-height: 42px
    }
    .hlandscapeCTACat {
        padding-bottom: 24px
    }
}


/*==========================================================*/
/* HOME PAGE OVERLAY                                        */
/*==========================================================*/

#popOverlay{
    display:inline-block;
    width:768px;
    height:260px;
    max-width:95%;
    z-index:1002;
    margin:auto;
    position:absolute;
    top:15%;
    left:0;
    right:0;
}

#popOverlayInner{
    background:#fff;
    padding:15px;
    text-align:center;
}

.popCopyWrap{}

.popCopyWrap h2{
    font-size:16px;
    color:#253037;
    padding-bottom:10px;
}

.popCopyWrap p{
    font-size:14px;
    line-height:17px;
    font-weight:300;
    
}

#popOverlayClose{
    display:inline-block;
    color:#800f0f;
    border:1px solid #800f0f;
    height:37px;
    line-height: 37px;
    padding:0 16px;
    margin: 0 auto;
    font-size:16px;
    font-weight:300;
    
}


@media only screen and (min-width:900px) {
    
    #popOverlay{
        top:20%;
    }
    
    
    #popOverlayInner{
        padding:30px;
    }

    .popCopyWrap h2{
        font-size:21px;
        padding-bottom:22px;
    }

    .popCopyWrap p{
        font-size:17px;
        line-height:27px;
    }

    #popOverlayClose{
        margin: 0 auto;
        font-size:18px;
    }
    
    
}