@font-face {
  font-family: 'Louis_George_Cafe';
  src: url('Louis_George_Cafe.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Louis_George_Cafe_Bold';
  src: url('Louis_George_Cafe_Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

header { grid-area: header; }
#sidebar { grid-area: menu; }

html, body {
    overflow-x: hidden;
    height: 100%;
	padding: 0;
    margin: 0;
}

.header_menu_top_fixed {
	display: grid;
	grid-template-areas:
    'menu header header header header header header header header header'
	'menu header header header header header header header header header'
	'menu header header header header header header header header header'
	'menu header header header header header header header header header'
	'menu header header header header header header header header header'
	'menu header header header header header header header header header';
	grid-template-rows: 15% 15% 15% 15% 15% 15%;
	grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: Louis_George_Cafe, sans-serif;
	background-image: url(../pictures/couv8_cv.jpg);
    background-size: cover;
	height: 100%;
}

h1 {
    color: white;
    font-family: Louis_George_Cafe_Bold;
}

.texting { 
	grid-area: text; 
	text-decoration: none;
    color: rgb(201,168,120);
	font-family: Louis_George_Cafe_Bold, sans-serif;
	font-size: 2em;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	.texting { 
		font-size: 1em;
		height: 3em;
	}
}

.presentation {
	grid-area: pres; 
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10%;
}

.mypicture {
	/*grid-area: mypicture;*/
	display: flex;
	border-radius: 50%;
	background-image: url(../pictures/Photo_site.jpg);
	width: 125px;
	height: 125px;
	background-size: cover;  
    background-repeat: no-repeat;
    background-position: center center; 
}

header {
	display: grid;
	grid-template-areas:
    '. . . . . . . . myCV'
	'. . . . . . . . .'
	'. . . . . . . . .'
	'. . . . . . . . .'
	'. . . . . . . . .'
    '. pres pres pres pres pres pres pres .';
	grid-template-columns: 11% 11% 11% 11% 11% 11% 11% 11% auto;
}

@media screen and (max-width: 1024px) {
	header {
		display: grid;
		grid-template-areas:
		'. . . . . . . . myCV'
		'. pres pres pres pres pres pres pres .'
		'. pres pres pres pres pres pres pres .'
		'. pres pres pres pres pres pres pres .'
		'. pres pres pres pres pres pres pres .'
		'. pres pres pres pres pres pres pres .';
		grid-template-columns: 11% 11% 11% 11% 11% 11% 11% 11% auto;
	}
}

.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
	scroll-snap-type: y mandatory;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 1.25px;
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    left: 0;
    width: 250px;
    transform: translateX(-250px);
    transition: transform 250ms ease-in-out;
	background: inherit;
    box-shadow: inherit;
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type="checkbox"]:checked ~ #openSidebarMenu {
    transform: translateX(250px);
}

input[type="checkbox"]:checked ~ #sidebar {
    transform: translateX(250px);
	width: 5%;
	background: #325D7D;
    box-shadow: 0 250px 100px -100px rgb(201,168,120) inset;
}

@media screen and (max-width: 1024px) {
input[type="checkbox"]:checked ~ #sidebar {
    transform: translateX(250px);
	width: 10%;
	background: #325D7D;
    box-shadow: 0 250px 100px -100px rgb(201,168,120) inset;
}
}

@media screen and (max-width: 800px) {
input[type="checkbox"]:checked ~ #sidebar {
    transform: translateX(250px);
	width: 15%;
	background: #325D7D;
    box-shadow: 0 250px 100px -100px rgb(201,168,120) inset;
}
}

@media screen and (max-width: 500px) {
input[type="checkbox"]:checked ~ #sidebar {
    transform: translateX(250px);
	width: 20%;
	background: #325D7D;
    box-shadow: 0 250px 100px -100px rgb(201,168,120) inset;
}
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(250px);
	width: 5%;
	background: #325D7D;
    box-shadow: 0 250px 100px -100px rgb(201,168,120) inset;
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 99;
    top: 0px;
    left: 15px;
    height: 32px;
    width: 32px;
    transform: translateX(0px);
    transition: transform 250ms ease-in-out, border-color 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-color: rgba(50,93,125,0.4);
    border-width: 1px;
    border-radius: 0.1em;
    border-style: solid;
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin: 1em;
}

@media screen and (max-width: 1024px) {
	.sidebarIconToggle {
		margin-left: 3em;
	}
}

.sidebarIconToggle:hover {
	border-color: rgb(50,93,125);
	border-width: 1px;
    border-radius: 0.1em;
    border-style: solid;
    padding-left: 0.2em;
    padding-right: 0.2em;
}

.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: rgb(50,93,125);
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
	height: 1px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
	height: 1px;
    width: 0.8em;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
	height: 1px;
    width: 0.8em;
}
input[type=checkbox]:checked ~ #sidebar > .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ #sidebar > .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    /*transform: rotate(135deg);*/
	margin-top: -5px;
	width: 18px;
}
input[type=checkbox]:checked ~ #sidebar > .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-90deg);
	width: 15px;
}

#sidebar {
	position: absolute;
    top: 0px;
    left: 0px;
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 10%;
    /*background: black;*/
    height: 100%;
    transform: translateX(0px);
    transition: background 2s,width 2s ease-in-out, transform 2s ease-in-out;
	z-index: 1000;
}

.gap_filler{
	width: 100%;
	height: 80%;
}

.main {
	top: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0px;
	overflow-y: scroll;
}

.myCV {
	grid-area: myCV;
	display: flex;
	background-position: center;
}

.CV_button {
	border-style: solid;
	border-radius: 4px;
	border-width: 2x;
	margin: auto;
	margin-top: 1em;
	padding: 0.6em;
	border-color: rgba(50,93,125,0.4);
	transition: border-color 0.5s ease-in-out;
	text-decoration: none;
	color: rgb(50,93,125);
	font-family: Louis_George_Cafe, sans-serif;
}

@media screen and (max-width: 1024px) {
	.CV_button {
		margin-right: 1em;
		font-weight: 700;
		color: white;
	}
}

.CV_button:hover {
	border-color: rgb(50,93,125);
}

.transparent_first {
	height: 100%;
	width: 100%;
	scroll-snap-align: center;
	display: grid;
	grid-template-areas:
    '. . . . . . . . myCV myCV'
	'. . . . . . . . . .'
	'. . . . . . . . . .'
	'. . . . . . . . . .'
	'. . . . . . . . . .'
    '. . . . . . . . . .';
	grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}

@media screen and (max-width: 1024px) {
	.transparent_first {
		height: 100%;
		width: 100%;
		scroll-snap-align: center;
		display: grid;
		grid-template-areas:
		'. . . . . . myCV myCV myCV myCV'
		'. . . . . . . . . .'
		'. . . . . . . . . .'
		'. . . . . . . . . .'
		'. . . . . . . . . .'
		'. . . . . . . . . .';
		grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
	}
}

.transparent_inter {
	height: 25%;
	width: 100%;
}

.main_data{
	height: 100%;
    width: 33%;
    margin: auto;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	font-family: Louis_George_Cafe, sans-serif;
}

@media screen and (max-width: 1024px) {
.main_data{
    /*padding-left: 10%;*/
	/*width: 60%;*/
	width: 100%;
	margin: unset;
	height: 15%;
	/*margin-left: 20%;*/
}
}

.centering_container {
	width: auto;
}

.centering_container_data {
	width: auto;
	padding-left: 1em;
}

@media screen and (min-width: 1024px) {
.centering_container {
	width: auto;
	display: flex;
    flex-direction: column;
}
}

@media screen and (max-width: 1024px) {
.centering_container {
	margin-left: 0.5em;
	margin-right: 0.5em;
}
}

@media screen and (min-width: 1024px) {
.centering_container_data {
	width: auto;
	display: flex;
    flex-direction: column;
}
}

.main_title{
	color: rgb(255,255,255);
    font-size: 2.5em;
    font-weight: 700;
}

@media screen and (max-width: 1024px) {
	.main_title{
		color: rgb(255,255,255);
		font-size: 1.2em;
		font-weight: 700;
		margin-top: 0em;
		margin-bottom: 0.2em;
	}
}

.School_name {
	color: rgb(255,255,255);
    margin-bottom: 0;
	text-decoration: underline;
}

@media screen and (max-width: 1024px) {
.School_name {
	    font-size: 1em;
}
}

.School_subject {
	color: rgb(255,255,255);
	font-size: 0.9em;
	margin: 0;
}

.School_explain {
	color: rgb(255,255,255);
    margin-bottom: 0;
	font-size: 0.8em;
}

#explication_data{
	height: 100%;
    width: 33%;
    margin: auto;
	display: flex;
    justify-content: center;
    align-items: center;
	font-family: Louis_George_Cafe, sans-serif;
}

@media screen and (max-width: 1024px) {
	#explication_data{
		height: 65%;
		width: 100%;
		margin-right: auto;
		margin-left: 1em;
		margin: unset;
		align-items: flex-start;
	}
}

#explication_data_side{
	height: 100%;
    width: 33%;
    margin: auto;
	display: flex;
    justify-content: center;
    align-items: center;
	font-family: Louis_George_Cafe, sans-serif;
}

@media screen and (max-width: 1024px) {
	#explication_data_side{
		height: 65%;
		width: 100%;
		margin-right: auto;
		margin-left: 1em;
		margin: unset;
		align-items: center;
	}
}

#explication_data_fluid {
	height: 100%;
    width: 33%;
    margin: auto;
	display: flex;
    justify-content: center;
    align-items: center;
	font-family: Louis_George_Cafe, sans-serif;
}

@media screen and (max-width: 1024px) {
	#explication_data_fluid {
		width: 100%;
		margin-right: auto;
		margin-left: 1em;
		margin: unset;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media screen and (min-width: 1024px) {
.explication_data_project {
	    position: relative;
}
}

#project_data{
	height: 100%;
    width: 33%;
    right: 0;
	display: flex;
    justify-content: center;
    align-items: center;
	font-family: Louis_George_Cafe, sans-serif;
}

@media screen and (max-width: 1024px) {
	#project_data{
		width: 100%;
		align-items: flex-end;
		flex-direction: row;
	}
}

.career_main {
	display: flex;
	background-image: url(../pictures/career_Sales.jpg);
	opacity: 0;
	transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   height: 100%;
   overflow-y: hidden;
   max-width: 100%;
    margin: auto;
    border-radius: 4px;
	scroll-snap-align: center;
	justify-content: center;
	background-position: center;
	flex-direction: column;
    justify-content: flex-start;
}

.career_main_display {
	opacity: 1;
}

.project_certif_main {
	display: flex;
	background-image: url(../pictures/career_Sales.jpg);
	opacity: 0;
	transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   height: 100%;
   overflow-y: hidden;
   max-width: 100%;
    margin: auto;
    border-radius: 4px;
	scroll-snap-align: center;
	justify-content: center;
	background-position: center;
	flex-direction: column;
    justify-content: flex-start;
}

.project_certif_main_display {
	opacity: 1;
}

@media screen and (min-width: 1024px) {
.explication_data_career {
		position: relative;
}
}

@media screen and (min-width: 1024px) {
.explication_data_project_certif {
		position: relative;
}
}

#data_deep_main canvas, .main_data {
    position: absolute;
}

@media screen and (max-width: 1024px) {
#data_deep_main canvas, .main_data {
    position: relative;
}
}

@media screen and (max-width: 1024px) {
#main_data_fluid {
	position: absolute;
}
}

#data_deep_main canvas, #project_data {
    position: absolute;
}

.data_deep_main {
	display: flex;
	background: rgb(35,39,65);
	opacity: 0;
	transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   max-height: 100%;
   max-width: 100%;
    margin: auto;
    border-radius: 4px;
	scroll-snap-align: center;
	position: relative;
	align-items: flex-start;
}

@media screen and (max-width: 1024px) {
	.data_deep_main {
		flex-direction: column;
		padding-left: 0.5em;
	}
}

.data_deep_main_display {
	opacity: 1;
}

.data_deep_main canvas {
	width: 100%;
	height: 100%;
}

.fluid_main {
	display: flex;
	background: rgb(0,0,0);
	opacity: 0;
	transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   max-height: 100%;
   overflow-y: hidden;
   max-width: 100%;
    margin: auto;
    border-radius: 4px;
	scroll-snap-align: center;
	justify-content: center;
}

@media screen and (max-width: 1024px) {
	.fluid_main {
		flex-direction: column;
		justify-content: flex-start;
		padding-left: 0.5em;
	}
}

.fluid_main_display {
	opacity: 1;
}

.fluid_main canvas {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.project_main {
	display: flex;
	background-image: url(../pictures/project_skills.jpeg);
	opacity: 0;
	transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   height: 100%;
   overflow-y: hidden;
   max-width: 100%;
    margin: auto;
    border-radius: 4px;
	scroll-snap-align: center;
	justify-content: center;
	background-position: center;
	flex-direction: column;
    justify-content: flex-start;
}

.project_main_display {
	opacity: 1;
}

.project_link {
	color: rgb(255,255,255);
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
.project_link {
	color: rgb(255,255,255);
    text-decoration: none;
	width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7em;
}
}

.project_link_enedis {
	color: rgb(255,255,255);
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
.project_link_enedis {
	width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7em;
}
}

.project_link_description {
	color: rgb(255,255,255);
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
.project_link_description {
	color: rgb(255,255,255);
    text-decoration: none;
	width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7em;
}
}

.project_link_white_paper {
	color: rgb(255,255,255);
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
.project_link_white_paper {
	color: rgb(255,255,255);
    text-decoration: none;
	width: 98%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7em;
}
}

.project_pic {
	margin-top: 0em;
    margin-bottom: 1.5em;
}

.urcompare_pic {
	width:15em;
}

@media screen and (max-width: 1024px) {
	.urcompare_pic {
		width:35%;
	}
}

.project_container {
	display: flex;
    /*justify-content: space-around;
    align-items: center;*/
	flex-direction: column;
}

@media screen and (max-width: 1024px) {
.project_container {
	display: flex;
    justify-content: space-around;
    align-items: flex-start;
	flex-direction: row;
}
}

.project_container_side {
	display: flex;
    /*justify-content: space-around;
    align-items: center;*/
	flex-direction: column;
}

@media screen and (max-width: 1024px) {
.project_container_side {
	display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
}

.fluid_project_pic {
	width:13em;
}

@media screen and (max-width: 1024px) {
	.fluid_project_pic {
		width: 75%;
	}
}