@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body{
  overflow: auto;
  font-family: 'Lato', sans-serif;
  color: black;
  height: 100%;
  background-color: rgb(251, 251, 251);
  margin:0px !important;
  padding:0px !important;
}



html{
  position: relative;
  min-height: 100%;
  margin:0px !important;
  padding:0px !important;
}






.loginbox{
text-align: center;
}




/*------Landing Page----*/




.home-inner {
  background-image: url(img/banner.jpg);
  background-size: 100%;
}

.caption{
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 20%;
  z-index: 1;
  color: white;
}

.caption h1 {
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: .3rem;
  text-shadow: .1rem .1rem .8rem black;
  padding-bottom: 1rem;
  min-height: 100%;
}

.caption h3{
  font-size: 2rem;
  text-shadow: .1rem .1rem .5rem black;
  padding-bottom: 1.6rem;
}

.banniere_button{
    /*background:#0D7EFF ;*/
    background:#0D7EFF;
    font-size: 1.2rem;
    color: white;
    /*text-shadow: .05rem .05rem .8rem black;*/
    font-weight: 700;
    margin-top: 5px;
    margin-left: 30px;
    border-width: 2px;
    /*border-color: #0D7EFF;*/
    border-color: #0D7EFF;
    border-width: 2px;
    border-radius: 10px;
}



.btn-success{
  background: green ;
  color: white;
}
.btn-sm{
    background:#0D7EFF ;
    color: white;
}


btn-success{
    background-color:#0D7EFF ;
    color: white;
}

.banniere_button:hover{
  background: none;
  color: white;
  border-color: white;
}

/*------End of Landing Page----*/


.lead a {
  color: green;
  text-decoration: none;
}

.collapse h3{
  color: #0D7EFF;
}









.form-control:hover{
  border-color: #0D7EFF;

}

form{
  
}

/*============= Info SECTION =============*/

.narrow {
  width: 100%;
  margin: 1.5rem auto;
  
}
.narrow h1 {
    font-size: 3rem;
  }
.btn-secondary {
  border-width: medium;
  border-radius: .3rem;
  padding: .6rem 1.2rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 1rem;
  border-color: rgb(233, 236, 239);
  background-color: rgb(233, 236, 239);
  color: white;
}
.btn-secondary:hover,
.btn-secondary:focus {
  border-color: #2e8dfa;
  background-color: #2e8dfa;
  color: white;
}

#show_room {
  background-color: white;
}

.icon_message{
  height: 100px;
  width: 100px;
}

.icon_tuto{
  height: 150px;
  width: 150px;
}

.text_tuto{
  /*color: rgb(156, 156, 156);*/
  color: black;
  font-size: 1.2rem;
}

.text_tuto_ban{
    font-size: 1.2rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
    min-height: 100%;
}

.icon_send{
  height: 30px;
  width: 40px;
}

.envoyer{
  text-align: right;
}


#icon{
  padding: 10px;
}


/*---------Comment sa marche-----------*/

.titre_marche{
  text-align: center;
}

.contain_info {
  border-width: 3px;
  border-color: black;
}

@media (max-width: 1000px){
  .bye{
    display: none;
  }
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/


.big-banner{
  height: auto;
  background-image: url(../../img/banner.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  color: white;
  max-width :100%
}



.big-banner h1 {
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: .3rem;
  text-shadow: .1rem .1rem .8rem black;
  padding-bottom: 1rem;
  min-height: 100%;
}

.big-banner h3{
  font-size: 2rem;
  text-shadow: .1rem .1rem .5rem black;
  padding-bottom: 1.6rem;
}

.center{
  padding-top: 130px;
  padding-right: 30px;
  padding-left: 30px ;
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
}
.haha{
  padding: 20px;
}