/*
Theme Name: mYSLm Comonnow
Author: Comonnow
Author URI: https://www.comonnow.com
Description:  Musée d’Yves Saint Laurent Marrakech
Version: 2.0
Text Domain: myslm2
*/

html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;    
}

body {
   margin: 0;
   font-family: 'Effra', sans-serif;
   font-weight: 300;
   font-size: 15px;
   line-height: 18px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   background-color: #ffffff;
}

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

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

hr {
   display: block;
   height: 1px;
   border: 0;
   background-color: #e9ebee;
   margin: 15px 0;
   padding: 0;
}

audio,
canvas,
img,
video {
   vertical-align: middle;
}

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

textarea {
   resize: vertical;
}

::-webkit-input-placeholder,
.placerholder{    
   color: #665f60;
}

::-moz-placeholder{    
   color: #665f60;      
}

:-ms-input-placeholder{    
   color: #665f60;
}

input:-webkit-autofill {    
   -webkit-box-shadow: 0 0 0px 1000px #fff inset;  
   -webkit-text-fill-color: #313131 !important;
}

h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
   margin: 0;
   padding: 0;
}

main,
li {
   display: block;
}

h1,
h2,
h3,
h4 {
   font-size: inherit;    
}

strong {
   font-weight: bold;
}

a,
button {
   color: inherit;    
}

button {
   overflow: visible;
   border: 0;
   font: inherit;
   -webkit-font-smoothing: inherit;
   letter-spacing: inherit;
   background: none;
   cursor: pointer;
}

::-moz-focus-inner {
   padding: 0;
   border: 0;
}

:focus {
   outline: 0;
}

img {
   max-width: 100%;
   height: 100%;
   border: 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.noselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.loading{
   background: url(assets/spin.gif) no-repeat center center #ffffff;
}

.warper{
   position: relative;
   margin: 0 auto;
}

.gap{
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;    
}

.row:after{ content: " "; display: block; height: 0; clear: both; visibility: hidden; }

.col{
   float: left;
   display: block;
}

.col-1-2{
   width: 50%;
}

.center{
   text-align: center;
}

.justify{
   text-align: justify;
}

.no-margin{
   margin: 0 !important;
}

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

.invisible {
   visibility: hidden;
}

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

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

.warper{
   max-width: 1010px;
}

/*--------------------------------------------
 * Global
 ---------------------------------------------*/

a{
   text-decoration: none;
}

h1,h2,h3,h4{
   line-height: 1;
   margin: 20px 0;
   text-transform: uppercase;
   text-align: center;
}

h2{
   font-size: 28px;
   letter-spacing: 1px;    
}

h3{    
   line-height: 18px;
}

p{
   margin: 20px 0;    
}

p a{
   border-bottom: 1px solid;   
}

p a.simple{
   border-bottom: none;
}

/*--------------------------------------------
 * Header
 ---------------------------------------------*/
#header{
   position: relative;    
   background-color: #00006e;
   padding: 20px 0;
   height: 130px;
}

#header .warper{
   height: 100%;
}

#nav-right{
   position: absolute;
   top: 10px;
   right: 0;    
}

.nav-color address{
   font-style: normal;
   font-weight: normal;
}

.nav-color{
   color: rgb(0,220,255);
}

.nav-color a.active,
.nav-color a:hover{
   text-decoration: underline;
}

.nav-color.small{
   display: none;
}

#header .logo h1{
   display: inline;
   margin: 0;
}

#header .menu-large-container{
   position: absolute;
   bottom: -15px;    
}

#header .menu{
   margin-left: -22px;
}

#header .menu li{
   float: left;
   position: relative;
   padding-bottom: 16px;
}

#header .menu li a{
   color: #ffffff;    
   line-height: 1;
   margin-left: 22px;
   text-transform: uppercase;    
   font-weight: bold;
   letter-spacing: 1px;
   font-size: 14px;
}

#header .menu li:hover a{
   border-bottom: 1px solid;
}

#header .menu li.current_page_item a,
#header .menu li .sub-menu a:hover,
#header .menu li .sub-menu li.current_page_item a,
#header .menu li.current_page_parent a{
   color:#9b9b9b;
}

#header .menu li .sub-menu{
   position: absolute;
   background: #fff;
   padding: 5px;
   z-index: 999;
   min-width: 200px;
   width:calc(100% - 28px);
   left: 20px;
   top: 34px;
   display: none;
}

#header .menu li .sub-menu li{
   float: none;
   padding-bottom: 0;
}

#header .menu li .sub-menu a{
   margin: 0;
   font-size: 12px;
   color: black;
   letter-spacing: 0;    
   border-bottom: none;
}

#header .menu li:hover .sub-menu,
#header .menu li a.hover+.sub-menu{
   display: block;
}

#header .slider-content{
   overflow: hidden;
   max-height: 470px;
}

#header.h-ramadan{
   height: 150px;
}

#header.h-ramadan .s-ramadan{
   display: block;
   color: red;
   margin: 7px 0;
}

.no-fontface #header .menu li a{
   font-family: sans-serif;
   font-size: 13px;
}

#slider{
   background-color: #00d2a0;
   padding: 20px 0 60px 0;
}

#content{    
   padding-bottom: 80px;
}

/*--------------------------------------------
 * Slider
 ---------------------------------------------*/

.slick-dotted.slick-slider{
   margin: 0;
}

.slick-dots{
   bottom: 15px;
}

.slick-dots li,
.slick-dots li button,
.slick-dots li button:before{
   width: 10px;
   height: 10px;
}

.slick-dots li button:before{
   border-radius: 10px;
   background-color: #ffffff;
   opacity: 1;
}

.slick-dots li.slick-active button:before{
   background-color: #4ce7ff;    
}

.slick-dots li:hover button:before{
   opacity: .75;  
}

.slick-prev,
.slick-next{
   font-size: 0;
   line-height: 0;
   position: absolute;
   top: 50%;
   display: block;
   width: 13px;
   height: 21px;
   margin-top: -10px;
   padding: 0;
   cursor: pointer;
   color: transparent;
   border: none;
   outline: none;
   background: url(assets/slick-arrow-trans.png) no-repeat;   
   z-index: 999;
}

.slick-prev{
   left: 15px
}

.slick-next{
   right:15px;
   background-position: -13px 0;
}


/*--------------------------------------------
 * section-1 (2 colones)
 ---------------------------------------------*/
.section-1{
   margin: 20px 0 0 -10px;
}

.section-1 article{
   transition: opacity 0.5s ease-out;
   margin: 0 0 0 10px;
}

.section-1 article figure{
   max-width: 495px;
   height: 280px;
   margin: 20px 0;    
}

.section-1 article:hover{
   opacity: 0.4;
}

/*--------------------------------------------
 * section-2 (1 colone)
 ---------------------------------------------*/
.section-2 .row{
   width: 495px;
   margin: 40px auto;
}

.section-2 hr{
   background-color: #919191;
}

.toggler header{
   transition: opacity 0.5s ease-out;
   cursor: pointer;
}

.toggler.ignore-closed header{
   cursor: default;
}

.toggler.closed header:hover{
   opacity: 0.4;
}

.closed .content{
   display: none;
   height: 0;
}

.toggler figcaption{
   display: none;
}

.toggler.active figcaption{
   display: block;
}

.toggler.active .content h3:first-child{
   display: none;
}

.toggler figcaption h3{
   margin-bottom: 0;
}

.toggler.closed .slick-dots,
.toggler.closed .slick-arrow{
   visibility: initial;
}

.toggler a[href="#close"]{    
   text-transform: uppercase;
   font-size: 10px;
   font-weight: bold;
   letter-spacing: 1px;
}

/*--------------------------------------------
 * Menu aside
 ---------------------------------------------*/

aside{
   text-transform: uppercase;
   font-weight: bold;
   font-size: 11px;
   position: absolute;
   z-index: 999;
}

aside .pagenav{
   padding: 20px 0;
   background-color: #fff;
   margin-top: -20px;
}

aside .pagenav.stuck {
   top:20px;
   position:fixed;
   /*
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0,0,0,.1);*/
}

aside .pagenav strong{
   font-size: 16px;
   display: block;
   max-width: 180px;
}

aside .pagenav ul,
aside .pagenav .ul{
   margin: 10px 0 0 0;    
}

aside .pagenav ul a:hover,
aside .pagenav ul li.current_page_item>a{
   color: #9b9b9b;
}

aside .pagenav ul ul{
   margin: 0 0 0 15px;
}

.page-id-1471 aside .page_item_has_children {
   margin: 10px 0;
}

#passees{
   position: relative;   
}

#passees.full,
#passees.full .row-1{
   width: 100%;
}

.grouped{
   width: 100% !important;
   position: relative;
}

#passees .row{
   margin-top: 0;
}

#passees .col-1-2 article,
.grouped .col-1-2 article{
   margin: 0 0 10px 10px;
   position: relative;
}

#passees .row-2 .toggler{
   margin-bottom: 60px;
}

.archive{
   overflow: hidden;
}

.archive figure{
   position: relative;
   overflow: hidden;
}

.archive h2{
   position: absolute;
   color: #fff;
   text-align: center;
   width: 100%;
   margin: 0;
   top: 0;        
   transform: translateY(50%);
   height: 100%;  
   line-height: 50%;
   z-index: 2;
}

.archive figure::before{
   display: block;
   position: absolute;
   content: '';
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   transition: all 0.3s ease-out;
   z-index: 1;
}

.archive header:hover figure::before{
   background-color:#a9a9a8;
   opacity: 0.96;
}

.status,.date{
   display: block;
   font-size: 14px;
   padding: 5px 0;
   letter-spacing: 0;
}

.status-encours{
   color: #FF1400;     
}

.status-avenir{
   color: #0096e6;
}

.date{
   margin-bottom: -10px;
}


/*--------------------------------------------
 * Exposition passées
 *------------------------------------------*/

#passees strong{
   display: block;
   margin-bottom: 4px;
}

/*--------------------------------------------
 * Couleurs
 *------------------------------------------*/

/* votre-visite */
.page-id-1465 #slider,
.parent-pageid-1465 #slider{
   background-color: #ff8c00;    
}

.page-id-1465 .nav-color,
.parent-pageid-1465 .nav-color{
   color: #be46aa;
}

.page-id-1465 #header,
.parent-pageid-1465 #header{
   background-color: #6e006e;
}

/* yves-saint-laurent */
.page-id-1467 #slider{
   background-color: #ff5000;
}

/* le-musee */
.page-id-1469 #slider,
.parent-pageid-1469 #slider{
   background-color: #ff82c8;    
}

.page-id-1469 .nav-color,
.parent-pageid-1469 .nav-color{
   color: #1edc5a;
}

.page-id-1469 #header,
.parent-pageid-1469 #header{
   background-color: #007800;
}

/* expositions */
.page-id-1471 #slider,
.parent-pageid-1471 #slider{
   background-color: #0096e6;
}

.page-id-1471 .nav-color,
.parent-pageid-1471 .nav-color{
   color: #fa7d00;
}

.page-id-1471 #header,
.parent-pageid-1471 #header{
   background-color: #dc0000;
}

/* auditorium */
.page-id-1476 #slider,
.parent-pageid-1476 #slider,
.single-evenements #slider,
.tax-genre #slider{
   background-color: #780000;
}

.page-id-1476 .nav-color,
.parent-pageid-1476 .nav-color,
.single-evenements .nav-color,
.tax-genre .nav-color{
   color: #8a8a8a;
}

.page-id-1476 #header,
.parent-pageid-1476 #header,
.single-evenements #header,
.tax-genre #header{
   background-color: #000000;
}

.row-1696,
.row-1696 .row{
   width: 100% !important;
}

/* bibliotheque */
.page-id-1478 #slider,
.parent-pageid-1478 #slider{
   background-color: #00b33f;
}

.page-id-1478 .nav-color,
.parent-pageid-1478 .nav-color{
   color: #be46a8;
}

.page-id-1478 #header,
.parent-pageid-1478 #header{
   background-color: #6e036d;
}


/* couleur label auditorium/evenement */
.genre-23{
   color: #820078;
}

.genre-24{
   color: #00b43c;
}

.genre-25{
   color: #ff5000;
}

.genre-26{
   color: #003c96;
}

.genre-27{
   color: #ff0014;
}

.genre-28{
   color: #00a0e6;
}

.genre-29{
   color: #ff82c8;
}

/*--------------------------------------------
 * Footer
 *------------------------------------------*/
#footer{
   border-top: 1px solid #cecece;
   text-align: center;
   font-size: 13px;        
}

#footer p{
   margin: 10px 0;
   color: #9b9b9b;
}

#footer p a{
   border-bottom: none;
   margin: 0 3px;
   transition: color 0.3s ease-out;
}

#footer p a:hover{
   color: black;
}

#footer hr{
   margin:0;
   background-color: #e7e7e7;
   height: 2px;
}

#footer .share{
   display: inline-block;    
   height: 16px;
   background: url(assets/social-icon.png) no-repeat;
   overflow: hidden;
   margin-right: 5px;
   position: relative;
   top: 4px;
}

#footer .share.facebook{
   width: 15px;
}

#footer .share.twitter{
   width: 21px;
   background-position: -21px 0;
}

#footer .share.instagram{
   width: 50px;
   background-position: -45px 0;
}

.hide-separation hr{
   display: none;
}

/*--------------------------------------------
 * Mobile
 *------------------------------------------*/

#nav-icon {
   width: 29px;
   height: 22px;
   display: block;
   position: absolute;    
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   transition: .5s;
   cursor: pointer;
   top: 0;
   right: 10px;
   display: none;
}

#nav-icon span {
   display: block;
   position: absolute;
   height: 3px;
   width: 100%;
   background: #FFF;
   opacity: 1;
   left: 0;
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   transition: .15s ease-in-out;
}

#nav-icon span:nth-child(1) {
   top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
   top: 9px;
}

#nav-icon span:nth-child(4) {
   top: 18px;
}

#nav-icon.open span:nth-child(1) {
   top: 18px;
   width: 0%;
   left: 50%;
}

#nav-icon.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
   top: 18px;
   width: 0%;
   left: 50%;
}

@media screen and (max-width: 1024px) {
   #header .menu-large-container{
      position: relative;   
      bottom: auto;
      margin: 0;
      -webkit-overflow-scrolling: touch;
      -webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;                               
      height: 0;
      overflow: hidden;
   }

   #header .menu-large-container.open{
      min-height: 230px;
      height: auto;
      margin: 20px 0;
      overflow: visible;
   }

   #header .menu{
      margin: 0;
   }

   #header .menu li{
      float: none;
      text-align: center;
      padding: 5px 0;        
   }

   #header .menu li:after{
      display: block;
      content: '';
      height: 1px;
      background-color: #fff;
      opacity: .4;
      margin-top: 6px;
   }

   #header .menu li:last-child:after{
      display: none;
   }

   #header .menu li a{
      margin: 0;
   }

   #header .menu li .sub-menu{
      position: relative;    
      top: 0;
      left: 0;
      width: auto;
   }

   #header .menu li .sub-menu li:after{
      display: none;
   }

   #header .menu li .sub-menu li{
      padding: 3px 0;
   }

   #header,
   #header.h-ramadan{
      height: auto;
      padding: 10px 0;
   }

   #header .logo img{        
      width: 240px;                
   }

   #nav-icon{
      top: 14px;
      right :0;
      display: block;
   }

   #nav-right{
      display: none;
   }

   .nav-color.small{
      display: block;
   }

   .s-warper{        
      position: relative;
      margin: 0 20px;        
   }

   .section-1 article figure{
      height: auto;
   }
}

@media screen and (max-width: 768px) {

   #slider{
      padding: 15px 0;
      padding-bottom: 20px;
   }
}

@media screen and (max-width: 767px) {

   .col{
      float: none;
      width: 100%;
   }

   .section-1 article,
   .section-1{
      margin-left: 0;
   }

   .section-2 .row{
      width: auto;
   }

   #content{
      padding-bottom: 40px;
   }

   hr{
      margin: 10px 0;
   }

   .wpcf7 .contact-text{
      float: none;
   }

   div.wpcf7{
      margin-top: 0 !important;
   }

   aside{
      display: none;
   }

   .section-2 .row{
      margin: 20px auto;
   }

   .slick-arrow{
      visibility: hidden;
   }
}
/* Added by Abdel */
.warper .s-warper h1 {
    text-align: left !important;
}
a.elementor-button-link.elementor-button.elementor-size-md {
    font-family: 'Effra', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    font-style: normal;
    line-height: 0.7em;
    letter-spacing: 2.2px;
    background-color: #fff;
    padding: 8px 8px;
    color: #00006e;
    margin-left: 42px;
    border-radius: 4px;
    box-shadow: 6px 6px 7px 0px #000000;
    margin-top: 25px !important;
    }
a.elementor-button-link.elementor-button.elementor-size-md:hover {
	background-color: #00d2a0;
    color: #fff;
    }
span.elementor-button-content-wrapper{
    margin: auto;
}
@media screen and (max-width: 671px)
{
    a.elementor-button-link.elementor-button.elementor-size-md {
    display: flex;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 230px;
	padding: 12px 0px;
    }
}