/*
Theme Name: Artisydore Theme
Author: Minotaurus
Version: 1.0
 Tags:        wordpress, dev
*/

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #e3c1a6;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}
a:hover{
    color: #4d3a2b;
}
.dynapuff{
    font-family:DynaPuff;
}
h1{
    font-size: calc(1rem + 4vw);
    color: #f6e1d0;
    font-family:DynaPuff ;
}
h2{
    font-size: calc(1.5rem + 2vw);
    color: #e3c1a6;
    font-family:DynaPuff ;
    text-shadow: 4px 0 0 white, 4px 4px 0 white, 0 4px 0 white, -4px 4px 0 white, -4px 0 0 white, -4px -4px 0 white, 0 -4px 0 white, 4px -4px 0 white;
}
h3{
    font-size: calc(1.5rem + 1vw);
    color: #997253;
    font-family:DynaPuff ;
}
h4{
    font-size: calc(1.5rem + 1vw);
    color: white;
    font-family:DynaPuff ;
}
p{
    font-size: calc(15px + 0,3vmin);
    color: white;
    font-family:DynaPuff ;
}

.general-cta{
    display: block;
    width: fit-content;
    height: fit-content;
    margin: 25px auto;
    padding: 15px;
    border: #4d3a2b 3px solid;
    background-color: #4d3a2b;
    color: #c4a68e;
    text-decoration: none;
    border-radius: 15px;
    transition: 1s;
    font-family:DynaPuff ;
    filter: drop-shadow(0px 0px 0px #8a7463);
    cursor: pointer;
}
.general-cta:hover{
    border: #c4a68e 3px solid;
    background-color: #c4a68e;
    color: #4d3a2b;
    filter: drop-shadow(7px 7px 4px #8a7463);
    transform: scale(1.1);
}

@media (max-width: 859px) {
    .dp-none-dv{
        display: block;
    }
    .dp-none-sp{
        display: none !important;
    }
}
@media (min-width: 860px) {
    .dp-none-dv{
        display: none!important;
    }
    .dp-none-sp{
        display: block;
    }
}
/* Start NAV PARTS */
@media (max-width: 859px) { 
    .main-nav{
        position: fixed;
        left: -100vw;
        top: 0;
        background-color: #0000008c;
        width: 100%;
        height: 100vh;
        transition: 1s;
        z-index: 998;
    }
    .ul-main-nav{
        list-style: none;
    }
    .logo-sm-main-nav{
        display: block;
        width: 25%;
        border-radius: 50%;
        margin: 0 auto;
    }
    .logo-sm-main-nav:hover{
        box-shadow: 0 0 10px rgb(255, 255, 255);
        transition-duration: 0.5s;
    }
    .lottie-main-nav{
        display: none;
    }
    .li-logo-main-nav{
        display: none;
    }
    .btn-sm-burger{
        visibility: visible;
        display: block;
        position: fixed;
        right: 25px;
        bottom: 25px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #c4a68e;
        z-index: 999;
        cursor: pointer;
    }
    .li-main-nav{
        padding: 20px;
        padding-left: 25px;
    }
    .li-main-nav a{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .li-main-nav:hover{
        background-color: #4d3a2b;
    }
    .li-logo-sm-main-nav:hover{
        background-color: transparent;
    }
    .text-main-nav{
        color: #997253;
        font-weight: bolder;
        font-size: 25px;
        list-style: none;
        white-space: nowrap;
    }
}
@media (min-width: 860px) { 

    /* La Nav */
    
    .main-nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 20vh;
        height: auto;
        padding-top:10px ;
        padding-bottom:10px ;
        z-index: 1001;
        /* background-color: #e3c1a68c; */
    
    }
    .ul-main-nav{
        /* position: absolute; */
        display: flex;
        justify-content: space-around;
        /* height: 100%; */
        width: 70%;
        text-align: center;
        align-content: center;
        list-style: none;
        margin: 0 auto;
    }
    .li-main-nav{
        display: inline-block;
        position: relative;
        width: 10vw;
    }
    .icon-main-nav{
        display: block;
        height: 100%;
    }

    .lottie-main-nav{
        height: 10vw;
        z-index: 101;
    }
    .logo-main-nav{
        height: 8vw;
        width: 8vw;
        min-width: 50px;
        min-height: 50px;
        max-width: 8vw;
        max-height: 8vw;
        border-radius: 50%;
        box-shadow: 0 0 0 transparent;
    }
    .btn-sm-burger{
        display: none;
        visibility: hidden;
    }
    .li-logo-sm-main-nav{
        display: none;
    }
    .logo-main-nav:hover{
        box-shadow: 0 0 10px rgb(255, 255, 255);
        transition-duration: 0.5s;
    }
    .text-main-nav{
        bottom: 0vw;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #997253;
        font-weight: bolder;
        font-size: calc(0.8rem + 0.4vw);
        transition-duration: 0.5s;
        z-index: -1;
        width: 100%;
        /* white-space: nowrap; */
    }
    .icon-main-nav:hover .text-main-nav{
        color: #4d3a2b;
        font-size: calc(0.9rem + 0.4vw);
    
    }
    .space-main-nav{
        width: 100%;
        height: 15vw;
    }
}
/* End NAV PARTS */



/* Start Video PARTS */
@media (max-width: 859px) {
    .video-container{
        display: none;
    }
    .info-mobile{
        width: 80%;
        margin: 0 auto;
        margin-bottom: 30px;
        background-color: #997253;
        border-radius: 20px;
        padding: 20px;
    }
}
@media (min-width: 860px) { 
.video-container{
    width: 100%;
    height: 50vh;
    overflow: hidden;
}
}

/* End Video PARTS */



/* Start Reassurance PARTS */
.reassurance-container{
    padding-top: 5vw;
    background-color: #e3c1a6;
}
.picto-reassurance{
    display: block;
    height: 20vh;
    width: auto;
    margin: 0 auto;
}
.text-reassurance{
    color: white;
    font-size: calc(1rem + 0.4vw);
}
/* End Reassurance PARTS */



/* End Carrousel PARTS*/

/* Start Footer */


@media (max-width: 576px) {
    footer{
        background-color: #e3c1a6;
        background-image: url('assets/media/img/Deco/quadrillage-180.jpg');
        background-size: cover;
        background-position: top center;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        min-height: 450px;
        text-align: center;
    }
    footer a {
        color: #4d3a2b;
        font-family: 'DynaPuff';
    }
}
@media (min-width: 577px) { 
    footer{
        background-color: #e3c1a6;
        background-image: url('assets/media/img/Deco/quadrillage-180.jpg');
        background-size: cover;
        background-position: top center;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        min-height: 450px;
        text-align: center;
    }
    footer a {
        color: #4d3a2b;
        font-family: 'DynaPuff';
    }
    .picto-footer{

        width: auto;
    }
    .picto-footer-spe{

        width: auto;
    }
}
.nav-footer{
    padding-top: 250px;
    padding-bottom: 70px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}
.nav-footer .link-ico-footer{
    display: flex;
    flex-direction: column;
    min-width: 50px;
    width: 7%;
}
.nav-footer .link-ico-footer:hover{
    text-decoration: underline;
}
.nav-footer .link-ico-footer .ico-footer{
    width: 100%;
    padding: 5px;
    padding-bottom: 25px;
    fill: #4d3a2b;

}
.nav-footer .link-ico-footer:hover .ico-footer{
    fill: #997253;
}
.nav-footer-secondary{
    padding: 10px 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    flex-wrap: wrap;
    background-color: #e3c1a6;
}
.link-footer-secondary{
    color: #4d3a2b;

}
.link-footer-secondary:hover{
    color: #997253;
    text-decoration: underline;
}
@media (max-width: 576px) {
    .nav-footer-secondary{
        padding: 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        
        flex-wrap: wrap;
        background-color: #e3c1a6;
    }
}

/* 404 */

.nf-404-section{
    width: 80%;
    margin: 60px auto;
    text-align: center;

}
.nf-404-img{
    animation: fadeIn 3s ease-in-out;
    margin-bottom: 50px;
}
.nf-404-img img{
    filter: drop-shadow(0 0px 0.5vw #052d28) drop-shadow(0 0px 1vw #052d28) ;
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
.nf-404-text{
    font-family: Dynapuff;
    font-size: calc(15px + 1vw);
    color: #052d28;
}
.nf-404-container-link{
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
}
.nf-404-link{
    font-family: Dynapuff;
    font-size: calc(30px + 1vw);
    color: #052d28;
}
.nf-404-link:hover{
    color:#0b605a;
    transition: 0.5s;
    filter:drop-shadow(0 0px 5px #052d28)drop-shadow(0 0px 3px #ffffff) ;
}