/**********************************************************************************
* Lists
************************************************************************************/ 

*[class*='list-'] ul { list-style:none; }
*[class*='list-'] { margin:0; }
*[class*='list-'] .first { clear: left; margin-left: 0; }
[class*=list-] h3 {margin:2.5% 0 2%}

.list-2-col .span6, .list-3-col .span4, .list-4-col .span3 { margin-bottom: 3%; }
.list-1-col .span12 { margin-bottom: 8px; float:none; clear:left; margin-left:0 }

.list-1-col h3 { font-size:110%; line-height:120%; margin:0 0 1%; }
.list-2-col h3 { font-size: 120%; line-height: 125%; }
.list-3-col h3 { font-size: 125%; line-height: 140%; }
.list-4-col h3 { font-size: 110%; line-height: 115%; }

.listelement-small-image .listimage img {margin-bottom: 12px; }
.listelement-small-image .listimage {width:20%;float:left}
.listelement-small-image .listtext {width:76%;float:left;margin-left:2.5%}
.listelement-small-image h3 { margin:0;}

.listelement-no-image-plain .listdate {font-size:110%;}
.listelement-no-image-plain h3 { margin:0;}

.listelement-portfolio, .listelement-portfolio img {margin-bottom:0}
.listelement-portfolio {position:relative;overflow:hidden}
.listelement-portfolio .item-name { position: absolute; bottom: 0px; background: rgba(0,0,0,0.3); width: 100%; text-align: center; margin: 0px; padding: 15px 0px; color: #fff; font-weight: 600; opacity: 1; height: 2em; overflow: hidden; width: 100%; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; }
.listelement-portfolio .item-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0px; opacity: 0; -webkit-transition: opacity 0.2s cubic-bezier(0,0,1,1) 0s; -moz-transition: opacity 0.2s cubic-bezier(0,0,1,1) 0s; -ms-transition: opacity 0.2s cubic-bezier(0,0,1,1) 0s; -o-transition: opacity 0.2s cubic-bezier(0,0,1,1) 0s; transition: opacity 0.2s cubic-bezier(0,0,1,1) 0s;}
.listelement-portfolio .item-overlay h4{color:#fff;padding:25px 20px 15px;font-weight:600;margin:0}
.listelement-portfolio .item-overlay em{font-size:12px;color:#ccc;font-weight:300;padding:0 20px;display:block}
.listelement-portfolio .item-overlay p{font-size:12px;color:#fff;font-weight:700;padding:0 20px;display:block}
.listelement-portfolio:hover .item-name{opacity:0.9;height:300px}
.listelement-portfolio:hover .item-overlay{opacity:1}

@media (min-width: 768px) and (max-width: 979px)
{
 *[class*='list-'] h3 { font-size: 105%; line-height: 110%;}
}

@media (min-width: 768px)
{
 .list-2-col .span6 { margin-bottom: 3%; }
 .list-2-col .span6:nth-child(2n+1) { clear: left; margin-left: 0; } 
 
 .list-3-col .span4 { margin-bottom: 3%; }
 .list-3-col .span4:nth-child(3n+1) { clear: left; margin-left: 0; } 
 
 .list-4-col .span3 { margin-bottom: 3%; }
 .list-4-col .span3:nth-child(4n+1) { clear: left; margin-left: 0; }
}

@media (max-width: 767px) 
{
 [class*=list-] .first { clear: inherit; margin-left: 3.18471%; }

 *[class*='list-'] h3 { font-size: 101%; line-height: 101%; }
 .list-2-col .span6:nth-child(2n+1), .list-3-col .span4:nth-child(2n+1), .list-4-col .span3:nth-child(2n+1) { clear: left; margin-left: 0; } 
 .list-2-col .span6, .list-3-col .span4, .list-4-col .span3 { width: 48.4076%; float: left; margin-left: 3.18471%; clear:none;} 
}


@media (max-width: 400px) 
{
.listelement-portfolio h5.item-name { font-size: 65%;line-height: 105%; padding: 15px 5px; }
.listelement-portfolio .item-overlay h4 { font-size: 65%;line-height: 105%; padding: 15px 10px 5px;}
.listelement-portfolio .item-overlay p { font-size: 50%;line-height: 105%; padding: 0 10px 5px;}
}