/* Template CSS */
.view,body,html {
  height:100%;
}

.carousel {
  height:50%
}

.carousel .carousel-inner,
.carousel .carousel-inner .active,
.carousel .carousel-inner .carousel-item {
  height:100%
  }

@media (max-width:776px) {
  .carousel {
    height:100%
  }
}

@media only screen and (max-width:768px){
  .navbar {
    background-color:#DC3A45
  }
}

@media (max-width: 1920px) and (min-width: 540px) {
	.hide-on-desktop {
     display: none!important;
   }
}



.navbar {
  background-color:rgba(0,0,0,.2)
  }

  .bullet-points li {
    font-weight: 500;
    margin-bottom: 5%;
    color: #555;
    font-size:20px;
  }

.page-footer,.top-nav-collapse {
  background-color:#DC3A45
}
/* /template CSS ends */

/* Custom CSS Starts */
.feature-title {
  font-weight: 500;
}

.br-on-mobile {
    display: none;
}

.slogan {
  background-color: #DC3A45;
  color:#fff;
  text-align: center;
  padding:10px 0px 3px 0px;
}

.paragraph {
  font-weight: 500;
  color:#555;
  font-size: 18px;
}

.columns {
  -webkit-column-count: 3; /* Old Chrome, Safari and Opera */
  -moz-column-count: 3; /* Old Firefox */
  column-count: 3;
  column-gap: 50px;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

@media only screen and (max-width: 540px) {
.columns {
  -webkit-column-count: 1 !important; /* Old Chrome, Safari and Opera */
  -moz-column-count: 1 !important; /* Old Firefox */
  column-count: 1 !important;
  column-gap: 0px !important;
}
 .br-on-desktop {
     display: none !important;
 }
 .br-on-mobile {
    display: inherit !important;
}
.slogan h3 {
     font-size: 20px !important;
   }
}

.address {
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-size:25px;
}

.button {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 0;
font-weight: bold;
letter-spacing: 0.0625em;
text-transform: uppercase;
background: #000;
color: #fff !important;
margin-top:1%;
}
/* Add a rollover background colour but keep the text black */
.button:hover,
.button:focus,
.button:active {
background: #111;
color: #fff;
}

.grey-text {
  color:#555 !important;
}

/* Mobile Gallery Settings Start */
@media only screen and (max-width: 550px) {
      .gallery img {
        width: 150px !important;
        height: 150px !important;
         /*Crop images using css*/
         object-fit: cover;
         object-position: 100% 0;
         /*/Crop images using css*/
         display: block !important;
      }

      .bullet-points ul li {
        font-size:20px !important;
      }
  .center-on-mobile {
    text-align:center !important;
  }
}
/* /Mobile Gallery Settings End*/


/* Tablet & Desktop Gallery */

.gallery {
  padding:5px 5px 5px 5px;
}

.gallery img {
 transition: 0.5s;
 padding: 2px;
  width:250px;
  height:250px;
 padding: 0px;
  /*Crop images using css*/
 object-fit: cover;
 object-position: 100% 0;
 /*/Crop images using css*/
}

@media (max-width: 768px) and (min-width: 550px) {
  .gallery img {
    width: 155px !important;
    height: 155px !important;
    /*Crop images using css*/
   object-fit: cover;
   object-position: 100% 0;
   /*/Crop images using css*/
  }
}

@media (max-width: 990px) and (min-width: 768px) {
  .gallery img {
    width: 215px !important;
    height: 215px !important;
    /*Crop images using css*/
   object-fit: cover;
   object-position: 100% 0;
   /*/Crop images using css*/
  }
}

@media (max-width: 1375px) and (min-width: 768px) {
  .gallery img {
    width:250px;
    height:250px;
   padding: 1px;
    /*Crop images using css*/
   object-fit: cover;
   object-position: 100% 0;
   /*/Crop images using css*/
  }
}

  /*Gallery hover effect*/

  .gallery:hover img {
    opacity: 0.8;
  }

  .portfolio-image {
  	position: relative;
  	display: inline-block;
  }

  .portfolio-image img {
  	vertical-align: top;
  }

  .magnifying-glass-icon {
  	color: #fff;
  	text-align: center;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	-o-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	border-radius: 50%;
  	padding: 20px;
  	border: 1px solid #fff;
  	line-height: 1;
  	opacity: 0;
  }

  .magnifying-glass-icon:hover {
  	background: rgba(0,0,0,0.5);
  	color: #fff;
  }

  .portfolio-image:hover .magnifying-glass-icon {
  	opacity: 5;
  }
/*Gallery hover effect*/
/* Tablet & Desktop Gallery */
/* custom CSS ends */