/** 
	* Filename:     kustom.css
	* Version:      1.0.0 (2023-03-09)
	* Website:      http://www.kristofah.net
	* Description:  Custom Global Styles
	* Author:		Okello Igune
					kristofah@kristofah.net
**/

.path-node img {
  float: left;
  margin-right: 15px;
}
/*
ol, ul {
  display: flow-root list-item;
}
*/
.container {
  width: 100%;
  max-width: 1230px;
}
.white-bg {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
}
.blue-bg {
  background: #19beea;
}
.grey-bg {
  background: #cfcfcf;
}
.path-node .field--label-above,
.path-node .field--label-inline {
  margin: 15px 0;
}
.path-node .field--label-above .field__label,
.path-node .field--label-inline .field__label {
  color: #020202;
  font-weight: 600;
  font-size: 1.25em;
}
.path-node .field--label-above .field__label:after,
.path-node .field--label-inline .field__label:after {
  content: ": ";
}
.path-node .field--label-inline .field__item,
.path-node .field--label-inline .field__label {
  display: inline;
}
.parallax-widget.one .parallax-region {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  /* -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeeeee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeeeee, 0 20px 1px -9px rgba(0, 0, 0, 0.15); */
  /* -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeeeee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeeeee, 0 20px 1px -9px rgba(0, 0, 0, 0.15); */
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeeeee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeeeee, 0 20px 1px -9px rgba(0, 0, 0, 0.15); */
}

/*----------------------------
	Header
-----------------------------*/
.main-header {
  box-shadow: 0px 6px 12px rgba(102, 203, 255, .38);
}

.main-header .container {
  /* width: 100%; */
  /* max-width: 2000px; */
}

.user-logged-in .main-header {
  margin-top: 40px;
}

.brand.logo img {
  max-height: 100px;
}

.region-header .brand.site-name {
  display: none;
}

/*----------------------------
	Main Menu
-----------------------------*/
.region-primary-menu ul {
  padding-top: 25px;
}
.menu-base-theme li a {
  /* font-family: "Orbitron", serif; */
  font-size: 1.2em;
  color: #5d2f91;
}

.menu-base-theme li:hover a/*,
.menu-base-theme li a.is-active*/ {
  color: #19beea;
}

.navbar-default .navbar-toggle {
  margin-top: 35px;
}

/*----------------------------
	Slider Banner
-----------------------------*/
.slider-banner {
  width: 100%;
  margin: 0 auto;
  max-width: 2000px;
  position: relative;
}

.slider-banner .block {
  margin-bottom: 0;
}

.banner-image img {
  width: 100%;
  margin-bottom: -6px;
}

.caption-wrapper {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px;
  position: absolute;
  background: rgba(0, 0, 0, .18);
}

.caption-container {
  bottom: 30%;
  color: #f4f4f4;
  max-width: 40%;
  min-width: 320px;
  position: absolute;
}

.caption-container .text,
.caption-container .title {
  
}

.caption-container .title {
  font-size: 2.2em;
  font-weight: bold;
  line-height: initial;
  margin-bottom: 10px;
  border-bottom: 3px solid;
  /* font-family: "Orbitron", serif; */
}

.caption-container .text {
  
}

/*----------------------------
	Focus Areas
-----------------------------*/
.region-focus-areas {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  /* background: #fff; */
}

.region-focus-areas .block {
  margin-bottom: 0;
}

.focus-areas {
  display: flex;
  max-width: 2000px;
  margin: 0 auto;
}

.focus-area {
  width: 100%;
  padding: 20px;
  display: block;
  color: #f4f4f4;
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
}

.focus-area:nth-child(odd) {
  background: #5d2f91;
}

.focus-area:nth-child(even) {
  background: #19beea;
}

.focus-area:hover {
  opacity: .8;
}

/*----------------------------
	About Us
-----------------------------*/
.about-us .about-notes {
  padding-left: 2em;
}

.about-us .profile-intro h4 {
  margin-top: 0;
}

.about-us .profile-intro ul li {
  margin-top: 12px;
}

/*----------------------------
	Our Capacity
-----------------------------*/
.capacity .tech-capacity {
  padding-right: 2em;
}

.capacity .tech-summary p {
  color: #efefef;
  /* text-align: justify; */
}

.capacity h3 {
  margin-top: 0;
}

.capacity .tech-profiles {
  margin: 0 -15px;
}

.capacity .tech-profile {
  width: 27.8%;
  min-width: 200px;
  text-align: center;
  vertical-align: top;
  margin: 0 20px 40px;
  display: inline-block;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
}

.capacity .tech-profile img {
  width: 100%;
}

/*----------------------------
	Hidden Sections
-----------------------------
.parallax-widget.one,
.parallax-widget.zero {
  display: none;
}*/

/*----------------------------
	Maintenance Page
-----------------------------*/
.maintenance-msg {
  background: #f4f4f4;
  background: rgba(244, 244, 244, 0.88);
}

.maintenance-msg .clearfix {
  font-size: initial;
}

/*----------------------------
	User Login Page
-----------------------------*/
.path-user .parallax-region {
  max-width: 620px;
}

/*----------------------------
	Portfolio
-----------------------------*/
.ui-tabs-vertical {
  width: 100%;
}
.ui-widget.ui-widget-content {
  border: 0;
  background: transparent;
}
.ui-tabs-vertical .ui-tabs-nav {
  width: 30%;
}
.ui-tabs-vertical .ui-tabs-panel {
  width: 70%;
  padding: 0.2em 0.5em 0.4em;
  background: #fcfcfc;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  width: 100%;
  text-wrap: initial;
}
.ui-tabs-vertical .ui-tabs-nav li {
 /* background: #fcfcfc; */
 /* background: #cfcfcf; */
 /* background: #eeefff; */
 background: #c1eaff;
}
.ui-tabs-vertical .ui-tabs-nav {
  border: 0;
  background: #f5f5f5;
}
#portfolio .ui-accordion-header {
 border-radius: 0;
 /* margin: 0 0 -1px; */
}
#portfolio .ui-state-active,
#portfolio .ui-button:active,
#portfolio a.ui-button:active,
#portfolio .ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover,
#portfolio .ui-widget-content .ui-state-active,
#portfolio .ui-widget-header .ui-state-active,
#portfolio .ui-button.ui-state-active:hover {
  /* border-color: #19beea; */
  border-color: #eeefff;
  background: #19beea;
  color: #fcfcfc;
}
#portfolio .ui-state-active {
  margin-bottom: 2px;
}
#portfolio .ui-corner-all {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#portfolio .our-portfolio .more-link a {
 color: #19beea;
 float: right;
}

#portfolio .our-portfolio .more-link a:hover {
 color: #66cbff;
}

/* .ui-corner-all { border-radius: 0; } */

#published .our-portfolio,
.path-published-works .our-portfolio {
  margin: 0 -15px;
}

.portfolio-published {
  min-width: 200px;
  background: #eeefff;
  vertical-align: top;
  margin: 0 20px 40px;
  display: inline-block;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
}

.portfolio-published.block-catalogue {
  width: 21%;
}

.portfolio-published.page-catalogue {
  width: 29.6%;
  /* background: #f5f5f5; */
}

.portfolio-published p,
.portfolio-published h3 {
  padding: 0 15px;
}

.portfolio-published a.views-more-link {
  display: block;
}

#published .our-portfolio-intro {
  color: #3a3a3a;
  padding-bottom: 20px;
}

#published .our-portfolio-intro .more-link {
  display: none;
}

.portfolio-published p a,
#published .our-portfolio .more-link a {
  color: #5d2f91;
}

.portfolio-published p a:hover,
#published .our-portfolio .more-link a:hover {
  color: #19beea;
}

#published .our-portfolio .more-link {
  text-align: right;
  margin-right: 20px;
}

/*----------------------------
	Services
-----------------------------*/
#services {
  /* margin-top: 30px; */
}

#services .container {
  /* margin-top: 30px; */
  /* margin-bottom: 30px; */
}

.services {
  /* display: flex; */
  /* padding-top: 30px; */
}

.service {
  width: 100%;
  float: left;
  /* max-width: 33.3%; */
  margin: 0;
  display: block;
  padding: 35px 0;
  position: relative;
  /* background: #f4f4f4; */
  /* border-bottom: 2px solid #cfcfcf; */
}

.service:hover {
  /* background: rgba(255, 255, 255, 0.98); */
}

.service h3 {
  margin-top: 80px;
  font-weight: bold;
}

.service .serv-img {
  width: 48%;
  position: relative;
}

.service img {
  /* width: 420px; */
  /* width: 48%; */
  border-radius: 4px;
}

.service:nth-child(2n+1) .serv-img {
  float: right;
  margin-left: 15px;
}

.service:nth-child(2n+1) .serv-img::after {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  content: "";
  /* content: none; */
  position: absolute;
  border-radius: 4px;
  background: #5d2f91;
  margin: 15px -15px -10px 15px;
}

.service:nth-child(2n) .serv-img {
  float: left;
  margin-right: 30px;
}

.service:nth-child(2n) .serv-img::after {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  content: "";
  /* content: none; */
  position: absolute;
  border-radius: 4px;
  background: #19beea;
  margin: 15px 15px -10px -15px;
}

.service:nth-child(2n) ul {
  /* padding-left: 440px; */
  padding-left: 52.8%;
}

/*----------------------------
	Blogs
-----------------------------*/

#news-blog .more-link {
  text-align: right;
  padding-right: 5%;
}

.the-blogs {
  margin: 0 -1.5%;
}

.blog-article {
  /* width: 29.4%; */
  width: 28.4%;
  min-width: 200px;
  text-align: center;
  vertical-align: top;
  margin: 20px 2%;
  display: inline-block;
  background: #eeefff;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eeefff, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eeefff, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
}

.blog-article img {
  width: 100%;
}

.blog-article p,
.blog-article h3 {
  padding-left: 15px;
  padding-right: 15px;
}

.blog-article p {
  /* color: #efefef; */
  text-align: justify;
}

.blog-article .views-more-link {
  display: block;
}

/*----------------------------
	Clients
-----------------------------*/

#clients .container {
  /* margin-top: 30px; */
  /* margin-bottom: 30px; */
}

.our-clients {
 text-align: center;
 margin: 0 -35px;
 
}

.our-clients header {
 margin: 0 35px;
 text-align: justify;
 
}

.client img {
  width: auto;
  max-height: 50px;
}

.client {
  margin: 20px 30px;
  display: inline-block;
}

.client:hover img {
  opacity: .9;
}

/*----------------------------
	Contact Us
-----------------------------*/
#contacts {
  
}

.address-info h2.title {
  padding-top: 50px;
}

.contact-and-address .contact-info {
  padding-top: 50px;
}

.contact-and-address .message-form {
  background: #fff;
  Padding: 10px 20px;
  border-radius: 4px;
  margin-top: -30px;
  box-shadow: -1px 2px 16px rgba(102, 203, 255, .8);
}

.contact-and-address .message-form textarea {
  height: 115px;
}

.contact-and-address .message-form textarea,
.contact-and-address .message-form input.form-text,
.contact-and-address .message-form input.form-email {
  width: 100%;
  border-radius: 4px;
}

#captcha summary,
.contact-and-address .message-form label {
  font-weight: bold;
}

#captcha input.form-text {
  width: initial;
}