/*
  Theme Name: MSPP
  Author Name: Solutions S.A.
  Description: Theme du site du Ministère de la Santé Publique et de la Population
  Version:1.0
  License: GNU General Public License v2 or later
  Text Domain: Ministère de la Santé Publique
*/

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */



.mymaindiv {
    width:100%;
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
   }
   @media (min-width:576px) {
    .mymaindiv {
     max-width:100%;
    }
   }
   @media (min-width:768px) {
    .mymaindiv {
     max-width:100%;
    }
   }
   @media (min-width:992px) {
    .mymaindiv {
     max-width:100%;
    }
   }
   @media (min-width:1200px) {
    .mymaindiv {
     max-width:100%;
    }
   }
  
   @media (min-width:1500px) {
    .mymaindiv {
     max-width:100%;
    }
   }
  
   @media (min-width:2000px) {
    .mymaindiv {
     max-width:1900px
    }
   }
  body {
  padding-top: 0;
  color: #5a5a5a;
  }
  
  /*Drapeau*/
  .row-background {
  background-color: #1a237e;
  height: 10px;
  }
  
  .row-rouge{
  background-color: red;
  height: 10px;
  
  }
  
  .nav-social{float: right;}
  
  .ion-espace { padding:0 7px;}
  
  ion-icon{color: white; padding-top: 7px;}
  
  .a-entete{
  font-size: 14px;
  color: white;
  text-decoration: none;
  padding-right: 10px;
  }
  
  .a-entete:hover{
  text-decoration: none;
  color: white;
  }
  
  #pipe{color: white; vertical-align: top;}
  
  
  
  .logo{
  padding: 10px 0px 0px 25px;
  }
  
  .search-form{
  padding: 20px 0px 10px 0px;
  
  }
  
  .breaking-news{
  border: 1px solid #f2f2f2;
  background-color: #f4f4f4;
  margin-left: 12px;
  }
  
  .nav-link{
  font-weight: bold;
  color: #5a5a5a;
  
  }
  
  .nav-link:hover{
  border-bottom: 2px solid black;
  }
  
  
  /* documents images*/
  
  div.col-sm-6.document-image{
  color: white;
  padding: 10px;
  
  }
  
  div.col-sm-6.document-image h5{
  padding: 10px;	
  }
  
  div.col-sm-6.document-image p{
  padding: 10px;	
  }
  
  div.col-sm-6.document-image a{
  margin: 10px;	
  }
  
  li {
  list-style: none;
  padding: 0 0 10px 0px;
  }
  
  ul{padding-left:0px;}
  
  li img{width:25px; height:25px;}
  
  a{
  font-weight: normal; 
  color: #5a5a5a;
  }
  
  a:active{
    color:#1a237e;
  }
  
  
  a.a-liens-utiles{
  color: white;
  }
  
  a.a-liens-utiles:hover{
  color: #1976d2;
  }
  
  
  
  .card-title a{
  text-decoration: none;
  }
  
  form.form-inline.mt-2.mt-md-0{
  width: 100%;
  float: right;
  }
  
  
  .bck-image{
  background-image: url('../img/BackgroundCorona.jpg');
  background-size: cover;
  background-position:center center;
  
  }
  
  
  /* add by VCJ */
  h5.h5-title-front{
      background-color: #1a237e;
      color: white;
      padding: 7px;
      border-radius: 3px;
    }
  @media (min-width: 767px) and (max-width: 1280px) {
    h5.h5-title-front{
      width:30%;
    }
  
  }
  @media (min-width: 481px) and (max-width: 767px) {
    
     h5.h5-title-front{
      width:60%;
    }
  
  }
  
  @media (min-width: 1281px) {
          h5.h5-title-front{
      width:30%;
    }
  
  }
  
  @media (min-width: 767px) and (max-width: 1280px) {
  
     .no-gutters .col-md-3 .card-img {
        display:inline;
    }
  }
  @media (min-width: 481px) and (max-width: 767px) {
  
    .no-gutters .col-md-3 .card-img {
        display:none!important;
    }
  }
  
  @media (min-width: 1281px) {
  
     .no-gutters .col-md-3 .card-img {
        display:inline;
    }
  }
  
  
  
  
  h5.h5-title-sidebar{
  background-color: #1a237e;
  color: white;
  width:75%;
  padding: 7px;
  border-radius: 3px;
  }


  /*
  * WIDGETS AREA
  =========================
  */

  div.textwidget.custom-html-widget {
    width:100%;
  }
  
  
  
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
  margin-bottom: 0.1rem;
  padding-left: 12px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
  bottom: 2rem;
  z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  /* add by VCJ */
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  
  /* Carousel base class */
  .carousel {
   margin-bottom: 0.1rem;
   padding-left: 12px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
   bottom: 2rem;
   z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  /* add by VCJ */
  @media (min-width: 767px) and (max-width: 1280px) {
      .carousel-item {
   height: 20rem;
  }
  .carousel-item > img {
   position: absolute;
   top: 0;
   left: 0;
   max-width: 100%;
   max-height: 20rem;
  }
  }
  @media (min-width: 481px) and (max-width: 767px) {
   .carousel-item {
   height: 10rem;
  }
   .carousel-item > img {
    position: absolute;
   top: 0;
   left: 0;
   max-width: 100%;
   max-height: 10rem;
  
   }
  }
  
  @media (min-width: 320px) and (max-width: 480px) {
   .carousel-item {
   height: 10rem;
  }
   .carousel-item > img {
    position: absolute;
   top: 0;
   left: 0;
   max-width: 100%;
   max-height: 10rem;
  
  
   }
  }
  /*Pour téléphone en landscap */
  @media only screen and (min-device-width: 480px) {
   .carousel-item {
   height: 15rem;
  }
   .carousel-item > img {
    position: absolute;
   top: 0;
   left: 0;
   max-width: 100%;
   max-height: 15rem;
  
  
   }
  }
  
  @media (min-width: 1281px) {
         .carousel-item {
   height: 25rem;
  }
  .carousel-item > img {
   position: absolute;
   top: 0;
   left: 0;
   max-width: 100%;
   max-height: 25rem;
   /*margin:0 55px;*/
  }
  }
  
  .carousel-indicators {
   display: none;
  }
  .carousel-indicators {
  display: none;
  }
  
  
  
  /* MARKETING CONTENT
  -------------------------------------------------- */
  
  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
  }
  .marketing h2 {
  font-weight: 400;
  }
  .marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
  }
  
  
  /* Featurettes
  ------------------------- */
  
  .featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }
  
  /* Thin out the marketing headings */
  .featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
  }
  
  
  /* RESPONSIVE CSS
  -------------------------------------------------- */
  
  @media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  
  .featurette-heading {
    font-size: 50px;
  }
  
  
  }
  
  @media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
  }
  
  @media (min-width: 576px){
       div.input-group.form-search{
        width: 95%;
       }
       
       section#partenaires{
         display: block;
       }
       
       .facebook-twitter{
            margin-right: 35px;
            height: 10px;
         }
         
          /*button.navbar-toggler{*/
          /*  margin:0 auto;*/
  
          /* }*/
           
           /* nav.navbar.navbar-expand-md.bg-light.navbar-light {*/
           /* text-align: center;*/
           /*}*/
  
           /*a.dropdown-item{*/
           /* text-align: center;*/
           /*}*/
           
           span#registre{
               font-size:16px;
               font-weight:bold;
           }
           
           span#regis{
               font-size:16px;
               font-weight:bold;
           }
         
         
   }
  
  
  @media (max-width: 575px){
       div.input-group.form-search{
        width:98%;
        margin:0 auto;
       }
       
       #img-logo{
        width: 100%;
       }
       
       h5.card-title{
             font-size: 9px !important;
           }
       
       section#partenaires{
         display: none;
       }
       
         .logo{
          padding: 10px 15px 15px 15px;
        }
        
        .facebook-twitter{
         margin-right: 15px !important;
         height: 10px;
         }
         
         /*button.navbar-toggler{*/
         /*   margin:0 auto;*/
  
         /*  }*/
           
        div.col-sm-2{text-align: center;}
        
        div.col-sm-2{text-align: center;}
  
           /*nav.navbar.navbar-expand-md.bg-light.navbar-light {*/
           /* text-align: center;*/
           /*}*/
  
           /*a.dropdown-item{*/
           /* text-align: center;*/
           /*}*/
           
            span#registre{
               font-size:11px;
               font-weight:bold;
           }
           
            span#regis{
               font-size:11px;
               font-weight:bold;
           }
           
            #contact{
            font-size: 12px;
           }
  
           #messagerie{
            font-size: 12px;
           }
  
           i{
            font-size: 12px;
           }

           .doc-titre {
             color:#5a5a5a;
           }
           
           
  }
  
  /* css for mobile sliding nav */
  
  @media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
        z-index: 999;
        background-color: #eeeeee;
        opacity:.9;
        
    }
  }
  
  
  
  
  @media (min-width: 576px) and (max-width: 768px){
       div.input-group.form-search{
        width: 95%;
       }
  
       div.col-sm-6.document-image h5{
        padding: 10px;  
        font-size: 12px;
      }
  
      a.btn.btn-danger.docu-bouton {
        padding: 2px;
        font-size: 10px;
      }
  
              .top-left {
          position: absolute;
          top: 8px;
          left: 4px;
        }
       
       
   }
   
   
   
   @media (min-width: 850px){
  
         div.col-sm-6.document-image {
          display: block !important;
         }
  
         div.col-sm-6.document-image h5{
        padding: 10px;  
        font-size: 20px;
      }
  
      a.btn.btn-danger.docu-bouton {
        padding: 3px;
        font-size: 14px;
      }
  
            .top-left {
        position: absolute;
        top: 8px;
        left: 4px;
      }
   }
   
   
   @media (min-width: 576px) and (max-width: 767px) {
    .text-video{
      font-size: 12px;
    }
  
    .main-video {
      width:100%;
      height: 100%;
    }
  
  
    .secondary-video{
     width:100%;
      height: 100%;
    }
  
    div.col-sm-6.document-image h5{
        padding: 10px;  
        font-size: 12px;
      }
  
      a.btn.btn-danger.docu-bouton {
        padding: 2px;
        font-size: 10px;
      }
  
      .top-left {
        position: absolute;
        top: 8px;
        left: 4px;
      }
  
   }
   
   /*style pour le titre h5 sur l'image des documents de la page d'accueil*/
   
    @media (min-width: 767px) and (max-width: 848px){
        h5.doc-titre{
            color:#5a5a5a;
            font-size:14px;
        }
        
    }
   
   
  
  
  .facebook-twitter{
    margin-right: 35px;
    height: 10px;
   }
  
  /*FOOTER CSS*/
  
  footer{
  background-color: #212121;
  color: white;
    height:auto;
  }
  
  ul.footer-li-a{
    color:white;
  }