/*

Snapshot Template
http://www.templatemo.com/tm-493-snapshot

*/

/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 77).

The 'supports' rule will only run if your browser supports CSS grid.

Flexbox is used as a fallback so that browsers which don't support grid will still recieve an identical layout.

*/

:root {
	/* Base font size */
	font-size: 10px;
}
.hiddenOnDesktop{
  display: none;
}
#map{
	margin-bottom:30px;
}
.linkInText:hover{
  color:  #3e199a !important;
}
.zoomOnHover{
  transition: transform 400ms ease-out;
}
.iconFbg{
  height: 80px!important;;
}
.zoomOnHover:hover{
  transform: scale(1.05);
}

.indexLien{
  box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  width: auto;
}
#navright{
  margin-top: 7px;
}
.container-gallery {
	max-width: 100rem;
	margin: 0 auto!important;
	padding: 0 2rem 2rem;
}

#contactTitle{
  padding-bottom:10px!important;
}
#titleIndex{
  font-size: 5rem!important;
  letter-spacing: 10px;
  line-height: 70px;
}

#titleHome{
  font-size: 4rem!important;
  letter-spacing: 10px;
  line-height: 70px;
}

.gallery-studio {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}

.gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	/*a activer si ca bug flex: 1 0 40rem;*/
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
  
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
  overflow-clip-margin: unset;
  overflow: visible;
	transition: transform 400ms ease-out;
}
#gallerie{
  margin-bottom:150px!important;
  margin-top:100px;
}
.gallery-image:hover {
	transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling.

*/

@supports (display: grid) {
	.gallery-studio {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    /*grid-template-columns: repeat(3, minmax(40rem, 1fr));*/
		grid-gap: 1rem;
    grid-auto-rows: 30rem;
	}
  
  .gallery-salons {
      display: grid;
      grid-template-columns: repeat(auto-fit, 700px);
      justify-content: center;
      grid-auto-rows: 30rem;
     
  }
  .gallery-coiffure {
    display: grid;
    grid-template-columns: repeat(auto-fit, 40rem);
    justify-content: center;
    grid-auto-rows: 40rem;          
   
}
	.gallery-studio,
	.gallery-item {
		margin: 0;
	}
}


/*
Modifs elias
*/
#title{
  margin-top:8px;
  color: #2d1960;
  font-size: 35px;
}
#title:hover{
  color: #c47f00;
}

#icon{
  padding-top:0px;
  margin-bottom: -6px;
  height:70px;
  width:auto;
  transition: transform .7s ease-in;
  margin-top: 5px;
}

#figure-salon{
  margin-right:50px;
}
#retour{
  color:#351d72;
  font-weight: 600!important;
}

.textUnderImage{
  opacity: 50%!important;
  font-size: 16px;
}

#retour:hover{
  color:#511fd2!important;
}

#fa-tel{
  height:40px;
  width:auto;

}

.blocHome{
	margin-top:220px;
}

.blocHomeIndex{
	margin-top:180px;
}

#icon-studio{
  height:100px;
  width:auto;
  margin-bottom:20px;
}

.colorOrange{
  color:#f8c059
}
.colorPurple{
  color:#2d1960
}

	/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
	.flip-box {
    /*background-color: transparent;*/
    width: 500px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 500px;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the back side */
  .flip-box-back {
    transform: rotateY(180deg);
  }
  
  #outer {
    width:100%;
    display: flex;
    justify-content: center;
  }

.gallery-title{
  padding-top:60px;
  color:#2d1960;
}


#carte-assoc{
  padding-top: 35px!important;
}

.bold{
    font-weight:600;
}

.btnDetail{
  font-weight: 500;
}
.btnDetail:hover{
  background-color: #2d1960;
}
.msgIndisponible{
  text-align:center;
  color:#c47f00;
  font-weight:500;
}
#locationSlider{
  margin: auto;
  width: 80%;
  height:250px;
  box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
}
.gallerieSalon{
  margin-top:20px!important;
}
.salons{
 padding-bottom: 0px!important;
}

/* Body
------------------------------------- */
body{
    background: #ffffff;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300;
    position: relative;
}

html,body {
  width: 100%;
  overflow-x: hidden;
}

html {
  font-size: 100%;
}


/*---------------------------------------
    Typography
-----------------------------------------*/

/* definition */
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Regular.ttf');
  src: url('../fonts/SourceSans3-Regular.ttf') format('☺'),
      url('../fonts/SourceSans3-Regular.ttf') format('woff'),
      url('../fonts/SourceSans3-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1,h2,h3,h4 {
  font-weight: 300;
}

h1 {
  font-size:3rem;
  line-height: 3rem;
  letter-spacing: 7px;
  text-transform: uppercase;
  padding-bottom: 8px;
}

h2 {
  color: #eca41f;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.5rem;
}

h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

p {
  color: #888;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 34px;
}







#home p,
#contact p, footer p {
  color: #f9f9f9;
}

.btn {
  border:none;
  border-radius: 4px;
  transition: all 0.4s ease-in-out;
}



.btn:focus {
  background: #eca41f;
  border-color: transparent;
}

.btn-success {
  background: #c18619;
  font-weight: 300;
  letter-spacing: 2px;
  padding: 14px 32px;
  margin-top: 26px;
}
.btn-success:hover {
  background: #2f1868;
}

.marginTopRow{
  /*margin-top: 30%;*/
  padding-top:26rem;
  
}
.marginTopRowAuxAnges{
 /* margin-top: 15%!important;*/
 padding-top:15%;
}
a {
  color: #eca41f;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none !important;
}
a:hover, a:active, a:focus {
  color: #eca41f;
  outline: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#contact h1{
  color: #eca41f;
}

/*---------------------------------------
    All Section style
-----------------------------------------*/

.section-title {
  padding-bottom: 42px;
}

.credits{
  font-size: 12px;
}

.section-title h1{
  font-weight: 600;
  color: #2d1960;
}

#about .section-title {
  padding-top: 82px;
}

#about .section-title h1 {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
#contact{
  padding-top:30px;
}

#about,
.gallery {
  padding-top: 120px;
  position: relative;
}

.sub-gallery{
  padding-bottom: 0px!important;
  padding-top:0px!important;
  margin-bottom: 40px!important;
}

.gallery,
#contact, footer {
  text-align: center;
}

.overlay {
  background: #304352;
  opacity: 0.9;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
}



/*---------------------------------------
    Pre Loader Style
-----------------------------------------*/

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 #fff;
}

.sk-spinner-pulse {
  width: 60px;
  height: 60px;
  background-color: #eca41f;
  border-radius: 100%;
  margin: 40px auto;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
          animation: sk-pulseScaleOut 1s infinite ease-in-out; }

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }



/*---------------------------------------
    Main Navigation
-----------------------------------------*/

.navbar-default {
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.04);
  border: none;
  margin-bottom: 0px !important;
}

.navbar-default .navbar-brand {
  color: #000000;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
}

.navbar-default .navbar-nav li a {
    color: rgb(93, 93, 93);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    padding-right: 22px;
    padding-left: 22px;
}

.navbar-default .navbar-nav li a span {
  position: relative;
  display: block;
  padding-bottom: 2px;
}

.navbar-default .navbar-nav li a span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navbar-default .navbar-nav li a:hover span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

.navbar-default .navbar-nav li.active a span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  background-color: #62626276;
}

.navbar-default .navbar-nav li.active a span{
  color:#de9100;
}

.navbar-default .navbar-nav > li a:hover {
    color: #de9100 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #777;
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #304352;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
     border: none;
     padding-top: 10px;
  }

.navbar-default .navbar-toggle .icon-bar {
    border-color: transparent;
  }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

@media screen and (max-width: 768px) {

  .navbar-default .navbar-nav li a span:before {
    background: transparent !important;
  }
  .navbar-default .navbar-nav li.active a {
    background: transparent;
    background: none;
    color: #304352 !important;
  }
  .navbar-default .navbar-nav li.active a span:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}



/*---------------------------------------
    Home Section
-----------------------------------------*/

#home {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
        align-items: center;
  height: 100vh;
  text-align: center;
}

#home h1 {
  color: #ffffff;
}

#home .col-md-8 {
  padding-left: 62px;
}



/*---------------------------------------
    About Section
-----------------------------------------*/

#about {
  background: #f0f0f0;
}

#about .item {
  width: 100%;
  display: block;
}

#about .about-thumb {
  background: #ffffff;
  border-radius: 4px;
  padding: 100px;
  position: relative;
}

#about .about-img img {
  border: 8px solid #ffffff;
  position: absolute;
  left: -120px;
  bottom: -325px;
  padding: 12px;
}

#about .team-thumb {
  width: 100%;
  height: 400px;
  margin: 32px 0;
  text-align: center;
  background: #ffffff;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#about .team-thumb .image-holder {
  position: relative;
  top: 40px;
  display: inline-block;
  margin-bottom: 40px;
  padding: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#about .team-thumb .heading {
  font-weight: bold;
  position: relative;
  top: 10px;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#about .team-thumb:hover {
  background: #304352;
}

#about .team-thumb:hover .image-holder {
  top: -40px;
  margin-bottom: 0px;
}

#about .team-thumb:hover .heading {
  top: -10px;
}

#about .team-thumb .description {
  font-size: 18px;
  width: 80%;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#about .team-thumb:hover .description {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#about .team-thumb:hover p.description {
  color: #ffffff;
}



/*---------------------------------------
    Galllery section
-----------------------------------------*/

.gallery {
  background: #ffffff;
}

.gallery .gallery-thumb {
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
  cursor: pointer;
  display: block;
  margin-bottom: 25px;
  position: relative;
  top: 0px;
  transition: all 0.4s ease-in-out;
}

.gallery .gallery-thumb:hover {
  box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
  top: -5px;
}

.gallery .gallery-thumb img {
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  width: 100%;
}



/*---------------------------------------
    Contact section
-----------------------------------------*/

#contact, footer {
  background: #304352;
  color: #ffffff;
  margin-top:120px;
}





/*---------------------------------------
    Footer section
-----------------------------------------*/

footer {
  padding-bottom: 80px;
}



/*---------------------------------------
    Social icons style
-----------------------------------------*/

.social-icon {
  padding: 0;
  margin: 0;
}

.social-icon li {
  list-style: none;
  display: inline-block;
  width: 250px;
}

.social-icon li a {
  border-radius: 50px;
  background: #eca41f;
  font-size: 20px;
  width: 70px;
  height: 70px;
  line-height: 60px;
  text-align: center;
  margin: 10px 10px 42px 10px;
  padding: 0px;
}

/*---------------------------------------
   Back top
-----------------------------------------*/

.go-top {
  background-color: #ffffff;
  box-shadow: 1px 1.732px 12px 0px rgba( 0, 0, 0, .14 ), 1px 1.732px 3px 0px rgba( 0, 0, 0, .12 );
  transition : all 1s ease;
  bottom: 2em;
  right: 2em;
  color: #222;
  font-size: 26px;
  display: none;
  position: fixed;
  text-decoration: none;
  width: 40px;
  height: 40px;
  /*line-height: 35px;*/
  text-align: center;
  border-radius: 100%;
}

.go-top:hover {
  background: #eca41f;
  color: #ffffff;
}



/*---------------------------------------
   Responsive Mobile
-----------------------------------------*/

@media (max-width: 980px) {
  .hiddenOnDesktop{
    display: initial;
  }
  #titleIndex{
    font-size: 4rem!important;letter-spacing: 10px;line-height: 40px;
  }
  .gallery-coiffure,
  .gallery-salons{
    grid-template-columns: repeat(auto-fit, 95%);
  }

  #texteAssocMobile{
    margin-bottom: 80px;
  }
  .imgCoiffure{
    width: 190px!important;;
  }
  .blocHome{
    margin-top: 40px;
  }
  .marginTopRow{
    margin-top: 15%!important;
  }
  #txtIndexHome p{
    font-size: 15px!important;
  }
  .gallery-title{
    padding-top:0px;
    display: flex;
    justify-content: center;
  }

  #about .team-thumb {
    margin-top: 32px;
  }
	.hiddenOnMobile{
		display:none;
	}
  #title{
    margin-top: auto;
  }
  
  #icon{
    height:50px!important;
    margin-top:7px;
  }
  
	#map{
		width:85%;
	}



.slideIndex{
  height: 100%;;
}

.blocHome{
	margin-top:80px;
}

  #title{
    padding-right:0px;
  }
  
.navbar-default .navbar-brand{
  font-size:23px;
}


}


@media (max-width: 767px) {

  #home, .overlay {
    height: 1000px;
  }
  .overlayAuxAnges{
    height: 1300px!important;
  }
  .slideChambre5{
    height: 1300px!important;
  }
  #about .about-thumb {
    padding: 32px;
    margin-bottom: 32px;
    text-align: center;
  }

  #about .col-md-3 img {
    position: relative;
    top: 0;
    left: 0;
  }

	.grid figcaption small{
		font-size:12px!important;
		letter-spacing: 0px!important;
	}
  .grid figcaption h1{
		font-size:14px!important;
		letter-spacing: 4px!important;
	}
}



@media (max-width: 850px) {

 /* h1 {
    font-size: 1.8rem!important;
  }
*/
  p {
    font-size: 18px;
  }

  img {
    width: 100%;
  }

  #about,
  .gallery,
  #contact {
    padding-top: 40px;
    padding-bottom: 0px;
  }

}