@font-face {
  font-family: Freight Sans Medium;
  src: url('../fonts/Freight Sans Medium/Freight Sans Medium.otf');
}
@font-face {
  font-family: Freight Sans Bold;
  src: url('../fonts/Freight Sans Bold/Freight Sans Bold.otf');
}

html, body {
    font-size: 120%;
    font-family: "Freight Sans Medium";
    color: rgb(112,112,112);
}
.container-fluid {
    padding: 0px;
}
.top {
    position: fixed;
    top: 0px;
    width: 100%;
    
    padding: 0px 38px;
    
    z-index: 1000;
    
    margin: auto;
    
    background-color: rgb(254,196,0);
    
    height: 58px;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: black;
}
.top h1 {
    font-family: "Freight Sans Bold";
}
.top .title {
    max-width: 180px;
}
.top .title img {
    width: 100%;
    height: auto;
}
.empty-top {
    height: 58px;
    margin-bottom: 80px;
}

.row h1 {
    font-family: "Freight Sans Bold";
    font-size: 40px;
    border-bottom: 3pt solid rgb(253,196,1);
    display: table;
}

h2.underlined {
    border-bottom: 6px solid rgb(253,196,1);
    color: black;
    display: inline-block;
}

.row {
    max-width: 900px;
    margin: auto;

}

@media all and (max-width: 700px) {
    html, body {
        font-size: 110%;
    }
}
/*
--------------------------------------------------
General style
*/
.centered {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.souligne {
    border-bottom: 3pt solid rgb(253,196,1);
}
p, label {
    font-family: "Freight Sans Medium";
/*    font-size: 22px;*/
    font-size: 95%;
    color: rgb(112,112,112);
    font-weight: normal;
}
h2.intermediaire.noir {
    color: black;
    font-family: "Freight Sans Bold";
/*    font-size: 40px;*/
}
.attention {
    font-size: 80%;
    color: #f40018;
}
.gras {
    font-family: "Freight Sans Bold";
    color: rgb(112,112,112);
}
.gras.bigger {
    font-size: 30px;
}
.clair {color: #d8d8d8;}
label {margin-left: 16px;}
.ligne-reponse label {
    margin-bottom: 0px;
    position: relative;
    top: -6px;
}
.note-gauche {
    text-align: right;
    padding-right: 15px;
    font-size: 80%;
}
.note-droite {
    text-align: left;
    padding-left: 15px;
    font-size: 80%;
}
.avancement {
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 10px;
    width: 100%;
}
.avancement .barre{
    background-color: #fec400;
    height: 10px;
    width: 10%;
}

.bandeau {
    background-color: rgb(248,247,242);
    height: 400px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    margin-top: 50px;
    text-align:center;
    padding-top: 20px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.bandeau h2 {
    font-family: "Freight Sans Bold";
    font-size: 40px;
    border-bottom: 3pt solid rgb(253,196,1);
    display: table;
}

.bandeau img{
    height: 100%;
}
.sous-bandeau img {
    position: absolute;
    bottom: 0;
    right: 10%;
    height: 420px;
    width: auto;
}
.image-titre {
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.image-titre img{
    width: 70%;
}
p.final {
    margin-top: 26px;
    
}
/*
---------------------------------------------------------------
Custom Radio and Checkbox (with text and images)
*/

.radio-img.radio {
    height:260px;
    background-color: rgb(252, 252, 250);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 70px 1fr 1fr;
}
.radio-img .tete {
    grid-column: 1/3;
    grid-row: 1;
    background-color: rgb(254,196,0);
    color: #ffffff;
    font-weight: bold;
    padding: 30px 10px 10px 10px;
    border-radius: 6px;
}
.radio-img .description{
    grid-row: 2/3;
    grid-column: 1;
    padding: 10px;
    font-weight: normal;
    font-size: 70%;
}
.radio-img .personnage {
    grid-row: 1/3;
    grid-column: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.radio-img .personnage img {
    height: 260px;
    width: auto;
}

.radio-img .img-droite {padding-right: 100px;}
.radio-img .img-gauche {padding-left: 100px;}

.radio-img.check {
    width: 100%;
    height: 230px;
    background-color: rgb(252, 252, 250);
    border-radius: 10px;
}
.radio-img.check .image {
    height: 70%;
    width: 100%;
    position: relative;
    text-align:center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.radio-img.check.risks .image {
    height: 50%;   
}
.radio-img.check .image img {
    height: 70%;
    width: auto;
}

.radio-img.check .image.sdg {
    width: auto;
    height: 90%;
}

/*
.radio-img.check.risks .image img {
    height: 10%;
    width: auto;
}
*/

.radio-img.check .texte {
    text-align: center;
    font-size: 70%;
    font-weight: normal;
}

.radio-img.radio {
/*
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
   -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);
*/
}
.custom-radio input:active +.radio-img, .custom-check input:active +.radio-img{
/*    opacity: .9;*/
}
/*.custom-radio input:checked +.radio-img, */
.custom-check input:checked +.radio-img, 
.custom-radio-other input:active +.radio-img,
.custom-radio input:checked +.radio-img,
.custom-check input:checked +.radio-img:hover, 
.custom-radio-other input:active +.radio-img:hover,
.custom-radio input:checked +.radio-img:hover{
    border: 4px solid rgb(254,196,0);
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    background-color: rgb(248,247,242);
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

.custom-check input +.radio-img, 
.custom-radio-other input +.radio-img {
    border: 4px solid rgb(252, 252, 250);
}

.custom-check input +.radio-img:hover, 
.custom-radio-other input +.radio-img:hover{
    border: 4px solid rgb(248,247,242);
}

.custom-radio input +.radio-img {
    border: 4px solid #ffffff;
}
.custom-radio input +.radio-img:hover {
    border: 4px solid #ffffff;
}
.custom-check {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    grid-template-rows: auto;
    grid-gap: 20px;
}

.custom-radio {
    display: grid;
/*    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));*/
    grid-template-columns: repeat(auto-fill, 260px);
    grid-template-rows: auto;
    grid-gap: 20px;
}

@media all and (max-width: 700px) {
    .custom-check {
        grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    }
}
/*
----------------------------------------------------------
Images on sliders
*/
.slider-img {
    height: 80px;
    width: auto;
    position: relative;
    z-index: 100;
}
.slider-img.gauche{
    right: -50%;
}
.slider-img.droite{
    left: -50%;
}

.grosse-slider{
    height: 150px;
    z-index: 100;
    display: flex;
    flex-direction: row;
}
.grosse-slider.g{
    justify-content: flex-end;
}
.grosse-slider.d{
    justify-content: flex-start;
}
.gros-slider {
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.milieu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
}

/*
------------------------------------------------------------------------------------------------------------------
Menu
*/

.menu ul, .menu-small ul{
    margin: 0;
    padding: 0px;
    list-style: none;
}
.menu-large ul{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.menu-large ul li {
    margin-right: 20px;
    cursor: pointer;
}
.menu .fa {
    display: none;
}
.page-menu, .menu-small {
    height: 100%;
}
.menu-small ul {
    padding-left: 15%;
}
.menu-small ul li {
    margin-bottom: 10%;
}
.menu-small ul li span {
    color: black;
    border-bottom: 4px solid white;

}    
@media all and (max-width: 700px) {
    .menu-small{
        background-color: rgb(254,196,0);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .menu-large {
        display: none;
    }
    .menu .fa {
        display: inline;
    }
}
.bottom-menu-small {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.close-menu {
    border-radius: 50%;
    width: 76px;
    height: 76px;
    background-color: white;
    color: rgb(254,196,0);
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    font-size: 54px;
}
/*
------------------------------------------------------------------------------------------------------------------
Pages
*/
.page-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 999;
}

.page {

}

/*
------------------------------------------------------------------------------------------------------------------
Navigation
*/
.arrow-nav-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.compteur {
    margin: 0px 10px;
}
.arrow-nav {
    flex: 0 1 auto;
    height: 41px;
    width: 41px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
}
.arrow-nav.right img:hover, .arrow-nav.left img:hover{
    height: 100%;
    width: auto;
}

.arrow-nav.right {
    width: 76px;
    height: 76px;
}

.arrow-nav img {
    height: 90%;
    width: auto;
    transition: height 0.2s, width 0.2s;
    cursor: pointer;
}


/*
--------------------------------------------------------------------------------------------------------------------
Inputs
*/

/* Text */
input[type="text"].form-control {
    border-width: 0px 0px 4px 0px;
    border-radius: 0px;
    border-color: rgb(254,207,47);
    box-shadow: unset;
    font-size: inherit;
}

/* Radio 
From MDN : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
*/

.custom-radio-small div, .custom-checkbox div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
.custom-radio-small label {
  margin-right: 15px;
  line-height: 32px;
}

.custom-checkbox label {
    margin-right: 15px;
/*    line-height: 32px;*/
}

.custom-radio-small input, .custom-checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

    flex: 0 0 auto;
    
  border-radius: 50%;
  width: 36px;
  height: 36px;

  border: 2px solid rgb(254,196,0);
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;

  position: relative;
  top: 0fpx;
}
.custom-checkbox input {border-radius: 0px;}

.custom-radio-small input:checked, .custom-checkbox input:checked {
  border: 18px solid rgb(254,196,0);
}
 

.custom-checkbox input[type="text"].other-text, .custom-radio-small input[type="text"].other-text {
    border-width: 0px 0px 4px 0px;
    border-radius: 0px;
    border-color: rgb(254,207,47);
    box-shadow: unset;
    font-size: inherit;
    
    min-width: 400px;
}

/* Slider */

.tick-parent {
    display: flex; 
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    
    background-color: aqua;
}
.tick {
    height: 30px;
    border: 1px solid black;
    flex-grow: 1;
}

.slide-env {
    padding-left: 20px;
    padding-right: 20px;
    
    margin: auto;
    margin-top: 138px; /* To account for the fixed menu bar */
}


.range-level {
    margin: 0;
    padding: 0;
}
.slide-env.visible {
    display: block;
}

.slide-env .inside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    width: 100%;
    height: 100%;
}

.slide-env .inside .illustration {
    max-width: 300px;
    margin-bottom: 60px;
}

.slide-env .inside .question:not(.prems) {
    margin-top: 60px;
}

.custom-choice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-group div {position: relative;}
.action-order {
    position: absolute;
    top: 6px;
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

input[type="range"].no-top-margin {
    position: relative;
    top: -10px;
    margin: 0px 0 18px 0;
/*    z-index: 1000;*/
}
.slider-image {
    width: 100%;
    height: 130px;
    display: flex;
    flex-direction: row;
    justify-content: center;
/*    background-color: aqua;*/
    position: relative;
    top: 20px;
/*    z-index: 0;*/
}
.slider-image img {
    height: 100%;
    width: auto;
}


/* Graduations pour slider */

.grille-slider {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 4fr 1fr;
}

.graduations {
    padding: 0 25px 0 25px;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 0 1fr 0 1fr 0 1fr 0 1fr 0;
}
.grad {
    background-color: aqua;
    display:flex;
    flex-direction: row;
    justify-content: center;
}
.graduations-texte .slider-annotations{
    padding: 0 25px 0 25px;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}

.graduations-texte .slider-annotations div {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

.first{
}
.second{animation-delay: 0.5s;}
.third{animation-delay: 1s;}
.fourth{animation-delay: 1.5s;}
.rank0{}
.rank1{animation-delay: 0.5s;}
.rank2{animation-delay: 1s;}
.rank3{animation-delay: 1.5s;}
.rank4{animation-delay: 2s;}
.rank5{animation-delay: 2.5s;}

.answers {
    margin-top: 20px;
    margin-bottom: 30px;
}

.image-seule {
    width: 100%;
    height: auto;
}