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

   media.css
   Illustrations et images
   (c) 2010-2016 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net

----------------------------------------------------- */
/* Rendre les images responsive par defaut */
img, video, canvas {
  max-width: 100%;
  height: auto;
}
@media print {
  img, video, canvas, svg {
    max-width: 100% !important;
  }
}
img {
  vertical-align: middle;
}
/**
 *  Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  vertical-align: baseline;
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Hide the `template` element in Safari, and Firefox < 22.
 */
template {
  display: none;
}
/* thumbnail */
.thumb,
.thumb.left {
  margin: 0 10px 10px 0;
}
.thumb.right {
  margin: 0 0 10px 10px;
}
/* style effects */
img.round {
  border-radius: 5px;
}
img.circle {
  border-radius: 50%;
}
img.border {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #bbb;
}
img.shadow {
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
}
/* rotating Image */
.rotate-border {
	  
	  border: 1px solid #fff;
	}
 .rotate-odd {
  	animation: rotation 2s infinite ease-in-out;
	 
	}
.rotate-even {
	animation: rotation 3s infinite linear;
}
.rotate-odd-even {
	animation: rotation 4s infinite cubic-bezier(0.4, 0, 1, 1);
}
.rotate-odd-even:hover, .rotate-even:hover, .rotate-odd:hover   {
	animation-play-state: paused;
}
@keyframes rotation {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(359deg);
	  }
	}

/* figure */
figure {
  margin: 0;
  margin-bottom: 0.75em;
  text-align: center;
}
figure.center {
  margin-bottom: 1.5em;
}
figure.left {
  margin-right: 1.5em;
}
figure.right {
  margin-left: 1.5em;
}
@media (max-width: 640px) {
  figure {
    margin-bottom: 1.5em;
  }
  figure.left {
    float: none;
    margin-right: 0;
  }
  figure.right {
    float: none;
    margin-left: 0;
  }
}
/* Video overlay */

.vimeo {
	box-sizing: border-box; 
	position:relative;
	padding:0;
}
.videoHead {
	background-color: var(--black-90);
	width: 100%;
 height: 3vw;
  border-top-left-radius:  25px;
  border-top-right-radius:  25px;
  
	}

.vimeoIframe {
	padding:56.25% 0 0 0;
	position:relative;
  display: block;
  width: 100%;
  height: auto;
  background-color:  var(--black-90);

}
.videoContainer iframe {
/*    opacity:0; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   transition: opacity linear 0.5s;
}
.holds-the-iframe {
  background:url(img/film-line.svg) center center no-repeat;
  background-size: 10vw;
  background-color: var(--black-90);
  animation:  scalePulse 1s infinite alternate ease-in-out;

/*
  -webkit-animation: spin 2s linear infinite; 
  animation: spin 2s linear infinite;
*/

}
@keyframes scalePulse {
    from {  background-color: var(--black-90); }
    to {  background-color: var(--primaryColor25); }
  }
​.holds-the-iframe svg {
	height:2em;
	width:auto;
	}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
​
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.videoOverlay {
  position: absolute; 
  bottom: 0; 
  background: var(--black-50); /* Black see-through */
  color: var(--white-100); 
  width: 100%;
  transition: .5s ease;
  opacity:1;
  color: var(--white-100);
  padding: 0.1em;
  text-align: center;
}
.videoOverlay h1 {
	color:var(--white-100);
	margin: 0 0 0.1em 0;
}
.videoLabel {
	background-color: var(--black-90);
	width: 100%;
  transition: .5s ease;
  opacity:1;
  color: var(--white-75);
  padding: 1em;
  text-align: center;  
  margin-bottom: 2em;
  border-bottom-left-radius:  25px;
  border-bottom-right-radius:  25px;
	}
.videoLabel p {
margin-bottom: 0.5em;	
}
.videoLabel svg {
	vertical-align: middle;
	fill: var(--white-75);
}


@media (max-width:360px) {
	.videoOverlay  { display: none;}
}











/* fin */