/* @font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'UniSansBook';
    src: url('../fonts/unisans-book/UniSansBook.eot');
    src: url('../fonts/unisans-book/UniSansBook.eot') format('embedded-opentype'),
         url('../fonts/unisans-book/UniSansBook.woff2') format('woff2'),
         url('../fonts/unisans-book/UniSansBook.woff') format('woff'),
         url('../fonts/unisans-book/UniSansBook.ttf') format('truetype'),
         url('../fonts/unisans-book/UniSansBook.svg#UniSansBook') format('svg');
} */
@font-face {
  font-family: 'Foco';
  font-style: normal;
  font-weight: normal;
  src: local('Foco'), url('../fonts/foco/FOCO.woff') format('woff');
  }
  

  @font-face {
  font-family: 'Foco Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Foco Bold'), url('../fonts/foco/FOCOBOLD.woff') format('woff');
  }
/* @font-face {
  font-family: 'DroidArabicKufiRegular';
  src: url('../fonts/DroidKufi-Regular/droidkufi-regular.eot');
  src: url('../fonts/DroidKufi-Regular/droidkufi-regular.eot') format('embedded-opentype'),
  url('../fonts/DroidKufi-Regular/droidkufi-regular.woff') format('woff'),
  url('../fonts/DroidKufi-Regular/droidkufi-regular.ttf') format('truetype'),
  url('../fonts/DroidKufi-Regular/droidkufi-regular.svg#DroidArabicKufiRegular') format('svg');
} */

@font-face {
  font-family: 'Bahij TheSansArabic';
  src: url('../fonts/bahij/BahijTheSansArabic-Bold.woff2') format('woff2'),
      url('../fonts/bahij/BahijTheSansArabic-Bold.woff') format('woff'),
      url('../fonts/bahij/BahijTheSansArabic-Bold.svg') format('svg'),
      url('../fonts/bahij/ArbFONTS-Bahij_TheSansArabic-Bold.ttf') format('ttf');

  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bahij TheSansArabic';
  src: url('../fonts/bahij/BahijTheSansArabic-Plain.woff2') format('woff2'),
      url('../fonts/bahij/BahijTheSansArabic-Plain.woff') format('woff'),
      url('../fonts/bahij/BahijTheSansArabic-Plain.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
 font-family:'Foco' ;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: #313131;
  background: #fff;
  height: 100%;
  position: relative;
}

a {
  color: #6ebf4b;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #6ebf4b;
  outline: none;
}

p {margin: 0 0 15px; line-height: 1.3;}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-family: 'Foco';
  margin: 0 0 30px 0;
}

::-webkit-selection {
  color: #818892;
  background: #f9f6f0;
}

::-moz-selection {
  color: #818892;
  background: #f9f6f0;
}

::selection {
  color: #818892;
  background: #f9f6f0;
}

.edge--bottom {
  position: relative;
  z-index: 1;
}
.edge--bottom:after {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}
.edge--bottom:after {
  bottom: 0;
  transform: skewY(-1.5deg);
  transform-origin: 100%;
}

.edge--bottom--reverse {
  position: relative;
  z-index: 1;
}
.edge--bottom--reverse:after {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}
.edge--bottom--reverse:after {
  bottom: 0;
  transform: skewY(1.5deg);
  transform-origin: 0 100%;
}

.edge--top {
  position: relative;
  z-index: 1;
}
.edge--top:before {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}
.edge--top:before {
  top: 0;
  transform: skewY(1.5deg);
  transform-origin: 100% 0;
}

.edge--top--reverse {
  position: relative;
  z-index: 1;
}
.edge--top--reverse:before {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}
.edge--top--reverse:before {
  top: 0;
  transform: skewY(-1.5deg);
  transform-origin: 0 0;
}

.edge--both {
  position: relative;
  z-index: 1;
}
.edge--both:before, .edge--both:after {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}
.edge--both:before {
  top: 0;
  transform: skewY(1.5deg);
  transform-origin: 100% 0;
}
.edge--both:after {
  bottom: 0;
  transform: skewY(-1.5deg);
  transform-origin: 100%;
}

.edge--both--reverse {
  position: relative;
  z-index: 1;
}
.edge--both--reverse:before, .edge--both--reverse:after {
  background: inherit;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}
.edge--both--reverse:before {
  top: 0;
  transform: skewY(-1.5deg);
  transform-origin: 0 0;
}
.edge--both--reverse:after {
  bottom: 0;
  transform: skewY(1.5deg);
  transform-origin: 0 0;
}

.front-page #kisr-header{
  position: absolute;
}
#kisr-header {
  z-index: 999;
  width: 100%;
  opacity: 1;
  top: 0;
	min-height: 80px;
}
@media screen and (max-width: 768px) {
  #kisr-header {
    margin-top: 0;
    background: #fff;
    -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  }
  #kisr-header .navbar-brand {
    color: #52d3aa !important;
  }
  #kisr-header #navbar li a {
    color: rgba(0, 0, 0, 0.5) !important;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  #kisr-header #navbar li a:hover {
    color: #52d3aa !important;
  }
  #kisr-header #navbar li a span:before {
    background: transparent !important;
  }
  #kisr-header #navbar li.active a {
    background: transparent;
    background: none;
    color: #52d3aa !important;
  }
  #kisr-header #navbar li.active a span:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
#kisr-header .navbar {
  padding-bottom: 0;
  margin-bottom: 0;
}
#kisr-header #navbar li a {
  font-family: 'Foco';
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  font-size: 19px;
  font-weight: 300;
}
#kisr-header #navbar li a span {
  position: relative;
  display: block;
  padding-bottom: 2px;
}
#kisr-header #navbar li a span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
#kisr-header #navbar li a:hover {
  color: #fff;
}
#kisr-header #navbar li a:hover span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}
#kisr-header #navbar li.active a {
  background: transparent;
  background: none;
  color: #fff;
}
#kisr-header #navbar li.active a span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
#kisr-header .navbar-brand {
  float: left;
  display: block;
  font-size: 30px;
  font-weight: 700;
  padding-left: 0;
  color: #fff;
	padding: 0px;
       
      
}
#kisr-header.navbar-fixed-top {
  position: fixed !important;
  background:transparent;

  margin-top: 0px;
  top: 0;
  background-color: #fff;
  box-shadow: 1px 1px 25px rgba(0,0,0,0.10);
}
#kisr-header.navbar-fixed-top .navbar-brand {
  color: #52d3aa;
}
#kisr-header.navbar-fixed-top #navbar li a {
  color: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#kisr-header.navbar-fixed-top #navbar li a:hover {
  color: #52d3aa;
}
#kisr-header.navbar-fixed-top #navbar li.active a {
  background: transparent;
  background: none;
  color: #52d3aa;
}
#kisr-header.navbar-fixed-top #navbar li.active a span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  background-color: #52d3aa;
}
#kisr-header .navbar-default {
  border: transparent;
  background: transparent;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
}
@media screen and (max-width: 768px) {
  #kisr-header .navbar-default {
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
}
#kisr-header .navbar-default .brand-slogan {
  margin: 28px 0 0 15px;
  float: left;
  letter-spacing: 2px;
  color: #adadad;
}
#kisr-header .navbar-default .brand-slogan em {
  color: #52d3aa;
  font-style: normal;
}
#kisr-header a {
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}

#kisr-home {
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  background-color: #fff;
  color: #fff;
  overflow: hidden;
  padding-top: 100px;
}
#kisr-home .gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  opacity: .9;
  -webkit-backface-visibility: hidden;
  background-color: #52d3aa;
  /* IE9, iOS 3.2+ */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
  /* Android 2.3 */
  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  /* IE10+ */
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
}
#kisr-home, #kisr-home .text-wrap {

}
#kisr-home .text-wrap {
  display: table;
  width: 100%;
  position: relative;
  z-index: 4;
}
#kisr-home .text-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#kisr-home .text-inner a {
  color: white;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#kisr-home .text-inner a:hover, #kisr-home .text-inner a:active, #kisr-home .text-inner a:focus {
  text-decoration: none;
  color: white;
  border-bottom: 1px dashed white;
}
#kisr-home .text-inner h1 {
  font-size: 50px;
  color: white;
  margin: 0 0 20px 0;
}
#kisr-home .text-inner h2 {
  font-size: 28px;
  line-height: 38px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.slant {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  bottom: 0;
  margin-bottom: -35px;
  padding: 0;
  width: 101%;
}

#kisr-intro {
  position: relative;
  bottom: 0;
  margin-top: -150px;
  z-index: 10;
  padding-bottom: 7em;
}
@media screen and (max-width: 768px) {
  #kisr-intro {
    padding-bottom: 3em;
  }
}
#kisr-intro > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}
#kisr-intro .kisr-block {
  width: 33.33%;
  float: left;
  text-align: center;
  font-size: 16px;
  min-height: 300px;
  vertical-align: middle;
  padding: 40px;
  background: #fff;
  -webkit-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -moz-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -ms-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  -o-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
  z-index: 7;
  flex-grow: 1;
  background-size: cover;
  position: relative;
  backgroun-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  #kisr-intro .kisr-block {
    width: 100%;
  }
}
#kisr-intro .kisr-block > .overlay-darker {
  z-index: 8;
  opacity: .5;
  background: #474747;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#kisr-intro .kisr-block > .overlay {
  background: #fff;
  opacity: 1;
  z-index: 9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#kisr-intro .kisr-block > .kisr-text {
  position: relative;
  z-index: 10;
}
#kisr-intro .kisr-block > .kisr-text .kisr-intro-icon {
  font-size: 50px;
  color: #52d3aa;
  margin-bottom: 30px;
  display: block;
}
#kisr-intro .kisr-block h2 {
  font-size: 24px;
  font-weight: 400;
}
#kisr-intro .kisr-block:hover > .overlay, #kisr-intro .kisr-block:focus > .overlay {
  opacity: 0;
  z-index: 9;
}
#kisr-intro .kisr-block:hover > .kisr-text, #kisr-intro .kisr-block:focus > .kisr-text {
  color: #fff;
}
#kisr-intro .kisr-block:hover > .kisr-text .kisr-intro-icon, #kisr-intro .kisr-block:focus > .kisr-text .kisr-intro-icon {
  color: #fff;
}
#kisr-intro .kisr-block:hover h2, #kisr-intro .kisr-block:focus h2 {
  color: #fff;
}
#kisr-intro .kisr-block:hover .btn, #kisr-intro .kisr-block:focus .btn {
  border: 2px solid #fff !important;
  background: transparent;
}
#kisr-intro .kisr-block:hover .btn:hover, #kisr-intro .kisr-block:focus .btn:hover {
  background: #52d3aa !important;
  border: 2px solid #52d3aa !important;
}

.watch-video {
  text-align: center;
  width: 100%;
  display: block;
  float: left;
}
.watch-video span {
  display: block;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
}
.watch-video .btn-video {
  display: block;
  font-size: 60px;
  height: 120px;
  width: 120px;
  margin: 0 auto;
  border: 2px solid #52d3aa;
  line-height: 0px;
  display: table;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.watch-video .btn-video:hover, .watch-video .btn-video:focus, .watch-video .btn-video:active {
  text-decoration: none;
}
.watch-video .btn-video i {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  right: -9px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.watch-video .btn-video:hover i, .watch-video .btn-video:focus i {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

#kisr-services, #kisr-testimonials, #kisr-counters, #kisr-work, #kisr-contact, #kisr-about {
  padding: 3em 0;
}
@media screen and (max-width: 768px) {
  #kisr-services, #kisr-testimonials, #kisr-counters, #kisr-work, #kisr-contact, #kisr-about {
    padding: 2em 0;
  }
}

#kisr-services, #kisr-work, #kisr-counters {
  padding: 3em 0;
}
@media screen and (max-width: 768px) {
  #kisr-services, #kisr-work, #kisr-counters {
    padding: 2em 0;
  }
}

#kisr-services {
  background-color: #52d3aa;
  /* IE9, iOS 3.2+ */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMzZjk1ZWEiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzUyZDNhYSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
  /* Android 2.3 */
  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  /* IE10+ */
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  overflow: hidden;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
}
#kisr-services:before, #kisr-services:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 101%;
}
#kisr-services:before {
  top: 0;
  margin-top: -35px;
}
#kisr-services:after {
  bottom: 0;
  margin-bottom: -35px;
}
#kisr-services .kisr-service {
  padding-right: 30px;
}
#kisr-services h3 {
  font-size: 24px;
  color: #fff;
}
#kisr-services .icon {
  font-size: 70px;
  margin-bottom: 30px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
#kisr-services .icon:before {
  color: #fff;
}
#kisr-services .section-heading h2 {
  color: #fff;
}
#kisr-services .section-heading h2.left-border:after {
  background: rgba(255, 255, 255, 0.3);
}

#kisr-counters {
  background: #52d3aa;
  overflow: hidden;
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  padding: 9em 0 10em 0;
}
@media screen and (max-width: 768px) {
  #kisr-counters {
    padding: 4em 0;
  }
}
#kisr-counters .kisr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.7);
}
#kisr-counters:before, #kisr-counters:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 101%;
}
#kisr-counters:before {
  top: 0;
  margin-top: -35px;
}
#kisr-counters:after {
  bottom: 0;
  margin-bottom: -35px;
}
#kisr-counters .section-heading {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
}
#kisr-counters .section-heading h2 {
  color: #fff;
}
#kisr-counters .section-heading h2:after {
  background: rgba(255, 255, 255, 0.3) !important;
}
#kisr-counters .section-heading .subtext h3 {
  color: rgba(255, 255, 255, 0.7) !important;
}
#kisr-counters .kisr-counter {
  position: relative;
  z-index: 3;
  text-align: center;
}
@media screen and (max-width: 992px) {
  #kisr-counters .kisr-counter {
    margin-bottom: 50px;
    float: left;
    width: 100%;
  }
}
#kisr-counters .kisr-counter .kisr-counter-icon,
#kisr-counters .kisr-counter .kisr-counter-number,
#kisr-counters .kisr-counter .kisr-counter-label {
  display: block;
}
#kisr-counters .kisr-counter .kisr-counter-icon {
  font-size: 40px;
  color: #52d3aa;
}
#kisr-counters .kisr-counter .kisr-counter-number {
  font-size: 70px;
  color: #fff;
  font-weight: 300;
}
#kisr-counters .kisr-counter .kisr-counter-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  font-weight: 400;
}

#kisr-testimonials {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e0e0e0+51,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 51%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#e0e0e0 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#e0e0e0 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#kisr-testimonials .box-testimony {
  margin-bottom: 2em;
  float: left;
}
#kisr-testimonials .box-testimony a {
  color: rgba(255, 255, 255, 0.5);
}
#kisr-testimonials .box-testimony a:hover, #kisr-testimonials .box-testimony a:focus, #kisr-testimonials .box-testimony a:active {
  color: white;
  text-decoration: none;
}
#kisr-testimonials .box-testimony blockquote {
  padding-left: 0;
  border-left: none;
  padding: 30px;
  background: #fff;
  background: #52d3aa;
  font-size: 20px;
  font-weight: 300;
  position: relative;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
#kisr-testimonials .box-testimony blockquote:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 40px;
  border-top: 10px solid black;
  border-top-color: #fff;
  border-top-color: #52d3aa;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
#kisr-testimonials .box-testimony blockquote p {
  font-style: italic;
  color: #fff;
}
#kisr-testimonials .box-testimony .author {
  line-height: 20px;
  color: black;
  font-size: 16px;
  margin-left: 20px;
  font-weight: 400;
}
#kisr-testimonials .box-testimony .author a {
  color: #52d3aa;
}
#kisr-testimonials .box-testimony .author a:hover {
  text-decoration: underline;
}
#kisr-testimonials .box-testimony .author > figure {
  float: left;
  margin-right: 10px;
}
#kisr-testimonials .box-testimony .author > figure img {
  width: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
#kisr-testimonials .box-testimony .author p {
  float: left;
  margin-top: 10px;
}
#kisr-testimonials .box-testimony .author .subtext {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 400 !important;
}

#kisr-work {
  overflow: hidden;
  position: relative;
  color: rgba(0, 0, 0, 1);
  padding-top: 90px;

}
#kisr-work a {
  color: rgba(255, 255, 255, 0.5);
}
#kisr-work a:hover,
#kisr-work a:focus {
  color: white;
  text-decoration: underline;
}
#kisr-work:before, #kisr-work:after {
  position: absolute;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
  background-color: #fff;
  content: "";
  z-index: 3;
  display: inline-block;
  height: 70px;
  padding: 0;
  width: 101%;
}
#kisr-work:before {
  top: 0;
  margin-top: -35px;
}
#kisr-work:after {
  bottom: 0;
  margin-bottom: -35px;
}
#kisr-work .section-heading h2 {
  color: #121d54;
}
#kisr-work .section-heading h2:after {
  background: rgba(0, 0, 0, 1);
}
#kisr-work .section-heading h3 {
  color: rgba(255, 255, 255, 0.8);
}
#kisr-work .kisr-project-item {
  display: block;
  width: 100%;
  position: relative;
  top: 0;
  background: #fff;
  z-index: 9;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#kisr-work .kisr-project-item img {
  z-index: 8;
  opacity: 1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  width: 100%;
}
#kisr-work .kisr-project-item .kisr-text {
  padding: 10px 20px;
}
#kisr-work .kisr-project-item .kisr-text h2, #kisr-work .kisr-project-item .kisr-text span {
  text-decoration: none !important;
}
#kisr-work .kisr-project-item .kisr-text h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
#kisr-work .kisr-project-item .kisr-text span {
  color: #b3b3b3;
  font-size: 16px;
  font-weight: 400;
}
#kisr-work .kisr-project-item:hover, #kisr-work .kisr-project-item:focus {
  -webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  top: -10px;
}
#kisr-work .kisr-project-item:hover img, #kisr-work .kisr-project-item:focus img {
  opacity: 1.5;
}
#kisr-work .kisr-project-item:hover h2, #kisr-work .kisr-project-item:hover span, #kisr-work .kisr-project-item:focus h2, #kisr-work .kisr-project-item:focus span {
  text-decoration: none !important;
}

.kisr-person {
  padding: 10px ;
  width: 100%;
  position: relative;
  padding-bottom: 1px;
}
@media screen and (max-width: 992px) {
  .kisr-person {
    margin-bottom: 3.5em;
  }
}
.kisr-person figure {
  position: absolute;
  margin-top: -60px;
  top: 0;
  left: 50%;
  margin-left: -60px;
  display: block;
  margin-bottom: 50px;
}
.kisr-person figure img {
  width: 120px;
  border: 2px solid #f2f2f2;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.kisr-person h3 {
  margin-bottom: 0px;
  color: #333;
  font-size: 18px;
  text-align: left;
  font-weight: 700;
  padding:20px 0px;
}

.kisr-person h3 a{
  color: #333 !important;
}

p.news-desc{
color: #494949;
font-size: 14px;
line-height: 18px;
text-align: justify;

}
#kisr-about a{color: #283b90}
#kisr-about .viewmore{font-size: 20px; font-weight: 700;     
    font-weight: 700;
    background: #283a8f;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 10px 36px;
 
    letter-spacing: 1px;
    transition: all .4s ease;
    font-size: 16px;
    text-decoration: none;
     }

.form-control {
  box-shadow: none;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.1);
  height: 54px;
  font-size: 18px;
  font-weight: 400;
}
.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #52d3aa;
}
.form-control[readonly]
{
    background: transparent;
}
.btn {
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.btn:hover, .btn:active, .btn:focus {
  outline: none;
}

#kisr-contact {
  padding-bottom: 0;
}
#kisr-contact .kisr-contact-info {
  padding: 0;
  margin: 0 0 1.5em 0;
}
#kisr-contact .kisr-contact-info li {
  position: relative;
  padding: 0;
  margin: 0 0 1.5em 0;
  padding-left: 50px;
  list-style: none;
}
#kisr-contact .kisr-contact-info li i {
  position: absolute;
  top: .2em;
  left: 0;
}

.section-heading {
  float: left;
  width: 100%;
  padding-bottom: 50px;
  clear: both;
}
.section-heading h2 {
  margin: 0 0 30px 0;
  font-size: 22px;
  font-weight: 700;
  color: #2b3992;
  text-transform: uppercase;
  position: relative;
  display: block;
  padding-bottom: 20px;
  line-height: 1.5;
  word-wrap: break-word;
}
.section-heading h2.left-border:after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 2px;
  background: #52d3aa;
  left: 0%;
  margin-left: 0px;
  bottom: 0;
}
.section-heading h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 1px;
  background: #000;
  left: 50%;
  margin-left: -40px;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .section-heading h2 {
    font-size: 30px;
  }
}
.section-heading h3 {
  font-weight: 300;
  line-height: 1.5;
  color: #929292;
}
@media screen and (max-width: 768px) {
  .section-heading h3 {
    font-size: 24px !important;
    line-height: 34px;
  }
}

.btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.kisr-nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
.kisr-nav-toggle.active i::before, .kisr-nav-toggle.active i::after {
  background: #52d3aa;
}
.kisr-nav-toggle:hover, .kisr-nav-toggle:focus, .kisr-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}
.kisr-nav-toggle i {
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 25px;
  height: 3px;
  color: #52d3aa;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #52d3aa;
  transition: all .2s ease-out;
}
.kisr-nav-toggle i::before, .kisr-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 3px;
  background: #52d3aa;
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.kisr-nav-toggle i::before {
  top: -7px;
}

.kisr-nav-toggle i::after {
  bottom: -7px;
}

.kisr-nav-toggle:hover i::before {
  top: -10px;
}

.kisr-nav-toggle:hover i::after {
  bottom: -10px;
}

.kisr-nav-toggle.active i {
  background: transparent;
}

.kisr-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.kisr-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.kisr-nav-toggle {
  position: absolute;
  top: 2px;
  right: 0px;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  margin: 0 auto;
  display: none;
  height: 44px;
  width: 25px;
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .kisr-nav-toggle {
    display: block;
  }
}

#footer {
  padding-top: 10px;
  position: relative;
}
#footer .gotop {
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -40px;
  background: #fff;
  z-index: 8;
  width: 80px;
  height: 80px;
  font-size: 30px;
  padding-top: 5px;
  text-align: center;
  vertical-align: middle;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
#footer .gotop:hover, #footer .gotop:focus {
  top: -25px;
  text-decoration: none !important;
}
#footer .copyright {
  font-size: 16px;
  margin-bottom: 0px;
  padding-bottom: 0;
}

.btn {
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn.btn-primary {
  background: #52d3aa;
  color: #fff;
  border: none !important;
  border: 2px solid transparent !important;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus {
  box-shadow: none;
  background: #52d3aa;
}
.btn:hover, .btn:active, .btn:focus {
  background: #393e46 !important;
  color: #fff;
  outline: none !important;
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active {
  border-color: transparent;
}

.social {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  width: 100%;
}
.social li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}
.social li a {
  font-size: 16px;
  display: table;
  width: 22px;
  /*height: 40px;
  margin: 0 4px;*/
}
.social li a i {
  display: table-cell;
  vertical-align: middle;
}
.social li a:hover, .social li a:active, .social li a:focus {
  text-decoration: none;
  border-bottom: none;
}
.social li a.social-box {
  background: #52d3aa;
  color: #fff;
}
.social li a.social-circle {
  background: #52d3aa;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.social li a:hover {
}
.social.social-box a {
  background: #52d3aa;
  color: #fff;
}
.social.social-circle a {
  background: #52d3aa;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

#map {
  width: 100%;
  height: 500px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

.js .to-animate,
.js .to-animate-2,
.js .single-animate {
  opacity: 0;
}

@media screen and (max-width: 480px) {
  .col-xxs-12 {
    float: none;
    width: 100%;
  }
}

.row-bottom-padded-lg {
  padding-bottom: 7em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-lg {
    padding-bottom: 2em;
  }
}

.row-bottom-padded-md {
  padding-bottom: 4em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-md {
    padding-bottom: 2em;
  }
}

.row-bottom-padded-sm {
  padding-bottom: 2em;
}
@media screen and (max-width: 768px) {
  .row-bottom-padded-sm {
    padding-bottom: 2em;
  }
}

.kisr-animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.video-part
{
	width: 100%;
	float: left;
	position: relative;
	overflow: hidden;
	height: 645px

}
.video-part video
{
	margin-top: inherit;
	width: 98%;
  position: absolute;
  left: 100px;


}
.video-part-content
{

	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background:rgba(87, 117, 189, 0.5) ;
  height: 650px;
}

.video-part-content h1{
    color:#2b3992;
    font-weight: 500;
    font-size: 50px;
    text-align: left;
    text-transform: inherit;
    margin: 0 0 30px;
    padding: 0;
    line-height: 1.1;
}
.video-part-content h1:after{display: none;}

 .show-style1{
     color:#2b3992;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 1em;
 }

 .show-style2{
     color:#b5b5b5;
     font-size: 26px;
      font-weight: 300;
      line-height: 32px;
      margin-bottom: 1em;
  }

.whitebg{
    background-color: white;
    height: 650px;
    padding-top: 190px;
}

.readmore{
  font-size: 20px;
  color: #283a8f;

    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding-bottom: 5px;
}

.readmore i{
  opacity: 0.5;
  -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.readmore:hover, .readmore:active, .readmore:focus{
    text-decoration: none;
    color: #313131;
}
.readmore:hover i{
  opacity: 1;
}

.videobg{
  background-image:url('../images/video.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 650px;
}

.position-rel{
  position: relative;
  overflow: hidden;
}

.video-play{
  margin-top: 474px;
  margin-left: 395px;

}

.video-play a{
  color: lightgrey;
}

.video-play a i{
  color: #283a8f;
}

.btn-video{

    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding-bottom: 5px;
    color:#a2a2a2
}
.btn-video:hover{
    text-decoration: none;
    color:#a2a2a2
   }

.tab .nav-tabs{
    border-bottom: none;
    position: relative;
    text-align: center;
}
.tab .nav-tabs li{
    margin-right: 15px;
    display: inline-block;
    float: none;
}
.tab .nav-tabs li a{
    padding: 20px 15px;
    font-size: 20px;
    font-weight: 400;
    color: #6e6e6e;
    border-radius: 0;
    margin-right: 0;
    border: none;
    position: relative;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:hover{
    background: #fff;
}
.tab .nav-tabs li a:before{
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(0,0,0, 0.9);
    position: absolute;
    bottom: 5px;
    left: 0;
    transform: scale(0);
    transition: all 700ms ease 0s;
}
.tab .nav-tabs li a:after{
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #283a8f;
    margin: 0 auto;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    transform: scale(0);
    transition: all 700ms ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover{
    border: none;
    color: #283a8f;
    font-size: 24px;
}
.tab .nav-tabs li a:hover:before,
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:after,
.tab .nav-tabs li.active a:after{
    transform: scale(1);
}
.tab .tab-content{
    padding: 20px;
    background: #fff;
    font-size: 14px;
    color: #a09d9d;
    line-height: 26px;
    background-image: url('../images/logo_background.jpg');
    background-position: center left;
    background-repeat: no-repeat;
    min-height: 500px;
}
.tab .tab-content h3{
    font-size: 20px;
    margin-top: 0;
    text-transform: uppercase;
    color: #283a8f;
    font-weight: 700;
    letter-spacing: 2px;
}

.tab .tab-content p{
  color:#313131;
  font-size: 20px;
  line-height: 24px;
  text-align: justify;
}

.tab .tab-pane{
  -webkit-box-shadow: 0px 0px 40px -1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 0px 40px -1px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 40px -1px rgba(0, 0, 0, 0.05);
background-color: #fff;
padding: 10px 30px;
padding-top:30px;
}

.tab .leftmargin{
  margin-left: -150px;

}

.tab  .tab-content p.nametab{
  color: #000f55;
  font-size: 18px;
  font-weight: 700;

}

.carousel-indicators li{
  background-color: #f0f0f0;
}

.carousel-indicators .active{
  background-color: #7B2481;
}

.program-heading a{
  font-size: 16px;
  color: #7B2481  !important;
  font-weight: 500;
  padding: 10px;
  padding-bottom: 5px;
  font-weight: 700;
  text-decoration: none;
  display: block;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

.research-area h3{
    font-size: 13px;
    color: #131413;
    line-height: 18px;
    margin-bottom: 10px;
}

.research-area p{
  font-size: 12px;
  font-style: italic;
  color: #b5b5b5;
}

.research-space{
  padding: 10px;
}

.research-space img{
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
.carousel-indicators {
    bottom: -20px;
}

}

@media only screen and (max-width: 479px){
    .tab .nav-tabs li{ width: 100%; }
    .tab .nav-tabs li a{ text-align: center; }
}


.research-label{
  position: absolute;
  background-color: #7B2481;
  font-size: 11px;
  padding: 7px;
  color: #FFF;
  text-shadow: 1px 1px 1px black;
  margin-top: 20px;
  margin-left: 20px;
}

.research-text{
  position: absolute;
  font-size: 14px;
  color: #FFF;
  text-shadow: 1px 1px 1px black;
  bottom: 10px;
  text-align: left;
  margin-left: 20px;
  width: 80%;
}


.right-padding0{
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.left-padding0{
    padding-right: 0px !important;

}

.whitebox{
    -webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    background-color: #fff;
    clear: both;
    margin-bottom: 150px;
}

.water .research-label{
  background-color: #00b4e5;
}

.water .program-heading a{
  color: #00b4e5 !important;
}

.water .carousel-indicators .active{
   background-color: #00b4e5;
}




.environment .research-label{
  background-color: #6ebf4b;
}

.environment .program-heading a{
  color: #6ebf4b !important;
}

.environment .carousel-indicators .active{
   background-color: #6ebf4b;
}


.energy .research-label{
  background-color: #f07622;
}

.energy .program-heading a{
  color: #f07622  !important;
}

.energy .carousel-indicators .active{
   background-color: #f07622;
}


#kisr-work{


  width:100%;
  min-height: 1800px;
 background-image: url('../images/research-bg.jpg');    background-position: center top 150px; background-repeat: no-repeat;

}

.date{
  background-color: #33b4fc;
  color: #FFF;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

/* .month{
  background-color: #283b90;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0px;
  padding-bottom: 0px;
  text-transform: uppercase;
  padding: 10px 0px;
}
 */
.box-shadoweffect{
    -webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    background-color: #FFF;
    padding-bottom: 0px;
    margin-bottom: 20px;
    position: relative;
  z-index: 9;
}

.viewmore{
    font-weight: 700;
    text-decoration: underline;
}


.full {
    width: 100%;
}
.gap {
  height: 30px;
  width: 100%;
  clear: both;
  display: block;
}
.footer {

  padding-bottom: 10px;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #DDDDDD;
  background-image: url('../images/footr.jpg');
  background-size: cover;
}

.layerbg{
    background-color: rgba(0, 14, 92, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.footer p {
  margin: 0;
  font-size: 14px;
  color: #FFF;
  line-height: 2.1;
}
.footer img {
  max-width: 100%;
}
.footer h3 {
  border-bottom: 1px solid #BAC1C8;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  padding: 0px 0 10px;
  margin-bottom: 10px;
}
.footer ul {
  font-size: 16px;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  color: #7F8C8D;
 
}
.footer ul li{
   /*padding: 0 0 10px 0;
    line-height: 1.5;*/
    color: #FFF;
}
.footer i{
  color: #33b4fc;
}
.footer ul li a {

  display: block;
}
.footer a {
  color: #FFF;
  padding: 0px 2px;
  font-size: 12px;
}



.social li:hover {

}
.social li a {
  color: #EDEFF1;
}
.social li:hover {

  background: transparent;
}
.social li a i {
  font-size: 20px;
  margin: 0 0 0 5px;
  color: #fff !important;
}

 .bottom20{
  margin-bottom: 20px;
 }

 .cright{

  font-size: 12px !important;
  /*letter-spacing: 2px;
  border-top:1px solid #FFF;
  padding-top: 20px;
  margin-bottom: 0px;*/

 }

 .bottom0{
  margin-bottom: 0px;
  padding-bottom: 0px;
 }

 .back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    z-index: 9;
    font-size: 25px;
    color: #121d54;
    background-color: #FFF;
    padding: 0px 10px;
}

.news-type{
  position: absolute;
  right: 0px;
  background-color: #33b4fc;
  color: #FFF;
  padding: 5px;
  text-transform: uppercase;
  font-size: 14px;
  z-index: 999;
  font-weight: 700;
  }

.news-type.type-event{background-color: #283b90;}


@media screen and (max-width: 769px) {
  /* .video-part-content, .video-part, .whitebg, .videobg{
    height: auto;
  }

  .videobg{
    display: none;
  } */

  .video-part-content h1{
    font-size: 40px;
  }

  .whitebg{
    padding-top: 110px;
  }

  /* .video-part video{
    display: none;
  } */

  .tab .nav-tabs li a{
    padding: 10px 15px;
  }

  .tab .nav-tabs li.active a, .tab .nav-tabs li.active a:focus, .tab .nav-tabs li.active a:hover{
    font-size: 20px;
  }

  #kisr-header.navbar-fixed-top{
    background-color: #FFF;
  }

  .footer .col-xs-12{
    margin-bottom: 20px;
    text-align: center;
  }
}



#custom-search-input {
        margin:0;
        margin-top: 10px;
        padding: 0;
    }

    #custom-search-input .search-query {
        padding-right: 3px;
        padding-right: 4px \9;
        padding-left: 3px;
        padding-left: 4px \9;
        color: #fff;
        margin-bottom: 0;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border: 3px solid white;
        margin-left: 10px;
        border-top:0px;
        border-left:0px;
        border-right:0px;
        padding-top: 10px;
        height: 54px;
        background:  transparent;
    }

    #custom-search-input button {
        border: 0;
        background: none;
        /** belows styles are working good */
        padding: 2px 5px;
        margin-top: 2px;
        position: relative;
        left: -28px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        color:#FFF;
    }

    .search-query:focus + button {
        z-index: 3;
    }
    #custom-search-input button:hover,#custom-search-input button:active,#custom-search-input button:focus{
      background: transparent !important;
    }

.btn-default {background: #283a8f; color: #fff; border: 0; border-radius: 0; padding: 6px 36px; padding-bottom: 7px; letter-spacing: 1px; transition: all .4s ease; font-size: 16px;}
.btn-default:hover,
.btn-default:focus {background: #393e46; color: #fff;}

.last-margin-0 > *:last-child{margin-bottom: 0 !important;}

.program-item{display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 88px;}
.program-item .image-holder{width: 630px;}
.program-item .image-holder img{max-width: 100%; min-width: 100%;}
.program-item .details{background: white; width: calc(100% - 630px); padding: 30px 50px 25px 25px; box-shadow: 1px 1px 25px rgba(0,0,0,0.10);}
.program-item .image-holder + .details{padding: 30px 25px 25px 50px;}
.program-item .details .title{color: #131413; font-size: 16px; margin: 0; line-height: 2.8;}
.program-item .details .sub-title{color: #6bbb49; font-size: 14px; line-height: 1.2; margin: 0 0 12px;}
.program-item .details .info{padding-bottom: 30px;}
.program-item .details .info p{font-size: 14px; color: #b5b5b5; line-height: 17px; font-style: none; margin-bottom: 15px; text-align: justify;}
.program-item .details .info > *:last-child{margin-bottom: 0;}
.program-item .details .read-more{display: block; padding-right: 0px;  border-top: solid 1px #dedede; padding-top: 20px; line-height: 1; font-size: 14px;}
.program-item .details .read-more i{float: right;}
.program-item .details .read-more:hover{color:#121d54; text-decoration: none;}
.inline-list{margin: 0; padding: 0; font-size: 0;}
.inline-list > li{display: inline-block; margin-right: 15px; line-height: 1; font-size: 14px;}
.inline-list > li:last-child{margin-right: 0;}

h1{font-size: 28px; color: #6ebf4b; text-align: center; font-weight: 700; text-transform: uppercase; position: relative; padding-bottom: 25px; margin-bottom: 25px; line-height: 1;}
h1:after{display: none; content: ""; width: 40px; height: 1px; position: absolute; bottom: 0; background: black; left: 50%; margin-left: -20px;}
h1 + .sub-title{text-align: center; color: #b5b5b5; font-size: 22px; margin-bottom: 25px; line-height: 1.2;}
h1.secondary{color:#273a8e; font-size: 24px;}
main[role="main"]{padding: 30px 0;}

.front-page main[role="main"]{padding: 0;}

.banner[role="inner"]{position: relative; text-align: center;}
.banner[role="inner"] img{max-width: 100%; min-width: 100%;}

.tabs-list{border-bottom: solid 1px #c4c4c4; display: flex; justify-content: space-around; margin-bottom: 35px;}
.tabs-list > li{font-size: 20px; padding-left: 15px; padding-right: 15px; color: #bbbbbb; padding-bottom: 30px; margin: 0; font-weight: 700; cursor: pointer;}
.tabs-list > li.active{box-shadow: 0 1px 0 #000; color: #6ebf4b;}
.tabs-list.secondary > li.active{color:#283a8f;}
.projects .tabs-list{margin-bottom: 74px;}
.short-desc{padding-bottom: 38px; text-align: center;}
.short-desc p{line-height: 21px;}
.short-desc > *:last-child{margin-bottom: 0;}

.flex-container{display: flex; flex-wrap: wrap;}
.flex-container:before {content: none;}
.flex-container:after{content: '';}

.program-listing .program-item{align-items: inherit;}
.program-listing .program-item .image-holder{width:295px;}
.program-listing .program-item .image-holder img{height: 100%;}
.program-listing .program-item .details{width:calc(100% - 295px); padding-left: 25px; padding-top: 20px;}
.program-listing .program-item .details .title{line-height: 19px;   margin-bottom: 10px;}
.program-listing .tabs-list{margin-bottom: 40px;}
.program-listing .program-item{margin-bottom: 45px;}

.news .program-item{align-items: inherit;}
.news .program-item .image-holder{width:570px;}
.news .program-item .image-holder img{height: 100%;}
.news .program-item .details{width:calc(100% - 570px); padding-top: 20px; padding-left: 35px; padding-right: 35px;}
.news .program-item .details .title{font-size: 18px; line-height: 27px; padding-bottom: 15px;}
.news .details{position: relative;}
.news .details .news-date{font-style: italic; color:#283a8f; font-size: 14px;}
.news .details .news-date:after{content: ""; display: block; width: 35px; border-bottom: solid 1px #283a8f; padding-top: 20px;}
.news .details .button-holder{position: absolute; right:0px; bottom: 0px;}
.news .details .button-holder .btn-default{text-transform: none; padding: 5px 36px;}
.news .image-holder{position: relative;}
.news .image-holder .event-dates{position: absolute; left:0px; top:0px; width:58px; background-color: #33b4fc; font-weight: 700; font-size: 35px; color:#fff; text-align:center; line-height: 58px;}
.news .image-holder .event-dates span{display: block; background-color: #283b90; font-size: 20px; min-height: 58px;}

.search-box {position: relative; margin-bottom: 45px;}
.search-box .form-control {border: 0; border-bottom: 1px solid #000000; border-radius: 0; height: auto; padding: 10px 20px; font-family: 'Bahij TheSansArabic', 'Foco';
  ; font-size: 20px; padding-right: 80px; box-shadow: none;}
.search-box .form-control::-webkit-input-placeholder {color: #010101;}
.search-box .form-control::-moz-placeholder {color: #010101;}
.search-box .button {width: 70px; height: 40px; border-left: 1px solid #000; text-align: center; padding: 4px 10px;position: absolute; bottom: 8px; right: 0;}
.search-box a {color: #000000; font-size: 21px;}
.search-box a:hover,
.search-box a:focus {color: #6ebf4b;}

.member-info {padding: 30px 26px 24px 26px; background: #fff; box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05); margin-bottom: 48px;}
.member-info h3 {font-size: 18px; color: #131413; font-style: italic; padding-bottom: 25px; margin-bottom: 18px; position: relative;}
.member-info h3:after {content: ''; width: 40px; height: 1px; background: #000000; display: block; position: absolute; bottom: 0; left: 0;}
.member-info ul {list-style: none; padding-left: 0; margin-bottom: 0;}
.member-info li {padding-left: 25px; position: relative; font-style: italic; font-size: 14px; color: #b5b5b5;}
.member-info li:not(:last-child) {margin-bottom: 18px;}
.member-info li a {color: #283a8f; text-decoration: none;}
.member-info li:before {content: ''; font-size: 16px; color: #33b4fc; font-family: 'FontAwesome'; position: absolute; left: 0; font-style: normal;}

.member-info li.address:before {content: '\f0b1';}
.member-info li.email:before {content: '\f0e0';}
.member-info li.phone:before {content: '\f095';}


.view-more {font-size: 16px; color: #203680; text-decoration: none; text-transform: uppercase; display: inline-block; border-bottom: 1px solid #727ba5; line-height: 19px;}
.view-more:hover,
.view-more:focus {text-decoration: none;}


.site-map {border-top: 1px solid #000; padding-top: 55px;}
.site-map h1 {color: #283a8f; margin-bottom: 50px;}
.site-map h4 {font-size: 16px; color: #283a8f; font-weight: 700; text-transform: uppercase; margin: 0; margin-bottom: 20px;}

.site-map .row {display: flex; flex-wrap: wrap;}  
.site-map .row:before {content: none;}
.site-map .row:after {content: '';}

.site-map .vertical-list {list-style: none; padding-left: 0; margin-bottom: 35px;}
.site-map .vertical-list li {padding-left: 9px; position: relative;}
.site-map .vertical-list li:not(:last-child) {margin-bottom: 13px;}
.site-map .vertical-list li:before {content: '\f105'; color: #5d5d5d; font-size: 16px; font-family: 'FontAwesome'; position: absolute; left: 0; top: 0;}
.site-map .vertical-list a {color: #5d5d5d; font-size: 14px; text-decoration: none;}
.site-map .vertical-list a:hover {color: #6ebf4b;}

main.contact-page  {padding-bottom: 0;}
.contact-page h1 {color: #283a8f;}
.contact-form {border-bottom: 1px solid #c4c4c4; padding-bottom: 20px; margin-bottom: 42px;} 
.contact-form .form-group {margin-bottom: 34px;}

.default-modal {text-align: center;}
.default-modal:before {content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px;}
.default-modal .popup-cross-icon{position: absolute; top: 0; right: -48px; width: 25px; height: 27px; cursor: pointer; background: url(../images/popup-cross-icon.png) 0 0px no-repeat; z-index: 1000;}
.default-modal .modal-dialog{width: 1140px; display: inline-block; text-align: left; vertical-align: middle; margin: 15px 0;}
.default-modal .modal-content{border-radius: 0; box-shadow: none; border:none; width:inherit; height:inherit; margin: 0 auto; pointer-events:all;}
.default-modal .modal-body{padding: 30px 100px; visibility: hidden; height: 450px; overflow: hidden;}
.default-modal .modal-body.show{visibility: visible; height: auto; overflow: visible;}

.default-modal .sub-title{font-size: 20px; margin: 0 0 20px; line-height: 1; color: #131413; text-align: center;}
.default-modal .title + .sub-title{color: #b5b5b5; text-align: center; font-size: 16px; margin-bottom: 20px;}
.default-modal .close-button{border-radius: 0; padding: 6px 38px; text-transform: capitalize; line-height: 1; background: #283a8f; font-size: 16px; color: white; position: absolute; right: 0; bottom: 0;}
.calendar-icon{position: absolute; right:30px; top:50%; transform: translateY(-50%);}

@media (min-width: 992px) {
    .accomplishments-modal .modal-dialog{margin-top: 240px;}
    .accomplishments-modal .image-holder{margin-top: -230px;}
    .accomplishments-modal .popup-cross-icon{right: 24px; top: -72px;}
}
.accomplishments-modal .modal-dialog{text-align: center;}
.accomplishments-modal .image-holder{margin-bottom: 20px; position: relative;}
.accomplishments-modal .image-holder img{max-width: 100%; }
.accomplishments-modal .info{padding-bottom: 30px;}
.accomplishments-modal .info p{text-align: justify; line-height: 1.2;/* font-style: italic*/; color: #b5b5b5}
.accomplishments-modal .continue-text{font-style: italic; text-align: left; font-size: 18px; padding-bottom: 15px;}
@media (max-width: 1199px) {
  .default-modal .modal-dialog{margin-top: 50px;}  
  .default-modal .popup-cross-icon{right: 0; top: -38px;}
}
@media (max-width: 991px) {
  
}

.news-modal .title{color: #283a8e; text-transform: uppercase; font-size: 23px;}
.news-modal .title + .sub-title{color: #b4b4b4; font-size: 23px; margin-bottom: 30px;}
.news-modal .image-holder{margin-bottom: 65px; text-align: center;}
.news-modal .image-holder img{max-width: 100%; }
.news-modal .info{padding-bottom: 30px;}
.news-modal .info p{text-align: justify; margin-bottom: 24px;}


@media (min-width: 768px) {
  .contact-page .control-label {padding-top: 9px;}

  .form-horizontal .control-label {text-align: left;}
}

.contact-page .inner-title {position: relative; text-align: center; color: #b5b5b5; font-size: 20px; margin-bottom: 32px; line-height: 1.2; padding-bottom: 35px;}
.contact-page .inner-title:after {content: ''; width: 40px; height: 1px; background: #000; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}

.address-box h5  {font-size: 16px; color: #283a8f; font-weight: 700; margin: 0; margin-bottom: 12px;}
.address-box ul {list-style: none; padding-left: 0; margin: 0;}
.address-box li {font-size: 14px; font-weight: 400; color: #000000;}
.address-box li span {color: #283a8f; font-weight: 700;}
.address-box li:not(:last-child) {margin-bottom: 8px;}

.address-box li a {color: #000000;}

.address-box.marketing {max-width: 293px; margin: auto;}
.address-box.mailing {max-width: 244px; margin: auto; margin-right: 0;}

.contact-page .map {margin-top: 55px; margin-bottom: -5px;}
.contact-page .map iframe {height: 430px; width: 100%; border: 0;}

.padding-top0 {padding-top: 0 !important;} 

label {font-weight: 400; text-align: left;}
.form-control {height: 41px; padding-top: 6px; border: 1px solid #ebebeb; border-radius: 0; background: #fff; box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.05); -webkit-appearance: none;}
textarea.form-control {height: 120px; resize: none;}

.registration h1 {color: #283a8f;}
.registration form .form-group {margin-bottom: 34px;}

.publishers h1 {color: #283a8f;}
.publishers .search-box {margin-bottom: 50px;}

.document-listing .program-item {margin-bottom: 44px; align-items: inherit;}
.document-listing .program-item .image-holder {width: 165px;}
.document-listing .program-item .image-holder + .details {width: calc(100% - 165px); padding: 27px 25px 27px 32px;}
.document-listing .program-item .details .title {line-height: normal; padding-bottom: 30px; margin-bottom: 18px; position: relative;}
.document-listing .program-item .title:after {content: ''; width: 40px; height: 1px; background: #000; position: absolute; left: 0; bottom: 0;}
.document-listing .program-item .details .info {padding-bottom: 0;}
.document-listing .program-item .details .read-more {background: none; border: 0; font-style: italic; color: #283a8f; border-bottom: 1px solid #aaaecc; display: inline-block; padding-right: 0;}
.document-listing .program-item .details .read-more:hover {text-decoration: none; color: #6ebf4b;}
.document-listing .program-item .image-holder img {height: 100%;}

.load-more.loading::before{content: ""; width: 100%; height: 100%; z-index: 100; position: absolute; top: 0; left: 0; background: white;}
.load-more.loading::after{content: "\f110"; animation: fa-spin 2s infinite linear; z-index: 101; font-family: fontAwesome; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 28px;}
.banner img{height: auto !important;}
@media (min-width: 768px) {
  .registration .control-label {padding-top: 9px;}
}

@media (max-width: 1200px) {
  .default-modal .modal-dialog {width: 97%;}
}
@media (max-width: 1199px) {
  .tabs-area .dg-image{max-width: 100%;}
}
@media (max-width: 1024px) {
  #programs .program-item .image-holder {width: 240px;}
  #programs .program-item .details {width: calc(100% - 240px);}

  .program-item .image-holder {width: 350px;}
  .program-item .image-holder + .details,
  .program-item .details {width: calc(100% - 350px);}

  .news .program-item .image-holder {width: 350px;}
  .flat-page .projects .short-desc table{width:98% !important; height:auto !important;; margin: auto;}
}
@media (max-width: 991px){
  .tab .leftmargin{
    margin-left: 0px;
    margin-bottom: 20px;
  }

  .address-box.marketing,
  .address-box.mailing {max-width: 100%;}
  .banner video{width:100%;}
  .modal-body iframe{width:100%; height:100%;}
}
@media (max-width: 767px){
  #kisr-work .kisr-project-item{margin: 0 0 25px;}
  #kisr-work .left-padding0{padding: 0 !important; float: none !important;}
  #kisr-work .full-on-sm{float: none !important;}

  .news-type + img{min-width: 100%;}    

  .date{padding: 10px 0; font-size: 25px;}
  .month{font-size: 16px;}

  .hide-sm {display: none;}

  main .form-horizontal .form-group {margin-bottom: 20px;}

  .address-box.marketing {margin: 25px 0;}

  .projects .program-item .image-holder + .details,
  .program-item .details {padding: 25px;}

  .default-modal .modal-dialog {width: 95%;}
  .default-modal .modal-body {padding: 30px;}

  .carousel-indicators {bottom: -20px;}

  .kisr-person {margin-bottom: 0;}
  .news .program-item .image-holder img{height:auto;}
  .flat-page .projects .short-desc table{width:98% !important; display: block;}
  .flat-page .projects .short-desc table td{width:100% !important; display: block;}
  .flat-page .projects .short-desc table td img{max-width: 100%;}
  .video-part-content, .video-part, .whitebg{height:auto; }
  .video-part{margin-top:90px;}
  .video-part .whitebg{padding-top: 50px;}
  .videobg{background:none; display: none;}
  #kisr-work{background: none;}
  .tabs-list > li{font-size: 16px;}
  .video-part video{position: relative; left:auto;}

}
@media (max-width: 680px){
  .sidebar__header::after{display: none !important;}
  .tab .tab-pane{padding: 20px 15px;}

  .video-part-content h1 {font-size: 25px;}
  .show-style1 {font-size: 20px; margin-bottom: 0;}
  .show-style2 {font-size: 20px;}
}
@media (max-width: 667px) {
  .program-item .image-holder {width: 100%;}
  .program-item .image-holder + .details,
  .program-listing .program-item .image-holder,
  .program-item .details {width: 100%;}
  .program-listing .program-item .image-holder img{height:auto !important;}
  .news .program-item .image-holder {width: 100%;}
  .research-text{width:100%;}
  #kisr-work .kisr-project-item a{width:100%;}
  #kisr-work .kisr-project-item a img{min-width: 100%;}
  .tabs-list > li{font-size: 14px;}
}
@media (max-width: 500px) {
  #programs .program-item .image-holder {width: 100%;}
  #programs .program-item .details {width: 100%;}
  #programs .program-item .details .title {min-height: auto !important;}

  .document-listing .program-item .image-holder {width: 100%; text-align: center;}
  .document-listing .program-item .image-holder + .details {width: 100%;}
  .document-listing .program-item .image-holder img {min-width: auto;}

  h1 + .sub-title br {display: none;}

  .our-team .row > div {width: 100%;}

  .news .image-holder .event-dates {font-size: 20px; line-height: 45px;}
  .news .image-holder .event-dates span {font-size: 15px; min-height: 45px;}
  footer .row > div:not(:last-child){margin-bottom: 20px;}
}
@media (max-width: 414px) {
  h1 {font-size: 22px;}
  h1 + .sub-title {font-size: 16px;}

  .contact-page .map iframe {height: 350px;}

  .site-map .row > div {width: 100%;}

  .our-team p br {display: none;}
  .projects .tabs-list > li {width: 50%; word-break: break-all;}

  .news .tabs-list {flex-wrap: wrap;}
  .news .tabs-list > li:first-child {width: 100%; padding-bottom: 15px; margin-bottom: 15px; text-align: center;}
  .news .tabs-list > li {padding-bottom: 15px;}

  .news .program-item .details {padding-left: 25px; padding-right: 25px;}
  .news .program-item .details .title {line-height: normal; font-size: 16px;}
}
@media (max-width: 350px) {
  .g-recaptcha {transform: scale(.9); margin-left: -15px;}
}

.right .social-tabs {/* padding-top: 50px;  top: 50% !important; transform: translateY(-50%); */}
.social-tabs li {padding-top: 4px;}
.dcsmt {z-index: 999;}
.dcsmt img {max-width: 100%;}
.right .tab-content {width: 100% !important; height: 100% !important;}
.dcsmt.right .controls {bottom: 20px;}
.tab-inner .profile h3,
.tab-inner .profile h3 a {background-position: left center;}
.tab-inner .profile h3 {padding-top: 3px;}

.hide-on-load{display: none;}

/*.card {*/
  /*display: none;*/
/*}*/

.banner img {max-width: 100%; min-width: 100%;}
.lazyloader{text-align: center; font-size: 25px;}

#kisr-testimonials, #kisr-about{padding-top: 90px;}
.lang-selector{  font-family: 'Bahij TheSansArabic';}
.pos-relative{position: relative;}
.block-link{position: absolute; width: 100%; height: 100%; top:0px; left:0px; display: block; z-index: 10; cursor: pointer;}
.text-center .img-responsive{margin: auto;}
.timeline-detail{border-top: 1px solid #000; padding-top: 55px;}

.water h1, .water .tabs-list > li.active, .water a , .water .program-item .details .sub-title,.water .default-modal .title + .sub-title {
	color:#00b4e5
}

.petroleum h1, .petroleum .tabs-list > li.active, .petroleum a , .petroleum .program-item .details .sub-title,.petroleum .default-modal .title + .sub-title {
	color:#7B2481
}

.energy h1, .energy .tabs-list > li.active, .energy a , .energy .program-item .details .sub-title,.energy .default-modal .title + .sub-title {
	color:#f07622;
}

.flat-page h1, .flat-page .tabs-list > li.active, .flat-page a , .flat-page .program-item .details .sub-title,.flat-page .default-modal .title + .sub-title {
	color:#2b3992;
}


.program-item .details .read-more{
	background: none;
	padding-right: 0px;
}

.program-item .details .read-more i{
	float: right;
}

ol.list-style {
  color: #ccc;
  list-style-type: none;
  text-align: justify;
}

ol.list-style li {
  position: relative;
  font: bold italic 30px/1.5 'Lato', sans-serif;
  margin-bottom: 20px;
}

.list-style li p {
  font: 16px/1.5 'Lato', sans-serif;
  padding-left: 60px;
  color: #555;
}

.list-style span {
  position: absolute;
}

.navbar-brand > img{
   margin-right: -10px;
         margin-top: 5px;
    }
     
   .navbar{
  min-height: 83px;
   }
   
@media (min-width: 1200px) {
  .container {
    width: 1169px;
  }
  
  .drawer-open .container{
        width: 1170px;
  }
}

@media (min-width: 768px) {

.whitebg {
  
}

.program-listing .program-item .image-holder {
    height: 250px;
    overflow: hidden;
}

.program-item .image-holder {
   display: flex;
    height: 425px;
    overflow: hidden;
}

 .research-area p{
  height: 30px;
   overflow:hidden;
 }  
 
 .research-area h3 {
    height: 35px;
   overflow:hidden;
 }
 
 .kisr-person h3{
 height: 82px;
 overflow: hidden;
 }
 
 .news-para p{
   height: 95px;
   overflow: hidden;
   text-align: left;
   font-size: 14px;
 }
 
 .program-item .details .info {
    height: 57%;
  }
  
  .program-listing .program-item .details .title {
    overflow: hidden;
    height: 56px;
  }
}



.energy-modal.default-modal .title{
   color: #f07622;
}

.energy-modal.default-modal .close-button{
  background: #f07622;
}

.petroleum-modal.default-modal .title{
   color: #7B2481;
}

.petroleum-modal.default-modal .close-button{
  background: #7B2481;
}

.water-modal.default-modal .title{
   color: #00b4e5;
}

.water-modal.default-modal .close-button{
  background: #00b4e5;
}

.modal-body ul{
  text-align: left;
  margin:0;
  padding:0;
  font-size: 14px;
    color: #b5b5b5;
    line-height: 17px;
    list-style:disc;
    margin-left: 15px;
    
}

.modal-body ul li{
margin-bottom: 5px;
}

/* #js-timeline-next, #js-timeline-prev{
  display:none !important;
} */

.publication-page .program-item .image-holder{
  width: 90px !important;
  height: 130px !important;
}

.publication-page  .program-item .image-holder + .details {
    padding: 10px !important;
    height: 130px;
    overflow: hidden;
}
.publication-page .document-listing .program-item .details .title {
    padding-bottom: 5px;
    margin-bottom: 0;
    }
    
.publication-page .document-listing .program-item .title:after{
  display: none;
}

.publication-page .document-listing .program-item {
    width: 50%;
    float: left;
}

.member-info {
    height: 170px;
}
 

.drawer-toggle:hover .drawer-hamburger-icon:before {
    top: -13px;
}
.drawer-toggle:hover .drawer-hamburger-icon:after {
    top: 13px;
}

.drawer-open .drawer-toggle:hover .drawer-hamburger-icon:before,
.drawer-open .drawer-toggle:hover .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {top: 0 !important;}

.back-to-top:hover,
.back-to-top:focus {color: #313131;}

.drawer-nav .dropdown-backdrop {display: none !important;}

/* .datepicker table tr td span.month {line-height: 37px; font-size: 16px;} */
.datepicker table tr td span.month:hover,
.datepicker table tr td span.month.focused {color: #000;}

.dcsmt-slider .tab-content .tab-inner {background: #fff; overflow: auto; height: 400px !important;}

.overflow-hidden {overflow: hidden !important;}

.publication-page .document-listing {display: flex; flex-wrap: wrap;}
.publication-page .program-item .image-holder {height: auto !important; align-items: center;}
.document-listing .program-item .image-holder img {height: auto;}
.document-listing .program-item .image-holder + .details {height: auto;}
.program-item .details .info {height: auto;}

.endless_container {width: 100%; clear: both; text-align: center;}

@media screen and (max-width: 1200px) {
  #kisr-work .kisr-project-item {display: flex; flex-wrap: wrap;}
  #kisr-work .kisr-project-item:before {content: none;}
  #kisr-work .kisr-project-item:after {content: '';}
  #kisr-work .kisr-project-item .right-padding0 {display: flex; flex-wrap: wrap; /* height: 100%; border: 2px solid yellow; */} 
  #kisr-work .kisr-project-item .right-padding0 img {/* height: 100%; min-height: 100%; */}
  #kisr-work .research-label,
  #kisr-work .research-text {z-index: 99;}

  .research-space .carousel-indicators {height: 20px; overflow: hidden; left: 0; margin-left: 0; width: 100%;}

  .sidebar__header {text-align: center !important;}

  .document-listing .program-item .image-holder + .details {width: calc(100% - 130px);}
}
@media screen and (max-width: 1024px) {
  .card {display: none !important;}

  .dcsmt {top: 50% !important; transform: translateY(-50%);}
}
@media screen and (max-width:800px)
{
  .publication-page .document-listing .program-item
  {
    float: none;
    width: 100%;
  }
  .document-listing .program-item .image-holder + .details{width:calc(100% - 90px);}
}
@media screen and (max-width: 767px) {
  #kisr-work .kisr-project-item {display: block;}

  .dcsmt {display: none !important;}

  .timeline .crawl-control {font-size: 65px;}
}
@media screen and (min-width: 480px) {
  .tab .nav-tabs li {width: auto !important;}
  .tab .nav-tabs li a {display: inline-block; text-decoration: none;}
}
@media screen and (max-width: 480px) {
  .tab .nav-tabs li {margin-right: 0;}
  .tab .nav-tabs li a {display: inline-block; text-decoration: none !important;}

  .tab .slick-arrow {font-size: 0; padding: 0; background: none; border: 0;}
  .tab .slick-arrow:before {font-family: "FontAwesome"; font-size: 18px; color: #6e6e6e; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 999;}
  .tab .slick-arrow.slick-prev:before {content: '\f053';}
  .tab .slick-arrow.slick-next:before {content: '\f053'; left: auto; right: 0; transform: translateY(-50%) rotate(180deg);}
}
@media screen and (max-width: 500px) {
  .stack-on-500 > div {width: 100%; text-align: center;}

  #kisr-header .navbar-brand {padding-right: 0; height: auto; margin-top: 6px;}
  .navbar-brand > img {margin-right: 0; margin-top: 0;}
  #kisr-header .drawer-hamburger {padding-left: 15px; top: 10px;}

  .publication-page .document-listing .program-item {width: 100%;}
  .publication-page .program-item .image-holder {width: 100% !important; justify-content: center;}
  .document-listing .program-item .image-holder + .details {width: 100%;}
}

.inner-banner {margin-bottom: 20px;}
.inner-banner img {max-width: 100%;}

.cal-title{
  text-align: center;
      background-color: #33b4fc;
    color: #FFF;
    padding: 10px;
    margin-bottom:0;
}

.calendar-wrapper{
-webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    background-color: #FFF;
    }
    
    .month {
    background-color: #283b90;
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0px;
    padding-bottom: 0px;
    text-transform: uppercase;
    padding: 10px 0px;
}

.zabuto_calendar{
  height:402px;
}

div.zabuto_calendar div.legend{
  text-align: center !important;
}

.program-item .details .title{
    line-height: 24px;
    margin-bottom: 20px;
}

.image-holder img {max-width: 100%;}

.event-modal:before {content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px;}
.event-modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {overflow-x: hidden; overflow-y: auto;}
.event-modal .popup-cross-icon {position: absolute; top: 0; right: -48px; width: 25px; height: 27px; cursor: pointer; background: url('../images/popup-cross-icon.png') 0 0px no-repeat; z-index: 1000;}
.event-modal .modal-header {padding: 0; border: 0; min-height: none;}
.event-modal .modal-title {font-size: 0;}
.event-modal .modal-footer {display: none;}
.event-modal .modal-body {padding: 30px 50px; padding-bottom: 40px;}
.event-modal .close-button {border-radius: 0; padding: 6px 38px; text-transform: capitalize; line-height: 1; background: #283a8f; font-size: 16px; color: white; position: absolute; right: 0; bottom: 0;}
.event-modal {text-align: center;}
.event-modal .modal-dialog {display: inline-block; text-align: left; vertical-align: middle; margin: 15px 0;}
.event-modal .modal-content {border-radius: 0; border: 0;}

.environment-modal .title{
  color: #6ebf4b !important;
}

.environment-modal .close-button{
    background: #6ebf4b !important;
}


@media screen and (max-width: 1200px) {
  .event-modal .popup-cross-icon {right: 0; top: -38px;} 
} 
@media screen and (max-width: 767px) {
  .event-modal {padding-right: 0 !important;}
  .event-modal .modal-dialog {margin: 15px auto; width: 95%;}
} 

.front-page .box-shadoweffect,
.front-page .calendar-wrapper {height: 100%; margin-bottom: 0;}
.front-page .calendar-wrapper .zabuto_calendar {height: 100%;}

.button-row .viewmore {display: inline-block; margin-top: 30px;}

@media screen and (max-width: 991px) {
  .front-page .box-shadoweffect,
  .front-page .calendar-wrapper {margin-bottom: 20px;}
}

@media (min-width: 768px) {
  .front-page .news-para p {height: 45px;}
}
@media screen and (max-width: 767px) {
  .row.flex-container > div {width: 100%;}
}

.structure-page h1 {color: #373b90;}
.structure-chart {margin-bottom: 200px;}

.structure-head {font-size: 14px; color: #373b90; width: 270px; height: 68px; margin: auto; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0 7px rgba(0, 0, 0, 0.12); position: relative;}
.structure-head:after {content: ''; width: 1px; height: 22px; background: #363a8e; position: absolute; bottom: -22px; left: 50%;}

.info-row {position: relative; text-align: center; z-index: 100;}
.info-box {width: 270px; display: inline-flex; flex-wrap: wrap; position: relative;}
.info-box > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.info-box .image {width: 93px;}
.info-box .desc {width: calc(100% - 93px); padding: 15px 3px; text-align: center; box-shadow: 0px 0 7px rgba(0, 0, 0, 0.10); position: relative; background: #fff;}
.info-box p {margin-bottom: 0; font-size: 14px}
.info-box .title {color: #505050; line-height: 14px;}
.info-box .sub-title {color: #7B2481; width: 100%; position: absolute; left: 0; bottom: 15px; letter-spacing: -0.5px;}
.info-box .sub-title span {display: block; font-size: 12px; color: #b5b5b5;}

.info-box:hover .desc {background: #373b90; transition: all .4s ease;}
.info-box:hover * {color: #fff !important;}

.dgc-box {min-width: 182px; font-size: 14px; color: #505050; background: #fff; display: inline-block; text-align: center; padding: 12px 8px; box-shadow: 0px 0 7px rgba(0, 0, 0, 0.08); position: absolute; left: 100px; top: 50%; transform: translateY(-50%);}

.info-box.right {position: absolute; right: 140px; top: 0;}

.info-row.first .line {width: calc(100% - 318px); height: 1px; background: #363a8e; position: absolute; top: 50%; left: 0; z-index: -1;}

.info-row.second  {padding: 100px 0;}
.info-row.second:before {content: ''; width: 1px; height: 100%; background: #363a8e; position: absolute; left: 50%; top: 0;}
.info-row.second .info-box:nth-child(2) {margin-left: 12px;}
.info-row.second .info-box:nth-child(2):before {content: ''; width: 16px; height: 1px; background: #363a8e; position: absolute; top: 50%; left: -15px;}

.left-col {position: absolute; top: 50%; transform: translateY(-50%);}
.left-col:before {content: ''; width: 1px; height: calc(100% + 31px); background: #363a8e; position: absolute; left: 0; top: -87px;}
.info-row.second .left-col .info-box {display: flex; margin-left: 12px;}
.info-row.second .left-col .info-box:before {content: ''; width: 12px; height: 1px; background: #363a8e;  position: absolute; top: 50%; left: -11px;}
.info-row.second .left-col .info-box:not(:last-child) {margin-bottom: 25px;}

.info-row.third {padding-top: 20px;}
.info-row.third:before {content: ''; width: 1px; height: 100%; background: #363a8e; position: absolute; right: 0; top: 0;}
.info-row.third:after {content: ''; width: 50%; height: 1px; background: #000; position: absolute; right: 0; bottom: -1px;}
.info-row.third .info-box {margin-right: 11px; margin-bottom: 32px;}
.info-row.third .info-box:after {content: ''; width: 100%; height: 1px; background: #444896; position: absolute; top: -20px; right: -50%}
.info-row.third .info-box:not(:first-child):after {width: 110%;}
.info-row.third .info-box:last-child:after {right: -15px;}
.info-row.third .info-box:before {content: ''; width: 1px; height: 20px; background: #444896; position: absolute; left: 50%; top: -20px;}

.info-row.fourth {padding-top: 20px;}
.info-row.fourth .info-box {margin-right: 11px; margin-bottom: 32px;}
.info-row.fourth .info-box:after {content: ''; width: 100%; height: 1px; background: #444896; position: absolute; top: -20px; right: -50%}
.info-row.fourth .info-box:not(:first-child):after {width: 110%;}
.info-row.fourth .info-box:last-child:after {right: 0;}
.info-row.fourth .info-box:before {content: ''; width: 1px; height: 20px; background: #444896; position: absolute; left: 50%; top: -20px;}

.drawer .drawer-nav {z-index: 9999;}

@media screen and (max-width: 1200px) {
  .structure-page .inner-wrapper {overflow-x: scroll;}
  .structure-page .structure-chart {width: 1200px; margin-bottom: 80px;}
  .info-row.third .info-box:last-child:after {right: -44px;}
}

#kisr-header .navbar-brand .mobile-logo {display: none;}
@media screen and (max-width: 767px) {
  #kisr-header .navbar-brand img {display: none;}
  #kisr-header .navbar-brand .mobile-logo {display: block; width: 150px;}
  .footer ul{
    text-align: center
  }
  .social li a{
    height: inherit;
  }
}
.legend-text span.badge-event{color:#283b90 !important;}

.ar .calendar-month-header .glyphicon-chevron-right:before {
    content: "\e079" !important;
}

.ar .calendar-month-header .glyphicon-chevron-left:before {
    content: "\e080" !important;
}


.form-control:focus{
  border-color: rgba(0, 15, 85, 0.8);
  box-shadow: 0 1px 1px rgba(0, 15, 85, 0.075) inset, 0 0 8px rgba(0, 15, 85, 0.6);
  outline: 0 none;
}

.last-section{
  height: inherit !important;
}
.social li a:hover i{
  color:#34B4FC  !important
}

/* key-frames */
@-webkit-keyframes shine {
  100% {
      left: 125%;
  }
}
@keyframes shine {
  100% {
      left: 125%;
  }
}
@-webkit-keyframes circle {
  0% {
      opacity: 1;
  }
  40% {
      opacity: 1;
  }
  100% {
      width: 200%;
      height: 200%;
      opacity: 0;
  }
}
@keyframes circle {
  0% {
      opacity: 1;
  }
  40% {
      opacity: 1;
  }
  100% {
      width: 200%;
      height: 200%;
      opacity: 0;
  }
}

.media-events{padding-bottom:30px;}
.media-events .media-item{position: relative; margin-bottom:25px;}
.abs-link{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.media-events .media-item .media-image, .project-item .project-image{position: relative; overflow: hidden;}
.media-events .media-item .media-image img{width:100%; max-width:100%; height:202px;}
.media-events .media-item:hover .media-image:before, .project-item .project-image:before{position: absolute;  top: 0;  left: -75%;  z-index: 2;  display: block;  content: '';  width: 25%;  height: 100%;  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-28deg);}
.media-events .media-item .media-image:hover:before, .project-item .project-image:hover:before{animation: shine .90s;}
.media-events .media-item .media-detail p{font-weight: 300; color:#7b796f; font-size: 13px; margin-bottom:0px;}
.media-events .media-item .media-detail{background:#fff; padding: 14px 16px; padding-bottom: 18px; border:solid 1px #f1f0ee; height: 101px;}
.media-events .media-item .media-detail .title{font-size: 20px; color:#234156; font-weight:400; padding-bottom:8px;}
.media-events .media-item .media-detail .title a{color:#234156;}
.media-events .media-item .media-detail .title a:hover{text-decoration: none;}
.media-events .media-item .event-date{position: absolute; top:20px; left:15px; display: inline-block; background:rgba(35,54,135,0.9); padding: 8px; color:#fff; font-size: 15px; font-weight: 400; margin-bottom:8px; box-shadow: -8px 0px 0px 0px #233687; transition: all 0.5s ease; width:156px;}
.media-events .media-item .event-date.events{background:rgba(0,180,229,0.9);  box-shadow: -8px 0px 0px 0px #00afdf;}
.media-events .media-item .event-date:before{position: absolute; content: ''; border-top: 0px solid transparent;border-right: 8px solid #273a8e; border-bottom: 6px solid transparent; left: -8px; bottom: -6px;transition: all 0.5s ease;}
.media-events .media-item .event-date.events:before{border-right: 8px solid #00b4e5; }
/* .media-events .media-item:hover .event-date:before{border-right: 8px solid #00b4e5;} */
.media-events .media-item .event-date span{display: block; text-transform:uppercase; font-size: 12px;}
.listing-filter{margin-bottom:40px; position:relative;}
.listing-filter .filter-button-group{display: flex; justify-content: center;}
.listing-filter .filter-button-group button{background:#fff; min-width:120px; padding:10px 30px; text-align:center; border:solid 1px #e3e3e3; color:#bbbbbb; font-weight: 700; font-size: 14px; transition: all 0.5s ease;}
.listing-filter .filter-button-group button:first-child{border-right:0;}
.listing-filter .filter-button-group button:last-child{border-left:0;}


.listing-filter .filter{float: right; position: absolute; right: 0px; top:0px;}
.listing-filter .filter form .form-group{display: flex; align-items: center;}
.listing-filter .filter form .form-group label{font-size: 14px; color: #283a8f; text-transform: uppercase; margin: 0;}
.listing-filter .filter form .dropdown{margin: 0 10px;}
.listing-filter .filter form .dropdown .dropdown-menu{padding: 0;border-radius: 0;border:1px solid #ebebeb; width:100%;}
.listing-filter .filter form .dropdown .dropdown-toggle{border:1px solid #ebebeb !important; background-color: #fff !important; border-radius: 0 !important; color: #bfbfbf !important;min-width: 165px; text-align: left; padding: 7px 12px;text-transform: none; font-size: 16px}
.listing-filter .filter form .dropdown .dropdown-toggle .caret{position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #bfbfbf;border-top: 6px dashed; border-top: 6px solid; border-right: 6px solid transparent; border-left: 6px solid transparent;}
.listing-filter .filter form .dropdown-menu > li > a{padding: 6px 10px;border-bottom: 1px solid#000;}
.listing-filter .filter form .dropdown-menu > li > a:last-child{border-bottom: 0;}
.listing-filter .filter form .dropdown-menu > li > a:hover,
.listing-filter .filter form .dropdown-menu > li > a:focus{background: #273a8e !important; color: #fff !important;}
.listing-filter .filter form .button-row .btn{padding: 8px 15px;}

.media-events .media-item.media{margin-top:0px;}
.listing-filter .filter-button-group button.active, .listing-filter .filter-button-group button:hover{background:#273a8e; color:#fff;}
.filter-button-group button:focus{outline:none;}
.media-events .media-item:hover .media-detail{box-shadow: 0px -3px 17px -12px rgba(0,0,0,0.5);}
/* .media-events .media-item:hover .event-date{background:#00b4e5; box-shadow: -25px 0px 0px 0px #00b4e5;} */

/*003-deatils-op4-css*/

/*slick-button*/
.slick-arrow{position: absolute; display: block; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; transform: translateY(-50%); padding: 0; border: none; outline: none !important; z-index: 9; background-color: rgba(255, 255, 255, 0.3); width: 60px; height: 100px;}
.slick-arrow:hover{background-color: rgba(255, 255, 255, .7);}
.slick-arrow.slick-next{right: 0;}
.slick-arrow.slick-prev{left: 0;}
.slick-arrow:before{position: absolute; content: ""; width:15px; height: 28px; background:url(../images/arrow-left.png) left top no-repeat; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.slick-arrow.slick-next:before{width:15px; height: 28px; background:url(../images/arrow-right.png) left top no-repeat;}
/*slick-button end*/

p.category-label{font-size: 16px; line-height: 1;; color: #fff; font-weight: 700; background-color: #96559b;display: inline-block;padding: 3px 8px 4px; margin:25px 0 20px 0;}
p.category-label.energy{background:#f07622;}
p.category-label.water{background:#00b4e5;}
p.category-label.pertroleum{background:#7c2a82;}
p.category-label.environment{background:#6ebf4b;}

a.back-main{color: #b9bbbb; font-size: 14px; position: relative;padding-left: 15px; display:block; clear: both}
a.back-main:before{content: "\f104"; position: absolute;  font-family: fontAwesome; left: 0; top: 50%; transform: translateY(-50%); font-size: 20px;}
a.back-main:hover{color: #6ebf4b;}
.project-details h1.secondary,
.new-details h1.secondary{text-align: left; font-size: 26px; text-transform: none;line-height: 1.4; padding: 0;}
.project-details h1.secondary:after,
.new-details h1.secondary:after{display: none;}

.project-details,
.new-details{padding-bottom: 50px;}
.project-details p.text{color: #6b6e72;line-height: 1.6;}
.project-details .proj-info ul{list-style: none; display: flex;}
.project-details  .proj-info ul:not(:last-child){margin-bottom: 30px;}
.project-details  .proj-info ul li{display: inline-block;}
.project-details  .proj-info ul li:first-child{margin-right: 30px;}
.project-details  .proj-info ul li p{ color:#6b6e72; font-size: 16px; margin: 0; line-height: 1;}
.project-details  .proj-info ul li p.title{color: #283a8f; text-transform: uppercase; margin-bottom: 6px;}

.project-details .slider-wrapper .detail-banner{margin-bottom: 35px;}
.project-details .slider-wrapper .detail-banner .video-holder{position: relative;}
.project-details .slider-wrapper .detail-banner .video-holder img{opacity: 0; position: relative; z-index: -9999;}
.project-details .slider-wrapper .detail-banner .video-holder iframe{width: 100%; height: 100%;  border: 0; position: absolute; left: 0; top: 0;}
.project-details .slider-wrapper .thumb-slider{padding: 20px 0; border:1px solid #e3e3e3;}
.project-details .slider-wrapper .thumb-slider .image{opacity: .5;}
.project-details .slider-wrapper .image img{max-width: 100%; margin: 0 auto;}
.project-details .slick-initialized .slick-slide{ display: inline-block;  vertical-align: middle; float:none;}
.project-details .slider-wrapper .thumb-slider .slick-slide{margin-right: 10px;}
.project-details .slider-wrapper .thumb-slider .slick-slide:not(.slick-current){transform: scale(0.9);}
.project-details .slider-wrapper .thumb-slider .slick-current .image{opacity: 1; box-shadow: 0px 3px 24px rgba(0,0,0,0.9);}

.new-details .detail-wrapper{max-width: 960px; margin: auto; padding-bottom: 60px;}
.new-details h1{margin-top: 25px; margin-bottom: 20px;}
.new-details h2{text-align: center; font-size: 18px; color:#464646; font-weight: 700; text-transform: uppercase;}
.new-details .Published{color: #c3c3c3;}
.new-details .image{height: 300px; overflow: hidden;}
.new-details p{color: #6b6e72; line-height: 1.5; margin: 0 0 20px 0; text-align: justify;}
.new-details p img{float:right; margin-left: 15px; margin-bottom:15px;}
.new-details .media{margin: 0;}
.new-details .media-events .media-item .event-date{position: absolute; top: 20px;}

.projects-listing{padding-bottom:25px;}
.projects-listing .row.grid{margin: 0px -2px}
.projects-listing .row.grid > div{padding-left:2px; padding-right: 2px;}
.projects-listing .project-item{width: 100%;}
.projects-listing .project-item .inner{padding:0px; margin-bottom:0px;}
.projects-listing .project-item p.title{padding:0px 8px; color:#131413; font-size: 20px;}
.projects-listing .project-item p.title a{color:#131413;}
.projects-listing .project-item p.title a:hover{text-decoration: none; color:#6ebf4b;}
.projects-listing .project-item p.category-label{margin:0px 8px; margin-bottom:3px; font-size: 14px; padding: 4px 8px;}
.projects-listing p.sub-title{font-size: 16px; color:#898989; font-weight: 300; margin-bottom: 30px;}
/*.projects-listing .project-item .inner .project-image img{width: 100%;}
.projects-listing .grid{height: auto !important;}
.projects-listing .row{display: flex; flex-wrap: wrap;}
.projects-listing .row > div{margin-bottom:8px;}
.projects-listing .row > div .project-item, .projects-listing .row > div .inner{height: 100%;}*/


.projects-listing .project-item{height: 378px; position:relative; overflow:hidden; margin-bottom:4px;}
.projects-listing .project-item .abs-link{z-index: 2;}
.projects-listing .project-item .project-image{height: 378px;}
.projects-listing .project-item .project-image img{width: 100%; height: 100%;}
.projects-listing .project-item .project-caption{position: absolute;  padding: 0px 10px; z-index:2; transition: all 0.5s ease; bottom: 0;   /*top: 50%;  transform: translate(0%, -50%);*/}
.projects-listing .project-item .project-caption p.title a{color:#fff; transition: all 0.5s ease;}
.projects-listing .project-item .project-caption p.title{/*transform: translate3d(0,100%,0); */transition: all 0.5s ease; padding:0px;}
.projects-listing .project-item .project-caption p.short-detail{color:#fff; transition: all 0.5s ease; display: none; /*transform: translate3d(0,200%,0);*/}
.projects-listing .project-item:hover .project-caption p.short-detail{/*transform: translate3d(0,0,0) ; */display: none;}
.projects-listing .project-item:hover .project-caption p.title{/*transform: translate3d(0,0,0)*/}
.projects-listing .project-item:after{position: absolute; content:""; background:rgba(0,0,0,0.3); width: 100%; height: 100%; top:0px; left:0px; z-index:1; transition: all 0.5s ease;}
.projects-listing .project-item:hover:after{background:rgba(0,0,0,0.6);}

/*bootstrap select*/
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){width: 100%;}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner{font-size: 16px; color:#333; opacity: .4;}
.bootstrap-select .dropdown-menu{padding: 0;}
.bootstrap-select .dropdown-menu > li > a{padding: 6px 10px;}
.bootstrap-select .dropdown-menu > li > a:hover, 
.bootstrap-select .dropdown-menu > li > a:focus{background: #273a8e; color: #fff;}
.bootstrap-select .btn-default:hover,
.bootstrap-select .btn-default:focus
.bootstrap-select .btn-default:active{background: #fff !important;}
.bootstrap-select .btn:focus,
.bootstrap-select .btn:active{background: #fff !important;}
.bootstrap-select .caret{border-top: 6px dashed; border-right: 5px solid transparent; border-left: 5px solid transparent;}


.contact-page .bootstrap-select .btn-default:focus{    border-color: rgba(0, 15, 85, 0.8);box-shadow: 0 1px 1px rgba(0, 15, 85, 0.075) inset, 0 0 8px rgba(0, 15, 85, 0.6);outline: 0 none;}
.contact-page{position: relative; padding-bottom:50px;}
.contact-page h1{padding: 0; margin-bottom: 50px; font-weight: 400;}
.contact-page h1:after{display:none;}

.contact-page .location-map{position: absolute; right: 0; top: 0; width: 70%; z-index: -1; margin-top: 108px;}
.contact-page .location-map #map{height:663px; position: relative; opacity: .5;}
/*.contact-page .map iframe:after{content:'';position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(255, 255, 255, 0.5);}*/
.contact-page .contact-form{/*width: 360px;*/ border:0; background:#fff; padding-bottom: 50px; padding-right:25px; margin-bottom:0px;}
.contact-page .contact-form .form-group{margin-bottom: 21px;}
.contact-page .contact-form .form-control{padding-left: 10px;}
.contact-page .contact-form .form-control::placeholder{font-size: 16px; color:#333; opacity: .4;}
.contact-page .contact-form textarea.form-control{padding-top: 12px;}
.contact-page .contact-form .button-row{padding-top: 15px;}
.contact-page .bootstrap-select .btn-default{height: 41px; padding-top: 6px; border: 1px solid #ebebeb; border-radius: 0; background: #fff; box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.05); -webkit-appearance: none;padding: 10px 10px;}

/*.contact-page .row{display:flex; align-items:flex-end;}*/
.contact-page .adress{background: #fff; padding: 35px 30px 25px 30px;position: static; bottom: 90px; left: 85px; margin-bottom:80px;}
.contact-page .adress h5{font-size: 16px; color: #283a8f; margin-bottom: 20px;}
.contact-page .adress ul{margin: 0;}
.contact-page .adress ul li{color:#898989; font-size: 16px;}
.contact-page .adress ul li:not(:last-child){margin-bottom: 10px;}
.contact-page .adress ul li span{color: #333; margin-left: 4px;}

@media screen and (max-width:1200px){
  .projects-listing .project-item p.category-label{font-size: 15px;}
  .listing-filter .filter{position: static; float:none;}
  .media-events .listing-filter{display: flex; justify-content: space-between;}
}
@media screen and (min-width: 992px){
  .listing-filter .filter-dropdown-toggle{display:none !important;}
  .listing-filter .filter-button-group{display: flex !important;}
}
@media screen and (max-width:991px){
  .listing-filter .filter-dropdown-toggle{display: block; border:solid 1px #e3e3e3; color:#283a8f; width:100%; margin:auto; text-align: center; padding: 8px 0px; position: relative;}
  .listing-filter .filter-dropdown-toggle:hover, .filter-dropdown-toggle:active, .filter-dropdown-toggle:focus{color:#283a8f; text-decoration: none;}
  .listing-filter .filter-dropdown-toggle:after{content:'\f107'; font-family: FontAwesome; position: absolute; right: 10px; font-size: 25px; color:#283a8f; top:50%; transform: translateY(-50%); }
  .listing-filter .filter-button-group{display: none;}
  .listing-filter .filter-button-group button{width:100%; border:0px; border-bottom: solid 1px #e3e3e3; min-width: none;}
  .projects-listing .project-item p.title{font-size: 18px;}

  .media-events .listing-filter{display: block;}
  .media-events .listing-filter .filter{margin-top:10px; display:flex; justify-content: center;}

  .media-events .media-item .media-detail .title{font-size:18px;}
  .new-details p img{max-width: 100%;}

  .project-details h1.secondary, .new-details h1.secondary{font-size: 22px;}
}
@media screen and (max-width:767px){
  .projects-listing .project-item .project-image img{width:100%;}
  .projects-listing .project-item p.title{font-size: 16px;}
  .projects-listing .project-item p.category-label{font-size: 14px; padding-top:4px; padding-bottom: 2px;}
  .media-events .media-item .media-detail .title{font-size: 16px;}
  .project-details .proj-info{display: flex; justify-content: space-between;}
  .project-details .proj-info ul{padding-left:0px;}
  .project-details  .proj-info ul li{display: block;}
}
@media screen and (max-width: 667px){
  .new-details p img{display: block; margin: auto; margin: 8px auto; float:none}
}
@media screen and (max-width:500px){
  .media-events .stack-on-500 > div, .new-details .stack-on-500 > div.media-item{text-align:left;}
  .project-details .proj-info{display: block;}
  .projects-listing .row{display: block;}
  .projects-listing .row > div{width: 100%; float:none;}
}
@media screen and (max-width:400px){
.projects-listing .row.grid > div{width:100%; float:none}
}

.grid-container{
  margin-bottom: 30px;
}

.category1 .thumbnail-overlay .media-box-title{
     height: 60px;
    overflow: hidden;
}
 

.projects-listing .project-item .project-caption{
  bottom: 0;
  transition-duration: 0.2s;
}

.projects-listing .project-item:hover .project-caption{
  bottom: 10px; 
}

.menunew ul li a:hover{
  color: #2b3992;
  font-weight: 700;
}

.short-desc p{
  text-align: justify !important;
}

.tab-content > .active { 
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.program-item .image-holder img{
  width: 100%;
}

.menunew div font{
  font-size: 18px;
    padding: 5px 5px 0px 5px;
}

a.back-main:hover{
  color: #273a8e;
  text-decoration: none
}

.white-style{
  color: #FFF;
}

.white-style .more-style{
    color: #FFF;
    font-weight: 100;
    font-size: 10px !important;
    margin-left: 10px;
}

.white-style:hover{
  color: #FFF;
  text-decoration: none;
}

.more-style2{
  color: #FFF;
  font-weight: 100;
  font-size: 10px !important;
}

.research-link:hover{
  text-decoration: none;
}

@media (min-width: 768px){
  #kisr-testimonials{
    overflow: hidden;
  }
}



@media screen and (max-width: 1190px) and (min-width: 768px) {
 .front-page  .container {
    width: 1169px !important;
  }
}

.zabuto_calendar{
    -webkit-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    box-shadow: 0px 0px 11px -1px rgba(0,0,0,0.16);
    background-color: #FFF;
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
}

/* new form css */
.selectboxnew{
  -webkit-appearance: listbox;
  color: #818892;
}

.width50{
  width: 50%;
}

.form-titlenew{
    font-size: 16px;
    line-height: 1.3;
    color: #313131;
    font-weight: 700;
}

.light-grey{
  color: #b8b8b8;
  font-size: 14px;
  font-style: italic;
}

.form-horizontal .control-label.label-new{
  margin-bottom: 10px;
  display: block;
}

.form-horizontal .form-new{
  margin-bottom: 10px;
}

.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.btn-file{overflow:hidden;position:relative;vertical-align:middle;}.btn-file>input{position:absolute;top:0;right:0;margin:0;opacity:0;filter:alpha(opacity=0);/*transform:translate(-300px, 0) scale(4)*/;font-size:23px;direction:ltr;cursor:pointer;}
.fileupload{margin-bottom:9px; position: relative; overflow: hidden;}.fileupload .uneditable-input{display:inline-block;margin-bottom:0px;vertical-align:middle;cursor:text;}
.fileupload .thumbnail{overflow:hidden;display:inline-block;margin-bottom:5px;vertical-align:middle;text-align:center;}.fileupload .thumbnail>img{display:inline-block;vertical-align:middle;max-height:100%;}
.fileupload .btn{vertical-align:middle;}
.fileupload-exists .fileupload-new,.fileupload-new .fileupload-exists{display:none;}
.fileupload-inline .fileupload-controls{display:inline;}
.fileupload-new .input-append .btn-file{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.thumbnail-borderless .thumbnail{border:none;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.fileupload-new.thumbnail-borderless .thumbnail{border:1px solid #ddd;}
.control-group.warning .fileupload .uneditable-input{color:#a47e3c;border-color:#a47e3c;}
.control-group.warning .fileupload .fileupload-preview{color:#a47e3c;}
.control-group.warning .fileupload .thumbnail{border-color:#a47e3c;}
.control-group.error .fileupload .uneditable-input{color:#b94a48;border-color:#b94a48;}
.control-group.error .fileupload .fileupload-preview{color:#b94a48;}
.control-group.error .fileupload .thumbnail{border-color:#b94a48;}
.control-group.success .fileupload .uneditable-input{color:#468847;border-color:#468847;}
.control-group.success .fileupload .fileupload-preview{color:#468847;}
.control-group.success .fileupload .thumbnail{border-color:#468847;}

.upload-btn{
  color: #141e63;
  font-size: 16px;
  text-decoration: none;
}

.upload-btn .fa{
  margin-right: 5px;
}

.form-control:active, .form-control:focus {
  border-color: #283a8f;
}

.form-new input:required,
.form-new textarea:required {
  /*border-color: #d88d8d !important;*/
}

.form-new .form-control{
     padding: 5px;
    font-size: 16px;
}

form.form-new .form-group{
    margin-bottom: 25px;
}

.form-titlenew2{
    font-size: 18px;
    color: #283a8f;
    font-weight: 500;
    margin-bottom: 20px;
}

.form-titlenew2 span{
      font-size: 16px;
    line-height: 1.3;
    color: #313131;
    font-weight: 500;
}

.form-new .input-group-addon{
    background: white;
        background: transparent;
    color: #adadad;
    border: 1px solid #ebebeb;
    border-left: 0px;
    border-radius: 0px;
}

.form-new .date{
    background: transparent;
}

.form-new .date .form-control{
    border-right: 0px;
}

.form-new .date .form-control:active,.form-new .date  .form-control:focus {
    border-color: #ebebeb;
}



/* material input css */

:root {
	--omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
	--omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
	--omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
	--omrs-color-interaction: #1e4bd1;
	--omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
	--omrs-color-danger: #b50706;
	--omrs-color-bg-low-contrast: #eff1f2;
	--omrs-color-ink-high-contrast: #121212;
	--omrs-color-bg-high-contrast: #ffffff;

}
/** END: Non Openmrs CSS **/
div.omrs-input-group {
  margin-bottom: 0;
  position: relative;
  width: 100%;
}

/* Input*/
.omrs-input-underlined > input,
.omrs-input-filled > input {
	border: none;
	border-bottom: 0.125rem solid var(--omrs-color-ink-medium-contrast);
	width: 100%;
	height: 40px;
	font-size: 16px;
	padding-left: 0.875rem;
	line-height: 147.6%;
	padding-top: 0.825rem;
	padding-bottom: 0.5rem;
}

.omrs-input-underlined > input:focus,
.omrs-input-filled > input:focus {
	outline: none;
}

.omrs-input-underlined > .omrs-input-label,
.omrs-input-filled > .omrs-input-label {
	position: absolute;
	top: 0.9375rem;
	left: 0.875rem;
	line-height: 147.6%;
	color: var(--omrs-color-ink-medium-contrast);
	transition: top .2s;
}


.omrs-input-underlined > .omrs-input-helper,
.omrs-input-filled > .omrs-input-helper {
	font-size: 0.9375rem;
	color: var(--omrs-color-ink-medium-contrast);
	letter-spacing: 0.0275rem;
	margin: 0.125rem 0.875rem;
}

.omrs-input-underlined > input:hover,
.omrs-input-filled > input:hover {
	background: var(--omrs-color-interaction-minus-two);
	border-color: var(--omrs-color-ink-high-contrast);
}

.omrs-input-underlined > input:focus + .omrs-input-label,
.omrs-input-underlined > input:valid + .omrs-input-label,
.omrs-input-filled > input:focus + .omrs-input-label,
.omrs-input-filled > input:valid + .omrs-input-label {
	top: -10px;
	font-size:12px;
	margin-bottom: 32px;
    background: white;
    padding: 0px 5px
}

.omrs-input-underlined:not(.omrs-input-danger) > input:focus + .omrs-input-label,
.omrs-input-filled:not(.omrs-input-danger) > input:focus + .omrs-input-label {
	color: var(--omrs-color-interaction);
}

.omrs-input-underlined:not(.omrs-input-danger) > input:focus,
.omrs-input-filled:not(.omrs-input-danger) > input:focus {
	border-color: var(--omrs-color-interaction);
}

.omrs-input-underlined:not(.omrs-input-danger) > input:focus ~ svg,
.omrs-input-filled:not(.omrs-input-danger) > input:focus ~ svg {
	fill: var(--omrs-color-ink-high-contrast);
}

/** DISABLED **/

.omrs-input-underlined > input:disabled {
	background: var(--omrs-color-bg-low-contrast);
	cursor: not-allowed;
}

.omrs-input-underlined > input:disabled + .omrs-input-label,
.omrs-input-underlined > input:disabled ~ .omrs-input-helper{
	color: var(--omrs-color-ink-low-contrast);
}

.omrs-input-underlined > input:disabled ~ svg {
	fill: var(--omrs-color-ink-low-contrast);
}


/** DANGER **/

  .omrs-input-underlined.omrs-input-danger > .omrs-input-helper,
.omrs-input-filled.omrs-input-danger > .omrs-input-label, .omrs-input-filled.omrs-input-danger > .omrs-input-helper{
	color: var(--omrs-color-danger);
}

.omrs-input-danger > svg {
	fill: var(--omrs-color-danger);
}

.omrs-input-danger > input {
	border-color: var(--omrs-color-danger);
}

.omrs-input-underlined > input {
	background: var(--omrs-color-bg-high-contrast);
    border: 1px solid #ebebeb;
        box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.05);
        color: #555555;
}


.omrs-input-filled > input {
	background: var(--omrs-color-bg-low-contrast);
}

.omrs-input-group label{
    width: 100%;
    margin: 0px;
}





.form-check label{
	position: relative;
	cursor: pointer;

	font-size: 16px;
}

.form-check input[type="checkbox"], input[type="radio"]{
	position: absolute;
	right: 9000px;
}


/*Radio box*/

.form-check input[type="radio"] + .label-text:before{
	content: "\f10c";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing:antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
}

.form-check input[type="radio"]:checked + .label-text:before{
	content: "\f192";
	    color: #283a8f;
	animation: effect 250ms ease-in;
}

.form-check input[type="radio"]:disabled + .label-text{
	color: #aaa;
}

.form-check input[type="radio"]:disabled + .label-text:before{
	content: "\f111";
	color: #ccc;
}


.time {
  width: 50%;
  min-width: 200px;
  margin: 25px auto;
}
.time__heading {
  text-align: center;
  color: #fff;
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}
.time__input {
  width: 100%;
}
.time__input .timepicker {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  font-weight: 500;
  text-align: left;
  color: #818892;
  outline: none;
    border: 1px solid #ebebeb;
    box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.05);
}

div[id^="tp_"].timepicker__wrapper {
  opacity: 0;
  height: auto;
  min-width: 150px;
  max-height: 0px;
  overflow: hidden;
  position: absolute;
  -webkit-transition: max-height .1s ease-in-out;
  transition: max-height .1s ease-in-out;
  background: #F4F5F7;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e5), color-stop(7%, #efefef), to(#f4f5f7));
  background: linear-gradient(to bottom, #e3e3e5 0%, #efefef 7%, #f4f5f7 100%);
  border-radius: 0px 0px 5px 5px;
  border: 2px solid #303233;
  border-top: transparent;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
  text-align: center;
    z-index: 99
}
div[id^="tp_"].timepicker__wrapper * {
  box-shadow: border-box;
}
div[id^="tp_"].timepicker__wrapper-active {
  opacity: 1;
  max-height: 100px;
  padding: 0px;
}
div[id^="tp_"].timepicker__wrapper-full > div {
  width: 33% !important;
}
div[id^="tp_"].timepicker__wrapper > div {
  margin: 0px;
  padding: 0px;
  display: inline-block;
  text-align: center;
  width: 50%;
  max-width: 75px;
}
div[id^="tp_"].timepicker__wrapper > div .display {
  color: #303233;
  font-size: 25px;
  font-weight: 100;
  line-height: 30px;
  margin: 0px;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
div[id^="tp_"].timepicker__wrapper > div .timepicker__button {
  margin: 5px auto;
  padding: 0px;
  background: #fff;
  cursor: pointer;
  background: transparent;
  border: solid 5px transparent;
}
div[id^="tp_"].timepicker__wrapper > div .timepicker__button__up > div {
  width: 0px;
  height: 0px;
  margin: auto;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  border-bottom: solid 5px #303233;
}
div[id^="tp_"].timepicker__wrapper > div .timepicker__button__down > div {
  width: 0px;
  height: 0px;
  margin: auto;
  border-left: solid 5px transparent;
  border-right: solid 5px transparent;
  border-top: solid 5px #303233;
}


@keyframes effect{
	0%{transform: scale(0);}
	25%{transform: scale(1.3);}
	75%{transform: scale(1.4);}
	100%{transform: scale(1);}
}


input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

@media (min-width: 768px){
.grid-container{
  min-height: 500px
}
}