/*  A VOIR  des  fois je paamètre des choses et d'autres suatent ex. le hauteur de our story fait sauté la partie suivante '*/

/* couleurs
marron foncé: rgb(54,37,38)
marron très foncé: rgb(41,28,29)  ou  #362526
orange :rgb(54,37,38)   ou #4C352C
ivoire: rgb(247,235,209)
*/
a:hover{background-color:rgb(54,37,38); }

/*  A VOIR  */
body{background-color:rgb(54,37,38); margin-top:0; padding-top: 0; position:relative;}
h1{font-size:45px;}
h2{font-size:40px;}
h3{font-size:35px;}
h4{font-size:30px;}
h5{font-size:25px;}
h6{font-size:20px;}
p{font-size:15px;}

/* css HEADER */
/* A VOIR  on ne voit pas le border jaune rond autour ???? */
header{/* ? TEST ? height:180px;*/background:rgb(54,37,38); margin-top:0;}
.glyphicon-earphone{color:rgb(246,171,74); padding:7px; border:2px; border-color :rgb(246,171,74); border-radius:50%;}
.logo{/* ? TEST ? width:80%; margin:35px; */width:75px; margin:35px 0 35px 0;}

h1,h2,h3,h4,h5,h6,p{font-family:/* ? TEST ? 'Open Sans',*/ 'Tw Cen MT', 'sans serif'; }

header h2,p,h4{color:white;}
header .logo-bloc {text-align: right;}
.us{
	text-align: right;
	margin:22px;padding:0;}
.usGliph{margin-top :30px; margin-right: 0; display:inline-block; float:left;padding:0;}
.usgliphA{margin:28px;}
.Grom{padding:0;position:relative; top:0px;}


/*A VOIR ne marche pas le 1° n'a pas pris la transparence, le 2° paas de couleur meme avec le gradient ????  */
.form-control{margin-right:10px; background-color: rgba(41,28,29,0.5) }
form .btn .btn-default{ background-image: linear-gradient(to top, #362526 0px, #4C352C 100%) }


/*  CSS NAVBAR   */
/*j; 'ai mis la meme couleur à body, donc ok mais autrement je n'arrive pas à colorer toute la nav bar*/
.navbar-default, .navbar-collapse, .navbar-form, #bs-example-navbar-collapse-1, .nav.navbar.navbar-default .navbar{background:rgb(54,37,38); color:white; /* ? TEST ? padding:6px;*/}

#bs-example-navbar-collapse-1 {padding: 6px 20px;}

/* dans firebug il resulte rayé, il n'est aps pris en compte ???? */
.navbar li, .navbar ul, .dropdown-toggle, .dropdown, glyphicon-home,   .navbar ul li a{color:rgb(246,171,74); background:rgb(54,37,38); }

.glyphicon-home {margin: 0 10px 0 0;}

.dessousMenu{padding:0;}

/*CAROUSEL  */
/*.btn .btn-lg .btn-primary{background:rgb(246,171,74); }*/

/*  A VOIR  il ne marche pas la couleur ????*/
.btn .btn-lg .btn-primary {
    background-image: linear-gradient(to bottom, #F6AB4A 0px, #f9bd72 100%);
    background-repeat: repeat-x;
	border-color: #f7d1a3;}


.btn-primary {
    background-color: #F6AB4A;
    border-color:  #f7d1a3;
	color: #fff;}

/*  A VOIR  ?????   si j'enlève  les caru ci-dessous le texte revient sur les images, si je le mets il se met en dessous  (mais avec sweet cake il marchait bien ???? pourquoi ???
et si je met left :0% il est centré mais en dessous et pas sur l'image pourquoi ???? */
/*

.Caru1{position:relative; left:50%; top:2%;}
.Caru2{position:relative; left:50%; top:2%;}
.Caru3{position:relative; left:50%; top:2%;}
*/

/* SECTION   OUR STORY  */

#ourStory{background: #fff;padding:40px;}
#ourStory .image-chat {text-align: center;}
.orange{color:rgb(246,171,74);}
.gris {color:#232323;}
.titre{text-shadow:3px 1px #B2B2BA; /*margin-top: 70px;*/}
.ourStory1{display:inline-block;}
.StorySign{padding-top:30px; margin-bottom: 30px;}

/* SECTION  VIP SERVICE  */

.blanc{color:#fff;}
/*.flexVip{margin-top:100px;}*/
/*?????  A VOIR le backgound n'est aps reconnu  '*/
#VipService{padding: 100px 0 100px 0; background-image: url('../images/background-6.jpg') repeat scroll 0 0;/* height:330px;*/ text-align: center;}
/*.vip{padding:10px;margin-top:20px;margin-bottom:33px;}*/
#VipService img{border-radius:50%;/* width:80%; height:100%; */margin-top: 50px;border:3px solid rgb(246,171,74);padding:5px rgb(246,171,74)}

/* pour enléver tous les marges et pouvoir faire si que toutes les colonnes restent sur une même loigne */
/*#VipService .col-lg-3, #VipService .col-lg-1{padding:0; margin:0;}*/
/*.Flexvipchild {padding-right:7px;padding-left:7px;}*/
/*.Flexvipchild1{align-self:flex-start;margin-top: 100px;}*/

/*
A VOIR la flex box ne marche pas mais j'ai mis un displays flex et
un align center aux enfants pour les centrer verticalement
ce n'est pas obbligatoire mettre
*/

/*.flexVip{display:flex;}*/
/*.Flexvipchild{align-self:center;padding-top: 100px;}*/
/*.p2{font-size:0.1px;}*/



/*  SECTION    OUR SERVICES    */
.floatL{float:right;}

/*A VOIR le height ne marche pas  ???? mis 550px mais rien changé par rapport à 450px*/
#OurServices{padding: 60px 0 80px 0; background: #fff;/* ? TEST ? height: 64vh;*/}

#OurServices img{display:inline-block; width:2%;}

#OurServices h4, #OurServices p, #OurServices .img1{display:inline-block;}

#OurServices .img1{ width:10%; margin-left:18px}

#OurServices .imgChien{/* ? TEST ?width:90%; */width: 100%; margin-top: 40px;}

#OurServices .afterTitle, #OurServices .beforeTitle{padding-top:40px;}
.afterTitle{text-align:left;}
.beforeTitle{text-align:right;}

.OurServices-left {padding: 0 0 0 100px;}
.OurServices-right {padding: 0 100px 0 0;}

/*  SECTION   GALERIE   */

/*A VOIR les photos  comment on fait pour les mettre ainsi et comment le preparer sur photoshop quel dimension calculer comme surface ??????
comment mettre le margin en continuant , j'ai reduit l'image mais la photo ne remontait pas ????

A VOIR la photo non plus n'a pas marché '*/
#Galerie{padding: 0 0 30px 0; background:rgba(247,235,209,0.5); /* ? TEST ? height:80vh*/;}
#Galerie img{display:inline-block; margin-top: 30px;}
#Galerie .col-lg-6, #Galerie .col-lg-5{/* ? TEST ? margin:0;padding:0;*/}

/*.imgG1{height:90%;}*/
.imgG2AB{/*width:98%;*/ width: 100%;}
.imgG3A{width:100%;}
.imgG2B{width:100%;}
.imgG3CD{width:90%;}
.imgG3C{width:100%;}
.imgG2D{width:100%;}

/*  Overlay  A VOIR il ne marche pas ???  */
.overlay .imgG1::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:90%;}
.overlay .imgG2AB::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:98%;}
.overlay .imgG3A::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:100%; }
.overlay .imgG2B::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:100%; }
.overlay .imgG3CD::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:90%; }
.overlay .imgG3C::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:100%; }
.overlay .imgG2D::before{background:rgba(247,155,149,0.5); content:"";position:absolute;top:0;width:100%;}




/*  SECTION  OUR PACKAGE  */
#OurPackage{background:#fff;/* ? TEST ? height:98vh;*//*margin-top:60px;*/ padding: 80px 0 80px 0;}
.titre-package {margin-bottom: 50px;}
.ivoire{background:rgb(247,235,209); /* ? TEST ? height:63vh;*/
	/*margin-top:50px;*/
/*	les marges ne fonctionnent pas le 3° bloc passe en bas essayer de retrecir le offset ou col-lg-8 mais rien enlever les padding masi rien ????*/
/*	margin-right:5px;*/
	margin-bottom: 40px;}
}

/*#OurPackage .col-lg-offset-2{margin-left: 10px;}*/
#OurPackage .col-lg-8{/* ? TEST ? padding: 0;*/}

/*.xfloatL{float:left;}*/
#OurPackage .imgPatte{display:inline-block; width:2%;}

/* A VOIR Pas de dentrage pour le titre  */
#OurPackage h2, #OurPackage h3 {text-align:center;color:#232323;}
#OurPackage h3 {margin: 30px 0 0 0;}
#OurPackage p{text-align:center;color:#232323;
	display:inline-block;
}

#OurPackage h1{color: #F6AB4A;text-align:center;}

.imgRond{border-radius: 50%; width:70%;/*margin-top:30px;*/margin-top: 60px; box-shadow: 3px #232323;}

/*  A VOIR pour centrer bouton, mais ça ne marche pas ??? ;*/
.pCentrer{text-align:center;}


/*  Effet hover dans section our PAckage
A VOIR LA COULEUR NE MARCHE PAS  + il faut ajouter un prix à  partir de
OU
on peut ajouter un script remove class actuelle et add nouvelle class */
/*a:hover .ivoire*/
.ivoireA, .ivoireB, .ivoireC{background:rgb(54,37,38); height:63vh; text-decoration:none;
	margin-top:50px; color:#fff;}



/*  SECTION COMMENTAIRES CLIENTS */

#commentaires{background-image: url('../images/home1_slide2.jpg') no-repeat scroll 0 0 ; background-color: rgb(54,37,38);/* height:80vh;*/ padding: 0 0 50px 0;}

#commentaires .carousel {padding: 50px 0 50px 0;}

#commentaires img{border-radius:50%; display: inline-block; /*width:100%; margin-top: 40vh;*/}
/*display:inline-block; float: right; */

#commentaires .carousel-texte p {color: #333;}

#commentaires h2, #commentaires p{text-align: center;}

.miniSlider{/*height:60vh; margin-top: 10vh;*/ margin-top: 50px; background-color:rgb(247,235,209); }

.miniSliderInner{margin-top: 10vh; height:40vh;}

#commentaires .carousel-control, #commentaires .glyphicon-chevron-left, #commentaires .carousel-control, #commentaires .glyphicon-chevron-right, #commentaires .carousel-control .icon-next, #commentaires .carousel-control .icon-prev{position:absolute; top:100; text-align:center; margin: 0}

#commentaires .carousel-control .left, #commentaires .carousel-control .right{background-image:none;background-repeat: none;background: none;}

#Contact .glyphicon {margin: 0 10px 0 0;}


/* Interlude pour séparer le couleur du background */
.blancInterlude{background-color:#fff; /*height:10vh;*/height: 50px;}



/*  SECTION Galerie2  
A VOIR  comment mettre les 6 images de col-lg-2 toutes sur une seule ligne j'ai déjà enlévé padding et margin '*/
#Galerie2{background-color: rgb(54,37,38);/* ? TEST ? height:55vh;*/ clear:both;}
#Galerie2 img{width:100%;/*margin :10vh;*/ margin: 50px 0 50px 0;}
/*#Galerie2 .col-lg-2{margin :2px;padding:0; margin-left: 2px; margin-right: 2px;}*/

/*  height:150%;  ne marche pas on ne peut pas aller plus de 100% ?*/
.imgGal1{width:100%;height:150%;margin-top:5vh;}





/*  SECTION CONTACT   */
#Contact{background-color: rgb(54,37,38); /* ? TEST ? height:45vh;*/}

#Contact img, #Contact h2{display:inline-block; color:#fff}
#Contact .logoCo{/*height:30%;*/width: 75%;}
#Contact .col-lg-2, #Contact .col-lg-1, #Contact .col-lg-3{margin-top: 7vh;}
#Contact .grom{margin-top: 0.5vh}

/*  A VOIR les glyphicon on ne les voit pas  */
#Contact glyphicon{color:rgb(246,171,74);}


/*  footer */
footer{background-color: rgb(41,28,29);/* ? TEST ? height:10.5vh;*/ border-top:0.5vh solid #ffffff;}
footer .fa{float:right;margin-left:10px;margin-top: 20px;font-size:25px;position:relative; left:1px;}

/*  A VOIR Comment centrer le p du footer à droite ??? */
footer p{margin-top: 25px;}


/*  Bouton retour home  */
.RetourHome{height:60px; width:60px;
	background-image: linear-gradient(to bottom, #F6AB4A 0px, #f9bd72 100%);
	background-color: #F6AB4A;
    border-color:  #f7d1a3;
	color: #fff; display:inline-block; 
	position:fixed; text-align:center; right:4px; bottom:4px;
			}
/*.RetourHome span{text-align: center;}*/


.submit{margin-left:18%;}


/* Grand écran */
@media screen and (min-width: 1200px) {
    .hidden_ecran {display: none !important;}
}

/* Ecran classique */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .hidden_ecran {display: none !important;}
}

/* Tablette paysage */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .hidden_tablette {display: none !important;}
    .OurServices-left {padding: 0 50px 0 50px;}
	.OurServices-right {padding: 0 50px 0 50px;}
}

/* Tablette portrait */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden_mobile {display: none !important;}
    #myCarousel h2 {font-size: 32px;}
    #myCarousel .carousel-texte {font-size: 14px;}
    #ourStory .image-chat img {width: 100%;}
    #VipService {padding: 20px 0 70px 0;}
    .OurServices-left {padding: 0 25px 0 25px;}
	.OurServices-right {padding: 0 25px 0 25px;}
    #Contact {text-align: center;}
    #Contact .logoCo {width: auto; display: block; margin: 0 auto;}
	footer {text-align: center;}
    footer .fa {float: none;}
}

/* Mobile */
@media screen and (max-width: 479px) {
	.hidden_mobile {display: none !important;}
    #myCarousel h2 {font-size: 24px;}
    #myCarousel .carousel-texte {display: none;}
    #ourStory .image-chat img {width: 100%;}
    #VipService {padding: 20px 0 70px 0;}
    .OurServices-left {padding: 0 15px 0 15px;}
	.OurServices-right {padding: 0 15px 0 15px;}
    #Contact {text-align: center;}
    #Contact .logoCo {width: auto; display: block; margin: 0 auto;}
    footer {text-align: center;}
    footer .fa {float: none;}
}