@import url(https://fonts.googleapis.com/css?family=Cinzel);
@import url(https://fonts.googleapis.com/css?family=Hind:400,700);


/* para que las imagenes no salgan del círculo en Safari\Chrome */
.rounded {-webkit-transform: translateZ(0);-webkit-mask-image: -webkit-radial-gradient(circle, white, black);}

/*....................P O R T A D A..................*/
.container {background: #cddff7;}
.portada-profe {
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 14px #fff;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  width: 80px;
}
.sumario-fecha {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  height: 50px;
  margin-top: 20px;
  padding: 5px 10px;
  display: inline-grid;
  width: 100%;
}
#open-bloc {
  font-style: initial;
}
.title > span {
  color: #FFF;
  font-size: 0.5em;
  font-weight: normal;
  margin-top: 25px;
  padding: 0;
  position: absolute;
  text-shadow: none;
  width: 100%;
  line-height: 12px;
}
.content__item--show .region {
  margin-top: -5px !important;
  color: #007ABC !important;
}

.filtres {
  background: #FFFFFF82;
  padding: 0;
  border: 3px solid #FFF;
  margin-top: 10px;
}
.filtres h3 {
  font-size: inherit;
  color: #000;
  text-transform: uppercase;
  margin: 0 7px;
  text-align: center;
}
.filtres ul {
  list-style: none;
  display: inline-block;
  padding: 1px 3px;
  margin: 0;
}
.filtres li {
  border: 1px solid #007ABC;
  padding: 2px 4px;
  margin: 3px;
  border-radius: 6px;
  width: fit-content;
  text-transform: uppercase;
  float: left;
  background: #FFF;
  text-align: center;
}
.filtres a {
  font-style: normal;
  font-weight: 700;
}
.filtres li[data-curs="curs"] {
  width: 100%;
  text-align: left;
  padding-left: 15px;
}
.filtres li[data-curs="curs"] a {color: #990033;}

.filtres li:hover {
  border-color: #990033;
  box-shadow: 1px 2px 3px #000;
}


/*....................F I C H A..................*/
h3 {
  color: #000;
  font-family: lato,sans-serif;
  font-size: 1.7em;
  margin: 0;
  text-align: left;
  text-shadow: 0 1px 1px #fff;
}
h4 {
  color: #990033;
  font-family: georgia,serif;
  font-size: 1.3em;
  font-weight: normal;
  margin:20px 0 5px 15px!important;
  text-shadow: 0 1px 1px #fff;
  text-align: left;
}

/*número del curso para el formador*/
.content__item.content__item--show > h4 {
  bottom: 0;
  color: #c4d6ee !important;
  font-size: 1.7em;
  position: absolute;
  right: 6px;
}
.fiche-profe {
  border: 2px solid #fff;
  border-radius: 50%;
  float: left;
  height: 80px;
  margin: 0 5px 0 0;
  overflow: hidden;
  width: 80px;
}

.curso {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #990033;
    overflow: hidden;
    padding:0 1em 15px;
}
.curso-region {
  color: #007abc;
  font-weight: inherit;
  text-align: center;
  text-transform: uppercase;
}

.curso h4 {
  margin: 15px 10px !important;
}
.curso-program {
  display: block;
  text-align: center;
  margin-top: 15px;
  font-weight: 700;
  border: 1px solid #FFF;
  padding: 5px 0 0 0;
  border-radius: 10px;
  text-transform: uppercase;
  font-style: inherit;
}
.image-taller img {width: 100%;}

/*≈≈≈≈≈≈≈≈VIDÉO WRAPPER≈≈≈≈≈*/
/*
Pour que les vidéo ne se chargent pas
on utilise un .js qui envoie la src quand on clic 
sur la frame qui contient l'image poster
Idée prise ici https://codepen.io/pixelthing/pen/zGZKaQ
*/
/*≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈*/
.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
  border: 3px solid #FFF;
  border-radius: 195px;
  box-shadow: 0px 1px 10px 5px #00000038;
  overflow: hidden;
}
.videoWrapper43 {padding-top: 75%;}
.videoWrapper169 {padding-top: 56.25%;}
.videoIframe {
  position: absolute;
  top: -2px;
  right: 0;
  bottom: 0;
  left: -2px;
  width: 101.1%;
  height: 101%;
  background-color: transparent;
}
.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.videoPoster::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 32px solid #00000078;
  border-radius: 100%;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
  box-shadow: 0px 0px 10px 14px #FFF;
  outline: 3px solid #ffcb00;
}
.videoPoster::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -24px 0 0 -10px;
  border-left: 35px solid #f00;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:hover:before, .videoPoster:focus:before {border-color: #f00;}
.videoPoster:hover:after, .videoPoster:focus:after {border-left-color: #FFF;}
.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  -moz-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}
/*≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈*/


.fecha {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #007abc;
  margin-top: 20px;
  padding: 10px;
  hyphens: none; -webkit-hyphens: none;
}
.fecha > h3 {margin: 15px 0 20px 65px;}
.fecha > ul {padding: 0 15px;}
.fecha li {
  background-image: url("tic-circlebleu.png");
  background-position: 3px -3px;
  background-repeat: no-repeat;
  line-height: 1.1em;
  list-style: outside none none;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0 0 0 25px;
  text-align: left;
}
.fecha span {font-weight: bold;}
.fecha-nota {
  padding: 0 15px;
  text-align: left !important;
}
.fecha-nota p:first-of-type {
  font-weight: bold;
  color: #990033;
  text-indent: -15px;
  margin: 0 0 5px 0;
}
.fecha-nota p {
  text-align: left;
  margin: 0 0 10px;
}
.profe {
  background-color: #fff;
  border: 1px solid #990033;
  margin-top: 20px;
  padding: 10px;
}
.profe > h3 {color: #990033;}
.profe span {
  color: #007abc;
  font-weight: normal;
}
.profe-retrat {
  float: right;
  margin-left: 5px;
  max-width: 130px;
}
.profe-contact {
  display: none;
  font-weight: bold;
  hyphens: none;
  padding: 0;
  text-align: right;
}

.precios {
  border: 1px solid #007abc;
  margin-top: 20px;
  padding: 1em;
}
.precios > h3 {color: #990033;}
.precios > ul {
  font-size: 1.3em;
  padding: 0 15px;
}
.precios li {
  background-image: url("tic-circlebleu.png");
  background-position: -1px 0;
  background-repeat: no-repeat;
  line-height: 1.1em;
  list-style: outside none none;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0 0 0 25px;
  text-align: left;
}
.precios-nota {
  margin-bottom: 20px !important;
  display: inline list-item;
  list-style: disclosure-closed;
}
.precios-reservaform {
  margin-left: -48px !important;
  position: relative;
}
.precios-paydiff {
  border: 2px solid #FFF;
  border-radius: 5px;
  padding: 10px;
  background: #ffffff59;
  margin-top: 10px;
}
.precios-paydiff h4 {
  padding: 0;
  margin: 0 !important;
}
.precios-nota {
  font-size: 1.2em !important;
  font-style: italic;
  font-weight: bold;
  margin-bottom: -15px !important;
  text-align: left;
}
.earlybird {
  background: #fff none repeat scroll 0 0;
  outline: 1px solid #fff;
  outline-offset: 4px;
  padding: 5px;
}
.earlybird p {
  padding: 5px;
  margin: 0;
  font-weight: bold;
  color: #990033;
}

.lugar {
  background-color: rgba(205, 225, 250, 0.7);
  border: 2px solid #fff;
  margin-top: 20px;
  padding: 10px;
}
.lugar-retrat {
  display: table;
  margin: 0 auto 10px;
  max-width: 255px;
  border-radius: 15px;
  box-shadow: 0 0 10px 2px rgba(0,0,0,0.6);
  border: 2px solid #FFF;
}
.lugar > h3 {text-align: center;}
.lugar .mini-icn {margin-top: -15px;}
.lugar-map {
  display: table;
  font-size: 1.3em;
  margin-top: 50px;
}
.lugar-hotel {
  display: table;
  font-size: 1.3em;
  margin-top: 50px;
}
.lugar-info {
  font-style: italic;
  hyphens: none;
  margin: 0;
}
.lugar-info h4 {
  font-style: italic;
  margin: 0 !important;
}
.lugar > ul {text-align: left;}
.reserva {
  background: #fff none repeat scroll 0 0;
  border-radius: 20px;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.4);
  margin-bottom: 30px;
  margin-top: 20px;
  padding: 20px;
}
.reserva p {
  hyphens: none;-webkit-hyphens: none;
  text-align: left!important;
}

.reserva > h3 {color: #990033;}
.reserva > h4 {
  color: #000;
  font-weight: bold;
  margin: 10px 0 -10px;
}
.reserva .mini-icn {margin-top: 15px;}
.buynow {
  float: left;
  margin: -10px 5px 10px 0;
  min-width: 60px;
  padding-top: 0;
  width: 15%;
}
.paypal-clic {
  width: 100%;
}
.paypal-clic img {
  height: 80px;
  float: left;
}
.paypal-clic p {
  font-weight: bold;
  padding: 17px;
}
.paypal-item {
  border: 1px dotted #990033;
  width: 60%;
  margin: 0;
  padding: 10px;
  text-align: left !important;
  hyphens: none;
}
.organiz-retrat {
  float: right;
  max-width: 100px;
}
.organiz-contact {
  color: #990033;
  font-weight: bold;
  margin: 0 0 -15px !important;
  text-align: left !important;
}

.certif {padding: 10px 20px 10px 20px;}
.certif p {
  hyphens: none;-webkit-hyphens: none;
  text-align: left!important;
}
.certif .mini-icn {
  margin-top: 15px;
  width: 200px;
}

.icon {
    display: inline-block;
    fill: currentcolor;
    height: 1em;
    width: 1.0em;
    font-size: 1.3em;
}
svg {color: #007abc;}
.icon-checkmark {color: #95b148;margin-bottom: -4px;}
.icon-reply {
  font-size: 1em;
  -webkit-filter: drop-shadow(-3px 2px 2px rgba(0,0,0,0.6));
  filter: drop-shadow(-3px 2px 2px rgba(0,0,0,0.6));
}

.icon-info {color: #fff;}
.icon-info:hover {color: #000;}

.niv-icn {
  float: left;
  margin: 0 5px 0 -15px;
  max-width: 8rem;
}
.mini-icn {
  float: left;
  margin: 0 5px 0 0;
  width: 50px;
}
.masinfo {padding-left: 10px;}

.niv::before {border:3px solid #bababa;border-radius: 10px;}

/*
¶01|reflex|DienChan❜reflex 
¶02|pro|DienChan❜pro 
¶03|clinic|DienChan❜clinic
¶04|master|DienChan❜master 
¶05|cbreflex|Chan❜beauté seul
¶06|dc-rcb|DienChan❜reflex + Chan❜beauté 
¶07|cbreflex|ChanBeaute❜reflex
¶08|cbpro|ChanBeauté❜pro
¶09|dc-pc|DienChan❜pro +❜clinic
¶10|formateur|DienChan❜prof
¶11|dc-rp|DienChan❜reflex +❜pro
¶12|dc-rpc|DienChan❜reflex +❜pro +❜clinic
¶20|atelier|Atelier
¶30|support|Support
¶40|conf|Conférence
¶41|salon|Salon
*/
.fd-reflex::before {background-image:   url("../imgs/fd-reflex.jpg");}
.fd-pro::before {background-image:      url("../imgs/fd-pro.jpg");}
.fd-clinic::before {background-image:   url("../imgs/fd-clinic.jpg");}
.fd-master::before {background-image:   url("../imgs/fd-master.jpg");}
.fd-cbreflex::before {background-image: url("../imgs/fd-beaute.jpg");}
.fd-cbpro::before {background-image:    url("../imgs/fd-rdv.jpg");}
.fd-dc-rcb::before {background-image:   url("../imgs/fd-1CB.jpg");}
.fd-formateur::before {background-image:url("../imgs/fd-formateur.jpg");}
.fd-atelier::before {background-image:  url("../imgs/fd-atelier.jpg");}
.fd-support::before {background-image:  url("../imgs/fd-rdv.jpg");}
.fd-conf::before {background-image:     url("../imgs/fd-conf.jpg");}
.fd-salon::before {background-image:    url("../imgs/fd-conf.jpg");}
.fd-dc-rp::before {background-image:    url("../imgs/fd-modules12.jpg");}
.fd-dc-rpc::before {background-image:   url("../imgs/fd-modules123.jpg");}
.fd-dc-pc::before {background-image:    url("../imgs/fd-modules23.jpg");}



/* close button (for content and sidebar) */
.close-button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #007abc;
  cursor: pointer;
  font-size: 70px;
  margin: 0;
  opacity: 0;
  padding: 20px 30px;
  pointer-events: none;
  position: absolute;
  right: calc(100% - 74%);
  text-shadow: 0 0 3px #fff;
  top: 0;
  z-index: 100;
}
.close-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.close-button--show:hover > .icon-reply {
  filter: none;
  color: #990033;
  -webkit-filter:none;filter:none;
  color: #990033;
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.close-button span {display: none;}
/* show class for content close button */
.close-button--show {opacity: 1;pointer-events: auto;}



/*..........................................................................TABLET.(yellow).....................*/
@media only screen and (min-width: 768px) {
.testsize{background-color:yellow;}
	.curso {padding:0 2em 15px;}
	.mini-icn {max-width: 14rem;}

}/*............................................END_768px.................................*/



/*........................................................iPad horizontal .(blue) ..................*/
@media only screen and (min-width: 1024px) {
.testsize{background-color:blue;}

}/*............................................END_1024px.................................*/


/*........................................................PANTALLA GRANDE.(violet)..................*/
@media only screen and (min-width: 1170px) {
.testsize{background-color: purple;}


} /*............................................END_1170px.................................*/


/*........................................................PANTALLA MUY GRANDE.(turquoise)..................*/
@media only screen and (min-width: 1410px) {
.testsize{background-color: turquoise;}


} /*............................................END_1410px.................................*/


@-webkit-keyframes rotateOutDownRight {
  from {-webkit-transform-origin: center center;transform-origin: center center;opacity: 1;}
  to {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate3d(0, 0, 1, -33deg);
    transform: rotate3d(0, 0, 1, -33deg);
    opacity: 0.8;
  }
}
@keyframes rotateOutDownRight {
  from {-webkit-transform-origin: center center;transform-origin: center center;opacity: 1;}
  to {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate3d(0, 0, 1, -33deg);
    transform: rotate3d(0, 0, 1, -33deg);
    opacity: 0.8;
  }
}


/*.............pour mes notes de texte*/
bqc {font-variant:small-caps;}
yysup {
  font-size: 0.8em;
  letter-spacing: -5px;
  line-height: 0;
  position: relative;
  top: 8px;
  vertical-align: baseline;
}
sup {
  color: #007abc;
  font-family: arial;
  font-size: 0.8em;
  font-style: normal;
  position: relative;
  top: -1.45em;
  vertical-align: bottom;
}
.bloc-nota {
  font-size: 0.9rem !important;
  hyphens: none;
  line-height: 1.1em;
  text-align: left;
}
.bloc-nota br {margin-bottom: 10px;}
nota:first-of-type::before {
  border-top: 1px solid #007abc;
  display: block;
  height: 4px;
  width: 70%;
}
nota:first-of-type {padding-left: 10px;}
nota::before {content: " ";font-size:2em;padding-left: 10px;}
nota {
  color: #007abc;
  font-size: 1em;
  font-style: normal;
  margin-left: -10px;
}
nota::after {content: " ";padding-right: 2px;}

.stabylo {
  color: #000000;
  display: list-item;
  font-family: trebuchet ms,sans-serif;
  font-size: 1.2em !important;
  list-style-image: url("stabylo.png");
  list-style-position: inside;
  margin: 0 0 20px;
  text-shadow: 0 -4px 10px yellow, 0 4px 10px yellow, -4px 0 10px yellow, 4px 0 10px yellow, 9px 0 10px yellow;
}
.stabylo a {
  font-family: inherit;
  font-style: inherit;
  background: inherit;
  text-shadow: inherit;
  color: inherit;
  text-decoration: underline #990033;
}
/*.............*/