/*Vert : #008080 */
/*Bleu: #283D94 */
/*Gris: #C7C7C6 */

/* réglages généraux de la page */
html, body {
	font-size: 12px; /* valeur de base d'1 rem */
}
@font-face {
	src:  url('../fonts/W95FA.otf');
	font-family: 'Windows';
}
body {
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: 'Courier New',Courier,monospace;*/	
	background-color:#008080;
	color:black;
	margin: 0; padding: 0;
    width:100%; height:100%;
   overflow: hidden;
}

/* BACKGROUND / BUREAU */

.home-background {
	height: 100vh;
	width: 100%;
	background-color: #008080;
}

.home-background .windows-header {
	background-color: #C7C7C6;
	height: 740px;
	width: 1080px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow-y: scroll;
	border: double 3px grey;
	position: relative;
}

.home-background .windows-header.cv {
	height: 650px;
}

.home-background .windows-header.contact {
	height: 250px;
}

.home-background .windows-header.contact, .home-background .windows-header.contact .research-header {
		width: 450px;
}

.home-background .windows-header .research-header {
	background-color: #010081;
	height: 30px;
	width: 1080px;
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.home-background .windows-header .research-header  p {
	margin: 0 0 0 6px;
	padding: 8.2px;
	font-family: 'Windows';
	color: white;
	font-size: 15px;
}

.home-background .windows-header .research-header a {
	text-decoration: none;
}

.home-background .windows-header .research-header a .exit {
	width: 20px;
	height: 20px;
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
	background-color: #C7C7C6;
	margin: 0 6px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	font-family: 'arial';
	font-weight: bold;
}

.home-background .windows-header .windows-adressgeneral {
	display: flex;
	margin-top: 30px;
}
.home-background .windows-header .windows-adressgeneral .windows-flex {
		display: flex;
		align-items: center;
}

.home-background .windows-header .windows-adress {
	background-color: #C7C7C6;
	border: 1px solid #707070;
	height: 30px;
	width: 30%;
}

.home-background .windows-header .windows-adress p {
	width: 100%;
	font-size: 16px;
	font-family: 'Windows';
	margin-left: 7px;
}

.home-background .windows-header .windows-adress2 {
	background-color: white;
	border: 1px solid #707070;
	height: 30px;
	width: 40%;
}

.home-background .windows-header .windows-adress2 input {
	background-color: none;
	height: 100%;
	border: none;
	outline: 0;
	font-family: 'windows';
	font-size: 16px;
	width: calc(100% - 5px);
}

.home-background .windows-header .windows-adress2 p {
	width: 100%;
	font-size: 16px;
	font-family: 'Windows';
	margin-left: 7px;
	color: grey;
}

.home-background .windows-header .windows-adress3 {
	background-color: #C7C7C6;
	border: 1px solid #707070;
	height: 30px;
	width: 30%;
}

.home-background .windows-header .windows-adress3.cv {
	width: 100%;
}

.home-background .windows-header .windows-adress3 p {
	width: 100%;
	font-size: 16px;
	font-family: 'Windows';
	text-align: right;
	margin-right: 7px;
}

/* CONTENU CV */
.home-background .general-informations {
	width: 100%;
	display: flex;
}

.home-background .general-informations .photo-cv {
	width: 25%;
	border: gray 1px solid;
}

.home-background .general-informations .photo-cv .photo {
	width: calc(100% - 20px);
	border-radius: 29px;
	margin: 15px auto;
	display: block;
}

.home-background .general-informations .photo-cv .info-basics {
	font-size: 20px;
	font-family: 'windows';
	color: #283D94;
	margin-left: 27px;
	margin-bottom: 10px;
	line-height: 1.1;
}

.home-background .general-informations .photo-cv hr {
	width: 236px;
}

.home-background .general-informations .boite-text {
	background-color: white;
	width: 95%;
	margin: 0 auto;
	padding: 10px 0;
}

.home-background .general-informations .boite-text .icon-titre {
	height: 21px;
	height: 21px;
	margin-right: 5px;
}

.home-background .general-informations .boite-text .titre-boite {
	font-size: 20px;
	font-family: 'Windows';
	color: #283D94;
	text-align: center;
}
.home-background .general-informations .boite-text .text-about {
	padding: 0 10px;
	font-size: 13px;
	font-family: 'Windows';
	line-height: 1.2;
}

.home-background .general-informations .photo-cv .socials {
	text-align: center;
}

.home-background .general-informations .experiences {
	width: 25%;
	border: gray 1px solid;
	margin-top: 50px;
	padding-top: 9px;
}


/* PAGE CONTACT */

/* TASKBAR */
.taskbar {
	position: fixed;
	bottom:  0px;
	background-color: #C7C7C6;
	width: 100%;
	border-top:  white 2px solid;
	padding: 7px;
	display: flex;
	justify-content: space-between;
}

.icon-cv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90px;
	padding: 25px;
	padding-top: 35px;
}

.icon-cv a {
	color:  black;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.icon-cv .icon-internet {
	width: 48px;
	height: 48px;
}

.icon-cv p {
	text-align: center;
	font-family: 'Windows';
	font-size: 14px;
	line-height: 1.1;
}

.logo-start {
	width: 27px;
	height: 27px;
	padding-top: 8.5px;
}

.taskbar .start {
  display: flex;
  background: #C7C7C6;
  align-items: center;
  
  justify-content: center;
  width:  110px;
  padding: 7px 0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.taskbar .start:hover {
	box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #0a0a0a;
}

.img-window {
	height: 22px;
	width: 22px;
	margin-right: 14px;
}

.img-window1 {
	height: 22px;
	width: 22px;
}

.taskbar .start p {
	margin:  0 0 0 5px;
	font-family: 'Windows';
	font-size: 18px;
}

.taskbar .end {
	display: flex;
	justify-content: space-between;
  background: #C7C7C6;
  padding: 7px 0;
  width: 70px;
}

/* CONTACT */
.contact-general {
	height: calc(100% - 63px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-general .wrapper-contact {
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-general .wrapper-contact .contact-icon {
	width: 70px;
}

.contact-general .wrapper-contact .text-contact {
	margin-left: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.contact-general .wrapper-contact .text-contact h1 {
	font-family: 'windows';
	color: #5C5950;
	text-align: center;
	margin-bottom: 1.5em;
}

.contact-general .wrapper-contact .text-contact .contact-buttom {
	padding:  10px;
}

.contact-general .wrapper-contact .text-contact .contact-button a {
	text-decoration: none;
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
	text-align: center;
	padding: 1.2em 3em;
	color: #5C5950;
	font-family: 'Windows';
}

.contact-general .wrapper-contact .text-contact .contact-button a:focus {
	box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #0a0a0a;
}

/* PORTFOLIO */
.home-background .general-informations .experiences.visu {
	width: 60%;
	margin-top: 0;
}

.home-background .general-informations .experiences.visu .img-portfolio {
	width: 100%;
}

.home-background .general-informations .experiences.details {
	width: 40%;
	margin-top: 0;
}
.home-background .general-informations .boite-text.no-bg {
	background-color: transparent;
}

.home-background .general-informations .boite-text .text-about.pf{
	font-size: 17px;
	line-height: 1.4;
}



/* NAV PORTFOLIO */
.navigation-portfolio {
	display: flex;
	flex-wrap: wrap;
}

.navigation-portfolio .pf-nav {
  display: flex;
  background: #C7C7C6;
  align-items: center;
  justify-content: center;
  
  padding: 7px 0;
  margin: 10px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  color: #111;
}

.navigation-portfolio .pf-nav:hover {
	box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #0a0a0a;
}

.navigation-portfolio .pf-nav:hover p {
	bottom: 1px;
	right: 1px;
}

.navigation-portfolio .pf-nav.active {
	background: #AAA;
}

.navigation-portfolio .pf-nav p {
	margin: 0 10px;
	font-family: 'Windows';
	font-size: 18px;
	padding: 2px;
	position: relative;
}

.navigation-portfolio .pf-nav.active p {
  border: 1px dotted #444;
	
}


/* RESPONSIVE  */
@media screen and (max-width: 1100px) {
	.windows-header.cv, .home-background .windows-header.cv .research-header {
		width: 720px !important;
	}
}

@media screen and (max-width: 750px) {
	.windows-header.cv, .home-background .windows-header.cv .research-header {
		width: 550px !important;
	}
}

@media screen and (max-width: 570px) {
	.windows-header.cv, .windows-header.contact, .home-background .windows-header.cv .research-header, .home-background .windows-header.contact .research-header {
		width: 340px !important;
	}

	.home-background .general-informations {
		flex-direction: column;
	}

	.home-background .general-informations > div {
		width: 100% !important;
	}
}