@charset "UTF-8";
/* CSS Document */


body {
	margin: 0px;
	padding: 0px;
	margin-top: 0px;
	font-family:"CentennialLTPro-Light", "Times New Roman",Times,Georgia,"DejaVu Serif",serif;font-size:18px;line-height:31px;background:#2e2e2e;color:#fff;
}

h1{
	font-size:10px;
	margin:0.67em 0;
	display: inline;
	text-align: center;
}
h3{
	font-size:2em;
	margin:0.67em 0;
	display: inline;
}

a{
	text-decoration:underline;
	color:#666;
}
a:hover{color:#fbfe7b;}
a:focus{outline:0;}

p{margin-top:0;padding:0;margin-bottom:1.72222em;}
p.small{font-size:0.8em;line-height:1.5;}

/* ==========================================================================
   Template
   ========================================================================== */
/**
 */
 
 @-webkit-viewport{
    width: device-width;
    zoom: 1;
}
@-moz-viewport{
    width: device-width;
    zoom: 1;
}
@-ms-viewport{
    width: device-width;
    zoom: 1;
}
@-o-viewport{
    width: device-width;
    zoom: 1;
}
@viewport{
    width: device-width;
    zoom: 1;
}
 
.bande-noire {
	background-color: #2e2e2e;
	color: #CCC;
	text-align: center;
	clear: both;
	height: 40px;
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
}
.contact {
	font-family:"CentennialLTPro-Light", "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
	font-size:18px;
	line-height:31px;
	color:#666;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 10px;
	text-align: center;
	background-color: #CCC;
	padding-top: 10px;
	padding-bottom: 30px;
}

.contenu {
	background-color: #FFF;
	width: 100%;
}
.contenu-txt {
	font-family:"CentennialLTPro-Light", "Times New Roman",Times,Georgia,"DejaVu Serif",serif;
	font-size:18px;
	line-height:31px;
	color:#2e2e2e;
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	padding-top:30px;
	text-align: center;
}

#centrage {
	margin:auto;
	display: table;
}

#postcard {
	width: 285px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #3C3C3C;
	padding-top: 10px;
	padding-bottom: 10px;
	display: table-cell;
}

.footer {
	height: 150px;
	width: 100%;
}
.footer-content {
	text-align: center;
	padding: 10px;
	width: 70%;
	margin-right: auto;
	margin-left: auto;
}
 
.responsive-image{
	width: 100%;
	background-size: 100% 100%;
}

#bloc{
width:70%;
height:auto;
display:table;
table-layout:fixed;
border-spacing:0;
padding:5px;
margin-left:15%;
margin-right:15%;
}
#bloc div{
vertical-align: top;
}
#bloc div p{
font:1.3em sans-serif;
}
#bloc > div{
display:table-cell;
width:50%;
height:25%px;
}

#bloc > div > div{
display:table;
width:100%;
height:100%;
}

#bloc > div > div > div{
display:table-cell;
height:100%;
width:50%;
padding:5px;
text-align:center;
vertical-align:middle;
}



/* Retina display */
@media screen and (min-width: 1600px){
	.responsive-image{
		background-image: url('../img/retina.jpg');
	}
}

@media screen and (min-width: 1024px) and (max-width: 1600px){
	.responsive-image{
		background-image: url('../img/retina.jpg');
	}
		 #bloc > div{
          display: table;
          width:100%;
          table-layout:fixed;
     }
     #bloc > div > div{
		display: table-row;
	 	width:100%;
     }
	 #bloc > div > div > div{
	 	display:table-cell;
	     height:250px;
	 }
	
	
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
	.responsive-image{
		background-image: url('../img/desktop.jpg');
	}
		 #bloc > div{
          display: table;
          width:100%;
          table-layout:fixed;
     }
     #bloc > div > div{
		display: table-row;
	 	width:100%;
     }
	 #bloc > div > div > div{
	 	display:table-cell;
	     height:250px;
	 }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
	.bande-noire {
	background-color: #2e2e2e;
	color: #CCC;
	text-align: center;
	clear: both;
	height: 40px;
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
	.responsive-image{
		background-image: url('../img/tablet.jpg');
	}
	
		 #bloc > div{
          display: table;
          width:100%;
          table-layout:fixed;
     }
     #bloc > div > div{
		display: table-row;
	 	width:100%;
     }
	 #bloc > div > div > div{
	 	display:table-cell;
	     height:250px;
	 }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
	.bande-noire {
	background-color: #2e2e2e;
	color: #CCC;
	text-align: center;
	clear: both;
	height: 70px;
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
	.responsive-image{
		background-image: url('../img/mobile-hd.jpg');
	}
	
	     #bloc{
     	display:block;
     }
     #bloc > div{
          display:table;
          height:350px;
          width:100%;
          border-collapse:collapse;
     }
     #bloc > div > div{
          display:table-row-group;
          width:100%;
     }
     #bloc > div > div > div{
          display:table-row;
          width:100%;
          height:auto;
          background:transparent;
     }
     #bloc > div > div > div div{
          display:table-cell;
          width:100%;
          height:150px;
          padding:5px;
          text-align:center;
          vertical-align:middle;
     }
}
/* Mobile LD */
@media screen and (max-width: 350px){
	.bande-noire {
	background-color: #2e2e2e;
	color: #CCC;
	text-align: center;
	clear: both;
	height: 70px;
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
	.responsive-image{
		background-image: url('../img/mobile-ld.jpg');
	}
	
	     #bloc{
     	display:block;
     }
     #bloc > div{
          display:table;
          height:350px;
          width:100%;
          border-collapse:collapse;
     }
     #bloc > div > div{
          display:table-row-group;
          width:100%;
     }
     #bloc > div > div > div{
          display:table-row;
          width:100%;
          height:auto;
          background:transparent;
     }
     #bloc > div > div > div div{
          display:table-cell;
          width:100%;
          height:150px;
          padding:5px;
          text-align:center;
          vertical-align:middle;
     }
}