@charset "UTF-8";

/* ==========================================================================
   Memo:
   

      
   ========================================================================== */

/* CLEARFIX  http://nicolasgallagher.com/micro-clearfix-hack/ */
 
/* For modern browsers */
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}



/* BASE ===================================================================== */


html{font-size: 62.5%;}

body {
	font-size: 14px; /* IE8- */
	font-size: 1.4rem;
	font-family: Arial, sans-serif;
	background-color: #ccc;
	letter-spacing: 1px;
}
::-moz-selection { background: #000; color: #fff;}
::selection { background: #000; color: #fff;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}

	 
a {text-decoration: none; color: #000;}
a:link { }
a:visited {}
a:hover {}
a, a:focus, :focus {}

img {vertical-align: middle;} /*Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */

h1 {font-size:32px; font-size:3.2rem}
h2 {font-size:1.6rem}
h3 {font-size:1.4rem}
h4 {font-size:1rem; font-weight: bold; margin-bottom: 5px;}
h1,h2,h3 {margin:0.5rem 0;}

h1,h2,h3,h4,h5,h6 {font-family: 'Dosis', sans-serif; font-weight: normal; color: #005A8A;}


abbr,acronym { border-bottom:1px dotted #000; cursor:help;} 
em {font-style: italic;}
strong { font-weight: bold;}
blockquote,ul,ol,dl {}
ol,ul,dl {}
ol li {list-style: decimal inside;}
ul li {list-style: disc inside;}

dl dd {margin-left:1em;}
th,td {border:0; padding:.5em;}
th {font-weight:bold; text-align:center;}
caption { margin-bottom:.5em; text-align:center;}
p,fieldset,table {margin-bottom:1em;}
textarea { resize: vertical;}/* Allow only vertical resizing of textareas.*/
hr {
	height: 1px;
  margin: 20px 0;
  padding: 0;
  color: #F00;
  background-color: #e8e8e8;
  border: 0;
  clear: both;
}

.floatLeft{float:left}
.floatRight{float:right}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.posBottom {position: absolute; bottom: 0;}
.posRight {position: absolute; right: 0;}
.underline {text-decoration: underline;}

input { -webkit-appearance: none; border-radius: 0;}
#info { position: fixed; left: 20px; top:27px; z-index: 1000; cursor: pointer; }

#login, #logout{ background:#efefef; color: #333; padding: 30px; z-index: 200;  -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);

-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;

position: fixed;
  top: 10px;
  left: 90px;
  width: 250px;
  height: 180px;
  text-align: left;
  display: none;
}
#close{position: absolute; right: 10px; top: 10px;cursor: pointer;}
#login a{text-decoration: underline;} #login a:hover{text-decoration: none;}

#logout{ height: 50px; width: 150px;}

.bubble 
{
position: relative;
width: 250px;
height: 150px;
padding: 0px;
background: #efefef;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #807F7F solid 6px;
}
#logout.bubble{border:6px solid #308509; }
.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 11px 26px 11px 0;
border-color: transparent #efefef;
display: block;
width: 0;
z-index: 1;
left: -26px;
top: 18px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 16px 31px 16px 0;
border-color: transparent #807F7F;
display: block;
width: 0;
z-index: 0;
left: -37px;
top: 13px;
}
#logout.bubble:before {border-color: transparent #308509; }

.feedback{color: #fff; margin-top: 10px; background-color: #f00; display: inline-block; padding: 5px;}
input[type=password]{ display: inline-block; font-size: 1.2rem; font-size: 12px; width: 100px;padding: 5px;}


input[type=submit]{ font-size: 1.2rem; font-size: 12px; font-weight: normal;
 text-transform: uppercase; font-family: verdana, sans-serif; border: 0;
color: #fff;  padding: 6px 15px;background: #ff6600; vertical-align: bottom;
  background-image: -webkit-linear-gradient(top, #ff9700, #ff6b00);
  background-image: -moz-linear-gradient(top, #ff9700, #ff6b00);
  background-image: -ms-linear-gradient(top, #ff9700, #ff6b00);
  background-image: -o-linear-gradient(top, #ff9700, #ff6b00);
  background-image: linear-gradient(to bottom, #ff9700, #ff6b00);
  text-decoration: none;
  display: inline-block; }
  input[type=submit]:hover{color: #fff;
  	background: #ff9700;
  	  background-image: -webkit-linear-gradient(top, #ff6600, #ff9700);
  	  background-image: -moz-linear-gradient(top, #ff6600, #ff9700);
  	  background-image: -ms-linear-gradient(top, #ff6600, #ff9700);
  	  background-image: -o-linear-gradient(top, #ff6600, #ff9700);
  	  background-image: linear-gradient(to bottom, #ff6600, #ff9700);
  	  text-decoration: none;
  }
label{ text-transform: uppercase; }

/* SLIDES ===================================================================== */
#section1{ background-color: #fff200; text-align: center;
}
#section1 .container{position: relative; margin: 0 auto; width: 100%; max-width: 412px;}
#section1 header { position: absolute; top: 50px; left: 50%; width: 250px; text-align: left;
}
#section1 img {width: 100%; }
#section1 h2 {opacity: 0;}
#section2{ background-color: #29aae2; }
#section2 .container{width:180px; margin:0 auto;}
#section2 figure {display: block; width: 180px; height: 171px;vertical-align: top; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; margin: 50px 0;
box-sizing: border-box; position: relative;
}
#section2 figcaption{color: #fff; text-align: center; margin-top: 5px;}
#section2 .vide{position: relative;}
#section2 .vide figcaption{position: absolute; bottom: -24px; width: 174px; text-align: center; color: #ccc;}
#section2 figure{position: relative;}
#section2 figure h3{ color: #ccc; text-align: center; font-size: 16px; font-size: 1.6rem; padding: 30px 10px 10px 10px;}
#section2 figure h2{ color: #fff200;text-transform: uppercase; font-size: 25px; font-weight: bold; text-align: center; letter-spacing: 0px; margin-top: 65px;
}
#section2 figure.vide{ border: 3px dashed #ccc;}
#section2 figure img {width: 180px; vertical-align: top;} 
#section2 .playBtn {position: absolute; top: 65px; left: 65px; width: 50px; display: none;
}
#section3{ background-color: #f49ec4; color: #000; }
#section3 .container{width:80%; margin:0 auto;}
#section3 h1{color: #fff;
}
#section3 h2{display: inline-block;color: #eee; font-weight: bold;
}
#section3 ul{}
#section3 li{font-size: 12px; font-size:1.2rem; list-style: none; margin-bottom: 10px;
}
#section3 footer{padding-top: 30px; clear: both;}
#section3 footer a{border-bottom: 1px dotted #fff;}
#section3 footer a:hover, #section3 footer a:active{border-bottom: 0;}
/* Menus ===================================================================== */
.bouton a {
	display:inline-block;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px; 
            border-radius: 10px; 
    padding: 2px 10px;
    font-weight: bold;
    font-size: 24px;
}
.bouton a:hover{color: #fff; background: rgba(0,0,0, 1);}
.haut{position: absolute; top: 20px; right: 10px;
}
.bas{position: absolute; bottom: 20px; right: 10px;
}
.milieu{position: absolute; bottom: 50%; right: 10px;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media screen and ( max-width: 479px ) {
	/* are previous styles*/
}


/* iPads (portrait) ----------- */
@media screen and (min-width : 768px) and (orientation : portrait) {
#section2 .container {width: 800px; }
#section2 figure {display: inline-block; margin: 40px }
#section3 .container{width:500px;}

}

/* iPads (landscape) ----------- */
@media screen and (min-width : 768px) and (orientation : landscape) {
#section2 .container {width: 900px; }
#section2 figure {display: inline-block;margin: 10px 20px 30px 20px}
#section3 .container {width: 900px; }
#section3 ul{float: left; width: 420px; margin-right: 30px; }
}


/* a partir de 1024px */
@media screen and (min-width : 1024px) {
#section2 .container {width: 1020px; }
#section2 figure {display: inline-block;margin: 32px }

#section3 .container {width: 900px; }
#section3 h1 {
	margin: 20px 0;
}
#section3 ul{float: left; width: 420px; margin-right: 30px; }


}


@media screen and (-webkit-min-device-pixel-ratio: 1.5),
       screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}