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

/* TYPO
-------------------------------------------------- */
@font-face {
    font-family: 'mondara_sansregular';
    src: url('../fonts/mondarasans-regular-webfont.eot');
    src: url('../fonts/mondarasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mondarasans-regular-webfont.woff2') format('woff2'),
         url('../fonts/mondarasans-regular-webfont.woff') format('woff'),
         url('../fonts/mondarasans-regular-webfont.ttf') format('truetype'),
         url('../fonts/mondarasans-regular-webfont.svg#mondara_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mondara_sansbold';
    src: url('../fonts/mondarasans-bold-webfont.eot');
    src: url('../fonts/mondarasans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mondarasans-bold-webfont.woff2') format('woff2'),
         url('../fonts/mondarasans-bold-webfont.woff') format('woff'),
         url('../fonts/mondarasans-bold-webfont.ttf') format('truetype'),
         url('../fonts/mondarasans-bold-webfont.svg#mondara_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {position: relative;}



/* STRUCTURE / STYLES
-------------------------------------------------- */
html, body {height: 100%;}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {margin: 0; padding: 0; font-family: 'mondara_sansregular'; font-size: 18px; background-color: #4A666C;}
* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*:before,
*:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.clearfix:before, 
.clearfix:after, 
.container:before, 
.container:after {content: " "; display: table;}
.clearfix:after, 
.container:after {clear: both;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {display: block;}
audio,
canvas,
progress,
video {display: inline-block; vertical-align: baseline;}

h1, h2, h3, h4 {font-weight: normal;}
a {text-decoration: none; outline: none;}
li {list-style: none;}
input {outline: none;}
.container {position: relative; margin: 0 auto;}




/* HEADER / NAV / SUBNAV
-------------------------------------------------- */
header {position: fixed; width: 100%; height: 65px; background: #fff; border-bottom: 5px solid #ccc; color: #b8b8b8; text-align: center; z-index: 9900;}
header a {display: block; height: 65px; color: #b8b8b8;}
header .logo,
header .search {display: block; height: 65px; border-bottom: 5px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}
header .logo {float: left; width: 75px; line-height: 65px;}
header .logo img {vertical-align: middle; filter: alpha(opacity=50); opacity: 0.5;}
header .search {float: right; width: 75px;}
header .search #bt-search {width: 75px; background: url(../images/common/icon_search_off.png) no-repeat center 5px; line-height: 0.8; padding: 35px 5px 0 5px; font-size: 16px;}
header .search #bt-search:hover {background: url(../images/common/icon_search_on.png) no-repeat center 5px;}
header #bloc-search {visibility: hidden; opacity: 0; position: absolute; top: 65px; left: 0; right: 0; z-index: 9000; height: 80px; padding-top: 20px; background: #16414A;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
transition: all 200ms ease-in;}
header #bloc-search input[type="text"] {width: 250px; height: 40px; padding: 0 70px 0 30px; border: none; background: #adc8ce url(../images/common/icon_search.png) no-repeat 96% center; border-radius: 25px; color: #327684; font-family: 'mondara_sansbold'; font-size: 30px; line-height: 45px; text-transform: uppercase; text-align: center;
-webkit-transition: width 600ms ease-in;
-moz-transition: width 600ms ease-in;
-o-transition: width 600ms ease-in;
-ms-transition: width 600ms ease-in;
transition: width 600ms ease-in;}
header #bloc-search input[type="text"]:focus {width: 280px;}
header #bloc-search ::-webkit-input-placeholder {color: #60939e;}
header #bloc-search ::-moz-placeholder {color: #60939e;}
header #bloc-search ::-moz-placeholder {color: #60939e;}
header #bloc-search ::-ms-input-placeholder {color: #60939e;}
header .search:hover #bloc-search {visibility: visible; filter: alpha(opacity=100); opacity: 1;}

/* Nav */
header .bt-menu {display: none; border: none; outline: none; background: transparent; font-family: 'mondara_sansbold'; font-size: 40px; text-transform: uppercase; color: #b8b8b8; height: 65px; line-height: 65px; cursor: pointer;}
header .bt-menu .icon-cross,
header .bt-menu.active .txt {display: none;}
header .bt-menu .txt,
header .bt-menu.active .icon-cross {display: block;}

header .collapse {background: #fff; overflow: visible; height: auto;}

header .nav {float: left; width: 50%; font-family: 'mondara_sansbold'; font-size: 40px;}
header .nav small {font-family: 'mondara_sansregular'; font-size: 20px; display: block; line-height: 0; position: relative; top: -3px;}
header .nav a {padding-top: 5px; border-bottom: 5px solid transparent;}
header .navleft {border-right: 1px solid #ccc;}
header .navleft a:hover {color: #008696; border-bottom: 5px solid #008696;}
header .navright a:hover {color: #085a75; border-bottom: 5px solid #085a75;}
header .nav a:hover small {color: #b8b8b8;}

/* Subnav */
header .subnav {visibility: hidden; position: absolute; top: 65px; left: 15px; padding-right: 30px; width: 100%; filter: alpha(opacity=0); opacity: 0;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
transition: all 200ms ease-in;
z-index:9990;}
header .subnav li {float: left; text-transform: uppercase;z-index:9991;}
header .subnav li a {color: #fff; display: block; font-size: 22px; height: 50px; line-height: 50px;z-index:9992;}
header .subnav li a:hover {border: none;}
/* Subnav Maroc 
header .navleft:hover .navmaroc {visibility: visible; filter: alpha(opacity=100); opacity: 1;}*/
header .navmaroc li {width: 33%; border-right: 1px solid #1a92a1;}
header .navmaroc li+li+li {width: 34%; border-right: none;}
header .navmaroc li a {background: #008696;}
header .navmaroc li a:hover {color: #008696; background: #66b7c0;}
/* Subnav Paris 
header .navright:hover .navparis {visibility: visible; filter: alpha(opacity=100); opacity: 1; }*/
header .navparis li:first-child {width: 100%; border-bottom: 1px solid #216b83;}
header .navparis li+li, header .navparis li+li+li+li+li {width: 33%; border-right: 1px solid #216b83; border-bottom: 1px solid #216b83;}
header .navparis li+li+li+li, header .navparis li+li+li+li+li+li+li {width: 34%; border-right: none;}
header .navparis li+li+li+li+li {border-bottom: none;}
header .navparis li a {background: #085a75;}
header .navparis li a:hover {color: #085a75; background: #6ba2b4;}
/* Subnav collapse active */
header .active .nav {font-size: 32px;}
header .active .nav small {top: 0;}
header .active .nav a {height: 55px;}
header .active .subnav {top: 120px; left: 0; padding-right: 0;}
header .active .subnav li {float: none; width: 100%; height: auto; line-height: auto; font-size: 20px; border-right: none; border-bottom: 1px solid #60b5c1;}
header .active .subnav a {height: auto; line-height: normal; padding: 15px 0; border-bottom: none;}
header .active .subnav a:hover {border-bottom: none;}


/* MAIN
-------------------------------------------------- */
#main {position: absolute; width: 100%; height: 100%; padding-top: 65px;}

/* Titres */
#main hgroup {text-align: center; color: #fff; text-transform: uppercase; padding: 15px 0;}
#main hgroup h1 {font-family: 'mondara_sansbold'; font-size: 35px; line-height: 0.9; margin: 0 30px;}
#main hgroup h1 small {font-family: 'mondara_sansregular'; display: block; font-size: 20px;}
#main hgroup h2 {font-family: 'mondara_sansregular'; font-size: 40px; line-height: 0.8; margin-bottom: 40px;}

/* Liste Artistes / Recherche */
.liste {width: 100%; border-top: 1px solid #bde2ea; background-color: #2b697e; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover;}
.liste.bg a {background-color: rgba(50,118,132,0.8);}
.liste li {float: none; width: 100%; border-right: none; border-bottom: 1px solid #bde2ea; text-align: center; text-transform: uppercase;}
.liste li a {display: block; height: 60px; line-height: 60px; font-size: 30px; color: #bde2ea; background-color: transparent; z-index: 9000;}
.liste li a:hover {color: #327684; background-color: #fff;}
/* background portraits */
.mehadji {background-image: url(../images/maroc/portrait_mehadji.jpg);}
.zouzaf {background-image: url(../images/maroc/portrait_zouzaf.jpg);}


/* LIGHT GALLERY
-------------------------------------------------- */
#lightGallery-Gallery {margin: auto;}






/* RESPONSIVE ADJUSTMENTS
-------------------------------------------------- */

/* SPECIFIQUE VERSION MOBILE */
@media (max-width: 768px) {
  header .bt-menu {display: inline-block;}
	header .collapse {display: none; overflow: hidden; height: 0;}
	header .navright:hover .navparis {overflow: scroll;height: 100%;}
}

@media (max-width: 768px) and (max-height: 320px) {
	header .active .subnav li {float: left; width: 50%; border-right: 1px solid #60b5c1;}
	header .active .subnav a {padding: 10px 0;}
}
/* END SPECIFIQUE VERSION MOBILE */


@media (min-width: 768px) {
	.mobile {display: none;}
	.container {width: 750px; padding: 0 15px;}
	header .logo {left: 15px;}
	header #bloc-search {left: 15px; right: 15px;}
	header #bloc-search input[type="text"] {width: 300px;}
	header #bloc-search input[type="text"]:focus {width: 500px;}
	header .nav {width: 285px; font-size: 40px;}
	#main hgroup {padding: 30px 0 15px 0;}
}
@media (min-width: 992px) {
  .container {width: 970px;}
	header {height: 75px;}
	header a {height: 75px;}
	header .logo,
	header .search {height: 75px;}
	header .logo {line-height: 75px;}
	header .search #bt-search {background: url(../images/common/icon_search_off.png) no-repeat center 10px; padding: 38px 5px 0 5px; font-size: 18px;}
	header .search #bt-search:hover {background: url(../images/common/icon_search_on.png) no-repeat center 10px;}
	header #bloc-search {top: 75px; height: 100px; padding-top: 25px;}
	header #bloc-search input[type="text"] {width: 440px; height: 45px; line-height: 50px; font-size: 40px;}
	header #bloc-search input[type="text"]:focus {width: 650px;}
	header .nav {width: 395px; font-size: 50px;}
	header .subnav {top: 75px;}
	header .subnav li a {font-size: 25px;}
	#main {padding-top: 75px;}
	#main hgroup {padding: 30px 0 25px 0;}
	#main hgroup h1 {font-size: 50px;}
	#main hgroup h1 small {font-size: 30px;}
	.liste li a {height: 75px; line-height: 75px; font-size: 40px;}
	#lightGallery-Gallery {width: 970px !important;}
}
@media (min-width: 1200px) {
  .container {width: 1170px;}
	header .nav {width: 495px;}
	header .subnav li a {font-size: 30px; height: 60px; line-height: 60px;}
	header #bloc-search {width: 1140px;}
	#lightGallery-Gallery {width: 1170px !important;}
}