/* GENERAL RULES */
.html, body {
    background: #ffffff;
    overflow-x: hidden;
    font-family: sans-serif;
}

h3, h2, h1{
    font-family: serif;
}

.underline{
    border-bottom: 2px solid currentColor;
    padding-bottom: 3px;
}

/* Nav Bar */

#logo-nav {
   margin-top: -14px;
   margin-bottom: -38px;
   margin-left: -62px;
    width: 80px;
    height: 80px; 
}
nav {
    background: white;
    box-shadow: 0 4px 2px -2px gray;  
}
.fixed-top {
    position: absolute;
}
a.nav-left-link {
    text-decoration: none;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black!important;
    font-size: 1rem;
    margin-top: 0; 
}
a.nav-right-link {
    text-decoration: none;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
    font-size: 1rem;
    margin-top: 0;
}

.nav-left-link:hover, .nav-left-link:active, .nav-left-link:focus {
    text-decoration: none;
    border-bottom: 3px solid #97C034;
    padding-bottom: 0.75rem;
}
hr{
    height: 2px;
    width: 20%;
}
#bluehr {
    color: #38C4E5;
    background-color: #38C4E5;
}

#greenhr {
    color:#97C034;
    background-color:#97C034;
    width: 20%;
}

#grayhr {
    color:#7B7C80;
    background-color:#7B7C80;
    height: 1px;
}

#blackhr {
    color:black;
    background-color: black;

}
#whitehr {
    color:white;
    background-color:white;
    width: 30%;
    height: 2px;
}
#custom {
    width:100px;
    height: 100px;
}

/* About section */
.background-blue {
  background-color: rgba(65, 65, 65, 0.7);
}

.background-gray {
    background-color: rgba(145, 143, 143, 0.7);
}

.background-blue h2, .background-blue p, .background-blue h1, .background-blue h3{
    color: white;
}

.background-white {
    color:black;
    background-color:white;
    box-shadow: 0 4px 2px -2px #000000;  

}
.background-white p {
    color:grey;
}
/* Button section*/  
.button {
      border:none;
      text-decoration: none;
}

.button:focus, .button-withe:focus {
    outline:0;
}

.button-rond {
    color: white;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    transition: transform .2s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.button-rond:hover{
    transform: scale(1.8);
}

#back-img{
    position: fixed;
    max-width: 100%;
    height: auto;

}

.button-withe{
    background-color: white;
    border-radius: 50%;
}

.button-withe:hover {
    cursor: default;
    transform: rotate(30deg);
    transition: all 0.2s ease-in-out 0s;
}

.button-contact{
    color: #97C034;
    border: 1px solid #97C034;
}

.button-contact:hover {
    background-color: #97C034;
}

.button-contact-2 {
    background: #97C034;
    color: white;
    border: 1px solid #97C034;
}

.button-contact-2:hover {
    background: #ffffff;
    color: #97C034;
    border: 1px solid #97C034;
}

.button-close {
    background: #7B7C80;
    color: white;
    border: 1px solid #7B7C80;
}

.button-close:hover {
    background: #ffffff;
    color: #7B7C80;
    border: 1px solid #7B7C80;
}
.lead {
    color:grey;
}

.no-border {
    border-style:none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.card-body p {
    color:gray;
    text-shadow: none;
    font-size: 100%;
}

#contact p {
    font-size: 100%;
    color: gray;
}

#back-img-phone {
    display: none;
}
/* responsive */

@media (max-width: 780px) {
    #back-img{
        display: none;
    }
    #back-img-phone {
        display: inline-block;
        z-index: -1;
        position: fixed;
        width: 100%;
        height: 100%;
        }
    #valeurs-phone{
        display: inline-block;
        width: 100%;
        background: #ffffff;
        border-radius: 15px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    }
    #valeurs-phone h3{
        color:black;
        text-shadow: none;
    }
    #valeurs-phone p {
        color:gray;
        text-shadow: none;
    }
    #valeurs{
        display: none;
    }
    .hr-desktop {
        display: none;
    }
    #img-desktop{
        display: none;
    }
    #envelope {
        margin-left: -2.25rem;
    }
    .justify-responsive{
        text-align: center;
    }
}

@media (min-width: 780px){
    #valeurs-phone{
        display: none;
    }
    .hr-mobile {
        display: none;
    }
    #img-mobile {
        display: none;
    }
    .justify-responsive{
        text-align: left;
    }
}

textarea{
    width: 500px;
    height: 150px;
}

.shadow {
    text-shadow: 1px 1px 1px black;
}

.image-grid:hover {
    transform: scale(1.4);
    opacity: 0.2
}

.image-text {
    display: none;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: #97C034;
    font-weight: bold;

}

.nobull {
    list-style-type: none;
}