/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.krub-regular {
  font-family: "Krub", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.krub-bold {
  font-family: "Krub", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.krub-light-italic {
  font-family: "Krub", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.krub-regular-italic {
  font-family: "Krub", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.krub-bold-italic {
  font-family: "Krub", sans-serif;
  font-weight: 700;
  font-style: italic;
}




.page-holder {
  min-height: 80vh;
}

.page-holder2 {
  min-height: 500px;
}

.bg-cover {
  background-size: cover !important;
}

.bg-transparent { transition: all .4s ease-in-out; }
.bg-transparent.shrink { background-color: #282c66 !important;transition: all .4s ease-in-out; }

h1.line { border-bottom:1px solid #A9A9A9; padding-bottom:10px; margin-bottom:20px; }
h1.article-title { text-shadow: 0px 0px 5px #57575773; }
h2 a { color:#000; margin-top: 10px; display: block; }

.category { border:1px solid #A9A9A9; padding:5px 10px; display: inline-block; }

header { background-color: #282c66; color: #fff; height: 100px; }
footer { background-color: #282c66; color: #fff; }
footer a, footer a:hover { color: #fff; }
a.nav-link { color:#fff; }
a.nav-link:hover { color:#fff; }

.sidenavcontainer {
  padding: 40px;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  background-color: #282c66!important;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  box-shadow: 0px 0px 8px #888888;
}

.sidenav a {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  transition: 0.3s;
  border-bottom: 1px solid #fff;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav::-webkit-scrollbar { 
  display: none; 
}

.bg-none { background-color:#282c66; }


  .animated-icon {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  }
  
  .animated-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  }
  
  .animated-icon span {
  background: #f3e5f5;
  }
  
  .animated-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  }
  
  .animated-icon span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  }
  
  .animated-icon span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  }
  
  .animated-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 8px;
  }
  
  .animated-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
  }
  
  .animated-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 21px;
  left: 8px;
  }
  button {border:none !important;}
  button:focus{outline: none;}

  .center {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    vertical-align: middle;
  }



  /* [1] The container */
  .img-hover-zoom {
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }

  /* [2] Transition property for smooth transformation of images */
  .img-hover-zoom img {
    transition: transform .5s ease;
  }

  /* [3] Finally, transforming the image when container gets hovered */
  .img-hover-zoom:hover img {
    transform: scale(1.3);
  }

  .image-grid-item { border-width:2px 1px 2px 1px; border-style:solid; border-color: #fff; }
  .image-grid-item:first-child { border-left:0; }
  .image-grid-item:last-child { border-right:0; }
  .image-grid-cover {
    width: 100%;
    background-size: cover;
    height: 100%;
    min-height: 180px;
    position: relative;
    margin-bottom: 30px;
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
    border-radius: 4px;
}
.image-grid-clickbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgba(0,0,0,.45);
}
.cover-wrapper {
    font-size: 18px;
    text-align: center;
    display: block;
    color: #fff;
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
    z-index: 21;
    position: relative;
    top: 46%;
}
a, a:focus, a:hover {
  text-decoration: none;
  outline: 0;
}





/* article_list */
.info, .info2 {
  position: relative;
  margin: -40px 15px 0 15px;
  padding: 12px;
  background-color: #fff;
  display: block;
  z-index: 20;
}
.info2 { margin-top:0px; }
.icon {
  font-size:12px;
}
.category {
  color: rgb(17, 31, 57);
  font-size:14px;
}
h3.article_title { margin-top:15px; }



/* timeline */
.milestone { background-color:#001a70; color:#fff; }
.milestone h1 { border-color: #fff; }
.milestone .border-right { border-color:#fff !important; }

.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left; }
.MultiCarousel .MultiCarousel-inner .item > div { padding:10px; margin:10px; }
.MultiCarousel .leftLst, .MultiCarousel .rightLst { background:#8D7535; position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#8D7535; }

.relative { position: relative; }
.over-image { position: absolute; top: 5px; left: 20px; z-index: 999; background-color: #fff; }
.year { color: #8d7535; font-size:16px; }

.language, .language a { color:#fff; }

a.active { color:#8d7535; }