/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);

@font-face { 
  font-family: 'Futura Std Book';
  src: url('../fonts/FuturaStd-Book.eot'); /* IE9 Compat Modes */
  src: url('../fonts/FuturaStd-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/FuturaStd-Book.woff') format('woff'), /* Modern Browsers */
       url('../fonts/FuturaStd-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/FuturaStd-Book.svg#db02aa682b3e193ac55da3558b4b0d6e') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Futura Std Medium';
  src: url('../fonts/FuturaStd-Heavy.eot'); /* IE9 Compat Modes */
  src: url('../fonts/FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/FuturaStd-Heavy.woff') format('woff'), /* Modern Browsers */
       url('../fonts/FuturaStd-Heavy.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/FuturaStd-Heavy.svg#f957ac4f7c9e44228c64976e40b8d5f5') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Futura Std Light';
  src: url('../fonts/FuturaStd-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/FuturaStd-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/FuturaStd-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/FuturaStd-Light.svg#d83a536671d160add994a83c5144bd9a') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}


body { background-color:#ebebeb; color:#4a5f67; font-size:14px; font-family: 'Futura Std Book', 'Open Sans', helvetica, sans-serif; font-weight:400; line-height:1em; height:100%;}

html { overflow-y: scroll; overflow-x: hidden; min-height:100%; position:relative; }

a { color:#4a5f67; text-decoration:none; }

ul { list-style:none; margin:0; padding:0;}

h1, h2, h3, h4, h5 { margin:0; padding:0; line-height:normal; }

.clear { clear:both;}

.introduction { width:50%; margin:50px 0 50px 25%; text-align:center; text-transform:uppercase; position:relative; font-family: 'Futura Std Light','Open Sans',helvetica, sans-serif; font-weight:200;}

.information { width:100%; left:0; top:0; bottom:0; right:0; display:none; background-color:#f2f2f2; position:absolute; z-index:5;}

.information #croix_fermer_info { width:40px; height:40px; position:absolute; top: 40px; right:40px; cursor:pointer; fill:#999999;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.information #croix_fermer_info:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);	}

.container-info { width:70%; left:15%; top:150px; position:relative;}
.bloc-info { width:49%; float:left; text-align:center; }

/* ----- Menu 1er niveau ----- */
	
.menu-niveau-un { width:100%; height:auto; margin:0; float:left;}

.menu-niveau-un ul { width:80%; left:10%; position:relative;}

.menu-niveau-un li { width:20%; height:auto; float:left; margin:0 0 0 0%; text-align:center;}

.menu-niveau-un .titre-categorie { width:100%; height:60px; font-family: 'Futura Std Medium', 'Open Sans', helvetica, sans-serif; padding:0; text-transform:uppercase; }

.menu-niveau-un .current-niv-un a { padding-bottom:10px; border-bottom:3px solid #1b6f8f; }
.menu-niveau-un a { padding-bottom:10px !important; border-bottom:0px solid #1b6f8f;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.menu-niveau-un a:hover { padding-bottom:10px; border-bottom:3px solid #1b6f8f; }

/* ----- Menu 2ème niveau ----- */

.menu-niveau-deux { width:90%; position:relative; height:auto; margin:70px 0 100px 7.5%; float:left; }

.niveauDeux { width:22%; height:auto; float:left; position:relative;  margin:0 2% 20px 0; display:block; background-color:#fff; 
-webkit-transition: background 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); -moz-transition: background 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); -ms-transition: background 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); -o-transition: background 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955); transition: background 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.niveauDeux:hover { background-color:#f2f2f2; }

.liste-niveauDeux { width:100%; position:relative; z-index:2; cursor: pointer;}
.thumbnail-clip { float:left; position:relative; z-index:4;}
.thumbnail-clip img { width:100%; }
.lien-over { background-color:rgba(198,198,198,0.7); position:absolute; top:0; left:0; right:0; bottom:0; z-index:5; font-size:20px; opacity:0; color:#FFF;
display: flex; display: -webkit-box;  display: -ms-flexbox; display: -webkit-flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}

.lien-over:hover { opacity:1;}

/* ----- Contenu 3ème niveau ----- */

.template-content { width:100%; left:0; top:0; bottom:0; right:0; display:none; background-color:#f2f2f2; position:absolute; z-index:5;}

.container-multimedia { margin-top:140px; text-align:center;}
.content-image img { width:800px; height:450px;}

.content-video { width:800px; margin:0 auto; display:none; position:relative; top:0;}

.content-text { position:absolute; top:90px; left:50%; margin-left:-400px; color:#646464; font-family: 'Futura Std Light', 'Open Sans', helvetica, sans-serif; font-weight:300; text-align:left; font-size:15px; line-height:18px; text-align:center;}
.content-text a { color:#18566e;}
.content-text a:hover { color:#aaa}

.content-text .text-left, .content-text .text-right { float:left; width:100%;}
.content-text .text-right { margin-left:5%;}

.content-text tr { width:33%;}
.content-text h2 { font-size:34px; font-family: 'Futura Std Book', 'Open Sans', helvetica, sans-serif; font-weight:bold; }
.content-text h3 { font-size:30px; }
.content-text h4 { font-size:20px; float:left;}
.content-text .selection { font-style:italic; font-size:20px; color:#567c8d;}
.content-text h5 { font-size:16px; font-weight:bold; float:left; margin-left:15px; margin-top:3px; color:#B8B8B8;}
.content-text img { width:100%;}

.thumb-text-list { width:100%; margin-bottom:25px;}
.thumb-list { width:25%; display:inline-block;}
.thumb-list img { width:100%; vertical-align:bottom;}
.text-list { width:71%; margin-left:3%; display:inline-block;}

.navigation { position:absolute; top:10px; left:50%; margin-left:300px;}

#croix_fermer { width:30px; height:30px; position:absolute; top: 75px; left:35px; cursor:pointer; fill:#999999;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
#croix_fermer:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);	}

#fleche_gauche, #fleche_droite { width:20px; height:30px; fill:#999999; position:absolute; top:75px; cursor:pointer;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#fleche_gauche:hover, #fleche_droite:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
#fleche_gauche { left:0;}
#fleche_droite { left:80px;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1100px)
{
	
	.menu-niveau-un ul { width:96%; left:2%;}
	.menu-niveau-deux { width:96%; margin-left:4%;}
	.niveauDeux { width:31%;}
	.navigation { float:none; margin-right:0;}
}

@media only screen and (max-width: 800px)
{
	.introduction { width:80%; margin-left:10%; margin-bottom:20px;}
	.menu-niveau-un li { width: 100%; float: none; margin: 30px 0; }
	.menu-niveau-un .titre-categorie { font-size:18px;}
	.menu-niveau-deux { margin-left:2%; margin-top:20px;}
	.niveauDeux { width:47.5%;}
	
	.navigation { position:relative; left:auto; margin-left:0; float:right; margin-right:110px}
	
	.content-text { left:5px; margin-left:0;}
	
	.content-video img { width:100%; height:auto;}
}

@media only screen and (max-width: 550px)
{
	.introduction { width:90%; margin-left:5%; }
	.niveauDeux { width:100%;}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select, textarea { color: #222; }

body { font-size: 1em; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

img { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }

.ir:before { content: ""; display: block; width: 0; height: 150%; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px;  margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

/* ==========================================================================
   Print styles
   ========================================================================== */

@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;
    }
}