/* COMMON CLASSES */
.break {
    clear: both;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}



/* WRAPPER */
#wrapper {
    width : 800px;
    margin: 0 auto;
}
/* CONTAINER */
#baniere{

   text-align: center;
    
}
/* CONTENT */
#content {
    margin-top: 0;
    margin: 5px;
}

#content img {
    
    border    : 5px solid #777;
    box-shadow: 3px 3px 5px #777
}

/* PROFILES */
.profiles,
.info {
    list-style: none;
    cursor    : pointer;
}

.profiles>li {
    width       : 350px;
    height      : 350px;
    float       : left;
    margin-right: 5px;
}

.info,
.pic {
    position: absolute;
}

.info {
    font-family     : 'Lato', sans-serif;
    color           : #fff;
    font-size       : 18px;
    padding         : 5px;
    background-color: rgba(223, 202, 15, 0.8);
    width           : 300px;
    height          : 300px;
    opacity         : 0;
    text-align      : right;
}

.info a {
    font-weight    : bold;
    font-size      : 25px;
    color          : #fff;
    text-decoration: none;
}

.info a:hover {
    text-decoration: underline;
}

.pic {
    width : 300px;
    height: 300px;
}

/* PUSH */
#push .info {
    transition      : all 0.3s;
    transition-delay: 0.2s;
}

#push .pic {
    transition: all 0.5s;
}

#push li:hover .info {
    opacity: 1;
}

#push li:hover .pic {
    opacity  : 0.7;
    transform: scale(0.7) rotate(10deg);
}

/* SLIDE */
#slide .info {
    transition: all 0.3s;
    transform : translate(-50px, 0);
}

#slide .pic {
    transition: all 0.3s;
}

#slide li:hover .info {
    opacity  : 1;
    transform: translate(0, 0);
}

#slide li:hover .pic {
    opacity  : 0;
    transform: translate(50px, 0);
}

/* FLIP */
#flip {
    perspective: 800px;
}

#flip .info {
    transition     : all 0.8s;
    opacity        : 1;
    transform-style: preserve-3d;
}

#flip .info li {
    transform: rotateY(180deg);
}

/* Flip the text: Will be flipped back when animated */
#flip .pic {
    transition         : all 0.8s;
    backface-visibility: hidden;
    z-index            : 999;
    transform-style    : preserve-3d;
}

#flip li:hover .info {
    transform: rotateY(180deg);
}

#flip li:hover .pic {
    transform: rotateY(180deg);
}

/* EXPLODE */
#explode .info {
    transition: all 0.7s;
    transform : scale(0.8);
}

#explode .pic {
    transition: all 0.7s;
}

#explode li:hover .info {
    opacity  : 1;
    transform: scale(1);
}

#explode li:hover .pic {
    opacity  : 0;
    transform: scale(1.4);
}


.projet{
	margin:  10px; ;
	  
	   padding: 10px;   
	  
	
	
	background-color: chocolate;
	background-image: url(../img/Camping.jpg);
  }
  .projet img{
	margin: 5px;
  }
  .real{
	display: flex;
  flex-wrap: wrap;
  }
  
  

.footer {
	padding: 35px 0;
	background: #CCC49F;
	position: relative;/* donne hasLayout à IE6 de façon à permettre un effacement correct */
	clear: both; /* cette propriété d'effacement force le .container à comprendre où se terminent les colonnes et à les contenir */
	text-align: center;
	color: #141414;
}