@charset "utf-8";
/* CSS Document */

/************************************************* SOMMAIRE ****************************************************/
/*
	
I. GENERAL
	1. Font face
	
II. HEADER
	1. Liens en fixe
	2. Header

III. PROJETS

IV. CV

V. MEDIA QUERIES
	1. Général
	3. Gestion du CV
	4. Fonds simplifiés
	5. Petits ecrans


/************************************************* GENERAL ****************************************************/

* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}
body {
	color:#333;
	font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
	font-size:12px;
	width:100%;
}
:not(h1) {
	font-family: "Zilla Slab", serif;
}
ul{
	padding:0;
	margin:0;
	list-style:none;
}
a img{
	border:none;
}

footer {
	text-align: right;
}

footer a{
	display:inline-block;
	margin-right: 25px;
	color:#333;
	font-size:18px;
	line-height:50px;
	text-decoration:none;
	text-align:center;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.mentions {
	max-width: 80vw;
	margin: 0 auto 30px;
	text-align: center;
	font-size: 18px;
}

.mentions h2{
	font-size: 24px;
	font-weight: 200;
	margin: 30px 0 10px;
}

.mentions h2:first-child{
	font-size: 24px;
	margin-top: 0;
}


/************************************************* HEADER *********************************************************/

/*----------------------------------- Liens en fixe --------------------------------*/

.fixe{
	width:100%;
	background-color:#fff;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	overflow:hidden;
    border-bottom: 3px solid #000;
}
.fixe_liens{
	width:1280px;
	height:50px;
	margin:auto;
	text-align:center;
	font-size:0px;
}
.fixe_liens img {
	vertical-align: text-bottom;
}
.fixe_liens a{
	display:inline-block;
	width:24%;
	color:#000;
	font-size:18px;
	line-height:50px;
	text-decoration:none;
	text-align:center;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.fixe_liens a:hover{
	color: #ff5252;
}
.fixe_liens .langue img{
    vertical-align: -1px;
}

/*----------------------------------- Fond couleur --------------------------------*/

#bg-wrap{
  position: absolute;
  top: 42px;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

#bg-wrap svg{
  height: 100vh;
  width: 100vw;
}

#content-wrap{
	overflow: hidden;
	display: block;
	position: absolute;
	min-height: 100vh;
}
/*----------------------------------- Header --------------------------------*/

.header{
	width:100%;
	padding:0;
	text-align: center;
}
.header h1{
	padding: 100px 6vw 45px;
	font-family: "Noto Serif", serif;
	font-size: 4.5vw;
    font-weight: 100;
}
.header-project h1{
	padding: 120px 6vw 25px;
}
.header p{
	padding: 0 20vw 30px;
	font-size: 24px;
    font-weight: 200;
}
.lien_site{
	display:inline-block;
	padding:10px;
	margin:10px auto;
	border: 2px solid #ff5252;
	background-color:#fff;
	font-size:20px;
	color:#ff5252;
	text-decoration:none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.lien_site:hover{
	background: #fff3f3;
}
/************************************************* MENU *********************************************************/
.fd_menu{
	width:90vw;
	padding:40px 0 20px;
	margin: auto;
}
.titre_menu{
	width: 90%;
	margin:0 auto 45px auto;
	font-size: 24px;
    font-weight: 200;
	text-align: center;
}
.menu{
	width: 100%;
	max-width:860px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin:0 auto 30px auto;
	flex-wrap: wrap;
}
.menu a{
	display: inline-block;
	width: 165px;
	text-align: center;
	font-size: 24px;
    font-weight: 200;
	color:#333;
	text-decoration: none;
		-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.menu img, .menu svg{
	display: block;
	margin: auto;
	width: 120px;
	margin-bottom: 15px;
	border: 4px solid #000;
		-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	background: #fff;
}
.menu a:hover,
.menu a.active{
	color: #ff5252;
}
.menu a:hover svg,
.menu a.active svg{
	border: 4px solid #ff5252;
}
.menu a:hover svg .cls-1,
.menu a:hover svg .cls-4,
.menu a.active svg .cls-1,
.menu a.active svg .cls-4{
	stroke: #ff5252 !important;
	
}
.menu a:hover svg .souris,
.menu a.active svg .souris{
	fill: #ff5252 !important;
}
.menu_bottom .menu{
	max-width: 660px;
}
	

/************************************************* PROJETS *********************************************************/
.projet{
	width:100%;
	padding:0;
	text-align:center;
	font-size:0;
	border-bottom: 1px dashed #CCC;
}
.projet img{
	width:100%;
	max-width: 1340px;
}

/***************************************************** Contact & CV *********************************************************/

.header .contact {
	padding-bottom: 10px;
}
.header .contact +.contact {
	padding-bottom: 30px;
}

span.rev { unicode-bidi:bidi-override; direction:rtl }
span.rev.email:before { content:"moc.liamg@sol" }
span.rev.email:after { content:"namm : liamE" }
span.rev.phone:before { content:"92 59 51 " }
span.rev.phone:after { content:" 33+ : enohpéléT" }

.CV img{
	width: 1000px;
	max-width:90%;
	margin: auto;
	display: block;
}


/************************************************* MEDIA QUERIES ****************************************************/

/*---------------------------- Général -----------------------------------------*/

@media only screen and (max-width: 1400px){
	.fixe_liens{
		max-width: 90% !important;
	}
}

@media only screen and (max-width: 1024px){
	body {
		-webkit-text-size-adjust: none;
		-ms-text-size-adjust: none;
		width: 100%;
		min-width: 0;
	}
}

@media only screen and (max-width: 1000px){
	.header h1 {
		font-size: 45px;
	}
	.header p {
		font-size: 24px;
	}
}
@media only screen and (max-width: 860px){
	.header h1 {
		padding: 100px 11vw 45px;
	}
	.header p {
		padding: 0 10vw 30px;
	}
	.header-project h1 {
		padding-bottom: 15px;
	}
}
@media only screen and (max-width: 860px) and (min-width: 500px){
	.menu svg{
		width: 15vw;
		border-width: 0.6vw;
	}
	.menu a{
		font-size: 3vw;
		width: 19vw;
	}
}
@media only screen and (max-width: 800px){
	.fixe_liens {
		height: 40px;
		max-width: 100% !important;
	}
	.fixe_liens a{
		font-size:16px !important;
		line-height: 40px;
		width: 33%;
	}
	.menu_bottom .menu {
	  max-width: 70vw;
	}
}
@media only screen and (max-width: 660px){
	.header h1 {
		font-size: 38px;
		padding: 100px 7vw 45px;
	}
	.header p, .titre_menu {
		font-size: 20px;
	}
	.header-project h1 {
		font-size: 40px;
	}
	.fd_menu {
		padding: 0;
	}
	.CV {
		margin-bottom: 30px;
	}
	.menu_bottom {
		margin-top: 30px;
	}
}
@media only screen and (max-width: 500px){
	.header h1 {
		font-size: 30px;
		padding: 90px 7vw 35px;
	}
	.header p {
		font-size: 18px;
		padding: 0 20px 30px;
	}
	.header-project h1 {
		font-size: 40px;
	}
	.titre_menu {
		font-size: 18px;
		margin-bottom: 35px;
	}
	.menu{
		display: block;
		text-align: center;
	}
	.menu li{
		display: inline-block;
		text-align: center;
		margin: 0 20px 35px 20px;
	}
	.menu svg{
		width: 20vw;
		border-width: 0.8vw;
	}
	.menu a{
		font-size: 4vw;
		width: 32vw;
	}
	.header-project + nav{
		display: none;
	}
	.menu_bottom .menu {
	  display: flex;
	  max-width: 100vw;
	}
	.menu_bottom .menu svg {
		width: 17vw;
	}
	.menu_bottom .menu a {
		font-size: 16px;
		width: 103px;
	}
	.menu_bottom .menu li {
	  margin: 0 3px 35px;
	}
}
@media only screen and (max-width: 400px){
	.header h1 {
		font-size: 28px;
		padding: 90px 7vw 35px;
	}
	.header-project h1 {
		font-size: 35px;
	}
	.menu a{
		font-size: 5vw;
	}
	.menu_bottom .menu {
	  max-width: 100vw;
	}
	.fixe_liens a{
		font-size:14px !important;
	}
	.fixe_liens img{
		height:14px !important;
	}
}
@media only screen and (max-width: 360px){
	.menu_bottom .menu a {
		font-size: 14px;
		width: 90px;
	}
}


/*---------------------------- Gestion du CV ---------------------------------------

@media only screen and (max-width: 850px){
	#cv .colonne {
		float:none !important;
		margin: 260px 0 0 0 !important;
		width: 90% !important;
	}
	#cv .colonne.droite{
		margin:20px 0 0 0 !important;
		width: 90% !important;
	}
}
@media only screen and (max-width: 735px){
	.btn_cv {
		position:static !important;
		margin:250px auto 0;
	}
    #cv > div {
        background-position: center 66px;
    }
	#cv .colonne {
		margin-top: 20px !important;
	}
}
--*/
/*---------------------------- Demande de devis ---------------------------------------

@media only screen and (min-width: 768px){
	.devis_enImage{
		display:none;
	}
}
@media only screen and (max-width: 767px){
	.Xetapes,
	.test_devis,
	.legende_devis{
		display:none;
	}
	.devis .legende_projet{
		max-width: calc(90% - 40px) !important;
	}
}
--*/