/* Global css */
@font-face {
    font-family: 'calibri';
    src: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/fonts/calibri.ttf);
}
@font-face {
    font-family: 'calibri-bold';
    src: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/fonts/calibrib.ttf);
}

body{
    font-family: calibri;font-weight: 400;
}
b {font-family: 'calibri-bold';}
.text-purple{color: #975f92;}
.text-blue{color: #3e5fac;}
.text-orange{color: #f57f3a;}
.text-gray{color: #616161;}
.modal.cmp-modal__modalbox.modal-lg.cmp-modal--defaultStyle.modal--visible{background: rgba(0,0,0,0.6);backdrop-filter: blur(0px);}
a:focus, *:focus, *:focus-visible{outline: auto;}    
    
/*Header*/
div#topNavbar {max-width: 1366px;margin: auto;justify-content: space-between;padding: 25px 30px 15px;}
div#topNavbar:before {content: '';height: 72px;width: 240px;display: block;position: relative;background: #e38448 url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/logo1.png);background-size: contain;background-repeat:no-repeat;}
#topNavbar .cmp-topnavigation__group {margin-top: 25px;}
#topNavbar .cmp-topnavigation__item--level-0 .cmp-topnavigation__link {color: #616161;font-family: calibri;font-size: 25px;position: relative;text-decoration:none;}
#topNavbar .cmp-topnavigation__item {margin: 0px 1.5em !important;}
#topNavbar .cmp-topnavigation__item--level-0 .cmp-topnavigation__link:before {content: '';height: 10px;background: #f57f3a;width: 100%;
display: block;position: absolute;bottom: -30px;left: 0;opacity: 0;}
#topNavbar .cmp-topnavigation__item--level-0 .cmp-topnavigation__link:hover:before{opacity: 1;}
#topNavbar .cmp-topnavigation__item--level-0.cmp-topnavigation__item--index-6 .cmp-topnavigation__link:before{display: none;}
#topNavbar .cmp-topnavigation__item--index-6 {margin: 0px 1.3em 0px 2.3em !important;}
#topNavbar .cmp-topnavigation__item--index-6 .cmp-topnavigation__group {margin-top: 0px;}
#topNavbar .cmp-topnavigation__item--index-6 .cmp-topnavigation__link {font-size: 20px;padding-right: 30px;color: #010101;}
#topNavbar .cmp-topnavigation__item--index-6 .cmp-topnavigation__link .cmp-topnavigation__arrow {display: block;width: 0;height: 0;border-left: 9px solid transparent;border-right: 9px solid transparent;border-top: 14px solid #010101;position: absolute;right: 0px;top: 3px;}
.topnavigation.languagenavigation { display: none;}

#Navbar {padding: 0px;}
#Navbar .navbar-container {display: flex;max-width: 1366px;margin: auto;justify-content: space-between;padding: 25px 30px 0px;} 
#Navbar .navbar-header {max-width: 250px;}
#Navbar .navbar-header .dropdown-mob, #Navbar .navbar-header .hamburgan{display: none;}
#Navbar ul.nav.navbar-nav {max-width: calc(100% - 260px);display: flex;gap: 45px;align-items: flex-end;margin-top: 33px;}
#Navbar ul.nav.navbar-nav a {color: #616161;font-family: calibri;font-size: 18px;position: relative;text-decoration: none;}
#Navbar ul.nav.navbar-nav li {padding: 0 0 20px 0;border-bottom: 10px solid transparent;}
#Navbar ul.nav.navbar-nav li.active {border-color: #ffbd1a;}
#Navbar ul.nav.navbar-nav li:last-child {position: relative;}
#Navbar ul.nav.navbar-nav li:last-child a {font-size: 18px;padding-right: 40px;padding-left: 20px;color: #010101;position: relative;text-transform: capitalize;}
#Navbar ul.nav.navbar-nav li ul.dropdown-menu {display: none;position: absolute;background: #fff;padding: 10px;box-shadow: 2px 2px 5px #ccc;z-index: 1;bottom: -30px;left: -8px;} 
/*#Navbar ul.nav.navbar-nav li:last-child.active .dropdown-menu, */
#Navbar ul.nav.navbar-nav li:last-child .dropdown-menu.show {display: block;}
#Navbar ul.nav.navbar-nav li ul.dropdown-menu li.dropdown-header {padding: 0px;border: 0px;}
#Navbar ul.nav.navbar-nav li:last-child a.lang:before {content: '';border-left: 9px solid transparent;border-right: 9px solid transparent;border-top: 14px solid #010101;position: absolute;right: 10px;top: 8px;}
#Navbar ul.nav.navbar-nav li:last-child.active{border-color: transparent;}

div#carousel-1, div#carousel-2 {padding: 0;margin-bottom: 25px;}
.owl-carousel {max-width: 1366px;margin: 0 auto;}
.owl-carousel.owl-theme .owl-controls .owl-page.active {padding-bottom: 0px;border-width: 0px;} 
#carousel-1 .owl-carousel.owl-theme .owl-controls {margin-top: -51px;}  

div#header-banner {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/carsole-banner.jpg);background-size: cover;background-position: bottom;}
div#header-banner p.banner-heading {font-family: 'calibri-bold';font-size: 60px;line-height: 54px;color: #3e5fac;padding: 40px 15px 20vw;max-width: 1100px;margin: auto;text-align: center;}

/* section 1 */ 
.owl-carousel-1 .carsole-content-wrap {padding: 40px 15px 255px;max-width: 1100px;margin: auto;text-align: center;} 
/*.owl-carousel-1 .owl-item {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/carsole-banner.jpg);background-size: cover;background-position: bottom;}*/
.owl-carousel-1 .owl-item {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/carsole-banner.png);background-size: cover;background-position: bottom;}
.owl-carousel-1 .banner-carsol-heading{font-family: 'calibri-bold';font-size: 60px;line-height: 54px;text-transform: uppercase;color: #3e5fac;} 
.owl-carousel-1 .banner-carsol-subheading {font-family: 'calibri';font-size: 25px;line-height: 28px;color: #626162;max-width: 900px;margin: 14px auto 20px;display: none;} 
.owl-carousel-1 a.banner-carsol-btn {font-family: 'calibri';font-size: 21px;line-height: 1.2;color: #000;background: #ffbd1a;cursor: pointer;display: block;padding: 8px 12px;max-width: 160px;margin: 25px auto 2vw;border-radius: 7px;border-bottom: 4px solid #f57f3a;text-decoration: none !important;} 
.owl-carousel-1.owl-theme .owl-controls .owl-page span {background: #fff;opacity: .8;width: 18px;height: 18px;}
.owl-carousel-1.owl-theme .owl-controls .owl-page.active span, 
.owl-carousel-1.owl-theme .owl-controls .owl-page:hover span {opacity: 0.99;}
.owl-carousel-1.owl-theme .owl-controls .owl-pagination {width: 100px;margin: 0 auto 0 calc(50% - 48px);}
#carousel-1 .owl-carousel {max-width: 100%; }

/* section 2 */
#carousel-2 .carousel-2-content-wrap {max-width: 1230px;margin: auto;padding: 35px 0px 20px;min-height: 360px;}
.carousel-2-title {font-family: 'calibri-bold';font-size: 28px;line-height: 30px;margin-bottom: 10px;}
.carousel-2-text {font-family: 'calibri';font-size: 24.5px;line-height: 30px;}
ul.carousel-2-ul li {font-size: 24.7px;font-family: 'calibri';line-height: 25px;position: relative;padding-left: 30px;margin-bottom: 5px;}
ul.carousel-2-ul li:before {content: '';position: absolute;left: 3px;top: 13px;height: 7px;width: 7px;display: block;background: #000;
border-radius: 100%;}
#carousel-2 .owl-theme .owl-controls .owl-page.active span, #carousel-2 .owl-theme .owl-controls.clickable .owl-page:hover span, 
.cmp-modal--defaultStyle.modal .owl-theme .owl-controls .owl-page.active span, .cmp-modal--defaultStyle.modal .owl-theme .owl-controls .owl-page:hover span, #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page.active span, #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page:hover span{background: #f57f3a;}
#carousel-2 .owl-theme .owl-controls .owl-page span, .cmp-modal--defaultStyle.modal .owl-theme .owl-controls .owl-page span, #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page span {width: 120px;height: 5px;opacity: 1;border-radius: 0px;background: #ffbd1a;}
.cmp-modal--defaultStyle.modal .owl-theme .owl-controls .owl-page span, #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page span {background: #616162;}



/* Pilot popup */
#pilot-popup-carousel-1.owl-carousel, #pilot-popup-carousel-2.owl-carousel, #pilot-popup-carousel-3.owl-carousel {max-width: 1000px;}
.pilot-popup-content-wrap {display: flex;gap: 20px;}
.pilot-popup-content-wrap .image-wrap{width: 36%;}
.pilot-popup-content-wrap .pilot-popup-content{width: calc(64% - 40px);}
.pilot-popup-content-wrap .carousel-2-text {font-size: 28px;line-height: 38px;margin-top: 20px;}
.pilot-popup-content-wrap .carousel-2-text span {display: block;margin-bottom: 5px;} 
.modal.cmp-modal__modalbox.modal-lg .modal-box {width: 100%;max-width: 1050px;border: 5px solid #C7C7C9;border-radius: 15px;}
.modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close{background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/other/close-icon.png);
background-size: 100%;top: 1rem;right: 1rem;}
.modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close .modal__closeIcon{opacity: 0;}
.modal.cmp-modal__modalbox.modal-lg .modal-box .modal-box__content {padding: 1rem 1.5rem;}
.modal.cmp-modal__modalbox.modal-lg .modal-box h2#modalTitle {display: none;}


/* Pilot section */
#pilot-pop-up-main {background: #F1F2F2;padding: 40px 0px 70px;position: relative;overflow: hidden;}  
#pilot-pop-up-main  h4.cmp-title__text.cmp-title__text--h4 {font-family: 'calibri-bold';font-size: 28.5px;line-height: 28px;text-align: center;max-width: 1200px;margin: 0px auto 45px;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 {max-width: 1230px;margin: 0 auto 40px;padding: 0px 0px;gap: 17px;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div {background: red;padding: 20px;border-radius: 10px 10px 0 0;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .image {background: #fff;padding: 14px 25px;border-radius: 10px 10px;text-align: center;}
#pilot-pop-up-main .cmp-image__image {max-height: 80px;max-width: 100%;width: auto;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text {text-align: center;color: #fff;font-family: 'calibri';font-size: 24px;
line-height: 26px;padding:0 0 5px; }
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div h5 {font-family: 'calibri-bold';font-size: 26px;line-height: 32px;margin: 20px 0px 5px;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div.azcl-column-par1 {background: #F5803B;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div.azcl-column-par2 {background: #A35D95;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div.azcl-column-par3 {background: #3D5FAC;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text a.plus-circle {width: 40px;height: 40px;background: #fff;display: block;text-align: center;
line-height: 40px;margin: 50px 0 0 auto;border-radius: 100%;text-decoration: none !important;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text a.plus-circle .cmp-accordion__icon {padding: 0 6px;text-align: center;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div.azcl-column-par1 a.plus-circle {color: #f5803b;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div.azcl-column-par3 a.plus-circle {color: #3d5fac;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div.azcl-column-par2 a.plus-circle {color: #a35d95;}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text a.plus-circle .cmp-accordion__icon::before {font-size: 34px;line-height: 44px;}  
div#pilot-pop-up-main:before, div#pilot-pop-up-main:after, .why-section-wrapper:before, .why-section-wrapper:after, .resources-block:before{
content: '';top: 0;height: 10px;width: 1200px;position: absolute;display: block;left: calc(50% - 600px);
background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/other/box-shadow.png);background-size: contain;background-repeat: no-repeat;}
div#pilot-pop-up-main:after, .why-section-wrapper:after {top: 100%;}
div#pilot-pop-up-graph-wrap {max-width: 1230px;margin: auto;padding: 0px 0px;}
.pilot-pop-up-graph-wrap .pilot-graph-title {grid-area: block-title;font-family: 'calibri-bold';font-size: 34px;line-height: 34px;text-align: center;margin-bottom: 20px;}
.pilot-pop-up-graph-wrap .pilot-graph-wrap {grid-area: pilot-graph;max-width: 252px;}
.pilot-pop-up-graph-wrap .purple-text {background: #a35d95;}
.pilot-pop-up-graph-wrap .orange-text {background: #f5803b;}
.pilot-pop-up-graph-wrap .blue-text {background: #3d5fac;}
.pilot-pop-up-graph-wrap .org-1 {grid-area: org-1;text-align: center;}
.pilot-pop-up-graph-wrap .org-2 {grid-area: org-2;}
.pilot-pop-up-graph-wrap .purp-1 {grid-area: purp-1;text-align: center;}
.pilot-pop-up-graph-wrap .purp-2 {grid-area: purp-2;}
.pilot-pop-up-graph-wrap .blue-1 {grid-area: blue-1;text-align: center;}
.pilot-pop-up-graph-wrap .blue-2 {grid-area: blue-2;}
.pilot-pop-up-graph-wrap .block-text {font-family: 'calibri';font-size: 30px;line-height: 26px;color: #fff;padding: 13px;}
.pilot-pop-up-graph-wrap {background: #fff;padding: 20px 40px 40px;border-radius:  0 0 10px 10px;display: grid;gap: 10px;
grid-template-areas: 'block-title block-title block-title block-title'
        'pilot-graph org-1 org-2 org-2'
        'pilot-graph purp-1 purp-2 purp-2'
        'pilot-graph blue-1 blue-2 blue-2';
}
#pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div p span {display: block;}
#home sup {font-size: 60%;position: relative;top: 2px;}
#home sup a {color: #3C4242;}

/* Why section */
.why-section-wrapper {max-width: 1230px;margin: auto;padding: 40px 55px 25px 45px;min-height: 680px;display: flex;flex-wrap: wrap;gap: 39.5%;background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/other/why-diagram.png);background-size: 1200px;background-repeat: no-repeat;background-position: 10px 40px;}
.why-section-wrapper .why-block-wrap {width: 30.2%;padding: 15px;margin-top: 1.2%;position: relative;}
.why-section-wrapper .why-block-wrap:nth-child(3), .why-section-wrapper .why-block-wrap:nth-child(4) {margin-top: 7.9%;}
.why-section-wrapper .why-block-title{font-family: 'calibri-bold';font-size: 19px;line-height: 22px;margin: 0 0 16px;}
.why-section-wrapper .why-block-text{font-family: 'calibri';font-size: 15px;line-height: 19px;margin: 0 0 35px 0;color: #000;}
.why-section-wrapper .why-block-wrap:nth-child(even){text-align: right;padding: 15px 10px 15px 8px;} 
.why-section-wrapper .plus-circle{text-decoration: none !important;position: absolute;bottom: 20px;background: #616161;border-radius: 100%;}  
.why-section-wrapper .plus-circle .cmp-accordion__icon{padding: 0px;color: #fff;width: 20px;height: 20px;display: block;
text-align: center;line-height: 21px;font-size: 16px;text-decoration: none !important; padding-left: 3.5px;}
.why-section-wrapper .why-block-wrap.gray-block .why-block-title{padding-right: 5px;} 
.why-section-wrapper .why-block-wrap.gray-block .plus-circle{right: 60px;} 
.why-section-wrapper .why-block-wrap.orange-block .plus-circle{left: 60px;background: #f57f3a;} 
.why-section-wrapper .why-block-wrap.purple-block .plus-circle{background: #a35d95;bottom: 45px;right: 0px;}
.why-section-wrapper .why-block-wrap.blue-block .plus-circle{background: #3e5fac;bottom: 45px;left: -7px;}
.why-section-wrapper  .why-block-title.text-blue{max-width: 85%;margin: 0 0 16px auto;}
.why-section-wrapper .why-block-wrap:nth-child(3){padding: 15px 19px 15px 8px;} 
html[lang="fr"] .why-section-wrapper {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/fr/images/why-diagram.png);background-size: 1200px;background-repeat: no-repeat;background-position: 10px 40px;}
  
.popup-content-wrap{padding: 30px 30px 30px;}
.popup-content-wrap p {font-family: 'calibri';font-size: 23px;line-height: 34px;margin-bottom: 5px;color: #3c4242;text-align: left;}
.popup-content-wrap ul.carousel-2-ul li {line-height: 34px;}
.popup-content-wrap ul.carousel-2-ul .carousel-2-ul {margin-left: -7px;}
.popup-content-wrap ul.carousel-2-ul .carousel-2-ul li {padding-left: 36px;}
.popup-content-wrap ul.carousel-2-ul .carousel-2-ul li::before {top: 15px;} 


/*Accordion section */
.acc-heading {font-size: 28px;text-align: center;margin: 40px auto 20px;}
#WIYJ-accordion {max-width: 1230px;margin: auto;padding: 10px 5px 25px;}
#WIYJ-accordion h3.cmp-accordion__header .cmp-accordion__title {color: #fff;font-family: 'calibri-bold';font-size: 28.5px;line-height: 28px;display: block;}
/*#WIYJ-accordion h3.cmp-accordion__header {background: #3e5fac;}*/
.acc-heading a.link, #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li a {color: #3D5FAC;}
#WIYJ-accordion h3.cmp-accordion__header  .cmp-accordion__icon {background: #fff;color: #3e5fac;width: 32px;height: 32px;text-align: center;line-height: 32px;border-radius: 100%;font-size: 24px;padding: 0px 4px;display: block;box-shadow: 1px 1px 1px rgb(0 0 0 / 50%);}
#WIYJ-accordion .cmp-accordion__item {margin-block: 10px;}
#WIYJ-accordion .cmp-accordion__button{padding: 12px 35px 12px 25px;background: #3e5fac;background: linear-gradient(90deg, #3d61ad, #447ebe);}
#WIYJ-accordion .cmp-accordion__panel{padding: 13px 25px 5px;font-size: 22px;line-height: 30px;font-family: 'calibri';background: #FAF7F7;}
#WIYJ-accordion .cmp-accordion__button.cmp-accordion__button--expanded {background: #f57f3a;}
#WIYJ-accordion .cmp-accordion__button.cmp-accordion__button--expanded .cmp-accordion__icon{color: #f57f3a;}
#WIYJ-accordion .cmp-accordion__panel ul.acc-ul {font-family: 'calibri';margin-bottom: 25px;}
#WIYJ-accordion .acc-blk-title {font-family: 'calibri-bold';margin-bottom: 5px;line-height: 26px;}
#WIYJ-accordion .cmp-accordion__panel ul.acc-ul li {position: relative;padding-left: 30px;}
#WIYJ-accordion .cmp-accordion__panel ul.acc-ul li:before{content: '';position: absolute;left: 1px;top: 13px;height: 6px;width: 6px;
display: block;background: #000;border-radius: 100%;}
#WIYJ-accordion .acc-blk-subtitle {font-family: 'calibri';font-size: 23px;line-height: 28px;margin-bottom: 10px;}
#WIYJ-accordion table {font-family: 'calibri';font-size: 19px;line-height: 26px;margin: 15px 0px 25px;}
#WIYJ-accordion table thead th {background: #3e5fac;text-align: center;color: #fff;padding: 7px;font-family: 'calibri-bold';}
#WIYJ-accordion table thead tr th:nth-child(1) {width: 110px;border-right: 1px solid #D1D4D4;}
#WIYJ-accordion table tbody tr td:nth-child(1) {text-align: center;border-right: 1px solid #D1D4D4;padding: 0px;} 
#WIYJ-accordion .cmp-accordion__panel table ul.acc-ul {margin-bottom: 0px;}
#WIYJ-accordion .cmp-accordion__panel table ul.acc-ul li:before{top: 10px;}
#WIYJ-accordion table tr {border: 1px solid #D1D4D4;}
#WIYJ-accordion table td {padding: 10px 40px;}
#WIYJ-accordion .cmp-accordion__panel ul.acc-ul:last-child {margin-bottom: 15px;}


/* Resource & reference section */
div#resource-reference {padding: 0px;}
.resources-block {text-align: center;max-width: 1230px;margin: auto;padding: 35px 0px 20px;}
#resource-reference .blue-title {font-family: 'calibri-bold';font-size: 36px;color: #3D5FAC;margin: 0px auto 30px;    text-transform: uppercase;}
.resources-block .resource-reference-title {font-family: 'calibri-bold';font-size: 27px;line-height: 32px;}
.resources-block .resource-reference-link {font-family: 'calibri';font-size: 27px;color: #3D5FAC;line-height: 32px;margin-bottom: 40px;display: block;text-decoration: none;}

#resource-reference .reference-block .blue-title {margin: 0px auto 15px;}
.reference-wrap {background: #F1F2F2;}
.reference-block {max-width: 1230px;margin: auto;padding: 30px 0px;}
.reference-block .reference-text {font-family: 'calibri';font-size: 19.2px;line-height: 20px;color: #000;word-break: ;}
.reference-block .reference-text a {color: #000;text-decoration: underline;}

/* Terms of use */
#terms-of-use {text-align: center;max-width: 1130px;margin: auto;padding: 35px 0px 20px;}
#terms-of-use .tou-title {text-align: left;font-family: 'calibri';font-size: 24px;line-height: 28px;margin: 0 0 15px;}
#terms-of-use .tou-info {text-align: left;font-family: 'calibri';font-size: 19.2px;line-height: 22px;margin: 0 0 30px;}
#terms-of-use ul.tou-list {text-align: left;font-family: 'calibri';font-size: 19.2px;line-height: 22px;margin: -15px 0 15px;padding-left: 20px;}
#terms-of-use ul.tou-list li {list-style: decimal;margin-bottom: 5px;}

/* Footer */
.footer.aem-GridColumn.aem-GridColumn--default--12 {display: none;}
#footer-main {background: #3D5FAC;padding: 35px 0px 25px;/*padding: 25px 0px;*/} 
.footer-wrap {display: flex;flex-wrap: wrap;font-family: 'calibri';font-size: 14px;color: #fff;max-width: 1366px;margin: auto;padding: 0px 33px;display: none;} 
.footer-wrap .foot-col {width: 16.7%;} 
.footer-wrap .foot-list li a {color: #fff;line-height: 25px;display: block;}
.footer-wrap .foot-col.col-1 {width: 33%;}
.footer-wrap .foot-col.col-1 img {max-width: 210px;margin-bottom: 10px;}
.footer-wrap .foot-col.col-1 p {max-width: 267px;line-height: 17px;}
.footer-wrap .foot-list.follows-us-list {display: flex;gap: 0px 8px;}
.footer-wrap .foot-list.follows-us-list li {max-width: 30px;}
.footer-wrap .foot-col-title {font-family: 'calibri-bold';font-size: 33px;margin: 0px 0px 15px;}
.footer-wrap .foot-col.col-3 {width: 21%;border-left: 2px solid;border-right: 2px solid;padding: 0 3%;}
.footer-wrap .foot-col.col-4 {width: 28%;padding-left: 40px;}
.footer-wrap .foot-list.follows-us-list a.foot-link {line-height: 20px;padding: 0;margin: 0px;}
.footer-wrap .foot-list + h4.foot-col-title {margin: 15px 0px 10px;}
#footer-main .last-line {color: #fff;text-align: center;font-family: 'calibri';font-size: 16px;line-height: 20px;margin: 10px auto 0;max-width: 800px;/*line-height: 24px;margin-top: 25px;font-weight: 600;*/}
#footer-main .footerLinks {display: flex;max-width: max-content;gap: 12px;align-items: center;margin: auto;}
#footer-main .footerLinks a {color: #fff;font-family: 'calibri';font-size: 16px;line-height: 14px;}
#footer-main .footerLinks a + a {padding-left: 12px;border-left: 1px solid #fff;}
#footer-main .footerLogoWrap {max-width: 600px;display: flex;align-items: center;justify-content: space-between;margin: 15px auto 30px;display: none; /*max-width: 574px;*/}
#footer-main .footerLogoWrap img {max-width: 185px;}
/*#footer-main .footerLogoWrap img + img {max-width: 200px;}*/
#footer-main .footerLogoWrap .merck-logo {max-height: 45px;}
#footer-main .footerLogoWrap .merck-logo + img {max-width: 200px;}

#pilot-pop-up-main .popup-wrapper {display: none;position: fixed;width: 100%;height: 100vh;left: 0;top: 0;background: rgba(0,0,0,0.6);z-index: 1;}
#pilot-pop-up-main .popup-wrapper.show {display: block;}
#pilot-pop-up-main .popup-wrapper .popup-content-wrap{background: #fff;width: 100%;max-width: 1050px;border: 5px solid #C7C7C9;border-radius: 15px;margin: 5vw auto 0;position: relative;}
#pilot-pop-up-main .popup-wrapper button.modal__close.close {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/other/close-icon.png);background-size: 100%;position: absolute;top: 15px;right: 15px;width: 2rem;height: 2rem;background-color: transparent;cursor: pointer;z-index: 9;}

/* Exit ramp modal */
.exit-ramp-modal {position: fixed;top: 0;left: 0;background: rgb(0 0 0 / 50%);width: 100%;height: 100%;}
.exit-ramp-modal .modal-box {background: #fff;max-width: 600px;margin: auto;padding: 2rem;border-radius: 10px;}
.exit-ramp-modal .modal__close {position: relative;left: calc(50% + 260px);top: 40px;padding: 9px;width: 30px;height: 30px;border-radius: 100%;z-index: 9;background: #ffbd1a;cursor: pointer;}
.exit-ramp-modal .modal__close .modal__closeLabel {display: none;}
.exit-ramp-modal .modal__close .modal__closeIcon {width: 12px;display: block; margin: auto;}
.exit-ramp-modal .exit-ramp-title {font-family: 'calibri-bold';font-size: 18px;color: #3D5FAC;margin-bottom: 15px;}
.exit-ramp-modal .exit-ramp-continue, .exit-ramp-modal .exit-ramp-cancel {text-align: center;color: #000;background: #ffbd1a;display: block;padding: 8px 12px;width: 120px;border-radius: 7px;border-bottom: 4px solid #f57f3a;text-decoration: none !important;cursor: pointer; }
.exit-ramp-modal .exit-ramp-actions {display: flex;justify-content: center;gap: 20px;margin-top: 25px;}

/* Login page */
#login #footer-main .footer-inner-wrap {display: flex;max-width: 1190px;margin: auto;gap: 100px;align-items: center;padding: 0px 30px;}
#login #footer-main .footer-inner-wrap .footerLogo {max-width: 200px;}
#login #footer-main .footer-inner-wrap .footerLogo img {margin-bottom: 20px;}
#login #footer-main .footer-inner-wrap .footerLinks {margin: 0;gap: 6px;}
#login #footer-main .footer-inner-wrap .footerLinks a {text-transform: uppercase;}
#login #footer-main .footer-inner-wrap .footerLinks a + a {padding-left: 6px;}

#login #Navbar .navbar-container {max-width: 1200px;}
#login #Navbar ul.nav.navbar-nav li {visibility: hidden;}
#login #Navbar ul.nav.navbar-nav li:last-child {visibility: visible;}
#login #login-form-wrap {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/login-banner.jpg);background-size: cover;padding: 50px 0 150px;text-align: center;}
#login select#province {width: 100%;height: 38px;padding: 10px 15px;color: #3C4242;font-family: 'calibri';font-size: 16px;padding-right: 150px;direction: rtl;border: 0px;-webkit-appearance: none; z-index: 9;margin: initial;position: relative;background: transparent;}
#login h1 {font-family: 'calibri';font-size: 56px;line-height: 58px;max-width: 930px;margin: 15px auto ;letter-spacing: .5px;color: #3e5fac;}
#login h1 span {display: block;}
#login .gating-subtext p {font-family: 'calibri';font-size: 24px;line-height: 24px;max-width: 860px;margin: 0px auto 50px;color: #454545;}
#login .gating-subtext + p {position: relative;max-width: 340px;margin: auto 0 -45px calc(50% - 355px);width: 100%;background: #fff;}
#login .gating-subtext + p:before{content: '';position: absolute;height: 38px;width: 36px;top: 0;right: 0;background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/down-arrow.png);background-size: contain;}
#login .cmp-selfcertification.cmp-selfcertification--inpage {padding: 0px 20px;max-width: 1367px;margin: auto;}
#login .cmp-selfcertification .modal-box {background: none;max-width: 720px;margin: auto;}
#login label.control-label {display: none;}
#login input#self-certification-text-field {height: 38px;width: 100%;max-width: 345px;font-family: 'calibri';font-size: 16px;text-align: center;border: 0;color: #3C4242;padding: 10px 20px;margin: 0px 0px 40px 0;float: right; border-left: 3px solid #ccc;border-bottom: 3px solid #ccc;}
#login .cmp-selfcertification #textField-error.text-danger, 
#login .cmp-selfcertification #textField-error-invalid.text-danger {position: absolute;right: 0;top:38px;color: red;max-width: 343px;text-align: left;width: 100%;}
#login .cmp-selfcertification.cmp-selfcertification--inpage .cmp-selfcertification__continue {font-family: 'calibri';font-size: 18px;line-height: 18px;color: #000;background: #ffbd1a;cursor: pointer;display: block;padding: 10px 12px;max-width: 160px;margin: 0px auto 0 calc(50% - 80px);border-radius: 7px;border-bottom: 4px solid #f57f3a;text-decoration: none !important;text-transform: uppercase;}
#login select#province option[disabled="true"] {background: #fcaf17;color: #fff;padding: 10px;}
#login select#province option[disabled="true"]:nth-child(1) {background: #aaa;}
 
.top-black-banner {background: #000;text-align: center; padding: 10px 15px;}
.top-black-banner p, .top-black-banner a {font-family: calibri;font-size: 16px;color: #fff;line-height: 1.2; }  
.top-black-banner a { text-decoration: underline;} 

 
/* medium screen */
@media(min-width: 1200px) {
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul { padding-right: 15px;}
    html[lang="fr"] .why-section-wrapper .why-block-title{font-size: 18px;line-height: 20px;margin: 0 0 12px;text-transform: uppercase}
    html[lang="fr"] .why-section-wrapper .why-block-text{font-size: 15px;line-height: 17px;}
    html[lang="fr"] .why-section-wrapper .plus-circle {bottom: 10px;}
    html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(3), html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(4) {margin-top: 7.1%;}
    html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(3) .why-block-text, html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(4) .why-block-text {margin: 0 0 20px 0;}
    html[lang="fr"] .why-section-wrapper .why-block-title.text-blue {margin: 0 0 12px auto;}
    html[lang="fr"] .why-section-wrapper .why-block-title.text-purple{padding-right: 5px;}
    html[lang="fr"] #header-banner p.banner-heading{font-size: 52px;}
    html[lang="fr"] .why-section-wrapper .why-block-wrap.purple-block .plus-circle,
    html[lang="fr"] .why-section-wrapper .why-block-wrap.blue-block .plus-circle{bottom: 40px;}
    html[lang="fr"]  #Navbar ul.nav.navbar-nav a, html[lang="fr"]  #Navbar ul.nav.navbar-nav li:last-child a {font-size: 15px;}    
    html[lang="fr"]  #Navbar ul.nav.navbar-nav {gap: 11px;}
    html[lang="fr"] #Navbar ul.nav.navbar-nav li:last-child a.lang:before {border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 12px solid #010101;right: 14px;top: 6px;}
}
@media(min-width: 1370px) {
    html[lang="fr"] #Navbar ul.nav.navbar-nav {gap: 20px;}
    html[lang="fr"] #Navbar ul.nav.navbar-nav a, html[lang="fr"] #Navbar ul.nav.navbar-nav li:last-child a {font-size: 17px;}
    html[lang="fr"] #Navbar ul.nav.navbar-nav li:last-child a.lang:before { right: 14px;top: 6px;}
}

@media (max-width: 1199px) and (min-width: 992px) {
    #Navbar .navbar-header {max-width: 150px;}
    #Navbar .navbar-container {max-width: 100%;}    
    #Navbar ul.nav.navbar-nav {max-width: calc(100% - 170px);gap: 20px;margin-top: 15px;    }    
    #Navbar ul.nav.navbar-nav a {font-size: 16px;}    
    #Navbar ul.nav.navbar-nav li:last-child a {font-size: 16px;}    
    div#pilot-pop-up-main:before, div#pilot-pop-up-main:after, .why-section-wrapper:before, .why-section-wrapper:after, .resources-block:before {width: 100%;left: 0;} 
    #carousel-2 .carousel-2-content-wrap {padding: 35px 30px 1px;}
    #pilot-pop-up-main {padding: 40px 30px 50px;}
    .acc-heading {padding:  0px 30px;}
    #WIYJ-accordion {padding: 10px 30px 25px;}
    .resources-block {padding: 35px 25px 20px;}
    .reference-block {padding: 30px 35px;}

    /* Why section */
    .why-section-wrapper {max-width: 992px;padding: 40px 30px 25px 30px;min-height: 580px;gap: 36%;background-size: 972px;background-repeat: no-repeat;background-position: 10px 40px;} 
    .why-section-wrapper .why-block-wrap {width: 32%;padding: 10px 15px 10px 10px;}
    .why-section-wrapper .why-block-title{ font-size: 17px;line-height: 17px;margin: 0 0 10px;}
    .why-section-wrapper .why-block-wrap.gray-block .why-block-title{padding-right: 0px;} 
    .why-section-wrapper .why-block-text{font-size: 14px;line-height: 15px;margin: 0 0 15px 0;}  
    .why-section-wrapper .plus-circle{ bottom: 5px; }  
    .why-section-wrapper .why-block-wrap:nth-child(even) { padding: 10px 10px 15px 8px; } 
    .why-section-wrapper .why-block-wrap:nth-child(3) {padding: 10px 19px 15px 10px;}
    .why-section-wrapper .why-block-wrap:nth-child(3), .why-section-wrapper .why-block-wrap:nth-child(4) {margin-top: 70px;} 
    .why-section-wrapper .why-block-wrap.purple-block .plus-circle{bottom: 30px;} 
    .why-section-wrapper .why-block-wrap.blue-block .plus-circle {bottom: 30px;left: 0;} 
    #terms-of-use { padding: 35px 20px 20px;}
    
    html[lang="fr"] #Navbar ul.nav.navbar-nav a, html[lang="fr"] #Navbar ul.nav.navbar-nav li:last-child a {font-size: 13px;}   
    html[lang="fr"] #Navbar ul.nav.navbar-nav {gap: 8px;}
    html[lang="fr"] #Navbar ul.nav.navbar-nav li:last-child a.lang:before {border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 10px solid #010101;right: 15px;top: 3px;}
    html[lang="fr"] .why-section-wrapper .why-block-text {font-size: 13px;line-height: 14px;}
    html[lang="fr"] .why-section-wrapper .why-block-title {font-size: 15px;line-height: 15px;} 
    html[lang="fr"] .why-section-wrapper {background-size: 972px;background-repeat: no-repeat;background-position: 10px 40px;}
}

/* iPad screen */
@media (max-width: 991px) and (min-width: 768px) {
    #Navbar .navbar-container{flex-direction:column;padding:0;box-shadow:0 4px 20px #000;position:relative;z-index:1}
    #Navbar ul.nav.navbar-nav{max-width:100%;flex-direction:column;gap:0;position:relative;left:0;margin-top:0;display:none;border-top:1px solid #f57f3a}
    #Navbar ul.nav.navbar-nav li{padding:10px;margin:0;width:100%;border:0;text-align:center}
    #Navbar ul.nav.navbar-nav li:last-child,ul.dropdown-menu{display:none}
    #Navbar .navbar-header{max-width:100%;padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center}
    #Navbar ul.nav.navbar-nav li.active{background:#F57F3A}
    #Navbar ul.nav.navbar-nav li.active a{color:#fff;display:block}
    #Navbar ul.nav.navbar-nav li + li{border-top:1px solid #C7C8CA}
    #Navbar ul.nav.navbar-nav a{font-size:16px}
    #Navbar .navbar-header .dropdown-mob{display:block;width:calc(100% - 160px);text-align:right;position:relative}
    #Navbar a.navbar-brand{max-width:157px}
    #Navbar .navbar-header .hamburgan{display:block;margin-left:10px}
    #Navbar .line{background:#939598;height:3px;width:24px}
    #Navbar .line.line-2{margin:5px 0}
    #Navbar .navbar-header .dropdown-mob a.lang{color:#000;font-size:12px;line-height:1.2;position:relative;padding-right:25px}
    #Navbar .navbar-header .dropdown-mob a.lang:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #010101;position:absolute;right:8px;top:2px;text-decoration:none!important}
    #Navbar .dropdown-mob .dropdown-menu{display:none;position:absolute;right:0;top:25px;background:#fff;padding:10px;box-shadow:0 2px 4px -1px #000}
    #Navbar .dropdown-mob .dropdown-menu.show{display:block}
    #Navbar .dropdown-mob .dropdown-menu a{color:#000;font-size:12px}
    div#header-banner p.banner-heading{font-size:44px;line-height:38px}
    .owl-carousel-1 .banner-carsol-heading{font-size:32px;line-height:36px}
    .owl-carousel-1 .carsole-content-wrap{padding:40px 30px 40vw}
    .owl-carousel-1 .banner-carsol-subheading,.owl-carousel-1 a.banner-carsol-btn,#WIYJ-accordion .acc-blk-title{font-size:16px;line-height:1.12}
    .carousel-2-title,.carousel-2-text,ul.carousel-2-ul li{font-size:16px;line-height:1.14}
    #carousel-2 .owl-theme .owl-controls .owl-page span,.cmp-modal--defaultStyle.modal .owl-theme .owl-controls .owl-page span,#pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page span{width:40px;height:4px;margin:0 2px}
    ul.carousel-2-ul li:before{top:8px;height:4px;width:4px}
    ul.carousel-2-ul li{padding-left:16px}
    #carousel-2 .carousel-2-content-wrap{padding:35px 30px 1px;min-height: auto;}
    div#pilot-pop-up-main:before,div#pilot-pop-up-main:after,.why-section-wrapper:before,.why-section-wrapper:after,.resources-block:before{width:100%;left:0}
    #pilot-pop-up-main{padding:40px 30px 50px}
    #pilot-pop-up-main h4.cmp-title__text.cmp-title__text--h4{font-size:16px;line-height:1.2;margin:0 auto 31px}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div h5,.pilot-popup-content-wrap .carousel-2-text{font-size:20px;line-height:1.2}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text,.popup-content-wrap p,.popup-content-wrap ul.carousel-2-ul li,.resources-block .resource-reference-title,.resources-block .resource-reference-link,.reference-block .reference-text{font-size:16px;line-height:1.2}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div{padding:15px;border-radius:10px 10px}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text a.plus-circle{margin:30px 0 0 auto}
    .pilot-pop-up-graph-wrap .pilot-graph-title{font-size:16px;line-height:1.2;margin-bottom:10px}
    .pilot-pop-up-graph-wrap .block-text{font-size:16px;line-height:1.2;padding:8px}
    .pilot-pop-up-graph-wrap .pilot-graph-title,.pilot-pop-up-graph-wrap .pilot-graph-wrap{width:100%}
    .pilot-pop-up-graph-wrap .block-text.org-2,.pilot-pop-up-graph-wrap .block-text.purp-2,.pilot-pop-up-graph-wrap .block-text.blue-2{padding:8px 11px 8px 8px}
    .pilot-pop-up-graph-wrap .pilot-graph-wrap{margin-bottom:10px}
    .pilot-popup-content-wrap{flex-direction:column}
    .pilot-popup-content-wrap .image-wrap,.pilot-popup-content-wrap .pilot-popup-content{width:auto}
    .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close{width:2rem!important;height:2rem!important;left:auto}
    .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close .modal__closeLabel,div#topNavbar{display:none}
    .modal.cmp-modal__modalbox.modal-lg .modal-box{max-width:calc(100% - 60px);margin:auto}
    /* .popup-content-wrap{padding:30px 0 0;max-height:110vw;overflow-y:auto}
    #pilot-pop-up-main .popup-wrapper .popup-content-wrap{max-width:calc(100% - 60px);margin:5vw auto auto;padding:2.5rem 30px 0} */
    #pilot-pop-up-main .popup-wrapper button.modal__close.close{width: 20px;height: 21px;background-repeat: no-repeat;}
    #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page{margin:30px 0}
    .acc-heading{font-size:16px;line-height:1.2;padding:0 30px}
    #WIYJ-accordion{padding:10px 30px 25px}
    #WIYJ-accordion h3.cmp-accordion__header .cmp-accordion__title{font-size:16px;line-height:1.2;max-width:75%}
    #WIYJ-accordion .cmp-accordion__button{padding:12px 15px;justify-content:space-between}
    #WIYJ-accordion h3.cmp-accordion__header .cmp-accordion__icon{right:0}
    #WIYJ-accordion .cmp-accordion__panel{font-size:16px;line-height:1.2;padding:7px 20px 5px}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li:before{height:4px;width:4px;top:9px}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li{padding-left:15px}
    #resource-reference .blue-title{font-size:32px;line-height:1.2}
    .resources-block{padding:35px 25px 20px}
    .reference-block{padding:30px 35px}
    .reference-block .reference-text a{word-break:break-all}
    .footer-wrap{flex-direction:column;gap:20px}
    .footer-wrap .foot-col{width:100%!important;padding:0!important;border:0!important}
    .footer-wrap .foot-list + h4.foot-col-title{margin:25px auto 10px;text-align:center}
    .footer-wrap .foot-list.follows-us-list{justify-content:center}
    #footer-main .last-line{padding:0 30px;margin-top:15px}
    .footer-wrap .foot-col-title{font-size:24px;line-height:1.2;margin:0 0 5px}
    .footer-wrap .foot-list li a{font-size:12px;line-height:1.33}
    .why-section-wrapper{background:none;padding:30px;gap:20px;min-height: auto;}
    .why-section-wrapper .why-block-title{font-size:18px;line-height:1}
    .why-section-wrapper .why-block-text{font-size:16px;line-height:1;margin:0 0 1px}
    .why-section-wrapper .why-block-wrap{width:calc(50% - 10px);padding:50px 15px 80px!important;margin:0!important;background:#f1f2f2;border-radius:10px;position:relative;text-align:center;overflow:hidden}
    .why-section-wrapper .why-block-wrap:nth-child(even){padding:50px 15px 15px;text-align:center}
    .why-section-wrapper .why-block-wrap.gray-block .plus-circle{right:15px;bottom:-2px}
    .why-section-wrapper .plus-circle .cmp-accordion__icon{width:24px;height:24px;line-height:26px;font-size:20px;padding-left:4.5px}
    .why-section-wrapper .why-block-wrap.orange-block .plus-circle{left:auto}
    .why-section-wrapper .why-block-wrap:nth-child(3),.why-section-wrapper .why-block-wrap:nth-child(4){margin:0 0 15px}
    .why-section-wrapper .why-block-title.text-blue{max-width:93%}
    .why-section-wrapper .why-block-wrap.gray-block .why-block-text{margin:0}
    .why-section-wrapper .why-block-wrap.purple-block .plus-circle{top:auto}
    .why-section-wrapper .why-block-wrap.blue-block .plus-circle{left:auto}
    .why-section-wrapper .why-block-wrap:nth-child(3){padding:50px 15px 15px}
    .why-section-wrapper .why-block-wrap .plus-circle{position:absolute!important;display:block;width:24px;height:24px;right:15px!important;bottom:20px!important}
    .why-section-wrapper .why-block-wrap:nth-child(1):before,.why-section-wrapper .why-block-wrap:nth-child(2):before,.why-section-wrapper .why-block-wrap:nth-child(3):before,.why-section-wrapper .why-block-wrap:nth-child(4):before{content:'Awareness';position:absolute;top:0;left:0;background:#616161;color:#fff;width:100%;padding:10px;text-align:center;font-family:'calibri-bold';font-size:18px}
    .why-section-wrapper .why-block-wrap:nth-child(2):before{content:'Education';background:#f57f3a}
    .why-section-wrapper .why-block-wrap:nth-child(3):before{content:'Empower';background:#a35d95}
    .why-section-wrapper .why-block-wrap:nth-child(4):before{content:'Access';background:#3e5fac}
    .why-section-wrapper .why-block-wrap:nth-child(1):after,.why-section-wrapper .why-block-wrap:nth-child(2):after,.why-section-wrapper .why-block-wrap:nth-child(3):after,.why-section-wrapper .why-block-wrap:nth-child(4):after{content:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Awareness.svg);position:absolute;bottom:-15px;left:0;width:95px}
    .why-section-wrapper .why-block-wrap:nth-child(2):after{content:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Education.svg)}
    .why-section-wrapper .why-block-wrap:nth-child(3):after{content:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Empower.svg)}
    .why-section-wrapper .why-block-wrap:nth-child(4):after{content:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Access.svg)}
    #why{position:relative;padding-top:330px}
    #why:before{content:'';top:30px;height:290px;width:290px;position:absolute;left:calc(50% - 145px);background:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/why-circle.png);background-size:contain}
    #terms-of-use { padding: 35px 20px 20px;}
    html[lang="fr"] #why:before{content:'';background:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/fr/images/why-circle.png);background-size:contain}
    html[lang="fr"] .why-section-wrapper{background: none;}
    
} 

/* Small device screen */
@media (max-width: 767px){
    .owl-carousel-1 .banner-carsol-heading {font-size: 32px;line-height: 36px;}
    .owl-carousel-1 .carsole-content-wrap {padding: 40px 30px 40vw;}
    .owl-carousel-1 .banner-carsol-subheading, .owl-carousel-1 a.banner-carsol-btn, #WIYJ-accordion .acc-blk-title {font-size: 16px;line-height: 1.12;}
    #carousel-2 .carousel-2-content-wrap {padding: 35px 30px 1px;}
    .carousel-2-title, .carousel-2-text, ul.carousel-2-ul li {font-size: 16px;line-height: 1.14;} 
    #carousel-2 .owl-theme .owl-controls .owl-page span, .cmp-modal--defaultStyle.modal .owl-theme .owl-controls .owl-page span, #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page span{width: 40px;height: 4px;margin: 0px 2px;}
    ul.carousel-2-ul li:before {top: 8px;height: 4px;width: 4px;}
    ul.carousel-2-ul li {padding-left: 16px;}
    
    div#header-banner {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/carsole-banner-mob.png); background-repeat: no-repeat;background-size: cover;background-position: bottom;}
    div#header-banner p.banner-heading {font-size: 32px;line-height: 36px;padding: 40px 30px 40vw;}
    
    #pilot-pop-up-main {padding: 40px 30px 50px;}
    #pilot-pop-up-main h4.cmp-title__text.cmp-title__text--h4 {font-size: 16px;line-height: 1.2;margin: 0px auto 31px;}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div h5, .pilot-popup-content-wrap .carousel-2-text {font-size: 20px;line-height: 1.20;}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text, .popup-content-wrap p, .popup-content-wrap ul.carousel-2-ul li,
    .resources-block .resource-reference-title, .resources-block .resource-reference-link, .reference-block .reference-text {font-size: 16px;line-height: 1.20;}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div {padding: 15px;border-radius: 10px 10px;}
    #pilot-pop-up-main .azcl-columns__base.azcl-columns--3 > div .cmp-text a.plus-circle {margin: 30px 0 0 auto;}
    .pilot-pop-up-graph-wrap {border-radius: 10px 10px;display: flex;flex-wrap: wrap;gap: 8px 6px; padding: 20px 35px 40px;}
    .pilot-pop-up-graph-wrap .pilot-graph-title {font-size: 16px;line-height: 1.20;margin-bottom: 10px;}
    .pilot-pop-up-graph-wrap .block-text {font-size: 16px;line-height: 1.20;width: 40%;padding: 8px 8px;}
    .pilot-pop-up-graph-wrap .pilot-graph-title, .pilot-pop-up-graph-wrap .pilot-graph-wrap {width: 100%;}
    .pilot-pop-up-graph-wrap .block-text.org-2, .pilot-pop-up-graph-wrap .block-text.purp-2, .pilot-pop-up-graph-wrap .block-text.blue-2 {width: 57%;padding: 8px 11px 8px 8px;}
    .pilot-pop-up-graph-wrap .pilot-graph-wrap {margin-bottom: 10px;}
    .pilot-popup-content-wrap {flex-direction: column;gap: 0px;}
    .pilot-popup-content-wrap .image-wrap, .pilot-popup-content-wrap .pilot-popup-content {width: auto;}
    .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close {width: 2rem !important;height: 2rem !important;left: auto;}
    .modal.cmp-modal__modalbox.modal-lg .modal-box .modal__close .modal__closeLabel, div#topNavbar {display: none;}
    .modal.cmp-modal__modalbox.modal-lg .modal-box{max-width: calc(100% - 60px);margin: auto;}
    .popup-content-wrap {padding: 30px 0px 0px; max-height: 110vw;overflow-y: auto;} 
    #pilot-pop-up-main .popup-wrapper .popup-content-wrap{max-width: calc(100% - 60px);margin: 5vw auto auto;padding: 2.5rem 30px 0px;}
    #pilot-pop-up-main .popup-wrapper button.modal__close.close{width: 20px;height: 21px;background-repeat: no-repeat;}
    #pilot-pop-up-main .popup-wrapper .owl-theme .owl-controls .owl-page {margin: 30px 0;}

    .acc-heading {font-size: 16px;line-height: 1.20;padding:  0px 30px;}
    #WIYJ-accordion {padding: 10px 30px 25px;}
    #WIYJ-accordion h3.cmp-accordion__header .cmp-accordion__title {font-size: 16px;line-height: 1.20;max-width: 80%;}
    #WIYJ-accordion .cmp-accordion__button {padding: 12px 15px;justify-content: space-between;}
    #WIYJ-accordion h3.cmp-accordion__header .cmp-accordion__icon {right: 0;} 
    #WIYJ-accordion .cmp-accordion__panel {font-size: 16px;line-height: 1.20;padding: 7px 20px 5px 14px;}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li:before {height: 4px;width: 4px;top: 9px;}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li {padding-left: 15px;margin-bottom: 5px;}
    #resource-reference .blue-title {font-size: 32px;line-height: 1.20;} 
    .resources-block {padding: 35px 25px 20px;}
    .reference-block {padding: 30px 35px;}
    .reference-block .reference-text a{word-break: break-all;}
    
    .footer-wrap{flex-direction: column;gap: 20px;}
    .footer-wrap .foot-col {width: 100% !important;padding: 0px !important;border: 0px !important;}
    .footer-wrap .foot-list + h4.foot-col-title {margin: 25px auto 10px;text-align: center;}
    .footer-wrap .foot-list.follows-us-list {justify-content: center;}
    #footer-main .last-line {padding: 0px 30px;margin-top: 15px;}
    .footer-wrap .foot-col-title {font-size: 24px;line-height: 1.20;margin: 0px 0px 5px;}
    .footer-wrap .foot-list li a {font-size: 12px;line-height: 1.33;} 
    
    div#pilot-pop-up-main:before, div#pilot-pop-up-main:after, .why-section-wrapper:before, .why-section-wrapper:after, .resources-block:before { width: 100%; left: 0; }
    .why-section-wrapper {background: none;padding: 30px;/*background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/other/why-diagram-mob.png);background-size: 100%;padding: 40px 40px 25px 40px;gap: 10%;*/}
    .why-section-wrapper .why-block-title {font-size: 18px;line-height: 1;}
    .why-section-wrapper .why-block-text {font-size: 16px;line-height: 1;margin: 0 0 1px 0;} 
    .why-section-wrapper .why-block-wrap {width: 100%;padding: 50px 15px 15px;margin: 0px 0 15px 0;background: #f1f2f2;border-radius: 10px;position: relative;text-align: center;overflow: hidden;        /*width: 45%;padding: 10px 0px 15px;margin-top: 0px;*/}
    .why-section-wrapper .why-block-wrap:nth-child(even) {padding: 50px 15px 15px;text-align: center;/*padding: 10px 0px 15px;*/}
    .why-section-wrapper .why-block-wrap.gray-block .plus-circle {right: 15px;bottom: -2px;}
    .why-section-wrapper .plus-circle .cmp-accordion__icon {width: 24px;height: 24px;line-height: 26px;font-size: 20px;padding-left: 4.5px;}
    .why-section-wrapper .why-block-wrap.orange-block .plus-circle {left: 14px;bottom: -2px;}
    .why-section-wrapper .why-block-wrap:nth-child(3), .why-section-wrapper .why-block-wrap:nth-child(4) {margin: 0 0 15px 0;/*margin-top: 88.9vw;*/}
    .why-section-wrapper .why-block-title.text-blue {max-width: 93%;}
    .why-section-wrapper .why-block-wrap.gray-block .why-block-text {margin: 0 0;/*margin: 0 0 130px 0;*/}
    .why-section-wrapper .why-block-wrap.purple-block .plus-circle {bottom: auto;right: 15px;top: -41px;}
    .why-section-wrapper .why-block-wrap.blue-block .plus-circle {bottom: auto;left: 14px;top: -42px;}
    .why-section-wrapper .why-block-wrap:nth-child(3) {padding: 50px 15px 15px;order: 4; /*padding: 15px 0px 0px 0px;*/}
    .why-section-wrapper .why-block-wrap .plus-circle {position: static;display: block;width: 24px;height: 24px;margin: 25px 5px 15px auto;}
    
    .why-section-wrapper .why-block-wrap:nth-child(1):before,.why-section-wrapper .why-block-wrap:nth-child(2):before,
    .why-section-wrapper .why-block-wrap:nth-child(3):before,.why-section-wrapper .why-block-wrap:nth-child(4):before{content: 'Awareness';position: absolute;top: 0;left: 0;background: #616161;color: #fff;width: 100%;padding: 10px;text-align: center;font-family: 'calibri-bold';font-size: 18px;}
    .why-section-wrapper .why-block-wrap:nth-child(2):before {content: 'Education';background: #f57f3a;}
    .why-section-wrapper .why-block-wrap:nth-child(3):before {content: 'Empowerment';background: #a35d95;}
    .why-section-wrapper .why-block-wrap:nth-child(4):before {content: 'Access';background: #3e5fac;}
    .why-section-wrapper .why-block-wrap:nth-child(1):after,.why-section-wrapper .why-block-wrap:nth-child(2):after,
    .why-section-wrapper .why-block-wrap:nth-child(3):after,.why-section-wrapper .why-block-wrap:nth-child(4):after{content: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Awareness.svg);position: absolute;bottom: -15px;left: 0;width: 95px;}
    .why-section-wrapper .why-block-wrap:nth-child(2):after {content: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Education.svg);}
    .why-section-wrapper .why-block-wrap:nth-child(3):after {content: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Empower.svg);}
    .why-section-wrapper .why-block-wrap:nth-child(4):after {content: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/Access.svg);}
    #why {position: relative;padding-top: 330px;}
    #why:before {content: '';top: 30px;height: 290px;width: 290px;position: absolute;left: calc(50% - 145px);background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/why-circle.png);background-size: contain;}

    
    #Navbar .navbar-container {flex-direction: column;padding: 0px 0px 0px;box-shadow: 0px 4px 20px #000;position: relative;z-index: 1;}
    #Navbar ul.nav.navbar-nav {max-width: 100%;flex-direction: column;gap: 0px;position: relative;left: 0;margin-top: 0;display:none;border-top: 1px solid #f57f3a;}
    #Navbar ul.nav.navbar-nav li {padding: 10px;margin: 0px;width: 100%;border: 0;text-align: center;}
    #Navbar ul.nav.navbar-nav li:last-child, ul.dropdown-menu{display: none;}
    #Navbar .navbar-header {max-width: 100%;padding: 20px 20px 0px;display: flex;justify-content: space-between;align-items: center;}
    #Navbar ul.nav.navbar-nav li.active {background: #F57F3A;}
    #Navbar ul.nav.navbar-nav li.active a {color: #fff;display: block;}
    #Navbar ul.nav.navbar-nav li + li {border-top: 1px solid #C7C8CA;}
    #Navbar ul.nav.navbar-nav a {font-size: 16px;}
    #Navbar .navbar-header .dropdown-mob {display: block;width: calc(100% - 160px);text-align: right;position: relative;}
    #Navbar a.navbar-brand {max-width: 157px;} 
    
    #carousel-1 .owl-carousel-1 .owl-item {background: url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/en/images/carsole-banner-mob.png);background-size: cover;background-position: bottom;background-repeat: no-repeat;}
    #carousel-1 .owl-carousel-1.owl-theme .owl-controls .owl-page span {width: 10px;height: 10px;margin: 2px 2px;}
    #carousel-1 .owl-carousel.owl-theme .owl-controls {margin-top: -48px;}
    #carousel-1 .owl-carousel-1.owl-theme .owl-controls .owl-pagination {width: 88px;}
    #pilot-popup-carousel-1.owl-carousel, #pilot-popup-carousel-2.owl-carousel, #pilot-popup-carousel-3.owl-carousel{max-height: 110vw;}

    #Navbar .navbar-header .hamburgan {display:block;margin-left: 10px;}
    #Navbar .line {background: #939598;height: 3px;width: 24px;}
    #Navbar .line.line-2 {margin: 5px 0px;}
    #Navbar .navbar-header .dropdown-mob a.lang {color: #000;font-size: 12px;line-height: 1.20;position: relative;padding-right: 25px;}
    #Navbar .navbar-header .dropdown-mob a.lang:before {content: '';border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 9px solid #010101;position: absolute;right: 8px;top: 2px;text-decoration:none!important;}
    #Navbar .dropdown-mob .dropdown-menu {display: none;position: absolute;right: 0;top: 25px;background: #fff;padding: 10px;box-shadow: 0px 2px 4px -1px #000;}
    #Navbar .dropdown-mob .dropdown-menu.show {display: block;}
    #Navbar .dropdown-mob .dropdown-menu a {color: #000;font-size: 12px;}
    
    #footer-main .footerLogoWrap {flex-direction: column;gap: 15px;}
    #footer-main .footerLogoWrap img + img {max-width: 160px;}
    #footer-main .footerLinks {flex-direction: column;}
    #footer-main .footerLinks a + a {padding: 0px;border: 0px;}
    
    .exit-ramp-modal .modal-box {max-width: calc(100% - 30px);padding: 1.3rem;}
    .exit-ramp-modal .modal__close {left: calc(100% - 50px);top: 35px;}
    
    body#login {padding-top: 0px;}
    #login h1 {font-size: 36px;line-height: 40px;letter-spacing: 0;}
    #login .heading-wrapper {padding: 0px 20px;}
    #login .gating-subtext p {font-size: 20px;line-height: 24px;margin: 0px auto 35px;}
    #login .gating-subtext + p {margin: auto 0 15px auto;}
    #login #login-form-wrap {padding: 50px 0 100px;}
    #login #footer-main .footer-inner-wrap {flex-direction: column;gap: 10px;}
    #login #footer-main {padding: 30px 0px 40px;}
    
    #terms-of-use { padding: 35px 20px 20px;}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li br {display: none;}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul li br.acc-mob-visible {display: block;}
    #WIYJ-accordion .acc-blk-subtitle{    font-size: 16px;line-height: 1.20;}
    #WIYJ-accordion .cmp-accordion__panel ul.acc-ul.resp-m-t {margin-top: -5px;}
    
    html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(1):before {content: 'SENSIBILISATION';} 
    html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(2):before {content: 'INFORMATION';}
    html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(3):before {content: 'AUTONOMISATION';} 
    html[lang="fr"] .why-section-wrapper .why-block-wrap:nth-child(4):before {content: 'ACCES';}
    html[lang="fr"] .why-section-wrapper{background: none;}
    html[lang="fr"] #why:before{content:'';background:url(/content/dam/intelligentcontent/unbranded/whatsinyourgenes-ca/fr/images/why-circle.png);background-size:contain}
    
}