/* ------ BOILERPLATE TEMPLATE ------ */
#Grid p{width:500px;margin:0 0 30px;text-align:left;line-height:1.5}
.portfolio-arrow{display:none}
#Grid{width:100%;text-align:justify;font-size:.1px}
#Grid:after{content:'';display:inline-block;width:100%}
#Grid .mix{display:none;opacity:0; position:relative;vertical-align:top;margin:0 10px 20px;padding:0;color:#000;overflow:hidden;font-size:12px;text-align:center;cursor:pointer}
#Grid li{display:block;opacity:1; position:relative; }
#Grid .mix .img-box{display:block; background:#ff8a00;margin:0;padding:0;width:370px;height:335px;overflow:hidden; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -webkit-transition:all 0.4s ease 0s;}
#Grid .mix .img-box img{display:block; width:100%; min-height:335px;}
#Grid .mix:hover .img-box img { opacity:0.2;  transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -webkit-transition:all 0.4s ease 0s;}
#Grid .mix .mix-details{font:600 20px 'Lato'; color:#ffffff; text-transform:capitalize; opacity:0; padding:0 10px;text-align:center; margin:0 auto; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);  transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -webkit-transition:all 0.4s ease 0s;}

#Grid .mix:hover .mix-details{opacity:1;  transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -webkit-transition:all 0.4s ease 0s;}


#Grid .gap{display:inline-block;width:200px}
.controls { font:normal 15px 'Lato'; display:block; text-align:center; margin:0 auto 8px auto;  vertical-align: top; width: auto;}
.controls li { display:inline-block; color:#232323; cursor:pointer; margin-left:0; padding:5px 10px;}
.controls li.active {color:#ff8a00; }