@charset "utf-8";
/* CSS Document */
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');*/

* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'varela_roundregular';}
html {font-size: 62.5%;}

li {list-style: none;}
a {text-decoration: none; color: inherit}
p {color: grey; line-height: 2em}
h1{font-weight: 400;line-height: 1.3em; padding-bottom: 10px}
.TitreProjet{text-transform: uppercase}
.titreBoxProjets{padding-bottom: 0px; line-height: 0.3em;}
h3{color:#bea669; font-weight: 400; text-transform: uppercase}
h4{color: #bea669; text-transform: uppercase; line-height: 1.5em; font-weight : normal;}
.decoTitre{display:block; background-image: url("../img/decoTitre.png"); background-position: center; background-repeat: no-repeat; width:44px !important; float: left; height: 15px; margin-right: 10px}
/*h4::before,h4::after{ content: ''; display: block; height: 1px; background-color: #bea669 }*/
@font-face {
    font-family: 'varela_roundregular';
    src: url('../fonts/varelaround-regular-webfont.woff2') format('woff2'),
         url('../fonts/varelaround-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.logoSmart{display: none}
.logoScreen{display: block}
::selection { background: #F9F9F9}


.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: opacity 0.3s ease-out;
}

#header{ display: block;position: -webkit-sticky; top:0px; position: sticky; background-color: white; z-index: 1000}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
	padding-bottom: 30px;
	margin-bottom: 60px;
	height: 105px;
	width: 100%
}

.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}
.nav-menu {
    display: flex;
	position: relative;
    justify-content: space-between;
    align-items: center;
	margin-top: 20px;
}
    .fb-bt{position: absolute;
    right: 6px;
    margin-top: -36px;
}
.nav-item {margin-left: 3rem; padding: 5px 5px 5px 5px; position: relative; overflow: hidden; cursor: pointer}

.barSurvol { display: block;width: 100%; position:absolute; margin-top: -11px; border-bottom: 5px solid #bea669; transform: translateX(-109%); transition: all 0.3s ease; pointer-events: none; z-index: 2}
.nav-item:hover .barSurvol { transform: translateX(-8%);}
.barSurvolSelectPage { display: block;width: 100%; position:absolute; margin-top: -11px; border-bottom: 5px solid #bea669; left: 0; pointer-events: none; z-index: 2}

.nav-link{
	position: relative;
    font-size: 1.6rem;
    color: black;
	z-index: 5;
	text-transform: uppercase;
}

.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}
.logoImg{ display: block; height: 125px; overflow: hidden; transition: all 0.5s ease}
.mini{height: 35px; margin-top: 25px}
.oscarius{ display: block; margin-top:0px; transition: all 0.5s ease}
.oscariusLogo{ margin-top:-90px}

#conteneur { display: block; margin: auto; padding: 90px;  }
.bloc, .blocProjetsGalerie{margin-bottom: 15px; }

.blocProjetsGalerie{width: 30.3%}
.bloc img, .blocProjetsGalerie img{display: block; width:100%;cursor: pointer; position: relative; }

.article, .contactDescri{font-size: 1.3rem; padding-bottom: 15px}

#projetsHome::after {content: '';display: block;clear: both;}

.infoProjetSurv{display: block; width: 100%; height: 100%; position: absolute; background-color: white; transition: all 0.4s; opacity: 0; cubic-bezier(.5,0,.29,1); z-index: 5}
#conteneurProjets .bloc:hover .infoProjetSurv { opacity: 1; pointer-events: none}
#conteneurProjets .bloc{overflow: hidden;}
#conteneurProjets .infoProjetSurv .boxInfosProjets{margin-left: 0}

[class*="reveal-"]{opacity: 0;transform: translateY(30px);}
.reveal-ok{opacity: 1; transform: translateY(0); transition: 1s; cubic-bezier(.5,0,.29,1)}

.reveal-2{transition-delay: .1s;}
.reveal-3{transition-delay: .2s;}
.reveal-4{transition-delay: .3s;}
.reveal-5{transition-delay: .4s;}
.reveal-6{transition-delay: .5s;}
.reveal-7{transition-delay: .6s;}
.reveal-8{transition-delay: .7s;}
.reveal-9{transition-delay: .8s;}
.reveal-10{transition-delay: .9s;}



@media only screen and (min-width: 2540px) {
.bloc, .grid-sizer{ width: 19.5%;}
}
@media only screen and (min-width: 1752px) and (max-width: 2539px) {
.bloc, .grid-sizer{ width: 24.3%;}
	
}
@media only screen and (min-width: 821px) and (max-width: 1751px) {
.bloc, .grid-sizer{ width: 31.8%;}
	.blocProjetsGalerie{width: 48%}
}

@media only screen and (min-width: 300px) and (max-width: 820px) {
.bloc, .grid-sizer{ width: 100%;}
	#conteneur {padding:20px; margin-top: 20px}
	.infosProjet {float: none !important; width: 100% !important; position: relative !important; top:0 !important }
	.blocProjetsGalerie {width: 45% !important;}
	.imagesprojet {margin-left:0px !important;}
	.nav-item {margin-left: 0rem !important;}
.navbar {display: block !important; height: 140px !important; }
.filtre {width: 106% !important ;right: -8px !important ;text-align: center !important ;background-color: white; margin-bottom: 20px;}
	.nav-menu{margin-top: 10px !important; background-color: white; width: 101% !important ;right: 2px !important ;}
	.contactDescri {width: 100% !important;}
	.form, .form .box-message {width: 100% !important;}
	.form .box-message textarea { min-width: 100% !important; max-width:100% !important; }
	.logoSmart{display: block}
	.logoScreen{display: none}
}





 
.contactDescri{width: 600px;}
.form{width: 600px; height: 350px; position: relative; }
.form .box-Surname, .box-Firstname, .box-email{width: 100%; height: 45px; margin-bottom: 15px;  position: relative; overflow: hidden}
.form .box-message{ width:600px; height:auto; padding-bottom: 10px; padding-top: 15px; }
.form .box-message textarea  { font-family: 'varela_roundregular'; color: gray; width: 100%; min-width: 600px; max-width: 600px; min-height: 200px; max-height: 100%; margin-top: 15px; padding-top: 10px; background-color:#FBFBFB ;  border:none; outline: none;  }
.form .box-message label {width: 100%; height:100%; font-size: 1.3em; padding-bottom: 15px}
.form .box-Surname input, .form .box-Firstname input, .form .box-email input{width: 100%; height: 100%; padding-top: 10px; border: none; outline: none; color: grey}
.form .box-Surname label, .form .box-Firstname label, .form .box-email label{position: absolute; left: 0%; bottom: 0px;  width: 100%; height:100%; border-bottom: 1px black solid; pointer-events: none; font-size: 1.3em}
.form .box-Surname label::after, .form .box-Firstname label::after, .form .box-email label::after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0px; bottom: -1px; border-bottom: 3px solid #bea669; transform: translateX(-100%); transition: all 0.3s ease}
.content-name {position: absolute; bottom: 5px; left:0px; transition: all 0.3s ease}
.form input:focus + .label-Firstname .content-name, .form input:valid + .label-Firstname .content-name, 
.form input:focus + .label-Surname .content-name, .form input:valid + .label-Surname .content-name, 
.form input:focus + .label-email .content-name, .form input:valid + .label-email .content-name{ transform: translateY(-150%); font-size: 1.1em; font-weight: bold}
.form input:focus + .label-Firstname::after, .form input:valid + .label-Firstname::after, .form input:focus + .label-Surname::after, .form input:valid + .label-Surname::after, .form input:focus + .label-email::after, .form input:valid + .label-email::after{transform: translateX(0%)}
.form .envoyerBT button{ position: relative; width: 105px; padding: 5px 5px 5px 0; font-size: 1.3em; text-transform: uppercase;background-color: white; border: 1px solid black;transition: all 0.3s ease; cursor: pointer}
.form .envoyerBT button span{ position: absolute; padding-left: 5px; margin-top: -1px;  transform: translateX(0px); transition: all 0.3s ease;}
.form .envoyerBT button:hover span{transform: translateX(5px); color: #bea669}
.form .envoyerBT button:hover{border: 1px solid #bea669}


.navigationProjet{display: block; width: 100%; font-size: 2.5rem; }
.navigationProjet .prev, .navigationProjet .next{position: relative; display: inline-block; width: 50%; height: 75px}
.navigationProjet .next a{position: absolute; right: 0; color: black;transition: all 0.3s ease; padding: 10px; padding-right: 0px}
.navigationProjet .prev a{position: absolute; color: black;transition: all 0.3s ease; padding: 10px; padding-left: 0px }
.navigationProjet .next a:hover,.navigationProjet .prev a:hover{color:#bea669}
.infosProjet {display:block; float: left; width: 500px; top:90px; position: sticky; }
.projet {display: block; width: 100%; position: relative;}
.imagesprojet { height: 250px; margin-left: 600px; position: relative;}

.conteneurBoxInfos{display: block; padding-top: 10px; margin-left: -10px; overflow: hidden}
.boxInfosProjets { display: block; border-left: 1px solid #bea669; padding: 3px 10px 0 10px; margin-bottom: 10px; margin-left: -1px}
.conteneurBoxInfos :first-of-type{}
.filtre{ display: block; position: absolute; top: 25px; width:338px; right:-3px;text-align: right}
.filtre button{position: relative; width: auto; height: 20px; padding: 0 10px 0 10px; font-size: 1.25em; background-color: white; border:none; border-left: 1px solid #bea669; overflow: hidden;  cursor: pointer}
.filtre button:hover{ color:#bea669}

.filtre span:first-child button{border:none;}
.retourBT{ position: relative; width: auto; padding: 5px 5px 5px 5px; font-size: 1.1em; text-transform: uppercase;background-color: white; border: 1px solid black; margin-top: 10px; margin-bottom: 15px; cursor: pointer}
.retourBT a{display: block; width: 100%; height: 100%; color: black; transition: all 0.3s ease}
.retourBT:hover a{color: #bea669}