/*   
Theme Name: Dark
Theme URI: http://www.marocwebawards.com
Description: MWA14
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Version: 1.0
*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&family=Vazirmatn&display=swap');

/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul[role="list"],ol[role="list"] {list-style: none;}
html {scroll-behavior: smooth;}
body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

p {font-weight: 200;}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* ==========================================================================
   General
   ========================================================================== */
body {font-family: 'Poppins', 'Vazirmatn', sans-serif; font-size: 16px; background: #181A20; color: #FCFDFF; cursor: none;}
.row {width: 100%; max-width: 1200px; margin: 0 auto;}
.btn {  border: 2px solid #fff; color: #fff; opacity: .85; text-transform: uppercase; text-decoration: none; border-radius: 30px;letter-spacing: 1px; font-size: 14px; padding: 10px 20px; margin: 0 20px 20px 0; display: inline-block; }
.btn.primary { background: #fff; color: #181A20; font-weight: 500; }
.container { padding-top: 160px; }
/*.btn.primary {border: 2px solid #D6A848; background: #D6A848; }*/

.custom-cursor {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  -webkit-transition: -webkit-transform 350ms ease;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease;
  -webkit-transform: translate(-50%, -50%) scale(0.2);
          transform: translate(-50%, -50%) scale(0.2);
  z-index: 1000;
}

.custom-cursor--link {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}


.header { width: 100%;  padding: 20px 40px; position: fixed; top: 0; left: 0; text-transform: uppercase; font-weight: 500; z-index: 100; }
.header .row {max-width: 100%; display: flex; align-items: center; align-content: space-between;}
.header nav {flex-grow: 1; text-align: right;}
.header li {display: inline-block; padding: 5px;}
.header a {color: #fff; opacity: .87; text-decoration: none; font-size: 14px; padding: 8px 15px;}
.header a.action { border: 2px solid #fff; color: #181A20; background: #fff; border-radius: 20px; margin-left: 15px; letter-spacing: 1px; }
.logo {padding: 0 !important; opacity: 1 !important;}
.logo img {width: 90px;}
.fblink {position:relative;}
.fblink:before {content: "";  background: url('img/fb.svg') center center no-repeat; background-size: 20px; position: absolute; top: 0; left: 0; height: 100%; width: 100%;}


.hero {min-height: calc(100vh + 40px); position: relative; background: #181A20; padding-left: 10vw; padding-bottom: 40px; display: flex; justify-content: center; flex-direction: column;}
.hero:before {content: ""; background: url('img/medaille.png') left 80px no-repeat; 
background-size: calc(100vh - 60px); height: 100vh; width:33vw;  position: absolute; right: 0; top: 0; }

span.pop {color:#D6A848; font-weight: 500; font-size: 12px; letter-spacing: 1px; margin-bottom: 20px; display: block; position: relative; padding-left: 70px;}
span.pop:after {content: ""; width: 40px; height: 1px; background: #fff; opacity: .30; position: absolute; left: 15px; top: 50%;}
span.pop:before {content: ""; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .85; position: absolute; left: 0; top: calc(50% - 2px);}



.hero:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('img/noise.png') center center repeat;}
.hero article {position: relative; z-index: 2; width: 100%; max-width: 750px; padding-top: 60px; }

.hero h1 {font-size: 52px; line-height: 1.3; margin-bottom: 40px;}
.hero p {font-weight: 200; opacity: .72; margin-bottom: 30px;}
.hero .share { position: absolute; bottom: 90px; left:50px; z-index: 2; display: flex;}
.hero .share span {text-transform: uppercase; letter-spacing: 1px; font-size: 10px; font-weight: 300; position: relative; padding-right: 50px; }
.hero .share span:after {content: ""; width: 40px; height: 1px; background: #fff; opacity: .30; position: absolute; right: 0; top: 50%;}
.hero .share a {display: inline-block; margin: 0 7px; padding: 0 2px;}
.hero .share a img {width: 18px;}

.steps {padding: 60px 10vw; width: 100%; background: #16181d; display: flex; justify-content: space-between; align-items: center;}
.steps article {display: flex; align-items: center; position: relative; padding: 40px 0 0 83px;}
.steps article span {
  font-weight: 700; font-size: 120px;
  color: #fff; opacity: .1;
  -webkit-text-fill-color: #16181d;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  position: absolute; left: 0; bottom: 0;
  line-height: 95px;
}
.steps article .sc {padding-left: 10px; opacity: 0.85;}
.steps article h1 {}
.steps article p {font-weight: 200; font-size: 14px; letter-spacing: 1px;}

.steps .countdown {}
.steps .countdown .counter {display: flex; margin-bottom: 5px;}
.steps .countdown .ct {opacity: .2; padding: 0 10px; text-align: center;}
.steps .countdown .ct:last-child {width: 130px;}
.steps .countdown span { margin-right: 2px; 
  font-size: 70px; font-weight: 700;
  color: #fff; line-height: 65px;
  -webkit-text-fill-color: #16181d;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;}
.steps .countdown p {font-weight: 200; font-size: 14px; letter-spacing: 1px; text-align: center; opacity: .85;}
.seconds {-webkit-text-fill-color: inherit !important ; opacity: 0.2 }


.about {width: 100%; padding:  120px 10vw; display: flex;}
.about h2 { margin-bottom: 30px; opacity: .85; }
.about h2 span {font-weight: 300;}
.about .homecontent {flex: 0 0  40vw; padding-right: 60px;}
.about .homecontent p {opacity: 0.85; line-height: 1.8; margin-bottom: 40px;}
.about .cats .btn {margin: 0 10px 20px 0; border: 0; background: rgba(255,255,255,.03); color: rgba(255,255,255,.3); }
.about .cats .btn:hover {color: #fff;}
.partenaire {padding-top: 30px;}
.partenaire a.inwi {}
.partenaire img {max-width: 350px !important; opacity: .85;}



/* ==========================================================================
   Archive
   ========================================================================== */

.archive {margin: 0 auto; width: 100%; max-width: 1200px;}
.archive h1 { font-size: 26px; line-height: 32px; margin-bottom: 50px; opacity: 0.85; }
.archive h1 span { color:#D6A848; }
.archive article { margin-bottom: 10px; width: 100%; float: left; padding-left: 110px; position: relative; }
.archive article a { float: left; padding: 7px 0; color: #fff; opacity: 0.85; }
.archive article span { float: left; padding-top: 1px; color: #fff; opacity: .5; width: 85px; text-align: right; position: absolute; left: 0; font-size: 12px;font-weight: 300;}
.archive article h2 { float: left; font-weight: 600; font-size: 16px; letter-spacing: 1px; transition: all .3s cubic-bezier(0.46, 0, 0.07, 1); }
.archive article a:hover span { opacity: 1; opacity: 0.8; transition: all .3s cubic-bezier(0.46, 0, 0.07, 1); }
.archive article a:hover h2  { color: #D6A848; margin-left: 20px; transition: all .3s cubic-bezier(0.46, 0, 0.07, 1); }
.resp-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin-bottom: 40px;
}
.resp-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.remodal .resp-video { margin-bottom: 0 !important;}



/* ==========================================================================
   Content
   ========================================================================== */

.content { font-size: 19px; line-height: 38px; width: 100%; float: left;}
.post-head { margin-bottom: 30px;}
.post-head .post-title {text-align: center; margin : 10px 0 ;font-size: 26px; 
    font-weight: 600;
    text-transform: uppercase; color: #fff; opacity: 0.85;}
span.date { font-size: 14px; display: block; text-align: center; color: #999; line-height: 14px;}
.content .wide-img { margin-bottom: 30px; width: 100% !important; height: auto;}
.content p { font-size: 16px; line-height: 28px; margin-bottom: 30px; }
.content p strong {opacity: 0.5;}
.content p a {text-decoration: underline; color: #fff; opacity: 0.50;}
.content p.sous-titre { width: 100%; font-size: 15px; margin-bottom: 40px; text-align: center; color: #666; }
.content-bloc {max-width: 750px; margin: 0 auto; text-align: justify; clear: both;}
.content-bloc.col-2 { max-width: 50%; float: left; padding: 0 30px; clear: inherit;}
.content-bloc.col-3 { max-width: 33.33%; float: left; padding: 0 30px; clear: inherit;}
.content-bloc.left { max-width: 100%; padding-right: 450px; position: relative;}
.content-bloc.left aside{ position: absolute; top: 0; right: 0; width: 390px;}
.content-bloc.right { max-width: 100%; padding-left: 450px; position: relative;}
.content-bloc.right aside  { position: absolute; top: 0; left: 0; width: 390px;}
.content-bloc iframe {max-width: 100%;}

aside.top-60 { top: 60px !important;}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: #fff; opacity: 0.85; }
.content h1 { font-size: 26px; line-height: 32px; font-weight: 600; text-align: center; color: #2d3583; }
.content h2 { font-size: 27px; margin-bottom: 30px; font-weight: 600;}
.content h3 { font-size: 22px; margin-bottom: 20px; font-weight: 600;}
.content h4 { font-size: 20px; margin-bottom: 16px; font-weight: 600;}
.content h5 { font-size: 20px; margin-bottom: 10px; text-transform: uppercase; color: #555;}
.content h6 { font-size: 18px; margin-bottom: 10px; text-transform: uppercase; color: #555;}
.content ul { margin-left: 30px; line-height: 28px; font-size: 16px;  list-style: circle; margin-bottom: 30px;}
.content em { color: #666;}
.content code {background: #FCF8E3; color: #c7254e; padding: 2px 4px; }
.content hr { max-width: 500px; margin: 0 auto; margin-bottom: 40px; border: 0; border-bottom: 1px solid #ddd; position: relative; clear: both;}
.content hr:after {
    content: "";
    height: 3px;
    width: 30px;
    background-color: #C2A40F;
    display: inline-block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    margin-left: -15px;
  }
.content img { max-width: 100%; }
.content table {width: 100%; font-size: 14px;text-align:center; margin-bottom:30px;}
.content td, th { padding: 2px 10px;border: 1px solid #eee;}

.wp-block-embed-youtube iframe {display: block; margin: 0 auto;}

/* ==========================================================================
   Club
   ========================================================================== */
.equipe ul { width: 100%; text-align: center; padding-top: 30px; letter-spacing: 1px;}
.equipe li { display: inline-table; width: 200px; margin: 0 15px 60px 15px; font-size: 18px; font-weight: 500;}
.equipe li img { display: block; border-radius: 50%; max-width: 160px; height: auto; margin: 0 auto 20px auto; }
.equipe p { font-size: 15px; text-align: center; margin-bottom: 30px;}
.club-mwa img { height: auto;}
.club-mwa li {margin: 0 15px 70px 15px; font-size: 12px; font-weight: 400;}
.fcn {display: block; margin-top: 8px;font-size: 11px;color: #c2a40f;}
.prof-widget { 
 font-family: 'dosis', sans-serif;
  max-width:450px;
  margin: 0 auto 30px auto;
  overflow: hidden;
}
.prof-widget .img-prof { margin-bottom: 30px;  width: 100%;}
.prof-widget .img-prof img {  width: 200px; height: 200px; display: block; border-radius: 50%; margin: 0 auto;}
.prof-widget p {
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 15px;
  color: #222;
  display: block;
  text-align: justify;
}
.content-prof { padding: 10px; width: 100%; max-width: 470px; float: right;}
.prof-widget .spans { margin-bottom: 10px; float: left; width: 100%;}
.prof-widget span.c-link { font-size: 16px; display: block; width: 100%; background: url('img/link.png') left center no-repeat; padding-left: 26px;}
.prof-widget span.par { font-size: 14px; display: block;}




/* ==========================================================================
   Plugins
   ========================================================================== */

/* Slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/* Video popup */
.videopopupjs{background-color:#000;background-color:rgba(0,0,0,.6);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;text-align:start!important}.videopopupjs--hide{-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:videoPopupJsHide;animation-name:videoPopupJsHide}.videopopupjs__close{width:30px;height:30px;cursor:pointer;display:block;margin-bottom:10px;color:rgba(255,255,255,.59)}.videopopupjs__close:after{width:30px;height:30px;display:block;text-align:center;content:'X';font-family:'Verdana';border-radius:50%;background:#333;line-height:2.2;font-size:13px}.videopopupjs__close:hover{opacity:.5}.videopopupjs--animation{opacity:0;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:videoPopupJs;animation-name:videoPopupJs}.videopopupjs__content{margin:0 auto;height:100%;height:500px;width:100%;margin-top:5%}.videopopupjs__content iframe{width:100%;height:100%}.videopopupjs__block--notfound{position:absolute;top:0;bottom:0;margin:auto 0;width:100%;height:500px;background-color:#fff;text-align:center;vertical-align:middle;line-height:500px;font-family:'Arial';font-size:20px}@media(max-width:768px){.videopopupjs__content{max-width:90%!important}}@-webkit-keyframes videoPopupJs{0%{opacity:0}100%{opacity:1}}@keyframes videoPopupJs{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes videoPopupJsHide{0%{opacity:1}100%{opacity:0}}@keyframes videoPopupJsHide{0%{opacity:1}100%{opacity:0}}

/* Hamburger Menu */
.hamburger{border-radius:3px; padding:10px 10px 6px 10px;background: none;display:inline-block;display:none;cursor:pointer;float:right;transition-property:opacity,-webkit-filter;transition-property:opacity,filter;transition-property:opacity,filter,-webkit-filter;transition-duration:0.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;border:0;margin:0;z-index:9998;overflow:visible;position:absolute;top:35px;right:20px}.hamburger-box{width:25px;height:18px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-2px}.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{width:26px;height:2px;background-color:#fff;border-radius:4px;position:absolute;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;transition-duration:0.15s;transition-timing-function:ease}.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}.hamburger-inner::before{top:-7px}.hamburger-inner::after{bottom:-7px}.hamburger--squeeze .hamburger-inner{transition-duration:0.1s;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze .hamburger-inner::before{transition:top 0.1s 0.14s ease,opacity 0.1s ease}.hamburger--squeeze .hamburger-inner::after{transition:bottom 0.1s 0.14s ease,-webkit-transform 0.1s cubic-bezier(.55,.055,.675,.19);transition:bottom 0.1s 0.14s ease,transform 0.1s cubic-bezier(.55,.055,.675,.19);transition:bottom 0.1s 0.14s ease,transform 0.1s cubic-bezier(.55,.055,.675,.19),-webkit-transform 0.1s cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);transition-delay:0.14s;background:#fff;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.hamburger--squeeze.is-active .hamburger-inner::before{top:0;background:#fff;opacity:0;transition:top 0.1s ease,opacity 0.1s 0.14s ease}.hamburger--squeeze.is-active .hamburger-inner::after{bottom:0;background:#fff;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transition:bottom 0.1s ease,-webkit-transform 0.1s 0.14s cubic-bezier(.215,.61,.355,1);transition:bottom 0.1s ease,transform 0.1s 0.14s cubic-bezier(.215,.61,.355,1);transition:bottom 0.1s ease,transform 0.1s 0.14s cubic-bezier(.215,.61,.355,1),-webkit-transform 0.1s 0.14s cubic-bezier(.215,.61,.355,1)}


/* ==========================================================================
   Media Query
   ========================================================================== */
@media only screen and (max-width: 968px) { 
.container { }
.how article.quicklinks, .kit article.quicklinks {padding-left: 25px;grid-gap: 10px;}
}

@media only screen and (max-width: 768px) { 
/*.hamburger { display: inline-block; }*/
.content-bloc.left, .content-bloc.right { position: initial; padding: 0; }
.content-bloc.left aside, .content-bloc.right aside { position: initial ; width: 96%;}
.col-2.col-2 { max-width: 100%; padding: 0;}
.col-3.col-3 { max-width: 50% ; padding: 0 10px ;}
.menu {height: 60px; position: initial; width: 100%; margin-bottom: 60px; background:#D6A848;}
.logo img {  width: 70px;}
.actionbtn {z-index: 9999; position: fixed;bottom: 0;left: 0;width: 100%; padding: 15px 0 10px 0;background: #fff; text-align: center;
-webkit-box-shadow: 0px 1px 26px -1px rgba(0,0,0,0.37);
-moz-box-shadow: 0px 1px 26px -1px rgba(0,0,0,0.37);
box-shadow: 0px 1px 26px -1px rgba(0,0,0,0.37);}
.actionbtn .btn {bottom: inherit; top: inherit; right: inherit; position: initial; }
.actionbtn .showbtn {right: inherit;}
.header {padding: 20px;}
.header nav {display: none; padding: 100px 20px; text-align: center;transform-origin: initial;transform: inherit; top:0; height: 100%; width: 100%; background-color: #181A20; z-index: 9997;}
.menu ul li {display: block; margin: 0 0 30px 0; font-size: 19px;}
.menu ul.show { display: block; }
.container {padding: 100px 20px 20px 20px;}
.row { padding: 0; }
.about h1 {margin: 0 0 20px 0;}
.about {padding-top: 40px; flex-direction: column; align-items: inherit; }
.about .homecontent {padding-right: 0;}
.how article,.kit article, article.quicklinks { width: 100% !important; padding-left: 0px !important; }
.how, .kit {flex-direction: column; padding: 60px 0;}
.bestof { flex-direction: column; }
.bestof article { width: 100%; margin-bottom: 30px; }
.soiree::before {right: inherit; left: 0; }
.laureats h1 { font-size: 19px; }
footer {padding: 10px 10px 90px 10px; float: left; font-size: 12px;}
.laureats .slider article { width: 250px; }
.slick-prev, .slick-next {background-size: auto 24px;}
.slick-arrow { width: 40px; height: 40px; }
.slick-arrow { right: 0; }
.slick-prev { right: 50px; }
.hero {padding:100px 20px 20px 20px;}
.hero h1 {font-size: 24px;}
.hero p {font-size: 15px;}
.hero .share {bottom:0; left: 30px;}
.steps {padding: 60px 20px; flex-direction: column;}
.steps .countdown span {font-size:33px;}
.steps .countdown .ct:last-child {width: 60px;}
.steps .countdown {padding-top: 40px;}
.partenaire img {max-width: 240px !important;}
.partenaire {margin-bottom: 60px;}
.header {position: absolute;}
.about .homecontent p {font-size: 14px;}
.header a.action {flex-grow:1; text-align: center;}

}

@media only screen and (max-width: 550px) { 
.hide-mobile { display: none;}
.content-bloc.left, .content-bloc.right { position: initial; padding: 0; }
.content-bloc.left aside, .content-bloc.right aside { position: initial ; width: 96%;}
.col-2.col-2 { max-width: 100%; padding: 0;}
.col-3.col-3 { max-width: 100%; padding: 0;}
.f-bottom a.right { display: none;}
.f-bottom p { text-align: center;}
.etape1 h4, .etape3 h4 { font-size:17px; left: 30px; }
.etape2 h4 { font-size:17px; right: 30px; }
.etape1 .date-end, .etape3 .date-end, .etape1 .date-start, .etape3 .date-start { left: -145px;}
.etape2 .date-end, .etape2 .date-start { right: -145px;}
img { max-width: 100%;}
footer span { margin-top: 10px; float: left; }
.partenaires article, .partenaires img.adk, .partenaires img.synergie, .partenaires img.jawjab, .partenaires img.logo2m{ margin-right: 0px; }
.partenaires { text-align: center; flex-direction: column; float: inherit !important;}
.btn {font-size: 12px;}
}