/*police de caractère*/ 
@font-face {
  font-family: "NHaasGroteskTXPro-56It";
  src: url('webFonts/NHaasGroteskTXPro56It/font.woff2') format('woff2'), url('webFonts/NHaasGroteskTXPro56It/font.woff') format('woff');
}
@font-face {
  font-family: "NHaasGroteskTXPro-55Rg";
  src: url('webFonts/NHaasGroteskTXPro55Rg/font.woff2') format('woff2'), url('webFonts/NHaasGroteskTXPro55Rg/font.woff') format('woff');
}



#viewport 
{
   width; width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}


#bloc_page
{

width: auto;
margin-right: 20px;
margin-left:20px;
margin-bottom:20px; 

}
@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}}

*
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;

}



/*Texte alignement*/
* 
{

text-align:left;

}



/*Taille des textes*/ 

.bigtitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 77px

}

@media (max-width: 800px)
{.bigtitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 52px

}

@media (max-width: 320px)
{.bigtitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 42px

}
}}






.mediumtitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 58px

}

@media (max-width: 800px)
{.mediumtitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 38px;
margin-top: 40px;
margin-bottom: 20px;

}

@media (max-width: 320px)
{.mediumtitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 38px;
margin-top: 40px;
margin-bottom: 20px;

}
}}





.smalltitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 32px

}

@media (max-width: 800px)
{.smalltitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 30px;
margin-top: 10px;
margin-bottom: 5px;

}

@media (max-width: 320px)
{.smalltitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 34px;
margin-top: 10px;
margin-bottom: 5px;
}
}}




.littletitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 29px;

}

@media (max-width: 320px)
{.littletitle
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 23px;
margin-top: 15px;
margin-bottom: 10px;
}
}



.texte

{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 23px;

}
@media (max-width: 800px)
{.texte
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;
margin-top: 02px;

}



@media  (max-width: 320px)
{.texte
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;
margin-top: 02px;

}
}}









.smalltext

{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 21px;

}

@media (max-width: 800px)
{.smalltext
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;


}

@media  (max-width: 320px)
{.smalltext
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;


}}}





p
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 23px;

}










.header
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 21px

}

@media  (max-width: 320px)
{.header
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 21px;

}
}







.footer
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 18px

}






.top

{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 23px
}


.logo

{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 29px

}





/*Texte italic*/ 
em
{
   font-family: "NHaasGroteskTXPro-56It", sans-serif, italic; 

}

/* Texte underline*/
.underline
{
   text-decoration: underline solid;
   font-size: 21px
}

@media (max-width: 800px)
{.underline
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}

@media  (max-width: 320px)
{.underline
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}
}}


.underline02
{
   text-decoration: underline solid;
   font-size: 23px
}

@media (max-width: 800px)
{.underline02
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}


@media  (max-width: 320px)
{.underline02
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}
}}





/*outline*/
.outline01
{
border-top: 1px 
solid #000;

} 

@media  (max-width: 320px)
{.outline01
{

display: flex; 
flex-direction: row;
margin-top:5px;

}
}


.outline02
{
display: flex; 
flex-direction: row;
border-bottom: 1px solid #000;
margin-top:10px;
margin-bottom: 10px; 

} 
@media  (max-width: 320px)
{.outline02
{

display: flex; 
flex-direction: row;
border-bottom: 1px solid #000;
margin-top:5px;
margin-bottom: 5px; 

}
}











/*Navigation*/ 

a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: black;
}



 a:hover /* Apparence au survol des liens */
{
   text-decoration: none;
   color: #C9C9C9;
}





.underlinenav
{
  text-decoration: underline solid;
  font-size: 21px
}


@media (max-width: 800px)
{.underlinenav
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}

@media (max-width: 320px)
{.underlinenav
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}
}}





.underlinenav02
{
  text-decoration: underline solid;
  font-size: 23px
}

@media (max-width: 800px)
{.underlinenav02
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}

@media  (max-width: 320px)
{.underlinenav02
{

font-family: 'NHaasGroteskTXPro-55Rg',sans-serif;
font-size: 20px;

}
}}



















/*Espace Blanc*/
.spacing01

{
  margin-top: 35px;
  margin-bottom: 65px;
}

@media (max-width: 800px)
{.spacing01
{

    margin-top: 5px;
  margin-bottom: 15px;

}

@media  (max-width: 320px)
{.spacing01
{

    margin-top: 5px;
  margin-bottom: 15px;

}
}}









.spacing02

{
  margin-top: 35px;
  margin-bottom: 220px;
}


@media (max-width: 800px)
{.spacing02
{

    margin-top: 10px;
  margin-bottom: 150px;

}

@media  (max-width: 320px)
{.spacing02
{

    margin-top: 10px;
  margin-bottom: 150px;

}
}}









.spacing03

{
  margin-top: 0px;
  margin-bottom: 80px;
}

@media (max-width: 800px)
{.spacing03
{

    margin-top: 0px;
  margin-bottom: 50px;

}


@media  (max-width: 320px)
{.spacing03
{

    margin-top: 0px;
  margin-bottom: 50px;

}
}}







.spacing04

{
  margin-top: 85px;
  margin-bottom: 80px;
}

@media (max-width: 800px)
{.spacing04
{

margin-top: 0px;
margin-bottom: 25px;

}


@media  (max-width: 320px)
{.spacing04
{

margin-top: 0px;
margin-bottom: 25px;

}
}}









.spacing05

{
  margin-top: 10px;
}

@media (max-width: 800px)
{.spacing05
{

margin: 0px;

}

@media  (max-width: 320px)
{.spacing05
{

margin-top: 0px;

}
}}




.spacing06

{
  margin-top: 85px;
  margin-bottom: 80px;
}

@media (max-width: 800px)
{.spacing06
{

margin-top: 0px;
margin-bottom: 40px;

}

@media  (max-width: 320px)
{.spacing06
{

margin-top: 0px;
margin-bottom: 40px;

}
}}






.spacing07

{
  margin-top: 0px;
  margin-bottom: 0px;
}

@media (max-width: 800px)
{.spacing07
{

margin-top: 0px;
margin-bottom: 50px;

}

@media  (max-width: 320px)
{.spacing07
{

margin-top: 0px;
margin-bottom: 50px;

}
}}






/*menu navigation TOP*/

#conteneurmenu
{
   
  display: flex; 
  flex-direction: row;
}

.logo01
{
flex-basis: 180px;


}

.menutop
{

margin-left: auto;

}


@media (max-width: 800px)
{#conteneurmenu
{

display: flex; 
flex-direction: column;


}
.logo01
{
flex-basis: 0px;
margin-left: 0%;

}
.menutop
{
flex-basis: 0px;
margin-left: 0%;

}
}

@media (max-width: 320px)
{#conteneurmenu
{

display: flex; 
flex-direction: column;


}
.logo01
{
flex-basis: 0px;
margin-left: 0%;

}
.menutop
{
flex-basis: 0px;
margin-left: 0%;

}
}}










/*CONTENEUR TOP*/

#conteneurtop
{
   
  display: flex; 
 flex-basis: 600px;
 

}

.top
{

flex: 0px;
margin-top: 3px;
padding-left: 350px;

}

@media (max-width: 800px)
{#conteneurtop
{
   
 display: flex; 

}

.top
{

flex: 0px;
margin-top: 3px;
padding-left:0px;

}}

@media  (max-width: 320px)
{#conteneurtop
{
   
 display: flex; 

}

.top
{

flex: 0px;
margin-top: 3px;
padding-left:0px;

}}






/*ALLIGNEMENT*/

#conteneur
{
   
  display: flex; 
  flex-direction: row;
  flex-basis: 670px;

}

.element01
{
flex-basis: 670px;



}

.element02
{
flex: 0px;
margin-top: 3px;
padding-left: 25px;


}


.element03
{


align-self: flex-end;
margin: 0px;

}



@media (max-width: 800px)
{#conteneur
{
   
  display: flex; 
  flex-wrap: wrap;

}

.element01
{

margin:0px;
margin-top: 3px;
margin-bottom: 15px;

}

.element02
{
flex: 0px;
margin-top: 3px;
padding-left: 0px;
margin-left: 0px;


}


.element03
{
margin:0px;


}
}



@media  (max-width: 320px)
{#conteneur
{
   
  display: flex; 
  flex-wrap: wrap;

}

.element01
{

margin:0px;
margin-top: 3px;
margin-bottom: 15px;

}

.element02
{
flex: 0px;
margin-top: 3px;
padding-left: 0px;


}


.element03
{
margin:0px;


}
}}











/*NAVIGATION*/




nav ul
{
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  
}

@media (max-width: 800px)
{nav ul
{
   
    
  flex-direction: column;
  margin: 0%;
  padding-left: 0%;
 
}

@media  (max-width: 320px)
{nav ul
{
   
    
  flex-direction: column;
  margin: 0%;
  padding-left: 0%;
 
}}}





nav li 
{
  display: inline;
   margin-left: 0%;
  
}
@media (max-width: 800px)
{nav li
{
  
   margin-left: 0%;

   padding-left: 0%;
   display: inline;
 
}

@media  (max-width: 320px)
{nav li
{
  
   margin-left: 0%;

   padding-left: 0%;
   display: inline;
 
}}}






nav a 
{
  display:inline-block;
  margin: 20px;
  margin-left: 0px;
}

@media (max-width: 800px)
{nav a
{
 
  display: flex; 
  justify-content: left;
  margin: 5px; 
  padding-left: 0%;
  
 
}

@media  (max-width: 320px)
{nav a
{
 
  display: flex; 
  justify-content: left;
  margin: 5px; 
  padding-left: 0%;
  
 
}}}











.outlinefooter
{

border-top: 1px 
solid #000;

} 














/*COLOPHON*/


#conteneur02 /*colophon Site internet*/
{
display: flex; 
flex-direction: : column;

}

.column01
{
 
flex-basis: 45%;
margin-bottom:80px;
margin-right: 60px;

}

.column02
{

flex-basis: 45%;
margin-bottom:80px;
margin-right: 60px;

}

.column03
{


flex-basis: 45%;
margin-bottom:80px;

}



@media (max-width: 800px)
{#conteneur02
{
   
  display: flex; 
  flex-direction: column;  
 
}

.column01
{
margin-right: 0px;
margin-top: 20px;
margin-bottom:20px;

}

.column02
{
margin-right: 0px;
margin-bottom:0px;

}

.column03
{


margin-bottom:20px;

}


@media  (max-width: 320px)
{#conteneur02
{
   
  display: flex; 
  flex-direction: column;  
 
}

.column01
{
margin-right: 0px;
margin-top: 20px;


}

.column02
{

margin-right: 0px;
margin-bottom:0px;

}

.column03
{


margin-bottom:20px;

}}}










#conteneur03 /*colophon Site internet*/
{
display: flex; 
flex-direction: : column;

}

.column04
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column05
{

flex-basis: 45%;
margin-right:60px;
margin-bottom:60px;

}

.column06
{


flex-basis: 45%;
margin-bottom:20px;

}



@media (max-width: 800px)
{#conteneur03
{
   
  display: flex; 
  flex-direction: column;  
 
}

.column04
{
 
margin-top: 20px;
margin-bottom:20px;

}

.column05
{

margin-bottom:0px;

}

.column06
{


margin-bottom:20px;

}


@media  (max-width: 320px)
{#conteneur03
{
   
  display: flex; 
  flex-direction: column;  
 
}

.column04
{
 
margin-top: 20px;
margin-bottom:20px;

}

.column05
{

margin-bottom:0px;

}

.column06
{


margin-bottom:20px;

}}}











#conteneur04 /*colophon Livres*/
{
display: flex; 
flex-direction: : column;

}

.column07
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column08
{

flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column09
{


flex-basis: 45%;
margin-bottom:80px;

}


@media (max-width: 800px)
{#conteneur04
{
   
  display: flex; 
  flex-direction: column;  
 
}

.column07
{
 
margin-top: 20px;
margin-bottom:10px;

}

.column08
{


margin-bottom:20px;

}

.column09
{

margin-bottom:40px;


}


@media  (max-width: 320px)
{#conteneur04
{
   
  display: flex; 
  flex-direction: column;  
 
}

.column07
{
 
margin-top: 20px;
margin-bottom:10px;

}

.column08
{


margin-bottom:20px;

}

.column09
{

margin-bottom:40px;


}}}









#conteneur05 /*colophon Documentaire*/
{
display: flex; 
flex-direction: : column;

}

.column10
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column11
{

flex-basis: 90%;
margin-right:60px;
margin-bottom:80px;

}


@media (max-width: 800px)
{#conteneur05 
{display: flex; 
flex-direction:column;

}

{
   
margin-top: 5px; 
 
}
.column10
{
 
margin-top: 20px;
flex-basis: 45%;
margin-bottom:10px;


}

.column11
{

flex-basis: 90%;
margin-bottom:40px;

}

@media  (max-width: 320px)
{#conteneur05 
{display: flex; 
flex-direction:column;

}

{
   
margin-top: 5px; 
 
}
.column10
{
 
margin-top: 20px;
flex-basis: 45%;
margin-bottom:10px;


}

.column11
{

flex-basis: 90%;
margin-bottom:40px;

}}}












#conteneur06 /*colophon Calculateur Web*/
{
display: flex; 
flex-direction: : column;

}

.column12
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column13
{

flex-basis: 90%;
margin-right:60px;
margin-bottom:80px;

}

@media (max-width: 800px)
{#conteneur06
{display: flex; 
flex-direction:column;

}
.column12
{

margin-top: 20px;
flex-basis: 45%;
margin-bottom:10px;

}

.column13
{

flex-basis: 90%;
margin-bottom:40px;

}

@media  (max-width: 320px)
{#conteneur06
{display: flex; 
flex-direction:column;

}
.column12
{

margin-top: 20px;
flex-basis: 45%;
margin-bottom:10px;

}

.column13
{

flex-basis: 90%;
margin-bottom:40px;

}}}













#conteneur07 /*colophon Crédits Photos*/
{
display: flex; 
flex-direction: : column;

}

.column14
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column15
{

flex-basis: 45%;
margin-right:60px;
margin-bottom:60px;

}

.column16
{


flex-basis: 45%;
margin-bottom:20px;

}

@media (max-width: 800px)
{#conteneur07
{display: flex; 
flex-direction:column;

}
.column14
{

margin-top: 20px;
margin-bottom:10px;

}

.column15
{


margin-bottom:0px;

}

.column16
{


margin-bottom:20px;

}

@media  (max-width: 320px)
{#conteneur07
{display: flex; 
flex-direction:column;

}
.column14
{

margin-top: 20px;
margin-bottom:10px;

}

.column15
{


margin-bottom:0px;

}

.column16
{


margin-bottom:20px;

}}}











#conteneur08 /*colophon Hébergement*/
{
display: flex; 
flex-direction: : column;

}

.column17
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column18
{

flex-basis: 90%;
margin-right:60px;
margin-bottom:80px;

}

@media (max-width: 800px)
{#conteneur08
{display: flex; 
flex-direction:column;

}
.column17
{

margin-top: 20px;
margin-bottom:10px;

}

.column18
{


margin-bottom:40px;

}


@media  (max-width: 320px)
{#conteneur08
{display: flex; 
flex-direction:column;

}
.column17
{

margin-top: 20px;


}

.column18
{


margin-bottom:40px;

}}}













#conteneur09 /*colophon Design */
{
display: flex; 
flex-direction: : column;

}

.column19
{
 
flex-basis: 45%;
margin-right:60px;
margin-bottom:80px;

}

.column20
{

flex-basis: 90%;
margin-right:60px;
margin-bottom:80px;

}

@media (max-width: 800px)
{#conteneur09
{display: flex; 
flex-direction:column;

}
.column19
{

margin-top: 20px;
margin-bottom:10px;

}

.column20
{


margin-bottom:20px;

}

@media  (max-width: 320px)
{#conteneur09
{display: flex; 
flex-direction:column;

}
.column19
{

margin-top: 20px;
margin-bottom:10px;

}

.column20
{


margin-bottom:20px;

}}}
















#conteneur10 /*menu footer accueil */
{
display: flex; 
flex-direction: :row;


}


.column21
{
 
flex-basis: 670px;
margin-right: 20px

}


.column22
{

flex: 600px;

}

@media (max-width: 420px)
{#conteneur10
{

display: flex; 
flex-direction: column;

}

.column21
{
 
flex-basis: 10px;
margin-right: 0px


}


.column22
{

flex: 10px;

}

}









#conteneur12 /*menu footer SWER montreal, qc*/
{
display: flex; 
flex-direction:row;
margin-left: 85%


}


.column23
{

align-self: flex-end;

}

@media (max-width: 800px)
{#conteneur12
{

display: flex; 
flex-direction: column;
margin-left: 0%

}

.column23
{
 
flex-basis: 10px;


}


@media (max-width: 420px)
{#conteneur13
{

display: flex; 
flex-direction: column;
margin-left: 0%

}

.column23
{
 
flex-basis: 10px;


}
}}















#conteneur13 /*menu footer SWER montreal, qc*/
{
display: flex; 
flex-direction:row;
margin-left: 85%


}


.column24
{

align-self: flex-end;

}

@media (max-width: 800px)
{#conteneur13
{

display: flex; 
flex-direction: column;
margin-left: 0%

}

.column24
{
 
flex-basis: 10px;


}


@media (max-width: 420px)
{#conteneur13
{

display: flex; 
flex-direction: column;
margin-left: 0%

}

.column24
{
 
flex-basis: 10px;


}
}}









/*Images dimensions*/

.img01 /* Éco-conception */
{
 
  width: 100%;
  height:100%;
 
}




#conteneur14
{
   
  display: flex; 
  flex-direction: row;

}

.img02 /* Éco-conception */
{
  width:57%;
  height:57%;
  margin-left: 43%;
 
}




@media (max-width: 800px)
{.img02
{

  width: 100%;
  height:100%;
  margin-left: 0%;

}


@media (max-width: 420px)
{.img02
{

  width: 100%;
  height:100%;
  margin-left: 0%;

}
}}




#conteneur15
{
   
  display: flex; 
  flex-direction: row;

}

.img03 /* Éco-conception */
{
  
  width:57%;
  height:57%;
  margin-left: 43%;
  
}

@media (max-width: 800px)
{.img03
{

  width: 100%;
  height:100%;
  margin-left: 0%;

}


@media (max-width: 420px)
{.img03
{

  width: 100%;
  height:100%;
  margin-left: 0%;

}
}}







#conteneur16
{
   
  display: flex; 
  flex-direction: row;

}
.img04 /* Éco-conception */
{
  width:57%;
  height:57%;
  margin-left: 43%;

}


@media (max-width: 800px)
{.img04
{

  width: 100%;
  height:100%;
  margin-left: 0%;

}


@media (max-width: 420px)
{.img04
{

  width: 100%;
  height:100%;
  margin-left: 0%;

}
}}












.img07 /* Processus */
{
 
  width: 100%;
  height:100%;

}


#conteneur17
{
   
  display: flex; 
  flex-direction: row;

}

.img06 /* Processus */
{

  width:57%;
  height:57%;
  margin-left: 43%;
  background-size: cover;
}




@media (max-width: 800px)
{.img06
{
  
  width: 100%;
  height:100%;
  margin-left: 0%;

}
}