/*@import url("https://use.typekit.net/ddm7kvr.css");*/

@import url("css/ddm7kvr.css");




@font-face {
  font-family: 'futura-medium';
  src: url('FuturaStd-Medium.otf');
}

@font-face {
  font-family: 'futura-bold';
  src: url('FuturaStd-Bold.otf');
}

@font-face {
  font-family: 'futura-light';
  src: url('FuturaStd-Light.otf');
}

@font-face {
  font-family: 'futura';
  src: url('FuturaStd-Book.otf');
}



* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  /*  font-family: futura-pt, sans-serif;*/
    
    /*font-family: futura, sans-serif;*/
    font-family: futura, sans-serif;
    
 /* font-display: auto;*/
    /*overflow: auto;*/
    transition: all 1s;

}

html, body{
    height: 100%;
    width: 100%;
     color: #2B3441;
    overflow-wrap: break-word;
    font-weight: 400; /* 500 */
   /* overflow-x: hidden;*/
   font-size: 100%;
}

#hp {
  margin: 0;
     background-image: url('img/fondhp.svg'); /*.png*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);

    /*width: 100vw;*/
}

/*
.container-fluid {
min-height: 100%;
    height: 100%;
}*/



.orange{
    color: #C96B54;
}


/*****************LOADER***************/



@keyframes tourne {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.container-loader {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: #F2E9E1; 

}

.aucentre{
	
	width: 100%;
	height:100%;
	transform: translate(-60px, -60px);
	-webkit-transform: translate(-60px, -60px);
}

.loader {
	border: 20px solid transparent;
	border-bottom: 20px solid #C96B54;
	border-top: 20px solid #C5CAC6; 
	border-radius: 50%;
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	animation: spin 2s linear infinite;
	-webkit-animation: spin 2s linear infinite;

}



/*********************************/

/*
.container-loader {
	padding:0;
	margin: 0;
    font-size: 15rem;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #59b130; 
    transition: all 1s ease-in-out;
}

.container-loader div{
	width: 100%;
	position: absolute;
    top: 45%;
    text-align: center;
    transform: translate(0, -50%);
   	margin: 0 auto;

    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
		 transition: all 1s ease-in-out;
	} 
	
.loader {
    border: 20px solid transparent;
    border-bottom: 20px solid #F75C03;
    border-top: 20px solid #fff; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    z-index: 1001;
    transition: all 1s ease-in-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

*/


.active{
    color: #C5CAC6!important;
}

/*
.nav-link.active::after {
    margin: 0 auto;
    display: block;
  content: ""; 
  width:3px;
 height:3px;
 border-radius:50%;
 background: #C5CAC6;
}*/

.navbar-brand.active{
   opacity: .5!important;
}


.fakeimg {
    height: 400px;
    background: #aaa;
  }


.navbar{
    opacity: .8;
    padding: 2px 20px;
    height: 50px;
}

.navbar-brand{
    margin-left: .5rem;
    margin-right: .5rem;
}
.brand-mobile{
    display: none;
}

.nav-link{
    padding: 0;
}


.navbar-light .navbar-nav .nav-link{
        text-align: center;
/*font: Book 12px/16px Futura Std;*/
    font-size: 11px;
letter-spacing: 2.4px;
color: #2B3441;
text-transform: uppercase;
    opacity: 1;
    margin-right: .5rem;
    margin-left: .5rem;
   
}
/*
.navbar-light .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)");
}*/

.navbar-toggler{
   border: none;
   /* border-radius: 0;
    box-shadow:  2px 2px 2px #F2E9E1;*/
}
.navbar-toggler:hover{
    /*box-shadow: inset 2px 2px 2px #F2E9E1;*/
   /* background-color: #F2E9E1;*/
}

.navbar-toggler:active{
    box-shadow: inset 2px 2px 2px #F2E9E1;
}


button:focus{
   outline:  none; /*2px auto #C96B54;*/
   
}


.logo-container{
    /*flex-direction: column;*/
    align-items: center; 
    justify-content: center; 
    /*height: 100vh;*/
    align-content: center;
        
height: -moz-available;          /* WebKit-based browsers will ignore this. */
height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
height: fill-available;
     height: 100%;
    /*height: 100vh;*/
    /*min-height: 100vh;*/
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
   
} 

.logo {
  margin: 0;
     background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;

  /* height: 100vh;*/
   /* width: 100vw;*/
}

#studio{
    padding : 5%;
   background-image: url(img/quartier-chartrons.svg); 
    background-position: 90% 20%; 
    background-repeat: no-repeat;  
    background-size: 150px;
 
   /* background-color: #F2E9E1; */
    /*padding-top: 9vh;
    padding-bottom: 9vh;
    padding-right: 10%;
    padding-left: 5%;
        flex-direction: column;
    display: flex;
    justify-content: center;*/

}


#studio p{
    padding-top: 5vh;
    padding-bottom: 5vh;
}

/*
#studio p{
        background-image: url(img/quartier-chartrons.svg); 
    background-position: 90% 35%; 
    background-repeat: no-repeat;  
}
*/
.fond{
    
    background: rgba(255,255,255,1);
    

background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(242,233,225,1) 25%, rgba(242,233,225,1) 70%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
    
    /*
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 37%, rgba(242,233,225,1) 38%, rgba(242,233,225,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(37%, rgba(255,255,255,1)), color-stop(38%, rgba(242,233,225,1)), color-stop(67%, rgba(242,233,225,1)), color-stop(67%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
    
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 37%, rgba(242,233,225,1) 38%, rgba(242,233,225,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 37%, rgba(242,233,225,1) 38%, rgba(242,233,225,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 37%, rgba(242,233,225,1) 38%, rgba(242,233,225,1) 67%, rgba(255,255,255,1) 67%, rgba(255,255,255,1) 100%);
    
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );*/
    
}

h1{
    text-decoration: underline;
letter-spacing: 3.5px;
    margin-right:  -3.5px;
    margin-bottom: 3rem;
color: #2B3441;
text-transform: uppercase;
    font-size: 15px; /*1rem;*/
    font-weight: 400;
}

h2{

letter-spacing: 11.2px;
    margin-right: -11.2px;
color: #2B3441;
text-transform: uppercase;
     font-size: 24px; /* 1.8rem*/
    font-weight: 400;
    line-height: 2rem;
    /*letter-spacing: 3.4px;*/
   /* margin-right: -3.4px;*/
}


h3{

letter-spacing: 3.8px;
color: #2B3441;
    font-size: 14px; /*1.1rem;*/
    font-weight: 400;
}

.more{

    font-size: 16px; /*1.1rem;*/
    font-family: futura;
}

h4{
    text-align: center;
    letter-spacing: 8.8px; /* 8.8 */
    margin-right: -8.8px;
    color: #2B3441;
    text-transform: uppercase;
     font-size: 20px; /*1.3rem;*/
    line-height: 2rem;
    font-weight: 400;
}

h5{
text-align: center;
letter-spacing: 3.9px;
color: #2B3441;
text-transform: uppercase;
     font-size: 13px; /*.7rem;*/
   /* padding-left: 15%;
    padding-right: 15%;*/
    font-weight: 400;
    line-height: 19px;

}

.plus{
    text-align: center;
font-family: futura-light;
letter-spacing: 24.8px;
margin-right:  -24.8px;
    font-size: 48px;
}

p a {
    text-decoration: underline;
    font-weight: 400;
  font-size: 13px;
letter-spacing: 3.9px;
    margin-right:  -3.9px;
/*color: #C96B54;*/
text-transform: uppercase;
    padding: .3rem;
}

a.text0{
letter-spacing: 7px;
    margin-right:  -7px;
}
/*p */

#studio a, .lienplanning a {
    text-decoration: underline;
    font-weight: 400;
  font-size: 13px;
letter-spacing: 3.9px;
    margin-right:  -3.9px;
color: #C96B54;
text-transform: uppercase;
    padding: .3rem;
}

/*
.content {
	background-color: #FF495D;
	height: 100%;
	width: 100%;
}*/

adress{
   /* font: Medium 30px/46px FreightBig Pro;*/
    font-size: 30px;
letter-spacing: 3px;
color: #2B3441;
    font-family: freight-big-pro;
}

.social{
  font-size: 13px;
    text-decoration: underline;
/*font: Book 13px/19px Futura Std;*/
letter-spacing: 3.9px;
color: #C96B54;
text-transform: uppercase;
    padding: .3rem;
}

.mentions{
   /* font: Medium 10px/14px Futura Std;*/
letter-spacing: 3px;
    font-size: 0.5rem; /*0.6rem*/
    color: #FFFFFF;
    text-transform: uppercase;
}

.mentions:hover{
    text-decoration: underline;
    color: white;
}

footer{
    background-color: #2B3441;
    color: white;
    padding: 10px;
    padding-left: 28px!important;
    padding-right: 28px!important;
}


.logofooter{
    padding-right: 18px;
    width: 180px;
}


#actu p{
    letter-spacing: 4px;
    font-size: 13px;
    line-height: 24px;  /*39*/
    text-transform: uppercase;
    font-weight: 400;
}


/*#actu*/ #actu .textgauche{
    text-transform: uppercase;
    font-size: 24px;
    line-height: 42px;
    font-weight: 400;
    letter-spacing: 9px;
   /* padding-right: 2rem;*/
    color: #2B3441;
    font-family: futura-medium;
    font-family: futura;
}
 #actu .textdroite2{
    letter-spacing: 1px;
    font-family: freight-big-pro;
    font-size: 20px;
    font-weight: 200;
     text-transform: none;
}


#actu .textmaj{
    text-align: center;
letter-spacing: 4px; /*3.2*/
color: #2B3441;
    font-size: 16px;
    text-transform: uppercase;
line-height: 39px;

    padding-top: 2.5rem;
    font-weight: 400;

}

/****page pilates****/


#pilates h1{
    letter-spacing: 28.8px;
   margin-right: -28.8px;
    text-transform: uppercase;
    text-decoration: none;
    /*font-size: 48px;*/
    font-size: 2.6rem;
    line-height: 68px;
    margin-bottom: 1rem;
}


#pilates h2{
    text-decoration: underline;
    letter-spacing: 3.5px; 
    margin-right: 3.5px;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}

#pilates h3{
    letter-spacing: 4.2px; /*4.2*/
    font-size: 21px;
    line-height: 29px;
    padding-bottom: 2.5rem;
    padding-top: .5rem;
    font-weight: 500;
    /*font-family: futura-medium;*/
    font-family: futura, sans-serif;
}

.text0{
    text-transform: uppercase;
    letter-spacing: 4px; /* 5.6 */ /*6  7*/
    line-height: 30px;
    font-size: 16px;
    font-weight: 500;
    font-family: futura, sans-serif; /*-medium*/
}
a.text0 {
    text-decoration: none;
}
a.text0:hover {
    text-decoration: underline;
    color: #C96B54;
}
/*
a.text0 {
    text-decoration: underline;
    font-weight: 400;
  font-size: 13px;
letter-spacing: 3.9px;
color: #C96B54;
text-transform: uppercase;
    padding: .3rem;
}*/

#pratiques{
    background-color: white;
}


#pilates {
  margin: 0;
    background-image: url('img/fondpilates.svg');
   /*background: #C96B54 0% 0% no-repeat padding-box;*/
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: left;
   /* height: 100vh;
    width: 100vw;*/
}

#pilates .logo{
    z-index: 1025;
}

#pilates .titregris{
    letter-spacing: 3.8px;
     font-size: 19px;
        padding-right: 10%;
    padding-left: 10%;
   /* padding-top: 5%;*/
        padding-bottom: 0;
}
  
strong{
    font-family: freight-big-pro;
}

.textgris{
  
    font-size: 20px;
letter-spacing: 1px;
    font-family: freight-big-pro;
    font-weight: 300;
    line-height: 39px;
    padding-right: 10%;
    padding-left: 15%;
    padding-top: 5%;

}


.fixed{
    position:fixed;
   /* z-index: 1020;*/
    top: 0 ;
    right: 0;
}

#pilates .textmaj{
    text-align: center;
letter-spacing: 4px; /*3.2*/
color: #2B3441;
    font-size: 16px;
    text-transform: uppercase;
line-height: 39px;
    /*padding-top: 0;*/
    /*padding-bottom: 10%;*/
    padding-top: 2.5rem;
    text-align: left;
    font-weight: 400;

}

 .point::after {
   /* margin: 0 auto;*/
    display: block;
  content: ""; 
  width:6px;
 height:6px;
 border-radius:50%;
 background: #2B3441;
margin-top: 4rem;
}



#pilates .textmaj2{
    text-align: center;
letter-spacing: 3.8px;
color: #2B3441;
    font-size: 1rem;
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-weight: 400;
    line-height: 2rem;
    padding-top: 1rem;
}

#methodepilates{
    flex-direction: column;
    display: flex;
    /*justify-content: center;*/
    background-color: #F2E9E1; /*white;*/
    /*padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 5%;
    padding-right: 15%;*/
    padding: 10%; /*4rem;*/
}

.text1{
    text-transform: uppercase;
    color: #F2E9E1;
    letter-spacing: 7px;
    text-align: right;
    font-size: 23px; /* 1.5rem;*/
    line-height: 45px;
    padding-right: 10%;
    padding-left: 20%;
    padding-top: 15%;
    font-weight: 200;
}

#pilates .text2{
    text-transform: uppercase;
    letter-spacing: 7px;
    text-align: left;
    font-size: 23px;
    line-height: 45px;
    padding-right: 0;
    padding-left: 0;
    padding-top: 6rem;
    padding-bottom: 1rem; 
   /* padding-top: 10%;*/
    font-weight: 500;
    font-family: futura-medium;
}

#pilates #blocgris{
    padding-bottom: 5%;
    padding-top: 5%;
}


.bg1 {
  /* The image used */
  background-image: url("img/pilates1.jpg");

  /* Full height */
 /* height: 100%;
    width: 50%;*/

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    
   /*      background-image: url('img/fondhp.png');*/
    background-repeat: no-repeat;
  /*  background-attachment: fixed;
    background-size: cover;
    background-position: center;*/
}




/****page pilates - LES COURS****/

#pilates .textgauche{
    text-transform: uppercase;
    font-size: 24px;
    line-height: 42px;
    /*font-weight: 500;*/
    font-weight: 400;
    letter-spacing: 9px;
    padding-right: 2rem;
    color: #2B3441;
    font-family: futura-medium;
    font-family: futura;
}

#pilates .textdroite{
    letter-spacing: 4.5px;
    font-size: 15px;
    text-transform: uppercase;
    /*font-weight: 500;*/
    font-weight: 400;
    margin-bottom: .5rem;
}

#pilates .textdroite2{
    letter-spacing: 1px;
    font-family: freight-big-pro;
    font-size: 20px;
    font-weight: 200;
}



.fond2{
    
    background: rgba(255,255,255,1);
    
background: linear-gradient(rgba(242,233,225,1) 0%, rgba(242,233,225,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
    
}

#pilates .imgrond{
    
    width: 50%;
   /* width: 400px;*/
    position: absolute;
    bottom: -5%;
    left: -10%;
}


.logoaccueil{
    max-width: 80%; 
    width: 380px; 
    margin-top: 100px;
}

 .fleche{
    max-width: 100%; 
}

/********responsive***********/


@media only screen and (max-width: 1100px) {
    
    #pilates .imgrond{
    width: 200px;
        width: 40%;
}

    
}
@media only screen and (max-width: 992px) {
    
    #pilates .imgrond{
    display: none;
}

    .navbar{
        height: auto;
        padding: 4px 20px;
    }
    .nav-link{
        padding: 1rem;
    }
    
    .bg-light{
        background-color: transparent!important;
    }
    
    
    .navbar-brand{
    display: none;
}
.brand-mobile{
    display: block;
    
}
    
    .navbar .collapse.show{
        
       /* background-color: rgba(255, 255, 255, 0.8);*/
        
    }
        .navbar-mobile{
        opacity: 1;
        background-color: rgba(255, 255, 255, 1)!important;
            
           
        
    }
    
    .navbar-mobile .navbar-collapse{
        height: calc(100vh - 40px);
       /* display: flex;
        flex-direction: column;*/
        justify-content:flex-start!important; 
        padding-top: 10vh;
    }
    
    .navbar-light .navbar-nav .nav-link{
        font-size: 16px;
        letter-spacing: 6px;
        padding: 1.4rem;
    }

}

    .lienplanning{
         /*  padding-left: 10%;
        padding-right: 10%;*/
        text-align: left;
    }
    

@media only screen and (max-width: 768px) {
    
   /* #pilates .imgrond{
    display: none;
}*/
    
    .logoaccueil{
 
    margin-top: 0;
}
     .fleche{
  display: none;
}
    
    #pilates .textmaj{
        padding-bottom: 10%;
       /* padding-left: 10%;
        padding-right: 10%;*/
    }
    
    
        #pilates .textmajmobile2{
        padding-left: 10%; 
        padding-right: 10%;
    }
    
        #pilates .text2{
        padding-left: 10%;
        padding-right: 10%;

    }
        #pilates .textmaj2{
      padding-left: 10%;
        padding-right: 10%;
    }
    
                #pilates .textdroite{
        padding-left: 10%;
        padding-right: 10%;
    }
        #pilates .textdroite2{
      padding-left: 10%;
        padding-right: 10%;
    }
    .lienplanning{
         /*  padding-left: 10%;
        padding-right: 10%;*/
        text-align: center;
    }
    
        #ensavoirplus{
          padding-left: 10%;
        padding-right: 10%;
    }
    
    
    #pilates .textgauche{
        text-align: center;
        margin-top: 1.5rem;
        margin-bottom: 0;
}
    
   /* html{
        font-size: 80%;
    }*/

    
}


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

    .text0{
        display: none;
    }
    
    #pilates h1{
        letter-spacing: 5vw;
        font-size: 10vw;
    }
    
    

}


/*********page GIROKINESIS*****************/



#giro {
  margin: 0;
    /*background-image: url('img/fondgiro.png');*/
     background-image: url('img/fondgyro.svg');
    
   /*background: #C96B54 0% 0% no-repeat padding-box;*/
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: left;
   /* height: 100vh;
    width: 100vw;*/
}


#giro h1{
    letter-spacing: 28.8px;
    text-transform: uppercase;
    text-decoration: none;
    /*font-size: 48px;*/
    font-size: 2.6rem;
    line-height: 68px;
 /*   font-weight: 500;*/
    margin-bottom: 1rem;
}



#giro h2{
    text-decoration: underline;
    letter-spacing: 3.5px; 
    margin-right: 3.5px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 400;
}

#giro h3{
    letter-spacing: 4.2px;
    font-size: 21px;
    line-height: 29px;
    padding-bottom: 2.5rem;
    padding-top: .5rem;
    font-weight: 500;
    /*font-family: futura-medium;*/
    font-family: futura, sans-serif;
}


#giro #blocgris1{
    padding: 10%;
    background-color: #C5CAC6;
}


#giro .titregris{
    letter-spacing: 3.8px;
     font-size: 19px;
        padding-right: 10%;
    padding-left: 15%;
    /*padding-top: 5%;*/
        padding-bottom: 0;
}
  
#giro .textmaj{
    letter-spacing: 4px; /*3.2*/
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 39px;
    padding-top: 2.5rem;
  
   
}


.textmaj{
    letter-spacing: 4px; /*3.2*/
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 39px;
    padding-top: 2.5rem;
  
   
}


#giro .textmaj2{
    letter-spacing: 3.8px;
    color: #2B3441;
    font-size: 1rem;
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-weight: 400;
    line-height: 2rem;
    padding-top: 1rem;
}

#giro .textmaj3{
letter-spacing: 7px;
    font-size: 23px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 45px;
    padding-top: 10%;
}



#giro .textgauche{
    text-transform: uppercase;
    font-size: 24px;
    line-height: 42px;
    font-weight: 500;
    letter-spacing: 9px;
    padding-right: 2rem;
}

#giro .textdroite{
    letter-spacing: 4.5px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: .5rem;
}

#giro .textdroite2{
    letter-spacing: 1px;
    font-family: freight-big-pro;
    font-size: 20px;
    font-weight: 200;
}

#giro .text2{
    text-transform: uppercase;
    letter-spacing: 6.9px;
    text-align: left;
    font-size: 23px;
    line-height: 58px;
    padding-right: 0;
    padding-left: 0;
   /* padding-top: 6rem;*/
     padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 500;
    font-family: futura-medium;
    
}


#giro #blocgris2{
    padding-bottom: 5%;
    padding-top: 5%;
}


    
.giro2{
    max-width: 100%; 
    padding-top: 10%; 
    padding-bottom: 10%; 
}

/********responsive***********/

@media only screen and (max-width: 768px) {
    
    html{
        font-size: 90%;
    }

#giro .text2{
 padding-right: 10%;
padding-left: 10%;
    }

#giro .textmaj2{
 padding-right: 10%;
padding-left: 10%;
    }
    

    #giro #cours{
       padding-left : 10%;
        padding-right: 10%;
    }
    
    #giro .lienplanning{
        text-align: center;
    }    
    
        #giro .textgauche{
        text-align: center;
        margin-top: 1.5rem;
        margin-bottom: 0;
}
    
    
}

/*********page AUTRES PRATIQUES*****************/



#autres {
  margin: 0;
    background-image: url('img/fondautres.svg');
   /*background: #C96B54 0% 0% no-repeat padding-box;*/
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: left;
   /* height: 100vh;
    width: 100vw;*/
}


#autres h1{
    letter-spacing: 28.8px;
    margin-right:  -28.8px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 2.6rem;
   /* font-size: 48px;*/
    line-height: 68px;
   margin-bottom: 1rem;
}


#autres h2{
    text-transform: uppercase;
    letter-spacing: 16px;
   /* text-align: left;*/
    font-size: 35px; /*41*/
   line-height: 67px;
    padding-right: 0;
    padding-left: 0;
    padding-top: 10%;
    font-weight: 500;
}

#autres h3{
    letter-spacing: 4.2px;
    font-size: 21px;
    line-height: 29px;
    padding-bottom: 2.5rem;
    padding-top: .5rem;
    /*font-family: futura-medium;*/
    font-family: futura, sans-serif;
}


#autres #yogalink, #autres #hathalink{
    color: #C96B54;
}



#autres #blocrose{
    padding: 10%;
    background-color: #F2E9E1;
            flex-direction: column;
    display: flex;
    justify-content: center;
}

#autres .prof{
    letter-spacing: 3.8px;
    font-size: 19px;
    line-height: 29px;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    font-weight: 500;
}



#autres .titregris{
    letter-spacing: 3.8px;
     font-size: 19px;
        padding-right: 15%;
    padding-left: 15%;
    padding-top: 5%;
        padding-bottom: 0;
}
  
#autres .textmaj{

letter-spacing: 3.2px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 2rem;
    padding-top: 10%;
}

#autres .textmaj2{
    letter-spacing: 4px; /*3.8*/
    font-size: 13px; /*0.8rem*/
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    font-weight: 400;
    line-height: 33px;
    padding-top: 1rem;
    font-family: futura;
    font-family: futura-medium;
    font-family: futura-light;
}

#autres .textmaj3{
letter-spacing: 6px;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 50px;
    padding-top: 10%;
}



#autres .textgauche{
    text-transform: uppercase;
    font-size: 30px;
    line-height: 42px;
    font-weight: 500;
    letter-spacing: 9px;
    padding-right: 2rem;
}

#autres .textdroite{
    letter-spacing: 4.5px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: .5rem;
}

#autres .textdroite2{
    letter-spacing: 1px;
    font-family: freight-big-pro;
    font-size: 20px;
    font-weight: 200;
}

#autres .text2{

        text-decoration: underline;
    letter-spacing: 3.5px; 
    margin-right: 3.5px;
    font-size: 15px;
text-transform: uppercase;

    font-weight: 400;
}



#autres .textrose{
      font-size: 20px;
letter-spacing: 1px;
    font-family: freight-big-pro;
    font-weight: 300;
    line-height: 39px;
        padding-bottom: 2.5rem;
}


#blocplanningblanc{
    background-image: url(img/adressrond.svg); /* png*/
    background-position: 90% 35%; /* 90 20*/
    background-repeat: no-repeat;   
    background-color: #FFF; 
    /*padding-top: 10%;
    padding-bottom: 10%;
    padding-right: 5%;
    padding-left: 5%;*/
   /* padding: 3rem; 
    padding-top: 4rem; */ 
    padding-top: 9vh;
    padding-bottom: 9vh;
    padding-right: 10%;
    padding-left: 5%;
        flex-direction: column;
    display: flex;
    justify-content: center;
}

#blocbleu1{
    background-color: #2B3441;
    color: #F2E9E1;
    padding-top: 9vh;
    padding-bottom: 9vh;
    padding-right: 10%;
    padding-left: 5%;
        flex-direction: column;
    display: flex;
    justify-content: center;
}


.blanc{
    color: #F2E9E1!important;
}



#autres .email{
    text-decoration: underline;
letter-spacing: 5.4px;
text-transform: uppercase;
    font-size: 14px;
    color: inherit;
    font-weight: 400;
}


#autres .tel{
letter-spacing: 5.4px;
    font-size: 14px;
    color: #F2E9E1; /* inherit*/
    font-weight: 400;
}

.planning{
    font-size: 17px; /*25px;*/
    letter-spacing: 5px;
    line-height: 43px; /*57*/
    text-transform: uppercase;
}

 
#autres #blocblanc{
    padding: 10%;
    background-color: #FFFFFF;
}


#blocplanningrose{
    background-image: url(img/adressrond.png); 
    background-position: 90% 35%; /* 90 20*/
    background-repeat: no-repeat;   
    background-color: #F2E9E1; 
    padding-top: 9vh;
    padding-bottom: 9vh;
    padding-right: 10%;
    padding-left: 5%;
        flex-direction: column;
    display: flex;
    justify-content: center;
}

#blocbleu2{
    background-color: #2B3441;
    color: #F2E9E1;
    padding-top: 9vh;
    padding-bottom: 9vh;
    padding-right: 10%;
    padding-left: 5%;
    flex-direction: column;
    display: flex;
    justify-content: center;
}



/***********page planning+tarifs**********/


.imgtopplanning{
    max-width: 100%; 
    width: 300px;  
    padding: 1rem;
    
}
#planning {
  margin: 0;
    background-image: url('img/fondgyro.svg');
   /*background: #C96B54 0% 0% no-repeat padding-box;*/
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: left;
   /* height: 100vh;
    width: 100vw;*/
}


#planning h1{
    letter-spacing: 28.8px;
    margin-right: -28.8px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 2.6rem;
    /*font-size: 48px;*/
    line-height: 68px;
    font-weight: 400;
    margin-bottom: 1rem;
}


#planning h2{
    text-decoration: underline;
    letter-spacing: 3.5px; 
    margin-right: 3.5px;
    font-size: 15px;
text-transform: uppercase;
   /* font-size: 17px;*/
    font-weight: 400;
}

#planning h3{
    letter-spacing: 4.2px;
    font-size: 21px;
    line-height: 29px;
    padding-bottom: 1.5rem;
    padding-top: .5rem;
    font-weight: 500;
}


#planning #blocgris1{
    padding: 10%;
    background-color: #C5CAC6;
}

#planning #blocgris2{
    padding: 10%;
    background-color: #C5CAC6;
}


#planning .titregris{
    letter-spacing: 3.8px;
     font-size: 19px;
        padding-right: 15%;
    padding-left: 15%;
    padding-top: 5%;
        padding-bottom: 0;
}
  
#planning .textmaj{
    font-weight: 400;
    padding-top: 10%;
}


#planning .jour{
    font-size: 12px; /*19*/
      text-transform: uppercase;
    letter-spacing: 3px; /*3.9*/
        line-height: 22px; /*19*/
}

#planning .heure{
    font-size: 15px; /* 17px 29px*/
      text-transform: uppercase;
    letter-spacing: 3px; /*3.8*/
        line-height: 22px; /*27*/
    font-weight: 400;
}

.rowjour{
    flex-direction: column;
    display: flex;
    justify-content: flex-start;

}

.coljour{
    padding: 1rem;
    border-left: 0.5px solid #2B3441;
    padding-right: 1rem!important;
    padding-left: 1rem!important;
}

.grise{
color: #C5CAC6
}

.coltarifs{
        letter-spacing: 3px; 
   /* margin-right: 3.5px;*/
    font-size: 15px;
    line-height: 22px;
    text-transform: uppercase;
    font-weight: 400;
     /*   padding: 1rem;*/
  
    padding-right: .5rem; /*!important*/
    padding-left: .5rem!important;
}

.borderright{
      border-right: 0.5px solid #2B3441;
}

.produit{
   text-decoration: underline;
}

.durée{
    color: #C96B54;
    padding-right: 1.5rem;
}

.asterisque{
    /*font-size: 13px;*/
    color: #C96B54;
   /* letter-spacing: 3.9px;*/
}

#planning #blocrose{
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;

    background-image: url(img/cartecadeau.svg); 
    background-position: 90% 30%; 
    background-repeat: no-repeat;   
    /*background-color: #FFF; */
    padding-top: 9vh;
    padding-bottom: 9vh;
    padding-right: 5%; /*10*/
    padding-left: 5%;
    /*flex-direction: column;
    display: flex;
    justify-content: center;*/
}

#planning #blocrose h3,#planning #reglement h3 {
   font-family: freight-big-pro;
    letter-spacing: 2px;
    font-size: 24px; /*28*/
    line-height: 46px;
    padding-bottom: 0;
    padding-top: 1.5rem;
}

#planning #reglement h3 {
   font-family: freight-big-pro;
    letter-spacing: 1px;
    font-size: 15px; /*20*/ /*28*/
    line-height: 46px;
    padding-bottom: 0;
    padding-top: 1.5rem;
}

#planning #blocrose p{
    letter-spacing: 4.2px;
    font-size: 17px;
    line-height: 39px;
    text-transform: uppercase;
    font-weight: 400;
}

#planning #reglement p{
    letter-spacing: 4px;
    font-size: 13px;
    line-height: 24px;  
    text-transform: uppercase;
    font-weight: 400;
}



#planning #tarifs{

    padding-right: 5%;
    padding-left: 5%;
    
} 

#planning #rondtarifs{

        letter-spacing: 4px;
    font-size: 14px; /*16*/
    line-height: 38px;
    text-transform: uppercase;
    font-weight: 400;
    
}
#planning #package{

        letter-spacing: 4px; /*5.1px;*/
    font-size: 15px; /*17*/
    line-height: 38px;
    text-transform: uppercase;
    font-weight: 400;
    
}


#planning #package p, #planning #rondtarifs p {
    margin-bottom: .5rem;
}


/********responsive***********/

@media only screen and (max-width: 992px) {
 
    #planning .coljour{
        text-align: center;
         border-left: none;
    }
       
    #planning .jour{
        padding-left: 10%;
        padding-right: 10%;
    }
   /* .produit{
   border: none;
}*/
    
    .coltarifs{
        padding: 0;
    }
    
        .contactnav{
        margin-top: 4vh;
    }
}

/***en savoir plus**/

#ensavoirplus{
     padding: 6rem;
    text-transform: uppercase;
}

#ensavoirplus h2{
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 400;
    padding-top: 0;
    letter-spacing: 3.5px; 
    margin-right: 3.5px;
    font-size: 15px;
    margin-bottom: 3rem;
    color: #2B3441;
    text-transform: uppercase;
    line-height: 32px;
    padding-right: 0;
    padding-left: 0;
    
}

#ensavoirplus p{
    font-size: 13px;
    letter-spacing: 4px;
    line-height: 24px;
    
}

#ensavoirplus h4{
    text-align: center;
    letter-spacing: 4px;
    color: #2B3441;
    text-transform: uppercase;
     font-size: 15px; /*22*/ /*1.3rem;*/
    line-height: 30px;
    font-family: futura, sans-serif;
    margin-bottom: 2rem;

}


#ensavoirplus .email{
    text-decoration: underline;
letter-spacing: 4px;
text-transform: uppercase;
    font-size: 15px; /*18*/
    color: #2B3441; /* inherit*/
    font-weight: 400;
    line-height: 30px;
}


#ensavoirplus .tel{
letter-spacing: 4px;
    font-size: 15px; /*18*/
    color: #2B3441; /* inherit*/
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 2rem;
}

    .logofootermobile{
        display: none;
    }

/*
.accueilnav{
    display: none;
}
*/
/********responsive***********/

@media only screen and (max-width: 768px) {
 
#ensavoirplus{
     padding-left: 2rem;
    padding-right: 2rem;
}

    #planning h2{
        margin-right: 0;
    }
    
}

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

    
    #planning #reglement p{
    letter-spacing: 3px;
    font-size: 12px;
    line-height: 22px;  /*39*/
    text-transform: uppercase;
    font-weight: 400;
}

    .giro2{
    padding: 10%;
    }

    /*
    html, body{
        font-size: 60%;
    }*/
    
    .navbar-light .navbar-nav .nav-link {
        padding: 2.5vh;
    }

    
    adress{
        font-size: 25px;
    }
    
    #hp h2{
        font-size: 20px;
        line-height: 2.5rem;     
    }
    
      #hp h4{
        font-size: 17px;
        line-height: 2rem;
        
    }
    
    #hp h3{
        margin-bottom: 2vh;
    }
    
    .plus{
        font-size: 30px;
        margin-bottom: 2vh;
        line-height: 1;
    }
    
    #studio h1, #pratiques h1{
        margin-bottom: 2.5rem;
    }
    
    #studio, #pratiques{
        padding-top: 8vh;
        padding-bottom: 8vh;
    }
    
    #studio p{
        padding-top: 0;
        padding-bottom: 3vh;
        margin-bottom: 0;
    }

    
       #autres h3, #pilates h3, #giro h3{
        letter-spacing: 1vw; 
        font-size: 4vw; 
           line-height: 6vw;
           font-weight: 400;
    }
    
    .point::after{
        width: 4px;
        height: 4px;
        margin-top: 2rem;
    }
    
    #pilates h1, #autres h1, #giro h1, #planning h1{
        letter-spacing: 3vw; 
        margin-right: -3vw;
        font-size: 7vw; 
        line-height: 6vh;
    }
    
    .coltarifs{
        font-size: 2.8vw;
    } 
    
        #planning #package{
        font-size: 3.5vw;
        letter-spacing: .5vw;
    }
    
    #planning #rondtarifs{
        font-size: 3.5vw;
        letter-spacing: .4vw;
    }

    #planning #blocrose, #blocplanningblanc, #blocplanningrose, #studio{
        background-image: none;
    }
 
  
    #pilates .textmaj, #pilates .textdroite, #giro .textdroite, #giro .textmaj{
        font-size: 3vw;
        letter-spacing: .5vw;
        line-height: 8vw;
    }
    
    
    #pilates .textgauche, #giro .textgauche{
        font-size: 5vw;
        letter-spacing: 2vw;
        line-height: 8vw;
        font-weight: 400;
    }
    
    .textgris, #pilates .textdroite2, #giro .textdroite2{
        font-size: 4vw;
        letter-spacing: .2vw;
        line-height: 7vw;
    }
    
    .text1, #pilates .text2, #giro .textmaj3{
        font-size: 4vw;
        letter-spacing: 1.5vw;
        line-height: 10vw;
    }
    
       #pilates .text2{
        padding-top: 5vw;
    }
    
    #autres h2{
        font-size: 8vw;
        letter-spacing: 3vw;
        line-height: 15vw;
    }
   
    .planning{
        font-size: 15px;
        line-height: 40px;
        
    }
    
    #pilates .textmajmobile2{
        padding-left: 10%; 
        padding-right: 10%;
        padding-top: 1rem;
        margin-bottom: 0;
    }
    #pilates .titregris, #giro .titregris{
        font-size: 16px;
    }
    
    #pilates #blocgris, #giro #blocgris2{
        padding-top: 4vh;
        padding-bottom: 4vh;
    }
    
    #planning #blocrose h3{
        font-size: 20px;
        line-height: 30px;
    }
    
    #planning #blocrose p{
        font-size: 14px;
        line-height: 25px;
    }
    
    
    #blocbleu1, #blocbleu2, #blocplanningblanc, #blocplanningrose{/*, #planning #blocrose{*/
        padding-left: 10%;
    }
    
    
    #autres .email{
        font-size: 11px;
        letter-spacing: 3px;
    }
    
    #autres .tel{
        font-size: 13px;
        letter-spacing: 4px;
    }
    .social{
        display: block;
        /*text-align: center;*/
        padding-right: .3rem;
        font-size: 10px;
        padding-left: 0;
    }
    
    
    

    
    .logofooter{
        display: none;
    }
        .logofootermobile{
        display: block;
    }

    
    #ensavoirplus{
        padding: 8vh;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #ensavoirplus h2{
        font-size: 15px;
        letter-spacing: 3px;
        margin-bottom: 2vh;
    }
    
    #ensavoirplus h4{
        font-size: 12px;
        letter-spacing: 3.5px;
        margin-bottom: 2vh;
    }
    
    #ensavoirplus p{
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 20px;
        margin-bottom: 0;
    
}

    
    #ensavoirplus .email, #ensavoirplus .tel{
        font-size: 10px;
        letter-spacing: 4px;
        color: #2B3441;
    }
    
    .imgtopplanning{
        display: none;
    }
    
    #hp, .logo{
            background-attachment: scroll;
    }
    .text0{
        display: none;
    }
    
    

    
    .coljour{
    border-left: none;
    }
    

    
    #pilates .textgauche, #giro .textgauche{
        padding-right: 0;
        
    }
    
    #pilates .textdroite,  #pilates .textdroite2{
        padding-left: 0;
        padding-right: 0;
    }
    
    #methodepilates{
    justify-content: center;
    }
}


/*******back to top*******/

#backtotop {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 50px; /* Place the button at the bottom of the page */
	right: 50px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	/*background-color: red; */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	/*padding: 15px; */
	border-radius: 30px;
	/*background-color: rgba(0, 0, 0, 1);
            background-repeat: no-repeat;
            background-position: center center;*/
	background-image: url(img/flechetotop.png);
	background-size: contain;
	height: 55px;
	width: 55px;
	/* transform: rotate(-90deg); */
	-webkit-transition: all .5s ease-out; /* Safari prior 6.1 */
	transition: all .5s ease-out;
	}

        #backtotop:hover {
        	/*background-color: #000; */
        	/*bottom: 25px;*/
        	-webkit-transition: all .5s ease-out; /* Safari prior 6.1 */
        	transition: all .5s ease-out;
        	transform: translate(0, -5px);
        	opacity: .8;
        }

/************popup contact*************/


.fermernl{

	position: absolute;
	top: 10px;
	right:20px;
    z-index: 999;
        transform: rotate(45deg);
    transform-origin: center;
}

.btnfermernl{
	background-color: transparent;
	/* background-image: url('img/fermerpopup.png');*/
	color: #C96B54;
	font-size: 2rem;

	border: none;
	-webkit-transition: all 1s; /* Safari prior 6.1 */
	transition: all 1s;
	cursor: pointer;
}


.btnfermernl:hover{
	/* background-color: #fff;*/
	color: #2B3441;
  /*   transform: rotate(135deg);
     transform-origin: center;*/
	/*opacity: .5;*/
	border: none;
	outline: none;
	-webkit-transition: all 1s; /* Safari prior 6.1 */
	transition: all 1s;

}


#popupmentions a{
    color: #2B3441;
}

.popup{
    position: fixed;
    width: 100%;
    height:100%;
    background-color: rgba(197, 202, 198, .5); /* 4, 4, 21*/
    padding-left: 20%;
    padding-right: 20%;
    top: 0;
     padding-top: 10%;
    display: none;
    z-index: 50000;
    transition: all .3s ease-out;
    -webkit-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    -moz-transition:all .3s ease-out;
    -ms-transition:all .3s ease-out;
}


.popupcontent{
    position: relative; 
	background-color: #FFFFFF;
     margin : 0 auto;
     /*padding: 3rem;*/
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); 
    overflow: auto;
    /*max-height: 90%;*/
}

#popupmaps{
    padding: 10%;
        padding-left: 20%;
    padding-right: 20%;
}
#popupmaps .popupcontent{
    
    max-height: 100%;
}
/*
#popupmentions{
    padding: 10%;
        padding-left: 20%;
    padding-right: 20%;
}
#popupmentions .popupcontent{
    
    max-height: 100%;
}*/

.btnfermer{
    background-color: #F0F0EF;
    color: #434343;
    border: 1px solid rgba(145, 145, 145, 1);
    padding: .5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-transform: uppercase;
}

.btnfermer:hover{
    color: #F0F0EF;
    background-color: #434343;
    border: 1px solid rgba(145, 145, 145, 1);
}

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

    .popup{
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .popup h4{
        font-size: 1rem; /* 4vw*/
            overflow-wrap: normal;
    }
    
    .popupcontent{
        padding: 1rem;
    }
    
    #popup #ensavoirplus{
        padding: 0;
    }
    
    #popup #ensavoirplus h4{
        font-size: 4vw;
    }
    
    #popup #ensavoirplus .email{
        font-size: 3.5vw;
        letter-spacing: 1vw;
    }
    
    #popup #ensavoirplus .tel{
        font-size: 3.5vw;
    }
    
    .popupcontent{
        height: 90%;
        display: flex;
       /* flex-direction: column;*/
        justify-content: center;
    }
    
}