/*
 __                        ___  ____                    __      
/\ \                     /'___\/\  _`\   __          __/\ \__   
\ \ \___   _ __    __   /\ \__/\ \ \/\ \/\_\     __ /\_\ \ ,_\  
 \ \  _ `\/\`'__\/'__`\ \ \ ,__\\ \ \ \ \/\ \  /'_ `\/\ \ \ \/  
  \ \ \ \ \ \ \//\ \L\.\_\ \ \_/ \ \ \_\ \ \ \/\ \L\ \ \ \ \ \_ 
   \ \_\ \_\ \_\\ \__/.\_\\ \_\   \ \____/\ \_\ \____ \ \_\ \__\
    \/_/\/_/\/_/ \/__/\/_/ \/_/    \/___/  \/_/\/___L\ \/_/\/__/
                                                 /\____/        
                                                 \_/__/         
	===================================================================
	±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±
	## CSS ##
	2020-2024 © Achraf (aka hrafDigit)
	https://www.achrafely.fr
		https://codepen.io/hraf
		https://github.com/hrafdigit
	made w/ ¶ from Paris, France [at] Grand Jardin Digital
		https://www.grandjardindigital.fr
	±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±
	================================================================== 
*/

/*
!! NOTE about @import !!
La règle @ @import est utilisée afin d'importer des règles 
à partir d'autres feuilles de style. Ces règles @ doivent être utilisées AVANT toutes les autres règles, 
à l'exception de @charset. @import n'est pas une instruction imbriquée et ne peut donc pas être utilisée 
à l'intérieur de groupe de règles conditionnelles.
*/


/* ========================
	>>> START FONTS IMPORTS
	============================== */
   /* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */
	@import "../../../fonts/typo.css";
/* ========================================
	END FONTS IMPORTS <<<
	====================== */


/* =======================
	>>> START HRAF IMPORTS
	=========================== */
/* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */
/* =========================
	END MY IMPORTS <<<
	=================== */


/* =============================
	>>> START  
	================================== */
:root {
    --outterMargin: 16px;
}

#resume__app-main h2 {
    width: calc(100% - 16px*2);
    height: 24px;
    display: flex;
    align-self: center;
    position: relative;
    margin: 0 auto;
    padding: 0;
    color: #656969;
    font-size: 16px;
    font-family: 'breelight';
    font-weight: 300;
    font-style: normal;
    /* font-display: swap; */
}
#resume__app-main h2::before {
    content: '';
    width: 30%;
    height: 3px;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    padding: 0;
    /* border: solid 2.5px rgba(53, 129, 218, 1); */
    border-radius: 8px;
    background-color: rgba(53, 129, 218, 1);
}
#resume__app-main_content{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#primary_experiences,
#secondary_experiences,
#primary_educations,
#secondary_educations,
#primary_skills,
#primary_varias {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    /* background-color: fuchsia; */
}
#primary_experiences:not(.customHeight),
#primary_educations:not(.customHeight),
#primary_skills:not(.customHeight),
#primary_varias:not(.customHeight) {
    max-height: 184px;
    margin: 16px 0 0;
}
/* #primary_experiences.customHeight {
    margin: 16px 0;
} */
/* #primary_experiences #sliderMicro__skillsMajor {
    max-height: 284px;
    margin: 0 0 16px 0;
} */
#secondary_experiences,
#secondary_educations {
    max-height: 96px;
    margin: 0 0 16px 0;
}

#misc__varia-fakeAuthenticate {
    min-width: 272px;
    /* min-height: 320px; */
    /* min-height: 176px; */
    min-height: 280px;
    display: flex;
    flex-direction: column;;
    /* background-color: fuchsia; */
}

#misc__varia-fakeAuthenticate p {
    min-width: 272px;
    max-width: 272px;
    max-height: 16px;
    margin: 8px auto;
    font-family: 'breelight';
    font-size: 12px;
    font-weight: normal;
    text-align: center;
}

ul.misc__varia-fakingUserDatas {
    width: 100%;
    height: auto;
    max-width: 272px;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 8px auto;
    padding: 0;
    transition: transform 0.5s ease-in-out;
    /* background-color: tomato; */
}
li.misc__varia-fakingUserDatasBody {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
}
ol.misc__varia-fakingUserDatasItems {
    width: 100%;
    position: relative;
    min-width: 100%;
    display: flex;
    /* align-items: center; */
    align-items: flex-end;
    margin: 0 0 16px 0;
    padding: 0;
}
ul.misc__varia-fakingUserDatas li ol>input[type="email"],
ul.misc__varia-fakingUserDatas li ol>input[type="password"] {
    width: 100%;
    height: 32px;
    margin: 0 auto;
    padding: 8px;
    box-sizing: border-box;
    border: solid 1px rgba(24, 91, 167, .26);
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
    font-size: 13px;
    letter-spacing: 1px;
    background-color: rgba(122, 161, 226, .04);
    /* background-color: transparent; */
    /*background-color: lawngreen;*/
}
ul.misc__varia-fakingUserDatas li ol > .label__input-textEmail,
ul.misc__varia-fakingUserDatas li ol > .label__input-textPassword {
    position: absolute;
    top: 8px;
    left: 12px;
    padding: 0 8px 0 8px;
    color: rgba(111, 125, 149, .24);
    /* color: rgba(24, 91, 167, .64); */
    font-size: 13px;
    pointer-events: none;
    transform-origin: left center;
    transition: transform 250ms;
    /* background-color: transparent; */
}
ul.misc__varia-fakingUserDatas li > input[type="submit"]{
    width: 100%;
    /* height: 48px; */
    max-width: 272px;
    min-height: 40px;
    max-height: 40px;
    position: relative;
    bottom: 0;
    margin: 0;
    padding: 0;
    cursor: default;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    border-radius: 4px;
    border: solid 1.5px rgba(108, 135, 167, .24);
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
    transition: none;
    color: rgba(111, 125, 149, .24);
    font-size: 21px;
    font-family: 'Titillium Web';
    font-weight: 600;
    font-style: normal;
    letter-spacing: 1px;
    background-color: rgba(122, 161, 226, .04);
}


/* --------------------- */
/* --- START SLIDERS --- */
/* --------------------- */

/* --- sliderMini-base  --- */
#sliderMini__experiencesMinor,
#sliderMini__educationsMinor {
    width: auto;
    height: 100%;
    position: relative;
    left: 16px;
    overflow: hidden;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: lightblue transparent;
    /* background-color: lightsalmon */
}
#sliderMini__experiencesMinor::-webkit-scrollbar,
#sliderMini__educationsMinor::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 0;
    background: transparent;
}
#sliderMini__experiencesMinor::-webkit-scrollbar-thumb,
#sliderMini__educationsMinor::-webkit-scrollbar-thumb {
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background: rgba(24, 91, 167, .88);
}
#sliderMini__experiencesMinor::-webkit-scrollbar-track,
#sliderMini__educationsMinor::-webkit-scrollbar-track {
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(24, 91, 167, .64);
    background-color: rgba(24, 91, 167, .16);
    /* background-color: rgba(0, 0, 0, .24); */
    /* background-color: rgba(255, 255, 255, .16); */
}
#sliderMini__experiencesMinor::-webkit-scrollbar-button,
#sliderMini__educationsMinor::-webkit-scrollbar-button {
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background-color: rgba(24, 91, 167, 1);
}

#sliderMini__experiencesMinor.transition,
#sliderMini__educationsMinor.transition {
    transition: left 0.3s ease-out, right 0.3s ease-out;
}
/* --- END sliderMini-base  --- */


/* --- sliderMicro-base  --- */
#sliderMicro__experiencesMajor,
#sliderMicro__educationsMajor,
#sliderMicro__skillsMajor {
    width: auto;
    height: 100%;
    position: relative;
    margin: 0 0 0 16px;
    padding: 0;
    overflow: hidden;
    /* background-color: lightsalmon */
}

#sliderMicro__experiencesMajor.marginLeftOnScroll,
#sliderMicro__educationsMajor.marginLeftOnScroll,
#sliderMicro__skillsMajor.marginLeftOnScroll {
    margin: 0;
}

#sliderMicro__experiencesMajor.marginRightOnScroll,
#sliderMicro__educationsMajor.marginRightOnScroll,
#sliderMicro__skillsMajor.marginRightOnScroll {
    margin: 0 16px 0 0;
    transition: margin 0.1s ease-in-out;
}
/* --- END sliderMicro-base --- */

/* --- sliderMicro-base  --- */
ul#experiences__major,
ul#educations__major,
ul#skills__major {
    width: 100%;
    height: 100%;
    display: flex;
    /* flex-direction: row; */
    /* flex-wrap: nowrap; */
    /* justify-content: flex-start; */
    /* align-items: center; */
    position: relative;
    margin: 0;
    padding: 0;
    /* background-color: cadetblue; */
}
ul#experiences__major,
ul#educations__major {
    overflow: hidden-x;
}
/* ul#skills__major {
    background-color: cadetblue;
} */
ul#experiences__major.marginLeftOnScroll,
ul#educations__major.marginLeftOnScroll,
ul#skills__major.marginLeftOnScroll {
    margin: 0 0 0 16px;
}
.experience__major,
.education__major,
.skill__major {
    width: auto;
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    /* display: inline-block; */

    padding: 0;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    /* cursor: pointer; */
    /* background-color: gray; */
}
.experience__major {
    min-width: 300px;
    max-width: 300px;
    margin: 0 16px 0 0;
    /* background-color: rgba(24, 91, 167, 1); */
}
.education__major {
    min-width: 180px;
    max-width: 188px;
    margin: 0 16px 0 0;
}
.skill__major {
    height: 298px;
    min-height: 298px;
    max-height: 298px;
    margin: 0 16px 0 0;
        -webkit-box-shadow: none;
    box-shadow:none;
    background-color: red;
}

.experience__major:last-child {
    margin: 0;
    background-color: rgba(24, 91, 167, 1);
    /* background-color: chocolate; */
}
.education__major:last-child {
    margin: 0;
    background-color: rgba(24, 91, 167, 1);
    /* background-color: chartreuse; */
}
.skill__major:last-child {
    margin: 0;
    background-color: rgba(24, 91, 167, 1);
    /* background-color: lightcoral; */
}

ul#experiences__minor,
ul#educations__minor {
    width: auto;
    height: 100%;
    display: flex;
    /* flex-direction: row; */
    /* flex-wrap: nowrap; */
    /* justify-content: flex-start; */
    /* align-items: center; */
    position: relative;
    /* overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: lightblue transparent; */
    /* background-color: cadetblue; */
    /* rgba(24, 91, 167, 1) */
}
ul#experiences__minor:hover,
ul#educations__minor:hover {
    scrollbar-color: lightblue lightgray;
}

.experience__minor,
.education__minor {
    width: 160px;
    height: 88px;
    min-width: 160px;
    max-width: 160px;
    min-height: 88px;
    max-height: 88px;
    display: inline-block;
    position: relative;
    margin: 0 8px 0 0;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, 
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    box-shadow: 
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, 
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    background-color: white;
    /* background-color: grey; */
}
.experience__minor:last-child,
.education__minor:last-child {
    background-color: rgba(24, 91, 167, 1);
}

.prevButton,
.nextButton {
    width: 24px;
    height: 24px;
    position: absolute;
    margin: -34px 0 0 0;
    padding: 4px;
    border: none;
    border-style: none;
    border-radius: 50%;
    /* box-shadow: 0 1px 2px darkslategray; */
    color: white;
    font-size: 0%;
    cursor: pointer;
    z-index: 2;
    background-color: #fafafa;
}
.prevButton {
    right: 56px;
}
.nextButton {
    right: 16px;
}

.btn__action {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0;
    padding: 0;
    border: none;
    border-style: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    background-image: url("data:image/svg+xml, %3Csvg id='svgInteractBtn' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='10' style='fill:%23fff;opacity:0.88' /%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='10' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;opacity:0.24' /%3E%3Cpath d='M278,210h0' transform='translate(-267.5 -199.5)' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px' /%3E%3Cpath d='M282,210h0' transform='translate(-267.5 -199.5)' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px' /%3E%3Cpath d='M274,210h0' transform='translate(-267.5 -199.5)' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px' /%3E%3C/svg%3E%0A");
    background-position: 0 center;
    background-repeat: no-repeat;
    /* color: white; */
    /* background-color: white; */
}

/* --- Experience + Education/Formations card --- */
.xp__maj-container,
.educ__maj-container {
    display: flex;
    flex-direction: column;
}
.xp__maj-contents,
.educ__maj-contents {
    width: 100%;
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
        -moz-border-radius: 4px 4px 0px 0px;
        -webkit-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
    contain: strict;
    background-color: #dadada;
}
/* .xp__maj-imgIcono figure,
.xp__maj-imgIcono figure img {
    width: 100%;
    height: 100%;
    min-height: 128px;
    max-height: 128px;
    display: block;
} */
.educ__maj-certification-gouvernement-france {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 48px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin: 8px 8px 0 0;
    z-index: 9;
}
.xp__maj-infos {
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    position: relative;
    bottom: 48px;
    margin: 0;
    padding: 0;
        -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    color: rgba(234, 236, 237, 1);
    background-color: rgba(24, 91, 167, .80);
    /* background-color: rgba(255, 255, 255, .72); */
    /* background-color: #999999; */
}
.educ__maj-infos {
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    display: block;
    position: relative;
    bottom: 48px;
    margin: 0;
    padding: 0;
        -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    color: rgba(234, 236, 237, 1);
    background-color: rgba(24, 91, 167, .80);
    /* background-color: rgba(255, 255, 255, .72); */
    /* background-color: #999999; */
}
.educ__maj-infos {
    color: rgba(234, 236, 237, 1);
    /* background-color: rgba(24, 91, 167, .64);  */
}

.xp__maj-compagny_logo,
.educ__maj-academy_logo {
    width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    display: block;
    /* position: absolute;
    top: 0;
    left: 0; */
    margin: 0;
    padding: 0;
    /* z-index: 999999999; */
    /* background-color: red; */
}
.xp__maj-position_title,
.xp__maj-compagny_name,
.xp__maj-compagny_location,
.educ__maj-degree_years,
.educ__maj-degree_title,
.educ__maj-degree_subtitle,
.educ__maj-uni_name,
.educ__maj-uni_location {
    /* width: 100%;
    height: 32px; */
    /* flex: none; */
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* position: absolute; */
    /* bottom: 38px; */
    display: block;
    margin: 0;
    padding: 0;
}
.xp__maj-position_title,
.xp__maj-compagny_name,
.xp__maj-compagny_location {
    height: 16px;
}
.xp__maj-position_title {
    font-size: 16px;
    font-family: 'bree_serifregular';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 20px;
    /* background-color: rgba(255, 255, 255, 1); */
    /* background-color: blueviolet; */
}
.xp__maj-compagny_name {
    font-size: 12px;
    font-family: 'bree_seriflight';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 22px;
}
.xp__maj-compagny_location {
    /* color: rgba(24, 91, 167, 1); */
    font-size: 10px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 14px;
}
.educ__maj-degree_years {
    font-size: 8px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 1,25em;
}
.educ__maj-degree_title {
    padding: 4px 0 0 0;
    font-size: 12px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 1,25em;
}
.educ__maj-degree_subtitle {
    font-size: 11px;
    font-family: 'bree_serifregular';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 1,75em;
}
.educ__maj-uni_name {
    font-size: 10px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: italic;
    text-align: center;
    line-height: 1em;
}
.educ__maj-uni_location {
    font-size: 10px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: italic;
    text-align: center;
    line-height: 1em;
}
/* .xp__maj-position_title strong {
    line-height: 1em;
} */


.xp__maj-share_infos,
.educ__maj-share_infos {
    width: 24px;
    height: 32px;
    min-height: 24px;
    max-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 16px 0 0;
    /* background-color: cornflowerblue; */
}
.xp__maj-share_infos button,
.educ__maj-share_infos button {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        -ms-appearance: none;
    appearance: none;
    cursor: pointer;
    background: transparent;
}

/* Codrops-tympanus Hover-Effect Base */
/*------------------------------------*/
.grid {
	max-width: 1000px;
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
}
/* Common style */
.grid figure {
	/* width: 48%; */
	/* min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	position: relative;
	margin: 10px 1%;
	float: left; */
    height: 168px;
    min-height: 168px;
    max-height: 168px;    
	position: relative;
	float: left;
	margin: 0;
        -moz-border-radius: 0px 0px 4px 4px;
        -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    overflow: hidden;
	cursor: pointer;
	text-align: center;
	/* background: #3085a3; */
}
.grid figure picture,
.grid figure picture img {
	max-width: 100%;
	min-height: 100%;
	display: block;
	position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center center;
	/* background: magenta; */
	/* opacity: 0.8; */
}
.grid figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1.25em;
	/* text-transform: uppercase; */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/* Anchor will cover the whole item by default */
.grid figure figcaption > a {
	font-size: 0;
	text-indent: 200%;
	white-space: nowrap;
	opacity: 0;
	z-index: 1000;
}
.grid figure h2 {
	font-weight: 300;
	word-spacing: -0.15em;
}
.grid figure h2 span {
	font-weight: 800;
}
.grid figure h2,
.grid figure p {
	margin: 0;
}
.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
/* Zoe */
/*-----*/
figure.effect-zoe {
    cursor: default;
}
figure.effect-zoe p {
    margin: 0;
    padding: 0;
    font-size: 0em;
}
figure.effect-zoe span.logo__uni {
    width: 180px;
    height: 168px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pantheon-sorbonne,
.sorbonne-nouvelle,
.rennes-2 {
    /* background-color: #fafafa; */
    background-color: #ffffff;
}
.pantheon-sorbonne svg,
.sorbonne-nouvelle svg {
    width: 88%;
    height: 88%;
    max-width: 132px;
    max-height: 40px;
}
.pantheon-sorbonne svg {
    margin: -32px 0 0 0;
}
.sorbonne-nouvelle svg {
    margin: -24px 0 0 0;
}
.rennes-2 svg {
    width: 40%;
    height: 40%;
    /* max-width: 132px; */
    max-height: 56px;
    margin: -24px 0 0 0;
}
figure.effect-zoe figcaption {
	/* height: 1.75em;
	top: auto;
	bottom: 0;
	padding: 1em; */
    height: 100%;
    top: auto;
    bottom: 0;
    margin: 0;
    padding: 0;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}
figure.effect-zoe figcaption {
    background-color: rgba(24, 91, 167, .96);
    /* background: #fff; */
}
.educ__maj-contents > .grid > figure.effect-zoe figcaption {
    /* background-color: rgba(12, 46, 84, 1); */
    background-color: rgba(24, 91, 167, .96);
}
figure.effect-zoe:hover figcaption  {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
figure.effect-zoe h3 {
    /* width: 100%; */
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'breelight';
    font-size: 1em;
    /* background-color: #fafafa; */
    /* background-color: red; */
}
/* figure.effect-zoe h3 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}
figure.effect-zoe:hover h3 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
figure.effect-zoe:hover h3 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
} */

figure.effect-zoe h3 span.onHover_xp__maj-header,
figure.effect-zoe h3 span.onHover_xp__maj-body,
figure.effect-zoe h3 span.onHover_xp__maj-footer,
figure.effect-zoe h3 span.onHover_educ__maj-header,
figure.effect-zoe h3 span.onHover_educ__maj-body,
figure.effect-zoe h3 span.onHover_educ__maj-footer {
    margin: 8px 8px 0 8px;
    text-align: start;
}
figure.effect-zoe h3 span.onHover_xp__maj-footer,
figure.effect-zoe h3 span.onHover_educ__maj-footer {
    margin: 0 8px 0 8px;
}
figure.effect-zoe h3 span.onHover_xp__maj-header,
figure.effect-zoe h3 span.onHover_educ__maj-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
figure.effect-zoe h3 span.onHover_xp__maj-header em,
figure.effect-zoe h3 span.onHover_educ__maj-header em {
    width: auto;
    height: auto;
    margin: 1px 4px;
    padding: 1px 4px;
    max-width: fit-content;
        -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
        -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
    color: rgba(24, 91, 167, 1);
    background-color: #fafafa;
}
figure.effect-zoe h3 span.onHover_xp__maj-header em:first-child,
figure.effect-zoe h3 span.onHover_educ__maj-header em:first-child {
    font-family: 'breeregular';
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}
figure.effect-zoe h3 span.onHover_xp__maj-header em:nth-child(2),
figure.effect-zoe h3 span.onHover_educ__maj-header em:nth-child(2) {
    font-family: 'breelight_oblique';
    font-weight: normal;
    font-style: normal;
}
figure.effect-zoe h3 span.onHover_xp__maj-header em:last-child,
figure.effect-zoe h3 span.onHover_educ__maj-header em:last-child {
    font-size: .85em;
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-header em,
figure.effect-zoe:hover h3 span.onHover_educ__maj-header em {
    	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-header em:first-child,
figure.effect-zoe:hover h3 span.onHover_educ__maj-header em:first-child {
        -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-header em:nth-child(2),
figure.effect-zoe:hover h3 span.onHover_educ__maj-header em:nth-child(2) {
	    -webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-header em:last-child,
figure.effect-zoe:hover h3 span.onHover_educ__maj-header em:last-child {
    	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
figure.effect-zoe h3 span.onHover_xp__maj-body,
figure.effect-zoe h3 span.onHover_educ__maj-body {
    width: 60%;
    min-height: 56px;
    display: flex;
    /* background-color: aquamarine; */
}
figure.effect-zoe h3 span.onHover_xp__maj-body {
    margin: 8px auto 0;
}
figure.effect-zoe h3 span.onHover_educ__maj-body {
    margin: 8px 0 0 4px;
}

figure.effect-zoe h3 span.onHover_xp__maj-body em,
figure.effect-zoe h3 span.onHover_educ__maj-body em {
    width: auto;
    height: auto;
    max-width: fit-content;
    margin: 0 4px;
    color: #fafafa;
        -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
        -webkit-transform: translate3d(0, 300%, 0);
    transform: translate3d(0, 300%,  0);
    /* background-color: yellow; */
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-body em,
figure.effect-zoe:hover h3 span.onHover_educ__maj-body em {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
        -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.degree-short-description {
    font-size: 10px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: normal;
    /* text-align: center; */
    /* line-height: 0.25em; */
}
figure.effect-zoe h3 span.onHover_xp__maj-footer,
figure.effect-zoe h3 span.onHover_educ__maj-footer {
    min-height: 32px;
    max-height: 48px;
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: space-between;
	font-size: 0em;
}
figure.effect-zoe h3 span.onHover_xp__maj-footer span.logo-link,
figure.effect-zoe h3 span.onHover_xp__maj-footer span.icon-links,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.logo-link,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.icon-links {
    display: flex;
    /* background-color: magenta; */
}

/* figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents {
    width: 92px;
    height: 32px;
    position: relative;
} */
figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents h4 {
    width: 92px;
    height: 32px;
    position: relative;
    margin: 0;
    padding: 0;
    cursor: pointer;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
    border-radius: 1px;
    border: solid 1px rgba(255, 255, 255, .88);
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    font-family: 'Titillium Web';
    font-weight: 300;
    font-style: normal;
    line-height: 30px;
    letter-spacing: .075em;
    text-align: center;
        -moz-transition: all ease-out 250ms;
        -webkit-transition: all ease-out 250ms;    
    transition: all ease-out 250ms;
    background: rgba(255, 255, 255, 0);
    /* background: greenyellow; */
}
figure.effect-zoe h3 span.onHover_educ__maj-footer span.fetch-additional-contents h4 {
    width: 72px;
    height: 24px;
    position: relative;
    margin: 16px 0 0;
    padding: 0;
    cursor: pointer;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
    border-radius: 1px;
    border: solid 1px rgba(255, 255, 255, .88);
    color: rgba(255, 255, 255, 1);
    font-size: 10px;
    font-family: 'Titillium Web';
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .075em;
    text-align: center;
        -moz-transition: all ease-out 250ms;
        -webkit-transition: all ease-out 250ms;    
    transition: all ease-out 250ms;
    background: rgba(255, 255, 255, 0);
    /* background: greenyellow; */
}


figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents .icon-eye {
    /* width: 100%;
    height: 100%;
    max-width: 92px;
    max-height: 32px; */
    width: 92px;
    height: 32px;    
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
        -moz-transform: translate3d(0, 200%, 0);
        -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
        -moz-transition: -moz-transform ease-out 250ms;
        -webkit-transition: -webkit-transform ease-out 250ms;
    transition: transform ease-out 250ms;
}
figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents .icon-eye svg {
    width: 24px;
    height: 24px;
    fill: none;
    margin: 0 auto;
    padding: 0;
}
figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents .icon-eye svg path {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents:hover {
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
    border-radius: 16px;
}

figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents h4:hover,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.fetch-additional-contents h4:hover {
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
    border-radius: 16px;
    border: solid 1px rgba(255, 255, 255, .88);
    color: rgba(24, 91, 167, 1);
    font-weight: 600;
    background: rgba(255, 255, 255, .88);
}

/* figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents:hover h4 {
    -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(24, 91, 167, 1);
    background: red;
} */

/* figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents:hover h4 {
    opacity: 0;
    overflow: hidden;
        -moz-transform: translate3d(0, -100%, 0);
        -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    background-color: green;
} */

/* figure.effect-zoe h3 span.onHover_xp__maj-footer span.fetch-additional-contents:hover .icon-eye {
    opacity: 1;
    overflow: hidden;
        -moz-transform: translate3d(0, -100%, 0);
        -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
} */



figure.effect-zoe h3 span.onHover_xp__maj-footer span.logo-link a,
figure.effect-zoe h3 span.onHover_xp__maj-footer span.icon-links a,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.logo-link a,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.icon-links a {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    margin: 0;
    -moz-transition: -moz-transform 0.35s;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
    -moz-transform: translate3d(0, 200%, 0);
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
    /* background-color: red; */
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.logo-link a,
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.icon-links a,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.logo-link a,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.icon-links a {
    -moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.icon-links a:nth-child(3),
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.icon-links a:nth-child(3) {
    -moz-webkit-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.icon-links a:nth-child(2),
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.icon-links a:nth-child(2) {
	-moz-transition-delay: 0.35s;
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.icon-links a:first-child,
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.logo-link a,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.icon-links a:first-child,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.logo-link a {
	-moz-transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
figure.effect-zoe h3 span.onHover_xp__maj-footer span.logo-link a span,
figure.effect-zoe h3 span.onHover_xp__maj-footer span.icon-links a span,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.logo-link a span,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.icon-links a span {
    display: flex;
    align-items: center;
}
/* figure.effect-zoe h3 span.onHover_xp__maj-footer span.logo-link a span svg , */
figure.effect-zoe h3 span.onHover_xp__maj-footer span.icon-links a span svg,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.icon-links a span svg {
    width: 20px;
    height: 20px;
}
figure.effect-zoe h3 span.onHover_xp__maj-footer span.icon-links a span svg path,
figure.effect-zoe h3 span.onHover_educ__maj-footer span.icon-links a span svg path {
    stroke: rgba(255, 255, 255, 1);
}
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.logo-link a span:hover svg path,
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.logo-link a span:focus svg path,
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.icon-links a span:hover svg path,
figure.effect-zoe:hover h3 span.onHover_xp__maj-footer span.icon-links a span:focus svg path,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.logo-link a span:hover svg path,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.logo-link a span:focus svg path,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.icon-links a span:hover svg path,
figure.effect-zoe:hover h3 span.onHover_educ__maj-footer span.icon-links a span:focus svg path {
    stroke: rgba(24, 91, 167, 1);
}


figure.effect-zoe p.description {
	position: absolute;
	bottom: 8em;
	padding: 2em;
	color: #fff;
	font-size: 90%;
	text-transform: none;
	opacity: 0;
    	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
    backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
    	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}
figure.effect-zoe:hover p.description {
	opacity: 1;
}
/* END Codrops-tympanus */
/*----------------------*/

.xp__min-container,
.educ__min-container {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: rgba(22, 91, 167, 1);
}

.xp__min-infos,
.educ__min-infos {
    width: 100%;
    height: auto;
    /* min-height: 40px;
    max-height: 40px; */
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* align-content: center; */
    /* justify-content: center; */
    position: relative;
    margin: 0;
    padding: 0;
        -moz-border-radius: 0px 0px 3px 3px;
        -webkit-border-radius: 0px 0px 3px 3px;
    border-radius: 0px 0px 3px 3px;
    z-index: 9;
    /* background-color: #999999; */
    /* background-color: rgba(255, 255, 255, .96); */
    /* background-color: tomato; */
}
.xp__min-position_title,
.educ__min-degree_title {
    margin: 0 0 8px 8px;
    padding: 0;
    /* background-color: violet; */
}
.xp__min-position_title p,
.educ__min-degree_title p {
    margin: 0;
    padding: 0;
    font-size: 9.5px;
    font-family: 'bree_serifregular';
    font-weight: 300;
    font-style: normal;
    /* text-align: center; */
    line-height: 1.24em;
    /* background-color: rgba(255, 255, 255, .96); */
}
.xp__min-position_nfo,
.educ__min-degree_nfo {
    width: 100%;
    min-width: 52px;
    max-width: 76px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 2px 0 0 8px;
    padding: 0;
    font-size: 9px;
    font-family: 'bree_seriflight';
    font-weight: 300;
    font-style: normal;
    /* text-align: center; */
    line-height: 1em;
    /* background-color: green; */
}
.xp__min-position_nfo p,
.educ__min-degree_nfo p {
    margin: 0;
    line-height: 1.25em;
    /* background-color: yellow; */
}
.xp__min-compagny_name,
.educ__min-academy_name {
    display: block;
    /* background-color: red; */
}
.xp__min-compagny_location,
.educ__min-academy_location {
    display: block;
    font-family: 'bree_serifthin';
    /* background-color: green; */
}
.xp__min-position_dates,
.educ__min-degree_dates {
    display: block;
    font-size: 8px;
    font-family: 'bree_serifthin';
    font-weight: 300;
    font-style: normal;
    /* text-align: center; */
    line-height: 1em;
    /* background-color: white; */
}
.btn__action-xp_min,
.btn__action-educ_min {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 12px;
    right: 8px;
    margin: 0;
    padding: 0;
    border: none;
    border-style: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 0;
    background-image: url("data:image/svg+xml, %3Csvg id='svgInteractBtn' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='10' style='fill:%23fff;opacity:0.88' /%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='10' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;opacity:0.24' /%3E%3Cpath d='M278,210h0' transform='translate(-267.5 -199.5)' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px' /%3E%3Cpath d='M282,210h0' transform='translate(-267.5 -199.5)' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px' /%3E%3Cpath d='M274,210h0' transform='translate(-267.5 -199.5)' style='fill:none;stroke:%23185ba7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px' /%3E%3C/svg%3E%0A");
    background-position: 0 center;
    background-repeat: no-repeat;
    /* color: white; */
    /* background-color: white; */
}
.educ__min-label-france-competences-certification-rncp {
    width: 62px;
    height: 24px;
    max-width: 64px;
    max-height: 24px;
    display: block;
    position: absolute;
    bottom: 12px;
    right: 12px;
    flex: none;
    margin: 0;
    padding: 0;
    /* background-color: red; */
}
.educ__min-label-grande-ecole-numerique-gen {
    width: 64px;
    height: 28px;
    max-width: 64px;
    max-height: 28px;
    display: block;
    position: absolute;
    bottom: 12px;
    right: 8px;
    flex: none;
    margin: 0;
    padding: 0;
}
.xp__min-contents,
.educ__min-contents {
    height: 100%;
    min-width: 76px;
    max-width: 76px;
    display: block;
    margin: 0;
    padding: 0;
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;
    /* background-color: #dadada; */
    /* background-color: lightseagreen; */
}

/* .xp__min-contents figure:nth-of-type(2) img {
    object-fit: none;
    object-position: bottom left;
} */
.job_DCM {
    object-fit: none !important;
    object-position: center right !important;
}

/*---------------*/
/***** Milo *****/
/*---------------*/
.grid .effect-milo img {
    max-width: 100%;
    min-height: 100%;
    display: block;
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center center;
    /* background-color: magenta; */
    /* opacity: 0.8; */
}

.xp__min-contents .grid__Milo,
.educ__min-contents .grid__Milo {
    width: 100%;
    height: 100%;
    /* cursor: default; */
    /* background: #2e5d5a; */
}

.xp__min-contents .grid__Milo .effect-milo,
.educ__min-contents .grid__Milo .effect-milo {
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    /* background-color: darkorange;     */
    /* background: #2e5d5a; */
}
.educ__min-contents .grid__Milo .effect-milo {
    cursor: default;
}
.xp__min-contents .grid__Milo .effect-milo figcaption,
.educ__min-contents .grid__Milo .effect-milo figcaption {
    /* padding: 2em; */
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 1.25em;
    /* text-transform: uppercase; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xp__min-contents .grid__Milo .effect-milo figcaption::before,
.xp__min-contents .grid__Milo .effect-milo figcaption::after,
.educ__min-contents .grid__Milo .effect-milo figcaption::before,
.educ__min-contents .grid__Milo .effect-milo figcaption::after {
    pointer-events: none;
}

.xp__min-contents .grid__Milo .effect-milo figcaption,
.xp__min-contents .grid__Milo .effect-milo figcaption>a,
.educ__min-contents .grid__Milo .effect-milo figcaption,
.educ__min-contents .grid__Milo .effect-milo figcaption>a {
    width: 100%;
    height: 100%;
    /* position: absolute; */
    top: 0;
    left: calc(76px - 32px);
}

/* Anchor will cover the whole item by default */
.xp__min-contents .grid__Milo .effect-milo figcaption>a,
.educ__min-contents .grid__Milo .effect-milo figcaption>a {
    font-size: 0;
    text-indent: 200%;
    white-space: nowrap;
    opacity: 0;
    z-index: 1000;
}

.xp__min-contents .grid__Milo .effect-milo h3,
.educ__min-contents .grid__Milo .effect-milo h3 {
    font-weight: 300;
    word-spacing: -0.15em;
}

.xp__min-contents .grid__Milo .effect-milo h3 span,
.educ__min-contents .grid__Milo .effect-milo h3 span {
    font-weight: 800;
}

.xp__min-contents .grid__Milo .effect-milo h3,
.xp__min-contents .grid__Milo .effect-milo p,
.educ__min-contents .grid__Milo .effect-milo h3,
.educ__min-contents .grid__Milo .effect-milo p {
    margin: 0;
}

.xp__min-contents .grid__Milo .effect-milo p,
.educ__min-contents .grid__Milo .effect-milo p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

.xp__min-contents .grid__Milo .effect-milo img,
.educ__min-contents .grid__Milo .effect-milo img {
    width: 160px;
    height: 88px;
    /* width: 100%; */
    /* height: 100%; */
    max-width: 160px;
    max-height: 88px;
    position: absolute;
    -webkit-clip-path: url("#hrafBlob__clip");
    clip-path: url("#hrafBlob__clip");
    opacity: 1;
    -moz-transition: opacity 0.35s, -moz-transform 0.35s;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    /* -webkit-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1); */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    /* background-color: yellow; */
}

.xp__min-contents .grid__Milo .effect-milo:hover img,
.educ__min-contents .grid__Milo .effect-milo:hover img {
    opacity: 0.16;
    -moz-transform: translate3d(4px, 0, 0) scale(2.12);
    -webkit-transform: translate3d(4px, 0, 0) scale(2.12);
    transform: translate3d(4px, 0, 0) scale(2.12);
    -webkit-filter: blur(.5rem);
    filter: blur(.5rem);
}

.xp__min-contents .grid__Milo .effect-milo svg.hrafBlob,
.educ__min-contents .grid__Milo .effect-milo svg.hrafBlob {
    /* width: 100%; */
    /* height: 100%; */
    max-width: 76px;
    max-height: 88px;
    position: absolute;
    top: 0;
    /* left: 84px; */
}

.xp__min-contents .grid__Milo .effect-milo svg.hrafBlob #hrafBlob__clip,
.educ__min-contents .grid__Milo .effect-milo svg.hrafBlob #hrafBlob__clip {
    position: relative;
    /* fill: aqua; */
}

.xp__min-contents figure.effect-milo figcaption,
.educ__min-contents figure.effect-milo figcaption {
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 88px;
    flex: none;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0em;
    text-align: start;
    /* background-color: rebeccapurple; */
}

figure.effect-milo figcaption span.onHover_xp__min-footer,
figure.effect-milo figcaption span.onHover_educ__min-footer {
    width: 32px;
    height: 100%;
    /* max-width: 32px; */
    /* min-height: 72px; */
    /* max-height: 88px; */
    /* display: flex;
    flex-direction: column; */
    display: flex;
    justify-content: center;
    margin: auto 0;
    padding: 0;
    font-size: 0em;
    text-align: start;
    /* background-color: yellow; */
}

figure.effect-milo figcaption .onHover_xp__min-footer span.icon-links,
figure.effect-milo figcaption .onHover_educ__min-footer span.icon-links {
    width: 24px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin: 8px 0;
    /* background-color: yellowgreen; */
}

figure.effect-milo span.onHover_xp__min-footer span.icon-links a,
figure.effect-milo span.onHover_educ__min-footer span.icon-links a {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    -webkit-transition: -webkit-transform 0.15s;
    transition: transform 0.15s;
    -webkit-transform: translate3d(500%, 0, 0);
    transform: translate3d(500%, 0, 0);
    /* background-color: red; */
}

figure.effect-milo:hover span.onHover_xp__min-footer span.icon-links a,
figure.effect-milo:hover span.onHover_educ__min-footer span.icon-links a {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

figure.effect-milo:hover span.onHover_xp__min-footer span.icon-links a:nth-child(3),
figure.effect-milo:hover span.onHover_educ__min-footer span.icon-links a:nth-child(3) {
    -moz-transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-milo:hover span.onHover_xp__min-footer span.icon-links a:nth-child(2),
figure.effect-milo:hover span.onHover_educ__min-footer span.icon-links a:nth-child(2) {
    -moz-transition-delay: 0.15s;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-milo:hover span.onHover_xp__min-footer span.icon-links a:first-child,
figure.effect-milo:hover span.onHover_educ__min-footer span.icon-links a:first-child {
    -moz-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

figure.effect-milo span.onHover_xp__min-footer span.logo-link a span,
figure.effect-milo span.onHover_educ__min-footer span.icon-links a span,
figure.effect-milo span.onHover_xp__min-footer span.logo-link a span,
figure.effect-milo span.onHover_educ__min-footer span.icon-links a span {
    display: flex;
    align-items: center;
}

figure.effect-milo span.onHover_xp__min-footer span.icon-links a span svg,
figure.effect-milo span.onHover_educ__min-footer span.icon-links a span svg {
    width: 16px;
    height: 16px;
}

figure.effect-milo span.onHover_xp__min-footer span.icon-links a span svg path,
figure.effect-milo span.onHover_educ__min-footer span.icon-links a span svg path {
    stroke: rgba(22, 91, 167, 1);
}

figure.effect-milo:hover span.onHover_xp__min-footer span.icon-links a span:hover svg path,
figure.effect-milo:hover span.onHover_xp__min-footer span.icon-links a span:focus svg path,
figure.effect-milo:hover span.onHover_educ__min-footer span.icon-links a span:hover svg path,
figure.effect-milo:hover span.onHover_educ__min-footer span.icon-links a span:focus svg path {
    stroke: rgba(255, 255, 255, 1);
}


.xp__min-contents figure.effect-milo p,
.educ__min-contents figure.effect-milo p {
    width: 50%;
    padding: 0 10px 0 0;
    /* border-right: 1px solid #fff; */
    border-right: 1px solid red;
    text-align: right;
    opacity: 0;
    -moz-transition: opacity 0.35s, -moz-transform 0.35s;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -moz-transform: translate3d(-40px, 0, 0);
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
}

.xp__min-contents figure.effect-milo:hover p,
.educ__min-contents figure.effect-milo:hover p {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* !! WARNING !!
"But as we’ve seen, for object-fit to do anything useful, 
we first need to define a height and width on the image’s 
content box that’s different from its natural size. 
In the examples below, we’ll constrain the width and height 
of the image to 100%, so that its content box matches 
the size of the container div:
https: //www.sitepoint.com/using-css-object-fit-object-position-properties/ */



/* .xp__min-contents figure svg {
    position: absolute;
    top: 0;
    background-color: salmon;
} */

/* .test_Mask_ClipPath {
    width: 76px;
    height: 88px;
    position: relative;
    display: inline-block;
    background-color: greenyellow;
} */

/* --- Mask Image --- */
/* --- !! WARNING -- préfixe obligatoire pour Chrome !! --- */
/* - test Mask avec un dégradé NB - */
/* .test_Mask_ClipPath img {
        -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
} */

/* .test_Mask_ClipPath img {
    -webkit-mask-image: url("shape.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    mask-image: url("shape.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
} */

/* .test_Mask_ClipPath img {
    position: absolute;
    -webkit-clip-path: url("#mySvgBlob__clip");
    clip-path: url("#mySvgBlob__clip");
} */

    /* circle clip */
/* .test_Mask_ClipPath img {
    -webkit-clip-path: circle(30px at 35px 35px);
    clip-path: circle(30px at 35px 35px);
} */
 
/* .mySvgBlob {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: hotpink;
} */
/* .mySvgBlob path {
    fill: #656969;
} */

/* #mySvgBlob__clip {
    position: absolute;
    fill: red;
}
#mySvgBlob__clip path {
    fill: yellow;
} */

.wavyHero {
    width: 76px;
    height: 76px;
        -webkit-clip-path: url(#wavyClipPath);
    clip-path: url(#wavyClipPath);
    /* background-color: red; */
}
#rectangle {
    width: 100px;
    height: 50px;
    background-color: blue;
    opacity: 0;
    animation-name: imageBlink;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    /* Delay for 'appearAndBlink' to start after 'otherAnimation' */
    animation-delay: 1s;
    /* Add a white flash effect */
    position: relative;
}
#rectangle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    animation-name: whiteFlash;
    animation-duration: 0.1s;
    /* Adjust the duration of the white flash */
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    animation-delay: 1.1s;
}


@keyframes imageBlink {
    0% {
        opacity: 0;
        transform: scale(0.8);
        /* Initial scale */
    }

    50% {
        opacity: 1;
        transform: scale(1);
        /* Normal size at the midpoint */
    }

    100% {
        opacity: 1;
        transform: scale(0.9);
        /* Slightly smaller to create a bounce-back effect */
    }
}
@keyframes whiteFlash {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* #rectangle {
    width: 100px;
    height: 50px;
    background-color: blue;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    animation-name: imageBlink;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    position: relative;
}

#rectangle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    animation-name: whiteFlash;
    animation-duration: 0.1s;
    animation-timing-function: ease-out;
}

@keyframes imageBlink {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(0.9);
    }
}

@keyframes whiteFlash {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} */



/* ============================================== */
/* === Media-Queries & Breakpoints( as of 2024) === */
/* ============================================== */

/* === BEGIN Responsive === */
/* --- DEVICES --- */
/* --- SMARTPHONES --- */
/* MOBILE [Portrait] :: 360px -> [Portrait] Target Most Smartphones devices */
@media screen and (max-width: 360px) and (orientation: portrait) {
    #resume-app-header {
        width: calc(100% - 16px*2);
        min-width: 328px;
        /* background-color: deepskyblue; */
    }
}
/* MOBILE [Portrait] Target Smartphones devices w/ max-height: 640px ex. Sony-xPeria */
@media screen and (max-width: 360px) and (max-height: 640px) and (orientation: portrait) {
    #resume-app-header {
        width: calc(100% - 16px*2);
        min-width: 328px;
        /* background-color: deepskyblue; */
    }
}
/* MOBILE [Portrait] :: 361px to 767px -> target Most New Smartphones devices as of : early 2020s (Portrait) */
@media screen and (min-width: 361px) and (max-width: 767px) and (orientation: portrait) {
    #resume-app-header {
            width: calc(100% - 16px*2);
            min-width: 328px;
            /* background-color: deepskyblue; */
        }
}
/* === END Responsive === */



/* ----------- iPhone xx ----------- */
/* Portrait and Landscape */
/* @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {} */

/* Portrait */
/* @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    #primary_experiences:not(.customHeight) {
        margin: 16px 0 8px 0;
    }
    #primary_experiences.custom__mobileBrowser-Safari {
        margin: 16px 0 8px 0;
    }
} */