html {
	margin: 0 ;
	height: 100%;
	font-size: 16px;
    font-family: Verdana, Geneva, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;	
    } 

body {
    background-color: #000;	
    color: #000;    
    line-height: 1.5;
    margin: 0;
	height: 100%;}
	
.page { display: flex; flex-wrap: wrap }

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}	

p.btx {
  margin: 20px;
}

h2.btx {
  margin: 20px;
}
	
script { display: none;}

@-ms-viewport{ width: device-width; }

/* IMAGES  */
img { border-radius: 5px; max-width: 100%; height: auto; }

.responsive { max-width: 100%; height: auto }

/* LIGNE  */
.hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px;} 

h1 { font-size: 2rem    ; text-align: center}
h2 { font-size: 1.75rem ; text-align: center}
h3 { font-size: 1.50rem ; text-align: center}
h4 { font-size: 1.25rem ; text-align: center}
h6 { font-size: 1.25rem ; text-align: center}
p  { font-size: 1rem    ; text-align: left}

ul {margin-top: 0 ; margin-bottom: 1rem ;}

h1, h2, h3, h4, h6 {	
	font-family: Verdana, Geneva, sans-serif;
	color: inherit ;
	margin-top: 0;
	margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.1;		
	word-break: break-word;
    word-wrap: break-word ;}

a { color: #000000; text-decoration: none }
a:hover {  color: #FFC801 ; text-decoration: none ; outline: 0}
b, strong { font-weight: 700 }

@media (min-width:992px)  {.container2  { max-width: 1900px }}

@media (min-width:992px)  {.container  { max-width: 940px }}
@media (min-width:1200px) {.container  { max-width: 1140px}}

.centre { display: block; margin-left: auto; margin-right: auto; }
.center { text-align: center }
.container::after { content: "" }
.container { padding-left: 0rem; padding-right: 0rem }
.container { margin-right: auto; margin-left: auto }
.container::after { display: table; clear: both }

/* TOP MENU TOP TOP NAV */
.nav { padding-left: 0px;  margin-bottom: 0px }
.navbar-fixed-top { position: fixed; right: 0px; left: 0px; z-index: 1020 ; top: 0px }
@media (min-width:544px) { .navbar-fixed-top { padding-left: 0px; margin-bottom: 0px ; margin-top: 0px} }
@.container { position: relative }

/* TOP MENU TOP NAV */
.nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;}

.nav div.main_list {  height: 50px;  float: right; }

.nav div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0px;
    padding: 0px}

.nav div.main_list ul li {
    width: auto;
    height: 140px;
    padding: 0;
    padding-right: 4rem;}

.nav div.main_list ul li a {
    text-decoration: none;
    color: #e9e9e9;
    line-height: 0px;
    font-size: 1.25rem;}
.nav div.main_list ul li a:hover { color: #ffc801; }

/*TOP MENU BUT NAV*/

.but1 a {
  padding: 0.2em 0;
  color: #e9e9e9;
  position: relative;
  text-decoration: none;}
.but1 a:before,
.but1 a:after {
  height: 1px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: #e9e9e9;
  width: 0;}
.but1 a:before { top: 0; left: 0; }
.but1 a:after { bottom: 0; left: 0; }
.but1 a:hover { color: #e9e9e9; }
.but1 a:hover:before,
.but1 a:hover:after { width: 100%; }

/* TOP MENU IMAGE BACKGROUND */
.home { width: 100%;  background-image: url(images/ba6.jpg);  background-size:cover; }
.navTrigger {  display: none;}
.nav { padding-top: 65px; padding-bottom: 35px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }



/* VIDEO START CONTAINER*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden}
	
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%}	
	
/* VIDEO SMALL CONTAINER*/		
.video-container2 {
	width: 480px;
    height: 360px;
    position: relative;
    padding-bottom: 0;
    padding-top: 0;
    overflow: hidden;
    background-color:#F1D898 }

.video-container2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%}	
	
/* YOUTUBE START VIDEO */       	  
.startvideo {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 0;
     height: 0;			
     overflow: hidden;
     width: 100%;
     height: 100%;
     background: #000;}	
	  	 
	 
.startvideo img:hover {  -webkit-filter: brightness(70%); }	 	  
.startvideo img {
     position: absolute;
	 top: 0;
     left: 0;
	 width: 100%;
     height: 100%;
     object-fit: cover;
     cursor: pointer;
     -webkit-transition: .4s all;
     -moz-transition: .4s all;
     transition: .4s all;}	

.startvideo .play {
      height: 72px;
      width: 72px;
      left: 50%;
      top: 50%;
      margin-left: -36px;
      margin-top: -36px;
      position: absolute;
      background: url("/images/btube.png" )center top   no-repeat;
	   background-size: 72px 72px;
      cursor: pointer;}	 
	  
.startvideo iframe,
.startvideo object,
.startvideo embed {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 100;
     background: transparent;}	  

	  
/* YOUTUBE SMALL VIDEO */	  
.smallvideo {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 0;
      height: 0;			
      overflow: hidden;
      width: 100%;
	  height: 100%;
      background: #000;}
	  
	  	  
.smallvideo img:hover { -webkit-filter: brightness(70%) }	  	  	  
.smallvideo img {
      top: 0;
      left: 0;
	  width: 480px ;
      height: 360px ; 
      cursor: pointer;
      -webkit-transition: .4s all;
      -moz-transition: .4s all;
      transition: .4s all;}	  	  
	  
.smallvideo .play {
      height: 72px;
      width: 72px;
      left: 50%;
      top: 50%;
      margin-left: -36px;
      margin-top: -36px;
      position: absolute;
      background: url("/images/btube.png") center top no-repeat;
	  background-size: 72px 72px;
      cursor: pointer;}	  
	  
.smallvideo iframe,
.smallvideo object,
.smallvideo embed {
      position: absolute;
     top: 0;
     left: 0;
     z-index: 100;
     background: transparent;}	

	

/* TOP MENU TELEPHONE MENU */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container { margin: 0; } }
@media screen and (max-width:768px) {
.navTrigger { display: block; }
.nav div.main_list {  width: 100%;  height: 0;  overflow: hidden  }
.nav div.show_list { height: auto; display: none; }
.nav div.main_list ul {
        flex-direction: column;
        width: 100%;
        height: 80vh;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #0c0c0c;
        background-position: center top;}
.nav div.main_list ul li { width: 100%; text-align: center; }
.nav div.main_list ul li a {
        text-align: center;
        width: 100%;
        font-size: 2rem;
        padding: 10px;}}

/* TOP NAV HAMBURGER TELEPHONE MENU */
.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: auto;
    position: relative ;
    top: 10px;
    bottom: 0;}

.navTrigger i {
    background-color: #e9e9e9;
    display: block;
    width: 100%;
    height: 4px;}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;}

@-webkit-keyframes outM {  50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } }
@keyframes outM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } }
@-webkit-keyframes outT { 0% { -webkit-transform: translateY(0px) rotate(0deg); }  50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% {-webkit-transform: translateY(9px) rotate(135deg); } }
@keyframes outT { 0% { transform: translateY(0px) rotate(0deg);} 50% { transform: translateY(9px) rotate(0deg); } 100% {  transform: translateY(9px) rotate(135deg); } }
@-webkit-keyframes outBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } }
@keyframes outBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg);  } }
.col-xs-12  {float: left; padding:10px; width: 100%}

.col-xs-12r  {padding:10px; width: 100%}
.col-xs-12r {float: right; padding:10px; width: 100%} 

.justify { text-align: justify; text-justify: inter-word}
  
/*ALL SECTION STYLES*/
.e { font-size: 1.2rem; color:#febd17 }		
.ea{ font-size: 1.5rem; color:#e9e9e9 }	
.eb{                    color:#e9e9e9 }	
.ec{ font-size: 2rem  ; color:#febd17 }
.ed{ font-size: 1rem  ; color:#e9e9e9 }	    
.ef{ font-size: 2rem  ; color:#e9e9e9 }	 
.eg{ font-size: 2rem  ; color:#e9e9e9 }	 	 
.eh{ font-size: 2rem  ; color:#000000 }	 
.ei{ font-size: 2.5rem; color:#febd17 }	
.ej{                    color:#000000 }
.ek{ font-size: .75rem; color:#fff }
.el{ font-size: 1.75rem ; color:#000000 }

/*PARALLAX*/ 
.bck { margin: 0; background-repeat: repeat; background-attachment: fixed; background-position: center center; }
.back { margin: 0 auto; padding: 40px; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover; }

/*BOX*/
.bot  { box-shadow: 0 0 10px 5px #cccccc}
.box  { box-shadow: 0 0 10px 5px #fff }
.box1 { box-shadow: 0 0 10px 5px  #fff }
.box2 { box-shadow: 0 0 10px 5px #000000}
.box3 { box-shadow: 0 0 10px 2px #000000 }
.box4 { box-shadow: 0 0 5px  1px #fff }

/* TEXTE SHADOW */
.text-shadow  { text-shadow: 4px 4px 4px #333 }
.text-shadow3 { text-shadow: 1px 1px 1px #fff }
.one-edge-shadow2 { -webkit-box-shadow: 0 20px 14px -8px #000; -moz-box-shadow: 0 20px 14px -8px #000; box-shadow: 0 20px 14px -8px #000 }

/*BOUTON SMS ET TELEPHONE*/
.alert {
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    z-index:1040; 
    border-radius:0px}
		
/* BIG SERVICES BUTTONS  EFFECTS 1  */
*,
:after,
:before { -webkit-box-sizing: border-box; box-sizing: border-box }
.grid {	
    position: relative;
    clear: both;
    margin: 0 auto;
    padding: 1em 0 1em;
    max-width: 1000px;
    list-style: none;
    text-align: center;
	}
	
.grid figure {   
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    max-width: 480px;
    max-height: 360px;
    width: 100%;
    height: auto;
    background: #000000;
    text-align: center;
    cursor: pointer}
.grid figure img {
	position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: .7}
.grid figure figcaption {   
    padding: 1.25em;
    color: #fff;	
    text-transform: uppercase;
    font-size: 1em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden}

.grid figure figcaption,
.grid figure figcaption>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%}
.grid figure figcaption>a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0}
.grid figure h2 { word-spacing: -.10em; font-weight: 100 }
.grid figure h2 span { font-weight: 100 }
.grid figure h2, .grid figure p { margin: 0 }
.grid figure p { text-align: center ; letter-spacing: 1px; font-size: 60% }

@media screen and (max-width:50em) {
.grid figure {
	vertical-align: middle;
    display: inline-block;
    float: none;
    margin: 10px auto; }}

/* BIG SERVICES BUTTONS EFFECTS 2  */
figure.effect-ming { background: #000000 }
figure.effect-ming img {  opacity: .9; -webkit-transition: opacity .35s; transition: opacity .35s }
figure.effect-ming figcaption::before {
    position: absolute;
	
    top: 15px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 30px rgba(255, 255, 255, .2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    -webkit-transform: scale3d(1.4, 1.4, 1);
    transform: scale3d(1.4, 1.4, 1)}
figure.effect-ming h2 { margin: 15% 0 10px 0;  -webkit-transition: -webkit-transform .35s; transition: transform .35s }
figure.effect-ming p { padding: .5em; opacity: 0; -webkit-transition: opacity .35s, -webkit-transform .35s; transition: opacity .35s, transform .35s; -webkit-transform: scale(.5); transform: scale(.5)}
figure.effect-ming:hover h2 { -webkit-transform: scale(.5); vertical-align: middle;}
figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); vertical-align: middle;}
figure.effect-ming:hover figcaption { background-color: rgba(0, 0, 0, 0) }
figure.effect-ming:hover img { opacity:.3 }

/* POP UP PICTURE */
.pop{ color: #fff }
.pop:hover { cursor: pointer; text-decoration: none ;  color: #ffc801; outline: 0 }
.poppicture{ display: none; position: fixed; left: 50%; top: 50%; z-index: 2; overflow: hidden; padding: 1px; transform: translate(-50%,-50%) }
.poppicture:hover { cursor: pointer; text-decoration: none }
.overlay{ display: none; position: fixed; left: 0; top: 0; z-index: 1; background-color: rgba(0,0,0,0.5); height: 100%; width: 100% } 

/*ZOOM ON IMAGE*/
.zoom img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;  -ms-transition: all 1s ease;  transition: all 1s ease; }
.zoom:hover img { -webkit-transform:scale(1.25);  -moz-transform:scale(1.25);  -ms-transform:scale(1.25);  -o-transform:scale(1.25);  transform:scale(1.25); }

/*TESTIMONIALS SLIDER*/
#show { position: relative; padding-top:10px; padding-bottom:300px }
#show > div { position: absolute;display: flex; align-items: center ;justify-content: center ;top: 10px;  left: 10px;  right: 10px;  bottom: 10px; }

/* FOOTER CONTAINER */
.footer #button { margin: 0 auto;  position: relative; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; }
.footer #button:hover { position: relative; margin: 0 auto; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; }
.footer {  bottom: 0;  left: 0;  position: fixed;  width: 100%; height: 1em; overflow: hidden;  margin: 0 auto;  -webkit-transition: all 1s ease;  -moz-transition: all 1s ease;  transition: all 1s ease;  z-index: 999}
.footer:hover {  -webkit-transition: all 1s ease; -moz-transition: all 1s ease;  transition: all 1s ease;  height: 10em }
.footer h2 { font-family: Verdana, Geneva, sans-serif; font-size: 14px;  font-weight: 100; margin-top: 10px; margin-left: 40px}

/* FOOTER AJUSTMENT*/
.Footer1 .image_wrap {  display: block; text-align: center;  margin-bottom: 25px;  margin-top: 16px }
.Footer1 ul { list-style: none; text-align: center;  padding-left: 0 }
.Footer1 ul li { display: inline-block; position: relative; padding-left: 14px;  padding-right: 14px }
.Footer1 ul li:before {  content: '/';  position: absolute;  color: #666;  left: -3px }
.Footer1 ul li:first-child:before { display: none }
.Footer1 ul li a { text-decoration: none; color: #fff;  transition: color .5s }
.Footer1 ul li a:hover { color: #ffc801; transition: color .5s }

@media (max-width:768px) {
.Footer1 ul li { display: block }
.Footer1 ul li:before { display: none } }

/* HOVER CHANGE OVER IMAGES ALL 3 WITH DIFFERENT ID */
#page {
  position:relative;
  height:360px;
  width:480px;
  cursor:none;
  background-color:rgba(255, 255, 255, .01);}
#page img {
  position:absolute;
  -webkit-transition: opacity .4s ease-in;
  -moz-transition: opacity .4s ease-in;
  -o-transition: opacity .4s ease-in;
  transition: all .4s ease-in;}
#page img.top { opacity:0;  transform: scale(1); }
#page:hover img.top { opacity:1; transform: scale(1); }

/* HOVER CHANGE OVER IMAGES DIFFERENT ID 2 */
#page2 {
  position:relative;
  height:360px;
  width:480px;
  cursor:none;
  background-color:rgba(255, 255, 255, .01);}
#page2 img {
  position:absolute;
  -webkit-transition: opacity .4s ease-in;
  -moz-transition: opacity .4s ease-in;
  -o-transition: opacity .4s ease-in;
  transition: all .4s ease-in;}
#page2 img.top { opacity:0;  transform: scale(1); }
#page2:hover img.top { opacity:1; transform: scale(1); }

/* HOVER CHANGE OVER IMAGES DIFFERENT ID 3 */
#page3 {
  position:relative;
  height:360px;
  width:480px;
  cursor:none;
  background-color:rgba(255, 255, 255, .01);
}
#page3 img {
  position:absolute;
  -webkit-transition: opacity .4s ease-in;
  -moz-transition: opacity .4s ease-in;
  -o-transition: opacity .4s ease-in;
  transition: all .4s ease-in;
}
#page3 img.top { opacity:0;  transform: scale(1); }
#page3:hover img.top { opacity:1; transform: scale(1); }

 /*ANIMATIONS */
.animatable {
  visibility: hidden;
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;       
  animation-play-state: paused; }

.anime {
  visibility: hidden;
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;       
  animation-play-state: paused; }

/*ALL ANIMATIONS */

.animated { -webkit-animation-duration: 1s;  animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.fadeIn { -webkit-animation-name: fadeIn;  animation-name: fadeIn }
@-webkit-keyframes fadeIn {
    0% {  opacity: 0 }
    to {  opacity: 1  } }
@keyframes fadeIn { 0% {  opacity: 0 } to {  opacity: 1 }  }

/*HEART*/
@keyframes pound { to { transform: scale(1.4); } }
.heart {
	display: inline-block;
	font-size: 16px;
	color: #e00;
	animation: pound .35s infinite alternate;
	transform-origin: center;}
	
/*OVERLAY BACKGROUND*/
.overlay {
  background-color: #000;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1; }