
$content-heading-color: #d0cba4  
@import "~bulma"

// Config vars
// Kaldi logo brand color: #FD461E
$kaldi-red: #5693ef
$kaldi-red-invert: #fff

$primary: $kaldi-red
$primary-invert: $kaldi-red-invert
$body-color: #333
$black: #2b2523
$footer-background-color: #4a4a4a

$tone1: #c9b96e 
 
// @import url("https://fonts.googleapis.com/css?family=Open+Sans");
// @import url('https://fonts.googleapis.com/css?family=Lato:300|Roboto|Source+Sans+Pro&display=swap');




ul
  margin: 1em;


li
  list-style-type: square;
  padding: 0.4em;

 


.gatsby
  height: 100%


  
.content
  margin: auto;


strong 
  color: #d0cba4;
 




.title
  color :#d0cba4
  // color: #c9b96e 

// .content h5
//   color: $tone1


img
  max-width: unset; 

.newsbox:hover
  box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  filter: grayscale(0)
 
.newsbox
  filter: grayscale(0.1)
  border-radius: 0px
  padding: 0px


.notification
  border-radius: 0px
  
 
.notification a:not(.button):not(.dropdown-item)
  text-decoration: none

.section-break
    height: 4px;
    margin: auto;
    background: #d7d7d7;
    margin-bottom: 30px
    margin-top: 15px

.section
  background: #272727;
  // background: url(http://localhost:8000/img/bg2.png);
  // background-size: auto;
  color: lightgrey;
  // box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
  padding: 2rem 1.5rem;  


  // filter: grayscale(70%);
 


// /* The Transformation */
// .team-item:hover img 
//   filter: grayscale(0%); 
//   border-radius: 50%;
//   filter: grayscale(0); 
//   transform: scale(1.1);








  
.navbar.is-fixed-top
  z-index: 2


.headroom 
  top: 0
  left: 0
  right: 0

.headroom--unfixed 
  position: relative;
  transform: translateY(0);


.headroom--scrolled 
  transition: transform 200ms ease-in-out;


.headroom--unpinned 
  position: fixed;
  transform: translateY(-100%);


.headroom--pinned 
  position: fixed;
  transform: translateY(0%);


.copyright-text
  color: 'grey'
  text-decoration: none
 
footer.footer 
  background-color:#4a4a4a
  padding: 2rem 0rem 0rem

.my-masonry-grid
  display: -webkit-box 
  display: -ms-flexbox
  display: flex
  // margin-left: -10px
  width: auto
  

.my-masonry-grid_column
  // padding-left: 10px
 
  background-clip: padding-box


// Style your items
.my-masonry-grid_column > div
    padding: 0px



.page-header
  font-size: 2rem

.sticky
  position: fixed !important
  top: 0
  width: 100%


.navbar-start
  margin-right: 0px !important
  margin-left: auto !important

.navbar
 
  background: #212121;
  
  // background: #eaeaea;
  // background-color: rgb(255, 255, 255);
  // outline: solid #b7b28a 2px;
  // box-shadow: 0px 1px 3px -1px #7b7451;
  transition: background-color .15s linear
  height: 206px
  font-size: 20px
  left: 0;
  right: 0;

  z-Index: 9999999
  

// section
//   background: url("/img/bg2.png")

.clientsph
  border: solid white 1px 
  border-radius: 4px 
  width: 200px 
  height: 200px
  margin: 20px
  display: inline-block


// .bg3 
//   border: solid #c9b96e  3px
  
 

.landingimgph
  border: solid white 1px
  width: 100% 


// .subnav
//   background: url("/img/bg2.png")
//   height: 125px;
//   // background: transparent;
//   // background: url("/img/waranont-joe-EZwBNdnIlpo-unsplash.jpg")
//   background-attachment: fixed;
//   background-size: auto;


.input
  background: #eeeeee;


.label
  color: #c1bea9;
 
.hero-content
  background: #212121f0;
  padding: 1.5rem;
  box-shadow:  0 0 0 2px #b9b9b9;


.hero-2
  // background: url("/img/waranont-joe-EZwBNdnIlpo-unsplash.jpg")
  // background-attachment: fixed;
  // background-size: contain; 
  background: transparent;
  padding: 0
  height: 569px;

.hero
  // background: url("/img/bg2.png")
  // background-attachment: fixed; 
  // background-repeat: round;
  background-size: auto;

.navbar .navbar-menu
  box-shadow:none !important
  align-self: center

.navbar-brand
  align-self: center

// a.navbar-item
//   color: white
//   height: fit-content
//    font-family: 'Playfair Display', sans-serif;
//   color: #cfcfcf;
//   // color: #696969;


// a.navbar-item:hover
//   color:#a09662  




.landing-container
    // background: #181818;
    padding: 30px;
    margin: auto;
    margin-top: 50px;
    width: 100em;


.is-dark
  background-color: #4a4a4a



.content .taglist
  list-style: none
  margin-bottom: 0
  margin-left: 0
  margin-right: 1.5rem
  margin-top: 1.5rem
  display: flex
  flex-wrap: wrap
  justify-content: left
  align-items: center
  li
    padding: 0 2rem 1rem 0
    margin-bottom: 1.5rem
    margin-top: 0

// Helper Classes
.full-width-image-container
  width: 100vw
  height: 200px
  position: relative
  left: 50%
  right: 50%
  margin: 2em -50vw
  background-size: cover
  background-position: bottom
  display: flex
  justify-content: center
  align-items: center

.full-width-image
    width: 100vw
    height: 200px
    background-size: cover
    background-position: bottom
    display: flex
    justify-content: flex-start
    align-items: center

.btn
    display: inline-block;
    padding: 12px 16px 10px;
    font-size: 18px;
    font-size: 2.5rem;
    line-height: 1.25;
    background-color: #212121ad;
    /* border-radius: .25rem; */
    text-decoration: none;
    font-weight: 700;
    color: #c9b96e ;
    text-align: center;
    box-shadow: inset 0 0 0 2px #b9b9b9;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;

.btn:hover
  background: #c9b96e 
  box-shadow: inset 0 0 0 2px #c9b96e 


.parallax-bg
  height: 100%;
  background: url("/img/bg2.png");

embed, object, iframe
  max-width: 100%;

.margin-top-0
  margin-top: 0 !important


.navbar-item img 
    max-height: 90px;


.navbar-item .icon
  color: $primary
// Override for use of svg's from https://simpleicons.org/
.icon svg
  width: 1.5rem
  height: 1.5rem
  fill: currentColor
.navbar-brand .navbar-item.logo
  padding: 0 1rem

  

.left 
  float: left;

.right
  float: right;


//Menu overrides
$menu-item-color: $white-ter
$menu-item-hover-color: $black !important
$menu-item-hover-background-color: $black
$menu-item-active-color: $kaldi-red-invert
$menu-item-active-background-color:	$kaldi-red-invert
$menu-list-border-left: 1px solid $kaldi-red-invert
$menu-label-color: $white-ter



.menu-label
  font-size: 1em !important
  text-align: left
.menu-list
  list-style: none !important
  text-align: left
.social
  padding: 2em
.social a
    padding: .5em .5em .3em .5em
    border-radius: 1em
    background-color: $white-ter
    margin: .5em
    width: 1em
    height: 1em
    vertical-align: middle
    display: inline

// News roll
.News-list-item.is-featured
  // background-color: #d6400033;
// .News-list-item header
//   display: flex;
//   margin-bottom: 1em;
.News-list-item .featured-thumbnail
  flex-basis: 35%;
  margin: 0 1.5em 0 0;





// responsiveness
+tablet-only
  .News-list-item .featured-thumbnail
    flex-basis: 50%;

+mobile
  .News-list-item header
    display: block
  .News-list-item .featured-thumbnail
    text-align: center;
    max-width: 70%;
    margin: 0 0 1em;
