/*Configuration à changer quand on veut changer de thème*/


:root {



    /*Theme par défaut*/


    --logo-url :                    url(../../../../uploads/2019/04/dg-2019.svg);
    --logo-gradient-1 :                     #253b56;
    --logo-gradient-2 :                     #23b3fa;
    --logo-gradient-3 :                     #44d6ff;

    --logo-gradient-alt-1 :                    #fff;
    --logo-gradient-alt-2 :                 #23b3fa;
    --logo-gradient-alt-3 :                 #44d6ff;



    --header-color-title:                   #253b56;
    --header-color-text:                    #848484;
    --header-color-link:                    #24b3fa;
    --header-color-link-hover:              #44d6ff;
    --header-color-text-alt:                #253b56;

    --header-background:                    #f8f8f8;
    --header-background-alt:                #f8f8f8;

    --header-border:                        #dbdbdb;


    --main-color-title:                   #253b56;
    --main-color-text:                    #848484;
    --main-color-link:                    #24b3fa;
    --main-color-link-hover:              #44d6ff;
    --main-color-text-alt:                #253b56;

    --main-background:                    #f8f8f8;
    --main-background-alt:                #f8f8f8;

    --main-border:                        #dbdbdb;

    --alternate-color-title:                   #ffffff;
    --alternate-color-text:                    rgba(255,255,255,0.85);
    --alternate-color-link:                    rgba(255,255,255,0.90);
    --alternate-color-link-hover:              #ffffff;
    --alternate-color-text-sec:                rgba(255,255,255,0.75);

    --alternate-background:                    #253b56;
    --alternate-background-alt:                #6f42c1;
    --alternate-gradient-start:                #253b56;
    --alternate-gradient-end:                  #6f42c1;

    --alternate-border:                        rgba(255,255,255,0.85);

    --footer-color-title:                   #ffffff;
    --footer-color-text:                    rgba(255,255,255,0.85);
    --footer-color-link:                    rgba(255,255,255,0.90);
    --footer-color-link-hover:              #ffffff;
    --footer-color-text-alt:                rgba(255,255,255,0.75);

    --footer-background:                    #253b56;
    --footer-background-alt:                #6f42c1;
    --footer-gradient-start:                #253b56;
    --footer-gradient-end:                  #6f42c1;

    --footer-border:                        rgba(255,255,255,0.85);

    --socket-color-title:                   #ffffff;
    --socket-color-text:                    rgba(255,255,255,0.85);
    --socket-color-link:                    rgba(255,255,255,0.90);
    --socket-color-link-hover:              #ffffff;
    --socket-color-text-alt:                rgba(255,255,255,0.75);

    --socket-background:                    #253b56;
    --socket-background-alt:                #6f42c1;
    --socket-gradient-start:                #253b56;
    --socket-gradient-end:                  #6f42c1;

    --socket-border:                        rgba(255,255,255,0.85);


    --welcome-image-url  :              url(../../../../uploads/2019/11/fond-intro-dg.jpg);
    --curve-1-image-url  :              url(../../../../uploads/2019/04/courbe-section.svg);
    --curve-2-image-url :              url(../../../../uploads/2019/04/courbe-article.svg);
    --footer-image-url   :              url(../../../../uploads/2019/04/courbe-footer-aplat.svg);
    --main-pattern-url   :              url(../../../../uploads/2019/04/frise-01.png);
    --shadow-elements    :              0 10px 80px -40px var(--shadow-color);
    --shadow-color     :              #000000;


}

/*Header*/

header .wrap-header {
    background: linear-gradient(to right, var(--header-background) 10%, rgba(0,0,0,0) 50%);
}

header .dg-logo img {
    fill: var(--logo-gradient-alt-1);
}

header .dg-logo a img,
.burger-menu .dg-logo a img {
    position: relative;
    opacity: 0 !important;
}

header .elementor-widget-theme-site-logo a,
.burger-menu .elementor-widget-theme-site-logo a {
    position: relative;
    max-width: 250px;
}

header .elementor-widget-theme-site-logo a:before,
.burger-menu .elementor-widget-theme-site-logo a:before {
    content: '';
    z-index: 99;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: unset;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--logo-gradient-alt-1) 0%,var(  --logo-gradient-alt-1) 55%,var(--logo-gradient-alt-2) 60%,var(--logo-gradient-alt-3) 100%);
    pointer-events: none;
    mask-image: var(--logo-url);
    -webkit-mask-image: var(--logo-url);
    mask-mode: alpha;
    -webkit-mask-mode: alpha;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-size: contain;
    mask-position: contain;
    -webkit-mask-position: center;
}


/*footer*/


footer .dg-logo img {
    fill: var(--logo-gradient-1);
}

footer .elementor-widget-theme-site-logo a {
    position: relative;
}

footer .elementor-widget-theme-site-logo a img {
    position: relative;
    opacity: 0;
}


footer .elementor-widget-theme-site-logo a:before {
    content: '';
    opacity: 1;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: unset;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--logo-gradient-1) 0%,var(  --logo-gradient-1) 55%,var(--logo-gradient-2) 60%,var(--logo-gradient-alt-3) 100%);
    pointer-events: none;
    mask-image: var(--logo-url);
    -webkit-mask-image: var(--logo-url);
    mask-mode: alpha;
    -webkit-mask-mode: alpha;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-size: contain;
    mask-position: contain;
    -webkit-mask-position: center;
}

/*Socket*/





/*Animation pour le burger-menu*/


body:not(.elementor-editor-active) .burger-menu{
	clip-path:circle(0% at 100% 0%);
	transition: all .6s ease-in-out;
}
body:not(.elementor-editor-active) .burger-menu.open{
	clip-path:circle(100%);
	transition: all .5s ease-in-out;
}
#close-btn{
	display:none;
	cursor:pointer;
}
#close-btn.visible{
	display:block;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #open-btn a{
    border-radius:50%;
    height:40px;
    width:40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
  }
  #open-btn .elementor-button-text{
    display:none;
  }
  #open-btn .elementor-button-icon{
    margin:0;
    float:none;
  }
}
@media only screen and (max-width: 480px), screen and (max-device-width: 480px) {
  #open-btn a{
    border-radius:50%;
    height:40px;
    width:40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
  }
  #open-btn .elementor-button-text{
    display:none;
  }
  #open-btn .elementor-button-icon{
    margin:0;
    float:none;
  }
}