:root { 
    --Black: #00355F;
    --White: #ffffff;
    --Blue-1: #64B1E9;
    --Blue-2: #00355F;
    --Blue-3: #002442;
    --Gray-1: #737479; 
    --Gray-2: #646569;  
} 

@font-face {
  font-family: CocogoosePro; 
  src: url(/content/dam/intelligentcontent/brands/geneticcancerrisk/ca/en/fonts/CocogoosePro.ttf); 
}  


/* Header */
#header-container {border: 1px solid var(--Black);background: var(--Blue-2);box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.50);position: relative;z-index: 1;}
.languague-switcher {max-width: 1920px;margin: auto;padding: 0px 32px 8px;text-align: right;}
.languague-switcher a {color:var(--White);font-family: 'CocogoosePro';font-size: 18.75px;font-weight: 400;line-height: 69px;}
.languague-switcher a.active {color: var(--Blue-1);}
.languague-switcher .v-line {color: var(--White);font-family: "Helvetica Neue";font-size: 33px;font-weight: 300;line-height: 69px;padding: 0px 10px;}
.languague-switcher .v-line + a {padding-right: 10px;}
.cmp-text{padding: 0px;}

#middle-container {background: var(--Blue-2);background-repeat: repeat-x;background-position: bottom;padding: 48px 0px 62px;position: relative;}
#middle-container .title h1 {color: var(--White);text-align: center;text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.50);font-family: 'CocogoosePro';font-size: 32px;font-weight: 400;line-height: 150%;max-width: 1160px;margin: 0px auto;}
#btn-column-container {max-width: 1132px;margin: 35px auto 79px;text-align: center;}
#btn-column-container .cmp-button {display: flex;max-width: 500px;width: 100%;padding: 12px 33px 10px 33px;justify-content: center;align-items: center;gap: 10px;border-radius: 20px;background: #F7E289;box-shadow: 4px 6px 20px 0 rgba(0, 0, 0, 0.50);color: #15365E;font-family: 'CocogoosePro';font-size: 25px;font-weight: 400;line-height: 130%;cursor: pointer; text-decoration: none;}
#btn-column-container .cmp-button .cmp-button__text span {font-size: 20px;display: block;}
#btn-column-container .cmp-button:hover{background: #FCF5DC;}
#btn-column-container .cmp-button:active{background: #FFF;}
#btn-column-container .azcl-column-par2 .cmp-button {margin-left: auto;}
#middle-container .title h2 {color: var(--White);text-align: center;text-shadow: 4px 6px 10px rgba(0, 0, 0, 0.50);font-family: 'CocogoosePro';font-size: 54px;font-weight: 400;line-height:35px;max-width: 1160px;margin: 0px auto;}
#imglist-column-container {gap: 0px;margin: 44px auto 60px;position: relative;}
#imglist-column-container .img-wrapper {box-shadow: 4px 6px 20px 0 rgba(0, 0, 0, 0.50);max-width: 500px;min-height: 190px;display: block; background: var(--Blue-3);}
#imglist-column-container .content-wrap {padding: 28px 15px;background: var(--Blue-3);box-shadow: 4px 6px 20px 0 rgba(0, 0, 0, 0.50);text-align: center;}
#imglist-column-container .content-wrap p {color: var(--White);text-align: center;text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.25);font-family: "avenir-lt-pro";font-size: 22px;font-weight: 400;line-height: 140%; }
#imglist-column-container  .content-wrap p b {font-weight: 700;font-size: 32px;} 
#imglist-column-container .azcl-column-par1 .img-wrapper {margin: 0px 66px 0px auto;}
#middle-container .title h3 {background: var(--Blue-1);color: var(--Blue-2);text-align: center;font-family: 'CocogoosePro';font-size: 25px;font-weight: 400;line-height: 35px;padding:14px 20px 11px;margin: 0px;}
#middle-container .cmp-container {position: relative;z-index: 1;}
#middle-container:before, #middle-container:after {content: '';background: url(/content/dam/intelligentcontent/brands/geneticcancerrisk/ca/en/images/genome-anim-v3.gif);background-position: bottom;background-size:calc(100% - .5vw);background-repeat: no-repeat;position: absolute;z-index: 0;bottom: 0;width: 50%;height: 100%;}
#imglist-column-container .azcl-column-par2 .img-wrapper {margin-left: 66px;}
#middle-container:after {right: 0;}
#middle-container .title {position: relative;z-index: 1;}
  
/* Footer */
#footer-container {background: var(--Gray-1);}
#footer-container .top-footer {max-width: 1160px;margin: auto;padding: 35px 0px 22px;}
#footer-container .footer-text {color:var(--White);text-align: center;font-family: "avenir-lt-pro";font-size: 16px;font-weight: 500;line-height: 130%;margin-bottom: 25px;}
#footer-container .footer-logo-wrap {display:  flex;justify-content: space-between;align-items: baseline;margin-bottom: 20px;max-width: 1132px;}
#footer-container .footer-logo-wrap .logo-wrap:nth-child(1) img {margin-bottom: -15px;}
#footer-container .bottom-footer {background: var(--Gray-2);padding: 57px 0px;}
#footer-container .footer-link-wrap {max-width: 1160px;margin: auto;text-align: center;}
#footer-container .footer-link-wrap a {color:var(--White);font-family: "avenir-lt-pro";font-size: 18px;font-weight: 700;line-height: 26px;text-decoration-line: underline;}
#footer-container .footer-link-wrap a + a {padding-left: 10px;margin-left: 10px;border-left: 2px solid transparent;position: relative;}
#footer-container .footer-link-wrap a + a:before {content: '|';position: absolute;top: -2px;left: -3px;}
#footer-container .cmp-text {padding: 0px;}
#footer-container .footer-link-wrap a:nth-child(1) {text-decoration: none;}
#footer-container .footer-text sup {line-height: 100%;}
html[lang="fr"] #footer-container .footer-logo-wrap {max-width: 1140px;}
html[lang="fr"] #middle-container .title h2 .aphestropy-icon {line-height: 0px;position: relative;top: -63px;left: -3px;}
html[lang="fr"] #middle-container .title h3 .aphestropy-icon {line-height: 0px;position: relative;top: -30px;left: -1px;}
 
/* Error pages css start */
#error-middle-container {max-width: 1200px;margin: auto;padding: 100px 20px;min-height: 40vh;}
#error-middle-container h1 {font-size: 70px;line-height: 80px;font-family: "avenir-lt-pro";margin:  0;}
#error-middle-container h2 {font-size: 30px;line-height: 36px;font-family: "avenir-lt-pro";margin: 0 0 60px;}
#error-middle-container .button a {max-width: 370px;padding: 12px 15px 10px;border-radius: 20px;background: #F7E289;box-shadow: 4px 6px 20px 0 rgba(0, 0, 0, 0.50);color: #15365E;font-family: 'CocogoosePro';font-size: 25px;font-weight: 400;line-height: 130%;text-align: center;display: block;}
/* Error pages css ends */
 html[lang="fr"] #error-middle-container .button a{max-width: 430px;}

/* Responsive */
@media (min-width: 1200px){
    html[lang="fr"] #footer-container .footer-link-wrap {max-width: 1300px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(4) img {margin-bottom: -4px;}
}
@media (min-width: 768px) and (max-width: 940px) {
    #middle-container #btn-column-container .cmp-button {min-height: 129px;}
}
@media (min-width: 928px) and (max-width: 964px) { 
    html[lang="fr"] #middle-container #imglist-column-container .content-wrap { min-height: 274px; }
}
@media (min-width: 768px) and (max-width: 928px) {
    html[lang="fr"] #middle-container #btn-column-container .cmp-button { min-height: 152px;}
    html[lang="fr"] #middle-container #imglist-column-container .content-wrap { min-height: 305px; }
}

@media (min-width: 768px) and (max-width: 1199px) { 
    .languague-switcher {padding: 0px 20px 8px;}
    #middle-container #btn-column-container .cmp-button {margin: auto;} 
    #middle-container #imglist-column-container .content-wrap {padding: 28px 10px;}
    #middle-container #imglist-column-container .azcl-column-par1 .img-wrapper {margin: 0px 20px 0px auto;}
    #middle-container #imglist-column-container .azcl-column-par2 .img-wrapper {margin-left: 20px;}
    #footer-container .footer-logo-wrap {gap: 20px;flex-wrap: wrap;}
    #middle-container .title h2 {line-height: 70px;}
}

@media  (max-width: 1199px){
    #middle-container .cmp-text {padding: 0px;}
    #middle-container .title h1, #middle-container .title h2, #middle-container .title h3, #middle-container #btn-column-container, #middle-container #imglist-column-container{max-width: 100%;padding-left: 20px;padding-right: 20px;}
    #footer-container .top-footer, #footer-container .bottom-footer {padding-left: 20px;padding-right: 20px;}
}

@media (max-width: 767px) {   
    #middle-container {padding: 40px 0px 70px;overflow: hidden;}
    #middle-container .title h1 {padding-left:30px;padding-right:30px;font-size: 26px;}
    #middle-container #btn-column-container {margin: 40px auto 51px;padding-left:20px;padding-right:20px;display: flex;flex-direction: column;max-width: 373px;gap: 40px;}
    #middle-container #btn-column-container .cmp-button {font-size: 16px;padding: 8px 22px 7px;border-radius: 13px;}
    #btn-column-container .cmp-button .cmp-button__text span {font-size: 13px;}
    #middle-container .title h2 {padding-left: 30px;padding-right: 30px;font-size: 34px;line-height: 130%;}
    #middle-container #imglist-column-container {padding-left: 30px;padding-right: 30px;margin: 30px auto 60px;display: flex;flex-direction: column;gap: 40px;}
    #imglist-column-container .azcl-column-par1 .img-wrapper, #imglist-column-container .azcl-column-par2 .img-wrapper {max-width: 333px;min-height: 190px;margin: auto;}
    #imglist-column-container .content-wrap {padding: 19px 10px 17px;}
    #middle-container .title h3 {padding: 11px 30px 9px;font-size: 21px;line-height: 130%;}
    #imglist-column-container .content-wrap p {font-size: 14.65px;}
    #imglist-column-container .content-wrap p b {font-size: 21.31px;}
    #footer-container .top-footer {padding: 50px 30px 54px;}
    #footer-container .footer-text {margin-bottom: 40px;font-size: 14px;line-height: 150%;}
    #footer-container .footer-logo-wrap {flex-direction: column;align-items: center;margin-bottom: 0px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(1) img {margin-bottom: 0px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(2) {margin-top: 26px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(3) {margin-top: 47px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(4) {margin-top: 45px;}
    #footer-container .bottom-footer {padding: 50px 30px 38px;}
    #footer-container .footer-link-wrap {display: flex;flex-direction: column;gap: 10px;}
    #footer-container .footer-link-wrap a + a {padding-left: 0px;margin-left: 0px;border-left: 0px solid;}
    #footer-container .footer-link-wrap a{font-size: 14px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(1) img{max-width: 150px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(2) img {max-width: 212px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(3) img {max-width: 232px;}
    #footer-container .footer-logo-wrap .logo-wrap:nth-child(4) img {max-width: 121px;} 
    #middle-container:before{width: 210%;} 
    #middle-container:after, #footer-container .footer-link-wrap a + a:before{display:none;}
    
    html[lang="en"] #middle-container .title h1 {padding-left: 53px;padding-right: 53px;}
    html[lang="fr"] #middle-container .title h2 .aphestropy-icon {top: -38px;left: -2px;}
    html[lang="fr"] #middle-container .title h3 .aphestropy-icon {top: -27px;left: 0px;}
}