@font-face {
    font-family: 'GothamL';
    src: url('fonts/gotham-light-webfont.eot');
    src: url('fonts/gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gotham-light-webfont.woff2') format('woff2'),
         url('fonts/gotham-light-webfont.woff') format('woff'),
         url('fonts/gotham-light-webfont.ttf') format('truetype'),
         url('fonts/gotham-light-webfont.svg#gothamlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LibelSuite';
    src: url('fonts/libelsuit-webfont.eot');
    src: url('fonts/libelsuit-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/libelsuit-webfont.woff') format('woff'),
         url('fonts/libelsuit-webfont.ttf') format('truetype'),
         url('fonts/libelsuit-webfont.svg#libel_suitregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


input[type="search"] {
-webkit-appearance: none;
}

body {
text-align: center;
background-color: #000000;
line-height: 20px;
color: #ffffff;
font-weight: normal;
overflow-x: hidden;
font: normal 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media screen and (max-height: 540px) {
body {
overflow-x: hidden;
}
}

:focus {
outline: 0;
}

::selection{
background-color: #000000;
color: #ffffff;
}

/* Firefox */
::-moz-selection {
background-color: #ecb31e;
color: #ffffff;
}

.footer { clear: both;}

#spip-admin{
z-index: 1000000000000000000000000000000000000000000000000000000000000000000;
font: 10px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
position: fixed;
right: 0;
}

.spip-admin-float {
float: none;
}

#ecrire,#var_mode,#voir_article,#voir_rubrique,#statistiques{
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
background-color: #fff;
border: 1px solid #000000;
color: #000000;
opacity: 1;
}

#ecrire:hover,#var_mode:hover,#voir_article:hover,#voir_rubrique:hover,#statistiques:hover{
background-color: #000000;
border: 1px solid #000000;
color: #fff;
}

.spip-admin-boutons{
background-color: #fff;
border: 1px solid #000000;
color: #000000;
font: 10px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
}



/************* LOGO *************/
/************* LOGO *************/
/************* LOGO *************/

#menu {
width: 100%;
height: 100vh;
z-index: 2000000090000000000000000;
}

#background-video {
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}

header.large .logo h1#logo{
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

position: relative;
display: block;

width: 70%;
height: auto;
min-height: 400px;
max-width: 400px;
max-height: 400px;
margin: 25vh auto 200px auto;
}

@media screen and (max-height: 980px) {
header.large .logo h1#logo {
width: 50%;
height: auto;
min-height: 200px;
max-height: 200px;
max-width: 200px;
}
}

header.large .logo h1#logo img.img-logo{
position: relative;
width: 100%;
height: auto;
}

header.small .logo h1#logo img.img-logo{
display: none;
}

header.large .verslebas {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

position: relative;
clear: both;
font-size: 35px;
padding: 15px;
color: #ffffff;
text-decoration: none;
display: inline-block;
}

@media screen and (max-height: 980px) {
header.large .verslebas {
margin-top: -150px;
}
}

header.large .verslebas:hover {
position: relative;
font-size: 65px;
padding: 0;
color: #ffffff;
text-decoration: none;
}

header.small .verslebas {
display: none;
}

header.small #menu2 {
width: 90%;
max-width: 1120px;
margin: auto;
}

header.small .logo{
z-index: 9;
position: fixed;
display: inline-block;
width: 100%;
height: 80px;
top: 0;
left: 0;
margin: 0;
background-color: #000000;
}

header.large .logo h2, header.small .logo h2{
font-size: 0;
}

header.small .logo h1#logo{
z-index: 99;
position: fixed;
display: block;
width: 60px;
height: 60px;
top: 8.5px;
background: transparent url('img/logo-1-2.png') no-repeat center center;
background-size: contain;
}




header.large ul#bandeau-social-haut {
position: relative;
display: none;
}

header.small #bandeau-social-haut{
display: block;
float: right;
margin-top: 15px;
}

header.small #bandeau-social-haut li{
display: inline;
list-style: none;
}

header.small #bandeau-social-haut li a{
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

width: 40px;
height: 40px;
display: inline-block;
opacity: 1;
margin-left: 25px;
vertical-align: middle;
}

header.small #bandeau-social-haut li a:hover{
opacity: 0.60;
}

header.small #bandeau-social-haut li a.social-facebook{
background: url('img/social-facebook.png') no-repeat center center;
background-size: 75%;
}

header.small #bandeau-social-haut li a.social-instagram{
background: url('img/social-instagram.png') no-repeat center center;
background-size: 75%;
}

header.small #bandeau-social-haut li a.social-youtube{
background: url('img/social-youtube.png') no-repeat center center;
background-size: 75%;
margin-right: 20px;
}







/************* QUI SOMMES-NOUS ? *************/
/************* QUI SOMMES-NOUS ? *************/
/************* QUI SOMMES-NOUS ? *************/

#qui-sommes-nous {
clear: both;
display: block;
width: 100%;
background: #ffffff;
text-align: center;
padding: 120px 0;
margin: auto;
}

#qui-sommes-nous2 {
position: relative;
display: block;
width: 90%;
max-width: 1120px;
margin: auto;
}

#qui-sommes-nous #logo-auteur {
z-index: 2;
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

position: relative;
display: inline-block;
vertical-align: top;
width: 45%;
max-width: 550px;
height: 500px;
margin-right: 15px;
background-size: contain;
}

.main2{
z-index: 0;
width:330px;
height:330px;
border:3px solid #000000;
position:absolute;
top:100px;
left:150px;
margin:auto;
border-radius:50%; 
}

@media screen and (max-width: 850px) {
.main2 {
top: 350px;
right: 0;
}
}

@media screen and (max-width: 560px) {
.main2 {
top: 150px;
left: 50px;
}
}

.circle3{
width:30px;
height:30px;
background:#ffffff;
border: 4px solid #000000;
border-radius:50%;
position:absolute;
top:0; bottom:0; left:0;right:0;
overflow:hidden;
margin:auto;
animation: circle3 3s linear infinite;
}

@keyframes circle3{
0%{
transform:rotate(0deg)
translate(-165px)
rotate(0deg);

}
100%{
transform:rotate(360deg)
translate(-165px)
rotate(-360deg);
}
}

@media screen and (max-width: 850px) {
#qui-sommes-nous #logo-auteur {
display: block;
margin: 0 auto 0 auto;
width: 90%;
height: auto;
background: none;
}
}

#qui-sommes-nous #logo-auteur img {
width: 100%;
height: auto;
}

#descriptif-auteur {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

position: relative;
display: inline-block;
vertical-align: top;
width: 45%;
max-width: 550px;
margin-left: 15px;
margin-top: -15px;
padding: 15px;
}

@media screen and (max-width: 850px) {
#descriptif-auteur {
display: block;
clear: both;
width: 90%;
margin: 0 auto 0 auto;
padding: 35px 0 0 0;
}
}

#qui-sommes-nous h3 {
background-color: #ffffff;
color: #000000;
width: 250px;
text-align: left;
font: normal 80px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 80px;
padding-bottom: 50px;
margin-bottom: 40px;
text-transform: uppercase;
}

@media screen and (max-width: 850px) {
#qui-sommes-nous h3 {
font-size: 60px;
line-height: 60px;
margin-bottom: 20px;
}
}

#qui-sommes-nous span {
color: #000000;
position: relative;
display: block;
text-align: left;
width: 60%;
margin-top: -50px;
background-color: #ffffff;
font: normal 14px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#qui-sommes-nous h3 span.first {
color: #000000;
text-align: left;
display: block;
font: normal 70px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 75px;
margin-top: -10px;
text-transform: uppercase;
}

@media screen and (max-width: 850px) {
#qui-sommes-nous h3 span.first {
font-size: 50px;
line-height: 50px;
}
}



/************* NOS SAVOIR-FAIRE *************/
/************* NOS SAVOIR-FAIRE *************/
/************* NOS SAVOIR-FAIRE *************/

#nos-savoir-faire {
position: relative;
clear: both;
display: block;
width: 100%;
padding: 120px 0 140px 0;
background-color: #000000;
}

#nos-savoir-faire #savoir-faire {
width: 90%;
max-width: 1220px;
margin: auto;
text-align: center;
}

#nos-savoir-faire #savoir-faire h3 {
position: relative;
display: inline-block;
color: #ffffff;
text-align: center;
font: normal 60px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 50px;
text-transform: uppercase;
border: 3px solid #ffffff;
padding: 20px 50px 50px 50px;
}

@media screen and (max-width: 470px) {
#nos-savoir-faire #savoir-faire h3 {
font: normal 40px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding: 20px 50px 30px 50px;
}
}

#nos-savoir-faire #savoir-faire span.mini-logo {
position: relative;
display: block;
margin: auto;
width: 80px;
height: 80px;
background: #000000 url('img/logo4-2.png') no-repeat center center;
background-size: contain;
margin-top: -110px;
margin-bottom: 60px;
}

@media screen and (max-width: 470px) {
#nos-savoir-faire #savoir-faire span.mini-logo {
margin-top: -90px;
}
}

#nos-savoir-faire #savoir-faire .onglets-savoir-faire {
display: inline-block;
vertical-align: top;
width: 200px;
height: 250px;
margin: 0 15px 55px 15px;
}

@media screen and (max-width: 470px) {
#nos-savoir-faire #savoir-faire .onglets-savoir-faire {
width: 100%;
margin: 0 auto 55px auto;
}
}

#nos-savoir-faire #savoir-faire .onglets-savoir-faire .logo-savoir-faire {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

display: block;
width: 100px;
height: 100px;
margin: auto;
border: 2px solid #ffffff;
border-radius: 50px;
background-color: #ffffff;
padding: 8% 0 0 0%;
}

#nos-savoir-faire #savoir-faire .onglets-savoir-faire .spip_logo, #nos-savoir-faire #savoir-faire .onglets-savoir-faire .spip_logos {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

float: none;
margin: 0 0 20px 0;
padding: 0 0 20px 0;
height: auto;
width: 70%;
text-align: center;
}

@media screen and (max-width: 470px) {
#nos-savoir-faire #savoir-faire .onglets-savoir-faire .spip_logo, #nos-savoir-faire #savoir-faire .onglets-savoir-faire .spip_logos {
padding: 0;
margin: -15px 0 0 0;
}
}

#nos-savoir-faire #savoir-faire .onglets-savoir-faire span {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

display: block;
clear: both;
text-align: center;
font: normal 13px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
letter-spacing: 1px;
padding-top: 20px;
text-transform: uppercase;
}

@media screen and (max-width: 470px) {
#nos-savoir-faire #savoir-faire .onglets-savoir-faire span {
display: inline-block;
text-align: center;
width: 50%;
margin: auto;
vertical-align: top;
}
}

#nos-savoir-faire #savoir-faire .onglets-savoir-faire span.texte2 {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

display: block;
clear: both;
text-align: center;
font: normal 13px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
letter-spacing: 1px;
padding-top: 20px;
text-transform: none;
}





/************* NOS REFERENCES **********/
/************* NOS REFERENCES **********/
/************* NOS REFERENCES **********/

#nos-references {
clear: both;
position: relative;
display: block;
width: 100%;
padding: 90px 0 60px 0;
background-color: #ffffff;
}

#nos-references #cadre-references {
width: 90%;
position: relative;
max-width: 1120px;
margin: auto;
}

#nos-references h3 {
color: #000000;
font: normal 70px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 50px;
margin-bottom: 0;
text-transform: uppercase;
text-align: center;
}

@media screen and (max-width: 850px) {
#nos-references h3 {
font-size: 50px;
line-height: 30px;
}
}

#nos-references #cadre-references .main{
position: relative;
width:90px;
height:90px;
border:13px solid #000000;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:70px auto 0 auto;
border-radius:50%; 
}

#nos-references #cadre-references .circle{
width:35px;
height:35px;
background:#000000;
border-radius:50%;
position:absolute;
top:0; bottom:0; left:0;right:0;
overflow:hidden;
margin:auto;
animation: circle 6s linear infinite;
}

@keyframes circle{
0%{
transform:rotate(0deg)
translate(-40px)
rotate(0deg);

}
100%{
transform:rotate(360deg)
translate(-40px)
rotate(-360deg);
}
}

#nos-references #cadre-references #galerie {
position: relative;
display: block;
text-align: center;
margin-top: 170px;
}

#nos-references #cadre-references #galerie span{
position: relative;
display: inline-block;
background-color: #000000;
}

#clear {
clear: both;
width: 100%;
}

#nos-references span {
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;

position: relative;
width: 200px;
height: 200px;
vertical-align: top;
margin: 0 15px 30px 15px;
}

@media screen and (max-width: 580px) {
#nos-references span {
width: 150px;
height: 150px;
overflow: hidden;
}
}

#nos-references .spip_logo, #nos-references .spip_logos {
position: relative;
float: none;
display: block;
}

#nos-references #cadre-references #galerie span span.vignette{
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;

z-index: 1;
position: absolute;
display: inline-block;
width: 100%;
height: 20px;
overflow: hidden;
top: 45%;
left: -15px;
font: normal 19px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
letter-spacing: 0.5px;
text-transform: uppercase;
background-color: transparent;
}

#nos-references #cadre-references #galerie span:hover span.vignette{
font-size: 40px;
transform:rotate(180deg)
translate(-40px)
rotate(180deg);
opacity: 0;
top: 0;
}

#cadre-references span img{
opacity: 0.7;
}

#cadre-references span img:hover{
opacity: 1;
}

div.pswp__caption__center {
position: relative;
bottom: 100px;
font: normal 19px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

/************* DEVIS **********/
/************* DEVIS **********/
/************* DEVIS **********/

/*#devis {
width: 100%;
background-color: #dcdcdc;
padding: 50px 0 55px 0;
margin-bottom: -35px;
position: relative;
display: block;
}

#devis span{
position: relative;
display: block;
text-align: left;
width: 90%;
max-width: 1120px;
margin: auto;
}

#devis h3 {
color: #000000;
font: normal 50px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
position: relative;
display: block;
margin-bottom: 0;
}

#devis h4 {
color: #000000;
font: normal 30px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-transform: uppercase;
position: relative;
display: block;
}*/




/************* FOOTER **********/
/************* FOOTER **********/
/************* FOOTER **********/

#footer {
clear: both;
display: block;
width: 100%;
height: 350px;
background: #000000;
padding: 70px 0;
}

.footer2 {
width: 90%;
max-width: 1120px;
height: 150px;
margin: 0 auto 70px auto;
text-align: left;
color: #ffffff;
background: transparent url('img/logo-1-2.png') no-repeat center left;
background-size: contain;
}

#footer .footer2 ul#reseaux-sociaux {
position: relative;
display: inline-block;
margin-left: 200px;
text-align: left;
color: #ffffff;
font: normal 10px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 30px;
}

#footer .footer2 ul#reseaux-sociaux li a {
position: relative;
color: #ffffff;
font: normal 14px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 22px;
text-decoration: none;
}

#footer .footer2 ul#reseaux-sociaux li a:hover {
text-decoration: line-through;
}

.retour-haut {
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

color: #ffffff;
font-size: 25px;
padding: 10px;
float: right;
text-decoration: none;
}

.retour-haut:hover {
color: #ffffff;
font-size: 45px;
padding: 0;
float: right;
text-decoration: none;
}



/************* MENTIONS LEGALES **********/
/************* MENTIONS LEGALES **********/
/************* MENTIONS LEGALES **********/

#menu-general2 {
z-index: 9;
position: fixed;
display: inline-block;
width: 100%;
height: 80px;
top: 0;
left: 0;
margin: 0;
background-color: #000000;
}

#nav-sub {
width: 90%;
max-width: 1120px;
margin: auto;
}

#nav-sub .logo{
z-index: 9;
position: fixed;
display: inline-block;
width: 100%;
height: 80px;
top: 0;
left: 0;
margin: 0;
background-color: #000000;
}

#nav-sub h1#logo{
z-index: 99;
position: fixed;
display: block;
width: 60px;
height: 60px;
top: 8.5px;
background: transparent url('img/logo-1-2.png') no-repeat center center;
background-size: contain;
}

#nav-sub #bandeau-social-haut{
display: block;
float: right;
margin-top: 15px;
}

#nav-sub #bandeau-social-haut li{
display: inline;
list-style: none;
}

#nav-sub #bandeau-social-haut li a{
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;

width: 40px;
height: 40px;
display: inline-block;
opacity: 1;
margin-left: 25px;
vertical-align: middle;
}

#nav-sub #bandeau-social-haut li a:hover{
opacity: 0.60;
}

#nav-sub #bandeau-social-haut li a.social-facebook{
background: url('img/social-facebook.png') no-repeat center center;
background-size: 75%;
}

#nav-sub #bandeau-social-haut li a.social-instagram{
background: url('img/social-instagram.png') no-repeat center center;
background-size: 75%;
}

#nav-sub #bandeau-social-haut li a.social-youtube{
background: url('img/social-youtube.png') no-repeat center center;
background-size: 75%;
margin-right: 20px;
}





#mentions-legales {
background-color: #ffffff;
color: #000000;
padding: 280px 0 250px 0;
margin: 0 0 -30px 0;
}

#mentions-legales #titre {
position: relative;
display: block;
font: normal 70px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 35px 0 50px 0;
}

#mentions-legales p{
font: normal 14px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
width: 90%;
max-width: 720px;
margin: auto;
text-align: left;
line-height: 18px;
text-align: justify;
}

#mentions-legales p strong{
display: block;
font: normal 20px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin-top: 30px;
text-transform: uppercase;
}

#mentions-legales p a{
color: #000000;
}

#mentions-legales p a:hover{
text-decoration: line-through;
}