@charset "utf-8";
/* CSS Document */
    .covidBand{width:100%; height:30px; background-color:#00ecd1;}
    a{color:#00819E;}
    .colorWhite{color:#fff;}
    #content{padding:0;}
    .pageTitle{display:none;}
    h1{font-family:Inter,sans-serif;font-size:50px;color:#002538;line-height: 60px; font-weight:500;}
    h2{font-family:Inter,Helvetica,sans-serif;font-size:37px;color:#002538;line-height: 49px; font-weight:500;}
    h3{font-family:Inter,Helvetica,sans-serif;font-size:30px;color:#002538;line-height: 37px; font-weight:500;}
    img{vertical-align: bottom; }
    /*.heroBodyCopy{font-family:Inter,Helvetica,sans-serif;font-size:25px;color:#002538;line-height: 32px; font-weight:500;}*/
    .leadingParagraph{font-family:Inter,Helvetica,sans-serif;font-size:26px;color:#002538;line-height: 34px;}
    .bodyCopy{font-family:Inter,Helvetica,sans-serif;font-size:20px;color:#002538;line-height: 29px;}
    .homeRow {
      width: 100%;
      clear: both;
      
    }
     a.redBGLink:hover{
    text-decoration:none;
    background-color:#00D3FF;
    color:#002538;
    font-weight:bold;
  }
  .accentTop {
    border-top: 25px #00ecd1 solid;
  }
.accentBottom {
   border-bottom: 25px #00ecd1 solid;
}
/* ------------------ Hero Block  ------------------*/
.hero {
  position: relative;
}

.hero-overlay {
 text-align: left;
 position: absolute;
 z-index: 0;
 width: 45%;
 padding: 0px 20px 0px 60px;
}

.hero-overlay h1 {
  font-size: 2.75rem;
  font-size: max(2.75rem);
  font-family:Inter,Helvetica,sans-serif;
  
  line-height: 60px;
  /*letter-spacing: 0.45rem;*/
}

#homePageFR .hero-overlay h1 {
  font-size: 3rem;
  font-size: max(3rem);
  font-family:Inter,Helvetica,sans-serif;
  
  line-height: 55px;
  /*letter-spacing: 0.45rem;*/
}
.heroBodyCopy{
font-size: 1.3rem;
font-family:Inter,sans-serif;

line-height: 32px; 
font-weight:500;
}

#homePageFR .heroBodyCopy{
  font-size: 1.375rem;
  font-family:Inter,sans-serif;
  
  line-height: 32px; 
  font-weight:500;
  }

.hero-image {
 display: block;
/*Overflow: visible;*/
 z-index:-1;
 margin-left: auto;
 margin-right: auto;
 width: 100%;
}

div, p {
 text-rendering: optimizeLegibility;
}
/* ------------------ Hero Block END ------------------*/

/* ------------------ Blue Columns  ------------------*/
.blueLeftCol{
  float:left;
  width: 54%;
  background-color:#002538;
  height: 520px;
}
.colcopy{
  height: auto;
  padding: 60px 60px;
}
 .blueRightCol{
  width: 40%;
  float: left;
  height: 520px;
}
/* ------------------ Blue Columns END ------------------*/

/* ------------------ Pharmacy in Canada ------------------*/

 .pharmacy {
   width:100%;
   height:413px; 
   background-image: url('/cpha-ca/assets/Image/2021-rebrand/homepage/Pharmacy_In_Canada-2021.png');
  }

.pharmacycopy {
  width: 40%; 
  height: auto;
  float: right;
  padding: 50px 60px;
}

  /* ------------------ Pharmacy in Canada ------------------*/
  /*--------------------CPJ----------------------------------*/
   
  
  .heroBgHome {
    background: #002538 url("/cpha-ca/assets/Image/homepage/CPJ_homepage.jpg");
    background-repeat:no-repeat;
}
.cpjHero{
        display: flex;   
         width: 100%;
         min-height: 375px;
         background-repeat: no-repeat;    
    } 
.cpjHeroBgDarkBlue {
  background-color: #002538;
}

.cpjHeroBgGrey {
  background-color: #faf4f1;
}



.cpjHeroLeft {
  justify-content: flex-end;
  background-position: top left;
}

.cpjHeroRight {
  justify-content: flex-start;
  background-position: top right;
}

.cpjHeroText {
  	font-family: Inter, Helvetica, sans-serif;
    line-height: 1.875em;
    font-weight: 500;
    width: 50%;
    padding: 80px 45px;
}
  .cpjHeroText h1{font-size:3rem;}
  .cpjHeroText p{font-size:1.5rem;}
  /*--------------------End CPJ----------------------------------*/


/* ------------------ Latest Row with lozeng BG  ------------------*/
.latest
{ 
  width: 100%;
  background-image: 
    url('/cpha-ca/assets/Image/2021-rebrand/homepage/right_Lozenge.png'),
    url('/cpha-ca/assets/Image/2021-rebrand/homepage/Left_Lozenge.png');
    background-position:
    top right, /* this positions the first image */
    bottom left; /* this positions the second image */
  background-repeat:
    no-repeat; 
}

.latestcopy {
  width: 60%; 
  height: auto;
  margin: 0 auto;
  padding: 50px 0px;
  position: relative;
}

.latestcopy ul{display:inline-block; text-align:left;} 
.latestcopy li{list-style:none;}    
.latestcopy li{background:url('/cpha-ca/assets/Image/checkmark.png') left center no-repeat; padding-left:40px; font-size:1.5em;}
/* ------------------ Latest Row with lozeng BG END ------------------*/

.covidCol1{float:left; margin:auto; width:60%; padding:50px 0px 40px 60px;}
.covidCol2{float:left; margin:auto; width:30%; text-align:center; padding:50px 0px;} 
#titleText{position:absolute; top:100px; left:105px;}
#heroSubTitleText{position:absolute; top:300px; left:105px;}

    /*
  .covidMain{font-size:2.5em; margin-top:0; margin-bottom:72px;}   
  .covidSub{font-size:1.5em; margin-top:0; }
   .latestCol1{float:left; width:15%; margin-bottom:0; padding-bottom:0; position:relative; padding-top:100px;}
   .latestCol3{float:left; width:15%; position:relative; margin-top:0; padding-top:0;}
   .latestCol2{float:left; width:68%; position:relative; text-align:center; padding-top: 80px;}  
  .eventsCol1{float:left; margin:auto; width:47.5%; padding-top:40px; height:478px; padding-left:80px; background-color:#002538;}*/

  @media (max-width: 1099.98px) { 

      .cpjHero {  
        height: auto; 
        min-height: 0 !important;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: cover !important;
    }

    .cpjHeroText {
        background: rgba(0,37,56,0.9);
        text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        width: 100% !important;
        margin-bottom:-1px;
    }

    .blueRightCol {
      display: none;
    }
    .blueLeftCol {
        float: left;
        width: 100%;
        background-color: #002538;
        height: auto;
    }
    .pharmacy {
        width: 95%;
        background-color: #F8F4F1;
        height: auto;
        background-image: none;
    }
    .pharmacycopy {
        width: 100%;
        height: auto;
        float: left;
        padding: 30px 20px;
    }
}  
@media (max-width: 900px){
    /* ------------------ Latest Row with lozeng BG  ------------------*/
    .latest
    { 
      width: 100%;
      background-image: none;
    }

    .latestcopy {
      width: 100%; 
      height: auto;
      margin: 0 auto;
      padding: 50px 0px;
      position: relative;
    }
}
/*  ------------------- Small devices (up to 768px)   -------------------  */
@media (max-width: 780px){

  .hero {
    width: 100%;
    float: left;
    background-color:#F8F4F1;
  }
  
  .hero-overlay {
   width: 95%;
   text-align: center;
   position: static;
   padding: 30px 20px;
  }
  
  .hero-overlay h1 {
    font-size: 3.125rem;
    
    line-height: normal;
  }

  #homePageFR .hero-overlay h1 {
    font-size: 3.125rem;
   
    line-height: normal;
  }
  
  .hero-overlay h2 {
    font-size: 1.875rem;
    line-height: 2.625rem;
   
  }
  
  .heroBodyCopy{
   
    font-size: 1.25rem;
    line-height: 29px;
  }

  #homePageFR .heroBodyCopy{
    
    font-size: 1.25rem;
    line-height: 29px;
    }
  
  
  .hero-image {
   display: none;
  }
/* ------------------ Blue Columns  ------------------*/
.blueLeftCol{
  float:left;
  width: 100%;
  background-color:#002538;
  height: auto;
}
.colcopy{
  height: auto;
  padding: 30px 20px;
}

.blueRightCol {
  display: none;
}
/* ------------------ Blue Columns END ------------------*/
.covidCol1{width:95%; padding:20px; text-align: center;}
.covidCol2 {
  float: none;
  margin: auto;
  width: 30%;
  text-align: center;
  padding: 30px 20px;
}


/* ------------------ Pharmacy in Canada ------------------*/

.pharmacy {
  width:95%;
  background-color:#F8F4F1;
  height: auto;
  background-image: none;
 }

.pharmacycopy {
 width: 100%; 
 height: auto;
 float: left;
 padding: 30px 20px;
}
 /* ------------------ Pharmacy in Canada ------------------*/
/* ------------------ Latest Row with lozeng BG  ------------------*/
/*.latest
{ 
  width: 100%;
  background-image: none;
}

.latestcopy {
  width: 100%; 
  height: auto;
  margin: 0 auto;
  padding: 50px 0px;
  position: relative;
}*/
    
    .cpjHeroText {
        width: 100%;
        padding: 40px 10px 50px;
    }
   
    .cpjHero {
        max-height: none;
      }
  .cpjHeroText h1{font-size:2.5rem;}
  .cpjHeroText p{font-size:1.2rem;}

}