/* Portfolio Grid */
.clearfix{ clear: left; float: none !important;}
#portfolio-grid { margin:0!important; }
#portfolio-grid li { float:left; list-style-type: none!important; height: 260px; margin: 1%; }


@media (max-width:1450px){
    #portfolio-grid li { height: 240px; }
}

@media (max-width:1320px){
    #portfolio-grid li { height: 200px; }
}

@media (max-width:1130px){
    #portfolio-grid li { height: 180px; }
}

@media (max-width:1040px){
    #portfolio-grid li { height: 160px; }
}

@media (max-width:940px){
    #portfolio-grid li { height: 130px; }
}

@media (max-width:800px){
    #portfolio-grid li { height: 100px; }
}

#portfolio-grid li a { text-decoration: none; width: 100%; height: 100%; display: block; }
#content #portfolio-grid li a img{margin: 0;}
#content ul#portfolio-grid li{padding: 0;}
#portfolio-grid li a p.photo-count { font-size: 0.8em; color: #666; padding: 5px 5px 0 5%; margin: 0;margin: 0 0 -10px 0; }
#portfolio-grid li a time { font-size: 0.8em; color: #999; padding:0px 5px 0 5%;}

/* Album view */

#gallery #content a{margin: 5px; display: block; float: left;}
#portfolio .portfolio-header h1{ color: #287ab7; }

body.portfolio-single { font-family: "helvetica neue",helvetica,arial,sans-serif; margin:0; border: none; padding:0; }

#portfolio-topbar { background-color: rgba(40,40,40,0.95); padding: 8px 20px; overflow: hidden; position: fixed; width: 100%; box-shadow:0px 0px 5px rgba(0, 0, 0, 0.78); }
#portfolio-topbar a { text-decoration: none; color:#fff;  }
#sitename { display: block; float:left; color:#fff; font-size: 1.3em; margin:4px 6% 0 0; font-weight: 300; }
.retour,
.edit-link a { display: block; float:left; padding: 4px 12px; background-color: #444; margin:0 0 0 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:0.9em; font-weight: 300; text-transform: lowercase; -moz-transition: all 0.3s ease;
               -webkit-transition: all 0.3s ease;
               -o-transition: all 0.3s ease;
               transition: all 0.3s ease; }
.retour:hover,
.edit-link:hover a { background-color: #F3F3F3; color:#232323!important; }

#portfolio-topbar #page-tools { top:10px!important; margin:0!important; }
#portfolio-topbar #page-tools .dezoom,
#portfolio-topbar #page-tools .zoom,
#portfolio-topbar #page-tools .print { display: none; }
.portfolio-header { position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; width: 95%; }
time { color:#999; margin:0 0 10px 0; display: block; font-size: 0.85em;  }
h1 { font-weight: 300; font-size: 2.4em; margin:20 0 10px 0; }
#gallery { margin:0 8px; }

.top-portfolio{ position: relative;}
.top-portfolio h2{
    color: #0a0c0c;
    font-size: 34px;
    font-weight: 600;
    font-family: 'Cormorant', serif;
    margin-bottom: 1em;
}


.top-portfolio h2 span{
    background: #fff;
    position: relative;
    z-index: 10;
    padding-right: 10px;

}

.top-portfolio h2:after{
    content: '';
    background: -moz-linear-gradient(left, rgba(105,28,46,1) 0%, rgba(105,28,46,0.85) 82%, rgba(105,28,46,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(105,28,46,1) 0%,rgba(105,28,46,0.85) 82%,rgba(105,28,46,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(105,28,46,1) 0%,rgba(105,28,46,0.85) 82%,rgba(105,28,46,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#691c2e', endColorstr='#00691c2e',GradientType=1 ); /* IE6-9 */
    width: 100%;
    height: 2px;
    position: absolute;
    top: 20px;
    right: 0;
}

#gallery{
    margin-bottom: 2em;
}


#gallery #content {
    /* Prevent vertical gaps */
    line-height: 0;

    -webkit-column-count: 5;
    -webkit-column-gap:   5px;
    -moz-column-count:    5;
    -moz-column-gap:      5px;
    column-count:         5;
    column-gap:           5px;
}

#gallery #content a , #gallery #content a img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
    margin: 0 0 3px 0;
}
@media (max-width: 768px) {
    #gallery #content {
        -moz-column-count:    3;
        -webkit-column-count: 3;
        column-count:         3;
    }
}
@media (max-width: 400px) {
    #gallery #content {
        -moz-column-count:    2;
        -webkit-column-count: 2;
        column-count:         2;
    }
}