/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media screen and (max-width: 1024px) {
	h1.logo {font-size:7vw;}
}
@media screen and (max-width: 780px) {

/* passer tous les elements de largeur fixe en largeur automatique */
#entete {height:270px;}
.header #logo {margin-top:160px;}
#nav-mobile {display:inline-block;}
.page {width: auto !important;margin-top:270px;margin-left:auto!important;margin-right:auto!important;}

}
@media screen and (max-width: 600px) {

#entete {height:200px;background-position-x:0;}
.header #logo {margin-top:110px;}
.page {width: auto !important;margin-top:200px;margin-left:auto!important;margin-right:auto!important;}
#barrenav {width:100%;padding:1%;text-align: left;}
h1.logo {padding-left:0;}
.marge {display:none;}
.menu {display:none;}
[class^="mdi-"], [class*=" mdi-"] {padding:0.2em 0.1em;}
a.suite {display:none;}
a.button-collapse {margin-right:0;}
.footer {padding: 0.5em 0 0; border-top: 1px solid;}
a.ghostbutton {font-size:85%;padding-top: 0.5em;border:none;}
a.ghostbutton:hover, 
a.ghostbutton:active {background-color: rgba(255, 255, 255, 0.3);}
.contenu-article h1 {font-size: 1.5em;padding:1em 0 0 10px;}
.texte, .chapo {padding-left:10px;  font-size: 90%;}
.btn, .btn-large, .btn-flat {height:auto;}
.card.horizontal .card-image {width: 50%; height: 100%; background-size: cover;}
}

/* end */