.ff-container{
width: 98%;
/*width: 564px;*/
margin: -60px auto 30px auto;
}
.ff-container label_1{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
/*width: 11.111111%;*/
/*height: 30px;*/
/*padding: 5px 5px 5px 5px;*/
/*margin: 5px 5px 5px 5px;*/
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 10px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
float:left;
box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
}
/*
.ff-container label.ff-label-type-all{
border-radius: 3px 0px 0px 3px;
}
.ff-container label.ff-label-type-3{
border-radius: 0px 3px 3px 0px;
}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
.ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4,
.ff-container input.ff-selector-type-5:checked ~ label.ff-label-type-5,
.ff-container input.ff-selector-type-6:checked ~ label.ff-label-type-6,
.ff-container input.ff-selector-type-7:checked ~ label.ff-label-type-7,
.ff-container input.ff-selector-type-8:checked ~ label.ff-label-type-8,
.ff-container input.ff-selector-type-9:checked ~ label.ff-label-type-9
{
background: #646d93;
background: -moz-linear-gradient(top, #646d93 0%, #7c87ad 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646d93), color-stop(100%,#7c87ad));
background: -webkit-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: -o-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: -ms-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
color: #424d71;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset;
}
*/
.ff-container input{
display: none;
}
.ff-items{
position: relative;
margin: 0px auto;
padding-top: 20px;
}
.ff-items a{
display: block;
position: relative;
padding: 10px;
background: #fff;
/*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);*/
margin: 4px;
width: 160px;
height: 120px;
}
.ff-items a span{
font-family: 'Arial Narrow', Arial, sans-serif;
display: block;
/*background: rgba(162,193,56, 0.85);*/ /* #a2c138 */
/*font-style: italic;*/
color: #fff;
font-weight: bold;
padding: 20px;
position: absolute;
bottom: 10px;
left: 10px;
width: 120px;
height: 0px;
overflow: hidden;
opacity: 0;
text-align: center;
text-shadow: 1px 1px 1px #303857;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#kategorie_1{
background: rgba(162,193,56, 0.85);
}
.kategorie_1_produkt{
background: rgba(162,193,56, 0.5);
}
.kategorie_1_produkt_1{
background: rgba(162,193,56, 0.15);
}
#kategorie_1{
background: rgba(162,193,56, 0.85);
}
.kategorie_1_produkt{
background: rgba(162,193,56, 0.5);
}
.kategorie_1_produkt_1{
background: rgba(162,193,56, 0.15);
}
#kategorie_2{
background: rgba(209,105,160, 0.85);
}
.kategorie_2_produkt{
background: rgba(209,105,160, 0.5);
}
.kategorie_2_produkt_1{
background: rgba(209,105,160, 0.15);
}
#kategorie_3{
background: rgba(106,179,176, 0.85);
}
.kategorie_3_produkt{
background: rgba(106,179,176, 0.5);
}
.kategorie_3_produkt_1{
background: rgba(106,179,176, 0.15);
}
#kategorie_4{
background: rgba(231,177,93, 0.85);
}
.kategorie_4_produkt{
background: rgba(231,177,93, 0.5);
}
.kategorie_4_produkt_1{
background: rgba(231,177,93, 0.15);
}
#kategorie_5{
background: rgba(73,52,46, 0.85);
}
.kategorie_5_produkt{
background: rgba(73,52,46, 0.5);
}
.kategorie_5_produkt_1{
background: rgba(73,52,46, 0.15);
}
#kategorie_6{
background: rgba(106,169,66, 0.85);
}
.kategorie_6_produkt{
background: rgba(106,169,66, 0.5);
}
.kategorie_6_produkt_1{
background: rgba(106,169,66, 0.15);
}
#kategorie_7{
background: rgba(100,184,236, 0.85);
}
.kategorie_7_produkt{
background: rgba(100,184,236, 0.5);
}
.kategorie_7_produkt_1{
background: rgba(100,184,236, 0.15);
}
#kategorie_8{
background: rgba(157,96,159, 0.85);
}
.kategorie_8_produkt{
background: rgba(157,96,159, 0.5);
}
.kategorie_8_produkt_1{
background: rgba(157,96,159, 0.15);
}
#kategorie_9{
background: rgba(205,91,28, 0.85);
}
.kategorie_9_produkt{
background: rgba(205,91,28, 0.5);
}
.kategorie_9_produkt_1{
background: rgba(205,91,28, 0.15);
}
#kategorie_10{
background: rgba( 0.85);
}
.kategorie_10_produkt{
background: rgba( 0.5);
}
.kategorie_10_produkt_1{
background: rgba( 0.15);
}
.ff-items a:hover span{
height: 80px;
opacity: 1;
}
.ff-items li img{
display: block;
}
.ff-items li{
margin: 0px;
float: left;
height: 150px;
width: 0px;
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li{
width: 20%;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transition: -webkit-transform 0.3s linear;
-o-transition: -o-transform 0.3s linear;
-ms-transition: -ms-transform 0.3s linear;
transition: transform 0.3s linear;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4,
.ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5,
.ff-container input.ff-selector-type-6:checked ~ .ff-items .ff-item-type-6,
.ff-container input.ff-selector-type-7:checked ~ .ff-items .ff-item-type-7,
.ff-container input.ff-selector-type-8:checked ~ .ff-items .ff-item-type-8,
.ff-container input.ff-selector-type-9:checked ~ .ff-items .ff-item-type-9
{
-webkit-transition: -webkit-transform 0.3s linear, width 0s linear 0.3s;
-moz-transition: -moz-transform 0.3s linear, width 0s linear 0.3s;
-o-transition: -o-transform 0.3s linear, width 0s linear 0.3s;
-ms-transition: -ms-transform 0.3s linear, width 0s linear 0.3s;
transition: transform 0.3s linear, width 0s linear 0.3s;
-webkit-animation: scaleUp 0.3s linear 0.4s forwards;
-moz-animation: scaleUp 0.3s linear 0.4s forwards;
-o-animation: scaleUp 0.3s linear 0.4s forwards;
-ms-animation: scaleUp 0.3s linear 0.4s forwards;
animation: scaleUp 0.3s linear 0.4s forwards;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
.ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4),
.ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5),
.ff-container input.ff-selector-type-6:checked ~ .ff-items li:not(.ff-item-type-6),
.ff-container input.ff-selector-type-7:checked ~ .ff-items li:not(.ff-item-type-7),
.ff-container input.ff-selector-type-8:checked ~ .ff-items li:not(.ff-item-type-8),
.ff-container input.ff-selector-type-9:checked ~ .ff-items li:not(.ff-item-type-9)
{
-webkit-animation: scaleDown 0.3s linear forwards;
-moz-animation: scaleDown 0.3s linear forwards;
-o-animation: scaleDown 0.3s linear forwards;
-ms-animation: scaleDown 0.3s linear forwards;
animation: scaleDown 0.3s linear forwards;
}
@-webkit-keyframes scaleUp {
50% { width: 10%; -webkit-transform: scale(0,0); }
100% { width: 20%; -webkit-transform: scale(1,1); }
}
@-webkit-keyframes scaleDown {
0% { width: 20%;-webkit-transform: scale(1,1);}
99% { width: 20%; -webkit-transform: scale(0,0);}
100% { width: 0px; -webkit-transform: scale(0,0); }
}
@-moz-keyframes scaleUp {
50% { width: 10%; -moz-transform: scale(0,0); }
100% { width: 20%; -moz-transform: scale(1,1); }
}
@-moz-keyframes scaleDown {
0% { width: 20%;-moz-transform: scale(1,1);}
99% { width: 20%; -moz-transform: scale(0,0);}
100% { width: 0px; -moz-transform: scale(0,0); }
}
@-o-keyframes scaleUp {
50% { width: 10%; -o-transform: scale(0,0); }
100% { width: 20%; -o-transform: scale(1,1); }
}
@-o-keyframes scaleDown {
0% { width: 20%;-o-transform: scale(1,1);}
99% { width: 20%; -o-transform: scale(0,0);}
100% { width: 0px; -o-transform: scale(0,0); }
}
@-ms-keyframes scaleUp {
50% { width: 10%; -ms-transform: scale(0,0); }
100% { width: 20%; -ms-transform: scale(1,1); }
}
@-ms-keyframes scaleDown {
0% { width: 10%;-ms-transform: scale(1,1);}
99% { width: 20%; -ms-transform: scale(0,0);}
100% { width: 0px; -ms-transform: scale(0,0); }
}
@keyframes scaleUp {
50% { width: 10%; transform: scale(0,0); }
100% { width: 20%; transform: scale(1,1); }
}
@keyframes scaleDown {
0% { width: 20%; transform: scale(1,1);}
99% { width: 20%; transform: scale(0,0);}
100% { width: 0px; transform: scale(0,0); }
}