@import url('//fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');
@import url('https://fonts.googleapis.com/css?family=Anton');

HTML {
  width: 100%;
  font-size: 105%;
  margin: 0;
  padding: 0;	
}

BODY{
	position:relative;
	width: 100%;
	padding: 0;	
	font-size: 1em;	
	color:#333333;
	background-color:white;
	line-height:1.4;
	font-family: 'Roboto', sans-serif;
	}

:root .grid > * > * {
	font-size:1rem;
	}
p{
	line-height: 1.5 ;
	text-align:justify;
	}
td{line-height:1.2;
}
.print{
	display:none;
	}	

.nettoyeur{
clear:both;
}

A{
cursor:pointer;
transition: all 0.5s ease-out;	
}

header{
position:absolute;
width:100%;
height:150px;
z-index:100;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}
.logo{
width:250px;


}
.baseline{
position: absolute;
top: 46px;
margin: 0;
left: 310px;
font-family: 'Anton', sans-serif;
color: #005095;
font-size: 34px;
}



#btmenu{
position:absolute;
top:0;
right:0;
width:80px;
height:80px;
background:#005095;
border-bottom: 18px solid #C0C0C0;
color:white;
font-size:20px;
padding: 20px 0 0 10px;
font-weight:bold;
transition: all 0.5s ease-out;	
font-family: 'Anton', sans-serif;

}
#btmenu:hover{
border-bottom:18px solid #f7a600;;
}
.btfb{
position: absolute;
right: 79px;
top: -2px;
}
.bttw{
position: absolute;
right: 170px;
top: -2px;
}
#menu{
display:none;
position:absolute;
top:0;
right:0px;
width:300px;
height:800px;
background:#005095;
transition: all 0.5s ease-out;	

}
#menu A{
display:block;
border-left:10px solid #005095;
border-bottom:1px solid #F0F0F0;
font-size:20px;
padding:20px 15px;
color:white;
transition: all 0.5s ease-out;	
font-family: 'Anton', sans-serif;
text-decoration:none;
}
#menu A:hover{
border-left:10px solid #f7a600;
color:#f7a600;
}
#btfermemenu{
float:right;
}
.rubrique{
position:relative;
left:100%;
top:0;
width:100%;
padding-top:180px;
}
.contenu{
position:relative;
padding: 0 0 150px 5%;
width:100%;
height:100%;
overflow:auto;
color:white;
text-align:left;
}
.centrer{
max-width:1200px;
width:100%;
margin:0 auto;
}
.noir{
background:url(/images/fondnoirISDS.png);
padding:20px;
min-height:260px;
}

.papierpeint{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
max-width: none;

}

H1{
position:relative;
font-family: 'Work Sans', cursive;
left: -85px;
color: white;
font-size: 60px;
font-weight:normal;
width:120%;
}
H1 span{
font-family: 'Anton', cursive;
font-size: 45px;
}
A, A.spip, A.spip_out{
color:#F0F0F0;
}

A:hover, A.spip:hover, A.spip_out:hover{
color:white;
}

.widget{
position: relative;
width: 100%;
height:100%;
overflow:hidden;
}
.widgetoffset{
position: relative;
left: -668px;
top: -156px;
width: 1080px;
}

.logo_partenaire{
display: inline-block;
position:relative;
margin:5px;
background:white;
height:120px;
width:120px;
padding:10px;
text-align: center;
}
.tweet{
display:block;
background:white;
padding:10px;
font-size:1.3rem;
margin:10px;
color:gray;
}
p.auteur{
color:#00aced;
font-size:bold;
}

@media screen and (max-width: 1000px) {
H1{
left: -55px;
}
}
@media screen and (max-width: 800px) {
H1{
left: -35px;
}
.baseline{
top: 60px;
left: 266px;
font-size: 28px;
}
}
@media screen and (max-width: 600px) {
.contenu{
padding: 0 0 150px 0;
}
.logo {
    width: 160px;
}
H1{
left: 0;
font-size: 40px;
}
H1 span{
left: 0;
font-size: 30px;
}
#btmenu{
position: absolute;
top: 0;
right: 0;
width: 53px;
height: 43px;
background: #005095;
border-bottom: 10px solid #C0C0C0;
color: white;
font-size: 16px;
padding: 7px 0 0 7px;
font-weight: bold;
transition: all 0.5s ease-out;
font-family: arial;
}
.btfb{
position: absolute;
width: 54px;
right: 53px;
top: -2px;
}
.bttw{
width: 53px;
position: absolute;
right: 106px;
top: -2px;
}
.baseline{
top: 110px;
left: 0px;
width: 100%;
text-align:center;
font-size: 20px;
}
.rubrique{
padding: 185px 0 0 0;}
}