/* You can add global styles to this file, and also import other style files */

   html,
   body,
   header,
   .jarallax {
     height: 770px;
   }
   
   html {
           scroll-behavior: smooth;
       }
   
   .navbar{
     border-bottom: 1px solid #173263;
     box-shadow: 0 6px 20px rgba(23,50,99,0.2);
    
   }

   .navbar-light .navbar-brand {
    color: #212529!important;
   }
 

   body .progress{
     
       height: 8px;
       background-color: #a8adb1;
       width: 80%;
       margin: auto;
       color: #3f51b5;
   }
   
   .shadow-sm {
     box-shadow: none!important;
       }
   
   /* If you use .navbar with .smooth-scroll, use this code to avoid overlapping navigation to a header.*/
   
   #test1::before,
   #test2::before {
   display: block;
   content: " ";
   margin-top: -65px;
   height: 65px;
   visibility: hidden;
   }
   
   .btn_remove_margin_space_presentation_button {
       margin: 0px!important; /* to remove the button margin in the presentation section */
       margin-top: 55px!important; /* add some between the button and the text */
   }

   .btn-indigo:hover {
    background-color: #212529!important;
    } 
   
   .animateObject {
       animation-name: example;
       animation-duration: 3s;
       animation-iteration-count: 10;
   }

   @keyframes example {
    0%   {left:0px; top:0px;}
    25%  {left:25px; top:0px;}
    50%  {left:0px; top:0px;}
    75%  {left:25px; top:0px;}
    100% {left:0px; top:0px;}
  }
   
   /*Image code on portfolio */
   figure > figcaption {
       position: absolute;
       bottom: 0px;
       left: 0px;
       width: 100%;
       background: #3f51b5;
       padding: 12px;
       color: #EEF1F2;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       letter-spacing: 0.3em;
   }
   
   figure {
       position: relative;
       overflow: hidden;
   }
   
   figure:hover figcaption { /* Je suis en train de passer la souris sur un parent et je seleciton l'enfant lorsque je passe la souris sur un enfant*/
       top: 100%;
   }
   
   /* Flashing */
   .hover13 figure:hover img {
        opacity: 1;
        transform: scale(1.5);
   }
   
   /* Style the Image Used to Trigger the Modal */
   .img-responsive {
       display: block;
       height: auto;
       max-width: 100%;
   }
   
   #myImg {
     border-radius: 5px;
     cursor: pointer;
     transition: 0.3s;
   }
   
   #myImg:hover {opacity: 1;}

   
   /* Modal Content (Image) */
   
   .my-img a {
       display: inline-block;
       margin: 10px;
       border: 2px solid #CCC;
   }
   .my-img a:hover {
       border: 2px solid #45AFFF;
   }   
   
   .modal {
    top:100px!important;
   }

   .modal-lg {
       width: auto;
   }
   .modal-body {
       overflow: auto;
       max-height: auto;
   }
   
   .modal-content {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 700px;
   }
   
   /* Caption of Modal Image (Image Text) - Same Width as the Image */
   #caption {
     margin:10px;
     color: #ccc;
   }
   
   /* Add Animation - Zoom in the Modal */
   .modal-content, #caption {
     animation-name: zoom;
     animation-duration: 0.6s;
   }

   .modal-footer{
    justify-content: center!important;
   }
   
    figure img {
       min-height: 200px; 
       max-height: 230px;
       min-width: 200px;
       display: block;
       position: relative;
       transition: all .2s ease;
       margin-bottom: -5px;
   }

   .list-group-item {
    padding: 0.8rem 0.15rem!important;
}
   
   @keyframes zoom {
     from {transform:scale(0)}
     to {transform:scale(1)}
   }
   
   /* The Close Button */
   .close {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #212529;
     font-size: 40px;
     font-weight: bold;
     transition: 0.3s;
   }
   
   .close:hover,
   .close:focus {
     color: #bbb;
     text-decoration: none;
     cursor: pointer;
   }
   
   .element {
     margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
     transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
   }
   
   .parent {
     display: table-cell; /* comportement visuel de cellule */
     vertical-align: middle;
   }
   
   .color-contact-section{
     color: #212529;
   }

   .color-contact-section:hover{
    color:  #3f51b5;
  }

  .parallax {
    /* The image used */
    background-image: url("img/parallax_code.jpeg");
  
    /* Full height */
    height: 500px;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .top-nav-collapse {
    background: #fff!important;
 }
 
 .navbar:not(.top-nav-collapse) {
     background: #fff!important;
 }

 .navbar-light .navbar-brand {
  color: #212529!important;
}

.bg-dark-grey{
  background-color: rgb(253, 253, 253);
}

.nav-link{
  color:#212529!important;
}

.nav-link:hover{
  color:#3f51b5!important;
}

.nav-link-custom{
  color: #173263!important;
  display: block;
  padding: .5rem 1rem;
  padding-right: .5rem;
  padding-left: .5rem;
  text-decoration: none;
  border-radius:15px!important;
  background-color:rgba(197, 204, 216, 0.4);
}

.nav-link-custom:hover{
  background-color:rgba(128, 171, 236, 1)!important;
  color: white!important;
  text-decoration: none;
}

.navbar.scrolling-navbar.top-nav-collapse {
    padding-top: 12px!important; 
    padding-bottom: 12px!important; 
  }

 h5 {
     letter-spacing: 3px;
 }

   /* 100% Image Width on Smaller Screens */
   
   @media only screen and (max-width: 700px){
     .modal-content {
       width: 100%
     }

     .parallax {
      display: none; /* Don't show the parallax in a small screen */
    }
   }
   
   @media (max-width: 991px) {
     .center-btn-md-sm-screen{
       text-align: center!important;
     }
  }

   @media (max-width: 650px) {
    h1{
      font-size: 30px;
    }

    h5{
      margin: 25px;
      font-size: 20px;
    }

    .animateObject{
      width: 100%;
    }

    .center-btn-sm-screen{
      text-align: center!important;
    }
  }