/*
####################################################
M E D I A  Q U E R I E S
####################################################
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
 
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


@media (max-width: 576px) {  

  /*body { border-left: 15px solid cyan; }*/
  #revolutionSlider { display:none; }
  .header-accueil-breaked { display:block!important; }
  .header-logo img { width: 70%!important; height: 70%!important; }
  .rev_slider_wrapper { background-color:rgb(240,240,240)!important;}
  li.text-center {padding-top:50px!important;}
  img.img-fluid-80 
  {
     padding-top:50px!important;
     padding-bottom:0px!important;
     margin-left:0px!important;

  }
  div.plan {margin-top:25px!important;}
  .texteLigne1Header {
     text-align: center;
  }

  .flex15  {
    
      margin-left: 0px!important;
      margin-right: 0px!important;
      padding-left:0px!important;
      padding-right:0px!important;
      
   }

  .flex20  {
    
    margin-left: 0px!important;
    margin-right: 0px!important;
    border-left: 0px solid rgb(206, 200, 200);
    border-right: 0px solid rgb(206, 200, 200);
   
  }

  .flex30  {
    
  margin-left: 0px!important;
  margin-right: 0px!important;
  padding-left:0px!important;
  padding-right:0px!important;

  }


  div.card-body {

    background-color: white!important;
  } 
  

  #nav-main { width:100%!important; }
} 

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  

  
 /* body { border-left: 15px solid yellow; }*/
  #revolutionSlider { display:none; }
  .header-accueil-breaked { display:block!important; }
  li.text-center {padding-top:50px!important;}
   
  .text-forfait 
  {
    padding-left: 6rem!important;
  }

  .flex15  {
    
    margin-left: 0px!important;
    margin-right: 0px!important;

 }

  .flex20  {
    
    margin-left: 0px!important;
    margin-right: 0px!important;
   
  
  }

  .flex30  {
    
  margin-left: 0px!important;
  margin-right: 0px!important;

  }

  div.card-body {

    background-color: white!important;
  } 
  
} 
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 
     /*body { border-left: 15px solid rgb(0, 255, 0); }*/
     #revolutionSlider { display:block; }
     .header-accueil-breaked { display:none!important; }
     li.text-center {padding-top:0px!important;}

     .btn-codepostal 
     {
         margin-left: 116px!important;
      
     }

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

    /*body { border-left: 15px solid blue }*/
    #revolutionSlider { display:block; }
   .header-accueil-breaked { display:none!important; }
   .menu-btn { margin-left:0px!important; } 
   .Menu-Bell-Font { font-size: 16px!important; }
   .header-logo img { width: 75%!important; height: 75%!important; }
   .text-forfait {
    padding-left: 1rem!important;
  }

  .modal-md 
  {
    max-width:768px!important;
    width:768px!important;
  }
    
 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
     #revolutionSlider { display:block; }
    .header-accueil-breaked { display:none!important; }
    .Menu-Bell-Font { font-size: 28px!important; }
    .header-logo img { width: 100%!important; height: 100%!important; }
    .TopNavOnBottom { display:none!important; }
    li.text-center {padding-top:0px!important;}
} 
 
@media (min-width: 1201px)  {
  /* step 4 
  body { border-left: 15px solid magenta }*/
  .header-accueil-breaked { display:none!important; }

  .btn-codepostal 
  {
      margin-left:120px!important;
      padding-top: 10px;   
  }

  .but-center 
  {
    padding-top : 0px;
    padding-bottom : 0px;
  }
  
 
}

@media (min-width: 993px) and (max-width: 1200px) {
  /* step 3 
  body { border-left: 15px solid blue }*/
  .header-accueil-breaked { display:none!important; }
 
}


@media (min-width: 769px) and (max-width: 992px) {
  /* step 2 
  body { border-left: 15px solid green }*/ 
  .header-top
  {
    display: none!important;
  }
  .but-center 
  {
    padding-top : 15px;
    padding-bottom : 15px;
  }

}

/* todo when finalizing responsive steps redistribute these ones in others steps above */
@media only screen and (max-width: 768px) {
  /* step 1  
  body { border-left: 15px solid yellow }*/
  

  .Magasiner-mobile {

    padding-right:30px;

  }
  
  .but-center 
  {
    padding-top : 15px;
    padding-bottom : 15px;
  }

  div.container {
    padding-left: 0px!important;
    padding-right: 0px!important;
    
  }

  .btn-codepostal 
  {
      margin-left: 0px!important;
      padding-top: 20px; 
      padding-bottom: 20px; 

  }

  .dark-section-footer {
      max-height: 84px;
      padding-top: 15px!important;
      padding-top: 15px!important;
  }

  .Menu-Bell-Font
  {
    font-size:120%!important;
    color:red!important;
    font-family: BellSlim!important;	
    text-transform: none !important;
  }

  .IconLinks {
      display:none;
  }

  .ButtonLinks {
      display:block;
  }

  .collapse {
    background-color: #c8102e!important;
    color: white!important;
  }

  .header-nav-main nav
  {
    background-color: #c8102e!important;
    color: blue!important;

  }

  .header-nav-main a
  {
    background-color: #c8102e!important;
    color: white!important;
    font-size:200%!important;
    font-family: 'BellSlim-SemBold'!important;	
    line-height: 44px!important;	
    width:100%!important;
  }

  .header-top {
      display: none!important;
  }

  li {
      border: none!important;
  }

  .TopNavOnBottom {

    border: none!important;
    
  }


  /*
  .dropdown-item {
    background-color: #c8102e!important;
    color: white!important;
  }

  .dropdown-item:hover {

    background-color: #c8102e!important;
    color:rgb(180,180,180)!important;
    text-decoration: none!important;
    border: none!important;
  }*/


 
  

}