/* color variables */

:root {
--dark-green: #00A777;
--white : #FCFCFF;
--light-green: #7FCD5D;
--teal : #2A7E7C;
--navy-blue : #00263E; 
--dark-grey : #31353A; 
--light-grey : #a7a7a7; 
--black : #0b0b0b;
--red : #c21e56;
--red-gradient : linear-gradient(to bottom left,#db4c7c, #c21e56);
--green-gradient : linear-gradient(to bottom left,#7FCD5D, #00A777);
}

/*--------------------------------
CSS Balises HTML 
---------------------------------*/
html{
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    color : var(--navy-blue); 
}

body {
    display : flex; 
    flex-direction : column;
    width: 100%; 
    height: 100%; 
    margin: 0; 
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
}

h1, h2, h3, h4, h5{
    font-weight: 400;
    text-align:center;
    line-height: 1.3;
}

h1{
    font-size:1.6rem;
    margin:1rem 0;
}

a {
    text-decoration : none; 
}

:focus{
    outline:none;
}

div.anchor{
    display:block;
    position:relative;
    top:-11.5rem;
    visibility:hidden;
}

@media all and (max-width : 448px){
    div.anchor{
        top:-14rem;
    }
}

.button {
    color: var(--black);
    border: 1px solid var(--black);
    margin-top: 1rem;
    padding: 0.5rem 2rem;
    border-radius: 15px 0px 15px;
    transition: all 0.1s ease-out;
    display: inline-block; ;
    background: transparent;
}

.button--white {
    color: var(--white);
    background: var(--navy-blue);
    border:none;
}

.button--transparent{
    background: transparent; 
    border: 1px solid var(--white);
}

.button:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 38, 62, 0.25), 0 2px 4px 0 rgba(0, 38, 62, 0.25);
    transform: translateY(-2px); 
}

section {
    display : flex; 
    flex-direction : column; 
    padding:2rem;
}
section#home{padding:0 2rem;}

section.white {
    background: url(images/logo-icon-filigrane.svg) top center fixed no-repeat;
}

section.green {
    background: var(--green-gradient) top center fixed no-repeat;
    color : var(--navy-blue); 
}

section.blue {
    background: var(--navy-blue); 
    color: var(--white); 
    
}
section.blue a {
    color : var(--white); 
}

.subject--title {
    font-weight : 500; 
    text-transform: uppercase; 
    text-align: center;
    font-size : 2.28rem; 
    letter-spacing: 5px; 
}

.subject--text {
    font-size : 1.1rem; 
}

.subject--text.italic {
    font-style: italic;
}

.leave {
    width : 10rem; 
}

.under-leaf:after {
    content: '';
    display: block;
    height: 20px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.under-leaf.green:after {
    background-image: url(images/line-break.svg);
}

.under-leaf.white:after {
    background-image: url(images/line-break-white.svg);
}

.circle {
    border-radius : 50%; 
}

.circle--white {
    border : 3px solid var(--white); 
}

.img--large {
    width : 20rem;
}

.img--medium {
    width : 15rem; 
}

.img--small {
    width : 6rem; 
}

.bg-menu{
    height: 2rem;
    margin: 0.4rem 0 0 0;
}

.icon--circle{
    background: var(--green-gradient); 
    height : 100px; 
    width : 100px;
    border-radius: 100px; 
    display:flex; 
    align-items: center; 
    justify-content: center; 
    margin : 0 auto; 
    margin-top : 1rem; 
}

.icon--circle > a {
    color : var(--navy-blue); 
}

.space-evenly {
    display : flex; 
    flex-direction : row; 
    justify-content: space-evenly;  
}

.space-around {
    display : flex; 
    flex-direction : row; 
    justify-content: space-around;  
    align-content: center; 
    padding : 0 15rem; 
}

/* Home section -- Main header */

section p{
    max-width: 46rem;
    margin: 1rem auto;
}

#home, #home>video{
    height: 100vh;
}

#home {
    align-content: center;
    align-items : center; 
    color : var(--white); 
    background: rgba(0,38,62,0.1);
}

#home>div{
    position:absolute;
    bottom:0;
    width: 100%;
    padding: 1rem 0 2rem 0;
    background: rgba(0,38,62,0.5);
    text-align:center;
}

}

#home.color {
    color : var(--white); 
}

#home>video{
    position:absolute;
    top:0;
    z-index:-1;
    width:100%;
    object-fit:cover;
    -webkit-border-radius: 1px; /* Hack for Chrome to clip the video */
}

#home h1 {
    font-size: 2.5rem; 
    margin:0 1rem;
    align-items: center;
    justify-content: center;
    text-shadow: rgba(0,38,62,0.6) 0 0 0.5rem;
}

#home h2 {
    font-size : 1.8rem;
    margin:0 2rem;
}

#home .button{
    color: var(--white);
    background: var(--green-gradient);
    border: none;
    text-transform: uppercase;
    box-shadow: rgba(0,38,62,0.6) 0 0 0.3rem;
}

/* Discover section */

.discover{
    display : flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-evenly;
    padding: 2rem 0 0 0;
}

article {
    padding : 1rem;
    text-align:center;
}
article p{
    text-align:left;
}

.discover a {
    color : var(--navy-blue); 
}

/* Slides */

.slides {
    text-align:center;
}

.slides label{
    display:none;
}
.slides label>img{
    height:20rem;
    margin:1rem 2rem;
}
.slides input {
    padding:1rem 1rem 2rem;
}
.slides input::before {
    content:'\f111';
    display:block;
    color:var(--white);
}
.slides input:checked::before {
    color:var(--navy-blue);
}
.slides input#slide-1:checked~[for^="slide-1"],
.slides input#slide-2:checked~[for^="slide-2"],
.slides input#slide-3:checked~[for^="slide-3"],
.slides input#slide-4:checked~[for^="slide-4"],
.slides input#slide-5:checked~[for^="slide-5"] {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
}
.slides article{
    background:var(--white);
    border-radius:10px;
    padding:2rem;
    margin:1rem 0;
    max-width:30rem;
}

.block-text {
    max-width: 700px;
    min-height: 450px; 
    margin : 0 auto; 
    padding : 1rem; 
}

.label-button {
    margin-top : 1rem;
    font-size : 1.3rem; 
}

/* Header */

header {
    position:fixed;
    width:100%;
    z-index:999;
    transition: top 0.3s;
}

#subscribe {
    background: var(--green-gradient);
    padding:0 2rem;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#subscribe h3 {
    margin: 0;
    padding:0.35rem 1rem 0 1rem;
    color : var(--white); 
}

#subscribe form{
    padding:0.75rem 0;
}

#subscribe form input {
    border : none;
    border-radius: 15px 0 0 0;
    width: 11rem;
    font-size : 1.1rem;
    font-family:inherit;
    height:2.5rem;
    padding:0 0 0 1.5rem;
    float:left;
}

.subscribe-button {
    border-radius : 0 0 15px 0; 
    background: none; 
    color : var(--white); 
    padding: 0 1.5rem 0 1.3rem;
    height: 2.5rem;
    border : 0.125rem solid var(--white);
    cursor: pointer;
}

.submit-plane {
    font-size : 24px; 
}

.menu {
    background: var(--navy-blue);
    padding: 0.5rem 2rem;
    color: var(--white);
    display:grid;
    grid-template-columns: auto 1fr;
    grid-column-gap:6rem;
}
.menu a{
    display:block;
    color:inherit;
}
.menu .logo img{
    display:block;
    height:3rem;
}
.menu .logo .tagline{
    margin:0;
    font-size:0.875rem;
}

.menu .logo .square, .menu .burger, .menu nav>a span{
    display:none;
}

nav {
    display:flex;
    align-items: center;
    justify-content: flex-end;
}

nav>a {
    margin: 0 1rem;
}
.menu a:hover{
        color: var(--dark-green);
    }

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color:inherit;
    cursor:pointer;
    margin:0;
    outline:0;
}

@media all and (max-width : 933px){

    .menu .burger::before
    {
        content:'\f0c9';
    }
    .menu .burger:checked::before{
        content:'\f00d';
    }

    .menu .burger{
        display : block;
        padding:0;
        position:absolute;
        right:0;
        padding:1.4rem 2rem;
    }

    .menu .burger:checked{
        outline: none;
    }

    .menu .burger:checked ~ nav{
        transform: translateX(0);
    }

    .menu nav{
        background: var(--navy-blue);
        display:block;
        position:fixed;
        right:0;
        margin:5rem 0;
        padding: 0 2rem 1rem;
        transform: translateX(100vw);
        transition: transform ease-in-out 250ms;
    }

    .menu nav>a{
        padding:0.5rem 0;
    }

    .menu nav>a span {
        display:inline;
        padding:0 0 0 0.5rem;
    }

}

/* Kit and Probe section */

.shop {
    display : flex; 
    flex-direction : row; 
    justify-content: center; 
    align-items : center; 
}

.aside--grid {
    margin : 0 2rem; 
}

.text--grid {
    max-width : 600px; 
    box-sizing: border-box; 
    margin : 0 2rem; 
}


/* partners section */

#partners img {
    padding : 3rem;  
}

.partners {
    display : flex; 
    flex-direction : row; 
    justify-content: center; 
    align-items: center;
    flex-wrap:wrap;
}

.partners>a {
    margin:1rem 2rem;
}

.donation {
    display : flex; 
    flex-direction: column;
    justify-content: center; 
    align-content: center;
}

.donation a {
    display : flex; 
    flex-direction: row;
    align-self: center;
    margin-bottom : 2rem; 
}

.fa-cocktail {
    color : var(--navy-blue); 
}

/* News sections */

.instaflex {
    display : flex; 
    flex-direction : row; 
    justify-content: space-evenly;
    justify-content: space-around;
}

.instaflex a {
    color : inherit;
}

.instapic {
    background-color: var(--white); 
    border : 1.5rem solid var(--white); 
    display : flex; 
    flex-direction: column;
    align-items: center; 
    align-content: center; 
    max-width: 25rem;
    border-radius: 15px 0px 15px;
    margin : 1rem 0.8rem;
    overflow-wrap: break-word;
}


.instapic:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 38, 62, 0.25), 0 2px 4px 0 rgba(0, 38, 62, 0.25);
    transition: all 0.1s ease-out;
    transform: translateY(-2px); 
}


.instapic p {
    text-align: center;
    max-width: 15rem; 
}

.instapic img {
    width : 18rem; 
}

/* Footer section */

.bottom a:hover, .heart {
    color : var(--dark-green); 
}
.bottom h1{
    margin: 0 0 2rem;
}
.contact .social{
    margin:2rem 0;
}
.bottom {
    display : flex;
    flex-direction : row;
    justify-content : space-evenly; 
    justify-content: space-around;
    text-align : center; 
}
 
.member {
    display : flex; 
    flex-direction : row; 
    justify-content: center;
    align-items : center; 
    margin : 1rem 0; 
}

.picture {
    margin : 0 1rem; 
    filter : grayscale(1); 
}

.picture:hover {
    transition : ease-in-out 500ms;
    filter : none; 
}
  
.member .details {
    display : flex; 
    flex-direction : column; 
    justify-content : center; 
    align-items: center; 
    margin : 0 auto; 
    top : 0; 
}

.member h2 {
    margin : 0;
    font-size: 1.3rem;
}

.member .social {
    display : flex; 
    flex-direction : row; 
    justify-content : space-evenly; 
    justify-content : space-around; 
}

.social-icon {
    text-decoration: none; 
    color : var(--white); 
    padding : 0.5rem; 
}


.colored.fa-twitter {
    color : #1DA0F1; 
}

.colored.fa-facebook {
    color : #4267B2; 
}

.colored.fa-instagram {
    color : #F934AB; 
}

.colored.fa-pinterest {
    color : #BD091C; 
}

.colored.fa-youtube{
    color : #FF0000; 
}

.colored.fa-medium {
    color : var(--white);
}


.second-footer {
    background-color: var(--navy-blue); 
    color : var(--light-grey); 
    text-align : center; 
    padding : 0 1rem 2rem 1rem;

}

.second-footer a {
    color : var(--dark-green); 
}


/*--------------------------------
 Media Queries 
---------------------------------*/

@media all and (max-width : 1024px){

    .space-around {
        padding : 0; 
    }

    .img--large {
        width : 15rem;
    }

    .img--medium {
        width : 10rem;
    } 
    
    #partners div {
        display : flex; 
        flex-direction: column;
        align-items: center; 
    }

    #partners img {
        padding : 2rem; 
    }

    /* News section */
    .instaflex {
        display : flex; 
        flex-direction : column; 
        justify-content: center; 
        align-items: center; 

    }

    .instapic {
        background-color : var(--white);
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        align-items: center; 
        margin : 2rem 0; 
    }

    /* Footer section */
    .member {
        flex-direction: column; 
    }

}

@media all and (min-width : 1024px) and (max-width : 1200px) {

    .instapic {
        background-color: var(--white); 
        border : 1.2rem solid var(--white); 
        display : flex; 
        flex-direction: column;
        align-items: center; 
        align-content: center; 
        max-width: 25rem;
        border-radius: 15px 0px 15px;
        margin : 1rem 0.5rem; 
    }

    .instapic img {
        width : 15rem; 
    }   

}
@media all and (max-width : 780px){
    .bottom, .discover {
        flex-direction : column;
    }
}