@import url('custom-fonts.css');

/* ===============================
12. Portfolio
================================ */

.work-nav #filters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-nav #filters li {
  margin: 0 10px 30px 0;
  padding: 0;
  float: left;
}

.work-nav #filters li a {
  color: #7F8289;
  font-size: 16px;
  display: block;
}

.work-nav #filters li a:hover {}

.work-nav #filters li a.selected {
  color: #DE5E60;
}

#thumbs {
  margin: 0;
  padding: 0;
}

#thumbs li {
  list-style-type: none;
}

.item-thumbs {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  cursor: pointer;
}

.item-thumbs a+img {
  width: 100%;
}

.item-thumbs .hover-wrap {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 450ms ease-out 0s;
  -moz-transition: all 450ms ease-out 0s;
  -o-transition: all 450ms ease-out 0s;
  transition: all 450ms ease-out 0s;
  -webkit-transform: rotateY(180deg) scale(0.5, 0.5);
  -moz-transform: rotateY(180deg) scale(0.5, 0.5);
  -ms-transform: rotateY(180deg) scale(0.5, 0.5);
  -o-transform: rotateY(180deg) scale(0.5, 0.5);
  transform: rotateY(180deg) scale(0.5, 0.5);
}

.item-thumbs:hover .hover-wrap, .item-thumbs.active .hover-wrap {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotateY(0deg) scale(1, 1);
  -moz-transform: rotateY(0deg) scale(1, 1);
  -ms-transform: rotateY(0deg) scale(1, 1);
  -o-transform: rotateY(0deg) scale(1, 1);
  transform: rotateY(0deg) scale(1, 1);
}

.item-thumbs .hover-wrap .overlay-img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.80;
  filter: alpha(opacity=80);
}

.item-thumbs .hover-wrap .overlay-img-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
  color: #fff;
  font-size: 32px;
  line-height: 1em;
  opacity: 1;
  filter: alpha(opacity=100);
}

/* --- Portolio filter --- */

ul.portfolio-categ {
  margin: 10px 0 30px 0;
  padding: 0;
  float: left;
  list-style: none;
}

ul.portfolio-categ li {
  margin: 0;
  padding: 0 20px 0 0;
  float: left;
  list-style: none;
  font-size: 30px;
  font-weight: 600;
}

ul.portfolio-categ li a {
  display: block;
  padding: 35x 0 35x 0;
  color: #353535;
}

ul.portfolio-categ li.active a:hover, ul.portfolio-categ li a:hover, ul.portfolio-categ li a:focus, ul.portfolio-categ li a:active {
  text-decoration: none;
  outline: 0;
}

/* --- portfolio detail --- */

.top-wrapper {
  margin-bottom: 20px;
}




/* =============================
21. Media queries
============================= */

@media (min-width: 979px) and (max-width: 1200px) {}

@media (min-width: 768px) and (max-width: 979px) {}

@media (max-width: 767px) {

  ul.portfolio li article a i.icon-48 {
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
  }

  [class*="span"] {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
 
  ul.portfolio li article a i.icon-48 {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {}
/* Theme Styler :: End */

/* portfolio */
.item-thumbs .hover-wrap .overlay-img {
	background: #F03C02;	
}

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}