@charset "utf-8";

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

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

.loader {position: fixed; z-index: 99999; background-color:#ffcc00; top : 0px; left : 0px; height : 100%; width : 100%;}
a{color:#000;}
::selection{background-color:#ffcc00;color:black;}
::-moz-selection{background-color:#ffcc00;color:black;}

@keyframes rotate {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}

@media (max-width : 470px){
.fa-eye{font-size:30px; color: #ffcc00; line-height:18px;}
.fa-desktop{font-size: 30px; color: #ffcc00; line-height:30px;}
.fa-file{font-size: 34px; color: #ffcc00;}
.fa-user{font-size: 40px; color: #ffcc00;}
}

@media (min-width : 471px) and (max-width : 620px){
.fa-eye{font-size:40px; color: #ffcc00; line-height:26px;}
.fa-desktop{font-size: 40px; color: #ffcc00; line-height:42px;}
.fa-file{font-size: 44px; color: #ffcc00;}
.fa-user{font-size: 50px; color: #ffcc00;}
}

@media (min-width : 621px) and (max-width : 767px){
.fa-eye{font-size:50px; color: #ffcc00; line-height:34px;}
.fa-desktop{font-size: 50px; color: #ffcc00; line-height:52px;}
.fa-file{font-size: 54px; color: #ffcc00;}
.fa-user{font-size: 60px; color: #ffcc00;}
}

@media (max-width : 767px){
.rmm{display:block;}
.spinner{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; animation: 2s linear 0s normal none infinite running rotate; border-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) #000; border-image: none; border-style: solid; border-width: 5px;}
.spinner{border-radius: 100%; bottom: 0; height: 50px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50px;}
body, html{height: 100%; margin:0; padding:0; font-family: 'nexa_light';}
#lien-desktop{display:none;}
#bgvideo{width: 100%; height: 100%; z-index: -100; float:left; overflow:hidden; background-color:#000; display:none;}
video#bgvid{min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; float:left; bottom:0; right:0; display:none;}
#logo{width:80%; position:absolute; top:50%; left:50%; margin:0 0 0 -40%; display:none;}
#logo img{width:100%; display:none;}
#fleche{width:194px; height:194px; position:absolute; border:3px solid #ffffff; border-radius:100px; top:50%; left:50%; margin:25% 0 0 -100px; color:#FFF; text-align:center; transition: background-color 200ms linear; font-size:115px; display:none;}
#fleche:hover{background-color:rgba(255, 255, 255, 0.3); transition: background-color 200ms linear; cursor:pointer; display:none;}
i.fa.fa-arrow-down{line-height: 198px; display:none;}
.first{padding-top:60px;}
#header{float:left; width:100%; background-color:#000; z-index: 9999; position:fixed;}
#bheader{ width:100%; margin:0 auto; padding:10px 0; height:30px;}
#hlogo{float:left; height:50px; margin-left:10px;}
#hlogo img{height:60px; position:absolute; z-index:9999;}
#menu{float:right; height:60px; display:none;}
.listmenu{float:right; height:54px; padding:0 25px; line-height:60px; font-family: 'nexa_bold'; border-bottom:16px solid #000; transition: border-color 500ms linear; font-size:16px;}
.listmenu:hover{border-bottom:16px solid #ffcc00; transition: border-color 500ms linear; cursor:pointer;}
.listmenuactif{float:right; height:54px; padding:0 25px; line-height:60px; font-family: 'nexa_bold'; transition: border-color 500ms linear; font-size:16px; border-bottom:16px solid #ffcc00; cursor:pointer;}
#menu a{text-decoration:none; color:#FFF;}
.bcontent{float:left; width:100%;}
.nofirst{padding-top:20px;}
.content{width:100%; margin:0 auto;}
.lcontent{width:100%; margin:30px 0; float:left;}
.mypicto{float:left; width:15%;}
.mytext{float:left; width:85%; font-size: 14px;}
#myinfo1{float:left; width:90%; margin:0 5% 5% 5%; text-align:justify; visibility:hidden;}
#myinfo2{float:left; width:90%; margin:0 5% 5% 5%; text-align:justify; visibility:hidden;}
#myinfo3{float:left; width:90%; margin:0 5% 5% 5%; text-align:justify; visibility:hidden;}
#myinfo4{float:left; width:90%; margin:0 5% 5% 5%; text-align:justify; visibility:hidden;}
.gras{font-family: 'nexa_bold';}
.slide{float:left; padding:20px 0; width: 100%; box-sizing: border-box; transform-style: inherit; color:#FFFFFF; font-family: 'nexa_bold'; text-align:center; text-shadow: 0 0 8px rgba(0,0,0,.5); font-size:30px;}
.slide, .slide:before{background: 50% 50% / cover; }
#title{background-image: url("../img/bandeau1.jpg");}
.puce-mobile{display:none;}
.motcle-mobile{width:100%; float:left;}
#contact1{float:left; width:90%; text-align:center; margin:30px 5% 20px 5%; visibility:hidden;}
input{width:100%; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; border:1px solid #eee; transition: border-color 200ms linear; box-sizing: border-box;-webkit-appearance: none;}
textarea{width:100%; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; min-height:300px; border:1px solid #eee; transition: border-color 200ms linear; box-sizing: border-box;-webkit-appearance: none;}
.alert{padding: 15px; border: 1px solid transparent; border-radius: 4px; float:left; width:100%; margin-top:10px; font-size:14px; box-sizing: border-box;}
#contact2{float:left; width:90%; margin:0 5%; visibility:hidden;}
#contact_texte{float:left; width:100%; text-align:center; font-size:14px; margin-bottom:20px;}
#contact2 img{float:left; width:25%; opacity:1; transition: opacity 200ms linear;}
#contact2 img:hover{opacity:0.6; transition: opacity 200ms linear;}
#contact_photo{float:left; width:100%; height:200px; margin-bottom:20px; background-image:url(../img/adrienkerros.jpg); background-size:cover;}
#btn{border-radius: 5px; padding: 15px 25px; font-size: 14px; text-decoration: none; color: #000; font-family: 'nexa_light'; background-color: #eee; transition: background-color 200ms linear; position:relative; float:left; cursor:pointer; border:0; width:100%; margin-bottom:0;}
#btn:hover{background-color: #ffcc00; transition: background-color 200ms linear;}
input:hover{border:1px solid #ccc; transition: border-color 200ms linear;}
textarea:hover{border:1px solid #CCC; transition: border-color 200ms linear;}
input:focus{border:1px solid #ccc; transition: border-color 200ms linear;}
textarea:focus{border:1px solid #CCC; transition: border-color 200ms linear;}
.view{float:left; width:90%; margin:0 5%; background-color:#FFF;}
.bgyellow{background-color:#ffcc00;}
.bgwhite{background-color:#ffffff;}
#filtre{float:left; width:90%; margin:0 5%;}
.button{float:left; padding:10px; font-size:14px; background-color:#000; color:#FFF; cursor:pointer; transition: color 200ms linear; transition: background-color 200ms linear; width:47%; margin-bottom:15px; text-align:center; box-sizing: border-box;}
.button:hover{background-color:#333; transition: background-color 200ms linear;}
.buttonactif{float:left; padding:10px; font-size:14px; background-color:#fff; color:#000; transition: color 200ms linear; transition: background-color 200ms linear; cursor:default;width:47%; margin-bottom:15px; text-align:center; box-sizing: border-box;}
.margin-mobile:nth-child(2n+1){margin-right:6%;}
#vignettes{float:left; width:100%; margin-bottom:20px;}
.view img{float:left; width:100%; opacity:1; transition: opacity 200ms linear;}
.view img:hover{opacity:0.6; cursor:pointer; transition: opacity 200ms linear;}
#awork{visibility:hidden;}
.fiche{width:90%; float:left; margin:80px 5% 0 5%; opacity:0; position: relative;}
.fiche img{width:100%; float:left;}
.texte_fiche{width:100%; float:left; font-size:14px; margin-right:50px; text-align:justify;}
.detail_fiche{width:100%; float:left; font-size:14px; border:1px solid #000; padding:10px; margin-top:15px; box-sizing: border-box;}
.title_fiche{width:100%; float:left; margin:30px 0; text-align:center;}
.stitle_fiche{padding:10px 20px; font-size:14px; text-transform:uppercase; background-color:#000; color:#fff;}
.detail_fiche ul{padding:0 0 0 20px; list-style:none; margin:0;}
.detail_fiche ul li:before{ font-family: 'FontAwesome'; content: '\f00c'; margin:0 5px 0 -15px;}
.close{width:30px; height:30px; right: 0; cursor: pointer; position:absolute; font-size: 40px; margin-top:-50px; transition: color 200ms linear;}
.close:hover{color:#333; transition: color 200ms linear;}
.close .fa{line-height: 29px;}
.alert-danger{color: #a94442; background-color: #f2dede; border-color: #ebccd1;}
.alert-success{color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;}
button.closetxt{-webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0;}
.success{display:none;}
.error{display:none;}
#motscles{visibility:hidden;}
#googlemap{width:100%; height:200px; float:left; overflow:hidden;}
}

@media (min-width : 768px){
#lien-mobile{display:none;}
.rmm{display:none;}
.spinner{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; animation: 2s linear 0s normal none infinite running rotate; border-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) #000; border-image: none; border-style: solid; border-width: 5px;}
.spinner{border-radius: 100%; bottom: 0; height: 50px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50px;}
body, html{height: 100%; margin:0; padding:0; font-family: 'nexa_light';}
#bgvideo{width: 100%; height: 100%; z-index: -100; float:left; overflow:hidden; background-color:#000;}
video#bgvid{min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; float:left; bottom:0; right:0;}
#logo{width:300px; height:137px; position:absolute; top:50%; left:50%; margin:0 0 0 -150px;}
#logo img{width:300px;}
#fleche{width:40px; height:40px; position:absolute; border:1px solid #ffffff; border-radius:21px; top:50%; left:50%; margin:90px 0 0 -21px; color:#FFF; text-align:center; transition: background-color 200ms linear; font-size:24px;}
#fleche:hover{background-color:rgba(255, 255, 255, 0.3); transition: background-color 200ms linear; cursor:pointer;}
i.fa.fa-arrow-down{line-height: 40px;}
.fa{line-height: 40px;}
#header{float:left; width:100%; background-color:#000; z-index: 9999;}
#bheader{ width:568px; margin:0 auto; padding:10px 0; height:60px;}
#hlogo{float:left; height:60px; margin-left:0px;}
#hlogo img{height:80px; position:absolute; z-index:9999;}
#menu{float:right; height:60px; display:block;}
.listmenu{float:right; height:54px; padding:0 25px; line-height:60px; font-family: 'nexa_bold'; border-bottom:16px solid #000; transition: border-color 500ms linear; font-size:16px;}
.listmenu:hover{border-bottom:16px solid #ffcc00; transition: border-color 500ms linear; cursor:pointer;}
.listmenuactif{float:right; height:54px; padding:0 25px; line-height:60px; font-family: 'nexa_bold'; transition: border-color 500ms linear; font-size:16px; border-bottom:16px solid #ffcc00; cursor:pointer;}
#menu a{text-decoration:none; color:#FFF;}
.bcontent{float:left; width:100%;}
.nofirst{padding-top:80px;}
.content{width:568px; margin:0 auto;}
.lcontent{width:568px; margin:30px 0; float:left;}
.mypicto{float:left; width:50px;}
.mytext{float:left; width:209px; font-size: 14px;}
#myinfo1{float:left; width:259px; margin:0 25px 25px 0; text-align:justify; visibility:hidden;}
#myinfo2{float:left; width:259px; margin:0 0 25px 25px; text-align:justify; visibility:hidden;}
#myinfo3{float:left; width:259px; margin:25px 25px  80px 0; text-align:justify; visibility:hidden;}
#myinfo4{float:left; width:259px; margin:25px 0 80px 25px; text-align:justify; visibility:hidden;}
#contact1{float:left; width:267px; padding-right:50px; border-right:1px solid #eee; text-align:center; margin-bottom:80px; visibility:hidden;}
input{width:229px; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; border:1px solid #eee; transition: border-color 200ms linear;}
textarea{width:229px; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; min-height:300px; border:1px solid #eee; transition: border-color 200ms linear;}
.texte_fiche{width:290px; float:left; font-size:14px; margin-right:50px; text-align:justify;}
.detail_fiche{width:198px; float:left; font-size:14px; border:1px solid #000; padding:10px;}
.alert{padding: 15px; border: 1px solid transparent; border-radius: 4px; float:left; width:235px; margin-top:10px; font-size:14px;}
.view{float:left; width:189px; background-color:#FFF; height:133px;}
.bgyellow{background-color:#ffcc00;}
.bgwhite{background-color:#ffffff;}
.fa-eye{font-size:37px; color: #ffcc00; line-height: 23px;}
.fa-desktop{font-size: 36px; color: #ffcc00;}
.fa-file{font-size: 38px; color: #ffcc00;}
.fa-user{font-size: 44px; color: #ffcc00;}
.slide{float:left; height: 250px; width: 100%; box-sizing: border-box; transform-style: inherit; line-height:250px; color:#FFFFFF; font-family: 'nexa_bold'; text-align:center; text-shadow: 0 0 8px rgba(0,0,0,.5); font-size:26px;}
.slide, .slide:before{background: 50% 50% / cover; }
#title{background-image: url("../img/bandeau1.jpg");  background-attachment: fixed; }
.gras{font-family: 'nexa_bold';}
#contact2{float:right; width:210px; margin-left:40px; visibility:hidden;}
#contact_texte{float:left; width:200px; margin:0 0 10px 10px; font-size:14px;}
#contact2 img{float:left; width:95px; height:92px; margin:0 0 10px 10px; opacity:1; transition: opacity 200ms linear;}
#contact2 img:hover{opacity:0.6; transition: opacity 200ms linear;}
#contact_photo{float:left; width:200px; height:200px; margin:0 0 10px 10px; background-image:url(../img/adrienkerros.jpg); background-size:cover;}
#btn{border-radius: 5px; padding: 15px 25px; font-size: 14px; text-decoration: none; color: #000; font-family: 'nexa_light'; background-color: #eee; transition: background-color 200ms linear; position:relative; float:left; cursor:pointer; border:0; width:100%; margin-bottom:0;}
#btn:hover{background-color: #ffcc00; transition: background-color 200ms linear;}
input:hover{border:1px solid #ccc; transition: border-color 200ms linear;}
textarea:hover{border:1px solid #CCC; transition: border-color 200ms linear;}
input:focus{border:1px solid #ccc; transition: border-color 200ms linear;}
textarea:focus{border:1px solid #CCC; transition: border-color 200ms linear;}
.button{float:left; margin-right:20px; margin-bottom:20px; padding:10px 20px; font-size:14px; background-color:#000; color:#FFF; cursor:pointer; transition: color 200ms linear; transition: background-color 200ms linear;}
.button:hover{background-color:#333; transition: background-color 200ms linear;}
.buttonactif{float:left; margin-right:20px; margin-bottom:20px; padding:10px 20px; font-size:14px; background-color:#fff; color:#000; transition: color 200ms linear; transition: background-color 200ms linear; cursor:default;}
#vignettes{float:left; width:100%; margin-bottom:80px;}
.view img{float:left; width:100%; opacity:1; transition: opacity 200ms linear;}
.view img:hover{opacity:0.6; cursor:pointer; transition: opacity 200ms linear;}
#awork{visibility:hidden;}
.fiche{width:100%; float:left; margin-bottom:110px; margin-top:30px; opacity:0; position: relative;}
.fiche img{width:100%; float:left;}
.title_fiche{width:100%; float:left; margin:50px 0; text-align:center;}
.stitle_fiche{padding:10px 20px; font-size:14px; text-transform:uppercase; background-color:#000; color:#fff;}
.detail_fiche ul{padding:0 0 0 20px; list-style:none; margin:0;}
.detail_fiche ul li:before{font-family: 'FontAwesome'; content: '\f00c'; margin:0 5px 0 -15px;}
.close{width:30px; height:30px; right: 0; cursor: pointer; position:absolute; font-size: 40px; margin-top:-50px; transition: color 200ms linear;}
.close:hover{color:#333; transition: color 200ms linear;}
.close .fa{line-height: 29px;}
.alert-danger{color: #a94442; background-color: #f2dede; border-color: #ebccd1;}
.alert-success{color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;}
button.closetxt{-webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0;}
.success{display:none;}
.error{display:none;}
#motscles{visibility:hidden;}
#googlemap{width:200px; height:200px; float:left; margin-left:10px; overflow:hidden;}
}

@media (min-width : 992px) {
#bheader{ width:792px; margin:0 auto; padding:10px 0; height:60px;}
.content{width:792px; margin:0 auto;}
.lcontent{width:792px; margin:30px 0; float:left;}
.mypicto{float:left; width:50px;}
.mytext{float:left; width:321px; font-size: 14px;}
#myinfo1{float:left; width:371px; margin:0 25px 25px 0; text-align:justify; visibility:hidden;}
#myinfo2{float:left; width:371px; margin:0 0 25px 25px; text-align:justify; visibility:hidden;}
#myinfo3{float:left; width:371px; margin:25px 25px  80px 0; text-align:justify; visibility:hidden;}
#myinfo4{float:left; width:371px; margin:25px 0 80px 25px; text-align:justify; visibility:hidden;}
#contact1{float:left; width:491px; padding-right:50px; border-right:1px solid #eee; text-align:center; margin-bottom:80px; visibility:hidden;}
input{width:453px; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; border:1px solid #eee; transition: border-color 200ms linear;}
textarea{width:453px; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; min-height:300px; border:1px solid #eee; transition: border-color 200ms linear;}
.texte_fiche{width:522px; float:left; font-size:14px; margin-right:50px; text-align:justify;}
.detail_fiche{width:198px; float:left; font-size:14px; border:1px solid #000; padding:10px;}
.alert{padding: 15px; border: 1px solid transparent; border-radius: 4px; float:left; width:459px; margin-top:10px; font-size:14px;}
.view{float:left; width:264px; background-color:#FFF; height:185px;}
.slide{line-height:250px; color:#FFFFFF; font-family: 'nexa_bold'; text-align:center; text-shadow: 0 0 8px rgba(0,0,0,.5); font-size:30px;}
}

@media (min-width : 1200px) {
#bheader{ width:1000px; margin:0 auto; padding:10px 0; height:60px;}
.content{width:1000px; margin:0 auto;}
.lcontent{width:1000px; margin:30px 0; float:left;}
.mypicto{float:left; width:50px;}
.mytext{float:left; width:425px; font-size: 14px;}
#myinfo1{float:left; width:475px; margin:0 25px 25px 0; text-align:justify; visibility:hidden;}
#myinfo2{float:left; width:475px; margin:0 0 25px 25px; text-align:justify; visibility:hidden;}
#myinfo3{float:left; width:475px; margin:25px 25px  80px 0; text-align:justify; visibility:hidden;}
#myinfo4{float:left; width:475px; margin:25px 0 80px 25px; text-align:justify; visibility:hidden;}
#contact1{float:left; width:699px; padding-right:50px; border-right:1px solid #eee; text-align:center; margin-bottom:80px; visibility:hidden;}
input{width:661px; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; border:1px solid #eee; transition: border-color 200ms linear;}
textarea{width:661px; border:0; border-radius:5px; font-family: 'nexa_light'; font-size:14px; color:#000; padding:18px; background-color:#eee; margin-bottom:10px; min-height:300px; border:1px solid #eee; transition: border-color 200ms linear;}
.texte_fiche{width:730px; float:left; font-size:14px; margin-right:50px; text-align:justify;}
.detail_fiche{width:198px; float:left; font-size:14px; border:1px solid #000; padding:10px;}
.alert{padding: 15px; border: 1px solid transparent; border-radius: 4px; float:left; width:667px; margin-top:10px; font-size:14px;}
.view{float:left; width:333px; background-color:#FFF; height:234px;}
.slide{line-height:250px; color:#FFFFFF; font-family: 'nexa_bold'; text-align:center; text-shadow: 0 0 8px rgba(0,0,0,.5); font-size:38px;}
}