.controls{display:inline-block;margin:20px 0 50px;width:100%;color:#000;font-size:16px; text-align: center}

.filter{display:inline-block; border:solid 1px #d5c3a9;padding: 14px 23px 11px;cursor:pointer;font-weight:400;text-transform: uppercase}
.filter:hover, .filter.active{background:#FFF8E5}
.filter:focus{outline:0 none}

.filter span{display: block; text-transform:none;font-size:14px}

#gallery-mix .container{padding:0.1% 0 0;text-align:justify;font-size:.1px;-webkit-backface-visibility:hidden}
#gallery-mix .container:after{content:'';display:inline-block;width:100%}
#gallery-mix .container .mix, #gallery-mix  .container .gap{display:inline-block;width:33.13333333333333%;margin-bottom:1%;}
#gallery-mix .container .mix{text-align:left;display:none}

#gallery-mix .container .mix:after{content:attr(data-myorder);display:inline-block;vertical-align:top;}
#gallery-mix .container .mix:before{content:'';display:inline-block;}

@media all and (max-width:1200px){
.filter{padding: 11px 12px 10px;font-weight:700;text-transform: none}
.filter span{font-weight:400;}		
#gallery-mix .container .mix, #gallery-mix  .container .gap{width:49.7%}	

.controls, .filter{display:block;}
.filter:not(:first-of-type) { border-top: none; } 	
.filter span{display: inline-block;}	
}

@media all and (max-width:600px){
#gallery-mix .container .mix, #gallery-mix  .container .gap{width:99.8%}	
}

/* IMAGE EFFECT */
.item-cont{overflow:hidden;display:inline-block;width:100%}
.item-cont img {width:100%}
.item-cont a {display:block;position:relative;color:#FFF;border-color:#F1DED5;font-size:20px;}
.item-cont a .item-content{position:absolute;width:100%;cursor:pointer;height:100%;text-align:center;top:0;left:0;opacity:1;}
.item-cont a .item-content:before{border-top:1px solid;border-bottom:1px solid;-webkit-transform:scale(0, 1);transform:scale(0, 1);opacity:0;}
.item-cont a .item-content:after{border-left:1px solid;border-right:1px solid;-webkit-transform:scale(1, 0);transform:scale(1, 0);opacity:0;}
.item-cont a .item-content:before,.item-cont a .item-content:after{border-color:#F1DED5;position:absolute;top:15px;right:15px;bottom:15px;left:15px;content:'';opacity:0;-webkit-transition:opacity 1.2s, -webkit-transform 1.2s;transition:opacity 1.2s, transform 1.2s;}
.item-cont a .item-content .text-cont{width:100%;opacity:0;position: relative}
.item-cont a .item-content .text-cont em{display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);font-size: 16px;text-align: center; color:#fff; font-style: normal; font-weight: 700; margin: 0;padding: 0}
.item-cont a .item-content .text-cont em.biggg{font-size:48px;line-height:96px;width:96px;height:96px;padding:0;margin:0;border:solid 2px #fff;border-radius:50%}
.item-cont a .item-content .text-cont em.smalll{font-size:32px;line-height:64px;width:64px;height:64px;padding:0;margin:0;border:solid 2px #fff;border-radius:50%}
.item-cont a .item-content .text-cont em{  opacity: 0; }
.item-cont a:hover .item-content .text-cont em{ opacity:1;
  transition: opacity .8s ease-in;
  -moz-transition: opacity .8s ease-in;
  -webkit-transition: opacity .8s ease-in;
  -o-transition: opacity .8s ease-in; }
.item-cont a .item-content .align-content{position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%);}
.item-cont a .figa{position:relative;width:100%;height:100%;-webkit-transition:-webkit-transform 0.8s;transition:transform 0.8s;-webkit-transform:scale(1, 1);-ms-transform:scale(1, 1);-o-transform:scale(1, 1);transform:scale(1, 1);}
.item-cont a .figa:after{position:absolute;width:100%;height:100%;left:0;top:0;content:"";background-color:rgba(2,24,50,0.5);opacity:0;}
.item-cont a .figa img{max-width:100%;height:auto;display:block;}
.item-cont a:hover .figa{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
.item-cont a:hover .figa:after{opacity:1;}
.item-cont a:hover .item-content{opacity:1;}
.item-cont a:hover .item-content:before,.item-cont a:hover .item-content:after{border-color:#F1DED5;}
.item-cont a:hover .item-content:before{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.item-cont a:hover .item-content:after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.item-cont a:hover .item-content .text-cont{opacity:1;}

.foto600 {width: 100%;max-width: 600px;display: block;margin-left: auto;margin-right: auto;}
.foto500{width:100%; max-width:500px; margin:0 auto; text-align:center;}
.foto900{width:100%; max-width:900px; margin:0 auto; text-align:center;}

@media only screen and (max-width:1024px){
.foto600 {padding-bottom: 10px;padding-top: 10px;}
}
@media only screen and (max-width:767px){
.item-cont a .item-content .text-cont p{font-size: 80%;}
.item-cont a .item-content .text-cont p.small{font-size:68%;}
}
@media only screen and (max-width:480px){
.item-cont a .item-content .text-cont p{font-size: 70%;}
.item-cont a .item-content .text-cont p.small{font-size:60%;}
}
@media only screen and (max-width:400px){
.item-cont a .item-content .align-content{position:relative;top:30%;transform:translateY(-30%);-webkit-transform:translateY(-30%);-moz-transform:translateY(-30%);}
.item-cont a .item-content .text-cont p.small{font-size:40%;}
}