body {
margin: 0;
padding: 0;
}
img, video {
display: block;
max-width: 100%;
width: auto;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.video_iframe {
position: relative;
width: 98%;
text-align: center;
justify-content: center;
overflow: hidden;
}
header {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
overflow: hidden;
}
#logo {
position: relative;
width: 20%;
padding: 2px;
overflow: hidden;
}
#entete {
position: relative;
width: 59%;
margin-right: 0;
padding-top: 0;
padding-left: 4px;
padding-right: 4px;
overflow: hidden;
}
#club {
position: relative;
width: 19%;
overflow: hidden
}
#message {
position: relative;
margin: 0;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
#fildariane {
position: relative;
width: 99%;
font-size: 90%;
padding-left: 20px;
padding-bottom: 1px;
margin: 0;
margin-right: 4px;
overflow: hidden;
}
.fil {
color: black;
}
.fil2 {
color: black;
background-image: url(ret.png);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 20px;
}
nav {
position: relative;
}
#menusoeurs {
position: relative;
width: 100%;
padding-top: 1px;
padding-bottom: 8px;
background-color: #F4F4F4;
background-image: url(img/bkgscrol1.png), url(img/bkgscrol.png);
background-repeat: no-repeat;
background-position: left bottom, right bottom;
overflow-x: scroll;	
}
#menufilles {
position: relative;
width: 100%;
padding-top: 1px;
padding-bottom: 8px;
background-image: url(img/bkgscrol1.png), url(img/bkgscrol.png);
background-repeat: no-repeat;
background-position: left bottom, right bottom;
overflow-x: scroll;	
}
#menusoeurs table, #menufilles table {
padding-top: 0;
padding-left: 4px;
}
#menusoeurs td, #menufilles td {padding: 2px;}

#contenu {
position: relative;
float: left;
width: 76%;
padding: 0;
border: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
overflow: hidden;
}
article {
position: relative;
margin: 4px;
overflow: hidden;
}
aside {
position: relative;
float: right;
width: 23%;
min-height: 700px;
margin: 0;
padding: 4px;
overflow: hidden;
}
.blocaside {
position: relative;
margin: auto;
margin-top: 8px;
margin-bottom: 8px;
padding: 6px;
}
footer {
position: relative;
width: 100%;
min-height:200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
overflow: hidden;
}
.transpar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(transpar.png);
}
.lienmaj {
position: absolute;
bottom: 0;
width: 99%;
padding: 4px;
padding-left: 10%;
}

span {display: inline;}
p {margin-top:4px;margin-bottom:8px;}
hr {width: 98%}

.entier, .moitie, .troisquart, .quart {
position: relative;
margin-left: 0.5%;
margin-right: 0.5%;
margin-top: 6px;
margin-bottom: 3px;
padding-left: 1.5%;
padding-right: 1.5%;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
overflow: hidden;
}
.entier {width: 94%;}
.moitie {width: 44%;}
.troisquart {width: 71%;}
.quart {width: 20.4%;}
.elemplein {width: 92%;}
.elemmoit {width:46%;}
.elemquart {width: 22%;}
.deuxtiersg {float: left; width:60%; margin-right: 12px;}
.deuxtiersc {width:60%; margin-left: auto; margin-right: auto;}
.deuxtiersd {float: right; width:60%; margin-left: 12px;}

.ctr {text-align: center;}
.drt {text-align: right;}
.gch {text-align: left;}

.alignnorm {display: inline;vertical-align: text-top;}
.alignectr {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
margin-bottom: 4px;
clear: both;
}
.aligneg {
display: block;
margin-left: 2px;
margin-right: auto;
margin-top: 2px;
margin-bottom: 4px;
float: left;
position: relative;
margin: 8px;
}
.aligngvd {
display: block;
margin-left: 2px;
margin-right: auto;
margin-top: 2px;
margin-bottom: 4px;
clear: both;
}
.aligned {
display: block;
float: right;
position: relative;
margin: 8px;
overflow: hidden;
}
.fixcoind {
position: absolute;
top: 2px;
right: 8px;
}

.vismodel1 {
position: relative;
display: block;	
margin-left: 1%;
margin-right: 1%;
overflow: hidden;
}
.basevismodel1 {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
height: 540px;
text-align: center;
overflow: hidden;
margin: auto;
padding-top: 8px;
padding-bottom: 8px;
border: 1px solid black;
border-radius: 8px;
background-color: #DEDEDE;
}
.basevismodel1 img {
display: inline;
max-width: 100%;
width: auto;
max-height: 100%;
height: auto;
-webkit-box-sizing: boder-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
}
.listvismodel1 {
position: relative;
margin: auto;
padding-bottom: 18px;
border: 1px solid black;
border-radius: 8px;	
background-color: #DEDEDE;
overflow-x: scroll;
overflow-y: hidden;
}
.tbllist td {
width: 100px;
height: 80px;
text-align: center;
font-size: 90%;
border-right: 1px solid grey;
overflow: hidden;
}
.leglist {display: block; position: relative; min-width: 100px;}
.tbllist img {
display: inline;
max-width: 100%;
width: auto;
max-height: 80%;
height: auto;
-webkit-box-sizing: boder-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
border-radius: none;
}

#visio_cont {position: relative; width: 100%; margin: 0; margin-top: 4px; padding: 0;}
.visio_cont_base {
position: relative;
width: 100%;
padding: 0;
border: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 240px;
padding: 8px;
border: 0;
overflow: hidden;
}

.visio_cont_menu {position: relative; padding: 2px; height: 38px; overflow-x: scroll;}
.visio_cont_menu a {margin-left: 8px; padding: 1px; white-space: nowrap;}

.visio_doc {
max-height: 300px;
}


h1 {font-size: 160%;text-align: center;margin: 4px;}
h2 {display: block; width: 100%; font-size: 130%;text-align: center;margin: 4px;}
h3 {font-size: 120%;text-align: center;margin: 4px;}
h4 {text-align: left;font-size: 115%;margin: 2px;}
h5 {text-align: center;font-size: 105%;margin: 4px;}
h6 {display: inline; font-size: 105%;margin: 6px;}

nav {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
min-height: 30px;
}
nav a, .lienv {
line-height: 160%;
white-space: nowrap;
padding: 2px;
margin: 4px
}
.menusmart {
display: none;
background: none;
}
.referme {
display: none;
background: none;
}

@media only screen and (max-width: 1000px)
{
body {font-size: 120%;min-width: 200px;}
header {min-width: 200px;}
#logo, #entete, #club {position: relative; float: none; width: 99%;}
#contenu {float: none;width: 100%;}
aside {float: none; width: 99%; margin: auto;}
article {float: none; width:98%;}
.moitie, .troisquart, .quart {width: 99%;}
footer {min-width: 200px;}

.menusmart {
display: block;
background: none;
padding: 4px;
margin-bottom: 20px;
}
.referme {
display: block;
margin-left: 80%;
}
nav {
display: block;
position: fixed;
top: 2px;
left: 0;
z-index: 1;
width: 40px;
height: 40px;
overflow: hidden;
border-right: 2px solid blue;
border-radius: 0 10px 10px 0;
-webkit-transition: height 0.8s ease-in-out;
-moz-transition: height 0.8s ease-in-out;
transition: height 0.8s ease-in-out; 
}
.deplace nav {
width: 180px;
height: 300px;
padding-top: 16px;
}
.deplace nav a, .deplace nav .lienv {
display: block;
width: 94%;
margin-top: 8px;
}
.deplace .menusmart {
display: none;
}


	@media only screen and (max-width: 700px)
	{
		.elemquart {width: 90%; float: none; margin: auto;}
		@media only screen and (max-width: 500px)
		{
			.elemmoit {width: 90%; float: none; margin: auto;}
		}
		.basevismodel1 {height: 400px;}
	}
}