/* main */
main{
    /* position:absolute; */
    top:0;
    width:100%;
}

section{
    min-height:100vh;
}

#section1{
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(#ecfdfc 70%,#fff 70%);
    position:relative
}
#section1 *{
    text-align:center
}
h1{
    font-size:2.25vw;
    text-align:center;
    margin:0;
    margin-top:8vh;
}
h1 + p{
    font-size:1.25vw;
    margin:10px 0 4vh 0;
    /* max-width:800px; */
    text-align:center;
    align-self: center;
}
h2{
    font-size:4.5vh;
    margin-bottom:5px;
}
h2 + p{
    font-size:2vh;
}
.btns_container{
    margin-bottom:10vh;
}
.btns_container a{
    margin:0 1.5vw;    
    display:inline-block;
    min-width:350px;
}
.vdo_container{
    position:relative;
    width:30%;
    align-self:center;
}
video{
    border-radius:3vh;
    position:relative;
    z-index:1;
    box-shadow: 2px 4px 10px #00000040;
    background-color: #000;
}
.notification{
    position:absolute;
    z-index:2;
    box-sizing:border-box;
}

.notification img{
    background-color:#0f8f85;
    width:65px;
    height:65px;
    border-radius:15px;
    object-fit:contain;
    padding:5px;
    box-sizing:border-box
}

.notification-empty{
    height:150px;
    width:80%;
    right:-10%;
    top:-20px;
    z-index:0;
    background-color:#0f8f8520;
    /* border:1px #0f8f85 solid; */
    border-radius:15px;
    box-shadow: 2px -2px 5px #00000010;
    /* box-shadow: 2px -2px 5px #0f8f8530; */
}

@keyframes fadeinDown {
    0%{opacity: 0;transform: translateY(-40px);}
    100%{opacity: 1;transform: translateY(0px);}
}

.notification-right{
    /* right:-0px; */
    right:2.5%;
    top:2.5%;
    color:#fff !important;
    box-shadow:-2px 2px 5px #00000010;
    min-width:50%;
    width:95%;
    padding:15px 10px;
    border-radius:3vh;
    border:1px solid #fff;
    animation-name: fadeinDown;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-delay:800ms;
}
.notification-left{
    /* left:-5%; */
    right:-5%;
    bottom:-40px;
    box-shadow:2px 2px 5px #00000020;
    min-width:80%;
    border-radius:15px;
    background-color:#fff;
}

/* Accordeon */
.products-details_container{
    width:40vw;
    padding-left: 5vw;
    box-sizing:border-box;
}
.product-img_container img{
    height: 45vh;
    width: 45vh;
    object-fit:contain
}
.accordeon_container{
    padding:10px 0;
    border-radius:15px;
    margin: 0 0 10px 0;
    cursor:pointer;
}
.accordeon-content_container{
    padding:0 20px;
    box-sizing: border-box;
    border-left:3px solid #0f8f8530;
}
.accordeon_container .title{
    font-weight:600;
    font-size:18px;
    margin-bottom:5px;
}

.decoration_img{
    width:20vw;
    height:20vw;
    position:absolute;
    bottom:-10vw;
    right:-2vw;
    /* top:-10vw;
    right:-2vw; */
    object-fit:contain
}

/* .accordeon_container .content{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    line-height:15px;
    width:80%;
} */


.accordeon_container .content{
    display: block;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    /* height:1.3em; */
    max-height: 1.3em;
    line-height:1.3em;
    text-overflow: ellipsis;
    overflow: hidden;
    transition:max-height 500ms;
}
.accordeon_container[data-selected="true"]{
    background-color:#ecfdfc;
}
.accordeon_container[data-selected="true"] .accordeon-content_container{
    border-left:3px solid #0f8f85;
}

/* .accordeon_container[data-selected="true"] .content{
    text-overflow: unset;
    white-space: unset;
} */

.accordeon_container[data-selected="true"] .content{
    line-clamp: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: vertical;
    /* height:2.6em; */
    max-height: 2.6em;

}

#section_forum{
    background-image:url("./../assets/images/forumbgside.png");
    background-size:contain;
    background-position:right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}
#section_forum > h2{
    margin-top:3vh;
}
#section_forum > div{
    max-width:40vw;
    margin-left:10vw;
}
#section_forum > h2 + p{
    text-align: left;
}
#section_forum > h2{
    margin-bottom:2vh;
}
#section_forum .btn.green_btn{
    display: inline-block;
    margin-top:5vh;
}

#section_forum .category{
    margin-left:0;
    padding:2px 10px;
}

#forum{
    background-color:#ecfdfc;
    padding:5vh 0;
    box-sizing: border-box;
}

.searchbar_container{
    width:100%;
    margin-top:20px;
    margin-bottom:30px;
}
.searchbar_container input{
    border: 1px solid #0f8f85;
    border-radius: 50px;
    width:100%;
    height:50px;
    line-height:20px;
    background-color: transparent;
    padding:0 15px;
    color:#0f8f85;
    box-sizing:border-box;
    z-index:2;
}
.searchbar_container input::placeholder{
    color:#0f8f85;
}
.cancel-search_img{
    display:none;
    position: absolute;
    right:-30px;
    font-size:41px;
    line-height:50px;
    top:0;
    cursor:pointer;
}
.forum-discussions_container{
    width:100%;
    max-width:100%;
    overflow-x:scroll;
    padding-top:25px;
    display: flex;
}
.forum-discussions_container::-webkit-scrollbar{
    -webkit-appearance:none;
}
.discussion_container{
    padding:2vw;
    min-width:26vw;
    background-color:#dbf5f3;
    border-radius:20px;
    margin-left:1vw;
    height:25vh;
    min-height:calc(200px + 2vh);
    position:relative
}
.discussion_container:nth-child(1){
    margin-left:5vw;
}
.discussion_container:last-child{
    margin-right:2vw;
}
.discussion_container .categories_container{
    display:flex;
    margin-bottom:1vh;
}
#section_forum .category, .discussion_container .category{
    background-color:#ecfdfc;
    padding:0.5vh 0.8vw;
    border-radius:50px;
    margin-right:10px;
    display: inline-block;
}
.discussion_container .title{
    font-weight:600;
    font-size:20px;
    margin-bottom:1vh;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.discussion_container .content{
    display: -webkit-box;
    line-clamp: 6;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    max-height: 140px;
    overflow: hidden;
    line-height: 20px;
}
.discussion_container .likesdislikes_container{
    position:absolute;
    bottom:2vw;
    display: flex;
    justify-content: flex-end;
    width:100%;
    right:2vw;
}
.discussion_container .likesdislikes_container *{
    color:#FF6100;
}
.discussion_container .likesdislikes_container img{
    width:2vh;
    height:2vh;
    margin-right:0.4vh;
}
.discussion_container .ld_container{
    display:flex;
    align-items: center;
}
.discussion_container .ld_container:not(:last-child){
    margin-right:1.5vw;
}
/* .searchbar_container{
    border: 1px solid #0f8f85;
    border-radius: 5px;
    width:100%;
} */

.aboutus_container + .navbar{
    width:100%;
    background-color:#ecfdfc;
    border-radius:50px;
    margin-bottom:2vh
}

.contact-form_container{
    width:80vw;
    margin-top:5vh;
}
#section5 h2{
    margin-bottom:10px;
}
.contact-form_container label{
    display:block;
    text-align: center;
    margin-bottom:5px;
    font-weight:550;
}
.contact-form_container input,.contact-form_container textarea{
    display:block;
    width:100%;
    margin-bottom:25px;
    border-radius:10px;
    height:100px;
    background-color:#ecfdfc;
    border:none;
    padding:10px;
    box-sizing: border-box;
    /* text-align: center; */
}

.contact-form_container input{
    height:35px;
    padding:0 10px;
}

.contact_socials img{
    height:3vw;
}

#apropos{
    padding:5vh 0;
    box-sizing: border-box;

}

.aboutus_container{
    position:relative;
    display: flex;
    justify-content: center;
    flex:1;
}



.aboutus_container .arrow{
    position:absolute;
    top:calc(50% - 25px);
    border-radius:50px;
    width:50px;
    height:50px;
    border:1px solid #0f8f85;
    text-align:center;
    vertical-align: middle;
    cursor:pointer;
}
.aboutus_container .arrow:hover{
    background-color:#0f8f8520;
}

.aboutus_container .arrow img{
    height:50px;
    object-fit:contain;
}
.aboutus_container .arrow.left{
    left:-50px;

}
.aboutus_container .arrow.right{
    right:-50px;
}

.aboutus_container .aboutus_page{
    display:none;
    text-align:center;
    flex:1;

}

.aboutus_container .aboutus_page img{
    width:25vw;
    height:25vw;
    align-self:center;
}

.aboutus_container .aboutus_page .title{
    font-size:3vh;
    font-weight:550;
    margin-bottom:2vh;
}
.aboutus_container .aboutus_page .content{
    line-height:1.6em;
    height:4.8em;
}

.aboutus_container .aboutus_page[data-current="true"]{
    display:flex;
    flex-direction:column;
    justify-content: center;
}

#apropos .navbar > div{
    padding:10px 20px;
    cursor:pointer;
}

#apropos .navbar > div[data-current="true"]{
    background-color: #0f8f85;
    color:#fff;
    border-radius:50px;
}

footer{
    display:grid;
    grid-template-columns: 25% 25% 20% 15% 15%;
    padding:5vh 2vw 3vh 2vw;
    background-color:#ecfdfc;
}
footer .store_logo{
    background-color:#fff;
    border-radius:10px;
    padding:10px;
    margin-bottom:5px;
    box-shadow:2px 2px 10px #00000010;
    height:2vw;
}
footer .social_logo{
    height:2.5vw;
}
footer > div{
    padding:1vw;
}
footer .footer_link{
    display:block;
    margin-bottom:1vh;
}

*[data-lessopacity="true"]{
    opacity: 0.2;
}


/* Responsive */
@media screen and (min-width:760px){
    .mobile{
        display:none;
    }
}
/* Tablet */

/* Mobile : 760px*/

@media screen and (max-width:760px){
    /* Contenu */
    main{
        font-size:2vh;
    }

    h1{
        margin-top:0;
        font-size:4vh
    }
    h1 + p{
        font-size:2vh;
        line-height:2.7vh;
        padding:2.5vw;
        margin-bottom:0;
        margin:0
    }

    .btns_container a{
        min-width:0;
        margin-top:10px;
    }

    .vdo_container{
        width:100%;
    }
    .notification{
        border-radius:10px;
    }
    .notification-left img{
        width:60px;
        height:60px;
        border-radius:10px;
    }
    .notification-left > div{
        padding-right:10px;
    }
    .notification-right{
        padding:10px;
    }
    .notification-left{
        min-width:75%;
    }
    .notification-right{
        border-radius: 3vh;
    }

    #section_forum{
        background-image: none;
        display: flex;
        align-items: center;
    }
    #section_forum .category{
        margin-left:0;
        padding:1px 10px;
    }
    #section_forum h2{
        max-width:100vw;
        margin:10px 0;
    }
    .forum_img{
        height:35vh;
        width:100%;
        object-fit: contain;
        margin:auto;
        display:block;
        max-width:100%;
    }
    #section_forum > div{
        max-width:100vw;
        margin-left: 0;
        text-align:center;
        padding:10px;
    }
    /* Section 2 */

    h2{
        font-size:3.5vh;
    }
    h2 + p{
        line-height:2.7vh;
        text-align: center;
        max-width:96vw;
    }

    .product-img_container img{
        height: 45vw;
        width: 45vw;
        object-fit:contain
    }

    .section2_main-content{
        flex-direction: column-reverse;
        max-width:100%;
        width:100%;
    }
    .decoration_img{
        height:120px;
        width:120px;
        right:-50px;
    }
    .products-details_container{       
        width:100%;
        max-width:100%;
        padding-left:0
    }
    #products-details_accordeon{
        max-width:100%;
    }
    .accordeon_container{
        max-width:100%;
        width:100%;
        min-width:100%;
        text-align:center;
        margin-top:2vh;
        padding:0;
    }
    .accordeon_container[data-selected="true"]{
        background-color:transparent;
    }
    .accordeon_container{
        max-width:100%;
        width:100%;
        min-width:100%;
        text-align:center;
        margin-top:2vh;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .accordeon_container *{
        max-width:100%;
    }
    .accordeon-content_container{
        padding:15px 10px 20px 10px;
        background-color:#dbf5f3;
        border-radius:15px;
        border:none;
    }
    
    #products-details_accordeon{
        display:flex;
        position:relative;
        left:0;
        transition: 500ms;
    }
    .accordeon_container,.accordeon_container[data-selected="true"] .accordeon-content_container{
        border-left:none;
    }
    .arw_img{
        width:18px;
        height:18px;
        border-radius:30px;
        border:1px solid #0f8f85;
        position:absolute;
        top:calc(50% - 9px);
        padding:10px;
    }

    .arw_img.left{
        left:5px;
    }

    .arw_img.right{
        right:5px;
    }
    .pdt-nav_container{
        display: flex;
    }
    .pdt_nav-dot{
        height:10px;
        width:10px;
        border-radius:10px;
        margin:0 7px;
        background-color: #0f8f85;
        opacity:0.5;
    }

    .discussion_container{
        min-width:85%;
        padding:20px;
        height:30vh;
        min-height:calc(210px + 2vh);
        margin-left:10px;
        box-sizing: border-box;
    }
    .discussion_container .title{
        font-size:16px;
    }
    .discussion_container .content{
        font-size:2vh;
        line-height: 2.5vh;
    }
    .discussion_container .category{
        padding:0.5vh 10px;
    }
    .discussion_container .likesdislikes_container{
        bottom:25px;
        right:20px;
    }
    .discussion_container .ld_container:not(:last-child){
        margin-right:10px;
    }
    .aboutus_container .aboutus_page img{
        width:100%;
        height:30vh;
        object-fit:contain;
    }
    .aboutus_container .aboutus_page .content{
        height:unset;
    }

    .aboutus_container .arrow{
        height:4vw;
        width:4vw;
        padding:2vw;
        top:calc(50% - 100px);

    }
    .aboutus_container .content{
        text-align:justify;

    }
    .aboutus_container .arrow.left{
        left:-9vw;
    }
    .aboutus_container .arrow.right{
        right:-9vw;
    }
    .aboutus_container .arrow > img{
        height:4vw;
        width:4vw;
    }

    .aboutus_container + .navbar{
        max-width:96%;
        margin-bottom:15vh;
        margin-top:5vh;
    }
    .aboutus_container + .navbar > div{
        text-align:center;
    }
    #section5{
        padding-bottom:30px;
    }
    .contact-form_container{
        width:96vw;
    }
    .contact-form_container,.contact-form_container *{
        max-width:96vw;
    }
    .contact_phone{
        text-align:center;
    }
    .contact_socials img{
        height:40px;
        width:auto;
    }
    footer{
        grid-template-columns: 100%;
    }
    footer > div{
        margin-bottom:25px
    }
    footer .footer_link{
        font-size:2vh;
    }
    footer .store_logo{
        width:40%;
        height:auto;
    }
    footer .social_logo{
        height:30px;
        width:auto;
    }
}