.bg1{
    background-color:cyan;
}
.bg2{
    background-color:pink;
}
.bg3{
    background-color:salmon;
}
a{
    outline:none;
}
.bottom-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.6);
}


/* preloader starts */
.preloader {
  height: 100vh;
  width: 100vw;
  font-family: Helvetica;
}

.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
  transform: translateX(0);
  }
  45% {
  transform: translateX(230px);
  }
  65% {
  transform: translateX(230px);
  }
  95% {
  transform: translateX(0);
  }
  }
  @keyframes loading-text {
  0% {
  content: "Loading";
  }
  25% {
  content: "Loading.";
  }
  50% {
  content: "Loading..";
  }
  75% {
  content: "Loading...";
  }
}
/* preloader ends */

/* overlay start */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1001;/*because sidebar-wrapper is 1000*/
  top: 0;
  left: 0;
 /*  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9); */
  background-color: #ffffff;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  /* color: #f1f1f1; */
  color:#000;
}

.overlay .closebtn {
  position: absolute;
  top: 45px;
  right: 20px;
  font-size: 60px;
}

.overlay p{
  text-align:justify;
}
.overlay p, h3, h4{
  /* color:#ffffff; */
}
/* @media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
} */
/* overlay end */

/* image zoom start */
.project_box {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  /* -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s; */
}
.grow { 
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.grow:hover { 
transform: scale(1.2); 
}
/* image zoom end */

.card{
  /* to override the round */
  border-radius:0 !important;
}
/* red tape on hover start */
.card .boxtitle
{
	position:absolute;
	bottom:0px;
	-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  color:#FFF;
  padding:5px 5px 5px 10px;
  background-color:#dc3545;
  font-size:12px;
  width:100%;
}

.card:hover .boxtitle
{
	bottom:0px;/*10%;*/
	-webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
/* red tape on hover end */

/* scroll to top start */

.scrolltop {
	display:none;
	width:100%;
	margin:0 auto;
	position:fixed;
	bottom:20px;
	right:10px;
}
.scroll {
	position:absolute;
	right:20px;
	bottom:20px;
	/* padding:20px; */
	text-align: center;
	margin: 0 0 0 0;
	cursor:pointer;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
}
.scroll:hover {
	/* background:rgb(255, 255, 255); */
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s; 		
}

/* scroll to top end */


/* lllllllllllllllllllllllllllllllllllllllll */


 body {
    /* direction: ltr;
    text-align:left; */
    overflow-x: hidden;
}



.form-inline .form-check-label {
    padding-right: 0;
}


.nav {
    padding-left: 0;
}



    .nav-tabs .nav-item + .nav-item {
        margin-left: 0.2rem;
    }



    .nav-pills .nav-item + .nav-item {
        margin-left: 0.2rem;
    }

.nav-stacked .nav-item + .nav-item {
    margin-left: 0;
}







.navbar-nav .nav-link + .nav-link {
    margin-left: 1rem;
}

.navbar-nav .nav-item + .nav-item {
    margin-left: 1rem;
}

@media (max-width: 543px) {
    .navbar-toggleable .navbar-nav .nav-item {
        margin-left: 0;
    }
    .navbar-nav .nav-item + .nav-item {
      margin-left: 0.3rem;/* for small screens */
    }
    .nav-link{/* for small screens */
      font-size:12px;
    }
}

@media (max-width: 767px) {
    .navbar-toggleable-sm .navbar-nav .nav-item {
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .navbar-toggleable-md .navbar-nav .nav-item {
        margin-left: 0;
    }
}


#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000; /*rgb(170, 170, 170);*/
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 0px;/* 15px */
  /* word-wrap: break-word; *//* was going out */
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-left: 0px;
}

.brands{
    padding-top: 20px;
}
/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 30px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color:#fff;/*000 #999999;*/
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: rgb(255, 0, 0);
  background: rgba(255, 255, 255, 0.2);
}

/* selected side bar value */
.sidebar-nav a.selected-sidebar{
  color: rgb(255, 0, 0);
  background: rgba(255, 255, 255, 0.2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}



@media(min-width:576px){
    .card-columns {
        column-count: 2;
    }
}
@media(min-width:768px) {
  #wrapper {
    padding-left: 0;
  }
  #wrapper.toggled {
    padding-left: 250px;
  }
  #sidebar-wrapper {
    width: 0;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 250px;
  }
  #page-content-wrapper {
    padding: 0px;/*20px; small gap in desktop view*/
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-left: 0;
  }

  .card-columns {
    column-count: 3;
  }
}

@media(min-width:992px){
    .card-columns {
        column-count: 4;
    }
}



@media(min-width:1200px){
    .card-columns {
        column-count: 5;
    }
}