* {
 margin: 0;
 padding: 0;
}



body,html {
height: 100%;
font-family: 'Roboto Condensed', sans-serif;
}


#page{
height: 100%;
width: 100%;
margin: 0 auto;

}



#bloc-logo {
margin: 200px auto 60px;
text-align:center;
background-color: rgba(0, 0, 0, 0.5);
border: 5px solid #088A85; 
width: 50%; 
padding: 30px 30px 30px 30px;
}


#visite {
text-align: center;
}


/*--------------- zone 2 -------------------------------------------------------*/	







#bloc-2  {
width: 100%; 
height: auto;
border: 0px solid transparent;
margin:200px auto 30px;
padding-top:80px;
text-align:center;
}



#bloc-2 .box-1{ 
width: 45%; 
height: auto; 
margin: 0px 30px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;	
background-color:#009999;		
}




.box-1 h1  {
font-weight: 900;
font-size:2.5em;
text-align: left;
margin: 40px 0px 40px 20px;
color: #FFFFFF; 
line-height: 0.95;

}


.box-1 p  {
font-weight: 200;
font-size:1.4em;
text-align: left;
margin: 10px 10px 20px 20px;
color: #FFFFFF; 

}


#bloc-2 .box-2{ 


width: 45%; 
 
margin: 0px 0px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;
background-color:#000000;

}




.youtube{

margin: 10% auto 10%;

width: 90%; 
height: 0; 
padding-bottom:56.25%;

overflow: hidden; 
position: relative;
}


.youtube iframe{

width: 100%; 
height: 100%; 
position: absolute;
top:0;
left:0;
}





/*--------------- zone 3 -------------------------------------------------------*/	



#bloc-3 {
width: 100%; 
height: auto;
border: 0px solid transparent;
margin: 0px auto 30px;
text-align:center;
}



#bloc-3 .box-1{ 

width: 45%; 
height: 600px; 
margin: 0px 30px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 0px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;
}


#fb {
width: 500px; 
height: 500px;
border: 1px solid transparent;
margin: 50px auto 0px;
text-align:center;
}



#bloc-3 .box-2{ 
width: 45%; 
height: auto; 
margin: 0px 0px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
text-align:center;
background-color:#F4FA58;	
}



.box-2 h1  {
font-weight: 900;
font-size:2.5em;
text-align: left;
margin: 40px 0px 20px 20px;
color: #2e2e2e; 
line-height: 0.95;

}


.box-2 h2  {
font-weight: 400;
font-size:1.6em;
text-align: left;
margin: 0px 0px -5px 20px;
color: #2e2e2e; 
}



.box-2 p  {
font-weight: 200;
font-size:1.4em;
text-align: left;
margin: 0px 0px 20px 20px;
color: #2e2e2e; 

}

.box-2 ul {
font-weight: 200;
font-size:1.4em;
text-align: left;
margin: 20px 10px 10px 20px;
color: #2e2e2e; 
list-style-type:disc;
}

.box-2 li {

margin: 0px 0px 0px 60px;

}


.box-2 a{
text-decoration: none;
color:#2e2e2e;
}

/*---------------------------------------------------------- Footer -------------------------------------------------------*/


#footer {

border: 0px solid transparent;
width: 100%; 
height: 200px;
margin: 0px auto 0px;
background-color: #FE9A2E;
}



#footer .copyright{ 


width: 49%; 
margin: 70px 0px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
		
		
}


.copyright h1{

padding-left:60px;
font-size: 1.3em;
color: #FFFFFF;
text-align:left;
font-weight:bold;
}



.copyright p{
padding-left:60px;
font-size: 1.1em;
color: #585858;
text-align:left;

}


.copyright a{
text-decoration: none;
color:#585858;
}


.copyright a:hover{
color:#FFFFFF;
}





#footer .info{ 


width: 49%; 
margin: 40px 0px 0px 0px;
vertical-align:middle; /* On aligne les éléments au milieu */
display:inline-block;/* On le remplace au float:left; */ 
border: 1px solid transparent; 
overflow: hidden; 
position: relative;
	
}




.info h1{

padding-right:60px;
font-size: 1.3em;
color: #FFFFFF;
text-align:right;
font-weight:bold;
}

.info p{
padding-right:60px;
font-size: 1.1em;
color: #585858;
text-align:right;
}




.info a{
text-decoration: none;
color:#585858;
}


.info a:hover{
color:#FFFFFF;
}





.boutonUp{
	position: fixed;
	right: 20px;
	bottom: 30px;
	height: 50px;
	width: 50px;
	border: 1px solid transparent;
	cursor: pointer;
	display:none;
	z-index:9999;
}


/*---------------------------------------------------------- Responsive -------------------------------------------------------*/








@media(min-width: 1151px){

#fb2 {
display:none;
}


}


@media(max-width: 1150px){




#fb {
display:none;
}


#fb2 {

width: 250px; 
height: 400px;
border: 1px solid transparent;
margin: 30px auto 30px;
text-align:center;

}


}









@media(max-width: 780px){


#bloc-logo {
margin: 150px auto 60px;
text-align:center;
background-color: rgba(0, 0, 0, 0.5);
border: 5px solid #088A85; 
width: 70%; 
padding: 30px 30px 30px 30px;
}




/* -------------------------- Bloc 2 -------------------------------- */


#bloc-2  {


width: 100%; 
height: auto;
border: 0px solid transparent;
margin:250px auto 30px;
padding-top:80px;
text-align:center;

}



#bloc-2 .box-1{ 


width: 90%; 
height: auto; 
margin: 0px auto 30px;
border: 0px solid transparent; 
text-align:center;
background-color:#009999;	
padding-bottom:30px;	
}




.box-1 h1  {
font-weight: 900;
font-size:2.3em;
text-align: left;
margin: 40px 0px 40px 20px;
color: #FFFFFF; 
line-height: 0.95;

}


.box-1 p  {
font-weight: 200;
font-size:1.4em;
text-align: left;
margin: 10px 10px 20px 20px;
color: #FFFFFF; 

}


#bloc-2 .box-2{ 
width: 90%; 
margin: 0px auto 0px;
border: 0px solid transparent; 
text-align:center;
}






/* -------------------------- Bloc 3 -------------------------------- */


#bloc-3 {


width: 100%; 
height: auto;
border: 0px solid transparent;
margin: 0px auto 30px;
text-align:center;

}



#bloc-3 .box-1{ 
width: 90%; 
height: auto; 
margin: 0px 0px 30px 0px;
border: 0px solid transparent; 
text-align:center;	
}


#bloc-3 .box-2{ 
width: 90%; 
height: auto; 
margin: 0px 0px 0px 0px;
border: 0px solid transparent; 
text-align:center;
background-color:#F4FA58;	
padding-bottom:30px;
}



.box-2 h1  {
font-weight: 900;
font-size:2.3em;
text-align: left;
margin: 40px 0px 20px 20px;
color: #2e2e2e; 
line-height: 0.95;

}


.box-2 h2  {
font-weight: 400;
font-size:1.4em;
text-align: left;
margin: 0px 0px -5px 20px;
color: #2e2e2e; 
}



.box-2 p  {
font-weight: 200;
font-size:1.4em;
text-align: left;
margin: 0px 0px 0px 20px;
color: #2e2e2e; 

}

.box-2 ul {
font-weight: 200;
font-size:1.3em;
text-align: left;
margin: 20px 10px 10px 20px;
color: #2e2e2e; 
list-style-type:disc;
}

.box-2 li {

margin: 0px 0px 0px 60px;

}






/* -------------------------- Footer -------------------------------- */




#footer {

border: 0px solid transparent;
width: 100%; 
height: auto;
margin: 0px auto 0px;
background-color: #FE9A2E;
text-align:center;
}



#footer .copyright{ 


width: 90%; 
margin: 30px auto 0px;
border: 1px solid transparent; 

}


.copyright h1{

padding-left:0px;
font-size: 1.2em;
color: #FFFFFF;
text-align:center;
font-weight:bold;
}



.copyright p{
padding-left:0px;
font-size: 1em;
color: #585858;
text-align:center;

}



#footer .info{ 
width: 90%; 
margin: 30px auto 30px;
border: 1px solid transparent; 
}




.info h1{

padding-right:0px;
font-size: 1.2em;
color: #FFFFFF;
text-align:center;
font-weight:bold;
}

.info p{
padding-right:0px;
font-size: 1em;
color: #585858;
text-align:center;
}




.boutonUp{
	position: fixed;
	right: 20px;
	bottom: 30px;
	height: 40px;
	width: 40px;
	border: 1px solid transparent;
	cursor: pointer;
	display:none;
	z-index:9999;
}



}






@media(max-width: 600px){






.box-1 h1  {
font-weight: 900;
font-size:2em;
text-align: left;
margin: 40px 0px 40px 20px;
color: #FFFFFF; 
line-height: 0.95;

}


.box-1 p  {
font-weight: 200;
font-size:1.1em;
text-align: left;
margin: 10px 10px 20px 20px;
color: #FFFFFF; 

}






.box-2 h1  {
font-weight: 900;
font-size:2em;
text-align: left;
margin: 40px 0px 20px 20px;
color: #2e2e2e; 
line-height: 0.95;

}


.box-2 h2  {
font-weight: 400;
font-size:1.2em;
text-align: left;
margin: 0px 0px -5px 20px;
color: #2e2e2e; 
}



.box-2 p  {
font-weight: 200;
font-size:1.1em;
text-align: left;
margin: 0px 0px 0px 20px;
color: #2e2e2e; 

}

.box-2 ul {
font-weight: 200;
font-size:1.1em;
text-align: left;
margin: 20px 10px 10px 20px;
color: #2e2e2e; 
list-style-type:disc;
}






#footer .copyright{ 


width: 90%; 
margin: 20px auto 0px;
border: 1px solid transparent; 

}


.copyright h1{

padding-left:0px;
font-size: 1em;
color: #FFFFFF;
text-align:center;
font-weight:bold;
}



.copyright p{
padding-left:0px;
font-size: 0.9em;
color: #585858;
text-align:center;

}



#footer .info{ 
width: 90%; 
margin: 20px auto 20px;
border: 1px solid transparent; 
}




.info h1{

padding-right:0px;
font-size: 1em;
color: #FFFFFF;
text-align:center;
font-weight:bold;
}

.info p{
padding-right:0px;
font-size: 0.9em;
color: #585858;
text-align:center;
}







.boutonUp{
	position: fixed;
	right: 20px;
	bottom: 30px;
	height: 30px;
	width: 30px;
	border: 1px solid transparent;
	cursor: pointer;
	display:none;
	z-index:9999;
}



}




@media(max-width: 415px){


#bloc-logo {
margin: 150px auto 60px;
text-align:center;
background-color: rgba(0, 0, 0, 0.5);
border: 5px solid #088A85; 
width: 70%; 
padding: 20px 30px 20px 30px;
}


}