/*-------------------SECTION ETIQUETTES -------------------*/
#etiquettes {
    display: inline-flex;
    position: absolute; 
    left: 0;
    height: 100vh;
    overflow-y: scroll;
    background: #83d5be;
}


#zone1, #zone2 {min-height: 100vh;}
#zone1, html {background-color: #83d5be;}
#zone2 {background-color: #83d5be;}

#etiquettes h1 {font-size: calc(20px + 2vw); font-family: Avalanche, arial; color: #f8f7fc; text-align: center; }
#etiquettes h2 {font-size: calc(20px + 1vw); font-family: Avalanche, arial; color: #f8f7fc; text-transform: uppercase;}
#etiquettes-xs h2 {font-size: 0;}
#etiquettes h3 {font-size: 1.3rem; font-family: Avalanche, arial; color: #f8f7fc;}

.titre {width: 100%; padding: 0.5rem 0 0 0; text-align: center}
.competence {width: 100%; padding: 0.5rem 1vw; border-top: 2px solid #f8f7fc;}
.formation, .experience {width: 100%; padding: 0.5rem 1vw; border-top: 2px solid #f8f7fc;}
.savoir-etre, .presentation, .loisirs {width: 100%; padding: 0.5rem 1vw;}

.etiquette{
    cursor: grab;
    margin: 5px;
    padding: 3px;
    background-color: #f8f7fc;;
    border-radius: 5px;
    border: 2px solid transparent;
}

.indication {
    margin-top: 5vh;
    color: #eda0cf;
    font-size: 40px;
}


.etiquettePresentation {
    display: flex;
    cursor: no-drop;
    background-color: #f8f7fc;;
    border-radius: 5px;
    border: 10px solid transparent;
    margin: 5px auto;
    max-width: 350px;
}

.fa-ban {color: red;}

.support {background: #83d5be;}

.moove {color: #ccc;}
.moove .etiquette-picto {opacity: 0.4;}

.etiquette-no{
    margin: 5px;
    padding: 5px;
    background-color: #f8f7fc;
    border-radius: 5px;
    cursor: no-drop;
}

.etiquette-picto {
    height: 1.1rem;
    pointer-events: none;
}

.etiquette .fa,.etiquette .fab,.etiquette .fad,.etiquette .fal,.etiquette .far,.etiquette .fas {
    line-height: 1.5;
}

.etiquette-no .fa,.etiquette-no .fab,.etiquette-no .fad,.etiquette-no .fal,.etiquette-no .far,.etiquette-no .fas {
    line-height: 1.5;
}
/*-------------------END SECTION ETIQUETTES-------------------*/


/*-------------------SECTION CONTENU-------------------*/
.fa-fish {color: #ccc;}
.fa-oui {color: #e7b92d;}

.separation {border-top: 3px solid #83d5be;}
.trait {width: 100%; border-top: 1px solid #ccc; text-align: left;}

.contenu h3 {width: 100%; margin:0; border-top: 1px solid #ccc; color: #83d5be; text-align: left}
.contenu .row:nth-child(1) h3 {border-top: 0px solid #ccc;}

.contenu ul {text-align:left;}

.myFont {font-family: Avalanche, arial;}

.contenu p span {font-weight: 700;}
.contenu li span {font-weight: 700;}
.contenu .info {color: #888;}

.office {
    display: inline-flex;
    width: 100%;
    margin: 10px 0;
    padding: 10px 2px;
}

.office p {border-radius: 10px; color: #f8f7fc;}
.office:nth-child(1) p{background: #5490f2;}
.office:nth-child(2) p{background: #269e61;}
.office:nth-child(3){background: #f1b638;}
.office:nth-child(4){background: #6138b0;}
.office:nth-child(5){background: #d4443b;}

.expe, .expe-no {
    box-shadow: 2px 2px 2px #ccc;
    padding: 0 3px;
    margin: 3px;
    line-height: 2;
    white-space: nowrap;
    border: 2px solid transparent;
    cursor: default;
}

.surligne {
    box-sizing: content-box;
    border: 2px solid #4698b7;
    color: #f8f7fc;
    background-color: #4698b7;
}

.cresca { min-height: 58px;}


.demo {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: 1s 0s all;
    overflow: hidden;
}

.hide {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
}

.hideShow {
    font-size: 20px;
    height: 50px;
    width: 50px;
    background: #4698b7;
    color: #f8f9fa;
    text-align: center;
    position: absolute;
    transition: 0.4s 0s all;
    border: none;
}

.demo-show > .fa-times, .demo-hide > .fa-arrow-up {display: none;}
.demo-show > .fa-arrow-up, .demo-hide > .fa-times {display: block;}

.demo-hide {top: 10vh; left: 75vw;}
.demo-show{top: 0; left: 0;}
.demo-show i {transform: rotate(-45deg)}


.demo .myVideo{
    position: absolute;
    width: 50vw;
    height: auto;
    top: 10vh;
    left: 25vw;
    text-align: center;
}

.demo video {
    width: 100%;
    height: auto;
}
/*-------------------END SECTION CONTENU-------------------*/

/*-------------------PROFILE 4-------------------*/
.profil-disponible .portion {position: relative; width: 100%; padding-bottom: 20px; font-family: Avalanche, arial;}
.profil-disponible .rouge::after{background: #ed6e8c;}
.profil-disponible .orange::after{background: #eda0cf;}
.profil-disponible .vert::after{background: #8dccbc;}
.profil-disponible .vertfonce::after{background: #5eca8c;}

.profil-disponible .portion::after {content:""; position: absolute; left: 0; bottom: 0px; height: 20px; width: 0;}
.profil-disponible .jauge :nth-child(1n)::after {animation: jauge 0.5s 0s linear forwards;}
.profil-disponible .jauge :nth-child(2n)::after {animation: jauge 0.5s 0.5s linear forwards;}
.profil-disponible .jauge :nth-child(3n)::after {animation: jauge 0.5s 1s linear forwards;}
.profil-disponible .jauge :nth-child(4n)::after {animation: jauge 0.5s 1.5s linear forwards;}
.profil-disponible .jauge :nth-child(5n)::after {animation: jauge 0.5s 2s linear forwards;}
@keyframes jauge {0% {width: 0%;} 100% {width: 100%;} }
/*-------END ------------PROFILE 4-------------------*/