@charset "utf-8";
/* CSS Document */

.main{ border:0px solid #000000; width:1050px; height:auto; margin:auto;border-radius:3px;box-shadow:0px 2px 3px #1c1a19; background: #FFFFFF; margin-top:5px}
.logo{ border:0px solid #FF0000;width:15%; margin-left:10px;}
.date{ border:0px solid #FF0000;;width:75%; margin-left:240px;margin-top:-110px;position:relative; float: inherit; text-transform:uppercase; font-family: "Times New Roman", Times, serif; font-size:15px; letter-spacing:1px; color: #0000CC; font-weight:1000; padding:-10px; text-align:right;}
.header{background-color:#5EB6DD; z-index: 9999;position: relative;-webkit-box-shadow: 1px 0px 2px #000;}
.header2{ border:0px solid  #000000 }
.header2_1{border:0px solid #FF0000;width:6%; margin-left:10px;}
.header2_2{border:0px solid #FF0000;width:8%; margin-left:75px;margin-top:-20px;}
.header3{ border:1px solid #00000}
.nomecole{ border:0px solid #333333; height:75px; width:80%; float:right}
/*menu*/
.menu{border:1px solid  #000000}
#menu ul{ margin:0; padding:0; line-height:30px;}
#menu li{ list-style: none; float:left; position:relative; background-color: #CCCCCC}
#menu ul li a{ color:#000; text-decoration:none; width:148px; height:28px; display:block; text-align:center; border: 1px solid #000 }
#menu ul ul{ position:absolute;top:30px; visibility:hidden}
#menu ul li:hover ul{ visibility:visible}
#menu li:hover { background-color: #FFCC00}
#menu ul li ul a:hover { color:#FFF; background-color: #330066}
#menu ul ul li{top:0px}


.corps{border:0px solid  #000000; height: auto; margin-top:-75px}
 /*corps*/
.majors{border:0px solid #000000;width:50%;height:55px;box-shadow:0px 2px 3px #1c1a19; border-radius:2px; margin-left:300px;  margin-bottom:100px; text-align:center; color: #FF0000 }
/* les element de photo volant*/
.slideshow { width: 1000px; height: 368px; margin: auto }
.slideshow img { padding:1px; border:1px solid  #CCFF99; background-color: #0099FF; }

/* les elements de photo descriptive*/
/* BASIC RESET */

/* HTML ELEMENTS */
h1 { font: bold 35px/30px Helvetica, Arial, Sans-serif; text-align: left; color: #FF0000; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }

/* COMMON CLASSES */
.break { clear:both; }
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/* WRAPPER */
#wrapper { width:850px; margin:-70px auto; margin-left:150px }

/* CONTENT */
#content {margin-top:0px;}
#content img {border:2px solid #777; box-shadow: 3px 3px 5px #777}

/* PROFILES */
.profiles, .info { list-style:none; cursor:pointer; }
.profiles > li { width:150px; height:200px; float:left; margin-right:50px; margin-bottom:15px }
.info, .pic { position:absolute; }
.info { font-family: 'Lato', sans-serif; color:#fff; font-size:18px; padding:5px; background-color: #0033FF; width:180px; height:190px; opacity:0; text-align: justify; }
.info a { font-weight:bold; font-size:25px; color:#fff; text-decoration:none; }
.info a:hover { text-decoration:underline; }
.pic { width:150px; height:200px; }

/* PUSH */
#push .info { transition: all 0.3s; transition-delay:0.2s; }
#push .pic { transition: all 0.5s; }
#push li:hover .info { opacity:1; }
#push li:hover .pic { opacity:0.7; transform: scale(0.7) rotate(10deg); }

/* SLIDE */
#slide .info { transition: all 0.3s; transform: translate(-50px,0); }
#slide .pic { transition: all 0.3s; }
#slide li:hover .info { opacity:1; transform: translate(0,0); }
#slide li:hover .pic { opacity:0; transform: translate(50px,0); }

/* FLIP */
#flip { perspective: 800px; }
#flip .info { transition: all 0.8s; opacity:1; transform-style: preserve-3d; }
#flip .info li { transform: rotateY(180deg); } /* Flip the text: Will be flipped back when animated */
#flip .pic { transition: all 0.8s; backface-visibility: hidden; z-index:999; transform-style: preserve-3d; }
#flip li:hover .info { transform: rotateY(180deg); }
#flip li:hover .pic { transform: rotateY(180deg); }

/* EXPLODE */
#explode .info { transition: all 0.7s; transform: scale(0.8); }
#explode .pic { transition: all 0.7s; }
#explode li:hover .info { opacity:1; transform: scale(1); }
#explode li:hover .pic { opacity:0; transform: scale(1.4); }

.footer{border:0px solid  #000000; background-color:#5EB6DD}