/* POLICES */
@font-face{
font-family: 'osaka';
src: url('http://www.japandco.com/contenu/polices/osaka-webfont.eot');
src: url('http://www.japandco.com/contenu/polices/osaka-webfont.eot#iefix') format('embedded-opentype'),
url('contenu/polices/osaka-webfont.woff') format('woff2'),
url('contenu/polices/osaka-webfont.woff') format('woff'),
url('http://www.japandco.com/contenu/polices/osaka-webfont.ttf') format('truetype'),
url('http://www.japandco.com/contenu/polices/osaka-webfont.svg#osaka-sans_serifregular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face{
font-family: 'hurryup';
src: url('http://www.japandco.com/contenu/polices/hurryup-webfont.eot');
src: url('http://www.japandco.com/contenu/polices/hurryup-webfont.eot#iefix') format('embedded-opentype'),
url('contenu/polices/hurryup-webfont.woff') format('woff2'),
url('contenu/polices/hurryup-webfont.woff') format('woff'),
url('http://www.japandco.com/contenu/polices/hurryup-webfont.ttf') format('truetype'),
url('http://www.japandco.com/contenu/polices/hurryup-webfont.svg#hurry_upregular') format('svg');
font-weight: normal;
font-style: normal;
}

/* RESET */
*{
margin: 0;
padding: 0;
}

header, footer, section, aside, nav, article, div{
display: block;
}

/* HX */
h1{
font-family: osaka;
font-size: 30px;
margin-top: -5px;
text-shadow: 2px 2px 0px rgb(255, 0, 0);
}

h2{
font-family: hurryup;
font-size: 24px;
padding-bottom: 12px;
}

h3{
font-size: 18px;
padding-bottom: 9px;
}

p{
padding-bottom: 20px;
}

/* BODY */
body{
background: url("contenu/images/background.jpg") fixed;
background-position:center center;
background-size: 100% 100%;
font: 14px/20px Arial, sans-serif;
}

/* HEADER */
header{
z-index: 999;
width: 100%;
clear: both;
background: rgba(34, 34, 34, 0.9);
text-align: center;
}

header p{
font-size: 18px;
color: rgb(238, 238, 238);
font-weight: bold;
}

#jap{
font-family:'hurryup';
font-size: 80px;
color: red;
text-shadow: 3px 3px 3px rgb(255, 255, 255);
}

#and_co{
font-family:'hurryup';
font-size: 50px;
color: white;
text-shadow: 3px 3px 3px rgb(255, 255, 255);
}

/* NAV */
nav{
z-index:1000;
width:100%;
border-bottom: 5px red solid;
}

#menu{
padding:0;
margin:0;
list-style:none;
text-align:center;
}

#menu a{
text-decoration:none;
display:block;
color:rgb(238, 238, 238);
font-family: arial;
}

/* MENU LI */
#menu li{
min-width:100px;
display:inline-block;
position:relative;
border-radius:5px 5px 0 0;
}

#menu li a{
display: block;
margin: 0 5px 0 5px;
padding: 5px 5px 5px 5px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgb(238, 238, 238);
}

#menu li:hover{
z-index:1000;
background:rgba(255, 0, 0, 0.8);
}

#menu li:hover a{
color:rgb(238, 238, 238);
}

#menu li:hover li a{
color:rgb(238, 238, 238);
text-transform:inherit;
}

#menu li:hover ul{
max-height:20em;
}

#menu li.selected{
background-color: rgb(255, 0, 0);
border-radius: 5px 5px 0 0;
}

#menu li.selected a{
color: rgb(34, 34, 34);
}

/* MENU LI LI*/
#menu li li{
background: rgba(34, 34, 34, 0.9);
}

#menu li li:hover{
background:rgba(255, 0, 0, 0.8);
}

#menu li li:hover a{
color:rgb(238, 238, 238);
}

/* MENU UL */
#menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
transition: .8s all .1s;
}

#menu ul li{
display:inherit;
border-radius:0;
}

#menu ul li:hover{
border-radius:0;
}

#menu ul li:last-child{
border-radius:0 0 5px 5px;
}

/* WRAPPER */
#main_wrapper{
margin: auto;
width: 1000px;
}

/* SECTION */
section{
float: left;
width: 620px;
margin:10px 20px 10px 0;
text-align: justify;
padding: 10px;
background: rgba(242, 242, 242, 0.95);
/* box-shadow: 0 0 5px; */
}

section a{
font-weight: bold;
color: rgb(128, 128, 255);
text-decoration: none;
}

section a:hover{
color: rgba(128, 128, 255, 0.7);
}

section li{
margin-left: 20px;
}

section iframe{
border-style: none;
}

section .fb-page{
margin-left: 60px;
}

section .fb-like{
height: 20px;
width: 61px;
float: right;
margin-top: -20px;
}


/* ARTICLE */
article{
text-align: justify;
padding: 5px;
background: rgba(255, 255, 255, 0.9);
}

/* ASIDE */
aside{
float: right;
width: 320px;
margin: 10px 0 0 0;
}

aside div{
margin: 0 0 20px 0;
text-align: center;
/* box-shadow: 0 0 5px; */
}

aside a{
font-weight: bold;
color: rgb(128, 128, 255);
text-decoration: none;
}

#facebook{height: 518px; background-image: url(contenu/images/bg_facebook.png);}
#twitter{height: 250px; background-image: url(contenu/images/bg_twitter.png);}

/* IMAGES PARTENAIRES */
.partenaire{
display: inline-block;
position: relative;
width: 185px;
height: 125px;
margin: 0 0 10px 10px;
/* background: rgba(128, 128, 128, 0.9); */
}

.partenaire img{
position: absolute;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

div.partenaire{
border-radius: 0px;
box-shadow: none;
}

/* IMAGES INVITES */
.invite{
display: inline-block;
position: relative;
float: right;
width: 250px;
height: 350px;
margin:0 0 0 10px;
background-image: url(http://www.japandco.com/invites/cadre.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

.invite img{
position: absolute;
width: auto;
max-width: 60%;
height: auto;
max-height: 60%;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

/* IMAGES EXPOSANTS */
.logo_exposant{
display: inline-block;
position: relative;
float: left;
width: 150px;
height: 150px;
margin: 0px 10px 0px 10px;
border: 2px rgb(0, 0, 0) solid;
background: rgb(255, 255, 255);
}

.logo_exposant img{
position: absolute;
width: auto;
max-width: 95%;
height: auto;
max-height: 95%;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:none;
}

/* IMAGES INTERVENANTS */
.logo_intervenant{
display: inline-block;
position: relative;
float: left;
width: 150px;
height: 150px;
margin: 0px 10px 0px 10px;
border: 2px rgb(0, 0, 0) solid;
border-radius: 5px;
background: rgb(255, 255, 255);
}

.logo_intervenant img{
position: absolute;
width: auto;
max-width: 95%;
height: auto;
max-height: 95%;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:none;
}

/* IMAGES GALERIE */
.galerie{
display: inline-block;
position: relative;
float: left;
width: 195px;
height: 145px;
margin: 5px;
background: black;
}

.galerie img{
position: absolute;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:none;
}

/* FOOTER */
footer{
z-index: 997;
bottom: 0;
width: 100%;
clear: both;
background: rgba(34, 34, 34, 0.9);
color: rgb(255, 255, 255);
font-size: 11px;
text-align: left;
box-shadow: 0 0 5px black;
}

/* ALIGNEMENTS */
.alignleft{
float: left;
}

img.alignleft{
margin: 5px 10px 0 0;
}

.alignright{
float: right;
}

img.alignright{
margin: 5px 0 0 10px;
}

.center{
text-align: center;
}

/* SLIDESHOW */
.contener_slideshow{
width:610px;
height:298px;
overflow: hidden;
position: relative;
margin-left: 5px; /* adaptations a retirer si besoin*/
margin-top: -10px;
}

.slid_1, .slid_2, .slid_3{
position: absolute;
width:610px;
height:298px;
}

.slid_1{left: 0;}
.slid_2{left: 610px;}
.slid_3{left: 1220px;}

.contener_slide{
width: 1220px;
height: 298px;
left:0px;
position: absolute;
animation-duration: 20s;
animation-iteration-count:infinite;
animation-name: anim_slide;
}

@keyframes anim_slide{
0%,8%{left:0px;}
33%,41%{left:-610px;}
66%,74%{left:-1220px;}
}

/* SMARTPHONE FRIENDLY */
@media screen and (max-width: 660px){
body {background-image:none;font-size:25px;}
h1, h2, h3 {font-size:25px;}
#menu li a {display:block;font-size:25px;margin:5px}
#menu li {float:none;width:100%;}
#menu li ul{display:none;}
#menu li.selected, #menu li:hover {border-radius: 0;}
aside{display:none;}
#main_wrapper, #menu {clear:both;width:100%;}
section {clear:both;width:95%;}
iframe, object {width:100%;}
}

/*
Remerciements:

http://openclassrooms.com/

pour les polices de caractères libres de droit et leur intégration:
http://www.dafont.com/fr/
http://www.fontsquirrel.com


pour les images libres de droit:
http://pixabay.com/fr/


pour embellir le tout:
http://www.frogweb.fr/menu-deroulant-horizontal/
http://www.wifeo.com/code/31-simple-css-slideshow.html


pour corriger HTML et CSS:
https://html5.validator.nu/
http://jigsaw.w3.org/css-validator/

*/