body{
    background-image:url(../img/image.png);
    padding:0;
    margin:0;
    color:white;
    font-size:12px;
}

header, footer{
    background-image:url(../img/image2.png);
    padding:10px;
    width:100%;
}

main{
    width:90%;
    margin:auto;
    color:white;
}

p{
    text-align:justify;
}

.conteneur{
    margin:15px;
    padding:10px;
}

.entete{
    width:30%;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
}

.image{
    width:20%;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
}

header .image img{
    width:50%;
}

ul li{
    list-style-type:none;
    color:white;
}

.colonne{
    width:30%;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
}

footer{
    bottom:0;
}

footer p{
    text-align:center;
    width:30%;
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
    margin-left:30px;
}

iframe{
    display:inline-block;
    vertical-align:top;
    box-sizing:border-box;
}

#info {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;              
    background:#fcf8e3;
    border:1px solid  #fbeed5;
    width:95%;
    max-width:900px;
    margin:0 auto 40px auto;
    font-family:arial;
    font-size:12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

    #info .info-wrapper {
        padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;

    }
    
    #info a {
        color:#c09853;
        text-decoration:none;
    }
    
    #info p {
        margin:5px 0 0 0;
    }


.container { 
    position: relative; 
    width: 960px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
}
 
#filters {
    margin:1%;
    padding:0;
    list-style:none;
}

    #filters li {
        float:left;
    }
    
    #filters li span {
        display: block;
        padding:5px 20px;       
        text-decoration:none;
        color:#666;
        cursor: pointer;
    }
    
    #filters li span.active {
        background: #e95a44;
        color:#fff;
    }
 

 
#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:23%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;
    }

    .portfolio img {
        max-width:100%;
        position: relative;
    }
    
    .portfolio .label {
        position: absolute;
        width: 100%;
        height:40px;
        bottom:-40px;
    }

        .portfolio .label-bg {
            background: #e95a44;
            width: 100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
        }
    
        .portfolio .label-text {
            color:#fff;
            position: relative;
            z-index:500;
            padding:5px 8px;
        }
            
            .portfolio .text-category {
                display:block;
                font-size:9px;
            }
    
    
    



/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 768px; 
    }
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
    .container { 
        width: 95%; 
    }
    
    #portfoliolist .portfolio {
        width:48%;
        margin:1%;
    }       

    #ads {
        display:none;
    }
    
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 70%;
    }
    
    #ads {
        display:none;
    }
    
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;