/* order execution */
/* 
/* nav-link2 si important */
/*.nav-link2 {
  color : yellow !important;
}*/

/*
.navbar-light .navbar-nav .nav-link2 {
  color : yellow !important;
}
.navbar-light .navbar-nav .nav-link2:hover {
  color: red;
}

.navbar-light .navbar-nav .nav-link {
  color : green;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: red;
}*/

/*
.navbar-light .navbar-nav .nav-link {
  color : green;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: red;
}
.navbar-light .navbar-nav .nav-link2 {
  color : yellow;
}
.navbar-light .navbar-nav .nav-link2:hover {
  color: red;
}
*/

.btn-primary-override:hover
{
    background-color: #a3c614;
    border-color: #a3c614;
}
.btn-primary-override
{
    background-color: #a3c614;
    color: #FFF;
    border-color: #a3c614;
    height: 32px;
    padding-top: 2px;
    border-bottom-left-radius:7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius:7px;
    border-top-right-radius: 7px;
}

.btn-primary-override-features:hover
{
    background-color: #a3c614;
    border-color: #a3c614;
}
.btn-primary-override-features
{
    background-color: #a3c614;
    color: #FFF;
    border-color: #a3c614;
    height: 25px;
    padding-top: 2px;
    border-bottom-left-radius:7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius:7px;
    border-top-right-radius: 7px;
}

.navbar-light .navbar-nav .nav-link{
  color :black;
  font-weight: 600;
}
.navbar-light .navbar-nav .nav-link:hover {
  color : #a3c614;
}

/*
.dropdown-toggle {
 color : blue;
}
.dropdown-toggle:hover {
  color: red;
}
*/
/*
.dropdown-item {
  color :blue;
}

.dropdown-item:hover {
  color: red;
}*/

/* native code bootstrap css */
/*
    @include hover-focus {
      color: $navbar-light-hover-color;
    }

    &.disabled {
      color: $navbar-light-disabled-color;
    }
*/
  
/* La force du padding 
https://www.jquery-az.com/bootstrap-margin-padding-classes-spacing-explained-5-examples/ */

/*
Caroussel
https://stackoverflow.com/questions/48311855/how-to-position-carousel-indicators-in-bootstrap-4?rq=1
https://stackoverflow.com/questions/45914872/vertically-center-text-in-bootstrap-carousel?rq=1
https://stackoverflow.com/questions/27279865/how-to-vertically-center-a-bootstrap-carousel-caption
*/
.col-pixel-width-100 { flex: 0 0 500px; }

.carousel-item-img-crop-center {

   position: absolute;
   top: 50%;
   left: 50%;
   width: auto;
  height: 100%;
   z-index: 0;
   -ms-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
}

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.carousel-button-center {
  text-align:center;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity .5s;
  /*background: rgba(90,0,10,0.4);*/
  color: white;
  
  /* position the text in t’ middle*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-button-home-mob {
  text-align:center;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 250px;
  left: 0;
  opacity: 1;
  transition: opacity .5s;
  /*background: rgba(90,0,10,0.4);*/
  color: white;
  
  /* position the text in t’ middle*/
  /*display: flex;*/
  align-items: center;
  justify-content: center;
}

/* work, life, schools, social media... */
.carousel-button-page-mob {
  text-align:center;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  /*inline -> top: ???px;*/
  left: 0;
  opacity: 1;
  transition: opacity .5s;
  /*background: rgba(90,0,10,0.4);*/
  color: white;
  
  /* position the text in t’ middle*/
  /*display: flex;*/
  align-items: center;
  justify-content: center;
}

.carousel-caption-home-mob {
  text-align:center;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 75px;/* ou alors top:125px avec .carousel-caption */
  left: 0;
  opacity: 1;
  transition: opacity .5s;
  /*background: rgba(90,0,10,0.4);*/
  color: white;
  
  /* position the text in t’ middle*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-caption-page-mob {
  text-align:center;
  font-size: 1.5em;

  text-decoration: none;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;

  /* inline -> bottom: 25px;*//* ou alors top:125px avec .carousel-caption */
  left: 0;
  opacity: 1;
  transition: opacity .5s;
  /*background: rgba(90,0,10,0.4);*/
  color: white;
  
  /* position the text in t’ middle*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-item {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/*
.carousel-item {
  height: 520px;
}*/

.carousel-item-img-overlay {
  position:absolute;
  top:0%;
  left:0;
  width:100%;
  height:100%;
  text-align:center;
  background: rgba(0, 0, 0, .3);
}
/*
.carousel-item-img-overlay {
  position:absolute;
  z-index:0;
  top:0%;
  left:0;
  width:100%;
  height:100%;
  //text-align:center;
  background: rgba(0, 0, 0, .3);
}*/

.carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
/*
.main-text
{
    position: absolute;
    top: 50px;
    width: 100%;
    color: #FFF;
}


.btn-carousel-kizoa {
  position:absolute;
  top: 50%;
  left: 50%;
}*/

/*
.carousel-overlay { 
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
}*/

/* Home */
/*
.home-carousel-overlay { 
position:absolute;
    z-index:1;
    top:70%;
    left:70%;
}*/

/*
https://stackoverflow.com/questions/47394638/css-change-position-of-buttons-on-bootstrap-navbar

By default the .nav on the .navbar component relies on hyperlinks for its navigation. Those hyperlinks have padding defined by Bootstrap's CSS to properly space each item in relation to the .navbar-brand.

Since you are using <button> elements you will need to add your own CSS, such as the following:

.navbar-nav .btn {
  margin-top: 8px;
}
*/

/* Accordion collapse
/*
/* With JS, not working
/* https://codepen.io/nhembram/pen/XKEJJp */
/*
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Icons';
   content: "\e034";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} */

/* https://bootstrapious.com/p/accordion-with-chevron-up-down
/* https://jsfiddle.net/5jozqmk6/2/
/* Working with correction without top: 50%; */

.collapsible-link
{
  color:red;
}

.collapsible-link::before {
  content: '\e034';
  position: absolute;
  /*top: 50%;*/
  top:25px;
  right: 5%;/*5px;*/
  transform: translateY(-50%);
  display: block;
  font-family: 'Icons';
  font-size: 16px;/*1.1rem;*/
  transition: all 0.5s;
}

.collapsible-link[aria-expanded='true']::before {
  content: '\e037';
}