@font-face {
font-family:"Open Sans Condensed";
src:url("https://use.typekit.net/af/066173/00000000000000007735a05f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/066173/00000000000000007735a05f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/066173/00000000000000007735a05f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}
     body{
            /* background:#EDEBE8; */
            
            font-family: "Barlow Condensed";}
        

        .top-header{
            padding-top:60px;
            /*padding-bottom: 10%;*/
            height:auto;
            /*background: url("images/HIV_21907sm_1.png");*/
            background-image: url('images/header-banner-top-mobile.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position-x: center;
            
        }
        .header-left-logo-wrapper{
            text-align:left;
        }
        .header-left-logo{
            margin-left:13%;
            
            width: 15vw;
            max-width:170px;
            height: auto;
        }
        .header-top-right{
            text-align:center;
        }
        .header-top-right-tag-line-wrapper{
            width:100%;
            float:left;
            text-align:right;
            
        }
        .header-top-right-tag-line{
            font-family: "Barlow Condensed";
           text-align:center;
           padding:15px;
            font-size:15px;
        }
        
        /*.header-top-right-image-wrapper{width:30%;float:right;text-align:left}*/

        .header-top-right-image{
            
           /* margin-top:-30px;*/
            margin-right:15%;
            width:15vw;
            max-width:280px;
            /*margin-left:15px;*/
            
        }
        .header-second-section-banner-wrapper{
            background: url('images/HIV_21907sm_1.png');
    background-size: cover;
    background-position: center;
              padding-left:7%;
            padding-top:10%;
            padding-bottom:10%;
        }
        .header-second-section-wrapper{
            font-family: Anton;
            width:35%;
            font-size: 3vw;
           /* margin-left:15%;
            margin-right:5%;
            margin-top:35%;*/
            text-transform: uppercase;
            line-height:130%;
  

        }
        .header-second-section-top{
            
            color:rgba(0,0,0,1);
            
    
    display:inline-block;
    
        }
        .header-second-section-bottom{
            color: rgba(255, 52, 54, 1);
           
            
        }
        .header-second-section-right-wrapper{
            height:100%;

        }
        
        .header-banner-section-mobile{
            display:none;
        }
        .foot-note-number{
    text-transform: lowercase;
    font-size: 15px;
    margin-top: 8px;
    line-height: 110%;
    margin-left: -5px;
    position: absolute;
        }
        .content-section-2-left-wrapper{
            background: #FFFFFF;
            font-family: Anton;
            height:100%;
            /*padding:20% 13%;*/
            padding:20% 30% 20% 13%;
        }
        .content-section-2-left-wrapper .top-span{
            color: rgba(255, 52, 54, 1);
            /*font-size: 3vw;*/
            font-size:52px;
            margin-bottom: 20px;
       font-family: Anton;
    line-height: 120%;
    text-transform: uppercase;
    
    
        }

         .content-section-2-left-wrapper .bottom-span{
        color: rgba(0, 0, 0, 1);
    
    left: 0px;
    font-family: "Open Sans";
    /*font-weight: Regular;*/
    /*font-size: 1.5vw;*/
    font-size:22px;
    line-height:150%;
    max-width:400px;
    
         }
         .content-section-2-right-wrapper img{
             width:100%;
             height: auto;
         }
        .content-section-2-right-wrapper{
            

        }
        
        .container-section-3-center-wrapper{
            background: rgba(44, 44, 44, 1);
            padding: 5% 5%;
            font-family: Anton;
        }
        .container-section-3-center-span{
            font-size:58px;
            line-height:120%;
          
          /* font-family: "Open Sans Condensed", sans-serif;*/
          font-family: "Anton";
            text-transform:uppercase;
            text-align: center;
            font-weight:200;
            color:#FFFFFF;
        }
        .content-section-4-carousel .content-section-4-top-wrapper{/*border-left: 1px solid #000*/}
        /* carousel slideshows */
/*
.mySlides {display: flex;
border-bottom:1px solid #000;
   
     transition: transform 0.5s ease-in-out ;
}
.mySlides img {width:100%;height:auto;vertical-align: middle;}
 


 @keyframes slide-in {
  from {
    translate: 20vw 0;
    scale: 100% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}




.slideshow-container {

  position: relative;
  margin: auto;
  overflow:hidden;
}

.slideshow-container .prev,.slideshow-container .next {
  cursor: pointer;
  text-decoration:none;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slideshow-container .prev:hover,.slideshow-container .next:hover {
  background-color: #f1f1f1;
  color: black;
}
*/
.slider-container {
    /*height:90vh;*/
    position: relative; /* Allows for absolute positioning of navigation buttons */
    /*width: 60%; *//* Sets the slider width to 60% of the parent container */
   /* max-width: 800px;*/ /* Maximum width for larger screens */
    overflow: hidden; /* Hides the overflow content (only one image is visible at a time) */
   /* border-radius: 10px;*/ /* Rounds the corners of the slider */
  /*  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);*/ /* Adds a subtle shadow for depth */
}

/* Flexbox container that holds all the slides */
.slider {
    height:100%;
    display: flex; /* Enables flexbox layout to line up slides horizontally */
    transition: transform 0.4s ease-in-out; /* Smooth transition when sliding between images */
}

/* Each individual slide - takes up full width of the container */
.slide {
    height:100%;
    min-width: 100%; /* Each slide takes up 100% of the slider container's width */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;

    height: auto; /* Fixed height for each slide */
    transition: transform 0.5s ease-in-out; /* Smooth transition when slides are changed */
}

/* Ensures that images fill the slide area while maintaining aspect ratio */
.slide img {
    width: 100%; /* Image width matches the slide width */
    height: 100%; /* Image height matches the slide height */
    object-fit: cover; /* Images are scaled to cover the entire slide, cropping if necessary */
    /*border-radius: 10px; *//* Rounds the corners of the images to match the slider */
}

/* Common styling for both previous and next navigation buttons */

.prev, .next {
    position: absolute; /* Absolute positioning within the slider container */
    top: 50%; /* Centers the button vertically */
    transform: translateY(-50%); /* Offsets the button position by half its height */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: white; /* White color for the arrow icons */
    border: none; /* Removes default button borders */
    width: 40px; /* Fixed width for the buttons */
    height: 40px; /* Fixed height for the buttons */
    cursor: pointer; /* Changes the cursor to pointer on hover */
    z-index: 10; /* Ensures buttons appear above the slider content */
    border-radius: 50%; /* Makes the buttons round */
    transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
    display: flex; /* Enables flexbox for centering the arrow inside the button */
    justify-content: center; /* Centers arrow horizontally */
    align-items: center; /* Centers arrow vertically */
    padding: 0; /* Removes any default padding */
}


/* Positioning the previous button to the left */
.prev {
    left: 10px; /* Positions the button 10px from the left edge */
}

/* Positioning the next button to the right */
.next {
    right: 10px; /* Positions the button 10px from the right edge */
}

/* Hover effect for navigation buttons */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darkens the button background on hover */
}
/* carousel slideshows ends */
        /*
        .content-section-4-mobile{
            display:none;
        }*/
        .content-section-4-mobile img{
            width: 100%;
            height: auto;
        }
        .content-section-4-top-wrapper{
          /*  position: relative;*/

        }
        .content-section-4-top-span{
            /*position: absolute;
            bottom:5%;*/
            line-height:120%;
            font-size: 2.2vw;
            font-family: "Libre Baskerville", serif;
             font-style: italic;
            color:#FFFFFF;
            text-align:center;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
            /*padding: 0 10%;*/
           /* padding: 50% 10% 10% 20%;*/
           padding: 50vh 0% 10% 15vw;
        }
        .content-section-4-carousel .content-section-4-top-span{
            font-size:2.2vw;
        }
        .content-section-4-mobile .content-section-4-top-span{
            font-size:33px;
        }
        .content-section-5{
            /* background:rgba(197, 31, 65, 0.20000000298023224);*/
            padding:10% 0;
             background:rgba(197, 31, 65, 0.27);
        }
        .content-section-5-left-wrapper{
           
            height:100%;
        }
        .content-section-5-left-wrapper .top-span{
        color: rgba(197, 31, 65, 1);
        /*font-size: 58px;*/
        font-size:4vw;
        text-transform: uppercase;
        line-height: 120%;
        font-family: Anton;
        padding:20% 10%; 
        }
        .content-section-5-right-wrapper{
            text-align:center;
            position: relative;
            width:100%;
        }
        .content-section-5-right-wrapper .video_thumbnail{
            width:90%;
            height:auto;
            
        }
        .content-section-5-right-wrapper .video_button{
            position:absolute;
            bottom:40%;
            left:45%;
            cursor:pointer;
            opacity:.9;
        }
        .content-section-5-right-wrapper .video_button:hover{
            opacity:1;
        }
        .content-section-6{
         padding: 4% 0;  
        background: #FFFFFF;
        }
    .content-section-6-title{
           color: rgba(0, 0, 0, 1);
        text-transform: uppercase;
        font-family: Anton;
        /*font-weight: Regular;*/
        font-size: 4vw;
        padding-bottom:1%;
        /*padding: 5% 0;*/
    
    }
    .content-section-6 img{
        width:100%;
        height:auto;
    }
    
    .content-section-6-span-1{
        font-size: 4vw;
        font-family: Anton;
        color: rgba(255, 52, 54, 1);
        text-transform:uppercase;
    }
        .content-section-6-span-2{
        font-size: 1.2vw;
        font-family: "Open Sans";
        color: rgba(0, 0, 0, 1);
        min-height:10vw;
    }
    
    .content-section-6-span-3{
        font-family: "Libre Baskerville";
    font-size: 1.4vw;
    text-align: center;
    background: rgba(197, 31, 65, 1);
    color: #FFFFFF;
    font-style: italic;
    padding: 10%;
    line-height: 120%;
    
    min-height:18vw;
    }
    
    
            .content-section-7{
        background: #FFFFFF;
        }
    .content-section-7-title{
           color: rgba(0, 0, 0, 1);
        text-transform: uppercase;
        font-family: Anton;
        font-weight: Regular;
        font-size: 4vw;
        padding-top: 5%;
    
    }
        .content-section-7-subtitle{
           color: rgba(0, 0, 0, 1);
           margin:.5% 0 4% 0;
        line-height:120%;
       /* font-family: "Open Sans", serif; */
       font-family: "Open Sans Condensed", sans-serif;
        font-weight: bold;
        font-size: 24px;
        
    
    }
         .content-section-7-box{
         background: rgba(237,235,232,1);
         padding: 10%;
         }
         
         .content-section-7-box-span-1{
         color: rgba(255, 52, 54, 1);
   min-height:80px;
   line-height:130%;
   text-transform:uppercase;
    font-family: Anton;
    /*font-weight: Regular;*/
    font-size: 29px;
         }
         .content-section-7-box-span-2{
        font-family: "Open Sans Condensed", sans-serif;
         font-size: 20px;
         padding: 10% 0;
         min-height:160px;
         }
        .content-section-7-box-span-3 a{
             width: auto;
             background: rgba(255, 52, 54, 1);
    padding: 10px 20px;
    color: rgba(255, 255, 255, 1);
  text-decoration:none;
  text-transform:uppercase;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: Bold;
    font-size: 1.1vw;
        }
        .link-outside-shortcut{
margin-left: 10px;
    vertical-align: baseline;}
    
    .content-section-8 img{
        width:100%;
        height:auto;
    }
    .content-section-8{
        padding: 15% 0 5% 0;
    background: #FFFFFF;
    }
    .content-section-8-span-2{
            font-family: "Libre Baskerville";
            background: rgba(44, 44, 44, 1);
            color: rgba(255, 255, 255, 1);
            padding:10%;
    font-style: Italic;
    line-height:140%;
    font-size: 2vw;
    height:100%;
    text-align:center;
    }
      .footer-section-9{
        background: rgba(197, 31, 65, 1);
        padding:3% 0;
    }
    .footer-section-9 a{
        color:rgba(255, 255, 255, 1);
        text-decoration:none;
        cursor:pointer;
    }

    .footer-section-9 a:hover{
        color:rgba(255,255,255,.8);
    }
    .footer-section-9-span-1{
        color: rgba(255, 255, 255, 1);

    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 100;
    font-size: 13px;

    text-align: center;
    }
    .footer-section-9-span-2{
        color: #ffffff;
padding:30px 0 10px 0;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 100;
    font-size: 13px;

    text-align: center;
    }
    
        .footer-section-9-span-photography{
        color: rgba(255, 255, 255, 1);
padding:30px 0 0px 0;
line-height:30px;

    text-align: center;
    }
    .footer-section-9-span-photography .photography-title{
        margin-right:10px;
            font-family: "Open Sans Condensed", sans-serif;
    font-weight: 100;
    font-size: 16px;
    }
    .footer-section-9-span-photography img{
        height:16px;
        width:auto;
    }
    
    .footer-section-9-span-3{
        text-align:center;
		background-color: #ffffff;
margin-top: 30px;
padding-bottom:20px;
    }
    .footer-section-9-span-3 img{
        margin:15px;
        width:80%;
        max-width:177px;
        height:auto;
    }
       .footer-section-9-span-4{
               color: rgba(255, 255, 255, 1);
padding:30px 0 20px 0;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 100;
    font-size: 13px;

    text-align: center;
    }
    .footer-section-9-span-5{
        text-align:center;
        margin-bottom:20px;
    }
    .footer-section-9-span-5 a{
        color:#FFFFFF;
        text-decoration: none;
        font-family: "Nunito Sans", serif;
        font-weight: bold;
    
    font-size: 24px;
    }
    .footer-linkedin-logo{
        margin-right:15px;
        vertical-align:baseline;
        height:24px;
        width:auto;
    }
    .footer-gilead-logo{
        height:24px;
        width:auto;
    }
    .footer-section-9-span-6, .footer-section-9-span-7{
        color: rgba(255, 255, 255, 1);
text-align:center;
    font-family: "Open Sans";
    font-weight:100;
   
    font-size: 11px;
    }
    
    .footer-section-9-span-8{
        color: rgba(255, 255, 255, 1);
font-family: "Open Sans";
    font-size: 12px;
    margin-top: 25px;
    padding-top: 25px;
    font-weight:100;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .5);
    
    }
    .footer-section-9-span-8 .bold-white{
        font-weight:bold;
    }
        .text-left-align{text-align:left}
    
    .section-popup{
        justify-content: center;
         animation: slide 0.2s linear;
        align-items: center;
        background:rgba(255,255,255,1);
        width: 100%;
        height:100vh;
        display:none;
        position:fixed;
        top:0;
        left:0;
    }
    .section-popup-body{
        padding:3% 5%;
        width:50%;
        text-align:center;
        margin: 0 auto;
        background:rgba(197, 31, 65, 0.20000000298023224);
    }
    .section-popup-body-span-1{
        color: #312C37;
    
    font-family: Anton;
    font-size:3vw;
    line-height:120%;
    text-align:center;
    text-transform:uppercase;
    }
    .section-popup-body-span-2{
    color: #312C37;    
    padding: 6% 0 10% 0;
    font-size:20px;
    line-height:25px;
    letter-spacing: -1%;
     font-family: "Open Sans Condensed", sans-serif;
    }
    .section-popup-body-span-3-continue{
        color:#FF3436;
        font-family: Anton;
        text-transform: uppercase;
        font-size:22px;
        line-height:23px;
        letter-spacing:-1;
        cursor:pointer;
    }
    .section-popup-body-span-3-cancel{
        color:#312C37;
        font-family: Anton;
        text-transform: uppercase;
        font-size:22px;
        line-height:23px;
        letter-spacing:-1;
        cursor:pointer;
    }
    .section-popup-body-span-3-continue-cancel-divider{
        color:#000000;
        font-family: inherit;
        text-transform: uppercase;
        font-size:24px;
        line-height:25px;
        letter-spacing:-1;
        font-weight:400;
        margin: 0 10px;
    }   
#top-bottom-scroll-btn {
  display: flex;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 22px;
  
 /* border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;*/
    transform: translateY(-50%); 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    border: none; 
  
      width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    transition: background-color 0.3s ease;
  
    justify-content: center;
    align-items: center;
    padding: 0;
	padding-bottom: 2px;
	
}
  


#top-bottom-scroll-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}    
    @media only screen and (max-width: 768px) {
        .content-section-5-right-wrapper .video_thumbnail {
        width: 100%;
        vertical-align: bottom;
    }
    .content-section-2-left-wrapper {
        padding: 20% 30% 20% 13%;
    }
    }
        @media only screen and (max-width: 600px) {
            .top-header{
                padding-top:50px;
                padding-bottom:0;
                background: url("images/header-banner-top-mobile.png");
                
            }
        /* .header-top-right{
            margin: 10px 0;
        }*/
       
            .header-top-right-tag-line{
            float:none;
            font-size:10px;
          /*  font-family: "Open Sans Condensed", sans-serif;*/
           
        }
.header-left-logo{
    width:100px;
    margin-left:17%;
}
        .header-top-right-image {
            width:150px;
            margin-right:10%;
    /*margin-top: -15px;
    margin-left: 5px;
    max-width: 57px;*/
    
    
} 
       .header-second-section-banner-wrapper{
          background:none;
          padding:0;
    
        }
       .header-second-section-wrapper{
           /*font-size:52px;*/
           font-size:35px;
           line-height:130%;
           margin-left:10%;
           margin-top:10%;
           
           width:80%;
           max-width:400px;
           position:relative;
           z-index:1;
       }
               .foot-note-number{
    text-transform: lowercase;
    font-size: 13px;
    margin-top: 5px;
    line-height: 110%;
    margin-left: -5px;
    position: absolute;
        }
       
       .header-banner-section-mobile img{
           width:100%;
           height: auto;
           margin-top:-20px;
       }
       .header-banner-section-mobile{
           display:block;

       }

       .content-section-2-left-wrapper{
           padding:12%;
       }
       .content-section-2-right-wrapper{

       }
.content-section-2-left-wrapper .top-span{
    font-size:40px;
    line-height:50px;
}
.content-section-2-left-wrapper .bottom-span{
    font-size:19px;
     font-family: "Open Sans Condensed", sans-serif;
}

.container-section-3-center-wrapper{
    padding: 10% 5%;
}
 .container-section-3-center-span{
  font-size:40px;   
  line-height:120%;
 }
 /*
        .content-section-4-mobile{
           display:block;
       }
       .content-section-4-carousel{
           display:none;
       }
       */
       .content-section-4-top-wrapper{
           position:relative;
       }
       
       .content-section-4-top-span{
           font-size:33px;
           position:absolute;
           bottom:10%;
           line-height:120%;
           padding:0 10%;
       }
       .content-section-5{
           padding:0;
       }
       .content-section-5-left-wrapper .top-span{
           font-size:35px;
           line-height: 120%;
           padding: 10%; 
       }
       .content-section-5-right-wrapper .video_thumbnail{
           width:100%;
           vertical-align: bottom;
       }
       .content-section-5-right-wrapper .video_button{
           left:40%;
       }
       
       .content-section-6{
           padding:10% 3%; 
       }
       .content-section-6-title{
           font-size:40px;
           line-height:120%;
       }
       .content-section-6-span-1{
           font-size: 64px;
           margin-top:10%;
       }
       .content-section-6-span-1.first-span{
           margin-top:0;
       }
        .content-section-6-span-2{
           font-size: 16px;
           font-weight:300;
           font-family: "Open Sans Condensed", sans-serif;
           margin-bottom:5%;
           min-height:auto;
       }
       .content-section-6-span-3{

    font-size: 18px;

    line-height: 120%;
    }
    .content-section-7{
        padding:5%;
    }
    .content-section-7-title{
        font-size: 40px;
    }
        .content-section-7-subtitle{
        margin: 3% 0 4% 0;
    }
    .content-section-7-box{
        margin:5% 0;
    }
    .content-section-7-box-span-1{
        font-size:29px;
        min-height: auto;
    }
    .content-section-7-box-span-3 a{
        width:auto;
        font-size:16px;
    }
    .link-outside-shortcut {
        margin-left:5px;
    }
    .content-section-8{
        padding:15% 0 0 0;
    }
    .content-section-8-span-2{
        font-size:36px;
        line-height:120%;
        
    }
.footer-section-9-span-photography .photography-title{font-size:14px}
.footer-section-9-span-photography img{height:14px}
    .footer-section-9-span-7{
        margin-top:25px;
    }
    /* link popup */
    .section-popup-body{
        padding: 7% 5%;
        width:90%;
    }
    .section-popup-body-span-1{
        font-size:30px;
    }
    .section-popup-body-span-2{
        font-size:14px;
        line-height:20px;
        padding: 10% 0 15% 0;
    }
        }