/*Gallery*/
#gallery img{
	max-height: 200px;
	width: 100%;

}

/*shop*/
.container{
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}

.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;   
}

.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
}

.col-3 img{
    width: 100%;
}

.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.small-container h2{
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2rem;
}

.col-4{
    flex-basis: 50%;
    padding: 10px;
    max-width: 220px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}

.col-4 img{
    width: 100%;
    height: 200px;
}

.title{
    color: rgb(41, 36, 36);
    position: relative;
    line-height: 60px;
}

.box-container {
    height: 340px;
    box-shadow: 0 8px 6px -6px rgba(104, 99, 99, 0.712);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}


.title::after{
    content: '';
    background: #e41515;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

h4{
    color: #555;
    font-weight: normal;
}

.col-4 p{
    font-size: 14px;
}

.rating .fa{
    color: #ffbf00
}

.col-4:hover{
    transform: translateY(-5px);
}

.col-4 img:hover{
    background: url(./techbg.jpg);
}
 
.box-container .image-overlay {
    background: rgba(0,0,0,0.7);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.box-container:hover .image-overlay{
    opacity: 1;
}

  .content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
   
  .box-container:hover .content-details{
    top: 50%;
    left: 50%;
    opacity: 1;
  }
   
  .content-details h3{
    color: #fff;
    font-weight: 300;
    margin-bottom: 0.5em;
  }
   
  .content-details p{
    color: #fff;
    font-size: 0.8em;
  }
   
  .fadeIn-bottom{
    top: 80%;
  }
   
  .fadeIn-top{
    top: 20%;
  }
   
  .fadeIn-left{
    left: 20%;
  }
   
  .fadeIn-right{
    left: 80%;
  }



  @media (max-width: 991px){
	#info .infoS{
		margin-top:0px;
	}
	#gallery img{
		height: 120px;
	}
}
@media(max-width:767px){

	#get-started .gC{
		margin-top: 0 !important;
	}
	#info p{
		font-size: 15px;
		margin-top: 0;
	}
	#info h3{
		font-size: 20px;
		margin-bottom: 5px;
	}
	#about-services .card {
		margin: 5px 0;
	}
	#services-faq h5{
		font-size: 13px;
	}
	#services-faq p{
		font-size: 10px;
	}
	#services-table .text-center.display-4 {
		font-size: 30px;
	}
}

@media(max-width: 575px){
	#showcase .col-lg-4.col-md-4{
		width: 60%;
		margin: 0 auto;
	}
	#showcase h3{
		margin: 0;
	}
	#info .infoS{
		width: 70%;
		margin: 0 auto;
		margin-bottom:25px;
	}
	#gallery img{
		width: 80%;
		height: 200px;
	}

	#gallery .col-lg-4.col-md-4.col-sm-4{
		width: 80%;
		height: 200px;
		margin: 5px auto;
		margin-left: 50px;
	}

	#services-faq{
		height: 600px;
	}
}
@media(max-width: 420px){
	.navbar .navbar-brand {
		width: 75%;
	}
	#myCarousel .display-4    {
		font-size: 45px !important;
	}
	#showcase .lead{
		font-size: 16px ;
	}
	#get-started  .lead{
		font-size: 16px ;
		margin-top: 0;
	}
	#get-started  h3{
		margin-bottom: 0;
	}
	#gallery .col-lg-4.col-md-4.col-sm-4{
		width: 100%;
		height: 200px;
		margin: 5px auto;
		margin-left: 50px;
	}	
}