/* SOMMAIRE :
==================================================================== 
I - GENERAL  
1) HEADER & LOGO
2) NAV 
3) ACCUEIL INTRO
4) PRESTA
5) GALERIE PHOTO  
6) CONTACT
BONUS) BUBBLE */


/* ==================================================================== */
/* I - GENERAL */
/* ==================================================================== */
body{overflow-x:hidden;color: rgb(37, 37, 37);}p{color: #777;font-weight: 400;letter-spacing: -.2px;}h1{font-family:prata,sans-serif;-webkit-font-smoothing:antialiased}h2,h3,h4,h5,h6{font-family:var(--bs-font-serif);-webkit-font-smoothing:antialiased}h1{font-size:3.25rem;line-height:62px;letter-spacing:-.02em;font-weight:400}h2{font-size:2.25;margin:0 0 8px;font-weight:400;line-height:48px;letter-spacing:-.04em}h3,h4{margin:0 0 10px;font-weight:400;line-height:1.4;letter-spacing:-.01em}h3{font-size:1.063rem}h4{font-size:.938rem}h5,h6{font-size:.875rem;margin:0 0 10px}ul{list-style:none}.padding {padding: 80px 0;}

#Calque_7{
    width: 8rem;
    margin-bottom: 3rem;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
    color:rgb(0, 0, 0);
}

/* ==================================================================== */
/* 1) HEADER & LOGO */
/* ==================================================================== */

.logo-head {
    width: 10rem;
}

@media (min-width:992px)
{
    .logo-head {
        width: 25rem;}
}

.logo-banner
{
    width:40rem;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 10.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}

/* ==================================================================== */
/* 2) NAV */
/* ==================================================================== */

.navbar-dark .navbar-nav .nav-link {
    color: white;
    font-size:0.85rem;
}




/* ==================================================================== */
/* 3) ACCUEIL INTRO */
/* ==================================================================== */

img.logo-introduction
{
    width:13rem;}

.about_section .about_img img
    {border-radius:5px;
    box-shadow:0 16px 28px 0 rgba(0,0,0,.2);
    width:60%;}

.about_section .about_img_2
{
    margin:-180px 0 0 270px;}

.about_section .about_img_3
{
    margin:-260px 0 0 40px;}


[class^="hvr-"] {margin: .4em;padding: 1em;text-transform: uppercase;cursor: pointer;border-top:4px solid var(--bs-primary);text-decoration: none;-webkit-font-smoothing: antialiased;}
.hvr-bounce-to-bottom{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.5s;transition-duration:.5s}
.hvr-bounce-to-bottom:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:var(--bs-primary);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-bounce-to-bottom:active,.hvr-bounce-to-bottom:focus,.hvr-bounce-to-bottom:hover{color:#fff}
.hvr-bounce-to-bottom:active:before,.hvr-bounce-to-bottom:focus:before,.hvr-bounce-to-bottom:hover:before{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition-timing-function:cubic-bezier(.52,1.64,.37,.66);transition-timing-function:cubic-bezier(.52,1.64,.37,.66)}


/* ==================================================================== */
/* 4) PRESTA */
/* ==================================================================== */


.service_box {
    background-color: #fff;
    padding-bottom: 15px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 16px 28px 0 rgba(0,0,0,.2);
    margin-top: 1.1rem;
    filter: grayscale(0);    
    -webkit-transition: filter .2s ease-out;
    -moz-transition: filter .2s ease-out;
    -ms-transition: filter .2s ease-out;
    -o-transition: filter .2s ease-out;
    transition: filter .2s ease-out;
}

.service_box:hover
{
    filter: grayscale(1);
}

.service_box .paddinglr
{
    padding: 20px 30px 0px 30px;
    position: relative;
}

.service_box p {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7287115529805672) 31%, rgba(0,0,0,0.32815132889093135) 69%, rgba(0,0,0,0) 100%);
    color: rgb(255, 255, 255);
    font-weight: 400;
    letter-spacing: -.2px;
    width: 100%;
    position: absolute;
    top: -6.5rem;
    left: 0rem;
    padding: 1rem ;
    opacity:0;
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}

.paddinglr #Calque_7
{
    margin-bottom:0;
}

.service_box:hover p 
{
    opacity: 1;
}

/* Reflet */
.shine div {
	position: relative;
}
.shine div::before {
	position: absolute;
	top: 0;
	left: -30%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
    opacity:0.4;
}
.shine div:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 70%;
        opacity:0;
	}
}
@keyframes shine {
	100% {
		left: 70%;
        opacity:0;
	}
}


/* ==================================================================== */
/* 5) GALERIE PHOTO */
/* ==================================================================== */ 

.banner-galerie
{
    background-image:url("../img/slide-2-cristyle-coiffure.jpg");
    padding:8rem;
}


/* ==================================================================== */
/* 6) CONTACT */
/* ==================================================================== */
div.contact--icon svg.svg-inline--fa
{
	font-size:2rem;
	color:var(--bs-primary);
}

.contact-info
{
	border: dashed var(--bs-primary) 3px;
	padding: 1rem;
	border-radius:25px;
}

div.contact--icon svg.svg-inline--fa
{
	font-size:2rem;
	color:var(--bs-secondary);
}

.contact--panel
{
	border: dashed var(--bs-primary) 3px;
	padding: 1rem;
    border-radius:25px;
}

.contact--panel a , .contact--panel h4
{
    font-weight: 700;
    line-height: 1.1;
    font-size: 1.1rem;
}

.contact--panel h4
{
    margin-bottom: 7px;
}

#contact 
{
    background-image: url('../private/logo-court.svg');
    background-repeat:no-repeat;
    background-position-x: 46%;
    background-position-y: 3%;
background-size: 20%;
    
}




/* ==================================================================== */
/* BONUS ) BUBBLE*/
/* ==================================================================== */

.jelly-container {
    width: 100%;
    position: absolute;
    height: 150%;
    overflow: hidden;
}
div[class^="bubble-"] {
    height: 1px;
    width: 1px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translateX(-50%);
}
div[class^="bubble-"]:after {
    content: '';
    position: absolute;
    height: 85%;
    width: 85%;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) rotateZ(-45deg);
}
.bubble-1 {
    bottom: 8px;
    left: 26%;
    animation: bubble-movement 9s infinite ease-in -3.06s;
}
.bubble-2 {
    bottom: 2px;
    left: 37%;
    animation: bubble-movement 9s infinite ease-in -1.74s;
}
.bubble-3 {
    bottom: 9px;
    left: 27%;
    animation: bubble-movement 9s infinite ease-in -2.43s;
}
.bubble-4 {
    bottom: 9px;
    left: 33%;
    animation: bubble-movement 9s infinite ease-in -2.8s;
}
.bubble-5 {
    bottom: 4px;
    left: 68%;
    animation: bubble-movement 9s infinite ease-in -3.18s;
}
.bubble-6 {
    bottom: 6px;
    left: 17%;
    animation: bubble-movement 9s infinite ease-in -3.65s;
}
.bubble-7 {
    bottom: 9px;
    left: 3%;
    animation: bubble-movement 9s infinite ease-in -3.57s;
}
.bubble-8 {
    bottom: 5px;
    left: 56%;
    animation: bubble-movement 9s infinite ease-in -3.84s;
}
.bubble-9 {
    bottom: 5px;
    left: 38%;
    animation: bubble-movement 9s infinite ease-in -3.86s;
}
.bubble-10 {
    bottom: 10px;
    left: 19%;
    animation: bubble-movement 9s infinite ease-in -3.17s;
}
.bubble-11 {
    bottom: 6px;
    left: 21%;
    animation: bubble-movement 9s infinite ease-in -1.8s;
}
.bubble-12 {
    bottom: 3px;
    left: 79%;
    animation: bubble-movement 8s infinite ease-in -1.5s;
}
.bubble-13 {
    bottom: 10px;
    left: 44%;
    animation: bubble-movement 8s infinite ease-in -3.38s;
}
.bubble-14 {
    bottom: 6px;
    left: 46%;
    animation: bubble-movement 8s infinite ease-in -3.56s;
}
.bubble-15 {
    bottom: 7px;
    left: 49%;
    animation: bubble-movement 8s infinite ease-in -3.58s;
}
.bubble-16 {
    bottom: 6px;
    left: 50%;
    animation: bubble-movement 5s infinite ease-in -1.05s;
}
.bubble-17 {
    bottom: 8px;
    left: 82%;
    animation: bubble-movement 8s infinite ease-in -1.84s;
}
.bubble-18 {
    bottom: 11px;
    left: 56%;
    animation: bubble-movement 5s infinite ease-in -2.26s;
}
.bubble-19 {
    bottom: 5px;
    left: 67%;
    animation: bubble-movement 8s infinite ease-in -2.63s;
}
.bubble-20 {
    bottom: 3px;
    left: 64%;
    animation: bubble-movement 8s infinite ease-in -3.14s;
}
.bubble-21 {
    bottom: 3px;
    right: 4%;
    animation: bubble-movement 8s infinite ease-in -3.64s;
}
@keyframes bubble-movement {
    0% {
        transform: translate3d(-50%, 0, 0);
        height: 1px;
        width: 1px;
   }
    100% {
        transform: translate3d(-50%, -1200px, 0);
        height: 75px;
        width: 75px;
   }
}