@import url('https://fonts.googleapis.com/css?family=Exo+2:600');
html
{
     overflow-y: scroll;
    scrollbar-color: #ff6600 #343a40 ;
    scrollbar-width: wide; 
    size: 50px;
}

body
{
    background-color: blue;
    background: #ffffff;
    font-family:'Exo 2', sans-serif, Verdana;
    font-size: 1em;
  
}

.navbar
{
    background-color:  #343a40;
    font-size:16px;
    padding: 0 20 0 ;
    letter-spacing: 1px;
    box-shadow: 0px 3px 5px  #ff6600;
    color: #ff6600;
}
 
.navbar-toggler {
  border: none;
  background: transparent !important;
}

.navbar-toggler:focus {
  outline: none;
  background: transparent !important;
}

.navbar-toggler .icon-bar {
  background-color: #ff6600;
  transform: rotate(0deg) translate(0px, 0px);
  transition: ease all .2s;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggler .icon-bar+.icon-bar {
  margin-top: 4px;
}

.icon-bar:nth-child(2) {
  width: 16px;
  transition: ease all .2s;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
  width: 22px;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 4px);
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0;
  transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
  transition: ease all .2s;
}

.sec-accent {
  background-color: #fafcf5;
}

.blue {
  background-color: #9999cc;
}

.navbar-brand 
{
  color: #ff6600;  
}

.navbar-brand:hover
{
   
  color: #ff6600;    
    
}

.nav-link
{
   
    color: #ffffff;
    margin-left:1em;
} 

.nav-link:hover
{
    /*background-color:  #ff6600;*/
    color: #ff6600;
    height:40px;
    border-radius: 2px
     
} 

.nav-link:active
{
    background-color:  #343a40;
    color: snow;
    height:40px
     
} 


/********************************  *********************************/


h1
{
    color:  #343a40;  
    text-align: center;
    font-size: 2em;  
     margin-bottom: 2rem;
}

h2
{
    color:   #343a40;  
    text-align: left;
    font-size: 1.2em;  
}

h3
{
    color:   #ff6600;  
    text-align: left;
    font-size: 1.2em;  
   
}

hr {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 3px solid  #ff6600;
    width:0px;
    size:0em;
}


#section-espace
{
 height:  50px;
}

#section-logiciels
{
    background: #fff;    
}


.block-logiciels
{
   width: 80%;
   margin: 30 auto;
   text-align: center;
   background: #fff;
   border-radius: 10px;
   border: 0 px solid #ff6600;
   border-top:0;
   margin-bottom: 20px ;   
 /*  box-shadow: 2px 2px 2px 2px  #343a40;*/
}


.block-logiciels h5
{
   color:#ffffff;
   font-size:15px;
  /* margin-top: 0.5rem;*/
   background: #343a40;
   height:2em;
   padding-top: 0.3em;
   /*border: 0.1em solid  #ff6600 ;*/
    box-shadow: 0px 3px 3px  #ff6600;
} 
.block-logiciel
{
   margin: 0 auto;
   font-size:12px;
   padding: 0 15 20;
}

.block-logiciel img
{
    margin-top: 5px;
}

.block-scripts
{
   width: 80%;
   margin: 30 auto;
   background: #fff;
   border-radius: 10px;
   border: 0px solid #007777;
   margin-bottom: 20px  ;
 
}

.block-scripts a
{
    float: right;
}

.block-script
{
    margin: 0 auto;
    font-size:1em;
    heigth: 1em;
    overflow: scroll;
}
.block-outil 
{
    width: 80%;
    margin: 30 auto;
    margin-left:0.5em;
    font-size:1em;
    background: #fff;
   /* border-radius: 10px;
    border: 1px solid #007777;
    margin-bottom: 20px ;   
    box-shadow: 2px 2px 2px 2px  #00a3cc;*/
}

.block-outil p
{
    font-size:0.8em;
    margin-left:0.5em;
}

.fa-cloud-download-alt
{
   
    float:right;
}

.fa-cloud-download-alt:hover
{
    color: #ff6600; 
    float:right;
} 

pre, code
{
    text-align: left;    
}

.fa-cloud-download-alt, .fa-eye, .fa-eye-slash
{    
   /* text-align:right;*/
    color: #ff6600; 
    padding-left: 10px;
    padding-right: 10px;
    float:right;
}


  .card {
    height: 525px;
  }

  .modal-header
  {
    border:0; 
    backgound-color:#fff;
  }
  .modal-dialog
  {
     border:0;  
     max-width: 65%;
     max-height: 55%;
  }

  .close{
      
      color:#343a40;
      font-size:1.2em;
  }
  .close:hover
  {
      color:#ff6600;
      font-size:1.2em;
  }