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


}

 
/*--------- TSmall devices Tablets ------------*/
@media (min-width: 768px) and (max-width: 991px) {
.sm-100{width:100%}
.basic-menu li {
  margin-left: 30px;
}
.portfolio-grid-4 .portfolio-item {
  width: 33.33%;
}
.portfolio-mosaic .portfolio-item {
  width: 50%;
}
.about-text {
  margin-bottom: 60px;
  margin-top: 0;
}
.portfolio-view-btn {
  margin-bottom: 30px;
}


}

 
/*------------ Extra small devices ------------*/
@media (max-width: 767px) {
.basic-menu li {
  margin-left: 0;
}
.basic-menu > li > a::before {
  display: none;
}
.slide-1{background-size:cover}
.portfolio-item {
  width: 100%;
}
.area-title {
  width: 100%;
}
.call-to-action {
  text-align: left;
}
.hamburger {
  display: none;
}
.hamburger-menu {
  display: none;
}
.sticky .mean-container a.meanmenu-reveal {
  margin-top: -46px;
}
.copyright {
  margin-bottom: 10px;
  text-align: center;
}
.footer-menu {
  text-align: center;
}
.portfolio-grid-2 .portfolio-item {
  width: 100%;
} 
.portfolio-grid-4 .portfolio-item {
  width: 100%;
}
.portfolio-mosaic .portfolio-item {
  width: 100%;
}


 
}
 
/*----------- Large Mobile -------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.portfolio-item {
  width: 50%;
}
.portfolio-grid-2 .portfolio-item {
  width: 50%;
} 
.portfolio-grid-4 .portfolio-item {
  width: 50%;
}
 
}

.img,img{
 max-width: 100%;
transition: all 0.3s ease-out 0s;
}



.filter-menu button.active:after , .filter-menu button:hover:after {opacity:1}
.row-portfolio{margin:0 -10px}
.row-portfolio .portfolio-item{padding: 0 10px;}
.portfolio-wrapper {
  position: relative;
}
.portfolio-item{
  width: 33.33%;
    float: left;
    margin-bottom: 20px;  
}
.portfolio-thumb img {
  width: 100%;
}
.portfolio-thumb {
  position: relative;
}
.portfolio-thumb::before {
    background: #032f70e3 none repeat scroll 0 0;
    content: "";
    height: 37%;
    left: 0;
    opacity: 0;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease 0s;
    width: 100%;

}
.portfolio-wrapper:hover .portfolio-thumb::before{opacity:.8}
.view-icon {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  opacity:1;
  visibility:visible;
  z-index:9;
  transition:.3s
}
.portfolio-wrapper:hover .view-icon{transform: translateY(-50%);opacity:1;visibility:visible}
.view-icon > a {
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    color: #0c38b3;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    width: 50px;
}
.view-icon > a:hover{background:#666;}
.portfolio-caption {
  padding: 15px;
}
.portfolio-caption > h4 {
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  padding-bottom: 9px;
  position: relative;
}

.portfolio-caption {
  padding: 15px;
}
.portfolio-caption {
  padding: 15px;
}

/* portfolio style 2 */
.portfolio-style-2{}
.portfolio-style-2 .portfolio-caption {
  left: 0;
  opacity: 0;
  padding: 15px;
  position: absolute;
  right: 0;

  transition: all 0.3s ease 0s;
  visibility: hidden;
}
.portfolio-wrapper:hover .portfolio-caption{opacity:1;visibility:visible;    bottom: 0;}

/* portfolio-style-3 */
.portfolio-style-3{}
.portfolio-style-3 .portfolio-caption {
  bottom: 20px;
  top: inherit;
}
.portfolio-style-3 .portfolio-wrapper:hover .portfolio-caption {
  bottom: 0;
  top: inherit;
}
.row-portfolio.m-0{margin:0;}
.portfolio-style-4 .portfolio-thumb::before {
  background: #000 none repeat scroll 0 0;
}
.portfolio-style-4 .portfolio-wrapper:hover .portfolio-thumb::before {
  opacity: 0.7;
}
.portfolio-style-4 .portfolio-caption > h4 {
  color: #fff;
}
.portfolio-style-4 .work-tag > a {
  color: #fff;
}
.portfolio-style-4 .portfolio-caption {
  bottom: 50%;
  top: inherit;
}
.portfolio-style-4 .portfolio-wrapper:hover .portfolio-caption {
  transform:translateY(50%);
  bottom:50%;
}
.portfolio-grid-2 .portfolio-item {
  width: 50%;
}
.portfolio-grid-4 .portfolio-item{width:25%}
.no-space .portfolio-item{margin-bottom:0;}
.width-8{width: 66.6667%;}
#related-active .portfolio-item {
  width: 100%;
  padding:0 10px;
  margin-bottom:0;
}