/*
Template Name: Nx Models
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/
/*********************about****************/
#work{ 
 background-color:#f4f4f4;
 }
.work_1 h4{ 
 color: #cb506d;
 letter-spacing: 1px;
 padding-bottom: 10px;
 padding-top:100px;
 }
#work .ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
#work .ih-item,
#work .ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#work .ih-item a {
  color: #333;
}
#work .ih-item a:hover {
  text-decoration: none;
}
#work .ih-item img {
  width: 100%;
  height: 100%;
}
#work .ih-item.square {
  position: relative;
  width:100%;
  border: 8px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
#work .ih-item.square .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#work .ih-item.square.effect14.colored .info {
  background: #1a4a72;
}
#work .ih-item.square.effect14.colored .info h3 {
  background: rgba(12, 34, 52, 0.6);
}
#work .ih-item.square.effect14 .img {
  opacity: 1;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
#work .ih-item.square.effect14 .info {
  background: #cb506d;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.35s ease 0.2s;
  -moz-transition: all 0.35s ease 0.2s;
  transition: all 0.35s ease 0.2s;
}
#work .ih-item.square.effect14 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
}
#work .ih-item.square.effect14 .info p {
  font-style: italic;
  font-size:18px;
  position: relative;
  color: #fff;
  padding: 20px 20px 20px;
  text-align: center;
}
#work .ih-item.square.effect14 a:hover .img {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}
#work .ih-item.square.effect14 a:hover .info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#work .ih-item.square.effect14.bottom_to_top .img {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
#work .ih-item.square.effect14.bottom_to_top a:hover .img {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.work_5{ 
 text-align:center;
 padding-top:60px;
 }
.work_5 h4{ 
 padding-top:20px;
 padding-bottom:30px;
 font-weight:bold;
 }
/*********************about_end****************/


@media screen and (max-width : 767px){
.work_1 h4 {
 padding-top: 0px;
}
#work {
 text-align: center;
}
#work .ih-item.square {
 width: 100%;
 height: 100%;
 margin-bottom: 10px;
}
.work_2 h2{ 
 padding-bottom:10px;
}
.work_5 {
 padding-top: 0px;
 padding-bottom: 20px;
 min-height:auto;
}
#work .ih-item.square.effect14 .info p{
font-size:14px; 
 }
}

@media (min-width:768px) and (max-width:991px) {
.work_1 h4 {
 padding-top: 10px;
}
.work_5 {
 padding-top: 10px;
 padding-bottom: 10px;
 min-height:auto;
}
#work .ih-item.square {
 width: 100%;
 height: 100%;
}
#work .ih-item.square.effect14 .info p {
 font-size: 10px;
 padding: 0px 20px 20px;
}
.work_3  img{
min-height:200px; 
 }
 }
@media (min-width:992px) and (max-width:1200px) {
.work_1 h4 {
 padding-top:50px;
}
.work_5 {
 padding-top: 10px;
 padding-bottom: 10px;
  min-height:auto;
}
.work_5 h4 {
 padding-top: 80px;
}
#work .ih-item.square {
 width: 100%;
 height: 100%;
}
#work .ih-item.square.effect14 .info p {
 font-size: 10px;
 padding: 0px 20px 20px;
}
.work_3  img{
min-height:300px; 
 }
  }
@media (min-width:1201px) and (max-width:1357px) {
#work .ih-item.square {
 width: 100%;
 height: 100%;
}
#work {
 padding-bottom: 10px;
}
.work_3  img{
min-height:320px; 
 }
 }