/* Reset */
*{margin:0;padding:0}
/* Reset */
a{text-decoration:none;color:inherit;}
html{width:100%;height:100%;}

body{
    width: 100%;
    height: 100%;
    display:grid;
    background:#fff;
}
nav{
    /*display: grid;*/
}
h3 {
    all: revert;
    height: max-content;
    margin-top: 2rem;
    font-size: .9rem;
    color: #216422;
    letter-spacing: .1rem;
    margin-left:30px;
}
/* Slider */
#slider{
    width:100%;
    height:55rem;
    top: 2rem;
    max-height: 100rem;
    position:relative;
    overflow:hidden;
}
@keyframes load{
    from{left:-100%;}
    to{left:0;}
}
.detail {
    position: relative;
}
.slides{
    width:400%;
    /*height:100%;*/
    position:relative;
    animation:slide 30s infinite;
    overflow: hidden;
    height: 55rem;
    margin-top: 2rem;
}
.slider{
    width:25%;
    float:left;
    position:relative;
    z-index:1;
    overflow:hidden;
    height: 55rem;
}
.slide img{
    width:100%;
    height:100%;
}
.slide img{
    width:100%;
    height:100%;
}
.image{
    width:100%;
    height:100%;
}
.image img{
    width:100%;
    height:auto;
}
.titre_option {
    height: max-content;
    margin-top: 2rem;
    font-size: 1.5rem;
    color: #31d934;
    letter-spacing: .1rem;
    margin-left: 2rem;
}
.titre_pub {
    height: max-content;
    margin-top: 2rem;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    margin-left: 3rem;
    display: block;
    color: #0b0b0b;
    text-align: center;
}
h4 {
    height: max-content;
    margin-top: 2rem;
    font-size: 1rem;
    color: #216422;
    letter-spacing: .1rem;
    margin-left: 2rem;
    line-height: 2;
    font-weight:bold;
}
.content{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.content-txt{
    font-family: "Century Gothic", 'Lato', sans-serif;
    width:40%;
    float:left;
    position:relative;
    top:55%;
    background: rgb(255, 255, 255, 0.7);
    animation:content-s 7.5s infinite;
    padding: 2rem;
    border-radius: 2%;
}
.content-txt h1{
    all: revert;
    text-transform:uppercase;
    font-size:150%;
    color: #04045e;
    text-align:left;
    margin-left:10%;
    padding-bottom:1%;
}
.content-txt h2{
    all: revert;
    font-size:115%;
    font-weight:bold;
    color: rgb(48, 48, 220);
    text-align:left;
    margin-left:10%;
}

.on {
    width: 2rem;
    height: 2rem;
    background: url("../../img/vaisseaux.png") center center / contain no-repeat;
    background-size: 150%;
    position: relative;
    animation: on 30s infinite;
    z-index: 100;
}

/* Animation */

@keyframes slide{
    0%,100%{
        margin-left:0%;
    }
    21%{
        margin-left:0%;
    }
    25%{
        margin-left:-100%;
    }
    46%{
        margin-left:-100%;
    }
    50%{
        margin-left:-200%;
    }
    71%{
        margin-left:-200%;
    }
    75%{
        margin-left:-300%;
    }
    96%{
        margin-left:-300%;
    }
}

@keyframes content-s{
    0%{left:-50%;}
    10%{left:35%;}
    15%{left:30%;}
    30%{left:30%;}
    40%{left:30%;}
    50%{left:30%;}
    60%{left:30%;}
    70%{left:30%;}
    80%{left:-50%;}
    90%{left:-50%;}
    100%{left:-50%;}
}

@keyframes on{
    0%,100%{
        margin-left:40%;
    }
    21%{
        margin-left:40%;
    }
    25%{
        margin-left:46%;
    }
    46%{
        margin-left:46%;
    }
    50%{
        margin-left:52%;
    }
    71%{
        margin-left:52%;
    }
    75%{
        margin-left:58%;
    }
    96%{
        margin-left:58%;
    }
}

/* main */

.slider-nav {
    position: absolute;
    width: 100%;
    margin-top: 1%;
    text-align: center;
    /*padding: 2rem;*/
    z-index: 200;
    top: -1rem;
}
.slider-nav a {
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
    display: inline-block;
    background-color: #adafbc;
    width: 80px;
    height: 10px;
    margin: 0 10px;
    border-radius: 20%;
}
.slider-nav a:hover {
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.8);
}
#img2:target .image {
    transform: translateX(-100%);
}
#img3:target .image {
    transform: translateX(-200%);
}
#img4:target .image {
    transform: translateX(-300%);
}

footer .main-footer {
    padding: 2% 0;
    background: #ffffff;
    margin-top: 12rem;
}


@media (max-width: 1600px) {
        .slider-nav a {
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
    display: inline-block;
    background-color: #adafbc;
    width: 82px;
    height: 10px;
    margin: 0 3px;
    border-radius: 20%;
    }
    .letter3 {
        width: 1.7em;
    }
}

@media (max-width: 1400px) {
    button a {
        font-size: 1rem;
    }
    .content-txt{
        width:36%;
        top:40%;
        padding: 1rem;
        border-radius: 23%;
    }
    .slider-nav a {
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
    display: inline-block;
    background-color: #adafbc;
    width: 60px;
    height: 10px;
    margin: 0 6px;
    border-radius: 20%;
    }
}

@media (max-width: 1200px) {
    .slider-nav a {
    box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
    display: inline-block;
    background-color: #adafbc;
    width: 80px;
    height: 10px;
    margin: 0 3px;
    border-radius: 20%;
    }
    .letter{
        font-size: 4em;
    }
    .letter3{
        width: 1.2em;
    }
    #contenu p{
        margin: 3% 3%;
        font-size: .9em;
    }
    em{
        font-style: italic;
        font-size: small;
        text-transform: capitalize;
        text-decoration: underline;
        color: red;
        letter-spacing:0;
        padding: 0;
    }
    #imgFond{
        padding: 2% 0%;
    }
    button a {
        font-size: .9rem;
    }
    h1 {
        font-size: 3rem;
    }
    .letter3 {
        font-size: 1em;
    }
    h3 {
        font-size: 1.1em;
    }
    em {
        font-size: 1.5em;
    }
    #contenuAdmin {
        font-size: 1em;
    }
    .content-txt{
        width:36%;
        top:40%;
        padding: 1rem;
        border-radius: 23%;
    }
}


@media (max-width: 1100px) {

    .letter {
        font-size: 1em;
        width: 3em;
    }

    .letter3 {
        width: 1em;
    }

    #contenu p {
        margin: 3% 3%;
        font-size: .9em;
    }

    em {
        font-style: italic;
        font-size: small;
        text-transform: capitalize;
        text-decoration: underline;
        color: red;
        letter-spacing: 0;
        padding: 0;
    }

    #imgFond {
        padding: 2% 0%;
    }
    #slider{
        width:100%;
        height: 44rem;
    }
    .slides{
        width:400%;
        height: 55rem;
        margin-top: 2.1rem;
    }
    .slider{
        width:25%;
        height: 55rem;
    }
    .slider-nav {
        width: 100%;
        margin-top: 1.2%;
        padding: 2rem;
        top: -2.8rem;
    }
    .slider-nav a {
        width: 54px;
        height: 9px;
        margin: 0 3px;
        border-radius: 20%;
    }
    .titre_option {
        height: max-content;
        margin-top: 2rem;
        font-size: 1.5rem;
        letter-spacing: .1rem;
        margin-left: 2rem;
    }
    .titre_pub {
        height: max-content;
        margin-top: 2rem;
        font-size: 1.2rem;
        letter-spacing: .1rem;
        margin-left: 3rem;
        text-align: center;
    }
    h4 {
        height: max-content;
        margin-top: 2rem;
        font-size: 1rem;
        letter-spacing: .1rem;
        margin-left: 2rem;
        line-height: 2;
        font-weight:bold;
    }
    .content{
        width:100%;
        height:100%;
        position:absolute;
        overflow:hidden;
    }
    .content-txt{
        width:36%;
        top:40%;
        padding: 1rem;
        border-radius: 23%;
    }
    .content-txt h1{
        font-size:120%;
        margin-left:10%;
        padding-bottom:1%;
    }
    .content-txt h2{
        font-size:115%;
        font-weight:bold;
        text-align:left;
        margin-left:10%;
    }
}

@media (max-width: 1000px) {
    button a {
        font-size: 0.8rem;
    }
    #slider {
        width: 100%;
        height: 38rem;
    }
    .slides{
        width:400%;
        height: 55rem;
        margin-top: 2.1rem;
    }
    .content-txt{
        width:36%;
        top:30%;
        padding: 1rem;
        border-radius: 23%;
    }
    h4 {
        font-size: 0.9rem;
    }
    .content-txt h2 {
        font-size: 100%;
    }
}

@media (max-width: 900px) {
    button a {
        font-size: 0.7rem;
    }
    .letter3 {
        font-size: 0.9em;
    }
    h1 { font-size: 2rem;
    }
    h3 { font-size: 1em;
    }
    em { font-size: 1.3em;
    }
    #contenuAdmin {
        font-size: 1em;
    }
    #contenuAdmin p{
        font-size: 1em;
    }
    #slider {
        width: 100%;
        height: 30rem;
    }
    .slides{
        width:400%;
        height: 55rem;
        margin-top: 2.1rem;
    }
    .content-txt{
        width:36%;
        top:25%;
        padding: 1rem;
        border-radius: 23%;
    }
    h4 {
        font-size: 0.9rem;
    }
    .content-txt h2 {
        font-size: 85%;
    }
    .content-txt h1{
        font-size:100%;
        margin-left:3%;
        padding-bottom:1%;
    }
    .slider-nav a {
        width: 35px;
        height: 5px;
        margin: -3px 1px;
        border-radius: 20%;
    }
    .on {
        width: 0.5rem;
        height: 0.5rem;
        top: 0.7rem;
    }
    .slider-nav {
        width: 100%;
        margin-top: 1.2%;
        padding: 2rem;
        top: -2rem;
    }
    h3 {
        font-size: .8em;
    }
}

@media (max-width: 600px) {
    button a {
        font-size: 0.6rem;
    }
    .letter3 {
        font-size: 0.7em;
    }
    h1 {
        font-size: 1rem;
    }
    em {
        font-size: 1.1em;
    }
    #contenuAdmin {
        font-size: .8em;
    }
    #contenuAdmin p{
        font-size: .9em;
    }
    .letter {
        font-size: .8em;
        width: 1.8em;
    }

    .letter3 {
        width: .8em;
    }

    #contenu p {
        margin: 3% 3%;
        font-size: .9em;
    }
    #contenu{
        background-image: url("../../img/bois foncer.jpg");
    }

    em {
        font-style: italic;
        font-size: small;
        text-transform: capitalize;
        text-decoration: underline;
        color: red;
        letter-spacing: 0;
        padding: 0;
    }
    #slider {
        width: 100%;
        height: 30rem;
    }
    .slides{
        width:400%;
        height: 55rem;
        margin-top: 2.1rem;
    }
    .content-txt{
        width:36%;
        top:8%;
        padding: 1rem;
        border-radius: 23%;
    }
    h4 {
        font-size: 0.9rem;
    }
    .content-txt h2 {
        font-size: 85%;
    }
    .content-txt h1{
        font-size:100%;
        margin-left:3%;
        padding-bottom:1%;
    }
    .slider-nav a {
        width: 25px;
        height: 5px;
        margin: -3px 1px;
        border-radius: 20%;
    }
    .on {
        width: 0.5rem;
        height: 0.5rem;
        top: 0.7rem;
    }
    .slider-nav {
        width: 100%;
        margin-top: 1.2%;
        padding: 2rem;
        top: -2rem;
    }
    h3 {
        font-size: .8em;
    }
}
@media (max-width: 400px) {
    .letter3 {
        width: .4em;
    }
    .letter {
        font-size: .6em;
    }
    #slider {
        height: 17rem;
    }
    .slides{
        width:400%;
        height: 55rem;
        margin-top: 2.1rem;
    }
    .content-txt{
        width:36%;
        top:8%;
        padding: 1rem;
        border-radius: 23%;
    }
    h4 {
        font-size: 0.9rem;
    }
    .content-txt h2 {
        font-size: 40%;
    }
    .content-txt h1{
        font-size:60%;
    }
    .titre_pub {
        font-size: 0.9rem;
    }
    .slider-nav a {
        width: 17px;
    }
    .on {
        width: 0.5rem;
        height: 0.5rem;
        top: 0.7rem;
    }
    .slider-nav {
        width: 100%;
        margin-top: 1.2%;
        padding: 2rem;
        top: -2rem;
    }
    h3 {
        font-size: .8em;
    }
}