.diapo {
	background-color: #9cf;
	width: 640px;
	height: 480px;
	margin: auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	overflow: hidden;
	page-break-inside: avoid;
	left: 50%;
	margin-left: -320px;
}

@media screen and (max-width: 680px) {
   .diapo {
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
		margin-top: -12px;
		margin-bottom: -12px;
   }
}

@media screen and (max-width: 600px) {
   .diapo {
      -webkit-transform: rotate(-90deg) scale(0.9);
      -moz-transform: rotate(-90deg) scale(0.9);
      -ms-transform: rotate(-90deg) scale(0.9);
      -o-transform: rotate(-90deg) scale(0.9);
      transform: rotate(-90deg) scale(0.9);
		margin-top: 70px;
		margin-bottom: 50px;
   }
}

@media screen and (max-width: 520px) {
   .diapo {
      -webkit-transform: rotate(-90deg) scale(0.8);
      -moz-transform: rotate(-90deg) scale(0.8);
      -ms-transform: rotate(-90deg) scale(0.8);
      -o-transform: rotate(-90deg) scale(0.8);
      transform: rotate(-90deg) scale(0.8);
		margin-top: 40px;
		margin-bottom: 20px;
   }
}

@media screen and (max-width: 430px) {
   .diapo {
      -webkit-transform: rotate(-90deg) scale(0.7);
      -moz-transform: rotate(-90deg) scale(0.7);
      -ms-transform: rotate(-90deg) scale(0.7);
      -o-transform: rotate(-90deg) scale(0.7);
      transform: rotate(-90deg) scale(0.7);
		margin-top: -16px;
		margin-bottom: -16px;
   }
}

@media screen and (max-width: 380px) {
   .diapo {
      -webkit-transform: rotate(-90deg) scale(0.6);
      -moz-transform: rotate(-90deg) scale(0.6);
      -ms-transform: rotate(-90deg) scale(0.6);
      -o-transform: rotate(-90deg) scale(0.6);
      transform: rotate(-90deg) scale(0.6);
		margin-top: -48px;
		margin-bottom: -48px;
   }
}

.berengere .diapo {
	background-color: #a9d8f9;
	background-repeat:no-repeat;
	background-size: 100%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.diapo p {
	text-indent: 0 !important;
}
.diapo .font00 {
	font-size: 300%;
}
.diapo .font0 {
	font-size: 240%;
}
.diapo .font1 {
	font-size: 200%;
}
.diapo .font2 {
	font-size: 160%;
}
.diapo .font3 {
	font-size: 150%;
	color: blue;
}
.diapo .font4 {
	font-size: 130%;
}

/* Diapositive caption */
.diapocap {
	text-align: center;
	font-size: 90%;
	font-style: italic;
	margin-bottom: 24px;
	width: 640px;
	max-width: 100%;
	margin: auto;
}

.left {
	text-align:left;
}
.sz100 {
	width: 100%;
	height: 100%;
}
.p0 {
	padding: 0;
}
.p1 {
	padding: 1px;
}
.p2 {
	padding: 2px;
}
.p3 {
	padding: 3px;
}
.m0 {
	margin: 0;
}
.m1 {
	margin: 1px;
}
.m2 {
	margin: 2px;
}
.m3 {
	margin: 3px;
}
.tl0 {
	top: 0;
	left: 0;
}
.tlm1 {
	top: -1px;
	left: -1px;
}
.tlm2 {
	top: -2px;
	left: -2px;
}
.tlm5 {
	top: -5px;
	left: -5px;
}
.tlm6 {
	top: -6px;
	left: -6px;
}
.fulr,.full {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	position: relative;
}
.fula {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	position: absolute;
}
.b1n {
	border: 1px solid black;
}
.b1b {
	border: 1px solid #0c779d;
}
.b1r {
	border: 1px solid red;
}
.b2n {
	border: 2px inset black;
}
.b2b {
	border: 2px inset #0c779d;
}
.b2r {
	border: 2px inset red;
}
.b5n {
	border: 5px solid black;
}
.b5b {
	border: 5px solid #0c779d;
}
.b5r {
	border: 5px solid red;
}
.b6n {
	border: 6px solid black;
}
.b6b {
	border: 6px solid #0c779d;
}
.b6r {
	border: 6px solid red;
}
.o1n {
	outline: 1px solid black;
}
.o1b {
	outline: 1px solid #0c779d;
}
.o1r {
	outline: 1px solid red;
}
.o2n {
	outline: 2px solid black;
}
.o2b {
	outline: 2px solid #0c779d;
}
.o2r {
	outline: 2px solid red;
}
.o5n {
	outline: 5px solid black;
}
.o5b {
	outline: 5px solid #0c779d;
}
.o5r {
	outline: 5px solid red;
}
.o6n {
	outline: 6px solid black;
}
.o6b {
	outline: 6px solid #0c779d;
}
.o6r {
	outline: 6px solid red;
}
.z4 {
	z-index: 4;
}

.shad4 {
	position: absolute;
	z-index: 4;
	box-shadow: 0 0 4px #888;
}

.outsh4, .frame4 {
	margin: 0; padding: 0;
	position: absolute;
	z-index: 4;
}

.frame4 {
	outline: 4px solid black;
	outline-offset: 2px;
}

.outsh4 > img,  .outsh4 > p {
	margin: 0; padding: 0;
	outline: 4px solid red;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

.frame4 > img {
	display: block;
	margin: 0; padding: 0;
	outline: 1px solid black;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

.frame4 > div {
	box-shadow: 0 0 4px black inset;
	display: block;
	margin: 0; padding: 0;
	pointer-events: none;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 5;
}

.outsh4 > img,  .outsh4 > p {
	box-shadow: inset 4px 4px 4px #999;
}

.outsh4 > p > img {
	position: absolute;
	width: 100%; height: 81%;
	bottom: 0; left: 0;
}

.outsh4 > div {
	box-shadow: 4px 4px 4px #999;
	color: white;
	margin: 0; padding: 3px;
	pointer-events: none;
	position: absolute;
	top: -3px; left: -3px;
	width: 100%; height: 100%;
}

.frr, .frr img {
	outline-color: red;
}
.frr > div {
	box-shadow: 0 0 4px red inset;
}
.frc, .frc img {
	outline-color: #f14124;
}
.frb, .frb img {
	outline-color: #00b0f0;
}
.frb > div {
	box-shadow: 0 0 4px #00b0f0 inset;
}
.gradient {
	background-image: -webkit-radial-gradient(white,rgba(255,255,255,0.1));
	background-image: -moz-radial-gradient(white,rgba(255,255,255,0.1));
	background-image: -ms-radial-gradient(white,rgba(255,255,255,0.1));
	background-image: -o-radial-gradient(white,rgba(255,255,255,0.1));
	background-image: radial-gradient(white,rgba(255,255,255,0.1));
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%; height: 100%;
	z-index: 3;
}
.page_n {
	position: absolute;
	font-size: 65%;
	bottom: 6.0%; left: 51.1%;
	width: 2.0%;
	z-index: 5;
	color: gray;
	overflow: hidden;
}