/* --------------------------------------------- */
/* -------------------- ALL -------------------- */
/* --------------------------------------------- */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Poppins", serif;
}

.parisienne{
    font-family: "Parisienne", serif;
    font-weight: 400;
}

.boldBrown{
    font-weight: bold;
    color: #8b5e3c;
}

.colorGreen{
    color: #6DD96D;
}

.bold{
    font-weight: bold;
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------- MOBILE ---------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

/* ------------------------------------------------ */
/* -------------------- HEADER -------------------- */
header{
    height: 50vh;
    background-image: url(../../img/header2.jpg);
    position: relative;
    background-size: cover;
    background-position: center;
    .divLinkHome{
        padding: 2%;
        width: 30%;
        .home{
            color: white;
            width: 100%;
            font-size: 12px;
        }
    }
    nav{
        position: absolute;
        top: 0;
        left: 0;
        background-color: #6DD96D;
        width: 100%;
        z-index: 1000;
        #menuNoBurger{
            opacity: 0;
            height: 0;
            overflow: hidden;
            transition: all .8s linear;
            align-items: center;
            display: flex;
            flex-direction: column;
            li{
                padding: 5% 2%;
                &:nth-of-type(1){
                    display: none;
                }
                a{
                    color: white;
                    font-size: 1.5rem;
                }
            }
        }
    }
    .burger{
        position: absolute;
        top: 2%;
        left: 90%;
        z-index: 1000;
        width: 8%;
        transition: 0.3s linear;
        .menuBurger{
            li{
                height: 3px;
                border-radius: 50px;
                background-color: white;
                margin: 5px 0;
                width: 100%;
                padding: 0!important;
                transition: all .8s linear;
            }
        }
    }
    h1{
        color: white;
        position: absolute;
        z-index: 1;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 2.5rem;
    }
}

#menuNoBurger.active{
    height: 50vh;
    padding-top: 30%;
    opacity: 1;
}

.burger.open .menuBurger li:nth-child(1) {
    transform: rotate(50deg) translate(6px, 6px);
}

.burger.open .menuBurger li:nth-child(2) {
    opacity: 0;
}

.burger.open .menuBurger li:nth-child(3) {
    transform: rotate(-50deg) translate(5px, -6px);
}


/* ---------------------------------------------- */
/* -------------------- MAIN -------------------- */
main{
    #presentation{
        width: 90%;
        margin: auto;
        h2{
            text-align: center;
            color: #8b5e3c;
            margin: 7% 0;
            font-family: "Parisienne", serif;
        }
    }
    #infos{
        width: 90%;
        margin: auto;
        h2{
            text-align: center;
            color: #8b5e3c;
            margin: 7% 0;
            font-family: "Parisienne", serif;
        }
        p{
            padding: 2% 0;
            iframe{
                width: 100%;
                height: 200px;
                margin: 1% 0;
            }
        }
    }
}

/* ------------------------------------------------ */
/* -------------------- FOOTER -------------------- */
footer{
    background-color: #6DD96D;
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
    #newsletter{
        width: 100%;
        padding: 3% 0;
        position: relative;
        display: inline-block;
        margin-bottom: 8%;
        &::after{
            content: "";
            position: absolute;
            width: 80%;
            left: 10%;
            height: 1px;
            background-color: white;
            bottom: -10%;
        }
        h3{
            color: white;
            padding: 0 0 4% 0;
        }
        form{
            display: flex;
            justify-content: space-evenly;
            #email{
                align-self: center;
                label{
                    color: white;
                    font-weight: bold;
                }
                input{
                    all: unset;
                    border-bottom: solid 1px #8b5e3c;
                    &::placeholder{
                        color: #8b5e3c;
                    }
                }
            }
            #button{
                button{
                    all: unset;
                    padding: 4%;
                    color: #8b5e3c;
                    background-color: white;
                    border: solid 1px #8b5e3c;
                    border-radius: 20px;
                }
            }
        }
    }
    #logo{
        width: 50%;
        align-self: center;
        padding: 0 2%;
        div{
            border: solid 1px white;
            padding: 2%;
            border-radius: 50%;
            a{
                color: white;
            }
        }
    }
    nav{
        width: 50%;
        padding: 0 2% 2% 2%;
        ul{
            li{
                padding: 2% 3%;
                color: white;

                a{
                    color: white;
                }
            }
            #font10px{
                font-size: 10px;
            }
        }
    }
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------- TABLET ---------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1024px) {
    /* ------------------------------------------------ */
    /* -------------------- HEADER -------------------- */
    header{
        .divLinkHome{
            display: none;
        }
        nav{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: transparent;
            #menuNoBurger{
                opacity: 1;
                height: auto;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                li{
                    padding: 2%;
                    &:nth-of-type(1){
                        display: block;
                    }
                    a{
                        color: #8b5e3c;
                        font-size: 1.5rem;
                    }
                }
            }
        }
        .burger{
            display: none;
            .menuBurger{
                li{
                    display: none;
                }
            }
        }
    }

    /* ---------------------------------------------- */
    /* -------------------- MAIN -------------------- */


    /* ------------------------------------------------ */
    /* -------------------- FOOTER -------------------- */
    footer{
        #newsletter{
            margin-bottom: 0;
            form{
                width: 60%;
                margin: auto;
            }
        }
        #logo{
            padding: 0 8%;
        }
        nav{
            padding: 5%;
            ul{
                #font10px{
                    font-size: 1rem;
                }
            }
        }
    }

}

/* ----------------------------------------------------------------------------------------- */
/* ---------------------------------------- DESKTOP ---------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
@media screen and (min-width:1024px) {
    /* ------------------------------------------------ */
    /* -------------------- HEADER -------------------- */
    header{
        height: 80vh;
        .divLinkHome{
            display: none;
        }
        nav{
            background-color: transparent;
            #menuNoBurger{
                opacity: 1;
                height: auto;
                flex-direction: row;
                justify-content: space-evenly;
                li{
                    padding: 1%;
                    &:nth-of-type(1){
                        display: block;
                    }
                    a{
                        font-size: 2rem;
                        position: relative;
                        color: #8b5e3c;
                        &::after{
                            content: "";
                            height: 1.5px;
                            position: absolute;
                            left: 10%;
                            width: 80%;
                            background-color: #8b5e3c;
                            transform: scaleX(0);
                            bottom: 0;
                            transition: all .3s linear;
                        }
                        &:hover::after{
                            transform: scaleX(1);
                        }
                    }
                }
            }
        }
        .burger{
            display: none;
            .menuBurger{
                display: none;
            }
        }
        h1{
            top: 80%;
            font-size: 3rem;
        }
    }

    /* ---------------------------------------------- */
    /* -------------------- MAIN -------------------- */
    main{
        #presentation{
            width: 70%;
            h2{
                margin: 5% 0;
                font-size: 2rem;
            }
        }
        #infos{
            width: 70%;
            h2{
                margin: 5% 0;
                font-size: 2rem;
            }
            p{
                padding: 2% 0;
                iframe{
                    height: 300px;
                }
            }
            #desktopFlex{
                display: flex;
                justify-content: space-evenly;
                p{
                    width: 50%;
                }
            }
        }
    }

    /* ------------------------------------------------ */
    /* -------------------- FOOTER -------------------- */
    footer{
        #newsletter{
            margin-bottom: 2%;
            padding: 2%;
            &::after{
                bottom: -3%;
                width: 70%;
                left: 15%;
            }
            h3{
                padding: 0 0 2% 0;
            }
            form{
                width: 35%;
                margin: auto;
                #button{
                    button{
                        padding: 10%;
                        transition: all 0.8s linear;
                        &:hover{
                            background-color: #8b5e3c;
                            color: white;
                            border: solid 1px white;
                        }
                    }
                }
            }
        }
        #logo{
            padding: 0 16%;
        }
        nav{
            ul{
                li{
                    padding: 1% 2%;
                }
                #font10px{
                    font-size: 1rem;
                }
            }
        }
    }


}