/* fichier css de personalisation du tutoriel*/

body {
    /*padding-top: 56px;*/
	font-family: 'Open Sans', sans-serif;
	color:#363738;
}

#mainNav .navbar-toggler{
  font-size: 0.9em;
}

.jumbotron{
    margin-bottom: 0;
    /*background: linear-gradient(135deg,#3d7aef, #2b4be4) !important;*/
    /*color: #fff;*/
    padding-top: 100px;
    padding-bottom: 100px;
}
.jumbotron-bl{
    margin-bottom: 0;
    /*background: linear-gradient(135deg,#3d7aef, #2b4be4) !important;*/
	background: linear-gradient(135deg,#3d7aef, #2b4be4c2) !important;
	/*background:#80b8b9 !important;*/
    color: #fff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.jumbotron-yl {
  margin-bottom: 0;  
  /* background: #fee000; */
  background: #ffde00;
  padding-top: 100px;
}
.btn-secondary {
    background-color: transparent;
    border-color: #c60063;
    color: #c60063;
}

hr.light {
  border-top: 1px solid #d5d5d5;
  width:  75%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}

.org{
  /* color: #ff8201; */
  color: #f0c309
}
.whi{
  color: #fff;
}
/*********************************/
.bx{
  background: #FFF;
  /* padding: 50px;*/
  margin: 1rem;
}


.site-section {
  padding: 2.5em 0;

}
.bx-mrn { background: #343434; color: #f3f3f3; /*padding: 220px;*/ /*line-height: 4.2;*/}

.text-black{font-size: 1.30rem; }

.bg-light {
  background-color: #f8f9fa !important;
}

.parallax {
  padding: 6rem 0 6rem;
  background-image: url("assets/images/photo/richs-fais-moi-un-sourire-20thshyzone.jpg");
  /* Set a specific height */
  height: 500px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.parallax .display-4{
  color: #fff;
}

.parallax .bx{
  background: #FFF;
  padding: 50px;
  margin: 2rem;
}



/* -------------- Content  ----------------*/
.wrapper{
  padding: 100px 0 130px;
  margin: 0 0;
}
/* -------------- Les couleurs  ----------------*/
.c-yl{background: #ffde00;}
.c-bl{}

/*
.wrapper h2{
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
	font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}
*/
/* --------------Pied de page -------------*/

.s-m{
  position: relative;
}

.s-m a{
  display: inline-flex;
  width: 80px;
  height:80px;
  /*background: #2c3e50;*/
  background: #2c3e502b;
  color: #fee000;
  /*color: white;*/
  margin: 0 6px;
  border-radius: 50%;
  justify-content:center;
  align-items:center;
  transition : 0.4s;
  font-size: 22px;
}
.s-m a:hover{
  background: #e67e22;

}
.s-m i{
  transition:0.4s all;
}

.s-m a:hover >i {
  transform: scale(1.6) ;

}


.bg-dark{
  font-size:0.775em; 
  color:#d5d5d5;"
}

footer a{
  color: #d5d5d5;
}

.avant-pied{
  background-color: #343434;
  padding: 5rem 5rem;
  color: #b9c5e6;
}


/* section spéciale pour la section about */

.about{ margin: 0 0; padding: 10em; position: relative; /*background:#000; */ color:#727272;}
.about h1{ color:#fff; margin: 2em;}
/*.about img{ height: 100%;    width: 100%;    border-radius: 50%}*/
.about span{ display: block; color: #888; position: absolute; left: 115px;}
.about .desc{ padding: 2em; border:4px solid #10828C; background-color:#d8a089; margin:1rem;}
.about .desc h3{ color: #10828C; text-align:center;}
.about .desc p{ line-height:2; color:#888;}





@media(max-width:767px){
  .navbar-brand {font-size: 1rem; }
  .serviceBox{ margin-bottom: 15px; }
  .jumbotron .display-3{font-size: 3.2rem;}
  .sect-bx-mron {padding: 6.5em 0;}
  .bx-mrn { background: #343434; color: #f3f3f3; padding: 6.5em 0; /*line-height: 4.2;*/}
  .text-black{font-size: 1.30rem; line-height: 60px;}
  .swing{font-size : 0.7rem;}
  .btn-lg{padding: .375rem .75rem; font-size: 1rem;}
}
@media(min-width:768px){
  .serviceBox{ margin-bottom: 15px; }
  .navbar-nav{justify-content: center;flex-direction: row};
}
@media(min-width:992px){
    .text-black {font-size: 2 rem; }
}
@media(min-width:1200px){}

.serviceBox{
    padding: 30px 30px 30px;
    /*background: #f8f8f8;*/
    color: #333;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover{
    background: #305ae8;
    color: #fff;
}
.serviceBox:after{
    content: "";
    display: block;
    border-top: 500px solid #fff;
    border-left: 500px solid transparent;
    margin-top: -55%;
    margin-left: 100%;
    opacity: 0;
    position: absolute;
    transform: scale(2);
    transition: all 0.3s ease-in-out 0s;
}

.serviceBox:hover:after{
    margin-left: 0;
    opacity: 0.1;
}


.serviceBox:hover .service-icon{
    color: #fff;
}

.serviceBox .title{
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    text-transform: capitalize;
}

.serviceBox:hover .description{
    color: #fff;
}