/*_____________________ 
Définition des polices- 
*/
@font-face 
{ 
    font-family: 'PolTh'; 
    src: url('police/Roboto-Thin.ttf') format('truetype'); 
}
@font-face 
{ 
    font-family: 'PolULt'; 
    src: url('police/Roboto-Thin.ttf') format('truetype'); 
}
@font-face 
{ 
    font-family: 'PolLt'; 
    src: url('police/Roboto-Light.ttf') format('truetype'); 
}
@font-face 
{ 
    font-family: 'PolMd'; 
    src: url('police/Roboto-Medium.ttf') format('truetype'); 
}
@font-face 
{ 
    font-family: 'PolStd'; 
    src: url('police/Roboto-Regular.ttf') format('truetype'); 
}

html, body 
{
    width: 100%;
    margin: 0;
    font-family: PolTh;
    font-size: 2.2vh; 
    font-weight: normal;
    background-image: url('fonds/StationLav-Trappes.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    background-attachment: fixed;
    background-position-y : 11vh;
    background-color: #fff;
}




/*_____________________________________________________
Contenaires de menus : prestations, portfolio, contact-
*/
.topbar-container
{
    top: 0;
    position: fixed;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 16vh;    
    display: inline-block;
    z-index: 9;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
.home-container
{
    margin: 0;
    position: relative;
    padding: 0;
    padding-top: 10vh;
    width: 100%;
    max-width: 100%;
    height: 91vh;
    background-color: #fff;
    background-image: url("fonds/Construc-Mesnil.png");
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: left bottom;
    z-index: 0;
   
}
.presta-container, .portfolio-container, .contact-container 
{
    position: relative;
    width: 100%;
    z-index: 0;
    padding: 0;
    margin: 0;
}
.presta-container
{
    background-color: f6f6f6;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}
.portfolio-container 
{ 
    display: inline-block;
    background-color: #fff; 
}
.contact-container { 
    position: relative;   
    height: 32vh;    
    padding-top: 1vh; 
    background-color: #000; 
}




/*_______________________________________________
Contenus : prestations, portfolio, contact-
Fractionnement du contenus : leftside, rightside-
*/
.topbar-inner
{
    padding: 0;
    padding-left: 8.5%; 
    padding-right: 8.5%;
    background-color: transparent;
}
.presta-inner, .portfolio-inner, .contact-inner
{
    padding-top: 11vh;
    padding-bottom: 5vh;
    padding-left: 8.5%; 
    padding-right: 8.5%; 
    overflow: hidden;
    background-color: transparent;
}
.presta-inner { display: flex; }
.contact-inner
{
    padding-top: 0vh;
    padding-bottom: 0vh;
    display: flex; 
}
.legal-inner
{
    padding-top: 7vh;
    padding-bottom: 25vh;
    padding-left: 8.5%; 
    padding-right: 8.5%; 
    background-color: transparent;
    overflow: hidden;
}


.leftside, .rightside  
{
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 50%;
  text-align: left;
  left: 0;
  background-color: transparent;
  padding: 0;
  margin-left: 0;
  z-index: 0;
}
.rightside-tiers
{
    position: absolute;
    width: 38%;
    height:100%;
    align: center;
    right: 0;
    background-color: transparent;
    margin-top: 23vh;
}




/*_________________________________________________________________
Contenaires : image de transition, mappe google, zone transparente-
*/
.mappe-container, .hole-container, .image-container 
{
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 0;
    background-color: #fff;
    overflow: hidden;
}
.mappe-container{ 
    height: 43vh;
    border-top: 1px solid #ccc; 
}
.hole-container 
{ 
    height: 24vh; 
    background-color: transparent; 
}
.image-container
{
    height: 72vh;
    background-image: url('fonds/Renov-Sevres.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;

}
.legal-container
{
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 0;
    background-color: #fff;
    overflow: hidden;
    height: 100vh;
    background-image: url('fonds/Passerelle-Crespieres.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}




/*__________________
Click menus-projets-
*/
.first-ssmenu, .next-ssmenu  
{
    padding: 0;
    font-family: PolLt;
    font-size: 1vw;
    line-height: 1.7vw;
	text-decoration: none;
}
.first-ssmenu { color: #96bf1c; }
.next-ssmenu
{
	color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.next-ssmenu:hover{
    color: #96bf1c;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}




/*______________________________
Click menus, mail, mail-contact-
*/
.clckmenu 
{
    font-family: PolLt;
    color: #000;
    font-size: 1.8vw;
    font-style: italic;
    padding-left: 2vw;
    font-weight: 200;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.clckmail, .clckcontact 
{
    font-family: PolLt;
    color: #fff;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.clckmail { color: #000; }
.clckmenu:hover, .clckmail:hover, .clckcontact:hover 
{
    color: #361;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}








h1 {
    font-family: PolTh;
    font-weight: normal;
    font-size: 8.7vh;
    line-height: 4vh;
}
h2 {
    font-family: PolTh;
    line-height: 6.3vh;
    font-size: 7vh;
    font-weight: normal;
}
.lettrine { color: #447711; }
.txtbold
{
    font-family: PolMd;
    text-decoration: underline;
}
.txtcontact
{
    font-family: PolULt;
    font-weight: normal;
    font-size: 2vh;
    line-height: 2.2vh;
    color: #fff;
}
li {
    font-size: 2.2vh;
    font-weight: normal;
}

 


.cadre 
{
    position: relative;
    display: inline-block;
    height: 390px;
    width: 390px;
    background-color: transparent;
    margin: 0;
}
.black-box {
    vertical-align: top;
    position : relative;
    width: 390px;
    height: 390px;
    padding: 0;
    margin : 0;
    display : inline-block;
    border: 0;
    font-size: 15px;
    background-color: #000;
}
.inner-box {
    padding: 15px;
    text-align: left;
    margin : 0;
}



   
h3
{                                                                                      
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
    width: 360px;
    height: 360px;
    padding: 15px;
    color: #fff;    
    font-family: PolMd;
    font-weight: normal;
    font-size: 2.2vh;
    line-height: 2.7vh;
    font-style: normal;

}                      
.cadre h3 
{ 
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 360px;
    height: 360px;
    padding: 15px;
    color: transparent;
    display: block;    
    -webkit-transition: all 1s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1s ease;
} 
.cadre:hover h3
{                                                                                      
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
    width: 360px;
    height: 360px;
    padding: 15px;
    color: #fff;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    transition: all 1s ease;
	background-image: url(transp.png);
}