/* AlienMint Design CSS - Inspired by W3 reactive website template */
/* amd.css
 * authr: Frédéric Charette (c) 2025 - Raindevel.com
 * Define all styles for the website that we are about to do
 *
 */

  /* Basic page setup  and fonts*/
  html {
    overflow-x:hidden
  }

  html, body {
    font-family: Literata, sans-serif;
    font-size:15px;
    line-height:1.5;
    background:#288ebb;
  }

  .jumbo{
    font-size:40px!important;
    margin-top: 45px;
    margin-bottom:45px;
    line-height: 40px;
  }

  h1 { 
    font-size:36px;
    line-height: 0px;
  }
  
  h2 { 
    margin: 0px;
    padding: 0px;
    font-size:30px;
    line-height:30px; 
  }
  h3 { 
    margin: 0px;
    padding: 0px;
    font-size:24px;
    line-height:24px;
  }

  h4 { 
    margin: 0px;
    padding-bottom: 15px;
    font-size:20px;
    line-height:20px;
  }
  
  h5 {
    margin: 0px;
    padding: 0px;
    font-size:18px;
    line-height:18px;
  }
  
  h6 {
    margin: 0px;
    padding: 25px;
    font-size:64px;
    line-height:0px;
  }

  hr {
    visibility: hidden;
  }

  /*Style the containers */
  .container {
    display: flex;
    justify-content:space-around; /* Aligns items evenly */
    align-items:flex; /* Aligns items ? */
    height: auto; /* Full viewport height to center items vertically */
    flex-direction:row
  }
  
  /* Structure for the Portfolio */
  /* Create three equal columns that floats next to each other */
  .column {
    float: left;
    width: 33.33%;
    display: none; /* Hide all elements by default */
    padding-top: 10px;
  }

  /* Content */
  .content {
    background-color: white;
    padding: 10px;
  }

  /* The "show" class is added to the filtered elements */
  .show {
    display: block;
  }

  .card{
    margin-top:15px;
    margin-bottom:15px;
    /*box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);*/
    width:400 px;
    height: auto;
  }

  /* Style the button links */
  .button {
    border:none;
    display:inline-block;
    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap
  } 

  /* The Modal (Popup for "+Lire Plus") */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
  
  /* Full height image header for logo */
  .bgimg-1 {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url("images/Nuages\ menthe.png");
    min-height: 70%;
  }
  
  /* Formz */
  textarea{
    resize:none;
  }
  
  .profile_pic-adjust {
    margin-left: 245px;
  }
  .form-adjust {
    padding-left: 35px; 
    text-align: left;
    margin-right: 200px;
  }

  /* Footer */
  .footer {
    margin-top: 5px;
    margin-bottom: 5px;
  }
 
  .footer p{
    font-size: 9px
  }

  .square {
    height: 270px;
    width: 270px;
    background-color: rgb(164,212,212);
  }

  /*Taken from W3Schools */
  .display-container{position:relative}
  .animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
  .animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
  .animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
  .animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}



  /* On screens that are 992px wide or less, go from four columns to two columns */
  @media screen and (max-width: 992px) {
    .container {
      flex-direction: column;
      block-size: auto;
    }
    .ruler {visibility: visible; width: 80%;}
  }

  /* Responsive layout - when the screen is less than 600px wide; such as Mobile Phones,
   make the navigation links stack on top of each other instead of next to each other */
  @media (max-width:600px){
    /*.modal-content{
      margin:0px ;width:auto!important
    }
    .modal{
      padding-top:30px
    }*/
    .dropdown-hover.mobile .dropdown-content,.dropdown-click.mobile .dropdown-content{
      position:relative
    }
    .hide-small{
      display:none!important
    }
    .mobile{
      display:block;width:100%!important
    }
    .bar-item.mobile,.dropdown-hover.mobile,.dropdown-click.mobile{
      text-align:center
    }
    .dropdown-hover.mobile,.dropdown-hover.mobile .btn,.dropdown-hover.mobile .button,.dropdown-click.mobile,.dropdown-click.mobile .btn,.dropdown-click.mobile .button .columncontact{
      width:100%
    }
    .container {
      flex-direction: column;
    }
    .card {
      height: auto;
    }
    .profile_pic-adjust {
      margin-left: 0px;
    }
    .form-adjust {
      padding-left: 0px; 
      text-align: center;
      margin-right: 0px;
    }
  }
  
  /* Responsive layout - Adjustments for bigger screens */
  @media (min-width:993px){/*.modal-content{width:900px}*/.hide-large{display:none!important}.sidebar.collapse{display:block!important}}
  @media (max-width:992px) and (min-width:601px){.hide-medium{display:none!important}}
  @media (max-width:992px){.sidebar.collapse{display:none}.main{margin-left:0!important;margin-right:0!important}.auto{max-width:100%}}


.bar-block .dropdown-hover,.bar-block .dropdown-click{width:100%}
.bar-block .dropdown-hover .dropdown-content,.bar-block .dropdown-click .dropdown-content{min-width:100%}
.bar-block .dropdown-hover .button,.bar-block .dropdown-click .button{width:100%;text-align:left;padding: 16px}
.main,#main{transition:margin-left .4s}
.bar{width:100%;overflow:hidden;}.center .bar{display:inline-block;width:auto}
.bar .bar-item{float:left;width:auto;border:none;display:block;outline:0}
.bar .dropdown-hover,.bar .dropdown-click{position:static;float:left}
.bar .button{white-space:normal}
.bar-block .bar-item{width:94%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.bar-block.center .bar-item{text-align:center}.block{display:block;width:100%}

.rest{overflow:hidden}.stretch{margin-left:-16px;margin-right:-16px}
.content,.auto{margin-left:auto;margin-right:auto}.content{max-width:980px}.auto{max-width:1140px}
.cell-row{display:table;width:100%}.cell{display:table-cell}
.cell-top{vertical-align:top}.cell-middle{vertical-align:middle}.cell-bottom{vertical-align:bottom}


.top,.bottom{padding:6px;width:100%;z-index:1}.top{top:0}.bottom{bottom:0}
.overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.display-topleft{position:absolute;left:0;top:0}.display-topright{position:absolute;right:0;top:0}
.display-bottomleft{position:absolute;left:0;bottom:0}.display-bottomright{position:absolute;right:0;bottom:0}
.display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-container:hover .display-hover{display:block}.display-container:hover span.display-hover{display:inline-block}.display-hover{display:none}
.display-position{position:absolute}
.circle{border-radius:50%}
.round-small{border-radius:2px}.round,.round-medium{border-radius:4px}.round-large{border-radius:8px}.round-xlarge{border-radius:16px}.round-xxlarge{border-radius:32px}
.row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col{padding:0, -8px}
.container,.panel{padding:0.01em 16px}.panel{margin-top:16px;margin-bottom:16px}

.xlarge{font-size:24px!important}.xxlarge{font-size:36px!important}.xxxlarge{font-size:48px!important}
.left-align{text-align:left!important}.right-align{text-align:right!important}.justify{text-align:justify!important}.center{text-align:center!important}
.border-0{border:0!important}.border{border:1px solid #ccc!important}
.border-top{border-top:1px solid #ccc!important}.border-bottom{border-bottom:1px solid #ccc!important}
.border-left{border-left:1px solid #ccc!important}.border-right{border-right:1px solid #ccc!important}
.topbar{border-top:6px solid #ccc!important}.bottombar{border-bottom:6px solid #ccc!important}
.leftbar{border-left:6px solid #ccc!important}.rightbar{border-right:6px solid #ccc!important}
.section,.code{margin-top:16px!important;margin-bottom:16px!important}
.margin{margin:16px!important}.margin-top{margin-top:16px!important}.margin-bottom{margin-bottom:16px!important}
.margin-left{margin-left:16px!important}.margin-right{margin-right:16px!important}

.left{float:left!important}.right{float:right!important}

.button:hover{color:#000!important;background-color:#5fb7b9!important}

.transparent,.hover-none:hover{background-color:transparent!important}
.hover-none:hover{box-shadow:none!important}

/* Colors */
.blackgradient{
    color:#fff!important;
    background: rgb(40,142,187);
    background: linear-gradient(90deg, rgba(40,142,187,1) 0%, rgba(40,142,187,1) 30%, rgba(0,0,0,1) 100%)!important;
}

.blktext {
  color:#000!important;
}
.blktext a {
  color:#000!important;
}
.blktext a:hover {
  color:#000!important;
  font-weight: bold;
}

.whttext{
  color:#fff!important
}

.whttext a {
  color:#fff!important;
}
.whttext a:hover {
  color:#fff!important;
  font-weight: bold;
}