/* include font */
    
    @font-face {
        font-family: Aria Black;
        src: url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Black.eot');
        src: url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Black.woff') format('woff'), url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Black.ttf') format('truetype'), url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Black.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'Arial Bold';
        src: url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Bold.eot');
        src: local('☺'), url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Bold.woff') format('woff'), url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Bold.ttf') format('truetype'), url('//desjardins.com/outils/indice-retraite/app/assets/fonts/Arial_Bold.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    body {
        background-color: #292b2f;
        margin: 0;
        font-family: 'Arial';
        padding-bottom: 50px;
        position: relative;
        min-width: 320px;
    }
    
    .hidden-for-seo {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    
    .fix-layout-1230 {
        margin-right: auto!important;
        margin-left: auto!important;
        background-color: #fff;
        border-radius: 10px;
    }
    
    .container-fluid.fix-layout-1230 {
        -webkit-box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        -moz-box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
    }
    
    .reset {
        padding: 0!important;
    }
    
    .spacer {
        clear: both;
    }
    
    .control-label {
        text-align: right;
    }
    
    .modal-lg {
        max-width: 600px;
    }
    
    .wrapper-modal-content span {
        display: block;
        margin-bottom: 5px;
    }
    /*.intro-wrapper.en .right-content h1 span {
        display: block;
    }*/
    
    .modal-content-top,
    .modal-content-bottom {
        display: inline-block;
        width: 100%;
    }
    
    .modal-content-bottom {
        border-top: 1px solid #e1e1e1;
    }
    
    .modal-header {
        background-color: #00884e;
    }
    
    .modal-header .modal-title {
        font-size: 22px;
        color: #fff;
    }
    
    .modal-content {
        overflow: hidden;
        border-radius: 10px;
    }
    
    .modal-header .close {
        opacity: 1;
        margin-top: 6px;
    }
    
    .modal-content-left span {
        display: inline-block;
        vertical-align: middle;
    }
    
    .modal-content-left span.img {
        height: 50px;
        width: 50px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(238, 238, 238, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(238, 238, 238, 1);
        box-shadow: 0px 2px 0px 0px rgba(238, 238, 238, 1);
        margin-right: 10px;
    }
    
    .modal-content-top .modal-content-left span.img {
        background-image: url('../images/icon-telephone.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 20px;
    }
    
    .modal-content-bottom.bottom1 .modal-content-left span.img {
        background-image: url('../images/icon-a-la-caisse.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 25px;
    }
    .modal-content-bottom.bottom2 .modal-content-left span.img {
        background-image: url('../images/icon-enligne.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 25px;
    }
    
    .btn-bot-close {
        position: absolute;
        top: 30px;
        right: 40px;
        z-index: 9999;
        opacity: 1;
    }
    
    .btn-bot-close:hover,
    .btn-bot-close:focus {
        opacity: 1;
    }
    
    .carousel-indicators {
        bottom: inherit;
        top: 0;
        display: none;
    }
    
    .wrapper-modal-content span.text {
        color: #353c41;
        font-weight: bold;
    }
    
    .wrapper-modal-content .number {
        color: #00884e;
        display: inline-block;
    }
    
    .modal-content-right span {
        font-size: 16px;
    }
    
    .modal-content-right span:nth-child(2) {
        margin-bottom: 15px;
    }
    
    .modal-content-bottom a {
        display: block;
        margin-top: 10px;
        color: #18a566;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 3px;
        font-weight: bold;
    }
    
    .modal-content-bottom i {
        margin-left: 6px;
    }
    
    .modal-open {
        overflow: auto;
    }
    
    .modal-backdrop {
        background-color: #fff;
    }
    
    .modal-backdrop.in {
        opacity: .8;
    }
    /**
* End Commons
*/
    /**
 Loading
*/
    
    .loading {
        margin: 20px auto;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        border: 0.25rem solid rgba(255, 255, 255, 0.2);
        border-top-color: white;
        animation: spin 1s infinite linear;
    }
    
    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    /**
* End Loading
*/
    /**
* Header
*/
    
    header {
        -webkit-box-shadow: 0px 3px 1px 0px rgba(199, 199, 199, 1);
        -moz-box-shadow: 0px 3px 1px 0px rgba(199, 199, 199, 1);
        box-shadow: 0px 3px 1px 0px rgba(199, 199, 199, 1);
        position: relative;
        background: #FFF;
    }
    
    .menu-bar {
        min-height: 64px!important;
    }
    
    .head-img {
        padding: 16px 0;
    }
    
    .head-img .img_logo {
        height: 32px;
        width: 157px;
    }
    
    .en .head-img .img_logo {
        width: 148px;
    }

    .head-img .lang {
        float: right;
        margin-top: 7px;
        color: #595959;
        font-size: 13px;
        font-family: 'Arial';
        font-weight: bold;
        text-decoration: none;
    }
    
    .head-img .logo:focus {
        display: inline-block;
    }
    
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    
    #zone-foot {
        clear: both;
        color: #fff;
    }
    
    #zone-legale {
        text-align: center;
        padding: 1em 0;
        font-size: 0.8em;
        color: #cbcbcb;
        border-top: 1px solid #3e3e3e;
        overflow: hidden;
        background-color: #292b2f;
        max-height: 70px;
    }
    
    #zone-legale ul {
        position: relative;
        float: left;
        left: 50%;
        margin: 0.5em 0;
        padding: 0;
        list-style: none;
    }
    
    #zone-legale ul li {
        position: relative;
        float: left;
        right: 50%;
        padding: 0 5px;
        border-left: 1px solid #cbcbcb;
    }
    
    #zone-legale ul li:first-child {
        border: none;
    }
    
    #zone-legale ul li a {
        white-space: nowrap;
    }
    
    #zone-legale a:link,
    #zone-legale a:visited {
        text-decoration: none;
        color: #cbcbcb;
    }
    
    #zone-legale a:active,
    #zone-legale a:hover,
    #zone-legale a:focus {
        text-decoration: underline;
        color: #cbcbcb;
    }
    
    #zone-legale p.copyright {
        clear: both;
        margin: 0.5em 0;
        padding: 0;
    }
    
    #page {
        background-color: transparent;
    }
    
    #zone-centrale {
        color: #3e3e3e;
        z-index: 0;
        color: #3e3e3e;
        background: #fff url("//www.desjardins.com/ressources/images/a00-fond-contenu.gif") repeat-x left top;
        background: -moz-linear-gradient(top, #e5e7e8 0%, #fff 177px);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e7e8), color-stop(177px, #fff));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #e5e7e8 0%, #fff 177px);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #e5e7e8 0%, #fff 177px);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #e5e7e8 0%, #fff 177px);
        /* IE10+ */
        background: linear-gradient(to bottom, #e5e7e8 0%, #fff 177px);
        /* W3C */
    }
    
    h1 {
        margin: 0;
    }
    
    .container {
        max-width: 1090px;
    }
    
    .wrapper-main-content {
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        -moz-box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        border-radius: 10px;
        /*display: table;*/
        overflow: hidden;
        width: 100%;
    }
    
    .btn-nav {
        display: table;
        color: #fff;
        background-color: #00884e;
        padding: 0 30px;
        margin-top: 40px;
        -webkit-box-shadow: 0px 3px 0px 0px rgba(197, 232, 217, 1);
        -moz-box-shadow: 0px 3px 0px 0px rgba(197, 232, 217, 1);
        box-shadow: 0px 3px 0px 0px rgba(197, 232, 217, 1);
        text-decoration: none;
    }
    
    .btn-nav:hover {
        text-decoration: none;
        background-color: #06733e;
    }
    
    .btn-nav:active,
    .btn-nav:focus {
        background-color: #0b4b77;
    }
    
    .btn-nav h4,
    .btn-nav {
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }
    
    .noise-bg {
        position: relative;
    }
    
    .noise-bg:before {
        content: '';
        background-image: url('../images/noisy-texture.png');
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 9;
    }
    
    .title.with-shadow {
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 3px;
        position: relative;
        color: #353c41;
        display: inline;
    }
    
    .title.with-shadow label,
    .title.with-shadow h2,
    .title.with-shadow h3,
    .title.with-shadow span,
    .text-shadow-bot {
        position: relative;
        z-index: 9;
        background-image: url(../images/text-bg-color.png);
        line-height: 22px;
        display: inherit;
        background-position: 10px;
        font-family: 'Arial';
        font-weight: bold;
        font-size: 13px;
        display: inline;
    }
    
    .text-shadow-bot {
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 3px;
        position: relative;
        color: #353c41;
        display: inline;
        margin-right: 15px;
    }
    
    .title.with-shadow span {
        display: inline;
    }
    
    .text-color-green,
    .question-wrapper .wrapper-left-content h3:nth-child(2),
    .question-wrapper .wrapper-left-content legend span:nth-child(2),
    .talk-with-advisor h4 span:last-child,
    .talk-with-advisor h3 span:last-child {
        color: #18a566;
    }
    
    .question-wrapper [class^=ans-],
    .profile-wrapper [class^=ans-],
    .rank-wrapper [class^=ans-] {
        text-transform: capitalize;
        height: 80px;
        width: 80px;
        float: left;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(238, 238, 238, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(238, 238, 238, 1);
        box-shadow: 0px 2px 0px 0px rgba(238, 238, 238, 1);
    }
    
    .profile-wrapper [class^=ans-]:hover,
    .profile-wrapper [class^=ans-].selected,
    .profile-wrapper [class^=ans-]:focus {
        background: #18a566;
    }
    
    .question-wrapper [class^=nav-question-],
    .profile-wrapper [class^=nav-question-],
    .rank-wrapper [class^=nav-question-],
    .result-wrapper .mid-content .padding [class^=nav-question-] {
        color: #18a566;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 10px;
        font-family: 'Arial';
        font-weight: bold;
        cursor: pointer;
    }
    
    .result-wrapper .mid-content .padding .nav-question-prev {
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
    }
    
    .question-wrapper .nav-question-next,
    .profile-wrapper .nav-question-next,
    .rank-wrapper .nav-question-next,
    .result-wrapper .mid-content .padding .prev-links .nav-question-next {
        float: right;
    }
    
    .result-wrapper .mid-content .padding .prev-links .nav-question-next span {
        position: relative;
        margin-right: 0;
        padding-right: 17px;
    }
    
    .question-wrapper [class^=ans-]:first-child,
    .profile-wrapper .wrapper-answer.gender [class^=ans-]:first-child {
        margin-right: 45px;
    }
    
    .question-wrapper .wrapper-answer {
        display: table;
        margin: 0 auto 0;
        padding-top: 35px;
    }
    
    .profile-wrapper .wrapper-answer.gender {
        display: table;
        margin: 0 auto 0;
        padding-top: 20px;
    }
    
    .ie10-above .profile-wrapper .wrapper-answer.gender {
        margin: 40px auto 0;
    }
    
    .ie10-above .profile-wrapper legend,
    .ie10-above .rank-wrapper legend {
        text-align: center;
    }
    
    .profile-wrapper .wrapper-answer.gender label,
    .profile-wrapper .wrapper-answer.old label,
    .rank-wrapper .wrapper-answer label {
        width: 100%;
        font-size: 18px;
        line-height: 60px;
    }
    /* explication page start */
    
    .explication-wrapper .top h4,
    .explication-wrapper .top h2 {
        text-align: center;
        text-transform: uppercase;
        color: #353c41;
        font-weight: bold;
        line-height: 25px;
        font-family: 'Arial Black', Arial;
        word-spacing: 2px;
        font-size: 18px;
    }
    
    .explication-wrapper .top p.description {
        color: #595959;
        text-align: center;
        line-height: 22px;
    }
    
    .explication-wrapper .wrapper-img-text {
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid #e1e1e1;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(242, 242, 242, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(242, 242, 242, 1);
        box-shadow: 0px 2px 0px 0px rgba(242, 242, 242, 1);
    }
    
    .explication-wrapper .wrapper-img {
        height: 150px;
        position: relative;
        overflow: hidden;
    }
    
    .explication-wrapper .gradient-1 {
        background: -webkit-linear-gradient(top, rgb(201, 236, 182) 0%, rgb(138, 195, 140) 40%, rgb(66, 150, 90) 77%, rgb(50, 141, 82) 100%);
        background: -o-linear-gradient(top, rgb(201, 236, 182) 0%, rgb(138, 195, 140) 40%, rgb(66, 150, 90) 77%, rgb(50, 141, 82) 100%);
        background: -ms-linear-gradient(top, rgb(201, 236, 182) 0%, rgb(138, 195, 140) 40%, rgb(66, 150, 90) 77%, rgb(50, 141, 82) 100%);
        background: -moz-linear-gradient(top, rgb(201, 236, 182) 0%, rgb(138, 195, 140) 40%, rgb(66, 150, 90) 77%, rgb(50, 141, 82) 100%);
        background: linear-gradient(to bottom, rgb(201, 236, 182) 0%, rgb(138, 195, 140) 40%, rgb(66, 150, 90) 77%, rgb(50, 141, 82) 100%);
    }
    
    .explication-wrapper .wrapper-img .content-img-1,
    .explication-wrapper .wrapper-img .content-img-2,
    .explication-wrapper .wrapper-img .content-img-3 {
        position: absolute;
        width: 100%;
    }
    
    .explication-wrapper .gradient-2 {
        background: -webkit-rgb(196, 231, 177);
        background: -o-rgb(196, 231, 177);
        background: -ms-rgb(196, 231, 177);
        background: -moz-rgb(196, 231, 177);
        background: rgb(196, 231, 177);
    }
    
    .explication-wrapper .gradient-3 {
        background: -webkit-linear-gradient(top, rgb(37, 151, 92) 0%, rgb(115, 188, 133) 40%, rgb(184, 224, 171) 80%, rgb(196, 231, 177) 100%);
        background: -o-linear-gradient(top, rgb(37, 151, 92) 0%, rgb(115, 188, 133) 40%, rgb(184, 224, 171) 80%, rgb(196, 231, 177) 100%);
        background: -ms-linear-gradient(top, rgb(37, 151, 92) 0%, rgb(115, 188, 133) 40%, rgb(184, 224, 171) 80%, rgb(196, 231, 177) 100%);
        background: -moz-linear-gradient(top, rgb(37, 151, 92) 0%, rgb(115, 188, 133) 40%, rgb(184, 224, 171) 80%, rgb(196, 231, 177) 100%);
        background: linear-gradient(to bottom, rgb(37, 151, 92) 0%, rgb(115, 188, 133) 40%, rgb(184, 224, 171) 80%, rgb(196, 231, 177) 100%);
    }
    
    .explication-wrapper .wrapper-text {
        padding: 25px 30px 20px 30px;
    }
    
    .explication-wrapper .wrapper-text .title label {
        position: relative;
        z-index: 9;
        margin-bottom: 12px;
    }
    
    .explication-wrapper .wrapper-text p {
        font-size: 13px;
        padding-top: 10px;
    }
    /* explication page end */
    /* intro page start */
    
    .intro-wrapper .main-img-common {
        background-image: url('../images/illustration-intros.png');
        background-size: auto 571px;
        background-repeat: no-repeat;
    }
    
    .intro-wrapper .carousel-inner>.item {
        display: block;
        opacity: 0;
    }
    
    .intro-wrapper .carousel-inner>.active {
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opactiy 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 0;
        width: 100%;
    }
    
    .intro-wrapper .right-content h1 {
        text-transform: uppercase;
        font-family: 'Arial Black', 'Arial Bold';
        font-size: 21px;
        margin: 20px 0 25px;
    }
    
    .intro-wrapper .right-content h1 span:last-child,
    .intro-wrapper.en .right-content h1 span:first-child {
        color: #008f52;
    }
    
    .intro-wrapper.en .right-content h1 span:last-child,
    .question-wrapper .wrapper-left-content h3.title {
        color: #353c41;
    }
    
    .intro-wrapper .right-content h3.sub-title,
    .intro-wrapper .right-content p.sub-title {
        color: #353c41;
        margin-top: 20px;
        font-family: 'Arial';
        font-weight: bold;
        line-height: 24px;
        font-size: 18px;
    }
    
    .intro-wrapper .right-content p {
        margin-top: 28px;
        font-size: 16px;
        line-height: 24px;
    }
    
    .intro-wrapper .right-content p:first-child {
        margin-top: 26px;
    }
    
    .intro-wrapper .intro-img-wrapper {
        background: -webkit-linear-gradient(top, rgb(203, 234, 184) 0%, rgb(139, 195, 141) 40%, rgb(61, 143, 85) 80%, rgb(52, 140, 83) 100%);
        background: -o-linear-gradient(top, rgb(203, 234, 184) 0%, rgb(139, 195, 141) 40%, rgb(61, 143, 85) 80%, rgb(52, 140, 83) 100%);
        background: -ms-linear-gradient(top, rgb(203, 234, 184) 0%, rgb(139, 195, 141) 40%, rgb(61, 143, 85) 80%, rgb(52, 140, 83) 100%);
        background: -moz-linear-gradient(top, rgb(203, 234, 184) 0%, rgb(139, 195, 141) 40%, rgb(61, 143, 85) 80%, rgb(52, 140, 83) 100%);
        background: linear-gradient(to bottom, rgb(203, 234, 184) 0%, rgb(139, 195, 141) 40%, rgb(61, 143, 85) 80%, rgb(52, 140, 83) 100%);
    }
    
    .intro-wrapper .intro-img-wrapper {
        overflow: hidden;
        border-radius: 0 10px 10px 0;
        position: relative;
        z-index: 99;
    }
    
    .intro-wrapper .btn-nav {
        padding: 18px 70px;
    }
    
    .intro-wrapper .carousel-item {
        height: 716px;
    }
    
    .intro-wrapper .carousel-item .item img {
        position: absolute;
        height: 716px;
        right: -33px;
        z-index: 99;
    }
    
    .question-img-wrapper {
        display: none;
    }
    /* intro page end */
    /* question page start */
    
    .question-wrapper .wrapper-left-content,
    .rank-wrapper .wrapper-left-content {
        text-align: center;
        position: relative;
    }
    
    .rank-wrapper .wrapper-left-content p {
        color: #595959;
        margin-top: 60px;
        margin-bottom: 20px;
    }
    
    .rank-wrapper .wrapper-left-content h3 {
        line-height: 27px;
        font-family: 'Arial Black', Arial;
        font-size: 18px;
    }
    
    .question-wrapper .question-number {
        letter-spacing: 3px;
        text-transform: uppercase;
        display: table;
        margin: 0 auto;
    }
    
    .question-wrapper [class^=text-color-],
    .question-wrapper legend span,
    .rank-wrapper [class^=text-color-] {
        text-transform: uppercase;
        font-weight: bold;
        margin: 0;
        text-align: center;
    }
    
    .question-wrapper legend.each-question-content span {
        display: inline;
        font-size: 24px;
    }
    
    .question-wrapper .title.with-shadow span {
        margin-bottom: 30px;
    }
    
    .question-wrapper [class^=ans-] label {
        line-height: 80px;
        margin: 0;
        color: #00884e;
        font-weight: bold;
        cursor: pointer;
    }
    
    .question-wrapper .wrapper-answer-yes {
        text-align: center;
        margin-top: 25px;
    }
    
    .question-wrapper .wrapper-answer-yes ul {
        list-style-type: none;
        padding: 10px 0 0 0;
        display: table;
        margin: 0 auto 0;
        -webkit-box-shadow: 0px 3px 0px 0px rgba(229, 229, 229, 1);
        -moz-box-shadow: 0px 3px 0px 0px rgba(229, 229, 229, 1);
        box-shadow: 0px 3px 0px 0px rgba(229, 229, 229, 1);
    }
    
    .question-wrapper .wrapper-answer-yes li {
        float: left;
        border: 1px solid #e5e5e5;
        margin-left: -1px;
        font-size: 15px;
        font-weight: bold;
        color: #18a566;
        cursor: pointer;
    }
    
    .question-wrapper .wrapper-answer-yes li.selected {
        background-color: #18a566;
        color: #fff;
    }
    
    .nav-question-prev span {
        margin-left: 10px;
        cursor: pointer;
    }
    
    .nav-question-next span,
    .result-wrapper .text-content a span {
        margin-right: 10px;
        cursor: pointer;
    }
    
    .question-wrapper .question-img-wrapper {
        overflow: hidden;
        background: -webkit-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(58, 143, 84) 80%, rgb(52, 140, 83) 100%);
        background: -o-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(58, 143, 84) 80%, rgb(52, 140, 83) 100%);
        background: -ms-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(58, 143, 84) 80%, rgb(52, 140, 83) 100%);
        background: -moz-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(58, 143, 84) 80%, rgb(52, 140, 83) 100%);
        background: linear-gradient(to bottom, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(58, 143, 84) 80%, rgb(52, 140, 83) 100%);
    }
    
    .question-wrapper .question-img-wrapper.question-id-1,
    .question-wrapper .question-img-wrapper.question-id-2,
    .question-wrapper .question-img-wrapper.question-id-3,
    .question-wrapper .question-img-wrapper.question-id-4 {
        background: -webkit-rgb(207, 238, 188);
        background: -o-rgb(207, 238, 188);
        background: -ms-rgb(207, 238, 188);
        background: -moz-rgb(207, 238, 188);
        background: rgb(207, 238, 188);
    }
    
    .question-wrapper .question-img-wrapper.question-id-5 {
        background: -webkit-linear-gradient(top, rgb(207, 238, 188) 0%, rgb(209, 230, 194) 100%);
        background: -o-linear-gradient(top, rgb(207, 238, 188) 0%, rgb(209, 230, 194) 100%);
        background: -ms-linear-gradient(top, rgb(207, 238, 188) 0%, rgb(209, 230, 194) 100%);
        background: -moz-linear-gradient(top, rgb(207, 238, 188) 0%, rgb(209, 230, 194) 100%);
        background: linear-gradient(to bottom, rgb(207, 238, 188) 0%, rgb(209, 230, 194) 100%);
    }
    
    .question-wrapper .question-img-wrapper.question-id-6 {
        background: -webkit-linear-gradient(top, rgb(196, 230, 178) 0%, rgb(130, 186, 130) 40%, rgb(85, 157, 100) 60%, rgb(17, 114, 52) 98%, rgb(15, 112, 50) 100%);
        background: -o-linear-gradient(top, rgb(196, 230, 178) 0%, rgb(130, 186, 130) 40%, rgb(85, 157, 100) 60%, rgb(17, 114, 52) 98%, rgb(15, 112, 50) 100%);
        background: -ms-linear-gradient(top, rgb(196, 230, 178) 0%, rgb(130, 186, 130) 40%, rgb(85, 157, 100) 60%, rgb(17, 114, 52) 98%, rgb(15, 112, 50) 100%);
        background: -moz-linear-gradient(top, rgb(196, 230, 178) 0%, rgb(130, 186, 130) 40%, rgb(85, 157, 100) 60%, rgb(17, 114, 52) 98%, rgb(15, 112, 50) 100%);
        background: linear-gradient(to bottom, rgb(196, 230, 178) 0%, rgb(130, 186, 130) 40%, rgb(85, 157, 100) 60%, rgb(17, 114, 52) 98%, rgb(15, 112, 50) 100%);
    }
    
    .question-wrapper .question-img-wrapper.question-id-7,
    .question-wrapper .question-img-wrapper.question-id-8,
    .question-wrapper .question-img-wrapper.question-id-10 {
        background: -webkit-rgb(201, 235, 184);
        background: -o-rgb(201, 235, 184);
        background: -ms-rgb(201, 235, 184);
        background: -moz-rgb(201, 235, 184);
        background: rgb(201, 235, 184);
    }
    
    .question-wrapper .question-img-wrapper.question-id-9 {
        background: -webkit-linear-gradient(78deg, rgb(198, 232, 180) 0%, rgb(134, 198, 144) 45%, rgb(53, 157, 101) 84%, rgb(44, 156, 101) 100%);
        background: -o-linear-gradient(78deg, rgb(198, 232, 180) 0%, rgb(134, 198, 144) 45%, rgb(53, 157, 101) 84%, rgb(44, 156, 101) 100%);
        background: -ms-linear-gradient(78deg, rgb(198, 232, 180) 0%, rgb(134, 198, 144) 45%, rgb(53, 157, 101) 84%, rgb(44, 156, 101) 100%);
        background: -moz-linear-gradient(78deg, rgb(198, 232, 180) 0%, rgb(134, 198, 144) 45%, rgb(53, 157, 101) 84%, rgb(44, 156, 101) 100%);
        background: linear-gradient(12deg, rgb(198, 232, 180) 0%, rgb(134, 198, 144) 45%, rgb(53, 157, 101) 84%, rgb(44, 156, 101) 100%);
    }
    
    .rank-wrapper .rank-img-wrapper {
        overflow: hidden;
        background: -webkit-rgb(196, 230, 178);
        background: -o-rgb(196, 230, 178);
        background: -ms-rgb(196, 230, 178);
        background: -moz-rgb(196, 230, 178);
        background: rgb(196, 230, 178);
        position: relative;
    }
    
    .question-wrapper .wrapper-answer input,
    .question-wrapper .wrapper-answer-yes li input,
    .profile-wrapper .wrapper-answer.gender input,
    .profile-wrapper .wrapper-answer.old input,
    .rank-wrapper .wrapper-answer input {
        position: absolute;
        z-index: -1;
    }
    
    .question-wrapper .wrapper-answer label {
        width: 100%;
        cursor: pointer;
        color: #00884e;
        font-size: 18px;
        font-family: 'Arial';
        font-weight: bold;
    }
    
    .question-wrapper .wrapper-answer div.selected label,
    .profile-wrapper .wrapper-answer.old [class^=ans-].selected label,
    .rank-wrapper .wrapper-answer [class^=ans-].selected label {
        color: #FFF;
    }
    
    .profile-wrapper .wrapper-answer.old [class^=ans-] label {
        text-transform: lowercase;
    }
    
    .question-wrapper .wrapper-answer div.selected,
    .rank-wrapper .wrapper-answer [class^=ans-].selected {
        background: #00884e
    }
    /* question page end */
    /* result page start */
    
    .result-wrapper .result-sub-wrapper {
        width: 830px;
        margin: 0 auto;
        position: relative;
    }
    
    .result-wrapper .top-content {
        background: -webkit-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(59, 144, 85) 80%, rgb(51, 142, 82) 100%);
        background: -o-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(59, 144, 85) 80%, rgb(51, 142, 82) 100%);
        background: -ms-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(59, 144, 85) 80%, rgb(51, 142, 82) 100%);
        background: -moz-linear-gradient(top, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(59, 144, 85) 80%, rgb(51, 142, 82) 100%);
        background: linear-gradient(to bottom, rgb(203, 234, 183) 0%, rgb(139, 195, 141) 40%, rgb(59, 144, 85) 80%, rgb(51, 142, 82) 100%);
        padding: 60px 0 280px;
        position: relative;
        z-index: 9;
    }
    
    .result-wrapper .wrapper-point-content {
        display: table;
        width: 100%;
        margin-top: 30px;
    }
    
    .result-wrapper .number-point {
        font-size: 250px;
        color: #fff;
        font-weight: bold;
        float: left;
        line-height: 187px;
        position: relative;
        left: -9px;
        font-family: 'Arial Black', Arial;
    }
    
    .result-wrapper .wrapper-point-content ul {
        display: inline-block;
        list-style-type: none;
        margin: 0;
    }
    
    .result-wrapper .wrapper-point-content li {
        margin-bottom: 27px;
        font-family: 'Arial';
        font-weight: bold;
    }
    
    .result-wrapper .wrapper-point-content li:last-child,
    .question-wrapper .wrapper-answer-yes li label {
        margin-bottom: 0;
    }
    
    .question-wrapper .wrapper-answer-yes li label {
        width: 40px;
        height: 40px;
        padding-top: 10px;
        cursor: pointer;
    }
    
    .result-wrapper .wrapper-point-content li:before {
        content: '';
        background-image: url('../images/Cercle.png');
        background-repeat: no-repeat;
        width: 95px;
        height: 15px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
    
    .result-wrapper .wrapper-point-content li span {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
    }
    
    .result-wrapper .wrapper-point-content li span:not(.circle-point-number) {
        color: #353c41;
        font-size: 14px;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-right: 5px;
        font-family: 'Arial';
        font-weight: bold;
    }
    
    .result-wrapper .wrapper-point-content li span.circle-point-number {
        font-size: 18px;
        color: #fff;
        width: 42px;
        height: 42px;
        border: 3px solid #fff;
        border-radius: 50%;
        line-height: 39px;
        text-align: center;
    }
    
    .result-wrapper .relative-line {
        position: relative;
        overflow: hidden;
        clear: both;
    }
    
    .result-wrapper .relative-line>span {
        margin-right: 15px;
    }
    
    .result-wrapper .flow-items {
        margin-top: 30px;
    }
    
    .result-wrapper .item-content {
        border-radius: 8px;
        border: 1px solid #e1e1e1;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(242, 242, 242, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(242, 242, 242, 1);
        box-shadow: 0px 2px 0px 0px rgba(242, 242, 242, 1);
        overflow: hidden;
    }
    
    .result-wrapper .item-content .img-content {
        height: 170px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    .result-wrapper [class^=flow-your-] {
        padding-top: 55px;
        clear: both;
    }
    
    .result-wrapper [class^=flow-your-]:first-child {
        margin-top: 0;
    }
    
    .result-wrapper .flow-img-index-2 {
        top: -36px;
    }
    
    .result-wrapper .flow-img-index-3 {
        top: -80px;
    }
    
    .result-wrapper .item-content .text-content {
        padding: 30px;
    }
    
    .result-wrapper .text-content span {
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-family: 'Arial';
        font-weight: bold;
        margin: 0;
    }
    
    .result-wrapper .item-content .text-content h3,
    .intro-wrapper .left-content h3 label:first-child,
    .text-color-black,
    .talk-with-advisor h4 span:first-child {
        color: #353c41;
    }
    
    .result-wrapper .item-content .text-content h3 {
        font-size: 18px;
    }
    
    .result-wrapper .text-content a {
        color: #18a566;
        font-size: 10px;
        display: block;
    }
    
    .result-wrapper [class^=flow-your-] .text-content a {
        margin-top: 40px;
    }
    
    .result-wrapper .item-content .text-content a span {
        font-weight: bold;
        margin-right: 10px;
    }
    
    .result-wrapper .flow-img-preference-1 {
        top: -157px;
    }
    
    .result-wrapper .flow-img-preference-2 {
        top: -5px;
        left: -14px;
    }
    
    .result-wrapper .flow-img-preference-3 {
        top: -145px;
    }
    
    .result-wrapper .talk-with-advisor {
        text-align: center;
        clear: both;
        padding-top: 55px;
    }
    
    .result-wrapper .talk-with-advisor>h4,
    .result-wrapper .talk-with-advisor>h3 {
        text-transform: uppercase;
        font-family: 'Arial Black', 'Arial Bold';
        margin: 10px 0 30px;
        font-size: 18px;
    }
    
    .result-wrapper .talk-with-advisor p {
        font-size: 14px;
    }
    
    .result-wrapper span.type-underline:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #00884e;
        left: 0;
        bottom: -1px;
    }
    
    .result-wrapper .banner {
        text-align: center;
        margin: 60px 0 0;
    }
    
    .result-wrapper .additional-content {
        margin-top: 55px;
    }
    
    .result-wrapper .additional-items .img-content {
        overflow: hidden;
        position: relative;
        width: 150px;
        height: 100px;
        border-radius: 8px;
        display: inline-block;
        float: left;
    }
    
    .result-wrapper .additional-items .text-content {
        display: inline-block;
        padding: 16px 20px;
    }
    
    .result-wrapper .additional-items .text-content h3 {
        font-size: 18px;
        margin: 10px 0;
    }
    
    .result-wrapper .additional-items .item {
        clear: both;
        margin-top: 30px;
    }
    
    .result-wrapper .additional-img-1 {
        top: -170px;
        left: -60px;
    }
    
    .result-wrapper .mid-content .wrapper-padding {
        width: 100%;
        position: absolute;
        top: -250px;
        border-radius: 8px;
        overflow: hidden;
        -webkit-box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        -moz-box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
        box-shadow: 0px 0px 30px 15px rgba(229, 231, 232, 1);
    }
    
    .result-wrapper .mid-content .padding {
        padding: 55px 55px 25px;
        display: table;
        width: 100%;
        position: relative;
        background-color: #fff;
        z-index: 99;
    }
    
    .result-wrapper .mid-content .wrapper-padding:after {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
    
    .result-wrapper .mid-content .padding .prev-links {
        clear: both;
        padding-top: 40px;
    }
    
    .result-wrapper .mid-content .padding hr {
        clear: both;
        margin: 0 0 30px;
    }
    
    .result-wrapper .mid-content .padding>span {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: #595959;
    }
    
    .result-wrapper .mid-content .padding .prev-links .nav-question-next span:after {
        content: '';
        background-image: url(../images/icon-start-over.png);
        background-repeat: no-repeat;
        background-size: 10px 12px;
        display: inline-block;
        width: 10px;
        height: 12px;
        position: absolute;
        margin-left: 5px;
        right: 0;
    }
    
    .result-wrapper .mid-content span>span.type-underline {
        font-weight: bold;
        color: #00884e;
        position: relative;
    }
    
    .result-wrapper .average-desc p:first-child {
        color: #353c41;
        margin-bottom: 14px;
        font-family: 'Arial';
        font-weight: bold;
        padding-top: 7px;
        font-size: 18px;
    }
    
    .result-wrapper .mid-content .padding>span {
        display: inline-block;
        margin-bottom: 22px;
        font-family: 'Arial';
        font-weight: bold;
    }
    
    .result-wrapper .talk-with-advisor a,
    p.legal-notice a {
        color: #00884e;
        font-weight: bold;
        position: relative;
        text-decoration: underline;
    }
    
    .result-wrapper .wrapper-padding .padding>h4 {
        color: #353c41;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    
    .result-wrapper .mid-content p {
        color: #353c41;
        font-size: 16px;
    }
    
    .result-wrapper .mid-content .btn-nav,
    .question-wrapper .nav-question-prev,
    .rank-wrapper .nav-question-prev {
        float: left;
    }
    
    .result-wrapper .share-social h3 {
        font-size: 14px;
        margin: 10px 0;
        display: inline-block;
    }
    
    .result-wrapper .mid-content .btn-nav,
    .result-wrapper .talk-with-advisor .btn-nav {
        margin-top: 25px;
        cursor: pointer;
        padding: 18px 30px;
        color: #fff;
        text-decoration: none;
    }
    
    .result-wrapper .mid-content .btn-nav h4 {
        font-family: 'Arial';
        font-weight: bold;
    }
    
    .result-wrapper .share-social ul {
        list-style-type: none;
        display: inline-block;
        position: relative;
        top: 2px;
        padding-left: 20px;
        vertical-align: middle;
    }
    
    .result-wrapper .share-social li {
        float: left;
        margin-right: 15px;
    }
    
    .result-wrapper .share-social li:last-child,
    .explication-wrapper .wrapper-img:last-child {
        margin-right: 0;
    }
    /* result page end */
    /* profile page start */
    
    .profile-wrapper {
        display: table;
        width: 100%;
        padding: 60px;
    }
    
    .profile-wrapper .top-content {
        text-align: center;
        padding-bottom: 30px;
    }
    
    .profile-wrapper .top-content p {
        line-height: 24px;
        margin-bottom: 4px;
    }
    
    .profile-wrapper .left-content,
    .profile-wrapper .right-content {
        text-align: center;
        position: relative;
    }
    
    .profile-wrapper h2.title,
    .profile-wrapper fieldset legend span {
        text-transform: uppercase;
        font-family: 'Arial Black', Arial;
        font-size: 13px;
        display: table;
        margin: 0 auto;
    }
    
    .profile-wrapper fieldset legend span {
        font-size: 24px;
        display: inline;
    }
    
    .profile-wrapper .wrapper-answer,
    .rank-wrapper .wrapper-answer {
        display: table;
        margin: 0 auto;
    }
    
    .rank-wrapper .wrapper-answer {
        margin: 10px auto 0;
    }
    
    .profile-wrapper .wrapper-answer.gender label {
        background-repeat: no-repeat;
        background-position: 50%;
        display: block;
        height: 80px;
        margin: 0;
        cursor: pointer;
        background-size: 20px 40px;
    }
    
    .profile-wrapper .wrapper-answer.gender .ans-female label {
        background-image: url(../images/female-icon.png);
    }
    
    .profile-wrapper .wrapper-answer.gender .ans-female:hover label,
    .profile-wrapper .wrapper-answer.gender .ans-female:focus label,
    .profile-wrapper .wrapper-answer.gender .ans-female.selected label {
        background-image: url(../images/female-icon-active.png);
    }
    
    .profile-wrapper .wrapper-answer.gender .ans-male label {
        background-image: url(../images/male-icon.png);
    }
    
    .profile-wrapper .wrapper-answer.gender .ans-male:hover label,
    .profile-wrapper .wrapper-answer.gender .ans-male.selected label {
        background-image: url(../images/male-icon-active.png);
    }
    
    .profile-wrapper .wrapper-answer.old [class^=ans-],
    .rank-wrapper .wrapper-answer [class^=ans-] {
        margin: inherit;
        float: none;
        width: 260px;
        height: 60px;
        border-radius: 35px;
        margin-top: 20px;
    }
    
    .profile-wrapper .wrapper-answer.old [class^=ans-] label,
    .rank-wrapper .wrapper-answer [class^=ans-] label {
        margin: 0;
        line-height: 60px;
        font-family: 'Arial';
        font-weight: bold;
        text-transform: lowercase;
        color: #18a566;
        cursor: pointer;
        font-size: 18px;
    }
    
    .rank-wrapper .wrapper-answer [class^=ans-] label {
        text-transform: none;
    }
    
    .profile-wrapper .wrapper-question-nav {
        clear: both;
    }
    /* profile page end */
    
    .message-error {
        clear: both;
        display: block;
        margin-top: 17px;
        padding-top: 40px;
        font-weight: bold;
        font-size: 18px;
        color: #FF0000;
    }
    
    .share-social button {
        background: none;
        border: 0;
        outline: none;
        padding: 0;
    }
    
    .share-social li img {
        height: 17px;
    }
    
    .question-wrapper .wrapper-answer-yes p {
        margin-bottom: 5px;
    }
    
    .question-wrapper .wrapper-answer-yes li:last-child {
        border-left: 0;
    }
    
    p.legal-notice {
        font-size: 12px;
        margin-top: 50px;
        text-align: center;
    }
    
    .wrapper-answer-yes p span {
        white-space: nowrap;
    }
    
    .result-wrapper .additional-items img,
    .result-wrapper .flow-your-preference img,
    .result-wrapper .flow-your-index img {
        width: 100%;
        height: auto;
    }
    
    legend,
    button.btn-nav {
        border: 0;
    }
    
    .question-wrapper .wrapper-answer-yes legend {
        line-height: 1.45 em;
        font-size: 14px;
    }
    
    .screen-reader-text,
    .profile-wrapper input {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        overflow: hidden;
        position: absolute !important;
    }
    
    .carousel-control.left,
    .carousel-control.right {
        z-index: 999;
        display: none;
    }
    
    span.icon-externe {
        content: '';
        background-image: url('../images/icon-externe.png');
        background-repeat: no-repeat;
        background-size: 9px 9px;
        display: inline-block;
        height: 9px;
        width: 9px;
        margin-left: 5px;
    }
    
    .result-wrapper.fr .text-externe,
    .explication-wrapper .text-center button {
        display: inline-block;
    }
    
    .result-wrapper.fr .text-externe span.icon-externe {
        position: absolute;
        bottom: 3px;
    }
    
    .explication-wrapper .text-center {
        text-align: center;
    }

    /* 768 -> ~ */

@media only screen and ( min-width: 1200px) {
    body:not(.less-800) .intro-wrapper .carousel-item .item img {
        width: 180px;
        height: auto;
        bottom: 154px;
        right: 128px;
    }
    .less-800 .intro-wrapper .intro-img-wrapper,
    .less-800 .intro-wrapper .right-content,
    .less-800 .intro-wrapper .carousel-item {
        height: 570px;
    }
    .less-800 .intro-wrapper .carousel-item .item img {
        right: 104px;
        width: 144px;
        height: auto;
        bottom: 123px;
    }
    .less-800 .explication-wrapper .top h4,
    .less-800 .explication-wrapper .top h2 {
        padding: 0 250px;
    }
    .less-800 .explication-wrapper.en .top h2 {
        padding: 0 230px;
    }
    .explication-wrapper .top p.description {
        padding: 0 275px;
    }
    .less-800 .profile-wrapper {
        padding: 27px 40px;
    }
    .profile-wrapper .top-content p {
        padding: 15px 250px 0;
    }
}

@media only screen and ( min-width: 1024px) {
    .question-wrapper .wrapper-answer input:focus~label,
    .question-wrapper .wrapper-answer-yes li input:focus~label,
    .profile-wrapper .wrapper-answer.gender input:focus~label,
    .profile-wrapper .wrapper-answer.old input:focus~label,
    .rank-wrapper .wrapper-answer input:focus~label,
    .head-img .lang:focus,
    .wrapper-question-nav a:focus,
    .share-social button:focus,
    .share-social li>a:focus,
    .result-wrapper .mid-content .padding [class^=nav-question-]:focus,
    .result-wrapper [class^=flow-your-] .text-content a:focus,
    .result-wrapper .talk-with-advisor a:not(.btn-nav):focus,
    .result-wrapper .banner a:focus,
    .result-wrapper .text-content a:focus,
    p.legal-notice a:focus,
    .modal-content a:focus,
    .btn-bot-close:focus {
        outline: 2px solid #1A79C6 !important;
        outline-offset: 2px !important;
    }
    .question-wrapper .wrapper-answer div:hover label,
    .question-wrapper .wrapper-answer div:focus label,
    .profile-wrapper .wrapper-answer.old [class^=ans-]:hover label,
    .profile-wrapper .wrapper-answer.old [class^=ans-]:focus label,
    .rank-wrapper .wrapper-answer [class^=ans-]:hover label,
    .rank-wrapper .wrapper-answer [class^=ans-]:focus label {
        color: #FFF;
    }
    .question-wrapper .wrapper-answer div:hover,
    .question-wrapper .wrapper-answer div:focus,
    .rank-wrapper .wrapper-answer [class^=ans-]:hover,
    .rank-wrapper .wrapper-answer [class^=ans-]:focus {
        background: #00884e;
    }
    .question-wrapper .wrapper-answer-yes li:hover,
    .question-wrapper .wrapper-answer-yes li:focus {
        background-color: #18a566;
        color: #fff;
    }
    /* height 800 start */
    .less-800 .container {
        max-width: 1048px;
    }
    /*.less-800 .intro-wrapper .carousel-item .item img,*/
    .less-800 .question-wrapper .question-img-wrapper,
    .less-800 .rank-wrapper .rank-img-wrapper {
        height: 570px;
    }
    /* IE 10+ */
    .ie10-above .less-800 .intro-wrapper .carousel-item .item img,
    .ie10-above .intro-wrapper .carousel-item .item img {
        width: 146px;
        height: auto;
        bottom: -160px;
        right: 104px;
    }
    .ie10-above body:not(.less-800) .intro-wrapper .carousel-item .item img {
        width: 184px;
        height: auto;
        bottom: -200px;
        right: 127px;
    }
    body:not(.less-800) .rank-wrapper .rank-img-wrapper img {
        top: inherit;
        left: inherit;
        width: 842px;
        right: 0;
    }
    body:not(.less-800) .explication-wrapper.fr .top h2 {
        padding: 0 265px;
    }
    body:not(.less-800) .explication-wrapper.en .top h2 {
        padding: 0 250px;
    }
    .less-800 .explication-wrapper .wrapper-text {
        padding: 15px 20px 15px 20px;
        min-height: 162px;
    }
    .less-800 .fr.explication-wrapper .wrapper-img-text {
        min-height: 300px;
    }
    .less-800 .explication-wrapper .wrapper-content-img {
        margin-top: 20px;
    }
    .less-800 .explication-wrapper {
        padding: 4px 0 20px;
    }
    .less-800 .explication-wrapper .btn-nav,
    .less-800 .rank-wrapper .wrapper-left-content p {
        margin-top: 20px;
    }
    .less-800 .question-wrapper .wrapper-left-content,
    .less-800 .rank-wrapper .wrapper-left-content {
        height: 490px;
        margin: 40px;
    }
    .less-800 .question-wrapper .question-number {
        margin-bottom: 50px;
    }
    .less-800 .question-wrapper .question-img-wrapper img {
        left: -90px;
        height: 600px;
    }
    .less-800 .profile-wrapper .wrapper-question-nav {
        padding: 17px 0 13px;
    }
    .less-800 .rank-wrapper .rank-img-wrapper img {
        left: inherit;
        width: 802px;
        right: 0;
        top: -112px;
    }
    /* height 800 end */
}

@media only screen and ( min-width: 768px) {
     :focus {
        outline: none !important;
        outline-offset: 0 !important;
    }
    .wrapper-modal-content {
        display: block;
        padding: 0 20px;
    }
    .modal-content-left {
        float: left;
        width: 250px;
    }
    .modal-content-right {
        float: right;
        width: calc(100% - 250px);
    }
    .modal-content-top .modal-content-left>div {
        position: relative;
        top: 27px;
    }
    .modal-content-bottom .modal-content-left>div {
        position: relative;
        top: 25px;
    }
    .modal.en .modal-content-bottom .modal-content-left>div {
        top: 0;
    }
    .modal.en .modal-content-bottom .modal-content-right a:first-of-type {
        margin-top: 0;
    }
    .modal-header {
        padding: 25px 40px;
    }
    .modal-content-top {
        padding: 20px 0 35px;
    }
    .modal-content-bottom {
        padding: 35px 0 20px;
    }
    .modal-dialog {
        margin-top: 100px;
    }
    .result-wrapper .flow-your-preference .flow-items .item-content .text-content,
    .result-wrapper .flow-your-index .item-content .text-content {
        min-height: 205px;
    }
    .result-wrapper.en .physical_health .item-content .text-content {
        min-height: 185px;
    }
    .question-wrapper .each-question-content {
        padding-top: 30px;
        font-family: 'Arial Black', Arial;
        margin-bottom: 0;
        text-align: center;
    }
    .no-pad-right {
        padding-right: 0;
    }
    .no-pad-left {
        padding-left: 0;
    }
    .explication-wrapper .wrapper-img {
        width: 300px;
    }
    .explication-wrapper .wrapper-img-text {
        max-width: 300px;
        min-height: 312px;
    }
    .fr.explication-wrapper .wrapper-img-text {
        min-height: 330px;
    }
    .explication-wrapper .btn-nav {
        margin: 40px auto 0;
        padding: 18px 50px;
        cursor: pointer;
    }
    .intro-wrapper .left-content {
        width: 50%;
        float: right;
    }
    .intro-wrapper .right-content {
        width: 50%;
        float: left;
        height: 716px;
        position: relative;
    }
    .intro-wrapper .right-content .right-content-wrapper {
        position: absolute;
        top: 48%;
        padding: 0 65px 0 60px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
    }
    .intro-wrapper .intro-img-wrapper>img {
        position: absolute;
        left: -172px;
    }
    .question-wrapper .no-pad-left,
    .rank-wrapper .no-pad-left {
        float: right;
    }
    .question-wrapper .question-img-wrapper img {
        position: absolute;
        left: -185px;
        height: 716px;
        width: auto;
    }
    .question-wrapper .wrapper-left-content,
    .rank-wrapper .wrapper-left-content {
        margin: 60px;
        height: 596px;
    }
    .question-wrapper .wrapper-question-nav,
    .rank-wrapper .wrapper-question-nav {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .question-wrapper .question-number {
        margin-bottom: 115px;
        font-size: 13px;
        font-family: 'Arial';
        font-weight: bold;
        color: #595959;
    }
    .question-wrapper .wrapper-answer-yes li:first-child {
        margin-left: 0;
    }
    .rank-wrapper .rank-img-wrapper img {
        position: absolute;
        top: -460px;
        left: -510px;
    }
    .result-wrapper .top-content {
        padding: 60px 0 305px;
    }
    .result-wrapper {
        padding-bottom: 30px;
    }
    .result-wrapper .mid-line-title {
        height: 1px;
        position: absolute;
        background-color: #e1e1e1;
        width: 100%;
        top: 9px;
    }
    .result-wrapper .flow-items .item:last-child {
        margin-right: 0;
    }
    .result-wrapper .result-sub-wrapper {
        padding: 0 15px;
    }
    .profile-wrapper .left-content,
    .profile-wrapper .right-content {
        width: 50%;
        float: left;
    }
    .profile-wrapper .right-content {
        border-left: 1px solid #e5e5e5;
    }
    .profile-wrapper .wrapper-question-nav {
        padding: 50px 0 0;
    }
    .profile-wrapper .wrapper-left-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        width: 100%;
    }
    .profile-wrapper legend {
        padding: 0 20px;
    }
    .result-wrapper .flow-items .item {
        width: 255px;
        float: left;
        margin-right: 17px;
    }
    .result-wrapper .share-social {
        float: right;
        margin-top: 40px;
    }
    .result-wrapper .talk-with-advisor .btn-nav {
        margin: 35px auto 0;
        cursor: pointer;
    }
    .result-wrapper .talk-with-advisor .btn-nav:hover {
        text-decoration: none;
    }
    .question-wrapper legend.each-question-content span {
        display: block;
    }
}


/* 992 -> ~ */

@media only screen and ( min-width: 992px) {
    body:not(.less-800) .intro-wrapper .main-img-common {
        background-size: auto 716px;
        height: 717px;
        background-position: -105px 100%;
    }
    .result-wrapper .share-social {
        width: 190px;
        text-align: right;
    }
    .result-wrapper .talk-with-advisor p {
        padding: 0 35px;
        font-size: 16px;
    }
    .question-wrapper .wrapper-answer-yes legend {
        width: 92%;
        margin: 0 auto;
    }
    #zone-centrale {
        padding: 20px 0 80px;
    }
    body:not(.less-800) .explication-wrapper {
        padding: 42px 0 80px;
        height: 716px;
    }
    .explication-wrapper .top h4 {
        padding: 0 290px;
    }
    .explication-wrapper .wrapper-img-text:last-child {
        margin-right: 0;
    }
    .explication-wrapper .wrapper-img-text {
        margin-right: 20px;
        float: left;
    }
    .explication-wrapper .wrapper-content-img {
        display: table;
        margin: 40px auto 0;
    }
    body:not(.less-800) .intro-wrapper .intro-img-wrapper {
        height: 716px;
    }
    .question-wrapper [class^=text-color-],
    .question-wrapper legend.each-question-content span {
        padding: 0;
        line-height: 1.25em;
    }
    .question-wrapper .question-img-wrapper,
    .rank-wrapper .rank-img-wrapper {
        height: 716px;
    }
    .less-800 .profile-wrapper .left-content {
        height: 350px;
    }
    body:not(.less-800) .profile-wrapper .left-content {
        height: 412px;
    }
    .less-800 .profile-wrapper .right-content {
        padding: 25px 0;
    }
    .result-wrapper .bot-content {
        padding-top: 130px;
    }
    .result-wrapper .mid-content .wrapper-padding {
        max-width: 800px;
    }
    body:not(.less-800) .profile-wrapper .right-content {
        padding: 56px 0;
    }
}

@media only screen and ( max-width: 1024px) {
    .question-wrapper .wrapper-answer div:active label,
    .profile-wrapper .wrapper-answer.old [class^=ans-]:active label h4,
    .rank-wrapper .wrapper-answer [class^=ans-]:active label h4 {
        color: #FFF;
    }
    .question-wrapper .wrapper-answer div:active,
    .rank-wrapper .wrapper-answer [class^=ans-]:active {
        background: #00884e;
    }
    .question-wrapper .wrapper-answer-yes li:active {
        background-color: #18a566;
        color: #fff;
    }
}


/* 991 */

@media only screen and ( max-width: 991px) {
    .result-wrapper .banner img {
        max-width: 100%;
    }
    .question-wrapper .wrapper-answer-yes li {
        height: 40px;
        width: 54px;
    }
    .question-wrapper .wrapper-answer-yes li:nth-of-type(6) {
        clear: both;
        margin-left: 0;
    }
    .question-wrapper .wrapper-answer-yes li:nth-of-type(6),
    .question-wrapper .wrapper-answer-yes li:nth-of-type(7),
    .question-wrapper .wrapper-answer-yes li:nth-of-type(8),
    .question-wrapper .wrapper-answer-yes li:nth-of-type(9),
    .question-wrapper .wrapper-answer-yes li:nth-of-type(10) {
        margin-top: -1px;
    }
    .question-wrapper .question-number {
        margin-bottom: 80px;
    }
    .result-wrapper .bot-content {
        position: relative;
    }
}


/* 767 */

@media only screen and ( max-width: 767px) {
    .btn-bot-close {
        top: 20px;
        right: 20px;
    }
    .modal-content-left {
        margin-bottom: 20px;
    }
    .modal-content-top {
        padding: 0 0 20px;
    }
    .modal-content-bottom {
        padding: 20px 0;
    }
    .modal-dialog,
    .explication-wrapper .wrapper-content-img {
        margin-top: 30px;
    }
    #zone-centrale {
        padding: 10px 0 30px;
    }
    [class^=col-] {
        padding-right: 12px;
        padding-left: 12px;
    }
    .explication-wrapper .wrapper-img-text {
        margin-bottom: 20px;
    }
    .explication-wrapper .wrapper-img-text img {
        height: 150px;
        right: 0;
        width: auto !important;
    }
    .explication-wrapper .wrapper-img-text:last-child {
        margin-bottom: 0;
    }
    .explication-wrapper {
        padding: 20px 20px 40px;
    }
    .explication-wrapper .btn-nav {
        margin-top: 40px;
        padding: 18px 10px;
    }
    .profile-wrapper .wrapper-answer.gender {
        margin-top: 20px;
    }
    .intro-wrapper .btn-nav {
        margin-top: 30px;
        width: 100%;
    }
    .intro-wrapper .right-content {
        padding: 40px 20px;
    }
    .explication-wrapper .btn-nav,
    .result-wrapper .talk-with-advisor .btn-nav {
        width: 100%;
    }
    .intro-wrapper .intro-img-wrapper,
    .rank-wrapper .rank-img-wrapper {
        height: 177px;
    }
    .intro-wrapper .intro-img-wrapper {
        border-radius: 10px 10px 0 0;
    }
    .intro-wrapper .main-img-common {
        background-size: auto 200px;
        background-repeat: no-repeat;
        background-position: 100% 0px;
    }
    .intro-wrapper .intro-img-wrapper:after,
    .rank-wrapper .rank-img-wrapper:after {
        content: '';
        height: 7px;
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 8;
        background-color: #e2f1d5;
    }
    .intro-wrapper .carousel-item .item img {
        height: 56px;
        right: 59px;
        bottom: 20px;
    }
    .intro-wrapper .carousel-inner>.item {
        height: 175px;
    }
    .intro-wrapper .right-content h1 {
        position: absolute;
        top: 35px;
        max-width: 130px;
        left: 30px;
        z-index: 99;
    }
    .intro-wrapper .right-content h1 label {
        margin-bottom: 0;
    }
    .intro-wrapper .right-content h1 span:last-child {
        margin-bottom: 5px;
        color: #FFF;
    }
    .intro-wrapper.en .right-content h1 span:first-child {
        color: #FFF;
    }
    .intro-wrapper .right-content h3.sub-title {
        margin-top: 0;
    }
    .intro-wrapper .right-content p,
    .result-wrapper .mid-content .btn-nav,
    .question-wrapper .wrapper-left-content .each-question-content {
        margin-top: 20px;
    }
    .question-wrapper .wrapper-left-content .each-question-content {
        padding-top: 20px;
        margin-bottom: 0;
    }
    .result-wrapper .mid-content .btn-nav {
        width: 100%;
    }
    .question-wrapper .question-img-wrapper img {
        position: absolute;
        right: 0;
        width: 210px;
    }
    .wrapper-question-nav {
        margin-top: 60px;
    }
    .question-wrapper .wrapper-answer-yes li:nth-of-type(6) {
        margin-left: -1px;
    }
    .question-wrapper .question-number {
        position: absolute;
        top: 15px;
        left: 30px;
        font-size: 12px;
        font-weight: bold;
    }
    .question-wrapper .wrapper-left-content {
        display: table;
        padding: 60px 20px 30px;
        width: 100%;
        position: static;
    }
    .question-wrapper .wrapper-left-content h3 {
        font-size: 18px;
        font-family: 'Arial Black', Arial;
    }
    .question-wrapper .no-pad-right {
        position: static;
    }
    .question-wrapper .question-img-wrapper {
        height: 178px;
    }
    .question-wrapper .wrapper-answer-yes p {
        margin-bottom: 0;
        margin-top: 30px;
    }
    .result-wrapper .result-sub-wrapper {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
    .result-wrapper .wrapper-point-content ul {
        padding: 0;
        padding-top: 15px;
    }
    .result-wrapper .wrapper-point-content li {
        margin-bottom: 10px;
    }
    .result-wrapper .number-point {
        font-size: 200px;
    }
    .result-wrapper .top-content {
        padding: 40px 0 320px;
    }
    .result-wrapper .bot-content {
        padding-top: 210px;
    }
    .result-wrapper .flow-items .item {
        float: none;
        margin: 15px auto 0;
    }
    .result-wrapper .share-social ul {
        padding-left: 10px;
    }
    .result-wrapper .flow-items .item:first-child,
    .result-wrapper .wrapper-point-content {
        margin-top: 0;
    }
    .result-wrapper .additional-items .text-content {
        padding: 0 0 0 15px;
        width: calc(100% - 150px);
        height: 100px;
        position: relative;
    }
    .result-wrapper .additional-items .text-content h4 {
        font-size: 14px;
        max-height: 55px;
        overflow: hidden;
        line-height: 19px;
        margin-top: 7px;
    }
    .result-wrapper .additional-items .text-content a {
        position: relative;
        bottom: 0;
    }
    .result-wrapper .additional-items .item {
        display: table;
        width: 100%;
    }
    .result-wrapper .mid-content .wrapper-padding {
        border-radius: 0;
        width: calc(100% - 40px);
        left: 20px;
        border-radius: 10px;
    }
    .result-wrapper .mid-content .padding {
        padding: 30px 20px 20px;
    }
    .result-wrapper {
        padding-bottom: 40px;
    }
    .result-wrapper .img-content img {
        position: static;
        width: 100%;
        margin: -10% 0;
    }
    .result-wrapper .item-content .img-content {
        height: auto;
    }
    .result-wrapper .flow-items {
        margin-top: 15px;
    }
    .result-wrapper .talk-with-advisor>h4 {
        line-height: 27px;
        margin-bottom: 20px;
    }
    .result-wrapper .talk-with-advisor {
        padding-top: 45px;
    }
    .result-wrapper .talk-with-advisor .btn-nav {
        margin-top: 25px;
    }
    .result-wrapper .banner {
        margin: 30px 0 55px;
    }
    .profile-wrapper {
        padding: 40px 20px;
    }
    .profile-wrapper .left-content {
        padding: 0 0 45px;
        border-bottom: 1px solid #e5e5e5;
        height: auto !important;
    }
    .profile-wrapper .right-content {
        padding-top: 20px;
        height: auto !important;
    }
    .profile-wrapper .top-content p,
    .profile-wrapper .wrapper-answer.old [class^=ans-]:first-child {
        margin-top: 20px;
    }
    .profile-wrapper .top-content {
        padding-bottom: 25px;
    }
    .profile-wrapper h3.title {
        font-size: 18px;
    }
    .result-wrapper .share-social {
        float: left;
        margin-top: 15px;
    }
    .rank-wrapper .rank-img-wrapper img {
        position: absolute;
        right: 0;
        width: 200px;
    }
    .rank-wrapper .wrapper-left-content {
        padding: 40px 20px;
    }
    .result-wrapper .additional-items .img-content img {
        margin: 0;
    }
}


/* 600 */

@media only screen and ( max-width: 599px) {
    .result-wrapper .number-point {
        width: 100%;
        position: static;
    }
    .result-wrapper .wrapper-point-content li span:not(.circle-point-number) {
        font-size: 12px;
    }
    .result-wrapper .wrapper-point-content li span.circle-point-number {
        font-size: 16px;
    }
    .result-wrapper .img-content img {
        margin: 0;
    }
    .result-wrapper .item-content .img-content {
        height: auto;
    }

    a:focus {
        outline: none !important;
        outline-offset: 0 !important;
    }
}

@media only screen and ( max-width: 424px) {
    .rank-wrapper [class^=nav-question-] {
        letter-spacing: 1px;
    }
    .result-wrapper .mid-content .padding [class^=nav-question-] {
        letter-spacing: 0.6px;
        font-size: 9px;
        margin-right: 0px;
    }
    .result-wrapper .mid-content .padding .nav-question-prev span {
        margin-left: 5px;
    }
    .result-wrapper .mid-content .padding .nav-question-prev span {
        padding-right: 14px;
    }
    .result-wrapper .mid-content .padding .prev-links .nav-question-next span:after {
        bottom: 1px;
    }
}


/* 479 */

@media only screen and ( max-width: 380px) {
    .rank-wrapper.fr .nav-question-next {
        margin-bottom: 25px;
    }
    .result-wrapper .wrapper-point-content li:before {
        width: 55px;
    }
}


/* 223 */

@media only screen and ( min-width: 768px) and ( max-width: 991px) {
    #zone-centrale {
        padding: 20px 0 20px;
    }
    .explication-wrapper {
        padding: 30px 0 30px;
    }
    .explication-wrapper .top h2 {
        padding: 0 20px;
    }
    .explication-wrapper .top h4,
    .explication-wrapper .top p.description {
        padding: 0 40px;
    }
    .explication-wrapper .wrapper-text,
    .result-wrapper .item-content .text-content {
        padding: 20px;
    }
    .explication-wrapper .wrapper-text {
        min-height: 210px;
    }
    .explication-wrapper .wrapper-img-text {
        width: 220px;
        margin-right: 10px;
        float: left;
    }
    .explication-wrapper .wrapper-img-text:last-child {
        margin-right: 0;
    }
    .explication-wrapper .wrapper-content-img {
        display: table;
        margin: 30px auto;
    }
    .explication-wrapper .wrapper-img-text img {
        right: 80px;
    }
    .intro-wrapper .main-img-common {
        height: 600px;
        background-size: auto 601px;
        background-position: -140px 0;
    }
    .intro-wrapper .carousel-item .item img {
        height: 177px;
        right: 73px;
        width: auto;
        bottom: 240px;
    }
    .intro-wrapper .intro-img-wrapper {
        height: 600px;
    }
    .intro-wrapper .right-content .right-content-wrapper {
        padding: 0 30px;
    }
    .intro-wrapper .right-content {
        height: 600px;
    }
    .intro-wrapper .right-content h1 {
        font-size: 19px;
    }
    .intro-wrapper .right-content h4.sub-title {
        font-size: 16px;
    }
    .intro-wrapper .right-content p {
        font-size: 14px;
    }
    .question-wrapper .wrapper-left-content {
        margin: 40px 20px;
    }
    .question-wrapper .question-img-wrapper {
        min-height: 676px;
    }
    .question-wrapper .question-img-wrapper img {
        height: 600px;
        left: -200px;
    }
    .question-wrapper .question-img-wrapper.question-id-1 img {
        top: 80px;
        left: -220px;
    }
    .question-wrapper .question-img-wrapper.question-id-2 img {
        height: 700px;
        left: -235px;
    }
    .question-wrapper .question-img-wrapper.question-id-3 img {
        height: 680px;
        left: -210px;
    }
    .question-wrapper .question-img-wrapper.question-id-4 img {
        height: 677px;
        left: -253px;
    }
    .question-wrapper .question-img-wrapper.question-id-5 img {
        height: 676px;
        left: -276px;
    }
    .question-wrapper .question-img-wrapper.question-id-6 img {
        height: 676px;
        left: -304px;
    }
    .question-wrapper .question-img-wrapper.question-id-7 img {
        height: 677px;
        left: -245px;
    }
    .question-wrapper .question-img-wrapper.question-id-8 img {
        height: 676px;
        left: -282px;
    }
    .question-wrapper .question-img-wrapper.question-id-9 img {
        height: 676px;
        left: -257px;
    }
    .question-wrapper .question-img-wrapper.question-id-10 img {
        height: 676px;
        left: -218px;
    }
    .profile-wrapper .top-content p {
        padding: 15px 0 0;
    }
    .profile-wrapper .right-content {
        padding: 30px 0;
    }
    .profile-wrapper .left-content {
        height: 386px;
    }
    .rank-wrapper .rank-img-wrapper {
        height: 660px;
    }
    .rank-wrapper .wrapper-left-content {
        margin: 30px;
        height: 600px;
    }
    .rank-wrapper .rank-img-wrapper img {
        position: absolute;
        top: 0px;
        left: inherit;
        right: 0;
        width: 567px;
    }
    .rank-wrapper [class^=nav-question-] {
        font-size: 9px;
    }
    .result-wrapper .result-sub-wrapper {
        width: 100%;
    }
    .result-wrapper .flow-items .item {
        display: inline-block;
        width: 220px;
        margin-right: 15px;
    }
    .result-wrapper .flow-items .item:last-child {
        margin-right: 0;
    }
    .result-wrapper .mid-content .wrapper-padding {
        max-width: 690px;
        top: -200px;
    }
    .result-wrapper .mid-content .padding {
        padding: 30px;
    }
    .result-wrapper .top-content {
        padding: 60px 0 230px;
    }
    .result-wrapper .bot-content {
        padding-top: 120px;
    }
    .result-wrapper .number-point {
        font-size: 160px;
    }
    .question-wrapper legend.each-question-content span {
        font-size: 23px;
    }
}


/* 207 */

@media only screen and ( min-width: 992px) and ( max-width: 1199px) {
    .explication-wrapper .wrapper-img-text {
        margin-right: 15px;
    }
    .question-wrapper .wrapper-answer-yes li label {
        width: 34px;
        height: 34px;
        padding-top: 7px;
    }
    .less-800 .intro-wrapper .carousel-item .item img {
        right: 66px;
        width: 183px;
        height: auto;
        bottom: 153px;
    }
    body:not(.less-800) .intro-wrapper .carousel-item .item img {
        right: 66px;
        width: 184px;
        height: auto;
        bottom: 152px;
    }
    .intro-wrapper .intro-img-wrapper {
        height: 716px;
    }
    .intro-wrapper .main-img-common {
        background-size: auto 716px;
        height: 717px;
        background-position: -105px 100%;
    }
    .explication-wrapper .top h2,
    .explication-wrapper .top p.description {
        padding: 0 100px;
    }
    .profile-wrapper .top-content p {
        padding: 15px 150px 0;
    }
}

.img_logo:focus,
h2,
legend:focus,
.message-error,
h2 span {
    outline: none !important;
    outline-offset: 0 !important;
}