
/* List
==============================================================*/

.custcol-wrap .custcol-list {
	padding: 0;
	margin: 0;
	list-style: none;
	/*overflow: hidden;*/
	clear: both;
}

.custcol-wrap .custcol-list > li {
	float: left;
	margin: 0;
	padding: 0;
}

.custcol-list .custcol-inner {
	margin: 0 20px 20px 0;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.17);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


/* Grid
==============================================================*/

.custcol-grid1 .custcol-list > li { width: 100%; }
.custcol-grid2 .custcol-list > li { width: 50%; }
.custcol-grid3 .custcol-list > li { width: 33.33%; }
.custcol-grid4 .custcol-list > li { width: 25%; }
.custcol-grid5 .custcol-list > li { width: 20%; }


/* Filters
==============================================================*/
/*FAB */
.custcol-center {
	text-align: center;
	margin-bottom: 40px;
}
.custcol-wrap .custcol-filters {
	display: inline-block !important;
	list-style: outside none none;
	margin: 0 0 35px;
	overflow: visible;
}

.custcol-wrap select.custcol-filters {
	min-width: 100px;
	float: right;
	margin-bottom: 20px;
}

.custcol-wrap .custcol-filters li {
	float: left;
	margin: 0;
	padding: 0;
}

.custcol-wrap .custcol-filters a:hover.custcol-disable-filters i:before {
	animation-duration: 0.4s;
	animation-iteration-count: 1;
	animation-name: spinnerRotate;
	animation-timing-function: ease-in-out;
}

.custcol-wrap .custcol-filters a {
	background-color: #f6f6f6;
	border-right: 1px solid #dadada;
	border-radius: 0;
	color: #6e6e6e;
	display: inline-block;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 40px;
	margin: 0;
	outline: medium none;
	padding: 0 15px !important;
	text-decoration: none;
	text-shadow: none !important;
	transition: all 0.3s ease 0s;
}
.custcol-wrap .custcol-filters li:first-child a {
	padding: 0 9px !important;
	vertical-align: middle;
}

.custcol-wrap .custcol-filters li:last-child a {
	border: 0;
}

/*.custcol-wrap .custcol-filters a:hover {
	color: #c8974b !important;
	background-color:#ffffff !important;
}*/

.custcol-wrap .custcol-filters a.custcol-active-filter {
	background-color: #436088;
	color: #ffffff !important;
	text-shadow: none;
}


ul.custcol-filters {
	overflow: hidden;
}

ul.custcol-filters {
	border: 1px solid #dadada;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow: hidden;
}
.custcol-wrap .custcol-filters a.custcol-disable-filters {
	font-size: 1em;
}

/* Item Thumb
==============================================================*/

.custcol-list .custcol-thumb {
	position: relative;
	overflow: hidden;
	z-index: 1;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.custcol-thumb-padding .custcol-thumb {
	margin: 1px;
	outline: 1px solid #eee;
	border: 4px solid #fff;
}

.custcol-list .custcol-thumb img {
	width: 100%;
	height: auto;
	vertical-align: top;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	-webkit-transition: all .3s cubic-bezier(.25,.46,.45,.94);
	-moz-transition: all .3s cubic-bezier(.25,.46,.45,.94);
	-o-transition: all .3s cubic-bezier(.25,.46,.45,.94);
	transition: all .3s cubic-bezier(.25,.46,.45,.94);
}

.custcol-thumb-zoom .custcol-thumb:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}


/* Item View
==============================================================*/

.custcol-thumb .custcol-view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	-webkit-transition: opacity .3s, visibility 0s linear .3s;
	-moz-transition: opacity .3s, visibility 0s linear .3s;
	-o-transition: opacity .3s, visibility 0s linear .3s;
	transition: opacity .3s, visibility 0s linear .3s;
}

.custcol-thumb:hover .custcol-view {
	visibility: visible;
	opacity: 1;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}


/* Item Button
==============================================================*/

.custcol-view .custcol-button,
.custcol-view .custcol-button:visited {
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%20width=%2248px%22%20height=%2248px%22%20viewBox=%220%200%2024%2024%22%20enable-background=%22new%200%200%2024%2024%22%20xml:space=%22preserve%22%3E%3Cpath%20fill=%22white%22%20d=%22M21.938,2.519c-0.086-0.205-0.252-0.369-0.457-0.455C21.377,2.021,21.27,2,21.163,2h-6.726c-0.465,0-0.84,0.375-0.84,0.841c0,0.462,0.375,0.839,0.84,0.839h4.531l-5.688,5.679c-0.329,0.329-0.272,0.974,0.057,1.302c0.326,0.325,0.959,0.507,1.287,0.183l5.693-5.812v4.53c0,0.463,0.379,0.841,0.845,0.841c0.46,0,0.837-0.378,0.837-0.841v-6.72l0,0C22,2.729,21.98,2.622,21.938,2.519z%20M2.84,13.598c-0.463,0-0.84,0.377-0.84,0.842v6.722c0,0,0,0,0,0.003c0,0.107,0.021,0.218,0.062,0.316s0.102,0.187,0.176,0.265c0.004,0.003,0.004,0.008,0.006,0.011c0.003,0,0.006,0,0.008,0.004c0.075,0.075,0.166,0.137,0.266,0.178C2.621,21.979,2.73,22,2.84,22h6.723c0.465,0,0.84-0.377,0.84-0.84c0-0.467-0.375-0.842-0.84-0.842h-4.5l5.656-5.693c0.328-0.324,0.269-0.958-0.059-1.287c-0.327-0.328-0.957-0.385-1.285-0.057L3.68,19v-4.561C3.68,13.975,3.304,13.598,2.84,13.598z%22/%3E%3C/svg%3E");
	background-position: center center;
	background-repeat: no-repeat;
	height: 100%;
	left: 0;
	position: absolute;
	text-decoration: none;
	text-shadow: none;
	top: 0;
	transition: background 0.3s ease 0s;
	width: 100%;
}

/*.custcol-view .custcol-button,
.custcol-view .custcol-button:visited {
	display: inline-block;
	position: relative;
	top: 50%;
	padding: 7px 12px;
	margin: -17px 0 0;
	background-color: #ff5452;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
	text-decoration: none;
	text-shadow: -1px 0 0 rgba(0,0,0,0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transform: translateZ(0);
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
}*/

/*.custcol-view .custcol-button:hover {
	text-decoration: none;
	color: #fff;
}*/


/* Item Summary
==============================================================*/

.custcol-list .custcol-summary {
	padding: 10px;
	background-color: #fff;
	position: relative;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.custcol-list .custcol-summary h4 {
	font-size: 16px;
	font-style: italic;
	letter-spacing: -0.5px;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	text-align: center;
	text-shadow: none;
}

.custcol-list .custcol-summary h4 a {
	color: #777777;
	text-decoration: none;
}

.custcol-list .custcol-summary h4 a:hover {
	color: #999;
	text-decoration: underline;
}

.custcol-active-item .custcol-summary h4 a {
	/*background-color: #eee;
	box-shadow: -5px 0 0 0 #eee, 5px 0 0 0 #eee;*/
	color: #cc9e58!important;
	text-decoration: underline;
}

.custcol-list .custcol-summary p {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.5em;
	color: #999;
	text-shadow: none;
}


/* Media Queries
==============================================================*/

/* WXGA Screens */
@media only screen and (min-width: 1280px) {}

/* Desktop Screens */
@media only screen and (min-width: 960px) and (max-width: 1280px) {
	.custcol-grid5 .custcol-list > li {
		width: 20%;
	}
	.custcol-grid3 .custcol-view .custcol-button,
	/*.custcol-grid2 .custcol-view .custcol-button { padding: 10px 17px; margin-top: -20px; }*/
}

/* Smaller than 960 */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait to 960 */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.custcol-grid5 .custcol-list > li,
	.custcol-grid4 .custcol-list > li {
		width: 33.33%;
	}
	/*.custcol-grid2 .custcol-view .custcol-button { padding: 10px 17px; margin-top: -20px; }*/
}

/* All Mobile Screens */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.custcol-grid5 .custcol-list > li,
	.custcol-grid4 .custcol-list > li,
	.custcol-grid3 .custcol-list > li {
		width: 50%;
	}
}

/* Mobile Portrait to Mobile Landscape */
@media only screen and (max-width: 479px) {
	.custcol-grid5 .custcol-list > li,
	.custcol-grid4 .custcol-list > li,
	.custcol-grid3 .custcol-list > li,
	.custcol-grid2 .custcol-list > li {
		width: 100%;
	}
	.custcol-list .custcol-inner { margin-right: 0!important; }
	ul.custcol-filters {
	border: none;
	border-radius: none;
	}
	.custcol-wrap .custcol-filters a,
	.custcol-wrap .custcol-filters li:last-child a {
	border: 1px solid #dadada;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 0 10px !important;
	margin: 0 2px 5px 0;
	}
	.custcol-list .custcol-summary {
	padding: 15px 10px;
	}
	#custcol_grille_violons .custcol-summary h4 {
	font-size: 18px;
	}
}


/* Misc
==============================================================*/

/* Can be used as <br class="clear" /> to clear floats */
.custcol .clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
