@charset "UTF-8";

/* CSS Document */

@font-face {
    font-family: "Raleway";
	src: url('Raleway-Regular.ttf');
    src: local('Raleway-Regular') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@font-face {
    font-family: "RalewayHeavy";
	src: url('Raleway-Heavy.ttf');
    src: local('Raleway-Heavy') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@font-face {
    font-family: "RalewayExtraBold";
	src: url('Raleway-ExtraBold.ttf');
    src: local('Raleway-ExtraBold') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@font-face {
    font-family: "RalewayExtraLight";
	src: url('Raleway-ExtraLight.ttf');
    src: local('Raleway-ExtraLight') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@font-face {
    font-family: "RalewayThin";
	src: url('Raleway-Thin.ttf');
    src: local('Raleway-Thin') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

p, ul, li, a {
	margin:0px;
	padding:0px;
	color:#333333;
	text-decoration:none;
}

h3 {
    font-family: "RalewayHeavy", Arial, Helvetica, sans-serif;
	font-size:1.5em;
	color:#333333;
}

p {
	margin:5px 0px 10px 0px;
	font-size:1em;
	color:#fff;
}

.bdc {
	text-transform: lowercase;
}

/* ////////////////// Header ////////////////// */

h1 {
	font-size:0px;
}

#menu ul {
	text-align:right;
}

#menu li {
    font-family: "RalewayThin", Arial, Helvetica, sans-serif;
	display:inline-block;
}

#menu li:last-child a {
	padding-right:0px;
}

#menu li a {
	display:inline-block;
	padding:40px 10px;
	color:#FFFFFF;
	font-size:1.2em;
	opacity: 1;
    transition: padding 0.5s, opacity 0.5s;
	outline-style: none;
    animation: anim 10s linear infinite;
}

#menu li a:hover {
    color: hsl(84.7, 100%, 74.3%);
    animation: anim 10s linear infinite;
}

#menu p {
	display:none;
}

#menu:hover li a {
	opacity: 1;
}

#menu li .scrolled-menu-a {
	padding-top: 20px;
	padding-bottom: 20px;
	opacity: 1;
}

#accroche1 p:first-child, #accroche2 p:first-child, #accroche3 p:first-child {
	position: relative;
	top: calc(50% - 100px);
	left: 0px;
	margin: 0px;
  	font-family: "RalewayHeavy", Arial, Helvetica, sans-serif;
  	font-size: 4em;
  	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  	color: rgba(0,0,0,0.6);
}

#accroche3 p:first-child {
  	text-transform: none;
}

#accroche1 p, #accroche2 p, #accroche3 p {
	position: relative;
	top: calc(50% - 100px);
	left: 3px;
	opacity: 1;
  	font-family: "RalewayThin", Arial, Helvetica, sans-serif;
  	font-size: 2.3em;
  	text-transform: uppercase;
  	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  	color: #fff;
  	margin: 0px;
}

/* ////////////////// Fin Header ////////////////// */

/* ////////////////// Services ////////////////// */

#services .service h2 {
    width: 100px;
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 1.1em;
    position: relative;
    font-weight: lighter;
    height: 29px;
    line-height: 1.2em;
    margin: -69px auto auto;
    border-bottom: 5px solid #4444;
    cursor: default;
}

#services .service p {
	max-height: 340px;
	font-family: "Raleway", Arial, Helvetica, sans-serif;
    text-align: center;
    color: #666;
    margin: 30px 40px 0px 40px;
    font-size: 1.05em;
    line-height: 1.8em;
    overflow-y: auto;
}

#services .service .listeServ p {
	margin: 0px;
	padding: 0px;
	padding-right: 15px;
    text-align: left;
    font-size: 0.95em;
    line-height: 1.55em;
    color: #fff;
    transition: 1s;
    overflow-y: auto;
    letter-spacing: 0.1px;
}

/* ////////////////// Fin Services ////////////////// */

/* ////////////////// Projets ////////////////// */

#projets .content div p {
	position: absolute;
	z-index: 87;
	width:calc(100% - 20px);
	top: 50%;
	left: 0;
	margin-left: 10px;
	margin-right: 10px;
	transform: translateY(-50%);
	font-family: "Raleway", Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 1.3em;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	filter: blur(0px);
	transition: opacity 0.3s, filter 0.3s;
}

#projets .content div:hover p {
	filter: blur(2px);
	opacity: 0;
}

/* ////////////////// Fin Projets ////////////////// */

/* ////////////////// Contact ////////////////// */

#contact .content > p {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 1.2em;
	padding: 0px;
	margin-left: 10px;
	margin-bottom: 0px;
	text-align: left;
}

#contact .content > form {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	color: #fff;
}

#contact .content > form label {
	position: absolute;
	padding: 0px;
	padding-bottom: 10px;
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	color: #fff;
	cursor: text;
	transition: color 0.3s, margin 0.3s;
}

#contact .content > form label .erjs {
	display: none;
	opacity:0;
	transition: opacity 0.3s, color 0.3s;
}

#contact .content > form label .erphp {
	display: inline;
	opacity:1;
	transition: opacity 0.3s, color 0.3s;
}

#contact .content > form input, #contact .content > form textarea {
	margin-top: 35px;
	resize: none;
    background: url(../0-Links/00-bg.png), #fff;
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-size: 1em;
	color: #000;
	transition: color 0,3s;
/**	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); **/
}

#contact .content > form label span {
	color: rgb(255, 26, 102);
}

#contact h3 {
	position: relative;
	width: 100%;
	padding: 7px 0px 7px 0px;
    font-family: "RalewayHeavy", Arial, Helvetica, sans-serif;
	font-size: 2em;
	text-align: center;
  	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
  	color: rgba(0,0,0,0.6);
}

#contact p {
	width: 100%;
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-align: center;
}

#contact > div > div > h3, #contact > div > div > p {
	position: relative;
	width: 50%;
	margin-left: 50%;
	text-align: left;
}

#contact > div > div > h3 {
	margin-top: -180px;
}

#contact > div > div:first-child > h3, #contact > div > div:first-child > p {
	width: 50%;
	margin-left: 0%;
	text-align: right;
}

#contact .content a {
    font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	opacity: 0.8;
}

/* ////////////////// Fin Contact ////////////////// */

/* ////////////////// Nous ////////////////// */

#nous .content h3 {
    font-family: "RalewayExtraBold", Arial, Helvetica, sans-serif;
	margin-top: 50px;
	font-size: 1.4em;
  	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  	color: #ffffff;
}

#nous .content p {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
  	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
  	color: #333333;
}

#nous .content div:first-child p, #nous .content div:first-child h3 {
	text-align: right;
}

#nous .content div:last-child p, #nous .content div:last-child h3 {
	text-align: left;
}

/* ////////////////// Fin Nous ////////////////// */

/* ////////////////// Footer ////////////////// */

#footer > .content p {
	display: flex;
	flex-flow: nowrap;
	justify-content: space-between;
	width: 100%;
	margin: 15px 0px;
	opacity: 0.5;
}

#footer > .content p span:first-child {
	cursor: pointer;
}

#footer p a {
	color: #fff;
}

.mentionsL p, .mentionsL h3, .mentionsL h2 {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #fff;
}

.mentionsL p {
	line-height: 1.5em;
	margin-bottom: 15px;
	opacity: 0.92;
}

.mentionsL p a {
	color: #fff;
}

.mentionsL h2 {
	position: absolute;
    top: 75px;
    left: 100px;
    font-family: "RalewayThin", Arial, Helvetica, sans-serif;
	font-size: 2.3em;
	color: #999;
}

.mentionsL h3:first-child {
	margin-top: 0px;
}

.mentionsL h3 {
	margin-top: 50px;
	margin-bottom: 25px;
	font-size: 1.5em;
	color: #999;
}

.mentionsL .Gferm {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    top: 70px;
    right: 73px;
    font-size: 0;
    margin: 0px;
    background: url(../0-Links/00-bg.png), rgba(0,0,0,0.9);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    transition: background-size 0.3s, opacity 0.3s;
    cursor: pointer;
}

.mentionsL .Gferm::before {
	content: '';
	position: relative;
	width: 35px;
	height: 35px;
	background: url('../0-Links/IconesGalerie.png') no-repeat;
	background-size: 300% 200%;
	background-position: 0% 0%;
    transition: width 0.3s, height 0.3s;
}

.mentionsL .Gferm:hover {
    opacity: 1;
}

.mentionsL .Gferm:hover::before {
	width: 45px;
	height: 45px;
}

/* ////////////////// Fin Footer ////////////////// */

/* ////////////////// Error 404 ////////////////// */

.errorh2 {
	z-index: 86;
	position: absolute;
	top: 380px;
	width: 100%;
    font-family: "RalewayHeavy", Arial, Helvetica, sans-serif;
    text-align: center;
	font-size: 4em;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
	color: rgba(0,0,0,0.6);
}

.content .errorp:first-child {
	margin-top: 75px;
}

.errorp {
	margin-top: 50px;
	width: 100%;
    font-family: "RalewayThin", Arial, Helvetica, sans-serif;
	color:#fff;
	text-align: center;
	font-size: 2em;
}

.errorp a {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
	text-decoration: none;
	color:#fff;
}

/* ////////////////// Fin  Error 404 ////////////////// */