
.header-logo img{
    width: 279px;
    max-height:279px;
}
html[lang="fr"] .main-menu{
    padding: 0px 50px;
}
html[lang="fr"] .header-main-menu ul li a{
    font-size:14.5px;
    font-family: "Kanit-Medium";
}
html[lang="fr"] .header-main-menu ul li{
    margin-left: 32px;
}
html[lang="fr"] .top-menu ul li.language-wrap a{
    color: #fff;
}
html[lang="fr"] .top-menu ul li.language-wrap a+a {
    color: #EC99FD;
}

html[lang="fr"] #new-login div#self-fragment {
    top: calc(15vh + 400px);
}
html[lang="fr"] #new-login .cmp-selfcertification.cmp-selfcertification--inpage
  .cmp-selfcertification__continue {
  width: 176px;
    /*margin: 70px auto 0 calc(-155% - 77px);*/
}
html[lang="fr"] #new-login .cmp-selfcertification #textField-error-invalid, .cmp-selfcertification #textField-error{
    left: -9px;
}

/*Login Page*/
html[lang="fr"] #attr-login .hero-banner-text-home{
    left:55%;
}
@media (min-width: 1920px) and (max-width: 2560px)  {
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{transform: translate(20%, 70%);}
}
@media (min-width: 1500px) and (max-width: 1680px)  {
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{transform: translate(15%, 110%);}
}
@media (min-width: 1400px) and (max-width: 1499px)  {
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{transform: translate(12%, 100%);}
}
@media (min-width: 1365px) and (max-width: 1399px)  {
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{transform: translate(12%, 170%);}
}
@media (min-width: 1026px) and (max-width: 1300px)  {
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{transform: translate(10%, 180%);}
}
@media (min-width: 992px) and (max-width: 1025px)  {
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{transform: translate(6%, 82%);}
}
@media screen and (max-width: 991px) {
    html[lang="fr"] #new-login .cmp-selfcertification.cmp-selfcertification--inpage .cmp-selfcertification__continue{
        margin: auto;
        position: relative;
        top: 10px;
    }
}


/*HOME PAGE FR START*/
html[lang="fr"] #attr-home .hero-banner-text-home {
    width: 35%;
    left: 58%;
    top: 15.5%;
}
html[lang="fr"] #attr-home .banner-subheading-home {
    font-size: 16px;
    width: 91%;
    }
html[lang="fr"] #attr-home h1 {
    line-height: 44px;
}
html[lang="fr"] #attr-home h1 {
    line-height: 44px;
    font-size: 53px;
    margin-top: 10px;
    margin-bottom: 20px;
}
html[lang="fr"] #attr-home .heading-subheading {
    font-size: 40px;
    line-height: 40px;
    font-family: 'Kanit-SemiBold';
    max-width: 100%;
}
html[lang="fr"] span.fr-see-headen {
    font-size: 30px;
    font-family: 'Kanit-SemiBold';
}

html[lang="fr"] #attr-home .banner-info-text-home {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 15px;
}
html[lang="fr"] #attr-home .cta-banner-home{
    width: 259px;
}
html[lang="fr"] #attr-home .card-one{
    padding: 20px 55px 10px 30px;
}
html[lang="fr"] #attr-home .cta-bottom-home{
    width: 360px;
}
html[lang="fr"] #attr-home .cta-bottom-home.home-cta-2{
    width: 420px;
}
html[lang="fr"] #attr-home .reference-footnote{
    max-width: 1130px;
}


/*HOME PAGE FR END*/



/*Site Map Page Start*/

html[lang="fr"] #attr-sitemap .site-map-heading img{
    width: 340px;
}

/*Site Map Page End*/


@media only screen and (min-width: 1450px) and (max-width: 2580px) {
    html[lang="fr"] #attr-home .banner-subheading-home {
        max-width: 462px;
    }
    html[lang="fr"] #attr-home .banner-info-text-home {
        max-width: 490px;
    }
    html[lang="fr"] #attr-home .cta-banner-home {
        max-width: 259px;
    }
}
@media only screen and (min-width: 1654px) and (max-width: 1800px) {
    html[lang="fr"] #attr-home .hero-banner-home-main {
        min-height: 50vw;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
    html[lang="fr"] #attr-home .banner-subheading-home {
        width: 91%;
    }
}
@media only screen and (min-width: 1400px) and (max-width: 1500px) {
    html[lang="fr"] #attr-login form#loginform {
        /*top: 9vw;*/
    }
}
@media only screen and (min-width: 1367px) and (max-width: 1410px) {
    html[lang="fr"] #attr-home .hero-banner-text-home {
        width: 62%;
        left: 35%;
    }
}
@media only screen and (min-width: 1901px) { 
    html[lang="fr"] #attr-home .hero-banner-text-home{
        /*top: 15% !important;*/
    }
    
}




@media only screen and (min-width: 1024px) and (max-width: 1367px) {
    html[lang="fr"] #attr-home .hero-banner-text-home {
        /*top: 14% !important;
        width: 65% !important;
        left: 25% !important;*/
        top: 18% !important;
        width: 49% !important;
        left: 50% !important;
    }
    html[lang="fr"] #attr-home h1 br{
        display: contents;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1023px) {
    html[lang="fr"] #attr-home .hero-banner-text-home {
        /*top: 14% !important;
        width: 65% !important;
        left: 25% !important;*/
        top: 25% !important;
        width: 80% !important;
        left: 15% !important;
        padding-bottom: 0;
    }
    html[lang="fr"] #attr-home h1 br{
        display: contents;
    }
    #attr-home .hero-banner-home-main {
        min-height: 70vw;/* min-height: 78vw;*/
    }
    #attr-home #footer-style {
        padding-top: 8em !important;
    }
}

@media screen and (max-width: 991px) {
    html[lang="fr"] #attr-sitemap #text-9c9d74775e ul, #text-3b902de85c ul{
        padding: 0 35px;
    }
    html[lang="fr"] #attr-home .hero-banner-text-home{
        width: 100%;
        left: 0;
        top:-6vh;/*top: 1049px;*/
    }
    html[lang="fr"] #new-login .cmp-selfcertification #textField-error-invalid, html[lang="fr"] .cmp-selfcertification #textField-error{
        font-size:12px;
        left:0px;
        letter-spacing: -0.9px;
    }
    html[lang="fr"] #attr-symptoms .banner-block{
        padding: 110px 0 0;
    }
    
}

@media only screen and (max-width: 767px){
    html[lang="fr"] .mobile-only .main-menu {
        padding: 20px 0 0px 0;
    }
    html[lang="fr"] #attr-login h1{
        font-size:53px;
    }
    html[lang="fr"] #attr-login h1 .medium-heading {
        font-size: 30px;
        margin-top: -5px;
    }
    html[lang="fr"] span.fr-see-headen {
        font-size: 20px;
    }
    html[lang="fr"] #attr-login .banner-info-text-home{
        font-size:18px;
        font-family: 'Kanit-SemiBold';
    }
    /*html[lang="fr"] #attr-login .hero-banner-home-main .mobile-image, html[lang="fr"] #attr-login .only-mob {
        display: contents;
    }*/
    html[lang="fr"] #attr-login form#loginform {
        top: 0px;
        margin-top: 55vh;/*margin-top: 20vh;*/
    }
    html[lang="fr"] #attr-login form#loginform #see-log-form{
        max-width: 311px;
    }
    html[lang="fr"] #attr-login .cmp-selfcertification.cmp-selfcertification--inpage{
        transform: translate(-50%, 173%);
    }
    
    /*HOME*/
    
    html[lang="fr"] #attr-home .hero-banner-text-home {
        width: 100%;
        left: 0%;
    }
    html[lang="fr"] #attr-home .banner-subheading-home {
        font-size: 16px;
        margin-right: 0;
        margin-left: 0;
        margin-top: -35px;
        line-height: 20px;
        font-family: 'Kanit-Medium';
        width: 100%;
        padding: 0 24px;
    }
    html[lang="fr"] #attr-home .heading-subheading {
        font-size: 25px;
        line-height: 32px;
        width: 100%;
    }
    html[lang="fr"] #attr-home .banner-info-text-home{
        /*font-size:14px;
        padding: 0px 26px;
        margin-bottom: 20px;*/
    }
    /*html[lang="fr"] #attr-home .bottom-section-home{
        padding-top: 10em;
    }*/
    html[lang="fr"] #attr-home .cta-banner-home {
        width: 258px;
        /*z-index: 2;
        left: 0;
        margin: auto;*/
    }
    html[lang="fr"] #attr-home .card-one-title{
        padding-bottom: 0;
    }
    html[lang="fr"] #attr-home .card-two-title{
        padding-bottom: 0;
    }
    html[lang="fr"] #attr-home .card-one {
        padding: 20px 10px 10px 10px;
    }
    html[lang="fr"] #attr-home .cta-bottom-home {
        width: 326px !important;
    }
    html[lang="fr"] #attr-home .card-two{
        padding:20px 16px 10px 10px;
    }
    html[lang="fr"] #new-login .cmp-selfcertification.cmp-selfcertification--inpage .form-control {
        margin-bottom: 15px;
    }
    
}


@media only screen and (min-width: 320px) and (max-width: 479px) {
    html[lang="fr"] #attr-home .hero-banner-text{
        /*margin-top: 27px;
        margin-bottom: 56px;*/
    }
    html[lang="fr"] #attr-home .hero-banner-text-home {
        top: 0 !important;
        padding-bottom: 1em !important;
    }
    
}

@media only screen and (max-width: 392px){

    #new-login .bottom-section-home{padding-top: 42px;}

}


@media screen and (max-width: 991px) {
    html[lang="fr"] #new-login div#self-fragment {
        top: calc(15vh + 350px);
    }
}
@media screen and (max-width: 767px) {
    html[lang="fr"] #new-login div#self-fragment {
        top: calc(15vh + 370px);
    }
}
@media screen and (max-width: 601px) {
    html[lang="fr"] #new-login div#self-fragment {
        top: calc(15vh + 410px);
    }
}
@media screen and (max-width: 420px) {
    html[lang="fr"] #new-login div#self-fragment {
        top: calc(6vh + 760px);
        left: 15%;
    }
}

@media screen and (max-width: 360px) {
    html[lang="fr"] #new-login div#self-fragment {
        top: calc(6vh + 700px);
    }
}

@media screen and (max-width: 356px) {
    html[lang="fr"] #new-login div#self-fragment {
        top: calc(6vh + 670px);
        left: calc(50% - 30%);
    }
}
