@media only screen
and (max-width : 1000px){ 

.projimgsize
{

width:100%;
}

    
}

@media only screen
and (min-width : 1000px){ 
 .projimgsize
{

width:400px; height:300px;
    
}

    
}


body
{
    background:#000;
    color:#fff;
 overflow-x:hidden; 
} 

.bulletstitle{
    font-size:20px; color:#fff; 
}
 
h2{
     
     background:#000000b0;
font-family: 'Lato', sans-serif;
padding-left:12px;
    color:#000;
/*border-bottom:#18191b solid 5px;*/
font-size:24px;
width:30%;
padding:15px 15px 15px 15px;
 
 }

h5{
    color:grey;
}

h1{
color:#000;  
font-family: 'Lato', sans-serif;
padding:10px 10px 10px 10px;

}

h3{
padding:10px 10px 10px 10px;
color:#1c1a1a;
/*border-bottom:#18191b solid 1.5px;*/
font-size:17px;
/*font-weight:bold;*/
}

h4{
font-family: 'Lato', sans-serif;
font-size:22px;
}




p{
font-family: 'Lato', sans-serif;
font-size:16px;
color:#fff;
text-align:justify;
}



section
{
-webkit-box-shadow: 0px 5px 8px 0px #04a6de4f; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:   0px 5px 8px 0px #04a6de4f;  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 5px 8px 0px #04a6de4f;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
padding:10px 10px 10px 10px;
}


.hmarquee{
position: relative;
width: 100%; /*marquee width */
height: 300px; /*marquee height */
overflow: hidden;
background-color: white;
-webkit-box-shadow: 0px 5px 8px 0px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:   0px 5px 8px 0px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 5px 8px 0px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

padding: 2px;
padding-left: 4px;
}


.vmarquee{
position: relative;
width: 100%; /*marquee width */
height: 150px; /*marquee height */
overflow: hidden;

-webkit-box-shadow: 0px 5px 8px 0px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:   0px 5px 8px 0px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         0px 5px 8px 0px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
border-radius:50px;
padding: 2px;
padding-left: 4px;
}


.symbol{
border:15px solid #000; padding:35px 10px 35px 10px;    
}

.services{
    font-size:13px; 
    background-image:linear-gradient(to right,#236e45,#20a9de,#20a9de,#20a9de30); 
    color:#fff;
    margin-top:-3px;
}

	::selection { background-color: #00bcd4; color: white; }
	::-moz-selection { background-color: #00bcd4; color: white; }
	
.socm{
    margin-top:50px;
background:#000;
color:#fff;
width: 40px;
    height: 40px;
    border:2px solid #fff;
 border-radius: 50%;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
    padding: 10px;
cursor:pointer;
 
}

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

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

}

.circle{

    background-image:linear-gradient(#000,#000000a8,#000000a8,#000000a8);
    border:2px solid #fff;
     
    border-radius:50%;
    width:120px;
    height:120px;
    color:#fff;
    padding-top:50px;
    
 
}

.producttitle{
background:#000;
color:#fff;
padding:20px 20px 20px 20px;
width:100%;
    vertical-align: middle;
}


/* image hover icon for prodycts*/
.imgcontainer {
  position: relative;
  padding:10px 10px 10px 10px;
  }

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

}

.overlay {
    
 
  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 {
     background:#000;
    padding:20px 20px 20px 20px;
  color: white;
   position: absolute;
  top: 50%;
  left: 50%;
  border-radius:50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.icon:hover, .fa-search-plus:hover {
  
    background:#fff;
   color: #000;
}



#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%;
}
@media only screen
and (max-width : 1000px){ 
.comp{
display: none;
}
}
@media only screen
and (min-width : 1000px){ 
.mobile{ display: none;
}
}