@media only screen
and (max-width : 1000px){ 
.comp{
display: none;
}
}
@media only screen
and (min-width : 1000px){ 
.mobile{ display: none;
}
}


#zoom {
  display: inline-block;
    height:40%;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
  
}
#zoom img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
#zoom:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

.advsocm{
background:#ca0000;
color:#fff;
width: 100px;
    height: 100px;
 border-radius: 50%;
    text-align: center;
    line-height: 60px;
    vertical-align: middle;
    padding: 20px;
 
}

.advsocm:hover, .socm:hover{
background:#fff;
color:#ca0000;
border-radius:55px;
padding:15px 15px 15px 15px;    
opacity:0.9;

}

input[type=text],input[type=mail],input[type=tel]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  
}



h2{
    font-weight:bold;
text-align:center;
}



input[type=submit]{
    margin-top:20px;
    font-weight:bold; background:darkblue; padding:5px 5px 5px 5px;   width:60%; color:#fff;  border:none;
}


input[type=submit]:hover{
        font-weight:bold; background:#c1b22e; padding:5px 15px 5px 15px;  color:#072654; font-size:16px;
      
}
 
/* image hover icon for prodycts*/
.imgcontainer {
  position: relative;
       animation-delay: 1s;

  animation-duration: 5s;

  }

.image {
  display: block;
  width: 100%;
  height: auto;

}

.overlay {
    z-index:999;
   position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
   width: 100%;
  opacity: 0;
  transition: 3s ease;
  background-color: #3e303078;
}

.imgcontainer:hover .overlay {
  opacity: 1;
}

.icon {
    border-radius:30%;
    background:#ca0000;
    padding:20px 20px 20px 20px;
  color: white;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.icon:hover, .fa-search-plus:hover {
  border-radius:30%;
    background:#fff;
   color: #ca0000;
}


#zoom {
  display: inline-block;
    height:40%;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
  
}
#zoom img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
#zoom:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}