body {font-family:Dosis;}

#Header {background:rgba(23,61,108,0.9); height:120px;}

#ban_int {height:340px; overflow:hidden;}
#ban_int img {width:100%;}

.Banniere {
    
    height:1060px; position:absolute; z-index:-1; width:100%; margin:-122px 0 0;
    top:0;
}

.slide1 {width:100%; height:1060px; background:url(/Content/Images/salonlereflet_banniere.jpg);}
.slide2 {width:100%; height:1060px; background:url(/Content/Images/salonlereflet_banniere02.jpg);}
.slide3 {width:100%; height:1060px; background:url(/Content/Images/salonlereflet_banniere03.jpg);}
.slide4 {width:100%; height:1060px; background:url(/Content/Images/salonlereflet_banniere04.jpg);}

@media screen and (max-width:1600px){
    .slide1, .slide2, .slide3, .slide4 {background-position:-300px 0;}
}
@media screen and (max-width:1140px){
    #Header {height:60px;}
    .slide1, .slide2, .slide3, .slide4 {height:600px;}
    
    .slide1 {background:url(/Content/Images/salonlereflet_banniere-small.jpg) ;}
    .slide2 {background:url(/Content/Images/salonlereflet_banniere02-small.jpg) ;}
    .slide3 {background:url(/Content/Images/salonlereflet_banniere03-small.jpg) ;}
    .slide4 {background:url(/Content/Images/salonlereflet_banniere04-small.jpg) ;}
}
@media screen and (max-width:980px){
    .slide1, .slide2, .slide3, .slide4 {background-position:-100px !important;}
}
@media screen and (max-width:768px){
    .slide1, .slide2, .slide3, .slide4 {background-position:-160px !important; height:530px;}
}
@media screen and (max-width:567px){
    .slide1, .slide2, .slide3, .slide4 {background-position:-240px !important;}
}
/*--------------*/

#Banniere {position:relative; z-index:1; height:1000px; margin:-1000px 0 0;}

#logo {width:250px; margin:0 0; display:block; position:inherit; top:200px; left:200px;}
#logo a { display:block; }
#logo img {width:100%;display:block;}

.num-tel {width:380px; float:right; font-size:67px; display:block; position:relative; top:-140px; right:-120px;}
.num-tel a {color:#173D6C;}
.num-tel a:hover {text-decoration:none; color:#B9E3F1;}

.media {width:140px; float:right; display:block; top:-180px; position:relative; }
.media ul {padding:0; margin:0;}
.media ul li {display:inline-block; list-style:none;}
.media ul li a {display:block;}
.media ul li.fb a {background:url(/Content/Images/icon-fb.png) no-repeat center; width:52px; height:52px; border-top:2px solid transparent; }
.media ul li.pint a {background:url(/Content/Images/icon-pint.png) no-repeat center; width:52px; height:52px; border-top:2px solid transparent;}
.media ul li.pint a:hover , .navbar ul li.fb a:hover {border:none; border-top:2px solid transparent;}

.media ul li.pint a:hover {background:url(/Content/Images/icon-pint2.png) no-repeat center;}
.media ul li.fb a:hover {background:url(/Content/Images/icon-fb2.png) no-repeat center;}



@media screen and (max-width:1600px){
    #logo {width:180px; left:120px;}
    .num-tel  {top:-60px;}
    .media  {top:-120px;}
}

@media screen and (max-width:1300px){
     #logo  {top:160px; left:120px;}
     
}
@media screen and (max-width:1140px){
    #logo  {top:70px;}
    #Banniere .num-tel {display:none;}
    #Banniere .media  {display:none;}

     #Banniere  {height:600px;  margin:-600px 0 0;}
}
@media screen and (max-width:980px){
    #logo  {left:60px;}
}
@media screen and (max-width:768px){
     #Banniere  {height:500px;  margin:-540px 0 0;}
    .num-tel {font-size:44px; width:260px;}
}
@media screen and (max-width:667px){
    #logo {width:100px; left:20px; top:60px;}
    .num-tel {font-size:28px; width:170px; top:60px;}
    
    .media {top:10px; width:120px;}
}

.box-title {background:rgba(255,255,255,0.6); margin:-5px 0 0;}
.box-title h1 {text-align:center; text-transform:uppercase; font-size:32px; color:#222326; font-weight:500; margin:0; padding:10px 0;}

.box-coiffeuse {background:#1e1e20 url(/Content/Images/back-coiffeuse.jpg) no-repeat bottom center; padding:50px 0;}

.box-texte {width:50%; margin:50px auto 0;}
.box-texte h2 {
    color:#fff; font-size:55px; font-weight:400; text-transform:uppercase; text-align:center;
    margin:0 auto; display:table; border-bottom:4px solid #00A4E5; padding:0 25px;
}
.box-texte p {color:#999; font-size:22px; text-align:center; line-height:35px;}

.box-texte img {display:block; margin:0 auto;}

#blue {background:#10689E; height:42px;}

#box-cheveux {background:#242224 url(/Content/Images/back-cheveux.jpg) no-repeat top center; padding:75px 0;}

.box-texte h3 {color:#C1C1C1; font-size:43px; text-align:center; display:table; border-bottom:1px solid #F2A73B; text-transform:uppercase; margin:0 auto;}

#box-bleu {background:#0A699E; overflow:hidden;}
#box-bleu h2 {font-size:56px; color:#fff; border-bottom:4px solid #3FA0EC; font-weight:400; text-transform:uppercase;}

.box-tem {width:30%; height:600px; float:left; margin:0 5% 0 10%;}
.txtClient {}
.txtClient p {color:#89E3F7; font-size:22px; margin:0;}
.nomClient {}
.nomClient p {font-size:37px; color:#173D6C; font-weight:600;}

.box-fb {width:45%; float:left; height:auto; margin:0 0 25px;}

.box-tendance {background:#173D6C url(/Content/Images/back-tendance.jpg) no-repeat center; overflow:hidden;}
.box-tendance h2 {font-size:56px; color:#fff; text-align:center; font-weight:400; text-transform:uppercase; margin:50px 0 25px;}

img.imgcenter {margin:0 auto; display:block;}

.box-photo {width:60%; margin:50px auto 100px; overflow:hidden;}
.box-photo .box-img {width:18%; margin:0 1%; overflow:hidden; float:left;}
.box-photo .box-img img {width:100%;}

@media screen and (max-width:1560px){
	.txtClient p {color:#89E3F7; font-size:18px; margin:0;}
	.nomClient p {font-size:34px; color:#173D6C; font-weight:600; line-height:40px;}
}

@media screen and (max-width:1140px){
    .box-texte {width:80%;}

    .box-tem {width:50%; margin:0 5% 0 10%; height:400px;}
    .box-fb {width:50%; margin:0 0 50px 10%; float:left; height:auto;}

    img.imgcenter {width:100%;}
    .box-photo {width:100%;}
    
}
@media screen and (max-width:980px){
    .box-title h1 {font-size:26px;}

    .box-coiffeuse {background:#1e1e20 url(/Content/Images/back-coiffeuse.jpg) no-repeat bottom right;}

    #box-cheveux {padding:25px 0; background:#242224 url(/Content/Images/back-cheveux.jpg) no-repeat top left;}
    .box-texte h2 {font-size:44px; padding:0;}
    .box-texte h3 {font-size:32px;}

    #box-bleu h2 {font-size:44px;}
        .box-tem {width:70%; margin:0 5% 0 15%; height:400px;}
        .box-fb {width:65%; margin:0 0 50px 15%; float:left; height:auto;}

        .txtClient p {font-size:18px; line-height:26px;}
        .nomClient p {font-size:30px; color:#173D6C;margin:0;}

    .box-tendance h2 {font-size:44px;}
}
@media screen and (max-width:768px){
    .box-texte {width:98%; margin:20px auto 0;}
    .box-title h1 {font-size:22px;}

    #box-cheveux {padding:25px 0 ;}
    .box-texte h2 {font-size:32px;}
    .box-texte h3 {font-size:26px;}

    #box-bleu h2 {font-size:32px;}
        .box-tem {width:80%; margin:25px 10% 0 10%; height:460px;}
        .box-fb {display:none;}

    .box-tendance h2 {font-size:32px;}
}

@media screen and (max-width:668px){
    .box-tendance {background:#173D6C url(/Content/Images/back-tendance.jpg) no-repeat bottom right;}
    .box-photo .box-img {width:48%; margin:10px 1%; overflow:hidden; float:left;}
    .box-photo .box-img img {width:100%;}
    .box-photo .box-img.mob {display:none;}
}


.box-horraire {background:#173D6C url(/Content/Images/back-ciseau.jpg) no-repeat ; padding:0 10% 50px 25%; overflow:hidden; }
.box-horraire h2 {font-size:56px; color:#fff; border-bottom:4px solid #3FA0EC; font-weight:400; text-transform:uppercase; margin:100px 0 0;}

.box-horraire h3 {color:#00A4E5; font-size:31px; font-weight:600; text-transform:uppercase; letter-spacing:1px; width:100%; float:left; margin:5px 0;}
.box-horraire p {border-left:30px solid #00A4E5; padding:0 0 0 25px; color:#89E3F7; font-size:23px; float:left; width:100%;}

.box-horraire ul.border {border-left:30px solid #00A4E5; padding-left:25px;}
.box-horraire ul {width:220px; float:left; padding:0;}

.box-horraire ul li {list-style:none; color:#89E3F7; font-size:23px;}

#map {height:600px;}

#Copyright {background:#173D6C; color:#fff; padding:5px 0; text-align:center;}
#Copyright a {color:#fff;}
#Copyright a:hover {color:#999;}

@media screen and (max-width:1300px){
    .box-horraire { padding:0 10% 50px 15%; overflow:hidden; }
}
@media screen and (max-width:1140px){
    .box-horraire {padding:0 5% 50px 2%;}
}
@media screen and (max-width:980px){
    .box-horraire h2 {font-size:44px;}
}
@media screen and (max-width:768px){
    .box-horraire h2 {font-size:32px;}
    .box-horraire h3 {font-size:24px;}
    .box-horraire p  {border-left:5px solid #00A4E5; font-size:20px;}

    .box-horraire ul {width:130px;}
    .box-horraire ul.border {border-left:5px solid #00A4E5;}

    #map {height:300px;}
}