/*
.feature-box
    .feature-content
        .feature-img
        .feature-copy
            h3,h4
    .feature-detail
*/
.center-aligned {text-align: center}
.hew-profiles {display: flex; flex-wrap: wrap; flex-direction: row;}
.hew-profiles .feature-img {width: 150px; height: 150px; margin: 1.5em auto 0;display: block;overflow: hidden;}
.landing-page .hew-profiles h3 {font-size: 19px; color: #666; 	 font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}
.landing-page .hew-profiles h3:before, .landing-page .hew-profiles h3:after {background:none;content:none;}
.hew-profiles .feature-box {background: #f0f0f0; margin-bottom:2em; position: relative; width: 100%;}
.landing-page .hew-profiles .feature-box .feature-copy {margin: 0; padding: 1rem 1.5rem; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}
.landing-page .hew-profiles .feature-box .feature-copy h4 {font-size: 18px; text-align: center;font-weight: 400; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}
.hew-profiles .feature-box .feature-detail {display: none;padding: 0 1.5rem;margin-top: -4rem;margin-bottom: 4.5rem;}
.hew-profiles .feature-box:hover {background: #6357a0; color: #fff; cursor: pointer;}
.hew-profiles .feature-box:hover a {color: #fff;}
.landing-page .hew-profiles .feature-box:hover .feature-copy {background: #6357a0; color: #fff; cursor: pointer;}
.hew-profiles .feature-box:hover .feature-img{opacity: .8;}
.landing-page .hew-profiles .feature-box:hover h3, .landing-page .hew-profiles .feature-box:hover h4 {color:#fff}

#popupOverlay {position: fixed;z-index: 19999;background: rgba(0,0,0,.5);top: 0;left: 0;visibility: hidden;}
body.showPopup #popupOverlay {visibility: visible; position: fixed;}
#popupContainer {background:#fff; display: none; height: 100vh; z-index: 19999; overflow: auto; padding: 0 1.5rem; position: relative;}
#popupContainer .feature-copy {background:#fff;}
#popupContainer a.closebtn {color: #ccc; padding: 5px; position: absolute; right: 1rem;}
body.showPopup {overflow:hidden};
body.showPopup #popupContainer {overflow:auto;  width: 100vw; transition: width .25s ease-in-out; max-width: 100vw;}
body.showPopup #popupContainer .navBtns{top: 17vh; position: relative;}
body.showPopup #popupContainer .navBtns a{font-size: 2em; color: #ccc;}
#popupContainer a.closebtn:hover, body.showPopup #popupContainer .navBtns a:hover {color: #6357a0}
body.showPopup #popupContainer .navBtns a.rightbtn{float: right;}
body.showPopup #popupContainer .navBtns a.disabled {display:none;}
body.showPopup #popupContainer .feature-box{padding: 1.5rem 3rem; text-align: center; "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;}

/* Desktop Layout: 768px to a max of 999px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width:1000px) {
    .hew-profile-list {background: #f0f0f0; padding: 3rem; }
    .hew-profiles {flex-wrap: wrap; flex-basis: auto; flex-direction: row;}
    .hew-profiles .feature-box {background: #fff; flex:0 0 31.333333%; max-width: 31.333333%; margin: 0 1% 2em; position: relative;}

    .hew-profiles .feature-content {display: flex;}
    .hew-profiles .feature-img {margin:0}
    .landing-page .hew-profiles .feature-box .feature-copy {flex: 2; padding: .5rem 1rem 0; background:#fff;}
    .landing-page .hew-profiles .feature-box .feature-copy h3 {font-size: 20px; text-align: left; line-height: 1em; margin-bottom:.5rem;}
    .landing-page .hew-profiles .feature-box .feature-copy h4 {font-size: 13px; text-align: left; margin: 0}

    body.showPopup #popupOverlay {visibility: visible; position: fixed; z-index: 19990; background: rgba(0,0,0,.5); top: 0; height: 100%; width: 100%; display: block; transition: all .25s ease-in-out;}
    body.showPopup #popupContainer {width: 650px; height: 90vh; margin: 10vh auto 0;}
    body.showPopup #popupContainer .feature-detail {text-align: initial}
}