/* Navbar begins */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    height: 75px;
}
.img-li {
    height: 100%;
}
li {
    line-height: 52.5px;
}
li a {
    height: 75px;
    float: right;
    display: block;
    color: rgb(79, 79, 79);
    text-decoration: none;
}
li a:hover {
    background-color: rgb(255, 255, 255);
}
#logo {
    float: left;
    max-height: 100%;
    padding-left: 30px;
}
/* Navbar ends */
/* Carousel begins */
.carousel {
    align-self: center;
    overflow: hidden;
    max-height: 400px;
}
.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.carousel-image {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
  text-align: center;
}
.carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0, 157, 255, 0.5);
  background-image: url("../img/logo5.png");
  background-size: cover;
  ;
}
.carousel-image .img {
  text-align: center;
  width:100%;
  height: auto;
  display:inline-block
}

.carousel-logo {
  height: 100%;
  width: 70%;
}
.arrow{
  z-index: 4;
}
/* Carousel ends */
/* Contact info begins */
.lorem-ipsum {
  background-color: rgb(255, 255, 255);
  width: 100%;
  margin:auto;
  padding:30px;
  color: rgb(0, 0, 0);
  padding-bottom: 7%;
}
/* Contact info ends */
/* Product info begins */
.product-info{
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
}
/* Product info ends*/
/* Basic container begins */
.first{
  margin-top: 55px;
  height: 100vh;
  background-color: rgba(234, 249, 255, 0.872);
  font-family: 'Titillium Web', sans-serif;
}
/*.container-second{
  z-index: -1;
  background-color: rgba(98, 208, 255, 0.765);
}*/
.middle {
  background-color: rgb(133, 130, 130);
}
.side {
  background-color: antiquewhite;
}
.container-fluid{
  text-align: center;
}
.main-info{
  text-align: left;
  padding-left: 100px;
  padding-right: 100px;
  
}
.valiinfo{
  text-align: left;
  width: 100%;
  padding-top: 100px;
  padding-right: 100px;
  padding-left: 100px;
  padding-bottom: 100px;
  background-color: rgb(239, 239, 239);
}
.footer {
  text-align: left;
  padding-top: 50px;
  padding-bottom: 50px;
  height: 100%;
  background-color: rgb(239, 239, 239);
}
@media only screen and (max-width: 800px) {
  .lorem-ipsum {
    padding-bottom: 10%;
  
}}
@media only screen and (max-width: 800px) {
  .lorem-ipsum {
    padding-bottom: 10%;
  }
  .main-info {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/*container ends */
/* cards begin*/ 
.card{
    margin: 15px;
    height: 230px;
    
}
@media only screen and (max-width: 768px) {
    .card {

      margin:0px;
      margin-bottom: 5px;

    
  }}
  @media only screen and (max-width: 768px) {
    .carousel-item:after {
      background-image: url("../img/logo3.png");
    }
  }
  @media only screen and (max-width: 992px) {
    .carousel-item:after {
      background-image: url("../img/logo4.png");
    }
  }
  /*content list*/
  .content-list{
    height: 100%;
  }
  .content-list > .content-item{
    display: inline-block;
    margin: 50px;
  }
  .galleria{
    background-color: white;
    margin-left: 15px;  
    margin-right: 15px; 
  }
/*
<div class="container-fluid product-info">
                  <div class="row product-info">
                    <div class="col-sm-3" id="product1">
                      <figure class="figure">
                          <img src="test3.jpg" class="img-thumbnail" alt="1st Product">
                          <figcaption class="figure-caption">Loremipsum</figcaption>
                      </figure>
                    </div>
                    <div class="col-sm-3" id="product2">
                      <figure class="figure">
                          <img src="test3.jpg" class="img-thumbnail" alt="2nd Product">
                          <figcaption class="figure-caption">Loremipsum</figcaption>
                      </figure>
                    </div>
                    <div class="col-sm-3" id="product3">
                      <figure class="figure">
                          <img src="test3.jpg" class="img-thumbnail" alt="3rd Product">
                          <figcaption class="figure-caption">Loremipsum</figcaption>
                      </figure>
                    </div>
                    <div class="col-sm-3" id="product4">
                      <figure class="figure">
                          <img src="test3.jpg" class="img-thumbnail" alt="4th Product">
                          <figcaption class="figure-caption">Loremipsum</figcaption>
                      </figure>
                    </div>
                  </div>
                </div>
*/