body {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: 'Short Stack', cursive;
}

a {
  text-decoration: none !important;
}

.navbarListe {
  white-space: normal;
}

input::placeholder {
  font-size: 0.7em;
}

textarea::placeholder {
  font-size: 0.7em;
}

select {
  font-size: 0.7em;
}

#backAuth {
  position: absolute;
  top: 10;
  left:20;
  font-size: 40px;
}

#menu {
  position: absolute;
  width: 100%;
  -background-image: url('../img/mooc/branche-simple.png');
  -background-size: cover;
  -background-position: center;
  top: 10%;
  left: 7%;
}

#iframe_accueil {
  position: absolute;
  top:5vh;
  left:5vw;
  width: 90vw;
  height: 90vh;
}

.modal-dialog-index {
  min-width: 90% !important;
  height: 100% !important;
  margin: auto !important;
  padding: 0!important;
}

.modal-content-index {
  height: auto !important;
  min-height: 100% !important;
  border-radius: 0 !important;
}

.close_modal_index {
  position: absolute;
  top: 5px;
  right: 5px;
}

.close_modal_index:hover{
  cursor: pointer;
}


.ongletMenu{
  width: 22%;
  white-space: wrap;
}

.feuilleMenu {
  transform: rotate(120deg);
}

.text_onglet {
  white-space: wrap;
}

#titleHome {
    width: 100%;
    min-height: 15vh;
}

#titleHome_void {
  width: 100%;
  min-height: 15vh;
}

#skipVideo {
  position: absolute;
  top: 5;
  right: 0;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 1.2em;
}

.text_vert {
  color: #409547;
}

.text_vert_fonce {
  color: #215E34;
}

.text_violet {
  color: #22234F;
}

.text_rouge {
  color: #D12229;
}

.text_bleu {
  color: #24224D;
}

.bold_text {
  font-weight: 900;
}

.iconeSize {
  font-size: 30px;
}

.iconeFeuille {
  width: 75px;
}

.petit_text {
  font-size: 0.7em;
}

.gros_text
{
  font-size: 1.1em;
}

.moyen_text {
  font-size: 0.8em;
}

.normal_text {
  font-size: 0.9em;
}

.inputLogin {
  background-color: #E6F5FD;
  border: black solid 2px;
  border-radius: 0;
}

.collapseDivLink:hover {
  cursor: pointer;
}

.collapseDown {
  transform: rotate(0deg);
}

.categorieP {
  width: 100%;
}

.titre_categorie::first-letter {
  font-size: 170%;
  text-transform: uppercase;
}

.categorieContainer {
  height: 50vh;
  overflow: scroll;
  overflow-x: hidden;

}

.categorieContainerX {
  overflow-x: hidden;
}

.prevPage {
  margin-right: 10px;
  transition: 0.3s ease;
}

.homePage {
  margin-right: 10px;
  transition: 0.3s ease;
}

.homePage:hover {
  cursor: pointer;
  color: #215E34;
  transform: scale(1.1);
}

.homePageLeftTop {
  position: absolute;
  top: 5px;
  left: 20px;
  z-index: 2000;
}

.prevPage:hover {
  cursor: pointer;
  color: #215E34;
  transform: scale(1.1);
}

.preloader {
		position: absolute;
		top: 50%; left: 50%;
  	transform: translate(-50%, -50%); 
	}

.thumbnail {
		width: 100%;
}

.blackboard {
  background-image: url('../img/mooc/tableau.jpg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#liste_presentation {
  margin: 0 !important;
  padding: 0 !important;
}

#presentation_mooc_wrapper {
  height: 60vh;
  overflow-y: scroll;
}


#play_intro_video:hover {
  cursor: pointer;
}


.blackboardProduction {
  background-image: url('../img/mooc/tableau.jpg');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.slide-production {
  height: 50vh !important;
  overflow-y: scroll;
}

#formCollapseAuth {
  display: none;
}

#collapseDiv3 {
  display: none;
}

.preloaderVideo {
  display: none;
  position: absolute;
  height: 300%;
  width: 100%;
  top:0;
  left:0;
  z-index: 2;
  background-color: rgba(0,0,0,0.7);
}

#preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation-delay: 1s;
  position: absolute;
  top:10%;
  left:50%;
  transform: translate(-50%, -50%);
}

.item-1 {
  width: 20px;
  height: 20px;
  background: #f583a1;
  border-radius: 50%;
  background-color: #eed968;
  margin: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
    75% {
    transform: scale(2.5);
  }
  78%, 100% {
    opacity: 0;
  }
}
.item-1:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eed968;
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 200ms;
  transition: 0.5s all ease;
  transform: scale(1);
}

.item-2 {
  width: 20px;
  height: 20px;
  background: #f583a1;
  border-radius: 50%;
  background-color: #eece68;
  margin: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
    75% {
    transform: scale(2.5);
  }
  78%, 100% {
    opacity: 0;
  }
}
.item-2:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eece68;
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 400ms;
  transition: 0.5s all ease;
  transform: scale(1);
}

.item-3 {
  width: 20px;
  height: 20px;
  background: #f583a1;
  border-radius: 50%;
  background-color: #eec368;
  margin: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
    75% {
    transform: scale(2.5);
  }
  78%, 100% {
    opacity: 0;
  }
}
.item-3:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eec368;
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 600ms;
  transition: 0.5s all ease;
  transform: scale(1);
}

.item-4 {
  width: 20px;
  height: 20px;
  background: #f583a1;
  border-radius: 50%;
  background-color: #eead68;
  margin: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
    75% {
    transform: scale(2.5);
  }
  78%, 100% {
    opacity: 0;
  }
}
.item-4:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eead68;
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 800ms;
  transition: 0.5s all ease;
  transform: scale(1);
}

.item-5 {
  width: 20px;
  height: 20px;
  background: #f583a1;
  border-radius: 50%;
  background-color: #ee8c68;
  margin: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
    75% {
    transform: scale(2.5);
  }
  78%, 100% {
    opacity: 0;
  }
}
.item-5:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ee8c68;
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  animation-delay: 1000ms;
  transition: 0.5s all ease;
  transform: scale(1);
}

@media screen and (max-width: 480px)
{
    body {
      background-image: none !important;
      background-color: white;
    }

    #titleHome {
      height: 50%;
    }

    #titleHome_void {
      display: none !important;
    }
}

@media print {
  nav {
    visibility : hidden;
  }

.noPrint {
  visibility : hidden;
  }
}


.categorieContainer::-webkit-scrollbar {
  width: 0.8em;
}

/* Track */
.categorieContainer::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.categorieContainer::-webkit-scrollbar-thumb {
  background: #5b9b54; 
  border-radius: 10px;
}

/* Handle on hover */
.categorieContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(91,155,84,0.7); 
}

/*.slide-production::-webkit-scrollbar {
  display: none;
}*/