/**
* source : http://preview.themeforest.net/item/foundation-directory-listings-drupal-8-theme/full_screen_preview/18265589?_ga=2.178367648.542939265.1523622631-1903343228.1502347326
* style pour l element preview_box.ctp
*
*/

#PreviewBoxes{
	    display:block; 
}



@media (min-width: 78em){
	#PreviewBoxes  .previewBox:nth-child(4n + 1) {
    	clear: left;
	}
}


@media (min-width: 78em){
	#PreviewBoxes  .previewBox {
   	 	width: 23.17073%;
   	 	float: left;
    	margin-right: 1.5%;
	}
	
}

@media (max-width: 78em) and (min-width: 48em){
	#PreviewBoxes  .previewBox {
	    width: 48.78049%;
	    float: left;
	    margin-right: 1%;
	}
}

#PreviewBoxes  .previewBox {
    border: 3px solid #f3f2f1;
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 17px 17px 10px 17px;
    position: relative;
    top: 0;
    transition: all .2s ease;
    transform: translateZ(1px);
}

#PreviewBoxes  .previewBox:hover{
	border:3px solid #3CC47E; 
}

#PreviewBoxes  .previewBoxImage {
    margin: -17px -17px 0px -17px;
}

#PreviewBoxes  .previewBoxImage img {
    display: block;
    height: auto;
    width: 100%;
}

#PreviewBoxes img {
    border: 0;
}

#PreviewBoxes a {
    color: #3CC47E;
    text-decoration: underline;
}

#PreviewBoxes .previewBoxLabelRight {
    background-color: #3CC47E;
    color: #fff;
    font-size: 11px;
    padding: 5px 10px 3px 10px;
    position: absolute;
    right: 10px;
    text-decoration: none;
    top: 10px;
}

#PreviewBoxes .previewBoxLabelLeft {
    background-color: rgba(50,50,50,0.9);
    left: 10px;
    position: absolute;
    top: 10px;
}

#PreviewBoxes .previewBoxLabelLeft a {
    color: #fff;
    display: block;
    padding: 5px 10px 3px 10px;
    font-size: 11px;
    text-decoration: none;
}

#PreviewBoxes .previewBoxTitle h3{
	margin: 0px;
    line-height: initial;
}


#PreviewBoxes .previewBoxTitle h3 a {
    color: #02a78e;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

#PreviewBoxes .previewBoxText {
    display: inline-block;
}

#PreviewBoxes .previewBoxText a{
	   color:#000; 
}
#PreviewBoxes .previewBoxText p {
    display: block;
    font-size: 16px;
    line-height: 1.5;
    margin: 4px 0 0 0;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
 
}

#PreviewBoxes h3 a{
	color: #323232;
} 
#PreviewBoxes a{
	text-decoration: none;
}


#PreviewBoxes  .previewBoxLink {
    display: inline-block;
    margin: 5px 0 0 10px;
    vertical-align: top;
}