@media all and (orientation:portrait) {
.texte {
top:50% !important;
width:80% !important;
left:15%;
}

.fig1{
top:20% !important;
}

/*SLIDES*/
.content-frame {
padding-top: 80px !important;
}
}

/* LITTLE SCREENS(below 640px) ------------------------------*/
@media all and (min-width:1px) and (max-width:640px) {
html {
font-size:13px;
line-height:17px;
}

/* Medaillon h1 (here is the medaillon)*/
#medaillon h1 a {
display:none;
}
#medaillon h1 a:hover {
display:none;
}

/* up ul (here is the arrow Up)*/
#up ul {
display:none;
}
#up ul li {
display:none;
}
#up li a {
display:none;
}

/*SLIDES*/

.content-frame {
padding-top: 40px !important;
}
.content iframe{
display: block;
width: 98%;
height: 300px ;
margin: 0 auto;
border: 0;
position: relative;
z-index: 0;
}

.deuxieme .content-frame .content {
width:90%;
height:90%;
margin: auto;
background-position:60% 50%;
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.quatrieme {
height:250px;
}

.cinquieme .content-frame .content {
width:90%;
height:90%;
background-position:60% 50%;
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
margin: auto;
}

.septieme .content-frame .content {
width:90%;
height:90%;
background-position:60% 50%;
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
transform: rotate(4deg);
margin: auto;
}

}

/* MEDIUM SCREENS(above 640px until 768) -------------------------------------------------------------------*/
@media all and (min-width:641px) and (max-width:767px) {
html {
font-size: 110%;
line-height:110%;
}
/* medaillon)*/
#medaillon h1 a {
background: url(../img/medaillon_50.png);
background-position: 50% top;
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
#medaillon h1 a:hover {
display: block ;
background-position: 50% -50px;
}


/* up ul (here is the arrow Up)*/
#up ul {
display: block;
float: left;
height: 50px;
}
#up ul li {
display: block ;
float: left;
list-style-type: none
}
#up li a {
display: block ;
position: fixed;
bottom: 3%;
height: 50px;
width: 50px;
left: 0%;
background: url(../img/arrows_up_down_50.png) right top no-repeat;
text-indent: -9999px ;
float: left;
text-decoration: none ;
cursor: pointer;
}

/* slides*/
.content iframe{
display: block;
width: 98%;
height: 600px ;
margin: 0 auto;
border: 0;
position: relative;
z-index: 0;
}

.deuxieme .content-frame .content {
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
width:80%;
height:81%;
}
.cinquieme .content-frame .content {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.septieme .content-frame .content {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
}


/* IPADS etc------------------------------------------------------------- */
@media all and (min-width : 768px) and (max-width : 1024px) {

/* Styles */
html {
font-size: 120%;
line-height:140%;
}

.texte {
top:45% !important;
}


.fig1{
width:60% !important;
left:16% !important;
}


/* medaillon h1 (here is the medaillon)*/
#medaillon h1 a {
background: url(../img/medaillon_50.png);
background-position: 50% top;
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
#medaillon h1 a:hover {
display: block ;
background-position: 50% -50px;
}

/* up ul (here is the arrow Up)*/
#up ul {
display: block;
float: left;
height: 50px;
}
#up ul li {
display: block ;
float: left;
list-style-type: none
}
#up li a {
display: block ;
position: fixed;
bottom: 3%;
height: 50px;
width: 50px;
left: 0%;
background: url(../img/arrows_up_down_50.png) right top no-repeat;
text-indent: -9999px ;
float: left;
text-decoration: none ;
cursor: pointer;
}

/* slides */
.content iframe{
display: block;
width: 98%;
height: 700px ;
margin: 0 auto;
border: 0;
position: relative;
z-index: 0;
}
}

/* LARGE SCREENS (1025px) */
@media all and (min-width:1025px) and (max-width:1899px) {
html {
font-size: 170%;
line-height:170%;
}

/* medaillon h1 (here is the medaillon)*/
#medaillon h1 a {
background: url(../img/medaillon_50.png);
background-position: 50% top;
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
#medaillon h1 a:hover {
display: block ;
background-position: 50% -50px;
}

/* up ul (here is the arrow Up)*/
#up ul {
display: block;
float: left;
height: 50px;
}
#up ul li {
display: block ;
float: left;
list-style-type: none
}
#up li a {
display: block ;
position: fixed;
bottom: 3%;
height: 50px;
width: 50px;
left: 0%;
background: url(../img/arrows_up_down_50.png) right top no-repeat;
text-indent: -9999px ;
float: left;
text-decoration: none ;
cursor: pointer;
}

/* slides*/
.content iframe{
display: block;
width: 70%;
height: 450px ;
margin: 0 auto;
border: 0;
position: relative;
z-index: 0;
}
}

/* Very LARGE SCREENS (1900px) ------------------------------------------------ */
@media all and (min-width:1900px) {

html {
font-size: 180%;
line-height:180%;
}

/* Medaillon h1 (here is the medaillon)*/
#medaillon h1 a {
background: url(../img/medaillon_75.png);
background-position: 50% top;
background-repeat: no-repeat;
height: 75px;
width: 75px;
}
#medaillon h1 a:hover {
display: block ;
background-position: 50% -75px;
}

/* up ul (here is the arrow Up)*/
#up ul {
display: block;
float: left;
height: 75px;
}
#up ul li {
display: block ;
float: left;
list-style-type: none
}
#up li a {
display: block ;
position: fixed;
bottom: 3%;
height: 75px;
width: 75px;
left: 0%;
background: url(../img/arrows_up_down_75.png) right top no-repeat;
text-indent: -9999px ;
float: left;
text-decoration: none ;
cursor: pointer;
}

/* slides */
.content iframe{
display: block;
width: 60%;
height: 650px ;
margin: 0 auto;
border: 0;
position: relative;
z-index: 0;
}
}