/* CSS Document */

@font-face {
font-family:"Font Awesome SOLID";
src: url(../webfonts/fa-solid-900.ttf);
font-weight: 900;
}

@font-face {
font-family:"Font Awesome REGULAR";
src: url(../webfonts/fa-regular-400.ttf);
font-weight: 400;
}

@font-face {
font-family:"Font Awesome BRANDS";
font-weight: 400;
src: url(../webfonts/fa-brands-400.ttf);
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-Black.ttf);
font-weight:900
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-Bold.ttf);
font-weight:700;
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-Medium.ttf);
font-weight:400;
font-style:normal;
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-Light.ttf);
font-weight:200;
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-BlackItalic.ttf);
font-weight:900;
font-style:italic;
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-BoldItalic.ttf);
font-weight:700;
font-style:italic;
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-MediumItalic.ttf);
font-weight:400;
font-style:italic;
}

@font-face{
font-family : "Montserrat";
src : url(../webfonts/Montserrat-LightItalic.ttf);
font-weight:200;
font-style:italic;
}

strong {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
}

em {
font-family: Montserrat;
font-weight: 400;
font-style: italic;
}

:root {
font-family:Montserrat;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

@media (orientation: landscape),
(min-width:1090px) {

html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
margin:0;
padding:0;
scroll-behavior: smooth;
overflow-x:hidden;
}

body {
margin: 0;
padding:0;
font-size: 1vw;
height: 100%;
width: 100%;
overflow-x: hidden;
background: rgb(238,238,238);
background: linear-gradient(-60deg, rgba(238,238,238,1) 0%, rgba(241,241,241,1) 100%);
}

h1, h2, h3, h4, h5, h6, h7 {
float: left;
margin: 0;
}

h1 {
color:#85b3e1;
font-size:3.5vw;
line-height:1;
font-weight: 400;
letter-spacing: 0.025vw;
}

h2 {
color:#478cd1;
font-size:3.5vw;
line-height:1;
font-weight: 700;
letter-spacing: 0.025vw;
}

h3 {
font-size: 1.25vw;
line-height: 1;
font-weight: 700;
display: block;
width: 100%;
background-color: #478cd1;
padding: 0.5vw 0.75vw;
color: #fff;
float: left;
letter-spacing: 0.015vw;
}

h4 {
font-size:1.25vw;
line-height:1;
font-weight: 700;
display:block;
width:100%;
padding: 0 0 0.75vw;
color:#478cd1;
letter-spacing: 0.015vw;
text-align:justify;
}

h5 {
font-size: 1vw;
line-height: 1;
font-weight: 400;
color: #AAA;
float: left;
width: auto;
padding: 0.15vw 0 0 0;
letter-spacing: 0.01vw;
}

h6 {
color:#AAA;
font-size:1vw;
line-height:1;
font-weight: 400;
display:block;
float:left;
letter-spacing: 0.01vw;
}

h7 {
color:#AAA;
font-size:1vw;
line-height:1;
font-weight: 400;
display:block;
float:right;
letter-spacing: 0.01vw;
}

h3>svg,
h4>svg,
h5>svg,
h6>svg,
button>svg,
a>svg,
span>svg {
margin-right:0.75vw;
}

p {
font-size: 1vw;
letter-spacing: 0.01vw;
line-height: 1.5;
margin:0;
}

button {
font-family: Montserrat;
padding:0;
}

.main_container {
width: 100%;
height: 100%;
margin: 0;
padding:0;
display:block;
float: left;
position:relative;
background-image:url(../images/wallpaper_mainpage.svg);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
opacity:1;
animation: bg_appear 0.2s ease-out;
}

.row {
display: flex;
width: 100%;
position: relative;
float: left;
}

.header {
padding:1.5vw;
}

.header_separator {
display: block;
width: 100%;
position: relative;
float: left;
height:22vw;
line-height: 1;
}

.badge_img {
float:left;
z-index:100;
display:block;
height:8rem;
width:auto;
margin:0 0 0 2vw;
}

.none {
position: relative;
float: left;
display: block;
}

.separator,
.footer_separator {
display: block;
width: 100%;
position: relative;
float: left;
height:1.5vw;
line-height: 1;
}

.position_button {
width:33.33%;
display:flex;
float:left;
justify-content: center;
}

.dl_button {
color:#fff;
background-color: #478cd1;
font-weight: 700;
font-size:1vw;
padding: 0.75vw 0.75vw 0.5vw;
text-decoration: none;
display: block;
width:auto;
float:left;
text-align: center;
}

.dl_button svg {
line-height:4vw;
font-size:4vw;
margin:0 0 0.75vw;
}

.content_inblock {
display:block;
text-align:justify;
width: 100%;
float:left;
margin:1vw 0;
position:relative;
height:auto;
overflow:hidden;
}

.content_list {
display:block;
text-align:justify;
width: 100%;
float:left;
list-style: none;
padding: 1vw 1.25vw 1vw 2.25vw;
color: #000;
font-style: italic;
background-color: #e0ecf7;
margin:0.75vw 0 0 0;
font-size: 0.85vw;
}

.content_list li::before {
font-family: "Font Awesome SOLID";
content: "\f45c";
color: #478cd1;
display: inline-block;
width: 1.25vw;
margin-left: -1.25vw;
font-size: 0.6vw;
font-style: normal !important
}

.content_list_items {
margin-bottom:0.5vw;
padding-left: 0.25vw;
line-height: 1.5;
}

.content_list_items:last-child {
margin-bottom:0;
}

.contact span {
width: 100%;
display: block;
line-height:1.85;
}

.contact span>svg {
color:#478cd1;
}

.contact a,
.contact a:hover,
.contact a:visited,
.contact a:focus {
color:#000;
text-decoration: none;
}

.left_tab,
.middle_tab,
.right_tab,
.last_tab,
.large_left {
overflow:hidden;
}

.left_tab,
.right_tab,
.last_tab {
width:calc(33.33% - 2.25vw);
display:block;
float:left;
padding:0;
background-color:#fff;
}

.large_left {
width:calc(66.67% - 2.25vw);
display:block;
float:left;
padding:0;
background-color:#fff;
margin:0 0.75vw 0 1.5vw;
}

.middle_tab {
width:calc(33.33% - 1.5vw);
display:block;
float:left;
padding:0;
margin:0 0.75vw;
background-color:#fff;
}

.left_tab {
margin:0 0.75vw 0 1.5vw;
}

.right_tab,
.last_tab{
margin:0 1.5vw 0 0.75vw;
}

/* Style the button that is used to open and close the collapsible content */
.hide_job_details {
cursor: pointer;
padding: 0;
width: 100%;
border: none;
text-align: left;
outline: none;
background-color:#fff;
position:relative;
margin: 1vw 0 0 0;
float:left;
}

.hide_skill_details {
color: #478cd1;
cursor: pointer;
border: none;
text-align: left;
outline: none;
font-size:1.25vw;
line-height:1;
font-weight: 700;
display:block;
width:100%;
padding: 1vw 0 0.5vw 0;
background-color:#fff;
position:relative;
}

.hide_job_details svg {
float:right;
margin:0;
font-size: 1.25vw;
transition: color 0.5s ease-out;
}
.hide_job_details h4 {
float:left;
margin:0;
width:calc(100% - 2.5vw);
padding-top: 0;
}

.hide_job_details.expanded svg {
animation: open_collapse 0.5s ease-out;
transform: rotateZ(90deg);
color:#CCC;
}

.hide_job_details.compacted svg {
animation: close_collapse 0.5s ease-out;
transform: rotateZ(00deg);
color:#478cd1;
}

.skilltoggle {
font-size: 1.25vw;
float:right;
position: absolute;
right: 0;
margin:0;
}

.front_skill {
z-index:25;
color:#478cd1;
transition: color 0.5s ease-out;
}

.back_skill {
z-index:15;
color:#c2d9f0;
transition: color 0.5s ease-out;
}

.skill_opened>.front_skill {
color:#777;
transition: color 0.5s ease-out;
}

.skill_opened>.back_skill {
color:#CCC;
transition: color 0.5s ease-out;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #85b3e1;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 1.5vw;
background-color: #fff;
display:block;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.standard_content,
.skill_content {
padding: 0 1.5vw;
background-color: #fff;
display:block;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.academics_content {
padding: 1vw 1.5vw 0;
background-color: #fff;
display:block;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.job_details {
padding: 0;
display:block;
width:100%;
overflow: hidden;
transition: max-height 0.5s ease-out;
text-align:justify;
float:left;
line-height: 1.5;
margin:0 0 0.75vw;
max-height: 0;
}

.skill_details {
padding: 0;
margin:0;
display:block;
width:100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.job_details:last-child {
margin-bottom:1vw;
}

.skill_details:last-child {
margin-bottom:1vw;
}

.progress:last-child {
margin-bottom:0.5vw;
}

.progress:first-child {
margin-top:0.5vw;
}

.last_progress {
margin-bottom:0vw !important;
}

.content p {
display:block;
text-align:justify;
width: 100%;
float:left;
margin:1vw 0;
}

.standard_content p {
display:block;
text-align:justify;
width: 100%;
float:left;
margin:1vw 0;
}

.academics_content p {
display:block;
margin: 0.5vw 0 1.5vw 0;
font-style:italic;
font-size:0.85vw;
float:left;
}

.footer_content {
text-align:center;
background-color:#478cd1;
color:#fff;
position:relative;
height:2vw;
width: 100%;
float:left;
}

.footer_content p {
line-height:2vw;
font-size:0.75vw;
}

.footer_content a,
.footer_content a:active,
.footer_content a:focus,
.footer_content a:visited {
color:#fff;
text-decoration:none;
font-weight:700;
}

.animated100 {
width:100%;animation: fill_100 1.5s ease-out;}
.animated90 {
width:90%;animation: fill_90 1.5s ease-out;}
.animated80 {
width:80%;animation: fill_80 1.5s ease-out;}
.animated70 {
width:70%;animation: fill_70 1.5s ease-out;}
.animated60 {
width:60%;animation: fill_60 1.5s ease-out;}
.animated50 {
width:50%;animation: fill_50 1.5s ease-out;}
.animated40 {
width:40%;animation: fill_40 1.5s ease-out;}
.animated30 {
width:30%;animation: fill_30 1.5s ease-out;}
.animated20 {
width:20%;animation: fill_20 1.5s ease-out;}

.progress {
display: block;
height: 1.75vw;
overflow: hidden;
background-color: #c2d9f0;
float:left;
width:100%;
margin-bottom:0.5vw;
}

.progress-bar {
display: block;
line-height: 1.75vw;
font-size: 1vw;
color: #fff;
text-align: left;
float:left;
margin:0;
transition: width 0.25s ease-in;
padding-left:0.75vw;
background-color: #478cd1;
letter-spacing:0.01vw;
}

/* Encart de disponibilité */

.availability,
.availability a {
background-color:#c2d9f0;
color:#478cd1;
width:auto;
display:block;
position:absolute;
right: -0.25vw;
top:26vw;
transform:rotateZ(5deg);
z-index:10;
text-decoration:none;
white-space:nowrap;
padding:0.75vw 1vw;
box-shadow: 0.25vw 0.25vw 0 0 #85b3e1;
font-size:1.25vw;
}

.availability svg {
margin-right:0.5vw;
}

.available_zoom {
animation-name: zoomin;
animation-duration: 3s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.first_fade {
animation-name: firstfade;
animation-duration: 0.5s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.second_fade {
animation-name: secondfade;
animation-duration: 1s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.third_fade {
animation-name: thirdfade;
animation-duration: 1.5s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.fourth_fade {
animation-name: fourthfade;
animation-duration: 2s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.portfolio_main {
display:block;
width:100%;
height:auto;
padding:1vw 1.5vw;
position:relative;
float:left;
}

.project_row {
width:100%;
display:block;
float:left;
height:auto;
}

.project_row h4 {
padding:0;
width:auto;
}

.project_row p {
display: block;
text-align: justify;
width: 100%;
float: left;
margin: 0.75vw 0 0 0;
}

/* Flickity */

.main-gallery {
width:100%;
margin:1vw 0 0;
display:block;
float:left;
position:relative;
height: 100%;
overflow:hidden;
}

.gallery-cell {
margin:0 0.5vw;
height:auto;
width:auto;
pointer-events: none;
}

.gallery-cell img {
height:15vw;
width:auto;
opacity:0.3;
border: 0.1vw solid #AAA;
pointer-events: none;
background-color: #AAA;
}

.gallery-cell.is-selected img {
opacity:1;
box-shadow:0.25vw 0.25vw 0 0 #478cd1;
border:0.1vw solid #478cd1;
pointer-events:auto;
background-color:#478cd1;
}

.flickity-enabled {
position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}

.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: #85b3e1;
  border: none;
  color: #fff;
  transition: background 0.5s ease-out;
}

.flickity-button:hover {
  background: #478cd1;
  cursor: pointer;
  transition: background 0.5s ease-out;
}

.flickity-button:focus {
  outline: none;
  opacity: 1;
  transition:opacity 0.5s ease-out;
}

.flickity-button:active {
  opacity: 1;
  transition:opacity 0.5s ease-out;
}

.flickity-button:disabled {
  opacity: 0;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
  transition:opacity 0.5s ease-out;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
top: 40%;
width: 3vw;
height: 3vw;
/* vertically center */
transform: translateY(-50%);
transition:opacity 0.5s ease-out;
}

.flickity-prev-next-button.previous {
left: 0;
}
.flickity-prev-next-button.next {
right: 0;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 0;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 0;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  transition:opacity 0.5s ease-out;
  
}

/* ---- page dots ---- */

.flickity-page-dots {
position: relative;
width: 100%; 
padding: 0;
margin: 1vw 0 0 0;
list-style: none;
text-align: center;
line-height: 1;
display:block;
float:left;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
display: inline-block;
width: 1vw;
height: 1vw;
margin: 0 0.5vw;
background: #478cd1;
opacity: 0.25;
cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* modal windows */

.modal {
display: none;
position: fixed;
z-index: 40; /* Sit on top */
padding: 3vw 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(255,255,255,0.85);
transition:opacity 3s ease-out;
text-align:center;
}

.modal_content {
margin: auto;
display: block;
width: 60%;
min-height:min-content;
max-height:calc(100% - 6vw);
overflow-x:hidden;
overflow-y:auto;
animation: displaymodal 0.5s ease-out;
z-index:100;
position:absolute;
text-align:center;
border: 0.15vw solid #478cd1;
box-shadow: 0.3vw 0.3vw 0 0 #478cd1;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}

.modal_content_smartphone {
margin: auto;
display: inline-block;
max-width: 60%;
min-height:min-content;
height:100%;
overflow-x:hidden;
overflow-y:auto;
animation: displaymodal 0.5s ease-out;
z-index:100;
position:relative;
text-align:center;
border: 0.15vw solid #478cd1;
box-shadow: 0.3vw 0.3vw 0 0 #478cd1;
}

.img_modal {
width:100%;
height:auto;
float:left;
}

.img_modal_smartphone {
width:auto;
height:100%;
float:left;
}

.close,
.close_smartphone {
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
z-index:50;
text-decoration: none;
cursor: pointer;
}

.close:hover,
.close:focus,
.close_smartphone:hover,
.close_smartphone:focus {
cursor: pointer;
}

.close svg,
.close_smartphone svg {
color:#478cd1;
font-size:4vw;
position:absolute;
top:1vw;
right:1vw;
}

.hide_portfolio {
cursor: pointer;
background-color:#fff;
border: none;
outline: none;
display:block;
width:100%;
position:relative;
height:1.25vw;
}

.hide_portfolio svg {
display: block;
float: right;
position: relative;
font-size:1.75vw;
line-height:1.25vw;
padding: 0;
margin:0;
margin: -0.25vw 0 0 0;
}

.hide_portfolio.gallery_closed svg {
color: #85b3e1;
transition: 0.5s ease-out;
}

.hide_portfolio.gallery_opened svg {
color:#CCC;
transition: 0.5s ease-out;
}

.hide_portfolio.gallery_closed svg:last-of-type {
margin-right: -0.5rem;
color: #478cd1;
transition: 0.5s ease-out;
}

.hide_portfolio.gallery_opened svg:last-of-type {
margin-right: -0.5rem;
color: #AAA;
transition: 0.5s ease-out;
}

.hide_portfolio h5 {
padding-right:0;
}

.gallery_row {
width:100%;
float:left;
display:block;
max-height:0;
margin-top:0;
transition: max-height 0.5s ease-out;
overflow:hidden;
}

.gallery_opened> .gallery_row:last-child {
margin-bottom:0.5vw;
}

.question {
cursor: pointer;
background-color:#fff;
border: none;
outline: none;
width:100%;
position:relative;
display: block;
margin: 1vw 0 0 0;
float:left;
}

.question svg {
position:relative;
display: block;
float:right;
font-size:1.5vw;
line-height:1.5vw;
}

.q_phrase {
display: block;
float: left;
font-size: 1vw;
line-height: 1.5vw;
font-weight: 400;
color: #000;
}

.question>.q_phrase span {
float: left;
display: block;
}

.question>.q_phrase svg {
font-size: 1.5vw;
color: #CCC !important;
padding: 0 0.5vw 0 0 !important;
height: auto;
display: block;
float: left;
}
.question>.q_phrase svg:last-child {
padding:0 0 0 0.5vw !important;
}

.question.answer_opened svg {
color:#CCC;
transition: color 0.5s ease-out;
}
.question.answer_closed svg {
color:#478cd1;
transition: color 0.5s ease-out;
}

.answer {
display:block;
width:100%;
overflow: hidden;
transition: max-height 0.5s ease-out;
text-align:justify;
float:left;
line-height: 1.5;
margin:0;
max-height: 0;
}

.answer:last-child {
margin-bottom:0.5vw
}

.answer p {
padding: 0.75vw 1vw;
letter-spacing:0.01vw;
color: #000;
font-style: italic;
background-color: #e0ecf7;
margin:0.5vw 0;
font-size:0.85vw;
}

.answer a,
.answer a:active,
.answer a:focus,
.answer a:visited {
color: #478cd1;
text-decoration: none;
font-weight: bold;
}

#return_to_top_btn {
font-family: 'Font Awesome SOLID';
display: block;
position: fixed;
bottom: 1.5vw;
right: 1.25vw;
z-index: 0;
border: none;
outline: none;
background-color: #478cd1;
color: #fff;
cursor: pointer;
width: 3vw;
height: 3vw;
transition: ease-in 0.25s;
opacity: 0;
text-align: center;
font-size: 2vw;
line-height: 3vw;
padding: 0;
box-shadow: 0.25vw 0.25vw #fff;
}

#return_to_top_btn:hover {
background-color: #c2d9f0;
transition: ease-in 0.25s;
}
}

@media (orientation: portrait),
(max-width:1089px) {

html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
margin:0;
padding:0;
scroll-behavior: smooth;
overflow-x:hidden;
}
	
body {
margin: 0;
padding:0;
font-size: 2vw;
height: 100%;
width: 100%;
overflow-x: hidden;
background: rgb(238,238,238);
background: linear-gradient(-60deg, rgba(238,238,238,1) 0%, rgba(241,241,241,1) 100%);
}

h1, h2, h3, h4, h5, h6, h7 {
float: left;
margin: 0;
}

h1 {
color:#85b3e1;
font-size:4vw;
line-height:1;
font-weight: 400;
letter-spacing: 0.05rem;
grid-column: 1/3;
grid-row: 1;
}

h2 {
color:#478cd1;
font-size:5vw;
line-height:1;
font-weight: 700;
letter-spacing: 0.05rem;
grid-column: 1/3;
grid-row: 2;
}

h3 {
font-size:3vw;
line-height:1;
font-weight: 700;
display:block;
width:100%;
background-color:#478cd1;
padding: 1vw;
color:#fff;
float:left;
letter-spacing: 0.01vw;
}

h4 {
font-size:2.5vw;
line-height:1;
font-weight: 700;
display:block;
width:100%;
padding: 1.5vw 0 1vw 0;
color:#478cd1;
}

h5 {
font-size:1.75vw;
line-height:1;
font-weight: 400;
color: #AAA;
float: left;
width: auto;
padding: 0.5vw 0 0 0;
}

h6 {
color:#AAA;
font-size:1.75vw;
line-height:1;
font-weight: 400;
display:block;
float:left;
}

h7 {
color:#AAA;
font-size:1.75vw;
line-height:1;
font-weight: 400;
display:block;
float:right;
}

h3>svg,
h4>svg,
h5>svg,
h6>svg,
button>svg,
a>svg,
span>svg {
margin-right:1.5vw;
}

p {
font-size: 1.75vw;
line-height: 1.5;
margin:0;
}

button {
font-family: Montserrat;
padding:0;
}


.main_container {
width: 100%;
height: 100%;
margin: 0;
padding:0;
display:block;
float: left;
position:relative;
background-image:url(../images/wallpaper_mainpage.svg);
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
opacity:1;
animation: bg_appear 0.2s ease-out;
}

.row {
display: inline-grid;
width: 100%;
position: relative;
grid-auto-rows: minmax(auto, auto);
grid-template-columns: repeat(2, 1fr);
}

.header {
padding:2vw;
}

.header_separator {
display: block;
width: 100%;
position: relative;
float: left;
height:17vw;
line-height: 1;
}

.badge_img {
float:left;
z-index:100;
display:block;
height:5vw;
width:auto;
margin:-1vw 0 0 2vw;
}

.none {
position: relative;
float: left;
display: block;
}

.separator {
display: none
}

.footer_separator {
display: none
}

.position_button {
width:33.33%;
display:flex;
float:left;
justify-content: center;
}

.dl_button {
color:#fff;
background-color: #478cd1;
font-weight: 700;
font-size:1.5vw;
padding: 1.5vw 1.5vw 1vw;
text-decoration: none;
display: block;
width:auto;
float:left;
text-align: center;
}

.dl_button svg {
line-height: 5vw;
font-size: 5vw;
margin: 0vw 0vw 1vw;
}

.content_inblock {
display: block;
text-align: justify;
width: 100%;
float: left;
margin: 1vw 0;
position: relative;
height: 10.5vw;
overflow: hidden;
}

.content_list {
display:block;
text-align:justify;
width: 100%;
float:left;
list-style: none;
padding: 1.5vw 3vw 1.5vw 5vw;
color: #000;
font-style: italic;
background-color: #e0ecf7;
margin:1.5vw 0 0 0;
}

.content_list li::before {
font-family:"Font Awesome SOLID";
content: "\f45c";
color: #478cd1;
display: inline-block;
width: 2vw;
margin-left: -2vw;
font-size: 1vw;
font-style:normal !important;
}

.content_list_items {
margin-bottom:0.75vw;
padding-left: 0vw;
line-height: 1.5;
}

.content_list_items:last-child {
margin-bottom:0;
}

.contact span {
width: 100%;
display: block;
}

.contact span>svg {
color:#478cd1;
}

.contact a,
.contact a:hover,
.contact a:visited,
.contact a:focus {
color:#000;
text-decoration: none;
}

.left_tab,
.middle_tab,
.right_tab,
.large_left,
.last_tab{
overflow:hidden;
}

.left_tab,
.large_left,
.last_tab {
width:calc(100% - 4vw);
padding:0;
background-color:#fff;
margin:0 2vw 2vw 2vw;
grid-column: 1/3;
grid-row: 1;
}

.right_tab,
.middle_tab {
width:auto;
padding:0;
background-color:#fff;	
}
.middle_tab {	
margin:0 1vw 2vw 2vw;
grid-column: 1;
grid-row: 2;
}		
.right_tab {
margin:0 2vw 2vw 1vw;
grid-column: 2;
grid-row: 2;
}
.last_tab {
grid-column: 1/3;
grid-row: 2;
}
	
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #478cd1;
color: #fff;
cursor: pointer;
padding: 0.5rem;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 1rem;
line-height: 1;
font-weight: 700;
}

.hide_job_details {
cursor: pointer;
padding: 0;
width: 100%;
border: none;
text-align: left;
outline: none;
background-color:#fff;
position:relative;
margin: 1.5vw 0 0 0;
float:left;
}

.hide_skill_details {
color: #478cd1;
cursor: pointer;
border: none;
text-align: left;
outline: none;
font-size:2.5vw;
line-height:1;
font-weight: 700;
display:block;
width:100%;
padding: 1.5vw 0 1vw 0;
background-color:#fff;
position:relative;
}

.hide_job_details svg {
float:right;
margin:0;
font-size: 2.5vw;
transition: color 0.5s ease-out;
}
.hide_job_details h4 {
float:left;
margin:0;
width:calc(100% - 4vw);
padding-top: 0;
}

.hide_job_details.expanded svg {
animation: open_collapse 0.5s ease-out;
transform: rotateZ(90deg);
color:#CCC;
}

.hide_job_details.compacted svg {
animation: close_collapse 0.5s ease-out;
transform: rotateZ(00deg);
color:#478cd1;
}

.skilltoggle {
float:right;
position: absolute;
right: 0;
margin:0;
}

.front_skill {
z-index:25;
color:#478cd1;
transition: color 0.5s ease-out;
}

.back_skill {
z-index:15;
color:#c2d9f0;
transition: color 0.5s ease-out;
}

.skill_opened>.front_skill {
color:#777;
transition: color 0.5s ease-out;
}

.skill_opened>.back_skill {
color:#CCC;
transition: color 0.5s ease-out;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #85b3e1;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0.5vw 2vw;
background-color: #fff;
display:block;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.standard_content,
.skill_content {
padding: 0.5vw 2vw;
background-color: #fff;
display:block;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.academics_content {
padding: 0.5vw 2vw 0;
background-color: #fff;
display:block;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.job_details {
padding: 0;
display:block;
width:100%;
overflow: hidden;
transition: max-height 0.5s ease-out;
font-size:1.5vw;
text-align:justify;
float:left;
line-height: 1.5;
margin:0 0 1vw;
max-height: 0;
}

.job_details:last-child {
margin-bottom:1rem
}

.skill_details {
padding: 0;
margin:0;
display:block;
width:100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}

.content p {
display:block;
text-align:justify;
width: 100%;
float:left;
margin:0.75vw 0;
}

.standard_content p {
display:block;
text-align:justify;
width: 100%;
float:left;
margin:0.75vw 0 1vw;
}

.academics_content p {
margin: 1vw 0 1.5vw 0;
font-style: italic;
font-size: 1.5vw;
}


.footer_content {
text-align:center;
background-color:#478cd1;
color:#fff;
position:relative;
height:4vw;
width: 100%;
float:left;
}

.footer_content p {
line-height:4vw;
font-size:1.5vw;
}

.footer_content a,
.footer_content a:active,
.footer_content a:focus,
.footer_content a:visited {
color:#fff;
text-decoration:none;
font-weight:700;
}

.animated100 {
width:100%;animation: fill_100 1.5s ease-out;}
.animated90 {
width:90%;animation: fill_90 1.5s ease-out;}
.animated80 {
width:80%;animation: fill_80 1.5s ease-out;}
.animated70 {
width:70%;animation: fill_70 1.5s ease-out;}
.animated60 {
width:60%;animation: fill_60 1.5s ease-out;}
.animated50 {
width:50%;animation: fill_50 1.5s ease-out;}
.animated40 {
width:40%;animation: fill_40 1.5s ease-out;}
.animated30 {
width:30%;animation: fill_30 1.5s ease-out;}
.animated20 {
width:20%;animation: fill_20 1.5s ease-out;}

.progress {
display: block;
height: 3.5vw;
overflow: hidden;
background-color: #c2d9f0;
float:left;
width:100%;
margin-bottom:1.25vw;
}

.progress-bar {
display: block;
line-height: 3.5vw;
font-size: 1.75vw;
color: #fff;
text-align: left;
float:left;
margin:0;
transition: width 0.25s ease-in;
padding-left:1.5vw;
background-color: #478cd1;
}

/* Encart de disponibilité */

.availability,
.availability a {
background-color: #c2d9f0;
color: #478cd1;
width: auto;
display: block;
position: absolute;
right: -0.25vw;
top: 27.5vw;
transform: rotateZ(5deg);
z-index: 10;
text-decoration: none;
white-space: nowrap;
padding: 1vw 1.5vw;
box-shadow: 0.5vw 0.5vw 0 0 #85b3e1;
font-size: 2.25vw;
}

.availability svg {
margin-right:0.75vw;
}

.available_zoom {
animation-name: zoomin;
animation-duration: 3s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.first_fade {
animation-name: firstfade;
animation-duration: 0.5s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.second_fade {
animation-name: secondfade;
animation-duration: 1s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.third_fade {
animation-name: thirdfade;
animation-duration: 1.5s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.fourth_fade {
animation-name: fourthfade;
animation-duration: 2s;
animation-timing-function:ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
}

.portfolio_main {
display:block;
width:100%;
height:auto;
padding:2vw 2vw 0.5vw;
position:relative;
float:left;
}

.project_row {
width:100%;
display:block;
float:left;
height:auto;
margin-bottom:1vw;
}

.project_row h4 {
padding:0;
width:auto;
}

.project_row p {
display: block;
text-align: justify;
width: 100%;
float: left;
margin: 0;
}

/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */

.main-gallery {
width:100%;
margin:1.75vw 0 0;
display:block;
float:left;
position:relative;
height: 100%;
overflow:hidden;
}

.gallery-cell {
margin:0 1vw;
height:auto;
width:auto;
pointer-events: none;
}

.gallery-cell img {
height:25vw;
width:auto;
opacity:0.3;
border: 0.2vw solid #AAA;
pointer-events: none;
}

.gallery-cell.is-selected img {
opacity:1;
box-shadow:0.4vw 0.4vw 0 0 #478cd1;
border-top:0.2vw solid #478cd1;
border-left:0.2vw solid #478cd1;
border-bottom:none;
border-right:none;
pointer-events:auto;
}

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
 -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: #85b3e1;
  border: none;
  color: #fff;
  transition: background 0.5s ease-out;
}

.flickity-button:hover {
  background: #478cd1;
  cursor: pointer;
  transition: background 0.5s ease-out;
}

.flickity-button:focus {
  outline: none;
  opacity: 1;
  transition:opacity 0.5s ease-out;
}

.flickity-button:active {
  opacity: 1;
  transition:opacity 0.5s ease-out;
}

.flickity-button:disabled {
  opacity: 0;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
  transition:opacity 0.5s ease-out;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
top: 45%;
width: 6vw;
height: 6vw;
/* vertically center */
transform: translateY(-50%);
transition:opacity 0.5s ease-out;
}

.flickity-prev-next-button.previous {
left: 0;
}
.flickity-prev-next-button.next {
right: 0;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 0;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 0;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  transition:opacity 0.5s ease-out;
  
}

/* ---- page dots ---- */

.flickity-page-dots {
position: relative;
width: 100%; 
padding: 0;
margin: 1.5vw 0 0 0;
list-style: none;
text-align: center;
line-height: 1;
display:block;
float:left;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 2vw;
  height: 2vw;
  margin: 0 1vw;
  background: #478cd1;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* modal windows */

.modal {
display: none;
position: fixed;
z-index: 40; /* Sit on top */
padding: 10vw 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(255,255,255,0.85);
transition:opacity 3s ease-out;
text-align:center;
}

.modal_content {
margin: auto;
display: block;
width: calc(100% - 20vw);
min-height:min-content;
max-height:calc(100% - 20vw);
overflow-x:hidden;
overflow-y:auto;
animation: displaymodal 0.5s ease-out;
z-index:100;
text-align:center;
border: 0.2vw solid #478cd1;
box-shadow: 0.4vw 0.4vw 0 0 #478cd1;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}

.modal_content_smartphone {
margin: auto;
display: inline-block;
max-width:calc(100% - 20vw);
min-height:min-content;
height:100%;
overflow-x:hidden;
overflow-y:auto;
animation: displaymodal 0.5s ease-out;
z-index:100;
position:relative;
text-align:center;
border: 0.2vw solid #478cd1;
box-shadow: 0.4vw 0.4vw 0 0 #478cd1;
}

.img_modal {
width:100%;
height:auto;
float:left;
}

.img_modal_smartphone {
width:auto;
height:100%;
float:left;
}

.close,
.close_smartphone {
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
z-index:50;
text-decoration: none;
cursor: pointer;
}

.close:hover,
.close:focus,
.close_smartphone:hover,
.close_smartphone:focus {
cursor: pointer;
}

.close svg,
.close_smartphone svg {
color:#478cd1;
font-size:6vw;
position:absolute;
top:2vw;
right:2vw;
}

.hide_portfolio {
cursor: pointer;
background-color:#fff;
border: none;
outline: none;
display:block;
width:100%;
position:relative;
height:2.5vw;
}

.hide_portfolio svg {
display: block;
float: right;
position: relative;
font-size:2.5vw;
line-height:2.5vw;
padding: 0;
margin:0;
margin: -0.5vw 0 0 0;
}

.hide_portfolio.gallery_closed svg {
color: #85b3e1;
transition: 0.5s ease-out;
}

.hide_portfolio.gallery_opened svg {
color:#CCC;
transition: 0.5s ease-out;
}

.hide_portfolio.gallery_closed svg:last-of-type {
margin-right: -1vw;
color: #478cd1;
transition: 0.5s ease-out;
}

.hide_portfolio.gallery_opened svg:last-of-type {
margin-right: -1vw;
color: #AAA;
transition: 0.5s ease-out;
}

.hide_portfolio h5 {
padding-right:1.5vw;
}

.gallery_row {
width:100%;
float:left;
display:block;
max-height:0;
margin-top: 1.5vw;
transition: max-height 0.5s ease-out;
overflow:hidden;
}

.portfolio_main .project_row:last-child {
margin-bottom:0vw;
}
	
.portfolio_main> .project_row div:last-child {
margin-bottom:0.5vw;
}

.question {
cursor: pointer;
background-color:#fff;
border: none;
outline: none;
width:100%;
position:relative;
display: block;
margin: 1.5vw 0 0 0;
float:left;
}

.question svg {
position:relative;
display: block;
float:right;
font-size:3vw;
line-height:1rem;
}

.q_phrase {
display: block;
float: left;
font-size: 2vw;
line-height: 3vw;
font-weight: 400;
color: #000;
}

.question>.q_phrase span {
float: left;
display: block;
}

.question>.q_phrase svg {
font-size: 2vw;
color: #CCC !important;
padding: 0 0.5vw 0 0 !important;
height: auto;
display: block;
float: left;
}
.question>.q_phrase svg:last-child {
padding:0 0 0 0.5vw !important;
}

.question.answer_opened svg {
color:#CCC;
transition: color 0.5s ease-out;
}
.question.answer_closed svg {
color:#478cd1;
transition: color 0.5s ease-out;
}

.answer {
display:block;
width:100%;
overflow: hidden;
transition: max-height 0.5s ease-out;
font-size:1.75vw;
text-align:justify;
float:left;
line-height: 1.5;
margin:0;
max-height: 0;
}

.answer:last-child {
margin-bottom:2vw
}

.answer p {
padding: 1vw 2vw;
color: #000;
font-style: italic;
background-color: #e0ecf7;
margin:1vw 0 0 0;
font-size:1.5vw;
}

.answer a,
.answer a:active,
.answer a:focus,
.answer a:visited {
color: #478cd1;
text-decoration: none;
font-weight: bold;
}

#return_to_top_btn {
font-family: 'Font Awesome SOLID';
display: block;
position: fixed;
bottom: 3vw;
right: 3.25vw;
z-index: 0;
border: none;
outline: none;
background-color: #478cd1;
color: #fff;
cursor: pointer;
width: 8vw;
height: 8vw;
transition: ease-in 0.25s;
opacity: 0;
text-align: center;
font-size: 5vw;
line-height: 8vw;
padding: 0;
box-shadow: 0.75vw 0.75vw #fff;
}

#return_to_top_btn:hover {
background-color: #c2d9f0;
transition: ease-in 0.25s;
}
}

/* Animations */

@keyframes bg_appear {
from{opacity:0;}
to {opacity:1;}
}

@keyframes open_collapse {
from{transform: rotateZ(0deg)}
to {transform: rotateZ(90deg)}}

@keyframes close_collapse {
from{transform: rotateZ(90deg)}
to {transform: rotateZ(0deg)}}

/* Barres de compétences */

@keyframes fill_100 {
from {width:0;background-color:#c2d9f0;}
to {width:100%;background-color:#478cd1;}}

@keyframes fill_90 {
from {width:0;background-color:#c2d9f0;}
to {width:90%;background-color:#478cd1;}}

@keyframes fill_80 {
from {width:0;background-color:#c2d9f0;}
to {width:80%;background-color:#478cd1;}}

@keyframes fill_70 {
from {width:0;background-color:#c2d9f0;}
to {width:70%;background-color:#478cd1;}}

@keyframes fill_60 {
from {width:0;background-color:#c2d9f0;}
to {width:60%;background-color:#478cd1;}}

@keyframes fill_50 {
from {width:0;background-color:#c2d9f0;}
to {width:50%;background-color:#478cd1;}}

@keyframes fill_40 {
from {width:0;background-color:#c2d9f0;}
to {width:40%;background-color:#478cd1;}}

@keyframes fill_30 {
from {width:0;background-color:#c2d9f0;}
to {width:30%;background-color:#478cd1;}}

@keyframes fill_20 {
from {width:0;background-color:#c2d9f0;}
to {width:20%;background-color:#478cd1;}}

/* Modale */
@keyframes displaymodal {
from {opacity:0}
to {opacity:1}
}

@keyframes open_collapse {
from{transform: rotateZ(0deg)}
to {transform: rotateZ(90deg)}}

@keyframes close_collapse {
from{transform: rotateZ(90deg)}
to {transform: rotateZ(0deg)}}

@keyframes zoomin {
0% {
opacity:0;
transform:scale(1.25);
transform:rotateZ(5deg);
}
95% {
opacity:0;
transform:scale(1.25);
transform:rotateZ(5deg);
}
100% {
opacity:1;
transform:scale(1);
transform:rotateZ(5deg);
}}

@keyframes firstfade {
0% {
opacity:0;
transform: translateY(-0.5rem);
}
70% {
opacity:0.2;
}
100% {
opacity:1;
transform: translateY(0rem);
}
}

@keyframes secondfade {
0% {
opacity:0;
transform: translateY(-0.5rem);
}
50% {
opacity:0;
transform: translateY(-0.5rem);
}
85% {
opacity:0.2;
}
100% {
opacity:1;
transform: translateY(0rem);
}
}

@keyframes thirdfade {
0% {
opacity:0;
transform: translateY(-0.5rem);
}
66% {
opacity:0;
transform: translateY(-0.5rem);
}
90% {
opacity:0.2;
}
100% {
opacity:1;
transform: translateY(0rem);
}
}

@keyframes fourthfade {
0% {
opacity:0;
transform: translateY(-0.5rem);
}
75% {
opacity:0;
transform: translateY(-0.5rem);
}
92.5% {
opacity:0.2;
}
100% {
opacity:1;
transform: translateY(0rem);
}
}