@media all and (orientation:portrait) {

}

/* LITTLE SCREENS(below 640px) ------------------------------*/
@media all and (min-width:1px) and (max-width:640px) {
/* Medaillon h1 (here is the medaillon)*/
#medaillon h1 a {
display:none;
}
#medaillon h1 a:hover {
display:none;
}
}

/* MEDIUM SCREENS(above 640px until 768) -------------------------------------------------------------------*/
@media all and (min-width:641px) and (max-width:767px) {
/* 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;
}
}

/* IPADS etc------------------------------------------------------------- */
@media all and (min-width : 768px) and (max-width : 1024px) {
/* 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;
}
}

/* LARGE SCREENS (1025px) */
@media all and (min-width:1025px) and (max-width:1899px) {
/* 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;
}
}

/* Very LARGE SCREENS (1900px) ------------------------------------------------ */
@media all and (min-width:1900px) {
body {
width: 70%;
max-width:1024px;
margin: 0 auto;
height: 100%;
max-height:600px;
}
/* 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;
}
}