/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 65%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #ffffff;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
  height:auto;
}
h1
{
  font-size: 100%;
 
  font-family:Arial, Helvetica, sans-serif;
  color: green;
  padding:16px;
  
  -moz-box-shadow: 2px 2px 6px #666;  
  -webkit-box-shadow: 2px 2px 6px #666;  
  box-shadow:2px 2px 6px #666;  
  text-align:center;
  display:block;
  margin:16px;
   
}

li {
  max-width: 100%;
  line-height:120%;
}
/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: black;/* couleur fond icone hamburger sur toute la largeur */
  /*opacity:0.7;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 70px;
    background-color: black;
	opacity:0.7;
  }
  }
}

#cd-logo {
  float: left;
  margin: 13px 0 0 5%;
}
#cd-logo img {
  display: none;
}
@media only screen and (min-width: 768px) {
  #cd-logo {
	  
    margin: 3px 0 0 -15%;
  }
  #cd-logo img {
  display: block;
}
}

.cd-primary-nav {
  /* mobile first - navigation hidden by default, triggered by tap/click on navigation icon */
  float: right;
  margin-right: 5%;
  width: 44px;
  height: 100%;
  background: url("../assets/cd-icon-menu.svg") no-repeat center center;
  /*opacity:0.8;*/
}
.cd-primary-nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.cd-primary-nav ul.is-visible {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.cd-primary-nav a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  background: black; /*couleur fond menu smartphone mode*/
  border-top: 1px solid yellow;
  color: yellow; /*couleur texte menu smartphone mode*/
}
@media only screen and (min-width: 768px) {
  .cd-primary-nav {
    /* reset navigation values */
    width: auto;
    height: auto;
    background: none;
  }
  .cd-primary-nav ul {
    position: static;
    width: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 70px;
  }
  .cd-primary-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .cd-primary-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  .cd-primary-nav a {
    display: inline-block;
    height: auto;
    font-weight: 600;
    line-height: normal;
    background: black; /*couleur fond menu haut*/
	
	border-radius:10px;
    padding: .6em 1em;
    border-top: none;
	color:yellow; /*couleur texte du primary-nav*/
  }
}
.cd-secondary-nav {
	width:100%;
    height: auto;
    font-weight: 600;
    line-height: normal;
    background: black; /*couleur fond menu bas*/
	
	border-radius:10px;
    padding: .6em 1em;
    border-top: none;
	color:yellow; /*couleur texte menu bas*/
}
.cd-secondary-nav ul {
    position: static;
	
    width: auto;
}
.cd-secondary-nav li {
    display: inline-block;

    margin-left: 2em;
	 margin-right: 2em;
  }
  .cd-secondary-nav a {
    display: inline-block;
	color:yellow;
    margin-left: 1em;
	 margin-right: 1em;
	 border-radius:5px;
  }
  .cd-secondary-nav a:hover {
    
	color:red;
    background:yellow;
	 
  }
/* -------------------------------- 

Personnalisation primary-nav en lui ajoutant image devant texte

-------------------------------- */
.cd-primary-nav li a:hover {
	
	color:red; /*couleur texte survol menu smartphone mode*/
}
 .cd-primary-nav li:nth-child(1) a:hover::before {
	content:url(../icons_svg/house_red.svg) ;
	color:red; /*couleur texte survol menu smartphone mode*/
}
.cd-primary-nav li:nth-child(2) a:hover::before {
	content:url(../icons_svg/harvard_red.svg) ;
	color:red; /*couleur texte survol menu smartphone mode*/
}
.cd-primary-nav li:nth-child(3) a:hover::before {
	content:url(../icons_svg/competences_red.svg) ;
	color:red; /*couleur texte survol menu smartphone mode*/
}
.cd-primary-nav li:nth-child(4) a:hover::before {
	content:url(../icons_svg/experiences_red.svg) ;
	color:red; /*couleur texte survol menu smartphone mode*/
}
.cd-primary-nav li:nth-child(5) a:hover::before {
	content:url(../icons_svg/divers_red.svg) ;
	color:red; /*couleur texte survol menu smartphone mode*/
}
.cd-primary-nav li:nth-child(6) a:hover::before {
	content:url(../icons_svg/apropos_red.svg) ;
	color:red; /*couleur texte survol menu smartphone mode*/
}
.cd-primary-nav li a:before {
  
  position: relative;
  padding-top: 1%;
  left: -5px;
  
}
.cd-primary-nav li:nth-child(1) a:before {
  content:url(../icons_svg/house_yellow.svg) ; 
}
.cd-primary-nav li:nth-child(2) a:before {
  content: url(../icons_svg/harvard_yellow.svg);
}
.cd-primary-nav li:nth-child(3) a:before {
  content: url(../icons_svg/competences_yellow.svg);
}
.cd-primary-nav li:nth-child(4) a:before {
  content: url(../icons_svg/experiences_yellow.svg);
}
.cd-primary-nav li:nth-child(5) a:before {
  content: url(../icons_svg/divers_yellow.svg);
}
.cd-primary-nav li:nth-child(6) a:before {
  content: url(../icons_svg/apropos_yellow.svg);
}


/* -------------------------------- 

Main content

-------------------------------- */
.cd-main-content {
	
	
  width: 90%;
  max-width: 768px;
  margin:0 auto;
  padding: 2em 0;
 
  }
.cd-main-content p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #1A1FA8;
  margin: 2em 0;
}
.cd-main-content h2 {
  font-size: 2.5rem;
  font-family: 'sans-serif', cursive;
  line-height: 1;
  color: red;
  margin: 2em 0;
  
}
@media only screen and (min-width: 1170px) {
  .cd-main-content {
    padding: 1.5em 0;
  }
  .cd-main-content p {
    font-size: 1.6rem;
  }
}
/*
.accueil {background: url(../assets/elephantgris512x384.svg) no-repeat center; } */
.facebook { background: url(../assets/couple-small.svg) no-repeat center;}
.galeries{
	background: url(../assets/flower-lotus-small.svg) no-repeat center;}
}
.parten {background: url(../assets/femme-315.svg) no-repeat center;}
.colleg{
	background: url(../assets/lampion.svg) no-repeat center;}
}
.carte{
	background: url(../assets/carte.svg) no-repeat center;}
}
 .rouge{
	color:red;
}
 .gras { 
    
	font-style:bold;
}

/* -------------------------------- 

boutons facebook

-------------------------------- */
a.fbsuivre {
	display:inline-block;
	width:64px;
	height:64px;
	
	
	background:url(../assets/fbicon.png) no-repeat ;
}

	
	

a.fbsuivre:hover {
	
	background:url(../assets/fbiconhover.svg) no-repeat;
}
a.fbpartage {
	display:inline-block;
	width:100px;
	height:50px;
	margin-left:5px;
	background:url(../assets/fbpartage.svg) no-repeat ;
}

	
	

a.fbpartage:hover {
	
	background:url(../assets/fbpartagehover.svg) no-repeat;
}
a.haut {
	display:inline-block;
	width:100px;
	height:50px;
	margin-left:5px;
	background:url(../assets/haut.svg) no-repeat ;
}

	
	

a.haut:hover {
	
	background:url(../assets/hauthover.svg) no-repeat;
}/* -------------------------------- 

boutons facebook

-------------------------------- */
a.galerieimg {
	display:inline-block;
	width:100px;
	height:50px;
	
	
	background:url(../assets/btngalerieimg.svg) no-repeat ;
}

	
	

a.galerieimg:hover {
	
	background:url(../assets/btngalerieimghover.svg) no-repeat;
}
a.galerievid {
	display:inline-block;
	width:100px;
	height:50px;
	margin-left:5px;
	background:url(../assets/btngalerievideo.svg) no-repeat ;
}

	
	

a.galerievid:hover {
	
	background:url(../assets/btngalerievideohover.svg) no-repeat;
}

/* -------------------------------- 

video plein ecran

-------------------------------- */
.videocontainer 
{
    display:none;
	position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
	z-index:1;
}

.videocontainer video 
{
    min-width: 100%;
    min-height: 100%;
}
@media only screen and (min-width: 768px){
	.videocontainer {
	display:block;
}
}

/* -------------------------------- 

galerie images

-------------------------------- */
 .galerie {
  position:relative;
  height: 100%;
  padding-top:80px;
  overflow: hidden;
}

 
/* -------------------------------- 

logo

-------------------------------- */

 .logo {
	 display:none;
	 position:absolute;
	 width: 100%;
	 height:100%;
     
	 
}

@media only screen and (min-width: 768px) {
 .logo {
	display:inline-block;
	z-index: 1;
	margin:10% 1%;
	background: url(../assets/logo-slide01-256x135.svg) no-repeat;
	
	}
}
	
	
	@media only screen and (min-width: 1170px) {
 .logo {

display:inline-block;

margin:5% 2%;
background-image: url(../assets/logo-slide01-512x270.svg) ;
		}
	}
/* -------------------------------- 

lotus

-------------------------------- */
.lotus {
	 display:none;
	 position:absolute;
	 width: 20%;
	 height:20%;
     
	 
}

@media only screen and (min-width: 768px) {
 .lotus {
	display:block;
	z-index: 3;
	margin:200px 0 0 40px;
	background: url(../assets/flower-lotus.svg) no-repeat;
	
	}
}
	
	
	@media only screen and (min-width: 1170px) {
 .lotus {

display:block;

margin:310px 0 0 50px;
background-image: url(../assets/flower-lotus.svg) no-repeat ;
		}
	}
/* -------------------------------- 

lotus2

-------------------------------- */
.lotus2 {
	 display:none;
	 position:absolute;
	 width: 20%;
	 height:20%;
     
	 
}

@media only screen and (min-width: 768px) {
 .lotus2 {
	display:block;
	z-index: 3;
	margin-top:200px;
	margin-left:80%;
	background: url(../assets/flower-lotus.svg) no-repeat;
	
	}
}
	
	
	@media only screen and (min-width: 1170px) {
 .lotus2 {

display:block;

margin-top:310px;
margin-left:80%
background-image: url(../assets/flower-lotus.svg) no-repeat ;
		}
	}
/* -------------------------------- 

text saveurs asiatiques

-------------------------------- */
.textasie {
	 display:block;
	 position:absolute;
	 width: 300px;
	 height:30px;
     background-image: url(../assets/specialites-chine-small.svg)  ;
	 margin-top:300px;
	margin-left: 15%;
}

@media only screen and (min-width: 768px) {
 .textasie {
	width: 600px;
	 height:60px;
	 display:block;
	position:absolute;
	margin-top:410px;
	margin-left: 20%;
    
	background-image: url(../assets/dt416x44.svg)  ;
	
	}
}
	
	
	@media only screen and (min-width: 1170px) {
 .textasie {
	 
	 width: 600px;
	 height:60px;
	 display:block;
	position:absolute;
	margin-top:550px;
	margin-left: 32%;
    
	background-image: url(../assets/specialites-chine-600x60.svg) ;
		}
	}
	
	@media only screen and (min-width: 1600px) {
 .textasie {
	 
	 width: 600px;
	 height:60px;
	 display:block;
	position:absolute;
	margin-top:580px;
	margin-left: 35%;
    
	background-image: url(../assets/specialites-chine-600x60.svg) ;
		}
	}
/* -------------------------------- 

text spécialités vietnamienne

-------------------------------- */
.textviet {
	 display:block;
	 position:absolute;
	 width: 300px;
	 height:30px;
     background-image: url(../assets/specialites-viet-small.svg)  ;
	 margin-top:260px;
	margin-left: 15%;
	 
     
	 
}

@media only screen and (min-width: 768px) {
 .textviet {
	width: 600px;
	 height:60px;
	 display:block;
	position:absolute;
	margin-top:350px;
	margin-left: 20%;
    
	background-image: url(../assets/specialites-viet-600x60.svg)  ;
	
	}
}
	
	
	@media only screen and (min-width: 1170px) {
 .textviet {
	 
	 width: 600px;
	 height:60px;
	 display:block;
	position:absolute;
	margin-top:490px;
	margin-left: 32%;
    
	background-image: url(../assets/specialites-viet-600x60.svg) ;
		}
	}
	
	@media only screen and (min-width: 1600px) {
 .textviet {
	 
	 width: 600px;
	 height:60px;
	 display:block;
	position:absolute;
	margin-top:520px;
	margin-left: 35%;
    
	background-image: url(../assets/specialites-viet-600x60.svg) ;
		}
	}
/* -------------------------------- 

boutons fermer

-------------------------------- */
.btn {
	display:block;
	position:absolute;
	width: 90px;
	 height:40px;
	margin-top:1%;
	margin-left:1%;
	z-index:3;
}

.play{
	display:inline-block;
	position:relative;
	width: 90px;
	 height:40px;
	margin-top:1%;
	
	margin-left:4%;
	padding-left:3%;
	z-index:3;
}
/* -------------------------------- 

Pied de page  pdp

-------------------------------- */
.pdp {
	
	display:block;
  width: 100%;
  height:3em;
  margin: 4em auto;
  
  
 background:#000000;
  }
.pdp p {
  font-size: 2rem;
  line-height: 1.8;
  color: yellow;
  margin: 2em 0;
}
.pdp h2 {
  font-size: 2rem;
  font-family:"Open Sans", sans-serif;
  line-height: 1;
  color: yellow;
  margin: 0.2em 0;
  padding-top: 0.6%;
}
@media only screen and (max-width: 700px) {
	.pdp p {
    font-size: 0.5rem;
	  }
	  .pdp h2 {
  font-size: 2rem;
  font-family:"Open Sans", sans-serif;
  line-height: 1;
  color: yellow;
  margin: 0.2em 0;
  padding-top: 3%;
}
@media only screen and (min-width: 1170px) {
  .pdp {
    padding: 0.2em 0;
  }
  .pdp p {
    font-size: 1.6rem;
  }
}
/* -------------------------------- 

Javascript disabled

-------------------------------- */
.no-js .cd-hero-slider li {
  display: none;
}
.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}
.legende{
	
	position:absolute;
	width:25%;
	height:auto;
	opacity:0.7;
	margin-top:80px;
	margin-left:0.5%;
	background:black;
	overflow:hidden;
}
.legende h2{
	font-size:2rem;
	font-weight:900;
	color:red;
}
@media only screen and (max-width: 700px) {
	.legende{
		display:none;
	}
}