@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@font-face {
font-family:"helvetica-neue-lt-pro";
src:url("https://use.typekit.net/af/69bcfb/0000000000000000775ad3aa/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/69bcfb/0000000000000000775ad3aa/31/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/69bcfb/0000000000000000775ad3aa/31/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

*{margin: 0;padding: 0;box-sizing: border-box;list-style: none} 
p{margin: 0}
a{text-decoration: none}
ul{padding: 0}
img {max-width: 100%}
:root{
    --fontFamily : "Roboto Flex";
    --HelveticaNeue : "helvetica-neue-lt-pro";
    --cream : #f6edde;
    --bgColor : #fbf7f1;
    --coffeeBColor : #361d14; 
    --h2 : 900 clamp(2.5rem, 1.4356rem + 3.9604vw, 5rem)/0.8 var(--fontFamily);
    --3220 : clamp(1.25rem, 0.9307rem + 1.1881vw, 2rem);
    --h3 : 900 clamp(2.5rem, 1.4356rem + 3.9604vw, 5rem)/0.8 var(--fontFamily);
    --h4 : 900 clamp(1.5rem, 1.0743rem + 1.5842vw, 2.5rem)/0.8 var(--fontFamily);
    --1612 : clamp(0.75rem, 0.6436rem + 0.396vw, 1rem);
    --Font2420 : 500 clamp(1.25rem, 1.1436rem + 0.396vw, 1.5rem)/1.2 var(--HelveticaNeue);
    --cardRed : #932d21;
    --yellow : #ffbc66;
    --12848 : 900 clamp(3rem, 0.8713rem + 7.9208vw, 8rem)/0.8 var(--fontFamily);
    --lightGreen : #c8ff00;
    --Font4024 : 900 clamp(1.5rem, 1.0743rem + 1.5842vw, 2.5rem)/0.8 var(--fontFamily); 
}

body{background: var(--bgColor)}
#headerAndBannerCon{max-width: 1440px; margin: 0 auto}
#bannerCon{display: flex;gap: var(--3220);background: var(--cardRed);flex-wrap: wrap;position: relative}
#bannerCon #heroBanner{max-width: 704px;min-height: 839px;width: calc(53% - 16px);position: relative}
#heroBanner img{height: 100%;object-fit: cover}
#heroBannerContent{margin: 173px 0 0;width: calc(47% - 16px);padding: 0 var(--3220) 0 0}
#heroBannerContent img{width: 438px;margin: 0 0 16px}
#heroBannerContent p{color: var(--cream);font: var(--Font2420);letter-spacing: -0.96px;max-width: 555px;margin: 0 0 var(--3220)}
header #headerBlock{display: flex;justify-content: space-between;padding: var(--3220);position: absolute;top: 0;left: 0;right: 0;z-index: 1}
header a{font: 900 clamp(1rem, 0.8936rem + 0.396vw, 1.25rem)/1.2 var(--fontFamily);color: var(--cream);margin: 0 0 8px 0;display: inline-block}
.texture{position: absolute;bottom: 0}
#desktopMenu a:hover{text-decoration: underline;color: var(--cream)}
#desktopMenu ul li{text-align: right}
.stickyNavBar #desktopMenu a:hover{color: initial}
#heroBanner p{position: absolute; bottom: 128px; left: var(--3220);color: var(--cream);font:500 clamp(1rem, 0.8936rem + 0.396vw, 1.25rem)/1.2 var(--HelveticaNeue);letter-spacing: -0.64px}


#HIVVideoCon{height: clamp(32.5rem, 25.7413rem + 25.1485vw, 48.375rem);position: relative}
#hIVVideoContent {max-width: 1109px;position: absolute; left: var(--3220);right: var(--3220);bottom: var(--3220);display: flex;gap: var(--3220);flex-direction: column}
#hIVVideoContent h2{font: var(--12848);letter-spacing: 2.56px;color: var(--cream)}
.videoThumbImg{height: 100%;width: 100%;object-fit: cover}
#hIVVideoContent p{font: 500 20px/1.2 var(--HelveticaNeue);max-width: 873px;letter-spacing: -0.8px;color: var(--cream)}
#watchNow{font: 900 20px/0.8 var(--fontFamily);display: inline-flex;padding: 12px 24px;align-items: center;gap: 8px;background: var(--lightGreen);color: var(--coffeeBColor)}

#whatNext h2{font:900 clamp(4rem, 2.297rem + 6.3366vw, 8rem)/0.8 var(--fontFamily);margin: 0 0 var(--3220);position: relative;color: var(--coffeeBColor)}
#whatNextCardCon, #exploreCardCon{display: flex;gap: var(--3220);flex-wrap: wrap}
.whatNextBlocks{width: calc(50% - 16px);padding: var(--3220);height: clamp(24.375rem, 16.8713rem + 27.9208vw, 42rem);position: relative}
.whatNextBlocks h3{font : var(--h3); margin: var(--1612) 0;color: var(--cream)}
.whatNextBlocks a{text-decoration: none;color: initial}
.whatNextBlocks p{font: 500 clamp(1.5rem, 1.2871rem + 0.7921vw, 2rem)/1.2 var(--HelveticaNeue);letter-spacing: -1.28px;color: var(--cream)}
.whatNextBlcImg { object-fit: cover; position: absolute; left: 0; right: 0; height: 100%;top: 0;width: 100%}
.whatNextBlockCon{position: absolute;left: var(--3220); right: var(--3220); bottom: var(--3220);z-index: 1}
.whatNextOverlay{background: linear-gradient(180deg, rgba(54, 29, 20, 0.00)  0%, rgba(54, 29, 20, 0.72)  100%); position: absolute; left: 0; top: 0; bottom: 0}
.whatNextBlocks a:hover .whatNextOverlay{right: 0}
.whatNextBlocks a:hover h3{color: var(--lightGreen)}
#whatNext h2 img{position: absolute;left: 47%;top: 70%;z-index: 1}

.exploreCards{width: calc(33.33% - 2*32px/3);background: var(--yellow);padding: var(--3220);color: var(--cream)}
.exploreCards a{display: flex;flex-direction: column;justify-content: space-between;min-height: 308px;text-decoration: none;color: inherit}
.exploreCards h4{font: var(--Font4024);line-height: 1.2; margin: 0 0 16px;min-height: 64px;color: var(--coffeeBColor)}
.exploreCards p{font: var(--Font2420);color: var(--coffeeBColor);letter-spacing: -0.8px}
.exploreCards .viewMore{color: var(--yellow);font-size:20px;display:flex;gap:8px;text-decoration: none;margin: 32px 0 0}
.exploreCards:hover h4{text-decoration: underline}
#exploreBlock h2{font: 900 clamp(3.5rem, 1.5842rem + 7.1287vw, 8rem)/0.8 var(--fontFamily);margin: 0 0 var(--1612);color: var(--coffeeBColor)}
/* .exploreCards:hover svg{position: relative; animation: move 0.2s ease-in-out; right: -8px} */
.stickyNavBar{position: fixed;top: 0;background: var(--cream);width: 100%; animation: fadeIn 0.3s ease-in-out;z-index: 999;left: 0}
.stickyNavBar #headerBlock{background: var(--cream);margin: 0 auto;position: initial}
.stickyNavBar svg path, #HIVBanner .errorPageHeader svg path, #HIVBanner .prepPageHeader svg path{fill: var(--coffeeBColor)}
.stickyNavBar a, #HIVBanner .errorPageHeader a, #HIVBanner .errorPageHeader p, #HIVBanner .prepPageHeader a, #HIVBanner .prepPageHeader p{color: var(--coffeeBColor)}
.mobVersion, #mobMenu{display: none}
#toggleMenuCon{background: var(--coffeeBColor);padding: var(--3220);position: fixed;top: 0;left: 0;right: 0;height: 100vh;display: none;z-index: 999}
#resMenuHeader{display: flex;justify-content: space-between}
#toggleClose{font: 16px/1.2 var(--fontFamily);color: var(--yellow);cursor: pointer}
#resLinks{display: flex;flex-direction: column;gap:24px;padding: 40px 0 0}
#resLinks a{font : 900 56px/1.2 var(--fontFamily); color:  var(--lightGreen)}
#resMenuHeader svg{width: 63px;height: 40px}
#resMenuHeader #toggleClose svg{width: 32px; height: 32px}
#resMenuHeader svg path{fill: var(--bgColor)}
#HIVVideo, #whatNext, #explore, #footer{padding: var(--3220);background: var(--bgColor)}
#siteLinks a:hover{text-decoration: underline}

#HIVIsCloserBlock{display: flex;gap: var(--3220);padding: var(--3220) 0 0;border-top: 1px solid var(--cream)}
.HIVIsCloserBlockCon{width: calc(50% - 16px);display: flex;flex-direction: column;justify-content: space-between}
.HIVMobVerImage, .HIVDesktopVerImage img:not(:last-child){display: none}
#HIVIsCloserBlockSec{padding: var(--3220);background: var(--coffeeBColor)}
#HIVIsCloserBlockSec h2{font: 900 clamp(4rem, 2.297rem + 6.3366vw, 8rem)/0.8 var(--fontFamily); margin: 0 0 var(--1612);color: var(--cream)}
#HIVIsCloserBlockSec > p{color: var(--cream);font: var(--3220);font: clamp(1.5rem, 1.2871rem + 0.7921vw, 2rem)/1.2 var(--HelveticaNeue);letter-spacing: -0.8px;max-width: 1190px;margin: 0 0 var(--3220)}
#HIVIsCloserBlockSec h3{display: flex;justify-content: space-between;color: var(--cream);font: 900 clamp(1.5rem, 1.0743rem + 1.5842vw, 2.5rem)/0.8 var(--fontFamily);margin: 0 0 var(--1612)}
#HIVIsCloserBlock p{font : clamp(1.25rem, 1.1436rem + 0.396vw, 1.5rem)/1.2 var(--HelveticaNeue); letter-spacing: -0.8px;color: var(--cream);margin: 0 0 var(--3220)}
.closeBlocks{display: none}
#blockThree .closeBlocks{display: block}
.HIVMobVerImage img{margin: 0 0 var(--3220)}
.accClick{cursor: pointer}
#checkHIV a{padding: 12px 24px;background: #c8ff00;display: inline-flex;align-items: center;gap: 8px;font: 900 20px/1.2 var(--fontFamily)}

#footerBlock{text-align: center}
#footerBlock p, #footerBlock a{font: 900 20px/1.2 var(--fontFamily);color: var(--coffeeBColor);text-decoration: none}
#footerBlock .socialIcon {width: 48px;padding: 14px;background: var(--coffeeBColor)}
#socialMedia{display: flex;justify-content: center;gap:24px;margin: 0 0 32px}
#careFor{margin:0 0 16px}
#siteLinks Ul{margin: 0 0 34px;display: flex;flex-wrap: wrap;list-style: none;justify-content: space-between;column-gap: 24px;row-gap: 16px}
.footerText{margin: 0 0 24px}
#copyRight{margin: 24px 0 0;margin: 24px auto}
#footerBlock .socialIcon:hover{background: var(--cardRed)}
#footerBlock .socialIcon:hover svg path{fill: var(--yellow)}
#footerBlock div:last-child img{max-width: 120px}
#toggleMenu, .mobileVer{display: none}

#whatNextBlock, #exploreBlock, #footerBlock, #HIVCloserSec {max-width: 1376px;margin:auto}
#HIVVideo, #headerBlock{max-width: calc(1360px + 80px);margin: 0 auto}
footer.gl-footer .container {padding: 0}

#lest_talk_prep #headerBlock, #lest_talk_prep #headerAndBanner{position: initial;background: var(--coffeeBColor)}
#lest_talk_prep .stickyNavBar #headerBlock{background: var(--cream);margin: 0 auto}
#error_page #headerBlock, #sitemap_page #headerBlock{position: initial}
#error_page #desktopMenu a, #sitemap_page #desktopMenu a{color: var(--coffeeBColor)}
#error_page #logo svg path, #sitemap_page #logo svg path{fill : var(--coffeeBColor)} 
#error_page #mobMenu svg path, #sitemap_page #mobMenu svg path{stroke: var(--coffeeBColor)}

#watchNow:hover img, .exploreCards:hover svg{position: relative; animation: move 0.2s ease-in-out; right: -8px}
#HIVVideo{margin: -2px auto 0;position: relative}
#heroBannerContent p:last-child  {max-width: 538px}
#logo a{margin: 0}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes move {
    from {right: 0}
    to {right: -8px}
}

@media only screen and (max-width: 1330px) {
    .exploreCards h4{font-size: 27px}
    #siteLinks Ul{justify-content: center}
}

@media only screen and (max-width: 992px) {
    .exploreCards{width: 100%}
    .exploreCards h4, .exploreCards a{min-height: initial}
    .exploreCards h4{font-size: 27px}
    #hIVVideoContent a img{max-width: 48px}
    #mobMenu{display: block}
    #desktopMenu{display: none}
    header{align-items: flex-start}
    .stickyNavBar #mobMenu svg g{stroke: var(--coffeeBColor)}
    #logo svg{width: 80px;height: 48px}
    #resLinks a{line-height: 0.8}
}

@media only screen and (max-width: 767px) {
    #blockThree .closeBlocks{display: flex}
    .whatNextBlocks{width: 100%}
    .HIVMobVerImage{display: block}
    .HIVDesktopVerImage{display: none}
    .HIVIsCloserBlockCon{width: 100%}
    .HIVIsCloserBlockCon h3 img{max-width: 18px}

    #bannerCon #heroBanner, #heroBannerContent{width: 100%;max-width: initial}
    #bannerCon #heroBanner{min-height: 430px;height: 430px}
    #heroBannerContent{margin: 0;padding: var(--3220) var(--3220) 0} 
    #bannerCon{gap: 0}
    /*#heroBanner img {object-fit: contain}*/
    #heroBanner p{bottom: var(--3220)}
    .texture{position: initial}
    #heroBannerContent img{max-width: 187px}
    .desVersion{display: none}
    .mobVersion{display: block}
    #hIVVideoContent p{letter-spacing: -0.8px;max-width: 349px}
    #whatNext h2 img{left: initial;top: 100%;right: 7px;max-width: 156px}
    #footerBlock p, #footerBlock a{letter-spacing: -1.0px}
    .viewMore svg{width: 24px;height: 24px}
    #hIVVideoContent h2{margin: 0 0 -12px 0}
}