html {
  scroll-behavior: smooth;
}

body {
	padding: 0;
	margin: 0;
    font-family: 'Quicksand', sans-serif;
}
.container{
	max-width: 1300px;
	margin: 0 auto;
}
@media all and (max-width: 768px){
   .container{
      
      padding-left: 5%;
      padding-right: 5%;  
   }
}
.page__header{
	background-color: #F6E500;

   background-repeat: repeat-x;
   background-position: center;
	min-height: 750px;
	color: #03009A;
}

.headerTop{padding: 15px;}
.headerTop__left{}
.headerLogo{}
.headerLogo__image{
   float: left;
   margin-right: 15px;
}
.headerLogo__text{
   float: left;
   padding-top: 10px;
   text-transform: uppercase;
   color: #B1A300;
}
.headerLogo__name{font-size: 27px; }
.headerLogo__job{ font-size: 18px; letter-spacing: 0.1em; font-weight: bold; }
.headerTop__right{}

.btns{}
   a.btn{
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
     
      border-radius: 50px;
      min-height: 65px;
      
      text-align: center;
      min-width: 210px;
      
      display: inline-block;
      
      margin-bottom: 15px;
   }
      a.btn.btn_default
      { 
         color: #B1A300;
         border: 3px #B1A300 solid;
      }
         a.btn.btn_default:hover{
            color: #03009A;
            border: 3px #03009A solid;
         }
         
         
      a.btn.btn_bleu
      {
          color: #03009A;
         border: 3px #03009A solid;
      }
      
         a.btn.btn_bleu:hover
         {
            color: #ffffff;
            background: #03009A;

         }
      
      
       a.btn.btn_jaune
      {
          color: #F6E500;
         border: 3px #F6E500 solid;
      }
         
         a.btn.btn_jaune:hover
         {
            color: #03009A;
            background-color: #F6E500;
            
         }
      
    a.btn span.text_padding{
      position: relative;
      top: 18px;
          padding: 0 25px
    }


@media all and (min-width: 768px){
   .headerContent{ 
      position: relative; 
      top:175px 
   }
}

   .pageTitle{
      font-size: 25px;
      margin-bottom: 25px;
   }
   @media all and (min-width: 768px){
      .pageTitle{
         font-size: 40px;
      margin-bottom: 25px;
      }
   }
   .headerContent__description{ 
      font-size: 22px; 
   }

 span.bg_white{
 	display: inline-block;
    position: relative;
 }
 
 span.bg_white span{
 	z-index: 99;
 	position: relative;
 }
 
 span.bg_white::after{
    content: "";
    background: #fff;
    display: block;
    border-radius: 3px;
    width: 100%;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0.5em;
    height: 0.75em;
    transform: rotate(-1deg);
 }
  
.page__content{}

.portfolio{
      transform: translateY(-100px);
   }
@media all and (min-width: 768px){
   .portfolio{
      transform: translateY(-175px);
   }
}

.portfolio__mainTitle{
   color: #B1A300;
   text-transform: uppercase;
   font-size: 20px;
   margin-bottom: 25px;
}
.portfolio__list{}
.portfolio__item{
   margin-bottom: 35px;
}
.portfolio__in{
   padding: 0 15px 0 15px;
}
.portfolio__img{
   width: 100%;
   border-radius: 5px;
   margin-bottom: 15px;
   box-shadow: 2px 5px 30px rgba(50, 50, 50, 0.25);
}
@media all and (min-width: 768px){
   .portfolio__img{
   }
}
.portfolio__title{
   color: #03009A;
   font-size: 22px;
   text-transform: uppercase;
   font-weight: bold;
}
.portfolio__type{
   color: #5C7099;
   font-size: 16px;
}
.clear{}




.contact{
   text-align: center;
   margin-bottom: 50px;
   
   background-image: url(img/bg_contact1.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   
   padding-top: 25px;
   padding-bottom: 25px;
}
@media all and (min-width: 768px){
   .contact{
      transform: translateY(-100px);
   }
}
.contact__title{
   color: #03009A;
   font-size:30px;
   margin-bottom: 25px;
}
.services{
   margin-bottom: 100px;
    display: inline-block;
}
.service__list{}
.service__item{
   padding: 0 25px;
   margin-bottom: 15px;
}
.service__in{
   padding: 50px 50px 50px 0;
}
.service__in.padt-0{
   padding-top: 0;
}
.service__in.service_boxed{
   background-color: #F3F3F3;
   
   border-radius: 10px;
   padding: 50px;
}
.service__title{
   font-size: 28px;
   font-weight: bold;
   color: #03009A;
   margin-bottom: 0;
}
.service__text p{
   color: #616D85;
   font-size: 25px;
   line-height: 35px;
}
.service__text ul li{
   color: #616D85;
   font-size: 22px;
   line-height: 32px;
   margin-bottom: 10px;
   font-weight: normal;
   
   padding-left: 50px;

   padding-top: 10px;
   min-height: 45px;
}

.service__text ul.icons_check li{

    background: url(img/icon_check.png) no-repeat;

}

.service__text ul.icons_plus li{

    background: url(img/icon_plus.png) no-repeat;

}

.service__in .service_boxed{}
.technos{
   margin-bottom: 50px;
}
.technos__title{
    color: #797979;
   font-size: 20px;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 25px;
   text-align: center;
}
.techno__list{}
.techno__item{
   width: calc(100%/3);
   float: left;
}
@media all and (min-width: 768px){
.techno__item{
   width: calc(100%/5);
   float: left;
}
}
.techno__in{
   padding: 10px;
}
.techno__img{
   max-width: 100%;
   border-radius: 5px;
}

.searches{}
.searches__title{
   color: #797979;
   font-size: 20px;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 25px;
   text-align: center;
}
.searches__list{
   display: inline-block;
   margin-bottom: 50px;
}
.searches__list li{
   width: 50%;
   float: left;
   text-align: center;
   color: #797979;
   font-size: 15px;
   margin-bottom: 15px;
   font-weight: normal;
}

@media all and (min-width: 768px){
   .searches__list li{
      width: 33%;
   }
}


.search__col{}

.contact2{
	background-color: #F6E500;
   border-radius: 10px;
   margin-bottom: 50px;
}
   .contact2.bg_contact{
   
      background-image: url(img/bg_contact.png);
   }
.contact2__in{ padding: 25px; }
.contact2__inBorder{
   border: 2px #fff solid;
   padding: 25px;
   display: inline-block;
}

.contact2__col_1{ text-align: center; }
.contact2__col_1 img{ 
   max-width: 210px; 
   display: inline;
   
}
@media all and (min-width: 768px){
   .contact2__col_1 img{ 
      position: relative;
   top: 50px;
   }
}
.contact2__col_2{}


.contact__text{
   margin-bottom: 25px;
}
.contact__text p{
   font-size: 20px;
   line-height: 30px;
   color: #03009A;
}
.tarifs{
   margin-bottom: 50px;
   display: inline-block;
}
.tarifs__title{
   text-align: center;
   color: #03009A;
   font-size: 30px;
   margin-bottom: 5px;
   text-transform: uppercase;
}
.tarifs__intro{
   color: #616D85;
   font-size: 20px;
   line-height: 25px;
   text-align: center;
   margin-bottom: 25px;
}
.tarifs__list{
}
.tarif__col{}
.tarifCol__in{}

.tarif__in{
   padding: 0 15px;
}
.tarif__box{
   border: 2px #E5E5E5 solid;
   border-radius: 5px;
   padding-top: 25px;
   min-height: 250px;
}
.tarif__item{
   text-align: center;
   margin-bottom: 15px;
}
   .tarif__name{
      color: #03009A;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 25px;
   }
   .tarif__aPartirDe{
      font-size: 18px;
      color: #616D85;
      font-weight: bold;  
   }

   .tarif__price{
      color: #f6e500;
      font-size: 50px;
      margin-bottom: 15px;
      font-weight: bold;
   }
   .tatif__description{
      color: #616D85;
      font-size: 25px;
      
   }
.benefs{}
.benefs__list{
   display: inline-block;
   margin-bottom: 50px;
}
.benefs__col{}
.benefs__item{
   text-align: center;
   margin-bottom: 25px;
}
.benefs__item img{ display: inline; }
.benefs__icon{
   margin-bottom: 15px;
}
.benefs__title{
   color: #616D85;
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 10px;
   height: 50px;
}

hr.u-decor{
   background: #E6E6E6;
   height: 8px;
   width: 50%;
   display: inline-block;
   border: 0;
   border-radius: 10px;
}
   hr.u-decor.u-decor_yellow{
      background: #F6E500;
   }
   hr.u-decor.u-decor_small{
      width: 40px;
   }
   
.contact3{
	background: #03009A;
}
.contact3__title{
   color: #F6E500;
   text-align: center;
   text-transform: uppercase;
   margin-bottom: 25px;
}
.contact3__text{
   margin-bottom: 25px;
}
.contact3__text p{
   font-size: 20px;
   line-height: 30px;
   color: #fff;
}
.contact3__in{
   display: inline-block;
   padding-top: 100px;
   margin-bottom: 100px;
}


.page__footer{
   text-align: center;
   background: #02007C;
   color: #9190CD;
   padding: 25px 0;
}
.page__footer a{
   text-decoration: none;
}
.page__footer a:hover{
   color: #fff;
}

.bg_waves_bottom_right_gray,
.bg_waves_top_left_white{
   background-repeat: no-repeat;
}
.bg_waves_bottom_right_gray{
   background-image: url(img/waves_bottom_right_gray.png);
   background-position: right bottom;
   background-position: 150% -150%;
}
.bg_waves_top_left_white{
   background-image: url(img/waves_top_left_white.png);
   background-position: top left;
   background-position: -50% -50%;
}
.bg_header{
   background-image: url(img/bg_header.png);
}
.bg_footer{
   background-image: url(img/bg_footer.png);
}

.page__content .backgrounds{
    transition: all 2000ms 50ms ease-in-out;
}
.page__content:hover .backgrounds{
   transform: scale(1.025);
   transition: all 4000ms 50ms ease-in-out;
}
.backgrounds{
       z-index: -1;
   width: 100%;
    position: fixed;
    top: 0;
}
.backgrounds div{
   width: 100%;
   background-repeat: no-repeat;
}


.backgrounds,
.backgrounds div{
  height: 1000px;
}
   
   
   .background_bg_shapes_right,
   .background_bg_shapes_left{
       position: absolute;
   }
   
.background_bg_shapes_right{
  
   bottom: 15vw;

   
   background-image: url(img/bg_shapes_right.png);
   background-position: right bottom;
   background-size: 70%;

}
   @media all and (min-width: 768px){
      .background_bg_shapes_right{
         top: 15vw;
         right: 0;
         left: auto;
        background-size: auto;
      }
   }
   
.background_bg_shapes_left{
   
   top: -15vw;

   
   background-image: url(img/bg_shapes_left.png);
   background-position: top left;
   background-size: 30%;

}
   @media all and (min-width: 768px){
      .background_bg_shapes_left{
         top: -15vw;
         left: 0;
         background-size: auto;
         
      }
   }


.backgrounds_2{
       z-index: -1;
   width: 100%;
    position: fixed;
    top: 0;
}
.backgrounds_2 div{
  
   background-repeat: no-repeat;
}   
.backgrounds_2 .background_bg_spin{
   width: 500px;
   height: 500px;
   background-image: url(img/bg_spin3.png);
   background-size: contain;
   
   position: absolute;
   right: 0;
   top: 50%;

}
.backgrounds_2 .background_bg_spin2{
    width: 500px;
    height: 500px;
   background-image: url(img/bg_spin2.png);
   background-size: contain;

}