/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    ELEMENTS
    Vestige de style liés à des dev que je ne maîtrise pas (Voir si on peut les supprimer)
*/

/*
  02 - ICONES SOCIALES
  03 - ANIMATION SCROLL
*/



/* -----------------------
  02 - ICONES SOCIALES
------------------------ */

.jssocials-share{

}
.jssocials-share-email{

}
.jssocials-share-twitter{

}
.jssocials-share-facebook{

}
.jssocials-share-googleplus{

}
	.jssocials-share a{

	}
		.jssocials-share .jssocials-share-logo{
			display: flex;
            align-items: center;
            justify-content: center;
			height: 30px;
			width: 30px;
            background-color: var(--color-secondary);
            border-radius: 50%;
            font-style: initial;
		}
        .jssocials-share .jssocials-share-logo::before {
            font-family: icomoon;
            color: var(--white);
        }
		.jssocials-share-linkedin .jssocials-share-logo::before{
            content: "\e911";
            font-size: 14px;
		}
		.jssocials-share-facebook .jssocials-share-logo::before{
            content: "\e913";
            font-size: 16px;
		}
		.jssocials-share-email .jssocials-share-logo::before{
            content: "\e924";
            font-size: 18px;
		}
		.jssocials-share .jssocials-share-label{
			display: none;
		}

		.jssocials-share-email .jssocials-share-logo{ background-position: 0 0 }
		.jssocials-share-email:hover .jssocials-share-logo, .jssocials-share-email:focus .jssocials-share-logo{ /*background-position: 0 -34px*/ opacity: 0.7; }

		.jssocials-share-twitter .jssocials-share-logo{ background-position: -32px 0 }
		.jssocials-share-twitter:hover .jssocials-share-logo, .jssocials-share-twitter:focus .jssocials-share-logo{ /*background-position: -32px -34px*/ opacity: 0.7; }

		.jssocials-share-facebook .jssocials-share-logo{ background-position: -64px 0 }
		.jssocials-share-facebook:hover .jssocials-share-logo, .jssocials-share-facebook:focus .jssocials-share-logo{ /*background-position: -64px -34px*/ opacity: 0.7; }

		.jssocials-share-googleplus .jssocials-share-logo{ background-position: -97px 0 }
		.jssocials-share-googleplus:hover .jssocials-share-logo, .jssocials-share-googleplus:focus .jssocials-share-logo{ /*background-position: -97px -34px*/ opacity: 0.7; }
		.jssocials-share-linkedin .jssocials-share-logo{ background-position: -97px 0 }
		.jssocials-share-linkedin:hover .jssocials-share-logo, .jssocials-share-linkedin:focus .jssocials-share-logo{ /*background-position: -97px -34px*/ opacity: 0.7; }



/* -----------------------
  03 - ANIMATION SCROLL
------------------------ */

/*
Opacité seule : classSectionToAnimate
Opacité + top : classSectionToAnimate animateTop
Opacité + bottom : classSectionToAnimate animateBottom
Opacité + top Left : classSectionToAnimate animateTopLeft
Opacité + top Right : classSectionToAnimate animateTopRight
Opacité + bottom Left : classSectionToAnimate animateBottomLeft
Opacité + bottom Right : classSectionToAnimate animateBottomRight
*/

.animate-elem {
    opacity: 0.1;
    position: relative;
}

.animate-elem-25 {
    opacity: 1;

    transition-duration: 2s;
    -webkit-transition-duration: 2s;
}

.animate-elem.animateTop {
    top: -30px;
}

.animate-elem-25.animateTop {
    top: 0;
}

.animate-elem.animateBottom {
    bottom: -30px;
}

.animate-elem-25.animateBottom {
    bottom: 0;
}

.animate-elem.animateTopLeft {
    left: -30px;
    top: -30px;
}

.animate-elem-25.animateTopLeft {
    left: 0;
    top: 0;
}

.animate-elem.animateTopRight {
    right: -30px;
    top: -30px;
}

.animate-elem-25.animateTopRight {
    right: 0;
    top: 0;
}

.animate-elem.animateBottomLeft {
    left: -30px;
    bottom: -30px;
}

.animate-elem-25.animateBottomLeft {
    left: 0;
    bottom: 0;
}

.animate-elem.animateBottomRight {
    right: -30px;
    bottom: -30px;
}

.animate-elem-25.animateBottomRight {
    right: 0;
    bottom: 0;
}

/* -----------------------
  04 - SLICK
------------------------ */
body button.slick-arrow {
    bottom: -18px;
    border-radius: 50%;
    border: none;
    width: 36px;
    height: 36px;
    background-color: var(--color-primary);
}
body button.slick-arrow:hover {
    background-color: var(--color-secondary);
}

body button.slick-arrow::before {
    content: "\e922";
    font-size: 15px;
    color: var(--white);
    transition: color 0.2s;
}
body button.slick-arrow:hover::before {
    color: var(--color-primary);
}

body button.slick-arrow.slick-prev {
    right: calc(50%);
}