/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #393737;
}

body {
    font-size: 0.9em;
    line-height: 1.4;
}


#wrapper { width:95%; margin:auto }
header { border-bottom: dotted 1px #949494; position:relative; margin-top: 20px }
img.j3l { margin-right:20px; margin-bottom:20px }
img.unesco { margin-bottom:20px }
img.social { float:right; margin-top: 30px}

a.actif { cursor: pointer}

#content a { display: block; width: 24.6%; position:relative; float:left; margin: 0 1px 1px 0; }
.thumb img  { width:100% }
.overlay  { position:absolute; top:0; left:0; width:100%; height:100% ; background-image: url('../img/playOverlay.png'); background-position: center center; background-repeat: no-repeat  }

.off  { position:absolute; top:0; left:0; width:100%; height:100% ; background-image: url('../img/off.png'); background-position: center center; background-repeat: no-repeat; text-align: center; color:#7c7c7c  }

.vimeo { border-bottom: dotted 1px #949494; margin-bottom: 20px }
.txt { border-bottom: dotted 1px #949494; margin-bottom: 20px }


.iframe { margin-bottom: 20px; width:600px; height:337px; background-color: #000 }


@media only screen and (max-width: 350px) {

	#content a { display: block; width: 300px; position:relative;  }
	iframe.iframe { width:300px; height:169px }
}


@media only screen and (max-width: 900px) {

	img.social { float:none; margin-top: 0px}

}