.gallery img {
  width: 10%;
}
.gallery #wire1 {
  width: 30%;
}

.gallery_online_survey img{
  width: 12%;
}


/* The grid: Four equal columns that floats next to each other */
.column-gallery {
  float: left;
  width: 25%;
  padding: 7px;
}

/* Style the images inside the grid */
.column-gallery img {
  cursor: pointer;
  width: 100%;
}

.column-gallery img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row-gallery:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container-gallery {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

#carousel-example{
  width: 50%;
  margin: 0 auto;
}

.carousel-indicators li {
  background-color: #000000;
  cursor: pointer;
}

.carousel-item img {
  width: 100%;
}

.ca_img img{
  border: 1px solid #ababab
}

@media screen and (max-width: 992px){
  .gallery #wire1 {
    width: 80%;
  }
  .gallery img {
    width: 20%;
  }
  .column-gallery img {
    width: 100%;
  }
}

/**
<!--Carousel Wrapper-->
                    <div id="carousel-example" class="carousel slide carousel-fade z-depth-1-half"
                      data-ride="carousel">
                      <!--Indicators-->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-2" data-slide-to="1"></li>
                        <li data-target="#carousel-example-2" data-slide-to="2"></li>
                      </ol>
                      <!--/.Indicators-->
                      <!--Slides-->
                      <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                          <div class="view">
                            <img src="images/Wireframe1.png" id="aff1" title="Wireframes" />
                            <div class="mask rgba-black-light"></div>
                          </div>
                          <!--div class="carousel-caption">
                            <h3 class="h3-responsive">This is the first title</h3>
                            <p>First text</p>
                          </!--div -->
                        </div>
                        <div class="carousel-item">
                          <!--Mask color-->
                          <div class="view">
                            <img src="images/Wireframe2.png" id="aff2" />
                            <div class="mask rgba-black-light"></div>
                          </div>
                          <!--div class="carousel-caption">
                            <h3 class="h3-responsive">This is the second title</h3>
                            <p>Secondary text</p>
                          </!--div -->
                        </div>
                        <div class="carousel-item">
                          <!--Mask color-->
                          <div class="view">
                            <img src="images/Wireframe3.png" id="aff1" />
                            <div class="mask rgba-black-light"></div>
                          </div>
                          <!--div class="carousel-caption">
                            <h3 class="h3-responsive">This is the third title</h3>
                            <p>Third text</p>
                          </!--div -->
                        </div>
                      </div>
                      <!--/.Slides-->
                      <!--Controls-->
                      <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                      <!--/.Controls-->
                    </div>
                    <!--/.Carousel Wrapper-->
**/