html, body{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	width: 100%;
  	height: 100%;
}
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Buttons */
.btn-kli:hover, .btn-kli:focus, .btn-kli:active, .btn-kli.active, .open>.dropdown-toggle.btn-kli {
    opacity:.8;
    border-color: #cc5500; /*set the color you want here*/
	color: white;
}
.btn-kli-alt{
	color: #CC5500;
	background-color: #fff;
	border-radius: 0;
	width: 200px;
	border-color: #cc5500; /*set the color you want here*/
	padding: 12px;
}

.btn-kli-alt:hover, .btn-kli-alt:focus, .btn-kli-alt:active, .btn-kli-alt.active, .open>.dropdown-toggle.btn-kli-alt {
    
	color: #cc5500;
	border: solid medium #CC5500;
	margin-top:-2px;
}
/* #header-index starts */
#header-index{
	padding: 70px 40px;  
}
#header-index h1 {
	font-size: 2em;
	padding-bottom: 1em;
	border-bottom: thin #cc5500 solid;
}
#header-index h2{
	font-size: 2.1em;
	color: #393b3f;
	font-weight: 700;
	padding-top: 1em;
	margin-bottom: 1.5em;

}
#header-index .btn-kli{
	margin-bottom: 8px;
}
.contact-header{
	background: #CC5500;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ED8F03, #CC5500);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ED8F03, #CC5500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: white;

}
/* Small devices only exceptions */
@media screen and (max-width: 767px) { 
	#header-index .small {
		display: none;
	}
}
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 768px) { 
	 #header-index{
		padding: 150px 40px;

	}
	#header-index h1 {
		font-size: 2.5em;
		padding-bottom: 2em;
		border-bottom: thin #cc5500 solid;
	}
	#header-index h2{
		font-size: 3em;
		color: #393b3f;
		font-weight: 700;
		padding-top: 1em;
		margin-bottom: 1.5em;

	}
	#header-index .small {
		font-weight: 300;
		border-left: thin #ddd solid;

	}
	
}
.btn-kli{
	color: white;
	background-color: #cc5500;
	border: none;
	border-radius: 0;
	width: 200px;
	border-color: #cc5500; /*set the color you want here*/
	padding: 15px;
}


#whatis{
	margin-top: 100px;
}
#whatis hr{
	width: 200px;
	background-color: #CC5500;
	height: 2px;
}
#whatis h1{
	
}
#whatis h2{
	font-size: 1.5em;
	margin-bottom: 1.5em;
}
#whatis-l p{
	font-size: 1.2em;
	line-height: 1.5em;
	color: #222;
}

.kli-outline{
	border-top: solid medium #CC5500;
	border-left: solid medium #CC5500;
	border-right: solid medium #CC5500;
	border-radius: 10px 10px 0 0;
}
#services {
	border: solid medium #CC5500;
	border-radius: 10px;
	padding: 50px;
	margin-bottom: 70px;
}
#services h3{
	color: #393b3f;
}
#services p{
	margin-bottom: 50px;
}
#services .fas,#services .far{
	color: #CC5500;
	margin-right: 20px;
}
#about-index{
	min-height: 250px;
	background-color: #CC5500;
}
#about-index h2{
	color: white;
}
.ai-box{
	min-height: 250px;
	border: solid 1px #CC5500;
}
.ai-box-top{
	height: 60%;
	display: flex;
	  justify-content: center;
	  align-items: center;
}
.ai-box h3{
	font-size: 1.3em;
}

/* Colors */
.kli-orange{
	color: #cc5500;
}

/* Side Menu */
#sidebar-wrapper {
  position: fixed;
  z-index: 2;
  right: 0;
  width: 250px;
  height: 100%;
  transition: all 0.4s ease 0s;
  transform: translateX(250px);
	background: #f7f7f7;
  /*background: #1D809F;*/
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

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

.sidebar-nav li.sidebar-nav-item a {
  display: block;
  text-decoration: none;
  color: #111;
  padding: 15px;
}

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

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

.sidebar-nav > .sidebar-brand {
  font-size: 1.2rem;
  background: #fff;
  height: 80px;
  line-height: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

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

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

#sidebar-wrapper.active {
  right: 250px;
  width: 250px;
  transition: all 0.4s ease 0s;
}

.menu-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff;
  background: rgba(52, 58, 64, 0.5);
  line-height: 50px;
  z-index: 999;
}

.menu-toggle:focus, .menu-toggle:hover {
  color: #fff;
}

.menu-toggle:hover {
  background: #343a40;
}
footer{
	
	
}
footer a{
	color: white;
}
footer a:hover{
	color: #CC5500
}